The weekly

JavaScript Weekly What’s Next for JavaScript: New Features to Look Forward to https://thenewstack.io/whats-next-for-javascript-new-features-to-look-forward-to/ Remotion 4.0 https://www.remotion.dev/blog/4-0 CommonJS is hurting JavaScript https://deno.com/blog/commonjs-is-hurting-javascript In Defence of DOM­Content­Loaded https://csswizardry.com/2023/07/in-defence-of-domcontentloaded/ Breaking Up with SVG-in-JS in 2023 https://kurtextrem.de/posts/svg-in-js An Introduction to the View Transitions API https://www.sitepoint.com/view-transitions-api-introduction/ JavaScript Gom Jabbar https://frantic.im/javascript-gom-jabbar/ Burned out on Javascript https://www.youtube.com/watch?v=zkCBSz353fc A WEB COMPONENT FOR MATH INPUT https://cortexjs.io/mathlive/ Make your docs shine with Starlight https://starlight.astro.build/ svelte in markdown https://mdsvex.com/ a JavaScript library for working with recurrence rules for calendar dates. https://jakubroztocil.github.io/rrule/ copy-text-to-clipboard https://github.com/sindresorhus/copy-text-to-clipboard open source note-taking app https://joplinapp.org/ CommonJS is not going away https://bun.sh/blog/commonjs-is-not-going-away What's Next For Redux with Mark Erikson? https://www.youtube.com/watch?v=n5FK8_EXcbs The Cost Of JavaScript - 2023 https://www.youtube.com/watch?v=ZKH3DLT4BKw React Performance & Optimization https://reacthandbook.dev/react-performance-optimization Redirecting unauthenticated users with Protected Routes in the Next.js 13 App Directory https://www.youtube.com/watch?v=ywvXGW6P4Gs Qwik 1.2: Performance in Autopilot https://www.builder.io/blog/qwik-1-2-performance-autopilot

Frontend Focus Understanding SVG Paths - deep dive https://www.nan.fyi/svg-paths Useful DevTools Tips and Tricks https://www.smashingmagazine.com/2023/06/popular-devtools-tips/ In Defence of DOM­Content­Loaded https://csswizardry.com/2023/07/in-defence-of-domcontentloaded/ What does the image decoding attribute actually do? https://www.tunetheweb.com/blog/what-does-the-image-decoding-attribute-actually-do/ An Introduction to the View Transitions API https://www.sitepoint.com/view-transitions-api-introduction/ State of the CSS Community | Una Kravets | CSS Day 2023 https://www.youtube.com/watch?v=dkBeBxs48os First-Person Scrollers https://meyerweb.com/eric/thoughts/2023/06/20/first-person-scrollers/ The trick to smoothly animating shadows in CSS https://www.youtube.com/watch?v=J9XlFWlhrNw Container Queries Movie Theater - by Amit Sheen https://fronteersconf.org/container-queries-movie-theatre/ I Made 7 Predictions For The Web For The Next 5 Years https://fagnerbrack.com/i-made-7-predictions-for-the-web-for-the-next-5-years-d750d93b1b5a svg-path-editor https://yqnn.github.io/svg-path-editor/ Announcing Hurl 4.0.0 https://hurl.dev/blog/2023/06/30/announcing-hurl-4.0.0.html Automatic font matching for minimal CLS tool https://www.industrialempathy.com/perfect-ish-font-fallback/?font=Montserrat The missing Chrome Devtools Element Selector https://automize.dev/ Zero-Runtime CSS with Vanilla Extract https://www.telerik.com/blogs/zero-runtime-css-vanilla-extract Ferris wheel (CSS only) https://codepen.io/amit_sheen/pen/bGQgGOx --------------------- For more- subscribe to the channel https://t.me/webWekkly

