Лучшие проекты, в которых стоит поучаствовать, чтобы примкнуть к 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.

По материалам awesomo