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

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #45 – Евгений Фомин про Vue.js и о том, почему разработчики уходят из backend’а во frontend: https://soundcloud.com/frontend-weekend/fw-45

[8] #19 — TypeScript 20/80: https://soundcloud.com/5minreact_audio/019-typescript-20-80

[9] Ночной фронтенд #27 — И снова о статической типизации в JS: https://medium.com/devschacht/nightly-27-318180d0d4c9

[10] «Как уйти из IT»: https://soundcloud.com/frontend_u/leave

[11] «ASCII анимация»: https://www.youtube.com/watch?v=1TDAgF_S7ys

[12] MinskCSS Meetup #4 — 22 марта 2018: https://www.youtube.com/playlist?list=PL3uk4LxG9ZzlgHUiRTgUV4ZabsuAIhqSP

[13] Размер страницы и SEO – есть ли связь?: https://www.machmetrics.com/speed-blog/page-size-seo-related/

[14] Агрегатор материалов и последней информации по Progressive Web Apps: https://pwa.topicdeck.com/

[15] Полное руководство по фоновым изображениям в шаблонах писем: https://litmus.com/blog/the-ultimate-guide-to-background-images-in-email

[16] WAI-ARIA: темная сторона доступности: https://diginclusion.com/blog/wai-aria-dark-art-of-accessibility/

[17] Как сократить время загрузки сайта до двух секунд средствами Google Chrome: https://tproger.ru/translations/chrome-devtools-load-time-optimization/

[18] Насколько быстым является Amp на самом деле?: https://timkadlec.com/remembers/2018-03-19-how-fast-is-amp-really/

[19] Как формат WebP поможет повысить вам веб-производительность: https://www.noupe.com/design/webp-increases-web-performance.html

[20] Уменьшение бандлов Lodash с помощью Webpack и Babel: https://nolanlawson.com/2018/03/20/smaller-lodash-bundles-with-webpack-and-babel/

[21] imaging-heap: https://github.com/filamentgroup/imaging-heap

[22] В статьях на MDN добавили наглядные интерактивные примеры : https://hacks.mozilla.org/2018/03/bringing-interactive-examples-to-mdn/

[23] Полезные советы и трюки для Chrome DevTools: https://medium.freecodecamp.org/cool-chrome-devtools-tips-and-tricks-you-wish-you-knew-already-f54f65df88d2

[24] Аддитивная анимация с помощью Web Animations API: http://css-live.ru/articles/additivnaya-animaciya-s-pomoshhyu-web-animations-api.html

[25] Создание PathSlider — карусели с SVG элементами с помощью with JavaScript (часть 2): https://scotch.io/tutorials/animating-more-elements-along-svg-paths-with-javascript-part-2909

[26] Создаем эффект жидкости с помощью WebGL: https://www.creativebloq.com/how-to/create-liquid-effects-with-webgl

[27] Вы начнете верстать на Grid Layout уже сегодня. Спорим?: https://medium.com/@lucyhackwrench/%D0%B2%D1%8B-%D0%BD%D0%B0%D1%87%D0%BD%D0%B5%D1%82%D0%B5-%D0%B2%D0%B5%D1%80%D1%81%D1%82%D0%B0%D1%82%D1%8C-%D0%BD%D0%B0-grid-layout-%D1%83%D0%B6%D0%B5-%D1%81%D0%B5%D0%B3%D0%BE%D0%B4%D0%BD%D1%8F-%D1%81%D0%BF%D0%BE%D1%80%D0%B8%D0%BC-ebef540f733b

[28] Как Gmail пришел к прекращению поддержки CSS анимации: https://emails.hteumeuleu.com/how-gmail-came-to-stop-supporting-css-animations-4e6fd81f1b75

[29] Super Mario World, созданный с помощью одних CSS градиентов — без JS, встроенных images/data URIs и внешних изображений (плюс совсем немного размерки HTML): https://medium.com/@alcidesqueiroz/super-mario-world-in-css-100-css-no-javascript-no-embedded-images-data-uris-no-external-e43dc0c2b1f4

[30] graphql-css: https://github.com/braposo/graphql-css

[31] CSS: плохие моменты (и как их избегать): https://www.joeforshaw.com/blog/css-the-bad-bits-and-how-to-avoid-them

[32] Отладка Front-end: Console: http://jem-space.ru/otladka-front-end-console/

[33] Гребаное разглагольствование о гребаном const vs гребаном let: https://jamie.build/const

[34] Нейронные сети с графическим ускорением в JavaScript: https://towardsdatascience.com/gpu-accelerated-neural-networks-in-javascript-195d6f8e69ef

[35] Определение эмоций в JavaScript с помощью нейронных сетей: https://medium.com/epk-cloud-engineering/emotion-detection-with-javascript-neural-networks-5a408f84eb75

[36] Machine Learning-Driven Bundling. Будущее инструментарция JavaScript: http://blog.mgechev.com/2018/03/18/machine-learning-data-driven-bundling-webpack-javascript-markov-chain-angular-react/

[37] 5 ключевых концептов изучения d3.js и как и понять: https://davidwalsh.name/learning-d3

