DEV Community: Matthew Brophy

Feeling Burnt Out Right Meow? Paws and Take a Mewment for Yourself

Matthew Brophy — Tue, 23 Apr 2019 19:37:48 +0000

As I approach the end of my dev bootcamp journey, I have found it easy to feel burnt out and like I just...need a break. As I searched for inspiration to take a break I saw one of my lazy cats sleeping on my couch. I realized they know how to relax better than anyone I know. I also realized I was relaxing just by looking at them....So without further ado...look at my cats!

Meet Jerry and Sam

Everyone knows freshly cleaned clothes make the best beds
Sam (The cream colored one) is 8 years old and Jerry (The red one) is almost 6 years old. They are both shelter cats and are attached at the hip. It wasn't always like that though. We got Sam 2 years before Jerry and when we first brought Jerry home, Sam would do nothing but hiss and swat at him. But nowadays it is hard to find them apart from one another.

Just two cats huggin' it out

Their favorite passtimes include:

Losing all their toys under the couch
Kicking litter all over our hardwood floors and getting it in our bed
Bird watching
Eating ribbons and broom bristles
Costing way too much money to feed because they both need prescription vet food
Singing the songs of their people EVERY MORNING BETWEEN 4:30 and 5 AM
Being Cute

As you may be able to tell...

They have...

Very rough lives.

They aren't always asleep...

"Pet my belly...So I can bite and scratch you when you do!"

"You got anymore of that (whatever you're eating)???"

But they usually are asleep...

"Rub ma' belleh!"

"Bean Toes!"

"More Bean Toes..."

"I'll never let you go."

"So Majestic..."

"I"M A RAC...I'M A CAT."

Glamour Shots!

"Mew..."

"I'm Really Soft..."

"Sun is Nice."

"My Favorite"

Thanks for enjoying my cats!

Customize & Improve VS Code

Matthew Brophy — Tue, 09 Apr 2019 17:56:06 +0000

