Ontwikkel sneller en effectiever (WordPress) websites
Handige tips en tools die je direct kunt gebruiken
Ondanks dat er inmiddels vele site-builders, thema’s en kant-en-klare templates zijn te vinden op het web, komen deze vaak niet overeen met de specifieke wensen van de klant. Daarnaast zijn ze vaak moeilijk te onderhouden, sluiten niet volledig aan op de huisstijl, hebben last van performance problemen of zijn gevoelig voor beveiligingslekken.
Daarom blijft het verstandig om je eigen website te (laten) ontwikkelen. Met onderstaande tips kun jij je eigen (WordPress) development omgeving/workflow verbeteren.
Het optimaliseren van je development omgeving
Hierover is ontzettend veel informatie te vinden, maar juist daardoor is het misschien wat lastig te bepalen wat jou sneller kan laten coderen. Daarom geef ik graag een paar tips waarvan ik zeker weet dat ze ook in jouw voordeel kunnen werken.
Maak gebruik van de juiste text editor
Er zijn vele text editors op de markt. Elke editor heeft zijn voor- en nadelen. Om websites te ontwikkelen maken mijn collega’s en ik bij Dtch. Digitals graag gebruik van Sublime Text. Een lichtgewicht, maar stabiele editor met een uitgebreid arsenaal aan standaard functionaliteiten.
Personaliseer je editor
Hoewel Sublime Text er van origine al prima uitziet maak ik graag gebruik van de mogelijkheid om een custom thema, kleurenschema en font te installeren. Daarnaast kan je deze editor uitbreiden met Emmet, een toolset om razendsnel HTML en CSS te schrijven.
Snelheid en zorgvuldigheid zijn de sleutelwoorden als het op website ontwikkeling aankomt, dus alle hulpmiddelen die hieraan bijdragen zijn natuurlijk welkom.
Custom thema en kleurenschema
Monokai.pro is een prachtige en functionele uitbreiding van je editor. Het bevat voorgedefinieerde syntax highlighting, wat ervoor zorgt dat je je volledig kunt focussen op de code. Bijgeleverd zijn ook strakke iconen om bestanden te onderscheiden in de sidebar, waardoor het navigeren in je projecten een stuk gemakkelijker wordt.
Custom font
Om de editor eigen te maken is het verstandig om een font te kiezen waar jij je prettig bij voelt. Vaak wordt dit onderschat, maar omdat je soms uren achtereen naar code aan het kijken bent is het verstandig om een duidelijk en leesbaar font te kiezen.
Er zijn vele opties beschikbaar, denk hierbij aan (gratis) varianten als ‘Fira Code’, ‘Monoid’ of ‘Operator Mono’. Ik maak zelf gebruik van het ‘Dank Mono’ font, een font dat ontwikkeld is door iemand die zelf ook developer is.
Een font dat makkelijk wegleest en wat daarnaast ook nog eens bomvol zit met handige symbolen om het programmeren te vergemakkelijken. Het font is aan te schaffen en te downloaden via Gumroad.
Packages
Sublime Text is ook nog eens makkelijk uit te breiden door deze aan te vullen met losse packages. Om hiermee te beginnen druk je in de editor op Win/Linux: ctrl+shift+p, Mac: cmd+shift+p en gebruik je het commando Install Package Control
Ik heb een lijst voor je samengesteld met daarin een aantal handige packages die je kan gebruiken tijdens het development. Kijk op Package control voor een compleet overzicht van alle packages!
SightBarEnhancements
Must-Have! Breidt de rechtermuisknop functionaliteit uit in de sidebar voor zóveel meer controle over bestanden en mappen.
Compare Side-By-Side
Vergelijk gemakkelijk bestanden in tabbladen naast elkaar.
PlainTasks
Maakt van .TODO bestanden uitgebreide takenlijsten.
ColorPicker
Tool waarmee je kleuren kan kiezen en bijvoorbeeld waardes om kan zetten van RGB naar HEX.
Loremipsum
Voeg eenvoudig wat dummy content toe om je development site tijdelijk op te vullen
Allignment
Hiermee kan je de uitlijning regelen in je code en daarmee zorgen voor duidelijke en leesbare code.
Terminus
Brengt de terminal naar je Sublime Text editor. Met deze plug-in kan je terminal sessies starten vanuit een tabblad.
Snippets
In Sublime Text kan je gebruik maken van snippets. Met deze snippets kan je stukken herbruikbare code opnieuw implementeren of de functionaliteit uitbreiden van je editor. Kijk voor handige tips om snippets te gebruiken op FreeCodeCamp en check deze link voor wat handige snippets die je direct kan gebruiken.
Sneltoetsen
Sublime Text zit vol met handigheidjes om je sneller te laten programmeren. Leer daarom zoveel mogelijk van de sneltoetsen uit je hoofd zodat je niet telkens hoeft te schakelen tussen muis en toetsenbord; Sublime Text Shortcut Cheat Sheet
De Emmet toolset
Emmet is een open-source extensie voor je text-editor en kan je workflow met grote stappen doen verbeteren. Installeer ‘Emmet’ en ‘EmmetOneLine’ via de packet manager van Sublime Text en je bent klaar om te speedcoden!
Met één regel code kun je in theorie een heel HTML raamwerk opzetten voor in je templates. Zodra je begint te typen en Emmet herkent waar je mee bezig bent verschijnt er een handige tooltip. Hierin staat de code die gegenereerd word zodra je op TAB drukt. Een voorbeeld hiervan:
Ook maakt Emmet gebruik van het zogeheten ‘fuzzy search’, waardoor je in je .CSS of .SASS bestanden alleen afkortingen van CSS properties hoeft te typen, waarna Emmet ze automatisch aanvult. Typ je bijvoorbeeld mt dan wordt dit na een druk op de TAB automatisch vervangen door margin-top: .. Superhandig dus!
Zodra je deze afkortingen onder de knie hebt scheelt dit dus enorm veel typwerk. Een uitgebreide cheat sheet met alle mogelijkheden vind je online.
Tip: Download het A5 PDF document om uit te printen!
Power-Up je Google Chrome browser
Met de Web Inspector van Google heb je al ontzettend veel data en functionaliteiten voorhanden tijdens het developen. Soms schiet het tekort, maar gelukkig kun je zelf ook nog wat handige functionaliteiten toevoegen zodat je nog productiever te werk kan gaan. De volgende extensies zullen je hierbij zeker voorthelpen.
Handige tool om kleuren te achterhalen op een website
Maak Internet Explorer tabbladen aan in je Chrome Browser om snel je code te kunnen testen.
Maak screenshots van volledige webpagina’s en sla ze, incuslief annotaties, op als .JPG of .PDF.
Uitgebreide en praktische extensie/checklist om onder andere je code te valideren.
Met deze extensie kan je zelf bepalen welke onderdelen je uit de browsercache wist, handig bijvoorbeeld tijdens het developen van webshops.
Indien je snel op zoek bent naar welk fonts er op een website getoond worden.
Zorg ervoor dat je up-to-date blijft
Omdat het internet zich razendsnel blijft ontwikkelen is het ook als webdeveloper belangrijk om je kennis te blijven vernieuwen en verbreden.
Van tijd tot tijd is het verstandig om artikelen te lezen die gemaakt zijn door andere developers in jouw vakgebied, mede daardoor blijf je op de hoogte van wat er speelt. Een aantal goede blogs die interessant en leerzaam zijn betreffende HTML, CSS en WordPress:
- https://www.wpbeginner.com/
- https://yoast.com/cat/wordpress/
- https://carriedils.com/blog/
- https://css-tricks.com/
- https://torquemag.io/
- https://www.smashingmagazine.com/
Zo nu en dan is spieken toch echt beter dan zelf het wiel opnieuw uitvinden. Maak een map aan tussen je bladwijzers om je favoriete HTML/CSS gallerijen, GitHub repositories of code snippets te bewaren.
Zelf struin ik bijvoorbeeld af en toe graag rond op deze websites:
- http://awwwards.com/
- https://dribbble.com/shots/popular/web-design
- https://codepen.io/
- https://tympanus.net/codrops/
Soms mis je weleens de tijd om op zoek te gaan naar artikelen die voor jou interessant kunnen zijn. Door je in te schrijven bij een aantal relevante nieuwsbrieven zorg je ervoor dat je in ieder geval alle highlights meekrijgt.
- https://wpshout.com/newsletter/
- https://www.smashingmagazine.com/the-smashing-newsletter/
- https://wptavern.com/
En vergeet daarnaast vooral niet om je in te schrijven op onze eigen Nieuwsflits.
Geef het werk uit handen
Met bovenstaande tips maak ik mijn werk niet alleen makkelijker, maar ook vooral leuker. Samen met het team van developers dagen wij elkaar uit om de mooiste en beste technieken te gebruiken. Alles met als doel een snelle en goed functionerende website voor onze klanten. Daarbij is Dtch. Digitals zelf ook een klant.
Bij Dtch. Digitals begrijpen we dat het doorlopen van bovenstaande tips niet voor iedereen is, daarom staan mijn collega’s en ik graag voor je klaar om jouw (nieuwe) website te ontwikkelen en te onderhouden. Van design tot techniek en realisatie, we helpen je graag! En ja, alle tooling en tips van hierboven gebruik ik dan graag voor jouw website!
Nog geen reacties.