FrontEndDev
28.9K subscribers
2.2K photos
23 videos
7.4K links
🚀 Статьи, новости, туториалы по 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
Download Telegram
Что такое Owl Selector (а я думал сова)?

Как и когда удобно применять селектор вида (* + *), а также существующие альтернативы ему.

https://www.youtube.com/watch?v=0O0ssm70g1g
6😁21🔥1
Справочник по операторам JS

Удобный интерактивный справочник по JavaScript-операторам с примерами использования.

https://www.joshwcomeau.com/operator-lookup/
👍10❤‍🔥3🔥211
Новоe CSS-свойство margin-trim

Оно позволяет автоматически обрезать внешние отступы своих дочерних элементов, примыкающих к его краям. Это упрощает создание макетов без необходимости вручную удалять отступы у первого и последнего дочерних элементов. Поддерживается пока только в Safari.

https://webkit.org/blog/16854/margin-trim/
👍33😁11🌚6🔥3😐32
GSAP теперь бесплатная

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

https://gsap.com/blog/3-13/
🔥42❤‍🔥1👍1
WebTUI

Модульная CSS библиотека для оформления веб интерфейсов в стиле терминала.

Демо: https://webtui.ironclad.sh/examples/

https://github.com/webtui/webtui
🔥18👍3🤔2❤‍🔥1
React Router Devtools

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

https://github.com/forge-42/react-router-devtools
63🔥3
Конвертор SVG paths в CSS shape

Интересный инструмент, который использует новую функцию shape() свойства clip-path для создания CSS фигур.

https://css-generators.com/svg-to-css/
👍9🔥21
Тайна процентных высот

Как работают высоты в процентах в CSS? Джош Комо рассказывает, почему процентная высота часто ведет себя не так как мы ожидаем.

https://www.joshwcomeau.com/css/height-enigma/
🔥163👍2
Набор инструментов в помощь веб разработчику

Очередной набор небольших утилит от генератора теней и палитр до конверторов и шпаргалок по технологиям.

https://tiny-helpers.dev/
👍102🔥2
FontsNinja

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

https://fonts.ninja/
👍14🔥1🤔1
Очищаем куки в браузере с помощью закладки

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

https://henry.codes/writing/a-bookmarklet-for-clearing-cookies-for-the-current-page/
👍6💩4🔥3🤯1
Хорошая анимация vs отличная анимация

Мелкие детали, на которые стоит обратить внимание, чтобы улучшить вашу анимацию.

https://emilkowal.ski/ui/good-vs-great-animations
10🔥4🍌2
Применение генераторов

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

https://macarthur.me/posts/generators/
👍622🤔1
Форматирование console.log

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

https://developer.chrome.com/docs/devtools/console/format-style
16👍5🔥1
JavaScript, when is this?

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

https://piccalil.li/blog/javascript-when-is-this/
👍5🔥1🤔1
🚀 Почему пользователи платят $30 за простой конвертер картинок? Давайте разберемся.

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

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

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

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

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

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

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

Реклама: ИП Зуев Игорь Владимирович, ИНН: 360408359441, Erid: 2VtzqxiBDac
7🔥4❤‍🔥2👎1
Полное руководство по регулярным выражениям в JS

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

https://www.honeybadger.io/blog/javascript-regular-expressions/
👍11🔥32
Среда выполнения JavaScript простым языком

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

https://habr.com/ru/companies/gnivc/articles/910918/
👍9🔥32👎1
10 фич Node.js v24 о которых вы, возможно, не знали

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

https://blog.logrocket.com/node-js-24-features/
👍95🔥4
Простые базовые правила дизайна, которым можно следовать всегда

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

https://anthonyhobday.com/sideprojects/saferules/
19👍4