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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №333 (1 — 7 октября 2018)

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

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

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


Дайджест свежих материалов из мира фронтенда за последнюю неделю №333 (1 — 7 октября 2018) - 2 Медиа

podcast Подкаст «Пятиминутка Angular» #12 — Battle, Real world app, Render Props, Soviet, ng v7 beta [7]
podcast Подкаст «Frontend Weekend» #73 – Анна Селезнёва об истории эмоционального выгорания, выборе города для работы и поиске себя [8]
podcast «Девшахта — подкаст»: #52: Node.js в бэкенде — миф или суровая необходимость? [9]
video Видеоблог Вадима Макеева №4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки [10]
video 3 видео с KharkivFrontend Summer Conference [11]
video en SmashingConf Toronto 2018, 11 видео [12]
video en Full Stack Fest 2018, 34 видео [13]

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

Node.js Foundation и JS Foundation заявили об объединении [14]

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

habr Что происходит при создании контейнера Flexbox? [24]
«Спор из-за пустого места» и изменение в селекторах 4 уровня [25]
Первый (и странный) публичный черновик CSS-модуля скроллбаров [26]
en Отладка и оптимизация CSS: Инструменты для разработчиков, встроенные в браузер [27], Инструменты измерения качества кода [28], Минификация с CSSO [29]
en Наиболее распространенные варианты использования Flexbox [30]
en Создание гибких лейаутов с помощью Flexbox [31]
en Селекторы Sass: вкладывать или не вкладывать? [32]
en Scribble-Font [33] — шрифт для создания Scribble Font for Prototyping & Wireframing
en Стилизация битых изображений [34]
en Как я организовываю CSS в больших проектах с помощью UFOCSS — часть 2 [35]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №333 (1 — 7 октября 2018) - 31 JavaScript

Создаём простую игру на Vanilla JS [36]
en Объяснение функционального программирования в JavaScript: Fusion & Transduction [37]
en Как прекратить использовать console.log() и начать использовать дебаггер в вашем браузере [38]
en Почему каждый начинающий разработчик фронтенда должен знать о шаблоне «издатель-подписчик»? [39] AKA: как понимать асинхронный JS код наименее болезненным способом
en Карманный справочник по: Функциям в JavaScript [40], Прототипам в JavaScript [41]
en Сравнение серверного рендеринга в приложениях на React и Angular [42]

  • Libs & Plugins:
    lvovich [71] — Склонение названий городов, определения пола по ФИО, склонения имен по падежам
    en Cogear.JS [72] – современный статический генератор
    en imgToAscii [73] — JavaScript имплементация перевода изображений в Ascii код
    en ferret [74] — система веб-скрапинга для упрощенного извлечения данных из веба для последующего ui тестирования, машинного обучения и аналитики

Дайджест свежих материалов из мира фронтенда за последнюю неделю №333 (1 — 7 октября 2018) - 71 Браузеры

Представлен переработанный web-браузер Firefox Focus [75]
В Firefox будет добавлена поддержка формата изображений WebP [76]
Google позволит играть в «Assassin’s Creed Одиссея» прямо в Chrome [77]
en Chrome 70 — что нового в DevTools [78]
en Google изменила требования к расширениям Chrome [79]
en Что нового в Microsoft Edge, обновленном в Windows 10 October 2018 Update [80]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №333 (1 — 7 октября 2018) - 75 Занимательное

Microsoft представила программу Your Phone для запуска Android-приложений на компьютере [81]
Microsoft выложила MS-DOS 1.25 и 2.0 на GitHub [82]
Выход WordPress 5.0 запланирован на 19 ноября 2018 [83]
Microsoft обновила Windows 10. Что нового? [84]
Microsoft — это новая Apple. Мнение [85]
Подборка эзотерических языков программирования [86]
Следующая версия Wi-Fi будет называться Wi-Fi 6 [87]
Обнаружены фишинговые формы, подписанные сертификатами Cloudflare и Microsoft [88]
В Git устранена уязвимость, которая может привести к выполнению кода атакующего [89]


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

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

Автор: alexzfort

Источник [93]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

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

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

