Software & Tools | Attack on Life

LinkBatch - A Chrome Extension for Batch Downloading Links

Sat, 14 Feb 2026 20:00:00 +0800

Origin

In daily work and life, for example on GitHub release pages, I often need to click multiple download links, which is really annoying. It’s even worse if you have the download location confirmation dialog enabled. To solve this problem once and for all, I decided to build a Chrome extension.

Feature Design

The general idea:

Select an area on the page, automatically extract all links within it, click download, and Chrome directly initiates N downloads for all the links.
Support blocking links with specific file extensions, with settings saved so that future visits to the same site can use quick downloads right away.

Development

Once the features were clear, development was straightforward. I found a Chrome extension template, quickly coded it based on the feature design, tested it without issues, and published it to the Chrome Web Store. If you’re interested, you can download it directly.

Notes

To avoid the browser prompting for a save location on every download, you need to manually disable that setting - the extension cannot override this.

Download

Customizing Mouse Buttons

Fri, 21 Nov 2025 23:52:08 +0800

At home, I primarily use a Mac mini. Since it lacks the trackpad found on MacBooks, switching between full-screen desktops can be cumbersome. I considered buying a USB-C Trackpad 4, but I realized that juggling a Trackpad, mechanical keyboard, and mouse might be inefficient and end up gathering dust. Today, during a conversation with a colleague, I learned that Logitech mice allow for custom button mapping to switch desktops. I quickly set it up and found that it works perfectly for my needs. Here’s a quick guide on how to do it.

Device Compatibility

I am currently using the M720, which supports button customization. If you have a Logitech mouse, you can check its specifications online or install the app, which will notify you if your device is supported.

Software

Install the Logi Options+ software.

Logitech also has an older version called Logi Options, but it has been largely superseded by Logi Options+. I recommend installing the newer version. If it reports that your mouse is unsupported, you might try the older Logi Options.

You can also search for your device model on the official website; if it appears in the list, it is supported.

Setup Steps

Open the Logi Options+ software. If your mouse is already connected to your computer, it will be recognized automatically.
Select your mouse device to enter the button customization interface.
Choose the button you want to customize. I stuck with most of the defaults, as they are already quite well-optimized. The only change I made was setting the scroll wheel button to the command + up hotkey, allowing me to quickly return to the top of a webpage.
Logi Options+ supports multiple languages. It defaults to the system language, but you can manually change it in the settings.

Note: Even default button assignments may require the Logi Options+ software to be installed and running to function correctly. Without the software, these shortcuts may not work.

If you want to sync your settings across multiple devices, you can log in with a Logitech account. This will save your button configurations to the cloud, ensuring a consistent experience when switching between different machines.

Other Features

Logi Options+ also offers features like multi-device synchronization, Smart Actions, and AI integration. However, since my ecosystem is primarily Apple-based—which already handles sync well—and I use efficiency tools like Alfred, I haven’t found a need for these extra features yet.

Final Thoughts

After trying it out for a bit, here are my impressions:

It takes some time to build the muscle memory.
This setup effectively fulfills my need for quick desktop switching.

Alfred Theme Recommendations

Wed, 20 Aug 2025 16:10:18 +0800

Alfred is a powerful productivity tool on macOS. It supports custom themes to improve the user experience. This post introduces recommended Alfred themes and how to install them.

Raycast Style

Install

Japan Trip: How I Set Up My iPhone - Useful Apps & Features

Wed, 25 Jun 2025 21:37:53 +0800

I recently went to Japan and found that some iPhone settings and apps really helped me out. Here’s a summary that might be useful if you’re traveling abroad.

Note: Non-iPhone devices likely have similar features/settings that you’ll need to find yourself.

iPhone System Settings Optimization

Automatic Time Zone Settings

If you enable automation here, your phone will use GPS to directly determine the time zone, and you don’t need to manage anything as a user. Of course, if you only want to fix the time zone, you don’t need to enable this.

For example: If you go to Japan, which is GMT+7, one hour ahead of China, when you see 5 PM in Tokyo, it’s actually 4 PM in Beijing.

Automatic time zone relies on GPS, so airplane mode doesn’t affect it. Therefore, it’s recommended to enable it directly in normal times.

Apple Wallet Configuration

Apple Wallet can add not only domestic transit cards but also international ones. For example, in Japan, you can add a Suica card. After arriving in Japan, you can search and add a Suica card, use your linked card (such as a domestic prepaid card) to top up, and then you can smoothly make card payments. This is really great and saves you from downloading a separate app.

Cellular Settings

Since phones are dual SIM, when traveling abroad I often just set up the card directly without removing the domestic card. For example, in Japan, I bought a data card, and I only needed to insert the Japanese card after arriving in Japan, then set the cellular data to use the new card.

Settings -> Cellular -> Select the specified card, don’t allow automatic switching.

Essential Travel App Recommendations

Google Translate - Real-time Translation Tool

For example, in Japan, you often see Japanese-only descriptions that are completely confusing. While English might be somewhat understandable, Japanese is completely incomprehensible. Google Translate helps a lot in this situation - just select the camera, point your phone at the Japanese text, and it can translate to English in real-time. Isn’t that amazing?

In Japan, I went to a small barbecue restaurant where the owner didn’t speak English or Chinese, and there was only a Japanese menu. Without such a real-time translation app, I couldn’t even order food! 😊

Abroad, you can indeed use Amap since it has international business, but Amap has several issues:

Location tends to drift.
For example, Osaka’s light rail in Japan lacks time information.

I recommend using Apple’s built-in Maps or Google Maps instead. If using Apple’s built-in Maps, you can also sync with Apple Watch for more detailed navigation data - the experience is great. But with Amap, it’s much worse - the watch just shows an arrow.

Klook - Travel Booking Platform

Klook is a mobile application platform focused on global travel experience booking, providing one-stop travel services including attraction tickets, local activities, transportation, hotels, and dining, covering over 2,700 destinations worldwide.

For example, in Japan, I purchased the Osaka Amazing Pass through it, which was quite convenient. I found that many countries like the US and China also offer various ticket services on the platform.

Final Thoughts

These are the useful settings and apps I discovered during my recent trip. If you have any good discoveries, feel free to share them as well.

How I Organize My iPhone Home Screen

Wed, 18 Jun 2025 20:46:12 +0800

Everyone arranges their phone differently. Here’s the system I settled on—it’s simple, efficient, and easy to maintain.

Context: My daily driver is an iPhone 16 Pro, so the walkthrough references iOS. The same ideas apply to other platforms with minor tweaks.

One Screen Only

I keep everything on a single home screen. No swiping through multiple pages, no hunting for icons. To make that work, I rely on one folder for low-frequency apps and keep only the essentials visible.

Keep High-Frequency Apps Visible

“High frequency” means daily use. For me that includes YouTube, Spotify, Xiaomi Home, Eudic dictionary, Futu, ChatGPT, etc. Everything else—Gemini, Doubao, Xiaohongshu, banking apps—counts as low-frequency.

Tip: Limit the number of “must have” icons. If you don’t open it every day, it probably belongs in the folder.

One Folder for Everything Else

All low-frequency apps live in a single folder called Daily. That keeps the screen tidy and makes maintenance simple.

Use Spotlight Search

With most icons tucked away, Spotlight becomes essential. Swipe down, type the app name, tap, done.

Optional: Widgets

Once you compress apps into one folder, you’ll find spare space. Drop in a widget for quick info—calendar, to‑do list, weather, whatever makes sense for you. I use a date widget, but a tasks widget works just as well.

Wrap-Up

The core ideas:

One screen, no clutter
Visible icons only for daily-use apps
Everything else lives in a single folder + Spotlight search
Widgets add convenience without overwhelming the layout

It’s clean, fast, and easy to tweak. Try adapting it to your workflow, and feel free to share your own setup tips!

One-Time Code Autofill Feature Enhanced in iOS 26 and macOS Tahoe

Sat, 14 Jun 2025 14:24:44 +0800

Whether it’s iOS or macOS, I frequently use the autofill verification code feature in my daily routine, but it has many limitations. For example, on Mac, it can’t autofill verification codes in third-party browsers like Chrome, and it doesn’t support filling codes from emails. Finally, these issues have been resolved in iOS 26 and macOS Tahoe.

Email Verification Code Support

For instance, when I log into Twitter on my Mac, the system can now recognize and fill verification codes sent to my Gmail inbox. The popup verification code also shows a prompt saying “Verification code from email”. This feature previously only supported SMS verification codes.

Note: This feature is supported in both iOS 26 and macOS Tahoe.

Third-Party Browser Support

For example, when I use Chrome on my Mac to log into Douban and click “Get Verification Code”, the system automatically pops up the verification code filling interface. This functionality was not supported in previous versions.

Note: This feature is supported in both iOS 26 and macOS Tahoe.

Remaining Limitations

Although the autofill functionality has been enhanced, some drawbacks still exist:

Verification codes have time limits. Whether SMS or email verification codes, they usually have time restrictions and cannot be used after expiring. The exact time limit is currently unknown.
Cannot view historical verification code records. For example, if you want to check a very old verification code, you can only look it up through SMS or email manually.

Third-Party Enhancement Solutions for Mac

On Mac, all SMS messages are stored in an SQLite database, and you can use some third-party tools to view historical verification codes. For instance, I regularly use the productivity tool Alfred, so I can use the following workflow to enhance the autofill verification code functionality.

Final Thoughts

Overall, the automatic verification code prompt feature is excellent. If you don’t want to wait until September, you can try upgrading safely to experience it early. I also look forward to Apple further improving the autofill verification code functionality.

Mac USB-C Port Guide: Far More Than External Displays

Sat, 14 Jun 2025 10:22:39 +0800

Macs come with powerful USB-C/Thunderbolt ports. They’re not just for charging - these ports are key to expanding performance. This article shows how to make the most of them.

1. Connect external displays

Mac USB-C ports support audio/video output and can:

Connect directly to USB-C monitors
Use adapters to connect HDMI/DisplayPort monitors
M1/M2 Macs support up to two external displays
Support up to 6K@60Hz output

2. High-speed data transfer

Thunderbolt 3/4 provides:

Up to 40Gbps transfer speed
External NVMe SSDs can reach 2800MB/s read/write
Daisy-chain multiple devices

3. The power of docks

A high-quality dock can provide:

Multiple USB-A ports
Ethernet
SD card reader
Audio jacks
Extra USB-C ports
Up to 100W fast charging

Recommended: CalDigit TS4 is one of the most capable Thunderbolt 4 docks.

4. External GPU (eGPU)

With Thunderbolt you can:

Connect an external GPU enclosure
Boost graphics performance
Great for video editing and gaming
Note: Only supported on Intel Macs

5. Pro audio gear

For music creators:

Connect professional audio interfaces
Support MIDI devices
Low-latency audio I/O
Use multiple audio devices at once

6. Video capture

Creators can:

Connect HD cameras
Capture video in real time
Live stream
Use 4K60fps capture cards

7. Network expansion

Via adapters or docks:

Add Gigabit Ethernet
More stable connections
Ideal for high-speed network needs

8. Charging and power delivery

Strong power delivery:

Up to 100W PD fast charging
Quickly charge iPad and iPhone
Support reverse power delivery
One port for both charging and data

Usage tips

Prioritize reputable cables. Even if both are USB-C, specs can vary a lot.
- Check power and protocol support
- Recommended brands: Anker, Belkin, etc.
Notes
- Different Mac models support different features
- M1/M2 Macs have limits on external displays

Final Thoughts

Mac USB-C/Thunderbolt ports offer strong expandability. Using them well can significantly boost productivity. As technology evolves, we’ll likely see even more innovative use cases.

10 Practical iOS Tips to Make Your iPhone Better - Part 2

Fri, 13 Jun 2025 15:55:23 +0800

A big part of the iPhone’s excellence comes from iOS’s friendly interactions. Learning a few tips can boost your daily happiness.

Continuing from the previous post, here are 10 more tips. If you already know some, just skip them.

Note: Most of the screenshots below are from my own device. The system language is English, so some setting names may differ from Chinese systems, but the functions are the same. Thanks for understanding.

1. Message SMS forwarding

For example, if I log in to a PC website and request a verification code, the code arrives on my phone. With SMS forwarding enabled, the PC can also receive the code, which is convenient for filling it in.

How to set it up: Go to Settings > Apps > Messages > Text Message Forwarding, then select the devices that should receive SMS (they must use the same Apple ID).

For example, a newly activated device like a MacBook Air will not receive SMS notifications from other devices by default. You need to enable it as shown above.

2. Show the camera grid

To compose better photos, you can enable the 3x3 grid to help align subjects.

How to enable: Go to Settings > Camera and turn on “Grid.” You’ll then see the grid lines when taking photos.

3. Record screen with microphone audio

When recording your screen, you can enable the microphone to capture voice narration.

How to use:

Open Control Center.
Press and hold the record button, then turn on the microphone.
Start recording. The mic icon turns red to indicate it is recording audio.

4. Rename your iPhone hotspot

If you use your iPhone as a hotspot and do not like the Wi-Fi name, just rename the device.

How to change: Go to Settings > General > About > Name and edit the device name (Personal Hotspot uses this name).

5. Change the default browser

I do not like Safari and prefer Chrome, so I change the default browser to avoid opening links in Safari every time.

How to change: Go to Settings > Chrome/Safari/Default Apps and set your preferred browser.

6. Delete multiple messages quickly

If you want to delete multiple consecutive messages at once, you can use a gesture instead of tapping them one by one. Use two fingers to swipe from left to right to enter selection mode, then use two fingers to swipe up or down to select or deselect consecutive messages. This is much faster.

Note: The same quick-selection gesture works in Mail and Notes as well.

7. Home screen edit: multi-select apps

After long-pressing any app icon to enter edit mode, use another finger to tap additional apps. You can then move multiple apps to another page or folder at once, or delete them together, which is much more efficient.

8. Keyboard: caps lock for continuous uppercase

When you need to type uppercase letters continuously, double-tap the Shift key to enable Caps Lock. The Shift key will show an underline; tap again to exit. This is much more convenient than pressing Shift each time.

9. Triple-tap to select a paragraph

You usually double-tap to select a word, but triple-tap selects the entire paragraph. This is especially useful when editing long text and you want to copy a whole paragraph without dragging.

10. Quick scroll to top

In any scrollable view, tap the top of the screen (time, Dynamic Island, etc.) to jump to the top instantly. This is handy when reading long content.

Final Thoughts

iOS, macOS, tvOS, and others all have many useful tips. Learning them can save a lot of time; this post only scratches the surface.
If you know any impressive tips, please share them in the comments.

10 Practical iOS Tips to Make Your iPhone Better

Sun, 08 Jun 2025 15:55:23 +0800

A big part of the iPhone’s appeal comes from iOS’s friendly interactions. Learning a few tips can boost daily happiness. Here are some to start with—skip any you already know.

1. Find your Wi‑Fi password

Go to Settings > WLAN.
Tap the “Edit” button in the top right.
Authenticate with Face ID or Touch ID.
Tap the “i” button next to the Wi‑Fi network you want.
Tap the password once to reveal it.

For a currently connected network, you can also tap the “i” button next to the name to view the password.

2. Check battery levels of other Apple devices

iPhone can show battery status for other Apple devices too.

Open the “Find My” app.
Tap the device and the battery status appears on its detail page.

Battery status doesn’t show an exact percentage, but you can infer it from these indicators:

If fully charged, it shows green.
If in Low Power Mode, it shows yellow.
If charging, there’s a lightning icon on the battery.
If powered off, the battery icon disappears.

To make this work, all devices must be signed in with the same Apple ID.

By the way, if your family’s iPhones are in iCloud Family, you can check their battery status too.

Note: AirTag is special. It usually doesn’t show battery info unless the battery is low.

Take a screenshot.
Press and hold the preview in the bottom left for 2–3 seconds until the share sheet appears.
Tap AirDrop or share to an app.

Note: I didn’t know this for a long time. I used to tap the preview, go to the edit page, and then share—it’s more cumbersome.

4. Preserve camera settings

When you open the Camera app, custom settings reset to defaults. You can lock settings to prevent that.

Go to Settings > Camera > Preserve Settings.
Toggle the settings you want to keep.

5. Set up a timer

If you use timers often (like when cooking), add a quick shortcut in Control Center.

Open Control Center.
Press and hold an empty area to enter edit mode.
Tap “Add Control” at the bottom center.
Search for “Timer” and add it.

After adding it, you can quickly start a timer:

Open Control Center.
Tap the Timer control to set a duration, or press and hold it to expand, then swipe up or down to adjust.
Tap “Start.”

Besides this, Siri is great for timers. I usually say, “Hey Siri, set a 5‑minute timer.”

6. Text replacement

If you often type things like ID numbers or addresses, use text replacement to speed up input.

Go to Keyboard > Text Replacement.
Tap + to add a new shortcut.

For shortcuts, I recommend starting with t to avoid accidental triggers.

Text replacement syncs via iCloud to all Apple devices, so it works on Mac/iPad too.

7. Scan text

If you want to get text from a paper document into Apple Notes, there’s a method besides taking a photo with OCR.

Open Notes.
Create a new note.
Press and hold in a blank area until the menu appears.
Choose Attachments > “Scan Text.”
When the camera opens, frame the page until it appears as text in Notes. You can tap to select the scanned area.

8. Select text directly from photos

Apps like WeChat support extracting text from images, but the best experience is still iOS’s native Photos app.

Open Photos.
Choose an image.
Press and hold the text in the image until copy/selection options appear.

This works on iPhone, Mac, and iPad.

9. Type URLs faster

When typing a URL, here’s a shortcut:

Bring up the keyboard.
Press and hold the “.” key until the extension pop‑up appears.
Slide your finger to the option you want.
Press Return.

There are similar quick inputs, for example long‑pressing . to choose ....

10. Close all tabs

Unlike Chrome and other third‑party browsers, Safari doesn’t offer a direct “Close All Tabs” button, but there’s a workaround:

In Safari’s tab view, press and hold any tab to show options. One of them is “Close Other Tabs.” Choosing it closes all tabs except the selected one.
To close the selected tab too, just swipe left on it.

You can also tap “Select Tabs,” then drag to select multiple tabs and close them.

Final Thoughts

iOS, macOS, tvOS, and others have plenty of great tips. Learning them saves a lot of time; this post only scratches the surface. If you have any impressive tips, please share them in the comments.

Did You Know? The iPhone USB-C Port Is More Than Just Charging

Tue, 03 Jun 2025 11:52:37 +0800

The iPhone’s USB-C port does more than charge - it can expand storage, connect external keyboards, use external microphones, and more.

For years, the iPhone used Lightning, which meant carrying two kinds of cables when going out. I kept wondering when iPhone would switch to USB-C. Finally, Apple replaced Lightning with USB-C on the iPhone 15 and 16 series, so we no longer need two cables. But the key point is that USB-C is far more than a charging port. If you only know it for charging, you’re underusing it - you should know its real power.

Here are 8 ways to unlock its full potential.

1. Charge another device

You can use USB-C to charge other devices. Your iPhone can supply up to 4.5W, enough to charge AirPods, an Apple Watch, or even another phone.

Just plug one end of the USB-C cable into your iPhone and the other into the device - boom, you’re a mobile power station. Pretty cool, right?

Note: With a USB-C to Lightning cable, you can also charge older Apple devices.

2. Expand storage

Expand storage via USB-C

iPhone 15 and 16 support external storage like USB drives and even SSDs. You can move large files off your iPhone to free up space.

I personally like compact Samsung Type-C flash drives.

Samsung Type-C drives are fast and efficient; if you’re a creator, they can even handle ProRes video storage.

3. Use an external keyboard

Use a keyboard with iPhone via USB-C

Via USB-C, you can connect a full-size keyboard to your iPhone.

Use a keyboard with iPhone via USB-C

Whether you’re answering emails, writing blog posts, or just taking notes, this turns your iPhone into a mini productivity tool.

4. Use an external microphone

TikTok creators, podcasters, or anyone who makes videos will love this.

Use an external mic with iPhone via USB-C

iPhone’s built-in mic is decent, but sometimes you need clearer audio. USB-C to the rescue. Whether you’re vlogging, recording a podcast, or doing voiceover work,

Your iPhone can connect to high-quality mics like the Rode Wireless Micro.

With Rode Wireless Micro, you get excellent sound while keeping the convenience of wireless recording - no cables tangled during filming.

5. Add an SD card reader

Use a USB-C to SD card reader, plug it in, and you can access and transfer photos or videos from a camera’s SD card directly to your iPhone.

Newer cameras allow wireless transfer, but it’s often slow. Devices like Apple’s USB-C to SD Card Reader connect easily to your iPhone.

It’s faster and smoother than wireless, and it’s one of the most underrated USB-C features for creators.

6. Connect iPhone to an external display

With a USB-C to HDMI adapter, you can plug your iPhone into any display and output 4K content.

Apple’s USB-C Digital AV Multiport Adapter is a good choice. It converts the iPhone’s charging port into HDMI, so you can enjoy 4K content on a larger screen.

7. Use a wired controller for gaming

You can connect a wired controller (like Sony’s DualSense) for ultra-low-latency, high-performance gameplay.

Sony’s DualSense is a great way to level up iPhone gaming, especially if you have a Pro model with the enhanced A17 or A18 chip.

8. Dock / hub

A USB-C hub can turn a single port into a multitasking powerhouse.

Devices like the Plugable 7-in-1 USB-C Hub provide HDMI (for external displays), a headphone jack, Ethernet, multiple USB-A ports, an SD card reader, and of course USB-C charging - all with one simple connection. It’s a bit bulky, but if your iPhone is your main hub for work or entertainment, it’s a must-have.

Final Thoughts

Now that USB-C is the standard, the iPhone has endless possibilities. Best of all, if you already have USB-C accessories for iPad or Mac, they work seamlessly with your iPhone 15 or 16. Even more exciting, with iPhone 17 and future models, we may see even more powerful USB-C features.

Mac Mini M4 Accessories List: Building My Killer Workstation Setup

Sat, 31 May 2025 18:30:41 +0800

If you don’t buy and I don’t buy, Mac mini drops 500. Well, on May 31st, the base model Mac mini price has dropped to 2799 CNY. Recently, I’ve been constantly getting “backstabbed” by price drops, always feeling the pain, but can only comfort myself with “early adoption, early enjoyment,” 😂.

Below is my accessories list. Some items aren’t newly purchased - if I can continue using older ones, I won’t replace them.

Lenovo Legion Screen Light

Filco 87 Mechanical Keyboard

Logitech M720 Wireless Bluetooth Mouse

Dell 27-inch 2K U2719DS + U2515H 25-inch 2K

Yes, I maintain a dual monitor setup at home.

HomePod

Apple Original Adapter

Collectible Figures

Final Thoughts

Apple gave me a barebones box, but with a bunch of accessories, it’s become a workhorse tool, ✌️.

How to Make Mac's Built-in Notes Better? This Tool Helps You Achieve It in One Step

Wed, 28 May 2025 21:50:42 +0800

I’ve been constantly switching between note-taking apps - Evernote, Drafts, Youdao Cloud Notes, etc. Sometimes when new note apps are released, I try them too, but I can say I haven’t found a satisfactory one yet. Recently, I unexpectedly got attracted by a simple yet powerful plugin tool — Pronotes. It helps unlock features that native Apple Notes don’t have without replacing Apple Notes.

This article shares this plugin and how it made me choose Apple Notes again, which I had previously abandoned.

📦 Installation

Go directly to Pronotes’ official website and download the latest version of the .dmg installation package. I’ll also provide the final download address here: https://pronotes.app/direct-download

Notes

Except for AI features which require subscription, all other features are completely free. Personally, the free version of Pronotes is sufficient for now.
System requirements: macOS 13.0+.

🛠 Set Auto-start

Pronotes is not a standalone note-taking app but exists as a plugin assistant to make macOS’s built-in Notes more powerful and user-friendly. Strongly recommend adding Pronotes as an auto-start program so it automatically runs in the background every time you boot up.

As long as you open native Notes, Pronotes will automatically work, providing advanced features like Markdown support, shortcut operations, enhanced search, etc., completely without manual opening.

Before installing Pronotes, if you wanted to modify text formatting in macOS Notes (like bold, italic, insert links, or bullet points), you usually had to rely on clicking the top menu bar, which seriously interrupts thinking flow during note-taking or organizing, making it inefficient.

But after installing and enabling Pronotes, just select some text with the mouse, and a floating toolbar will automatically appear with common format options (as shown below).

✏️ Markdown Support

Format text in markdown by entering the following at the beginning of lines:

For example:

# Create title with space
## Create title with space
### Create subtitle with space
[] Create checklist with space
``` Create single-style block with space
> Create blockquote with space

In short, many markdown syntaxes can be used directly, and Pronotes will automatically convert these syntaxes to Apple Notes format.

🔤 Slash Commands

Besides the quick format bar that appears when selecting with mouse, Pronotes also adds Slash commands. Just type / in notes, and a list of available commands will automatically appear, allowing you to quickly insert various content modules without touching the mouse, greatly improving writing fluency.

🧩 Use Template Function

You can create a folder named Templates in Notes (bottom left in image) and add various template documents in it. For example, create a template document named Blog, then whenever you type /Blog, you can quickly insert the preset meeting record format (bottom right in image).

These templates are like “building blocks”, helping you quickly assemble unified yet flexible note content, greatly improving efficiency and organization.

Note: It doesn’t matter which level the folder is at, it can be correctly recognized.

🔍 Search Function

Besides format and template functions, what amazed me most about Pronotes is its search system. Generally, Apple Notes search can only target the currently open note, and the functionality is limited.

Pronotes provides more powerful global search functionality. Just enter keywords, and all relevant note content instantly appears. For people who frequently need to review old materials, the efficiency improvement is huge.

🔐 Small reminder: When enabling search function for the first time, you need to authorize Pronotes to access Apple Notes content. This is a system-level privacy permission setting (left in image below), and you can also set global shortcuts to quickly start search (right in image below).

iCloud Sync

Apple Notes itself supports iCloud sync, so when we use Pronotes for writing, all content automatically syncs to iCloud. This way, notes edited on Mac can be seamlessly accessed on other Apple devices like iPhone, iPad. Actual testing shows that content format is fine when checking on iPhone, it can render normally.

Final Thoughts

In the past, I always thought Apple Notes was just a “make-do” default note app, whether in format, search, or content structure, far less flexible than Notion. But since encountering Pronotes, I discovered that native Notes can also undergo a complete evolution through a lightweight tool!
I have now abandoned using other note apps and returned to the combination of Apple Notes + Pronotes + iCloud.

Do You Really Need an iPhone Case?

Wed, 28 May 2025 13:48:35 +0800

Case and screen protector or not? 🤔 I’ve gone back and forth many times.

The On-Again/Off-Again Cycle

In college I saved up for an iPhone 4s and babied it—case plus screen protector, the works. Couldn’t let my precious fall.
Later I cycled through the iPhone 6, 8, 12… As I grew accustomed to iPhones, I gradually ditched cases and protectors. My rationale: “Jobs fought to shave off 1 mm, and my case adds 1–2 mm—completely hides the design beauty.”
Without protection, I dropped the phone several times. Repairs hurt the wallet, and resale value plunged. Lesson learned: maybe a case and glass are wise.

Now my 16 Pro wears both. Going caseless shows off the design, but it raises the risk—especially in the situations below.

Everyday Carry Risks

I usually slide the phone into a pocket that also holds keys. Scratches and tiny dents show up quickly. Small cosmetic damage, sure, but seeing the screen marred still stings.

Outdoor Movement Risks

When walking around suburbs or trails, I hold the phone in hand and swing my arms. One slip + uneven ground = damage. Mood instantly drops.

Note: illustrative photo—my drop was milder, but still painful. 😭

After a Few Drops: Ideal vs. Reality

Ideally, the iPhone’s thin, sleek form is pure joy:

In reality, accidents happen:

Travel: unfamiliar environments, shuffling luggage, fatigue—more chances to drop.
Kids around: toddlers and expensive electronics never mix well.
Exercise: sweat and slick fingers are enemies of a naked iPhone.
Cold weather: gloves and numb hands make drops more likely.

Even an ultra-thin case can save the day.

Drop It a Few Times, Learn the Lesson

Sometimes you need a few mishaps to figure out your preference. Do you need a case and glass? It depends, but generally yes. If you’re undecided, you may have to experience a cracked screen first.

My Current Setup

Benks iPhone 16 Pro screen protector (HD, anti-fingerprint, partially covered, shatter-resistant), bought on JD.com — 18.4 CNY
Huaqiangbei MagSafe case, bought on Pinduoduo — 29.57 CNY

Final Thoughts

In most cases I recommend both a case and tempered glass—they reduce repair risk and protect resale value.
If you truly hate the added bulk and rarely drop your phone, you can skip the case, but I’d still keep the screen protector.
If money is no object and you’re always looking for an upgrade excuse, go caseless and enjoy. Pretend I said nothing.

So, are you running naked or geared up?

Hidden macOS Tips You Probably Didn't Know

Tue, 27 May 2025 19:56:33 +0800

macOS has many hidden tricks. Mastering them can save you a lot of time, and when others don’t know them but you do, you’ll feel like a Mac genius.

OK, let’s start. 👇

Note: In Chinese macOS, Finder is localized with a Chinese name.

Screenshots

Use Command + Shift + 4 to capture a screenshot. But did you know you can further customize it?

After pressing Command + Shift + 4, press Space to capture a specific window.
While dragging, hold Shift to lock the selection horizontally or vertically.
Hold Option to resize the selection from the center.
Press Space to toggle window capture.

Quick preview with Space

In Finder, select any file and press Space to preview it. If the format isn’t supported, you can install Quick Look plugins.

Show file extensions

In Finder, open Settings from the menu bar and enable showing file extensions.

Quick path finder

In Finder, you can quickly display the full path of a file or folder.

Go to View > Show Path Bar to display the path at the bottom of the Finder window.
Or press Option + Command + P to toggle the path bar.

Hidden trackpad gestures

The Mac trackpad is more powerful than you think. Try these:

This screenshot is from the author.

Three-finger drag: Enable it in System Settings > Accessibility > Pointer Control > Trackpad Options to move windows easily.
Pinch to zoom: Use two fingers to zoom in/out on images or web pages.
Force Touch Quick Look: Press firmly on a file in Finder to preview it without opening.

The menu bar can get cluttered, but you can reorganize it:

Hold Command and drag icons to rearrange them.
Drag an icon out of the menu bar to remove it.

Disk Utility features

Disk Utility does more than format drives. You can also:

Create disk images: Go to File > New Image to create an encrypted backup of a folder.
Repair permissions: Use First Aid to fix disk errors and permission issues.

Text replacement for faster typing

Save time by creating custom text shortcuts:

Go to System Settings > Keyboard > Text Replacement.
Add shortcuts like “omw” for “On my way!” or “eml” for your email address.

Hidden Terminal commands

Terminal is a gold mine for power users. Try these:

Say: Type say "Hello, World!" to make your Mac speak.
Caffeinate: Type caffeinate to prevent your Mac from sleeping.
Show hidden files: Type defaults write com.apple.finder AppleShowAllFiles YES and relaunch Finder.

Quick access to system info

Need to check your Mac’s specs?

Click the Apple logo in the top left and choose About This Mac.
For more details, click System Report to view everything from RAM to connected devices.

Secret emoji combos

Did you know you can combine emojis for fun or practical use?

Use Command + Control + Space to open the emoji picker.
Combine emojis like 🎉 + 🎂 for a birthday, or 📅 + ⏰ for reminders.

Conclusion

What other hidden macOS tricks do you know? Share them in the comments.

Mac: Errors Installing WeChat v4

Mon, 07 Apr 2025 11:58:20 +0800

The WeChat desktop client recently shipped v4. I ran into an install error—here’s the fix.

What’s New

The desktop client now mirrors almost everything on mobile—and adds a few extras.
v4 is a full release, not a beta.

Download: https://pc.weixin.qq.com/weixin/download/download_page.html (macOS build isn’t on the App Store yet.)

WeChat desktop v4 download

Installation Error

The operation can’t be completed because some items had to be skipped. For each item, choose File > Get Info, make sure “Locked” is deselected, and then check the Sharing & Permissions section. When you are sure the items are unlocked and not designated as Read Only or No Access, try again.

Fix

Uninstall the old version (leave it in the Trash in case you need to restore), then reinstall v4. Chat history, in my tests, remained intact.

Why It Happens

The error typically appears when deleting files. The WeChat installer removes the old version under the hood, triggering the same message.

Closing Thoughts

If you hit the same issue, try the steps above.

Troubleshooting iPhone Text Message Synchronization Issues with Mac

Sun, 06 Apr 2025 18:00:20 +0800

Recently, I got a new MBA but found that text messages were not syncing to the new Mac, so I started troubleshooting. This issue is quite common, so I’m documenting it here.

Troubleshooting Steps

Open iMessage on Mac, verify that iCloud message sync is enabled
On iPhone, go to Settings-Apps-Messages, verify that Messages is enabled, and enable the corresponding device in Text Message Forwarding.

Fixed

During the troubleshooting, I found that my issue was because I hadn’t selected to forward text messages to this Mac on the iPhone. After enabling it and sending a new text message, everything worked fine.

At the end

Text message synchronization is a feature I use frequently. For example, when logging into websites, I can directly invoke Alfred on Mac to read SMS verification codes and paste them into web pages with just one enter key - very convenient. You should give it a try.

Connecting Xbox Controller to OpenEmu

Thu, 20 Mar 2025 08:19:43 +0800

Using keyboard controls with OpenEmu on a Mac can be inconvenient. I have an Xbox console, and I discovered that it can be connected to a Mac for playing OpenEmu games. Here’s how to set it up.

Connecting Xbox Controller to Mac via Bluetooth

Open the Mac’s Bluetooth settings and select Add Device.
Press the pairing button on the Xbox controller, and Mac will automatically detect it.
Once found, select the Xbox device to establish the connection.

Selecting Xbox Controller in OpenEmu

Open OpenEmu, go to Settings - Controllers and select Xbox controller as the input device.
Configure button mappings according to your preferences.
You can play games with the Xbox controller once set up.

Final Thoughts

After trying it out, gaming with a controller feels more natural.

Screen Studio Guide: The Best Screen Recording Tool for Mac

Wed, 12 Mar 2025 14:05:01 +0800

Introduction

Screen Studio is a powerful screen recording tool exclusively for macOS. It helps users easily record on-screen operations and generate high-quality video files. I recently purchased the lifetime license for $229 due to my video recording needs. After using it for a while, I’m quite satisfied and would like to share my experience.

Purchase

Screen Studio offers two purchasing options:

Lifetime license currently discontinued by the official site, subscription only
Subscription (annual/monthly)

I personally recommend the lifetime license, though it’s definitely pricey. Since the lifetime option is no longer available, the annual subscription is the better deal.

Too Expensive? Discount Codes?

Taking the annual subscription as an example, it’s $108/year. I recommend checking second-hand platforms or waiting for official promotions for discount codes, such as a 40% off code, which can save you quite a bit.

For example, these shops I found offer discount codes. If they’re still available, consider using them to save some money.

Where to Enter Discount Code

Payment Supports Visa/PayPal

PayPal is available in China. If you encounter errors with direct Visa payment, try using PayPal instead. Just link your domestic Visa card to PayPal.

Payment Issues / Payment Errors?

Payment failure Card payments go through Stripe, which is an overseas service. If you experience payment issues without clear error messages, try opening the browser console — there are likely red error messages. It’s usually a network issue. Try using a proxy, switching browsers, or switching devices. Many beginner users around me have encountered this type of problem.

Don’t Know How to Pay?

You can ask someone for help, but fundamentally it’s something you need to figure out. Visa payments are very common and you’ll encounter them sooner or later. Payment freedom is an issue that, in my opinion, must be resolved.

Download

Screen Studio is not on the App Store. You need to download it from the official website. The official app supports both Intel and Apple Silicon chips.

Note that the following sites are NOT official — they are pirated/cracked sites that also sell the software, which is shameful behavior. Please support the official version.

These are pirated sites — do NOT use them: ❌ 🗑️ The official team is already consulting lawyers for legal action, though unfortunately enforcement costs are high in China.

Windows Support?

No, the official team has no plans to support Windows.

Beta Version - Try New Features?

If you want to try new features early, you can use the Beta version. The downside is that stability may not be as good as the release version.

https://screen.studio/beta

Usage Tips

Here are some features I frequently use.

Recording Other Devices

iPhone/iPad Recording

Taking iPhone as an example: connect your Mac and iPhone with an official data cable, open Screen Studio, select the corresponding iPhone for recording. If your phone prompts you to trust the Mac, tap trust, then start recording.

Note In my testing, I found that third-party cables sometimes fail to be recognized. If you encounter the same issue, try using the official Apple cable.

Apple TV Recording

You’ll need to use QuickTime for this. You can either record with QuickTime first and then edit with other video editors, or directly use Screen Studio’s window recording to capture QuickTime’s Apple TV window.

Noise Reduction

During recording, there’s usually ambient noise. Screen Studio provides a noise reduction feature that you can enable during editing, and the results are quite good.

Export

Note: Screen Studio supports GIF export.

If you want to share a video with others, the official service provides a sharing feature. Essentially, the video is uploaded to their servers, generating a link for quick sharing.

Note:

Video duration is limited to 10 minutes.
Shared links have no permission settings — anyone with the link can view it, but cannot download.

Quick Operations

Keyboard Shortcuts

Screen Studio has built-in keyboard shortcuts for quick operations, and they’re customizable.

RayCast/Alfred

If you have trouble remembering hotkeys, you can also use RayCast/Alfred for quick operations.

Personally, I prefer using hotkeys and GUI clicks directly.

What I Like About It

After using it for a while, here’s what stands out:

Great app interaction experience and aesthetics.
Easy to use — features like automatic focus zoom solve the issue of key content not being prominent in high-resolution recordings.
Comprehensive functionality, including GIF export support, which I need frequently.
Supports iPhone/iPad recording, and it looks beautiful.

Current Limitations

The GUI doesn’t support language settings; it defaults to English with no option for other languages. Regarding internationalization, I've consulted the official team — they currently have no plans to support it, and the feature is low priority.
Not cross-platform; doesn’t support Windows or Linux. This is unfortunate for non-Mac users.
Auto-generated subtitles are low quality; I use other services instead.
Video export is too slow.

Feedback Channels

Similar Tools / Alternatives

During my research, I also looked at other tools:

OBS Studio Open source, free
loom Paid
FocuSee Paid
tella Paid
Cursorful Free/Paid
OpenScreen Open source, free

Personally, I find Screen Studio the most intuitive, but you might prefer other tools.

Final Thoughts

If you have this kind of need and the budget, I recommend Screen Studio.

Screen Time in Apple Systems

Fri, 07 Mar 2025 11:48:43 +0800

Today a friend asked me what the gray bar chart in Apple’s Screen Time statistics means. I actually wasn’t too sure either, so I looked it up and here I’ll record what I found.

Gray Bar Chart

After actual research and analysis, here’s my personal understanding. The gray bar chart represents the time you use apps, but this time is not your actual app usage time, but rather the time Apple estimates based on your app usage patterns.

How to Use 1Password (Step-by-Step Guide)

Fri, 31 Jan 2025 08:51:57 +0800

Having used 1Password for many years, here I’ll summarize the usage methods of 1P.

Updates

Current versions have been updated as follows; the guide below still applies:

1P Mac v8.10.58
1P iOS v8.10.58

Purpose of Use

Let me first discuss the pain points I had regarding password management before using 1Password:

Each website has security requirements for password complexity, such as password length and character requirements like special symbols, making passwords difficult to remember. If each website is different, there is even more to record.
Every time logging into a website requires manually finding the account and password and then copying and inputting them.
Device diversification, such as iPhone/Mac/ATV/Android phones, etc., requires solving how to manage/use passwords across different devices efficiently.

Evolution of Solutions

Before adopting 1P, I went through several iterations of solutions.

Phase One: Using the same account password for multiple websites, but as websites increased and became more complex, it became impossible to keep them the same, and some websites also required 2FA.
Phase Two: Using Excel to record passwords, but Excel passwords are plaintext with low security, and password generation and filling still needed to be done manually.
Phase Three: After researching several password managers, I finally chose 1Password. Currently quite satisfied. All the above pain points have been resolved.

In the short term, 1Password has met my needs. Below, I’ll explain how to use 1Password.

Download and Installation

1Password supports multiple platforms, including Mac/iPhone/iPad/Android/Chrome/Safari.

Due to my personal device situation, I currently only have 1P installed on the following platforms:

I’ll explain some key configurations/usage methods based on my habits.

Mac Client

Since 1P is frequently used software, it’s recommended to enable Start at Login.

Setting path: General->Start at login

Disable All Shortcuts

The preset hotkeys in 1P are global system hotkeys that often conflict with other Apps, so I recommend disabling them.
In daily use, click the 1P icon in webpages or select 1P functionality in emails.

Touch ID

1P supports Touch ID; if Mac supports it, it’s recommended that it be enabled. Manually entering passwords to unlock 1P is too cumbersome.

Apple Watch

If your Mac, like the Mac Mini, doesn’t support Touch ID, you can consider using Watch to unlock it.

Enable Watch unlock in Mac Settings.
Enable Watch unlock in 1P-Security. If you can’t see this option, verify that step 1 is properly enabled.

Option to Toggle Show/Hide Fields

By default, 1Password doesn’t show passwords. It’s recommended to enable this setting so holding option can show passwords. If security isn’t a concern, you can help by always showing full passwords.

Personally, I recommend not always showing passwords; just use the option to show them.

Setting path: Security->Concealed fields->Hold Option to toggle revealed fields

Universal Clipboard

1P supports Universal Clipboard; for example, copying account passwords on a Mac and pasting them onto an iPhone is very convenient.

Setting path: Security ->Clipboard->Use Universal Clipboard to copy to other devices

Beta Testing

Early adopters can consider enabling beta versions, but stability will be weaker.

For stability, I personally recommend staying with default production.

Setting path: Advanced->Release Channel->Production, recommend enabling auto-update

Hotkeys

1P provides hotkeys, which are the ones I commonly use.

Official documentation click here

Action	Shortcut
Show password	⌥
Search	⌘ F
Copy password	⇧ ⌘ C
Toggle security field hiding status	⌘ R

Chrome Extension

The Chrome extension is used in conjunction with the Mac client and doesn’t need much configuration itself, and it’s more about knowing how to use it. Here are several everyday operations.

Choose to Save

Many webpages will prompt automatic saving during login; if not, just click save manually. You can modify any fields directly or later if any fields are incorrectly identified.

Choose Password Generation

When registering accounts on new websites requiring custom passwords, you can use 1P’s password generator. If the default generated password isn’t suitable, you can click the generator to create new passwords.

Updates

The Chrome extension auto-updates, so there is no need to worry.

iPhone Client

Many iPhone client settings are similar to Mac clients and maintain the same settings. Besides these, there are several settings to note:

Customize Panel

The iPhone client supports setting up a homepage content display so that you can set it according to your needs.

AutoFill Passwords

Through iPhone settings, you can set the autofill password source to 1Password. This allows you to select 1Password accounts and passwords for filling in Apps/webpages.

Setting path: Settings->General->Autofill & Passwords

1P vs Other Competitors

Many password management services are similar to 1P, such as Apple Passwords/LastPass, etc. However, I haven’t used other services and won’t consider migrating in the short term.

But based on personal experience, here are some views for reference.

If you’re looking for free options and are an Apple user, consider Apple Passwords, as it doesn’t require additional payment. I currently recommend 1Password if you can accept reasonable payment and might have non-Apple devices. If the price seems high, consider group sharing. If you don’t trust third-party services, consider self-hosting password management services.

At the end

That’s all about using 1P.

Viewing Key Performance Metrics in Chrome

Wed, 08 Jan 2025 16:19:54 +0800

Frontend developers need to pay attention to key performance metrics that help us understand website performance status and optimize accordingly.

Google provides a tool that allows you to view website performance metrics and optimize them: https://pagespeed.web.dev/

In addition to using the web interface, you can also view these metrics directly in the Chrome browser.

TTFB (Time to First Byte)

“Waiting for server response” represents the TTFB metric. In the Network tab, find the main HTML request, and in the Timing section, “Waiting for server response” represents the TTFB metric.

FCP (First Contentful Paint)

First Contentful Paint measures when the first text or image content is rendered on the screen.

LCP (Largest Contentful Paint)

Largest Contentful Paint measures when the largest content element becomes visible in the viewport.

INP (Interaction to Next Paint)

Measures how quickly a web page responds to user interactions - an important responsiveness metric.

CLS (Cumulative Layout Shift)

Cumulative Layout Shift measures visual stability by quantifying how much visible content shifts during page load.

Final Thoughts

Understanding these key performance metrics is essential for frontend developers to optimize website performance and provide better user experiences. Chrome’s built-in developer tools make it easy to monitor these metrics during development and testing.

How to Use Alfred to Retrieve Local Network Information (Step-by-Step Guide)

Sat, 21 Dec 2024 13:41:08 +0800

To quickly access my network proxy information and public IP details, I created a workflow for convenience.

Screenshots

Download Link

Implementation

The workflow relies on the following commands to retrieve network information:

Retrieve network proxy info:

networksetup -getsocksfirewallproxy "Wi-Fi"
networksetup -getwebproxy "Wi-Fi"
networksetup -getsecurewebproxy "Wi-Fi"

Retrieve public IP info:
```
curl ifconfig.me
```

At the end

With this workflow, local network information can be accessed quickly and efficiently.

Docs

https://www.alfredapp.com/help/workflows/inputs/script-filter/

Registering WhatsApp

Thu, 19 Dec 2024 23:34:16 +0800

ChatGPT now supports chatting over WhatsApp. I hadn’t registered WhatsApp before, so I used this as an opportunity to try it.

Prerequisites

I have a Giffgaff UK SIM card in my phone. I’ll try registering with that phone number.

Steps

Turn off Wi‑Fi
Disable the Surge proxy
Enable Giffgaff cellular data and ensure cellular uses Giffgaff

Select UK and enter the phone number
Send the verification code
Enter the verification code
Done

FAQ

We couldn’t send an SMS to your number. Please check your number and try again in 1 hour.

This usually indicates an IP/location mismatch. Since this is a UK number, you need a UK network environment. Try a full-tunnel UK proxy, or use the SIM’s own cellular network, which worked for me.

How to Use Fantastical (Step-by-Step Guide)

Fri, 29 Nov 2024 22:20:18 +0800

I’ve been using Fantastical for many years, and recently saw that they released a Windows version. Excited about this, I decided to organize the features I frequently use.

Cross-Platform Support

I currently primarily use the following platforms:

Mac
iPhone
Apple Watch Premium subscription required - cannot be used without Premium subscription

Fantastical also supports iPad and Windows, though I don’t use these platforms frequently at the moment.

Note

Except for the Apple Watch version, other devices can use Fantastical for free, though with some feature limitations.

My Personal Subscription Status

Mac version: I previously purchased Fantastical 2 outright, then upgraded to version 3. Currently not subscribed to Premium due to the high cost.
iPhone version: Using the free version, but to try out Apple Watch features, I used a hack solution with Surge.

Now that we’ve covered cross-platform support, let me introduce some of the features I commonly use.

Natural Language Input

This is a standout feature, but note that Fantastical is not very Chinese-friendly, so I recommend getting used to using English syntax.

Syntax

(Task) Event with Person at Location on Date and Time Reminder URL Link Calendar Name

Examples

1. Swimming with lily on tomorrow at shuilifang

2. Meeting on 4/1 2023

3. Team weekly meeting every monday 12:00

Use “on” for dates, “at” for locations, and “with” can trigger contact suggestions to add people.
If you want locations to trigger map positioning, use pinyin. If you just want it as text without being recognized as an address, use Chinese directly.
For recurring events, remember to use “every”.

Once you get used to this syntax, you’ll really appreciate this feature.

Calendar Subscriptions

Besides adding events, I also want to view public holidays, so calendar subscriptions come in handy here.

Synchronization is a paid feature. With the free version, you need to manually add calendar subscriptions on each device.

Recommended calendars include Chinese Holidays

Mac - Hotkeys

On Mac, I recommend setting up custom hotkeys - I use ⌥⌘X. This allows quick access to the calendar popup.
Both in the popup and full window views, you can use ⌘+ and ⌘- to zoom text size.

iPhone - Custom Widgets

If you have Fantastical installed on iPhone, I personally recommend removing the built-in Calendar app. Also recommend using Fantastical widgets.

Apple Watch

When Fantastical has premium access on iPhone, you can install it through the iPhone Watch app. After installation, you can configure your watch face to display Fantastical information, such as dates.

Final Thoughts

Of course, what I’ve mentioned above are only some of Fantastical’s features, but they’re sufficient for my current needs. Fantastical’s design and user experience are excellent, so I personally really like it.

https://sspai.com/post/31734

How to Use Surge to Unlock Apple News Region Restrictions (Step-by-Step Guide)

Wed, 06 Nov 2024 22:50:55 +0800

Some apps, such as Apple News, are region-locked. When you launch them outside supported countries, you get a restriction banner. Here’s how I use Surge to bypass it.

Change Region

Go to Settings → General → Language & Region and set the region to the United States.

Install Surge Modules

The News module defaults to a policy named 🇺🇸US. Edit the script variables if your proxy group uses a different name.

Enable Services in Surge

Enable all of the following:

MitM
HTTP Rewrite
Scripting
The two modules above

Enable Airplane Mode

Apple News checks SIM card info for location. Proxying alone isn’t enough—Airplane Mode prevents the SIM from leaking your actual region.

Open Maps

Launch Maps. If it uses Apple Maps (rather than Gaode/AMap), the region shift worked.

Launch News

Open News. If it no longer shows the region block and loads articles, you’re done. Note: you may need to keep Airplane Mode on; otherwise the app may revert quickly.

Live Activity

Apple News supports Live Activities. Enable them via Settings → News → Live Activities if you want real-time headlines.

Final Thoughts

It’s a bit of work, but it gets the job done. If you know a cleaner approach, share it in the comments.

Reference

https://nsringo.github.io/guide/apple-news.html

Web Crash Caused by Styles in Chrome

Thu, 24 Oct 2024 22:55:44 +0800

What the bug is

When accessing the web page in Chrome, everything is normal, but the page crashes directly when the developer tools are opened. If the page is refreshed with the developer tools open, it crashes but usually loads and runs when the developer tools are closed.

Version: Chrome v130.0.6723.70. Version v129 usually works.

Code Analysis

Actual tests found that commenting out the following code resolves the issue:

::-ms-scrollbar { display: none; }

Solution

Directly switch to using:

scrollbar-width: 0;

To Reproduce

Visit the link below to reproduce the issue:

https://alanhe421.github.io/test-page/web-crash.html

Final Thoughts

This issue demonstrates how specific CSS properties can cause browser crashes, particularly in newer versions of Chrome. The ::-ms-scrollbar pseudo-element appears to conflict with Chrome’s developer tools in version 130+. Using the standard scrollbar-width: 0 property instead provides a more stable and cross-browser compatible solution for hiding scrollbars. Always test CSS properties across different browser versions to avoid such compatibility issues.

Invalid ZIP Package Issue When Compressing on Mac

Thu, 10 Oct 2024 19:26:44 +0800

When selecting a folder on Mac, right-clicking, and choosing to compress, the resulting ZIP package reports an error when submitted to the Chrome Store.

There was a problem uploading your file. Please try again. Invalid package. Please make sure it is a valid zip file and the file manifest.json is at the root directory of the zip package.

Following the error message guidance:

The ZIP package is invalid.
The root directory of the ZIP package lacks the manifest file.

Troubleshooting

After manually extracting the problematic package, it was confirmed that the manifest is indeed present, which points to Issue 1. Usually, the package can be decompressed using Mac’s built-in extraction tool. Testing other compression software, such as Keka or CLI ZIP command, did not produce issues, confirming a difference in compression tools on Mac.

Using jszip to read the ZIP package content, it was found that the problematic package contained an extra __MACOSX folder, whose function was researched as follows.

Solution

Use the ZIP command or third-party compression apps like Keka.

At the end

Resolving compression issues requires using commands or other compression tools. The package can be decompressed locally but reports errors upon upload to the Chrome Store, which might indicate an issue on Chrome’s side. A support ticket has been submitted, and further communication is ongoing.

What You Need to Know About iPhone Mirroring

Mon, 07 Oct 2024 21:34:35 +0800

I have been profoundly experiencing iPhone Mirroring for some time, and it has become a daily feature. Here, I will mark my usage experience.

Requirements

Let’s first talk about the main prerequisites for using this feature:

macOS needs to be upgraded to Sequoia 15, and it must be an M-series Mac.
iOS needs to be upgraded to iOS18.
Bluetooth and Wi-Fi need to be enabled on both iPhone/Mac.

In short, both Mac and iPhone should be upgraded to the latest system versions.

Usage

As is typical of Apple’s interactions, it’s straightforward.

The iPhone should be in a locked state.
Access the iPhone Mirroring application on the Mac and follow the instructions to connect.
Once connected successfully, you can use it usually.
- Note that iPhone Mirroring is unavailable when the iPhone is in an unlocked and active state.
- In actual use, the cursor replaces touchscreen gestures on the iPhone.

Tips

Pay attention to shortcuts to quickly switch to the main screen, change screen size, etc. The currently supported shortcuts are as follows:
After mirroring, message notifications will sync to the Mac’s notification center, allowing you to click directly to wake up iPhone Mirroring.

Current Drawbacks

Incompatible with older Mac devices.
You are limited to the M-series Macs only.
It only supports one iPhone mirror at a time, so multi-device mirroring is impossible.

At the end

The combination of macOS and iPhone features has enhanced the Apple ecosystem’s user experience, making iPhone Mirroring a practical daily tool for M-series Mac users. Of course, as with any new feature, there are some limitations, but future updates are worth looking forward to.

How to Use Duolingo (Step-by-Step Guide)

Sat, 13 Jul 2024 13:15:45 +0800

This year, I’ve enjoyed using Duolingo. While it hasn’t significantly improved my skills, it has helped me consolidate basic vocabulary and improve my listening skills. Plus, it doesn’t take much time, averaging just a few to a dozen minutes daily.

Here, I’ll introduce how I use Duolingo.

Platform

Duolingo is cross-platform, supporting Android, iOS, and the Web. There is no Mac version.

I mostly use the iOS version, with the Web version as my secondary choice.

Free or Paid Service?

You can use Duolingo for free, but there will be ads, and hearts are limited, meaning you can’t keep going indefinitely every day.

If you need a membership, I recommend joining a family plan. For example, I joined a family plan, and after sharing the cost, it’s 38 CNY/year. The main benefits of membership are as follows.

I suggest playing for a while first and then, if you need, getting a membership. Light users can still enjoy the app without a membership.

Instructions

Whether through the Web or App, you can start using it after registering an account.

Courses

First, choose the language you want to learn and fill in your current language proficiency. Set your daily learning goal, and you can start learning happily.

Note: If you want to delete a course and reset it, you must do so on the Web version.

https://www.duolingo.com/settings/courses

Level Ranking

What pushes you to improve is the ranking. The ranking ends around 5 PM Beijing time every Sunday. Those in the promotion zone can smoothly upgrade to the next level, those in the demotion zone automatically downgrade, and those in the middle maintain their current level. Therefore, you need to keep progressing to upgrade.

As shown in the picture, I am in the demotion zone. With only one day left this week, if I remain in the demotion zone, I will be downgraded to the previous level.

Add Friends

I recommend adding friends you know so you can encourage each other to study. Friend alliances allow you to do tasks together and earn rewards.

However, even if friends are at the same level, they may be on different leaderboards. Currently, it is assumed that the leaderboard is randomly matched.

Avatar

You can set a virtual avatar in your profile.
Interestingly, there are static or dynamic emojis on the avatar on the leaderboard. This is the status. Clicking on the emoji next to your avatar will bring up a menu where you can set your status. Dynamic status animations require diamonds to purchase.

Diamonds

With diamonds, you can buy items like timers. For example, when playing word-matching games, time is always short. There are two ways to get diamonds.

Free method: Complete tasks, unlock achievements, etc., to earn a certain number of diamonds. It is recommended that you earn diamonds through learning.
Paid method: Purchase diamonds separately. This is not recommended.

Note: When completing learning tasks, we will unlock many achievements. Click on the newly unlocked achievements in Profile - Achievements to get some diamonds.

Duolingo Test

The above mentions Duolingo’s app for language learning, but Duolingo also has a real language test, which many universities worldwide recognize. It’s pretty impressive. I haven’t started it yet, but I consider it worth knowing. The first experience is free.

https://www.duolingo.com/learn

At the end

I watched an interview with the founder of Duolingo before. The mission of Duolingo is to make language learning free and accessible for everyone because the founder himself is not American and has a hard time learning languages. So, it’s unsurprising that we now have such a fun language-learning app, 👍.
Duolingo is remarkable as the world’s No.1 language learning app. I recommend everyone to play and learn!

Duolingo Help Center About Duolingo Using Duolingo

How to Use Caddy

Sat, 16 Dec 2023 17:55:02 +0800

Caddy is simpler compared to Nginx and very convenient for server proxying, especially for obtaining HTTPS certificates.

Here are some common operations recorded.

Installation

It is recommended to use a package manager for installation, such as on Mac:

brew install caddy

On CentOS7:

yum install yum-plugin-copr
yum copr enable @caddy/caddy
yum install caddy

On Ubuntu:

sudo apt install -y debian-keyring debian-archive-keyring apt-transport-https curl
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/gpg.key' | sudo gpg --dearmor -o /usr/share/keyrings/caddy-stable-archive-keyring.gpg
curl -1sLf 'https://dl.cloudsmith.io/public/caddy/stable/debian.deb.txt' | sudo tee /etc/apt/sources.list.d/caddy-stable.list
sudo apt update
sudo apt install caddy

For installation on other OS, see https://caddyserver.com/docs/install#install

Common Commands

# Start service
caddy start --config ./Caddyfile

# Format config file
caddy fmt --overwrite

# Stop service
caddy stop

Examples

Reverse Proxy for Local Service

127.0.0.1:3001 {
 route /xyz* {
 uri strip_prefix /xyz
 reverse_proxy * 127.0.0.1:9000
 }
}

Reverse Proxy for External Service

example.com {
 reverse_proxy /v1/chat/completions https://api.openai.com {
 header_up Host {upstream_hostport}
 }
}

Serve Static Assets

1991421.cn {
 root * /var/www/blog/public
 file_server
}

At the end

That’s all I know. I recommend learning from the official doc for more information on how to use it.

https://caddyserver.com/docs/caddyfile

Browser userAgent

Sun, 24 Sep 2023 23:38:59 +0800

userAgent is something we bump into constantly, but it’s worth recapping what you can and can’t do with it.

How to access it

On the frontend you can read it with alert(window.navigator.userAgent);
On the server you can read it from the request headers, e.g. req.headers['user-agent'].

Recommended library

userAgent is just a string. If you want structured data like browser version and OS, you’ll end up writing regexes. Save yourself the effort with this popular package:

ua-parser-js

let parser = new UAParser("your user-agent here"); // you need to pass the user-agent for nodejs
console.log(parser); // {}
let parserResults = parser.getResult();
console.log(parserResults);
/*
 {
 ua : "",
 browser : {},
 engine : {},
 os : {},
 device : {},
 cpu : {}
 }
*/

That gives you structured info. In Node.js you must pass the user agent explicitly; in the browser you can omit the argument.

What the userAgent does not include

UAParser makes the data easier to consume, but it’s still constrained by what the user agent string actually contains. There are limits to the insights you can pull out.

You can extract browser name/version, device type, CPU, OS version, etc. Hardware details like memory size are not included.
The OS version in the user agent isn’t always correct. For example, I’m on macOS Sonoma 14.0 but the UA still reports 10.15.7.

Why multiple browsers show up in the userAgent

Take these two examples:

Mozilla at the start is effectively boilerplate. AppleWebKit indicates the rendering engine. The next token is the actual browser and version. When you see Chrome followed by Safari, it just means Chrome is compatible with that Safari build.


# Chrome
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/117.0.0.0 Safari/537.36


# Safari
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/605.1.15

N1 Side Router Usage

Sat, 23 Sep 2023 22:43:27 +0800

Recently moved and replaced the main router. To solve access issues for some devices at home, I’m setting up the N1 as a side router again.

Marking this down here

First determine the fixed internal IP for N1 under the new router, for example I set it to 192.168.5.200
While N1 is connected to the old router, access N1 and modify IP address, gateway, custom DNS (which is the main router IP information)
Connect N1 to the new router and access the new IP address
Configure openclash on N1
For corresponding devices like NS, choose manual configuration of IP address/subnet mask/gateway/DNS information

This way, for devices that need scientific internet access, you can manually configure them as above. Of course, using Surge DHCP is also good, but here I chose the N1 side router solution for stability considerations.

How to Use Telegram (Step-by-Step Guide)

Sat, 27 May 2023 23:25:20 +0800

Introduction

Telegram is a free instant messaging app, similar to WeChat. It offers rich groups/channels/bots, and its open API makes it easy to build your own automations. It’s relatively open, too. Outside of work, Telegram is a great tool for staying informed and boosting productivity.

Registration

I recommend using an overseas phone number, for example registering with a Google Voice number.

Recommended Channels/Bots

Telegram’s channels and bots are powerful. A few recommendations:

Shared subscriptions/carpooling — https://t.me/hezu2
Aliyun Drive resource sharing — https://t.me/yunpanpan

Suggested flow: find a movie resource in the channel → open the Aliyun Drive link and add it to your own drive → on TV/Mac, add Aliyun Drive in Infuse → start watching.
YouTube video downloader — https://t.me/Youtube_dwnldr_bot

When you see any YouTube video you like, send the link to this bot, choose the format/resolution, and download.
Twitter video downloader — https://t.me/xx_video_download_bot
Vultr — https://t.me/vultr_helper_bot

Link your Vultr account to easily check usage/balance information.

Besides the above, you can create your own bots based on your needs — for example, a bot for GitHub CI deployment notifications, a personal Z-Library bot, a personal ChatGPT bot, etc.

Common Settings

Proxy

If your system proxy has issues, configure a proxy directly in Telegram to solve connectivity problems.
Set Username to empty to avoid receiving messages from anonymous users.

Tools of the Year: 2022 Gear Review

Sun, 01 Jan 2023 00:02:53 +0800

My core hardware and software ecosystem has become quite stable, so there weren’t as many major upgrades this year.

Anker GaN2 65W Charger

In September, I picked up an Anker GaN2 65W three-port charger for 135 RMB. It’s significantly more compact than the stock Apple MacBook charger and its multiple ports make it very convenient for charging my iPhone and iPad simultaneously. I’m a big fan.

Check it out on JD.com: Anker GaN2 65W

Compact power adapters are essential for travel. This Anker model is currently my favorite. For longer trips where hotel outlets might be poorly placed, I pair it with a Bull or Philips power strip.

MUJI Bean Bag Chair

Purchased in February for lounging and reading by the window. It’s incredibly supportive yet flexible.

Before buying, I considered several brands like Xiaomi and NetEase Yanxuan, but ultimately went with MUJI. It was definitely worth the price.
MUJI’s original covers are quite expensive; you can save money by buying third-party covers for regular cleaning and variety.

Xbox Series S

I bought a Japanese version in April for 2,100 RMB. It serves as a perfect companion to my Nintendo Switch for playing major AAA titles. Currently, I’m spending most of my time on Halo.

OpenWrt (Phicomm N1 Router)

In October, I bought a Phicomm N1 router for 146 RMB. The seller had already flashed it with OpenWrt, so I just had to configure OpenClash with my proxy nodes.

I currently use it in gateway mode to handle the proxy needs of specific devices, like my Apple TV and Nintendo Switch. The devices remain connected to my original Wi-Fi, and I only need to manually set the Gateway and DNS on each device.
The N1 has become somewhat overpriced due to hype, and its hardware specs are modest by today’s standards. I’d generally recommend getting a more modern router or running OpenWrt in Docker on a NAS. I chose the N1 for its simplicity as a pre-built solution.
Configuring OpenWrt requires some technical DIY ability and basic networking knowledge. It’s best for users who enjoy tinkering with their network.

Spotify

After some deliberation, I moved away from QQ Music and YouTube Music in July and switched to Spotify. The app’s user experience and interface design are top-tier and feel incredibly polished. I’m currently using a family plan, which costs about 7 RMB/month.

For more on setting up and using Spotify, you can refer to my previous summary.

Affinity Photo 2

Purchased in November for 263 RMB. I’ve always liked Photoshop, but the subscription price is too steep. Affinity Photo offers similar features with a perpetual license and a comfortable hotkey experience, meeting all my basic graphic design needs.

Final Thoughts

These are just my personal recommendations. If any of these piqued your interest, they’re certainly worth checking out!

Publishing Extensions to Chrome Web Store

Thu, 22 Dec 2022 21:58:41 +0800

I encountered some issues when going through the store publication process - the web page prompts weren’t always accurate, so I’m documenting the actual process here.

Store Developer Platform address: Click here

Pay the $5 registration fee to become an extension developer
- Requires a Visa card
- Mainland China is not supported as a region; choose Hong Kong and use a fake address
Click “Upload new item” and fill out the required information
- Upload file type should be zip

Officially it takes several business days, but due to the current pandemic situation, it’s a bit slower. My app review took 3 days, but sometimes it’s done in 1 day - it really depends on luck.

Preparation Materials

Here are the key materials you need:

Store icon
- 128x128
Screenshots
- No more than 5 images
- 1280x800 or 640x400
- JPEG or 24-bit PNG (no alpha transparency)
- At least 1 image required

Submission Review

When submitting for review, in addition to filling out the application form, pay attention to adding and verifying the contact email address. This email is not the Google account email configuration but rather the configuration under Store → Account.

Offline Installation

After uploading and signing, a CRX packaged and signed program file is generated. After downloading, you can install it offline when developer mode is enabled.

Final Thoughts

Publishing extensions to the Chrome Web Store requires careful attention to detail, especially regarding the submission requirements and regional restrictions. While the process can take several days for review, proper preparation with all required materials (icons, screenshots, and proper documentation) will help ensure a smooth publication process. Remember that mainland China is not supported as a region, so developers from China need to choose Hong Kong and use appropriate address information.

What You Need to Know About App URL Scheme

Sun, 16 Oct 2022 21:04:11 +0800

I’ve recently been using Beijing Yitongxing to scan QR codes to ride buses and subways. To be more efficient, I started researching whether I could pop up the subway or bus code with one click. After all, finding the App, launching it, and then switching to the corresponding ride code is quite cumbersome.

The core of this feature—one click to open a specific page in an App—is essentially a URL Scheme. The key is whether I can obtain that information.

To summarize, I could only manage to open the Yitongxing App with RuubyPay://, but I couldn’t get to the specific subway or bus code page. This is because I couldn’t find the relevant SDK or didn’t guess the correct page URL. Although I didn’t fully solve the problem, I did figure out the general method for finding the URL Scheme of a specific App, which could be useful in the future.

Basic Methods

Google/GitHub Search

The first step is always to search widely since many others may have already found it, like weixin://scanqrcode for WeChat’s QR code scanner.
Official Documentation

Some well-documented apps provide detailed information about URL Schemes, such as Surge or Things. For apps like WeChat or Meituan, however, there isn’t systematic documentation, so users rely on community discoveries, which is less ideal.
Checking the info.plist with tools like iMazing, or directly viewing the app’s contents in Finder for Mac apps.

Search for the CFBundleURLSchemes keyword in info.plist; the array values will be the URL Schemes.

Many apps have corresponding web versions with links that redirect to the app. These redirect links are URL Schemes, which can be captured from the webpage. For example, Tencent Meeting’s one-click join meeting link or China Merchants Bank’s promotional pages. With simple debugging, the URL Scheme can be identified.

Notes

Schemes are case-sensitive. For example, RuubyPay:// can open Yitongxing, but rubbypay:// will return an incorrect address error.
Depending on the developer, an app can support multiple Schemes or none.
Checking info.plist only helps launch the app, but not for specific page paths, as these are not predefined in the file and are implemented in the code. Without an SDK or web code to extract from or guessing the correct path, you can only open the app but not trigger specific actions.
The Apple ecosystem supports Schemes across iPads, iPhones, and Macs.

Particular Use Case - Check if an App is Installed

In addition to quickly launching an app or specific features, URL Schemes can also be used to check whether an app is installed.

Usage:

Declare the apps to be checked in info.plist.

Note that the limit for URL Scheme queries is 50.

<key>LSApplicationQueriesSchemes</key>
<array>
 <string>myapp1</string>
 <string>myapp2</string>
</array>

Call in the code and determine if the app is installed based on the return value of true/false.

UIApplication.shared.canOpenURL(URL(string: "myapp1://test")!)

Side Note:

I learned about this technique when Taio’s developer used it to check if users had installed tools like Surge, which led to some backlash from users. While the action was controversial, the technology itself is neutral, and it’s worth knowing. For more discussion, see the Taio controversy on V2EX.

Docs

Proxies Explained (Simple Guide)

Sun, 04 Sep 2022 15:53:19 +0800

Proxies come up often. Understanding proxy settings helps troubleshoot network issues. Here’s a summary based on work experience.

May contain errors; corrections welcome.

What is a proxy?

Proxy (English: Proxy), also known as network proxy, is a special network service that allows one terminal (usually a client) to connect indirectly to another terminal (usually a server) through this service. Some network devices like gateways and routers have network proxy functionality. It is generally believed that proxy services help protect the privacy and security of network terminals and can, to some extent, prevent network attacks.

From WIKI

Common proxy tools

We often encounter these categories; all play a proxy role:

Common Proxy Software
- With these proxy tools, we can access internal network services or blocked sites like Google/GitHub
- Example
  
  A rule-based tunnel in Go. From Clash Repo
Built-in Proxy in Company OA
Whistle/Fiddler
- Routes requests to different addresses based on predefined patterns; also commonly used for packet capture
- Example
  
  whistle (pronounced [ˈwɪsəl], pinyin [wēisǒu]) is a cross-platform web debugging proxy tool implemented in Node.js. Similar tools include Fiddler on Windows. It is mainly used to view and modify HTTP, HTTPS, and WebSocket requests and responses, and can also be used as an HTTP proxy server. – From Whistle Official Website
Nginx/Envoy

Proxies one or more services, accessible via a domain/IP
Example

Advanced Load Balancer, Web Server, & Reverse Proxy – From Nginx official website

HTTP Agent/Server

An Agent is responsible for managing connection persistence and reuse for HTTP clients. It maintains a queue of pending requests for a given host and port, reusing a single socket connection for each until the queue is empty, at which time the socket is either destroyed or put into a pool where it is kept to be used again for requests to the same host and port. Whether it is destroyed or pooled depends on the keepAlive [option](dfile:///Users/alanhe/Library/Application Support/Dash/Versioned DocSets/NodeJS - DHDocsetDownloader/15-11-0/NodeJS.docset/Contents/Resources/Documents/nodejs/api/http.html#http_new_agent_options).

From Node.js HTTP Module - Agent Documentation

These are all proxy-related services, and the proxy technologies behind these categories are mainly the following

System proxy

What is the system proxy?

Screenshot of a proxy’s system proxy toggle

The app itself starts a local proxy service that can accept Socks/HTTP/HTTPS protocol proxies. For HTTP/SOCKS, it exposes proxy protocol services on different ports.
When System Proxy is enabled, it modifies the computer’s proxy settings.

The system proxy can be enabled as follows:

When viewing the network connection - proxy section in system settings, you’ll see the following proxy server configuration:

After enabling

When any app that respects system proxy settings makes a request, it will use the configured proxy service.
Most proxies also provide a bypass whitelist to exclude specific IPs/domains (like localhost) from proxying.
When the proxy app is closed, the system proxy settings are automatically disabled and cleared.

Manually setting the system proxy

The above describes how apps automatically configure system proxies. System proxy settings can also be manually edited, so you can configure them yourself.

In frontend development, Whistle proxy service is commonly used, but Whistle itself does not modify system proxy settings. This means if we want certain webpage requests to go through Whistle proxy, it won’t work. The usual approach is to configure browser proxy settings, but another method is to set up system proxy.

By manually setting Whistle proxy service as the system proxy, we can solve this. For example, if Whistle’s proxy address is 127.0.0.1:8899, we can change the HTTP/HTTPS proxy address in system settings. This way, Safari webpage access will go through Whistle proxy.

Note: Whistle does not expose SOCKS proxy service by default. If you need to use it, you need to configure it separately with parameters, for example w2 start --socksPort 8900.

Some apps ignore the system proxy

Most apps respect system proxy settings, but many apps ignore them, such as Mail, iTerm2, Terminal

After enabling the proxy, Mail on Mac still can’t send/receive Gmail because it ignores system proxy settings. System proxy configuration won’t fix this issue, and you can’t capture its traffic with proxy tools.
Some proxy tools solve this problem with Virtual Network Interface (TUN), which works at a lower network layer.
The issue of apps ignoring system proxies is mainly limited to macOS; iPhones don’t have this problem.

Mobile System Proxy?

Mobile devices support manual HTTP proxy configuration per network. This only affects HTTP-based operations like browser web pages; apps like WeChat won’t use the proxy for messaging.
To route all mobile app traffic through a proxy, the common solution is to enable a VPN with a virtual network interface.

Virtual Network Interface (TUN)/Transparent Proxy

Many companies provide OA (Office Automation) clients. If you check the network settings, you’ll find the client doesn’t modify system proxies, but you can still access Google or internal company networks after logging in. This is because the client uses a transparent proxy via a virtual network interface. With the virtual interface enabled, you can access external networks without a system proxy.

Virtual network interface creation

You can see this virtual interface using ifconfig in the terminal; it’s destroyed when the OA connection is closed.
System routing table configuration ensures requests are sent through the virtual network interface.

This shows that virtual network interfaces and system proxies operate at different levels, so they can coexist.

Browser Proxy

Browser proxy is at the application level - it ensures all requests from that browser use the proxy. System proxy is system-wide, affecting most apps.

Some browsers like Chrome/Firefox support separate proxy settings, which is why they have proxy plugins like SwitchyOmega.
Safari doesn’t provide app-level proxy settings, so it always uses the system proxy.

Browser proxy => System proxy, forming a proxy chain?

Access logic: target webpage <= browser proxy <= system proxy

Experiment

Suppose the system default network cannot access webpage A, but through system proxy configuration, access to A is supported. However, if Chrome’s proxy configuration uses a proxy service that does not support accessing A, then Chrome cannot access A. Of course, if the Chrome plugin’s proxy service is a local proxy service and itself goes through the system proxy, then it can still access A.

Conclusion

Browser proxy has higher priority than system proxy and does not form a browser proxy => system proxy chain.

HTTP Agent

Agent manages pooled TCP connections. Normally, a client establishes a new TCP connection for each HTTP request and closes it after getting the response. Since TCP handshake is relatively slow, reusing connections for multiple HTTP requests/responses improves performance. Agent’s role is to reuse TCP connections.

Practical Proxy Examples

Wallet gRPC Communication

grpc-web => gRPC

...
location / {

 # SSL
 grpc_set_header Content-Type application/grpc;
 grpc_pass grpcs://$http_x_grpc_node;

 grpc_ssl_certificate /var/www/ssl/$http_x_grpc_ssl_cert;
 grpc_ssl_certificate_key /var/www/ssl/$http_x_grpc_ssl_cert_key;
 }
...

Whistle-Safari Packet Capture

As mentioned above, Safari does not have browser proxy support and completely relies on system proxy. Therefore, a simple way is to configure the HTTP proxy in system proxy settings to Whistle.

Mobile App Request Capture

As mentioned earlier about mobile system proxies, we have two main solutions:

Configure the network proxy to use a desktop proxy like Whistle’s HTTP proxy. This can capture traffic from WeChat Mini Programs, mobile web pages, and apps.
Enable VPN to intercept all app network traffic.

Dynamic Proxy - Penetrate to Access Target Machine’s Internal Web

Example

const {Agent: HttpAgent} = require('http');
const {connect: tlsConnect} = require('tls');

class SSHAgent extends HttpAgent {
 constructor(connectCfg, agentOptions) {
 super(agentOptions);

 this._connectCfg = connectCfg;
 this._defaultSrcIP = (agentOptions && agentOptions.srcIP) || 'localhost';
 }

 createConnection(options, cb) {
 ...
 if (Client === undefined)
 Client = require('ssh2/lib/client.js');

 const client = new Client();
 let triedForward = false;
 client.on('ready', () => {
 client.forwardOut(srcIP, srcPort, dstIP, dstPort, (err, stream) => {
 triedForward = true;
 if (err) {
 client.end();
 return cb(err);
 }
 stream.once('close', () => client.end());
 cb(null, decorateStream(stream, HttpAgent, options));
 });
 }).on('error', cb).on('close', () => {
 if (!triedForward)
 cb(new Error('Unexpected connection close'));
 }).connect(this._connectCfg);

 ...
 }

}


axios({
 headers,
 baseURL: `http://${codeServerProxifier.url}`,
 method: req.method,
 url,
 data: bodyData,
 httpAgent,
 maxRedirects: 0,
 responseType: 'arraybuffer'
 })

