Floating Menu

В этом видео создается "парящее" меню на HTML, CSS и JS.

👉 @seniorFront

Search Bubbles

Реализовано на canvas, анимировано библиотекой gsap.

👉 @seniorFront

Extract the domain name from a URL

Напишите функцию, которая при задании URL-адреса в виде строки анализирует только имя домена и возвращает его в виде строки

Пример:

"http://google.com" //  "google"
"http://google.co.jp"  //  "google"
"www.xakep.ru"  //  "xakep"
"https://youtube.com"  //  "youtube"

👉 @seniorFront

Архитектура фронтенда, к которой мы пришли

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

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

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

👉 @seniorFront

​Как сделать анимацию бесконечно повторяющейся?

Чтобы создать бесконечно повторяющуюся анимацию в CSS, используется свойство animation вместе с параметром infinite, который указывает, что анимация должна повторяться бесконечно.

Основные шаги
1. Определение ключевых кадров анимации
с помощью @keyframes.
2. Применение анимации к элементу с использованием свойства animation и указанием параметра infinite.

Пример использования

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

@keyframes changeColor {
    0% {
        background-color: lightblue;
    }
    50% {
        background-color: lightgreen;
    }
    100% {
        background-color: lightblue;
    }
}

Теперь применим эту анимацию к элементу и укажем, что она должна повторяться бесконечно.

.animated-box {
    width: 100px;
    height: 100px;
    background-color: lightblue;
    animation: changeColor 3s infinite;
}

Зачем это нужно

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

👉 @seniorFront

Invitation

Сверстано на HTML и SCSS. Логика переключения экранов реализована на чистом JS.

👉 @seniorFront

​Корпоративный револьвер: как айтишнику выживать в корпорации

С одной стороны корпорации желают от IT выполнения целей и соблюдения планов, обложенных OKR, KPI и другими словами. С другой — работы с влетами. Здесь мы и достаем револьвер. Команда — это револьвер. Емкость барабана — емкость команды в спринте. Или в квартале, это как договоритесь. Патроны — задачи. Задачи делятся на классы. Заряжаете в команду задачи разных классов в разных пропорциях и стреляете. Например, для восьмиразрядного револьвера вы берете пять целевых задач, одну поддержку, один техдолг, один влет.

Внедрение метода — подготовка
Со второго квартала разработки приходите к бизнесу и говорите: вот квартальная емкость команды, вот оценка предполагаемых целей. Давайте договоримся, какие цели берем.
Почему со второго? Потому что в первом во многих корпорациях нет статистики производительности, нет понимания, кто из бизнеса решает. Требования могут постоянно меняться. А также есть масса других сюрпризов. Первый квартал — это путь воина. В промежутках между атаками проявляются цели второго квартала.

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

Пули вылетели. А что в итоге?
Получите плюсики в карму за цели, потому что вы придерживаетесь плана, как атомные часы. А также плюсики за влеты.

Ведь несмотря на постоянный цейтнот, вы в итоге всегда выполняете обещанное. Да, иногда могут быть задержки. Но именно они спасут вас от подозрений, что вы перезаложились по времени или взяли «недостаточно амбициозные» цели.

В среднем вы соблюдаете баланс между целями и влетами. И кружитесь в танце с вашим заказчиком, не наступая друг другу на ноги.

В общем, именно так в корпорации можно пользоваться револьвером.

👉 @seniorFront

Почему ИИ-инструменты для разработчиков не оправдывают ожиданий

«Искусственный интеллект сделает разработчиков ненужными», — говорили они. И вот мы в 2 часа ночи занимаемся отладкой кода, сгенерированного искусственным интеллектом. Что пошло не так?

Искусственный интеллект должен был писать идеальный код, выполнять всю рутинную работу и в целом делать нашу жизнь проще. Но вот мы пришли к текущей реальности, и... всё не совсем так, как мы ожидали.

Итак, в чём же эти ИИ-инструменты для разработчиков оказываются неэффективными? Почему написание кода с использованием искусственного интеллекта оказалось не тем, чем мы все ожидали? И, что важнее всего: как мы можем его использовать, чтобы на самом деле облегчить свою работу?

👉 @seniorFront

Text Fade In

Стилизовано и анимировано в HTML и SCSS. При скроле активируются определенные CSS классы через JS.

👉 @seniorFront

CSS Transforming Circle Loader

В этом видео создается анимированный загрузчик на чистом CSS.

👉 @seniorFront

Муд в понедельник: «продуктивные» зумы с коллегами на пару часов.

Ну не работать же после выходных!

👉 @seniorFront

Page flip

Создано и анимировано на HTML и CSS.

👉 @seniorFront

Био-кнопка

