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

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

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

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

Веб-разработка [1]
CSS [2]
Javascript [3]
Браузеры [4]
Дизайн [5]
Новости [6]

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 2 Веб-разработка

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 25 CSS

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 39 JavaScript

Браузеры

Сайты с интересным дизайном и функциональностью

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 80 Дизайн

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 108 Подборка бесплатных дизайнерских печенек

Дайджест интересных материалов из мира веб-разработки и IT за последнюю неделю №209 (25 апреля — 1 мая 2016) - 119 Новости и Занимательное

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

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

Автор: Zfort Group

Источник [168]


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

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

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

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

[2] CSS: #css

[3] Javascript: #js

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

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

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

[7] Идеальная производительность протокола HTTP: https://habrahabr.ru/company/infopulse/blog/282517/

[8] Подкаст Веб-стандарты, выпуск 13: https://soundcloud.com/web-standards/episode-13

[9] Сборник актуальных англоязычных подкастов на тему веб-разработки: https://github.com/ryanburgess/web-development-podcasts

[10] Подробное введение в методологию БЭМ на toptal: https://www.toptal.com/css/introduction-to-bem-methodology

[11] Видео с Fronteers Spring Conference 2016: https://fronteers.nl/congres/2016-spring/videos

[12] Visual Performance: https://fronteers.nl/congres/2016-spring/videos/visual-performance

[13] Accessible Performance: https://fronteers.nl/congres/2016-spring/videos/accessible-performance

[14] Technical performance: https://fronteers.nl/congres/2016-spring/videos/technical-performance

[15] Видео с секции FrontTalks на DUMP-2016: https://www.youtube.com/playlist?list=PLRdS-n5seLRoWZm8I5onZqU9m8HB_hg1S

[16] Производительный client-side: https://www.youtube.com/watch?v=kmhg-cV5Vkg

[17] Sara Soueidan о том, как переключиться с иконочного шрифта на SVG: https://sarasoueidan.com/blog/icon-fonts-to-svg/

[18] Инструменты и ресурсы для редактирования, конвертации и оптимизации SVG: https://www.smashingmagazine.com/2016/04/tools-and-resources-for-editing-converting-and-optimizing-svgs/

[19] Возможности DOM, о существовании которых вы не знали: http://www.impressivewebs.com/dom-features-you-didnt-know-existed-video-slides/

[20] Подробное описание работы по улучшению показателей сайта в Google PageSpeed: http://code.tutsplus.com/tutorials/hands-on-improving-google-pagespeed--cms-23219

[21] Пятнадцать фундаментальных законов разработки софта: http://www.exceptionnotfound.net/fundamental-laws-of-software-development/

[22] Styleguide: http://devbridge.github.io/Styleguide/

[23] Webpack Boilerplate: https://github.com/geniuscarrier/webpack-boilerplate

[24] Google's V8 JavaScript движок начал поддерживать WebAssembly: http://www.infoworld.com/article/3061953/javascript/googles-v8-javascript-engine-now-backs-webassembly.html

[25] Быстрый совет: как использовать WebAssembly в браузере уже сегодня: http://www.sitepoint.com/try-webassembly-today/

[26] Jam API: https://github.com/gavindinubilo/jam-api

[27] Как работает JPG: https://medium.freecodecamp.com/how-jpg-works-a4dbd2316f35

[28] Подробный обзор стандартов и возможностей видео в вебе: https://www.smashingmagazine.com/2016/04/html5-media-source-extensions-bringing-production-video-web/

[29] Создание “The Aviator”: анимация простой 3D сцены с помощью Three.js: http://tympanus.net/codrops/2016/04/26/the-aviator-animating-basic-3d-scene-threejs/

[30] Про анимацию «fave» в Twitter: https://cssanimation.rocks/twitter-fave/

[31] Анимированная сфера на CSS: http://codepen.io/Mamboleoo/full/oxaXdj/

[32] Создание анимированных маркеров на Google-карте с CSS и JavaScript: http://www.sitepoint.com/animated-google-map-markers-css-javascript/

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

[34] Будущее CSS: https://habrahabr.ru/post/281869/

[35] Игры на чистом CSS со свойством counter-increment: http://css-live.ru/articles/igry-na-chistom-css-so-svojstvom-counter-increment.html

[36] Pure CSS Games with Counter-Increment: http://una.im/css-games/

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

