​​Учимся делать CSS-анимацию за 20 минут

Существует два способа: переходы (transitions) и анимации (animations). Как их использовать, как создавать собственные библиотеки переходов и какие есть подводные читайте статье: https://tproger.ru/articles/kak-nauchitsya-animaciyam-v-css-za-2-minut

#web #CSS

Pixie — палитра цветов, привязанная к курсору

Просто указываете им на цвет, и утилита сообщает вам значения RGB, HTML, CMYK и HSV. Также отображаются координаты курсора.

Стоимость: #бесплатно

#web #утилита

Locofy.ai — утилита для конвертирования дизайна сайта в его код

Можно переносить креативы из Figma/Adobe XD сразу в React, React Native, HTML-CSS, Next.js или Gatsby. Есть функция синхронизации кода с GitHub и Visual Studio. Приложение на стадии беты. 

Стоимость: #бесплатно

#UI #web

30 seconds of code — библиотека коротких фрагментов кода

Ищите нужный вам снипет, изучаете примеры использования и просто интегрируете в свой код. Все «кусочки» отсортированы по потребностям, языку и тегам. 

Стоимость: #бесплатно

#code #web

Dimensions — расширения для Chrome, позволяющее измерять всё на странице

Вы просто активируете расширение и перекрестие на мышке покажет вам расстояние до ближайших краев. Пригодится всем фронтендерам и дизайнерам интерфейсов.

Стоимость: #бесплатно

#frontend #web

BulidWith — это платформа для выявления технологий, которыми пользуются различные сайты.

С ее помощью можно определять движки, расширения, технологические стеки и сторонние сервисы, подключенные к веб-ресурсы. Доступна интеграция с CRM.

Стоимость: #бесплатно до 10 сайтов в день, далее потребуется продвинутый тарифный план

#web #analytics @prog_tools

Wireshark — инструмент для захвата и анализа сетевого трафика

Wireshark работает практически со всеми протоколами модели OSI, обладает понятным интерфейсом и удобной системой фильтрации данных. Программа кроссплатформенная и поддерживает следующие ОС: Windows, Linux, Mac OS X, Solaris, FreeBSD, NetBSD, OpenBSD.

#web #security #net @prog_tools

MAMP — пакет софта для запуска локального сервера на вашем компьютере

В одном пакете уже собрано и настроено всё необходимое, нужно только распаковать и начать пользоваться. 

Стоимость: #бесплатно

#web #php #wordpress #macOS @prog_tools

Mobile FIRST — симулятор смартфона для браузера на ПК

Расширение позволит вам тестировать свои сайты на смартфонах, планшетах и умных часах разных версий. Есть запись экрана, проверка темной темы и прочее. 

Стоимость: #бесплатно

#мобилка #web #qa @proog_tools

Uptime Kuma — селфхостед опен-сорс решение для мониторинга серверов и сервисов

Прога умеет в мониторинг HTTP(s), TCP, ключевых слов в HTTP(s), Ping и Docker контейнеров. Ещё мониторит даты окончания SSL сертификата,  поддерживает proxy и имеет отдельную страницу статуса сервисов с привязкой к доменному имени. 

Стоимость: #бесплатно

#docker #web @prog_tools

Trace — плагин для Figma для конвертирования дизайнов в приложение на SwiftUI

У готового прототипа можно прямо на ходу посмотреть код, изменить его и перенести в нужную IDE. 

Стоимость: #бесплатно

#frontend #design #web @prog_tools

Flatirons Fuse — удобный импортер CSV-данных на сайт

С помощью снипета кода вы можете добавить Fuse на свой сайт и позволить своим клиентам или внутренним командам легко переносить данные CSV в любом формате. 

#web #csv @prog_tools

Wave Snippets — сервис для создания видео-сниппетов

С помощью этого онлайн-инструмента можно сгенерировать красивую и анимированную демонстрацию кода. 

На выбор множество языков программирования и различных тем оформления.

Стоимость: #бесплатно

#web #code @prog_tools

MightyMeld — набор предварительно настроенных компонентов, которые полностью совместимы с Tailwind CSS и React

Просто выбираете нужный объект из большой библиотеки шаблонов, перетаскиваете его на рабочую панель и настраиваете под свои нужды. В проекте есть встроенный ИИ ассистент.

Стоимость: #бесплатно, есть платная подписка

@prog_tools #web #css #frontend

3D DOM viewer — скрипт для визуализации сайта в 3D

Просто копируете код и вставляете его в консоль. Вуаля, красота!

Стоимость: #бесплатно

@prog_tools #web #fun

Dioxus — это портативный фреймворк для построения кроссплатформенных пользовательских интерфейсов

Фреймворк используется для создания веб-приложений, десктопных приложений, статических сайтов, мобильных приложений и liveview приложений. Dioxus полностью независим от рендерера и может быть использован на любой платформы. Язык работы - Rust.

@prog_tools  #web #rust

Screenshot to Code — тулз для конвертирования скринов, Figma-шаблонов и мокапов в чистый код

Поддерживаемые стэки: HTML + Tailwind, React + Tailwind, Vue + Tailwind, Bootstrap, Ionic + Tailwind и SVG.

Стоимость: #бесплатно

@prog_tools #web #design

Всё ещё путаетесь в кодах ответов HTTP?

Это нормально, ведь кодов много и помнить их всех трудно, да и не всегда необходимо. На такие случае удобно будет держать под рукой вот эту короткую шпаргалку по статус кодам.

#шпаргалка #web

Комплексная интерактивная шпаргалка для веб-разработчика

Сайт содержит в себе шпаргалки по: HTML+CSS+JS, PHP, jQuery и SEO. Все разбито на категории, наглядно проиллюстрировано.

Ссылка на шпаргалку

#шпаргалка #web

Комплексная интерактивная шпаргалка для веб-разработчика

Сайт содержит в себе шпаргалки по: HTML+CSS+JS, PHP, jQuery и SEO. Все разбито на категории, наглядно проиллюстрировано.

Ссылка на шпаргалку

#шпаргалка #web