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

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

РКН: shorturl.at/qinly
Download Telegram
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
Sketch2Code - сервис для быстрого прототипирования сайта

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

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

#сервис #html
GitLab - система управления репозиториями

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

Особенность GitLab в том, что он больше подходит для работы в больших командах или над большими проектами. В нем переработана система ролей и система доступа к частям проекта для его участников. Ещё в GitLab есть собственный модуль для мониторинга, анализа времени и планирования.

#сервис
Socket.io - библиотека для приложений реального времени

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

Она основана на двух частях - клиентской библиотеке, запускающейся в браузере и серверной для Node.js. У обеих частей одинаковый API. На сайте библиотеки можно найти документацию и примеры работы библиотеки.

#библиотека #javascript
WOW.js - библиотека для создания анимаций при прокрутке

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

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

#библиотека #javascript
Firebase - управляемая платформа бэкенд сервисов от Google

Это онлайн платформа, разработанная компанией Google. С ней вы сможете легко разработать свой проект, без необходимости создавать под него сложный бэкенд.

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

#сервис