Web Developer Resources En Mega-kompilering

Internet växer ständigt och det finns hundratusentals kollektiva resurser för kommande webbutvecklare. Från artiklar på nätet, handledning, verktyg, guider, till videoklipp kan du lära dig nästan vad som helst över webben. Det har verkligen aldrig varit lättare att hoppa på nätet!

Nedan har jag sammanställt en stor samling av några väldigt hjälpsamma webbutvecklare resurser. Dessa inkluderar nybörjare material för HTML5 / CSS3 tillsammans med mer komplicerade teorier för JavaScript och PHP programmering. Det är möjligt för ett par entusiastiska utvecklare att studera dessa språk och bygga väldigt populära webbapplikationer som liknar Twitter eller Tumblr. Om du har intresse för användbara tillgångar för moderna webbutvecklare så kommer du att älska denna sammanställning av pålitliga resurser.

Nyttiga Online Magazines

Bloggarvärlden har exploderat med hundratusentals nya författare som tar till Internet. Många av dessa onlinebloggar är inriktade på design och webbutveckling. Du kan hitta många användbara resurser genom att bara bläddra igenom dessa RSS-flöden.

Beroende på vilken typ av språk du kodar bestämmer du ditt intresse för någon av dessa bloggar. Vi kan fokusera på webbutveckling och antar att detta inkluderar allt front-end-arbete (HTML5 / CSS3 / JavaScript) samt enkla back-end-skript (PHP / RoR / Python / SQL). Jag har tagit mig fri att bygga en enda lista över de mest populära dev bloggarna som fokuserar på både front-end och back-end-kod.

• Nettuts+
• 24 sätt
• Webmonkey
• Smashing Coding
• Webitect
• Inspektera elementet
• Katter som kodar
• Line25 Web Design Blog

Det finns säkert många andra att överväga. Jag rekommenderar att du träffar Google på jakt efter handledning och artiklar på ditt föredragna dev-språk. Sedan kan du använda en RSS-mataggregat som Google Reader, du kan ställa in listor över alla de senaste artiklarna från dessa tidskrifter. Det här är ett bra sätt att starta din arbetsdag, eller till och med för att döda lite tid som chugging genom handledning.

jQuery Plugins Galore

Både jQuery-kärnbiblioteket och jQuery Mobile har fått mycket dragkraft under det gångna året. Dessa open source-biblioteken arbetar för att designa en front-end-upplevelse som är full av rika animationer och lättanvända Ajax-funktioner, även om mobilbiblioteket inte har blivit riktigt upptagen med sin förälder när det gäller plugins och tredje partskod.

På samma sätt kan en annan fantastisk produkt bgStretcher användas som ett dynamiskt bakgrundsskript. Det tar en serie bilder och en viss skalering av storlekarna proportionellt till användarens skärmupplösning. Kolla in den underbara demo för att se detta i åtgärd. Båda dessa plugins är gratis att ladda ner, och fungerar som enkla exempel på den fantastiska 3rd party-koden byggd av jQuery. Att arbeta med dessa resurser sparar mycket tid på projektarbete, så att du inte behöver återuppfinna hjulet.

I allmänhet rekommenderar jag också att du surfar på webbplatser Ajax Blender och Dynamic Drive för JavaScript-kodfragmenter / plugins. Biblioteket är inte stort, men det växer ständigt från nytt användarinnehållet innehåll. Sidorna innehåller inte bara jQuery-plugins men även MooTools och Prototype-bibliotek.

Om du slutar arbeta med jQuery Mobile-biblioteket vill jag rekommendera ett annat verktyg jqmPhp. Det är en dynamisk PHP-klass där du kan referera till enkla funktioner till utgångslinjer och rader med HTML5-kod som drivs via jQuery Mobile. Det är ärligt det enklaste sättet att prototypa dynamiska mobilappar byggda runt ett PHP-skal. Webbplatsblogg har massor av exempelreferenser att gräva igenom.

Byggnad i HTML5 och CSS3

När vi pratar om front-end webbutveckling handlar det allmänt om effektivitet. Du har inte samma problem med att bygga en webbplats i HTML / CSS eftersom du skulle koda en Ruby-applikation bakåt. Det finns ingen riktig logik eller felhantering i HTML - det handlar mest om hur snabbt du kan skala en layoutdesign korrekt i alla webbläsare.

Först måste jag börja med att rekommendera HTML5 Boilerplate. Detta är en avskalad blottbenmall som innehåller alla “standard-” HTML5-webbsidor i ett paket. Detta inkluderar ett standardformat, JavaScript, favicon, Apple Touch-ikoner och massor av andra godsaker. Det är ett 100% gratis projekt och du kan till och med bidra till deras Github repo. Detta är en måste-resurs för alla utvecklare innan du börjar på något seriöst webbprojekt.

Nu om du arbetar av denna panna har du möjlighet att lägga till all din egen anpassad kod. Men jag föreslår att du tar nästa steg och bygger med en app som Initializr. Detta kommer att generera en typisk webbplats layout och till och med låta dig anpassa vilka element som ingår i ditt boilerplate paket. Google Analytics-kod, minifiera jQuery, .htaccess eller web.config-filer, plus ett dussin andra alternativ finns tillgängliga.