Node Weekly RegExp v flag with set notation and properties of strings https://v8.dev/features/regexp-v-flag Setting Expectations for the Node.js Test Runner https://cjihrig.com/test_runner_expectations CommonJS is hurting JavaScript https://deno.com/blog/commonjs-is-hurting-javascript Tangerine: DNS over HTTPS for Node.js https://github.com/forwardemail/nodejs-dns-over-https-tangerine The massive bug at the heart of the npm ecosystem https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem IP to timezone, the 30 second way https://remysharp.com/2023/07/03/ip-to-timezone-the-30-second-way rrule.js: Work with Recurrence Rules for Calendar Dates http://jakubroztocil.github.io/rrule/ Statistical methods in readable JavaScript for browsers, servers, and people. https://simple-statistics.github.io/ utility to transform XML to JSON https://github.com/tuananh/camaro The Open Source Airtable Alternative https://github.com/nocodb/nocodb --------------------- For more- subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Frosted Glass https://frosted-glass.shud.in/ Faking a :snapped selector with Scroll-Driven Animations https://www.bram.us/2023/06/26/faking-a-snapped-selector-with-scroll-driven-animations/ Custom giraffe caret https://muffinman.io/blog/custom-giraffe-caret/ Future CSS: State Container Queries https://ishadeed.com/article/css-state-queries/ Position-Driven Styles https://kizu.dev/position-driven-styles/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

JavaScript Weekly The massive bug at the heart of the npm ecosystem https://blog.vlt.sh/blog/the-massive-hole-in-the-npm-ecosystem Useful DevTools Tips and Tricks https://www.smashingmagazine.com/2023/06/popular-devtools-tips/

Frontend Focus Future CSS: State Container Queries https://ishadeed.com/article/css-state-queries/ Introducing the MDN Playground: Bring your code to life! https://developer.mozilla.org/en-US/blog/introducing-the-mdn-playground/ Behind The Curtains Of Wikipedia Redesign https://www.smashingmagazine.com/2023/06/behind-curtains-wikipedia-redesign/ Going beyond constants with custom properties https://techhub.iodigital.com/articles/going-beyond-constants-with-custom-properties Position-Driven Styles https://kizu.dev/position-driven-styles/ Learn how to use hue in CSS colors with HSL https://developer.mozilla.org/en-US/blog/learn-css-hues-colors-hsl/ Mixing Colors with CSS https://ryantrimble.com/blog/mixing-colors-with-css/ 5 reasons why a browser and mail combination is worth it. https://vivaldi.com/blog/how-to/5-reasons-why-a-browser-and-mail-combination-is-worth-it/ form and search landmarks https://www.matuzo.at/blog/2023/form-and-search-landmark/ Synchronize videos, 3D-models, etc. to Scroll-Driven Animations https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/ Write type-safe styles with ease using panda https://panda-css.com/ A curated list of snippets to get Web Performance metrics https://github.com/nucliweb/webperf-snippets ModHeader: A Browser Extension to Modify HTTP Request and Response Headers https://modheader.com/ Shiki is a beautiful syntax highlighter. https://github.com/shikijs/shiki Flowbite Icons - Free and open-source SVG icons https://flowbite.com/icons/ Make your docs shine with Starlight https://starlight.astro.build/ The password game https://neal.fun/password-game/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

Node Weekly The type-safe SQL query builder for TypeScript https://kysely.dev/ Tuesday June 20 2023 Security Releases https://nodejs.org/en/blog/vulnerability/june-2023-security-releases TypeScript 5.2's New Keyword: 'using' https://www.totaltypescript.com/typescript-5-2-new-keyword-using Architecture of an early stage SAAS https://www.feelback.dev/blog/feelback-saas-launch-architecture/ An Introduction to Command Injection Vulnerabilities in Node.js and JavaScript https://www.nodejs-security.com/blog/introduction-command-injection-vulnerabilities-nodejs-javascript Tutorial: How to Create a Multi-Region Node.js Lambda API https://thenewstack.io/tutorial-how-to-create-a-multi-region-node-js-lambda-api/ Using PlanetScale with Serverless Framework Node applications on AWS https://planetscale.com/blog/using-planetscale-with-serverless-framework-node-apps-on-aws Introducing Nightwatch v3 https://nightwatchjs.org/ Shiki is a beautiful syntax highlighter. https://github.com/shikijs/shiki google-spreadsheet 4.0: Interact with Google Sheets https://theoephraim.github.io/node-google-spreadsheet/#/ DerbyJS is a full-stack framework for writing modern web applications. https://derbyjs.com/ Node Dependencies UI for VS Code https://npm.kasper.io/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Blur Vignette effect in CSS https://expensive.toys/blog/blur-vignette margin-trim as a best practice? https://chriscoyier.net/2023/06/12/margin-trim-as-a-best-practice/ Fit-to-Width Text https://kizu.dev/fit-to-width-text/ The New CSS https://matthiasott.com/notes/the-new-css State of CSS 2023 https://survey.devographics.com/en-US/survey/state-of-css/2023 --------------------- For more- subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories Blur Vignette effect in CSS https://expensive.toys/blog/blur-vignette margin-trim as a best practice? https://chriscoyier.net/2023/06/12/margin-trim-as-a-best-practice/ Fit-to-Width Text https://kizu.dev/fit-to-width-text/ The New CSS https://matthiasott.com/notes/the-new-css State of CSS 2023 https://survey.devographics.com/en-US/survey/state-of-css/2023 --------------------- For more- subscribe to the channel https://t.me/webWekkly

