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

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

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

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

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


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

podcast Подкаст «devschacht»: Ночной фронтенд #14 — HolyJS. День 1 [7]
podcast Подкаст «Пятиминутка Angular» #7 — HolyJS, Articles, Angular-RU/Universal/OfflineMoscow, NewHR [8]
podcast Подкаст «Drinkcast», #20 — «Поймать опенсорсера» [9]
video «ALL YOUR HTML» #26: «SVG и WebGL маски» [10]
video 31 видео с KharkivJS #8 2017 [11]
video 3 видео с MinskCSS Meetup #3 [12]
video en 16 видео с Fronteers Conference 2017 [13]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №292 (4 — 10 декабря 2017) - 11 Веб-разработка

Google анонсировал изменения в сканировании AJAX [14]
en Краткие итоги фронтенд-разработки в 2017 [15]
en Делаяем оффлайн поддержку для вашего веб-приложения: часть 1 — настройка [16], часть 2: реализация [17]
en Руководство по подготовке к собеседованию на позицию фронтендера [18]
en Узнайте большое о предупреждениях об уязвимостях [19]
video “Что не так с современным фронтендом” [20], — доклад Максима Корабельского на ThinkPHP

Дайджест свежих материалов из мира фронтенда за последнюю неделю №292 (4 — 10 декабря 2017) - 37 CSS

<i is=«морж»> [42]
en iota [43] — отзывчивый микро-фреймворк для гридов, использующй кастомные свойства CSS
en Несколько идей для чего можно использовать Grid Layout [44]
en Анимация бордеров [45]
en Как сделать ваш HTML отзывчивым с помощью добавления одной строки кода CSS [46]
en Почему CSS Grid лучше, чем Bootstrap для создания лейаутов [47]
en Понимание CSS переменных [48]
en Календарь на CSS Grid [49]
en Пересмотр вариантов реализации вертикального текста с помощью writing-mode [50]
en Отладка CSS Grid Layouts с помощью Firefox Grid Inspector [51]
en normalize.email.css [52] — CSS reset для шаблонов HTML писем

Дайджест свежих материалов из мира фронтенда за последнюю неделю №292 (4 — 10 декабря 2017) - 48 JavaScript

habr Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора [53]
en video Как написать безопасное приложение для JavaScript [54]
en Вот что говорили технические люди о дебюте JavaScript в 1995-м [55]
en Итак, вы изучили JavaScript – что теперь? [56]
en Нейронные сети на JavaScript с помощью deeplearn.js [57]
en В будущем JavaScript будет меньше JavaScript [58]
en Как я создал тепловую карту истории моих посещений с JavaScript и Google Maps [59]
en Поиск неуникального элемента в Javascript [60]

  • Libs & Plugins:
    en Визуализация динамических волновых графиков с помощью wavesurfer.js [85]
    en Github npmgraph [86] — инструмент для визуального изучения NPM модулей и зависимостей
    en Github Animate Plus [87] — библиотека для анимации, сфокусированная на производительности и гибкости разработки
    en Github Muuri [88] — адаптивная, фильтруемая, сортируемая сетка с поддержкой перетаскивания элементов в стиле masonry
    en Github country-iso [89] — возвращает код страны по географическим координатам
    en Reshader [90] — настраиваемая микро-библиотека для получения оттенков цветов

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

Выпуск web-браузера Chrome 63 [91]
Google начала «убивать» приложения Chrome и отключила соответствующий раздел магазина Chrome Web Store на Windows, Mac и Linux [92]
Что нового в Facebook: все изменения ленты новостей за 2017 год [93]
Chrome для Windows будет блокировать внедрение кода сторонними приложениями, которое часто приводит к сбоям [94]
en Петиция о скорейшей эвантазии Internet Explorer-а раз и навсегда [95]
en Детали релиза Safari Technology Preview 45 [96]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №292 (4 — 10 декабря 2017) - 98 Занимательное

Мастер-класс «Почему Стив Джобс любил шрифты» (Алексей Каптерев) [97]
Mozilla и Yahoo обменялись судебными исками [98]
Что влияло на выдачу поисковиков в 2017 году [99]
Что не так с криптокотиками и чем это кончится [100]
В NVIDIA создали нейросеть, реалистично подделывающую видео [101]
Дизайнер изобразила главные мировые события 2017 года на одной картинке [102]
Что случилось с парнем, который купил пиццу за биткоины [103]
en Лучшие книги о программировании, отобранные по многочисленным комментариям в reddit [104]


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

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

Автор: alexzfort