Additional Notes

Proxy Protocol vs Request Protocol

Proxy protocol and request protocol are different. HTTP proxy protocol can proxy HTTP, HTTPS, and WebSocket.

Whistle exposes a proxy protocol + port, acting as an HTTP proxy server.
HTTP/SOCKS proxies on Mac are categorized by request protocol. If you only configure HTTP proxy, it can only proxy HTTP and compatible protocols like WebSocket.

Socks vs HTTP

Socks is compatible with other network protocols like HTTP
- For example, if the Chrome-Omega plugin switches the proxy protocol from HTTP to Socks, pointing to Whistle, packet capture on the Whistle side still works normally.
- Conversely, HTTP is not compatible with Socks
- Socks, like HTTP, is a protocol and also has versions, such as Socks4, Socks5

Many Apps Provide Proxy Settings

Tencent Meeting

WebStorm

Others: Spotify, WeCom (Enterprise WeChat), WeChat, Alfred, etc.

TUN (Tunneling)

TUN is a type of virtual network interface.

802.1X Authentication - Security

When connecting with the OA client, you’ll see an 802.1X connection. This is because the client uses 802.1X authentication to ensure the security of the target network.

OSI TCP/IP

http/websocket
grpc/grpc-web
socks

Final Thoughts

Proxy is a technology used in various applications like network analysis and frontend development. Understanding proxy issues is quite useful.

Discover Alfred Remote for iOS

Sat, 23 Jul 2022 23:22:34 +0800

Besides the Mac version, Alfred also offers a iOS App for iPhone/iPad. After some time of use, here is a summary of my personal practice.

Recommended?

The remote itself is just an extension of the desktop version of Alfred, essentially still operating the Mac version of Alfred, so it is somewhat fun but still quite limited.
If there is no need for a remote control of the Mac, I personally do not recommend purchasing it, as it is not frequently used.

For those who need it, continue reading 👇

Download/Cost

Paid/$4.99. Download link
No Android version is provided, and the author has no plans to support it.
Using the remote does not require the Mac version to have a Powerpack license, but to achieve complex functions through workflow triggers, it is recommended to purchase one. Therefore, for non-Powerpack users, the remote has limited function.

Positioning

The ultimate iOS command centre for Alfred. Your iPhone or iPad now becomes a perfect day-long companion to your Mac.

According to the official introduction, Alfred remote is positioned as a control center for the Mac version of Alfred, allowing remote operation of commands/workflows on the desktop version of Alfred via the remote.

Limitations

Currently, Alfred Remote does not support syncing the Mac system clipboard, so there is no clipboard history support on iOS.

Configuration

Enable Remote Server on the Mac version.

Add the device in the Remote App.

If the Mac cannot be found under the Wi-Fi network, you can directly enter the IP/port to add it. Follow the prompts to enter the phrase to successfully add it.

Once added, you can see the corresponding Mac device on the home panel.

Customize the remote operation panel.

Customize the panel in Mac Alfred Remote as needed, such as adding system commands/workflows. After adding, the iPhone will automatically sync the updates.
Remote system settings.

To better use the remote app, it is recommended to enable the following settings in the settings center.

Usage

Here are some of my current limited usage scenarios.

When watching movies on the Mac, you can use the remote to control the volume or scroll the webpage.
Open frequently used apps/webpages.

At the end

Initially purchased out of love for Alfred, after many years of neglect, I decided to use it and found that there are still some scenarios where it is needed, as it can remotely operate the Mac.
I hope the author continues to maintain it and looks forward to new features/plays.

The Journey of Mastering iTerm2

Sun, 12 Jun 2022 10:25:51 +0800

Compared to Mac’s built-in Terminal, I find iTerm2 to be quite powerful. Here I’ll summarize some settings and tips from my usage experience.

The app has too many complete settings to describe one by one, so I'll only highlight some configurations that I personally consider important

Basic Settings

Recommended Theme: `Minimal`

The terminal will have an immersive experience without a separate header toolbar

Badge Settings

Set badges for each profile to distinguish sessions/machines. Note that badge settings are per profile and don’t work for all machines.

Default Timestamp Display

Often I want to know the approximate time when commands were executed, so I enable the timestamp display on the right side by default

Enable Status Bar

Terminal sessions can display some data information, such as memory usage, battery level, etc.

Settings Sync/Save

Since I have multiple Mac devices, I want iTerm2 settings to sync automatically across devices. You can configure this by saving the configuration file to iCloud Drive, then loading it in iTerm2 on another Mac.

The configuration for iTerm2 should be consistent across multiple Macs

Unlimited Scrollback

Sometimes our terminal error output is very long. If you want to scroll up to see the complete output, you need to configure Unlimited scrollback

Cursor Guide Settings

The line where the cursor is located will be highlighted with a different background color

Color Presets

Recommend coolnight

https://github.com/josean-dev/dev-environment-files/blob/oh-my-zsh-zshrc-config/coolnight.itermcolors

More themes recommended here

https://github.com/mbadolato/iTerm2-Color-Schemes

Integrated Tools

iTerm2 is powerful not only because of its built-in features but also because it can integrate with the following tools to become even more useful

oh my zsh

zsh is a powerful shell, and oh my zsh makes it even better and more beautiful.

Visit the official website
Install and set up the recommended theme

Recommended zsh Plugins

git
git-extras
zsh-syntax-highli
zsh-autosuggestio
autojump
jhipster
docker
docker-compose
spring
cask
macos
colored-man-pages

tmux

tmux can solve session saving/restoration. For detailed introduction, you can check my other summary. Here’s a brief description:

Global settings in iTerm2

Install tmux on the target machine
Set commands in profile to enable when logging into the machine

ssh -p 22 -t root@188.146.132.160 "tmux -CC attach || tmux -CC"

Alfred

After Alfred integration, you can directly input commands in the input box to trigger iTerm2 execution

Copy script content
Alfred -> Features -> Terminal

Others

Dynamic Profile

When frequently operating multiple server terminals in iTerm2, there’s a problem of how to reuse profile configurations, such as szrz trigger support and key settings.

The solution is iTerm2 Dynamic Profile

Configuration

cd ~/Library/Application\ Support/iTerm2/DynamicProfiles
Create iterm2-profile-template.json
Configure iterm2-profile-template.json. For specific profile configuration items, you can configure a target in the UI, select export to json, and copy the needed configuration items to the template file
- Here’s my template for reference
UI operation to copy target configuration items
- Select template profile
- Select the category items that need to be copied Not all configurations in the current profile support copying
- Select the target profiles to copy to, multiple selection supported

