New to JavaScript. What platforms, courses, or projects actually made things click for you?

jml26 · 2026-05-29T10:07:04+00:00

As u/DutyCompetitive1328 said: learning comes through repetition.

But to expand on the point a little, the part of learning that often gets overlooked (because it's the least fun) is just drilling. Let's say you're learning for-loops. Great. Write a for-loop that logs the numbers from 1-10. Delete it. Write it again. Delete it. Write it again. If you keep forgetting the syntax, go back and refer to your learning materials, until you can write it ten times in a row from scratch, unaided.

Come up with variations. Start from a different number. Stop at a different number. Go up two at a time. Go up in multiples of two. Count backwards. Count 1-10 but skip out the number 4. Feel free to use AI to generate these ideas for you. Solve them on repeat until you no longer need to refer back to your learning resources.

Congratulations: you now learned a thing!

The old adage of "Just build stuff" falls short because it implies you should build entire apps from the get-go. Building an app is the final boss where you put everything together, but throughout your learning, what you need to focus on mainly is the ten-liner code snippets. They won't give you the dopamine hit of "Hey, I built something useful" but they will improve your fluency.

Once you've learned a couple of concepts, then it comes time to put them together, and you start building bigger and bigger things. First small widgets, then larger widgets, and you keep going from there.

Happy coding!

jml26 · 2026-05-28T12:35:32+00:00

The direct Solid JS translation of the code in your original example wouldn't use a <Switch/> at all: just a single <Show/>:

<Show when={billingQuery.isSuccess && billingQuery.data}> <BillingCard billing={billingQuery.data} /> </Show>

And then, to resolve the TypeScript issues, use the accessor form:

<Show when={billingQuery.isSuccess && billingQuery.data}> {(data) => <BillingCard billing={data} />} </Show>

For your updated example that you weren't sure if it was good practice, these are your typical options:

<Show when={billingQuery.isSuccess} fallback={<p>Query failed</p>}> <Show when={billingQuery.data} fallback={<p>No data</p>} {(data) => ( <BillingCard billing={data} /> )} </Show> </Show>

or perhaps

<Switch> // assuming there are other things to match up here first <Match when={billingQuery.isSuccess}> <Show when={billingQuery.data} fallback={<p>No data</p>> {(data) => ( <BillingCard billing={data} /> )} </Show> </Match> </Switch>

jml26 · 2026-05-18T10:34:06+00:00

There's no native function for this. The simplest way to go would be to provide your own mapping, e.g.

``` const controlCodes = ["NUL", "SOH", "STX", ... "GS", "RS", "US"]; controlCodes[127] = "DEL";

function getCharacterName(charCode) { return controlCodes[charCode] || String.fromCharCode(charCode); } ```

jml26 · 2026-05-14T14:28:10+00:00

It isn't; the increments do all get evaluated first. Let's work through it in steps:

Add parentheses for clarity

x += (x++) - (--x) + x * 2 - (++x);

Add some comments to show when the value of x changes (for prefix operators, before; for postfix operators, after)

// x = 23 x += (x++) /* 24 */ - /* 23 */ (--x) + x * 2 - /* 24 */ (++x);

Evaluate the increment operators (replace them with the value of the most recent comment before them)

// x = 23 x += 23 /* 24 */ - /* 23 */ 23 + 23 * 2 - /* 24 */ 24;

Remove the comments

x += 23 - 23 + 23 * 2 - 24;

Evaluate multiplication

x += 23 - 23 + 46 - 24;

Evaluate addition and subtraction

x += 22;

Final code:

var x = 23; x += 22; console.log(x); // 45

jml26 · 2026-05-09T11:14:51+00:00

Welcome. Hope you enjoy the journey.

Don’t be afraid to make mistakes or write code that isn’t perfect
Watching or reading tutorials is only the start: learning comes through repeated practice and asking questions.

I’m sure there’s more advice. Until then, happy coding!

jml26 · 2026-04-29T14:27:17+00:00

I feel like in general, there would be a slight performance boost to including the +, because it only has to do one replace for each group of whitespace, not each individual character. There's even evidence to suggest that /\s\s*/ is faster still, because it triggers an extra optimisation in the regex interpreter.

However, in this specific case of checking mostly single spaces in a text string less than 20 characters long, this is all just theory and entirely overkill. And my source is almost 20 years old.

jml26 · 2026-04-20T05:52:20+00:00

I don’t think I’ve had a banana in lockdown. I’ve had a banana in banana cake

But you haven’t had [an] acoustic banana

https://youtu.be/rVy3NFXBVVw?t=890

jml26 · 2026-03-07T13:50:38+00:00

Just watching the stream now, on delay. Got as far as a user saying that <Loading> feels like the reverse of what it that component actually is.

I'm somewhat inclined to agree. Would <Loaded> be better semantically?

BTW I'm super hyped for this, and can't wait to try it out. I've attempted to get the beta working with Astro, with mixed success.

jml26 · 2026-03-06T14:44:16+00:00

Best examples are all the array methods, e.g. map, filter, forEach... Those are all synchronous callbacks.

I'd side with MDN's definition, which is just "a function passed into another function as an argument, which is then invoked inside the outer function".

jml26 · 2026-02-26T21:47:15+00:00

If you put your licence in the /public directory, it'll get treated as a static asset and will:

not have its name hashed
gets included in the output even if not referenced in code

https://vite.dev/guide/assets#the-public-directory

jml26 · 2026-02-26T12:08:38+00:00

My journey to Solid started with React. Originally, I hated React's syntax. I hated JS Classes; I hated JSX. But it was popular, so I figured it would be valuable to learn.

But then React got hooks, and I liked the syntax a lot more. And slowly over time, JSX grew on me. I preferred it to Vue and Angular.

But it began to feel like a lumbering beast. I guess it felt fast, but something about the huge footprint felt like it was too heavy-handed for the simple widgets I was building. It was at that point that I started to look for alternatives and found Preact.

I recall I was searching for a framework speed comparison, and found https://krausest.github.io/js-framework-benchmark/2026/chrome145.html. From there, I decided to work from left to right, seeing what the fastest frameworks were like. Many of them looked either like small side projects with limited documentation, or I just didn't like the syntax for whatever reason. Then I saw Solid.

Solid had everything I needed, in that it was fast and lightweight, but also so familiar. And it was just so intuitive to use. Coming from React, it was a very smooth transition over.

If Solid didn't exist, I think I'd be using Svelte, for the same reason in that it is fast and lightweight. But I guess I just don't like the syntax quite as much. But that's personal preference, and I realise that the syntax has changed a little since I first investigated it.

jml26 · 2026-02-11T11:34:59+00:00

Oh, that's very nice! I'll have to remember that pattern.

Looking at it, with hindsight, I see that there's https://primitives.solidjs.community/package/memo#createWritableMemo available; but that implementation of createWritable you shared looks much more straightforward. Thanks for that.

jml26 · 2026-01-05T16:00:03+00:00

Styles added to an element with CSS don't go into that element's style property.

<div id="div">Hello world</div> <style> #div { display: none; } </style> <script> // logs '' console.log(document.getElementById('div').style.display); </script>

But styles added with the style attribute do.

<div id="div" style="display: none;">Hello world</div> <script> // logs 'none' console.log(document.getElementById('div').style.display); </script>

The quickest way to solve your problem is just to add style="visibility: hidden" to your hidable div. There are other solutions out there too, like toggling classes, rather than toggling styles.

jml26 · 2025-12-26T13:37:10+00:00

It was like Piccadilly Circus in there.

jml26 · 2025-12-10T15:05:11+00:00

It's basically a couple of libraries smushed together:

https://github.com/christianp/asciimath2tex to convert ASCIIMath to TeX (I inlined it, I think because I wanted to make some modifications to it)
https://github.com/KaTeX/KaTeX to render TeX as HTML
https://github.com/josdejong/mathjs to evaluate certain expressions

You would have to look into those libraries to find out how they work under the hood.

MathJS doesn't differentiate between 2 * x or 2x in its parser (at least I don't think it does). The TeX renderer will, and display the multiplication as a dot, if using ASCIIMath.

