Tijdens de Chrome Dev Summit 2014 werd een groot aantal onderwerpen en gloednieuwe API's besproken, maar het ging niet alleen om het nieuwste en het nieuwste.
Bent u een nieuwe webontwikkelaar of een ervaren ontwikkelaar die op het punt staat om nieuwe API's te gaan verkennen? Dan is de kans groot dat u deze drie stappen volgt: leren, bouwen en herhalen.
Matt Gaunt beschrijft de voortdurende inspanningen van het Chrome Developer Platform-team om deze problemen op te lossen.
Leren
Web Fundamentals is een set use case-gedreven documentatie die een breed scala aan onderwerpen behandelt. Het hoofddoel is om ontwikkelaars van weinig tot geen kennis zo snel mogelijk te helpen bij het implementeren van best practices.
Een van de belangrijkste doelen van Web Fundamentals is ervoor te zorgen dat als je nieuw bent in een onderwerp, de begeleiding "keuzestress" zoveel mogelijk vermindert. Addy Osmani beschrijft dit perfect op Pastry Box .
Als u problemen ondervindt met de site of de inhoud ervan, of als u wilt dat Web Fundamentals een bepaald onderwerp behandelt, laat het ons dan weten door feedback te sturen op GitHub .
Bouwen
Om je te helpen een nieuw webproject op te starten, hebben we de Web Starter Kit ontwikkeld. Deze bevat alles wat je nodig hebt:
- Een solide bouwproces
- Boilerplate HTML
- Stijlgids
Het bouwproces
Voor degenen onder u die nog niet bekend zijn met buildprocessen: de eenvoudigste manier om een buildproces te zien, is door het te zien als een programma dat een set bestanden neemt, bepaalde taken erop uitvoert en nieuwe versies op een andere locatie publiceert. De taken optimaliseren de bestanden om laadtijden te verbeteren, controleren op mogelijke fouten of verwerken taken die geautomatiseerd kunnen worden.
In Web Starter Kit hebben we de volgende processen:
We verkleinen en concateneren CSS en JavaScript zodat de browser het bestand snel kan ophalen. De JavaScript wordt ook door JSHint gehaald om te controleren op best practices voor JavaScript en veelvoorkomende programmeerfouten. Afbeeldingen worden geminimaliseerd met Imagemin, wat de bestandsgrootte aanzienlijk kan verkleinen. We hebben ook een proces om de CSS voor de styleguides te creëren.
Boilerplate voor HTML voor meerdere apparaten
De eerste set HTML die u voor een nieuwe pagina schrijft, is vrij standaard. De kans is groot dat u snel een standaard HTML-bestand kunt bemachtigen dat goed werkt op verschillende apparaten en schermformaten.
In de Web Starter Kit wilden we ondersteuning toevoegen voor functies die de grens tussen het platform en uw site doen vervagen. Daarom hebben we ondersteuning toegevoegd voor het toevoegen aan het startscherm en opstartschermen voor Android, Windows Phone, iOS en Opera Coast.
Stijlgids
Het laatste onderdeel van de Web Starter Kit is de Styleguide.
Dit geeft elk nieuw project een geweldige set standaardstijlen en -componenten die stijlgedreven ontwikkeling stimuleren. Je kunt bestaande stijlen van elementen aanpassen en je eigen stijlen toevoegen.
In de volgende versie van WSK, die begin volgend jaar uitkomt, werken we hard aan het vereenvoudigen van de stijlgids en het overschakelen naar een Material Design- look en -feel. Matt liet op de Chrome Dev Summit een eerste voorbeeld zien van hoe dit eruit zou kunnen zien. Hieronder zie je een voorbeeld.
Herhalen
Zodra u uw nieuwe kennis in de praktijk gaat brengen, wilt u DevTools gebruiken om uw werk te debuggen, verbeteren en onderhouden.
Er zijn een aantal grote nieuwe functies beschikbaar voor DevTools. Matt bekijkt de volgende nieuwe functies.
Apparaatmodus
De apparaatmodus is een nieuwe sectie in DevTools waarmee u snel kunt zien hoe uw site op verschillende mobiele apparaten werkt, terwijl u de media queries in uw CSS bekijkt.
Een van de geweldige functies van de apparaatmodus is de mogelijkheid om de netwerksnelheden te beperken, zodat u de ervaring van een gebruiker op een GPRS-, EDGE-, 3G-, DSL- of wifi-verbinding kunt simuleren.
Verfprofiel
Als je ooit het tabblad Tijdlijn hebt geopend en op de opnameknop hebt geklikt, heb je waarschijnlijk wat verfgebeurtenissen in de waterval zien plaatsvinden. Normaal gesproken zou dit een zwart vak zijn, zonder dat je kunt achterhalen waarom de browser iets heeft gedaan of wat hij aan het doen was.
Met de Paint Profiler krijgt u meer informatie over wat de browser precies doet tijdens die paint.
Ongeldigheidsregistratie
DevTools geeft nu, wanneer dat mogelijk is, een reden waarom een verf- of lay-outbewerking heeft plaatsgevonden. Dit is handig voor iedereen die meer wil weten over de tijdlijn en het gedrag van de browser. Bovendien kunt u hiermee uw code optimaliseren om prestatieproblemen te voorkomen.
Vlammenkaartweergave
Dit is een heel andere manier om de informatie in de tijdlijn te bekijken. Dit maakt het veel gemakkelijker om te zien hoe taken overlappen en welk browsergedrag er is opgetreden als gevolg van andere taken.
Frameviewer
In de Vlammendiagramweergave kunt u een specifiek frame selecteren. Hierin kunt u zien welke elementen op de pagina zijn gepromoveerd naar een samengestelde laag en waarom ze zijn gepromoveerd.
Leren. Bouwen. Itereren.
Dit zijn enkele voorbeelden van de inspanningen van het Chrome-team om ontwikkelaars op weg te helpen in webontwikkeling. Bekijk dus zeker Web Fundamentals , Web Starter Kit en de nieuwe functies in Chrome DevTools .