Дайджест свежих материалов из мира фронтенда за последнюю неделю №213 (23 — 29 мая 2016)

---

Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/123686

Ссылки в тексте:

[1] Веб-разработка: #webdev

[2] CSS: #css

[3] Javascript: #js

[4] Браузеры: #browser

[5] Новости и занимательное: #news

[6] Autofill: чего не знают веб-разработчики, хотя должны знать: https://habrahabr.ru/company/mailru/blog/301840/

[7] Git: подстраховка для ваших проектов: http://frontender.info/git-the-safety-net-for-your-projects/

[8] Wintersmith — генератор статических сайтов на Node.js: http://prgssr.ru/development/wintersmith-generator-staticheskih-sajtov-na-nodejs.html

[9] Google улучшил функционал AMP-страниц, добавив новые возможности: http://www.searchengines.ru/news/archives/google_uluchshil_amp.html

[10] О jQuery и Bootstrap: расставляем точки над «i»: http://frontender.info/whats-wrong-with-jquery-and-bootstrap/

[11] Часть 1: https://medium.com/russian/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%D1%8F-front-enda-%D1%87%D0%B0%D1%81%D1%82%D1%8C-1-f524d668f328

[12] Часть 2: https://medium.com/@ABatickaya/%D0%BE%D1%82-%D0%BD%D1%83%D0%BB%D1%8F-%D0%B4%D0%BE-%D0%B3%D0%B5%D1%80%D0%BE%D1%8F-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B0-%D1%87%D0%B0%D1%81%D1%82%D1%8C-2-25f19e56eb29

[13] Подкаст Веб-стандартов, Выпуск №17: https://soundcloud.com/web-standards/episode-17

[14] AMP + прогрессивные веб-приложения: https://www.youtube.com/watch?v=a5X_Ot-R6lo

[15] Гудини: демистификация будущего CSS: https://www.youtube.com/watch?v=sE3ttkP15f8

[16] Мгновенная загрузка: создание offline-first прогрессивных веб приложений: https://www.youtube.com/watch?v=cmGr0RszHc8

[17] Frontend Party, Питер, 29 апреля 2016: https://www.youtube.com/playlist?list=PLKaafC45L_SSI4wEDohCR1NG-ccytm5Wt

[18] MIND Patterns: https://ebay.gitbooks.io/mindpatterns/content/

[19] Почти полное руководство по переходу на Gulp 4: https://www.joezimjs.com/javascript/complete-guide-upgrading-gulp-4/

[20] Прогрессивные веб приложения — что это за хрень?: http://digiday.com/platforms/wtf-progressive-web-apps/

[21] Регрессивные веб-приложения: https://adactio.com/journal/10708

[22] Как провести простой аудит доступности сайта, ч.2: http://blogs.adobe.com/dreamweaver/2016/05/how-to-conduct-a-basic-accessibility-audit-on-your-site-part-2-keyboard-screen-reader-and-automated-code-testing.html

[23] Объяснение понятия семантики: http://tink.uk/understanding-semantics/

[24] placeholder.pics: http://placeholder.pics/

[25] Как начать работать с Политикой Безопасности Контента: https://blog.codeship.com/how-to-get-started-with-a-content-security-policy/

[26] Фронт-энд разработка после Internet Explorer: https://www.sitepoint.com/front-end-development-internet-explorer/

[27] Service Workers 101 — инфографика с наиболее важными частями Service Workers API: https://github.com/delapuente/service-workers-101/

[28] Важность URL-ов: https://www.kryogenix.org/days/2016/05/24/the-importance-of-urls/

[29] Как перенести шрифты Google на свой CDN: https://www.keycdn.com/blog/google-fonts-cdn/

[30] google-webfonts-helper: https://google-webfonts-helper.herokuapp.com/fonts

[31] хостинге: https://www.reg.ru/?rlink=reflink-717

[32] «Знакомство с SVG»: https://htmlacademy.ru/courses/130

[33] «SVG за пределами простых форм» — доклад Nadieh Bremer с OpenVis Conf : https://www.youtube.com/watch?v=AwlA3SaChHE&feature=youtu.be

[34] SVG примеры маскирования Path — использование Paths и текста: http://vanseodesign.com/web-design/svg-clipping-path-examples-1/

