Дайджест свежих материалов из мира фронтенда за последнюю неделю №265 (29 мая — 4 июня 2017)

---

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

[6] Обзор изменений в новом мажорном релизе Node 8: https://habrahabr.ru/post/329942/-izmeneniy-v-novom-mazhornom-relize

[7] npm@5 теперь npm@latest: https://medium.com/devschacht/npm-5-is-now-npm-latest-9ef037c9f5f5

[8] FW #5 — Секреты успешных докладов для frontend-конференций: https://soundcloud.com/frontend-weekend/fw-5

[9] Кастомные свойства — HTML Шорты: https://www.youtube.com/watch?v=Ag98mgI4bXA

[10] Асинхронный веб, или что такое веб-сокеты: https://tproger.ru/translations/what-are-web-sockets/

[11] Browserslist — это хорошая идея: https://css-tricks.com/browserlist-good-idea/

[12] Webpack vs Gulp: https://dev.to/buddyworks/webpack-vs-gulp

[13] Как я могу сделать сделать доступной свою иконочную систему?: https://css-tricks.com/can-make-icon-system-accessible/

[14] Как улучшать проекты с устаревшим кодом: https://jacquesmattheij.com/improving-a-legacy-codebase

[15] Песочница для GraphQL: https://altair-gql.herokuapp.com/

[16] WebAssembly: Mozilla победила: http://robert.ocallahan.org/2017/06/webassembly-mozilla-won.html

[17] Более быстрая загрузка страницы с помощью легкой анимации CSS и SVG (без JavaScript): https://raygun.com/blog/css-and-svg-animation/

[18] Приключения новичка в веб-производительности: https://medium.com/@GroundedSage/adventures-of-a-beginner-in-web-performance-d7ddf41aa5f4

[19] Проверка производительности CSS анимации с помощью браузерных инструментов для разработчика: https://www.sitepoint.com/check-css-animation-performance-with-the-browsers-dev-tools/

[20] Ловля мусора: как мы обнаружили самые медленные части UI: https://fulcrum.lever.co/monitoring-jank-how-we-found-the-slowest-parts-of-our-ui-b6ffd7386896

[21] Использование метрик производительности, которые наиболее влияют на UX: https://developers.google.com/web/updates/2017/06/user-centric-performance-metrics

[22] Чеклист производительности фронтенда для продакшена: https://medium.com/@yjose/front-end-performance-check-list-for-production-4e930cb63e8a

[23] HTTP/2 push более сложный, чем я думал: https://jakearchibald.com/2017/h2-push-tougher-than-i-thought/

[24] 11 вещей которые я узнал, читая спецификацию flexbox: https://habrahabr.ru/post/329820/

[25] CSS в JavaScript: будущее компонентных стилей: https://habrahabr.ru/company/mailru/blog/329710/

[26] Изучаем CSS-гриды: http://css-live.ru/articles/izuchaem-css-gridy.html

[27] Learning CSS Grids: http://varun.ca/css-grid/

[28] CSS Media Queries Level 4: https://www.youtube.com/watch?v=DI6qH3DfIAY&feature=youtu.be

[29] Создание руководства по стилю прямо из кода Sass: https://css-tricks.com/build-style-guide-straight-sass/

[30] Обречен ли CSS всегда быть отстойным?: https://medium.com/carwow-product-engineering/is-css-condemned-to-suck-forever-64aeee146d36

[31] Любовное письмо к CSS: http://developer.telerik.com/topics/web-development/love-letter-css/

[32] CSS-фильтры для регулировки яркости, контрастности, непрозрачности и инверсии: http://vanseodesign.com/css/filters-to-adjust-brightness-contrast-opacity-and-inversion/

[33] Отчет в цифрах: полтора года с атомарным CSS: https://medium.com/@johnpolacek/by-the-numbers-a-year-and-half-with-atomic-css-39d75b1263b4

[34] Новая отзывчивость в вебе — единицы вьюпорта: https://medium.com/@ashdurham/the-new-responsive-viewport-units-8cb8ed8b7725

[35] Подробно о нюансах создания кастомных чекбоксов и радиокнопок: http://adrianroselli.com/2017/05/under-engineered-custom-radio-buttons-and-checkboxen.html

[36] Искусство анимации единственного Div на странице: https://css-tricks.com/animating-single-div-art/

[37] < css-doodle /> — веб-компонент для рисования шаблонов с помощью css. : http://yuanchuan.name/css-doodle/

[38] Объяснение техники разрыва колонки широким блоком с помощью CSS Grid: https://rachelandrew.co.uk/archives/2017/06/01/breaking-out-with-css-grid-explained/

