Bespoyasov Tools Save

Список полезных сервисов для разработчиков.

Project README

Список полезных сервисов для разработчиков

Чем я часто пользуюсь сам и могу порекомендовать другим.

HTML и доступность

  • Emmet, генератор HTML-кода из «CSS-селекторов»;
  • Can I Include, ответит на вопрос «Можно ли класть один тег в другой?»;
  • HTML head, поможет найти нужный элемент для <head> страницы;
  • Logical Content Flow, найдёт проблемы с заголовками, их порядком и отображением;
  • Better Mobile Inputs, поможет подобрать <input> и атрибуты для него так, чтобы им было удобно пользоваться на мобильных;
  • Weblind, рекомендации по разработке сайтов для людей с нарушениями зрения;
  • Inclusive Components, примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность;
  • Axe, браузерный плагин для комплексной проверки доступности страниц;
  • Good Email Code, справочник и набор рекомендаций для пуленепробиваемой вёрстки писем;
  • How to Favicon in 2021, статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода;
  • W3C Validator, валидатор HTML-кода.

Подготовка графики

  • Squoosh, приложение, CLI и API для оптимизации графики;
  • SVG URL Encoder, кодирует SVG в URL-строку, чтобы использовать его в background без base64;
  • SVG OMG, оптимизатор SVG;
  • Social Image Preview, предпросмотрщик изображений для соцсетей;
  • Facebook Debug, дебагер соц-изображений для Facebook.

Стилизация и CSS

  • Can I Use, поможет проверить браузерную поддержку свойства;
  • Can I Use CMD, CLI для Can I Use;
  • Nth Tester, поможет проверить, так ли работает ваш nth-child селектор;
  • Flexbox Playground, визуализирует работу флекс-свойств;
  • Grid by Example, шпаргалка по CSS grid;
  • Grid Lover, конструктор вертикального ритма и отступов для заголовков и параграфов;
  • Specificity Calc, калькулятор специфичности селекторов;
  • Colord, конвертер цветов между разными цветовыми схемами;
  • CSS Gradient, конструктор CSS градиентов;
  • Easings, справочник по easing-функциям с примерами;
  • Cubic Bezier, конструктор и редактор кривых Безье;
  • CSS Patterns, коллекция фоновых узоров на чистом CSS;
  • CSS Shapes, набор часто используемых фигур на чистом CSS;
  • CSS Triggers, подскажет, какие свойства запускают layout, paint и composite.

Git, shell

  • Oh shit! Git, подскажет, что делать, если вы допустили ошибку в гите;
  • Git Explorer, справочник по командам и возможностям гита;
  • Explain Shell, объясняет команды терминала и ключи к ним.

JavaScript и SPA

  • You Might Not Need JS, набор фич, некоторые их которых действительно можно сделать без JS;
  • HTML DOM, набор нативных функций для работы с DOM-деревом;
  • Does it Mutate, подскажет, какие методы изменяют массив, а какие нет;
  • Keycode Info, покажет код нажатой клавиши;
  • Tmstmp, переводит даты в таймштампы и обратно;
  • Generating Random Integers, пример генерации случайного целого с подробным объяснением работы;
  • Jest Mocking Strategies, мои моки в Jest никогда не работают с первого раза;
  • Debounce / Throttle, показывает разницу между debounce и throttle;
  • Anything to Anything Transformer, конвертирует что угодно во что угодно;
  • Regex 101, редактор и тестер регулярных выражений с объяснениями каждого символа и примерами.

Бэкенд и базы данных

  • HTTP Statuses, список HTTP статусов ответа с их значениями;
  • Application Security, интерактивный чеклист по уязвимостям веб-приложений с объяснениями и рекомендациями к защите;
  • Checklist for Changing Data Model, чеклист для миграции данных и схем данных.

Текст, редактура, CV

  • White Spaces, список всех существующих пробелов и рекомендации по использованию каждого;
  • Типограф, правит пунктуацию, ставит неразрывные пробелы и проч.;
  • Markdown Cheatsheet, справочник по MD;
  • Markdown Editor, визуальный редактор MD;
  • Polacode, скриншоттер для фрагментов кода;
  • Resume.io, конструктор CV.

Английский язык

  • Grammarly, проверит орфографию, пунктуацию и грамматику английского текста;
  • Deepl, умный переводчик текста на нейронных сетях, который понимает контекст.
Open Source Agenda is not affiliated with "Bespoyasov Tools" Project. README Source: bespoyasov/tools
Stars
131
Open Issues
0
Last Commit
2 years ago
Repository

Open Source Agenda Badge

Open Source Agenda Rating