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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] Подкаст «CSSSR»: https://soundcloud.com/csssr/novosti-512-vue-3-razborki-mikroservisy-benchmarki-i-nemnogo-o-super-kompyuterakh

[8] Подкаст «Пятиминутка React»: https://soundcloud.com/5minreact/youtube-screencasts

[9] Подкаст «Repozitorro»: https://www.youtube.com/watch?v=fQMFgS6khyg

[10] Подкаст «Pro Conf»: https://www.youtube.com/watch?v=2DtjtP9H49U

[11] CSS Day 2019 + UI Special: https://www.youtube.com/playlist?list=PLjnstNlepBvNTimR5FhD5tdbbQr57o1Oh

[12] Как делать сайты в 2019 году: https://habr.com/ru/post/456912/

[13] Почему я не использую веб-компоненты: https://habr.com/ru/post/457010/

[14] 10 полезных советов по реализации Pixel Perfect дизайна в Frontend разработке: https://medium.com/webbdev/design-a471fbf1f765

[15] Как разделить ваш HTML на секции: https://css-tricks.com/how-to-section-your-html/

[16] Техника Reduced Motion для Picture: https://css-tricks.com/reduced-motion-picture-technique-take-two/

[17] Урок по веб-компонентам для начинающих [2019]: https://www.robinwieruch.de/web-components-tutorial/

[18] Микро фронтенды: https://martinfowler.com/articles/micro-frontends.html

[19] Как создать PDF из вашего веб-приложения: https://www.smashingmagazine.com/2019/06/create-pdf-web-application/

[20] Все, что вам нужно знать о Progressive Web App (PWA): https://hackernoon.com/everything-you-need-to-know-about-progressive-web-app-pwa-6524edbb0c57

[21] Перетаскиваемое меню с анимированной сеткой превьюшек: https://tympanus.net/codrops/2019/06/19/draggable-menu-with-image-grid-previews/

[22] 4 приема, которые помогли нам оптимизировать frontend: https://habr.com/ru/company/epayments/blog/455700/

[23] Как увеличить размер страницы на 1500% с помощью webpack и Vue : https://css-tricks.com/how-to-increase-your-page-size-by-1500-with-webpack-and-vue/

[24] Оптимизация производительности Google Fonts: https://www.smashingmagazine.com/2019/06/optimizing-google-fonts-performance/

[25] Самый простой способ ускорить медленный сайт: https://www.machmetrics.com/speed-blog/the-1-easiest-way-to-speed-up-a-slow-website/

[26] Как повысить производительность вашего веб-приложения — 5 советов для разработчиков: https://www.synergycodes.com/blog/how-to-increase-your-frontend-apps-performance

[27] exthouse: https://github.com/treosh/exthouse

[28] Анатомия доступных форм: лучшие практики: https://www.deque.com/blog/anatomy-of-accessible-forms-best-practices/

[29] Преобразование div в доступные псевдокнопки: https://benfrain.com/converting-divs-into-accessible-pseudo-buttons/

[30] 5 шагов к доступной веб-типографике: https://betterwebtype.com/articles/2019/06/16/5-keys-to-accessible-web-typography/

[31] Почему мы предпочитаем CSS(--variable) переменным SASS($variable)?: https://habr.com/ru/post/456302/

[32] Введение в CSS Shapes: http://htmlbook.ru/blog/vvedenie-v-css-shapes

[33] Галерея картинок в стиле Pinterest: https://medium.com/webbdev/tips-dac552393f91

[34] CSS свойство background-image как антипаттерн: https://medium.com/@stasonmars/css-%D1%81%D0%B2%D0%BE%D0%B8%CC%86%D1%81%D1%82%D0%B2%D0%BE-background-image-%D0%BA%D0%B0%D0%BA-%D0%B0%D0%BD%D1%82%D0%B8%D0%BF%D0%B0%D1%82%D1%82%D0%B5%D1%80%D0%BD-6685890d74d0

[35] Часть 1: UI special (1/2): https://johanronsse.be/2019/06/15/css-day-2019-part-1-ui-special/

[36] Часть 1: UI special (2/2): https://johanronsse.be/2019/06/19/css-day-2019-part-1-ui-special-2-2/

[37] CSS Day 2019: кое-какие вещи, которые я узнал: https://hiddedevries.nl/en/blog/2019-06-18-css-day-2019-some-things-i-learned