[7] #12 — Battle, Real world app, Render Props, Soviet, ng v7 beta: https://www.youtube.com/watch?v=VAXKoR52JV4

[8] #73 – Анна Селезнёва об истории эмоционального выгорания, выборе города для работы и поиске себя : https://soundcloud.com/frontend-weekend/fw-73

[9] #52: Node.js в бэкенде — миф или суровая необходимость?: https://medium.com/devschacht/devschacht-52-4d34beacfcfc

[10] №4. Навигация, дизайнеры и код, актуальность, личинки фронтендера и фреймворки: https://www.youtube.com/watch?v=y52rtbUeCac&feature=youtu.be

[11] 3 видео с KharkivFrontend Summer Conference: https://www.youtube.com/playlist?list=PLDddScyTGZAuXMbFfcq6KqRVSQ-TrW5pL

[12] SmashingConf Toronto 2018, 11 видео: https://vimeo.com/album/5451191

[13] Full Stack Fest 2018, 34 видео: https://www.youtube.com/playlist?list=PLe9psSNJBf75O6abYvvjxhm36_QU9H-f2

[14] Node.js Foundation и JS Foundation заявили об объединении: https://tproger.ru/news/nodejs-javascript-union/

[15] 10 лучших VS Code-расширений 2018 года для фронтенд-разработчиков: https://habr.com/company/ruvds/blog/425313/

[16] Симуляция мобильных устройств с помощью Device Mode в Chrome DevTools: https://developers.google.com/web/tools/chrome-devtools/device-mode/

[17] project-explorer: CLI инструмент визуализации любого проекта в виде дерева с аннотациями : https://github.com/sdras/project-explorer

[18] Доступность интерфейсов. Лекция Яндекса: https://habr.com/company/yandex/blog/424879/

[19] Как сделать блок Terms & Conditions доступным: https://medium.com/@carlneubert/terms-conditions-accessibility-92a01a6938c0

[20] Как мы сделали доступным меню в Basecamp 3 : https://m.signalvnoise.com/the-next-big-jump-in-basecamp-accessibility-a2119c08309e

[21] О правильном написании хороших текстовых альтернатив: https://medium.com/@amyalexandraleak/should-you-use-alt-text-or-a-caption-48311e259ded

[22] Multibox Menu: https://tympanus.net/codrops/2018/10/03/multibox-menu/

[23] Двигаем фон вместе с курсором мыши: https://css-tricks.com/moving-backgrounds-with-mouse-position/

[24] Что происходит при создании контейнера Flexbox?: https://habr.com/post/424419/

[25] «Спор из-за пустого места» и изменение в селекторах 4 уровня: http://css-live.ru/vecssti-s-polej/new-empty-pseudo-class-selectors-level-4.html

[26] Первый (и странный) публичный черновик CSS-модуля скроллбаров: http://css-live.ru/vecssti-s-polej/css-scrollbars-fpwd.html

[27] Инструменты для разработчиков, встроенные в браузер: https://www.sitepoint.com/css-debugging-and-optimization-browser-based-developer-tools/

[28] Инструменты измерения качества кода: https://www.sitepoint.com/css-debugging-and-optimization-code-quality-tools/

[29] Минификация с CSSO: https://www.sitepoint.com/css-debugging-and-optimization-minification-csso/

[30] Наиболее распространенные варианты использования Flexbox: https://www.smashingmagazine.com/2018/10/flexbox-use-cases/

[31] Создание гибких лейаутов с помощью Flexbox: https://www.sitepoint.com/creating-flexible-layouts-with-flexbox/

[32] Селекторы Sass: вкладывать или не вкладывать?: http://bradfrost.com/blog/post/sass-selectors-to-nest-or-not-to-nest/

[33] Scribble-Font: https://github.com/vladocar/Scribble-Font

[34] Стилизация битых изображений: https://scotch.io/bar-talk/styling-broken-images

[35] Как я организовываю CSS в больших проектах с помощью UFOCSS — часть 2: https://medium.com/@fuladuf/how-i-organize-css-in-large-projects-using-ufocss-part-2-68786ff41749

[36] Создаём простую игру на Vanilla JS: https://tproger.ru/translations/memory-game-vanilla-js/

