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

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

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

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

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

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

• podcast Подкаст «Frontend Weekend» #26 — Владислав Козуля про идеальное собеседование и как избавиться от образа шутника в твиттере [7]
• podcast Подкаст «devschacht»: Ночной фронтенд #9 — Может быть не React? [8]
• podcast Подкаст «Drinkcast», Выпуск #15 — «Юные Бобби» [9]
• podcast video Подкаст «Пятиминутка Angular» #5 — Angular 5, CLI 1.4, meetups (NYC, MIX, Moscow), Acronis on Angular [10]
• podcast video Подкаст «Фронтенд Юность (18+)» : Первый стрим [11]
• video О девушках в программировании и честности [12]. Frontend Юность в гостях у loftblog
• video Запись трансляции WSD, прошедшей в эту субботу в Киеве [13]
• video «ALL YOUR HTML» #21: «SVG кривые и анимация лого css-live.ru на snap.svg» [14]
• en video Шоу «Totally Tooling Tips»: Тестирование доступности [15]

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

• habr Кроссбраузерная вёрстка [16]. Что такое кроссбраузерная вёрстка? Какие есть браузеры и нужен ли пиксель-пёрфект
• habr Пробел в знаниях основ веб-разработки [17]
• habr Как рассказать о современной веб-разработке путешественнику во времени из 2007 года [18]
• Новости Node.js: Выпуск серверной JavaScript-платформы Node.js 9.0 [19], Node.js 8 переходит на долгосрочную поддержку [20], а ветка Node.js 9 становится текущей. Итого, Что же нового в Node.js 9? [21]
• en Будущее производительности — бандлинг [22]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №287 (30 октября — 5 ноября 2017) - 42 CSS

• habr Как прятать [44]. Когда display: none, а когда visibility: hidden
• Понимание вьюпорта WebView в iOS 11 [45]
• en Крис Койер о преимуществе кастомных свойств CSS перед data-атрибутами в разметке [46]
• en Flexbox и Grid, ваши лучшие лейаутные друзья [47]
• en Подробно о создании отзывчивых доступных таблиц [48]
• en Продвинутая стилизация форм средствами CSS [49]
• en О трудностях преодоления проблем глобального CSS [50]
• en Как Sass может сохранить вам кучу времени [51]
• en Священная CSS война, или как выйти за рамки догмы [52]
• en Как лучше струкрутировать CSS по компонентам [53]
• en Как написать TODO приложение на HTML и CSS без использования JavaScript [54]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №287 (30 октября — 5 ноября 2017) - 58 JavaScript

• JS: Настройка окружения [61]. Новый бесплатный курс на Hexlet
• Плавильный котел JavaScript. [62]. Перевод статьи Дэна Абрамова «The melting pot of JavaScript»
• habr Чем хорош (и чем плох) Typescript: опыт UI-разработчиков [63]
• habr JavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг [64]
• 3+ года Ember, 6 месяцев React [65]
• en Лямбда-исчисление с помощью JavaScript [66]. Введение в корни функционального программирования

  • Libs & Plugins:
    • en Github Frappé Charts [84] — простые и современные графики, вдохновленные GitHub, без зависимостей
    • en Github Введение в тепловые карты на Mapbox GL JS [85]
    • en Github handorgel [86] — доступный аккордион, соответствующий стандартам W3C и написанный на ES6
    • en Github Focusingly [87] — JavaScript библиотека для улучшения стилизации фокуса на элементах

Дайджест свежих материалов из мира фронтенда за последнюю неделю №287 (30 октября — 5 ноября 2017) - 88 Браузеры

• Firefox В Firefox 58 появится защита от скрытой идентификации пользователей при помощи Canvas [88]
• IE Сотрудник Microsoft прямо посреди презентации возможностей Azure установил Chrome, поскольку Edge постоянно зависал [89]
• Chrome Google выпустила бета-версию браузера Chrome 63 [90]
• Firefox Firefox получит инструмент анонимности из Tor Browser [91]
• IE en Преставляем новые оптимизации JavaScript, WebAssembly, SharedArrayBuffer, и Atomics в EdgeHTML 16 [92]
• en Технические подробности Safari Technology Preview 43 [93]
• Статистика операционных систем и браузеров за октябрь 2017 года [94]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №287 (30 октября — 5 ноября 2017) - 96 Занимательное

• Комитет IETF одобрил код 103 ответа HTTP [95]
• GitHub запустил форумы сообщества для объединения разработчиков [96]
• Доступно о машинном обучении: распознавание речи [97]
• Студентам MIT удалось обмануть ИИ Google, заставив думать, что черепаха – это винтовка [98]
• Результаты поиска Google больше не зависят от домена верхнего уровня [99]
• AliExpress наняла инженеров из «Яндекса» для обучения сервисов русскому языку [100]
• en Полное руководство по SEO в 2018 [101]


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

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

