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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020)

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020) - 1

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

Медиа

podcast Подкаст «CSSSR»: Новости 512 — IT-laws, долой git flow, Firefox 74, rollup 2.0.0, Rust 1.42, развитие Django [7]
podcast Подкаст «Веб-стандарты» №220. Цветовая гамма, история CSS, сборка в Rome, фильм про Vue, i18n, Google Fonts, геймдев, митапы [8]
video ProConf #53: VueConf 2019 Toronto — ProConf В ОПАСНОСТИ | Тысячи тысяч | VueJS 3.0 | Реакт на лопатках | [9]
video en «ALL YOUR HTML» #s3e17: OGL Instancing animation. Очередной сеанс креативного live coding от Юрия Артюха [10]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020) - 7 Веб-разработка

habr Как в Sports.ru писали свой WYSIWYG-редактор [11]
habr Визуализация работы сервис-воркеров [12]
en Happy 31st birthday, World Wide Web! [13]
en RedwoodJS: новый фреймворк, расширяющий JAMstack до полного стека и включающий в себя React, GraphQL, Prisma2 и множество другого из коробки [14]
en Что нового в DevTools (Chrome 82) [15]
en Преимущества производительности вариативных шрифтов [16]
en Вставка видео с гибкой шириной [17]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020) - 19 CSS

habr Чистый CSS: 4 метода анимирования цвета ссылок [23]
en Единицы вьюпорта в CSS [24]
en Flexbox и абсолютное позиционирование [25]
en Как сделать линейную диаграмму с помощью CSS [26]
en Соображения по поводу выбора шрифтов для многоязычного сайта [27]
en Приключения в полупрозрачных землях CSS [28]
en Установка высоты и ширины на изображениях снова важна [29]

JavaScript

habr Малоизвестные, но популярные JS-фреймворки для фронтенда [30]
habr Это мог быть очередной JavaScript-фреймворк [31]
habr 10 отличных Github репозиториев, которые должен знать каждый веб-разработчик [32]
7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах [33]
en Сравнение различных способов делать HTTP-запросы в Javascript в 2020 году [34]
en JavaScript: первые 20 лет [35]
en Как я создал 3D-игру всего в 2 КБ JavaScript [36]
en Прерывание сигнала: как отменить асинхронную задачу в JavaScript [37]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020) - 70 Браузеры

habr Устройство расширений для браузера Firefox (WebExtensions) [73]
Google Chrome наглядно покажет создателям сайтов, как люди с нарушениями зрения видят их веб-страницы [74]
Релиз Firefox 74 [75]
Firefox 74, технические детали для разработчиков [76]
Доступен Firefox Preview 4.0 для Android [77]
en 6 крупных причин попробовать новый Firefox Android preview [78]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №406 (9 — 15 марта 2020) - 73 Занимательное

Из-за опасного бага Avast отключает JavaScript-движок в своем антивирусе [79]
Искусственный интеллект в кибербезопасности [80]
Веб-дизайнер превращает старинные книги и брошюры 19 века в интерактивные сайты [81]
NVIDIA призвала геймеров использовать свои ПК для борьбы с COVID-19 [82]
Как квантовые компьютеры могут изменить мир [83]

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

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

Автор: alexzfort

Источник [87]


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

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

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

[1] Медиа: #media

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

[3] CSS: #css

[4] JavaScript: #js

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

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

[7] Подкаст «CSSSR»: Новости 512 — IT-laws, долой git flow, Firefox 74, rollup 2.0.0, Rust 1.42, развитие Django: https://soundcloud.com/csssr/novosti-512-it-laws-oloy-git-flow-firefox-74-rollup-200-rust-142-razvitie-django

[8] Подкаст «Веб-стандарты» №220. Цветовая гамма, история CSS, сборка в Rome, фильм про Vue, i18n, Google Fonts, геймдев, митапы: https://medium.com/web-standards/episode-220-20637b9fb1ad

