- PVSM.RU - https://www.pvsm.ru -

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

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

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

Медиа [1]    |    Веб-разработка [2]    |    CSS [3]    |    JavaScript [4]    |    Браузеры [5]

Медиа

• podcast Подкаст «UnderJS Podcast» #6 — Деоптимизация React внутри V8, preventExtension курильщика [6]
• podcast Подкаст «CSSSR»: Argumentarium —Хуки, декларативность и классы [7]
• podcast Подкаст «Пятиминутка React» — Reatom vs Redux [8]
• video АйТиБорода: Всё про Node.js / От 0 до 2,5к долларов за год / Интервью с Backend JS Developer [9]
• video FrontSpot Show #13: Виталий Бобров про переезд в Польшу и мировом турне с JS докладами. [10]
• video Repozitorro #30 — Выглядит — просто, поэтому заглянем «под капот» [11]
• podcast en Подкаст «Веб-стандарты» №196. Eva Ferreira и Ian Pouncey on chromakey, Argentina, a11y, SEO, HTML, ARIA [12]
• podcast en Подкаст «Веб-стандарты» №197. FrontendConf, Web Components, AOM, ARIA challenges, browser support, dialogs и date pickers [13]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №384 (7 — 13 октября 2019) - 12 Веб-разработка

• habr Интервью с веб-разработчиком Pornhub [14]
• habr Как простой <img> тэг может стать высоким риском для бизнеса? [15]
• Избыточная вариативность во Front-end Stack: суть и причины [16]
• Ссылочные атрибуты nofollow, sponsored и ugc и их влияние на SEO [17]
• en W3C отмечает двадцатипятилетний юбилей [18]
• en Анализ использования HTML на ~8 миллионов страницах (и что это значит для современного SEO) [19]
• en Каскадирование инвалидации кеша [20]
• en Немного практики с элементом HTML Dialog [21]
• en Разница между форматами шрифтов [22]
• en Превратите ваш сайт в PWA [23]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №384 (7 — 13 октября 2019) - 32 CSS

• habr Sass MediaScreen — Определяем девайсы на CSS [35]
• Современный сброс стилей CSS [36]
• Извлекаем критический CSS [37]
• en Презентация модулей в Sass [38]
• en Sass: модульная система запущена [39]
• en Clipping, Clipping, and More Clipping! Примеры креативного использования свойства clip-path [40]
• en Шаблоны для практического использования пользовательских свойств CSS [41]
• en CSS и окружности [42]
• en Руководство по новым и экспериментальным инструментам для работы с CSS в Firefox DevTools [43]
• en Можно ли нам стилизовать элемент select, пожалуйста ?! [44]
• en Toucaan — переосмысление CSS фреймворков [45]
• video en Новый мощный CSS для стилизации маркеров, чисел и маркеров в списках [46]

JavaScript

• habr TypeScript. Мощь never [47]
• habr 12 возможностей ES10 в 12 простых примерах [48]
• habr Что лучше выбрать в 2020 году — React или Vue? [49]
• Как работать с localStorage в JavaScript [50]
• en Как определить Ad Blocker [51]
• en Создание приложения распознавания лиц на JavaScript, которое работает как в фильмах [52]
• en Руководство по JavaScript в стиле игры-«рогалика» [53]
• en Соглашения об именовании в JavaScript [54]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №384 (7 — 13 октября 2019) - 85 Браузеры

• habr Chrome полностью заблокирует смешанный контент [88]
• habr 10 малоизвестных возможностей инструментов разработчика Chrome [89]
• В Firefox добавлена поддержка работы в режиме киоска [90]
• Код Firefox полностью избавлен от XBL [91]
• Google добавила вспомогательные функции для слепых и слабовидящих пользователей в Chrome и Maps [92]
• Chrome Web Store блокировал публикацию обновления uBlock Origin [93]

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

Дайджест за прошлую неделю [94].
Материал подготовили dersmoll [95] и alekskorovin [96].

Автор: alexzfort

Источник [97]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «UnderJS Podcast» #6 — Деоптимизация React внутри V8, preventExtension курильщика: https://underjs.ru/podcast/2019/10/08/deoptimizing-v8-react.html