Автор: alexzfort

Источник [105]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #26 — Владислав Козуля про идеальное собеседование и как избавиться от образа шутника в твиттере: https://soundcloud.com/frontend-weekend/fw-26

[8] Ночной фронтенд #9 — Может быть не React?: https://medium.com/devschacht/nightly-9-fc777d63773a

[9] Выпуск #15 — «Юные Бобби»: https://spb-frontend.ru/podcast/15/

[10] #5 — Angular 5, CLI 1.4, meetups (NYC, MIX, Moscow), Acronis on Angular : https://www.youtube.com/watch?v=4ovCdhiGzTo

[11] : Первый стрим: https://www.youtube.com/watch?v=7UXnvmjmdx0

[12] О девушках в программировании и честности: https://www.youtube.com/watch?v=2qcwUE_SpMA

[13] Запись трансляции WSD, прошедшей в эту субботу в Киеве: https://www.youtube.com/watch?v=HRlSn8qqD-M

[14] «SVG кривые и анимация лого css-live.ru на snap.svg»: https://www.youtube.com/watch?v=2N1MP44OvN8

[15] Тестирование доступности: https://www.youtube.com/watch?v=56zCnwj58e4&index=1&list=PLNYkxOF6rcIB3ci6nwNyLYNU6RDOU3YyL

[16] Кроссбраузерная вёрстка: https://habrahabr.ru/company/htmlacademy/blog/341538/

[17] Пробел в знаниях основ веб-разработки: https://habrahabr.ru/post/341626/

[18] Как рассказать о современной веб-разработке путешественнику во времени из 2007 года: https://habrahabr.ru/company/edison/blog/341686/.com%5Bperevod%5D-kak-rasskazat-o-sovremennoy-v

[19] Выпуск серверной JavaScript-платформы Node.js 9.0: http://www.opennet.ru/opennews/art.shtml?num=47485

[20] Node.js 8 переходит на долгосрочную поддержку: https://medium.com/the-node-js-collection/news-node-js-8-moves-into-long-term-support-and-node-js-9-becomes-the-new-current-release-line-74cf754a10a0

[21] Что же нового в Node.js 9?: https://nemethgergely.com/what-is-new-in-nodejs-9/

[22] Будущее производительности — бандлинг: https://medium.com/@samccone/performance-futures-bundling-281543d9a0d5

[23] service workers в Safari и другие хорошие новости для PWA : https://mobiforge.com/news-comment/safari-service-workers-and-other-pwa-good-news-stories

[24] Дерзкие планы Microsoft по поводу PWA в Windows 10: https://www.thurrott.com/windows/windows-10/142649/microsofts-bold-plan-bring-pwas-windows-10

[25] Часть 1: теория: https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-1-theory-37d7d7647cc7

[26] Часть 2: практика: https://medium.com/@webmaxru/a-new-angular-service-worker-creating-automatic-progressive-web-apps-part-2-practice-3221471269a1

[27] Shadow DOMs: Инкапсуляция в PWA: http://blog.catchpoint.com/2017/11/03/shadow-doms-encapsulation-progressive-web-applications/

[28] The meaning of AMP: https://adactio.com/journal/13035

[29] Список лучших инструментов для web-анимации: https://habrahabr.ru/post/341554/

[30] Chrome Headless: https://medium.com/@frontman/chrome-headless-f6839b6cd4c2

[31] Состоялся релиз SVGO 1.0.0: https://github.com/svg/svgo/releases/tag/v1.0.0

[32] Как дебажить фронтенд: Console: https://blog.pragmatists.com/how-to-debug-front-end-console-3456e4ee5504

[33] Новый уровень Webpack Dashboard: https://medium.com/@wesharehoodies/webpack-dashboard-with-create-react-app-vue-cli-and-custom-configs-49166e1a69de

[34] Дорожная карта разработки VS Code в 2018: https://github.com/Microsoft/vscode/wiki/Roadmap

[35] icongram: https://icongr.am/

[36] Bootstrap 4 Buffet: https://hackerthemes.com/bootstrap-buffet/#!

[37] gifski: https://gif.ski/

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

[39] Создание анимации на базе JavaScript с помощью библиотеки Anime.js. Часть 2: https://tproger.ru/translations/javascript-based-animation-part-2/

[40] Анимация обрезанных фигур: http://varun.ca/clip-path/

[41] 3D Movie Booking App UI на CSS/HTML : https://codepen.io/jcoulterdesign/pen/JOYazv

