Кристина Янович, фронтенд-разработчик в юните спецпроектов KTS, делится опытом создания 3D-анимации на практике.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
⚒️ Ohm — набор инструментов для синтаксического анализа JavaScript и TypeScript
Библиотека для создания синтаксических анализаторов на основе PEG, которую можно использовать в интерпретаторах, компиляторах, инструментах анализа и т. д. Вы даже можете поиграть с её грамматикой онлайн.
💻 Подробнее
Библиотека для создания синтаксических анализаторов на основе PEG, которую можно использовать в интерпретаторах, компиляторах, инструментах анализа и т. д. Вы даже можете поиграть с её грамматикой онлайн.
Please open Telegram to view this post
VIEW IN TELEGRAM
Please open Telegram to view this post
VIEW IN TELEGRAM
👨💻 Одна 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