👨💻 Одна React-задача, демонстрирующая ключевые навыки на собеседовании
Андрей Чмелёв, Tech Lead и Full Stack-разработчик, подробно разбирает один из любимых вопросов по фронтенд-разработке на собесе.
Вопрос посвящён созданию небольшого React-компонента, который асинхронно получает данные на основе пропса
👉 Читать
Андрей Чмелёв, Tech Lead и Full Stack-разработчик, подробно разбирает один из любимых вопросов по фронтенд-разработке на собесе.
Вопрос посвящён созданию небольшого React-компонента, который асинхронно получает данные на основе пропса
username. Он кажется простым, но на самом деле показывает много нюансов понимания кандидатом хуков React, сайд-эффектов, race conditions и компромиссов в дизайне. 👉 Читать
Приложения часто состоят из нескольких подсистем или компонентов, каждый из которых имеет свой собственный набор сообщений в логах. При отладке такого приложения может быть сложно найти нужные логи в консоли.
console.context() может помочь в этом. Он является экспериментальным и доступен только в браузерах на базе Chromium, но это хороший шаг в правильном направлении.const myComponentLogger = console.context("name-of-my-component");myComponentLogger.log("This is a log message from my component");
myComponentLogger.warn("This is a warning message from my component");#devtools #tip
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
🍰 15 полезных JavaScript сниппетов на все случаи жизни
Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM.
В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.
🔗 Читать статью
🔗 Зеркало
Начинающим разработчикам часто приходится искать быстрые решения для типичных задач, таких как копирование текста в буфер обмена, обработка URL-параметров или управление элементами DOM.
В этой статье мы собрали 15 полезных JavaScript сниппетов, которые помогут значительно упростить работу и ускорить разработку: эти небольшие, но эффективные фрагменты кода пригодятся почти в любом проекте.
🔗 Читать статью
🔗 Зеркало
& — селектор в CSS, теперь поддерживаемый через CSS Nesting, позволяет вкладывать стили в родительский селектор без необходимости использования препроцессоров вроде Sass. Под катом — некоторые нюансы его использования.👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
Interop 2️⃣ 0️⃣ 2️⃣ 5️⃣ : функции, на которых разработчики браузеров сосредоточатся в этом году
Interop — это непрерывный процесс, в ходе которого разработчики браузеров совместно работают над улучшением функций, чтобы больше пользователей могли быстрее их использовать.
В этом году основное внимание уделяется Storage Access API, событиям указателя/мыши, отказу от старых событий мутации, событию
➡️ Читать
Interop — это непрерывный процесс, в ходе которого разработчики браузеров совместно работают над улучшением функций, чтобы больше пользователей могли быстрее их использовать.
В этом году основное внимание уделяется Storage Access API, событиям указателя/мыши, отказу от старых событий мутации, событию
scrollend, URLPattern и более тесной интеграции JS/WASM.Please open Telegram to view this post
VIEW IN TELEGRAM
Перевод гайда Dr. Axel Rauschmayer о настройках TypeScript, определяемых в файле
tsconfig.json. Автор затрагивает настройку проектов, в которых все локальные модули являются ESM. 👉 Читать
Please open Telegram to view this post
VIEW IN TELEGRAM
🧑💻 Тестирование 10 JavaScript-фреймворков на соответствие HTML
Автор статьи, будучи сторонником чистого HTML, решил проверить корректность HTML-кода, который создают популярные JavaScript-фреймворки. Для этого он запустил 10 фреймворков в базовой конфигурации, оценил HTML-код и выявил ошибки.
🤔 Что в итоге? HTML-код в некоторых фреймворках далек от идеала, но не все так плохо, ведь большинство проблем легко исправить.
Автор статьи, будучи сторонником чистого HTML, решил проверить корректность HTML-кода, который создают популярные JavaScript-фреймворки. Для этого он запустил 10 фреймворков в базовой конфигурации, оценил HTML-код и выявил ошибки.
🤔 Что в итоге? HTML-код в некоторых фреймворках далек от идеала, но не все так плохо, ведь большинство проблем легко исправить.
Не тащите его в новые проекты. Актуальная документация по началу проекта — на сайте React.
Please open Telegram to view this post
VIEW IN TELEGRAM
🛡 Поздравляем главных защитников JavaScript-разработки:
▪️ Promise.catch() — верный страж асинхронного фронта. Отважно ловит все ошибки, которые ты забыл обработать.
▪️ === — боевой офицер типизации. Единственный, кто понимает, почему [] == ![] это true, а {} + [] это "[object Object]".
▪️ try/catch — фронтовой медик. Перехватывает раненые исключения и пытается их лечить. Правда, иногда пациент уже в коме из-за undefined is not a function
Какой боец прикрывает ваш тыл в продакшене? Делитесь в комментариях 👇
▪️ Promise.catch() — верный страж асинхронного фронта. Отважно ловит все ошибки, которые ты забыл обработать.
▪️ === — боевой офицер типизации. Единственный, кто понимает, почему [] == ![] это true, а {} + [] это "[object Object]".
▪️ try/catch — фронтовой медик. Перехватывает раненые исключения и пытается их лечить. Правда, иногда пациент уже в коме из-за undefined is not a function
Какой боец прикрывает ваш тыл в продакшене? Делитесь в комментариях 👇
🧬 Библиотека схем для JavaScript из будущего
ReScript Schema — одна из самых быстрых библиотек парсинга в экосистеме JavaScript, сфокусированная на высокой производительности, малом размере пакета и DX.
Дмитрий Захаров работал над ней три года и утверждает, что она уже превзошла конкурентов по многим параметрам. В статье он объясняет, чем ReScript Schema отличается от Zod, Valibot, Runtypes, Arktype, Typia и Superstruct.
👉 Читать
ReScript Schema — одна из самых быстрых библиотек парсинга в экосистеме JavaScript, сфокусированная на высокой производительности, малом размере пакета и DX.
Дмитрий Захаров работал над ней три года и утверждает, что она уже превзошла конкурентов по многим параметрам. В статье он объясняет, чем ReScript Schema отличается от Zod, Valibot, Runtypes, Arktype, Typia и Superstruct.
👉 Читать
🤖 Mastra — фреймворк TypeScript AI от команды Gatsby
Некоторые из разработчиков, стоящих за фреймворком Gatsby, предлагают новый способ создания агентов на базе LLM, которые выполняют различные задачи, используют базы знаний и хранят память. Представьте себе метафреймворк вроде Next.js, но для агентов AI.
👉 Попробовать
Некоторые из разработчиков, стоящих за фреймворком Gatsby, предлагают новый способ создания агентов на базе LLM, которые выполняют различные задачи, используют базы знаний и хранят память. Представьте себе метафреймворк вроде Next.js, но для агентов AI.
👉 Попробовать
Проверьте свои знания, ответив на 8 вопросов – https://proglib.io/w/54258128
🧐 Кому подойдет?
Разработчикам, которые знают любой объектно-ориентированный язык программирования и хотят углубиться в архитектурные паттерны.
🎮 Как проходит обучение?
В течение всего интенсива вы будете создавать игру «Звездные войны» и применять ключевые архитектурные паттерны. В процессе изучите:
– Как строить гибкую архитектуру, которая не замедляет разработку
– Как применять IoC-контейнеры и писать модульные тесты
– Как использовать SOLID за пределами ООП
– Как внедрять CI/CD и снижать технический долг
👉 Подробная программа обучения
А по промокоду
Please open Telegram to view this post
VIEW IN TELEGRAM
Материалов на эту тему много, но для начинающего фронтендера они скорее сложны и завалены лишней, несвоевременной информацией. В этой статье нет ничего такого.
Роман Андрианов, фронтенд-разработчик из компании «АйТи-Баланс» сосредоточился на базовых вещах, которые понадобятся в настоящих проектах, и отсеял то, что не нужно на первых порах. Минимум текста, много практики и всё на простом языке.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
Команда Deno сделала перерыв в борьбе с Oracle, чтобы выпустить новую многофункциональную версию своего рантайма JavaScript.
Мы получили встроенную интеграцию с OpenTelemetry, обновления линтера, новый интерактивный способ обновления зависимостей, поддержку
node:sqlite, TypeScript 5.7, V8 13.4 и многое другое.#новости
Please open Telegram to view this post
VIEW IN TELEGRAM
Автор рассказывает об обновлённой фиче
attr(), которая теперь поддерживает указание типов данных для значений атрибутов, что позволяет использовать её не только для свойств содержимого.Теперь вы можете извлекать значения из HTML-атрибутов, которые на самом деле имеют типы, поэтому, если вы укажете для элемента
data-font-size="2,2rem", вы сможете использовать это значение.Please open Telegram to view this post
VIEW IN TELEGRAM
Media is too big
VIEW IN TELEGRAM
Простой CLI для автоматизации тестирования утечек памяти, в первую очередь актуально для SPA. Проверяет объекты, event listeners, узлы DOM и коллекции.
Please open Telegram to view this post
VIEW IN TELEGRAM