Webutviklerressurser En Mega-kompilering

Internett vokser stadig og det er hundrevis av tusen kollektive ressurser for kommende webutviklere. Fra elektroniske artikler, opplæringsprogrammer, verktøy, guider, videoer, kan du lære omtrent alt på nettet. Det har egentlig aldri vært enklere å hoppe på nettet!

Nedenfor har jeg satt sammen en stor samling av noen svært nyttige webutviklerressurser. Disse inkluderer nybegynnerens materiale til HTML5 / CSS3 sammen med mer kompliserte teorier for JavaScript og PHP programmering. Det er mulig for et par entusiastiske utviklere å studere disse språkene og bygge vilt populære webapplikasjoner som ligner på Twitter eller Tumblr. Hvis du har interesse for nyttige ressurser for moderne webutviklere, vil du elske denne samlingen av troverdige ressurser.

Nyttige Online Magazines

Bloggerverdenen har eksplodert med hundrevis av tusenvis av nye forfattere som tar på Internett. Mange av disse onlinebloggene er fokusert på design og webutvikling. Du kan finne mange nyttige ressurser ved å bare bla gjennom disse RSS-feeds.

Avhengig av hvilken type språk du kodes, vil det avgjøre interesse for noen av disse bloggene. Vi kan fokusere på webutvikling og antar at dette inkluderer all front-end-arbeid (HTML5 / CSS3 / JavaScript) samt enkle back-end-skript (PHP / RoR / Python / SQL). Jeg har tatt friheten til å bygge en enkelt liste over de mest populære dev bloggene som fokuserer på både front-end og back-end kode.

Nettuts+
24 måter
webmonkey
Smashing Coding
Webitect
Inspisér element
Katter som kode
Line25 Web Design Blog

Det er sikkert mange andre å vurdere. Jeg anbefaler å treffe Google på jakt etter opplæringsprogrammer og artikler på ditt foretrukne dev-språk. Deretter kan du sette opp lister over alle de nyeste artiklene fra disse magasinene ved hjelp av en RSS-feedaggregat som Google Reader. Dette er en fin måte å starte arbeidsdagen din på, eller til og med å drepe litt tid i chugging gjennom opplæringsprogrammer.

jQuery Plugins Galore

Både jQuery-kjernebiblioteket og jQuery Mobile har fått mye trekkraft i det siste året. Disse åpne kildebiblioteker arbeider for å designe en front-end-opplevelse full av rike animasjoner og enkle å implementere Ajax-funksjoner, selv om mobilbiblioteket ikke har vært helt opptatt av sin overordnede når det gjelder plugins og tredjepartskode.

På samme måte kan et annet fantastisk produkt bgStretcher brukes som et dynamisk bakgrunnsscript. Det vil ta en serie bilder, og noen skalering av størrelsene proporsjonalt til brukerens skjermoppløsning. Sjekk ut den fantastiske demoen for å se dette i aksjon. Begge disse pluginene er gratis å laste ned, og oppfører seg som enkle eksempler på den fantastiske tredje partskoden som er bygget av jQuery. Arbeide med disse ressursene sparer mye tid på prosjektarbeid, slik at du ikke trenger å oppfinne hjulet på nytt.

Generelt anbefaler jeg også å surfe på nettstedene Ajax Blender og Dynamic Drive for JavaScript-kodestykker / plugins. Biblioteket er ikke stort, men det vokser stadig fra nytt brukerinnlevert innhold. Nettstedene inneholder ikke bare jQuery-plugins, men også MooTools og Prototype-biblioteker.

Hvis du ender opp med å jobbe med jQuery Mobile-biblioteket, vil jeg anbefale et annet verktøy jqmPhp. Det er en dynamisk PHP-klasse der du kan referere til enkle funksjoner til utgangslinjer og linjer med HTML5-kode drevet via jQuery Mobile. Det er ærligste den enkleste måten å prototype dynamiske mobilapper bygget rundt et PHP-skall. Nettstedet bloggen har mange eksempler referanser å grave gjennom.

