Nya resurser för webbdesigners och utvecklare (december 2022)

github-unwrapped

När semesterperioden närmar sig och året närmar sig sitt slut är det viktigt att titta på några av årets senaste verktyg och teknologier.

I det här inlägget kommer vi att ta en titt på några av de nya resurserna för våra andra webbutvecklare för att ligga steget före och börja det nya året på rätt sätt. Detta inkluderar en mängd nya JavaScript-, PHP-, HTML-, JS- och CSS-bibliotek, plus ett genombrott i WordPress.

Github Unwrapped

En behändig liten webbapp för att visa upp din GitHub-aktivitet för 2022. Ange bara ditt användarnamn så får du en personlig video som sammanfattar alla dina offentliga Github-aktiviteter för året.

Du kan ladda ner videon och dela den på sociala medier som Twitter och LinkedIn, eller behåll det för dig själv. Och om du vill lägga till lite känsla ger det tre olika teman att välja ifrån.

Unovis

Ännu en cool öppen källkodsprojekt från F5företaget bakom Nginx. Unovis ett ramverk för datavisualisering som fungerar med React, Angular, Svelte och vanilla JavaScript. Det har olika typer av diagram, kartor och nätverksgrafer som låter dig visualisera nästan alla typer av data.

Det låter dig importera enskilda komponenter för att hålla dina filstorlekar små. Och om du vill anpassa utseendet på dina diagram är det superenkelt att göra med stödet för CSS-variabler.

unovis

Fyren PHP

Google Lighthouse hjälper dig förbättra din webbplats genom att kontrollera saker som prestanda, tillgänglighet och SEO. Detta PHP-bibliotek gör det enkelt att använda Lighthouse och skapa rapporter i HTML-format.

Du kan anpassa hur du använder det och integrera det i ditt befintliga arbetsflöde. Ett praktiskt bibliotek, speciellt om du redan använder PHP i ditt projekt.

fyr-php

Splade

Ett bibliotek som gör det super lätt att bygga Single Page Applications (SPA) med hjälp av Laravel Blade-mallar och några extra interaktiva komponenter från Vue 3. I grund och botten kan du skriv din app med den enkla Blade-syntaxenoch lägg sedan till lite “magi” för att få det att kännas som ett SPA.

splade

ConsoleNinja

Att använda console.log är en snabbt sätt att felsöka din kod, men det kan snabbt bli rörigt om du har för många loggsatser. Det här är ett verktyg som hjälper dig att använda console.log på ett mer organiserat sätt.

Det låter dig se de loggade värdena bredvid din kod, vilket gör det lättare att förstå vad som händer i dina koder. Det är lätt att använda — starta bara din editor och din utvecklingsserver, så är du igång. Inget behov av någon speciell installation eller konfiguration.

konsol-ninja

Nextra

Nextra är ett ramverk som sitter ovanpå Next.js och hjälper dig att bygga webbplatser som handlar om innehåll. Den har alla bra saker från Next.js, plus några extra verktyg till gör det lättare att skapa innehåll med Markdown.

Det följer också med inbyggt stöd för syntaxmarkering, internationalisering, och sök. Och direkt från lådan kan du välja mellan två olika mallar: en för att skapa dokument och en för en blogg för att snabbt komma igång.

nästara

Vuefire

Ett verktyg som hjälper dig att hålla din Vue-app synkroniserad med en Firebase-databas. Den är designad för att vara enkel att använda och överensstämmer med Vues deklarativa synsätt. Det tar hand om saker som kapslade samlingar och dokumentreferenser åt dig, och det fungerar med andra Firebase-funktioner som autentisering.

Du kan välj vilka delar av verktyget som ska inkluderas i ditt projektså du behöver inte använda allt om du inte behöver det.

vuefire

OSCS

OSCS är en webbplats som hjälper dig att välja färger för ditt digitala gränssnitt, som en webbplats eller mobilapp. Den ger dig olika färgpaletter och visar hur du använder dem, tillsammans med exempel på hur de ser ut i en faktisk applikation.

Om du har problem hitta rätt färger för ditt projektOSCS är ett bra ställe att börja för att få lite inspiration.

oscs

Hyde

Ett verktyg som hjälper dig skapa statiska HTML-sidor, blogginlägg och dokumentationssidor med Laravel. Den levereras med ett front-end startkit baserat på TailwindCSS som fungerar direkt ur lådan och är lyhörd och anpassningsbar.

Du kan använd Markdown eller Blade för att skapa ditt innehåll, och Hyde kommer med mallar som hjälper dig att komma igång.

hyde

Dinero.js

