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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] Подкат CSSSR: Argumentarium — React & Virtual DOM vs. Angular & Incremental DOM: https://soundcloud.com/csssr/argumentarium-react-virtual-dom-vs-angular-incremental-dom

[8] Подкаст «Веб-стандарты» №214: Подкасты, Safari, браузер Flow, эра IE, CSSWG, Yarn или npm, Playwright, JetBrains Mono: https://soundcloud.com/web-standards/episode-214

[9] Веб-компоненты и открытые стандарты: https://habr.com/ru/post/486500/

[10] Веб тренды 2020, которые стоит попробовать: https://habr.com/ru/post/485768/

[11] Пять советов по улучшению вашей среды разработки UI: https://medium.com/front-end-in-regions-grodno/%D0%BF%D1%8F%D1%82%D1%8C-%D1%81%D0%BE%D0%B2%D0%B5%D1%82%D0%BE%D0%B2-%D0%BF%D0%BE-%D1%83%D0%BB%D1%83%D1%87%D1%88%D0%B5%D0%BD%D0%B8%D1%8E-%D0%B2%D0%B0%D1%88%D0%B5%D0%B9-%D1%81%D1%80%D0%B5%D0%B4%D1%8B-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8-ui-a3a11dcd3d5d

[12] Веб в 2020 году: расширяемость и совместимость: https://css-live.ru/articles/veb-v-2020-godu-rasshiryaemost-i-sovmestimost.html

[13] ResizeObserver — новый мощный инструмент для отзывчивого веба : https://medium.com/@barvysta/resizeobserver-a-new-powerful-tool-for-responsive-web-f9a53ed71952

[14] Голосовые помощники и JAMstack : https://www.stackbit.com/blog/jamstack-voice-assistants/

[15] Accessible Accordion. Инструкции по созданию доступного, инклюзивного компонента аккордиона: https://www.aditus.io/patterns/accordion/

[16] Yarn 2 — с Prolog'ом и плагнплеями: https://habr.com/ru/post/486330/

[17] Как мигрировать с mocha на jest в 14 простых шагов — и зачем: https://habr.com/ru/post/486360/

[18] Что нового в DevTools (Chrome 81) : https://developers.google.com/web/updates/2020/01/devtools

[19] Выберите лучший генератор статических сайтов для своих проектов 2020 года : https://snipcart.com/blog/choose-best-static-site-generator

[20] WordPress реализует lazy-loading по умолчанию для всех изображений: https://www.searchengines.ru/wp-lazy.html

[21] Использование AMP и Турбо-страниц на коммерческих сайтах: https://www.seonews.ru/analytics/ispolzovanie-amp-i-turbo-stranits-na-kommercheskikh-saytakh/

[22] Как накручивают 100 баллов на Google PageSpeed: https://vc.ru/services/103768-kak-nakruchivayut-100-ballov-na-google-pagespeed

[23] Почему результаты теста скорости отличаются от времени загрузки : https://www.machmetrics.com/speed-blog/why-speed-test-results-are-different-than-your-load-times/

[24] Разработка WebGPU-приложений: https://habr.com/ru/company/ruvds/blog/485644/

[25] Новая техника для создания адаптивных диаграмм без JavaScript : https://dev.to/richharris/a-new-technique-for-making-responsive-javascript-free-charts-gmp

[26] Как создать конвертер речи в эмоции с помощью Web Speech API и Node.js : https://www.freecodecamp.org/news/speech-to-sentiment-with-chrome-and-nodejs/

[27] Анонимный веб-скрапинг с помощью Node.js, Tor, Puppeteer и Cheerio : https://levelup.gitconnected.com/anonymous-web-scrapping-with-node-js-tor-apify-and-cheerio-3b36ec6a45dc

[28] Как Smashing Magazine управляет контентом: переход с WordPress на JAMstack : https://www.smashingmagazine.com/2020/01/migration-from-wordpress-to-jamstack/