[7] Подкаст «CSSSR»: Argumentarium —Хуки, декларативность и классы: https://soundcloud.com/csssr/argumentarium-khuki-deklarativnost-i-klassy

[8] Подкаст «Пятиминутка React» — Reatom vs Redux: https://soundcloud.com/5minreact/061-reatom-vs-redux

[9] АйТиБорода: Всё про Node.js / От 0 до 2,5к долларов за год / Интервью с Backend JS Developer: https://www.youtube.com/watch?v=qQwcCS8K_K0

[10] FrontSpot Show #13: Виталий Бобров про переезд в Польшу и мировом турне с JS докладами. : https://www.youtube.com/watch?v=va0eCh7obn4

[11] Repozitorro #30 — Выглядит — просто, поэтому заглянем «под капот»: https://www.youtube.com/watch?v=H3hCDRm0AG4

[12] Подкаст «Веб-стандарты» №196. Eva Ferreira и Ian Pouncey on chromakey, Argentina, a11y, SEO, HTML, ARIA: https://medium.com/web-standards/episode-196-346ab18b83d3

[13] Подкаст «Веб-стандарты» №197. FrontendConf, Web Components, AOM, ARIA challenges, browser support, dialogs и date pickers: https://medium.com/web-standards/episode-197-b73dcbabfe22

[14] Интервью с веб-разработчиком Pornhub: https://habr.com/ru/company/itsumma/blog/471034/

[15] Как простой <img> тэг может стать высоким риском для бизнеса? : https://habr.com/ru/post/470996/

[16] Избыточная вариативность во Front-end Stack: суть и причины: https://dou.ua/lenta/articles/front-end-stack-variability/

[17] Ссылочные атрибуты nofollow, sponsored и ugc и их влияние на SEO: https://www.searchengines.ru/link-attributes-google.html

[18] W3C отмечает двадцатипятилетний юбилей: https://www.smashingmagazine.com/2019/10/happy-birthday-w3c/

[19] Анализ использования HTML на ~8 миллионов страницах (и что это значит для современного SEO): https://moz.com/blog/a-breakdown-of-html-usage-across-8-million-pages

[20] Каскадирование инвалидации кеша: https://philipwalton.com/articles/cascading-cache-invalidation/

[21] Немного практики с элементом HTML Dialog : https://css-tricks.com/some-hands-on-with-the-html-dialog-element/

[22] Разница между форматами шрифтов : https://medium.com/@vilcins/difference-between-font-formats-2e860058b18d

[23] Превратите ваш сайт в PWA: https://medium.com/notonlycss/turn-your-website-into-a-pwa-6aaecb95f8b9

[24] Оптимизация загрузки JavaScript-кода в Wikipedia: https://habr.com/ru/company/ruvds/blog/470874/

[25] Время до первого байта: что это такое и почему это важно: https://habr.com/ru/company/ruvds/blog/470868/

[26] [Не] используйте CDN: https://habr.com/ru/post/471090/

[27] Изображения, сделанные правильно: веб-графика, которая хороша до последнего байта: https://evilmartians.com/chronicles/images-done-right-web-graphics-good-to-the-last-byte-optimization-techniques

[28] Рецепты для тестирования производительности SPA в WebPageTest : https://css-tricks.com/recipes-for-performance-testing-single-page-applications-in-webpagetest/

[29] Верховный суд присудил победу слепому человеку, который подал в суд на Domino за-за доступности: https://www.cnbc.com/2019/10/07/dominos-supreme-court.html

[30] Доступность: веб-ссылки должны быть ссылками, а веб-кнопки должны быть кнопками: https://medium.com/better-programming/accessibility-web-links-should-be-links-and-web-buttons-should-be-buttons-182ff042d087

[31] Что такое ARIA? Руководство для начинающих по ARIA : https://www.lullabot.com/articles/what-heck-aria-beginners-guide-aria-accessibility

[32] Подборка креативных сайтов Inspirational Websites Roundup #9: https://tympanus.net/codrops/2019/10/09/inspirational-websites-roundup-9/

[33] legendary-cursor — креативный курсор на WebGL : https://github.com/Domenicobrz/legendary-cursor

[34] Создание эффекта водо-искажения с помощью Three.js : https://tympanus.net/codrops/2019/10/08/creating-a-water-like-distortion-effect-with-three-js/

