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

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №314 (7 — 13 мая 2018) - 1

Libs & Plugins:
• Guess.js ^[69] — коллекция библиотек и инструментов, представленная на Google I/O 2018, которая позволяет использовать техники оптимизации сайта на основе данных и статистики
• ScrollHint ^[70] — JavaScript библиотека для добавления подсказки, если элементы блока скролятся горизонтально
• Определение человеческой позы в реальном времени в браузере с помощью TensorFlow.js ^[71]
• ultradom ^[72] — минимальный слой отображения для создания декларативных веб интерфейсов.

Браузеры

• Релиз Firefox 60 ^[73], а также обзор технических нюансов релиза в обзоре Марата Таналина ^[74]
• Улучшение sandbox-изоляции в Firefox ^[75]
• Обновление Chrome 66: В зоне риска миллионы браузерных игр ^[76]
• Доступен web-браузер Opera 53 ^[77]
• Вредоносные расширения для Chrome заразили более 100 000 пользователей ^[78]
• Введение в Microsoft Edge DevTools Protocol ^[79]

Занимательное

• Что показали на Google I/O 2018 ^[80]
• 40 анонсов Build 2018. Часть 1. Hardware & Dev Tools ^[81]
• Итоги Microsoft Build 2018: Apple нам больше не конкуренты ^[82]
• Google Photos скоро научится раскрашивать старые фотографии и конвертировать документы в PDF ^[83]
• Windows 10 April 2018 Update: новые функции ^[84]
• GitHub опубликовал отчёт о блокировках в 2017 году ^[85]
• Microsoft ставит на искусственный интеллект ^[86]
• Наступает эра невидимых гаджетов ^[87]
• Если приватности нет — о ней не тревожьтесь! ^[88]
• Google начала регистрировать домены в зоне .app ^[89]
• Google + Microsoft: как два извечных конкурента вместе пытаются изменить мир ^[90]

Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю ^[91].
Материал подготовили dersmoll ^[92] и alekskorovin ^[93].

Автор: alexzfort

Источник ^[94]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #52 – Сергей Бережной про 13 лет в Яндексе, ШРИ и проблемы из-за витания в облаках: https://soundcloud.com/frontend-weekend/fw-52

[8] Новости 512 — Выпуск №5 (07.05 — 13.05): https://soundcloud.com/csssr/news512_05

[9] Ночной фронтенд #33: SOLID — это надёжность: https://soundcloud.com/devschacht/nightly-33

[10] #27 — «Тимлидерский»: https://spb-frontend.ru/podcast/27/

[11] «Анимация с сайта taotajima.jp на шейдерах и скролле»: https://www.youtube.com/watch?v=I9A4xTT2rh0

[12] 14 видео с KharkivCSS #3 2018: https://www.youtube.com/playlist?list=PLJ5NW5T60UpiopPHjYdepLi_cvw8HPUDi

[13] 4 видео с KharkivFrontend Meetup#_3: https://www.youtube.com/playlist?list=PLDddScyTGZAs2UcWBLPodHk5UWtMVDuPN

[14] Chrome and Web at Google I/O 2018: https://www.youtube.com/playlist?list=PLNYkxOF6rcIC4NQeXpdAy0RbOACI66Hvf

[15] Build 2018: Microsoft анонсировала ряд новых возможностей для PWA-приложений: http://microsoftportal.net/windows-9/9605-build-2018-microsoft-anonsirovala-ryad-novyh-vozmozhnostey-dlya-pwa-prilozheniy.html

[16] Справа налево. Что такое dir=rtl и как приручить арабский язык: https://habr.com/company/2gis/blog/358148/

[17] Вещи, которые разработчики должны знать о SEO в 2018: https://www.smashingmagazine.com/2018/05/things-designers-should-know-about-seo-2018/

[18] Как можно использовать простую тригонометрию для улучшения анимации лоадеров: https://uxdesign.cc/how-you-can-use-simple-trigonometry-to-create-better-loaders-32a573577eb4

