Webudviklerressourcer En Mega-kompilering

Internettet vokser konstant, og der er hundredvis af kollektive ressourcer til kommende webudviklere. Fra online artikler, vejledninger, værktøjer, vejledninger, videoer, kan du lære næsten alt på nettet. Det har virkelig aldrig været lettere at springe online!

Nedenfor har jeg samlet en enorm samling af nogle meget nyttige webudviklerressourcer. Disse omfatter nybegynderens materiale til HTML5 / CSS3 sammen med mere komplicerede teorier til JavaScript og PHP programmering. Det er muligt for et par entusiastiske udviklere at studere disse sprog og opbygge vildt populære webapplikationer, der ligner Twitter eller Tumblr. Hvis du har interesse i nyttige aktiver til moderne webudviklere, vil du elske denne samling af troværdige ressourcer.

Nyttige Online Magazines

Bloggerverdenen har eksploderet med hundredtusinder af nye forfattere, der tager til internettet. Mange af disse online blogs er fokuseret på design og webudvikling. Du kan finde mange nyttige ressourcer ved blot at vende gennem disse RSS-feeds.

Afhængigt af hvilken type sprog du koder, bestemmer den din interesse for nogen af ​​disse blogs. Vi kan fokusere på webudvikling og antage, at dette omfatter alt front-end arbejde (HTML5 / CSS3 / JavaScript) samt simple back-end scripts (PHP / RoR / Python / SQL). Jeg har taget friheden til at oprette en enkelt liste over de mest populære dev blogs, der fokuserer på både front-end og back-end kode.

• Nettuts+
• 24 måder
• Webmonkey
• Smashing Coding
• Webitect
• Undersøg Element
• Katte Hvem Kode
• Line25 Web Design Blog

Der er sikkert mange andre at overveje. Jeg anbefaler at slå Google på jagt efter vejledninger og artikler på dit foretrukne dev sprog. Så ved at bruge en RSS feed aggregator som Google Reader kan du oprette lister over alle de seneste artikler fra disse magasiner. Dette er en fantastisk måde at starte din arbejdsdag på, eller endda at dræbe lidt tid ved at trække gennem tutorials.

jQuery-plugins Galore

Både jQuery-kernebiblioteket og jQuery Mobile har fået en masse trækkraft i det forløbne år. Disse open source-biblioteker arbejder på at designe en front-end-oplevelse, der er fuld af rige animationer og nemme at implementere Ajax-funktioner, selv om mobilbiblioteket ikke er helt opfanget af sin forælder med hensyn til plugins og tredjepartskode.

På samme måde kan et andet fantastisk produkt bgStretcher bruges som et dynamisk baggrundsskrift. Det vil tage en række billeder, og nogle skalering af størrelserne proportionalt til din brugers skærmopløsning. Tjek den vidunderlige demo for at se dette i aktion. Begge disse plugins kan downloades gratis og opføre som enkle eksempler på den fantastiske 3rd party-kode, der er bygget op af jQuery. Ved at arbejde med disse ressourcer sparer du masser af tid på projektarbejde, så du ikke behøver opfinde hjulet igen.

Generelt anbefaler jeg også at surfe på hjemmesiderne Ajax Blender og Dynamic Drive til JavaScript-kodestykker / plugins. Biblioteket er ikke stort, men det vokser konstant fra nyt brugerindgivet indhold. Webstederne omfatter ikke kun jQuery-plugins, men også MooTools og Prototype-biblioteker.

Hvis du ender med at arbejde med jQuery Mobile biblioteket, vil jeg anbefale et andet værktøj jqmPhp. Det er en dynamisk PHP klasse, hvor du kan referere til simple funktioner til output linjer og linjer af HTML5 kode drevet via jQuery Mobile. Det er ærligt den nemmeste måde at prototype dynamiske mobil apps bygget op omkring en PHP shell. Siden blog har masser af eksempler referencer til grave igennem.

Opbygning i HTML5 og CSS3

Når vi taler om front-end webudvikling, handler det generelt om effektivitet. Du har ikke de samme problemer med at opbygge en hjemmeside i HTML / CSS, da du ville kode en back-end Ruby-applikation. Der er ingen reel logik eller fejlhåndtering i HTML - det handler mest om, hvor hurtigt du kan skalere et layoutdesign korrekt i alle browsere.

Først skal jeg starte med at anbefale HTML5 Boilerplate. Dette er en afskåret bare-bones-skabelon, der indeholder alle de “standard” HTML5 webside elementer i en pakke. Dette omfatter et standard stilark, JavaScript, favicon, Apple touch ikoner og masser af andre godbidder. Det er et 100% gratis projekt, og du kan endda bidrage til deres Github repo. Dette er en must-have ressource for alle udviklere, inden du starter med et seriøst webprojekt.

Nu, hvis du arbejder ud af denne kedelplader, har du mulighed for at tilføje alle dine egne brugerdefinerede kode. Men jeg foreslår at tage det næste skridt og bygge med en app som Initializr. Dette vil generere et typisk website layout og endda tillade dig at tilpasse hvilke elementer der er inkluderet i din boilerplate pakke. Google Analytics-kode, miniverede jQuery-, .htaccess- eller web.config-filer, plus ca. et dusin andre muligheder er tilgængelige.

