В видео разбираются сложные вопросы и задачи собеседования: ООП, SOLID, алгоритмы, рефакторинг, Docker и Kubernetes.
#read_watch
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥱8🔥4❤3👏1
  🕹 npm install: хитрость фронтендера
Каждый сталкивался с дилеммой: проверять всё или просто вставить команду и надеяться, что заработает?
➕  Проверяем пакет перед установкой
➕  Копируем команду из StackOverflow и надеемся, что заработает
Голосуем реакциями:
👍 — Осторожность
❤️ — Копипаст
🐸  Библиотека фронтендера
#code_battle
Каждый сталкивался с дилеммой: проверять всё или просто вставить команду и надеяться, что заработает?
Голосуем реакциями:
👍 — Осторожность
❤️ — Копипаст
#code_battle
Please open Telegram to view this post
    VIEW IN TELEGRAM
  ❤24👍15
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰6❤3😁3👍1
  Обычно мы пишем:
@media (min-width: 600px) {
.card { flex-direction: row; }
}
Но что, если карточка живёт в разных местах — и в сайдбаре, и в сетке?
Глобальный
@media ломает вёрстку.  💡 Решение —
@container  
@container (min-width: 400px) {
.card { flex-direction: row; }
}
Теперь адаптация зависит от ширины контейнера, а не всего экрана. Каждый блок подстраивается под своё окружение — без медиазапросного ада.
#readme #css
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥11❤7🥰6
  Т-Технологии зовут на Стековку
1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.
Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.
Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.
Как участвовать?
Просто зарегистрируйтесь до 31 октября
1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.
Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.
Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.
Как участвовать?
Просто зарегистрируйтесь до 31 октября
❤4🥰3
  📦 Почему [] == ![] возвращает true
Кажется нелогичным: пустой массив и его отрицание — но результат true. Разберём по шагам (по спецификации ECMAScript 262):
1️⃣   Оператор ![]  
- [] приводится к true, потому что любой объект в JS — truthy.
- !true даёт false.
 
Итак, ![] → false.
2️⃣   Сравнение [] == false  
- По правилам нестрогого сравнения (==), если один операнд — объект, он приводится к примитиву (ToPrimitive).
- [] → "" (пустая строка).
Теперь выражение выглядит так: "" == false.
3️⃣   Сравнение "" == false  
- false → 0, "" → 0.
- 0 == 0 → true.
✅  Итог: [] == ![] возвращает true из-за цепочки приведений типов.
🐸  Библиотека фронтендера
#career_merge
Кажется нелогичным: пустой массив и его отрицание — но результат true. Разберём по шагам (по спецификации ECMAScript 262):
- [] приводится к true, потому что любой объект в JS — truthy.
- !true даёт false.
Итак, ![] → false.
- По правилам нестрогого сравнения (==), если один операнд — объект, он приводится к примитиву (ToPrimitive).
- [] → "" (пустая строка).
Теперь выражение выглядит так: "" == false.
- false → 0, "" → 0.
- 0 == 0 → true.
#career_merge
Please open Telegram to view this post
    VIEW IN TELEGRAM
  ❤15🥱3👍1😁1
  Правильный ответ:
  Anonymous Quiz
    13%
    false true
      
    36%
    true false
      
    28%
    false false
      
    9%
    true true
      
    14%
    Посмотреть ответы
      
    🤔6😁4🔥3
  🧠 Готовишься к собесам, а ноутбук еле тянет IDE?
Самое время прокачать скиллы и апгрейднуть железо!
Proglib Academy разыгрывает MacBook Pro 14 (M3 Pro, 36 GB, 1 TB SSD) 💻
Купи любой наш курс до 15 ноября → пройди 2 недели обучения → напиши куратору #розыгрыш. Всё, ты в игре!
📚 Среди курсов:
▫️ Алгоритмы и структуры данных — топ для подготовки к собесам в Яндекс и FAANG.
▫️ Архитектуры и шаблоны проектирования — чтобы думать как senior.
▫️ Python, математика для DS, основы IT и другие направления.
👉 Принять участие
Самое время прокачать скиллы и апгрейднуть железо!
Proglib Academy разыгрывает MacBook Pro 14 (M3 Pro, 36 GB, 1 TB SSD) 💻
Купи любой наш курс до 15 ноября → пройди 2 недели обучения → напиши куратору #розыгрыш. Всё, ты в игре!
📚 Среди курсов:
▫️ Алгоритмы и структуры данных — топ для подготовки к собесам в Яндекс и FAANG.
▫️ Архитектуры и шаблоны проектирования — чтобы думать как senior.
▫️ Python, математика для DS, основы IT и другие направления.
👉 Принять участие
🥰4🥱4❤1
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰6😁4👏1😢1
  Когда метод объекта передаётся как колбэк, он теряет контекст (см. фото). После клика в консоли будет undefined.
