Git Graph - расширение VS Code для работы с Git репозиторием

Это расширение позволяет просматривать структуру репозитория и выполнять с ним различные операции.

С Git Graph вы сможете в удобной форме просматривать ветки репозитория, делать поиск по истории коммитов, совершать pull-request и производить множество других операций.

#расширение #vscode

📘 Каталог уроков канала за 2021:

• Урок 45. Редактор "Sublime Text"
• Урок 46. Молниеносная верстка при помощи плагина "Emmet"
• Урок 47. Подсветка и выбор цветов в CSS-файлах
• Урок 48. Выравнивание кода в Sublime Text
• Урок 49. Автоматическая перезагрузка страницы в браузере при сохранении файла
• Урок 50. Библиотека для анимаций "Anime.js"
• Урок 51. Zeplin.io - лучший помощник для дизайнера и верстальщика
• Урок 52. Красивые анимации с bounce.js
• Урок 53. Высокоскоростная библиотека Pixi.js
• Урок 54. Полезных хитростей Chrome DevTools
• Урок 55. Адаптивный интерфейсный фреймворк Foundation
• Урок 56. Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"
• Урок 57. Библиотека для создания анимаций Animate.css
• Урок 58. Библиотека для создания каруселей Embla Carousel
• Урок 59. Библиотека для создания капчи RVerify.js
• Урок 60. Библиотека для создания скелета загрузки Placeholder Loading
• Урок 61. Библиотека hover-эффектов для фотографий «imagehover.css»
• Урок 62. Webpack - сборщик модулей JavaScript с открытым исходным кодом
• Урок 63. Библиотека для создания 3D графики "Three.js"
• Урок 64. Библиотека для создания push уведомлений push.js
• Урок 65. Pixel Perfect - расширение Chrome для качественной верстки
• Урок 66. Backbone.js – фреймворк для разработки сложных веб-приложений
• Урок 67. SVG.js - библиотека для работы с SVG-графикой
• Урок 68. CSS Peeper - расширение Chrome для удобного просмотра CSS-кода
• Урок 69. GitHub Pages - сервис для хранения статических HTML-страниц
• Урок 70. HTML Hint - расширение VS Code для проверки HTML-кода
• Урок 71. GitLab - система управления репозиториями
• Урок 72. WOW.js - библиотека для создания анимаций при прокрутке
• Урок 73. HTML5Boilerplate – фронтенд-шаблон для создания веб-приложений
• Урок 74. Figma – инструмент для прототипирования сайтов и приложений
• Урок 75. HAML – HTML-препроцессор и шаблонизатор
• Урок 76. Selenium - инструмент автоматизации действий на сайтах
• Урок 77. D3.js – библиотека JavaScript для визуализации данных
• Урок 78. Adonis JS – фреймворк для Node.js
• Урок 79. Premonish – библиотека JavaScript для предсказывания действий пользователя
• Урок 80. CSS Peek – расширение для работы со стилями
• Урок 81. Empire of Code – игра для изучения JavaScript
• Урок 82. Programming Hero - игра для обучения программированию
• Урок 83. Elevator Saga – игра для изучения JavaScript
• Урок 84. Code Spell Checker – расширение для редактирования кода
• Урок 85. FullPage.js – библиотека JavaScript для создания эффектов прокрутки
• Урок 86. Knockout.js – библиотека JavaScript для работы с каркасом веб-приложений

📕 Каталог уроков, статей и материалов канала за 2020 год

CSS Button Generator - CSS-Генератор кнопок для сайтов

Это сайт, на котором вы сможете через простой и интуитивно понятный интерфейс собрать красивую кнопку для вашего сайта.

Предложено большое количество настроек - шрифт и его величина, размеры, тени, границы, а также есть готовые шаблоны кнопок.

#сайт

👨🏻‍💻[УРОК 59] Библиотека для создания капчи RVerify.js

Эта статья научит вас защищать ваш сайт от вредоносных ботов. Вы узнаете что такое капча, зачем она нужна и сможете за несколько минут создать и настроить под себя простейшую капчу.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

GLightbox - JS-библиотека для создания галерей

Это JS-библиотека, которая поможет вам создавать галереи из фотографий, видеороликов, карт и любых других встроенных элементов.

В сжатом виде она весит всего 11KB и не перегрузит ваш проект. К тому же, эта библиотека адаптируется под любые экраны и очень проста в использовании.

#библиотека #javascript

PageSpeed Insights - инструмент для анализа скорости загрузки страницы

Данный инструмент разработан компанией Google для определения скорости загрузки страницы. Он выведет показатель скорости в виде шкалы от 0 до 100 и даст рекомендации для её увеличения.

Чтобы проверить ваш сайт, достаточно ввести его адрес. Кроме рекомендаций по увеличению скорости загрузки страницы, вы также можете получить рекомендации по увеличению производительности вашего сайта в целом.

#сайт