CSS Designers

Nu hvor vi har kigget lidt ind i HTML5-kodning, bør vi også overveje nogle af de populære CSS3-rammer. Disse er mere åbne end HTML-skabeloner, da du kan gøre så meget mere med CSS. Designere vil også indse, at det er svært at opbygge standarder, der er kompatible med alle moderne browsere.

Golden Grid Systemet er fantastisk som rammer for lydhør webdesign. Disse layouts tilpasser sig til mobile skærme og foldes indad, når du ændrer størrelsen på browservinduet. Det hjælper også med at planlægge bredden og størrelsen af ​​hvert kolonneområde. Blueprint er en anden praktisk CSS ramme du bør tjekke ud. Det er fantastisk til at opbygge brugerdefinerede hjemmesider og tilbyder fantastisk dokumentation.

Når det kommer til CSS-værktøjer, skal CSS3 PIE være i mine top tre favoritter. Det er en simpel webapp, der udsender den korrekte kode for at gøre CSS3-effekter understøttet i Internet Explorer 6-9. Du kan oprette dynamiske lineære gradienter, afrundede hjørner og boksskygger med tilpasselige indstillinger. Webstedet har IE eksempler, hvis du også vil tjekke dem ud.

Udviklere vil også se på at slanke deres filstørrelser til produktion. Clean CSS er en ressource, hvor du kan vælge mellem mange muligheder for at forenkle din kode og reducere filstørrelsen. En anden alternativ Code Beautifier tilbyder ikke så mange muligheder, men det kan være lettere at bruge.

Tilpasning af temaer med WordPress

WordPress-udgivelse er let det mest populære CMS i denne æra. Vi har muligvis set millioner af nye blogs og hjemmesider, der alle er drevet af denne fantastiske content management-løsning. Og som sådan er WordPress-udviklere i høj efterspørgsel efter at opbygge brugerdefinerede widgets og hjemmesidetemaer.

Den nye udgivelse af Constellation Theme giver WordPress-udviklere et lettere udgangspunkt end standardskabeloner. Det nye Twenty Eleven-tema er meget trist og minimalistisk, men det kan ikke konkurrere med en hel templateskabel bygget oven på HTML5Boilerplate. Constellation WP-temaet indeholder endda medieforespørgsler til forskellige enhedsopløsninger som iPhone og iPad-tabletter.

Wonderflux er en anden WordPress templateskabel, som ikke er helt lige så langt i udvikling. Det blev for nylig udgivet ud af beta til v1.0 sammen med nogle online dokumentation. Dette tema er lidt mere kompliceret end Constellation, som giver dig mere kontrol over layoutet. Udviklerne har inkluderet brugerdefinerede PHP kroge, funktioner og filtre for at gøre dit WordPress-websted mere dynamisk.

Alvorlige WP-udviklere bør tjekke begge løsninger for at se, om en af ​​dem ville hjælpe med fremtidige projektarbejde.

Finde Web Developer Freebies

Sammenlignet med PSD'er og grafik synes webudviklingssamfundet lidt manglende i freebie-gallerier. Du kan altid finde gode scripts på Github, men du skal ofte søge rundt og teste dem selv.

Det er svært at finde websteder, der tilbyder gratis downloads og demoer samt scripteksempler. Min favorit nye ressource er CodeVisually, som katalogiserer brugerindgivne udviklingsværktøjer, plugins, biblioteker og andre pæne ting. Layoutet er opsat som et galleri, hvor hver side indeholder et link til produktet, demo screenshot og nogle yderligere detaljer.

Galleriet indeholder hundredvis af eksempler på HTML / HTML5 skabelon kode, CSS3 biblioteker, og helt sikkert masser af jQuery ting også. Jeg har også fundet, at dette er en fantastisk hjemmeside til at indsende din egen open source-kode til offentligheden. Dit navn er bundet til indsendelsen, plus du kan placere links til dit eget websted, hvor brugerne kunne få adgang til koden.

API'er til webapplikation

En meget populær trend i moderne webudvikling bygger på API'er som en tredjepartsapp. De fleste af de almindelige sociale netværksmærker omfatter et fungerende API og dokumentationssegment lige på deres hjemmeside. Plus der er tonsvis af gratis indpakningsklasser på Github skrevet i alle de store back-end programmeringssprog.

Udviklere bør føle sig godt tilpas med at arbejde med disse typer kodebiblioteker, da de vokser i efterspørgslen. Ved hjælp af OAuth-systemet kan du hurtigt opbygge en brugerbase fra mange af disse applikationer. Jeg har nævnt nedenfor bare et par referencer til populære online API'er og deres fulde dokumentation.

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

Udnyt disse ressourcer til nye projekter, når det er muligt. Internettet bliver mere forbundet, og brugerne flocker altid til den næste store app. Du kan rekruttere tusindvis mere dedikerede medlemmer til din app, når dine besøgende ikke behøver at registrere en helt ny konto og i stedet kan tilmelde sig direkte via Twitter eller Facebook.

Q & A Resources

