The weekly

JavaScript Weekly Promises From The Ground Up https://www.joshwcomeau.com/javascript/promises/ htmx: Simplicity in an Age of Complicated Solutionshttps://www.erikheemskerk.nl/htmx-simplicity/ Data Fetching Patterns in Single-Page Applications https://martinfowler.com/articles/data-fetch-spa.html Brisk VS Code extension 5 minute Development Speedrun https://github.com/brisktest/brisk-extension/blob/main/WALKTHROUGH.md Full Stack Web Push API Guide https://www.bocoup.com/blog/full-stack-web-push-api-guide A TypeScript library for creating animated videos using the Canvas API. https://motioncanvas.io/ Merge objects & other types recursively. https://github.com/mesqueeb/merge-anything Write Lua with TypeScript https://typescripttolua.github.io/ The fastest math typesetting library for the web. https://katex.org/ A software tool set that lets you utilize Zig code in your JavaScript project. https://github.com/chung-leong/zigar Introducing the Vercel Web Application Firewall https://vercel.com/blog/introducing-the-vercel-waf Next.js 15 RC https://nextjs.org/blog/next-15-rc React Conf 2024 Recap https://react.dev/blog/2024/05/22/react-conf-2024-recap Introducing the react-i18next library https://wanago.io/2024/05/13/react-internationalization-end-to-end-tests-playwright/ Build a 3D node based workflow using React Three Fiber and Reactflow https://www.youtube.com/watch?v=5M3q5rD8kNI ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekklyWhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Frontend Focus Let’s hang! An intro to CSS Anchor Positioning with basic examples https://utilitybend.com/blog/lets-hang-an-intro-to-css-anchor-positioning-with-basic-examples CSS Length Units https://css-tricks.com/css-length-units/ Transition to "height: auto;" & "display: none;" Using Pure CSS https://www.youtube.com/watch?v=1VsMKz4Zweg In Praise Of The Basics https://www.smashingmagazine.com/2024/05/in-praise-of-the-basics/ How Deep is Your DOM? https://frontendatscale.com/blog/how-deep-is-your-dom/ “Just” One Line https://blog.jim-nielsen.com/2024/just-one-line/ Screen Ruler: Measure The Web https://chromewebstore.google.com/detail/screen-ruler-measure-the/jfbbgijjljfbolelfkopkhbfjajjampm?pli=1 Calculate fluid typography sizes https://wearerequired.github.io/fluidity/ svg-gobbler https://github.com/rossmoody/svg-gobbler HANDCRAFTED OPEN SOURCE ICONS https://lifeomic.github.io/chromicons.com/ Awesome Bootstrap Theme Designed with Atlassian Design https://fastbootstrap.com/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekklyWhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Node Weekly 10 modern Node.js runtime features to start using in 2024 https://snyk.io/blog/10-modern-node-js-runtime-features/ Node.js Performance Hooks: Mastering the Mental Model https://pavel-romanov.com/nodejs-performance-hooks-mastering-the-mental-model ECMAScript 2024 feature: Promise.withResolvers() https://2ality.com/2024/05/proposal-promise-with-resolvers.html Node.js Test Runner: A Beginner's Guide https://betterstack.com/community/guides/testing/nodejs-test-runner/ A software tool set that lets you utilize Zig code in your JavaScript project. https://github.com/chung-leong/zigar Tinypool - the node.js worker pool 🧵 https://github.com/tinylibs/tinypool TypeScriptToLua https://typescripttolua.github.io/ Multi AI Agent Systems using OpenAI's Assistants API (Experts.js) https://github.com/metaskills/experts a lightweight and flexible command-line JSON processor https://github.com/sanack/node-jq USB Library for Node.JS https://github.com/node-usb/node-usb ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Front-End Front Top Stories Old Dogs, new CSS Tricks https://mxb.dev/blog/old-dogs-new-css-tricks/ NEW MAGIC FOR ANIMATIONS IN CSS https://chasem.co/2024/05/css-animations/ Masonry and reading order https://rachelandrew.co.uk/archives/2024/05/26/masonry-and-reading-order/ How to Make a CSS Timer https://frontendmasters.com/blog/how-to-make-a-css-timer/ Progressively Enhanced Popover Toggletips https://css-irl.info/progressively-enhanced-popover-toggletips/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Frontend Focus Old Dogs, new CSS Tricks https://mxb.dev/blog/old-dogs-new-css-tricks/ Here’s What We Learned From the First State of HTML Survey https://frontendmasters.com/blog/state-of-html-2023-results-2/ Modern CSS Layouts: You Might Not Need A Framework For That https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/ Comprehensive guide to JavaScript performance analysis using Chrome DevTools https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/ “Act On Press” - John Carmack's Hot Take On UI https://www.youtube.com/watch?v=yaMGtiPckAQ Masonry and reading order https://rachelandrew.co.uk/archives/2024/05/26/masonry-and-reading-order/ City In A Bottle – A 256 Byte Raycasting System https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/ Slash Pages: A Guide to Common Base-Level Web Site Pages https://slashpages.net/ 🛑 Stop resizing your browser: improve testing for responsiveness https://www.jenchan.biz/blog/stop-resizing-your-browser-improve-responsive-testing Modern WordPress - Yikes! https://dbushell.com/2024/05/07/modern-wordpress-themes-yikes/ Fontsource: 1700+ Open Source Fonts in npm Packages https://fontsource.org/ signature pad https://szimek.github.io/signature_pad/ <selectlist> polyfill https://github.com/luwes/selectlist-polyfill jessquery: A Lightweight jQuery Alternative for the Modern Web https://github.com/jazzypants1989/jessquery A Javascript library to write reactive user interface for the web under 350 lines of code. https://github.com/grucloud/bau OKLCH Color Variations https://www.figma.com/community/plugin/1261721955648857186/oklch-color-variations Bau.js: A Small, Reactive Library and Components for Building User Interfaces https://www.codemender.io/ Super CSS Mario II (CSS-only keyboard game!) https://codepen.io/t_afif/full/JjqEdJv ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Front-End Front Top Stories State of HTML 2023 Results https://2023.stateofhtml.com/en-US/ Modern CSS Layouts: You Might Not Need A Framework For That https://www.smashingmagazine.com/2024/05/modern-css-layouts-no-framework-needed/ Rethinking Text Resizing on Web https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 Release Notes for Safari Technology Preview 195 https://webkit.org/blog/15417/release-notes-for-safari-technology-preview-195/ We’ve Got Container Queries Now, But Are We Actually Using Them? https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

