Дайджест свежих материалов из мира фронтенда за последнюю неделю №284 (9 — 15 октября 2017)

---

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #23 – Вячеслав Слинько об открытии своей web-студии и руководстве frontend-разработки: https://soundcloud.com/frontend-weekend/fw-23

[8] Ночной фронтенд #7 — REST vs GraphQL : https://soundcloud.com/devschacht/nightly-7

[9] Выпуск #12: «Автостопом по Галактике с Андреем Ситником»: http://spb-frontend.ru/podcast/12/

[10] «intersectionObserver и SVG анимация маски»: https://www.youtube.com/watch?v=Y6dbEGjgjD8

[11] 25 видео с Front-Trends 2017: https://www.youtube.com/playlist?list=PLBevk0eXLOGdZE8N8mQBvrD3Sggcd-b4S

[12] 9 видео с NEJS CONF 2017: https://www.youtube.com/playlist?list=PLzcPHbGhqFeQAcdDNaaCLYeahx_223tzR

[13] Прогрессивная деградация: https://habrahabr.ru/company/htmlacademy/blog/339848/

[14] Релиз HTML5 Boilerplate 6.0: http://htmlcssjavascript.com/html/html5-boilerplate-6-0-released/

[15] Использование CodePen может улучшить ваш процесс разработки фронтенда: https://pineco.de/using-codepen-can-boost-your-front-end-development-workflow/

[16] Фильтрация изображений с помощью Web Audio API: https://medium.com/@rssilva/filtering-images-using-web-audio-api-276555cca6ad

[17] Google придумала для формата AMP более простое название: https://tproger.ru/news/google-amp-instant/

[18] Быстрый старт работы над amp-страницами с новыми шаблонами AMP Start: https://amphtml.wordpress.com/2017/10/13/start-fast-with-new-amp-start-templates/amp/

[19] 6 мифов о Прогрессивных Веб Приложениях (PWA): https://medium.com/samsung-internet-dev/6-myths-of-progressive-web-apps-81e28ca9d2b1

[20] Разработчики WordPress сменили Browserify на Webpack для процесса сборки: http://oddstyle.ru/wordpress-2/novosti-wordpress/razrabotchiki-wordpress-smenili-browserify-na-webpack-dlya-processa-sborki.html

[21] Treo — новый инструмент для аудита сайта, с Lighthouse в облаке, API, интеграцией Github & Slack и кучей настроек: https://medium.com/@alekseykulikov/treo-lighthouse-as-a-service-55cb9b72e8c3

[22] Что нового в DevTools (Chrome 63) : https://developers.google.com/web/updates/2017/10/devtools-release-notes

[23] Usability и Accessibility.: https://medium.com/@myplanet/usability-and-accessibility-213c3185314f

[24] Практическое руководство по улучшению веб-доступности: https://quod.lib.umich.edu/w/weave/12535642.0001.701?view=text;rgn=main

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

[26] Пишем более умный код для анимации: https://css-tricks.com/writing-smarter-animation-code/

[27] Слайдер с эффектами искажения жидкости (WebGL + PixiJS и GSAP): https://tympanus.net/codrops/2017/10/10/liquid-distortion-effects/

[28] Обновление slack.com: https://slack.engineering/rebuilding-slack-com-b124c405c193

[29] FOIT vs FOUT, интерактивное сравнение от Zach Leatherman: https://www.zachleat.com/web/fout-vs-foit/

[30] Как эффективно использовать Warnings и Errors в Sass: https://www.sitepoint.com/warnings-and-errors-in-sass/

[31] Обзор нового reset от Bootstrap 4: Reboot.css: https://scotch.io/tutorials/a-look-at-bootstrap-4s-new-reset-rebootcss

[32] Как писать красивый код на Sass: https://www.sitepoint.com/writing-beautiful-sass/

[33] Эффекты, которые можно применить на изображение с помощью CSS: http://bennettfeely.com/image-effects/

