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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №436 (5 — 11 октября 2020) - 1

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

Медиа

• Подкаст CSSSR: CSS Grid в Chrome DevTools 87, микросервисы, TypeScript-хитрости, Spamtoberfest, эра VS Code [6]
• podcast Подкаст «Веб-стандарты» №250. Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс [7]
• podcast Подкаст «Фронтенд Юность» №159: SOLID vs SOLOD [8]

Веб-разработка

• habr Создание favicon для сайта 2020 [9]
• Использование политики безопасности контента (CSP) для защиты веб-приложений [10]
• en Расширение ответственности фронтенд-разработчиков [11]
• en Интернет не был создан для обеспечения конфиденциальности, но мог бы [12]
• en Ваше одностраничное приложение теперь представляет собой полифил [13]

CSS

• en CSS Variables 101: подробное руководство по CSS переменным с примерами [28]
• en Анимация счетчиков с помощью CSS [29]
• en :focus-visible уже здесь [30]
• en Элегантное решение на CSS Grid для макетов с отцентрированным контентом, который разорван полноширинным блоком [31]
• en Руководство по HTML/CSS формам (без хаков) [32]
• en Красивые примеры 3D трансформаций в CSS [33]
• en Создание отзывчивого медиa-браузера на CSS [34]
• en Балансировка оси с помощью Flexbox [35]
• en Странный, но работающий Flex: интерактивные диаграммы на Flexbox [36]
• en clamp() для отзывчивого дизайна [37]

JavaScript

• Лучшая практика обработки ошибок в современном JavaScript [38]
• habr Javascript фреймворк разработки бизнес приложений [39]
• en Обработка range-запросов в сервис-воркере [40]
• en Как работать с мультиселект-элементом в vanilla JS [41]
• en Как сделать ненавязчивую кнопку прокрутки вверх [42]
• en Что ждет JavaScript в будущем? [43]
• en Что меня восхищает в TypeScript 4.0 [44]

Браузеры

• В Chrome началась активация IETF QUIC и HTTP/3 [71]
• Релиз Chrome 86 [72]
• Google Chrome остаётся самым популярным браузером в Китае [73]
• Microsoft рассказала, почему браузеры в Windows 10 создают так много процессов [74]
• Microsoft анонсировала новые функции для Microsoft Edge [75]
• en История веб-браузера [76]

← Дайджест за прошлую неделю [77]
Материал подготовили dersmoll [78] и alekskorovin [79]

Автор: alexzfort

Источник [80]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст CSSSR: CSS Grid в Chrome DevTools 87, микросервисы, TypeScript-хитрости, Spamtoberfest, эра VS Code: https://soundcloud.com/csssr/css-grid-v-chrome-devtools-87-mikroservisy-typescript-khitrosti-spamtoberfest-era-vs-code

[7] Подкаст «Веб-стандарты» №250. Edge в VS Code, инспектор гридов, gap и флексы, математика в CSS, Hacktoberfest, опенсорс: https://soundcloud.com/web-standards/episode-250

[8] Подкаст «Фронтенд Юность» №159: SOLID vs SOLOD: https://soundcloud.com/frontend_u/e159

[9] Создание favicon для сайта 2020: https://habr.com/ru/post/522844/

[10] Использование политики безопасности контента (CSP) для защиты веб-приложений: https://webdevblog.ru/ispolzovanie-politiki-bezopasnosti-kontenta-csp-dlya-zashhity-veb-prilozhenij/

[11] Расширение ответственности фронтенд-разработчиков: https://css-tricks.com/the-widening-responsibility-for-front-end-developers/

[12] Интернет не был создан для обеспечения конфиденциальности, но мог бы: https://www.coindesk.com/web-privacy-surveillance-2030

[13] Ваше одностраничное приложение теперь представляет собой полифил : https://itnext.io/your-single-page-app-is-now-a-polyfill-7881fb01694e

[14] Более приватный способ измерения конверсий рекламы — Event Conversion Measurement API.: https://web.dev/conversion-measurement/

[15] О Web Share API: https://css-tricks.com/on-the-web-share-api/

