Archives | Makzan

2021 • 2020 • 2019 • 2018 • 2017 • 2016 • 2015 • 2014 • 2013 • 2012 • 2009

2021 (5)

August 11th - Craft.do is almost perfect
Craft.do is almost perfect as a digital notebook. The only concern is what makes Craft so responsive fast. and what makes the slow editing process in Basecamp shines. That is the instant editing feature. I have …
May 22nd - Creating Irregular Circle in CSS
Transcript Hey there, this is Thomas from Macao. In this video, I would like to talk about creating irregular circles by using CSS border-radius. There are 4 corners for the border-radius, they are top left, …
April 30th - Git: Querying commits by date range in 1 minute
Hey there, this is Thomas from Macao. In my last video, I have shown the basic usage of the git reference log. If we remember the commit was at a specific time, say one week …
April 28th - Git Reference Logs in 1 minute
The git reference logs command allows us to refer to where the branch was pointing to. That enables us to rescue the commits that are already missing in the git log because no any branches …
April 27th - ReactJS Functional Component Syntax in 1 minute
Learn how to use const, object extraction, and single-line function to write a basic functional component in ReactJS. Part of the 1-minute Web Technologies video series. Hey there, this is Thomas from Macao.In this video, …

2020 (21)

July 1st - My productivity tools in the first half of 2020
We are now 50% of 2020. Let me review my productivity tools in the first half of 2020. I discovered Roam Research in February. Then I learned the power of bi-directional linking. And I implemented it into …
June 18th - My recent software stack
Last post, I shared the services and tools that I used in my digital life. Here is my recent software stack as well: My recent used software: HEY for email, all emails forwarded in. Milanote as thinking space. …
June 12th - Makzan’s digital life
Here is my digital life in 2020, on productivity, on writing, on teaching, on drawing, on reading, and on learning. On Productivity I built a productivity system to support my daily work. MZHub All my …
June 10th - iOS Shortcut: Bulk resizing photos
I often take screenshots when watching course video. Those screenshots are usually very sharp and large. That’s oversized as reference purpose. So I need to bulk resizing them into smaller size for storage. The following …
May 28th - Capturing 404 URL by using Netlify function and Airtable
Yesterday I migrated makzan.net from WordPress to static site that’s powered by Eleventy and Netlify. The function I missed first is the 404 capturing. I solve this by using Netlify function and Airtable. The Airtable base contains only two columns: …
May 27th - Migrating makzan.net from WordPress to Eleventy and Netlify
Today I migrated makzan.net from WordPress to static site by using Eleventy and hosting on Netlify. Setting up the blog structure The starter 11ty blog repository provides a good starting point. I copy the existing WordPress theme into 11ty layout. I copy …
May 20th - Quick Sketch: My Workspace
May 3rd - How I minimize phone distraction: grayscale display
This is a repost from my newsletter Makzan’s Dispatch 2020 week 16 and 17. I apply these strategies to minimize my mobile phone distraction: Turning display into grayscale Minimal apps on home screen. Turning off …
April 27th - TIL: git checkout is now two commands: git switch and git restore
https://stackoverflow.com/a/57266005/1382695 Today I learned: I had been using git checkout for both switching branch, creating branch, restoring files since 2009. I often thought that should be two commands for two purposes. So here they are: switch and restore.
March 25th - On using mouse or trackpad in iPadOS 13.4
iPadOS 13 from last September comes with the mouse pointer in the accessibility setting. In iOS 13.4, this ability is enhanced a lot. Upgrade from previous iPadOS If you have been using mouse or trackpad …
March 22nd - Two Focus sessions per day.
10 years ago when I was starting my game development company, I used the Pomodoro technique®. The key point there is to boost for 25 minutes of focus work and then break for 5 minutes. …
March 16th - My tools for remote work
There are different tools for remote works. Many may use Slack. Some may use Telegram, WhatsApp or even WeChat. But to me, any tools that are not threaded nor allow non-instant responses are not optimal …
March 5th - Productivity Work = Attention x Energy x Times
It is the attention that drives our daily life. The attention drives the flow of energy on our our limited time. Work done = Energy x Time Work done ≠ Productivity Work done Work done …
March 1st - CSS Drawing: Mobile Phone
February 8th - My digital organizing system
We encounter many inputs every day. There are different links from our favorite websites. There are different development snippets. There are working instructions. Tons of inputs every day. These data inputs needs to be organized …
February 5th - Writing is different than note-taking than writing course materials
Currently, I put notes in my hub system. I write in iA writer that syncs to Github via Working Copy. I write course materials on books.makzan.net that uses WordPress. Note taking in my own hub …
January 31st - Block-grid layout with CSS Grid
The minimal(200px, 1fr) means every grid column has minimal 200px width. If there are more spaces, they all have equal width because of the 1fr fraction setting. The repeat and auto-fill means repeating the column …
January 29th - My notebook choices
I write a lot with my pens. As an IT guy and programmer who built my own digital collection system, I still believe in analog writing. The writing process is a reflection to myself every …
January 18th - 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 …
January 18th - CSS Flexbox Layout Foundation
Here is the code base for Flexbox layout. It is mobile first and important content first.
January 12th - My Mac’s setup
Recently I updated my 2016 Macbook Pro 13″ to the new Macbook Pro 16″. Here are the system setup for my Macbooks. System preferences For appearance, I use blue color with yellow highlights. For web …