[38] Плиточная раскладка на чистом CSS: http://prgssr.ru/development/plitochnaya-raskladka-na-chistom-css.html

[39] HOW TO: Pure CSS masonry layouts: https://medium.com/@_jh3y/how-to-pure-css-masonry-layouts-a8ede07ba31a#.6p2sw1teb

[40] prgssr.ru: http://prgssr.ru

[41] Типы данных в Sass: http://webtackles.ru/css/data-types-in-sass/

[42] Пересмотренная спецификация подсеток: https://rachelandrew.co.uk/archives/2016/04/25/a-revised-subgrid-specification/

[43] Работа с изображениями в таблицах стилей с помощью PostCSS: https://css-tricks.com/images-in-postcss/

[44] Улучшение качества CSS с помощью PostCSS: http://www.sitepoint.com/improving-the-quality-of-your-css-with-postcss/

[45] Тестирование визуальной регрессии с помощью режимов наложения в CSS: https://css-tricks.com/visual-regression-testing-css-blend-modes/

[46] diffee: http://una.im/diffee/

[47] Как flexbox снимает боль в некоторых местах фронтенд-разработки: http://blog.8thlight.com/rabea-gleissner/2016/04/25/alleviate-frontend-dev-pains-with-flexbox.html

[48] 5 техник Flexbox, о которых вы должны знать: http://tutorialzine.com/2016/04/5-flexbox-techniques-you-need-to-know-about/

[49] Пример использования CSSX: http://krasimir.github.io/cssx/

[50] Двигаемся от HTML Grid Systems к CSS Grid Systems: http://zellwk.com/blog/from-html-grids-to-css-grids/

[51] Быстрый совет: Использование CSS счетчиков со стилями для пронумерованных списков: http://webdesign.tutsplus.com/tutorials/quick-tip-using-css-counters-to-style-incremental-elements--cms-23497

[52] Как делать разметку для карточного дизайна с Semantic UI: http://www.sitepoint.com/how-to-design-rich-card-based-layouts-with-semantic-ui/

[53] Почему Node Sass сломает ваш код и SemVer: https://medium.com/@xzyfer/why-node-sass-broke-your-code-and-semver-1b3e409c57b9

[54] Вышел в свет Node.JS v6.0: https://habrahabr.ru/post/282688/

[55] V8: ES6, ES7, после них: http://v8project.blogspot.be/2016/04/es6-es7-and-beyond.html

[56] Подводные камни при передаче JSON в JavaScript: http://frontender.info/json2js/

[57] ES6: отражение изнутри: http://css-live.ru/articles/es6-otrazhenie-iznutri.html

[58] Транспайлеры в JavaScript: что это такое почему они нам нужны?: https://scotch.io/tutorials/javascript-transpilers-what-they-are-why-we-need-them

[59] Взгляд на ES6 Maps: http://www.barbarianmeetscoding.com/blog/2016/04/27/a-look-at-es6-maps/

[60] Делаем ифреймы отзывчивыми: http://bitsofco.de/iframe-responsive/

[61] Давайте изучать замыкания в JavaScript: https://medium.freecodecamp.com/lets-learn-javascript-closures-66feb44f6a44

[62] Эффективное использование JavaScript замыканий: http://www.ibm.com/developerworks/library/wa-use-javascript-closures-efficiently/index.html

[63] Tessel 2: легкая интеграция интернета вещей и JavaScript: http://www.sitepoint.com/tessel-2-pairing-javascript-and-the-internet-of-things-with-ease/

[64] Как логировать JavaScript-ошибки на клиентской стороне: https://scotch.io/tutorials/how-to-log-client-side-javascript-errors

[65] Турбированный рефакторинг JavaScript с помощью codemods: https://medium.com/airbnb-engineering/turbocharged-javascript-refactoring-with-codemods-b0cae8b326b9

[66] Быть JavaScript разработчиком — это не Candy Land: http://thefullstack.xyz/candy-land-javascript-developer/

[67] Избегаем монокультуры JavaScript: http://www.sitepoint.com/javascript-monoculture/

[68] Прототипное объектно-ориентированное программирование с использованием JavaScript: http://alistapart.com/article/prototypal-object-oriented-programming-using-javascript

[69] JavaScript тестирование: юнит тесты vs функциональные тесты vs интеграционных тесты: http://www.sitepoint.com/javascript-testing-unit-functional-integration/

