- PVSM.RU - https://www.pvsm.ru -

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

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

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

    Медиа [1]    |    Веб-разработка [2]    |    CSS [3]    |    Javascript [4]    |    Браузеры [5]    |    Занимательное [6]


Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 2 Медиа

podcast en Подкаст «Пятиминутка React» #35: FrontFest 2017 [7]
podcast en Подкаст «Веб-стандарты», Episode #85: Ага Наплоха, Гарри Робертс, Ева Леттнер, Зак Лезерман и Хьюго Жирадель в специальном выпуске «Веб-стандартов» [8]
podcast Подкаст «Drinkcast», Выпуск #8: «Что такое FrontOps» [9]
video «ALL YOUR HTML» #14: «Анимируем графики на SVG и Canvas, + perlin noise» [10]
video HTML Шорты: Математика для программиста [11], плюс текстовая версия [12]
video habr Доклады с Frontend Mix: оптимизация загрузки сайтов и дизайн-система на БЭМ и React [13]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 12 Веб-разработка

Ошибки и спорные вопросы в HTML-CSS вёрстке [14]
Еженедельная подборка красивых эффектов на CSS/SVG/JS #53 [15]
en Как убрать белые полосы в Safari на iPhone X (background-color, viewport-fit, safe-area-inset-*) [16]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 20 CSS

Доступ к CSS-переменным и их изменение с помощью Javascript [26]
Заблокированные кнопки — отстой [27]
en CSS-in-JS — это как заменить сломаную отвертку вашим любимым молотком [28]
en Полное руководство по Flexbox  — изучение по примерам [29]
en Новое руководство по поддержке CSS в письмах от campaignmonitor [30]
en video Видео о создании CSS Grid [31]. Посмотрите, как CSS Grid Layout прошел путь от идеи до реального распространения во всех основных браузерах в 2017
en Удаление неиспользуемых правил CSS [32]
en Devices.css [33] — подборка современных устройств, воссозданных на «чистом CSS»

Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 28 JavaScript

Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит [34]
en Babel: изменения, запланированные для версии 7.0 [35]
en О том, как можно уменьшить влияние третьесторонних JS скриптов на производительность всего сайта [36]
en Как работает JavaScript: управление памятью + как бороться с четырьмя распространёнными утечками памяти [37]
en Готовы ли поисковые остальные движки, кроме Google, к краулингу и индексированию JavaScript? [38]
en Что я люблю и ненавижу во Flow [39]
en Есть ли смысл в людях, которые не могут писать JavaScript? [40]

  • Libs & Plugins:
    en Github p-progress [62] — создание промиса, который сообщает о прогрессе.
    en Github punchcard [63] — jquery плагин для создания графиков в стиле GitHub перфокарт
    en Github classwrap [64] — js утилита для конкатенации имен CSS классов по заданным условиям
    en Github ellipsed [65] — JS библиотека для добавления троеточия в многострочных текстах

Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 67 Браузеры

Chrome В Chrome 64 будет прекращено автоматическое воспроизведение видео со звуком [66], а FTP будет помечаться, как небезопасный протокол [67]
Firefox en Проект Mozilla представил дополнение с реализацией контекстных контейнеров для Firefox [68]
Firefox en В Firefox 57 будет обновлён внешний вид средств для разработчиков [69]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №280 (11 — 17 сентября 2017) - 73 Занимательное

iPhone X, iPhone 8 и 8 Plus, Apple Watch Series 3 и Apple TV 4K [70]
Российские дизайнеры и разработчики об iPhone X, iPhone 8 и других анонсах презентации Apple [71]
W3C разработал API для криптовалютных платежей в браузерах [72]
Нейросеть дня: 3D-маска лица на основе фотографии [73]
Выпуск Vagrant 2.0, инструментария для создания виртуальных окружений [74]
Сеть казино скомпрометировали через «умный» аквариум [75]
Компания Oracle выбрала Eclipse Foundation для передачи разработки Java EE [76]
Человеческий мозг планируют подключить к «интернету вещей» [77]
Почему Кремниевую долину критикуют все чаще, и что с этим делать [78]



