WebDev технологии и подходы 24 года
if() в CSS: условные конструкции
CSS вводит функцию if() для условного применения стилей, делая дизайн более гибким и адаптивным.
Inferred Type Predicates в TypeScript 5.5
TypeScript 5.5 добавляет автоматическое выведение type predicates, упрощая написание пользовательских функций проверки типов.
Farm: быстрый веб-билдер на Rust
Farm — это высокопроизводительный инструмент для сборки веб-приложений и JavaScript-библиотек, разработанный на Rust.
Новые методы Set в JavaScript
Добавлены методы union, intersection, difference и symmetricDifference, упрощающие операции над множествами.
Event Loop Lag: что это и как его измерить
Разбирается влияние задержек в Event Loop на производительность Node.js-приложений и способы их мониторинга.
Современные руководства по веб-производительности
Полезный сборник рекомендаций по улучшению метрик, оптимизации JavaScript и работе с основными веб-показателями.
Замыкания и утечки памяти в React
Замыкания могут вызывать утечки памяти в React; новый компилятор React помогает, но требует внимания к сложным случаям.
Let's Form: библиотека для управления формами
Современная библиотека для работы с формами в React, упрощающая управление состоянием и валидацией.
es-toolkit: современная утилита для JavaScript
Библиотека, в 2-3 раза быстрее и до 97% меньше по размеру, являющаяся улучшенной версией lodash.
Изучаем React Suspense
Пошаговое руководство по использованию React Suspense для асинхронной загрузки компонентов и улучшения производительности приложений.
micro-agent: легковесный агент для мониторинга в реальном времени
Минималистичный инструмент для мониторинга и сбора метрик в реальном времени, предназначенный для интеграции с приложениями.
Практическое руководство по предотвращению блокировки Event Loop
Руководство по оптимизации кода в Node.js для предотвращения блокировки Event Loop и улучшения производительности.
PortSwigger: Лабы по кибербезопасности и взлому Web-приложений
Серия видеоуроков по кибербезопасности и эксплуатации уязвимостей веб-приложений от PortSwigger.
CSS Functions and Mixins Module: Заметки
Обзор нового модуля CSS для работы с функциями и миксинами, расширяющего возможности стилей и улучшения гибкости CSS.
Variants: быстрый совет для улучшения компонентов React
Руководство по использованию вариаций для улучшения гибкости и повторного использования компонентов React.
Не передавайте DTO компонентам UI
Объяснение, почему передача Data Transfer Objects (DTO) в UI-компоненты нарушает принципы разделения ответственности и ухудшает поддерживаемость кода.
Don't Use JS for That: Moving Features to CSS and HTML by Kilian Valkhof
Видео от Kilian Valkhof, в котором обсуждается, как перенести функциональность из JavaScript в CSS и HTML для улучшения производительности и упрощения кода.
Please Stop Using Barrel Files
Статья, объясняющая, почему использование barrel-файлов в TypeScript может усложнять поддержку кода и увеличивать риски ошибок.
Другой взгляд на TypeScript
Статья, предлагающая новый подход к использованию TypeScript, акцентируя внимание на его возможностях для улучшения структуры и гибкости кода.
Why Unknown Types Are Useful
Статья о том, как и почему тип unknown в TypeScript полезен для повышения безопасности типов и предотвращения ошибок в коде.
Архив конференций GitNation
Коллекция прошедших конференций GitNation, охватывающих различные темы разработки и технологий.
Patterns for Memory-Efficient DOM Manipulation
Руководство по паттернам для эффективной работы с DOM, минимизируя потребление памяти и улучшая производительность веб-приложений.
TDD: зачем и как — Александр Беспоясов
Доклад о принципах и практике тестирования через разработку (TDD), включая аргументы в пользу использования TDD и подходы к его внедрению.
Блог о TDD: что, как и зачем
Статья, в которой подробно объясняется, что такое TDD, как его применять и зачем он нужен в процессе разработки.
Книга: TTT: TDD
Книга, посвященная принципам тестирования через разработку (TDD), с примерами и рекомендациями по внедрению этой практики в проект.
Распространенные причины утечек памяти в JavaScript
Статья, рассматривающая типичные причины утечек памяти в JavaScript, такие как неправильное использование замыканий, глобальных переменных и событийных слушателей.
Подход к оптимизации производительности проверки типов TypeScript
Статья о методах улучшения производительности проверки типов в TypeScript, включая стратегии оптимизации и уменьшения времени компиляции при работе с большими кодовыми базами.
Why I Don't Like Enums — Matt Pocock
Мэтт Покок делится своим мнением о перечислениях в TypeScript, объясняя, почему его реализация в языке не соответствует ожиданиям и может вызвать проблемы в проекте.
JavaScript Visualized - Closures
Видео, в котором подробно объясняются замыкания в JavaScript с визуальными примерами для лучшего понимания этой концепции.
Node.js Best Practices - 2024
Обновленный список лучших практик для Node.js в 2024 году, включающий новые рекомендации, обновленные библиотеки и решения для повышения качества кода и производительности приложений.
Defensive CSS
Практические советы по CSS и дизайну, которые помогают строить устойчивые и будущие пользовательские интерфейсы, минимизируя потенциальные проблемы с совместимостью и производительностью.
Stepperize
Библиотека для создания компонента Stepper в веб-приложениях, позволяющая разработчикам сосредоточиться на бизнес-логике, а не на реализации самого компонента.
50 Subtle Mistakes to Screw Your TypeScript Code
Сборник из 50 мелких ошибок в TypeScript, которые могут повлиять на качество кода, и способы их избегать и исправлять для написания выдающегося ПО для веба.
Как создать npm-пакет
Пошаговое руководство по созданию и публикации npm-пакета, включая настройку проекта, подготовку метаданных и процесс публикации.
Mindful Innersource
Видео, посвященное концепции mindful innersource — подходу к использованию open-source практик внутри организации для улучшения сотрудничества и повышения качества кода.
npm-check-updates
Утилита для обновления зависимостей в проекте Node.js, которая позволяет легко проверять и обновлять версии пакетов в package.json до последних доступных.
Align Content in Block Layouts
Статья о том, как использовать свойство align-content в CSS для управления выравниванием содержимого в блоках, особенно в контексте флексбокса и сеток.
Understanding Generators in JavaScript
Статья, объясняющая суть генераторов в JavaScript, их поведение и использование, а не только синтаксис, с примерами практического применения.
Полное руководство разработчика по React 19 — Часть 1: Асинхронная обработка
Первая часть серии о новых функциях React 19, включая useTransition, useActionState, useOptimistic и многое другое для асинхронной обработки.
Полное руководство разработчика по React 19 — Часть 2: Новые улучшения
Вторая часть, охватывающая улучшения React 19, такие как компоненты сервера, действия сервера, ref как свойство и другие нововведения.
Библиотека @svg-use: инструменты для работы с SVG через
Библиотека @svg-use предоставляет решения для использования SVG с помощью механизма <use href>, решая проблемы SVG-in-JS и позволяя кастомизировать иконки.
TypeScript 5.6
Обзор нововведений в TypeScript 5.6, включая улучшенные проверки на nullish и truthy, поддержку новых методов для итераторов, строгую проверку итераторов, поддержку произвольных идентификаторов модулей, новые опции компилятора и улучшения для быстродействия в редакторах кода.
Replacing React with CSS
Статья о том, как можно заменить функциональность, обычно реализуемую с использованием React, с помощью CSS, улучшая производительность и упрощая код, а также рассматривается, когда такой подход может быть полезен.
React Compiler Complete Guide — React 19
Полное руководство по компилятору React в версии 19, включая новые возможности и улучшения, связанные с компиляцией, производительностью и оптимизацией работы React-приложений.
Clean React with TypeScript — Робин Везер
Статья о том, как правильно типизировать компоненты React с использованием TypeScript, включая типизацию пропсов, детей, управление состоянием с помощью хуков, работу с рефами и обработку событий.
CSS content-visibility for React Devs
Статья о CSS-свойстве content-visibility и его применении для улучшения производительности в React-приложениях, а также о том, как это свойство помогает скрывать элементы, не влияя на их рендеринг.
Component Composition Is Great, BTW
Статья о преимуществах композиции компонентов в React, включая рассмотрение различных подходов к созданию гибких и переиспользуемых компонентов.
Что если бы вы использовали контейнерные единицы для всего?
Статья о том, как использование контейнерных единиц (container units) в CSS может изменить подход к созданию адаптивных макетов и упростить управление размерами элементов на страницах.
- Яндекс: Индексирование SPA и рендеринг
Яндекс предоставляет механизмы для индексирования SPA, используя рендеринг контента, чтобы корректно обработать JavaScript и динамически генерируемые страницы. - Яндекс: Индексирование через AJAX
Яндекс поддерживает индексирование AJAX-контента, что позволяет обработать страницы, загружающиеся с помощью JavaScript и динамически обновляемые. - Как Google обрабатывает JavaScript в процессе индексации
Исследование от Vercel, описывающее, как Google обрабатывает JavaScript в процессе индексации, включая рендеринг контента и влияние на SEO. - Индексирование JavaScript
Статья о научных аспектах индексирования JavaScript, исследующая, как поисковые системы обрабатывают динамический контент. - Как поисковые системы обрабатывают рендеринг JavaScript
Обсуждение на StackExchange о том, как поисковые системы выполняют рендеринг JavaScript при сканировании страниц и какие факторы влияют на индексирование.
CSS Typography Crash Course
Видео-курс по типографике в CSS, который охватывает основные концепции и техники для создания эффективных и красивых текстовых элементов на веб-страницах.
Когнитивная нагрузка и её влияние
Репозиторий, исследующий концепцию когнитивной нагрузки и её влияние на пользователей, с фокусом на интерфейсы и взаимодействие с веб-приложениями, включая методы оптимизации для улучшения пользовательского опыта.
Unleash JavaScript's Potential with Functional Programming
Гайд по функциональному программированию в JavaScript, который шаг за шагом погружает в основные принципы и подходы, раскрывая потенциал языка с использованием функциональных концепций.
CSS min() All The Things
Статья о функции min() в CSS и её применении для оптимизации стилей. Рассматриваются различные случаи использования, включая создание адаптивных макетов, управление размерами элементов и улучшение производительности с помощью CSS.
Interactive Guide to OKLCH Color Space
Небольшой и интерактивный гайд по цветовой модели OKLCH, объясняющий её особенности и преимущества в сравнении с другими цветовыми форматами, такими как RGB и HSL.
Conditional React Hooks Pattern
Статья о паттерне условных хуков в React, который позволяет условно использовать хуки внутри компонентов, улучшая читаемость кода и предотвращая ошибки при условной логике.
Design Token-Based UI Architecture
Статья о подходе проектирования UI-архитектуры с использованием дизайн-токенов. Рассматривается, как токены могут помочь в унификации стилей, улучшении масштабируемости и поддерживаемости приложений, а также в интеграции с различными платформами и инструментами.
Селекторы CSS: простые и сложные
Видео, объясняющее основы и продвинутые техники использования CSS-селекторов для более эффективного выбора элементов на странице.
Слайды
Слайды с подробным разбором простых и сложных CSS-селекторов, с примерами и лучшими практиками.
React-switchboard
Библиотека для создания кастомных дев-туулов в React-приложениях. Позволяет быстро управлять поведением приложения, например, логиниться под определенным пользователем, изменять состояние или моки для сетевых запросов.
A Friendly Introduction to Container Queries
Статья, посвященная введению в контейнерные запросы CSS, объясняющая, как эта новая возможность позволяет адаптировать стили элементов в зависимости от их размеров, а не только от размеров окна браузера, что улучшает отзывчивость и гибкость дизайна.
Разбираемся с процессом рендеринга в браузере
Статья, подробно объясняющая процесс рендеринга в браузере, включая этапы от загрузки HTML до отрисовки страницы. Автор разбирает ключевые моменты, такие как DOM и CSSOM, а также оптимизации, которые могут улучшить производительность.
Storybook 8.4
Обновление Storybook 8.4, в котором внимание уделено уменьшению количества зависимостей проекта. Пример проекта e18e (https://e18e.dev/) показывает, как можно снизить размер проекта на 50+% и размер лок-файла на 75+%, благодаря замене громоздких зависимостей, таких как fs-extra, handlebars, и file-system-cache, на более легкие аналоги. Например, lodash был заменен на es-toolkit, express на polka, а chalk на picocolors. Также был использован production-режим для React.
Essential tsconfig.json options you should use
Статья, в которой рассматриваются важнейшие опции конфигурации tsconfig.json, которые следует использовать для улучшения типизации и производительности проекта на TypeScript. Включает рекомендации по настройке, такие как strict, esModuleInterop, noImplicitAny, и другие, для повышения качества кода и предотвращения ошибок.
React Scan
Библиотека для анализа производительности вашего React-приложения. React Scan помогает выявить проблемы с производительностью, такие как лишние рендеры и неоптимизированные компоненты, позволяя улучшить скорость работы приложения.
Полезный TypeScript для React
Статья, посвященная лучшим практикам использования TypeScript в React-приложениях. Рассматриваются полезные паттерны типизации для компонентов, хуков, пропсов и стейта, а также методы для улучшения читаемости и безопасности кода с использованием TypeScript в контексте React.
Элегантная реализация Long Press обработчика с помощью CSS анимации
Статья объясняет, как с помощью CSS-анимации можно создать обработчик для события long press (длительное нажатие). Такой подход позволяет избежать использования JavaScript для отслеживания длительности нажатия, улучшая производительность и упрощая код.
Вышел TypeScript 5.7 🔥
Статья о новых возможностях TypeScript 5.7, включая улучшения в типизации, поддержку новых ECMAScript функций, улучшенную производительность и обновления для работы с модулями и метаданными. Также рассмотрены новые фичи, такие как улучшенная диагностика типов и синтаксиса, которые облегчают разработку и улучшат качество кода.
Дебаг производительности страницы средствами браузера
Видео, посвященное методам отладки производительности веб-страницы с использованием встроенных инструментов разработчика в браузерах. Рассматриваются техники профилирования, мониторинга работы JavaScript, анализа загрузки ресурсов и улучшения времени отклика страницы.
Интересный способ добавления эффекта «мгновенности» при переходе по ссылкам
Статья объясняет, как можно улучшить пользовательский опыт, создавая эффект мгновенного перехода по ссылкам. Это достигается с помощью применения правил спекуляции в CSS и предварительной загрузки контента, что позволяет пользователю ощущать мгновенный отклик при переходе на новые страницы.
Интересный инструмент для работы с аттрибутами полей форм на мобильных браузерах
Этот инструмент позволяет протестировать и поиграться с различными аттрибутами полей форм, такими как inputmode, autocorrect, autocomplete и другими, на мобильных устройствах. Он помогает оптимизировать поведение форм на мобильных браузерах, улучшая UX. Также стоит помнить о полезном атрибуте enterkeyhint, который помогает задать тип клавиши для ввода, улучшая взаимодействие с формами на мобильных устройствах.
Создание эффективных мульти-степ форм для лучшего пользовательского опыта
Статья о том, как проектировать и создавать мульти-степ формы, которые обеспечивают лучший пользовательский опыт. Рассматриваются практики, такие как четкая визуализация шагов, плавные переходы между этапами, сохранение данных между шагами и другие методы улучшения удобства и сокращения когнитивной нагрузки.
ping атрибут для отправки аналитики по переходам и не только
Статья объясняет, как использовать HTML-атрибут ping, который позволяет отправлять асинхронные запросы на сервер при переходе по ссылке. Это полезно для сбора аналитики, например, для отслеживания кликов по ссылкам, без блокировки основной активности пользователя на странице.
Измеряем действительно важное в перфомансе веба
Статья объясняет, как правильно измерять производительность веб-приложений с использованием Web Performance API в JavaScript. Рассматриваются ключевые метрики и способы их измерения для более точной оценки и оптимизации производительности веб-сайтов.
Почему не стоит изменять поведение скролла в браузере
Статья аргументирует, почему вмешательство в стандартное поведение прокрутки в браузере (например, кастомизация скроллбаров или создание сложных анимаций) может ухудшить пользовательский опыт. Рассматриваются проблемы с доступностью, производительностью и удобством использования, которые могут возникнуть при изменении поведения скроллинга.
Используем API планировщика вместо setTimeout 0
Статья объясняет, как использовать JavaScript Scheduler API вместо setTimeout(0) для планирования задач с более высокой приоритетностью. Это позволяет улучшить производительность, предоставляя браузеру возможность лучше управлять асинхронными задачами и оптимизировать работу с событиями и рендерингом.
Улучшаем витальную метрику INP
Статья рассматривает методы оптимизации метрики INP (Interaction to Next Paint) в React-приложениях. Описываются лучшие практики для улучшения отклика интерфейса, включая оптимизацию рендеринга, уменьшение задержек и использование асинхронных операций для улучшения пользовательского опыта.
Не заставляйте меня думать: примеры кода, которые усложняют понимание
Статья обсуждает, как избежать избых сложностей, заставляющих других "думать" лишними деталями. Например, использование сложных условий, неявных зависимостей или избыточного абстрагирования без необходимости.
Modern CSS Feature Image
Эта статья рассказывает, как с помощью современных CSS-технологий, таких как `aspect-ratio`, `clamp`, `@container`, `:has` и флюидного подхода, можно создать адаптивные и минималистичные "feature image". Решение не требует JavaScript и легко поддерживается.
Solving N^2 Complexity with JavaScript Maps
В статье рассказывается, как оптимизировать неэффективные вложенные циклы с O(n²) сложностью, используя JavaScript Maps. Это позволяет улучшить производительность и упростить код.
How React Compiler Performs on Real Code
В статье анализируется влияние React Compiler на начальную загрузку и производительность реального приложения. Результаты подкреплены числовыми данными и измерениями.
Swap Between Black and White Text Based on Background Color
В статье объясняется, как с помощью CSS-функции `lch` и переменной `--bg` автоматически изменять цвет текста с чёрного на белый в зависимости от цвета фона.
Этот инструмент помогает визуализировать выполнение JavaScript-кода в браузере, показывая стек вызовов, веб-API, задачи, микрозадачи и фазу рендеринга.