Chrome DevTools - инструмент для облегчения веб-разработки

Chrome по-прежнему является популярным браузером, он имеет инструменты разработчика прямо в браузере, и они готовы к вашим потребностям в веб-разработке. Инструменты предназначены для отладки JavaScript, применения стилей к элементам HTML, сообщений, указывающих, как работает оптимизации скорости веб-сайта.

Использование инструментов для разработчиков Chrome бесплатно, а также поддержка доступна через активное сообщество DevTools.

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

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

Всегда проще что-то спроектировать, когда заложены основы. Foundation использует этот подход, предлагая «семейство гибких интерфейсных фреймворков», которые можно применять для дизайна веб-сайтов и электронной почты, и каждая из них настраивается для получения нужного вида. Disney, HP, Amazon, Adobe используют этот фреймворк.

Он предлагает серию HTML-шаблонов, каждый из которых оптимизирован для конкретного приложения, например для блога или веб-сайта о недвижимости. Затем это может быть расширено с помощью «строительных блоков», которые добавляются на веб-сайт. Разработчики сервиса постоянно добавляют новые ресурсы, фрагменты кода и HTML-шаблоны.

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

lodash.com - библиотека JS

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

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

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

Prettier - расширение для форматирования кода

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

Prettier поддерживает много языков: JS, TypeScript, Flow, JSX, JSON, CSS, GraphQL, Markdown, интегрируется с большинством редакторов, такими как Atom, VS Code, Sublime Text, Espresso, Nova и др.

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

10 полезных хитростей Chrome DevTools

Сегодняшняя статья о Chrome DevTools. Это набор инструментов веб-разработчика, встроенных непосредственно в браузер Google Chrome. Ты узнаешь о 10 полезных хитростях этого инструмента.

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

Npm - менеджер пакетов Node для JS

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

Когда вы работаете над проектом JavaScript, вы можете использовать npm для установки пакетов кода других людей в свой собственный проект. Любой проект JavaScript может использовать npm для извлечения пакетов с существующим кодом.

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

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