Makzan / I share what I learnt


My current writing stack (Update)

tl;dr I moved back to Ulysses to write and manage my tasks. I have been writing in different editors. I tried the Bear writer recently. It synced to iCloud with CloudKit managing all the content. No file management needed means no messy around in the finder. Before Bear, I also tried to write directly in […]

Read Post / December 15, 2016

Testing post publishing from Ulysses app

I’m testing the Ulysses’s new WordPress publishing ability. There are some things to test, including the categories/tags setting and embedding images as well as video tag. Here is the screenshot of the minimal writing setup on Ulysses that really forces you to focus on the writing itself. It has a library to store all your […]

Read Post / September 8, 2016

My current writing app stack

Here is my current writing process. 1. Note-taking: iA Writer (iOS) + (Desktop) iA Writer has a convenient left/right button in tool bar. I can type my 1st draft of notes in iPhone very fast. Then I use the left/right button to fix typos. At this stage, I don’t care much about grammar and […]

Read Post / February 11, 2016


I read Justin Jackson’s email on his /now page, which was started by Derek Sivers. The page answers one question: “What are you working on now?” So, here is my /now page where I will keep it updated.

Read Post / February 7, 2016

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: Your Life Is Tetris. Stop Playing It Like Chess.

Link: Your Life Is Tetris. Stop Playing It Like Chess. Chess comes with a set of prescriptions and best practices. 1. e4 is considered a strong opening move for white. 1. h3 is not. That’s because chess is a closed system. There’s no random constraints, no dumb luck. The pieces always move the same, and the […]

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

Fetchnotes, and DayOne 2.0

Fetchnotes—as a tool to remember everything—is closing. I create that solves the same problem. DayOne 2.0 is solving the same problem.

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

10 things worth sharing every week

I start a new email newsletter. It is called “10 Things Worth Sharing”. Every week, I hand-pick the essays / posts / tutorials I read and select 10 of them that worth sharing to my friends. The first issue arrives this Friday. Please sign-up to have them delivered to your inbox every week. I promise, […]

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

The future of Parse, has no future

Link: The future of Parse Parse has agreed to be acquired by Facebook. We expect the transaction to close shortly. Rest assured, Parse is not going away. It’s going to get better. For less than 3 years, they already break their words.

Read Post / January 29, 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

Introducing—A logger for everything flash in your mind

Yesterday I built a tool to log my every day’s thoughts down. It is called By using this tool. I can quickly jot down my ideas and thoughts from my mind. I can use #tag for later grouping and organizing. It is still a very early stage tool. But this tool already helps me to gain productivity. […]

Read Post / January 14, 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

A tiny drawing

I’m trying to use Procreate app to draw illustration for my video course. Here is a tiny drawing of little guy using macbook.

Read Post / January 12, 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, 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

Writing in iPad is more focus

I feel more focus when writing in iPad. There are so many distractions when using MacBook to write. I’m getting the section 3 script of my 2nd edition of HTML5 Game Development done.

Read Post / January 11, 2016

Choosing a minimal theme

After trying the Nada theme, iA theme and Voice theme. I find I like the minimalist style more. That’s why I switch to the Ponder theme by Paul Jarvis.

Read Post / January 10, 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

Informative Message on Deletion

This is an informative message when disabling a feature in a Basecamp, which could affect the others. The message clears tell you what is going to happen and how others will interactive with the disabled function.

Read Post / January 6, 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

“Area of Concern”—My reference when creating todo list

When I’m making todo list items, I always go back to the following essay from Ryan Singer to remind me the areas of concern. Link: Managing Product Development by Integrating Around Concerns  The natural approach most people take at this point is to divide the work by role. They create a “design” todo list and a “programming” […]

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

My flow to record video explanation solely on iPhone

I’m doing an experiment to see if I can create some of my video tutorials by using solely iPhone. 1. First, I prepare the slides in ExplainEverything app. It could be hand-drawn video or keynotes. The killer feature of this app is to record my drawings. 2. Then I edit the video in Clips app. The […]

Read Post / January 3, 2016

Testing to make a video teaching clip solely on iPhone

I’m Testing to make a video teaching clip solely on iPhone. git merge in 30 seconds It’s done in ExplainEverything + Clips + Memopad. The raw drawing animation is recorded in ExplainEverything. The Clips app is for editing and recording the voice over. Memopad and other graphics app are for drawing static frames. What’s missing […]

Read Post / January 2, 2016