Web Developer Resources Mega-kompilacija

Internet je u stalnom porastu i postoje stotine tisuća kolektivnih resursa za nadolazeće web programere. Iz internetskih članaka, tutorijala, alata, vodiča, videozapisa, možete naučiti gotovo sve o webu. Nikada nije bilo lakše skočiti na internetu!

U nastavku sam sastavio veliku zbirku nekih vrlo korisnih resursa web developera. To uključuje početnički materijal za HTML5 / CSS3 zajedno s složenijim teorijama za JavaScript i PHP programiranje. Moguće je da par entuzijastičnih programera prouči te jezike i izgradi divlje popularne web aplikacije slične Twitteru ili Tumblr-u. Ako vas zanimaju korisna sredstva za moderne web-programere, svidjet će vam se kompilacija pouzdanih resursa.

Korisni online časopisi

Svijet blogova je eksplodirao sa stotinama tisuća novih pisaca koji su došli na internet. Mnogi od tih internetskih blogova fokusirani su na dizajn i web razvoj. Možete pronaći mnogo korisnih resursa tako što ćete jednostavno prelistati RSS feedove.

Ovisno o vrsti jezika koji kodirate, on će odrediti vaš interes za bilo koji od tih blogova. Možemo se usredotočiti na web razvoj i pretpostaviti da to uključuje sve front-end rad (HTML5 / CSS3 / JavaScript), kao i jednostavne back-end skripte (PHP / RoR / Python / SQL). Oslobodio sam se izrade jedinstvenog popisa najpopularnijih dev blogova koji se fokusiraju na prednji i pozadinski kod.

• Nettuts+
• 24 načina
• Webmonkey
• Potresno kodiranje
• Webitect
• Pregledajte element
• Mačke koji kodiraju
• Line25 Web Design Blog

Sigurno postoji mnogo drugih koje treba razmotriti. Preporučujem da pritisnete Google u potrazi za vodičima i člancima na željenom dev jeziku. Zatim pomoću RSS feed agregatora kao što je Google Reader možete postaviti popise svih najnovijih članaka iz ovih časopisa. Ovo je sjajan način da započnete svoj radni dan, ili čak da ubijete malo vremena tijekom tutorijala.

jQuery Dodaci u izobilju

Oba jQuery knjižnica jezgre i jQuery Mobile su stekli mnogo vuče u posljednjih godinu dana. Te knjižnice otvorenog koda rade na dizajniranju prednjeg iskustva punog bogate animacije i jednostavnih Ajax značajki, iako mobilna biblioteka nije sasvim sustigla roditelja u smislu dodataka i koda treće strane.

Slično tome, još jedan fantastičan proizvod bgStretcher može se koristiti kao dinamička pozadinska skripta. Trebat će niz slika, a neke će se proporcionalno prilagoditi veličini zaslona vašeg korisnika. Pogledajte ovaj divan demo da biste to vidjeli u akciji. Oba ova dodatka su besplatna za preuzimanje i ponašaju se kao jednostavni primjeri za strašan kod treće strane izgrađen jQuery. Rad s tim resursima će vam uštedjeti mnogo vremena na projektnom radu, tako da ne morate ponovno izumiti kotač.

Općenito preporučujem i pregledavanje web stranica Ajax Blender i Dynamic Drive za JavaScript isječke / dodatke. Knjižnica nije velika, ali stalno raste s novim sadržajem koji su poslali korisnici. Stranice ne uključuju samo jQuery dodatke, nego i MooTools i Prototype knjižnice.

Ako završite raditi s jQuery Mobile knjižnicom, želim vam preporučiti još jedan alat jqmPhp. To je dinamična PHP klasa u kojoj možete uputiti jednostavne funkcije na izlazne linije i linije HTML5 koda koji se pokreću putem jQuery Mobile. Iskreno, to je najlakši način prototipa dinamičkih mobilnih aplikacija izgrađenih oko PHP ljuske. Blog web-lokacije ima mnogo primjera referenci koje treba pročitati.

Izgradnja u HTML5 i CSS3

