Дайджест свежих материалов из мира фронтенда за последнюю неделю №433 (14 — 20 сентября 2020)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] UnderJS Podcast #26 — Балдежный выпуск (React 18, GraphQL, RN 0.63): https://soundcloud.com/underjs/26-baldezhnyy-vypusk-react-18-graphql-rn-063

[8] Фронтенд Юность (18+) #155: TypeScript за лимон: https://soundcloud.com/frontend_u/e155

[9] Подкаст «Сделайте мне красиво», Выпуск №44: Не переживайте, это безопасно : https://soundcloud.com/begebot/ep44

[10] Подкаст «Веб-стандарты» 247. Edge, браузеры, AVIF, генераторы статики, математика для фронтендера, Хабр, чтение, переводы: https://soundcloud.com/web-standards/episode-247

[11] Подкаст CSSSR: Security-релизы NodeJS, Ruby 3, разбор AVIF, JIT-компилятор Erlang, Web Skills, Laravel 8: https://soundcloud.com/csssr/security-relizy-nodejs-ruby-3-razbor-avif-jit-kompilyator-erlang-web-skills-laravel-8

[12] Видеоблог Вадима Макеева №34. Type.Today, base64, шрифты и сабсеттинг: https://www.youtube.com/watch?v=WFomlrhOjNE

[13] Web Cryptography API: пример использования: https://habr.com/ru/post/519378/

[14] Факторы ранжирования Google, которые повлияют на поиск в 2021 году: Core Web Vitals, E-A-T или AMP? : https://www.searchenginewatch.com/2020/09/16/google-ranking-factors-2021-core-web-vitals-e-a-t-or-amp/

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

[16] Релиз PostCSS 8.0 “President Ose”: новый plugin API, уменьшение размера node_modules, улучшенная поддержка source map и улучшения парсера CSS.: https://github.com/postcss/postcss/releases/tag/8.0.0

[17] PostCSS 8.0: Руководство по миграции плагина : https://evilmartians.com/chronicles/postcss-8-plugin-migration

[18] BGJar — Бесплатный генератор svg-фонов для ваших сайтов : https://bgjar.com/

[19] Скрытые возможности Chrome DevTools : https://martinheinz.dev/blog/33

[20] Инструменты должны быть не только для экспертов — они должны превращать нас в них: https://christianheilmann.com/2020/09/15/tools-should-not-only-be-for-experts-they-should-turn-us-into-them/

[21] Перфоманс фронтенда как современное искусство: графики, код, кулстори: https://habr.com/ru/company/hh/blog/519474/

[22] Моментальная загрузка с instant.page: https://habr.com/ru/company/vdsina/blog/519420/

[23] Обеспечение бюджета производительности с помощью webpack : https://css-tricks.com/enforcing-performance-budgets-with-webpack/

[24] HTML и CSS ошибки, которые я встречаю как человек без ограничений по здоровью: https://habr.com/ru/post/519034/

[25] Делаем модальные окна для сайта. Заботимся об удобстве и доступности: https://habr.com/ru/post/519662/

[26] 5 самых неприятных фич для слепого человека на сайтах: https://habr.com/ru/post/519514/

[27] Центрирование в CSS : https://ishadeed.com/article/learn-css-centering/

[28] Как использовать маски в CSS : https://web.dev/css-masking/

[29] Как использовать CSS clipping: https://web.dev/css-clipping/

[30] Изучение CSS 3D Transforms и Perspective : https://css-irl.info/learning-about-css-3d-transforms/

[31] Введение в CSS-анимацию : https://dev.to/ljcdev/introduction-to-css-animation-4762

[32] Min, Max и Clamp: https://www.maxwellantonucci.com/posts/2020/09/14/css-min-max-clamp/

[33] Interaction Media Features и их потенциал: https://css-tricks.com/interaction-media-features-and-their-potential-for-incorrect-assumptions/

[34] Работаем с медиа-запросами через JavaScript: https://webdevblog.ru/rabotaem-s-media-zaprosami-cherez-javascript/

[35] Картинка, которая одновременно является кодом на Javascript: https://dailycoding.io/article/qQFbi7szXOjOpDoRqwjn

[36] Drag and Drop с помощью линейной интерполяции в JavaScript : https://medium.com/better-programming/drag-and-drop-with-linear-interpolation-in-javascript-9e5dc779bc23

[37] Практическое реактивное программирование с помощью RxJS : https://goodguydaniel.com/blog/hands-on-reactive-programming-rxjs

[38] Шпаргалка HTML5 Node: 21 API, которые вы должны знать в 2020 году: https://blog.logrocket.com/html5-node-cheat-sheet-21-apis-you-should-know-in-2020/

[39] Как мы написали самый быстрый JavaScript UI Framework, опять : https://levelup.gitconnected.com/how-we-wrote-the-fastest-javascript-ui-framework-again-db097ddd99b6

[40] JavaScript и TypeScript: 11 компактных конструкций, о которых стоит знать: https://habr.com/ru/company/ruvds/blog/519136/

[41] Секреты JavaScript-функций: https://habr.com/ru/company/ruvds/blog/519654/

[42] JavaScript: область видимости простыми словами : https://dailycoding.io/article/siOyIoQKQdzjI6UBISBW

[43] Как использовать Fetch с async / await : https://dmitripavlutin.com/javascript-fetch-async-await/

[44] Освоение JavaScript ES6 Symbols : https://blog.bitsrc.io/mastering-javascript-es6-symbols-6453da3bd46c

[45] React 17: Ничего нового?: https://habr.com/ru/post/519824/

