Типы или интерфейсы в TypeScript?

#почитать

Когда использовать типы, а когда интерфейсы?

Можно взять за основу правило: использовать типы по умолчанию, а интерфейсы, когда это необходимо.

⏱Читать статью

▫️Цвета в CSS

#посмотреть

Расскажу, как можно задавать цвета в CSS разными способами и зачем это может быть нужно. Покажу, как навести порядок в цветах вашего проекта и привести огромное количество оттенков к заданной палитре. Объясню, как в этом могут помочь новые форматы указания цветов и функции работы с ними из последней спецификации CSS.

⏱Смотреть на YouTube ⏱️1 час

Руководство по использованию Vite в React

#почитать

Когда начинаете новый проект React, выбор правильных инструментов может сильно повлиять на рабочий процесс. Хотя такие инструменты, как Webpack, широко используются уже много лет, новые варианты, такие как Vite, предлагают более быстрые и эффективные альтернативы.

⏱Читать статью

Концепция временного View state в JavaScript

#почитать

В данной статье речь пойдёт о достаточно необычной теме, информацию о которой я почему-то не нашёл, хотя она достаточно полезна в современных JavaScript фреймворках и библиотеках для создания пользовательских интерфейсов, ведь, в некоторых случаях, применение концепции может помочь ускорить работу с DOM в несколько раз.

⏱Читать статью

CSS Position — управление размещением элементов

#почитать

Наиболее часто используемые position значения:

▪️static(по умолчанию): элемент позиционируется в соответствии с обычным потоком документа. Свойства top, right, bottom и left не имеют никакого эффекта.
▪️relative: элемент позиционируется относительно своего обычного положения в потоке документа. Вы можете перемещать его, используя верх, право, низ или лево, но он все равно будет занимать место в своем исходном положении.
▪️absolute: элемент позиционируется относительно ближайшего позиционированного предка (не обязательно родителя) и удаляется из обычного потока документа.
▪️fixed: элемент позиционируется относительно окна браузера, то есть он остается на месте даже при прокрутке страницы.
▪️sticky: элемент переключается между относительным и фиксированным позиционированием в зависимости от положения прокрутки пользователем.

⏱Читать статью

Chrome 130 - что нового

#почитать


• добавлена новая форма компактных уведомлений о совершённых операциях, показываемых под адресной строкой в виде небольшой полоски, перекрывающей контент;

• при включённом режиме экономии потребления энергии (Energy saver) реализована экспериментальная поддержка автоматической заморозки вкладок, потребляющих много ресурсов CPU, но при этом не выводящих звук и скрытых в течение более 5 минут. Исключение делается только для вкладок, связанных с управлением внешними устройствами или проведением видео и аудио конференций (подобные вкладки определяются на основании доступа к API для работы с USB, Bluetooth, камерой, устройствами ввода и микрофоном, а также организации канала связи с использованием RTCDataChannel или MediaStreamTrack);

• в версии для платформы Android реализован встроенный просмотрщик документов в формате PDF, не требующий вызова внешних приложений, а также появилась поддержка сторонних служб автозаполнения и хранения паролей;

• предоставлена возможность открытия в режиме «картинка в картинке» (picture-in-picture) не только видео, но и любых элементов для показа произвольного контента поверх другого содержимого;

• добавлена возможность обращения к внешним словарям со сжатием ответов при помощи алгоритмов Brotli и Zstandard;

• появилась поддержка активации областей прокрутки при навигации с использованием клавиатуры, что позволяет пользователям без мыши вначале переключиться в нужную область клавишей Tab, а затем прокрутить её содержимое стрелками управления курсором;

• добавлена поддержка разбора неспециальных схем URL (не включённых в список типовых схем) с разделением хоста и пути (парсер URL-адресов в Chrome теперь корректно обрабатывает нестандартные URL);

• Поведение элемента приведено к соответствию Safari и Firefox: в режиме видимости "none" элемент теперь не скрывается, а переключается на отдельный стиль;

• расширены возможности инструментов для веб-разработчиков. В панель анализа сетевой активности добавлено выпадающее меню с дополнительными фильтрами. Добавлена опция для чистки конфиденциальных данных перед сохранением HTTP-сеанса в формате HAR (HTTP Archive).


⏱Подробнее
▫️ Посмотреть (en)

AggregateError в JavaScript

#почитать

AggregateError помогает обрабатывать сразу несколько ошибок в JavaScript. Это упрощает управление кодом и делает его надежным.

⏱Читать статью

7 принципов JavaScript, которые стоит запомнить

#почитать

▪️Замыкания сделают код чище
▪️Деструктуризация сделает код проще
▪️Debouncing и Throttling оптимизируют производительность
▪️Каррирование повышает гибкость функций
▪️Proxy перехватывает действия объектов
▪️Как работает цикл событий и асинхронный JavaScript
▪️Мемоизация улучшает производительность

⏱Читать статью

Градиентный текст с тенью

#почитать

В наши дни градиентный текст довольно легко сделать с помощью background-clip: text; — но это убивает возможность использовать text-shadow. На помощь приходит SVG.

⏱Читать статью

▫️Профилирование Node.js

#посмотреть

С помощью инструментов профилирования Node.js разработчики "положили" графики времени ответа сервера.

Оказалось, проблема в коде, который ничего не делал, а каждый запрос исполнялся сотни миллисекунд.

⏱Смотреть на YouTube ⏱️45 минут

Кэширование Next.js

#почитать

Next.js расширяет API fetch, чтобы дать вам суперсилы, когда дело касается кэширования.

⏱Читать статью

Инструменты отладки JavaScript

#почитать

Каждый инструмент имеет свои уникальные функции и преимущества, такие как интеграция с популярными платформами, возможность мониторинга в реальном времени, поддержка различных языков и фреймворков.

⏱Читать статью

Сборщик мусора в V8

#почитать

После прочтения нескольких англоязычных и русскоязычных ресурсов понял, что одни копают очень глубоко, а другие дают лишь минимальную базу. Я решил сделать что-то среднее и агрегировать все эти знания в одну статью, плавно погружая читателя в тему.

⏱Читать статью

15 суперполезных плагинов Chrome в помощь фронтендеру

#почитать

Подборка плагинов, которые должны значительно упростить и ускорить процессы.

⏱Читать

Интерактивный видеопереход в Next.js

#почитать

Интерактивный переход — это просто видео, которое воспроизводится, когда вы попадаете на страницу, и когда оно заканчивается, оно медленно исчезает, позволяя вам получить доступ к веб-сайту, нажимать кнопки и т.д. Очевидно, что чем лучшее видео вы покажете пользователю, тем больше будет «вау»-фактор.

⏱Читать статью

Приемы TypeScript для надежности кода

#почитать

Самоссылающиеся типы, прозрачные типы, типобезопасный DeepPartial и пр.

⏱Читать статью