At first glance, a tiny keyboard with no number row, function keys, or arrow keys might seem impractical for someone who works as a software engineer. But with the right layout and muscle memory, I’d argue it becomes an even more efficient way of using your keyboard, since you won’t need to move your hand too much to reach keys that are usually far away from the home row. Let’s dig into the keyboard I use and learn more about it.

#What keyboard is that?!

The keyboard I use is a PlanckEZ from ZSA, sadly it has been discontinued by ZSA in favor of The Voyager, but you can still buy a Planck keyboard from other sources such as Drop.

PlanckEz

Not only is this a “40% keyboard” (as in, roughly 40% of the size of a regular, full-size keyboard), it is also an Ortholinear keyboard. What does that mean? It means that the keys are arranged in a grid, as opposed to staggered rows.

If that seems odd, look at the numpad of your regular keyboard. You already know and have been using this kind of key arrangement without even thinking about it, even if only to type numbers:

Keychron Q6 Max

Hopefully your fingers are not staggered, so why should your keyboard be?

(if you wanna know why regular keyboards have a staggered layout, typewriters are the ones to blame)

#First things first: Colemak

Because downsizing to a 40% keyboard wouldn’t be enough of a challenge, I also decided to switch to a new keyboard layout when I got the Planck, and I decided to try Colemak, since there’s an easy to use website to learn it. Also, I’m using a variation of the layout called Colemak Mod-DH, sometimes referred to as “Colemak-DHm”, you can read more about it here.

I chose to learn a new keyboard layout because I was suffering from strong wrist pain after a full day of work typing with my regular QWERTY keyboard (an Anne Pro 2 at the time), and after switching to Colemak I no longer experience pain after hours typing at a computer.

So, how does this Colemak-DHm layout look like? This is how my base layer looks like:

Notice that for this layout I have swapped the / character on the bottom right corner for ? (and moved the regular / character to the lower layer that we’ll see soon) - I did that because I use the question mark more often than the forward slash. I did the same with the : and ; characters.

#But there are so many keys missing!

Not really! They’re just in a different layer. Think about how you type capital letters on your keyboard: you hold down the shift key and then all the keys you see will output the capitalized versions of that letter, just as the number keys above the letters will output symbols such as ! @ # # $ %.

And by the way, if you hold down alt and type on your keyboard, you’ll notice that it outputs more symbols that you might not have known before, and if you hold alt+shift you might have access to even more symbols! You already use layers on your keyboard!

And since this is a fully programmable keyboard, that means I can decide exactly which keys activate which layer when pressed. Let’s take a closer look at what my layers looks like.

#Layers, layers, layers…

We already saw the base layer above, so what’s next?

The most common layers on Planck keyboards are the lower and raise layers. To activate these layers, I hold down the lower or raise key with either of my thumbs. These keys are located to the left and to the right of the spacebar.

#The Lower layer

On the Lower layer, I have all the F keys grouped on the left side of the keyboard for easy access with a single hand, and on the right hand side I have symbols laid out in a way that resembles how a numpad would be laid out - the numpad itself is available on the same position on the WASD layer, which we’ll see later down this article!

The Esc key is also on this layer, on the top left corner, though I mostly use it on the same position but from the WASD layer.

Notice that this layer also holds the ; and / characters that I moved away from the base layer.

#The Raise layer

By holding down the raise key with my right thumb, I get access to my Raise layer:

All the programming-related symbols are easily available and only 1 key away from the resting hand position in the home row.

This layer also has the media controls on the bottom right corner to play/pause and decrease or increase volume, as well as some macros on other corners, here’s what they do:

• ~/: inserts the string ~/.
• SinglQuote: inserts the string ''
• DoublQuote: inserts the string "" These macros are handy for me since I set the operating system to use the US-International keyboard layout, and having these macros help me to avoid additional key presses for inserting each of these symbols, due to how the US-International layout works.

Additionally, I have added key combos on the home row to easily navigate through text, with key combos for moving forward/backwards by words, go to the end or start of the line, and other per-word or per-line operations. Watch out, it might seem a bit intimidating at first:

These per-word and per-line combos are mapped for working with MacOS, but I also have a WinRaise layer that does exactly the same thing but with these combinations adjusted to work on Windows.

You can inspect them closely by running my Layout Tour from ZSA’s configurator website - Just click on the “Play layout tour” button when the page loads.

#IntelliJ IDEA layer

