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

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

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

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

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

Медиа

podcast Подкаст CSSSR: Github Codespaces, Playwright и Puppeteer, Masonry layout, Firefox 76, NodeJS 14.2.0 и другие релизы [6]
podcast Подкаст «Веб-стандарты» №230: Aspect ratio, реклама, appearance: none, top-level await, Deno, хранилище, цена стилей [7]
podcast UnderJS Podcast #21 — Node.js 14, TypeScript 3.9 [Классический] [8]
video Подкаст «Фронтенд Юность» #138 Синьорские таски [9]
video Видеоблог Вадима Макеева №21. Направляющие для адаптивной сетки на градиентах и кастомных свойствах [10]

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

habr Современные архитектуры фронт-энда (часть 2) [11]
Мартин Сплитт: не пытайтесь заново изобрести колесо в SEO [12]
Покорение UTM меток [13]
en Доступные изображения, когда они наиболее важны [14]
en Постоянное хранилище (Persistent storage) [15]
en Онлайн-визуализатор SVG Path [16]
en Подборка креативных концептов «UI Interactions & Animations Roundup #6» [17]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №415 (11 — 17 мая 2020) - 14 CSS

habr Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями [21]
habr CSS-функции min(), max() и clamp() [22]
en Анимация таймлайна в CSS: создание машины Голдберга [23]
en Современные CSS решения для старых CSS проблем [24]
en CSS фикс для 100vh в мобильном WebKit [25]
en Как укротить Line Height в CSS [26]
en Адаптивная раскладка masonry на CSS grid + vanilla JavaScript [27]
en Использование CSS-масок для создания зубчатых краев [28]
en Превращение объекта фиксированного размера в адаптивный элемент [29]

JavaScript

habr Стыкуемся с МКС с помощью JavaScript и циркуля [30]
Автор Node.js представил защищённую JavaScript-платформу Deno 1.0 [31]
Самые сложные вопросы на JavaScript-собеседовании. Часть 2 [32]
en The Deno Handbook: краткое введение в Deno [33]
en Сертификация по Node.js: мой опыт и советы [34]
en Особенности JavaScript, о которых можно забыть [35]
en Релиз TypeScript 3.9 [36]
en Сравнение Elm с Ember Octane и React [37]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №415 (11 — 17 мая 2020) - 61 Браузеры

habr Chrome расширение для скрытия отвлекающих рекомендации на YouTube [69]
С августа Google Chrome начнет блокировать и «тяжелую» рекламу, оказывающую большую нагрузку на CPU и батарею [70]
Google добавит в Chrome группировку вкладок и выделение их цветом для повышения продуктивности Материал редакции [71]
В Firefox 78 появится менеджер процессов [72]
Google Chrome начнёт блокировать загрузку ресурсоёмкой рекламы [73]
В ночные сборки Firefox внесены спорные изменения в интерфейс режима читателя [74]
Mozilla отключила дополнительную аутентификацию для систем без мастер-пароля [75]
en Что нового в DevTools (Chrome 84) [76]

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

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

Автор: alexzfort

Источник [80]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст CSSSR: Github Codespaces, Playwright и Puppeteer, Masonry layout, Firefox 76, NodeJS 14.2.0 и другие релизы: https://soundcloud.com/csssr/github-codespaces-playwright-i-puppeteer-masonry-layoutb-firefox-76-nodejs-1420-i-drugie-relizy

[7] Подкаст «Веб-стандарты» №230: Aspect ratio, реклама, appearance: none, top-level await, Deno, хранилище, цена стилей: https://medium.com/web-standards/episode-230-47c7909a7874

[8] UnderJS Podcast #21 — Node.js 14, TypeScript 3.9 [Классический] : https://soundcloud.com/underjs/21-nodejs-14-typescript-39-klassicheskiy

[9] Подкаст «Фронтенд Юность» #138 Синьорские таски: https://www.youtube.com/watch?v=tTsNjHG1O6g

[10] Видеоблог Вадима Макеева №21. Направляющие для адаптивной сетки на градиентах и кастомных свойствах: https://www.youtube.com/watch?v=WBrngvT78gw&feature=youtu.be

[11] Современные архитектуры фронт-энда (часть 2): https://habr.com/ru/post/501874/

[12] Мартин Сплитт: не пытайтесь заново изобрести колесо в SEO: https://www.searchengines.ru/splitt-reinvent.html

[13] Покорение UTM меток: https://vtvz.me/blog/conquering-the-utm-parameters/

[14] Доступные изображения, когда они наиболее важны : https://www.smashingmagazine.com/2020/05/accessible-images/

[15] Постоянное хранилище (Persistent storage): https://web.dev/persistent-storage/

[16] Онлайн-визуализатор SVG Path: https://svg-path-visualizer.netlify.app/#M140%2020C73%2020%2020%2074%2020%20140c0%20135%20136%20170%20228%20303%2088-132%20229-173%20229-303%200-66-54-120-120-120-48%200-90%2028-109%2069-19-41-60-69-108-69z

