Forem: Liam Stojanovic

The Easier Way to Develop Web Applications

Liam Stojanovic — Tue, 04 Jan 2022 16:46:48 +0000

TL;DR

It’s common to work with a virtual machine when developing and deploying web applications. Capturing changes made to a VM makes your deployment repeatable and easier to maintain. Pieces enables you to easily save common snippets of information for future reference, like config files or SQL commands while building your project!

Intro

In the age of GitHub pages and Replit, it can be easy to overlook the work that goes into deploying, securing, and maintaining an internet-facing server.

Cloud compute platforms are where developers go when they require a high degree of customizability, scalable resources, and efficient pricing for their web applications. Whether you wish to deploy a personal portfolio site or a SaaS product with 100,000 users, the cloud will help you accomplish that. There are different ways of leveraging cloud resources, virtual machines (VMs) being one of the most common methods.

The challenge with VMs is that many pieces of information can get lost when you make changes. Getting into the habit of saving these edits allows you to be more productive; you'll know exactly what you did, and eventually be able to automate your deployments (be it through shell scripts, containers, or configuration management tools).

Pieces can help track changes to configuration files, secrets, commands and more in your projects. Let’s look at a specific scenario!

Scenario

You and your friend are launching a podcast on Koalas. In your research, you've quickly realized that a website will be necessary for the podcast to gain traction.

You begin by googling podcast website hosting, but are displeased by the prices you see. "Fear not!", you proclaim to your friend. "I am a seasoned Linux user who knows enough cloud compute to be dangerous. If we spin up a VM, I could get Wordpress running today!"

Your friend glances at you thoughtfully. "I have faith that you can do that," they begin. "But remember when you lost our database password? It’s really important you keep track of all the changes you make to the web server."

You pause. You're used to moving fast and breaking things, not writing documentation. You experience vivid mental imagery of the file-folder hell you have for shell command snippets; randomly placed text files with no context.

Your friend interrupts to show you something on their laptop. "Here," they say, "I'll send you a link to an app you can use to capture the commands you run, app secrets, and config files. It's called Pieces. All you gotta do is copy and paste things into it."

"Oh!" You respond sarcastically. "Another clipboard app! Just what I need."

"Well, not exactly..."

Web server configuration

I begin my website by spinning up a virtual machine instance on my favorite cloud compute platform. I opt to perform the installation of Wordpress by hand, because vanilla Ubuntu server is free to use. Plus, I gain sick satisfaction from watching progress bars fill in my terminal.

SSH

Saving an SSH key to Pieces

My Ubuntu virtual machine needs a public key for SSH authentication.

I create a new key pair by running the command
ssh-keygen -t rsa -b 4096

I name my new keypair koalaCast.
Followed by...

cat koalaCast.pub

... outputting the public key to the terminal.

I then copy and paste that into Pieces for future reference. Losing this public key would effectively lock me out of my server, so it’s important I keep it on hand!

Neat! We can easily reference this later if we need quick access to the koalaCast public key.

For good measure, I also drop the shell snippet I leverage to connect to the virtual machine into Pieces.

App secrets

Saving a MySQL database password to Pieces
Our MySQL database will act as storage for our Wordpress installation.

Once MySQL is installed, I’ll run the built-in security script. This removes some insecure default settings that ship with MySQL, and allows me to specify the root password.

# mysql_secure_installation

I mash a series of random numbers and letters.

9sBzdRcw4D4Et7Y8US3w65c#

I then save that to Pieces for easy future access!

Configuration files

Saving file changes that aren’t captured in bash history

When using Apache web server, website configuration details are written in virtual host syntax. It is unique to Apache, and important to retain when setting up a web server. The content of this file determines how your website will handle user traffic.

I’ll create my website directory, and assign proper permissions...

# mkdir /var/www/koalacast.io
# chown -R $USER:$USER /var/www/koalacast.io

Then, create a blank .conf file to which I’ll write virtual host instructions.

# vi /etc/apache2/sites-available/koalacast.io.conf

I devise the following configuration while reading the Apache documentation...

<VirtualHost *:80> ServerName koalacast.io ServerAlias www.koalacast.io ServerAdmin webmaster@localhost DocumentRoot /var/www/koalacast.io ErrorLog ${APACHE_LOG_DIR}/error.log CustomLog ${APACHE_LOG_DIR}/access.log combined </VirtualHost>

...and save to Pieces. If there are connection issues on port 80, I can quickly reference the rules I wrote for that virtual host.

I also drop in a related link to the Apache documentation. This allows me to view that webpage from my virtual host snippet!

SQL commands

Ensure you never lose a SQL command again

The SQL commands I run are not logged to my bash history, but I still want to keep track of what changes I make to my database.

ALTER USER 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '9sBzdRcw4D4Et7Y8US3w65c#'

I use this command to change the root password. Most of the time, this command would be captured in ~/.mysql_history. However, if you log into mysql leveraging sudo...

$ sudo mysql -u root

