Дайджест свежих материалов из мира фронтенда за последнюю неделю №275 (7 — 13 августа 2017)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

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

[8] Подкаст «Пятиминутка React» #30 : http://5minreact.ru/30-setstate-practice/

[9] Подкаст «Пятиминутка Angular» #1 : https://soundcloud.com/5minangular/pyatiminutka-angular-1-angular-5-beta-3-angular-cli-13-createangularcomponents

[10] Подкаст «Фронтенд Юность (18+)» #14: https://soundcloud.com/frontend_u/e14

[11] Подкаст «devschacht», Выпуск №6: https://soundcloud.com/devschacht/devschacht-6

[12] Подкаст «Drinkcast» #3: http://spb-frontend.ru/podcast/3/

[13] Нужно ли фронтендеру знать алгоритмы и паттерны проектирования?: https://www.youtube.com/watch?v=e2nW8Lq4zho

[14] Totally Tooling Tips: Webpack Tips: https://www.youtube.com/watch?v=zFoBYfMLUCM

[15] О чем всегда стоит помнить при локализации веб-сайта, чтобы потом не было стыдно: https://habrahabr.ru/company/lokalise/blog/335200/

[16] Ускорьте ваш сайт с помощью машинного обучения: https://habrahabr.ru/company/nixsolutions/blog/335122/

[17] Календарь событий по фронтенду: https://github.com/web-standards-ru/calendar

[18] W3C рассматривает вопрос перевода предыдущих спецификаций HTML в разряд устаревших: http://www.opennet.ru/opennews/art.shtml?num=47012

[19] Урок-введение по WebAssembly на примере игры «Жизнь»: https://tproger.ru/translations/webassembly-tutorial-first-steps/

[20] .NET и WebAssembly — это будущее фронтенда?: https://www.hanselman.com/blog/NETAndWebAssemblyIsThisTheFutureOfTheFrontend.aspx

[21] Какие функции Progressive Web App будет поддерживать Apple?: https://cloudfour.com/thinks/what-progressive-web-app-features-will-apple-support/

[22] Google призывает оптимизаторов помочь JS-разработчикам понять SEO: https://www.searchengines.ru/google-js.html

[23] JavaScript и SEO: разница между Crawling и Indexing: http://www.stateofdigital.com/javascript-seo-crawling-indexing/

[24] Разработчик из Shuvayatra делится опытом внедрения Progressive Web App  в контексте SEO: https://medium.com/@tyohan/progressive-web-app-search-engine-optimization-in-shuvayatra-app-a7c111671338

[25] Вредоносный код в npm-пакетах и борьба с ним: https://habrahabr.ru/company/ruvds/blog/335144/

[26] Официальный релиз Bootstrap 4 beta: http://blog.getbootstrap.com/2017/08/10/bootstrap-4-beta/

[27] Переход с Bootstrap 4 Alpha 6 на Beta: https://medium.com/wdstack/upgrade-bootstrap-4-alpha-6-to-beta-ca582f15ee32

[28] JPNG.svg: https://codepen.io/shshaw/full/LVKEdv

[29] Основные ошибки accessability при разработке сайта: https://habrahabr.ru/post/335352/

[30] Создание доступного SPA: https://codeburst.io/building-accessible-single-page-apps-2ea3e4fbbc01

[31] Доступные таблицы на SVG : https://tink.uk/accessible-svg-tables/

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

[33] Transitions with JavaScript: https://codepen.io/collection/nVPvGj/

[34] Производительные веб-анимации и интерактив: достигаем 60 FPS: https://blog.algolia.com/performant-web-animations/

[35] Креативные переходы между страницами с эффектом морфинга: https://tympanus.net/codrops/2017/08/08/morphing-page-transition/

[36] Руководство по покадровой анимации с помощью CSS и JavaScript: https://www.sitepoint.com/frame-by-frame-animation-css-javascript/

[37] Свойства для интервалов (*-gap) становятся универсальными: http://css-live.ru/vecssti-s-polej/svojstva-dlya-intervalov-gap-stanovyatsya-universalnymi.html

[38] Модуль CSS-изоляции (CSS Containment Level 1) стал кандидатом в рекомендации: http://css-live.ru/vecssti-s-polej/modul-css-izolyacii-css-containment-level-1-stal-kandidatom-v-rekomendacii.html

