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

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

РКН: shorturl.at/qinly
Download Telegram
Webpack - сборщик модулей JavaScript с открытым исходным кодом

Это многофункциональный сборщик модулей. Основная его задача - компоновать JavaScript код в отдельные файлы для создания модульной архитектуры.

Кроме компоновки JavaScript кода, Webpack также может преобразовывать HTML и CSS-код, работать с изображениями и многое другое. Для него написано большое количество плагинов, которые можно подключать к себе в проект.

#инструмент #javascript
Chart.js - библиотека для работы с графиками

Работа с графиками и данными на чистом JavaScript довольно сложна. Данная библиотека поможет быстро создавать графики любой сложности.

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

#библиотека #javascript
Gulp.js - таск-менеджер для автоматического выполнения часто используемых задач

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

Под каждую задачу в Gulp создаются отдельные плагины, которые подключаются в папку с проектом. Сейчас насчитывается более 4000 различных плагинов. Для подключения плагинов и создания своих задач используется JavaScript. Управляется Gulp с помощью командной строки.

#инструмент #javascript
CSS Clip-path maker - сервис для генерации свойства clip-path

CSS-свойство «clip-path» позволяет обрезать фотографии, задний фон и создавать сложные элементы для вашего сайта. Часто новичкам сложно в нем разобраться, но с помощью данного генератора вы легко сможете использовать данное свойство.

На этом сервисе вы сможете перетягиваниями заданного трафарета обрезать изображения. Код генерируется динамически при изменении трафарета. Представлено около 26 различных трафаретов. Изображение можно вставить своё или использовать шаблонное.

#сайт
Three.js - библиотека для создания 3D графики

Это легковесная и кроссбраузерная JavaScript библиотека, которая открывает невероятные возможности для создания графики в браузерах.

С помощью Three.js можно создавать 3D объекты, анимации и даже игры. Для создания 3D графики, Three.js использует технологию WebGL. На сайте библиотеки можно найти сотни примеров ее использования.

#библиотека #javascript
Leaflet - JavaScript библиотека для создания интерактивных карт

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

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

#библиотека #javascript
Slick Slider - JQuery плагин для создания слайдеров

C помощью Slick Slider вы сможете быстро начать создавать слайдеры различной сложности, используя JQuery.

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

#библиотека #javascript
​Большей части руководителей в IT-сфере не хватает определенных навыков и компетенций в области управления коллективом и командой, несмотря на наличие опыта и знаний. И где искать ответы на вопросы, касаемо эффективным управлением командой?

Ответ на мероприятии, которое пройдет 31 мая в 19:00! Леонид Новожилов и Екатерина Тышковская в открытом лектории расскажут, что нужно сделать в первую очередь, став руководителем IT команды.

Зарегистрироваться можно по ссылке - https://macs.school/events/2245/
👨🏻‍💻 [УРОК 62] Webpack - сборщик модулей JavaScript с открытым исходным кодом

Из статьи вы узнаете, что такое Webpack и зачем он нужен. Вы сможете настроить Webpack для своего проекта и научитесь реализовывать модульную структуру проекта, а также познакомитесь с некоторыми возможностями Webpack.

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья
Swiper - сенсорный слайдер для сайта на JavaScript

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

Swiper использует технологию flexbox для отображения слайдов, что позволяет создавать гибкие и адаптивные слайдеры. Также он использует технику ленивой загрузки для ускорения загрузки страницы. Кроме того, он полностью бесплатный.

#библиотека #javascript
Eslint - статический анализатор кода для JavaScript

Этот инструмент будет анализировать ваш JavaScript код на наличие синтаксических и семантических ошибок и заранее о них предупреждать.

Eslint может вас заранее предупредить о наличии в коде выводов в консоль, бесконечных циклах, дубликатах и многом другом. Написан он на Node.js и устанавливается через npm. Eslint очень широко настраивается. Можно самому определять, о каких ошибках Eslint будет предупреждать - все делается через конфигурационный файл .eslintrc.

#библиотека #javascript
Howler.js - библиотека для удобной работы со звуком

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

Библиотека написана без зависимостей и в сжатом виде весит всего 7KB. Она поддерживает все современные кодеки и работает на всех возможных платформах. На сайте библиотеки можно ознакомиться с документацией и начать работу с Howler.

#библиотека #javascript
Push - JS-библиотека для создания push уведомлений

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

Библиотека легко подключается и хорошо настраивается. Можно регулировать длительность уведомления, время его появления и многое другое. На сайте библиотеки можно ознакомиться с хорошо проработанной документацией, которая поможет вам разобраться со всеми её тонкостями.

#библиотека #javascript
Gatsby - генератор статических сайтов

Это React-фреймворк для создания быстрых статических веб-страниц. Gatsby относительно прост в использовании, поддерживает технологию PWA, работает с любыми CMS.

Создаваемые сайты на Gatsby являются React-приложениями. Однако для использования Gatsby можно даже, не зная React и слабо разбираясь в программировании. Примеры сайтов можно посмотреть на официально сайте. Там же можно ознакомиться с документацией.

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

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

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

#библиотека #javascript
Vivify - CSS-библиотека для создания анимаций

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

В составе библиотеки более 60 различных анимаций. На сайте библиотеки вы сможете сразу попробовать любую из них в действии. Можно настраивать их длительность и задержку, а также можно делать их бесконечными.

#библиотека #CSS
Code Cola - расширение Chrome для визуального редактирования стилей CSS

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

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

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

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

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

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

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

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

#расширение