Дайджест свежих материалов из мира фронтенда, дизайна и IT за последнюю неделю №211 (9 — 15 мая 2016)

---

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

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

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

[1] Клиентская разработка: #webdev

[2] CSS: #css

[3] Javascript: #js

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

[5] Дизайн: #design

[6] Новости: #news

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

[8] 15-й выпуск «Веб-стандартов»: блокировка рекламы, Pointer Events, расширения, веб-компоненты : https://soundcloud.com/web-standards/no15

[9] 39-й выпуск RadioJS: React, мед, пиво и все остальное: https://radiojs.ru/2016/05/radiojs-39/

[10] Данные на фронтенде: шаг к приложениям будущего: https://habrahabr.ru/company/jugru/blog/283518/

[11] Введение в Web MIDI: http://prgssr.ru/development/vvedenie-v-web-midi.html

[12] Интересная статья про оптимизацию хореографии контента, изображений и типографики для крупномасштабных экранов: https://css-tricks.com/optimizing-large-scale-displays/

[13] Введение в Page Visibility API: https://scotch.io/tutorials/get-to-know-the-page-visibility-api

[14] Unstuck Webpack: http://www.linuxenko.pro/unstuck-webpack/

[15] Введение в Webpack: часть 2: http://code.tutsplus.com/tutorials/introduction-to-webpack-part-2--cms-25911

[16] Необходимые инструменты для кроссбраузерного тестирования в 2016-м: http://www.sitepoint.com/the-7-cross-browser-testing-tools-you-need-in-2016/

[17] Шпаргалка по Bootstrap 4: http://hackerthemes.com/bootstrap-cheatsheet/

[18] Список утилит для командной строки для работы со структурированной текстовой информацией: https://github.com/dbohdan/structured-text-tools

[19] Интерактивные уроки по работе с Sublime: https://sublimetutor.com/

[20] Я — гребаный веб-мастер: https://justinjackson.ca/webmaster/

[21] Предзагрузка ресурсов в HTML5: http://frontender.info/html5-prefetch/

[22] Советы по развертыванию фронтенда на HTTP2: http://blog.cloud66.com/best-practice-for-http2-front-end-deployments/

[23] Полное руководство по оптизимации изображений для веба: https://www.keycdn.com/blog/optimize-images-for-web/

[24] Создание SVG паттернов без выноса мозга (или бюджета): http://www.sitepoint.com/mastering-svg-patterns-without-breaking-brain-budget/

[25] Еще раз о SVG Clipping Paths: http://vanseodesign.com/web-design/more-about-svg-clipping-paths/

[26] Маскирование в браузере с CSS и SVG: http://www.sitepoint.com/masking-in-the-browser-with-css-and-svg/

[27] Стоимость доступности: https://medium.com/net-magazine/the-cost-of-accessibility-90c875420239

[28] Создаем более доступный UX с помощью HTML5 и UIA: https://blogs.windows.com/msedgedev/2016/05/12/accessible-ux-with-html5-and-uia/

[29] Как провести базовый аудит доступности на вашем сайте: http://blogs.adobe.com/dreamweaver/2016/05/how-to-conduct-a-basic-accessibility-audit-on-your-site.html

[30] Краткое руководство: как делать доступные веб-компоненты: http://www.sitepoint.com/accessible-web-components/

[31] О том, что делают с вопросами доступности в Vox Media: http://product.voxmedia.com/2016/5/11/11612516/accessibility-matters-and-heres-what-were-doing-about-it

[32] Frend: http://frend.co/

[33] Анимированные эффект искажения для кнопок с помощью SVG фильров: http://tympanus.net/codrops/2016/05/11/distorted-button-effects-with-svg-filters/

[34] Эффекты на кнопка с искажениями с SVG фильтрами: http://tympanus.net/Development/DistortedButtonEffects/

[35] Анимированные эффекты различных переходов: https://codyhouse.co/gem/animated-transition-effects/

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

[37] Стилизация React-компонентов: https://habrahabr.ru/company/devexpress/blog/283314/

[38] Переход с HTML Grid на CSS Grid системы: https://habrahabr.ru/post/283142/

