15 Handige JavaScript-bibliotheken om uw site te verbeteren

Een geweldige site maken vereist veel vaardigheden, maar je hoeft niet altijd alles helemaal opnieuw te ontwikkelen. Als u een van de JavaScript-bibliotheken in dit artikel wilt gebruiken, moet u op zijn minst een aantal JavaScript-vaardigheden hebben, maar u hoeft ook niet per se een expert te zijn.

Waar u wel deskundig mee moet zijn, is hoe u de bibliotheken op een site kunt laten blenden om er het meeste profijt van te hebben. Dit is niet echt iets dat kan worden onderwezen. Het is een vaardigheid die je alleen kunt leren door te doen. Zodra je de concepten onder de knie hebt, is er echter geen limiet aan je creativiteit en wat je ermee kunt bereiken.

Hier is onze lijst met de meest bruikbare JavaScript-bibliotheken die beschikbaar zijn voor programmeurs voor siteverbetering. Je ziet je favoriet hier misschien niet vermeld, maar dat betekent niet dat het niet wordt aanbevolen. In feite kan elke JavaScript-bibliotheek die u helpt iets nuttigs te bereiken, niet worden afgewezen. Maar met letterlijk miljoenen bibliotheken om uit te kiezen, moeten we ergens de grens trekken.

1. jQuery

Het is het beste om te beginnen met de voor de hand liggende. Je gebruikt deze bibliotheek vrijwel zeker al op een of andere manier, zelfs als je het nog niet weet. In essentie kunt u met jQuery dynamische dingen gemakkelijker doen op statische webpagina's dan met andere methoden en hoeft u niet aan de server te programmeren om de resultaten te bereiken. Dit betekent ook dat updates sneller kunnen worden uitgevoerd dan met server-side alternatieven. Veel andere bibliotheken bevatten jQuery als afhankelijkheid, dus u zult het waarschijnlijk moeten opnemen in uw pagina's, zelfs als u niet direct toegang hebt tot de functies ervan.

2. Prototype

Dit zou op een bepaalde manier kunnen worden beschouwd als een concurrent van jQuery. Het is niet per se inferieur, maar het wordt veel minder breed geadopteerd. Het samen gebruiken van prototype en jQuery kan tot conflicten leiden, tenzij u speciale stappen neemt om dit probleem op te lossen. Dit is waarom u de afhankelijkheden in de andere JavaScript-bibliotheken die u gebruikt moet kennen.

3. modernizr

Deze bibliotheek helpt bij het oplossen van problemen met het renderen van pagina's in oudere browsers die HTML5 niet volledig ondersteunen. Hoewel dergelijke browsers steeds minder vaak worden aangetroffen, maken ze nog steeds deel uit van het landschap en kan Modernizr u helpen om op een efficiënte manier met het probleem om te gaan.

4. Bootstrap

In slechts zes korte jaren heeft Bootstrap een enorme groei doorgemaakt in de wereld van webontwikkeling. Het houdt zich alleen bezig met UI-lay-out en component-integratie, maar doet dit heel goed. U moet de standaardinstellingen echter voor vrijwel alles wijzigen, omdat ze zijn gebaseerd op het kleurenschema van Twitter, wat niet de meest gebruiksvriendelijke gebruikersinterface is.

5. PDF.js

U weet mogelijk dat het PDF-formaat onderhevig is aan bepaalde kwetsbaarheden. Om dit probleem te voorkomen, is PDF.js gemaakt om PDF-inhoud weer te geven in het HTML5 Canvas. Dit betekent natuurlijk ook dat het alleen werkt in een browser die HTML5 en Canvas ondersteunt.

6. JS-hitlijsten

Een uitstekende bibliotheek die een eenvoudige maar krachtige grafiegenerator biedt, zodat u allerlei professionele grafieken voor uw site kunt maken zonder te veel tijd en moeite te investeren. De gratis versie is even krachtig in vergelijking met de betaalde versie, maar bevat een watermerk. Door een licentie te kopen, wordt dit watermerk verwijderd.

