Frontend-разработка
2 subscribers
878 photos
579 videos
3.31K links
Агрегатор каналов о фронтенде
Download Telegram
This media is not supported in your browser
VIEW IN TELEGRAM
Elastic Div

Логика изменения ширины контейнера реализована в JS, анимировано библиотекой gsap.

👉 @seniorFront


Original post link: t.me/seniorFront/4083
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 5 messages
Our filtering prevented you from: 5 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
Media is too big
VIEW IN TELEGRAM
What's behind ?

Реализовано на canvas и THREE.js

👉 @seniorFront


Original post link: t.me/seniorFront/4084
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
💾 Generative Blobs – маски неправильной формы для изображений. Тут можно менять количество углов и степень заостренности, а также генерировать рандомные варианты.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1772
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Fancy Button

Кнопка с эффектом обрезанных углов, реализованная на чистом CSS.

https://codepen.io/bloqhead/pen/ErOjEL


Original post link: t.me/senior_front/2010
Forwarded and filtered by @smartfeed_bot
👉 @seniorFront


Original post link: t.me/seniorFront/4085
Forwarded and filtered by @smartfeed_bot
Forwarded from Frontender's notes [ru]
👩‍💻 Собственные каскадные слои

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

.card {
background-color: rgb(175, 238, 238);
}
.card {
background-color: rgb(52, 0, 148);
}


В этом коде к карточке будет применён цвет фона rgb(52, 0, 148), поскольку он последний

Иногда нужно переопределить стили, и для этого используют модификатор !important. Он позволяет применить значение свойства вопреки обычной специфичности и каскаду.

.card {
background-color: rgb(175, 238, 238) !important;
}
.card {
background-color: rgb(52, 0, 148);
}


Теперь же порядок каскада можно определить через правило @layer. И разработчик в коде может контролировать приоритет стиля. В этом случае пишем ключевое слово @layer, указываем имена каскадных слоёв, которые хотим определить, и пишем правило в {}.

@layer имя-слоя {правило}


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

@layer dark, light;

@layer light {
.card {
width: 500px;
height: 150px;
background-color: paleturquoise;
text-wrap: balance;
}
}
@layer dark {
.card {
background-color: rgb(148, 59, 0);
}
}


• Мы вызвали правило @layer.
• Прописали названия слоёв и порядок их следования. Последний слой — приоритетный.
• Обернули в слои правила для стилей.

В реальной разработке @layer может использоваться при работе с легаси-проектами, когда есть доступ к CSS. Можно оборачивать старые стили в слой legacy, а новые в new и явно задавать порядок приоритета.
Please open Telegram to view this post
VIEW IN TELEGRAM
This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 5 messages
Our filtering prevented you from: 5 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 4 message(s)
Веб-страница: 2 message(s)
Frontender's notes [ru]: 2 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
This media is not supported in your browser
VIEW IN TELEGRAM
Canvas sprite-sheet bubbles

Пузыри генерируются и анимируются библиотекой gsap.

👉 @seniorFront


Original post link: t.me/seniorFront/4089
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Linear-style Cursor Glow

Рассеянная подсветка при наведении на элемент, выполненная с помощью SCSS и JavaScript.

https://codepen.io/davidkpiano/pen/gOoNZNe


Original post link: t.me/senior_front/2011
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 7 messages
Today you received: 2 messages
Our filtering prevented you from: 5 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 2 message(s)
Frontender's notes [ru]: 2 message(s)
Веб-страница: 1 message(s)


React to posts with 👍, 👎, ❤️, or 🔥. Spot spam? Mark it with 🤬 or 💩. Your input is valuable!
Text t.me/OlegBEZb if you want to see something else in the daily report
​​Игра «Охота на утку» на CSS

Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.

Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM

#codepen


Original post link: t.me/tproger_web/4574
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
💾 ScrollTrigger Image Zoom – анимация скролла страницы. Прокрутка создает необычный эффект зума в середину страницы, а потом переходит в перелистывание слайдов.