[38] Я определенно, возможно, страдаю от стокгольмского синдрома, связанного с Javascript.: https://medium.com/@s_27669/i-am-definitely-maybe-suffering-from-javascript-related-stockholm-syndrome-47ef4aecbb1a

[39] Полное руководство по Apollo, инструментарии для GraphQL: https://medium.freecodecamp.org/a-complete-introduction-to-apollo-the-graphql-toolkit-83acab4b8143

[40] Ленивая загрузка модулей JavaScript с помощью ConditionerJS: https://www.smashingmagazine.com/2018/03/lazy-loading-with-conditioner-js/

[41] Как работает JS: движки рендеринга веб-страниц и советы по оптимизации их производительности: https://habrahabr.ru/company/ruvds/blog/351802/

[42] История ES6-модулей: https://habrahabr.ru/company/netologyru/blog/351704/

[43] Элегантные паттерны современного JavaScript: Ice Factory: https://habrahabr.ru/company/ruvds/blog/351800/#

[44] Асинхронные паттерны в JavaScript: https://blog.bloomca.me/2018/03/24/async-patterns-js.html

[45] Vue.js Moscow Meetup #1: https://www.youtube.com/watch?v=h9NQs0SEVoA&feature=youtu.be

[46] Vue.js Cookbook: https://vuejs.org/v2/cookbook/

[47] 4 основые функции ES2015 для разработки с Vue.js: https://medium.com/js-dojo/4-essential-es2015-features-for-vue-js-development-e3a526046c7c

[48] Vue CLI 3: переломный момент для разработки фронтенда: https://vuejsdevelopers.com/2018/03/26/vue-cli-3/

[49] Основы GraphQL и практические примеры с Vue: https://medium.com/@lachlanmiller_52885/graphql-basics-and-practical-examples-with-vue-6b649b9685e0

[50] 7 секретных паттернов Vue, о которых консультанты не хотят, чтобы вы знали: https://www.youtube.com/watch?v=7lpemgMhi0k

[51] Сравнение основных JS библиотек анимации для использования в приложениях React: https://blog.logrocket.com/comparing-the-top-js-animation-libraries-for-use-in-react-apps-e3ba5ccad68d

[52] Добавляем контекст с помощью React: https://css-tricks.com/putting-things-in-context-with-react/

[53] Состояние форм React с нуля: https://css-tricks.com/react-state-from-the-ground-up/

[54] react-testing-library: https://github.com/kentcdodds/react-testing-library

[55] Архитектура приложения Angular. Используем NgModules: https://habrahabr.ru/post/351678/

[56] Введение в модули Angular — корневой модуль (Root Module): https://habrahabr.ru/post/351504/

[57] Введение в Angular: что это и зачем вам нужно его использовать: https://www.sitepoint.com/angular-introduction/

[58] All Things Angular:: https://www.telerik.com/blogs/all-things-angular

[59] ScrollBooster: https://ilyashubin.github.io/scrollbooster/

[60] План развития функциональности Firefox на 2018 год: http://www.opennet.ru/opennews/art.shtml?num=48312

[61] Доступен web-браузер Opera 52: http://www.opennet.ru/opennews/art.shtml?num=48317

[62] Chrome 66 Beta: CSS Typed Object Model, Async Clipboard API, AudioWorklet: https://blog.chromium.org/2018/03/chrome-66-beta-css-typed-object-model.html

[63] В Chrome 66 будет доработан механизм блокирования автоматического воспроизведения видео: https://itc.ua/news/v-chrome-66-budet-dorabotan-mehanizm-blokirovaniya-avtomaticheskogo-vosproizvedeniya-video/

[64] Технические детали релиза Safari Technology Preview 52: https://webkit.org/blog/8165/release-notes-for-safari-technology-preview-52/

[65] Как попасть в Google: инструкция по подготовке: https://dou.ua/lenta/articles/google-interview/

[66] Symantec: В четвертом квартале 2017 года количество кибератак, использующих ресурсы систем для майнинга криптовалют, увеличилось в 85 раз: https://itc.ua/news/symantec-v-chetvertom-kvartale-2017-goda-kolichestvo-kiberatak-ispolzuyushhih-resursyi-sistem-dlya-mayninga-kriptovalyut-uvelichilos-v-85-raz/

[67] Google Assistant научился совершать и запрашивать денежные переводы: https://tproger.ru/news/google-assistant-money-transfer/

[68] Netflix разработал собственный шрифт: https://vc.ru/35073-netflix-razrabotal-sobstvennyy-shrift

[69] В публичных репозиториях пользователей GitHub обнаружено 4 миллиона уязвимостей: https://tproger.ru/news/github-vulnerabilities/

[70] «Доверие нарушено, мы должны это исправить». Цукерберг прокомментировал утечку данных 50 млн пользователей и рассказал о новых защитных мерах: https://itc.ua/news/doverie-narusheno-i-myi-dolzhnyi-eto-ispravit-tsukerberg-prokomentiroval-skandale-s-cambridge-analytica/

[71] ОK Googlе: как поисковик решил победить Amazon: https://thebell.io/ok-google-kak-poiskovik-reshil-pobedit-amazon/

[72] Дайджест за прошлую неделю: https://habrahabr.ru/company/zfort/blog/351438/

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

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

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

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