Просим прощения за возможные опечатки или неработающие/дублирующиеся ссылки. Если вы заметили проблему — напишите пожалуйста в личку, мы стараемся оперативно их исправлять.

Дайджест за прошлую неделю [79].
Материал подготовили dersmoll [80] и alekskorovin [81].

Автор: alexzfort

Источник [82]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #35: FrontFest 2017: http://5minreact.ru/35-frontfest2017/

[8] Episode #85: Ага Наплоха, Гарри Робертс, Ева Леттнер, Зак Лезерман и Хьюго Жирадель в специальном выпуске «Веб-стандартов»: https://soundcloud.com/web-standards/episode-85

[9] Выпуск #8: «Что такое FrontOps»: http://spb-frontend.ru/podcast/8

[10] «Анимируем графики на SVG и Canvas, + perlin noise»: https://www.youtube.com/watch?v=M7NGYXMp4JM

[11] Математика для программиста: https://www.youtube.com/watch?v=se4JOFOR9tw

[12] текстовая версия: https://habrahabr.ru/company/htmlacademy/blog/337952/

[13] Доклады с Frontend Mix: оптимизация загрузки сайтов и дизайн-система на БЭМ и React: https://habrahabr.ru/company/yamoney/blog/337924/

[14] Ошибки и спорные вопросы в HTML-CSS вёрстке: http://nicothin.pro/page/oshibki-i-spornye-voprosy-v-html-css-vjorstke

[15] Еженедельная подборка красивых эффектов на CSS/SVG/JS #53: http://css-live.ru/cssjssvg-s-podvypodvertom/ezhenedelnaya-podborka-krasivyx-effektov-nacsssvgjs-53.html

[16] Как убрать белые полосы в Safari на iPhone X (background-color, viewport-fit, safe-area-inset-*) : http://stephenradford.me/removing-the-white-bars-in-safari-on-iphone-x/

[17] Как ускорить загрузку сайта: https://habrahabr.ru/company/netologyru/blog/337842/

[18] Заметка на hacks.mozilla.org о быстром построении DOMа — рискованный парсинг, async, defer и preload: https://hacks.mozilla.org/2017/09/building-the-dom-faster-speculative-parsing-async-defer-and-preload/

[19] Addy Osmani о том, как на Treebo радикально повысили скорость работы мобильной версии сайта (React/Preact PWA): https://medium.com/dev-channel/treebo-a-react-and-preact-progressive-web-app-performance-case-study-5e4f450d5299

[20] О-о-очень долгожданный релиз Sublime Text 3.0: https://habrahabr.ru/post/337882/

[21] Текстовый редактор Atom стал средой разработки: https://tproger.ru/news/atom-ide/

[22] Прототипирование возможностей DevTools в будущих версиях браузеров: https://medium.freecodecamp.org/prototyping-the-future-of-devtools-f54ba4d51891

[23] WordPress отказывается от React, Gutenberg будет переписан на основе другой библиотеки: http://oddstyle.ru/wordpress-2/novosti-wordpress/wordpress-otkazyvaetsya-ot-react-gutenberg-budet-perepisan-na-osnove-drugoj-biblioteki.html

[24] Gutenberg предлагает новый подход к TinyMCE в WordPress 5.0: http://oddstyle.ru/wordpress-2/novosti-wordpress/gutenberg-predlagaet-novyj-podxod-k-tinymce-v-wordpress-5-0.html

[25] Gutenberg 1.1.0: новые возможности редактора: http://oddstyle.ru/wordpress-2/novosti-wordpress/gutenberg-1-1-0-novye-vozmozhnosti-redaktora.html