CSS Designers

Nu när vi har tittat lite på HTML5-kodning borde vi också överväga några av de populära CSS3-ramarna. Dessa är mer öppna än HTML-mallar, eftersom du kan göra så mycket mer med CSS. Designers kommer också att inse svårigheten att bygga standardkompatibel kod för alla moderna webbläsare.

Golden Grid Systemet är fantastiskt som ramverk för lyhörda webbdesigner. Dessa layouter kommer att anpassas till mobila skärmar och vikas inåt när du ändrar webbläsarfönstret. Det hjälper också till att planera bredden och storleken på varje kolumnområde. Blueprint är en annan praktisk CSS-ram som du bör kolla in. Det är bra att bygga egna webbplatser och erbjuder fantastisk dokumentation.

När det gäller CSS-verktyg måste CSS3 PIE vara i mina tre bästa favoriter. Det är en enkel webapp som matar ut rätt kod för att göra CSS3-effekter stödda i Internet Explorer 6-9. Du kan skapa dynamiska linjära gradienter, rundade hörn och rutaskuggor med anpassningsbara inställningar. Webbplatsen har IE-exempel om du vill kolla in dem också.

Utvecklare kommer också att se att slita ner sina filstorlekar för produktion. Clean CSS är en resurs där du kan välja mellan många alternativ för att förenkla din kod och minska filstorleken. En annan alternativ Code Beautifier erbjuder inte lika många alternativ men kan vara lättare att använda.

Anpassa teman med WordPress

WordPress-publicering är lätt det mest populära CMS i den här tiden. Vi har kanske sett miljontals nya bloggar och webbplatser som alla drivs av den här fantastiska lösningen för innehållshantering. Och som sådana WordPress utvecklare är i hög efterfrågan på att bygga anpassade widgets och webbplats teman.

Den nya versionen av Constellation Theme ger WordPress-utvecklare en enklare utgångspunkt än standardmallen. Det nya tjugo elva temat är väldigt litet och minimalistiskt, men det kan inte tävla med en hel temalmall byggd ovanpå HTML5Boilerplate. Constellation WP-temat innehåller även mediafrågor för olika enhetsupplösningar som iPhone och iPad-tabletter.

Wonderflux är en annan WordPress templatmall som inte är så långt i utveckling. Det har nyligen släppts ut av beta till v1.0 tillsammans med en del online dokumentation. Detta tema är lite mer komplicerat än Constellation vilket ger dig mer kontroll över layouten. Utvecklarna har inkluderat anpassade PHP-krokar, funktioner och filter för att göra din WordPress-webbplats mer dynamisk.

Allvarliga WP-utvecklare bör kolla in båda lösningarna för att se om någon skulle hjälpa till med framtida projektarbete.

Hitta Web Developer Freebies

Jämfört med PSD och grafik verkar webutvecklingssamhället lite saknas i freebie-gallerier. Du kan alltid hitta bra scripts på Github, men du måste ofta leta efter och testa dem själv.

Det är svårt att hitta webbplatser som erbjuder gratis nedladdningar och demo samt skript exempel. Min favorit nya resurs är CodeVisually som katalogiserar användarinlämnade utvecklingsverktyg, plugins, bibliotek och andra snygga saker. Layouten är inställd som ett galleri där varje sida innehåller en länk till produkten, demo skärmdump och några ytterligare detaljer.

Galleriet innehåller hundratals exempel på HTML / HTML5 mallkod, CSS3-bibliotek, och säkert massor av jQuery-saker också. Jag har också funnit att detta är en bra hemsida för att skicka in din egen öppna källkod till allmänheten. Ditt namn är knutet till inlämningen, plus du kan placera länkar till din egen webbplats där användarna kunde komma åt koden.

API för webbapplikation

En mycket populär trend i modern webbutveckling bygger på API-er som en tredjepartsapp. De flesta av de vanliga sociala nätverksmärkena innehåller ett fungerande API och dokumentationssegment direkt på deras hemsida. Dessutom finns det massor av gratisomslagsklasser på Github skrivna i alla större back-end programmeringsspråk.

Utvecklare bör känna sig bekväma med att arbeta med dessa typer av kodbiblioteken eftersom de växer i efterfrågan. Med OAuth-systemet kan du snabbt bygga upp en användarbas från många av dessa applikationer. Jag har listat nedan bara några referenser till populära online API och deras fullständiga dokumentation.

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

Dra fördel av dessa resurser på nya projekt när det är möjligt. Webben blir mer ansluten och användare flödar alltid till nästa stora app. Du kan rekrytera tusentals mer dedikerade medlemmar till din app när dina besökare inte behöver registrera ett helt nytt konto och istället kan anmäla sig direkt via Twitter eller Facebook.

Q & A Resources