This solves the problem of profile configuration reuse

Dynamic Profile Parent Name

Profile templates themselves also support dynamic inheritance. The configuration method is the same as above, just with two additional fields Dynamic Profile Parent Name and Dynamic Profile Parent GUID to indicate inheritance relationships

Either name/guid can be configured
Profiles in templates are lists, so pay attention to the configuration placement order: parent first, child inheritance after
GUID generation can use the command line tool uuidgen

Recommended to create a soft link for profiles and sync to cloud drive for easy reuse.

ln -s "$HOME/Library/Mobile Documents/com~apple~CloudDocs/conf/iTerm2/iterm2-profile-template.json" "$HOME/Library/Application Support/iTerm2/DynamicProfiles/iterm2-profile-template.json"

Semantic History

Execute different actions when clicking different files in the iTerm2 terminal. 🚀

Script installation, click here

Triggers

For simple file upload and download, using SZRZ is much more convenient than using FileZilla alone

Final Thoughts

See how powerful iTerm2 is? Let’s get started with it.

Implementing One-Click Meeting Join with Alfred

Sat, 28 May 2022 12:33:25 +0800

I frequently use meeting apps for work - currently Tencent Meeting, and previously Zoom.

The common scenario is that colleagues send out meeting invitation information, and I need to manually copy the meeting ID => manually launch the meeting app => input the meeting ID. If there are spaces/special characters in what I’ve copied for input, I need to handle those separately. As you can see, this process is cumbersome, so I considered using a workflow to optimize the entire process.

Effect

Select the meeting information text, trigger the text action, and choose “join meeting”. Alternatively, you can copy the meeting text information, bring up Alfred, type the keyword meeting and press Enter.

Download Link

Implementation Basis

To launch an app and execute a specific operation, you generally use URL Scheme or AppleScript.

For example, Tencent Meeting/Zoom both provide URL Scheme support, so there’s an implementation basis, but TeamViewer/Teams don’t provide this, so they can’t be supported currently.


wemeet://page/inmeeting?meeting_code=$CODE

zoommtg://$org/join?action=join&confno=$confno&pwd=$pwd

Relies on NodeJS

Personally, I’m relatively familiar with JS, so I used JS to solve the text matching and conversion problem.

About Alfred:Read the authentication code in your recent messages

Wed, 06 Apr 2022 12:12:12 +0800

Nowadays, many services have a 2FA mechanism, requiring SMS verification for login or online payments. Upon receiving the SMS, users need to input the verification code.

The iPhone supports automatic extraction, and you can fill in the code with just a tap. However, on the Mac, only Safari offers a similar experience. If you use Chrome or other apps, you lose this convenience. To address this shortcoming, a workflow was developed to enhance the experience.

Download link: Click here

Screenshot

As shown above, after receiving the message, wait a few seconds. Once the SMS is received, type 2fa to invoke the workflow, select the verification code item, and press Enter to copy it to the clipboard. Use ⌘ + v to paste it into the target input field.

Note

Different verification codes have varying validity periods. Therefore, the workflow allows the validity period to be set with a default search for SMS verification codes received within the last 10 minutes.
To ensure reading SMS on the Mac, Alfred needs disk access permissions.

Principle

You can set up your iPhone to forward all received SMS, including iMessage, to the Mac, ensuring that the Mac can receive verification code SMS.
The SMS messages on the Mac are stored in /Library/Messages/chat.db. Alfred needs to be granted permission to read this database file to retrieve the SMS information.
Regular expressions are used to extract the verification code.

At the end

After setting up, it should be more convenient.

Implementing Click-to-Open IDE Files in iTerm2

Fri, 04 Mar 2022 12:57:03 +0800

In the terminal, when you move the cursor to a file path, ⌘+click can trigger the execution of a command. For example, clicking on a project folder can open WebStorm. However, sometimes I want different file types to trigger different actions, which requires custom script extensions.

Solution

The implementation approach is as follows. Since I’m not very proficient with Shell scripting, for convenience, the actual IDE opening logic is written in JavaScript and executed via Node.js in the shell.

Here’s a portion of the code. Complete code can be found here

iterm2-trigger.js

/**
 * Debug script: ./iterm2-trigger.sh '/git/chainmaker-go'
 * Set default opening programs for various file types
 * key is the condition, value is the command to execute, defaults to system default opener
 * For project folders with 'go' in the name, open with GoLand
 */
const commandMap = new Map();
commandMap.set((_filePath) => utils.isDirectory(_filePath) && utils.suffixMatch(10, _filePath, ['.go']), '/usr/local/bin/goland');
commandMap.set((_filePath) => utils.isDirectory(_filePath) && utils.suffixMatch(10, _filePath, ['.js', '.jsx', '.ts', '.tsx']), '/usr/local/bin/webstorm');
commandMap.set((_filePath) => true, 'open');

(function init() {
 let commandStr = '';
 for (const fn of commandMap.keys()) {
 if (fn(filePath)) {
 commandStr = commandMap.get(fn);
 if (utils.checkAppExist(commandStr)) {
 break;
 }
 }
 }
 execSync(`${commandStr} ${filePath}`);
})();

iterm2-trigger.sh

#!/usr/bin/env bash
DIR="$(dirname $0)"

/usr/local/bin/node "$DIR/iterm2-trigger.js" $1
exit 0;

In iTerm2, go to Preferences => Profiles => local Profile => Advanced => Semantic History and configure as follows:

$HOME/bin/iterm2-trigger.sh \1

Of course, if you just want all files to open with WebStorm or a specific program, you can configure it directly like this:

/usr/local/bin/webstorm \1

Final Thoughts

With this configuration script, you can flexibly control the actions triggered by clicking on files.

Disable Annoying WeChat URL Interception

Sun, 27 Feb 2022 21:54:06 +0800

When opening certain pages in WeChat, you often see the interception warning below and must click “Continue to visit”. As a tech person, I can’t stand this kind of interruption, so I set out to fix the experience with a technical approach.

Tampermonkey Browser Extension

This was my first idea. Steps:

Install Tampermonkey in Chrome.

Add the following script in the extension. I’ve open-sourced it — if you don’t care about the details, just install it.

// ==UserScript==
// @name Redirect URL
// @namespace https://1991421.cn
// @version 0.1
// @description 解决恼人的网页拦截，比如微信打开链接
// @author Alan He
// @match https://weixin110.qq.com/cgi-bin/mmspamsupport-bin/newredirectconfirmcgi*
// @icon data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @grant none
// @run-at document-end
// ==/UserScript==

(function() {
 'use strict';
 function htmlDecode(input) {
 var doc = new DOMParser().parseFromString(input, 'text/html');
 return doc.documentElement.textContent;
 }

 if(window.location.href.match(/^https:\/\/weixin110.qq.com\/cgi-bin\/mmspamsupport-bin\/newredirectconfirmcgi/)){
 window.location.href=htmlDecode(cgiData.url);
 }
})();

After this, when a page is intercepted, it will quickly redirect to the target site.

This works because:

The Chrome extension can execute scripts in the page context.
Inspecting the WeChat interception page shows there’s a cgiData object in the JS context, and cgiData.url holds the destination. Once the page reaches DCL, the script redirects to that URL.

The problem is technically solved, but there’s a drawback: the redirect happens after the page loads, so the user can still perceive the jump.

If we want to push the experience further 🚀, is there a better approach? YES!

MiTM (Man‑in‑the‑Middle) via Browser Proxy

The prior approach runs after the page fully loads. With a proxy, we can parse the WeChat response HTML before it reaches the browser, extract cgiData.url, and craft a redirect response with Location: cgiData.url. Problem solved.

Note that the interception page is HTTPS. To parse it, the proxy must support MiTM; otherwise you only see the domain, not the parameters.

With the approach clear, implementation remains.

There are many proxy apps (Charles/Surge/Whistle). I use Surge most often, so I’ll use Surge here.

Enable system proxy so Chrome routes through it.
Enable MiTM and add the weixin110.qq.com domain. To verify, visit the interception page and check that the certificate is issued by Surge.
Add a module with a script to perform the redirect. I’ve open-sourced it — just install it if you don’t need the details.