7. Chart.js

Dit is echt een goed, volledig gratis, niet-gedocumenteerd alternatief voor JS-hitlijsten. Het is gemakkelijk te gebruiken, goed gedocumenteerd en kan op eindeloze manieren worden aangepast. Het gebruik ervan vereist een beetje meer JavaScript-vaardigheid dan JS-diagrammen.

8. D3.js

Dit is een grotere broer van de vorige twee voorbeelden, die bedoeld zijn voor lichtgewicht gebruik. Als u echter gegevens uit de grote competities aan het uitwisselen bent, biedt D3 u de geavanceerde functies die uw online presentatie naar een hoger niveau kunnen tillen. Elke soort gegevens kan op een verbluffend aantal manieren worden gevisualiseerd en uitgedrukt. Bekijk de voorbeelden op de D3-website om te zien wat u misloopt.

9. bHive

Een geweldig grafisch framework dat net zo revolutionair is voor het HTML5 Canvas als Raphaël voor HTML4. Met bHive kunt u snel SVG-afbeeldingen, animaties maken en zelfs interactiviteit opnemen die op verschillende manieren kan worden gebruikt, zoals eenvoudige games en educatieve toepassingen.

10. Owl Carousel

Hoewel overmatig gebruik van carrousels niet moet worden aangemoedigd, voor die keren dat je er echt een nodig hebt, is Owl een van de meest aanbevolen carrousel-plug-ins ooit gemaakt voor jQuery. Het is compatibel met zowel aanraakschermen als aanwijsapparaten. Het ondersteunt swipe en drag-n-drop. Het is volledig aanpasbaar en reageert standaard.

11. Date.js

Soms moet je datuminformatie op verschillende manieren kunnen uiten om een ​​sitecontext te geven. Met de functies van Date.js kunt u precies hetzelfde doen, met behulp van een zeer eenvoudige syntaxis die niet eenvoudiger te leren is.

13. Moment.js

Een andere bibliotheek voor het opmaken en verwerken van de datum. Het is een beetje ingewikkelder dan Date.js maar je kunt bepaalde specifieke berekeningen eenvoudig doen (isAfter, IsBefore, IsSameOrAfter, isSameOrBefore, isTherween, isLeapYear, isDate, enzovoort). Als u niet alle overheadkosten nodig hebt die met deze extra functies worden geleverd, gebruikt u Date.js in plaats daarvan.

13. dateDropper

Wanneer u een kalender / datepicker-besturingselement op uw site moet weergeven, is dateDropper de elegantste en eenvoudigste oplossing die we ooit hebben gezien (en we hebben veel gezien). Het is ook meer compatibel met mobiele interfaces dan veel van de andere oplossingen die er zijn.

13. Numeral.js

Doet voor getallen wat Date.js doet voor datums.

14. wForms

Een eenvoudige maar nuttige bibliotheek onderhouden door in het Google Code-archief, wForms maakt gemakkelijk werk van algemene taken met betrekking tot gebruikersinvoerformulieren. Deze omvatten invoervalidatie, tooltips en andere handige functies.

15. sortTable

Sorteerbare tabellen bestaan ​​al bijna net zo lang als tabellen hebben (datatabellen, hoe dan ook). Maar met deze hand-JavaScript-bibliotheek kunt u elke tabel eenvoudig sorteren door een klasse aan de tabel toe te voegen wanneer u deze maakt, wat net zo eenvoudig is als: <table class = "sortable">

header afbeelding met dank aan Rogie

Bogdan Rancea

Bogdan is een van de oprichters van Inspired Mag en heeft in die periode bijna 6 jarenlange ervaring opgebouwd. In zijn vrije tijd studeert hij graag klassieke muziek en onderzoekt hij beeldende kunst. Hij is ook behoorlijk geobsedeerd door fixies. Hij is al eigenaar van 5.