[37] Объяснение функционального программирования в JavaScript: Fusion & Transduction: https://scotch.io/tutorials/javascript-functional-programming-explained-fusion-transduction

[38] Как прекратить использовать console.log() и начать использовать дебаггер в вашем браузере: https://medium.com/datadriveninvestor/stopping-using-console-log-and-start-using-your-browsers-debugger-62bc893d93ff

[39] Почему каждый начинающий разработчик фронтенда должен знать о шаблоне «издатель-подписчик»?: https://itnext.io/why-every-beginner-front-end-developer-should-know-publish-subscribe-pattern-72a12cd68d44

[40] Функциям в JavaScript: https://medium.com/@ajmeyghani/javascript-functions-a-pocket-reference-d42597ceb496

[41] Прототипам в JavaScript: https://medium.com/@ajmeyghani/javascript-prototypes-a-pocket-reference-d88f550ffce3

[42] Сравнение серверного рендеринга в приложениях на React и Angular: https://levelup.gitconnected.com/a-comparison-of-server-side-rendering-in-react-and-angular-applications-fb95285fb716

[43] HTTP203: предложения нового синтаксиса для JS в 2018-м: https://www.youtube.com/watch?v=PBeyU5ImnRQ

[44] JavaScript ES6: слабые стороны: https://medium.com/webbdev/bad-es6-a0612c9fecf0

[45] Практическое ES6 руководство, о том, как сделать HTTP запрос с помощью Fetch API: https://medium.freecodecamp.org/a-practical-es6-guide-on-how-to-perform-http-requests-using-the-fetch-api-594c3d91a547

[46] Стрелочные функции JavaScript: как, когда (и КОГДА НЕ) использовать их: https://zendev.com/2018/10/01/javascript-arrow-functions-how-why-when.html

[47] Планы на следующую версию Vue.js: https://habr.com/post/425213/

[48] Почему я выбрал Vue.js вместо React: https://medium.com/@luistinygod/why-i-chose-vue-js-over-react-509ad12d7b53

[49] Радость создания Vue приложений на Typescript — часть 1: Vue Class Components: https://medium.com/coding-blocks/the-joy-of-building-vue-apps-in-typescript-part-1-vue-class-components-8291bb6213d8

[50] Создание SPA клона поиска Google на Vue и Flask: https://scotch.io/bar-talk/building-a-google-search-clone-spa-with-vue-and-flask

[51] Юнит-тестирование вашего первого компонента на Vue.js: https://frontstuff.io/unit-test-your-first-vuejs-component

[52] Глубокое погружение в новые Vue Devtools v5.0: https://medium.com/@brandonl.4231/new-features-in-vue-devtools-v5-0-and-why-they-are-useful-3ce732fdc7a0

[53] Бесплатные шаблоны для админок на vue.js и bootstrap: https://medium.com/@jeweltheme/free-vue-js-bootstrap-admin-templates-2018-7acd54b88a19

[54] Разработка React-приложений с использованием ReasonReact: https://habr.com/company/ruvds/blog/424965/

[55] Начинаем работать с React и GSAP Animations: https://greensock.com/react

[56] React/JSX в качестве серверного языка шаблонизации: https://blog.kentcdodds.com/react-jsx-as-a-server-side-templating-language-e238555dbc08

[57] Смерть от тысячи порезов — чеклист для избавления от популярных проблемах с производительностью в React: https://logrocket-blog.ghost.io/death-by-a-thousand-cuts-a-checklist-for-eliminating-common-react-performance-issues/

[58] 9 React Styled-Components UI библиотек в 2018: https://blog.bitsrc.io/9-react-styled-components-ui-libraries-for-2018-4e1a0bd3e179

[59] Как создать PWA игру за 5 шагов используя Preact : https://hackernoon.com/how-to-create-a-pwa-game-using-preact-in-5-steps-tutorial-c8b177037c80

[60] Тестирование компонентов в React: что и как тестировать с помощью Jest и Enzyme: https://medium.freecodecamp.org/components-testing-in-react-what-and-how-to-test-with-jest-and-enzyme-7c1cace99de5

