liaugust/frontender

JavaScript

• Naming Cheatsheet - Шпаргалка по именованию переменных и функций с примерами
• Тотальный JavaScript - репозиторий, в котором собраны полезные материалы для изучения JS
• JSRobot - практикуйтесь в JS во время прохождения очень увлекательной игры
• Promisees - поможет вам изучить JavaScript Promises. Вы можете использовать это небольшое приложение, чтобы визуализировать, как работают обещания и как их можно использовать в реальной кодовой базе.

TypeScript

• Type<Challenge[]> Github репозиторий для освоения TS
• Typescript-Handbook - Карманная книга по TypeScript
• TypeScript Deep Dive - Отличная документация по TypeScript от Basarat (https://telp.cc/rgW)

Git

• Firstaidgit - Коллекция часто задаваемых вопросов по Git с возможностью поиска

CSS

• Easings - Этот сайт поможет подобрать нужную функцию плавности
• NTH test - визуализация того как работает NTH в CSS
• Get Waves - генератор интересных переходов между секциями сайта
• Container Query Units - Очень полезная и интересная статья по Container Query Units в CSS
• Flexy Boxes - очень простой и удобный генератор для CSS Flex
• Автопрефиксер CSS онлайн - сервис, позволяющий генерировать кроссбраузерный css код на основе вашего, не устанавливая при этом никаких сборок
• Stylifyme - Получите всю информацию о стилизации сайта по ссылке, включая цвета, шрифты, размер и интервалы
• Shape Divider - Генератор волнистых разделителей между секциями сайта, с возможностью предпросмотра на трёх разрешениях.
• flexboxdefense - Онлайн-игра для практики с Flexbox Css
• Neumorphism генератор градиентов и теней в стиле неоморфизм
• Css Gradient - Инструмент, позволяющий создавать красивые градиенты, которые можно использовать с CSS
• Cssreference - Шпаргалка по всем CSS свойствам с визуализацией того, как они работают
• Cssgridgarden - онлайн игра, где вы сможете попрактиковаться с CSS grid.
• On/Off Switch - здесь вы сможете создать полностью кастомный переключатель, и сразу получить его HTML и CSS код
• CSS Pie Chart - Генератор круговых графиков на чистом CSS и HTML
• Neumorphism генератор градиентов и теней в стиле неоморфизм
• CSS box-shadow examples - Готовые css тени, которые можно скопировать просто кликнув на пример.
• Type scale - Просмотрите и выберите правильный шрифт и его масштаб для вашего проекта. Поэкспериментируйте с размером шрифта, масштабом и различными веб-шрифтами.
• Шпаргалка по Grid CSS - удобная и подробная шпаргалка по Grid CSS, с визуализацией работы различных свойств
• CSS Ruler - вэб приложение для экспериментирования с различными единицами измерения CSS
• Glassmorphism generator - генератор ui элементов в стиле Glassmorphism
• Color Hailpixel - очень удобный и конфигурируемый генератор цветовых схем, генерирующий цвета при движении курсора
• CSS Animations - В этом курсе из 32 частей есть много готовой графики, которая используется в курсе в качестве основы для анимации. Это интересный способ изучить анимацию по ключевым кадрам с помощью CSS.
• Cssanimation Rocks - сайт с обучающими статьями по анимациям в CSS
• Tridiv - С помощью этого сервиса вы сможете делать крутые модели и копировать их HTML и CSS код
• CSS Dinner - Интерактивная CSS игра для практики в css селекторах. Отлично подойдёт новичкам
• Enjoycss - CSS генератор всего, начиная от фигур и теней заканчивая полноценными UI компонентами

Interviews

• Подборка тестовых заданий - репозиторий, в котором собранна большая база тестовых заданий из разных компаний.
• Руководство для прохождения интервью по фронтенду - подборка вопросов на собеседование по HTML, CSS и JS

HTML

• validator.w3 - Здесь вы сможете проверить свою разметку на валидность
• Pixelmap - Сайт позволит вам сгенерировать кастомную карту в SVG, HTML и IMAGE форматах
• Популярные названия классов - в основном будет полезен новичкам, которым трудно придумать подходящий класс

Images/Optimization

• Squoosh - благодаря этому сервису вы сможете сэкономить до 90%, а то и более, от веса изображения
• Metatags - С помощью этого сайта вы сможете посмотреть как будет выглядеть ваш сайт в Google, Facebook, Twitter, Linkedin, Pinterest и Slack
• Pexels - Качественные бесплатные стоковые фотографии

Vue

• Awesome Vue.js - репозиторий, в котором собранно буквально всё, что может понадобиться при изучении Vue

React

• Тотальный React - репозиторий, в котором собрано множество полезных материалов по React
• Memoization in React - хорошая статья о мемоизации в React
• useCallback with useMemo - когда использовать useCallback, а когда useMemo
• Upmostly - подборка обучающих статей по React
• Ant Designe - одна из лучших UI библиотек для React.JS
• React Tutorial - интерактивный курс по React Js

Icons

• Icomoon - Здесь вы сможете сгенерировать свои кастомные иконки и иконочные шрифты (на сайте более 5500 готовых иконок).

VSCode

• Polacode - плагин для VS Code, позволяющий делать красивые скриншоты кода
• Theme Studio - Редактор и каталог готовых тем для VS Code
• Code Spell Checker - согласитесь, часто бывает, что сделали ошибку в слове и код перестал работать) Плагин подчеркивает слова с ошибкой. К плагину есть куча дополнений с разными языками
• Tabnine - очень удобный плагин для VSCode способный ускорить разработку. Плагин предугадывает то, что вы хотите написать и подсказывает

