To Do List App

В этом видео создается небольшое приложение на HTML, CSS и JS.

👉 @seniorFront

Scroll Driven Animation

Реализовано на чистом CSS при помощи свойства animation-timeline со значением scroll.

👉 @seniorFront

I love big nums and I cannot lie

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

Примеры:

 [1, 2, 3] --> "321" (3-2-1)
 [3, 30, 34, 5, 9] --> "9534330" (9-5-34-3-30)

👉 @seniorFront

Performance monitor и не только: продолжаем тестировать производительность в Chrome DevTools

Продолжаем разбирать малоизвестные, но крайне полезные фичи Chrome DevTools.Сегодня мы поговорим об утилите Performance monitor, инструменте Chrome Task Manager и о том, как вывести FPS сайта на экран.

👉 @seniorFront

​Когда использовать useEffect, а когда useLayoutEffect?

Оба этих хука выполняют побочные эффекты в React, но разница в том, когда именно они выполняются
useEffect выполняется после рендера и отрисовки в браузере.
useLayoutEffect выполняется сразу после рендера, но перед отрисовкой в браузере.

То есть useLayoutEffect блокирует рендер, а useEffect — нет.

useEffect выполняется асинхронно, после того как браузер отрисовал страницу.
Используется для:
- Запросов к API.
- Подключения WebSocket'ов или таймеров.
- Логирования данных.
- Изменения заголовка страницы (document.title).

import { useState, useEffect } from "react";

function App() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `Вы кликнули ${count} раз`;
  }, [count]); // Запускается после рендера

  return <button onClick={() => setCount(count + 1)}>Клик: {count}</button>;
}

useLayoutEffect выполняется сразу после рендера, но перед тем, как браузер отобразит изменения.
Используется для
- Синхронных манипуляций с DOM.
- Измерения размеров элементов (getBoundingClientRect).
- Анимаций (например, при расчёте позиций).

import { useEffect, useLayoutEffect, useState } from "react";

function Example() {
  const [width, setWidth] = useState(0);

  useLayoutEffect(() => {
    const box = document.getElementById("box");
    setWidth(box.offsetWidth);
  }, []);

  return (
    <div>
      <div id="box" style={{ width: "100px", height: "50px", background: "red" }}></div>
      <p>Ширина: {width}px</p>
    </div>
  );
}

👉 @seniorFront

Т-Технологии зовут на Стековку

1 ноября в Екатеринбурге, Новосибирске и Нижнем Новгороде стартует квест для ИТ-специалистов — с городским интерактивом, задачами на знание кода и смекалку.

Что нужно делать?
Решать онлайн- и офлайн-задания и получать за это баллы для своего города.

Какой приз?
В городе, который наберет больше всего баллов, устроят вечеринку. А самые активные участники смогут повлиять на выбор тематики и программы.

Как участвовать?
Просто зарегистрируйтесь до 31 октября

3D Cover Flow

Реализовано на React и стилизовано в SCSS.

👉 @seniorFront

​«Чайка-стайл» менеджмент: как не стать ураганом в офисе ?

TL;DR: «Чайка-менеджер» — это хаос, скоропалительные решения, перекладывание вины и отсутствие системы. Прилетел, наделал дел, улетел — а сотрудники в цейтноте. Как распознать и что делать? Что такое «чайка-стайл»?
Руководитель-чайка — как ураган: врывается, сеет хаос, исчезает, оставляя задачи «решить вчера».

Признаки:
- Внезапные появления с потоком вопросов и новых задач.
- Перекладывание ответственности за свои решения на сотрудников.
- Отсутствие системы: планы меняются ежечасно, делегирования нет.
- Единоличные решения, от которых компания «зависает», если босса нет.

Ключевые ошибки:
- Непонимание подчинённых из-за отсутствия опыта работы «внизу».
- Уклонение от ответственности: «раз я плачу, вы и разбирайтесь».
- Хаотичная коммуникация: сегодня — презентация, завтра — инфографика.
- Фаворитизм и конфликты: лояльных премируют, остальных игнорируют.
- Нет обучения и развития: ни для себя, ни для команды.
- Делегирование? Не, не слышал.

Влияние на бизнес:
Снижение эффективности, стресс, текучка кадров. Исследования (LinkedIn, Indeed) подтверждают: 7 из 10 уходят из-за некомпетентных боссов.

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

Итог:
«Чайка-стайл» — тормоз для бизнеса. Решение — в системности, коммуникации и развитии команды. Выбор за собственником: быть ураганом или строить стабильную компанию.