JavaScript Weekly Angular v18 is now available! https://blog.angular.dev/angular-v18-is-now-available-e79d5ac0affe cursive handwriting in-javascript https://www.amygoodchild.com/blog/cursive-handwriting-in-javascript SolidStart 1.0: The Shape of Frameworks to Come https://www.solidjs.com/blog/solid-start-the-shape-frameworks-to-come City In A Bottle – A 256 Byte Raycasting System https://frankforce.com/city-in-a-bottle-a-256-byte-raycasting-system/ React Compiler: In-Depth Beyond React Conf 2024 https://www.youtube.com/watch?v=PYHBHK37xlE Understand errors and warnings better with Gemini https://developer.chrome.com/docs/devtools/console/understand-messages Comprehensive guide to JavaScript performance analysis using Chrome DevTools https://blog.jiayihu.net/comprenhensive-guide-chrome-performance/ signature pad https://szimek.github.io/signature_pad/ VitePress 1.2: Vite & Vue Powered Static Site Generator https://vitepress.dev/ JavaScript / TypeScript library for Node.JS and browsers to easily interact with Atlassian Jira API https://github.com/MrRefactoring/jira.js React Compiler https://react.dev/learn/react-compiler React 19 lets you write impossible components https://www.mux.com/blog/react-19-server-components-and-actions Merging Remix and React Router https://remix.run/blog/merging-remix-and-react-router Snappy UI Optimization with useDeferredValue https://www.joshwcomeau.com/react/use-deferred-value/ React bindings for the force-graph https://github.com/vasturiano/react-force-graph “Future of Frontend” Panel https://www.youtube.com/watch?v=7LS5h2jf-fY ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Frontend Focus SESSIONS from GOOGLE I/O https://www.youtube.com/playlist?list=PLOU2XLYxmsIKeQI4KTrrplA_mUPI3Lq5b Rethinking Text Resizing on Web https://medium.com/airbnb-engineering/rethinking-text-resizing-on-web-1047b12d2881 What UI density means and how to design for it https://matthewstrom.com/writing/ui-density/ On compliance vs readability: Generating text colors with CSS https://lea.verou.me/blog/2024/contrast-color/ We’ve Got Container Queries Now, But Are We Actually Using Them? https://frontendmasters.com/blog/weve-got-container-queries-now-but-are-we-actually-using-them/ contrast-color() is a good thing, but also solving the problem at the wrong layer https://ericwbailey.website/published/contrast-color-is-a-good-thing-but-also-solving-the-problem-at-the-wrong-layer/ Navigating the Variety of Web Accessibility Evaluation Tools https://www.a11y-collective.com/design/accessibility-testing-tools/ Weighing in on CSS Masonry https://keithjgrant.com/posts/2024/05/weighing-in-on-css-masonry/ <style>: Inline optimizations for the bold https://morganwebdev.com/blog/style/ Hidden vs. Disabled In UX https://www.smashingmagazine.com/2024/05/hidden-vs-disabled-ux/ The Biggest Collection Of Background Patterns https://css-pattern.com/ Vue Fluid DnD is a fluid and smooth drag and drop solution for lists on Vue3 full animated. https://vue-fluid-dnd.netlify.app/ Gradientor: A Minimalist, Beautiful Radial Background Generator https://gradientor.app/ Daily Quiz https://app.withcodeexample.com/quiz ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Node Weekly Node v22.2.0 (Current) https://nodejs.org/en/blog/release/v22.2.0 How to document your JavaScript package https://deno.com/blog/document-javascript-package Learn with me: Hono JS (How I take tech notes) https://www.youtube.com/watch?v=gY-TK33G6kQ Building a GitHub activity feed with Node.js and Socket.io https://knock.app/blog/building-a-github-activity-feed-with-nodejs-and-socket-io An Introduction to the Drizzle ORM with PostgreSQL https://wanago.io/2024/05/20/api-nestjs-drizzle-orm-postgresql/ Speed Up Your Playwright Scripts with Request Interception https://www.checklyhq.com/blog/speed-up-playwright-scripts-request-interception/ JavaScript / TypeScript library for Node.JS and browsers to easily interact with Atlassian Jira API https://github.com/MrRefactoring/jira.js scraping and browser automation library https://crawlee.dev/ Verification, sanitization, and type coercion for environment variables in Node.js and web applications. Supports TypeScript! https://github.com/evanshortiss/env-var VitePress 1.2 Vite & Vue Powered Static Site Generator https://vitepress.dev/ The complete solution for node.js command-line interfaces. https://github.com/tj/commander.js ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Front-End Front Top Stories On compliance vs readability: Generating text colors with CSS https://lea.verou.me/blog/2024/contrast-color/ The Classic Border Radius Advice, Plus an Unusual Trick https://frontendmasters.com/blog/the-classic-border-radius-advice-plus-an-unusual-trick/ The Times You Need A Custom @property Instead Of A CSS Variable https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/ Polypane 19: Workflow improvements https://polypane.app/blog/polypane-19-workflow-improvements/ Time-based CSS Animations https://yuanchuan.dev/time-based-css-animations CSS… 5? https://frontendmasters.com/blog/css-5/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Frontend Focus The Results of State of HTML 2023 https://2023.stateofhtml.com/en-US/ 10 updates from Google I/O 2024: Unlocking the power of AI for every web developer https://developer.chrome.com/blog/web-at-io24 Announcing the Web Platform Dashboard https://web.dev/blog/web-platform-dashboard Introducing the CSS anchor positioning API https://developer.chrome.com/blog/anchor-positioning-api The Times You Need A Custom @property Instead Of A CSS Variable https://www.smashingmagazine.com/2024/05/times-need-custom-property-instead-css-variable/ The Modern Guide For Making CSS Shapes https://www.smashingmagazine.com/2024/05/modern-guide-making-css-shapes/ I’m worried about the tabbing behaviour, rather than the syntax and name of CSS masonry https://piccalil.li/blog/masonry-and-tabbing/ Hardest Problem in Computer Science: Centering Things https://tonsky.me/blog/centering/ Manifesto for a Humane Web https://humanewebmanifesto.com/ WordPress Studio: A Local App for Running WordPress in Dev https://developer.wordpress.com/studio/ JavaScript DOM Projects https://www.jisan.io/dom-projects/ A Toolkit for Zero-Runtime CSS-in-JS Libraries https://wyw-in-js.dev/ Pick colors from images by simply clicking on it https://imgcolorpicker.vercel.app/ go-masonry-gallery: A CLI Tool to Generate a Simple HTML/CSS Masonry Gallery from a Local Folder https://github.com/dominickp/gall ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

