Web Developer Resources Een mega-compilatie

Het internet groeit voortdurend en er zijn honderdduizenden collectieve bronnen voor aanstaande webontwikkelaars. Van online artikelen, tutorials, hulpmiddelen, handleidingen tot video's, je kunt zo ongeveer alles op internet leren. Het is nog nooit zo eenvoudig geweest om online te springen!

Hieronder heb ik een enorme verzameling van een aantal zeer nuttige bronnen voor webontwikkelaars samengesteld. Deze omvatten beginnersmateriaal voor HTML5 / CSS3 samen met meer gecompliceerde theorieën voor JavaScript- en PHP-programmering. Het is mogelijk voor een paar enthousiaste ontwikkelaars om deze talen te bestuderen en razend populaire webtoepassingen te bouwen die vergelijkbaar zijn met Twitter of Tumblr. Als u interesse hebt in nuttige items voor moderne webontwikkelaars, zult u dol zijn op deze verzameling betrouwbare bronnen.

Behulpzame online tijdschriften

De blogwereld is ontploft met honderdduizenden nieuwe schrijvers die internetten. Veel van deze online blogs zijn gericht op ontwerp en webontwikkeling. U kunt veel nuttige bronnen vinden door deze RSS-feeds gewoon door te bladeren.

Afhankelijk van het type taal dat je codeert, bepaalt het je interesse in een van deze blogs. We kunnen ons concentreren op webontwikkeling en ervan uitgaan dat dit alle front-end werk (HTML5 / CSS3 / JavaScript) omvat, evenals eenvoudige back-end scripts (PHP / RoR / Python / SQL). Ik heb de vrijheid genomen om een ​​enkele lijst samen te stellen van de meest populaire dev-blogs die zich richten op zowel de front-end als de back-end code.

• Nettuts+
• 24 manieren
• Webmonkey
• Smashing Coding
• Webitect
• Inspecteer Element
• Cats Who Code
• Line25 Web Design Blog

Er zijn zeker veel andere te overwegen. Ik raad aan om Google te raken op zoek naar zelfstudies en artikelen over de taal van je voorkeur. Vervolgens kunt u met behulp van een RSS-feed aggregator zoals Google Reader lijsten van alle nieuwste artikelen uit deze tijdschriften instellen. Dit is een geweldige manier om je werkdag te beginnen of zelfs een beetje tijd te doden door tutorials te doorzoeken.

jQuery Plug-ins Galore

Zowel de kernbibliotheek van jQuery als jQuery Mobile hebben het afgelopen jaar veel grip opgedaan. Deze open source-bibliotheken werken aan het ontwerpen van een front-end-ervaring vol rijke animaties en gemakkelijk te implementeren Ajax-functies, hoewel de mobiele bibliotheek zijn ouder nog niet helemaal heeft ingehaald in termen van plug-ins en code van derden..

Evenzo kan een ander fantastisch product bgStretcher worden gebruikt als een dynamisch achtergrondscript. Er zijn een aantal afbeeldingen en een aantal schaling van de formaten nodig, in verhouding tot de schermresolutie van uw gebruiker. Bekijk de prachtige demo om dit in actie te zien. Beide plug-ins kunnen gratis worden gedownload en gedragen zich als eenvoudige voorbeelden van de geweldige code van derden die is gebouwd op jQuery. Als u met deze bronnen werkt, bespaart u veel tijd aan projectwerk, zodat u het wiel niet opnieuw hoeft uit te vinden.

Over het algemeen raad ik ook aan om de websites Ajax Blender en Dynamic Drive te bekijken voor JavaScript-codefragmenten / plug-ins. De bibliotheek is niet enorm, maar groeit voortdurend van nieuwe door gebruikers ingezonden inhoud. De sites bevatten niet alleen jQuery-plug-ins, maar ook MooTools- en Prototype-bibliotheken.

Als je uiteindelijk met de jQuery Mobile-bibliotheek werkt, wil ik een andere tool jqmPhp aanbevelen. Het is een dynamische PHP-klasse waarin u kunt verwijzen naar eenvoudige functies om lijnen en regels met HTML5-code uit te voeren die worden aangedreven via jQuery Mobile. Het is eerlijk gezegd de gemakkelijkste manier om dynamische mobiele apps te prototypen die rondom een ​​PHP-shell zijn gebouwd. Het blog van de site bevat tal van voorbeeldreferenties om door te graven.