[35] Sass MediaScreen — Определяем девайсы на CSS: https://habr.com/ru/post/471044/

[36] Современный сброс стилей CSS: https://medium.com/@stasonmars/%D1%81%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D0%B8%CC%86-%D1%81%D0%B1%D1%80%D0%BE%D1%81-css-f5816963c82b

[37] Извлекаем критический CSS: https://medium.com/web-standards/critical-css-39e479af038e

[38] Презентация модулей в Sass: https://css-tricks.com/introducing-sass-modules/

[39] Sass: модульная система запущена: http://sass.logdown.com/posts/7858341-the-module-system-is-launched

[40] Clipping, Clipping, and More Clipping! Примеры креативного использования свойства clip-path: https://css-tricks.com/clipping-clipping-and-more-clipping/

[41] Шаблоны для практического использования пользовательских свойств CSS: https://css-tricks.com/patterns-for-practical-css-custom-properties-use/

[42] CSS и окружности: https://cloudfour.com/thinks/css-circles/

[43] Руководство по новым и экспериментальным инструментам для работы с CSS в Firefox DevTools: https://www.smashingmagazine.com/2019/10/guide-new-experimental-css-devtools-firefox/

[44] Можно ли нам стилизовать элемент select, пожалуйста ?!: http://gwhitworth.com/blog/2019/10/can-we-please-style-select/

[45] Toucaan — переосмысление CSS фреймворков: https://bubblin.io/blog/toucaan-introduction

[46] Новый мощный CSS для стилизации маркеров, чисел и маркеров в списках: https://www.youtube.com/watch?v=2awepiNoaZI

[47] TypeScript. Мощь never: https://habr.com/ru/post/471026/

[48] 12 возможностей ES10 в 12 простых примерах: https://habr.com/ru/company/plarium/blog/471142/

[49] Что лучше выбрать в 2020 году — React или Vue?: https://habr.com/ru/company/ruvds/blog/470413/

[50] Как работать с localStorage в JavaScript: https://medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D1%82%D1%8C-%D1%81-localstorage-%D0%B2-javascript-5aad737535d4

[51] Как определить Ad Blocker: https://davidwalsh.name/detect-ad-blocker

[52] Создание приложения распознавания лиц на JavaScript, которое работает как в фильмах: https://levelup.gitconnected.com/make-your-own-facial-recognition-app-that-works-like-the-ones-in-the-movies-ca0dffd56237

[53] Руководство по JavaScript в стиле игры-«рогалика»: https://nluqo.github.io/broughlike-tutorial/

[54] Соглашения об именовании в JavaScript: https://www.robinwieruch.de/javascript-naming-conventions

[55] Наследование в JavaScript с точки зрения занудного ботаника: Фабрика Конструкторов: https://habr.com/ru/post/470994/

[56] Высокоуровневый await: https://v8.dev/features/top-level-await

[57] Понимание This, Bind, Call и Apply в JavaScript: https://www.digitalocean.com/community/conceptual_articles/understanding-this-bind-call-and-apply-in-javascript

[58] Когда использовать Map вместо простого JavaScript-объекта : https://dmitripavlutin.com/maps-vs-plain-objects-javascript/

[59] JavaScript Promises: От нуля до героя, плюс шпаргалка: https://medium.com/dailyjs/javascript-promises-zero-to-hero-plus-cheat-sheet-64d75051cffa

[60] Полное руководство по использованию массивов в JavaScript : https://medium.com/better-programming/the-complete-guide-to-using-arrays-in-javascript-c77f1abab50e

[61] История троеточия в Javascript: https://dev.to/blacksonic/the-tale-of-three-dots-in-javascript-4287

[62] Встречайте Create Next App: https://nextjs.org/blog/create-next-app

[63] Часть 1: вопросы для интервью по React : https://www.js-tutorials.com/interviews-questions/react-interview-questions-part1/

[64] Полное руководство по аутентификации в Next.js с Auth0 : https://auth0.com/blog/ultimate-guide-nextjs-authentication-auth0/

[65] Как реализовать Idle Timeout в React : https://blog.bitsrc.io/how-to-implement-idle-timeout-in-react-830d21c32942