RegEx Previewer - расширение VS Code для тестирования регулярных выражений

Это полезное расширение VS Code поможет вам тестировать регулярные выражения прямо в редакторе кода.

RegEx Previewer применяет написанный вами шаблон регулярного выражения к текстовому файлу и выделяет все совпадения. Это позволит значительно ускорить разработку и избежать ошибок.

#расширение #vscode

imagehover.css - библиотека hover-эффектов для фотографий

Библиотека предоставляет более 40 различных бесплатных CSS-эффектов при наведении на фотографии.

Все эффекты можно посмотреть на сайте библиотеки. Там же можно её скачать для использования в своих проектах.

#библиотека #CSS

👨🏻‍💻 [УРОК 60] Библиотека для создания скелета загрузки Placeholder Loading

Данная статья поможет вам разобраться в создании скелетов сайтов перед загрузкой всего контента, а также объяснит, зачем это нужно.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

transition.css - библиотека для создания эффектов перехода

Это CSS-библиотека, которая позволяет вам использовать различные transition-эффекты. В библиотеке более 40 эффектов и все они отлично кастомизируются.

Она проста в использовании. Для добавления в проект достаточно подключить её, как CSS-файл. Чтобы присвоить эффект элементу, необходимо добавить класс с названием этого эффекта. На сайте библиотеки можно посмотреть, как выглядят все эффекты.

#библиотека #css

CSS Grid Generator - сервис для создания Grid-сетки

Данный сервис поможет вам начать работать с технологией CSS Grid. На сайте вы сможете легко собрать нужную вам сетку для макета, а сервис сгенерирует CSS-код данной сетки. Если вы уже знакомы с данной технологией - сервис поможет вам представить вашу сетку визуально.

Благодаря удобному графическому интерфейсу, создание сетки займёт не больше минуты - блоки создаются, растягиваются, перемещаются курсором мыши. Можно выбрать необходимые единицы измерения, количество строк и столбцов, а также отступы между ними.

#сайт

CSS Accordion Generator - сервис, генерирующий аккордеон-слайдеры

Это полезный сервис, который поможет вам через простой графический интерфейс создавать различные аккордеон-слайдеры для ваших сайтов без использования JavaScript.

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

#сайт

👨🏻‍💻 [УРОК 61] Библиотека hover-эффектов для фотографий «imagehover.css»

Эта статья покажет вам возможности библиотеки imagehover и научит ей пользоваться. После прочтения статьи вы сможете создавать красивые hover-эффекты для изображений даже если никогда раньше этого не делали.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья

Materialize - CSS-фреймворк в стиле Material Design

Это фреймворк, разработанный компанией Google. Он предназначен для упрощения разработки и включает в себя готовые компоненты, основанные на принципах Material Design.

Он включает в себя сетку, различные аккордеоны, карусели, меню и многое другое. Все компоненты адаптированы под различные разрешения экрана и выполнены в современном стиле. С данным фреймворком можно быстро собирать красивые и современные сайты.

#фреймворк #CSS

Webpack - сборщик модулей JavaScript с открытым исходным кодом

Это многофункциональный сборщик модулей. Основная его задача - компоновать JavaScript код в отдельные файлы для создания модульной архитектуры.

Кроме компоновки JavaScript кода, Webpack также может преобразовывать HTML и CSS-код, работать с изображениями и многое другое. Для него написано большое количество плагинов, которые можно подключать к себе в проект.

#инструмент #javascript

Chart.js - библиотека для работы с графиками

Работа с графиками и данными на чистом JavaScript довольно сложна. Данная библиотека поможет быстро создавать графики любой сложности.

Библиотека включает в себя 8 основных типов графиков и множество их вариаций. Все графики адаптированы и хорошо кастомизируются. Кроме того, есть различные встроенные анимации.

#библиотека #javascript

Gulp.js - таск-менеджер для автоматического выполнения часто используемых задач

Gulp является одним из самых популярных таск-менеджеров на сегодняшний день. Он позволяет минифицировать код и изображения, компоновать файлы по нужным директориям, развертывать проект в новом окружении и многое другое.

Под каждую задачу в Gulp создаются отдельные плагины, которые подключаются в папку с проектом. Сейчас насчитывается более 4000 различных плагинов. Для подключения плагинов и создания своих задач используется JavaScript. Управляется Gulp с помощью командной строки.

#инструмент #javascript

CSS Clip-path maker - сервис для генерации свойства clip-path

CSS-свойство «clip-path» позволяет обрезать фотографии, задний фон и создавать сложные элементы для вашего сайта. Часто новичкам сложно в нем разобраться, но с помощью данного генератора вы легко сможете использовать данное свойство.

На этом сервисе вы сможете перетягиваниями заданного трафарета обрезать изображения. Код генерируется динамически при изменении трафарета. Представлено около 26 различных трафаретов. Изображение можно вставить своё или использовать шаблонное.

#сайт