Web-kehittäjän resurssit Mega-Compilation

Internet kasvaa jatkuvasti ja on olemassa satoja tuhansia kollektiivisia resursseja tuleville web-kehittäjille. Online-artikkeleista, opetusohjelmista, työkaluista, oppaista, videoista voit oppia juuri mitään Webistä. Se ei ole koskaan ollut helpompaa hypätä verkossa!

Alla on koottu valtava kokoelma erittäin hyödyllisiä web-kehittäjäresursseja. Näitä ovat mm. HTML5 / CSS3: n aloittelijan materiaalit sekä monimutkaisemmat JavaScript- ja PHP-ohjelmointiteoriat. Muutama innostunut kehittäjä voi opiskella näitä kieliä ja rakentaa hurjasti suosittuja web-sovelluksia, jotka ovat samanlaisia ​​kuin Twitterissä tai Tumblrissa. Jos olet kiinnostunut hyödyllisistä resursseista nykyaikaisille web-kehittäjille, rakastat tätä luotettavien resurssien kokoamista.

Hyödyllisiä online-lehtiä

Blogging-maailma on räjähtänyt, kun satoja tuhansia uusia kirjoittajia on otettu Internetiin. Monet näistä online-blogeista keskittyvät suunnitteluun ja web-kehitykseen. Löydät paljon hyödyllisiä resursseja vain kääntämällä läpi nämä RSS-syötteet.

Riippuen siitä, minkä tyyppistä kieltä käytät, se määrittää kiinnostuksesi johonkin näistä blogeista. Voimme keskittyä web-kehitykseen ja olettaa, että tämä sisältää kaikki etutyö (HTML5 / CSS3 / JavaScript) sekä yksinkertaiset back-end-skriptit (PHP / RoR / Python / SQL). Olen ottanut vapaasti rakentaa yhden luettelon suosituimmista dev-blogeista, jotka keskittyvät sekä etu- että loppukoodiin.

• Nettuts+
• 24 tapaa
• Webmonkey
• Koodaus
• Webitect
• Tarkastele elementtiä
• Kissat Koodi
• Line25 Web-suunnittelun blogi

Muita asioita on varmasti harkittava. Suosittelen lyödä Googlea etsimällä opetusohjelmia ja artikkeleita haluamastasi dev-kielestä. Tämän jälkeen voit käyttää RSS-syötteenlukijaa, kuten Google Readeria, ja voit määrittää luettelot kaikista näiden aikakauslehtien uusimmista artikkeleista. Tämä on hyvä tapa aloittaa työpäiväsi tai jopa tappaa vähän aikaa chugging opetusohjelmien kautta.

jQuery Plugins Galore

Sekä jQuery core -kirjasto että jQuery Mobile ovat saaneet paljon vetoa viime vuonna. Nämä avoimen lähdekoodin kirjastot pyrkivät suunnittelemaan etukäyttökokemuksen, joka on täynnä runsaasti animaatioita ja helppokäyttöisiä Ajax-ominaisuuksia, vaikka mobiilikirjasto ei ole juuri saanut kiinni vanhemmistaan ​​lisäosien ja kolmannen osapuolen koodin suhteen.

Samoin uutta upeaa tuotetta bgStretcher voidaan käyttää dynaamisena taustakomentona. Se vie sarjan kuvia ja jonkin verran suurennuksia käyttäjän näytön resoluutioon nähden. Tutustu upeaan demoon nähdäksesi tämän toiminnassa. Molemmat pluginsit ovat vapaasti ladattavissa ja käyttäytyvät yhtä yksinkertaisena esimerkkinä mahtavasta kolmannen osapuolen koodista, joka on rakennettu jQueryn kautta. Näiden resurssien käsittely säästää aikaa projektityöhön, joten sinun ei tarvitse keksiä pyörää uudelleen.