The redirect script is as follows:

 /**
 * 获取微信拦截网页中目标网页地址，直接返回重定向
 */

 (function redirectUrl() {
 try {
 let cgiData = $response.body.match(/(?="url":").+(?=","btns)/)[0];
 cgiData = cgiData.substring(7).replace(new RegExp('&#x2f;', 'g'), '/');
 $done({
 headers: {
 Location: cgiData
 },
 status: 301
 });
 } catch (e) {
 $done({});
 }
 })();

After this, clicking a link in WeChat takes you directly to the destination — a noticeably better experience.

This works because:

The proxy app ensures requests/responses pass through it so it can process them.
MiTM enables HTTPS parsing.
The proxy app can read/modify request and response data.

Compared to the first approach, this one clearly feels better, though it comes with a higher setup cost since you need to configure the proxy app.

Also note: MiTM doesn’t always work. If a site tightens security with HPKP/Certificate Pinning, MiTM may fail. For example, the Apple App Store’s search service fails when MiTM is enabled. Luckily most sites don’t enable this, including WeChat’s interception service here.

HPKP

Due to various reasons, browsers have dropped support for HPKP. You’ll see it more in non-web service contexts.

For example, in nginx you could configure it like this:

add_header Public-Key-Pins 'pin-sha256="YLh1dUR9y6Kja30RrAn7JKnbQG/uEtLMkBgFF2Fuihg="; pin-sha256="klO23nT2ehFDXCfx3eHTDRESMz3asj1muO+4aIdjiuY="; max-age=2592000; includeSubDomains';

For full details, see here.

Final Thoughts

Done.

Online Issue - WEB Page Stuttering

Sat, 12 Feb 2022 23:57:00 +0800

Phenomenon

After entering the page, there is a noticeable delay in web interaction responses for a period of time. For example, when moving the cursor over links, the hand icon doesn’t appear, and clicking is impossible. After some time, when the page data is fully displayed, responsiveness returns.

This problem needs to be solved.

First, let’s outline the current operations after the WEB page loads:

Request backend data
Decode data using base64
Render table to display data

Analysis

The following shows the interface request data:

The data is indeed quite large - requesting this data took 2+ seconds, but the stuttering feeling clearly exceeded this time, and even when the data was returned, the page was still unresponsive.

Then base64 decoding was performed on the data. Using console.time timer testing revealed the time spent as follows. Also, this portion of data after base64 decoding increased in size from 7.9MB to 14MB.

However, based on the decoding completion time and webpage effects, after decoding completed, the webpage didn’t quickly render the data - it took some additional time. Therefore, it can be roughly determined that the direct cause was the 14MB text display causing page stuttering.

To prove this point, the data was truncated after decoding, for example using substring(0, 256), and testing found it was indeed much faster. Therefore, this is indeed the crux of the problem.

Solution

Product-level adjustments: If this type of data doesn’t necessarily need to be displayed completely, it can be truncated for display. For cases where complete data acquisition is desired, consider file download as an alternative form.

Although the above problem has been solved, if performance issues are encountered later, how can we quickly diagnose which direction the problem is coming from? So we need to consider performance analysis methods.

Chrome Developer Tools - Performance Analysis

Chrome Developer Tools provides developers with two commonly used tools to analyze webpage performance - Performance/Lighthouse

Under Performance, you can see performance overhead for loading/specific time period recordings
Lighthouse provides overall performance evaluation scoring for site loading and gives optimization suggestions.

However, after using Performance to record and analyze the problematic webpage, it was found that during the stuttering period after base64 decoding, nothing could be seen happening on the main thread. Only then did I understand that Performance has blind spots for performance analysis.

tracing

A colleague’s suggestion helped me find a solution. In Chrome, besides the above two tools, there’s another performance analysis tool called tracing. Using this tool to re-record, I finally found the time period of rendering stuttering, and what was happening during that time was layout.

As shown in the brown Layout section in the image below, this is the stuttering time period.

Usage Instructions

Enter chrome://tracing/ in the address bar
When recording, if unsure about category selection, click Edit Categories, select all types. To view the target webpage, select as needed under Processes based on the site link title.

Final Thoughts

Through this problem, I gained the following insights:

High-time-consuming JS operations can use worker/background computation methods
Flexibly use these three tools in Chrome for performance analysis/problem troubleshooting

https://www.chromium.org/developers/how-tos/trace-event-profiling-tool/

Create a Windows Bootable USB on macOS

Thu, 03 Feb 2022 17:09:27 +0800

Prerequisites

Install Tuxera NTFS for Mac (15-day trial is enough).
- macOS Disk Utility can’t format NTFS drives, so we need third-party tools.
- NTFS volumes mount read-only by default; Tuxera enables read/write.
Format the USB/external drive
- Back up data first, then format as Microsoft NTFS.
- Avoid FAT (4 GB file size limit) and exFAT (doesn’t boot reliably for Windows 10 ISOs).
Download the Windows ISO
- https://www.microsoft.com/zh-cn/software-download/windows10ISO (Chinese site; use the English version if preferred).
Mount the ISO on macOS
- Double-click the ISO to mount it under /Volumes.
Copy ISO contents to the USB drive
```
cp -rp /Volumes/CCCOMA_X64FRE_ZH-CN_DV9/* /Volumes/THINK_DISK
```
Replace the source/destination paths with those on your system.

Once the copy finishes, the USB installer is ready.

Reinstall Windows on a ThinkPad

Power on and repeatedly tap F12 to open the boot menu.
Select the USB drive and press Enter.
Follow the on-screen Windows installer steps.

Notes

Press F1 during boot to enter BIOS/UEFI settings if needed.
On Windows machines, tools like Laomaotao provide a simpler free GUI workflow for creating bootable media.

Alfred Workflow - Obtain App ID Quickly

Sat, 29 Jan 2022 09:57:41 +0800

Sometimes, retrieving an app’s ID or version information on a Mac can be inefficient if you manually check and copy it via Finder. Therefore, I used Alfred’s Universal action to achieve a one-click retrieval.

Screenshot

Pressing Enter copies it directly to the clipboard.

Principle

AppleScript can quickly obtain the version/ID information of a specified app.
```
set appId to name of application "/Users/alanhe/Applications/JetBrains Toolbox/WebStorm.app"
copy appId to stdout
```
You can find out what specific attributes can be obtained here.

MacOS comes with a Ruby/Python environment, so both can be used to read apps in the Applications directory.

require 'json'
require 'open3'
require 'pathname'

apps = Pathname('/Applications').children
 .concat(Pathname('/Applications/Utilities').children)
 .map(&:to_path)
 .sort_by { |p| File.basename(p).downcase }
 .select { |e| e.end_with?('.app') }

script_filter_items = apps.map do |app|
 app_id_command = "osascript -e 'id of application \"#{app}\"'"
 app_version_command = "osascript -e 'version of application \"#{app}\"'"
 id_output, id_status = Open3.capture2(app_id_command)
 version_output, version_status = Open3.capture2(app_version_command)
 {
 title: File.basename(app, '.app'),
 subtitle: "ID: #{id_output.strip}, Version: #{version_output.strip}",
 arg: id_output.strip,
 }
end

puts JSON.generate({ items: script_filter_items })

Combine Alfred’s workflow to achieve the effect.

Steps

Create a new Alfred workflow.
Add a “Universal Action” input to receive the selected application path.
Add a “Run Script” action to process the selected app using Ruby or Python.
Use clipboard action to copy the result to the clipboard.

import subprocess

def get_app_id(path):
 command = f"osascript -e 'id of application \"{path}\"'"
 result = subprocess.run(command, shell=True, capture_output=True, text=True)
 return result.stdout.strip()

print(get_app_id("/Applications/Safari.app"))

Test and optimize as needed.

At the end

By using Alfred’s powerful workflow and macOS scripting capabilities, you can streamline the process of retrieving application details like App ID and version. This saves time and ensures accuracy and consistency in handling app information.

CLI Tool Spotlight: Master the `dig` Command

Tue, 18 Jan 2022 22:48:52 +0800

I recently saw a discussion about the dig command in the Surge community regarding network diagnostics. I decided to dive deeper into how it works and how it can be used for everyday troubleshooting.

What is `dig`?

According to Wikipedia, dig (Domain Information Groper) is a network administration command-line tool for querying the Domain Name System (DNS). It’s an essential tool for verifying that a domain name is correctly resolving to the intended IP address.

Basic Usage

The standard syntax is dig <domain> @<dns-server>. Here is an example:

$ dig 1991421.cn @119.29.29.29

; <<>> DiG 9.10.6 <<>> 1991421.cn @119.29.29.29
;; global options: +cmd
;; Got answer:
;; ->>HEADER<<- opcode: QUERY, status: NOERROR, id: 45826
;; flags: qr rd ra; QUERY: 1, ANSWER: 1, AUTHORITY: 0, ADDITIONAL: 1

;; OPT PSEUDOSECTION:
; EDNS: version: 0, flags:; udp: 4096
;; QUESTION SECTION:
;1991421.cn. IN A

;; ANSWER SECTION:
1991421.cn. 600 IN A 108.160.132.49

;; Query time: 91 msec
;; SERVER: 119.29.29.29#53(119.29.29.29)
;; WHEN: Tue Jan 18 22:53:26 CST 2022
;; MSG SIZE rcvd: 55

Why specify the DNS server?

In the example above, I explicitly used Tencent Cloud’s DNS (119.29.29.29). This is important because, on macOS with Surge in Enhanced Mode, default DNS queries are intercepted by Surge. By specifying a public DNS server, I can bypass local proxies to see the “real” A record.

Frequently Asked Questions

Which protocol does `dig` use?

By default, dig uses UDP. If you need to force a query over TCP (useful for checking if large responses are being truncated), you can add the +tcp flag: dig 1991421.cn @119.29.29.29 +tcp

`dig` vs. `ping`

While ping tells you if a host is reachable, dig tells you how it’s being resolved. dig provides detailed DNS information, including TTL (Time to Live) and authority records, which ping cannot. For DNS-related troubleshooting, dig is far superior.

Installation

macOS: Included by default.
Linux (CentOS/RHEL): sudo yum install bind-utils
Linux (Ubuntu/Debian): sudo apt-get install dnsutils

Final Thoughts

Mastering standard CLI tools like dig, telnet, and curl significantly lowers the friction of debugging network issues. If you can’t reach your site, your first step should always be a quick “dig.”

References

Chrome Extension Development Tips and Usage

Wed, 12 Jan 2022 21:47:20 +0800

I’ve been developing extensions recently and encountered some pitfalls. Here’s a summary of what I’ve learned.

Popup does not support programmatic opening. A workaround solution is to create a new window and open popup.html.

 chrome.windows.create({
 url: `popup.html`,
 type: 'popup',
 height: 640,
 width: 357,
 left: 100,
 top: 100,
 focused: true,
})

Disable Window Resize

const size = [document.body.clientWidth, document.body.clientHeight];

/**
 * Prevent popup window resizing. When creating a new window, resizing cannot be directly disabled, so this method provides a solution.
 */
function resizeThrottler() {
 window.resizeTo(size[0], size[1]);
}

window.addEventListener('resize', resizeThrottler, false);

Message Communication

Chrome extension resources are divided into three types: popup/content/background. Content scripts can communicate directly with web pages, so if popup needs to send messages to a webpage, it can send to content script, which then forwards the message to the webpage.

In content.js, receive messages using chrome.runtime.onMessage, and send messages to webpages using window.postMessage

chrome.runtime.onMessage.addListener(
 (message, sender, sendResponse) => {
 window.postMessage(message, '*');
 return true;
 },
);

Popup sends messages to content.js using chrome.tabs.sendMessage

 chrome.tabs.sendMessage(tabId, message);

Additionally, Chrome can receive messages sent from web pages

Web pages send messages to extensions using chrome.runtime.sendMessage

var hasExtension = false;
const extensionId = 'bmkmhpkgcbigmdepppdpdhlifcgoibph';
chrome.runtime.sendMessage(extensionId, {operation: "installCheck"},
 function (reply) {
 if (reply && reply.data.version) {
 hasExtension = true;
 } else {
 hasExtension = false;
 }
 });

Extension background receives messages using chrome.runtime.onMessageExternal.addListener

chrome.runtime.onMessageExternal.addListener((request, sender, sendResponse) => {

})

chrome.runtime Returns undefined

When web pages send messages to extensions, ensure that externally_connectable in settings can match the webpage, otherwise chrome.runtime returns undefined

Example configuration:

 "externally_connectable": {
 "matches": [
 "https://*.19991421.cn",
 "http://127.0.0.1/*"
 ]
 }

http://*/*, https://*/* cannot match IP addresses and localhost domains, so internal network URLs need separate configuration.
Port numbers don’t need consideration, they are wildcard by default.
It’s not recommended to configure http://*/*, https://*/* - although it works, browser extensions will show error Wildcard domain patterns such as "http://*/*" are not allowed

Maximum width 800px, maximum height 600px. HTML tag level will enforce this size. If child tags exceed these dimensions, scrolling will be displayed.

Recommended dimensions: 600px height, 357px width

DevTools failed to load source map: Could not load content

Chrome extensions only support inline source maps, so you need to modify build tool configuration - don’t use separate source map configuration, use something like inline-source-map

Hot Reload

Extensions are different from regular web development, so hot reload configuration is different. Recommended to use the ExtensionReloader plugin with the following configuration:

new ExtensionReloader({
 port: 9090, // Which port use to create the server
 reloadPage: true, // Force the reload of the page also
 entries: {
 popup: "popup", background: "eventPage", contentScript: "contentScript"
 }
 })

Note: The property values in entries correspond to the entry names configured in webpack’s entry section, not physical file path names.

Extension Template - Practice

All these configurations can be viewed in the template:

https://github.com/alanhe421/chrome-extension-react-typescript-boilerplate

Extension Updates

Official Store Distribution In this method, extensions will auto-update. The auto-update frequency might be around 5 hours.
Self-hosted Distribution Packages
- update_url field, but in this method, what’s hosted is the CRX signed distribution package. Unsigned packages won’t work.
- Update packages must be CRX files

{
 "name": "My extension",
 ...
 "update_url": "http://myhost.com/mytestextension/updates.xml",
 ...
}

<?xml version='1.0' encoding='UTF-8'?>
<gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
 <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
 <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
 </app>
</gupdate>

Development Packages Implement custom check logic, such as prompting when popup opens or timer checks, push notifications when updates are available. Users download new packages for overwrite. After overwriting, restart browser or manually click update in extension page.

manifest.json Configuration Changes

After modification, browser restart is required to take effect

Modifying Page Windows

Final Thoughts

Chrome extension development comes with its own set of challenges and best practices. Understanding message communication patterns, proper configuration of externally_connectable domains, and handling popup limitations are crucial for successful extension development. The hot reload setup with ExtensionReloader significantly improves development workflow, while proper source map configuration ensures smooth debugging. Always test extension updates thoroughly and consider both store distribution and self-hosted options based on your deployment needs.

Chrome Extension Packaging and Release

Wed, 05 Jan 2022 20:31:29 +0800

There are some pitfalls in Chrome extension development regarding packaging and distribution. Let me summarize them here.

Installation Methods

If Chrome extensions are published to the Google Store, it means users need the ability to access Google services. However, in the domestic environment, this is difficult for general users. Therefore, if targeting domestic users, alternative installation methods are needed. Currently, there are 2 approaches:

Folder Format

Folder

For folder-based extension loading, the steps are as follows:

Installation

Enable Developer mode

Load extension folder

Select the plugin folder and click OK. Note that the folder must directly contain manifest.json and other essential resources. After successful installation, you’ll see the extension immediately.

CRX

For CRX files, we must upload the ZIP package to the store and then download it. Note that it doesn’t necessarily need to be published - a draft version is sufficient for downloading CRX.

Installation Method

As mentioned above, you also need to enable developer mode and drag the CRX file to chrome://extensions/. If you enabled developer mode on this page, there might be issues with drag-and-drop installation. In this case, restart the browser.

During normal installation, the following popup will appear - just click OK.

Local CRX Packaging

Besides generating and downloading CRX from the store, you can also use tools to generate CRX. However, this approach doesn’t work completely and is for reference only.

If you use local packaging tools, such as npx crx pack -p ./key.pem -o ../dist/boilerplate.crx, the generated CRX installs OK but doesn’t work. The specific error is shown below:

Therefore, for the CRX approach, downloading from the store is the only viable path.

Changing Extension ID?

Chrome’s official introduction about Extension ID:

Each app and extension has a unique identifier (ID) in the Chrome Web Store (which doesn’t change across versions). Therefore, if a user installs an app or extension on multiple devices, the app or extension will have the same ID on all devices. Each ID is 32 characters long.

Following approach 1 solves the user’s extension installation needs, but there’s still one problem: the extension ID changes. This causes issues if there’s communication between the website and extension, since the ID is used for unique extension identification.

For example, when installing the same extension in different versions, different IDs appear here:

Fixing Extension ID

Understanding the problem, how do we solve it? The solution is as follows:

Build locally/use store draft method to get CRX file
Visit https://robwu.nl/crxviewer/ to reverse engineer and get the key value
Open console to get the key value
Copy to manifest.json file

After the above operations, regardless of any device/any version extension, after installation it will have a unique extension ID. The previously generated CRX file can be deleted, and for the PEM private key, save it separately without putting it in the project.

About Key

The extension ID generation chain should be: user private key => public key => extension key => extension id. In store format, these 3 transformations are black box and users don’t need to worry about them, because when publishing and uploading, we only submit ZIP - program source files.

If users install ZIP packages, because they don’t contain extension key information, the ID won’t be fixed. The crxviewer mentioned above does reverse engineering, reads the CRX file to get the extension key, and parses the association with manifest.json. Therefore, we achieved fixed key-id for ZIP packages too. That’s how it works.

Evernote Web Clipper Plugin

I don’t know many domestic Chrome plugins, but Evernote Web Clipper is relatively familiar. Besides Google Store installation, the clipper plugin uses compressed package/folder format installation. This format can also verify the reasonableness of the above approach selection. At the same time, checking the configuration shows no key, and personally I think Evernote doesn’t have webpage-to-extension communication needs, so they didn’t choose fixed ID.

For plugin configuration development, you can download it as a reference: https://www.yinxiang.com/new/product/webclipper/install/chrome/

Summary

In conclusion, approach 2 is more convenient for users since they only need to drag CRX for installation, but development version maintenance requires manually uploading to the store and downloading each time, which is quite troublesome. Therefore, weighing the options, approach 1 ZIP/folder would be better.

Implementing Tencent Gongfeng Project Search with Alfred

Mon, 06 Dec 2021 23:55:40 +0800

At work, I often need to search repository code on Gongfeng and quickly perform certain operations. Doing multiple operations directly in the browser is still not efficient enough, so I created a workflow. The general effect is like GitHub for Alfred.

Workflow download link

Implementation Foundation

Gongfeng provides APIs, such as fuzzy project search, so keyword-based project search functionality can be implemented. For specific APIs, refer to here

By applying for an access token for the corresponding account, you can directly call the API to get results. I verified this works using Mac Paw.

Implementation

Using the CLI I developed earlier, this was implemented quickly. Since daily work involves accessing multiple Gongfeng services [intranet version, community version, etc.], the workflow supports multiple Gongfeng service configurations.

Currently supports searching up to 2 Gongfeng services. The principle is the same - just concurrent requests to 2 addresses. If you want to support more in the future, just increase the number of parallel request addresses.

Usage

Access Gongfeng service, such as https://git.code.tencent.com/profile/account, click Create temporary token
Configure the token and git address in the workflow environment variables

In addition to search functionality, the workflow also provides commonly used features:

gc + keyword for fuzzy search
⌘ C directly copy repo’s web address
⏎ browser access to repo’s web address
⌘ ⏎ copy SSH repo address
⌥ ⏎ select MR, then ⌥ ⏎ shows repo’s open Merge Requests, also supports keyword search

Overall design: ⏎ opens corresponding URLs in browser, ⌥ for further operations.

Final Thoughts

With this workflow, accessing repos starts with search first, then Enter to access specific repos, which is more convenient than before.

Developing Alfred JS SDK - CLI Development

Sun, 05 Dec 2021 17:34:58 +0800

I previously encapsulated the Alfred SDK, with the usage being manually installing packages in specific workflow JS files, then requiring the corresponding modules. Common script filter building, filtering, and quicklook have all been encapsulated as functions, making them fairly convenient to use. But there’s still no CLI support. To further improve efficiency, CLI development can now be driven forward. Here I’ll mark down some insights.

Solving Pain Points

Using CLI can automatically install Alfred SDK packages
Generate default or specified JS files, with module loading built into the code level, eliminating the need for manual writing.

This way, in the future you’ll only need npx @stacker/alfred-utils init, then open index.js to write business logic.

CLI Principles

bin

Commands defined in the bin field of package.json will be automatically installed to the system path environment variables during package installation, and can be used directly after installation.
bin supports single shell or multiple command definitions.
When npx directly uses package bin, there are differences depending on the bin name:
1. If the command name under bin is consistent with the package name, you can directly use the package name when using npx, for example npx @stacker/alfred-utils --help, you can see that it executes the command with the same name Note that consistency here excludes @scope, package name @stacker/alfred-utils, bin command alfred-utils is considered consistent
2. If the command under bin is different from the package name, you need to specify the command when using, for example npx -p @stacker/alfred-utils alfred-utils-test --help
If you install globally, regardless of which bin it is, you can use it directly by entering the bin name.

Templates

CLI helps generate partial code, which is essentially doing scaffolding work. The basic principle is to copy sample code and make partial replacements based on input parameters.

Final Thoughts

With the help of this CLI, developing workflows will be more efficient in the future.
Whenever code-level repetition issues arise in the future, we just need to continuously enrich this SDK.

Mac External Camera

Sat, 20 Nov 2021 16:37:19 +0800

Recently, a community project received a request for users to connect an external camera to their Mac, hoping that Alfred would support one-click switching between different cameras. Because there is a rarely need to open video, I haven’t noticed how to use an external device on a Mac before, so I try it here.

Camera Installation

I remembered that I once bought a Logitech Webcam C110, so I found it and tried it, USB interface, I converted the connection through the docking station USB=>TypeC, then opened Tencent Meeting or Facetime, and can see the plug in the camera options of new equipment. Select Discovery work.

After trying, I found a few problems

The settings such as default camera/disabling a camera can‘t be selected in the Apple Settings Center.
It can only be set correspondingly in the app that uses the camera, such as Tencent Meeting, and the setting can’t be shared.

Scenarios

At home, I often run my Mac in host mode. In host mode, mic/camera is unavailable. At this time, if there is a video demand, the value of an external camera will appear, and the camera quality of the Mac is not so good as well.

Alfred Support

After solving how to use the external camera, looking back at the efficiency plug-in support of netizens, the Mac GUI must have a setting place, or the terminal/command has corresponding support.

I found that through the command system_profiler SPCameraDataType -json that comes with the Mac after searching material, I can get all the camera devices connected to the Mac, but script control to open a camera is not supported, therefore it is impossible to switch cameras with one key in Alfred.

Finally, the conclusion is that the camera list can be displayed, but the specific operation to open a camera is not work.

Write at the End

When the Mac is turn off, the external camera still needs to be operated in a specific app. At present, there is no way to solve this automatically.

Applying for 1Password License Using Open-Source Projects

Mon, 08 Nov 2021 20:52:04 +0800

I’ve been using the personal version of 1Password, which costs about $35.88 annually. Recently, I saw an opportunity to apply for a free License. With the attitude of saving money whenever possible, I tried it, and it worked, so I saved another sum. Moreover, the license given is a Team License - generally priced at about $240 per year, which is very attractive.

Apply Requirements

The application thresholds are as follows:

Author/collaborator/core contributor of an open-source project
The open-source project has been created for at least 30 days.
The open-source project has specified an open-source license, such as MIT.
The open-source project is active.

Note that the current “open source license is permanently valid.” If you obtained the license before 2021/11/26, it will show as expiring in 2 years. In this case, you can email opensource@1password.com before expiration to change it to a permanent license.

If the project is no longer active, 1Password can revoke the license.

Apply Steps

Create a Team
Invite team members
1. Add team member’s email address and send invitation.
2. The invitee clicks to agree.
Fork the repository, fill in the information at the end of the readme and PR template, and submit the PR.
- If you’re still not clear, you can refer to my PR
Wait for review
- I submitted the PR on Saturday, and it was approved on Monday.

For more details, refer to the official documentation.

1Password Usage Instructions

Data Migration

Because you need to migrate to this new account, you need to do data migration. In 1Password, select the items to be migrated, click the menu, and select the target Vault to move to.

Currently, I haven’t seen a way to migrate Vaults directly; you can only select all or part of the items to migrate.

Android

I found that 1Password only supports downloads from the Google Play store, which is quite inconvenient. For example, if your girlfriend’s phone is a Xiaomi phone, then it’s not possible to use.

Team vs Personal

After using it, I found that the Team account completely covers the needs of a personal account, and you can set up some vaults to share with specific team members.

At the end

In my understanding, with the prevalence of subscription models now, many companies can profit and develop because of this, and giving back to open source is also appropriate.
The 1Password Team account is quite appealing.

Implementing One-Click Find iPhone with Alfred

Sun, 07 Nov 2021 20:00:59 +0800

Mac’s Find My feature is quite commonly used - selecting an Apple device to play sound while viewing the device’s approximate location and online status. However, whether it’s the web or app version, the operation experience is still cumbersome and loading is very slow.

As an Alfred efficiency fan, I spent the weekend trying to develop a workflow to solve the efficiency problem.

Implementation Foundation

Find My has both App and Web versions. The App version doesn’t provide Apple Script support, and GUI automation experience isn’t good either, so I abandoned it.

Web version iCloud Find can be analyzed through packet capture for API requests, allowing workflow implementation.

Pitfalls Encountered

iCloud login will enable MFA if it’s the first time logging in on a new web client, and the requests involve many authentication parameters. Therefore, first login must be done on the web site to make iCloud trust the device, while capturing requests to obtain all authentication-related parameters.
iCloud API cookies have extremely short validity periods. Authentication information refreshes periodically, so if cookies are used as Alfred parameters, values need constant updating. To avoid users manually copying information to workflow configuration each time, iCloud ID and password need to be stored for automatic login when requests expire to obtain new cookie information.
A good way to persistently store cookies and other authentication information is in workflow environment variables, though file storage is also possible. I chose workflow environment variables. To permanently/dynamically write new values to the workflow, Apple Script commands need to be executed.
Different devices need to display corresponding device images. Fortunately, there’s an open source project that organizes Apple device numbers/names, making image lookup convenient.

Implementation Effect

Download link: Click here

⌥ ⏎ Play sound
⌘ ⏎ Browse iCloud Web
Green and white dots represent current device status; green means online

Configuration

Due to iCloud’s high security, the workflow cannot be used immediately after installation - some parameter configuration is required.

To make iCloud trust the device, you must first log in to the web version once and obtain some parameters from any request after accessing iCloud Find My to configure in the workflow environment. Since login information has extremely short validity, iCloud account/password configuration is needed for password-free login.

Final Thoughts

After implementing the above, you can quickly trigger any Apple device - perfect!

Alfred - Universal Action

Fri, 24 Sep 2021 11:06:21 +0800

It’s been a few months since Alfred launched Universal Action, and I’ve gotten used to using it to address specific scenarios. Here, I’ll summarize the role of actions in enhancing my efficiency.

Positioning of Universal Action

Here, I will discuss the differences between this interaction method and the previous scenarios provided by Alfred, such as keywords and hotkeys.

Main Differences

The fundamental difference between Universal Action and previous scenarios lies in the trigger conditions. Universal Action is triggered when you select any element [file/link/text], and based on this input, a specific action is executed. For example, you can choose a piece of text to automatically post on Twitter, send an email, or choose a URL to open it in a browser automatically. Previously, actions were triggered directly by keywords or hotkeys. So, the main difference lies here.

Therefore, when you have a specific need, you only need to consider the interaction scenario to choose the appropriate method to solve it.

Positioning

Any operation based on a selected element [file/link/text] can use Universal Action.

Common Ground

Essentially, both are workflows. If you develop them yourself, it’s about creating a Workflow. The main difference lies in the interaction/trigger method.

Let me share my common usage scenarios if the above explanation needs clarification.

String Manipulation (Self-developed)
- Sometimes, I want to change the format of selected text, such as converting it to camel, kebab, snake, etc. In this case, I only need to select the target text, invoke with ⌘ \, choose the corresponding action, and press enter to apply the change.
- This feature is usually available in common editors, but this is still necessary considering scenarios without an IDE, such as browsers.
  
  Download link
Open with (Built-in)
- Sometimes, I want to personalize the app to open a specific file type. For instance, I don’t prefer using Preview for PDFs. So, I can invoke, select Open with, and then choose the target app to open it with.
- Note that Open only changes the app for this instance and is not permanent. If you want to change the default app for a file type, you need to modify it in the file details.

Hotkey

My hotkey settings are as follows:

Alfred’s hotkey is ⌘ double tap, i.e., double tap ⌘.
Universal Action’s hotkey is ⌘ \.

Consideration: Both triggers belong to Alfred, so the hotkey settings are similar. Additionally, ⌘ it is a frequently used modifier key.

At the end

It’s been a long time since I wrote an Alfred usage guide because continuous use has polished efficiency workflows that suit my habits, leaving only a little new to share.
Initially, I didn’t find Universal Action helpful, but after trying it a few times, I gradually realized it has specific use cases. Therefore, trying new things is essential; otherwise, you might miss opportunities for improvement.

Docs

Universal Actions on Alfred

Add Copyright to Code File

Mon, 20 Sep 2021 11:48:57 +0800

Recently, while working on an open-source project, I was informed just before going live that copyright attribution needed to be added to every program file. Due to time constraints, I gave up on finding an automated solution and opted for manual editing. Resolving the issue took a few minutes of manual effort.

To efficiently solve similar problems in the future, an efficient/automated method is needed. Manual editing is cumbersome and prone to errors, especially when dealing with hundreds of program files.

During the holidays, I researched the feasibility of performing this operation within the IDE and discovered a solution.

The following method uses JB company’s IDEs, such as WebStorm and IntelliJ IDEA.

Add Copyright to Multi Files

If you want to add a copyright to existing files in a project uniformly, you can follow the steps below:

Configure Copyright, Editor-Copyright-Copyright Profiles
Configure Scope for Copyright, Editor-Copyright

If the requirement is simple and all program files have the same Copyright, configure it as shown below:
Apply the copyright configuration to all files
- In the resource directory, select the root folder, right-click, and choose Update Copyright..., and the IDE will automatically add the copyright notice to all code files.
- The IDE will automatically exclude files not under VCS, such as node_modules, and non-program files, such as JSON, will also be excluded automatically.

After the above operations, you will find that all program files have successfully added the copyright notice, so easy.

Copyright Update

Sometimes, the copyright information needs to be updated.

If you only want to update modified files, you can check Update Copyright when submitting, and this method will automatically update the copyright information of the modified files.
If you’re going to update all files, simply select the folder in the resource directory, right-click Update Copyright, and you are done.

WebStorm and other IDEs do not support sharing copyright settings across projects. If needed, you have to copy the settings between projects manually.

Someone has already raised a related issue, and you can follow it if you are interested:

https://youtrack.jetbrains.com/issue/IDEA-243167?_ga=2.243406598.2075586931.1632032900-927496416.1626448071

At the end

After understanding this method, there will be no need for manual batch editing of copyright information in the future.

Docs

https://www.jetbrains.com/help/idea/copyright.html

307 Redirect to HTTPS Error When Accessing WEB in Chrome

Mon, 06 Sep 2021 21:52:00 +0800

Today when accessing a website, I suddenly encountered an error. It turned out that the website was being redirected to HTTPS, while the API service requests were still using HTTP. Chrome’s security policy intercepted this, causing the error.

Why did this HTTPS redirection suddenly appear? After investigation, I discovered it was caused by HSTS in Chrome.

Here’s a summary of the troubleshooting process for this issue.

307 Redirect

Through the Network tab, you can see that after the request is initiated, it gets a 307 redirect to HTTPS. When making insecure HTTP requests under an HTTPS secure connection, the browser intercepts this, resulting in the error.

Who initiates the 307 redirect? In theory, either the backend server or the browser can do this. Checking the response, I found this header field:

Non-Authoritative-Reason: HSTS

Research revealed this is a browser security policy. After checking with operations and confirming that the service didn’t have HTTPS enabled, I determined this must be a local issue on my end.

HSTS

HTTP Strict Transport Security (HSTS) is an internet security policy mechanism published by the Internet Engineering Task Force. Websites can choose to use HSTS policy to force browsers to use HTTPS for communication with the website, reducing the risk of session hijacking.

This means that through HSTS settings, a domain can be forced to always use HTTPS for communication. My issue was that the browser had enabled HSTS for this domain.

Removing a Site from HSTS Domain List

Now that the problem is identified, how do you remove this site configuration?

Visit chrome://net-internals/#hsts
In the Query HSTS/PKP domain field, enter the target domain and click search. If it’s found, it confirms the security policy is active
In the Delete domain security policies field, enter the target domain and click delete

After successful deletion, when accessing the site via HTTP again, the HTTPS redirection issue should no longer occur.

Validity Period

I found that even after deleting the domain from HSTS, it might automatically switch back to HTTPS after some time, indicating there’s a validity period issue. I haven’t found a permanent solution yet - when this happens, just repeat the above operation.

Final Thoughts

This method is only for solving the issue where a website doesn’t have HTTPS enabled, but the browser forces HTTPS usage, causing errors.
Although this solves the problem, I still recommend implementing HTTPS, as it significantly improves security and is now considered a standard best practice for web development.

GitHub Action Practice - Updating Workflow Version Badge

Sat, 03 Jul 2021 12:56:20 +0800

I’ve written nearly 30 Alfred Workflows, and during usage, I iterate versions based on issues and shortcomings I encounter, then update them to GitHub for others to download and use. However, GitHub stores workflow file formats, making it impossible to directly see version information unless you download and install them. This makes it impossible to intuitively determine version issues.

Manual maintenance and updates? No, that’s too time-consuming.

Therefore, I need CI to help me read the workflow version and update it in the corresponding readme file, so I can quickly determine whether the locally installed version matches the repository-hosted version and whether an update is needed.

Feasibility Foundation

Alfred’s workflow files are essentially zip compressed files. After extraction, you’ll see a plist file that records version information.

Once feasibility is confirmed, it’s easy to proceed

Solution Design

Since I’m more proficient in JS, the key execution process is written in JavaScript. The overall solution is as follows:

Monitor all workflow file changes, execute JS once there are changes
Traverse all folders, get workflow files in the folders
Copy files and rename with .zip suffix, execute decompression
Read version information from plist file, replace original version info in readme file
Commit updates to repository

Issues Encountered

There were still some pitfalls during implementation:

Some workflow filenames contain spaces. If markdown links contain spaces, parsing will have issues, so transcoding needs to be done in advance. For transcoding, since it’s NodeJS, encodeURIComponent cannot be used, but queryString.escape can solve this.
During local debugging, even though I installed plist to the global modules, the IDE still reported Module is not installed. It turns out that nodejs require for third-party modules doesn’t search in the global module folder, so you need to install to the project or use npm link plist

Final Thoughts

After setting up this mechanism, I only need to update the workflow in the repository in the future, and CI will automatically update the new version number to the readme. Nice!

One-Click Switching of Whistle Proxy Rules with Alfred

Thu, 17 Jun 2021 22:32:59 +0800

In my current work, I frequently use Whistle proxy for web module development. Because of different environments and projects, I often need to switch proxy rules. Using the web GUI operation is still too inefficient, so I decided to create a workflow to improve switching efficiency.

Effect

Operation Guide

⌥ ⏎ Access the web management page
⏎ Toggle rule selection status
⌘ C Copy the current rule’s specific configuration items
⌘ Y or ⌘ L Preview the rule

Workflow download link, click here

Implementation Details

Here are the key points of the implementation:

To implement ⇧ for preview, I made the rules into local files because quicklook must point to HTTP network file URLs or local resource URIs. Since the overall speed is very fast, users don’t notice. However, compared to ⇧, I prefer ⌘L for magnified preview, which has a better effect
The workflow essentially just uses a different method to call the API. You just need to find the key rule acquisition and rule selection/deselection APIs through GUI request capture.

Implementing One-Click GIF Compression with Alfred

Mon, 10 May 2021 10:31:51 +0800

Personal blogs often need some recorded GIF animations. Considering that GIF size affects page loading experience, I need to manually compress GIFs. The compression process is tedious and time-consuming, so I decided to write a small tool to improve operational efficiency.

Effect

Select file, invoke Alfred, type gif, select Compress GIF, press Enter.

Workflow download link: Click here

Notes

Current workflow supports scale/colors personalized parameter settings

scale
- Ratio, e.g., 0.5 means width and height are reduced to 0.5 times the original
colors
- Palette length, value between 2-256. Smaller numbers mean higher compression but greater quality loss

Implementation Details

Let’s talk about the key parts of the tool implementation. For complete source code, check the workflow directly.

Gifsicle is an open-source tool that can perform personalized GIF compression, such as scale ratio and color adjustment, achieving size compression
AppleScript to get the complete path of currently selected files

Final Thoughts

From now on, GIF compression only requires selecting files and invoking the compression command. No more visiting third-party tool websites to upload, download, and compress. Efficiency is significantly improved.

One-Click Do Not Disturb Mode Toggle with Alfred

Fri, 23 Apr 2021 23:46:03 +0800

It’s been a while since I last updated an Alfred Workflow article, so here’s a recent small development.

During work, I often enable Mac’s Do Not Disturb mode to focus on coding and avoid bombardment from high-frequency messages like WeChat/QQ. However, I need to turn it off after work. Moving the mouse to the right side to turn it off is inefficient, and setting up hotkeys requires memorizing complex combinations. Neither of these approaches feels programmer-like, so I created a workflow for quick toggling.

Effect

Type ‘disturb’ and press Enter to toggle.

Workflow download link, click here

Implementation Details

After searching online, I found that neither AppleScript nor Shell offered reasonable solutions. Finally, I discovered this package @sindresorhus/do-not-disturb, which allowed implementation with just a few lines of code.

Looking through the source code, the underlying implementation is in Swift, with only JS-style calls exposed externally.

At the end

Now, I can toggle it nicely without leaving the keyboard.

Chrome Extension Development: Jira Tool

Sun, 04 Apr 2021 22:50:23 +0800

JIRA serves as our team’s project management tool and is one component of our toolchain. During daily standups, everyone presents their work and issues based on JIRA’s kanban board. However, JIRA has some usability shortcomings, such as Quick Filters in the Kanban board not supporting single selection - each selection is additive, which isn’t conducive to quickly switching between cards under different filters.

Frustrated by this, I decided to use the holiday to solve it with a Chrome extension.

Problem to Solve

Implement single selection for quick filters

Result

As shown above, when “Single Filter” is enabled, clicking a new filter automatically deselects the previous one. If the switch is turned off, it reverts to the default setting where each click on a new filter adds to the selection.

Web Store Address

Implementation

You can view the complete implementation code directly in the repository, so I won’t elaborate here.

I’ll just explain the principle behind this Chrome extension feature: after the webpage fully loads, add a toggle button, capture click events for quick filters, and when a filter is clicked, automatically deselect other selected filters.

Chrome Extension Installation

Install from the Web Store, but domestic users need a VPN
CRX installation, but this also requires the extension to be published on the store, otherwise installation will fail with CRX_REQUIRED_PROOF_MISSING
Source code installation: download jira-tool, visit chrome://extensions/, choose “Load unpacked,” and select the chrome-extension folder

Extension Transfer

https://support.google.com/chrome_webstore/contact/one_stop_support?visit_id=638072966381024510-3990006698&rd=1

Final Thoughts

The extension itself is relatively simple but significantly improves JIRA usage efficiency. This Chrome extension demonstrates how even small quality-of-life improvements can make a big difference in daily workflow. By implementing single selection for quick filters, it solves a common pain point for JIRA users. The project also serves as a good example of how Chrome extensions can enhance existing web applications without requiring changes to the original codebase. Developers can use similar patterns to create extensions that improve usability for other web tools and applications.

Great Plugins for Visual Studio Code

Sat, 06 Mar 2021 21:47:15 +0800

JetBrains WebStorm serves as my primary development IDE, which excels at full-scale project development, while Visual Studio Code functions as a lightweight editor. For example, I often use VSC for quick tasks like editing Nginx configurations or working on test HTML files. These tools complement rather than compete with each other—WebStorm is the heavy artillery, while VSC is the nimble submachine gun. To transform VSC into a powerful development tool requires investment in extensions, since it lacks many built-in features that come standard with full IDEs.

Below are the essential plugins I’ve installed and recommend.

This list is continuously updated and refined.

Auto Rename Tag

Automatically renames paired tags.

Darcula IntelliJ Theme

This theme maintains visual consistency with IntelliJ IDEA’s interface, providing a familiar dark theme experience.

EditorConfig for VS Code

Enforces consistent coding standards across different editors and team members by reading .editorconfig files.

HTML CSS Support

Enhances HTML development with intelligent autocomplete for CSS class names and IDs defined in your stylesheets.

IntelliJ IDEA Keybindings

Maps VSCode keyboard shortcuts to match IntelliJ IDEA’s keybindings, reducing context switching friction when using both IDEs.

JavaScript (ES6) code snippets

Provides ES6 syntax highlighting and useful code snippets for modern JavaScript development, improving coding efficiency.

NGINX Configuration

Adds syntax highlighting and language support for NGINX configuration files, making server configuration editing more manageable.

Open in Browser

Provides quick access to open HTML files directly in your default browser with a simple right-click or keyboard shortcut.

WakaTime

Automatically tracks your coding time and activity, providing detailed insights into your programming habits and productivity metrics.

Python

Supports py syntax.

Code Spell Checker

Checks word spelling to avoid typos.

GitLens — Git supercharged

Opens remote addresses for git files, among other features.

At the end

So, everyone has different preferences. What plugins do you have?

从输入URL到页面展示，这中间发生了什么

Fri, 05 Mar 2021 22:24:51 +0800

最近项目并不紧张了，于是得空把一些基础理论梳理下

当用户URL输入一个网址，浏览器根据用户输入的信息判断是关键词还是网址，如果是关键词则利用默认搜索引擎拼接输入的关键词形成网址，如果输入即是有效网址，则加上协议形成URL，用户输入完内容，按下回车
回车前，如果当前有页面存在则，执行beforeunload方法
浏览器导航栏显示loading
浏览器进程构建请求行信息，以IPC方式将请求行信息发送给网络进程
网络进程接收到该URL请求
网络进程中查询该URL资源是否有缓存(强缓存)，如果有则相当于请求结束拿到响应数据，直接返回200响应头给浏览器进程，如果没有，则继续发起网络请求
网络进程中查询DNS确定URL对应的真正IP地址，如果是HTTPS，建立TLS连接
通过IP地址和端口与目标服务器建立TCP连接【TCP连接三次握手】，成功后开始构建请求头(附带Cookie)，向服务器发送HTTP请求【单个域名TCP连接数量限制，比如Chrome是6】
服务器获得信息后，会构建响应信息，发送给网络进程
网络进程获得响应信息，解析响应行的状态码来确定下一步的动作，如果是301，302则获取location，然后重复执行接收到一个URL之后的一系列动作，如果是304说明客户端有缓存，则返回304头部到浏览器进程，如果是200则继续
根据响应头的内容类型来确定下一步的动作，如果是下载类型，则唤起浏览器下载器进行下载，如果是HTML则继续
渲染进程存在打开新进程的情况，如果是新开的页面，开启新的渲染进程，如果是A页面打开的B页面，同站点，且没有开启noopener则复用A的渲染进程
浏览器进程接收网络进程的响应头数据，向渲染进程发送【提交文档】信息，渲染进程接收到【提交文档】信息后，与网络进程建立传输数据管道
渲染进程接收完毕，向浏览器进程发送【确认提交】
浏览器进程接收【确认提交】信息后，进行安全栏，前进后退界面更新
渲染进程：DOM生成=>样式计算=>布局=>分层=>图层绘制=>分块=>光栅化=>合成绘制
渲染进程渲染完成后，向浏览器进程提交页面加载完毕

参考资料

Chrome's MemoryCache and DiskCache

Tue, 02 Mar 2021 22:46:07 +0800

When debugging frontend requests in Chrome DevTools, you’ll notice that caching is divided into two types: MemoryCache and DiskCache. Here’s a summary based on my understanding of the differences between them and how Chrome selects the caching medium.

Concepts

The difference is simple - you can tell from the names alone. MemoryCache stores and retrieves from memory, making it fast but with a short lifecycle. DiskCache, on the other hand, uses disk storage, which is slower for read/write operations but has a relatively longer lifecycle and provides persistent storage.

Cache Medium Selection

I couldn’t find official authoritative documentation on how Chrome selects between these two caching mediums, so I conducted some tests and reached the following conclusions:

When a user first loads a webpage, if resources are not marked as non-cacheable, Chrome generally caches resources to disk persistently.
When a user revisits the same URL resources, regardless of whether it’s strong caching or conditional caching, once Chrome determines to load from cache, it copies resources that are early in the request loading order from disk to memory, then loads from memory. Resources later in the queue are loaded directly from disk due to limited memory space.
From this, we can conclude that cache medium selection is more about the resource’s loading order - prioritizing urgent needs - rather than the resource type itself.

Final Thoughts

Chrome certainly has a lot of intricacies. Paying attention to these details helps us better understand Chrome and the web in general. Understanding the differences between MemoryCache and DiskCache can help developers optimize resource loading and improve website performance.

Mind Mapping Tool Selection

Wed, 17 Feb 2021 22:17:03 +0800

Personal habit: for the same type of software, I like to compare and try multiple options, choose the most suitable one, then familiarize myself with it, polish it, and finally make it a unique productivity tool in this field. For example, Alfred as a Mac system search entry, Things as a Todo List, Apple Notes for daily note-taking, etc. This proves the saying “To do good work, one must first sharpen one’s tools.” Good software is worth finding and even more worth polishing.

Which mind mapping tool is best? I’ve always been torn, having used many over time. Recently, while organizing my personal skill map, I re-researched and compared them, finally settling on MindMaster. This choice won’t change in the short term at least. Here I’ll mark down why I chose it, perhaps it can help some friends.

Software Comparison

XMind
- Domestic
- Expensive, 388CNY/year
- Cross-platform
MindMaster
- Domestic
- Available by subscription or permanent purchase, 680CNY/permanent, 11.1CNY/Month
- Cross-platform, has web version
- Generous free version with basic features guaranteed
OmniGraffle
- International
- Expensive, 124.99USD/Year
- Cross-platform
MindNote
- International
- Reasonable price, 19.99USD/Year
- Cross-platform
Draw.io
- International
- Free
- Cross-platform
- Open source project

After weighing all factors, I ultimately chose Draw.io, mainly considering cross-platform compatibility, free cost, and sufficient functionality.

Draw.io’s Advantages and Disadvantages

Having used it for several years now, here are the pros and cons.

Advantages

Disadvantages

Operation experience has unreasonable aspects, it would be more reasonable if spacebar was used for dragging and moving the entire diagram, but the current design requires moving the cursor to the center node
Note writing doesn’t support markdown
The overall software GUI is still somewhat rough, lacking OmniGraffle’s refinement

Usage Recommendations

For Mac users, I personally recommend storing documents directly in iCloud, so multiple devices can sync editing and browsing directly. If it’s just for multi-device sync, you don’t need to subscribe to membership.

Final Thoughts

I admit I personally don’t like using domestic software, due to 1) security concerns and 2) stability issues, but I also acknowledge that some domestic software is indeed excellent, like MarginNote and TickTick, so you can’t dismiss them all with one swipe.
In mind mapping tool selection research, I found that the relatively best ones are domestic - XMind, MindMaster. Of course, Draw.io is international, so domestic companies, keep up the good work, reduce malicious features, and focus on making good products.
Based on my personal usage scenarios, I chose Draw.io here, but this doesn’t mean others are really bad. Ultimately, you should choose based on your needs, and of course, as usage time increases, choices may adjust.

