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

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

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

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


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

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 2 Медиа

• podcast Подкаст «Веб-стандарты», Выпуск №129: Вирус в npm, зачем Feature Policy, случай в Atom, мёртвый код, разделение ответственности, стрелка или пальчик [7]
• podcast Подкаст «Frontend Weekend»: #62 – Андрей Ситник о переезде в Нью-Йорк, путешествиях и порно в Твиттере [8], #61 – Андрей Мелихов о работе в Яндекс.Деньгах, Ночном фронтенде и захвате власти в devSchacht [9]
• podcast Подкаст «Девшахта/Ночной фронтенд»: #42 — Автоматизация CI/CD [10], #41 — В поисках хорошего code review [11]
• podcast Подкаст «Фронтенд Юность (18+)» #56 Токсичное сообщество [12]
• podcast Подкаст «CSSSR» Новости 512 — Выпуск №15 (16.07 — 22.07) [13]

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 8 Веб-разработка

• habr О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую [14]
• Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень [15]
• en Веб-компоненты в 2018 [16]
• en Святой грааль переиспользуемых компонентов: Custom Elements, Shadow DOM и NPM [17]
• en Подробности создания веб-интерфейса Google Photos [18]
• en Анатомия вредоносных скриптов: как веб-сайт может завладеть вашим браузером [19]
• en Доступность для команд [20] — быстрое руководство по внедрению практик доступности и инклюзивности в процесс разработки вашей команды
• en Будущее WebAssembly — взгляд на планируемые функциональности и предложения [21]
• en Анимация SVG с помощью SVGator [22]

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 26 CSS

• habr Справа налево. Как перевернуть интерфейс сайта под RTL [32]
• habr API CSS Paint [33]
• CSS: новый вид JavaScript [34]
• Химия CSS-гридов [35]
• en Полное иллюстрированное руководство по Flexbox [36]
• en 9 самых больших ошибок с CSS Grid [37]
• en DSS [38] — финальный релиз первой беты Deterministic Style Sheets, аналога CSS модулей с автоматической компиляцией в атомарные CSS классы для маленьких бандлов
• en Странные штуки, которые могут делать вариативные шрифты [39]
• en Как исправить проблемы CSS лейаутов? [40]
• en Полезные штуки, которые вы можете делать с CSS pointer events [41]
• en Стоит ли мне использовать IE версию Grid Layout в 2018? [42]
• en Я попробовал функциональный CSS и он типа отстой [43]
• en Как стать лучше в написании CSS [44]

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 38 JavaScript

• habr Сравнение JS-фреймворков: React, Vue и Hyperapp [45], Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp» [46]
• habr JavaScript ES6: слабые стороны [47]
• habr Метапрограммирование в JavaScript [48]
• habr 15 HTML-методов элементов, о которых вы, вероятно, никогда не слышали [49]
• Матрица компетенций Fullstack JS разработчика [50]
• en Введение в JavaScript MutationObserver API [51]
• en Javascript ES6 — на самом деле вам не нужно изучать генераторы [52]
• en Анонс TypeScript 3.0 RC [53]

  • Libs & Plugins:
    • en Как создать современную панель управления на NVD3.js [68]
    • en coolHue [69] — инструмент для подбора градиентов и создания своих палитр
    • en draxt [70] — NodeList-like/jQuery-like package для File System (node.js)
    • en Popbox.js [71] — небольшой плагин для создания наслаивающихся модальных окон. Плагин без зависимостей и полностью настраивается
    • en Pushbar.js [72] — небольшой плагин для создания выезжающих панелей в веб-приложениях.

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 65 Браузеры

• В ночные сборки Firefox добавлен WebRender, использующий GPU для отрисовки web-страниц [73]
• В рамках проекта Browsh развивается консольный браузер на базе Firefox [74]
• Началось формирование ASan-сборок Firefox для выявления проблем при работе с памятью [75]
• en Три новые удобные функции в Chrome DevTools [76]

