Дайджест свежих материалов из мира фронтенда за последнюю неделю №273 (24 — 30 июля 2017)

---

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

[5] Занимательное: #intresting

[6] Подкаст «Frontend Weekend FW» #13: https://soundcloud.com/frontend-weekend/fw-13

[7] Подкаст «Пятиминутка React» #27: http://5minreact.ru/27-react-ai/

[8] Подкаст «Фронтёрки» #9: https://fronterki.fireside.fm/9

[9] Подкаст «Drinkcast», пилотный выпуск от сообщества SPB Frontend: http://spb-frontend.ru/podcast/

[10] Нормальный сброс — HTML Шорты: https://www.youtube.com/watch?v=Ns0zijQJxH4

[11] Еженедельный стрим от Юрия Артюха «ALL YOUR HTML» #9 : https://www.youtube.com/watch?v=RTYJ1fmYZ3g

[12] Видео с конференции OdessaJS: https://www.youtube.com/playlist?list=PLUF1zRLAgrPHB0mxa7aGy2dLeonR0dXmU

[13] Frontend United 2017 — Athens: https://www.youtube.com/playlist?list=PL7xqy2B8uXNIgeb7MslzTOoqRy2BRiKmW

[14] Front-Trends 2017: https://www.youtube.com/playlist?list=PLBevk0eXLOGdZE8N8mQBvrD3Sggcd-b4S

[15] Комментирование кода: хорошие, плохие и отвратительные комментарии: https://tproger.ru/articles/comments-in-code/

[16] Google активно продвигает AMP на международном уровне: https://www.searchengines.ru/amp-international.html

[17] Создание PWA с помощью Polymer: чеклист: https://meowni.ca/posts/polymer-pwa-checklist/

[18] Тестирование доступности библиотек шаблонов: https://hiddedevries.nl/en/blog/2017-07-13-testing-the-accessibility-of-pattern-libraries

[19] Понимание системы координат в SVG и трансформации (часть 1) — viewport, viewBox и preserveAspectRatio: https://www.sarasoueidan.com/blog/svg-coordinate-systems/

[20] Улучшение веб производительности для отражения скорости движка сайта: https://blog.algolia.com/improving-web-performance-to-mirror-engine-speed/

[21] Готовьтесь: грядёт новый V8, производительность Node.js меняется.: https://www.nearform.com/blog/node-js-is-getting-a-new-v8-with-turbofan/

[22] Объяснение индекса скорости – другой способ измерения веб производительности: https://www.keycdn.com/blog/speed-index/

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

[24] Анимация разделения изображения на кусочки: https://tympanus.net/codrops/2017/07/26/animated-image-pieces/

[25] Эффект размытия с помощью SVG фильтров: https://codepen.io/damianmuti/pen/MvYPPa

[26] Свойства для выравнивания всего и новинки Display «повзрослели» на релиз: http://css-live.ru/vecssti-s-polej/new-release-box-alignment-css-display-motion-path.html

[27] Викторина: как хорошо вы знаете CSS?: https://tutorialzine.com/2017/07/how-well-do-you-know-css

[28] 5 свойств CSS, о которых вы, возможно, не знаете: http://developer.telerik.com/topics/web-development/5-css-properties-probably-still-dont-know/

[29] Визуализация CSS каламбуров: https://medium.com/@ethan.jarrell/css-visual-puns-a0a38e9e7ca

[30] Создание адаптивной временной шкалы на CSS с Sass и BEM: https://assortment.io/posts/building-responsive-timelines-in-css-sass-bem

[31] Прогрессивное улучшение CSS-лэйаута: от Float до Flexbox и Grid: https://medium.com/@yaroshenko.dmitriy/%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B5%D1%81%D1%81%D0%B8%D0%B2%D0%BD%D0%BE%D0%B5-%D1%83%D0%BB%D1%83%D1%87%D1%88%D0%B5%D0%BD%D0%B8%D0%B5-css-%D0%BB%D1%8D%D0%B9%D0%B0%D1%83%D1%82%D0%B0-%D0%BE%D1%82-float-%D0%B4%D0%BE-flexbox-%D0%B4%D0%BE-grid-e74e368d9249

[32] Использование единиц вьюпорта для масштабирования фиксированных лейаутов: https://hackernoon.com/using-viewport-units-to-scale-fixed-layouts-869638bb91f9

[33] Использование CSS Grid Layout в качестве masonry с помощью grid-auto-flow: dense: https://escss.blogspot.com/2017/07/css-grid-layout-as-masonry.html