[26] Доступ к CSS-переменным и их изменение с помощью Javascript: http://css-live.ru/articles/dostup-k-css-peremennym-i-ix-izmenenie-spomoshhyu-javascript.html

[27] Заблокированные кнопки — отстой: http://css-live.ru/articles/zablokirovannye-knopki-otstoj.html

[28] CSS-in-JS — это как заменить сломаную отвертку вашим любимым молотком: https://zendev.com/2017/09/11/css-in-js.html

[29] Полное руководство по Flexbox  — изучение по примерам: https://medium.freecodecamp.org/the-ultimate-guide-to-flexbox-learning-through-examples-8c90248d4676

[30] Новое руководство по поддержке CSS в письмах от campaignmonitor: https://www.campaignmonitor.com/blog/email-marketing/2017/09/all-new-guide-css-support-email/

[31] Видео о создании CSS Grid: https://www.youtube.com/watch?v=J9uaT9dggZE&feature=youtu.be

[32] Удаление неиспользуемых правил CSS: https://falkus.co/2017/09/remove-unused-css-rules/

[33] Devices.css: https://picturepan2.github.io/devices.css/

[34] Почему Facebook SDK занимает около 16% JavaScript-кода на сайтах и что это значит: https://tproger.ru/translations/facebook-16-percent/

[35] Babel: изменения, запланированные для версии 7.0: https://babeljs.io/blog/2017/09/12/planning-for-7.0

[36] О том, как можно уменьшить влияние третьесторонних JS скриптов на производительность всего сайта: https://www.twnsnd.com/posts/performant_third_party_scripts.html

[37] Как работает JavaScript: управление памятью + как бороться с четырьмя распространёнными утечками памяти: https://blog.sessionstack.com/how-javascript-works-memory-management-how-to-handle-4-common-memory-leaks-3f28b94cfbec

[38] Готовы ли поисковые остальные движки, кроме Google, к краулингу и индексированию JavaScript?: https://moz.com/blog/search-engines-ready-for-javascript-crawling

[39] Что я люблю и ненавижу во Flow: https://medium.com/@halistechnology/what-i-love-and-hate-about-flow-704835ad087f

[40] Есть ли смысл в людях, которые не могут писать JavaScript?: https://medium.com/@mandy.michael/is-there-any-value-in-people-who-cannot-write-javascript-d0a66b16de06

[41] Применение ES2015+ кода на продакшене уже сегодня: https://philipwalton.com/articles/deploying-es2015-code-in-production-today/

[42] Async/Await сделают ваш код проще: https://blog.patricktriest.com/what-is-async-await-why-should-you-care/

[43] Асинхронная рекурсия с помощью Callbacks, Promises и Async.: http://blog.scottlogic.com/2017/09/14/asynchronous-recursion.html

[44] Простое объяснение монад в JavaScript: https://medium.com/javascript-scene/javascript-monads-made-simple-7856be57bfe8

[45] HTML шаблоны, реализованные с помощью JavaScript Template Literals: https://css-tricks.com/html-templates-via-javascript-template-literals/

[46] JavaScript: загадочное дело выражения null >= 0: https://habrahabr.ru/company/ruvds/blog/337732/

[47] Думать как JavaScript: https://medium.com/@vlad_poe/%D0%B4%D1%83%D0%BC%D0%B0%D1%82%D1%8C-%D0%BA%D0%B0%D0%BA-javascript-2b012ae081f9

[48] JavaScript: методы асинхронного программирования: https://habrahabr.ru/company/ruvds/blog/337662/

[49] Почему “throttling” и “debouncing” так называются?: https://codepen.io/tigt/post/why-are-they-called-throttling-and-debouncing-anyway

[50] ООП в JavaScript: https://code.tutsplus.com/articles/Object-Oriented-Programming-JavaScript--cms-29256

