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

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

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

#сервис
GitHub Copilot - сервис на основе искусственного интеллекта для проверки и улучшения кода

Это совместный проект от Microsoft и OpenAI. Сервис просматривает ваш код и дает рекомендации по его улучшению, на основе технологии искусственного интеллекта.

Copilot просматривает существующий код, комментарии к коду и положение курсора. На основе этих данных он предлагает добавить одну или несколько строк кода. Пока что лучше всего Copilot работает с JavaScript/TypeScript и Python.

#сервис
PHP Intelephense - расширение VS Code для автодополнения PHP-кода

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

Кроме интуитивного автодополнения PHP-кода, в расширение встроены функции дополнения HTML, CSS и JavaScript-кода. Также доступны функции быстрого форматирования кода и удобного поиска символов через горячие клавиши.

#расширение #vscode
Laravel - PHP-фреймворк для разработки веб-сайтов

Это один из самых популярных фреймворков для разработки веб-приложений. Он написан на PHP, абсолютно бесплатный и позволяет быстро разрабатывать сложные коммерческие проекты.

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

#фреймворк #php
TensorFlow.js - библиотека для создания моделей машинного обучения

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

На TensorFlow.js создают текстовых и голосовых ассистентов, приложения ‎для отслеживания жестов пользователей и многое другое. На эту библиотеку уже было написано огромное множество уроков и статей. К тому же на сайте есть хорошая документация.

Сайтодел | #библиотека #javascript
👨🏻‍💻 [УРОК 64] Библиотека для создания push уведомлений push.js

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

📘 ИЗУЧИТЬ УРОК | 📚 ВСЕ УРОКИ | #статья
CSSNano - инструмент для минификации CSS-кода

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

CSSNano содержит более 30 плагинов, которые помогут сжать ваш код ещё сильнее. Вы можете сами контролировать степень сжатия ваших файлов с помощью встроенных функций инструмента.

Сайтодел | #инструмент #css
HTML5Boilerplate - фронтенд-шаблон для создания веб-приложений

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

В этом шаблоне собраны все лучшие инструменты для адаптивной кроссбраузерной разработки. HTML5Boilerplate включает в себя инструменты для сброса всех встроенных стилей браузера, настройки Apache и многое другое.

Сайтодел | #инструмент
REST Client - расширение VS Code для тестирования API

Это расширение сможет значительно упростить работу с API, заменив несколько инструментов одним. Расширение уже имеет больше 1.5 миллиона скачиваний и довольно высокий рейтинг.

REST Client позволяет прямо из вашего редактора кода отправлять HTTP-запросы и просматривать ответы на них. Для отправки запросов используются простые и короткие синтаксические конструкции.

Сайтодел | #расширение #vscode
Chartist.js - библиотека для создания графиков

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

Chartlist весит всего 10КБ и содержит только 3 типа графиков - Line, Bar и Pie. Этого достаточно для большинства простых проектов. Кроме того все графики адаптируются под любые разрешения экрана любых браузеров. Для отрисовки графиков используется SVG.

#библиотека #javascript
Remote SSH - плагин VS Code для удаленного подключения

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

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

Сайтодел | #расширение #vscode
Figma - инструмент для прототипирования веб-сайтов и приложений

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

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

Сайтодел | #инструмент
Haml - HTML-препроцессор и шаблонизатор

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

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

Сайтодел | #инструмент #html