[39] scssfmt — быстрый и простой форматор SCSS кода: http://scssfmt.com/

[40] Трендовые тени на CSS : https://www.mixfont.com/shadows

[41] ctr — очередной CSS Framework: https://ctr-lang.com/

[42] Подборка палитр для эффектной анимации градиентов: http://gradientbuttons.colorion.co/

[43] Must see: видеозаписи митапа MoscowJS 37: https://habrahabr.ru/company/avito/blog/329898/

[44] Переосмысливая JavaScript: break и функциональный подход: https://habrahabr.ru/post/330082/

[45] Справочник современных концепций JavaScript: часть 2: https://medium.com/devschacht/%D1%81%D0%BF%D1%80%D0%B0%D0%B2%D0%BE%D1%87%D0%BD%D0%B8%D0%BA-%D1%81%D0%BE%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%BD%D1%8B%D1%85-%D0%BA%D0%BE%D0%BD%D1%86%D0%B5%D0%BF%D1%86%D0%B8%D0%B9-javascript-%D1%87%D0%B0%D1%81%D1%82%D1%8C-2-8ecf07f3f36a

[46] Итоги дискуссии по поводу выбора нового JavaScript фреймворка для WordPress: http://oddstyle.ru/wordpress-2/novosti-wordpress/itogi-diskussii-po-povodu-vybora-novogo-javascript-frejmvorka-dlya-wordpress.html

[47] Что означет Google AMP для JavaScript сообщества: https://molily.de/amp/

[48] Управление состоянием в CSS с помощью переиспользуемых функций JavaScript — часть 2: https://css-tricks.com/managing-state-css-reusable-javascript-functions-part-2/

[49] Реактивный UI с помощью VanillaJS – часть 1: чистый функциональный стиль: https://css-tricks.com/reactive-uis-vanillajs-part-1-pure-functional-style/

[50] Введение в наиболее часто используемые функции ES6: https://zellwk.com/blog/es6/

[51] Как отслеживать изменения в DOM с помощью Mutation Observer: https://hashnode.com/post/how-to-track-changes-in-the-dom-using-mutation-observer-cj3gck03s0091jhk9yajr4v9t

[52] Почему JavaScript?: https://medium.com/code-chrysalis/why-javascript-438871a87329

[53] Cоздание простого Twitter бота с Node.js всего в 38 строк кода: https://hackernoon.com/build-a-simple-twitter-bot-with-node-js-in-just-38-lines-of-code-ed92db9eb078

[54] #20 — MobX вместо Redux?: http://5minreact.ru/20-mobx-over-redux/

[55] Повышение производительности React и Redux с Reselect: https://medium.com/devschacht/neil-fenton-improving-react-and-redux-performance-with-reselect-40f1d3efba89

[56] часть 1: https://medium.com/@_alanbsmith/building-a-react-component-library-part-1-d8a1e248fe6c

[57] часть 2: https://medium.com/@_alanbsmith/building-a-react-component-library-part-2-46fd4f77bb5c

[58] Airbnb перешел на React для создания более отзывчивого фронтенда: https://thenewstack.io/airbnb-rides-rails-new-stack/

[59] Зачем использовать React JS для создания быстрых интерактивных UI?: https://www.sitepoint.com/react-fast-interactive-user-interfaces/

[60] Получаем лучшую React-цию с помощью прогрессивных веб приложений: http://cloudinary.com/blog/getting_a_better_react_ion_with_progressive_web_apps

[61] Оптимизация рендеринга в React (часть 1): https://flexport.engineering/optimizing-react-rendering-part-1-9634469dca02

[62] React как платформа: путь к кросс-платформенному UI — Leland Richardson: https://www.youtube.com/watch?v=hNwQPJy-XZY

[63] Динамический Angular или манипулируй правильно: https://habrahabr.ru/company/infowatch/blog/330030/

[64] Вот что вы должны знать о динамических компонентах в Angular: https://hackernoon.com/here-is-what-you-need-to-know-about-dynamic-components-in-angular-ac1e96167f9e

[65] React vs Angular vs Vue в примерах: https://coursetro.com/courses/14/React-vs-Angular-vs-Vue-by-Example

[66] Какие плюсы и минусы AngularJS и ReactJS?: https://erminesoft.com/what-are-the-pros-and-cons-of-angularjs-vs-reactjs/

[67] Начианем современную разработку фронтенда с Vue.js: https://medium.com/@alanmorel/getting-started-with-modern-front-end-development-with-vue-js-1cc7b120a0e3

