front_end_dev | Technologies

Telegram-канал front_end_dev - FrontEndDev

29748

🚀 Статьи, новости, туториалы по frontend разработке. http://jem-space.ru Admin: @jem_jem Пишу в @five_a_m Хорошие серваки от DigitalOcean: https://m.do.co/c/1351d64475ee Реклама: http://bit.ly/2NxmVDu РКН: https://clck.ru/3GLw7G

Subscribe to a channel

FrontEndDev

GlowIcons 1.0

Более 440 open source svg иконок для ваших интерфейсов.

https://www.glowui.com/icons

Читать полностью…

FrontEndDev

AngularFire — Firebase + Angular

AngularFire — это официальная библиотека, которая обеспечивает удобную интеграцию Firebase с Angular-приложениями, оборачивая веб‑SDK в конструкции, привычные для Angular — с Dependency Injection, RxJS и Zone.js

https://github.com/angular/angularfire

Читать полностью…

FrontEndDev

Добавляем креативности с HTML Dialog

Используем элемент <dialog> вместе с его псевдоэлементом ::backdrop, фильтрами фона и анимациями для создания модальных окон с уникальным дизайном, сохраняя доступность и семантику.

https://css-tricks.com/getting-creative-with-html-dialog/

Читать полностью…

FrontEndDev

Частые ошибки при дизайне веб страниц

Несколько простых советов, которые помогут вам создавать красивые и информативные лендинги.

https://blog-en.tilda.cc/articles-website-design-mistakes

Читать полностью…

FrontEndDev

Прошел вайб-чек от команды Яндекс Вертикалей, кажется, мне пора в отпуск. Какие у вас результаты?

🆖 перейти в бота

Читать полностью…

FrontEndDev

Грядущий Temporal API и проблемы которые он решает

Что не так с Date и как Temporal API поможет решить существующие ограничения для работы с датой и временем в JS.

https://waspdev.com/articles/2025-05-24/temporal-api

Читать полностью…

FrontEndDev

HTML5 элементы о которых вы не знали, что они вам нужны

Очередной кликбейтный заголовок, но все же есть парочка интересных тегов, которые могут быть полезны (например <datalist>, <output>, <time>).

https://dev.to/maxprilutskiy/html5-elements-you-didnt-know-you-need-gan

Читать полностью…

FrontEndDev

Подкаст Веб-стандарты. Выпуск 476

Google I/O, Baseline, доступность, TypeScript на Go, вайб-тестинг, MCP на GraphQL

https://web-standards.ru/podcast/476/

https://web-standards.ru/podcast/476/

Читать полностью…

FrontEndDev

Анимируем сетку с товарами

Красивый и ненавязчивый эффект для приложения с товарами.

Демо | Github

https://tympanus.net/codrops/2025/05/27/animated-product-grid-preview-with-gsap-clip-path/

Читать полностью…

FrontEndDev

Встречаемся 3 июня на Frontend meetup!

Пойдём в московский офис Авито, чтоб послушать спикеров, понетворкать и обсудить, как:

☑️ внедрять Suspense SSR Architecture в проекты на React;
☑️ генерировать реактивные модели из GraphQL-схем;
☑️ интегрировать зависимости (DI) через библиотеку tsyringe.

Кстати, обещают ещё секретный и максимально крутой доклад!

Регистрация тут.

Читать полностью…

FrontEndDev

Defuddle: извлекаем основной контент с веб страниц

Удаляем коменты, сайдбары, хедеры, футеры и прочее при парсинге с Defuddle.

https://github.com/kepano/defuddle

Читать полностью…

FrontEndDev

🔧Хотите научиться создавать собственные, повторно используемые компоненты для веб-приложений?

Откройте для себя мощь веб-компонентов и Shadow DOM!

На открытом уроке вы узнаете:
▸ Как создавать изолированные UI-компоненты с помощью чистого JavaScript,
▸ Как использовать их в любых проектах, независимо от фреймворка,
▸ Сравнение веб-компонентов и React-компонентов — плюсы и минусы каждого подхода.

🔹 Узнайте, как быстро разрабатывать универсальные компоненты для интерфейсов, которые легко интегрируются в любые веб-приложения. Вы получите практические знания по созданию UI-kit с нуля и сможете использовать их в реальных проектах.

🎓Урок пройдет в преддверие старта курса «Fullstack Developer»
📅 Встречаемся 28 мая в 20:00 МСК.

➡️ Регистрация открыта: https://otus.pw/Q0DZ/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

FrontEndDev

10 фич Node.js v24 о которых вы, возможно, не знали

Встроенный тест раннер, поддержка TS, --env флаг для работы с переменными окружения, встроенная SQLite и ещё несколько фишек, упрощающих разработку.

https://blog.logrocket.com/node-js-24-features/

Читать полностью…

FrontEndDev

Полное руководство по регулярным выражениям в JS

Большой гайд по регуляркам: синтаксис, флаги, операторы, классы, группировки, методы работы в JS.

https://www.honeybadger.io/blog/javascript-regular-expressions/

Читать полностью…

FrontEndDev

JavaScript, when is this?

Как работает ключевое слово this в JavaScript и как контекст выполнения и стек вызовов влияют на его значение.

https://piccalil.li/blog/javascript-when-is-this/

Читать полностью…

FrontEndDev

Друзья! Я, как и многие из разработчиков, по вечерам пилю пет-проекты, которые решают мои задачи, а потенциально и задачи некоторого круга людей.