[29] Оптимизация SVG для веба : https://css-irl.info/optimising-svgs-for-the-web/?ref=heydesigner

[30] Используйте и переиспользуйте все в SVG… Даже анимации! : https://css-tricks.com/use-and-reuse-everything-in-svg-even-animations/

[31] Выход за пределы автоматического сжатия SVG с элементом «use» : https://css-tricks.com/going-beyond-automatic-svg-compression-with-the-use-element/

[32] Знакомимся с Web Animations API: https://habr.com/ru/post/486454/

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

[34] Реализация 2D физики в JavaScript : https://towardsdatascience.com/implementing-2d-physics-in-javascript-860a7b152785

[35] Создаем анимированное слайдшоу на чистом CSS: https://habr.com/ru/post/486064/

[36] Методы скрытия элементов веб-страниц: https://habr.com/ru/company/ruvds/blog/485640/

[37] Новые математические функции в модуле единиц и значений CSS 4 уровня – еще один шаг к полноценному программированию на CSS: https://css-live.ru/vecssti-s-polej/novye-matematicheskie-funkcii-v-module-edinic-i-znachenij-css-4-urovnya-eshhe-odin-shag-k-polnocennomu-programmirovaniyu-na-css.html

[38] Как создать движок для темизации, используя CSS переменные и React Context : https://www.freecodecamp.org/news/themes-using-css-variables-and-react-context/

[39] Анимация ширины и высоты в CSS без эффекта расплющивания : https://pqina.nl/blog/animating-width-and-height-without-the-squish-effect/

[40] 2 общие проблемы с позиционированием в CSS : https://medium.com/better-programming/css-positioning-its-two-common-problems-82a9f9e1c58c

[41] Анимация переходов для скрытых элементов: https://cloudfour.com/thinks/transitioning-hidden-elements/

[42] Список из 300+ CSS-свойств с примерами : https://www.web4college.com/css-play/index.php

[43] Прикрепленное оглавление с прокруткой активных состояний : https://css-tricks.com/sticky-table-of-contents-with-scrolling-active-states/

[44] Как вы делаете максимальный размер шрифта в CSS? : https://css-tricks.com/how-do-you-do-max-font-size-in-css/

[45] Можете ли вы сделать таймер обратного отсчета в чистом CSS? : https://www.chenhuijing.com/blog/can-you-make-a-countdown-timer-in-pure-css/#%F0%9F%9A%B2

[46] Пишем по кругу с offset-path: https://css-tricks.com/set-type-on-a-circle-with-offset-path/

[47] Основные советы по JavaScript SEO : https://levelup.gitconnected.com/essential-javascript-seo-tips-62d47e1e0537

[48] Как автоматически обновлять ваши JavaScript-зависимости : https://cloudfour.com/thinks/auto-update-js-dependencies/

[49] Визуализация управления памятью в V8 Engine (JavaScript, NodeJS, Deno, WebAssembly) : https://deepu.tech/memory-management-in-v8/

[50] 5 рекомендаций по написанию качественных стрелочных функций : https://dmitripavlutin.com/javascript-arrow-functions-best-practices/

[51] Насколько важен порядок свойств в объектах JavaScript?: https://habr.com/ru/post/486162/

[52] Понимание иммутабельности в JavaScript : https://css-tricks.com/understanding-immutability-in-javascript/

[53] Разница между типом и интерфейсом в TypeScript: https://teletype.in/@alteregor/rkPlgmQz8

[54] Лучшие модалки в React : https://www.telerik.com/blogs/better-modals-in-react

[55] Что нового в Next.js 9.2? : https://blog.logrocket.com/whats-new-in-next-js-9-2/

[56] Как использовать SVG в React : https://blog.logrocket.com/how-to-use-svgs-in-react/

[57] Настройка Typescript React Redux проекта : https://typeofnan.dev/setup-a-typescript-react-redux-project/

[58] Error Boundary для неправильных пропсов или как я хакнул prop-types package: https://dev.to/kirillgenets/how-to-create-an-error-boundary-for-wrong-prop-types-or-how-to-hack-prop-types-package-5gdh

