Check Spinner

Это SVG картинка, анимируемая в SCSS.

👉 @seniorFront

How To Create Text Typing Effect

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

👉 @seniorFront

Pokemon Slide Gallery

Реализовано без использования JS. Каждый покемон - это радио -кнопка, при нажатии на которую изменяется значение CSS переменной.

👉 @seniorFront

Find the odd int

В массиве целых чисел найдите то, которое встречается нечетное количество раз. Всегда найдется только одно целое число, которое встречается нечетное количество раз.

Пример:

[7]

Должно вернуть 7, потому что оно встречается 1 раз (что нечетно).

[0]

Должно вернуть 0, потому что оно встречается 1 раз (что нечетно).

[1,1,2]

Должно вернуть 2, потому что оно встречается 1 раз (что нечетно).

[0,1,0,1,0]

Должно вернуть 0, потому что оно встречается 3 раза (что нечетно).

[1,2,2,3,3,3,4,3,3,2,2,1]

Должно вернуть 4, потому что оно встречается 1 раз (что нечетно).

👉 @seniorFront

Почему перфоманс ревью это круто?

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

👉 @seniorFront

​Чего стоит и не стоит избегать в оптимизации сайта?

Оптимизация изображений
Сжатие без потери качества: Используйте инструменты, такие как TinyPNG или ImageOptim. Использование современных форматов: WebP и AVIF обеспечивают лучшее сжатие и качество. Lazy Loading: Загружайте изображения по мере их появления в области видимости пользователя.

Минификация и объединение файлов
Минификация: Уменьшайте размеры CSS, JavaScript и HTML-файлов с помощью инструментов, таких как UglifyJS и CSSNano. Объединение: Сокращайте количество HTTP-запросов, объединяя несколько файлов в один.

Использование CDN (Content Delivery Network)
Размещайте копии вашего сайта на серверах по всему миру, чтобы уменьшить задержки для пользователей из разных регионов.

Кэширование
На стороне клиента: Настройте заголовки кэширования HTTP. На стороне сервера: Используйте технологии, такие как Varnish или Nginx.

Асинхронная загрузка и критический CSS
Асинхронная загрузка: Используйте атрибуты async и defer для JavaScript. Критический CSS: Встраивайте важные стили прямо в HTML, чтобы ускорить начальную отрисовку страницы.

Улучшение производительности сервера
Сжатие данных: Включите gzip или Brotli. HTTP/2: Переходите на HTTP/2 для мультиплексирования запросов.

Использование современных технологий
Service Workers: Для офлайн-работы и улучшенного кэширования. Prefetching и Preloading: Предзагрузка и предзапросы ресурсов.

Мониторинг и анализ
Google Lighthouse, PageSpeed Insights: Используйте для анализа производительности. Реальное время: Применяйте Google Analytics, New Relic.

Чего стоит избегать при оптимизации сайта

Избегайте чрезмерной минимизации
Читаемость кода: Минимизация без генерации карт кода (source maps) может усложнить отладку.

Не используйте большие, несжатые изображения
Размер файлов: Это замедляет загрузку и увеличивает потребление трафика пользователем.

Не загружайте все ресурсы сразу
Асинхронная загрузка: Используйте техники lazy loading и асинхронной загрузки.

Не пренебрегайте кэшированием
Отсутствие кэширования: Увеличивает время загрузки для повторных посещений.

Избегайте блокирующих ресурсов
JavaScript и CSS: Не блокируйте рендеринг страницы тяжелыми файлами.

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

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

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

👉 @seniorFront

🔥Podlodka React Crew – онлайн-конференция для React-разработчиков.

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

Что в программе:

💬 Говорим на одном языке с пользователями: i18n в React-приложениях – Виталий Баев, контрибьютор Next.js и Vite 🌍 Как выбрать инструменты и сделать интерфейс удобным для всех?

📡 OpenTelemetry для фронтенд-разработчика – Валерий Катцин, frontend-разработчик в Точке 📊 Как собирать данные о работе приложения и использовать их для улучшения продукта?