JavaScript Weekly Progressively enhance HTML with lightweight JavaScript libraries. https://unsuckjs.com/ Announcing Svelte 4 https://svelte.dev/blog/svelte-4 TypeScript 5.2's New Keyword: 'using' https://www.totaltypescript.com/typescript-5-2-new-keyword-using The Getting Started with AI Stack for JavaScript https://a16z.com/2023/06/21/the-getting-started-with-ai-stack-for-javascript/ Synchronize videos, 3D-models, etc. to Scroll-Driven Animations https://www.bram.us/2023/06/21/synchronize-videos-3d-models-to-scroll-driven-animations/ Recreating a JS Runtime to Understand Node's Magic https://www.youtube.com/watch?v=UdTdBknk23A Positioning anchored popovers https://hidde.blog/positioning-anchored-popovers/ React Server Components Under 7 Minutes https://www.youtube.com/watch?v=1YCccF3Bu3Q component that allows you to select elements in the drag area using the mouse or touch. https://github.com/daybrush/selecto AutoAnimate: Add Motion to Your Apps with a Single Line of Code https://auto-animate.formkit.com/ In-memory TypeScript job scheduler https://github.com/kibertoad/toad-scheduler The type-safe SQL query builder for TypeScript https://kysely.dev/ AI.JSX — The AI Application Framework for Javascript https://github.com/fixie-ai/ai-jsx 🐼 Panda CSS: Modern, Build-Time, Type-Safe CSS-in-JS https://panda-css.com/ Simple React Component That Makes Titles More Readable https://react-wrap-balancer.vercel.app/ Meet Codux: The React Visual Editor That Improves Developer Experience https://www.smashingmagazine.com/2023/06/codux-react-visual-editor-improves-developer-experience/ Using useMutation to make an advanced toggle in React https://www.propelauth.com/post/using-usemutation-to-make-an-advanced-toggle-in-react 🎉 Announcing Hyper Fetch 5.0 https://hyperfetch.bettertyped.com/blog/hyper-fetch-5-0/ Building a full-stack, fully type-safe pnpm monorepo with NestJS, NextJS & tRPC https://www.tomray.dev/nestjs-nextjs-trpc React Testing Crash Course with Next.js https://www.youtube.com/watch?v=Q-Sg4p_iQvw Create a tilt effect with React https://www.julienthibeaut.xyz/blog/create-tilt-effect-with-react --------------------- For more- subscribe to the channel https://t.me/webWekkly

