Дайджест свежих материалов из мира фронтенда за последнюю неделю №318 (4 — 10 июня 2018)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #56 – Дмитрий Карловский о создании $mol или как написать свой нишевый фреймворк: https://soundcloud.com/frontend-weekend/fw-56

[8] Ночной фронтенд #36 — Обсуждаем с Николаем Матвиенко выступление Райана Дала на JSConf EU 2018: https://medium.com/devschacht/nightly-36-933f38f2bd44

[9] #51 Dan Abramov Package Manager: https://soundcloud.com/frontend_u/e51

[10] «Параллакс на шейдере с сайта antoni.de»: https://www.youtube.com/watch?v=gVux7uitsow

[11] Колхозный Фронтенд: https://soundcloud.com/viruzzz-kun/kolkhoznyy-frontend

[12] Google Fonts и GDPR compliance: https://github.com/google/fonts/issues/1495

[13] Новое в AMP: Q2, 2018 Edition: https://amphtml.wordpress.com/2018/06/06/2058/

[14] WCAG 2.1 получил официальный статус “W3C Recommendation”: https://www.w3.org/blog/2018/06/wcag21-rec/

[15] Инклюзивные компоненты: подробное руководство по созданию доступных карточек: https://inclusive-components.design/cards/

[16] Что такое Time to First Byte (TTFB) и Speed Index?: https://vanseodesign.com/web-design/performance-testing-speed-index-and-ttfb/

[17] Воспитание культуры веб-производительности: https://jmperezperez.com/fostering-web-performance-culture/

[18] 15+ экспертов делятся советами по веб-производительности на 2018й год : https://www.keycdn.com/blog/web-performance-advice-2018/

[19] Google AMP и проблема ожирения сайтов : https://blog.artemix.org/article/show/google-amp

[20] Серия статей «Test My Site», часть 1 – Инструментарий Google и Google Speed Update: https://blog.dareboost.com/en/2018/06/test-my-site-google/

[21] JSFiddle — новая версия: https://habr.com/post/413277/

[22] JSUI: https://github.com/kitze/JSUI

[23] 8 советов по Emmet, о которых вы, возможно, не знали: https://scotch.io/bar-talk/8-emmet-tips-you-might-not-know

[24] Google Font Downloader: https://github.com/Bloggify/google-font-downloader

[25] Yarn import теперь использует package-lock.json: https://yarnpkg.com/blog/2018/06/04/yarn-import-package-lock/

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

[27] Эффект коллапсинга логотипа: https://tympanus.net/codrops/2018/06/05/collapsing-logo-effect/

[28] Анимация изображений и видео с помощью curtains.js: https://css-tricks.com/animate-images-and-videos-with-curtains-js/

[29] Как начать работать с вариативными шрифтами в вебе: https://www.zeichenschatz.net/typografie/how-to-start-with-variable-fonts-on-the-web.html

[30] Side-channel атака на браузеры с помощью CSS3 свойства: https://www.evonide.com/side-channel-attacking-browsers-through-css3-features/

[31] Упрощение реализации сторителинга на страницах с помощью position sticky: https://pudding.cool/process/scrollytelling-sticky/

[32] Исследование новых граней CSS анимации: https://www.creativebloq.com/features/explore-the-new-frontier-of-css-animation

[33] Воссоздание ID карточек Мстителей на HTML и CSS: https://www.smashingmagazine.com/2018/06/avengers-id-card-html-css/

[34] Повышение вашего уровня владения CSS селекторами: https://blog.logrocket.com/level-up-your-css-selector-skills-5d7bb45ddd37

[35] Комбинация мощностей методологий SEM и BIO для улучшения CSS: https://css-tricks.com/combining-the-powers-of-sem-and-bio-for-improving-css/

[36] Специфичность в :not(), :has() и :matches(): https://meyerweb.com/eric/thoughts/2018/06/05/specificity-in-not-has-and-matches/

[37] Мониторинг JavaScript-ошибок с помощью window.onerror: https://habr.com/company/ruvds/blog/413173/

[38] Полезные методы массивов и объектов в JavaScript: https://habr.com/company/ruvds/blog/413169/

[39] Обзор некоторых JavaScript объектов, имеющих инкапсуляцию: http://codenative.ru/article/obzor_nekotoryh_javascript_obektov_imeyushchih_inkapsulyaciyu

[40] Съест ли JavaScript монолитные CMS?: https://www.lullabot.com/articles/will-javascript-eat-the-monolithic-cms

[41] Приоритеты для диагностики сайтов на JavaScript: https://searchengineland.com/priorities-for-diagnosing-javascript-powered-websites-299519

[42] Отладка JavaScript на продакшене с помощью Source Maps: https://scotch.io/tutorials/debug-javascript-in-production-with-source-maps

[43] Создание SPA без фреймворка: https://www.sitepoint.com/single-page-app-without-framework/

[44] Презентация Luna — инструмент для правильного тестирования в JavaScript: https://itnext.io/introducing-luna-javascript-testing-done-right-437a738cc1ed

[45] Релиз Meteor 1.7 и вечнозелёная мечта: https://blog.meteor.com/meteor-1-7-and-the-evergreen-dream-a8c1270b0901

