Сайтодел | GitHub, Верстка, Сайты, Вайбкодинг
25.4K subscribers
1.33K photos
104 videos
28 files
2.38K links
FullStack-материалы от Senior-разработчика для WEB-специалистов

Сотрудничество: @CodingLead

РКН: shorturl.at/qinly
Download Telegram
Code Cola - расширение Chrome для визуального редактирования стилей CSS

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

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

#расширение
Popper.js - библиотека для создания всплывающих окон

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

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

#библиотека #javascript
Pixel Perfect - расширение Chrome для качественной верстки

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

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

#расширение
indent-rainbow - расширение VS Code для подсветки вложенностей

Когда мы пишем много кода, бывает сложно его отладить, особенно, если в нем слишком много вложенностей. Indent-rainbow может помочь вам в отладке кода.

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

#расширение #vscode
SVG.js - библиотека для работы с SVG-графикой

Часто новичкам бывает сложно работать c SVG элементами, тем более анимировать их. В этом непростом деле поможет библиотека SVG.js. Это легковесная библиотека, написанная без зависимостей. В сжатом виде она весит всего 16 килобайт.

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

#библиотека #javascript
Backbone.js - фреймворк для разработки сложных веб-приложений

Это JavaScript фреймворк для создания приложений со сложной логикой работы. Например, почтовый сервис Gmail от Google и подобные. Backbone.js основан на шаблоне проектирования MVP. За счет этого, фреймворк упрощает разработку сложных приложений.

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

#фреймворк #javascript
AR.JS - библиотека для работы с дополненной реальностью

Это библиотека, которая позволит вам создавать AR-приложения прямо в браузере. Вы сможете отображать и обнаруживать через камеру пользователя различные созданные вами объекты. Например, вы сможете по отсканированному QR-коду или фотографии отобразить в камере логотип компании.

Для запуска первого простейшего AR-проекта вам достаточно 10 строк HTML кода. Библиотека основана на Three.js, поэтому она может отображать трехмерные объекты и модели через камеру пользователя. Работа с библиотекой проста, поэтому попробовать себя в AR сможет каждый.

#библиотека #javascript
👨🏻‍💻 [УРОК 63] Библиотека для создания 3D графики "Three.js"

Из статьи вы узнаете, что делает библиотека Three.js. Вы разберетесь, как работать с данной библиотекой, создадите простейший 3D объект и анимируете его. А также вы познакомитесь с реальными проектами, реализованными с помощью этой библиотеки.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья
Bideo.js - библиотека для создания фоновых видео

Добавление видеофона на сайт без дополнительных плагинов или библиотек - довольно трудоемкая задача для новичков. Проще воспользоваться готовыми решениями. С помощью Bideo.js вы сможете быстро создать видеофон для вашего сайта.

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

#библиотека #javascript
Faker - расширение VS Code для генерации фейковых данных

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

Faker может генерировать данные практически любого вида - имена, номера телефона, электронную почту, изображения, описания и многое другое. Чтобы сгенерировать данные достаточно в «VS Code» нажать «F1» и ввести «Faker». В выпадающем меню будут предложены все варианты для генерации данных.

#расширение #vscode
CSS Peeper - расширение Chrome для удобного просмотра CSS-кода

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

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

#расширение #css
Mo.js - библиотека для создания motion графики

Создание анимаций - одно из самых сложных занятий для начинающего разработчика. Библиотека Mo.js упрощает этот процесс и делает его не только легким, но и приятным.

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

#библиотека #javascript
GitLens - расширение VS Code для удобной работы с GIT

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

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

#расширение #vscode
CSSShake - библиотека для создания анимаций встряхивания

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

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

#библиотека #css
D3.js - библиотека для визуализации данных

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

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

#библиотека #javascript
GitHub Pages - сервис для хранения статических HTML-страниц

После окончания работы над своим проектом, хочется его куда-нибудь выложить. На такой случай есть отличный хостинг, на котором абсолютно бесплатно можно выложить свой сайт - GitHub Pages.

Чтобы создать свою страницу на GitHub Pages, нужно создать репозиторий на GitHub со своим сайтом, и в настройках доступа активировать такую опцию. На данном сервисе будут работать только статические страницы. Поэтому, если на вашем сайте есть форма отправки данных на почту, то она работать не будет.

#сервис
Astro - генератор статических сайтов, не использующий JavaScript

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

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

#фреймворк #javascript
EinsCMS Modal - библиотека для создания модальных окон

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

Библиотека написана без зависимостей и хорошо документирована. Модальные окна отлично отображаются на любых разрешениях экрана. Кроме того, она нормально работает практически во всех браузерах, даже в IE9. Для модальных окон доступна темная и светлая тема, можно создавать и свои.

#библиотека #javascript
Debuger for Chrome - расширение VS Code для отладки кода

Это расширение поможет вам быстрее отлаживать ваш код в Chrome. Теперь вам не нужно пользоваться console.log для отладки. Debbuger for Chrome делает отладку кода понятной и удобной.

Для отладки через это расширение можно настроить отдельный конфигурационный файл. В нем находятся различные режимы работы и другие настройки. Например, для работы с отладчиком есть 2 возможных режима - «Launch» и «Attach». В первом случае запускается отдельный экземпляр Chrome, во втором - только новая вкладка.

#расширение #vscode
HTML Hint - расширение VS Code для проверки HTML-кода

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

Для этого расширения создается свой конфигурационный файл, в котором прописываются критерии, по которым производится проверка. Например, есть ли в каждом теге «a» атрибут «href». В случае возникновения ошибки, придет сообщение в консоль с указанием строки, в которой она произошла.

#расширение #vscode
AnimXYZ - библиотека для создания анимаций

Это библиотека написана на чистом JavaScript. Библиотека новая, но она уже получила 1.5К звезд на GitHub. AnimXYZ позволяет создавать сложные анимации, путем объединения простых.

Все доступные простые анимации можно посмотреть на сайте библиотеки. Работать с библиотекой можно как через обычный HTML-код, так и с помощью Vue и React. Для того чтобы анимировать элемент, достаточно присвоить класс с названием нужной анимации. Любые встроенные анимации можно объединять и кастомизировать.

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