Источник [108]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] Ночной фронтенд #14 — HolyJS. День 1: https://medium.com/devschacht/nightly-14-1866410b58dc

[8] #7 — HolyJS, Articles, Angular-RU/Universal/OfflineMoscow, NewHR: https://soundcloud.com/5minangular/7-holyjs-articles-angular-ruuniversalofflinemoscow-newhr

[9] #20 — «Поймать опенсорсера»: https://spb-frontend.ru/podcast/20

[10] «SVG и WebGL маски»: https://www.youtube.com/watch?v=krSHZddzZPI

[11] 31 видео с KharkivJS #8 2017: https://www.youtube.com/playlist?list=PLnkLrCUX4Qh4O4Zng1XsnO7WkPqK-jKeH

[12] 3 видео с MinskCSS Meetup #3: https://www.youtube.com/playlist?list=PL3uk4LxG9ZzmpcwNhNSpxgexUpyLstooi

[13] 16 видео с Fronteers Conference 2017: https://vimeo.com/channels/fronteers17/videos

[14] Google анонсировал изменения в сканировании AJAX: https://www.searchengines.ru/google-ajax.html

[15] Краткие итоги фронтенд-разработки в 2017: https://levelup.gitconnected.com/a-recap-of-front-end-development-in-2017-7072ce99e727

[16] часть 1 — настройка: https://css-tricks.com/making-your-web-app-work-offline-part-1/

[17] часть 2: реализация: https://css-tricks.com/making-web-app-work-offline-part-2-implementation/

[18] Руководство по подготовке к собеседованию на позицию фронтендера: https://github.com/Jobeir/front-end-interview-preparation-guide

[19] Узнайте большое о предупреждениях об уязвимостях: https://remysharp.com/2017/12/08/learn-more-about-vulnerability-alerts

[20] “Что не так с современным фронтендом”: https://www.youtube.com/watch?v=40J_AGCpYFI

[21] Эволюция «img»: Gif без формата GIF: https://habrahabr.ru/company/edison/blog/343958/

[22] Производительность как восприятие: управление восприятием: https://habrahabr.ru/company/jugru/blog/343922/

[23] Средняя скорость загрузки страницы в 2018 – как, что и зачем измерять. : https://www.machmetrics.com/speed-blog/average-page-load-times-websites-2018/

[24] Производительность — это преимущество: https://develoger.com/performance-is-a-virtue-d6fdf3a547b5

[25] Встречайте Turbo: пакетный менеджер, который в 5 раз быстрее Yarn и NPM и работает в браузере: https://medium.com/@ericsimons/introducing-turbo-5x-faster-than-yarn-npm-and-runs-natively-in-browser-cc2c39715403

[26] wordpressify : http://www.wordpressify.co/

[27] parceljs: https://parceljs.org/

[28] Webpack: мягкое введение в модульный бандлер: https://auth0.com/blog/webpack-a-gentle-introduction/

[29] Настраиваем webpack для любого проекта: https://scotch.io/tutorials/setting-up-webpack-for-any-project

[30] Visual Studio Code добавил интеграцию с Avocode для работы с дизайном прямо в редакторе: https://avocode.com/integrations/visual-studio-code

[31] Пересмотр подхода к созданию доступных ссылок: https://www.filamentgroup.com/lab/a11y-links.html

[32] 5 основных заблуждений на тему веб-доступности: https://www.24a11y.com/2017/5-common-misconceptions-web-accessibility/

[33] Предоставляем альтернативный контент для пользователей скринридеров: https://www.24a11y.com/2017/providing-alternate-content-screen-reader-users/

[34] Руководства по веб-доступности контента для людей, которые их не читали: https://24ways.org/2017/wcag-for-people-who-havent-read-them/

[35] Автоматизация тестов доступности : https://24ways.org/2017/automating-your-accessibility-tests/

[36] Создание инклюзивного веба: почему доступность имеет значение: https://webdesign.tutsplus.com/articles/building-an-inclusive-web-why-accessibility-matters--cms-29773

[37] HTML5 Accessibility: http://html5accessibility.com/

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

[39] Создание анимации на SVG с помощью линий: https://tympanus.net/codrops/2017/12/05/creative-svg-strokes-animation/

[40] Mountains Adventure: https://codepen.io/ainalem/full/pdGxGv/

[41] Анимация заполнения страницы в виде пиксельной волны: https://github.com/vin-ni/PixelWave

[42] <i is=«морж»>: http://css-live.ru/articles/i-ismorzh.html

[43] iota: http://korywakefield.com/iota/

