Share
Op 7 juni bracht Apple een update uit naar hun webbrowser, Safari 5. Het bevat een overvloed aan nieuwe functies voor webontwikkelaars, waaronder een snellere JavaScript-engine, betere HTML5-ondersteuning, uitbreidingsondersteuning en een geweldige Web Inspector-update. We zullen onderzoeken wat deze nieuwe functies betekenen voor webontwikkelaars.
Een goede webinspecteur is van groot belang voor de meeste webontwikkelaars. Veel mensen geven nog steeds de voorkeur aan Firebug, wat een uitbreiding is voor Firefox, maar de Webkit-inspecteur is de afgelopen jaren enorm verbeterd.
In Safari 5 is de webinspecteur verbeterd CSS-inspecteur paneel, waarmee u direct naar een regeldefinitie in het bronbestand kunt springen.
De DOM-inspecteur is veel verbeterd, waardoor u nu kenmerken aan DOM-knooppunten in uw document kunt toevoegen, knooppunten kunt verwijderen en knooppunten kunt bewerken als HTML, waarmee u de volledige tag kunt bewerken alsof het een bronbestand is.
De Bronnenpaneel is ook verbeterd, zodat u alle HTTP-omleidingen ziet, samen met volledige informatie over de koptekst, inclusief de HTTP-statuscode.
De JavaScript-inspecteur laat u nu alle breekpunten uitschakelen met een enkele klik, en als u over een element zweeft terwijl u op een breekpunt zit, kunt u de actuele objectwaarden zien van waar u zweeft. Dit is erg handig voor het opsporen van fouten!
Safari 5 heeft nu een nieuw tijdlijnpaneel, die informatie geeft over alles wat de browser doet terwijl je bladert. Dit omvat het laden van gegevens, het parseren ervan, het op het scherm leggen en het weergeven. Erg gaaf om aan de prestaties van je website of applicatie te werken.
Een ander toegevoegd paneel is de Audits paneel, die veel lijkt op de populaire YSlow- en Google Page Speed-extensies voor Firebug, suggereert manieren om de prestaties en compatibiliteit van uw site te verbeteren.
De laatste wijziging aan de Web Inspector is dat een apart paneel voor de JavaScript-console Is gemaakt. Dit is leuk omdat het de console in staat stelt om de volledige hoogte van de Web Inspector in beslag te nemen, in plaats van het kleine gedeelte dat het vroeger gebruikte. Het is echter nog steeds beschikbaar op de oude locatie, echter voor gemakkelijke toegang terwijl u naar een ander paneel kijkt. Voor meer informatie over de updates van de Web Inspector, bekijk deze post op de Webkit-blog.
Apple touts zeventien nieuwe HTML5-functies in Safari 5, en je hebt misschien gehoord van hun HTML5-showcase die ze vorige week lanceerden (het bevat echt meer CSS3 dan iets anders, maar dat lijkt ook onder HTML5 te komen!). Apple lijkt echt HTML5 te willen pushen, en Safari 5 heeft nu een score van 136 op html5test.com wat hoger is dan 113 in de vorige release. Enkele van de nieuwe HTML5-functies in Safari 5 zijn onder meer:
Bekijk de volledige lijst hieronder.
Safari 5 bevat twee nieuwe HTML5-functies voor realtime webapps, zoals Friendfeed en Twitter. WebSocket is de eerste en EventSource is de tweede. Nu dat drie van de grote browsers, Firefox, Chrome en Safari de WebSocket-specificatie hebben geïmplementeerd, wordt het schrijven van realtime webapps met behulp van zoiets als Node.js voor een backend veel meer haalbaar.
WebSocket is in wezen een tweewegs communicatiekanaal tussen uw webapp in de browser en de server.
Omdat het tweerichtingsverkeer is, zou je iets kunnen schrijven als een Twitter-client die het gebruikt, en nieuwe Twitter-berichten verschijnen automatisch als ze van de server worden gepusht, en ook nieuwe tweets omhoog duwen als ze zijn geschreven. EventSource is een unidirectioneel communicatiemechanisme waarmee de server gebeurtenissen naar de client kan verzenden, maar niet andersom. Als je meer wilt weten over EventSource, bekijk dan deze tutorial.
Omdat het met deze technologieën is geschreven, kan iemand een ontwikkelbibliotheek voor crossplatformextensies maken die werkt in Firefox (Jetpack), Chrome en Safari 5.
Er is nu uitbreidingsondersteuning in Safari en dankzij een nieuwe tool met de naam Extension Builder in het toch al bruikbare Develop-menu, kunt u uw eigen hulpmiddel schrijven. De extensies zijn geschreven met behulp van standaard webtechnologieën, waaronder HTML, CSS en JavaScript en de uitbreidings-API die door Apple wordt geleverd. Omdat het met deze technologieën is geschreven, kan iemand een ontwikkelbibliotheek voor crossplatformextensies maken die werkt in Firefox (Jetpack), Chrome en Safari 5. Allemaal gebruiken ze webtechnologieën om extensies voor hun browsers te maken. Voor beveiliging moeten alle extensies voor Safari 5 cryptografisch worden ondertekend door Apple via hun Safari Dev Center.
Later deze zomer zal Apple de Safari Extensions Gallery openen, waarmee gebruikers gemakkelijk een installatie-extensie kunnen vinden. Paniek pronkt nu al met hun extensie Code Notes, die, wanneer deze uitkomt, je toestaat annotaties aan webpagina's toe te voegen door tekstnotities rechtstreeks op de site te tekenen en te schrijven. Met de extensie kunt u uw annotaties per e-mail delen. Een heel gaaf voorbeeld van waar de Safari 5-uitbreidings-API toe in staat is.
Het zou geen complete browser-upgrade zijn als Apple hun 30% snellere JavaScript-engine niet zou aanspreken. In de SunSpider JavaScript-prestatietest rangschikt Safari zich op dezelfde manier als Google Chrome en loopt nog steeds ver voor op de nieuwste versie van Firefox. Hoewel de prestaties van JavaScript belangrijk zijn, liggen de echte knelpunten voor de prestaties van webtoepassingen niet in de onbewerkte JavaScript-taalprestaties, maar in de DOM-API, die in alle browsers notoir traag is. Ik hoop dat er in de toekomst meer aandacht zal worden besteed aan DOM-prestaties.
Hoewel het niet specifiek een webontwikkelaar is, ben ik er zeker van dat u veel artikelen zoals deze op internet leest. Safari Reader is in essentie een manier om alle destructies uit de weg te ruimen terwijl je alleen het artikel leest. Net zoals de Readability-bookmarklet herkent Safari Reader aptomatisch pagina's met een artikel erin, en presenteert een knop in de werkbalk die de tekst en afbeeldingen uit alleen de artikelsectie van de pagina haalt en ze weergeeft in een mooi leesbaar lettertype. Het is ook erg prettig dat je eenvoudig het artikel kunt e-mailen en afdrukken terwijl je naar de Reader-weergave kijkt. Ik weet zeker dat ik dit veel zal gebruiken!
Hoewel het geen grote uitgave is in termen van gebruikersfuncties, is Safari 5 een erg leuke release voor ontwikkelaars. Met veel betere HTML5-ondersteuning, verbeterde JavaScript-prestaties en een betere Web Inspector, is Safari nu mijn ontwikkelingsbrowser van keuze. En jij dan?
Accentsconagua