Home of Kaj Rietberg

Mijn nieuwe weg User Experience (2013)

2013-02-28T00:00:00Z

De meesten die dit lezen weten dat ik op zoek ben naar een nieuwe uitdaging. Ik ben op zoek naar iets dat beter bij mij past. Al jaren ben ik verslingerd aan het WereldWijdeWeb, dus waarom niet hiervan mijn werk maken. Ik heb het al eerder geprobeerd, maar een eigen bedrijf en daarnaast leraar zijn, dat lukt mij niet. Beiden vergen veel aandacht, beiden kosten veel energie. Daarom toen besloten om mij alleen te richten op het leraar zijn. Ik merkte al snel dat dit het niet ging worden.

Via loopbaancoaching aan het nadenken, soms te snel, maar ik was onderweg. Het voelde vaak niet prettig, ik ben iemand die slecht kan genieten van de weg ergens naar toe, Ik wil er gelijk al zijn. Gelukkig ging het genieten van de weg ergens naar toe steeds beter. Door de loopbaancoaching heb ik juist veel geleerd over mij als persoon en niet zozeer over werk dingen.

Juist die persoonlijke dingen hebben mij veel gebracht. Na besloten te hebben iets in de ict te gaan doen, besloten dat dit iets met webontwikkeling werd en dat webontwikkeling uiteindelijk User Experience gaat worden. Dat is dus mijn doel: UX. Nu weet ik mijn doel en ga ik de weg er naar toe uitstippelen. Ik heb al ideeën, maar de komende tijd ga ik mijn actieplan invullen hoe ik daar ga komen. Ik heb er zin in. Een nieuwe weg.

Mijn UX-Frontend toekomst een maand later (2013)

2013-05-29T00:00:00Z

Mijn uiteindelijke doel is nog steeds User Experience Guru. Mijn weg er naar toe gaat via Front-end ontwikkeling, het bouwen van gebruiksvriendelijke websites is mijn doel. Dit zou ik het liefste bij een educatief bedrijf doen. Mijn drive om het onderwijs voor leerlingen leuker te maken is er nog steeds.

Sinds een maand loop ik stage/ co-work ik 2 dagen per week bij Thomas Jacobs. Thomas is een freelance Front-end ontwikkelaar met zeer veel ervaring. Voor Thomas houd ik mij bezig met Pop a Question. Het idee wat het is staat al. Het design voor de voorkant van de website heb ik afgelopen maand omgezet naar een werkende webpagina. Hiervoor heb ik het framework Foundation als basis gebruikt met daarnaast eigen CSS(3) en HTML(5).

Als editor gebruik ik BlueFish, deze werkt op Windows en Linux (Lubuntu heb ik). Het was een maand van nadenken, bouwen, uitproberen, weer nadenken, verder bouwen of opnieuw bouwen en ga zo maar verder. Erg leuk om te doen, al doende leer ik veel en door de hulp van Thomas kwam ik op momenten dat ik echt vast zat weer verder.

Het gave van het bouwen van een website is het bezig zijn met iets concreets, langzaam aan zie je wat het wordt en wordt het steeds mooier en beter. Verder het creatief bezig zijn en oplossingen bedenken over hoe ik Foundation het beste gebruik en de verdere inzet van CSS en HTML optimaal benut is heerlijk om te doen. Tijdens het bouwen hebben we het uiterlijk ook op bepaalde punten aangepast. Dit flexibel bezig zijn maakt het werk soms wel lastig, vooral als ik denk dat we klaar zijn, moet het toch nog iets anders. Maar zorgt er voor dat het uiteindelijke product beter en mooier wordt. Dus iets waar je nog trotser op kan/mag zijn.

Wat ik heb geleerd de afgelopen periode:

Foundation framework
CSS (3) kennis verder uitgebouwd
HTML(5) kennis verder uitgebouwd
Veel is via Google te vinden
Het wiel niet opnieuw uitvinden, iemand anders heeft vast al een oplossing gevonden
Samen kijken naar iets levert nieuwe ideeën op

Langzaam aan word ik de webontwikkelingswereld ingezogen. Ik vind het heerlijk. Deze wereld gaat mijn wereld worden. Afgelopen periode heb ik een paar sollicitaties de deur uitgedaan. Helaas niet uitgenodigd voor een gesprek, maar dat gaat wel komen. Mijn vaardigheden moet ik op een hoger plan krijgen, dat is het belangrijkste. Zoals ik nu tegen aankijk zal een baan als Front-end ontwikkelaar die zich bezig houdt met UX/Interactie design mij zeer aanstaan. Lekker afwisselend. Afgelopen periode veel geleerd. Lekker bezig geweest en mooi op schema. Komende maand ga ik mij bezighouden met het wireframen van verschillende pagina's van Pop a Question en deze bouwen.

Wat een front-end ontwikkelaar moet kunnen in 2015

2013-06-12T00:00:00Z

Afgelopen periode heb ik verschillende vacatures waarin Front-end developers worden gevraagd bestudeerd. Ik ben geen fan van vacatures, maar aangezien ik er 1 wil worden ben ik benieuwd wat er gevraagd wordt van een Front-end developer. Ik heb een lijst samengesteld van vaardigheden die gevraagd worden van Front-end developers. De meesten ken ik wel, maar Sass en Less waren nieuw voor mij. Hieronder staat de lijst met vaardigheden die een Front-end developer moet kunnen. Met daarbij een korte uitleg en/ of verwijzing naar een site als je er nog meer over wil weten.

CSS (3): Cascading Styling Sheets. Met CSS beschrijf je het uiterlijk van een website. De nieuwste versie is CSS3. Hiermee kan je visuele zaken toevoegen die eerst alleen met een afbeelding konden. Dit zorgt ervoor dat het uiterlijk van de website nog meer met CSS bepaald kan worden, websites worden hiermee lichter. Ik vind het zelf een verademing omdat dit het voor mij makkelijker maakt. Ik hoef geen afbeeldingen uit Photoshop te halen om het zelfde effect te krijgen. Zo kan je schaduw via de CSS toevoegen.
HTML (5): HyperText Markup Language. We zijn momenteel bij versie 5. Daarom wordt deze ook gevraagd, het voegt vele nieuwe mogelijkheden toe om websites interactief te maken. Eerder gebruikte men daar Flash voor. Nu hebben we HTML5. HTML is bedoelt om de structuur van een website aan te geven.
jQuery: jQuery is afgeleid van Javascript. jQuery zou makkelijker moeten zijn te gebruiken in websites omdat het simpeler is dan Javascript. jQuery gebruik je om interactieve applicaties toe te voegen aan je website. Zaken die met HTML en CSS niet kunnen of lukken.
Less: Ze noemen het zelf de dynamische Stylesheet taal. Zoals ik het begrijp kan je met Less 1x een bepaald iets definiëren en dat kan je in je stylesheet steeds weer gebruiken.
Sass: het lukt me niet echt een beschrijving te geven van Sass. Het lijkt wel php met CSS gecombineerd. Het wordt een taal genoemd en draait op Ruby. Sass en Less lijken het zelfde doel voor ogen te hebben, gemakkelijker Stylesheets bouwen met minder tekens.
Mobile en responsive: Mobile design is het bouwen van een website voor een mobiel. Verschillende websites gaan over op een mobiele website als je die met je mobiel bezoekt. Vaak zie je dan m.endanderestvande.url. Responsive is dat de website met elke grootte van het scherm meegaat en het beste uiterlijk levert zo dat de gebruiker van de website optimaal bedient wordt.
Scrum: dit is een software ontwikkelmethode. Je kan hier een opleiding in volgen om een scrum-master te worden. Je werkt als team samen om de software te ontwikkelingen, dit doe je op een vastgelegde manier, de scrum methode.
SEO: Search Engine Optimization. Staat niet bij alle vacatures, maar ik kwam deze term wel tegen. Volgens mij weet iedereen hier wel wat van. Maar dit is wel echt een specialisatie. Er zijn pros die dit alleen maar doen en dus ook heel goed kunnen.
WordPress: Het gaat om een Content Management Systeem. Ik werk zelf al jaren prettig met WordPress. Heb ook verschillende WordPress Meetups georganiseerd en de eerste 2 Wordcamps hier in Nederland mede-georganiseerd. Zo zijn er meerdere CMS-en, zoals Joomla, Drupal en ExpressionEngine.
Github: Github kan je gebruiken om samen software te ontwikkelen. Je kan lid worden van een ander zijn Github en volgen wat veranderingen zijn aan de software, maar ook nieuwe ideeën aandragen. Wordt volgens mij veel gebruikt.
OTAP: Hiermee wordt de weg bedoelt die software aflegt in haar ontwikkeling. Het staat voor Ontwikkeling, Test, Acceptatie en Productie.
SVN: Staat voor Subversion en is versie beheer software. Ik ken het vanuit de WordPress wereld waar hier mee wordt gewerkt. Ik gebruik het zelf niet en kan ook niet goed uitleggen wat je er precies mee kan.

Naast de tools om mee te werken heb je als Front-end ontwikkelaar ook persoonlijke vaardigheden nodig zoals:

creatief denken
oprecht geïnteresseerd zijn in nieuwe technieken
klantvriendelijkheid
kunnen samenwerken
zelfstandigheid
oog voor detail

Waar ik sta als front-end ontwikkelaar (2015)

2015-01-13T00:00:00Z

Sinds half april 2014 heb ik een baan als front-end ontwikkelaar bij Zorgweb. Daarvoor heb ik een klein jaar stage gelopen als front-end ontwikkelaar en veel gelezen over front-end ontwikkeling. Gezien het moment qua werk is een goed moment om op te maken waar ik nu sta in mijn nieuwe beroep. Want wat kan ik nu eigenlijk? Wat heb ik er voor gedaan? Voor mij belangrijke vragen, ik wil namelijk verder groeien in mijn beroep. Niet vele jaren stil blijven staan, wat ik als leraar in het speciaal onderwijs wel deed. Ik wil de regie hebben.

Bij Zorgweb ben ik aangenomen als styler/ front-end ontwikkelaar. Ik doe wat design, maar vooral zet ik de aangeleverde designs om zodat onze z-advies applicatie het uiterlijk krijgt die onze klanten graag willen. Vaak worden deze aangeleverd door een design bureau.
De front-end bestaat uit een framework dat door een eerdere front-ender in elkaar is gezet. Deze is met Sass gebouwd. Wat ik afgelopen maanden heb gedaan, is een demo styling/uiterlijk ontwikkelt zodat (toekomstige) klanten kunnen zien wat we aanbieden, ik heb designs gebouwd met CSS en het framework dat wij hebben staan, ik heb simpele zorgverzekering vergelijkers een uiterlijk gegeven dat past bij de klant, de verschillende designs getest in verschillende browsers (hierover ideeen opgedaan). In september heb ik voor ons team een succesvolle presentatie gegeven over hoe we onze applicatie Responsive kunnen bouwen zodat het meeschaalt met de verschillende mobiele apparaten die er zijn. Door deze presentatie heb ik het team kunnen overtuigen dat we ons in die richting moeten begeven.

Veel tijd ging zitten in het leren werken met het framework dat eerder was gebouwd. Het lastige was dat het voor mij te weinig gedocumenteerd was en deels ook verouderde CSS oplossingen werden toegepast. Dat maakte het lastig om het framework eigen te maken. Deels is dat mijn kennis van Sass wat te kort schiet.

Naast mijn werk bij Zorgweb ben ik actief betrokken bij Fronteers, de vakvereniging voor front-end ontwikkelaars. Ik regel met iemand anders artikelen voor het weblog. Fronteers biedt verschillende video's aan van sprekers tijdens bijeenkomsten, maar er zijn genoeg mensen die liever iets leren dmv lezen. Op moment van schrijven zijn er 2 artikelen geplaatst, hiervan is 1 van mij. Het artikel gaat over CSS-resets. Dat er nu al een artikel van mijzelf op een weblog staat zoals die van Fronteers maakt mij zeer trots. Weer iets dat ik bereikt heb.

Afgelopen jaar heb ik doelen voor mijzelf opgesteld die ik wilde bereiken na 1 jaar te werken bij Zorgweb. Deze doelen ben ik nu aan het evalueren, dit is voor mij een goed moment. Het zorgverzekeringen seizoen is voor ons bedrijf nu afgelopen. We evalueren het afgelopen jaar en gaan plannen maken voor komend jaar. Voor mij een goed moment om te kijken waar ik sta en waar ik in januari 2016 wil staan.

Afgelopen jaar ben ik beter geworden in en ervaring opgedaan met:

CSS
HTML
CSS architectuur
Kennis over software ontwikkeling
Webbrowsers (wat doen ze, hoe werken ze)
Het http protocol
Zelf een webserver (nginx) opzetten en website hosten
Basis beginselen van visueel design

Ik merkte ook tekortkomingen van mij omdat ik er geen tot weinig ervaring mee heb. Van daaruit wil verder groeien en punten oppakken om te leren.

Komend jaar wil ik beter worden in of mij verdiepen in:

CSS en HTML
Sass (vooral het gebruik van mixins en functies)
Responsive webdesign voor webformulieren
CSS architectuur (eigen framework voor onze applicatie bouwen)
Accessibility voor webformulieren
Web-animatie voor UX
Visueel design (typography, kleur gebruik, layout)
Starten met wat JavaScript

Als ik deze lijst zie, zijn dat veel punten. Het zal allemaal niet lukken. Maar in het meeste zal ik wel weer meer ervaring krijgen dan ik nu heb.

Ik ga dit doen door conferenties te bezoeken, boeken lezen (UX Boekenclub Groningen bezoeken), Fronteers bijeenkomsten bezoeken, weblogs te volgen, mensen bevragen en met ze discusieren over front-end en design onderwerpen, zelf artikelen schrijven, mijn hobby fotografie actiever oppakken. Als ik dit allemaal zo zie, ga ik weer een mooi en leuk jaar tegemoet!

Introduction on HTTP

2015-08-14T00:00:00Z

In 2013 I decided to turn jobs. I was a teacher in Special Needs education and wanted to become a front-end developer. When you’re a front-end starter, it is important to know the basics of the web. There are a lot of topics on front-end development that can be found on the Internet. Most topics that starters are learning are HTML, CSS and JavaScript or jQuery. These are topics that will be learned by doing. Are these the real basics of front-end development? In a way yes, but one of the real basics is HTTP. I explored the web to find good references to read and learn about this topic. Well there is enough to find but not that much about this topic. Is it not important or is it not sexy to write about this topic? Don’t know, but this article is for web dev starters to show them the basics of HTTP.

What is HTTP?

Ludovico Fischer calls HTTP the life of the web. And as front-end developer it’s also your lives, you will earn our money with HTTP. What is this HTTP then? If we look at us humans, we can talk to each other. We put letters behind each other and those letters make words. We put these words in a certain order to make sentences. The order in which we put these words is based on rules. Because of these rules we know how to build sentences and with those we can build stories. These rules are important so we can understand each other better. If every one would make his or her own kind of sentences we still wouldn’t understand each other, even if we speak the same language. Some people wrote all of these rules down so everyone can use these rules. Now we can understand each other well. We have a lot of languages on our planet, but to make sure we can understand each other better, we humans said that English is the language of the world. So if we want to understand each other we better learn English. So we have rules how a language should be used and we said we have one language that we all can speak to understand each other, English. Computers need the same to understand each other. They also need rules about how they can communicate with each other and also one language to understand each other. For computers that are on the Internet there is one language they have to speak to understand each other and there are rules put in a protocol. This is where HTTP comes in. HTTP stands for Hypertext Transfer Protocol. As you can see it’s a protocol that describes how hypertext should be transferred. Nowadays it’s not only hypertext but also a lot of other media too, like images, sounds, movies, etc.

We have a language and this language has a protocol, HTTP. The transportation from HTTP goes from a client (for example a web browser) to a server, to another server, to a destination server and back to the client. This transportation goes with TCP and IP over wire, by air or satellite. It starts with a client who makes contact with a server; let’s say to wake the server. Then sends a request to a server for information and the server tries to reply with the information needed. They understand each other. Even though they are different brands, with different kind of software they all speak the same language, the HTTP language. If we hadn’t this, the Internet would not be useful. As you can see we speak of a request and trying when client and server are talking to each other. It is a request from the client to the server in which the client asks, “please try to match this”. The server will look and see what matches or comes closest and send the information that is the best match. It isn’t always possible to send the information that is requested. When a client requests for information in the Dutch language, but there is nothing in the Dutch language it will send what comes closest. In short, this is what HTTP is about. We will dive deeper into this subject in this next section. And talk about some parts of HTTP.

The different HTTP parts

HTTP has a header with Meta data and a body. The important part of the HTTP file is the header. The client sends information in the request-header to the server, like which client it is, if caching is possible, if there is a cookie for this website, if gzip is accepted by the client.

The server looks up which information is given to the server and tries to deliver the information that is asked for or tries to be as close by as possible. That means if gzipping is on it wil gzip the files. And the server gives the information (or data) that is asked for. It puts this in de body of the HTTP response and of it goes to the client. Together with the information that is send in de body, the server sends a response-header with information see number 2 in the image). This information is what you call meta-data. It is information about the data. This meta-data is in de header of the HTTP response and gives the client information, like the kind of server it is coming from, the kind of content it has in de body (text, html or an image), etc. The meta-data is not important for visitors of websites or people using web applications. They don’t see or hear it. For the client, the server and all the web developers it is important.

Good to now about HTTP

HTTP has more to offer then what this article covers. This article is about the basics of HTTP. When you want to know more about this subject read the links that are at the end of the article. Here is some basic and important knowledge of HTTP.

Verbs

HTTP uses some verbs. These verbs are doing an action. Some of the verbs that are used in HTTP are GET, POST, PUT, DELETE. The most used verbs are GET and POST. GET number 1 in the image is used to get data from a webserver, like the HTML and the CSS. GET is used to build the website in a browser. GET is seen as a safe way of communication to a server, because it only wants to pick something up and deliver it to the client. POST number 2 in the image is used to bring new information to the server. A form on a website or a basket in a webshop are methods that use POST. In the image above is a Newsletter subscription used. This action uses POST to send this information to the server. POST is seen as an unsafe way of communication because it wants to change something on the server. When POST is done there should always be a redirect to another source. Because when you refresh and the information that was sent to the server will be sent twice. That’s not what the visitor wanted.

Status codes

When the client is contacting the server. The server will interpret the message of the client and talks back. It always gives back a status code. With this status code the client knows if the request was successful or not and what went wrong. The most known status code is the 404. This means that the client did do something wrong. Most of the time visitors of a website typed a wrong url. These are the status codes there are:

1xx: Informational - Request received, continuing process.
2xx: Success - The action was successfully received, understood, and accepted.
3xx: Redirection - Further action must be taken in order to complete the request.
4xx: Client Error - The request contains bad syntax or cannot be fulfilled.
5xx: Server Error - The server failed to fulfill an apparently valid request.

This list is coming from the RFC2616 document of the IETF. Each hundred number has some more codes it can give back to the client. Like the 404 is one of the 4xx numbers. Or 304 is one of the 3xx numbers. With 304 the server tells the client that nothing has changed. The server knows this because the client did send in the HTTP header when it was the last time it visited that server. This means that the client can grab a local copy of the information, which is faster then downloading it again.

For now it is important that you know what a status code is and which general numbers there are and what they mean. In the image below you see a GET request and the server sees that it doesn’t have to send it again because it was not modified and still in the cache of the client.

Cookies

Cookies are sent with the http-header from the server to a client. With this cookie a server can see if a client has already been there. This means that when a client comes a second time on a server it will look for the cookie and send the cookie information with the HTTP header over to the server. The server now knows that the client already visited this server. See below how a cookie looks like. Not something that is eatable.

Caching

A browser stores data from websites like images, HTML, CSS, JS in a folder on the hard drive of a computer. This we call caching of the information. A client only does that when the server allows it. The server sends with the HTTP header information about caching from the data it is sending to the client. One of the things it sends is if caching is allowed, but also when the expire date of the cached material is and when the client has to look back on the server for new material.

Proxies

Because the HTTP information is based on text other machines can look at it and do something with it. Like a proxy. A proxy at an office can read the information that is sent through and for example throw it away. Because the proxy has to filter the requests that are going to twitter and facebook and don’t let them pass the proxy. The proxy can see in the HTTP header to which host a request is going.

Change the HTTP header

The HTTP request is changeable with jQuery. If you change the request of the client, the output of the server will also be different. See jQuery AJAX.

Webdeveloper tools

The best way of looking at HTTP is going to your web developer tools and look at the network tab. Here you find all the information needed. Take a look at the image below and read the explanation afterwards. What you see is the FireFox web developer tools. If you open the web developer tools go to Network and visit a website.