Дайджест свежих материалов из мира фронтенда за последние две недели №323 (8 — 22 июля 2018) - 67 Занимательное

• Так много знаний, так мало времени [77]
• Быть многопрофильным специалистом, но рекламировать себя как специалиста в одной области [78]
• Быстрота Linux на Windows 10 [79]. Ода bash-терминалу в Windows Subsystem for Linux.
• 6 подходов к приоритизации задач. Опыт Readdle, MacPaw, Grammarly и EduNav [80]
• Google, Microsoft, Twitter и Facebook основали проект по обеспечению переносимости данных [81]
• В популярный NPM-модуль внедрено вредоносное ПО, копирующее параметры аутентификации [82]
• Алгоритмы спасают людей: как алгоритм подбора пар сохраняет жизни [83]
• Intel рассказала о 10 своих главных достижениях за 50 лет [84]
• Check Point представил обзор киберугроз за первое полугодие 2018 года: двойной рост криптомайнеров и смена вектора атак на облака [85]
• AMD, Microsoft, NVIDIA, Oculus и Valve разрабатывают стандарт VirtualLink, который позволит подключать VR-шлемы к ПК с помощью одного USB-C кабеля [86]
• Тёмный паттерн: как веб-сервисы заставляют пользователей ошибаться в своих действиях [87]
• video Как незрячий пользуется iPhone, MacBook и Apple Watch [88]


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

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

Автор: alexzfort

Источник [92]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] Выпуск №129: Вирус в npm, зачем Feature Policy, случай в Atom, мёртвый код, разделение ответственности, стрелка или пальчик: https://medium.com/web-standards/episode-129-181a9ff222ae

[8] #62 – Андрей Ситник о переезде в Нью-Йорк, путешествиях и порно в Твиттере : https://soundcloud.com/frontend-weekend/fw-62

[9] #61 – Андрей Мелихов о работе в Яндекс.Деньгах, Ночном фронтенде и захвате власти в devSchacht: https://soundcloud.com/frontend-weekend/fw-61

[10] #42 — Автоматизация CI/CD: https://medium.com/devschacht/nightly-42-d74a87351f0b

[11] #41 — В поисках хорошего code review: https://soundcloud.com/devschacht/nightly-41

[12] #56 Токсичное сообщество: https://soundcloud.com/frontend_u/e56

[13] Новости 512 — Выпуск №15 (16.07 — 22.07): https://soundcloud.com/csssr/novosti-512-vypusk-15-1607-2207

[14] О чем должен помнить веб-разработчик, чтобы сделать всё по SEO-феншую: https://habr.com/post/417503/

[15] Расширения для Visual Studio Code, которые поднимут процесс разработки на новый уровень: https://medium.com/nuances-of-programming/%D1%80%D0%B0%D1%81%D1%88%D0%B8%D1%80%D0%B5%D0%BD%D0%B8%D1%8F-%D0%B4%D0%BB%D1%8F-visual-studio-code-%D0%BA%D0%BE%D1%82%D0%BE%D1%80%D1%8B%D0%B5-%D0%BF%D0%BE%D0%B4%D0%BD%D0%B8%D0%BC%D1%83%D1%82-%D0%BF%D1%80%D0%BE%D1%86%D0%B5%D1%81%D1%81-%D1%80%D0%B0%D0%B7%D1%80%D0%B0%D0%B1%D0%BE%D1%82%D0%BA%D0%B8-%D0%BD%D0%B0-%D0%BD%D0%BE%D0%B2%D1%8B%D0%B9-%D1%83%D1%80%D0%BE%D0%B2%D0%B5%D0%BD%D1%8C-a24f29173079

[16] Веб-компоненты в 2018: https://www.sitepen.com/blog/2018/07/06/web-components-in-2018/

[17] Святой грааль переиспользуемых компонентов: Custom Elements, Shadow DOM и NPM: https://www.smashingmagazine.com/2018/07/reusable-components-custom-elements-shadow-dom-npm/

[18] Подробности создания веб-интерфейса Google Photos: https://medium.com/google-design/google-photos-45b714dfbed1

