Sparanoid

CSS Variables Guide: Color Manipulation and Dark Mode

2019-10-14T00:00:00+08:00

Follow this guide, you will:

Learn why use HSLa over HEX/RGB for better color manipulation
Create dark mode for your app/website with CSS variables (custom properties) in a pleasant way
How to migrate from spreading colors all over your stylesheets to a unified, reactive color system
Easily extend your theme to “darker” mode, “pinky” mode, or any color tint you want

Let’s embrace HSLa color model

First, before I get started to create dark mode for my site, I deprecated all HEX and RGBa (ARGB) models with HSLa. Why? The real appeal of the HSLa model is it’s more intuitive, straightforward for humans to know what the color will be like when you change the H (hue), S (saturation), and L (lightness) values. Remember HEX or RGB colors? Will you tell #6495ed is cornflower blue? rgb(75, 0, 130) represents indigo? Are they light or dark colors? Their saturation? No, but HSLa will.

Introducing Kladenets (aka. Root Variables)

Based on the HSLa model, I created a minimal, future-proof CSS variables framework based on HSLa. Kladenets; it is:

Minimal variables defined: colors, typography, and layout helpers.
HSL colors: all colors are HSL-based for more straightforward manipulation (before we have CSS Color Module Level 4 in hands).
Flexible to extend: all variables can be overridden later in :root or in specific scopes.
Dark mode ready: extend your existing app with prefers-color-scheme: dark, tweak colors with HSL, and you’re ready to go.

This framework starts with 4 main color templates cover most of the color using on a page:

--text-color for the main text. A generally dark color on a white page when the color scheme is light
--link-color for hyperlinks. A vivid color compared to general text
--bg-color for the page background. A white color by default
--code-color for monospace code text. Just an alternative color with slightly adjusted hue compared to link color

If you look at the source code you will know how it works. Take the link color as an example:

I first define the color using HSL color space in native CSS custom properties (aka. CSS variables). This can help me change the value of it or manipulate it using CSS calc() function later:

:root {
  --link-color-h: 211;
  --link-color-s: 100%;
  --link-color-l: 50%;
}

Since I have all the values HSL needs I can combine them into one variable:

:root {
  --link-color-hsl: var(--link-color-h), var(--link-color-s), var(--link-color-l);
}

Then I can create more variables based on this HSL variable:

:root {
  --link-color: hsl(var(--link-color-hsl));
  --link-color-5: hsla(var(--link-color-hsl), .05);
  --link-color-10: hsla(var(--link-color-hsl), .1);
  --link-color-20: hsla(var(--link-color-hsl), .2);
  --link-color-50: hsla(var(--link-color-hsl), .5);
  --link-color-90: hsla(var(--link-color-hsl), .9);
}

You get it? this creates “variable chains” — when --link-color-h updates; it will also updates --link-color-hsl. All colors based on these variables will also be updated automatically. It works more like traditional CSS preprocessors like Less and Sass, but it’s executed in the browser without compiling thanks to CSS variables.

With this technique you can create more complex color variables with your imagination:

:root {
  --link-color-light: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) / .9));
  --link-color-dark: hsl(var(--link-color-h), var(--link-color-s), calc(var(--link-color-l) * .9));
  /* just inverted from link-color's hue */
  --code-color-h: calc(var(--link-color-h) + 180);
}

If you’re not comfortable with these chunks of variables or you’d like to tweak the alpha channel manually. You don’t need to create them for different opacity values. You can try the following instead:

a {
  color: hsla(var(--link-color-hsl), .875);
}

Create your own themes

The Kladenets framework is just too easy to use. You can just import it in your app and play around with the colors in your browser inspector to see how it works. If you like you can also create your own Kladenets based on this technique.

To make things simple, I’ll continue with the Kladenets conventions for the dark mode guide.

After importing the Kladenets you will get several CSS variables in your :root. You can override them later in any CSS files, and the best practice is defining them in :root or body:

/* app.css */
/* Override default color scheme */
:root {
  --text-color-l: 20%;
  --link-color-h: 240;
  --bg-color-s: 10%;
  --bg-color-l: 80%;
}

With the benefits of HSL color mode I can easily tweak the colors without using any visual color picker. I can open the browser inspector and change them to see color updates automatically.

That’s all, I just created a new theme with lighter text, more bluish links, and a blush background.

Welcome to the variables world!

Now preparing for the dark mode. You need to migrate all colors in your CSS with varibles you defined:

a {
- color: #6495ed;
+ color: var(--link-color);
}

a:hover {
- color: #6495ed;
+ color: var(--link-color-dark);
}

hr {
- border-top-color: #e3e1ea;
+ border-top-color: hsla(var(--text-color-hsl), .125);
}

You can also create variables based on usage for more semantic:

:root {
  --border: var(--text-color-10);
  --btn-hover: var(--link-color-dark);
}

This can be hard at the beginning, but when you’ve done this step you’re really close to the dark mode.

Let the magic happen

This is the final step for dark mode. Now you’re smart enough to realize that dark mode is just another theme for specific devices that support it. You already know how to create a theme based on Kladenets, then you know how to create another theme for dark mode:

/* Dark mode, that's all we need. */
:root {
  --text-color-s: 10%;
  --text-color-l: 70%;
  --link-color-l: 70%;
  --bg-color-l: 7%;
  --bg-color-s: 10%;
}

Let me explain:

Set text color’s saturation lower to 10% that will be pleasant for your eyes.
I’m creating a “white text with black background” style so make text color lighter to 70% lightness.
The lightness of links could also match the text color. Set it to 70%, too.
Turn off the light for the background color, so make the lightness of it to 7%.
The background shouldn’t be too vivid, so set the saturation to 10%.

You can copy and paste the above snippet to Kladenets demo to see how it works.

Now, let’s make magic happen: wrap them in prefers-color-scheme: dark media query, followed by your original variable overrides:

/* app.css */
/* Override default color scheme */
:root {
  --text-color-l: 20%;
  --link-color-h: 240;
  --bg-color-s: 10%;
  --bg-color-l: 80%;
}

@media (prefers-color-scheme: dark) {
  :root {
    --text-color-s: 10%;
    --text-color-l: 70%;
    --link-color-l: 70%;
    --bg-color-l: 7%;
    --bg-color-s: 10%;
  }
}

That’s all you need for dark mode! All your buttons, text, links, borders, input, modals, dropdowns, and etc. that you migrated from normal colors to variables will now update automatically when prefers-color-scheme: dark is true for supported devices.

Media Auto Hash Rename

2019-04-05T00:00:00+08:00

Media Auto Hash Rename will rename any file (specific files can be ignored by file extension) during upload, with unique, low collision hashes. Hash characters and length can be configured for even lower collision rate.

This plugin provides no configuration GUI to make it more easier to maintain with the future WordPress updates.

Currently there’re 3 constants you can configure in your wp-config.php, I recommend WP-CLI for maintaining these constants.

`MAHR_LENGTH`

Length of the random hashes, (default to 8), longer can help reduce collision. Hashes at the length of 8 can be collision-free at the scale of 50,000 images).

`MAHR_CHARS`

Characters used in hashes, default to 0123456789abcdefghijklmnopqrstuvwxyz_, You can add more characters like uppercased alphabelts to dramatically reduce the collision without increasing the length of your filenames. But please note that this option can be dangerous if you’re not familer with general URI encoding. So if you don’t know what characters are allowed in a filename, just keep it untouched and use the default option.

`MAHR_IGNORE`

File extensions to be ignored, default to pdf, zip, you can define a comma delimited list of file extensions to bypass renaming process of this plugin. All files that has the file extension you defined in the list will be ignored. Please note that:

File extensions must be defined without the leading peroid, for example: 'pdf, 7z, bmp' works, '.pdf, .7z, .bmp' does not.
With ('pdf, zip') or without ('pdf,zip') space both work.
If you define your own ignore list, default ignore list will be discarded. For example, if you define '7z', then 'pdf, zip' will be processed during upload. You need to reapply these extensions with your own: '7z, pdf, zip'.
If you don’t need to ignore any files by its extension. define an empty array [] (without quotes) to this option: define( 'MAR_IGNORE', [] ); to force process PDF and ZIP files.

FAQ

What if I deactivate this plugin?

This pluigin, doesn't not write any extra data into your database. The files renamed by this plugin will still work after you deactivate this plugin.

Downloads

Download it at WordPress.org

URL-Based CSP for AWS Lambda

2018-08-27T00:00:00+08:00

If you followed my last post you would know you can set HSTS headers via AWS Lambda, this time let me show you how to add Content Security Policy (CSP), Expect-CT, and other security headers based on URLs that clients request, and only for text/html content type.

I’ll modify the production code built from my last post. This time you need to catch the request URL:

const request = event.Records[0].cf.request;

Then you can add Content Security Policy headers based on URLs:

// We only need these headers for `text/html` requests.
if (headers['content-type'][0]['value'].includes('text/html')) {
  headers['expect-ct'] = [{ key: 'Expect-CT', value: 'max-age=604800' }];
  headers['referrer-policy'] = [{ key: 'Referrer-Policy', value: 'strict-origin-when-cross-origin' }];
  headers['feature-policy'] = [{ key: 'Feature-Policy', value: "camera 'none'; geolocation 'self'; usb 'none'" }];

  // Exclude all /lab content
  if (!request.uri.startsWith('/lab')) {
    headers['content-security-policy'] = [{ key: 'Content-Security-Policy', value: "default-src 'self';" }];
  }

  // Target /lab/7z
  if (request.uri.startsWith('/lab/7z')) {
    headers['content-security-policy'] = [{ key: 'Content-Security-Policy', value: "default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' www.7-zip.org;" }];
  }
}

Bonus: you can do many things on Lambda, like fixing wrong content-type sent by CloudFront:

const path = require('path');
const request = event.Records[0].cf.request;

if (typeof headers['content-type'] !== 'undefined') {

  // ...other stuff here

  // Fix wrong MIME headers for woff2
  if (path.extname(request.uri).startsWith('.woff2')) {
    headers['content-type'] = [{ key: 'Content-Type', value: "application/font-woff2" }];
  }
}

Additional loot: You’d better test your code with AWS Lambda builtin test events. Or you may break your site with these security headers.

HSTS for Amazon CloudFront

2017-11-13T00:00:00+08:00

As we know Amazon CloudFront doesn’t support HSTS (HTTP Strict Transport Security) headers. If you tried adding it via CLI or web console, it will be prefixed with x-amz-.

But today we’re now able to use AWS Lambda@Edge to execute functions that customize the content that is delivered through CloudFront.

You can access AWS Lambda via its web console, then create (author) a function from scratch, create a new role from template Basic Edge Lambda permissions, then use the following code:

'use strict';
exports.handler = (event, context, callback) => {
  const response = event.Records[0].cf.response;
  const headers = response.headers;

  headers['strict-transport-security'] = [{
    key: 'Strict-Transport-Security',
    value: 'max-age=31536000; includeSubdomains; preload'
  }];

  callback(null, response);
};

The above code snippet is straightforward: simply add the Strict-Transport-Security we need and return the modified header to edge nodes. Then you can publish a new version, create a CloudFront trigger using Distribution ID for the distribution you want to apply this header. Make sure to select Origin Response for your Lambda function to listen for.

Once this is submitted new headers will take effect as expected:

$ curl -I https://sparanoid.com/
HTTP/1.1 200 OK
Content-Type: text/html; charset=utf-8
Content-Length: 6816
Connection: keep-alive
Strict-Transport-Security: max-age=31536000; includeSubdomains; preload
Age: 9128
Cache-Control: public, max-age=1800, immutable
...

Updated Mar 21, 2018: Now Amazon Web Services has an official documentation for this feature: Adding HTTP Security Headers Using Lambda@Edge and Amazon CloudFront .

Omnibox NCR

2016-11-16T00:00:00+08:00

Intro

This extension, will force using google.com (aka Google No Country Redirect) when you search in Google Chrome Omnibox.