👉 @seniorFront

Shoe Swap

Логика переключения слайдов реализована в JS. Анимировано в SCSS.

👉 @seniorFront

SVG Animation

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

👉 @seniorFront

WebGL carousel

Создано и анимировано при помощи библиотеки gsap.

👉 @seniorFront

CSS Facial Recognition

В этом видео создается CSS анимация распознавания лица.

👉 @seniorFront

Hover to reveal part of background image

При движении мыши JavaScript обновляет позицию элемента .magic, центрируя его относительно курсора, а CSS задаёт стили и анимацию.

👉 @seniorFront

Correct the time-string

Нужно создать метод, который корректирует заданную временную строку.
При добавлении возникла проблема, поэтому многие временные строки сломаны.
Время форматируется с использованием 24-часовых часов, то есть с 00:00:00 до 23:59:59.

Пример:

 "09:10:01" -> "09:10:01"  
 "11:70:10" -> "12:10:10"  
 "19:99:99" -> "20:40:39"  
 "24:01:01" -> "00:01:01"

👉 @seniorFront

Кеширование Lottie-анимаций с помощью Service Worker

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

В проекте было около 30 Lottie-анимаций, некоторые весили ~100 KB, и нам нужно было оптимизировать их загрузку.

Как снизить трафик и нагрузку? Правильно - кеширование. Мы выбрали кеширование на стороне Service Worker.

👉 @seniorFront

Псевдоэлементы для подсветки текста

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

::selection: выделенный текст
::target-text: представляет собой конкретный текст, к которому браузер прокручивает страницу при использовании фрагментов текста (например, через URL с #:~:text=...).
::spelling-error: содержимое, которое было помечено user-agent как ошибочное
::grammar-error: содержимое, которое было помечено user-agent как грамматически не верное

Последние два псевдоэлемента еще не поддерживаются браузерами.

Эти псевдоэлементы могут принимать свойства:
- color
- background-color
- cursor
- caret-color
- outline
- text-decoration
- text-emphasis-color
- text-shadow

👉 @seniorFront

Rotating 3D Slider

Логика работы слайдера реализована в JS. Стилизовано и анимировано в SCSS.

👉 @seniorFront

​Почему ИИ в кодинге не панацея и как объяснить это менеджменту

Я — разработчик с 8 годами опыта, от C++ до ML и продуктовой разработки. Прошёл "ИИ-изацию" компании в 2023 и делюсь, почему не стоит слепо пушить ИИ в кодинг.

Проблемы ИИ в разработке:
1. Контекст. ИИ не знает историю проекта и продуктовые требования, которые живут в головах разработчиков. Он видит только код, теряя важные нюансы.
2. Иллюзия ускорения. Исследование METR показывает: ИИ замедляет разработку на 19%, хотя кажется, что ускоряет на 20%. Ощущения обманчивы!
3. Потеря фокуса. ИИ требует переключения внимания, разрывая рабочий поток и снижая продуктивность.
4. Посредственный код. ИИ, обученный на среднем коде из интернета, плодит техдолг, переписывает тесты, откладывая проблемы.
5. Баги и откаты. Стэнфордский рисерч: до 25% ИИ-кода содержит ошибки, которые ловят QA или пользователи, увеличивая цикл разработки.

Но есть нюанс
Исследования не идеальны. METR — выборка всего 16 человек, большинство без опыта с ИИ (например, Cursor). У тех, кто освоил ИИ, эффективность выросла, у лучших — почти в 2 раза! Главное — научиться использовать инструмент.

Итог: Менеджмент не должен пушить ИИ — рынок сам разберётся. Ключ к успеху — эксперименты и изучение лучших практик, чтобы ИИ стал помощником, а не обузой.

👉 @seniorFront

Фронтенд с нуля — бесплатное обучение.

📅 Через 7 дней у тебя будет готовый проект для портфолио.

Вот что ты сделаешь за время интенсива:

- сверстаешь полноценную страницу на HTML + CSS;
- добавишь интерактив и логику на JavaScript;
- посмотришь, как используется фронтенд-фреймворк Angular;
- подключишь backend и загрузишь проект на хостинг;
- получишь разбор и рекомендации по доработке;
- добавишь готовый проект в портфолио;
- заберешь чек-лист с местами, где можно найти хорошие заказы или постоянную работу.

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

Интенсив ведет Роман Чернов - практикующий fullstack-разработчик с 12-летним опытом.
Объясняет понятным языком и фокусируется на реальных навыках, а не теории.

👉 Ссылка на бесплатный интенсив здесь