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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

[6] Девшахта-подкаст #112: Артём Кобзарь про собственную альтернативу TS и многое другое : https://medium.com/devschacht/devschacht-112-ad8718a390c6

[7] Подкаст «Веб-стандарты» №217: Firefox 73, Angular 9, Container Queries, Web We Want, CSS4, JS поедает HTML, DOM Reflow: https://medium.com/web-standards/episode-217-e5194d41350

[8] Подкаст «Фронтенд Юность» (18+) #126: Лавка для фронтендера: https://soundcloud.com/frontend_u/e126

[9] 9 видео с WebAssembly Summit 2020: https://www.youtube.com/playlist?list=PL6ed-L7Ni0yQ1pCKkw1g3QeN2BQxXvCPK#wassummit2020

[10] 4 видео с MoscowJS 47: https://www.youtube.com/playlist?list=PL95OM-7UObpEoTxbhvG6Udnkw-xM4Ay5u

[11] Материалы с казанского митапа по фронтенду: Phoenix LiveView, фронтопс, JSON:API: https://habr.com/ru/company/avito/blog/488716/

[12] Отключенные контролы в формах и как с ними работать : https://catalin.red/disabled-form-controls/

[13] Полное руководство по дата-атрибутам : https://css-tricks.com/a-complete-guide-to-data-attributes/

[14] Сделайте это, чтобы улучшить загрузку изображений на вашем сайте : https://css-tricks.com/do-this-to-improve-image-loading-on-your-website/

[15] Современная сборка 2020 для frontend. Gulp4: https://habr.com/ru/post/484714/

[16] Мои любимые инструменты разработчика Chrome: https://habr.com/ru/post/489284/

[17] jest vs jasmine: основные отличия: https://medium.com/@cakeinpanic/jest-vs-jasmine-%D0%BE%D1%81%D0%BD%D0%BE%D0%B2%D0%BD%D1%8B%D0%B5-%D0%BE%D1%82%D0%BB%D0%B8%D1%87%D0%B8%D1%8F-6ef3ce25fada

[18] Большое руководство по командам консоли : https://css-tricks.com/a-guide-to-console-commands/

[19] destiny — Prettier для файловой структуры: https://github.com/benawad/destiny

[20] Опыт интеграции веб-компонентов на сайт Леруа Мерлен: https://habr.com/ru/company/leroy_merlin/blog/488648/

[21] Все способы создания веб-компонентов : https://webcomponents.dev/blog/all-the-ways-to-make-a-web-component/

[22] Веб-компонент для блока кода: https://css-tricks.com/web-component-for-a-code-block/

[23] Что такое производительность веб-приложений?: https://habr.com/ru/company/tinkoff/blog/489230/

[24] Устранение утечек памяти в веб-приложениях : https://nolanlawson.com/2020/02/19/fixing-memory-leaks-in-web-applications/

[25] JAMstack — это в основном брендинг?: https://dev.to/remotesynth/is-jamstack-all-branding-and-little-substance-1pih

[26] J в JAMstack не означает React (или Angular, Vue, Svelte и т.д.) : https://dev.to/remotesynth/the-j-in-jamstack-does-not-stand-for-react-or-angular-vue-svelte-etc-493g

[27] Понимание правил и соотношений цветового контраста в вебе : https://css-tricks.com/understanding-web-accessibility-color-contrast-guidelines-and-ratios/

[28] Основные ошибки доступности в веб-разработке : https://pineco.de/accessibility-donts-learn-from-basic-mistakes-in-web-design/

[29] Разбираемся с переменными в CSS на реальном примере: https://habr.com/ru/post/489294/

[30] Фиксированные заголовки с якорными ссылками перехода? Решение — scroll-margin-top : https://css-tricks.com/fixed-headers-and-jump-links-the-solution-is-scroll-margin-top/

[31] Анимация изменений SVG Path в CSS : https://css-tricks.com/animate-svg-path-changes-in-css/

[32] Стилизация старого доброго элемента Button: https://ishadeed.com/article/styling-the-good-old-button/

[33] Добавление цветов фона в SVG с помощью элемента «rect» : https://css-tricks.com/add-background-colors-to-svgs-using-the-rect-element/

[34] Let’s Define CSS 4. Обсуждение в csswg-drafts на github, где народ пытается определить, что же такое CSS 4: https://github.com/w3c/csswg-drafts/issues/4770

[35] Создаем диагональные раскладки по версии 2020 года : https://9elements.com/blog/pure-css-diagonal-layouts/

[36] Эффект частиц пыли на CSS: https://codepen.io/uiswarup/full/oNXYNOB

[37] Молчание вентиляторов. Google Colab, Javascript и TensorflowJS: https://habr.com/ru/company/avito/blog/488936/

[38] Создайте полнофункциональную карусель в стиле Tinder на ванильном JavaScript : https://www.hackdoor.io/articles/8MNPqDpV/build-a-full-featured-tinder-like-carousel-in-vanilla-javascript

[39] Python и JavaScript: радости утиной типизации : https://cjshaver.com/bl0185

[40] 7 трюков с Rest и Spread операторами при работе c JS объектами: https://habr.com/ru/post/489550/

[41] Новые функции в ES2020 : https://dailycoding.io/article/VgO4VcAHmUyN6ZGwuaLo

[42] 5 cекретных функций JSON.stringify () : https://medium.com/javascript-in-plain-english/5-secret-features-of-json-stringify-c699340f9f27

[43] 4 способа обмениваться переменными в JavaScript : https://dmitripavlutin.com/swap-variables-javascript/