Kada govorimo o front-end izradi web stranica, uglavnom se radi o učinkovitosti. Nemate iste probleme pri izradi web-lokacije u HTML / CSS-u kao što biste kodirali Ruby aplikaciju. Ne postoji prava logika ili rukovanje pogreškama u HTML-u - to je uglavnom o tome kako brzo možete pravilno oblikovati izgled u svim preglednicima.

Prvo moram početi preporučujući HTML5 Boilerplate. Ovo je skraćeni predložak koji sadrži sve “standard” HTML5 elementi web-stranice u jednom paketu. To uključuje zadanu stilsku tablicu, JavaScript, favicon, Apple touch ikone i mnogo drugih pogodnosti. To je 100% besplatan projekt i čak možete doprinijeti njihovom Github repu. Ovo je nezaobilazan resurs za sve programere prije početka bilo kojeg ozbiljnog web projekta.

Sada, ako radite s ovom predloškom, imate mogućnost dodavanja svog vlastitog prilagođenog koda. Ali predlažem da napravite sljedeći korak i izgradite aplikaciju kao što je Initializr. To će generirati tipičan izgled web-lokacije, pa čak i omogućiti prilagodbu elemenata koji su uključeni u vaš predloženi paket. Kôd usluge Google Analytics, umanjene datoteke jQuery, .htaccess ili web.config te brojne druge opcije dostupne su.

CSS dizajneri

Sada kada smo malo pogledali u HTML5 kodiranje, trebali bismo uzeti u obzir i neke od popularnih CSS3 okvira. To su otvoreniji nego HTML predlošci jer s CSS-om možete učiniti mnogo više. Dizajneri će također shvatiti poteškoće u izgradnji standarda usklađenog sa standardima za sve moderne web-preglednike.

Zlatni mrežni sustav je fantastičan kao okvir za web dizajn. Ovi izgledi će se prilagoditi mobilnim zaslonima i preklopiti prema unutra dok mijenjate veličinu prozora preglednika. Također pomaže u planiranju širine i veličine svakog stupca. Nacrt je još jedan zgodan CSS okvir koji bi trebao provjeriti. Izvrstan je za izradu prilagođenih web-mjesta i nudi fantastičnu dokumentaciju.

Međutim, kada je riječ o CSS alatima, CSS3 PIE mora biti u mojoj top tri favorita. To je jednostavna web-aplikacija koja daje odgovarajući kod za prikazivanje CSS3 efekata podržanih u pregledniku Internet Explorer 6-9. Možete stvoriti dinamičke linearne gradijente, zaobljene kutove i sjenila okvira s prilagodljivim postavkama. Stranica ima IE primjere ako ih želite provjeriti.

Programeri će također pokušati smanjiti veličinu datoteka za proizvodnju. Očistite CSS je jedan resurs gdje možete odabrati iz brojnih opcija pojednostaviti svoj kod i smanjiti veličinu datoteke. Još jedna alternativa Code Beautifier ne nudi toliko opcija, ali može biti jednostavnija za korištenje.

Prilagođavanje tema pomoću programa WordPress

WordPress objavljivanje je lako najpopularniji CMS u ovom razdoblju. Vidjeli smo možda milijune novih blogova i web-lokacija koje pokreće ovo fantastično rješenje za upravljanje sadržajem. I kao takvi WordPress programeri su u velikoj potražnji za izgradnju prilagođene widgete i web stranice teme.

Novo izdanje The Constellation Theme daje WordPress programerima lakšu početnu točku od zadanih predložaka. Nova tema Dvadeset jedanaest je vrlo lukava i minimalistička, ali ne može se natjecati s cijelim tematskim predloškom izgrađenim na HTML5Boilerplate. Tema Constellation WP čak uključuje i medijske upite za različite razlučivosti uređaja, kao što su iPhone i iPad tableti.

