Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/bespoyasov/tools

Список полезных сервисов для разработчиков.
https://github.com/bespoyasov/tools

css editing front-end git html javascript shell tools

Last synced: about 1 month ago
JSON representation

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

Awesome Lists containing this project

README 

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



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



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



- [Emmet](https://www.emmet.io), генератор HTML-кода из «CSS-селекторов»;

- [Can I Include](https://caninclude.glitch.me), ответит на вопрос «Можно ли класть один тег в другой?»;

- [HTML head](https://html-head.ru), поможет найти нужный элемент для `` страницы;

- [Logical Content Flow](https://defaced.dev/tools/logical-content-flow/), найдёт проблемы с заголовками, их порядком и отображением;

- [Better Mobile Inputs](https://better-mobile-inputs.netlify.app), поможет подобрать `` и атрибуты для него так, чтобы им было удобно пользоваться на мобильных;

- [Weblind](https://weblind.ru), рекомендации по разработке сайтов для людей с нарушениями зрения;

- [Inclusive Components](https://inclusive-components.design), примеры реализации слайдеров, аккордеонов и других компонентов с упором на доступность;

- [Axe](https://www.deque.com/axe/), браузерный плагин для комплексной проверки доступности страниц;

- [Good Email Code](https://www.goodemailcode.com), справочник и набор рекомендаций для пуленепробиваемой вёрстки писем;

- [How to Favicon in 2021](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs), статья-чеклист о том, как добавлять фавиконку на сайт без лишнего кода;

- [W3C Validator](https://validator.w3.org/nu/#textarea), валидатор HTML-кода.



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



- [Squoosh](https://squoosh.app), приложение, CLI и API для оптимизации графики;

- [SVG URL Encoder](https://yoksel.github.io/url-encoder/ru/), кодирует SVG в URL-строку, чтобы использовать его в `background` без base64;

- [SVG OMG](https://jakearchibald.github.io/svgomg/), оптимизатор SVG;

- [Social Image Preview](https://socialsharepreview.com/), предпросмотрщик изображений для соцсетей;

- [Facebook Debug](https://developers.facebook.com/tools/debug/), дебагер соц-изображений для Facebook.



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



- [Can I Use](https://caniuse.com/), поможет проверить браузерную поддержку свойства;

- [Can I Use CMD](https://github.com/sgentle/caniuse-cmd), CLI для Can I Use;

- [Nth Tester](https://css-tricks.com/examples/nth-child-tester/), поможет проверить, так ли работает ваш `nth-child` селектор;

- [Flexbox Playground](https://codepen.io/enxaneta/full/adLPwv/), визуализирует работу флекс-свойств;

- [Grid by Example](https://gridbyexample.com/examples/), шпаргалка по CSS grid;

- [Grid Lover](https://www.gridlover.net/try), конструктор вертикального ритма и отступов для заголовков и параграфов;

- [Specificity Calc](https://specificity.keegan.st), калькулятор специфичности селекторов;

- [Colord](https://colord.omgovich.ru), конвертер цветов между разными цветовыми схемами;

- [CSS Gradient](https://cssgradient.io), конструктор CSS градиентов;

- [Easings](https://easings.net), справочник по easing-функциям с примерами;

- [Cubic Bezier](https://cubic-bezier.com/#.87,0,.13,1), конструктор и редактор кривых Безье;

- [CSS Patterns](https://projects.verou.me/css3patterns/), коллекция фоновых узоров на чистом CSS;

- [CSS Shapes](https://css-tricks.com/the-shapes-of-css/), набор часто используемых фигур на чистом CSS;

- [CSS Triggers](https://csstriggers.com), подскажет, какие свойства запускают layout, paint и composite.



## Git, shell



- [Oh shit! Git](https://ohshitgit.com), подскажет, что делать, если вы допустили ошибку в гите;

- [Git Explorer](https://gitexplorer.com), справочник по командам и возможностям гита;

- [Explain Shell](https://explainshell.com), объясняет команды терминала и ключи к ним.



## JavaScript и SPA



- [You Might Not Need JS](http://youmightnotneedjs.com), набор фич, некоторые их которых действительно можно сделать без JS;

- [HTML DOM](https://htmldom.dev), набор нативных функций для работы с DOM-деревом;

- [Does it Mutate](https://doesitmutate.xyz), подскажет, какие методы изменяют массив, а какие нет;

- [Keycode Info](http://keycode.info), покажет код нажатой клавиши;

- [Tmstmp](https://bespoyasov.ru/tmstmp/), переводит даты в таймштампы и обратно;

- [Generating Random Integers](https://stackoverflow.com/a/1527820/3141337), пример генерации случайного целого с подробным объяснением работы;

- [Jest Mocking Strategies](https://mercedesbernard.com/blog/jest-mocking-strategies), мои моки в Jest никогда не работают с первого раза;

- [Debounce / Throttle](http://demo.nimius.net/debounce_throttle/), показывает разницу между `debounce` и `throttle`;

- [Anything to Anything Transformer](https://transform.tools/json-schema-to-openapi-schema), конвертирует что угодно во что угодно;

- [Regex 101](https://regex101.com), редактор и тестер регулярных выражений с объяснениями каждого символа и примерами.



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



- [HTTP Statuses](https://httpstatuses.com), список HTTP статусов ответа с их значениями;

- [Application Security](https://application.security/free/owasp-top-10), интерактивный чеклист по уязвимостям веб-приложений с объяснениями и рекомендациями к защите;

- [Checklist for Changing Data Model](https://rtpg.co/2021/06/07/changes-checklist.html), чеклист для миграции данных и схем данных.



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



- [White Spaces](https://kirillbelyaev.com/s/), список всех существующих пробелов и рекомендации по использованию каждого;

- [Типограф](https://typograf.github.io/mobile.html), правит пунктуацию, ставит неразрывные пробелы и проч.;

- [Markdown Cheatsheet](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet), справочник по MD;

- [Markdown Editor](https://readme.so), визуальный редактор MD;

- [Polacode](https://github.com/octref/polacode), скриншоттер для фрагментов кода;

- [Resume.io](https://resume.io), конструктор CV.



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



- [Grammarly](https://app.grammarly.com), проверит орфографию, пунктуацию и грамматику английского текста;

- [Deepl](https://www.deepl.com/translator), умный переводчик текста на нейронных сетях, который понимает контекст.