[16] The File System Access API: упрощение доступа к локальным файлам: https://web.dev/file-system-access/

[17] Релиз Webpack 5: https://defront.ru/posts/2020/10-october/11-release-webpack-5/

[18] Что нового в DevTools (Chrome 86): https://developers.google.com/web/updates/2020/08/devtools

[19] RSLint — JS-линтер, написанный на Rust, максимально быстрый, настраиваемый и простой в использовании.: https://github.com/RDambrosio016/RSLint

[20] npmx — продвинутый CLI интерфейс для npm: https://github.com/terminal-junkies/npmx

[21] Снижение влияния сторонних тегов на скорость загрузки сайта: https://andydavies.me/blog/2020/10/02/reducing-the-site-speed-impact-of-third-party-tags/

[22] Улучшение HTML5 Lazy Loading с помощью CSS и минимального JavaScript: https://levelup.gitconnected.com/enhancing-html-5-lazy-loading-with-css-and-minimal-javascript-afe274088f0b

[23] Cumulative Layout Shift на практике: https://nicj.net/cumulative-layout-shift-in-practice/

[24] Cumulative Layout Shift в реальном мире: https://nicj.net/cumulative-layout-shift-in-the-real-world/

[25] Доступность в Интернете: определения и сокращения : https://www.lullabot.com/articles/web-accessibility-definitions-and-acronyms

[26] Видео переходы на WebGL с Curtains.js: https://tympanus.net/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/

[27] Интерактивный Webgl SLider : https://codepen.io/dev_loop/full/eYZqMwV

[28] CSS Variables 101: подробное руководство по CSS переменным с примерами: https://ishadeed.com/article/css-vars-101/

[29] Анимация счетчиков с помощью CSS: https://css-tricks.com/animating-number-counters/

[30] :focus-visible уже здесь: https://matthiasott.com/notes/focus-visible-is-here

[31] Элегантное решение на CSS Grid для макетов с отцентрированным контентом, который разорван полноширинным блоком: https://joshwcomeau.com/css/full-bleed/

[32] Руководство по HTML/CSS формам (без хаков): https://www.sitepoint.com/a-guide-to-html-css-forms-no-hacks/

[33] Красивые примеры 3D трансформаций в CSS : https://polypane.app/css-3d-transform-examples/

[34] Создание отзывчивого медиa-браузера на CSS: https://piccalil.li/tutorial/build-a-responsive-media-browser-with-css/

[35] Балансировка оси с помощью Flexbox: https://css-tricks.com/balancing-on-a-pivot-with-flexbox/

[36] Странный, но работающий Flex: интерактивные диаграммы на Flexbox: https://blog.scottlogic.com/2020/10/09/charts-with-flexbox.html

[37] clamp() для отзывчивого дизайна: https://calebhearth.com/clamp-for-responsive-design

[38] Лучшая практика обработки ошибок в современном JavaScript: https://habr.com/ru/company/skillfactory/blog/522218/

[39] Javascript фреймворк разработки бизнес приложений: https://habr.com/ru/post/520012/

[40] Обработка range-запросов в сервис-воркере: https://web.dev/sw-range-requests/

[41] Как работать с мультиселект-элементом в vanilla JS: https://gomakethings.com/how-to-work-with-multiselect-elements-in-vanilla-js/

[42] Как сделать ненавязчивую кнопку прокрутки вверх : https://css-tricks.com/how-to-make-an-unobtrusive-scroll-to-top-button/

[43] Что ждет JavaScript в будущем? : https://blog.bitsrc.io/whats-in-the-future-for-javascript-b58fc736f1c3

[44] Что меня восхищает в TypeScript 4.0: https://www.telerik.com/blogs/what-i-am-excited-about-typescript-4-0

[45] Объектно-ориентированный JavaScript простыми словами: https://habr.com/ru/post/522380/

[46] Объектно-ориентированный JavaScript: прототипы: https://dailycoding.io/article/8Xdk1IYCjvk6tfas7Nzp

[47] Простое объяснение итераторов JavaScript: https://dmitripavlutin.com/javascript-iterators/

