Дайджест свежих материалов из мира фронтенда за последнюю неделю №313 (30 апреля — 6 мая 2018)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №313 (30 апреля — 6 мая 2018) - 1

Libs & Plugins:
• ReLaXed ^[75] — инструмент, который интерактивно создает PDF с помощью HTML или Pug
• is-google ^[76] — верификация того, что запрос приходит от краулеров Google
• a11y-dialog ^[77] — легкий (1.3Kb) гибкий скрипт для создания доступных диалоговых окон
• selection.js ^[78] — простая и легковесная библиотека для реализации визуального выделения DOM. No jQuery
• ow ^[79] — валидация аргументов функция описанная по-человечески

Браузеры

• В Firefox 60 появится реклама на стартовой странице ^[80]
• Google Chrome научился блокировать автовоспроизведение видеоконтента ^[81]
• Бета-версия Google Chrome 67 получила новые API для работы с VR ^[82]
• Мнение: пришло время вновь попробовать Firefox ^[83]
• Google добавила поддержку своего платёжного сервиса во все браузеры ^[84]

Занимательное

• Oculus заменила фреймворк React VR на React 360 ^[85]
• Вышла стабильная версия графического формата WebP ^[86]
• База знаний для программистов Stack Overflow запустила сервис для обсуждения вопросов разработки внутри компаний ^[87]
• Выявлена попытка включения бэкдора в популярный NPM-пакет mailparser ^[88]
• Google открыл gVisor, гибрид системы виртуализации и контейнеров ^[89]
• GitHub и Twitter по ошибке сохраняли открытые пароли в логе ^[90]
• Instagram и WhatsApp представили групповые видеозвонки ^[91]
• Новый проект от OpenAI научил ИИ вести дебаты между собой ^[92]
• Почему будущее без паролей — уже близко (но не совсем) ^[93]
• Статистика Steam: рост доли CPU и GPU AMD, реванш Windows 10 ^[94]
• Раскрыты планы Intel и AMD по обновлению настольных платформ ^[95]

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

Дайджест за прошлую неделю ^[96].
Материал подготовили dersmoll ^[97] и alekskorovin ^[98].

Автор: alexzfort

Источник ^[99]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #51 – Владимир Новик о работе независимого консультанта, переезде в Израиль и книге про React Native: https://soundcloud.com/frontend-weekend/fw-51

[8] Ночной фронтенд #32: Ограничения, которые мы накладываем на код: https://soundcloud.com/devschacht/nightly-32

[9] #46 Печальное состояние экосистемы JavaScript 2: https://soundcloud.com/frontend_u/e46

[10] «Vue.js анимации + 100 тысяч частиц на WebGL»: https://soundcloud.com/csssr/news512_04

[11] «Новости 512 — Выпуск №4 (30.4 — 06.05)»: https://www.youtube.com/watch?v=XjZ9iu_Z9G8

[12] Как мы построили конвейер по подготовке фронтендеров — Александр Першин, HTML Academy: https://www.youtube.com/watch?v=zfvBx9PQb9I

[13] Задачи с собеседований: https://habr.com/post/351874/

[14] Что поправить в верстке перед выпуском в продакшн?: http://arinagavrilova.ru/skills-up/frontend/chto-popravit-v-verstke-pered-vypuskom-v-prodakshn/

[15] Четыре вопроса про БЭМ: https://igoradamenko.com/blog/all/four-questions-about-bem/

[16] Хочешь быть топ-разработчиком? Ты должен создавать вещи. Вот список того, с чего можно начать: https://medium.freecodecamp.org/the-secret-to-being-a-top-developer-is-building-things-d3d058e4e472

[17] Создание serverless контактной формы для вашего статического сайта: https://www.smashingmagazine.com/2018/05/building-serverless-contact-form-static-website/

[18] Готова ли к использованию технология ServiceWorkder? Да.: https://jakearchibald.github.io/isserviceworkerready/index.html#moar

[19] Дружественные для мобильных устройств поля для ввода номеров с `inputmode`: https://css-tricks.com/finger-friendly-numerical-inputs-with-inputmode/

[20] Основные руководства по прогрессивным веб приложениям на MDN Web Docs: https://hacks.mozilla.org/2018/05/progressive-web-apps-core-guides-on-mdn-web-docs/

[21] Bootstrap 4.1.1: https://blog.getbootstrap.com/2018/04/30/bootstrap-4-1-1/

[22] HTML5 Boilerplate 6.1.0: http://htmlcssjavascript.com/web/html5-boilerplate-6-1-0-released/

[23] Dojo 2.0: https://dojo.io/blog/2018/05/02/2018-05-02-Dojo2-0-0-release/

[24] Как решить проблемы Webpack. Практический случай: https://medium.com/@riittagirl/how-to-solve-webpack-problems-the-practical-case-79fb676417f4

[25] Работа с DevTools Console и Console API: https://flaviocopes.com/console-api/

[26] Инспекция анимаций в Chrome DevTools: https://css-tricks.com/inspecting-animations-in-devtools/

