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
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
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 “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
Link: How Tabs Should Work REQUIREMENTS: WHAT MAKES THE PERFECT TAB? All content is navigable and available without JavaScript (crawler-compatible and low JS-compatible). ARIA roles. The tabs are anchor links that: are clickable have block layout have their href pointing to the id of the panel element use the correct cursor (i.e. cursor: pointer). Since tabs are clickable, the user can open […]
Read Post / December 25, 2015
Link: Regular Expression Crossword Puzzle Good game for holidays.
Read Post / December 25, 2015
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
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 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 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
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
Link: https://www.designernews.co/comments/193811 So basically, feature support is important. But for those in countries that don’t have unlimited (or essentially unlimited) internet access, Opera Mini’s data saver features are incredibly useful. It seems that people are using Opera Mini mainly because of the data saving. I’m in 1GB plan and every month I run out of […]
Read Post / December 23, 2015
I drew this graph to explain the working directory concept and the changes tracking status among git add, commit and reset.
Read Post / December 17, 2015
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
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
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
Link: Text To HTML Menu/List Useful utility.
Read Post / December 15, 2015
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
The second edition of the book makes the most of HTML5 techniques to create exciting games from scratch. Published by Packt Publishing.
Read Post / December 15, 2015
This short video, without audio at the moment, demonstrates how to create an interface with AutoLayout with different layout on portrait and landscape.
Read Post / December 15, 2015
This video course shows you how to build two HTML5 games in two hours with fast-paced beginner-friendly style.
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 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
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.
Read Post / December 14, 2015
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
Link: OldWeb.today I miss those day I was using netscape to learn web design.
Read Post / December 4, 2015
In the post Engaging users with web, we see how we can use web technologies to build interaction with users. Link: WhatWeCanDo.today This website let you check how your browser supports the latest web technologies.
Read Post / December 3, 2015
Link: Native or Not? The Untapped Power of Web Apps This essay lists what we can do on web, which is more powerful than you may expect. Of course the web has its limitation, but the web has its benefits too: Perhaps the biggest advantage the web has over native apps is how quickly users are […]
Read Post / December 2, 2015
Link: Git pretty, a chart to handle mess in you git commits. A chart to help you clean up a messy git commit history.
Read Post / December 2, 2015
Link: Welcome Adobe Animate CC, a new era for Flash Professional To more accurately represent its position as the premier animation tool for the web and beyond, Flash Professional will be renamed Adobe Animate CC, starting with the next release in early 2016. In the past, the web had many characteristics and personality. But it also came […]
Read Post / December 2, 2015
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
Read Post / December 1, 2015
Link: Learning CSS Layout with Flexbox Froggy The goal of the game is to help the frogs get to their lilypads by writing CSS code. See if you can beat all the levels! A nice game to learn Flexbox: http://flexboxfroggy.com
Read Post / December 1, 2015
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® has been there for a while, but recently it gains attention again. Recently I backed a project named Productivity Planner which also […]
Read Post / December 1, 2015
I’m trying the minimal iA wordpress theme to see how it works. Ideally, I’ll be able to focus on writing only.
Read Post / December 1, 2015
The way people talk about Material Design makes it feel as through it’s a new discovery in design. There are interesting principles in there, but I don’t see why another company would want to adopt Google’s design guidelines. Outside of Google I don’t think it’s a huge thing, and I don’t really think about it […]
Read Post / November 12, 2015
I’m writing some ReactJS examples to demonstrate how we use React as the view rendering library. It also shows how we do data-view separation. You can find the examples in the following CodePen collection: http://codepen.io/collection/XwaeGM/
Read Post / November 11, 2015
I need to draw a chart to explain the flow from a client’s browser sending a request to Rails server. Then Router dispatches the request to Controller. Controller grab data it needs from Model. Finally Rails uses the ERB engine to put together the HTML and data to create an HTML file, which sends back […]
Read Post / November 10, 2015
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 am using Mac. I export them as AsciiDoctor format and deploy to static hosting service, such as Surge.sh
Read Post / November 7, 2015
I’m recently trying to use the TweenJS library with DOM elements. Here is my first attempt. Here is the core part of the source code. I didn’t use the CSS plugin from TweenJS. Instead, I interpolate the values in the data object and use a dedicated view rendering function to render the changes. I find it cleaner and fit […]
Read Post / November 6, 2015
According to the HTML5Ads documents by CreateJS. CreateJS is robust and mature. The suite was created and is maintained by a highly experienced team of interactive developers and designers, who have been building rich content for over 15 years using Flash and HTML5. It is over 5 years old, has grown through 8 major releases, and has been […]
Read Post / November 5, 2015
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 be like to concentrate on one product forever. We realised, through, that it’s not really one product forever. It may be one […]
Read Post / November 4, 2015
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 blog posts in AsciiDoc format, which is in plain text that gives me much more control than Markdown. I was […]
Read Post / October 29, 2015
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 language, complete with nouns, verbs, and adverbs. I learnt vim, but this would definitely be helpful if I have to […]
Read Post / October 21, 2015
I’m working on a book that shows how we can integrate canvas into our daily web design and application. I converted that book into AsciiDocrecently. Now I’m making another chanegs to the code example. I start converting the source code from CoffeeScript into ES6. You can find the progress of converting my example code in my CodePen collection. By […]
Read Post / October 20, 2015
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. Every single one. In plain text. You won’t have access to that HTML file, and the related JS code if […]
Read Post / October 19, 2015
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 my friends wedding. I cannot, don’t even think about it, just plain can’t, make money from MPEG/H.264/AVC videos I create. […]
Read Post / October 19, 2015
Link: http://colinkeany.com/blend/ Useful tool to create CSS3 gradients, by @colinkeany. It works in mobile too.
Read Post / October 17, 2015
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 clear, to be able to explain what’s in my head to someone else. — Jason Fried The “bait for knowledge”: […]
Read Post / October 16, 2015
Link: https://trac.webkit.org/changeset/191072 When a viewport is unscalable (specified through the meta viewport tag) we do not add a delay to our single tap gesture recognizer. When we set the viewport to unscalable, which means we want that web page acts like an app. So we shouldn’t make our web page unscalable just for the sake to […]
Read Post / October 15, 2015
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 environment. Instead, I need to code my code examples, make it works and refractor into a elegant minimal code base. […]
Read Post / October 15, 2015
I wrote a half-done book, Practical CreateJS, in early 2015. I’m exploring a new approach to write my book in AsciiDoc. I restart the writing process of the Practical CreateJS book and used a weekend to convert the book from Markua into AsciiDoc. I open source the book source and you can read the book online in the following URL: http://practicalcreatejs.com […]
Read Post / October 14, 2015
Link: Corpus—A collection of CSS Useful CSS resource. Bookmark here.
Read Post / October 13, 2015
Link: ECMAScript 6 Cheatsheet Useful cheatsheet. Bookmark here.
Read Post / October 13, 2015
Link: Get AMP’d: Here’s what publishers need to know about Google’s new plan to speed up your website Now, AMP essentially asks you to build a parallel-universe version of your site that strips out not just anything that’s slow, but anything that might be slow. AMP tries to do something maybe even more significant: change the […]
Read Post / October 12, 2015
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 their diff.
Read Post / October 10, 2015
Whenever you find yourself on the side of the majority, it is time to pause and reflect. — Mark Twain
Read Post / October 9, 2015
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 on trying to make something beautiful and great. And it really was simple. There wasn’t a grand plan of winning, […]
Read Post / October 8, 2015
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 to supports the syntax highlight with plugin. I followed this Textastic forum post to install syntax plugin on the iPhone. Here is […]
Read Post / October 7, 2015
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 the closest one, but the toolchain doesn’t work well for me. Recently I came across AsciiDoc and it’s implementation AsciiDoctor. It looks promising […]
Read Post / October 6, 2015
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 Desktop Pictures:
Read Post / October 5, 2015
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 fit into the dock.
Read Post / October 4, 2015
Link: Little Big Detail The icon for Voice Memos is a waveform representation of the word “Apple.” Interesting detail found.
Read Post / October 4, 2015
When I setup this blog with periodically building and deploying, I used a local cron. Now I changed to use WebTask and CodeShip to automatically generate the static site and deploy on Surge. I changed the hosting service from Github pages to Surge.sh. Then I followed the Integrating with Codeship tutorial to setup the deployment. I made changes to make it build the middleman site as […]
Read Post / October 3, 2015
Link: Props in getInitialState Is an Anti-Pattern This isn’t really a React-specific tip, as such anti-patterns often occur in code in general; in this case, React simply points them out more clearly. Good tips on initializing values in constructor. There are difference between initialCount and count.
Read Post / October 3, 2015
Link: How to undo (almost) anything with Git A good document that worths clipping down here for future reference.
Read Post / October 2, 2015
A student of mine asked me this question when he is making an input text filtering with Chinese content. The user needs to input some text to filter the content. Here is his original code: $(‘#search’).bind(‘keyup’, function(){…}) In Chinese input, we often compose one block character by composing strokes. When typing Chinese text in <input>, this […]
Read Post / October 2, 2015
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 from Steve Jobs: “People think focus means saying yes to the thing you’ve got to focus on. But that’s not […]
Read Post / October 2, 2015
Link: Why Do We Have repeating-linear-gradient Anyway? I like the idea of using repeating-linear-gradient to generate pattern. They look cool! background: linear-gradient(135deg, #000 .25em, #0092b7 0); background-size: .75em/sqrt(2) .75em/sqrt(2);
Read Post / October 1, 2015
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.
Read Post / October 1, 2015
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.
Read Post / September 30, 2015
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 Today I come across this website with a simulator on the probabilities for years left to live. It reminds me […]
Read Post / September 30, 2015
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 first met a standing desk setup in person in my Finnish friend’s home. Recently I also setup my standing desk at […]
Read Post / September 29, 2015
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 draft need be is an idea borne into reality. A first draft is something made tangible from nothing – its […]
Read Post / September 29, 2015
Link: Adding Support for Custom Domains in Rails There are three main steps necessary for adding custom domain support to your Rails project: Have your users add a CNAME record pointing their domain to yours Update your routes to handle any custom domains. Add the controller logic to find resources using the custom domain For this […]
Read Post / September 28, 2015
Link: Foundation 6: Leaner, Meaner and Cleaner Sass Yep, let’s start with the bottom line: when writing Sass, remember that you’re always one step removed from your CSS output. In general, we shouldn’t be producing crazy CSS that we would never write without Sass. A good reminder on what we should becareful when using CSS preprocessor. […]
Read Post / September 28, 2015
I’m going to explore the Rails-React way to create my next web app. You may call me traditional, but I still don’t think pure client-side frameworkis a good idea. I’m going to use the server to pre-render the React result to the client. When user interacts on the web app. If the client is capable to run ReactJS […]
Read Post / September 27, 2015
Link: Browser Link Indicator I was wondering why there are no indicators in our browsers, letting us know if a link is internal or external. Same thought. That’s why we, web designer, should at least code our own external link indicator.
Read Post / September 27, 2015
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 do” and “Here’s what you can do with our product” sound similar, but they are completely different approaches. – Jason Fried
Read Post / September 26, 2015
Link: Dealing with long words in CSS Final solution This solution will show hyphens for every browser supporting it and will break lines in every other browser – perfect. This is a useful technique when you need to deal with long words in your web design. For example, when you need to reference a long city name.
Read Post / September 25, 2015
The 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 leave us a message and we’ll return your call as soon as possible.” We can control the speaking rate in […]
Read Post / September 25, 2015
I came across this Flash website which was made in 2006. I miss those days with stunning websites. Link: Archive of Nike Air site In case you don’t have the Flash player, I captured the screen into the following video: Nike Air 2006 Flash Website.
Read Post / September 25, 2015
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.
Read Post / September 24, 2015
Link: How to display threaded discussions on the web A nice discussion on the pattern of discussion thread.
Read Post / September 24, 2015
Link: Stop breaking the web Do use a framework, but look into frameworks that are progressive-enhancement-friendly
Read Post / September 24, 2015
Link: 19 Tips For Everyday Git Use By the way, here is my git alias setup:
Read Post / September 24, 2015
I bought these books in this ChengDu trip: 100 個基本—松浦彌太郎的人生信條 The End of Eternity 創業時，我們在知乎聊什麼？ 造物有靈且美 Ship of Theseus 你只是看起來很努力
Read Post / September 23, 2015
I keep a visual log book. It logs my every day’s thoughts and the special things I did that day visually.
Read Post / September 23, 2015
Link: How to use Chrome DevTools like a Pro I find the $0 reference in console useful: Get the current element with “$0”
Read Post / September 22, 2015
By using the middleman-blog gem, the middleman build command won’t build posts that’s in the future timestamp. By using the periodically deploy script. I can now set a pending post in my middleman source by setting a future date. I can preview the future post locally with middleman server. When everything is set, I just wait for the automatically deployment to […]
Read Post / September 22, 2015
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 to fit the apps portrait screen.
Read Post / September 21, 2015
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 tab open. Know what I’m focusing on. Read to completion. One app on my phone at a time. Be mindful […]
Read Post / September 21, 2015
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 is a limited time if the goal is clear. But if things are not well planned, the tasks you perform […]
Read Post / September 20, 2015
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, these courses will have a dedicated site. Meanwhile, I just host the as-is version here to keep the URL works. […]
Read Post / September 20, 2015
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 Documents tab. Files are removed from Recover Documents after 30 days, so don’t wait long to restore something. A useful tip […]
Read Post / September 20, 2015
While building the new makzan.net on top of middleman site generator. I faced an issue that for certain files, I don’t want middleman to process it during the build process. For example, I want to copy the README.md without middleman compiling it into HTML file. I also need to copy my HTML5 games, tweet archive and some other stuff without going through […]
Read Post / September 19, 2015
The new makzan.net is built on top of Middleman static site generator. Then I deploy the site as a Github pages. I use middleman-deploy gem to setup the Github pages deployment, which I follow their default setting: 1 2 3 4 activate :deploy do |deploy| deploy.build_before = true deploy.method = :git end I use Cloud9 for development and run the following cron job […]
Read Post / September 19, 2015
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 don’t need to make it a blog, I just need to keep putting content there without timestamp. I was wrong. […]
Read Post / September 18, 2015
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 to me. Once the idea makes sense, I move it away into other editing tools. For example, I use Apple […]
Read Post / September 17, 2015
Today marks my new journey. My first child is born.
Read Post / September 8, 2015
By default, we should put the script tag after our content. It usually means putting them just before the closing of the body tag. The reason is that browser stops loading when it encounters a script tag. If we put the script after content, we let all the content loads and displays before we pause […]
Read Post / April 17, 2015