[34] 5 наиболее раздражающих штук в CSS: https://blog.geekyants.com/5-most-annoying-things-with-css-8c356dc24f5e

[35] Ловушка использования @supports в письмах: https://emails.hteumeuleu.com/the-trap-of-using-supports-in-emails-495085641e87

[36] Пастельные тентакли с помощью CSS переменных от Ana Tudor: https://codepen.io/thebabydino/full/EwEJOw/

[37] Connect 4 на чистом CSS: https://codepen.io/finnhvman/full/xXpzVN/

[38] Вы можете зайти довольно далеко в создании слайдера только на HTML и CSS: https://css-tricks.com/can-get-pretty-far-making-slider-just-html-css/

[39] Создание галереи изображений на CSS(с фоллбеком): https://www.chenhuijing.com/blog/building-a-css-only-image-gallery/

[40] Использование преимуществ TypeScript в JavaScript разработке: https://habrahabr.ru/post/340036/

[41] «Строгий» JavaScript: зачем и кому это надо: https://dou.ua/lenta/articles/strict-javascript/

[42] Понимание асинхронного программирования: https://medium.com/devschacht/node-hero-chapter-3-cae7333c7f3d

[43] JavaScript стал лучше, пока я за ним не следил: https://eev.ee/blog/2017/10/07/javascript-got-better-while-i-wasnt-looking/

[44] Challenge: пишем программу на javascript без переменных: https://hackernoon.com/challenge-program-without-variables-javascript-bee89a41455e

[45] Имплементация Service Worker для SPA на WordPress: https://www.smashingmagazine.com/2017/10/service-worker-single-page-application-wordpress-sites/

[46] Лучшая отладка кода с условными брейкпоинтами: https://davidwalsh.name/debugging-conditional-breakpoints

[47] Как я (не) использую jQuery: https://developer.telerik.com/content-types/tutorials/im-not-using-jquery/

[48] JavaScript ES8 и переход на async / await: https://habrahabr.ru/company/ruvds/blog/339770/

[49] Введение в часто используемые особенности ES6. Часть 1: https://habrahabr.ru/post/340002/

[50] Асинхронные стектрейсы: почему await побеждает .then(): https://medium.com/devschacht/%D0%B0%D1%81%D0%B8%D0%BD%D1%85%D1%80%D0%BE%D0%BD%D0%BD%D1%8B%D0%B5-%D1%81%D1%82%D0%B5%D0%BA%D1%82%D1%80%D0%B5%D0%B9%D1%81%D1%8B-%D0%BF%D0%BE%D1%87%D0%B5%D0%BC%D1%83-await-%D0%BF%D0%BE%D0%B1%D0%B5%D0%B6%D0%B4%D0%B0%D0%B5%D1%82-then-6a5e6dad0584

[51] «Exploring ES2016 and ES2017»: http://exploringjs.com/es2016-es2017/

[52] ES6 для начинающих: Промисы: https://hackernoon.com/es6-for-beginners-part-2-ee8a77f7f4c7

[53] Утечки памяти при использовании JavaScript Promise: https://alexn.org/blog/2017/10/11/javascript-promise-leaks-memory.html

[54] Новейшая версия JavaScript имеет только две новые функции. И вот, как они работают: https://medium.freecodecamp.org/why-could-es7-be-called-es2-4c5f094ccef7

[55] Как вы можете использовать стрелочные функции ES6 для облегчения чтения вашего JavaScript кода: https://medium.freecodecamp.org/arrow-functions-in-javascript-2f8bf7df5077

[56] Как работает JS: циклы событий и восход асинхронного программирования плюс пять способов улучшения кода с async/await: https://blog.sessionstack.com/how-javascript-works-event-loop-and-the-rise-of-async-programming-5-ways-to-better-coding-with-2f077c4438b5

[57] Релиз Vue 2.5: https://medium.com/the-vue-point/vue-2-5-released-14bd65bf030b

[58] Почему и как мы мигрировали с AngularJS на VueJS: https://blog.holistics.io/why-and-how-we-migrated-from-angularjs-to-vuejs/