When holding down the backtick key (top left on the base layer), I get access to a layer entirely dedicated to triggering actions mapped in IntelliJ IDEA, this makes my workflow so nice and smooth.

If you use IntelliJ IDEA on a daily basis, you should definitely get acquainted with the existing keyboard shortcuts, they help a lot when running common tasks. In addition to that, I have also configured some other key bindings in IntelliJ that work together with this layer on my Planck keyboard for a great experience when working in the IDE.

This layer is way easier to understand and follow by playing the layout tour.

Nevertheless, here’s what each macro does in this layer, from top left to bottom right:

• OpenFile-: Move to the open file to the left of the current file.
• OpenFile+: Move to the open file to the right of the current file.
• Signature: Refactor: change signature.
• Rename: Refactor: rename.
• Annotate: Open Annotate/Git blame panel.
• Structure: Show/Hide file structure.
• CamelMovL: Move cursor to the previous camelCase hump.
• CamelSeL: Select from cursor to the previous camelCase hump.
• CamelSelR: Select from cursor to the next camelCase hump.
• CamelMovR: Move cursor to the next camelCase hump.
• {Surround}: Opens the “Surround with…” dialog.
• Find Usage: Find usages.
• 🔎 Members: Show class members.
• Move Back: Navigate to the previous cursor position.
• Move Forw: Navigate to the next cursor position.
• Sidepanel: Open/close the sidepanel with the project tree.
• Select ⬆️: Select from cursor to the top of the file.
• Close 👈🏼: Close open files to the left of the current file.
• Close 👉🏼: Close open files to the right of the current file.
• Column Sel: Toggle column selection on/off.
• DebugExp: Opens “Evaluate expression” dialg when debugging.
• Split V: Split current file vertically.
• Split H: Split current file horizontally.
• prev split: Move focus to the previous split pane.
• next split: Move focus to the next split pane.
• Select ⬇️: Select from cursor to the end of the file.
• Move ⬆️: Move cursor to the top of the file.
• x-Variable: Extract variable.
• x-Method: Extract method.
• Move ⬇️: Move cursor to the end of the file.
• Opt+Shift+⬇️: move selection down one line.
• Opt+Shift+⬆️: move selection up one line.

In order for all of these shortcuts to work, you’ll need to setup these keyboard shortcuts that don’t exist by default in IntelliJ IDEA:

And this is how moving the cursor / selecting in camelHumps mode looks like:

#No more pinky stretching!

Usually, on regular-sized keyboards, we use the pinky on the right hand to hit both backspace and enter keys. To make it more comfortable, I have set up the lower and raise keys to act as the backspace and enter keys when tapped. This way I can comfortably hit backspace and enter with my thumbs, without needing to move my hands away from the home row. And don’t worry, these keys will still activate the lower / raise layers when held down.

backspace and enter when tapping the lower and raise keys

The configurator tool allows for setting different actions for each key on 4 different states: when tapped, when held, when double-tapped or when tapped and held.

#Numbers and arrow keys

Most people are already used to typing numbers in a numpad from a full-size keyboard. Therefore having a layer that lays out a numpad right under your right hand feels very natural.

On the same layer, I have the arrow keys where the WASD keys would normally be in a QWERTY layout. (now that I think of it, it’s a bit ironic that I call the layout “WASD” but do not actually have the WASD letter keys mapped in this layout… 😅)

I activate this layer by holding down the tab key with my left pinky, this allows me to use the arrow keys with my left hand, while also having the numpad under my right hand. This how it looks like:

Notice that around the arrow keys I also have some other navigation keys mapped, such as page up, page down, home and end.

The arrow keys can also be easily accessed on the base layer by tapping the 4 keys on the bottom right corner:

Isn’t it hard to remember where all the keys are!?

Personally, I think that if you map the symbols into an arrangement that makes sense for you, it should never be an issue as you’ll grow used to it and after some time you build the muscle memory for it.

#Mouse movement!

Wait, what? YES.

While holding down the space key, the Mouse layer becomes active and I can move the mouse cursor and click using the keyboard:

It might be a very niche feature, but I find it to be very useful when using the keyboard during a train ride.

#Browser tab navigation

To activate this layer, I tap and hold the shift key:

This layer is used to quickly navigate to the open tabs in the browser by using the keyboard shortcuts to move to an open tab at a specific position with ⌘+1, ⌘+2…⌘+8 with the keyboard.

This layer also has shortcuts for zooming in and out in webpages, and to move to the previous or next open tab.