[27] Обзор Visual Studio Code для разработчиков фронтенда: https://medium.freecodecamp.org/an-overview-of-visual-studio-code-for-front-end-developers-49a4aa0771fb

[28] Написание доступного веб контента: https://seesparkbox.com/foundry/writing_accessible_web_content

[29] Подборка блогов, посвященных Accessibility: https://www.digitala11y.com/accessibility-blogs/

[30] 18 доступных букмарклетов, которые можно использовать для тестирования A11Y : https://www.digitala11y.com/accessibility-bookmarklets-testing/

[31] Знайте вашу ARIA: 'Hidden' vs 'None': http://www.scottohara.me/blog/2018/05/05/hidden-vs-none.html

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

[33] Художница создала картину вручную с помощью LESS: https://tproger.ru/news/diana-smith-paint-with-css/

[34] Морфинг кнопки Play в видеоплеере с помощью GSAP : https://codepen.io/asistapl/full/WzaPPj/

[35] curtains.js: https://www.martin-laxenaire.fr/libs/curtainsjs/index.html

[36] Отзывчивый текст с маской и видео на фоне: https://css-tricks.com/responsive-knockout-text-with-looping-video/

[37] Идеи обратной связи с помощью прогрессивных эффектов наведения: https://tympanus.net/codrops/2018/05/02/ideas-for-proximity-feedback-with-progressive-hover-effects/

[38] Что умеют и чего не умеют CSS Custom Properties.: https://medium.com/@lucyhackwrench/%D1%87%D1%82%D0%BE-%D1%83%D0%BC%D0%B5%D1%8E%D1%82-%D0%B8-%D1%87%D0%B5%D0%B3%D0%BE-%D0%BD%D0%B5-%D1%83%D0%BC%D0%B5%D1%8E%D1%82-css-custom-properties-18949a22ee81

[39] Ещё одна коллекция интересных фактов про CSS-гриды (CSS Grid Layout): http://css-live.ru/articles/eshhyo-odna-kollekciya-interesnyx-faktov-pro-css-gridy-css-grid-layout.html

[40] Руководство по состоянию стилей для печати в 2018: https://www.smashingmagazine.com/2018/05/print-stylesheets-in-2018/

[41] Display: Contents — это не CSS Reset: http://adrianroselli.com/2018/05/display-contents-is-not-a-css-reset.html

[42] Переменные окружения в CSS: https://css-tricks.com/css-environment-variables/

[43] Решено с помощью CSS! Dropdown Menus: https://css-tricks.com/solved-with-css-dropdown-menus/

[44] cssgr.id: https://cssgr.id/

[45] Создание уникальных веб-впечатлений с помощью кастомных CSS-курсоров: https://codeburst.io/create-unique-web-experiences-with-css-custom-cursors-47f07dd8b0b3

[46] Быстрое введение в CSS анимацию: https://medium.freecodecamp.org/a-quick-introduction-to-css-animations-a1655375ec90

[47] CSS Grid: больше гибкости с minmax(): https://codepen.io/michellebarker/post/css-grid-more-flexibility-with-minmax

[48] Странный, но действенный трюк для отладки CSS: https://medium.freecodecamp.org/heres-my-favorite-weird-trick-to-debug-css-88529aa5a6a3

[49] Мощь Flex-Grow: https://hackernoon.com/the-power-of-flex-grow-d8ea61ccf16e

[50] Отвратительно читаемый отзывчивый текст с viewport единицами: https://www.zachleat.com/web/obnoxiously-readable/

[51] Как я писал плагины для React, Vue и Angular: https://habr.com/post/354734/

[52] 9 полезных приёмов для тех, кто программирует на JavaScript: https://habr.com/company/ruvds/blog/354676/

[53] Вы не знаете JS: Асинхронность и Производительность: https://medium.com/devschacht/devschacht-you-dont-know-js-async-and-performance-generators-2eecd45b88f5

[54] Руководство по регулярным выражениям в JavaScript: https://tuhub.ru/frontend/js-regexp

[55] Многоликий this в JS: http://jem-space.ru/mnogholikii-this/

[56] Дорожная карта Ember в 2018: https://www.emberjs.com/blog/2018/05/02/ember-2018-roadmap-call-for-posts.html

[57] Dojo 2: что предлагает новая версия: https://www.infoworld.com/article/3269420/javascript/dojo-2-what-the-javascript-toolkits-new-version-offers.html

[58] RxJS 6: Что нового и что изменилось?: https://auth0.com/blog/whats-new-in-rxjs-6/

[59] BigInt: целые числа произвольной точности в JavaScript: https://developers.google.com/web/updates/2018/05/bigint

[60] Захват и отчёт JS ошибок с window.onerror: https://www.sitepoint.com/capture-and-report-javascript-errors-with-window-onerror/

[61] Angular 6 уже доступен: https://blog.angular.io/version-6-of-angular-now-available-cc56b0efa7a4

[62] Что нового в Angular 6: https://www.telerik.com/blogs/whats-new-in-angular-6