[19] Анатомия вредоносных скриптов: как веб-сайт может завладеть вашим браузером: https://css-tricks.com/anatomy-of-a-malicious-script-how-a-website-can-take-over-your-browser/

[20] Доступность для команд: https://accessibility.digital.gov/

[21] Будущее WebAssembly — взгляд на планируемые функциональности и предложения: https://blog.scottlogic.com/2018/07/20/wasm-future.html

[22] Анимация SVG с помощью SVGator: https://www.smashingmagazine.com/2018/07/animating-svg-files-svgator/

[23] Измерение производительности с моделью RAIL от Google, цели и руководства для создания быстрых страниц (обновлено в 2018): https://developers.google.com/web/fundamentals/performance/rail

[24] Создание культуры производительности в вашей команде : https://medium.com/@alexnm/creating-a-web-performance-culture-inside-your-team-f00c0d79765f

[25] Что такое Service Workers и как они могут улучшить производительность : https://www.keycdn.com/blog/service-workers/

[26] Как оптимизация изображений снизила вес страницы на 62%: https://freshman.tech/image-optimisation/

[27] Чеклист производительности фронтенда: https://github.com/thedaviddias/Front-End-Performance-Checklist

[28] PWACompat: Web App Manifest для всех браузеров: https://developers.google.com/web/updates/2018/07/pwacompat

[29] Pinterest: ретроспектива PWA за год: https://medium.com/@Pinterest_Engineering/a-one-year-pwa-retrospective-f4a2f4129e05

[30] Отслеживание разработки AMP в новом дашборде AMP Roadmap с фильтрами и категориями: https://www.ampproject.org/latest/blog/track-development-with-the-new-amp-roadmap/

[31] PWA для WordPress: https://wordpress.org/plugins/pwa/

[32] Справа налево. Как перевернуть интерфейс сайта под RTL: https://habr.com/company/2gis/blog/416635/

[33] API CSS Paint : https://habr.com/company/ruvds/blog/417075/

[34] CSS: новый вид JavaScript: https://medium.com/web-standards/css-a-new-kind-of-javascript-ef0128aaaf12

[35] Химия CSS-гридов: http://css-live.ru/css/ximiya-css-gridov.html

[36] Полное иллюстрированное руководство по Flexbox: https://medium.freecodecamp.org/the-complete-illustrated-flexbox-tutorial-d35c085dbf35

[37] 9 самых больших ошибок с CSS Grid: https://www.youtube.com/watch?v=0Gr1XSyxZy0

[38] DSS : https://dss-lang.com/

[39] Странные штуки, которые могут делать вариативные шрифты: https://css-tricks.com/weird-things-variable-fonts-can-do/

[40] Как исправить проблемы CSS лейаутов?: https://medium.com/@AmJustSam/how-to-fix-css-layout-issues-bc54a21b0b8c

[41] Полезные штуки, которые вы можете делать с CSS pointer events: https://codepen.io/MartijnCuppens/pen/MBjqbM?editors=1100

[42] Стоит ли мне использовать IE версию Grid Layout в 2018?: https://rachelandrew.co.uk/archives/2018/07/17/should-i-try-to-use-the-ie-version-of-grid-layout-revisited-for-2018/

[43] Я попробовал функциональный CSS и он типа отстой: https://codepen.io/tigt/post/i-tried-functional-css-and-it-kinda-sucked

[44] Как стать лучше в написании CSS: https://medium.freecodecamp.org/how-to-get-better-at-writing-css-a1732c32a72f

[45] Сравнение JS-фреймворков: React, Vue и Hyperapp: https://habr.com/company/ruvds/blog/417483/

[46] Re: «Сравнение JS-фреймворков: React, Vue и Hyperapp»: https://habr.com/post/417747/

[47] JavaScript ES6: слабые стороны: https://habr.com/company/ruvds/blog/417383/

[48] Метапрограммирование в JavaScript: https://habr.com/company/docsvision/blog/417097/

