Frontend Weekly Digest (25 Feb – 3 Mar 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 [1] | CSS [2] | Javascript [3]
Web-development
• 
Portfolio Rework Part 1: Animation, Micro interaction & SVG [4]
• 
Static Site Generators: A Beginner’s Guide [5]
- Accessibility:
•
When Is A Button Not A Button? [6]
•
Accessibility is not a “React Problem” [7]
•
Web Accessibility Guide [8] — A curated collection of web accessibility tips, tricks, and best practices.
•
ARIA Authoring Practices on Accessible Date Pickers [9]
•
An accessibility analysis of the top 1,000,000 home pages [10]
•
Using Artificial Intelligence to Generate Alt Text on Images [11]
- Performance:
•
A Bit of Performance [12]
•
Serve Responsive Images [13]
- Animations:
•
SVG Filter Effects: Moving Forward [14]
•
Text Trail Effect [15]
CSS
• 
Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints [16]
• 
The CSS mental model [17] by PPK
• 
The CSS Working Group agreed on adding many math functions [18]
• 
Breaking Boxes With CSS Fragmentation [19] by Rachel Andrew
• 
Recreating the Facebook Messenger Gradient Effect with CSS [20]
• 
CSS selectors cheatsheet & details [21]
• 
Lesser-known CSS properties in GIFs [22]
• 
8 Little Videos About the Firefox Shape Path Editor [23]
• 
Do CSS Custom Properties Beat Sass Loops? [24]
• 
Look Ma, No Media Queries! Responsive Layouts Using CSS Grid [25]
JavaScript
• 
JavaScript SEO: Welcome to a new series! [26]
• 
How to write simple modern JavaScript apps with Webpack and progressive web techniques [27]
• 
Releases: Apollo Client 2.5 [28], Ember 3.8 [29], GSAP 2.1 [30]
• 
Understanding a Performance Issue with “Polymorphic” JSON Data [31]
- Theory:
•
The Complete Guide to Loops in JavaScript [32]
•
What's the longest keyword sequence in Javascript? [33]
•
Callbacks: The Definitive Guide [34]
React:
•
We migrated to Next.js to serve our home page 7.5× faster [35]
•
Improving Performance in React Functional Components using React.memo() [36]
•
How the “Golden Rule” of React components can help you write better code [37]
•
Writing Tests for React Applications Using Jest and Enzyme [38]
•
Redux explained in 1 minute [39]
•
8 reasons to use styled-components [40]
VueJS:
•
Sliding In And Out Of Vue.js [41]
•
Creating Custom Directives in Vue.js [42]
•
One more example of abstract component in Vue.js [43]
Angular:
•
MVC in an Angular World [44]
•
Announcing Angular Loadable (ngx-loadable ~ 2.2kB) [45]
•
How to Transfer Files and Data Between Angular Clients and Node.js Backends [46]
- Libs & Plugins:
•
FrenchKiss.js [47] — a blazing fast lightweight i18n library written in JavaScript, working both in the browser and NodeJS environments. It provides a simple and really fast solution for handling internationalization.
•
terser [48] — A JavaScript parser and mangler/compressor toolkit for ES6+.
•
cnbuilder [49] — Yet another classname string builder
•
Zero Server: zero configuration web framework [50]
•
npmf: fetch quick info of a npm pacakge using terminal [51]
Thanks for reading! Feel free to send us your articles or fresh useful content you want to see in the next digest.
Автор: derSmoll
Источник [52]
Сайт-источник PVSM.RU: https://www.pvsm.ru
Путь до страницы источника: https://www.pvsm.ru/javascript/310478
Ссылки в тексте:
[1] Web-development: #webdev
[2] CSS: #css
[3] Javascript: #js
[4] Portfolio Rework Part 1: Animation, Micro interaction & SVG: https://stephaniewalter.design/blog/portfolio-rework-part-1-animation-micro-interaction-svg/
[5] Static Site Generators: A Beginner’s Guide: https://www.sitepoint.com/static-site-generators/
[6] When Is A Button Not A Button?: https://www.smashingmagazine.com/2019/02/buttons-interfaces/
[7] Accessibility is not a “React Problem” : https://www.netlify.com/blog/2019/02/25/accessibility-is-not-a-react-problem/
[8] Web Accessibility Guide: https://webaccessibility.guide/
[9] ARIA Authoring Practices on Accessible Date Pickers: https://a11ywins.tumblr.com/post/182992115383/aria-authoring-practices-on-accessible-date
[10] An accessibility analysis of the top 1,000,000 home pages: https://webaim.org/projects/million/
[11] Using Artificial Intelligence to Generate Alt Text on Images: https://css-tricks.com/using-artificial-intelligence-to-generate-alt-text-on-images/
[12] A Bit of Performance: https://www.kizu.ru/a-bit-of-performance/
[13] Serve Responsive Images: https://web.dev/fast/serve-responsive-images
[14] SVG Filter Effects: Moving Forward: https://tympanus.net/codrops/2019/02/26/svg-filter-effects-moving-forward/
[15] Text Trail Effect: https://tympanus.net/codrops/2019/02/27/text-trail-effect/
[16] Responsive Designs and CSS Custom Properties: Defining Variables and Breakpoints: https://css-tricks.com/responsive-designs-and-css-custom-properties-defining-variables-and-breakpoints/
[17] The CSS mental model: https://www.quirksmode.org/blog/archives/2019/02/css_for_javascr_1.html
[18] The CSS Working Group agreed on adding many math functions: https://twitter.com/bdc/status/1100921258839953408
[19] Breaking Boxes With CSS Fragmentation: https://www.smashingmagazine.com/2019/02/css-fragmentation/
[20] Recreating the Facebook Messenger Gradient Effect with CSS: https://css-tricks.com/recreating-the-facebook-messenger-gradient-effect-with-css/
[21] CSS selectors cheatsheet & details: https://medium.com/design-code-repository/css-selectors-cheatsheet-details-9593bc204e3f
[22] Lesser-known CSS properties in GIFs: https://www.designyourway.net/blog/css-html/lesser-known-css-properties-in-gifs/
[23] 8 Little Videos About the Firefox Shape Path Editor: https://blog.bitsrc.io/8-little-videos-about-the-firefox-shape-path-editor-96a12c7cd3b6
[24] Do CSS Custom Properties Beat Sass Loops?: https://css-tricks.com/do-css-custom-properties-beat-sass-loops/
[25] Look Ma, No Media Queries! Responsive Layouts Using CSS Grid: https://css-tricks.com/look-ma-no-media-queries-responsive-layouts-using-css-grid/
[26] JavaScript SEO: Welcome to a new series!: https://www.youtube.com/watch?v=wSwzfEn5-6A
[27] How to write simple modern JavaScript apps with Webpack and progressive web techniques: https://medium.freecodecamp.org/how-to-write-simple-modern-javascript-apps-with-webpack-and-progressive-web-techniques-a30354eab214
[28] Apollo Client 2.5: https://blog.apollographql.com/announcing-apollo-client-2-5-c12230cabbb7
[29] Ember 3.8: https://www.emberjs.com/blog/2019/02/27/ember-3-8-released.html
[30] GSAP 2.1: https://greensock.com/2-1
[31] Understanding a Performance Issue with “Polymorphic” JSON Data: https://medium.com/wolfram-developers/understanding-a-performance-issue-with-polymorphic-json-data-e7e4cd079be0
[32] The Complete Guide to Loops in JavaScript: https://medium.freecodecamp.org/the-complete-guide-to-loops-in-javascript-f5e242921d8c
[33] What's the longest keyword sequence in Javascript?: https://gist.github.com/lhorie/c0d9fd9b2aa215f4984f3ce1c8fd01bf
[34] Callbacks: The Definitive Guide: https://itnext.io/the-definitive-guide-to-callbacks-in-javascript-44a39c065292
[35] We migrated to Next.js to serve our home page 7.5× faster: https://www.manifold.co/blog/we-migrated-to-next-js-to-serve-our-home-page-7-5-faster-559443219c84
[36] Improving Performance in React Functional Components using React.memo(): https://blog.bitsrc.io/improve-performance-in-react-functional-components-using-react-memo-b2e80c11e15a
[37] How the “Golden Rule” of React components can help you write better code: https://medium.freecodecamp.org/how-the-golden-rule-of-react-components-can-help-you-write-better-code-127046b478eb
[38] Writing Tests for React Applications Using Jest and Enzyme: https://css-tricks.com/writing-tests-for-react-applications-using-jest-and-enzyme/
[39] Redux explained in 1 minute: https://poet.codes/e/KMXQEO2gquN
[40] 8 reasons to use styled-components: https://blog.logrocket.com/8-reasons-to-use-styled-components-cf3788f0bb4d
[41] Sliding In And Out Of Vue.js: https://www.smashingmagazine.com/2019/02/vue-framework-third-party-javascript/
[42] Creating Custom Directives in Vue.js: https://medium.com/js-dojo/creating-custom-directives-in-vue-js-286142392fd8
[43] One more example of abstract component in Vue.js: https://medium.com/js-dojo/one-more-example-of-abstract-component-in-vue-js-6e80293f7a38
[44] MVC in an Angular World: https://scotch.io/tutorials/mvc-in-an-angular-world
[45] Announcing Angular Loadable (ngx-loadable ~ 2.2kB): https://medium.com/@zamamohammed/announcing-angular-loadable-ngx-loadable-2-2kb-4ef7e6321784
[46] How to Transfer Files and Data Between Angular Clients and Node.js Backends: https://www.twilio.com/blog/transfer-files-data-javascript-applications-angular-node-js
[47] FrenchKiss.js : https://github.com/koala-interactive/frenchkiss.js
[48] terser: https://github.com/terser-js/terser
[49] cnbuilder: https://github.com/xobotyi/cnbuilder
[50] Zero Server: zero configuration web framework: https://zeroserver.io/
[51] npmf: fetch quick info of a npm pacakge using terminal: https://github.com/rousan/npmf
[52] Источник: https://habr.com/ru/post/442470/?utm_campaign=442470
Нажмите здесь для печати.