Bygg i HTML5 og CSS3

Når vi snakker om front-end webutvikling, handler det generelt om effektivitet. Du har ikke de samme problemene med å bygge et nettsted i HTML / CSS som du ville kode for en back-end Ruby-applikasjon. Det er ingen reell logikk eller feilhåndtering i HTML - det handler mest om hvor raskt du kan skalere en layoutdesign riktig i alle nettlesere.

Først må jeg starte med å anbefale HTML5 Boilerplate. Dette er en strippet bare-beinmal som inneholder alle “standard” HTML5 websideelementer i en pakke. Dette inkluderer et standard stilark, JavaScript, favicon, Apple touch-ikoner og mange andre godbiter. Det er et 100% gratis prosjekt, og du kan til og med bidra på Github repo. Dette er en må-ha-ressurs for alle utviklere før du starter med et seriøst webprosjekt.

Nå, hvis du jobber av denne boilerplaten, har du muligheten til å legge til din egen tilpassede kode. Men jeg foreslår at du tar det neste trinnet og bygger med en app som Initializr. Dette vil generere en typisk nettside layout og til og med tillate deg å tilpasse hvilke elementer som er inkludert i din boilerplate-pakke. Google Analytics-kode, minifiserte jQuery-, .htaccess- eller web.config-filer, pluss omtrent et dusin andre alternativer er tilgjengelige.

CSS Designers

Nå som vi har sett litt inn i HTML5-kodingen, bør vi også vurdere noen av de populære CSS3-rammene. Disse er mer åpne enn HTML-maler, siden du kan gjøre så mye mer med CSS. Designere vil også innse at det er vanskelig å bygge standardkompatibel kode for alle moderne nettlesere.

Golden Grid System er fantastisk som et rammeverk på lydhør webdesign. Disse oppsettene vil tilpasse seg mobilskjermbilder og brettes innover når du endrer størrelsen på nettleservinduet. Det hjelper også med å planlegge bredden og størrelsen på hvert kolonneområde. Blueprint er et annet praktisk CSS-rammeverk du bør sjekke ut. Det er flott å bygge egendefinerte nettsteder og tilbyr fantastisk dokumentasjon.

Når det gjelder CSS-verktøy, må CSS3 PIE være i mine tre beste favoritter. Det er en enkel webapp som utfører riktig kode for å gjengi CSS3-effekter støttet i Internet Explorer 6-9. Du kan opprette dynamiske lineære gradienter, avrundede hjørner og bokseskygger med tilpassbare innstillinger. Nettstedet har IE-eksempler hvis du vil sjekke dem ut også.

Utviklere vil også se etter å slanke ned filstørrelsen for produksjon. Clean CSS er en ressurs hvor du kan velge mellom mange alternativer for å forenkle koden din og redusere filstørrelsen. En annen alternativ Code Beautifier tilbyr ikke så mange alternativer, men kan være enklere å bruke.

Tilpasse temaer med WordPress

WordPress publisering er lett det mest populære CMS i denne perioden. Vi har muligens sett millioner av nye blogger og nettsteder som alle drives av denne fantastiske innholdsstyringsløsningen. Og som sådan er WordPress-utviklere i stor etterspørsel etter å bygge egendefinerte widgets og nettstedstemaer.

Den nye versjonen av Constellation Theme gir WordPress-utviklere et enklere utgangspunkt enn standardmaler. Det nye Twenty Eleven-temaet er veldig trangt og minimalistisk, men det kan ikke konkurrere med en hel templatmal bygget på toppen av HTML5Boilerplate. The Constellation WP-temaet inkluderer selv medieforespørsler for ulike enhetsoppløsninger som iPhone og iPad-tabletter.