🇮🇱🇮🇱 Node Weekly🇮🇱🇮🇱 Execa 9.0: The Better child_process Gets Even Better https://medium.com/@ehmicky/execa-9-release-d0d5daaa097f Node v20.13.0 (LTS) https://nodejs.org/en/blog/release/v20.13.0 Hot module replacement (HMR) in AdonisJS https://adonisjs.com/blog/hmr-in-adonisjs Hot Hook is a simple and lightweight library for adding hot module replacement in NodeJS with ESM. https://github.com/julien-R44/hot-hook How I made my GitHub profile README dynamic https://tduyng.github.io/blog/dynamic-github-profile-readme/ The fully-featured GraphQL Server with focus on easy setup, performance and great developer experience. https://the-guild.dev/graphql/yoga-server A dead simple, dependency-less, spec-compliant server-sent events implementation for Node, written in TypeScript. https://github.com/MatthewWid/better-sse The fastest and simplest library for SQLite3 in Node.js. https://github.com/WiseLibs/better-sqlite3 React for CLIs. Build and test your CLI output using components. https://github.com/vadimdemedes/ink NodeBB 3.7.5: Node-Based Forum Software

🇮🇱🕯Front-End Front Top Stories🕯🇮🇱 Shades of Grey with color-mix() https://css-irl.info/shades-of-grey-with-color-mix/ Superior Range Syntax https://cssence.com/2024/superior-range-syntax/ Release Notes for Safari Technology Preview 194 https://webkit.org/blog/15406/release-notes-for-safari-technology-preview-194/

