mogita

Godot 2D Wall Occlusion

Sun, 08 Oct 2023 15:06:19 +0800

In Godot, to let the player occlude the wall when in the front and the wall block the player when in the back, there are 2 approaches. The built-in and easier way is Y Sort. Another approach is coding a “trapdoor trigger” that makes the wall visible.

For both approaches, one would need to clip the “wall” out from the background image and put it in the same position to “fake” a consistent look of the map. The bottom line is there are two layers to achieve the occlusion effect.

With Triggers Link to heading

Two collision nodes are used. One is the CollisionShape2D node that signals the root node to “show” the wall sprite, thus impeding the player standing behind. Another one is the CollisionPolygon2D node, which signals the root node to “hide” the wall when the player is standing in the front.

This approach requires delicate adjustments on the collision nodes to make the final look correct and smooth. But you have total control of how the environments should interact with the character. With a large scene set, it could easily go into a mess. Use Y Sort whenever possible.

With Y Sort Link to heading

Y Sort is robust and more convenient. It doesn’t require additional collision nodes. In Godot 4, check the Y Sort Enabled option on the parent node. In Godot 3, there’s a node type called YSort. In my case, I have enabled Y Sort by checking the box on the root node named “Level.”

To start with, put all the elements in place and enable the “Y Sort Enabled” option in the root node. All of its child nodes inheriting CamvasItem are Y Sorted. This means when the player sprite moves to a lower position than the wall sprite (with a larger “Y” value on the axis), Y Sort makes the player occlude the wall, and vice-versa. There’s only one catch.

By default, the origin is at the center when an image is dragged into a Sprite2D node. Adjust the “Y” value in the offset. Usually, one moves the image to the “above” by decreasing “Y” or moving the origin point to the bottom. Depending on the exact image used in the scene, the origin might need to be set to a different position. Then, adjust the player character’s origin, placing it around the foot of the character’s image. Now, Y Sort should function properly.

One thing to notice is that the Y Sorted nodes should be on the same Z Index. In my case, the wall and the character are both on Z Index 0, while the backdrop (all buildings) is on -1, making it not involved in the Y Sorting among the wall and the character to always stay behind them both.

The result of using Y Sort:

Credits Link to heading

Inspired by https://www.reddit.com/r/godot/comments/1109shm/ysort_godot_35_vs_4/
Background Illustration https://headtopics.com/us/photo/waitress-at-kieler-woche-2023-132326
RPG Character Builder https://store.steampowered.com/app/1154430/RPG_Character_Builder/

A Personal Mastodon Instance Setup

Thu, 22 Dec 2022 12:57:46 +0800

I’ve not always wanted to bring up a Mastodon instance for it was not that intriguing to me, until recently Musk has worked on Twitter in an amateur way.

On the other hand, to host an instance of my own is a way of paying tribute to the past ‘90s self-host Email compaign which I was too young and poor to have the chance to experience. At least for now, we are seeing a blooming new way of social networking, whether or not a long-term fight against spam and junk information in the future awaits.

https://twitter.com/mogita/status/1605188553423536134

I’ll open source my setup. You can skip to the Code section to see the project.

You can also check out my instance @mogita@mog.blue. I’m always ready for a little chat.

How To Run Link to heading

I’m going to serve my Mastodon instance through Docker with docker-compose for an easier and consistent management workflow.

What To Include Link to heading

Inside the docker-compose.yml file I’ll put these components:

Mastodon web: tootsuite/mastodon:latest + ES analyzer tweak (for indexing non-English languages)
Database: postgres:14-alpine
Redis: redis:7-alpine
ElasticSearch: elasticsearch:7.17.8 + ik + stconvert
Streaming: tootsuite/mastodon:latest
Sidekiq: tootsuite/mastodon:latest
Nginx: nginx:latest

ES Analyzer Tweak Link to heading

A vanilla Mastodon instance is fairly easy to setup from the basic versions of the said docker images. However, adding optimization for other languages in its search functionality requires code modification which would impair the simplicity of just following the minimum workflow. Hope this necessity can be replaced with a more proper way, like configurable through .env.

At the time of writing, there are 3 steps according to the official documentation:

Install ES plugin https://github.com/medcl/elasticsearch-analysis-ik
Install ES plugin https://github.com/medcl/elasticsearch-analysis-stconvert
Modify Mastodon’s source code on index definition

Previous 2 steps can be achieved relatively easier. Just create a Dockerfile for a custom ES build and make the installation on the official ES image. Pay attention to the version consistency though.

As of step 3, I’ll patch the diff code provided by the documentation. Nonetheless a custom image is necessary too.

To sum up, I’ll need to build 2 images:

A custom Mastodon image for: Mastodon web, Streaming and Sidekiq
A custom ElasticSearch image for: ElasticSearch with non-English languages support

Miscellaneous Link to heading

HTTPS Support Link to heading

My Mastodon setup will enjoy the benefits from nginx-proxy and acme-companion for automatic SSL certificates challenging and renewal. This is why I have an Nginx component on the list. It’s the reverse proxy to handle SSL traffic.

Object Storage Support Link to heading

Using a cheap S3 compatible object storage service is my go-to plan on a minimum user base. Having it gone through a Cloudflare CDN might help with lowering the bandwidth cost too.

Email Relay Link to heading

Google Workplace SMTP relay service is my first choice since I’m on a business plan. For free alternatives, any relay service shall do and many offer a free amount for around 100 or more Emails per day.

Backups Link to heading

Since the object storage will be used, the only critical thing to backup is the database. A script that sends a daily pg_dump archive to one of my storage service provider shall do. If things go crazy in the future, like I’ll need to host the instance for hundreds of users, then master-slave replica might be useful as an additional measurement.

Scaling Link to heading

No need to consider right now. Cost effectivity, on the contrary, shall be my first priority given the instance being invitation only.

Code Link to heading

I named my Mastodon setup project the monsts, it stands for “Mastodon Of Not So Typical Setup”.

You can browse the source code here: https://gitlab.com/mogita/monsts

Things I Use

Wed, 12 Oct 2022 15:09:29 +0800

These are the listings of the tools, hardware, and software I use on a daily basis in my home office.

Hardware Link to heading

💻 MacBook Pro (M4 Max, 2024)

RAM: 48GB
Storage: 1TB
OS: macOS

📺 Mi Monitor A27U, 27" 4K Display

🖱️ Hecate G3Pro

⌨️ HHKB Professional BT Keyboard

📱 iPhone 14 Pro

🎧 Philips TAH7508 Headphone, with Noise Canceling

🎙️ Audio-Technica ATR2500-x USB

🎮 Xbox Series Joystick

Software Link to heading

macOS

iTerm2 (oh-my-zsh & starship)
Neovim
~~Firefox~~ Zen Browser
Apple Mail
~~Tweetbot~~ Ivory
Notion
~~1Password~~ Bitwarden
Reeder
Dropbox
Apple Pro Apps for A/V editing
Godot

iPhone

Apple Mail
WaterMinder
~~Overcast~~ PocketCasts
Duolingo
Ivory

Resume

Wed, 12 Oct 2022 12:22:42 +0800

Professional Skills Link to heading

Languages
- Go
- Node.js
- Python
- Web: React.js / ES6 / HTML / CSS
Databases
- RDBS: PostgreSQL / MySQL
- KV: BoltDB / Redis
- NoSQL: MongoDB
GIS
- PostGIS
- OpenStreetMap / Mapbox
- OSRM / Valhalla / Overpass / OpenMapTiles
- Visualization / QGIS
DevOps
- Docker
- Kubernetes

Experiences Link to heading

Stream, 2025~present / Amsterdam

Staff software engineer
NextBillion.ai, 2020~2025 / Singapore

Fullstack software engineer: real-time traffic flow, map data and SDK, sales system
Grab, 2017~2020 / Beijing

Software engineer manager: geo team, leading Grab Maps, Grab street view, and real-time visualization
Geekniu (ref) 2015~2017 / Beijing

Software engineer: BaaS bootstrapping, in-store digital sales solution

Education Link to heading

Beijing International Studies University, 2012~2015

Master of aesthetics

Beijing International Studies University, 2006~2010

Bechelor of Spanish

References Link to heading

Available upon request or visit https://linkedin.com/in/yun-wang-646d753d/

Minikube With Podman on Apple Silicon

Mon, 29 Aug 2022 11:38:55 +0800

Minikube has been a go-to environment for running a single-node cluster to test out the Kubernetes features on a local platform. For macOS computers with an Apple Silicon, a.k.a. M1 or M2, minikube provides an ARM64 version and can be installed with Homebrew.

However when it comes to start minikube after successfully installed it, it would require Docker as the default driver. Here comes my problem. As a matter of fact, Docker on macOS has long been released under the name of “Docker Desktop”, which contains a huge pile of Electron based applications and UI. It starts slow too. I don’t ever want to install such a monstrous thing in my system. So I have to give up the default driver and look for alternatives.

At the time of writing, minikube supports various kinds of drivers, such as Docker, Hyperkit, Hyper-V, KVM, Parallels, Podman, VirtualBox, and VMware Fusion/Workstation. After an hour of struggling and testing, Podman stood out. It’s backed by a QEMU virtual machine, supports Docker API and Docker-based tools, and can be intsalled in a very smooth fasion.

So I’m going to record the steps to initialize and maintain a minikube cluster with Podman.

Installation Link to heading

With the help of the Get Started documentation for minikube, just pick an installation option that works. Mine was brew install minikube.

Then the Podman installation done with brew install podman.

Simple enough.

Start Up Link to heading

Create a Podman machine with the following command, giving it 2 CPU cores and 8Gi memory.

podman machine init --cpus 2 --memory 8192 --disk-size 80
podman machine start
podman system connection default podman-machine-default-root

Now Podman should be running in the background. One can check out the information with podman info command, or find out its running stats with podman stats command.

To start minikube, follow the step below. By default, minikube uses Docker as the driver. One should pass a --driver argument to change that.

minikube start --driver=podman --container-runtime=cri-o

One should see the output similar to the following logs:

❯ minikube start --driver=podman --container-runtime=cri-o

😄 minikube v1.26.1 on Darwin 12.5.1 (arm64)
✨ Using the podman (experimental) driver based on existing profile
👍 Starting control plane node minikube in cluster minikube
🚜 Pulling base image ...
E0829 11:34:04.822031 11181 cache.go:203] Error downloading kic artifacts: not yet implemented, see issue #8426
🔄 Restarting existing podman container for "minikube" ...
🎁 Preparing Kubernetes v1.24.3 on CRI-O 1.24.1 ...
E0829 11:34:09.704438 11181 start.go:129] Unable to get host IP: RoutableHostIPFromInside is currently only implemented for linux
🔗 Configuring CNI (Container Networking Interface) ...
🔎 Verifying Kubernetes components...
 ▪ Using image gcr.io/k8s-minikube/storage-provisioner:v5
 ▪ Using image kubernetesui/dashboard:v2.6.0
 ▪ Using image kubernetesui/metrics-scraper:v1.0.8
🌟 Enabled addons: storage-provisioner, default-storageclass, dashboard
🏄 Done! kubectl is now configured to use "minikube" cluster and "default" namespace by default

Alternative to explicitly passing the --driver argument, one can change the defautl driver with this command:

minikube config set driver podman

Stop / Restart Link to heading

To stop the minikube + Podman system, follow these commands:

minikube stop
podman machine stop

To restart the system, simply run start respectively (note the sequence, podman should go first as minikube depends on it):

podman machine start
minikube start --driver=podman --container-runtime=cri-o
# or with the default driver changed to podman:
minikube start

Anything Else? Link to heading

Q: If there are multiple clusters to manage, including but not limited to GKE (by Google Cloud) and EKS (by AWS) etc., how to manage and switch from these clusters?

A: This can be configured through ~/.kube/config easily as Kubernetes has the concept of “Context”, which basically means different clusters. Upon minikube successfully starting, a new context called minikube shall be inserted automatically to this config file. One can list and switch to a certain context using the following commands (switching to minikube for example):

kubectl config get-contexts
kubectl config set current-context minikube

Q: How to test out a named StorageClass in a PVC object with minikube?

A: By default, minikube comes with a built-in SC named standard. It provides dynamic storage provisioning when one creates a PVC with non-named storage class. One should create a storage class with the customized name before creating the PVC with a named storage class to enable auto-creation of PV and PVC. First, create the named SC like this:

apiVersion: storage.k8s.io/v1
kind: StorageClass
metadata:
 name: your-custom-name
 annotations:
 storageclass.kubernetes.io/is-default-class: "false"
provisioner: k8s.io/minikube-hostpath

It’s important to set the provisioner field to k8s.io/minikube-hostpath, otherwise no auto-creation would happen. After the SC has been successfully created, when applying the following PVC object, one should observe that a PV being automatically created and the PVC gets instantly fulfilled:

kind: PersistentVolumeClaim
apiVersion: v1
metadata:
 name: {{ .Name }}
 namespace: {{ .Namespace }}
spec:
 accessModes: [ "ReadWriteOnce" ]
 storageClassName: your-custom-name
 volumeMode: Filesystem
 resources:
 requests:
 storage: {{ .DiskSize }}

You’ll find this article helpful with understanding dynamic provisioning of persistent storage with minikube.

About

Tue, 23 Mar 2021 12:32:03 +0800

I’m Yun, using the handle of @mogita (nearly) everywhere. I’ve worked as a professional software engineer since 2015. Before that, I wrote programs by self-teaching. You can download my resume or check my recent coding activity .

Here’s a list of devices and softwares that I use on a daily basis.

This is my personal website. Opinions are my own.

Bio Link to heading

🧑‍💻 Staff software engineer 🎮 Indie game dev 🎧 Drummer, bedroom producer 🇸🇬 Located in Singapore 🇨🇳 中文 🇬🇧 English 🇯🇵 日本語で数えるのはできる 🇪🇸 A veces leo en español

Contact Link to heading

Email me@mogita.com
PGP 6DB7 2FE7 20F6 19F7 10CD B4C9 A0AA 1B9C 57A4 8ECF
Calendar https://cal.com/mogita

Netizenship Link to heading

Projects Link to heading

Open Source Link to heading

go-sylt - A pretty convenient CLI tool that reads and writes synced lyrics to MP3 files in SYLT (SYnchronized Lyrics/Text) format.
osmflux - Cross-platform OSM tools with GUI
inoreader-js - A TypeScript library for the Inoreader API
Go Fanfou - A Fanfou API library for Go
Vue Zydialog - A dialog component for Vue.js

Services Link to heading

GMB - Your AI assistant for work, GPT chatting, multiple models, image creation, with lower prices.
YoCat - Powering the same named bot for recognizing and repost cat pictures
Soundmono
FanstaFou (Retired)

Portkeys ^? Link to heading

The Tracking Pixels in Your Emails

Fri, 12 Mar 2021 12:41:00 +0000

What Is A Tracking Pixel Link to heading

A Tracking Pixel is a technique found these days in Email marketing, promotions, newsletters and even casual notifications contents of Email campaign services. It inserts a transparent 1px x 1px image to the mail body that is invisible to human eyes and uses the good-old Web technology to send information to whoever’s on the other end collecting as many aspects as they want about the person who reads the Email:

Operating system
Device model
Type of the Email client
The reader’s screen resolution
When and how many times the Email was read or website visited
Activities on the website in a session
The IP address of the reader (this gives away the ISP information and even location based on some extremely precise GeoIP databases that are very easy to get)

A sample tracking pixel snippet from MailTrackerBlocker:

<a style="color: #770506;">
 <img src="http://cdn.website.com/newsletter/logo.png" width="438" height="42" border="0" style="max-width: 90%; height: auto" alt="logo.png">
</a>

<br>
<a href="https://website.us5.list-manage.com/unsubscribe?u=abdef">Click here to unsubscribe</a> or <a href="https://website.us5.list-manage.com/profile?u=abdef">Update subscription preferences</a>

- <img width="0" height="0" class="mailtrack-img" alt="" style="display:flex" src="https://mailtrack.io/trace/mail/0eabccbe98c98e9b8e9a8b89eab89ce9ab89e8bc.png?u=1234567">

Note that the highlighted line of code inserts the invisible pixel of image to the mail body.