The request header (1) shows which website you visit, here it is Smashing Magazine. This is the header the web browser did send to the server of Smashing Magazine. The request header show the host the client wants to connect to, the user-agent, which is Mozilla FireFox, what it accepts, like language and kind of media, a cookie, etc. Above it is the response header (2) from the server of Smashing Magazine. We can see it is a nginx server, it had the data gzipped, and some more things. Above that (3) you can see the url that was requested, the client requested it with a GET method and the status code was 200, which means that it went OK. A lot of this information is also viewable at the left of the image. In the blue bar you see the url (4) that was requested, the status code (5) the server returned, the method was GET (6), the type of media it is (7), how big (8) it is and the time (9) it did cost to get to the client. There are many files that were coming to the client. They all did get in with a GET request. The media types are different, from JavaScript, to gif, png and html. The files are coming from different servers or from a subdomain. Look at the status code. There are two different kinds of status codes to see in this window. The green round one (10) and the orange round (11). The green one is a 200 OK, but the orange one is a 304. This means it is not modified since the last time the client visited Smashing Magazine. So these files could be retrieved from the local cache. There is a lot to see at the web developer tools about HTTP. It gives a lot more insight in what HTTP is. A good way to get around in HTTP and the web developer tools is reading about HTTP and watch at the same time in the web developer toolsbar.

Why should I know about it? What can I do with it?

This is the question we always have to ask our self when hearing about something. The same is with HTTP. Why should we know about this? Well when I was reading some articles about HTTP some pieces came together. HTTP gives more insight in how the web works. As a starter web dev you will know better how clients, like browsers, and servers work together and how they react on each other. Especially when you go more on the technical side of front-end development it is important to know this. You will become a better web apps and websites programmer. Because you know how the connection from a client to a server is best used and can take this in account for your web application. Understanding HTTP is important for debugging.

When I was a trainee at popaquestion.com we had to see how the server was responding on our POST and GET action with a form. We wanted a user become a member (POST) and that the questions this person made also would be linked to the username. So we had to look with the web developer tools how the server acted on our POST request and put the Username together with the id’s of the questions.

Knowing about HTTP can give you a better insight on performance of your website or application. When working on bigger projects the project team mostly has influence on the choice of webserver. Then the project team has to think about how HTTP influences the performance. By knowing HTTP you know which setup of the webserver will give the best performance for you website or application. Like checking the webserver its configuration and seeing if keepalive is enabled. This will save a lot of time. Now the client only has to make contact to the server once. Making contact is just a few milliseconds. But a website or application nowadays needs to do this around 90 times to get al the information that is needed to show the website or application. Keepalive takes care of this by keeping the connection open until all the information the client needs is send and the last package will have a connection close in the HTTP header. Or something like HTTP pipelining can be used in applications and reduces waiting time. It should be supported by the client and the server. Pipelining will send a request for the HTML and CSS at the same time, these GET requests will be processed by the server at the same time and will be send to the client after each other. This will safe some extra time.

The future

The IETF has a working group named HTTPbis who are working on HTTP 2.0. It will be mainly focused on performance. As they call it there self: “HTTP/2 enables a more efficient use of network resources and a reduced perception of latency by introducing header field compression and allowing multiple concurrent messages on the same connection.” But HTTP 2.0 will do more. It will know how to prioritize; it lets more important requests come first. Another thing that will be better is that less TCP connections will be needed. That will be possible because it will have parallel requests and responses in one connection. Also an interesting thing is the server push, which means that a server knows which information the client needs, so it will already send this information before it is needed. The future is looking interesting for HTTP. If you want to read more about this future and go in depth read, “HTTP continues to evolve” by Ilya Grigorik.

Resume

In this article are some basics of HTTP explained. If you want to learn more about HTTP go and read the recourses that were used for this article. The important things that were mentioned in this article are: HTTP lets clients and servers talk to and understand each other on the Internet. HTTP uses a header for sending meta data to a server and back to a client which helps the communications between them. HTTP uses some verbs, which are actions. Like GET, PUT, DELETE, POST, etc. GET and POST are the most used ones. With GET data is coming from the server. With POST data will be changed or put on the server. Like an username on a description form. A server sends a status code to the client, so the client knows how the communication went. HTTP helps with the caching of data on the local machine with information that is stored in the header of the HTTP request and response. We started with HTTP 0.9. Now the web is many years on HTTP 1.1, but we see the end of this. HTTP 2.0 is coming closer to the web, which means the web will be faster. Yes! But other protocols are still there and could be a bottleneck. Like TCP or IP. And according to Ilya latency is also still a problem and costs some extra time.

“We are in a great industry, an industry of movement”.

Recources

Waar ik sta als front-end ontwikkelaar (2016)

2016-04-04T00:00:00Z

Het is april 2016. Nu bijna 2 jaar front-end ontwikkelaar. Wat heb ik geleerd, hoe heb ik dit geleerd, en hoe ga ik verder? Vragen die ik mijzelf steeds stel. Via deze weg ga ik hier een antwoord op geven.

Wat heb ik geleerd?

Ik kan mijn weg vinden in CSS en HTML. De designs die wij aangeleverd krijgen kan ik bouwen met CSS, soms zitten er lastige punten in die niet lukken vanwege slechte compatibiliteit van browsers of bugs in browsers. Eerst was dit nog spannend, maar nu niet meer. Ik merkte de laatste tijd dat de uitdaging hiervan weg was en daardoor ook de uitdaging in mijn werkzaamheden. Ik heb een basis voor de CSS van elke applicatie omgezet in een Framework/ basis waar ik met Sass een template van bouw. Ik gebruik hierbij wat mixins, extends, variabelen en nesting.

Ik kan mail-templates bouwen. Het designen lukt een beetje. Ik heb een eigen template gebouwd zodat ik bijna zeker weet dat deze goed wordt getoond in verschillende browsers.

Ik weet waar ik mijn info vandaan moet halen als ik iets niet weet. Ik kan gewoon niet alles weten, dus weten waar welke info te krijgen is of welke persoon het meeste weet van een bepaald onderwerp is zeer belangrijk.

Ik heb meer inzicht in hoe een webbrowser werkt, wat het http protocol is en hoe het werkt. Zie: HTML5Rocks.

Ik ken de rol van een Front-end ontwikkelaar nu beter en de plek binnen een bedrijf. Dit is veelzijdig en geheel afhankelijk van wat er binnen een bedrijf nodig is. De basis is bouwen van websites of applicaties waarbij CSS, HTML en/of JavaScript nodig is. Maar of je dan ook design er bij pakt of dat je scrum master wordt of noem maar op. Echt, de rol Front-end ontwikkelaar is net zo divers als het werkgebied.

Hoe heb ik dit geleerd?

Ik lees verschillende webfeeds, krijg de nieuwsbrief van Smashing en HTML5-weekly en de Sass nieuwsbrief. Ik bestel boeken als ik denk dat het handig is. Als ik iets moet weten, duik ik er letterlijk in. Ik besteed dan uren om via websites, boeken, twitter, bekijk broncode van websites, kijk hoe anderen iets aanpakken, ik bezoek meetups en conferenties, noem maar op om er achter te komen hoe een onderwerp in elkaar steekt. Ik maak daar aantekeningen van. Ik wil een onderwerp kunnen voelen/beleven. Dan snap ik het en als ik dan weer iets nieuws lees begrijp ik wat er wordt bedoeld.

Ik gebruik het geleerde uiteindelijk in mijn praktijk. Als ik dan zaken niet weet, kan ik door mijn zoektocht snel antwoorden vinden op mijn vragen.

Wat vind ik van front-end?

Lastig om bij te blijven. Er valt zo veel binnen dit werkveld, waar richt ik mij op? Wat lees ik wel en wat niet? Het komt misschien negatief over, maar dit is iets wat mij de laatste tijd tegen valt en ik momenteel moeite mee heb.

Ik heb gemerkt dat veel zaken lastig lijken, maar door ermee aan de slag te gaan wordt het steeds makkelijker. Er over blijven lezen en praten maakt iets niet makkelijker.

Er veranderd zoveel, als ik in een ander onderwerp duik ben ik bang dat ik iets mis van weer een ander vlak. Ik kan niet alles weten en dat leren accepteren is belangrijk. Iedereen in dit werkveld weet niet wat hij/zij doet. We zijn aan het uitproberen, we denken het te weten. Maar niemand weet het zeker. Daarom hoef je ook niet bang te zijn om fouten te maken. Wees nieuwsgierig en leer nieuwe dingen, brand je vingers en probeer weer opnieuw. Ga lekker door en je komt er wel.

Front-end en nog breder alles wat er online gebeurt is een bijzonder werkgebied. We zijn aan het ontdekken wat er allemaal kan en elke dag is er wel iets nieuws of anders. Dat is juist zo heerlijk van dit gebied.

Hoe nu verder?

Ik heb met mijzelf afgesproken dat ik mijn werk spannend en uitdagend wil blijven vinden. Daarom afgesproken met mijn bazen dat ik meer verantwoordelijkheid krijg. Ik ben verantwoordelijk voor de huisstijl en wat hierbij komt kijken, ik ben verantwoordelijk voor de front-end van alle applicaties, onze eigen website. Alle uitingen die wij naar buiten doen (beetje marketing) ben ik verantwoordelijk voor.
Ik bedenk voor de gebieden waar ik verantwoordelijk voor ben doelen, welke natuurlijk aansluiten bij de bedrijfsdoelen. Ik wil dat de gebieden waar ik verantwoordelijk voor ben ook bijdragen aan het behalen van de bedrijfsdoelen.

Ik stel steeds doelen, maar dat doe ik nu eens niet voor mijzelf. Ik ga mij nu eerst verder verdiepen in JS en data visualisatie. Daarna zien we wel verder. Het stellen van doelen is een manier om de toekomst te willen controleren en dat doe ik nu eens niet. Maar even laten gaan en go with the flow.

Mail template bouwen; een startpunt

2016-04-05T00:00:00Z

Email is nog steeds of weer een belangrijk communicatiemiddel. Het leek een tijdje er op dat we het minder gingen gebruiken. Maar in de stroom van sociale media is mail juist weer belangrijker geworden, je kan het makkelijker bewaren. Bedrijven sturen steeds meer post via de mail ipv briefpapier. En we abonneren ons liever op een nieuwsbrief dan constant maar alle sociale media af te lopen om bij te blijven. Het sturen van een goed leesbare mail en dan heb ik het niet over inhoudelijk maar over het uiterlijk is goed te doen, als je maar weet hoe. En dit hoe is anders dan het bouwen van een website. Zoals velen zeggen is het net zoals in de begintijd dat tabellen gebruikt werden voor het uiterlijk van je website. Het is weer terug in de tijd. De reden hiervoor ligt aan het feit dat er veel mail-clients zijn. De bedrijven die mailclients bouwen vinden het niet belangrijk genoeg om deze net zo vaak te updaten als met een webbrowser. Iets wat ik mij ook kan voorstellen.

Om voor onze klanten beter beslagen ten ijs te komen heb ik mij verdiept in het bouwen van mail-templates. De informatie die ik verzameld heb wil ik hier met jullie delen.

Door je te verdiepen in het bouwen van mail templates kan je klanten vertellen wat wel en niet mogelijk is. Zij weten vaak niet wat wel en niet kan en verwachten hierdoor dat bijvoorbeeld knoppen altijd rond zullen zijn. Wat dus niet zo is.

Denk er aan: dit artikel is geschreven in april 2016. De ontwikkelingen gaan gestaag in de mail-wereld, maar ze zijn er wel. Er zullen betere en nieuwere technieken zijn. Bekijk de links onder aan het artikel voor plekken om deze nieuwere informatie te bekijken.

Algemeen

Om de boodschap, wat heb je besteld, voor wie en wat zijn de gegevens van deze personen, over te brengen lijkt een single column layout het beste te werken. De boodschap moet duidelijk leesbaar zijn.

Een link in de mail met: "Lees in de browser" zou mooi zijn, mocht de mail niet duidelijk leesbaar zijn kan iemand er voor kiezen om de link in de browser te lezen. Maar dit zou betekenen dat de mail ook online zou moeten staan. Ivm de privacy kan dit niet altijd.

Belangrijke boodschap bovenaan zetten ivm afbreken van een mail in een mail-client. Gebeurt vaak op mobiel. Pixel perfect design in elke mail-client lukt je niet.

Melding op bedankt pagina dat mensen een bepaald mailadres toevoegen aan hun adressenbestand zodat de mail niet in de spamfilter terecht komt.

Bouwen

Voor de opbouw van email templates wordt een <table> element gebruikt met daarnaast een <tr> en een <td>. Meer heb je niet nodig. Hiermee kan je makkelijk alles op de goede plek zetten en weet je dat in de meeste mail-clients de mail goed staat. En dit laatste daar gaat het om. Je kan ook gebruik maken van meer semantische HTML tags zoals een div, p, h1-h6, maar je hebt dan grote kans dat er verschillende mail-clients zijn die de styling daaraan gekoppeld niet toont. Zo heeft Outlook 2007+ moeite met het tonen van de padding op een p en een div. Op elke <table> en bijna elke <td> kan of moet je gebruik maken van een aantal attributen namelijk:

align
bgcolor
border
cellspacing
cellpadding
width
height

Gebruik voor elk element een eigen <table>, dit is modulair opbouwen van je mail. Hierdoor kan je een element makkelijk verplaatsen, toevoegen of verwijderen. Hierdoor krijg je ook natuurlijke breekpunten die belangrijk zijn voor Outlook, in lange emails zet Outlook die anders zelf en dan kan het op een plek komen waar je het niet wilt. Visuele problemen zie je hierdoor ook sneller en zijn makkelijker op te lossen.

Gebruik de overall table voor de achtergrond kleur, body wordt door sommige mail-clients genegeerd. Gebruik onderstaande manier:

    <table cellspacing="0" cellpadding="0" border="0" width="100%">
        <tr>
		  <td bgcolor=”#000000”>
			Your email code goes here.
		</td>
	   </tr>
    </table>

Je kan shorthand attributes gebruiken, maar schrijf dan wel de waardes voor elke kant voluit.

Reken bij meerdere kolommen iets minder % dan 100% bij elkaar opgeteld, dan weet je zeker dat het naast elkaar blijft staan. Outlook plaatst soms wat extra ruimte en dan komen ze niet naast elkaar te staan.

Je kan een mailtemplate zelf opbouwen. Maar om je werk uit handen te nemen kan je ook gebruik maken van een mail-template. Ik heb hieronder een aantal opgenoemd.

Templates

Er zijn meer templates te vinden, maar verschillende zijn 3 of meer jaar niet aangepast. Er zijn zeker wel wat veranderingen geweest in de mail-client wereld. Dus die heb ik hier weggelaten .

Design

Voorbeelden:

Maak de mail maximaal 600 - 800px breed. De schermen waarin je de mail krijgt te zien zijn niet breder. Je nest verschillende tables. De eerste heeft een breedte van 100%, de tweede een breedte van 600px. Degene die daar dan inkomen zijn de elementen van de mail. Deze geef je dan een breedte van 100% of een andere breedte als je met verschillende columns wilt werken.

Typografie

Zet alle tekst in een td. Zoals eerder benoemd kan semantische HTML tags, maar is niet gegarandeerd dat elke mail-client ze weergeeft.

Geef elke td een inline styling met:

color: ; Beste is hexidecimaal met 6 tekens. Meeste garantie.
font-family: ; Zet bij font bestaande uit meerdere woorden wel ' ' er om.
font-size: ; Gebruik px. Bij iOs wordt alles onder de 14px weergegeven als 14px of je moet - webkit-text- size-adjust: 100% en -ms -text sizeadjust: 100% toepassen. Voor mobiel maak je tekst 16-18px. Maak kopteksten niet te groot
font-weight: ; Je kan woorden of de getallen gebruiken.
line-height: ; Voor gewone tekst gebruik je het beste 4px meer dan font-size is. Bij een heading zelfde of zelfs iets minder. Maar kijk vooral wat goed staat en leesbaar is.

Je kan bovenstaande op een table zetten, maar het is niet gegarandeerd dat een td de styling meekrijgt van de table zoals het geval is bij webbrowsers.

Elke mail-client toont teksten. Deze zijn ook belangrijk in je mail. Je wilt een boodschap overbrengen. Web safe fonts van 16px zijn het beste te gebruiken. Zie een typography overzicht bij Mailchimp. Zorg er qua styling voor dat jezelf alles bepaalt en niet de mail-client, dan weet je zeker dat het er uitziet zoals je bedoelde. Gebruik geen afbeelding als fallback om een font te laten zien. Veel clients blokkeren afbeeldingen op default. Gebruik dan fonts die erg lijken op jouw font, kijk op ffffallback.com. Je kan web-fonts inladen via @font-face, <link> en @import in een style block in de header. De laatste werkt het beste, maar heeft ook beperkingen.

Responsive

Zorg er voor dat je mail mobiel vriendelijk is. Mails worden tegenwoordig veel op mobiel bekeken. Je kan media-queries gebruiken, maar niet alle mail-clients kunnen er mee overweg. Grootste deel wel. De media-queries kunnen in de head gezet worden, want de mailclients die de head laten staan, zijn ook degene die overweg kunnen met media-queries.

De 2de table element in de template heeft een vaste breedte omdat sommige mailclients (o.a. veel Outlook) niet met percentage kunnen omgaan. Om er voor te zorgen dat deze vaste breedte op mobiel overschreven wordt zetten wij in een mediaquerie:

@media screen and (max-width: 600px) {            
   table[class="fluid-table"] {
	   width: 100% !important;
    }
}

De table die de vaste waarde van bijvoorbeeld 600px heeft gekregen, krijgt ook class="fluid-table". Voor mail op mobiel kan je verder nog kijken of je lettertype juist groter maakt en bepaalde ruimtes tussen linkjes en logo's ook groter. De belangrijkste mail-client die niet om kan gaan met media-queries op elk platform is: Gmail

Artikelen:

Afbeeldingen

Gebruik:

jpg. Wordt goed ondersteund.
png. Voor transparante afbeelding deze gebruiken. Vaak iets groter dan jpg
gif. Voor animatie deze gebruiken. Nadeel is dat ze vaak erg groot worden.

Afbeeldingen worden vaak geblokt, zorg er voor dat ze niet belangrijk zijn voor je verhaal en plaats een alt-text die je ook styling meegeeft door inline styling op het img element te plaatsen. Het beste is ze in te laden met een absoluut pad. Zet ze dus ergens op je server. Verschillende mail clients zetten ruimte om een afbeelding, daarom display: block; toepassen op een afbeelding. Voor retina kan je het beste een afbeelding dat 2x zo groot is nemen en op de img de juiste breedte meegeven. Zorg voor compressie via software voor dat je de afbeelding online zet.

Gebruik vspace="10" hspace="10" voor padding om afbeeldingen heen in Outlook.

<img src="img/fluid-images.jpg" width="240" height="130" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 240px; height: 130px;" alt="Fluid images" border="0" class="fluid-image">

<img src="responsive-email.jpg" width="500" height="200" border="0" alt="Can an email really be responsive?" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px;" class="fluid-image">

We kunnen deze afbeelding schaalbaar maken door het volgende in een media-querie en de head van de template te stoppen:

img[class="fluid-image”] {
   width:100% !important; 
   height: auto !important;
}

Links

Zet links niet te dicht op elkaar, op mobiel kan je dan niet goed de juiste link klikken. Je kan het font iets groter maken of de line-height iets hoger zodat er meer ruimte om een link zit om aan te klikken.

iOs maakt van onderstaande elementen een link die aanklikbaar is, hierdoor krijgt het de standaard styling van een link. Je kan dit ondervangen door een span met een class er op om heen te zetten. Geef de class in je style block in de header de styling mee die je graag wilt zien. Plaats ook een !important er achter zodat je zeker weet dat inline styling overschreven wordt.

data (lijkt er op dat alleen data in de toekomst dit doen)
telefoonnummers
adressen
tijd
email-adressen

Deze kan je ook niet laten detecteren en dan gebruik je:

<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">

Gebruik je bovenstaande manier, dan haal je styling en functie weg, dus zijn de links ook niet meer aanklikbaar.

Voor alleen telefoonnummers kan je in de style tags in de head zetten:

a[href^=tel]{ color:#F00 ; text-decoration:none ;}

Volgens Litmus is de beste manier om spans met een class er om heen te zetten en die dan te stylen.

.appleLinksWhite a {color: #ffffff !important ; text-decoration: underline ;}  .appleLinksBlack a {color: #000000 !important ; text-decoration: none ;}
<span class=”appleLinksBlack”>+32(0)612345678</span>

Mijn ervaring van het zetten van een border-bottom via een span is dat Outlook er een hele border van maakt en niet alleen op de bottom. Voor een rij getallen die je onder elkaar zet en wilt tonen als optelling werkt deze techniek niet.

Buttons

Gebruik voor buttons geen afbeeldingen, die worden geblokt en weg is je knop op het eerste gezicht. Je kan VML-based knoppen maken. Nadeel hiervan is dat ze niet makkelijk aan te passen zijn, niet onderhoudbaar zijn, slecht leesbaar voor een designer/ ontwikkelaar. (Zie bij tools bulletproof email buttons). Handiger is in een td een anchor link te plaatsen en de styling op de td te zetten met een padding. Nadeel is dat niet elke mail-client padding accepteert en de link is alleen aanklikbaar en niet de hele knop. (Foundation for email; http://foundation.zurb.com/emails/docs.html#buttons). Of een anchor link in een td plaatsen en op de link dikke borders plaatsen. Te dikke borders worden niet geaccepteerd door Outlook. Maak ze dus niet te dik of probeer een variant van laatst genoemde en bovenstaande.

    <table border="0" cellspacing="0" cellpadding="0" class="responsive-table">
        <tr>
            <td align="center">
                <a href="#" target="_blank" style="font-size: 16px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #666666; text-decoration: none; background-color: #5D9CEC; border-top: 15px solid #5D9CEC; border-bottom: 15px solid #5D9CEC; border-left: 25px solid #5D9CEC; border-right: 25px solid #5D9CEC; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;" class="mobile-button"> Learn More → </a>
            </td>
        </tr>
    </table>

HTML en CSS en JS

Gebruik tables voor neerzetten van je email. Gebruik simpele CSS, veel CSS3 wordt niet ondersteund door verschillende mail-clients. De nieuwere Outlook's ondersteunen CSS zeer slecht. Pixel perfect stylen gaat je waarschijnlijk niet lukken of na veel extra tijd. Zet de styling in de head en inline of alleen inline. Gmail stript de <head> en dus ook de <link> en <style> tag. Geen shorthand bij schrijven van CSS. Schrijf het vol uit, dit geeft de meeste garantie dat het getoond wordt.

CSS3

Van CSS3 kan je gebruiken:

border-radius
box-shadow
text-shadow
transform (voor aanpassingen aan de grote of iets scheef laten staan)
animation: Met transition of @keyframes, beide in de head plaatsen. Of gebruik een gif, denk aan grote en outlook toont 1 beeld.

JavaScript: niet gebruiken omdat email clients dit er uit halen vanwege veiligheid.

Reset styles

   <style type="text/css">       
    /*////// RESET STYLES //////*/       
        p{margin:0 0 10px 0;} 
        a{word-wrap:break-word;}  
        table{border-collapse:collapse;}        
        h1, h2, h3, h4, h5, h6{display:block; margin:0; padding:0;}       
        img, a img{border:0; height:auto; outline:none; text-decoration:none;}        
        body, #bodyTable, #bodyCell{height:100%; margin:0; padding:0; width:100%;}

    /*////// CLIENT-SPECIFIC STYLES //////*/
        #outlook a{padding:0;}      /* Force Outlook 2007 and up to provide a "view in browser" message. */
        @-ms-viewport{width:device-width;}      /* Force IE "snap mode" to render widths normally. */
        img{-ms-interpolation-mode:bicubic;}        /* Force IE to smoothly render resized images. */      
        table{mso-table-lspace:0pt; mso-table-rspace:0pt;}      /* Remove spacing between tables in Outlook Desktop. */   
        .ReadMsgBody{width:100%;} .ExternalClass{width:100%;}       /* Force Outlook.com to display emails at full width. */       
        p, a, li, td, blockquote{mso-line-height-rule:exactly;}     /* Force Outlook Desktop to render line heights as they're originally set. */
        a[href^="tel"], a[href^="sms"]{color:inherit; cursor:default; text-decoration:none;}    /* Force mobile devices to inherit declared link styles. */       
        p, a, li, td, body, table, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;}    /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */        
        .ExternalClass, .ExternalClass p, .ExternalClass td, .ExternalClass div, .ExternalClass span, .ExternalClass font{line-height:100%;}    /* Force Outlook.com to display line heights normally. */
        a[x-apple-data-detectors]{color:inherit !important; text-decoration:none !important; font-size:inherit !important; font-family:inherit !important; font-weight:inherit !important; line-height:inherit !important;}     /* Force iOS devices to heed link styles set in CSS. */
    </style>

Outlook

Outlook 2007+ op Windows hebben Word als hun rendering engine en daardoor is het een beperkte mail client. Die op de Mac heeft daar geen last van, die is gebaseerd op webkit. Om te zorgen dat Outlook mee werkt kan je conditinal comments gebruiken.

Outlook toont geen gif's, alleen het eerste frame. Outlook.com filtert the CSS background-image property.

<!--[if mso]>
   /* Plaats HTML en CSS hier */
<![endif]-->
<!--[if (IE)]>
   /* Plaats HTML en CSS hier */
<![endif]-->

Outlook.com targeting is ook met:

.ExternalClass div[class="ecxmyclass"]

Gmail

Filtert id's en classes en verwijderd de style tag uit de header. Vanwege deze mailclient is het gebruik van inline styling zo belangrijk. Hierdoor kan je ook geen media-queries gebruiken, want die staan in je style tag in de header en worden er dus uitgesloopt.

iOs

In iOs krijgen linkjes voor adres, telefoonnummer, mailadres een blauwe kleur. Als je dit niet wilt zijn er verschillende oplossingen. De handigste is:

In de header:

.appleLinksWhite a {color: #ffffff !important; text-decoration: underline;}
.appleLinksBlack a {color: #000000 !important; text-decoration: none;}

In de table:

<span class=”appleLinksBlack”>866-787-7030</span>

Standaard

Er is geen email standaard. Alles gebeurd op basis van good practices. Er zijn verschillende pogingen ondernomen om tot een standaard te komen maar de mail-client bouwers gaan er niet in mee.

Tools

Testen

Bij de mail heb je verschillende mailclients. Deze tonen niet alle CSS die je gebuikt. Dit verschilt per client. Het verschil hierbij is veel groter dan bij de browsers. Er zijn ook meer clients die gebruikt worden. We spreken dan over desktop en mobiel. Om er voor te zorgen dat de mail in de meest gebruikte clients goed toonbaar is kan je allemaal clients installeren. Dit zal je nooit helemaal lukken. Verschillende apparaten zorgen voor verschillende clients. Dat zijn er uiteindelijk zoveel dat het te kostbaar wordt. Je kan een abonnement nemen op Litmus email testing of Email on Acid (bij acid kan je credits kopen om per keer een mailtemplate te testen). Hier kan je makkelijk een mail template testen. Of neem een gratis account op Mailchimp. Zet daar je template in en laat je template testen voor $3,- per test. Dit kan goedkoper zijn dan een abonnement op een test applicatie.

Mailchimp test route

Bij Mailchimp kan je een gratis account aanmaken. Hier kan je een account aanmaken. De template die je hebt gebouwd kan je hier inplakken, aanpassen op basis van de preview die je ziet en daarna kan je deze via de knop Run inbox inspection laten testen. Je kan een abonnement nemen van $10,- p/m en dan is het gratis. Of een eenmalige test kopen voor $3,-. Voordeel van dit laatste is dat je niet aan een abonnement vast zit. Nadeel is dat je na 1x testen en nog aanpassingen maken nog een x zou moeten testen en je kan maximaal 10 clients kiezen. En dat zou weer geld kosten.

Mail-clients

Op Email Market Share kan je zien welke mail-clients welk aandeel hebben qua gebruik. Mail-clients veranderen eens in de zoveel tijd. Test je mail-templates om de zoveel tijd.

Meest gebruikte mail clients in Nederland

Hier ben ik nog niet achter. Ik denk dat het vrij gelijk loopt met die wereldwijd.

Spam filters

Check de woorden in je mail bericht ivm dat je in een spam-filter kan komen.

Handige theorie linkjes

Boek: Modern HTML email (vooor beginners volgens de schrijver)
Boek: Professional email design
Tips voor het bouwen van een template voor de te gebruiken html en css
Tools for coding HTML emails
Responsive email resources
Responsive email patterns
Overzicht van Mailchimp (aanrader!)
Verschillende artikelen over bouwen en designen van email
Workflow voor bouwen van een mail
Litmus community learning
Overzicht voor code inliners

Overig

People to follow

Bedrijven om te volgen

Cursussen

Om meer te leren over het bouwen van mail templates heb je verschillende cursussen en een conferentie.

Conclusie

De wereld van email-design en coding is een wereld apart. Je kan hiervan je werkgebied maken zonder dat je verder bezig hoeft te houden met het bouwen van websites. Het is een werkgebied dat ook zeker in ontwikkeling is, helaas minder snel dan de mensen die er in werken zouden willen. Maar er gebeurt genoeg. Naar mijn idee is dit ook voor front-end ontwikkelaars een tof vakgebied.

Data visualisatie; een startpunt

2016-04-20T00:00:00Z

Bij Zorgweb (het bedrijf waar ik als UX-developer) werkte verzamelden we veel data. De data die we verzamelden heeft alles te maken met de financiering, toegang en kwaliteit van zorg. En dat is veel data. Omdat we juist zoveel met data bezig zijn, willen we kijken of datavisualisatie ook iets voor onze data is en zo ja, wat en/of hoe dan precies.

Ik heb mij hiervoor verdiept in datavisualisatie. De hieruit voortgekomen informatie heb ik verzameld en publiceer ik hier. Het zijn opmerkingen, linkjes die voor mij belangrijk zijn, het geheel is niet altijd een goed lopend verhaal. De reden dat ik het hier publiceer is dat anderen er iets aan kunnen hebben of dat ik feedback ontvang zodat ik weer nieuwe inzichten op doe.

Wat is datavisualisatie?

Datavisualisaties laten op een visuele manier je data zien. Dit kan een zo getrouw mogelijke weergave zijn omdat een wetenschapper daar om vraagt, maar kan ook een vereenvoudigde weergave zijn opdat de doelgroep beter begrijpt wat je wilt overbrengen. Dan is het beter om randzaken weg te laten.

Naast data visualisaties heb je infographics. Naar mijn idee is een infographic een vereenvoudigde weergave van je verhaal om iets uit te leggen. Je laat zien hoe iets werkt, hoe een proces in elkaar zit, waarom iets zo gebeurt, de getallen die ergens bij horen. Data visualisaties tonen de relaties tussen de verschillende data. Een datavisualisatie wil de data tonen, maar ook dat je begrip krijgt van de getoonde data en de verhoudingen tussen de data ziet.

Data visualisaties en infographics hebben verschillende uitingsvormen. Kunnen foto's zijn van eigen gemaakte stellages, of tekeningen die met de hand zijn gemaakt of juist met de computer, verzameling van data, veel lijnen die data of verbindingen voorstellen, kleurig, pizzapunt grafieken, etc. Voor wetenschappelijke infograhics is een tekening vaak beter want deze vertelt het verhaal beter dan een foto. In een foto heb je zaken die afleiden van je verhaal. Let bij een vereenvoudiging op dat iedereen deze hetzelfde interpreteert. Test dit goed. Iedereen kijkt er weer anders tegen aan.

Een data-visualisatie kan middels een infographic, maar een infographic hoeft geen datavisualisatie te zijn. Datavisualisatie en infograpics zijn de sterke uitleg tools.

Wat kan je met een datavisualisatie?

Een datavisualisatie gebruik je zodat mensen het verhaal achter de data op een visuele manier kunnen interpreteren opdat ze het beter kunnen begrijpen. Steeds vaker zie je storytelling gebruikt worden om o.a. nieuws, data over te brengen op de bezoeker van een website. Hele lappen tekst lezen we niet graag vanaf een beeldscherm en juist het visuele is de sterke kant van het web. Datavisualisatie maakt juist gebruik van dat visuele deel zodat mensen zich beter kunnen informeren. Hierdoor heb je ook dat je sneller de de data eruit kan halen.

Daarnaast kan je de data die je hebt visualiseren om te kijken of je verbanden kan vinden. Door het kleuren of anders weer te geven zie je juist verbanden die je anders niet zou zien. Speel met je eigen data.

Vertel de waarheid en hou je datavisuals overzichtelijk.

Voor data visualisatie heb je nodig:

data die je wilt tonen
het verhaal achter de data die je wilt vertellen/ je doel van het tonen van de data
een design voor het tonen van de data
het bouwen van het design
het koppelen van de data met het design

Zie het artikel what makes a good data visualization om te zien waaruit een goede data visualisatie bestaat. Een data visualisatie gebruik je om iets uit te leggen, het is een information tool. Visualisaties worden makkelijker bekeken en gedeeld met anderen.

Zorg er voor dat een infographic of een data visualisatie to the point is. Je moet makkelijk kunnen zien waar het over gaat.

Information design skills zijn handig om te hebben als je data wilt omzetten in een verhaal dat je vertelt.

Met een data visualisatie kan je getallen die je anders niks zeggen, omdat het om bijvoorbeeld hele hoge bedragen gaat, uitbeelden en in verhouding met anderen tonen waardoor het meer gaat leven. Juist het tonen van de relatie tussen de getallen is belangrijk. Zorg er voor dat je voor een datavisualisatie de juiste vraag stelt.

Een data visualisatie kan er voor zorgen dat mensen die anders niet geinteresseerd zijn, toch de materie induiken omdat het op een visueel aantrekkelijke manier getoont wordt. Zorg er dus voor dat je visualisatie er aantrekkelijk uitziet. Dan hebben mensen ook eerder de neiging te geloven wat ze zien. Maar als kijker wees op je hoede want een aantrekkelijke visualisatie hoeft niet altijd de waarheid te zijn. De Russen gebruikten veel infographics om te laten zien hoe goed het ging, maar dit was meer propaganda.

Een gehoorde quote op het Nederlandse Infographic congres 2016 in Zeist geeft duidelijk weer waar infograhics en data visualisaties goed in zijn; "Beauty opens other people minds".

Story-telling

Data visualisatie kan een data storytelling zijn, je vertelt een verhaal aan de hand van de data die je toont. Zorg hierbij ook voor interactiviteit voor de gebruiker. Deze kan door iets aan te passen zien wat er veranderd, bijvoorbeeld in de tijd.

Interessante voorbeelden van storytelling zijn:

Wie doen iets met data-visualisatie?

Data journalisten, zie The Guardian en 7 data journalism blogs cq. kranten
Data analisten
Infographic designers
Information/ data designers
Motion designers/ animators
Grafisch designers
Illustrators
Programmeurs
Wetenschappers
Story-tellers
Bedrijven die statistieken bij houden zodat klanten daar weer verder mee kunnen
Bedrijven, kan van alles zijn. Maar dan als klant die iets wil tonen.

Workflow beschreven door Sheila Pontis:

Problem understanding
User/audience understanding
Subject matter understanding
Simplification
Design proposal(s)
Design
Evaluation
Refinement & Implementation

Punt 1 t/m 5 zijn het nadenk deel. Punt 6 t/m 8 zijn het doen deel.

Zorg er voor dat je structuur en order aanbrengt aan je dataset zodat je de data kan begrijpen, pas als je de data begrijpt kan je er mee werken.

Bij het maken van afspraken is het belangrijk dat je afspreekt: what, how, by whom, by when, result.

Je ziet vaak gebeuren dat er eerst een idee is en dat daarna de data erbij gezocht wordt.

Om zelf infographics te gaan designen kan het handig zijn om te gaan schetsen van alledaagse dingen. Hierdoor leer je goed kijken en kan je een infographic ook beter schetsen.

Denk na over je eigen proces. Blijf nadenken.

Voorbeelden van visualisaties

Libraries

Tools

Geo visualisatie tools

CartoDB
Google Maps
Leaflet

Conferenties en studie mogelijkheden

Workshops, curssussen en handleidingen

Boeken

Bedrijven

Sheila Pontis; Interessante info
Information is Beautiful; Interessante boeken en workshops
Getting the picture; Nederlands bedrijf

Bedrijven die visuals maken

Datagraver; Nederlands bedrijf die op zoek gaat naar data
Visual Cinnamon; freelancer voor maken van (online) data visualisaties designs
John Grimwade; information graphics
In 60 seconds; Nederlands bedrijf, die voor o.a. nu.nl infographic filmpjes maken, voorbeeld over de zorgverzekering voor ONVZ
CleverFranke; bouwt wereldwijd online visuals.
Accurat

Overige

CMD Amsterdam lezing
Infoposters Are Not Infographics: A Comparison
Google News Lab
Market Cafe Mag; een papieren magazine
Nightingale; papieren magazine
Het verhaal van 5 jaar Pixelpillow
Day of data; datavisualisatie in de klas

Communicatie met online webformulieren

2016-12-13T00:00:00Z

Het internet is begonnen als een netwerk van computers om informatie met elkaar te delen. Hierbij was, naar mijn idee, de <a> tag het belangrijkste element. Hiermee zorgden en zorgen we nog steeds voor dat informatie aan elkaar gelinkt wordt. Zo kan je van het ene naar het andere springen. Hiermee kunnen we uren zoet zijn, zonder dat we door hebben wat we aan het doen zijn :-). We noemen dit surfen. Het toffe van het linken van informatie is dat de informatie die met elkaar te maken heeft aan elkaar gelinkt kan worden, waardoor je makkelijk kan verwijzen naar andere informatie.

In de loop der jaren is het internet geeëvolueerd tot een medium waar niet alleen maar informatie te vinden is, maar waar je ook mee kan interacteren. We kunnen nu via webformulieren informatie verzenden en zo zijn er nog meer mogelijkheden tot interactie met een website. Aangezien mijn werkveld webformulieren behelst hou ik mij hier tot deze interactie. Doordat de interactie tussen websites/ applicaties en gebruikers steeds belangrijker geworden is, zijn onderwerpen als interactie design ook steeds belangrijker geworden.

De interactie van de gebruiker met een webapplicatie bestaat uit wat je ziet als gebruiker en waardoor je weet hoe je de applicatie/ website kan/moet gebruiken. Dit heeft te maken met uiterlijk. Daarnaast speelt de manier hoe je interacteert met de applicatie. In het begin van het internet was dit via desktop computers met een toetsenbord en muis, de stem begon later zijn entree te maken, nog weer later kwam het touchscherm en zo is de ontwikkeling mbt communiceren met een webapplicatie steeds verder gegaan. Dit is allemaal bedoelt om de communicatie makkelijker en prettiger te maken voor de bezoeker, maar ook voor degene van wie de applicatie is, want meer gebruikers die makkelijker door je applicatie gaan betekent waarschijnlijk meer omzet.

Jason Grigsby heeft een kort filmpje online gezet waarin hij laat zien wat er qua input mogelijkheden is veranderd, vanuit Apple oogpunt. Je ziet dat de ontwikkelingen vooral de laatste jaren heel snel gaat.

De manier van interacteren wil ik opsplistsen in 2 manieren. Namelijk welke middelen gebruik je om te interacteren en de ander is hoe verloopt de interactie, dus wat is het uiterlijk en de vorm van de interactie.

Input middelen

Ik werd wakker geschud voor Jason Grigsby tijdens de Fronteers Conferentie van 2016. Zijn talk ging over Different input types. Als eerste dacht ik aan verschillende soort input velden, zoals date, password, email, etc. Maar tijdens zijn talk kwam ik er achter dat het ging over middelen om input te geven aan een webapplicatie/site. De meeste manieren van interacteren met een applicatie/website kende ik al. Maar de manier waarop hij er over sprak was een eye-opener.

Zijn conclusie was/is dat we goed moeten opletten en ons niet moeten vastleggen op een bepaalde input manier, maar er voor zorgen dat de applicatie/website met alle middelen overweg kan. Zo open en breed mogelijk. Waardoor je waarschijnlijk ook voor toekomstige manieren bouwt.

Afgelopen jaren zijn er steeds meer input mogelijkheden bij gekomen en we weten niet wat er nog meer gaat komen. Hou daar dus rekening mee in het bouwen van je applicatie en zet het niet vast op een bepaalde invoermogelijkheid. Dit gebeurde eerder en nog steeds bij beeldschermen. We zetten de website op een vaste breedte, maar er zijn zo veel schermen dat je niet weet wat de juiste vaste breedte is. Dus beter flexibel/ adaptief bouwen.

De manier van invoer is niet betrouwbaar te detecteren. We kunnen dat dus niet gebruiken als parameter om iets op te bouwen. Net zoals we niet kunnen uitgaan van telefoon is touch en desktop is keyboard en muis. Tegenwoordig is desktop ook touch. Vaak denken we vanuit onze eigen manier van communiceren met een applicatie. Hierop baseren we wat de prettigste of beste manier is. Dat hoeft natuurlijk niet zo te zijn.

De les die je hier uit kan trekken is; bouw zo adaptief mogelijk zodat je applicatie toekomstig bestendig is. Luke W laat middels een afbeelding zien dat beelschermgrootte en touch of geen touch niet met elkaar samen hangen.

Mijn opsomming van een aantal middelen waarmee je kan interacteren met een website/ applicatie met daarbij een korte uitleg en/of voorbeeld.

Toetsenbord
Toetsenbord kennen we allemaal, deze kan bedraad of niet bedraad zijn. het Qwerty toetsenbord is volgens mij het meest gebruikt, maar er zijn ook andere indelingen.
Muis
De muis komt in verschillende vormen, bedraad, draaloos, met scroll wiel met touch scrollwiel, etc.
Touchscreen
De iPhone kwam met een touchscreen, nu is het ingeburgerd bij zowel kleine computers (smartphones en tablets) en grotere desktop computers. In het design van je website heb je hier rekening mee te houden zoals grotere knoppen omdat je rekening houdt met vingers die klikken ipv een muis.
Stem
Zou toch heerlijk zijn als je vragen op een formulier niet hoeft te typen, maar in een gesprek met je computer kan beantwoorden. Heerlijk in conversatie modus. Maar hoe doe je dat met accenten, dialecten? Die moet de computer allemaal begrijpen. Dus nog een hele klus ligt er voor ons. Mooi beschreven in een voorbeeld op The future of webforms.
Gelukkig zijn er al beginnetjes mee. Er is een Web Speech api voor de webbrowser. In Chrome kan je op Google met je stem een zoekopdracht geven. Verder hebben ze bij Google nog interessante demo's.
Bewegingen
Hierbij kan je denken bewegingen van je lichaam(sdelen) die geregistreerd worden door een camera (zie xbox). Maar ook aan bewegingen met je tablet of telefoon. Door de gyroscoop kunnen deze bewegingen geinterpreteerd worden en een actie aan verbonden worden.
In de webshop Warby Parker kan je een bril op het hoofd van het model beter bekijken door je telefoon te bewegen. En op de desktop gebeurd dit middels de muis.
Aan een weggooi beweging zou je de actie van iets weggooien/ verwijderen kunnen verbinden. Leuk voorbeeld is de Paper Planes website. Hier kan je een papieren vliegtuig vouwen en met je telefoon weggooien. Hou je telefoon goed vast als je de gooi beweging maakt.
Camera
Een voorbeeld van gebruik van je camera is het scannen van een QR-code in bijvoorbeeld de ING-app om geld over te maken. In Azië kan je middels QR-codes te scannen boodschappen bestellen in de Metro die 's avond bij je bezorgd worden.
Foto van je creditcard om gegevens er uit te halen en makkelijk op te nemen in een betaal-formulier.
Voor Zorgweb zouden we kunnen denken aan het scannen van je verzekeringspas om je huidige verzekering te weten.
Vingerafdrukken
Over een paar jaar kan je misschien een zorgverzekering aanvragen via je vingerafdruk op je touchscreen. Nu kan je middels vingeafdruk je iPhone inschakelen.
GPS
Hebben we ingebouwd in de zorgzoeker van de Amersfoortse. Die bepaalt dan waar je in de buurt bent en en neemt dat adres als uitgangspunt.
Hololens
Hoe lang zal het nog duren voordat mensen hun zorgverzekering aanvragen via de Hololens.

Nieuwe interactie vormen

Naast de nieuwe input mogelijkheden merken we dat veel gebruikers online de menselijke interactie missen bij een applicatie. Soms is iemand die je helpt toch erg prettig, even die menselijke interactie, die goedkeuring dat het klopt wat je denkt en doet. Langzaamaan wordt hier ook mee geeëxperimenteerd. Verschillende mensen zetten voorbeelden online waarin ze proberen om de interactie tussen mens en machine menselijker te maken. Reden hierbij is natuurlijk een prettigere beleving en meer gebruikersgemak, maar wat ook meer conversie kan betekenen.

Voorbeelden van deze meer menselijke interactie kan je vinden op:

Conversational form
Een formulier waarin het gesprek wordt aangegaan met de bezoeker Introductie tot de conversational form
With Jack
Hier kan je in de praktijk zien wat ze beschrijven in het artikel over de Conversational form. Het aanvragen van een quote voor een verzekering kan op een menselijker manier bij With Jack.
Independer
Independer probeert dit ook. Je ziet veel foto's van werknemers van Independer die je aankijken en een bericht aan je communiceren. Ze laten zien met wie je belt. Heb je de eerste gegevens ingetypt, zie je iemand die verwijst naar een tekstje. Hierin kan je klikken op een knop zodat je via teksten op de website extra hulp krijgt. Daarnaast kan je bellen.
Autofill
Maak het invullen van je formulier makkelijker met autofill.

Afsluiting:

We gaven onze websites een vaste breedte passend bij het gemiddelde scherm van dat moment, totdat we merkten dat het niet werkbaar was toen er een explosie kwam van verschillende schermen. En moesten we onze werkwijze aanpassen.

Met input mogelijkheden staat dit ook weer te gebeuren. We gaan uit van muis, toetsenbord en een beetje touch. Maar er zijn nog meer mogelijkheden. Houden we daar al rekening mee? Bouwen we adaptief genoeg dat we ons snel kunnen aanpassen? Wij als bouwers zijn niet degene die bepalen wat de beste input is. Wij moeten mogelijk maken dat alle gebruikers van een website makkelijk door de site heen kunnen. Test dus veel, ook met nieuwe manieren van input types en interactie vormen. Kijk wat goed werkt voor de gebruiker en bouw daar op verder.

We zijn aangekomen bij een interessante tijd voor webapplicaties die de conversatie aangaan. Wij, die deze applicaties neerzetten, willen graag informatie van de website/applicatie bezoeker. Hoe zorgen we hiervoor? Hoe maken we het de bezoeker makkelijk?
We zullen steeds meer de conversatie proberen aan te gaan met de bezoeker van de website/applicatie. We hebben hier steeds meer middelen voor, zoals de Web Speech API in de browser. Maar voordat dit echt op een goede manier ingezet kan worden kunnen we gebruik maken van foto's, persoonlijke teksten, makkelijk te doorlopen formulieren. Een belangrijke rol zal animatie en storytelling hier in krijgen. Ik verwacht dat deze middelen je zo door het proces heen loodsen zonder dat je als bezoeker in de gaten hebt dat je door een proces heen loopt. En dat je als bezoeker een goed gevoel overhoudt aan de conversatie met de website/applicatie.

Meer info/ bronnen:

Wat is design?

2017-01-04T00:00:00Z

Naar mijn idee moest een designer iemand zijn die heel creatief is. Heel simpel gezegd, iemand die kunst maakt, eigenlijk gewoon iemand die mooie dingen maakt.

Nu ik mij steeds meer verdiep in wat design is merk ik dat er veel verschillende type designers zijn. Eigenlijk is een designer een probleem oplosser, iemand die creeert en/ of zaken handiger maakt. Het hoeft niet iemand te zijn die kunst creeert, maar het kan ook iemand zijn die creatief kan denken en zo tot andere oplossingen komt, die iemand anders dan inkleurt of creeert. Misschien is het beter een designer wel een oplossingen bedenker te noemen. Een designer is iemand die oog heeft voor het probleem van iemand en hiervoor een oplossing zoekt. Ze zorgen er voor alleen of samen met anderen dat die oplossing er komt.
Ben je dus niet veel meer een proces begeleider? Zoals genoemd in Hoe design thinking je helpt bij het oplossen van complexe problemen van Willem Plaisier. Hierin staat dat een designer organisaties uitdaagt en prikkelt om te helpen keuzes te maken in positionering en profilering. Je bent geen designer maar je designt. Designen als proces, ook wel design thinking genoemd. Dit proces is niet alleen weggelegd voor de "creatieven". Iedereen kan een bijdrage leveren aan de oplossing/verbetering.

Ik heb het idee dat een designer niet meer bestaat. Er wordt met en voor zoveel verschillende onderwerpen gewerkt en dan heb je ook nog verschillende design functies. Dit maakt het voor mij complex om te zeggen wat design is. Hierdoor is design ook weer interessant want design is niet meer het visuele deel waar ik dan aan denk, maar zo veel meer.

Dit artikel schrijf ik om voor mijzelf de informatie die ik verzamel te ordenen. En misschien heeft iemand anders er ook wat aan. Ik onthoud beter wat ik heb opgezocht en zo heb ik een mooi verzamelpunt van interessante informatie om af en toe door te nemen en aan te vullen.

Design werkgebieden

Ik merkte in de afgelopen jaren dat design vele gebieden beslaat. Waarbij overlap is tussen de verschillende gebieden. Naar mijn idee kan ik niet spreken van een designer. Want wat doet zo'n designer dan precies? En soms wordt er gesproken over een designer en wordt iets anders bedoelt dan de luisteraar denkt omdat deze niet in het werkgebied zit.

Hier een opsomming van de verschillende design gebieden die ik ben tegengekomen.

Product design

Terwijl ik mij aan het inlezen ben vraag ik mij af of product design niet het overkoepelende werkgebied is van design. Je maakt/ creeert altijd een product, dat is juist wat design is. Een product is een vast iets, maar kan ook een cursus of bijeenkomst zijn.

In A behavioral approach to product design beschrijven ze hoe ze van het gedrag van gebruikers uitgaan om in verschillende fases het gedrag te beinvloeden.

Service design

Zoals product design om producten gaat, gaat service design om diensten en ervaringen. Als je wilt dat een dienst of ervaring op een bepaalde manier plaats vindt omdat je wilt dat een gebruiker die zo behoort te krijgen. Dan moet je nadenken over die dienst en ervaring. Hiervoor heb je designers die daar in gespecialiseerd zijn.

Het kan hierbij gaan om de ervaring die iemand heeft als deze een bepaald product koopt of contact opneemt met de helpdesk. Een term die hier bij hoort is customer journey. Je zorgt voor een klant beleving. Of een rondwandeling in een museum, hoe geef je dit vorm? Welke ervaring wil je bezoekers meegeven?

Op de site Emerce hebben ze een artikel gewijd aan het uitleggen wat Service Design precies is. Het magazine Touchpoint gaat over Service design. Wil je dus meer lezen is dit magazine misschien wel interessant. Er is ook een Service Design Conferentie.

UX design

User Experience gaat uit van de gebruiker. Hierbij moet je denken aan of alles op de juiste plek staat, waar in de flow komt wat, staan knoppen op een handige plek, moeten er meerdere knoppen komen of niet, sluit het aan bij wat de gebruiker verwacht, etc. Een UX designer is degene die vaak de Wireframes maakt, dus schetsen van de gehele flow zodat je een eerste indruk hebt.
Ziet steeds vaker dat gezegd wordt dat deze functie niet bestaat. Het is een te grote verzamel naam. Lastige is dat de één dit zegt en een ander zegt dat. Kom er als leek dan maar uit. Belangrijkste is dat de gebruiker centraal staat en van daaruit de applicatie ontworpen wordt.

Tools die gebruikt worden voor UX zijn o.a. wireframe tools:

Pagina's om meer over UX te weten te komen:

Interactie design

Interactie design is een onderdeel van UX. En voor sommigen misschien ook wel hetzelfde. Voor mij gaat interactie design over het bedienen van het product. Kan een gebruiker er mee werken en gaat dit op een makkelijke/logische manier voor de gebruiker. Belangrijk bij UX en Interactie design is het testen van de applicatie. Is zoals het bedoelt is ook zoals de gebruiker het gebruikt?

Pagina's die meer vertellen over Interactie Design:

Brand design

Kijkt naar de uitstraling van een product en/of bedrijf. Hoe wilt een bedrijf gezien worden? Wat zijn de missie en visie, normen en waarden? Welke uitstraling past daar bij? En klopt die uitstraling ook met hoe het bedrijf echt is. Hier komt veel psychologie bij kijken.
Brand design is er voor bedoelt om een emotionele binding te veroorzaken bij de klanten. zodat klanten niet snel zullen overstappen. Een gebied dat mij intereseert.

Een interessante uitleg van wat een Brand is van David Scott. Volgens hem is een Brand de relatie tussen klant en bedrijf.

Wil je meer weten over de Huisstijl van een bedrijf is het boek De Huisstijl eentje die mij aangeraden is om te lezen.

Een mooi voorbeeld van Brand Design is die van Uber. Hier staat alles precies beschreven.

Ook vormen van Brand design zijn styleguides waarin te zien is hoe een merk er online uit wil zien. Hier is niet altijd een missie of een visie uit te halen en/of waarom daarvoor gekozen is. Voorbeelden hiervan zijn te vinden op Brand guide voorbeelden.

Brand design is natuurlijk veel verder te trekken. Mailchimp laat dit zien in hun styleguide. Hierin staat beschreven hoe teksten geschreven worden, welke toon wordt daarin aangeslagen. Dit is door te trekken naar hoe het bedrijf de telefoon opneemt, wat is de toon in emails, etc. Zo kan naar mijn idee Service design als verlengde van Brand design gezien worden.

Afgelopen jaar was er een Brand design conferentie in Amsterdam. Brand New Conference was voor het eerst in Europa. Een samenvatting is te vinden op Underconsideration.

Een interesante uitspraak over Brand Design komt uit een talk van Thomas Marzano. Waarin hij zegt: "A great brand experience is not about great design skills, it's about great leadership skills". Waarmee hij bedoelt dat een leider zegt wat belangrijk is voor het bedrijf en de gebruikers. Sluit hier op aan met de producten. Zo was bij Apple (zeg gerust Steve Jobs) de leider die zei wat belangrijk was voor de klanten. Dat het makkelijk bedienbaar moest zijn, goed werken en er mooi uit zien. Eigenlijk moest het perfect zijn. Dan pas mocht het de deur uit. Hierdoor kijkt iedereen nu ook op die manier naar Apple. Dat was niet een designer die iets had bedacht, maar het was de visie van een leider die er voor zorgde dat designers ook in die richting dachten.

Een interessante uitleg van wat een Brand is van David Scott.

Om tot een Brand design te komen, kan je een moodboard maken met voorbeelden van wat je vindt passen bij een design. Gebruik bijvoorbeeld foto's, typography, kleuren, etc.

Visual design

De visueel designer is de persoon waar ik vaak aan denk als het over design gaat. De persoon die het uiterlijk mooi maakt. Een visueel designer zorgt er voor dat wat een UX designer vorm geeft met de uitstraling die de brand designer heeft bedacht. Een visueel designer is bezig met kleuren, typography, vormen, verhoudingen, afbeeldingen, contrast. Het visuele gaat om communicatie. Er wordt gecommuniceerd met letters/ woorden, maar ook met kleuren, ruimte en vormen.

Bij visual design gaat het om overbrengen van informatie. Om dit te doen probeer je mensen het beeld in te trekken. Afhankelijk van wat je toont heb je een bepaalde hoeveelheid tijd. Een logo moet direct overbrengen wat de info is, in een boek heb je veel meer tijd. Houdt rekening in je design met de tijd die iemand neemt om de informatie te interpreteren.

Volgens mij hebben veel visual designers een Graphic Design achtergrond. Van daaruit zijn ze de webwereld ingerold.

Leer meer over visual design:

Een visueel designer heeft verschillende gebieden waar hij/zij meer van af moet weten. Dat zijn o.a.:

Kleuren

Kleuren zorgen voor de uitstraling: Kleuren in marketing en branding. Uit deze tekst komen een aantal interessante tips: Doorbreek stereotypen en verwachtingen bij het gebruik van kleuren. Het hoeft niet allemaal hetzelfde te zijn. Kleur is ook afhankelijk van de emotie die mensen verwachten bij het kopen van iets. Kleur keuze moet zorgen voor contrast, niet altijd belangrijk welke kleuren je kiest, als er maar contrast is.

Interessante link over kleuren:

A Nerd’s Guide to Color on the Web

Typography

Er zijn vele verschillende vormen van typography. Ze bepalen voor een belangrijk deel de uitstraling van het product dat je maakt.

Type foundry's:

Leer meer over typography:

Motion design

Motion design zie ik als een aparte tak binnen design, aan de andere kant is het een onderdeel van interactie design.
Motion design kijkt naar beweging de interactie tussen bezoeker/gebruiker en de applicatie kan verbeteren. Dit kan je opnemen in je styleguide, zoals Salesforce heeft gedaan.

Interessante link:

Discover and share moving interfaces

Andere design soorten

Ik noem het maar soorten, kan er zo geen andere woord voor bedenken. Andere gebieden die met design te maken hebben of waarin je werkzaam kan zijn:

Food styling
Boeken opmaak/ design

Design proces:

Om tot een design te komen ga je een proces in. Voor het beschrijven van een design proces is momenteel design thinking hot. Bij IBM hebben ze dit proces beschreven: IBM Design Thinking. Zo ook in het eerdere genoemde artikel van Willem Plaisier staat een heel proces beschreven. Lees dit zeker even voor tips. Dit proces kan je kopieeren of gebruiken voor het samenstellen van je eigen proces.

Bij IBM zien ze hun IBM Design Thinking als een framework om de problemen van hun gebruikers snel op te lossen. Het zorgt er voor dat je gefocused blijft op wat belangrijk is voor je gebruikers.

Ze hebben hiervoor principes:

Focus op de uitkomst voor de gebruiker
Gebruik zelf sturende teams opgebouwd uit diversiteit
Kijk naar het probleem en probeer deze steeds opnieuw te verbeteren

Ze werken vanuit het idee van The Loop:

Observeer
Reflecteer
Maak

Om te zorgen dat de focus goed blijft in het proces:

Hills; de uikomsten voor de gebruikers
Playbacks; momenten van feedback en verhalen vertellen met een stakeholder
Gebruikers; die zorgen dat je in contact blijft met de behoeften van de gebruikers

In het proces waarin uit gegaan wordt van de uiteindelijke gebruiker waarvoor het product beter, makkelijker, mooier gemaakt wordt heeft elke fase verschillende onderdelen die te gebruiken zijn.

Zo kan je starten met schetsen: How to sharpen your sketching skills. Als je met websites werkt kan je dit oefenen door bestaande websites na te schetsen. Ga later een website in je hoofd nemen en probeer aan iemand anders uit te leggen hoe die werkt. Schets dit.

Belangrijk in het design proces is duidelijk hebben wat de doelgroep is. Deze doelgroep bestaat uit een heleboel mensen die anders om gaan met het product. Maar ook anders om moeten gaan omdat ze een bepaalde handicap hebben. Hiervoor is Inclusive design. Microsoft heeft beschreven hoe zij omgaan met Inclusive Design.

Interessant artikel van Google Design over Design reviews

Design by Numbers bedenker Mason heeft een nieuwsbrief waarin hij verteld over het designen van een website. De stappen die hij hierin beschrijft zijn:

Research: Beantwoord in deze fase zaken als; Wat is de doelgroep? Welke inhoud heeft de site? Wat is het doel van de website?
Concept: idee of een style waarom heen je de website bouwt. Ze zorgen er voor dat je website een verhaal worden. Zie het als een thema van een feest, het thema zorgt er voor dat verschillende onderdelen bij elkaar passen. Let bij het kiezen van je concept op de doelgroep
Brand: zorgt voor de realtie tussen bedrijf en klant, dus voor de wesbite en de bezoeker. Wat is de persoonlijkheid van het bedrijf? Welke karaktertrekken heeft het?
Style: Zorgt voor de sfeer van je website. Is het eenvoudig, uitdagend, druk, zwart/wit, sfeervol, etc.
Composition: Zorgt er voor dat de aandacht uitgaat naar datgene waar het om draait op de wesbite. Deel de site op in een aantal blokken, die bij elkaar passen.
Alignment: Zorgt voor rust en orde in je design.
Typography: zorg er voor dat het prettig leest, let op aantal woorden/ tekens op een regel, regelafstand, letterafstand. Zorg er voor dat het type letter past bij je concept.
Hierarchy: Zorg voor verschil tussen elementen zodat de elementen die moeten opvallen dat ook doen. Kan met grootte, kleur, hoog/laag,
Color: Zorgt voor de versterking van je design, legt de nadruk op elementen. Kleur benadrukt je concept. Kleur wordt ook bepaald door je branding. Kleuren kan je op verschillende manieren gebruiken. Geen kleur, 1 kleur, 2 kleuren, complementaire kleuren,
Proximity: laat de relatie tussen elementen zien. Dichtbij elkaar lijkt het bij elkaar te horen.

Toekomst:

In The future of UX design wordt gesproken over de plek die UX designers moeten innemen in een bedrijf. Iets wat ze beschrijven en je nu al meer ziet en steeds meer gebeurt is dat designers een belangrijke rol hebben in de ontwikkeling van producten en dus strategische beslissingen nemen.

Design leren

En hoe nu verder? Ik heb heel wat uitgezocht en merkte hierdoor dat ik mij zelfverzekerder voelde over het leren van design. Ik had altijd het idee dat het niet voor mij was weggelegd, dat heb ik nu niet meer. Komende tijd ga ik meer tijd besteden aan visual design. Ik heb mij ingeschreven voor de nieuwsbrief van Design by Numbers. Die ga ik eerst volgen.

Ben je developer dan is een goede eerste stap het lezen van dit artikel: Mistakes Developers Make When Learning Design. De schrijver Mason maakt hierin op een prettig leesbare manier duidelijk hoe je als developer het beste kan starten met het leren van design. Hij zegt hierin dat je het beste een eerste keuze kan maken tussen UX en visual design. Dat maakt het leergebied al een stuk kleiner. En kies je bijvoorbeeld voor visual design, richt je dan niet op de tools en laat je niet imponeren door de toffe ontwerpen op Dribble. Maar richt je op de zaken waar het echt omgaat in visual design: lettertype, kleur, style, hierarchie, compositie, concept, uitlijning, plaatsing.

Opleidingen/ cursussen:

Interesante video's:

Screenings

Tools:

Sketch

Conferenties:

Design jobs

Bronnen/ interessante artikelen:

Interessante sites:

Waar ik sta als front-end ontwikkelaar (2018)

2018-01-01T00:00:00Z

Afgelopen jaar stond ik op een kruising. En ik weet nu dat ik rechtdoor wil. Verder gaan met front-end technieken en een betere front-end ontwikkelaar worden. Dat betekent geleerde technieken nog beter leren toepassen, nieuwe technieken leren en de wereld achter front-end, zoals standaarden en webbrowsers, beter leren begrijpen. Af en toe zat ik te twijfelen, wil ik hier mee verder en hoe dan, sla ik links of rechtsaf. Ik merkte dat ik buiten mijn werk meer dingen ging oppakken. Werk werd te eentonig. Ik zocht uitdaging en ging dit zoeken op een andere plek.

Wat heb ik geleerd?

Afgelopen jaar heb ik geleerd dat het belangrijk is om verder te leren en niet te blijven hangen. En dat je niet van baan hoeft te wisselen om weer nieuwe technieken te leren. Maak het bespreekbaar en dan kan je met je werkgever kijken wat er mogelijk is.

Afgelopen jaar mij o.a. beziggehouden met Responsive afbeeldingen en Wat design is. Afgelopen jaar gestart met de theorie van JavaScript; waar komt het vandaan, waaruit bestaat het, wat is ECMAScript, etc. Erg interessant om te weten en ook belangrijk om mijn begrip van wat JS doet te vergroten.

Wat vind ik van front-end?

Het blijft een intrigerend vakgebied. Er zijn zoveel ontwikkelingen, te veel om te volgen. Specialiseren in een aantal technieken wordt steeds belangrijker. Je kan niet alles even goed en overal evenveel kennis van hebben.

De ontwikkelingen op het gebied van CSS vind ik bijzonder. CSS is een taal waarmee je kan beschrijven hoe iets er uit moet zien. Ik vind het vrij makkelijk werken. Maar merk wel dat als een site of applicatie meer onderdelen bevat en daardoor meer CSS het lastig is om een goede architectuur neer te zetten. Dit blijft een mooie en leuke uitdaging.

Hoe nu verder?

Nieuwe technieken die ik voor komend jaar op het programma heb staan is JavaScript in samenhang met data-visualisaties en animeren. In eerdere berichten lees je ook steeds dat ik JavaScript wil leren. Maar het was nog niet echt gelukt. Het lastige was dat ik er geen praktische opdrachten voor had binnen mijn werkzaamheden. Dat is nu gelukkig wel zo. Komend jaar ga ik 2 dashboards bouwen waarbij ik data uit een JSON bestand moet halen, berekeningen mee ga maken en weer in het dashboard toevoeg. Hiervoor ga ik JS gebruiken. Daarnaast ga ik het logo van Zorgweb animeren.

Bovenstaande doelen heb ik als jaardoelen en heb ik opgesplitst in kwartaal doelen en die weer in week doelen. Om mijn doelen te behalen word ik gesteund door Tanja de Bie van I have so many ideas. Ze is mijn cheerleader die positieve energie gaat geven om hier mee aan de slag te gaan. Ze gaat er samen met mij voor zorgen dat ik niet te veel wil en op koers blijf. Aan mezelf merk ik dat het doel JavaScript leren erg belangrijk is. Ik wil het heel graag. Ik wil dat magische gevoel hebben websites te kunnen manipuleren met JS. Dit vind ik ook heel eng. Het roept ook vragen op: want kan ik het wel leren, kan ik wel analytisch genoeg denken. En daarnaast ben ik ook bang dat de magie van wat JS allemaal kan af gaat. Ik zal het leren begrijpen en langzaam aan zal de uitdaging wegebben en waar ga ik daarna opzoek en waar blijft die magie dan.

De webbrowser blijft mij boeien, wat er allemaal mee kan is ongelooflijk. Hoe ik mij hiermee ga bezighouden weet ik nog niet precies. Ik zit te denken om me bezig te houden voor Webcompat.

Komend jaar ga ik mij specialiseren in Data-visualisatie en Animatie met HTML, CSS en JS. Ik ga meer tijd besteden aan front-end. Volgens mij gaat dit een top jaar worden.

Mijn interpretatie van de Basis van JavaScript

2018-01-05T00:00:00Z

Afgelopen jaar heb ik de tijd genomen om mij te verdiepen in de theorie achter JavaScript. De reden hiervoor is dat ik JavaScript wil leren gebruiken en dus snappen wat ik doe. Hiervoor verschillende video's bekeken, artikelen gelezen, Paul Verbeek-Mast heeft mijn vele vragen beantwoord, geoefend met de console. Het eerste stapje is gezet.
Hier staan mijn aantekeningen over de basis van JavaScript. Ik vul ze steeds aan. De reden dat ik ze nu al online zet is om feedback te krijgen van anderen waardoor ik weer leer. Heb je aanvullingen of denk je dat ik het verkeerd heb geinterpreteerd, geef het aan mij door. Mijn twitter-handle en mailadres staan onderaan de pagina.

Wat is JavaScript?

JavaScript is een programmeertaal. Het is een taal bedoelt voor het web en vooral voor de webbrowser. Het maakt de laatste jaren een flinke opmars omdat het ook gebruikt wordt als back-end taal met Node.js. Brendan Eich heeft de naam JavaScript bedacht, het was de bedoeling om HTML te koppelen aan Java-applets. Maar JavaScript heeft als programmeertaal niks te maken met de programmeertaal Java. Microsoft kwam in het begin met hun eigen versie van JS, genaamd JScript. Brendan Eich wilde voorkomen dat er meerdere versies van JS zouden ontstaan en heeft daarom Ecma gevraagd het te standariseren. Hierop is EcmaScript ontstaan. EcmaScript is de specificatie van JavaScript. Hierin staat beschreven aan welke regels het moet voldoen, welke onderdelen er in horen en hoe de opbouw van een regel is. Ik zie dit als de grammatica van de programmeertaal. Naast JS is o.a. ActionScript een implementatie van EcmaScript.

De JavaScript die je schrijft moet geinterpreteerd worden. Hiervoor is in de webbrowser een JS-engine die compileert de taal. Deze doet dit net voor het uitvoeren of zelfs tegelijkertijd met uitvoeren van de code (bron: You don't know JavaScript). Elke browser heeft een eigen JavaScript-Engine. En elke browser vendor bepaald welke onderdelen van EcmaScript in de browser worden ingebouwd. Hierdoor werkt niet alle JS in elke browser.

Wat is programmeren?

Hierboven heb ik het over een programmeertaal. Maar wat is programmeren eigenlijk?
Als mensen snappen we wat we zien. Een computer heeft er geen idee van en heeft uitleg nodig om iets te snappen en ook een stappenplan om iets uit te voeren. Dat stappenplan is programmeren.

Om de werkelijkheid begrijpbaar te maken voor computers zijn dingen als objecten te duiden. Elk object heeft:

properties: karakteristieken. Elke property heeft een naam (name) en een waarde (value). Elke property zegt iets over het object. Aan deze property's is het object te herkennen.
events: interacties met objecten. Bij het programmeren kijk je naar welke events wat moeten triggeren. Voorbeelden van events zijn muisklikken,
methods: is een manier van communiceren met een object waardoor je een bepaalde waarde terugkrijgt van het object of juist gedaan krijgt bij het object. Het is een taak die uitgevoerd wordt. Deze taak kan uit allemaal kleine taakjes bestaan, maar hoe die worden uitgevoerd hoef je niet te weten.

Onderdelen van JavaScript

Variabelen

MDN over variabelen. Variabelen maak je door te beginnen met var en daarna een variable naam, dit mag haast alles zijn. Een variabele kan verschillende data types hebben:

String; een String heeft ook Properties en Methods waardoor je verschillende acties op een string kan loslaten.
Number; Integers (hele getallen), Floating points (decimale getallen) en Positive en Negative Infinity. Je hebt verschillende functies die je kan gebruiken om acties los te laten op Numbers. Zoals:
- parseInt() maakt van een string een integer;
- parseFloat() maakt van een string een decimaal;
- toFixed(x) maakt van een decimaal getal een string met x-aantal decimalen;
- toString maakt van een getal een string.
- Met de Math Object kan je rekenen met Numbers.

Je hebt ook NaN, dit staat voor Not a Number. Duidt vaak op een error;

Boolean; geeft een true of false terug.
Array; een collectie van waarden. Kan verschillende data-types hebben, zelfs met meerdere objecten, elke waarde is gescheiden met een komma. De index van een array is de positie van de waarde, start met 0. Je kan o.a. arrays samenvoegen, je kan het aantal waardes in een array krijgen, je kan ze sorteren. Met .push() voeg je items toe aan je array en met .pop() haal je de laatste weg. Met .length kan je zien hoeveel items er in de array zitten. Zo zijn er meer acties die je kan toepassen op een array.
Object; Je kan je eigen objecten maken en koppelen aan een variabele. In dit object kan je properties toevoegen (deze zeggen iets over het object).
var post = { id: 2, title: 'Hello JavaScript' }; post.title = 'Hello JavaScript!'; post.slug = 'hello-javascript'; console.log( post );

De .title na de variabele naam/object heeft de dotnotation.

Symbol; zorgt er voor dat je objecten niet conflicteren als een andere ontwikkelaar dezelfde object naam zou nemen. Symbols mogen dezelfde naam hebben en conflicteren dan niet.

Een variabele is niet zijn waarde maar zijn containers voor hun waarde. Een variabele krijgt een inhoud die weer kan veranderen tijdens het lopen van het programma. De Constants heeft een vaste waarde, deze waarde kan je wel aanpassen als het programma gelopen heeft. Voor een variabele zet je var en voor een Constants zet je const. En je kan let gebruiken. Dit is ook een manier om een variabele te maken. Maar deze maakt zijn eigen scope en is bijvoorbeeld buiten een if-statement niet te gebruiken. En de let is pas bruikbaar vanaf het moment dat je die gedeclareerd hebt.

var voorbeeld; hiermee heb je de variabele 'voorbeeld' gedeclareerd (declared) en met var voorbeeld ="een voorbeeld"; is die gedefineerd (defined).

Volgens Zac Gordon is het handigste de variabelen aan de top te declareren en ze met een komma te scheiden.
var titel = 'Leer JS', content = 'Zet er maar wat neer', post; //Deze laatste wordt hier alleen maar gedeclareert en pas later gevuld met een waarde, als je deze later vult hoef je niet het woordtje var er voor te zetten.

JS is een weakly of loose Typed Language. Je hoeft niet te zeggen welk data-type een variabele is. In Java is dat wel zo. Een variabele benoemt in het js bestand is een global variabele, deze is ook bereikbaar door andere functies in je JS. Een variabele benoemt in een functie is een local variabele, deze heeft lexical scoping. Een variabele gemaakt met let of const in een functie is een variabele met Block Scoping. Let er dus goed op waar je een variabele definieert.

This

Zie: https://zellwk.com/blog/this/

Comments

Voor een heel stuk zelfde als in CSS /* */ of voor 1 regel met //

Operators

De hele lijst van Operators staat op MDN.

+ , -, *, /, =, ===, !, !==, ++, >, <, =>, =< +=, -=

assignment (=), loose equality (==) deze kan implicit type coercion veroorzaken en strict equality (===)

Logical:
- && = AND
- || = OR
- ! = NOT
String Operators: + voor samenvoegen Strings. De + kan je gebruiken om getallen op te tellen, maar ook Strings samen te voegen. Voeg je een Number en een getal als string samen, wordt het een String.
Conditional Operators: werkt met ( ) ? true: false

Math

Met de modulus kan je de overgebleven getallen zien bij een deling. Dus 365 % 27 geeft 14. Dat zijn het aantal dagen die overblijven na het delen van 365 door 27.

Math.random(); geeft een random getal van 0 tot 1.
Math.floor(); maakt van een decimaal getal een rond getal. Rond af naar beneden.

Conditionals:

Onder deze conditie moet je dit doen en anders dat. if (...) doe dan dit ... else doe dan dat.... Wat na de if tussen de ( ) staat heet een expression.

Switch ( ) ... case ....: doet iets break; (Break is nodig na elke case, anders blijft het door gaan).

Verschil tussen Switch en Else if: bij Switch test je 1 conditie en is dan sneller als Else if. Switch gebruikt altijd ===, niet de lossere variant ==. Het verschil tussen == en === is dat bij === moet waarde en type precies gelijk zijn. Bij == is de waarde gelijk, maar mag het type anders zijn.

Functions:

In functies zet je functionaliteiten die je graag weer wilt hergebruiken. Een functie is vaak een naam met brackets --( )-- er achter. Een functie heeft vaak arguments nodig, stukjes data, om hun werk te doen. De webbrowser heeft functies ingebouwd, maar je kan ook zelf functies samenstellen. Binnen een function heb je de return-statement die er voor zorgt dat het resultaat van de functie ook buiten de functie beschikbaar is. Dan kan de uitkomst pas gebruikt worden. De variabelen die binnen een functie worden gedefinieerd, zijn ook alleen daar bruikbaar, dit heet scoping. Een functie doet niks, pas op het moment dat deze aangeroepen wordt gebeurt er iets.

Een functie ziet er zo uit:

//Function declaration var addTwoNumbers = function(numberOne, numberTwo (dit zijn parameters)) { var numberOne; (door dat deze nu in de functie zitten, mogen deze eerste 2 variabelen weg) var numberTwo; var (hier betekent var dat deze variabele die er aan komt dat deze alleen in deze functie mag bestaan) sum = numberOne + numberTwo; return sum; (return geeft het antwoord terug, zonder dit stel je alleen de vraag en krijg je undefined) } addTwoNumbers(2, 5); //Function call

Een functie gebruik je als je een taak vaker in je code wilt gebruiken. Zo kan je deze functie steeds opnieuw aanroepen.

Anonieme functie = een functie zonder naam. Deze kan gekoppeld zijn aan een variabele. Zo'n functie hoeft maar 1x gebruikt te worden. Maar de waarde daarvan misschien wel vaker. Dan zet je de functie in een variabele.
Functie expression = Als je een functie op de plek zet waar de interpreter een expression zou verwachten. Hierdoor kan je er voor zorgen dat variabelen-namen niet met elkaar conflicteren. Deze moet je altijd afsluiten met een ;

Een method is een functie gekoppeld aan een object.

Function call = functieNaam();
Function reference = functieNaam; Function Expression = een functie die () om de hele functie heen heeft zodat ook de naam van de functie niet in je Global deel gebruikt kan worden, dit zorgt voor minder vervuiling van je code.
Achter een function expression kan je (); zetten zodat de functie ook gelijk uitgevoerd wordt. Dit heet een IIFE (Immediately Invoked Function Expression).

Events:

Gebeurtenissen zoals klikken met een muis of een toetsenbord aanslag. Datgene wat luistert naar het event heet event listeners. De code die wordt uitgevoerd na dat het event is uitgevoerd heet event handlers.

Loops

Met een loop kan je door een functie blijven gaan tot dat de conditional false aanduidt. Dan is het klaar, zo ga je door een lijst heen, do...., while...., do..while... of een for... loop (For in en For of).

Infinite loop is een loop die niet stopt omdat je niet aan je conditionals komt.

De For ... in loop gebruik je voor properties in object.

De For...of loop gebruik je in een collectie zoals een array.

Een Do.. While.. loop voert eerst iets uit en checkt daarna pas waar het aan moet voldoen.

De break-statement zorgt er voor dat je uit een loop gaat omdat voldoen is aan de conditie.

De continue-statement zorgt er voor dat je door gaat in de loop, maar slaat die conditie over.

Er zijn nieuwe manieren om een loop te doen, zoals map, reduce, filter en find. In het artikel van Flavio Copes An alternative approach to loops using map, filter, reduce and find staan deze manieren beschreven.

Object

Een object bestaat uit variabelen en functies. Deze variabelen worden properties genoemd en die functies worden methods genoemd.

Object.isMethod hiermee kan je via de isMethod functie iets doen met het object. Het object kan een Number of String zijn. De isMethod kan je in je DevTools terug vinden. Dit zijn dan degene waar je webbrowser mee overweg kan. Deze lijken op die in jQuery worden gebruikt. jQuery heeft zichzelf overbodig gemaakt, in JS zijn nu verschillende methods die hetzelfde doen als wat jQuery doet/ deed.

Build-in object van JS zijn o.a. String, Number, Math en Date. Hiermee kan je spelen door de properties en methods die ze hebben.

Overig

Met console.log(); kan je een bepaalde variabele uitlezen. Hierdoor kan je o.a. debuggen om te kijken waar een fout zit als je deze hebt.

Een statement is een individuele instructie of een stap afgesloten met een ; of tussen {...}.
Expressions zijn vaak delen van een statement en zijn stukjes code die een waarde krijgen.
Keywords hebben een functionaliteit in JS, zoals var en function.

undefined = nog niet gedefineerd, heeft nog geen waarde, maar bestaat wel.
null = niks, echt helemaal niks.
block = statements die bij elkaar horen. Hebben {} om zich heen. Alleen maar een block kom je niet snel tegen. Vaak is het gekoppeld aan een andere statement, zoals een if.
scope = de reikwijdte van een functie. Variabelen die in een functie staan, staan in de scope van die functie.
this = verwijst naar het object waaraan het gekoppeld is.

JSON

JavaScript Object Notation; een handige manier om informatie middels tekst door te geven. Het is makkelijk te lezen en te schrijven. Altijd double quotes gebruiken " " voor Strings. Je hebt een key met een value.

In JS is er de JSON object. Deze heeft 2 methods; nl. JSON.parse() hiermee kan je een JSON object omzetten naar een native JS object en JSON.stringify() deze maakt van een JS object een JSON string of object. Gebruik geen eval() voor het parsen van JSON.

Een JSON validator JSONLint.

Lastige termen

interpolation: een variabele in een string zetten.
hoisting: er uit halen/ optillen. Doordat een js-bestand eerst soort van gecompiled wordt worden bepaalde variabelen en functies in een bepaalde volgorde gezet waardoor ze daarna door de interpreter goed gelezen worden.
coercion: Hierbij veranderd JS een waarde in een ander type zodat wat er gebeuren moet wel kan gebeuren. Als je een getal als string hebt wordt deze omgezet naar een number als je een berekening maakt met een number.
scope: het bereik van een variable of een functie; lexical scope in die functie of die genest zijn. Of een global scope, bereikbaar voor alle functies, meestal zijn deze boven in het bestand gedefineerd.
scope chain: de ketting van het bereik van een variabele of een functie, deze gaat van binnen naar buiten/ of van beneden naar boven.
closures: als een geneste functie gebruik maakt van een variabele in een parent functie dan doet deze aan een Close over. Dit noemen we een closure.
garbage collection

JS Reference

De DOM en JavaScript

2018-01-08T00:00:00Z

Na mijn Mijn interpretatie van de Basis van JavaScript artikel is dit mijn volgende artikel/ blad met aantekeningen over mijn JS leertocht. Deze keer zijn dit aantekeningen over wat de DOM is en hoe die zich verhoudt tot JavaScript. Ik krijg graag jullie feedback. Hier kan ik weer van leren.
Mijn twitter-handle en mailadres staan onderaan de pagina.

De DOM is een representatie van de webpagina, maar is er ook voor bedoeld om te communiceren met de webpagina.
De DOM is een object met properties en methods. Naast de DOM heb je ook het scherm dat een object is met zijn eigen properties en methods. En elke node is een object met methods en properties.
De DOM is ook een API. Het is een API voor HTML (XML, SVG) die een webpagina aanbiedt als een boom met vertakkingen van objecten. Browser vendors gebruiken de DOM specificatie om te komen tot het weergeven van webpagina's. Een webbrowser zet de HTML om naar de DOM. En de DOM is waar de JS mee kan praten.
De DOM is opgebouwd uit Nodes. Nodes zijn objecten in een boomstructuur. Nodes hebben properties en methods. Methods die je kan gebruiken staan op https://developer.mozilla.org/en-US/docs/Web/API/Document en op https://developer.mozilla.org/en-US/docs/Web/API/Node.

Verschillende Node types:

Document [ 9 ] = HTML document
DocumentType [ 10 ] = de doctype
Element [ 1 ] = alle HTML elementen op een pagina
Text [ 3 ] = tekst- waardes vaak gevonden in Element-nodes
Comments [ 8 ] = HTML comments
DocumentFragments [ 11 ] = een collectie van Nodes om meerdere elementen in te stoppen

Met JS pas je de DOM tree aan en niet de originele HTML bestanden.

Het werken met de DOM behelst 2 stappen:

Ga naar de node(s) waarmee je wilt werken.
Werk aan de node(s), voeg iets toe, pas het aan, etc.

Nodes selecteren in je webpagina

Om een Node te selecteren in je pagina kan je typen: document.children. Dan krijg je een array van elementen. Zo kan je [ 0 ] er achter zetten en krijg je de eerste waarde uit je array. Daar kan je weer achterzetten children[ 1 ] en zo kan je doorgaan totdat je het element hebt dat je wilt hebben. Dit is erg omslachtig. Om het makkelijker te maken voor ons ontwikkelaars kan je methodes gebruiken. Zo heb je:

document.getElementById()
document.getElementsByTagName()
document.getElementsByClassName(); hiermee krijg je alle elementen met deze class-naam terug in een array, ook als er maar 1 element is krijg je die in een array.
document.querySelector(); hiermee kan je zoeken op alle CSS selectors. Zoals een class-naam op dezelfde manier als je het in CSS zet dus met de . er voor. Je krijgt dan het eerste element terug met die class-naam. Of document.querySelector('form input[type="email"]') kan ook.
document.querySelectorAll(); Hiermee doe je hetzelfde als bovenstaande maar dan krijg je alle elementen terug met die specifieke class-naam in een array.

Het kan zijn dat getElementById() en getElementsByTagName() sneller werken dan de querySelector.

Dom Traversal

Het reizen van en naar andere onderdelen.

.parentElement
.parentNode

Bovenstaande zijn vaak het zelfde, maar niet elke node is een element.

Bij elk Node type:

.childNodes
.firstChild
.lastChild

Bij Element Nodes → dit is nieuwer:

.children
.firstElementChild
lastElementChild
childElementCount

White Space (witruimte) is ook een Node. Door .childNodes op te vragen krijg je ook de witruimte/regels terug. Maar de witruimte/regel is geen Element.

Buren bezoeken:

Bij elk Node type:

.nextSibling
.previousSibling

Bij Element Nodes → dit is nieuwer:

.nextElementSibling
.previousElementSibling

Meest voorkomende Nodes zijn de Element en Text nodes.

Een interessant en handig artikel over het selecteren van elementen in de DOM komt van Zell Liew, Traversing the DOM with JavaScript.

waardes in en uit Element Nodes te krijgen

.innerHTML: geeft alle html in het element
.innerText: geeft alle tekst zoals je het ook in de browser ziet
.textContent: geeft alle tekst ook die met CSS op display none is gezet en zoals de tekst precies in je html bestand is gezet.
.outerHTML: Geeft je element en ook de binnenste html
.outerText:

Om nieuwe HTML of text in een element te plaatsen gebruik je .innerHTML = '<h2> </h2>'. Dit zet de nieuwe html. Met .innertext = kkkkkskjsjj doe je hetzelfde maar dan voor tekst.

Om de waardes in en vanuit Text Nodes te krijgen gebruik:

.data (hiermee kan je geen teksten uit attributes krijgen, dan moet je onderstaande gebruiken)
.nodeValue

Nodes aanmaken

.createTextNode( ' ' );
.creatElement( ' ' );
.appendChild( childNode ); Hiermee zet je een child in een element.
.createDocumentFragment( ' ' ); Om meerdere Nodes in te zetten om later als 1 element neer te zetten in een element. Een Document Fragment is een container voor Nodes.

Nodes toevoegen aan de DOM

ParentElement.insertBefore (Nieuwe node, waarvoor je het wil plaatsen);
insertAfter bestaat niet, gebruik dan .nextSibling op het element waarna je het wil plaatsen.
replaceChild( nieuw element, element om te vervangen);

Kopiëren van Nodes

cloneNode( true ); met true wordt het element met alle children gekopieerd. Let er op dat bij Clonen dat attributen zoals id wel de juiste waardes krijgen.

Verwijder Nodes van de DOM

element.remove();
parentEl.removeChild( ); deze is handiger, je kan dan het element bewaren en weer oproepen.

Style aanpassen van Nodes

met window.getComputedStyle( el).propToChange; (hiermee krijg je de inhoud van de propToChange)
el.style.propToChange = "destyle"; hiermee zet je inline styling.
document.styleSheets; hiermee krijg je een array van de stylesheets die opgeroepen worden.
styleSheet.insertRule( selector, rule, index ); als je een stylerule wilt aanpassen in een stylesheet.

Attributes

Om met de attributes te spelen gebruik je de propertie .attributes. Je krijgt dan een array van informatie terug.

Om de informatie van de attribute te krijgen gebruik je:

.nodeName
.nodeValue

Om de waardes van attributes aan te passen:

.getAttribute()
.setAttribute()

Om Class attributes te krijgen:

.getAttribute('class')
.className
.classList → is nieuwer

Om Data attributes te krijgen:

.getAttribute('data-attr')
.dataset → je krijgt een DOMStringMap; hierin staan de data attributes van een element.

Er zijn betere manieren om data op te slaan ipv in je markup. Liever niet in je HTML opslaan.

Formulier elementen

Bij formulier elementen om deze te laten werken zet de <form> tag er om heen. Deze heeft een attribute method. De method attribute kan de waardes hebben GET of POST. Als je GET doet zie je de waardes van de invulvelden in de url terugkomen. Bij POST niet. Dit laatste moet je officieel doen zodat alles verborgen blijft, maar de GET methode is handig voor testen. De id attribute is handig voor referentie zodat je vanuit je JS aan het formulier kan referen. De name attribute is belangrijk voor het doorgeven van de info zodat je weet welke info bij de form met die naam hoort.

De attributes van form elementen kan je makkelijk met JS aanpassen.

De value attribute is de waarde die je bij een inputveld invult. Deze kan je ook voorinvullen, dan zie je bij het komen op een website dat er al iets in de inputvelden staat. Dat kan zijn als je al iets weet zoals postcode of andere adres gegevens.

Om formulier elementen aan te spreken kan je gebruik maken van:

document.forms
document.getElementById
document.getElementsByName

Selecteer een onderdeel van een form. Gebruik:

Door de elementen heen lopen
Selecteer specifieke elementen

Om te werken met radio, checkbox en option voor te checken op checked of ze daarop te zetten:

radio.checked = true;
checkbox.checked = true;
option.selected = true;

Events

Events zijn technisch gezien een onderdeel van de DOM.

Selecteer het element waarop iets moet gebeuren. Zeg welk event moet plaats vinden om een bepaalde functie te activeren.

Te veel eventlisteners kunnen de performance verslechteren. Soms kan het beter zijn op een parent element een eventlistener te zetten.

Type:

mouse events
keyboard events
form events
media events
drag en drop events
window events (scrolling, browser die veranderd van grootte)
Etc...en nog meer

Kan het inline zetten, dus in de HTML, bijvoorbeeld met onclick=" ". Denk er aan dit is niet Best Practice, dus alleen in noodsituaties gebruiken.

Bij Global Event Handlers gebruik je bijvoorbeeld een onclick, maar dan in het JS bestand. Je kan de onclick koppelen aan een element. Hierbij moet je altijd de functie voor de Global event handler zetten. Je gebruikt een function reference.

Event Listeners is de meest gebruikte en de beste manier om Events te gebruiken; addEventListener().

Weghalen gaat met: removeEventListener();

Gebruik geen anonieme functies met Event Listeners, want je kan de removeEventListener niet gebruiken bij een anonieme functie.

Event Propagation gaat over :

capturing; fase 1 naar het element toe vanaf Window
Target: fase 2 het terecht komen bij het element
Bubbling: fase 3 het weer terug gaan naar de Window

Een Event Listener kan inhaken op de Capturing of Bubbling fase. Wat kan je hier mee? Het kan zijn dat je wilt dat een parent element weet wat er gebeurt in een child element en of dit er voor of er na moet gebeuren.

Event Object: heeft properties met informatie over het Event dat net gebeurd. Middels functies is deze info te verkrijgen.

Animatie op het web

2018-03-01T00:00:00Z

In dit artikel (opsomming) over animatie staan mijn verzamelde bronnen en opmerkingen die naar mijn idee belangrijk of handig zijn om meer te weten te komen over animatie op het web. Als ik nieuwe bronnen vind plaats ik deze hier. Mocht jij een interessante bron hebben meld het mij, mijn contactgegevens staan onderaan de pagina. Dit artikel heb ik geschreven in 2018 en aangevuld in juli 2023. De artikelen die genoemd worden zijn van voor 2018, maar volgens mij wel relevant. De tools die je gebruikt willen in de webwereld snel veranderen, zo ook CSS, Canvas en WebGL en wat daarbij mogelijk is. Maar degene die ik noem in dit artikel bestaan in 2023 nog steeds. De artikelen beschrijven meer de basis van bewegen en het gebruiksgemak. Dat zijn principes die nog steeds overeind staan.

Het is geen perfect geschreven artikel maar een naslagwerk voor mijzelf en hopelijk heeft iemand anders er ook nog baat bij.

Animatie of motion design is...

Animatie is dat iets veranderd naar een andere toestand. Kan een beweging zijn of een andere vorm of een andere kleur.
Motion is beweging, iets zie je bewegen. Het verschil tussen motion en animatie is dat bij een animatie iets kan veranderen, maar dat hoeft geen beweging te zijn. Denk daar maar eens over na.
Tegenwoordig is Motion Designer een apart vak geworden. Er zijn bedrijven die Motion designers in dienst hebben, zoals Google.

Animatie en motion op het web bestaan naar mijn optiek uit 3 verschillende vaardigheden.

De vaardigheid van het animeren/laten bewegen. Wat is een goede animatie/beweging? De rol van motion designer.
Op welke manier helpt het de gebruiker, dus user experience. De rol van UX-er.
Hoe laat je het bewegen op de webpagina, dus welke tools gebruik je. De rol van developer.

Hoe beweging en/of animatie goed overkomen staat beschreven in The 12 Principles of Animation.

Wat doet beweging?

Het neemt de bezoeker mee in de actie die het net deed en zorgt voor focus en orientatie waar je bent. De bezoeker heeft het gevoel dat het interacteert met echte elementen i.p.v. met een scherm. Schermen met beweging voelen meer levend en menselijk waardoor digitale producten tot leven komen. Bedenk daarbij wel dat levendigheid voor kinderen en jongeren anders is dan voor ouderen.
Beweging vertelt een verhaal. Het zorgt er voor dat een interactie niet uit losse onderdelen bestaat.

Meer hierover in het artikel van UX Planet; Motion in UX Design en Google Design; Making Motion Meaningful.

Waarom beweging gebruiken?

Beweging is bedoeld om het gebruiksgemak te verbeteren. Overgangen verlopen soepeler. Het zorgt ervoor dat het natuurlijker overkomt.
Kijk welke vragen een bezoeker zich kan stellen op je pagina en laat daar beweging op aansluiten. Voorbeelden van deze vragen zijn:

Wat moet ik hierna doen? De animatie neemt je mee in het proces van wat er moet gebeuren.
Hoe weet ik of het formulier juist ingevuld is?

Motion in webforms

We weten nu wat motion is en hoe we dit online kunnen gebruiken. In mijn oude werkveld van zorgverzekeringen aanvragen zijn webformulieren belangrijk. Je vraagt een zorgverzekering aan en daarvoor moet je verschillende vragen beantwoorden middels een webform. Mijn vraag hierbij is: "Hoe kunnen we een webformulier gebruiksvriendelijker maken, prettiger om in te vullen?". Ik denk dat Motion hierbij een rol kan spelen. Bewegingen kunnen een webformulier levendiger maken, het natuurlijker laten aanvoelen, de menselijke interactie meer in verwerken dan statische webformulieren doen.

Hoe doen we dit dan? Val Head laat in een screencast zien hoe je dit kan toepassen.

Hoe zet je beweging in een design zodat een front-end developer het weet?

Zet erbij welke waarden veranderen en met welke eenheden. Denk daarbij aan: easing, timing, properties (de wat). Bij tijd zijn er zelfs al onderzoeken gedaan welke tijd het beste gebruikt kan worden voor welke onderdelen.
Schets wat er moet bewegen en hoe
In dit interview beschrijft Eva-Lot hoe ze animaties schets. Ze vertelt over een trigger die zorgt voor de animatie, de actie die daarna komt en als laatste de kwaliteit die laat zien hoe het gebeurd. Elk van deze heeft andere schets onderdelen en kan je op een bepalde manier aanduiden zodat het geheel uiteindelijk duidelijk wordt wat je als designer precies bedoelt.
Schetsen is ook handig om eerste ideeen te bedenken en te bespreken met anderen.
Gebruik storyboards Storyboard pdf van Rachel Nabors om te gebruiken
Of probeer een gif van de beweging/animatie te maken. En zet de waarden er wel bij.

Meer hierover staat in het artikel van Rachel Nabors Communicating Animation.

De tools

Bovenstaand gaat meer over het bedenken en het ontwerpen van animatie voor een webpagina. Als je dit bedacht hebt en in een design verwerkt komt het volgende onderdeel en dat is de animatie bouwen. Je kan dit met CSS doen met daarnaast JavaScript libaries. Het is niet dat het ene de ander bijt. Er zijn verschillende JavaScript libraries die je kan gebruiken.

CSS

Bij CSS werk je met de transition property en/of de animation property (en de sub-properties) waarbij de @keyframes belangrijk is.

CSS of JavaScript

JS libraries

Voorbeelden:

Performance van web animaties

CSS GPU Animation: Doing It Right. Als je animaties gaat gebruiken op een website vraag je meer van de rekenkracht van de webbrowser en de computer. Denk er dus goed overna of het handig is wat je doet of dat het op een manier kan die minder rekenkracht nodig heeft.

Skills:

Kennis van animatie design
UX: wanneer gebruik je wel en niet animatie.
CSS
JavaScript
SVG: svg afbeeldingen kan je heel goed animeren.
Webanimation API: animeren met JavaScript en in de webbrowser ingebouwde elementen
Toegankelijkheid van web animaties: hierdoor maak je een animatie toegankelijk voor mensen die bijvoorbeeld blind zijn, zij willen ook wel de eravring van een animatie ondergaan.

Tools

Een kleine opsomming van tools.

Webdeveloper tools in Firefox en Chrome hebben animatie tools (Safari en Opera bekijken) Visualize easing in devtools
Web animatie API, uitgelegd door Rachel Nabors Rachel Nabors Smashing Conf
Vergelijk webanimatie technieken/tools
Adobe Illustrator en After Effects
HTML canvas element
WebGL: WebGL and animation
pixi.js
Bodymovin, After Effect plugin voor exporteren van animaties
Spiritjs

Een al oudere beschrijving van technieken/tools van Sarah Drasner: A Comparison of Animation Technologies.

Boeken

De hier genoemde boeken zijn al wel ouder, maar volgens mij nog wel relevant.

Conferentie talks:

Mensen om te volgen

Nieuwsbrieven

Val Head's The UI Animation Newsletter

Design bureau’s die werken met animatie/motion in de webbrowser:

Data, tabellen en grafieken types

2018-04-01T00:00:00Z

Bij deze weer een aantekeningen artikel. Deze keer over grafieken en tabellen.

Als je omgaat met getallen en grafieken is een beetje kennis van statistiek handig, hierdoor kan je de kwaliteit van je getallen en dus de grafieken verbeteren. In het boek "Show me the numbers" van Stephen Few is 1 van de eerste hoofdstukken gewijd aan een stukje theoretische kennis van statistiek. Erg handig om weer je verouderde kennis op te halen.

Met grafieken laat je data zien, door een beter inzicht in data kunnen beslissingen beter genomen worden. Datavisualisaties en dus grafieken zorgen hier dus voor.

Tabellen en grafieken van kwantitatieve business informatie kan gebruikt worden voor:

analyse: te ontdekken naar het verhaal in je data
communicatie: het vertellen van het verhaal van je data
monitoring: het monitoren van je data, kijk je naar snelheid of de kwaliteit of de hoeveelheid.
plannen: als je de data gebruikt om te voorspellen naar de toekomst toe.

Grafieken tonen verbanden, trends en data op een visuele manier. Een tabel toont data als taal en om met elkaar te kunnen vergelijken.

Quantitatieve verhalen bestaat uit quantitatieve data (een getal) en uit categorie data (bijvoorbeeld tijd). Ze zijn gebaseerd op statistieken. Gebruik de juiste getallen zodat het verhaal dat je toont ook klopt. Verdiep je dus in bepaalde termen zoals gemiddelden, meridiaan, mediaan, etc. Zodat je weet waar je over praat.

Quantitatieve data relaties:

nominaal
ordinaal
interval
hierarchies

Uitleg over deze relaties staat op Meetniveaus: Nominaal, Ordinaal, Interval en Ratio.

Categorie waarden relaties:

ranking
ratio
correlatie

Grafieken heb je in verschillende vormen:

categoriaal
hierarchiaal
relationeel
in de tijd wegzetten
Ruimtelijke patronen (spatial patterns); zijn vaak meer kaarten.

Bij de keuze van het presenteren van je data moet je kijken naar de behoeftes van je doelgroep, wat willen of moeten ze weten. En ook de tijd die ze hebben om de data door te nemen. Wil de doelgroep een bepaalde waarde opzoeken of meerdere individuele waardes, dan is een tabel een goede manier van presenteren van je data. Wil je trends of patronen bekijken, dan is een grafiek een betere manier van presenteren.

Hou bij het designen rekening met hoe de mensen visuele informatie waarnemen en verwerken in de hersenen. Voor het designen van tabellen en grafieken is het belangrijk dat je meteen de aandacht grijpt zodat mensen geïnteresseerd zijn in je informatie. Je doet vooral aanspraak op het eerste type geheugen, het visueel sensorische geheugen (ook wel het iconische geheugen of beeldgeheugen genoemd). Hoe werkt het geheugen?

Maak bij het designen gebruik van visuele zaken waar je hersenen mee kunnen werken; een cirkel dat groter is begrijpen we beter dat het bij een groter gebied of land of een groter bedrag hoort dan dat je verschillende kleuren gebruikt of een lichtere kleur. We halen informatie uit onze waarneming door relaties tussen elementen te bekijken. De context is belangrijk, denk hierbij aan een lichtere of donkere achtergrond. Maak geen gebruik van te veel verschillende visuele attributes.

Belangrijk bij het design van tabelen en grafieken is de boodschap die je overbrengt. Hou je doel in de gaten en presenteer dat zo duidelijk mogelijk waardoor de bezoeker zonder poespas het verhaal tot zich kan nemen of misschien zijn/haar eigen verhaal kan maken. Denk dus na in welke vorm je de data aanbiedt, een tabel of grafiek of meerdere grafieken. En welk type grafiek. Bij tabellen en grafieken heb je data inkt en non-data inkt. Probeer zoveel mogelijk non-data inkt te vermijden. Om het verhaal te verduidelijken gebruik hiervoor elementen van een tabel of grafiek en maak deze ondersteunend aan je verhaal.

Zaken waarbij je hier aan moet denken zijn:

x- en y-as (en labels er bij)
legenda
grid-lijnen (hulp-lijnen in je grafiek)
verhaaltje voor wat uitleg van punten in je grafiek of een verhaal hoe de grafiek gelezen moet worden
maak elementen duidelijk door een achtergrond kleur, lijnen er om heen, dikke of dunnere lijnen, wit ruimte
groepeer elementen die bij elkaar horen
grote van je elementen, grote bollen, etc.
Gebruik kleuren om verschil te laten zien

Dashboard design: Dashboard is een exploratory manier van datavisualisatie. Er is data om door heen te gaan en te kijken wat deze zegt of zou kunnen zeggen.

Krijg duidelijk welke data de bezoeker van het dashborad nodig heeft. Kijk hoe je deze data op een zo effectieve, maar simpele manier kan tonen. Als je extacte data nodig hebt, geef deze dan ook. Laat getallen zien. Is de data bedoelt voor meer vergelijken zet het dan in een grafiek. Laat de belangrijkste data eerst zien, uitleg van de data (details) kan je later (verder naar beneden tonen) Gebruik goede titels en labels bij een grafiek om duidelijk te maken wat er getoond wordt. Laat belangrijke data er uit springen door bijvoorbeeld een lijn of blok dikker te maken of op te lichten. Hou het overzichtelijk.

Je kan een stap verder gaan en proberen een dashboard meer te personaliseren. Dat een bezoeker kan schuiven met de grafieken. Bepaal dus zelf hoe je dashboard opgebouwd is.

Interessante linkjes over Dashboard design:

Handige tools:

The Chartmaker Directory: handige hulp voor het kiezen van welke type grafiek je kan gebruiken
Highcharts: JavaScript library om data te koppelen aan grafieken

Datavisualisatie met kaarten

2018-04-12T00:00:00Z

Datavisualisatie kan middels grafieken, maar je kan ook gebruik maken van kaarten. Het laat middels een kaart zien waar het te visualiseren onderwerp te zien is of welk gebied het over gaat. Dit kan veel duidelijk maken over de spreiding in een gebied, land, werelddeel. Er zijn verschillende type kaarten, om meer te weten te komen over kaarten kan je het artikel van Map School lezen.

Voor het werken met datavisualisaties en kaarten zijn er meerdere tools beschikbaar. Ik heb LeafLet en D3 een beetje getest waarbij ik D3 heb gebruikt voor een kaart in het dashboard dat ik voor de VoorzieningenWijzer aan het bouwen was. Ik schrijf hier kort over beide tools en heb een opsomming met interessante links over het onderwerp datavisualisatie en kaarten.

LeafLet

LeafLet is een javascript library waarmee je kaarten en data online kan zetten. Deze tool is puur gebouwd om alleen dit te doen, dit in tegenstelling tot het hierna genoemde D3. LeafLet heeft al verschillende functies uitgedacht zodat je dit zelf niet hoeft te doen. Met deze functies kan je kaarten online tonen, data op de kaarten tonen, popups plaatsen, markers plaatsen, cirkels en polygonen en lijnen plaatsen.

Met LeafLet kan je goed dynamische kaarten tonen. Het idee achter deze library is een lichtgewicht library te bouwen, waardoor deze makkelijk te gebruiken moet zijn doordat er niet te veel toeters en bellen bij komen kijken. Extra functionaliteiten kunnen toegevoegd worden middels plugins.

Je zal verschillende websites tegenkomen die LeafLet gebruiken, zoals de website van de ANWB Camping zoek website.

D3

D3 is de tool voor het bouwen van custom datavisualisaties. Je kan D3 ook gebruiken voor een datavisualisatie met kaarten en dan vooral statische kaarten. Hoeft er vanuit de gebruiker geen interactie plaats te vinden, is D3 een goede optie om te gebruiken. D3 heeft verschillende functies ingebouwd die je kan gebruiken: D3 API.

Interessante bronnen

Tools:

Meetups:

Maptime Amsterdam

Workshops/tutorials:

Bedrijven:

Kaarten:

Fronteersconf 2018

2018-10-12T00:00:00Z

Fronteersconf 2018 was een kwalitatief goede conferentie. Alles is altijd goed geregeld, sprekers zijn altijd goed. Maar wat dit jaar wel bijzonder maakte is dat er voor mij weinig bekende namen stonden, maar deze poersonen zetten goede talks neer. Misschien juist doordat ze onbekender zijn verwacht je minder, maar is het juist ook weer interessanter om naar ze te luisteren.

Zaken die er uitsprongen waren: sterke presentaties (niet allemaal even interessant voor mij, maar presentatoren deden het goed), presentaties met verhalen zijn fantastische presentaties (je wordt meegezogen in het verhaal en wilt aleen maar meer horen), storytelling wordt steeds groter en belangrijker.

Leerpunten

Hier een opsomming van punten die ik interessant, belangrijk, wetenswaardig of wat dan maar vond van Fronteersconf 2018.

Keynote (The Secret Life of Comedy)

Dit jaar startte Espen Brunborg Fronteers 2018. Dit was vooral een inspirerende talk. De wijze les hierbij is dat het belangrijk is naast standaard dingen te doen ook eens te verrassen in designs. Ga niet uit van een bepaalde stroming, maar meng zaken van verschillende stromingen met elkaar.

Stop wat comedy in je design/ website. Wees creatief, meng verschillende vormen.

Persuasion (I put a spell on you)

Een talk van Chiara Aliotta. Ze maakt met hele fijne lijnen hele mooie tekeningen (o.a. van Smashing Book 6 heeft zij alle afbeeldingen gemaakt). In haar talk ging ze in op het overtuigen en verleiden van mensen met je website.

Als designer heb je veel macht, het overtuigen/ verleiden van bezoekers op een website kan je doen met goede bedoelingen, maar ook met kwade bedoelingen. Je kan mensen verleiden tot aankopen die ze niet nodig zijn of ze zaken voorschotelen die niet waar zijn, maar dat wel lijken. Het overtuigen van mensen dat jouw product de beste is of een goede aanvulling op hun leven kan geen kwaad als het een goed en eerlijk product is. Zorg als designer er voor dat je ethische keuzes maakt.

Ze verwees naar het boek van Cialdini, hij spreekt van 6 principles of persuasion.

Het mooie van haar presentatie vond ik de manier waarop ze theorie verweefde met praktijk voorbeelden waarbij ze ook weer kort de theorie herhaalde in de afbeelding.

Slides

I put a spell on you from Chiara Aliotta

Accessibility (But my site looks fine! en Get Your Priorities Straight en The “C” is for Accessibility)

Laura Carvajal is Principal Engineer bij The Financial Times. Eerder was ze accesibility lead van de online versie. Hiermee heeft ze ervaring opgedaan om ons te helpen het beter te doen voor mensen die dit nodig zijn. De talk van Heydon Pickering was gericht op inclusifiteit en die van Eva Ferreira.

Gebruik :focus-visible en anders de polyfill. Zorg er voor dat toetsenbord gebruikers kunnen zien waar ze zijn. Test je website zonder muis. Dit is iets wat ik meer moet doen. Bij sommige websites kan je switchen naar een andere browser. Maar wat als je door je handicap dit niet kan. Zorg er voor dat het in verschillende browsers werkt. Zet altijd een href in een link. Denk aan prefers-reduced-motion te gebruiken. Er kunnen mensen zijn die niet goed tegen beweging kunnen. Denk aan kleurenblinden door een goed contract te gebruiken. Het taal niveau is niet voor iedereen gelijk. Gebruik dus niet te lange zinnen en moeilijke woorden. Geldt voor mensen die de taal niet als moedertaal hebben, maar zeker ook voor mensen die dit wel hebben.

Belangrijke punten die ik uit deze preso's haalde: Als ontwikkelaar hoef je maar op een paar punten te letten, doe dat dan ook. (Geldt ook voor mijzelf). Haal de outline niet weg, behalve als je die vervangt en maak er dan iets moois van. Pas op met flex & order, bij tabben door een pagina werkt dat niet en is volgorde anders. Zorg er voor dat het toegankelijk is, wie zit er te wachten op super subtiele design elementjes. Heydon sprak hierover en zorgt weer even voor de relativering. Ook in wat je als front-end ontwikkelaar allemaal moet kunnen. Zorg er eerst voor dat je de basis kent.

"Sort your priorities" - @heydonworks #fronteers pic.twitter.com/vLCCnpUQBz
— Eva Ferreira 💚 (@evaferreira92) 4 oktober 2018

Fonts Fonts Fonts

Interessante talk van Chris Lilley. In een @font-face aanroep kan je de unicode-range aangeven. Hierdoor worden alleen die uncicode types in dat font weer gegeven. We hebben nu fonts die in 1 betsand bestaan. Hierdoor hoef je minder fonts in te laden en alle styling mogelijkheden zitten in het font. een font-weight: 123; is gewoon mogelijk, eerder was dat hele honderdtallen.

Algemene leerpunten

Stop in je portfolio alleen zaken waar je met passie aan hebt gewerkt. Dat zorgt er voor dat je hierop gekozen wordt en dat je doet wat jij wilt.
Het web kan je gebruiken voor alles. Ook A/V artists.
Storytelling is de big thing.
Wat doe je als ontwikkelaar als je iets moet schrijven of stylen waar je niet achter staat?

Interessante boeken:

Tools

Pa11y
Lottie voor animeren, vanuit After Effect Lottie gebruiken voor het animeren
Wakamai FondueWhat can a font do?

Interessant links:

JAMstack en Netlify

2019-01-28T00:00:00Z

JAMstack websites zijn hip. Mijn eigen website heb ik op deze manier opgebouwd. Ik gebruik ~~Jekyll~~ Eleventy, Github en Netlify. Voor mij werkt het erg fijn. Voordeel van pushen naar Github is dat ik een back-up heb van mijn site. Volgens Phil Hawksworth zijn git based deployments de toekomst.
Maar voor de duidelijkheid zal ik uitleggen waar JAMStack voor staat, namelijk JavaScript, API's, Markup.

Voordeel van JAMstack websites is dat de rendering van de site/pagina geen tijd in beslag neemt, dit gebeurt door een build proces voor die tijd. Het opvragen van een website kost veel minder tijd. In de 'oude' manier gebeurt het builden van de site op het moment dat je via de webbrowser de website aanvraagt, dan wordt er gekeken wat je nodig hebt en wordt dat geserveerd. Bij een JAMstack website gaat het om client-render en pre-render.
Een website in de JAMStack wordt een Static site genoemd, maar een betere naam is Pre-rendered website. Dit verwoordt namelijk het proces.

Een ander voordeel van een JAMstack website is dat deze makkelijker te beveiligen is, omdat je alleen te maken hebt met een server voor static-bestanden hoef je alleen deze te beveiligen.

Vrijdag 25 januari ben ik bij de JAMStack and Netlify workshop georganiseerd door Fronteers en Phil Hawksworth als workshop leider geweest. Interessante dag. Meer inzicht gekregen wat JAMStack is en welke rol Netlify hier in heeft en wat er kan met Netlify.

Netlify

Voor JAMstack websites is een hosting oplossing zoals Netlify erg makkelijk. Netlify haalt de code uit Github en verzorgt dan een build proces om de website daarna op een Netlify url live te zetten. Elk build proces wordt gestimuleerd door een push naar Github. Elke build blijft staan in het Netlify dashboard en is weer terug te zetten als de live website.

Met Netlify kan je ook een eigen domein koppelen aan je website, met de mogelijkheid van gratis https. En dat werkt makkelijk.

API's

API keys die verborgen moeten blijven voor de buitenwereld kan je installeren in Netlify. Ze kunnen dan door elke site die in je Netlify account staat gebruikt worden.

Forms

Via het dashboard van Netlify kan je een webformulier aanmaken en die gebruiken in je website. Hierdoor kan je een contactformulier op je website zetten. Hiervoor heb je anders bijvoorbeeld PHP nodig die het versturen van de ingevulde data voor je regelt. Zo'n formulier kan je ook gebruiken als comment formulier. Door deze te koppelen met webhooks in je Dashboard van Netlify wordt er een build getriggerd en kan je de comment bekijken op de website. Of een inlogformulier maken voor een website met inlog mogelijkheden zoals een webwinkel. Hiervoor kan je Identity in het dashboard van Netlify gebruiken. Met Identity kan je rollen aanmaken of een welkomsmail genereren.

Redirect

Via een netlify.toml bestand kan je redirects in je website aanbrengen. Zo kan verwijzen naar een andere url of een 404 pagina aanmaken.

Serverless

Een term die samenhangt met JAMstack is serverless. Serverless is gelijk aan functions as a service. Je kan deze functies gebruiken in of met je Pre-rendered website. Serverless en JAMStack vullen elkaar goed aan.

Meer info kan je vinden op:

Meer over JAMstack en Netlify
jamstack.org
The Power of Serverless for Front-End Developers

Interessante artikelen

Conferenties

JAMstack conf

Handige links

Handige video's

JAMstack Fundamentals: What, What And How

Wat is SVG?

2019-02-26T00:00:00Z

Wat is een SVG?

SVG is een mark-up taal net zoals HTML. SVG bestaat uit XML. Het beschrijft aan de browser wat deze moet tonen. Verschil tussen HTML en XML is dat XML structuur aangeeft en HTML meer beschrijft hoe de informatie getoond moet worden. Je kan makkelijk in je developer text-editor aanpassingen doen aan een SVG. Een SVG is een vector afbeelding wat er voor zorgt dat hoe groot je deze ook maakt het is altijd scherp wat je ziet. Dat is het grote voordeel van SVG. Hierdoor weet je dat op elk type beeldscherm je afbeelding scherp getoond wordt.

SVG is perfect te gebruiken voor iconen, logo's, kaarten, lijntekeningen, etc. Let hierbij op of de SVG niet zwaarder is dan een jpg of png variant. Voordeel van SVG is dat deze via CSS, een style-tag in de svg of inline styling makkelijk aan te passen is.

SVG's kan je inline in je HTML document zetten o.a. middels object-, img-, svg-tags of verder als achtergrond afbeelding. Als achtergrond afbeelding kan je ze als data url invoegen waardoor je geen extra http request maakt. Omdat het vaak om een extra design element gaat niet erg dat het in de CSS staat.

SVG's zijn vrij toegangelijk voor screen readers. Je kan er teksten in verwerken, maar ook een titel of een omschrijving toevoegen. Verder op in dit artikel beschrijf ik waar je hierbij op moet letten.

Het coordinaten-systeem binnen je svg blijft bestaan, ook als je breedte of hoogte aanpast, dat is een groot voordeel.

Een SVG kan bestaan uit: <line> <rect> <circle> <ellipse> <polygon> <polyline> <path>. Attributes kunnen zijn: fill voor de kleurvulling, stroke voor de kleur van de border, stroke-width voor de dikte van de border. Hiermee kan je dus inline een svg kleuren, maar je kan deze attributes ook in de CSS zetten en zo de svg kleuren, hiervoor moet de SVG wel inline in je HTML zijn opgenomen.

Maken

SVG's kan je makkelijk maken via Sketch of Adobe Illustrator. Afbeelding als SVG opslaan. Volgens Sara Soueidan kan je het beste svg's exporteren vanuit Illustrator, die doet dit op moment van schrijven beter dan Sketch.

Workflow: gebruik op het web

Voor gebruik op het web is het aan te raden de SVG eerst te optimaliseren via bijvoorbeeld: SVGomg. Je kan hiervoor ook een Grunt plugin gebruiken als dit beter past in je work-flow. Voor het plaatsen in je website als achtergrond afbeelding is GrumpIcon perfect te gebruiken. Het maakt png afbeeldingen voor fallback en zet de svg als data url om. Hiervan is ook een Grunt plugin.

Hoe werkt een SVG?

Je kan tekst toevoegen aan een svg middels een text-tag. <text></text>

Een SVG bestaat uit de elementen:

<svg>: De svg-tag waardoor de browser weet dat het om svg gaat. In deze tag staat vaak benoemt de hoogte en breedte van de svg, verder de viewbox.
<symbols>: de symbol-tag symboliseert een afbeelding welke je nog niet ziet. Door later in je HTML de use-tag (deze is onderdeel van een shadow-dom) te gebruiken roep je een bepaald symbol aan om te tonen in de HTML. Zo kan je bepaalde afbeeldingen makkelijk op verschillende plekken gebruiken zonder de hele code van die afbeelding in je HTML te plakken. Voorbeeld is een svg spritesheet met bijvoorbeeld icons.
<polygon> <circle> <rect> <clipPath> <g>: dit zijn elementen van je afbeelding. De g-tag groepeert bij elkaar horende elementen binnen een svg.
<defs>: Definieert elementen en deze elementen kan je tonen in je website via <use>.
Elk element kan een <title> en <desc> hebben.
path geeft aan welk pad getoont moet worden door de browser. Hierin is de d de afkorting van data.

Inline svg met styling geven dit door aan de andere svg's die inline staan.

Om een svg te kleuren die in een <use> zit gebruik je css variabelen, met fill=currentColor kan je 2 elementen kleuren. En anders gebruik custom properties var(--primaty-light). Gebruik een sprite en use om zelfde svg's vaker weer te geven en als ze verschillende kleuren nodig hebben, gebruik custom propeties.

	<svg>
		<use xlink:href="path/to/sprite.svg#twitter">
	</svg>

SVG sprite

Een svg-sprite krijgt standaard een 300px bij 150px van browsers. Zet er dus een height en width van 0 op en een visibility: hidden;. Een display: none; zorgt er voor dat in sommige browsers de icon niet getoond wordt.

Met een <img> tag kan je de sprite afbeeldingen tonen met <view> of viewBox().

Viewbox/preserveAspectRatio

The viewport is de voorste laag --> de browser window of de svg tag The viewbox is de 2de laag --> de svg afbeelding --> alles binnen de svg tags.

Om witruimte om de svg te krijgen maak de viewbox --> -1 -1 802 602 (omdat je -1 doet moet je bij width en height er een extra bij optellen), letterlijk zoom je in en uit.

Om de aspect ratio te behouden van een svg gebruik dan <svg preserveAspectRatio="xMaxYMax" meet of slice> Waarby xMax ook xMin of xMid kan zijn, zelfde geldt voor de yMax. Daarnaast kan je nog meet erbij zetten (meet de sides of the viewport) dan blijft de svg helemaal zichtbaar en zet je er slice bij wordt deze zo groot als de inhoud van de afbeelding (vul het geheel). Je kan het vergelijken met background-size en de background-position in CSS.

SVG gebruiken in je website

Verschillende manieren staan hier boven al beschreven. Verder kan je op CSS-Tricks: Using SVG de verschillende manieren zien. Voordeel van SVG is dat je geen extra http-request hebt omdat je het inline kan plaatsen. Een SVG is net zoals HTML opgebouwd uit verschillende onderdelen die met JS te bereiken zijn en dus te manipuleren.

Clip-path

Hiermee kan je een stuk uitsnijden en dan wel of niet tonen. Gebruik hiervoor bijvoorbeeld circle(); of polygon(); Je kan beter svg clip-path gebruiken ipv CSS clip-path.

Mask

Browsersupport is slecht bij CSS mask, je kan beter svg masking gebruiken.

Hoe is browser-support?

Zie Can I Use. Uit eigen ervaring merkte ik dat je de hoogte en breedte moet benoemen in de svg zelf voor IE. Anders is de svg erg klein. Kijk je op Can I Use zie je deze opmerking ook.

Hoe animeer je SVG met CSS?

Als je gaat animeren, zorg er voor dat je van te voren de svg optimaliseert. Doe dat niet na die tijd. Een svg heeft een navigeerbare DOM, je kan dus elk element bereiken met JavaScript en CSS.

https://www.august.com.au/blog/svg-animation-with-greensock/ https://www.smashingmagazine.com/2014/11/styling-and-animating-svgs-with-css/

Animeren van SVG kan via SMIL, CSS en JS. SMIL wordt afgeraden omdat o.a. Chrome het niet meer zou ondersteunen. Kijk je op Can I Use of op MDN docs over SMIL dan kan je zien dat Chome het toch nog ondersteunt. Met CSS is (nog) niet heel goed te animeren, maar bepaalde zaken wel. Dan is de verschijningsvorm verschillend in de verschillende browsers. Goed kijken wat lukt. Het beste is JS te gebruiken. Je kan gebruik maken van verschillende library's.

Top 3:

GreenSock (voor de meer moeilijkere animaties)
snap.svg (jQuery van animatie)
anime.js (in opkomst, maar je gebruikt meer code dan GreenSock)

Animaties kan je met de Inspector Tools van Firefox in de browser bekijken en aanpassen. Onder de regels staan ook de instellingen van @keyframes zodat je die kan aanpassen via de developer tools, je moet hiervoor wel iets naar beneden scrollen. Ook zijn de timing functies van je animatie aan te passen via de developer tools.

Wanneer animeren met CSS of JS?

In The Animation Newsletter beschrijft Val Head hoe ze kiest tussen CSS of JS. Ze gebruikt hiervoor 3 verschillende regels. Hierin beschrijft ze dat ze SVG's voornamelijk animeert met JS en dan met Greensock. En komt het neer als de animatie complexer wordt of meerdere animaties bevat dan is het gebruik van JS handiger. Een beschrijving van wanneer JS of CSS te gebruiken geeft Zell Liew in zijn artikel Should you use CSS or JavaScript for web animations?. Deze beschrijving is wat uitgebreider dan die Val Head, maar komt overeen met wat zij beschrijft.

For simple two-state animations, I recommend you use CSS transitions. For more complicated animations, I recommend you use CSS animations or JavaScript. At the time of writing, the Web Animations API is still not well supported yet, so the best possible way to animate is with GSAP, which is an amazing library. Make sure you provide a non-animated, but workable version of your site for people who don’t have JavaScript enabled. They should still be able to use your website even when it’s not animated.

Quote van Zell Liew

De eenvoudigste manier van animeren kan je met CSS transitions doen. In Zell Liew's artikel CSS Transitions explained uitgelegd hoe die werken. Iets lastiger wordt het met CSS animations, maar gelukkig legt Zell Liew dit weer uit in zijn artikel CSS Animations explained. Bij CSS animations kan je de tijdlijn beinvloeden zo kan je er voor zorgen dat er meerdere states worden bereikt.

Voor SVG's is het dus het handigste om gebruik te maken van JavaScript en de library Greensock is het handigste. Bekijk Sarah Drasner haar video over SVG en animeren.

De performance van animaties

Het animeren van elementen in je website heeft invloed op de performance van je website. Bij sommige onderdelen moet de hele pagina weer opgebouwd worden. Meer informatie over animeren en performance kan je vinden in het artikel High Performance Animations

Accessible SVG's

Een svg afbeelding kan net als een andere afbeelding een alt-tekst nodig hebben voor mensen die de tekst laten voorlezen. Als er al tekst om de afbeelding heen staat die uitlegt wat je ook op de afbeelding ziet heb je geen alt-tekst nodig, voeg dan aan de svg-tag toe: aria-hidden="true". Kan zijn dat in de <figcaption> al een beschrijving staat.

Om echt gebruik te maken van een toegankelijke SVG afbeelding moet je deze inline zetten. Zet bij een inline SVG in de title tag een beschrijving van de afbeelding. Is ook een tooltip als de muis er overheen gaat. Door bugs in Chrome en Firefox voeg je toe aan de title-tag: id="title" en aan de desc-tag: id="desc".

Voeg aan de svg-tag toe: role="img" en aria-labelledby="title desc". Voeg aan de svg-tag van grote/complexe svg's toe: role="group". Hierdoor weet een browser en screenreader dat het bij elkaar hoort. Bij complexere afbeelding voeg role="presentation" toe aan onderdelen die niet voorgelezen hoeven te worden, maar alleen voor de sier zijn.

Tekst in SVG

Met <text> kan je tekst toevoegen aan een SVG waardoor de tekst toegankelijk, vindbaar en selecteerbaar is. De tekst kan je stylen via svg text {}. Zie Optimizing SVG Text & Image Delivery with Inline SVG.

SVG en datavisualisatie

Datavisualisaties zijn perfecte uitingen om svg te gebruiken. Het zijn vaak lijnen. Door SVG te gebruiken zijn ze mooi scherp op elk beeldscherm en in elke grootte. De library D3 zorgt er voor dat data wordt gekoppeld aan een SVG element.

SVG filters

In CSS hebben we filter mogelijkheden. Maar dit zijn eigenlijk versimpelde SVG Filter mogelijkheden. Met de SVG Filters kan je meer en daarom zegt Sara Soueidan in haar serie artikelen over SVG Filters, SVG Filters 101, op Codrops dat je beter SVG Filters kan gebruiken. Zij is een meester als het om SVG's gaat, dus lees vooral haar artikelen over SVG Filters.

Interessante links:

Accessible SVG's (Zie voor meer ingewikkelde svg's het artikel)
SVG op MDN
SVG als background-image gebruiken
Wat je moet weten over SVG door Sara Soueidan
CSS Tricks mega list svg information
How to handcode a svg: heeft een handige opsomming met beschrijving van de elementen in een svg. Geeft een goed inzicht hoe simpele elementen zoals een lijn of een cirkel in SVG zijn opgebouwd.
Practical SVG van A List Apart
Praktische tips over svg
Handige tips mbt Sketch en svg
Integrating SVG into your site

Interessante links animaties:

Voorbeelden

Boeken:

Smashing Magazine Book 5; hoofdstuk over SVG
SVG Essentials

Video's

Mensen om te volgen

Handige tools:

SVGOMG maakt SVG's lichter door overbodige zaken er uit te halen
Grumpicon voor inline maken van svg voor gebruik in CSS
Boxy svg: online SVG editor of met een app
CSS clip-path maker
SVG Coordinate system

Plugins:

PostCSS plugin; Write SVGs directly in CSS

Workshops

SVG workshops van Sara Soueidan

Mijn beeld van het JavaScript framework Vue

2019-03-01T00:00:00Z

Een Vue instance is de root van de applicatie. Deze wordt gemaakt door een opties object er aan te koppelen. Hierdoor heeft de instance verschillende mogelijkheden om data te tonen en acties te ondergaan. Middels de el optie koppel je de instance aan een HTML element. De el krijgt het id of class van het HTML element.

Een van de opties van de instance is de data property. Dit is de data die je wilt tonen in je HTML. Dit kan data zijn die jezelf toevoegt in de data property of die je ophaalt vanuit een API. Middels een JavaScript expression kan je de data tonen in de HTML. DE data bevat dus de variabele waarden die je wilt tonen in je HTML template.

Aan de Vue instance kan je ook een methods property toevoegen waarin je JavaScript methods kan toevoegen die bijvoorbeeld op een v-on:click uitgevoerd wordt. Dit zorgt dus voor het dynamisch maken van je website.

Daarnaast is er nog een computed property waarmee je bijvoorbeeld verschillende onderdelen kan samenvoegen tot 1 titel. Voordeel van computed properties is dat ze gecached worden.

Bij componenten heb je ook nog props, deze zorgen er voor dat het component weet welke data vanuit een hoger gelegen component doorgegeven worden.

Vue directives

v-bind plakt een attribute, zoals src, aan een expression. Zo kan je dit ook doen voor class, title, href, alt, etc. Bij src kan je gebruiken v-bind:src=. Dat kan je afkorten naar :src=.
v-if reageert er op of iets true is en anders wordt de v-else-if of uiteindelijk de v-else getoond.
v-show toont de data als het true is en anders komt er een display: none; op.
v-for toont data uit een array om er een lijst van te maken. Het is dan wel handig om een v-bind:key te doen zodat de applicatie weet om welke het gaat.
v-on:naarwathierstaat luistert naar wat achter de : staat. Bijvoorbeeld v-on:click.
Data kan je ook binden aan een class of een style attribute
v-model zorgt voor een 2-wegs data binding. Hierdoor kan data gekoppeld worden aan een template en andersom.

Components

Componenten bouw je om te hergebruiken. Zo maak je iets 1x en kan je het op meerdere plekken in je applicatie aanroepen. In een component is de data property een functie, hierdoor blijft de data binnen het component, het data object wordt ge-returned. Via props wordt data vanuit de parent naar het child (component) gebracht. De props worden benoemd in het component zodat deze weet wat die kan verwachten.

Vue project

Om een Vue project te starten kan je gebruik maken van de Vue CLI of de Vue UI tools. De laatste is een UI getoont via de webbrowser die je een project laat maken met daarbij de functionaliteiten die je graag wilt hebben. Deze kan in het Nederlands.

Naast het opstarten van een project met bovenstaande kan je ook Vue aanroepen in je HTML pagina en kan je werken met Vue.

Vue router

Vue router zorgt er voor dat je de juiste pagina kan bezoeken in een Vue web applicatie.

Virtual DOM

Virtual DOM is een beschrijving van alles wat op dit moment in de DOM zichtbaar zou moeten zijn. In applicaties die erg veel DOM wijzigingen doen is dat handig omdat niet alles telkens opnieuw gerenderd hoeft te worden in je DOM. De virtual DOM wordt telkens bijgehouden bij data wijzigingen en dan wordt gekeken of de echte DOM verschillen heeft met de virtual DOM die de echte DOM beschrijft. En die verschillen worden dan bijgewerkt in de echte DOM. Met dank aan Joel Kuijten voor de omschrijving.

Vue werkt met een Virtual DOM omdat het naar het idee van de makers sneller is dan manipulaties direct op de DOM.

Vue en Accessibility

Vue bestaat voor een groot deel uit HTML elementen, dus gebruik de juiste semantische HTML tags. Gebruik je webdev tools om te kijken of de accessibility van je website klopt. Daar test je site met een screenreader en ga er door heen met toetsenbord zodat je zeker weet of je het goed gedaan hebt.

Vue en SEO

Search Engine Optimization wordt gebruikt om een web-app of website hoog in de hoogmachine te laten eindigen. Hierdoor vinden mensen de app of site makkelijker. Een search bot van de zoekmachine scant een site en slaat deze informatie op in een database van de zoekmachine. Om er voor te zorgen dat een bot dit zo doet zodat dit het beste bij jouw site past en je de juiste bezoekers krijgt zijn er een aantal regels te volgen. Ik ga niet in op deze regels, hierover is meer dan genoeg geschreven o.a. kort bij Snipcart. Maar belangrijk bij het gebruik van een framework als Vue is dat je er aandacht voor hebt omdat het kan dat er nog geen html op je pagina te vinden is op het moment dat de bot op de site komt en dan wordt er geen info opgeslagen over jouw website.

Je kan er voor kiezen om gebruik te maken van Server Side Rendering waardoor de HTMl al klaar staat als de bot er over heen gaat. Ipv Server Side Rendering kan je ook gebruik maken van Pre-rendering. Maak je gebruik van webpack dan kan je de Prerendering SPA Plugin gebruiken. Daarnaast kan je ook gebruik maken van bijvoorbeeld een Vue framework als Nuxt JS. Deze heeft ingebouwd dat je de regels voor een goede SEO makkelijk kan implementeren, je kan het doen middels Server Side Rendering of Pre-rendering.

Beyond Tellerrand 2019

2019-05-15T00:00:00Z

Dit jaar voor het eerst bij Beyond Tellerrand geweest. Een conferentie waar ik graag heen wilde om hier de sfeer te proeven maar vooral vanwege de meer op design gerichte talks. Ik had goede verhalen gehoord over dit event van Marc Thiele.

Hier mijn aantekeningen, ideeën en opmerkingen van dit event. Ik heb niet van elke spreker aantekeningen. Soms was het ook gewoon mooi om te zien wat ze toonden. Anderen die ook aantekeningen hebben gemaakt:

Charlie Owen - Beyond Tellerrand Düsseldorf 2019
Niklas Barning - Gedanken zur Beyond Tellerrand

Charlie Owen; All constraints are beautiful

Charlie vertelde over het nut van beperkingen. Hierdoor wordt je uitgedaagd en wordt je creatiever. Als je moet werken met een bepaalde techniek of op een bepaalde manier dan kunnen het beperkingen zijn of je kan ze zien als gegevens waar je mee t e dealen hebt. Hierdoor wordt je soms ook cretiever in je oplossingen. Je wilt dan toch bepaalde zaken gedaan krijgen en als het dan lukt is de kick wel groot. Dit is wat mijn ervaring is met Constraints.

Carolyn Stransky; Humanising your documentation

Let op je taal gebruik. Zorg er voor dat de minst geletterde het kan lezen, want dan kan iedereen het lezen. Je schrijft documentatie voor de gebruiker van de documentatie. Het is vaak beter om de oplossing van een probleem te beschrijven, dan te beschrijven hoe de tool werkt. Voor Engels taalgebruik kan je de app http://hemingwayapp.com/ gebruiken om het taalniveau te bekijken. Slides van haar talk staan op: https://speakerdeck.com/carolstran/humanizing-your-documentation-full-talk.

Mike Hill; The power of metaphor

Goede verhalen hebben een vast patroon die onze geest beïnvloeden waardoor wij fijne gevoelens krijgen of ons kunnen inleven in verschillende situaties. Als verhalenverteller is het belangrijk je hiervan bewust te zijn, hierdoor kan je namelijk mensen tengoede of en slechte beinvloeden.

David Carson; Never snap to guides

Kregen David zijn eigenwijze portfolio te zien. Gaaf werk. Ik kreeg gedurende het verhaal meer respect voor zijn werk. Een opmerking van hem die me bij blijft: "Als iets goed lijkt, kijk dan nog eens misschien is er nog een betere plek." Wat David laat zien is dat je met eigenzinnig design en door te doen wat anderen niet verwachten zorg je voor aandacht. Geef niet toe aan desig guides. Maar doe je eigen ding.

Stephen Hay; I Don't Care What Airbnb is Doing

Stephen zijn talk had ik bij Refreshconf al gezien, maar was weer leuk om te zien. Mooi hoe hij de talks van de vorige dag had verwerkt in zijn praatje. Wat bij Stephen zijn talk net als bij David Carson naar voren kwam is dat het belangrijk is om je eigen ding te doen. Kijk niet naar wat anderen doen want dan ben je niet bijzonder en val je niet op. En grote kans dat je daarmee niet je eigen probleem oplost. Wat je doet is de oplossing van een ander projecteren op jouw probleem en daarop in te passen. Denk goed na over wat jopuw probleem is en welke oplossing daar bij past.

Door conventies niet voor lief te nemen, maar kritisch over na te denken zal je nieuwe dingen leren en groeien op je vakgebied.

Dorobot; Napworking

Slapen of eigenlijk nog meer het moment dat je in slaap gaat vallen gebruiken om tot ideeen te komen. Dit is wat Dorobot gebruikt in haar proces. Zij vindt geen enkel idee te stom. Ze schrijft alles op in haar Idea Management Service, dit zijn kaartje in een kaartenbak die ze dan er bij pakt om op ideeen te komen.

Heydon Pickering; Flexbox Holy Albatross

Interessante manier van opbouwen van een responsive design is de Fab Four techniek van Remi Parmentier. Dit is een manier zonder mediaqueries, want volgens Heydon zijn mediaqueries een hack.

Tantek Çelik; Take back your web

Maak gebruik van je eigen website. Andere diensten zijn niet altijd betrouwbaar. Medium moest je voor betalen opeens, Facebook gebruikt je data. Je kan ook op je eigen website makkelijk artikelen plaatsen, maar ook likes krijgen als je dat belangrijk vindt. Dat kan met webmentions en Microformats. Voordeel van plaatsen op je eigen website is dat je niet afhankelijk bent van het tijdlijn algoritme van de applicatie. Kijk eens op de website Indieweb.

Een interessant artikel die goed verwoord wat Tantek vertelde is van Matthias Ott - Into the personal-website-verse.

Mijn Front-end leven, een evaluatie (2020)

2020-05-26T00:00:00Z

Afgelopen 6 jaar was ik aan het werk als Front-end ontwikkelaar. Om precies te zijn vanaf 14 april 2014. Een belangrijke dag voor mij. Ik had sinds 1 maart een uitkering en was de maanden er voor hard aan het werk geweest om mijzelf om te scholen tot Front-end ontwikkelaar. En nu was ik echt Front-end ontwikkelaar. Bij Zorgweb zagen ze het zitten met mij, er waren wel wat bedenkingen. Ik had geen opleiding als Front-end ontwikkelaar, ik was leraar in het speciaal onderwijs geweest, en was 'al' 40 (ik was het oudje van Zorgweb :-)). Zeker in de webwereld al iemand op leeftijd. Maar ze durfden de gok aan. Daar ben ik ze dankbaar voor. Hierdoor heb ik in ieder geval 6 jaar van mijn werkende leeftijd dat kunnen doen wat ik al jaren geleden had gewild. Iets met computers. Iets waarvoor ik de HEAO in Groningen ooit was gestart, maar uiteindelijk niet had afgemaakt.

Ik sta op het moment weer op een splitsing, daarom ook deze evaluatie. Per 1 juli zoek ik een nieuwe uitdaging. Mijn functie komt te vervallen. Iets wat ik jammer vind, want ik had zekerheid en ik hoopte nog verder Vuejs te leren. Maar ik zie het ook als mogelijkheid een nieuwe uitdagingen aan te gaan. En daar was ik ook aan toe. Soms maak je zelf die keuze en soms wordt die voor je gemaakt.

Als je het hebt over ontwikkelen en nieuwe dingen leren ben je bij Front-end aan het goede adres. Afgelopen jaren ben ik constant bezig geweest mijzelf te blijven ontwikkelen en zorgen dat ik op de hoogte was van de laatste trends. Hiervoor bezocht ik meetups, conferenties, workshops en las ik veel artikelen, nieuwsbrieven en boeken. Ik moest inhalen wat anderen al wisten en zorgen dat ik op de hoogte was van de laatste ontwikkelingen. Ik vond het heerlijk. Soms besteedde ik wel een paar uur per week om Front-end nieuws te lezen.

In de loop der jaren ben ik sterk verbeterd in het toepassen van HTML en CSS, maar juist ook in JavaScript en heb ik leren programmeren. Verschillende tools zoals GIT, Sketch, PhotoShop heb ik onder de knie gekregen. Maar ook het toegankelijk bouwen van websites heb ik toegepast en ben ik in verbeterd. Al met al heb ik een betere kijk gekregen in de webwereld en de wereld van software ontwikkeling. Ik heb gewerkt in een Scrum team, ben in aanraking gekomen met OTAP, de watervalmethode, met termen als Agile en Lean.

In de loop der jaren heb ik fijne en bijzondere mensen ontmoet. De front-end community is een wereld van laten zien wat je weet, het beter weten en vooral anderen helpen. Het is een fijne community.

Zoals je kan lezen schrijf ik in de verleden tijd, alsof het niet meer gaat komen. En tja, dat weet ik nu nog niet zeker. Wat ik wel weet is dat ik het werken met mensen heb gemist de afgelopen jaren. Ik ben een empatisch mens en deze kwaliteit kon ik als Front-end onwtikkelaar hier niet kwijt.

Afgelopen tijd de laatste 6 jaar geevalueerd en gekeken wat ik graag wil. Het liefste wil ik werken met mensen en computers (webontwikkeling). Wil ik graag mensen helpen, blij maken, coachen, informeren en wil ik graag processen optimaliseren. Een plek waar ik mij kan ontwikkelen en niet alleen in front-end/software technieken, maar ook mijn intermenselijke skills.

Ik ben benieuwd naar waar ik mij de komende tijd heen beweeg.

Welke baan is geschikt voor mij? (2020)

2020-06-15T00:00:00Z

Vanuit Loopbaan Coaching heb ik gekeken naar mijn eigenschappen en welke banen/functies daar bij passen. Even een opmerking tussendoor, voor loopbaancoaching kan ik je Karen Pullen adviseren. Tijdens de loopbaancoaching heb ik o.a. een sterkte test gedaan (en natuurlijk nog veel meer) en deze sterkte test liet zien dat mijn eigenschappen sterk gericht zijn op contact met anderen. Eigenschappen die bij mij voorop stonden waren probleem oplosser, concensus zoeker, positief zijn en empatisch. Dit zijn dus vooral eigenschappen die belangrijk zijn bij de omgang met mensen. Aangezien ik het werkveld software/webontwikkeling interessant vind ben ik met deze kennis gaan zoeken op het snijvlak van IT en mensen.

Mijn passie is fietsen hier ook gekeken of er een mogelijkheid is om een baan te vinden die hier op aansluit. Waarbij ik kijk of het een bedrijf in de fietsbusiness is, maar een sportieve werkomgeving zou ook tof zijn. In de fietsenbusiness zouden banen als Customer Care of Account manager het beste passen. Die zijn in dat werkgebied het meest voorkomende voor wat passend is voor mij. Wel minder gericht op software/webontwikkeling.

Als ik naar de software/webontwikkelingswereld kijk dan kom ik uit op banen als: Account manager, Business development manager, docent informatica, Product Owner, Project manager, Scrum master, UX designer.

De rode draad bij de verschillende functies zijn de persoonlijke eigenschappen die je moet hebben voor deze functies. Hierbij gaat het om empathie (je inleven in de gebruiker), luisteren (tussen de regels door luisteren en begrijpen wat iemand wil zodat je daar op kan inspelen), probleem oplosser (leuk vinden te puzzelen na te denken over problemen). Deze eigenschappen noem ik ook wel de soft skills die je moet hebben. Per functie ligt de nadruk op die soft skills wel verschillend.

Daarnaast heb je meer specifieke kennis en kunde nodig voor een functie. Dit zijn zaken die je kan of zelfs moet leren. Dat zijn tools en technieken waar je mee werkt, productkennis van het bedrijf waar je voor werkt, coachingstechnieken, etc.

Wat ik heb gemerkt en hoor van verschillende mensen is dat elke functie door een bedrijf anders wordt ingevuld, de nadruk ligt net ergens anders op of heeft overlap met een andere functie. Hierom lees ik de vactures goed en vraag ik in een sollicitatiegesprek naar de preciese invulling van de functie.

Naast het vinden van de juiste baan vind ik belangrijk het gevoel te hebben zinvol bezig te zijn. Door andere mensen te helpen en blij te maken kan dat al snel, maar daarbij let ik wel op waarmee ik ze blij maak. Daarbij vind ik het belangrijk dat het bedrijf ook bij mij past. Belangrijk daarbij zijn vragen als: wat de visie van het bedrijf is op wat ze doen, hoe doen ze dat en wat is de drijfveer van het bedrijf? Is hun doel winst maken of willen ze zinvol bezig zijn (en daar dan winst op maken om te kunnen blijven bestaan). Dat maakt verschil in hoe ze omgaan met hun product of dienst.

Terug in de webwereld

2023-11-11T00:00:00Z

Zo voelt het echt, terug zijn. Afgelopen zaterdag stond ik bij de open dag van het Cibap om aankomende studenten te vertellen over Media Vormgeving en dit was leuk! Nu zul je zeggen, je bent toch docent rekenen en dat klopt. Maar veel studenten van jaar 2 en 3 van Ontwerp & Media geef ik rekenles. En voordat ik weer het onderwijs in ging was ik 6 jaar front-end/ UX / CSS ontwikkelaar. Hierdoor kan ik veel vertellen over het toekomstige beroep. En ik vraag altijd aan de studenten waar ze tijdens andere lessen mee bezig zijn. Leuk om te zien wat voor toffe dingen ze maken en ik probeer altijd te zoeken naar raakvlakken tussen rekenen en de andere vakken. Om mijn collega's te helpen en omdat ik ze beter wil leren kennen had ik aangeboden om bij Ontwerp & Media te helpen. Gelukkig waren er studenten aanwezig die ik kon inroepen als vragen iets meer de diepte ingingen.

Ik heb het gevoel op de perfecte werkplek te zijn beland, ik werk op een creatieve plek waar ik hele lieve studenten mag lesgeven, met ze contact heb en kan tijdens de rekenlessen nog wel eens gebruik maken van mijn kennis van hun werkveld. En kan leuke cursussen volgen, die ik altijd al eens wilde doen.

In afgelopen 2 weken kon ik de training Adobe Illustrator bij Cibap Next volgen. Dit was een cursus van 2 dagen, nu kon ik eindelijk ook Adobe Illustrator beter leren kennen. Vooral het anders kijken naar afbeeldingen zal mij bijblijven en dan gaat het om het zien van basisfiguren, driehoek, vierkant, rechthoek, etc., in de opbouw van figuren in een tekening.

Misschien zie je hier meteen de connectie van rekenen en design, die basisfiguren zijn ook een onderdeel van rekenen. Dus mijn hoofd begon gelijk te werken en na te denken over het gebruiken van Illustrator in een les. Rekenen toegepast in de directe praktijk van de studenten. Volgens mij kan je het qua onderwijs niet beter krijgen.

Onderstaande gemaakt tijdens de cursus, spelen met letters en wat omlijning. Dat geeft leuke effecten. Met een paar simpele stappen, snel resultaat. Daar hou ik van.