Get Mac System Info Quickly with Alfred

Thu, 11 Feb 2021 10:40:46 +0800

Sometimes you need to quickly check macOS version or memory info. The usual flow — Apple menu > About This Mac > find the right tab > copy — is clunky. So I built a simple Alfred workflow to fetch basic system info quickly.

效果

Note: Select an item and press Enter to copy to clipboard.

Download: https://github.com/alanhe421/alfred-workflows/tree/master/about-mac

How it works

Use AppleScript to retrieve system info
Use Shell to build and print an Alfred‑compatible list

AppleScript and Shell are built‑in, so there are no extra dependencies. Check the source if you’re curious.

Learning AppleScript

For workflows, AppleScript is handy for system info and automating apps (e.g., opening a Chrome tab). I struggled with the official docs — a good book was faster to learn from:

Learn AppleScript: The Comprehensive Guide to Scripting and Automation on Mac OS X, Third Edition

Final Thoughts

This is my 20th workflow — building small tools for personal needs is satisfying.
Writing tools is also a great way to learn and practice — keep going.

Implementing GIF Search with Alfred

Sat, 09 Jan 2021 23:16:54 +0800

WeChat supports adding GIFs to emoji packs. To enrich my meager emoji collection, I needed a convenient way to find new animated GIFs. There’s a foreign website called Giphy that’s quite good and provides API support, so I spent some time implementing a workflow for searching emoji packs.

Effect

Type “gif” or “sticker” to search, press Enter to copy to clipboard, then ⌘V to paste. There are also other operations, like ⌥ to browse in browser, ⌘ to browse in Finder, etc.

So now I never worry about not finding cool emoji packs.

Workflow download link: Click here

Implementation Details

I encountered some pitfalls implementing this workflow, marking them here:

Alfred’s Script filter Input icon currently doesn't support GIF animation, even for animated GIFs. As you can see above, the GIFs in the search results list are just static first-frame images.
Copying GIFs to clipboard is solved using Apple Script. Key code below - currently tested to work with WeChat, Typora, Evernote, etc.:
```
set the clipboard to POSIX file thePath
```
GIF URLs returned by Giphy have some parameters that need to be removed for normal download, otherwise you’ll get a 403 error.
Downloaded GIF animations are cache resources. Alfred has recommended locations for cache:

Cache: ~/Library/Caches/com.runningwithcrayons.Alfred/Workflow Data/[bundle id], corresponding to environment variable alfred_workflow_cache Data: ~/Library/Application Support/Alfred/Workflow Data/[bundle id], corresponding to environment variable alfred_workflow_data

I currently choose alfred_workflow_cache, but Alfred doesn’t create the corresponding workflow folder by default - you need to create it manually.
Paths like alfred_workflow_cache contain spaces. When used as quicklookurl, they need encoding spaces replaced with %20 to work properly.
Giphy is blocked in China. Mac needs to use system proxy, and Alfred also needs to use proxy to work normally.
Giphy provides SDKs for various platforms, but since this is for workflow, I use the WEB API.
Giphy API Keys are divided into Production and beta. Production Key requires application review - they reply within 5 business days. From testing, the application threshold isn’t high.

How to Use Touch ID and Apple Watch for sudo Authorization in Terminal (Step-by-Step Guide)

Thu, 10 Dec 2020 10:48:57 +0800

I’ve always liked the Touch ID and Apple Watch unlock experience on Mac, but as a developer, I frequently use shell sudo in daily work, which also prompts for Mac password. So I wondered if Touch ID and Apple Watch could also be used for authorization. Surprisingly, it’s indeed possible.

Configuration Method

Note: Since I want to support both Touch ID and Apple Watch, I’ll install the following two libraries. If you only need one, install the target library and configure accordingly.

Download these two repositories, recommended via Git Clone
- https://github.com/Reflejo/pam-touchID
- https://github.com/biscuitehh/pam-watchid
install package

Execute in each repository directory
```
$ sudo make install
```
Edit sudo configuration to enable authorization

 $ sudo vi /etc/pam.d/sudo

Add the following configuration at the beginning
```bash
$ auth sufficient pam_touchid.so "reason=execute a command as root"
$ auth sufficient pam_watchid.so "reason=execute a command as root"


 Execute `wq!` to save


## Notes

 1. Don't forget the `sudo` in the above command
 2. After configuration modification, it takes effect immediately, no need to restart terminal or execute other commands
 2. The order of authentication authorization in the configuration file is important, recommended as above. Personally, I think Touch ID is more efficient than Watch ID when the laptop lid is open, since hands don't need to leave the keyboard
 3. If Mac is in clamshell mode, it will naturally switch to the next authentication method, such as password
 4. This configuration directly works with sudo, independent of terminal app type, so iTerm2, IDEA terminal all work

## Result


 ![](https://static.1991421.cn/2020/2020-12-10-174011.gif)

## PAM Introduction
Curious why modules all have PAM prefix, I looked it up. PAM stands for [`Pluggable authentication module`](https://en.wikipedia.org/wiki/Pluggable_authentication_module)

> An authentication mechanism proposed by Sun,
by providing some dynamic link libraries and a unified API, it separates system-provided services and their authentication methods, allowing system administrators to flexibly configure different authentication methods for different services as needed without changing service programs, and also facilitates adding new authentication methods to the system.

That's enough...

## Final Thoughts
With the above setup, it's much more convenient. But also note, securely record Mac password, there will always be scenarios where input is needed.

One-Click Audio Input/Output Device Switching on Mac with Alfred

Sun, 06 Dec 2020 00:44:03 +0800

With an increasing number of peripherals in the Mac ecosystem, there’s a frequent need to switch audio input and output devices. GUI operations are too inefficient, so I spent my weekend creating a workflow to improve switching efficiency.

Implementation Foundation

After researching various solutions, I found the options were limited:

There’s a command-line module called switchaudio-osx, but it doesn’t support AirPlay, and the author has no plans to add support. Modifying it would require C language development skills, so I abandoned this approach
AppleScript+Shell has the advantage of being built into the Mac environment with no dependencies, allowing for direct installation and use

I ultimately chose option 2, which required me to systematically learn AppleScript. I managed to get it working after just a few hours.

Current Effect

Download link: Click here

Conclusion

One hallmark of programmer efficiency is keeping your hands on the keyboard. With this workflow’s support, switching audio devices no longer requires using the mouse. Nice!

Daily High-Frequency Alfred Workflows I Use and Recommend

Sat, 05 Dec 2020 11:11:51 +0800

I love Alfred so much that whenever I identify an efficiency need, I immediately explore whether Alfred can address it. If feasible, I’ll either find a third-party solution or develop my own custom workflow. To date, I’ve developed numerous workflows and written many experience posts - quite proud of this journey!

Whether self-developed or third-party, most of these workflows are integral to my daily routine. I’m sharing them here in hopes of helping fellow productivity enthusiasts.

Notice

Click each workflow title link to access the download page. Since each download page contains detailed introductions, I’ll keep descriptions brief here and focus on demonstrating key features through GIF animations.

Workflows:

2FA-Read Code

About Mac

App ID

Coinc

Airdrop

Dash

Eudic Tools

GitHub

JetBrains - Open Project - v3

New File

OCR

Pic Uploader

Surge

Final Thoughts

There’s no perfect efficiency tool - what suits you is best
During installation and usage, you might encounter issues. Here are solutions:
- Here, I maintain many issues I’ve encountered in actual usage. Search for related problems, and feel free to submit issues
- Post questions on the corresponding workflow download pages - community enthusiasts or authors will respond

Alfred Snippet VS Apple Text Replacement

Mon, 30 Nov 2020 23:23:49 +0800

I have always liked to use Alfred’s Snippet to input commonly used text blocks, and also support configure some parameters, which can usually save the time of inputting repeated text. For example, we often did CR before and we needed a simple summary at the end. In order to improve the efficiency of the summary, I made a Snippet.

But the downside of Snippet is that Alfred only exists on MacOS, and I am unhappy as an Apple user. Because the Apple system itself has text replacement function, I had to place a part of the text block in the system layer configuration, so that it can be supported across Apple devices. However, if use the two at the same time, will cause issues. So I thought about the cooperation between the two, and marked it here.

Alfred Snippet VS Apple Text Replacement

First, let’s sort out the differences between the two.

Platform limitations
- Alfred only supports Mac, there is no iOS version. There is a remote App, but the essence is only to remotely control some functions of the Mac version App, not a real iOS ported version
- Apple’s text replacement will be synchronized to each device using iCloud, and once modified, all devices can be used immediately
Functional limitations
- Alfred’s Snippet itself supports various variables. In addition, it can use workflow to achieve more powerful replacement, and it can also control the position of the final cursor. In a word, it is powerful
- Apple’s text replacement is relatively simple, just replace between strings
- On the Mac system, text replacement in EN state does not work in all apps, such as MacDown, or the address bar of Chrome, but the above apps work in Chinese. Comparing devices, such as iPhone and iPad, work both in EN and Chinese. It is estimated that there is an App adaptation problem with text replacement.

Uniform convention

text prefix

Although text replacement is good, if the text itself has no features, it will often be accidentally triggered in actual high-frequency input. In order to solve this problem, it is necessary to formulate a prefix, here I use t, such as codereview, it will be tcodeview.

There are some considerations for this

Letters are better than special symbols

Because this text replacement scheme is often used in the iPhone, and the layout of the mobile phone keyboard determines the letter prefix, the text replacement can be quickly implemented without switching the keyboard, which is more efficient.
t means text, better associative memory, friendly

Text Phrase Division

As mentioned above, Alfred does not cross terminals, so for daily simple text phrases, such as mobile phone number, home address, email and other high-frequency input simple text, configure it at the Apple system level
For complex ones used at work and mainly solved on the desktop side, configure in Alfred

Effect

Alfred Snippet

Apple Text Replacement

At the End

Constantly polishing tools, high efficiency is the king

Implementing One-Click Airdrop with Alfred

Sun, 29 Nov 2020 10:26:10 +0800

Airdrop is an important experience in the Apple ecosystem, conveniently transferring files between devices. However, it’s still not efficient enough - always requiring mouse movement and clicking share->airdrop. In an efficiency-first era, I chose to automate this process.

Current Effect

Select files or links to trigger Airdrop for sharing

Download link: Click here

Usage Notes

Need to install dependency library in terminal first: sudo gem install terminal-share

Implementation Foundation

AppleScript supports scripted App operations; Apps without direct function support can be automated
- Complaining that Apple Script official documentation is outdated and unfriendly
Mac has built-in sharing tool functions; using third-party terminal-share library for scripting

Current Limitations

Airdrop share window doesn’t stay on top, sometimes making it seem like it didn’t trigger when it’s actually behind the browser

Final Thoughts

Using this workflow can improve efficiency a bit more - nice!

One-Click Publishing from Hexo Markdown to Medium with Alfred

Wed, 25 Nov 2020 23:31:16 +0800

I host my own blog, but I’d love to cross-post to Medium: the community is active, engagement boosts my posts, and it’s a great excuse to practice English. Publishing manually on Medium was tedious—no native Markdown support—so I rarely did it. Once I found Medium’s API and considered my love for Alfred, building a one-click workflow became the obvious solution.

Workflow download: https://github.com/alanhe421/alfred-workflows/blob/master/medium-publisher

Implementation Notes

Medium’s API lets you create stories. Authentication requires a token and author ID; the author ID is fetched once via the token and never changes. The workflow does that automatically on first run.
Alfred’s File Actions can operate on a selected Markdown file. With environment variables in Alfred workflows, we can store the author ID and skip future lookups.

Design

Install the workflow to inspect the full code.

Demo

Usage

Search for any Hexo Markdown file → press → (File Action) → run deploy.

Limitations

Medium’s API surface is small. There’s no endpoint to update existing posts, so edits still require manual work.
Support is slow; emails to yourfriends@medium.com often go unanswered.
Medium is blocked in mainland China, so make sure your machine is behind a proxy before running the workflow.
The workflow uses Node + Yarn. Users must install both and run yarn install inside the workflow directory; setup could be friendlier for non-Node developers.

Final Thoughts

Building this took a few hours—partly to learn Medium’s API, partly to fill gaps in my Alfred knowledge. Worth it: similar automations will be much faster next time.
The workflow eliminates most of the grunt work of cross-posting, even if edits still require manual steps. It’s the best trade-off available right now.

Keep iterating!

References

Alfred Workflow for Surge

Mon, 16 Nov 2020 23:58:29 +0800

Switching Surge modes always felt clunky: mouse to the menu bar, click, click again. AppleScript GUI automation was an option but too cumbersome. When Surge Mac 4.0 shipped with an HTTP API, I saw my chance to automate it via Alfred. Thirty minutes later, I had a workflow.

Pricing

I skipped my old upgrade path and bought a fresh single-device license for Surge Mac 4.0 ($39.99, with a limited-time 20% discount at the time). Full pricing lives on the official site.

Building Blocks

Surge Mac 4.0.0 / iOS 4.4.0 introduced the HTTP API.
Alfred workflows can run shell scripts; I used Node.js for convenience.

Implementation

Enable the HTTP API in Surge:
```
http-api = examplekey@0.0.0.0:6171
```
Call the API from the workflow with JavaScript/Node.

Demo

Download the workflow here.

No more mousing around—keyboard-driven toggles feel right at home.
The author hinted at even more APIs coming; can’t wait.

Limitations

The API is still growing. For instance, there’s no endpoint (yet) to query the active profile.

Closing Thoughts

With this setup I can flip Surge modes instantly—perfect for keyboard-centric workflows.

External Microphone for Mac

Sat, 14 Nov 2020 12:24:08 +0800

At home, with a large external display, I prefer to use my Mac in clamshell mode without using its built-in screen. However, I noticed that in clamshell mode, the Mac’s built-in microphone becomes unavailable while the speakers still work normally. If you want to use a microphone normally, you can simply switch to headphones, but what if you don’t want to use headphones? That’s where the question arises: how to connect an external microphone?

Purchasing Microphone and Headphone Adapter Cable

Cost breakdown:

XFAN D1 Top-mounted Microphone 153RMB
UGREEN Headphone Microphone Splitter Cable 21RMB

Installation

Important Notes

Connection is successful when Mac properly recognizes the external microphone as shown in the images above
Use XFAN’s camera connection cable (the two-stage cable) to connect to the microphone input of the UGREEN adapter cable
Even though I didn’t connect headphones here, you’ll still see “External Headphones” in Mac Sound Input Devices - just ignore it
Some online guides claim that the adapter cable’s headphone port must also be connected for Mac to detect the external microphone properly, but testing shows this is not necessary

Desktop Mounting

Since I’m using this with a desktop Mac, I needed to secure it.

After researching, I found two possible solutions:

Use Blu-Tack adhesive putty
Use a mini portable tripod with 1/4" screw mount

I’m currently using option 1

Final Thoughts

With this simple setup:

In clamshell mode, you can use Mac’s built-in speakers + external microphone - nice!
Of course, you can also use external speakers like HomePod separately - it’s flexible.

Implementing One-Click Translation with Alfred

Sat, 03 Oct 2020 09:51:01 +0800

At a friend’s request, I implemented a workflow based on Baidu Translate API. Here’s a simple share of the process.

Translation Service

Since my friend specifically requested Baidu Translate, I chose Baidu. However, I personally prefer Google Translate as its translation quality is relatively better.

Using Baidu Translate service requires the following:

Register a Baidu account
Obtain APP ID and secret key, ensure the corresponding API service is activated

Activation URL: https://fanyi-api.baidu.com/product/113

Workflow Implementation

The entire implementation is simple - just request the API, get translation results, and display them in a user-friendly way.

If you’re interested, check out the source code. If not, just download what I’ve made.

Download link: Click here

Pitfall - 52003 Error

I encountered an issue during actual development, worth complaining about. Baidu’s poor quality is indeed well-known. According to the official API documentation, using POST throws an error, but GET works. I initially thought I was doing something wrong, checked the API several times, and after comparison found it was Baidu’s fault.

data: { error_code: '52003', error_msg: 'UNAUTHORIZED USER' }

Result

Final Thoughts

After all, it’s a free service, so if there’s instability, it’s most likely Baidu’s issue.

My iPhone App List

Thu, 17 Sep 2020 11:42:03 +0800

Sorting out my personal iPhone software for record-keeping and to provide references for friends.

Description

Some apps are paid, although many free and open-source alternatives exist. Ultimately, an app’s value is determined by its output, and these apps have significantly helped my work and life, making them worth the cost.
Due to personal financial constraints, some paid apps are obtained through student licenses or trial solutions. Student verification can be free with full functionality. Trial versions also have full functionality but are time-limited. However, there are ways to clear the trial record, allowing continuous use, though this method is not ideal.
For paid apps, within economically acceptable limits, support legitimate purchases when possible.
This list is updated periodically so that some apps may be replaced.
Through continuous selection and refinement of apps, I have realized that apps are like swords to a swordsman. It’s not about quantity but about how handy and sharp they are. Choose the right ones, understand them deeply, and improve your efficiency, improving your work and life.

The app list is as follows:

ChatGPT

Function: AI for everything
Pricing: Paid/Subscription/Monthly

GPT can solve problems in article translation, online search, data analysis, and other areas. My use of Google search has significantly decreased, and AI has become my most frequently used tool.

YouTube

Function: Videos
Pricing: Paid/Monthly Subscription
Notes: Rich and comprehensive videos, learning, and entertainment are not mutually exclusive

X(Twitter)

Function: Stay updated with the latest news, such as OpenAI’s official Twitter
Pricing: Free

Duolingo

Function: Learn languages, currently learning English
Pricing: Paid/Annual Subscription

Free usage is also possible, but paid usage is recommended for unlimited hearts and an ad-free experience.

Things

Function: GTD (Getting Things Done)
Pricing: Paid/One-time purchase

The most aesthetically pleasing TODO app.

WeChat

Function: IM (Instant Messaging)
Pricing: Free

WeChat Read

Function: Reading books/magazines
Pricing: Paid/Annual Subscription

Combined with telegram zlibrary bot for free reading.

Function: IM (Instant Messaging)
Pricing: Free
Notes: So far, the best experience messaging app

Alipay

Function: Payment
Pricing: Free

JD

Function: E-commerce Shopping
Pricing: Paid/Annual Subscription

Pinduoduo

Function: E-commerce Shopping
Pricing: Free
Notes: Complements JD, meeting shopping needs

Xianyu

Function: Second-hand Trading
Pricing: Free
Notes: A good way to quickly get some money back

1Password

Function: Password Management
Pricing: Paid/Annual Subscription

Surge

Function: Network Proxy
Pricing: Paid/Annual Subscription
Notes: Highly recommended

Eudic

Function: Dictionary
Pricing: Free
Notes: Supports importing third-party dictionaries

Ctrip

Function: Travel
Pricing: Free
Notes: I really like the Lifetime Journey feature

DiDi

Function: Transportation
Pricing: Free

Amap

Function: Map Navigation
Pricing: Free

Google Photos

Function: Photos
Pricing: Free
Notes: Stores all photos with unlimited storage space

Fantastical

Function: Calendar
Pricing: Free
Notes: Calendar event management

GitHub

Function: Use GitHub
Pricing: Free
Notes: Official app, sometimes used for handling open-source project PRs or viewing repos

At the end

I like a few more apps, such as Kindle, Medium, and O’Reilly, but I prefer to use reading apps on my iPad mini due to the larger screen.
The right and handy app can be highly productive when used appropriately.

Chrome DevTools Tips and Tricks

Thu, 30 Jul 2020 23:00:13 +0800

Mastering Chrome tips and tricks can significantly improve development efficiency. Here I’m documenting some techniques I’ve discovered through daily use.

Copying Request Data

For example, when copying response body content, you might be used to double-clicking to select all in the response tab of request details, but this operation isn’t actually convenient. The fastest way is as follows:

Selecting Multiple Resource Types

Hold down ⌘ (Command key) to select multiple items

designMode

After enabling this in the console, you can directly edit the page. Sometimes it’s quite convenient to make edits and then demonstrate to business stakeholders directly, saving the trouble of taking screenshots and using Photoshop.

document.designMode='on'

Network Global Search

We often use filters to find target requests, but filters only support URL, status code, and method. Sometimes we only know keywords from the entire request URL or response body, in which case using global search can be more efficient.

Inspecting Hard-to-Capture Elements

If an element only appears under certain conditions like hover, it’s simple - use DevTools to select the element and force its state to hover. But sometimes conditionally displayed elements are hard to capture - they disappear when you move the mouse over them, which can be frustrating. In this case, you can use the debugger to set a breakpoint.

setTimeout(function() { debugger; }, 5000);

Execute this code in the console to start a timer, operate to display the target element within 5 seconds, then the page will enter breakpoint mode, allowing you to continue using inspect to view the target element and its context state.

Console Utilities

When querying elements in the console, besides using native JavaScript APIs like Document: querySelector(), you can also use Chrome-provided utilities like $(selector).

Commonly used ones are:

$(selector) - functions as an alias for querySelector
$$(selector) - functions as an alias for querySelectorAll

Note: $ doesn’t always mean jQuery, unless the page itself has jQuery loaded.

Final Thoughts

Mastering Chrome DevTools can significantly boost development efficiency and debugging capabilities. These tips and tricks - from copying request data efficiently to using console utilities and debugging hard-to-capture elements - can save valuable time during development. The designMode feature is particularly useful for quick page edits and demonstrations, while the global search in Network tab helps find specific content across all requests. Remember that Chrome DevTools is constantly evolving, so staying updated with new features and techniques is essential for modern web development.

The Road to Upgrading and Downgrading Apple’s New OS

Fri, 10 Jul 2020 23:12:08 +0800

After WWDC, I quickly upgraded my iPhone, iWatch, and Mac, thinking it would be a smooth experience. However, my emotions have been like a roller coaster. Let me cry for a bit first.

Although I had some mental preparation for the instability of the internal beta version, my feelings were like a roller coaster after upgrading.

How to Upgrade

Visit the webpage, follow the instructions to download and install the profile, and then you will get a notification for the new version, and you can upgrade directly.

https://betaprofiles.com

Note

Apple usually updates The beta version every two weeks until the fall keynote.
Be sure to back up before upgrading; for instance, when using Time Machine for Mac, I recommend a NAS solution for its cost-effectiveness. For iPhone, use iCloud backup.

Problems with Various Devices After the Upgrade

The upgrade brings a sense of freshness, such as the iPhone’s Widget and Mac’s new UI. However, along with this freshness come some annoying issues.

Mac

The bartender is wholly broken.
Terminal often doesn’t work; only restarting fixes it (improves in beta 2)
Shutdown often fails, forcing me to use a hard shutdown.
Youdao Dictionary crashes
Memory often runs out…

iPhone

WeChat crashes
AirPods, hey Siri fails.

iWatch

It works fine since it has fewer functions, just calorie-checking time.

Upgrading may feel satisfying temporarily, but I advise against upgrading test versions on high-frequency daily commuter devices due to the numerous problems affecting everyday work and life.

macOS Big Sur Downgrade

Since my primary productivity tool is the Mac, the instability of the new system seriously affected my efficiency, so I decided to downgrade. Fortunately, I could ideally do them with the uninterrupted backup of Time Machine, which restores the system.

Of course, incorrect procedures made the actual downgrade and recovery process not smooth.

Note

Simply reinstalling the system from the machine itself is useless, as it will install the latest version on the computer, such as Big Sur.
Currently, connecting Big Sur to the Time Machine will cause an error.

Downgrade Step

Power on while holding ⌘ ⇧ ⌥ R to enter Internet recovery mode
Format the hard drive.
Choose to reinstall the system.
Boot the machine, select Time Machine – choose a specific backup date – and restore

At the end

This upgrade brought a lot of trouble but also provided two valuable lessons.

Blindly upgrading productivity tools that are frequently used can have serious consequences. I give myself a severe warning and criticism and will never make such a mistake again.
The importance of backup and cloud storage. Enabling Time Machine on a NAS can serve as a system-level backup, iCloud synchronizes some data on Apple devices, OneDrive backs up Alfred configurations, Google Photos backs up photos, Evernote stores cloud notes, and JetBrains IDE syncs GitHub settings. Although it took time to plan these services initially, I no longer worry about losing my data once these systems are in place. Even with a new Mac or iPhone 11, I can quickly polish it into a device as helpful as before using this cloud data.

Failed to load response data

Tue, 30 Jun 2020 14:17:34 +0800

Recently, the testing team raised an issue - Web requests showing Failed to load response data.

Thus began the analysis and resolution process, marked here for reference.

Exclusions

response.status is 200, indicating that the request was initiated and returned successfully.
The response body of this request is empty. However, Chrome typically displays This request has no response data available for empty response bodies, which is not the case here. Hence, this is not the problem.

Root Cause

After eliminating the above possibilities, it was determined that the issue must be due to a browser-side code problem. Investigation revealed that a page refresh immediately followed the problematic request. This led to the conclusion: ====> “The immediate refresh caused the response not to load in time.”

Reproducing the Issue

For example, the issue can be perfectly reproduced if an asynchronous request with no response body is sent, and the page refreshes immediately after the response. However, if a deliberate delay of 2 seconds is introduced, the message changes to This request has no response data available. At this point, the issue was completely understood.

Further Discussion

Canceled

Typically, we discuss request statuses in the context of successful handshakes and returned states. However, other scenarios exist, such as the one above, and the canceled status. The canceled status generally occurs when a JS script manually interrupts a request or when the page refreshes while a request is still in progress.

At the end

While searching for resources on this issue, no mention of such a scenario was found online. Hence, this record is made in hopes of helping others.

References

Chrome dev tools fails to show response even the content returned has header Content-Type:text/html; charset=UTF-8

Implementing One-Click Bluetooth Device Connection with Alfred

Mon, 01 Jun 2020 22:45:35 +0800

I’m a strong supporter of wireless devices like AirPods and haven’t used wired mice or headphones for many years. However, there’s a common scenario in daily use: my AirPods are usually connected to my iPhone, but sometimes, like when I need to join a meeting, I need to quickly connect them to my Mac. The current process is: scroll mouse to the Bluetooth icon in the top-right corner of the screen => click the Bluetooth icon, select AirPods => select connect. OK, it’s cumbersome, so I wanted to create a workflow to quickly connect and disconnect Bluetooth devices.

Current Effect

When you select a disconnected device, the device will connect; conversely, it will disconnect. Mom no longer needs to perform cumbersome Bluetooth connection operations.

Download link: Click here

Usage Notes

Pairing still needs to be done manually in the system Bluetooth panel; this only lists paired Bluetooth devices
Select a Bluetooth device and press Enter to connect or disconnect the Bluetooth device
Supports AirPods left and right earphone battery level display

Implementation Foundation

Third-party library blueutil, the workflow itself just executes this command to display and connect devices.
hammerspoon reads system Bluetooth device battery information for AirPods battery display. If you don’t need battery information display, just don’t install it - I’ve implemented error handling.

Current Limitations

To ensure timely display of Bluetooth device battery information, I had to rely on hammerspoon, since Alfred itself doesn’t have the capability to access system information and needs to rely on AppleScript, Shell, etc.
Limited by Alfred’s Script Filter design, I must ensure getting the latest battery information before displaying devices. So I set up 2 keywords, requiring users to press Enter one more time - this is an unavoidable workaround.

First Time Developing a Chrome Extension

Sun, 31 May 2020 22:21:25 +0800

I’d never done Chrome extension development before, but recently noticed that JD.com, like Alibaba, deliberately creates obstacles for users regarding certain benefits, wasting valuable time. So I decided to create a small tool, which also served as practice for Chrome plugin development.

Tool Purpose

Auto-click shake-to-win
Automatically grab target amount coupons at scheduled times

The tool isn’t very significant, but it saves a few mouse clicks and eliminates the need to remember when time-limited coupons become available. So I think it has some value.

Imperfections

Since this opens mobile web pages in a desktop browser and makes requests, it should simulate mobile requests. Some activities require mobile access only, which could probably be achieved by spoofing request headers to fool the server. I’ll address this when needed.

Extension Download

How to download the plugin I made? Click here

If it doesn’t work well, feel free to complain.

Key Takeaways from Extension Development

How to Develop Quickly

Know that extension development uses the same web technologies (HTML, CSS, JS), so frontend developers should find it effortless.
Know that the .crx extension format is actually a compressed package, similar to Java’s .war files containing compiled class bytecode. Development versions don’t need to be packaged as .crx and can be installed directly.
Know the official documentation, Google specific technical issues, and study a few open-source projects. These three combined are sufficient.
I read “Creating Google Chrome Extensions” during development. The book was mediocre, missing many implementation details. Given the limited selection of books on this topic, it’s worth reading as a coarse-grained reference if you prefer learning from books.

Extension Capabilities

Since we’re building one, we should understand what extensions can do. For instance, can an extension lock a Mac screen like Alfred? I don’t think so. Understanding a technology’s capabilities and limitations is crucial.

Web page functionality: scanning DOM structure, generating table-of-contents popups, modifying page styles, and manipulating element behavior are all possible since extensions can inject custom JavaScript into target pages.
Chrome browser functionality: tabs, developer tools, themes, and notifications.

Recommended Development Tools

Extensions Reloader

After modifying JS, click the button to reload, eliminating the hassle of uninstalling and reinstalling. Note that manifest file changes require reinstallation.

Final Thoughts

I’ve been obsessed with creating small tools over the past six months. I’ve written over 4 IDEA plugins, over 6 Alfred workflows, and now learned Chrome extension development. While these tools have different forms, they’re all attempts to solve real problems in my work and life. The direct and indirect benefits these tools have brought me far exceed their development costs.
I’ve always admired people who have ideas, quickly implement them, and continuously improve and innovate. Now I feel somewhat like those masters, though I’m still far from their level, so I’ll keep working hard.
I believe it’s always beneficial for technical people to understand multiple technology areas. Your familiarity with B will help with problems in A. Knowledge may have boundaries, but there are definitely intersections and mutual influences between different knowledge areas.

Just some random thoughts for reference.

Learning Resources

Implementing One-Click Evernote Search in Alfred

Sat, 30 May 2020 13:12:55 +0800

Recently, I’ve been thinking about how to implement Evernote search in Alfred. Fortunately, someone in the community already created a version, but it supports Alfred 3 and Evernote, so some improvements are needed. Of course, if you’re not satisfied with the functionality, you can customize it yourself. Let’s get started.

Current Effect

Download link: Click here

Want to know how it’s done? Keep reading.

Script Modification

Replace two places in the scpt file:

Replace com.evernote.Evernote with com.yinxiang.Mac
Replace com.runningwithcrayons.Alfred-3 with com.runningwithcrayons.Alfred

Viewing App Signatures

How do you get the signature information of the target app? Use the following command:

codesign -dv --verbose=4 /Applications/YourApp.app

Final Thoughts

Building on the work of predecessors, supporting Yinxiang Biji (Evernote China) was achieved with just two replacements, which is relatively simple.
Why can Alfred achieve Evernote search? The feasibility lies in the fact that Evernote itself has opened up some APIs and provides AppleScript support. For details, see Evernote Developer API.
Yinxiang Biji is Evernote’s localized product for the Chinese market, but the core functionality is still Evernote, so it is also supported.

References

Implementing One-Click OCR Screenshot Text Recognition with Alfred

Sat, 30 May 2020 10:40:35 +0800

Recently I’ve been working on practice problems and found that many WeChat public accounts use images to post questions to protect intellectual property. This means I have to manually type everything from scratch during testing, which wastes a lot of time. So I considered creating a screenshot text recognition tool to save time.

OCR Service - Baidu

There are quite a few OCR service providers: Google, Tencent, Baidu, etc. I chose Baidu because their SDK supports Node.js while Tencent doesn’t, and Google is behind the firewall so reliability is weaker.

I personally don’t like Baidu, but since OCR service has limited free usage, might as well use it.

Workflow Implementation

The principle is to get images from system clipboard, make API requests to Baidu OCR service, and return text display. Check configuration after installation for details.

Download link: Click here

How to Install

Workflow File

Double-click the workflow file to install. But some environment configuration is still needed.

System Environment

If Node.js isn’t installed, install it first:

curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.3/install.sh | bash

nvm install 12


brew install pngpaste
npm install baidu-aip-sdk -g

Workflow Configuration

Log in to Baidu Intelligent Cloud, select Text Recognition, create application, and configure the three highlighted values in the workflow

Current Effect

Implementing One-Click OpenConnect VPN Login with Alfred

Tue, 26 May 2020 22:34:28 +0800

I frequently need to connect to the company VPN and have been using scripts for login, but it’s still not efficient enough. To save time, I decided to use Alfred to implement one-click VPN connection.

Workflow

The key points in the workflow include the following steps:

Use keyword to get user input for mobile verification code
Temporarily store keyword in a variable, because users need to further select server nodes
For list filter’s keyword, just enter any value that’s different from the first step’s keyword
The script uses expect, so final execution requires terminal command - cannot use Run Script
Since system password and VPN account use workflow environment variables and command doesn’t support environment variable parsing, I added Run Script to parse variables

Shell Script

Run Script

echo "/Users/qhe/Documents/Shell/vpn.sh $code {query} $mac_password $username $password"

Variable Explanation

query is the verification code
mac_password is the Mac laptop password
username is the VPN login username
password is the VPN user password

Notes

Variables and environment variables in workflow are parsed using $name in shell
As shown above, this prints the final command that terminal wants to execute, including variables
Note that if shell script doesn’t have execution permission, you need to add +x

Terminal Command

Just need to parse query, {query}, which is the result printed from the previous step

#!/usr/bin/expect
set code [lindex $argv 0]
set url [lindex $argv 1]
set macPassword [lindex $argv 2]
set username [lindex $argv 3]
set password [lindex $argv 4]

spawn sudo openconnect "$url"
expect "Password" {send "$macPassword\r"}
expect "Enter 'yes' to accept" {send "yes\r"}
expect "Username:" {send "$username\r"}
expect "Password" {send "$password\r"}
expect "Password" {send "$code\r"}
interact
~

Final Thoughts

I previously didn’t understand how to allow users to perform multiple input operations in Alfred. Now I understand that using keyword plus listFilter as shown above can achieve this. To save values after each user operation, use var and arg for storage.

Quickly Copy File Paths on Mac

Wed, 29 Apr 2020 21:04:02 +0800

I have such a need: I want to quickly copy the path of selected files or folders in Finder.

Unsatisfactory Methods

Of course, third-party apps like Easy New File can do this, but installing a bloated app for just one small need is really unwilling
Alfred can also solve this - select a file or folder, trigger with a hotkey, and get the path. But Alfred cannot extend right-click menus, and I need to remember a shortcut key.

So is there a way to customize the right-click menu to provide a copy path operation? YES - Automator

Automator Introduction

Automator is software developed by Apple for their Mac OS X system. You can combine a series of actions into a workflow through simple clicking and dragging operations, helping you automatically (and repeatably) complete complex tasks. Automator can also work across many different types of programs, including: Finder, Safari web browser, iCal, Address Book, or other programs. It can also work with some third-party programs, such as Microsoft Office, Adobe Photoshop, or Pixelmator.

After a preliminary understanding, we can know its capability limits and scope.

Alfred’s Limitations

Automator can save many repetitive operations, and Alfred is similar, but Alfred has some inherent limitations.

Scheduled tasks are not supported, which is also related to this product’s design philosophy. Alfred’s triggers are nothing more than keywords or shortcuts, which are all actively triggered
Does not support custom menus

The above 2 points, Automator can do, I have to say it’s really good.

Creating Workflows

Knowing what it can do, let’s get started. I won’t go into detail here because the official website explains it clearly. Click here

Current Effect

Select a folder or file, right-click - in services you can see the custom menu item - Copy Path, perfect

Here’s what I made, click here, download and install to use

Final Thoughts

It seems like a small step, but for similar needs, you now know the implementation method, so it’s worth it.

Implementing One-Click Screenshot Upload to Image Hosting with Alfred

Sat, 04 Apr 2020 22:19:29 +0800

Because my personal blog migrated from China to overseas, the server was destroyed and the registered domain became invalid. The blog’s images and other resources had been using Qiniu Cloud image hosting + custom domain, so they were affected and stopped working. When considering a new image hosting service, I tried imgur, but that service is blocked in China - overall, it was frustrating.

After enduring this situation for a while, I decided to build my own image hosting service while migrating historical image resources from Qiniu Cloud to ensure that images in previous blog posts could be accessed normally. At the same time, to quickly upload image resources, I created a convenient workflow using Alfred.

Here’s a simple record of the entire process.

Batch Downloading Qiniu Image Hosting Resources

Regarding images hosted on Qiniu Cloud, I discovered they couldn’t be previewed or downloaded, which was really frustrating. Fortunately, their customer service is quite good, and after consulting with them, I learned the solution.

The Simplest Method, Highly Recommended

https://developer.qiniu.com/kodo/tools/5972/kodo-browser

For the complete solution provided by Qiniu customer service, check here

Implementing Static Resource Hosting with VPS

Creating your own image hosting service is actually just having a web service that can be accessed on the public internet. Since my blog itself is already hosted on a VPS, I only needed to modify the configuration:

Add domain resolution in DNS, for example, I used static.1991421.cn
Configure Nginx accordingly, find detailed information on your own

Implementing One-Click Image Upload with Alfred

The previously used iPic doesn’t support custom image hosting services. So I had to give it up and build my own solution.

Here I implemented a Workflow with Alfred.

How to Use

Either take a screenshot or select an image file, copy with ⌘ C, then upload with one key combination ⌥ ⌘ U, and ⌘ V to paste the resulting markdown format web address.

The effect is as follows:

If you need the Alfred Workflow, click here

Conclusion

After all this effort, previously inaccessible blog image resources were finally recovered and restored to normal
Image resources in my writing can finally be controlled and managed by myself; imgur and Qiniu are no longer needed
Alfred’s support ensures that the upload experience is essentially the same as before, without creating additional operational costs.

So, it was worth the effort.

References

Dash Usage Guide on Mac

Fri, 28 Feb 2020 23:22:46 +0800

Today I spent some time researching Dash usage. Previous usage wasn’t systematic and clear enough. After adjustments and refinement, efficiency and productivity have been improved.

Note: Dash Mac version is paid.

Features

Query Language API

As a frontend developer, I frequently need to check HTML, JS compatibility, etc. With Dash, it’s very convenient to view these. Although it simply crawls MDN documentation, it does save a lot of search time.
Annotation

Sometimes for certain details, you can add notes with your own understanding, just like taking notes while reading books.
~~Snippet~~

This feature is personally deprecated and not used.

Personal Practice

Regarding Snippet, I recommend using Alfred and system-level text replacement for management. Snippets are currently divided into two categories, both prefixed with ’t’, but dynamic ones go in Alfred, while static ones are preferably configured in text replacement.
- t means text, text such as phone numbers, addresses, etc., can all be configured as snippets.
- System text replacement will sync across all Apple devices.
- Alfred here can also be replaced with similar apps like Raycast.

Final Thoughts

With the above design, code can be reused more efficiently.
As the old saying goes, “If you want to do a good job, you must first sharpen your tools.” The purpose here is still to refine the tools and thereby improve productivity.

How to Use Alfred for Efficient Word Lookup with Eudic Dictionary (Step-by-Step Guide)

Sun, 03 Nov 2019 19:14:35 +0800

Eudic Dictionary is currently my only dictionary for word lookup, but the overall operation experience is still not efficient, so I plan to spend some time polishing it.

Complaints About Current Eudic

Before polishing, let me first complain about things I find annoying

For word selection and lookup, if automatic word selection is enabled, word lookup icons will always be displayed everywhere, which is very annoying for someone who pursues simplicity like me. With manual word selection, every time I want to look up a word, I have to manually type the word again for searching.
Cannot achieve one-click pronunciation - either choose automatic pronunciation after word lookup, or need cursor operations to select and trigger pronunciation.

Usage Flow Design

Since I want to polish it, let me first set a goal. The diagram below shows the operation flow I designed, which solves 2 pain points:

After invoking Eudic Dictionary, no need to manually input the target word again
One-click American pronunciation

Technology

Apple Script to implement app operations for word lookup and pronunciation
Alfred to implement getting cursor selection content and hotkeys

Eudic Settings

Disable hotkey settings

Automatic Word Search Execution


tell application "Eudic"
 activate
 show dic with word "{query}"
end tell

One-Click Pronunciation

on alfred_script(q)
tell application "Eudic"
 activate
 set windowName to the name of the front window
 speak word with word windowName
end tell
end alfred_script

Note: Eudic’s one-click pronunciation is American pronunciation, which is exactly what I need. If it’s not, then this method cannot be used, and you would need to implement controlling cursor operations on GUI elements.

Final Alfred Workflow

Notes:

The hotkeys are set this way because my current design uses ⌘ ⌥ combination for system-level shortcuts, and ⌘ ⇧ combination for application-level shortcuts. E means eudic, s means speak
The reason the first workflow needs to add launch is to bring the app to front. The online solution set frontmost to true doesn’t work.

Workflow download link: Click here

Final Result

The effect of the second one-click pronunciation cannot be demonstrated, experience it yourself.

AppleScript Usage Tips

During this polishing process, I also learned about Apple Script. There’s actually very little documentation available, so I’ll record some commonly used tips here.

Apple Suite

For individual apps, what actions we can perform depends on the Apple Suite. Open Script Editor, press ⌘ ⇧ O, select the specific app, and you can see the corresponding class properties and functions.

Log Printing

log hello

Variable Setting

set name11 to "1111"

Final Thoughts

Now word lookup is more efficient than before, Perfect!

One-Click Connection to Cisco AnyConnect Secure Mobility Client

Sun, 06 Oct 2019 22:57:53 +0800

For reasons we all know, I couldn’t access the external internet recently, so I used the company VPN — but connecting was time‑consuming with many steps. I looked for a better way.

An internal email helped a lot. I tested it successfully, so I’m summarizing it here.

The tedious manual flow

Start Cisco AnyConnect Secure Mobility Client
Enter account and password
Choose SMS verification
Check the SMS code on your phone
Enter the code in the client
Click confirm

How to automate it

Install oath-toolkit
```
$ brew install oath-toolkit
```

Write a shell script

Call it vpn.sh for example.

#!/bin/bash

killall 'Cisco AnyConnect Secure Mobility Client' 2>/dev/ null
/opt/cisco/anyconnect/bin/vpn disconnect >/dev/null

code=`oathtool --totp -b **secret_key**`

/opt/cisco/anyconnect/bin/vpn -s connect $1.company.vpn.com << EOF | sed 's/Password: .*/Password: ********/g'
**username**
**password**
**second_authentication_method_index**
$code
EOF
open -g '/Applications/Cisco/Cisco AnyConnect Secure Mobility Client.app'



3. Fill in variables

 - `secret_key`: your VPN TOTP secret. For Okta Verify: change password → Extra Verification → Okta Verify Mobile App → Setup → Next → Problems scanning barcode → copy the Secret Key.
 - `username`: VPN username
 - `password`: VPN password
 - `second_authentication_method_index`: the index for the selected second‑factor method; if using the secret key TOTP, provide its index.

 At this point, the most painful SMS verification code can be replaced by the secret key.

4. Make the script executable

 ```bash