[44] Полное руководство по советам, хитростям и функциям JavaScript, которые вы должны знать : https://levelup.gitconnected.com/ultimate-guide-to-tips-tricks-and-javascript-features-you-should-know-27e0a4a6ffdf

[45] Пришло ли время забыть о React и перейти на Svelte?: https://habr.com/ru/company/ruvds/blog/488660/

[46] Svelte-grid — draggable and resizable grid layout с отзывчивыми брейкпоинтами для Svelte.: https://svelte-grid.now.sh/

[47] Медленный код ненавидит его! Оптимизация веб-приложения от 1 до 60 кадров в секунду : https://blog.scottlogic.com/2020/02/17/minesweeper-optimisation.html

[48] Разблокировка реактивности с Svelte и RxJS : https://timdeschryver.dev/blog/unlocking-reactivity-with-svelte-and-rxjs

[49] Если бы у Svelte и RxJS был ребенок : https://dev.to/ism/if-svelte-and-rxjs-had-a-baby-4oe0

[50] Не пора ли нам забыть о React и запрыгнуть в вагон со Svelte? : https://medium.com/better-programming/is-it-time-we-forget-react-and-jump-on-the-svelte-bandwagon-4848bb5d0839

[51] 10 React-компонентов на все случаи жизни: https://habr.com/ru/company/ruvds/blog/488666/

[52] Используем localStorage в React: https://medium.com/@stasonmars/%D0%B8%D1%81%D0%BF%D0%BE%D0%BB%D1%8C%D0%B7%D1%83%D0%B5%D0%BC-localstorage-%D0%B2-react-82fd93cc16b9

[53] Максимизация переиспользования кода в React : https://blog.bitsrc.io/maximizing-code-reuse-in-react-35ee20ad362c

[54] Как использовать HTML Drag-and-Drop API в React : https://www.smashingmagazine.com/2020/02/html-drag-drop-api-react/

[55] Отладка проблем с производительностью в React : https://blog.logrocket.com/debugging-performance-problems-in-react/

[56] Полное руководство для начинающих по React Router (включая Router Hooks) : https://www.freecodecamp.org/news/a-complete-beginners-guide-to-react-router-include-router-hooks/

[57] Vue.js Templates — модификаторы и сокращения : https://medium.com/@hohanga/vue-js-templates-modifiers-and-shorthands-6fbd6c483678

[58] The Mindset of Component Composition в Vue: https://www.telerik.com/blogs/the-mindset-of-component-composition-in-vue

[59] Как создавать компоненты Vue в WordPress теме : https://css-tricks.com/how-to-build-vue-components-in-a-wordpress-theme/

[60] Переход от Vanilla JavaScript к переиспользуемым компонентам Vue : https://css-tricks.com/moving-from-vanilla-javascript-to-a-reusable-vue-component/

[61] Когда использовать новый Vue Composition API (а когда нет) : https://vuejsdevelopers.com/2020/02/17/vue-composition-api-when-to-use/

[62] Визуализация данных с Vue и D3 : https://alligator.io/vuejs/visualization-vue-d3/

[63] Реактивность: Vue 2 vs Vue 3: https://www.vuemastery.com/blog/Reactivity-Vue2-vs-Vue3/

[64] Практическое руководство по Angular: маршрутизация и обработка событий : https://www.telerik.com/blogs/a-practical-guide-to-angular-routing-and-event-handling

[65] Angular a11y: 11 советов, как сделать ваши приложения более доступными : https://dev.to/nikpoltoratsky/angular-a11y-11-tips-on-how-to-make-your-apps-more-accessible-400h

[66] Производительность селекторов NgRx : https://dev.to/angular/ngrx-selector-performance-46fo

[67] Angular 9: Lazy Loading Components: https://dev.to/angular/angular-9-lazy-loading-components-o04

[68] Что делает реактивную систему хорошей?: https://habr.com/ru/post/489530/

[69] Переход от React к Ember в 2020 : https://medium.com/@nowims/moving-from-react-to-ember-2020-86e082477d45

[70] The Ember Times — Issue No. 136: https://dev.to/embertimes/the-ember-times-issue-no-136-532n

[71] Использование WebAssembly в Ember.js (Rust + wasm-pack) : https://mfeckie.dev/wasm-in-ember/

[72] Эволюция Ember в Intercom : https://www.intercom.com/blog/videos/evolution-of-ember-at-intercom

[73] 2020 Ember.js Community Survey, ежегодный опрос : https://tilde.wufoo.com/forms/2020-emberjs-community-survey/

[74] Удаление людей из сложных фонов в режиме реального времени с помощью TensorFlow.js в браузере : https://github.com/jasonmayes/Real-Time-Person-Removal

[75] Удобное TensorFlow.js API для работы с ML на клиенте : https://towardsdatascience.com/handy-tensorflow-js-api-for-client-side-ml-development-5256ed88e6f1

[76] Mozilla проиграла в войне браузеров, но всё ещё считает, что может спасти интернет: https://habr.com/ru/post/488780/

[77] 2019-й по версии Chrome: https://habr.com/ru/company/google/blog/488886/

[78] Дорожная карта по разработке Edge обещает синхронизацию истории и добавление поддержки Linux: https://itc.ua/news/dorozhnaya-karta-po-razrabotke-edge-obeshhaet-sinhronizacziyu-istorii-i-dobavlenie-podderzhki-linux/

[79] Chrome 81 принесёт глобальную поддержку платформ WebXR и Web NFC: https://itc.ua/news/chrome-81-prinesyot-globalnuyu-podderzhku-platform-webxr-i-web-nfc/

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

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

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

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

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