Библиотека фронтендера | Frontend, JS, JavaScript, React.js, Angular.js, Vue.js

🤔 Вопрос с собеседования

Что выведет этот код?

❤️ — undefined
🔥 — "Alex"
👍 — "Max"
🤔 — будет ошибка

👇 Правильный ответ (нажми, чтобы прочитать):

После delete admin.name собственного свойства name у admin больше нет. Но admin создан через Object.create(user), поэтому при обращении к admin.name JavaScript ищет свойство в прототипе и находит "Alex".

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#career_merge

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#pixel_pause

🤔 Вопрос с собеседования

Что выведет этот код?

❤️ — 42 и 42
🔥 — 42 и undefined
👍 — undefined и undefined

👇 Правильный ответ (нажми, чтобы прочитать):

42
undefined

Обычная функция получает this в зависимости от способа вызова:

obj.regular();

Здесь this указывает на obj, поэтому возвращается 42.

Стрелочная функция не имеет собственного this. Она берёт его из внешнего контекста, где объект создавался. Поэтому this.value не относится к obj и обычно даёт undefined.

🔘 Если нужна стрелочная функция с контекстом объекта, можно использовать обычную функцию или явно привязать this:

const obj = {
value: 42,
arrow: function () {
return this.value;
},
};

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#career_merge

📎 Шпаргалка по фронтенду

Этот документ объединяет ключевые темы, техники и механизмы, которые лежат в основе современной фронтенд-разработки.

➡️ В нём собраны объяснения, примеры и практические заметки, помогающие быстро освежить знания, разобраться в устройстве веб-технологий и подготовиться к выполнению задач или прохождению собеседований.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme

💛 Шрифт, который превращает текст в графики

Datatype — необычный шрифт из Google Fonts, который умеет отображать данные прямо в тексте.

🟡 Например:

{b:10,25,7,95}

🟡 превращается в мини-диаграмму, а такие конструкции позволяют создавать спарклайны, бары и прогресс-бары:

{l:33,46,13,13,89}
{p:70}

Никаких Canvas, SVG или chart-библиотек — достаточно подключить шрифт и использовать специальный синтаксис.

Подойдёт для небольших визуализаций в документах, презентациях, таблицах и интерфейсах.

🔗 ⁠Ссылка

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#read_watch

⭐️ Шпаргалка по Grid alignment

Если вы хоть раз путались между justify-* и align-* — вы не один. Где ось, где контент, где items — в голове это часто смешивается, особенно в реальных макетах.

🔜 Что внутри:

— разница между justify-content и justify-items
— как работает align-content vs align-items
— все ключевые значения: start, end, center, stretch, space-*
— наглядно по осям

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #css

😭 Как не потратить недельный лимит AI-кодинга за три дня?

Разберём на вебинаре, как тратить меньше на AI-агентов — без потери качества кода.

🔘 Поговорим о том:

— когда дорогая модель действительно нужна, а когда хватит дешёвой;
— сколько стоит один прогон и куда уходят токены;
— какие задачи можно отдавать субагентам;
— как настроить маршрутизацию моделей;
— что проверять в AI-коде перед merge.

✏️ Покажем всё на конкретных цифрах и вживую: сравним расходы до и после.

⬇️ 17 сентября, 19:00 МСК
⬇️ 1,5 часа · бесплатно
⬇️ Арсений Харланов и Олег Лайок

💬 Пишите в комментариях, где упираетесь в лимиты и на что уходят деньги. Самые залайканные вопросы разберём на вебинаре.

🔗 Зарегистрироваться на вебинар⁠

💡 Собеседования всё чаще затрагивают тему оформления истории коммитов

От того, как вы пишете сообщения в Git, зависит работа CI, ревью и прозрачность релизов.

➡️ В карточках короткий разбор семантических коммитов:

— зачем коммитам задают строгую структуру;
— какой формат используют современные команды;
— примеры, которые показывают уровень разработчика.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#career_merge #middle #senior

А вы уже забрали свой подарок ко Дню программиста?

Мы в Tproger вместе с нашими друзьями собрали целую коробку подарков к вашему профессиональному празднику. Переходите по ссылке, трясите коробку и забирайте свой презент: https://tprg.ru/El3M

кто… 👨‍🦳👨‍🦳

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#pixel_pause

🌸 Вселенная намекает: пора уже начать этот курс

С 14 сентября цены в Proglib Academy вырастут на 20% 👀

Так что если курс давно ждёт своего часа — лучше не откладывать ещё на месяц 😏

📍 Выбрать курс

🔥 Debounce на одной строке

Когда пользователь вводит текст в поиск или изменяет размер окна — запросы летят десятками. Debounce откладывает выполнение функции до тех пор, пока события не прекратятся.

const debounce = (fn, ms) => {
  let timer;
  return (...args) => {
    clearTimeout(timer);
    timer = setTimeout(() => fn(...args), ms);
  };
};

// Использование
const handleSearch = debounce((value) => {
  console.log('Поиск:', value);
}, 300);

// В React
<input onChange={(e) => handleSearch(e.target.value)} />

✅ Когда использовать:

— Автокомплит и live-поиск
— Обработка resize/scroll событий
— Валидация форм при вводе
— Любые частые события

💡 Почему это работает:

При каждом новом вызове старый таймер сбрасывается и создаётся новый. Функция выполнится только когда пройдёт 300ms без новых событий.

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#readme #js #react

🌞 Готовим вебинар про AI в разработке и хотим сделать его максимально полезным

Что реально хочется разобрать? Где чаще всего застреваете? Что пробовали, но так и не получилось нормально внедрить?

🤩 Пишите вопросы в комментариях — самые залайканные разберём на вебинаре в первую очередь.

Задавайте всё, что давно хотелось спросить 📍

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

👩‍💻 Вышел React 19.3 — и в нём сразу несколько интересных изменений:

🟡 <ViewTransition> теперь stable. React умеет анимировать появление, удаление, перемещение и изменение элементов через браузерный View Transition API.

<ViewTransition>
  <Component />
</ViewTransition>

Можно задавать разные анимации в зависимости от типа перехода через addTransitionType().

🟡 Fragment Refs позволяют работать сразу с группой DOM-узлов, не добавляя лишний wrapper:

<Fragment ref={fragmentRef}>
  <Heading />
  <Heading />
</Fragment>

Через FragmentInstance можно управлять событиями, фокусом, наблюдением за видимостью и скроллингом.

🟡 use(browser()) — способ явно исключить компонент из SSR, если ему нужны browser-only API вроде localStorage или локального часового пояса.

🟡 Trusted Types — React 19.3 теперь корректнее работает с браузерным Trusted Types API, что важно для защиты от DOM-based XSS.

🟡 В Server Components контекст теперь можно рендерить напрямую через <Context value={...}>, без отдельного Provider-компонента.
React 19.3 выглядит не столько как большой набор новых API, сколько как релиз, который сильно прокачивает работу React с браузерными возможностями, SSR и DOM.

🔗 Источник

📍 Навигация: [Вакансии]

🐸 Библиотека фронтендера

#release_digest