Hakuu in the making (5) — Mnjul’s Intimate Home vs-6517

Part of the post series for my process in making Hakuu.

Frankly, I didn’t want to release Hakuu this early half a year ago — I did that (only) because I was on my way to an interview and I wanted to have something more recent and more technically advanced on my portfolio. As such, some aspects of the site was rushed (e.g. the mobile layout), and in the past couple months I’ve taken some time to polish Hakuu in general.

(繼續閱讀…)

Read More

LESS Mixin for Multiple Transition Properties under Same duration, timing-function and delay

Preface

Sometimes in CSS we’d like to transition on multiple properties under the same transition duration, timing function and delay, and we’d like to transition only those specific properties so we can’t use all as transition-property. Like this, for something that we probably want transitioning effect for properties pertaining to the y axis but not for those pertaining to the x axis:

.box {
  transition: height 0.4s linear,
              background-position-y 0.4s linear,
              padding-top 0.4s linear;
}

Of course, that’s some duplicated code. One way to reduce this duplicated code is to not use the shorthand rule:

.box {
  transition-property: height, background-position-y, padding-top;
  transition-duration: 0.4s;
  transition-timing-function: linear;
}

But in this post we’ll learn how to use the shorthand rule while reducing code duplication through CSS preprocessors: The exercise today is to write a LESS mixin that takes an arbitrary number of property names and produces the shorthand rule, e.g. something like .uniform-transition(0.4s linear, height, background-position-y, padding-top);

(繼續閱讀…)

Read More

Hakuu in the making (1) — Mnjul’s Intimate Home vs-6517

Part of the post series for my process in making Hakuu.

The Overall Story

As I said in the introductory post, since its inception almost two decades ago, MIH has had roughly the same site structures: A introductory section of the site, self-introduction (“Me”), recollection of my past with my friends/family (“Cast” and “Story”), some photographs, a history of prior versions, and (in earlier versions) a guestbook:

Site menu for MIH vs-3811
Site menu for MIH vs-2121

(繼續閱讀…)

Read More

Hakuu in the making (0) — Mnjul’s Intimate Home vs-6517

This series of posts records my process in making Hakuu, the latest incarnation of my personal website series Mnjul’s Intimate Home. For those not unfamiliar with MIH: It stemmed from my shared hobby with my junior high school friends during the early 2000s, later turning into a habit: Before I started my full-time job, I had created a new version of MIH every year. Doing MIH had allowed me to self-reflect and challenge my technical abilities: MIH is usually the first playground when I want to try something new or something I’ve thought I couldn’t do, and was/is my first full-fledged PHP website, Flash website, HTML5 website.

Hakuu, being the 13th iteration of MIH, is the first full version after I became a (allow me to borrow the Japanese term) salaryman. I simply don’t have enough personal time to do what I had done as a student — when I simply started everything from scratch, and brought everything online in one go only when all sections were finished. This would include self introduction, photos, recollections about past stories/friends, background music (yes — remnant of early 2000s), and much more. As redoing all these would impose much time, for Hakuu, I went on launch the site with only two pages. This was something I’d never imagine I would do (especially forgoing background music) — but I guess, as MIH has embodied me myself throughout the years, it probably is also a prime exemplification of my transition from one-shot perfectionism to iterationism (not an English word, I know).

Aside from the changed process, Hakuu sees design and technical advancements for MIH, which are to be illustrated in the posts to come.

Before we start, I believe it helps if I refer readers to two previous versions of MIH to get a better grasp of its vibe. (Referring to older versions have been a staple in MIH, but I did without it in the first version of Hakuu too.) They are Mnjul’s Intimate Home (vs-3811) and Allodynia. The former requires Flash. Neither of the two is mobile-friendly (which Hakuu is.)

Here are the posts. The first couple were published just after the initial version of the website went live, and detail the fundamental design idea/technical framework and are more topical; as I gradually expand the website, and sometimes make design changes or technical optimizations, later posts will be more and more ad-hoc.

Part 1 – The overall story (in professional terms, “Sitemap”)
Part 2 – The first version’s design, and technical experimentation/implementation
Part 3 – More misc technical stuff
Part 4 – Background music and raining sound
Part 5 – Mobile layout revamp and other improvements in late 2018
GitHub repo Manifesto – even more technical stuff (with some overlapping of the above)

