Share
Als je een tijdje hebt gecodeerd, begin je iets als vanzelfsprekend te beschouwen. Je vergeet hoe slim je echt bent. Hoeveel honderden sneltoetsen hebben we onthouden? Hoeveel talen hebben we geleerd? Hoeveel frameworks? Hoeveel hacks? Om te stellen dat webontwerp / -ontwikkeling een extreem moeilijke sector is, is het een lichte opgave. Voeg vervolgens het feit toe dat veel van wat u vandaag weet over een paar jaar als overbodig wordt beschouwd.
Vandaag zullen we een aantal tips en tricks bekijken die beginners zullen helpen hun ontwikkeltijd te versnellen en efficiënter kunnen coderen. U ziet een combinatie van snelle tijdbesparingenstips en specifieke coderingstrucs om de efficiëntie van uw webtoepassing te vergroten.
Wanneer u de tool 'Opslaan voor web' in Photoshop gebruikt, kunnen we onze afbeeldingen comprimeren om de respectieve bestandsgroottes te verlagen. Maar wist u dat de compressie nog verder kan worden doorgevoerd zonder concessies te doen aan de kwaliteit? Een site met de naam Smush.It maakt het proces een makkie.
Het team van Smush.It gebruikt een verscheidenheid aan hulpmiddelen.
* De bovenstaande lijstitems zijn overgenomen van de SmushIt FAQ-pagina .
Dus, net voordat u een nieuwe website implementeert, voert u uw URL uit via hun service om al uw afbeeldingen te verkleinen - en daarmee uw website te versnellen. Pas op - de service kan uw GIF-bestanden naar PNG converteren. Mogelijk moet u uw HTML- en CSS-bestanden dienovereenkomstig bijwerken. Terwijl we het over het onderwerp hebben, is 99% van de tijd, besparen als een PNG de betere beslissing. Tenzij u een smakelijke geanimeerde GIF gebruikt, beschouw het PNG-formaat als best practice.
Veel IDE's bieden een "codefragment" -venster waarmee u code kunt opslaan voor later gebruik. Zie je jezelf te vaak op lipsum.com om de generieke tekst te pakken? Waarom bewaar je het niet gewoon als een fragment? Druk in Dreamweaver op 'Shift F9' om het fragmenttabblad te openen. Vervolgens kunt u het juiste fragment naar de juiste locatie slepen. Deze functie bespaart me zoveel tijd in de loop van een week.
Je hebt de jQuery-bibliotheek gedownload en je probeert langzaam de syntaxis te begrijpen. Onderweg raak je een addertje onder het gras en besef je dat je niet kunt achterhalen wat de waarde van $ someVariable is. Eenvoudig, doe gewoon ...
console.log ($ someVariable);
Open nu Firefox - zorg dat FireBug is geïnstalleerd - en druk op F12. Je krijgt de juiste waarde te zien.
Nu - vermenigvuldig dit met oneindig en neem het voor eeuwig mee naar de diepte en je zult je nog steeds niet realiseren hoe nuttig Firebug en console.log () kunnen zijn. :)
Gemaakt door Chris Pederick, deze ongelooflijk nuttige Firefox-plug-in presenteert u een overvloed aan opties. Velen van jullie die mijn screencasts bekijken, weten dat ik fan ben van het gebruik van de optie "CSS bewerken" om mijn stijlen in realtime aan te passen. Andere handige opties zijn ...
Web Developer Toolbar
Dit is een procedure die we allemaal niet genoeg uitvoeren. Hoewel dit niet altijd haalbaar is, kunt u uw website vele malen versnellen door uw scripttags naast de afsluiting te plaatsen
label....
De meeste huidige browsers kunnen maximaal twee componenten parallel voor elke hostnaam downloaden. Bij het downloaden van een script kunnen echter geen andere downloads plaatsvinden. Die download moet eindigen voordat je verder gaat.
Dus, indien mogelijk, is het volkomen logisch om deze bestanden naar de onderkant van uw document te verplaatsen, zodat de andere componenten (afbeeldingen, CSS, enz.) Eerst kunnen worden geladen.
Als prestatie van het grootste belang is voor uw website, raad ik u ten zeerste aan om uw CSS- en Javascript-bestanden vóór de implementatie te comprimeren. Doe niet de moeite om het aan het begin van je ontwikkeling te doen. Het zal alleen maar meer frustratie veroorzaken dan hulp. Echter, als de boog eenmaal is vastgebonden, comprimeer die baby's dan.
Twee andere handige hulpmiddelen voor het inpakken van JavaScript-code zijn YUI Compressor en JSMin.
Bovendien hebt u de mogelijkheid om uw HTML te comprimeren - hoewel ik het niet zou aanbevelen. De bestandsreductie is verwaarloosbaar.
Nog niet zo lang geleden plaatste Jon Hobbs-Smith van tvidesign.co.uk een fantastisch artikel met 25 jQuery-tips. Zorg dat je deze pagina een bladwijzer maakt! Hier zijn een aantal van mijn favorieten.
Accentsconagua
if ($ ('# myDiv) .length) // deze code wordt alleen uitgevoerd als de div met een id van #myDiv bestaat. Veel mensen realiseren zich niet dat, bij toegang tot dom-elementen, de functie jQuery een tweede parameter accepteert: "context". Stel je de volgende situatie voor…
var myElement = $ ('# someElement'); Voor deze code moet jQuery de volledige DOM doorlopen. We kunnen de snelheid verbeteren door een context als de tweede parameter te gebruiken.
var myElement = $ ('# someElement', $ ('. someContainer')); Nu vertellen we jQuery om alleen in het .someContainer-element te zoeken en alles daar buiten te negeren.
Bij toegang tot ID's met jQuery gebruikt de bibliotheek de traditionele "getElementById" -methode. Bij het benaderen van klassen moet jQuery zijn eigen methoden gebruiken om de dom te doorlopen (er is geen native "getElementByClass" -methode). Als gevolg hiervan duurt het wat langer!
Bekijk alle 25 tips!
Als u de keuze hebt tussen $ _GET of $ _POST bij AJAX-oproepen, kiest u de eerste.
"Het Yahoo! -Mailteam ontdekte dat bij het gebruik van XMLHttpRequest POST in de browsers wordt geïmplementeerd als een proces in twee stappen: eerst de headers verzenden en vervolgens gegevens verzenden. U kunt GET dus het beste gebruiken om slechts één TCP-pakket te verzenden ( tenzij je veel cookies hebt). " - Developer.Yahoo.com
Onthoud - gebruik niet blindelings $ _GET. Zorg ervoor dat je precies weet wat je het eerst doet. U mag bijvoorbeeld de querystring- en databasetoegang in geen geval mengen. Nog niet zo lang geleden stuurde een van mijn Twitter-vrienden me een afbeelding van een live-website met een MYSQL-vraag in de URL. DOE DIT NIET! :)
Of u nu PHP, ASP.NET, Mootools of jQuery gebruikt - of een combinatie van al deze, overweeg het gebruik van frameworks indien van toepassing.
Bijvoorbeeld:
Als ik echter een ingewikkelde site bouw die een volledig CMS en ingewikkelde gegevenstoegang vereist, zal ik een kijkje nemen in een van de kaders van mijn voorkeurstaal..
Onthoud - maak kaders voor u werken; niet andersom. Wees slim bij het nemen van deze beslissingen.
YSlow is een geweldige service die uw website controleert om er zeker van te zijn dat deze zo efficiënt mogelijk is. Het Yahoo Dev-team, niet zo lang geleden, heeft een aantal richtlijnen of best practices opgesteld die moeten worden gevolgd bij het ontwikkelen - waarvan er veel in dit artikel worden beschreven, eigenlijk.
Er is een geweldige YSlow screencast die veel tijdbesparende technieken laat zien. Ik adviseer ten zeerste dat je het bekijkt wanneer je de kans hebt.
De meeste ervaren ontwerpers / ontwikkelaars zullen het met mij eens zijn; als ik elke keer dat ik een wijziging in mijn site of ontwerp wilde aanbrengen naar het werkbalkmenu moest gaan, was ik verdwaald. Ik gebruik al zo lang toetsenbordsnelkoppelingen dat ik niet meer weet wat de juiste locatie is voor deze opdrachten. Ik weet gewoon dat "Shift X" het juiste paneel opent.
In eerste instantie kan het lijken op verspilde kennis. Maar ik verzeker u dat het dat niet is. Ik raad aan dat u een Google-zoekopdracht uitvoert voor "X-sneltoetscombinaties" - waarbij X gelijk is aan uw software (zoals Photoshop). Druk de kaart af en plaats deze naast uw computer. De komende paar weken oefen je met het zo min mogelijk aanraken van je muis. Dit is een ding dat de profs van de hobbyisten scheidt.
Laten we eerlijk zijn; niet elke website hoeft een enorme en gecompliceerde toepassing te zijn. Soms willen we gewoon onze portfolio tonen - waarschijnlijk het grootste deel van de tijd voor sommigen! Maak in deze gevallen een eenvoudige 'sjabloon' die alles bevat wat u nodig heeft om aan de slag te gaan.
In mijn sjabloonmap heb ik geneste "JS" - en "CSS" -mappen.
Bovendien heb ik een "index.html (php)" bestand dat een paar codefragmenten bevat die ik in de meeste van mijn projecten gebruik. Het is niets bijzonders, maar het bespaart tijd!
Document zonder titel
Zoals je ziet verwijs ik naar mijn CSS en Javascript-bestanden, link ik naar het jQuery-bestand van Google, maak ik de jQuery-functie document.ready () aan en open ik de standaard "container" -div.
Het is nogal simplistisch, maar BESPAART TIJD. Dus elke keer dat u een nieuwe website maakt, kopieert u eenvoudig uw "sjabloon" -map en graaft u in.
Over het algemeen moet al uw CSS en Javascript van de pagina worden verwijderd en in hun eigen respectieve externe bestanden worden geplaatst.
Als je slechts een paar basisstijlen hebt, kun je een uitzondering maken. In die, en alleen die gevallen, kan het nuttig zijn om ze op te nemen in de HTML-pagina.
AJAX is nu al een rage - vooral omdat het dankzij Javascript-bibliotheken eindelijk relatief gebruikersvriendelijk is geworden. In sommige gevallen moet u een manier hebben om te bepalen of het script is aangeroepen met Javascript. Er zijn een paar dagen om deze taak te volbrengen.
Een manier zou kunnen zijn om een uniek sleutel / waarde-paar toe te voegen met Javascript bij het verzenden van de POST. U kunt dan PHP gebruiken om te bepalen of die specifieke sleutel bestaat. Als dit het geval is, weten we dat JavaScript is ingeschakeld.
Een betere manier zou zijn om een ingebouwde PHP-functie genaamd "HTTP_X_REQUESTED_WITH" te gebruiken. Illustreren…
als isset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // schrijf wat code en wees gerust dat Javascript is ingeschakeld. else // Doe iets anders om te compenseren voor gebruikers die JS hebben uitgeschakeld.
Nog niet zo lang geleden begon Google met het hosten van populaire scripts zoals jQuery. Als u een dergelijke bibliotheek gebruikt, wordt u sterk aangeraden om te linken naar het CDN van Google in plaats van uw eigen script te gebruiken.
AJAX Libraries API
Ik ben een grote fan van Chrome van Google. Het opent extreem snel en verwerkt Javascript sneller dan elke andere browser - in ieder geval voorlopig (ik denk dat de nieuwste versie van Firefox mogelijk is vastgelopen)..
Je zult echter niet snel zien dat ik Firefox verlaat. Het aantal nuttige plug-ins dat beschikbaar is voor de browser is verbluffend. Hier is een lijst met mijn favorieten.
Net zoals het op dit moment cool is om Microsoft te haten, lijkt het erop dat het op dit moment populair is om mensen die IDE's gebruiken tijdens de ontwikkeling aan te vallen. Dit is gewoon stom.
In veel gevallen is het gebruik van een geavanceerde IDE van groot belang, vooral als u in OOP-talen werkt. Als u nu eenvoudig een kleine HTML-sjabloon maakt, werken programma's zoals Notepad ++ en Coda uitstekend. Eigenlijk zou ik hun gebruik in deze gevallen aanbevelen. Voeg geen extra bloat toe als je het niet nodig hebt. Profiteer echter van een IDE bij het ontwikkelen van geavanceerde toepassingen.
Dat zou het voorlopig moeten doen. Hopelijk helpen een paar van deze (misschien allemaal!) Je om een betere ontwerper en ontwikkelaar te worden. Wat zijn enkele van je favoriete short-cuts? Laat hieronder een reactie achter en laat het ons weten!