Actually very few people ever noticed that their behaviours were tracked (or to say harvested) by the people who sent the Emails. But as soon as one realises it, bad feelings come pouring in: you don’t know which Emails have tracking pixels; you can never “opt-out” a tracking pixel; you don’t know exactly what information were collected by the trackers and what they plan to do with it.

How to avoid being tracked? Link to heading

If you are using a macOS computer, check out the open-source project MailTrackerBlocker. It’s a plug-in for the Apple Mail app. Actually the list above was sorted out using this plug-in.

Alternatively you can choose an Email service that provides tracking pixel blocking natively, like Hey (paid). In fact the makers of Hey mail made this website to stand up against tracking pixels: https://notospypixels.com

For blocking tracking pixels on other platforms, applications or Email providers, you can write to me and tell me your method or tools. I’d be happy to add them here.

Who Are Tracking Me Link to heading

To name just a few Email senders I’ve caught embedding the tracking pixels, here’s a list:

Sender	From Address	Tracking Pixel Service Provider
Sony PlayStation	reply@txn-email.playstation.com	Salesforce
Adobe	mail@mail.adobe.com message@adobe.com	Adobe
IFTTT	alerts@ifttt.com	Customer.io
Nintendo	nintendo-noreply@ccg.nintendo.com	(Self-owned Tracker)
LinkedIn	messages-noreply@linkedin.com	LinkedIn
Duolingo	hello@duolingo.com	Amazon SES
Flickr	flickrteam@arrow.flickr.com	SparkPost
Lark Suite (a.k.a Feishu)	support@service.larksuite.com	SendGrid
Bedroom Producers Blog	tomislav@bedroomproducersblog.com	MailerLite
Trello	taco@trello.com do-not-reply@trello.com invitation-do-not-reply@trello.com	Atlassian
Dropbox	no-reply@dropbox.com	(Self-owned Tracker)
CodeSandbox	hello@codesandbox.io	Mailgun
Mapbox	newsletter@mapbox.com billing@mapbox.com sales@mapbox.com community@mapbox.com	Customer.io
MapTiler	news@maptiler.com	Google
Mapillary	support@mapillary.com	SendGrid
Apple App Store	no_reply@email.apple.com	Apple
iCloud (GCBD)	no_reply@iCloud.gzdata.com.cn	(Self-owned Tracker)
Apple iTunes Connect	do_not_reply@email.apple.com	(Self-owned Tracker)
Apple Developer	developer@insideapple.apple.com	Apple
Be My Eyes	account@bemyeyes.com onboarding@bemyeyes.com	Postmark Mixpanel
Goodreads	no-reply@mail.goodreads.com	Amazon SES
Foursquare	noreply@foursquare.com	SendGrid
Baidu	no-reply-bce@baidu.com	(Self-owned Tracker)
GitHub	notifications@github.com	GitHub
Microsoft	Microsoft365@mail.microsoft365.com msa@communication.microsoft.com azure@email.microsoft.com	Microsoft
Cloudflare	newsletter@cloudflare.com	(Self-owned Tracker)
Sentry	webinars@sentry.io	Hubspot
Upwork	donotreply@upwork.com	Upwork
AWS	no-reply@marketplace.aws	Amazon SES
Facebook	security@facebookmail.com notification@facebookmail.com	Facebook
Instagram	security@mail.instagram.com	Facebook
Paypal	service@intl.paypal.com	(Self-owned Tracker) Return Path
Stripe	receipts+masked@stripe.com	(Self-owned Tracker)
Auth0	no-reply@emails.auth0.com no-reply-support@auth0.com	SendGrid Mandrill
Airbnb	automated@airbnb.com	(Self-owned Tracker)
Coursera	no-reply@m.mail.coursera.org	SparkPost
Console.dev	weekly@console.dev	Mailchimp
AudioThing	news@audiothing.net	Mailchimp
BugSnag	bugsnagmarketing@bugsnag.com	(Self-owned Tracker)
Slite	marc@slite.com	SendGrid
GOG	newsletter@email2.gog.com	~~Google~~ GetResponse
IMDB	do-not-reply@imdb.com	Amazon SES
CloudApp	no-reply@getcloudapp.com	Customer.io
PreSonus	presonus@e.presonus.com	(Self-owned Tracker)
Internet Archive	info@archive.org	Mailchimp
Box	boxteam@customer.box.com	spmailtechnol
IHG (A hospitality company)	IHGRewards@mc.ihg.com	(Self-owned Tracker, more than 1 per mail)
TuringBook.com	ebook@turingbook.com	Mailchimp
Raycast	thomas@raycast.com	SendGrid
RescueTime	notifications@rescuetime.com	Customer.io
Chatra	support@chatra.com	Postmark
Bandcamp	noreply@bandcamp.com	(Self-owned Tracker)
Craft.do	team@craft.do	(Self-owned Tracker)
Journal	hello@usejournal.com	SendGrid
Mockaroo	no-reply@mockaroo.com	Mailchimp
Ghost.org (A blogging software)	hello@ghost.org	(Self-owned Tracker)
Asana	no-reply@asana.com	(Self-owned Tracker)
Remove.bg	noreply@remove.bg	(Self-owned Tracker)
uTalk	hello@offers2.utalk.com	(Self-owned Tracker)
Envato	do-not-reply@market.envato.com	Mandrillapp
RapidAPI	support@rapidapi.com	Mailchimp
BundleHunt	support@bundlehunt.com	Mailchimp
TIDAL	account@info.tidal.com	SendGrid
ClickUp	katie@clickup.com success@clickup.com help@clickup.com clickupdates@clickup.com	Close
Clubhouse.io	support@clubhouse.io mayrelease@splash.events	Intercom SendGrid
Postman.com	postman-team@notifications.postman.com	Fastic
Taiga	peter@mail.taiga.io	SendGrid
Koingo Software	appdeals@koingo.com	SendGrid
Lobe.ai	lobe@e-mail.microsoft.com	Salesforce
Native Instruments	newsletter@news.native-instruments.com	(Self-owned Tracker)
Atlassian	info@e.atlassian.com	Return Path
Twitch	no-reply@twitch.tv	(Self-owned Tracker)
JustFont	su.weihsiang@justfont.com	Google
JFrog	team@go.jfrog.com	(Self-owned Tracker)
NameSilo	abnous@namesilo.com	MailerLite
Riot Games	noreply@mail.accounts.riotgames.com	SendGrid
NASA Mars	no-reply-mars@jpl.nasa.gov	iContact
Zeplin	hi@zeplin.io	Mailchimp
Pipedream	sacerdoti@pipedream.com	SendGrid
Google Payments	payments-noreply@google.com	Google
Google Workspace	google-workspace-alerts-noreply@google.com	Google
Google Cloud Platform	CloudPlatform-noreply@google.com	Google
Climb App	(hidden due to Apple Login)	SendGrid
China Merchants Bank	95555ad@message.cmbchina.com	(Self-owned Tracker)
Magoosh	help@magoosh.com	SendGrid
Todoist	no-reply@todoist.com	SendGrid
MuseScore	no-reply@musescore.com	(Self-owned Tracker)
GitGuardian	support@gitguardian.com security@mail.gitguardian.com contact@gitguardian.com	SendGrid Mailgun
Speed Dial 2	hello@speeddial2.com	Postmark
Sococo	noreply@sococo.net	Mandrill
Chamaileon	hello@chamaileon.io	Sendy
Browserstack Team	news@browserstack.com	Mailchimp
Ultimate Guitar	no_reply@ultimate-guitar.com	Mailtrain
Bunny Studio	support@bunnystudio.com	SendGrid
Waymo	noreply@waymo.com	Google
数码荔枝 lizhi.io	hi@tongxun.lizhi.io	Mailchimp
Three Dots Labs	contact@threedotslabs.com	Mailchimp
Vercel	ship@vercel.com	SendGrid
Guitar Pro	contact@arobas-music.com	Mailchimp
Loom	welcome@loom.com team@loom.com no-reply@loom.com	Intercom Mandrill
Opstree	riya@opstree.com	Hubspot
WeTransfer	noreply@wetransfer.com	SendGrid
Flim	hello@flim.ai	Mailjet
Grab	corpsupport.sg@grab.com	Amazon SES
Pusher	team@pusher.com	Customer.io
Chess.com	hello@chess.com alert@chess.com receipt@chess.com	Fastic SendGrid SendGrid
Soundtoys	news@soundtoys.com	Mailchimp
italki	noreply@italki.com	Amazon SES
Codecov	hello@codecov.io	(Self-owned Tracker)
Wurkr	helena@wurkr.io	Hubspot
Coinbase	info@cb.mail.coinbase.com	Fastic
Zapier	billing@zapier.com	Litmus
HBO Max	HBOMax@mail.hbomax.com	SendGrid
Malaysia Kini	newslab@malaysiakini.com membership@malaysiakini.com	Amazon SES
Book Depository	reply@support.bookdepository.com	Litmus
Anytype	hello@anytype.io	SendGrid
Change.org	change@a.change.org	(Self-owned Tracker)
Flo	legal@floemail.com	SendGrid
Medium	noreply@medium.com	SendGrid
LingQ	ana.rivera@lingq.com support@lingq.com	SendGrid
WordPress	comment-reply@wordpress.com	WordPress
Leanpub	news@leanpub.com	Mailchimp
Pocket Casts	noreply@pocketcasts.com	Mandrill
Amazon Web Services	aws-cn-marketing-email-replies@amazon.com	Amazon SES
Spotify	no-reply@spotify.com	SendGrid
Los Angeles Valley Collage	LAVCstudentsupport@laccd.edu	iContact
StarWind	brooke.johnson@starwind.com	Hubspot
Product Hunt	hello@team.producthunt.com	Mailjet
Gengo Translator Team	no-reply@gengo.com	SendGrid
Robinhood Snacks	noreply@robinhood.com	SendGrid
Live2D	support@live2d.com	Mailchimp
JetBrains	news@jetbrains.com	Adobe
Docker	no-reply@notify.docker.com	Mailgun
Discord	noreply@discord.com	SendGrid
Skillshare	hello@skillshare.com	SendGrid
Kickstarter	no-reply@kickstarter.com	SendGrid
MakeML	alexander@makeml.app	SendGrid
Roboflow	hello@roboflow.com	Customer.io
Unity	accounts@unity3d.com	SendGrid
Otoy	help@otoy.com	Mailchimp
Memrise	hello@mail.memrise.com	SendGrid
Clozemaster	hello@clozemaster.com	SendGrid
Descript	mail@descript.com	Customer.io
Heroku	noreply@mail.salesforce.com	Salesforce

It can go very long as more and more services I use. And I was tracked all the way long.

Update 2021-03-22: It appears that many of the “Self-owned Trackers” are not owned by the business owners. They don’t reveal the actual vendor by using the custom domain names. Certain tracing was done to discover the actual campaign Email sender and the tracker, which showed a certain pattern of how the custom domain names are formed. E.g. http://url1234.mail.some-service.io (certain parts were masked with dummy characters) points to the IP address that resolves to be in possession of SendGrid. Oh my they use the http that scatters people’s information all around the web un-encrypted while relentlessly collecting them.

Reading Digest (Aug 2018)

Thu, 16 Aug 2018 17:21:30 +0000

Go Link to heading

Accessing the database with Go needs the database/sql package. Apart from reading the official docs, this web site makes it even clearer on “how to” and “what not to do” matters. Learn idiomatic operations on it as well.

Go database/sql Tutorial

While designing the inforcement for our data security, I came across an article which explained briefly and clearly on SQL injection and how to avoid it in Go.

What is SQL injection and how do I avoid it in Go?

It’s also worth a while reading this article, also on the topic of SQL injection in Go. In fact it belongs to a big collection of articles on Go application building.

9.4 SQL injection (from the collection of Build web application with Golang )

WebAssembly Link to heading

As WebAssembly Specification draft goes 1.0 yesterday, it’s time to take a closer look at the essential ideas of WebAssembly. Currently it supports C, C++ and Rust. Which one to take? Hmm…

WebAssembly: How and why

Metabase Link to heading

This isn’t a reading item actually lol. The Metabase is a tool that is The simplest, fastest way to get business intelligence and analytics to everyone in your company. In short, it’s an open-source BI software.

One of our QA team member showed me this the other day. It supports running as a Java jar package, a docker image, on AWS and some other options. The setup process was even easier than setting up a new WordPress instance.

The Metabase astonished me with its simplicity of design, both on the workflow and the UI. I “ask” it questions, it shows me the answers. That’s it.

Digging deeper, I can gather the answers and make a dashboard to visualize the data. Or I can see the SQL it generates if I want to.

Here’s a screenshot from its repo:

Reading Digest (Jun 2018)

Mon, 18 Jun 2018 18:24:49 +0000

I was playing with RPG Maker MV recently. It supports iOS/Android packaging with Cordova. Here’s the collection of articles on the topic.

Displaying a PhoneGap App Correctly on the iPhone X A walkthrough of fitting the status bar and bottom area on an iPhone X.
Cordova app not displaying correctly on iPhone X (Simulator) Q&A on making a right config.xml and styles.
Supporting iPhone X for mobile web & Cordova app using Onsen UI A detailed guide on how to make the web app looks and behaves more like a native app.

On the Go based micro-service, gRPC is a must-know technology.

From Monolith to Microservice: Building APIs with gRPC & golang

Case study & tutorial on how to break up a legacy monolith codebase into microservices using gRPC + Protobuf + golang + the language of your choice!
What is gRPC The official portal for gRPC knowledge.
Dependency Injection In Go A basic tutorial on how and why for DI in the Go language.

React 状态管理

Tue, 27 Mar 2018 00:02:38 +0000

React 中的 state（状态）是简单的 JavaScript 对象，用于管理组件内的状态。请牢记：只有用在渲染（render）过程中的数据才保存在状态里。

什么是状态（State） Link to heading

React 组件用状态来保存相关数据，它本身就是一个简单的对象。状态和普通对象的区别在于，React 会监视状态的属性，并在它更新时触发组件重新渲染。

状态更新会触发重新渲染，因此可以只用它来保存渲染所需的数据。换句话说，虽与组件相关但不用于 render 方法的变量就无需保存在状态里了，使用实例变量即可。

同时，你还可以认为状态就是组件的私有数据，只有在组件内才能读取或更新状态。我们不能在它的父组件或子组件里访问状态。

与属性（Props）的区别 Link to heading

和 props 类似，状态就是一个用于触发组件重新渲染的对象。区别在于 props 来自父组件，状态是组件的内部数据。

我们无法在组件内更新 props。因为它是来自外部的数据，组件不能对其进行操作。状态处于组件内部，组件对它有完全操作的能力。

如下图：

初始化状态 Link to heading

我们有多种方式来初始化组件的状态：

使用 getInitialState 方法
在 constructor 方法内初始化
以类属性的方式初始化

使用 `getInitialState` 方法 Link to heading

使用 React.createClass 来定义组件时，可以使用 getInitialState 方法：

import React from 'react';

const ExampleComponent = React.createClass({
 getInitialState () {
 return {
 someKey: 'someValue'
 };
 },

 render() {
 return (
 <div>{this.state.someKey}</div>
 );
 }
});

export default ExampleComponent;

在 `constructor` 方法内初始化 Link to heading

当你使用 ES6 的 Class 关键字定义组件时，可以在 constructor 方法里初始化状态：

import React from 'react';

class ExampleComponent extends React.Component {
 constructor(props) {
 super(props);
 this.state = {
 someKey: 'someValue'
 };
 }
 render() {
 return (
 <div>{this.state.someKey}</div>
 );
 }
}

export default ExampleComponent;

请不要忘记调用 super() 方法，否则在 constructor 内将无法使用 this。不要漏掉了 super 方法里的 props 参数。

以类属性的方式初始化 Link to heading

同样在使用 ES6 的 Class 关键字时，我们还可以用类属性的方式初始化状态。这种写法可以节省几行代码：

import React from 'react';

class ExampleComponent extends React.Component {
 state = { someKey: 'someValue' }

 render() {
 return (
 <div>{this.state.someKey}</div>
 );
 }
}

export default ExampleComponent;

更新状态 Link to heading

更新状态时，需要留意如下规则：

不要直接修改状态的属性值
警告：setState 是一个异步方法
状态更新会合并操作

不要直接修改状态的属性值 Link to heading

