22 декабря 2020

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

Более 7 лет работы в IT-сфере. Системное администрирование, frontend разработка, написание скриптов на Python.
Любой программист со временем обрастает набором инструментов, но если вы только начинаете обучение на веб-разработчика, их придется искать. Мы собрали список наиболее интересных репозиториев GitHub, который будет полезен не только новичкам.
🕸 Обучение веб-разработке: 20 репозиториев GitHub, о которых должен знать каждый

Веб-разработчикам приходится использовать разные технологии, а значит им нужно знать более одного языка программирования и владеть множеством инструментов. GitHub – это огромное пространство ресурсов для решения любых задач.

Какие бывают репозитории Github

В январе 2020 года на GitHub было более 40 млн. пользователей и более 190 млн. репозиториев. Кроме различных версий ПО репозитории GitHub содержат и другую полезную информацию для разработчиков. Там можно найти самые разные ресурсы:

  • инструменты тестирования;
  • фрагменты кода;
  • советы;
  • концепции программирования;
  • базы знаний;
  • примеры;
  • справочники;
  • руководства;
  • шаблоны;
  • демонстрации;
  • книги;
  • среды разработки;
  • чеклисты;
  • библиотеки.

Наиболее интересные для веб-разработчиков мы собрали в этой статье.

Если вам нужно систематизировать и обслуживать собственный репозиторий Git, читайте статью «Спаси щеночка – держи свои git-репозитории в чистоте».

Big List of Naughty String

Пример, когда вы пытаетесь твитнуть пространство нулевой ширины (U + 200B) в Twitter.
Пример, когда вы пытаетесь твитнуть пространство нулевой ширины (U + 200B) в Twitter.

«Большой список непослушных строк» – это постоянно развивающийся набор примеров, которые с высокой вероятностью вызовут проблемы при пользовательском вводе. Репозиторий полезен как для ручных, так и для автоматизированных тестов веб-приложений.

Назначение: автоматизированное и ручное тестирование, QA.

Содержание: список проблемных строк пользовательского ввода.

30 Seconds of Code

Код JS, который позволяет копировать текст в буфер обмена одним нажатием кнопки
Код JS, который позволяет копировать текст в буфер обмена одним нажатием кнопки

Этот репозиторий содержит короткие фрагменты кода JavaScript на все случаи жизни: от конвертации из градусов Фаренгейта в градусы Цельсия, до подсчета дней недели между двумя датами.

Назначение: программирование на JavaScript.

Содержание: фрагменты кода.

CSS Protips

Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и начать оформление элементов с чистого листа.
Сброс CSS помогает обеспечить согласованность стилей между различными браузерами и начать оформление элементов с чистого листа.

Репозиторий CSS protips включает множество советов, которые помогут улучшить навыки работы с CSS. Приемы из него можно использовать сразу же, а контент переведен на 16 языков, включая русский.

Назначение: оформление и дизайн.

Содержание: советы по работе с CSS.

33 JS Concepts

33 JS Concept содержит концепции, которые должен знать каждый программист на JavaScript. В репозитории есть видео и статьи материал будет полезен как начинающим, так и опытным разработчикам. Репозиторий переведен на двадцать языков, включая русский.

Назначение: изучение JavaScript.

Содержание: статьи и видео.

A List of Useful Resources for Front-End Developers

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

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

Назначение: изучение Frontend.

Содержание: список обучающих материалов, статей и ресурсов.

WTFJS

JavaScript – довольно забавный язык с хитрыми деталями. Некоторые из них могут быстро превратить вашу повседневную работу в ад, а другие просто рассмешить. В этом репозитории есть список безумных примеров кода на JavaScript, которые должен знать каждый веб-разработчик.

Например, когда true это false: 
        !!"false" == !!"true"; // -> true
!!"false" === !!"true"; // -> true

// истина – это «true» и представлена ​​значением 1 (число), «истина» в строковой форме – это NaN.
true == "true"; // -> false
false == "false"; // -> false

//false – это не пустая строка, поэтому это истинное значение
!!"false"; // -> true
!!"true"; // -> true
    

Первоначальная идея WTFJS принадлежит Брайану Леру. Проект вдохновлен его докладом "WTFJS" на dotJS 2012.

Назначение: изучение тонкостей JS.

Содержание: список WTF-примеров JavaScript.

Awesome

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

Awesome, один из самых популярных репозиториев по всем темам от разработки программного обеспечения до железа и бизнеса. У него более 123000 звезд на GitHub.

Назначение: изучение веб-программирования и не только.

Содержание: обширная база знаний.

JavaScript Algorithms and Data Structures

Пример красно-черного дерева
Пример красно-черного дерева

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

Назначение: изучение алгоритмов.

Содержание: справочник с примерами.

Clean Code JavaScript

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

Репозиторий вдохновлен книгой Роберта Мартина «Чистый код». Если вам не нравятся книги, этот репо для вас! Он содержит руководство по созданию читаемого, тиражируемого и рефакторизируемого программного обеспечения на JavaScript.

Назначение: обучение способов написания чистого, читаемого и тиражируемого кода.

Содержание: руководство с примерами.

Free-for.dev

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

