Лучшие проекты, в которых стоит поучаствовать, чтобы примкнуть к Open Source движению и развить свои навыки. Часть первая. Веб-разработка

Иван Бирюков

Если вы интересуетесь жизнью Open Source сообщества и хотите к нему присоединиться, то эта серия подборок (которую мы продолжаем пополнять) придётся вам как нельзя кстати, ведь в ней собраны лучшие проекты с открытым исходным кодом. В первой части серии вы найдёте самые интересные Open Source проекты на CSS, JavaScript и TypeScript.

CSS

Bootstrap — самый популярный HTML / CSS / JavaScript-фреймворк для создания отзывчивых и мобильно-ориентированных веб-проектов.

Foundation — самый продвинутый фреймворк для создания отзывчивого фронтенда, позволяющий в кратчайшие сроки писать сайты, которые работают на любых устройствах.

Pure — набор небольших отзывчивых CSS-модулей, которые можно использовать в любом проекте.

Tachyons — функциональный CSS. Позволяет писать пользовательские интерфейсы без CSS.

PostCSS — позволяет изменять стили при помощи JS-плагинов, которые поддерживают переменные, примеси и многое другое.

Animate.css — набор кроссбраузерных анимационных эффектов, отлично подходящих для домашних страниц, слайдеров и просто для создания различных красивостей ?

Material Design Icons — официальный набор иконок от Google, созданных в точности по стандартам Material Design.

Bulma — это современный CSS-фреймворк, основанный на Flexbox.

Hack.css — предельно простой CSS-фреймворк. Отлично подойдёт для создания страниц для ваших Open Source проектов!

CSS Icon — набор иконок, созданных на чистом CSS. Никаких зависимостей.

bttn.css — отличные кнопки для отличных проектов!

aprilFools.css — отличный способ поиздеваться над знакомыми ?

JavaScript

ggraph — инструмент для визуализации графов. Эта библиотека, созданная на базе D3, предназначена для упрощения работы с большими и запутанными графами.

medium-editor — клон редактора WYSIWYG, используемого на сайте Medium.com.

Chart.js — инструмент для создания простых HTML5-диаграмм. Chart.js доступен в двух сборках, Chart.js и Chart.min.js, которые включают в себя Chart.js и библиотеку для парсинга цветов. Если же вам нужно работать со временем, то нужно дополнительно использовать Moment.js.

Moment.js — лёгкая библиотека для любых видов работ с датами.

Clipboard.js — современный подход к копированию текста в буфер обмена. Никакого Flash. Всего 3 КБ в сжатом виде.

D3 — JS-библиотека для визуализации данных, использующая SVG, Canvas и HTML. D3 сочетает в себе мощные техники визуализации и взаимодействия и управляемый данными подход к манипуляции DOM, что позволяет вам максимально использовать возможности современных браузеров.

Reveal.js — фреймворк для создания презентаций при помощи HTML, предоставляющий огромное количество возможностей.

Демонстрация

Impress.js — ещё один фреймворк для создания презентаций, основанный на CSS3-преобразованиях.

Демонстрация возможностей

SweetAlert2 — отличная замена стандартному alert в JavaScript.

Демонстрация возможностей

Video.js — HTML5- и Flash-видеопроигрыватель.

Демонстрация возможностей

Ace — редактор кода, написанный на JavaScript. Он расширяет возможности таких редакторов, как TextMate, Vim и Eclipse, его можно встроить в любую веб-страницу или JS-приложение.

Демонстрация возможностей

Dragula — отличный инструмент для работы с перетаскиваниями контента.

Демонстрация возможностей

Hyper — терминал, написанный на HTML, CSS и JavaScript.

WebTorrent — торрент-клиент для Node.js и браузеров.

PhotoSwipe — JS-галерея для мобильных и настольных версий сайтов.

Docsify — магический генератор сайтов с документацией .

Enzyme — это утилита для тестирования React. Её API интуитивно понятен, поскольку очень похож на jQuery API.

sigma.js — JS-библиотека для построения графов.

eme — элегантный редактор разметки.

async — модуль, предоставляющий мощные функции для работы с асинхронным JavaScript. Его можно использовать как с Node.js, так и в браузере.

Mongotron — графический интерфейс для MongoDB, написанный на Electron и Angular JS.

Three.js — это кроссбраузерная JS-библиотека / API для создания анимированной 3D-графики. Использует WebGL.

A-Frame — это веб-фреймворк для работы с виртуальной реальностью. Сцены создаются при помощи HTML и системы сущностей и работают на мобильных и настольных устройствах, а также на Vive и Rift.

Fabric.js — фреймворк, упрощающий работу с HTML5 Canvas.

socket.io — фреймворк для приложений реального времени.

Express — быстрый, минималистский фреймворк для Node.js.

Grunt — система сборки для JavaScript.

Gulp — потоковый сборщик проектов на JS.

Webpack — это сборщик модулей. Его основной задачей является сборка JS-файлов для использования в браузере.

Ghost — простая и мощная платформа для создания блогов.

Hexo — аналогичный предыдущему фреймворк, использующий Node.js.

Wintersmith — простой и гибкий генератор статических сайтов.

N1 — почтовый клиент, написанный на Electron, React и Flux.

Countly — кроссплатформенная система для аналитики с более чем десятью SDK.

strider — платформа для Continuous Deployment / Continuous Integration. Она написана на Node.JS и JavaScript и использует MongoDB.

yarn — быстрый инструмент для работы с зависимостями.

lodash — современный JavaScript-шаблонизатор.

babel — это транспайлер, переписывающий код стандарта ES6 и выше в ES5-код.

PouchDB — это база данных, созданная под впечатлением от Apache CouchDB и предназначенная для работы в браузере.

Пример использования:

			var db = new PouchDB('dbname');

db.put({
  _id: 'dave@gmail.com',
  name: 'David',
  age: 69
});

db.changes().on('change', function() {
  console.log('Ch-Ch-Changes');
});

db.replicate.to('http://example.com/mydb');

fullPage.js — простой плагин для создания одностраничных сайтов.

PM2 — это менеджер процессов для приложений Node.js с встроенным балансировщиком нагрузки. Он позволяет поддерживать приложения в запущенном состоянии и даже перезагружать их без падений.

TypeScript

TypeScript — сам язык, являющийся надстройкой над JavaScript. В нём добавлены опциональные типы, классы и модули.

Демонстрация возможностей.

Visual Studio Code — редактор кода. Visual Studio Code сочетает в себе простоту редактора кода и мощные инструменты наподобие IntelliSense.

Ionic — фреймворк для создания мобильных приложений, предназначенный для веб-разработчиков.

Stryker — фреймворк для мутационного тестирования JavaScript.

Angular — наследник AngularJS. Angular — это платформа для разработки мобильных и настольных веб-приложений.

Angular Material — компоненты Material Design для Angular 2.