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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] Подкаст «Веб-стандарты» №215: Перфоманс сначала или потом, воркеры, офлайн, без JS, чистый CSS и грязный результат: https://medium.com/web-standards/episode-215-49238637735a

[8] Подкаст «Фронтенд Юность (18+)» №124: Истории из параллельной реальности: https://soundcloud.com/frontend_u/e124/

[9] UnderJS Podcast #14 — UnderHTML — пилотный выпуск: https://underjs.ru/podcast/2020/01/07/anti-http2-and.html

[10] Подкаст CSSSR: Новости 512 — Встреча TC39, архивация open source для потомков, переход с Go на Rust в Discrord: https://soundcloud.com/csssr/novosti-512-vstrecha-tc39-arkhivatsiya-open-source-dlya-potomkov-perekhod-s-go-na-rust-v-discrord

[11] Февральский митап SPB Frontend (2020): https://www.youtube.com/watch?v=zHn3-RZ6EPc&t=601s

[12] ResizeObserver — новый мощный инструмент для отзывчивого веба: https://habr.com/ru/post/487146/

[13] Профессия: фронтенд-разработчик: https://habr.com/ru/company/ruvds/blog/487384/

[14] Работаем с аудио: загрузка файлов, звук, прогресс, визуализация: https://habr.com/ru/post/487574/

[15] Node.js, Tor, Puppeteer и Cheerio: анонимный веб-скрапинг: https://habr.com/ru/company/ruvds/blog/486688/

[16] Как переписать фронтенд нагруженного проекта и не потерять главного: https://habr.com/ru/company/yandex/blog/486146/

[17] Откуда у target=”_blank” нижнее подчеркивание: https://medium.com/@lucyhackwrench/%D0%BE%D1%82%D0%BA%D1%83%D0%B4%D0%B0-%D1%83-target-blank-%D0%BD%D0%B8%D0%B6%D0%BD%D0%B5%D0%B5-%D0%BF%D0%BE%D0%B4%D1%87%D0%B5%D1%80%D0%BA%D0%B8%D0%B2%D0%B0%D0%BD%D0%B8%D0%B5-e04c20399d1d

[18] Как стать фул-стек веб-разработчиком в 2020 году : https://www.freecodecamp.org/news/how-to-become-a-full-stack-web-developer-in-2020/

[19] 11 популярных заблуждений о микрофронтендах : https://blog.bitsrc.io/11-popular-misconceptions-about-micro-frontends-d5daecc92efb

[20] Что изучить в 2020 году разработчику? Отвечает Илья Климов: https://www.youtube.com/watch?v=U9WKHtCF4fU

[21] Средства консоли Chrome, которыми вы, возможно, никогда не пользовались: https://habr.com/ru/company/ruvds/blog/486692/

[22] Playwright — драматургия от Microsoft и новый инструмент для тестирования: https://habr.com/ru/company/jugru/blog/487294/

[23] Хоткеи для VS Code: гифки с демонстрацией и шпаргалка: https://tproger.ru/articles/useful-hotkeys-for-vs-code/

[24] 5 полезных функций в Chrome DevTools : https://itnext.io/5-more-awesome-features-in-chrome-devtools-303794410fb6

[25] Релиз новой версии PWABuilder: https://medium.com/pwabuilder/new-pwabuilder-release-b2932f4722a5

[26] Чему меня научил год изучения и преподавания доступности: https://medium.com/web-standards/what-accessibility-taught-me-207d1ff0e80c

[27] Быстрые практики доступности для мобильных и веб-приложений: https://medium.com/better-programming/quick-accessibility-wins-for-your-mobile-and-web-apps-3b4a41d5562

[28] Создание доступного контрола автозаполнения: https://adamsilver.io/articles/building-an-accessible-autocomplete-control/

[29] Могут ли браузеры автоматически решить проблемы с доступностью? : https://hiddedevries.nl/en/blog/2020-02-04-could-browsers-fix-more-accessibility-problems-automatically

[30] Эффекты перетаскивания изображений : https://tympanus.net/codrops/2020/02/03/image-dragging-effects/

[31] Подборка креативных веб-демо «Awesome Demos Roundup #13»: https://tympanus.net/codrops/2020/02/07/awesome-demos-roundup-13/

[32] CSS-2020: очередной «снимок состояния» или спецификация №1 современного CSS?: https://css-live.ru/vecssti-s-polej/css-2020-ocherednoj-snimok-sostoyaniya-ili-specifikaciya-1-sovremennogo-css.html

[33] Старый CSS, новый CSS : https://eev.ee/blog/2020/02/01/old-css-new-css/

[34] CSS4 — плохая идея : https://www.impressivewebs.com/css4-bad-idea/

[35] Learn CSS Positioning. Интерактивное руководство по позиционированию в CSS: https://ishadeed.com/article/learn-css-positioning/

[36] Создание макета коллажа с помощью CSS Grid и Clip-path : https://tympanus.net/codrops/2020/02/05/crafting-a-cutout-collage-layout-with-css-grid-and-clip-path/

