Делаем анимацию страницы, синхронизированную со скроллом, как у Apple

Зайдите на сайт Apple или Samsung и посмотрите, как круто анимированы страницы с их продуктами. Хотите научиться также? На самом деле это не так уж и сложно.

В этой статье вы научитесь создавать аналогичные анимации и затем оживлять с их помощью ваши веб-страницы:

https://css-tricks.com/scroll-triggered-animation-vanilla-javascript/

#css #фронтенд

Визуальное руководство по рендерингу React. Часть 3

В первой части была визуализация повторного рендеринга, а во второй — визуализация того, как работают пропсы. На этот раз мы с вами можем увидеть, как работает useMemo в React.

Подробнее:

https://alexsidorenko.com/blog/react-render-usememo/

#react

YAWAS — Ещё одна структура веб-приложений

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

В этой же статье речь пойдёт о структуре, которая имеет название YAWAS (Yet Another Web Application Structure) — еще одна структура веб приложений:

https://tproger.ru/articles/yawas-eshhjo-odna-struktura-veb-prilozhenij/

Можно ли играть в игры и при этом прокачиваться в программировании? И если да, то как это сделать?

Попробуйте CodinGame. Здесь вы можете поиграть в различные игры самых разных жанров, но вместо контроллера у вас будет код. Сервис поддерживает более 25 языков программирования, поэтому подойдёт абсолютно каждому разработчику?

Начать играть:

https://www.codingame.com/start

#игрыдляучёбы

​Реализация скелета загрузки в Angular

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

В этой статье автор показал, как реализовать такой скелет с помощью Angular:

https://netbasal.com/implementing-a-loading-skeleton-in-angular-7490ffdecc1b

#angular #фронтенд

Гуляем по мирам с помощью React

Автор этого проекта решил наглядно показать на что способен React при правильном подходе. Он создал страницу на которой вы можете прогуляться по пяти известным вымышленным мирам, используя только колёсико мыши.

Вот тут вы можете изучить код проекта и его особенности:
https://github.com/sfatihk/react-world

А здесь совершить ту самую прогулку:
https://sfatihk.github.io/react-world/#

#веб #react

​Изучение React Suspense с помощью React Freeze

Слышали о новом компоненте React Suspense? Он позволяет корректно обрабатывать загрузку и визуализацию данных. Есть также React Freeze, который позволяет заморозить рендеринг компонентов и контролировать, что на самом деле обновляется в ваших приложениях React.

В этой статье подробно рассмотрен React Freeze и его возможности, а также показано, как его можно использовать в реальных проектах:

https://blog.logrocket.com/exploring-react-suspense-react-freeze/

#react

​Парсинг дат в JS — добавляем русский язык в библиотеку Chrono

Chrono — это JavaScript библиотека, которая парсит даты на естественном языке. То есть, вы можете написать что-то вроде 2 часа 5 минут назад и библиотека распознаёт в этом тексте нужно время, дату или период и преобразует в формат, понятный компьютеру. Она поддерживает 8 языков, включая русский.

Подробнее о том, как ей пользоваться и где она может пригодиться, тут:

https://habr.com/ru/post/676026/

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

Как легко управлять зависимостями в монорепозитории JS

Если верить прошлогоднему опросу State of JS, то управление зависимостями в JS — главная головная боль разработчиков. Вторая проблема в архитектуре кода.

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

https://nuancesprog.ru/p/16260/

#javascript

​Создаём собственный сайт-портфолио с адаптивностью и сменой тем

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

Подробнее:

https://youtu.be/27JtRAI3QO8

#видео #фронтенд

​Cоздаём шаблоны для веб-разработки на JavaScript

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

Подробнее:

https://tproger.ru/articles/must-have-sozdajom-shablony-dlja-web-razrabotki-na-javascript/

#javascript

Использование CSS-селектора :has() на примерах

Как вы знаете в CSS существует псевдокласса :has(). С его помощью можно изменить родительский элемент, содержащий определённый дочерний элемент либо элемент, следующий за ним. Пока ничего непонятно, да?

Не парьтесь! В этой статье мы вам покажем, как работает этот псевдокласс на наглядном примере, создав аналог Dock из MacOS:

https://tproger.ru/articles/css-selektor-has/

#css #фронтенд

​useSuncExternalStore — недооценённый хук React

Этот хук используется внутри библиотек управления состоянием, таких как Redux, для подписки на внешние источники данных. Но вы также можете применять его в собственных проектах.

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

https://thisweekinreact.com/articles/useSyncExternalStore-the-underrated-react-api

#react

Визуализация алгоритмов сортировки

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

Для приложения понадобится React, Redux и Redux-saga. Подробнее:

https://habr.com/ru/company/domclick/blog/689064/

#react #redux

Третья редакция пугает

​Создание бокового меню на HTML, CSS и JavaScript

Ловите туториал по созданию бокового меню с помощью стандартного стека из CSS и JavaScript. У автора ушло всего 15 минут на его создание, так что этот проект хорош не только своей привлекательностью, но и простотой.

Подробнее:

https://youtu.be/EuIshKbzG4I

#видео #туториал

Как переключаться между классами HTML-элемента

В JavaScript уже есть функция toggle(), которая отлично работает, когда речь идёт об одном или двух классах. Но как быть, если необходимо переключаться между тремя или более классами? На самом деле способов масса. Несколько из них представлены в этой статье — выбирайте какой нравится больше и берите на вооружение:

https://css-tricks.com/cycle-through-classes-html-element/

#html #фронтенд

​Повышение производительности с помощью Web Worker: подробное руководство


JavaScript однопоточен и это может быть проблем для приложений, требующих многозадачности. Однако, для решения этой проблемы существует Web Worker — инструмент, предоставляемый браузерами, который позволяет разработчикам запускать дополнительный скрипт в фоновом режиме.

Подробнее о нём и о том, как с ним работать:

https://blog.bitsrc.io/web-workers-a-step-by-step-guide-to-boosting-performance-with-web-workers-11307238b36e

#javascript