Top 10 Web Development Best Practices

Leg uit welke div je sluit

De meeste tijd als ik een website bron bekijk, zie ik, helemaal onderaan de pagina, een bijna eindeloze lijst van sluitende </div> tags. In feite denken veel beginners dat ze gewoon divs moeten gebruiken in plaats van tabellen om kwaliteitscode te produceren. Divs zijn netter dan tabellen, maar zonder een goede organisatie van de code, kan het net zo (of soms zelfs meer) rommelig zijn als code gebaseerd op tabellen.

Het gebruik van inspringing is een goed begin. Maar een tip die je zeker veel tijd kan besparen is om commentaar te geven bij elke div tag die je sluit, zoals in het voorbeeld hieronder:

<div> <div class="first left"> ... </div><!-- #sub.first.left --></div><!-- #header -->

Gebruik een CSS reset

Niet als je een beginner bent of als je de laatste 6 jaar op vakantie was op een onbewoond eiland, dan weet je misschien al hoe handig een CSS reset is. Omdat browsers standaard niet dezelfde styling toepassen op HTML-elementen, zorgt een CSS-reset ervoor dat alle elementen geen bepaalde stijl hebben, zodat je je eigen stijl kunt definiëren zonder het risico van veel cross-browser renderproblemen.

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin: 0;padding: 0;border: 0;outline: 0;font-size: 100%;vertical-align: baseline;background: transparent;}body {line-height: 1;}ol, ul {list-style: none;}blockquote, q {quotes: none;}blockquote:before, blockquote:after,q:before, q:after {content: '';content: none;}/* remember to define focus styles! */:focus {outline: 0;}/* remember to highlight inserts somehow! */ins {text-decoration: none;}del {text-decoration: line-through;}/* tables still need 'cellspacing="0"' in the markup */table {border-collapse: collapse;border-spacing: 0;}

Bron: https://meyerweb.com/eric/tools/css/reset/index.html

Gebruik geen @import

CSS-bestanden kunnen worden opgenomen met behulp van de @import directive. Dit kan handig zijn wanneer je bijvoorbeeld een stylesheet in een ander stylesheet wilt opnemen. Een andere veelgebruikte manier is om CSS-bestanden in html-documenten op te nemen met behulp van de volgende:

<style type="text/css> @import url('a.css'); @import url('b.css');</style>

Hoewel het werkt, is de @import directive veel trager dan de andere manier om stylesheets in een html-document op te nemen:

<link rel='stylesheet' type='text/css' href='a.css'><link rel='stylesheet' type='text/css' href='proxy.css'>

Het zal geen verschil maken op websites met weinig verkeer, maar als je de kans hebt om een populaire website te bezitten, verspil dan niet de tijd van je bezoeker door @import te gebruiken.
Bron: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

“Smush” je afbeeldingen

Als ontwikkelaar vond ik het optimaliseren van mijn afbeeldingen voor het web altijd al niet eenvoudig. Ik probeerde het goede oude Photoshop-commando “Opslaan voor web”, maar meestal eindigde ik met afbeeldingen die ofwel te groot waren of niet van voldoende kwaliteit.
Als gevolg daarvan had ik de slechte gewoonte om niet-geoptimaliseerde afbeeldingen op mijn websites te gebruiken. Dit is geen probleem als je niet hoeft te zorgen over de bandbreedte van uw site, maar na mijn recente overstap op mijn virtual private server, moest ik voorzichtig zijn met beeldformaten.

Op dit moment, vond ik een zeer cool hulpmiddel genaamd Smush It: U voert uw niet-geoptimaliseerde afbeelding url, en Smush It zal een perfect geoptimaliseerde afbeelding voor u te maken. Je kunt tot 70% van de bestandsgrootte besparen, met behoud van de originele kwaliteit. Als voorbeeld, alle afbeeldingen uit mijn lijst van online code editors zijn “smushed”.

Gebruik CSS niet met HTML

Als een markup taal, het juiste gebruik van HTML is om documenten te organiseren door het definiëren van een header, een footer, lijsten, blockquotes, enz. Enige tijd geleden gebruikten front-end webontwikkelaars vaak nu verouderde HTML-attributen om een bepaald element te stijlen.
Heden ten dage stelt het stijl-attribuut ontwikkelaars in staat CSS direct in een html-document in te voegen. Dit is erg handig voor testen of als je haast hebt. Maar het style attribuut is een slechte praktijk, die volledig tegen de CSS filosofie ingaat.

