Category: Web Design

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…

Link: Origami.js—HTML5 Canvas for Humans

Link: Origami.js—HTML5 Canvas for Humans I’m a huge fan of CreateJS. But this Origami.js is really impressive that suitable for lightweight canvas drawing or image…

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: CSS Parallax 3D card flipping effect. (With slow…

Touch Keyboard Types

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

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…

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…

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…

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…

Add margin at the bottom for easier links tapping in mobile safari

When designing web page for mobile device, I always leave some space at the bottom. Especially when there are footer links. That’s because in mobile…

Flexbox website guide

I’m creating an email course. It is a guide to use Flexbox in website layout. It’s free. It’s content is based on Flexbox.website, but I…

Teaching the easing function

I hosted a CSS class tonight, which I talked about how to make those CSS 3D transition effects. Here is the graph explaining the easing function.

Count game example

I’m now working on the 2nd edition of my HTML5 Game Development video course. Here is the game example that I’m working on. The game…

[Failed] Share button blocks the content

When making web page, content is the most important thing that should be easily accessible all the time. But this website fails by putting the…

CreateJS Getting Started Code with Retina Support

The following code snippet is the boilerplate to initial CreateJS library with device’s retina screen support.

On Font-resize component

Recently I’m checking if I should include a font-resizer component in a web site. According to WCAG: WCAG 1.4.4 Resize text: Except for captions and…

Tabs in HTML is not easy

Link: How Tabs Should Work REQUIREMENTS: WHAT MAKES THE PERFECT TAB? All content is navigable and available without JavaScript (crawler-compatible and low JS-compatible). ARIA roles. The…

Link: (Webkit) More Responsive Tapping on iOS

Webkit has disabled click delay on non-scalable web page in its nightly build 2 months ago. And here is an update with mention of the…

Link: Accessible dialog tutorial

Link: Accessible dialog tutorial This is an step-by-step example to make a fully accessible dialog according to WAI-ARIA 1.0 Authoring Practices, by using the Ally.js…

Link: The web accessibility basics

Link: The web accessibility basics And while I always thought that it is not so difficult to find resources about these basics, the recurrence of…

“Force enable zoom” in Opera 34 for Android

Link: “Force enable zoom” in Opera 34 for Android Did you know that 61% of mobile sites don’t allow you to zoom? We’ve fixed that…

Opera Mini and it’s data saving

Link: https://www.designernews.co/comments/193811 So basically, feature support is important. But for those in countries that don’t have unlimited (or essentially unlimited) internet access, Opera Mini’s data…

Link: Text To HTML Menu/List

Link: Text To HTML Menu/List Useful utility.

CSS Toggle Switch

Link: CSS Toggle Switch The beauty of this CSS toggle switch is that it is accessible when JS/CSS is not available. The following is the…

Link: How to animate “box-shadow” with silky smooth performance

Link: How to animate “box-shadow” with silky smooth performance Box-shadow transition Takeaway note: Use :after to apply the box shadow. Transition opacity of :after element instead of box-shadow.

What we can do today

In the post Engaging users with web, we see how we can use web technologies to build interaction with users. Link: WhatWeCanDo.today This website let…

Engaging users with web

Link: Native or Not? The Untapped Power of Web Apps This essay lists what we can do on web, which is more powerful than you may…

From Adobe Flash to Animate

Link: Welcome Adobe Animate CC, a new era for Flash Professional To more accurately represent its position as the premier animation tool for the web and…

Link: Froggy, a game to learn CSS Flexbox

Link: Learning CSS Layout with Flexbox Froggy The goal of the game is to help the frogs get to their lilypads by writing CSS code. See…

Material Design is for Google only

The way people talk about Material Design makes it feel as through it’s a new discovery in design. There are interesting principles in there, but…

ReactJS Examples

I’m writing some ReactJS examples to demonstrate how we use React as the view rendering library. It also shows how we do data-view separation. You…

Rails from request to response

I need to draw a chart to explain the flow from a client’s browser sending a request to Rails server. Then Router dispatches the request…

Tween.js examples

I’m recently trying to use the TweenJS library with DOM elements. Here is my first attempt. Here is the core part of the source code. I didn’t…

One third of FWA Site of the Day winners uses CreateJS

According to the HTML5Ads documents by CreateJS. CreateJS is robust and mature. The suite was created and is maintained by a highly experienced team of interactive developers and…

Move from CoffeeScript to ES6, the beginning

I’m working on a book that shows how we can integrate canvas into our daily web design and application. I converted that book into AsciiDocrecently. Now I’m making…

Blend—Generate simple and beautiful CSS3 gradients

Link: http://colinkeany.com/blend/ Useful tool to create CSS3 gradients, by @colinkeany. It works in mobile too.

Webkit disables click delay on non-scalable web page

Link: https://trac.webkit.org/changeset/191072 When a viewport is unscalable (specified through the meta viewport tag) we do not add a delay to our single tap gesture recognizer. When…

Practical CreateJS

I wrote a half-done book, Practical CreateJS, in early 2015. I’m exploring a new approach to write my book in AsciiDoc. I restart the writing process of…

Corpus—A collection of CSS

Link: Corpus—A collection of CSS Useful CSS resource. Bookmark here.

ECMAScript 6 Cheatsheet

Link: ECMAScript 6 Cheatsheet Useful cheatsheet. Bookmark here.

The problem of AMP HTML

Link: Get AMP’d: Here’s what publishers need to know about Google’s new plan to speed up your website Now, AMP essentially asks you to build a…

Cron build makzan.net (revised)

When I setup this blog with periodically building and deploying, I used a local cron. Now I changed to use WebTask and CodeShip to automatically generate the static site and…

Props in getInitialState Is an Anti-Pattern

Link: Props in getInitialState Is an Anti-Pattern This isn’t really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React…

keyup event and Chinese input in mobile Safari

A student of mine asked me this question when he is making an input text filtering with Chinese content. The user needs to input some…

CSS Pattern with Repeating Linear Gradient

Link: Why Do We Have repeating-linear-gradient Anyway? I like the idea of using repeating-linear-gradient to generate pattern. They look cool! background: linear-gradient(135deg, #000 .25em, #0092b7 0); background-size: .75em/sqrt(2) .75em/sqrt(2);

3D Touch Force value in mobile Safari with touchEvent.force

Link: 3d-touch/3dtouch.js By using touchEvent.force, we can get the force of the touch in 3D Touch screen. Obviously it only works in the iPhone 6s and 6s…

Accepting Custom Domain in Rails

Link: Adding Support for Custom Domains in Rails There are three main steps necessary for adding custom domain support to your Rails project: Have your users…

Foundation 6 and CSS Preprocessor

Link: Foundation 6: Leaner, Meaner and Cleaner Sass Yep, let’s start with the bottom line: when writing Sass, remember that you’re always one step removed from…

Exploring Rails-React

I’m going to explore the Rails-React way to create my next web app. You may call me traditional, but I still don’t think pure client-side frameworkis a good…

Link Indicator

Link: Browser Link Indicator I was wondering why there are no indicators in our browsers, letting us know if a link is internal or external. Same…

Dealing with long words in CSS

Link: Dealing with long words in CSS Final solution This solution will show hyphens for every browser supporting it and will break lines in every other…

The web as at 2006

I came across this Flash website which was made in 2006. I miss those days with stunning websites. Link: Archive of Nike Air site In case…

Pattern for Discussion Thread

Link: How to display threaded discussions on the web A nice discussion on the pattern of discussion thread.

Stop breaking the web

Link: Stop breaking the web Do use a framework, but look into frameworks that are progressive-enhancement-friendly

Tricks for Chrome Developer Tool

Link: How to use Chrome DevTools like a Pro I find the $0 reference in console useful: Get the current element with “$0”

Pending blog post for future in Middleman

By using the middleman-blog gem, the middleman build command won’t build posts that’s in the future timestamp. By using the periodically deploy script. I can now set a pending post…

Configure files to copy without middleman building process

While building the new makzan.net on top of middleman site generator. I faced an issue that for certain files, I don’t want middleman to process it during…

Periodically deploying Middleman static site

The new makzan.net is built on top of Middleman static site generator. Then I deploy the site as a Github pages. I use middleman-deploy gem to setup the Github pages deployment,…

Put script after content

By default, we should put the script tag after our content. It usually means putting them just before the closing of the body tag. The…

Start using flexbox today

We can start using flexbox nowadays. If you have not started exploring this new layout feature, the “Using flexbox today” is a quick-start guide. Flexbox…

Lazy Design

I don’t know why every one is putting a large banner at the top of their web pages. I always think web site should present…

Gray highlight and active state in mobile Safari

Link: CSS-Tricks: Remove Gray Highlight When Tapping Links in Mobile Safari This is a simple tricks but very useful if you’re trying to make a button…

CSS Quantity Selector

The Quantity Queries for CSS essay from A List Apart shows how we can use current CSS selectors to perform quantity queries. By using the techniques in…

Animation should be invisible to user

Good animation is invisible. You shouldn’t notice that you’re looking at animation. — Pasquale D’Silva https://medium.com/@stevenfabre/invisible-animation-ffa27d0b77e5 Can’t agree more on this. Animation should never distract…

Mozilla Easter Egg

This is not the first time I saw a hiring message hidden in the console. But this mozilla one is attractive with ascii art and…

Demo of Object Fit

http://codepen.io/makzan/full/pvKeOb I created a demo on the new CSS object-fit property. It’s like background-size cover or contain. But object-fit works on the media instead of the background. The demo works…

.htaccess resources

https://github.com/phanan/htaccess This .htaccess snippets list is a great resource. I never write my own .htaccess from scratch. I always start from a template. And this…

Twitter’s fav icon with CSS step function

Twitter’s new fav icon animation uses static image and the sprite sheet technique. This is the technique we use a lot in game design. The CSSAnimation.rocks shows…

Basecamp’s 404 page

This is a nicely crafted 404 file not found page. The page encourages their reader to report on links error so they can correct it.…

60 fps on mobile web with canvas

The flipboard team takes the canvas approach to render their content in order to archive the 60fps drag and scroll. They even built a tool–React-Canvas–to paint…

Learning grid system of Foundation for App

Foundation for App is out. This is a quick note on learning the grid system which is based on the FlexBox.  

CSS is 20 years old

CSS is 20 years old today. From Cascading HTML style sheets – a proposal – W3.org: This document proposes a style sheet scheme for HTML documents. The proposed scheme provides…

CSS rules priority

Types of selector has the following priority order. !important > inline style=”” > ID > class > DOM Element When two selectors are in the…

Responsive Philosophy

“Web experiences should respond to multiple contexts so that they’re meaningful to every reader, in every moment, on every device.” From The next big thing in…

The CSS 3D book effect

Recently Amazon updates the book cover into a 3D book in some their paperback web page. In my web design course, I showed how to use the…