Доброго времени суток, уважаемые хабравчане. Сегодня я хочу поделиться с вами одним небольшим событием — ровно год назад, 15 августа 2013 года я опубликовал свой первый дайджест для веб-разработчиков. С тех пор было опубликовано 25 выпусков и мои подборки обрели некоторую «популярность», а мне приятно ощущать себя «полезным» для хабраобщества.
Немного лирики: за год было пролито не мало переменных, множество потерь среди функций, классов и методов, но в конечном итоге коммиты побеждают баги, на свет появляются новые библиотеки и фреймворки, а веб становится с каждым днем лучше. Мне как человеку повернутому на страсти к таксономии, хочется выделить самые важные события, сервисы и инструменты, которые появились или обрели популярность за это время. Возникло желание наглядно посмотреть на то, как меняется мир веб-раработки. Получился дайджест с большой полезной ссылочной массой и огромным интересным опросником.
Предлагаю всем дополнить эту подборку необходимыми инструментами на ваш взгляд. Пишите в комментариях.
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
Немного лирики: за год было пролито не мало переменных, множество потерь среди функций, классов и методов, но в конечном итоге коммиты побеждают баги, на свет появляются новые библиотеки и фреймворки, а веб становится с каждым днем лучше. Мне как человеку повернутому на страсти к таксономии, хочется выделить самые важные события, сервисы и инструменты, которые появились или обрели популярность за это время. Возникло желание наглядно посмотреть на то, как меняется мир веб-раработки. Получился дайджест с большой полезной ссылочной массой и огромным интересным опросником.
Фронтальная часть
-
JavaScript
- MVC/MVP
- React
- Матрешка
- Riot.js
- Thorax.js
- Ampersand.js
- Mithril.js
- Ripple.js
- PourOver.js (New York Times)
- List.js
- Адаптивная верстка
- Эффекты
- AniJS — декларативные способ описания анимаций.
- Animo.js — динамичная работа с Animation.css
- Parallax.js и Skrollr —
- Onepage-scroll.js и fullPage.js — для разботки сайтов с прокрутокой в один скролл.
- Impress.js и Reveal.js — лучшие движки для презентаций.
- Multiscroll.js — великолепный эффект.
- scrollReveal.js и WOW — «разоблачаем» анимации при скроллинге.
- Textillate.js — мощный инструмент для создания анимации текста.
- Slidr и Slick — лучшие слайдеры.
- Snap.js — самый простой способ сделать меню при смахе (свайп).
- Grid Animation Effects
- Intense Images
- MixItUp
- Velocity.js — ускоряем JS анимации.
- Графика и Моделирование
- DC.js, Epoch.js, Chart.js и Vis.js — лучшие визуализаторы данных.
- Three.js — библиотека для 3D моделирования.
- PhysicsJS и Newton — функциональные физические движки.
- Snap.svg и SVG.js — лучшие решения для работы с SVG.
- randomColor.js — генератор случайных цветов.
- Chroma.js — многофункциональная библиотека для работы с цветом.
- Isomer.js, Obelisk.js — движки для создания изометрических объектов.
- Drawingboard.js — простая в использовании Canvas рисовалка.
- DC.js, Epoch.js, Chart.js и Vis.js — лучшие визуализаторы данных.
- AJAX
- Intercooler.js — декларативный метод использования AJAX
- Echo.js и Infinity.js — лучшая ленивая подгрузка.
- Lazy Ads — ленивая подгрузка для всех рекламных блоков.
- loadCSS
- UI/UX
- InstantClick и FastClick.js — на 300мс ускоряют обработку всех кликов и прикосновений.
- Favico.js — всевозможные манипуляции с отображением favicon
- Typeahead.js, At.js, Auto.js — лучшие решение для автозаполнения.
- Dropzone, imagesLoaded — динамичная загрузка файлов.
- CLNDR.js, Pikaday.js, Rome.js — лучшие календари и датапикеры.
- Picker.js — лучший colorpicker независимый от сторонник библиотек.
- iCheck — кастомные кроссплатформенные радио и чекбокс кнопки для jQuery и Zepto
- Pace.js, Nanobar.js — лучшие прогрессбары.
- Vex — модальные окна 21 века.
- Messenger и PNotify — лучшие уведомления.
- Offline.js — автоматический online/offline индикатор.
- Hopscotch, Shepherd и Intro.js
— пошаговые инструкции к интерфейсу. - Editr.js — HTML/CSS/JS песочника, на подобии CodePen, JSFiddle.
- simpleCart.js — скрипт корзины для интернет магазина.
- SideComments.js — система комментарования как на Medium
- Odyssey — интерактивные история с прявязкой к геолокации.
- Ouibounce — модальные окна для ретаргентинга.
- Spin.js — мощный генератор спинеров.
- Shine.js — функциональный генератор теней.
- Fort.js — прогресс бар для заполнения форм.
- Разное
- Фронт главного сайта The Guardian
- Webshim — всем полифилам полифил
- Knwl.js — находит в тексте даты, время, email'ы, ссылки, адреса и смайлы.
- VerbalExpressions — беззаботные регулярные выражения.
- HTML.js — интересные синтаксис для работы c DOM.
- Moment.js — все что нужно для работый с датой.
- Numeral.js — библиотека для форматирования и манипулирования с числами.
- HTML2PDF, jsPDF — генераторы PDF.
- Math.js и Sylvester — для более функциональной математики в JavaScript.
- Storage — Asynchronous browser storage with multiple back-ends (IndexedDB, WebSQL, localStorage).
- Crossfilter — Fast n-dimensional filtering and grouping of records. от Square
- Jest — Painless JavaScript Unit Testing от Facebook.
- Retext — библиотека для работы с морфологией.
- Smallworld.js — генератор карт на GeoJSON и HTML5 Canvas.
- Lunr.js — полноценный поиск на стороне клиента.
- Fast.js — коллекция наиболее используемых функций в JavaScript.
- Tether — легко и просто привязываем друг к другу абсолютно позиционированные элементы
- Flow.js — выжимает все соки из HTML5 File API
- Keypress — лучший обработчик событий с клавиатуры.
- Hammer.js — лучший обработчик «трогательных» событий.
- Draggabilly — тяни-бросай библиотека на чистом JS.
- LaTeX2HTML5
- Conditioner.js — построен на RequireJS и выполняет JavaScript только в случае соблюдения заданных условий.
- Browserify — JavaScript модули по принципу Node.js в браузере.
- Basket.js — аналог RequireJS с сохранием в localStorage.
- Olly.js — переводит URL в Rich Media (подобно тегу video на хабре).
- Detect.js — определяет все, что только может определить JavaScript о браузере.
- WinJS от Microsoft
- Storage.jslocalForage
- Blast.js — для различных манипуляций с текстом.
- Tracking.js — набор алгоритмов техник компьютерного зрения.
- VIDE.js — легко способ сделать видео-фон.
- PrettyEmbed.js — заставляет видео-вставки выглядеть лучше.
- URI.js — единственный правильный выбор для работы с URL.
- DOMPurify — «дезинфицирует и препятствует XSS».
- Leap.js и Depth.js — программируем веб для Leap Motion и Kinect.
- Tessel — микроконтроллер программируемый на JavaScript.
- Immutable.js — Immutable Data Collections от Facebook.
- Idiomatic.js, Airbnb JavaScript — руководоства по стилю кода.
- JS Must Watch — «Живой список» лучших видео с лекций и конференций по JavaScript.
- Superhero — кладезь полезнейшей информации для JavaScript разработчиков.
- JSNice — умный и обучаемы деобфускатор для JavaScript.
- HTMLHint — анализирует ошибки в HTML.
- Google Traceur Compiler — «JavaScript.next-to-JavaScript-of-today compiler».
- MVC/MVP
-
HTML/CSS
- Animate.css, Effeckt.css, Hover.css — коллекции потрясающих CSS анимаций.
- Stroll — шедевральные эффекты при скролинге.
- Loading и CSS Loaders — лучшие CSS прелоудеры.
- Hint.css — красивые всплывающие подсказки на чистом CSS.
- LESSHAT — пожалуй самая полезная коллекция миксинов для LESS.
- CSS Modal — самые простоые модальный окна.
- Web Starter Kit, Pure, Uikit, Topcoat, Inuit, Flat UI — HTML фреймворки.
- Ratchet, Clank, Ionic — мобильные HTML фреймворки.
- Ink — CSSфреймворк для верстки электронных писем.
- Refills — «расфасованные» паттерны, копоненты, миксины и все самое лучшее из Bourbon, Bitters и Neat.
- Jeet — сетки для людей.
- UCSS/Helium, CSS Raticinator и Shorthand — убираем лишние стили, рационализируем и преображаем CSS.
- Rework — произвольный CSS препроцессор для Node.js и браузеров
- RECESS — линтер/компилер для CSS и LESS от команды Twitter.
- Idiomatic.css — руководство по стилю кода.
- The Elements of HTML — для тех кто чтит семантику.
- Custom Elements и Component Kitchen
Задняя часть
-
NodeJS
- Meteor
- MEAN.js (Mongo, Express, Angular, Node)
- KOAN Stack (Koa, Angular, Node, Mongo, WebSockets)
- Mach.js — лучший путь для построения полностью асинхронного сервера.
- LoopBack — лучшее из Express.
- Gremlins.js — эмулирует случайные действия пользователя для обнаружения ошибок в интерфейсе.
- Scraper.js — великолепный веб-парсер.
- Сollections.js — огромный комплект функций для работы с коллекциями.
- Kraken-js — express-based Node.js web application bootstrapping module by PayPal
- "Sails.js make it easy to build custom, enterprise-grade Node.js apps."
- RethinkDB
- Mongoose — одна из лучших (если не лучшая) ORM для MongoDB
- Sequelize — очень продуманная ORM для SQL-подобных СУБД
- Sharp — самый быстрый npm модуль для изменения размеров JPEG, PNG, WebP и TIFF.
- Grafana — графики и дашборды для самых ненасытных
- NodeBB — качественный современный форум.
- BitcoinJS, Bitcore — библиотеки для работы с Bitcoin.
- Mailin, Nodemailer, Mail.js — библиотеки для работы с email.
- google-api-nodejs-client
- EtherCalc — библиотека для работы с электронными таблицами.
- Groovebasin — музыкальный сервер.
- CryptoJS — коллекция криптографических алгоритмов.
- Epub.js
- JSzip
- Videoconverter.js
-
PHP
- Laravel
- Zephir — Ze(nd Engine) Ph(p) I(nt)r(mediate)
- Stringy — функциональная библиотека для работы со строками.
- Flysystem — инструмент для работы с локальным и удаленными файлами.
- PHP-DI — dependency injection container for humans
- Purl — популярная библиотека для работы с URL.
- Phake — Mocking Framework.
- Elastica — клиент для Elasticsearch.
- Monolog — самая популярная библиотека для логирования.
- Buzz — HTTP клиент.
- PHPMorphy — библиотека для работы с морфологией русского, немецкого и английского языков.
- Parsedown — лучший Markdown парсер на PHP
- Ampache — веб-приложение для аудио и видео стриминга
- Типограф Муравьева
- PHPCI — continuous integration tool.
- Linuxdash — веб-панель для мониторинга на Linux.
- VerbalExpressions — беззаботные регулярные выражения.
-
Python
- HTTPie — command line HTTP client.
- Videogrep — поиск диалогов в видео.
- Inbox — «The next-generation email platform» на Python.
- Mailur — email клиент.
- Arrow — библиотека для работы с датой и временем.
- Sympy — computer algebra system written
- PSDash — Linux web dashboard.
- Py Must Watch — «Живой список» лучших видео с лекций и конференций по Python.
- VerbalExpressions — беззаботные регулярные выражения.
-
Ruby
- Whenever — Cron jobs in Ruby.
- PEAS — Docker and Ruby based PaaS.
- Minicron — система управления и мониторинга Cron Jobs
- Lotus — «полноценный веб-фреймворк для Ruby».
- PgHero — database insights made eas
- PSD.rb — библиотека для работы с .PSD файлами
- Onebody — церковная социальная сеть.
- VerbalExpressions — беззаботные регулярные выражения.
-
Go
- Martini — «Classy web framework for Go».
- Godropbox — комплект библиотек для веб-приложений от Dropbox.
- Goji — минималистчный веб-фреймворк.
- Go-underscore — набор наиболее востребованных функций.
- Beego — фреймворк для высокопроизводительных приложений.
- Gollum — система Wiki построенная на работы с Git.
- Gogs — ваш собственный Git сервис.
- Drone — CI платформа на основе Docker.
Системы управления контентом и генераторы статических сайтов
- Webhook (JavaScript)
- October (PHP & Laravel)
- Cockpit
- Witgy (Python)
- Keystone (JavaScript)
- Docpad (CoffeeScript)
- Metalsmith (JavaScript)
- Wintersmith (CoffeeScript)
- Cactus (Python & Django)
- Редакторы
Приложения, сервисы, утилиты
- Breach — Node.js браузер.
- Cloudconvert — онлайн конвертер, который поддерживает более 150 форматов.
- Ungit — великолепное GUI для Git в вашем браузере.
- OAuth.io — замечательный сервис посвященный OAuth авторизации.
- Cleaver, Remark — слайдшоу для хакеров.
- Автопрефиксер — забудьте о префиксах.
- Kraken — сервис для оптимизации изображений.
- Gitter — чат для гиков.
- Node App — пишем iOS и OSX приложения на NodeJS.
- BrowserSync и FB Flo — для автоперезагрузки браузера при изменении исходных файлов.
- GitBook — утилита для создания документаций.
- Ngrok — самый простой способ поставить локальный веб-сервер.
- Grunt Email Design
- Imacss — переводит все изображения в Data URI и меняет пути в исходных файлах.
- Wraith, Huxley и PhantomCSS — diff tools для изображений.
- JavaScript Code Style checker
- Сборщики
- Генераторы
GUI для сайтостроительства
Напоследок:
- Awesome Awesomeness
- Frontend Dev Bookmarks
- List of Free Learning Resources
- Tools Of TheTrade
- List Of Minimalist Frameworks
- Colour Schemes — огромное количество тем, для множества редакторов.
- Gitignore — огромная коллекция .gitignore шаблонов
- HTML5 Security Cheatsheet — целый сборник XSS примеров.
- Docker — для автоматизации развёртывания и управления приложениями в среде виртуализации.
- Cayley — графическая база данных от Google.
- Dat — система контроля верий при работе с большими данными.
- Outdated browser — cамый изящный способ сообщить пользователю о том, что его браузер устарел.
- Лучшие платные Photoshop плагины для веб-дизайнеров
- Лучшие бесплатные Photoshop плагины для веб-дизайнеров
Предлагаю всем дополнить эту подборку необходимыми инструментами на ваш взгляд. Пишите в комментариях.
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
На каком языке вы программируете?
69.38% JavaScript1366
10.01% Ruby197
49.62% PHP977
18.18% Python358
1.37% Perl27
2.79% Go55
7.11% CoffeeScript140
1.88% TypeScript37
0.71% Dart14
0.46% LiveScript9
13.97% JAVA275
4.93% ASP97
16.3% Другие321
Проголосовали 1969 пользователей. Воздержался 281 пользователь.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Какой JavaScript MVC фреймворк вы используете?
5.6% Ember43
27.34% Backbone210
63.15% Angular485
2.08% Матрешка16
0.39% Riot3
0.26% Mithril2
0% Ripple0
0.26% PourOver2
0.91% ExtJS7
Проголосовали 768 пользователей. Воздержался 961 пользователь.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Какой PHP фреймворк вы используете?
8.29% Zend Framework88
0.85% CakePHP9
6.12% CodeIgnitor65
2.35% Kohana25
9.23% Symfony98
24.76% Yii263
10.83% Laravel115
2.54% Phalcon27
35.03% Не использую фреймворки372
Проголосовали 1062 пользователя. Воздержались 725 пользователей.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
В каком редакторе вы работаете?
33% Sublime Text590
3.08% Eclipse55
40.55% Продукты JetBrains725
10.68% NotePad++191
6.77% NetBeans121
1.34% Atom от GitHub24
2.35% Brackets от Adobe42
0.11% LightTable2
0.06% Lime1
0.17% Zed3
1.9% Vim34
Проголосовали 1788 пользователей. Воздержался 351 пользователь.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Выберите один правильный ответ:
84.55% Git1472
8.67% Mercurial151
6.78% Subversion118
Проголосовал 1741 пользователь. Воздержались 327 пользователей.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Каким вы пользуетесь препроцессором?
24.39% LESS380
24.07% SCSS/SASS375
0.26% Rework4
0.19% Myth3
49.74% Не использую препроцессоры775
1.35% Stulys21
Проголосовали 1558 пользователей. Воздержались 407 пользователей.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Какой вы предпочитаете HTML фреймворк?
65.32% Bootstap1064
4.85% Foundation79
0.25% Topcoat4
0.49% Skeleton8
0.37% Ionic6
0.18% Ratchet3
0.06% Clank1
28.48% Не использую464
Проголосовали 1629 пользователей. Воздержались 393 пользователя.
Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.
Стоят ли на ваших проектах кнопки социальных сетей?
41.74% Нативные402
17.34% Яндекс Блок поделиться167
6.33% AddThis61
3.43% Share4233
6.65% Pluso64
1.14% UpToLike11
23.36% Другие225
Проголосовали 963 пользователя. Воздержались 852 пользователя.