第一条规则就是「不要向任何人提起状态更新」，恩不对，好像进错片场了。第一条规则是：不要直接修改状态的属性值。

// 不要这样做
this.state.someValueInState = 'NEW VALUE';

我们只能在初始化状态时直接写入状态，比如在 constructor 里进行定义。

除了初始化之外，我们只能使用 this.setState 方法来更新状态：

this.setState({someValueInState: 'NEW VALUE'});

警告：`setState` 是一个异步方法 Link to heading

请留意 setState 的两个关键点：第一，在计算下一个状态时不能依赖 this.state 和 this.props，它们可能会被异步更新：

// 不要这样做
this.setState({
 counter: this.state.counter + this.props.increment,
});

在这种情况下，用 function 作为 setState 的第一个参数即可：

this.setState((prevState, props) => ({
 counter: prevState.counter + props.increment
}));

第二，由于 setState 是异步执行的，因此我们不能依赖 this.setState 之后马上取得的 this.state 值。

如果你要在状态真正完成更新时执行代码，请使用 this.setState 的第二个参数，回调函数：

this.setState({
 someKey: 'someValue',
 }, () => {
 // 只有在状态完成更新后，才会执行这里的代码
 }
);

`state` 更新会合并操作 Link to heading

当我们调用 setState 方法时，React 将把参数传递的对象合并到当前的状态中。我们不必担心会出现属性覆盖的情况。

假设我们在 constructor 中定义了一个状态：

constructor(props) {
 super(props);
 this.state = {
 someKey: 'someValue',
 someOtherKey: 'someOtherValue'
 };
}

之后，我们可以用 setState 分别更新这两个属性：

this.setState({
 someKey: 'someNewValue'
});

在上面的代码里，this.state.someOtherKey 就不会被覆盖。

Hasta La Vista 2017

Wed, 03 Jan 2018 00:18:48 +0000

网易云音乐在 2018 的第二个工作日告诉我了去年的年度专辑，原来的确是伊藤サチコ。以及在日亚购买了《ジブリを聴きながら、上を向いて歩こう》。

技术 Link to heading

深入接触了 Vue.js + Vuex，延续了 Node.js + MongoDB 的路子。年底加入了 Grab，开始使用 React 和 Go 的技术栈。

年中用 Vue.js + Electron 的方案启动了一个饭否客户端项目，到年末完成度依然不高。遇到问题会被卡很久的毛病在这个项目中被体现得淋漓尽致。用 DOM 的方式控制视图也有难以逾越的「鸿坑」。总之，许多不起眼的地方都带着一层厚厚的 Hack，甚至让人想要学习使用 Xcode 做原生应用了！

夏季和@饭小默参加了一个 Beary Chat 的线下活动，现场开发机器人的环节热情高涨却没能拿到奖项，看来并没能「有 bear 来」。

把老项目里开发的一个对话框组件 Vue ZyDialog 做成了一个独立的轮子，几乎没有任何观众。2017 年最后一个月下载量仅 18 次，估计 17.9 次都是爬虫吧😂

年底开发了一个饭否机器人@有猫，基于 Google Vision API 识别公共时间线上的猫图并转发。炸出一票饭否猫奴。并在上线 2 个月后 fo 数超过了我，目前仍在超慢速地上涨。

游戏 Link to heading

Steam 收藏进入正轨，开始像一个普通的 Steamer 有事没事喜加一（我的 id 是 mogita）。在心愿单里最久的游戏是 Counter-Strike: Global Offensive；价格最贵的游戏是拳皇 14；进度最远的游戏是 Evoland 2；周目最多的游戏是 Grand Theft Auto: San Andreas；最喜欢的游戏是 LYNE、Human Resource Machine、Stardew Valley。买了还没开始玩的（这可能才是 Steam 的哲学）的游戏有 Bastion、Tomb Raider、Montaro、ICEY、Don’t Starve Together、Oceanhorn: Monster of Uncharted Seas 等。

年中进了 Minecraft 的碗，并买了个美团云架了私服。目前这个服务器主要在帮我跑自建 GitLab 的 CI 任务，而 Minecraft 也好久没登录了。

年底在网易魔兽开了个死骑账号，充了一个月的游戏时间后发现已经不是按在线时间扣点了，玩与不玩剩余时间都会随着日子变少。大脚插件官方提取了核心组件，拷贝到 AddOns 目录下就能被魔兽读取，不过 Windows 用户仍然享受安装包的雨露。

音乐 Link to heading

没有创造什么新东西。尝试了一段人声采样和 Wobble Bass 风格的东西，目前工程停滞中。

几乎不再使用 ES61 了，一方面桌子太小，多数时间要让给开发工作，另一方面因为新买了 MPK mini，更适合玩玩音色小敲小打。

2018 Link to heading

这些成就待达成：

做出一项公司产品
完成饭否客户端项目
完成人声 + Wobble 工程

新的故事，总得翻开的。

如何在自建 GitLab 中启用 CI Runner

Mon, 23 Oct 2017 11:43:50 +0000

GitLab 内置了 CI/CD 功能，在任何自建的 GitLab CE 服务器上都可以启用。对于中小型项目而言，这套内置的 CI/CD 工具足够用来完成测试、构建和部署自动化工作。

本文以前一个端开发项目为例，简单介绍 GitLab Runner 的搭建和使用流程。

什么是 GitLab Runner？

GitLab Runner 是独立于 GitLab 的开源项目（采用 Go 语言编写），用来执行自动化任务，并能够与 GitLab 互传数据。它是 GitLab 官方采用的 CI 工具。

安装和启用 Link to heading

你可以直接查阅 GitLab Runner 入门页面来了解完整的安装步骤，这里仅作概括。

建议使用独立于 GitLab 所在的服务器来安装 GitLab Runner，我所在的公司目前使用一台 2 核 4GB 的主机来运行所有项目的 CI 任务。同时，建议使用 Docker 作为任务运行环境，确保每个任务的执行环境相对干净独立。

登录到要安装 GitLab Runner 的服务器，执行下列操作：

安装 Docker（Docker 版本不低于 1.5.0）

sudo curl -sSL https://get.docker.com/ | sh

查看 GitLab 版本

cat /opt/gitlab/version-manifest.txt |grep gitlab-ce|awk '{print $2}'

安装 GitLab Runner 软件源

# RHEL/CentOS/Fedora 系统
curl -s https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.rpm.sh | sudo bash

# Debian/Ubuntu/Mint 系统
curl -s https://packages.gitlab.com/install/repositories/runner/gitlab-ci-multi-runner/script.deb.sh | sudo bash

安装 GitLab Runner

若 GitLab 版本低于或等于 8，要安装 GitLab Runner 1.11 版，新旧版 GitLab Runner 的 API 互不兼容

# RHEL/CentOS/Fedora 系统
sudo yum install gitlab-ci-multi-runner-1.11.2-1

# Debian/Ubuntu/Mint 系统
sudo apt-get install gitlab-ci-multi-runner-1.11.2-1

GitLab 9 或以上版本，直接安装 GitLab Runner 包即可

# RHEL/CentOS/Fedora 系统
sudo yum install gitlab-ci-multi-runner

# Debian/Ubuntu/Mint 系统
sudo apt-get install gitlab-ci-multi-runner

注册 GitLab Runner
```
gitlab-runner register
```
跟着提示填写所需信息，其中要填写和 GitLab 对应的 Token 和 URL，用于连接 GitLab 和 GitLab Runner

在哪里查找 Token 和 URL？

如果你有 GitLab 管理员权限：进入 Admin Area，打开 Overview - Runners 页面，可以找到 Token 和 URL。

如果你没有 GitLab 管理员权限：进入 GitLab 的任一项目，点击右上角的功能菜单选择 Runners（GitLab 8），或左侧的 Settings 菜单（GitLab > 8）选择 CI/CD，可以找到 Token 和 URL。

在项目中使用 GitLab CI Link to heading

假设我们要启用 CI 的项目叫做 fe-project，在项目根目录创建一个 .gitlab-ci.yml 文件，注意文件名开头的点字符。

GitLab CI 包含三个常用的步骤（stage），分别是 test、build 和 deploy，用于执行测试、构建和部署任务。

首先添加一段测试脚本：

the_unit_test:
 stage: test
 script:
 - npm install
 - npm run test

第一行是这段任务的名称，用于查阅和区分。第二行指定这段脚本要在 test 阶段执行。第三行是脚本数组，即这个任务具体执行的命令。具体测试命令可根据你的项目实际情况修改，以上给出的是比较常见的测试命令。

然后，提交代码并推到远程仓库。现在进入 fe-project 项目的 Pipelines 页面，即可看到当前正在运行刚刚添加的测试任务。

任务未运行或显示 Pending？

进入项目的 Runners 页面，检查是否已启用 Runner

如果运行过程中有报错（或任务本身执行失败、不通过等），可以点击任务 ID 查看详细的运行日志，查看命令行回显的错误内容并进行修正。

接下来在测试脚本下方添加构建脚本：

build_the_project:
 stage: build
 script:
 - npm install
 - npm build
 artifacts:
 expire_in: 1 week
 paths:
 - dist

这段脚本与测试脚本结构相似，其中新增了一段 artifacts 配置，用来指定构建出来的文件存放位置、过期时间等，供稍后的部署脚本使用。

提交代码并推到远程仓库，进入 Pipelines 页面查看一下日志，如果没有问题则可以进入下一步部署。通常构建阶段比较耗时，根据 script 执行的时长可能需要 3-5 分钟，具体耗时受项目本身的影响。

最后，当测试和构建都通过时，就可以执行部署任务了，新代码将被上传到部署服务器。

初次执行部署任务前的准备工作 Link to heading

初次部署之前，你需要做这样几件事：

在生产服务器上配置好项目所需的服务，例如 Nginx、数据库等
在生产服务器上创建一个 gitlab 用户（用户名可以自拟）用于远程连接，并让项目所在的目录对这个用户可读写
为这个用户创建一对 SSH 密钥，存放在此用户的 .ssh 目录下，并拷贝私钥
- 注意：确保 authorized_keys 文件权限 chmod 600 authorized_keys
- 注意：确保 .ssh 目录的权限 chmod 700 ~/.ssh
进入项目的 GitLab 页面，并进入 Variables 页面（GitLab > 9 版本在 Settings - CI/CD - Secret Variables 下），添加一个名为 CI_PRIVATE_KEY 的变量，并将上一步拷贝的私钥粘贴在 Value 框内

提交部署脚本 Link to heading

在构建脚本的下方添加部署脚本，关键信息已用注释标出：

deploy_to_server:
 # 使用最小 Linux 发行版 Alpine 作为部署执行环境的镜像
 image: alpine:3.6
 stage: deploy
 script:
 # 使用教育网 apk 镜像
 - echo "http://mirrors.ustc.edu.cn/alpine/v3.6/main/" > /etc/apk/repositories
 # 安装 rsync 和 openssh 包
 - apk add --no-cache rsync openssh
 # 创建 ssh 密钥，用来登录到生产服务器
 - mkdir -p ~/.ssh
 - echo "$CI_PRIVATE_KEY" >> ~/.ssh/id_dsa
 - chmod 600 ~/.ssh/id_dsa
 - echo -e "Host *\n\tStrictHostKeyChecking no\n\n" > ~/.ssh/config
 # 用准备工作中创建的用户登录到生产服务器，指定在 Nginx 中配置的项目路径
 # 注意请将 0.0.0.0 换成实际的 IP 地址
 - rsync -av --progress --delete dist/ gitlab@0.0.0.0:/var/www/fe-project/dist/
 # 在生产服务器进行一次代码备份，其中 CI_BUILD_REF 是 GitLab CI 的内置变量，表示构建任务的 ID 哈希值，用来区分不同构建的产出物，便于部署发现问题时立即将线上代码切换为任一可用版本
 - rsync -av --progress --delete dist/ gitlab@0.0.0.0:/var/www/fe-project/dist-$CI_BUILD_REF/

提交代码并推送到远程仓库，并观察 Pipelines 页面的日志。若测试、构建和部署都通过，再次访问网站的线上地址时，就可以看到最新的改动了。

结束 Link to heading

本文以最简洁的方式介绍了 GitLab CI 的配置和使用，在现实开发中你可能需要根据项目性质的不同来编排更加复杂的 CI 脚本。此外，你还可以使用 GitLab 自带的 Webhooks、Services 来连接 Slack、Telegram 等外部服务，实时知晓 CI 的运行状况和结果。

构建 Vue.js 工程时 .vue 文件解析报错

Mon, 10 Apr 2017 00:00:51 +0000

在一台 CentOS 6 服务器上构建 Vue.js 项目时，.vue 文件大量报错：

xxx.vue doesn't export content

这个错误的原因之一可能是 node-sass 安装不正常。也就是说，在 .vue 文件报错日志的最上方，或许能够看到 node-sass 模块的相关出错信息。

如果你能看到这个出错信息，可以参考一下我的解决方法。

检查 node-sass 包是否正确安装和编译，以及在 node-sass 包目录下生成 vendor 文件夹。如果没有正确生成，需检查工程所在目录的读写或执行权限。
编译环境中 gcc 版本要在 4.9 或以上。我原先的版本是 4.8.8，它导致 webpack 在构建 Vue.js 工程时报错：Error: /usr/lib64/libstdc++.so.6: version CXXABI_1.3.5' not found。你需要更新 gcc 版本。

更新 gcc 方法参考：

先安装 gcc 4.9

cd /etc/yum.repos.d
wget http://linuxsoft.cern.ch/cern/scl/slc6-scl.repo
yum -y --nogpgcheck install devtoolset-3-gcc devtoolset-3-gcc-c++

然后修改 .bashrc 设置 gcc 的执行路径

vi ~/.bashrc

修改或插入 PATH 变量

PATH=/opt/rh/devtoolset-3/root/usr/bin/:$PATH

进入工程目录，执行 rm -rf node_modules/node-sass/ && yarn add node-sass 再次安装并编译。如果安装过程无误，这次会由 gcc 4.9 进行编译。

编译完成后，执行 yarn build 或你的工程定义的构建命令来进行构建，应该不会再看到文章开头的错误了。

20170601 更新 Link to heading

CentOS 7 系统请参考这个 gist

Remove Nth Node From End of List 数组实现

Tue, 07 Feb 2017 01:54:30 +0000

原题 Link to heading

Given a linked list, remove the nth node from the end of list and return its head.

For example,

Given linked list: 1->2->3->4->5, and n = 2.

After removing the second node from the end, the linked list becomes 1->2->3->5.

Note:

Given n will always be valid.

Try to do this in one pass.

数组方式解答 Link to heading

思路：先遍历整个链表，存成一个数组。然后删除从末尾起第 n 个元素（或从头起的第 length - n + 1 个元素）。然后遍历数组建立新的链表，然后返回此链表，结束程序。

我选择了从头算个数的方式，由于 Array 下标从 0 开始，因此传入的位置需要减 1，即最终传入 length - n。

var removeNthFromEnd = function(head, n) {
 let arrayBridge = [];
 let currentNode = head;

 // first pass: get the length
 while (currentNode) {
 arrayBridge.push(currentNode.val);
 currentNode = currentNode.next;
 }

 // for an edge situation where head has only 1 node
 // leetcode expects an [] as an empty ListNode object
 if (n === 1 && n === arrayBridge.length) return [];

 arrayBridge.splice(arrayBridge.length - n, 1);

 let list = curr = new ListNode(arrayBridge[0]);
 let count = 1;

 while (count < arrayBridge.length) {
 curr.next = new ListNode(arrayBridge[count]);
 curr = curr.next;
 count++;
 }

 return list;
};

此解已是一个可获得 Accepted 的答案，但离题目要求的「只用一通」颇有差距，最坏的情况需要几乎两通的时间。

8 个 ES6 实用特性

Thu, 19 Jan 2017 10:45:49 +0000

模板字符串（Template String） Link to heading

var block = `<div>
 <p>hello</p>
</div>`;

console.log(block);

输出

<div>
 <p>hello</p>
</div>

箭头函数 Link to heading

解决父级作用域无法被回调函数访问的问题。例如下列 ES5 代码，必须在回调函数后添加 .bind(this) 才可以正确运行：