I also have a second browser tab layer with the same shortcuts but using the shortcuts with the ctrl key instead of the ⌘ key, because I use these shortcuts on both Windows and MacOS.

#Gaming 🎮

I have a dedicated layout for gaming, with the WASD keys placed where a standard QWERTY keyboard would have, as well as some keys that are commonly used for gaming around it.

Also, when holding down the lower key in this layer, I get access to a numpad right under the left hand, which makes it super handy for quickly triggering in-game actions with the numbers without having to move my hand away:

I also have a dedicated layout for playing The Sims 4 🙃

#The End (for now…) ⌨️

Those are all the layers that make me absolutely love having the Planck as my daily keyboard. If you browse my layout, you will notice that I also have a layer dedicated to VIM - well, technically for Neovim. I haven’t had the time to really dive into the VIM rabbit hole yet, so I’m keeping it off this list for now. If you’re a Vim user, let me know how you’ve set up your workflow!

#Keycap close-ups!

Here are some close-up shots of my custom keycaps 😊

#What’s your keyboard of choice?

Do you also use a non-conventional keyboard? Share a picture in the comments and tell me what makes it special — I’d love to see your setup! 🤓 ⌨️

A couple of weeks ago, I posted an article explaining how to have your own Large Type app for quick access from your phone’s home screen, even offline. Today, I’ll show you how to create QR code images to make it easier to connect with people on LinkedIn, Instagram, Telegram, or WhatsApp in just a few taps.

If you missed my first post on this, you can check it out here.

#Creating your own QR codes for Large Type Svelte

For this guide, I’ll be using Adobe Photoshop, but feel free to use any alternative that can work with .psd files.

Here’s what we’ll do on this guide:

• generate QR codes for your social networks.
• use the generated QR codes together with the Photoshop template file I’m providing.
• export the image with your QR code so that you can use it with the Large Type app from my previous article .

#Generating the QR codes

For generating the QR codes, we’ll use the website QR Code Monkey, so go ahead and open https://www.qrcode-monkey.com/ on a new tab in your browser.

On the Your URL field, you’ll need to enter the URL for the social network you want to link to. Each social network has it’s own URL pattern, here are the URL patterns for each of them:

• LinkedIn: https://www.linkedin.com/in/your_username?fromQR=1 (replace your_username with the username from your own LinkedIn profile)
• Instagram: https://instagram.com/your_username (replace your_username with the username from your own Instagram profile)
• Telegram: https://t.me/your_username (replace your_username with the username from your own Telegram profile)
• WhatsApp: https://wa.me/your_phone_number (replace your_phone_number with your own WhatsApp phone number). Important: make sure to enter the phone number with country code including the plus sign at the start, e.g.: +4915301006622.

For each social profile, you should create a different QR code using QR Code Monkey. On this example let’s make a QR code that links to my LinkedIn profile (do the same for your own profile).

Add the URL, click on “ADD LOGO IMAGE” and then select a logo image, I’ll pick the LinkedIn one in this case. Then, click on “Create QR Code” to generate the code, and then on “Download PNG” to download the generated QR code. Repeat the process for all social networks you want to have QR codes for.

NOTE: the Badge_Template.psd file I am providing here already have the logo images for LinkedIn, Instagram, Telegram and WhatsApp, but it is still a good idea to pick any logo when creating the QR code to make sure that we have that placeholder space in the middle, as that allow us to choose a different logo image to use on it later.

#Removing the background

Great, we have our QR codes! But to use them properly, first we should remove the white background. For that, head over to https://www.remove.bg/, upload the QR code file generated on the previous step, then click on “Download” to download the QR code without the white background:

Great! Now we’re ready to use the file we just downloaded with Photoshop to create your own “social profile badge” image!

#Creating your own Badge images

The next steps will be shown with Adobe Photoshop, but feel free to use any alternative such as GIMP or Krita.

Open the Badge_Template.psd file with Adobe Photoshop. This is what you should see:

Now, expand the QR-LinkedIn folder, select the qr-linkedin image, and drag the QR code that you generated on the previous step into Photophop’s window:

Now, resize it by dragging the edge of the QR code image while holding alt/option key (to keep it centered) so that it matches the size of the QR code that’s below it, the one from the template.

Now that you’ve resized your QR code image to match the size and position of the old one, select the layer of the old QR code and press delete/backspace to delete the layer:

Done! Now you should have your own badge image with a QR code that points to your own profile. You can check it by pointing your phone’s camera to it to confirm that it will open up your LinkedIn profile.

