Makzan / I share what I learnt


An experiment on writing in iA Writer and sync to Working Copy

This is an experiment on using the Markdown Block in Working Copy with iA Writer. Working Copy supports Markdown Block as well While I can preview a single markdown file in Work Copy previously, the latest Working Copy updates include the support of Markdown content block. Although it is not like iA writer that supports […]

Read Post / May 28, 2019

Using DocRaptor to generate PDF

This is the first post on my journal of using DocRaptor to generate PDF. I will keep posting how I use the PDF generator for my course materials. I write online courses on and would like to generate PDF book from my teaching materials. Previously, I had been using LeanPub to generate the PDFs. I also try generating […]

Read Post / May 18, 2019

iOS Shortcut: Convert PDF to Image

This is a simple shortcut that convert PDF into images. I often need to save PDF into image into other image-only application such as Day One journal. These PDFs may be a document scan, a screenshot of website via “Create PDF” from Safari. This is my go-to shortcut for these purposes.

Read Post / April 29, 2019

Trying PreText

From the latest MacStories newsletter, I learnt a new app called PreText. It is as if the TextEdit app all from macOS migrated into iOS. It does only one thing, text editing with files provider, and that is all we need sometimes. Although this app is not a replacement to my current writing workflow, it […]

Read Post / April 20, 2019

Setting header and footer for DocRaptor and PrinceXML PDF generation

I’m setting the header and footer content while using the DocRaptor and PrinceXML engine. Nothing appears on the header and footer until I give the page some margin. That is my lesson learnt. Originally I configure the @page margin to be 0 and use only page padding. This works until I need to place the […]

Read Post / April 20, 2019

Migrating from Ruby on Rails to static hosting

I often need to have a quick QR code generation from URLs. Really quick. For example, when I am teaching mobile web class, I demonstrate the code and put the QR code up on screen for students to scan into their mobile phones for testing. That’s why I had written a tiny tool named […]

Read Post / April 5, 2019

“Capture and share” shortcut

In this “Shortcut” category, I share useful shortcut that I found or created. In my daily workflow, I often need to quickly capture my thoughts and file them into my daily system. I have three shortcuts for this purpose. The first one is the “Dictate and Share” shortcut. The second one is Draw and Share […]

Read Post / January 10, 2019

The usage of Gladys app for iOS devices continue working

Gladys is a clipboard management app that syncs to iCloud. It works on both iOS and macOS. Gladys as a temporary storage Gladys is like a temporary folder for me to store multiple things and use in other places. It is a swap storage. For example, I may collect multiple images from internet into Gladys […]

Read Post / December 31, 2018

What is an HTML ebook reader?

A thought on what an HTML ebook reader might be. It converts input of HTML content into a series of reading experience. The input is a group of HTML files, or a group of content in <sections> in a single page HTML file. The reader should be: Offline readable Offline downloadable Mobile and desktop friendly […]

Read Post / September 26, 2018

Productivity apps that I use every day

Every day I use several apps and workflows to empower my work. Bear app is the master of everything. I store all notes and project files there. I organize all notes into nested tags, e.g. `#worldskills/2019/competition-week`, `#inspirations/typography`. A note can belong to different tags. This is a many-to-many structure alongside the 1-to-many structure between nested tags. This […]

Read Post / June 3, 2018

Newsletter #47 Published Here is a excerpt: Why I write newsletter—It’s an archive of myself This newsletter does not have much audiences, To be honest. Despite that my writing may not actually be read, I still want to keep my writing steak every week. To me, this is like an archive of myself. I take this opportunity […]

Read Post / May 13, 2018

Getting Real book is my model of book

The Getting Real book from Basecamp is my model format of a book. The format of Getting Real has a clean structure. Different topic forms a chapter. Different individual post are grouped into topic. In each post, there are 3 parts under the title. They are: 1. One bold line of sentence to conclude the […]

Read Post / May 11, 2018

Fake productivity

It’s so easy with the kinds of tools we now have to get the feeling of productivity, the sensation of productivity, without having to actually accomplish anything of merit or anything that we might actually find meaningful at the end of the day. — Jocelyn K. Glei, Offscreen 19 interview.

Read Post / May 10, 2018

Features that new 53 Paper app breaks in version 4

There are some features that used to be good in FiftyThree Paper app but is now removed or broken. 1. 3D Touch app icon to quick new canvas/text/camera. I believe this is a bug FiftyThree team forgot to take care during the latest 4.0 updates. 2. View next and previous page in a journal in […]

Read Post / February 24, 2018

Writing experience in Paper app is surprisingly great

The FiftyThree Paper app is always advertised as a drawing app. But their text writing experience is indeed very impressive. The left/right swipe to change text format is unique and well suitable for mobile typing. The typography is a little bit like typewriter but still good for reading. The ability to drag a text note […]

Read Post / February 23, 2018

Today I Learned

Added the Today-I-Learned category. This is for sharing what I learned every day. It is inspired from the #til from Michael Rose.

Read Post / February 23, 2018

Coding Rails app with iPad and Cloud9

Almost there. I used iPad Pro with Smart Keyboard yesterday to scaffold a rails application with cloud9 web IDE. Almost there to make C9 fully works in iPad. Just come minor issues. What works: Editor, except arrow keys and text selection. Terminal, for all git, heroku and Files operations. Navigation panel, for opening files without […]

Read Post / October 7, 2017

