Topp 10 bästa metoder för webbutveckling

Förklara vilken div du stänger

De flesta gånger när jag tittar på källan till en webbplats ser jag längst ner på sidan en nästan oändlig lista med avslutande </div>-taggar. Faktum är att många nybörjare tror att de bara behöver använda divs i stället för tabeller för att producera kvalitetskod. Divs är renare än tabeller, men utan ordentlig kodorganisation kan det bli lika (eller till och med ibland mer) rörigt som tabellbaserad kod.

Användning av indragning är en bra början. Men ett tips som definitivt kan få dig att spara mycket tid är att kommentera varje div-tagg du stänger, som i exemplet nedan:

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

Använd CSS-återställning

Om du inte är nybörjare eller om du varit på semester på en öde ö de senaste 6 åren, vet du kanske redan hur användbar en CSS-återställning är. Eftersom webbläsarna som standard inte tillämpar samma standardformat på HTML-element ser en CSS-återställning till att alla element inte har något särskilt format så att du kan definiera ditt eget utan att riskera att få många problem med rendering mellan olika webbläsare.

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;}

Källa: https://meyerweb.com/eric/tools/css/reset/index.html

Använd inte @import

CSS-filer kan inkluderas med hjälp av @import-direktivet. Detta kan vara användbart när du till exempel vill inkludera ett formatmallblad i ett annat. En annan vanlig metod är att inkludera CSS-filer i html-dokument med hjälp av följande:

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

Det fungerar visserligen, men @import-direktivet är mycket långsammare än det andra sättet att inkludera formatmallar i ett html-dokument:

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

Det kommer inte att göra någon skillnad på webbplatser med låg trafik, men om du har chansen att äga en populär webbplats ska du inte slösa bort besökarnas tid genom att använda @import.
Källa: http://www.stevesouders.com/blog/2009/04/09/dont-use-import/

”Smush” dina bilder

Som utvecklare har jag alltid tyckt att det inte varit lätt att optimera mina bilder för webben. Jag försökte med det goda gamla Photoshop-kommandot ”Spara för webben”, men oftast slutade det med bilder som antingen var för stora eller utan tillräcklig kvalitet.
Som ett resultat av detta hade jag den dåliga vanan att använda ooptimerade bilder på mina webbplatser. Detta är inget problem när du inte behöver bry dig om din webbplats bandbredd, men efter mitt senaste byte på min virtuella privata server var jag tvungen att vara försiktig med bildstorlekarna.

Vid den här tiden hittade jag ett mycket coolt verktyg som heter Smush It: Du anger din ooptimerade bild url, och Smush It skapar en perfekt optimerad bild åt dig. Du kan spara upp till 70 % av filstorleken, samtidigt som du behåller den ursprungliga kvaliteten. Som exempel kan nämnas att alla bilder från min lista över kodredigerare online har ”smushats”.

Mixa inte CSS med HTML

Som ett markup-språk används HTML på rätt sätt för att organisera dokument genom att definiera en rubrik, en sidfot, listor, blockquotes, osv. För en tid sedan använde front-end webbutvecklare ofta numera föråldrade HTML-attribut för att styla ett visst element.
Nuförtiden gör style-attributet det möjligt för utvecklare att infoga CSS direkt i ett html-dokument. Detta är mycket användbart vid testning eller när man har bråttom. Men style-attributet är dålig praxis, som går helt emot CSS-filosofin.

Följande exempel visar hur smutsig och svårläst en enkel kodrad kan bli med style-attributet:

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

Mixa inte Javascript med HTML

På samma sätt som det är dålig praxis att mixa din html-kod med css bör du inte använda Javascript i dina html-dokument. Följande dåliga praxis illustrerar en onclick-händelse:

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

Det går att uppnå samma resultat med obehindrad Javascript. I det här exemplet använder jag det populära ramverket jQuery:

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

Detta kan verka lite svårare till en början, särskilt för nybörjare; men det är det definitivt inte, och det kommer att hålla ditt html-dokument rent.

Du vet det, IE suger, och vissa kunder suger ännu mer genom att kräva att du ska skapa webbsidor som är kompatibla med denna föråldrade webbläsare. För att rikta in dig på specifika versioner av IE kan du använda de välkända IE-hacks som visas nedan:

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

Dessa hacks är mycket användbara ibland, men de är inte det bästa sättet att rikta in dig på en specifik version av IE, och det kommer att leda till att din CSS-validering misslyckas.

Istället bör du använda den villkorliga kommentaren som visas nedan för att rikta in dig på IE6.

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

Placera Javascriptfilen längst ner

En populär metod i slutet av 90-talet/början av 2000-talet var att placera Javascriptfiler inom taggarna <head> och </head>. Problemet är att javascriptfilerna laddas först, och följaktligen laddas ditt innehåll efter.

Om du placerar javascriptfilerna längst ner i dina dokument ser du till att JS-filerna laddas först när innehållet har visats korrekt.

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

Använd HTML semantiskt

HTML är inte ett programmeringsspråk. Det är ett uppmärkningsspråk som används för att skapa strukturerade dokument genom att ange strukturell semantik för text som rubriker, stycken, listor med mera.
Om du började skapa webbplatser på det gamla goda 90-talet eller i början av århundradet vet du hur smutsig markeringen var på den tiden. Men lyckligtvis har den utvecklats.
Av andra saker är det viktigt att använda html-element semantiskt. Som exempel bör en navigeringsmeny alltid vara en oordnad lista:

<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>

Testa medan du bygger för att undvika problem med flera webbläsare

Ett av de största misstagen jag någonsin gjort när jag utvecklat html, CSS och javascript var att inte testa mina sidor i flera webbläsare medan jag skrev dem. Istället brukade jag skriva all min kod och bara visa i Firefox för att se hur den återgavs.
I teorin borde detta vara bra. Men som du vet är problem med olika webbläsare ett stort problem för front-end-utvecklare, särskilt på grund av IE. Om du testar dina dokument i Firefox/IE/Chrome medan du skriver dem är det mycket lättare att åtgärda problem med rendering mellan webbläsare. Jag har förlorat timmar på att inte göra det, så jag hoppas att det här sista tipset hjälper dig att spara din dyrbara tid. Lycka till med kodningen 😉

Lämna ett svar

Din e-postadress kommer inte publiceras.