The Backstory When we moved into the house we are currently living two years ago, there was a large vacant land on the side of the house. The shape is abnormal – it’s a triangle. That area was used as a swimming pool until the previous owner decided to sell the house and paid a ton of money to fill the pool, leaving a completely bare soil with nothing growing on. After a rainy winter in the Sa...

Background Story I have been using Ivan Pavlov’s Debit and Credit on iOS and macOS since 2017. In the past 6 years, I have entered 12,500+ transactions out of my 30+ bank accounts. I use the app every time I make a purchase (online or onsite) or receive salary, and I perform manual bank statement reconciliations every two weeks. The app serves as a witness to my financial growth. It’s a grea...

My blog has essentially been a deserted landscape since my last post in 2018 when the world was in a more typical state, devoid of extreme conflicts or pandemics. I recently devoted a few hours to updating the layout, giving it a slightly geeky vibe. I’ve noticed that I’ve become less inclined to share, a habit that used to be beneficial. So, I’m making some adjustments. The exact nature of th...

After migrating to Typescript on my WordMark 3.x, I decided to migrate all my javascript codes to typescript because coding with type check feels so good. However, the migration process was absolutely painful, especially for those with large codebase. For UI such as web or React Native app, the migration is not just changing all .js to .ts, but also includes updating the compiler setup (e.g. We...

Introduction High-level Goals Hardware Infrastructure Setup Raspberry Pi Homebridge - Siri Amazon Echo Dot ESP8266 NodeMCU module Lights Integration A/C Setup Arduino IDE IR Recording IR Sending Integration Door Lock Introduction I am renting an 1b1b apartment in Silicon Valley. It is not...

Introduction My recipes of ~/.hammerspoon/init.lua Open application with alt + X Open a Chrome tab with alt + ? Snap windows to the edges of the screen, and resize it! Move windows between multiple monitors Quick switch Chrome users, or open incognito mode Put computer to sleep mode When connected to work Wifi, mute the computer to avoid awkwar...

In Javascipt, constants are not really “constants”. When you import some kinds of array from a file, and then alter it, you can actually change the “constant”. To avoid this, simply calling the following deepFreeze() to the array or the object, and it will throw an error for mis-use. export default function deepFreeze(stuff) { Object.freeze(stuff); Reflect.ownKeys(stuff).forEach(key =>...

Print numbers 1 - 10 with 1 second lag - Beepi If sum(1, 2, 3) === 6, make the following also work: sum(1)(2, 3), sum(1, 2)(3), sum(1)(2)(3) - Beepi Create a cache function to cache functions that took 2s to run Create the all() function that achieve this [1, 2, 3].all(isGreaterThanZero); -> true Reverse an array without using loop - SigFig Write a debounce function Decompress...

This post records some of the questions I met in technical interviews. Some of them are tricky. What is functional programming in Javascript? What’s its advantages? What is closure? How Javascript’s scope chain works? What is the difference between declaring properties in construction vs. in Prototype? Declaring method in construction vs. in Prototype? React’s contextProps? What...

In WordMark’s latest version (v2.1.6), I added a directory tree in the side bar to allow users to manage their Markdown posts without inside the application. The article aims to document what I did, providing a recursive method for the implementation. For starting, I created two new components: FolderTree and FolderLeaf. The latter one is the recursive component. The very initial question I as...

I have done a number of researches in React’s frameworks. An interesting thing to me is that I was never trying to read about or learn anything about frameworks when I was developing iOS apps. Programming in iOS is so nature. What makes Javascript codes so difficult to maintain after a massive increasing size of the code base is its asynchronous callbacks. React, as an innovative way of coding ...

Update 9/18/2016: This post is outdated. Please follow the latest guide. The only notable thing is that Electron does not support “bookmark” entitlement, which causes applications fail to open local file or folder after reboot. Issue Update 4/21/2016: The Chrome 0.37 signing problem seems to be fixed by adding an entry to entitlements. Issue Update 4/10/2016: Due to a Chrome update of ver...

There are two problems detected in the company’s current React-based website. The first one is the loading performance issue. The website is broken into components. The size of the bundle size is as large as almost 600KB. Even with gzip compression, the file is still over 200+KB. With slow internet, the user will see a blank in the beginning. The second one is SEO issue. The Google search eng...

Markdown apps like StackEdit and MacDown have a feature called sync-scroll. It means that when the user is scrolling the editor, the previewer will also be scrolled based on the position of the editor. It is a really useful function because I can always see how it looks like in the real web page, so I want this function in my own Markdown editor WordMark. My first try is based on percentage. ...

For the development of my latest project WordMark, I developed a new but simple framework based on React. The whole idea is based on Redux, while it is much simpler than that. Besides PubSubJS, there is no any other dependencies. I will introduce this framework based on a simple markdown editor/previewer page. Index The structure of the project is as follows: Project |-- components |-- E...

01/29/2016 Update I created a React component based on this article. Background To be honest, not many people are willing to toss with the scroll bar in browsers. The first and the most critical issue is about the compatibility: to start with, Firefox (at least before 5.0) doesn’t support any CSS styling for scrollbar. Secondly, most browsers will use their OS default scrollbar styles. Hen...

From March 2015 the Chinese stock markets is becoming so hot that it felt like everybody can make money by staring at stock screens. The SS index raised from around 3000 to almost 5000. At that time, I happened to have a constructive dinner with Richard, who is one of my good friends at NYU. He shared with me a lot about how he can make $300 per day by investing ETFs and stocks. I have a Bachel...

The biggest challenge I have ever met in the development of a single-page app is the cross-domain request with CORS problem. After one week of intense development of a React app, everything seems fine until I made my first $.ajax call to the server, which ran in another port. In my previous personal projects, I simply added a Access-control-allow-origin: * in the response to temporarily solve ...

One of my web projects requires the top section of the page to have a window’s height. Normally I use a CSS rule height: 100vh to do this if I don’t consider IE 8 or before because it is fast and easy. It works fine in most desktop browsers, but in mobile Safari the section is cut off the bottom (around 20px). When playing with Safari, I found that mobile Safari has a very weird feature (looks...

One thing I like JavaScript is that unlike most other programming language, JavaScript does not have complete developing method and process. Its chaos and freedom are both the con and pro. @xufei mentioned in his blog: There are no any other fields that are similar to Front-end world, which is chaotic and thriving. On one hand, it means that front-end developers are creative. On the other h...

On my first day in the company, my boss wanted to refurbish one of the pages in the website to attract more investors because the current page looked like one 5 years ago (in fact it was). The development of a web page was supposed to be very simple and elegant: writing a HTML, js and a css file can do the job. Throwing them into a folder like this: Project |-- company.html |-- style.css |-- s...

Some of the sections I developed this week involved complicated animations among DOM. The page had a very poor performance in some mobile devices (tested on iPad Mini 2, iPad 2 and iPhone 6), which made me start to study how to optimize animations in DOM manipulation. This article aims to discuss some methods to optimize JavaScript and CSS animations based on a real world project. This is a pa...

When I was developing StudentDaily app, I was struggled for a long time in implementing view difference effect in Zhuhu Daily app. As in the following figure, the view is made up of a banner(UIView) and a browser(UIWebView). When you are scrolling down the UIWebView to read, the banner will be pushed up with a lower speed compared to the UIWebView. I knew that this view must be made up of tw...