[9] ProConf #53: VueConf 2019 Toronto — ProConf В ОПАСНОСТИ | Тысячи тысяч | VueJS 3.0 | Реакт на лопатках |: https://www.youtube.com/watch?v=5BOYezoMvdA

[10] «ALL YOUR HTML» #s3e17: OGL Instancing animation. Очередной сеанс креативного live coding от Юрия Артюха: https://www.youtube.com/watch?v=MLBC2m2_kaI

[11] Как в Sports.ru писали свой WYSIWYG-редактор: https://habr.com/ru/company/sports_ru/blog/492228/

[12] Визуализация работы сервис-воркеров: https://habr.com/ru/post/491840/

[13] Happy 31st birthday, World Wide Web!: https://www.w3.org/blog/2020/03/happy-31st-birthday-world-wide-web/

[14] RedwoodJS: новый фреймворк, расширяющий JAMstack до полного стека и включающий в себя React, GraphQL, Prisma2 и множество другого из коробки: https://redwoodjs.com/

[15] Что нового в DevTools (Chrome 82) : https://developers.google.com/web/updates/2020/03/devtools

[16] Преимущества производительности вариативных шрифтов : https://uxdesign.cc/the-performance-benefits-of-variable-fonts-79af8c4ff56c

[17] Вставка видео с гибкой шириной : https://css-tricks.com/fluid-width-video/

[18] Что такое ARIA?: https://webdevblog.ru/chto-takoe-aria/

[19] Web Accessibility Checklist: 16 вещей для улучшения доступности вашего сайта : https://websitesetup.org/web-accessibility-checklist/?ref=heydesigner

[20] Доступные SVG: инклюзивность за пределами шаблонов : https://www.smashingmagazine.com/2020/03/accessible-svgs-inclusiveness-beyond-patterns/

[21] Pure CSS Landscape — An Evening in Southwold : https://codepen.io/ivorjetski/pen/xxGYWQG

[22] Эффект масштабирования фонового изображения с помощью CSS Clip-path : https://tympanus.net/codrops/2020/03/11/background-scale-hover-effect-with-css-clip-path/

[23] Чистый CSS: 4 метода анимирования цвета ссылок: https://habr.com/ru/company/ruvds/blog/491702/

[24] Единицы вьюпорта в CSS: https://ishadeed.com/article/viewport-units/

[25] Flexbox и абсолютное позиционирование : https://www.chenhuijing.com/blog/flexbox-and-absolute-positioning/?ref=heydesigner

[26] Как сделать линейную диаграмму с помощью CSS : https://css-tricks.com/how-to-make-a-line-chart-with-css/

[27] Соображения по поводу выбора шрифтов для многоязычного сайта : https://css-tricks.com/considerations-when-choosing-fonts-for-a-multilingual-website/

[28] Приключения в полупрозрачных землях CSS : https://css-tricks.com/adventures-in-css-semi-transparency-land/

[29] Установка высоты и ширины на изображениях снова важна : https://www.smashingmagazine.com/2020/03/setting-height-width-images-important-again/

[30] Малоизвестные, но популярные JS-фреймворки для фронтенда: https://habr.com/ru/company/ruvds/blog/491708/

[31] Это мог быть очередной JavaScript-фреймворк: https://habr.com/ru/post/487648/

[32] 10 отличных Github репозиториев, которые должен знать каждый веб-разработчик: https://habr.com/ru/post/492040/

[33] 7 полезных уловок с rest параметрами и spread операторами на JavaScript объектах: https://medium.com/@stasonmars/7-%D0%BF%D0%BE%D0%BB%D0%B5%D0%B7%D0%BD%D1%8B%D1%85-%D1%83%D0%BB%D0%BE%D0%B2%D0%BE%D0%BA-%D1%81-rest-%D0%BF%D0%B0%D1%80%D0%B0%D0%BC%D0%B5%D1%82%D1%80%D0%B0%D0%BC%D0%B8-%D0%B8-spread-%D0%BE%D0%BF%D0%B5%D1%80%D0%B0%D1%82%D0%BE%D1%80%D0%B0%D0%BC%D0%B8-%D0%BD%D0%B0-javascript-%D0%BE%D0%B1%D1%8A%D0%B5%D0%BA%D1%82%D0%B0%D1%85-ba5eff837772

