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

#почитать

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

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

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

#почитать

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

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

▫️Как я Docker'изовал сайт на Next.js + сделал CI/CD

#посмотреть

Показываю реальный кейс автоматизации сайта. Завернул в докер сайт на Next.js/MySQL с сервером на базе nginx и отдачей статики напрямую через этот nginx, минуя Next.js.

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

Server-Driven UI (SDUI) + Rise Tools

#почитать

Реализация разработки Server-Driven UI (SDUI) с использованием Rise Tools. Она разработана для бесшовного обновления приложений React Native, предоставляя динамические компоненты UI, которые можно обновлять в производстве без пересборки или повторного развертывания.

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

JavaScript Clean Code: руководство для начинающих

#почитать

Это руководство посвящено написанию чистого и удобного кода на JavaScript и TypeScript. Мы рассмотрим лучшие практики работы с функциями, переменными и методами, чтобы ваш код был не только эффективным, но и понятным как вам, так и другим разработчикам. Статья будет полезна для новичков, которые хотят улучшить свои навыки кодирования.

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

Как предотвратить ненужную повторную отрисовку компонента React

#почитать

Когда состояние или свойства компонента изменяются, React автоматически обновляет пользовательский интерфейс (UI), чтобы отразить эти изменения. В результате React снова вызывает метод отображения компонента, чтобы сгенерировать обновленное представление UI.

В этой статье мы рассмотрим три React Hooks и то, как они предотвращают ненужные рендеринги в React:

useMemo
userCallback
userRef

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

Принципы SOLID на примерах React

#почитать

И примеры нарушений этих принципов.

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

Инструменты повышения производительности веб-приложений

#почитать

▪️Fuite
▪️Instant
▪️Awesome Landing Pages
▪️Dear Console
▪️Wanderer
▪️Parallel DOM
▪️Keyframes app

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

Убойные инструменты фронтенд-разраба

#почитать

▪️Srcbook
▪️Zod
▪️ObsoHTML
▪️Turbopack
▪️shadcn/ui
▪️react-email

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

Middleware в Next.js: самое простое объяснение

#почитать

Middleware используется для перехвата входящих запросов и выполнения некоторых действий до их завершения. Действия могут заключаться в изменении ответа, перенаправлении на какой-то маршрут, изменении заголовков и т. д.

Например, мы можем использовать промежуточное ПО для проверки IP-адреса входящих запросов и, если это авторизованное лицо, только отрисовать user/page.tsx, в противном случае мы отрисовываем сообщение об ошибке или перенаправляем на другую страницу.

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

Всё о циклах JavaScript

#почитать

В каждом языке программирования есть циклы. Циклы выполняют операцию (т. е. часть работы) несколько раз, обычно по одному разу для каждого элемента массива или списка, или просто повторяют операцию до тех пор, пока не будет выполнено определённое условие.

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

▫️Безопасная разработка во фронтенде

#посмотреть

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

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

Object.freeze и Object.seal

#почитать

С помощью них можно установить надежный контроль над объектами, защитив их от нежелательных изменений.

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

Подробный гайд по Web Components в JavaScript

#почитать

Web Components состоят из трёх основных технологий:

- Custom Elements (Пользовательские элементы)
- Shadow DOM (Теневой DOM)
- HTML Templates (HTML-шаблоны)

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

Управление памятью с помощью WeakRef и FinalizationRegistry

#почитать

Эти инструменты помогают работать со слабыми ссылками и асинхронной финализацией объектов.

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

Предоставление определения типа для CSS с @property

#почитать

Пишите более безопасный CSS, используя @property, позволяющий определять типы для пользовательских свойств. Узнайте, почему традиционные запасные значения могут не сработать и как функции @property повышают устойчивость определений пользовательских свойств.

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

Улучшаем привлекательность сайта с Hover.css

#почитать

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

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