[35] Создание адаптивного логотипа бренда с помощью SVG: http://thenewcode.com/1086/Make-an-Adaptive-Branding-Module-with-SVG

[36] Создаем отзывчивые графики и инфографику на SVG: https://www.sitepoint.com/make-responsive-svg-graphs-infographics/

[37] Еженедельная подборка красивых эффектов на CSS/SVG/JS #39: http://css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnaya-podborka-krasivyx-effektov-na-csssvgjs-39.html

[38] Создание вертикального таймлайна с помощью капельки JavaScript: http://webdesign.tutsplus.com/tutorials/building-a-vertical-timeline-with-css-and-a-touch-of-javascript--cms-26528

[39] Эффектное демо трансформации изображений (что увидеть эффект нужно прокрутить колесо прокрутки мыши): http://codepen.io/flexmotion/pen/qZejVP/

[40] Трехмерная изометрическая сетка: http://tympanus.net/codrops/2016/05/25/isometric-and-3d-grids/

[41] Создание аналоговых часов с помощью Web Animation API: http://thenewcode.com/1085/Make-an-Analog-Clock-with-the-Web-Animation-API

[42] Магия CSS. Глава 2. Раскладка: https://medium.com/@ABatickaya/%D0%BC%D0%B0%D0%B3%D0%B8%D1%8F-css-%D0%B3%D0%BB%D0%B0%D0%B2%D0%B0-2-%D1%80%D0%B0%D1%81%D0%BA%D0%BB%D0%B0%D0%B4%D0%BA%D0%B0-dab18a021c55

[43] Линтинг CSS с помощью stylelint: https://habrahabr.ru/post/301594/

[44] Инспекция и причёсывание CSS: http://juwain.ru/2016/05/27/linting-css/

[45] Отладка CSS: http://css-live.ru/articles/otladka-css.html

[46] Debugging CSS : https://benfrain.com/debugging-css/

[47] Stylelint: валидатор стилей, о котором мы всегда мечтали: https://www.smashingmagazine.com/2016/05/stylelint-the-style-sheet-linter-weve-always-wanted/

[48] Хроматические веб-шрифты: http://adrianroselli.com/2016/05/chromatic-web-fonts-redux.html

[49] Вставка разрыва строки в CSS: https://css-tricks.com/injecting-line-break/

[50] inStyle (модификация текущего селектора `&` в Sass): https://css-tricks.com/instyle-current-selector-sass/

[51] Интересное предложение о добавлении правил When/Else в CSS: https://tabatkins.github.io/specs/css-when-else/

[52] Джонатан Снук разбирается с каскадом и специфичностью: http://snook.ca/archives/html_and_css/dealing-with-cascade-specificity

[53] Его же мысли по поводу компонентного дизайна: http://snook.ca/archives/html_and_css/component-design

[54] Соображения по стилизации тега pre : http://mediatemple.net/blog/tips/considerations-for-styling-the-pre-tag/

[55] Свойство box-shadow: https://bitsofco.de/the-box-shadow-property/

[56] Family.scss: http://lukyvj.github.io/family.scss/

[57] Пять способов создания прилипающего футера: https://css-tricks.com/couple-takes-sticky-footer/

[58] Atomic CSS модули: https://medium.com/yplan-eng/atomic-css-modules-cb44d5993b27

[59] Система атрибутов для Flexbox разметки: http://progressivered.com/fla/?d=0&v=1&h=0&s=3&i=000&a=000

[60] Проектируем стили фронтэнда: https://robots.thoughtbot.com/architecting-front-end-styles

[61] Starability.css – доступный звездочный рейтинг с анимацией: http://blog.lunarlogic.io/2016/starability-css-accessible-rating-with-animations-on-top

[62] CSS-шутки: http://webdesignledger.com/28-css-puns-to-brighten-your-day/

[63] Использование JavaScript для атаки через манипуляцию с содержимым буфера обмена: http://www.opennet.ru/opennews/art.shtml?num=44481

[64] JavaScript-only: гомогенная архитектура веб-проектов: https://habrahabr.ru/company/jugru/blog/301588/