Wonderflux je još jedan WordPress tematski predložak koji nije baš toliko daleko u razvoju. To je bio tek nedavno izdana od beta u v1.0 zajedno s nekim online dokumentacije. Ova tema je malo složenija od Constellationa koja vam daje veću kontrolu nad izgledom. Programeri su uključili prilagođene PHP kuke, funkcije i filtre kako bi vaš WordPress site bio dinamičniji.

Ozbiljni WP programeri trebali bi provjeriti oba rješenja kako bi vidjeli je li ijedan od njih pomogao u budućem radu na projektu.

Pronalaženje besplatnih web razvojnih programera

U usporedbi s PSD-ovima i grafikama, zajednica za razvoj web stranica izgleda malo nedostaje u freebie galerijama. U Githubu uvijek možete pronaći izvrsne skripte, ali ćete često morati sami pretraživati ​​i testirati ih.

Teško je pronaći web-lokacije koje nude besplatna preuzimanja i demo snimke, kao i primjere skripti. Moj omiljeni novi resurs je CodeVisually koji katalogizira korisničke alate za razvoj, dodatke, knjižnice i druge uredne stvari. Raspored je postavljen kao galerija u kojoj svaka stranica sadrži poveznicu na proizvod, demo snimku zaslona i neke dodatne pojedinosti.

Galerija sadrži stotine primjera HTML / HTML5 predloška koda, CSS3 knjižnice i svakako i mnogo jQuery stvari. Također sam otkrio da je ovo odlična web-lokacija za slanje vlastitog otvorenog izvornog koda u javnost. Vaše ime je vezano za podnesak, plus možete postaviti veze na vlastitu web-lokaciju na kojoj korisnici mogu pristupiti kodu.

API-ji web-aplikacija

Vrlo popularan trend u suvremenom razvoju weba je izgradnja API-ja kao aplikacije treće strane. Većina glavnih društvenih mreža uključuje radni API i segment dokumentacije izravno na svojoj web-lokaciji. Plus tu su tone slobodnih klasa omotača na Githubu napisane u svim glavnim pozadinskim programskim jezicima.

Programeri bi se trebali osjećati ugodno radeći s ovim vrstama knjižnica koda, budući da se njihova potražnja povećava. Pomoću sustava OAuth možete brzo izgraditi korisničku bazu iz mnogih od tih aplikacija. U nastavku navodim samo nekoliko referenci na popularne online API-je i njihovu punu dokumentaciju.

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

Iskoristite ove resurse na novim projektima kad god je to moguće. Web postaje sve više povezan i korisnici uvijek hrle u sljedeću veliku aplikaciju. Možete privući tisuće više članova u svoju aplikaciju kada posjetitelji ne moraju registrirati cijeli novi račun i umjesto toga se mogu prijaviti izravno putem Twittera ili Facebooka.

Resursi za pitanja i odgovore

Najkorisnije iskustvo između programera postavlja pitanja i uči nove tehnike. Zajednica razvojnih programera uvijek je od pomoći novodošlim i spremna je ponuditi svoju stručnost u mnogim situacijama. Ako imate bilo kakvih problema ili specifičnih pitanja u vezi s projektom, pretražujte Google za povezani forum razvojnog programera.

Ja osobno moram preporučiti pridruživanje zajednici Stack Exchange ako već niste član. To uključuje nevjerojatna web-mjesta kao što je Stack Overflow i Super User gdje možete dobiti pomoć u programiranju u osnovi bilo čega. Članovi zajednice poznaju sve glavne web-jezike, uključujući jQuery i manje PHP klase.

Uredan trik koji sam naučio jest da pretražujem Google i vidim je li vaš problem već riješen. Unesite nekoliko ključnih riječi u Google pretraživanje i dodajte sufiks mjesto: stackoverflow.com. Svi vraćeni rezultati pretraživanja bit će pitanja iz arhiva pretapanja za Stack - ako imate sreće, možda ćete pronaći točno rješenje za trenutni problem.

Testiranje brzine stranice na mreži

Ovaj novi alat koji je razvio Google Developers zapravo je doista impresivan. Aplikacija Page Speed ​​Online analizira sadržaj vaše web-lokacije i generira analitičko izvješće o vašim brzinama. To uključuje moguća rješenja za smanjenje vremena učitavanja i duže zadržavanje posjetitelja na web-lokaciji.