[61] Эти основы React, которые вы пропустили, могут быть убийственны для вас: https://medium.freecodecamp.org/these-react-fundamentals-you-skip-may-be-killing-you-7629fb87dd4a

[62] Миграция с Angular на React: https://medium.com/hoopeez/the-deep-dive-migration-from-angular-to-react-ea5a807e95eb

[63] Уроки, извлечённые из работы с долгосрочным SPA приложением на React/Redux: https://notes.devlabs.bg/long-term-react-redux-spa-lessons-learned-14daca3a26ba

[64] React Podcast 23: Ditch Authority with Sunil Pai: https://reactpodcast.com/23

[65] Лучшие практики для чистого и производительного приложения на Angular: https://medium.freecodecamp.org/best-practices-for-a-clean-and-performant-angular-application-288e7b39eb6f

[66] Как использовать анимации в Angular 6: https://medium.freecodecamp.org/how-to-use-animation-with-angular-6-675b19bc3496

[67] Как создать новостное приложение с помощью Angular 6 и Material Design: https://www.smashingmagazine.com/2018/10/news-application-with-angular-and-material-design/

[68] Упрощенное юнит-тестирование в Angular: https://logrocket.com/blog/angular-unit-testing/

[69] Изучаем Drag and Drop в новом Angular Material CDK: https://blog.angularindepth.com/exploring-drag-and-drop-with-the-angular-material-cdk-2e0237857290

[70] На что обратить внимание при переходе с AngularJS на Angular 2.0+: https://medium.com/@simbasagwete/what-to-consider-when-upgrading-from-angularjs-to-angular-2-0-24e69fcefded

[71] lvovich: https://github.com/nodkz/lvovich

[72] Cogear.JS: https://github.com/codemotion/cogear.js

[73] imgToAscii: https://github.com/victorqribeiro/imgToAscii

[74] ferret: https://github.com/MontFerret/ferret

[75] Представлен переработанный web-браузер Firefox Focus: http://www.opennet.ru/opennews/art.shtml?num=49386

[76] В Firefox будет добавлена поддержка формата изображений WebP: http://www.opennet.ru/opennews/art.shtml?num=49406

[77] Google позволит играть в «Assassin’s Creed Одиссея» прямо в Chrome: https://www.searchengines.ru/google-assasin.html

[78] Chrome 70 — что нового в DevTools: https://www.youtube.com/watch?v=LJq8vg8ktdQ&index=2&list=PLNYkxOF6rcIBDSojZWBv4QJNoT4GNYzQD&linkId=57789820

[79] Google изменила требования к расширениям Chrome: https://tproger.ru/news/google-change-extensions-policies/

[80] Что нового в Microsoft Edge, обновленном в Windows 10 October 2018 Update: https://blogs.windows.com/msedgedev/2018/10/04/edgehtml-18-october-2018-update/

[81] Microsoft представила программу Your Phone для запуска Android-приложений на компьютере: https://tproger.ru/news/your-phone-android-app/

[82] Microsoft выложила MS-DOS 1.25 и 2.0 на GitHub: http://microsoftportal.net/microsoft/10099-microsoft-vylozhila-ms-dos-125-i-20-na-github.html

[83] Выход WordPress 5.0 запланирован на 19 ноября 2018: http://oddstyle.ru/wordpress-2/novosti-wordpress/vyxod-wordpress-5-0-zaplanirovan-na-19-noyabrya-2018.html

[84] Microsoft обновила Windows 10. Что нового?: https://www.computerra.ru/231376/microsoft-obnovila-windows-10-chto-novogo/

[85] Microsoft — это новая Apple. Мнение: https://ain.ua/2018/10/04/microsoft-eto-novyj-apple/

[86] Подборка эзотерических языков программирования: https://tproger.ru/translations/esoteric-programming/

[87] Следующая версия Wi-Fi будет называться Wi-Fi 6: https://xakep.ru/2018/10/04/wi-fi-6/

[88] Обнаружены фишинговые формы, подписанные сертификатами Cloudflare и Microsoft: https://xakep.ru/2018/10/05/cloudflare-phishing/

[89] В Git устранена уязвимость, которая может привести к выполнению кода атакующего: http://www.opennet.ru/opennews/art.shtml?num=49397

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

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

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

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