[66] Использование JSX для вашей собственной легкой декларативной UI библиотеки : https://medium.com/variant-as/using-jsx-for-your-own-lightweight-declarative-ui-library-a773d3796475

[67] 10 советов и приемов, которые помогут вам стать лучшим разработчиком на VueJS: https://habr.com/ru/post/471212/

[68] MSK VUE.JS meetup #3 в Mail.ru Group: материалы с митапа: https://habr.com/ru/company/mailru/blog/470940/

[69] Создание библиотеки компонентов Vue.js в качестве модуля (часть 1): https://medium.com/@olivierpicault/create-a-vue-js-component-library-as-a-module-part-1-a1116e632751

[70] Мгновенный поиск с Vue.js и Axios: https://medium.com/better-programming/instant-search-with-vue-js-and-axios-5b78a3a59f01

[71] Vue-Next и почему Map решают большую проблему: https://medium.com/js-dojo/vue-next-and-why-maps-solve-a-big-problem-4bd1b8b3cbc6

[72] Как шарить компоненты Vue между приложениями: https://blog.bitsrc.io/how-to-easily-share-vue-components-between-applications-1d30a1ad4e4d

[73] Разделение Vue.js компонентов из Vuex Store: https://markus.oberlehner.net/blog/decouple-vue-components-from-the-vuex-store/

[74] Управление SVG изображениями в приложениях на Vue.js : https://codeburst.io/managing-svg-images-in-vue-js-applications-88a0570d8e88

[75] Vue3: Первый взгляд: https://www.youtube.com/watch?v=eWbVhFxk_ps&amp;feature=youtu.be

[76] Создайте приложение для опросов в реальном времени, используя Vue и Socket.io: https://www.telerik.com/blogs/build-a-real-time-polling-application-using-vue-and-socket.io

[77] Взаимодействие между компонентами Angular с использованием RxJS: https://habr.com/ru/post/471100/

[78] Что под капотом Angular 8?: https://www.creativebloq.com/how-to/angular-8

[79] Миграция в Angular 8 от TSLint до ESLint: https://medium.com/create-code/migrate-angular-8-from-tslint-to-eslint-4b0c44c8ae38

[80] Отслеживание запросов в Angular приложении с инжекторами дочерних модулей без отложенной загрузки: https://blog.angularindepth.com/requests-tracking-in-angular-application-with-child-module-injectors-without-lazy-loading-7227bd01d97a

[81] Ember-engines: что, что нет и почему? — часть 1: https://medium.com/developer-paradise/ember-engines-the-what-what-not-and-when-part-1-49187c949db5

[82] О {{mut}} и двусторонний биндинг: https://www.pzuraq.com/on-mut-and-2-way-binding/

[83] Промисы и UI состояния в Ember.js: https://embersteps.com/promises-and-ui-states-in-ember-js/

[84] Ember и GraphQL: быстрый пример: https://www.youtube.com/watch?v=YxRvXgDIHW8

[85] roughViz: https://github.com/jwilber/roughViz

[86] is-website-vulnerableм: https://github.com/lirantal/is-website-vulnerable

[87] Как сделать JavaScript локализацию с помощью jQuery.i18n : https://medium.com/better-programming/how-to-do-javascript-localization-with-jquery-i18n-1320ff5d7a4e

[88] Chrome полностью заблокирует смешанный контент: https://habr.com/ru/company/globalsign/blog/471078/

[89] 10 малоизвестных возможностей инструментов разработчика Chrome: https://habr.com/ru/company/ruvds/blog/470411/

[90] В Firefox добавлена поддержка работы в режиме киоска: https://www.opennet.ru/opennews/art.shtml?num=51628

[91] Код Firefox полностью избавлен от XBL : https://www.opennet.ru/opennews/art.shtml?num=51646

[92] Google добавила вспомогательные функции для слепых и слабовидящих пользователей в Chrome и Maps: https://itc.ua/news/google-dobavila-vspomogatelnye-funkczii-dlya-slepyh-i-slabovidyashhih-polzovatelej-v-chrome-i-maps/

[93] Chrome Web Store блокировал публикацию обновления uBlock Origin: https://www.opennet.ru/opennews/art.shtml?num=51664

[94] Дайджест за прошлую неделю: https://habr.com/ru/post/470361/

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

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

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