Yleensä suosittelen myös selaamaan sivustojen Ajax Blenderin ja Dynamic Drive -sovelluksen JavaScript-koodinpätkät / laajennukset. Kirjasto ei ole valtava, mutta se kasvaa jatkuvasti uusilta käyttäjiltä lähetetyiltä sisällöiltä. Sivustot sisältävät paitsi jQuery-laajennuksia myös MooTools- ja Prototype-kirjastoja.

Jos päätät työskennellä jQuery Mobile -kirjaston kanssa, haluan suositella toista työkalua jqmPhp. Se on dynaaminen PHP-luokka, jossa voit viitata yksinkertaisiin toimintoihin HTML5-koodin ulostulolinjoihin ja riveihin, jotka toimivat jQuery Mobilen kautta. Se on rehellisesti helpoin tapa PHP-kuoren ympärille rakennettujen dynaamisten mobiilisovellusten prototyyppiin. Sivuston blogissa on runsaasti esimerkkejä viittauksista.

Rakennus HTML5: ssä ja CSS3: ssa

Kun puhumme etukäteen suunnitellusta web-kehityksestä, on yleensä kyse tehokkuudesta. Sinulla ei ole samat ongelmat verkkosivuston rakentamisessa HTML / CSS: ssä kuin koodattaessa back-end Ruby -sovellusta. HTML: ssä ei ole todellista logiikkaa tai virheenkäsittelyä - se on lähinnä siitä, kuinka nopeasti voit suunnitella ulkoasun suunnittelun oikein kaikissa selaimissa.

Ensinnäkin minun on aloitettava suosittelemalla HTML5-kattilalevyä. Tämä on paljain luuton malli, joka sisältää kaikki “standardi” HTML5-verkkosivun elementit yhdessä paketissa. Tähän sisältyy oletusarvolomake, JavaScript, favicon, Applen kosketuskuvakkeet ja paljon muita herkkuja. Se on 100% ilmainen projekti ja voit jopa osallistua heidän Github-repoonsa. Tämä on pakollinen resurssi kaikille kehittäjille ennen vakavan web-projektin aloittamista.

Nyt, jos työskentelet pois tästä kattilasta, voit lisätä oman mukautetun koodisi. Suosittelen kuitenkin ottamaan seuraavan askeleen ja rakentamaan sellaisen sovelluksen kuin Initializr. Tämä luo tyypillisen verkkosivuston ulkoasun ja mahdollistaa jopa sen, että voit muokata, mitkä elementit sisältyvät pakettipakettisi sisälle. Google Analytics-koodi, minifioitu jQuery-, .htaccess- tai web.config-tiedosto, sekä noin tusina muita vaihtoehtoja ovat käytettävissä.

CSS-suunnittelijat

Nyt kun olemme tarkastelleet hieman HTML5-koodausta, meidän pitäisi myös harkita joitakin suosittuja CSS3-kehyksiä. Nämä ovat avoimempia kuin HTML-mallit, koska voit tehdä paljon enemmän CSS: n kanssa. Suunnittelijat ymmärtävät myös vaikeudet standardien mukaisen koodin rakentamisessa kaikille nykyisille selaimille.

Golden Grid -järjestelmä on fantastinen kehyksenä reagoiville web-malleille. Nämä asettelut mukautuvat mobiilinäyttöihin ja taittuvat sisäänpäin selaimen ikkunan kokoa muutettaessa. Se auttaa myös suunnittelemaan kunkin sarakkeen alueen leveyttä ja kokoa. Blueprint on toinen kätevä CSS-kehys, jonka kannattaa tarkistaa. Se on hienoa mukautettujen verkkosivustojen rakentamiseen ja tarjoaa upeita dokumentteja.

CSS-työkalujen osalta CSS3 PIE: n on oltava kolmen parhaan suosikkini. Se on yksinkertainen web-sovellus, joka tuottaa oikean koodin CSS3-tehosteiden tueksi Internet Explorer 6-9: ssä. Voit luoda dynaamisia lineaarisia gradientteja, pyöristettyjä kulmia ja laatikon varjoja muokattavissa olevilla asetuksilla. Sivustolla on IE-esimerkkejä, jos haluat myös tarkistaa ne.