[38] Буквица и системы дизайна: https://product.voxmedia.com/2019/6/17/18524029/the-ballad-of-drop-caps-and-design-systems

[39] Copy-and-Paste CSS Animation Cheat Sheets: https://1stwebdesigner.com/copy-and-paste-css-animation-cheat-sheets/

[40] CSS Scroll Snap обновлен в Firefox 68: https://hacks.mozilla.org/2019/06/css-scroll-snap-updated-in-firefox-68/

[41] CJSS: https://github.com/scottkellum/CJSS

[42] Программирование на JavaScript для токарного станка: https://habr.com/ru/post/457248/

[43] Элегантная обработка ошибок в JavaScript с помощью монады Either: https://habr.com/ru/post/457098/

[44] Создание Micro Frontends с помощью React, Vue и Single-spa: https://dev.to/dabit3/building-micro-frontends-with-react-vue-and-single-spa-52op

[45] Использование сервис-воркеров в Google Search: https://web.dev/google-search-sw/

[46] 5 функций ES2019, которые вы можете использовать сегодня: https://blog.logrocket.com/5-es2019-features-you-can-use-today/

[47] 13 полезных однострочников на JavaScript: https://habr.com/ru/company/ruvds/blog/456338/

[48] Лямбда-исчисление в JavaScript?: https://medium.com/openmindonline/lambda-calculus-in-javascript-1ee947cadb21

[49] Основы JS: движок JavaScript: https://codeburst.io/js-essentials-the-javascript-engine-302ff38e8465

[50] Темный день для Vue.js: https://habr.com/ru/post/457250/

[51] 5 чрезвычайно простых способов ощутимо повысить скорость вашего VueJS-приложения: https://habr.com/ru/company/otus/blog/456724/

[52] VueJS: Продолжаем о 3.х: https://www.youtube.com/watch?v=5J1knrjJHGw&feature=youtu.be

[53] Начало работы с Vuex: руководство для начинающих: https://www.sitepoint.com/vuex-beginner-guide/

[54] Передача переменных в CSS в компонентах Vue: https://www.telerik.com/blogs/passing-variables-to-css-on-a-vue-component

[55] Используйте Data Binding Options во Vue.js для реактивных приложений: https://scotch.io/tutorials/use-vuejs-data-binding-options-for-reactive-applications

[56] Введение в хуки жизненного цикла Vue: https://blog.logrocket.com/introduction-to-vue-lifecycle-hooks/

[57] Создание CRUD приложения с Vue и GraphQL: https://blog.jscrambler.com/building-a-crud-app-with-vue-and-graphql/

[58] Анонс новой версии Styled Components v5: Звериный оскал: https://habr.com/ru/post/456422/

[59] 5 отличных способов анимировать React-приложения в 2019 году: https://habr.com/ru/company/skillbox/blog/456972/

[60] 11 советов для тех, кто использует Redux при разработке React-приложений: https://habr.com/ru/company/ruvds/blog/456336/

[61] Как добавить интернационализацию (i18n) в приложение Preact: https://dev.to/henrylim96/how-to-add-internationalization-i18n-to-your-preact-application-5gd6

[62] React c 60 кадров в секунду  —  создание увеличителя Medium-стиле c React-Pose: https://blog.bitsrc.io/react-at-60fps-building-a-medium-inspired-zoom-with-react-pose-667499a3922

[63] Упрощение React State и хуков useState: https://upmostly.com/tutorials/simplifying-react-state-and-the-usestate-hook/

[64] Что это за хрень в React? (Suspense) : https://itnext.io/what-the-heck-is-this-in-react-suspense-c5e641e487a

[65] Vue без View — Введение в Renderless компоненты: https://dev.to/ycmjason/vue-without-view-an-introduction-to-renderless-components-23ld

[66] 19 концепций, которые нужно изучить для того, чтобы стать эффективным Angular-разработчиком: https://habr.com/ru/company/ruvds/blog/455503/

[67] Пользовательские директивы Angular: https://blog.ag-grid.com/custom-angular-directives/

[68] Создание масштабируемых, надежных и безопасных форм с помощью Angular: https://dev.to/maxime1992/building-scalable-robust-and-type-safe-forms-with-angular-3nf9

[69] EmberJS2019 Posts: https://github.com/abhilashlr/emberjs2019-posts

[70] Как новый синтаксис тестов позволяет упростить тестирование : https://guides.emberjs.com/release/testing/