У пет-проектов есть несколько плюсов:
▫️Можно не увольняться с работы в компании
▫️Не так страшно, как запускать бизнес, который может прогореть
▫️Плюс, многие успешные компании начинали свой путь как пет-проект, например тот же Twitter.

Но как разработчику или менеджеру в IT запустить свой пет-проект, чтобы он еще и был успешным?

Михаил Табунов сделал про это телеграм канал Твой пет проект, в котором пишет для разработчиков и менеджеров про свой опыт – где брать идею, что надо знать про маркетинг, как запускать и искать первые 10 клиентов не имея бюджета на рекламу, и многое другое.

Так что подписывайтесь на Твой пет проект и получайте пользу от практиков рынка.

Читать полностью…

FrontEndDev

Анонс Rolldown‑Vite

Использование в Vite нового сборщика на Rust вместо Rollup + esbuild. Ускорение сборки от 3х до 16х и значительное снижение потребления памяти (в некоторых случаях до 100х) по сравнению с традиционными инструментами.

https://voidzero.dev/posts/announcing-rolldown-vite

Читать полностью…

FrontEndDev

Друзья! Нашел классный канал Формошлёп, где собраны сотни хаков для фронтендеров в одном месте

Никакой скучной теории, воды и прочей шляпы, только практические примеры, которые работают.

👉 Подписывайся на @frontbox — стань тем, кто знает, как решить проблему, пока остальные ищут ответ на Stack Overflow.

Читать полностью…

FrontEndDev

Оборачиваем React приложение в Docker

Пошаговый туториал для разработчиков, начинающих работу с Docker.

https://www.docker.com/blog/how-to-dockerize-react-app/

Читать полностью…

FrontEndDev

Когда обычный массив занимает меньше памяти чем Uint8Arrays

Короткое сравнение array vs Uint8Array по памяти для случаев, когда вам важен каждый байт

https://evanhahn.com/v8-array-vs-uint8array-memory-usage/

Читать полностью…

FrontEndDev

Анимируем открытие модального окна

Используем функцию shape для задания параметров движения модального окна при открытии.

https://frontendmasters.com/blog/move-modal-in-on-a-shape/

Читать полностью…

FrontEndDev

⚒️ Как освоить работу с API и научиться интегрировать реальные данные на веб-страницу?

На открытом вебинаре вы разберетесь:
▸Что такое API, как с ним работать;
▸Как получать данные с реальных серверов с помощью JavaScript и fetch();
▸ Мы покажем, как создавать простые приложения с реальными API: погода, курсы валют, случайные цитаты.

❗️ Получите практические навыки работы с API, которые помогут вам быстро создать полезные веб-приложения. Это отличный старт для начинающих разработчиков и верстальщиков, которые хотят выйти на новый уровень.

📅 Урок 3 июня в 20:00 МСК проходит в преддверие старта курса «Fullstack Developer»: https://otus.pw/Xgp2/

Реклама. ООО «Отус онлайн-образование», ОГРН 1177746618576, www.otus.ru

Читать полностью…

FrontEndDev

Алгоритмы JavaScript

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

https://github.com/AllThingsSmitty/javascript-algorithms

Читать полностью…

FrontEndDev

prompt-kit

UI kit c Доступными и кастомизируемыми компонентами для приложений с AI.

https://www.prompt-kit.com/

Читать полностью…

FrontEndDev

10 обновлений с прошедшей Google I/O 2025

CSS карусели, DevTools с AI, Prompt API c возможностью нескольких модальных окон и другие итоги.

https://developer.chrome.com/blog/web-at-io25

Читать полностью…

FrontEndDev

Стилизация alt текста

Интересный подход от Энди Белла по оформлению альтернативного текста для изображения, которое не загрузилось.

https://css-tricks.com/you-can-style-alt-text-like-any-other-text/

Читать полностью…

FrontEndDev

Простые базовые правила дизайна, которым можно следовать всегда

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

https://anthonyhobday.com/sideprojects/saferules/

Читать полностью…

FrontEndDev

Среда выполнения JavaScript простым языком

Движок, Event Loop и очереди задач.

https://habr.com/ru/companies/gnivc/articles/910918/

Читать полностью…

FrontEndDev

🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся.

Кирилл из комьюнити создал простой продукт всего за один месяц, внедрив метод, которой уже принес результат.

Как он это сделал:
1️⃣ Анализ спроса: через поисковые запросы он увидел, что много людей ищут конвертацию «HEIC to JPG».
2️⃣ Фокус на главном: удалил всё лишнее, оставив только функцию конвертации в один клик.
3️⃣ Скорость внедрения: за 30 дней сделал запуск без перфекционизма.

Посты про конвертер (ч.1, ч.2)

Что из этого получилось:
— Доход $500 в месяц с тенденцией роста.
— Более $10K заработано на конвертере.
— $0 на рекламу, всего $40 в месяц на сервер.

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

Результаты из комьюнити билдеров:
— Более 400 запусков по этой методике.
— Некоторые продукты уже набрали от 50К до 100К+ пользователей.

Присоединяйтесь к @its_capitan — следите за процессом разработки, продвижения и узнайте, сколько можно заработать на таких микро-продуктах.

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxiBDac

Читать полностью…

FrontEndDev

Форматирование console.log

Несколько способов сделать вывод логов практичнее и удобнее.

https://developer.chrome.com/docs/devtools/console/format-style

Читать полностью…
Subscribe to a channel