Vi gjorde nyligen några justeringar av font-features på jobbet. Bland annat ändrade vi utseendet på 0 (siffran noll) till att inkludera ett snedstreck (som 0), för att göra det lättare att skilja från versalen O. Jag lärde mig några saker i processen som jag vill dela med mig av!

Snedstreckade nollor​

Det finns två huvudsakliga sätt att konfigurera snedstreckade nollor.

1. font-feature-settings: "zero" 1;
2. font-variant: slashed-zero;

De senaste månaderna har jag dykt ner i logiska egenskapers vackra värld. CSS-specifikationen har en mening som jag tycker beskriver vad logiska egenskaper är på ett bra sätt:

[Logiska] egenskaper är writing-mode-relativa motsvarigheter till sina fysiska motsvarigheter.

Fysiska egenskaper är enkla att resonera kring eftersom de representerar fysiska riktningar. Top, right, bottom och left är absoluta riktningar. Vänster är alltid vänster – så enkelt är det. Logiska egenskaper är däremot relativa – den fysiska riktningen de motsvarar varierar.

Som nämnts gör den absoluta naturen hos fysiska egenskaper att de är enkla att resonera kring. Men den absoluta naturen är också en begränsning.

Jag vill ta med dig på en resa där vi skapar en tabellkomponent som är generisk och statiskt typad. I stället för att bara visa ett slutresultat vill jag testa olika tillvägagångssätt som har olika fallgropar och hitta den lösning som verkar bäst.

Som utgångspunkt vill vi rendera en tabell med några landdata:

För några veckor sedan skrev jag ett blogginlägg om att göra en API-fråga till en hook för att förenkla användningen. Då hade jag inte använt TanStack Query (tidigare React Query) än. Det visade sig att mycket kommer gratis med TanStack Query. Låt mig visa.

|| och ?? är lika varandra, men det finns en väldigt viktig nyans. Titta på det här exemplet:

const a = "" || "default value"
// > "default value"

const b = "" ?? "default value"
// > ""

Låt mig förklara.

I mitt senaste inlägg IP-baserad plats testade jag ett API som hämtar en användares IP-adressplats.

I det här inlägget beskriver jag hur jag gör det till en hook, så att IP-adressplatsen kan användas enkelt var som helst i en applikation.

Du bor nära , eller hur?

Hur visste jag det? Jag använde Ipapi! Ett smidigt API för att hämta platsen för IP-adresser, med 30 000 gratis uppslagningar per månad.

För ett tag sedan skrev jag ett blogginlägg om hur man får tillgång till clipboarden med navigator-API:t. Jag bestämde mig för att göra det till en custom hook för att det skulle bli superlätt att använda. Innan vi går in i koden – klicka på knappen för att läsa din clipboard:

Jag har haft kul med slumpmässiga färger på sistone! För att snabba upp utvecklingen gjorde jag en hjälpfunktion som returnerar en slumpmässig färg. Den är riktigt enkel:

export const getRandomColor = () => {
	const red = Math.floor(Math.random() * 256)
	const green = Math.floor(Math.random() * 256)
	const blue = Math.floor(Math.random() * 256)

	const color = `rgb(${red}, ${green}, ${blue})`

	return color
}

<h1 class="h2"></h1>

Det är en kodrad (eller åtminstone en HTML-starttagg med en klass) som tydligen gör många arga eller förvirrade.