[63] Использование Angular NgModules для переиспользуемого кода и прочего: https://www.sitepoint.com/angular-ngmodules/

[64] Определение изменения в Angular: все что вам нужно знать: https://www.sitepoint.com/change-detection-angular/

[65] Полное руководство по стратегии определения изменений Angular onPush: https://netbasal.com/a-comprehensive-guide-to-angular-onpush-change-detection-strategy-5bac493074a4

[66] My Experience: Learning Angular 5 as a long time react developer: https://medium.com/@nitinj/my-experience-learning-angular-5-as-a-long-time-react-developer-584c87d4987a

[67] Введение в рендер динамических списков во Vue.js: https://medium.freecodecamp.org/an-introduction-to-dynamic-list-rendering-in-vue-js-a70eea3e321

[68] Почему следует использовать Vue.js при работе с Laravel?: https://blog.pusher.com/why-vuejs-laravel/

[69] Лучший бекенд для приложений на VueJS: https://vuejsdevelopers.com/2018/05/07/vue-js-backends-express-laravel-firebase-wordpress-django-rails/

[70] Как победить Webpack 4 и создать клевое приложение на React: https://medium.freecodecamp.org/how-to-conquer-webpack-4-and-build-a-sweet-react-app-236d721e6745

[71] Создание оптимистических пользовательских интерфейсов в React: https://blog.bitsrc.io/building-an-optimistic-user-interface-in-react-b943656e75e3

[72] Вот почему нам нужны bind event handlers в Class Components в React: https://medium.freecodecamp.org/this-is-why-we-need-to-bind-event-handlers-in-class-components-in-react-f7ea1a6f93eb

[73] Полный урок по React с Apollo и GraphQL: https://www.robinwieruch.de/react-graphql-apollo-tutorial/

[74] Создание форм на React — все что вам нужно знать: https://www.codementor.io/blizzerand/building-forms-using-react-everything-you-need-to-know-iz3eyoq4y

[75] ReLaXed: https://github.com/RelaxedJS/ReLaXed

[76] is-google: https://github.com/roccomuso/is-google

[77] a11y-dialog: http://edenspiekermann.github.io/a11y-dialog/#introduction

[78] selection.js: https://simonwep.github.io/selection/

[79] ow: https://github.com/sindresorhus/ow

[80] В Firefox 60 появится реклама на стартовой странице: https://www.opennet.ru/opennews/art.shtml?num=48525

[81] Google Chrome научился блокировать автовоспроизведение видеоконтента: https://tproger.ru/news/chrome-mutes-autoplaying/

[82] Бета-версия Google Chrome 67 получила новые API для работы с VR: https://tproger.ru/news/google-chrome-67-beta-vr-api/

[83] Мнение: пришло время вновь попробовать Firefox: https://ain.ua/2018/04/30/poproboval-firefox

[84] Google добавила поддержку своего платёжного сервиса во все браузеры: https://tjournal.ru/70151-google-dobavila-podderzhku-svoego-platezhnogo-servisa-vo-vse-brauzery

[85] Oculus заменила фреймворк React VR на React 360: https://tproger.ru/news/react-vr-to-react-360/

[86] Вышла стабильная версия графического формата WebP: https://tproger.ru/news/webp-v1-0/

[87] База знаний для программистов Stack Overflow запустила сервис для обсуждения вопросов разработки внутри компаний: https://vc.ru/37448-baza-znaniy-dlya-programmistov-stack-overflow-zapustila-servis-dlya-obsuzhdeniya-voprosov-razrabotki-vnutri-kompaniy

[88] Выявлена попытка включения бэкдора в популярный NPM-пакет mailparser: http://www.opennet.ru/opennews/art.shtml?num=48544

[89] Google открыл gVisor, гибрид системы виртуализации и контейнеров: http://www.opennet.ru/opennews/art.shtml?num=48538

[90] GitHub и Twitter по ошибке сохраняли открытые пароли в логе: http://www.opennet.ru/opennews/art.shtml?num=48527

[91] Instagram и WhatsApp представили групповые видеозвонки: https://vc.ru/37353-instagram-i-whatsapp-predstavili-gruppovye-videozvonki

[92] Новый проект от OpenAI научил ИИ вести дебаты между собой: https://tproger.ru/news/openai-debate-game-ai/

[93] Почему будущее без паролей — уже близко (но не совсем): https://ain.ua/2018/05/05/bez-paroley

[94] Статистика Steam: рост доли CPU и GPU AMD, реванш Windows 10: https://3dnews.ru/969235/#5aeafa3fb4182e037f8b456b

[95] Раскрыты планы Intel и AMD по обновлению настольных платформ: https://3dnews.ru/969247/#5aeb52f2b4182e0d128b4568

[96] Дайджест за прошлую неделю: https://habr.com/company/zfort/blog/354672/

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

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

[99] Источник: https://habr.com/post/354988/?utm_source=habrahabr&utm_medium=rss&utm_campaign=354988

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