Dette var uken vi begynte det nye året med å bruke timesvis på å lage en paginator i Framer, hvor vi ble satt på plass av Clippy, og CSS ble brukt til å lage skyskraperkunst. Og 1000 ting skjedde i frontend-verdenen!
Enklere FAQs med <details>
I forrige uke postet Kyle Shook et tips som kommer godt med om man skal lage en oversikt over ofte stilte spørsmål.
Using the <details> and <summary> elements made it incredibly easy to convert these FAQ questions into accordions.
— Kyle Shook⚡ (@elyktrix) January 5, 2023
Much easier to scan the questions this way IMO. Add some hover/focus state styling and call it a day. 🙌
(before/after) pic.twitter.com/9D6DauJ78O
Ved å bruke <details> og <summary> kan man enkelt liste spørsmål som kan utvides for å vise tilhørende svar.
Denne HTML-nyheten skal gjøre det enklere å finne innholdet ditt
Trigonometriske funksjoner i CSS 🎉
Trigonometriske funksjoner i CSS begynner sakte, men sikkert, å støttes av de mest populære nettleserne. Safari har støttet trigonometriske funksjoner i CSS en liten stund, og i forrige uke introduserte også Firefox sin støtte for dette.
Som Jhey Tompkins tipset om på Twitter kommer slike funksjoner godt med i animasjoner, og han har vedlagt et eksempel hvor bildeposisjonene bestemmes gjennom en sinusfunksjon.
CSS Tip! ✨
— jhey 🔨🐻✨ (@jh3yy) January 6, 2023
Trigonometric functions (sin, cos, etc.) are landing in CSS 🙌
Use them in animations & layouts 😯
How about these images laid out along a sine wave using scoped custom properties?
img {
translate: 0 calc(sin(var(--index) * 50%)); 👈
}@CodePen link below! 👇 https://t.co/FkV0TpBNxT pic.twitter.com/IM3hrBqdPh
Mer informasjon om hvordan man kan bruke trigonometriske funksjoner i CSS har Stephanie Stimac skrevet om i sitt blogginnlegg.
Civet — CoffeScript for TypeScript
Har du noen gang ønsket at syntaksen for TypeScript skulle vært mer lik som Python? 🐍
Frykt ikke! Forrige uke ble Civet lansert, et verktøy som gjør nettopp dette mulig.
Civet (@civetlang) is a new alternative syntax for TypeScript
— Steve (Builder.io) (@Steve8708) January 7, 2023
Init flame war about syntax preferences: pic.twitter.com/gktSPymcG9
Om man faktisk trenger et slikt verktøy er jo en annen sak, og kommentarfeltet i denne tråden er rimelig samstemte om at det kanskje er best å la være å ta dette verktøyet i bruk.
3 superenkle og morsomme UU-tester
Lettleselige tabeller med tall
Man vil aldri bli ferdig utlært i CSS, og i forrige uke kom Lee Robinson ut med et ganske så snasent tips som kanskje kan tette nok et kunnskapshull hos mange.
🔥 Design tip: small changes can make a huge impact.
— Lee Robinson (@leeerob) January 8, 2023
Ensure tables with numbers are easy to scan vertically. For example, using the CSS `font-variant-numeric` property to make numbers the same size. pic.twitter.com/5XZ4BaWT2x
Ved å bruke font-variant-numeric: tabular-nums; kan tabeller som inneholder tall bli litt mer lettleselige ved å gi tallene like størrelser.
Kombinerer man dette med å sentrere tekst i bokser med fastsatt bredde oppnår man et resultat som muligens kan være enklere å lese? Verdt å sjekke ut!
Det var alt for denne uken! Vi sees 🧑💻