r/javascript

set this up a few weeks ago that turns my repo's daily commits and merged PRs into a short audio rundown, mostly as a joke. a podcast about a project only i work on. figured i'd listen once and delete it.

The part I didn't expect: hearing 'fix stuff' and 'wip' and 'address feedback' read back in a calm narrator voice is genuinely embarrassing. i've started writing commit messages like someone's going to read them out loud, because now someone is. my log actually reads like sentences now.

it also catches drift i don't notice while heads-down, the same file quietly showing up in the rundown for days after i'd have sworn i closed it out.

so for the solo maintainers and small teams: do you write commit messages for a future reader, or is it 'wip' and 'fix' until git blame forces you to care. the readback is the first tool that's made me treat my own log like something worth reading. written with ai

Lanterm is a TypeScript / React toolkit for embedding real PTY-backed terminals into browser applications.

Instead of being a complete web terminal server like ttyd, it is intended for cases where you want to compose the terminal UX inside your own application.

Packages

• @lanterm/react: xterm.js-based React terminal surface
• @lanterm/server: server-side utilities for connecting PTYs and WebSockets
• @lanterm/pty: native PTY binding built with Rust portable-pty and napi-rs
• @lanterm/protocol: shared message types and codecs between client and server

Why I made this

With coding agents and browser-based developer tools, there are more cases where I want to do more than just expose a terminal in the browser. I often want to combine the terminal with surrounding UI such as file views, execution history, agent timelines, and dashboards.

I also want to hook into terminal input / output, for example to save execution logs, update UI in response to specific output, or pass terminal activity into an AI agent's context.

Full web terminal servers are useful, but they can be a bit too large when the terminal needs to be integrated with application state and UI. On the other hand, wiring xterm.js and node-pty directly means rebuilding protocol handling, resize behavior, session lifecycle, and React integration each time.

Lanterm is meant to sit between those two layers as a library toolkit. It is still an early release, so I would appreciate feedback on the API design and implementation.

I’ve been working more with React and JavaScript, and I’m noticing that messy code usually comes from small things like repeated state, unclear component logic, too many conditions, or API calls being mixed directly inside components.

For people who write JS/React regularly, what small pattern or habit made your code noticeably cleaner?

Following the Vanilla JS culture, I built a Javascript library that creates HTML elements associated with a variable and a CSS style with a single instruction.

This approach allows you to create web applications using "99.9%" JavaScript, so the HTML files work by importing these scripts. You practically don't create HTML elements in the HTML file; the most you use is up to the body tag. The rest is all Javascript file import.

The result is clean code, without HTML tag trees that make project maintenance difficult.

Since almost everything is done via Javascript, maintenance is much clearer and therefore easier.

A collateral benefit is the identification of created elements via browser inspection, including the CSS style associated with that element in a clear and simple way.

Only the library at: https://github.com/addller/kalida_script.git

Example available at: https://github.com/addller/kalida_framework.git

Built this for myself, sharing in hopes some may find it useful.

Features:

• Reduce supply chain risk with a .npmrc preconfigured with ignore-scripts and min-release-age enabled
• Test without extra tooling using the built-in Node.js test runner
• Run TypeScript directly in Node.js using native type stripping (erasableSyntaxOnly enabled to enforce compatibility)
• ESLint & Prettier preconfigured
• Husky pre-commit configured to lint, format & test
• Strict type checking on run and test
• Pinned dependencies to reduce supply chain risk

Did you find or create something cool this week in javascript?

Show us here!

Unpopular take after years of bolting metrics onto my own js projects: velocity charts, commit counts, bundle-size over time, none of it ever told me the actual shape of a week's work. it's all lagging vanity numbers.

the thing that stuck was hearing the repo's week narrated back to me instead. the commits, the one or two PRs, the issues i opened then forgot about, out loud and in order. turns out my week has a storyline i never catch staring at green squares or a grafana panel.

What actually surprised me was how much of my 'progress' was me quietly undoing decisions i'd made earlier in the same week. you don't notice that reading a diff. you notice it when something walks you through the sequence.

so for anyone maintaining a stack of npm packages or one big app repo, be honest: is your dashboard telling you anything you couldn't already feel, or is it a comfort object. what's the last thing you learned about your own coding habits that no tool actually surfaced.

Over the years, in our goal to achieve faster and faster web applications, we created different hydration and rendering strategies. Each with benefits and drawbacks that we explore in this article.

This post contains content not supported on old Reddit. Click here to view the full post

This one took a while, it's probably the longest thing I've written on this blog. I wanted to do a proper end-to-end walkthrough of cmd/compile: real package names, real data structures, diagrams for the AST and SSA CFG, and the flags you actually need (-m, -m=2, GOSSAFUNC, -S) to observe each phase yourself rather than just take my word for it.

