Меняем JS-библиотеку анимации на View Transitions

Теперь не нужно подтягивать тяжелые JavaScript библиотеки для анимаций в ваш проект. В Chrome и Safari появилась поддержка View Transitions API. Эта апишка дает нам механизм для простого создания анимированных переходов между различными состояниями веб-сайта без необходимости расписывать сложную логику с помощью JS.

Как это работает вы можете увидеть здесь.

#фронтенд #css #javascript

Что такое рекурсия и как с ней работать

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

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

А вы используете рекурсию в своих проектах?

Используем tan(atan2()) для работы с вьюпортами в CSS

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

Как это работает и где можно использовать, подробно рассказано здесь.

#css #фронтенд #лайфхак

Как устроен Node.js изнутри

Node.js — интересный инструмент для веб-разработчиков. В этой статье мы узнаем, из чего состоит Node.js, разберёмся, как внутренние компоненты Node.js взаимодействуют друг с другом, и изучим репозиторий проекта Node.js на GitHub.

https://www.smashingmagazine.com/2020/04/nodejs-internals/

#бэкенд #nodejs

Если это не логично, то нужно добавить ещё один =. Логично?

tabs-broadcast — библиотека для синхронизации вкладок

tabs-broadcast — это открытая библиотека JavaScript для удобной коммуникации между вкладками браузера в одном приложении. Она решает распространенную проблему: как синхронизировать состояние и события между несколькими вкладками без лишних запросов к серверу и без сложных обходных путей.

Как она работает, читайте в статье: https://habr.com/ru/articles/887448/

#javascript #библиотека

Что такое Island Architecture

Island Architecture (или «архитектура островов») — это современный подход к созданию веб-страниц, который сочетает преимущества статического контента и интерактивных элементов. Основная идея заключается в том, чтобы разделить страницу на статическую часть и изолированные «острова» — компоненты, которые могут быть динамическими и интерактивными. Это позволяет улучшить производительность, упростить разработку и сделать сайт более удобным для SEO.

Как это работает?

Представьте веб-страницу как карту, где большая часть территории — это статический контент, а отдельные «острова» — это интерактивные элементы. Например:

Статическая часть: текст статьи, изображения, заголовки — всё то, что загружается быстро и не требует JavaScript для отображения.

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

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

Преимущества Island Architecture

— Улучшение производительности. Статический контент отображается практически мгновенно, в то время как интерактивные острова загружаются только тогда, когда они нужны, снижая общую нагрузку на страницу.

— SEO-дружественность. Статическая часть легко индексируется поисковыми системами, а интерактивные элементы изолированы и не мешают процессу.

— Удобство разработки. Каждый «остров» можно разрабатывать и тестировать отдельно, используя разные технологии для разных островов, если это требуется.

Недостатки и ограничения

— Если страница содержит много интерактивных элементов (например, социальные сети или сложные приложения), загрузка множества островов может снизить производительность.

— Так как концепция относительно новая, для её реализации часто нужны специфические фреймворки, такие как Astro или Marko, либо собственные решения.

— Перевод существующего сайта на эту архитектуру может потребовать значительных усилий.

Island Architecture идеально подходит для сайтов, где преобладает статический контент, но требуется несколько интерактивных элементов. Например, блоги, простые интернет-магазины или новостные сайты.

Хотели бы попробовать такой подход или, возможно, уже пробовали? Поделитесь в комментариях, что вы думаете об этом.

#простымисловами

Что такое анимация во фронтенд разработке и как ее использовать? Разбираем движение света от фонаря

У нас на сайте появилась серия статей про анимацию в вебе для фронтенд-разработчиков от креативного фронтенд-разраба. В каждой статье пошаговый разбор создания эффектов.

И первая часть про движение света от фонаря.

#фронтенд

Doom запустили на типах TypeScript

Энтузиасты взяли и запилили полноценный рантайм для WebAssembly, но вся магия — на типах TypeScript. И да, они запустили на этой штуке Doom. Как им это удалось, они рассказали в видео.

Кармак дуреет с этой прикормки!

#typescript #ненормальноепрограммирование

Как повысить вашу продуктивность с помощью кроссбраузерных функций DevTools

Основные браузеры, такие как Chrome и Firefox, постоянно обновляют свои инструменты для разработчиков, и каждое обновление потенциально добавляет веб-разработчикам новые функции. Эти функции упрощают использование за счёт интуитивно понятного пользовательского интерфейса, более продвинутой отладки и улучшенных инструментов для анализа производительности.

Следя за этими изменениями, вы сможете использовать DevTools своего браузера в полной мере, чтобы упростить рабочий процесс и ускорить создание веб-приложений. В этой статье вы можете увидеть несколько полезных кроссбраузерных функций DevTools и узнать, как их использовать.

