Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №202 (6 — 13 марта 2016)

---

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

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

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

[8] FLIF — свободный формат сжатия изображений: https://habrahabr.ru/post/278745/

[9] Кризис ожирения сайтов: https://habrahabr.ru/post/278655/

[10] Что нового в WordPress 4.5?: http://web2033.com/new-in-wordpress-4-5/

[11] Спойлер: Вставка SVG иконок одним единственным способом: https://habrahabr.ru/post/278825/

[12] Как создать иконочную систему с помощью SVG symbols: https://nucleoapp.com/how-to-create-an-icon-system-using-svg-symbols/

[13] Облако текста на SVG с неровными выгибающимися краями: http://thenewcode.com/542/Staggered-and-Fainting-Text-with-SVG

[14] SVG Fundamentals: XML and Versioning: http://thenewcode.com/605/SVG-Fundamentals-XML-and-Versioning

[15] Parallax жжет: превращение плоских фотографий в объемные с помощью SVG: http://www.sitepoint.com/parallax-burns-converting-photographs-2d-3d-svg/

[16] Техническое руководство по SEO: https://ma.ttias.be/technical-guide-seo/

[17] 5 трендов SEO, о которых вы должны знать в 2016-м: http://line25.com/articles/seo-trends-of-2016

[18] Создание Bixa Color, цветного шрифта для веба: https://pixelambacht.nl/2016/building-bixa-color/

[19] Отладка Service Workers и Push с помощью Firefox DevTools: https://hacks.mozilla.org/2016/03/debugging-service-workers-and-push-with-firefox-devtools/

[20] Service Workers: сохраняйте пользовательскую информацию с помощью Save-Data Header: http://deanhume.com/Home/BlogPost/service-workers--save-your-users-data-using-the-save-data-header/10139

[21] Аудит производительности m.imgur.com: https://github.com/perfs/audits/issues/1

[22] Google’s AMP: забавное и удобное руководство: http://www.copyblogger.com/google-amp/

[23] Песочница компонентов руководства по стилю: http://jonibologna.com/a-style-guide-component-playground/

[24] Клик правой кнопкой на логотипе для вывода диалога загрузки файлов: https://css-tricks.com/right-click-logo-show-logo-download-options/

[25] Дизайн в инженерном море: http://www.tedgoas.com/blog/design-in-a-sea-of-engineering

[26] Подкаст Веб-стандарты, Выпуск №6: флексбокс, типографика, быстродействие, блютус и критика БЭМа: https://soundcloud.com/web-standards/episode-6

[27] Видео докладов с Я.Субботника 2016: https://www.youtube.com/playlist?list=PLKaafC45L_SQ97W1IWCnIN7ztC4HAv9OB

[28] Видео с митапа Girls Not Bombs #6 : https://www.youtube.com/playlist?list=PLrOBnk7g6QXpgGYmw7C76NWkHbuQWIeka

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

[30] Фильтры с инстаграмном стиле с помощью HTML5 Canvas: https://www.viget.com/articles/instagram-style-filters-in-html5-canvas

[31] Эффект размытия изображений во время загрузки в стиле Medium: https://medium.com/@nirazanbasnet/keep-on-hacking-frontend-quicktips-3-medium-site-like-image-loading-blur-effect-a7fe052c44f6

[32] Очередные креативные лоадеры с помощью Rebound и Canvas: http://tympanus.net/codrops/2016/03/08/spring-loaders-rebound-canvas/

[33] Адаптивный пиксель-арт: http://essenmitsosse.de/pixel/

[34] Как создать анимацию и переходы с помощью Motion UI: https://habrahabr.ru/company/ua-hosting/blog/279067/

[35] Sass: передача блоков кода с помощью примесей и выбор межу mixin и extend: http://e-planet.ru/company/blog/sass-peredacha-blokov-koda-s-pomoshcju-primesej-i-vybor-mezhu-mixin-i-extend.html

[36] Чиним сломанный текст с помощью box-decoration-break: http://thenewcode.com/545/Fixing-Broken-Text-with-box-decoration-break

[37] Использование `rem` для задания глобальных размеров; `em` — для задания локальных: https://css-tricks.com/rem-global-em-local/