[42] Эмуляция плавной CSS анимации средствами JavaScript: https://css-tricks.com/emulating-css-timing-functions-javascript/

[43] Прелоадер страницы на CSS в виде Kylo Ren : https://tympanus.net/codrops/2017/10/31/star-wars-kylo-ren-x-pure-css-animation/

[44] Как прятать: https://habrahabr.ru/company/htmlacademy/blog/340224/

[45] Понимание вьюпорта WebView в iOS 11: http://css-live.ru/articles/ponimanie-vyuporta-webview-v-ios-11.html

[46] Крис Койер о преимуществе кастомных свойств CSS перед data-атрибутами в разметке: https://css-tricks.com/css-attr-function-got-nothin-custom-properties/

[47] Flexbox и Grid, ваши лучшие лейаутные друзья: https://aerolab.co/blog/flexbox-grids/

[48] Подробно о создании отзывчивых доступных таблиц: http://adrianroselli.com/2017/11/a-responsive-accessible-table.html

[49] Продвинутая стилизация форм средствами CSS: https://jonathan-harrell.com/advanced-css-form-styling/

[50] О трудностях преодоления проблем глобального CSS: https://restishistory.net/blog/its-hard-to-overcome-the-troubles-of-global-css.html

[51] Как Sass может сохранить вам кучу времени: https://codeburst.io/how-sass-can-save-you-a-lot-of-time-f1198b658012

[52] Священная CSS война, или как выйти за рамки догмы: https://medium.com/gitconnected/the-css-holy-war-how-to-think-beyond-dogma-e2c67692d409

[53] Как лучше струкрутировать CSS по компонентам: https://restishistory.net/blog/how-to-structure-your-css-better-as-components.html

[54] Как написать TODO приложение на HTML и CSS без использования JavaScript: http://www.mattzeunert.com/2017/10/30/javascript-free-todo-app.html

[55] Типографика и современный CSS: https://habrahabr.ru/company/wargaming/blog/277933/

[56] MyFonts представила мобильное приложение для распознавания шрифтов: https://tproger.ru/news/whatthefont/

[57] CSS font-display: будущее рендера шрифтов в вебе: https://www.sitepoint.com/css-font-display-future-font-rendering-web

[58] Управление загрузкой шрифтов больше не является проблемой: https://www.zachleat.com/web/font-loading-classes/

[59] Веб-типографика: создаем таблицы для того, чтобы их читать, а не рассматривать: https://alistapart.com/article/web-typography-tables

[60] Тесты размеров вариативных шрифтов: http://stuff.djr.com/gimlet-vf-size-test/

[61] JS: Настройка окружения: https://ru.hexlet.io/courses/js-setup-environment

[62] Плавильный котел JavaScript.: https://medium.com/%D1%84%D1%80%D0%BE%D0%BD%D1%82%D0%B5%D0%BD%D0%B4-%D1%8E%D0%BD%D0%BE%D1%81%D1%82%D1%8C/melting-pot-of-javascript-f52624a76c68

[63] Чем хорош (и чем плох) Typescript: опыт UI-разработчиков: https://habrahabr.ru/company/sberbank/blog/341278/

[64] JavaScript, Node, Puppeteer: автоматизация Chrome и веб-скрапинг: https://habrahabr.ru/company/ruvds/blog/341348/

[65] 3+ года Ember, 6 месяцев React: https://medium.com/devschacht/filippos-vasilakis-3-years-of-ember-6-months-of-react-973b9c1acb61

[66] Лямбда-исчисление с помощью JavaScript: https://medium.com/@ahlechandre/lambda-calculus-with-javascript-897f7e81f259

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

[68] Рефакторинг старой и сломанной библиотеки с использованием async/await c TDD: https://medium.com/dailyjs/refactoring-an-old-and-broken-library-to-using-async-await-with-tdd-90157de268a2

[69] Выпущено обновление JS-фреймворка Angular 5.0.0: https://tproger.ru/news/angular-5-0-0/

[70] Angular v5 вышел, ознакомьтесь с новыми функциями, изменениями и улучшениями: https://hackernoon.com/angular-v5-is-out-here-is-how-to-explore-it-eace34fcae8a

[71] 18 советов от keycdn по улучшению производительности Angular: https://www.keycdn.com/blog/angular-performance/

[72] Эти 5 статей помогут вам стать экспертом Angular Change Detection: https://blog.angularindepth.com/these-5-articles-will-make-you-an-angular-change-detection-expert-ed530d28930

[73] Демистификация методов жизненного цикла Vue: https://scotch.io/tutorials/demystifying-vue-lifecycle-methods

[74] VueJs: введение в Vuex: https://medium.com/frontend-fun/vuejs-introduction-to-vuex-82bf35be5130