[37] Выборка элемента с не пустым атрибутом : https://css-tricks.com/select-an-element-with-a-non-empty-attribute/

[38] Магические флип-карты: решение известной проблемы с размерами : https://www.smashingmagazine.com/2020/02/magic-flip-cards-common-sizing-problem/

[39] Использование CSS-свойства line-height для улучшения читабельности : https://alligator.io/css/line-height/

[40] Перемещение (или нет) с помощью CSS Motion Path : https://danielcwilson.com/blog/2020/01/motion-path-quirks/

[41] Быстрый и легкое внедрение темного режима с помощью пользовательских свойств CSS : https://css-irl.info/quick-and-easy-dark-mode-with-css-custom-properties/

[42] Реализация темного режима с TailwindCSS : https://logaretm.com/blog/2020-02-08-tailwind-dark-mode/

[43] Пользовательские стили для инпутов с помощью современных функций CSS : https://css-tricks.com/custom-styling-form-inputs-with-modern-css-features/

[44] Neumorphism.io — генератор CSS кода для теней : https://neumorphism.io/#55b9f3

[45] Почему вы должны использовать HSL цвета в CSS? : https://tsh.io/blog/why-should-you-use-hsl-color-representation-in-css/?ref=heydesigner

[46] Как я воссоздал камеру Polaroid с помощью одних CSS-градиентов : https://fossheim.io/writing/posts/css-polaroid-camera/?ref=heydesigner

[47] Светлая и темная фав-иконка на SVG с использованием медиа-функции CSS prefers-color-layout : https://catalin.red/svg-favicon-light-dark-theme/?ref=heydesigner

[48] Создание треугольника Серпинского одним div-ом: https://yuanchuan.dev/single-div-sierpinski-triangle

[49] 70 вопросов по JavaScript для подготовки к собеседованию: https://habr.com/ru/post/486820/

[50] Что может индексировать Google? SEO JavaScript тесты: https://seo-gold.com/seo-javascript-tests-what-can-google-index/

[51] 20+ веб-проектов на Vanilla JavaScript : https://github.com/bradtraversy/vanillawebprojects

[52] Форматирование дат в JavaScript с помощью Intl.DateTimeFormat : https://www.valentinog.com/blog/datetime/

[53] Electron 8.0.0 вышел в релиз: https://www.electronjs.org/blog/electron-8-0

[54] Небольшие функции ECMAScript, которые очень помогают : https://levelup.gitconnected.com/small-ecmascript-features-that-are-a-big-help-43ea45967ac3

[55] Понимание спецификации ECMAScript, часть 1 : https://v8.dev/blog/understanding-ecmascript-part-1

[56] Svelte: знакомимся с Действиями: https://habr.com/ru/post/486626/

[57] Создание редактируемой веб-страницы с помощью электронных таблиц Google и Tabletop.js : https://css-tricks.com/creating-an-editable-webpage-with-google-spreadsheets-and-tabletop-js/

[58] Знакомимся с Svelte, новым фреймворком на районе : https://css-tricks.com/getting-acquainted-with-svelte-the-new-framework-on-the-block/

[59] Elm vs. Svelte: https://dev.to/lucamug/elm-vs-svelte-7k4

[60] Svelte с точки зрения разработчика React: Основы : https://delvalle.dev/posts/svelte-from-react-perspective-basics/svelte-from-react-perspective-part-1/

[61] 12 лучших и простых практик в React, которых стоит придерживаться в 2020 году: https://medium.com/@stasonmars/12-%D0%BB%D1%83%D1%87%D1%88%D0%B8%D1%85-%D0%B8-%D0%BF%D1%80%D0%BE%D1%81%D1%82%D1%8B%D1%85-%D0%BF%D1%80%D0%B0%D0%BA%D1%82%D0%B8%D0%BA-%D0%B2-react-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D1%85-%D1%81%D1%82%D0%BE%D0%B8%D1%82-%D0%BF%D1%80%D0%B8%D0%B4%D0%B5%D1%80%D0%B6%D0%B8%D0%B2%D0%B0%D1%82%D1%8C%D1%81%D1%8F-%D0%B2-2020-%D0%B3%D0%BE%D0%B4%D1%83-c648b367d125

[62] Как создавать карты с помощью React и Leaflet : https://www.smashingmagazine.com/2020/02/javascript-maps-react-leaflet/

[63] Создавайте потрясающие анимации в React : https://alligator.io/react/staggering-animations/

[64] Постепенное использование TypeScript в вашем проекте на React : https://blog.bitsrc.io/react-js-to-typescript-how-to-migrate-gradually-d82026126d29

[65] В React неправильная абстракция убивает эффективность : https://jesseduffield.com/in-react-the-wrong-abstraction-kills-efficiency/

[66] Подводные камни чрезмерного использования React Context: https://blog.logrocket.com/pitfalls-of-overusing-react-context/