Frontend Focus Modern CSS in Real Life https://chriscoyier.net/2023/06/06/modern-css-in-real-life/ State of CSS 2023- now open https://survey.devographics.com/en-US/survey/state-of-css/2023 Cyclic Dependency CSS Variable Toggles https://kizu.dev/cyclic-toggles/ Positioning anchored popovers https://hidde.blog/positioning-anchored-popovers/ Thoughts from “Meet Safari for Spatial Computing” https://blog.jim-nielsen.com/2023/thoughts-on-safari-spatial-computing/ The New CSS https://matthiasott.com/notes/the-new-css Fit-to-Width Text https://kizu.dev/fit-to-width-text/ Going beyond color contras https://www.youtube.com/watch?v=YxA_cxyMJ1E Improving performance for 3 million web sites https://www.youtube.com/watch?v=yW_4A4pTPA4 Frosted Glass https://frosted-glass.shud.in/ Visualize Your Ideas With Code https://motioncanvas.io/ SVG.js 3.0 https://svgjs.dev/docs/3.0/#svg-js daisyUI: A Library of Tailwind CSS Components in Multiple Themes https://daisyui.com/ Threlte: A Three.js Scene Renderer and Component Library for Svelte https://threlte.xyz/ Microsoft Clarity: Free Heatmaps & Session Recordings https://clarity.microsoft.com/ An open-source Notion-style WYSIWYG editor with AI-powered autocompletions. https://github.com/steven-tey/novel --------------------- For more- subscribe to the channel https://t.me/webWekkly

Node Weekly Node streams are fun(ctional) and fun now https://www.youtube.com/watch?v=9UhuSvAmIpI Scratch Understand the magic behind #nodejs core https://www.youtube.com/watch?v=UdTdBknk23A Tuesday June 20 2023 Security Releases https://nodejs.org/en/blog/vulnerability/june-2023-security-releases Packaging and selling a Node.js app https://docs.emailengine.app/packaging-and-selling-a-node-js-app/ piscina - the node.js worker pool https://github.com/piscinajs/piscina character detection module written in pure JavaScript https://github.com/runk/node-chardet MariaDB Node.js connector https://github.com/mariadb-corporation/mariadb-connector-nodejs node-emoji https://github.com/omnidan/node-emoji In-memory TypeScript job scheduler https://github.com/kibertoad/toad-scheduler A simple node module for scraping Open Graph and Twitter Card info off a site. https://github.com/jshemas/openGraphScraper --------------------- For more- subscribe to the channel https://t.me/webWekkly

Front-End Front Top Stories The gotchas of CSS Nesting https://kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting/ Rebuilding a comment component with modern CSS https://ishadeed.com/article/comment-component/ Modern CSS For Dynamic Component-Based Architecture https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ Modern CSS in Real Life https://chriscoyier.net/2023/06/06/modern-css-in-real-life/ Animated Pride Flags https://www.joshwcomeau.com/animation/pride-flags/ Web Apps on macOS Sonoma 14 Beta https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/ Reducing Complexity in Front End Development https://css-irl.info/reducing-complexity-in-front-end-development/ 300ms Faster: Reducing Wikipedia's Total Blocking Time https://www.nray.dev/blog/300ms-faster-reducing-wikipedias-total-blocking-time/ Advanced Form Control Styling With Selectmenu And Anchoring API https://www.smashingmagazine.com/2023/06/advanced-form-control-styling-selectmenu-anchoring-api/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

JavaScript Weekly If GitHub Gists could run And AWS Lambda were fun https://www.val.town/ The Stack Overflow Developer Survey 2023 Results https://survey.stackoverflow.co/2023/ Melange 1.0: Compile OCaml / ReasonML to JavaScript https://buttondown.email/anmonteiro/archive/melange-hits-v10/ An Introduction To Debugging In Node.Js https://blog.openreplay.com/an-introduction-to-debugging-in-nodejs/ Before your next frontend pull request, use this checklist https://evilmartians.com/chronicles/before-your-next-frontend-pull-request-use-this-checklist Nuxt in 100 Seconds https://www.youtube.com/watch?v=dCxSsr5xuL8 How To Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit https://www.smashingmagazine.com/2023/06/build-server-side-rendered-svelte-apps-sveltekit/ Visualize Your Ideas With Code https://motioncanvas.io/ Threlte: A Three.js Scene Renderer and Component Library for Svelte https://threlte.xyz/ Million.js: A Performance-Focused VDOM Replacement for React https://million.dev/ jest-extended 4.0: Additional Matchers for Jest Users https://github.com/jest-community/jest-extended A fully customizableReact-TailwindCSS component library https://rewind-ui.dev/ ⏱🌎 tz-lookup 8.0: Fast Time Zone Estimations from Latitude and Longitude https://github.com/photostructure/tz-lookup/releases/tag/8.0.0 The lightweight library for manipulating and animating SVG. https://svgjs.dev/docs/3.0/ Why do Client Components get SSR'd to HTML? https://github.com/reactwg/server-components/discussions/4 How to build animated & responsive tablet UIs with React Native (at the lakeside) https://www.youtube.com/watch?v=JU4VBbe23jg Finish your projects https://github.com/readme/guides/finish-your-projects --------------------- For more- subscribe to the channel https://t.me/webWekkly

