Дайджест свежих материалов из мира фронтенда за последнюю неделю №338 (5 — 11 ноября 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Дайджест свежих материалов из мира фронтенда за последнюю неделю №338 (5 — 11 ноября 2018) - 1

Медиа

• podcast Подкаст «CSSSR» Новости 512 — Выпуск №28 (05.11 — 11.11) ^[7]
• podcast Подкаст «Пятиминутка React» #49 — bem-react-core ^[8]
• podcast «Девшахта — подкаст»: #56: NodeConf EU 2018 ^[9]
• podcast Подкаст «Drinkcast», #29 — «Фронтенд по-американски со Степаном Коршаковым» ^[10]
• video «ReactiveConf 2018» ^[11], 47 видео

Веб-разработка

• Elm изменил мое представление о непопулярных языках ^[12]
• Руководство по HTML Canvas ^[13]

Производительность:
• A Netflix Web Performance Case Study ^[14]. Детальная статья от Addy Osmani о том, как удалось улучшить показатель Time-To-Interactive для десктопной версии Netflix.com
• Повышение производительности анимированных GIF с помощью HTML5 Video ^[15]
• Web Performance 101 ^[16]. Детализированное введение в производительность загрузки современного веба от Ивана Акулова

Инструменты:
• Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2) ^[17]
• npm: полезные сокращения и трюки ^[18]
• Зачем я написал 33 расширения для VSCode и как я ими управляю ^[19]
• Непрерывная интеграция с помощью Prettier + ESLint ^[20]
• FX ^[21] — CLI-инструмент для обработки JSON
• Git алиасы, без которых я не могу жить ^[22]

Accessibility:
• Актуальность метаданных в доступных PDF ^[23]
• Бизнес-кейс для цифровой доступности ^[24]

Судя по всему, это последний пост в корпоративном блоге Zfort Group. Спасибо что заходили сюда, подписывались и читали наши посты в течении семи лет функционирования блога. Мы продолжим публикации наших дайджестов в том или ином виде. В первую очередь, подборки будут выходить в блоге корпоративного сайта ^[74]. Также, мы попробуем продолжить наши публикации на хабре с аккаунта alexzfort ^[75]. Контент дайджестов будет различаться, чтобы избежать его дублирования, новый формат будем пробовать уже на следующей неделе. Всем плодотворной недели!

Дайджест за прошлую неделю ^[76].
Материал подготовили derSmoll ^[77] и alekskorovin ^[78].

Автор: alexzfort

Источник ^[79]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] Новости 512 — Выпуск №28 (05.11 — 11.11): https://soundcloud.com/csssr/novosti-512-vypusk-28-0511-1111

[8] #49 — bem-react-core: https://soundcloud.com/5minreact/49-bem-react-core

[9] #56: NodeConf EU 2018: https://medium.com/devschacht/devschacht-56-c6274ec7ee61

[10] #29 — «Фронтенд по-американски со Степаном Коршаковым»: https://spb-frontend.ru/podcast/29/

[11] «ReactiveConf 2018»: https://www.youtube.com/playlist?list=PLa2ZZ09WYepPQAIo1h98LaPkQUYwaSbWO

[12] Elm изменил мое представление о непопулярных языках: https://medium.com/devschacht/elm-%D0%B8%D0%B7%D0%BC%D0%B5%D0%BD%D0%B8%D0%BB-%D0%BC%D0%BE%D0%B5-%D0%BF%D1%80%D0%B5%D0%B4%D1%81%D1%82%D0%B0%D0%B2%D0%BB%D0%B5%D0%BD%D0%B8%D0%B5-%D0%BE-%D0%BD%D0%B5%D0%BF%D0%BE%D0%BF%D1%83%D0%BB%D1%8F%D1%80%D0%BD%D1%8B%D1%85-%D1%8F%D0%B7%D1%8B%D0%BA%D0%B0%D1%85-fa13b7ae2472

[13] Руководство по HTML Canvas: https://flaviocopes.com/canvas/

[14] A Netflix Web Performance Case Study: https://medium.com/dev-channel/a-netflix-web-performance-case-study-c0bcde26a9d9

[15] Повышение производительности анимированных GIF с помощью HTML5 Video: https://www.smashingmagazine.com/2018/11/gif-to-video/

[16] Web Performance 101: https://3perf.com/talks/web-perf-101/

