FrontEndDev

Defuddle: извлекаем основной контент с веб страниц Удаляем коменты, сайдбары, хедеры, футеры и прочее при парсинге с Defuddle. https://github.com/kepano/defuddle

Стилизация alt текста Интересный подход от Энди Белла по оформлению альтернативного текста для изображения, которое не загрузилось. https://css-tricks.com/you-can-style-alt-text-like-any-other-text/

🔧Хотите научиться создавать собственные, повторно используемые компоненты для веб-приложений? Откройте для себя мощь веб-компонентов и Shadow DOM! На открытом уроке вы узнаете: ▸ Как создавать изолированные UI-компоненты с помощью чистого JavaScript, ▸ Как использовать их в любых проектах, независимо от фреймворка, ▸ Сравнение веб-компонентов и React-компонентов — плюсы и минусы каждого подхода. 🔹 Узнайте, как быстро разрабатывать универсальные компоненты для интерфейсов, которые легко интегрируются в любые веб-приложения. Вы получите практические знания по созданию UI-kit с нуля и сможете использовать их в реальных проектах. 🎓Урок пройдет в преддверие старта курса «Fullstack Developer» 📅 Встречаемся 28 мая в 20:00 МСК. ➡️ Регистрация открыта: https://otus.pw/Q0DZ/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Простые базовые правила дизайна, которым можно следовать всегда При разработке дизайна приложений есть много тонкостей и нюансов, и человек который не очень умеет в дизайн, может легко запутаться. Энтони Хобдей делится простыми правилами, которым можно следовать, если вам нужно сделать просто и красиво. https://anthonyhobday.com/sideprojects/saferules/

10 фич Node.js v24 о которых вы, возможно, не знали Встроенный тест раннер, поддержка TS, --env флаг для работы с переменными окружения, встроенная SQLite и ещё несколько фишек, упрощающих разработку. https://blog.logrocket.com/node-js-24-features/

Среда выполнения JavaScript простым языком Движок, Event Loop и очереди задач. https://habr.com/ru/companies/gnivc/articles/910918/

Полное руководство по регулярным выражениям в JS Большой гайд по регуляркам: синтаксис, флаги, операторы, классы, группировки, методы работы в JS. https://www.honeybadger.io/blog/javascript-regular-expressions/

🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся. Кирилл из комьюнити создал простой продукт всего за один месяц, внедрив метод, которой уже принес результат. Как он это сделал: 1️⃣ Анализ спроса: через поисковые запросы он увидел, что много людей ищут конвертацию «HEIC to JPG». 2️⃣ Фокус на главном: удалил всё лишнее, оставив только функцию конвертации в один клик. 3️⃣ Скорость внедрения: за 30 дней сделал запуск без перфекционизма. Посты про конвертер (ч.1, ч.2) Что из этого получилось: — Доход $500 в месяц с тенденцией роста. — Более $10K заработано на конвертере. — $0 на рекламу, всего $40 в месяц на сервер. Выводы: — Люди платят за удобство, даже если есть бесплатные аналоги. — Продукт функционирует автоматически с минимальной поддержкой. — Быстрая и экономичная проверка идеи может быть успешной. Результаты из комьюнити билдеров: — Более 400 запусков по этой методике. — Некоторые продукты уже набрали от 50К до 100К+ пользователей. Присоединяйтесь к @its_capitan — следите за процессом разработки, продвижения и узнайте, сколько можно заработать на таких микро-продуктах. Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxiBDac

JavaScript, when is this? Как работает ключевое слово this в JavaScript и как контекст выполнения и стек вызовов влияют на его значение. https://piccalil.li/blog/javascript-when-is-this/

Форматирование console.log Несколько способов сделать вывод логов практичнее и удобнее. https://developer.chrome.com/docs/devtools/console/format-style

Применение генераторов Исследование итераторов, итерируемых объектов и генераторов в JavaScript от Алекса Мак Артура: примеры использования генераторов для создания последовательностей и то, как они могут улучшить эргономику кода. https://macarthur.me/posts/generators/

Хакатон «ВНЕДРЕЙД» от Orion soft собирает 300 сильнейших представителей ИТ-касты, готовых штурмовать инфру Т‑Банка, Авито, Lamoda, CDEK и Magnit Tech. 48 часов кода, драйва и никаких ограничений. После 22:00 карета превращается в тыкву, а внедрейд во внедрейв: темные окна, светлые головы и вечно горячий роутер. Когда? 7-8 июня Где? Москва, «Суперметалл» Приз — экспедиция на Эльбрус для всей команды Присоединяйся к штурму бигтеха: [Подать заявку]

Хорошая анимация vs отличная анимация Мелкие детали, на которые стоит обратить внимание, чтобы улучшить вашу анимацию. https://emilkowal.ski/ui/good-vs-great-animations

Очищаем куки в браузере с помощью закладки Однострочник, который можно добавить в закладки, чтобы быстро очистить куки на текущей странице. Короткая заметка с подробностями того, как это работает. https://henry.codes/writing/a-bookmarklet-for-clearing-cookies-for-the-current-page/

FontsNinja Сайт с огромным набором шрифтов, где можно найти, скачать (бесплатно или платно) понравившийся и сохранить в свою коллекцию. https://fonts.ninja/

Не просто кнопка "Загрузить": Секреты работы с файлами в React 🎓 19 мая в 20:00 — бесплатный вебинар для разработчиков, которые хотят делать удобную и безопасную загрузку файлов в React-приложениях. Что покажем: — Drag & Drop, предпросмотр, валидация — всё, что ждали от UX; — Обработка PDF, Excel и изображений прямо в браузере; — Как не «положить» интерфейс при загрузке тяжёлых файлов; — Защита от XSS, проверка MIME-типов и другие нюансы безопасности. 📌 Для фронтендеров и fullstack-разработчиков, которым важна клиентская оптимизация. В программе — реальные примеры кода, которые можно сразу использовать. Урок пройдет в преддверии старта курса «React.js Developer». Каждый участник вебинара получит скидку на обучение. Регистрация: https://otus.pw/LKaH/ Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576

Набор инструментов в помощь веб разработчику Очередной набор небольших утилит от генератора теней и палитр до конверторов и шпаргалок по технологиям. https://tiny-helpers.dev/

Тайна процентных высот Как работают высоты в процентах в CSS? Джош Комо рассказывает, почему процентная высота часто ведет себя не так как мы ожидаем. https://www.joshwcomeau.com/css/height-enigma/

Конвертор SVG paths в CSS shape Интересный инструмент, который использует новую функцию shape() свойства clip-path для создания CSS фигур. https://css-generators.com/svg-to-css/

React Router Devtools Набор инструментов для отладки приложений на основе React Router v7+. Предоставляет интерфейс с вкладками Active Page, Terminal, Settings, Errors, Network и Routes, а также боковую вкладку Timeline, позволяя эффективно отслеживать информацию о страницах, URL-параметрах, ответах сервера, данных загрузчиков, маршрутах и многом другом. https://github.com/forge-42/react-router-devtools