Все для веб-разработчика
Очередная коллекция сервисов - Все для веб-разработчика редакторы кода и IDE, песочницы для хранения, передачи и запуска кода, работа с изображениями, иконки и графика, генераторы CSS, шрифты, работа с дизайн-макетами, анимации, ресурсы сильно облегчающие деятельность фронтендера.
Браузер для web-разработчиков - Blisk https://blisk.io/
Редакторы кода и IDE:
Atom https://atom.io/ - редактор кода от GitHub, лучшая реализация интеграции с Git
SublimeText 4 https://www.sublimetext.com/ - самый быстрый из всех редакторов кода
VS Code https://code.visualstudio.com/ - "редактор на стероидах".
Для такого функционала и количества плагинов работает быстро.
Подойдёт большинству
NotePad++ https://notepad-plus-plus.org/ - устаревший, но легендарный редактор. Многие используют в качестве замены стандартного блокнота на Windows.
Песочницы для хранения, передачи и запуска кода:
CodePen https://www.codepen.io/ - безусловно самая популярная песочница для HTML, CSS и JS кода. Можно поделиться целым сайтом
JS Fiddle https://jsfiddle.net/ - песочница для JavaScript
JSBin https://jsbin.com/ - песочница с выводом в консоль.
Работа с изображениями:
Compressor https://compressor.io/ - сжимает изображения(JPG и PNG), что понятно из незамысловатого названия.
TinyPNG https://tinypng.com/ - ещё один сервис с открытым API
Vectorizer https://www.vectorizer.io/ - конвертирует изображение из растрового в векторное
Иконки и графика:
Flaticons https://www.flaticon.com/ - векторные иконки. Бесплатно
SeekLogo https://seeklogo.com/ - векторные логотипы популярных компаний.
SVGPorn https://svgporn.com/ - ещё одни векторные логотипы
TOP Logos http://toplogos.ru/ - логотипы компаний (русские)
Font Awesome http://fontawesome.com/ - иконочный шрифт + SVG
UTF-8 Icons https://utf8-icons.com/ - иконки UTF-8
Генераторы CSS:
CSS3gen https://css3gen.com/ – CSS генератор кнопок, градиентов, бордеров, теней трансформации, фона, анимаций
Hailpixel https://color.hailpixel.com/ – простой способ подобрать цвет в CSS
CSSgradient https://cssgradient.io/ – градиент генератор
ColorScheme https://colorscheme.ru/color-converter.html – конвертер цветов
Шрифты:
Google Fonts https://fonts.google.com/ - Веб-шрифты от Google
Type Anything https://app.typeanything.io/ – Калькулятор параметров текста + генератор CSS-кода
FontStorage https://fontstorage.com/tools – Плагин доступный для всех популярных редакторов кода и IDE. Позволяет быстро подключить шрифт
Работа с дизайн-макетами:
Avocode https://avocode.com/ - работа с макетами PSD, sketch и др.
Adobe Assets https://assets.adobe.com/ - работа с PSD макетами прямо в браузере. Присутствует экспорт кода.
Zeplin https://zeplin.io/ - работа с дизайн-макетами прямо в браузере. Есть экспорт кода.
PSD Tech https://studio.psdetch.com/ - бесплатный аналог avocode.
Markupeasy https://www.markupeasy.ru/ – бесплатный аналог Avocode
NinjaMock https://ninjamock.com/
Анимации:
Animate.css https://daneden.github.io/animate.css – библиотека CSS анимаций
Magic https://www.minimamente.com/example/magic_animations – кроссбраузерные анимации
Hover.css https://ianlunn.github.io/Hover – набор анимаций CSS
Ресурсы сильно облегчающие деятельность фронтендера:
How To Center in CSS https://howtocenterincss.com/ - центрируй всё
CodeHouse https://codyhouse.co/ - крутые подборки готовых решений на CSS и jQuery без плагинов.
Learn Git Branching https://learngitbranching.js.org/ – интерактивный учебник по Git