[46] Быстрое введение в JavaScript Proxies: https://medium.freecodecamp.org/a-quick-intro-to-javascript-proxies-55695ddc4f98

[47] Что такое “this” в JavaScript?: https://blog.bitsrc.io/what-is-this-in-javascript-3b03480514a7

[48] Когда (и зачем) вы должны использовать стрелочные функции ES6 — и когда вам не стоит это делать: https://medium.freecodecamp.org/when-and-why-you-should-use-es6-arrow-functions-and-when-you-shouldnt-3d851d7f0b26

[49] Перенос веб-приложения с чистого JavaScript на Vue.js: https://habr.com/company/ruvds/blog/413311/

[50] Узнайте, как использовать Vue.js CLI: http://codenative.ru/article/uznayte_kak_ispolzovat_vuejs_cli

[51] Замена jQuery на Vue: https://www.sitepoint.com/replacing-jquery-vue/

[52] Ускоряем разработку с помощью прототипирования и Vue: https://vuejsdevelopers.com/2018/06/04/rapid-prototyping-vue/

[53] Нумерация страниц на Vuejs: https://medium.com/@obapelumi/pagination-with-vuejs-1f505ce8d15b

[54] Канбан доска в реальном времени с помощью Vue.js и Hamoni Sync: https://dev.to/pmbanugo/real-time-kanban-board-with-vuejs-and-hamoni-sync-52kg

[55] Год, проведённый с React: выводы и рекомендации: https://habr.com/company/ruvds/blog/413501/

[56] Компоненты высшего порядка с использованием Recompose: https://habr.com/company/raiffeisenbank/blog/354768/

[57] 5 общих практик, которые мы можете перестать делать в React: https://blog.logrocket.com/5-common-practices-that-you-can-stop-doing-in-react-9e866df5d269

[58] React — это не новый JQuery: https://medium.com/@dmitrigrabov/react-is-not-the-new-jquery-e42a19f165f4

[59] Как (и как НЕ) учить REACT?: http://www.js-craft.io/blog/16-Roadmap-to-learn-React/

[60] Подробное руководство по React Material: https://blog.logrocket.com/the-definitive-guide-to-react-material-d730c8a3e8ba

[61] Jest, React и Preact!: https://medium.com/@rupavjain/jest-react-and-preact-1ae20847ba92

[62] Angular cli 6: зачем нужен и как использовать: https://habr.com/company/netcracker/blog/413543/

[63] 3 полезных совета для Angular: https://scotch.io/tutorials/3-useful-typescript-tips-for-angular

[64] Архитектура в проектах на Angular: https://medium.com/@cyrilletuzi/architecture-in-angular-projects-242606567e40

[65] Преимущества нормализации получаемых данных в Angular: https://blog.angularindepth.com/the-benefits-of-application-state-normalization-in-angular-f93392ca9f44

[66] MapKit JS от Apple — инструмент, позволяющий вставлять в сайт Apple Maps.: https://developer.apple.com/videos/play/wwdc2018/212/

[67] 11 JS библиотек для анимации в 2018: https://blog.bitsrc.io/11-javascript-animation-libraries-for-2018-9d7ac93a2c59

[68] Short and Sweet, доступный счетчик символов: https://github.com/rikschennink/short-and-sweet

[69] LuminJS: https://lumin.rocks/

[70] Запущен проект Fusion по слиянию Tor Browser и Firefox: https://habr.com/company/globalsign/blog/413709/

[71] Google представила Chrome 68 Beta: https://tproger.ru/news/chrome-68-beta-released/

[72] В Firefox тестируется возможность одновременного просмотра разных вкладок: http://www.opennet.ru/opennews/art.shtml?num=48721

[73] Доля Firefox опустилась ниже 10% по статистике сервиса Net Applications: http://www.opennet.ru/opennews/art.shtml?num=48717

[74] В «Яндекс.Браузере» появился режим экономии энергии: https://lifehacker.ru/yandex-browser-energy-saver/

[75] GitHub теперь официально принадлежит Microsoft: https://habr.com/post/413215/

[76] Новый глава GitHub рассказал, чего ждать после слияния с Microsoft: https://xakep.ru/2018/06/08/nat-friedman-ama/

[77] Шесть альтернатив GitHub для совместной разработки: https://vc.ru/39321-shest-alternativ-github-dlya-sovmestnoy-razrabotki

[78] Google: блокировка страницы в robots.txt может не сработать, если на неё есть ссылки: https://www.searchengines.ru/google-robots-txt.html

[79] Google опубликовала правила использования искусственного интеллекта: https://tproger.ru/news/google-ai-principles/

[80] Вкратце: о чём Apple рассказала на открытии WWDC 2018: https://vc.ru/39337-vkratce-o-chem-apple-rasskazala-na-otkrytii-wwdc-2018

[81] Как основатели WhatsApp поссорились с Facebook и сколько это стоило: https://ain.ua/2018/06/09/whatsapp-vs-facebook

[82] Facebook обязала разработчиков использовать HTTPS в Facebook Login: https://tproger.ru/news/facebook-login-https/

[83] Дайджест за прошлую неделю: https://habr.com/company/zfort/blog/413119/

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

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

[86] Источник: https://habr.com/post/413811/?utm_campaign=413811

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