Front-End Tips — база знаний для облегчения жизни фронтенд-разработчиков

Здесь можно найти как материалы по HTML с CSS, так и по JavaScript и даже macOS

Стоимость: #бесплатно

#web #js #css #html

Vue Cheatsheet — симпатичная шпаргалка по Vue.js

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

Стоимость: #бесплатно

#web #vue #js

Vivid.js — коллекция из более 90 бесплатных наборов SVG-иконок svg с открытым исходным кодом

Они подготовлены таким образом, что их сразу же можно использовать в Sketch или JS-проектах, созданных с помощью React и npm

Что интересно, авторы проекта с удовольствием принимают заявки на создание новых иконок

Стоимость: #бесплатно

#иконки #svg #js

Styled components — одно из популярных решений для написания кода методом CSS in JS

Инструмент лишает вас необходимости использовать className, при этом появляется простая динамическая стилизация и StylisJS «под капотом»

С основами Styled components вас познакомят на главной странице проекта. А дальнейшее его изучение можно пройти с помощью приятной официальной документации

Стоимость: #бесплатно

#css #js #web

Micron.js — библиотека микровзаимодействий, построенная на CSS-анимациях и управляемая мощью JavaScript

С помощью данного инструмента можно добавлять, связывать и управлять взаимодействиями. При этом для вашего удобства имеется уже множество готовых вариантов

Библиотека также позволяет управлять поведением взаимодействия, таким как эффект, скорость и «лёгкость»

Стоимость: #бесплатно

#css #js #open_source

KeyCode Info — инструмент для работы с кодами клавиш для JS-разработчиков

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

Например, с помощью KeyCode Info можно узнать event.location, event.which и т.д

И как вишенка на торте — инструмент распространяется имеет открытый исходный код

Стоимость: #бесплатно

#js #web #open_source

You might not need jQuery — страница, демонстрирующая что на jQuery свет клином не сошёлся

Здесь можно найти огромное количество «фишек» библиотеки, которые реализуются встроенными средствами современных браузеров

Особенно это справедливо для случаев, когда проект не подразумевает поддержку Internet Explorer

Стоимость: #бесплатно

#jquery #js #web

You might not need JavaScript — страница, которая показывает, что бывают случаи, когда можно обойтись и без JS

Вчера мы уже рекомендовали похожий веб-сайт, но для jQuery. Теперь очередь дошла и до JavaScript

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

Стоимость: #бесплатно

#html #js #css

Does it mutate — шпаргалка для понимания, какие методы изменят массив в JS, а какие нет

При этом страница не только помогает понять изменяемость массива при помощи функции, но также и то, как именно ею пользоваться

Приятная мелочь: к каждому примеру есть ссылка на документацию

Стоимость: #бесплатно

#js #web #шпаргалка

HTML Minifier — сервис для лёгкой минимизации HTML, CSS и JS

Работает инструмент достаточно просто: он прогоняет вашу разметку через серию регулярных выражений, написанных на PHP

Минималистичный дизайн проекта помогает пользоваться им, так как не запугивает огромным числом непонятных настроек и пунктов

Стоимость: #бесплатно

#html #css #js

Paper.js — библиотека для создания и работы с векторной графикой

Есть сразу два способа использования библиотеки: вы можете использовать PaperScript или привычный ванильный JavaScript

В свою очередь PaperScript — это тот же JavaScript, в который добавили поддержку математических операторов для объектов point и size

Стоимость: #бесплатно

#js #web #open_source

P5.js — JavaScript-библиотека, ориентированная на творческий кодинг

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

Стоит отметить, что P5.js является бесплатным и имеет открытый исходный код!

Стоимость: #бесплатно

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

CodePen — онлайн-среда для тестирования и обмена фрагментами кода HTML, CSS и JavaScript

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

Стоимость: #бесплатно (но есть платная подписка)

#web #js #html

Van11y — набор доступных скриптов, выполненных на ES2015

Коллекция состоит из настраиваемых, доступных скриптов, в которые входят такие часто используемые «куски» пользовательского интерфейса, как аккордеон, панель вкладок, карусель, всплывающие подсказки, модалы и т.д

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

Стоимость: #бесплатно

#web #js

Turborepo — высокопроизводительная система сборки для JavaScript- и TypeScript-репозиториев

Она переосмысливает методы системы сборки, используемые Facebook и Google, чтобы устранить бремя обслуживания и накладные расходы

Так, Turborepo помогает избегать дублирования кода в базе, смотрит на содержимое имеющихся файлов и отношения между ними и даёт понять, что ещё нужно построить

Система позволяет работать как одному, так и с командой

Стоимость: #бесплатно (но есть платная подписка)

#web #js

JSHint — сервис для обнаружения ошибок и потенциальных проблем в JS-коде

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

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

Стоимость: #бесплатно

#js #помощь

JS Bin — платформа для изучающих ванильный JS, HTML и CSS

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

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

Стоимость: #бесплатно (но есть платные функции)

#js #web #обучение

PrivJs — покупка и продажа премиальных javascript-пакетов

Платформа позволяет как зарабатывать деньги, продавая npm-пакеты, которые вы создали, так и тратить их, покупая чужие разработки

При этом PrivJs также поможет развернуть свои приватные пакеты в CI/CD-средах, таких как Netlify, Vercel, Travis CI и т.д

Стоимость: #бесплатно (но есть платные подписки)

#js #npm

Medusa — инструмент, позволяющий раскрыть весь потенциал вашего интернет-магазина

Платформа разработана для повышения производительности и гибкости вашего проекта

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

Стоимость: #бесплатно

#js #open_source

Mirror Button — кнопка для вашего сайта с отражением пользователя

Реализована подобная «магия» достаточно интересным способом: в кнопку интегрировано видео, которое отображает изображение с камеры пользователя в реальном времени

Проект демонстрирует использование HTML, CSS и JavaScript для создания не самого сложного, но очень оригинального веб-элемента

Стоимость: #бесплатно

#web #HTML #JS