14544
Блог Lead JS-разработчика из Хельсинки Автор: @bekharsky По рекламе: https://telega.in/channels/htmlshit/card?r=GLOiHluU или https://t.me/it_adv Чат: https://t.me/htmlshitchat
#такое дня
Итак, куда же переносить ваши драгоценные заметки из богоподобного Notion? Если вы следите за новостями, конечно.
Очевидный душный ответ: «Не надо было начинать пользоваться облачным сервисом вне зависимости от».
Но если вас всё же угораздило, давайте подумаем, что же делать.
Ответ, на самом деле, простой: всё есть текст. А некоторые виды текста нынче являются индустриальным стандартом.
Чуете, куда я веду? Конечно же к Markdown. И Git.
Markdown легко читать, легко писать, легко переносить. Легко вести учёт ревизий, ну просто потому что это всего лишь текст. И любая платформа совместной разработки давно его поддерживает, не GitHub-ом единым, что решает проблему синхронизации и переноса.
Но сырой маркдаун всё же ещё недостаточен, чтобы назваться заменой полновесного сервиса заметок. И тут на сцену выхожит Obsidian.
Им пользуются буквально все, от разработчиков до писателей и стендаперов. Бесплатное приложение для всех платформ, включая мобильные. Если нужна синхронизация — приобретается отдельно, но можно и просто через Git, файлы же у вас.
Про стендаперов не шутка, вон Денис Чужой вовсю его использует.
Огромное сообщество, поддержка плагинов, поддержка вики-стиля (если вы понимаете, о чём я), какое-то невероятное число хаков и секретов.
Да, Obsidian не открытый, но при этом максимально дружелюбный. А тот факт, что всё хранится в простых стандартизированных файлах — мощно накидывает ему плюсов в карму.
Пользуемся, котаны.
#notion #note #obsidian #tool
Анализ спринта, собесы, дейлики с командой и помощь со сложными архитектурными решениями — типичные будни лида в Авито. Твоя работа может быть такой же — стань руководителем команды разработки за выходные на Avito TeamLead Марафоне!
Тебя ждёт:
— работа над продуктом, которым пользуются больше 50 миллионов людей в месяц;
— сложные технические решения и мощная кросс-функциональная команда;
— конкурентная зарплата и дополнительные дни отпуска.
Управляешь командой больше года, а твой опыт в разработке 5+ лет? Любишь не только вести проекты, но все еще писать код?
Регистрируйся на марафон и стань лидом в Авито уже 9 сентября!
P.S. Если ты пока не готов менять работу, проверь свои силы на технических секциях или набирайся опыта через мок-собесы от Авито. Подробности на сайте.
#такое дня
Интересно, а выдача буквального denylisted-сообщения — это баг Твиттера, или фича?
#codepen дня
Признавайтесь, кто в TikTok часы проводит за скроллингом ленты?
Но я вообще не за тем пришёл. Меня их прелоадер заинтересовал. Яркий пример режима смешивания цветов со слоями ниже, mix-blend-mode: multiply.
Без него анимация была бы совсем простой: https://codepen.io/frontendcorn/pen/poWZObX
Кстати, прекрасная статья есть с примерами: https://web.dev/learn/css/blend-modes/
А тут разобрана вся их математика: https://www.w3.org/TR/compositing-1/
А тут вся математика разобрана еще более подробно: https://css-tricks.com/taming-blend-modes-difference-and-exclusion/
И перевод от Ильи Стрельцына: https://css-live.ru/tricks/ukroshhaem-rezhimy-nalozheniya-difference-i-exclusion.html
А самое забавное, что с видео это тоже работает: https://codepen.io/jcoulterdesign/pen/QagxgJ
#css #mixblendmode #бородач
⚡️ Бесплатное обучение HTML/CSS, JavaScript, React.js с нуля с поддержкой от наставника
На канале Интенсивный JavaScript действующий тимлид уровня мидл+ помогает изучить фронтенд на практических задачах, которые интересно кодить
С 26 по 30 августа он проводит бесплатное обучение, где на практике поможет разобраться в HTML/CSS, JavaScript и — React.js
Что вы сделаете на обучении
— Сверстаете макет под присмотром тимлида
— Затем добавите JavaScript (и это не пара скриптов для модального окна)
— И перепишете проект на React.js
🔖Ещё этот парень регулярно набирает новичков в свою команду и знает, как трудоустроиться и джуну, и разрабу поопытнее
Помимо работы с кодом на обучении он расскажет, где новичку взять опыт работы, что ни в коем случае нельзя говорить на собеседовании, почему 90% новичков никогда не получат даже отклика на своё резюме
В общем — даст пошаговый подробный план «Что учить во фронтенде и как найти работу джуну в 2024 году» . По этому плану его ученики устраиваются на работу
Обучение подойдёт, даже если у вас нет опыта в программировании — всё объясняют так, чтобы поняла даже ваша бабуля
Подписывайтесь, осталось 30 мест
Учиться самостоятельно можно бесконечно, если не знать, куда копать. На интенсиве сократите время на поиск информации и получите пошаговый план от разработчика, который нанимает новичков в команду
👉Участвовать бесплатно
Первый урок из обучения уже доступен
#инструмент дня
Вот как ты, котан, ищешь недавний баг в проекте?
Выкатываешься куда-нибудь, тестируешь, откатываешь последний коммит, да?
А что если баг оказался хитрее, обошел тесты и уже сидит на проде, ножками качает?
Тут в дело вступает встроенный в git инструмент бинарного поиска: git bisect. Принцип прост: помечаем заведомо плохой коммит или тег (последний) и заведомо хороший (ну, за сутки до бага):$ git bisect startПосле чего
$ git bisect bad # Current is bad
$ git bisect good v2.6.13-rc2 bisect выберет средний коммит из этих двух. Теперь нужно собрать проект и протестировать.
Если эта версия работает хорошо, сообщаем bisect об этом: git bisect good. Ну или bad, если нет. И продолжаем; снова случится checkout коммита посередине.
Можно искать не только баги, но и любое изменение в коде. Так что вместо меток good и bad есть ещё old и new.
Не так давно я не знал об этом инструменте и буквально повторил тот же алгоритм поиска сам. Ну, бывает.
#git #bisect #бородач
#инструмент дня
Недавно мы вспомнили о крутой фишке мобильных браузеров: атрибуте enterkeyhint для текстовых полей, позволяющем уточнить поведение клавиши Enter на экранной клавиатуре: /channel/htmlshit/2516
Пришло время узнать, какие же еще атрибуты стоит использовать и зачем.
А чтобы не раздувать это на миллион постов (я всё равно так сделаю, но попозже), предлагаю взглянуть на интересный инструмент, позволяющий поиграться всеми возможными атрибутами полей форм на мобильных браузерах разом: https://better-mobile-inputs.netlify.app/
Например, вы знали, что есть атрибут для автоматической вставки одноразового кода, присылаемого по SMS?
Вот он там самый первый пример. Со скриншотами того, как выглядит клавиатура на iOS и Android.
Естественно, присутствуют ссылки на документацию, рассмотрены разные комбинации атрибутов. Особенно порадовал полный список автодополнения. Оно, конечно, редко когда правильно работает (зависит от усилий разработчиков), но уж если работает — то это приятно.
#input #attribute #mobile #tool #бородач
Лето выдалось по-настоящему жаркое: закончилась одна акция, а уже поспела новая — с увеличенным призовым фондом 🤗
👉 Вкратце: оформляйте страхование ипотеки в этих компаниях до 31 августа, и вы получите шанс на один из четырех призов по 300 000 ₽ и 75 призов по 4000 ₽
💰 А еще вы получите кэшбэк до 50% за покупку полиса ипотечного страхования в любой СК
Подробности описали на странице акции ➡️
#видео дня
Все знают, что можно бесконечно наблюдать три вещи. И одна из них — как работает другой человек.
Все слышали: "В Blink добавили то-то, в WebKit добавили то-то, Firefox депрекейтнул то-то". О тяжёлой судьбе селектора :has слышали вообще чуть менее чем все.
Так как же происходит процесс этого самого добавления чего-либо? Кто и как пишет код в современных движках браузеров?
Какой тулинг используется, как выглядит код, как выглядят структуры данных, как проходят тесты? Вот было бы хорошо, если кто-нибудь провёл бы мастер-класс...
Ни слова больше! Кейт Сиркел как раз недавно этим занимался и выкатил видео про добавление селектора :has-slotted() в WebKit!
Вот: https://www.youtube.com/watch?v=vNuvEqs_TH4
А вдруг кто-то вдохновится и тоже станет контрибутором в какой-либо из движков? :)
#webkit #cpp #develop
Если кому интересно, я добрался до компа и анимировал пример с dialog[open] через keyframes.
Пруф: https://codepen.io/alinaki/pen/OJevjMY
У этого примера явно поддержка лучше, так что забывать не стоит.
Попрошу-ка я Уну Кравец что-нибудь написать по этому поводу 🙂
🌟 Развивайся во фронтенде вместе с FrontEndDev!
FrontEndDev — это идеальное место для тех, кто хочет углубить свои знания и навыки. Админы регулярно публикуют лучшие статьи, полезные репозитории и гайды, которые помогут тебе разобраться с новыми фреймворками и инструментами.
Присоединяйся и будь в курсе всех трендов и новинок! С FrontEndDev ты станешь настоящим профессионалом фронтенда! 💻
FrontEndDev 🚀
#статья дня
Итак, мне нужен был почти недельный перерыв, но я снова в строю и готов делиться шикарным.
И возвращаюсь я к вам с отличной статьёй о современной анимации SVG в CSS.
Встречайте: https://courses.nan.fyi/blog/svg/animating-figma-exports
Как это делать быстро, просто и учитывая современные тенденции в дизайне и разработке. Естественно, в статье упор на экспорт из Figma :)
И не просто экспорт, а адаптация под конкретные нужды! Кратко объясняется, как разделять контуры и как в принципе мыслить в рамках анимациеи, а не просто чёрточками на экране. На что влияют разные параметры экспорта и так далее.
Давно я с таким удовольствием не читал подобное.
#svg #css #animation
Бесплатный практический вебинар: Профессия «Frontend-разработчик».
⏰ Когда: 20 августа в 19:00 по мск.
Погрузитесь в решение реальной задачи и напишите мини-игру, которая работает прямо в браузере.
Расскажем, что ждут работодатели от джунов, какие есть грейды во фронтенд-разработке и на какую зарплату рассчитывать в перспективе. Какие JS фреймворки учить: Vue, React, а может, Angular?
Задайте вопросы опытному спикеру, сделайте первый шаг в направлении новой профессии.
🎁 Всем, кто зарегистрировался - Гайд «Как заговорить на сленге IT-специалистов», а каждому участнику - Карта компетенций начинающего Frontend-разработчика.
Много практики - мало воды!
На бесплатном интенсиве по frontend-разработке вы с нуля под руководством опытного наставника создадите свой проект и сможете пополнить портфолио.
В рамках интенсива мы:
— Сверстаем сайт на Html
— Напишем стили к сайту на Css
— Реализуем некоторые функции на JavaScript
И многое другое, о чем подробно рассказываем на сайте.
Этот проект предоставит вам возможность погрузиться в разнообразные технологии веб-разработки и усовершенствовать навыки работы с HTML, CSS, а также научит вас создавать посадочные страницы с нуля.
Занимайте место прямо сейчас: https://tglink.io/47b9e9072617
#статья дня
Smashing Magazine — один из старейших онлайн-журналов по веб-разработке. Статьи там как правило подбираются весьма подробные и полные, объясняющие все аспекты даже, казалось бы, простых эффектов.
Сегодня в наш канал залетает как раз такая статья: 3D-эффекты для картинок. Блеск, параллакс и поворот.
Весьма впечатляющий разбор, включающий в себя даже немного геометрических расчётов, чтоб вы понимали, откуда ноги растут.
Сразу ссылки на кодпены с примерами, чтоб далеко не ходить:
1. https://codepen.io/t_afif/pen/VwEJqKV
2. https://codepen.io/t_afif/pen/qBJyXNy
3. https://codepen.io/t_afif/pen/yLRRBKj
Ну и, конечно, сама статья: https://www.smashingmagazine.com/2023/07/shines-perspective-rotations-css-3d-effects-images/
Будет полезно не только лишь всем.
#css #3d #image #бородач
#инструмент дня
Итак, задались вы целью сделать, например, генератор кастомных фигур и тем оформления для Google Slides. Вот чтобы бац-бац, скопировал — вставил и все довольны. Но возникает закономерный вопрос.
А что копировать-то? Какой формат данных внутри Google Slides?
И на этот вопрос нам ответит Clipboard Inspector: https://evercoder.github.io/clipboard-inspector/
Забавно смотреть, как разные программы рулят буфером обмена. Да и если самому реализовать придётся — очень полезно.
#tool #clipboard
#cтатья дня
Возможность заменить кучу элементов интерфейса на промо-сайтах и обучающих ресурсах на видео с прозрачностью будоражит умы людей уже несколько лет.
А именно, с момента появления поддержки альфа-канала (читай, прозрачности) во всех современных видеокодеках.
Ну прекрасно же: дайте моушен-дизайнеру выполнить свою работу и просто вставьте результат в проект. Это во много раз лучше чередующихся картинок или реализации эффектов через холст.
Да, интерактивность будет минимальная, но всем и всегда ли она нужна?
В любом случае, ситуация с поддержкой до сих пор остаётся не лучшей. AVIF, будучи самым продвинутым видеокодеком, не поддеживается в Safari. Комбинация из VP9 и HEVC — вроде неплохо, но сильно больше весит и лагает на Android и в Firefox.
И тут на сцену выходит WebGL! Вот, например, стрим Юрия Артюха о добавлении альфа-канала в любое видео: /channel/htmlshit/2538
А вот статья Джейка Арчибальда обо всех вышеописанных проблемах с некоторыми методиками решения и FFMPEG-командами для генерации видео и текстур: https://jakearchibald.com/2024/video-with-transparency/
Выводы, впрочем, те же самые: используйте WebGL. Для чего Джейк выпустил NPM-пакет stacked-alpha-video.
Почему stacked? Потому что он предлагает сохранять текстуру альфа-канала прямо в самом видео. Получается лучше, чем кажется!
В общем, будущее тут, хотя и такое себе пока.
P. S. в некоторых случаях можно использовать и SVG-маски, об этом потом.
#video #transparency #tool
👨💻 Изучай фронтенд по мини-гайдам!
Канал WebTaverna ежедневно публикуют полезные обучающие мини-гайды в картинках, а также различные полезные шпаргалки и советы по HTML, CSS и JavaScript
➡️ Подписывайся на WebTaverna 😮
#статья дня
С чего начать построение своего веб-секвенсора?
Конечно же с изучения Web Audio и Web Midi API!
Статья Мэдса Стоуманна рассказывает не только о том, как сверстать свою MIDI-клавиатуру и потыкать в неё мышкой, чтобы послушать звуки, но и как подключить настоящую MIDI-клавиатуру и даже подсветить аккорды: https://blog.logrocket.com/exploring-web-audio-api-web-midi-api/
Демо: https://codepen.io/stoumann/pen/ZEjjyEp
Есть у кого MIDI-синтезатор, кстати? Делитесь результатом!
#web #audio #grid #music #бородач
#codepen дня
Как всегда, немного настоящего будущего. На днях я сидел и думал, как было бы круто повторить анимацию по скроллу, которую много-много лет назад мы в студии делали для одного рекламного агентства.
Но там всё было просто: перехват события колёсика/тачпада и перенос на горизонтальное движение. Да, мы были настолько ленивы, что даже не стали имитировать скроллбар на первом экране. Всем хватило, все довольны.
Но вот на дворе 2024 год, появились нативные CSS-анимации по скроллу. Да, пока только в Chrome и Firefox за флагом, но, опять же, знай свою аудиторию! Да и полифиллы есть :)
В общем, великолепная Ана Тюдор и её демо с горизонтальной анимацией по вертикальному скроллу: https://codepen.io/thebabydino/pen/WNqJXXa
И секрет тут прост: position: sticky, 100vh и немного магии через animation-timeline, который мы когда-то уже обозревали.
Короче, моё демо теперь тоже не за горами :)
#css #scroll #animation
Канал, где пишут честно про IT
Автор больше 8 лет работает в IT и вырос от junior фронтенд-разработчика до тимлида. На канале Вайтишная вы узнаете как начать карьеру в IT, расти дальше и получать больше!
Интересные посты:
- Накрутка опыта и обман на собесах: подстроиться или остаться аутсайдером
- Почему сейчас такие высокие требования к джунам
- Про личную эффективность и борьбу с прокрастинацией
- Ветераны IT с высоким ЧСВ
- Норм ли работать 2 часа в день?
Подписывайтесь на Вайтишная, чтобы узнать обо всех нюансах работы в IT
#книга дня
Сегодня книгой дня выбрана API от Сергей Константинова. Доступна на двух языках, на русском и английском. И на английском название даже более точно звучит — The API Book. Куда уж однозначней.
Ссылка: https://twirl.github.io/The-API-Book/API.ru.html
Эта книга написана для того, чтобы поделиться опытом и изложить лучшие практики разработки API. Состоит из шести разделов, посвящённых:
• проектированию API,
• паттернам дизайна API,
• поддержанию обратной совместимости,
• HTTP API и архитектурным принципам REST,
• SDK и UI-библиотекам,
• продуктовому управлению API.
Сергей Константинов был главой инжиниринга в Яндекс.Лавка, а с 2020 года — занимается примерно тем же в Bolt, развивая их маркет.
Труд действительно объёмный и охватывает практически все аспекты от проектирования API до взаимодействия с ним.
Важно заметить, что она постоянно дополняется и автор не стесняется спрашивать вопросы у аудитории, что выливается в прекрасные рекомендации.
Кстати, доступна и для Kindle, и для Apple Books, но уже как спонсорский пакет :)
#book #api
#статья дня
Я тут в нашем продукте всё пытаюсь сделать идеальные всплывающие уведомления, aka тосты.
Потому что выскакивают, как хлеб из тостера.
Поначалу они были сугубо императивные, вызвали уведомление вручную, вручную же скрыли все разом или по некому id. Потом я решил объединить уведомления и некоторые виды модальных окон (например, подтверждение или отмену действия).
Параллельно я начал переписывать императивные уведомления на React, потому что на тот момент приложение стало гибридным. Получалось вроде неплохо. Но в какой-то момент...
В какой-то момент я на полную познал, что такое гипотеза Чёрной Королевы (забавно, что в английском языке — Красной Королевы). В простейшем варианте она звучит так: "Нужно бежать, чтобы оставаться на месте". Непомерно много усилий требуется, чтобы лишь чуть-чуть двигаться вперёд.
В мире разработки она же значит, что на один закрытый баг — получаешь пятнадцать новых :)
Да, пришло время признать, что я со своей реализацией уведомлений зашёл в тупик, и надо смотреть в сторону альтернатив.
И тут попадается нечто прекрасное, компонент Sonner: https://emilkowal.ski/ui/building-a-toast-component
И сразу ссылка на репозиторий: https://github.com/emilkowalski/sonner
Статья буквально на острие взаимодействия CSS и JS, объяснены принципы построения анимаций на CSS-переменных и управления ими из React-приложения.
Сами же тосты реализованы на простой шине событий, что весьма надёжно.
В общем, я ещё свой поиск идеальной реализации не завершил, но Sonner — максимально к ней близок.
#react #toasts #notification #animation
Уверены, что в коде вашего сайта нет уязвимостей? 💻
За последние три года в 63% случаев именно веб-приложения оказались исходным вектором атаки хакеров (данные Positive Technologies).
Проверить свой веб-ресурс на наличие уязвимостей можно с помощью бесплатного анализатора PT BlackBox Scanner. Для этого вам нужно только ввести его домен на сайте сервиса. А после регистрации будут доступны все возможности сканера (тоже бесплатно) 🎯
По результатам более 110 видов проверок анализатор выдаст подробный отчет, в котором обнаруженные уязвимости будут распределены по уровню опасности, что позволит составить оптимальный план работы по их устранению и защитить сайт от хакерских атак.
🐈⬛️ Проверить веб-ресурс с помощью PT BlackBox Scanner
#статья дня
Как анимировать появление элемента на странице?
Ну, можно воспользоваться трюком с ключевыми кадрами, но вещь это не самая интуитивная и не сработает при изменении атрибутов, например.
А можно написать т. н. стартовые стили! Буквально @starting-style. А в базовых стилях уже прописать нужное нам положение и переход. Например: /* Before the dialog opens */Таким образом мы получаем анимацию из display: none или при изменении любого атрибута.
@starting-style {
dialog[open] {
translate: 0 100vh;
}
}
/* Dialog is-open state */
dialog[open] {
translate: 0 0;
transition: translate 0.7s ease-out, display 0.7s ease-out allow-discrete;
}
Да, чтобы анимировать display none нужно в описание перехода добавить allow-discrete, поскольку display none не поддерживает плавные переходы, но это детали.
Ссылка на блог разработчиков Chrome: https://web.dev/blog/baseline-entry-animations?hl=en
И очень много примеров есть на MDN: starting-style" rel="nofollow">https://developer.mozilla.org/en-US/docs/Web/CSS/@starting-style
Технически, starting style поддерживается уже во всех браузерах (в Firefox вот только появился, в 129). Тем не менее, переходы и анимации на удаление элемента из DOM пока нать не везде, к сожалению.
В общем, можно потихоньку начинать использовать.
#css #transition
#статья дня
Посмотрите на иллюстрацию. Я не буду говорить: "Ничего интересного не замечаете?", — ну просто потому что в самом коде ничего интересного нет. Секрет кроется в подсветке кода.
И суть в том, что подсветка кода сделана... шрифтом.
Кроме шуток, я когда это увидел, я подумал "ну точно какой-то финн упоролся". Есть у финнов такое направление в дизайне, извращение над шрифтами называется. Вот, например, шрифт, который становится тоньше из-за изменения климата: https://kampanjat.hs.fi/climatefont/
И да!
Автор шрифта — Хейкки Лотвонен. И он буквально выжал всё возможное из фишки COLR (это чуть больше чем лигатуры на стероидах) стандарта шрифтов OpenType: https://blog.glyphdrawing.club/font-with-built-in-syntax-highlighting/
Статья не только рассказывает о возможностях шрифта, но и погружает в понятие COLR: палитра, правила совмещения, лигатуры.
Поддерживаются HTML, CSS и даже JavaScript. Более того, можно перегружать цвета, получая свою собственую тему!
В общем, прекрасная взрывающая мозг статья. И применение самое что ни на есть реальное.
Есть обсуждение на HackerNews, вдруг кому интересно.
И CodePen с демо: https://codepen.io/argyleink/pen/GRbyNNv
Подробное описание технологии COLR от разработчиков Google Chrome: https://developer.chrome.com/blog/colrv1-fonts
В общем, Финляндия это не только озёра и Linux, но и шрифты. Теперь и вы знаете.
#opentype #fonts #colr
#инструмент дня
Очень интересный проект от Кори Хауса: конструктор девтулзов для вашего React-приложения.
React Switchboard: https://github.com/coryhouse/react-switchboard
Эта, буквально, "панель управления" позволяет, используя Mock Service Worker, настроить различные заранее предопределённые сетевые ответы и/или заголовки и указать вашему приложению в какой момент что использовать. Switchboard перехватит и подменит их не отходя от кассы.
Лучше сразу взглянуть на простое демо: https://switchboard-beta.vercel.app/todos
Да, вы можете это делать и сами, конечно же, но как обёртка над вышеупомянутым сервис-воркером — очень годно.
#react #devtools
#статья дня
Недавно мы обсудили ситуацию утечки памяти, с которой не справляется ни один сборщик мусора ни в одном из существующих браузерных движков: /channel/htmlshit/3033
Закономерный вопрос, а как же вообще происходит эта самая сборка мусора и чистка памяти?
На это у нас есть ответ! Статья, конечно, хардкорная: https://blog.frontend-almanac.com/v8-garbage-collection
Но даже с целью общего образования работает очень хорошо. Зайти можно даже с минимальным пониманием принципов работы указателей в любом из системных языков.
Кстати, автора зовут Артем Антипин, у него есть и русскоязычная версия этой же статьи: https://blog.frontend-almanac.ru/v8-garbage-collection
#memory #cpp
#статья дня
Смотрим на иллюстрацию. Узнали? Согласны?
Да не врите, каждый из нас в какой-то момент карьеры создавал мега-компоненты со всеми возможными антипаттернами.
А ещё некоторые антипаттерны когда-то назывались просто паттернами...
В общем, статья, ради которой вам придётся заварить чаю или кофе и потом даже в термос перелить: Алекс Кондов и его статья о недавнем рефакторинге слишком большого React-компонента.
Вот: https://alexkondov.com/refactoring-a-messy-react-component/
1. Покрываем тестами
2. Линтуем
3. Чистим мёртвый код
4. Переделываем хранение состояния
5. Разбиваем условия
6. Применяем принцип единой ответственности
7. Выносим бизнес-логику наружу
8. Переделываем загрузку данных
9. Выносим хуки
10. Отрабатываем граничные состояния, например, отмену загрузки данных
11. Упрощаем отправку формы
12. Валидация
Естественно, без библиотек не обошлось. Чтобы не быть обвинённым в раздувании кодовой базы, автор выделил в отдельный блок обоснование их использования.
В общем, это отличный пример.
#react #refactoring
Frontend теперь в телеграм!
Собрали крупные русскоязычные каналы, где вы найдете всю информацию о последних трендах и лучших практиках:
Логово Верстальщика — научит верстать продающие сайты.
Node.JS — поможет узнать все тонкости и секреты JavaScript и его фреймворков.
Frontender's notes — советы и полезные приемы для каждого разработчика.