[34] Руководство для дизайнеров по Flexbox и Grid: https://medium.com/@jonyablonski/designers-guide-to-flexbox-and-grid-cec6e7e45736

[35] «CSS Grid меняют все (в веб лейаутах)»: https://www.youtube.com/watch?v=txZq7Laz7_4

[36] Теперь, когда пользовательские свойства CSS являются рабочей вещью, все значения могут быть изменены индивидуально: https://css-tricks.com/now-css-custom-properties-thing-value-parts-can-changed-individually/

[37] Кастомные свойства CSS — динамические изменения с и без Javascript: http://vanseodesign.com/css/custom-properties-and-javascript/

[38] «CSS Houdini — от CSS переменных к JavaScript и обратно»: https://www.youtube.com/watch?v=66E0_QFnmlA

[39] «Алиса в стране Web Animations API»: https://vimeo.com/226736126

[40] Как создать красивый анимированный лоадер на чистом CSS: https://codeburst.io/how-to-create-a-beautiful-animated-loader-with-nothing-but-css-d1962fc5a66c

[41] Пружинящая физика с помощью CSS переменных : https://codepen.io/valhead/full/yXYYdm/

[42] Анимация огня с помощью Scss: https://codepen.io/artyom-ivanov/pen/MoxENg

[43] Почему мы выбрали TypeScript: история разработчиков из Reddit: https://habrahabr.ru/company/ruvds/blog/333986/

[44] JavaScript без this: https://habrahabr.ru/company/ruvds/blog/334222/

[45] Книга «Путь JavaScript» (The JavaScript Way): https://github.com/bpesquet/thejsway/#readme

[46] Как я вновь полюбил JavaScript после того, как выбросил 90% мусора из него: https://hackernoon.com/how-i-rediscovered-my-love-for-javascript-after-throwing-90-of-it-in-the-trash-f1baed075d1b

[47] Руководство по Service Worker'ам для начинающих : https://medium.com/samsung-internet-dev/a-beginners-guide-to-service-workers-f76abf1960f6

[48] Полное руководство по усталости от JavaScript: реальность нашей индустрии: http://lucasfcosta.com/2017/07/17/The-Ultimate-Guide-to-JavaScript-Fatigue.html

[49] Как оптимизировать изменение размеров и скроллинг: https://iamakulov.com/notes/resize-scroll/

[50] Как использовать Media Queries в JavaScript: https://www.sitepoint.com/javascript-media-queries/

[51] Как собрать простой статический сайт с помощью Webpack: https://www.sitepoint.com/bundle-static-site-webpack/

[52] Как использовать JavaScript для создания шаблонов HTML писем: http://blog.edmdesigner.com/how-to-use-javascript-for-creating-html-email-layouts/

[53] Как отправить электронное письмо с Angular, Sails.js, и Mailgun: https://blog.upstate.agency/how-to-send-an-email-using-angular-sails-js-and-mailgun-95226ad51064

[54] Давайте учить основы ECMAScript 6 в простых терминах: https://medium.com/@im.ali.tavakoli/lets-learn-ecmascript-6-basics-in-simple-terms-2440124deafd

[55] Наиболее часто используемые особенности Javascript ECMAScript 2015 (ES6) и ECMAScript 2016 (ES7): https://blog.mindorks.com/most-used-javascript-ecmascript-2015-es6-and-ecmascript-2016-es7-features-75682cd98596

[56] Почему композиция сложнее с классами ES6: https://medium.com/javascript-scene/why-composition-is-harder-with-classes-c3e627dcd0aa

[57] Почему Vue.js — лучший фреймворк для front-end разработки на 2017 год: https://habrahabr.ru/post/333004/.js--luchshiy-freymvork-dlya-fro

[58] Переключение с React на Vue.js: https://medium.com/js-dojo/switching-from-react-to-vue-js-badf34565a2d

[59] Как опубликовать ваш Vue.js компонент в NPM: https://vuejsdevelopers.com/2017/07/31/vue-component-publish-npm/

[60] Впечатляющая коллекция компонентов и хелперов для VueJS 2, основанных на Zurb's Foundation: https://github.com/Nee-V/NeeV

[61] Создание красивых графиков с помощью Vue.js и Chart.js: https://www.sitepoint.com/creating-beautiful-charts-vue-chart-js/

[62] Создание сайта со сравнением криптовалют на Vue.js: https://scotch.io/tutorials/build-a-cryptocurrency-comparison-site-with-vuejs

