💾 5 Card Carousel – галерея карточек с иконками и текстом. Перелистывать можно нажатием на карточку или на кнопки со стрелками.

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


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

Sticky Sections

Плавность прокрутки реализована при помощи библиотеки Lenis. Анимировано библиотекой gsap.

👉 @seniorFront


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

​​​Что лучше: Map или Object?

Объекты в JavaScript способны на всё. Нет, серьёзно, это просто всемогущая сущность с точки зрения языка. Но даже если объект может всё, это не значит, что его нужно использовать повсеместно.

Например, если вы собираетесь хранить пары ключ-значения, то для этого лучше использовать map и вот почему: https://www.builder.io/blog/maps

@tproger_web #javascript


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

​​😵Рефакторинг прайс-листа без духоты

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

Читать...


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

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

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

​​Тогда Ди Каприо скорее


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

Icon Hover Effect Using

Иконки с оригинальным эффектом при наведении, созданные на HTML и CSS.

👉 @seniorFront


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

​​😍Frontend в условиях полной редактируемости

В этой статье мы расскажем подробно про систему поблочной сборки и подводные “камни” реализации подобной системы под «1С-Битрикс» для frontend-разработчиков.

Читать...


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

🎨 Цветовая палитра макета "Parallax Effect"

HEX | RGB
#F1CBCB | rgb(241,203,203)
#F27A85 | rgb(242,122,133)
#7D909C | rgb(125,144,156)

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

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


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

​​Азбука SQL: подборка полезных статей по SQL

1. Создаем базу данных и первую таблицу: https://proglib.io/p/azbuka-sql-v-primerah-chast-1-sozdaem-bazu-dannyh-i-pervuyu-tablicu-2023-11-17

2. Ограничения, которые упрощают жизнь: https://proglib.io/p/azbuka-sql-v-primerah-chast-2-ogranicheniya-kotorye-uproshchayut-zhizn-2023-11-21

3. Обрабатываем результаты и делаем сложные запросы: https://proglib.io/p/azbuka-sql-v-primerah-chast-3-obrabatyvaem-rezultaty-i-delaem-slozhnye-zaprosy-2024-01-19

@tproger_web #sql #бд


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

​​⭐️Немного об интеграции Cube в SegmentStream

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

Читать...


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

Отблеск, перспектива и поворот - причудливые CSS 3D эффекты для изображений

Эта статья представляет собой сборник необычных 3D-эффектов для изображений. Мы расскажем, как добавить изображениям перспективу, глубину, поворот и даже гладкий блеск при помощи CSS. И все это вы сможете использовать в своем следующем проекте.

https://msiter.ru/articles/otblesk-perspektiva-i-povorot-prichudlivye-css-3d-effekty-dlya-izobrazheniy


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

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

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

Creative Text Hover Effect

В этом видео автор стилизует простой текст. Изначально всем буквам кроме первой задано отрицательное значение CSS letter-spacing, из-за чего буквы скрываются.

👉 @seniorFront


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

​​Обзор types-spring — библиотеки-надстройки над TypeScript, улучшающей безопасность и удобство использования встроенных типов

К сожалению, TypeScript не идеален: несмотря на всю его продуманность, он имеет много проблем и недоработок, которые обсуждаются в сообществе годами, но так и остаются нерешенными.

Types-spring ставит перед собой цель нивелировать как можно больше таких недоработок. Это своего рода патч над TypeScript, который расширяет встроенные типы, делая их более точными и полезными для разработчика.

В статье рассказали, что за библиотека и как её использовать: https://tproger.ru/articles/obzor-biblioteki-types-spring

@tproger_web #typescript #инструменты


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

​​⚡️Система иконок на React

В этой статье вы узнаете о том, как можно создать систему иконок на React, используя пакет SVGR для преобразования svg-иконок в React-компоненты.

Читать...


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

💾 SVG Debit Card Animation – анимированный фон для банковской карты. Этот эффект подойдет для страниц, где нужно вводить данные для оплаты товаров.

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


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

animated text

Буквы создаются в JS и анимируются в CSS.

👉 @seniorFront


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

​​🧐Анатомия StyleX

В этой статье мы разберемся, как stylex работает. Но давайте начнем с примера ее использования.

Читать...


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

#вопросы_с_собеседований
Нарисовать стилями полукруг.

Ответ:
height: 100px;
width: 100px;
border-right: 1px solid #f00;
border-radius: 0 50% 50% 0;


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