Wonderflux er en annen WordPress templatmal som ikke er like langt i utviklingen. Det ble nylig utgitt ut av beta til v1.0 sammen med noen online dokumentasjon. Dette temaet er litt mer komplisert enn Constellation som gir deg mer kontroll over oppsettet. Utviklerne har tatt med tilpassede PHP-kroker, funksjoner og filtre for å gjøre WordPress-nettstedet mer dynamisk.

Alvorlige WP-utviklere bør sjekke ut begge løsningene for å se om en vil bidra til fremtidig prosjektarbeid.

Finne Web Developer Freebies

Sammenliknet med PSD og grafikk virker webutviklingssamfunnet litt mangelfull i freebie-gallerier. Du kan alltid finne gode skript på Github, men du må ofte søke rundt og teste dem ut selv.

Det er vanskelig å finne nettsteder som tilbyr gratis nedlastinger og demoer, samt skripteksempler. Min favoritt nye ressurs er CodeVisually som katalogiserer bruker-innsendte utviklingsverktøy, plugins, biblioteker og andre fine ting. Oppsettet er satt opp som et galleri hvor hver side inneholder en lenke til produktet, demo skjermdump og noen ytterligere detaljer.

Galleriet inneholder hundrevis av eksempler på HTML / HTML5 mal kode, CSS3 biblioteker, og sikkert nok av jQuery ting også. Jeg har også funnet at dette er et flott nettsted for å sende inn din egen åpen kildekode til offentligheten. Ditt navn er knyttet til innleveringen, pluss du kan legge lenker til ditt eget nettsted der brukerne kunne få tilgang til koden.

Webapplikasjons-APIer

En veldig populær trend i moderne webutvikling bygger på APIer som en tredjepartsprogram. De fleste av de vanlige sosiale nettverkstegnene inkluderer et fungerende API og dokumentasjonssegment rett på deres nettsted. I tillegg er det massevis av gratispakker på Github skrevet i alle de store back-end programmeringsspråket.

Utviklere burde føle seg komfortable å jobbe med disse typer kodebiblioteker ettersom de vokser i etterspørsel. Ved hjelp av OAuth-systemet kan du raskt bygge opp en brukerbase fra mange av disse programmene. Jeg har oppført nedenfor bare noen få referanser til populære elektroniske APIer og deres fullstendige dokumentasjon.

Twitter API
CloudApp API
Instagr.am API
eBay API
Foursquare API
Dribbble API
Github API

Dra fordel av disse ressursene på nye prosjekter når det er mulig. Weben blir mer koblet sammen, og brukerne blir alltid flocking til neste store app. Du kan rekruttere tusenvis flere dedikerte medlemmer til appen din når dine besøkende ikke trenger å registrere en helt ny konto, og kan i stedet registrere deg direkte via Twitter eller Facebook.

Spørsmål og svar Ressurser

Den mest fordelaktige erfaringen mellom utviklere er å stille spørsmål og lære nye teknikker. Utvikler-fellesskapet er alltid så nyttig for nykommere og villig til å tilby sin kompetanse i mange situasjoner. Hvis du har noen kamp eller bestemte spørsmål om et prosjekt, kan du søke gjennom Google for et relatert webutviklerforum.

Jeg personlig anbefaler å bli med i Stack Exchange-fellesskapet hvis du ikke allerede er medlem. Dette inkluderer fantastiske nettsteder som Stack Overflow og Super User, hvor du kan få programmeringshjelp på stort sett alt. Fellesskapsmedlemmer er kunnskapsrike i alle de store nett språkene, inkludert jQuery og mindre PHP-klasser.

Et pent trick jeg lærte, er å søke gjennom Google og se om problemet ditt allerede er løst. Skriv inn noen søkeord i Google-søk og legg til suffikset site: stackoverflow.com. Alle returnerte søkeresultater vil være spørsmål fra Stack Overflow arkiver - hvis du er heldig, kan du finne akkurat løsningen på ditt nåværende problem.

Testing av sidens hastighet på nettet