Den mest fördelaktiga erfarenheten mellan utvecklare är att ställa frågor och lära sig nya tekniker. Utvecklaren är alltid så hjälpsam för nykomlingar och villiga att erbjuda sin expertis i många situationer. Om du har några kampar eller specifika frågor om ett projekt, sök via Google för en relaterad webbutvecklare forum.

Jag måste personligen rekommendera att gå med i Stack Exchange-gruppen om du inte redan är medlem. Detta inkluderar fantastiska webbplatser som Stack Overflow och Super User där du kan få programmeringshjälp på i princip allt. Gemenskapsledamöter är kunniga på alla större webbspråk inklusive jQuery och mindre PHP-klasser.

Ett snyggt knep jag lärde mig är att söka igenom Google och se om ditt problem redan har lösts. Ange några sökord i din Google-sökning och lägg till suffixet site: stackoverflow.com. Alla tillbaka sökresultat kommer att vara frågor från Stack Overflow arkiv - om du har tur kan du hitta exakt lösningen på ditt nuvarande problem.

Testning av sidhastighet på nätet

Det nya verktyget som utarbetats av Google Developers har faktiskt varit riktigt imponerande. App Page Speed ​​Online analyserar ditt webbplatsinnehåll och genererar en analysrapport på dina hastigheter. Detta inkluderar möjliga lösningar för att minska belastningstiderna och hålla dina besökare längre bort på webbplatsen.

Det kan också hjälpa dig att bestämma problem med studsfrekvenser och sänka omvandlingar. Google Analytics är ett måste för vilken webbplats som helst, men jag känner att sidhastigheten bara uppnår en högre analysnivå.

Rapportutgången rangordnas från hög till låg prioritet och innehåller ofta många olika objekt. Om du förstår LAMP-inställningar och arbetar på Apache-servrar kan du också överväga mod_pagespeed-modulen. Det utförs automatiskt många av dessa optimeringar på din webbplats för att minska belastningstider och cache viktiga webbdata (bilder, ikoner, skript).

Den bästa utvecklarens programvara

Mellan de två mest populära operativsystemen kan du hitta dussintals program. Från grafikprogramvara till källkodredaktörer och IDE-er, finns det många resurser för webbutvecklare att välja mellan. Men om du letar efter populära förslag rekommenderar jag följande titlar.

Mac OS X

Panic är ett mjukvaruföretag som skapade Coda - den absolut bästa webbutvecklingsappprogrammet för Mac. Du har tillgång till en källkodsredigerare, terminal och FTP-klient, där du kan göra ändringar direkt till servernsfilerna. Coda stödjer dessutom en lång lista med syntaxmarkering för språk som HTML, XML, CSS, JavaScript, PHP, SQL och många fler.

Om du behöver en fri lösning, bör du kolla in Komodo Edit. Programvaran är utvecklad för Windows och Mac, öppen källkod, och helt gratis att ladda ner. Den innehåller samma stöd för syntaxmarkering och många liknande funktioner som Coda (ingen FTP tyvärr). TextWrangler är en annan gratis lösning som du kanske vill försöka, bara en enkel textredigerare.

För en gratis FTP-applikation kolla Cyberduck på Mac App Store. Även om jag personligen föredrar ett betalt alternativ som Yummy FTP eller Transmit.

Microsoft Windows

Adobe-programvarupaketet kommer alltid att tänka på när du tänker på webbdesign och utveckling. Windows-användare har många alternativ till Dreamweaver, och många av dem är helt gratis.

Notepad ++ är ett bra exempel på vissa Open Source Win32-program. Projektet är fortfarande aktivt och släpper uppdateringar ofta (nästan månadsvis). Jag älskar deras flikar gränssnitt och stöd för så många ytterligare plugins. Som jag nämnde ovan erbjuds Komodo Edit också för Windows XP / Vista / 7, så du kan prova det som ett alternativ.

Webbutvecklare på Windows är inte heller utan en FTP-klient. Filezilla är förmodligen det mest populära fria alternativet. För alternativ, kolla in vår gratis FTP-klientlista tillsammans med liknande verktyg.

Andra användbara Dev Resources

• 100 viktiga webbutvecklingsverktyg
• Bäst av 2011: Bäst användbara jQuery-plugin och handledning
• Ruby on Rails Tutorials för webbutveckling nybörjare
• 7 spännande webbutvecklingstrender för 2011

Slutsats

Hittills har första kvartalet 2012 sparkat av med ett slag! Vi har redan sett något fantastiskt innehåll som häller ut av designers och webbutvecklare från hela världen. Professionella byggande för webben har så många verktyg till sitt förfogande jämfört med 1-2 år sedan.

Jag hoppas att den här stora sammansättningen av verktyg och resurser kommer att driva din metodik för bättre utveckling. Jag älskar att arbeta med webbutvecklare och lär mig hela tiden nya projekt. Ändå finns det bara så mycket utrymme för nya resurser som vi kan inkludera, så jag är skyldig att ha missat några pärlor. Om du har idéer eller förslag till relaterade webbutvecklare, informerar vi oss om det i diskussionsområdet.