Tan Li Hau πŸ€” Profile picture
πŸ‘¨πŸ»β€πŸ’» πŸ‡²πŸ‡Ύ πŸ₯° Sharing tips on Svelte, React, CSS πŸ“ Occasionally writes about one layer of abstraction below at https://t.co/dMg56WXWzG πŸ’» @sveltejs maintainer
Jul 6, 2021 β€’ 8 tweets β€’ 5 min read
If you have a promise waiting for your data, {#await} block makes it easy to express your content in the loading πŸ•‘, resolved βœ… and rejected ❌ state

So, let's talk about the {#await} block in @sveltejs

πŸ‘‡πŸ§΅[THREAD] Here's the general structure for the {#await} block

πŸ•‘ {#await}
βœ… {:then}
❌ {:catch}
πŸ‘‹ {/await}

[1/4] <script>   let promise; </s...
Jul 5, 2021 β€’ 14 tweets β€’ 8 min read
We've seen how we can use {#each} to repeat content in @sveltejs ,

let's talk about the keyed each block, and what does it mean to have a key for each block



πŸ‘‡πŸ§΅[THREAD] πŸ“ΉIf you prefer learning through video, the following thread is a summary from my @YouTube video

Jul 1, 2021 β€’ 8 tweets β€’ 5 min read
HTML doesn't have a way of expressing logic, like conditionals and loops. @sveltejs does.

Let's take a look at the 1st logic block in @sveltejs, πŸ‘‰ {#if} πŸ‘ˆ

πŸ‘‡πŸ§΅ [THREAD] If you prefer watching video, the following thread is a summary from my @YouTube video
Jun 29, 2021 β€’ 11 tweets β€’ 4 min read
How do you pass dynamic data when you forward slots in @sveltejs? Let's recap, here is how you forward slots
Apr 5, 2021 β€’ 9 tweets β€’ 3 min read
How much do you know about the 7 event modifiers in @sveltejs?

Let's take a look what you need to write if you don't have them πŸ‘‡ Image 1️⃣ preventDefault

this is equivalent of calling event.preventDefault() on the start of the event handler Image
Aug 15, 2020 β€’ 20 tweets β€’ 6 min read
Another week on #CSSpodcast, this weeks topic is CSS Functions 😍

🧡 CSS Functions provides runtime contextual expressions that return dynamic real-time value per the state of the browser per user in that moment
Jul 12, 2020 β€’ 24 tweets β€’ 10 min read
In the latest episode #CSSpodcast, @Una and @argyleink shared a ton of pseudo-classes

(I managed to note down 3️⃣9️⃣ of them 😱)

🧡 Here is a thread of what were shared in the podcast πŸ‘‡πŸ‘‡πŸ‘‡ Pseudo-classes are selectors, lets you apply style to element based on info outside of the doc tree:

🌎 meta information, eg: language, history of navigator
β˜‘οΈ state of the element, eg: checked, active, disabled

✨Pseudo-classes are great for implementing micro-interactivity
Jul 7, 2020 β€’ 15 tweets β€’ 14 min read
Been using @reactjs for years, here is how @sveltejs code is different from @reactjs

1️⃣ Stateless Component ImageImage 2️⃣ Fragment

😍 You don't need a Fragment to group multiple elements in @sveltejs ImageImage
Jul 1, 2020 β€’ 10 tweets β€’ 6 min read
Learned a ton of pseudo elements, that i didnt know existed, in this week's #CSSpodcast by @Una and @argyleink

thecsspodcast.libsyn.com/014-pseudo-ele…

Learn about 9️⃣ things I learned in the thread πŸ‘‡πŸ‘‡ 1️⃣

pseudo elements has 2 colons in front ::
πŸ†š
pseudo class which have 1 colon in front :