this зависит от способа вызова функции, а не от места, где она объявлена.
При передаче метода как ссылки (btn.handleClick) контекст теряется — this больше не указывает на объект.
1. Явно привязать контекст
button.addEventListener('click', btn.handleClick.bind(btn));
2. Использовать стрелочную функцию
button.addEventListener('click', () => btn.handleClick());
#hotfix #js
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰3❤1👍1
  Иногда переменная с нужным именем вроде бы существует — но скрипт выбрасывает ReferenceError.
#under_hood #js
Please open Telegram to view this post
    VIEW IN TELEGRAM
  Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰4
  Эксперимент разработчика, который переписал фронт для Telegram-ботов на Rust и разобрался, где язык реально выигрывает у JS.
Medium-разбор, почему XSS, CSP и supply-chain атаки всё ещё ломают SPA, и как встроить безопасность в CI/CD.
Автор показывает реальные кейсы, обходные пути и поднимает важный вопрос: имеет ли фреймворк право на полный контроль над DOM?
#read_watch #react #js #ts
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰4🔥1
  This media is not supported in your browser
    VIEW IN TELEGRAM
  🏓 Table tenniCSS
Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.
Отличный пример того, насколько мощными могут быть CSS-анимации.
 
🔗  Попробуйте запустить демо на CodePen
🐸  Библиотека фронтендера
#readme #css
Мини-анимация, созданная только с помощью HTML и SCSS, без единой строки JS.
Отличный пример того, насколько мощными могут быть CSS-анимации.
#readme #css
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🔥6🥰3
  🎁 Конкурс от Proglib Academy!
Кстати, если кто-то ещё не в курсе — у нас тут раздают MacBook Pro 14.
Да-да, не шутка, настоящий, железный, с M3 Pro
Но! Чтобы успеть пройти 2 недели обучения к 15 ноября, курс нужно взять до конца октября — и сейчас на всё скидка 40%.
Чтобы поучаствовать, нужно:
1️⃣ Покупаешь любой курс до конца октября;
2️⃣ Проходишь 2 недели обучения к 15 ноября;
3️⃣ Написать куратору в чат #розыгрыш.
До 15 ноября, потом всё — поезд (и макбук) уйдёт.
👉 Участвовать в розыгрыше
Кстати, если кто-то ещё не в курсе — у нас тут раздают MacBook Pro 14.
Да-да, не шутка, настоящий, железный, с M3 Pro
Но! Чтобы успеть пройти 2 недели обучения к 15 ноября, курс нужно взять до конца октября — и сейчас на всё скидка 40%.
Чтобы поучаствовать, нужно:
1️⃣ Покупаешь любой курс до конца октября;
2️⃣ Проходишь 2 недели обучения к 15 ноября;
3️⃣ Написать куратору в чат #розыгрыш.
До 15 ноября, потом всё — поезд (и макбук) уйдёт.
👉 Участвовать в розыгрыше
🥰3
  В React кастомные хуки (useAuth, useCart, useFetch) — это не просто удобство, а полноценный слой бизнес-логики.
📖 По документации React:
“Custom Hooks let you extract component logic into reusable functions.”
“By convention, a custom Hook’s name starts with ‘use’.”
— изолированная логика вне UI;
— переиспользуемые мини-сервисы;
— лаконичные компоненты.
Пример:
function useAuth() {
const [user, setUser] = useState(null);
const login = async (creds) => { /* запрос к API */ };
const logout = () => setUser(null);
return { user, login, logout };
}
#blueprint
Please open Telegram to view this post
    VIEW IN TELEGRAM
  🥰3🔥2
  У каждого фронтендера в проекте есть свой «скелет в шкафу». Это тот самый компонент . Он начинался как безобидный ProductCard.tsx, а теперь в нём 1500 строк, он сам ходит в API, знает структуру ответа бэкенда до пятого уровня вложенности, дёргает localStorage, форматирует цены и отправляет аналитику.
