- PVSM.RU - https://www.pvsm.ru -
Доброго времени суток, уважаемые читатели. За последнее время я увидел несколько интересных и полезных инструментов/библиотек/событий, которыми хочу поделиться с Хабром.
Репозиторий с самыми актуальными вопросами на собеседовании на позицию фронтенд разработчика. Проект от команды знаменитого HTML5 Boilerplate и набрал уже более 7500 тысяч звезд на GitHub.
[2]
В «Америках» почему-то часто критикуют веб-стандарты и работу консорциума W3C в целом. Но не знаю как вас, а меня современные возможности очень даже радуют, особенно когда я вижу их реализацию. Встречайте P2P сервис для передачи файлов, основанный на технологии WebRTC и Firebase. Это веб аналог яблочного AirDrop. Лично я открыл оффлайновый учебник «Постройка.ру» по HTML лет 7-8 назад и по сравнению с тем, что мы видим сейчас — это небо и земля. Даже невзирая на объем и некоторую путаницу в спецификациях.
А у нас самые матерые гики обычно ругают PHP. Я эту позицию не разделяю и на ум приходит коммунистическое «каждый по способностям, каждому по потребностям» хоть и в совершенно другом смысле. Язык остается простым для понимания и популярным, а теперь на нем еще можно будет писать приложения под Mac OS, Windows и Linux. Nightrain написан на Python и по своей сути является упаковщиком PHP/HTML/CSS/JS проектов в десктопные версии. В качестве БД используется SQLite3. Любые серверные и клиентские фреймворки в вашем распоряжении.
[4]
Качественный текстовый редактор для современных браузеров (Opera 12+, Firefox 3.5+, Safari 5+, Chrome 9+ и IE9+). Вообще тот же принцип пожертвования кроссбраузерности ради функционала использовали и разработчики Quill, о котором я уже писал, и который по факту является более способным решением. Squire легкий (35кб), шустрый, простой и имеет свой API. Решил упомянуть его, потому что за последнее время он набрал свою аудиторию, как и похожий Wysihtml [5], и не похожий Dante [6], который позаимствовал идею редактирования у блог-платформы Medium.
[7]
Я убежден считать, что это лучшая библиотека для реализации Excel подобных таблиц в вебе. Автор проект не стесняясь перечислил все похожие библиотеки и утверждает, что в них нет ничего, чего бы не было в Handsontable. Библиотека предоставляет огромный API, который позволит сделать и настроить что угодно и как угодно. Более 50 обработчиков событий. Ряд плагинов c Backbone, Angular, тепловыми картами, графиками, комментариями и др.
[8]
Крутые векторые иконки от команды Злых Марсиан и подробный пост [9] о том, как они это делали.
[10]
Простой, функциональный и масштабируемый плеер для веба.
[11]
jQuery плагин для выбора времени. Блестящее UI/UX-решение и его реализация. Вместо классического поля со стрелками, время выбирается на настоящих часах, перетягиванием стрелок.
<div class="input-group clockpicker">
<input type="text" class=
"form-control" value="09:30">
<span class="input-group-addon">
<span class="glyphicon
glyphicon-time"></span>
</span>
</div>
<script type="text/javascript">
$('.clockpicker').clockpicker();
</script>
[12]
Предназначение этого скрипта понятно из названия — определение человеческих лиц на фотографиях. Существует как плагин для jQuery и Zepto. Работает на ура.
<script>
$('#picture').faceDetection({
complete: function (faces) {
console.log(faces);
}
});
</script>
[13]
Относительно недавно на свет появился отличный сайт нацеленный на общение разработчиков обо всем айтишном. Не подумайте, это не клон StackOverflow с какими-то своими фичами, это скорее Quora для гиков. На CareerDean уже успели завести аккаунт самые крутые чуваки из западной ИТ тусовки.
Друзья бэкендеры! Я думаю всем известно, что свои подборки я делаю полностью на альтруизме. Я всегда прошаривал кучу сайтов, чтобы мне всегда было удобно работать. А в один момент я решил делиться найденным материалом. Со временем подборки обрели некую популярность и значительно расширились в плане содержания. Отныне я буду четко структурировать блок «Напоследок», дабы людям не приходилось искать нужное. Для того чтобы разделы не были голыми и всегда наполнялись актуальной информацией, мне требуется ваша помощь. И проблема не только во времени, но и в компетенции. В плане бэкенда я скорее теоретик, чем практик.
Пхпшник, рубист, питонист, гоущик, если ты уже мониторишь GitHub Trending, Reddit, HackerNews или Twitter в поисках интересностей и полезностей по своей теме, если найденное определенно имеет ценность, но не заслуживает внимание целого поста, если тебе не трудно раз в неделю/в две недели в зависимости от материала делиться парой килобайт ссылочной массы, то напиши мне в личку или любую соц. сеть из профиля. Писанина в основной раздел по желанию. Имя или контакты волонтеров в каждом посту обязательно будут указаны.
Предыдущая подборка (Выпуск 34) [184]
Приношу извинения за возможные опечатки. Если вы заметили проблему — напишите, пожалуйста, в личку.
Спасибо всем за внимание.
Автор: ilusha_sergeevich
Источник [185]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/77794
Ссылки в тексте:
[1] Front-end Job Interview Questions: https://github.com/h5bp/Front-end-Developer-Interview-Questions
[2] ShareDrop: https://github.com/cowbell/sharedrop
[3] Nightrain: https://github.com/naetech/nightrain
[4] Squire: https://github.com/neilj/Squire
[5] Wysihtml: https://github.com/Voog/wysihtml
[6] Dante: https://github.com/michelson/Dante
[7] Handsontable: https://github.com/handsontable/handsontable
[8] Evil Icons: https://github.com/outpunk/evil-icons
[9] пост: http://habrahabr.ru/post/245583/
[10] Clappr.js: https://github.com/globocom/clappr
[11] ClockPicker.js: https://github.com/weareoutman/clockpicker
[12] Facedetection.js: https://github.com/jaysalvat/jquery.facedetection
[13] CareerDean: https://www.careerdean.com/
[14] The State of JavaScript in 2015: http://bit.ly/1wTdb7o
[15] Cookieless cookies: http://bit.ly/12wJ2yE
[16] Introduction to Service Worker: http://bit.ly/1skuJE0
[17] Understanding Delegated JavaScript Events: http://bit.ly/1Gf9AmH
[18] Getting Started with JavaScript for Automation on Yosemite: http://bit.ly/1AibaAr
[19] Everybody Scrolls: http://hugeinc.com/ideas/perspective/everybody-scrolls
[20] Enhancing User Experience With The Web Speech API: http://www.smashingmagazine.com/2014/12/05/enhancing-ux-with-the-web-speech-api/
[21] SVG Animation and CSS Transforms: A Complicated Love Story: http://css-tricks.com/svg-animation-on-css-transforms
[22] Performance Cops and Janitors: http://davidwalsh.name/performance-cops-janitors
[23] Introduction to Service Worker: http://bit.ly/1yBAlvB
[24] Getting Started with FigDice: http://bit.ly/1ySwSgi
[25] Automate Performance Testing with Grunt.js: http://www.sitepoint.com/automate-performance-testing-grunt-js
[26] Creating A “Save For Later” Chrome Extension With Modern Web Tools: http://www.smashingmagazine.com/2014/11/17/creating-save-later-chrome-extension-modern-web-tools/
[27] Server-Side Device Detection With JavaScript: http://www.smashingmagazine.com/2014/07/01/server-side-device-detection-with-javascript/
[28] A New Way to Test Internet Explorer on OS X, iOS and Android: http://blog.reybango.com/2014/11/03/a-new-way-to-test-internet-explorer-on-os-x-ios-and-android/
[29] Build a Database with Eloquent, Faker and Flysystem: http://bit.ly/1yBzHOM
[30] Why You Should Include Your Developer In The Design Process: http://www.smashingmagazine.com/2014/11/21/why-you-should-include-your-developer-in-the-design-process/
[31] Product Page Usability: Recommend Both Alternative & Supplementary Products (Only 42% Get it Right): http://baymard.com/blog/product-page-suggestions
[32] Fixing Bugs – the Next 'Big Thing' in E-Commerce?: http://baymard.com/blog/bugs-and-user-experience
[33] 7 Rules for Creating Gorgeous UI (Part 1): https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-1-559d4e805cda
[34] 7 Rules for Creating Gorgeous UI (Part 2): https://medium.com/@erikdkennedy/7-rules-for-creating-gorgeous-ui-part-2-430de537ba96
[35] Trouble at the Koolaid Point: http://seriouspony.com/trouble-at-the-koolaid-point
[36] Responsive Patterns: http://bradfrost.github.io/this-is-responsive/patterns.html
[37] Responsive Email Patterns: http://responsiveemailpatterns.com/
[38] Responsive Email Resources: http://responsiveemailresources.com/
[39] Website Style Guide Resources: http://styleguides.io/
[40] Web performance matters: http://www.perf.rocks/
[41] 5 Standardized Methods for Writing CSS: http://sixrevisions.com/css/standardized-methods-for-css/
[42] Design Principles FTW: http://www.designprinciplesftw.com/
[43] IBM Design Language: http://www.ibm.com/design/language/framework/front-end/fundamentals.shtml
[44] Pro Git 2nd Edition: http://git-scm.com/book/en/v2
[45] Building Web Apps with Go: http://bit.ly/1Gf8XJQ
[46] An Introduction to APIs: https://zapier.com/learn/apis/
[47] JavaScript: Novice to Ninja: http://bit.ly/1wfaZqn
[48] The Guide to UX Design Process & Documentation: http://www.uxpin.com/guide-to-ux-design-process-and-documentation.html
[49] User Testing and Design: http://www.uxpin.com/ux-design-in-action-yelp-website.html
[50] Canvassing: http://learnjs.io/canvassing/read/
[51] Pocket Guide to Writing SVG: https://github.com/jonitrythall/svgpocketguide/blob/master/svgpocketguide.md
[52] Hanno's Playbook: http://playbook.hanno.co/
[53] UX Methods & Deliverables: http://uxdesign.cc/ux-methods-deliverables/
[54] Введение: http://habrahabr.ru/post/240219/
[55] Величины, типы и операторы: http://habrahabr.ru/post/240223/
[56] Структура программ: http://habrahabr.ru/post/240225/
[57] Функции: http://habrahabr.ru/post/240349/
[58] Структуры данных: объекты и массивы: http://habrahabr.ru/post/240813/
[59] Функции высшего порядка: http://habrahabr.ru/post/241155/
[60] Тайная жизнь объектов: http://habrahabr.ru/post/241587/
[61] Проект: электронная жизнь: http://habrahabr.ru/post/241776/
[62] Поиск и обработка ошибок: http://habrahabr.ru/post/242609/
[63] Регулярные выражения: http://habrahabr.ru/post/242695/
[64] Модули: http://habrahabr.ru/post/243273/
[65] Проект: язык программирования: http://habrahabr.ru/post/243277/
[66] JavaScript и браузер: http://habrahabr.ru/post/243311/
[67] Document Object Model: http://habrahabr.ru/post/243815/
[68] Обработка событий: http://habrahabr.ru/post/244041/
[69] Проект: игра-платформер: http://habrahabr.ru/post/244405/
[70] Рисование на холсте: http://habrahabr.ru/post/244545/
[71] HTTP: http://habrahabr.ru/post/245145/
[72] Формы и поля форм: http://habrahabr.ru/post/245731/
[73] Проект: Paint: http://habrahabr.ru/post/245767/
[74] Node.js: http://habrahabr.ru/post/245775/
[75] Проект: веб-сайт по обмену опытом: http://habrahabr.ru/post/246331/
[76] Песочница для кода: http://eloquentjavascript.net/code
[77] Перевод на русский книги «The Little Book on CoffeeScript»: https://github.com/andrew--r/the-little-book-on-coffeescript
[78] Карманное руководство по написанию SVG: http://css-live.ru/articles/karmannoe-rukovodstvo-po-napisaniyu-svg-vvedenie.html
[79] Паттерны для масштабируемых JavaScript-приложений: https://github.com/shuvalov-anton/largescaleJS_ru
[80] Intro to WebGLwith Three.js: http://davidscottlyons.com/threejs/presentations/frontporch14/#slide-0
[81] Patty Toland — Design Consistency For The Responsive Web: http://vimeo.com/108331967
[82] Gerry Leonidas — Typefaces For Screens: http://vimeo.com/108336615
[83] Design by Typing: http://designbytyping.com/
[84] Addy Osmani — CSS Performance Tooling: http://www.youtube.com/watch?v=FEs2jgZBaQA
[85] Sara Soueidan — Styling and Animating Scalable Vector Graphics with CSS: https://www.youtube.com/watch?v=lf7L8X6ZBu8
[86] Patrick Hamann — CSS and the Critical Path: https://www.youtube.com/watch?v=_0Fk85to6hA
[87] Marcy Sutton — JavaScript for Everybody: https://www.youtube.com/watch?v=04DOp1F9Od4
[88] Douglas Crockford — The Better Parts: https://www.youtube.com/watch?v=PSGEjv3Tqo0
[89] Giovanni Kincade — Experiment Driven Product Redesigns: http://www.youtube.com/watch?v=2CKNikH3kII&feature=youtu.be&list=UURLwxeoe37rPV7E9bHBLcHA
[90] Part 1: https://www.youtube.com/watch?v=6UeRMMI_IzI&list=PLWa0Ky8nXQTaFXpT_YNvLElTEpHUyaZi4&index=7
[91] Part 2: https://www.youtube.com/watch?v=euVYHee1f1M&index=8&list=PLWa0Ky8nXQTaFXpT_YNvLElTEpHUyaZi4
[92] Видео с доклада Виталия Фридмана «Responsive Web-дизайн: Трюки и уловки»: http://habrahabr.ru/post/244283/
[93] YaC 2014: https://events.yandex.ru/events/yac/2014/
[94] Frontend Party: https://events.yandex.ru/events/meetings/22-nov-2014/
[95] Видео докладов Badoo с конференции Highload 2014: http://habrahabr.ru/company/badoo/blog/245897/
[96] Badoo: http://habrahabr.ru/users/badoo/
[97] Я.Субботник по фронтенду: https://events.yandex.ru/events/yasubbotnik/kiev_nov_2014/
[98] Погружаясь в производительность: http://habrahabr.ru/company/airbnb/blog/239829/
[99] AirbnbHabr: http://habrahabr.ru/users/airbnbhabr/
[100] Онлайн-курс «Визуализация данных. Основы»: http://habrahabr.ru/company/datalaboratory/blog/241069/
[101] infotanka: http://habrahabr.ru/users/infotanka/
[102] Открытые онлайн-курсы по Python, Linux и… генетике: http://habrahabr.ru/company/stepic/blog/241119/
[103] LankyCyril: http://habrahabr.ru/users/lankycyril/
[104] 10 новых бесплатных онлайн-курсов на Stepic: http://habrahabr.ru/company/stepic/blog/245891/
[105] alionamarkovich: http://habrahabr.ru/users/alionamarkovich/
[106] Математика аукционов. Лекция в Яндексе: http://habrahabr.ru/company/yandex/blog/246399/
[107] Zalina: http://habrahabr.ru/users/zalina/
[108] Курс от Яндекса о том, что должен знать каждый разработчик, который хочет делать большие системы. Модное слово DevOps и другое: http://habrahabr.ru/company/yandex/blog/245869/
[109] eroshenkoam: http://habrahabr.ru/users/eroshenkoam/
[110] Как работают рекомендательные системы. Лекция в Яндексе: http://habrahabr.ru/company/yandex/blog/241455/
[111] MRoizner: http://habrahabr.ru/users/mroizner/
[112] «В поисках идеального JavaScript-фреймворка»: https://dev.opera.com/articles/ru/perfect-javascript-framework/
[113] «Размышления о стандартной библиотеке JavaScript. Core.js»: http://habrahabr.ru/post/216997/
[114] rock: http://habrahabr.ru/users/rock/
[115] «Набор Ruby библиотек для CMS и сайта медиа издания»: http://habrahabr.ru/post/244157/
[116] Kavkaz: http://habrahabr.ru/users/kavkaz/
[117] «Не только Яндексу. Микроразметка на крупнейших сайтах рунета: зачем ею пользуются и почему она пригодится и вам»: http://habrahabr.ru/company/yandex/blog/246003/
[118] deliya: http://habrahabr.ru/users/deliya/
[119] «Градиентные карты с помощью SVG-фильтров feColorMatrix и feComponentTransfer»: http://html5.by/blog/gradient-maps-svg-filters-fecolormatrix-fecomponenttransfer/
[120] оригинал на Adobe Webplatform: http://blogs.adobe.com/webplatform/2013/08/06/gradientmaps-js-gradient-maps-for-html/
[121] «Пространства имен в PHP»: http://habrahabr.ru/post/245893/
[122] Infinitydb: http://habrahabr.ru/users/infinitydb/
[123] «Десять строчек на CSS, которые помогут отказаться от нативных приложений»: http://frontender.info/ten-css-one-liners-to-replace-native-apps/
[124] оригинал на A List Apart: http://alistapart.com/blog/post/ten-css-one-liners-to-replace-native-apps/
[125] «Как избежать лишних загрузок для отзывчивых изображений»: http://frontender.info/how-to-avoid-duplicate-downloads-in-responsive-images/
[126] оригинал на Smashing Magazine: http://mobile.smashingmagazine.com/2013/05/10/how-to-avoid-duplicate-downloads-in-responsive-images/
[127] «Yeoman для новичков»: http://habrahabr.ru/post/246349/
[128] CuamckuyKot: http://habrahabr.ru/users/cuamckuykot/
[129] 4: http://habrahabr.ru/company/paysto/blog/245403/
[130] 5: http://habrahabr.ru/company/paysto/blog/246093/
[131] Irina_Ua: http://habrahabr.ru/users/irina_ua/
[132] «Форматирование изображений с помощью Canvas»: http://habrahabr.ru/post/229809/
[133] alexandfox: http://habrahabr.ru/users/alexandfox/
[134] «Обработка и оформление отчетов в Excel на PHP»: http://habrahabr.ru/post/245233/
[135] prishelec: http://habrahabr.ru/users/prishelec/
[136] «Генератор случайных личностей»: http://habrahabr.ru/post/245927/
[137] pingvi69: http://habrahabr.ru/users/pingvi69/
[138] «Тестируем Mighty Editor и Phaser. HTML5 игра за час»: http://habrahabr.ru/post/245921/
[139] Jedi_Knight: http://habrahabr.ru/users/jedi_knight/
[140] «Быстрая настройка Grunt для комфортной разработки»: http://habrahabr.ru/company/bitcalm/blog/244725/
[141] m_smirnov: http://habrahabr.ru/users/m_smirnov/
[142] «Как я выступал на TEDx и упомянул там хабру»: http://habrahabr.ru/post/245561/
[143] paunch: http://habrahabr.ru/users/paunch/
[144] Skeleton 2.0: http://bit.ly/1z9RjS1
[145] Foundation для приложений: http://bit.ly/1zlTLKj
[146] Gridforms: https://github.com/kumailht/gridforms
[147] Flakes: https://github.com/kumailht/flakes
[148] Mailmalade: http://mailmalade.com/
[149] TheatreJS: http://bit.ly/1CkRBfp
[150] Pixi.js: http://bit.ly/1zlTGGt
[151] Bigpicture.js: https://github.com/josephernest/bigpicture.js/
[152] Focusable.js: https://github.com/zzarcon/focusable
[153] FlowupLabels.js: https://github.com/ENFOS/flowupLabels.js
[154] Beeplay.js: https://github.com/watilde/beeplay
[155] Fkit: https://github.com/nullobject/fkit
[156] Decimal.js: https://github.com/MikeMcl/decimal.js
[157] Thaw.js: https://github.com/robertleeplummerjr/thaw.js
[158] Apitizer.js: https://github.com/retro/apitizer
[159] Duktape: https://github.com/svaarala/duktape
[160] ATC: https://github.com/zlsa/atc
[161] Dogpatch: https://github.com/commando/dogpatch
[162] Themosis: http://framework.themosis.com/
[163] Validating: https://github.com/dwightwatson/validating
[164] DesignPatternsPHP: https://github.com/domnikl/DesignPatternsPHP
[165] Tribler: https://github.com/Tribler/tribler
[166] Prophet: https://github.com/Emsu/prophet
[167] Bup: https://github.com/bup/bup
[168] Pyspider: https://github.com/binux/pyspider
[169] Discourse: https://github.com/discourse/discourse
[170] Rubocop: https://github.com/bbatsov/rubocop
[171] Refile: https://github.com/elabs/refile
[172] Trailblazer: https://github.com/apotonick/trailblazer
[173] Terraform: https://github.com/hashicorp/terraform
[174] Spinner: https://github.com/briandowns/spinner
[175] Dotnet: https://github.com/Microsoft/dotnet
[176] Escher: https://github.com/gocircuit/escher
[177] Dapra: http://ru.wikipedia.org/wiki/%C0%E3%E5%ED%F2%F1%F2%E2%EE_%EF%EE_%EF%E5%F0%F1%EF%E5%EA%F2%E8%E2%ED%FB%EC_%EE%E1%EE%F0%EE%ED%ED%FB%EC_%ED%E0%F3%F7%ED%EE-%E8%F1%F1%EB%E5%E4%EE%E2%E0%F2%E5%EB%FC%F1%EA%E8%EC_%F0%E0%E7%F0%E0%E1%EE%F2%EA%E0%EC_%D1%D8%C0
[178] Mochi: https://github.com/i2y/mochi
[179] Hilbert: https://github.com/gogotanaka/Hilbert
[180] PETOOH: https://github.com/Ky6uk/PETOOH
[181] Beautiful Docs: https://github.com/PharkMillups/beautiful-docs
[182] HTTP API Design Guide: https://github.com/interagent/http-api-design
[183] GitHub бот деятельности президента США Барака Обамы: https://github.com/PresidentObamaBot?tab=activity
[184] Предыдущая подборка (Выпуск 34): http://habrahabr.ru/post/245213/
[185] Источник: http://habrahabr.ru/post/245557/
Нажмите здесь для печати.