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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #80 – Гордей Левченко о переезде в Казахстан и развитии frontend-сообщества в Астане: https://soundcloud.com/frontend-weekend/fw-80

[8] Новости 512 — Выпуск №30 (19.11 — 25.11): https://soundcloud.com/csssr/news512_030

[9] 10. Skillbox, оптимизация графики, Squoosh и элемент picture: https://www.youtube.com/watch?v=gHLPBlzGRT8

[10] По пути к QUIC: что лежит в основе HTTP/3: https://habr.com/company/Voximplant/blog/430436/

[11] Разрабатываем свой браузер с нуля. Часть первая: HTML: https://habr.com/post/430736/

[12] Web workers vs Service workers vs Worklets: https://bitsofco.de/web-workers-vs-service-workers-vs-worklets/

[13] Зачем и как использовать WebP изображения сегодня: https://bitsofco.de/why-and-how-to-use-webp-images-today/

[14] Исследуем Shadow DOM: https://blog.logrocket.com/discovering-the-shadow-dom-e541d74aefb3

[15] WebSockets — глубокое погружение в концепт: https://www.ably.io/concepts/websockets

[16] Переписываем историю Git и исходники JS для забавы и выгоды: https://blog.isquaredsoftware.com/2018/11/git-js-history-rewriting/

[17] Вы не нуждаетесь в PWA или AMP для того, чтобы делать ваши сайты быстрыми: http://tonsky.me/blog/pwa/

[18] Пять «почему» о производительности загрузки веб-шрифтов: https://www.zachleat.com/web/five-whys/

[19] Второй значимый контент: наихудшая метрика производительности: https://www.filamentgroup.com/lab/second-meaningful-content.html

[20] Быстрая работа Google Fonts с Cloudflare Workers: https://blog.cloudflare.com/fast-google-fonts-with-cloudflare-workers/

[21] JetBrains обновила IDE WebStorm до версии 2018.3: https://tproger.ru/news/webstorm-2018-3/

[22] Demoboard: онлайн-песочница для создания демок на JS и Markdown, которая импортирует любой пакет с npm. Больше не надо заморачиваться с package.json и node_modules: https://frontarm.com/articles/announcing-demoboard/

[23] create-yo: используй любой Yeoman генератор. Не инсталлируй.: https://boneskull.com/create-yo/

[24] Европейский закон о доступности: переговоры между Парламентом и Советом ЕС: https://europeansting.com/2018/11/09/european-accessibility-act-parliament-and-council-negotiators-strike-a-deal/

[25] Доступность мультимедиа: это важно?: https://www.deque.com/blog/multimedia-accessibility-importance/

[26] Готовим идеальный CSS: https://habr.com/company/constanta/blog/428800/

[27] Flexbox. Инфографика по технологии: https://habr.com/post/431014/

[28] Несколько дельных советов по CSS: https://medium.com/webbdev/css-a6748d13aa18

[29] Прогрессивное улучшение | CSS-правило @supports: https://www.youtube.com/watch?v=hJ_OF_TaLzQ

[30] Текущее состояние возможности стилизации скроллбаров: https://css-tricks.com/the-current-state-of-styling-scrollbars/

[31] Разделители внутри <select>: https://codepen.io/tigt/post/separators-inside-the-select-element

[32] CSS Exclusions, как мы надеемся, будут похожи на более продвинутые флоаты, дружественные к гридам: https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/

[33] Очередное объяснение принципов работы CSS Position Absolute: https://marina-ferreira.github.io/tutorials/css/position-absolute/

[34] Эксперименты с CSS writing mode: http://www.tipue.com/blog/css-writing-mode/

[35] И еще раз о порядке свойств в CSS: https://pineco.de/once-more-again-css-property-order/

[36] Мутационный анализ, или как тестировать тесты: https://habr.com/company/oleg-bunin/blog/421141/

[37] 5 jQuery-фич, перешедших в нативный JavaScript: https://www.youtube.com/watch?v=iMtfNFmu7P8

[38] 10 консольных команд для упрощения отладки JavaScript-кода: https://tproger.ru/translations/javascript-debug-tricks/

[39] The State of JavaScript 2018: https://medium.freecodecamp.org/the-state-of-javascript-2018-8322bcc51bd8

[40] Опрос «State of JS» — это фарс: https://ilikekillnerds.com/2018/11/the-state-of-js-survey-is-a-farce/

[41] Экспериментирование с интерфейсами мозг-компьютер в JavaScript: https://medium.com/@devdevcharlie/experimenting-with-brain-computer-interfaces-in-javascript-8d6cb891fda8

[42] Введение в Imba: JavaScript-совместимый язык максимально быстрой работы с DOM: https://medium.freecodecamp.org/introduction-to-imba-the-alternative-to-javascript-e2aa1e3d1769

[43] Dart для программистов на JavaScript : https://medium.com/flutter-community/dart-for-javascript-programmers-24c905aadf6

[44] Добавляем конвеерный оператор (пайплайны) в JavaScript: https://blog.logrocket.com/adding-pipelines-to-javascript-f79ae7311574

[45] 7 отмазок неиспользования TypeScript: https://blog.logrocket.com/7-bad-excuses-for-not-using-typescript-dbf5e603a9a8

[46] htm: Hyperscript Tagged Markup: https://github.com/developit/htm

[47] Понимание мемоизации в JavaScript для повышения производительности: https://blog.bitsrc.io/understanding-memoization-in-javascript-to-improve-performance-2763ab107092

[48] Копирование всякого в JavaScript: как различать поверхностное и глубокое копирование: https://medium.com/@gisderdube1/copying-stuff-in-javascript-how-to-differentiate-between-deep-and-shallow-copies-b6d8c1ef09cd