[39] EqualizeCSS: https://equalizecss.com/

[40] Практическое руководство по использованию CSS Modules в React приложениях: https://habrahabr.ru/post/335244/

[41] Изоляция css стилей с помощью компонентного подхода: https://habrahabr.ru/post/335510/

[42] Развенчание мифов о Hex цветах в CSS: https://medium.com/dev-channel/css-hex-colors-demystified-51c712179982

[43] Font-size: неожиданно сложное CSS-свойство : https://manishearth.github.io/blog/2017/08/10/font-size-an-unexpectedly-complex-css-property/

[44] Shadow DOM: Быстрые и инкапсулированные стили: https://meowni.ca/posts/shadow-dom/

[45] Веб-шрифты: когда вы нуждаетесь в них, а когда нет: https://medium.com/@david.gilbertson/web-fonts-when-you-need-them-when-you-dont-a3b4b39fe0ae

[46] Наследование в CSS: введение: https://www.sitepoint.com/css-inheritance-introduction/

[47] Лучший способ сделать “Wrapper”-обертку на CSS: https://css-tricks.com/best-way-implement-wrapper-css/

[48] Flex Grow и Flex Basis: адаптивная раскладка страниц: https://codeburst.io/flex-grow-flex-basis-css-responsive-page-layouts-7fc3f26100f0

[49] Вёрстка реальных проектов на гридах (CSS Grid Layout) уже сейчас: http://css-live.ru/articles/vyorstka-realnyx-proektov-na-gridax-css-grid-layout-uzhe-sejchas.html

[50] Разница между явными и неявными сетками: https://css-tricks.com/difference-explicit-implicit-grids/

[51] Простые Sass миксины для улучшения браузерной совместимости для CSS Grid Layouts: https://css-tricks.com/browser-compatibility-css-grid-layouts-simple-sass-mixins/

[52] Изменения в спецификации Grid и использование многоколоночного макета: https://www.rachelandrew.co.uk/archives/2017/08/08/changes-to-the-grid-spec-and-taking-on-multi-column-layout/

[53] Создание графиков на CSS с помощью гридов и пользовательских свойств: https://css-tricks.com/css-charts-grid-custom-properties/

[54] chrome-css-grid-highlighter: https://github.com/ademilter/chrome-css-grid-highlighter

[55] ES Modules в Node уже сегодня: https://blogs.windows.com/msedgedev/2017/08/10/es-modules-node-today/

[56] JavaScript для людей, которые ненавидят JavaScript: https://zachholman.com/posts/javacript-haters

[57] Машинное обучение в Javascript: https://bondifrench.github.io/ml-in-js/

[58] JavaScript паттерны: паттерн Observer: https://www.sitepoint.com/javascript-design-patterns-observer-pattern/

[59] Как все время быть в теме экосистемы JavaScript?: https://medium.com/@sergiodxa/how-to-keep-updated-with-the-javascript-ecosystem-97c8e36c2c3f

[60] Как на самом деле работает JavaScript: часть 1: https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

[61] Ленивая загрузка изображений с помощью Intersection Observer: https://deanhume.com/Home/BlogPost/lazy-loading-images-using-intersection-observer/10163

[62] Бинарный поиск в JavaScript. Практический пример: https://codeburst.io/binary-search-in-javascript-a-practical-example-7fda60ce59a1

[63] Как мы создали наше первое full-stack JavaScript приложение за три недели: https://medium.com/ladies-storm-hackathons/how-we-built-our-first-full-stack-javascript-web-app-in-three-weeks-8a4668dbd67c

[64] Улучшаем разговоры с помощью Perspective API: https://css-tricks.com/improving-conversations-using-perspective-api/

[65] Как создать UI поиска по GitHub за 60 минут: https://medium.appbase.io/how-to-build-a-github-search-ui-in-60-minutes-295109211c70

[66] Лучшие мобильные компоненты для PWA в VueJs: https://medium.com/skyshidigital/best-mobile-components-for-progressive-web-apps-in-vuejs-d0a4cdcc2b68