JavaScript Weekly Development notes from xkcd's "Machine" https://chromakode.com/post/xkcd-machine/ The evolution of Figma’s mobile engine: Compiling away our custom programming language https://www.figma.com/blog/figmas-journey-to-typescript-compiling-away-our-custom-programming-language/ Introducing the Gulp Developer Survey https://medium.com/gulpjs/introducing-the-gulp-developer-survey-cc227fc2fb6d Alex Reardon Seamless drag and drop between applications https://www.youtube.com/watch?v=E4l4MBO-Bwg Less Code (-75%) & More Power (💪) with Remult https://dev.to/jycouet/less-code-75-more-power-with-remult-325m Why Patching Globals Is Harmful https://kettanaito.com/blog/why-patching-globals-is-harmful 5 Node Version Managers Compared – Which is Right for You? https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you At some point, JavaScript got good https://jonbeebe.net/2024/05/javascript-got-good/ How to Securely Send a Request When Closing Tabs https://webdeveloper.beehiiv.com/p/securely-send-request-closing-tabs Pintora: An Extensible Text-to-Diagram Rendering Library https://pintorajs.vercel.app/ Headless UI v2.0 for React https://tailwindcss.com/blog/headless-ui-v2 jQuery to javascript converter https://www.lightgalleryjs.com/jquery-to-js-converter/ DerbyJS is a full-stack framework for writing modern web applications. https://derbyjs.com/ Minimal GraphQL client supporting Node and browsers for scripts or simple apps https://github.com/jasonkuhrt/graphql-request A simple and powerful Javascript HTML5 canvas library. https://github.com/fabricjs/fabric.js A collection of awesome things regarding the React ecosystem. https://github.com/enaqx/awesome-react Docusaurus 3.3 https://docusaurus.io/blog/releases/3.3 Using React Shepherd to build a site tour https://blog.logrocket.com/using-react-shepherd-build-site-tour/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S Faster websites with the Picture element https://frankstall.one/blog/faster-websites-with-the-picture-element/

