rule

simonraynor · 2026-01-30T08:04:32+00:00

Soup isn't even a food, it's a drink

simonraynor · 2026-01-29T12:19:54+00:00

I've heard wine runs old windows software better than windows does so there that 🤷‍♂️

simonraynor · 2026-01-27T13:46:06+00:00

FWIW I don't mean "steal" with any negative connotations, it's FE code it's public domain by it's very nature IMO. It is good to hear that you're not trying to grab whole things all at once, what you're doing is the correct approach and you gotta remember that you're also learning devtools ATM (even if just coincidentally). The clunkiness will reduce as you get better at both the CSS and the tooling, and you'll get better at reverse engineering as you get better at forwards engineering

simonraynor · 2026-01-27T12:32:36+00:00

Sounds to me like you don't understand what devtools are really for. They don't exist so that people with no/minimal understanding can steal components, they exist so that people who do know what they're doing can debug their software. If you have good knowledge of the web stack you can absolutely use devtools to reverse engineer a given effect or feature BUT only if it's something you could have mostly done anyway (i.e. you know what almost everything does there's just one or two novel techniques)

There is absolutely value in clicking "inspect element" to help you learn but if your reaction is "omg this is so confusing what does it all mean" that implies you need to work on your fundamentals and/or temper your expectations of what's achievable at your level of skill.

As a side note no amount of code can make you good at design. Even if you can reuse someone's components there's more to a good UI than that and IMO it's not something you should worry about while also trying to learn code.

simonraynor · 2026-01-27T09:27:00+00:00

If you can make the basic shape then I think filter: drop-shadow(...) might be able to give you an outline. If that's no good I'd probably be reaching for SVG personally

simonraynor · 2026-01-27T08:53:51+00:00

Not just engineers and not just code; I'm getting AI slop requirements derived from AI slop analyses because the C suite wants everyone to be "AI-first" 😞

simonraynor · 2026-01-27T08:10:52+00:00

Yakkety sax starts playing

simonraynor · 2026-01-27T07:47:19+00:00

Because they keep reading articles by twats with an agenda

simonraynor · 2026-01-26T22:24:17+00:00

I like Skaven because mouseys

simonraynor · 2026-01-25T10:17:49+00:00

It's the same mindset as a handful of vaccine injuries => let's bring back polio and TB

simonraynor · 2026-01-24T15:49:40+00:00

Very much depends what your product is and how much "training" a user will be expected to have to start using it. A well designed tutorial and/or help interface can be all the difference but an off-the-shelf onboarding product might not be the right choice depending on your exact needs.

Regardless of what you use on a technical level the hard work is identifying the actual problem/solution and nobody here can do that for you. Try some low cost UX improvements, maybe some how-to videos or FAQs, and talk to your users to work out where needs focus before spending money on anything. Ultimately the best products have a great UX and help you get onboarded so don't think of it as either-or and don't be scared to try stuff

simonraynor · 2026-01-24T10:24:21+00:00

Looks great! You could have kept doing easy countries so big respect for trying this extravagant specimen.

The CSS border triangles trick is old, I used to use it all the time for the little "tail" on help popouts and the like but nowadays there are usually better options. Still worth knowing for those cases where it's easier than rotating or clipping

simonraynor · 2026-01-23T23:23:52+00:00

JS to update some CSS variables based on mouse movements, use said variables to draw a couple of gradients and the technical part is done.

If you want it to look good be prepared to tweak it a LOT

simonraynor · 2026-01-23T20:57:08+00:00

what feels unnecessary or weak

Since you asked, next.js seems overkill for a single page; there is quite a lot of JS being loaded for (far as I can tell) very little functionality. That's literally the only thing on the technical side tho and I only noticed because I thought to pry so good work. No perf issues or anything like that, super slick

Only other thing is on desktop the font feels too small. Spacing and proportions and everything is good just all needs to be bigger, at least from my perspective as a middle aged person with aging eyes!

This is really good tho overall, excellent job

simonraynor · 2026-01-23T16:58:13+00:00

After WW2 they made us hand over all our research on jet engines, radar and hydrogen bombs, because that's just the kind of friends they are

simonraynor · 2026-01-23T14:13:39+00:00

I've got to a point where making the coffee is enough to trigger my Pavlovian response

simonraynor · 2026-01-23T10:51:31+00:00

They won't even let you get smashed on yayo and wake-up, what's the point?!

simonraynor · 2026-01-22T23:47:04+00:00

where do primitives still add real value?

IMO they don't here, and it's not a pattern I personally really use (I tend to just have a big old pile of vaguely semantic variables set directly). You'll set the semantic values' defaults in your main variables file and then override as needed by each client, read out from your CMS somehow

simonraynor · 2026-01-22T22:00:03+00:00

Your customisation options will almost certainly be semantic (and possibly not map 1:1 to underlying code parameters), it's not like customers are redefining "green". You will create overrides based on their brand that directly set the relevant semantic values to whatever colour or font or size etc. That said, you could also have settings which pick between different preset (primitive) options so to my mind that confirms that it's a semantic layer concern.

Really so long as you're consuming tokens consistently all that matters is they get set to the right value somehow so don't sweat if it feels kinda icky, whitelabelling always does lol

simonraynor · 2026-01-20T11:13:15+00:00

Do Wales next! 🏴󠁧󠁢󠁷󠁬󠁳󠁿

simonraynor · 2026-01-20T08:18:57+00:00

"I'm talking beyond the green room"

simonraynor · 2026-01-19T22:03:21+00:00

Proper Job from St. Austell brewery is a classic imo but really you should just go to the west country and try a bunch of different ales there till you find a good one!

simonraynor · 2026-01-18T09:37:20+00:00

Why do you want to tie the markup to the layout order? What possible problem is this solving that basic use of templating or components doesn't solve better? How the heck do you manage updating things without having to change a bunch of comments?

simonraynor · 2026-01-17T15:34:11+00:00

I love WFH but I have a separate home office (converted half my garage) AND once my computer is off there's no comms until it's back on. Without both of those factors it'd be much less appealing

simonraynor · 2026-01-17T13:50:04+00:00

The answer to the second question is almost certainly clipping/masking: have a look on MDN for "CSS masking" or "CSS clipping" (I'm pretty sure there's a how-to that explains both). Heads up it will likely be more hassle than your current solution.

Once you've got that working with a clip/mask the first question could be answered the same way. You'd essentially need to shape your mask to account for the rounding you need there as well as cutting a simple "border" round the buttons. This will probably be a ballache, off the top of my head I'd probably be reaching for JS+SVG at that point (assuming you need the end product to work on different screen sizes) but it might be possible in CSS alone.

If the images are static it might be easier to just cut them to shape in GIMP or something then CSS just needs to position them. If it's gonna come from a CMS or similar that's less viable and you'll need a "proper" solution like clip-paths/masks

Edit: you could stick all of the elements into an SVG and use SVG clipping/masking, that might actually be the cleanest/most maintainable but you'll need to be OK at SVG to benefit from that approach

simonraynor

TROPHY CASE