[59] G&P Boilerplate — профессиональный фронтент-шаблон для создания быстрых, надежных и адаптируемых веб-приложений или сайтов с помощью vuejs.: https://github.com/GrabarzUndPartner/gp-vue-boilerplate?ref=madewithvuejs.com

[60] Загрузка файлов с помощью VueJS и Axios: https://webdevblog.ru/zagruzka-fajlov-s-pomoshhju-vuejs-i-axios/

[61] Создание нового сайта с VuePress : https://dev.to/samanthaming/building-my-new-site-with-vuepress-3kkc

[62] Отображение изображений в стиле Google и Flickr с помощью Vue.js : https://dev.to/aumayeung/display-images-like-google-and-flickr-with-vue-js-549h

[63] Функциональные базовые компоненты Vue.js на основе модулей CSS : https://markus.oberlehner.net/blog/vue-functional-base-components-powered-by-css-modules/

[64] Бесконечный скролл с Ionic, Angular и Firestore : https://dev.to/daviddalbusco/infinite-scroll-with-ionic-angular-and-firestore-4l40

[65] Практическое руководство по Angular: обработка HTTP операций : https://www.telerik.com/blogs/a-practical-guide-to-angular-handling-http-operations?utm_campaign=Angular%20Weekly&utm_medium=email&utm_source=Revue%20newsletter

[66] Предзагрузка модулей Angular по требованию : https://codeburst.io/preload-angular-modules-on-demand-c7a3310a0c5b

[67] Основные причины, почему ваше Angular приложение медленное : https://dev.to/angular/top-reasons-why-your-angular-app-is-slow-53pp

[68] The Ember Times — Выпуск 132: https://habr.com/ru/post/486356/

[69] Мышление с помощью Autotracking: что такое реактивность? : https://www.pzuraq.com/thinking-with-autotracking-what-is-reactivity/

[70] Проливаем немного света на timing out тесты: https://dev.to/michalbryxi/shining-some-light-on-timing-out-tests-35e6

[71] Чему я научился, написав библиотеку компонентов на Svelte: https://habr.com/ru/post/473598/

[72] Дайджест материалов сообщества Svelte (16.01 — 01.02): https://habr.com/ru/post/486602/

[73] Переезд от jQuery к Svelte, без боли: https://habr.com/ru/post/486646/

[74] popper 2.0 — обновленная версия движка для работы с тултипами: https://popper.js.org/

[75] Библиотеки JavaScript практически никогда не обновляются после установки : https://blog.cloudflare.com/javascript-libraries-are-almost-never-updated/

[76] Независимые браузеры более не конкурентоспособны: https://habr.com/ru/post/485918/

[77] Конец эпохи Trident: https://habr.com/ru/post/485892/

[78] Smashing Podcast, эпизод 7 со Stephanie Stimac и Aaron Gustafson: Что нового в Microsoft Edge?: https://www.smashingmagazine.com/2020/01/smashing-podcast-episode-8/

[79] Почему методология не спасет ваш проект: https://dou.ua/lenta/articles/methodology-on-project/

[80] Тренды и тенденции 2020 года: метаанализ Материал редакции: https://vc.ru/marketing/104226-trendy-i-tendencii-2020-goda-metaanaliz

[81] Google позволит на полгода скрывать ссылки из поиска: https://ain.ua/2020/01/29/google-deleting-url/

[82] Более 200 000 сайтов на WordPress оказались под угрозой из-за уязвимости в плагине Code Snippets: https://xakep.ru/2020/01/31/code-snippets/

[83] Успеть за 90 дней: Visa, JavaScript, Amazon Prime и другие проекты, созданные в рекордные сроки : https://vc.ru/story/104669-uspet-za-90-dney-visa-javascript-amazon-prime-i-drugie-proekty-sozdannye-v-rekordnye-sroki

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

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

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

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

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