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

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

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

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

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

Дайджест за прошлую неделю ^[85].
Материал подготовили dersmoll ^[86] и alekskorovin ^[87].

Автор: alexzfort

Источник ^[88]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Подкаст «Фронтенд Юность (18+)» — #112 Думай быстрее, а то прямо здесь получишь: https://soundcloud.com/frontend_u/e112

[7] Winterview — #102 — Илья Немиро о собеседованиях фронтендеров: https://soundcloud.com/winterview101/ilya-nemiro-o-sobesedovaniyakh-frontenderov

[8] Repozitorro #32 — Лендинг на React! Миф, или реальность?): https://www.youtube.com/watch?v=2JjWs5y7I2U

[9] Nordic.js 2019, 27 видео: https://www.youtube.com/playlist?list=PLGP3VO5jDf8x0gh5H7dZ41F0nVDlwDMuy

[10] Не потерял ли GraphQL актуальности в эпоху HTTP/2?: https://habr.com/ru/company/ruvds/blog/472340/

[11] Интерактивное веб-приложение без программирования? Легко! Mavo вам в руки: https://habr.com/ru/company/lanit/blog/470135/

[12] Фриланс-вебдев — как и с кем НЕ стоит работать: https://habr.com/ru/post/472642/

[13] Движение IndieWeb: владение своими данными и изменение того, что вы хотите видеть в интернете: https://www.jvt.me/posts/2019/10/20/indieweb-talk/

[14] Создние приложения для закладок с помощью FaunaDB, Netlify и 11ty : https://www.smashingmagazine.com/2019/10/bookmarking-application-faunadb-netlify-11ty/

[15] Руководство по оптимизации изображений для мобильных устройств: https://www.smashingmagazine.com/2019/10/imagekit-guide-optimizing-images-mobile/

[16] Почему Parcel стал моим основным бандлером для разработки : https://css-tricks.com/why-parcel-has-become-my-go-to-bundler-for-development/

[17] Ориентация изображения в вебе : https://justmarkup.com/articles/2019-10-21-image-orientation/

[18] HTMHell — Коллекция плохих практик в HTML, скопированная с реальных сайтов. : https://www.htmhell.dev/

[19] Почему доступные веб-сайты так сложно создать?: https://css-tricks.com/why-are-accessible-websites-so-hard-to-build/

[20] Доступность, будущее и почему кейс Domino’s имеет значение: https://arstechnica.com/tech-policy/2019/10/accessibility-the-future-and-why-dominos-matters/

[21] Fata Morgana в Accessibility: https://marcus.io/blog/fata-morganas-in-a11y

[22] Доступные буквицы: https://adrianroselli.com/2019/10/accessible-drop-caps.html

[23] Как компании могут предотвратить судебные иски по ADA Website Accessibility: https://www.zfort.com/blog/ada-website-accessibility

[24] Создание креативных hover-эффектов в форме пятен с помощью Three.js: https://tympanus.net/codrops/2019/10/23/making-gooey-image-hover-effects-with-three-js/

[25] Играем в Beat Saber в браузере с помощью движений тела, используя PoseNet & Tensorflow.js: https://dev.to/devdevcharlie/playing-beat-saber-in-the-browser-with-body-movements-using-posenet-tensorflow-js-36km

[26] Интерактивная форма для кредитной карты на VueJs: https://codepen.io/JavaScriptJunkie/full/YzzNGeR

[27] Визуализация звука с помощь D3 и API Web Audio : https://medium.com/better-programming/visualizing-sound-with-d3-and-web-audio-api-435ffea88f30

[28] Маленькие хитрости кастомных свойств (CSS-переменных): https://css-live.ru/tricks/malenkie-xitrosti-kastomnyx-svojstv-css-peremennyx.html

[29] Создание Scrapbook-макета на CSS Grid: https://habr.com/ru/post/472496/

[30] Нетривиальная расстановка элементов на flexbox без media-запросов: https://habr.com/ru/post/473186/

[31] Синтаксис с двумя значениями для свойства CSS Display: https://hacks.mozilla.org/2019/10/the-two-value-syntax-of-the-css-display-property/

[32] Новые правила игры для CSS: min() и max() теперь в @webkit: https://twitter.com/iamvdo/status/910074435159420928

[33] Используйте CSS Grid на продакшене уже сегодня: https://dev.to/felixhaeberle/use-css-grid-in-production-today-p5e