[44] Несколько идей для чего можно использовать Grid Layout: https://hiddedevries.nl/en/blog/2017-12-06-what-to-use-grid-layout-for-some-ideas

[45] Анимация бордеров: https://css-tricks.com/animating-border/

[46] Как сделать ваш HTML отзывчивым с помощью добавления одной строки кода CSS: https://medium.freecodecamp.org/how-to-make-your-html-responsive-by-adding-a-single-line-of-css-2a62de81e431

[47] Почему CSS Grid лучше, чем Bootstrap для создания лейаутов: https://hackernoon.com/how-css-grid-beats-bootstrap-85d5881cf163

[48] Понимание CSS переменных: https://blog.yipl.com.np/understanding-css-variables-74fdb6e7ef54

[49] Календарь на CSS Grid: https://snook.ca/archives/html_and_css/calendar-css-grid

[50] Пересмотр вариантов реализации вертикального текста с помощью writing-mode: https://www.chenhuijing.com/blog/vertical-typesetting-revisited/

[51] Отладка CSS Grid Layouts с помощью Firefox Grid Inspector: https://www.smashingmagazine.com/2017/12/grid-inspector/

[52] normalize.email.css: https://github.com/dudeonthehorse/normalize.email.css

[53] Анализ шести веб-фреймворков: плюсы, минусы и особенности выбора: https://habrahabr.ru/company/ruvds/blog/343894/

[54] Как написать безопасное приложение для JavaScript: https://www.youtube.com/watch?v=BeKMbTSm7x8

[55] Вот что говорили технические люди о дебюте JavaScript в 1995-м: https://medium.com/dailyjs/heres-what-people-in-tech-had-to-say-about-javascript-when-it-debuted-in-1995-a4b81dc05b71

[56] Итак, вы изучили JavaScript – что теперь?: https://christianheilmann.com/2017/12/05/so-you-learned-javascript-what-now/

[57] Нейронные сети на JavaScript с помощью deeplearn.js: https://www.robinwieruch.de/neural-networks-deeplearnjs-javascript/

[58] В будущем JavaScript будет меньше JavaScript: https://codeburst.io/the-future-of-javascript-will-be-less-javascript-cea373eb57fd

[59] Как я создал тепловую карту истории моих посещений с JavaScript и Google Maps: https://codeburst.io/how-i-created-a-heatmap-of-my-location-history-with-javascript-google-maps-972a2d1be240

[60] Поиск неуникального элемента в Javascript: https://hackernoon.com/finding-non-unique-elements-in-javascript-d934e6fd6260

[61] Промисы на примерах из жизни: https://medium.com/web-standards/promises-explained-caee4c9b86d0

[62] await vs return vs return await: https://jakearchibald.com/2017/await-vs-return-vs-return-await/

[63] Как отменить свои промисы: http://blog.bloomca.me/2017/12/04/how-to-cancel-your-promise.html

[64] JavaScript. Ядро: 2-ое издание: http://dmitrysoshnikov.com/ecmascript/javascript-the-core-2nd-edition-rus/

[65] Разные способы понимания this в JavaScript: http://2ality.com/2017/12/alternate-this.html

[66] Руководство фронденд-разработчиков по GraphQL: https://css-tricks.com/front-end-developers-guide-graphql/

[67] Узнайте об Internationalization API в JavaScript: https://netbasal.com/getting-to-know-the-javascript-internationalization-api-cb893b3908e0

[68] Ответы на каверзные вопросы на собеседованиях по JS: https://www.youtube.com/watch?v=MY0UBGX2FtA

[69] Анализ производительности React 16 приложений с помощью инструментов разработчика Chrome: https://habrahabr.ru/company/ruvds/blog/343888/

[70] Как Фейсбук приобрел Инстаграм и почему это привело к открытию исходного кода React.js: https://habrahabr.ru/company/alconost/blog/344106/

[71] Redux: шаг за шагом: https://medium.com/devschacht/redux-step-by-step-e6c42a9b00cd

[72] Быстрое введение в React для разработчиков Angular 2/4+: https://medium.com/@vladimirtolstikov/fast-introduction-to-react-for-angular-2-4-developers-4465e1621cf7

[73] Два новых (бесплатных) React курса на 2.5 часов. 1 — Руководство для новичков по ReactJS, 2 — продвинутые компоненты шаблонов React: https://blog.kentcdodds.com/learn-react-fundamentals-and-advanced-patterns-eac90341c9db

[74] Демистификация подходов к стилизации React: https://blog.yipl.com.np/demystifying-react-styling-approaches-433b84d20337

