Time to mix IT security with web design, so a few notes from the first chapters of Inclusive Design Patterns, by Heydon Pickering.

Weekend read. From @smashingmag pic.twitter.com/qkbo72HSu9

— Dorin Moise (@dorinmoise) March 30, 2018

Some basic principles:
– always use semantic structures (ex. use the lang attribute)
– prefer existing HTML elements instead of inventing new structures. In other words, embrace standard behavior. If you can use a native HTML element, then do so.
– use progressive enhancement: HTML, then add CSS, then add JS (also known as ‘content first design’)
– “If it’s not curlable, it’s not on the web”
– Henny Swan UX principles: give users choice, put the users in control, design with familiarity in mind, prioritize features that add value
– remove redundancy (ex. instead of having a logo and a ‘home’ label both pointing to the homepage, consider turning the logo into a navigation link)

Fonts:
– never use absolute font size (ex. 16px), use the relative measures
– use rem over em to avoid font size nesting problems
– font display problems (especially when using web fonts): FOIT – Flash of Invisible text, FOUT – Flash of Unstyled text. See SmashingConf London — Zach Leatherman on ‘Web Fonts are ▢▢▢ Rocket Science’
– start using font-display: swap, optional, fallback (Chris Coyier – If you really dislike FOUT, `font-display: optional` might be your jam)
– when using web fonts, you can specify to download only the characters that you need: https://fonts.googleapis.com/css?family=Roboto&text=ABCDEFGH

Accesibility:
– try to navigate your website using only the keyboard: skip links, tab index, highlight the focused element
– the ‘skip to content’ links are mostly for sighted, keyboard-only users
– make sure that all the elements are focusable, that the focused element is visible and highlighted
– try to navigate your website using a screen reader
– design for the extremes:
– design for the people with poor networks: the ones with good networks will also be happy
– design for the people with readability problems (ex. dyslexia or color vision deficiency): the other users will also benefit
– always provide alternative text
– don’t differentiate by color alone
– don’t make the touch targets too small (believe it or not, everybody has fat fingers)

Do not break conventions:
– allow pinch to zoom
– use blue and underlined links (color is not sufficient, use underline as well)

The human brain uses patterns called schemata to understand sense data. Schemata constitute prior experience against which current experience is evaluated.
In programming terms, schemata are a kind of cache for understanding. So long as a familiar thing is being experienced, little more effort is required to understand it.
By the same token, if something genuinely new is experienced, there’s nothing in the cache to be relied on and thesense data must be evaluated in full
smashingmagazine.com/inclusive-design-patterns/

Design
– prefer left align of text instead of justified (especially for narrow columns)
– be careful with the line height: the users will zoom in. Never use absolute font size!
– warn the users about the external links
– automatically add icons from CSS instead of the WYSIWYG editor (example: icons for the external links that will open in a new tab)
– make the link texts descriptive
– if you use video, think about closed captions. They are not only for the users with hearing problems (ex. watching it without volume)
– don’t be afraid of using relative #links in the navigation menu
– SVG is probably the best option to design the hamburger MENU button (instead of image, font, unicode character, etc)
– if you have an online store, use microdata to have rich snippets in the search results
– if you have to implement infinite scrolling, then consider having a ‘load more’ link for the keyboard users. Or think if it’s the right thing to do 🙂
– turn the placeholders into labels when the users start typing

Content
– follow the ‘content-first’ guidelines
– keep it short, avoid passive sentences, eliminate redundancy, vary the length of sentences
– use readability tests (ex. Flesch)
– when creating your headings, think about the table of contents (do the headings still make sense when reading in the ToC?)
– don’t make your site content dependent on client-side JavaScript
– everybody loves table of contents, especially if the content is long

In the end, a strong conclusion: it’s all about the end result. What we have to design is processes, not screens.

People are not really into using products. Any time spent by a user operating an interface, twisting knobs, pulling levers or tapping buttons is time wasted. Rather, people are more interested in the end result and in obtaining that result in the quickest, least intrusive and most efficient manner possible.
We will design processes, not screens.
We will design systems, not individual pieces.
We will design less “using,” and more getting results.
– Goran Peuc – Nobody Wants To Use Your Product

Time to look back at 2017 and put together a few things that I enjoyed.
You can read the rest of this post while playing the song below, one of the things that will remind of 2017:

1. A book: Sapiens: A brief history of humankind, by Yuval Harari.
If you want to explain to an alien who we are and what’s our story on Earth, this is probably your handbook. A lot of insightful ideas and explanations, but one that stuck in my mind was how evolution doesn’t care about the individual:

The Agricultural Revolution left farmers with lives generally more difficult and less satisfying than those of foragers. Hunter-gatherers spent their time in more stimulating and varied ways, and were less in danger of starvation and disease. The Agricultural Revolution certainly enlarged the sum total of food at the disposal of humankind, but the extra food did not translate into a better diet or more leisure. The average farmer worked harder than the average forager, and got a worse diet in return. The Agricultural Revolution was history’s biggest fraud.
The evolutionary success of a species is measured by the number of copies of its DNA. If a species boasts many DNA copies, it is a success, and the species flourishes. From such a perspective, 1000 copies are always better than a hundred copies. This is the essence of the Agricultural Revolution: the ability to keep more people alive under worse conditions.
Quote from the book on goodreads.com

2. A photo editing tool: Photolemur. It promises to edit all your photos in one click, with the help of artificial intelligence. I like taking pictures, but I was never really into photo editing. So I am happy to leave this part to AI 🙂
And the results are not bad:

3. A place: Tuscany. One of the most amazing places in Italy, which is in turn one of the most amazing places in Europe. I spent there a full week last summer and I enjoyed every day of it!

4. A game: Really Bad Chess One of the very few games I play; really smart and so addictive that I’m playing it daily. The classic rules of chess apply, but you play with random pieces (ex. you can start with 3 queens and 4 towers).

5. A movie. I did not watch too many movies in 2017. But I watched again (after 8 years) Inglorious Basterds, and I believe that the way Christoph Waltz is playing the German detective is a masterpiece. I could watch it over and over again:

6. A learning tool. I am trying to constantly learn new things. Learning how to learn is one of them. Brainscape helps me create flash cards on my laptop and study them on my phone, whenever I have a few minutes free. Highly motivating.

7. A blog: waitbutwhy.com. Even if I know it for a couple of years, it’s in 2017 when I spent lots of time reading it. The series of posts about Elon Musk are really entertaining, but you have to see them as small novels instead of blog posts. Tim Urban (the author) has a funny way of zooming out and showing you things from a higher perspective.

8. An event: In 2017 I was lucky to attend a number of interesting sports events. I went for the first time on Anfield to watch Liverpool play in Champions League, I saw Ronnie O’Sullivan winning the Snooker Masters in London, and was present to the amazing comeback of Simona Halep in the quarter finals of Roland Garros.
But the live event that I enjoyed the most was no doubt the summer Coldplay concert in Brussels. The sport events have their own way of making you feel the moment, but once it’s over there’s not too much left. But a music concert is different. The way the songs make their way into your mind turns the entire experience into something close to magic and create long-lasting memories.

9. Writing In line with one of the resolutions for 2017, I tried to write a bit more. I had a few guest posts about snooker, football and analytics on anglofil.ro and doubled the number of posts on this blog. Turns out, writing is one of the experiences that I enjoy 🙂

10. A picture: Romanian protests in Bucharest, February 2017. To be continued in 2018…

Some insights about web security from the excellent ‘Bulletproof SSL and TLS‘ book from Ivan Ristic.

– the Internet was not designed with security in mind
– the first efforts to improve this were in 1995, when SSL3 was released (by Netscape). Then TLS followed up.
– TLS 1.2 – the most recent version – was released in August 2008 (its successor – TLS 1.3 – is still under development, as of September 2017)
– the goal back in 1995 was to enable e-commerce. Today we have that (‘commercial security’), but we want much more.

One of the biggest problem with the Web PKI is the approach to certificate validation. The following improvements aim to fix that:
1. Public Key Pinning:
– addresses the fact that any CA can issue a certificate for any domain name without the owner’s permission.
– with pinning, site owners can select (pin) one or more CAs that they trust, creating their own (small) trust ecosystem
– delivered via HTTP headers (Public-Key-Pins)

2. HTTP Strict Transport Security (HSTS)
– allows web servers to declare that web browsers should only interact with it using secure HTTPS connections, and never via the insecure HTTP protocol.
– also, when an invalid certificate is encountered, it instructs compliant browsers to replace warnings with errors, disallowing bypass.
– delivered also via HTTP headers (Strict-Transport-Security)

3. OCSP stapling
– There are two standards for certificate revocation (revocation is used when the private key is compromised or no longer needed)
– CRL (Certificate Revocation List) is a large list of revoked certificate serial numbers maintained by the CA. Because of the size, the lookup is slow
– OCSP (Online Certificate Status Protocol) allows browsers to obtain the revocation status of a single certificate.
– the problem with OCSP is that the individual lookup can slow down browsing and can affect the performance of the OCSP responder for high traffic websites
– to address this, OCSP stapling allows each server to embed an OCSP response directly into the TLS initial handshake

In the end, do not forget that the current Web PKI is controlled by 2 actors: Certificate Authorities (interested in profit) and browser vendors (interested in market share).

Neither group has strong security as its top priority, but they are not necessarily to blame—at least not entirely. They won’t give us security until we, the end users, start to demand it from them.

Sunday afternoon reading, from @ivanristic pic.twitter.com/jlD6W86GtZ

— Dorin Moise (@dorinmoise) September 24, 2017

Update 10 October 2017: I have just enabled HSTS here. Inspired by Troy Hunt.