🔥 "Долгожданный" React 19 – Алекс Рассудихин, разработчик с опытом во Vue, React, Next и Astro 🚀 Какие фичи вышли в продакшен, а какие – нет?

🤖 AI Integrated Developer Experience – Марк Байдебура, Senior Full-stack Engineer в Influencer 🧠 Где AI реально помогает, а где пока его лучше не использовать?

📅 Конференция пройдет 10-14 февраля.

Ты не просто узнаешь по новые фичи и подходы, но и определишься, какие из них включить в свой roadmap и как расти дальше.

🔗 Регистрируйтесь: podlodka.io/reactcrew

Промокод сообщества
react_crew_2_oMGfq4 даёт скидку в 500 руб 🥳

Sparkly Stars

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

👉 @seniorFront

​Избегайте эффекта якоря при оценке задач

Был ли у вас хоть раз в жизни подобный диалог с начальником или тимлидом?

Тимлид: {name}, за сколько времени сделаешь эту задачу? За неделю успеешь?
Я: Да. Может быть, чуть больше — ещё тестами надо покрыть. Дней десять, наверное.

В итоге вы делаете задачу месяц.

У меня такое случалось не раз. И я всегда восхищался людьми, которые могут сразу сказать: «Какая неделя? Здесь работы минимум на месяц».

Мы попадаем в такие ситуации не потому что мы глупые. Это происходит из-за когнитивного искажения, известного как эффект якоря. Первая услышанная информация (или число) влияет на дальнейшие решения и оценки, даже если эта информация случайна.

Как ещё может проявляться эффект якоря?
Если вас спросят: «Больше ли 100 стран в Африке?», это число 100 повлияет вашу дальнейшую оценку. И если вас попросят назвать точное количество стран, то ваш ответ будет близок к 100.

Это искажение активно используется в маркетинге. Когда вы увидели цену на какой-то предмет, то такая цена «якорится» у вас в голове как норма. И тогда неожиданная скидка в 30% с более высокой вероятностью заставит вас купить эту вещь.

Как избежать эффекта якоря при работе?
Прежде всего, нужно знать о существовании этого когнитивного искажения и стараться не поддаваться его влиянию. Если в следующий раз вас спросят: «Хватит ли недели?», не торопитесь с ответом. Возьмите паузу, чтобы обдумать задачу. А затем не бойтесь назвать реальный срок, пусть это будет даже месяц, если это действительно так.

👉 @seniorFront

Что скрывают комментарии в тестах

Работая с автотестами на разных проектах, я часто сталкивалась с тем, что к коду тестов люди относятся не так, как к продуктовому. Причем это касается и разработчиков, и тестировщиков, и менеджеров. Коду тестов прощаются грехи, недопустимые в продуктовом коде. Хорошо это или плохо? Зависит от ситуации. В этой статье – сборник больных антипаттернов из моего опыта.

👉 @seniorFront

shop loader

Это SVG картинка, анимированная библиотекой TweenMax.

👉 @seniorFront

Magnetic Effects using Javascript

В этом видео создается магнитный эффект для блока на CSS и JS.

👉 @seniorFront

Осмысленные беседы

👉 @seniorFront

Hover Effect

Параметры анимации задаются через JS при наведении.

👉 @seniorFront

Bounce Delay Loader

Оригинальный загрузчик, реализованный с использованием препроцессоров Haml и SCSS.

👉 @seniorFront

CSS Liquid Effects

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

👉 @seniorFront

Cylinders Grid

Это компонент из библиотеки Three.js, реализованный на canvas.

👉 @seniorFront

Highest and Lowest

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

Примеры:

highAndLow("1 2 3 4 5");   // return "5 1"
highAndLow("1 2 -3 4 5");  // return "5 -3"
highAndLow("1 9 3 4 -5");  // return "9 -5"

👉 @seniorFront

Пишем идеальную mobile-first галерею

Привет, меня зовут Артур, и я люблю плавные интерфейсы, CSS и современные подходы. Сегодня хочу поговорить с вами о задаче, которая настигает, пожалуй, каждого фронтенд разработчика: о создании галереи.

👉 @seniorFront