Den mest gavnlige oplevelse mellem udviklere stiller spørgsmål og lærer nye teknikker. Udviklerfællesskabet er altid så nyttigt for nyankomne og villig til at tilbyde deres ekspertise i mange situationer. Hvis du har kampe eller specifikke spørgsmål om et projekt, skal du søge gennem Google for et relateret webudviklerforum.

Jeg skal personligt anbefale at blive medlem af Stack Exchange-fællesskabet, hvis du ikke allerede er medlem. Dette omfatter fantastiske hjemmesider som Stack Overflow og Super User, hvor du kan få programmeringshjælp på stort set noget. Fællesskabsmedlemmer er kyndige på alle de store websprog, herunder jQuery og mindre PHP-klasser.

Et pænt trick, jeg lærte, er at søge gennem Google og se om dit problem allerede er løst. Indtast et par søgeord i din Google-søgning, og tilføj suffikset site: stackoverflow.com. Alle returnerede søgeresultater vil være spørgsmål fra Stack Overflow arkiver - hvis du er heldig, kan du finde præcis løsningen på dit aktuelle problem.

Testning af sidehastighed online

Dette nye værktøj udgivet af Google Developers har faktisk været rigtig imponerende. App Page Speed ​​Online analyserer dit websites indhold og genererer en analyserapport på dine hastigheder. Dette omfatter mulige løsninger til at reducere belastningstider og holde dine besøgende længere på siden.

Det kan også hjælpe dig med at bestemme problemer med afvisningsprocenter og lavere konverteringer. Google Analytics er et must for enhver hjemmeside, men jeg mener, at Page Speed ​​kun opnår et højere niveau af analyse.

Rapportens output er rangeret fra høj til lav prioritet og indeholder ofte mange forskellige elementer. Hvis du forstår LAMP-opsætninger og arbejder på Apache-servere, kan du også overveje mod_pagespeed-modulet. Det udfører automatisk mange af disse optimeringer på din hjemmeside for at reducere belastningstider og cache vigtige webdata (billeder, ikoner, scripts).

Den bedste udviklerens software

Mellem de to mest populære operativsystemer kan du finde snesevis af programmer. Fra grafisk software til kildekode redaktører og IDE'er er der mange ressourcer til webudviklere at vælge imellem. Men hvis du leder efter populære forslag, anbefaler jeg følgende titler.

Mac OS X

Panic er et softwarefirma der skabte Coda - langt den bedste webudviklingsapp til Mac. Du har adgang til en kildekode editor, terminal og FTP-klient, hvor du kan foretage ændringer direkte til serverfilerne. Coda understøtter desuden en lang liste over syntaksfremhævning for sprog som HTML, XML, CSS, JavaScript, PHP, SQL og mange flere.

Hvis du dog har brug for en gratis løsning, skal du tjekke Komodo Edit. Softwaren er udviklet til Windows og Mac, open source og helt gratis at downloade. Den indeholder alle de samme understøttelser til syntaksfremhævning og masser af lignende funktioner som Coda (ingen FTP desværre). TextWrangler er en anden gratis løsning, du måske vil prøve, også bare en simpel teksteditor.

For en gratis FTP-applikation, tjek Cyberduck på Mac App Store. Selvom jeg personligt foretrækker et betalt alternativ som Yummy FTP eller Transmit.

Microsoft Windows

Adobe-softwarepakken kommer altid til at tænke på, når du tænker på webdesign og udvikling. Windows-brugere har masser af alternativer til Dreamweaver, og mange af dem er helt gratis.

Notepad ++ er et godt eksempel på nogle open source Win32 software. Projektet er stadig i aktiv udvikling og udgiver opdateringer ofte (næsten månedligt). Jeg elsker deres faneblade og understøtter så mange ekstra plugins. Som jeg nævnte ovenfor, tilbydes Komodo Edit også til Windows XP / Vista / 7, så du kan prøve det som et alternativ.

Webudviklere på Windows er heller ikke uden en FTP-klient. Filezilla er nok det mest populære gratis alternativ. For alternativer, se vores gratis FTP-klientliste sammen med lignende værktøjer.

Andre nyttige hjælpemidler

• 100 væsentlige webudviklingsværktøjer
• Bedste af 2011: Bedste Nyttige jQuery-plugins og tutorials
• Ruby on Rails Tutorials for Web Development Beginners
• 7 spændende udviklingstendenser for 2011

Konklusion

Indtil videre har første kvartal 2012 sparket af med et bang! Vi har allerede set nogle fantastiske indhold, der hælder ud af designere og webudviklere fra hele verden. Professionelle byggeri til internettet har så mange værktøjer til deres rådighed i forhold til 1-2 år siden.

Det er mit håb, at denne enorme samling af værktøjer og ressourcer vil skubbe din metode til bedre udvikling. Jeg elsker hele tiden at arbejde med webudviklere og lære om nye projekter. Men der er kun så meget plads til nye ressourcer, vi kan medtage, så jeg er bundet til at have savnet nogle få ædelstene. Hvis du har ideer eller forslag til relaterede webudviklerressourcer, så fortæl os det i diskussionsområdet.