惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

C
Check Point Blog
AI
AI
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
U
Unit 42
Vercel News
Vercel News
Stack Overflow Blog
Stack Overflow Blog
P
Proofpoint News Feed
Microsoft Security Blog
Microsoft Security Blog
The GitHub Blog
The GitHub Blog
WordPress大学
WordPress大学
Martin Fowler
Martin Fowler
博客园 - 【当耐特】
B
Blog
Cyber Security Advisories - MS-ISAC
Cyber Security Advisories - MS-ISAC
Apple Machine Learning Research
Apple Machine Learning Research
博客园_首页
F
Full Disclosure
Google DeepMind News
Google DeepMind News
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
H
Help Net Security
Recorded Future
Recorded Future
N
News and Events Feed by Topic
雷峰网
雷峰网
V
Vulnerabilities – Threatpost
Schneier on Security
Schneier on Security
aimingoo的专栏
aimingoo的专栏
S
Schneier on Security
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
O
OpenAI News
Project Zero
Project Zero
罗磊的独立博客
G
GRAHAM CLULEY
腾讯CDC
P
Privacy International News Feed
V
V2EX
Application and Cybersecurity Blog
Application and Cybersecurity Blog
Hugging Face - Blog
Hugging Face - Blog
爱范儿
爱范儿
H
Heimdal Security Blog
L
LINUX DO - 热门话题
Forbes - Security
Forbes - Security
美团技术团队
MongoDB | Blog
MongoDB | Blog
Security Latest
Security Latest
M
MIT News - Artificial intelligence
T
Tor Project blog
Cisco Talos Blog
Cisco Talos Blog
宝玉的分享
宝玉的分享
T
Threat Research - Cisco Blogs
TaoSecurity Blog
TaoSecurity Blog

CSS Wizardry

Front-End’s Missing Metric: The TBT Window Meet Your Users Where They Are with Obs.js Better Browser Caching with No-Vary-Search font-family Doesn’t Fall Back the Way You Think What Is CSS Containment and How Can I Use It? When All You Can Do Is All or Nothing, Do Nothing Obs.js: Context-Aware Web Performance for Everyone Low- and Mid-Tier Mobile for the Real World (2025) The Fastest Site in the Tour de France Making Sense of the Performance Extensibility API Why Do We Have a Cache-Control Request Header? HTML Is Not a Programming Language… Build for the Web, Build on the Web, Build with the Web Licensing Code on CSS Wizardry A Layered Approach to Speculation Rules Designing (and Evolving) a New Web Performance Score Core Web Vitals Colours The Ultimate Contract Templates for Tech Consultants: Protect Your Business and Get Paid Optimising for High Latency Environments Cache Grab: How Much Are You Leaving on the Table? blocking=render: Why would you do that?! Correctly Configure (Pre) Connections The Three Cs: 🤝 Concatenate, 🗜️ Compress, 🗳️ Cache What Is the Maximum max-age? How to Clear Cache and Cookies on a Customer’s Device The Ultimate Low-Quality Image Placeholder Technique Core Web Vitals for Search Engine Optimisation: What Do We Need to Know? The HTTP/1-liness of HTTP/2 In Defence of DOM­Content­Loaded Site-Speed Topography Remapped Why Not document.write()? Speeding Up Async Snippets Critical CSS? Not So Fast! Measure What You Impact, Not What You Influence Optimising Largest Contentful Paint Measuring Web Performance in Mobile Safari Site-Speed Topography Speed Up Google Fonts Real-World Effectiveness of Brotli Performance Budgets, Pragmatically Lazy Pre-Browsing with Prefetch Making Cloud.typography Fast(er) Time to First Byte: What It Is and How to Improve It Self-Host Your Static Assets Tips for Technical Interviews Cache-Control for Civilians Bandwidth or Latency: When to Optimise for Which ITCSS × Skillshare What If? CSS and Network Performance The Three Types of Performance Testing Getting to Know a Legacy Codebase Image Inconsistencies: How and When Browsers Download Images Identifying, Auditing, and Discussing Third Parties My Digital Music Setup Measuring the Hard-to-Measure Finding Dead CSS The Fallacies of Distributed Computing (Applied to Front-End Performance) Ten Years Old Relative Requirements Airplanes and Ashtrays Performance and Resilience: Stress-Testing Third Parties Refactoring Tunnels Little Things I Like to Do with Git Writing Tidy Code Configuring Git and Vim Base64 Encoding & Performance, Part 2: Gathering Data Base64 Encoding & Performance, Part 1: What’s Up with Base64? Code Smells in CSS Revisited Typography for Developers Moving CSS Wizardry onto HTTPS and HTTP/2 Ack for CSS Developers A New Year, a New Focus Choosing the Correct Average CSS Shorthand Syntax Considered an Anti-Pattern CSS Wizardry Newsletter Nesting Your BEM? Improving Perceived Performance with Multiple Background Images Continue Normalising Your CSS Pure CSS Content Filter Pragmatic, Practical, and Progressive Theming with Custom Properties Refactoring CSS: The Three I’s Speaker’s Checklist: Before and After Your Talk Improving Your CSS with Parker The Importance of !important: Forcing Immutability in CSS Mixins Better for Performance Managing Typography on Large Apps White October Events Workshop Partnership BEMIT: Taking the BEM Naming Convention a Step Further Travelling Like You Want to, When You Have To Contextual Styling: UI Components, Nesting, and Implementation Detail Subtleties with Self-Chained Classes Cyclomatic Complexity: Logic in CSS Immutable CSS Can CSS Be Too Modular? More Transparent UI Code with Namespaces When to use @extend; when to use a mixin The Specificity Graph CSS Wizardry Ltd.: Year 1 in review CSS Guidelines 2.0.0
Preparing Vim for Apple’s Touch Bar
Harry Roberts · 2017-01-09 · via CSS Wizardry