[38] Люди не меняют дефолтное значение в 16px для шрифта в их браузере: http://nicolas-hoizey.com/2016/03/people-don-t-change-the-default-16px-font-size-in-their-browser.html

[39] Продвинутые CSS селекторы, о которых вы никогда не знали: https://medium.com/the-web-crunch-publication/advanced-css-selectors-you-never-knew-about-972d8275d079

[40] Импровизируем с отзывчивыми изображениями в ожидании браузерной поддержки: https://kjaermaxi.me/makeshift-responsive-images/

[41] Как сделать пирамидную структуру c помощью CSS: http://www.creativebloq.com/css3/how-create-pyramid-layout-css-31619524

[42] Быстрый совет: исправление проблемы с font-weight в состоянии наведения: http://www.sitepoint.com/quick-tip-fixing-font-weight-problem-hover-states/

[43] Прибираем в CSS-коде: http://www.sitepoint.com/cleaning-up-a-css-codebase/

[44] Добавляем стили для битых изображений: http://bitsofco.de/styling-broken-images/

[45] Типографика на базе относительных единиц размеров видимой области: http://zellwk.com/blog/viewport-based-typography/

[46] Инструменты и ресурсы для создания более значимой веб-типографики: https://www.smashingmagazine.com/2016/03/meaningful-web-typography/

[47] “Живое” руководство по стилю — Pattern-Lab: http://www.bigeng.io/the-living-style-guide-pattern-lab/

[48] balloon.css — простые всплывающие подсказки на CSS: http://kazzkiq.github.io/balloon.css/

[49] Читайте книгу ‘Enduring CSS’: https://benfrain.com/read-the-book-enduring-css-online-at-httpecss-io/

[50] ecss.io: http://ecss.io

[51] Тестирование JS. Кармический Webpack: https://habrahabr.ru/company/rambler-co/blog/278503/

[52] Google обновил рекомендации по индексации сайтов на JavaScript: http://www.searchengines.ru/news/archives/google_obnovil_javascript.html

[53] Продвинутое использование метода reduce: http://jsraccoon.ru/tip-advanced-reduce

[54] 5 советов по написанию более поддерживаемого JS кода: https://medium.com/@Functionite/5-tips-for-writing-more-maintainable-javascript-code-b87de1147e94

[55] Изучение нативных функций JS и как их использовать: https://scotch.io/tutorials/learning-javascript-native-functions-and-how-to-use-them

[56] Простой сайт на Node.js – 2016 Edition: http://www.clock.co.uk/blog/a-simple-website-in-node-js-2016-edition

[57] Создатель JavaScript Brendan Eich: WebAssembly меняет правила игры: http://www.infoworld.com/article/3042705/web-development/javascript-founder-brendan-eich-webassembly-is-a-game-changer.html

[58] На освоение React мне потребовалась всего неделя, а чем вы хуже?: http://css-live.ru/articles/na-osvoenie-react-mne-potrebovalas-vsego-nedelya-a-chem-vy-xuzhe.html

[59] I Learned How to be Productive in React in a Week and You Can, Too: https://css-tricks.com/productive-in-react/

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

[61] Выпущен React v15.0 RC: https://facebook.github.io/react/blog/2016/03/07/react-v15-rc1.html

[62] Быстрый совет: создание React-компонента видео-проигрывателя: http://www.sitepoint.com/quick-tip-video-player-component-react/

[63] enclave: https://github.com/eanplatter/enclave

[64] Горячая перезагрузка в React: https://medium.com/@dan_abramov/hot-reloading-in-react-1140438583bf

[65] Конец магии Meteor: https://medium.com/@andersramsay/the-end-of-the-magic-of-meteor-ad600d739e5

[66] Создание UI для Ember приложения: http://emberigniter.com/building-user-interface-around-ember-data-app/

[67] Angular — это паттерн проектирования: http://blog.ionic.io/angular-is-a-design-pattern/

[68] Аутентификация в Angular 2: https://medium.com/@blacksonic86/authentication-in-angular-2-958052c64492

[69] madewithangular: https://www.madewithangular.com/#/

[70] react-mt-svg-lines: https://github.com/moarwick/react-mt-svg-lines

[71] react-key-handler — React-компонент для обработки клавиатурных событий: https://github.com/ayrton/react-key-handler

