Все для веб-разработчика

Все для веб-разработчика

Все для веб-разработчика

Очередная коллекция сервисов - Все для веб-разработчика редакторы кода и 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


Share Tweet Send
0 Коментарии
Загрузка...
You've successfully subscribed to Pinta IT 🍺
Great! Next, complete checkout for full access to Pinta IT 🍺
Welcome back! You've successfully signed in
Success! Your account is fully activated, you now have access to all content.