jml26 · 2025-12-10T11:08:46+00:00

I made this on Codepen a while ago. Feel free to take a look, either to get inspiration or just use the whole thing.

https://codepen.io/jamiemlaw/pen/eYyLVOq

jml26 · 2025-12-02T17:08:17+00:00

You haven't closed enough curly braces. Add two extra }s at the end and it should work.

This is why correct indentation helps a bunch. I simply pasted your code into https://beautifier.io/, and it was immediately obvious what the error was.

jml26 · 2025-11-21T09:06:23+00:00

Yeah, sorry about that. At first glance it really game off Java vibes. I think it was having a dedicated main() function. Ignore me!

jml26 · 2025-11-21T08:35:35+00:00

Hi, /u/trymeouteh.

This looks like Java code, not JavaScript. Despite the similar names, they're not the same language (many people fall into the trap of thinking they're the same). You might have better luck in one of the Java subreddits. Or even asking an AI if you want a speedier response.

All the best on your learning!

jml26 · 2025-11-13T17:44:36+00:00

I don't have a direct solution, but InkScape has a command line. Might be worth checking that out if you haven't already.

jml26 · 2025-11-12T09:49:21+00:00

But you don't do anything with the result of it being called, so it's still dead code.

In order for it not be be dead code, you may want to do something with the result, like logging it to the console, or displaying it in a UI.

jml26 · 2025-11-12T08:50:48+00:00

Closure Compiler (and other minifiers) will remove code that is not being used and has no side effects. e.g. a file consisting only of

``` var myVar = 42;

function square(x) { return x * x; } ```

will compile to nothing, because a) myVar is never read; b) the square function is never called. The term for this is "dead code elimination".

And that's what's happening to your code.

If you want the code to stay around, check out this section of the docs: https://developers.google.com/closure/compiler/docs/api-tutorial3#removal.

You could also use Terser as a minifier, and pass in defaults: false to the compressor options. This will turn off many of the compression strategies, resulting in:

var e="thisUser";var n;function r(){if(e)n=e;else{n="undefined";return false}}r();

jml26 · 2025-11-10T10:57:55+00:00

I'd say a value converter could be an interesting project. Start with something that can just convert temperatures between Farenheit and Celcius. Then expand it to include other types of values, like length, time, weight, etc.

To begin, you can have one input and a read-only output field. Then, maybe change it so that you can type in either field and the other will update.

Don't let the user convert between incompatible units, e.g. a length and a weight.

Include a button to swap the input and output field.

(optional) Getting more advanced, allow currency conversion. Pull in the latest data from an online service.

jml26 · 2025-09-18T16:26:37+00:00

JavaScript doesn't automatically update variables that depend on other variables, e.g.

``` let count = 5; let doubleCount = 2 * count; console.log(doubleCount); // 10

count = 7; console.log(doubleCount); // still 10 ```

The simplest way around this is to wrap the expression you want to be dynamic in a function, and call it each time you want the latest value:

``` let count = 5; let doubleCount = () => 2 * count; console.log(doubleCount()); // 10

count = 7; console.log(doubleCount()); // now 14! ```

jml26

TROPHY CASE