[72] ES6 в деталях: стрелочные функции: http://frontender.info/es6-in-depth-arrow-functions/

[73] Самые полезные особенности ES6/ES2015: http://frontendinsights.com/the-most-useful-features-of-es6es2015/

[74] Пять советов по улучшению Вашего JS с ES6: https://www.youtube.com/watch?v=edq4dt98Mpg

[75] Возможно, нам стоит понизить уровень JavaScript: https://eev.ee/blog/2016/03/06/maybe-we-could-tone-down-the-javascript/

[76] JavaScript в 2016-м: за пределами гармонии: https://www.oreilly.com/ideas/brendan-eich-javascript-fluent-2016

[77] В защиту JavaScript классов: https://medium.com/@housecor/in-defense-of-javascript-classes-e50bf2270a95

[78] Как передать значения переменных из SCSS в JavaScript: http://frontendgems.com/blog/scss-vars-to-js/

[79] Создание 3D движка с JavaScript: http://www.sitepoint.com/building-3d-engine-javascript/

[80] Нервозность от JavaScript инструментария — помощь под рукой: http://www.sitepoint.com/javascript-tooling-anxiety-help/

[81] JavaScript Unit Testing Performance: http://facebook.github.io/jest/blog/2016/03/11/javascript-unit-testing-performance.html

[82] JS Bits: https://github.com/vasanthk/js-bits

[83] freezeframe.js: https://github.com/ctrl-freaks/freezeframe.js

[84] babylon: https://github.com/babel/babylon

[85] Релиз Firefox 45: http://www.opennet.ru/opennews/art.shtml?num=44004

[86] подробности для разработчиков от tanalin: http://tanalin.com/blog/2016/03/firefox-45/

[87] В ночных сборках Firefox появилась поддержка синтеза речи: http://www.opennet.ru/opennews/art.shtml?num=44016

[88] Opera выпустила превью-версию браузера со встроенным блокировщиком рекламы: https://vc.ru/n/opera-adblock

[89] Microsoft добавила баннер по поводу обновления до Windows 10 в обновление безопасности для Internet Explorer: http://microsoftportal.net/internet-explorer/6947-microsoft-dobavila-banner-po-povodu-obnovleniya-do-windows-10-v-obnovlenie-bezopasnosti-dlya-internet-explorer.html

[90] Chrome 49: Custom CSS properties, background sync and save-data client hint: https://www.youtube.com/watch?v=GNP-_ncY3ZA

[91] Креативный сайт Haruki Murakami: http://www.harukimurakami.com/

[92] tse-foundation.org: http://tse-foundation.org/

[93] aaronporter.co: http://aaronporter.co/

[94] Publicis90: http://www.publicis90.com/#/publicis90

[95] 12dishes.com: http://12dishes.com/

[96] 56.digital: http://56.digital/

[97] Лучшие интерактивные сайты за 2016-й: http://www.onextrapixel.com/2016/03/12/best-interactive-websites-of-2016/

[98] Сайт с погодными эффектами: http://rainyscope.com/#slide-1

[99] I/O 16 coming: https://events.google.com/io2016/

[100] Новые лучше сайты-портфолио, март 2016: https://medium.com/@WebdesignerDepot/the-best-new-portfolio-sites-march-2016-57a042b847b4

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

[102] Состояния интерфейса: первый экран, индикатор загрузки и сообщения об ошибках: https://vc.ru/p/bad-ui-tinder

[103] Влияние интерфейса на рост сервиса: разбор iOS-приложения Telegram: https://vc.ru/p/telegram-gh

[104] Использование Sympli для взаимодействия с разработчиками: http://sketchapp.me/ispolzovanie-sympli-dlya-vzaimodejstviya-s-razrabotchikami/

[105] Дизайн с осмысленными данными: http://sketchapp.me/dizajn-s-osmyslennymi-dannymi/

[106] Плагин для удобной конвертации артбордов в PDF: http://sketchapp.me/plagin-dlya-udobnoj-konvertacii-artbordov-v-pdf/

[107] animatemate — плагин для создания анимации в Sketch: http://animatemate.com/

[108] Основы видео слоя в Photoshop-е: http://photoshopanimation.com/2016/video-layer-essentials/

