Share
Når du har kodet for en stund, begynner du å ta noe for gitt. Du glemmer hvor smart du egentlig er. Hvor mange hundre tastaturgenveier har vi lagret? Hvor mange språk har vi lært? Hvor mange rammer? Hvor mange hack? Å si at webdesign / utvikling er en ekstremt tøff industri, setter det lett. Deretter legger du til at mye av det du vet i dag, vil bli betraktet som foreldet om noen år.
I dag ser vi på en avling av tips og triks som vil hjelpe nybegynnere til å øke sin utviklingstid og kode mer effektivt. Du får se en blanding av raske tidsbesparende tips, samt spesifikke kodingstrenker for å øke webprogrammets effektivitet.
Når du bruker verktøyet "Lagre for web" i Photoshop, kan vi komprimere bildene våre for å senke deres respektive filstørrelser. Men visste du at kompresjonen kan tas enda lenger uten å ofre kvalitet? Et nettsted som heter Smush.It gjør prosessen til en cinch.
Teamet på Smush.It bruker en rekke verktøy.
* Listepostene ovenfor ble tatt fra SmushIt FAQ-siden .
Så, før du distribuerer et nytt nettsted, kjør din webadresse gjennom deres tjeneste for å redusere alle bildene dine - og dermed øke hastigheten på nettstedet ditt. Pass på - tjenesten kan konvertere GIF-filene til PNG. Du må kanskje oppdatere HTML- og CSS-filene dine tilsvarende. Mens vi er på emnet, er 99% av tiden, og sparer som en PNG, den bedre beslutningen. Med mindre du bruker en klebrig animert GIF, bør du vurdere PNG-formatet for å være best praksis.
Mange IDEer tilbyr et "kodestykke" -panel som lar deg lagre kode for senere bruk. Finn du deg selv på besøk lipsum.com for ofte for å ta tak i generisk tekst? Hvorfor ikke bare lagre det som en utdrag? I Dreamweaver, trykk "Shift F9" for å åpne utklippsfanen. Du kan deretter dra den riktige koden til riktig sted. Denne funksjonen sparer meg så mye tid i løpet av en uke.
Du har lastet ned jQuery-biblioteket, og du prøver sakte å forstå syntaksen. Underveis treffer du en snag og innser at du ikke kan finne ut hva verdien av $ someVariable er lik. Enkelt, bare gjør ...
console.log ($ someVariable);
Last opp Firefox - sørg for at FireBug er installert - og trykk F12. Du vil bli presentert med riktig verdi.
Nå - multipliser dette ved uendelig og ta det til dypet for alltid, og du vil fortsatt ikke innse hvor nyttig Firebug og console.log () kan være. :)
Laget av Chris Pederick, presenterer denne utrolig nyttige Firefox-plugin deg en mengde alternativer. Mange av dere som ser på my screencasts, vet at jeg er fan av å bruke "Edit CSS" -alternativet for å justere stilene mine i sanntid. Andre nyttige alternativer inkluderer ...
Webutvikler Verktøylinje
Dette er en prosedyre som vi alle ikke utfører nok. Selv om det ikke alltid er mulig, kan du ofte øke nettstedet ditt ved å plassere skriptetiketter ved siden av lukkingen
stikkord....
De fleste nettlesere kan laste ned maksimalt to komponenter parallelt for hvert vertsnavn. Men når du laster ned et skript, kan det ikke forekomme andre nedlastinger. Den nedlastingen må fullføres før du går videre.
Så når det er mulig, er det perfekt for å flytte disse filene til bunnen av dokumentet for å tillate de andre komponentene (bilder, css, etc) å laste først.
Hvis perfomance er viktig for nettstedet ditt, foreslår jeg sterkt at du vurderer å komprimere CSS og Javascript-filer like før distribusjon. Ikke bry deg om å gjøre det i begynnelsen av utviklingen din. Det vil bare føre til mer frustrasjon enn hjelp. Men når baugen er bundet, komprimerer de babyene opp.
To andre nyttige verktøy for pakking av JavaScript-kode er YUI Compressor og JSMin.
I tillegg har du muligheten til å komprimere HTML-en din, men jeg vil ikke anbefale det. Filreduksjonen er ubetydelig.
Ikke for lenge siden, skrev Jon Hobbs-Smith fra tvidesign.co.uk en fantastisk artikkel som beskriver 25 jQuery-tips. Husk å bokmerke denne siden! Her er flere av mine favoritter.
Accentsconagua
hvis ($ ('# myDiv) .length) // denne koden vil bare kjøre hvis div med et ID på #myDiv eksisterer. Mange mennesker skjønner ikke at når du åpner domelementer, aksepterer jQuery-funksjonen en andre parameter - "kontekst". Vurder følgende…
var myElement = $ ('# someElement'); Denne koden vil kreve jQuery å krysse hele DOM. Vi kan forbedre hastigheten ved å bruke en kontekst som den andre parameteren.
var myElement = $ ('# someElement', $ ('.container')); Nå forteller vi jQuery å bare søke innenfor .someContainer-elementet, og å ignorere alt utenfor det.
Når du åpner ID med jQuery, bruker biblioteket den tradisjonelle "getElementById" metoden. Men når du åpner klasser, må jQuery bruke sine egne metoder for å krysse dom (det er ikke en innfødt "getElementByClass" -metode). Som et resultat tar det litt lengre tid!
Gjennomgå alle 25 tips!
Hvis du har valget mellom $ _GET eller $ _POST når du ringer AJAX, velger du den forrige.
"Yahoo! Mail-teamet fant at når du bruker XMLHttpRequest, blir POST implementert i nettleserne som en to-trinns prosess: sende først overskriftene og deretter sende data. Så det er best å bruke GET, som bare tar en TCP-pakke å sende ( med mindre du har mange informasjonskapsler). " - Developer.Yahoo.com
Husk - bruk ikke blindt $ _GET. Pass på at du vet nøyaktig hva du gjør først. For eksempel, under ingen omstendigheter bør du blande spørringsstrengen og databasetilgang. Ikke for lenge siden sendte en av mine Twitter-kompis meg et bilde av et nettsted med en MYSQL-spørring i webadressen. IKKE GJØR DETTE! :)
Enten du bruker PHP, ASP.NET, Mootools, jQuery - eller en kombinasjon av dem alle, bør du vurdere å bruke rammer når det passer.
For eksempel:
Men hvis jeg bygger et komplisert nettsted som krever full CMS og komplisert data tilgang, tar jeg en titt på et av mine foretrukne språkrammer.
Husk - gjør rammer for deg; ikke omvendt. Vær smart når du tar disse avgjørelsene.
YSlow er en fantastisk tjeneste som kontrollerer nettstedet ditt for å sikre at det er så effektivt som mulig. Yahoo Dev-teamet, ikke for lenge siden, opprettet et sett med retningslinjer eller beste praksis, som bør følges når man utvikler - mange av disse er detaljert i denne artikkelen, faktisk.
Det er en flott YSlow screencast som demonstrerer mange tidsbesparende teknikker. Jeg anbefaler at du ser det når du har sjansen.
Mest erfarne designere / utviklere vil være enige med meg; hvis jeg måtte gå opp i verktøylinjemenyen hver gang jeg ønsket å gjøre en endring til nettstedet mitt eller design, ville jeg gå tapt. Jeg har brukt tastaturgenveier for så lenge at jeg ikke vet riktig sted lenger for disse kommandoene. Jeg vet bare at "Shift X" åpner det riktige panelet.
I begynnelsen kan det virke som bortkastet kunnskap. Men jeg forsikrer deg om at det ikke er det. Jeg anbefaler at du gjør et Google-søk etter "X-tastatursnarveier" - der X er lik programvaren din (dvs. Photoshop). Skriv ut diagrammet og plasser det ved siden av datamaskinen. I løpet av de neste ukene trenger du å røre musen så lite som mulig. Dette er en ting som skiller proffene fra hobbyistene.
La oss innse det; Ikke alle nettsteder må være noen store og kompliserte applikasjoner. Noen ganger vil vi bare vise vår portefølje - trolig mesteparten av tiden for noen! I disse tilfellene, hvorfor ikke lage en enkel "mal" som inneholder alt du trenger for å komme i gang.
I min malmappe har jeg nestede "JS" og "CSS" mapper.
I tillegg har jeg en "index.html (php)" -fil som inneholder noen kodestykker som jeg bruker på de fleste av prosjektene mine. Det er ikke noe for fancy, men det sparer tid!
Navnløst dokument
Som du kan se, refererer jeg til min CSS og Javascript-filer, kobler til Googles jQuery-fil, lager funksjonen document.ready () jQuery, og åpner standard "container" div.
Det er ganske enkelt, men sparer tid. Så hver gang du lager et nytt nettsted, kopier du bare mappen "mal" og graver deg inn.
Generelt sett bør alle dine CSS og Javascript fjernes fra siden og plasseres i egne respektive eksterne filer.
Hvis du bare har noen grunnleggende stiler, kan du gjøre et unntak. I de, og bare de tilfellene, kan det være fordelaktig å inkludere dem på HTML-siden.
AJAX er alle raseri akkurat nå - for det meste fordi det endelig har blitt relativt brukervennlig takket være Javascript-biblioteker. I noen tilfeller må du ha en måte å finne ut om skriptet ble kalt med Javascript. Det er noen dager å utføre denne oppgaven.
En måte ville være å legge til et unikt nøkkelverdierpar med Javascript når du sender POST. Du kan da bruke PHP for å finne ut om den aktuelle nøkkelen eksisterer. Hvis det gjør, vet vi at Javascript er aktivert.
En bedre måte ville være å bruke en innebygd PHP-funksjon kalt "HTTP_X_REQUESTED_WITH". Å illustrere…
hvis isset ($ _ SERVER ['HTTP_X_REQUESTED_WITH']) // skriv noen kode og vær trygg på at Javascript er aktivert. else // Gjør noe annet for å kompensere for brukere som har JS slått av.
Ikke for lenge siden begynte Google hosting populære skript som jQuery. Hvis du bruker et slikt bibliotek, anbefales det sterkt at du kobler til Googles CDN i stedet for å bruke ditt eget skript.
AJAX Biblioteker API
Jeg er en stor fan av Googles Chrome. Den åpnes ekstremt fort og prosesserer Javascript raskere enn noen annen nettleser - i hvert fall for nå (jeg tror den nyeste versjonen av Firefox kan ha fanget opp.).
Men du vil ikke se meg å forlate Firefox noen gang snart. Antall nyttige plugins tilgjengelig for nettleseren er forbløffende. Her er en liste over mine favoritter.
På samme måte som det er kult å hate Microsoft akkurat nå, ser det ut til at det er populært i øyeblikket for folk å angripe de som bruker IDE når de utvikler seg. Dette er bare dumt.
I mange tilfeller er bruk av en avansert IDE avgjørende - spesielt når du arbeider i OOP-språk. Nå, hvis du bare lager en liten HTML-mal, vil programmer som Notepad ++ og Coda fungere bra. Egentlig vil jeg anbefale deres bruk i disse tilfellene. Ikke legg til ekstra oppblåsing hvis du ikke trenger det. Men når du utvikler avanserte applikasjoner, dra nytte av en IDE.
Det burde gjøre det for nå. Forhåpentligvis vil noen av disse (kanskje alle av dem!) Bidra til å gjøre deg til en bedre designer og utvikler. Hva er noen av favorittkortene dine? Legg igjen en kommentar nedenfor og gi oss beskjed!
