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

Вы не хотите пропустить их

Если вы хотите узнать больше о технологиях, подпишитесь на мой новый канал на YouTube, где я четко и доходчиво объясняю сложные темы, чтобы повысить ваши навыки! → https://www.youtube.com/@litwire

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

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

Реальный мир

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

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

Vue.js + Node/Express или React/Redux + Rust? Они поняли!

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

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

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

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

Лучшая вещь? Читать можно совершенно бесплатно! Это определенно одна из лучших серий о 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, обратите внимание на это!

Контрольный список внешнего интерфейса

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

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

• Голова
• 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.

полная страница.js

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

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

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

Выглядит очень круто, так что зацените!

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

Повышение уровня кодирования

Спасибо, что являетесь частью нашего сообщества! Перед тем, как ты уйдешь:

• 👏 Хлопайте за историю и подписывайтесь на автора 👉
• 📰 Смотрите больше контента в публикации Level Up Coding
• 🔔 Подписывайтесь на нас: Twitter | ЛинкедИн | "Новостная рассылка"

🚀👉 Присоединяйтесь к коллективу талантов Level Up и найдите прекрасную работу