Bouwen in HTML5 en CSS3

Wanneer we het hebben over front-end webontwikkeling, draait het meestal om efficiëntie. U hebt niet dezelfde problemen bij het bouwen van een website in HTML / CSS als bij het coderen van een Ruby-back-endtoepassing. Er is geen echte logica of foutafhandeling in HTML - het gaat vooral om hoe snel je een lay-outontwerp in alle browsers op de juiste manier kunt schalen.

Eerst moet ik beginnen met het aanbevelen van de HTML5 Boilerplate. Dit is een gestripte bare-bones sjabloon die alle bevat “standaard-” HTML5-webpagina-elementen in één pakket. Dit omvat een standaard stylesheet, JavaScript, favicon, Apple touch-pictogrammen en tal van andere goodies. Het is een 100% gratis project en je kunt zelfs bijdragen aan hun Github-repo. Dit is een onmisbaar hulpmiddel voor alle ontwikkelaars voordat ze kunnen beginnen aan een serieus webproject.

Als u nu aan deze boilerplate werkt, heeft u de mogelijkheid om al uw eigen aangepaste code toe te voegen. Maar ik stel voor de volgende stap te nemen en te bouwen met een app zoals Initializr. Dit genereert een typische website-indeling en laat u zelfs toe om aan te passen welke elementen in uw boilerplate-pakket zijn opgenomen. Google Analytics-code, minified jQuery, .htaccess of web.config-bestanden, plus ongeveer een dozijn andere opties zijn beschikbaar.

CSS-ontwerpers

Nu we een beetje naar HTML5-codering hebben gekeken, moeten we ook enkele van de populaire CSS3-frameworks overwegen. Dit zijn meer open dan HTML-sjablonen, omdat je zoveel meer kunt doen met CSS. Ontwerpers zullen zich ook realiseren dat het moeilijk is om voor alle moderne webbrowsers normen-conforme code te bouwen.

Het Golden Grid-systeem is fantastisch als kader voor responsieve webontwerpen. Deze lay-outs worden aangepast aan mobiele schermen en vouwen naar binnen terwijl u het formaat van het browservenster aanpast. Het helpt ook bij het plannen van de breedte en grootte van elk kolomgebied. Blueprint is een ander handig CSS-framework dat u zou moeten controleren. Het is geweldig voor het bouwen van aangepaste websites en biedt fantastische documentatie.

Als het op CSS-tools aankomt, moet CSS3 PIE echter in mijn top drie favorieten staan. Het is een eenvoudige webapp die de juiste code uitvoert om CSS3-effecten te ondersteunen die worden ondersteund in Internet Explorer 6-9. U kunt dynamische lineaire verlopen, afgeronde hoeken en doosschaduwen maken met aanpasbare instellingen. De site heeft IE-voorbeelden als u ze ook wilt bekijken.

Ontwikkelaars zullen ook hun bestandsgroottes voor productie willen afslanken. Schone CSS is een hulpmiddel waarmee u uit tal van opties kunt kiezen om uw code te vereenvoudigen en de bestandsgrootte te verminderen. Een andere alternatieve code-beautifier biedt niet zoveel opties, maar is misschien gemakkelijker te gebruiken.

Thema's aanpassen met WordPress

Het publiceren van WordPress is in dit tijdperk gemakkelijk het populairste CMS. We hebben mogelijk miljoenen nieuwe blogs en websites allemaal gezien die worden aangedreven door deze fantastische oplossing voor contentbeheer. En als zodanig zijn er veel vraag naar WordPress-ontwikkelaars voor het maken van aangepaste widgets en websitethema's.

De nieuwe release van Constellation Theme geeft WordPress-ontwikkelaars een eenvoudiger startpunt dan de standaardsjablonen. Het nieuwe Twenty Eleven-thema is zeer sluw en minimalistisch, maar het kan niet concurreren met een volledige themasjabloon die bovenop HTML5Boilerplate is gebouwd. Het Constellation WP-thema bevat zelfs mediaquery's voor verschillende apparaatresoluties, zoals iPhone- en iPad-tablets.