[71] Встроенные инпут-хелперы в Ember.js: когда онт должны использоваться?: http://www.balinterdi.com/blog/built-in-input-helpers-in-ember-js-when-and-whether-they-should-be-used/

[72] Как на самом деле создать первоклассное приложение бесплато?: https://medium.com/@devotox/zero-cost-web-apps-part-1-b2d6b46916f1

[73] Essential Ember Addons: состояние экосистемы аддонов в Ember в 2019 : https://0xadada.pub/2019/06/17/essential-ember-addons/

[74] ts-toolbelt: ещё более безопасная типизация для TypeScript: https://github.com/pirix-gh/ts-toolbelt

[75] spotlight: библиотека для наиболее лёгкой интеграции галереи в попапе : https://github.com/nextapps-de/spotlight

[76] Just — библиотека от microsoft для определения задач сборки: https://microsoft.github.io/just/docs/doc-start

[77] deepmerge — библиотека для глубокого (рекурсивного) слияния Javascript объектов: https://github.com/TehShrike/deepmerge

[78] Chrome предупредит об опасных URL и обзаведется расширением Suspicious Site Reporter: https://xakep.ru/2019/06/19/suspicious-site-reporter/

[79] Новый браузер Microsoft Edge на базе Chromium теперь доступен для пользователей Windows 7 и Windows 8: https://itc.ua/news/novyj-brauzer-microsoft-edge-na-baze-chromium-teper-dostupen-dlya-polzovatelej-windows-7-i-windows-8/

[80] Для Firefox развивается режим блокировки виджетов социальных сетей и Firefox Proxy: http://www.opennet.ru/opennews/art.shtml?num=50923

[81] Для Firefox 69 подготовлен генератор паролей и режим блокировки автовоспроизведения видео: http://www.opennet.ru/opennews/art.shtml?num=50891

[82] 5 браузеров, на которые стоит перейти, если вы заботитесь о своей приватности: https://ain.ua/2019/06/23/5-privatnyh-brauzerov/

[83] Против сотрудников Coinbase использовали две 0-day уязвимости в Firefox: https://xakep.ru/2019/06/21/second-ff-0day/

[84] Расширение для Chrome подменяло результаты поиска: https://xakep.ru/2019/06/20/youtube-queue/

[85] Как включить экспериментальные функции веб-платформы в Chrome и Firefox: https://css-irl.info/how-to-enable-experimental-web-platform-features/

[86] Microsoft реализует нативное удаление PWA-приложений: http://microsoftportal.net/windows-9/10992-microsoft-realizuet-nativnoe-udalenie-pwa-prilozheniy.html

[87] В PowerPoint появится ИИ-помощник для репетиции речи: https://itc.ua/blogs/v-powerpoint-poyavitsya-ii-pomoshhnik-dlya-repeticzii-rechi/

[88] Microsoft добавит в PowerPoint виртуального помощника для репетиции речи — он укажет на слова-паразиты и другие ошибки: https://vc.ru/services/72248-microsoft-dobavit-v-powerpoint-virtualnogo-pomoshchnika-dlya-repeticii-rechi-on-ukazhet-na-slova-parazity-i-drugie-oshibki

[89] Предугадать и исправить типичные ошибки пользователей при взаимодействии с сайтом: https://vc.ru/design/72228-predugadat-i-ispravit-tipichnye-oshibki-polzovateley-pri-vzaimodeystvii-s-saytom

[90] GitHub приобрёл разработчика сервиса для совместной проверки кода Pull Panda и сделал его инструменты бесплатными: https://vc.ru/services/72089-github-priobrel-razrabotchika-servisa-dlya-sovmestnoy-proverki-koda-pull-panda-i-sdelal-ego-instrumenty-besplatnymi

[91] Facebook представила международную криптовалюту Libra. Ее поддержали Visa, Mastercard, PayPal и многие другие, запуск — в первой половине 2020 года: https://itc.ua/news/facebook-predstavila-mezhdunarodnuyu-kriptovalyutu-libra-ee-podderzhali-visa-mastercard-paypal-i-mnogie-drugie-zapusk-v-pervoj-polovine-2020-goda/

[92] Первый взгляд на Facebook Libra : https://habr.com/ru/post/457050/

[93] Больше складных экранов, меньше подкастов: что ждёт технологии в 2019 году: https://vc.ru/future/72590-bolshe-skladnyh-ekranov-menshe-podkastov-chto-zhdet-tehnologii-v-2019-godu

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

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

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

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

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