Now, do the same for the other social networks. You can close the LinkedIn folder and toggle the visibility off and toggle the visibility on for the next social network you want to work on:

Repeat these steps for each of your social profiles.

Before we export the image to be used with Large Type Svelte, let’s also change the avatar image.

For that, expand the Avatar folder in Photoshop, select the current avatar image, drag your desired image into Photoshop’s window and resize it so that it roughly matches the size of the existing avatar (similar to how we did with the QR code).

To make the new image fit the circle shape, right click the layer of your new image and then select “Create Clipping Mask” from the pop-up menu.

After this step it should look something like this:

Great! Now we’re ready to export the images. We’ll repeat this step for each of the social networks we want to have a “badge” for. Let’s export the image for LinkedInd first. Toggle visibility on for the QR-LinkedIn group, and keep it off for the other platforms (QR-Instagram, QR-Telegram and QR-WhatsApp).

When you’re ready to export, go to File > Export > Save For Web (Legacy), change the width to about 600px (we’re doing this so that the exported file isn’t too big), then click “Save”, give the new file a name and confirm:

For the other social networks, just repeat the process and export the images when done for each of them. Each folder on the PSD file has the appropriate logos for the networks (LinkedIn, Instagram, Telegram and WhatsApp), but feel free to change them around as well.

With all this done, you can have your QR codes easily accessible from your phone with Large Type Svelte. All you have to do now is put the images you just exported in the public folder of your own fork of the Large Type Svelte app as explained in my previous article (see section “Creating your own QR codes that point to your social profiles”)

#Thank you 💖

Phew! That was a lot. Now that I think of it, maybe I can find a way to somehow automate this process to make it easier… 🤔

If you think this was helpful, consider supporting me on Ko-fi 💖

Ever struggled to spell out your name or address at a hotel or to a taxi driver? Let me make it easier for you - you’ll

In this article, I’ll show you how to quickly add Large Type to your phone and customize it with your most-used phrases for even more convenience. Ready to make life easier? Let’s dive in!

#What is Large Type

Large Type is a web utility that you can use to display text in your screen with a LARGE FONT so that people can see it easily. I forked the project (originally made by Dan Bader - thanks Dan!) and made few changes to turn it into a Progressive Web App so that you can easily run it directly from your phone’s home screen - even when offline!

Check out how it looks like: https://large-type-svelte.vercel.app

#Features

There are a few links that you can click to easily pre-fill your name and other personal data on your computer or phone’s screen. (we’ll see how to do that in a moment)

The links included in this project are:

• name
• address
• phone
• email placeholder (@gmail.com for example)
• blank (clicking on this link clears the input)
• barcode: generates a barcode from the input text
• show a QR code linking to a LinkedIn profile
• show a QR code linking to a Instagram profile
• show a QR code linking to a Telegram profile
• show a QR code linking to a WhatsApp profile

#Why QR codes for socials?

Sometimes you meet someone at an event or conference and want to connect with them, and having one person scan your QR code is fast and efficient, and if you have the QR code already set up in your phone with Large Type app, you don’t need to fuss around each app to find where the button to show the QR code is, simply show the person the different QR codes from the Large Type app in your phone, and when they point their camera to it, their phone will open the right app to connect with you.

#Ok, but why a Barcode generator? 🤔

Ok, I admit this one comes from a very niche use-case that I had a few times and decided to have an easy way to solve it. If you purchase things online that get delivered through DHL and they try to deliver it when you’re not home, they might put it into a Packstation, and send you a paper with the code to retrieve it. The problem is: they’ll put your package in the Packstation, and send you the code later via regular mail, which can take some days to arrive at your address. However, you can go to DHL’s chatbot and talk with it until it gives you the pickup code right away. Sure, you can type the code manually into the Packstation, but that can be difficult and annoying when the low-quality touch screen on those machines gets damaged (which is the case of the Packstation closest to my address), so that’s the main reason why I included a Barcode generator on the app, to be able to show the barcode from my phone and have the machine scan it instead of struggling to type all the digits on a damaged, low quality touch screen.

#How to add it to your phone’s home screen

To add the app to your phone’s home screen, follow these steps:

• open your phone’s default browser app (that’ll be Safari for iPhone users or Chrome for most android users)

• go to https://large-type-svelte.vercel.app (or the URL of your own instance of the app).

• click on the share icon on Safari if you’re on iOS, and then choose “Add to Home Screen” (these steps will look slightly different on Android devices)

