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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019) - 1

Медиа [1]    |    Веб-разработка [2]    |    CSS [3]    |    Javascript [4]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019) - 2 Медиа

• podcast Подкаст «Веб-стандарты» [5], 176. Подкасты про веб-разработку, новости с Google I/O и Microsoft Build
• podcast Подкаст «Сделайте мне красиво» [6] Выпуск №17 — Вам не нужен SPA, новости Google и фейлы Microsoft
• podcast Подкаст «Фронтенд Юность (18+)» [7] #93 Ворчим за фронтенд
• podcast Подкаст «CSSSR» [8]: Новости 512 — Майский разгон
• podcast Подкаст «CSSSR» [9]: Новости 512 — Майский специальный выпуск
• podcast Подкаст «Девшахта/Ночной фронтенд» [10]#80: Правильные мобильные версии и что там у Facebook
• video Repozitorro #14 [11]: Проекты разные бывают, но такое...
• video en «ALL YOUR HTML» [12] #s3e2: «Physics with Cannon.js»
• video en Видео со SmashingConf SF 2019 [13]
• video en Web at Google I/O 2019 [14], 24 видео

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019) - 16 Веб-разработка

• habr Картинки в вебе 2019 [15]
• habr Технологические тренды веб-разработки 2019 [16]
• en SVG-компоненты для IoT и устройств (часть 2) [17]
• en Введение в JAMstack: архитектура современного веба [18]
• en Почему разработка с помощью JAMstack — это клево [19]
• en Все, что вы хотели знать об inputmode [20]
• en Руководство для новичков по Pug [21]
• en Разбираемся в устройстве JPEG [22]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019) - 40 CSS

• Селектор :has() станет доступен для оформления? [38]
• en Это ловушка-trap-ezoid: CSS Shapes — это не то, что вы ожидаете [39]
• en Анимация CSS Grid Rows и Columns [40]
• en Subgrid [41]. Новая статья на MDN dev docs
• en CSS Scan: самый быстрый способ проверить и скопировать CSS [42]
• en CSS функция для ограничения многострочного текста троеточием была реализована в Firefox [43]
• en Отладка CSS Grid: [44] Часть 2: что за Fr(action)?
• en Google Fonts теперь поддерживает font-display! [45]
• en Правила CSS, которые сделают вашу жизнь проще [46]
• en Китайская оконная решетка и CSS [47]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №365 (13 — 19 мая 2019) - 50 JavaScript

• habr Первый вклад в API браузера от Facebook [48]
• Cloudflare, Mozilla и Facebook развивают BinaryAST для ускорения загрузки JavaScript [49]
• en Начало работы с Svelte 3 [50]
• en Функциональный JavaScript [51]
• en TypeScript 3.0: тип unknown [52]

  • Libs & Plugins:
    • en Познакомьтесь с Storeon [75], крошечным менеджером состояний для современных приложений, близких по духу к Redux, реализованном в одном файле весом 173 байт
    • en ola [76] — анимационная библиотека для усреднения/интерполяции чисел в реальном времени
    • en reLift-HTML [77] — маленькая библиотека для view (3KB) позволяющая создавать веб-компоненты, кастомные элементы, помогающая сделать любую HTML страницу реактивной без загрязнения большими фреймворками

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

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

Автор: alexzfort

Источник [81]

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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] Javascript: #js

[5] Подкаст «Веб-стандарты»: https://medium.com/web-standards/episode-176-1d88cfc4bc49

[6] Подкаст «Сделайте мне красиво»: https://soundcloud.com/begebot/ep17

[7] Подкаст «Фронтенд Юность (18+)»: https://soundcloud.com/frontend_u/e93a

[8] Подкаст «CSSSR»: https://soundcloud.com/csssr/novosti-512

[9] Подкаст «CSSSR»: https://soundcloud.com/csssr/novosti-512-mayskiy-spetsialnyy-vypusk

[10] Подкаст «Девшахта/Ночной фронтенд»: https://soundcloud.com/devschacht/devschacht-80

[11] Repozitorro #14: https://www.youtube.com/watch?v=ElqxXemEAxY

[12] «ALL YOUR HTML»: https://www.youtube.com/watch?v=dh-OXUnEOOU

[13] Видео со SmashingConf SF 2019: https://vimeo.com/smashingmagazine

[14] Web at Google I/O 2019: https://www.youtube.com/playlist?list=PLNYkxOF6rcIATmAmz7HcCzongGvQEtx8i