[70] Сколько существует пользователей npm?: http://blog.npmjs.org/post/143451680695/how-many-npm-users-are-there

[71] Представление yakbak: запись и воспроизведение HTTP взаимодействий в NodeJS: http://code.flickr.net/2016/04/25/introducing-yakbak-record-and-playback-http-interactions-in-nodejs/

[72] Стандартизация стилей JavaScript: http://standardjs.com/

[73] React-компоненты с привкусом БЭМ: http://frontender.info/simple-react-components-generator-with-bem-flavour/

[74] Вы (возможно) не нуждаетесь в JavaScript фреймворке: https://slack-files.com/T03JT4FC2-F151AAF7A-13fe6f98da

[75] Текущие и грядушшие JS фреймворки, за которыми можно следить в 2016-м: http://blog.debugme.eu/javascript-frameworks-libraries-2016/

[76] Три более легкие альтернативы Реакту: Preact, VirtualDom и Deku: http://www.sitepoint.com/react-alternatives-preact-virtualdom-deku/

[77] Зачем использовать React?: https://blog.stamplay.com/why-use-react/

[78] Как сделать хорошую структуру React приложений?: https://medium.com/@alexmngn/how-to-better-organize-your-react-applications-2fd3ea1920f1

[79] AlphaBeta — декларативное сплит-тестирование для React: https://github.com/react-alpha-beta/alphabeta

[80] Курируемая коллекция ссылок на тему React/Redux: https://github.com/markerikson/react-redux-links

[81] Redux Immutable Reducer: https://github.com/zackargyle/redux-immutable-reducer

[82] Ключевые концепции Angular 2: http://victorsavkin.com/post/118372404541/the-core-concepts-of-angular-2

[83] Angular 2 ESNext Starter — стартовый пакет для разработки c ES6/ES7, Babel: https://github.com/blacksonic/angular2-esnext-starter

[84] Использование кросс-платформенных приложений с Angular 2: https://channel9.msdn.com/Events/Build/2016/T627

[85] algebrite — библиотека для решений задач по алгебре, написанная на JavaScript: http://algebrite.org/

[86] grafi.js: http://grafijs.org/

[87] es-search — поиск по структуре кода, используя CSS-подобные селекторы: https://github.com/jdonaghue/es-search

[88] Enumish: https://github.com/liady/enumish

[89] Релиз Firefox 46, перешедший на GTK3+ в Linux: http://www.opennet.ru/opennews/art.shtml?num=44315

[90] Технические детали о Firefox 46 в блоге Марата Таналина: http://tanalin.com/blog/2016/04/firefox-46/

[91] Тестирование Firefox 47-beta и Firefox Developer Edition 48 с поддержкой WebExtensions: http://www.opennet.ru/opennews/art.shtml?num=44354

[92] Microsoft заблокировал все браузеры в Cortana для Windows 10, кроме Edge: http://www.searchengines.ru/news/archives/microsoft_zablo.html

[93] WebKit отказывается от префикса "-webkit-" для экспериментальных возможностей: http://www.opennet.ru/opennews/art.shtml?num=44322

[94] Обновление web-браузера Vivaldi 1.1: http://www.opennet.ru/opennews/art.shtml?num=44317

[95] julie poignot: http://www.juliepoignot.com/

[96] sugar.vision: http://sugar.vision/

[97] misplaced.design: http://misplaced.design/9/

[98] Классные сайты с горизонтальным скроллингом: http://www.dejurka.ru/web-design/horizontal-layout-sites/

[99] Прекрасные дизайны сайтов для церквей: http://www.vandelaydesign.com/best-church-websites/

[100] gameandfishfacts.com: http://www.gameandfishfacts.com/

[101] madebyfew.com: https://madebyfew.com/

[102] Lookbook 2016: http://lookbook.quechua.com/spring-summer-2016/en

[103] bizpoint.com: https://www.bizpoint.com/

[104] Веб-сайты продолжают использовать «тёмные паттерны»: интерфейсы, предназначенные для обмана: https://habrahabr.ru/post/282644/

[105] Шрифт Яндекса — Yandex Sans: https://habrahabr.ru/company/yandex/blog/282534/

[106] Еще о деталях создания Yandex Sans в блоге одного из авторов: https://medium.com/@k00/%D1%88%D1%80%D0%B8%D1%84%D1%82-%D1%8F%D0%BD%D0%B4%D0%B5%D0%BA%D1%81%D0%B0-yandex-sans-1c2ab7dfd537