If you travel a lot, or you just care about privacy and use proxy to hide your real IP from another country, imagine you’re in China and using a Japanese proxy, Google always redirects you to google.co.jp when you search in Google Chrome Omnibox. This extension could definitely make your browser stick with google.com.

Under the Hood

This extension simply replace the URL you request before onBeforeRequest to google.com, no additional internet request will be made since the replace process will be done in 307 Internal Redirect.

Downloads

Add to Chrome

View source at GitHub

Love this?

Please consider buying me a cup of coffee.

IKEA Stock Availability Checker

2016-04-06T00:00:00+08:00

Intro

Get all stock availability for current IKEA product in your selected country.

Aug 31, 2020: IKEA has updated its website with a new API and a new method to get the stock information. We can now query stock availability more simply and cleanly. So I will no longer update this extension.

Downloads

Add to Chrome

Love this?

Please consider buying me a cup of coffee.

Lightense Images

2016-03-10T00:00:00+08:00

A dependency-free pure JavaScript image zooming library less than 2 KB (gzipped). Inspired by fat/zoom.js and tholman/intense-images.

This library is mainly used by Almace Scaffolding.

Features

High performance
One script, no additional dependencies, no bloated styles
Safari backdrop-filter support
2 KB gzipped

Install

$ npm install lightense-images --save
$ yarn add lightense-images

Or download library and save it to your project
Or host it on a CDN and reference it via <script></script> tag

The Lightense library is wrapped in Universal Module Syntax (UMD), this means that out of the box, you can include it into your web application via <script></script> tag, import Lightense from 'lightense-images', or require('lightense-images').

Usage

Configuration object:

Lightense(elements, {
  time: 300,
  padding: 40,
  offset: 40,
  keyboard: true,
  cubicBezier: 'cubic-bezier(.2, 0, .1, 1)',
  background: 'rgba(255, 255, 255, .98)',
  zIndex: 2147483647
});

Inline data configurations:

<img src="image.png"
  data-lightense-padding="40"
  data-lightense-cubic-bezier="cubic-bezier(.2, 0, .1, 1)"
  data-lightense-background="rgba(255, 255, 255, .98)"
  data-lightense-z-index="2147483647">

Setup

<img src="photo.jpg">
<script>
  window.addEventListener('load', function () {
    Lightense('img');
  }, false);
</script>

Custom Background Color

<img src="screenshot.png" data-lightense-background="rgba(0, 0, 0, .96)">

Custom Padding

<img src="screenshot.png" data-lightense-padding="0">

Disable Lightense for Specific Elements

<img src="photo.jpg" class="no-lightense">
<script>
  window.addEventListener('load', function () {
    Lightense('img:not(.no-lightense)');
  }, false);
</script>

Custom Event Hooks

<img
  src="https://d349cztnlupsuf.cloudfront.net/girls_dead_monster_logo.png"
  before-show-alert="Showing!"
  after-show-alert="Showed!"
  before-hide-alert="Hiding!"
  after-hide-alert="Hidden!"
/>
<script>
  window.addEventListener("load", function() {
    Lightense("img:not(.no-lightense),.lightense", {
      beforeShow(config) {
        var beforeShowAttr = config.target.getAttribute("before-show-alert");
        beforeShowAttr && alert(beforeShowAttr);
      },
      afterShow(config) {
        var afterShowAttr = config.target.getAttribute("after-show-alert");
        afterShowAttr && alert(afterShowAttr);
      },
      beforeHide(config) {
        var beforeHideMessage = config.target.getAttribute("before-hide-alert");
        beforeHideMessage && alert(beforeHideMessage);
      },
      afterHide(config) {
        var afterHideMessage = config.target.getAttribute("after-hide-alert");
        afterHideMessage && alert(afterHideMessage);
      }
    });
  }, false);
</script>

Download

Github

Browser Support

All modern browsers, it “should work” in Internet Explorer 10 and up as well.

Love this?

Please consider buying me a cup of coffee.

DMARC

2015-12-27T00:00:00+08:00

DMARC (Domain-based Message Authentication, Reporting & Conformance) is a greatest advance in email authentication. DMARC can help you monitor fraudulent or spoofing emails from untrusted sources, or even block these spam before it reaches the inbox (spam box).

Postmark provides a DMARC analytics service which will send you a weekly report digest about emails sending from your domain.

After setting up DMARC record, you can use the following command to verify your record:

$ dig +short _dmarc.sparanoid.com txt

Then you can send fake emails to test if your DMARC record works:

Authentication-Results: mx.google.com;
       spf=softfail (google.com: domain of transitioning t@sparanoid.com does not designate 12.34.56.78 as permitted sender) smtp.mailfrom=t@sparanoid.com;
       dmarc=fail (p=NONE dis=NONE) header.from=sparanoid.com

When you set p=quarantine in your DMARC record your fake emails would be marked as spam:

Authentication-Results: mx.google.com;
       spf=softfail (google.com: domain of transitioning t@sparanoid.com does not designate 12.34.56.78 as permitted sender) smtp.mailfrom=t@sparanoid.com;
       dmarc=fail (p=QUARANTINE dis=QUARANTINE) header.from=sparanoid.com

And you will get the following warning in Gmail web app:

Why is this message in Spam? It has a from address in sparanoid.com but has failed sparanoid.com’s required tests for authentication.

You can also set p=reject to delete the message even before it reaches the user’s inbox. All emails fail the DMARC authentication will be rejected and never reach the inbox or spam box.

If everything goes well you should get the all-pass result, a test email sent from Postmark:

Authentication-Results: mx.google.com;
       spf=pass (google.com: domain of pm_bounces@dmarc.sparanoid.com designates 12.34.56.78 as permitted sender) smtp.mailfrom=pm_bounces@dmarc.sparanoid.com;
       dkim=pass header.i=@sparanoid.com;
       dmarc=pass (p=QUARANTINE dis=NONE) header.from=sparanoid.com

You can read more information about DMARC at dmarc.org.

HTTP/2 and ECDSA Cipher Suites

2015-10-16T00:00:00+08:00

If you’re using an ECC certificate with HTTP/2, you may get the following error from Google Chrome:

ERR_SPDY_INADEQUATE_TRANSPORT_SECURITY

If you googled about it you will finally find the following HTTP/2 requirements:

A deployment of HTTP/2 over TLS 1.2 SHOULD NOT use any of the cipher suites that are listed in the cipher suite black list (Appendix A).

and…

The black list includes the cipher suite that TLS 1.2 makes mandatory, which means that TLS 1.2 deployments could have non-intersecting sets of permitted cipher suites. To avoid this problem causing TLS handshake failures, deployments of HTTP/2 that use TLS 1.2 MUST support TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256 [TLS-ECDHE] with the P-256 elliptic curve [FIPS186].

So you need the following cipher suite at the beginning of your suites:

ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256

In my case if you’re using an ECC certificate you will need:

ssl_ciphers ECDHE-ECDSA-AES128-GCM-SHA256

According to the specs:

Note that clients might advertise support of cipher suites that are on the black list in order to allow for connection to servers that do not support HTTP/2. This allows servers to select HTTP/1.1 with a cipher suite that is on the HTTP/2 black list. However, this can result in HTTP/2 being negotiated with a black-listed cipher suite if the application protocol and cipher suite are independently selected.

You can use black-listed cipher suites for backward compatibility.

Public Key Pinning / HPKP Reporting

2015-09-16T00:00:00+08:00

(HTTP) Public Key Pinning (HPKP) allows websites to send an HTTP header instructing the browser to remember (or “pin”) parts of its SSL certificate chain. The browser will then refuse subsequent connections that don’t match the pins that it has previously received.

As of September of 2015, both Google Chrome and Mozilla Firefox of any modern platforms support HTTP Public Key Pinning ¹. And Google Chrome supports HPKP reporting from the version 46 ².

Creating Pin Hashes

Things you should know:

The most secure public key to pin is your own site certificate key. But you should really take care of revoking or replacing certificate before the max-age you defined expires.
A simpler but less secure way is to use the first intermediate certificate from issued CA.
You must have two pin-sha256 hashes according to the RFC. The first one of the hashes should be valid and matched your current certificate, the second should be the hash of your backup certificate which should not be in your current certificate chain. That means even a fake pin would work in this scenario.

Let’s pin site certificate key for better security:

$ openssl rsa -in my.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64

If signed via ECDSA (i.e. COMODO ECC):

$ openssl ec -in my.key -outform der -pubout | openssl dgst -sha256 -binary | openssl enc -base64

Adding Header for Nginx

Once you got the pins add the following line to Nginx:

add_header Public-Key-Pins 'pin-sha256="ABCD"; pin-sha256="EFGI"; max-age=86400';

Test HPKP

If everything is right, you can get the result from chrome://net-internals/#hsts in Google Chrome:

dynamic_sts_domain: ci.sparanoid.com
dynamic_upgrade_mode: STRICT
dynamic_sts_include_subdomains: true
dynamic_sts_observed: 1443522549.33342
dynamic_pkp_domain: ci.sparanoid.com
dynamic_pkp_include_subdomains: true
dynamic_pkp_observed: 1443522549.333427
dynamic_spki_hashes: sha256/6X0iNAQtPIjXKEVcqZBwyMcRwq1yW60549axatu3oDE=,sha256/klO23nT2ehFDXCfx3eHTDRESMz3asj1muO+4aIdjiuY=

You can also see if Public Key Pinning is enabled from Web Inspector in Mozilla Firefox.

HPKP Reporting

At the time of writing, Google Chrome already supports HPKP reporting, so can test it with a report-only header and a fake primary pin, I recommend Report URI or RequestBin for collecting requests:

add_header Public-Key-Pins-Report-Only 'pin-sha256="FAKE"; pin-sha256="EFGI"; max-age=86400; report-uri="https://get.report-uri.com/r/d/hpkp/reportOnly"';

`max-age` Best Practice

According to RFC:

As mentioned in Section 2.3.3, UAs MAY cap the max-age value at some upper limit. There is a security trade-off in that low maximum values provide a narrow window of protection for users who visit the Known Pinned Host only infrequently, while high maximum values might result in a UA’s inability to successfully perform Pin Validation for a Known Pinned Host if the UA’s noted Pins and the host’s true Pins diverge.

See “Browser compatibility” section – Public Key Pinning - MDN ↩︎
HPKP reporting, shipping in Chrome 46, is a feature that you can use to detect misconfigurations as you’re rolling out HPKP. – Rolling out Public Key Pinning with HPKP Reporting — Google Web Updates ↩︎

Almace Scaffolding

2015-09-09T00:00:00+08:00

AMSF, a.k.a. Almace Scaffolding, is a super-fast Jekyll framework, supports live reloading (Browsersync), Less, HTML minification, inlined stylesheets and more.

Go to the project page for more information.

◉ Direct Link to Original Site

Slimpack

2015-09-08T00:00:00+08:00

This plugin is no longer maintained.

Slimpack — Lightweight Jetpack. Super-fast performance without modules that require contracting WordPress.com.

It provides better performance than original Jetpack. All features that require a WordPress.com account or need contracting / syncing back to WordPress.com servers have been removed. You don’t need to connect to WordPress.com to use this plugin. If your site got slow response time (TTFB) after activating the original Jetpack, you should definitely try out this plugin.

Features

Transfer from Jetpack to Slimpack seamlessly, just deactivate Jetpack and activate Slimpack, all settings and module status will be kept and work just like before.
All source code is untouched and synced from Jetpack
Better performance than original Jetpack. All features that require a WordPress.com account have been removed. You don’t need to connect to WordPress.com to use this plugin.
Multilingual support (and languages have already bundled in Slimpack!)

Download it at WordPress.org

Love this plugin? please consider buying me a cup of coffee.

◉ Direct Link to Original Site

CloudFront Cost Control

2015-08-30T00:00:00+08:00

If you’re using CloudFront to serve your website, here’s some tips that can help reduce the cost.

Here’s a output sample of my deploy script:

