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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] Подкаст «Веб-стандарты» №216: Ручной SVG, Puppeteer 2.1 с Firefox, снова Yarn 2, что такое TeamCity, компоненты в Storybook: https://medium.com/web-standards/episode-216-f4b73389ca5a

[8] Подкаст CSSSR: Новости 512 — Как работают браузеры, новинки GitHub и правила написания тестов: https://soundcloud.com/csssr/novosti-512-kak-rabotayut-brauzery-novinki-github-i-pravila-napisaniya-testov

[9] Repozitorro #36 — Портфолио, или сайт тур-агенства?: https://www.youtube.com/watch?v=m98t4LIOyUQ

[10] Новый фронтенд Одноклассников: запуск React в Java. Часть II: https://habr.com/ru/company/odnoklassniki/blog/486810/

[11] Исчерпывающий путеводитель по тегу iframe: https://habr.com/ru/post/488516/

[12] SEO 2020: актуальные тренды и подходы: https://www.searchengines.ru/seo-2020.html

[13] Инклюзивные компоненты: слайдер: https://medium.com/web-standards/a-content-slider-a9ebddaae274

[14] 3 способа подключать полифилы : https://3perf.com/blog/polyfills/

[15] Один день из жизни Frontend Product Engineer в Slack : https://slack.engineering/a-day-in-the-life-of-a-frontend-product-engineer-at-slack-27375455cfaa

[16] Что подразумевает разработка Progressive Web Apps (PWA)? : https://www.linkedin.com/pulse/what-does-progressive-web-apps-pwa-development-mean-dmitry-chekalin/

[17] Angular 9, Ionic 5, React Navigation 5 — Web Dev Update за февраль 2020: https://www.youtube.com/watch?v=K4n5mjLUgEg

[18] Webpack 5 — Asset Modules: https://habr.com/ru/post/488464/

[19] 11 полезных онлайн-инструментов для разработчиков фронтенда : https://blog.bitsrc.io/12-useful-online-tools-for-frontend-developers-bf98f3bf7c63

[20] Представляем Page Speed ​​Benchmarks — новый ресурс для сообщества, занимающегося производительностью: https://speedcurve.com/blog/page-speed-benchmarks/

[21] Производительная фронтенд архитектура : https://www.debugbear.com/blog/performant-front-end-architecture

[22] Лучшие практики JavaScript — Производительность : https://levelup.gitconnected.com/javascript-best-practices-performance-a549bc87ed20

[23] Создание галереи изображений с использованием PixiJS и WebGL : https://css-tricks.com/building-an-images-gallery-using-pixijs-and-webgl/

[24] Где все анимированные SVG? : https://www.getmotion.io/blog/where-are-all-the-animated-svgs/

[25] Как создать физическую модель 3D-ткани с помощью Cannon.js и Three.js : https://tympanus.net/codrops/2020/02/11/how-to-create-a-physics-based-3d-cloth-with-cannon-js-and-three-js/

[26] Очередная подборка креативных интерфейсов «UI Interactions & Animations Roundup #3» : https://tympanus.net/codrops/2020/02/10/ui-interactions-animations-roundup-3/

[27] Понимание CSS Grid: Создание Grid-контейнера: https://habr.com/ru/post/487566/

[28] На пути к отзывчивым элементам: https://css-live.ru/css/na-puti-k-otzyvchivym-elementam.html

[29] Google увеличил лимит на пользовательский CSS для AMP: https://www.searchengines.ru/amp-css-limit.html

[30] Понимание CSS Grid: Grid Template Areas: https://www.smashingmagazine.com/2020/02/understanding-css-grid-template-areas/

[31] Styled Components vs. CSS Stylesheets: https://getstream.io/blog/styled-components-vs-css-stylesheets/

[32] Один HTML, разный CSS: https://ishadeed.com/article/same-html-different-css/

[33] На встречу к отзывчивым элементам. Немного информации о текущем состоянии «Container Queries»: https://bkardell.com/blog/TowardResponsive.html?1

