Makzan / I share what I learnt

Web Technologies

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

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 manipulating.

Read Post / February 4, 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

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 Safari, tapping on the very bottom of the screen will toggle the toolbar, which hides when you scroll down the page. And so when user wants to tap on a […]

Read Post / January 12, 2016

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 will have bonus/update content in the email course. p.s. This is my first try of hosting email course on ConvertKit. Don’t know if it fits my usage eventually. But I’ll […]

Read Post / January 11, 2016

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.

Read Post / January 8, 2016

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 is not finished yet. And I haven’t polish the graphics and animation.

Read Post / January 5, 2016

[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 share button on the left. In the smaller screen, it put the share button fixed at the bottom of the screen. But in wider screen, like the screenshot, it put […]

Read Post / January 3, 2016

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 images of text, text can be resized without assistive technology up to 200 percent without loss of content or functionality. (Level AA) But we can conform to the guide with […]

Read Post / December 29, 2015

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 tabs are anchor links that: are clickable have block layout have their href pointing to the id of the panel element use the correct cursor (i.e. cursor: pointer). Since tabs are clickable, the user can open […]

Read Post / December 25, 2015

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 touch-action CSS property. Link: (Webkit) More Responsive Tapping on iOS Putting touch-action: manipulation; on a clickable element makes WebKit consider touches that begin on the element only for the purposes of […]

Read Post / December 23, 2015

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 library. ally.js is a JavaScript library simplifying certain accessibility features, functions and behaviors.

Read Post / December 23, 2015

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 that question prompted me to finally write my own take on this topic. So here it is, my list of absolute web accessibility basics every web developer should know about. […]

Read Post / December 23, 2015

“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 for you in Opera for Android 34, which we’ve released today. I always teach my web design students to allow scaling in mobile web. If you are making a web page, […]

Read Post / December 23, 2015

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 saver features are incredibly useful. It seems that people are using Opera Mini mainly because of the data saving. I’m in 1GB plan and every month I run out of […]

Read Post / December 23, 2015

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 HTML it uses. Which works when in HTML-only environment. I also demonstrated a customized checkbox.

Read Post / December 15, 2015

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 you check how your browser supports the latest web technologies.

Read Post / December 3, 2015

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 expect. Of course the web has its limitation, but the web has its benefits too: Perhaps the biggest advantage the web has over native apps is how quickly users are […]

Read Post / December 2, 2015

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 beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. In the past, the web had many characteristics and personality. But it also came […]

Read Post / December 2, 2015

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 if you can beat all the levels! A nice game to learn Flexbox: http://flexboxfroggy.com

Read Post / December 1, 2015

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 I don’t see why another company would want to adopt Google’s design guidelines. Outside of Google I don’t think it’s a huge thing, and I don’t really think about it […]

Read Post / November 12, 2015

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 can find the examples in the following CodePen collection: http://codepen.io/collection/XwaeGM/

Read Post / November 11, 2015

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 to Controller. Controller grab data it needs from Model. Finally Rails uses the ERB engine to put together the HTML and data to create an HTML file, which sends back […]

Read Post / November 10, 2015

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 use the CSS plugin from TweenJS. Instead, I interpolate the values in the data object and use a dedicated view rendering function to render the changes. I find it cleaner and fit […]

Read Post / November 6, 2015

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 designers, who have been building rich content for over 15 years using Flash and HTML5. It is over 5 years old, has grown through 8 major releases, and has been […]

Read Post / November 5, 2015

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 another chanegs to the code example. I start converting the source code from CoffeeScript into ES6. You can find the progress of converting my example code in my CodePen collection. By […]

Read Post / October 20, 2015

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 we set the viewport to unscalable, which means we want that web page acts like an app. So we shouldn’t make our web page unscalable just for the sake to […]

Read Post / October 15, 2015

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 the Practical CreateJS book and used a weekend to convert the book from Markua into AsciiDoc. I open source the book source and you can read the book online in the following URL: http://practicalcreatejs.com […]

Read Post / October 14, 2015

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 parallel-universe version of your site that strips out not just anything that’s slow, but anything that might be slow. AMP tries to do something maybe even more significant: change the […]

Read Post / October 12, 2015

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 deploy on Surge. I changed the hosting service from Github pages to Surge.sh. Then I followed the Integrating with Codeship tutorial to setup the deployment. I made changes to make it build the middleman site as […]

Read Post / October 3, 2015

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 simply points them out more clearly. Good tips on initializing values in constructor. There are difference between initialCount and count.

Read Post / October 3, 2015

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 text to filter the content. Here is his original code: $(‘#search’).bind(‘keyup’, function(){…}) In Chinese input, we often compose one block character by composing strokes. When typing Chinese text in <input>, this […]

Read Post / October 2, 2015

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);

Read Post / October 1, 2015

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 add a CNAME record pointing their domain to yours Update your routes to handle any custom domains. Add the controller logic to find resources using the custom domain For this […]

Read Post / September 28, 2015

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 your CSS output. In general, we shouldn’t be producing crazy CSS that we would never write without Sass. A good reminder on what we should becareful when using CSS preprocessor. […]

Read Post / September 28, 2015

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 idea. I’m going to use the server to pre-render the React result to the client. When user interacts on the web app. If the client is capable to run ReactJS […]

Read Post / September 27, 2015

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 thought. That’s why we, web designer, should at least code our own external link indicator.

Read Post / September 27, 2015

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 browser – perfect. This is a useful technique when you need to deal with long words in your web design. For example, when you need to reference a long city name.

Read Post / September 25, 2015

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 you don’t have the Flash player, I captured the screen into the following video: Nike Air 2006 Flash Website.

Read Post / September 25, 2015

Stop breaking the web

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

Read Post / September 24, 2015

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 in my middleman source by setting a future date. I can preview the future post locally with middleman server. When everything is set, I just wait for the automatically deployment to […]

Read Post / September 22, 2015

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 the build process. For example, I want to copy the README.md without middleman compiling it into HTML file. I also need to copy my HTML5 games, tweet archive and some other stuff without going through […]

Read Post / September 19, 2015

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, which I follow their default setting: 1 2 3 4 activate :deploy do |deploy| deploy.build_before = true deploy.method = :git end I use Cloud9 for development and run the following cron job […]

Read Post / September 19, 2015

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 reason is that browser stops loading when it encounters a script tag. If we put the script after content, we let all the content loads and displays before we pause […]

Read Post / April 17, 2015

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 is not just a replacement of the float. Flexbox can actually solve the layout problems that we face by using the current CSS technologies. The website “Solved by Flexbox” shows how […]

Read Post / April 17, 2015

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 the important content at the top of the page, instead of a not-too-meaningful, actually often meaningless, large image, or video. As “Dear web designer, let’s stop breaking the affordance of […]

Read Post / April 16, 2015

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 in HTML looks like a real button in touch devices.Remove the tap highlight: and make the :active state works when user touches that element:

Read Post / March 18, 2015

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 the essay, we can apply styles when the element count matches specific number, or when the element count is greater or smaller than the specific number. I created a demonstration on how […]

Read Post / March 12, 2015

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 the user. User should not notice any transition. Having an interface transition too short then user will surprise on the sudden change. Having it too long then user will notice […]

Read Post / March 2, 2015

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 nice description and even an opt-out command.

Read Post / February 28, 2015

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 in Safari, Chrome, Firefox and mobile Safari, mobile Chrome.

Read Post / February 27, 2015

.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 resource provides everything I need for my .htaccess setup.

Read Post / February 25, 2015

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 how we can archive the Twitter’s fav sprite sheet animation with CSS-only steps function. Back in 2012, Simurai has demonstrated the same effect, which I have used in my classes and books. It’s […]

Read Post / February 15, 2015

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. There are also reference links on what Basecamp does below the error messages. So the reader get lost, and the team try to save this reader, they also try to […]

Read Post / February 13, 2015

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 React rendered DOM into canvas. The result is fast and smooth, but I question if we worth to trade the accessibility with the performance. Especially its performance for visual effect, […]

Read Post / February 11, 2015

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 a simple mapping between HTML elements and presentation hints. Properties like font family and window size can be suggested by the style sheet… The proposal used wording like ‘hints’ and ‘suggest’ to describe CSS. […]

Read Post / October 10, 2014

CSS rules priority

Types of selector has the following priority order. !important > inline style=”” > ID > class > DOM Element When two selectors are in the same types, the count determines the orders. Demo:

Read Post / October 10, 2014

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 responsive design. Makzan.net should respond not only to the screen size, but also respond to the readers. For example, it may show “Welcome back” for returning readers. It may store […]

Read Post / October 1, 2014

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 CSS transform and transition to make a 3D rotation box and greeting card flipping effect. The 3D rotation box effect: The greeting card flipping effect: By combining these two effects with a simple flip […]

Read Post / October 10, 2013