Verse hulpbronnen voor webontwerpers en ontwikkelaars (april 2018)

Deze maand zagen we een paar aankondigingen van opmerkelijke namen in tech. Apple heeft bijvoorbeeld een nieuw databasesysteem geopend, Google heeft een nieuwe tool vrijgegeven om uw websitesnelheid op mobiele apparaten te meten en Github heeft een gratis cursus om u op gang te helpen met Git, Github en algemene codering.

Ook in de post van vandaag zal ik dat ook doen beschikken over een aantal nieuwe tools die momenteel in de lift zitten. Laten we verder gaan met wat we meer op de lijst hebben staan.

VuePress

Een nieuwe tool van de maker van Vue, VuePress is een statische site generator ontworpen met Vue.js in gedachten. Het genereert en voorspelt statische HTML voor elke pagina, en draait als een SPA (Single-page Application). Het wordt standaard meegeleverd met de mogelijkheid om Google Analytics ID, zoeken, volgende en vorige navigatie, zijbalk en PWA.

IMG-2

Een JavaScript-bibliotheek die een a introduceert aangepast element, img-2. Het nieuwe element voegt een aantal optimalisaties toe die niet bij de standaard horen img element, verbeteren hoe de afbeelding wordt geladen voor de gebruikers. Met het aangepaste element wordt de afbeelding vooraf in de cache opgeslagen, ook lui laden de afbeeldingen en de service worden alleen in de cache weergegeven als de afbeeldingen in de viewport van de gebruiker worden ingevoerd. Bekijk de demo.

Tabler

Een elegant dashboard / beheerdersdashboard gebaseerd op Bootstrap 4. Het dashboard bevat vooraf gemaakte componenten zoals grafieken, formulieren, galerijen, een prijslijst en een mooie verzameling aangepaste pictogrammen. Een goed startpunt om ontwikkelaars snel een beheerdersdashboard te laten bouwen. Bekijk de demo!

DayJS

DayJS JavaScript-bibliotheek om datums en tijden te formatteren. Bovendien biedt DayJS soortgelijke API's als Moment.js, maar het weegt slechts 2KB. Gegeven dat, zou het een kunnen zijn geweldig alternatief voor Moment.js, als u een lichtere bibliotheek wilt maar toch vertrouwd blijft met wat u al weet.

UnifiedArchive

Een PHP-bibliotheek om gecomprimeerde bestanden af ​​te handelen, UnifiedArchive ondersteunt een breed scala aan formaten, waaronder RAR, Zip, Gzip, Tar, en veel andere compressietypes. Met deze bibliotheek kunt u bestanden of mappen archiveren en extraheren. Het biedt een een handvol API's om bestanden te manipuleren nadat het uit het archief is gehaald. UnifiedArchive is beschikbaar als Composer-pakket.

Github Learning Lab

Github heeft zojuist een aangekondigd gratis cursus die voornamelijk Git in Github beslaat. Er zijn op dit moment 5 cursussen waar je een paar handige dingen kunt leren, zoals hoe Github te gebruiken om je codes te hosten, hoe Github-pagina's te gebruiken om een ​​gratis site of blog voor uw project te krijgen en hoe u Merge-conflicten kunt beheren die veel voorkomen wanneer u met veel ontwikkelaars aan een project werkt.

WordPress UnitTest DOM Parser

Een leuke tip van Takayuki Miyauchi op testen DOMElement bij het uitvoeren van UnitTest in WordPress-toepassingen. Ik persoonlijk vond dit echt handig; hoop dat je het hetzelfde vindt.

Popmotion

Een JavaScript-bibliotheek voor soepele animatie op internet, “Popmotion” biedt een API genaamd Physics waarmee u kunt maken met bijna real-life animatie-effecten. Het is ongepinkte; de bibliotheek gewoon geeft waarden uit op basis van de specifieke set van de configuratie. Hiermee kun je die outputs toepassen om elk medium te animeren, inclusief CSS, SVG, Three.js en zelfs React.js.

Driver.js

Een JavaScript-bibliotheek waarmee u kunt “rijden” gebruikersfocus op een pagina. Dit is met name handig als u specifieke functies wilt introduceren of ze wilt begeleiden naar specifieke taken op de pagina. Driver.js is gewoon 4 kB groot, aanpasbaar en toetsenbordvriendelijk.

Vervang geanimeerde GIF met video

GIF is overal, na het maken van een geweldige come back. Maar het probleem met GIF is dat het meestal erg groot is. Het is een verspilling van bandbreedte, maar de grafische kwaliteit is vaak verschrikkelijk. Deze richtlijn van Google laat zien hoe “Video” kan GIF vervangen om geanimeerde afbeeldingen weer te geven.

Tekstmasker

Een JavaScript-bibliotheek voor transformeer de tekst die speciale opmaak vereist zoals een telefoonnummer, valuta of een creditcardnummer. Terwijl de gebruiker typt, wordt de tekst automatisch omgezet in de juiste indeling om de gebruikerservaring te verbeteren. TextMask kan worden gebruikt met React, Vue of gewoon ouderwets JavaScript.

Snelheid mobiele sites vergelijken

Dit is een andere handige tool van Google. Met deze tool kunt u controleer de snelheid van uw website bij het laden vanaf mobiel en schat het totale omzetverlies wanneer de website traag laadt. Jij kan selecteer het land en de snelheid Waarvan uw website zal worden getest.

VueNut

Als ontwikkelaar bij het bouwen van een webtoepassing met Vue.js en Vuex, maakt VueNut het gemakkelijker om de opgeslagen gegevensstaat te verkennen en stelt u in staat om de gegevens tijdens de ontwikkeling gemakkelijk te manipuleren. Coole dingen!

FoundationDB

Onlangs heeft Apple FoundationDB open source gemaakt in Github. Het is een sleutel-waarde paar database systeem dat belooft schaalbaarheid en prestaties. Het is gaaf om grote technologiebedrijven te hebben die een deel van hun producten gaan besteden aan open source.

Sprookjesboek

StoryBooks is een hulpmiddel om bouw een React-component afzonderlijk. Het biedt een gebruikersinterface in de browser waarmee u de verschillende toestanden van elke component kunt bekijken test de componenten.

GhostText

Een browserextensie die dat wel zal doen synchroniseer wat u in de browser schrijft naar uw teksteditor of vice versa. Ik vond dit uiteindelijk handig als je graag op een website wilt schrijven met het gemak en de functies van je code-editor. GhostText is beschikbaar voor Chrome, Firefox en Opera.

coala

Coala is een CLI biedt een interface voor linting en fixeercode ongeacht de gebruikte taal. U kunt Coala gebruiken in een codebewerker, het integreren met een CI (Continuous Integration) en het aanpassen met een configuratiesyntaxis in .coafile. Coala ondersteunt vele talen zoals CSS, JavaScript, PHP en u kunt meer vinden in deze map.

ReactStrap

ReactStrap is een verzameling Bootstrap 4-componenten die zijn getransformeerd in herbruikbare React-componenten. Als u uw oude Bootstrap-website wilt moderniseren, is deze bibliotheek iets waar u misschien naar wilt kijken.

Reacto

Een ander React-gerelateerd hulpmiddel, Reacto is een IDE gebouwd op de top van Electron en ontworpen voor het ontwikkelen van webapplicaties met ReactJS. Dit lijkt erg handig als je ontwikkeling primair draait om ReactJS.

PicoJS

Een JavaScript-bibliotheek die maakt gezichtsdetectie mogelijk. Het werkt met een foto of met de geïntegreerde camera. Het is echt fascinerend hoe de webtechnologie de laatste jaren evolueert.