var obj = {
 names: ['mogita', 'me', 'zhiyi'],
 domain: 'mogita.com',
 method: function() {
 var mapEmail = function(item) {
 return item + '@' + this.domain;
 }.bind(this)

 return this.names.map(mapEmail);
 }
};

console.log(obj.method());

输出

[ 'mogita@mogita.com', 'me@mogita.com', 'zhiyi@mogita.com' ]

ES6 用箭头函数替代 Link to heading

var obj = {
 names: ['mogita', 'me', 'zhiyi'],
 domain: 'mogita.com',
 method: function() {
 return this.names.map(item => {
 return `${item}@${this.domain}`;
 });
 }
};

console.log(obj.method());

输出

[ 'mogita@mogita.com', 'me@mogita.com', 'zhiyi@mogita.com' ]

Class 语法糖 Link to heading

Javascript 中并没有真正的「类」，一直以来多用原型扩展的方式来构建一个类，如下列 ES5 代码：

function Obj() {
 console.log('Obj constructed');
}

Obj.prototype.method = function() {
 console.log('This is Obj\'s method');
};

console.log('About to construct');
var obj = new Obj();
obj.method();

输出

About to construct
Obj constructed
This is Obj's method

ES6 的 Class 语法糖 Link to heading

class Obj {
 constructor() {
 console.log('Obj constructed');
 }

 method() {
 console.log('This is Obj\'s method');
 }
}

console.log('About to construct');
var obj = new Obj();
obj.method();

输出

About to construct
Obj constructed
This is Obj's method

模块 Link to heading

方便在不同 js 文件之间共用代码，使项目模块化。

导入模块 Link to heading

import something from 'framework';
import * as something from 'framework';
import {matchedProp} from 'framework';

导出接口 Link to heading

export default function something {}

export var value = 'value';
export var another = 'another';

export var matchedProp = 'matched';

反构造（Destructure） Link to heading

Angular 等现代前端框架是用 TypeScript（ES6 的一个超集）编写的，反构造在导入语句中很常见，它可以用来选择所需的具体模块。

例如 ES6 代码，只引用对象的若干选定属性：

var obj = {
 a: 1,
 b: 2,
 c: 3
};

var {a, c} = obj;
console.log(a, c);

输出

1 3

剩余参数 Link to heading

如果最后一个命名了的参数前面加了三个点，该参数将含有该位置以及向后的所有传入参数。例如：

function hello(...numbers) {
 numbers.forEach(function (item) {
 console.log(item);
 });
}

hello(1, 2, 3, 4);

输出

铺展操作符 Link to heading

铺展操作符可以视为「剩余参数」的反向概念，用来动态扩展参数。例如：

function print(x, y, z) {
 console.log(x + y + z);
}

var params = [1, 2, 3];

print(...params);

输出

对象字面量语法糖 Link to heading

可以让对象属性名由变量组成。例如：

var obj = {
 ['var_' + 42]: 'life'
}

console.log(obj.var_42);

输出

life

11 条提升工作效率的 npm 命令

Sun, 04 Sep 2016 09:55:11 +0000

Npm 是个容易上手但不易深入的工具，因为内置了数不尽的功能。如果要挨个学习和尝试，不知何年何月能够全部学完。

以我自身为例，学会了一条 npm prune（即本文第四节）之后，才明白如果项目里某些模块不再需要了，根本不必手动删除 node_modules 目录再重新执行 npm install。这个过程着实令人头痛。

我们总结了 11 条易用的 npm 命令，能够帮你在任何工程中提升效率。

打开模块的主页 Link to heading

执行：npm home <package>

执行 home 命令会打开 package 指定包的主页。比如输入 lodash 会打开 Lodash 的网站首页。无论这个包是否已被全局安装或工程内安装，都可以直接使用。

打开模块的 GitHub 仓库 Link to heading

执行：npm repo <package>

和 home 命令类似，repo 命令会打开指定包的 GitHub 仓库页面。例如输入 express 将打开 Express 的官方仓库页面。和 home 一样，未安装的包也可以打开。

检查需更新的依赖 Link to heading

执行：npm outdated

你可以在工程里执行 outdated 命令，npm 会检查哪些包已陈旧，需要更新。结果会展现在一张表格里，显示当前版本、所需版本和最新版本。

$ chatroom git:(master) npm outdated
Package Current Wanted Latest Location
express 4.13.4 4.13.4 4.14.0 chatroom
socket.io 1.4.6 1.4.6 1.4.8 chatroom

检查未被 package.json 声明的包 Link to heading

执行：npm prune

当你执行 prune 时，npm 会检查 package.json 里的依赖列表，并对比工程的 node_modules 目录。它会打印出未被 package.json 声明却已存在的包。你可以评估一下哪些包是真正需要的（比如说通过 npm install 安装却未加 --save 参数的包），并可以将它们删除。

锁定依赖版本 Link to heading

执行：npm shrinkwrap

执行 shrinkwrap 命令将生成 npm-shrinkwrap.json 文件。它能将安装在 node_modules 目录中的依赖锁定在一个特定的版本。当 npm-shrinkwrap.json 文件存在时，npm install 将遵守其中的版本号，而不再使用 package.json 里的更高版本号。

如果你想检查 package.json、npm-shrinkwrap.json 以及 node_modules 中依赖版本的一致性，请尝试使用 npm-shrinkwrap 包。

使用 npm v3 和 Node.js v4 LTS Link to heading

执行：npm install -g npm@3

用 npm 全局安装 npm@3 将把 v2 版的 npm 升级到 v3 版，甚至在 Node.js v4 LTS（Argon）上也可以这样做。这样，你的 v4 LTS 运行环境里就可以使用最新稳定版的 npm v3 了。

让 `npm install -g` 不再请求 `sudo` Link to heading

执行：npm config set prefix <dir>

执行这个命令时，需要在 <dir> 参数指定新的全局安装模块的目录，这样你就可以避免全局安装时要输入密码的情况了。指定的目录将成为新的全局 bin 目录。需要注意的是，新指定的目录必须对你的当前用户提供写权限，可以使用例如 chown -R <USER> <dir> 的命令来修改权限。

修改工程里的保存前缀 Link to heading

执行：npm config set save-prefix ~

在安装新模块并用 --save 或 --save-dev 保存时，波浪号 ~ 比 npm 默认的 ^ 号保守。波浪号会把依赖锁定在当前小版本号，也就是说可以通过 npm update 来安装 patch 发行版。而 ^ 代表锁定在大版本号，通过 npm update 安装的是 minor 发行版。

上线前去掉工程里的 `devDependencies` Link to heading

当你的项目准备上线进入生产环境时，请无比在安装模块时加上 --production 标记。这个标记将只安装 dependencies，忽略 devDependencies。这就保证了线上版本的代码库里不含有调试用的工具包等。

其实，你可以在 NODE_ENV 环境变量中设置 production，从而保障线上工程的 devDependencies 永远不被安装。

使用 `.npmignore` 时需谨慎 Link to heading

如果你尚未使用过 .npmignore，其默认值还是很安全的。

一旦你在工程里添加了 .npmignore 文件，那么 .gitignore 里的规则就会被无视了。结局就是你必须保持这两个文件内容的同步，否则有可能在发布时泄漏敏感信息。

设置 `npm init` 的默认值 Link to heading

当你在新工程里执行 npm init 时，会从头到尾走一遍设置流程，最后生成 package.json。如果你想要设定一些可以让 npm init 一直使用的默认值，可以执行 config set 命令，执行方法如下：

npm config set init.author.name <name>
npm config set init.author.email <email>

或者你想要直接修改初始化脚本文件，做一些自定的初始化逻辑，那么请执行下面的命令：

npm config set init-module ~/.npm-init.js`

下面是个脚本范例，它会提问一些私人问题，并在需要时创建 GitHub 仓库。请修改默认的 GitHub 用户名 YOUR_GITHUB_USERNAME，作为 GitHub 用户名的默认参数。

var cp = require('child_process');
var priv;

var USER = process.env.GITHUB_USERNAME || 'YOUR_GITHUB_USERNAME';

module.exports = {
 name: prompt('name', basename || package.name),
 version: '0.0.1',

 private: prompt('private', 'true', function(val){
 return priv = (typeof val === 'boolean') ? val : !!val.match('true')
 }),

 create: prompt('create github repo', 'yes', function(val){
 val = val.indexOf('y') !== -1 ? true : false;
 if(val){
 console.log('enter github password:');
 cp.execSync("curl -u '"+USER+"' https://api.github.com/user/repos -d " +
 "'{\"name\": \""+basename+"\", \"private\": "+ ((priv) ? 'true' : 'false') +"}' ");
 cp.execSync('git remote add origin '+ 'https://github.com/'+USER+'/' + basename + '.git');
 }

 return undefined;
 }),

 main: prompt('entry point', 'index.js'),

 repository: {
 type: 'git',
 url: 'git://github.com/'+USER+'/' + basename + '.git' },

 bugs: { url: 'https://github.com/'+USER'/' + basename + '/issues' },
 homepage: "https://github.com/"+USER+"/" + basename,
 keywords: prompt(function (s) { return s.split(/\s+/) }),
 license: 'MIT',
 cleanup: function(cb){
 cb(null, undefined)
 }
}

最后的话 Link to heading

如果你还想了解更多关于 npm、Node.js、JavaScript、Docker、Kubernetes 和 Electron 等的话题，请关注 @NodeSource 的 Twitter 账号。

Hexo 博客写作快速指南

Fri, 02 Sep 2016 19:57:24 +0000

今天把博客更新到了 Hexo，取代了之前的 WordPress 网站。WordPress 是个十足优秀的博客程序，但 Markdown 已经成为了我日常工作中的主要文档书写方式。

快速指南 Link to heading

因为是快速指南，所以操作细节会比较简略。如果你对任何细节有疑惑，请参考官方文档，这里有详尽的讲解。

什么是 Hexo？ Link to heading

Hexo 是一个基于 Node.js 的静态博客生成器。换成简单的说法就是：Hexo 是个命令行软件，可以把你的 Markdown 文件转换成一组漂亮的 html 页面构成的网站，把这个网站上传（部署）到 GitHub 或 FTP 服务器，就可以让读者访问你的博客了。

如何使用？ Link to heading

既然 Hexo 是个软件，那么在使用之前就需要安装它。打开你的终端程序，执行下面的命令：

npm install -g hexo-cli

什么是 npm？

接下来，用 Hexo 命令来创建一个全新的博客吧。非常简单，执行下面的命令：

hexo init <folder>

用你想要的名称替换 <folder> 即可。这个命令会在当前所在的目录创建一个文件夹，里面装着一套 Hexo 博客的基本文件内容。当然现在它还是个尚未装修的毛坯房，你需要先对它进行一些敲敲打打。执行下面两条命令：

cd <folder>
npm install

上述命令将切换到博客所在的文件夹，并让 npm 自动安装所需的依赖。

然后，用你喜欢的文本编辑器打开 _config.yml 文件，这是 Hexo 博客的全部配置所在，比如网站域名、博客名称、作者昵称等。设置项的名称指明了它的作用，如果想要深入挖掘配置方法，请参考此页文档。

写文章 Link to heading

首先，你需要知道文章都保存在哪里（事实上你不用手动创建 .md 文件，但仍需要知道在哪里能找到它们）。进入 /<folder>/source/_posts 文件夹，就能看到所有文章了，一篇文章对应一个 .md 文件。

怎样创建文章呢？执行下面的命令：

hexo new [layout] <name>

其中 <name> 是文章的文件名，不用附加 .md 后缀。layout 参数可以填入 post（文章）或 page（页面）。忽略 layout 默认创建文章。如果创建的是文章，.md 文件位于 /<folder>/source/_posts，如果创建的是页面，则在 /<folder>/source/<name>/index.md。

然后，用你喜欢的 Markdown 编辑器编辑文章吧。我正在使用的是 Typora。

生成网站 Link to heading

文章写完了，需要先生成网站。也就是把 .md 文件全部转换成 html 等静态 Web 文件，同时自动套用主题、插件等。注意，虽然这里也提到了「主题」、「插件」这样的字眼，但与 WordPress 的主题和插件有着本质的不同，静态 Web 站不需要像 WordPress 那样运行服务端脚本，插件等扩展功能都是在生成时一步到位，网站访问者请求的是一个货真价实的纯 html 网站。还有什么比直接访问 html 文件更快的呢？

执行下面的命令生成网站：

hexo generate

部署 Link to heading

所谓部署，对于静态 Web 站而言，就是「上传」了。无论是 GitHub 托管，还是通过 FTP 上传到自建网站，都需要把生成好的 html 文件等资源上传到服务端。

部署的配置方法已在官方文档中有详细的描述，比如 Git 方式，或 FTP 方式。我的选择是 FTP，因为我已经有一台虚拟主机了。

执行下面的命令就可以开始部署了：

hexo deploy

如果没有出错，就可以去访问你的新博客了。

一步部署命令 Link to heading

使用下面的命令，可以在执行完生成后，自动执行部署命令：

hexo generate --deploy

# 甚至更简略的命令，功能同上
hexo g -d

文章编辑小贴士 Link to heading

Hexo 文章除了支持基本的 Markdown 语法外，还额外支持一系列特殊标签，下面摘抄一些比较常用的标签。通过这些标签可以自动生成漂亮的排版元素。

块引用 Link to heading

{% quote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %}
Every interaction is both precious and an opportunity to delight.
{% endquote %}

效果

{% quote Seth Godin http://sethgodin.typepad.com/seths_blog/2009/07/welcome-to-island-marketing.html Welcome to Island Marketing %} Every interaction is both precious and an opportunity to delight. {% endquote %}

代码块 Link to heading

可以使用 Markdown 的 Code fence 语法，也可以使用下面的标签：

{% code Array.map %}
array.map(callback[, thisArg])
{% endcode %}

效果

{% code Array.map %} array.map(callback[, thisArg]) {% endcode %}

Gist Link to heading

{% gist gist_id [filename] %}

插入图片和附件 Link to heading

在 Markdown 文章里插入图片的方法十分简单，使用下面的语法就可以了：

![Image of Yaktocat](https://octodex.github.com/images/yaktocat.png)

如果你想要有序地管理所有图片，可以使用 Hexo 的资源文件夹特性。首先需要在 _config.yml 文件中进行如下配置：

post_asset_folder: true

这样，每次执行 hexo new [layout] <name> 时会自动创建 <name> 同名的文件夹，把文章所需的图片放入该文件夹即可。用下面的语法即可插入图片：

{% asset_img slug [title] %}

// 举例
{% asset_img example.jpg This is an example image %}
{% asset_img "spaced asset.jpg" "spaced title" %}

其实，自动创建的 <name> 同名文件夹不仅可以用来存放图片，它本质上是一个「资源」文件夹，你还可以把其他类型的文件放在里面。比如，想要让读者下载一个 PDF 文件的话，你可以把文件放进资源文件夹，然后在文章中这样引用它：

{% asset_link file.pdf My PDF File %}

结尾 Link to heading

Hexo 是一款基于 Node.js 的静态博客生成器，你可以用 Markdown 语法和 Hexo 的扩展标签来编写文章内容和进行排版、插入图片或附件等。完成编写后，需要生成并部署网站资源，可以部署到 GitHub 通过 GitHub Page 来访问你的静态网站，也可以部署到 FTP 服务器。公开域名，就可以开始欢迎你的第一批访问者了！

理解 JavaScript Promises：上、背景和基础

Mon, 18 Jul 2016 15:34:24 +0000

许诺之地 Link to heading

ES2015 带来的最大变化之一就是原生的 Promise（即「许诺」，下同）特性，用来解决各种回调问题，让开发者写出同步风格的异步代码。

讲道理来说，Promise 和 Generator 代表着异步的新标准。无论你是否使用它们，都应该了解一下。

Promise 特性由很简单的 API 构成，但学习曲线稍显陡峭。初学者或许会感到它的概念十分艰涩，需要一个了解的过程和充分的示例。

读完本文后，你将能做到：

明白为什么会有 Promise，以及它们能解决什么问题；
解释什么是 Promise，包括它们的实现以及应用；
将常见的回调设计用 Promise 进行重写

注意，文中示例均以 Node 环境为前提，你可以手动拷贝代码，也可以 clone 我的代码。

git clone https://github.com/Peleke/promises/
git checkout Part_1-Basics

下面是本文的整体框架：

回调的问题
Promise：定义以及 A+ 规范
Promise 和反控制反转
用 Promise 控制流程
理解 then、reject 和 resolve

异步式 Link to heading

任何写过一些 JavaScript 代码的开发者都知道，它是「非阻塞」或「异步执行」的。这究竟是什么意思？

同步和异步 Link to heading

同步代码会逐行运行，前行执行完了才执行后行。同步代码的近义词是阻塞执行，因为一行代码的执行会阻塞下面代码的执行，直到这行代码执行完毕。

// readfile_sync.js

"use strict";

// This example uses Node, and so won't run in the browser.
const filename = 'text.txt',
 fs = require('fs');

console.log('Reading file . . . ');

// readFileSync BLOCKS execution until it returns.
// The program will wait to execute anything else until this operation finishes.
const file = fs.readFileSync(`${__dirname}/${filename}`);

// This will ALWAYS print after readFileSync returns. . .
console.log('Done reading file.');

// . . . And this will ALWAYS print the contents of 'file'.
console.log(`Contents: ${file.toString()}`);

异步代码正好相反：当前正在执行的这行代码不会阻止接下来的代码，就算它正在执行需要较长时间的操作，例如 I/O 或网络请求。这就是「非阻塞代码」。下面是用异步方式模拟上面的代码段：

// readfile_async.js

"use strict";

// This example uses Node, so it won't run in the browser.
const filename = 'text.txt',
 fs = require('fs'),
 getContents = function printContent (file) {
 try {
 return file.toString();
 } catch (TypeError) {
 return file;
 }
 }

console.log('Reading file . . . ');
console.log("=".repeat(76));

// readFile executes ASYNCHRONOUSLY.
// The program will continue to execute past LINE A while
// readFile does its business. We'll talk about callbacks in detail
// soon -- for now, just pay mind to the the order of the log
// statements.
let file;
fs.readFile(`${__dirname}/${filename}`, function (err, contents) {
 file = contents;
 console.log( `Uh, actually, now I'm done. Contents are: ${ getContents(file) }`);
}); // LINE A