Također vam može pomoći u određivanju problema s razinama posjeta jednoj stranici i nižim pretvorbama. Google Analytics je nužan za bilo koju web lokaciju, ali smatram da Page Speed ​​samo postiže višu razinu analize.

Izlaz izvješća je rangiran od prioriteta visokog do niskog i često uključuje mnogo različitih stavki. Ako razumijete LAMP postavke i radite na Apache poslužiteljima, tada možete razmisliti io mod_pagespeed modulu. Automatski izvršava mnoge od tih optimizacija na vašoj web-lokaciji kako bi smanjio vrijeme učitavanja i predmemorirao važne web-podatke (slike, ikone, skripte).

Najbolji softver za programere

Između dva najpopularnija operacijska sustava možete pronaći desetke programa. Od grafičkog softvera do uređivača izvornog koda i IDE-a, postoje mnogi resursi za koje web-programeri mogu birati. Ali ako tražite popularne prijedloge, preporučujem sljedeće naslove.

Mac OS X

Panika je softverska tvrtka koja je stvorila Coda - daleko najbolju web razvojnu aplikaciju za Mac. Imate pristup uređivaču izvornog koda, terminalu i FTP klijentu gdje možete vršiti promjene izravno na datotekama poslužitelja. Coda dodatno podržava dugi popis isticanja sintakse za jezike kao što su HTML, XML, CSS, JavaScript, PHP, SQL i još mnogo toga..

Ako ipak trebate besplatno rješenje, provjerite Komodo Edit. Softver je razvijen za Windows i Mac, open source i potpuno besplatan za preuzimanje. Uključuje istu podršku za isticanje sintakse i obilje sličnih značajki kao što je Coda (nažalost nema FTP-a). TextWrangler je još jedno besplatno rješenje koje ćete možda htjeti isprobati.

Za besplatnu FTP aplikaciju provjerite Cyberduck na Mac App Storeu. Iako osobno preferiram plaćenu alternativu kao što je Yummy FTP ili Transmit.

Microsoft Windows

Softverski paket tvrtke Adobe uvijek vam pada na pamet kada razmišljate o web dizajnu i razvoju. Korisnici sustava Windows imaju mnogo alternativa za Dreamweaver, a mnogi od njih su potpuno besplatni.

Notepad ++ je odličan primjer nekih open source Win32 softvera. Projekt je još uvijek u aktivnom razvoju i često izdaje ažuriranja (gotovo mjesečno). Volim njihovo sučelje s karticama i podršku za toliko dodatnih dodataka. Kao što sam spomenuo gore, Komodo Edit je također ponuđen za Windows XP / Vista / 7, tako da možete pokušati kao alternativu.

Web programeri u sustavu Windows nisu bez FTP klijenta. Filezilla je vjerojatno najpopularnija besplatna alternativa. Za alternative pogledajte našu besplatnu listu FTP klijenata zajedno sa sličnim alatima.

Ostali korisni Dev resursi

• 100 Osnovni alati za web razvoj
• Best Of 2011: Najbolji korisni jQuery dodatci i vodiči
• Ruby na šina Tutoriali za Web Development početnike
• 7 Uzbudljivi trendovi u web razvoju za 2011. godinu

Zaključak

Do sada je prva četvrtina 2012. počela s praskom! Već smo vidjeli nevjerojatne sadržaje koji izlaze iz dizajnera i web programera iz cijelog svijeta. Profesionalci koji grade za web imaju na raspolaganju toliko alata u usporedbi s 1-2 godina.

Nadam se da će ova velika kompilacija alata i resursa potaknuti vašu metodologiju za bolji razvoj. Volim raditi s web programerima i stalno učiti o novim projektima. Ipak, postoji samo toliko prostora za nove resurse koje možemo uključiti, tako da sam sigurno propustila nekoliko dragulja. Ako imate ideje ili prijedloge za srodne resurse za razvojne programere weba, javite nam u području za raspravu.