[39] Осмысленный CSS: описывайте стилями свою логику: http://css-live.ru/articles/osmyslennyj-css-opisyvajte-stilyami-svoyu-logiku.html

[40] Meaningful CSS: Style Like You Mean It: http://alistapart.com/article/meaningful-css-style-like-you-mean-it

[41] css-live.ru: http://css-live.ru/

[42] Видео с PiterCSS №3: https://www.youtube.com/playlist?list=PLMBnwIwFEFHeDVHZJw7Y5WWVkAb1O_OwC

[43] Важность !important в CSS: http://csswizardry.com/2016/05/the-importance-of-important/

[44] Сценарии использования для вертикальных медиа-запросов: https://ishadeed.com/article/vertical-media-queries/

[45] BEMantic: DRY Like You Mean It: http://codepen.io/stowball/post/bemantic-dry-like-you-mean-it

[46] to__bem or not__to--bem: http://www.didoo.net/to-bem-or-not-to-bem/01__interview-with--christoph__reinartz.html

[47] Разработка архитектуры для стилей фронтенда: https://robots.thoughtbot.com/architecting-front-end-styles

[48] CSS Modules в rescue.jsx: https://medium.com/@kadmil/css-modules-to-the-rescue-jsx-ded2db874d34

[49] CSS Modules в примерах: http://andrewhfarmer.com/css-modules-by-example/

[50] Давайте писать красивые коментарии в CSS: http://seesparkbox.com/foundry/lets_write_beautiful_css_comments

[51] Хорошие и плохие практики работы с CSS для начинающих: https://speckyboy.com/2016/05/10/good-bad-css-practices/

[52] Действительно гибкая типографика с помощью единиц vh и vw : https://www.smashingmagazine.com/2016/05/fluid-typography/

[53] Flexbox и обрезание длинного текста: https://css-tricks.com/flexbox-truncated-text/

[54] Отзывчивое модульное масштабирование текста: http://zellwk.com/blog/responsive-modular-scale/

[55] Метод функций bind своими руками: http://jsraccoon.ru/interview-bind

[56] JavaScript по БЭМ: https://ru.bem.info/methodology/js/

[57] Особенности JavaScript: https://ru.bem.info/methodology/js-principles/

[58] Дорожная карта JavaScript: впереди небольшие и более частые обновления: http://www.infoworld.com/article/3067932/javascript/javascript-road-map-smaller-more-frequent-updates-ahead.html

[59] Упрощенный JavaScript жаргон (словарь терминов): http://jargon.js.org/

[60] Нейросети в JS: http://blog.webkid.io/neural-networks-in-javascript/

[61] 7 удивительный вещей, которые я узнал, когда писал генератор чисел Фибоначчи на JS: https://medium.com/javascript-scene/7-surprising-things-i-learned-writing-a-fibonacci-generator-4886a5c87710

[62] Что такое Promise.try, и почему он так важен?: http://cryto.net/~joepie91/blog/2016/05/11/what-is-promise-try-and-why-does-it-matter/

[63] Создание простого цикла, используя массив: http://www.jstips.co/en/make-easy-loop-on-array/

[64] Модульный JavaScript: руководство для начинающих по SystemJS и jspm: http://www.sitepoint.com/modular-javascript-systemjs-jspm/

[65] Вкус новых параллельных примитивов в JavaScript: https://hacks.mozilla.org/2016/05/a-taste-of-javascripts-new-parallel-primitives/

[66] Необычные jQuery селекторы: http://code.tutsplus.com/tutorials/uncommon-jquery-selectors--cms-25812

[67] Создание собственного настраиваемого Slack-бота с Node.js: http://www.sitepoint.com/custom-slackbot-with-node/

[68] Видео-курсы по Node.js: https://nodecasts.io/

[69] ES6 в деталях: генераторы, продолжение: http://frontender.info/es6-in-depth-generators-continued/

[70] 5 «плохих» частей JavaScript, которые починили в ES6: https://medium.com/@rajaraodv/5-javascript-bad-parts-that-are-fixed-in-es6-c7c45d44fd81

[71] Пример использования ES6 генераторов: http://nikolay.rocks/2016-05-03-case-for-generators

[72] Обзор ES6 Sets: http://www.barbarianmeetscoding.com/blog/2016/05/12/a-look-at-es6-sets/