// These will ALWAYS print BEFORE the file read is complete.

// Well, that's both misleading and useless.
console.log(`Done reading file. Contents are: ${getContents(file)}`);
console.log("=".repeat(76));

同步代码最大的好处在于可读，便于理解。同步代码自上而下顺序执行，与我们读书的方式相同。第 n 行的代码一定比第 n+1 行代码先执行完。

但同步代码的坏处在于执行慢。比如，用户点击按钮后，浏览器要在完成一个 2 秒的网络请求之后，再继续响应用户操作，这种体验是无法接受的。

这个例子也正好说明为什么 JavaScript 是非阻塞型的。

异步式带来的挑战 Link to heading

异步代码带来了速度上的提升，但不再具有线性特征。即使上例中琐碎的代码段也是如此。请注意：

无法知道 file 什么时候可用，除非将控制权交给 readFile 并让它在准备好的时刻通知我们
我们的代码不再按照它的书写顺序来执行，理解起来会不那么直观

这几点问题将成为本文接下来讨论的中心。

回调和回退 Link to heading

我们来精简一下异步 readFile 代码：

"use strict";

const filename = 'throwaway.txt',
 fs = require('fs');

let file, useless;

useless = fs.readFile(`${__dirname}/${filename}`, function callback (error, contents) {
 file = contents;
 console.log( `Got it. Contents are: ${contents}`);
 console.log( `. . . But useless is still ${useless}.` );
});

// Thanks to Rava for catching an error in this line.
console.log(`File is ${useless}, but that'll change soon.`);

由于 readFile 是非阻塞的，它不得不立即返回，以便代码继续往下执行。而「立即返回」也就意味着它没有足够的时间来完成 I/O 操作，它除了返回 undefined 之外也别无他法。但我们需要的是在 readFile 方法真正地读完文件。

问题来了，我们怎么知道读取已经完成？

答案也很简单：无法预知。但是，readFile 方法可以。上面的代码段中，我们向readFile 方法传递了两个参数：文件名，以及一个函数，这个函数就叫回调函数。在文件读取完成的时刻，它就会被执行。

把这段代码换成白话就是：「readFile，请查看一下 ${__dirname}/${filename}这个路径里面有什么内容，这个过程需要一点时间。你查看完之后，请调用 callback 方法，传入 contents，如果有错误请让我知道 error 是什么。」

其要点就是我们无法获知读取文件的完成时间，只有 readFile 方法自己知道。这就是为什么我们要给它传递一个回调函数，并且信任 readFile 会对这个函数做正确的事情。

这便是以往人们使用异步方法的基本方式：用参数调用它，并传递一个回调函数来处理结果。

回调是一种异步解决方案，但它们并不完美。两个比较大的问题在于：

控制反转
复杂的错误处理方式

控制反转 Link to heading

首先是关于信任的问题。

当我们向 readFile 传递回调函数时，我们相信它会执行这个回调。然而，事实上它却从没保证过它会执行这个回调。就算它确实会被调用，也没人保证传递给这个回调函数的参数将一定正确，或者顺序一定正确，又或者执行的次数也一定正确。

现实当中，这倒不是什么致命的问题：我们已经写了 20 多年回调，从未让网络崩坏。在此基础之上，我们觉得，把控制权直接交给 Node 核心代码应该也是安全的。

但是，把一个应用中最关键的部分交给第三方去管理，总感觉有点冒险，过去已经造成了无数个难以捕捉的 Heisenbug。

显式错误处理 Link to heading

在同步式编程中，我们可以用 try/catch/finally 来把握错误处理。

"use strict";

// This example uses Node, and so won't run in the browser.
const filename = 'text.txt',
 fs = require('fs');

console.log('Reading file . . . ');

let file;
try {
 // Wrong filename. D'oh!
 file = fs.readFileSync(`${__dirname}/${filename + 'a'}`);
 console.log( `Got it. Contents are: '${file}'` );
} catch (err) {
 console.log( `There was a/n ${err}: file is ${file}` );
}

console.log( 'Catching errors, like a bo$$.' );

而在异步式编程中，还想这么写的话，就走远了：

"use strict";

// This example uses Node, and so won't run in the browser.
const filename = 'throwaway.txt',
 fs = require('fs');

console.log('Reading file . . . ');

let file;
try {
 // Wrong filename. D'oh!
 fs.readFile(`${__dirname}/${filename + 'a'}`, function (err, contents) {
 file = contents;
 });

 // This shouldn't run if file is undefined
 console.log( `Got it. Contents are: '${file}'` );
} catch (err) {
 // In this case, catch should run, but it never will.
 // This is because readFile passes errors to the callback -- it does /not/
 // throw them.
 console.log( `There was a/n ${err}: file is ${file}` );
}

这段代码根本不会以设想的方式执行。因为 try 语句块包含 readFile 方法，后者永远会成功地返回一个 undefined 值。也就是说，try 永远会成功完成，而不会发生任何意外。

要捕获 readFile 产生的错误的方式只有一种，就是给它传递一个回调函数，并在这个回调中获得错误信息，然后再来处理错误。

"use strict";

// This example uses Node, and so won't run in the browser.
const filename = 'throwaway.txt',
 fs = require('fs');

console.log('Reading file . . . ');

fs.readFile(`${__dirname}/${filename + 'a'}`, function (err, contents) {
 if (err) { // catch
 console.log( `There was a/n ${err}.` );
 } else { // try
 console.log( `Got it. File contents are: '${file}'`);
 }
});

这个例子的代码还不算太糟糕，但是工程量足够大时，这些问题会后患无穷。

Promise 则一下解决了这两个问题等一系列不足之处，通过「反控制反转」，和「同步化」异步代码，来实现我们更熟悉的错误处理。

Promise 机制 Link to heading

假设你从 O’Reilly 订购了全套「You Don’t Know JS」丛书。你把辛苦搬砖挣来的钞票给了他们，他们发给你一张收据，声明你将在下周一收到一套崭新的图书。在那之前，你都并未拥有这套图书。但你可以相信，一定会收到，因为他们保证过（promised）一定会寄送。

基于这种 Promise，在图书送达之前，你就可以计划好每天要阅读多少本，计划借给朋友哪几本，甚至给老板请好一周的休假来奋力读书。在制定这些计划的时候，你其实都处于并未拥有这套图书的状态，你仅仅是知道你会拥有。

当然，O’Reilly 可能过几天之后告诉你，由于七七八八的原因，订单无法完成了。到那时，你可以取消每日阅读计划，告诉你朋友他们不用等了（因为你自己都拿不到书），然后告诉老板，下周你会照常上班。

Promise，就像这张收据一样，是替一个还未就绪的值占位的对象，但稍后一定会就绪。换句话说，一个未来的值。你可以把 Promise 当成一个你正在等待的值，并在假设你已获得它的前提下编写代码。

如果在事件过程中出现岔子，Promise 会在自身内部流程去处理中断的地方，并且让你用一个特殊的 catch 关键词来处理错误。这和同步式的代码有点不一样，但至少比异步处理一堆错误要舒服。

并且，由于 Promise 会在一个值准备就绪时将其传递给你，你就可以决定要如何使用这个值。这就解决了控制反转的问题：你自己来直接掌握应用的逻辑，无需把控制权转交给第三方。

Promise 的生命周期：状态（States）简介 Link to heading

假设你用 Promise 进行了一次 API 调用。

由于服务器不可能立即发回响应，Promise 是不可能立即获得最终值的，也不可能立即报告错误。这个状态下的 Promise 被称为 Pending（等候中），好比你在等待订购的那套新书。

一旦服务器发回了响应，就会产生两种可能：

Promise 得到了它期待的值，这个状态被称为 Fulfilled（已满足）。好比你收到了那套书。
请求事件中出现了错误，这时 Promise 的状态被称为 Rejected（被拒绝）。这就好比你收到通知，购书订单无法完成了。

这三个状态就是 Promise 的所有可能状态。一旦 Promise 变成了 Fulfilled 或 Rejected，则无法再转化为任何其他状态了。

关于概念的阐释就说这么远，下面我们来看看究竟怎样应用这些东西。

Promise 的基础方法 Link to heading

引用 Promises/A+ 标准的一段话：

Promise 代表一个异步操作的最终结果。与 Promise 进行交互的主要方式，是使用它的 then 方法。该方法会注册回调函数，接收 Promise 的最终值，或 Promise 无法被满足的原因。

接下来的部分，我们将对 Promise 的基本用法进行详细介绍：

用构造器创建 Promise
用 resolve 处理成功事件
用 rejected 处理错误事件
用 then 和 catch 来建立控制流程

在这个例子中，我们将使用 Promise 来搞定上边 fs.readFile 的遗留代码。

创建 Promise Link to heading

最基本的 Promise 创建方法就是通过构造器直接创建。

'use strict';

const fs = require('fs');

const text =
 new Promise(function (resolve, reject) {
 // Does nothing
 })

注意，我们向 Promise 构造器传递了一个函数作为参数。在这里我们将告诉 Promise 怎样执行异步操作、得到期待值后需要做什么，以及出错了怎么办。细说起来就是：

Resolve 参数也是一个函数，里面包含当获得期待值的时候我们想要做的事。当我们得到了期待值 val 的时候，我们这样调用：resolve(val)。
Reject参数也是一个函数，代表得到错误的时候我们要怎么做。如果有错误err，则要这样调用：reject(err)。
最后，我们传递给 Promise 构造器的函数将处理异步代码本身。如果它按期待返回了，我们就调用 resolve 并传入获得的返回值。如果抛出错误，我们就调用reject 并传入错误。

我们的示例需要把 fs.readFile 封装成一个 Promise。那么，应该怎样写 resolve 和reject 呢？

在成功的事件中，我们用 console.log 打印文件内容
在错误的事件中，我们做一样的事：用 console.log 打印错误信息

也就是这样：

// constructor.js

const resolve = console.log,
 reject = console.log;

接下来，我们需要把传递给构造器的函数补充完整。记住，我们的任务是：

读取一个文件
如果成功，resolve（解决）内容
否则，reject（拒绝）并给出错误

因此：

// constructor.js

const text =
 new Promise(function (resolve, reject) {
 // Normal fs.readFile call, but inside Promise constructor . . .
 fs.readFile('text.txt', function (err, text) {
 // . . . Call reject if there's an error . . .
 if (err)
 reject(err);
 // . . . And call resolve otherwise.
 else
 // We need toString() because fs.readFile returns a buffer.
 resolve(text.toString());
 })
 })

这样，我们就算完成工作了。这段代码会创建一个 Promise，它会严格执行我们想要的逻辑。但是，当你运行这段代码的时候，什么都不会打印出来。

她做出了承诺，然后… Link to heading

原因是，我们写了 resolve 和 reject 方法，却并没有把它们传递给 Promise！怎么传？很简单，利用 Promise 的流程控制方法 then 来完成。

每个 Promise 对象都有一个叫做 then 的方法，它仅接受两个参数：resolve 和reject，且要保证顺序一致。调用 Promise 的 then 方法并传递这些函数，才能使构造器里的回调函数访问这两个函数。

// constructor.js

const text =
 new Promise(function (resolve, reject) {
 fs.readFile('text.txt', function (err, text) {
 if (err)
 reject(err);
 else
 resolve(text.toString());
 })
 })
 .then(resolve, reject);

这样，我们的 Promise 会读取文件，在成功时调用 resolve 方法。

有个很关键的点值得注意，then 方法永远会返回一个 Promise 对象。这就是说，你可以用多个 then 来构造复杂的、同步风格的流程控制，以此控制一串异步操作。在下一篇文章中我们会深入这个话题，接下来我们先用 catch 范例来领略一下链式调用的风采。

捕获错误的语法糖 Link to heading

我们向 then 传递了两个方法：resolve，用于成功事件；reject 用于错误的事件。

Promise 还暴露了一个类似于 then 的方法，catch。它只接受一个参数，那就是reject。

由于 then 总是返回一个 Promise，在上面的例子中，我们可以只给 then 传递一个resolve，然后紧接着用 catch 来处理 reject。

const text =
 new Promise(function (resolve, reject) {
 fs.readFile('tex.txt', function (err, text) {
 if (err)
 reject(err);
 else
 resolve(text.toString());
 })
 })
 .then(resolve)
 .catch(reject);

最后，必须要记住，catch(reject) 只是 then(undefined, reject) 的语法糖。即，我们也可以这样写：

const text =
 new Promise(function (resolve, reject) {
 fs.readFile('tex.txt', function (err, text) {
 if (err)
 reject(err);
 else
 resolve(text.toString());
 })
 })
 .then(resolve)
 .then(undefined, reject);

但显然还是使用了语法糖的代码更易读。

总结 Link to heading

Promise 是异步编程中不可或缺的一个工具。初学时，它们显得有些可怕，但这仅仅是由于你对它还不够熟悉：多用几次，你就能像使用 if/else 一样使用它了。

下篇文章，我们来实践一下，把基于回调的传统代码用 Promise 进行重构。然后调研一个 Promise 库：Q。

你还可以阅读一下 Domenic Denicola 的「States and Fates（状态与命运）」来全面掌握术语，以及先前我们订购的丛书中 Kyle Simpson 关于 Promises 的章节。

照例，如果你有问题，请在下边进行评论，或者在 Twitter 上直接找我（@PelekeS）。我保证（Promise）会回复！

解决 AS3 推流无法发送 MetaData 的问题

Mon, 18 Jul 2016 13:55:08 +0000

在学习 ActionScript 3 推流的过程中遇到了一个棘手的问题，用 ns.publish() 方法可以正常推流，但无法发送任何 MetaData。

在 RTMP/FMS 服务器配置正确的情况下，可以检查一下是否有如下代码：

在初始化 NetConnection 实例后，添加一行 nc.objectEncoding = 0。

这样，就可以正常收发 onMetaData 事件了。

用 gulp 压缩 CSS 和 JavaScript

Tue, 03 May 2016 19:44:10 +0000

最近接触前端工作比较多，所以需要学习一些自动化的工作方式。今天的学习内容是 gulp。本文直接以 CSS 和 JavaScript 文件压缩作为入门范例，这两种自动化处理也是最常见的处理之一，能对前端页面字节精简，缩短用户的页面载入等待，也能减少数据流量消耗。