[19] Глубокое погружение в компоненты форм Bootstrap-а: https://www.sitepoint.com/deep-dive-bootstrap-form-component/

[20] Оптимизируем веб с Виталием Фридманом, — компрессия, картинки, шрифты, фичи HTTP/2 и Resource Hints: https://habr.com/company/jugru/blog/354890/

[21] First Input Delay: новая метрика производительности от Google для измерения первого впечатления интерактивности сайта : https://developers.google.com/web/updates/2018/05/first-input-delay

[22] Использование Lighthouse для улучшения производительности загрузки страниц : https://developers.google.com/web/updates/2018/05/lighthouse

[23] User Timing API – измеряем производительность UX : https://www.keycdn.com/blog/user-timing/

[24] Карательные инструменты во фронтенде: https://medium.com/@cakeinpanic/%D0%BA%D0%B0%D1%80%D0%B0%D1%82%D0%B5%D0%BB%D1%8C%D0%BD%D1%8B%D0%B5-%D0%B8%D0%BD%D1%81%D1%82%D1%80%D1%83%D0%BC%D0%B5%D0%BD%D1%82%D1%8B-%D0%B2%D0%BE-%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4%D0%B5-e5dd05b78b97

[25] Webpack 4: практические рекомендации по настройке: https://tproger.ru/translations/configure-webpack4/

[26] Результаты опроса The Front-End Tooling Survey 2018: https://ashleynolan.co.uk/blog/frontend-tooling-survey-2018-results

[27] Анонс Lighthouse 3.0 с описанием нововведений: https://developers.google.com/web/updates/2018/05/lighthouse3

[28] 8 клевых новых возможностей в Sublime Text 3.1: https://scotch.io/bar-talk/8-awesome-new-features-in-sublime-text-31

[29] `npm audit`: обнаружение и исправление опасных зависимостей: https://blog.npmjs.org/post/173719309445/npm-audit-identify-and-fix-insecure

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

[31] brusher: http://kamranahmed.info/brusher/

[32] Интерактивная SVG маска с полноэкранным изображением: https://codepen.io/PointC/full/KRWgOK/

[33] Слайдер с эффектом искажения изображений на WebGL : https://codepen.io/ashthornton/full/KRQbMO/

[34] Почему избегать CSS-каскада — это проблема?: http://css-live.ru/articles/pochemu-izbegat-css-kaskada-eto-problema.html

[35] Что за объект CSSStyleDeclaration и откуда он берется: https://medium.com/@lucyhackwrench/%D1%87%D1%82%D0%BE-%D0%B7%D0%B0-%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82-cssstyledeclaration-%D0%B8-%D0%BE%D1%82%D0%BA%D1%83%D0%B4%D0%B0-%D0%BE%D0%BD-%D0%B1%D0%B5%D1%80%D0%B5%D1%82%D1%81%D1%8F-9fbee0c634ca

[36] Поддержка CSS Typed OM появилась в Chrome. Как это облегчит жизнь разработчикам?: https://medium.com/@lucyhackwrench/%D0%BF%D0%BE%D0%B4%D0%B4%D0%B5%D1%80%D0%B6%D0%BA%D0%B0-css-typed-om-%D0%BF%D0%BE%D1%8F%D0%B2%D0%B8%D0%BB%D0%B0%D1%81%D1%8C-%D0%B2-chrome-%D0%BA%D0%B0%D0%BA-%D1%8D%D1%82%D0%BE-%D0%BE%D0%B1%D0%BB%D0%B5%D0%B3%D1%87%D0%B8%D1%82-%D0%B6%D0%B8%D0%B7%D0%BD%D1%8C-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%87%D0%B8%D0%BA%D0%B0%D0%BC-31b086851465

[37] Новые свойства CSS, которые меняют веб-дизайн: https://www.smashingmagazine.com/2018/05/future-of-web-design/