[73] Как создавать и публиковать модули ES6 сегодня с Babel и Rollup: https://medium.com/@tarkus/how-to-build-and-publish-es6-modules-today-with-babel-and-rollup-4426d9c7ca71

[74] Почему нельзя использовать Backbone.js в 2016 году: https://habrahabr.ru/post/283148/

[75] ReactJS 15.0.2 Tutorial: https://habrahabr.ru/post/282874/

[76] Лучшие новости и анонсы с ng-conf 2016: https://scotch.io/bar-talk/the-best-news-from-angulars-ng-conf-2016

[77] 33 Видео с ng-conf 2016: https://www.youtube.com/playlist?list=PLOETEcp3DkCq788xapkP_OU-78jhTf68j#ngconf2016

[78] Производительность в Angular: настройка движка: https://www.youtube.com/watch?v=LoIuokh6NUI

[79] Не вините фреймворк: мой опыт с AngularJS и ReactJS : https://www.ckl.io/blog/dont-blame-the-framework-angularjs-and-reactjs/

[80] Angular 2 серии — часть 5: формы и кастомная валидация: https://auth0.com/blog/2016/05/03/angular2-series-forms-and-custom-validation/

[81] Создание собственного расширения для Chrome с Angular 2 и TypeScript: http://www.sitepoint.com/chrome-extension-angular-2/

[82] Как я перестал беспокоиться и полюбил JSX: http://jamesknelson.com/learned-stop-worrying-love-jsx/

[83] Советы по оптимизации отрисовки набора элементов в React: https://medium.com/@lavrton/how-to-optimise-rendering-of-a-set-of-elements-in-react-ad01f5b161ae

[84] Начало работы с Ionic: навигация: http://code.tutsplus.com/tutorials/getting-started-with-ionic-navigation--cms-26486

[85] Tocbot: http://tscanlin.github.io/tocbot/

[86] JavaPoly.js — полифил для нативной поддержки в JVM браузере : https://www.javapoly.com/

[87] Stop.js — 'setTimeout' на базе промисов: https://github.com/rwu823/stop.js

[88] Trial.js — библиотека для мониторинга позиции курсора мыши и предположения дальнейшего поведения: https://github.com/MarkoCen/trial-js

[89] Adobe CC Scripts Panel — панель для скриптов для After Effects, Illustrator, и Photoshop: https://github.com/majman/adobe-scripts-panel

[90] Спасём Firefox: https://habrahabr.ru/post/283456/

[91] Представлена программа предварительного тестирования экспериментальных улучшений Firefox: http://www.opennet.ru/opennews/art.shtml?num=44402

[92] Новый режим экономии заряда батареи в браузере Opera для ПК продлевает автономность ноутбука на 50%: http://itc.ua/news/novyiy-rezhim-ekonomii-zaryada-batarei-v-brauzere-opera-dlya-pk-prodlevaet-avtonomnost-noutbuka-na-50/

[93] В Chrome планируют отключить информирование сайтов о поддержке Flash: http://www.opennet.ru/opennews/art.shtml?num=44424

[94] В Microsoft Edge теперь можно блокировать рекламу с помощью AdBlock или Adblock Plus: http://lifehacker.ru/2016/05/08/microsoft-edge-adblock/

[95] В Яндекс.Браузере для устройств на базе Android заработала технология Антишок: http://www.searchengines.ru/news/archives/v_yandeks_brauz.html

[96] Релиз Safari Technology Preview 4: https://webkit.org/blog/6210/release-notes-for-safari-technology-preview-4/

[97] Blisk — браузер (на базе Chromium) для веб-разработки: https://blisk.io/

[98] Последние разработки в области браузерной безопасности: http://www.sitepoint.com/the-cutting-edge-of-browser-security/

[99] Дайджест продуктового дизайна, апрель 2016: https://habrahabr.ru/company/mailru/blog/283280/

[100] Material Design: философия и практика: https://habrahabr.ru/company/jugru/blog/283230/

[101] «Веб-брутализм»: Зачем разработчики создают простые и некрасивые сайты в стиле 90-х годов: https://vc.ru/p/ugly-design

[102] Вдохновляясь сообществом — как проходил редизайн Instagram: http://ain.ua/2016/05/14/647956

