​​💫Как сделать из императивного компонента — декларативный React-компонент

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

Читать...


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

💾 Easy Sliding Menu – сайт-портфолио с анимированными диагональное меню для слайдера. Переключать слайды можно только через него, поэтому можно не беспокоиться, что не тот элемент включится случайно.

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


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

​Этот опасный рефакторинг (Как снизить риски?)

Ошибки во время рефакторинга могут дорого обойтись. Модернизация, ведущая к отказу системы, или внесение новой функциональности параллельно с ошибочными правками явно принесут вред. Но степень вреда может быть разной.

Некоторые задачи рефакторинга подразумевают крупные изменения и затрагивают несколько подсистем. Другие при этом ограничиваются одним компонентом, но могут непредвиденно повлиять на другие части системы и вызвать поломку важнейших бизнес-операций. В этом случае речь может идти о действующем потоке приобретения товара. Третья категория – это доработки, позволяющие внести новые возможности – например, изменение потока приобретения одного товара для поддержки большего числа его единиц и добавление ещё одного потока после.
Объединяет все эти сценарии то, что они сопряжены с высоким риском.
1. В случае ошибки такие доработки навредят бизнесу (потеря прибыли, недовольство клиентов), команде (подорвут доверие, мотивацию) или другим связанным функциям (разработка встанет).
2. Причём реализация этих изменений весьма затратна, так как требует повышенного внимания, усилий и времени. Предпочтительнее для таких задач задействовать опытных разработчиков, хорошо разбирающихся в этой области.

Как снизить риски
Рекомендую использовать чек-лист:
- Определите ограничения. Как далеко можно зайти?
- Изолируйте доработки от функциональности. Не применяйте их вместе.
- Напишите обширные тесты, более высокоуровневые (интеграционные) с меньшим числом деталей реализации, и сопровождайте ими внесение изменений.
- Проверьте всё наглядно. Запустите браузер.
- Не пропускайте тесты. Не ленитесь.
- Не полагайтесь слишком сильно на код-ревью и контроль качества (QA). Люди ошибаются.
- Не смешивайте масштабные зачистки с другими изменениями. Это можно делать в случае небольших доработок.

👉 @seniorFront

​Как защитить PROD от багов и себя от стресса

Эта статья - взгляд QA на проблему возникновения багов на ПРОДе. Он выделил пять основных рисков:

1. Идея попадает к аналитику
Владелец продукта и аналитик на этапе проектирования тех. требований могут некорректно описать логику нового функционала (флоу). Заказчик имел ввиду одно, а по итогу в спецификациях совершенно другое. Решение данной проблемы может зависеть от правил взаимодействия с заказчиком в вашей команде.

Необходимо ли заказчику описывать предложения в письменном виде с точным описанием? Ответственность данного риска лежит на плечах владельца продукта и он в свою очередь может сделать общение с заказчиком более прозрачным для команды.

2. Разработка по тех. требованиям
Frontend и Backend разработчики берут задачи из бэклога в спринт, но в задаче может быть прикреплена устаревшая документация, ее может и вовсе не быть.
Пиши то - не зная что, реализуй так - не зная как.

Часто встречается и такая модель разработки - когда ответственность падает только на разработчика, минуя владельца продукта и аналитику. Это грустно и в таком случае помогут DOR и DOD.
Definition of Ready - это критерии готовности взять задачу в разработку, то есть DOR это условия, при выполнении которых задача может упасть в спринт. Команда сама выбирает критерии и придерживается их. Например: аналитика написана, есть точные тех.требования и т.д.
Definition of Done - это критерии завершения задачи, то есть условия после которых выполненная задача переходит в тестирование к QA.

3. Frontend и Backend выполняют задачи не синхронно
Под синхронным выполнением задачи я подразумеваю, что задачи на фронте и на бэке будут выполняться как минимум в одном спринте. Почему это критично? Тех.требования имеют свойства корректироваться на этапе разработки и если один разработчик взял задачу в одном спринте и подкорректировал реализацию на своей стороне, то второй разработчик может выполнить задачу по устаревшим требованиям.

4. Тестирование
Само тестирование может быть некачественным из-за человеческого фактора. Пропустил ошибку т.к. не написал тест-кейс по этой функциональности или не проверил негативные тесты. Недостаточно времени было на тестирование. Не было документации вовсе.
Данный риск зависит от самого инженера по тестированию, но описанные выше риски могу напрямую влиять на качество тестирования и ответственность ложится уже на вас.
Защитить себя и ваше время помогут вышеупомянутые DOR и DOD.

5. Релиз (Поддержка)
Данный риск зависит от четвертого, т.к. вы можете обнаружить ошибку только при регресс тестировании, а это значит мало времени уделено тестированию. В этот риск я бы добавил момент, когда вы выкатились на прод, но заказчику не нравится что-либо.

👉 @seniorFront

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

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

Читать...


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