The weekly

Node Weekly Best practices for creating a modern npm package https://snyk.io/blog/best-practices-create-modern-npm-package/ JavaScript bugs aplenty in Node.js ecosystem – found automatically https://nakedsecurity.sophos.com/2022/08/30/javascript-bugs-aplenty-in-node-js-ecosystem-found-automatically/ The Basics of Remix https://css-tricks.com/the-basics-of-remix/ Scrape Google Scholar Results https://serpdog.io/blog/scrape-google-scholar-results SafeQL Write SQL Queries With Confidence https://www.safeql.dev/ Favicons 7.0: A Favicon Generation Library https://github.com/itgalaxy/favicons Automatic N-API bindings for any Zig project. https://github.com/cztomsik/zig-napigen ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus WebKit Features in Safari 16.0 https://webkit.org/blog/13152/webkit-features-in-safari-16-0/ How To Improve Largest Contentful Paint for Faster Load Times https://calibreapp.com/blog/largest-contentful-paint Building the main navigation for a website https://web.dev/website-navigation/ Making Sense Of WAI-ARIA: A Comprehensive Guide https://www.smashingmagazine.com/2022/09/wai-aria-guide/ The Realities And Myths Of Contrast And Color https://www.smashingmagazine.com/2022/09/realities-myths-contrast-color/ What’s New With Forms in 2022? https://css-tricks.com/whats-new-with-forms-in-2022/ The Orton Effect - dreamy photo effect in CSS and React https://mikebifulco.com/posts/orton-effect-css-react The secret of successfully using multi window WebGL Canvas https://itnext.io/the-secret-of-successfully-using-multi-window-webgl-canvas-5a2d05555ad1 Lightning CSS https://lightningcss.dev/ Bootstrap 5.2.1 https://blog.getbootstrap.com/2022/09/07/bootstrap-5-2-1/ Radix Icons: A Crisp Set of 15×15 SVG Icons https://icons.radix-ui.com/ Enhance: A Web Standards-Based HTML Framework https://enhance.dev/docs/ SVG Doodles: A Collection of 50 Hand-Made & Editable Doodles https://svgdoodles.com/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Making a Website Under 1kB https://tdarb.org/blog/under-1kb.html Complex conditional width using flex-basis with clamp https://every-layout.dev/blog/sidebar-flex-basis-clamp/ Critical CSS? Not So Fast! https://csswizardry.com/2022/09/critical-css-not-so-fast/ Is it :modal? https://web.dev/is-it-modal/ So your designer wants stuff to overlap https://chenhuijing.com/blog/so-your-designer-wants-stuff-to-overlap/#%F0%9F%9A%B2 TIL: You Can Access A User’s Camera with Just HTML https://austingil.com/html-capture-attribute/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Dear Oracle, Please Release the JavaScript Trademark https://tinyclouds.org/trademark An overview of Node.js: architecture, APIs, event loop, concurrency https://2ality.com/2022/09/nodejs-overview.html Introducing Signals: A Reactive State Primitive That's Fast By Default https://preactjs.com/blog/introducing-signals/ Rewriting tests from Cypress to Playwright using GPT3 https://contra.com/p/PWBcPYZc-rewriting-tests-from-cypress-to-playwright-using-gpt-3 Temporal API - A new approach to managing Date and Time in JS https://refine.dev/blog/temporal-date-api/ Creating F1 graphics in JavaScript https://www.youtube.com/watch?v=sA-X0Bw_7Gg Analyze webpack production bundle https://gradejs.com/ Minimal JavaScript application framework inspired by React, Vue, and lit-element. https://github.com/frameable/el ZipMonster is a library that simplifies work with zip codes and addresses in the United States. https://github.com/russo-programmisto/zip-monster A fast differentiable tensor library for research in TypeScript and JavaScript. https://github.com/facebookresearch/shumai JSON Hero: A Beautiful JSON Viewer https://jsonhero.io/ DgrmJS is a JavaScript library for creating SVG flow diagram editors. https://github.com/AlexeyBoiko/DgrmJS I'm building EpicWeb.dev https://kentcdodds.com/blog/i-m-building-epicweb-dev?ck_subscriber_id=363852601 Why Storybook in 2022? https://storybook.js.org/blog/why-storybook-in-2022/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly An overview of Node.js: architecture, APIs, event loop, concurrency https://2ality.com/2022/09/nodejs-overview.html Rewriting tests from Cypress to Playwright using GPT3 https://contra.com/p/PWBcPYZc-rewriting-tests-from-cypress-to-playwright-using-gpt-3 Analyze webpack production bundle https://gradejs.com/ Deploying a Node app and Postgres database to Fly.io https://simonplend.com/deploying-a-node-app-and-postgres-database-to-fly-io/ Dependabot unlocks transitive dependencies for npm projects https://github.blog/changelog/2022-09-07-dependabot-unlocks-transitive-dependencies-for-npm-projects/ Containerize your Development with VS Code Dev Containers https://www.youtube.com/watch?v=cB86HE_HIDc npm-check-updates https://github.com/raineorshine/npm-check-updates ZipMonster is a library that simplifies work with zip codes and addresses in the United States. https://github.com/russo-programmisto/zip-monster kanel- Source of truth: PostgreSQL https://kristiandupont.github.io/kanel/ Fast query-string parser to replace the legacy node:querystring parse & stringify functions. https://github.com/anonrig/fast-querystring Marked 4.1: A Fast Markdown Parser and Compiler https://github.com/markedjs/marked ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus Critical CSS? Not So Fast! https://csswizardry.com/2022/09/critical-css-not-so-fast/ Infinite Scrolling: When to Use It, When to Avoid It https://www.nngroup.com/articles/infinite-scrolling-tips/ Is it :modal? https://web.dev/is-it-modal/ TIL: You Can Access A User’s Camera with Just HTML https://austingil.com/html-capture-attribute/ How to Use localStorage in JavaScript: an Easy Guide https://blog.bitsrc.io/how-to-use-localstorage-in-javascript-an-easy-guide-91aad566e4de Hacking CSS Animation State and Playback Time https://css-tricks.com/hacking-css-animation-state-and-playback-time/ So your designer wants stuff to overlap https://chenhuijing.com/blog/so-your-designer-wants-stuff-to-overlap/#%F0%9F%92%BB HTML Markup Tips for Developing Accessible Websites https://thenewstack.io/html-markup-tips-for-developing-accessible-websites/ Parents counting children in CSS https://www.matuzo.at/blog/2022/counting-children/ Making a Morphing 3D Sphere in Javascript with Three.js https://fjolt.com/article/javascript-three-js-morphing-sphere Beacon: Calculate the Environmental Impact of a Page https://digitalbeacon.co/ An alternative to the loading spinner https://joebell.co.uk/sketches/loading-disco JSON Hero: A Beautiful JSON Viewer https://jsonhero.io/ Seamlessly visualize your JSON data instantly into graphs. https://jsoncrack.com/ The easiest way to get started with TailwindCSS. https://github.com/AndrejJurkin/create-tw ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Creative list styling https://web.dev/creative-list-styling/ Release Notes for Safari Technology Preview 152 https://webkit.org/blog/13137/release-notes-for-safari-technology-preview-152/ CSS container queries are finally here https://ishadeed.com/article/container-queries-are-finally-here/ Using Grid Named Areas to Visualize (and Reference) Your Layout https://css-tricks.com/using-grid-named-areas-to-visualize-and-reference-your-layout/ Modern alternatives to BEM https://daverupert.com/2022/08/modern-alternatives-to-bem/ Parents counting children in CSS https://www.matuzo.at/blog/2022/counting-children/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Building an aircraft radar system in JavaScript https://charliegerard.dev/blog/aircraft-radar-system-rtl-sdr-web-usb/ Useful JavaScript Data Grid Libraries https://www.smashingmagazine.com/2022/09/useful-javascript-data-grid-libraries/ Seamlessly visualize your JSON data instantly into graphs. https://jsoncrack.com/ Default Exports in JavaScript Modules Are Terrible https://www.lloydatkinson.net/posts/2022/default-exports-in-javascript-modules-are-terrible/ Implementing Promisable setTimeout https://yieldcode.blog/post/implementing-promisable-set-timeout Understanding useMemo and useCallback https://www.joshwcomeau.com/react/usememo-and-usecallback/ Dependency Injection in JS/TS – Part 1 https://blog.codeminer42.com/dependency-injection-in-js-ts-part-1/ Compression and decompression in the browser with the Compression Streams API https://developer.chrome.com/blog/compression-streams-api/ Making a Morphing 3D Sphere in Javascript with Three.js https://fjolt.com/article/javascript-three-js-morphing-sphere Bringing Angular Components to Astro Islands 🏝 https://dev.to/brandontroberts/bringing-angular-components-to-astro-islands-52jp Lusift: Library to Create Product Walkthroughs for Your Web App https://lusift.vercel.app/ Derive Type: Generate Type Definitions for JS Automatically From Tests https://github.com/David-Kunz/derive-type Hyper Fetch: A Turbocharged Fetch Library https://hyperfetch.bettertyped.com/ Run Third-Party Scripts From A Web Worker https://partytown.builder.io/ A component toolkit for creating live-running code editing experiences, using the power of CodeSandbox. https://sandpack.codesandbox.io/ TestCafe v2.0.0 Released https://testcafe.io/404018/release-notes/framework/2022-8-31-testcafe-v2-0-0-released Top Heroku Alternatives for free https://dev.to/meshvpatel18/top-heroku-alternatives-for-free-46g1 Why React Contexts Are Great and Why We Didn’t Use Them https://spin.atomicobject.com/2022/08/24/react-contexts/ React Error Boundaries: A Complete Guide https://meticulous.ai/blog/react-error-boundaries-complete-guide/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly Tinybench: A Tiny and Simple Benchmarking Library https://github.com/tinylibs/tinybench Installing and running Node.js bin scripts https://2ality.com/2022/08/installing-nodejs-bin-scripts.html Jazzer.Js Brings Effective Fuzzing To JavaScript (Open-Source) https://www.code-intelligence.com/blog/jazzer.js Heroku’s Next Chapter https://blog.heroku.com/next-chapter 4 Ways to Minimize Your Dependencies in Node.js https://blog.appsignal.com/2022/08/31/4-ways-to-minimize-your-dependencies-in-nodejs.html Building a secure API with gRPC https://snyk.io/blog/building-a-secure-api-with-grpc/ jscythe: Misusing the Node.js Inspector Mechanism to Run Arbitrary Code https://github.com/evilsocket/jscythe TestCafe v2.0.0 Released https://testcafe.io/404018/release-notes/framework/2022-8-31-testcafe-v2-0-0-released Fast, tiny and solid hooks system for Javascript and NodeJS https://github.com/riktar/uncino ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus CSS container queries are finally here https://ishadeed.com/article/container-queries-are-finally-here/ @container and :has(): two powerful new responsive APIs landing in Chromium 105 https://developer.chrome.com/blog/has-with-cq-m105/ What Makes A Great Toggle Button? (Case Study, Part 2) https://www.smashingmagazine.com/2022/08/toggle-button-case-study-part-2/ Modern alternatives to BEM https://daverupert.com/2022/08/modern-alternatives-to-bem/ Things Not Available When Someone Blocks All Cookies? https://blog.tomayac.com/2022/08/30/things-not-available-when-someone-blocks-all-cookies/ Creative list styling https://web.dev/creative-list-styling/ DevTools Tips: How to speed up your workflow with Console shortcuts https://developer.chrome.com/blog/devtools-tips-13/ CSS Classes considered harmful https://www.keithcirkel.co.uk/css-classes-considered-harmful/ Convert Tailwind CSS to Semantic CSS https://www.vanillabreeze.dev/ Same Energy: A Visual Image Search Engine https://same.energy/ Lusift: A JavaScript Library to Create Product Walkthroughs for Your Web App https://github.com/lusift/lusift Request Map Generator: Generate a 'Node Map' of All Requests on a Page, Powered by WebPageTest https://requestmap.webperf.tools/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories The web is a harsh manager https://daverupert.com/2022/08/web-is-a-harsh-manager/ 90's Cursor Effects https://tholman.com/cursor-effects/ Using :has() as a CSS Parent Selector and much more https://webkit.org/blog/13096/css-has-pseudo-class/ What was that media query code again? https://mediaquery.style/ Use the Right Container Query Syntax https://www.oddbird.net/2022/08/18/cq-syntax/ A Handy Use For Cascade Layers https://css-irl.info/a-handy-use-for-cascade-layers/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

