This media is not supported in your browser
VIEW IN TELEGRAM
Face Grid Track
Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript.
https://codepen.io/ryankbrown/pen/QWQxQeB
Original post link: t.me/senior_front/2008
Forwarded and filtered by @smartfeed_bot
Сетка с отслеживанием положения курсора, выполненная с помощью Pug, SCSS и JavaScript.
https://codepen.io/ryankbrown/pen/QWQxQeB
Original post link: t.me/senior_front/2008
Forwarded and filtered by @smartfeed_bot
This is a daily stats digest!
Today the bot processed: 15 messages
Today you received: 7 messages
Our filtering prevented you from: 8 messages
Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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
Today the bot processed: 15 messages
Today you received: 7 messages
Our filtering prevented you from: 8 messages
Top 3 source channels:
Сайтодел | GitHub, Верстка, Сайты, FullStack: 4 message(s)
Senior Frontend - javascript, html, css: 4 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
This media is not supported in your browser
VIEW IN TELEGRAM
Тот самый гаджет, который помогает протянуть до пятницы
👉 @seniorFront
Original post link: t.me/seniorFront/4081
Forwarded and filtered by @smartfeed_bot
👉 @seniorFront
Original post link: t.me/seniorFront/4081
Forwarded and filtered by @smartfeed_bot
This media is not supported in your browser
VIEW IN TELEGRAM
Point and click penguin
Весь экран разделен на клетки, при нажатии на которые задействуются множество анимаций. Создано без использования библиотек, на чистом JS.
https://codepen.io/Ma5a/pen/MWrZPOP
Original post link: t.me/senior_front/2009
Forwarded and filtered by @smartfeed_bot
Весь экран разделен на клетки, при нажатии на которые задействуются множество анимаций. Создано без использования библиотек, на чистом JS.
https://codepen.io/Ma5a/pen/MWrZPOP
Original post link: t.me/senior_front/2009
Forwarded and filtered by @smartfeed_bot
Ну все! Теперь не нужно тратить деньги на топовые курсы и книги по программированию — их выложили в Telegram бесплатно
Все найденные курсы собирают тут — @portalToIT
По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов.
Original post link: t.me/seniorFront/4082
Forwarded and filtered by @smartfeed_bot
Все найденные курсы собирают тут — @portalToIT
По этим курсам выучить любой язык за 7 дней вообще не проблема, находка для начинающих программистов.
Original post link: t.me/seniorFront/4082
Forwarded and filtered by @smartfeed_bot
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
Логика изменения ширины контейнера реализована в 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
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
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
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
Реализовано на 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
Сайтодел | #сниппет #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
Кнопка с эффектом обрезанных углов, реализованная на чистом CSS.
https://codepen.io/bloqhead/pen/ErOjEL
Original post link: t.me/senior_front/2010
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
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
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
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
Пузыри генерируются и анимируются библиотекой 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
Рассеянная подсветка при наведении на элемент, выполненная с помощью 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
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
Telegram
Oleg Litvinov
You can contact @OlegBEZb right away.
Игра «Охота на утку» на CSS
Помните эту легендарную игру на Dendy, где нужно было выстрелить из специального ружья в кинескопный телевизор? Сегодня такую игру может создать практически любой, даже не используя языки программирования.
Автору этой реализации хватило HTML и CSS, обёрнутых препроцессорами: https://tprg.ru/eVuM
#codepen
Original post link: t.me/tproger_web/4574
Forwarded and filtered by @smartfeed_bot
Помните эту легендарную игру на 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
Сайтодел | #сниппет #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
Сцена с анимированным следом за курсором в виде звезд. Сделана на Pug, SCSS и JavaScript.
#codepen
Original post link: t.me/frontendnoteschannel/3583
Forwarded and filtered by @smartfeed_bot
Forwarded from Senior Frontend - javascript, html, css
И снова о useCallback
В этой статье автор провел тесты и доказал, что useCallback не даёт никакого увеличения производительности, если обёрнутая в него функция не передаётся вниз дочерним компонентам, следовательно он может считаться излишним.
👉 @seniorFront
Во время собеседования, когда меня спросили про хук 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
Атрибут отключает нативную валидацию формы со стороны браузера.
...
Каждое поле формы, которое заполняет пользователь, может иметь чётко указанный тип и правила ввода. В момент, когда пользователь отправляет форму, браузер проверяет правильность заполненных данных, блокируя отправку в случае ошибки и показывая подсказку там, где она была допущена.Например, поля с атрибутом required должны быть обязательно заполнены, и браузер укажет, если пользователь вдруг какое-нибудь из них пропустил.
Атрибут novalidate говорит браузеру не проверять поля и не препятствовать отправке формы, так как иногда подобное поведение бывает нежелательным. К примеру, форма проверяется при помощи JavaScript, и нужно избежать конфликтов с браузерной валидацией. В том числе, и убрать всплывающие подсказки, чтобы показать вместо них свои, кастомные.
👉 @seniorFront
Original post link: t.me/seniorFront/4092
Forwarded and filtered by @smartfeed_bot