JavaScript Weekly If GitHub Gists could run And AWS Lambda were fun https://www.val.town/ The Stack Overflow Developer Survey 2023 Results https://survey.stackoverflow.co/2023/ Melange 1.0: Compile OCaml / ReasonML to JavaScript https://buttondown.email/anmonteiro/archive/melange-hits-v10/ An Introduction To Debugging In Node.Js https://blog.openreplay.com/an-introduction-to-debugging-in-nodejs/ Before your next frontend pull request, use this checklist https://evilmartians.com/chronicles/before-your-next-frontend-pull-request-use-this-checklist Nuxt in 100 Seconds https://www.youtube.com/watch?v=dCxSsr5xuL8 How To Build Server-Side Rendered (SSR) Svelte Apps With SvelteKit https://www.smashingmagazine.com/2023/06/build-server-side-rendered-svelte-apps-sveltekit/ Visualize Your Ideas With Code https://motioncanvas.io/ Threlte: A Three.js Scene Renderer and Component Library for Svelte https://threlte.xyz/ Million.js: A Performance-Focused VDOM Replacement for React https://million.dev/ jest-extended 4.0: Additional Matchers for Jest Users https://github.com/jest-community/jest-extended A fully customizableReact-TailwindCSS component library https://rewind-ui.dev/ ⏱🌎 tz-lookup 8.0: Fast Time Zone Estimations from Latitude and Longitude https://github.com/photostructure/tz-lookup/releases/tag/8.0.0 The lightweight library for manipulating and animating SVG. https://svgjs.dev/docs/3.0/ Why do Client Components get SSR'd to HTML? https://github.com/reactwg/server-components/discussions/4 How to build animated & responsive tablet UIs with React Native (at the lakeside) https://www.youtube.com/watch?v=JU4VBbe23jg Finish your projects https://github.com/readme/guides/finish-your-projects --------------------- For more- subscribe to the channel https://t.me/webWekkly

Frontend Focus Modern CSS For Dynamic Component-Based Architecture https://moderncss.dev/modern-css-for-dynamic-component-based-architecture/ The gotchas of CSS Nesting https://kilianvalkhof.com/2023/css-html/the-gotchas-of-css-nesting/ Before your next frontend pull request, use this checklist https://evilmartians.com/chronicles/before-your-next-frontend-pull-request-use-this-checklist Web Apps on macOS Sonoma 14 Beta https://blog.tomayac.com/2023/06/07/web-apps-on-macos-sonoma-14-beta/ Rebuilding a comment component with modern CSS https://ishadeed.com/article/comment-component/ My Custom CSS Reset https://www.joshwcomeau.com/css/custom-css-reset/ Best practices for container queries https://zellwk.com/blog/container-queries-best-practice/ SVG versus Canvas: Choosing the right technology for your web application https://www.jointjs.com/blog/svg-versus-canvas Blur Vignette effect in CSS https://expensive.toys/blog/blur-vignette Visualize Your Colors On a Real Website https://realtimecolors.com/?colors=000000-ffffff-8fb4ff-ebf1ff-ff8f94 Washington Post Design System: A Growing Library of Design Tokens and Interactive Components https://build.washingtonpost.com/ Zeal is an offline documentation browser for software developers. https://zealdocs.org/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