[34] 8 современных CSS-функций (и как их использовать): https://www.creativebloq.com/how-to/8-state-of-the-art-css-features

[35] Frontend Focus: Dark Mode. Об особенностях и текущем состоянии темного режима в вебе: https://itnext.io/frontend-focus-dark-mode-on-the-web-fdcc76cfb9a7

[36] CSS тренды 2019: полное руководство для отслеживания последних тенденций CSS : http://www.instantshift.com/2019/10/23/css-trends-2019/

[37] История гридов: от печатного станка до современного веб-дизайна: https://webflow.com/blog/history-of-grids

[38] Небольшое руководство по вариативным цветным шрифтам: https://www.typearture.com/howdotheywork/

[39] 25 дней CSS-анимации: самообучение CSS с помощью Motion Design.: https://dev.to/acupoftee/25-days-of-css-animations-teaching-myself-css-through-motion-design-4l10

[40] Кто он — убийца JavaScript?: https://habr.com/ru/company/ruvds/blog/472338/

[41] Каскадная инвалидация кэша. Часть 1: https://habr.com/ru/company/ruvds/blog/472860/

[42] 7 простых, но хитрых вопросов на интервью по JavaScript: https://webdevblog.ru/7-prostyh-no-hitryh-voprosov-na-intervju-po-javascript/

[43] Мой подход к документированию проектов на Javascript: https://webdevblog.ru/moj-podhod-k-dokumentirovaniju-proektov-na-javascript/

[44] Почему я перестал использовать экспорт по умолчанию в моих JavaScript-модулях: https://medium.com/devschacht/%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-%D1%8F-%D0%BF%D0%B5%D1%80%D0%B5%D1%81%D1%82%D0%B0%D0%BB-%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D1%8D%D0%BA%D1%81%D0%BF%D0%BE%D1%80%D1%82-%D0%BF%D0%BE-%D1%83%D0%BC%D0%BE%D0%BB%D1%87%D0%B0%D0%BD%D0%B8%D1%8E-%D0%B2-%D0%BC%D0%BE%D0%B8%D1%85-javascript-%D0%BC%D0%BE%D0%B4%D1%83%D0%BB%D1%8F%D1%85-d03e63bed126

[45] Как работает reduce() в JavaScript, когда его нужно применять и какие крутые вещи можно с ним делать: https://medium.com/@stasonmars/%D0%BA%D0%B0%D0%BA-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%B0%D0%B5%D1%82-reduce-%D0%B2-javascript-%D0%BA%D0%BE%D0%B3%D0%B4%D0%B0-%D0%B5%D0%B3%D0%BE-%D0%BD%D1%83%D0%B6%D0%BD%D0%BE-%D0%BF%D1%80%D0%B8%D0%BC%D0%B5%D0%BD%D1%8F%D1%82%D1%8C-%D0%B8-%D0%BA%D0%B0%D0%BA%D0%B8%D0%B5-%D0%BA%D1%80%D1%83%D1%82%D1%8B%D0%B5-%D0%B2%D0%B5%D1%89%D0%B8-%D0%BC%D0%BE%D0%B6%D0%BD%D0%BE-%D1%81-%D0%BD%D0%B8%D0%BC-b650c397bee6

[46] 7 самых популярных фреймворков Node.js в 2019 году: https://dev.to/x-team/7-most-popular-node-js-frameworks-in-2019-58o0

[47] Написание асинхронных задач в современном JavaScript: https://www.smashingmagazine.com/2019/10/asynchronous-tasks-modern-javascript/

[48] Проблемы shared mutable state и как их избежать: https://2ality.com/2019/10/shared-mutable-state.html

[49] Раскрытие тайн sort() в JavaScript: https://medium.com/@PurpleGreenLemon/demystifying-the-mysteries-of-sort-in-javascript-515ea5b48c7d

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

[51] Electron 7.0.0: https://electronjs.org/blog/electron-7-0

[52] Puppeteer v2.0.0 Release Notes: https://pptr.dev/#?product=Puppeteer&version=v2.0.0&show=api-release-notes

[53] Ускоренный курс Svelte (в 10 фото): https://dev.to/hexrcs/svelte-crash-course-with-pics-27cc

[54] Что мне нравится в написании стилей со Svelte: https://css-tricks.com/what-i-like-about-writing-styles-with-svelte/

[55] Как создать игру Tic Tac Toe с помощью Svelte: https://www.sitepoint.com/svelte-tic-tac-toe/