JavaScript Weekly When Alternative JS Runtimes Grow Up: Deno Has Big Changes Ahead, and the Creator of Bun Forms Oven https://deno.com/blog/changes https://oven.sh/ Future Features of JS?! https://portal.gitnation.org/contents/future-features-of-js Announcing TypeScript 4.8 https://devblogs.microsoft.com/typescript/announcing-typescript-4-8/ Announcing Crawlee: the web scraping and browser automation library https://blog.apify.com/announcing-crawlee-the-web-scraping-and-browser-automation-library/ Why React Re-Renders https://www.joshwcomeau.com/react/why-react-re-renders/ Popular Node.js patterns and tools to re-consider https://practica.dev/blog/popular-nodejs-pattern-and-tools-to-reconsider/ (Re-) Introducing Gatsby, A Reactive Site Generator https://www.gatsbyjs.com/blog/re-introducing-gatsby-a-reactive-site-generator/ pico.js, a face-detection library in 200 lines of JavaScript https://nenadmarkus.com/p/picojs-intro/ GopherJS - A compiler from Go to JavaScript https://github.com/gopherjs/gopherjs iOS Privacy: Announcing InAppBrowser.com - see what JavaScript commands get injected through an in-app browser https://krausefx.com//blog/announcing-inappbrowsercom-see-what-javascript-commands-get-executed-in-an-in-app-browser Node v16.17.0 (LTS) https://nodejs.org/en/blog/release/v16.17.0/ NodeGui Build performant, native, cross platform desktop apps with JavaScript and CSS https://docs.nodegui.org/ Advanced React component composition https://frontendmastery.com/posts/advanced-react-component-composition-guide/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly Announcing Crawlee: the web scraping and browser automation library https://blog.apify.com/announcing-crawlee-the-web-scraping-and-browser-automation-library/ Popular Node.js patterns and tools to re-consider https://practica.dev/blog/popular-nodejs-pattern-and-tools-to-reconsider/ Node v18.8.0 (Current) https://nodejs.org/en/blog/release/v18.8.0/ Node v16.17.0 (LTS) https://nodejs.org/en/blog/release/v16.17.0/ Deploying a Node.js App with AWS Elastic Beanstalk https://www.honeybadger.io/blog/node-elastic-beanstalk/ How to use OpenTelemetry to trace Node.js applications https://developers.redhat.com/articles/2022/08/23/how-use-opentelemetry-trace-nodejs-applications file-type 18.0: Detect the File Type of a Buffer, Uint8Array or ArrayBuffer https://github.com/sindresorhus/file-type Soketi: Simple and Fast WebSockets Server https://github.com/soketi/soketi brotli-wasm: A Reliable Brotli Compressor and Decompressor https://github.com/httptoolkit/brotli-wasm Build performant, native, cross platform desktop apps with JavaScript and CSS 🚀 https://docs.nodegui.org/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus Using :has() as a CSS Parent Selector and much more https://webkit.org/blog/13096/css-has-pseudo-class/ Can browsers optimize the loading of third-party resources? https://developer.chrome.com/blog/third-party-scripts/ What Makes A Great Toggle Button? (Case Study, Part 1) https://www.smashingmagazine.com/2022/08/toggle-button-case-study-part-1/ Meet the top layer: a solution to z-index:10000 https://developer.chrome.com/blog/what-is-the-top-layer/ An Introduction to Constraint Based Design Systems https://www.colepeters.dev/posts/an-introduction-to-constraint-based-design-systems Smashing Podcast Episode 51 With Ben Callahan: What’s The Value Of A Design System? https://www.smashingmagazine.com/2022/08/smashing-podcast-episode-51/ How to skew benchmarks in your favour https://marvinh.dev/blog/benchmarks/ Inclusive user research: recruiting participants https://tetralogical.com/blog/2022/08/01/inclusive-user-research-recruiting-participants When Do You Use CSS Columns? https://css-tricks.com/when-do-you-use-css-columns/ Beautiful hand-crafted SVG icons, by the makers of Tailwind CSS. https://heroicons.com/ Tota11y https://tota11y.babylontech.co.uk/ Check if an in-app browser is injecting JavaScript code https://inappbrowser.com/ Find the Perfect gradient for your next projects https://gradientify.com/ Tailwindhelper: A Tool for Visualizing Tailwind Classes, Converting Units, and Finding Colors https://www.tailwindhelper.com/ Puppertino: A CSS Framework Based on Human Guidelines from Apple https://codedgar.github.io/Puppertino/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories CSS Grid and Custom Shapes, Part 1 https://css-tricks.com/css-grid-and-custom-shapes-part-1/ outline is your friend https://www.matuzo.at/blog/2022/focus-outline/ On ratings and meters https://lea.verou.me/2022/08/on-ratings-and-meters/ Release Notes for Safari Technology Preview 151 https://webkit.org/blog/13093/release-notes-for-safari-technology-preview-151/ Why React Re-Renders https://www.joshwcomeau.com/react/why-react-re-renders/ A design system for building retro https://sakofchit.github.io/system.css/ ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Frontend Focus Creative CSS Layout & The Flexible Web https://youtu.be/tueTFd2TQUA An Interactive Guide to Color and Contrast https://colorandcontrast.com/#/ Designing A Better Back Button UX https://www.smashingmagazine.com/2022/08/back-button-ux-design/ CSS Grid and Custom Shapes https://css-tricks.com/css-grid-and-custom-shapes-part-1/ The Infinite Marquee https://ryanmulligan.dev/blog/css-marquee/ Do you know about overflow: clip? https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/?ref=sidebar On ratings and meters https://lea.verou.me/2022/08/on-ratings-and-meters/ HTML is all you need to make a website https://whitep4nth3r.com/blog/html-is-all-you-need-to-make-a-website/ outline is your friend https://www.matuzo.at/blog/2022/focus-outline/ A design system for building retro Apple interfaces https://github.com/sakofchit/system.css tailwindcss/forms https://github.com/tailwindlabs/tailwindcss-forms Repository to collect best practices for web images https://github.com/nucliweb/image-element A bedrock for building design systems https://bedrock-ui.github.io/bedrock-ui/ extremely simple color generator https://reverb.wtf/