Het volgende voorbeeld illustreert hoe vies en moeilijk te lezen een simpele regel code kan worden, met het style attribuut:

<a href="https://catswhocode.com" style="background:#069;padding:3px;font-weight:bold;color:#fff;">Cats Who Code</a>

Meng geen Javascript met HTML

Net zoals het mengen van je html code met css een slechte praktijk is, moet je ook geen Javascript gebruiken in je html documenten. De volgende slechte praktijk illustreert een onclick event:

<a href="https://catswhocode.com" onclick="alert('I love this site!');">Cats Who Code</a>

Hetzelfde resultaat kan worden bereikt met onbelemmerde Javascript. In dit voorbeeld gebruik ik het populaire jQuery framework:

$(document).ready(function() { $('#cwc').click(function() { alert('I love this website'); });});

Dit lijkt in het begin misschien wat moeilijker, vooral voor beginners; maar dat is het beslist niet, en het houdt je html document schoon.

Je weet het, IE zuigt, en sommige clients zuigen nog meer door te eisen dat je webpagina’s maakt die compatibel zijn met deze verouderde browser. Om specifieke versies van IE te targeten, kun je de bekende IE hacks gebruiken, zoals hieronder getoond:

height: 200px; /* normal browsers */_height: 300px; /* IE6 */.height: 250px; /* IE7 */*height: 350px; /* All IEs */

Die hacks zijn soms erg handig, maar ze zijn niet de beste manier om een specifieke versie van IE te targeten, en het zal er voor zorgen dat je CSS validatie faalt.

In plaats daarvan, zou je de conditionele opmerking hieronder moeten gebruiken om IE6 te targeten.

<link href="style.css" rel="stylesheet" type="text/css" /><!--> <link href="ie.css" rel="stylesheet" type="text/css" /><!-->

Plaats Javascript bestand onderaan

Een populaire praktijk van de late jaren 90/begin 2000 was om Javascript bestanden binnen de <head> en </head> tags te plaatsen. Het probleem is dat je javascript bestanden als eerste geladen worden, en dus je inhoud pas daarna.

Door Javascript bestanden onderaan je documenten te plaatsen, zorg je ervoor dat JS bestanden pas geladen worden als de inhoud goed is weergegeven.

 ... <script type='text/javascript' src='jquery.js?ver=1.3.2'></script> </body></html>

Gebruik HTML semantisch

HTML is geen programmeertaal. Het is een opmaaktaal die wordt gebruikt om gestructureerde documenten te maken door structurele semantiek aan te geven voor tekst zoals koppen, paragrafen, lijsten, enzovoort.
Als je in de goede oude jaren 90 of in het begin van de eeuw bent begonnen met het maken van websites, weet je hoe smerig de opmaak destijds was. Maar gelukkig, het is geëvolueerd.
Onder andere dingen, is het belangrijk om html element semantisch te gebruiken. Als voorbeeld, een navigatie menu zou altijd een ongeordende lijst moeten zijn:

<ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Blog</a></li></ul>

Test WANNEER je bouwt om cross-browser problemen te vermijden

Een van de grootste fouten die ik ooit heb gemaakt bij het ontwikkelen van html, CSS, en javascript, was het niet testen van mijn pagina’s op meerdere browsers terwijl ik ze aan het schrijven was. In plaats daarvan, schreef ik al mijn code en bekeek het alleen in Firefox om te zien hoe het werd weergegeven.
In theorie, zou dit goed moeten zijn. Maar zoals je weet, cross-browser problemen zijn een groot probleem voor front-end ontwikkelaars, vooral als gevolg van IE. Als je je documenten test op Firefox/IE/Chrome terwijl je ze schrijft, zullen cross-browser rendering problemen veel makkelijker op te lossen zijn. Ik heb uren verloren door dit niet te doen, dus ik hoop dat deze laatste tip je zal helpen je kostbare tijd te besparen. Veel plezier met coderen 😉

Geef een antwoord

Het e-mailadres wordt niet gepubliceerd.