[49] Idiomatic Redux: история имплементации React-Redux: https://blog.isquaredsoftware.com/2018/11/react-redux-history-implementation/

[50] Как создать Todo List с помощью React Hooks: https://medium.freecodecamp.org/how-to-build-a-todo-list-with-react-hooks-ebaa4e3db3b

[51] 5 способов стилизации компонентов React в 2019: https://blog.bitsrc.io/5-ways-to-style-react-components-in-2019-30f1ccc2b5b

[52] Простое переиспользование код с помощью React Hooks: https://blog.bitsrc.io/simple-code-reuse-with-react-hooks-432f390696bf

[53] Как создать трехслойное приложение на React: https://medium.freecodecamp.org/how-to-create-a-three-layer-application-with-react-8621741baca0

[54] Сквозная функциональность в React с использованием компонентов высокого порядка, Render Props и хуков: https://pawelgrzybek.com/cross-cutting-functionality-in-react-using-higher-order-components-render-props-and-hooks/

[55] E-Commerce для разработчиков на React [w/ Gatsby Tutorial]: https://snipcart.com/blog/react-ecommerce-gatsby-tutorial

[56] Состояние React (по мотивам State of JavaScript Survey 2018): https://www.telerik.com/blogs/a-react-state-of-mind-state-of-javascript-survey-2018

[57] JSX — это синтаксический сахар: https://fettblog.eu/jsx-syntactic-sugar/

[58] React Podcast 29: Don't Rewrite Your App for Hooks and Suspense with Jared Palmer: https://reactpodcast.com/29

[59] Vue для jQuery разработчиков: https://www.telerik.com/blogs/vue-for-jquery-developers

[60] Как создать SPA c помощью Vue.js, Vuex, Vuetify и Firebase: https://medium.freecodecamp.org/how-to-build-a-single-page-application-using-vue-js-vuex-vuetify-and-firebase-838b40721a07

[61] Создание интерактивной инфографики с Vue.js: https://www.smashingmagazine.com/2018/11/interactive-infographic-vue-js/

[62] Типизация Vuex без TypeScript: https://itnext.io/type-vuex-without-typescript-4f183b83a907

[63] Интерактивная колода карт с возможностью свайпа на Vue.js и interact.js: https://css-tricks.com/swipeable-card-stack-using-vue-js-and-interact-js/

[64] Создание интерактивных списков с новым инструментом Angular 7 Drag and Drop: https://blog.angularindepth.com/building-interactive-lists-with-the-new-angular-7-drag-and-drop-tool-5f2402f8cb27

[65] Awesome Angular GraphQL: https://github.com/hasura/awesome-angular-graphql

[66] Обработка ошибок с Angular 6 — советы и лучшие практики: https://scotch.io/bar-talk/error-handling-with-angular-6-tips-and-best-practices192

[67] The State of JavaScript Survey 2018 в контексте Angular: https://www.telerik.com/blogs/the-state-of-js-survey-2018-the-angular-scoop

[68] Создание шаблонов с возможностью поиска в Angular: https://netbasal.com/creating-searchable-templates-in-angular-20ba70ce4e21

[69] autoComplete.js : https://github.com/TarekRaafat/autoComplete.js

[70] Создание музыки с magenta.js: https://hello-magenta.glitch.me/

[71] cms.js: генератор сайта на клиенте: https://github.com/chrisdiana/cms.js

[72] Как работать с матрицой в SVG фильтрах: https://css-irl.info/into-the-matrix-with-svg-filters/

[73] Эффект огня в рамках #codevember: https://codepen.io/shubniggurath/pen/XPNrbB

[74] Эффект морфинга при смене штатов US: https://codepen.io/quinlo/full/mQqyKY

[75] Интерактивная страница orano.group с клевой комбинацией эффектов и функциональности: https://www.orano.group/experience/innovation/fr

[76] Брутальные вебсайты: http://brutalistwebsites.com/

[77] В Firefox 65 будет переработан интерфейс настройки блокировки контента: https://www.opennet.ru/opennews/art.shtml?num=49646

[78] Представлена атака на браузеры, позволяющая определить сайт в другой вкладке: http://www.opennet.ru/opennews/art.shtml?num=49645

[79] Microsoft и Google разрабатывают версию браузера Chrome для ОС Windows on ARM: https://itc.ua/news/microsoft-i-google-razrabatyivayut-versiyu-brauzera-chrome-dlya-os-windows-on-arm/

[80] Человеческая цена Черной пятницы : https://habr.com/company/pochtoy/blog/430832/

[81] Машинное обучение в Google: Что нового?: https://itc.ua/articles/mashinnoe-obuchenie-v-google-chto-novogo/

[82] На сайты c WordPress идёт атака, использующая уязвимость плагина AMP for WP: https://tproger.ru/news/xss-attack-amp-for-wp/

[83] WWW: JPEG Archive — набор утилит для оптимального сжатия фотографий: https://xakep.ru/2018/11/23/www-jpeg-archive/

[84] Компания Mozilla представила систему синтеза речи LPCNet: http://www.opennet.ru/opennews/art.shtml?num=49639

[85] «Бендгейт 2»: Новый планшет Apple iPad Pro достаточно легко деформируется – даже за несколько дней типичного использования: https://itc.ua/news/bendgeyt-2-novyiy-planshet-apple-ipad-pro-dostatochno-legko-deformiruetsya-dazhe-za-neskolko-dney-tipichnogo-ispolzovaniya/

[86] Как повысить продуктивность — советы от 9 CEO: https://ain.ua/2018/11/25/9-sovetov-po-produktivnosti/

[87] dersmoll: https://habr.com/users/dersmoll/

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

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

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