DEV Community: Matt Britt

How to create a video recording of your new web app

Matt Britt — Thu, 07 May 2020 14:53:10 +0000

Do you need to create a video recording of your new web app and upload it to YouTube for a Zoom presentation? Hey, me too. Let's walk through this together. We are going to be using QuickTime Player to take a screen recording of our app and then overlay voice narration on iMovie. And here we go...

Before anything else, take a couple practice walk-throughs of your app. Time it out. Be sure you can hit all the features that you want to highlight in a 2-3 minute clip. When you are comfortable with your timing, open the QuickTime Player and select 'New Screen Recording'. Be sure that 'Record Entire Screen' is selected and then click 'Record'. When you are done making magic happen with your app, click the 'Stop' icon at the top menu bar. The clip will appear in your lower right-hand corner. Open it up and trim any unnecessary footage from the beginning or end.

Now launch iMovie and import your clip. (At this point, I received the message 'not enough space in selected destination'. I had to move the iMovie app into the trash and redownload it from the app store.) Once imported, click the 'Record Voiceover' microphone icon and lay down your silky track.

All that's left is to hit 'Share' and send it off to YouTube (now would be a good time to create a YouTube account if you haven't already). Once uploading is complete it should be in 'your videos' and you can share with the world. Well done.

Simple Keyboard Shortcuts: VS Code Edition

Matt Britt — Wed, 06 May 2020 16:00:19 +0000

So you've mastered the keyboard shortcuts on your Mac and are churning out code like a cyborg now, eh? Good for you. Let's up your game even more. Here are some VS Code specific shortcuts for Mac that I have found useful:

Control-Backtick (`): Open your terminal/jump to command line.
Command-W: Close current tab.
Command-P: Quick open/search files by name.
Command-O: Open file.
Command-N: New window.
Control-Tab (or Control-Shift-Tab): Toggle between files.
Control-R: Search/open recent files.
Command-Up/Down: Go to beginning/end of file.
Fn-Left/Right: Go to beginning/end of line.
Command-L: Select current line.
Option-Up/Down: Move entire line up/down.
Option-Z: Toggle word wrap.
Option-Shift-F: Auto-format code.
Command-Control-F: Toggle full screen.
Option-click: Create multiple cursors.
Command-K then Command-T: Select color themes.
Command-K then Command-S: Open keyboard shortcut list.

Also, be sure to search the different color schemes and install one that you like. You're going to be spending a lot of time in VS Code, so get comfortable and enjoy yourself!

Simple Mac Keyboard Shortcuts

Matt Britt — Thu, 02 Apr 2020 02:19:37 +0000

As you have probably heard at some point in your coding journey (thanks Marc), the faster you can make mistakes, the faster you can learn from those mistakes. To that end, I have been trying to use my mouse as little as possible lately and instead have been relying on keyboard shortcuts. It was a struggle at first to break from old habits, but the new muscle memory is finally starting to take hold. Here are some of the shortcuts that I have found most useful.

Command-Tab (or Command-Shift-Tab): Toggle between apps.
Control-Tab (or Control-Shift-Tab): Toggle between tabs in your browser.
Option-Command-J: Open/close the DevTools (in Chrome).
Control-Backtick (`): Jump into your console (while in DevTools or Visual Studion Code).
Command–Left Bracket ([): Go to the previous page/folder.
Command–Right Bracket (]): Go to the next page/folder.
Control-Command-F: Full screen mode (or undo if already full screen).
Command-X: Cut the selected item and copy it to the Clipboard.
Command-C: Copy the selected item to the Clipboard.
Command-V: Paste the contents of the Clipboard into the current document or app.
Command-Z: Undo the previous command. You can then press Shift-Command-Z to Redo, reversing the undo command.
Command-A: Select all.
Command-R: Refresh the page.
Command-F: Open a Find window.
Control-T: Open a new tab.
Command-W: Close the front window or tab.
Command-H: Hide the front app.

And, of course...

Control-Command-Q: Lock your screen. (Seriously, always lock the screen when you step away from your computer.)

These shortcuts make a good set to begin your practice. Learn them, love them, and in no time you'll forget that you paid a lot of money for a good mouse that you never use.

For a much more exhaustive list, visit https://support.apple.com/en-us/HT201236.

Building a Simple HTML Table

Matt Britt — Sun, 08 Mar 2020 04:02:27 +0000

Sometimes you want to present information to your users in a simple column/row structure. HTML tables are an easy way to do this. Let's get started building a simple version for a Rails app.

