​​⚡️Система иконок на 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

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

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

The Coupon Code

Создайте функцию, которая проверит, не истек ли купон.
Купон больше не действителен на следующий день после даты истечения срока действия. Все даты будут передаваться как строки в этом формате: "MONTH DATE, YEAR".

checkCoupon("123", "123", "July 9, 2015", "July 9, 2015") === true
checkCoupon("123", "123", "July 9, 2015", "July 2, 2015") === false

👉 @seniorFront


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

​​👤Авторизация и управление доступом на основе ролей для фронтенда

В этой статье я поделюсь с вами моим опытом работы с технологиями Vue 3, Pinia для глобального управления состоянием и TypeScript.

Читать...


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

✍️ Recoleta – шрифт с засечками, вдохновленный эстетикой 1970-х годов. Соединяет в себе мягкие формы и угловатые штрихи. Пример можно посмотреть в сниппете Cards

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


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

Infinite Scroll Multi-Directional Content

Реализовано на React, анимировано библиотекой gsap.

👉 @seniorFront


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

​​🤔Оценка внедрения архитектуры Jamstack в веб-разработке: тематические исследования реальных приложений

Из данной вы можно узнаете о преимуществах и особенностях архитектуры Jamstack в веб-разработке.

Читать...


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

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

Top 3 source channels:
Frontender's notes [ru]: 3 message(s)
Senior Frontend - javascript, html, css: 3 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

🔥 Годнота

Наткнулся на базу с 1400 вопросов с собеседований на Frontend разработчика. Фишка в том что просчитана вероятность с которой вопрос буден задан и есть примеры ответов. Теперь можно легко получить оффер, подготовившись к самым популярным вопросам 😏


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

Как анализировать алгоритмы?

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

- временная сложность — как количество операций, которые выполняются при работе алгоритма, связано с объёмом входных данных;
- сложность по памяти — как количество памяти, которое нужно алгоритму, связано с размером входных данных.
В обоих случаях оцениваем, как связаны используемые алгоритмом ресурсы (время или память) с количеством входных данных. Может показаться, что алгоритм медленнее работает и потребляет больше памяти, когда размер входных данных большой. Это не всегда так. К примеру, скорее всего время работы функции const doNothing = (...asManyDataAsYouLike) => { } не будет зависеть от количества переданных ей аргументов. Оценка сложности этой функции — O(1). Попробуем разобраться, что это значит.

Способы оценки сложности (обозначения)
Есть несколько способов оценки сложности алгоритмов. Их основная идея – получить ограничение для функции, которая связывает размер входных данных и количество операций или размер памяти. Не стоит определять эту функцию точно, нам нужна именно оценка.

O (О-большое)
O, читается как «О», «О-большое» или «биг (big) О», описывает оценку сложности сверху. То есть максимальное количество операций, которое алгоритм может выполнить в худшем случае. В скобках после О указывают функцию, которая ограничивает сложность. Например, O(n) означает, что сложность алгоритма растёт линейно. Это означает, что время выполнения алгоритма увеличивается прямо пропорционально размеру входных данных (к примеру, есть список из 10 элементов, алгоритм займёт определённое время. Но если будет 20 элементов, то алгоритм займёт в два раза больше времени). При этом как именно линейно не важно. Давайте рассмотрим несколько примеров.

Вычислительная сложность этого алгоритма — O(n). Мы обрабатываем каждый элемент один раз. Если в нашем массиве n элементов, мы выполним тело функции reduce n раз.
const sum = (someArray) => someArray.reduce((sum, value) => sum + value, 0)

Вычислительная сложность этого алгоритма тоже будет O(n). Мы обрабатываем каждый элемент два раза. Если в нашем массиве n элементов, то выполним тело функции reduce 2 × n раз. n раз для суммирования и n раз для произведения. Это описывает формула O(k × n) = O(n). В нашем случае коэффициент не имеет значения, так как он не зависит от размера входных данных.
const sumAndProd = (someArray) => {
const sum = (someArray) => someArray.reduce((sum, value) => sum + value, 0)
const prod = (someArray) => someArray.reduce((prod, value) => prod * value, 1)
return sum * prod
}

👉 @seniorFront

​​🤠На стороне своих правил в ESlint

В данной статье рассказывается о значимости договорённостей в разработке, представлены примеры правил для React и Redux, обсуждается автоматизация правил с помощью ESlint и раскрыта архитектура программы в ESlint при создании собственного плагина.

Читать...


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

ChatGPT попросили нарисовать слово «Honda» символами ASCII, но у ChatGPT не получалось...

Когда ИИ восстанет, автора этих сообщений явно помилуют.


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

💾 Ipanema Pattern – паттерн с деталями в форме кругов и эллипсов. Можно использовать его как заставку для шапки сайта или как фоновое изображение.

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


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

Collapsible Timeline

Свёрстано на HTML и CSS. Логика раскрытия элементов меню реализована в JS.

👉 @seniorFront


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

​​😎GET запросы на практике: правила, принципы и примеры

В этой статье я спроектирую контракт по шагам, и на каждом из них я расскажу про общие рекомендации из копилочки “Полезное”, а также про личные правила и практики, полученные долгим опытом работы над постоянно меняющимися ИТ-продуктами, которые помогут для “дальновидного” проектирования GET REST API.

Читать...


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

Color Palette

Палитра с оттенками цветов. Полноценно работает с компьютера. Логика переключения между оттенками написана на JavaScript.

https://codepen.io/onlyveen/pen/rwvKqb


Original post link: t.me/senior_front/1892
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)
Frontender's notes [ru]: 3 message(s)
Senior Frontend Developer | JavaScript, React, HTML & CSS: 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