安装 gulp Link to heading

在安装 gulp 之前，本机必须已安装 npm，一个随 Node.js 安装包一起安装的包管理器。

首先，全局安装 gulp。在命令行中执行：

npm install --global gulp-cli

然后进入工程根目录，在工程中安装 gulp，执行：

npm install --save-dev gulp

注意：若工程未进行 npm 初始化，请在安装 gulp 之前执行 npm init。

接下来，创建 gulpfile.js：

var gulp = require('gulp');

gulp.task('default', function() {
 // place code for your default task here
});

最后，执行 gulp：

gulp

我们会在终端看到「default」任务的执行结果。当然，目前是不会有任何动作，因为我们的「default」任务里没有代码。

Sass 自动编译 Link to heading

当保存好一个 .scss 文件后，通常我们需要用 sass 命令来将其编译成 .css 文件。

通过 gulp，把这个处理放入自动流程就可以了。

进入工程根目录，安装 gulp-sass 包：

npm install gulp-sass --save-dev

注意：如果需要安装 sass，请根据官方文档进行安装。

编辑 gulpfile.js 文件，加入对 gulp-sass 的引用，并添加 styles 任务（任务名可以随意起）。完整代码如下：

var gulp = require('gulp'),
 sass = require('gulp-sass');

gulp.task('styles', function() {
 return gulp.src('src/styles/*.scss')
 .pipe(sass.sync({
 outputStyle: 'expanded'
 }))
 .pipe(gulp.dest('dest/styles/'));
});

然后在工程根目录执行 gulp styles，即可看到生成的普通 css 文件。

Autoprefixer 支持浏览器特定的 CSS 前缀 Link to heading

或许我们看到过（或者每天都要写）这样的 CSS 代码：

a {
 -webkit-border-radius: 5px;
 border-radius: 5px;
}

可以看到，除了 border-radius 之外，还有一行 -webkit-border-radius，这个就是为 webkit 内核准备的 CSS 前缀。如果使用 PhpStorm 这样的 IDE，它或许会为我们自动补充所需的前缀。但只写不带前缀的语句，能够提高 CSS 代码的可读性，只需把添加前缀的工作交给 gulp 来执行即可。

首先，还是安装 gulp-autoprefixer 依赖：

npm install gulp-autoprefixer --save-dev

然后在 gulpfile.js 文件中引用它，并添加 pipe。完整代码如下：

var gulp = require('gulp'),
 sass = require('gulp-sass'),
 autoprefixer = require('gulp-autoprefixer');

gulp.task('styles', function() {
 return gulp.src('src/styles/*.scss')
 .pipe(sass.sync({
 outputStyle: 'expanded'
 }))
 .pipe(autoprefixer('last 2 version'))
 .pipe(gulp.dest('dest/styles/'));
});

然后在工程根目录执行 gulp styles 即可。

CSS 压缩 Link to heading

前端页面优化的重要一环就是文件压缩（minify），以达到节省用户的流量，加速页面载入的目的。下面我们对工程的 CSS 文件进行字节精简，也就是压缩。

第一步，仍然是安装依赖：

npm install gulp-minify-css --save-dev

同时，为了遵循压缩版文件在文件名中标明「.min」的惯例，我们需要一个文件改名包：

npm install gulp-rename --save-dev

接下来，仍然是编辑 gulpfile.js 文件，完整代码如下：

var gulp = require('gulp'),
 sass = require('gulp-sass'),
 autoprefixer = require('gulp-autoprefixer'),
 minifycss = require('gulp-minify-css'),
 rename = require('gulp-rename');

gulp.task('styles', function() {
 return gulp.src('src/styles/*.scss')
 .pipe(sass.sync({
 outputStyle: 'expanded'
 }))
 .pipe(autoprefixer('last 2 version'))
 .pipe(gulp.dest('dest/styles/'))
 .pipe(rename({suffix: '.min'}))
 .pipe(minifycss())
 .pipe(gulp.dest('dest/styles/'));
});

在工程根目录执行一下 gulp styles，未压缩版和压缩版的 main.css 都已经转换完毕了。

JavaScript 压缩 Link to heading

继续页面优化，我们需要把 JS 文件进行「合并（concatenate）」处理，并「丑化（uglify）」，形成一个几乎无法阅读但可以被浏览器执行的压缩版 JS 文件。

先安装依赖：

npm install gulp-uglify --save-dev

以及：

npm install gulp-concat --save-dev

然后编辑 gulpfile.js 文件，完整代码如下：

var gulp = require('gulp'),
 sass = require('gulp-sass'),
 autoprefixer = require('gulp-autoprefixer'),
 minifycss = require('gulp-minify-css'),
 rename = require('gulp-rename'),
 concat = require('gulp-concat'),
 uglify = require('gulp-uglify');

gulp.task('styles', function() {
 return gulp.src('src/styles/*.scss')
 .pipe(sass.sync({
 outputStyle: 'expanded'
 }))
 .pipe(autoprefixer('last 2 version'))
 .pipe(gulp.dest('dest/styles/'))
 .pipe(rename({suffix: '.min'}))
 .pipe(minifycss())
 .pipe(gulp.dest('dest/styles/'));
});

gulp.task('scripts', function() {
 return gulp.src('src/scripts/*.js')
 .pipe(concat('main.js'))
 .pipe(gulp.dest('dest/scripts/'))
 .pipe(rename({suffix: '.min'}))
 .pipe(uglify())
 .pipe(gulp.dest('dest/scripts/'));
});

在工程根目录执行一下 gulp scripts，JS 压缩就完成了。

将「自动化」进行到底 Link to heading

我们可以利用 gulp 的 watch 方法，让 gulp 主动监控我们对文件所做的修改，并自动启动所需的处理任务。

在 gulpfile.js 中添加我们的两行 watch 语句，完整代码如下：

var gulp = require('gulp'),
 sass = require('gulp-sass'),
 autoprefixer = require('gulp-autoprefixer'),
 minifycss = require('gulp-minify-css'),
 rename = require('gulp-rename'),
 concat = require('gulp-concat'),
 uglify = require('gulp-uglify');

gulp.task('styles', function() {
 return gulp.src('src/styles/*.scss')
 .pipe(sass.sync({
 outputStyle: 'expanded'
 }))
 .pipe(autoprefixer('last 2 version'))
 .pipe(gulp.dest('dest/styles/'))
 .pipe(rename({suffix: '.min'}))
 .pipe(minifycss())
 .pipe(gulp.dest('dest/styles/'));
});

gulp.task('scripts', function() {
 return gulp.src('src/scripts/*.js')
 .pipe(concat('main.js'))
 .pipe(gulp.dest('dest/scripts/'))
 .pipe(rename({suffix: '.min'}))
 .pipe(uglify())
 .pipe(gulp.dest('dest/scripts/'));
});

gulp.task('watch', function() {
 gulp.watch('src/scripts/*.js', ['scripts']);
 gulp.watch('src/styles/*.scss', ['styles']);
});

进入工程根目录，执行 gulp watch，我们会发现这次执行到「Finished…」之后并没有退出，而是一直挂在这一行。没错，gulp 已经在监视源文件目录了，这时候对src/scripts/ 和 src/styles/ 下的文件进行修改，gulp 就会自动执行处理。

结尾 Link to heading

以上处理已经能够为我们的工程提供一定的前端页面字节精简了，在 JS、CSS 代码量巨大的工程中，优化效果尤为明显。

参考：

多个域名访问同一个 CodeIgniter 的不同 Controllers

Mon, 18 Jan 2016 23:03:17 +0000

一套 CodeIgniter 部署，可以承载不同的业务：不同的 MVC 模块，用不同的域名访问。严格来讲，要让一个模块独立形成一套 MVC，需使用 wiredesignz 的 codeigniter-modular-extensions-hmvc 扩展。后者则是 CI 自身的路由所提供的特性。

关于 HMVC 的讲解之后有时间再写。本文只讲如何用不同域名访问不同的 Controllers。

配置 Nginx Link to heading

我的服务器环境基于 Nginx，所以这里贴出我的代码（需修改自定义部分后才可复用）。

server {
 server_name user.example.com admin.example.com;
 root /path/to/code/base;
 index index.php index.html index.htm;

 location / {
 try_files $uri $uri/ /index.php?$query_string;
 }

 location ~ \.php($|/) {
 fastcgi_pass 127.0.0.1:9000;
 fastcgi_index index.php;
 fastcgi_split_path_info ^(.+\.php)(.*)$;
 fastcgi_param PATH_INFO $fastcgi_path_info;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
 }

 location ~ /\.ht {
 deny all;
 }
}

注意把所有域名放在 server_name 的同一行，中间用空格分开。

我们照例使用 try_files 去除 URL 中的 index.php。

部署 CodeIgniter 并配置 routes.php Link to heading

部署过程就不细说了，若有问题直接甩评论上来吧。

仅以演示为目的，我们进入 /application/controllers 目录，把 CI 自带的Welcome.php 代码修改成如下内容：

defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome extends CI_Controller {

 public function index()
 {
 echo 'Hello user';
 }
}

然后，复制 Welcome.php，并命名为 Welcome_admin.php，并对文件内容也进行相应的修改：

defined('BASEPATH') OR exit('No direct script access allowed');

class Welcome_admin extends CI_Controller {

 public function index()
 {
 echo 'Hello admin';
 }
}

接着，让魔法在 routes.php 文件里发生吧。打开 /application/config 目录中的routes.php。在已有代码的后面插入下列代码：

if ($_SERVER['HTTP_HOST'] == 'user.example.com')
{
 $route['(:any)'] = 'welcome';
}
elseif ($_SERVER['HTTP_HOST'] == 'admin.example.com')
{
 $route['(:any)'] = 'welcome_admin';
}

现在，分别访问 http://user.example.com 和 http://admin.example.com，你将看到两个不同的控制器所生成的页面。即达到了多域名访问不同控制器的目的。

再配合 HMVC 扩展，我们可以将控制器分成一个个独立的模块，与 CI 的基础代码解耦，让开发时条理更加清晰。

CodeIgniter 的多版本 RESTful 接口

Sun, 17 Jan 2016 19:55:34 +0000

CodeIgniter 是基于 PHP 的框架程序，采用 MVC 式设计。配合 codeigniter-restserver 能够快速搭建 RESTful 服务。

本文介绍的是在 Nginx 服务器上搭建多版本 RESTful 服务的例子。即创建 http://api.example.com/v1/user 这种在 URL 中包含版本号的接口。

Nginx 配置 Link to heading

首先配置 CodeIgniter 的运行环境，在 Nginx 配置中添加如下代码：

server {
 # api server definition

 server_name api.example.com;
 root /your/codeigniter/folder;
 index index.php index.html index.htm;

 location / {
 try_files $uri $uri/ /index.php?$query_string;
 }

 location ~ \.php($|/) {
 fastcgi_pass 127.0.0.1:9000;
 fastcgi_index index.php;
 fastcgi_split_path_info ^(.+\.php)(.*)$;
 fastcgi_param PATH_INFO $fastcgi_path_info;
 fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
 include fastcgi_params;
 }

 location ~ /\.ht {
 deny all;
 }
}

其中使用 try_files 指令来重写 URL，去掉 CI 默认 URL 中的 /index.php 部分。

部署好 CI 的代码之后，访问域名，就能看到 Welcome 画面了。

配置 CodeIgniter Link to heading

下面对 CI 进行以下简单的设置，配合去除 /index.php 美化 URL 的工作。

找到 /application/config/config.php 文件，将 38 行改成如下内容（行号可能因为具体的 CI 版本而不同，我的版本是 3.0.4）：

$config['index_page'] = '';

然后找到同文件中的 55 行，确保内容与下面的相同：

$config['uri_protocol'] = 'REQUEST_URI';

引入 CodeIgniter Rest Server Link to heading

下载 codeigniter-restserver 后，将压缩包里的application/libraries/Format.php、application/libraries/REST_Controller.php和 application/config/rest.php 三个文件分别放进你自己的 CI 部署中的对应文件夹。

更多 CodeIgniter Rest Server 的使用说明请参考其 readme.md 文件。

创建 API 方法和转发规则 Link to heading

我们将通过在 controllers 目录下创建子目录的方式来实现多版本 API。在本文撰写之前，曾有 issue 表示 CI 只支持在 controllers 中创建一层子目录，无法使用多层。而本人实测后，目前版本的 CI 已经支持多层子目录了。下面是创建方法。

在 controllers 目录下创建文件夹，命名为 api。然后在 /controllers/api 下再创建一个文件夹 v1。在里面创建一个 Example.php 文件，输入如下代码：

defined('BASEPATH') OR exit('No direct script access allowed');
require_once APPPATH . '/libraries/REST_Controller.php';

class Example extends REST_Controller
{
 public function new_get()
 {
 $this->response([
 'error' => 0,
 'data' => 'user data from v1'
 ], REST_Controller::HTTP_OK);
 }
}

然后，再回到 /controllers/api 目录，创建文件夹 v2，在其中创建 Example.php文件，输入如下代码：

defined('BASEPATH') OR exit('No direct script access allowed');
require_once APPPATH . '/libraries/REST_Controller.php';

class Example extends REST_Controller
{
 public function new_get()
 {
 $this->response([
 'error' => 0,
 'data' => 'user data from v2'
 ], REST_Controller::HTTP_OK);
 }
}

其实两个 Example.php 文件的内容大部分相同，唯一的区别是返回的字符串标识出它们来自哪个版本的 API，方便我们测试。

接下来，就是定义 routes.php 中的规则了。打开 /config/routes.php 文件，在最下边添加如下代码：

$route['v(:num)/(:any)/(:any)'] = 'api/v$1/$2/$3';

这就是版本切换魔法的所在，这一行代码表示把任何形如 http://api.example.com/v1/any_request 的请求重定向到/controllers/api/v1/any_request 这个类中。其中，v1 的数字部分可以替换成任何数字，只要存在该数字对应的 API 版本即可访问。详细点说，等号左边的 (:num) 和两个 (:any) 分别对应右边的 $1、$2 和 $3，代表 URL 中的可变部分：$1 为 API 版本号，$2 为类名，$3 为方法名。也就是说，右边的层级实际上反映出文件系统中的目录和类下方法的层级。

现在，可以直接在浏览器中访问 http://api.example.com/v1/example/new，你会看到一串 json 内容，data 部分为「user data from v1」。接着，将 URL 中的 v1 换成 v2，data 部分就会显示出「user data from v2」。

这样，对 API 用户而言，切换版本号不会影响到已有的大部分代码。当然，前提是他们没有把版本号写死在自己的代码里。

总结 Link to heading

用 CodeIgniter 作为 API 后端的框架是个非常好的选择，官方文档和社区贡献内容都较丰富。除此之外，你也可以考虑使用 Slim 或者 Phalcon 等更加轻便的框架。

Laravel 5 Homestead 日常工作流程

Mon, 23 Nov 2015 10:51:15 +0000

本文是教程的第三步，并假设你已安装好全部所需软件。

本章将探索两种 composer 工具：homestead 和 laravel。接下来讲解一种典型的日常工作流程，通过 6 个步骤，来建立一个新的 Laravel 5.1 工程。

Homestead 工具 Link to heading

什么是控制台

每当你需要在控制台里进行一些操作时，你需要搞清楚是哪种控制台。

Homestead 控制台是指通过 SSH 连接到 Homestead 虚拟机。在 Windows 系统中，可以是通过 PuTTY 建立的连接（详情请阅读在 Windows 系统建立虚拟机的章节）。在其他操作系统中，在终端执行homestead ssh 命令就可以进行连接了。在本文中，凡是跟在 $ 后边的命令，都是在 Homestead 终端执行的。

OS 控制台是指 Windows 的命令行提示符或者其他你正在使用的终端软件。（本文中 % 符号后边的命令都是在 OS 控制台中执行的）

在宿主机的控制台中，我们输入 homestead 命令（不带任何参数），就可以轻松查看所有可用的 homestead 参数和命令。

Homestead 命令 Link to heading

% homestead
Laravel Homestead version 2.0.9

Usage:
[options] command [arguments]

Options:
--help -h Display this help message.
--quiet -q Do not output any message.
--verbose -v|vv|vvv Increase the verbosity of messages: 1 for normal output, 2 for more verbose output and 3 for debug.
--version -V Display this application version.
--ansi Force ANSI output.
--no-ansi Disable ANSI output.
--no-interaction -n Do not ask any interactive question.