[67] Советы по повышению уровня ваших навыков в JavaScript и React : https://medium.com/better-programming/tips-to-level-up-your-javascript-and-react-skills-62bfbbb9b4d

[68] Индикатор хода загрузки файла с Axios и VueJS: https://webdevblog.ru/indikator-hoda-zagruzki-fajla-s-axios-i-vuejs/

[69] Создание более быстрых приложений с помощью Vue : https://levelup.gitconnected.com/building-faster-apps-with-vue-3d9a4302061d

[70] Лучшие 10 книг по Vue JS, которые вы должны прочитать : https://vuejsexamples.com/top-10-vue-js-books-you-should-read/

[71] Создание устойчивых энтерпрайз приложений с помощью Vue : https://vuetoronto.com/videos/creating-enterprise-apps-with-vue/

[72] Angular 9 теперь доступен — Ivy прибыл: https://habr.com/ru/post/487362/

[73] 10 полезных функций Angular, которые вы упускали: https://habr.com/ru/company/vdsina/blog/487376/

[74] Как сделать пошаговый гайд вашего приложения (если ваш проект на Angular): https://habr.com/ru/post/486920/

[75] Angular: Интеграционное тестирование (Shallow testing): https://habr.com/ru/company/veeam/blog/486994/

[76] Главные причины медленной работы Angular-приложений: https://habr.com/ru/company/ruvds/blog/485642/

[77] 9 вещей, которые я узнал, создавая одно приложение на Angular и React : https://www.telerik.com/blogs/9-things-i-learned-building-same-app-angular-and-react

[78] Обновление до Angular 9 — в течение 10 минут : https://levelup.gitconnected.com/upgrade-to-angular-9-within-10-minutes-671c6fd6174b

[79] Angular 9 — Что нового? Что изменилось? Обзор от Maximilian Schwarzmüller : https://www.youtube.com/watch?v=TcdhAxDWWxM&feature=youtu.be

[80] Прототипирование приложений с Ember Octane: за кулисами: https://crunchingnumbers.live/2020/02/03/prototyping-apps-with-ember-octane-behind-the-scenes/

[81] Предупреждение о потере несохраненных изменений в Ember Octane : https://www.balinterdi.com/blog/warning-about-losing-unsaved-changes-in-ember-octane/

[82] The Ember Times — Issue No. 134: https://dev.to/embertimes/the-ember-times-issue-no-134-i33

[83] Sharect — легкая JS библиотека, позволяющая пользователям делиться выделенным текстом в социальных сетях и браузерах (как на Medium): https://estevanmaito.github.io/sharect/

[84] Вам не нужен Moment.js. Список функций, которые вы можете использовать для замены moment.js + ESLint Plugin : https://github.com/you-dont-need/You-Dont-Need-Momentjs

[85] Baretest — Чрезвычайно минималистичная альтернатива Jest : https://volument.com/baretest

[86] Вышел браузер Chrome 80 с новшествами в обработке куки, которые могут нарушить работу сайтов: https://itc.ua/news/vyshel-brauzer-chrome-80-s-novshestvami-v-obrabotke-kuki-kotorye-mogut-narushit-rabotu-sajtov/

[87] Скоро Chrome будет блокировать навязчивую видеорекламу и загрузки через HTTP: https://xakep.ru/2020/02/07/chrome-news/

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

[89] 8 браузеров на базе Chromium: не Google Chrome единым: https://itc.ua/articles/8-brauzerov-na-baze-chromium-ne-google-chrome-edinym/

[90] Переход на Firefox. Бред Фрост делится своим опытом: https://bradfrost.com/blog/post/switching-to-firefox/

[91] Почему веб-браузеры бесплатны : https://www.youtube.com/watch?v=iv-i0qBhETM

[92] Бьёрн Страуструп: что в C++ надо было сделать по-другому, зачем его учить и совет начинающим программистам: https://tproger.ru/articles/bjarne-stroustrup-interview/

[93] 15 лет Картам Google: новый логотип и приложение: https://itc.ua/news/15-let-kartam-google-novyj-logotip-i-prilozhenie/

[94] Как коронавирус повлиял на скорость интернета в Китае : https://www.chinafy.com/blog/how-has-the-coronavirus-impacted-internet-speeds-in-china

[95] Что такое мини-аппы в WeChat и как с их помощью вырастить свой ecommerce-проект: https://vc.ru/services/105582-chto-takoe-mini-appy-v-wechat-i-kak-s-ih-pomoshchyu-vyrastit-svoy-ecommerce-proekt

[96] Робохроники ИИ: чат-бот от Google, фильм братьев Люмьер в 4К и алгоритмы на страже Дня сурка: https://vc.ru/ml/105704-robohroniki-ii-chat-bot-ot-google-film-bratev-lyumer-v-4k-i-algoritmy-na-strazhe-dnya-surka

[97] Полный провал: 10 эпических аварий и отключений дата-центров: https://www.computerra.ru/249823/polnyj-proval-10-epicheskih-avarij-i-otklyuchenij-data-tsentrov/

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

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

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

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

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