[15] Картинки в вебе 2019: https://habr.com/en/company/simbirsoft/blog/451504/

[16] Технологические тренды веб-разработки 2019: https://habr.com/ru/post/451572/

[17] SVG-компоненты для IoT и устройств (часть 2): https://www.smashingmagazine.com/2019/05/svg-web-page-components-iot-part2/

[18] Введение в JAMstack: архитектура современного веба: https://medium.freecodecamp.org/an-introduction-to-the-jamstack-the-architecture-of-the-modern-web-c4a0d128d9ca

[19] Почему разработка с помощью JAMstack — это клево: https://itnext.io/why-building-with-a-jamstack-is-awesome-39696e9ef8d6

[20] Все, что вы хотели знать об inputmode: https://css-tricks.com/everything-you-ever-wanted-to-know-about-inputmode/

[21] Руководство для новичков по Pug: https://www.sitepoint.com/a-beginners-guide-to-pug/

[22] Разбираемся в устройстве JPEG: https://parametric.press/issue-01/unraveling-the-jpeg/

[23] Как мы при помощи WebAssembly в 20 раз веб-приложение ускорили: https://habr.com/ru/company/skillbox/blog/452190/

[24] Лучшая приоритизация HTTP/2 для ускорения веба: https://habr.com/ru/post/452020/

[25] Глубокое погружение в нативную ленивую загрузку изображений и фреймов: https://css-tricks.com/a-deep-dive-into-native-lazy-loading-for-images-and-frames/

[26] Отчет о заседании комитета AMP Advisory: https://shkspr.mobi/blog/2019/05/a-report-from-the-amp-advisory-committee-meeting/

[27] Оптимизация изображений: понимание точного влияния на Google’s Performance Score для повышения его уровня в 2019 году: https://blog.uploadcare.com/image-optimization-and-performance-score-23516ebdd31d

[28] Является ли 'the fold' (область первого экрана сайта) все еще важной в современной культуре скроллинга сайтов?: https://www.mobilespoon.net/2019/05/fold-still-thing-in-todays-scrolling.html

[29] 3Pweb: https://www.thirdpartyweb.today/

[30] Функции инструментов разработчика Chrome, о которых вы не знали (ЧАСТЬ 1): https://www.youtube.com/watch?v=I-wIFhvGclQ

[31] Удаленная разработка с использованием VS Code : https://code.visualstudio.com/blogs/2019/05/02/remote-development

[32] Более быстрая и умная отладка JavaScript в Firefox DevTools: https://hacks.mozilla.org/2019/05/faster-smarter-javascript-debugging-in-firefox/

[33] Новый (и простой) способ реализации доступности для скрытого контента: https://medium.freecodecamp.org/a-new-and-easy-way-to-hide-content-accessibly-92e21e159b85

[34] Состояние доступности: GAAD 2019: https://www.deque.com/blog/the-state-of-accessibility-gaad-2019/

[35] Представлена Microsoft Web Template Studio для фул-стек разработки: https://blogs.windows.com/buildingapps/2019/05/15/announcing-microsoft-web-template-studio/

[36] Интеграция сторонних библиотек анимации в проект: https://css-tricks.com/integrating-third-party-animation-libraries-to-a-project/

[37] Как создать круговую диаграмму на SVG: https://seesparkbox.com/foundry/how_to_code_an_SVG_pie_chart

[38] Селектор :has() станет доступен для оформления?: https://css-live.ru/vecssti-s-polej/selektor-has-stanet-dostupen-dlya-oformleniya.html

[39] Это ловушка-trap-ezoid: CSS Shapes — это не то, что вы ожидаете: https://blog.logrocket.com/its-a-trap-ezoid-css-shapes-aren-t-what-you-d-expect-fe27a210001e

[40] Анимация CSS Grid Rows и Columns: https://blog.bitsrc.io/animating-css-grid-rows-and-columns-4b3b0997d06a

[41] Subgrid: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_layout/Subgrid

[42] CSS Scan: самый быстрый способ проверить и скопировать CSS: https://scotch.io/bar-talk/css-scan-the-fastest-way-to-inspect-and-copy-css

[43] CSS функция для ограничения многострочного текста троеточием была реализована в Firefox: https://webplatform.news/issues/2019-05-17

[44] Отладка CSS Grid:: https://css-irl.info/debugging-css-grid-part-2-what-the-fraction/