chmod +x vpn.sh
 ```

5. Run the script

 ```bash
 ./vpn.sh bj

 ```
Here, the `bj` variable exists because our VPN has multiple node regions. The script uses `$1.company.vpn.com`. If you do not need it, remove the variable.

The script will automatically start the Cisco client and connect. This removes the tedious manual steps and saves at least 2 minutes each time. It also kills other client processes at startup, and re-running the script while the client is running is fine.

## Nice to have
Automation helps, but opening Terminal each time isn’t elegant. Create an Alfred workflow so typing “vpn” runs the script automatically.

## Final Thoughts

Repetitive steps are manual labor. Use tools to eliminate toil.

My Chrome Extension List

Thu, 03 Oct 2019 23:55:57 +0800

I’ve previously listed my commonly used apps and hardware. This time I’m cataloging the Chrome extensions I use daily, with some notes.

The extensions I use fall into two categories.

Updated continuously

Daily use

1PasswordX -Password Manager

Use alongside 1Password on Mac and iPhone; summon with a shortcut to autofill quickly.
AdBlock

The well‑known ad blocker. Some sites (e.g., iQIYI) can’t be blocked fully; sometimes paid services are the right call.
Grammarly for Chrome

Great for non‑native written English — and free. Useful when writing on GitHub/Medium; paired with Google Translate, it covers basic communication.
Synology Download Station

Works with my Synology — clicking a movie link can trigger a direct download task.

Vimium

Use Vim‑style navigation (e.g., G to bottom, yy to copy URL). Once learned, it boosts efficiency.

Note: Some shortcuts conflict with GitHub’s; add exclusion rules.

Tampermonkey This complements all extensions: inject custom JS for specific sites. For example, a movie site I visit loads ad scripts that redirect on click — Tampermonkey lets me remove them.

(function() {
 'use strict';
 window.setTimeout(()=>{
 const ads = document.querySelectorAll('a[id^="cs_ap_"],div[id^="cs_DIV_cscpvric"],iframe');
 ads.forEach(item=>{
 item.remove();
 });
 document.body.onkeydown=null;
 },200);
 })();

uBlacklist

Hide results from certain sites; great for filtering out low‑quality engines.

Modern for Wikipedia

Beautifies Wikipedia’s UI.

Image downloader - Imageye

Quickly/bulk download images from a page; supports a toggle hotkey.
Copy as Markdown

Convert selected text to Markdown via context menu — very efficient when you need MD.

Developer tools

Wappalyzer

Must‑have for web devs: see the stack used by a site at a glance.
Open SEO Stats

For sites you’re visiting, get basic info like server country, IP, etc.

React Developer Tools

Must‑have for React devs.

Redux DevTools

Must‑have for Redux devs.

Download extensions as CRX

For well-known reasons, Google is often inaccessible, so you can’t access the Web Store to download extensions. But Chrome supports offline installation. How do you find the CRX file?

Recommended site: paste a store URL and download the CRX. This site isn’t blocked in China.

https://crxextractor.com/

Install

Open Chrome Extensions and drag the CRX file into Chrome to install automatically.

While this solves installation without Google access, ideally fix access so you can use the Web Store directly.

Final Thoughts

Those are my go‑to extensions. Don’t chase tools or “efficiency” for their own sake. Find what fits you and actually solves problems.

Automate Tasks with Hammerspoon

Sat, 28 Sep 2019 16:08:52 +0800

I’d heard of Hammerspoon but hadn’t tried it. I wrote a few scripts recently — fun and useful — sharing notes here.

Below, hs stands for Hammerspoon.

A small utility

Features

Auto‑mute system audio
Switch MVN settings

Code

-- audio mute 
-- change mvn setting 

local workWifi = 'company-wifi'
local outputDeviceName = 'Built-in Output'
hs.wifi.watcher.new(function()
 local currentWifi = hs.wifi.currentNetwork()
 local currentOutput = hs.audiodevice.current(false)
 if not currentWifi then return end
 if (currentWifi == workWifi and currentOutput.name == outputDeviceName) then
 hs.audiodevice.findDeviceByName(outputDeviceName):setOutputMuted(true)

 local changeMvnCommand="ln -sfn ~/.m2/settings_company.xml ~/.m2/settings.xml"
 hs.execute(shell_command)

 hs.notify.new({title="HS Robot", informativeText="Connect to Company"}):send()

 end
end):start()

How it differs from Alfred

Alfred offers fixed interaction patterns (keywords, hotkeys) to boost productivity.
Hammerspoon uses Lua bindings to macOS APIs for things Alfred can’t do: listen for Wi‑Fi changes, run shell commands, manage windows, etc.
They complement each other well.

References

For simple tools, the official docs are best:

https://www.hammerspoon.org/
Lua tutorial: https://www.runoob.com/lua/lua-tutorial.html

Accessing Intranet Domains Over VPN

Sun, 22 Sep 2019 23:25:05 +0800

Recently my SS proxy stopped working, so I switched to the company VPN. But intranet domain services stopped working.

So I started investigating.

Why intranet domains fail over VPN

To solve it, we must understand why intranet domains fail under VPN.

Take Google as an example. We send a request to the proxy, the proxy resolves the domain to an IP, then requests Google and returns the response. The problem is the proxy cannot resolve our intranet domain IP. So the key is: how do we prevent those requests from going through the VPN proxy?

The answer is the hosts file.

hosts file

The hosts file is a system file that maps hostnames to IP addresses. It can supplement or replace DNS. Unlike DNS, users can control the hosts file directly.

Open hosts and you will see a record like:

127.0.0.1 localhost

Developers know this well. We often access local web projects via localhost, which is a domain. If DNS cannot resolve it, why does it work? Because this record exists. That implies hosts has higher priority than DNS - yes.

hosts vs DNS priority

The hosts file is still kept in operating systems, and its priority is higher than DNS. The OS checks hosts first; if not found, it queries DNS.

Solution

Now we can add intranet domain IPs to hosts. I recommend the app iHosts. For me, I only need these host entries when VPN is on, so I use an app to group and toggle them.

Find domain IP

Run ping in terminal. The screenshot shows baidu’s public IP.

Private IP ranges

TCP/IP reserves three private address ranges:

10.0.0.0/8: 10.0.0.0-10.255.255.255
172.16.0.0/12: 172.16.0.0-172.31.255.255
192.168.0.0/16: 192.168.0.0-192.168.255.255

Final Thoughts

Even without SS, the company’s stable VPN still allows me to use Google, so normal work and life are not affected.

References

How to Use Alfred to Switch Maven Settings with One Click (Step-by-Step Guide)

Sun, 18 Aug 2019 23:32:29 +0800

Since company projects require using internal Maven resources, which aren’t needed at home, switching settings back and forth is time-consuming. Inspired by automation, I considered creating a script to switch sources.

Script-Based Initial Solution

I came across an article by a fellow developer about script-based switching, which gave me an idea. Here’s the script:

#!/bin/bash

base_dir=~/.m2
setting_home=settings_home.xml
setting_work=settings_work.xml

PS3='Please enter the number of your choice: '
options=("home" "work")
select opt in "${options[@]}"
do
 case $opt in
 "home")
 ln -sfn ${base_dir}/${setting_home} ${base_dir}/settings.xml
 echo "Switched setting.xml to home!"
 break
 ;;
 "work")
 ln -sfn ${base_dir}/${setting_work} ${base_dir}/settings.xml
 echo "Switched setting.xml to work!"
 break
 ;;

 esac
done

The script allows interactive execution to switch settings. However, this method still requires running the script each time. Is there a way to achieve one-click switching? Yes! Alfred can do it.

How can we achieve this?

Adding an Input Keyword

Adding a List Filter

Adding Script Execution

The above script was slightly modified as follows:

base_dir=~/.m2
setting_home=settings_home.xml
setting_work=setting_work.xml

if [ "{query}" == "home" ];
then
 ln -sfn ${base_dir}/${setting_home} ${base_dir}/settings.xml
else
 ln -sfn ${base_dir}/${setting_work} ${base_dir}/settings.xml
fi

Default Maven Settings Configuration

Here’s a link to the default settings.xml configuration: Click here

Adding Notifications

To enhance the experience, add a notification after each successful switch.

Screenshots

With this setup, you can switch Maven settings with one click. Perfect.

Docs

Shell Script to Switch Maven’s settings.xml

Learning PlantUML - A Powerful Drawing Tool

Sun, 26 May 2019 22:06:31 +0800

Recently, a colleague recommended a tool called PlantUML, which uses text to draw complex program logic. After trying it out, I found it quite good, so here’s my learning record.

Plugin Download

Visual Studio Code and JetBrains’ IDEA both have corresponding plugin support. Here are the links.

Visual Studio Code - PlantUML
JetBrains - PlantUML integration

Getting Started with Definitions

Now that we have the tools, let’s start learning.

What is UML

Unified Modeling Language (UML) is a non-proprietary third-generation modeling and specification language. UML is an open method for specifying, visualizing, constructing and documenting the artifacts of an object-oriented software-intensive system under development. UML represents a collection of best engineering practices that have proven successful in the modeling of large and complex systems, particularly at the software architecture level.

For complete introduction, click here

PlantUML

PlantUML is an open-source tool that allows you to draw UML diagrams using a text language. PlantUML’s language is a domain-specific language. It uses Graphviz to implement flowchart rendering and layout.

For complete introduction, click here

Diagram Types

Here I’ll just list the diagram categories

Sequence Diagram
Use Case Diagram
Class Diagram
Activity Diagram
Component Diagram
State Diagram
Object Diagram
Deployment Diagram
Timing Diagram

For the usage scenarios of each diagram, I recommend finding more detailed articles.

Common Issues

After understanding common diagrams and syntax, there are still some pitfalls in actual usage. Here are common issues.

File Extensions

Currently supports *.wsd, *.pu, *.puml, *.plantuml, *.iuml

I personally prefer .puml, as it includes uml which makes it clear it's UML

Text Line Breaks

For example, in diagram annotations, text often needs line breaks. How to achieve this? Use \n

Command Line Operations

Sometimes you need to use command line for automated image generation, command as follows:

# Generate UML PNG
java -jar ./plantuml.jar -o "./out-png" -progress -tpng -config "./config.txt" ./internal-quote-btn

For jar package download, click here
config.txt is used for custom chart configuration, such as DPI. The default generated charts are not clear, use the following configuration:
```
skinparam dpi 200
```

Final Words

I think the beauty of PlantUML is that you can quickly generate images in code form - efficient, beautiful, just like markdown for quick article formatting.

So, mastering it can improve diagram productivity. Let’s go!

My Mac App List

Sun, 21 Apr 2019 18:11:21 +0800

I have spent some time to check my personal Mac Apps, so provide a list for the references.

Will keep updating

Notes

Some are paid apps, but there are also many free and open-source options. Ultimately, the value of an app is in its output. These apps have significantly helped my work/life, and they are worth the purchase.
In order to save money, for some paid apps, I use open-source licenses.
If you can afford it, suggest to buy and support the official versions.
The list is periodically updated, so some apps may be replaced.
When constantly choosing and refining apps, I have one feeling: apps to us are like swords to a swordsmen. It’s not about the quantity but about being handy and sharp. So, choose the ones that suit you best, learn them deeply, and ultimately improve your efficiency, making work and life better.

App List

Alfred

Function: An application launcher and productivity software, Alfred is similar to macOS’s Spotlight function, but offers a higher degree of customizability and extensibility through its action system known as “workflows”.
Pricing: Paid
Note: It it recommended to buy the Mega version; the author keeps updating, and the community is active

Dash

Function: An API Documentation Browser and Code Snippet Manager
Pricing: Paid
Note: High upgrade cost, recommend not upgrading if no special needs

Moom

Function: Window management
Pricing: Paid
Note: None

Bartender

Function: Menu bar app icon management tool
Pricing: Paid
Note: None

Fantastical

Function: The calendar app, supports natural language input and calendar subscription
Pricing: Paid
Note: None

Surge

Function: Proxy tool
Pricing: Paid
Note: None

1Password

Function: The Best Password Manager
Pricing: Paid
Note: Strong performance in password management

Function: Secure communication, the best IM tool so far
Pricing: Free
Note: Bots and channels are powerful

WeChat

Function: Office IM
Pricing: Free
Note: None

Chrome

Function: Browser and front-end development debug tool
Pricing: Free
Note: None

Typora

Function: Markdown Editor
Pricing: Paid/one-time purchase
Note: You can sync md files on multiple devices with iCloud

keka

Function: The macOS file archiver, supports password protection
Pricing: Free
Note: Free on the official website, paid on AppStore

Things

Function: GTD, a great todo list
Pricing: Paid
Note: None

PostMan

Function: Network debugging
Pricing: Free
Note: None

iTerm2

Function: Terminal app
Pricing: Free
Note: None

Snipaste

Function: Screenshot
Pricing: Free
Note: None

PicGIF Lite

Function: Convert photos and videos into incredible GIFs quickly.
Pricing: Free
Note: None

Affinity Photo 2

Function: Graphic design, photo editing
Pricing: Paid/one-time purchase
Note: Purchase on the official website; platform-specific, unlimited devices. cheaper than Photoshop.

Microsoft Remote Desktop

Function: Remote desktop
Pricing: Free
Note: Not available in China, need download from foreign stores

Eudic Dictionary

Function: Dictionary
Pricing: Paid/one-time purchase
Note: None

FileZilla

Function: FTP
Pricing: Free
Note: Choose the first version tar.bz2 format, download and extract

Karabiner-Elements

Function: Key remapper
Pricing: Free
Note: None

Spotify

Function: Music app
Pricing: Subscription
Note: A free version is also available, with limited features and ads

iMazing

Function: iOS device management/file management
Pricing: Paid
Note: None

WebStorm

Function: IDE, further enhances productivity with plugins
Pricing: Paid
Note: Open-source project license

DataGrip

Function: Database, more efficient than Navicat, rich in features, supports plugin development, highly expandable-consistent design and experience with IDEA, low learning curve.
Pricing: Paid
Note: Open-source project license

CodeWhisperer

Function: Command auto-completion tool, previously known as Fig
Pricing: Free
Note: Terminal command auto-completion

Office 365

Function: Office suite
Pricing: Paid
Note: None

Visual Studio Code

Function: Lightweight text editor
Pricing: Free
Note: None

Docker

Function: Manage container applications
Pricing: Free
Note: None

At the end

There is no best, only better. What suits you is the best.

Docs

https://github.com/jaywcjlove/awesome-mac

About Alfred: What you need to know

Sat, 06 Apr 2019 11:18:52 +0800

I’ve been using Alfred for several years and believe it is a powerful tool. I summarize my most used features for your reference and perhaps to help the follower.

Alfred is my primary entry for searching and querying on my Mac. Every operation I perform start from this single input box.

Instructions

The following tutorial applies to Alfred 4/5

let’s start!

Replace Spotlight

Although the built-in Spotlight on Mac is quite good, Alfred is more powerful. As the saying goes, “Two tigers cannot share one mountain,” so I had to disable the Spotlight.

Configuration

Settings -> Keyboard, uncheck Spotlight shortcut
Settings -> Dock, select Automatically hide and show the Dock
Alfred -> Hotkey settings, recommended double ⌘, and choose to login

After setting this up, you’ll find your desktop much cleaner. Double-tap ⌘ to bring up the Alfred input box, and everything starts from here, even launching various apps can be easily done from here.

Web Search

For frequently used website search services, you can configure them as searches. For example, I often search on JD and NPM, so I configured them. In the future, I just need to invoke Alfred, enter the keyword, and press Enter to go directly to the search results page of the related website.

Configuration

How it works

File and Folder Search

For example, I often need to find files, and it’s really inconvenient to look through Finder all the time. Here’s what you need to do: invoke Alfred, enter ' or a space, then type part of the file name and press Enter to open it. Or press ⌘ ⏎ to open it in Finder.

Notes

Supports files and folders; by default, pressing ⏎ opens folders.
’ is an English character, and the Chinese characters don’t work, so using space is more convenient.
Press ⌥ and Enter to open the selected item in Finder.
When searching for an app, if you want to browse the list of recently opened files, just press ➡️ when selecting a specific app, choose recent documents, then ➡️.

Web Bookmarks

I previously didn’t pay much attention to this feature, but now I use it frequently. Essentially, it syncs the browser bookmark records. In the past, opening a webpage required going to the browser, finding the bookmark, and pressing Enter to browse. Now, when you enter something, it directly matches the bookmark URL. Select the target URL and press Enter.

For example, I bookmarked the Redux URL https://github.com/camsong/redux-in-chinese in Chrome. Now, to open it, I just do this:

How it works

Clipboard History

Sometimes, you need to copy messages, usernames, or passwords from WeChat and use them on a website. Switching windows for copy-pasting is inefficient. This feature can temporarily save multiple clipboard entries, allowing selective pasting, and significantly improving efficiency.

How it works

Calculator

For daily calculations, you can directly perform calculations in the input box without opening a separate calculator.

Contacts

Quickly search contact information, make phone calls, or send text messages.

To make it user-friendly, consider the following settings:

Use Spotlight to search for data

If not selected, some contacts may not appear even though they are in the address book.
Customize action settings, such as supporting sending text messages. Since phone calls are infrequent, I added modifier key configurations.

Music

I don’t like Apple Music, so I chose to disable this feature.

For other music apps like Spotify, you need to download workflows to use them.

Snippets

This feature is also a magical tool. It triggers text expansion by entering specific text keywords. For example, I often need to enter addresses in many places, which is annoying. Using Snippets solves this problem.

Configuration

Effect

Notes

Prefixing is important to avoid unnecessary text expansion. Snippets support some variables like dates, which are very useful. For example, I write a Snippet to record the start time for daily project code review meetings.
Too many keywords can be hard to remember, so for low-frequency ones, do not enable keyword expansion. Instead, use the history panel or snippet keyword search to trigger them.

1Password

Integrating with 1Password allows quick access to stored websites and automatically supports auto-filling login credentials.

Settings

You need to enable third-party integration in 1Password; otherwise, Alfred will show Unable to find 1Password Data at the bottom of the page.
Enable bookmark search in Alfred

Do not click Show in default results.
Click Advanced, and enable Discover Automatically. This way, you don’t need to manually enter the 1P data path.
Alfred v5 no longer includes built-in support for 1Password8. You need to install a workflow to resolve this. For more details, click here.

Effect

System Command

This is also quite good, such as locking the screen, restarting, ejecting disks, and other common commands.

Previously, I encountered an issue where typing “lock” and pressing Enter didn’t lock the screen. I discovered it was due to a conflict with a shortcut key in QQ. To resolve this, I simply removed the QQ shortcut key settings. For more information on this issue, you can visit here.

Terminal

You can also directly enter terminal commands in Alfred. This is particularly useful for programmers. If you are not a programmer, you can skip this section.

Settings

Since I usually use iTerm2 instead of the system terminal, some configuration is needed. For the setup details, please visit here.

Note: Integration only solves the quick browser access to 1Password stored sites. The actual account and password entry still requires the browser's own 1Password integration.

Effect

Workflows

The above features are not the most powerful; the most powerful feature is the workflow.

Official Store

Alfred has finally launched an official store. Visit it to search the workflow, click to install, and it will prompt the local Alfred to install.

Recommended the Third-Party Workflows

Here are a few workflows I frequently use:

Dash Using Dash requires the Dash app. For developers, it’s highly recommended as it makes API documentation searches much more efficient.
GitHub GitHub repository search.
JetBrains - Open Project Search and open JetBrains IDE projects.
alfred-currency-conversion Currency conversion.

Not Enough? Write Your Own!

For the workflows I’ve written, you can visit here. Unknowingly, I have written over 40 workflows. Kudos to myself 🍗.

Other Issues

Disable Shift Preview

In Alfred’s input box, pressing Shift will previews the currently selected item. but switch input method’s is default as Shift, it can be annoying. Here’s how to solve it:

Using Terminal Output as the Next Input

For example, if the terminal output is 111, can 111 be used as a parameter for the next command? Yes, it can. For example, in bash, you need to echo the output, and in JS, you need to use the console.log to output.

Excluding Specific Apps from Clipboard History Trigger

As a developer, I often use IDEs like IDEA and DataGrip, which also have clipboard histories with the default shortcut ⌘ ⇧ V. I habitually want to set Alfred’s global clipboard shortcut to the same, but if I set it, it will disable the feature in the IDEs. How to solve this?

Firstly, Alfred’s clipboard history currently only has settings to exclude copying content from specific apps, not excluding specific apps from triggering the hotkey. So, here is a workaround.

Delete the original clipboard hotkey.
Create a hotkey workflow, set the trigger key as ⌘ ⇧ V.
Configure the related apps (IDEA, DataGrip) so that the hotkey is only triggered when these apps are not focused.
Create a Key Combo and set the hotkey to ⌥ ⌘ ⇧ V. The more complex, the better.
Set the clipboard hotkey to ⌥ ⌘ ⇧ V.

By this way, when not focusing on IDEA or DataGrip, pressing ⌘ ⇧ V triggers Alfred’s clipboard history. When in IDEA or DataGrip, it continues to use the software’s built-in clipboard history. Same shortcut, different clipboard histories. Perfect!

Setting Alfred’s Default Keyboard Language

Since Alfred’s commands are all in English, even searching for Chinese filenames can be done using pinyin, so it’s more convenient to set Alfred’s default language to English. Otherwise, every time you invoke Alfred, you’ll need to press ⇪ to switch the input method, which is very inconvenient.

Fortunately, Alfred supports default language settings.

Notes

The default is EN, but you can still using ⇪ to switch the keyboard languages.
If this option is empty, it will use the current system keyboard language.

Double Tap Hotkey Settings

Double tap hotkey only supports specific modifier keys [⌃ ⌥ ⌘ ⇧ ]. For example, double tapping t is not supported.

Why Design It This Way

Because actions like double tapping t are very common, implementing double tap T to trigger an action would conflict with daily operations.

Alfred Proxy Settings

Some workflow services use foreign services like GitHub/Google. To use them properly, proxy settings are needed. In this way, Alfred will use the system proxy, or you can specify the exact proxy service address. For more proxy questions, you can check here: https://github.com/alanhe421/alfred-workflows/discussions/199

Sync Settings

As mentioned above, the tools we meticulously refine are not easy. If the system is damaged or the software crashes due to an error, it is possible to lose the configuration. To ensure safety, suggest backing up your settings. I recommend using DropBox, which gives 2GB of space when registration for free, which is.

Settings: Go to Advanced => Sync => Select the synced folder.

Notes

Both Alfred and I do not recommend using iCloud.
Some settings like Alfred launch hotkeys and proxy settings will not sync.

Preview Version Download - Early Access

In the Update interface, select pre-releases from the dropdown menu.

Alfred Settings Search

If you want to search for a specific workflow or snippet, enter ? followed by the keyword to search. The search range will cover all settings in Alfred.

Anything Else?

Let’s Wait.

There are too many features to cover in one article. For more usage tips, click here.
For my workflows, click here.
Follow the official forum, and click here.

Limitations of Alfred

The features mentioned above cover all aspects of Alfred, and you can explore various extensions to see what else it can do. However, here are some limitations of Alfred:

Alfred’s design limits its triggers to a combination of hotkeys and specific text snippet expressions. It cannot be a menu item, meaning its entry points are fixed. For example, if I want to add a right-click menu item in Finder to copy the current directory path, can I do it? No, but you can achieve it with hotkeys. However, it’s unrealistic to remember so many hotkeys.
All triggers are instantaneous. If I want to schedule opening a webpage or sending an email, can Alfred do it alone? Clearly, it’s unrealistic.

Supplementary Software

These two points are its design shortcomings or design ceilings. Here are two recommended software to complement its deficiencies:

Automator (Built-in)
Hammerspoon (Open-source and free)

Windows Platform?

Alfred only supports Mac and has no plans for Windows. If you want a similar experience on Windows, here are a few options. You can choose by yourself.

https://u.tools
- Supports plugin development in JavaScript
http://www.wox.one/
- It supports plugin development in any language, but C# and Python are the most convenient
- Open-source

Powerpack License Purchase

License purchase is explained at the end of this article. If you find it essential, you can buy it.

I recommend purchasing from the official website. The price is €34 for a single-user license (approximately 246.377 CNY) or €59 for a lifetime license (approximately 427.536 CNY). If you’re unfamiliar, start with the single-user license and upgrade to the lifetime license if you like it.
The license has a limit on the number of activated devices:
- Single-user license: 2 devices
- Lifetime license: 4 devices

At the end

After writing so much, one thing is clear: Alfred is a must-have tool for efficiency enthusiasts. What’s more to explore? Just play around and find more details.

Here’s my usage report:

Reference

Modifying and Saving Static Resources in Chrome Developer Mode

Mon, 22 Oct 2018 23:23:25 +0800

There’s a scenario where we open Chrome developer mode to modify frontend resources of a webpage to achieve a certain effect, but the changes are lost upon refresh. Is there a way to save them? Yes! Chrome 65 introduced a feature called local overrides.

See the Effect

Procedure

Add Override Folder

Save to Override

For example, when visiting Baidu search, select the baidu HTML webpage, right-click, and choose “Save for overrides.” You’ll see this HTML file in the overrides section and in the physical disk folder you selected.

Modify the File

You can modify it in Chrome - you’ll notice that this file is editable in browsing state, essentially functioning as an editor. You can also directly modify the file in your local system. After modification, when you refresh the page with developer mode open, you’ll see the changes successfully applied.

Currently, this only works for modifying static resources. XHR asynchronous requests cannot be modified.

Final Thoughts

Chrome’s Local Overrides feature is incredibly useful for developers who need to test modifications to static resources without deploying changes to a server. This feature allows you to persist CSS, JavaScript, and HTML changes across page refreshes, making it perfect for debugging and testing UI modifications. While it only works for static resources and not XHR requests, it’s still a powerful tool in the developer’s arsenal. Remember that these overrides are local to your browser and won’t affect other users or the actual production website.

Mac Hotkeys:Boost Your Productivity

Sun, 09 Sep 2018 13:44:31 +0800

Recently, while working on a project, I saw experts using shortcuts with incredible efficiency. Their proficiency was awe-inspiring, highlighting the gap between us. While you’re still slowly moving your mouse, the expert might have already switched between numerous files and executed several actions efficiently. This gap in efficiency multiplies over time. Seeing this gap has motivated me to start mastering various common shortcuts. Here, I record them for my reference and perhaps to help others.

Disclaimer

Since I am a Mac user and a Developer, the software and skills covered here are focused accordingly.
Some shortcuts are marked with * indicating that they are custom settings, not software defaults, and are for reference only.
The operational techniques must also be continually adjusted and enriched in practice, so this document will be continuously updated.
I set the F media keys as function keys, so low-frequency media key operations require Fn, but other high-frequency operations become simpler.

Mac Keyboard Symbols

⌘ ——> Command
⇧ ——> Shift
⌥ ——> Option (or Alt)
⌃ ——> Control (or Ctrl)
⇪ ——> Caps Lock
␣ ——> Space

Official documentation: Click here

System-Level

Operation	Shortcut
Switch APP	⌘ TAB
Switch Input Method	⌃ Space
Switch between windows in the app	⌘ `
Full-Screen App	⌘ ⌃ F
Screen Capture	⌘ ⇧ 5
Stop Screen Recording	⌘ ⌃ Esc
Screenshot	⌘ ⇧ 3
Region Screenshot	⌃ ⌘ A
Invoke Alfred `Custom`	double ⌘
Enter `Moom` window adjustment mode	⇧ ⌘ M
Upload image to image bed `Custom`	⌥ ⌘ U
Open ChatGPT App `Custom`	⌥ ⌘ G
Open Calendar `Custom`	⌥ ⌘ X
Show or hide Youdao Dictionary window `Custom`	⌥ ⌘ E
Open Things `Custom`	⌥ ⌘ H
Open Emoji Popup	⌃ ⌘ Space
Open ChatGPT App `Custom`	⌥ ⌘ G