[17] Подборка креативных концептов «UI Interactions & Animations Roundup #6» : https://tympanus.net/codrops/2020/05/14/ui-interactions-animations-roundup-6/

[18] Дорогая цена стилей. Доклад Яндекса: https://habr.com/ru/company/yandex/blog/501998/

[19] Оптимизируем загрузку рукописного шрифта: https://medium.com/front-end-in-regions-grodno/%D0%BE%D0%BF%D1%82%D0%B8%D0%BC%D0%B8%D0%B7%D0%B8%D1%80%D1%83%D0%B5%D0%BC-%D0%B7%D0%B0%D0%B3%D1%80%D1%83%D0%B7%D0%BA%D1%83-%D1%80%D1%83%D0%BA%D0%BE%D0%BF%D0%B8%D1%81%D0%BD%D0%BE%D0%B3%D0%BE-%D1%88%D1%80%D0%B8%D1%84%D1%82%D0%B0-258fb9bee001

[20] Стоит ли хостить у себя Google Fonts: https://medium.com/@lucyhackwrench/%D1%81%D1%82%D0%BE%D0%B8%D1%82-%D0%BB%D0%B8-%D1%85%D0%BE%D1%81%D1%82%D0%B8%D1%82%D1%8C-%D1%83-%D1%81%D0%B5%D0%B1%D1%8F-google-fonts-c798041cd347

[21] Отзывчивый шрифт. Адаптация текста между макетным и минимальным значениями: https://habr.com/ru/post/501392/

[22] CSS-функции min(), max() и clamp(): https://habr.com/ru/company/ruvds/blog/501634/

[23] Анимация таймлайна в CSS: создание машины Голдберга : https://cloudfour.com/thinks/css-animation-timelines-building-a-rube-goldberg-machine/

[24] Современные CSS решения для старых CSS проблем: https://moderncss.dev/

[25] CSS фикс для 100vh в мобильном WebKit : https://allthingssmitty.com/2020/05/11/css-fix-for-100vh-in-mobile-webkit/

[26] Как укротить Line Height в CSS : https://css-tricks.com/how-to-tame-line-height-in-css/

[27] Адаптивная раскладка masonry на CSS grid + vanilla JavaScript: https://codepen.io/thebabydino/pen/yLYppjK

[28] Использование CSS-масок для создания зубчатых краев : https://css-tricks.com/using-css-masks-to-create-jagged-edges/

[29] Превращение объекта фиксированного размера в адаптивный элемент : https://css-tricks.com/turning-a-fixed-size-object-into-a-responsive-element/

[30] Стыкуемся с МКС с помощью JavaScript и циркуля: https://habr.com/ru/post/502072/

[31] Автор Node.js представил защищённую JavaScript-платформу Deno 1.0: https://www.opennet.ru/opennews/art.shtml?num=52947

[32] Самые сложные вопросы на JavaScript-собеседовании. Часть 2 : https://dailycoding.io/article/dp7tMZ9FoMiBdqx7vlpu

[33] The Deno Handbook: краткое введение в Deno: https://flaviocopes.com/deno/

[34] Сертификация по Node.js: мой опыт и советы : https://dev.to/kkomelin/node-js-certification-my-experience-and-advice-9bj

[35] Особенности JavaScript, о которых можно забыть : https://davidflanagan.com/2020/05/12/javascript-to-forget.html

[36] Релиз TypeScript 3.9: https://devblogs.microsoft.com/typescript/announcing-typescript-3-9/

[37] Сравнение Elm с Ember Octane и React: https://dev.to/eberfreitas/comparing-elm-to-ember-octane-and-react-1in2

[38] Визуализация промисов и Async/Await: https://habr.com/ru/post/501702/

[39] Понимание деструктуризации, рест параметров и синтаксиса оператора spread в JavaScript : https://www.digitalocean.com/community/tutorials/understanding-destructuring-rest-parameters-and-spread-syntax-in-javascript

[40] Взгляд в будущее JavaScript : https://medium.com/javascript-in-plain-english/looking-to-the-future-of-javascript-7792c57c79cc

[41] Разбор Javascript-стайлгайда от Google: https://www.youtube.com/watch?v=MkKJzJzsq48

[42] Подкаст «Пятиминутка React»: Recoil — A state management library for React Pro Unlimited: https://soundcloud.com/5minreact/recoil-a-state-management-library-for-react

[43] Андрей Мелихов: Пробуем Deno на примере простейшего сервера и React SSR: https://www.youtube.com/watch?v=_cGOQbJehBQ&feature=youtu.be

[44] Recoil — Библиотека управления состоянием для React: https://recoiljs.org/

[45] Начинаем работать с React — современное руководство для начинающих (включая хуки!) : https://www.freecodecamp.org/news/getting-started-with-react-a-modern-project-based-guide-for-beginners-including-hooks-2/