Front-End Front Top Stories Not All Zeros are Equal https://www.oddbird.net/2022/08/04/zero-units/ Fantastic CSS border animation https://dev.to/chokcoco/fantastic-css-border-animation-5166 Finer grained control over CSS transforms with individual transform properties https://web.dev/css-individual-transform-properties/ How and why we removed jQuery from GOV.UK https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/ Do you know about overflow: clip? https://kilianvalkhof.com/2022/css-html/do-you-know-about-overflow-clip/ The Infinite Marquee https://ryanmulligan.dev/blog/css-marquee/

JavaScript Weekly Astro 1.0 https://astro.build/blog/astro-1/ Improve how you architect webapps https://www.patterns.dev/ Code Golfing Tips & Tricks: How to Minify your JavaScript Code https://getbutterfly.com/code-golfing-tips-tricks-how-to-minify-your-javascript-code/ How and why we removed jQuery from GOV.UK https://insidegovuk.blog.gov.uk/2022/08/11/how-and-why-we-removed-jquery-from-gov-uk/ How To Use Multithreading in Node.js https://www.digitalocean.com/community/tutorials/how-to-use-multithreading-in-node-js Record & Tuple: Immutable Data Structures in JS https://portal.gitnation.org/contents/record-and-tuple-immutable-data-structures-in-js Stable Fluids with three.js https://mofu-dev.com/en/blog/stable-fluids/ A case study of CSR. https://github.com/theninthsky/client-side-rendering Generate a matching regular expression from the test cases you provide https://pemistahl.github.io/grex-js/ Cloudscape An open source design system for the cloud https://cloudscape.design/ Virtual DOM into the future. https://millionjs.org/ React rating https://react-rating.onrender.com/ Calculate the real cost to run your JS app or lib to keep good performance. https://github.com/ai/size-limit svg2pdf.js https://github.com/yWorks/svg2pdf.js A reliable compressor and decompressor for Brotli, supporting node & browsers via wasm https://github.com/httptoolkit/brotli-wasm A modern JavaScript development environment for Minecraft. https://github.com/grakkit/grakkit ------------------------- for more -subscribe to the channel https://t.me/webWekkly