[38] Оформление строк текста с помощью box-decoration-break: https://css-tricks.com/decorating-lines-of-text-with-box-decoration-break/

[39] Переопределение стандартных стилей для Button: https://css-tricks.com/overriding-default-button-styles/

[40] Стилизация кнопок, правильный способ: https://fvsch.com/code/styling-buttons/

[41] Eqio: https://github.com/stowball/eqio

[42] Бесплатный курс для повышения уровня владения Bulma CSS: https://medium.freecodecamp.org/free-course-level-up-with-bulma-css-d82dcb4b980a

[43] Как стать CSS Grid Ninja: https://medium.com/@elad/becoming-a-css-grid-ninja-f4c6db018cc1

[44] «Что не так с CSS-in-JS?»: http://bradfrost.com/blog/link/whats-wrong-with-css-in-js/

[45] «Что так с css-in-js»: https://micahgodbolt.com/blog/what-s-right-with-css-in-js/

[46] Полезные приёмы работы с массивами в JavaScript: https://habr.com/company/ruvds/blog/358306/

[47] Пятничный JS: случайное перемешивание: https://habr.com/post/358094/

[48] BigInt — длинная арифметика в JavaScript: https://habr.com/post/354930/

[49] Excel будет поддерживать JavaScript. Исследователи уже запустили таким образом майнер CoinHive: https://xakep.ru/2018/05/10/excel-coinhive/

[50] Google добавил поддержку JavaScript в Mobile-Friendly Test и Rich Results Test: https://www.searchengines.ru/js-tools.html

[51] Как я пользовался вебом в течении одного дня при выключенном JavaScript: https://www.smashingmagazine.com/2018/05/using-the-web-with-javascript-turned-off/

[52] Полный курс по GraphQL — от новичка до эксперта: https://www.youtube.com/watch?v=ed8SzALpx1Q&feature=youtu.be

[53] Легкое введение Prepack от Дена Абрамова (часть 1): https://gist.github.com/gaearon/d85dccba72b809f56a9553972e5c33c4

[54] Простое объяснение понятий JavaScript Symbols, Iterators, Generators, Async/Await и Async Iterators : https://medium.freecodecamp.org/some-of-javascripts-most-useful-features-can-be-tricky-let-me-explain-them-4003d7bbed32

[55] Работа с Vue после трех лет с React: https://medium.com/@omm2/doing-vue-after-three-years-with-react-3d36d53abbd6

[56] Создание приложения по заказу еды с помощью Vue и Africa’s Talking: https://medium.com/js-dojo/build-a-food-ordering-app-using-vue-and-africas-talking-bd271cf6ef72

[57] End-To-End тестирование VueJS клона HackerNews: https://medium.com/js-dojo/end-to-end-testing-a-vuejs-hackernews-clone-23b9415fd5c5

[58] Appetite for Components: https://medium.com/@leemartin/appetite-for-components-c2da9a65132e

[59] 5 lightning talks с VueConf.US, которые вы не можете пропустить: https://medium.com/vue-mastery/5-lightning-talks-from-vueconf-us-you-cant-miss-490feb116d3e

[60] Понимание жизненного цикла React-компонента: https://habr.com/post/358090/

[61] Дополнительные вопросы на IT-собеседовании: https://tproger.ru/translations/non-tech-interview-questions/

[62] Музей React State: https://hackernoon.com/the-react-state-museum-a278c726315

[63] 5 инструментов для более быстрой разработки на React: https://blog.bitsrc.io/5-tools-for-faster-development-in-react-676f134050f2

[64] Условный роутинг с помощью React Router v4: https://scotch.io/tutorials/conditional-routing-with-react-router-v4

[65] End-to-end тестирование приложений на React с помощью Puppeteer и Jest: https://blog.logrocket.com/end-to-end-testing-react-apps-with-puppeteer-and-jest-ce2f414b4fd7

