Написать пост

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

Следите за новыми постами
Следите за новыми постами по любимым темам
24К открытий24К показов