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
π‘{#if} is our 1st logic logic block in @sveltejs
π‘it allow us to conditional render content
π‘if comes with else, else if, just like you would expect in JavaScript
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
- global space, no need import
- can be nested, calc(var(--var))
- typed, eg: `rotate(45px)` will not work
- keep the function live, recompute on value changes and updates
- many of them are pure functions, however, counter-example: `counter()`
π You don't need a Fragment to group multiple elements in @sveltejs
3οΈβ£ Inline styles
πββοΈ You can extend and manipulate the style object in @reactjs
π ββοΈ It's a bane to copy the styles from the DOM into the code after tweaking it in the browser devtools
π So much easier when you can just copy the inline styles from browser into your code.
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 :
2οΈβ£
::before and ::after targets the pseudo-element that is the 1st child and last child of the element respectively
π to create the pseudo-element, use `content` property
π content will be read by screen reader
π cannot be used by replaced elements, eg: <img>, <video>