9 популярных репозиториев на GitHub для каждого веб-разработчика

Полезные инструменты, вдохновляющие примеры и многое другое

Этот пост изначально был опубликован на The Smart Coder.

GitHub - это универсальный магазин для всего, что связано с (веб) разработкой в наши дни. Фреймворки, демонстрации, всевозможные коллекции - на GitHub, наверное, нет ничего, что вы бы не смогли найти. Однако проблема в этом огромном количестве вещей. Есть интересные вещи, о которых вы, вероятно, никогда не услышите просто потому, что доступно так много репозиториев.

Итак, я еще раз решил представить вам некоторые из самых популярных репозиториев GitHub, о которых вы должны знать, каждый из которых имеет не менее ~ 30 000 звезд.

Реальный мир

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

Realworld - образцовый клон Medium.com (да, именно эта платформа, на которой вы, вероятно, сейчас находитесь!). Но не только это. Репозиторий позволяет вам выбирать между различными реализациями внешнего интерфейса и внутреннего интерфейса, которые вы можете с удовольствием смешивать.

Vue.js + Node / Express или React / Redux + Rust? Они его получили!

Realworld показывает, как одно и то же приложение для блога создается практически на любом популярном языке или платформе. Как это круто?

Вы еще не знаете JS

Это хранилище - популярная серия книг Кайла Симпсона, широко известного под псевдонимом Getify. Книги глубоко погружаются в механику JavaScript и охватывают следующие темы:

Начать
Объем и закрытие
Объекты и классы
Типы и грамматика
Синхронизация и асинхронность
ES.Next & Beyond

Лучшая вещь? Это совершенно бесплатно! Это определенно одна из лучших серий о JavaScript, и она действительно помогла мне понять, что такое JS на самом деле. Даже если вы думаете, что хорошо знаете JavaScript - читайте книги! Вы будете удивлены, обещаю.

Руководство по стилю JavaScript для Airbnb

Наиболее разумный подход к JavaScript.

Руководство по стилю JavaScript Airbnb - одно из самых популярных и часто используемых руководств по стилю. Он помогает вам писать лучший JS-код и особенно полезен в командах и в сочетании с ESLint.

Вот пример из документации относительно использования const вместо var:

// bad
var a = 1;
var b = 2;

// good
const a = 1;
const b = 2;

Сборник рассказов

Storybook - это среда разработки UI-компонентов. Он позволяет просматривать библиотеку компонентов, просматривать различные состояния каждого компонента, а также в интерактивном режиме разрабатывать и тестировать компоненты. Он поддерживает React, Vue, Angular, React Native, Ember, веб-компоненты и многое другое!

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

Вы можете найти несколько отличных примеров здесь.

Шаблон HTML5

HTML5 Boilerplate - профессиональный и один из самых популярных интерфейсных шаблонов в Интернете. Он помогает создавать быстрые, надежные и адаптируемые веб-сайты или приложения. Его используют такие компании, как Microsoft, NASA и Nike.

Вот некоторые из ключевых особенностей:

HTML5 готов.
Создан с учетом прогрессивных улучшений.
Включает: Normalize.css, jQuery и Modernizer
Конфигурации, улучшающие производительность и безопасность веб-сайта.
Запросы CSS-меток-заполнителей.
Стили печати по умолчанию, оптимизированные для производительности.
Оптимизированная версия фрагмента кода Google Universal Analytics.

Лучшие практики Node.js

Этот репозиторий представляет собой исчерпывающий набор различных передовых практик разработки на Node.js. В настоящее время он состоит из более чем 80 передовых практик, руководств по стилю и архитектурных советов.

Вы можете найти информацию о:

Практика структуры проекта
Методы обработки ошибок
Практика стиля кода
Тестирование и общие методы обеспечения качества
Переход к производственной практике
Практика безопасности
Практика исполнения

Это определенно отличный репо и источник информации. Если вы занимаетесь разработкой Node.js, обратите внимание на этот!

Контрольный список Front-End

Вы когда-нибудь спрашивали себя, что вам нужно иметь или протестировать в своем веб-приложении перед его запуском? Репозиторий Front-End Checklist поможет вам!

Многие из перечисленных пунктов являются обязательными для большинства проектов и организованы следующим образом:

Голова
HTML
Веб-шрифты
CSS
Изображений
JavaScript
Безопасность
Представление
Доступность
SEO
Переводы

Вот пример метаданных Apple Web App:

<!-- Apple Touch Icon (at least 200x200px) -->
<link rel="apple-touch-icon" href="/custom-icon.png">

<!-- To run web application in full-screen -->
<meta name="apple-mobile-web-app-capable" content="yes">

<!-- Status Bar Style (see Supported Meta Tags below for available values) -->
<!-- Has no effect unless you have the previous meta tag -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">

NW.js

NW.js - это среда выполнения приложения, основанная на Chromium и node.js. Вы можете писать собственные приложения на HTML и JavaScript с помощью NW.js. Он также позволяет вам вызывать модули Node.js непосредственно из DOM и открывает новый способ написания собственных приложений со всеми веб-технологиями.

Вот некоторые из ключевых особенностей:

Приложения, написанные на современных HTML5, CSS3, JS и WebGL.
Полная поддержка API-интерфейсов Node.js и всех сторонних модулей.
Хорошая производительность: Node и WebKit работают в одном потоке.
Легко упаковывать и распространять приложения.
Доступно в Linux, Mac OS X и Windows.

fullPage.js

FullPage.js Альваро Триго - это простая и удобная в использовании библиотека, которая позволяет создавать SPA (одностраничные приложения) и слайдеры с альбомной ориентацией. Он доступен для Vue, React и Angular и полностью адаптирован для мобильных устройств.