404 Page

Свёрстано на HTML и SCSS. Эффект parallax реализован в JS.

👉 @seniorFront

Animated Text Trail Effects

В этом видео создается текст, следующий за курсором на CSS и JS.

👉 @seniorFront

Тебя обязательно заметят и повысят

👉 @seniorFront

Rotating Text

Стилизовано и анимировано в SCSS. Логика запуска анимаций и смены текста реализована в JS.

👉 @seniorFront

FURIOSA 3D Animated Poster

Постер свёрстан и анимирован на HTML и SCSS. Эффект 3D создается при помощи CSS transform: translateZ и transform-style: preserve-3d

👉 @seniorFront

Awesome Cubes Animation

В этом видео создается 3D анимация. Кубы генерируются в JS, а затем анимируются в CSS.

👉 @seniorFront

Music Player | Audio Player

Создано и анимировано в HTML и CSS. Логика работы плеера реализована в JS.

👉 @seniorFront

How many feelings?

Вам дана строка, состоящая из рандомных букв и массив слов.
Вам нужно вернуть слова, которые можно составить из данных букв.

Пример:
string -> 'yliausoenvjw'
array -> ['anger', 'awe', 'joy', 'love', 'grief']
output -> '3 feelings.' // 'awe', 'joy', 'love'

👉 @seniorFront

Ачивки за коммиты в git

В этой статье рассказывается про сервис, который анализирует ваш git log и выдает интересную статистику по проекту, в том числе выдает ачивки разработчикам.

👉 @seniorFront

​Что такое React Reconciliation (Cверка) и как он работает?

Reconciliation (Cверка) - это процесс, посредством которого React обновляет DOM. Когда состояние компонента изменяется, React должен рассчитать необходимость обновления DOM. Это делается путем создания виртуального DOM и сравнения его с текущим DOM. В этом контексте виртуальный DOM будет содержать новое состояние компонента.

При сравнении двух деревьев первым делом React сравнивает два корневых элемента. Поведение различается в зависимости от типов корневых элементов.

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

При сравнении двух React DOM-элементов одного типа, React смотрит на атрибуты обоих, сохраняет лежащий в основе этих элементов DOM-узел и обновляет только изменённые атрибуты.

По умолчанию при рекурсивном обходе дочерних элементов DOM-узла React проходит по обоим спискам потомков одновременно и создаёт мутацию, когда находит отличие. Эта неэффективность может стать проблемой. Когда у дочерних элементов есть ключи, React использует их, чтобы сопоставить потомков исходного дерева с потомками последующего дерева.

👉 @seniorFront

pointer-particles

Это Web Component, реализованный на canvas и чистом JS.

👉 @seniorFront

​Обучающие игры для разработчиков

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

Retro Gadgets
Симулятор предназначен для кодеров с опытом сборки электронных девайсов, то есть для тех, кто способен спаять устройство и разработать для него ПО. Задания в игре, несмотря на ее «ламповость», довольно сложные. Нужно паять, правда, в виртуальном мире, плюс собирать различные системы из отдельных модулей и писать код на Lua.

Joy of Programming
Ну а здесь — чистая радость программирования. По крайней мере, в том виде, в котором его себе представляют авторы проекта. Предусмотрена и возможность поработать с 3D-графикой, если есть такое желание. Задачи в игре достаточно сложные. Основной вектор здесь — автоматизация и управление роботами, навигация, логистика и машинное обучение.

CPU-Chef
Игра предназначена для новичков в мире электроники, поскольку ее единственная задача — помочь изучить строение ПК или ноутбука. Разработчики помогают пользователям понять, какие модули, включая процессор, хаб и т. п., для чего предназначены.

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

Check IO
Отличная игра для изучения Python и TypeScript. Выглядит она неплохо, внутри интерфейса — острова, на которых расположены задачи и головоломки. У игры разные уровни сложности: она подойдет как новичкам, так и опытным кодерам. В самом начале есть подсказки, но постепенно их становится все меньше.

👉 @seniorFront

Докер контейнеры и прикладная некромантия

В этой статье автор рассказывает про забавный пример использования контейнеров - для запуска и обновления древних веб сервисов.

Будет два живых примера:
- Медиавики, вики-движок на PHP, древняя инсталляция - обновляем с версии 1.24 от сентября 2014 года.
- Забавный инструмент для генерации комиксов в стиле xkcd, написанный на Node.JS, и в последний раз обновлявшийся в марте 2013 года. Поднимаем и исследуем. Будут внезапные сюжетные повороты, и трагическая концовка.

Интересно, как воскресить эти артефакты древности? Тогда погнали!

👉 @seniorFront

Info Cards

Свёрстано при помощи препроцессоров Pug и SCSS. Функционал слайдера реализован в JS.

👉 @seniorFront

Text Scroll Animation using CSS & Javascript

В этом видео создается анимация текста при прокрутке. Для этого создается обработчик события "scroll", в котором изменяется значение свойства transform.

👉 @seniorFront

Удалёнщик пришел поработать в офис

👉 @seniorFront

switch

Оригинальный переключатель, свёрстанный на HTML и CSS. Логика переключения реализована в JS.

👉 @seniorFront

loading idea

Анимировано в CSS. При помощи transform: translate3d.

👉 @seniorFront

Only Wavy Text Loading Animation Effects

В этом видео создается анимация текста на чистом CSS.

👉 @seniorFront