Пора в отпуск

👉 @seniorFront

Shimmer wave text animation

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

👉 @seniorFront

Pure CSS rotating carousel of suno.ai homepage

Стилизовано и анимировано в HTML и SCSS.

👉 @seniorFront

Magic Button Effect

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

👉 @seniorFront

Bubbles

Пузыри генерируются в JS, а затем стилизуются и анимируются в CSS.

👉 @seniorFront

Array Helpers

Расширьте встроенный класс Array следующими методами: square(), cube(), average(), sum(), even() и odd().

square() - должен возвращать копию массива, содержащую все значения, возведенные в квадрат.
cube() - должен возвращать копию массива, содержащую все значения, возведенные в куб.
average() - должен возвращать среднее значение всех значений массива; для пустого массива должно возвращать NaN
sum() - должен возвращать сумму всех значений массива
even() - должен возвращать массив всех четных чисел
odd() - должна возвращать массив всех нечетных чисел

Пример:
var numbers = [1, 2, 3, 4, 5];

numbers.square(); // must return [1, 4, 9, 16, 25]
numbers.cube(); // must return [1, 8, 27, 64, 125]
numbers.average(); // must return 3
numbers.sum(); // must return 15
numbers.even(); // must return [2, 4]
numbers.odd(); // must return [1, 3, 5]

👉 @seniorFront

Чему могут научить пул реквесты в чужие проекты

В этой статье автор объясняет, как вам может помочь вклад в чужие проекты, так как это мощный способ совершенствоваться, помогать в этом другим. Умение писать грамотный и понятный код, знать тонкости игрового движка и языка программирования, налаживать общение в процессе работы – вот чему можно научиться в процессе. Главное – получайте удовольствие от проделанной работы!

👉 @seniorFront

Асинхронность в JS

Понятие асинхронности и синхронности
Синхронный код - это код, который выполняется последовательно, один за другим. Ничего сложного, просто пошаговое выполнение. Для примера, вот как может выглядеть синхронный код:

 console.log('Шаг 1');
 console.log('Шаг 2');
 console.log('Шаг 3');

Асинхронный код в JavaScript выполняется в одном потоке, но не синхронно с основным потоком выполнения. Вместо того, чтобы блокировать выполнение основного кода, асинхронные операции обрабатываются в фоновом режиме. Это позволяет приложению продолжать свою работу без задержек, даже когда выполняются длительные операции, такие как запросы к серверу или обработка файлов. Таким образом, JavaScript обеспечивает отзывчивость приложений, не используя многопоточность, а полагаясь на механизмы асинхронного выполнения. Вот пример асинхронного кода:

console.log('Шаг 1');
setTimeout(function() {
console.log('Шаг 2');
}, 2000);
console.log('Шаг 3');

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

1. Разрешение или отклонение промиса с помощью методов .then(), .catch() и .finally().
2. Использование async/await в асинхронных функциях.

Давайте рассмотрим пример с использованием промисов:
console.log('Начало');
Promise.resolve()
.then(() => console.log('Это микрозадача'))
.then(() => console.log('Это еще одна микрозадача'));
console.log('Конец');
Этот код создает две микрозадачи с помощью методов .then(). Заметьте, что они выполняются после основной задачи, несмотря на то, что они добавляются в очередь раньше.

Макрозадачи
Макрозадачи обычно связаны с более крупными операциями или событиями в JavaScript, такими как выполнение скриптов, обработка событий DOM или выполнение кода в таймауте. Вот несколько примеров операций, создающих макрозадачи:

1. Выполнение скрипта.
2. Обработка событий DOM.
3. Выполнение кода в таймауте с помощью setTimeout() или setInterval().

Рассмотрим пример с использованием setTimeout():
console.log('Начало');
setTimeout(() => {
console.log('Это макрозадача');
}, 0);
console.log('Конец');

Этот код создает макрозадачу с помощью функции setTimeout(). Заметьте, что она добавляется в очередь после основной задачи и даже после микрозадач.

👉 @seniorFront

Responsive Blog Card Slider

Вёрстка реализована на HTML и SCSS, а функционал слайдера при помощи библиотеки Swiper.

👉 @seniorFront

​Пора переходить на микрофронтенд?

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

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

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

Микрофронтенд бывает горизонтального (по функциональным блокам приложения) и вертикального разделения (по сервисам/модулям и их доменам). Архитектурный подход организуют с помощью одного из 3 самых популярных фреймворков: Podium, Single-SPA и Module Federation.

Чтобы понять, что продукт пора переводить на “рельсы” микрофронтенда вместо монолита, я сформулировал 5 вопросов. Если вы отвечаете на них положительно, изменений требует фронтенд-разработка, а если точнее пора “приручать микрофронтендного зверя”.

1. В вашем приложении сложная функциональность, над которой работают две и более команды (например, вы реализуете несколько продуктов и код всего приложения громоздкий)?
2. Вам часто приходится интегрировать компоненты фронтенд коллеги/другой команды, которые работают над другой функциональностью приложения?
3. Вам приходится ждать, когда компоненты другой функциональности приложения обновятся, и это тормозит вашу работу?
4. Компоненты в интерфейсе долго грузятся у пользователя при авторизации в приложении и переходе между модулями/решениями?
5. Вам нужно сделать плавный переезд с одной технологии на другую (например, с JS на библиотеки React/Angular/Vue)?

Если на минимум 2 вопроса вы ответили положительно, стоит изучить микрофронтендный подход и подумать о переходе на него.

👉 @seniorFront

​Принципы общения с людьми при провалах — тезисы для обретения дзена

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

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

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

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

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

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

Больше пунктов в статье

👉 @seniorFront

Color Gradient Feature Table

Эта таблица реализована с использованием Pug и CSS. Настройки завязаны на CSS переменные, значения которых изменяются в JS.

👉 @seniorFront

Password Strength Checker in Javascript

В этом видео создается форма ввода пароля на HTML и CSS. В JS создается логика проверки сложности пароля.

👉 @seniorFront

👉 @seniorFront

Infinite Portals

Создано и анимировано на canvas с использованием возможностей THREE.js

👉 @seniorFront

Bubbles (CPC)

Свёрстано и анимировано на HTML и SCSS.

👉 @seniorFront

Direction-Aware Text Hover Effects

В этом видео создается анимация при наведении на текст, которая меняется в зависимости от места наведения курсора.

👉 @seniorFront

Greyscale Infinite Swiper

Создано на React и стилизовано в SCSS.

👉 @seniorFront

Christmas Trash Party

Вы получите trash1 и trash2, которые могут иметь следующие значения:
[], false, '', new Array(), null, NaN, undefined, 0, -0, 0n, -0n, '0'.

Вы должны вернуть булево значение, если они строго равны.

Примечание:
тройное равенство === и строгое неравенство !== не допускаются

Пример:
compareTrash(0, false) => false
compareTrash('', '') => true
compareTrash([], 0) => false

👉 @seniorFront