Меню

Полезные ссылки для frontend \ javascript разработчика

Редакторы кода

  1. PhpStorm – отличный IDE (не WebStorm т.к. сложилось, что backend на php и хорошо иметь подсветку его синтексиса, обратите внимание в WebStorm этого нет), мой выбор
  2. VS Code – удобный редактор если не нравится PhpStorm / WebStorm
  3. Sublime text 3 – удобный и быстрый редактор кода
  4. Brackets – подходит для начинающих
  5. Notepad ++ – легендарный редактор

Песочницы для кода

  1. JS Bin – Песочница с консолью
  2. JS fiddle – Песочница для JavaScript
  3. CodePen – Песочница для HTML, CSS о JS

Работа с изображениями

  1. Сompressor – Сжимает JPG и PNG
  2. Tiny png – Сжимает изображения. Есть API.
  3. Vectorizer – Из растрового в векторное изображение
  4. Online-Convert – Бесплатный конвертер из растрового в векторное изображение

Шпаргалки

  1. FlexBox – шпаргалка по Flexbox
  2. Html5book – шпаргалка по HTML, CSS, JavaScript и jQuery
  3. HTML Book – шпаргалка по HTML и CSS
  4. CSS Cheat Sheet – шпаргалка по CSS
  5. jQuery page2page – шпаргалка по jQuery
  6. Emmet Cheat Sheet – шпаргалка по Emmet
  7. WebReference – ещё одна шпаргалка по HTML5 и CSS3. Также данный сайт опубликовал свои шпаргалки в виде приложений на Google Play.
  8. Easings – Шпаргалка функций плавности
  9. FreeCodeCamp – Шпаргалка по FlexBox
  10. Habr – Шпаргалка по LESS и SASS

Построение графиков

  1. Сhartjs – Простая, но гибкая библиотека JavaScript
  2. Echarts – инструмент визуализации на JavaScript с открытым исходным кодом

Карты

  1. Mapbox – карты для бизнеса
  2. MapLibre – картографических библиотек с открытым исходным кодом

Генераторы CSS

  1. CSS3gen – CSS генератор кнопок, градиентов, бордеров,теней трансформации, фона, анимаций
  2. Hailpixel – простой способ подобрать цвет в CSS
  3. CSSgradient – градиент генератор
  4. CSS3patterns – CSS паттерны
  5. FreeFrontend – CSS паттерны
  6. ColorScheme – конвертер цветов
  7. CSSworld – Генератор flexbox контейнеров

Шрифты

  1. Programming Fonts – Шрифты для редактора кода
  2. Nerd Fonts – Шрифты + иконки
  3. Google Fonts – Веб-шрифты от Google
  4. Transfonter – Конвертер веб-шрифтов
  5. Фонтов.нет – Подбор шрифта по фразе
  6. Fonts4web – Шрифты для сайтов
  7. Type Anything – Калькулятор параметров текста + генератор CSS-кода
  8. FontStorage – Плагин, простой способ подключить шрифт

Проверка кода

  1. Can I Use – Кроссбраузерность кода
  2. Validator W3 – Валидность HTML-кода
  3. PageSpeed Insights – Проверка оптимизации страницы
  4. Mobile Friendly – Оптимизирована ли ваша страница для мобильных устройств
  5. Find Dublicate Content on your site – Проверка уникальности текста на сайте
  6. Piliapp – Валидность JS-кода
  7. Jsonhero – JSON formater+

Лайфхаки для верстальщика

  1. How To Center in CSS – центрируйте всё
  2. CodeHouse – крутые подборки готовых решений на CSS и jQuery без плагинов
  3. Learn Git Branching – интерактивный учебник по Git
  4. Генератор Flexbox верстки – Конструктор Flexbox
  5. Генератор Grid верстки – Конструктор Grid
  6. Flexbox Defense – игра для изучения Flexbox
  7. GRID GARDEN – игра для изучения Grid

Полезные jQuery плагины

  1. Slick – Адаптивный слайдер
  2. Swiper – Современный адаптивный слайдер
  3. Owl Carousel – Адаптивный слайдер-карусель
  4. Tooltipster – Создание всплывающих подсказок
  5. Flatpickr – Всплывающие окна с выбором даты
  6. Vide – Видеофон для сайта
  7. Masked Input – Плагин маски ввода для input
  8. One Page Scroll – Плагин скролла страницы по секциям в виде слайдера. Демо.

Иконки и графика

  1. Flaticons – бесплатные векторные иконки
  2. Seeklogo – векторные логотипы компаний
  3. SVG Porn – векторные логотипы
  4. TOP Logos – логотипы компаний (русские)
  5. Font Awesome – иконочный шрифт + SVG
  6. UTF-8 Icons – иконки на utf-8
  7. Fontello – шрифтовые иконки. Шрифты генерируются на ходу из выбранных иконок, доступны иконки из 14 популярных шрифтов.
  8. IconMonster – бесплатные векторные иконки
  9. IcoMoon – векторные иконки

Работа с дизайн-макетами

  1. Avocode – платформа для работы макетами для верстальщиков (PSD, Sketch и др)
  2. Adobe Assets – работа с PSD-макетами прямо в браузере. Экспорт кода.
  3. Zeplin – работа с дизайн-макетами в браузере. Есть экспорт кода.
  4. PSD Tech – бесплатный аналог Avocode.
  5. Markupeasy – бесплатный аналог Avocode.

Библиотеки с анимациями

  1. Animate.css – библиотека CSS анимаций
  2. Magic – кроссбраузерные анимации
  3. It's Tuesday. – простые и приятные CSS анимации
  4. Wow.js – анимация при появлении элемента
  5. Hover.css – набор анимаций CSS
  6. CSS3-анимация – полная статья про анимацию на CSS3

Прочее

  1. Coverr – Короткие видео для фона на сайт
  2. Subte Patterns – Фоны для сайта
  3. Генератор UTM-меток
  4. Underscores – Пустая тема для Wordpress
  5. Minify – CSS и JS минификатор
  6. Unminify – Анминификатор для HTML, CSS, JS
  7. CodeWars – Задачи для тренировки JavaScript кода
  8. FreeFormatter.com – Vинификатор
  9. Blisk – Браузер для разработчиков

Обучающая литература

  1. You Don't Know JS – перевод серии книг по JavaScript.