Makzan / I share what I learnt

Web Technologies

On handling breaking changes in React

React is very careful for their updates and how things should work. Then the React team introduces new features, they will introduce it in advance and if changes contain breaking API change, they will rename deprecated methods and only remove it after enough preparation time from the community. Take the componentWillMount method as example. It […]

Read Post / January 18, 2020

Link: Short note on improving usability of scrollable regions

Link: Short note on improving usability of scrollable regions Making a [overflow:scroll] scrollable region operable for keyboard users is pretty simple. Add tabindex=”0″. The region will now be included in the focus order and when focused the keyboard user can scroll through the content. Nice tips on making overflow-scroll elements scrollable by keyboard.

Read Post / February 6, 2016

Parallax CSS 3D rotate Effects

I just created 2 demos of CSS 3D hovering effects—Parallax flipping and Pop-up highlight. Parallax flipping: Video Preview: View this post on Instagram CSS Parallax 3D card flipping effect. (With slow motion) A post shared by MakClass (@makclass) on Feb 2, 2016 at 8:36am PST Pop-up Highlight: Video Preview: View this post on Instagram CSS hover […]

Read Post / February 3, 2016

Touch Keyboard Types

Link: Touch Keyboard Types Nice cheat-sheet for mobile input types. The examples are the highlights of the page.

Read Post / February 1, 2016

Blocking content on mouse hover

I don’t understand why prefer such hover effect. When you hover, the content is blocked by the title. But when you hover something, usually it means you’re interested in something, and now the illustration I’m interested is covered by a solid color block. ????

Read Post / January 19, 2016

Is jQuery dead?

When I discuss with web designers on what tech they use these days, people usually talk about Angular, React, Flux, GraphQL, Ember, Meteor… the list goes on. But I didn’t hear people talk about jQuery. When you learn those frameworks/libraries, you usually search the equivalent way on how to achieve something in that framework without […]

Read Post / January 16, 2016

Styling focus element outline

Just realize that z-index only works on non-static element. May be I knew it before but didn’t really make it a knowledge. When using tab to focus between links, we can use outline to style the focus outline and make it clearer. But element next to the focused link can block the outline. The key point […]

Read Post / January 15, 2016

The CSS first-letter not working for inline

When I am making the first letter of my latest post into lowercase, I realise that CSS’ ::first-letter selector doesn’t work for inline element. The spec said it supports block element. I tried to use inline-block and success. See the highlighted “a” in the following screenshot.  

Read Post / January 13, 2016