[65] Подробное объяснение ключевого слова 'this' в JavaScript: http://rainsoft.io/gentle-explanation-of-this-in-javascript/

[66] Апгрейдим мусорный код IE8 с помощью современных плюшек: http://metafizzy.co/blog/upgrading-ie8-code/

[67] Компиляция в JavaScript: 4 альтернативы для JS: http://blog.debugme.eu/best-alternatives-to-javascript/

[68] Да здравствует jQuery: https://dev.to/ben/long-live-jquery

[69] Быстрый совет: сохранение состояния чекбокса после перезагрузки страницы: https://www.sitepoint.com/quick-tip-persist-checkbox-checked-state-after-page-reload/

[70] Создание простого JavaScript слайд-шоу без jQuery: https://www.sitepoint.com/make-a-simple-javascript-slideshow-without-jquery/

[71] Анимированный градиент для имитации потока с использованием d3.js: http://www.visualcinnamon.com/2016/05/animate-gradient-imitate-flow-d3.html

[72] Визуализация алгоритмов: http://jasonpark.me/AlgorithmVisualizer/#path=graph_search/dfs/tree

[73] Погружение в React: роутер: http://prgssr.ru/development/pogruzhenie-v-react-router.html

[74] HTML to React: http://roman01la.github.io/html-to-react-components/

[75] Ваш график для изучения React: https://daveceddia.com/timeline-for-learning-react/

[76] CSS Модули и React: https://css-tricks.com/css-modules-part-3-react/

[77] Создание шаблонов React в WebStorm: http://davidboyne.co.uk/2016/05/24/react-templates-in-webstorm.html

[78] Укрощение настройки React: http://developer.telerik.com/featured/taming-react-setup/

[79] Клонируем Yelp с помощью React: https://www.fullstackreact.com/articles/react-tutorial-cloning-yelp/

[80] React и Firebase вместе: https://medium.com/@david.gilbertson/react-and-firebase-sittin-in-a-tree-a00d481786cb

[81] 10 основный причин, по которым разработчикам стоит использовать AngularJS: https://www.script-tutorials.com/top-10-reasons-why-web-developers-should-use-angularjs/

[82] AngularDoc — документация для Angular 2 проектов: http://angulardoc.cfapps.io

[83] Миграция с ванильного JavaScript на Angular 2 в NativeScript: http://developer.telerik.com/featured/moving-vanilla-javascript-angular-2-nativescript/

[84] Angular и Webpack для модульных приложений: https://egghead.io/series/angular-and-webpack-for-modular-applications

[85] Создание Angular 2 демок с System.js и TypeScript: http://www.bennadel.com/blog/3094-building-angular-2-demos-with-system-js-and-typescript.htm

[86] Создание игры с Ember: https://vimeo.com/165647735

[87] Не ругайте фреймворк: мой опыт с AngularJS и ReactJS: https://www.ckl.io/blog/dont-blame-the-framework-angularjs-and-reactjs/

[88] WebGazer.js: http://webgazer.cs.brown.edu

[89] ally.js — библиотека делающая доступность приложений более простой: http://allyjs.io/

[90] Tourist.js: http://easelinc.github.io/tourist/

[91] Bideo.js — библиотека для добавления фонового видео: https://rishabhp.github.io/bideo.js/

[92] Target.js!: https://github.com/gocomet/target.js

[93] Как установить в Firefox расширения Chrome: http://itc.ua/blogs/kak-ustanovit-v-firefox-rasshireniya-chrome/

[94] Выпуск web-браузера Chrome 51: http://www.opennet.ru/opennews/art.shtml?num=44491

[95] Измерение элементов и расстояний в Firefox DevTools: https://medium.com/@patrickbrosset/measuring-elements-and-distances-in-firefox-devtools-1d6c57bc1f3f

[96] Поддержка вашим браузером WAAPI: http://codepen.io/danwilson/pen/xGBKVq/

[97] Создание расширений для Microsoft Edge: https://www.sitepoint.com/building-extensions-for-microsoft-edge/

[98] F12 Edge Developer Tools: https://www.sitepoint.com/f12-edge-developer-tools/

[99] Появилась технология для показа рекламы в веб-браузерах в обход блокировки: http://www.cossa.ru/news/244/131000/

