Nå kan du endelig skjønne hvordan du koder SVG: «Ser ut som en superkraft»

Nyhetene i TypeScript 5.6, hvordan lage en Chrome-utvidelse og verktøy for å skjønne SVG-koding i ukas ForrigeUke.

Hobbyprosjektet svg.wtf lar deg tegne SVG-er og se hvordan koden for dem ser ut. 📸: Ole Petter Baugerød Stokke
Hobbyprosjektet svg.wtf lar deg tegne SVG-er og se hvordan koden for dem ser ut. 📸: Ole Petter Baugerød Stokke Vis mer

Dette var uken for runde av 💅 og å plukke opp ballen etter ferien 🐠Og 4 612 ting skjedde i frontend-verdenen!

Snikktitt på TypeScript 5.6 👀

Forrige uke kom beta-versjonen av TypeScript 5.6, og med den også en titt på hvilke ting som kan forventes av neste versjon.

Og denne versjonen var ikke mindre en fullpakka av godsaker, både for den avansert og ganske enkel bruk av språket.

#1: Forbedrede nullish og truthy-sjekker
Dette gir typescript muligheten til å si ifra hvis du har conditional statements som alltid vil resultere i true eller false fordi verdien du putter inn er konstant.

I essens vil det fange opp typiske utviklerfeil og typos som fortsatt er gyldig TypeScript

if (x => 0) {
    // Oops! This block always runs.
}

Eller ved bruk av nullish-operatoren som her:

#2: Flere hjelpemetoder for iterators
Det finnes flere innebygde klasser i TypeScript som lener seg på Iterable og Iterator — klassen, for eksempel Map og Set.

Her har man ønsket å adoptere noen av metodene som finnes på Array for å gjøre disse enklere å bruke. Metodene keys, values, og entries kan nå brukes sammen med reduce , map og filter ✨.

#3: Hjelp til imports!
Det er også kommet bedre støtte for å sjekke om du har fått filnavnene riktige når du bruke side-effect imports, som typisk er i bruk i de fleste web-prosjekter!

import "oops-this-module-does-not-exist";
// error: Cannot find module 'oops-this-module-does-not-exist' or its corresponding type declarations.
import "./button-component.css";

export function Button() {
    // ...
}

Og hvis du vil få med deg alt sammen kan du ta en titt her!

Hvordan skrive en Chrome-extension? 🎓

Har du hatt lyst å prøve å skrive din helt egne extension til Chrome, men litt usikker på hvordan man kommer i gang?

I denne guiden går de gjennom hvordan du kommer i gang med utviklingen, og går gjennom hvordan de lager flere nyttige features som login, lagring av bilder, bruk av context-menyen og til slutt feilrapportering og publisering til Chrome Web Store ⛑.

Hvordan fungerer egentlig SVGer?

Å kode SVG-er for hånd har alltid sett ut som en superkraft, og noe jeg alltid har endt opp med å designe og eksportere fra ymse apper 🎨.

Forrige uke lanserte Amelia Wattenberg et sideprosjekt som skal hjelpe med å forstå hvordan oppbyggingen av SVG-er.

På appen kan man tegne enkelt egne SVGer og prøve seg frem med å justere verdiene, og se hvordan det påvirker koden til SVG’ene. Ganske stilig.

Du kan prøve selv her 👉 svg.wtf 👈