[68] Прототипирование Filter UX в Instagram с помощью Vue: https://mattrothenberg.github.io/prototyping-playbook/instagram-prototype

[69] Использование фильтров в Vue.js: https://css-tricks.com/using-filters-vue-js/

[70] vue-recyclerview: https://github.com/hilongjw/vue-recyclerview

[71] Клевая скролл-анимация с помощью библиотеки AOS: https://www.sitepoint.com/cool-scroll-animations-made-easy-aos-library/

[72] t-scroll: http://t-scroll.com/index.html

[73] Timeline.js: https://ilkeryilmaz.github.io/timelinejs/

[74] AmplitudeJS: https://521dimensions.com/open-source/amplitudejs

[75] o : https://greenhouse.gardenhq.io/o/

[76] taxi-rank: https://github.com/ForbesLindesay/taxi-rank

[77] picodom: https://github.com/picodom/picodom

[78] Chrome победил: https://habrahabr.ru/post/329780/

[79] Google представил план интеграции блокировщика рекламы в Chrome: http://www.opennet.ru/opennews/art.shtml?num=46641

[80] Браузер на основе блокчейна Brave провел ICO и привлёк $35 млн за 30 секунд: https://vc.ru/n/brave-ico

[81] FF Developer Edition 54: новые функции инспектора и отладчика, помощь MDN в netmonitor и многое другое: https://hacks.mozilla.org/2017/03/developer-edition-54-new-inspector-and-debugger-features/

[82] Chrome 59 — что нового в DevTools: https://www.youtube.com/watch?v=4mx1m7UbBR0

[83] Технические детали Safari Technology Preview 31: https://webkit.org/blog/7622/release-notes-for-safari-technology-preview-31/

[84] Microsoft кардинально обновила дизайн Skype. И теперь там есть «Истории»: http://itc.ua/news/microsoft-kardinalno-obnovila-dizayn-skype/

[85] Датский стартап научил нейросеть верстать интерфейсы сайтов и приложений по макету: https://vc.ru/n/pix2code-interface

[86] Google выпустила сервис для визуализации данных через GIF-изображения: https://tproger.ru/news/google-launches-data-gif-maker/

[87] Google вносит в чёрный список сайты, передающие пароли по HTTP: https://tproger.ru/news/google-blacklisted-http/

[88] Баг в Chrome позволяет сайтам записывать аудио и видео незаметно для пользователя: https://tproger.ru/news/chrome-bug-record-audio-and-video/

[89] В Google появился персональный поиск: https://lifehacker.ru/2017/05/29/google-search-personal/

[90] AlphaGo разгромила лучшего игрока-человека в го со счетом 3-0 и покинула спорт: https://ain.ua/2017/05/29/alpha-go-razgromila-ke-jie

[91] Facebook, Google и ещё 29 ИТ-гигантов выступили против интернет-шпионажа: http://www.cossa.ru/news/162769/

[92] Создатель Android Энди Рубин представил свой первый смартфон и конкурента Google Home: https://vc.ru/n/rubin-phone

[93] Microsoft создает новую оболочку для мобильных устройств: http://gagadget.com/announce/27190-microsoft-sozdaet-novuyu-obolochku-dlya-mobilnyih-ustrojstv/

[94] IoT-устройства компрометируют своих владельцев, даже если трафик зашифрован: https://xakep.ru/2017/05/30/iot-traffic/

[95] «Умный, но не заносчивый» — как выбирали имена системам искусственного интеллекта: https://vc.ru/p/ai-names

[96] Интернет-тренды на 2017 год: резкий взлёт киберспорта, визуальная реклама и онлайн-медицина: https://vc.ru/p/kpcb-2017

[97] Почему обученные на GTA нейросети нельзя применять в реальных задачах: https://vc.ru/p/cognitive-tech-ai-data

[98] Как на гифках построить бизнес с оценкой в $600 млн — история сервиса Giphy: https://ain.ua/2017/06/02/kak-postroit-biznes-na-gifkax-istoriya-servisa-giphy

[99] Ученые: в социальных сетях люди воспринимают информацию в разы менее критично: http://itc.ua/blogs/uchenyie-v-sotsialnyih-setyah-lyudi-vosprinimayut-informatsiyu-v-razyi-menee-kritichno/

[100] Сайт, который рассчитывает вероятность того, что ваша работа достанется роботу: https://lifehacker.ru/2017/05/30/will-robots-take-my-job/

[101] Компьютеры исчезнут физически. Но будут вокруг нас — прощальная колонка Уолта Моссберга: https://ain.ua/2017/05/30/kolonka-uolta-mossberga

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

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

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

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

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