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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] Подкаст «Сделайте мне красиво», Выпуск №46: Typescript и вёрстка решили все свои проблемы (а ты — нет): https://soundcloud.com/begebot/ep46

[8] Подкаст «Фронтенд Юность (18+)» #160: Чёрные кардиналы фронтенда Pro Unlimited: https://soundcloud.com/frontend_u/e160

[9] Подкаст CSSSR: MobX or Redux, Flexbox or CSS Grid, Angular DI, Lighthouse, Declarative Shadow DOM, MDN Web DNA 2020 Pro Unlimited: https://soundcloud.com/csssr/mobx-or-redux-flexbox-or-css-grid-angular-di-lighthouse-declarative-shadow-dom-mdn-web-dna-2020

[10] Подкаст IT Way: Про фронтенд для начинающих, как работает (и работают в) Aviasales. Episode 46 от 24.10.2020: https://www.youtube.com/watch?v=ZGL_kQcWA6w&feature=youtu.be

[11] Веб-компоненты: руководство для начинающих: https://habr.com/ru/post/524452/

[12] Порядок выполнения скриптов в HTML. Тег script и атрибуты async, defer, module, nomodule и src: https://tproger.ru/translations/script-execution-order/

[13] Руководство по различным типам хранилища в браузере : https://css-tricks.com/a-primer-on-the-different-types-of-browser-storage/

[14] Атрибут lang: браузеры лгут, сладко лгут.: https://www.matuzo.at/blog/lang-attribute/

[15] Более разумные способы создания HTML-структуры с глубокой вложенностью: https://css-tricks.com/smarter-ways-to-generate-a-deep-nested-html-structure/

[16] Настройка Webpack 5 с нуля: https://habr.com/ru/post/524260/

[17] Что нового в DevTools (Microsoft Edge 87): https://docs.microsoft.com/en-gb/microsoft-edge/devtools-guide-chromium/whats-new/2020/10/devtools

[18] Добавление PWA (прогрессивных веб-приложений) Chromium Edge в Microsoft Store : https://medium.com/pwabuilder/bringing-chromium-edge-pwas-progressive-web-apps-to-the-microsoft-store-c0bd07914ed9

[19] Руководство по обеспечению доступности веб-контента (WCAG) 2.1 переведено на русский язык: https://habr.com/ru/news/t/524626/

[20] Самые полезные инструменты и методы тестирования доступности: https://blog.sapegin.me/all/accessibility-testing/

[21] Управление фокусом и inert: https://css-tricks.com/focus-management-and-inert/

[22] Подборка креативных сайтов «Inspirational Websites Roundup #19»: https://tympanus.net/codrops/2020/10/20/inspirational-websites-roundup-19/

[23] Концепт слайдера с помощью clip-path анимации: https://codepen.io/jakewhiteleydev/full/VwaXZZV

[24] State of CSS 2020: https://survey.stateofjs.com/survey/state-of-css/2020

[25] Как я структурирую CSS: https://habr.com/ru/post/523884/

[26] Выбор CSS макета — Grid или Flexbox?: https://dailycoding.io/article/a9gHD0oBOKoI87SGL24e

[27] Создание CSS Shapes с помощью эмодзи: https://css-tricks.com/creating-css-shapes-with-emoji/

[28] Нестандартное мышление с помощью CSS Grid : https://frontend.horse/articles/thinking-outside-the-box-with-css-grid/

[29] CSS в 3D: учимся думать кубами, а не прямоугольниками: https://css-tricks.com/css-in-3d-learning-to-think-in-cubes-instead-of-boxes/

[30] «Универсальный селектор CSS работает медленно, и его следует избегать» — еще одна ложь!: https://levelup.gitconnected.com/the-css-universal-selector-is-slow-and-should-be-avoided-yet-another-lie-eb4d15f4c320

[31] Переменные в Sass, в CSS, и семантические переменные темы: https://daverupert.com/2020/10/variable-layers/?ref=heydesigner

[32] Дизайн отзывчивой высоты: https://ishadeed.com/article/responsive-design-height/

[33] Использование «глобального» await в JavaScript: https://habr.com/ru/post/524068/

[34] Варианты объектно-ориентированного программирования (на JavaScript): https://webdevblog.ru/varianty-obektno-orientirovannogo-programmirovaniya-na-javascript/

[35] Client-Side Rendering vs Server-Side Rendering vs Static-Site Generation: https://medium.com/frontend-digest/client-side-rendering-vs-server-side-rendering-vs-static-site-generation-2a0702cbb08d

[36] Решение глупой проблемы с JavaScript: https://medium.com/javascript-in-plain-english/solving-a-stupid-javascript-problem-aa54e26e3605

[37] Observer API в JavaScript — часть II: https://indepth.dev/observer-apis-in-javascript-part-ii

[38] 6 передовых функций JavaScript, которые вы можете использовать сегодня: https://blog.logrocket.com/6-cutting-edge-javascript-features-you-can-use-today/

[39] Как создать прогрессивно улучшенный компонент аккордеона с помощью vanilla JS: https://gomakethings.com/how-to-build-a-progressively-enhanced-accordion-component-with-vanilla-js/