[75] Как создать простой блог с помощью React и GraphQL: https://www.sitepoint.com/build-a-simple-blog-using-react-graphql-cosmicjs/

[76] Испраление производительности React на листинг страницах Airbnb: https://medium.com/airbnb-engineering/recent-web-performance-fixes-on-airbnb-listing-pages-6cd8d93df6f4

[77] mdbootstrap: https://mdbootstrap.com/react/

[78] jQuery лучше, чем React: https://medium.com/@melissamcewen/jquery-is-better-than-react-cd02dfb026a6

[79] Безжаргонное введение в Webpack для пользователей VueJS: https://vuejsdevelopers.com/2017/12/04/webpack-intro-vue-js/

[80] Что за виртаульный DOM во Vue?: https://medium.com/js-dojo/whats-the-deal-with-vue-s-virtual-dom-3ed4fc0dbb20

[81] Анимация VueJS: https://www.youtube.com/watch?v=Vp37fWKOlV4

[82] 11 библиотек компонентов Angular, которые вы должны знать в 2018: https://blog.bitsrc.io/11-angular-component-libraries-you-should-know-in-2018-e9f9c9d544ff

[83] Angular 5.1 & и другие новинки уже доступны: https://blog.angular.io/angular-5-1-more-now-available-27d372f5eb4e

[84] Почему мы выбрали Angular 2, а не React для нашей работы над энтерпрайзом: https://blog.biznas.io/why-we-chose-angular-2-over-react-for-our-enterprise-software-development-work-392e2c9e39a9

[85] Визуализация динамических волновых графиков с помощью wavesurfer.js: https://davidwalsh.name/wavesurfer

[86] npmgraph: https://github.com/broofa/npmgraph

[87] Animate Plus : https://github.com/bendc/animateplus

[88] Muuri: https://haltu.github.io/muuri/

[89] country-iso: https://github.com/simonepri/country-iso

[90] Reshader: https://www.reshader.com/

[91] Выпуск web-браузера Chrome 63: http://www.opennet.ru/opennews/art.shtml?num=47696

[92] Google начала «убивать» приложения Chrome и отключила соответствующий раздел магазина Chrome Web Store на Windows, Mac и Linux: https://itc.ua/news/google-nachala-ubivat-prilozheniya-chrome-i-otklyuchila-sootvetstvuyushhiy-razdel-magazina-chrome-web-store-na-windows-mac-i-linux/

[93] Что нового в Facebook: все изменения ленты новостей за 2017 год: https://ain.ua/2017/12/07/chto-novogo-v-facebook

[94] Chrome для Windows будет блокировать внедрение кода сторонними приложениями, которое часто приводит к сбоям: https://itc.ua/news/chrome-dlya-windows-budet-blokirovat-vnedrenie-koda-storonnimi-prilozheniyami-kotoroe-chasto-privodit-k-sboyam/

[95] Петиция о скорейшей эвантазии Internet Explorer-а раз и навсегда: https://www.change.org/p/microsoft-kill-internet-explorer-once-and-for-all

[96] Детали релиза Safari Technology Preview 45: https://webkit.org/blog/8039/release-notes-for-safari-technology-preview-45/

[97] Мастер-класс «Почему Стив Джобс любил шрифты» (Алексей Каптерев) : https://habrahabr.ru/company/mailru/blog/344132/

[98] Mozilla и Yahoo обменялись судебными исками: http://www.opennet.ru/opennews/art.shtml?num=47687

[99] Что влияло на выдачу поисковиков в 2017 году: https://vc.ru/30300-chto-vliyalo-na-vydachu-poiskovikov-v-2017-godu

[100] Что не так с криптокотиками и чем это кончится: https://vc.ru/30240-chto-ne-tak-s-kriptokotikami-i-chem-eto-konchitsya

[101] В NVIDIA создали нейросеть, реалистично подделывающую видео: https://tproger.ru/news/nvidia-ai-fake-video/

[102] Дизайнер изобразила главные мировые события 2017 года на одной картинке: https://tjournal.ru/63230-dizayner-izobrazila-glavnye-mirovye-sobytiya-2017-goda-na-odnoy-kartinke

[103] Что случилось с парнем, который купил пиццу за биткоины: https://vc.ru/30273-chto-sluchilos-s-parnem-kotoryy-kupil-piccu-za-bitkoiny

[104] Лучшие книги о программировании, отобранные по многочисленным комментариям в reddit: https://redditfavorites.com/books/programming/

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

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

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

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