Floating UI: - Sjekk ut dette kule verktøyet!

Ny React Native-arkitektur, flytende UI, TypeScript-tips, ny Prettier, config-config og Visual Studio fyller 25.

- Sjekk ut det kule verktøyet Floating UI, som enkelt posisjonerer flytende elementer på nettsiden din.
- Sjekk ut det kule verktøyet Floating UI, som enkelt posisjonerer flytende elementer på nettsiden din. Vis mer

Dette var uken for logiske forsider 📝, tid for nytt design på slidere ⏳, og hvor noen klarte å illustrere mine følelser for strømme tjenester.

Og 30 287 ting skjedde i frontend-verdenen!

Ny React Native-arkitektur på vei

Nicola Corti har gitt oss en liten artikkel som omhandler den nye arkitekturen til React Native!

Vi har så vidt nevnt det før i en tidligere ForrigeUke, men den nye arkitekturen er den nye Fabric renderen, og et system med det ultra kule navnet TurboModule. Det er versjon 0.68 av React Native (fortsatt ikke på major-versjon, 7 år etter initiell release…) som vil inneholde disse store endringene i arkitekturen.

For å ta i bruk den nye arkitekturen gir de deg muligheten for å opt’e inn på dette, noe som er digg for å kunne teste den nye releasen. Samtidig har de som mål å ha god nok dokumentasjon og step-by-step fremgangsmetode for å guide deg gjennom prosessen uten behov for ekstra lesestoff.

Interessert i å lese mer? Sjekk ut artikkelen under på React Native sine sider da vel.

Flytende UI

Er du litt lei av å finne opp hjulet hver gang? Hvordan få til en tooltip som skal absolutt-posisjoneres hver andre fullmåne, eller en popover som skal vises på annenhvert besøk på nettsiden?

Sjekk ut det kule verktøy Floating UI som enkelt posisjonerer flytende elementer på nettsiden din!

Jeg er fan av alt som gjør hverdagen lettere, men vil jo anbefale å sjekke i kildekoden for å se hvordan det faktisk har blitt løst. 😏 En finfin inspirasjon!

Sjekk ut Floating UI her.

TypeScript-tips

Matt Pocock har laget en rekke fine tweets om tips og triks til TypeScript! For eksempel må jeg alltid bruke litt tid på når jeg bruker Object.entries, og TypeScript sier takk og farvel.

Her har han et fint tips for ha riktig type:

Et annet fint tips er hvordan lage dynamiske props for generelle komponenter:

Absolutt verdt å sjekke ut Twitter-kontoen hans om du er en TypeScript fan!

Ladle — enda et dokumentasjonsverktøy

For å teste og utvikle komponentene dine i React har det kommet enda et nytt verktøy for dette!

Ladle, som kan minne om Storybook som kanskje noen har vært borte i, har meldt sin ankomst og skryter av høy ytelse og skal visst være ganske rask.

Kan vært verdt å ha i tankene neste gang du skal lage et komponentbibliotek eller lignende og har lyst til å prøve noe nytt!

Prettier 2.6

Prettier har kommet med ny versjon og har tydeligvis gått mot alt de tror på ut fra hva de skriver i release notes.

Ved å legge til muligheten å legge til. singleAttributePerLine vil det bare komme ett attributt på hver linje i HTML og JSX.

Dette er mot Option Filosofien de har, hvor de er tydelige på at de ikke kommer til å legge på mer mulighetsrom for oss!

JSX conditions

Conditional rendering er et ganske vanlig konsept i React, og Vladimir Klepov har gitt oss en liten artikkel som viser litt eksempler.

For eksempel kan tallet 0 lekke ut i applikasjonen din om du ikke er nøye nok på påstanden din!

Under finner du en liten oversikt over truthy og falsy situasjoner i JSX, og noen tips og triks som er kjekke å ta med seg videre:

Config-filer i VS Code

Jeg blir fort plaget av visuell støy.

For det å lese nedover et fil-tre som er langt som et vondt år, hvor 90% (kanskje litt overdrevet) er config-filer krever mye hjernekapasitet for å filtrere ut de filene jeg faktisk trenger.

Noen luringer har det samme problemet om meg og har derfor laget en config for config-filene dine for VS Code! 😈 Den gjør filtreet ditt litt slankere, og kan være ganske kjekt hvis du vil rydde litt!

Karusell laget i Vue

Jeg kom over et kjekt verktøy som lar deg lage kule karuseller for Vue-prosjektet ditt. 🤩

Den støtter events fra både touch, tastatur og scrolling, og det ser ganske smooth ut! Den er tilgjengelig for Vue 3, skal være tilpasset universell utforming, og være responsiv for mobilflatene dine.

Du finner den her.

Twitter har fått TypeScript-SDK

Du har kanskje vært borte i Twitter API’et for å prøve å hente en strøm av tweets for å lage din egen Twitter-klone.

Nå har det blitt laget en SDK (som er i beta) for Twitter APIet som både er støttet for JavaScript OG TypeScript. Den har full typestøtte for request og respons.

Er du interessert i typesikker Twitter-klone kan du jo sjekke ut lenken!

JS Nation-konferanse i juni

Den 16. juni er det tid for JSNation i fysisk versjon i Amsterdam, eventuelt kan du bli med 20. juni for remote konferanse om en utenlandstur ikke frister akkurat nå. Ikke alle foredragsholderne er avgjort enda, men noen navn de har bestemt seg for allerede er Evan You fra Vue og Sarah Drasner fra Google, og en hel haug andre spennende folk! Legg det i kalenderen 🤩.

Litt ting og tang til slutt

Til slutt vil jeg bare vise dere litt småting jeg har kommet over som gjerne vil vise dere:

  • Bedre ytelse ved bruk av overflow i css:

Det var alt for denne gangen! Vi sees en annen uke 👩💻