[34] Chameleonic Header: https://codyhouse.co/tutorials/chameleonic-header-effect

[35] Что такое CSS4? : https://www.quirksmode.org/blog/archives/2020/02/what_is_css4.html

[36] Как создать более читаемый CSS : https://medium.com/@elad/how-to-create-a-more-readable-css-3e67ea4812ee

[37] Пока вы не смотрели, CSS-градиенты стали лучше : https://css-tricks.com/while-you-werent-looking-css-gradients-got-better/

[38] CSS свойства object-fit и object-position: Обрезка изображений, встроенных в HTML : https://medium.com/css-mine/css-object-fit-and-object-position-properties-crop-images-embedded-in-html-a52aae7bf73a

[39] Работаем с двухмерной физикой в JavaScript: https://habr.com/ru/post/487962/

[40] console.log — не часть языка JavaScript : https://medium.com/@nikjohn/console-log-isnt-in-the-javascript-language-2b0f24d57397

[41] Новые функции JavaScript в ES2019 (ES10) : https://medium.com/javascript-in-plain-english/javascript-es2019-es10-in-a-nutshell-cae6f7524519

[42] Почему JavaScript съедает HTML: https://css-tricks.com/why-javascript-is-eating-html/

[43] Анонс Ionic 5!: https://ionicframework.com/blog/announcing-ionic-5/

[44] UniversalModel — унифицированное управление состоянием для Angular, React, Svelte и Vue: https://universal-model.github.io/

[45] 5 рекомендаций по написанию качественных стрелочных функций: https://habr.com/ru/company/ruvds/blog/486690/

[46] 7 рекомендаций по повышению надёжности JavaScript-кода: https://habr.com/ru/company/ruvds/blog/487682/

[47] 4 метода поиска по массивам в JavaScript : https://alligator.io/js/array-search-methods/

[48] Как JavaScript реализует объектно-ориентированное программирование : https://www.freecodecamp.org/news/how-javascript-implements-oop/

[49] Понимание быстрой сортировки в JavaScript : https://alligator.io/js/quick-sort/

[50] Погружаемся в работу с children на React: https://medium.com/@stasonmars/%D0%BF%D0%BE%D0%B3%D1%80%D1%83%D0%B6%D0%B0%D0%B5%D0%BC%D1%81%D1%8F-%D0%B2-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%83-%D1%81-children-%D0%BD%D0%B0-react-f570844bcb88

[51] Как сделать мобильное приложение с помощью JS. Путь React Native: https://dou.ua/lenta/articles/how-to-learn-react-native/

[52] Частые ошибки в React и JavaScript. Алексей Ладыга на канале FrontSpot: https://www.youtube.com/watch?v=EeA1h-d4m6c

[53] Хуки React Router: https://css-tricks.com/the-hooks-of-react-router/

[54] Как создавать формы с помощью React легким способом : https://www.telerik.com/blogs/how-to-build-forms-with-react-the-easy-way

[55] Создать кастомные хуки в React для ваших веб-компонентов : https://medium.com/swlh/create-a-react-custom-hooks-for-your-web-components-f4319bb4bc35

[56] Разработка более быстрых приложений на Vue.js: https://habr.com/ru/company/ruvds/blog/487684/

[57] Предварительный просмотр загружаемых файлов с помощью Axios и VueJS: https://webdevblog.ru/predvaritelnyj-prosmotr-zagruzhaemyh-fajlov-s-pomoshhju-axios-i-vuejs/

[58] Реализация Drag & Drop при загрузке файлов на VueJS: https://webdevblog.ru/realizaciya-drag-drop-pri-zagruzke-fajlov-na-vuejs/

[59] Понимание и разработка фильтров в Vue.js : https://medium.com/js-dojo/knowing-and-developing-filters-in-vue-js-72c24e492e6c

[60] Настройка mocking API с помощью Mirage JS и Vue.js : https://www.smashingmagazine.com/2020/02/api-mocking-mirage-vue-javascript/