Dette nye verktøyet som ble lagt ut av Google Developers, har faktisk vært veldig imponerende. App Page Speed Online vil analysere innholdet på nettstedet ditt og generere en analyserapport på hastighetene dine. Dette inkluderer mulige løsninger for å redusere belastningstider og holde de besøkende på nettstedet lenger.

Det kan også hjelpe deg med å avgjøre problemer med avvisningshastigheter og lavere konverteringer. Google Analytics er et must for ethvert nettsted, men jeg føler at Page Speed bare oppnår et høyere nivå av analyse.

Rapportutgangen er rangert fra høy til lav prioritet og inneholder ofte mange forskjellige elementer. Hvis du forstår LAMP-oppsett og jobber på Apache-servere, kan du også vurdere mod_pagespeed-modulen. Den utfører automatisk mange av disse optimalisasjonene på nettstedet ditt for å redusere belastningstider og cache viktige webdata (bilder, ikoner, skript).

Den beste utviklerens programvare

Mellom de to mest populære operativsystemene finner du dusinvis av programmer. Fra grafikkprogramvare til kildekode redaktører og IDEer, er det mange ressurser for webutviklere å velge mellom. Men hvis du leter etter populære forslag, anbefaler jeg følgende titler.

Mac OS X

Panic er et programvareselskap som opprettet Coda - den aller beste webutviklingsprogrammet for Mac. Du har tilgang til en kildekode editor, terminal og FTP-klient der du kan gjøre endringer direkte til serverfilene. Coda støtter dessuten en lang liste med syntaksutheving for språk som HTML, XML, CSS, JavaScript, PHP, SQL og mange flere.

Hvis du trenger en gratis løsning, bør du sjekke ut Komodo Edit. Programvaren er utviklet for Windows og Mac, åpen kildekode og helt gratis å laste ned. Den inneholder samme støtte for syntaksutheving og mange lignende funksjoner som Coda (ikke FTP dessverre). TextWrangler er en annen gratis løsning du kanskje vil prøve, også bare en enkel tekstredigerer.

For en gratis FTP-applikasjon, sjekk ut Cyberduck på Mac App Store. Selv om jeg personlig foretrekker et betalt alternativ som Yummy FTP eller Transmit.

Microsoft Windows

Adobe-programvarepakken kommer alltid til å tenke når du tenker på webdesign og utvikling. Windows-brukere har mange alternativer til Dreamweaver, og mange av dem er helt gratis.

Notepad ++ er et godt eksempel på noen åpen kildekode Win32-programvare. Prosjektet er fortsatt i aktiv utvikling og utgivelser oppdateres ofte (nesten månedlig). Jeg elsker deres fanebladgrensesnitt og støtter så mange ekstra plugins. Som nevnt ovenfor tilbys Komodo Edit også for Windows XP / Vista / 7, så du kan prøve det som et alternativ.

Webutviklere på Windows er heller ikke uten FTP-klient. Filezilla er sannsynligvis det mest populære gratisalternativet. For alternativer, sjekk ut vår gratis FTP-klientliste sammen med lignende verktøy.

Andre nyttige ressursressurser

100 viktige webutviklingsverktøy
Best Of 2011: Best Useful jQuery Plugins And Tutorials
Ruby on Rails Tutorials for Web Development Beginners
7 spennende utviklingstrender for webutvikling for 2011

Konklusjon

Så langt har første kvartal 2012 sparket av med et slag! Vi har allerede sett noe fantastisk innhold som strømmer ut av designere og webutviklere fra hele verden. Profesjonelle som bygger på nettet har så mange verktøy til disposisjon i forhold til 1-2 år siden.

Det er mitt håp at denne enorme samlingen av verktøy og ressurser vil skape metodikken for bedre utvikling. Jeg elsker å jobbe med webutviklere og lære om nye prosjekter hele tiden. Likevel er det bare så mye plass til nye ressurser vi kan inkludere, så jeg er bundet til å ha savnet noen edelstener. Hvis du har ideer eller forslag til relaterte webutviklerressurser, gi oss beskjed i postdiskusjonen.