Loader

Разделение клеток сделано при помощи библиотеки Splitting.js, анимировано библиотекой gsap.

👉 @seniorFront

​Вавилонское сайтотворение: как фронтендеры и дизайнеры понимают друг друга

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

Временной разлом
Если взглянуть на дорожную карту проекта, разработчик и дизайнер существуют в разных точках по оси времени и общаются между собой, используя Доктора Кто в качестве курьера. Для дизайнера продукт готов, он в настоящем и даже немножко в прошлом, в этаком Present Perfect. Для фронтендера такое же состояние проекта — это более или менее отдалённое будущее.
В идеале все вопросы надо обсудить сразу, пока открыт временной разлом, объединяющий дизайнера и фронта. Но это не всегда возможно. Разработчик должен перенестись в будущее и заранее представить все проблемы, с которыми он может столкнуться.
Решение — поддерживать связь. Пока идёт общение, временной разлом не затянется. Ну и отличная идея — все мутные моменты прояснять сразу же, а не копить на свой или чужой дедлайн.

Есть ещё гриды в гридницах
Грид — очень распространённая абстракция в веб-дизайне, да и не только в веб. Но у дизайнеров и разработчиков гриды разные.
Грид дизайнера измеряется в пикселях. Грид разработчика — в процентах, в долях блока. У разработчика в голове — адаптивность, универсальность. У дизайнера — конкретная картинка. В результате нередко оказывается, что пиксель пёрфект не очень-то пёрфект.
Свобода творчества — это, безусловно, хорошо, но когда твоё творчество потом высекают в HTML/CSS — хорошо бы подумать о комфорте скульптора.

Вупсень и Пупсень… в смысле, пэддинг и марджин
Ни один фронтендер в здравом уме не перепутает padding и margin. И не потому что на фартуках разное количество ягод, а потому что — ну совсем разные же вещи. Допустим, padding входит в box-sizing, а margin — нет. С помощью margin можно центрировать элемент, а с помощью padding — нет. Не говоря уже про margin collapse и другие нюансы, тьма их.
Для дизайнера отступ есть отступ. Конечно, хороший дизайнер должен что-то понимать в вёрстке. Но всё это внешнее, наносное, мышление такими категориями чуждо дизайнерскому художественному восприятию.

Буква Г — лоГика
Даже когда речь идёт о статичной странице, существуют проблемы взаимопонимания. Интерактив — это проблемы в квадрате.
Дизайнер методично прорисовывает каждое состояния элемента. Логика, стоящая за этими состояниями, для него вполне очевидна. Он отдаёт макет фронтендеру. Фронтендер смотрит — да, логика действительно очевидна. И немедленно имплементирует её. То, что очевидность у них разная, становится ясно сильно потом, когда уже закрылся временной разлом.

👉 @seniorFront

​​Хочешь бесплатно освоить JavaScript?

Эти два канала научат тебя писать фронт и бэк на JS

👉 Frontender's notes - один из самых больших каналов по фронту с инфой и хаками по фронту

👉 Серверный JavaScript | Node.JS - о серверной стороне JS. Подойдет для фулстаков и тем кто хочет ими стать.

Добро пожаловать!

Text scroll and hover effect

Эффекты при прокрутке и наведении созданы библиотекой gsap.

👉 @seniorFront

Movie Poster Interaction

Реализовано на чистых HTML и CSS.

👉 @seniorFront

Circular Progress Bar

В этом видео создается круговая диаграмма при помощи CSS conic-gradient()

👉 @seniorFront

👉 @seniorFront

3d slider

Эффект 3D создается при помощи CSS transform. Автоматическая прокрутка реализована в JS.

👉 @seniorFront

Accordeon

Реализовано без JS, но с использованием нового CSS селектора :has()

👉 @seniorFront

Уверен, что твой код — эталон красоты, изящества и оригинальности? Тогда скорее регистрируйся на Конкурс красоты кода от Сбера 👑

Забрать звание «Автор самого красивого кода» и один из пятнадцати iPhone 14 можно за 3 простых шага:

✔️ Выбери одну из пяти дисциплин: Python, Java, Data Science, Frontend или Android.
✔️ Вспомни или напиши с нуля свой безупречный код до 18 сентября по ссылке.
✔️ Дождись 21 сентября — именно в этот день жюри объявят победителей.

Желаем удачи и кода без багов 💚

Active Icon Navigation Menu

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

👉 @seniorFront

Repost Button with CSS Icon Sprite and Filtering

При выборе чекбоксов изменяются значения CSS переменных. При нажатии запускаются CSS трансформации.

👉 @seniorFront

Сравнение строк

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

Первый параметр функции - создаваемая строка.
Второй и третий - используемые строки

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

Примеры:
isMatching("email box", "b aIl", "Mo x e") return true
isMatching("bouh", "0b", "uh") return false
isMatching("kata", "kt", "aaa") return false

👉 @seniorFront

Loading...

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

👉 @seniorFront

prefers-reduced-motion

Одно из значений директивы @media для проверки пользовательских настроек воспроизведения анимации.

Большинство современных операционных систем позволяют пользователю настраивать параметры анимации в настройках. Медиа-запрос prefers-reduced-motion позволяет определить, отключена или уменьшена анимация в системе и применять стили CSS, которые это учитывают.

С помощью prefers-reduced-motion можно замедлить или полностью отключить анимацию.
У prefers-reduced-motion есть два значения:
- no-preference — настройки анимации по умолчанию.
- reduce — анимация отключена.
В примере добавляем плавную прокрутку только для пользователей, у которых не отключена анимация на уровне системы.
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}

👉 @seniorFront

Navigation bar concept

Свёрстано на HTML и CSS. В JS прописана логика смены CSS классов при клике.

👉 @seniorFront

​Как повысить шансы на хороший найм и оффер

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

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

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

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

Изучайте опыт публичных собеседований и решайте задачи
Чтобы лучше подготовиться к техническим собеседованиям, могу посоветовать решать задачи в LeetCode. Это улучшит ваши шансы пройти базовое техническое интервью. Ещё можно посмотреть публичные собеседования на Youtube, и по аналогии вы будете понимать, чего ждать, особенно если редко бывали на интервью.

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

👉 @seniorFront

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

Профессиональный и карьерный рост, возможность развития и самореализации, программы обучения, стабильность и безопасность, возможность работать практически в любом городе России – всё это возможно в Росатоме. Выбери идеальную вакансию и отправь своё резюме по ссылке 👉🏻 https://vk.cc/cp5Quj.

Swaying photo gallery

В JS создана логика запуска CSS анимаций при скроле.

👉 @seniorFront

Mobile menu

Создано на чистом CSS. При выборе каждого элемента меню - радио-кнопки, задаются свои стили.

👉 @seniorFront

Simple CSS Sci-Fi Card

В этом видео создается верстка карточек и эффект при наведении. Сложная форма внутри карточки реализована при помощи CSS clip-path.

👉 @seniorFront