Node Weekly An Introduction To Debugging In Node.Js https://blog.openreplay.com/an-introduction-to-debugging-in-nodejs/ Node v20.3.0 (Current) https://nodejs.org/en/blog/release/v20.3.0 Designing a Scalable Backend in Node.js https://blog.appsignal.com/2023/06/07/designing-a-scalable-backend-in-nodejs.html JavaScript’s Backtick Strings are Likely the Wrong Tool for Your Job https://spin.atomicobject.com/2023/06/05/javascript-backtick-strings-wrong/ How We Sped Up Search Latency with Server-sent Events in Express.js https://www.hyperdx.io/blog/speeding-up-search-latency-with-server-sent-events-on-express Why you should pin your GitHub Actions by commit-hash https://blog.rafaelgss.dev/why-you-should-pin-actions-by-commit-hash ⏱🌎 tz-lookup 8.0: Fast Time Zone Estimations from Latitude and Longitude https://github.com/photostructure/tz-lookup/releases/tag/8.0.0 Traf: Find Truly Affected Packages in Monorepos https://github.com/lemonade-hq/traf WhatWG Node https://github.com/ardatan/whatwg-node Postgres SQL syntax parser. https://github.com/oguimbal/pgsql-ast-parser Convert a tilde path to an absolute path: ~/dev → /Users/sindresorhus/dev https://github.com/sindresorhus/untildify --------------------- For more- subscribe to the channel https://t.me/webWekkly

JavaScript Weekly polyfill for WebAssembly https://github.com/evanw/polywasm Announcing TypeScript 5.1 https://devblogs.microsoft.com/typescript/announcing-typescript-5-1/ Use JSX without React https://nakedjsx.org/ Dan Abramov Rebuilds React Server Components from Scratch https://github.com/reactwg/server-components/discussions/5 wasmati: You should write your WebAssembly in TypeScript https://www.zksecurity.xyz/blog/posts/wasmati/ JavaScript’s Backtick Strings are Likely the Wrong Tool for Your Job https://spin.atomicobject.com/2023/06/05/javascript-backtick-strings-wrong/ Is React Having An Angular.js Moment? https://marmelab.com/blog/2023/06/05/react-angularjs-moment.html Painless WebGPU Programming With taichi.js https://betterprogramming.pub/painless-webgpu-programming-with-taichi-js-afa43c7adb2e Web Apps on macOS Sonoma 14 Beta

Frontend Focus WebKit Features in Safari 17 beta https://webkit.org/blog/14205/news-from-wwdc23-webkit-features-in-safari-17-beta/ Meet Safari for spatial computing https://developer.apple.com/videos/play/wwdc2023/10279/ What's new in CSS https://developer.apple.com/videos/play/wwdc2023/10121 Rediscover Safari developer features https://developer.apple.com/videos/play/wwdc2023/10262 New CSS color spaces and functions in all major engines https://web.dev/color-spaces-and-functions/ An introduction to @scope in CSS https://fullystacked.net/posts/scope-in-css/ Magical Rainbow Gradients https://www.joshwcomeau.com/react/rainbow-button/ Sharing WebSocket Connections between Browser Tabs and Windows https://brightinventions.pl/blog/sharing-websocket-connections-between-browser-tabs-and-windows/ Testing Sites And Apps With Blind Users: A Cheat Sheet https://www.smashingmagazine.com/2023/06/testing-sites-apps-blind-users-cheat-sheet/ Watch Out for Layout Shifts with ‘ch’ Units https://cloudfour.com/thinks/watch-out-for-layout-shifts-with-ch-units/ Re-evaluating px vs em in Media Queries https://keithjgrant.com/posts/2023/05/px-vs-em-in-media-queries/ What is Hiber3D Development Kit (HDK)? https://developer.hiber3d.com/docs Use JSX without React https://nakedjsx.org/ Materialize: A Responsive Frontend Library Based on Material Design https://materializeweb.com/ Generate, preview and copy beautiful colour palettes with the help of ChatGPT https://www.colourgpt.app/ --------------------- For more- subscribe to the channel https://t.me/webWekkly

מיטאפ מיוחד - 2 הרצאות מעולות של Benjamin Gruenbaum ושל Ran Isenberg בשילוב של הרצאות בזק!!! שווה לשמור את התאריך!!! https://www.meetup.com/negevdev/events/294022965