WebDev+ | Веб-разработка

CSSBattle набирает популярность среди разработчиков.

Это онлайн-платформа в стиле Code Golfing, где игроки со всего мира соревнуются в умении воспроизвести заданные «таргеты» минимальным количеством кода на CSS.

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

https://cssbattle.dev/

@WebDev_Plus

Разработчик поделился новыми экспериментами с CSS и JavaScript

Как вам? 😳

@WebDev_Plus

Вышел курс по Three.js — библиотеке для 3D-рендеринга прямо в браузере. На практике через пять проектов показывают, как работать с текстурами, подключать GeoJSON-данные и настраивать динамические партиклы.

@WebDev_Plus

Вышла новая библиотека для пользователей Tailwind CSS.

В ней собраны готовые анимации, которые можно применять без написания собственного CSS. Достаточно скопировать нужный фрагмент и вставить его в проект.

Библиотека подойдёт для тех, кто хочет быстро добавить анимацию в интерфейс.

Доступна по ссылке: tailwindcss-animations.vercel.app

@WebDev_Plus

Типы ввода HTML

@WebDev_Plus

Хочешь добавить AI-чатботов в проекты на React? 🤖

Есть опенсорсная библиотека для React, которая позволяет быстро собирать свои чатботы. Её можно подключить к разным LLM, включая OpenAI и другие.

Поддерживает кучу кастомизаций, темы и гибкие настройки.

Где пригодится:

- поддержка пользователей прямо в приложении
- встроенные AI-ассистенты
- эксперименты с интеграцией LLM

Установка: npm install react-chatbotify

react-chatbotify.com

@WebDev_Plus

Совет по CSS

Не нужно готовить отдельные версии логотипа в градациях серого для тёмной и светлой темы.

Это легко делается с помощью CSS-фильтров.

/* Для светлой темы */
.logos-container img {
  filter: brightness(0);
  opacity: 0.6;
}

/* Для тёмной темы */
.logos-container img {
  filter: invert(1) saturate(0) brightness(4);
  opacity: 0.6;
}

То есть, не нужно хранить отдельные изображения для светлого и тёмного режима — фильтры решают эту задачу.

@WebDev_Plus

Это нереально крутая React-библиотека для создания высокопроизводительных 3D-приложений 🤯

- Лёгкая и быстрая
- Без проблем работает с React
- Идеальна для интерактивных 3D-опытов
- Если ты занимаешься 3D-разработкой для веба — стоит попробовать

Источник: github.com/playcanvas/react

Ставь лайк, пригодится ✅

@WebDev_Plus

Бесплатный AI-инструмент от Google теперь в NotebookLM умеет делать из любой статьи или ссылки полноценный видео-туториал.

Раньше были только текстовые конспекты и аудио, теперь — видео-объяснения за секунды.

Я протестил на статье про JavaScript-функции с MDN — получилось готовое видео.

Образование станет проще и доступнее :)

@WebDev_Plus

La Liga блокирует сайты, которые используют Cloudflare, но их собственная антипиратская страница работает через CDN Cloudflare. 🤡

@WebDev_Plus

Как открыть SVG как код в VS Code

@WebDev_Plus

Инструмент, который наглядно показывает, как движок JavaScript выполняет твой код.

Есть пошаговая визуализация и таймлайн выполнения - просто тянешь за угол экрана.

Жаль, что у меня такого не было, когда я начинал учить JS. Это сильно помогает понять, что происходит «под капотом».

Источник: jsviz.klve.nl

@WebDev_Plus

Топ-10 браузерных расширений для разработчиков

🔴JSON Formatter
Форматирует JSON в дерево, удобно читать данные API.

🔴Wappalyzer
Позволяет увидеть, какие технологии использует сайт.

🔴Fake Filler
Автоматически заполняет формы фейковыми данными, ускоряя тестирование.

🔴Clear Cache
Быстро очищает кэш браузера для проверки новых версий сайта.

🔴Talend API Tester
Дает возможность визуально работать с API и тестировать их.

🔴Focus To-Do
Повышает продуктивность, отслеживая задачи с таймером Pomodoro.

🔴Lighthouse
Позволяет быстро проверить производительность и доступность сайта.

🔴Cookie Editor
Позволяет быстро создавать, редактировать и удалять куки для тестов и отладки.

🔴Web Developer
Добавляет дополнительные инструменты для инспекции и отладки сайта.

🔴Dark Reader
Переводит сайты в тёмную тему, снижая нагрузку на глаза.

@WebDev_Plus

Кажется, я наконец нашёл иконки файлов для VS Code, которые мне нравятся.

https://marketplace.visualstudio.com/items?itemName=thang-nm.flow-icons

@WebDev_Plus

Большое обновление для CSS-разработчиков

Теперь можно проверять совместимость через Can I Use прямо в терминале с помощью caniuse-cli. Не нужно открывать браузер, и оно работает офлайн без интернета.

Если вдруг не в курсе, Can I Use это основной инструмент для проверки поддержки CSS, HTML и JavaScript в браузерах.

- проверки совместимости прямо из терминала
- работает офлайн, без подключения к интернету
- ускоряет разработку и отладку

Больше никакого переключения вкладок ✏️

Установить можно отсюда : https://github.com/bramus/caniuse-cli

@WebDev_Plus

Создай README, который выделит твой проект.

Используй этот редактор, чтобы быстро настроить и добавить все нужные разделы в репозиторий.

→ http://readme.so/es/editor

@WebDev_Plus

15 публичных API для фронтенд-проекта

- OpenWeatherMap API
- Genderize .io
- Open Food Facts
- Slack API
- PayPal API
- Trello API
- NASA API
- GitHub API
- Stripe API
- Reddit API
- Twilio API
- Shopify API
- OneDrive API
- Dropbox API
- VirusTotal API

@WebDev_Plus

Люди до сих пор качают старое расширение Rainbow Braces для Visual Studio, но это больше не нужно — эта функция уже встроена. 🎉

Просто откройте Tools → Options → Text Editor → General и включите опцию "Enable brace pair colorization".

Цветные пары скобок помогают быстрее ориентироваться в коде, особенно если вложенность большая. Меньше путаницы, меньше ошибок.

@WebDev_Plus

Это реально крутой инструмент для CSS-разработчиков

Найдите сотни стильных CSS-паттернов и фонов, полностью бесплатных. Просто скопируйте код и сразу используйте в своих проектах.

Идеально для:

- создания ярких hero-секций
- разработки современных дашбордов и приложений
- улучшения портфолио с акцентом на дизайн

С этим ваши проекты реально будут выделяться :)

Источник: patterncraft.fun

@WebDev_Plus