Знакомая боль? Этот компонент — «серый кардинал» приложения. Он знает слишком много и делает всё сразу.
Стоит бэкенду поменять название поля product.price на product.cost — всё падает. Решили сменить fetch на axios? Компонент снова ломается. Это хрупкая архитектура, которая рассыпается от любого чиха.
Вся эта проблема идеально описывается классическими принципами Cohesion и Coupling. Вот только в классическом переводе начинается ад: «высокая связность» (Cohesion) и «низкая связанность» (Coupling).
Серьёзно, попробуйте в пятницу вечером на код-ревью быстро объяснить коллеге, какая из «связанностей» у него не та. Это же задачка для логопеда, а не для инженеров .
Тема Сенюков из Кинопоиска в своём недавнем посте предложил гениально простой выход из этого лингвистического тупика. Он предлагает использовать термины:
Cohesion → Связность
Coupling → Сцепленность
Сразу всё встаёт на свои места.
1. Высокая Связность (Cohesion). Это когда модуль делает одну понятную вещь. Он сфокусирован. (Наш 1500-строчный монстр, который делает всё, имеет низкую связность).
2. Низкая Сцепленность (Coupling). Это когда модуль почти ничего не знает о внешнем мире. Он не прибит гвоздями к fetch, localStorage или конкретной структуре API. Он получает всё необходимое снаружи (через props или context). (Наш монстр, наоборот, намертво сцеплен со всем).
Идея в том, чтобы вместо «серых кардиналов» собирать код как конструктор LEGO . Когда каждый компонент получает зависимости снаружи, его легко тестировать, мокать и переиспользовать.
  
  Знакомая боль? Этот компонент — «серый кардинал» приложения. Он знает слишком много и делает всё сразу.
Стоит бэкенду поменять название поля product.price на product.cost — всё падает. Решили сменить fetch на axios? Компонент снова ломается. Это хрупкая архитектура, которая рассыпается от любого чиха.
Вся эта проблема идеально описывается классическими принципами Cohesion и Coupling. Вот только в классическом переводе начинается ад: «высокая связность» (Cohesion) и «низкая связанность» (Coupling).
Серьёзно, попробуйте в пятницу вечером на код-ревью быстро объяснить коллеге, какая из «связанностей» у него не та. Это же задачка для логопеда, а не для инженеров .
Тема Сенюков из Кинопоиска в своём недавнем посте предложил гениально простой выход из этого лингвистического тупика. Он предлагает использовать термины:
Cohesion → Связность
Coupling → Сцепленность
Сразу всё встаёт на свои места.
1. Высокая Связность (Cohesion). Это когда модуль делает одну понятную вещь. Он сфокусирован. (Наш 1500-строчный монстр, который делает всё, имеет низкую связность).
2. Низкая Сцепленность (Coupling). Это когда модуль почти ничего не знает о внешнем мире. Он не прибит гвоздями к fetch, localStorage или конкретной структуре API. Он получает всё необходимое снаружи (через props или context). (Наш монстр, наоборот, намертво сцеплен со всем).
Идея в том, чтобы вместо «серых кардиналов» собирать код как конструктор LEGO . Когда каждый компонент получает зависимости снаружи, его легко тестировать, мокать и переиспользовать.
Telegram
  
  ТОП - Тёма о программировани
  Cohesion и Coupling 🧩🔗
Здарова, работяги!
Если очень коротко: хорошая архитектура — это высокая связность внутри модулей (cohesion) и низкая связанность между ними (coupling). Эти два термина отлично объясняют, почему код либо живёт годами, либо рассыпается…
Здарова, работяги!
Если очень коротко: хорошая архитектура — это высокая связность внутри модулей (cohesion) и низкая связанность между ними (coupling). Эти два термина отлично объясняют, почему код либо живёт годами, либо рассыпается…
❤6🔥3🥰2
  