So much of CSS is totally half-assed. I add blur on an image when you hover over it. My box-sizing is border box, yet, when the image is blurred I get this garbage blur overflow on the edge. The solution (2nd image) is to..say "overflow: hidden" (line 66)? What? ImageImageImage
How this *should* be implemented is that the blur is contained inside the parent box. The end. If I want the blur to go outside of the parent then I'll put it on *that* component. Nobody in the right mind wants *anything* to bleed outside of boxes accidentally.
But that's CSS all over. Just a half-assed box model that isn't a box model at all, more of a wet-paper-towel model where it seems like the browser devs make a feature and then forget to make it stay inside a box, or forget to make it work inside some random situation.
Incidentally, if someone tries to tell you "CSS uses a box model", then they demonstrate text overflowing a box, they are actually demonstrating that the "box model" is a total lie. Maybe in some parallel universe with quantum boxes you might have an IRL box behave like that.
Now I just accept that CSS's "box model" is broken and will randomly fail to contain things and right at the top just do:

body * { box-sizing: border-box };

It's a slight performance hit, but if the browser devs cared they'd detect this common pattern and make it faster.
I also think what keeps CSS sucking is the apologists. Yes, I can fix with yet another line of obscure CSS, but I shouldn't have to. Boxes should work like boxes and contain everything unless I say otherwise, not randomly not work like box unless I say otherwise.

• • •

Missing some Tweet in this thread? You can try to force a refresh
 

Keep Current with Zed A. Shaw, Writer

Zed A. Shaw, Writer Profile picture

Stay in touch and get notified when new unrolls are available from this author!

Read all threads

This Thread may be Removed Anytime!

PDF

Twitter may remove this content at anytime! Save it as PDF for later use!

Try unrolling a thread yourself!

how to unroll video
  1. Follow @ThreadReaderApp to mention us!

  2. From a Twitter thread mention us with a keyword "unroll"
@threadreaderapp unroll

Practice here first or read more on our help page!

More from @lzsthw

2 Jun
I have a couple of new gotchas for people doing Svelte:

1. fade:out, or almost any "out" transition effect is death. Avoid at all costs.

2. {#await} on a promise is great, but if you update the promise it reloads the *entire* DOM at that point. Put it into a component.
For #1, the demo involves this fade:out on the Spinner I use to show the video is loading. Seems harmless *until* you want to transition to an entire new page/component, say with svelte-spa-router. Image
You can see it happen here. I click the link for a related video, and you can see the current video has to "fade out", preventing that page from leaving the DOM, so it looks like both pages load at the same time. I'm at a point now where I don't use *any* out transitions.
Read 10 tweets
1 Jun
Let's try an explanation of print() vs. return using tapes and switches.

At the simplest a computer has:

1. An input tape.
2. An output tape.
3. A code tape.
4. A memory bank.
5. A stack bank.

en.wikipedia.org/wiki/9_track_t… ImageImage
For all you youngins who never used VHS tapes, Sony Walkmans, a film real, or loaded your video games into your C-64 with a tape, then it's kind of like if someone wrote 1s and 0s on a roll of toilet paper as they rolled it onto another roll, so to read it you have to unroll it.
The tape dominates all concepts of computing. You wrote data and read to tapes. You printed output to rolls of paper on giant typewriters (printers), which is basically a paper tape. There were even paper tapes. Their defining characteristic is they are: LINEAR.
Read 31 tweets
1 Jun
I've been playing different Ark islands to see what I like, but I still can't figure out why people like this game. I get it, you have dinos and it's got a lot to it, but it's incredibly unbalanced almost to the point of being unplayable without excessive cheats. For example:
In playthrough on Aberration I had a Basilisk (ark.fandom.com/wiki/Basilisk) find my base in the *beginner easiest zone* and camp out there. To kill one you need to be about level 100 and have another creature called a Rock Drake (ark.fandom.com/wiki/Rock_Drake) plus Hazmat gear.
I was a little level 20 newbie who had only built a base and tamed one dino, so what the hell kind of game has the most powerful creature in the game killing starting players? I ended up having to use god mode to kill the thing and it still took about 20 minutes at my level.
Read 15 tweets
31 May
Spent a whole day figuring out a weird bug with svelte-spa-router only to find out, it's "on purpose" (which is programmer for "ooops uhhhh yeah I totally meant the"):

github.com/ItalyPaleAle/s…

One reason people hate SPAs is things like this. Clicking a link loads a new page.
The end. Full stop. Don't be fancy unless I tell you. You load the page again when I click the link. What's svelte-spa-router do?

Change two variables and then OOPS it's up to you dude to figure out how to make that work like an actual link does everywhere else.
So, with svelte-spa-router you CANNOT treat your svelte routes like pages because of this bug. And it is a bug. You have to treat each route pattern like it's a singleton instance that run onMount once and once only, then you have to sort out changes within that same route.
Read 5 tweets
31 May
Alright, some folks have real answers AND these real answers point out the next stupidity of JavaScript NaN. First up "it's an IEEE standard" is not a defense, but here's the one reply for the reasoning:

stackoverflow.com/questions/1565…

Now...if we're following IEEE then, nope:
1. The IEEE standard is *entirely* about Math equality of floating point numbers. There is *NOT* a specification of === since that's not a math thing, that's a JS thing, so they could have fixed it there.

== is IEEE, fine.

=== is what everyone actually needs.

Then:
2. The IEEE standard is about MATH with FLOATING POINT. So then why is a NaN used when you do parseInt() on a string?

Strings are not floating point. Int is not floating point. If the JS people defend with "IEEE standard" this returning NaN in this situation is a vioaltion. Image
Read 6 tweets
30 May
Remember how I talked about Ark's Scorched Earth being nothing but a death festival? I've been watching various pro-level players play Ark and there's a certain strategy they use:

1. Die often and forget your stuff.
2. Level up movement speed to out run dinos.

It does work.
Scorched Earth for those who don't know is basically a desert world with unrealistic heat properties. You die in about 4 minutes when the temp is 38c (LOL) but live if you get in a tent and make it 37c. Given that 1/2 of the team is from Egypt I find this doubly hilarious.
Unlike other maps you spawn in places and die almost instantly because of the heat, or cold at night, or millions of deadly dinos. You also can't really escape the heat inside a basic thatch structure--the first kind you can build. You just die over and over with no progression.
Read 11 tweets

Did Thread Reader help you today?

Support us! We are indie developers!


This site is made by just two indie developers on a laptop doing marketing, support and development! Read more about the story.

Become a Premium Member ($3/month or $30/year) and get exclusive features!

Become Premium

Too expensive? Make a small donation by buying us coffee ($5) or help with server cost ($10)

Donate via Paypal Become our Patreon

Thank you for your support!

Follow Us on Twitter!

:(