Connecting VS Code to an EC2 Instance Using Remote – SSH

Posted on by Rob Larsen

I use VS Code almost exclusively now. It’s the best editor for Angular and TypeScript and that’s where I spend most of my time these days. It’s also a pretty good all-around editor, so even when I’m not working in TypeScript I still use it.

I recently found the need to edit a WordPress theme running on an Amazon EC2 instance. In many cases I would just SSH into the machine and make changes using whatever tools were available on the machine (emacs or vi, etc.) With the amount of work I need to do with this particular theme, I need a much more powerful editing environment, so I looked around for ways to connect directly with VS Code to work with the files directly. I didn’t want to go old school with sFTP or something, so editing in VS Code seemed like the way to go. It’s pretty cool. The setup I’m using is:

Prerequisites

This article assumes that you’ve already got an EC2 instance running and have access to the .pem file you created when you set up your EC2 instance. You also need and OpenSSH compatible SSH client installed on the machine.

Getting Started

The first thing to do is to install the Remote – SSH extension. Go to the extensions panel in VS Code and search for “remote ssh.” There will be a result from Microsoft.

Install it.

From there, with key based authentication, I did something different than the instructions in the extension, which allow for the use of a username and password. I hit F1 to open the command pallete. I then typed “remote” to limit the results to this particular extension. I then chose “Remote SSH:Open Configuration File.”

Clicking on that menu item will open a new menu, which allows you to open a configuration file from one of two pre-configured places on the file system. Choose the first option. In my case it was C:\Users\rob\.ssh\config

VS Code will then open the file with blank values filled in.

Fill out the fields with your host, hostname, username (find it here) and, and this is the tricky part for key based authentication, a new field, IdentifyFile, which should point to your .pem. Save that config file and now you’re ready to connect.

To connect, hit F1 again and search for “Remote SSH.” Choose “Remote SSH:Connect to Host”

From there, select your recently configured host from the list that appears.

It will open a new VS Code window. Accept the one dialog that pops up and you’re ready to go. You can click “open folder” in the file window and start working like you normally would.

And that’s that, you’re ready to edit files on your EC2 instance, in VS Code.

Working From Home For The First Time in 3 Years – Expect Some Writing/Open Source From Me

Posted on by Rob Larsen

Like many of you I’m working from home for a while. As a mental health strategy, I’m going to do some writing and coding in the hour or so I get back each day from not having to commute.

The first post, which will follow today, will be my thoughts on working from home. I worked for home for many years and did really well at it, so I’d like to offer some thoughts about what I thought helped me.

Thankfully I never changed my office set-up so I’ve been able to slide right back into the flow of working from home. I have a better mic and a really good headset, but overall it’s the same setup I used for five years as an independent consultant.

It’s interesting, but I’d actually rather be at the office. I grew to like being downtown and since my commute is usually by bicycle, I didn’t even had the drag of traffic or crummy train service to drag me down. I’m looking forward to returning to the office as soon as we’re able. For now? I’ll be writing to connect with my fellow humans.

New Book- The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS

Posted on by Rob Larsen

I only wrote a chapter in this new book, The HTML and CSS Workshop: A New, Interactive Approach to Learning HTML and CSS, but it is a new book and my name is on it and it’s on Amazon, so it’s still ???? cool. I wrote the chapter on Themes, Colors, and Polish.

Here’s what Packt says:

Cut through the noise and get real results with a step-by-step approach to learning HTML and CSS programming

Key Features

  • An HTML and CSS tutorial with step-by-step exercises and activities
  • Structured to let you progress at your own pace, on your own terms
  • Use your physical print copy to redeem free access to the online interactive edition

Book Description

You already know you want to learn HTML and CSS, and a smarter way to learn HTML and CSS is to learn by doing. The HTML and CSS Workshop focuses on building up your practical skills so that you can build your own static web pages from scratch, or work with existing themes on modern platforms like WordPress and Shopify. It’s the perfect way to get started with web development. You’ll learn from real examples that lead to real results.

Throughout The HTML and CSS Workshop, you’ll take an engaging step-by-step approach to beginning HTML and CSS development. You won’t have to sit through any unnecessary theory. If you’re short on time you can jump into a single exercise each day or spend an entire weekend learning about CSS pre-processors. It’s your choice. Learning on your terms, you’ll build up and reinforce key skills in a way that feels rewarding.

Every physical print copy of The HTML and CSS Workshop unlocks access to the interactive edition. With videos detailing all exercises and activities, you’ll always have a guided solution. You can also benchmark yourself against assessments, track progress, and receive free content updates. You’ll even earn a secure credential that you can share and verify online upon completion. It’s a premium learning experience that’s included with your printed copy. To redeem, follow the instructions located at the start of your HTML CSS book.

Fast-paced and direct, The HTML and CSS Workshop is the ideal companion for a HTML and CSS beginner. You’ll build and iterate on your code like a software developer, learning along the way. This process means that you’ll find that your new skills stick, embedded as best practice. A solid foundation for the years ahead.

What you will learn

  • Get to grips with the key features of HTML5 and CSS3
  • Learn how to integrate animation, media, and custom themes
  • Understand how you can easily customize and maintain CSS
  • Develop your own mobile-first approach while designing websites
  • Learn how to diagnose and resolve common style and structural problems

Who this book is for

Our goal at Packt is to help you be successful, in whatever it is you choose to do. The HTML and CSS Workshop is an ideal HTML and CSS tutorial for the HTML and CSS beginner who is just getting started. Pick up a Workshop today, and let Packt help you develop skills that stick with you for life.

Table of Contents

  1. Introduction to HTML and CSS
  2. Structure and Layout
  3. Text and Typography
  4. Forms
  5. Themes, Colors, and Polish
  6. Responsive Web Design and Media Queries
  7. Media – Audio, Video, and Canvas
  8. Animations
  9. Accessibility
  10. Preprocessors and Tooling
  11. Maintainable CSS
  12. Web Components
  13. The Future of HTML and CSS

HTML5 Boilerplate 7.3.0 Released

Posted on by Rob Larsen

We just released HTML5 Boilerplate 7.3.0.

In addition to the changes below, we also started using Github Actions to publish our npm package. It was pretty easy. I wrote up the process.

HTML5Boilerplate Changelog

  • Updated to Modernizr 3.8 (2b2bb45)
  • Updated to Gulp 4 (#2151)
  • Updated package.json (#2162) and enabled package-lock.json (abe2087),(#2145)
  • Remove redundant rules from .editorconfig (#2157)
  • Small docs maintenance updates (#2155), (#2164), (#2165), (#2167) & (#2168)
  • Bump lowest supported version of node to 8.x (#2142)
  • Remove .jscsrc config and remove gulp-jscs from package.json (#2153)

Thanks again to Christian Oliff for his work on this release. I continue to appreciate his help on tasks and his attention to detail. I’d be a mess without him on the team.

And, as always, thanks to our many contributors. You are the best!

As always, are you interested in helping out? Check out our current issues, submit an idea for a new feature or look at one of the other H5BP projects to see if there’s something else you’re interested in helping with. It’s fun.

Download the latest from github or install it from npm.