Animated 9 Dots Navigation Menu

В этом видео создаётся навигационное меню, анимируемое при открытии при помощи CSS transform. Каждому элементу задается CSS transition-delay, чтобы раскрытие происходило не одновременно.

👉 @seniorFront

Supabase Ticket

Карточка свёрстана на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront

Мартышка и АйТи

На данный момент автор в IT уже порядка 15 лет. Большую часть времени был разработчиком.
За эти 15 лет было интересно наблюдать за изменением трендов, особенно вне энтерпрайз разработки. Самое интересное — это наблюдать, как технологии и паттерны циклически развиваются. В этой статье раскрывается тема этого циклического развития.

👉 @seniorFront

Fix My Phone Numbers!

Номер телефона должен состоять из 11 цифр и всегда начинаться с 0.
Вам дана строка, где в номер телефона подмешаны различные символы. Очистите строку от лишних символов и верните номер.

👉 @seniorFront

​Глобальный объект

Глобальными называют переменные и функции, которые не находятся внутри какой-то функции.
В JavaScript все глобальные переменные и функции являются свойствами специального объекта, который называется «глобальный объект» (global object).

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

var a = 5; // объявление var создаёт свойство window.a
alert(window.a); // 5

Выполнение скрипта происходит в две фазы:

1. На первой фазе происходит инициализация, подготовка к запуску. Во время инициализации скрипт сканируется на предмет объявления функций вида Function Declaration, а затем — на предмет объявления переменных var. Каждое такое объявление добавляется в window. Функции, объявленные как Function Declaration, создаются сразу работающими, а переменные — равными undefined.

2. На второй фазе — собственно, выполнение. Присваивание (=) значений переменных происходит на второй фазе, когда поток выполнения доходит до соответствующей строчки кода.

// По окончании инициализации, до выполнения кода:
// window = { f: function, a: undefined, g: undefined }

var a = 5; // при инициализации даёт: window.a=undefined

function f(arg) { /*...*/ } // при инициализации даёт: window.f = function

var g = function(arg) { /*...*/ }; // при инициализации даёт: window.g = undefined

👉 @seniorFront

Silky smooth toggles volume

Это input type="checkbox", внутри которых находятся SVG-картинки, анимируемые в JS.

👉 @seniorFront

​Разбираемся, зачем нужен и как выбрать оптимальный загрузочный экран для вашего веб-продукта

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

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

Типы загрузочных экранов
Если поискать в интернете примеры загрузочных экранов для веб‑страниц, то найдётся бесконечное количество вариаций дизайна, но они укладываются всего в три типа.

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

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

👉 @seniorFront

Как пирамида тестирования уплывает на сторону разработки

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

👉 @seniorFront

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