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

Аватар Иван Бирюков

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

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

CSS

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

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

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

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

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

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

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

***

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

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

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

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

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

***

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

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

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

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

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

***

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

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

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

***

JavaScript

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

***

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

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

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

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

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

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

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

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

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

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

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

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

***

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

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

***

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

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

***

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

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

***

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

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

***

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

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

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

***

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

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

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

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

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

***

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

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

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

***

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

***

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

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

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

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

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

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

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

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

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

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

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

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

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 — простой плагин для создания одностраничных сайтов.

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

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

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

TypeScript

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

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

***

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

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

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

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

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

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

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

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

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

JavaScript
Open Source
Веб-разработка
CSS
TypeScript
Awesomo
23891