[103] С чего начать, чтобы стать дизайнером: https://vc.ru/p/problem-14515

[104] Instagram представил новый дизайн и «радужную» иконку приложения: https://vc.ru/n/insta-redesign

[105] Дизайн высоконагруженных интерфейсов, управляемых данными: http://sketchapp.me/dizajn-vysokonagruzhennyx-interfejsov-upravlyaemyx-dannymi/

[106] Дизайн умных уведомлений в мобильных и веб-интерфейсах: http://sketchapp.me/dizajn-umnyx-uvedomlenij-v-mobilnyx-i-veb-interfejsax/

[107] Новинка от Google — Material motion: https://www.google.com/design/spec/motion/material-motion.html#

[108] Эволюция дизайна, или я как стал лучшим дизайнером: https://blog.prototypr.io/the-evolution-of-design-a617b8c20bcb

[109] 8 популярных ошибок, которые допускают начинающие дизайнеры: https://speckyboy.com/2016/05/12/8-super-common-mistakes-beginner-designers-make/

[110] Набор для работы с ретиной, который вы всегда хотели в Photoshop: https://www.smashingmagazine.com/2016/03/the-retina-asset-workflow-youve-always-wanted-for-photoshop/

[111] Полное введение для новичков по поиску в UX: http://www.uxbooth.com/articles/complete-beginners-guide-to-design-research/

[112] Темная сторона UI. Преимущества темного фона: http://tubikstudio.com/dark-side-of-ui-benefits-of-dark-background/

[113] Работы на Dribble, посвященные новой иконке Instagram: https://dribbble.com/search?q=instagram&s=latest

[114] Дизайн новой иконки для Instagram, вдохновленный сообществом: https://medium.com/@ianspalter/designing-a-new-look-for-instagram-inspired-by-the-community-84530eb355e3

[115] Тренды веб-дизайна 2016-го: полное руководство: https://www.uxpin.com/web-design-trends-2016-definitive-guide?section=intro

[116] Простые шаги для улучшения дизайна иконок: https://www.smashingmagazine.com/2016/05/easy-steps-to-better-logo-design/

[117] Дизайн Eventbrite: эволюционный процесс: https://blog.prototypr.io/eventbrite-design-an-evolutionary-process-ae4f7cc3949b

[118] Как мы сделали редизайн нашего приложения: https://medium.com/@michaeldolejs/how-we-redesigned-our-app-247c64740d93

[119] Как Duolingo делает дизайн, используя психологию: https://medium.com/in-progress/how-duolingo-designs-with-psychology-in-mind-d9472a707640

[120] Uber для возрастных и плохо видящих людей: https://blog.prototypr.io/uber-for-seniors-and-poor-visibility-dbaadca12a2a

[121] Юзабилити эвристика для ботов: https://medium.com/chat-bots/usability-heuristics-for-bots-7075132d2c92

[122] Научно обоснованные факты о цветах: https://creativemarket.com/blog/2016/05/09/color-meaning-facts

[123] Всегда показывайте свою работу: почему дизайнеры должны писать на стенах (и ты в том числе): https://medium.com/greater-good-studio/always-show-your-work-why-designers-write-on-the-walls-and-why-you-should-too-6725237b9765

[124] OpenBazaar в деталях: брендинг и эстетика: https://medium.com/@therealopenbazaar/openbazaar-in-detail-branding-aesthetics-8fda87637944

[125] Курируемая коллекция работ цифровых художников: http://gearaward.com/inspiration.html

[126] В чем назначение логотипов?: https://blog.prototypr.io/what-is-the-purpose-of-a-logo-its-more-than-design-it-s-about-purpose-c7dfdc783d1e

[127] Никогда не показывайте дизайн который не был протестирован на пользователях: http://alistapart.com/article/never-show-a-design-you-havent-tested-on-users

[128] Основные и вспомогательне кнопки для выполнения действий: https://uxplanet.org/primary-secondary-action-buttons-c16df9b36150

[129] Быстрый совет: как использовать набор инструментов Symbol в Sketch: http://webdesign.tutsplus.com/tutorials/quick-tip-how-to-use-sketchs-updated-symbols--cms-26517