[59] Веб-разработка с VueJS чертовски забавна: https://codeburst.io/web-dev-and-vuejs-are-so-damn-fun-de37c02588fc

[60] Руководство по Vue.js: от jQuery до Vue.js: https://laravel-news.com/vue-js-tutorial-jquery-vue-js

[61] Offline First Masonry Grid на Vue: https://vuejsdevelopers.com/2017/10/09/vue-js-masonary-grid/

[62] React, встроенные функции и производительность: https://habrahabr.ru/company/ruvds/blog/340034/

[63] Настройка Webpack, Babel и React с нуля: https://stanko.github.io/webpack-babel-react-revisited/

[64] Шаблоны React, о которых вы должны знать: http://www.designyourway.net/blog/resources/react-boilerplates/

[65] Ring UI — веб-UI компоненты для React от JetBrains : http://www.jetbrains.org/ring-ui/index.html

[66] Основы Redux: https://medium.com/@nicotsou/tltr-redux-e4fc30f87e4a

[67] React-Sight: https://github.com/React-Sight/React-Sight

[68] Все команды Angular CLI и их назначение: https://dev.nvx.me/angular-cli-ref/

[69] Начало работы с Angular: https://medium.com/@digiman007/%D0%BD%D0%B0%D1%87%D0%B0%D0%BB%D0%BE-%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D1%8B-%D1%81-angular-e206b4b8cc2f

[70] Улучшаем производительность с новой опцией updateOn в Angular v5: https://netbasal.com/boosting-performance-with-the-new-updateon-option-in-angular-v5-18857279ace2

[71] Интересные JavaScript библиотеки созданные в Китае: https://hackernoon.com/interesting-javascript-libraries-born-in-china-d50d1bb81355

[72] Taucharts One: https://blog.taucharts.com/taucharts-one/

[73] ProseMirror 1.0: http://marijnhaverbeke.nl/blog/prosemirror-1.html

[74] smooth-scrollbar: https://github.com/idiotWu/smooth-scrollbar

[75] GitLab получил $20 млн инвестиций в серии C, Мэтт Мулленвег вошел в совет директоров: http://oddstyle.ru/veb-razrabotka/gitlab-poluchil-20-mln-investicij-v-serii-c-mett-mullenveg-voshel-v-sovet-direktorov.html

[76] Как «Яндекс» создавал «Алису»: https://vc.ru/26878-ya-alice

[77] Microsoft признала медленную смерть Windows 10 Mobile: http://gagadget.com/29178-microsoft-priznala-medlennuyu-smert-windows-10-mobile/

[78] «ВКонтакте» 11 лет! Вспомним как менялась социальная сеть: https://tjournal.ru/60397-vkontakte-11-let-vspomnim-kak-menyalas-socialnaya-set

[79] Фейсбук подслушивает вас, чтобы потом подсунуть рекламу.: https://meduza.io/slides/feysbuk-podslushivaet-vas-chtoby-potom-podsunut-reklamu-ssylka-v-pervom-kommentarii

[80] Gutenberg, корабль Тесея: http://oddstyle.ru/wordpress-2/novosti-wordpress/gutenberg-korabl-teseya.html

[81] Microsoft обучит детей и подростков программированию при помощи Minecraft: https://tproger.ru/news/microsoft-minecraft-makecode/

[82] Главный специалист Google по облачным технологиям: «Машинам требуется обрести понимание контекста»: https://itc.ua/blogs/glavnyiy-spetsialist-google-po-oblachnyim-tehnologiyam-mashinam-trebuetsya-vernut-ponimanie-konteksta/

[83] Как Сатья Наделла создал новую Microsoft: https://ain.ua/2017/10/14/kak-satya-nadella-sozdal-novuyu-microsoft

[84] Интервью про стажировку в Facebook: процесс изнутри, советы по подготовке: https://tproger.ru/articles/internship-facebook-2017/

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

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

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

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

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