Репозиторий GitHub, в котором перечислены ресурсы с бесплатными уровнями для разработчиков. Тут есть сервисы электронной почты, CI/CD, мониторинга, DNS, хостинга и т. д. Список предназначен только для предложений «как услуга», а не для программного обеспечения.

Назначение: поиск бесплатных сервисов.

Содержание: список бесплатных для разработчиков сервисов.

HTML5 Boilerplate

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

Профессиональный шаблон для веб-разработчиков. Некоторые из его функций объединены в упорядоченный предустановленный код. Разработчики обычно загружают этот шаблон в виде файла .zip.

После загрузки HTML5 Boilerplate скопируйте его в папку проекта и настройте в соответствии с вашими требованиями. Это защитит вас от беспорядка при запуске проекта и сэкономит время.

Назначение: создание сайта.

Содержание: шаблон HTML5.

RealWorld

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

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

Назначение: выбор инструмента.

Содержание: примеры полнофункциональных блоговых приложений на базе различных фреймворков.

You Don't Know JS Yet

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

В этой серии бесплатных книг подробно рассматриваются основные элементы языка JavaScript:

  • объекты и классы;
  • типы и грамматика;
  • синхронизация и асинхронность;
  • ES.Next & Beyond.

Назначение: изучение JS.

Содержание: серия книг для бесплатного чтения и скачивания.

Storybook

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

Storybook – среда разработки компонентов пользовательского интерфейса. Поддерживает React, Vue, Angular, React Native, Ember и т. д.

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

Назначение: разработка и тестирование компонентов.

Содержание: среда разработки пользовательского интерфейса.

NW.js

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

NW.js – это среда выполнения приложений на основе node.js и Chromium. Ранее она была известна как проект «node-webkit».

Назначение: разработка и тестирование HTML и JavaScript.

Содержание: среда выполнения приложений.

Front-End Checklist

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

Исчерпывающий список всех элементов, которые стоит проверить перед запуском веб-сайта в производство. Он основан на многолетнем опыте фронтенд-разработчиков и дополнен некоторыми другими контрольными списками с открытым исходным кодом.

Назначение: проверка перед запуском сайта.

Содержание: чеклист.

Airbnb JavaScript Style Guide

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

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

Назначение: обучение созданию хорошего JS-кода.

Содержание: руководство.

fullPage.js

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

fullPage.js – это библиотека для создания полноэкранных веб-сайтов с прокруткой. Она поддерживает CSS3 и все современные браузеры, включая мобильные, а также некоторые старые, вроде Internet Explorer 9 и Opera 12.

Если вы создаете приложение с открытым исходным кодом под совместимой с GNU GPL v3 лицензией, использовать fullPage можно в соответствии с условиями GPLv3. Для коммерческих разработок лицензию нужно покупать.

Назначение: создание веб-сайтов с полноэкранной прокруткой.

Содержание: библиотека.

Node.js Best Practices

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

Подборка контента по практикам Node.js. В репозитории представлен передовой опыт разработчиков и способы интеграции Node.js с другими инструментами, вроде Docker и Kubernetes. Он содержит более 80 лучших практик, руководств по стилю и архитектурных советов.

Назначение: изучение Node.js.

Содержание: подборка руководств.

App Ideas Collection

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

У разработчиков тоже иногда бывает «писательский блок». App Ideas Collection решит проблему раз и навсегда. Это не просто список проектов, а сборник с подробными описаниями, на основе которых можно создать собственную разработку с нуля.

Назначение: поиск идей для проекта.

Содержание: сборник проектов.

Не только версии

Все перечисленные репозитории можно разделить на несколько групп:

Учебные материалы, справочники, базы знаний:

Сервисы и инструменты:

Шаблоны и среды разработки/тестирования:

Надеемся, вам пригодится что-то из этого списка. Также рекомендуем ознакомиться с ТОП-30 интересных и красиво оформленных проектов GitHub для обучения.

Больше полезной информации вы можете найти на наших телеграм-каналах «Библиотека фронтендера» и «Библиотека пхпшника».
***

Мне нужно оперативно погрузиться во фронтенд. Какой вариант самый быстрый и качественный?

Если 15 лет назад для того, чтобы называть себя фронтенд-разработчиком достаточно было знать HTML, CSS и JavaScript, то сейчас фронтенд-разработка почти не отстает от бэкенд-разработки по количеству фреймворков и сложности стеков. Самый быстрый и качественный вариант — получить знания из первых рук от преподавателей со стажем. Поэтому мы запустили курс «Frontend Basic: принцип работы современного веба», на котором вы:

  • освоите стек технологий, который позволит начать работать в любой компании на любом проекте;
  • сверстаете свой первый адаптивный макет с учетом семантики и множества декоративных элементов на HTML и CSS;
  • поймете, как с помощью JavaScript разрабатывать пользовательские интерфейсы;
  • разберетесь, как JavaScript используется в работе с backend и создадите свой первый обмен данными сервером;
  • углубитесь в более сложную разработку на React.js и напишете свой интернет-магазин;
  • изучите основные команды для работы с GIT, важнейшего инструмента для работы в любой команде.

МЕРОПРИЯТИЯ

Комментарии

ЛУЧШИЕ СТАТЬИ ПО ТЕМЕ