[49] 15 HTML-методов элементов, о которых вы, вероятно, никогда не слышали: https://habr.com/company/skillbox/blog/417375/

[50] Матрица компетенций Fullstack JS разработчика: https://docs.google.com/spreadsheets/d/e/2PACX-1vRwSn4qxbYHSdQ428OkpArZc4Q22D8dmbzDcRXt-UzkZ1sZfGLoQmm1w-N0Rx_voKLx4i7R_k7cnQgV/pubhtml#

[51] Введение в JavaScript MutationObserver API: https://benfrain.com/an-introduction-to-the-javascript-mutationobserver-api/

[52] Javascript ES6 — на самом деле вам не нужно изучать генераторы: https://medium.com/@_bengarrison/javascript-es6-you-dont-really-need-to-learn-generators-96aa2e9114fa

[53] Анонс TypeScript 3.0 RC: https://blogs.msdn.microsoft.com/typescript/2018/07/12/announcing-typescript-3-0-rc/

[54] Как создавать Vue-компоненты, словно профи: http://css-live.ru/articles/kak-sozdavat-vue-komponenty-slovno-profi.html

[55] Vue-UI — первый взгляд: https://medium.com/devschacht/vue-ui-%D0%BF%D0%B5%D1%80%D0%B2%D1%8B%D0%B9-%D0%B2%D0%B7%D0%B3%D0%BB%D1%8F%D0%B4-2ec1c18934d6

[56] Любовное письмо ко Vue: http://www.evaristesys.com/blog/love-letter-to-vue/

[57] Бесплатный курс для изучения Vue.js: https://medium.freecodecamp.org/learn-vue-js-in-our-free-course-85d5df41e47f

[58] Создание “Renderless” Vue компонента: https://css-tricks.com/building-renderless-vue-components/

[59] Лучшее объяснение JS реактивности: https://medium.com/vue-mastery/the-best-explanation-of-javascript-reactivity-fea6112dd80d

[60] Путь к изучению React: https://leanpub.com/the-road-to-learn-react-russian

[61] Основы JavaScript перед изучением React: https://www.robinwieruch.de/javascript-fundamentals-react-requirements/

[62] Стилизация React компонентов: https://www.bhnywl.com/blog/styling-react-components/

[63] Простое создание сложной UI анимации в React: https://css-tricks.com/building-a-complex-ui-animation-in-react-simply/

[64] Насколько быстро ты можешь изучить React?: https://hackernoon.com/how-fast-can-you-learn-react-49c4bdabc0df

[65] Что нового в Akita для Angular: мы добавили самые востребованные функции: https://engineering.datorama.com/whats-new-in-akita-for-angular-we-ve-added-your-top-requested-features-f4a9c4c0e68a

[66] Улучшаем производительность Angular приложений с помощью Local Change Detection: https://blog.bitsrc.io/boosting-angular-app-performance-with-local-change-detection-8a6a3afa8d4d

[67] Вы не знаете Angular — руководство по Angular Projection: https://medium.com/coding-blocks/you-dont-know-angular-a-guide-to-angular-projection-7bef2ea66db0

[68] Как создать современную панель управления на NVD3.js: https://css-tricks.com/how-to-make-a-modern-dashboard-with-nvd3-js/

[69] coolHue: https://github.com/webkul/coolhue

[70] draxt: https://github.com/ramhejazi/draxt

[71] Popbox.js: https://oncebot.github.io/popbox.js/

[72] Pushbar.js: https://oncebot.github.io/pushbar.js/

[73] В ночные сборки Firefox добавлен WebRender, использующий GPU для отрисовки web-страниц: http://www.opennet.ru/opennews/art.shtml?num=48989

[74] В рамках проекта Browsh развивается консольный браузер на базе Firefox: http://www.opennet.ru/opennews/art.shtml?num=48945

[75] Началось формирование ASan-сборок Firefox для выявления проблем при работе с памятью: http://www.opennet.ru/opennews/art.shtml?num=48992

