Frontend Weekly Digest (3 – 9 June 2019)
This week we issue a really huge selection of all the essential news you might have missed on Front-end development. Make sure to check the latest updates on CSS, HTML, and JavaScript.
Web-development
• How to Use the Web Share API [1]
• The SEO Requirements for a New Website [2]
- Performance:
• Extract critical CSS [3]. Learn how to improve render times with critical CSS technique.
• Effectively boost your (mobile) website performance! [4]
- Accessibility:
• Building the most inaccessible site possible with a perfect Lighthouse score [5]
• Indicating focus to improve accessibility [6]
• The Anatomy of Accessible Forms: The Problem with Placeholders [7]
• Form accessibility: a practical guide [8]
• Web Accessibility In Context. [9] How do browsers and HTML support screen readers today?
- Animations:
• Inspirational Websites Roundup #5 [10]
• Awesome Demos Roundup #5 [11]
CSS
• Prevent Page Scrolling When a Modal is Open [12]
• Movin’ Modals Along a Path [13]
• The CSS Mindset [14]
• CSS Architecture — Folders & Files Structure [15]
• CSS Grid Level 2 – subgrid is coming to Firefox [16]
• Variable fonts and quirky custom axes [17]
• Keeping your CSS in JS clean [18]
JavaScript
• 
JSHeroes 2019 [19]
• How To Control Music With A PS4 DualShock and JavaScript [20]
• Enabling Modern JavaScript on npm [21]
• 
JavaScript: SEO Mythbusting [22]
• 
JAVASCRIPT SEO is DEAD! Now what? [23]
- Theory:
• Arrays in JavaScript [24]: From [0] to [ ‘H’, ‘E’, ‘R’, ‘O’ ]
• Magical, Mystical JavaScript Transducers [25]
React:
• Creating Animations Using React Spring [26]
• Top 5 skills to learn as a junior JavaScript developer [27]
• How I made my React app 4 times faster. [28]
• What’s the big deal with React hooks? [29]
• Cache your React event listeners to improve performance. [30]
Angular:
• Angular & RxJS: Async Pipe Deep Dive [31]
• A journey into Angular Animation [32]
• Angular CLI under the hood — builders demystified v2 [33]
• Angular: A Journey of one of the Most Popular Front End Tool in Today's Job Market [34]
VueJS:
• Tutorial: How To Make an Animated Interactive Vue.js Slider [35]
• Vue.js Gotchas. Common Fixes for Major Headaches [36]
• Building a Dynamic Tree Diagram with SVG and Vue.js [37]
- Ember:
•
Crash Log Podcast [38]: Product Hunt launch, speed vs. quality, integrations
•
EmberMap Podcast, Ep. 64 [39] — Open source isn't free
• React Response Hot Loading [40]
Thanks for reading! Feel free to send us your articles or fresh useful content you want to see in the next digest.
Автор: derSmoll
Источник [41]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/320388
Ссылки в тексте:
[1] How to Use the Web Share API: https://css-tricks.com/how-to-use-the-web-share-api/
[2] The SEO Requirements for a New Website: https://www.contentkingapp.com/academy/seo-requirements-new-website/
[3] Extract critical CSS: https://web.dev/extract-critical-css
[4] Effectively boost your (mobile) website performance!: https://medium.com/wehkamp-techblog/effectively-boost-your-mobile-website-performance-af6c16af75e6
[5] Building the most inaccessible site possible with a perfect Lighthouse score: https://www.matuzo.at/blog/building-the-most-inaccessible-site-possible-with-a-perfect-lighthouse-score/
[6] Indicating focus to improve accessibility: https://hacks.mozilla.org/2019/06/indicating-focus-to-improve-accessibility/
[7] The Anatomy of Accessible Forms: The Problem with Placeholders: https://www.deque.com/blog/accessible-forms-the-problem-with-placeholders/
[8] Form accessibility: a practical guide: https://itnext.io/form-accessibility-a-practical-guide-4062b7e2dd14
[9] Web Accessibility In Context.: https://www.smashingmagazine.com/2019/06/web-accessibility-context/
[10] Inspirational Websites Roundup #5: https://tympanus.net/codrops/2019/06/04/inspirational-websites-roundup-5/
[11] Awesome Demos Roundup #5: https://tympanus.net/codrops/2019/06/06/awesome-demos-roundup-5/
[12] Prevent Page Scrolling When a Modal is Open: https://css-tricks.com/prevent-page-scrolling-when-a-modal-is-open/?ref=heydesigner
[13] Movin’ Modals Along a Path: https://css-tricks.com/movin-modals-along-a-path/
[14] The CSS Mindset: https://mxb.dev/blog/the-css-mindset/
[15] CSS Architecture — Folders & Files Structure: https://medium.com/@elad/css-architecture-folders-files-structure-f92b40c78d0b?ref=heydesigner
[16] CSS Grid Level 2 – subgrid is coming to Firefox: https://hacks.mozilla.org/2019/06/css-grid-level-2-subgrid-is-coming-to-firefox/
[17] Variable fonts and quirky custom axes: https://rwt.io/typography-tips/variable-fonts-and-quirky-custom-axes
[18] Keeping your CSS in JS clean: https://medium.com/@montezume/keeping-your-css-in-js-clean-with-stylelint-8822c8c1543a?sk=92908ee873e92289421b319d95842530
[19] JSHeroes 2019: https://www.youtube.com/playlist?list=PLB9NqTp0uKrR8WFXitMvLMGd-kGGZ4RkX
[20] How To Control Music With A PS4 DualShock and JavaScript: https://itnext.io/how-to-control-music-with-a-ps4-dualshock-and-javascript-54237206c104
[21] Enabling Modern JavaScript on npm: https://jasonformat.com/enabling-modern-js-on-npm/
[22] JavaScript: SEO Mythbusting: https://www.youtube.com/watch?v=EZtCgrpa6ss&list=PLKoqnv2vTMUN6lFDz6qMBsz7-Jm8YRV9H&index=2&t=3s&linkId=68656091
[23] JAVASCRIPT SEO is DEAD! Now what?: https://www.youtube.com/watch?v=kdbL8n6FIgg&t=
[24] Arrays in JavaScript: https://medium.com/swlh/arrays-in-javascript-e64b873ad801
[25] Magical, Mystical JavaScript Transducers: https://jrsinclair.com/articles/2019/magical-mystical-js-transducers/
[26] Creating Animations Using React Spring: https://css-tricks.com/creating-animations-using-react-spring/
[27] Top 5 skills to learn as a junior JavaScript developer: https://zendev.com/2019/06/04/top-skills-to-learn-junior-javascript-developer.html
[28] How I made my React app 4 times faster.: https://hackernoon.com/how-i-made-my-react-app-4-times-faster-7b929479cac4
[29] What’s the big deal with React hooks?: https://itnext.io/whats-the-big-deal-with-react-hooks-d73145eb14e0
[30] Cache your React event listeners to improve performance.: https://medium.com/better-programming/cache-your-react-event-listeners-to-improve-performance-769bf74d3a4f
[31] Angular & RxJS: Async Pipe Deep Dive: https://medium.com/better-programming/angular-rxjs-async-pipe-deep-dive-2510b56f793a
[32] A journey into Angular Animation: https://medium.com/@GrandSchtroumpf/a-journey-into-angular-animation-f3360739c705
[33] Angular CLI under the hood — builders demystified v2: https://blog.angularindepth.com/angular-cli-under-the-hood-builders-demystified-v2-e73ee0f2d811
[34] Angular: A Journey of one of the Most Popular Front End Tool in Today's Job Market: https://www.freecodecamp.org/news/angular-a-journey-into-one-of-the-most-popular-front-end-tools-in-todays-job-market/
[35] Tutorial: How To Make an Animated Interactive Vue.js Slider: https://codepen.io/xdesro/post/tutorial-vue-slider
[36] Vue.js Gotchas. Common Fixes for Major Headaches: https://medium.com/swlh/vue-js-gotchas-common-fixes-for-major-headaches-ef22a903b8bc
[37] Building a Dynamic Tree Diagram with SVG and Vue.js: https://medium.com/@krutie/building-a-dynamic-tree-diagram-with-svg-and-vue-js-a5df28e300cd
[38] Crash Log Podcast: https://crashlog.transistor.fm/episodes/product-hunt-launch-speed-vs-quality-integrations
[39] EmberMap Podcast, Ep. 64: https://www.youtube.com/watch?v=cXhokDhT02Y&feature=youtu.be
[40] React Response Hot Loading: https://nullvoxpopuli.com/2019-06-01-react-response--hot-loading/
[41] Источник: https://habr.com/ru/post/455451/?utm_campaign=455451&utm_source=habrahabr&utm_medium=rss
Нажмите здесь для печати.