As web developers we spend a great amount of time staring at our IDE (Integrated Development Environment. It only makes sense that we should try to make that experience as pleasant and painless as possible. My personal choice of IDE is Microsoft Visual Studio Code. While it is pretty bare-bones out of the box, there is a practically endless amount of customizations and extensions that can be added to create quite the perfect well-polished tool to suit whatever your needs may be along your development Journey. Following are some of my favorite extensions and customizations that help me push through the code.

Extensions

VS Code comes along with a robust, active developer community that lives to make developers lives easier through the creation and maintenance of some amazing extensions. In fact, there are so many available to do just about anything you can think of, that it can be quite overwhelming trying to choose which ones you want to implement into your development environment. My personal advice would be that when you think of something you want to improve, start by installing one extension and seeing if that serves your needs before installing another one with a similar name/function.

Quality of Life Extensions

Simple React Snippets

One of my favorite types of extensions. Whichever language you happen to be using, there are robust code snippet extensions that exist to save you numerous repetitive key strokes. Currently, I am doing a majority of my work in React and below you will find my current favorite snippet package. Note, if you are still in school or are in a bootcamp you may want to hold off on using too many code snippet extensions. While they are extremely helpful, it may be best to solidify understanding of syntax and commit it to memory before utilizing a snippet to do the heavy lifting for you.

Contains a short list of keystroke commands that save you from repetitive work like creating scaffolding for classes or importing components.



Typing "imrc" produces:

import React, { Component } from 'react';

Typing "ccc" produces:

class  extends Component {

  constructor(props) {

    super(props);

    this.state = {  }

  }

  render() { 

    return (  );

  }

}

export default ;

There are tons of snippet extensions for just about every language out there.

Code Spell Checker

Does exactly what it sounds like. A simple spellchecker that responds well to camelCase code.

Babel Javascript

An excellent syntax highlighter for Javascript. It will highlight a portion of code when the syntax is not going to make it past the compiler. Syntax highlighters also exist for most languages out there.

Open HTML in Default Browser

Another extremely accurate named extension. It adds an option that appears when right-clicking on a file in the file-browser pane to simply open that given file in whatever is set as your default browser.

Path Intellisense

Adds intellisense auto-complete to file paths. For instance if you are importing a component from another file in your file tree, it will make suggestions for pathing:

Sensitive Replace

When replacing multiple selections, it will preserve the casing on each item even if they are all differently cased.

Prettier Code Formatter

One of my favorite extensions at the moment. It formats Javascript/TypeScript/CSS on save. It will format your code based on the length of lines, and other attributes to make your code more readable and a lot "Prettier" It will also automatically delete trailing commas, and unnecessary parenthesis and semicolons. It it completely customizable in the event you want it to ignore its formatting rules.

Before Prettier:

After Prettier:

Aesthetic Extensions

If we are going to stare at something the majority of the time we are awake, we might as well make it as pleasant to our eyes as possible. VS Code has thousands of themes (most free, some that require purchase) to make our coding experience just the way we want it. Certain color themes are also much easier on the eyes than the default code or provide specific color scheming that makes it much easier to identify specific components and/or attributes of an App.

Dracula Official & Night Owl

My favorite theme at the moment. I think the colors are fun and it makes it extremely easy to identify different aspects of the code I am working on:
Another one of my favorite themes. Similar colors, really easy on the eyes at night:

Material Icon Theme

Add some flair to your icons:

Finding a Font You Like. My Choice is Fira Code

Fira Code has Ligatures enabled. This just means that it supports symbols taking the place of common comparison operators:

Final Thoughts and one more Customization

In summation, make VS Code your own. Make it so you enjoy using it as much as possible and make it so it is pleasing to your eye. If you find yourself struggling with syntax or repeating the same keystrokes over and over again, go see if there is an extension that can make your life easier.

One last customization, get rid of the annoying "Parameter Hints" that blocks half of your screen as you type

This Pop-up is enabled by default. Sometimes it will block half of your screen and you will no longer be able to see your code. Navigate to your settings.json file and add the following line if you would like to disable this annoying suggestion box:

Happy Coding!

Docker Basics

Matthew Brophy — Tue, 26 Mar 2019 19:54:15 +0000

As a budding software developer I always have my ear to the ground to try and pick up on new technologies or tools that I want to learn. Docker is one of those tools.

What is Docker?

In a way, Docker is like a completely packaged virtual machine. It is a tool to design, deploy, and run applications on any machine with all the parts it needs such as libraries and dependencies. Docker accomplishes this task through its use of "containers" which allow the developer to rest assured that the application will run on any other Linux machine regardless of any customizations that may exist on that machine that differ from the machine used for writing and testing the original code.

Containers

So, what is a container anyway? A container is way of running a command that is isolated from everything else on the system. When the command should only access the resources it should have access to, a container will provide that functionality without giving it access to anything else on the machine. A process running inside of a container is not aware of any other processes going on outside of the container. Containers make it so:

As long as Docker is installed on a machine, the app will run
Containerized apps on a single server don't conflict with one another
If you update an app you don't have to worry about it breaking other contained apps
Docker apps will not break due to OS updates of packages that are not related to Docker

Why Containers?

When Docker was originally pitched it was compared to the containers used in the global shipping industry. Shipping containers are of a standardized size and any company that plans on transporting them knows exactly what to expect when they show up to pick one up. It does not matter what kind of truck or boat you plan to transport it on, if it fits it sits. Docker Containers work the same way. A machine running the app in the Docker Container shouldn't really have to worry about what is inside of the app and the app that is in the container doesn't care what kind of machine it is running on. If it fits, it sits!

Docker Images

In Docker language, an Image refers to a blueprint from which brand-new containers can be started. Images don't change, but you can start a container from an image, perform operations in it, and save another image based on the latest state of the container. When you start a container its like booting up a machine after it was powered down. Instead of starting up a computer or spinning up a new virtual machine, You create a new Container from scratch which looks exactly like the image you chose.

Dockerfiles

Dockerfiles can be thought of like a "Readme" for the images and containers. It is a set of precise instructions which direct the program how to create a new image and set defaults for containers. It should create the same image for anybody running the application at any point in time. The Dockerfile is a basic instruction for how to setup the required environment for running the application except it is in the form of executable code.

Volumes

Volumes are like separate "containers" for persisting data. Containers leave nothing behind by default - Any changes made to the container are lost as soon as it is removed or "shut down". That is where Volumes come in. Volumes are for persisting and sharing data but the container doesn't have to know anything about the host machine when using them. If a container is using a volume and that container is shut down, you can start up another container and point it to the same volume that the other container was using.

So that is it. Those are the most basic of basic components of Docker. I hope this brief write-up has been helpful in understanding the basics of the Docker system and how it may benefit you in your future endeavors.

Code Snippets - A Beginner's Guide

Matthew Brophy — Tue, 12 Mar 2019 15:39:55 +0000

Source: Reddit/r/dundermifflin
One of the first concepts that were driven home by instructors when I started coding bootcamp was the idea that Programmers should "strive to be lazy". We should use every tool in our arsenal to make writing an application as painless and effortless as possible. If there is a way to not repeat ourselves or to create a shortcut to an outcome that would otherwise involve writing numerous lines of repetitive code, we should take it and not look back. Enter code snippets. A programmer's best friend.

So, What is a Code Snippet?

"Code Snippet" is a term used to describe a small portion of re-usable source code, machine code, or text. They allow a programmer to avoid typing repetitive code during the course of routine programming. Most modern text editing programs possess some form of Snippet creation and management (I say most because I do not know of every single editor that exists). While the exact way you manage Code Snippets does vary slightly from editor to editor, the basic concept is the same. For examples I will be using Visual Studio Code.

What Comprises a Code Snippet?

Name - Pretty self explanatory. A name for the snippet. This is not what is used to trigger the code snippet in the editor
Prefix - The actual keystroke that will be used to trigger the Code Snippet in the code editor. Choose a prefix that is easy for you to remember.
Body - The actual code that will be copied into the space when you call your code snippet.
Description - A simple description of what the code snippet contains.

Well, why should I even bother using Code Snippets?

They save us from unnecessary amounts of keystrokes (your wrists will thank you). Remember, we should be as lazy as humanly possible whenever we can.
They make it easier to remember specific formatting for functions. Some functions can be extremely complex or may contain difficult to remember syntax. Instead of having to hunt down typos and syntax errors, let a Code Snippet keep your code consistent.
They are sharable (Don't be stingy with your Snippets). If you are on a team working on a project, a Code Snippet can help ensure that you are all writing certain blocks of code in the same way - making your code more consistent and more readable.

Alright...I'm Sold. How do I Create a Code Snippet

Basic Structure

Lets start with a basic example: We need to write a ton of unique addresses to seed a database for a test environment. (Using Ruby)
Our address scaffolding might look something like:

So...every time we want to create a new address we have to type (and fill in the values!):

Puuuuuke - No thanks. I can feel my wrists getting sore just thinking about it. Lets create a simple Code Snippet to automate the process. Remember, the instructions may vary slightly based on what code editor you are using but the fundamentals of the steps are pretty much the same:

Open up the User Code Snippet interface. In VS Code: Menu -> Code -> Preferences -> User Snippets. (Or Cmd+Shift+P and search for "User Snippets")
Select the language for which you would like to create a Code Snippet (Ruby in this case).
Create the basic scaffolding for a Code Snippet:
Awesome. Now all we have to do is fill in the relevant information for our address:
Save the User Snippet file and go type address (the "prefix" we declared when creating the Code Snippet) in a ruby file to see the fruits of our labor!

(You can see the description we created!)...now press Tab and BAM!:

Note: You may notice that we removed the quotes that we had in the body of the Code Snippet. Fret not! We are going to improve our Snippet right now by replacing those quotes with "cursor positions" that we can tab through and fill in after creating the snippet.

Adding Cursor Positioning and Placeholders

Now that we have a basic structure for the Code Snippet, we can add some cursor positioning so that we can Tab through the snippet and add custom text such as variables, strings, or whatever the code requires.

In VS Code Cursor Positions are created by inserting ${1:"placeholder text"}, ${2:"placeholder text"}, {3:"placeholder text"}, etc. into the Code Snippet where the number inside of each bracket denotes where the cursor will be after pressing Tab that many times. The "placeholder text" is what will display in the Snippet when it is first invoked (use these as a reminder as to what you should type in that place). So using our example:
Note: We only need the escapes ("\") because we want our placeholders to be inside of quotations(" ") and without them we are telling the snippet that a line of the body of our snippet ends when the quote closes.
Now when we call our Code Snippet with address:
Yesssss! Now as we enter information and tab through the Code Snippet we can just jump to the next section that we want to fill-in.

Extras

Multiple lines. You can create multiple lines in your snippet by simply closing the quotation, placing a , at the end, and starting a new set of " " on the next line: will produce: OoooOooOo look, the cursor is also highlighting multiple lines at once..:
Changing multiple cursor points at the same time. You can change more than one cursor point all at once. In the above example, multiple cursor points are declared with ${1:...}. Every one will update at the same time when you begin to input information in the snippet.

So...that's Code Snippets in a nutshell. They can be as simple or as complex as fit your needs. I'll leave you with one of my favorite Code Snippets that I have been using. Remember, when you can't remember a piece of code, "Don't Start Trippin', Get Snippin'!"

Resources for different text editors

VS Code

Atom

Sublime Text

Source: Reddit/r/dundermifflin

The power of stepping away

Matthew Brophy — Tue, 26 Feb 2019 04:15:20 +0000

We've all been there. Whether it is during software development or while moving into a new apartment and trying to squeeze a couch through a tight doorway, we have all encountered problems that are seemingly impossible to solve.

There are many moments during a challenging activity where we would actually benefit from simply stepping away from the problem and allowing ourselves a fresh perspective. Society has generally taught us not to give up. That the only way to solve a difficult problem is to just keep trying until you get it. While there are definitely activities that benefit from repetition, utilizing the old adage "practice makes perfect", depending on the activity, there are varying degrees to which this strategy can actually be effective. At times, the best possible option is to just step away, give yourself a break, and gain a fresh perspective.

A Bit About the Psychology

So, why does it actually help to just stop? The human brain is very mysterious. It is very easy for us (and most mammals for that matter) to become caught up in nothing but achieving our end goal. It is so easy for us to get tunnel-vision. In her article titled "Why 'Stepping Away' Increases Creativity", Dr. Susan Weinschenk very succinctly describes why having tunnel-vision limits our creativity and problem-solving skills. In our forehead lies our prefrontal cortex. Among other things, it is the part of our brain that is responsible for not only focusing on the task at hand, but also searching for existing information in our memories AND combining it with other information from other memories. Sounds like quite the workload if you ask me! It is through the hard work of the prefrontal cortex that we are able to come up with new ideas and solve problems.

Much like a UFC fighter too focused on one aspect of mixed martial arts (pretty dangerous), having our prefrontal cortex too focused on one aspect of problem solving really inhibits our ability to see the full picture. When we step away from a problem and give our brain a chance to "reset", it allows the prefrontal cortex to once again engage in searching and combining. This gives us a better chance of utilizing concepts that we may have learned from previous memories as well as gives us the opportunity to make connections between old information and the new information we may have just learned from trying to avidly solve the problem at hand.
Photo by Veenit Panchal on Unsplash

Make the Break Worth It!

So, what should we do when we take a break from a difficult task? (Get away from screens)
To make the most of it, there are a few activities that are strongly recommended when taking a break from work that puts serious laborious strain on your brain. Most importantly, try and rest as many of your senses that are associated with the work that is stressing you out.

Exercise
Some dude running on a piece of a brainExercise, no matter what form it takes, releases endorphins. Endorphins trigger a positive feeling in the body similar to the effects of Morphine (*¬*). Endorphins also interact with receptors in your brain that reduce the perception of pain (yes, they will even reduce the feeling of helplessness that is inherent with learning to program). Some quick office-appropriate exercise ideas:

a. Go for a walk either alone or with your one of your peers.

b. Do some jumping-jacks or push-ups in the stairwell (or next to your desk if you want to show off your elite form).

c. Do some pull-ups on the bathroom stall doors (Grunt loudly to exert your dominance in the office and let everyone know that you are doing pull-ups in the bathroom).

d. Challenge your peers to a "no holds barred" wrestling match in the middle of your favorite conference room. Depending on which state you live in you can have an office peer play bookie and take bets on who is going to win.

Probably best to just go for a walk or a brisk jog...
Meditate
Photo by Isabell Winter on UnsplashJust...let your mind, body, and especially your eyes rest for a bit. Seriously, meditation directly combats the majority of what inhibits problem solving and creativity. Meditation has been proven to:

a. Reduce stress (programming is stressful work)

b. Control Anxiety (I'm anxious just writing about being anxious)

c. Enhance Self-Awareness (see above)

d. Lengthen Attention Span (Seems pretty relevant...)

e. Possibly help fight addictions (like trying to solve problems when you clearly need to take a break).

If you need some assistance with meditation there are quite a few free apps you can find for your mobile device that will offer simple guided meditation.
Nap
Photo by Thien Phu Pham on UnsplashMy (BY FAR) personal favorite way to spend a break - A quick cat-nap can be one of the most powerful and effective activities for boosting alertness and memory cognition. Much like painting, playing the violin, or cooking a delicious meal, napping is an art form. To understand the complexities of napping one must practice napping for years and train as an understudy with one of the great nappers of our time. Ok, not really. Napping is actually pretty easy to figure out:
1. The amount of time you choose to nap is the most important factor of your nap. As we fall asleep, our brains go through different stages. Different lengths of naps can greatly effect how we feel when we wake up. Basically, keep your nap limited to less than 30 minutes. Ideally, if you are trained well enough and can fall asleep quickly, 15-20 minutes is best. Plan the length of your nap based on the goals you want to accomplish afterwards. Longer naps produce longer-lasting benefits but can cause significant grogginess. If you have a marathon of work ahead of you for the evening you may want to nap longer, but for a quick burst of energy and refreshment, try and limit your snoozing to less than 30 minutes as this prohibits the brain from advancing past the stages of "light sleep".
2. Practice. Seriously. If you aren't used to napping or are used to napping for long periods of time, just set an alarm for 20-30 minutes and form a habit of taking an afternoon siesta. Even if you don't "fall asleep" just resting and turning off your sensory perception is a great form of haphazard meditation.
3. Life-hack: Drink a cup of coffee immediately before taking a nap. On average it takes caffeine about 20 minutes to get to your brain through your digestive system (almost like it was just meant to be...).
Numerous studies have shown that napping increases alertness, but also straight-up improves memory. Specifically, it improves declarative memory - the ability to recall specific pieces of knowledge.

In summation, if you are struggling with a difficult-to-solve problem, just take a break. Give your brain some rest and take another swing at it in 15 minutes. You'll be surprised by your new-found perspective and profound understanding. Ok, maybe not...but at least you will get some exercise or a nice nap in the meantime.