[51] Паттерны разделения кода приложения на Vue.js: https://medium.com/devschacht/%D0%BF%D0%B0%D1%82%D1%82%D0%B5%D1%80%D0%BD%D1%8B-%D1%80%D0%B0%D0%B7%D0%B4%D0%B5%D0%BB%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BA%D0%BE%D0%B4%D0%B0-%D0%BF%D1%80%D0%B8%D0%BB%D0%BE%D0%B6%D0%B5%D0%BD%D0%B8%D1%8F-%D0%BD%D0%B0-vue-js-d00b83855c93

[52] Функции рендера Vue.js и transitions: https://medium.com/@hayavuk/vue-js-render-functions-and-transitions-a8656980e18c

[53] Phytochemia: почему мы выбрали Vue.js: https://medium.com/phytochemia-tech-blog/why-we-chose-vue-js-be2411ff7f34

[54] Что нового в React 16?: https://www.sitepoint.com/react-16-new-features/

[55] React для Angular разработчиков: https://www.sitepoint.com/react-for-angular-developers/

[56] Как организовать больше приложение на React и сделать его масштабируемым: https://www.sitepoint.com/organize-large-react-application/

[57] react-powerplug: https://github.com/renatorib/react-powerplug

[58] Как я перестал любить Angular: https://habrahabr.ru/post/337578/

[59] Использование Веб Компонентов с Angular: https://www.sitepen.com/blog/2017/09/14/using-web-components-with-angular/

[60] Начало работы с End-to-End тестированием в Angular с использованием Protractor: https://code.tutsplus.com/tutorials/getting-started-with-end-to-end-testing-in-angular-using-protractor--cms-29318

[61] Проблемы с защитой роута в Angular: https://medium.com/@adasq3/angular-router-protection-issues-beb1ce45339f

[62] p-progress: https://github.com/sindresorhus/p-progress

[63] punchcard: https://github.com/melenaos/jquery-punchcard

[64] classwrap: https://github.com/jbucaran/classwrap

[65] ellipsed: https://github.com/nzambello/ellipsed

[66] В Chrome 64 будет прекращено автоматическое воспроизведение видео со звуком: http://www.opennet.ru/opennews/art.shtml?num=47214

[67] а FTP будет помечаться, как небезопасный протокол: http://www.opennet.ru/opennews/art.shtml?num=47204

[68] Проект Mozilla представил дополнение с реализацией контекстных контейнеров для Firefox: http://www.opennet.ru/opennews/art.shtml?num=47215

[69] В Firefox 57 будет обновлён внешний вид средств для разработчиков: https://tproger.ru/news/firefox-57-refreshed-devtools/

[70] iPhone X, iPhone 8 и 8 Plus, Apple Watch Series 3 и Apple TV 4K: https://vc.ru/p/apple-keynote-2017

[71] Российские дизайнеры и разработчики об iPhone X, iPhone 8 и других анонсах презентации Apple: https://vc.ru/p/iphonex-opinions

[72] W3C разработал API для криптовалютных платежей в браузерах: https://www.searchengines.ru/api-w3c.html

[73] Нейросеть дня: 3D-маска лица на основе фотографии: https://vc.ru/p/3d-esenin

[74] Выпуск Vagrant 2.0, инструментария для создания виртуальных окружений: http://www.opennet.ru/opennews/art.shtml?num=47173

[75] Сеть казино скомпрометировали через «умный» аквариум: https://xakep.ru/2017/07/25/iot-flaws/

[76] Компания Oracle выбрала Eclipse Foundation для передачи разработки Java EE: http://www.opennet.ru/opennews/art.shtml?num=47186

[77] Человеческий мозг планируют подключить к «интернету вещей»: https://naked-science.ru/article/hi-tech/chelovecheskiy-mozg-planiruyut

[78] Почему Кремниевую долину критикуют все чаще, и что с этим делать: https://ain.ua/2017/09/17/pochemu-kremnievuyu-dolinu-kritikuyut

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

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

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

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