Read More

In the Making of Mnjul’s Intimate Home 4931 (XII)

上一篇在這裡喔。

其實這兩年來沒什麼太大的更新,其一是這網站上線也五年了滿穩定的( 不過我還是有持續幫 Fragments 跟 Shards 加內容 ),其二是我現在在美國最操的軟體公司工作,實在沒什麼閒工夫。有閒工夫的時候我也想開始做下一個 Mnjul’s Intimate Home 啦!希望之後可以漸漸地把它弄上線。

  • 其實,一直以來 AJAX request 都已經不靠 jQuery 下了,所以我一直都想要把 jQuery 改成用 slim 版本。不過也因此要把 songs.xml 換成 songs.json,才能搞定。其實,當時 2012 年中是對 json 還不熟悉,如果當時就知道 json 如何操作,應該一開始就不會用 xml 了。用 xml 算是 Flash 的遺毒吧。
  • 以前曾經說過我很難決定要每放幾個 DOM element 或每隔多久就把控制權還給瀏覽器,然後說這問題根本就是需要瀏覽器給我額外的 knowledge。後來就知道有 requestIdleCallback() 這等東東!因為 callback 裡面會有機制可以問瀏覽器「我還有多少時間可以做我想做的事情?」實在太棒。
  • 順便把任何計時的功能改用 performance.now() 了。
  • 此外,也把第二階段 loader 的 box shadow 拿掉了。也把主 container 的背景顏色拿掉了。我現在的設計也確實變得越來越平面,如果可以用空間距離來表明不同的區塊的話,就不要額外再上色或用邊框啦。( 特別是這些區塊的功能差距非常明顯,使用者不太需要學。)

Read More

Private Class Members in ES6: A Complete Guide

This guide tells you how to write utility functions to facilitate private members, including properties and methods, for multiple ES6 classes with minimal code duplication, and some ideas on how we might guard against derived classes’ accessing base classes’ private members.

The final code is available as two GitHub Gists: this Gist for those who don’t care about the inheritances, and this Gist for those who do (but please definitely check the Inheritance section of this guide for caveats).

Preface

A lot of materials exist online teaching us how we can use various ES6 constructs & patterns to implement access restrictions to object properties. One common technique involves using closures and ES6 Weakmaps, like on MDN or this Stackoverflow answer. Weakmaps and the associated internal functions are great for native (or rather, syntactic sugar-coated) ES6 classes, but what I have found online is that all the code examples out there don’t tell us how we scale them. If we have multiple ES6 classes living in their own separate encompassing closures, do we want to write an explicit new WeakMap() instantiation and the internal function every time we write a class? How can we implement private instance methods with the WeakMap patterns?

(繼續閱讀…)

Read More

Creating the new mnjul.net homepage

於是我又~炸掉我的英文個人首頁,然後重做一個了。其實上一版也是一年前才做好( 算是活得最短的一個版本 ),但當時有點是為了找工作,所以急就章搞了一個也不知道到底要放什麼東西、要做什麼功能、要用什麼方式呈現、要怎樣設計的怪東西。前陣子總算有時間想 & 實際操作,就開始動工。

 

英文個人首頁,到底要放什麼東西?

自從六年前的橫向捲動的版本開始,一直以來我都把我的英文個人首頁當做 portal,放入( 幾乎是所有的 )我做的東西的連結,了不起再分門別類一下,最後加個 about me 的小 pop-up 就收工。也就是說,乍聽之下,根本就是作品集--但又是大雜匯的作品集( 姑且稱之為 meta-作品集 ):網站作品、程式碼作品、攝影作品、音樂作品、寫作作品,但又有其他亂七八糟的連結( 連到我的 Twitter 之類 );這樣胡亂攪和起來,要如何簡單扼要地呈現就成為一大難題。如果想再對每個連結都添上文字介紹,就亂糟糟了。下圖是這次被我炸掉的去年的版本:雖然有各種縮圖,但還是眼花撩亂地,沒什麼結構感、層次感。

[ 去年的版本 ]

(繼續閱讀…)

Read More