2019 (22)

December 31st - My 2010s Review
A conclusion of my last 10 years. This is the last month of the decade. Let me take some time to round up my last 10 years. Here are the highlights. Began my book writing …
October 25th - I write in Basecamp
Recently, I write in Basecamp. It helps me to focus on the single piece of document. Basecamp is project management tool that encourages context based communication for teams. I have been using Basecamp solo and …
May 28th - 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 …
May 18th - 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 MakClass.com and would like …
May 1st - Makzan’s Weekly 2019w17: iOS Automation
Link: https://mailchi.mp/makzan/2019w17 The shortcuts app and Pythonista app allows us to create many different kinds of automation in mobile devices that fit our own needs. For example, a simple python script to download file into iCloud Drive. A simple PDF …
April 29th - 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 …
April 29th - A simple Python script to download file in iOS
from urllib.request import urlretrieve  url = input('URL: ') filename = url.split('/')[-1] urlretrieve(url, filename) print("Downloaded file: {}".format(filename))
April 20th - 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, …
April 20th - 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 …
April 5th - Migrating inQRCode.com 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 …
April 2nd - Why I keep switching editor when iA writer + Working Copy fulfill my writing needs?
I have been switching between iA writer, Ulysses, Bear, Scrivener, Ulysses, Bear, Drafts and so on. Switching between them back and forth to seek the best writing workflow that works for me. What setup I …
March 31st - I draft in Drafts, take notes in Bear and write long form in Ulysses
People often compare Bear and Ulysses. I too. I keep trying which one shall I use to write my books and store my daily thoughts and ideas. I also compare them with Drafts to see …
March 17th - Makzan’s Weekly Dispatch 2019w9,10,11: Writing books for web technologies
Hi there, It has been 3 weeks since my last newsletter. I had been teaching new courses and preparing the course material really take me so much time. Currently I’m teaching an iOS development and mobile …
February 26th - Makzan’s Weekly Dispatch 2019w8: Meaningful Jobs
Hi there, In last week, I finally moved into my new apartment and began our new life there with my wife and 2 sons. It also means I need to have better budget system to …
February 20th - Makzan’s Weekly Dispatch 2019w7: Moving into new apartment
Hi there, In last week, I was busy moving things into my new apartment. It was scheduled to move in living there lats week but we need some move construction work so it delays to …
February 16th - Makzan’s Weekly Dispatch 2019w6: Writing books in Notion
Hi there, I celebrated the Chinese New Year with family this week. Taking my leave time to pack things to move to my new apartment. And take the chance to make a stand for the …
February 15th - Makzan’s Weekly Dispatch 2019w5: Dual Tablets setup: Surface Go and iPad Pro productivity
Hi there, This week I’m exploring a dual tablets setup, with my Surface Go and iPad Pro. Why two tablets? Why two systems? Why not just iPad Pro or just Surface Go? It is like …
January 30th - Makzan’s Weekly Dispatch 2019w4: WorldSkills Competition Preparation Week
Hi there, In week 4 of 2019 January, I went to Kazan for WorldSkills competition preparation. WorldSkills is an international competition that host every two years. Worldskills flag This is my seventh WorldSkills experience. I …
January 20th - Makzan’s Weekly Dispatch 2019w3: Goodnotes and Productivity tips
Hi there, When you’re reading my email, I’m on the way heading to competition preparation week. I have been looking forward to seeing my friends there. More photos in Kazan on my Instagram (@makzan) next …
January 20th - Makzan’s Weekly Dispatch 2019w2: Feeling Grateful
This week, I am deeply honored to receive the award of professional merit medal from Macao SAR government. Feeling Grateful This is an encouragement for my work and training in skills competitions. Let me take this chance …
January 10th - “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 …
January 6th - Weekly Dispatch 2019w1 — Tunneling for 6 months
This is a re-post from my email newsletter sent on 2019-01-06. This is the first email since 2018 June. What have I been working on in the last 6 months? My 2nd son was born on …