[130] Как обновленный инструмент Symbols в Sketch улучшит процесс работы: http://www.sitepoint.com/how-sketch-symbols-will-improve-your-workflow/

[131] Illustrator за 60 секунд: как использовать инструмент Width: http://design.tutsplus.com/tutorials/illustrator-in-60-seconds-how-to-use-the-width-tool--cms-26298

[132] Логотипы со скрытыми сообщениями: http://webdesignledger.com/15-logos-with-hidden-messages/

[133] Как использовать сходные шрифты: http://www.typography.com/blog/fonts-that-clash

[134] Google Translate теперь работает внутри любого приложения Android: http://itc.ua/blogs/google-translate-teper-rabotaet-vnutri-lyubogo-prilozheniya-android/

[135] В YouTube появится встроенный мессенджер: http://4pda.ru/2016/05/12/297119/

[136] Alphabet снова стал самой дорогой компанией в мире: http://www.searchengines.ru/seoblog/alphabet_snova_stal_samoy.html

[137] В Google Photos появились комментарии и умные подсказки: http://itc.ua/blogs/v-google-photos-poyavilis-kommentarii-i-umnyie-podskazki/

[138] Github вводит неограниченные приватные репозитории, повысив цены для организаций: http://oddstyle.ru/veb-razrabotka/github-vvodit-neogranichennye-privatnye-repozitorii-povysiv-ceny-dlya-organizacij.html

[139] Топовые esports команды создали новую киберспортивную лигу: http://gmbox.ru/genre/kibersport/topovye-esports-komandy-sozdali-novuyu-kibersportivnuyu-ligu

[140] Релиз Electron 1.0, платформы создания приложений на базе движка Chromium: http://www.opennet.ru/opennews/art.shtml?num=44407

[141] Amazon запустил собственный видеохостинг – конкурента YouTube: http://www.searchengines.ru/news/archives/amazon_zapustil_videoservis.html

[142] Mozilla расширила область действия системы грантов открытым проектам: http://www.opennet.ru/opennews/art.shtml?num=44406

[143] Mozilla в суде добивается раскрытия уязвимости, применённой в атаке ФБР на Tor Browser: http://www.opennet.ru/opennews/art.shtml?num=44408

[144] Facebook запускает поддержку панорамных фотографий: http://www.cossa.ru/news/244/130151/

[145] Дизайнер голливудских фильмов будет разрабатывать скафандры для SpaceX: http://www.computerra.ru/148559/dizayner-gollivudskikh-filmov-budet/

[146] Искусственный интеллект IBM Watson будет бороться с киберпреступностью: https://xakep.ru/2016/05/13/watson/

[147] Хабрахабр ≥ 10 лет: https://habrahabr.ru/article/283500/

[148] Креативность: пять мифов, которые давно пора развеять: http://itc.ua/blogs/kreativnost-pyat-mifov-kotoryie-davno-pora-razveyat/

[149] Тестирование Hyperloop доказало — будущее все еще будет скучным: https://shazoo.ru/2016/05/12/39766/testirovanie-hyperloop-dokazalo-budushee-vse-eshe-budet-skuchnym

[150] «Прощай смартфон, прощай лептоп!»: экскурсия по самому загадочному IT-стартапу Magic Leap : http://gagadget.com/science/21919-proschaj-smartfon-proschaj-leptop-ekskursiya-po-samomu-zagadochnomu-it-startapu-magic-leap-/

[151] Все без исключения учитесь программировать. Пожалуйста: http://ain.ua/2016/05/13/648182

[152] Не учитесь программировать, пожалуйста: http://ain.ua/2016/05/11/647568

[153] Наглядная математика: как рассчитать ценность пользователя с помощью интегралов: https://vc.ru/p/ltv-calculation

[154] Ах, этот глупый «умный» дом!: http://www.computerra.ru/147084/smart-home-dumb-user/

[155] В Неваде испытали Hyperloop: http://www.computerra.ru/148513/hyperloop-one-poat/

[156] Hyundai разрабатывает собственный костюм «Железного человека»: http://itc.ua/news/hyundai-razrabatyivaet-sobstvennyiy-kostyum-zheleznogo-cheloveka/

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

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

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

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

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