This blog consists of all notes I took during the Weekly Nerds of the minor 'Web Development' I took in 2017. Weekly Nerds are basically presentations by designers/developers from the field we studied to apply in ourselves.
All blogposts contain an image of the notes I took during the presentation.
I wrote follow-up articles of five Weekly Nerds total. Links to these articles can be found underneath the blogpost of these specific Weekly Nerds.
The user experience consultant Stephen Hay was invited to speak to us about his expertise. Design, that is. More specifically; design for the web. Also author of a book about this topic, called: 'Responsive Design Workflow'.
He introduced himself by mentioning the location he natively comes from, California USA. He lived there till the year 1992, when he came to The Netherlands to live in Leeuwarden. Stephen talked about his studies in art and graphic design, and that his dad was not very fond of that choice.
He works at the online auctionhouse Catawiki, to inprove the overall usability of the system. Some of the more important aspects of internal guidelines of such a project are colour, type and readability, so users are not troubled when using the platform. Another thing he explicitly mentioned, was context. Context is key in (re)designing websites. "If a rubber duck can understand your point, your story is good enough," he said, winking to us (future) developers.
Developers and designers are, according to Stephen, not communicating well enough. They need to be on the same level in the team to prevent mistakes that might be needed to get fixed in the future. For a better feel for the project, he suggested that both designers and developers should work within the browser as soon as possible. It should also all be done with the mobile-first approach, so it's easier to see what's important. A useful tip he gave: Find a suitiable breakpoint based on resizing the viewport, instead of choosing screen-widths of devices, since there just are too many of them to choose.
Stephen ended his talk by answering some quick-questions, besides the 'bigger' questions we had at the beginning that resulted in the story descripted above.
One of the lecturers of the University of Applied sciences, and my coach of the year prior to this minor, Justus Sturkenboom wanted to give us multiple tips about the benefits of sketchnoting. Not only that; he tackled the tools necessary for sketching notes of great quality.
He started out by giving us a short story on the history of sketchnoting, where the principle came from and how it is applied today. Why sketchnoting is better than writing regular notes came by as well. Where both sides of the brain are working together to memorize the note more effectively.
Sketching does not equal to drawing. He made that very clear by letting us sketch some objects he presented on the beamer. At first he gave us a full minute to draw a cake. Everyone involved tried to make a drawing that represents the shown cake as best they could. The lesson here was about the drawing: It wasn't needed to draw that exact cake, only the key-aspects of the cake were needed for the sketch to be effective. Justus gave us another try to sketch the cake, but now we had 25 seconds total. This repeated itself until we only had 5 seconds to sketch a cake. in the end, everyone was able to sketch a cake with just a few lines and shapes. Lines and shapes are very important in sketchnoting, since combining them could result in every possible form you can think of.
Highlighting within the sketchnotes are a great way to emphasize, he said. By providing important text with a thicker stroke, it'll be easier to see hierarchy in the notes. This can also be done with different styles of typography, or with arrows, bubbles or frames.
But sketching takes time, and it is important to also listen to the speaker. It is impossible to do two things at once, right? That's were planning comes in to play. Research the speakers topics before the presentation, to give yourself a sense of what's about to come, Justus mentioned. It can also come in handy to provide the notebook with some layout beforehand, so all you have left to do is to fill it in with the sketched information from the speaker.
About the equipment every sketchnoter needs: It's important to use pens, markers and paper that you are comfortable with. There are no strict guidelines for it, but Justus said it's good to always have a marker, two highlighters (grey and a bright colour), a fineliner, a notebook with thick paper and something to store everything in.
Justus can talk very fast. He proved that once again by finishing his presenation in 45 minutes, where he planned to speak 90 minutes total. However, everything he said was clear and very useful to apply in later presentations.
The initial speaker of this Weekly Nerd was unable to give a presentation, so we received more of an improvised talk by someone else, instead. The name of the speaker was Peter Paul Koch, a front-end developer and founder of Fronteers.
He didn't have much time to prepare a presentation for us, so he needed to improvise a bit by giving us a list of problems with web development he often speaks about in his other talks. Despite the fact that he improvised with us, it still was very interesting to see the passion this man has for his job. About how he knows everything about certain topics, and knows how to present it to us student developers, with a lot of humour.
The list he provided us with, consisted of four items. Actually he mentioned there are five of them, but that he needed to come back some other time to explain the final one.
Peter said that web developers tend to emulate native apps in web appliations, which is not advised. Because of the fact that native apps control the standard that web apps are trying to head to, native apps will always have a 'lead' on them, in terms of performance and functionalities.
His second flaw with web development was about the many features browsers currently have. Browser development is stuck in the feature focus, where they try their best to concentrate on what the user needs. Instead they need to carry on with development and enter the experience focus, where the user experience is the main goal.
Another flaw he mentioned, are the tools developers use. Developers need to understand vanilla code, instead of relying on frameworks, taskrunners and helpers.
The fourth and final flaw Peter used in his presentation was all about the different kinds of web platforms. People often think that there are just a few of those platforms, when there are actually thousands. Every individual browser on every phone should be counted as an unique web platform. Therefore it is important to test on multiple browsers and devices of all sorts, in order to get a grip on the effectiveness of your written code.
All of the flaws Peter talked about enhance eachother, like a chain consisting of problems. When a developer tackles one of these problems, it should be easier to get rid of the others as well.
After about on hour of talking, he gave us the opportunity to ask him some questions about the talk and his expertise. Overall it was a very impressive presentation which was accurate in terms of information to our minor.
I wrote a follow-up article containing a similar list of frustrations within web development. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/2_5-levels-of-ignorance-in-modern-web-development.md
After a few weeks of playing around in with GitHub during the first semester of our minor, we received a lecture about the Git software from our lecturer Titus Wormer.
Titus began his talk by showing a short video explaining the concept of Git, and upstreams in general. It featured a lot of metaphors, for us to get a good grip of the subject. The video was about the cookie recipe of some fictional grandma, and how family members were able to improve on it by creating branches on the recipes. Here they added their own ideas into the mix, following by a pull-request towards grandma.
If grandma were to like the addition, she would merge the idea into her own recipe. If not, the newly created recipe would play a role in it's own fork of the recipe.
After the metaphorical cookie-part of the presentation, Titus discussed some basic history of Git, and how the principle of Open Source software came to be.
Anyone who came up with a good question would be rewarded with a fortune cookie, he said. He had some spare, since he recently bought two kilograms of the stuff.
The final part of the presentation included a demonstration of using Git via the terminal. This is where the most questions emerged. That's understandable, since it was all text-based.
Titus didn't really have an example to show us. He decided to create a new repository to pull some files from, adjusting them and pushing them eventually.
During this session, he also briefly explained the more advanced principles like squashing and rebasing commits.
I wrote a follow-up article on the history of open source software, including Git. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/5_the-history-of-open-source-software.md
The fourth Weekly Nerd was given by a front-end developer from 'De Voorhoede', Jasper Moelker, at the office he works. The topic of this presentation was Progressive Enhancement. A very broad topic, with key components to keep in mind when developing a website for the end-user.
Jasper set the term 'Progressive Enhancement' against 'Graceful Degradation'. They basically are the same thing, but viewed from a different perspective. Progressive Enhancement ia about adding new features to improve on the user experience, but keeping the overal code readible to as many browsers as possible.
Graceful degredation is the same concept, but as viewed from the other side; removing new features without removing the way users experience the website/application.
To accomplish this, a developer needs to build layered experiences. Starting with a baseline, a developer should always make the application work with the functionalities built in with most systems. Only then can the developer focus on more 'acceptable' implementations, building extra efficiency on top of the baseline experience, with newer features that may not be supported on every system. After that, the 'enjoyable' layer can be developed, putting a smile on the user's face.
Feature detection if a very important aspect of progressive enhancement, Jasper mentioned. Without it, the parser of an older browser might come across a functionality it doesn't fully understand, potentially breaking the entire application.
To put us to the test with the new knowledge we obtained, Jasper let us create a pattern primer, which is basically a detailed map of a pattern or feature. This primer needed to contain the explanation of our chosen pattern, along with an interaction flow and possible browser functionalities to improve on the concept of the pattern.
After about half an hour, Jasper collected everyone's sheet and we discussed them in the group.
The announcement of this talk was made at the start of the minor, and it sure was something to look forward to. Bram is a blind developer who is specialized in accessibility. He arrived accompabied by his guidance dog, which was able to sit quietly in the same spot for the entire presentation.
Bram began by showing the peripherals he needs in order to surf on, and develop for the web; consisting of a special keyboard for him to read with his fingers, and a screen reader.
By navigating to a few major websites, he demonstrated these tools with their practical use. In between these demonstrations, Bram mentioned WCAG and the importance of accessibility on the web in general. We were already taught multiple times in the past about the importance of this, but it was very good to hear it from someone who experiences annoyances related to this topic on a daily basis.
After his demonstrations, we had the opportunity to ask him some questions. He was able to answer them with ease, and taught us a lot more about accessibility then we initially knew before his talk.
I wrote a follow-up article on the topic of web accessibility. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/1_critical-convenience.md
It was that time again; time to listen to another installment of the Weekly Nerd presentations, when we all just started a new semester. We received a new set of courses to practise: Real-time Web and Web of Things. Both of which are about letting multiple devices communicate with each other.
The speaker that came to teach us something, was Niels Leenheer. He is an expert on the Internet of Things (IoT) spectrum. He also is founder of HTML5Test and created Salonhub.
With little introduction to the concept of the internet of things, Niels directly dove into the more technical details: What is necessary to set up a IoT-environment, how to set it up and what it could be used for.
One of the techniques Niels used for his projects, is called 'KlikAan-KlikUit' (SwitchOn-SwitchOff), a rather simple, not exciting way of dealing with IoT-development. It works with the transmission of data via a 433MHz-frequency channel, which allows the connected devices to communicate.
Another interesting technology within IoT, is called zWave. This enables the ability to create a mesh network that spans across multiple devices. This network is capable of achieving a greater reach than an ordinary Wi-Fi network. Every connected device will be it's own network hotspot, basically creating a chain of devices that depend on each other.
Niels also showed us some very interesting examples of IoT-projects he created himself.
He made a mailbox that lets him know when he receives mail, and created an add-on for his washing machine that sends a notification when his clothing is done by sensing the Watt-usage, and checks if it recedes 5 Watt.
Niels is getting notified from these installations by, what I think is his most valuable creation, a Pixel notification center, which is also capable of rendering 'monsters' (sprites) in real-time via an app.
Security of IoT-technologies are not the best. Everyone that knows something about your setup, is able to manipulate the IoT-traffic, if not done properly.
A relatively short presentation, though very inspirational and packed with new terms, technologies and ideas.
I wrote a follow-up article on IoT-technology, and how I might implement it in my own house. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/4_my-mechanical-mansion.md
This Weekly Nerd was held on the week's friday, because the attending developer, Peter Peerdeman, was unable to show up that tuesday. We already knew who Peter was, as he coached our group during the second project week of the minor; the project where we built a prototype application / feature for either one of Lifely's products: Freshheroes or Part-up.
At Lifely, Peter does a lot of work with the MeteorJS framework. He showed off their expertise with this particular framework by navigating to a dashboard within an intranet, meant for all kinds of companies. This dashboard featured a real-time network between all connected users, making interactions like chatting possible.
The intranet was served from Lifely's own server, without connections to social media platforms like Facebook or WhatsApp. Only so did they make it possible to obtain full privacy for all of their users.
After the introduction to the capabilities of Meteor, Peter moved to the topic of scalability. More specifically; loadbalancing. This is a term used to define the distribution of data traffic on a network. It's especially important on services that feature lots of real-time traffic. Loadbalancing requires session affinity, which translates to the 'memory' of the path the server took to connect to each connected client. This process can be automated with hosted solutions like Meteor Galaxy. It's also possible to scale it yourself using Docker images.
Peter promised to end his presentation with some commentary on GraphQL (Graph Query Language), a neat way to make requests to a server. This wasn't really necessary to remember, but was discussed mainly out of interest from both Peter and us, the group listening to his talk.
It did not take long before his explanation on this entangled itself, eventually coming to a point where the beamer showed more open applications than a usual air traffic control post. Since it wasn't important to write down, we all sat down and just watched Peter trying to tackle this difficult topic.
The end of the presentation on itself was not enough to know anything crucial on the topic of GraphQL, but it sure is interesting to dive into at a later moment during the minor.
Unfortunately my sketchnotes contain a wrong interpeteation of her name. It should be 'Eva-Lotta Lamm'.
Quite some time has passed since the latest Weekly Nerd. This specific presentation was not given in one of our available classrooms, but in the CMD-Medialounge, instead. Also, the talk was organized via Eventbrite and presented as an ICONS-meeting, so other students of the university could join.
The speaker of the event was Eva-Lotta Lamm, who is an expert in making sketchnotes.
There was a sign-language interpreter in front of the audience to translate everything that the speaker would say to a girl in the front row, who had lost her ability to hear.
After a short introduction of the previous experiences Eva-Lotta has faced in her career, she listed five essential guidelines for sketchnoting. This was done in a very clever way, where she projected a live video-feed of her actually sketching the guidelines with the techniques she wanted to teach us about. The feed was recorded, as well; so students that weren't able to attend this event could rewatch it at a later date.
Almost everyone in the space sketched along with Eva-Lotta. It really was a nice way of following the presentation, because she wasn't able to speak too fast while sketching. No one was distracted and kept their attention on the beautiful drawings she made.
The topic of this talk was similar to a previous Weekly Nerd, the one where Justus Sturkenboom shared his experiences with sketchnoting. Though a similar subject, both talks tackled different problems when it comes to sketchnoting. Where Justus focused more on the gear you should have, Eva-Lotta told us more on the different techniques people should implement in their sketches.
While not being a presentation specifically meant for our minor, the talk Eva gave will be of great influence for all of the future events we visit.
The CEO of the already familiar Lifely came to visit us for a Q&A, as a stand-in for the speaker that was not able to attend this Weekly Nerd.
A short recap of his life as an entrepreneur was his way of introducing himself. He mentioned that he started being a businessman at age twelve, selling Pokèmon cards to people all over the world.
He's now busy with a lot of different projects, including one about the integration of refugees in our country. Nick told us the most about this project, since he is very proud of it.
Though we've all experienced Lifely as a full-stack developing company, Nick mentioned the main focus goes to the back-end development of applications. I was surprised when he said that.
Nick was curious to see if we had any questions for him. And yes, we has some; mainly on the subject of starting a company in the future. He was able to answer then all very nicely by summarizing a list on the topic of "How to be successful in business".
This list consisted of the following statements:
- Do one thing at a time.
- Be unique and innovative.
- Make sure you have proof that you're able to sell your product.
- Learn from your mistakes.
A final question also was about success, more specifically, about success in projectmanagement. Nick answered it by telling how they handle it at Lifely, putting emphasis on working in short sprints and working towards the Minimum Viable Product.
The interaction engineer of the nerdy company Q42, Guido, gave us a visit to talk about the work that the company does for their clients. Though they work for clients, Guido mentioned that the user of the final product is the most important factor they have in mind during development.
Q42 consists of three locations, spread all over the globe. The combined amount of nerds at work on these locations, add up to 67.
The company makes beautiful websites, web- and native applications, and IoT-solutions with JavaScript, Swift, Scala and C# code.
One of the IoT-solutions Guido mentioned, was the web-connected coffee machine in their own office. He seemed to be very proud of it. I must give him that, since it seems to have been an awful lot of work, based on the explanation he provided us with.
Guido started by explaining the way they figured out how to access the boarded-chip of their coffee machine, by opening the logo plaque at the back. He showed us what was hidden behind this logo. To my surprise a serial port showed up, one that can be connected to a Raspberry Pi board via the Universal asynchronous receiver/transmitter (UART) pins.
The output the machine gave, was 'encrypted', though. However, by applying a DIFF on this output, the developers of Q42 figured out how to read what caffeinated beverage was requested.
This meant they were able to count the amount of coffee they've drank over time, and share it with the world.
The idea of the to the internet connected coffeemaker was sold, and currently there is a company in the United States producing machines like the one inside the Q42 office.
After that story, Guido briefly talked about a relatively new development within the Internet of Things category, the LoRa-chip: A small chip that's connected to a free-to-use global network. The chip can send all sorts of data, read from an array of sensors.
Later in the presentation, Guido switched topics to data stores, on how webservices are being deployed and regulated.
He mentioned: Meteor + HTTP Publish, FireBase, Google Cloud PUB/SUB and Amazon Kenisis.
There weren't any follow-up questions at the end of his presentation. Guido did receive some other questions, in which he was asked to give more detail on parts of his presentation, like the Firebase platform and the LoRa-chip.
I wrote a follow-up article on the upcoming LoRa-technology. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/3_the-rising-free-network.md
The final Weekly Nerd was another presentation at the ICONS event. This time with someone in the spotlight who came all the way from the United Kingdom. Léonie is a blind webdeveloper for quite some time now, basically since the web started existing back in 1993. She hasn't always been blind. During the start of her development career Léonie unfortunately lost her eyesight. Before starting with an actual presentation, she mentioned that she frequently gives talks like the one she was about to give us, for similar and much larger audiences.
Léonie only had one topic for this meetup. She wanted to list five things about screen readers; about misconceptions and just important facts to remember. Who is in need of a screen reader? Where and when do these people use a screen reader? And, more importantly, why do these people need to use a screen reader in the first place; aren't there any alternatives?
Since Léonie is blind, her presentation looked very basic and straight to the point. A strong aspect of a poweful presentation, in my opinion. This also meant her presentation didn't feature more than some unordered lists, which has it's downsides. Nevertheless we were all enthousiastic about how she was going to astonish us with the knowledge she wanted to share.
It was immediately clear that not only the blind use screen readers. Partially sighted people and people with autism or dyslexia also are in need of a screen reader to use the web. But despite what a lot of people think, a screen reader is not always a piece of software to read websites out loud. Digital assistants, voice interfaces and the all familiar navigation system all use a screen reader for information input/output.
Besides screen readers, there are braille interpreter keyboards available, as well, but they can cost up to thousands of pounds, Léonie said.
Then Léonie moved on to the 'Where' part of the things about screen readers. Screen readers can be used on any platform and operating system, which provide the blind with options. Some are free to use, while others can cost a few hundred pounds. The software of screen readers dives deep in the layers of what is about to be read, to enhance the pronunciation with emphasis when needed, or to just give some more feedback on the element the user's TAB-index is focussed on at that point.
The lang attribute can help out here. It makes the screen reader use another voice for the specific language, so the speed and tone of voice will be adjusted correctly to the giving language.
Unfortunately screen readers are not equal to browsers, meaning that not every new implementation will be built into the screen readers with new updates. This can be unfair to blind users on the web, because they are unable to have the same experience as people who can see.
Finally, Léonie gave a summary on why you should develop with accessibility in mind, and came up with the following list:
- It feels good.
- It's your responsibility as a developer.
- It's your choice. Decide wisely.
- It doens't have to be perfect. Not a single website is, so just do your best to make it as accessible as you can.
When her presentation was over, we had thirty minutes left to ask Léonie some questions about literally anything, though we all stayed at the topic of the presentation and accessibility on the web in general.
I wrote a follow-up article on the topic of web accessibility. Read it by clicking the link below.
https://github.com/BerendPronk/minor/blob/master/articles/1_critical-convenience.md