[109] Пять советов для сохранения SVG для веба в Illustrator-е: https://www.viget.com/articles/5-tips-for-saving-svg-for-the-web-with-illustrator

[110] Illustrator за 60 секунд: как использовать обрезающие маски: http://design.tutsplus.com/tutorials/illustrator-in-60-seconds-how-to-use-clipping-masks--cms-25983

[111] Существует ли граница видимой области в вебе?: http://blogs.adobe.com/dreamweaver/2016/03/is-there-a-fold-on-the-web.html

[112] Будущее диалогового UI принадлежит гибридным интерфейсам: https://medium.com/@tomazstolfa/the-future-of-conversational-ui-belongs-to-hybrid-interfaces-8a228de0bdb5

[113] Мифы UX дизайна/продуктового дизайна/или как там они это называют на этой неделе: https://medium.com/@cwodtke/the-myths-of-ux-design-product-design-whatever-they-call-it-this-week-ef37a39cac6b

[114] Чем меньше, тем больше – минималистичный и простой веб дизайн: http://www.designyourway.net/blog/design/less-is-more-minimalist-web-design/

[115] Семь лучших стратегий использования фото в веб-интерфейсах: http://speckyboy.com/2016/03/07/strategies-using-photos-web-inerfaces/

[116] Как просто справляться с тенями с режимами перехода одного цвета или оттенка в другой: http://design.tutsplus.com/articles/how-to-shade-easily-with-layer-blend-modes--cms-25895

[117] Лучшие тренды мобильного дизайна для 2016-го: http://www.sitepoint.com/top-5-breakout-mobile-design-trends-2016/

[118] LIQUID BRANDS: https://www.behance.net/gallery/33579821/LIQUID-BRANDS

[119] Мгновенный поиск логотипов: http://instantlogosearch.com/

[120] Высокоточное сотрудничество и философия дизайна в Intercom: https://medium.com/in-progress/high-fidelity-collaboration-and-design-philosophy-at-intercom-7a726ba5ff7a

[121] Приборная панель в Stripe: http://www.brianlovin.com/design-details/stripe-dashboard-for-ios

[122] Детали типографики избранных сайтов за февраль 2016 от Typewolf: https://www.typewolf.com/blog/favorite-sites-of-february-2016

[123] Впечатляющие концепты Material-дизайна: https://stories.uplabs.com/5-incredible-concepts-of-material-design-f31f2f58b060

[124] Введение в Material-дизайн: http://webdesignledger.com/introduction-material-design/

[125] Отличные комбинации шрифтов: http://designmodo.com/great-font-combinations/

[126] Иллюстрации паттернов различных арабских стран: http://www.coalesceideas.com/18-free-various-illustration-patterns-of-arab-countries/

[127] Вдохновляющие качественные вайрфреймы: https://medium.com/muzli-design-inspiration/quality-wireframes-inspiration-a91f5d78be37

[128] Бесплатные фотографии молний для фотоманипуляций: http://www.dejurka.ru/graphics/free-lightning-photos/

[129] Бесплатные текстуры разводов чернил и красок: http://www.dejurka.ru/graphics/free-ink-textures/

[130] Шаблоны для флаера и постера к Дню святого Патрика: http://speckyboy.com/2016/03/10/free-st-patrick-flyer-poster-template/

[131] Мокапы с изображением Apple Watch: http://www.fusionplate.com/6425/20-free-apple-watch-mock-up-templates/

[132] Элегантные мокапы для демонстрации дизайна логотипов (PSD, AI, EPS): http://blogsizzle.com/templates/logo-mockup-templates-free-psd-ai-eps-download/

[133] Набор иконок посвященных окружающей среде (AI, SVG, PNG): http://tympanus.net/codrops/2016/03/11/freebie-environmental-icons/

[134] Набор контурных иконок со стрелками: http://graphicsdrawer.com/line-arrow-icons

[135] Иконки транспорта и путешествий: https://dribbble.com/shots/2582533-Icons-for-getting-around

[136] http://open-foundry.com/: http://open-foundry.com/hot30

[137] Коллекция шрифтов: http://www.webdesignfreebies.net/fonts/collection-of-free-fonts-and-typefaces-5/

[138] Романтический коллиграфический шрифт Olesia: http://www.webdesignerdepot.com/2016/03/free-download-olesia-font/

