Masked SVG Loader

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

👉 @seniorFront


Original post link: t.me/seniorFront/3846
Forwarded and filtered by @smartfeed_bot

​Old but gold: 8 CSS-проектов, демонстрирующих мощь теневых эффектов

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

В этой статье собрали 8 проектов, которые демонстрируют разные возможности теней и необычные вариаты применения: https://speckyboy.com/css-snippets-shadow-effects/

#css #codepen


Original post link: t.me/tproger_web/4399
Forwarded and filtered by @smartfeed_bot

​​😵NLUX: Библиотека интерфейса Conversational AI

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

Читать...


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

​​Разработчик React рассказал, как создали фреймворк на самом деле: чинили баг, но проблема оказалась в DNS где-то в Индии.

В 2013 году в Facebook Chat часто появлялся баг: уведомление о сообщении приходило, а самого сообщения не было.Как считали разработчики, это происходило из-за ужасного императивного кода.

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

Как рассказывает один из разработчиков Adam Wolff, немного позже оказалось, что проблема на самом деле была в неправильных настройках DNS где-то в Индии. Эту проблему обнаружили, DNS починили, проблема ушла, а React остался.

Даже страшно становится, когда понимаешь, сколько всего в IT создано благодаря индийцам.

@tproger_web #react #история


Original post link: t.me/tproger_web/4400
Forwarded and filtered by @smartfeed_bot

👉 @seniorFront

Scrubbing, scrolling and splitting

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

https://codepen.io/BlogFire/pen/NWYRqmv


Original post link: t.me/senior_front/1879
Forwarded and filtered by @smartfeed_bot

🎨 Цветовая палитра макета "Travel & Hotel Booking Light Mobile App"

HEX | RGB
#C9D5E5 | rgb(201,213,229)
#18C0C1 | rgb(24,192,193)
#546A82 | rgb(84,106,130)

⚠️ Цвет копируется одним кликом!

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


Original post link: t.me/sitodel/1679
Forwarded and filtered by @smartfeed_bot

​​😵‍💫Пишу форму без использования хуков

В этой статье мы рассмотрим примеры компонентов и их структуру для реализации такого подхода, используя библиотеки effector и reflect.

Читать...


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

This is a daily stats digest!
Today the bot processed: 11 messages
Today you received: 10 messages
Our filtering prevented you from: 1 messages

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

Почему элементы в HTML дочерние, а не сыновьи?

Вот в оригинале все понятно: child и parent. А что у нас пошло не так? Как так получилось, что сыновей обделили в IT?

@tproger_web #обсуждение


Original post link: t.me/tproger_web/4401
Forwarded and filtered by @smartfeed_bot

Reveal Text on Scroll

В этом видео создаётся эффект появления новых элементов на экране при помощи JS.

👉 @seniorFront


Original post link: t.me/seniorFront/3849
Forwarded and filtered by @smartfeed_bot

​​😎Архитектура MVC и поддержка реактивности для jQuery

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

Читать...


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

What's really going on?

Анимация загрузки в перспективе, реализованная на чистом CSS.

https://codepen.io/jh3y/pen/GRxmqEb


Original post link: t.me/senior_front/1880
Forwarded and filtered by @smartfeed_bot

✍️ Proxima Nova Soft – версия геометрического шрифта Proxima Nova, но с более скругленными деталями. Этот шрифт выглядит нейтрально и поэтому подходит для разных стилей. Пример есть тут: Nutanix Loading Screen

Сайтодел | #шрифт


Original post link: t.me/sitodel/1680
Forwarded and filtered by @smartfeed_bot

Exploring UI

Анимировано библиотекой GSAP. Логика переключения слайдов реализована в JS.

👉 @seniorFront


Original post link: t.me/seniorFront/3851
Forwarded and filtered by @smartfeed_bot

Rotating border

Граница сделана из псевдоэлементов, которые анимируются в CSS.

https://codepen.io/Chokcoco/pen/dypaobm


Original post link: t.me/senior_front/1882
Forwarded and filtered by @smartfeed_bot

​​⚡️Динамические Breadcrumbs на React, React Router и Apollo GraphQL

В этой статье вы узнаете о том, как реализовать динамические Breadcrumbs в React приложении с использованием React Router, Apollo GraphQL и TanStack Query.

Читать...


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

This is a daily stats digest!
Today the bot processed: 10 messages
Today you received: 8 messages
Our filtering prevented you from: 2 messages

Top 3 source channels:
Senior Frontend - javascript, html, css: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 3 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

Character with longest consecutive repetition

Для заданной строки s найти символ c (или C) с самым длинным последовательным повторением и вернуть: [c, l]
где l (или L) - длина повтора. Если есть два или более символов с одинаковым l, возвращается первый в порядке появления.

Для пустой строки возвращается:["", 0]

Примеры:
longestRepetition("aaaabb") => ["a",4]
longestRepetition("bbbaaabaaaa") => ["a",4]
longestRepetition("cbdeuuu900") => ["u",3]

👉 @seniorFront


Original post link: t.me/seniorFront/3852
Forwarded and filtered by @smartfeed_bot

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

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


Original post link: t.me/sitodel/1681
Forwarded and filtered by @smartfeed_bot