Kehittäjät haluavat myös vähentää niiden kokoa tuotantoon. Clean CSS on yksi resurssi, jossa voit valita useita vaihtoehtoja koodin yksinkertaistamiseksi ja tiedostokoon pienentämiseksi. Toinen vaihtoehtoinen Code Beautifier ei tarjoa yhtä monta vaihtoehtoa, mutta se voi olla helpompi käyttää.

Teemojen mukauttaminen WordPressin avulla

WordPress-julkaisu on tämän aikakauden suosituin CMS. Olemme nähneet mahdollisesti miljoonia uusia blogeja ja verkkosivustoja, jotka toimivat tämän upean sisällönhallintaratkaisun avulla. Ja sellaisina WordPress-kehittäjillä on suuri kysyntä mukautettujen widgetien ja verkkosivujen teemojen rakentamiseen.

Constellation-teeman uusi julkaisu antaa WordPress-kehittäjille helpomman lähtöpisteen kuin oletusmallit. Uusi kaksikymmentätoista -teema on hyvin tyylikäs ja minimalistinen, mutta se ei voi kilpailla koko HTML5Boilerplate-levyn päälle rakennetun teemamallin kanssa. Constellation WP -teema sisältää jopa median kyselyitä eri laitteiden resoluutioille, kuten iPhone- ja iPad-tableteille.

Wonderflux on toinen WordPress-teemamalli, joka ei ole aivan yhtä pitkälle kehityksessä. Se julkaistiin äskettäin beta-versiosta v1.0: een yhdessä joidenkin online-asiakirjojen kanssa. Tämä teema on hieman monimutkaisempi kuin Constellation, joka antaa sinulle enemmän hallintaa ulkoasun suhteen. Kehittäjät ovat sisällyttäneet mukautetut PHP-koukut, toiminnot ja suodattimet, jotta WordPress-sivustosi olisi dynaamisempi.

Vakavien WP-kehittäjien tulisi tarkistaa molemmat ratkaisut, jotta voidaan nähdä, auttaako kumpikaan tulevaa projektityötä.

Web-kehittäjän freebien löytäminen

PSD: hen ja grafiikkaan verrattuna web-kehitysyhteisö tuntuu vähän puuttuvalta freebie-gallerioista. Voit aina löytää hyviä komentosarjoja Githubissa, mutta sinun täytyy usein etsiä ja testata niitä itse.

On vaikea löytää sivustoja, jotka tarjoavat ilmaisia ​​latauksia ja demoja sekä komentosarjojen esimerkkejä. Suosikkini uusi resurssi on CodeVisually, joka luetteloi käyttäjän lähettämät kehitystyökalut, laajennukset, kirjastot ja muut siistit asiat. Asettelu on asetettu kuten galleria, jossa jokaisella sivulla on linkki tuotteeseen, demo-kuvakaappaukseen ja muutamiin yksityiskohtiin.

Galleria sisältää satoja esimerkkejä HTML / HTML5-mallikoodista, CSS3-kirjastoista ja varmasti runsaasti jQuery-tavaraa. Olen myös havainnut, että tämä on loistava sivusto, jossa voit lähettää oman avoimen lähdekoodin yleisölle. Nimesi on sidottu hakemukseen, ja voit sijoittaa linkkejä omaan verkkosivustoon, jossa käyttäjät voivat käyttää koodia.

Web-sovellusliittymät

Hyvin suosittu trendi modernissa web-kehityksessä on API-sovellusten rakentaminen kolmannen osapuolen sovellukseksi. Useimmat mainstream-sosiaalisen verkostoitumisen tuotemerkit sisältävät toimivan API- ja dokumentointisegmentin suoraan verkkosivuillaan. Lisäksi Githubissa on tonnia ilmaisia ​​kääreitä, jotka on kirjoitettu kaikilla tärkeimmillä back-end-ohjelmointikielillä.

