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

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

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

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

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

Дайджест свежих материалов из мира фронтенда за последнюю неделю №361 (15 — 21 апреля 2019) - 2 Веб-разработка

• Что такое GraphQL [4]
• Компания Mozilla представила платформу WebThings [5]
• Оптимизация размера сборки webpack [6]
• en Как отправить PWA в Google Play Store [7]
• en Валидация полей ввода с помощью HTML5 и регулярных выражений [8]
• en Файл SVG, декларативно и асинхронно встроенный в HTML [9]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №361 (15 — 21 апреля 2019) - 11 CSS

• Мистический inline-flex и что он делает [16]
• en Новости и демки CSS Subgrid [17]
• en CSS и accessibility [18]
• en CSS masonry с помощью flexbox, :nth-child() и order [19]
• en Затухание соседних элеметов при наведении курсора в CSS [20]
• en Официальное представление CSSBattle — первой игры в гольф кодом на CSS [21]
• en Pixel borders: SASS mixin для добавления пикселизированной обводки элементов, с настройками размеров, цветов и расположения [22]

Дайджест свежих материалов из мира фронтенда за последнюю неделю №361 (15 — 21 апреля 2019) - 18 JavaScript

Начата работа над переводом javascript.info [23] на русский [24] и и украинский [25] языки (текущая русская доступна на всем известном learn.javascript.ru [26]). Команда активистов ищет добровольцев для помощи в переводе статей для учебника.

• JavaScript Web Workers: руководство для начинающих [27]
• en video Динамический рендеринг для JS-приложений — JavaScript SEO [28]
• en Полифил ужасного globalThis в универсальном JavaScript [29]
• en 7 полезных хитростей JavaScript [30]
• en Как использовать консоль JavaScript за пределом console.log () [31]
• en Начало работы с Javascript — правильные инструменты и ресурсы (видео-интервью с Christian Heilmann) [32]
• en Когда использовать TypeScript — подробное руководство по распространенным сценариям [33]
• en Симуляция движений мыши [34]



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

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

Автор: alexzfort

Источник [66]

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

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

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

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

[2] CSS: #css

[3] Javascript: #js

[4] Что такое GraphQL: https://webdevblog.ru/chto-takoe-graphql/

[5] Компания Mozilla представила платформу WebThings: http://www.opennet.ru/opennews/art.shtml?num=50538

[6] Оптимизация размера сборки webpack: https://webdevblog.ru/optimizaciya-razmera-sborki-webpack/

[7] Как отправить PWA в Google Play Store: https://css-tricks.com/how-to-get-a-progressive-web-app-into-the-google-play-store/

[8] Валидация полей ввода с помощью HTML5 и регулярных выражений: https://code.tutsplus.com/tutorials/form-input-validation-using-only-html5-and-regex--cms-33095

[9] Файл SVG, декларативно и асинхронно встроенный в HTML : https://codepen.io/scottjehl/project/full/XrzdYk

[10] AMP Stories получили отдельный раздел в поисковой выдаче Google: https://www.searchengines.ru/amp-stories-place.html

[11] Три способа проверки, что Rel=preconnect Resource Hints работают: https://andydavies.me/blog/2019/04/17/three-ways-of-checking-your-rel-equals-preconnect-resource-hints-are-working/

[12] Оптимизация производительности с помощью Resource Hints: https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/

[13] В Cloudflare анонсировали AMP Real URL: https://blog.cloudflare.com/announcing-amp-real-url/

[14] Как создавать и анимировать повернутые наложения: https://tympanus.net/codrops/2019/04/18/how-to-create-and-animate-rotated-overlays/

[15] Креативная наглядная демонстрация Нотр-Дам со скролл-анимацией на WebGL: https://www.nytimes.com/interactive/2019/04/17/world/europe/notre-dame-cathedral-fire-spread.html

[16] Мистический inline-flex и что он делает: https://medium.com/@stasonmars/%D0%BC%D0%B8%D1%81%D1%82%D0%B8%D1%87%D0%B5%D1%81%D0%BA%D0%B8%D0%B8%CC%86-inline-flex-%D0%B8-%D1%87%D1%82%D0%BE-%D0%BE%D0%BD-%D0%B4%D0%B5%D0%BB%D0%B0%D0%B5%D1%82-35997951ff03

[17] Новости и демки CSS Subgrid : https://rachelandrew.co.uk/archives/2019/04/16/css-subgrid-news-and-demos/

[18] CSS и accessibility: https://www.quirksmode.org/blog/archives/2019/04/css_and_accessi.html

[19] CSS masonry с помощью flexbox, :nth-child() и order: https://tobiasahlin.com/blog/masonry-with-css/

[20] Затухание соседних элеметов при наведении курсора в CSS: https://www.trysmudford.com/blog/fade-out-siblings-css-trick/

[21] Официальное представление CSSBattle — первой игры в гольф кодом на CSS: https://medium.freecodecamp.org/introducing-cssbattle-the-first-css-code-golfing-game-88b7518df618

[22] Pixel borders: SASS mixin для добавления пикселизированной обводки элементов, с настройками размеров, цветов и расположения: https://nigelotoole.github.io/pixel-borders/

[23] javascript.info: https://javascript.info/

[24] на русский: https://github.com/javascript-tutorial/ru.javascript.info

[25] и украинский: https://github.com/javascript-tutorial/uk.javascript.info