[34] Сравнение различных способов делать HTTP-запросы в Javascript в 2020 году : https://medium.com/javascript-in-plain-english/comparing-different-ways-to-make-http-requests-in-javascript-39ab0f090788

[35] JavaScript: первые 20 лет : http://www.wirfs-brock.com/allen/posts/866

[36] Как я создал 3D-игру всего в 2 КБ JavaScript : http://frankforce.com/?p=7427

[37] Прерывание сигнала: как отменить асинхронную задачу в JavaScript : https://ckeditor.com/blog/Aborting-a-signal-how-to-cancel-an-asynchronous-task-in-JavaScript/

[38] JavaScript Clean Code — Вертикальное форматирование: https://levelup.gitconnected.com/javascript-clean-code-vertical-formatting-d15097f5f30e

[39] Прекратите использовать «else» в своем коде : https://medium.com/javascript-in-plain-english/stop-using-the-else-keyword-in-your-code-907e82b3054a

[40] Руководство по стрелочным функциям в ES6 : https://www.telerik.com/blogs/the-guide-to-arrow-functions-in-es6

[41] Сила PWA: Система видеонаблюдения с нейросетью в 300 строчек JS-кода: https://habr.com/ru/post/492006/

[42] Докеризация приложения, построенного на базе React, Express и MongoDB: https://habr.com/ru/company/ruvds/blog/491710/

[43] Создавайте безопасные и быстрые веб-сайты с помощью JAMstack — бесплатный 3,5-часовой курс : https://www.freecodecamp.org/news/jamstack-full-course/

[44] Начинаем создавать GraphQL APIs с Node: https://css-tricks.com/get-started-building-graphql-apis-with-node/

[45] Создать современный ванильный Javascript Router : https://www.hackdoor.io/articles/0XN6jANd/create-a-modern-vanilla-javascript-router

[46] Вопрос для технического собеседования по JavaScript: React — это MVC или MVVM? : https://medium.com/javascript-in-plain-english/javascript-interview-question-is-react-an-mvc-or-mvvm-ac2ea2a5127d

[47] Использование Redux с React: полное руководство с примерами из реальной жизни (Redux и Redux Toolkit) : https://www.taniarascia.com/redux-react-guide/

[48] Простое руководство по предохранителям в React : https://alligator.io/react/error-boundaries/

[49] Релиз Next.js 9.3 : https://nextjs.org/blog/next-9-3

[50] React Table v7 знаменует собой результат многолетней работы по рефакторингу всей библиотеки в утилиту для построения таблиц на хуках, не зависящую от интерфейса пользователя / стиля / разметки: https://github.com/tannerlinsley/react-table/releases/tag/v7.0.0

[51] Однофайловые React компоненты уже здесь : https://www.swyx.io/writing/react-sfcs-here/

[52] Как показать и скрывать элементы в React : https://www.telerik.com/blogs/how-to-show-and-hide-elements-in-react

[53] Как мигрировать React приложение на TypeScript : https://www.sitepoint.com/how-to-migrate-a-react-app-to-typescript/

[54] 9 советов по созданию клевых переиспользуемых React компонентов : https://blog.bitsrc.io/9-tips-for-building-awesome-reusable-react-components-b91f4846a30a

[55] Как начать тестировать свои React приложения с помощью React Testing Library и Jest : https://www.freecodecamp.org/news/8-simple-steps-to-start-testing-react-apps-using-react-testing-library-and-jest/

[56] Когда фронтенд-разработчику стоит перейти с React на Vue, а когда это усложнит разработку: https://habr.com/ru/company/mailru/blog/491172/

[57] Vue.js 3 Tutorial — Создайте приложение с новыми функциями Vue 3 : https://vuejsdevelopers.com/2020/03/16/vue-js-tutorial/

