Tweet

Zed A. Shaw, Writer

2 Jun, 10 tweets, 4 min read

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.

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.

Once you remove the fade:out from everything it works flawlessly. I consider this a bug, just not sure where. I think Svelte needs a way to say "stop all transitions NAO!" so svelte-spa-router can use it.

For #2 the demo is in how, when I click on a related video it looks like the *entire* list of videos is first reset to an empty array, then filled. This causes the whole DOM tree at that point to go away, flash, then come back. What's supposed to happen is it should diff the DOM.

The cause is this little svelte-spa-router hack on lines 10-12 that I needed in a page to make links work as expected. For bizarre reasons svelte-spa-router only considers links to *different* route components as a new link, so it doesn't run onMount. Those lines fix it.

BUT, this is not a svelte-spa-router page that I've put into client/routes.js. It is a separate component that I'm using *inside* those routes anywhere I need related videos. That means these lines aren't needed, and are just causing extra DOM work. Remove them and it's fixed.

See how now the list of related videos doesn't flash, go away come back, or reload images? Look at the top right and you can see how, when I pick a video from a new series, *those* videos do change though. That's the correct behavior.

There ya go. If you have a situation where it looks like one component is sticking around after another has loaded, look for out transitions. They hold things up.

If you have aggressive DOM tree replacement, look for over using $: and await/promises, and remove them.

Finally, I find a lot of problems go away when you move things into components. It seems like Svelte is better at working the DOM when the DOM is composed of a few big components rather than one giant page. What I do is make the page so it looks right, then break it up.

• • •

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

This Thread may be Removed Anytime!

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

More from @lzsthw

Zed A. Shaw, Writer

@lzsthw

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…

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

Zed A. Shaw, Writer

@lzsthw

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

Zed A. Shaw, Writer

@lzsthw

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

Zed A. Shaw, Writer

@lzsthw

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.

Read 6 tweets

Zed A. Shaw, Writer

@lzsthw

30 May

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?

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.

Read 6 tweets

Zed A. Shaw, Writer

@lzsthw

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

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!