Things to know to get started HTML5 game with socket

We want to build an HTML5/JS game that connect players with socket. Here is what we need to get started: 1. Web socket or library 2. HTML5 based game scene (a playground for interaction) 3. Showing other players into your game scene. Let’s get into them. 1. Socket library If we are getting started […]

Read Post / October 5, 2017

A rear fingerprint sensor may trigger accidental purchases.

A rear fingerprint sensor on phone may trigger accidental purchases. When we hold the phone, we may rest our index finger on the rear fingerprint sensor. In such case, whenever the UI prompts for confirmation of purchase via fingerprint, the confirmation is instantly finished even without user aware of that, due to the always there […]

Read Post / July 12, 2017

The similarity of Medium and YouTube

I don’t like putting business videos on YouTube. Especially the videos that I need to embed in my website. That’s because of the non-controllable video suggestions at the end of the video playback. It may distract and redirect the reader from my site to the next funny videos. The same applies to Medium. In Medium, […]

Read Post / July 11, 2017

Working on iPad is more focus

Using iPad is more focus than using macOS, thanks to the nature of app-based environment vs. window-based environment. Moreover, Mac has so many background processes that are running and thus sometimes make the main application not fast response enough, even with an i7 core.  For iPad, especially iPad Pro, the iOS is so fine-tuned that […]

Read Post / July 11, 2017

My thought on Freewrite

View this post on Instagram Hello Freewrite. A post shared by Thomas Mak (@makzan) on Feb 8, 2017 at 10:35pm PST It does not become my writing tool. It becomes my thought dump. That’s like a meditation via typing on mechanical keyboard. It is the pleasure and joyful of typing what’s in my mind currently. […]

Read Post / May 6, 2017

Don’t rely on a single service

Do not rely on a software company, any software company, to provide you with a servoce for any length of time – especially one that is free. Investiscope wasnt free, but it should have been if it is suddenly shutting down. Obvisouly, the business mode didnt work. I encourage everyone to control their own data, […]

Read Post / April 12, 2017

2017 software for my productivity day

Software that supports my productivity day: Google Keep to save all my fragmented ideas and inputs. Dropbox to store files based on life roles and years. Basecamp to work together with contractors. JunkDraft to write my books and documents into a 1st draft. Jourla to store my diary and family moments. to post my […]

Read Post / April 8, 2017

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

I’m using Basecamp for almost everything

I really stick to Basecamp 3. I’m now using it for almost everything, including coding projects, design projects, promotionals, book writings, daily office works, inspirations library and my life management.

Read Post / December 30, 2015

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

Refactor Until You Feel Almost Comfortable

Link: Refactor Until You Feel Almost Comfortable How do you know when you’ve refactored enough and when you’ve refactored too much? I asked Sandi Metz about this once; here is a paraphrase of her answer: “Refactor until you feel you are one step behind the solution you want. Avoid your comfort zone. And while you might see extractions […]

Read Post / December 27, 2015

Link: Japanese bookshop stocks only one book at a time

Link: Japanese bookshop stocks only one book at a time “This bookstore that sells only one book could also be described as ‘a bookstore that organises an exhibition derived from a single book’. For instance, when selling a book on flowers, in the store could be exhibited a flower that actually appears in the book. Also, […]

Read Post / December 26, 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

The process of building native app vs web app

This is the graph that I use when comparing building app with web technology (HTML5) or native IDE (Xcode + Swift or Android Studio + Java). Using the pure web technology to build app is fast. But it could take huge amount of time to make it polish and fix every little detail to make […]

Read Post / December 24, 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: 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

Trying Voice theme

I moved the site to WordPress to try several themes, mainly iA and NADA theme. I thought I would be happy with those minimal themes. But I figured out my site needs a theme that supports better category browsing. My essays have a wide range of categories that’s not a linear reading experience. That’s why […]

Read Post / December 16, 2015

Floating action button and the distraction

Link: Material Design: Why the Floating Action Button is bad UX design The search FAB thus distracts the user from an immersive photo-browsing experience. By taking up real estate on the screen, the FAB effectively blocks content. User dumazy posted on Graphic Design Stack Exchange about a problem he encountered when the FAB blocked the “favourite” star as well as […]

Read Post / December 16, 2015

Customizing screen on app switcher

We want to customizing app screen on app switcher in the following situations. Hide sensitive information on app switcher Enhance what user see on app switcher Create a view controller that shows a customized screen. During applicationDidEnterBackground, we presentViewController, without any animation. During applicationWillEnterForeground, we dismissViewControsser, without any animation.

Read Post / December 16, 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

A short book that demonstrates building website layout with CSS Flexbox.

Read Post / December 15, 2015

HTML5 Game Development HOTSHOT

HTML5 Game Development HOTSHOT is a book that lets you build interactive games with HTML, DOM, and the CreateJS game library. Published by Packt Publishing.

Read Post / December 15, 2015

IBM Swift Sandbox

Link: Introducing the IBM Swift Sandbox The IBM Swift Sandbox is an interactive website that lets you write Swift code and execute it in a server environment – on top of Linux! Each sandbox runs on IBM Cloud in a Docker container. In addition, both the latest versions of Swift and its standard library are available […]

Read Post / December 8, 2015

Old Web Today

Link: I miss those day I was using netscape to learn web design.

Read Post / December 4, 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: This website let you check how your browser supports the latest web technologies.

Read Post / December 3, 2015