Finder

Operation	Shortcut
Hide and show hidden files	⌘ ⇧ .
Copy file path	⌘ ⌥ C
Get file information	⌘ I

Chrome

Official documentation: Click here

Operation	Shortcut
New Tab	⌘ T
Close Tab	⌘ W
Switch to Left Tab	⌥ ⌘ ⬅️
Switch to Right Tab	⌥ ⌘ ➡️
Jump to specific tab	⌘ 1 to ⌘ 8
Jump to Address Bar	⌘ L
History	⌘ Y
Downloads	⌥ ⌘ L
Open Developer Tools	⌘ Option I
Reload the current page (Ignore cached content)	⌘ ⇧ R
View page source (unmodifiable)	⌘ Option U
Open a new window in Incognito mode	⌘ Shift N
Open Developer Tools, select element	⌘ ⇧ C

Developer Tools

Official documentation: Click here

Operation	Shortcut
Open Command Menu	⌘ ⇧ P
Pause/Resume script execution	F8
Step over next function call	F10
Step into next function call	F11
Step out of current function	⇧ F11
Toggle breakpoint	⌘ B

Also recommend installing Vimium, to use Vim-like keyboard shortcuts.

Intellij IDEA

Official documentation: Click here

Common Operations

Operation	Shortcut
Hide/Show Panels	⌘ ⇧ F12
Hide All	⌘ ⇧ H
Show/Hide All Panels	⌘ 1 (Project), ⌘ 2 (Favorites), ⌘ 3 (Find), ⌘ 4 (Run), ⌘ 5 (Debug), ⌘ 6 (Problem), ⌘ 7 (Structure), ⌘ 8 (VCS), ⌘ 9 (TODO), ⌘ 0 (Terminal)
Jump to Navigation Bar	⌘ ⌥ Home

Editing

Operation	Shortcut
Show Intention Actions	⌥ Enter
Complete Code	⌃ Space
Smart Code Completion	⌃ ⌥ Space
Type Matching Completion	⌘ ⇧ Space
Reformat Code	⌘ ⌥ L
Find in File	⌘ F
Replace in File	⌘ R
Find in Path	⌘ ⇧ F
Replace in Path	⌘ ⇧ R
Create Scratch File	⌘ ⇧ N
Open Settings	⌘ ,
Commit to VCS	⌘ K
Rename File	⇧ F6
Find Action	⌘ ⇧ A
Update from VCS	⌘ T
VCS Popup	⌃ V
Git-Revert	⌥ ⌘ Z
Insert Custom Live Template	⌘ J
Run/Debug	⌃ R / D
Debug to next step/Into	F8 / F7
Import Class, Toggle if statement	⌥ Enter
Increase/Decrease Font Size in Editor `Custom`	⌘ ⇧ = / ⌘ ⇧ - / ⌘ ⇧ 0
Open Recent Projects `Custom`	⌘ ⇧ P
Extend Selection	⌥ ↑
Surround with	⌥ ⌘ T
Clipboard History	⇧ ⌘ V
Toggle Case	⇧ ⌘ U
Highlight Usages in File	⇧ ⌘ F7
Move to next highlighted element usage	⌃ ⌥ ↓
Move to previous highlighted element usage	⌃ ⌥ ↑
Column Selection Mode	⌘ ⇧ 8

Modifications

Operation	Shortcut
Move	F6
Inline Variable	⌥ ⌘ N

View

Operation	Shortcut
Quick Definition	⌘ Y

Tool Windows

Operation	Shortcut
Terminal	⌥ F12
Build Project	⌘ F9

Debugging

Operation	Shortcut
Step over next function call	F8
Step into next function call	F7
Select function to step into	⇧ F7
Step out of current function	⇧ F8
View all breakpoints	⌘ ⇧ F8

Others

Operation	Shortcut
Show in Finder	⌘ ⇧ J
Scroll to bottom `Custom`	⌃⇧⬇️
Scroll to top `Custom`	⌃⇧⬆️

DataGrip

Official documentation: Click here

Operation	Shortcut
View table structure	⌘ F12
Retrieve table data	⌘ F
Search everywhere	double ⇧
Recent files	⌘ E
Recent locations	⌘ ⇧ E
Open Console	⌘ ⇧ F10

Editing

Operation	Shortcut
Create (table, field, record, etc.)	⌘ N
Submit changes	⌘ ↩
Maximize editor	⇧ ↩
Enter in cell (same as above)	⇧ ↩
Go to line	⌘ L
Compare cell content	⌘ ⇧ D

Others

Operation	Shortcut
Preview file `supports search`	⌥ ␣

iTerm2

Operation	Shortcut
Split pane vertically	⌘ D
Split pane horizontally	⌘ ⇧ D
Previous pane	⌘ [
Next pane	⌘ ]
Enter/Exit full screen	⌘ Enter
Search command history	⌃ R
New tab	⌘ T
Increase font size	⌘ +
Decrease font size	⌘ -
Reset font size	⌘ 0
Toggle terminal opacity `set opacity first`	⌘ U

Things

Official documentation: Click here

WeChat

Operation	Shortcut
Search	⌘ F

Dash

Operation	Shortcut
Open current web page in browser	⌘ ⇧ B

1Password

Official documentation: Click here

Operation	Shortcut
Show Password	⌥
Search	⌘ F
Copy Password	⇧ ⌘ C
Toggle safe field visibility	⌘ R

Postman

Operation	Shortcut
Send Request	⌘ ⏎
Duplicate Request	⌘ D

Conclusion

Muscle Memory - the human muscles have a memory effect. After repeating the same action multiple times, the muscles will form a conditioned reflex. The speed at which the human body’s muscles acquire memory is very slow, but once acquired, the speed of forgetting is also very slow. So, practice repeatedly, remember repeatedly, and benefit for life.

Setting Up Mock Server with Postman

Sun, 29 Jul 2018 17:11:53 +0800

The term “mock” means to imitate. During frontend development, to avoid dependency on backend progress, we can set up a mock server based on established API specifications, allowing independent development. Once backend development is complete, we only need to change the request address from the mock server address to the backend service address.

Postman is a powerful API tool that not only allows API debugging but also supports creating mock services. Recently, while working on frontend development, I used Postman to set up mock services and wanted to document the process here.

Postman download address - Click here

Creating Mock Server

Fill in the response body with the return results (modification is supported after successful creation)

Click close, then click to send a single request, and we’ll see the returned result set. After successfully creating the mock service, it also provides the complete request address. Hover over the address bar ${{url}} to view it.

Adding Requests

To add requests, click the plus sign to add, then save to the mock collection we just created. Adding return results follows similar operations as the example below for modifying request results.

Modifying Request Result Example

Sometimes you may want to modify the set return results. Click on the example, click on the default example, make your modifications, and save.

Recommended Online Mock Services

Besides setting up mocks with the Postman client, there are also online mock services. Recently I’ve been using easy-mock and find it quite good. I’m sharing it here, and if you know of other good mock services, feel free to leave comments to recommend them to me.

Both local and online mock services have their advantages and disadvantages. Choose the one that best suits your needs.

Final Thoughts

Setting up mock servers with Postman provides a convenient way to simulate API responses during frontend development, allowing teams to work independently without being blocked by backend development progress. The visual interface makes it easy to create and modify mock responses, and the ability to share mock collections with team members enhances collaboration. Whether you choose Postman’s built-in mock server or external services like easy-mock, having a reliable mocking strategy is essential for modern web development workflows.

Downgrade iOS from Beta to Stable

Sun, 17 Jun 2018 16:15:30 +0800

WWDC is in June and new iOS is coming. I know I’ll want to upgrade to try it. But new systems often bring issues: apps lag or crash. You go from excitement to frustration to regret.

To enjoy new versions while being able to roll back, you need a backup. I updated an old guide for downgrading iOS 12 beta to 11.4 with current iOS/macOS steps, though the process is similar.

Backup

Connect your phone to your computer and open Finder.
Click Back Up.

Downgrade and restore

Downgrading is straightforward:

Connect your phone to your computer and open Finder.
Hold Power + Volume Up for a few seconds to power off.
Quickly press Volume Up, quickly press Volume Down, then long‑press Power for about 10 seconds until you see the connect‑to‑computer icon. Release.
In Finder, click Restore to roll back to the latest stable version.

After about 30 minutes, the phone returned to iOS 11.4. Here is a clean home screen:

Painful lessons

Don’t use a primary device for beta testing.
Before major upgrades, back up on your computer. If you need to downgrade without a backup, you lose data.

Chrome Device Mode Screenshot White Screen Issue

Thu, 28 Sep 2017 22:44:26 +0800

Testing websites or creating mobile webpage screenshots can be done using actual mobile devices, but in certain scenarios, this approach can be inefficient and costly. Chrome browser’s built-in device mode can perfectly simulate various mobile device resolutions, and Chrome also provides screenshot functionality.

Problem

Since Chrome’s provided devices are limited, sometimes we need to add custom devices. However, recently when using custom devices for screenshots, I found that the screenshots came out as blank pages.

The effect is shown below:

After checking the custom device parameters and doing comparison tests, I finally found the cause. It turns out that when adding a custom device, the Device pixel ratio parameter cannot be empty, otherwise screenshots will appear as white screens or blank pages. As shown below, I manually set it to 1:

Close the tab, reopen the webpage, press F12, click device mode, still using the custom device just created, click screenshot, and found it’s OK now.

Explanation

Device pixel ratio

devicePixelRatio is the ratio between physical pixels and device-independent pixels (dips) on a device. On a retina screen iPhone, the screen has 640 physical pixels but still 320 independent pixels, therefore, devicePixelRatio equals 2.

Important Details

After modifying custom device parameters, such as width and height, refreshing the current tab won’t take effect. You must switch the simulated device or close the tab and reopen it.

Mobile Screen Mirroring to Computer Tools

Mon, 26 Jun 2017 11:52:36 +0800

Device Combinations

Android phone + Mac laptop - itools
Android phone + Windows laptop - screen
iPhone + Mac laptop - built-in QuickTime
iPhone + Windows laptop - itools

Download Links

Express.js: Getting Client IP Behind Proxies

Wed, 31 May 2017 23:06:05 +0800

In real projects you may run into corporate networks that sit behind multiple proxies. When I grabbed the IP address on the server, the value sometimes came back empty.

Here’s what happens: once the app trusts a proxy, calling req.ip should give you the real client IP. The proxy, however, is free to modify the X-Forwarded-For header. In my case the proxy rewrote the header and stripped out the client IP, so req.ip returned nothing. We can’t recover the true client address once it’s been removed, but we can still capture the proxy’s IP. I wrapped a helper to do exactly that:

/**
 * Get the requester IP address.
 * req.ips looks like ["client", "proxy1", "proxy2"].
 * Prefer the real client IP, or fall back to the proxy closest to the client.
 */
util.getClientIP = function (req) {
 let ip = req.ip;
 if (!ip) {
 for (let item in req.ips) {
 if (item) {
 ip = item;
 break;
 }
 }
 logger.info('req.ips');
 logger.info(JSON.stringify(req.ips));
 }
 return ip;
};

This fills the gap when req.ip alone returns empty.

You could disable proxy trust, but then you would only ever see the direct client IP and never any proxy hops. Whether you enable trust depends on your deployment environment.

`app.enabled('trust proxy')`

When trust proxy is enabled, Express reads the IP addresses attached by the upstream proxies.

`req.ip`

Use req.ip to fetch the requestor’s IP. When trust proxy is enabled, Express pulls the leftmost value from the X-Forwarded-For header.

req.ip
// => "127.0.0.1"

`req.ips`

With trust proxy enabled, req.ips becomes an array of IP addresses, e.g. ["client", "proxy1", "proxy2"].

Custom Rules for ShadowSocks

Fri, 07 Oct 2016 22:53:52 +0800

Click the ShadowSocks menu → Edit User Rules. Use the format below:

! Put user rules line by line in this file.
! See https://adblockplus.org/en/filter-cheatsheet
||amazonaws.com
||atom.io

Save and you’re done.

Rule syntax overview

Wildcards are supported. E.g. *.example.com/* can be written as .example.com/
Regular expressions start and end with \. Example: \[\w]+:\/\/example.com\
Exception rules start with @@. Example: @@*.example.com/* bypasses the proxy.
| anchors the beginning or end. Example: |http://example.com or example.com|
||example.com matches http/https/ftp etc. (prefix match).
Comments start with !.
^ denotes a separator (any char except letters, digits, _ - . %).

BandwagonHost Overview BandwagonHost (IT7 Networks, USA) offers budget OVZ VPS plans. Reliable and inexpensive—good value for money. https://bandwagonhost.com/