[100] В браузере Opera появилась персональная новостная лента: http://www.searchengines.ru/news/archives/v_brauzere_oper.html

[101] Анонс от Facebook: «New Response Graph for Live Content»: http://www.socialmediatoday.com/social-networks/facebook-announces-new-response-graph-live-content

[102] Facebook и Microsoft проложат оптоволоконный кабель через Атлантику: https://nplus1.ru/news/2016/05/27/Subsea-cable

[103] Google обрабатывает свыше 2 трлн поисковых запросов в год: http://www.searchengines.ru/news/archives/google_obrabatyvaet.html

[104] В Google Photos 13,7 петабайт фотографий и видео: https://tjournal.ru/28842-v-google-photos-137-petabait-fotografii-i-video

[105] The Verge: Microsoft потеряла $8 млрд на присоединении Nokia: https://vc.ru/p/nokia-in-microsoft

[106] Во Франции запретили отправлять электронные письма сотрудникам после завершения рабочего дня: https://tjournal.ru/28816-vo-francii-zapretili-otpravlyat-elektronnie-pisma-sotrudnikam-posle-zaversheniya-rabochego-dnya

[107] Почему Google одержала верх над Yahoo — на примере решения одной проблемы: https://vc.ru/p/google-beat-yahoo

[108] Пятилетний забег: как изменился «Яндекс» с момента IPO: http://www.rbc.ru/technology_and_media/25/05/2016/57445a919a79475eed2beef7

[109] Google создала в Париже квест в реальности, который можно пройти только с помощью продуктов компании: https://vc.ru/p/google-quest

[110] Интернет дырявых вещей: http://www.3dnews.ru/933277

[111] «Печальная карьера — это когда они идут работать в Facebook или в “Яндекс”»: https://medium.com/@peterchernyshov/%D0%BF%D0%B5%D1%87%D0%B0%D0%BB%D1%8C%D0%BD%D0%B0%D1%8F-%D0%BA%D0%B0%D1%80%D1%8C%D0%B5%D1%80%D0%B0-%D1%8D%D1%82%D0%BE-%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0-%D0%BE%D0%BD%D0%B8-%D0%B8%D0%B4%D1%83%D1%82-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%82%D1%8C-%D0%B2-facebook-%D0%B8%D0%BB%D0%B8-%D0%B2-%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81-55fd2e8e46f9

[112] Каково знать клингонский язык и читать на нём Шекспира: http://batenka.ru/2016/05/23/klingon/

[113] Большие ожидания: что хранится в капсулах времени: http://theoryandpractice.ru/posts/7510-bolshie-ozhidaniya-chto-khranitsya-v-kapsulakh-vremeni

[114] Как студент добился стажировки мечты с помощью фильтра Snapchat: http://ain.ua/2016/05/29/651268

[115] Как «несерьёзные» «Хромбуки» проложили Google дорогу на рынок ПК: http://www.computerra.ru/149251/android-to-chrome/

[116] Почему вам обязательно нужно узнать, что такое Scrum: http://lifehacker.ru/2016/05/24/chto-takoe-scrum/

[117] История украинского хакера, который стал лучшим оружием ФБР и худшим его кошмаром: http://apparat.cc/world/wired-on-ukrainian-hacker/

[118] публикации в Wired: https://www.wired.com/2016/05/maksym-igor-popov-fbi/

[119] Как типографика может сохранить вашу жизнь: https://psmag.com/how-typography-can-save-your-life-ac7e90ea1cf3

[120] Google IO 16  —  рассказ о двух Google: https://medium.com/@codepo8/google-io-16-a-tale-of-two-googles-9589c2557d60

[121] Как работает Mediachain: https://blog.mediachain.io/how-mediachain-works-5a5ccc1c3210

[122] Дайджест за прошлую неделю: https://habrahabr.ru/company/zfort/blog/301408/

[123] dersmoll: http://habrahabr.ru/users/dersmoll/

[124] alekskorovin: http://habrahabr.ru/users/alekskorovin/

[125] Источник: https://habrahabr.ru/post/302110/?utm_source=habrahabr&utm_medium=rss&utm_campaign=best

Нажмите здесь для печати.