#советы

10 инструментов для CSS: анимация, сетки и дизайн

Сегодня существует множество стилей в веб-дизайне, которые сменяют друг друга чуть ли не каждый день. Уследить за каждым сложно, также как и уметь реализовывать их с помощью CSS. 

Поэтому в этой статье мы рассмотрим некоторые из самых популярных инструментов CSS, которые помогут вам идти в ногу со временем и вывести свои навыки CSS на новый уровень, облегчая создание современного UI:

https://tproger.ru/articles/10-instrumentov-dlya-css-animaciya-setki-i-dizajn

#css

Вся команда на дейлике: делится сделанными задачами

Сеньор с зарплатой 5к долларов:

Доступная жилплощадь карьера по клику

Нет, это не скам, это мы вас зовем прогуляться по нашему Дому IT-карьеры, в котором притаились вакансии от работодателей. Заглядывайте в окошки, изучайте интерьер квартир и откликайтесь на вакансии — никакой ипотеки, первых взносов и рефинансирования. Эта новостройка досталась вам бесплатно, как квартира той самой любимой бабушки, за которой вы ухаживали.

Тук-тук, можно?

Реклама

Как в Notion развивают код с помощью пользовательских правил ESLint

В Notion разработали систему «растягивания», которая помогает постепенно внедрять правила линтинга в течение длительного периода времени, что способствует модернизации кодовой базы без ущерба для скорости работы разработчиков.

О том, как это работает и как вам попробовать эту систему, рассказали в блоге.

#eslint

Разбираемся в разнице между Media Queries и Container Queries в CSS

Когда речь заходит о CSS, многие из нас знакомы с Media Queries. Это инструмент, который помогает адаптировать стиль вашего сайта в зависимости от размеров экрана. Но также есть и другой игрок — Container Queries. Давайте разберемся, в чем между ними разница и как использовать каждый из них.

Media Queries позволяют изменять стили в зависимости от характеристик устройства, на котором отображается ваш сайт, особенно от ширины окна браузера. Например, если вы хотите, чтобы ваш текст выглядел иначе на мобильном устройстве по сравнению с десктопом, вы можете использовать следующую конструкцию:

@media (max-width: 600px) {
  body {
    background-color: lightblue;
  }
}

Этот код меняет цвет фона страницы на светло-голубой, если ширина экрана меньше 600 пикселей. Media Queries отлично подходят для общего адаптивного дизайна, где важен размер экрана устройства.

С другой стороны, Container Queries ориентированы не на размеры экрана, а на размеры контейнера, в котором находится элемент. Это может быть особенно полезным, когда вы проектируете компоненты, которые могут использоваться в разных местах и на разных экранах.

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

.container {
  container-type: inline-size;
}
@container (max-width: 400px) {
  .my-element {
    color: red;
  }
}

В этом примере .my-element станет красным только если его родительский .container будет шире 400 пикселей, независимо от размеров экрана устройства. Это открывает огромные возможности для создания адаптивных компонентов.

Простыми словами, Media Queries реагируют на ширину экрана, а Container Queries — на ширину родительского контейнера. Это делает Container Queries более гибкими для разработки компонентов, которые могут изменяться в зависимости от контекста, в котором они используются.

#простымисловами #css

Как создать мини-приложение в Telegram

С каждым днем в Telegram появляется всё больше мини-приложений. За некоторые из них разработчики даже получают гранты от Telegram. Если вы хотите также, то я нашел понятное руководство по созданию своего мини-аппа, которое включает и фронтенд, и бэкенд часть.

Вы сможете создать простой кликер с таблицей лидеров. В основе будет React и Nest.js. Подробности по ссылке.

#telegram #бэкенд #фронтенд #react #nestjs

Microsoft ускорила TypeScript в 10 раз

В TypeScript радикальные изменения — Microsoft решила сменить язык компилятора, перейдя на Go. Ещё не все работы закончены, но уже сейчас время компиляции сократилось в среднем в 10 раз!

Пока что TS будет работать на JavaScript. Полный переход состоится на версии 7.0, когда будут решены все вопросы с совместимостью версий. Но первую нативную версию обещают уже в середине 2025 года.

Что думаете? Стоит оно того?

#новости #typescript

Пишем простое расширение для браузера

Ещё один туториал, который поможет вам изучить новые технологии и прокачать свои навыки. На этот раз мы с вами попробуем создать простое расширение для браузера, которое будет управлять куками на сайте. Для простоты в проекте используются только ванильные технологии без сложных библиотек и фреймворков.

#туториал

Необычные часы с «кодовым» циферблатом, реализованные с помощью CSS и JavaScript

Посмотреть код проекта можно здесь: https://codepen.io/MarkBoots/pen/zYbjaoR

#codepen

Вместо тысячи слов