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

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

Realworld

Первый репозиторий в этом списке – Realworld. Его создатели называют его «матерью всех демонстрационных приложений». Realworld является образцовым клоном Medium.com. Репозиторий позволяет вам выбирать между различными реализациями переднего плана и внутреннего интерфейса, которые вы можете легко смешать.

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

You Don’t Know JS Yet

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

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

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

Airbnb JavaScript Style Guide

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

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

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

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

Storybook

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

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

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

HTML5 Boilerplate

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

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

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

Node.js Best Practices

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

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

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

Это определенно отличный репозиторий и источник информации. 

Front-End Checklist

Вы когда-нибудь задавали себе вопрос, что вам нужно иметь или протестировать в веб-приложении перед его запуском? Репозиторий 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 от Alvaro Trigo – это простая и легкая в использовании библиотека, которая позволяет создавать SPA (одностраничные приложения) и слайдеры ландшафта. Он доступен для Vue, React и Angular и полностью адаптивен для мобильных устройств.

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

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