[46] Интегрируем React приложение в Microsoft Office: https://tproger.ru/articles/integrate-react-app-into-ms-office/

[47] Прогрессивное улучшение с помощью WebGL и React : https://medium.com/14islands/progressive-enhancement-with-webgl-and-react-71cd19e66d4

[48] React Query — недооцененный инструмент управления состоянием : https://blog.bitsrc.io/react-query-an-underrated-state-management-tool-5618b7b8cb36

[49] Лучшие практики React Components и методы оптимизации производительности : https://code.likeagirl.io/react-components-best-practices-and-performance-optimization-techniques-3d561da91501

[50] Создание сложных анимаций с помощью React и Framer Motion : https://able.bio/drenther/building-complex-animations-with-react-and-framer-motion--2d5cbc0e

[51] Введение в Wouter: альтернативу React Router : https://blog.logrocket.com/an-introduction-to-wouter-a-react-router-alternative/

[52] Сравнение методов стилизации в Next.js : https://www.smashingmagazine.com/2020/09/comparison-styling-methods-next-js/

[53] Почему Next.js — мой лучший выбор вместо Gatsby, Gridsome и Nuxt? : https://kontent.ai/blog/gatsby-vs-next-gridsome-nuxt

[54] 6 причин использовать React Hooks вместо классов : https://blog.bitsrc.io/6-reasons-to-use-react-hooks-instead-of-classes-7e3ee745fe04

[55] Официальный релиз Vue.js 3.0 «One Piece: https://github.com/vuejs/vue-next/releases/tag/v3.0.0

[56] Eleventy и Vue — идеальная пара для Netlify.com : https://www.netlify.com/blog/2020/09/18/eleventy-and-vue-a-match-made-to-power-netlify.com/

[57] Nuxt: Offline First PWA Tutorial: https://www.macivortech.com/blog/nuxt-offline-first-tutorial/

[58] Vue Flow Form — генератор форм с открытым исходным кодом, созданный на Vue.js : https://www.ditdot.hr/en/vue-flow-form

[59] Погружение в Virtual DOM: https://vuejs-course.com/blog/diving-into-the-virtual-dom

[60] Советы по оптимизации Nuxt SSR : https://vueschool.io/articles/vuejs-tutorials/nuxt-ssr-optimizing-tips/

[61] Vue.js Global Live Online 2020: https://www.youtube.com/playlist?list=PLCxzy-hmQq9HOg0mS0laLkMiTov2zyZ5q

[62] 5 советов для прокачки своих навыков в Angular: https://habr.com/ru/company/tinkoff/blog/519052/

[63] Работа с GraphQL в Angular: мутация и аутентификация : https://www.telerik.com/blogs/working-with-graphql-angular-mutation-authentication

[64] Пишите лучшие автоматизированные тесты с Cypress в Angular : https://indepth.dev/write-better-automated-tests-with-cypress-in-angular/

[65] Тестирование Angular route guards с помощью RouterTestingModule : https://indepth.dev/testing-angular-route-guards-with-the-routertestingmodule/

[66] Создание надежных пользовательских интерфейсов на Ember.js с помощью Statecharts: https://www.effective-ember.com/blog/robust-uis-with-statecharts/

[67] Прогрессивное веб-приложение с использованием Ember : https://www.youtube.com/watch?v=yp4PVKEjcqQ

[68] Svelte <3 TypeScript: https://habr.com/ru/post/519332/

[69] Переиспользуемый компонент Svelte для лейаутов ваших страниц : https://medium.com/javascript-in-plain-english/create-reusable-svelte-components-for-your-page-layouts-9593b1a60b08

[70] Прекращение разработки библиотеки Moment.js, имеющей 12 млн загрузок в неделю: https://www.opennet.ru/opennews/art.shtml?num=53722

[71] Изучите date-fns: легкую библиотеку для работы c датами в JavaScript: https://www.sitepoint.com/date-fns-javascript-date-library/

[72] Вышла новая версия браузера Safari 14 с улучшенной работой вкладок: https://itc.ua/news/vyshla-novaya-versiya-brauzera-safari-14-s-uluchshennoj-rabotoj-vkladok/

[73] Уязвимость в Firefox для Android, позволяющая управлять браузером через общий Wi-Fi: https://www.opennet.ru/opennews/art.shtml?num=53745

[74] Mozilla прекращает разработку Firefox Send и Firefox Notes: https://xakep.ru/2020/09/18/send-and-notes-shutting-down/

[75] Mozilla запустила сервис для отслеживания «оскорбительного контента» в рекомендациях YouTube : https://vc.ru/services/159430-mozilla-zapustila-servis-dlya-otslezhivaniya-oskorbitelnogo-kontenta-v-rekomendaciyah-youtube

[76] Хакерская атака впервые стала причиной смерти человека: https://www.computerra.ru/271031/hakerskaya-ataka-vpervye-stala-prichinoj-smerti-cheloveka/

[77] Почему «громкий стартап» Slack стал скучным — и это нормально : https://vc.ru/story/159550-pochemu-gromkiy-startap-slack-stal-skuchnym-i-eto-normalno

[78] Семь мифов о программировании: https://htmlacademy.ru/blog/education/all/coding-myths

[79] Microsoft рассказала об итогах эксперимента с подводными серверами: https://4pda.ru/2020/09/20/375641/

[80] Чем программирование сегодня отличается от программирования 20 лет назад?: https://dailycoding.io/article/8MT0cgvOFpkkaPdT2IBI

[81] Факторы ранжирования в локальном поиске Google в 2020 году: https://searchengines.guru/ru/articles/2048784

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

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

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

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

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