Codepen - среда веб-разработки для разработчиков и интерфейсных дизайнеров

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

Он предлагает создавать компоненты для использования в других местах, включает в себя несколько замечательных функций для более быстрого написания CSS, позволяет просмотр и синхронизацию в реальном времени. Функция Prefill API может добавлять ссылки и демонстрационные страницы без необходимости что-либо кодировать.

#сайт #редактор

ratatype.ru - сайт для тренировки слепой печати

Если хотите увеличить свою производительность при разработке, то этот клавиатурный тренажер поможет Вам. С помощью него, можно научиться быстро печатать и использовать все 10 пальцев.

На платформе можно найти курсы слепой печати для английской раскладки qwerty, дворака, azerty, для испанской, французской, украинской, русской раскладки и частых ошибок в английском языке. В каждом курсе — до 20 уроков, а в каждом уроке — до 25 упражнений. За каждое упражнение можно получить награду. На Ratatype есть удобные группы, в которых можно соревноваться с друзьями.

#сайт #навык

Quokka.js - площадка для JS и TS в редакторе

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

Нужно быстрое место для тестирования JavaScript? Quokka дает вам JavaScript (и TypeScript) блокнот в VS Code. Это значит, что вы можете протестировать кусок кода прямо в вашем любимом редакторе!

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

Tailwind - инструмент для облегчения стилизации

Фреймворк с такими классами, как flex, pt-4, text-center и rotate-90, которые могут быть составлены для построения любого дизайна, непосредственно в разметке.

В отличие от других CSS-фреймворков, таких как Bootstrap или Materialize CSS, он не имеет предопределенных компонентов. Вместо этого Tailwind CSS работает на более низком уровне и предоставляет вам набор вспомогательных классов CSS, которые позволяют разработчику создавать проекты в кратчайшие сроки. Фреймворк имеет почти 40К звезд на Github.

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

Moovie.js - кастомный видеоплеер, написанный на чистом JS без зависимостей

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

В Moovie.js встроена отличная поддержка субтитров WebVTT (.vtt) и SubRip (.srt), также встроена поддержка WebTorrent.

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

Адаптивный интерфейсный фреймворк Foundation

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

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

validator.w3.org - сервис для валидации контента сайта по W3C

Данный сервис был разработан консорциумом всемирной паутины (W3C), который задает стандарты интернета в целом. Он проверяет верстку сайта на соответствие этим стандартам.

Верстку можно проверить по стандартам HTML5 и более ранним (HTML4, XHTML и т.д.). Чтобы это сделать, необходимо ввести ссылку на свой сайт, либо загрузить файл с версткой. Также можно проверить стили CSS.

#сайт #валидация

Font Awesome - шрифт из масштабируемых векторных иконок

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

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

#шрифты

Intellicode - расширение VS Code для улучшения кода

Расширение представляет собой новое поколение технологии автодополнения IntelliSense от Microsoft. На основе ИИ оно прогнозирует API, которое, вероятнее всего, понадобится разработчику, вместо того, чтобы отображать их список в алфавитном порядке.

Расширение формирует список динамически, в зависимости от контекста кода разработчика. Intellicode работает для Python, Java, TypeScript и JavaScript, а также для SQL-кода.

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

Среда веб-разработки для разработчиков и интерфейсных дизайнеров "Codepen"

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

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

Pug - HTML-Препроцессор и шаблонизатор, написанный на js

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

Pug расширяет возможности HTML - он внедряет поддержку Javascript прямо в верстку. С Pug можно использовать переменные, классы функции и другие языковые конструкции для создания шаблонов.

#препроцессор #шаблонизатор #html

Animate.css - библиотека для создания анимации на чистом CSS

Одна из самых известных библиотек для создания анимаций, она кроссбраузерна и проста в установке. Имеет не менее 100 различных плавных анимаций.

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

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

RegExr - сервис для тестирования регулярных выражений

Работа с данным сервисом очень проста - достаточно ввести регулярное выражение и какой-нибудь текст для проверки. Сервис выделит элементы текста, подходящие под написанное регулярное выражение.

В основном поддерживаются языки JavaScript и PHP. Есть панель инструментов для дополнительных настроек, а также создания своих тестов.

#сайт #инструмент

CSSLoad.net - сервис, генерирующий прелоадеры для сайта

На данном сервисе вы найдёте много различных прелоадеров для своего проекта - спиннеры, анимированный текст, 3D-анимации и другое. Все написано на чистом CSS.

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

#сайт

Emba Carousel - библиотека для создания слайдеров-каруселей на JavaScript

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

Карусель основана на технологии CSS Flexbox. Есть большое количество готовых шаблонов. Среди них как стандартные, так и карусели с параллакс эффектом, прогресс-баром и другие.

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

Polacode - расширение VS Code для создания красивых скриншотов своего кода

Самый удобный способ сделать скриншот кода в VS Code, если вам необходимо поделиться с кем-то или куда-то выложить.

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

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

Библиотека для создания анимаций Animate.css

Статья поможет вам начать создавать простые анимации на Animate.css, научит управлять их длительностью и покажет, как делать анимации правильно.

👨🏻‍💻 ИЗУЧИТЬ УРОК | #статья

JParticles - библиотека для создания эффекта частиц на JavaScript

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

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

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