Kehittäjien tulisi tuntea olonsa mukavaksi tämäntyyppisten koodikirjastojen kanssa, koska ne kasvavat kysynnässä. OAuth-järjestelmän avulla voit nopeasti rakentaa käyttäjäpohjan useista näistä sovelluksista. Olen luetellut vain muutamia viittauksia suosittuihin online-sovellusliittymiin ja niiden täydelliseen dokumentaatioon.

• Twitter-sovellusliittymä
• CloudApp API
• Instagr.am API
• eBay API
• Foursquare API
• Dribbble API
• Github API

Hyödynnä näitä resursseja uusiin projekteihin aina kun mahdollista. Web on yhä enemmän yhteydessä ja käyttäjät ovat aina flocking seuraavaan isoon sovellukseen. Voit rekrytoida tuhansia omistettuja jäseniä sovellukseen, kun kävijöiden ei tarvitse rekisteröidä uutta tiliä, vaan voit rekisteröityä suoraan Twitterin tai Facebookin kautta.

Kysymyksiä ja vastauksia

Edullisin kokemus kehittäjien välillä on esittää kysymyksiä ja oppia uusia tekniikoita. Kehittäjäyhteisö on aina niin avulias uusille tulokkaille ja haluaa tarjota asiantuntemustaan ​​monissa tilanteissa. Jos sinulla on kamppailuja tai tiettyjä kysymyksiä projektista, etsi Googlesta vastaava web-kehittäjän foorumi.

Minun on henkilökohtaisesti suositeltavaa liittyä Stack Exchange -yhteisöön, jos et ole jo jäsen. Tämä sisältää hämmästyttäviä sivustoja, kuten Stack Overflow ja Super User, jossa voit saada ohjelmointia periaatteessa mitä tahansa. Yhteisön jäsenet tuntevat kaikki tärkeimmät web-kielet, mukaan lukien jQuery ja pienemmät PHP-luokat.

Hieno temppu, jonka sain tietää, on etsiä Googlesta ja nähdä, onko ongelma jo ratkaistu. Syötä muutamat avainsanat Google-hakuun ja lisää oheisliite site: stackoverflow.com. Kaikki palautetut hakutulokset ovat kysymyksiä Stack Overflow -arkistoista - jos olet onnekas, saatat löytää juuri ratkaisun nykyiseen ongelmaan.

Sivunopeuden testaaminen verkossa

Tämä Google-kehittäjien julkaisema uusi työkalu on todella ollut vaikuttava. Sovellus Page Speed ​​Online analysoi sivustosi sisältöä ja luo analyysiraportin nopeuksistasi. Tämä sisältää mahdolliset ratkaisut kuormitusaikojen lyhentämiseen ja kävijöiden pitämiseen sivustolla pidempään.

Se voi myös auttaa sinua määrittämään palautumisnopeuksien ja pienempien muunnosten aiheuttamat ongelmat. Google Analytics on mikä tahansa verkkosivusto, mutta mielestäni Page Speed ​​saavuttaa vain korkeamman analyysitason.

Raportin ulostulo luokitellaan korkealle alemmalle prioriteetille ja siihen sisältyy usein monia eri kohteita. Jos ymmärrät LAMP-asetukset ja työskentelet Apache-palvelimissa, voit harkita myös mod_pagespeed-moduulia. Se suorittaa automaattisesti useita näistä optimointeista sivustossasi, jotta voit vähentää latausaikoja ja välimuistia tärkeitä Web-tietoja (kuvia, kuvakkeita, komentosarjoja).

Paras kehittäjän ohjelmisto

