DEV Community: Ben Perry

Rails Generators

Ben Perry — Fri, 28 Jan 2022 18:12:59 +0000

We are finishing up our Rails curriculum at Flatiron School this week and I wanted to make a post about different generators Rails offers us. Generator commands take simple tasks like creating boilerplate code for your backend project and produce multiple template files almost immediately. I'd like to go over the differences of a few that I've used on every project.

To start, you can see a list of available generators with the simple command. Note: you can shorten these commands by typing rails g instead of rails generate.

rails generate

Here are a few that I have been using the most.

Create a Migration file

rails generate migration Table_name column_1 column_2:boolean column_3:integer

With this command you can name your table and optionally input all your column names with data types and get that out of the way with 1 simple terminal command! Any column name not given a data type will default to string.

Create a Model and Migration file

rails generate model Table_name column_1 column_2:boolean column_3:integer

This command will create both a migration and a model file.

Create a Controller file

rails generate controller Controller_name

This command will create a controller file for your model.

Create a Resource file

rails generate model Table_name column_1 column_2:boolean column_3:integer

This is a great generator that does a lot of work for you with one simple command. Thanks Rails! This produces a migration, a model, a controller, a resources method for all of the restful routing for your model, views for the model, a serializer, and some test files. Wow all that with one simple command.

Remove the files

rails d resource Table_name

If you made a typo or a table that you don't want anymore you can easily remove all the files created with your generator with this command to make sure everything is cleaned up nicely.

A short list of some helpful VS Code keyboard short cuts.

Ben Perry — Mon, 10 Jan 2022 22:38:31 +0000

I decided to write a quick post about helpful Visual Studio Code keyboard shortcuts. I learned some of these shortly after starting my journey into programming. Some of them I learned while doing some research for this blog post, which was my hope to motivate myself to learn more shortcuts. It's great how a little key binding can really boost your productivity and fun while coding. Many of these will be familiar, but they are techniques I wish I had known on day one!

Show Command Palette

Mac: Shift + ⌘ + P or F1
Windows: Ctrl + Shift + P or F1

This command provides quick access to the Command Palette. Here you will have a list of all the default commands available and also for any extensions you have added. Try it out and stop reading here unless you want to see my favorites!

Toggle line comment

Mac: ⌘ + /
Windows: Ctrl + /

One of the first commands I learned that will automatically comment out (or uncomment) lines of code based on which file type you are editing. Select all lines you want comments toggled. It will also comment the line the cursor is on without selection.

Add selection to next Find match

Mac: ⌘ + D
Windows: Ctrl + D

I find myself using this one a lot! Select a feature that you want to find duplicates of. Each time the command is entered it will continue to add selection and cursor to the next match. Very useful for editing repeating code like variables all at once!

Select all occurrences of current selection

Mac: ⌘ + shift + L
Windows: Ctrl + Shift + L

Similar to above except it selects all matching occurrences all at once instead of one by one.

Toggle Sidebar visibility

Mac: ⌘ + B
Windows: Ctrl + B

Quick command if you want to hide your sidebar display and have a larger view of your editing area.

Zen Mode

Mac: ⌘ + K then Z
Windows: Ctrl + K then Z

Remove distractions and only display your code in full screen. hitting esc + esc exits.

Quick Open, Go to File…

Mac: ⌘ + P
Windows: Ctrl + P

Instead of searching through your file explorer this command opens up a search bar to quickly find the file your want to navigate to without having to use your mouse.

Navigate editor group history

macOS: control + shift + tab
Windows: ctrl + shift + tab

Quickly navigate through files that you have tabs open for.

Access Keyboard Shortcuts

Mac: ⌘K ⌘S
Windows: Ctrl + K then Ctrl + S

Here you can see and search all the keyboard shortcuts, and also change or add new bindings.

Wrap with Abbreviation

Unbound by default

This one is not bound by default but it seems like it could come in handy! In keyboard short cuts search Emmet :Wrap with Abbreviation. I bound it to ⌥ + w. This will select the code block your cursor is on and you can wrap an HTML tag around the block, for example. Pretty neat!

Format File with Prettier extension

Mac: option + shift + F
Windows: Shift + Alt + F

I find using the Prettier extension very useful for formatting JavaScript and making it easier to read (pretty, if you will). As a beginner its nice to focus on writing code that works without having to worry as much about formatting.

Add additional cursor

Mac: option + mouse click
Windows: Alt + mouse click

Adds as many additional cursors as you like to edit multiple lines at once!

PDFs for VSCode keyboard shortcuts

This was just a short list of keyboard shortcuts that I have found handy. Here's are some links to some easy to read documents with more. Try some out, you might find a new favorite!

MacOS

Windows

How to Publish a React App on GitHub

Ben Perry — Fri, 10 Dec 2021 04:40:24 +0000

Finishing up my second project at Flatiron School I wanted to host my app on GitHub, like I did my first project. That way I can share my projects with people that aren't developers... like my Mom. I quickly found out that deploying a React application (using create-react-app) on GitHub isn't as simple as a vanilla javascript repo. I was quite confused when I went to my link and all I could get to show was the README file. In this post I wanted to describe the process I took to get my link to actually show my app.

The first thing I did was add a few lines to the package.json file. The homepage URL {with your own info} is in the top of the file and the next two are in "scripts"

"homepage": "https://{github username}.github.io/{your project name}"

"scripts": {
    "predeploy": "npm run build",
    "deploy": "gh-pages -d build",

Next run the following command in your terminal.

npm run build

This will create a new "Build" folder in your projects directory.

Followed by these commands:

npm install --save gh-pages
npm run deploy

I had to create a new branch called "gh-pages" and push my work to this branch.

In your repository on github, navigate to settings>Pages.

Here you will select your source to be:

Branch:gh-pages in the /root directory.

Save this and try your homepage link!

Working Collaboratively With Git

Ben Perry — Fri, 19 Nov 2021 19:58:11 +0000

During my 1st weeks in Flatiron School I began learning about Git for the first time, ever! However, the majority of all the labs and assignments involved working alone. I found myself doing the same simple git commands to fork and clone a GitHub repository, and then push my changes when the assignment was complete. At the beginning of my 3rd week we had our first group project and realized that neither of us were very familiar with working on building a web app together without conflicting changes. This blogpost is written for beginner programmers that want to work collaboratively on a project! It assumes you already have git installed and know the basics of working solo.

Add collaborators to your repository

Create a repository on GitHub and navigate to Settings/Manage access. Invite people you will be working on the project with.

Create a new branch name

In the terminal, navigate to your projects folder. The following commands will be entered into the terminal.

git branch new-branch-name

Switch to your new branch to being work

git checkout new-branch-name

Don't forget to make regular commits!

Make regular commits to your branch to back up your work.

git add . git commit -m "describe changes" git push origin new-branch-name

At any point you can make sure you're in the desired branch with

git status

Merge the branches when ready

When you have completed the work on your branch, merge it into the main branch and push it to the remote repository.

git checkout main git merge new-branch-name git push origin main

Once each person has done this, the main branch should be up to date with your project!