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

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

РКН: shorturl.at/qinly
Download Telegram
​Большей части руководителей в 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 позволяет загрузить фотографию вашего макета и наложить её на вашу верстку в браузере, чтобы вы могли видеть все расхождения между ними. Фотография остается на своем месте при любом обновлении страницы, так что вы сможете легко работать над своими проектами.

#расширение
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