Covers the full pipeline: lexer → parser → type checker → IR lowering → SSA construction → optimization passes (inlining, escape analysis, BCE, nil check elimination, register allocation) → architecture-specific code emission.

Hope it's useful — happy to answer questions or push back on anything that looks wrong.

I know this is not the subreddit for C language, but i have learned a bit of C and if I could try to relate and try to make things click as if some "concepts" were similar, then it would most likely make me understand faster and much better. Please understand me from where I'm at because I'm really struggling to understand the heap stack and stuff and copying by reference, so I'll start.

Note: I did many research on this and I have concluded that I am correct, but I would really wanna be sure if my understanding is correct and I would like to be corrected if what I think is wrong or right, hence the reason why I am posting this. Also, I am self studying and not enrolled in a school, no programming friends, so I have literally no one to confirm with. I just want to be confident that I understand what I learned, so please bare with me, thank you. Would be much better to reply this if you have some understanding on how pointers work in C, but will try to reiterate here.

1.) Pointers in C are basically special variables. Variables have their own memory addresses, so that doesnt excempt pointers from having one. Both normal variables and pointers have their own memory addresses. So the gimmick of pointers is that they refer (or point) to the memory address of the variable they are assigned. Basically, you assign a variable towards a pointer variable, and once you call that pointer variable, what pops up is the memory address of the variable it is assigned to.

2.) My understanding of copying by reference (this refers to objects, not primitives. primitives are copying by value) is similar to this, where a variable has its own memory address, and the memory address it holds ALSO refers to the memory address of the object. is this how it works?

e.g.

let person = {
name: "Joanna",
age: 18,
height: "195cm"
};

What's happening here is that person variable holds a memory address (say 0x100) and the object {...} has its own memory address too. (say 0x7ff...). 0x7ff...(object's memory address**)** is sitting at 0x100 (person variable's memory address) so basically we can conclude that person variable is referencing to 0x7ff... right?

Unlike copy by value where you do e.g.

let age = 18;

What happens here is that age has its own memory address (say 0x101) and the value 18 is represented by bits (say 10001 1010101 10001) and sits directly on the memory address of the variable.

Conclusion: In my understanding, they're similar to a point that they generally point or refer to something. For pointers in C, the pointer points to a memory address of a variable, while in JS, the normal variable points or refers to a memory address of the object (there are no pointers in JS, i'm just saying generally speaking they are atleast referencing a memory address)

Final question: are all of my understandings correct? Thank you for your patience with this one. I know i shouldn't be in too deep as a beginner but I genuinely want to learn the difference between copy by reference and copy by value. (please note i am not talking about pass by reference, but copy by reference.) Thank you once again!

Hello all, please dont be harsh with me cause I'm really new with JS. Doing free code camp right now and I am just wondering if destructuring assignments are often used. e.g.

I come from C and really the amount of syntax in this language is just overwhelming, is this normal when learning JS? when does this end T_T

const person = {
  name: "Bob",
  age: 25,
  job: "Designer",
  city: "New York"
};


const { job, city, ...remainingProperties } = person;


// { name: "Bob", age: 25 }
console.log(remainingProperties);

It's really hard for me to remember all these syntax to be honest so I'm not sure if its wraps for me in this language. I got so used to syntax where every variable is declared 1 by 1. Here are the questions once again to be organized:

1. is it just me or the amount of syntax in this language is just overwhelming like its just so many, is this normal when learning JS?
2. can I opt to not use it? or should I get used to it starting from now since it will really be beneficial?
3. Like how important it is that it must it be used? is it treated like an "alternative" way of a syntax or is it really required? I really dont get the importance of it. Yes I get it cuts off multiple lines of code, but wouldn't you have a better readability, which makes you able to trace which properties are assigned or whatever rather than having a super concise syntax whilst remembering that "oh, this goes through here"
4. I've searched all over the net and people say they like it for readability and conciseness, however i really dont see it being readable at all, i mean it is but it makes my brain lag for like a minute or two. Readability is usually defined by lesser time for you to have to read the specific line of code right? If it really is readable as they say, then is this something like a skill issue and I have to just get used to it?
5. I know this topic is usually about destructuring assignments, but I felt this emotion towards arrow functions too. Like are arrow functions just "alternatives" or at some point I must be required to learn it? I really feel comfortable with making normal functions rather than arrow functions to be honest.

Thank you all! Please dont give me remarks like "Just give up if you can't do the learning" cause that's what I'm here for, Im asking for genuine advice and looking to see if what I feel is normal. Thank you once again.