Сайтодел | #сниппет #css


Original post link: t.me/sitodel/1774
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
👩‍💻 Star trails

Сцена с анимированным следом за курсором в виде звезд. Сделана на Pug, SCSS и JavaScript.

#codepen


Original post link: t.me/frontendnoteschannel/3583
Forwarded and filtered by @smartfeed_bot
И снова о useCallback

Во время собеседования, когда меня спросили про хук useCallback, я ответил, что его использование имеет смысл только тогда, когда функция передаётся из родителя в дочерний компонент, а сам дочерний компонент обёрнут в memo. В таком случае ссылка на функцию из пропсов, обёрнутую в useCallback, останется неизменной, если родитель был перерисован, и мы избежим лишней перерисовки дочернего компонента. Собственно, данный вопрос даже на Хабре разбирался неоднократно, в том числе с залезанием в исходники (например, вот). Здесь следует понимать, что даже если мы всё сделали так, как написано выше, но дочерний компонент принимает прочие аргументы (помимо мемоизированной функции), и эти прочие аргументы изменились - всё, ваш useCallback из родителя официально бесполезен. Уже на таком этапе. И вроде бы двое собеседующих со мной согласились, но следом прозвучал вопрос "а вы использовали useCallback в проектах?", что говорит о том, что моя трактовка посчиталась ошибочной. Как оказалось, с пониманием использования этого хука проблемы куда глубже.

В этой статье автор провел тесты и доказал, что useCallback не даёт никакого увеличения производительности, если обёрнутая в него функция не передаётся вниз дочерним компонентам, следовательно он может считаться излишним.

👉 @seniorFront
Атрибут novalidate

Атрибут отключает нативную валидацию формы со стороны браузера.

...

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

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

Атрибут novalidate говорит браузеру не проверять поля и не препятствовать отправке формы, так как иногда подобное поведение бывает нежелательным. К примеру, форма проверяется при помощи JavaScript, и нужно избежать конфликтов с браузерной валидацией. В том числе, и убрать всплывающие подсказки, чтобы показать вместо них свои, кастомные.

👉 @seniorFront


Original post link: t.me/seniorFront/4092
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
SVG & GSAP Morphing

Рейтинг, созданный из svg-картинки, анимируемой библиотекой GSAP.

https://codepen.io/ksenia-k/pen/JjjyBoL


Original post link: t.me/senior_front/2012
Forwarded and filtered by @smartfeed_bot
🐙 Phoenix-MD – бот для WhatsApp с расширенной функциональностью. Он позволяет находить аудио и изображения, управлять чатами и многое другое.

Сайтодел | #репозиторий #github


Original post link: t.me/sitodel/1776
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Neuomorphic Checkboxes

Подборка оригинальных чекбоксов с иконками font-awesome.

👉 @seniorFront


Original post link: t.me/seniorFront/4094
Forwarded and filtered by @smartfeed_bot
👩‍💻 Поросячья латынь

Поросячья латынь, также свинский латинский — «тайный язык», представляющий собой зашифрованный английский. Чаще всего используется в шутливом или полушутливом контексте.

Напишите функцию, которая принимает строку и перемещает первую букву каждого слова в конец, а затем добавляет «ay» в конец слова.

Пример кода:

pigIt('Pig latin is cool') - вернёт 'igPay atinlay siay oolcay'
pigIt('This is my string') - вернёт 'hisTay siay ymay tringsay'


Решение задачи🔽


function pigIt(str) {
return str
.split(' ')
.map(word => word.substr(1) + word.charAt(0) + 'ay')
.join(' ');
}

console.log(pigIt('Pig latin is cool')); // 'igPay atinlay siay oolcay'
console.log(pigIt('This is my string')); // 'hisTay siay ymay tringsay'



Original post link: t.me/frontendnoteschannel/3587
Forwarded and filtered by @smartfeed_bot