Wonderflux is nog een WordPress-themasjabloon die niet zo lang in ontwikkeling is. Het is net onlangs uit de bèta uitgebracht in v1.0 samen met wat online documentatie. Dit thema is een beetje ingewikkelder dan Constellation, waardoor je meer controle hebt over de lay-out. De ontwikkelaars hebben aangepaste PHP-hooks, -functies en -filters toegevoegd om uw WordPress-site dynamischer te maken.

Serieuze WP-ontwikkelaars moeten beide oplossingen bekijken om te zien of een van beide zou helpen bij toekomstige projectwerkzaamheden.

Zoeken naar ontwikkelaars van webontwikkelaars

Vergeleken met PSD's en grafische afbeeldingen lijkt de webontwikkelingsgemeenschap een beetje te ontbreken in freebiegalerijen. Je kunt altijd geweldige scripts vinden op Github, maar je zult vaak zelf moeten zoeken en testen.

Het is moeilijk om websites te vinden die gratis downloads en demo's bieden, evenals scriptvoorbeelden. Mijn favoriete nieuwe bron is CodeVisually, die door gebruikers ingediende ontwikkeltools, plug-ins, bibliotheken en andere nette dingen catalogiseert. De lay-out is ingesteld als een galerij waarbij elke pagina een link naar het product, een demo-screenshot en enkele verdere details bevat.

De galerij bevat honderden voorbeelden van HTML / HTML5-sjablooncode, CSS3-bibliotheken en zeker ook veel jQuery-spullen. Ik heb ook ontdekt dat dit een geweldige website is om je eigen open source-code in te dienen voor het publiek. Uw naam is gekoppeld aan de inzending, plus u kunt links naar uw eigen website plaatsen waar gebruikers toegang tot de code kunnen krijgen.

Web Application API's

Een zeer populaire trend in moderne webontwikkeling is het opbouwen van API's als app van derden. De meeste van de reguliere merken voor sociale netwerken hebben een werkende API en een documentatiesegment rechtstreeks op hun website. Bovendien zijn er talloze gratis wrapper-klassen op Github geschreven in alle belangrijke back-end programmeertalen.

Ontwikkelaars moeten zich op hun gemak voelen bij het werken met dit soort codebibliotheken naarmate er veel vraag naar is. Met behulp van het OAuth-systeem kunt u vanuit veel van deze toepassingen snel een gebruikersbasis opbouwen. Ik heb hieronder slechts een paar verwijzingen naar populaire online API's en hun volledige documentatie vermeld.

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

Maak waar mogelijk gebruik van deze bronnen voor nieuwe projecten. Het web wordt steeds meer verbonden en gebruikers zijn altijd massaal op weg naar de volgende grote app. Je kunt duizenden meer toegewijde leden aan je app rekruteren wanneer je bezoekers niet een heel nieuw account hoeven te registreren en zich in plaats daarvan rechtstreeks kunnen aanmelden via Twitter of Facebook.

V & A-bronnen

De meest gunstige ervaring tussen ontwikkelaars is het stellen van vragen en het aanleren van nieuwe technieken. De ontwikkelaarscommunity is altijd zo behulpzaam voor nieuwkomers en bereid om hun expertise in veel situaties aan te bieden. Als u problemen of specifieke vragen over een project heeft, zoek dan via Google naar een gerelateerd forum voor webontwikkelaars.

Ik raad persoonlijk aan lid te worden van de Stack Exchange-community als je nog geen lid bent. Dit omvat verbazingwekkende websites zoals Stack Overflow en Super User, waar je programmeerhulp kunt krijgen op vrijwel alles. Communityleden hebben kennis van alle belangrijke webtalen, waaronder jQuery en kleinere PHP-klassen.

Een leuke truc die ik heb geleerd, is door Google te zoeken en te kijken of uw probleem al is opgelost. Voer een paar trefwoorden in uw Google-zoekopdracht in en voeg het achtervoegsel toe website: stackoverflow.com. Alle teruggestuurde zoekresultaten zijn vragen uit Stack Overflow-archieven. Als u geluk heeft, vindt u misschien precies de oplossing voor uw huidige probleem.

Online paginasnelheid testen

Deze nieuwe tool van Google Developers is echt indrukwekkend geweest. De app Page Speed ​​Online analyseert uw website-inhoud en genereert een analyserapport over uw snelheden. Dit omvat mogelijke oplossingen om laadtijden te verminderen en uw bezoekers langer op de site te houden.