[48] Объяснение Event Loop и Call Stack в JavaScript: https://felixgerschau.com/javascript-event-loop-call-stack/

[49] Начало работы с современным JavaScript — классы: https://indepth.dev/getting-started-with-modern-javascript-classes/

[50] Почему мы выбрали MobX, а не Redux, и как его использовать эффективнее: https://habr.com/ru/company/mailru/blog/522312/

[51] Мифы о useEffect: https://habr.com/ru/post/522268/

[52] Как создать прогрессивное веб-приложение на React (PWA): https://www.codica.com/blog/how-to-create-pwa-with-react/

[53] React Hooks: как начать работу и создать свой собственный: https://www.sitepoint.com/react-hooks/

[54] JavaScript-less Static SSR с использованием Styled Components: https://www.bayanbennett.com/posts/javascript-less-static-ssr-using-styled-components

[55] Что такое Render в React и как его зафорсить?: https://www.telerik.com/blogs/what-is-render-react-how-do-you-force-it

[56] Создание плагинов для Figma с помощью React: https://blog.logrocket.com/building-figma-plugins-with-react/

[57] Полезные инструменты в веб-разработке на Vue.js: https://www.smashingmagazine.com/2020/10/useful-tools-vue-javascript-web-development/

[58] Приложение To-Do: Composition API как альтернатива Vuex: https://dev.to/diegolepore/to-do-app-composition-api-as-an-alternative-to-vuex-1hb0

[59] Angular Component Libraries и Accessibility: https://www.deque.com/blog/angular-component-libraries-and-accessibility/

[60] Inputs & Outputs: Работа с компонентами Angular : https://medium.com/better-programming/inputs-and-outputs-working-with-angular-components-f3204e6599f

[61] Совместимые компоненты: декларативный подход в Angular: https://indepth.dev/compliant-components-declarative-approach-in-angular/

[62] Демистифицируем angular/router: что такое RouterScroller и чем он полезен?: https://indepth.dev/demystifying-angular-router-what-is-routerscroller-and-why-is-it-useful-2/

[63] The Ember Times — Issue No. 165: https://dev.to/embertimes/the-ember-times-issue-no-165-29a8

[64] Использование in-element в Ember.js: https://balinterdi.com/blog/using-in-element-in-ember-js/

[65] Более простые и мощные компоненты в Ember Octane с Glimmer Components : https://simplabs.com/blog/2020/10/05/simpler-and-more-powerful-components-in-ember-octane-with-glimmer-components/

[66] React сквозь призму Ember: структура приложения и инструменты: https://dockyard.com/blog/2020/10/08/react-through-ember-eyes-application-structure-and-tooling

[67] Шаблоны React Component в Ember.js: https://www.effective-ember.com/blog/react-component-patterns/

[68] ZzFXM — Крошечный генератор музыки на JavaScipt: https://keithclark.co.uk/articles/zzfxm/

[69] meta-fetcher: крошечный парсер мета-данных по указанному URL : https://github.com/RocktimSaikia/meta-fetcher

[70] spotify-api — быстрая обёртка для взаимодействия со spotify api: https://github.com/spotify-api/spotify-api.js

[71] В Chrome началась активация IETF QUIC и HTTP/3: https://www.opennet.ru/opennews/art.shtml?num=53849

[72] Релиз Chrome 86: https://www.opennet.ru/opennews/art.shtml?num=53846

[73] Google Chrome остаётся самым популярным браузером в Китае: https://searchengines.guru/ru/news/2048975

[74] Microsoft рассказала, почему браузеры в Windows 10 создают так много процессов: https://3dnews.ru/1022394/microsoft-rasskazala-pochemu-brauzeri-v-windows-10-sozdayut-tak-mnogo-protsessov

[75] Microsoft анонсировала новые функции для Microsoft Edge: https://microsoftportal.net/windows-9/13161-microsoft-anonsirovala-novye-funkcii-dlja-microsoft-edge.html

[76] История веб-браузера : https://www.creativebloq.com/features/history-of-the-web-browser

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

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

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

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