Written by on CSS Wizardry.

Table of Contents

Independent writing is brought to you via my wonderful Supporters.

  1. Background
  2. Remap Other Keys
    1. Using CapsLock
  3. Alternatives to <Esc>
    1. What’s the Difference?
  4. Expert Mode

Apple recently announced their updated MacBook line, introducing the Touch Bar that would be replacing the physical function row, including the escape key. If, like me, you’re a Vim user, that might have quite an impact: how best to prepare for it?

Background

Vim is a modal editor. Unlike most text editors⁠—⁠where you’re ready to type as soon as it opens⁠—⁠Vim loads itself in Normal mode, and you have to make a conscious choice to enter Insert mode in order to begin typing. Once you’ve finished typing, you need to get yourself back into Normal mode again. To do this, one of the most common options is to hit Escape, or <Esc>.

The reason <Esc> is used is because Bill Joy, the author of Vim’s predecessor, Vi, used an ADM-3A terminal whose <Esc> key was located where today’s <Tab> is⁠—⁠far more convenient than its top-left location today.

There are actually many other modes besides Insert and Normal, and switching from them back into Normal mode usually requires hitting <Esc> as well. Here you can see Vim users’ predicament… the Escape key is very important to us.

How can we switch between modes without having an Escape key?1

Remap Other Keys

For almost as long as I’ve been using Vim⁠—⁠which is a long time now⁠—⁠I’ve been using jj and jk to leave Insert mode. These mappings are on the Home Row, so always easy to reach, and the letter pairs very rarely (if ever) occur in the English language. If there were words that contained jj and jk next to each other then I would be flung straight into Normal mode any time I tried to write them. (The reason I haven’t mapped kk to Escape is because it does occur within words, e.g. bookkeeper. (Although I think that might be the first time I’ve ever actually written the word bookkeeper. (Interestingly, bookkeeper is the only English word that has three consecutive double letters.)))

This means that any time I’m typing, hitting either jk or jj gets me back into Normal mode and leaves my fingers primed for moving up or down. I always use this instead of <Esc> to get from Insert to Normal.

You can do this too by adding these lines to your .vimrc:

" Make `jj` and `jk` throw you into normal mode
inoremap jj <esc>
inoremap jk <esc>

This creates an insert mode non-recursive map from jj and jk to <Esc>. For more information on mapping either run :help map.txt, or see the online documentation.

This only really helps us out if we’re in Normal mode though: if we’re in Visual mode it’s just going to move our selection up or down, and Command mode will literally write the characters out. What else can we do?

Using CapsLock

A lot of people also like to map CapsLock to <Esc>, however that needs to be done at OS level with a number of different third-party tools. I personally don’t like the idea of having a system-wide keyboard change for the sake of just my text editor, but that’s just me.

Update 2017-05-24

If you’re running macOS Sierra, you can now natively map CapsLock to <Esc>:

Remap CapsLock to Escape in System Preferences View full size/quality (120KB).

Alternatives to <Esc>

Whereas jj and jk are remapped to act like <Esc>, it turns out that there are some native alternatives to <Esc> that we can use across modes.

As I mentioned, hitting jj and jk in Command mode will be interpreted literally, and in Visual mode they will navigate, so in these modes we can use either Ctrl-[ (or <C-[> in Vim-speak) or Ctrl-C (or <C-c> in Vim-speak).

The Vim help even says:

Note: If your <Esc> key is hard to hit on your keyboard, train yourself to use Ctrl-[.

So, whenever you’re in any modes other than Insert, reach for <C-[> or <C-c> instead of <Esc>. <C-c> is probably going to be a little easier to remember, because you probably recognise it as the cancel signal in from your shell, however there are some subtle differences between the two…

What’s the Difference?

<C-[> acts almost universally identically to Esc, so there’s nothing real of note there. What does need a little further mention is <C-c>.

<C-c> is a cancel signal, so its job is just to get you straight out of whatever you’re doing and back into Insert mode as fast as possible. This means that <C-c> will not complete any pending abbreviations or send the InsertLeave signal back to Vim (which some of your plugins may depend on).

This doesn’t mean that <C-c> is bad or should be avoided; it’s just the most heavy handed of the two. Your mileage may vary.

Expert Mode

We’ve got alternatives to the <Esc> key now, so we can gradually begin phasing it out of our workflow, but how about we make things a little more difficult for ourselves? We could disable the <Esc> key fully. Let’s take the training wheels off.

To do this, we can just map <Esc> to no operation, or <nop>. There isn’t a remap-in-every-mode command, so we need to drop both of these into our .vimrc which will cover all possibilities:

" Map `Escape` to ‘nothing’ in Normal, Visual, Select, Operator-pending modes
noremap: <esc> <nop>
" Map `Escape` to ‘nothing’ in Insert and Command modes
noremap!: <esc> <nop>

Again, you’ll want to exercise some caution with this: there can be some unexpected side-effects as outlined in this Stack Overflow answer.