[67] React + Webpack: замешательство, фрустрация и как Vue.js может помочь: https://codeburst.io/react-webpack-confusion-frustration-and-how-vue-js-can-help-97ccab801c25

[68] Компонент Yandex Maps для VueJS: https://github.com/PNKBizz/vue-yandex-map

[69] Почему React лучше, чем Vue.js. И когда.: https://blog.cloudboost.io/why-react-is-better-than-vue-js-and-when-9545049652d8

[70] React Progressive Web Apps  — часть Part 1: https://medium.com/@gethylgeorge/react-progressive-web-apps-part-1-1cf381421672

[71] Получение данных из API с React.JS: https://blog.hellojs.org/fetching-api-data-with-react-js-460fe8bbf8f2

[72] Использование Create React App с Relay Modern: https://medium.com/@tarkus/using-create-react-app-with-relay-modern-989c078fa892

[73] react-beautiful-dnd: https://github.com/atlassian/react-beautiful-dnd

[74] Как Angular защищает нас от XSS атак?: https://hackernoon.com/how-angular-protects-us-from-xss-attacks-3cb7a7d49d95

[75] MEAN Stack: разработка приложения с помощью Angular 2+ и Angular CLI: https://www.sitepoint.com/mean-stack-angular-2-angular-cli/

[76] Избегайте общих проблем с модулями в Angular: https://blog.angularindepth.com/avoiding-common-confusions-with-modules-in-angular-ada070e6891f

[77] js-meter: https://github.com/wahengchang/js-meter

[78] posterus: https://github.com/Mitranim/posterus

[79] nanoid: https://github.com/ai/nanoid

[80] react-simple-maps: https://www.react-simple-maps.io/

[81] DisplayJS: https://display.js.org/

[82] У Mozilla есть план, как победить Chrome. Встречайте Firefox 57 и боевую лисичку в броне : https://geektimes.ru/post/291853/

[83] Релиз Firefox 55: http://www.opennet.ru/opennews/art.shtml?num=46987

[84] разбор деталей от Марата Таналина : http://tanalin.com/blog/2017/08/firefox-55/

[85] Firefox 55: first desktop browser to support WebVR: https://hacks.mozilla.org/2017/08/firefox-55-supports-webvr/

[86] Фишеры уже два месяца «охотятся» на разработчиков расширений для Chrome: https://xakep.ru/2017/08/08/phishing-chrome-addons/

[87] Выпуск web-браузера Opera 47: http://www.opennet.ru/opennews/art.shtml?num=46995

[88] Релиз Safari Technology Preview Release 37: https://webkit.org/blog/7862/release-notes-for-safari-technology-preview-release-37/

[89] Новый рубеж взят: стоимость биткоина превысила $4000: https://3dnews.ru/956892/

[90] Foursquare снова обновил Swarm. Теперь это журнал ваших путешествий: https://ain.ua/2017/08/09/foursquare-snova-obnovil-swarm-teper-eto-zhurnal-vashix-puteshestvij

[91] Facebook представила похожий на YouTube видеосервис с пользовательскими и профессиональными видео: https://vc.ru/n/facebook-watch

[92] SoundCloud нашла финансирование для дальнейшей работы и сменила гендиректора: https://vc.ru/n/soundcloud-saved

[93] Криптовалюты и блокчейн: история и перспективы рынка: https://vc.ru/p/young-bitcoin

[94] Киберспорт могут включить в программу Олимпийских игр 2024 года: https://keddr.com/2017/08/kibersport-mogut-vklyuchit-v-programmu-olimpiyskih-igr-2024-goda/

[95] «Дефейс» дорожных знаков может дезориентировать беспилотные автомобили: https://xakep.ru/2017/08/08/robust-physical-perturbations/

[96] Бот OpenAI победил трёх топовых профессионалов в Dota 2 : https://geektimes.ru/post/291983/

[97] Как устроен «Яндекс.Навигатор»: http://www.the-village.ru/village/business/how/278022-navigator

[98] Алгоритмы компрессии — введение с хорошей визуализацией: https://unwttng.com/compression-decompressed

[99] Руководство по участию в Open Source: https://github.com/tunnckoCore/contributing/blob/master/CONTRIBUTING.md

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

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

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

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

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