Frontend Developer

➡️ @byFrontDeveloper

Нужно отправлять письма с вашего сайта или приложения? С помощью этого API вы можете отправлять до 3000 email'ов в месяц бесплатно. Доступно для JavaScript, Python, Java, Go и других языков: → http://maileroo.com Пример кода для отправки email'а на Node.js на фото 🙂 ➡️ @byFrontDeveloper

HTML совет Ты можешь сделать ссылку для скачивания, добавив атрибут download в тег <a> — вместо того чтобы открывать связанный ресурс в браузере. @WebDev_Plus

Прокачайся в веб-разработке с курсами от команды Chrome. Бесплатно, по темам, интерактивно Что внутри: HTML, CSS, JS, доступность, тестирование и ещё куча всего полезного. Можно идти по порядку, а можно сразу нырнуть в то, что интересует больше всего Забираем здесь 🥰 ➡️ @byFrontDeveloper

Одно из самых недооценённых расширений для VS Code Позволяет визуализировать любой JSON-файл в виде красивого интерактивного графа — значительно упрощает разбор сложных структур данных. ➡️ @byFrontDeveloper

Сайты для бесплатных HTML/CSS шаблонов 🔸html5up.net 🔸htmlrev.com 🔸free-css.com 🔸templated.co 🔸freehtml5.co 🔸startbootstrap.com 🔸bootstrapmade.com 🔸bootswatch.com 🔸bootstraptaste.com 🔸cruip.com 🔸styleshout.com 🔸tooplate.com 🔸html5xcss3.com ➡️ @byFrontDeveloper

Вот это круто Рассмотри нестандартный способ управления 3D-сценой одновременно в нескольких окнах браузера. Всё реализовано с помощью библиотеки Three.js и localStorage. Он использует localStorage, чтобы определить новое окно и сохраняет счётчик. Это даёт каждому новому окну (при одинаковом origin) уникальный ID. Дальше взаимодействие между сферами, основанное на определении их позиций внутри окна. Для этого используется window.screenLeft чтобы узнать расстояние от левого края экрана до начала окна, и window.innerWidth чтобы получить ширину окна. Эти значения позволяют рассчитать позиции всех окон. Затем сцена рендерится с помощью Three.js. ➡️ @byFrontDeveloper

Самые типовые лейауты для веба и приложений на CSS — с готовым кодом на Flex и Grid, который можно сразу копировать → http://layout.bradwoods.io ➡️ @byFrontDeveloper

😂😂😂 ➡️ @byFrontDeveloper

Новая синтаксис для адаптивной вёрстки Более понятный и с полной поддержкой во всех браузерах:

/* Новый способ с использованием синтаксиса диапазонов */
@media (width >= 300px) {}
@media (width < 1000px) {}
@media (640px <= width < 768px) {}

/* Классический способ */
@media (min-width: 300px) {}
@media (max-width: 1000px) {}
@media (min-width: 640px) and (max-width: 768px) {}

➡️ @byFrontDeveloper

Опенсорсный интернет-магазин на Next.js: ✓ 100 баллов Web Performance «из коробки» ✓ SEO и мета-данные уже оптимизированы ✓ Современный минималистичный UI ✓ Интеграция с Shopify → http://github.com/vercel/commerce ➡️ @byFrontDeveloper

Очень годное расширение для браузера для веб-разработчиков Позволяет сразу глянуть SEO-мета-теги на любом сайте Не нужно лезть в исходник или открывать кучу тулов ➡️ @byFrontDeveloper

Эта библиотека для React реально стоящая вещь. Позволяет добавлять красивые анимации частиц > конфетти, фейерверки, вспышки и другие эффекты всего через один хук. Источник библиотеки: ccылка ➡️ @byFrontDeveloper

Клавиатурные кнопки с CSS и слоями <img>

.key { mask: url(keycap.png); }
.key:active img { translate: 0 20%; }

Используются изображения клавиш как маска для контейнера, внутри которого они смещаются (translate) при нажатии. Дополнительно: можно применить clip-path для ограничения зоны клика и filter для стилизации кнопок. ➡️ @byFrontDeveloper

Оператор логического ИЛИ с присваиванием (||=) очень полезная штука в JavaScript Он присваивает значение справа только если значение слева является false Идеально подходит для установки значений по умолчанию в объектах или переменных ❤️ ➡️ @byFrontDeveloper

Наконец-то 😳 В JavaScript появляются новые методы для работы с множествами (Set) по аналогии с операциями теории множеств (пересечение, объединение, разность и т.д.). Эти методы входят в спецификацию ECMAScript 2025 и уже поддерживаются в 87% браузеров. То есть теперь ты сможешь делать вещи вроде:

const a = new Set([1, 2, 3])
const b = new Set([2, 3, 4])

Set.intersection(a, b) // → Set { 2, 3 }
Set.union(a, b)        // → Set { 1, 2, 3, 4 }
Set.difference(a, b)   // → Set { 1 }

Никаких ручных хаков или Array.from + filter. Всё красиво и нативно ➡️ @byFrontDeveloper

CSS Box Shadow и Drop Shadow 🔹box-shadow — добавляет тень к прямоугольной рамке элемента (включая фон и границы). 🔹drop-shadow — работает как фильтр, отбрасывает тень по форме самого элемента (полезно для PNG с прозрачностью). box-shadow → тень по коробке drop-shadow → тень по содержимому ➡️ @byFrontDeveloper

CSS‑совет на сегодня Можно изменить цвет текстового курсора в элементах <input> и <textarea>, чтобы он соответствовал цветовой схеме страницы, с помощью свойства caret-color 😮 ➡️ @byFrontDeveloper

Можешь больше не использовать document.cookie Теперь можно читать и записывать куки через CookieStore API. 🔸Основана на Promise 🔸Современный синтаксис 🔸Уже была в Chrome 🔸Только что появилась в Safari и Firefox ➡️ @byFrontDeveloper

Совет по JavaScript для улучшения сообщений об ошибках Используйте свойство cause внутри Error, чтобы прикреплять дополнительный контекст при выбрасывании ошибок — это делает отладку более осмысленной и понятной. Посмотрите видео для быстрой демонстрации ➡️ @byFrontDeveloper