5 nieuwste webontwikkelingstools die u moet kennen

Als u onze maandelijkse postseries over Fresh Resources for Designers and Developers hebt gevolgd, ziet u dat er elke maand veel nieuwe tools worden geïntroduceerd; de lijst is waarschijnlijk oneindig. Toen ik in 2008 net begon met het leren van HTML en CSS, bestonden de meeste van deze tools nog niet.

Vandaag de dag groeit het web exponentieel. Het wordt ook steeds complexer dan ooit tevoren. We hebben meer tools nodig die een deel van het gewicht van website-ontwikkeling kunnen helpen opheffen. Daarom hebben we in dit artikel een reeks trendy tools samengesteld die zullen helpen bij webontwikkeling .

Hopelijk kunnen deze lijsten u helpen kennis te maken met de juiste webontwikkelingstools, met name voor degenen onder u die net zijn begonnen.

1. CSS Pre-processors

CSS is heel gemakkelijk te schrijven. De syntaxis is eenvoudig en gemakkelijk te begrijpen. Maar naarmate uw project groter wordt, moet u wellicht meerdere stylesheets beheren om duizenden CSS-lijnen te verwerken en als u CSS kent, weet u dat het in die situatie ontzettend moeilijk wordt om te onderhouden.

Dit is waar CSS Pre-processors echt nuttig worden. We hebben in het verleden verschillende keren CSS-Preprocessors behandeld, dus ik denk dat je ze al heel goed kent. Voor degenen die nieuw zijn, in een notendop, CSS Pre-processor stelt ons in staat om CSS te schrijven op programmeerwijze met Variables and Functions, die vervolgens wordt gecompileerd in browser-conform CSS-formaat . We kunnen CSS-eigenschappen ook opnieuw gebruiken met enkele speciale regels zoals @extend en @include .

Er zijn een aantal CSS Pre-processors: Sass, LESS, Stylus en Myth.

2. Sjabloon-engine

Het is eenvoudig om een ​​statische HTML-pagina te maken. Als u echter meerdere HTML-pagina's moet verwerken in uw project, kan het uit de hand lopen. De meeste van deze pagina's kunnen dezelfde componenten delen, zoals een koptekst, zijbalk en voettekst.

Als u iets in de zijbalk wijzigt, moet u het voor de zijbalk op de andere pagina's een voor een wijzigen of in plaats daarvan een sjabloonmotor gebruiken?

Het gebruik van een Template Engine klinkt beter voor deze situatie. Er zijn nu een aantal sjabloonmotoren die we kunnen gebruiken, zoals Kit, Jade en Handlebars. Elk heeft zijn eigen schrijfconventies. Kit wordt bijvoorbeeld alleen geleverd met variabelen en importmogelijkheden die worden gedeclareerd met een eenvoudige HTML-commentaartag, zoals zo.

 // voorbeeld van het importeren van een afzonderlijke sjabloon  // dit is een variabele 

Jade en stuur hebben veel robuuste functies om tegemoet te komen aan meer complexe projecten. We zullen ze in meer detail bespreken in een aparte post (stay tuned!). Het punt is dat als u een schaalbare statische website wilt bouwen, u de voordelen van een sjabloonmotor zou moeten benutten.

3. Taak Runner

Het proces om een ​​website te bouwen is aanzienlijk herhalend. Minificatie, Compilatie, Unit Testing, Linting, Concatening Files en Browser Refreshing, om er maar een paar te noemen, zijn de dingen die we waarschijnlijk vaak in projecten doen. Gelukkig kunnen ze worden geautomatiseerd met een Task Runner, zoals Grunt en Gulp.

Je kunt Grunt vertellen een aantal taken uit te voeren die zijn opgegeven in Gruntfile.js . Er zijn nu veel plug-ins om bijna alles met Grunt te automatiseren, dus je hoeft je eigen Grunt-taken niet te schrijven.

Stel dat u uw LESS-bestand in CSS wilt compileren, dan kunt u grunt-contribless installeren. In onze vorige post hebben we ook Grunt gebruikt om onnodige modules in jQuery te verwijderen.

Als uw project u vermoeit, is het tijd voor u om een ​​Task Runner te gebruiken om uw workflow te stroomlijnen.

4. Synchronized Testing Tool

Hier is een onvermijdelijke tool als u een voor mobiel geoptimaliseerde website bouwt. Als u veel apparaten heeft om uw website te testen, heeft u zeker Synchronized Testing nodig, waarmee u uw website tegelijkertijd op meerdere apparaten kunt testen.

Het opnieuw laden van de browser en de interacties zoals klikken en scrollen worden tegelijkertijd weergegeven op alle geteste apparaten, waardoor u geen herhaalde actie hoeft uit te voeren.

Er zijn twee tools die je kunt proberen om dit te doen: een grunt-plugin genaamd BrowserSync en een GUI-applicatie genaamd Ghostlab.

5. Ontwikkelingstoolkit

Development Toolkit stelt een aantal tools samen in één applicatie. Als u niet tevreden bent met de op tekst gebaseerde instelling in Grunt, zou een GUI-toepassing waarschijnlijk een betere tool voor u zijn.

Codekit is een pionier in dit soort toepassingen en omvat LESS, Sass, Kit, Jade, Siml, Uglify, Bower en nog veel meer op de lijst met functies.

Codekit is een OS X-enige app. Als u Windows gebruikt, kunt u Prepros uitproberen, als u Linux gebruikt, is er een Koala-app .

5 Beste Adobe Premiere-alternatieven van 2017 (So Far)

Adobe Premiere is een coole videobewerkingssoftware met al zijn interessante functies. Deze op abonnementen gebaseerde tool is echter ook vrij duur, vooral voor particulieren en kleine bedrijven. Maar waarom zou u zich zorgen maken wanneer er zoveel andere vidoe-bewerkingstools beschikbaar zijn die er zijn

(Technische en ontwerptips)

Reflection Perfection: 60 foto's die laten zien hoe het werkt

Het vastleggen van mooie reflecties is niet zo eenvoudig als het lijkt . Het vergt planning, geduld, creativiteit en soms geluk om die perfecte foto van een natuurlijk of kunstmatig reflecterend oppervlak te kunnen maken. Van het oppervlak van een meer, een ruit, een kapotte spiegel tot een onlangs gepolijste en gewaxte auto, de wereld van gereflecteerde oppervlakken zal je verbazen, als je weet waar je moet kijken en schieten

(Technische en ontwerptips)