Another

• Docker Cheat Sheet - шпаргалка по командам Docker
• Devhints - огромная подборка шпаргалок по различным технологиям и языкам
• Withpersona - Сервис позволит добавить идентификацию личности на ваш сайт
• Skypack - Загружайте оптимизированные npm пакеты без установки и без инструментов сборки.
• Bundlephobia — наглядно показывает подробную информацию о любом пакете.
• OpenVim - это интерактивное руководство, которое научит вас пользоваться Vim
• Screeps - многопользовательская онлайн-стратегия с открытым исходным кодом, которая позволяет вам использовать настоящий JavaScript код для создания колонии, добычи ресурсов, завоевания территории и многого другого
• Jamstack Attack - представляет собой серию мини-игр для отработки различных аспектов frontend разработки
• CodinGame - это полнофункциональная обучающая платформа, которая позволит вам изучать 25+ языков программирования, решая при этом увлекательные задачи
• Frontendcheatsheets - сайт, на котором есть шпаргалки по различным фронтенд технологиям. Список пополняется
• Leetcode - лучшая платформа, которая поможет вам улучшить свои навыки, расширить свои знания и подготовиться к техническим собеседованиям.
• Key Combiner - интерактивные курсы по горячим клавишам в различных программах
• OhMyZsh - пожалуй лучший терминал) Есть очень удобный автокомплит и возможность использовать уникальные, красивые, а главное удобные темы
• Readme.so - генератор readme.md файлов. В основном подойдёт для описания проекта/библиотеки
• UXCheck - расширение для Chrome, которое поможет выявить проблемы с юзабилити с помощью эвристической оценки
• Snazzymaps - сервис для создания красивых кастомных Google карт. Имейте в виду, что необходим Google API key
• Codewars - На сайте более 5000 различных задач, на ~50 языках программирования. Вы можете как тренироваться, так и состязаться с другими разработчиками.
• shortcuts - Справочник сочетаний клавиш для популярного софта для MacOS и Windows
• Frontendmentor - Подборка задач на HTML, CSS и JavaScript, решая которые, вы здорово прокачаете свои навыки
• 30 seconds of code - Подборка готовых сниппетов, алгоритмов, статей, шпаргалок по JS, GIT, React, Node
• Odin Project - один из тех ресурсов, «что я хотел бы иметь, когда учился». Полностью бесплатный сервис, благодаря которому вы сможете пройти огромный путь в Fullstack разработку на JS, постоянно практикуясь, разрабатывая проекты.
• Scotch - платформа для изучения веб-разработки. Имеются курсы по React, JavaScript и Vue
• Httpstatuses - Список HTTP кодов состояния с их определениями
• Mailtrap - сервис для тестирования отправки электронных писем