Author: Makzan

Closing of WorldSkills 2017.

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…

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…

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…

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…

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…

My thought on Freewrite

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…

That’s why I hate Google’s navigation.

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…

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…

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

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…

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…

/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?”…

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…

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.

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…

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…

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.

Parallax CSS 3D rotate Effects

I just created 2 demos of CSS 3D hovering effects—Parallax flipping and Pop-up highlight. Parallax flipping: Video Preview: CSS Parallax 3D card flipping effect. (With slow…

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…

Touch Keyboard Types

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

Vector drawing in Affinity Designer

I like the gradient fill with noises feature.

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…

Blocking content on mouse hover

I don’t understand why prefer such hover effect. When you hover, the content is blocked by the title. But when you hover something, usually it…

Is jQuery dead?

When I discuss with web designers on what tech they use these days, people usually talk about Angular, React, Flux, GraphQL, Ember, Meteor… the list…

Styling focus element outline

Just realize that z-index only works on non-static element. May be I knew it before but didn’t really make it a knowledge. When using tab to…

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…

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…

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.

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

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

Flexbox website guide

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

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…

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…

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.

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…

Writing script for the next video course

Writing video script for my up coming HTML5 Game Development video course, 2nd edition.

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…

“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…

[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…

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…

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…

CreateJS Getting Started Code with Retina Support

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

Happy 2016

The old MZ is archived. The new MZ is born.

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…

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…

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

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…

Tabs in HTML is not easy

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

Link: Regular Expression Crossword Puzzle

Link: Regular Expression Crossword Puzzle Good game for holidays.

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 +…

Link: (Webkit) More Responsive Tapping on iOS

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

Link: Accessible dialog tutorial

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

Link: The web accessibility basics

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

“Force enable zoom” in Opera 34 for Android

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

Opera Mini and it’s data saving

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

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.

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

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…

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…

Link: Text To HTML Menu/List

Link: Text To HTML Menu/List Useful utility.

CSS Toggle Switch

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

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.

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.

HTML5 Game Development [Video]

This video course shows you how to build two HTML5 games in two hours with fast-paced beginner-friendly style.

Flexbox.website

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

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.

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.

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…

Old Web Today

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

What we can do today

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

Engaging users with web

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

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.

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…

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…

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…

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…

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.

Material Design is for Google only

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

ReactJS Examples

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

Rails from request to response

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

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…

Tween.js examples

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

One third of FWA Site of the Day winners uses CreateJS

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

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…

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,…

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…

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…

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…

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…

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.

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…

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…

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…

Practical CreateJS

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

Corpus—A collection of CSS

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

ECMAScript 6 Cheatsheet

Link: ECMAScript 6 Cheatsheet Useful cheatsheet. Bookmark here.

The problem of AMP HTML

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

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: And here is…

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