[76] Три новые удобные функции в Chrome DevTools: https://webdesign.tutsplus.com/articles/3-handy-new-features-in-chrome-devtools--cms-31506

[77] Так много знаний, так мало времени: https://medium.com/@zhuravlevadasha93/%D1%82%D0%B0%D0%BA-%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE-%D0%B7%D0%BD%D0%B0%D0%BD%D0%B8%D0%B9-%D1%82%D0%B0%D0%BA-%D0%BC%D0%B0%D0%BB%D0%BE-%D0%B2%D1%80%D0%B5%D0%BC%D0%B5%D0%BD%D0%B8-297346768847

[78] Быть многопрофильным специалистом, но рекламировать себя как специалиста в одной области: https://medium.com/@hexlet/%D0%B1%D1%8B%D1%82%D1%8C-%D0%BC%D0%BD%D0%BE%D0%B3%D0%BE%D0%BF%D1%80%D0%BE%D1%84%D0%B8%D0%BB%D1%8C%D0%BD%D1%8B%D0%BC-%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D0%B8%D1%81%D1%82%D0%BE%D0%BC-%D0%BD%D0%BE-%D1%80%D0%B5%D0%BA%D0%BB%D0%B0%D0%BC%D0%B8%D1%80%D0%BE%D0%B2%D0%B0%D1%82%D1%8C-%D1%81%D0%B5%D0%B1%D1%8F-%D0%BA%D0%B0%D0%BA-%D1%81%D0%BF%D0%B5%D1%86%D0%B8%D0%B0%D0%BB%D0%B8%D1%81%D1%82%D0%B0-%D0%B2-%D0%BE%D0%B4%D0%BD%D0%BE%D0%B9-%D0%BE%D0%B1%D0%BB%D0%B0%D1%81%D1%82%D0%B8-578d931a63e

[79] Быстрота Linux на Windows 10: http://nicothin.pro/page/windows-subsystem-for-linux

[80] 6 подходов к приоритизации задач. Опыт Readdle, MacPaw, Grammarly и EduNav: https://dou.ua/lenta/articles/prioritization-approach/

[81] Google, Microsoft, Twitter и Facebook основали проект по обеспечению переносимости данных: http://www.opennet.ru/opennews/art.shtml?num=48998

[82] В популярный NPM-модуль внедрено вредоносное ПО, копирующее параметры аутентификации: http://www.opennet.ru/opennews/art.shtml?num=48960

[83] Алгоритмы спасают людей: как алгоритм подбора пар сохраняет жизни: https://tproger.ru/translations/matchmaking-algorithm-saves-lives/

[84] Intel рассказала о 10 своих главных достижениях за 50 лет: https://3dnews.ru/972892/

[85] Check Point представил обзор киберугроз за первое полугодие 2018 года: двойной рост криптомайнеров и смена вектора атак на облака: https://itc.ua/news/check-point-predstavil-obzor-kiberugroz-za-pervoe-polugodie-2018-goda-dvoynoy-rost-kriptomaynerov-i-smena-vektora-atak-na-oblaka/

[86] AMD, Microsoft, NVIDIA, Oculus и Valve разрабатывают стандарт VirtualLink, который позволит подключать VR-шлемы к ПК с помощью одного USB-C кабеля: https://itc.ua/news/amd-microsoft-nvidia-oculus-i-valve-razrabatyivayut-standart-virtuallink-kotoryiy-pozvolit-podklyuchat-vr-shlemyi-k-pk-s-pomoshhyu-odnogo-usb-c-kabelya/

[87] Тёмный паттерн: как веб-сервисы заставляют пользователей ошибаться в своих действиях: https://vc.ru/42010-temnyy-pattern-kak-veb-servisy-zastavlyayut-polzovateley-oshibatsya-v-svoih-deystviyah

[88] Как незрячий пользуется iPhone, MacBook и Apple Watch: https://www.youtube.com/watch?v=RQiN1Hhrxu0

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

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

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

[92] Источник: https://habr.com/post/417881/?utm_campaign=417881