Node Weekly How To Use Multithreading in Node.js https://www.digitalocean.com/community/tutorials/how-to-use-multithreading-in-node-js Parsing command line arguments with util.parseArgs() in Node.js https://2ality.com/2022/08/node-util-parseargs.html New request for comments on improving npm security with Sigstore is now open https://github.blog/2022-08-08-new-request-for-comments-on-improving-npm-security-with-sigstore-is-now-open/ Validating PostgreSQL results & inferring query static types https://contra.com/p/gkOQlbLq-validating-postgre-sql-query-results-using-runtime-checks No More 'Native Modules' for Node.js. Sort of. https://github.com/nodejs/node/pull/44135 How to connect AdminJS to an existing Node.js/Express/TypeScript/MongoDB application https://link.medium.com/toFBw6Rzpsb Prisma 4.2.0: The 'Next Generation' ORM for Node and TypeScript https://github.com/prisma/prisma/releases/tag/4.2.0 Foal 2.10: TypeScript-Based All-in-One Web Framework for Node https://foalts.org/ Nodewood 1.0 - Official full release! https://nodewood.com/blog/nodewood-1-0-official-full-release/

Frontend Focus Astro 1.0 https://astro.build/blog/astro-1/ Core Web Vitals Tools To Boost Your Web Performance Scores https://www.smashingmagazine.com/2022/08/core-web-vitals-tools-boost-performance/ Not All Zeros are Equal https://www.oddbird.net/2022/08/04/zero-units/ :has(): the family selector https://developer.chrome.com/blog/has-m105/ THE HIDDEN HISTORY OF SCREEN READERS https://www.theverge.com/23203911/screen-readers-history-blind-henter-curran-teh-nvda The Ballad of Text Overflow https://www.tpgi.com/the-ballad-of-text-overflow/ Designing for Long-Form Articles https://css-tricks.com/designing-for-long-form-articles/ Best practices for inclusive textual websites https://seirdy.one/posts/2020/11/23/website-best-practices/ Forms in modals: UX case https://user-interface.io/why-you-probably-shouldnt-put-forms-in-modals/ CSS border animations https://web.dev/css-border-animations/ dark-mode-toggle https://github.com/GoogleChromeLabs/dark-mode-toggle Paste HTML Code https://www.debugbear.com/html-size-analyzer make a native-looking wrapper for WhatsApp Web https://github.com/nativefier/nativefier Markdown-Tag https://github.com/MarketingPipeline/Markdown-Tag