[107] Я.Субботник для дизайнеров — запись трансляции: https://www.youtube.com/watch?v=Z8PLnCOC91w&feature=youtu.be

[108] Почему дизайн Facebook именно такой и как принимаются решения внутри компании: http://ain.ua/2016/04/30/646446

[109] 5 UX способов начать разработку дизайна правильно: http://sketchapp.me/5-ux-sposobov-nachat-razrabotku-dizajna-pravilno/

[110] Индикаторы прогресса в мобильном UX-дизайне: http://sketchapp.me/indikatory-progressa-v-mobilnom-ux-dizajne/

[111] Кнопки в системах дизайна: 12 советов : https://medium.com/eightshapes-llc/buttons-in-design-systems-eac3acf7e23

[112] Дружественное руководство по цветам в визуализации информации: http://lisacharlotterost.github.io/2016/04/22/Colors-for-DataVis/

[113] Этот интерфейс — это (хорошая) шутка: https://www.smashingmagazine.com/2016/04/this-interface-is-a-good-joke/

[114] 10 недавних инноваций в веб-дизайне для вашего вдохновения: https://speckyboy.com/2016/04/27/innovative-web-design-inspiration/

[115] Анализ эффективности гамбургерного меню в веб-дизайне: https://speckyboy.com/2016/04/25/analyzing-effectiveness-hamburger-menus-web-design/

[116] Мнения экспертов: делает ли плоский дизайн веб скучным?: http://blogs.adobe.com/dreamweaver/2016/04/experts-weigh-in-is-flat-design-making-the-web-boring.html

[117] Может ли дизайн быть «правильным»? : http://www.webdesignerdepot.com/2016/04/can-a-design-be-correct

[118] 125 советов по оптимизации юзабилити вашего сайта: http://www.nickkolenda.com/user-experience

[119] Как разработать эффективный дизайн форм логина: http://designhooks.com/design-effective-login-forms-great-ux/?ref=webdesignernews.com

[120] Пять способов улучшения дизайнерских презентаций: http://blog.invisionapp.com/improve-your-design-presentations/

[121] Почему всплывающие подсказки ужасны и почему их стоит использовать для продуктов: https://medium.com/@_pulkitagrawal/why-tooltips-are-terrible-and-why-you-should-use-them-for-your-product-98b66ba6b038

[122] Пять ошибок, которые стоит избегать при создании дизайна взаимодействия с пользователем: https://medium.com/@ux_in_motion/5-mistakes-to-avoid-when-designing-micro-interactions-a6f638ee6a86

[123] Отладка дизайна: https://bjango.com/articles/designdebugging/

[124] Концепт приложения Facebook Camera: https://blog.prototypr.io/facebook-camera-2f7e962d6b6b

[125] Апрельское обновление Adobe Experience дизайн CC: http://blogs.adobe.com/creativecloud/april-update-of-adobe-experience-design-cc/

[126] Дизайнеры: не давайте возможности слишком просто ошибаться: https://medium.com/interactive-mind/designers-dont-make-it-too-easy-to-mess-up-233e781d15e5

[127] Прототипирование индикатора загрузки используя Principle (mac): https://medium.com/@jonathanbelton/prototyping-a-circular-loading-indicator-using-principle-for-mac-ca4d910726ee

[128] Coca-Cola представила новый дизайн упаковки: http://adage.com/article/cmo-strategy/coca-cola-unveils-global-packaging/303613/

[129] Как сделать лучший дизайн приложений для заметок: https://medium.com/sketch-app-sources/designing-a-better-notes-app-f082bb165c1

[130] Процесс дизайна формы авторизации: https://uxplanet.org/designing-ux-login-form-and-process-8b17167ed5b9

[131] Веб дизайнеры, можете ли вы говорить на языке web-а?: https://www.chenhuijing.com/blog/speak-web/

[132] Апрельский поиск ресурсов: как насчет добавления Fedora в ваше CV?: http://www.sitepoint.com/sourcehunt-design-april/

[133] Как оживить портретные фото, используя Photoshop Actions: http://photography.tutsplus.com/articles/how-to-relight-portraits-in-post-with-these-6-dramatic-photoshop-actions--cms-26439

[134] Новый логотип для Guinness от Design Bridge: http://www.underconsideration.com/brandnew/archives/new_logo_for_guinness_by_design_bridge.php

