Issue 12 of Web Design Readings (Correction) – The art of alt, flexbox syntax, JavaScript equality and a fun 3D website

Hi friends,

Note: An issue in the last email that causes the links in content not working. This corrected the issue.

This newsletter paused for a month because I have taken a break during the new year.

During the break, I’m working on my next book—2nd edition of HTML5 Games Development by Examples. I’m also building my own writing platform. It is in alpha testing stage and more on that later.

So now I’m back and I write more now by using my writing tool. This week we have articles on the art of alt, flexbox syntax, JavaScript equality and a fun 3D website.

The Art of alt: Writing Great Descriptive Text For Images

http://demosthenes.info/blog/969/The-Art-of-alt-Writing-Great-Descriptive-Text-For-Images

I always teach my students to take very good care on the alt attribute. This post shows how you should write the alt text to make it really useful.

the easiest way to compose alt text is to write as if you’re trying to describe the image to someone.

“Old” Flexbox and “New” Flexbox

http://css-tricks.com/old-flexbox-and-new-flexbox/

I have been using lots of Flexbox styles in my web projects recently. Just in case you are giving Flexbox a try and searching the documentation online, make sure you know that there are many changes since its debut in 2009. So you will meet some websites teaching the old syntax and some using the new syntax.

Also, please make sure you check out the list of Flexbugs by Philip Walton. It lists the issues when working with Flexbox across different browsers.

JavaScript Equality

https://dorey.github.io/JavaScript-Equality-Table/

Are you still using == in the JavaScript comparing condition? I suggest you always use the triple equals ===. It compares the statements with type sensitive. This equality table shows how double equals is not reliable.

I also find the if table in the site is particularly useful.

For example, we used to check if a variable exists and then execute certain code. Imagine now we have a variable with string type, let name it theVariable. We want to execute certain logic if this variable exists. Then we use the if(theVafiable) to check. What happens when theVariable is empty?

In the table, we know that comparing empty string by using if("") will prevent the logic running. So if theVariable exists, but some how it is empty string. Then the logic won’t execute and this becomes a bug.

So please make sure you double check your conditions in your logic and beware to not fall into these kinds of comparing traps.

Having fun with 3D rotation

http://hyper-m.jp/

Hyper-m

This Japanese website shows a fun aspect by allowing user to toggle between 3D and 2D view. Please notice the shadow it creates.

shadow

This website works well in Chrome but is quite buggy in my Safari. However, this is definitely a nice try on having fun with 3D rotation. And this website reminds me the cool 3D menu in Christian Heilmann’s website.

Christian Heilmann’s 3D menu

Truly Thanks and Best Regards,
Thomas Seng Hin Mak