Кнопки с оригинальным эффектом при наведении на HTML и CSS.

👉 @seniorFront

Modern Javascript Button Hover Animation Effects

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

👉 @seniorFront

Pure CSS Playing Card

Реализовано без использования картинок и JS, задействованы только HTML и SCSS.

👉 @seniorFront

Проверка объединенных строк

На собеседовании вам предстоит написать алгоритм, проверяющий, может ли строка(s), быть сформирована из двух других строк, part1 и part2.

Ограничение состоит в том, что символы в part1 и part2 должны располагаться в том же порядке, что и в s.

Пример:

'xcyc', 'xc', 'yc' —> // true
'xcyc', 'yc', 'xc' —> // true
'codewars', 'code', 'wars' —> // true
'codewars', 'cdwr', 'oeas' —> // true
'codewars', 'code', 'code' —> // false

👉 @seniorFront

​Чистая архитектура фронтенд приложений.

За свою карьеру я встречал достаточно много проектов, крупных и малых, которые страдали от огромной и запутанной кодовой базы с высоким уровнем зацепления и малой связностью, непонятной структурой, в которую весьма сложно погрузиться (на онбродинг нового сотрудника может уходить до трех месяцев) и большим количеством непонятных и громоздких компонентов, которые являются god object'ами. Стоит ли говорить, что у таких проектов имеются большие проблемы с поддержкой и развитием.

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

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

👉 @seniorFront

​В чём разница в работе eventloop на сервере и в браузере?

Это механизм, используемый для обработки и выполнения асинхронных операций. Он позволяет JavaScript выполнять неблокирующие операции, несмотря на то, что JavaScript является однопоточным. Хотя принципы работы Event Loop в браузере и на сервере (например, в Node.js) схожи, есть некоторые важные различия в их реализации и окружении.

Event Loop в браузере
В браузере Event Loop отвечает за обработку событий, выполнение асинхронного кода и обновление пользовательского интерфейса.

DOM и рендеринг
Браузер должен обновлять и перерисовывать пользовательский интерфейс. Это включает в себя обработку изменений в DOM и применение стилей. Рендеринг обычно происходит между итерациями Event Loop.

Очередь макрозадач
Включает такие задачи, как обработка пользовательских событий (нажатие кнопок, ввод текста), setTimeout, setInterval, сетевые запросы (XHR, fetch) и другие. Эти задачи обрабатываются в порядке их поступления.

Очередь микрозадач
Включает такие задачи, как промисы (Promise), MutationObserver. Микрозадачи выполняются перед макрозадачами в рамках одной итерации Event Loop.

UI события
Браузер должен обрабатывать события, связанные с пользовательским интерфейсом, такие как рендеринг и взаимодействие с пользователем.

Event Loop в Node.js
Node.js, как серверная платформа, использует Event Loop для обработки асинхронных операций, таких как I/O, таймеры и сетевые запросы.

Фазы Event Loop
Node.js Event Loop состоит из нескольких фаз, каждая из которых обрабатывает определённые типы задач: timers, I/O callbacks, idle, poll, check, и close callbacks.

- Timers - Эта фаза обрабатывает колбэки от setTimeout и setInterval.
- I/O callbacks - Обрабатывает почти все колбэки от асинхронных операций ввода-вывода, за исключением close callbacks, таймеров и setImmediate.
- Poll Извлекает новые I/O события; выполняет I/O-колбэки (почти все, за исключением тех, которые закроют сервер); и если ничего не происходит, ждет в этой фазе.
- Check - Обрабатывает колбэки от setImmediate.
- Close callbacks - Обрабатывает колбэки от закрытия всех I/O операций.
- Microtasks (process.nextTick и Promises) - Выполняются после каждой фазы Event Loop, перед переходом к следующей фазе

Различия

Окружение
В браузере Event Loop управляет как асинхронными задачами, так и обновлением пользовательского интерфейса. В Node.js Event Loop больше ориентирован на обработку I/O операций и серверных задач.

Фазы Event Loop
В браузере Event Loop менее детализирован по фазам по сравнению с Node.js. В Node.js Event Loop разделён на более детализированные фазы для обработки различных типов асинхронных задач.

Микрозадачи
И в браузере, и в Node.js микрозадачи выполняются перед макрозадачами, но реализация и использование могут слегка отличаться.

Рендеринг
В браузере Event Loop включает в себя шаги, связанные с рендерингом и обновлением DOM. В Node.js этого аспекта нет, так как он работает на сервере и не имеет дела с рендерингом пользовательского интерфейса.

👉 @seniorFront

Happy Christmas!

Карточка-поздравление с Рождеством, свёрстанная на HTML и CSS.

👉 @seniorFront