Nyttige JavaScript-værktøjer til webudviklere

Mange udviklere forsøger at undgå at få deres hænder beskidte med JavaScript så meget som de kan undgå det. Der er en opfattelse af, at JavaScript er uryddig og tilskynder til dårlige kodningsvaner, fordi det ikke håndhæver reglerne lige så strengt som de fleste andre kodesprog.

Alligevel er dette også en styrke. Det gør det hurtigt og nemt at udvikle ting i JavaScript, forudsat at du ved, hvad du laver. At udvikle kode i JavaScript er ofte en mere effektiv proces, simpelthen fordi du ikke behøver at bruge så meget tid på fejlsøgning, og du kan se resultaterne af eventuelle ændringer, du foretager med det samme.

Hvis der er en ulempe, er det, at nogle kodere faktisk er dovne og ikke tester deres kode tilstrækkeligt, før de frigives, hvilket er grunden til, at vi ser så mange websider, der forbruger hukommelse og CPU-cyklusser til overskydende.

Heldigvis er en af ​​de allerbedste ting ved JavaScript, at der er så mange allerede eksisterende værktøjer, som du kan bruge. Du behøver ikke at opfinde hjulet på ethvert projekt igen. Nogle af disse kan endda skåne dig for prøvelsen ved at foretage nogen kodning overhovedet.

I denne artikel skal vi se på nogle af de mest nyttige JavaScript-værktøjer og biblioteker, der er tilgængelige for dig at bruge, når du arbejder på dine egne projekter. I de fleste tilfælde er disse værktøjer gratis eller lave omkostninger, og vi valgte kun dem, der ikke kræver en stor indsats for at lære.

1. Tota11y

En af de vigtigste opgaver for enhver webudvikler er at sikre, at deres sider har god tilgængelighed. Det kan være vanskeligt at opnå perfektion, men vi skal i det mindste forsøge at få tilgængelighedsfaktoren til at være så god, som vi kan.

Tota11y JavaScript-værktøj fra Khan Academy gør et meget imponerende stykke arbejde med at analysere dine websider for tilgængelighed, mens du er i udviklingsfasen, så du kan give realtidsanalyse af tilgængelighedsfaktorer til dit udviklingshold.

2. BrowserSync

Kom i gang med BrowserSync er overhovedet ikke ligetil, men når du først har lært dig, hvordan du bruger det, vil du opdage, at det er uundværligt i testlaboratoriet. Test dit websted på flere browsere og enheder på samme tid.

En anden interessant funktion ved dette værktøj er, at det giver dig mulighed for at gashåndtere din forbindelse, så du kan simulere at indlæse siden på en langsommere forbindelse end det, du faktisk har.

Der er andre værktøjer til test på flere browsere, men dette er det eneste, vi har fundet, som også spejler alle dine interaktioner med siden med det samme på tværs af alle dine tilsluttede browsere og enheder.

3. Chart.js

Der er så mange måder, diagrammer kan være nyttige, og en af ​​de mest elegante gratis løsninger, der også er let at konfigurere, skal være den meget navngivne Chart.js værktøj.

Ved hjælp af kun et meget simpelt script kan du oprette en forbløffende række diagrammer, og du kan endda kombinere dem med en database for at indlæse data dynamisk og generere friske diagrammer, hver gang dataene ændres. Du kan blande forskellige diagramtyper sammen, hvor det er fornuftigt at gøre det (for eksempel en kombineret linje og søjlediagram).

Det fungerer ved hjælp af HTML5-lærredet, og du kan oprette flere lærreder på siden for at være vært for flere diagrammer. Bare sørg for at give hvert lærred og kort et unikt navn, så du ikke sender data til det forkerte mål.

En anden sej funktion ved Chart.js er, at diagrammerne, det genererer, er fuldt lydhøre, så de får et ensartet look på tværs af en række forskellige skærmstørrelser.

4. SamsaraJS

Det usædvanlige navnevalg for dette værktøj (“samsara” i buddhistisk tradition henviser til den evige lidelsescyklus, som man formodes at bryde fri fra) kan være en indikation af, hvor meget arbejde du skal lægge for at mestre det, men det er i stand til at få din webside til at gøre fantastiske ting.

Konceptet her er "layout animation", og det er ekstremt alsidigt. SamsaraJS giver dig fuld kontrol over layoutet, så du kan "flytte" det og ændre det, enten i henhold til en forudbestemt rækkefølge eller som reaktion på brugerinteraktion.

5. Kartograf

Hvis din webside vil drage fordel af at vise geografiske data i grafisk form, så Kartograf er det perfekte JavaScript-værktøj, du har brug for til dette formål.

Alle data kan modelleres med nøjagtighed på nålen og knyttes til specifikke placeringer på et kort med alt, der genereres i realtid SVG-grafik. Det betyder, at selv animation er mulig.

Det bedste ved dette er, hvor professionelt slutresultatet ser ud. Det er bestemt et interessant alternativ til at bruge mere populære kortlægningsløsninger som GoogleMaps, og kommer ikke med uønskede ekstramateriale.

En ting til, der får Kartograf til at skille sig ud er, at den har scripts til Python og JavaScript.

6. Raphaël

Dette er en SVG-motor, der forenkler opgaven med at tegne SVG-grafik i realtid (dette adskiller sig fra forud opfyldt SVG-grafik). Der er adskillige fordele ved at tegne din vektorgrafik, da de er nødvendige i stedet for at bruge prækompileret grafik.

Dette er teknologien på højt niveau webapplikationsprojekter som Kartograph (se ovenfor) og MCDU-emulator blev bygget med.

Mens Raphael bibliotek er ikke i aktiv udvikling på dette tidspunkt, det har allerede næsten alt hvad du har brug for for at skabe næsten alt hvad du vil, og der er ingen tvivl om, at det gør SVG-kodning meget lettere end at bruge almindelig SVG-syntaks.

7. Knockout.js

Det er ikke let at være en UI-ramme i disse dage med så meget konkurrence omkring, men Knockout.js har noget lidt ekstra specielt. Læringskurven er fladet ud med interaktive tutorials. Derudover er det en kraftfuld og fleksibel ramme, der er komprimeret til under 60 KB i størrelse.

På trods af at det er lille, giver det dig en masse kontrol over dine DOM-elementer og giver dig mulighed for hurtigt og nemt at opbygge fuldt interaktive responsive websteder.

JavaScript er ikke dårligt

Meget af det foragt, der er rettet mod JavaScript, er en arv fra dens tidligste dage, hvor det bestemt ikke var perfekt, og desværre besluttede forkert at gifte sig med sit navn for evigt med Java.

Kom godt i gang med JavaScript, og du vil opdage, at det er et robust objektorienteret sprog, der er ideelt til at udvikle online og offline applikationer meget let. Dette er ikke noget, der kan siges om de fleste sprog derude.

Selv Java kræver langt større indsats, selvom det giver dig en masse foruddefinerede cross-platform værktøjer til at arbejde med.

Ovennævnte værktøjer er kun syv meget nyttige værktøjer ud af en palet på millioner, du kan vælge imellem. Det er bestemt et sprog, der er nyttigt at kende, og det kan godt være det bedste sprog at mestre, da det giver flest muligheder.

header image med tilladelse fra

Bogdan Rancea

Bogdan er et grundlæggende medlem af Inspired Mag og har akkumuleret næsten 6 års erfaring i denne periode. På fritiden kan han lide at studere klassisk musik og udforske billedkunst. Han er også ganske besat af fixies. Han ejer allerede 5.