Frontend Focus Introducing "Unleash the power of Scroll-Driven Animations" https://developer.chrome.com/blog/scroll-driven-animations-video-course Why don’t we talk about minifying CSS anymore? https://blog.sentry.io/why-dont-we-talk-about-minifying-css/ 23 CSS features you should know (and be using) by now https://www.youtube.com/watch?v=opHu7HvFM60 Using the Popover API for HTML Tooltips https://frontendmasters.com/blog/using-the-popover-api-for-html-tooltips/ Misconceptions about CSS Specificity https://www.bram.us/2024/05/05/misconceptions-about-css-specificity/ Should we rely on browser detection? https://nielsleenheer.com/articles/2024/should-we-rely-on-browser-detection/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S Faster websites with the Picture element https://frankstall.one/blog/faster-websites-with-the-picture-element/ Combining CSS :has() And HTML <select> For Greater Conditional Styling https://www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/ Making room for long list markers with subgrid https://noahliebman.net/2024/03/making-room-for-long-list-markers-with-subgrid/ emoji picker HTML component for the web https://github.com/missive/emoji-mart icones.js https://icones.js.org/ tinyworldmap is a world map for offline-first and low-bandwidth web apps. https://github.com/tinyworldmap/tiny-world-map Can I Email..? Support Tables for HTML and CSS in Emails https://www.caniemail.com/ creates a color palette using OKLCH, https://colors-gen.vercel.app/?FO63141000 Boilerplate and Starter for Next JS 14+, Tailwind CSS 3.4 and TypeScript https://github.com/ixartz/SaaS-Boilerplate

Node Weekly 5 Node Version Managers Compared – Which is Right for You? https://pavel-romanov.com/5-node-version-managers-compared-which-is-right-for-you Node v22.1.0 (Current) https://nodejs.org/en/blog/release/v22.1.0 What's new in Node js v22 https://www.youtube.com/watch?v=eZfLkVDJPTg Express 5.0 - last push! https://github.com/expressjs/discussions/issues/233 Poor Express Authentication Patterns in Node.js and How to Avoid Them https://www.lirantal.com/blog/poor-express-authentication-patterns-nodejs Expect more from your MVC. https://derbyjs.com/ flexible and configurable Node.js library for handling file uploads https://github.com/rafasofizada/pechkin A machine learning framework for Node.js, based on MLX. https://github.com/frost-beta/node-mlx node-screenshots is a native node.js screenshot library based on XCap https://github.com/nashaofu/node-screenshots ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

Front-End Front Top Stories Hardest Problem in Computer Science: Centering Things https://tonsky.me/blog/centering/ Printing music with CSS Grid https://cruncher.ch/blog/printing-music-with-css-grid/ An alternative proposal for CSS masonry https://developer.chrome.com/blog/masonry Combining CSS :has() And HTML <select> For Greater Conditional Styling https://www.smashingmagazine.com/2024/05/combining-css-has-html-select-conditional-styling/ Popover API is Here https://frontendmasters.com/blog/popover-api-is-here/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S

JavaScript Weekly React 19 Beta https://react.dev/blog/2024/04/25/react-19 Let Me Be: "const ... Is Stupid and You're Using It Wrong" https://www.epicweb.dev/talks/let-me-be Announcing TypeScript 5.5 Beta https://devblogs.microsoft.com/typescript/announcing-typescript-5-5-beta/ I Reviewed 1,000s of Opinions on HTMX https://konfigthis.com/blog/htmx/ Native Support for CJS/ESM Interoperability Begins in Node.js 22 https://zacharylee.substack.com/p/native-support-for-cjsesm-interoperability Finally Understanding How Array.sort(comparator) Works https://www.jameskerr.blog/posts/javascript-sort-comparators/ Talks from Epic Web Conf 2024 https://www.epicweb.dev/talks Detect JavaScript Support in CSS https://ryanmulligan.dev/blog/detect-js-support-in-css/ Welcome to Extension https://extension.js.org/ Layer Cake is a graphics framework for Svelte https://layercake.graphics/ Passing the input element as a parameter to Tagify will transform it into a tags-component. https://yaireo.github.io/tagify/ A powerful, customizable, and accessible guided tour creator https://www.william-troup.com/journey-js/ A full-featured wrapper around the InnerTube API https://github.com/LuanRT/YouTube.js The Popover API is now fully supported https://developer.mozilla.org/en-US/docs/Mozilla/Firefox/Releases/125 Svelte 5 Release Candidate https://svelte.dev/blog/svelte-5-release-candidate React Aria just had a big release https://react-spectrum.adobe.com/releases/2024-05-01.html You don't need dotenv. https://dev.to/shubhambattoo/you-dont-need-dotenv-9 react 18.3.0 https://github.com/facebook/react/releases/tag/v18.3.0 HTML attributes vs DOM properties https://jakearchibald.com/2024/attributes-vs-properties/ ------------------- For more- subscribe to the channel Telegram: https://t.me/webWekkly WhatsApp: https://whatsapp.com/channel/0029VaKa4PbJkK76f7WAEL1S