[63] Предотвращаем XSS в Vue.js с помощью Google Caja: http://thewebjuice.com/prevent-xss-in-vue-js-using-google-caja/

[64] Топ онлайн курсов по VueJs: http://gainfromhere.com/top-vuejs-online-learning-courses/

[65] React 16 beta доступна для публичного тестирования: https://github.com/facebook/react/issues/10294

[66] Обработка ошибок в React 16: https://facebook.github.io/react/blog/2017/07/26/error-handling-in-react-16.html

[67] Топ ресурсов для изучения React Fiber: https://hackernoon.com/top-resources-to-explore-react-fiber-9a2b19114520

[68] Попробуйте React Fiber с помощью Rekit: https://medium.com/@nate_wang/try-react-fiber-with-rekit-a9d4179474a1

[69] Создание вашего первого приложения на React: https://codeburst.io/building-your-first-react-app-c1f6eb814205

[70] Практическое руководство по тестированию React приложений: http://acco.io/a-practical-guide-to-testing-react-apps/

[71] Испектирование, модификация и отладка React / Redux с помощью дополнений Firefox: https://hacks.mozilla.org/2017/07/debug-react-redux-firefox-add-ons/

[72] Создание расширения Chrome DevTools с помощью React.js: https://medium.com/@yuridrabik/create-chrome-devtools-extension-using-react-js-1b8e16e8dc72

[73] Глубокое погружение в веб анимацию с Angular: https://blog.thoughtram.io/angular/2017/07/26/a-web-animations-deep-dive-with-angular.html

[74] Юнит тестирование Angular приложений с Jest: https://izifortune.com/unit-testing-angular-applications-with-jest/

[75] Fitty: https://github.com/rikschennink/fitty

[76] image-compressor: https://xkeshi.github.io/image-compressor/

[77] spacetime: https://github.com/smallwins/spacetime

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

[79] Что нового в DevTools (Chrome 61): https://developers.google.com/web/updates/2017/07/devtools-release-notes

[80] В Firefox добавлен CSS-движок Stylo, написанный на языке Rust: http://www.opennet.ru/opennews/art.shtml?num=46917

[81] Firefox Grid Inspector, July 2017 edition: http://jensimmons.com/post/jul-26-2017/firefox-grid-inspector-july-2017-edition

[82] В Chrome и Firefox будет прекращено доверие к удостоверяющему центру Symantec: http://www.opennet.ru/opennews/art.shtml?num=46941

[83] Microsoft будет поэтапно отказываться от поддержки Adobe Flash в Microsoft Edge и Internet Explorer: http://microsoftportal.net/microsoft/8542-microsoft-budet-poetapno-otkazyvatsya-ot-podderzhki-adobe-flash-v-microsoft-edge-i-internet-explorer.html

[84] Статистика браузеров, которая имеет значение: http://mediatemple.net/blog/tips/browser-statistics-matter/

[85] Adobe прекращает поддержку Flash: http://www.opennet.ru/opennews/art.shtml?num=46916

[86] Google отказалась от «живого поиска» через семь лет после запуска: https://vc.ru/n/google-no-live

[87] Pwnie Awards 2017: наиболее существенные уязвимости и провалы в безопасности: http://www.opennet.ru/opennews/art.shtml?num=46943

[88] Основатель Amazon Джефф Безос стал самым богатым человеком в мире: https://vc.ru/n/bezos-richest

[89] лишился этого статуса : https://vc.ru/n/bezos-second-again

[90] 18-летний молодой человек арестован за сообщение о «детской» ошибке в новой системе электронных билетов Будапешта: https://geektimes.ru/post/291367/

[91] Как понять свой уровень и сколько просить денег: https://ru.hexlet.io/blog/posts/developer-salary

[92] Что заказывают в США представители ИТ-индустрии: https://vc.ru/p/banderolka-orders

[93] Почему люди уходят из больших IT-компаний — колонка Стива Бланка: https://ain.ua/2017/07/26/pochemu-lyudi-uxodyat-iz-bolshix-it-kompanij

[94] Эксперты: ситуация на рынке криптовалют становится опасной и может превратиться в пузырь: http://itc.ua/blogs/ekspertyi-situatsiya-na-ryinke-kriptovalyut-stanovitsya-opasnoy-i-mozhet-prevratitsya-v-puzyir/

[95] Знаете ли вы, сколько времени стоят быстрые исправления вам и вашей команде?: https://hackernoon.com/do-you-know-how-much-time-quick-fixes-are-costing-you-and-your-team-413fec21d8c6

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

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

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

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

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