Pixi JS - библиотека для создания и управления графикой в браузере

Кроссплатформенный 2D-движок с открытым исходным кодом, которая помогает создавать игры и интерактивные веб-сайты на основе анимации. Disney - один из многих, которые используют его для создания своего цифрового контента.

Pixi надежен и прост, поскольку он скрывает функциональность некоторых из самых сложных функций в простой, готовой к использованию библиотеке. Если вы знакомы с Adobe Flash, вам будет проще изучить Pixi.

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

Live server - расширение VS Code для автообновления страницы

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

Он также запускает ваше приложение на локальном сервере. Есть некоторые вещи, которые вы можете протестировать только при запуске приложения с сервера, так что это приятное преимущество.

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

Красивые анимации с bounce.js

Bounce.js - это библиотека JS для создания красивой анимации ключевых кадров на основе CSS3. Инструмент на bouncejs.com позволяет вам создавать статические ключевые кадры, которые можно использовать без какого-либо дополнительного JS, но если вы хотите, чтобы ваше приложение генерировало их на лету, вы можете использовать библиотеку bounce.js.

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

Color Hunt - сервис для выбора цветовых палитр

Color Hunt - это бесплатная и открытая платформа с тысячами цветовых палитр, подобранных вручную. Имеется система лайков, с помощью которой можно сохранить себе цвет и увидеть, какие палитры понравились большинству.

Каждый цвет отображается в формате hex, что облегчает его использование. Есть фильтр где можно выбрать палитры по разным тематикам: закат, зима, лето, рождество, неон, ретро и др.

#сайт #цвета

Sass - метаязык на основе CSS

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

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

#препроцессор #css

React Select - элемент управления Select для React.

Изначально построено для использования в KeystoneJS. Гибкий и красивый элемент управления Select Input для React с поддержкой множественного выбора, автозаполнения, асинхронности и создания.

Он представляет собой совершенно новый подход к разработке мощных компонентов React.js, которые просто работают «из коробки», но при этом легко настраиваются.

#компонент #react

icons8.com - сайт c картинками и иконками

Полезный сервис для разработчиков и дизайнеров, где можно найти бесплатные иконки, картинки, музыку, векторные иллюстрации по категориям. В сайте есть рубрика "Халява дня", которая позволяет скачать платную иконку/картинку/др. бесплатно и блог с полезными статьями.

C помощью сервиса можно создать коллажи, удалить фон картинки, собрать свою векторную иллюстрацию, увеличить качество изображения с помощью искусственного интеллекта.

#сайт #иконки

Высокоскоростная библиотека Pixi.js

Есть несколько библиотек, на которые стоит обратить внимание, если вы хотите создать что-то интерактивное с помощью HTML5 Canvas. В этом уроке мы рассмотрим основы Pixi.js.

Что вы узнаете?
- Преимущества Pixi.js
- Как рисовать базовые фигуры с помощью Pixi.js
- Как добавить формы на холст
- Как использовать moveTo(), lineTo(), pivot.set(), drawCircle(), drawRect() и другие

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

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