$ make
[info] Deploying /Sites/sparanoid.com/* to sparanoid.com
[succ] Updated lab/amsf/assets/css/app.css
[succ] Updated lab/amsf/assets/js/custom.js
[succ] Updated lab/amsf/assets/themes/curtana/js/intense.js
[succ] Invalidated 3 items on CloudFront
[info] Summary: Updated 3 files. Transferred 15.2 kB, 8.0 kB/s.

The invalidation price will be high if you like me, deploy sites via git hooks so every time you deploy sites to CloudFront the invalidation triggers. So here’s a workaround way to avoid invalidation but also refresh caches for users.

File hashes to the rescue.

Here’s another output sample of optimized deploy script:

$ make
[info] Deploying /Sites/sparanoid.com/* to sparanoid.com
[succ] Deleted lab/amsf/assets/css/app.css
[succ] Deleted lab/amsf/assets/js/custom.js
[succ] Deleted lab/amsf/assets/themes/curtana/js/intense.js
[succ] Created lab/amsf/assets/css/app.17b3a8ad.css
[succ] Created lab/amsf/assets/js/custom.53609257.js
[succ] Created lab/amsf/assets/themes/curtana/js/intense.5797aa35.js
[info] Summary: Created 3 files. Deleted 3 files. Transferred 15.2 kB, 8.2 kB/s.

There’s no invalidation anymore, The cost of invalidation requests is first 1,000 paths free, then $0.005 per path. For example if you deploy your sites for client preview, let’s say 20 there’re 10 deploys per day with an average of 20 files (CSS, scripts and images) per deploy, all done automatically via git hooks. You will have 200 invalidations per day. 1000 for five days then you’ll run out of free tier. you have to pay $5 per 1000 request if you continue requesting invalidations.

So in my current setup, I use grunt-cache-bust to hash files. All file references will be updated automatically via Grunt task.

Update Jun 19, 2016

With recent update of AWS CloudFront, you can now use the * wildcard to invalidate files. In my case, I can just invalidate the whole distribution on the root with only one invalidation request:

{
    "Invalidation": {
        "Status": "Completed",
        "InvalidationBatch": {
            "Paths": {
                "Items": [
                    "/*"
                ],
                "Quantity": 1
            },
            "CallerReference": "s3_website gem 1466341232813"
        },
        "Id": "I3CS10X18L9R4R",
        "CreateTime": "2016-06-19T13:00:32.999Z"
    }
}

Compared to:

{
    "Invalidation": {
        "Status": "Completed",
        "InvalidationBatch": {
            "Paths": {
                "Items": [
                    "/lab/amsf/feed.json",
                    "/lab/amsf/feed.xml",
                    "/lab/amsf/404.html",
                    "/lab/amsf/markup-example.html",
                    "/lab/amsf/creating-themes.html",
                    "/lab/amsf/getting-started.html",
                    "/lab/amsf/custom-css.html",
                    "/lab/amsf/external-link-post.html",
                    "/lab/amsf/github-pages-setup.html",
                    "/lab/amsf/markdown-features-test.html",
                    "/lab/amsf/theme-curtana.html",
                    "/lab/amsf/multiple-themes-support.html",
                    "/lab/amsf/themes.html",
                    "/lab/amsf/syntax-highlighting.html",
                    "/lab/amsf/news/",
                    "/lab/amsf/configuration.html",
                    "/lab/amsf/custom-html-markups.html",
                    "/lab/amsf/svg-post-title.html",
                    "/lab/amsf/sitemap.xml",
                    "/lab/amsf/welcome.html",
                    "/lab/amsf/robots.txt",
                    "/lab/amsf/about/",
                    "/lab/amsf/deployment-methods.html",
                    "/lab/amsf/",
                    "/lab/amsf/customizing-styles.html",
                    "/lab/amsf/custom-color-scheme.html",
                    "/index.html"
                ],
                "Quantity": 27
            },
            "CallerReference": "s3_website gem 1466264746013"
        },
        "Id": "I3EAPBBE5NHVC6",
        "CreateTime": "2016-06-18T15:45:46.216Z"
    }
}

1 vs 27, and according to the AWS docs:

The first 1,000 invalidation paths that you submit per month are free; you pay for each invalidation path over 1,000 in a month. An invalidation path can be for a single object (such as /images/logo.jpg) or for multiple objects (such as /images/*). A path that includes the * wildcard counts as one path even if it causes CloudFront to invalidate thousands of objects.

So this update could dramatically reduce your invalidation cost.

Apple Music Playlists

2015-08-21T00:00:00+08:00

Here’s my custom hand-picked Apple Music playlists! More coming soon.

Dance Enhanced

A curated list of awesome dance music for coding and doing workout.

ダンスエンハンスト

Dance Enhanced Japanese version, not available at the moment…

Voice Memos

My personal voice memos, not public available of course. One interesting thing is that the cover got overridden every time I update memos from my iPhone.

Ansible Advanced lineinfile

2015-08-16T00:00:00+08:00

Ansible is great, it’s really simple to setup and easy to use. There are still some hidden tricks that can make your workflow more efficient.

I was setting up new machines with PHP-FPM support. I’d like to change several FPM parameters using Ansible, you can copy (transfer) the whole configurations from your Ansible task to remote machines via synchronize or template, it’s fast but you can’t handle config changes from program updates. So my idea is dynamically replace the parameters I want to change via lineinfile:

After googling around, I found this answer by Ben Whaley fit the bill:

- name: Set some kernel parameters
  lineinfile:
    dest: /etc/sysctl.conf
    regexp: "{{ item.regexp }}"
    line: "{{ item.line }}"
  with_items:
    - { regexp: '^kernel.shmall', line: 'kernel.shmall = 2097152' }
    - { regexp: '^kernel.shmmax', line: 'kernel.shmmax = 134217728' }
    - { regexp: '^fs.file-max', line: 'fs.file-max = 65536' }

That snippet works but it’s tedious. regexp and line has the duplicated parameter key names, let’s clean up the code:

- name: set PHP-FPM parameters
  lineinfile:
    dest: /etc/php-fpm.conf
    regexp: "^{{ item.param }}"
    insertafter: "^;{{ item.param }}"
    line: "{{ item.param }} = {{ item.value }}"
  with_items:
    - { param: 'error_log', value: '/var/log/php-fpm/error.log' }
    - { param: 'log_level', value: 'error' }
    - { param: 'emergency_restart_threshold', value: '10' }

Everything works fine untill I meet the following config:

php_value[session.save_handler] = 'files'

I can’t target keys like this with previous regexp, and cannot match square brackets directly or Ansible will fall running this task. So I have to escape speciall characters:

- name: set PHP-FPM pool parameters
  lineinfile:
    dest: /etc/php-fpm.d/www.conf
    regexp: '^{{ item.param|replace("[", "\[")|replace("]", "\]") }} *?='
    insertafter: '^;{{ item.param|replace("[", "\[")|replace("]", "\]") }} *?='
    line: "{{ item.param }} = {{ item.value }}"
  with_items:
    - { param: 'php_value[session.save_handler]', value: 'memcache' }
    - ...

Cool for the summer.

Ansible

2015-05-19T00:00:00+08:00

I’ve been looking for a simple way to handle my servers with a centralized management tool for a long time. I’ve tried Chef, Puppet, Salt, and Ansible, and finally I chose Ansible, here’s why:

YAML-based syntax and configuration templates, really easy to set up and get running
No slaves (agents) requred on managed servers

I’m not a pro DevOps or a “full-stack” engineer, so I only need a tool like that that can help me update / install programs, update Nginx configurations, and do other repetitive work. Ansible seems to fit the bill.

If you have never tried Ansible and don’t know what can be done with it, check out my first Ansible Playbook.

Amazon S3 × CloudFront

2015-04-27T00:00:00+08:00

Previously this site was hosted on a Linode VPS, handling thousands of requests a day. It’s stable, fast, and has a great support team. But this time I would like to try something new - host my website entirely in the cloud.

The first cloud provider that came to my mind was Amazon S3 and CloudFront. Back in 2010, I tried this combination with no luck. The web hosting feature of S3 was not as expected, and CloudFront did not support custom domain SSL and the apex (root) domain was also not supported. But now I’m happy to see all these features implemented and so I’m going to try this approach again.

Please note that this is not a detailed tutorial about how to host your website on Amazon S3 and CloudFront, but my personal notes about setup pitfalls.

Transfer everything to the Cloud?

There are two methods you can choose - host static files on Amazon S3 and speed up using CloudFront, or host your website on a remote server using CloudFront as custom origin proxy. Both of these have their pros and cons:

Amazon S3 + CloudFront means you do not have to buy additional servers to host your website, but you have to do more work to ensure your website behaves the same as before. For example, you cannot use /feed/ (/feed/index.xml) as your feed URL because you can set only one Document Index per bucket. If you’re using /feed/ then you have to redirect it to something similar to feed.xml. Gzip is also not a native feature on S3. You have to compress it manually or use other tools (I will talk about it later).

Update Dec 19, 2015: Amazon finally added Gzip compression support for CloudFront. You can now simply turn on this feature in AWS console or via CLI.

Using Amazon CloudFront with custom origin means you still need servers to store your files. You will have more control with your website, for example, you can use Nginx with complex redirects, your website can be dynamic, and CloudFront works just like a proxy. However, the downside is the cache control which can be tricky. You cannot use invalidation with the existing tools and you have to set separate cache control headers s-maxage for CloudFront.

To make things simple, I use Amazon S3 with CloudFront.

Move files to Amazon S3

The easiest way is using s3_website. It can help you handle file headers, invalidations, and redirects.

Here’s a part of my s3_website.yml config:

s3_bucket: sparanoid.com
max_age:
  "index.html": 600
  "*.css":      2592000
  "*.js":       2592000
  "*.jpg":      31536000
  "*.woff2":    31536000
  "*":          86400

You can also define the files to be ignored:

exclude_from_upload:
  - (?:\.(?:DS_Store|bak|config|sql|fla|psd|ai|sketch|ini|log|sh|inc|swp|dist))$

For more information please refer s3_website’s documentation.

Fixing wrong feed URL

As discussed before, you cannot use /feed/ (/feed/index.xml) as your feed URL because you can set only one Document Index per bucket. Amazon S3 does not redirect it to a file other than Document Index (i.e. index.html). You have to make a redirect from /feed/ or /rss/ to feed.xml or rss.xml that directly points to the file. This is performed by the following two steps:

First redirect /feed to /feed.xml in s3_website.yml:

redirects:
  feed: feed.xml

Then redirect /feed/ to /feed.xml in AWS web console:

<RoutingRules>
    <RoutingRule>
        <Condition>
            <KeyPrefixEquals>feed/</KeyPrefixEquals>
        </Condition>
        <Redirect>
            <HostName>sparanoid.com</HostName>
            <ReplaceKeyPrefixWith>feed.xml</ReplaceKeyPrefixWith>
        </Redirect>
    </RoutingRule>
</RoutingRules>

Update Sep 11, 2015: actually you can define routing rules directly in s3_website.yml:

routing_rules:
  - condition:
      key_prefix_equals: feed/
    redirect:
      host_name: sparanoid.com
      replace_key_prefix_with: feed.xml
      http_redirect_code: 301

Then run s3_website cfg apply to update redirects.

Redirect www to non-www

You have to create an empty separate S3 bucket and redirect all requests to your root domain. Refer official documentation. This can be set under your bucket properties panel.

Enable CloudFront

The only thing you should be aware of is that the Origin Domain Name should be pointing to your S3 endpoint and not to the bucket URL.

CloudFront + Custom SSL

Update: As of Jan 21, 2016, you can now use Amazon CloudFront Integrates with AWS Certificate Manager (More like a Let’s Encrypt competitor focused on AWS), which can help you issue, manage, and renew SSL/TLS certificates at no extra cost.

The following is the deprecated IAM method:

Amazon has a very detailed documentation about using HTTPS with custom SSL certificates and it’s hard to get the key points. So here’s a brief answer:

$ aws iam upload-server-certificate --server-certificate-name sparanoid.com --certificate-body file:///path/cert.crt --private-key file:///path/private.key.pem --certificate-chain file:///path/intermediates.chained.crt --path /cloudfront/prod/

Please note that private-key should be in PEM format. If you get the following error:

A client error (MalformedCertificate) occurred when calling the UploadServerCertificate operation: Unable to parse certificate. Please ensure the certificate is in PEM format.

Then try:

$ openssl rsa -in private.key -out private.key.pem

If you get the following message, then it must be something wrong with your chained intermediate certificates:

A client error (MalformedCertificate) occurred when calling the UploadServerCertificate operation: Unable to validate certificate chain. The certificate chain must start with the immediate signing certificate, followed by any intermediaries in order. The index within the chain of the invalid certificate is: 1

The fix is simple - you should only chain your intermediate certificates without the domain certificate and this is different with the Nginx ssl_certificate directive:

$ cat COMODORSADomainValidationSecureServerCA.crt COMODORSAAddTrustCA.crt > intermediates.chained.crt

Please also note that all certs should start with file:// protocol if they’re on your local machine.

If everything is right you will get the following response:

{
    "ServerCertificateMetadata": {
        "ServerCertificateId": "ASCAxxxxxxxxxxxxxxZ7S",
        "ServerCertificateName": "sparanoid.com",
        "Expiration": "2018-04-26T23:59:59Z",
        "Path": "/cloudfront/prod/",
        "Arn": "arn:aws:iam::677998837349:server-certificate/cloudfront/prod/sparanoid.com",
        "UploadDate": "2015-04-27T03:54:45.807Z"
    }
}

Then you can enable the Custom SSL Certificate stored in your AWS IAM from the web console.

Notes:

The size of the public key in the SSL certificate cannot exceed 2048 bits ¹.
As of October of 2015, you still can’t use ECC certificate (ECDSA cipher suites) for CloudFront ².

Update SSL Certificate

If the certificate you’re using is expiring, you need first upload the new certificate with a different server-certificate-name, change the expiring certificate to the new one, then you can optionally remove the old certificate with aws iam delete-server-certificate. You can also list all existing certificates via aws iam list-server-certificates.

See “Determining the Size of the Public Key in an SSL Certificate” section in Using an HTTPS Connection to Access Your Objects - Amazon CloudFront ↩︎
See “Encryption” in Request and Response Behavior for Custom Origins - Amazon CloudFront ↩︎

iTunes Artwork Grabber

2015-04-21T00:00:00+08:00

(Yet Another) iTunes Artwork Grabber

Intro

Get high-res artwork for apps, music, books, movies, TV shows, podcasts and more, all types supported. Works with Safari, Google Chrome, and Greasemonkey / Tampermonkey / Scriptish / etc.

Supported Types

iOS app icons
OS X app icons
Music album covers
Music video thumbnails
Book covers
Movie posters
TV show covers
Podcast covers
iTunes U resource covers
Audiobook covers

Unsupported Types

None! (since Nov 27, 2016)

Demo

Try this fancy video demo.

Downloads

Add to Chrome

Download via Greasy Fork

View source at GitHub

Love this?

Please consider buying me a cup of coffee.

Shutdown Like a Boss

2015-01-02T00:00:00+08:00

This blog will probably teach you how to shutdown your business like a boss. All posts here are copied from predecessors sent to their useless users via emails.

A new Tumblr blog I created for fun.

◉ Direct Link to Original Site

Chinese Copywriting Guidelines

2014-10-31T00:00:00+08:00

Chinese copywriting guidelines for better written communication.

Other languages available.

Table of Contents
Spacing
Punctuation
- Avoid duplicate punctuation
Fullwidth and halfwidth
Nouns
- 專有名詞使用正確的大小寫
- Avoid jargons
Dispute
- Add extra spaces before/after links
- Use corner brackets for Chinese Simplified
Tools
Examples of “Who is doing this?”
References

Spacing

「有研究顯示，打字的時候不喜歡在中文和英文之間加空格的人，感情路都走得很辛苦，有七成的比例會在 34 歲的時候跟自己不愛的人結婚，而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。

與大家共勉之。」——vinta/paranoid-auto-spacing

Place one space before/after English words

Good:

在 LeanCloud 上，數據存儲是圍繞 AVObject 進行的。

Bad:

在LeanCloud上，數據存儲是圍繞AVObject進行的。

在 LeanCloud上，數據存儲是圍繞AVObject 進行的。

An example of complete and correct usage:

在 LeanCloud 上，數據儲存是圍繞 AVObject 進行的。每個 AVObject 都包含了與 JSON 兼容的 key-value 對應的數據。數據是 schema-free 的，你不需要在每個 AVObject 上提前指定存在哪些键，只要直接設定對應的 key-value 即可。

Exceptions: For product and brand names, please refer to the writing format of the official definition. For example, use “豆瓣FM” instead of “豆瓣 FM”.

Place one space before/after numbers

Good:

今天出去買菜花了 5000 元。

Bad:

今天出去買菜花了 5000元。

今天出去買菜花了5000元。

Place one space between numbers and units

Good:

我家的光纖入屋寬頻有 10 Gbps，SSD 一共有 20 TB。

Bad:

我家的光纖入屋寬頻有 10Gbps，SSD 一共有 20TB。

Exceptions: There should not be any spacing between numbers and degrees/percentages.

Good:

今天是 233° 的高溫。

新 MacBook Pro 有 15% 的 CPU 性能提升。

Bad:

今天是 233 ° 的高溫。

新 MacBook Pro 有 15 % 的 CPU 性能提升。

No additional spaces before/after punctuation in fullwidth form

Good:

剛剛買了一部 iPhone，好開心！

Bad:

剛剛買了一部 iPhone ，好開心！

剛剛買了一部 iPhone，好開心！

`text-spacing` to the rescue?

text-spacing and -ms-text-autospace provided by CSS Text Module Level and Microsoft can specify the autospacing and narrow space width adjustment of text. However it’s not popular, and on other platforms such as OS X and iOS we can not use this feature. So it’s better for you to keep up the habit.

Punctuation

Avoid duplicate punctuation

Good:

德國隊竟然戰勝了巴西隊！

她竟然對你說「喵」？！

Bad:

德國隊竟然戰勝了巴西隊！！

德國隊竟然戰勝了巴西隊！！！！！！！！

她竟然對你說「喵」？？！！

她竟然對你說「喵」？！？！？？！！

Fullwidth and halfwidth

If you’re not familiar with fullwidth and halfwidth forms please refer to Halfwidth and fullwidth forms on Wikipedia.

Use punctuation in fullwidth form

Good:

嗨！你知道嘛？今天前台的小妹跟我說「喵」了哎！

核磁共振成像（NMRI）是什麼原理都不知道？JFGI！

Bad:

嗨! 你知道嘛? 今天前台的小妹跟我說 “喵” 了哎!

嗨!你知道嘛?今天前台的小妹跟我說”喵”了哎!

核磁共振成像 (NMRI) 是什麼原理都不知道? JFGI!

核磁共振成像(NMRI)是什麼原理都不知道?JFGI!

Use numbers in halfwidth form

Good:

這件蛋糕只賣 1000 元。

Bad:

這件蛋糕只賣１０００元。

Exceptions: fullwidth numbers are acceptable for better visual alignment in graphic design.

Use punctuation in halfwidth form for English sentences

Good:

賈伯斯那句話是怎麼說的？「Stay hungry, stay foolish.」

推薦你閱讀《Hackers & Painters: Big Ideas from the Computer Age》，非常的有趣。

Bad:

賈伯斯那句話是怎麼說的？「Stay hungry，stay foolish。」

推薦你閱讀《Hackers＆Painters：Big Ideas from the Computer Age》，非常的有趣。

Nouns

專有名詞使用正確的大小寫

大小寫相關用法原屬於英文書寫範疇，不屬於本 wiki 討論內容，在這裡只對部分易錯用法進行簡述。

Good:

使用 GitHub 登錄

我們的客戶有 GitHub、Foursquare、Microsoft Corporation、Google、Facebook, Inc.。

Bad:

使用 github 登錄

使用 GITHUB 登錄

使用 Github 登錄

使用 gitHub 登錄

使用 gｲんĤЦ8 登錄

我們的客戶有 github、foursquare、microsoft corporation、google、facebook, inc.。

我們的客戶有 GITHUB、FOURSQUARE、MICROSOFT CORPORATION、GOOGLE、FACEBOOK, INC.。

我們的客戶有 Github、FourSquare、MicroSoft Corporation、Google、FaceBook, Inc.。

我們的客戶有 gitHub、fourSquare、microSoft Corporation、google、faceBook, Inc.。

我們的客戶有 gｲんĤЦ8、ｷouЯƧquﾑгє、๓เςг๏ร๏Ŧt ς๏гק๏гคtเ๏ภn、900913、ƒ4ᄃëв๏๏к, IПᄃ.。

注意：當網頁中需要配合整體視覺風格而出現全部大寫／小寫的情形，HTML 中請使用標準的大小寫規範進行書寫；並通過 text-transform: uppercase;／text-transform: lowercase; 對表現形式進行定義。

Avoid jargons

Good:

我們需要一位熟悉 JavaScript、HTML5，至少理解一種框架（如 Backbone.js、AngularJS、React 等）的前端開發者。

Bad:

我們需要一位熟悉 Js、h5，至少理解一種框架（如 backbone、angular、RJS 等）的 FED。

Dispute

The following usages comprise of personal characteristics. As such, from the perspective of copywriting guidelines, they are still correct regardless of whether they comply with the following rules.

Add extra spaces before/after links

Usage:

請提交一个 issue 並分配给相關同事。

訪問我們網站的最新動態，請點擊這裡進行訂閱！

compared with:

請提交一个 issue 並分配给相關同事。

訪問我們網站的最新動態，請點擊這裡進行訂閱！

Use corner brackets for Chinese Simplified

Usage:

「老師，『有條不紊』的『紊』是什麼意思？」

compared with:

“老師，‘有條不紊’的‘紊’是什麼意思？”

Tools

Repository	Language
vinta/paranoid-auto-spacing	JavaScript
huei90/pangu.node	Node.js
huacnlee/auto-correct	Ruby
sparanoid/space-lover	PHP (WordPress)
nauxliu/auto-correct	PHP
jxlwqq/chinese-typesetting	PHP
hotoo/pangu.vim	Vim
sparanoid/grunt-auto-spacing	Node.js (Grunt)
hjiang/scripts/add-space-between-latin-and-cjk	Python
hustcc/hint	Python
studygolang/autocorrect	Go

Examples of “Who is doing this?”

Website	Copywriting	UGC
Apple China	Yes	N/A
Apple Hong Kong	Yes	N/A
Apple Taiwan	Yes	N/A
Microsoft China	Yes	N/A
Microsoft Hong Kong	Yes	N/A
Microsoft Taiwan	Yes	N/A
LeanCloud	Yes	N/A
V2EX	Yes	Yes
Apple4us	Yes	N/A
Ruby China	Yes	Titles only
PHPHub	Yes	Titles only
少數派	Yes	N/A

References

◉ Direct Link to Original Site

Disable WYSIWYG

2014-09-08T00:00:00+08:00

You clients are always using the crappy visual editor in your WordPress? They always paste shitty formatted texts from the internet? They also edit your posts and fuck it up? Then you should try this plugin.

Disable WYSIWYG sets user_can_richedit to false that disables TinyMCE Visual Editor (WYSIWYG editor) totally completely permanently forever. This plugin also works fine with multisite enabled WordPress (aka. WordPress Mu). If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

◉ Direct Link to Original Site

AVOS Cloud

2014-05-16T00:00:00+08:00

AVOS Cloud, one of the most famous Chinese local (m)BaaS platform. Me and the whole team have been working on this project since last year. Now it’s a spin-off of AVOS Systems, Inc. focuses on tech startups and local companies in China.

I’m working on this site as a “hybird” designer to create eye-catching interactions and provide easy-to-use dashboard for every developer.

AVOS Cloud Homepage

The background cubes are animated and written in pure CSS, the color schemes of the page can also be changed according to different slices. You can check out this pen for a simple 3D cubes demo.

AVOS Cloud Features Page

A full features list providing Overview, How it Works, and Resources.

AVOS Cloud Pricing Page

The pricing modal can slide out without redirecting to another page. Color schemes of this modal are dynamic, too.

◉ Direct Link to Original Site

Space Lover

2014-03-26T00:00:00+08:00

This plugin magically adds an extra space between Chinese characters and English letters / numbers / common punctuation marks. A must-have plugin if you’re running a Chinese blog. This plugin also works fine with multisite enabled WordPress (aka. WordPress Mu).

No options, no additional database inserts, no stupid banners and shitty ads, install and go.

你客戶／合作夥伴不光文案寫的爛，而且還不會排版？Space Lover 可以幫到你。它會神奇的在中文、日文和英文、數字、符號之間自動加入空白，讓客戶網站的文案、文章看上去規範整潔。

無選項、無 MySQL 插入，無廣告，安裝即用。

覺得這招治標不治本？也可以試試 Chinese Copywriting Guidelines，讓你的客戶／合作夥伴學會如何正確的排版。

# Before
今天出去買菜花了5000元

# After
今天出去買菜花了 5000 元

Compatible with multisite?

Yes.

Can I activate Space Lover and Space Lover Lite at the same time?

Yes.

Differences between Space Lover and Space Lover Lite?

The new Space Lover (since v1.0.5) uses PHP regex to replace output contents.
Space Lover Lite just inserts one script to dynamic add spaces.
Space Lover changes your post output in your themes, RSS output
Space Lover Lite only changes what you see, the post output is untouched, so you’ll still get original post contents in your RSS feeds, however this method is slightly safer than Space Lover.

Space Lover 與 Space Lover Lite 的區別？

新版 Space Lover（v1.0.5）使用 PHP 的正則替換文章的輸出內容
Space Lover Lite 只插入 JavaScript 腳本，動態添加空格
Space Lover 會修改所有文章的輸出形式，例如用戶所看到的頁面，RSS 輸出等
Space Lover Lite 只會改變您在網站上看到的形式，而文章本身的內容是沒有被修改過的，所以使用此擴展時，RSS 的輸出並不會產生變化，唯一的優點是，這種方法與 Space Lover 比較相對安全，不會有內容被錯誤替換的可能。

If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

◉ Direct Link to Original Site

Moonstruck Princess Extended

2014-01-06T00:00:00+08:00

Moonstruck Princess Extended (Remix) version, click the images above to download the wallpapers. (4K, 5136 × 2160)

Delicious Redesign

2013-11-01T00:00:00+08:00

Delicious (aka. del.icio.us) is a social bookmarking web service for storing, sharing, and discovering web bookmarks that first launched back in 2003. In 2005 it was acquired by Yahoo! and later sold to AVOS Systems Inc. The website’s design hasn’t changed very much since its last redesign in 2011.

This year, to celebrate its 10th anniversary, AVOS invited me to join the Delicious team. I do designs and front-end stuff, collaborated with the developer Ning Sun (again) from AVOS on this project.

Update 2014 May: Delicious now has been acquired by Science Inc. ¹

Update 2017 June: Pinboard Acquires Delicious ²

Delicious New Logo

Delicious Iconset

Delicious UI Preview

Some fun facts:

Brand-new brighter version of Delicious logo. (Time took: 5 minutes)
No images used on this project. all styles are served by a ~23 KB gzipped CSS file. Hum, okay, there’s only one icon font and some SVG graphics and…
The new design is responsive, I even spent more time on the mobile viewport, or I can say, it’s a mobile-first design. Try it out on your iPhone, it works smooth and intuitive.
Delicious logo is made of pure CSS.
I didn’t write any vendor prefix for this project. (Or let me say: Autoprefixer rocks).
We use Application Cache to speed up the page load times.
We use Grunt.
I worked remotely (from home) for all these things.
The author of Mobile First, former Yahoo! design architect, Luke Wroblewski also tweeted about it.

Delicious Landing Page

Delicious Landing Page (Mouseover)

Delicious - Useful Tools

Delicious - Developing for Delicious

Delicious - About

Delicious - My Links

Delicious - Manage Subscriptions

Delicious - Search

Delicious - Edit a Link

Delicious - Mass Edit Links

Delicious - Keyboard Shortcuts

Science Inc., a tech advisory firm run by former Myspace chief Michael Jones, confirmed the deal in a blog post. ↩︎
Pinboard has acquired Delicious. Here’s what you need to know: Pinboard Acquires Delicious. ↩︎

◉ Direct Link to Original Site

Tianjin Project Revision

2013-10-29T00:00:00+08:00

This is just another revision for the original Tianjin Project, optimized for recently introduced iBooks for OS X. I also redesigned a new cover for it.

Read it on your Mac.

Index Overview

Bookmarks

Full-context Search

Glossary

Glossary List

Study Cards

You can also view the original version of this project.

IterCast

2013-08-07T00:00:00+08:00

IterCast (previous LinuxCast), An an online interactive education platform that offers coding courses in programming languages like Python, JavaScript, and Objective-C, database management courses such as MySQL and Oracle, Cisco Career certifications such as CCNA and CCNP Security, as well as markup languages such as HTML and CSS. All classes are free to everyone. I do design and front-end stuff for this project.

Update: this project is now been discontinued, but you can see a cached site from my website.

One of my favorite part of this project is the error pages, You really should check out the animated version:

◉ Direct Link to Original Site

OCSP Stapling and Nginx

2013-04-27T00:00:00+08:00

I’ve already deployed OCSP Stapling back in November, 2012. Now I’d like to share how to setup OCSP Stapling on CentOS with you.

Configurate OCSP for sparanoid.com. Get your current SSL certificates chain order:

$ openssl s_client -showcerts -connect sparanoid:443  ("level" c ".crt")} /---END CERTIFICATE-----/{inc=0}'

Print out the OCSP server:

$ openssl x509 -noout -text -in sparanoid.com.crt | grep OCSP

Validate certs against the OCSP server:

$ openssl ocsp -text -no_nonce -issuer PositiveSSLCA2.crt -CAfile sparanoid_com.crt -cert sparanoid_com.crt -VAfile PositiveSSLCA2.crt -url http://ocsp.comodoca.com -respout /etc/ssl/certs/sparanoid.com_staple

Add OCSP Stapling support for Nginx, for more infomation you should refer to Nginx’s ngx_http_ssl_module:

ssl_stapling            on;
resolver                8.8.8.8;
ssl_stapling_file       /etc/ssl/certs/sparanoid.com_staple;
ssl_stapling_verify     on;

Reload nginx to validate if OCSP Stapling is working:

$ openssl s_client -connect sparanoid.com:443 -tls1_2 -tlsextdebug -status

The Problem

Updated Jan 20, 2014, 6:29 PM: So far the above guide is not working any more, so what did I do wrong? Please recheck my configuration:

ssl_stapling_file       /etc/ssl/certs/sparanoid.com_staple;

The ssl_stapling_file configuration itself is not a problem. However, the problem is that the stapling response should be updated periodically. So the above configuration resulted an outdated OCSP response:

OCSP Response Data:
    OCSP Response Status: successful (0x0)
    ...
    Produced At: Apr 12 12:20:35 2013 GMT
    ...
    Cert Status: good
    This Update: Apr 12 12:20:35 2013 GMT
    Next Update: Apr 16 20:20:35 2013 GMT

The Solution

So how to solve this issue? You don’t need cron to fetch the stapling file, for example you can use the following configuration:

ssl_stapling            on;
ssl_stapling_verify     on;
resolver                8.8.8.8 8.8.4.4 valid=300s;
resolver_timeout        3s;
ssl_trusted_certificate /etc/nginx/ssl/ca/PositiveSSL-CA.bundle.crt;

Instead of defining ssl_stapling_file, use ssl_trusted_certificate will let Nginx update OCSP response automatically, so it’s recommended to define a failover DNS resolver and a small resolver timeout.

Notes

The ssl_trusted_certificate option must point to the root certificate and all intermediate certificates of the CA:

For verification to work, the certificate of the server certificate issuer, the root certificate, and all intermediate certificates should be configured as trusted using the ssl_trusted_certificate directive.

You can also enable OCSP Stapling for multiple server directives. However OCSP Stapling must be first enabled in the default_server directive before it can be enabled on any other directive.

SPDY Draft 2 and Nginx

2013-04-02T00:00:00+08:00

I’ve already deployed SPDY back in September, 2012. Now I’d like to share how to setup SPDY and OpenSSL on CentOS with you.

SPDY has a dependency with OpenSSL, and you also need the latest OpenSSL, the latest version is 1.0.1e as I wrote this post.

First install OpenSSL 1.0.1 from IUS repo for Nginx:

$ yum replace openssl --replace-with openssl10 --enablerepo ius-testing

The current stable version of Nginx still doesn’t support SPDY, you need to compile it from source, the latest Nginx version that supports SPDY is 1.3.14 with SPDY patch.

Aprl 25, 2013 update: SPDY patch has been merged into Nginx 1.4.0 and 1.3.15, so you don’t need to compile it any more, but you still need OpenSSL 1.0.1 or higher to make SPDY work.

Compile Nginx with SPDY support:

$ cd /tmp/
$ wget https://nginx.org/download/nginx-1.3.14.tar.gz
$ tar zxvf nginx-*.tar.gz
$ cd nginx-*

Install Nginx dependencies:

$ yum install -y patch gcc pcre-devel zlib-devel

Patch Nginx with SPDY support:

$ wget https://nginx.org/patches/spdy/patch.spdy.txt
$ patch -p1 < patch.spdy.txt

Compile Nginx with OpenSSL:

$ cd ..
$ wget https://www.openssl.org/source/openssl-1.0.1e.tar.gz
$ tar zxvf openssl-*.tar.gz
$ cd nginx-*

Configure Nginx with options --with-http_spdy_module and --with-openssl=/tmp/openssl-1.0.1e:

$ ./configure --prefix=/etc/nginx/ --sbin-path=/usr/sbin/nginx --conf-path=/etc/nginx/nginx.conf --error-log-path=/var/log/nginx/error.log --http-log-path=/var/log/nginx/access.log --pid-path=/var/run/nginx.pid --lock-path=/var/run/nginx.lock --http-client-body-temp-path=/var/cache/nginx/client_temp --http-proxy-temp-path=/var/cache/nginx/proxy_temp --http-fastcgi-temp-path=/var/cache/nginx/fastcgi_temp --http-uwsgi-temp-path=/var/cache/nginx/uwsgi_temp --http-scgi-temp-path=/var/cache/nginx/scgi_temp --user=nginx --group=nginx --with-http_ssl_module --with-http_realip_module --with-http_addition_module --with-http_sub_module --with-http_dav_module --with-http_flv_module --with-http_mp4_module --with-http_gzip_static_module --with-http_random_index_module --with-http_secure_link_module --with-http_stub_status_module --with-mail --with-mail_ssl_module --with-file-aio --with-ipv6 --with-cc-opt='-O2 -g -march=i386 -mtune=i686' --with-http_spdy_module --with-openssl=/tmp/openssl-1.0.1e
$ make
$ make install

Now Nginx is configured and compiled with SPDY support, then you need to enable SPDY for your server directives:

server {
  listen               80       default_server;
  listen               [::]:80  default_server ipv6only=on;

  listen               443      ssl spdy default_server;
  listen               [::]:443 ssl spdy default_server ipv6only=on;
}

Restart (reload) your Nginx, open chrome://net-internals/#spdy in your Google Chrome to see if SPDY is enabled correctly. You can also try SPDY indicator extension.

Kai Series

2013-03-23T00:00:00+08:00

「改」Series (a.k.a. Kai), is a series of the missing child themes for WordPress default theme Twenty Twelve, Twenty Eleven, and Twenty Ten. The prefix “Kai” of this series is inspired from Japanese anime ドラゴンボール改 (a.k.a. Dragon Ball Kai).

Features

Written in Sass (Kai 12) and Less (others), no IE support
Full Theme Unit Test passes. Maybe one of the most Gutenberg blocks compatible themes in WordPress directory (Kai 12)
Full dynamic color scheme with WordPress Customizer support based on CSS variables (Kai 12)
Randomized powered highlight.js support (Kai 12)
Better font stack for Chinese, Japanese and other asian languages
Better code snippets style
Adds .well block inspired by Bootstrap
Fix media query issue
Theme updater support

Downloads

FAQ

Q: “Why not submit these themes to WordPress.org official repository?”

A: Their theme reviewer thinks my theme “just offer a few minor CSS tweaks and adds new footer credit links” #.

Update: After a 3-month long review, Kai 12 is now listed on official WordPress theme directory.

A List Apart 5.0

2013-01-26T00:00:00+08:00

A design that departs from our past and a platform on which to build the future. Welcome to the relaunch of A List Apart, for people who make websites. Content first: We’ve added new kinds of content (with more to come), and we’re publishing more frequently—a lot more frequently. Fear not, we will continue to produce the insightful and important articles you expect from A List Apart, and the biweekly issues they ride in on. Major articles and (mostly) biweekly issues are forever.

Jeffrey Zeldman

◉ Direct Link to Original Site

ReadWise

2012-12-13T00:00:00+08:00

As known as 「美味爱读」. An online reading web app by AVOS System, Inc. I do design and front-end stuff and teamed up with Sun Ning for this project.

An interesting thing I’d have to mention is sooner after we launched this project Google announced to close Google Reader on July 1.

Note: this project is now closed, but you can see a cached homepage from my website.

◉ Direct Link to Original Site

Corner Bracket Lover

2012-12-12T00:00:00+08:00

Corner Bracket Lover is a WordPress plugin to convert all curly quotation marks (“” and ‘’) in your posts to traditional corner brackets (「」 and 『』). A must-have plugin if you’re a Chinese writer or just a corner brackets lover. This plugin also works fine with multisite enabled WordPress (aka. WordPress Mu). If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

◉ Direct Link to Original Site

Instagram Badges

2012-11-25T00:00:00+08:00

Adds Instagram badges to your WordPress blog that will help you link to and promote your Instagram profile. A must-have plugin if you’re a photo lover. This plugin also works fine with multisite enabled WordPress (aka. WordPress Mu). If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

Update Oct 19, 2019:

As of August 9, 2019, this plugin has been taken down by Facebook. Here’s the full disclosure forwarded from WordPress:

From: WordPress.org Plugin Directory <plugins@wordpress.org>
To: Sparanoid <t@sparanoid.com>
Subject: [WordPress Plugin Directory] Notice: Instagram Badges

We have been required by Facebook (who owns Instagram, Facebook, WhatsApp, and many other trademarks) to close your plugin. Their notice detailing why is included below. You must comply with their request and update your plugin in order for us to restore it.

Please understand, we have been legally compelled to do this, and have no ability to protect you from their demands. Trademark law is not something we can argue. When they demand takedown, we’re forced to comply regardless of if we agree with it.

If you want more details about their requirements, you’ll need to contact them directly. We strongly recommend going above and beyond, and just NOT using the company name, any of their logos, a screenshot that includes their product, or anything even closely related to that in your work.

Note that they no longer permit the use of their WORDMARK in your display name, which includes the words Instagram, Facebook, Insta, and Gram. So that means no, you cannot use “for Instagram” anymore.

Be advised, after this if they reach out to us and request we close your plugin again, it will be a permanent closure.

Here is the email from Facebook:

From: Lopez, Lidia Sent: Thursday, June 13, 2019 3:26 PM To: ‘plugins@wordpress.org’ <plugins@wordpress.org> Cc: Caplan, David <DCaplan@kilpatricktownsend.com>; Maxim, Trevor <TMaxim@kilpatricktownsend.com>; 1098547 - USE ENFORCEMENT RE: > MOBILE APP… <1098547.eml.townsend@wcs.kilpatricktownsend.com> Subject: Infringement of Instagram’s Intellectual Property & Brand Violation - “Instagram Badges” on WordPress

Via Email Wordpress.org plugins@wordpress.org Re: Infringement of Instagram’s Intellectual Property & Brand Violation - “Instagram Badges” on WordPress

Dear Wordpress.org: We are outside intellectual property counsel to Instagram, LLC (“Instagram”), the world-famous photo/video sharing and editing service, application, and social network. We have been entrusted by our client to keep an eye out for anything that might create confusion with its registered trademarks. We are writing with regard to the unauthorized use of Instagram’s trademarks in connection a plugin offered on Wordpress.org. As you are undoubtedly aware, Instagram is the owner and operator of the world famous social network and online platform. Through its marketing efforts and commercial success, among other ways, Instagram owns and has developed valuable trademark rights in its INSTAGRAM, INSTA, GRAM, and Design marks in connection with online social networking services (collectively the “Instagram Marks”). A list of relevant trademark registrations, along with links to where those registrations can be accessed, is below for your ease of reference:

Marks Reg. Nos. tsdr.uspto.gov Case No.

INSTAGRAM 5260677 87299078

INSTAGRAM 5181545 87166620

5399503 87299113

5424416 87234699

5399502 87299098

5198386 87035927

5351389 87035955

5351388 87035950

Based on the foregoing rights, it is a violation of federal and state law for others to advertise, utilize, offer for sale, and/or engage in services using the Instagram Marks without the express authorization of Instagram. As a responsible brand owner, Instagram must protect consumers from confusion and prevent dilution of its famous marks. Using a name that includes ‘Instagram,’ ‘IG’, ‘Insta’ or ‘Gram,’ and/or Instagram’s logos or stylized font may be confusing to people or may make it harder for them to distinguish between different websites, apps, and services. Nevertheless, it has come to our client’s attention that a developer going by the name of “Sparanoid” is offering an Instagram Plugin called “Instagram Badges” available at h https://wordpress.org/plugins/instagram-badges/, using the INSTAGRAM mark and Camera Glyph Logo (see screenshot below).

As a result, Instagram is concerned that users are likely to believe that the plugin is published, sponsored, endorsed by, or associated with Instagram, when that is not the case. Not only does such conduct constitute a violation of federal and state trademark laws, it is also a violation of (1) Instagram’s Brand Guidelines, available at https://www.instagram-brand.com, and (2) the WordPress Terms of Service, which provide that users “[w]ill not infringe or misappropriate the intellectual property rights of any third party.” Instagram diligently enforces its rights in and to the Instagram Marks in all forms and rightfully takes its responsibility for the protection of those marks very seriously. Accordingly, we request your assistance removing the infringements of Instagram Marks in connection with the Infringing Plugins as described above. I have a good faith belief that the use of the trademarks as described above is an infringement of the rights granted under the United States and/or foreign trademark law. I further understand that copy of this notice, including any contact information provided in my signature line below, will or may be forwarded to the plugin owner. Nothing contained in this letter constitutes an express or implied waiver of any rights, remedies, or defenses of Instagram, all of which are expressly reserved. Very truly yours, /s/ Lidia Lopez

– WordPress Plugin Review Team | plugins@wordpress.org https://make.wordpress.org/plugins/ https://developer.wordpress.org/plugins/wordpress-org/detailed-plugin-guidelines/

Marks	Reg. Nos.	tsdr.uspto.gov Case No.
INSTAGRAM	5260677	87299078
INSTAGRAM	5181545	87166620
	5399503	87299113
	5424416	87234699
	5399502	87299098
	5198386	87035927
	5351389	87035955
	5351388	87035950

◉ Direct Link to Original Site

$3.1 Billion in a Day

2012-11-13T00:00:00+08:00

Two days ago the Chinese website Taobao held a discount promotion to celebrate what’s known as “double sticks day” in China. In a single 24hr period, they conducted 19bn RMB (US$3.06bn) of business.

Chris West

◉ Direct Link to Original Site

Playing with OCSP Stapling

2012-11-04T00:00:00+08:00

本站已嘗試性的部署了 OCSP Stapling，什麼是 OCSP Stapling？JFGI。如果您通過 HTTPS 協議訪問本網站，可以感受到不明顯的訪問速度提升

這是目前只有 CloudFlare 等章亦春老師都去加入的高端團隊才會去研究和部署的玩具，所以本站這次的 OCSP Stapling 部署在整個互聯網建設歷史上又一次具有劃時代的重要意義！

Playing with SPDY Draft 2

2012-10-12T00:00:00+08:00

本站已嘗試性的部署了 SPDY 協議（Draft 2），什麼是 SPDY？JFGI。本站已於上個月底完成並且實現了 SPDY 協議的全站開啟。當你網絡狀況良好或身處中國大陸之外的地區時，使用最新版 Chrome、Safari、Opera 瀏覽器訪問本站會有更快的訪問速度

這是目前只有 Google、Twitter、WordPress 等超大型站點才會去研究和部署的玩意，所以本站這次的 SPDY 部署在整個互聯網建設歷史史上具有劃時代時代的重要意義！

Relative URL

2012-09-16T00:00:00+08:00

Relative URL is a WordPress plugin to apply wp_make_link_relative function to links (posts, categories, pages and etc.) to convert them to relative URLs. Useful for developers when debugging local WordPress instance on a mobile device (iPad. iPhone, etc.).

This plugin should be used for local development only. I haven’t tested on a production environment; it may work with some issues, like unwanted URLs in RSS feed or sharing URLs are replaced with relative URLs, etc.

# Example:
http://localhost:8080/wp/

# Will be converted to:
/wp/

# And...
http://localhost:8080/wp/2012/09/01/hello-world/

# Will be converted to:
/wp/2012/09/01/hello-world/

# And...
http://localhost:8080/wp/wp-content/themes/twentyeleven/style.css

# Will be converted to:
/wp/wp-content/themes/twentyeleven/style.css

Then after activating this plugin, you can simply access your local instance using http://10.0.1.5:8888/wp/ on your iPad or other mobile devices without having styles and navigation issue.

What if I deactivate this plugin?

The URLs will be changed back to absolute URLs again, there’s no database writes with this plugin.

Why this plugin is not recommend for production environment?

URLs in RSS feed are also replaced to relative URLs with this plugin, this could causes some issues for RSS readers that they will be confused for URLs without host. Shared URLs (ie Jetpack Sharing module) are also replaced to related URLs, Twitter, Facebook or other social sites won’t treat them as valid URLs.

If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

◉ Direct Link to Original Site

Safari 6 Gets Faster

2012-07-30T00:00:00+08:00

Apple’s venerable web browser, Safari, was updated to version 6 shipped with the OS X Mountain Lion. There’re two changes I noticed: One is the blue progress bar, seems that it instantly disappeared after the HTML DOM laoded without images. The other is, scrolling is really smooth even when it is processing new content on a web page.

Tianjin Project × WEF

2012-07-26T00:00:00+08:00

There’s a newer revision of this project.

Tianjin Project is now featured on the World Economic Forum (WEF) - Tianjin Davos 2012. Created using iBooks Author, for iPad only.

Book Preview

Big Typography Dynasty

2012-07-14T00:00:00+08:00

My site is now more responsive with big typography. I know most of the designers are still making their webpages with font size from 12px to 14px. But it’s time to use bigger typography now. The Big Typography Dynasty has come.

‘Free’ Dribbble Invite

2012-06-24T00:00:00+08:00

Some Chinese designers are selling their Dribbble invites for about $235 (1500 CNY in China). I’m really amazed. So I decide to giveaway one Dribbble invite for you guys who are still looking for it… for FREE!

◉ Direct Link to Original Site

I Don’t “Get” Art

2012-06-18T00:00:00+08:00

The reason why I post the YC link here is that’s really “worth reading”.

◉ Direct Link to Original Site

Tianjin Project

2012-06-11T00:00:00+08:00

There’s a newer revision of this project.

Now this project is featured on The World Economic Forum - Tianjin Davos 2012. You can also check out the project page.

Download it for iPad. (No iPad? Here’s a PDF version)

Book Preview

You can view the promotion video on YouTube.

◉ Direct Link to Original Site

Path Menu in CSS

2011-12-07T00:00:00+08:00

In case you missed it: I recently created a Path menu using CSS. You can view the demo on my website or check it out on Dribbble.

◉ Direct Link to Original Site

Minimalist Syndrome

2011-10-05T00:00:00+08:00

I intended to close this site, with a simple, lonely logo at the frontpage. Until I realised I’ve ran it for almost six years. Deleted my old posts, it’s brand-new.

Crystallized Dream

2011-08-28T00:00:00+08:00

I really enjoyed painting this one. Thanks to GarageBand and di.fm.

Moonstruck Princess

2011-07-31T00:00:00+08:00

Inspired by my dream.

Wallpaper ver. (2560 x 1440)

Project Railgun

2011-07-19T00:00:00+08:00

對我來說這是第一次做這麼大的工程，感覺還是有很大不同的，給自己做的時候只需要在腦子里構思就好了，而現在，除非我是 boss，這些都需要經過一系列的複雜步驟才能實現出來，也許這就是團隊合作吧

Railgun Homepage Redesign

Advanced Search Page

Administrator Control Dialog

Error Page Redesign

在高級搜索功能上用了不少功夫，最初還想把 checkbox 和 radio 加上樣式，但遇到了兼容問題還是放棄了

是後台的管理部份。當時發在了 Dribbble 上被 @csee 提了配色的建議（這裡還要感謝他給我提供了 Dribbble 的 invite），後來雖然也把整體配色做了改進，但殘念的是細節卻沒甚麼變化

另外我還為 Tora 醬做了不少維護頁面（Illustration by 唯）

Sub-project JSharer

JSharer, aka. Project Molten Core, anime based file-hosting sites. No massive images and complex layouts. Just simple CSS + HTML frontend site.

Sub-project MoeID Passport

MoeID passport redesign for JSharer Community
「極享」動漫社區通行證頁面

◉ Direct Link to Original Site

Start Page

2011-07-18T00:00:00+08:00

Start Page for your browser. The best browser homepage in the world, probably. Inspired by Lifepath.

◉ Direct Link to Original Site

030Buy Hiring Page

2011-07-17T00:00:00+08:00

Original Character Design Sketch

Original Character Design Sketch (Filled)

Webpage

You can visit this page here.

NITE

2011-07-16T00:00:00+08:00

Last time I redesign my site I said “Oh this time it looks great I’m going to use it for long enough”. But less than two month I redesigned my site again. It at first inspired by Lifepath, I create a start page for my Safari default homepage (It looks really nice and you can have a try). I’m satisfied with this style then I deployed it to the whole site. The style what you’re looking at.

I can’t really get what can I do with my site, except redesigning it from time to time.

Project 030Buy

2011-07-10T00:00:00+08:00

Checkout Page #1

Order list

Checkout Page #1

◉ Direct Link to Original Site

find.ac Alter

2011-07-05T00:00:00+08:00

Tianjin Impression Brochure

2011-05-08T00:00:00+08:00

Tianjin Impression brochure for my college work. Thanks to BK HAN, pomphorhynchus, Bad Jim, kilroy238, Takayuki Shiraiwa and I.S.S

cyrconlex

2011-05-06T00:00:00+08:00

This time I use Courier New, a typography that not so popular, even not so pretty, but most of devices shipped with it. However this site still works fine only on a Mac. on Windows, Courier News renders in a burnt way. I also try to minimise the CSS usage for a complete theme. It’s been six years and my site bumped to version 16, hope this time I can use it for long enough.

這次使用了 Courier New，一個與主流相比不是那麼好看、但大部分設備都會有的字型，不過基本還只對 Apple 的設備比較友好，Windows 下 Courier New 的渲染仍然比較差。我也嘗試用最少的 CSS 來做一個功能完整的主題，這次看來是基本達到了要求，六年時間，這裡已經進化到第 16 版了，希望這個主題能讓我看順眼的時間長些

Notational Velocity

2011-04-02T00:00:00+08:00

Notational Velocity is a really simple note-taking app for OS X, it’s fast and it can sync with Simplenote and Dropbox. I translated it into Chinese Simplified, you can download it on their official website.

◉ Direct Link to Original Site

fogbound-highrise

2011-03-07T00:00:00+08:00

Version 15, source code hosted at GitHub

Readability Buttons

2011-02-20T00:00:00+08:00

Readability Buttons is a WordPress plugin to add readability.com widget on your site. A must-have plugin if you’re a Readability ~~publisher~~ user ¹. This plugin also works fine with multisite enabled WordPress (aka. WordPress Mu). If you love this plugin, please consider buying me a cup of coffee.

Download it at WordPress.org

An Important Announcement by Richard Ziade at Readability ↩︎

◉ Direct Link to Original Site

Nessa

2011-01-31T00:00:00+08:00

フラクタル - ネッサ

Brand New

2010-12-18T00:00:00+08:00

Recently this site has several downtime because I was moving my server from one to another. And if you’ve subscribed my site you’ll noticed that all my posts refreshed in your RSS reader. Sorry about that, you can just ignore them, they’re all old posts except this one, just post here to let you know that the site is up and runing now, RSS (Atom) feed will also work (I hope). At last let me tell you what I did these days:

Switched from Linode to Rackspace, unmanaged cloud server.
Apache to nginx.
WordPress to Stacey, UPDATE: finally switched to Jekyll.
Deleted almost all my posts, it’s brand new now.
Categories changed, only two categories now: Work and Nootebook.

SlimBox & VoxGrowl

2010-12-05T00:00:00+08:00

Yes, These two Growl styles are now updated, I’m fed up with the white one so I change the SlimBox to a dark one in this version. VoxGrowl is used for Vox music player for OS X, but it also can be used by any other music player that displays album art. You can have a quick preview here:

SlimBox-1.2.dmg (70 KB)

VoxGrowl-1.2.dmg (370 KB)

Love these styles? please consider making a donation

lindsay-koinaka 2.0

2010-10-21T00:00:00+08:00

It’s a WordPress theme since this version, and it’s the first theme I made on a Mac after switching from Windows to OS X less than a month. Comparing to the initial vesion, all complex layouts and CSS3 animations have removed on this theme. Looks pretty simple. The source code is hosted on GitHub with details instructions and setup guide. The good news is the whole configuration needs only ten steps. And the bad news is, maybe it’s the last theme I made for WordPress.

Lucky Star for QQ / Sogou Pinyin

2010-09-15T00:00:00+08:00

Lucky Star skin for QQ Pinyin IME (QQ 拼音輸入法) & Sougou Pinyin IME (搜狗拼音輸入法), based on Japanese anime Lucky☆Star「らき☆すた」

lucky-star.qpys (? KB) / lucky-star.ssf (? KB)

Love this skin? please consider making a donation

lindsay-koinaka

2010-09-05T00:00:00+08:00

The new theme is out. ~~Just what you’re looking at,~~ it’s still work-in-progress, based on HTML5 and CSS 3. It looks great on a Webkit brwoser. New Firefox 4 should look fine too. IE 10 may also work except border-radius and animations. The source code can be accessed at ~~Google Code~~ GitHub, however it’s the first time I’m trying things like this. bug reports, comments, suggestions, and ideas for improvements are welcome.

DOLLARS Chat Room

2010-05-03T00:00:00+08:00

A chat room web app inspired by Japanese anime 「デュラララ!!」. DOLLARS Chat Room was registered on April 28, 2010. It was closed at the end of the year and reloaded on July 25, 2011. Source code based on drrr-like-chat.

◉ Direct Link to Original Site

Antiskill, Judgment Icon Set and Screensaver

2010-03-07T00:00:00+08:00

Antiskill & Judgment Section 177 screensaver and icons, auto-scale screensaver tested up to 2560 × 1600.

學園都市風紀委員 177 支部＆警備員スクリーンセーバー＆アイコン from「とある科學の超電磁砲」

來自學園都市風紀委員 177 支部的屏保，網上之前貌似有人做過，但效果不理想，重新做一下，自適應寬高比，最大測試過 2560 × 1600 的顯示器。另外做安裝包的同時順帶做了個圖標，內含七種顔色

來自學園都市警備員的屏幕保護，在第 24 話中出現過，自適應寬高比，最大測試過 2560 × 1600 的顯示器。由于警備員的圖標並不十分美觀，所以安裝包就沿用了風紀委員的

Download / judgment_icon.7z

Download / judgment_library.7z

Download / judgment_screensaver.7z

Download / judgment_screensaver_chs.exe

Download / judgment_screensaver_en.exe

Download / antiskill_screensaver.7z

Download / antiskill_screensaver_chs.exe

Download / antiskill_screensaver_en.exe

imouto.tk - Online Painting

2010-02-10T00:00:00+08:00

An online painting website side-project. .tk domain is free to register. I’ll move it to my main domain if I have more spare time.

Unfortunately, the project has been discountinued, however you can grab the last seen screenshot.

foobar2000 - MonoLite Plus

2009-11-23T00:00:00+08:00

Lastest Version: 0.4.3 for foobar2000 1.0 / 0.2 for foobar2000 0.9.6.9

0.4.* 版本的 Last.fm 同步功能可能會在退出 foobar2000 時隨機出現錯誤提示，但不會影響正常使用

什麽是 MonoLite Plus？

MonoLite Plus 是一款基于 Columns UI 組件創建的 foobar2000 皮膚

與原版 MonoLite 有什麽不同？

增加歌詞顯示功能，支持自動下載歌詞
增加藝術家簡介功能，信息來自 Last.fm
集成 Last.fm 同步功能，支持點擊圖標增加 Love 曲目
增加多種列表顯示模式（普通、緊湊、大圖標、小圖標等）
專輯標題樣式美化，增加陰影效果，修改字體
多處界面細節調整

MonoLite Plus 0.4.* 界面截圖： #1 #2
MonoLite Plus 0.2 / 0.3.* 界面截圖： #1 #2 #3 #4 #5 #6 #7
MonoLite Plus 0.1 界面截圖： #1 #2 #3

MonoLite Plus 安裝向導 (Portable 模式)

複制壓縮包中所有文件到 fooobar2000 文件夾
運行 foobar2000 並選擇 Columns UI
依次打開 Preferences › Display › Columns UI，然後導入皮膚 file mono_lite.fcl （foobar2000 1.0 無需此設置）
大功告成

MonoLite Plus 安裝向導 (標准模式)

將配置文件位置修改爲應用程序安裝目錄，位于選項中的 General 處修改
這樣會重制你的設置，因此修改爲 portable 後請手動轉移原配置到新目錄
然後照做 Portable 模式下的安裝方法

Last.fm 功能安裝向導

首先執行 monolite_lastfm_install.bat 文件，相關組件會自動安裝
在心形圖標的右鍵菜單處輸入用戶名與 API 密鑰
如沒有 API 密鑰則需要從這裏申請
運行 foobar2000 並在設置窗口中的 Tools / Audioscrobbler 與 Tools / Soft Playlists 面板中輸入您的帳戶信息

Last.fm 功能移除向導

退出 foobar2000，然後運行 monolite_remove_lastfm.bat，所有的相關文件會被移動到 monolite_backup 文件夾
如果哪天突然想用 Last.fm 了，則運行 monolite_restore_lastfm.bat 然後菜單中選回 Monolite Plus with Last.fm 所有的相關文件及配置即可還原
選中菜單中的 View / Layout / MonoLite Plus (Without Last.fm Icon) 可以去掉其圖標

會自動生成的內容

%foobar_dir%\lyrics\* - 歌詞存放目錄 (foo_uie_lyrics.dl)
%foobar_dir%\lastfm\* - 藝術家、專輯圖片 (foo_uie_biography.dll)
%foobar_dir%\customdb_sqlite.db - Last.fm 數據庫 (foo_customdb.dll)

如果不想自動生成這些文件，可在設置中禁用

使用技巧

左鍵雙擊專輯分類=全選該分類下的曲目；中鍵單擊曲目=打開曲目屬性窗口
音樂庫中中鍵點擊某項=將該項目添加到新播放列表並播放
通過右鍵菜單 Tagging / Quick Tagger / Set <rating> to... 可以爲曲目評星，也可在設置界面中爲此功能綁定快捷鍵，例如 ALT 1-5，ALT + 6 取消評星
隱藏菜單欄、狀態欄會有更好的視覺效果。菜單欄可以在需要的時候點擊右上角的按鈕顯示
在播放列表任意位置點擊右鍵，即可修改 Sort 與 Group by 類型
當修改了 Group by 類型後，專輯封面大小會發生變化，導致專輯封面顯示模糊，此時右鍵點擊列表任意位置選 Refresh all 即可
建議如圖修改快捷鍵設置，從此敲擊空格即可定位到正在播放的曲目

Windows XP 用戶

需要安裝 Segoe UI 才能顯示正確字體，字體請從 ~~下方下載區下載~~ 網上自行搜索

聲明

MonoLite 原作者爲 fanco86 #
MonoLite Plus 由 Sparanoid 修改 #
MonoLite Plus 爲 MonoLite 的修改版
Last.fm WSH Panel 代碼由 marc2003 編寫 #
光盤圖標由 PaulEnsane 制作 #
心形圖標由 Tango Desktop Project 制作 #
感歎號圖標由 Yusuke Kamiyamane 制作 #
媒體庫查看方式代碼基于 hydrogenaudio.org 論壇的 2E7AH 修改 #

該主題基于署名-非商業性使用-相同方式共享 3.0 發布

Download / monolite-plus-043.7z

Download / monolite-plus-042.7z

Download / monolite-plus-041.7z

Download / monolite-plus-04.7z

Download / monolite-plus-031.7z

Download / monolite-plus-03.7z

Download / monolite-plus-02.7z

Download / monolite-plus-01.7z

Lester’s Plugins in Chinese

2009-08-06T00:00:00+08:00

這些基本是我在建一個私人 WPMU 時用到的插件，Lester Chan 的插件翻譯起來是相當舒服的，分離的徹底而且順序也比較有邏輯性。於是就把他大部分的插件都翻譯成了中文

WP-DBManager 與 WP-PageNavi 以前就有翻譯，所以部分字串的翻譯可能和新翻譯的風格不太一致；還有一些插件沒翻譯，比如 WP-Polls 和 WP-DownloadManager，這些功能我用不上，所以不考慮翻譯，而且已經有人翻譯過，但質量和翻譯度一般。插件的功能就不說了，看名字也略知一二，詳情請訪問 WordPress Plugins@Lester Chan

Need More Space?

2009-07-28T00:00:00+08:00

First you should look at this preview. Comparing Opera 10, Chrome 3.0, Internet Exporer 8, Firefox 3.5, The largest viewport area for those brwosers is Chrome. It doens’t have status bar at the bottom and the others have it and it’s enabled by default. Opera has its menus shown by default, but you can hide it. Firefox also have menus but unfortunately you can’t hide it without hacks or extensions.

7-Zip Iconset Redesign v2

2008-11-24T00:00:00+08:00

The 2^nd icon set for 7-Zip, works fine on Windows 7. The font used in icons is created by Saved by Zero. The original box template is created by Thvg on deviantART

Icons preview / Download (for 4.6.1 beta x86)

Notice

Make sure you’ve installed 7-Zip before installing this icon set.
This installer will backup your original icons with uninstaller. Uninstall this icon set can restore you 7-Zip icons.

This project is discontinued, but you can try this tool

Chinese Description

此爲第二版美化圖標組，新版本圖標可以在 Windows 7 下完美顯示。圖標中使用的字體爲 Saved by Zero。紙箱子素材由來自 deviantART 的 Thvg 授權提供

圖標詳細樣式預覽 / 下載 (for 4.6.1 beta x86)

注意事項

安裝本圖標組之前請確定您已經正確安裝了 7-Zip 原程序
安裝前會對原作者的圖標文件進行備份，附刪除程序。刪除後可恢複原圖標

尋找 7-Zip 可用的圖標組？可以試試這個工具

Font Zomnk

2008-07-26T00:00:00+08:00

第一次做字體，或者說是改，或者叫 Redesign，或者叫 Repack，叫什麽都好，反正做的難免有些粗糙。用的是 FontLab Studio 5 做的，這是一款大小寫格式相同的英文字體。字體部分借鑒了某品牌的幼線體，因此……請低調宣傳。做這款字體的初衷是應用于 v13 主題的 Flash 字體顯示，本來還想做 OpenType，後來嫌麻煩，又不用于印刷，直接做了 TT 格式的。優化了標點符號的顯示，可以在這裏看修改前和修改後的效果

English Description

This is the first time I make my own font, or let me say it, “remix”. Created by FontLab Studio 5. Only uppercased characters included mainly used for my v13 theme in Flash. Only TrueType provided at the moment. You can compare the differences before and after modifying

Download / font-zomnk.7z

UPC Dope Show

2008-07-19T00:00:00+08:00

RX Hidden FKER a JPER

2007-10-20T00:00:00+08:00

BugMirror

2007-08-20T00:00:00+08:00

BugMirror is a different screen saver, as its packed with bugs. Nowadays screens are made out of pixels. What if they were made of living creatures instead?

◉ Direct Link to Original Site

SF.net CCA 2007 Winner

2007-08-04T00:00:00+08:00

The Community Choice Awards are over! The SourceForge.net 2007 Community Choice Awards provided you an opportunity to recognize projects that stand taller than the rest. Everybody got to vote, and everybody’s vote counted equally. The winning projects, each with superlative quality, productivity, and ingenuity, represent the cream of the crop on SourceForge.net.

7-Zip wins Best Technical Design: The project most likely to inspire awe with its technical perfection.

◉ Direct Link to Original Site

A New Keyboard

2007-07-28T00:00:00+08:00

Microsoft Comfort Curve Keyboard 2000, The whole keyboard is a curved shape, comfortable, ergonomically inspired contours, and it looks a little strange. It sounds lighter than my old Logitech keyboard. The bad is the keys feel a bit mushy, especially the space key.

6:53 pm / 0:25 am (inv)

2007-07-06T00:00:00+08:00

6:53 PM

00:25 AM

00:25 AM [INV]

Countryroad

2007-04-29T00:00:00+08:00

Gouache - Trees

2007-04-22T00:00:00+08:00

Outgrow

2007-04-17T00:00:00+08:00

Walking Like A Murderer

2006-11-01T00:00:00+08:00

Can I help you?

Withered

2006-10-28T00:00:00+08:00

Mobscene

2006-10-11T00:00:00+08:00

Mobscene on a bus. Full of mocking students.

Dry Heat

2006-08-25T00:00:00+08:00

It was an indescribable hot day that I created this fantasic image.

7-Zip Portable

2006-08-24T00:00:00+08:00

對於那些不想安裝的人來說，用這個還是不錯的，放在 U 盤裡隨時用也挺方便

◉ Direct Link to Original Site

Patch GUI for Feisu

2006-08-10T00:00:00+08:00

Patch GUI for Feisu. by Photoshop and Painter, Feisu is also a student just a little older than me.

Admoniz

2006-08-03T00:00:00+08:00

Admoniz - Project Preview, It’s just a preview, I won’t really work it out.

Ka-boom

2006-07-31T00:00:00+08:00

Can I help you?

Yuika-R1 w600

2006-06-17T00:00:00+08:00

Display at Night

2006-06-17T00:00:00+08:00

I looked at my display at night, may be midnight.

Melancholy

2006-06-09T00:00:00+08:00

Melancholy, homeless

Codename eek

2006-05-27T00:00:00+08:00

Sunflower, staring at the sun.

Codename eek_sig_sand

2006-05-27T00:00:00+08:00

Segoe UI

2006-05-19T00:00:00+08:00

在搞 Xinjustice 時，順便了解了一下字體，翻到 Making the Letters Better 時發現 Segoe UI 與 Frutiger Next 異常的像，MS 承認 Segoe UI 就是 Frutiger Next，Segoe UI 也只是對 ClearType 做了優化而已

Xinjustice (Logo)

2006-05-13T00:00:00+08:00

Anti- it! No more lies.

Tree 04060651

2006-04-06T00:00:00+08:00

Impossi

2006-04-02T00:00:00+08:00

Hardship is hard to say out.

Quotmarks Replacer

2006-01-29T00:00:00+08:00

Quotmarks Replacer is a WordPress plugin to disable wptexturize function that keeps all quotation marks and suspension points in half-width form.

It’s absolutely amazing. One of my all-time favorites.

Steve Jobs

Shut up, Matt.

WordPress

Chinese Description

Quotmarks Replacer 通過禁用 wptexturize 函數，解決 WordPress 自動將半形的單引號、雙引號和省略號轉換爲全形標點的問題。使後台輸入的標點格式與前台讀者瀏覽的標點格式保持一致。並且對 multisite 多站點（WordPress Mu）有良好的支持

我──一個網絡民工──當然有人會覺得這是謙虛，終於擁有了強悍的標點符號插件──也可能是世界上最棒的！我可以這樣雙引號“”，也可以這樣""，還可以這樣"──無論是哪一樣，都是最自由的表達！

和菜頭

Download it at WordPress.org

Love this plugin? please consider buying me a cup of coffee.

◉ Direct Link to Original Site

Handball Matrix (Line)

2006-01-18T00:00:00+08:00

ArtRage is fun.

Handball Matrix (Shadow and Textured Land)

2006-01-16T00:00:00+08:00

ArtRage is fun.

Hello World

2005-10-21T00:00:00+08:00

Yes, it’s me.

Keep Out!

2005-08-23T00:00:00+08:00

You’re out!

Work in Progress

2005-08-22T00:00:00+08:00

Work in Progress (Original)

2005-08-22T00:00:00+08:00

V6 Wallpaper

2005-07-31T00:00:00+08:00

A wallpaper goodies for V6. Original title: My V6 Wallpaper

7-Zip Chinese Simplified

2004-11-09T00:00:00+08:00

Official 7-Zip Chinese Simplified Localization Project.

◉ Direct Link to Original Site

Sparanoid

CSS Variables Guide: Color Manipulation and Dark Mode

Let’s embrace HSLa color model

Introducing Kladenets (aka. Root Variables)

Create your own themes

Welcome to the variables world!

Let the magic happen

Further reading

Media Auto Hash Rename

MAHR_LENGTH

MAHR_CHARS

MAHR_IGNORE

FAQ

Downloads

URL-Based CSP for AWS Lambda

HSTS for Amazon CloudFront

Omnibox NCR

Intro

Under the Hood

Downloads

Love this?

IKEA Stock Availability Checker

Intro

Downloads

Love this?

Lightense Images

Features

Install

Usage

Setup

Custom Background Color

Custom Padding

Disable Lightense for Specific Elements

Custom Event Hooks

Download

Browser Support

Love this?

DMARC

HTTP/2 and ECDSA Cipher Suites

Public Key Pinning / HPKP Reporting

Creating Pin Hashes

Adding Header for Nginx

Test HPKP

HPKP Reporting

max-age Best Practice

Almace Scaffolding

Slimpack

Features

CloudFront Cost Control

Update Jun 19, 2016

Apple Music Playlists

Dance Enhanced

ダンス エンハンスト

Voice Memos

Ansible Advanced lineinfile

Ansible

Amazon S3 × CloudFront

Transfer everything to the Cloud?

Move files to Amazon S3

Fixing wrong feed URL

Redirect www to non-www

Enable CloudFront

CloudFront + Custom SSL

Update SSL Certificate

iTunes Artwork Grabber

Intro

Supported Types

Unsupported Types

Demo

Downloads

Love this?

Shutdown Like a Boss

Chinese Copywriting Guidelines

Table of Contents

Spacing

Place one space before/after English words

Place one space before/after numbers

Place one space between numbers and units

No additional spaces before/after punctuation in fullwidth form

text-spacing to the rescue?

`MAHR_LENGTH`

`MAHR_CHARS`

`MAHR_IGNORE`

`max-age` Best Practice

ダンスエンハンスト

`text-spacing` to the rescue?