[56] Как создать приложение новостей со Svelte: https://www.sitepoint.com/svelte-news-app-build/

[57] Справочник по Svelte : https://www.freecodecamp.org/news/the-svelte-handbook/

[58] Svelte vs React: первые впечатления : https://medium.com/javascript-in-plain-english/svelte-vs-react-first-impression-1ce5d3ee6889

[59] Смогут ли React-хуки заменить компоненты высшего порядка (HOC)?: https://css-live.ru/articles/smogut-li-react-xuki-zamenit-komponenty-vysshego-poryadka-hoc.html

[60] Redux — Не нужен! Заменяем с помощью useContext и useReducer в React?: https://habr.com/ru/post/473070/

[61] Подготовка к будущему с React Prereleases: https://reactjs.org/blog/2019/10/22/react-release-channels.html

[62] Я протестировал React приложение с помощью Jest, Enzyme, Testing Library и Cypress. Вот различия.: https://medium.com/javascript-in-plain-english/i-tested-a-react-app-with-jest-testing-library-and-cypress-here-are-the-differences-3192eae03850

[63] Как эффективно использовать Context API с хуками, избегая узких мест в производительности: https://www.telerik.com/blogs/how-to-use-context-api-with-hooks-efficiently-while-avoiding-performance-bottlenecks

[64] 7 способов реализовать условный рендеринг в React-приложениях : https://scotch.io/tutorials/7-ways-to-implement-conditional-rendering-in-react-applications

[65] 55 уроков после 5-тилетнего использования React: https://www.dropbox.com/s/tsid5bnphznbvjv/Lessons%20learned%20from%205%20years%20in%20React.docx?dl=0

[66] Компоненты-агностики в Angular: https://habr.com/ru/company/tinkoff/blog/473108/

[67] Angular Architecture — неофициальные документы: https://dev.to/devpato/angular-unofficial-docs-architecture-2d4i

[68] Angular & CSS Grid: динамические свойства сетки: https://itnext.io/angular-css-grid-dynamic-grid-properties-1a03634607a1

[69] Как правильно реализовать ленивую загрузку в Angular 7/8 : https://sreyaj.com/implement-lazy-loading-in-angular/?utm_campaign=Angular%20Weekly&utm_medium=email&utm_source=Revue%20newsletter

[70] 10 лучших практик для создания и поддержки крупных проектов на Vue.js : https://www.telerik.com/blogs/10-good-practices-building-maintaining-large-vuejs-projects

[71] Год с Nuxt.js — обзор фреймворка: https://medium.com/better-programming/a-year-with-nuxt-js-geninue-review-of-a-framework-2564ab230495

[72] Использование Vue Composition API с Firebase: https://dev.to/aaronksaunders/using-vue-composition-api-with-firebase-1oib

[73] Мысли о Vue 3 Composition API — `reactive()` считается вредным: https://dev.to/ycmjason/thought-on-vue-3-composition-api-reactive-considered-harmful-j8c

[74] plexis — мощная и управляемая сообществом библиотека для работы со строками.: https://github.com/plexis-js/plexis

[75] Jsfuzz: фаззинг (CGF) — тестирование для Javascript : https://github.com/fuzzitdev/jsfuzz

[76] Peaks.js — взаимодействие с аудио-волновыми графиками : https://medium.com/better-programming/peaks-js-interact-with-audio-waveforms-b7cb5bd3939a

[77] Улучшение элементов управления в Microsoft Edge на Chromium: https://habr.com/ru/company/microsoft/blog/472268/

[78] Релиз Firefox 70: https://www.opennet.ru/opennews/art.shtml?num=51727

[79] Firefox 70: детали для веб-разработчиков от Марата Таналина: http://tanalin.com/blog/2019/10/firefox-70/

[80] Релиз Chrome 78: https://www.opennet.ru/opennews/art.shtml?num=51734

[81] Firefox внедрил защиту от отслеживания в социальных сетях: https://www.searchengines.ru/firefox-leak.html

[82] В мобильном браузере Firefox Preview появится поддержка дополнений: https://www.opennet.ru/opennews/art.shtml?num=51745

[83] Немецкое управление по информационной безопасности назвало Firefox самым защищенным браузером: https://xakep.ru/2019/10/23/bsi-browser-stats/

[84] В Samsung Galaxy Store появляется поддержка PWA: https://medium.com/samsung-internet-dev/introducing-progressive-web-apps-to-samsung-galaxy-store-47ecd317725b

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

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

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

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

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