[58] Шпаргалка по продвинутым трюкам во Vue : https://dev.to/adnanbabakan/vue-advanced-tricks-cheat-sheet-3ee3

[59] Vuex: зачем нам SPA State Management : https://dev.to/malgamves/vuex-why-we-need-spa-state-management-42cj

[60] Чему меня научил мой коммит в Angular: https://habr.com/ru/post/491788/

[61] Лучшая скрытая особенность Angular 9: строгая проверка шаблонов: https://auth0.com/blog/angular-9s-best-hidden-feature-strict-template-checking/

[62] Локализация Angular: зачем, что и как: https://buttercms.com/blog/angular-localization-the-why-what-and-how

[63] Валидация форм в Ember с помощью ember-cp-validations : https://medium.com/@srajas02/ember-form-validation-with-ember-cp-validations-724afcb95b49

[64] Тестовый набор Ember для CRUD приложений с mirage : https://medium.com/@srajas02/ember-test-case-for-a-crud-application-with-mirage-d6d9836bfee2

[65] The Ember Times — Issue No. 139: https://dev.to/embertimes/the-ember-times-issue-no-139-567l

[66] EmberJS Chennai Meetup — Feb 29th 2020: https://www.youtube.com/playlist?list=PLh_rF0Qob_sxjhg9qPTlXn-6EZzmmTHoc

[67] Почему Svelte — наш выбор для большого веб-проекта в 2020 году : https://github.com/feltcoop/why-svelte

[68] Создание собственного генератора статических сайтов для Svelte : https://www.m4rr.co/blog/building-my-own-static-site-generator-for-svelte/

[69] lukeed — Крошечная (134B) и быстрая утилита для генерации случайных идентификаторов фиксированной длины: https://github.com/lukeed/uid

[70] ls-lint — быстрый линтер имен файлов и директорий : https://github.com/loeffel-io/ls-lint

[71] COVID API — API для получения актуальной информации о COVID-19 : https://github.com/javieraviles/covidAPI

[72] sort-isostring — крошечная (110B) и быстрая утилита для сортировки строк дат согласно ISO 8601 : https://github.com/lukeed/sort-isostring

[73] Устройство расширений для браузера Firefox (WebExtensions): https://habr.com/ru/post/491630/

[74] Google Chrome наглядно покажет создателям сайтов, как люди с нарушениями зрения видят их веб-страницы: https://itc.ua/blogs/google-chrome-naglyadno-pokazhet-sozdatelyam-sajtov-kak-lyudi-s-narusheniyami-zreniya-vidyat-ih-veb-straniczy/

[75] Релиз Firefox 74: https://www.opennet.ru/opennews/art.shtml?num=52513

[76] Firefox 74, технические детали для разработчиков: https://tanalin.com/blog/2020/03/firefox-74/

[77] Доступен Firefox Preview 4.0 для Android: https://www.opennet.ru/opennews/art.shtml?num=52514

[78] 6 крупных причин попробовать новый Firefox Android preview : https://www.computerworld.com/article/3531974/firefox-android-preview.html

[79] Из-за опасного бага Avast отключает JavaScript-движок в своем антивирусе: https://xakep.ru/2020/03/12/avast-javascript/

[80] Искусственный интеллект в кибербезопасности: https://dou.ua/lenta/articles/ai-in-cybersecurity/

[81] Веб-дизайнер превращает старинные книги и брошюры 19 века в интерактивные сайты: https://vc.ru/design/112303-veb-dizayner-prevrashchaet-starinnye-knigi-i-broshyury-19-veka-v-interaktivnye-sayty

[82] NVIDIA призвала геймеров использовать свои ПК для борьбы с COVID-19: https://3dnews.ru/1005958/#5e6d3c5cb4182e4f36af0ebd

[83] Как квантовые компьютеры могут изменить мир: https://www.computerra.ru/261820/kak-kvantovye-kompyutery-mogut-izmenit-mir/

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

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

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

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