Verse hulpbronnen voor webontwerpers en ontwikkelaars (maart 2017)

Met CLI (Command Line Interface) kunnen we dat stroomlijn en automatiseer webontwikkelingsworkflows. Daarom hebben we in dit deel een aantal geweldige CLI's opgenomen die u op uw lokale computer kunt installeren of dingen op de server kunt uitvoeren. Daarbovenop hebben we er ook een paar toegevoegd PHP-hulpmiddelen, browser-add-ons en JavaScript-bibliotheken. Laten we ze eens bekijken.

Klik voor meer bronnen

Ontdek onze volledige verzameling aanbevolen bronnen en de beste beschikbare hulpmiddelen voor webontwerp en -ontwikkeling.

Guetzli

Een nieuwe encoder van Google dat laat toe om afbeeldingen tot 35% te comprimeren vanaf de initiële grootte met behoud van de kwaliteit. Het is een flinke doorbraak omdat soortgelijke open source-encoders, zoals JPEGOptim en jpegtran worden maximaal beperkt tot 20%. Ik zie dat er een aantal apps en plug-ins voor het CMS-platform zullen zijn die Guetzli integreren om JPEG-bestanden te optimaliseren.

Roadmap voor ontwikkelaars

Zoals de naam al aangeeft, is Roadmap voor ontwikkelaars een infographic van de reis van het zijn van een webontwikkelaar. Er zijn drie cursussen Front-end, Back-end en DevOps. Deze routekaarten zijn als, nou ja, een kaart; en zijn een goede referentie om te zien waar we nu zijn, wat we gemist kunnen hebben en waar we naartoe gaan.

Netlify CMS

SmashingMagazine heeft recent een gedurfde stap om WordPress uit te schakelen en probeer iets geheel nieuws met een nieuw CMS genaamd Netlify CMS. Het is een nieuw CMS dat bovenop React.js is gebouwd en dat kan zijn geïntegreerd met elke statische site-generator zoals Jekyll, Hugo en MiddleMan.

BadSSL

Het is een website om uw SSL-configuratie te controleren. BadSSL is een handig hulpmiddel om foutopsporing en fouten uit te voeren via SSL die op uw site is geïnstalleerd.

Alix

Alix is een Chrome-extensie waarmee u de toegankelijkheid van uw website kunt controleren. Eenmaal geïnstalleerd en ingeschakeld, zal de plug-in een overlay-box toevoegen over een aantal elementen op de pagina die een waarschuwing of fouten vormen.

AR.js

AR.js is JavaScript-bibliotheken in tegenstelling tot de anderen. Met deze bibliotheek kunnen we Augmented Reality creëren met behulp van webtechnologie en werkt verrassend snel op mobiele telefoons.

Reageer trend

Het is een reageer component van Unsplash om mooi lijndiagram te maken, typisch voor het weergeven van trends. Het onderdeel is configureerbaar; u kunt de lijndikte, de kleur, de hellingen en de gladheid van de curve instellen. U kunt eenvoudigweg de GUI gebruiken om handig de componentcode genereren.

Gitee

EEN macOS-applicatie om uw Github-activiteit te volgen vanaf uw bureaublad, Gitee voegt een nieuw item toe aan de statusbalk met aantallen sterren, volgers en meldingen. Bovendien kunt u ook bekijk grafieken van uw push en commits op een repository en trending repository over de huidige maand en week. Het is Github op Desktop in een notendop.

Goops

Goops is a handige CLI die je projectdirectory analyseert en bepaal de mappen en bestanden die moeten worden toegevoegd in de .gitignore. De CLI kan via NPM worden geïnstalleerd. Na de installatie typt u goops en klaar.

Debug CSS

DebugCSS is een CSS drop-in-hulpprogramma waarmee u uw CSS-uitvoer in de browser kunt analyseren en valideren. Het werkt vrij gelijkaardig aan Alix, wanneer u de debugCSS-stylesheet laadt of de bookmarklet gebruikt markeert de elementen op de pagina die fouten of waarschuwingen bevatten.

EagleJS

EagleJS is een JavaScript-bibliotheek om een presentatie te maken vergelijkbaar met RevealJS. EagleJS is in sommige opzichten anders; het is gebouwd met Vue.js, een JavaScript MVC-framework en gebruikt Pug als het sjablonsysteem om de dia te bouwen.

BootstrapTour

EEN JavaScript-bibliotheek om pop-uphandleidingen samen te stellen met behulp van een Bootstrap-component. De pop-upgidsen verschijnen meestal voor nieuwe gebruikers om hen door de applicatie-interface, nieuwe functies en tips te laten lopen. Het is een perfecte bibliotheek als uw site ook is gebouwd met Bootstrap.

Steen

Brick is een JavaScript-bibliotheek die is ontworpen om de gebruikersinterface van de webtoepassing te bouwen. U zult een aantal veelgebruikte zoals Agenda, Menu en Form vinden tussen de gebundelde componenten, het komt ook met een "Storage-IndexedDB" component om u toe te staan sla gegevens op aan de clientzijde met behulp van IndexedDB.

OctoTree

OctoTree is een handige tool waarmee je broncode en bestanden op Github kunt doorzoeken met Tree-structuur zoals in IDE's of code-editors. Het wordt geleverd als een add-on voor Chrome, Safari, Firefox en Opera en is beschikbaar in de officiële repository voor add-ons. Octotree ondersteunt Private en Enterprise Github repository.

Github-melding

Nog een handige Github-extensie voor Chrome. Eenmaal geïnstalleerd, kunt u een melding ontvangen, zelfs als u zich momenteel niet op de Github-pagina's bevindt. Een geweldige plug-in als u op de hoogte wilt blijven met uw repositories.

Deployer

Deployer is een hulpmiddel om uw PHP-sites te implementeren. Het werkt met een aantal populaire frameworks en platforms, waaronder WordPress, Drupal, Magento, Laravel en CodeIgniter. Met deze tool kunt u uw eigen recepten samenstellen, een opdracht die tijdens de implementatie moet worden uitgevoerd. Het komt met Terugrollen functie die u in staat stelt om terug te gaan naar de vorige versie in geval van storingen.

PHPStan

Een CLI die PHP-bestanden scant om fouten te vinden zonder de runtime uit te voeren. Dit betekent dat je geen full-stack PHP-omgeving nodig hebt om de PHP-bestanden in je project te debuggen.

NGINX Boilerplate

Een verzameling gemeenschappelijke Nginx-configuraties met Backend Caching, aansluitings- en verzoekenstarieflimiet en een aantal andere praktische tips om uw site sneller te laten werken en in te stellen voor verkeersdrukte.

champagne

Bubbly is een geweldige opdrachtregel die u op uw server kunt installeren om certificaat te genereren, beheren en vernieuwen met Let's Encrypt. Doplying SSL wordt nu zo veel gemakkelijker.

Wafelrooster

Maar toch, een ander CSS-gridraamwerk gebouwd met Flexbox waarvan ik denk dat je het moet bekijken.