Available commands:
destroy Destroy the Homestead machine
edit Edit the Homestead.yaml file
halt Halt the Homestead machine
help Displays help for a command
init Create a stub Homestead.yaml file
list Lists commands
provision Re-provisions the Homestead machine
resume Resume the suspended Homestead machine
run Run commands through the Homestead machine via SSH
ssh Login to the Homestead machine via SSH
status Get the status of the Homestead machine
suspend Suspend the Homestead machine
up Start the Homestead machine
update Update the Homestead machine image

我们每天接触最多的一个命令是 homestead up，用来启动 Homestead 虚拟机。

常用 Homestead 命令概览 Link to heading

这里是一系列常用的 Homestead 命令。

homestead up 启动 Homestead 虚拟机，或者说「点亮」虚拟机的电源。如果你使用了 provision 选项（homestead up --provision），则 provision 配置将对所有新增加的站点都生效。
homestead halt 停止 Homestead 虚拟机，或者说「关闭」虚拟机的电源。
homestead suspend 暂停 Homestead 虚拟机，可以理解为休眠。
homestead resume 将暂停的 Homestead 虚拟机恢复运行。
homestead edit 编辑 Homestead.yaml 文件。这个命令将使用当前与 YAML 文件格式关联的编辑器软件。
homestead status 查看 Homestead 虚拟机的当前状态

了解 Homestead.yaml Link to heading

Laravel Homestead 的配置都在 Homestead.yaml 文件中。该文件位于你的宿主系统 home 目录中的 .homestead 目录下。

查看该文件的内容，大致如下。

Homestead.yaml 的内容 Link to heading

---

ip: "192.168.10.10"
memory: 2048
cpus: 1

authorize: ~/.ssh/id_rsa.pub

keys:
- ~/.ssh/id_rsa

folders:
- map: ~/Code
to: /home/vagrant/Code

sites:
- map: homestead.app
to: /home/vagrant/Code/Laravel/public

databases:
- homestead

variables:
- key: APP_ENV
value: local

下面逐一解释各个配置部分：

ip 访问虚拟机所用的内网 IP。
memory 虚拟机的可用内存。
cpus 虚拟机的可用 CPU 数目。
authorize 此项应该指向你的 SSH 公钥。
keys 你的 SSH 私钥。
folders 共享文件夹，即宿主机中的文件夹和对应在虚拟机中的文件夹。在 Windows 系统中，~/Code 目录大致上等同于 C:\Users\YOU\Code 文件夹。在 OS X 中为/Users/YOU/Code。在 Linux 中通常是 /home/YOU/Code。当你在宿主机的这个文件夹里进行文件操作时，虚拟机中的对应目录中也会立即发生改变。
sites 站点列表（各个域名指向的路径），每当 Homestead 虚拟机启动时将生效。
databases Homestead 应该能自动创建的数据库列表。
variables 将在 Homestead 环境中生效的变量。

配置小技巧

我一般只对一处进行修改，将数据库下边的 homestead 改名为 xhomestead。这样做的目的在于，如果我忘记为新应用创建数据库，就会报错。否则，会使用默认的 homestead 数据库，我却无法察觉。

那么现在，除了 database 之外，我们不修改任何配置。

Homestead 虚拟机详细配置 Link to heading

字段	值
Hostname	homestead
IP Address	192.168.10.10
Username	vagrant
SU Password	vagrant
Database Host	127.0.0.1
Database Port	33060
Database Username	homestead
Database Password	secret

向 Homestead 虚拟机添加软件 Link to heading

若你需要在 Homestead 虚拟机中安装新的软件，可以使用 Ubuntu 的 apt-get 命令。

这是非常简便的两个步骤：

升级 Ubuntu
用 apt-get 安装

下边举例说明，当我们需要 unzip 这个软件时，应该怎样进行安装。

升级 Ubuntu Link to heading

# 将 Ubuntu 软件升级到最新
vagrant@homestead:~$ sudo apt-get update
vagrant@homestead:~$ sudo apt-get upgrade

选择「Y」来继续安装。如果安装过程中出现什么提示，尽量选择已有的或默认配置。

升级完 Homestead 虚拟机里的 Ubuntu 系统之后，就可以安装 unzip 了。

通过 apt-get 安装 unzip Link to heading

# 在 Homestead 虚拟机中安装 unzip
vagrant@homestead:~$ sudo apt-get install unzip

日常工作流程 Link to heading

通常，使用 homestead 处理日常工作的流程主要分成三个步骤：

第一步：homestead up 启动 Homestead 虚拟机开始一天的工作。 第二步：homestead ssh、PuTTY 通过 SSH 连接到 Homestead 虚拟机，直接访问文件，并执行 artisan 命令。 **第三步：**编写优美的代码。在宿主系统中，打开你最爱的编辑器，开始写代码。 可选的第四步：homestead halt 一天的工作结束后，你可以选择关闭 Homestead 虚拟机的电源。

六个步骤开启一个全新 Laravel 5.1 工程 Link to heading

每次建立新的 Laravel 5.1 应用时，你都可以跟随下边的六大步骤来进行。

比方说，我们要创建一个名叫 test.app 的工程，项目文件夹的名字就叫 test。

第一步创建应用骨架 Link to heading

通过 Laravel Installer（前置章节中安装好的 laravel 命令），可以迅速创建一个工程骨架。

创建一个新的应用骨架

$ laravel new test
Crafting application...
Generating optimized class loader
Compiling common classes
Application key [rzUhyDksVxzTXFjzFYiOWToqpunI2m6X] set successfully.
Application ready! Build something amazing.

第二步配置 Web 服务器 Link to heading

安装好应用骨架后，就可以在 homestead 环境中启动 Nginx 服务器，来为应用的public 目录建立网页服务了。

Homestead 环境中的 serve 命令可以轻松完成这一任务。

在 Homestead 中启动一个新的虚拟主机

$ serve test.app ~/Code/test/public
dos2unix: converting file /vagrant/scripts/serve.sh to Unix format ...
* Restarting nginx nginx                                    [ OK ]
php5-fpm stop/waiting
php5-fpm start/running, process 2169

这条命令会在 /etc/nginx/sites-available 目录下，为 test.app 生成一个新的配置文件，并在 /etc/nginx/sites-enabled 目录下生成一个指向该配置文件的软连接。

即使虚拟机重启，该配置也会依然存在。

为什么不直接编辑 Homestead.yaml

你问得对。另外一种建立 test.app 服务器的方式是 homestead edit 命令，并在 sites: 下边输入新的站点信息。但 serve 命令更简单，并且无需重新配置并启动 Homestead 虚拟机。

然而，有时你可能需要经常对某个应用进行配置，你完全可以去编辑 Homestead.yaml 文件。

第三步添加主机记录到 Hosts 文件 Link to heading

截至目前，test.app 的域名还无法解析（没有任何 DNS 记录），必须向宿主系统的 hosts 文件添加一条记录。编辑 Linux 或 OS X 中的 /etc/hosts 文件。Windows 系统中，该文件位于 C:\Windows\System32\drivers\etc\hosts。将 test.app 这个域名指向 Homestead.yaml 文件中指定的 IP 地址即可。

例如将下一行加入文件中。

Test.app 的 Host 记录

192.168.10.10  test.app

Windows 系统需要管理员权限来编辑 hosts 文件

在 Windows 中，你必须以管理员身份运行编辑器软件（例如写字板或 Sublime Text 等）。在 Linux 或 OS X 中则可以使用 sudo 命令。

在 Linux 或 OS X 中编辑 hosts 文件

sudo nano /etc/hosts
// or
sudo vi /etc/hosts

第四步 NPM 本地安装 Link to heading

为了稍后可以使用 gulp，我们需要将所需的 npm 模块都在本地安装好。

如果你用不到 gulp，那么就跳过这一步吧。

在宿主系统的控制台中进入工程所在的目录，并执行以下命令。

NPM 本地安装

$ cd Code/test
~/Code/test% npm install
npm WARN package.json @ No repository field.

v8flags@1.0.5 install /Users/chuck/Code/test/node_modules/gulp/\
node_modules/v8flags
> node fetch.js

flags for v8 3.14.5.9 cached.

[snip]

这样，gulp 所需的所有依赖都会安装到工程目录中的 node_modules 文件夹了。

第五步创建应用的数据库 Link to heading

如果应用需要数据库，进入 Homestead 虚拟机的 mysql 控制台就能轻松创建数据库了。

在 Homestead 虚拟机中创建数据库

$ mysql --user=homestead --password=secret
mysql> create database test;
mysql> exit;

数据库创建好之后，你需要在工程的根目录中找到 .env 文件，编辑其中的 DB_NAME 字段为适合的值。

修改 .env 中的 DB_NAME

// Change the following line
DB_DATABASE=homestead

// To the correct value
DB_DATABASE=test

就是这样简单。现在，你可以对数据表进行迁移和创建等操作了。之后的章节将进一步介绍这些操作。

第六步在浏览器中测试 Link to heading

打开浏览器，输入 http://test.app，你就能看到下面的画面了。

默认的 Laravel 5.1 首页

如果你看到的不是这个画面，那么之前的步骤中或许有不正确的地方。

其他 Homestead 小贴士 Link to heading

请在宿主系统中编写代码 Link to heading

之前的章节我们提到了这一点，这里再强调一次。请把代码编辑工作都放在宿主系统中进行。共享文件夹使用起来非常便捷，你在宿主系统的工程文件夹中进行的任何更改都会立即呈现在 Homestead 虚拟机中。

使用 .homestead/aliases 文件 Link to heading

每当你需要使用 homestead up --provision 或 homestead provision 命令重新配置 Homestead 时，.homestead/aliases 文件都会更新 Homestead 虚拟机中的各个替身。

所以通过这个文件，我们可以轻松添加新的替身、函数甚至其他环境变量。

保持 Homestead 虚拟机在最新状态 Link to heading

上文提到，只需两条命令就可以将 Homestead 虚拟机里的 Ubuntu 操作系统更新到最新状态。

保持 Ubuntu 最新

$ sudo apt-get update
$ sudo apt-get upgrade

本文回顾 Link to heading

本章详细讲解了 homestead 和 laravel 命令，以及创建一个 Laravel 5.1 工程的简单六步。

解决 PDF 复制文字重复的问题

Mon, 16 Nov 2015 17:16:19 +0000

今天整理一些 pdf 格式的文稿时，为了统计字数而把文字全选并拷贝到一个 txt 文件中。但是发现拷贝出来的文字会偶尔产生重复文字，例如：

吸⽓气时缓慢放松腹部
注意呼吸 ⾮非常好
帮助缩⼩小腰围

重复文字的位置非常多，会严重影响字数统计的结果，因此必须去重。根据 @rex. 大大的知乎回答，我尝试匹配了一下要处理的文本，结果发现这些有问题的重复字都无法被匹配。你若感兴趣可以亲自试一试，将上边例子里的重复字转换成 unicode 编码，你会发现结果是不同的。你可以使用这个在线工具来转换。

所幸得到 V2EX 的 @Sylv 指点，原来这是一个「Unicode 规范化」问题（查看原帖）。用 unicodedata.normalize()函数就可以将那些字形相同但实际上编码不同的文字的编码也规范化（统一化）。这样，就可以成功进行匹配并去重了。

Python 代码如下：

import unicodedata
import re
import sys

# input file name as a parameter in the command line
filename = sys.argv[1]
token = "tokenthatneverduplicates"

# open original file
file = open(filename, 'r')
raw = file.read().decode("utf-8")
file.close()

# tag original double characters and letters
treated = re.sub(r'(.)\1', r'\1' + re.escape(token) + r'\1', raw)

# do the normalization
normalized = unicodedata.normalize('NFKC', treated).encode('utf-8')

# remove duplicated characters
result = re.sub(r'([\x80-\xff]{3})\1', r'\1', normalized)

# remove tags made earlier
final = re.sub(token, '', result)

# save result to new file
newfile = open(filename + '-conv.txt', 'w')
newfile.write(final)
newfile.close()

代码中每一步均有注释，步骤非常简单。其中有个需要稍加解释的地方，由于去重的正则匹配会将所有重叠词变成单字，会导致原本正确的部分也被改掉了（如「慢慢地 -> 慢地」），于是用了一个小伎俩保留住它们：

执行规范化之前，在重叠词之间添加一个独特的文本标记，然后在规范化之后将标记去掉。标记即代码开头的 token 变量。如果非常巧合，原文中有和我预设的标记相同的文字，那么修改 token 的值即可。

代码已在 OS X 10.11 上成功执行。

附：代码不是最优，但 python 水平实在有限，目前就确保可用吧。

领养面包

Fri, 23 May 2014 06:25:16 +0000

领养了一只两岁的猫，面包。

Search for #TheBreadCat on Instagram.

上手 Raspberry Pi

Tue, 25 Mar 2014 18:20:06 +0000

快递找到我时还正在忙着录音，拆开塑料包裹才想起这是朝思暮想的 Raspberry Pi 到了！加上一并购买的杂七杂八的元器件，一起拎了一纸袋的东西回家。

不知不觉已经玩了一个多星期了。RPi 的设计初衷是提起学生对电脑的兴趣，而我的 linux 技术倒是真的得到了一点长进。抽象一些的讲，一种表面上的「便利程度」很容易就成为了引起兴趣的缘由。回想起来，对 BASIC 的热情是被 PC1000 点燃的。对 linux 的兴趣，很大一部分也是基于 RPi 可以直接用电源插头控制开关机的工作方式吧。总之，开关机不是一件需要斟酌的事之后，就觉得是少了一个巨大的负担。

具体用 RPi 做的事情，倒也不多。熟悉了那些常用的 linux 命令，学会挂载移动硬盘，配置了 AFP 共享给 Mac 使用，架了个 web 服务器，绑定了一个动态解析的域名，配合之前购买的代理扩展出了一个 Wi-Fi 环境与 3G 环境都能使用的 APNP，装上了 aria2 和 yaax 实现远程迅雷离线下载。似乎说得上来的目前就是这些。

中间还重新刷过一次操作系统。RPi 刚到手时，在官网下载了最新版本的 Raspbian，内核为 3.10.xx。使用中发现这个版本的内核在蓝牙方面有些毛病（导致那几天心情很躁），降级内核后又出现了重启时总是内核崩溃。所以还是只能重新下载一个旧版本的 Raspbian（只会用，不懂编译内核啊）。但一直没有时间测试蓝牙。（**更新：**测试后发现蓝牙问题依然存在，并且从之前的 reboot 命令后崩溃，变成了一连接任何蓝牙设备就崩溃。elinux 的解释是蓝牙棒本身的问题，芯片 bug 或伪劣芯片的原因。）

大概过两周就会搬家了。然后再去折腾那堆小器件吧。其实方案也挺傻瓜的，全都是兼容面包板的配件，玩起来大概和搭积木一样。总之这会是第一次感受用代码控制硬件嗷。

最近一股脑来了不少事，忙得连 instaFan 都没有时间修。很对不起依然在等待、向我抱怨的用户们。。这个周末也许会好一点，希望起码能让它像样工作先。

啊，说了这么多，不是应该摆上 RPi 的靓照一张嘛！

以及初次启动时忙碌地进行着 locale 设定（好像选太多了…

《日本物哀》书摘

Sun, 06 Oct 2013 00:00:00 +0000

拿到了本居宣长先生的《日本物哀》（王向远先生译本），非常喜欢。优雅地说话，一条条举例解释自己的想法，像是带着茶水逐渐泡开变色的感觉。自己也能从西方诸『格尔德斯』们的重型意见中暂时喘息一下（Google 输入法不支持单方引号）。

书才初读几页，若干有趣的细节值得收藏和留作参考，就摘录在这里吧，不定时更新。页码依照吉林出版集团有限责任公司 2010 年 10 月版本。

P19. 所谓『荒凉之处』，指的是末摘花那可怕而寂寞的家。在那种情况下读物语，之所以能够得到慰藉，是因为物语中写的事情与自己有些相似。心想和我一样遭遇的原来不止我一个人啊，于是心情就轻松了许多。

P21. 所谓『阴差阳错』的事情，指的是荒唐可笑之事。

