The weekly

Frontend Focus Looking fine with Firefox 89 https://hacks.mozilla.org/2021/06/looking-fine-with-firefox-89/ Useful VS Code Extensions For Front-End Developers https://www.smashingmagazine.com/2021/05/useful-vs-code-extensions-web-developers/ New CSS functional pseudo-class selectors :is() and :where() https://web.dev/css-is-and-where/ We need to talk about WCAG. https://level-level.com/blog/we-need-to-talk-about-wcag/ The perfect link https://a11y-collective.com/blog/the-perfect-link/ Front-End Testing is For Everyone https://css-tricks.com/front-end-testing-is-for-everyone/ Inherit, initial, unset, revert https://www.quirksmode.org/blog/archives/2021/06/inherit_initial.html Trigonometry in CSS and JavaScript: Introduction to Trigonometry https://tympanus.net/codrops/2021/06/01/trigonometry-in-css-and-javascript-introduction-to-trigonometry/ A Thorough Analysis of CSS-in-JS https://css-tricks.com/a-thorough-analysis-of-css-in-js/ How to Code a Crosshair Mouse Cursor with Distortion Hover Effect https://tympanus.net/codrops/2021/05/26/how-to-code-a-crosshair-mouse-cursor-with-distortion-hover-effect/ Fluid typography https://fluid-typography.netlify.app/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories A New Way To Reduce Font Loading Impact: CSS Font Descriptors https://www.smashingmagazine.com/2021/05/reduce-font-loading-impact-css-descriptors/ CSS Container Queries For Designers https://ishadeed.com/article/container-queries-for-designers/ Should DevTools teach the CSS cascade? https://www.stefanjudis.com/blog/should-devtools-teach-the-css-cascade/ CSS Container Queries: Use-Cases And Migration Strategies https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/ 25 Years of CSS https://meyerweb.com/eric/thoughts/2021/05/25/25-years-of-css/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Sparkplug — a non-optimizing JavaScript compiler https://v8.dev/blog/sparkplug Jest 27: New Defaults for Jest, 2021 edition https://jestjs.io/blog/2021/05/25/jest-27 A Thorough Analysis of CSS-in-JS https://css-tricks.com/a-thorough-analysis-of-css-in-js/ Building A Rich Text Editor (WYSIWYG) https://www.smashingmagazine.com/2021/05/building-wysiwyg-editor-javascript-slatejs/ The modern guide to React state patterns https://blog.logrocket.com/modern-guide-react-state-patterns/ New Standards to Access Device Hardware using JavaScript https://blog.bitsrc.io/new-standards-to-access-user-device-hardware-using-javascript-86b0c156dd3d Pinia, an Alternative Vue.js Store https://vueschool.io/articles/vuejs-tutorials/pinia-an-alternative-vue-js-store/ Get Started With React By Building A Whac-A-Mole Game https://www.smashingmagazine.com/2021/05/get-started-whac-a-mole-react-game/ What’s the best place to host Next.js site? https://kontent.ai/blog/comparison-of-jamstack-hosting-platforms-for-next-js Boring Avatars: React Library to Generate Custom Avatars https://boringavatars.com/ CandyGraph: A Fast, Flexible 2D Plotting Library https://www.npmjs.com/package/candygraph NocoDB: An Open Source Airtable-a-Like https://github.com/nocodb/nocodb I finally escaped Node (and you can too) https://acco.io/i-escaped-node React API evolution https://frantic.im/react-api-evolution Improve the Performance of your React Forms https://epicreact.dev/improve-the-performance-of-your-react-forms/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly How To Create Your First Flow In Node-RED https://www.youtube.com/watch?v=cVWVr_T7kQ0 Introducing WebContainers: Run Node.js natively in your browser https://blog.stackblitz.com/posts/introducing-webcontainers/ Announcing Vendure v1.0 https://www.vendure.io/blog/2021/05/announcing-vendure-v1.0/ Deep Dive into Rust for Node.js Developers https://itnext.io/deep-dive-into-rust-for-node-js-developers-5faace6dc71f Snyk takes on responsibility for Node.js ecosystem vulnerability disclosure program https://snyk.io/blog/snyk-takes-on-node-js-ecosystem-vulnerability-disclosure-program/ ts-node v10 https://typestrong.org/ts-node/ Send cross platform native notifications using Node.js. https://github.com/mikaelbr/node-notifier ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus CSS Container Queries For Designers https://ishadeed.com/article/container-queries-for-designers/ 25-years-of-css https://meyerweb.com/eric/thoughts/2021/05/25/25-years-of-css/ CSS Container Queries: Use-Cases And Migration Strategies https://www.smashingmagazine.com/2021/05/css-container-queries-use-cases-migration-strategies/ An Experimental 'Follow' Feature Coming to Chrome? https://blog.chromium.org/2021/05/an-experiment-in-helping-users-and-web.html Finally Understanding PNG https://compress-or-die.com/Understanding-PNG Making Disabled Buttons More Inclusive https://css-tricks.com/making-disabled-buttons-more-inclusive/ Container Queries in Web Components https://mxb.dev/blog/container-queries-web-components/ Understanding Easing Functions For CSS Animations And Transitions https://www.smashingmagazine.com/2021/04/easing-functions-css-animations-transitions/ Embedding Google Forms in a Static Site https://spin.atomicobject.com/2021/05/20/embedding-google-forms/ How to set browser flags in Chromium https://web.dev/browser-flags/ Euismod: An Interactive Resource to Learn CSS Grid https://www.euismod.dev/#/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Learn CSS https://web.dev/learn/css/ DevTools for CSS layouts 2021 edition https://chenhuijing.com/blog/devtools-for-css-layouts-2021-edition/#%F0%9F%92%BB 82% of developers get this 3 line CSS quiz wrong https://lea.verou.me/2021/05/82-of-developers-get-this-3-line-css-quiz-wrong/ Container Queries in Web Components https://mxb.dev/blog/container-queries-web-components/ 3D iMac - CSS Only https://codepen.io/Adir-SL/pen/JjWXZEq 5 steps to faster web fonts https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly DOM Events: A Way to Visualize and Experiment with the DOM Event System https://domevents.dev/ Introducing WebContainers: Run Node.js natively in your browser https://blog.stackblitz.com/posts/introducing-webcontainers/ Parcel 2 beta 3 https://v2.parceljs.org/blog/beta3/ 2D Optics Demos in Javascript https://www.philipzucker.com/aesthetic-javascript-eduction/ A Complete Beginner's Guide to Next.js https://www.youtube.com/watch?v=dgKSqz3it50 How to Create Reusable Web Components with Lit and Vue https://dval.dev/blog/lit-web-components-tutorial/ Tree-Shaking: A Reference Guide https://www.smashingmagazine.com/2021/05/tree-shaking-reference-guide/ Embedding Google Forms in a Static Site https://spin.atomicobject.com/2021/05/20/embedding-google-forms/ TypeScript is testing https://www.briefs.fm/3-minutes-with-kent/223 Frontend Development in 2021 https://www.youtube.com/watch?v=HgJ0S_9R8ek Typehole: VS Code Tool to Automatically Generate TypeScript Types and Interfaces https://github.com/rikukissa/typehole Sublime Text 4 https://www.sublimetext.com/blog/articles/sublime-text-4 A Boilerplate for SSR’d Vite, React 17, and TypeScript 4.3 https://blog.jonlu.ca/posts/vite Vuestic UI 1.0: A Vue.js 3.0 UI Framework https://vuestic.dev/ ReacType 7.0: A Visual Prototyping Tool for React Developers https://reactype.io/#reactype7 trombone.js https://jdauriemma.com/trombone.js/ Recoil 0.3.0 https://recoiljs.org/blog/2021/05/14/0.3.0-released/ Why you shouldn't put refs in a dependency array https://epicreact.dev/why-you-shouldnt-put-refs-in-a-dependency-array/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus 5 steps to faster web fonts https://iainbean.com/posts/2021/5-steps-to-faster-web-fonts/ Introducing Firefox’s new Site Isolation Security Architecture https://hacks.mozilla.org/2021/05/introducing-firefox-new-site-isolation-security-architecture/ Google Docs Shifting to Canvas Based Rendering https://workspaceupdates.googleblog.com/2021/05/Google-Docs-Canvas-Based-Rendering-Update.html Frontend Development in 2021 https://www.youtube.com/watch?v=HgJ0S_9R8ek Learn CSS https://web.dev/learn/css/ Building a media scroller component https://web.dev/building-a-media-scroller-component/ No, Utility Classes Aren't the Same As Inline Styles https://frontstuff.io/no-utility-classes-arent-the-same-as-inline-styles Enough with the role-play—let’s get back to the basics https://www.tpgi.com/enough-with-the-role-play-lets-get-back-to-the-basics/ Our plans to improve navigation on GOV.UK https://gds.blog.gov.uk/2021/05/17/our-plans-to-improve-navigation-on-gov-uk/ Distributed Persistent Rendering (DPR) https://css-tricks.com/distributed-persistent-rendering-dpr/ What do Lighthouse Scores look like across the web? https://www.tunetheweb.com/blog/what-do-lighthouse-scores-look-like-across-the-web/ Cumulative Layout Shift: Measure and Avoid Visual Instability https://calibreapp.com/blog/cumulative-layout-shift DOM EVENTS https://domevents.dev/ Beautiful hand-crafted SVG icons, https://heroicons.com/ SVG Filter Builder: Create and Learn About SVG Filters in A Drag & Drop Designer https://svgfilters.com/ Fast & Professional Email Editor https://dragit.io/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Web History – Chapter 8: CSS https://css-tricks.com/chapter-8-css/ Release Notes for Safari Technology Preview 124 https://webkit.org/blog/11672/release-notes-for-safari-technology-preview-124/ A Primer On CSS Container Queries https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/ Next Gen CSS: @container https://css-tricks.com/next-gen-css-container/ Performance-testing the Google I/O site https://jakearchibald.com/2021/io-site-perf/ Support (Not) Unknown https://www.oddbird.net/2021/05/14/support-unknown/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Angular v12 is now available https://blog.angular.io/angular-v12-is-now-available-32ed51fbfd49 Babel is used by millions, so why are we running out of money? https://babeljs.io/blog/2021/05/10/funding-update.html Deno 1.10 Release Notes https://deno.com/blog/v1.10 Announcing TypeScript 4.3 RC https://devblogs.microsoft.com/typescript/announcing-typescript-4-3-rc/ Lessons on Writing JavaScript and React from ClojureScript https://jerue.org/blog/lessons-on-writing-javascript-and-react-from-clojurescript/ Performance-testing the Google I/O site https://jakearchibald.com/2021/io-site-perf/ JWT should not be your default for sessions https://evertpot.com/jwt-is-a-bad-default/ mo.js 1: A Motion Graphics Toolbelt for the Web https://mojs.github.io/ Elder.js: An 'SEO-First' Svelte-Based Framework https://elderguide.com/tech/elderjs/ Prettier 2.3: The Opinionated Code Formatter https://prettier.io/blog/2021/05/09/2.3.0.html Spearmint: A Simpler Way to Test Your React App https://www.spearmintjs.com/ Eva.js: A Front-End Game Engine for Creating Interactive Projects https://eva.js.org/#/ Introduction to HTTP Cookies https://dev.to/lindaojo/introduction-to-http-cookies-1pn2 API Design for a React Tree Table https://www.robinwieruch.de/react-tree-list Vision Camera 2.0: A Powerful Camera for React Native Apps https://github.com/cuvent/react-native-vision-camera Don't Solve Problems, Eliminate Them https://kentcdodds.com/blog/don-t-solve-problems-eliminate-them ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly Node v14.17.0 https://nodejs.org/en/blog/release/v14.17.0/ zx: A Tool for Writing Better Shell Scripts https://github.com/google/zx JWT should not be your default for sessions https://evertpot.com/jwt-is-a-bad-default/ Node.js Docker Cheatsheet https://github.com/OWASP/CheatSheetSeries/blob/master/cheatsheets/NodeJS_Docker_Cheat_Sheet.md How to Implement a Simple Task Queue in Node.js https://www.sitepoint.com/implement-task-queue-node-js/ Have you tried Deno yet? https://www.youtube.com/watch?v=4mS1yoPud1Q a12n-server: A 'Ready-to-Launch' User and Authentication System https://github.com/curveball/a12n-server ShellJS - Unix shell commands for Node.js https://github.com/shelljs/shelljs How to Parse and Annotate PDFs in Node https://spin.atomicobject.com/2021/05/04/tools-modifying-pdfs/ CLI app helper https://github.com/sindresorhus/meow Microsoft SQL Server client for Node.js https://github.com/tediousjs/node-mssql ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Deno Weekly Deno 1.10 Release Notes https://deno.com/blog/v1.10 How has your experience with Deno been so far? https://www.reddit.com/r/javascript/comments/n9cp8n/askjs_how_has_your_experience_with_deno_been_so/ Testable JavaScript/TypeScript Documentation Code Blocks Coming to Deno Soon https://twitter.com/caspervonb/status/1390085607431540738 Rewriting Deno’s Testing Tools https://caspervonb.medium.com/rewriting-denos-testing-tools-b5f8801bc567 ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus Bootstrap 5 https://blog.getbootstrap.com/2021/05/05/bootstrap-5/ Can I Email..? Support Tables for HTML and CSS in Emails https://www.caniemail.com/ A Primer On CSS Container Queries https://www.smashingmagazine.com/2021/05/complete-guide-css-container-queries/ Next Gen CSS: @container https://css-tricks.com/next-gen-css-container/ Optimizing Web Vitals using Lighthouse https://web.dev/optimize-vitals-lighthouse/ How we use Web Components at GitHub https://github.blog/2021-05-04-how-we-use-web-components-at-github/ Web Accessibility for Newbies https://levelup.gitconnected.com/web-accessibility-for-newbies-1098fa15f9f0 What I Learned by Relearning HTML https://www.dannyguo.com/blog/what-i-learned-by-relearning-html Practical Use Cases For CSS Variables https://ishadeed.com/article/practical-css-variables/ Using Computer Modern on the web https://www.checkmyworking.com/cm-web-fonts/ Bootstarters: A Free Set of Bootstrap 5 Templates https://www.bootstarters.com/ Awesome Landing Page https://github.com/nordicgiant2/awesome-landing-page ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories The Humble <img> Element And Core Web Vitals https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ Mantine – React components library with dark theme support https://mantine.dev/ Collection of common CSS mistakes, and how to fix them https://csshell.dev/ Is CSS a Programming Language? https://css-tricks.com/is-css-a-programming-language/ The State of CSS Cross-Browser Development https://ishadeed.com/article/cross-browser-development/ 16px or Larger Text Prevents iOS Form Zoom https://css-tricks.com/16px-or-larger-text-prevents-ios-form-zoom/ New WebKit Features in Safari 14.1 https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly How we use Web Components at GitHub https://github.blog/2021-05-04-how-we-use-web-components-at-github/ zx: A Tool for Writing Better Shell Scripts https://github.com/google/zx Introducing CloudFront Functions – Run Your Code at the Edge with Low Latency at Any Scale https://aws.amazon.com/blogs/aws/introducing-cloudfront-functions-run-your-code-at-the-edge-with-low-latency-at-any-scale/ Bootstrap 5 https://blog.getbootstrap.com/2021/05/05/bootstrap-5/ Dependency Managers Don’t Manage Your Dependencies https://cpojer.net/posts/dependency-managers-dont-manage-your-dependencies Hosting SQLite databases on Github Pages https://phiresky.github.io/blog/2021/hosting-sqlite-databases-on-github-pages/ React Framework Comparison: Gatsby, Next.js, Blitz, Redwood https://www.youtube.com/watch?v=dfMhRYOtglg TypeScript Function Syntaxes https://kentcdodds.com/blog/typescript-function-syntaxes Update URL query parameters as you type in the input using JavaScript https://www.amitmerchant.com/update-url-query-parameters-as-you-type-in-the-input-using-javascript/ Create a satellite tracker from scratch in 30 lines of JavaScript https://dev.to/omar4ur/create-a-satellite-tracker-from-scratch-in-30-lines-of-javascript-32gk Mantine: A New React Component Library https://mantine.dev/ Pts: A Library for Visualization and Creative Coding https://ptsjs.org/ How to Parse and Annotate PDFs in Node https://spin.atomicobject.com/2021/05/04/tools-modifying-pdfs/ Command-line JSON processing tool https://github.com/antonmedv/fx Build Tool for HTML Applications https://github.com/sinclairzx81/hammer Building GraphQL APIs on Ethereum https://dev.to/dabit3/building-graphql-apis-on-ethereum-4poa Is 0kb of JavaScript in your Future? https://dev.to/this-is-learning/is-0kb-of-javascript-in-your-future-48og Next.js 10.2 https://nextjs.org/blog/next-10-2 Vite 2.0 Crash Course https://www.youtube.com/watch?v=LQQ3CR2JTX8 Super Simple Start to Remix https://kentcdodds.com/blog/super-simple-start-to-remix ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly Hello, Modules! https://blog.sindresorhus.com/hello-modules-d1010b4e777b Dependency Managers Don’t Manage Your Dependencies https://cpojer.net/posts/dependency-managers-dont-manage-your-dependencies Node v16.1.0 https://nodejs.org/en/blog/release/v16.1.0/ Build a SaaS Platform with Stripe https://jonmeyers.io/blog/build-a-saas-platform-with-stripe terminal-image https://github.com/sindresorhus/terminal-image node-dev 7.0: Zero-Conf Node Process Restarting https://github.com/fgnass/node-dev Dotenv 9.0: Load Environment Variables From .env in Node https://github.com/motdotla/dotenv sitemap.js 7.0: Sitemap Generation Library and CLI Tool https://github.com/ekalinin/sitemap.js The Braintree Node.js Library 3.4 https://github.com/braintree/braintree_node MapSCII - The Whole World In Your Console https://github.com/rastapasta/mapscii ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus The History of CSS https://css-tricks.com/chapter-8-css/ The Humble <img> Element And Core Web Vitals https://www.smashingmagazine.com/2021/04/humble-img-element-core-web-vitals/ New WebKit Features in Safari 14.1 https://webkit.org/blog/11648/new-webkit-features-in-safari-14-1/ How to Create Actions for Selected Text With the Selection API https://css-tricks.com/how-to-create-actions-for-selected-text-with-the-selection-api/ Performance-testing the Google I/O site https://jakearchibald.com/2021/io-site-perf/ The State of CSS Cross-Browser Development https://ishadeed.com/article/cross-browser-development/ CQFill: A Polyfill for CSS Container Queries https://github.com/jsxtools/cqfill Iconic: A Free Set of 'Do-what-you-want' Pixel-Perfect Icons https://iconic.app/ CSS Filters Generator: A Live Playground for CSS Filters https://justcode.today/filters/ Eva.js: A Frontend Game Engine for Creating Interactive Game Projects https://github.com/eva-engine/eva.js QuickSnippets: Categorized Code Snippets Sourced from Tweets https://quicksnippets.dev/?category=css ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories A Complete Guide to Custom Properties https://css-tricks.com/a-complete-guide-to-custom-properties/ A Guide To Newly Supported, Modern CSS Pseudo-Class Selectors https://www.smashingmagazine.com/2021/04/guide-supported-modern-css-pseudo-class-selectors/ Become a better frontend developer. https://www.frontendpractice.com/ Practical Use Cases For CSS Variables https://ishadeed.com/article/practical-css-variables/ Sortable Table Columns https://adrianroselli.com/2021/04/sortable-table-columns.html Compat2021: Eliminating five top compatibility pain points on the web https://web.dev/compat2021/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Babel 7.14.0 Released https://babeljs.io/blog/2021/04/29/7.14.0 What's Next, The Future of Node.js https://www.youtube.com/watch?v=vrnToZP47Ro redux v4.1.0 https://github.com/reduxjs/redux/releases/tag/v4.1.0 The lazy-loading property pattern in JavaScript https://humanwhocodes.com/blog/2021/04/lazy-loading-property-pattern-javascript/ Portable apps with Go and Next.js https://v0x.nl/articles/portable-apps-go-nextjs How to Use ECMAScript Modules in Node.js https://dmitripavlutin.com/ecmascript-modules-nodejs/ Using asynchronous web APIs from WebAssembly https://web.dev/asyncify/ Webpack Tutorial for Beginners: A Complete Step-by-Step Guide for 2021 https://www.codeinwp.com/blog/webpack-tutorial-for-beginners/ How to Securely Implement OAuth in Vue.js https://fusionauth.io/blog/2020/08/06/securely-implement-oauth-vuejs Realtime Chat App with React, Node.js, Socket.io https://www.youtube.com/watch?v=HggSXt1Hzfk Modeling Permissions as Types in Typescript https://spin.atomicobject.com/2021/04/26/modeling-permissions-types-typescript/ You Can Label a JavaScript if Statement https://css-tricks.com/you-can-label-a-javascript-if-statement/ QuickSnippets: Categorized Code Snippets Sourced from Tweets https://quicksnippets.dev/?category=javascript React Table Guide And Best React Table Examples https://flatlogic.com/blog/react-table-guide-and-best-react-table-examples/ 400+ JavaScript Interview Questions 🎓 With Answers 🌠 https://dev.to/worldindev/400-javascript-interview-questions-with-answers-2fcj Why React needs a key prop https://epicreact.dev/why-react-needs-a-key-prop/ ---------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly How to Use ECMAScript Modules in Node.js https://dmitripavlutin.com/ecmascript-modules-nodejs/ What's Next, The Future of Node.js https://www.youtube.com/watch?v=vrnToZP47Ro Do you use nodejs for scripting instead of bash? https://lobste.rs/s/bsv2yp/do_you_use_nodejs_for_scripting_instead ⚡ Tiny web framework as a replacement of Express https://github.com/talentlessguy/tinyhttp My Favorite Microservice Design Patterns for Node.js https://blog.bitsrc.io/my-favorite-microservice-design-patterns-for-node-js-fe048c635d83 Find unused npm dependencies https://joshtronic.com/2021/04/25/find-unused-npm-dependencies/ Realtime Chat App with React, Node.js, Socket.io https://www.youtube.com/watch?v=HggSXt1Hzfk You Need To See These ES12 Features https://www.youtube.com/watch?v=1hFGxkJcTHU Build an HTTPS-intercepting JavaScript proxy in 30 seconds flat https://httptoolkit.tech/blog/javascript-mitm-proxy-mockttp/ How to use Binary UUIDs in Prisma https://hinty.io/ivictbor/how-to-use-binary-uuids-in-prisma/ Is Learning GO worth It if you know Node.js? https://news.ycombinator.com/item?id=26939626 Node.JS framework for building web applications https://foalts.org/ A tool to selectively deploy only the Firebase Functions that changed. https://github.com/haroldadmin/functions-differ pkg 5.1.0: Package Your Node Project Into an Executable https://github.com/vercel/pkg ---------------------------- for more -subscribe to the channel https://t.me/webWekkly