[17] Прокачиваем навыки отладки с помощью инструментов разработчика Chrome (часть 2): http://css-live.ru/faq/prokachivaem-navyki-otladki-s-pomoshhyu-instrumentov-razrabotchika-chrome-chast-2.html

[18] npm: полезные сокращения и трюки: https://medium.com/webbdev/npm-daa12a10caac

[19] Зачем я написал 33 расширения для VSCode и как я ими управляю: https://medium.com/@fabiospampinato/why-i-wrote-33-vscode-extensions-and-how-i-manage-them-cb61df05e154

[20] Непрерывная интеграция с помощью Prettier + ESLint: https://blog.bitsrc.io/continuous-integration-with-prettier-eslint-c4f4e61b550b

[21] FX: https://github.com/antonmedv/fx

[22] Git алиасы, без которых я не могу жить: http://mjk.space/git-aliases-i-cant-live-without/

[23] Актуальность метаданных в доступных PDF: https://commonlook.com/the-relevance-of-metadata-in-accessible-pdfs/

[24] Бизнес-кейс для цифровой доступности: https://www.w3.org/WAI/business-case/

[25] Как я создал меняющую настроения анимацию с помощью масок CSS: https://habr.com/company/poiskvps/blog/428666/

[26] Создание адаптивных изображений: https://habr.com/company/poiskvps/blog/429116/

[27] Советы по CSS, которые вы вряд ли найдете в самоучителях: https://habr.com/company/poiskvps/blog/429110/

[28] Как быстро спроектировать сайт с помощью CSS Grid: https://medium.com/webbdev/grid-f81f2dd422bc

[29] Полезный совет: использование calc() для изменения высоты Hero-компонентов страницы: https://css-tricks.com/fun-tip-use-calc-to-change-the-height-of-a-hero-component/

[30] Пять лет PostCSS: State of the Union: https://evilmartians.com/chronicles/five-years-of-postcss-state-of-the-union

[31] CSS фреймворки или CSS Grid: Что я должен использовать для своего проекта?: https://www.smashingmagazine.com/2018/11/css-frameworks-css-grid/

[32] Почему браузеры скачивают стили с неподходящими Media Queries: https://blog.tomayac.com/2018/11/08/why-browsers-download-stylesheets-with-non-matching-media-queries-180513

[33] Оптимизация CSS путем удаления неиспользуемых Media Queries: https://medium.com/zoover-engineering/optimizing-css-by-removing-unused-media-queries-80b5508c6de9

[34] CSS и сетевая производительность: https://csswizardry.com/2018/11/css-and-network-performance/

[35] Лейауты с плитками на гридах с помощью auto-fit и minmax: https://gedd.ski/post/tile-layouts/

[36] Краткий результат анализа и сравнения CSS в Twitter PWA и старого десктопного сайта: https://twitter.com/necolas/status/1058949372837122048

[37] Editorial Layouts, Floats и CSS Grid: https://v6.robweychert.com/blog/2018/11/css-grid-editorial-layouts/

[38] с решением в виде Exclusions: https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/

[39] Оффлайн брокер на JavaScript: https://habr.com/post/428980/

[40] Работа с абстрактными синтаксическими деревьями JavaScript: https://habr.com/company/jugru/blog/428628/

[41] [в закладки] PDF-версия руководства по Node.js и новое руководство по JavaScript: https://habr.com/company/ruvds/blog/428576/

[42] GraphQL получил собственную независимую площадку: https://tproger.ru/news/graphql-gets-own-foundation/

[43] 10 вещей, которые нужно выучить по пути к становлению мастером JavaScript: https://levelup.gitconnected.com/10-things-to-learn-on-the-way-to-become-a-javascript-master-f4fc632b2bb7

[44] За пределами console.log(): https://medium.com/@mattburgess/beyond-console-log-2400fdf4a9d8

[45] Стрелочные функции в JavaScript: зачем они нужны, как с ними обращаться, когда ими стоит пользоваться, а когда — нет: https://habr.com/company/ruvds/blog/428566/

[46] Имплементация промисов в JavaScript: https://medium.freecodecamp.org/how-to-implement-promises-in-javascript-1ce2680a7f51

[47] JSBI — имплементация официального предложения BigInt для ECMAScript на чистом JavaScript: https://github.com/GoogleChromeLabs/jsbi

[48] Компоненты высшего порядка в React: https://habr.com/company/ruvds/blog/428572/