P23. 无论如何，阅读物语，还是应以『感知物哀』为第一要义。感知物哀，首先要懂得『物之心』，而懂得『物之心』就要懂世态、通人情。（注：此处将佛儒之类的学说概称为『外国书』）

P24.『不唠叨』，就是不惹人讨厌，所谓『唠叨』就是说了许多没有意思的废话。在《源氏物语》各卷中，在把可写的一些事情省略时，常常说：『为避免唠叨，此不多赘。』

P25. 所谓『不着边际』，就是指那些随心所欲写下来的不可稽考的事情。

P25.『大热天』，指的是当时正值梅雨季节，由于湿热而致头发蓬乱。

P25.『笑着说道』表明这话是半开玩笑说出来的。

P26. ……一直以来那些认为《源氏物语》是为劝善惩恶而写，或是对好色的劝诫的观点，都是完全错误的。我们看这部无语，唯有『徒然心动』而已，哪有什么劝惩之意？

P27. 窃认为，《源氏物语》中所描写的事情可以分为两种，其意趣各有不同。第一种是仿佛实有其事，其趣旨就是让人看了不由得徒然心动，归根结底就是感人心、知物哀。感知物哀，故动情于心，而完全不存在所谓劝诫之意。另一种是物语的描写叫人匪夷所思，也没有什么明确的趣旨，但其中也有一些有趣的地方。冷静阅读时觉得岂有此理，但毕竟也有可观之处。然而缺乏『物哀』之心的愚钝之人，只喜欢那些稀奇古怪的情节，而不能很好地欣赏和体味『物哀』人情。

P32. 所谓『感动』，世人通常的理解会有偏差。实际上，对于所见所闻的一切事物，觉得有趣、可笑、可怕、稀奇、可惜、可爱、伤感等一切心理活动，都是『感动』。

P34. 她（注：紫式部）耻于贬损人物，其心胸是非常宽厚的，与外国作家的心理状态比比看，判然有别。

逼头：雪纳瑞·终章

Mon, 04 Feb 2013 22:20:29 +0000

逼头，雪纳瑞。西历 2013 年 1 月 29 日。

立春。倒春寒。天空一片铁黑，空气寒冷潮湿，距离昨天中午持续不到十分钟的一场大雨已经过去 13 个小时，永远烤不干的地面湿乎乎连成一片。寂静空旷的街道中央，确有细小的冰点飘来飘去，坐在轻骑上满脸都是小星星。这种尚未来得及形成雪花就掉落的冰点里，裹着各种工业尘埃，在接触到地面时形成一层薄薄的泥水。也是铁黑的。

山坡上的几株翠竹此时也都默不做声地等待着鹅毛大雪，也许它们某一年会因为走错路而碰巧落下。也许是今年呢？

竹丛生根的土里，谁会在意这种破破烂烂的地方？真的不用在意了。学不会的终究没学会，只知道过分的激动，兴奋起来就随地撒尿···真的不用再介意了。

阳光城 Link to heading

雨雪交加的南方是不存在暖气这一说的。就算冰天雪地也无法让人把回家和取暖直观地联系在一起。只是徒增一种想要逃离的感觉，即使是回家，也带着一幅逃难者的面容。

反而，在那无表情的脸上是永远也读不出逃离的冲动的。他眼里只有一个人，他的存在也只为一个人，任何场所都没有特殊意义，就算对那个人来说是一个被称为家的地方，对他来说也无所谓，总之有他的地方就是家。

泥泞的马路，嘈杂的十字路口，没有人见过这么不要命的奔跑者。世间的俗气规则保全了一个个呆滞的生命，然而没有谁能比他奔跑得更潇洒。

就这样一直跑着，有时他也回头看看，如果那个人没有跟上，果断掉头往回跑！扑上去！汪！！

紫禁城 Link to heading

不明就里的分离和黑暗，怎么看都像是一种惩罚。

咬坏的只是被子的左边，就因为这个被罚关厕所。下次一定记得不能咬左边，那个人喜欢左边吧。咬中间应该没问题的！

上次把尿撒到电视机里去了，就因为这个被罚少出门玩一次。下次一定记得那个人喜欢电视机。客厅的纱门和墙角应该没问题的！

突然很想出门去找十三栋的那只小妞，但等了好久都没见她出来。那个人也许猜不出为什么就是蹲着却不拉粑粑。因为，会毁形象的！这是爱的便秘！要说，其实还真有那么一点点是故意耗着的。

在万米高空中，他的思绪从头到尾地搜索了一遍记忆的书架，那些久远的过错是最让他后悔的事。总是轻率地开心，轻率地失意，轻率地表达，等到学会分辨，懂得了四方八面之情理，却发现，已经身处这万米高空了。披星戴月的旅程本身辛苦，但与那个人却仍然分隔好几个大气层，真的可以靠意志撑下去吗？

「不管怎样，那个人一定只是惩罚我。虽然不知道是哪个错，更不知道应该如何改正，但我一定能见到那个人，多晚都可以，到时我只要用力舔他就好！」

木桶镇 Link to heading

既要承受这个世界的矫情，又要坚持自己认准的那种单纯，最后，自己终究还是只能被自己接受。当得知时日无多，自己也仍然在努力坚持着。

双眼已经睁不开，好困，梦境在慢慢变得实在和凝固。我踩着六月下午的青草地，愉快地一路小跑。他在不停呼唤我的名字。他在哪？他又是谁？他是我认识的那个人。他是谁？我不认识。我不认识。我不认识。

锵！破碎的声音！

双眼睁开了，亲爱的，原来是你！

把童年插到电视机上（雅达利游戏）

Fri, 01 Jun 2012 09:44:38 +0000

撸了一遍今天的 RSS，其中有一条是雅达利创始人说一部分苹果文化源于雅达利公司（乔布斯的第一份工作就是在雅达利做设计师）。

雅达利的诞生比我早 15 年，它的家用机里最经典的当属 Atari 2600（视频广告，简单评测）。我当然没有福气使用这款风靡全球的游戏机，不过确实玩过雅达利的游戏。原因是老爹曾买了一台雅达利 2600 的山寨机：皇冠游戏机。

现在网上根本都找不到皇冠游戏机的图片了。不过山寨机再山寨还是跟它的原型差不离的，墨绿塑料壳机身，长二十来公分，宽十来公分，厚度不到十公分，单插卡槽，支持双手柄，可以调节游戏难度，电视机彩色或黑白模式，通过射频线接驳电视机。我记得每次开始玩游戏之前都需要疯狂地搜索信号，老电视有时能记住预选，但经常会消失，必须重新搜索所有信号。其实最高兴的时刻是画面上的雪花消失并出现一个彩色的画面的时候。

和机器一起买回来的游戏共有 6 盒卡带，好几个卡带的印刷塑料封面已经没了，换成了老爹自己剪裁、填写游戏名称的纸质封面。我觉得那几盒卡带最神奇的设计就是卡带上有个开关（其中一盒甚至有两个开关！），拨到左边可以玩一款游戏，拨到右边就可以玩另一款游戏，都是二合一卡带，非常「划算」，而那盒两个开关的卡带自然就是四合一「超值装」。

有些卡带已经读不出来了，包括我最喜欢的《枪战》。

这是我玩过的唯一一款双人游戏，中间的障碍物包括仙人掌、会上下跑的马车等，拆完障碍物之后就是两边小人火拼了。老爹没怎么陪我玩过小霸王游戏，不过跟他对战过《枪战》可是记地真真儿的。

其次就是无比经典的《警察抓小偷》，Activision 出品。如今这个公司的名字已经如雷贯耳了。游戏视频。

这款游戏曾让我一下午没挪窝。不过主要原因是死得勤，后边的关卡都没怎么见过（摊手）。玩家控制警察，可以左右跑、跳跃躲开电网、下蹲躲过飞机、进电梯下电梯，最后捉到一直躲避警察的小偷。可能喜欢它的原因大部分还是受到精致画面的影响，它连字体都是设计过的，而不像其他几款游戏里面那样毫无粗细变化的字体。

然后还有《高楼盗宝》（其实应该叫蜘蛛侠）。这也算是个可玩性很强的动作类游戏了。游戏视频。

另一枚精致的游戏《挤牙膏》，不得不说美工真是太让人舒畅了。游戏视频（有重口图 2 秒）。

看起来简单，保卫 8 颗牙，朝着不断涌入的食物射牙膏，不让它们碰到牙齿。不过到后面食物行进的路线越来越诡异，速度也越来越快，一处失守满口遭殃。哪怕最后只剩一颗牙了也没法偷懒，如果只朝这颗牙射牙膏，食物会非常突然而精准地落到牙膏碰不到的地方，干掉最后一颗牙。

还有一款叫做《开飞机》（本名 River Raid，好吧这些中文名都是听老爹叫的，我也一直这样叫）。游戏性和画面都很赞。游戏视频。

玩法和现代的竖版飞机几乎一样，飞机向上飞，可以控制快慢，路上有会移动的敌人，不能碰到，还有加油站，飞机油耗非常快，随时需要补充燃料。也不能碰到绿边，一碰就挂。

最后非常喜欢的一款《海底救人》。游戏视频。

开着黄色潜水艇，向各种危险的鱼类发射子弹（并躲避鲨鱼发射的子弹 -，-），同时救下在水里逃命的人。氧气耗尽之前需要返回海面补充氧气，但每次上浮会消耗一个营救上来的人，所以如果一个人都还没有救到，浮上去是会屎的。

其他游戏我都叫不上名字，也查不到了。比如某款赛车、一个被老爹叫做《鸡毛信》的动作游戏等。

那么，该去吃六一的晚餐了。祝是不是儿童的儿童、生没生儿童的非儿童都儿童节快乐。

instaFan：将 Instagram 照片同步到饭否

Sun, 29 Apr 2012 08:27:31 +0000

2020 年 6 月更新：Fanstafou 服务已下线，感谢 1000 多位小伙伴多年的关照！与 instaFan 有关的重要饭否消息贴在了本文结尾处，留作纪念。

2016 年 5 月更新：instaFan 服务已更名为 Fanstafou。

instaFan 是一枚同步服务，可以将你的 Instagram 新照片自动同步到饭否。同步内容包括：照片以及该照片的描述文字、标签、照片展示页面地址、地理位置信息。

特色：

OAuth 认证，确保信息安全
包含若干种同步模式随时可更改，如全部同步、只同步指定照片、暂停同步等
自动将 Instagram 照片的标签转换成饭否格式（双“#”号）
与 Instagram 内置的分享样式保持一致（如照片地址、默认标题等）
支持新增的饭否地理位置显示功能

注意：同步服务仅对新发布的照片有效，旧照片不会被同步。所以，如果你选择了“只同步有 #fanfou 标签的照片”时，在照片评论里添加 #fanfou 标签是不会同步的，只有在发布时添加此标签才有效。

欢迎在评论中留下你的使用感受和建议。我的 Instagram 用户名是 mogita，一起玩吧！！

mogita It is working…#instaFan# http://instagr.am/p/Jk6tyauYkv/
2012-04-19 05:55 通过 FanstaFou

mogita 试用接受中！#instaFan# http://instagr.am/p/J_Xl_HuYgI/
2012-04-29 14:08 通过 FanstaFou

mogita 给 instaFan 画了个横图，简笔画水平。。哈哈。。
2012-05-28 03:50 通过网页

mogita instafan 刚刚获得了开放后的第一百位用户。
2012-08-06 17:12 通过网页

mogita 逐步添加详细的 log，发现 instagram 确实偶尔不会将用户发布新照片的消息推送到 instaFan。╮(￣▽￣")╭
2012-12-31 14:32 通过 API

mogita 更新了一下#instaFan#，唯一针对提升同步成功率。不知道能提升多少。。欢迎来操。
2013-02-22 22:57 通过网页

mogita instaFan 同步数过万了。。回家好好爱抚一番。
2013-03-20 10:15 通过「御飯 iPad」

mogita SAE 上跑 instaFan 看来希望渺茫了。要是没被 fb 收购就好了。
2014-05-02 11:01 通过「御飯 iPhone」

mogita instaFan 暂定下周二（5 月 12 日）17 点到 20 点暂停服务 3 小时。（主机商说要修电源。。
2015-05-05 17:16 通过网页

mogita 今天算是把 instafan 新版服务跑起来了。长期测试，鸭的实时推送接口根本就是个坏的，有些用户发照片它永远不会给我发消息。还是特么轮询靠谱。当然，这是新版的设计，目前版本的代码不打算更新了。
2016-05-10 18:20 通过御飯 iOS

mogita 今天下午开始迁移 instaFan 数据，为新版服务做准备。现有同步服务会暂停运行，迁移完成后服务会自动恢复。由于数据库结构升级，预计迁移过程需要 1-2 天，请各位用户见谅。#instafan# #instagram#
2016-05-26 14:05 通过网页

mogita 如果因为 instagram 的政策，#instafan# 不得不改名的话，是完全换个名字还是小改避开政策就好呢？（官方不允许 ig、insta、gram、instagram 字样出现在名字里）
2016-05-27 14:02 通过网页

mogita 我自己也+1 转@西瓦哈哈哈被fanstafou逗笑。觉得只要朗朗上口的都行转@mogita fansync？fantasync？fanstafou？syncfou？fanfoutongbu？tongbuyinsiteguranmuzhaopiandaofanfou？
2016-05-27 14:18 通过网页转自mogita(查看)

mogita Instagram 到饭否同步服务 instaFan 已改名为 FanstaFou，且刚刚完成了一次重要的机能升级，提升服务的稳定性。访问地址变更为 http://fanstafou.mogita.com。老用户已自动升级为新版，无需进行任何操作。Enjoy！
2016-05-28 11:47 通过网页

mogita 五月底更新后的 Fanstafou 截至现在已同步了 10104 张照片。即每个月已知用户要发送 2500 张左右的照片。平均每天发送大约 83 张照片。
2016-10-10 10:48 通过网页

mogita 在线上运行了 7 年 6 个月零 4 天，经历了一次重写，一次服务迁移之后，Fanstafou 代码库喜提首次 git commit。
2019-10-23 12:27 通过网页

mogita Instagram API 六月底彻底淘汰，又不想接触 Facebook 平台，冗长赘余的配置和审核，取代了激情迸发的美丽时代。再见 Web 2.0，再见 FanstaFou。
2020-06-07 03:11 通过御飯 iOS

More Words：不定长、部分符合英文单词快捷检索

Fri, 03 Feb 2012 18:32:23 +0000

词汇量有限是个大问题，不用谈表达，连想法都无法具体转成一种符号。在个人现有词汇量的基础上，如果只知道某个单词中的几个字母，如何找到或罗列出所有按一定顺序包含这几个字母的单词？所以适时依靠一下强大的工具吧。

用 More Words 可以检索出 Enable2k North America 词汇表中的 173528 个单词，本意是帮助人们解决字谜游戏等。由于是字谜游戏专用的单词表，所以不包含单个字母的单词或部分专有名词。

https://www.morewords.com

例如，如何找到尽可能多的以 “at” 结尾的单词呢？在搜索框里输入 *at 就可以了。干脆把网站的搜索示例稍微翻译一下吧：

查询确切的单词“crosswords”：crosswords
三个字母的单词，结尾字母是“r”：–r
六个字母的单词，前两个字母是“pu”，最后一个字母是“e”：pu–e
十个字母的单词，中间两个字母是“sw”：--—-sw—---
包含“sswo”这个字母顺序的任意长度单词：*sswo*
以“cross”开头的任意长度单词：cross*
以“zzle”结尾的任意长度单词：*zzle
以“a”开头并以“z”结尾的单词：a*z
以“b”开头并在中间某个位置包含“c”，且以“d”结尾的单词：b*c*d
以“ab”开头且不包含“e”或“o”的单词：ab* ^eo

还有其他用法，例如：

将以“at”结尾的单词按从短到长的顺序全部排列出来： https://www.morewords.com/ends-with-by-length/at/
或者将以“at”结尾的单词按流行度排列出来： https://www.morewords.com/most-common-ends-with/at/

用法还很多，不一一列举了。值得一提的是检索速度还算快，页面也很干净。

好吧，我在最后必须承认，这个工具有助于在写词时偶尔偷个懒。梦境才是最好的写作工具。

Use it well.