[66] Angular — Stop Already!: https://medium.com/@chillypenguin/stopping-angular-40ea642c484d

[67] Bazel, an experimental and unofficial feature of Angular 6: https://codeburst.io/bazel-an-experimental-and-unofficial-feature-of-angular-6-946e880b4637

[68] Angular Elements – A Practical Introduction To Web Components With Angular 6: https://codingthesmartway.com/angular-elements-a-practical-introduction-to-web-components-with-angular-6/

[69] Guess.js: https://blog.mgechev.com/2018/05/09/introducing-guess-js-data-driven-user-experiences-web/

[70] ScrollHint: https://appleple.github.io/scroll-hint/

[71] Определение человеческой позы в реальном времени в браузере с помощью TensorFlow.js: https://medium.com/tensorflow/real-time-human-pose-estimation-in-the-browser-with-tensorflow-js-7dd0bc881cd5

[72] ultradom: https://github.com/jorgebucaran/ultradom

[73] Релиз Firefox 60: https://www.opennet.ru/opennews/art.shtml?num=48565

[74] обзор технических нюансов релиза в обзоре Марата Таналина: http://tanalin.com/blog/2018/05/firefox-60/

[75] Улучшение sandbox-изоляции в Firefox: http://www.opennet.ru/opennews/art.shtml?num=48589

[76] Обновление Chrome 66: В зоне риска миллионы браузерных игр: https://gmbox.ru/materials/35376-obnovlenie-chrome-66-v-zone-riska-millioni-brauzernih-igr

[77] Доступен web-браузер Opera 53: http://www.opennet.ru/opennews/art.shtml?num=48578

[78] Вредоносные расширения для Chrome заразили более 100 000 пользователей: https://xakep.ru/2018/05/11/malicious-chrome-extensions-2/

[79] Введение в Microsoft Edge DevTools Protocol: https://blogs.windows.com/msedgedev/2018/05/11/introducing-edge-devtools-protocol/

[80] Что показали на Google I/O 2018 : https://geektimes.com/post/300721/

[81] 40 анонсов Build 2018. Часть 1. Hardware & Dev Tools : https://habr.com/company/microsoft/blog/358068/

[82] Итоги Microsoft Build 2018: Apple нам больше не конкуренты: http://www.mobile-review.com/articles/2018/microsoft-build-2018.shtml

[83] Google Photos скоро научится раскрашивать старые фотографии и конвертировать документы в PDF: https://itc.ua/news/google-photos-skoro-nauchitsya-raskrashivat-staryie-fotografii-i-konvertirovat-dokumentyi-v-pdf/

[84] Windows 10 April 2018 Update: новые функции: http://www.wincore.ru/windows-news/6684-windows-10-april-2018-update-novye-funkcii.html

[85] GitHub опубликовал отчёт о блокировках в 2017 году: http://www.opennet.ru/opennews/art.shtml?num=48585

[86] Microsoft ставит на искусственный интеллект: https://www.computerra.ru/229019/microsoft-stavit-na-iskusstvennyj-intellekt/

[87] Наступает эра невидимых гаджетов: https://www.computerra.ru/228993/nastupaet-era-nevidimyh-gadzhetov/

[88] Если приватности нет — о ней не тревожьтесь!: https://www.computerra.ru/228986/esli-privatnosti-net-o-nej-ne-trevozhtes/

[89] Google начала регистрировать домены в зоне .app: https://ain.ua/2018/05/10/google-app-domeny

[90] Google + Microsoft: как два извечных конкурента вместе пытаются изменить мир: https://kanobu.ru/articles/google-microsoft-kak-dva-izvechnyih-konkurenta-vmeste-pyitayutsya-izmenit-mir-371986/

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

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

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

[94] Источник: https://habr.com/post/358486/?utm_source=habrahabr&utm_medium=rss&utm_campaign=358486

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