Er wordt al tijden veel over de nieuwe HTML 5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML 5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML 5 moet kiezen voor een nieuwe applicatie?
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggePureplexity
Deze presentatie werd gegeven bij de sessie die we gaven voor de 2de en 3de jaars studenten van het graduaat informatica aan het IVO te Brugge. In deze presentatie behandelden we 3 grote onderwerpen: HTML 5, ASP.NET MVC en Windows Azure.
Techdays 2013 NL - Serious Request met Windows AzureMichaël Hompus
Bijna iedereen in Nederland kent de Serious Request actie van 3FM en het Nederlands Rode Kruis. Wat weinig mensen weten is dat de afgelopen 2 edities voor een belangrijk deel op Windows Azure draaide. In deze presentatie wordt de architectuur achter de oplossing toegelicht, welke Azure componenten er gebruikt zijn. Wat we geleerd hebben van de eerste editie, wat we daarom aanpast hebben voor de tweede editie, en wat er nog meer mogelijk was omdat het Windows Azure platform zich in de tussentijd ook verder ontwikkeld heeft. Ook worden er veel ervaringen gedeeld waar je als ontwikkelaar tegen aan kan lopen bij het opzetten van een Windows Azure oplossing.
Er wordt al tijden veel over de nieuwe HTML 5 standaard gesproken. Maar wanneer kan je als ontwikkelaar nu eigenlijk met HTML 5 aan de slag? En als je het kan gaan gebruiken wat heeft het eigenlijk allemaal te bieden? Hoe zit het met al die oudere browsers die mensen misschien nog gebruiken? En dan hebben we natuurlijk nog de vraag wat ik moet doen als ik tussen Silverlight en HTML 5 moet kiezen voor een nieuwe applicatie?
HTML 5, ASP.NET MVC & Windows Azure sessie voor Ivo BruggePureplexity
Deze presentatie werd gegeven bij de sessie die we gaven voor de 2de en 3de jaars studenten van het graduaat informatica aan het IVO te Brugge. In deze presentatie behandelden we 3 grote onderwerpen: HTML 5, ASP.NET MVC en Windows Azure.
Techdays 2013 NL - Serious Request met Windows AzureMichaël Hompus
Bijna iedereen in Nederland kent de Serious Request actie van 3FM en het Nederlands Rode Kruis. Wat weinig mensen weten is dat de afgelopen 2 edities voor een belangrijk deel op Windows Azure draaide. In deze presentatie wordt de architectuur achter de oplossing toegelicht, welke Azure componenten er gebruikt zijn. Wat we geleerd hebben van de eerste editie, wat we daarom aanpast hebben voor de tweede editie, en wat er nog meer mogelijk was omdat het Windows Azure platform zich in de tussentijd ook verder ontwikkeld heeft. Ook worden er veel ervaringen gedeeld waar je als ontwikkelaar tegen aan kan lopen bij het opzetten van een Windows Azure oplossing.
Presentation for Summerschool Webapps. Covers HTML5 Web Apps and Hybrids Apps. Also focus on architecture and development with Phonegap. Used as kickoff for a two day workshop.
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDavid Coppoolse
In 2010 koos de Vlaamse Erfgoedbibliotheek voor de bouw van haar organisatiewebsite voor het opensourceproduct Drupal. Op basis van dit contentmanagementsysteem slaagde de vzw erin om op een snelle en kostefficiënte manier een site met uitgebreide mogelijkheden te realiseren. Daarvoor werd samengewerkt met een gespecialiseerde firma. In deze presentatie overlopen we de redenen om voor Drupal te kiezen en de gevolgde aanpak bij de realisering van de site, met de nodige 'do's en don'ts'. Ook de op Drupal gebaseerde opensourcetoepassing Open Atrium komt aan bod. Dit samenwerkingsplatform wordt door de Vlaamse Erfgoedbibliotheek gebruikt om documenten en informatie te delen binnen haar (netwerk-)organisatie.
NL Front-end Guidelines (HTML,CSS,Javascript)Mathijs Jong
Visie op semantiek, techniek, structuur en werkwijze anno 2012.
Hoe schrijf je toegankelijke en herbruikbare HTML, CSS en Javascript?
Wat is Modular CSS?
Deze workshop geeft je de argumenten.
metadata & open source #osgeonl dag 2012 pvangenuchten
Een presentatie op osgeo nl dag Velp.
Data providers hebben afgelopen jaar (getriggered door open data, atlas vd leefomgeving en inspire) hard gewerkt om hun data en metadata online te krijgen. Nu is het de beurt aan de client-software om goed met de gebruikte jonge standaarden aan de gang te gaan om de data optimaal te ontsluiten. Enkele use-cases worden gepresenteerd hoe dit zou kunnen.
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Let's face the facts and admit it: Estimating how long it will take to build software is hard.
Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time.
Does that mean that estimation is impossible and a waste of time?
Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.
Presentation for Summerschool Webapps. Covers HTML5 Web Apps and Hybrids Apps. Also focus on architecture and development with Phonegap. Used as kickoff for a two day workshop.
Drupal + Open Atrium bij de Vlaamse ErfgoedbibliotheekDavid Coppoolse
In 2010 koos de Vlaamse Erfgoedbibliotheek voor de bouw van haar organisatiewebsite voor het opensourceproduct Drupal. Op basis van dit contentmanagementsysteem slaagde de vzw erin om op een snelle en kostefficiënte manier een site met uitgebreide mogelijkheden te realiseren. Daarvoor werd samengewerkt met een gespecialiseerde firma. In deze presentatie overlopen we de redenen om voor Drupal te kiezen en de gevolgde aanpak bij de realisering van de site, met de nodige 'do's en don'ts'. Ook de op Drupal gebaseerde opensourcetoepassing Open Atrium komt aan bod. Dit samenwerkingsplatform wordt door de Vlaamse Erfgoedbibliotheek gebruikt om documenten en informatie te delen binnen haar (netwerk-)organisatie.
NL Front-end Guidelines (HTML,CSS,Javascript)Mathijs Jong
Visie op semantiek, techniek, structuur en werkwijze anno 2012.
Hoe schrijf je toegankelijke en herbruikbare HTML, CSS en Javascript?
Wat is Modular CSS?
Deze workshop geeft je de argumenten.
metadata & open source #osgeonl dag 2012 pvangenuchten
Een presentatie op osgeo nl dag Velp.
Data providers hebben afgelopen jaar (getriggered door open data, atlas vd leefomgeving en inspire) hard gewerkt om hun data en metadata online te krijgen. Nu is het de beurt aan de client-software om goed met de gebruikte jonge standaarden aan de gang te gaan om de data optimaal te ontsluiten. Enkele use-cases worden gepresenteerd hoe dit zou kunnen.
In this hands-on workshop, Maurice will personally guide you through a series of exercises designed to empower you with a deep understanding of React Server Components and the power of TypeScript. Discover how to optimize your applications, improve performance, and unlock new possibilities.
Maurice will virtually be by your side, offering comprehensive guidance and answering your questions as you navigate each exercise. By the end of the workshop, you'll have mastered React Server Components, armed with a newfound arsenal of TypeScript knowledge to supercharge your React applications.
Don't miss this opportunity to elevate your React expertise to new heights. Join our workshop and unlock the potential of React Server Components with TypeScript. Your apps will thank you.
Let's face the facts and admit it: Estimating how long it will take to build software is hard.
Why is estimation so hard? Well there are some reasons for that. Many people tend to be optimistic about how long it will take to do a task. Not surprising when we learn the way memory works. It tends to skew our experiences from old projects. We often forget the many small setbacks encountered. Another reason is that many tasks are not included in the initial estimate. They only become visible over time.
Does that mean that estimation is impossible and a waste of time?
Not at all. Many software development activities are commercial activities. Starting something without even a rough estimate of what the costs and timeline will be is risky at best.
Surati Tech Talks 2022 / Build reliable Svelte applications using CypressMaurice De Beijer [MVP]
Tired of having users email you that your Svelte application is broken? Turns out that building reliable applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts, including the backend API’s, work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real world user would. In this session Maurice will show you how to use Cypress during development and on the CI server with Svelte. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex and mission critical application with React is another matter. How to configure reliable hosting on Azure for the front and back-end? How to track runtime errors that happen in the browser. And how to create an efficient workflow between front and back-end teams. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://azconf.dev/
With the release of React 18 we finally get the long awaited concurrent rendering. But how is that going to affect your application? What are the benefits of concurrent rendering in React? What do you need to do to switch to concurrent rendering when you upgrade to React 18? And what if you don’t want or can’t use concurrent rendering yet?
There are some behavior changes you need to be aware of! In this workshop we will cover all of those subjects and more.
Join me with your laptop in this interactive workshop. You will see how easy it is to switch to concurrent rendering in your React application. You will learn all about concurrent rendering, SuspenseList, the startTransition API and more.
https://reactadvanced.com/workshops-3h
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://www.c-sharpcorner.com/events/react-virtual-conference2
Building a small to medium size business application with React isn't terribly hard. It has been done lots of times and there is plenty of information about what works and what doesn't. However building a large, complex, distributed and mission critical application with React is another matter. Add occasional poor mobile connectivity and things become really challenging. That doesn't mean that it is impossible, it is just harder to architect and develop. In this session Maurice de Beijer will share his experiences in building a globally deployed application that is used by thousands of people who depend on the availability and proper functioning of the application for a safe work environment.
https://www.meetup.com/nl-NL/tilburg-tech-tuesdays/events/277150883/
Een kleine React applicatie bouwen met een backend is niet moeilijk. Maar wat als de applicatie groter en complexer wordt? Dan wordt het een ander verhaal. En al helemaal als het een publiek toegankelijke applicatie is.
Plotseling blijkt dat allerlei vaak gedane aannames niet meer kloppen. Je krijgt te maken met netwerkstoringen en schaalbaarheid. Verschillende teams die onafhankelijk van elkaar aan de front- en backend werken. Runtime fouten die optreden omdat sommige browsers toch net even anders blijken te werken dan je verwacht.
In deze sessie gaat Maurice de Beijer zijn ervaringen delen over hoe je dit aan kan pakken.
The React team rewrote the book on developing components. Before we had a choice between classes and functional components. Yet many components needed to be classes. A functional component was often too limited. Now, using hooks, we can extend functional components to be as powerful as we want.
Suspense and asynchronous rendering is in the future of React. It will make large applications much more responsive and easier to deal with. Getting started with suspense and asynchronous rendering isn't hard as you will discover.
Come to this session to learn what React hooks are and how to get started using hooks. But be warned, once seen React hooks can’t be unseen and your React components will never be the same again.
Tired of having users email you that your web application is broken? Turns out that building reliable web applications is hard and requires a lot of testing. You can write unit tests but quite often these all pass and the application is still broken. Why? Because they test parts of the application in isolation. But for a reliable application we need more. We need to make sure that all parts work together as intended.
Cypress is a great tool to achieve this. It will test you complete web application in the browser and use it like a real user would. In this session Maurice will show you how to use Cypress during development and on the CI server. He will share tips and tricks to make your tests more resilient and more like how an actual end user would behave.
React keeps on evolving and making hard things easier for the average developer.
One case, where React was not particularly hard but very repetitive, is working with AJAX request. There is always the trinity of loading, success and possible error states that had to be handled each time. But no more as the <Suspense /> component makes life much easier.
Another case is performance of larger and complex applications. Usually React is fast enough but with a large application rendering components can conflict with user interactions. Concurrent rendering will, mostly automatically, take care of this.
You will learn all about using , showing loading indicators and handling errors. You will see how easy it is to get started with concurrent rendering. You will make suspense even more capable by combining it with concurrent rendering, the useTransition() hook and the component.
The React team has rewritten the book on developing components several times. This time they have introduced Suspense. Amongst other thing this makes splitting your application into multiple bundles easier. But that is only the start as the real innovation comes when loading data. Gone are the side effect hooks with the typical loading, loaded and error states. Instead we can suspend components when loading data. Need to do multiple request? No problem you can suspend multiple components at the same time if you want. Need to trap errors? No problem just use a standard React error boundary. Come to this session to learn what React Suspense can do for you.
Reactive and functional programming, you have probably heard the term mentioned before. It’s supposed to be really cool and a good practice. But what is reactive programming exactly and how to get started with it in JavaScript? And why does Angular start using the reactive extensions for JavaScript (RxJS) instead of standard promises?
In this presentation, Maurice is going to show you how to get started with RxJS, the JavaScript implementation of the ReactiveX library. You will learn why using RxJS is a great way of dealing with streams of events in an asynchronous and functional way.
Using restful APIs can be hard on your React applications. Before you know it, you are doing lots of parallel queries to the server. Using GraphQL instead of REST might help a lot. Instead of downloading many complete resources each component declares its own needs. Then the GraphQL client library then combines these requirements. The result is a single optimized query for the server. In this session, Maurice de Beijer is going to show you how to get started with GraphQL in your React applications.
2. Waar gaan we het over hebben?
Waarom HTML5?
Wie beslist wat HTML5 is?
Hoe gaan browsers er mee om?
Verschillende HTML5 onderdelen
3. Wie ben ik
Maurice de Beijer.
The Problem Solver.
Microsoft CSD MVP.
DevelopMentor instructor.
Twitter: @mauricedb of @HTML5Support
Blog: http://msmvps.com/blogs/
theproblemsolver/default.aspx
Web: http://www.HTML5Support.nl
E-mail: mauricedb@computer.org
4. Waarom HTML5
HTML is de meest verspreide UI technologie
Maar door browser verschillen lastig om mee te
werken
Minder bedrijven ondersteunen een enkel platform
Bring your own hardware
Smartphones en tablets ondersteunen geen plugins
Men wil rijkere applicaties
Animaties
Communicatie
etc
5. Wie gaat er eigenlijk over?
De World Wide Web Consortium (W3C)
Was oorspronkelijk met XHTML2 bezig
Web Hypertext Application Technology Working
Group (WHATWG)
In 2004 begonnen uit onvrede met XHTML2
Vanaf 2009 samen bezig
Er wordt gewerkt aan “HTML The Living Standard”
De W3C neemt een snapshot
Dat wordt HTML5
6. Wanneer is het klaar?
“The Web Hypertext Application Technology
Working Group, expects HTML5 to reach W3C
Candidate Recommendation Stage in 2012, and
graduate to W3C Recommendation in 2022.”
7. Wanneer is het klaar?
“The Web Hypertext Application Technology
Working Group, expects HTML5 to reach W3C
Candidate Recommendation Stage in 2012, and
graduate to W3C Recommendation in 2022.”
8. Hoe zit het met de browsers?
Yahoo Graded Browser Support
12. Modernizr
“Modernizr is an open-source JavaScript library
that helps you build the next generation of HTML5
and CSS3-powered websites.”
http://www.modernizr.com/
13. Polyfills
“A polyfill is a piece of code (or plugin) that
provides the technology that you, the developer,
expect the browser to provide natively.”
14. Google Chrome Frame
Gebruik Google Chrome binnen Internet Explorer 6 of
hoger
Wordt alleen gebruikt als er specifiek om gevraagd
wordt
Kan ook voor specifieke versies van IE
<meta http-equiv="X-UA-Compatible" content="chrome=1">
Doet niets als Chrome Frame niet geinstalleerd is.
15. Onderwerpen
Semantic markup
Input elementen
CSS3
Video & Audio
Canvas
Local storage
Drag-Drop & File IO
Geolocation
Web Workers
Offline Web applications
Server Sent Events & WebSockets
16. Semantic markup
Het gaat om de data, niet hoe het er uit ziet!
De meest gebruikte CSS classes bij <div> elementen
<div class=“nav”>
<div class=“section”>
<div class=“header”>
<div class=“footer”>
<div class=“article”>
<div class=“aside”>
17. Semantic markup
Nu zijn het HTML5 elementen
<nav>
<section>
<header>
<footer>
<article>
<aside>
18. Input elementen
De meeste data types moeten met:
<input type="text" />
De browser kan helpen als het weet om wat voor
data het gaat
search
url
number
datetime
Etc.
22. Video & Audio
Er is een nieuw <video> en <audio> element
Er is echter geen standaard encoding
OGV
WEBM
MP4
Meerdere <source> elementen opgeven
De browser kiest de eerste die werkt
Zie Wikipedia voor browser ondersteuning
23. Canvas
Een vlak om op te tekenen
Op dit moment is er alleen een 2D context
Primitives die je kunt tekenen
Lines
Rectangles
Arcs
Curves
Images
Paths
24. Canvas
De hele API wordt via JavaScript aangestuurd
Zeer krachtig maar lastig om mee te werken
Er zijn nog niet veel tools
Adobe® Illustrator® plugin
Leonardo Sketch
Er is een AngryBirds versie mee gemaakt
http://chrome.angrybirds.com/
25. Local storage - Web Storage
Name – Value pair storage
Storage is per site
Het advies voor browsers is 5Mb max ruimte per site
sessionStorage
Geldig gedurende de browser sessie
localStorage
Blijft langer bestaan
De value moet een string zijn!
sessionStorage['data'] = JSON.stringify({ value: 1 });
data = JSON.parse(sessionStorage['data']);
26. Local storage - IndexedDB
Een object of NoSQL store in de database
Werkt alleen in Chrome en FireFox
Zie demo
Er was een Web SQL Database
Is deprecated en vervangen door de IndexedDB
Werkt nog wel in Webkit browsers (iOS)
27. Drag-Drop
Elementen verslepen in de browser
Ook files uit de Windows Explorer naar een HTML
element
Events voor
dragstart
dragenter
dragover
drop
Argument bevat een dataTransfer object
28. File IO
File IO met een FileReader object
File kan op verschillende manieren gelezen worden
readAsArrayBuffer()
readAsBinaryString()
readAsDataURL()
readAsText()
Als de file gelezen is gaat het onload event af
De result property bevat de inhoud
29. File IO
Soms is een file te groot om helemaal te lezen
Een Blob is een deel van een file
Met een file.slice() kan je een blob maken
Een FileReader object kan ook met een blob werken
30. Geolocation
Waar is iemand?
Bijvoorbeeld om een location based search te doen
De gebruiker moet toestemming geven
Werkt zowel in desktop als mobiele browsers
Nauwkeurigheid kan sterk varieren
Via het navigator object te vinden
navigator.geolocation.getCurrentPosition()
De options ondersteunt
enableHighAccuracy: true
32. Web Workers
JavaScript mag niet te lang duren van de browser
Via een Worker() object kan een JavaScript file in de
achtergrond gestart worden
Kan wel langer duren
33. Web Workers
Web Workers zijn beperkt in wat ze mogen doen
Niets met het document
Mogen wel IO doen
XMLHttpRequest
FileReader
importScripts()
Document kan berichten met worker uitwisselen
postMessage()
onmessage callback functie wordt aangeroepen
Alle data wordt gekloond
34. Offline Web Applications
Een web app kan ook draaien zonder dat er een
netwerk verbinding is
Via een cache manifest wordt er bepaald wat voor
offline beschikt is
De cached resources komen altijd uit de cache
Het manifest wordt gebruikt om de cache bij te werken
Dit gebeurt pas nadat de pagina getoond is
Alleen als de inhoud van het manifest anders is
35. Offline Web Applications
Manifest bevat secties voor:
Cache (default)
Network
Fallback
Het manifest moet het juiste mime type hebben:
text/cache-manifest
36. Server Sent Events
Push communicatie van de Server naar de browser
Gebruik standaard technieken om data naar de server te
sturen.
Alles is gewoon HTTP verkeer
Is eigenlijk gewoon long polling
Pas op met verbindingen die te lang open blijven
(30 seconden to max 2 minuten)
37. Server Sent Events
EventSource object
Functies:
close()
Events
onmessage
onopen
onerror
Gaat ook af als de verbinding gesloten wordt
38. WebSockets
Duplex communictatie tussen de browser en de server
Geen HTTP verkeer
Begint wel als HTTP verkeer
Server doet een upgrade naar WS dmv een “101
Switching Protocols” response
Ondersteuning is nog beperkt
Alleen Chrome en FireFox (met prefix)
39. WebSockets
WebSocket object
Functies:
send() om data te sturen
Kan ook binary data zijn!
close()
Events voor als er wat gebeurt
onmessage
onopen
onclose
onerror
40. Conclusie
HTML 5 heeft een grote toekomst
Het is de enige platform onafhankelijke UI techniek
Zelfs binnen Windows 8 is het belangrijk
Diverse browsers ondersteunen verschillende
onderdelen
Gebruik feature detection om te zien wat wel en niet
Gebruik polyfills om ontbrekende stukken aan te vullen
Je hoeft niet te wachten tot het klaar is
Begin nu en maak betere web applicaties