Senior Frontend - javascript, html, css
25.7K subscribers
1.28K photos
2.25K videos
705 links
Senior Front - канал для frontend программистов, практические задачки, проверки знаний, интересные статьи

Админ, сотрудничество, реклама:@seniorFrontPromo, @maria_seniorfront
Канал в реестре РКН https://rknn.link/bsU
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
On/Off Plugs

Это svg картинка, анимируемая в CSS.

👉 @seniorFront
👍115🔥5🤔1
This media is not supported in your browser
VIEW IN TELEGRAM
Frying Pan Preloader

Оригинальный загрузчик - svg картинка, анимируемая в CSS.

👉 @seniorFront
👍10🔥3
Какими ключевыми словами можно задать форму радиального градиента?
Anonymous Quiz
21%
circle, ellipse
57%
radial, round
9%
horizontal, vertical
13%
top, left, right, bottom
🤔8👍6
Media is too big
VIEW IN TELEGRAM
Modern Button Hover Effects

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

👉 @seniorFront
🔥7👍1
This media is not supported in your browser
VIEW IN TELEGRAM
3D Card Slider - GSAP

Логика переключения слайдов и анимация реализованы библиотекой gsap.

👉 @seniorFront
👍10🔥62
Partial Word Searching

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

Метод принимает два параметра: строку запроса и массив строк для поиска, и возвращает массив.

Если строка не содержится ни в одной из строк массива, метод возвращает массив, содержащий одну строку: «Empty».

Пример:
wordSearch("me",["home", "milk", "Mercury", "fish"]) => ["home", "Mercury"]

👉 @seniorFront
👍51🤔1
Как работать эффективно, если ты тревожный человек

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

👉 @seniorFront
9👎1🔥1
prefers-color-scheme

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

Пример
В этом коде с помощью prefers-color-scheme определяем, что у пользователя выбрана светлая тема, и задаём для неё свои цвета.
@media (prefers-color-scheme: light) {
.block {
background: white;
color: black;
}
}


👉 @seniorFront
👍11
This media is not supported in your browser
VIEW IN TELEGRAM
Golf Toggle

Оригинальный переключатель, анимированный в CSS. Логика смены CSS классов при нажатии реализована в JS.

👉 @seniorFront
🔥15👎2🤔2
Вам не нужен Lodash. Хватит! Пожалуйста

Лодаш:
- Имеет множество методов установки, каждый из которых может вызывать проблемы и головную боль с подключением
- Легко подключается целиком вместо нескольких нужных вам методов
- Не обновляется
- Не нужен в 95% случаев
- Мешает пониманию действительно современных методов

Вам не нужен лодаш. Пройдитесь по своим методам, выкиньте доступные в нативе, замените недоступные (если они вам точно нужны).

А если уж вы его используете:
- Используйте es-версию с костылями под TS, если потребуются, или обычную с плагинами для tree-shaking
- Не используйте эти отдельные пакеты - только lodash или lodash-es
- Не увеличивайте его процент использования в вашем коде. Пожалуйста

Вы может быть еще и Moment используете? Тоже пора обновляться!

👉 @seniorFront
👍12👎8
Метрики, которые действительно имеют значение

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

В этой статье рассматриваются виды метрик и рассказывается о том, как их выбрать.

👉 @seniorFront
👍4
This media is not supported in your browser
VIEW IN TELEGRAM
Card Hover Effect - 100

Карточки свёрстаны на HTML и CSS. Частицы реализованы библиотекой particlesJS.

👉 @seniorFront
👍5🔥4
Media is too big
VIEW IN TELEGRAM
Amazing Liquid Dripping Effects

В этом видео создаётся анимация жидкости. Капли генерируются в JS и анимируются в CSS.

👉 @seniorFront
👍3
This media is not supported in your browser
VIEW IN TELEGRAM
Trampoline loader

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

👉 @seniorFront
👍8
This media is not supported in your browser
VIEW IN TELEGRAM
Delivery Truck Loading

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

👉 @seniorFront
👍19
Какой метод может изменить структуру URI?
Anonymous Quiz
23%
decodeURI
23%
decodeURIComponent
26%
Оба метода
28%
Ни один из методов
👎9
Media is too big
VIEW IN TELEGRAM
Animated 9 Dots Navigation Menu

В этом видео создаётся навигационное меню, анимируемое при открытии при помощи CSS transform. Каждому элементу задается CSS transition-delay, чтобы раскрытие происходило не одновременно.

👉 @seniorFront
3
This media is not supported in your browser
VIEW IN TELEGRAM
Supabase Ticket

Карточка свёрстана на HTML и CSS. Анимировано библиотекой gsap.

👉 @seniorFront
👍5
Мартышка и АйТи

На данный момент автор в IT уже порядка 15 лет. Большую часть времени был разработчиком.
За эти 15 лет было интересно наблюдать за изменением трендов, особенно вне энтерпрайз разработки. Самое интересное — это наблюдать, как технологии и паттерны циклически развиваются. В этой статье раскрывается тема этого циклического развития.

👉 @seniorFront
👎2👍1