Het kan u ook helpen bij het vaststellen van problemen met bouncepercentages en lagere conversies. Google Analytics is een must voor elke website, maar ik denk dat de paginasnelheid net een hoger niveau van analyse bereikt.

De uitvoer van het rapport wordt gerangschikt van hoge tot lage prioriteit en bevat vaak veel verschillende items. Als u LAMP-instellingen begrijpt en op Apache-servers werkt, kunt u ook de mod_pagespeed-module overwegen. Het voert automatisch veel van deze optimalisaties uit op uw website om de laadtijden te verkorten en belangrijke webgegevens (afbeeldingen, pictogrammen, scripts) in de cache op te slaan.

De beste software voor ontwikkelaars

Tussen de twee meest populaire besturingssystemen vindt u tientallen programma's. Van grafische software tot broncode-editors en IDE's, er zijn veel bronnen waaruit webontwikkelaars kunnen kiezen. Maar als je populaire suggesties zoekt, raad ik de volgende titels aan.

Mac OS X

Panic is een softwarebedrijf dat Coda heeft gemaakt - veruit de beste app voor webontwikkeling voor Mac. U hebt toegang tot een broncodebewerker, terminal en FTP-client waar u rechtstreeks wijzigingen kunt aanbrengen in de serverbestanden. Coda ondersteunt bovendien een lange lijst met syntax-markeringen voor talen zoals HTML, XML, CSS, JavaScript, PHP, SQL en nog veel meer.

Als je echter een gratis oplossing nodig hebt, bekijk dan Komodo Edit. De software is ontwikkeld voor Windows en Mac, open source en volledig gratis te downloaden. Het bevat dezelfde ondersteuning voor syntax highlighting en veel vergelijkbare functies als Coda (helaas geen FTP). TextWrangler is een andere gratis oplossing die u misschien wilt proberen, ook slechts een eenvoudige teksteditor.

Ga voor een gratis FTP-toepassing naar Cyberduck in de Mac App Store. Hoewel ik persoonlijk een betaald alternatief prefereer, zoals Yummy FTP of Transmit.

Microsoft Windows

De Adobe-softwaresuite komt altijd voor de geest als u denkt aan webontwerp en -ontwikkeling. Windows-gebruikers hebben genoeg alternatieven voor Dreamweaver en velen van hen zijn helemaal gratis.

Notepad ++ is een goed voorbeeld van een aantal opensource Win32-software. Het project is nog steeds in actieve ontwikkeling en releases worden regelmatig (bijna maandelijks) uitgebracht. Ik ben dol op hun interface met tabbladen en ondersteuning voor zoveel extra plug-ins. Zoals ik hierboven al zei, wordt Komodo Edit ook aangeboden voor Windows XP / Vista / 7, dus je kunt dat als alternatief proberen.

Webontwikkelaars op Windows zijn ook niet zonder een FTP-client. Filezilla is waarschijnlijk het populairste gratis alternatief. Bekijk onze gratis lijst met FTP-clients samen met vergelijkbare tools voor alternatieven.

Andere nuttige Dev-bronnen

• 100 essentiële webontwikkelingstools
• Beste van 2011: Beste nuttige jQuery-plug-ins en zelfstudies
• Ruby on Rails-handleidingen voor beginners in webontwikkeling
• 7 Spannende webontwikkelingstrends voor 2011

Conclusie

Tot nu toe is het eerste kwartaal van 2012 met een knal begonnen! We hebben al geweldige content gezien die door ontwerpers en webontwikkelaars van over de hele wereld is uitgestort. Professionals die bouwen voor het web hebben zoveel tools tot hun beschikking vergeleken met 1-2 jaar geleden.

Ik hoop dat deze enorme verzameling gereedschappen en bronnen je methodologie zullen pushen voor een betere ontwikkeling. Ik werk graag met webontwikkelaars en leer steeds over nieuwe projecten. Toch is er alleen zoveel ruimte voor nieuwe bronnen die we kunnen omvatten, dus ik ben vast een paar edelstenen gemist. Als u ideeën of suggesties voor verwante bronnen voor webontwikkelaars heeft, laat het ons dan weten op het gebied van de nabespreking.