... it may not be captured in a .mysql_history file. To be safe, I drop that command into Pieces before I run it!

The outcome

The koalacast website has been fully set up, and your Pieces app contains all the file changes and secrets you created during the installation process.

You and your friend hop on a call so they can access the web server and its moving parts.

“Hey, can you send me the public key for the SSH user koalacast?”

“You’ve got the database password, right?”

“Are there any other pieces you think I’ll need?”

Thank you for reading! If you enjoyed this article, check out our app, follow us on Twitter, and give our Medium publication a follow!

Don’t Touch That Mouse! Smart Developers Use Keyboard Shortcuts

Liam Stojanovic — Mon, 13 Dec 2021 19:49:57 +0000

TL;DR

Mouses are slow. Keyboards are fast. If you’re a developer, use keyboard shortcuts to drastically increase your productivity in web browsers, IDEs and code snippet tools like Pieces.

The Case for Keyboard Shortcuts

According to Brainscape…

If your job requires you to be working on a computer throughout each standard 8-hour workday, then using keyboard shortcuts can save you 8 entire workdays every year.

A single keystroke may only shave you “0.4 seconds” but think about the hundreds of times you reach for your mouse daily. We’re talking hours per week, days per month, weeks per year.

More importantly, keyboard shortcuts keep you in your flow and let you work at the speed of thought.

With some practice, you’ll be able to quickly perform key tasks and navigate menus in your browser, IDE and code snippet tools like Pieces without ever touching that dreaded mouse.

The Browser

Let’s start with the good ol’ browser, where you’re probably doing a lot of your development research (and checking crypto prices, flicking through YouTubes and I don’t want to know what else).

Vimium

Vimium — often referred to as the “hacker’s browser” — is a popular Chrome extension (with a port to Firefox) that allows you to navigate the web using just your keyboard! Shortcuts are based on the Vim text editor.

Some power shortcuts in the GIF below include:

Follow a hyperlink in a new tab (F)
Scroll up and down (j, k)
Switch between tabs (J, K)

Code Snippet Tools Like Pieces

Code snippets are an incredibly helpful way to save time by not re-writing the same code or re-searching for solved solutions.

But it’s always been a hassle to save and work with code snippets.

Pieces is a popular new tool that enables you to save code snippets in less than a second from your code editor or any web page in Chrome and Edge.

And as you can guess, keyboard shortcuts are the heart of this beautifully intuitive app.

Saving a Snippet from IntelliJ

Just highlight your snippet and click ⌥ + ⌘ + P (Mac) or Ctrl + Alt + P (Windows).

Saving a Snippet from Chrome

The Pieces Chrome extension makes saving code from the internet a breeze.

Highlight the desired code and hit ⌘ + Shift + P (Mac) or Alt + Shift + P twice (Windows).

Even easier, while this isn’t technically a keyboard shortcut, Pieces pops up a “Save” button when it detects code on a webpage. A single click will save that snippet.

Finding and Re-Using Snippets in Pieces
To find a snippet in Pieces, just hit / and start searching.

What’s even more helpful is that the Pieces Chrome extension automatically adds the source URL to the snippet as a Related Link. This is one of my favorite features and I no longer have endlessly cluttered Stack Overflow bookmarks with no context.

You can view and manage your related links by hitting ⌘ + K (Mac) or Ctrl + K (Windows).

So Many Shortcuts

There are loads of other great keyboard shortcuts throughout Pieces. Hover over almost any action and you’ll see a shortcut option.

Some of my favorites include:

Rename your snippet: ⌘ + R / Ctrl + R
Edit the description: ⌘ + N / Ctrl + N
Reclassify the snippet language: ⌘ + Y / Ctrl + Y
Open the Quick Menu actions: ⌘ + O / Ctrl + O

Code Editors

When it’s time to get down to coding, the mouse is your enemy. Let’s look at some critical shortcuts for two popular editors:

VSCode

VSCode is one of the most popular free code editors, with extensions for all kinds of programming languages and projects.

IntelliJ
IntelliJ comes jammed with built-in shortcuts and has a robust library of plugins to boost your productivity.

Resources

Guake Project

A simple and easy way to use the terminal without leaving your current application.

Guake is triggered by a hotkey that drops down a terminal over your desktop, and retreats when that same hotkey is pressed again.

Only available for Linux machines running Gnome as their desktop environments.

AceJump for IntelliJ

AceJump enables single character search, select and jump inside IntelliJ.

KeyCombiner

Not to get too meta on you, but KeyCombiner is a cool app designed to help practice keyboard shortcuts. Collections are available for many popular apps, including IDEs and web applications.

Wrapping Up

Keyboard shortcuts liberate you from the burden of mouse wiggles and right-clicks. Simple time-saving measures compound into days of your life back! Take the red pill, learn keyboard shortcuts, and relish in your regained time.

Thank you for reading! If you enjoyed this article, check out our app, follow us on Twitter, and give our Medium publication a follow!