[75] Интеграция React и Vue компонентов в одном приложении: https://x-team.com/blog/react-vue-component-integration/

[76] Создание Vue приложения с Nuxt.js и Server-Side рендерингом: https://scotch.io/tutorials/build-a-server-side-rendered-vue-app-with-nuxtjs

[77] Создание игры 2048 на Vue.js: https://gist.github.com/marshallshen/b22ae088272268e65fbdea971047b9fa

[78] Правила жизни с Редаксом: https://medium.com/%D1%80%D0%BE%D0%B4%D0%B8%D0%BE%D0%BD%D0%BE%D0%B2-%D0%B8-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B0/%D0%BF%D1%80%D0%B0%D0%B2%D0%B8%D0%BB%D0%B0-%D0%B6%D0%B8%D0%B7%D0%BD%D0%B8-%D1%81-%D1%80%D0%B5%D0%B4%D0%B0%D0%BA%D1%81%D0%BE%D0%BC-6a95feefcf29

[79] История React: как покупка Инстаграмма Фейсбуком привела к опенсорсингу React.js: https://stackshare.io/posts/the-react-story

[80] Netflix ускорился в два раза, отказавшись от client-side React: https://jakearchibald.com/2017/netflix-and-react/

[81] Как работает JavaScript: глубокое погружение в WebSockets и HTTP/2 с SSE + как выбрать правильный путь: https://blog.sessionstack.com/how-javascript-works-deep-dive-into-websockets-and-http-2-with-sse-how-to-pick-the-right-path-584e6b8e3bf7

[82] Шаблоны компонентов React: https://medium.com/gitconnected/react-component-patterns-ab1f09be2c82

[83] svgr: https://github.com/smooth-code/svgr

[84] Frappé Charts: https://frappe.github.io/charts/

[85] Введение в тепловые карты на Mapbox GL JS: https://blog.mapbox.com/introducing-heatmaps-in-mapbox-gl-js-71355ada9e6c

[86] handorgel: https://github.com/oncode/handorgel

[87] Focusingly: https://www.focusingly.net/

[88] В Firefox 58 появится защита от скрытой идентификации пользователей при помощи Canvas: http://www.opennet.ru/opennews/art.shtml?num=47475

[89] Сотрудник Microsoft прямо посреди презентации возможностей Azure установил Chrome, поскольку Edge постоянно зависал: https://itc.ua/blogs/sotrudnik-microsoft-pryamo-posredi-prezentatsii-vozmozhnostey-azure-ustanovil-chrome-poskolku-edge-postoyanno-zavisal/

[90] Google выпустила бета-версию браузера Chrome 63: https://tproger.ru/news/chrome-63-beta/

[91] Firefox получит инструмент анонимности из Tor Browser: https://lifehacker.ru/2017/11/02/firefox-canvas-fingerprint/

[92] Преставляем новые оптимизации JavaScript, WebAssembly, SharedArrayBuffer, и Atomics в EdgeHTML 16: https://blogs.windows.com/msedgedev/2017/10/31/optimizations-webassembly-sharedarraybuffer-atomics-edgehtml-16/

[93] Технические подробности Safari Technology Preview 43: https://webkit.org/blog/8016/release-notes-for-safari-technology-preview-43/

[94] Статистика операционных систем и браузеров за октябрь 2017 года: http://microsoftportal.net/windows-9/8895-statistika-operacionnyh-sistem-i-brauzerov-za-oktyabr-2017-goda.html

[95] Комитет IETF одобрил код 103 ответа HTTP: https://tproger.ru/news/ietf-new-code-103/

[96] GitHub запустил форумы сообщества для объединения разработчиков: http://oddstyle.ru/veb-razrabotka/github-zapustil-forumy-soobshhestva-dlya-obedineniya-razrabotchikov.html

[97] Доступно о машинном обучении: распознавание речи: https://tproger.ru/articles/ai-in-speech-recognition/

[98] Студентам MIT удалось обмануть ИИ Google, заставив думать, что черепаха – это винтовка: https://itc.ua/news/studentam-mit-udalos-obmanut-ii-google-zastaviv-dumat-chto-cherepaha-eto-vintovka/

[99] Результаты поиска Google больше не зависят от домена верхнего уровня: https://itc.ua/blogs/rezultatyi-poiska-google-bolshe-ne-zavisyat-ot-domena-verhnego-urovnya/

[100] AliExpress наняла инженеров из «Яндекса» для обучения сервисов русскому языку: https://vc.ru/28381-aliexpress-nanyala-inzhenerov-iz-yandeksa-dlya-obucheniya-servisov-russkomu-yazyku

[101] Полное руководство по SEO в 2018: https://backlinko.com/seo-this-year

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

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

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

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