• confirm by clicking on “Add” and it should now be available as an app in your home screen!

That’s it! Now you have the Large Type utility easily available in your phone, and the best part is: it works even when your phone is offline! (you must open the app at least once while online so that it can cache the required files to work offline)

#How does it work?

All text formatting and rendering happen locally on your browser/phone through CSS and JavaScript. Your text is not transmitted to any servers, ever.

Additionally, this project is open-source, which means you can audit the source code yourself to see that your data isn’t sent or stored anywhere else.

#Make it your own

To have the links show your own name and other data instead of having to type it into the app every time, you’ll need to fork the project and add your own data instead of the default values. On this section we’ll go over how to fork the project from github, make changes to have your own data, and deploy it to a free Vercel instance.

#Fork the repository on GitHub and clone it locally

Head over to the project’s GitHub page and fork it: https://github.com/lily-gh/large-type-svelte

Don’t forget to give it a star! 🌟

Click on “Fork” to create a fork of the project

Give it a new name, and click “Create fork” to fork the project.

NOTE: after forking the repository, I suggest that you make it private, since you’ll be adding your personal data into it.

After the forking is complete, clone your new repository locally to make your changes:

#Add your own data

Open the project folder in your favorite code editor (I’m using VS Code) and then open the App.svelte file and make the following changes:

On lines 91 and 94, change the phone and name parameters passed to the updateText function to use your data instead:

<span class="button-row">
    <a
      href=""
      on:click|preventDefault={() => updateText("+49 152 4444 32")}
      >Phone</a
    >
    <a href="" on:click|preventDefault={() => updateText("Lily Oliveira")}
      >Name</a
    >
    <a
      href=""
      on:click|preventDefault={() => updateText("@gmail.com", true)}
      >@gmail.com</a
    >
</span>

Feel free to remove the links you don’t need or add new ones that you want to have handy (e.g. an address).

You might also want to change the WELCOME_MSG on line 5 to your most needed text, since this is the one that’ll be shown as you open the app. I’ll change it to my name:

const WELCOME_MSG = "Lily Oliveira";

Feel free to remove the barcode link if it doesn’t make sense for your use case.

NOTE: I suggest that you don’t add your full address and full phone for safety reasons, since the app will be publicly accessible over the internet. For example, if you add the phone, leave out the last 4 digits so that you still need to type them out yourself, or put an incomplete address so that people can’t find your exact location if they find your public Large Type URL. (or remove it altogether if it makes you feel safer)

#Trying it out locally

To run the app locally, run the following commands in your terminal from the project’s root folder:

npm install
npm run dev

This should make the app available in your local machine on the url http://localhost:5173/

If you are happy with your changes, commit them and push them to your repository:

git add .
git commit -m "Adding my own data"
git push origin main

#Creating your own QR codes that point to your social profiles

This step is a bit more complex, so I decided to write a separate article for this, I hope to publish it in a couple of weeks, so stay tuned!

EDIT: the other article is out! Make sure to check it out here. :)

If you are already familiar with image editing tools like Photoshop and already know how to generate the QR codes for your social profiles, feel free to use the included Badge_Template.psd Photoshop file to create your own QR codes. All you need to do next is replace the existing QR code images under the public folder in the repository you forked. Make sure you also edit the file name referenced in the App.svelte file if you changed it to another name.

#Deploying to Vercel

If you don’t already have a Vercel account, go to https://vercel.com/ and then follow their sign-up process of signing up with GitHub:

Complete the phone verification step to finish account creation.

#Connect Vercel to your GitHub account

#Import your repository into Vercel

Import the large-type-svelte repository you recently cloned and made changes to:

#Configure the deployment

Give your project a name, and click the Deploy button to deploy it.

#Done! 🎉

That’s it! Now you have your own instance of Large Type Svelte running with your own changes!

You can click on “Add Domain” to view the existing domains for your app or add more. This will show you what the current URL for your Large Type instance is, which you can use to add it to your phone’s home screen as explained in the “How to add it to your phone’s home screen” section above!

In my case the URL is large-type-svelte-lily.vercel.app, so that’s what I would use to open the app in my phone and add it to my phone’s home screen.

If you make more changes to the code to add/remove links, it should be automatically redeployed after you push the changes to the main branch.

#Thank you

Thanks for reading, and stay tuned for the next article with instructions on generating your own QR codes!

If you think this was helpful, consider supporting me on Ko-fi 💖