​​📂Логи в файлах: написал своё приложение для просмотра структурированных логов

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

Читать...


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

Направление текста в CSS

Благодаря свойству writing-mode в CSS есть возможность менять направление написания текста. Это свойство является универсальным и позволяет одновременно задавать значения свойств direction и block-progression.

Свойство writing-mode можно применить ко всем элементам, кроме групп строк таблицы, групп колонок таблицы, строк таблицы, колонок таблицы и контейнеров ruby base, ruby annotation.

Синтаксис

writing-mode: horizontal-tb|vertical-rl|vertical-lr;


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

​JavaScript-разработчик, когда прошло уже больше 10 минут, а новый JS-фреймворк ещё не появился:


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

Метод String.replaceAll (ES12 / ES2021)

String.prototype.replaceAll() заменяет все вхождения строки другим строковым значением.

В настоящее время в JavaScript у строк есть метод replace(). Если входной шаблон для замены является строкой, метод replace() заменяет только первое вхождение. Поэтому в коде второе вхождение «Back» не заменяется.

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

Было:
const str = "Backbencher sits at the Back";
const newStr = str.replace(/Back/g, "Front");
console.log(newStr); // "Frontbencher sits at the Front"

String.prototype.replaceAll() пытается произвести замену всех вхождений, даже если входной шаблон является строкой.

Стало:
const str = "Backbencher sits at the Back";
const newStr = str.replaceAll("Back", "Front");
console.log(newStr); // "Frontbencher sits at the Front"


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

🎨 Цветовая палитра макета "Glass Flowers 3D Assets"

HEX | RGB
#F8A95E | rgb(248,169,94)
#2262A5 | rgb(34,98,165)
#B2173C | rgb(178,23,60)

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

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


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

​​🤔Почему вам необходим React Query

В этой статье вы узнаете о том, как React Query может эффективно устранить множественные выборки данных, включая те, которые возникают из-за StrictMode.

Читать...


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

Curious Geckos

Создано без использования JS, при помощи возможностей препроцессоров Pug и SCSS. А также CSS селектора :has. Подробное описание игры и процесса создания в статье.

👉 @seniorFront


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

Отключение действия, выполняемого по щелчку правой кнопки мыши

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

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

    



Original post link: t.me/senior_front/1948
Forward

ed and filtered by @smartfeed_bot

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

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

Как создать радиальный градиент в CSS?

Для создания фона в виде радиального (кругового, эллиптического) градиента испольуется функция radial-gradient.

Самый простой градиент задаётся двумя цветами.
.element {
background-image: radial-gradient(#6e4aff, #49A16C);
}

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

Цветов мы можем перечислить сколько угодно. Браузер сам распределит градиент таким образом, чтобы последний цвет всегда заходил в угол элемента.

Форма градиента задаётся ключевым словом circle или ellipse (по умолчанию).

Мы можем задавать положение центральной точки, используя те же ключевые слова, что и для background-position, но с приставкой at: at left, at top, at right, at bottom, at center (по умолчанию). Значения можно сочетать, чтобы поместить центр градиента в нужный угол элемента: at top left — центр градиента в верхнем левом углу.

Заливаем релиз на прод в пятницу вечером

👉 @seniorFront


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

​​Вот так вот делай и веб-приложение от нативного не отличишь:


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

​​✈️Путешествие в yarn

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

Читать...


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

Slider with Two Different Sidebars

Слайдер реализован при помощи библиотеки Swiper. А также в JS создана логика проигрывания музыки.

👉 @seniorFront


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

​​🫥Фильтр Блума

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

Читать...


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

Map в JavaScript

Map — это тип коллекции, элементы которого имеют свой ключ. Она немного схожа с Object, однако в качестве ключа можно принять любой тип данных

Методы и свойства:
new Map() – создаёт коллекцию.
map.set(key, value) – записывает по ключу key значение value.
map.get(key) – возвращает значение по ключу или undefined, если ключ key отсутствует.
map.has(key) – возвращает true, если ключ key присутствует в коллекции, иначе false.
map.delete(key) – удаляет элемент по ключу key.
map.clear() – очищает коллекцию от всех элементов.
map.size – возвращает текущее количество элементов.

Отличия от обычного объекта Object:
- Что угодно может быть ключом, в том числе и объекты.
- Есть дополнительные методы, свойство size.

Пример использования:
let map = new Map();
map.set("1", "str1");
map.set(1, "num1");
alert(map.get(1)); // "num1"


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

​​​Мощь декораторов TypeScript на живых примерах: декорирование методов класса

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

В этой статье вы можете изучить несколько примеров из реальных проектов, где применение декораторов сильно упростило код и его понимание:

https://habr.com/ru/articles/707496/

@tproger_web #typescript


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

​​😉RSLike@3. Well-known Symbol, улучшенное использование Typescript, и весим больше

В этой статье автор расскажет о библиотеке Rslike, которая помогает избежать ошибок связанных с null и undefined в JavaScript.

Читать...


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