Kahden suosituimman käyttöjärjestelmän välillä on kymmeniä ohjelmia. Grafiikkaohjelmistosta lähdekoodin muokkaajiin ja IDE: hen Web-kehittäjät voivat valita monia resursseja. Mutta jos etsit suosittuja ehdotuksia, suosittelen seuraavia nimikkeitä.

Mac-käyttöjärjestelmän kymmenes versio

Panic on ohjelmistoyritys, joka loi Codan - ylivoimaisesti Macin parhaimman web-kehitysohjelman. Sinulla on pääsy lähdekoodin editoriin, päätelaitteeseen ja FTP-asiakaskoneeseen, jossa voit tehdä muutoksia suoraan palvelimen tiedostoihin. Coda tukee lisäksi pitkää luetteloa syntaksi korostamisesta sellaisilla kielillä kuin HTML, XML, CSS, JavaScript, PHP, SQL ja paljon muuta.

Jos kuitenkin tarvitset ilmaisen ratkaisun, kannattaa tutustua Komodon muokkaukseen. Ohjelmisto on kehitetty Windowsille ja Macille, avoimen lähdekoodin ja täysin ladattavissa. Se sisältää kaiken saman tuen syntaksi korostamiseen ja paljon samankaltaisia ​​ominaisuuksia kuin Coda (ei FTP valitettavasti). TextWrangler on toinen ilmainen ratkaisu, jonka haluat ehkä kokeilla, myös yksinkertainen tekstieditori.

Ilmainen FTP-sovellus tarkistaa Cyberduckin Mac App Storesta. Vaikka henkilökohtaisesti haluan maksaa maksullisen vaihtoehdon, kuten Yummy FTP tai Transmit.

Microsoft Windows

Adobe-ohjelmistopaketti tulee aina mieleen, kun ajattelet web-suunnittelua ja kehitystä. Windows-käyttäjillä on runsaasti vaihtoehtoja Dreamweaverille, ja monet niistä ovat täysin ilmaisia.

Notepad ++ on erinomainen esimerkki avoimen lähdekoodin Win32-ohjelmistosta. Projekti on edelleen aktiivisessa kehityksessä ja julkaisee päivityksiä usein (lähes kuukausittain). Rakastan niiden välilehtiä ja tukea niin monia muita lisäosia. Kuten edellä mainitsin, Komodo Edit tarjotaan myös Windows XP / Vista / 7: lle, joten voit kokeilla tätä vaihtoehtona.

Windows-kehittäjät eivät ole myöskään ilman FTP-asiakasta. Filezilla on luultavasti suosituin vapaa vaihtoehto. Vaihtoehtoja varten tutustu vapaiden FTP-asiakkaiden luetteloon samankaltaisten työkalujen kanssa.

Muut hyödylliset Dev-resurssit

• 100 olennaista Web-kehitystyökalua
• Best Of 2011: Parhaat käyttökelpoiset jQuery-laajennukset ja opetusohjelmat
• Ruby on Rails Tutorials Web-kehitystyön aloittelijoille
• 7 Jännittävät Web-kehityssuunnat vuodelle 2011

johtopäätös

Toistaiseksi vuoden 2012 ensimmäisellä neljänneksellä on alkanut paukku! Olemme jo nähneet hämmästyttävää sisältöä, joka valuu suunnittelijoista ja web-kehittäjistä eri puolilta maailmaa. Verkossa työskentelevien ammattilaisten käytössä on niin paljon työkaluja kuin 1-2 vuotta sitten.

Toivon, että tämä valtava työkalujen ja resurssien kokoelma nostaa metodologianne parempaan kehitykseen. Rakastan työskentelyä web-kehittäjien kanssa ja uusien projektien oppimista koko ajan. Kuitenkin on vain niin paljon tilaa uusille resursseille, joita voimme sisällyttää, joten olen varmasti jäänyt muutamasta jalokivistä. Jos sinulla on ideoita tai ehdotuksia web-kehittäjien resursseista, ilmoita asiasta keskustelualueella.