[46] Ответы блогеров: (Практически) полное руководство по поведению рендеринга в React : https://blog.isquaredsoftware.com/2020/05/blogged-answers-a-mostly-complete-guide-to-react-rendering-behavior/

[47] Доступные анимации в React. Хук “prefers-reduced-motion”: https://joshwcomeau.com/react/prefers-reduced-motion/

[48] Стилизация компонентов в React: https://www.smashingmagazine.com/2020/05/styling-components-react/

[49] Настройка TypeScript для современных проектов на React с использованием Webpack и Babel : https://www.smashingmagazine.com/2020/05/typescript-modern-react-projects-webpack-babel/

[50] Работа со stale props и состояниями в функциональных компонентах React : https://css-tricks.com/dealing-with-stale-props-and-states-in-reacts-functional-components/

[51] React Cool Inview — React хук для мониторинга элементов, которые появляются или пропадают во вьюпорте (или другом элементе): https://github.com/wellyshen/react-cool-inview

[52] Vue плагины, о которых вы не знаете, что они вам могут понадобиться : https://medium.com/swlh/vue-plugins-you-dont-know-you-may-need-573902dfdbae

[53] 5 советов по JavaScript, которые я извлек из исходного кода Vue : https://levelup.gitconnected.com/5-javascript-tips-i-learned-from-vue-source-code-6095df4e9bc1

[54] Модульная модальная система с TypeScript и Vue.js. : https://medium.com/@maxlakomy/modular-modal-system-with-typescript-and-vue-js-dc3edcfe8331

[55] Отложенное применение функционала директив в Angular: https://habr.com/ru/company/ruvds/blog/500424/

[56] Кастомный скроллбар в Angular: https://habr.com/ru/company/tinkoff/blog/501610/

[57] Обновление устаревшего веб-приложения на Angular : https://blog.marklreyes.com/upgrading-a-legacy-angular-web-app/

[58] Избавьтесь от if-операторов в вашем Angular приложении с помощью ООП : https://medium.com/@yiupang.ch/get-rid-of-if-statements-in-your-angular-app-with-oop-1efdf91da577

[59] Angular Starter: Angular 9 + Material + Transloco + Jest + Compodoc : https://github.com/wlucha/angular-starter

[60] Релиз Ember 3.18 : https://dev.to/emberjs/ember-3-18-released-5fgi

[61] MDN web docs: Ember tutorials: https://developer.mozilla.org/en-US/docs/Learn/Tools_and_testing/Client-side_JavaScript_frameworks#Ember_tutorials

[62] The Ember Times — Issue No. 148: https://dev.to/embertimes/the-ember-times-issue-no-148-5099

[63] Настройка Coveralls для ваших аддонов в Ember : https://dev.to/rajasegar/setting-up-coveralls-for-your-ember-addons-462k

[64] Настройки производительности Ember: оптимизация ресурсов: https://abhilashlr.in/ember-performance-tweaks-part-2

[65] 3 разных способа межкомпонентного общения в Svelte : https://codechips.me/svelte-cross-component-communication/

[66] Как использовать Typescript со Svelte : https://codechips.me/how-to-use-typescript-with-svelte/

[67] 5 JavaScript-библиотек для работы со строками: https://habr.com/ru/company/ruvds/blog/501632/

[68] Perfume v5 — небольшая библиотека для мониторинга веб-производительности: https://github.com/Zizzamia/perfume.js

[69] Chrome расширение для скрытия отвлекающих рекомендации на YouTube: https://habr.com/ru/post/502208/

[70] С августа Google Chrome начнет блокировать и «тяжелую» рекламу, оказывающую большую нагрузку на CPU и батарею: https://itc.ua/news/s-avgusta-google-chrome-nachnet-blokirovat-i-tyazheluyu-reklamu-okazyvayushhuyu-bolshuyu-nagruzku-na-cpu-i-batareyu/

[71] Google добавит в Chrome группировку вкладок и выделение их цветом для повышения продуктивности Материал редакции: https://vc.ru/services/126983-google-dobavit-v-chrome-gruppirovku-vkladok-i-vydelenie-ih-cvetom-dlya-povysheniya-produktivnosti

[72] В Firefox 78 появится менеджер процессов: https://www.opennet.ru/opennews/art.shtml?num=52926

[73] Google Chrome начнёт блокировать загрузку ресурсоёмкой рекламы: https://www.searchengines.ru/chrome-block-resources.html

[74] В ночные сборки Firefox внесены спорные изменения в интерфейс режима читателя: https://www.opennet.ru/opennews/art.shtml?num=52966

[75] Mozilla отключила дополнительную аутентификацию для систем без мастер-пароля: https://www.opennet.ru/opennews/art.shtml?num=52965

[76] Что нового в DevTools (Chrome 84) : https://developers.google.com/web/updates/2020/05/devtools

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

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

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

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