Category: Clip & Quote

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…

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…

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…

Touch Keyboard Types

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

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…

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…

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

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.

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…

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…

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…

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…

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…

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…

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…

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…

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…

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.

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

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…

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.

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…

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.

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…

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

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…

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…

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…

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…

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

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…

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…

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…

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

Dealing with long words in CSS

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…

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…

Pattern for Discussion Thread

Link: How to display threaded discussions on the web A nice discussion on the pattern of discussion thread.

Stop breaking the web

Link: Stop breaking the web Do use a framework, but look into frameworks that are progressive-enhancement-friendly

19 Tips For Everyday Git Use

Link: 19 Tips For Everyday Git Use By the way, here is my git alias setup:

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”

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…

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

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…

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…

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…

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

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

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

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…

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…