Image Slider

В этом видео создается бесконечный 3D слайдер на CSS и JS.

👉 @seniorFront

Card Animations Showcase

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

👉 @seniorFront

Convert A Hex String To RGB

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

- Принимает в качестве параметра шестнадцатеричную цветовую строку без учета регистра (например, "#FF9933"или "#ff9933") .

- Возвращает объект со структурой {r: 255, g: 153, b: 51}, где r , g и b находятся в диапазоне от 0 до 255.

Примечание: ваша реализация не обязательно должна поддерживать сокращенную форму шестнадцатеричной записи (т.е. "#FFF")

Пример:

"#FF9933" -->  {r: 255, g: 153, b: 51}
"#beaded" -->  {r:190, g:173, b:237}
"#000000" -->  {r:0, g:0, b:0}

👉 @seniorFront

«Великолепный» CSS. Коллекция странностей CSS, на которые я потратил кучу времени

CSS часто преподносит сюрпризы, способные запутать даже опытных разработчиков. Я понимаю их раздражение. Тут всё закономерно.

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

👉 @seniorFront

Каким образом html превращается в страницу ?

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

1. Загрузка HTML-документа
Когда пользователь вводит URL в адресную строку браузера или переходит по ссылке, происходит запрос HTTP (или HTTPS) к серверу, на котором находится веб-страница. Сервер отвечает на этот запрос, отправляя HTML-документ.

2. Парсинг HTML-документа
Браузер получает HTML-документ и начинает его парсинг. Это включает в себя разбор HTML-кода и создание структуры данных, известной как DOM (Document Object Model).

3. Построение DOM-дерева
Браузер читает HTML-документ построчно, создавая узлы для каждого элемента и текста. Эти узлы образуют DOM-дерево, которое представляет структуру веб-страницы. Каждый элемент HTML превращается в объект, который браузер может использовать для дальнейших операций.

4. Загрузка внешних ресурсов
В процессе парсинга HTML браузер также обнаруживает ссылки на внешние ресурсы, такие как CSS-файлы, JavaScript-файлы, изображения, шрифты и другие ресурсы. Браузер отправляет дополнительные HTTP-запросы для загрузки этих ресурсов.

5. Применение CSS и построение CSSOM
После загрузки CSS-файлов браузер парсит их и строит CSSOM (CSS Object Model) — объектную модель, представляющую стили, применяемые к элементам на странице. Затем браузер объединяет DOM и CSSOM для создания рендер-дерева (render tree), которое содержит видимые элементы страницы и их стили.

6. Расчет макета (layout)
Браузер рассчитывает размеры и положение каждого элемента на странице, основываясь на рендер-дереве и правилах CSS. Этот процесс известен как layout или reflow.

7. Отрисовка (painting)
На этапе отрисовки браузер берет рендер-дерево и начинает преобразовывать его в пиксели на экране. Этот процесс включает рисование каждого элемента, включая текст, цвета, изображения, границы и другие стили.

8. Выполнение JavaScript
Если HTML-документ содержит теги <script> или ссылки на внешние JavaScript-файлы, браузер загружает и выполняет эти скрипты. JavaScript может изменять DOM, CSSOM и влиять на отрисовку страницы в реальном времени.

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

👉 @seniorFront

Falling Text with Gravity

Реализовано и анимировано с использованием библиотеки gsap.

👉 @seniorFront

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

Я нанимаю людей 10+ лет и верю, что в людях можно разглядеть потенциал. Мои команды решают сложные задачи, и 9 из 10 наймов — успешны. Провал? Обычно из-за неучтённого бэкграунда или усталости кандидата.

Как было раньше
10 лет назад я стал тимлидом и участвовал в наймах. Техдиректор требовал фундаментальных знаний Computer Science: алгоритмы, задачки, лайвкодинг (да, на ноутбуке или даже бумаге!). Собеседования напоминали экзамены: кандидат отвечал, а "препод" оценивал. Люди краснели, терялись, диалог скатывался в "родитель–ребёнок". Мне это не нравилось, но казалось, что так "прощупывают" границы знаний.

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

Проблема современных собеседований
IT-индустрия изменилась. Собесы усложняют: лайвкодинг, задачи с LeetCode, вопросы, не связанные с реальными кейсами. Опытный разработчик может не пройти, если не решит задачу мгновенно. Это демотивирует. Коллега с 10+ годами опыта жаловался: его проекты игнорируют, а HR задают вопросы про RPS, не учитывая кейсы. Собесы стали экзаменами, где ошибка "обнуляет" опыт.

Что делать?
Фундамент важен, но важнее — живой ум и реальные результаты. Работодателям стоит:
- Чётко описывать требования в вакансиях (RPS, технологии, задачи).
- Сократить этапы до 1–2 встреч. Больше — трата времени.
- Смотреть на кейсы, а не на скорость решения задачек.

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

👉 @seniorFront

Следи за собой. Риски общения с ИИ

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

К чему мы пришли:

- Теперь ИИ рабочий интерфейс почти для всего. Уже не стоит вопрос — справится ли, скорее заказчики спрашивают: а почему в этом проекте до сих пор нет ИИ?

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

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

Эту статью я написал на основе личного опыта и опыта общения с увлеченными пользователями ИИ. Большая часть указанных рисков подтверждается научными исследованиями.

👉 @seniorFront

light and shadow

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

👉 @seniorFront

Password Strength Checker

В этом видео создается анимированное поле ввода пароля с проверкой на надежность на чистом JS.

👉 @seniorFront

Издержки профессии

👉 @seniorFront

Upload UI

Это карточки, сообщающие о состоянии загрузки файла, свёрстанные на HTML и SCSS.

👉 @seniorFront

Toast Catcher

Вся игра - это SVG картинка, анимированная в SCSS. Логика реализована на чистом JS.

👉 @seniorFront

Card Hover Effects

В этом видео создаются карточки с 3D эффектом при наведении на CSS.

👉 @seniorFront

Alphabet soup

Это анимация загрузки, реализованная при помощи библиотеки gsap.

👉 @seniorFront

Minimum Reduction

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

Пример:

 reducePyramid([3n, 5n]) = 8n

👉 @seniorFront

Выгорание в IT. Как распознать первые сигналы и не сгореть

Давай поговорим о том, о чем все знают, но предпочитают молчать, пока не прижмет — о профессиональном выгорании.

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

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

👉 @seniorFront