We begin with opening and closing table tags <table> to define our feature and then add table row tags <tr>.

<table>
  <tr>   
  </tr>
</table>

Next, we add table header tags <th> and input the names that we want for our table columns (table headings will be bold and centered in our columns by default).

<table>
  <tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>
</table>

Great start! We already have our table header designed. Now, let's add a few more table rows <tr>. We'll fill these rows with table data tags <td> and our corresponding data.

<table>
  <tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>
  <tr>
    <td>Daz</td>
    <td>Orange</td>
    <td>3</td>
  </tr>
  <tr>
    <td>Stimpy</td>
    <td>Red & White</td>
    <td>5</td>
  </tr>
  <tr>
    <td>Cheshire Cat</td>
    <td>Purple</td>
    <td>71</td>
  </tr>
</table>

And just like that, we have a simple table in our app that should look something like this:

Great, right? But not very aesthetically pleasing. Luckily, we can spice this table up with just a few simple extras. Let's throw on a table name using <h2> tags and then specify a little styling within our opening <table> tag.

<h2>Famous Cats</h2>
<table style="width:50%" border="1" cellpadding="5">
<tr> 
    <th>Name</th>  
    <th>Color</th>
    <th>Age</th>
  </tr>

And for just a bit more oomph, we can add shading to our table rows by specifying this in our application.css file:

tr:nth-child(even) {
  background-color: #ced3d0;
}

Now we have a table feature that's dressed to impress.

Feel free to experiment with more styling until it's exactly how you want. Boom done.

Writing a Simple RSpec Test

Matt Britt — Fri, 14 Feb 2020 20:37:55 +0000

RSpec is a popular testing framework for Ruby. Here we will write some simple tests for ourselves to help learn the basics.

The first step is to install our gem using

$ gem install rspec

Then, inside of our project directory, we call

$ rspec --init

This initializes two files: the spec_helper and the .rspec file. We will also need to create a spec file in which to build our tests. Today this will be named spec/cat_spec.rb. We are building instances of the class Cat inside of a file we have named lib/cat.rb.

Inside of spec/cat_spec.rb, we need to

require "spec_helper"

which will load the configuration for the specification. We will also

require "cat"

as this is the class for which we will be writing examples. We can define this class inside of our lib/cat.rb file.

class Cat
end

We are then ready to describe how we want our cats to behave. We start by writing a "describe" block in spec/cat_spec.rb. Inside of this block we will write our examples to test.

require "spec_helper"
require "cat"


describe Cat do
    #examples to test    
end

Here our description will test for the name of our cat instance.

describe Cat do
    it "is named Daz" do
        cat = Cat.new
        expect(cat.name).to eq("Daz")
    end
end

We can run our test by calling $ rspec.
Doing so now gives us a failing test.


  1) Cat is named Daz
     Failure/Error: expect(cat.name).to eq("Daz")

     NoMethodError:
       undefined method `name' for #<Cat:0x00007f948d0e7030>
     # ./spec/cat_spec.rb:8:in `block (2 levels) in <top (required)>'

Finished in 0.0041 seconds (files took 0.12837 seconds to load)
1 example, 1 failure

We can then write code in our lib/cat.rb file to correct the

undefined method `name'

and get our test to pass.

class Cat
    attr_accessor :name
    def initialize
        @name = "Daz"
    end
end

Running $ rspec again should give us a green light on our test.

Now that we have one test passing, let's write another description to test in spec/cat_spec.rb.

describe Cat do
    it "is named Daz" do
        cat = Cat.new
        expect(cat.name).to eq("Daz")
    end
    it "is the color orange" do
        cat = Cat.new
        expect(cat.color).to eq("orange")
    end
end

Running $ rspec now should show that we have 2 examples and are failing 1 of them.

1) Cat is the color orange
     Failure/Error: expect(cat.color).to eq("orange")

     NoMethodError:
       undefined method `color' for #<Cat:0x00007ff2fa9a3248 @name="Daz">
     # ./spec/cat_spec.rb:12:in `block (2 levels) in <top (required)>'

Finished in 0.00502 seconds (files took 0.1164 seconds to load)
2 examples, 1 failure

If we take direction from the test and add code that defines our cat color as orange, we should be able to get a second passing test.

class Cat
    attr_accessor :name, :color
    def initialize
        @name = "Daz"
        @color = "orange"
    end
end

Finished in 0.00474 seconds (files took 0.12366 seconds to load)
2 examples, 0 failures

And that's it. We can continue to practice with as many tests as we would like.