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

Revolving Text

Текст генерируется в JS и анимируется в CSS. Параметры анимации настраиваются при помощи CSS переменных.

👉 @seniorFront

Портфолио, которое хотят видеть рекрутеры

Не тратьте время на пет-проекты. Сделайте проект на микросервисной структуре на Kafka и заберите свой оффер в крупную IT-компанию. Все потому что проект не должен быть стандартным crud-приложением, а иметь в основе то, чего ждет каждый работодатель – микросервисы.

Ребята из FAANG School подготовили полезную лекцию, где расскажут, как собрать идеальный проект для портфолио:

– что ждет работодатель и какие темы выбрать для проекта
– какой стек технологий самый востребованный
– как перейти от древнего монолита к современным микросервисам
– когда и зачем добавлять Kafka в проект-портфолио

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

Переходите и забирайте Большую Шпаргалку по Kafka с подробной информацией об основных концепциях, характеристиках и способах использования одной из самых популярных технологий в разработке.

HyperMorph 3000

Реализовано на canvas и чистом JS

👉 @seniorFront

​Что такое Flux - архитектура? Какие сущности она имеет?

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

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

В минимальном варианте Flux-архитектура может содержать три слоя, взаимодействующие по порядку:

- Действия (англ. actions) — выражение событий (часто для действий используются просто имена — строки, содержащие некоторый «глагол»). Диспетчеры передают действия нижележащим компонентам (хранилищам) по одному. Новое действие не передаётся пока предыдущее полностью не обработано компонентами. Действия из-за работы источника действия, например, пользователя, поступают асинхронно, но их диспетчеризация явлется синхронным процессом. Кроме имени (англ. name), действия могут иметь полезную нагрузку (англ. payload), содержащую относящиеся к действию данные.

- Диспетчер/Диспатчер (англ. dispatcher) предназначен для передачи действий хранилищам. В упрощённом варианте диспетчер может вообще не выделяться, как единственный на всё приложение. В диспетчере хранилища регистрируют свои функции обратного вызова (callback) и зависимости между хранилищами.

- Хранилище (англ. store) является местом, где сосредоточено состояние (англ. state) приложения. Остальные компоненты, согласно Flux, не имеют значимого (с точки зрения архитектуры) состояния. Изменение состояния хранилища происходит строго на основе данных действия и старого состояния хранилища при помощи чистых функций.

- Представление (англ. view) — компонент, обычно отвечающий за выдачу информации пользователю. Во Flux-архитектуре, которая может технически не касаться внутреннего устройства представлений вообще, это — конечная точка потоков данных. Для информационной архитектуры важно только, что данные попадают в систему (то есть, обратно в хранилища) только через действия.

👉 @seniorFront