[26] learn.javascript.ru: http://learn.javascript.ru/

[27] JavaScript Web Workers: руководство для начинающих: https://webdevblog.ru/javascript-web-workers-rukovodstvo-dlya-nachinajushhih/

[28] Динамический рендеринг для JS-приложений — JavaScript SEO: https://www.youtube.com/watch?v=CrzUP6MmBW4&feature=youtu.be

[29] Полифил ужасного globalThis в универсальном JavaScript: https://mathiasbynens.be/notes/globalthis

[30] 7 полезных хитростей JavaScript: https://davidwalsh.name/javascript-tricks

[31] Как использовать консоль JavaScript за пределом console.log (): https://medium.freecodecamp.org/how-to-use-the-javascript-console-going-beyond-console-log-5128af9d573b

[32] Начало работы с Javascript — правильные инструменты и ресурсы (видео-интервью с Christian Heilmann): https://christianheilmann.com/2019/04/18/getting-started-with-javascript-the-right-tools-and-resources-video-interview/

[33] Когда использовать TypeScript — подробное руководство по распространенным сценариям: https://khalilstemmler.com/articles/when-to-use-typescript-guide/

[34] Симуляция движений мыши: https://css-tricks.com/simulating-mouse-movement/

[35] Ответственный подход к JavaScript-разработке, часть 1: https://habr.com/ru/company/ruvds/blog/447576/

[36] Ускоряем JavaScript-код с использованием типа данных Set: https://habr.com/ru/company/ruvds/blog/447578/

[37] Анонимные функции в JavaScript: https://medium.com/devschacht/anonymous-functions-in-javascript-ff6b9ba85de0

[38] 12 концепций, которые прокачают ваш JavaScript: https://tproger.ru/translations/javascript-important-concepts/

[39] Основы JavaScript: осваиваем объекты: https://itnext.io/javascript-fundamentals-mastering-objects-7936db8156e0

[40] Как оптимизировать ваши приложения JavaScript с помощью циклов: https://mihail-gaberov.eu/optimizing-javascript-apps-loops/

[41] JavaScript для котиков: http://jsforcats.com/

[42] ES6 and Beyond >: https://hackernoon.com/es6-and-beyond-28aed8574e00

[43] Исследование скрытого потенциала массивов в JavaScript : https://areknawo.com/exploring-the-hidden-potential-of-javascript-arrays/

[44] Пишем одностраничное приложение с Flask и Vue.js: https://tproger.ru/translations/developing-app-with-flask-and-vue-js/

[45] Как кэшировать страницы по URL с помощью Vue, Vue Router и Keep Alive: https://itnext.io/yes-this-is-how-to-cache-pages-by-url-with-vue-vue-router-and-keep-alive-component-697ed76896e8

[46] Оптимизация производительности приложения Vue с помощью асинхронных компонентов: https://www.sitepoint.com/vue-async-components/

[47] Как построить воронку продаж на Vue.js: https://www.sitepoint.com/build-a-sales-funnel-with-vue/

[48] Мощь Named Transitions во Vue: https://css-tricks.com/the-power-of-named-transitions-in-vue/

[49] ReactRussia #1 @ OK: https://www.youtube.com/playlist?list=PLWvK_bLQje9gJqFfd8k31pK3WGzuI8grP

[50] Получем 60 кадров в секунду для анимации в React: https://alligator.io/react/getting-60fps-animations-in-react/

[51] Написание Redux-подобного простого middleware для React Hooks: https://medium.com/front-end-weekly/writing-redux-like-simple-middleware-for-react-hooks-b163724a7058

[52] useReducer vs useState в React: https://www.robinwieruch.de/react-usereducer-vs-usestate/

[53] Подробное рассмотрение React Memoize хуков: useRef, useCallback и useMemo: https://www.codebeast.dev/react-memoize-hooks-useRef-useCallback-useMemo/

[54] От Redux к хукам: тематическое исследование: https://staleclosures.dev/from-redux-to-hooks-case-study/

[55] Новый стиль написания React Redux с хуками без селекторов: https://medium.com/@dai_shi/new-react-redux-coding-style-with-hooks-without-selectors-5055d59ab753

[56] Шпаргалка по React хукам: решения частых проблем: https://blog.logrocket.com/react-hooks-cheat-sheet-unlock-solutions-to-common-problems-af4caf699e70

[57] Разбираемся в Angular Ivy: Incremental DOM и Virtual DOM: https://habr.com/ru/post/448048/

[58] Правильная работа с SEO в Angular на стороне сервера: https://medium.freecodecamp.org/angular-seo-done-right-with-server-side-rendering-7a71cec16a0c

[59] Быстрое погружение в то, как все складывается вместе в Angular: https://medium.com/javascript-in-plain-english/a-quick-dive-into-how-it-fits-together-in-angular-3524b062cb84

[60] Почему и как делать ленивую загрузку библиотек в Angular: https://medium.com/@tomastrajan/why-and-how-to-lazy-load-angular-libraries-a3bf1489fe24

[61] «Differential Loading» — новая функция в Angular CLI v8: https://dev.to/lacolaco/differential-loading-a-new-feature-of-angular-cli-v8-4jl

[62] PWA в Angular: SwPush и SwUpdate: https://medium.com/@arjenbrandenburgh/angulars-pwa-swpush-and-swupdate-15a7e5c154ac

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

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

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

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