[139] Коллекция шрифтов за февраль 2016-го: http://webuilddesign.com/discover-36-free-fonts-from-february-2016/

[140] Разработка MIT позволяет ускорить загрузку веб-страниц на 34%: http://itc.ua/news/razrabotka-mit-pozvolyaet-uskorit-zagruzku-veb-stranits-na-34/

[141] Google запустила мобильный сервис по планированию путешествий Google Destinations: https://vc.ru/n/google-destinations

[142] Основатель анонимного форума 4chan устроился на работу в Google, чтобы работать над стриминговыми и фотосервисами: http://itc.ua/news/osnovatel-anonimnogo-foruma-4chan-ustroilsya-na-rabotu-v-google-chtobyi-rabotat-nad-strimingovyimi-i-fotoservisami/

[143] ФБР против Apple: Президент США выступил против абсолютной защиты смартфонов от взлома: http://itc.ua/news/fbr-protiv-apple-prezident-ssha-vyistupil-protiv-absolyutnoy-zashhityi-smartfonov-ot-vzloma/

[144] ИИ Google окончательно покорил го, одержав третью победу над Седолем. Следующая цель — StarCraft: http://itc.ua/news/ii-google-okonchatelno-pokoril-go-oderzhav-tretyu-pobedu-nad-sedolem-sleduyushhaya-tsel-starcraft/

[145] Google запускает проект Chrome Music Lab для создания музыкальных экспериментов прямо в браузере: http://itc.ua/news/google-zapuskaet-proekt-chrome-music-lab-dlya-sozdaniya-muzyikalnyih-eksperimentov-pryamo-v-brauzere/

[146] Новая мировая карта расскажет о количестве регистраций в национальных доменах: http://www.3dnews.ru/929808/

[147] Первый релиз интегрированной среды разработки Eclipse Che: http://www.opennet.ru/opennews/art.shtml?num=44014

[148] Компания Microsoft присоединилась к организации Eclipse Foundation: http://www.opennet.ru/opennews/art.shtml?num=44013

[149] В выдаче Google можно услышать голоса 19 животных: http://www.searchengines.ru/news/archives/v_google_mozhno_poslyshat.html

[150] Google несколькими способами борется с вирусом Зика: http://www.3dnews.ru/929395/

[151] Google переносит свои блоги на новый домен: http://www.searchengines.ru/news/archives/google_perenosi.html

[152] Facebook бедных: http://www.colta.ru/articles/science/10313

[153] Как проходит собеседование в Medium: http://ain.ua/2016/03/09/636305

[154] О том, как эволюционируют Атласы: http://www.computerra.ru/141285/o-tom-kak-evolyutsioniruyut-atlasyi/

[155] Сергей Мурашов (Slack): «Наша капитализация, может, завышена, но не сильно»: http://secretmag.ru/longread/2016/03/01/slack/

[156] Карта мира доменов, переворачивает все вверх ногами: https://defence.ru/article/8095/

[157] Каково это — быть уволенным из Facebook: http://ain.ua/2016/03/12/637691

[158] Почему уход из Microsoft на низкооплачиваемую работу стал для меня глотком свежего воздуха: http://ain.ua/2016/03/10/636909

[159] IT-гиганты объединились в борьбе против кандидата в президенты США Дональда Трампа: http://itc.ua/news/gigantyi-obedinilis-v-borbe-protiv-kandidata-v-prezidentyi-ssha-donalda-trampa/

[160] Как быстро самые популярные в мире программы набирали 1 млрд пользователей — инфографика: http://ain.ua/2016/03/11/637484

[161] Самый полный обзор новых функций Android N: http://lifehacker.ru/2016/03/10/obzor-android-n/

[162] 10 браузерных игр, в которые можно поиграть, пока куда-то ушел начальник: http://gagadget.com/games/21023-10-brauzernyih-igr-v-kotoryie-mozhno-poigrat-poka-kuda-to-ushel-nachalnik/

[163] Бесконечная история блокировщиков рекламы: https://www.smashingmagazine.com/2016/03/never-ending-story-ad-blockers/

[164] Chrome Music Lab – как рождается музыка: https://musiclab.chromeexperiments.com/Experiments

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

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

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

[168] Источник: https://habrahabr.ru/post/279163/

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