[49] Имплементация плавного скроллинга в React: https://scotch.io/tutorials/implementing-smooth-scrolling-in-react

[50] React Suspense c Fetch API: https://medium.com/@Charles_Stover/react-suspense-with-the-fetch-api-a1b7369b0469

[51] Введение в хуки React: https://www.fullstackreact.com/articles/an-introduction-to-hooks-in-react/

[52] 5 вещей, которых я не знал о Create React App: https://www.telerik.com/blogs/5-things-i-didnt-know-about-create-react-app

[53] 3 преимущества функциональных компонентов в React на eCommerce сайтах: https://blog.logrocket.com/react-functional-components-3-advantages-and-why-you-should-use-them-a570c83adb5e

[54] re: Почему комьюнити React обходит стороной веб-компоненты?: https://dev.to/dan_abramov/comment/6kdc

[55] Темизация Angular приложений: https://medium.com/@tomsu/theming-angular-c869827738c3

[56] Чеклист чистого кода в Angular ️: https://itnext.io/clean-code-checklist-in-angular-%EF%B8%8F-10d4db877f74

[57] Почему Angular заставил меня бросить веб-разработку: https://hackernoon.com/why-angular-made-me-quit-web-dev-f63b83a157af

[58] Полное руководство по Angular 6+ Dependency Injection — providedIn vs providers:[ ] : https://medium.com/@tomastrajan/total-guide-to-angular-6-dependency-injection-providedin-vs-providers-85b7a347b59f

[59] Урок по Angular Material Table с примером: https://appdividend.com/2018/11/07/angular-material-table-tutorial-example/

[60] Создание радиальной диаграммы на Vue и SVG: https://css-tricks.com/building-a-donut-chart-with-vue-and-svg/

[61] Поправляем виртуальный DOM Vue.js: необходимость, объяснение и решение: https://medium.com/dailyjs/patching-the-vue-js-virtual-dom-the-need-the-explanation-and-the-solution-ba18e4ae385b

[62] Встречайте Loona: библиотеку для управления состоянием приложений в React и Angular: https://medium.com/the-guild/loona-state-management-graphql-77baf6734f1

[63] Glider.js: очень быстрая, небольшая, полностью адаптивная, с поддержкой мобильных устройств, без зависимостей, библиотека для прокрутки и навигации списков: https://nickpiscitelli.github.io/Glider.js/#demos

[64] Вышла новая Opera для Android с функцией блокировки cookie-диалогов: https://www.searchengines.ru/novaya-opera-dlya-android.html

[65] Chrome 71 будет блокировать всю рекламу на сайтах с обманными элементами: https://www.searchengines.ru/chrome-block-decept.html

[66] В Firefox тестируют поддержку сохранения в облачные хранилища: https://www.opennet.ru/opennews/art.shtml?num=49576

[67] Обнаружена новая RCE-уязвимость в браузере Edge: https://xakep.ru/2018/11/06/edge-rce-sbx/

[68] Теперь официально. Google подтвердила, что темный режим существенно экономит заряд: https://ain.ua/2018/11/09/temnaya-tema-ekonomit-batareyu/

[69] Формат, изменивший мир: история VHS: https://dtf.ru/retro/30429-format-izmenivshiy-mir-istoriya-vhs

[70] GitHub преодолел рубеж в 100 млн репозиториев: http://www.opennet.ru/opennews/art.shtml?num=49580

[71] Microsoft добавит в Word функцию, которая будет автоматически создавать списки задач: https://itc.ua/news/microsoft-dobavit-v-word-funktsiyu-kotoraya-budet-avtomaticheski-sozdavat-spiski-zadach/

[72] Бесконтакт: что такое NFC и как программисту с ним работать: https://tproger.ru/articles/nfc-rfid-internals/

[73] Самые дорогие стартапы, которые закрылись в 2018 году: https://vc.ru/story/50609-samye-dorogie-startapy-kotorye-zakrylis-v-2018-godu

[74] блоге корпоративного сайта: https://www.zfort.com.ua/blog/category/digest

[75] alexzfort: https://habr.com/users/alexzfort/

[76] Дайджест за прошлую неделю: https://habr.com/company/zfort/blog/428766/

[77] derSmoll: https://habr.com/users/dersmoll/

[78] alekskorovin: https://habr.com/users/alekskorovin/

[79] Источник: https://habr.com/post/429528/?utm_campaign=429528

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