[61] Создание управляемых сервером удаленных тем для вашего приложения на Angular : https://medium.com/better-programming/angular-remote-themes-21ff698ed12e

[62] Как использовать *ngIf еще в ваших Angular приложениях : https://www.telerik.com/blogs/how-to-use-ngif-else-angular-applications

[63] Использование REST API в Svelte : https://blog.logrocket.com/consuming-rest-apis-in-svelte/

[64] Компилятор Svelte: под капотом : https://dev.to/joshnuss/svelte-compiler-under-the-hood-4j20

[65] The Ember Times — Выпуск 134: https://habr.com/ru/post/488462/

[66] The Ember Times — Выпуск 135: https://habr.com/ru/post/488586/

[67] Что такое реактивность?: https://habr.com/ru/post/488530/

[68] Как переусложнить статическую страницу: https://simplabs.com/blog/2020/01/31/how-to-over-engineer-a-static-page/

[69] Что делает хорошую реактивную систему? : https://www.pzuraq.com/thinking-with-autotracking-what-makes-a-good-reactive-system/

[70] Три причины для перехода на синтаксис Angle Bracket в Ember Octane : https://spin.atomicobject.com/2020/02/12/ember-angle-bracket-syntax/

[71] JS Party – Episode #114: Octane двигает Ember к подходу HTML-first : https://changelog.com/jsparty/114

[72] DotMatrx.js — небольшая js библиотека, которая использует SVG вместо canvas для повышения производительности и удобства: https://github.com/mmason33/dot-matrix

[73] esbuild — крайне быстрый JavaScript-бандлер и минификатор : https://github.com/evanw/esbuild

[74] plink-plonk.js: вы услышите изменения вашего DOM как различные частоты звука.: https://gist.github.com/tomhicks/6cb5e827723c4eaef638bf9f7686d2d8

[75] Релиз Firefox 73: https://www.opennet.ru/opennews/art.shtml?num=52347

[76] Firefox 73, обзор технических деталей от Марата Таналина: https://tanalin.com/blog/2020/02/firefox-73/

[77] Как я создал свой собственный браузер : https://kilianvalkhof.com/2020/design/how-i-built-my-own-browser/

[78] Демистификация браузеров: https://textslashplain.com/2020/02/09/demystifying-browsers/

[79] Mozilla проиграла браузерные войны. Она все еще думает, что может спасти интернет. : https://www.protocol.com/mozilla-plan-fix-internet-privacy

[80] Разбираемся с управлением памятью в современных языках программирования: https://medium.com/@shibakow/%D1%80%D0%B0%D0%B7%D0%B1%D0%B8%D1%80%D0%B0%D0%B5%D0%BC%D1%81%D1%8F-%D1%81-%D1%83%D0%BF%D1%80%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5%D0%BC-%D0%BF%D0%B0%D0%BC%D1%8F%D1%82%D1%8C%D1%8E-%D0%B2-%D1%81%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0%D1%85-%D0%BF%D1%80%D0%BE%D0%B3%D1%80%D0%B0%D0%BC%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D0%BD%D0%B8%D1%8F-a7c217384fb4

[81] GitHub начал тестирование интерфейса командной строки: https://www.opennet.ru/opennews/art.shtml?num=52363

[82] Новый проект для удаления артефактов из JPEG: https://www.opennet.ru/opennews/art.shtml?num=52368

[83] Три рабочих фреймворка для развития soft skills в ИТ и не только: https://vc.ru/hr/107070-tri-rabochih-freymvorka-dlya-razvitiya-soft-skills-v-it-i-ne-tolko

[84] 15 трендов 2020 года в дизайне: https://vc.ru/design/106603-15-trendov-2020-goda-v-dizayne

[85] 82% уязвимостей в веб-приложениях содержатся в исходном коде: https://xakep.ru/2020/02/14/web-apps-stats/

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

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

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

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

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