[45] Google Fonts теперь поддерживает font-display!: https://scotch.io/bar-talk/google-fonts-now-supports-font-display

[46] Правила CSS, которые сделают вашу жизнь проще: https://medium.freecodecamp.org/css-rules-to-live-by-962a051e1eb2

[47] Китайская оконная решетка и CSS: https://yuanchuan.dev/2019/05/15/window-lattice-and-css.html

[48] Первый вклад в API браузера от Facebook: https://habr.com/ru/post/451900/

[49] Cloudflare, Mozilla и Facebook развивают BinaryAST для ускорения загрузки JavaScript: https://www.opennet.ru/opennews/art.shtml?num=50701

[50] Начало работы с Svelte 3: https://alligator.io/svelte/getting-started-with-svelte/

[51] Функциональный JavaScript: https://medium.com/@bluepnume/functional-ish-javascript-205c05d0ed08

[52] TypeScript 3.0: тип unknown: https://mariusschulz.com/blog/typescript-3-0-the-unknown-type

[53] Какой здесь this? Внутренняя работа объектов JavaScript: https://habr.com/ru/post/452192/

[54] Практическое руководство по Javascript Proxy: https://blog.bitsrc.io/a-practical-guide-to-es6-proxy-229079c3c2f0

[55] JavaScript движки: как они, всё-таки, работают? От стэка вызовов до промиса, (почти) всё что вам нужно знать: https://www.valentinog.com/blog/engines/

[56] Доступные сообщения валидации форм с помощью ARIA и Vue.js: https://vuejsdevelopers.com/2019/05/13/accessibility-validation-aria-vuejs/

[57] Введение в test-driven разработку с помощью Vue.js: https://medium.freecodecamp.org/an-introduction-to-tdd-with-vue-js-66544710b50c

[58] Начало работы с Vue — обзор и пошаговое руководство: https://www.taniarascia.com/getting-started-with-vue/

[59] Галерея с поддержкой жестов на Vue.js и Tailwind: https://levelup.gitconnected.com/swipe-gallery-using-vue-js-tailwind-wotw-7819f8a1e4fb

[60] Reakit 1.0: новый инструментарий для создания доступных веб-приложений на базе React: http://oddstyle.ru/wordpress-2/novosti-wordpress/reakit-1-0-novyj-instrumentarij-dlya-sozdaniya-dostupnyx-veb-prilozhenij-na-baze-react.html

[61] Как легко конвертировать классы React-Redux в React Hooks: https://medium.freecodecamp.org/how-to-convert-from-react-redux-classes-to-react-hooks-the-easy-way-eca2233e0e7a

[62] unform: https://github.com/Rocketseat/unform

[63] UI анимация в React: https://cssanimation.rocks/ui-animation-react/

[64] ReactQ: https://reactql.org/

[65] Основные шаблоны проектирования React Hooks: https://itnext.io/essential-react-hooks-design-patterns-a04309cc0404

[66] Докеризация React App: https://mherman.org/blog/dockerizing-a-react-app/

[67] Создание собственной React-библиотеки для валидации: основы (часть 1): https://www.smashingmagazine.com/2019/05/react-validation-library-basics-part1/

[68] Что делать, когда твое React приложение ощущается медленным: https://itnext.io/what-to-do-when-your-react-app-feels-slow-3744c966ddf

[69] Angular: создание и публикация библиотеки: https://habr.com/ru/post/452262/

[70] Представляем «CLI Builder»‎-ы: https://habr.com/ru/post/450746/

[71] Создание интернет-магазина с использованием ngrx/store и Angular: https://www.telerik.com/blogs/building-an-online-store-using-ngrx-store-and-angular

[72] Мои любимые советы и подсказки в Angular: https://www.telerik.com/blogs/my-favorite-tips-and-tricks-in-angular

[73] Наследование компонентов в Angular: https://blog.bitsrc.io/component-inheritance-in-angular-acd1215d5dd8

[74] Делаем доступность проще с Angular CDK. Списки с клавиатурной навигацией: https://blog.angularindepth.com/doing-a11y-easily-with-angular-cdk-keyboard-navigable-lists-d32f458b8851

[75] Познакомьтесь с Storeon: https://evilmartians.com/chronicles/storeon-redux-in-173-bytes

[76] ola: https://github.com/franciscop/ola/

[77] reLift-HTML: https://relift-html.js.org/

[78] Дайджест за прошлую неделю: https://habr.com/ru/post/451468/

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

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

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