[135] Color Lisa: http://www.colorlisa.com/

[136] Векторный клипарт, посвященный работе: http://www.dejurka.ru/graphics/work-and-business-icons/

[137] Бесплатные текстуры, подаренные нам природой: http://www.dejurka.ru/graphics/nature-textures-free/

[138] Wyre: много шаблонов для создания карт сайтов: https://pixelbuddha.net/freebie/wyre-web-layout-flowcharts

[139] Набор UI в PSD формате Chat App UI Kit: http://blogsizzle.com/templates/free-chat-app-ui-kit/

[140] Avital: набор UI для мобильных iOS приложений: http://webresourcesdepot.com/free-ui-kit-avital/

[141] Мокапы для демонстрации дизайна: http://www.orphicpixel.com/10-free-high-quality-psd-mockups/

[142] Набор иконок с плоским дизайном на тему дизайна: http://blog.invisionapp.com/free-graphic-design-icons/

[143] Набор иконок на тему гостиниц и СПА: https://www.smashingmagazine.com/2016/04/freebie-hotel-spa-55-icons-png-svg/

[144] Montano — рукописный шрифт: https://www.behance.net/gallery/36297275/Montano-Font-(Free)

[145] Романтичный рукописный шрифт Mightype: http://blogsizzle.com/fonts/mightype-hand-lettering-font-free-download/

[146] Quish — рукописный кистевой шрифт: https://www.behance.net/gallery/36264635/Quish-Typeface

[147] FONTEA: https://fontea.madebysource.com/

[148] Сильный доллар и расходы на привлечение трафика отразились на доходах Alphabet: http://www.3dnews.ru/931871

[149] Twitter заключил партнёрское соглашение с Yelp: http://www.searchengines.ru/news/archives/twitter_zaklyuchil_yelp.html

[150] На хромбуках появятся миллионы Android-приложений: http://gagadget.com/announce/21823-na-hrombukah-poyavyatsya-millionyi-android-prilozhenij/

[151] Средний размер веб-страницы превысил размер установщика оригинального Doom: http://itc.ua/news/sredniy-razmer-veb-stranitsyi-prevyisil-razmer-ustanovshhika-originalnogo-doom/

[152] «Яндекс» запускает модерацию изображений в соцсетях: http://www.cossa.ru/news/244/127513/

[153] GitHub и SourceForge признаны неприемлемыми для размещения кода проектов GNU: http://www.opennet.ru/opennews/art.shtml?num=44313

[154] Mozilla ищет новое пристанище для проекта Thunderbird: http://www.opennet.ru/opennews/art.shtml?num=44333

[155] Google интересовалась покупкой Telegram: http://gagadget.com/business/21907-google-interesovalas-pokupkoj-telegram/

[156] Поколение Minecraft: Как компьютерная игра стала новым Lego для детей всех возрастов: https://vc.ru/p/minecraft-generation

[157] Oculus Rift и HTC Vive: какой шлем виртуальной реальности выбрать: https://vc.ru/p/vive-vs-oculus?from=rss

[158] Топ-5 «безумных» вещей, которые запускали на смарт-часах : http://keddr.com/2016/04/top-5-bezumnyih-veshhey-kotoryie-zapuskali-na-smart-chasah/

[159] SpaceX Илона Маска планирует отправить космический корабль на Марс уже в 2018 году: http://itc.ua/news/spacex-ilona-maska-planiruet-poslat-kosmicheskiy-korabl-na-mars-uzhe-v-2018-godu/

[160] macOS: настало время шагнуть вперед: http://sketchapp.me/macos-nastalo-vremya-shagnut-vpered/

[161] Тотализаторы будущего: киберспорт и криптовалюта: http://gmbox.ru/genre/kibersport/totalizatory-budushchego-kibersport-i-kriptovalyuta

[162] SpaceX отправит корабли Red Dragon на Марс в 2018: http://gagadget.com/science/21895-spacex-otpravit-korabli-red-dragon-na-mars-v-2018/

[163] Обновление Windows 10 появилось в прямом эфире прогноза погоды: http://gagadget.com/announce/21899-obnovlenie-windows-10-poyavilos-v-pryamom-efire-prognoza-pogodyi/

[164] Google собирается улучшать города: http://www.computerra.ru/146528/google-sobiraetsya-uluchshat-goroda/

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

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

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

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