Op de Chrome Dev Summit 2014 werd een hele reeks onderwerpen en spiksplinternieuwe API's behandeld, maar het ging niet alleen om het nieuwe en glanzende.
Als u een nieuwe webontwikkelaar bent of zelfs een ervaren ontwikkelaar die op het punt staat nieuwe API's te verkennen, is de kans groot dat u deze drie stappen volgt: leren, bouwen en herhalen.
Matt Gaunt vertelt over de voortdurende inspanningen van het Chrome Developer Platform-team om deze problemen aan te pakken.
Leren
Web Fundamentals is een set gebruikscasussen die een reeks onderwerpen bestrijken. Het kerndoel is om ontwikkelaars van weinig of geen kennis zo snel mogelijk de best practices te laten implementeren.
Een van de belangrijkste doelen van Web Fundamentals is ervoor te zorgen dat als u nieuw bent in een onderwerp, de begeleiding de ‘keuzeverlamming’ zoveel mogelijk vermindert. Addy Osmani dekt dit perfect bij Pastry Box .
Als u problemen met de site of de inhoud ervan ontdekt, of als u wilt dat Web Fundamentals een bepaald onderwerp behandelt, laat het ons dan weten door feedback te geven op GitHub .
Bouwen
Om u te helpen een nieuw webproject te starten, hebben we de Web Starter Kit gemaakt. Het heeft alles wat je nodig hebt:
- Een solide bouwproces
- Boilerplate-HTML
- Stijlgids
Het bouwproces
Voor degenen onder u die nieuw zijn bij het bouwen van processen: de eenvoudigste manier om aan een bouwproces te denken is door het te zien als een programma dat een reeks bestanden gebruikt en er bepaalde taken op uitvoert en nieuwe versies op een andere locatie uitvoert. De taken optimaliseren de bestanden om de laadtijden te verbeteren, te controleren op mogelijke fouten of taken af te handelen die kunnen worden geautomatiseerd.
In Web Starter Kit hebben we de volgende processen:
We verkleinen en voegen CSS en JavaScript samen, zodat de browser het bestand snel kan ophalen. Het JavaScript wordt ook via JSHint uitgevoerd om te controleren op best practices voor JavaScript en veelvoorkomende codeerfouten. Afbeeldingen worden verkleind met imagemin en u kunt hiermee de bestandsgrootte enorm verkleinen. We hebben ook een proces om de styleguides CSS te maken.
Boilerplate voor HTML voor meerdere apparaten
De eerste set HTML die u voor een nieuwe pagina schrijft, is behoorlijk standaard en de kans is groot dat u snel een HTML-bestand kunt bemachtigen dat goed werkt op meerdere apparaten en schermformaten.
In de Web Starter Kit wilden we ondersteuning toevoegen voor alle functies die de grenzen tussen het platform en uw site doen vervagen. Daarom hebben we ondersteuning toegevoegd voor het toevoegen aan het startscherm en splash-schermen 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 stijlgestuurde ontwikkeling stimuleren. U kunt bestaande stijlen wijzigen in elementen en uw eigen stijlen toevoegen.
In de volgende versie van WSK, die begin volgend jaar uitkomt, werken we er hard aan om de manier waarop de stijlgids in elkaar past te vereenvoudigen en over te schakelen naar de look en feel van een materiaalontwerp . Matt liet op de Chrome Dev Summit een vroege proef zien van hoe dit eruit zou kunnen zien en je kunt hieronder een voorbeeld zien.
Herhalen
Zodra u uw nieuwe kennis in de praktijk bent gaan brengen, wilt u DevTools gebruiken om uw werk te debuggen, te verbeteren en te onderhouden.
Er komen een aantal enorme nieuwe functies binnen in DevTools en Matt bekijkt de volgende nieuwe functies.
Apparaatmodus
Apparaatmodus is een nieuwe sectie in DevTools waarmee u snel kunt zien hoe uw site werkt op verschillende mobiele apparaten, terwijl u de mediaquery's in uw CSS bekijkt.
Een van de geweldige kenmerken van de Apparaatmodus is de mogelijkheid om de netwerksnelheden te verlagen, waardoor u de ervaring van een gebruiker op een GPRS-, EDGE-, 3G-, DSL- of Wifi-verbinding kunt simuleren.
Verfprofiler
Als je ooit het tabblad Tijdlijn hebt geopend en op de opnameknop hebt gedrukt, heb je waarschijnlijk een aantal verfgebeurtenissen in de waterval zien gebeuren. Normaal gesproken zou dit een zwarte doos zijn, waarbij u op geen enkele manier kunt weten waarom de browser iets heeft gedaan of wat hij doet.
Paint profiler no geeft u meer informatie over wat de browser precies doet tijdens het schilderen.
Invalidatie volgen
DevTools geeft nu wanneer mogelijk een reden waarom een verf of lay-out plaatsvond. Dit is handig voor iedereen die meer te weten komt over de tijdlijn en het browsergedrag en stelt u in staat uw code te optimaliseren om prestatieproblemen te voorkomen.
Vlamgrafiekweergave
Dit is een heel andere manier om de beschikbare informatie in de tijdlijn te bekijken. Dit maakt het veel gemakkelijker om te zien hoe taken elkaar overlappen en welk browsergedrag er is gebeurd als gevolg van andere taken.
Frame-viewer
In de Flame Chart-weergave kunt u een specifiek frame selecteren. Hierin kunt u onderzoeken welke elementen op de pagina zijn gepromoveerd naar een samengestelde laag en waarom ze zijn gepromoveerd.
Leren. Bouwen. Herhalen
Dit zijn enkele van de inspanningen van het Chrome-team om ontwikkelaars te helpen aan de slag te gaan met webontwikkeling, dus bekijk zeker Web Fundamentals , Web Starter Kit en de nieuwe functies in Chrome DevTools .