Ett JavaScript-bibliotek som gör det enklare och säkrare att arbeta med pengar i din app. Det låter dig uttrycka monetära värden och göra saker som att ändra, konvertera, jämföra och formatera till olika valutor för visning. Dinero.js gör det lättare att manipulera pengar i din applikation.

dinerojs

Komponentgalleriet

A samling av användargränssnittskomponenter som du kan använda som referens när du bygger ditt eget komponentbaserade användargränssnitt. Den uppdateras regelbundet och har exempel på komponenter och designmönster från verkliga designsystem.

Du kan hitta komponenter som navigering, paginering, framstegsindikatorer, brödsmuloretc. Det är en fantastisk resurs för designers och utvecklare som letar efter inspiration.

komponent-galleri

användMemos

En öppen källkod, egenvärd webbapp för att hantera och dela kunskap och information. Dess free och lätt att installera på dina egna servrar med Docker. Den har ett enkelt textområde för att skriva anteckningar, med lite grundläggande Markdown-stöd.

Du kan välja att göra dina anteckningar privata eller offentliga, och ett API finns tillgängligt för att anpassa verktyget för att passa dina behov. Det är ett bra sätt att organisera och dela memon inom din organisation, ditt företag eller med allmänheten.

använd memo

CodeImage

Ett verktyg som hjälper dig att få dina kodskärmdumpar att se snygga ut. Du kan använda den för att dela kodavsnitt. Du kan anpassa dina utdrag genom att ändra syntaxtema, färger och fönstertema, och när du är nöjd med hur det ser ut kan du skapa bilden och dela den med andra på sociala medier.

Expo

A paket för React Native-appar som ger dig massor av användbara funktioner. Med den kan du bygga appar helt i JavaScript som fungerar på alla typer av enheter, utan att behöva använda verktyg som Xcode eller Android Studio. Expo har bra stöd för TypeScript. Alla dessa låter dig använda samma kodbas för att utveckla otroliga appar.

expo

Blogger

En samling av snabba och tillgängliga bloggmallar med en mängd olika anpassningsbara teman. Den är byggd med Astro och Markdoc. Den innehåller funktioner som ett inbyggt mörkt läge, stöd för anpassade markdown-komponenter och ett RSS-flöde för SEO.

Alla mallar är prestanda och har ett perfekt betyg på Lighthouse tillgänglighets- och prestandatestverktyg.

bloggare

UserAgents.me

En samling av vanliga användaragenter för olika operativsystem och webbläsare, inklusive Windows, Linux och macOS. Det ger en free API som låter dig komma åt data i ett bekvämt JSON-format, som du kan använda i din kod eller applikation.

Jag tycker att det är en riktigt praktisk källa för webbskrapor, forskare och webbplatsadministratörer som behöver korrekta, uppdaterade användaragentsträngar.

användaragenter

Vite Plugin SSR

A plugin för att bygga renderade appar på serversidan med Vite.js, ett snabbt JavaScript-byggverktyg. Det fungerar med alla UI-ramverk, som React, Vue, Svelte eller Solid, och du kan också använda det med andra verktyg.

Du kan välja mellan klientrouting och serverrouting, och den stöder alla typer av rendering, inklusive Single-page (SPA) och Multi-page Apps (MPA). Det är lätt att använda och kräver nästan ingen konfiguration.

vite-plugin-ssr

SVGGobbler

A webbläsartillägg som hjälper dig att arbeta med SVG-filer. Det fungerar med Chrome och Firefox och ger dig alternativ som att ladda ner, kopiera, visa koden och exportera ikonerna som bilder. Det är ett praktiskt verktyg för alla som fungerar med SVG-ikoner på webben.

svggobbler

WordPress lekplats

Ett nyligen experimentellt verktyg som låter dig köra WordPress i din webbläsare utan en PHP-server. Den använder WebAssembly för att göra detta möjligt.

Den har mycket potentiella användningsområden, som att köra kodavsnitt i dokumentationen, testa plugins och teman, växla mellan PHP- och WordPress-versioneroch fixa misslyckade CI-tester.

Det är inte helt stabilt än, men det har potential att revolutionera hur vi använder WordPress i framtiden.

wordpress-lekplats

Pocketbase

Ett backend-verktyg med öppen källkod som inkluderar SQLite, realtidsprenumerationer, inbyggd fil- och användarhantering, ett gränssnitt för instrumentpanelen och ett enkelt API. Den är utformad för att hantera ett stort antal samtidiga anslutningar som skulle kunna fungera även på en budget VPS.

Det är för närvarande i aktiv utveckling och har totalt sett potential att vara ett bra alternativ till betalda SaaS-alternativ.

fickbas