[40] Выпуск серверной JavaScript-платформы Node.js 15.0: https://www.opennet.ru/opennews/art.shtml?num=53950

[41] Релиз Create React App 4.0: https://github.com/facebook/create-react-app/releases/tag/v4.0.0

[42] Релиз Babel 7.12.0 TypeScript 4.1, strings as import/export names, и class static blocks: https://babeljs.io/blog/2020/10/15/7.12.0

[43] Базовый формат моков React компонентов: https://habr.com/ru/company/otus/blog/524292/

[44] Rockpack — комплексное решение, позволяющее создавать каркас React приложения в стиле create-react-app и существенно сокращающее время настройки проекта : https://github.com/AlexSergey/rockpack

[45] Начало работы со Styled-Components в React: https://medium.com/javascript-in-plain-english/getting-started-with-styled-components-in-react-4379cc2be39e

[46] Что нового в Create React App 4: https://medium.com/frontend-digest/whats-new-in-create-react-app-4-809b24e4d6cb

[47] React v17.0: https://reactjs.org/blog/2020/10/20/react-v17.html

[48] Начало работы с Next.js : https://www.smashingmagazine.com/2020/10/getting-started-with-next-js/

[49] Как реализовать динамическую диаграмму для Vue на основе SVG: https://habr.com/ru/company/simbirsoft/blog/524220/

[50] 10 быстрых вопросов для собеседования по Vue: https://medium.com/javascript-in-plain-english/10-quick-fire-vue-interview-questions-3c16d14a3b51

[51] Что Vue.js делает лучше, чем React: https://hswolff.com/blog/what-vuejs-does-better-than-react/

[52] Как получить максимальную отдачу от компилятора TypeScript — Angular: https://levelup.gitconnected.com/how-to-get-the-most-from-the-typescript-compiler-angular-aae7fb53e0cf

[53] Angular — обмен данными между шаблонами с помощью function-like сегментов HTML: https://medium.com/@liutingchun_95744/angular-communicating-between-templates-with-function-like-html-segments-fb8dc15643f

[54] Понимание @ngrx/component-store selector debouncing: https://indepth.dev/ngrx-component-store-debouncing

[55] The Ember Times — Issue No. 166: https://dev.to/embertimes/the-ember-times-issue-no-166-14ah

[56] Релиз Ember 3.22 : https://blog.emberjs.com/2020/10/20/ember-3-22-released.html

[57] Развертывание проекта на стейджинге с помощью ember-cli-deploy : https://www.effective-ember.com/blog/staging-deploys-with-ember-cli-deploy/

[58] React Hooks и Ember.js: https://www.effective-ember.com/blog/react-hooks-and-ember/

[59] Раскрытие возможностей Svelte Actions : https://www.kirillvasiltsov.com/writing/unlocking-the-power-of-svelte-actions/

[60] Интернационализируйте свое приложение на Svelte с помощью реактивных хранилищ: https://dev.to/thomasferro/internationalize-your-svelte-app-with-reactive-stores-4dne

[61] Прекратите использовать Moment.js для дат и времен в JavaScript: https://medium.com/javascript-in-plain-english/stop-using-moment-js-for-dates-and-time-in-javascript-e51e6a708148

[62] nsfwjs — Простая JavaScript библиотека, которая поможет вам быстро идентифицировать непристойные изображения на клиентской стороне: https://github.com/infinitered/nsfwjs

[63] Lucia — крошечная JS библиотека (совместимая с UMD), которая может заменить jQuery и приложения на ванильном JavaScript.: https://github.com/aidenybai/lucia

[64] fingerprintjs — Создает идентификатор посетителя веб-сайта по цифровому отпечатку браузера: https://github.com/fingerprintjs/fingerprintjs

[65] Релиз Firefox 82: https://www.opennet.ru/opennews/art.shtml?num=53925

[66] Microsoft Edge для Linux — бета-версия браузера стала доступна всем желающим: https://itc.ua/news/microsoft-edge-dlya-linux-beta-versiya-brauzera-stala-dostupna-vsem-zhelayushhim/

[67] В браузере Chrome появилась функция поиска по открытым вкладкам: https://3dnews.ru/1023373

[68] Теперь JScript в Internet Explorer можно отключить: https://xakep.ru/2020/10/19/disable-jscript/

[69] Photoshop получил множество ИИ-функций: умная замена неба, продвинутые фильтры и прочее: https://3dnews.ru/1023425

[70] Всюду синие гиперссылки и колонки: как выглядели сайты Apple, Google и Amazon в 1999 году: https://vc.ru/design/168482-vsyudu-sinie-giperssylki-i-kolonki-kak-vyglyadeli-sayty-apple-google-i-amazon-v-1999-godu

[71] Как в Cloudflare генерируют криптоключи с помощью «стены энтропии» из 100 лава-ламп: https://ain.ua/2020/10/25/kak-v-cloudflare-generiruyut-kriptoklyuchi-s-pomoshhyu-steny-entropii/

[72] Facebook создала ИИ, который сможет переводить тексты между 100 языками напрямую: https://3dnews.ru/1023309

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

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

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

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

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