2018 (9)

December 31st - 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 …
September 26th - 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 …
June 3rd - 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`, …
May 13th - Newsletter #47 Published
https://mailchi.mp/makzan/newsletter-47 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 …
May 11th - 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 …
May 10th - 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 …
February 24th - 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 …
February 23rd - 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. …
February 23rd - 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.

2017 (10)

October 19th - Closing of WorldSkills 2017.
October 7th - 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, …
October 5th - 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 socket.io library 2. HTML5 based game scene (a playground for interaction) …
July 12th - 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 …
July 11th - 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 …
July 11th - 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 …
May 6th - My thought on Freewrite
View this post on Instagram A post shared by Thomas Mak (@makzan) It does not become my writing tool. It becomes my thought dump. That’s like a meditation via typing on mechanical keyboard. It is …
April 26th - That’s why I hate Google’s navigation.
April 12th - 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 …
April 8th - 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 …

2016 (34)

December 15th - 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. …
September 8th - 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 …
February 11th - My current writing app stack
Here is my current writing process. 1. Note-taking: iA Writer (iOS) + Log.md (Desktop) iA Writer has a convenient left/right button in tool bar. I can type my 1st draft of notes in iPhone very …
February 7th - /now
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 …
February 6th - 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 …
February 5th - 50% Off for HTML5 Game Development Video
My 2-hour-long video screencast course is now 50% off for the a limited time. Use the code SaHjKFE to get the discount, within 2016 February.
February 5th - 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 …
February 4th - 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. This file contains bidirectional Unicode text that may be …
February 4th - Fetchnotes, Log.md and DayOne 2.0
Fetchnotes—as a tool to remember everything—is closing. I create Log.md that solves the same problem. DayOne 2.0 is solving the same problem.
February 3rd - Parallax CSS 3D rotate Effects
I just created 2 demos of CSS 3D hovering effects—Parallax flipping and Pop-up highlight. Parallax flipping: http://codepen.io/makzan/pen/pgVreR/ Video Preview: View this post on Instagram A post shared by MakClass (@makclass) Pop-up Highlight: Video Preview: View this …
February 2nd - 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 …
February 1st - Touch Keyboard Types
Link: Touch Keyboard Types Nice cheat-sheet for mobile input types. The examples are the highlights of the page.
January 31st - Vector drawing in Affinity Designer
I like the gradient fill with noises feature.
January 29th - 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 …
January 19th - 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 …
January 16th - 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. …
January 15th - 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 …
January 14th - Introducing Log.md—A logger for everything flash in your mind
Yesterday I built a tool to log my every day’s thoughts down. It is called log.md. By using this tool. I can quickly jot down my ideas and thoughts from my mind. I can use #tag for later …
January 13th - The CSS first-letter not working for inline
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode …
January 12th - 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.
January 12th - 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 …
January 11th - 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 …
January 11th - 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.
January 10th - 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.
January 8th - 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.
January 6th - 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 …
January 5th - Writing script for the next video course
Writing video script for my up coming HTML5 Game Development video course, 2nd edition.
January 5th - 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 …
January 4th - “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 …
January 3rd - [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 …
January 3rd - 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 …
January 2nd - 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 …
January 1st - CreateJS Getting Started Code with Retina Support
The following code snippet is the boilerplate to initial CreateJS library with device’s retina screen support. This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, …
January 1st - Happy 2016
The old MZ is archived. The new MZ is born.

2015 (113)

December 30th - 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.
December 29th - 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 …
December 27th - 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 …
December 26th - 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 …
December 25th - 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 …
December 25th - Link: Regular Expression Crossword Puzzle
Link: Regular Expression Crossword Puzzle Good game for holidays.
December 24th - 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 …
December 23rd - 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 …
December 23rd - 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, …
December 23rd - 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 …
December 23rd - “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. …
December 23rd - 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 …
December 17th - The concept of working directory and Git add, commit and reset
I drew this graph to explain the working directory concept and the changes tracking status among git add, commit and reset.
December 16th - 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 …
December 16th - 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 …
December 16th - 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. …
December 15th - Link: Text To HTML Menu/List
Link: Text To HTML Menu/List Useful utility.
December 15th - 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. This file contains bidirectional Unicode text that …
December 15th - HTML5 Game Development by Example: Beginner’s Guide – Second Edition
The second edition of the book makes the most of HTML5 techniques to create exciting games from scratch. Published by Packt Publishing.
December 15th - Demo of autolayout differently in portrait and landscape
This short video, without audio at the moment, demonstrates how to create an interface with AutoLayout with different layout on portrait and landscape.
December 15th - HTML5 Game Development [Video]
This video course shows you how to build two HTML5 games in two hours with fast-paced beginner-friendly style.
December 15th - Flexbox.website
A short book that demonstrates building website layout with CSS Flexbox.
December 15th - 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.
December 14th - 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.
December 8th - 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 …
December 4th - Old Web Today
Link: OldWeb.today I miss those day I was using netscape to learn web design.
December 3rd - 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.
December 2nd - 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 …
December 2nd - Link: Git pretty
Link: Git pretty, a chart to handle mess in you git commits. A chart to help you clean up a messy git commit history.
December 2nd - 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 …
December 1st - Course material for Git
Recently I’m writing a course material for learning Git version control. It’s still in early draft. But better than having nothing. You may find the course material in the following link. http://mak.la/git
December 1st - 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 …
December 1st - My experience on Pomodoro technique
Link: The simple technique to fit a 40-hour workweek into 16.7 hours That’s 25 minutes of steady, focused work on one task. No multitasking. No emails. No phone calls. No checking Facebook. Nothing! No distractions allowed. The Pomodoro Technique® …
December 1st - Trying iA Theme
I’m trying the minimal iA wordpress theme to see how it works. Ideally, I’ll be able to focus on writing only.
November 12th - 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 …
November 11th - 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/
November 10th - 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 …
November 7th - How I write everyday
Here is how I write everyday. I use Drafts to write on iPhone. I share every writings to Day One, which syncs to my Mac. I collect the writings into Scrivener. I write and edit in Scrivener when I …
November 6th - 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 …
November 5th - 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 …
November 4th - Basecamp 3
Link: Launch: Basecamp 3 I have been a fans of both the Basecamp product and the company behind it, formerly 37signals and now Basecamp. I clipped an interview to Jason Fried by OffScreen Magazine: We thought long about what it’d …
October 29th - Writing in Scrivener
I purchased the writing application Scrivener for years. But I didn’t really get used to it. I switched to use others writing apps, namely Editorial, iA Writer, Ulysses. Recently I’m exploring the workflow to write my books and …
October 21st - A easy-to-understand vim tutorial
Link: A vim Tutorial and Primer Vim as Language. Arguably the most brilliant thing about vim is that as you use it you begin to think in it. vim is set up to function like a …
October 20th - 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 …
October 19th - AgileBits never tells you to make the keychain in Dropbox public accessible
Re: 1Password Leaks Your Data Being a curious kind of guy I opened the file to see what was in there. The answer is the name and address of every item that I have in 1Password. …
October 19th - OS X El Capitan License in Plain English
Link: OS X El Capitan License: in Plain English Slideshows made with Photo; same deal, don’t even think about using them for some commercial purpose. I have really thought about that, at least to use in …
October 17th - 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.
October 16th - Jason Fried on Writing
Two quotes from Jason Fried on writing, from issue 12 of Offscreen Magazine. I guess I’ve grown to love it [writing] because it forces me to think and consolidate my thoughts. It forces me to be …
October 15th - 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 …
October 15th - Writing book in code editor
I recently changed my writing tool from those distraction-free text editors[1] to code editor.[2] It’s mainly because I focus on writing technical books with code examples and tutorials. Writing code tutorials don’t need a distraction writing …
October 14th - 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 …
October 13th - Corpus—A collection of CSS
Link: Corpus—A collection of CSS Useful CSS resource. Bookmark here.
October 13th - ECMAScript 6 Cheatsheet
Link: ECMAScript 6 Cheatsheet Useful cheatsheet. Bookmark here.
October 12th - 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 …
October 10th - A simple comparison between AsciiDoc and Markdown
I created a simple comparison between AsciiDoc and markdown. It uses my previous article. You can find both editions in the following Gist: This file contains bidirectional Unicode text that may be interpreted or compiled differently …
October 9th - Quote—On the side of the majority
Whenever you find yourself on the side of the majority, it is time to pause and reflect. — Mark Twain
October 8th - Steve Jobs Simplicity
Link: The One Thing Jony Ive Remembers Most About Steve Jobs Quite honestly, what’s remained, I never would have predicted four years ago. What’s remained is almost unremarkable, but what’s remained is his very simple focus …
October 7th - Setup Textastic app to write AsciiDoc on iOS
I’m writing my next technical book and course material with AsciiDoc. In Mac, there is plenty of options to write the AsciiDoc with syntax highlight. In iOS, I’ve searched many text editor until I find Textastic app …
October 6th - AsciiDoc Book Starter
I keep exploring different ways to write my next book. I’ve tried using Markdown, Markua, Pollen. They are all good at certain area, but none of them really fits my need on writing long technical book. Markua is …
October 5th - Minimal Desktop
Yesterday I posted my minimal iPhone homescreen. Here is my desktop: One desktop folder to store all my temporary files, which I’m too lazy to file them. The desktop wallpaper is the rotation of the default …
October 4th - Minimal Homescreen
I posted my home screen last year. Here is my latest one. 2 folders and 2 often used apps on dock. Nothing more. If there are too many apps for 2 folders, I delete some until they …
October 4th - Wave form of iOS voice memos app
Link: Little Big Detail The icon for Voice Memos is a waveform representation of the word “Apple.” Interesting detail found.
October 3rd - 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 …
October 3rd - 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 …
October 2nd - How to undo (almost) anything with Git
Link: How to undo (almost) anything with Git A good document that worths clipping down here for future reference.
October 2nd - 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: …
October 2nd - Saying No
This week, the page Product strategy means saying No from Intercom is popular. Saying no is hard, but a great product manager isn’t afraid to make tough decisions to keep their product bloat-free. This reminds me the famous quote …
October 1st - 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);
October 1st - Do serifs make you tap?
Link: Do serifs make you tap? As a result of this test, we are considering shifting our mobile ads’ default font from Helvetica to Times New Roman. Interesting finding. By the way, I do love serifs.
September 30th - 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 Plus now.
September 30th - Probabilities for years left to live
You may have heard of 900 months—The months you have assuming you’ll live until 75 years old. And you can draw 900 squares in a piece of paper: Link: Years You Have Left to Live, Probably …
September 29th - A collection of desk
Link: Issue 34 of The Modern Desk I’ve recently come across several interesting desk concepts, so I thought why not create a special edition of TMD all about desks, workstations and laptop stands. Nice desks. I …
September 29th - The first draft is always perfect
Link: The first draft is always perfect That’s right. The first draft is always perfect. perfect. Its only job is to exist. Like minerals. Like dirt. Like air. It just needs to be. All a first …
September 28th - 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 …
September 28th - 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 …
September 27th - 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 …
September 27th - 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 …
September 26th - Features vs. Benefits
I clipped example of selling benefits instead of features. Here is another one. Link: Features vs. Benefits People don’t buy products; they buy better versions of themselves. As Jason Fried post on twitter: “Here’s what our product can …
September 25th - Dealing with long words in CSS
Link: Dealing with long words in CSS Final solution This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals …
September 25th - Say — Text-to-Speech Command in OSX
The text-to-speech function in Mac OSX works in command line too. A simple say command with a string provided: $ say "Thank you for calling us. We are currently unavailable to take your call. Please …
September 25th - 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 …
September 24th - Make inline text bold and italic in Paper app
It’s so easy to forget that we can mark inline text as bold, italic and even strikethrough by using the iOS styles when selecting the target text.
September 24th - Pattern for Discussion Thread
Link: How to display threaded discussions on the web A nice discussion on the pattern of discussion thread.
September 24th - Stop breaking the web
Link: Stop breaking the web Do use a framework, but look into frameworks that are progressive-enhancement-friendly
September 24th - 19 Tips For Everyday Git Use
Link: 19 Tips For Everyday Git Use By the way, here is my git alias setup: This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open …
September 23rd - New books bought from ChengDu
I bought these books in this ChengDu trip: 100 個基本—松浦彌太郎的人生信條 The End of Eternity 創業時，我們在知乎聊什麼？造物有靈且美 Ship of Theseus 你只是看起來很努力
September 23rd - My visual log book
I keep a visual log book. It logs my every day’s thoughts and the special things I did that day visually.
September 22nd - 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”
September 22nd - 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 …
September 21st - I draw sketch in Paper horizontally
It’s more nature for me to draw in Paper app in horizontal orientation. My left hand holds the phone. My left thumb chooses between tools. My right hand draws. Afterwards I can rotate the canvas …
September 21st - Single Task
Link: I’m Returning to Single-Tasking I’ve been a fan of Leo Babauta. I gave out his book to my friends as Christmas gifts. I just realise that I share similar single task strategy that he uses: One browser …
September 20th - Have a well defined done state
Productivity is not about doing things faster. It’s about thinking and planning better. If things are well planned, it won’t take much time to complete a task. I meant it does take time, but it …
September 20th - Makzan.net archive
I have archived the old makzan.net into archive.makzan.net. I have kept the 4 courses URL unchanged. They are: Mobile web app development Ruby on Rails 101 Introducing Web Design Mobile Web Design Referring to my beta announcement, …
September 20th - Restore deleted documents from iCloud Drive
Link: Quick Tip: Restore deleted documents from iCloud Drive To restore files, sign into your iCloud account through the browser, and go to Settings → Data & Security. You can then browse a list of files in the Recover …
September 19th - 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 …
September 19th - 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 …
September 18th - New Makzan.net in beta
I’ve been thinking not to use the blog style in my personal website—makzan.net. I think I can put all my tutorial here and keep the essays updated when they need to. In such case, I …
September 17th - The role of Paper ideas and Apple Notes
Paper is for sticky notes. It’s the idea that I don’t know how it forms and improves. I can freely draw and type my ideas. And I can reorder them easily until the idea makes sense …
September 8th - New life
Today marks my new journey. My first child is born.
April 17th - 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 …
April 17th - 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 …
April 16th - 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 …
March 18th - 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 …
March 12th - 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 …
March 2nd - 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 …
February 28th - 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.
February 27th - 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 images are treated as content for accessibility purpose. The demo works in …
February 25th - .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.
February 16th - Portrait upside down
iPhone 6 Plus introduces an iPad-like orientation setting—home screen can be used in all 4 orientations, including portrait upside-down. I think the app developer may consider adding the iPad orientation rules in their iPhone app. …
February 15th - 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 …
February 13th - 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 …
February 11th - 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 …
February 1st - How dollar sign was born
A note on how dollar sign was born. Source: http://observationdeck.io9.com/why-is-the-dollar-sign-a-letter-s-1683940575

2014 (12)

December 10th - 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.
October 11th - Example of selling benefits
Here is an example of selling benefits instead of features. Show people what they can do better, instead of what your application can do.From Highrise blog: You don’t need another address book; you need a way …
October 10th - 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 …
October 10th - 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:
October 2nd - Focus means saying no to phenomenal ideas
From MacRumors: Jonathan Ive also shared details on Steve Jobs, saying that Jobs was “the most remarkably focused person” he’d ever met in his life. “You can achieve so much when you truly focus,” Ive said. …
October 1st - 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 …
September 5th - Guide to migrate OhLife entries to DayOne
This is a step-by-step guide to migrate your OhLife entries into DayOne. It’s text only because of the limitation of format OhLife exported. Prepare You need the exported text entries from OhLife. The service is …
September 3rd - Do you really need so many apps?
I have only 1 page of apps in my iPhone. All my daily apps are accessible via the only home screen. I don’t use too many apps every day. Here are my essential apps: phone, …
September 1st - Story of Makzan
This is a brief history on how I became myself. Beginning Web Design I started learning web design when I was thirteen, 15 years ago. I learnt most of the skills by making websites for …
July 1st - My thought about death
This is my thought about death and the contribution to the human race. The post was written in Chinese during the flight from Seoul to Macao, at June 2014. 死亡其實並不可怕。每個人都會死亡，這是必然會發生的，必然會發生的事，為何要怕？我們怕的，其實是還沒有做的事沒有機會做了。還沒有看見兒子長大，還沒有完成某（堆）事。怕失去親友，因為過往沒有爭取太多時間共處。還沒有及時享樂，還沒有做出一番事業。總之就是怕再沒有時間去完成一堆堆的事情。我認為作為人類，死亡只是一個個體的終結，但這個終結確確實實為新生代提供了空間成長。正正由於人類能夠用語言表逹，這使死去的人類不再是沒有意義，每一個死去的人，在其生前均對人類歷史作出了改變。而每一個人類的所作所為，均能為新生代提供借鏡。個體死亡後，還有千千萬萬其他人及下一代能繼續走下去。所以我認為，只要我們撤除自我中心，將視點退後一步，更宏觀地看，以整個人類來看，人生只要曾經為人類作出貢獻，無論大小，便已經對得起自己，對得起人類。我不把這認為是偉大，我認為這是人類生存的基本事實。我想，若我們每天都活得無悔，定期都在為人類作出貢獻，其實死亡是不可怕的。所以面對人生無常的方法是活在當下，讓每天都過得精彩。工作要完全投入，玩樂要玩得盡興，Hea 要夠 Hea，若每天皆能如此，然後每天晚上均能滿足地笑著睡覺，人生便無悔了，亦不會再懼怕死亡了。
May 25th - Sharing of my career path
I created this post for a sharing session hosted in University of Macau. My first job was designing and building real-time multi-players virtual world. I published a book related on the same topic by the …
April 1st - How writer pro fits my writing
This is not a normal app review. This is about how I am using iA’s Writer Pro. How I think it fits my usage. Table of Content Background First impression Research Trying it myself How the …

2013 (1)

October 10th - 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 …

2012 (2)

October 25th - What startup is
今早讀了 Kin Ko的文章《也談startup是甚麼》。其中一句尤其有深刻體會，就是「酷的大前提是生存」。所謂「有打未為輸」，只要能夠生存下來，行錯路又好，進度緩慢又好，還有一線機會；但不能夠生存下來的，則再怎麼談也沒意義。
October 22nd - I bought you, Moleskine
之前買左本畫簿黎畫野，但都係唔可以底面同時畫，會過底，上網查過，Moleskine Heavy 紙真係可以一紙兩面畫，唔會過底，想買好耐，但太貴唔捨得買。早兩日去台灣基隆（及台中）影婚紗相，路經台北，係台北站之誠品站前店買了兩本 Moleskine，算係買俾自己的廿六歲生日禮物，一本台幣 500 元，折約澳門幣 135 元，平過係澳門八佰伴買。

2009 (1)

November 1st - Get focus tips—Unplug the A/C Power
I’m using a technique to boost my efficiency within 2 hours to get things done. The method is to unplug the A/C power of my notebook. The principle is to let the battery become the …