DEV Community: Billy Witherspoon

AWS in 2 Minutes: A Summary, A History, A Flagship Product, and A Case Example

Billy Witherspoon — Tue, 16 Apr 2019 04:48:55 +0000

A Summary

AWS (Amazon Web Services) is a subsidiary of Amazon that provides on demand cloud based platforms that allows businesses of all sizes to scale and grow through compute power, database storage, content delivery and other functionality.

A History

Cape Town, South Africa. The birthplace of AWS.

2003

AWS all began with Benjamin Black and Chris Pinkham. These two Amazon employees wrote a vision paper for a service that:

"completely standardized, completely automated, and relied extensively on web services for things like storage."

2004

Jeff B gives the project a green light. Pinkham, having grown up in South Africa, sets up a satellite office in Cape Town. He works with a team to develop a flagship product called the Elastic Computer Cloud (EC2).

2006

AWS officially launches their first three products:

EC2 (Elastic Computer Cloud)
S3 (Simple Storage Service)
SQS (Simple Queue Service)

All three of these remain top 10 AWS services (out of approximately 100).

A Flagship Product

What is it?

EC2 is a service that allows clients to rent amazon resources on demand to create virtual machines (named 'instances' by AWS).

Essentially, AWS maintains their servers. Clients can 'rent' computing power from these servers. Clients create 'instances' that have varying attributes such as CPU, RAM, or OS. Options range from on-demand instances to reserved dedicated hosts paid by the hour.

What are the Benefits?

Scalable

Have a change in computing demand overnight, over months...or a full year? Clients can configure new instances in less than 10 minutes. It is marketed as infinitely scalable for any size solution.

No Maintenance and Upgrading

Clients have no need to maintain, repair, monitor, and upgrade equipment.

Reliable

Like many major cloud services, reliability is extremely high. A quick look at an older 2015 comparison shows a reliability rating over 99.99%.

A Case Example (Expedia ESS)

A great example of a major company turning to EC2 was Expedia in 2010. They were launching a typeahead suggestion service called ESS (Expedia Suggest Service) in Asia and Europe that helped customers enter travel, search, and location information correctly.

Internal studies found that an error page was a main reason for site abandonment.

Existing Expedia data centers were all located in Chandler, AZ. Technology Director, Murari Gopalan was quoted saying:

“There was no way for us to solve the problem without AWS.”

After their migration and implementation, latency was reduced from 700ms to 50ms.

Resources:

AWS EC2
Amazon Web Services EC2

Timeline of AWS
Wikipedia

How Amazon exposed its guts: The History of AWS's EC2
Jack Clark, ZDNEt

Top 30 AWS cloud services
Brandon Butler, Senior Editor, Network World

AWS Rates Highest on Cloud Reliability
George Leopold, EnterpriseAI

What is AWS
edureka!, YouTube

Wrangling RVM and Ruby Gems

Billy Witherspoon — Mon, 08 Apr 2019 16:59:48 +0000

Photo by Zhen Hu on Unsplash

Note: All referenced commands are using a Bash shell on a Mac OS X Terminal.

RVM (Ruby Version Manager)

What is RVM?

RVM is a platform designed to help you manage local versions of Ruby. It separates versions of Ruby and each of their associated gems that have been installed for that version.

Let’s jump right into to some uses of RVM once it has been installed.

RVM Commands

Well, we can’t manage ruby without having it in the first place. I’m going to go ahead and install some versions of Ruby.

Install the latest version of Ruby

rvm install ruby

Install a specific version of Ruby (replace X.X.X with version number)

rvm install ruby-X.X.X

For demonstration I have installed the latest version of Ruby (ruby-2.6.0) as well as two other versions (ruby-2.3.0 and ruby-2.5.3).

Return a list of currently installed versions

rvm list

Here is what this looks like when I run it on my machine.

I’m currently running the latest version. Go me. However, what if I just got assigned to a project that requires me to run any version before 2.6.0. I have a couple commands at my disposal.

Change the current version of Ruby (replace X.X.X with version number)

rvm use X.X.X

This will temporarily change the version of Ruby in my shell. Ruby will reset to my default when opening a new terminal shell. This is the best choice if I need to quickly work on a project for a short period of time without changing my default Ruby version.

Change the default version of Ruby (replace X.X.X with version number)

rvm --default use X.X.X

This will now be the default version of Ruby when I open a new terminal shell. Let’s assume this is a long term project, I’ll go with this one.

Delete a version of Ruby (replace X.X.X with version number)

rvm remove X.X.X

Ruby Gemsets

With each Ruby version comes it’s associated gems. Keep in mind when you install, change, or delete a version of Ruby, whatever gems have been installed/associated with that version go with it. Tracking individual gems locally are less critical when working on a project thanks to a Ruby Gem called Bundler.

Ruby Gems

Photo by Mahkeo on Unsplash

What are Ruby Gems?

A gem is a software package that can be added to enhance functionalities of ruby programs. We already learned of one gem (bundler). I won’t go too deep into all the types of ruby gems, but they are a beautiful addition to making any Ruby project more capable.

Basic Ruby Gem Commands

Install a Ruby gem

gem install gem_name

List installed gems

gem list

Pretty simple stuff. Now, let’s look at a list of gems installed locally.

Truncated to only the first 7 gems and we can see…that’s a lot! Let’s do some uninstalling.

Note: each of these commands will prompt you if you are trying to remove a gem that is part of a dependency, how helpful!

Remove all old versions of all gems

gem cleanup

Remove all old versions of a specific gem

gem cleanup gem_name

Uninstall all versions of a gem

gem uninstall gem_name

Uninstall certain version of a gem (replace X.X.X with version number)

gem uninstall gem_name -v, X.X.X

Remove all versions less than a specified version (replace X.X.X with version number)

gem uninstall gem_name -v, '<X.X.X'

Much better! Our gems are clean as soap.

It should be noted that older versions of gems can certainly be useful due to compatibilities. However, if using Bundler, this won’t be a problem as it will simply reinstall any missing gems as necessary. Let’s learn a little more about this.

Bundler

Photo by Radek Grzybowski on Unsplash

What is Bundler?

Bundler was released in 2009 (sorry coding vets) as a Ruby gem management system for Ruby projects. It has multiple benefits:

It allows the user to specify Ruby gems (in a gemfile) that must be installed locally before working on a project
It allows the user to specify specific versions of Ruby gems
It automatically installs the specified Ruby gems and any gem dependencies
It creates a gemfile lock that notes the installed gems

Bundler Magic

To check for and install missing gems required for a project

bundle install

One command to rule them all!

Photo by Andres Iga on Unsplash

So what is bundler doing behind the scenes with this single command?

Reads the gemfile lock (if it exists)
Reads the gemfile
Queries RubyGems.org for a list of every version of each specified gem
Finds gem versions allowed by the gemfile that work together including any necessary dependency gems
Writes down those versions in the gemfile lock
Install all gems in the gemfile lock

Powerful stuff! Bundler is a necessity in any Ruby project to keep gems nice and organized.

Congrats! Consider your ruby wrangled!

Making Git, Lit (A Fun Intro to Version Control)

Billy Witherspoon — Mon, 08 Apr 2019 16:56:27 +0000

Note: All referenced commands are using Bash on a Mac OS X Terminal. Github is used as an example version control platform.

Project. Project-final. Project-final-FINAL. Project-please-let-this-be-the-last version. Project-spaghetti. Project-done-complete-over-submit.

Look familiar? Maybe you’ve been down this path of fear. That you’ve worked tireless hours and dread the thought of losing your hard earned work. Maybe you’re going out on a limb and don’t want to lose your current version for posterity.

You need version control in your life

“Hey Max? Can you send me the updated file?”

“I don’t have it, Stephanie is currently working on it”

“Hey Megan, I just sent you my changes”

“You did? Max just told me, Stephanie is supposed to be working on the file”

Look familiar? The decrease in productivity, the continual cycle of communication and manual changes.

You need version control in your life.

Enter Github

Github is a version control platform that enables multiple users to seamlessly and simultaneously work on the same set of files and directories. Storing a breadcrumb of versions along the way.

Quick Definitions

Let’s run through a set of definitions. Don’t skip these!

Directory: A folder

Project: For this post, refers to a set of files nested in directories.

Repository: A place where a project are stored (hint: it can be stored in multiple places). Often referred to as a repo.

Local: Your machine, your computer, and only your computer.

Remote: A place that is not your machine.

Branch: A repository linked to the master repository. Can be local or remote.

Working directory: Your workspace. Where you access and edit your project directories and files once you have created a local repository.

Where Da Repos At?

Ok so you’ve got a project. Do you have a project? No? Well get on it!

Build Your Project Directory

This is your project directory, add your files, your code, your pictures, your memes, your last will and testament, and whatever else seems prudent.

Alright, you’ve got your project ready to go. Now what? Start a new repository on Github!

Create Github Remote Repository

Go to Github.com and create a new repository. This will be the central point for your version control. This won’t be the only repository, but it is the most important. This repository is considered remote as it is hosted by Github.

Next you have two options to create your working directory:

Clone your repository
Build your directory, initialize a local repository, link to your remote repository

Option 1: Clone your repository

Clone

Command: git clone ssh/https_link_to_github_repository

The act of cloning takes three major actions:

Cloning creates a working directory on your local machine linked to your local repository. Migrate your project directory to this new directory.
Cloning creates a local repository on your machine that is a copy (clone) of the one you just made on Github. You generally won’t be viewing the content of the individual files while they are on your local repository.
Cloning creates a link to your local repository and the remote repository created earlier. You’ll be able to update the remote repository later on with certain commands.

Option 2: Initialize a local repository, link to your remote repository

You currently have a project directory. Let’s use it to create a local repository, then link it to the remote repository. You won’t need to move your project directory with this option, it will simply become your working directory.

Initialize

Command: git init

First, make sure you are in your project directory. Then run git init. This creates a local repository on your local machine linked to your working directory. Your project directory has now become your working directory and is linked to this new repository.

Add Remote

Command: git remote add origin ssh/https_link_to_github_repository

This links your local repository to your Github remote repository.

Getting Samantha Involved

KABOOM, two repositories have now been created. A remote repository on your Github profile and a local repository on your machine.

For fun, lets create one more. Let’s say your coworker Samantha wants to do a sick collab. She will simply use option 1 to clone your Github repository. Don’t forget to add Samantha as a collaborator on Github. That is, if you trust Samantha. The employee eating other people’s food from the fridge still hasn’t been caught…

Now we have three repositories:

A remote repository on your Github profile.
A local repository on your machine.
A local repository on Samantha’s machine.

Add it, Commit it, Push it,

Psst. Pssssst. PSSSSST. HEY WAKE UP. This is the important bit. Save your files and get ready to throw them up to the remote.

Let’s get right into it, these are the commands you are going to use to sync your local repository to the remote repository. Note: all git commands are prepended with git.

Add

Command: git add file_name or git add .

git add prepares your files by staging them. In this case staging them simply means collecting them into a staging area. You can add files one by one by file name or all files in the working directory with git add .

The staging area is full of some files you want to send on to bigger and better things.

2. Commit

Command: git commit -m "summarize your changes&quot;

You’ve set the stage, literally. You’ve got your updated files all hyped and ready. Now commit them. Committing moves those bad boys to your local repository.

Congrats, you’re in a committed relationship with Github. You have now updated your local repository.

3. Push

Command: git push

Send em on up! You can specify the specific remote repository you want to push by appending it’s name to git push, otherwise it will use your current remote repository.

Pushing files updates the remote repository with your changed files. Congrats! You just updated your repository and the remote repository! These three steps are Github at it’s core and you will be using them often.

Pull it, Fetch it, Branch it

4. Fetch

Command: git fetch

CRSHKKBRRTCKK ERROR ERROR

You may get an error while attempting to push. This error may say something along the lines of MERGE CONFLICT.

Samantha sent up some files before you and Github can’t accept your files just yet. No worries, let’s fetch them and fix this up.

git fetch takes down files from the remote repository to your local repository. However, you still can’t see them in your working directory. Time to merge them into your working directory.

5. Merge

Command: git merge

Merges files from your local repository to your working directory.

When you run git merge, more than likely your text editor will prompt you to fix the conflicts that exist between your files and the ones you just pulled down.

Once you fixed these up, repeat steps 1 through 3. For this second commit, you can typically just use the command git commit -m “merged”.

4. Pull (Fetch + Merge)

Command: git pull

Pulling is the act of bringing down those files from the remote repository and merging them to your working directory. In this case these are the updated files Samantha already pushed to the remote repository.

Pulling is the combination of two git commands git fetch and git merge.

5. Branch

Command: git branch branch_name and git checkout branch_name

Let’s say you want to try out some funky stuff on your project, but while retaining your current version. The best way to do this is to create a new directory. The directory you already have is pre-designated the master. You can see this with the command git branch.

A branch is a new directory linked to your master that you have already created. Creating a new branch allows you to edit your project without yet making changes to your master.

git branch branch_name will create a new branch. git checkout branch_name will switch to working in that directory. Now when you do git add and git commit in steps 1 and 2 they will be only affecting this new directory.

If you want to merge those changes in your new directory/branch with your master, run the following sequence:

git checkout master switch back to your master branch

git merge branch_name merge that branch into your master

IT’S A PARTY IT’S A PARTY

You’ve done it! Now you and Samantha can knock this out as a team and have extra time to celebrate!

Should you use Grid or Flexbox...or Both?

Billy Witherspoon — Tue, 02 Apr 2019 21:08:56 +0000

And The Answer is...

Most likely both!

Sweet! Consider this article read. Have yourself a magnificent day of coding. Or, keep reading to find out why!

Background

The CSS Flexible Box (Flexbox) and CSS Grid Layout (Grid) are CSS modules designed to make layouts and positioning in HTML a lot easier. It enables users to lay out elements without using CSS floats and positioning.

Flexbox was first introduced in 2009 and has since worked itself up to be a World Wide Web Consortium (W3C) candidate recommendation.

Grid was initially proposed by Microsoft in 2011 to the CSS Working Group. Akin to Flexbox it is also a W3C candidate recommendation.

Similarities

Set up

Flexbox and Grid both work by setting up container in which elements will be 'flexed' OR 'gridded'. Please note: I just made those words up.

In your stylesheet for the container's class or id you can set it to be flexbox controlled or grid controlled with the following code:

display: flex or display: grid

Notice that you cannot both flex and grid a single container. However, that isn't to say you can't nest containers to achieve maximum POWER.

Syntax

There also exist similarities in attribute syntax. Lines such as flex-start and grid-column-start use positioning keywords that land elements at the beginning of their containers.

Differences

Dimension

The main difference between Grid and Flexbox is that Grid works best in a two dimensional space (ie: both columns and rows) while Flexbox is best used in a single dimensional space (ie: columns or rows).

This generally leads to the larger containers for a websites layout being defined by grid and nested elements in a Flexbox containers. However, this is not a hard and fast rule.

Blackjack Example

Don't Look Too Long

A recent small team project I worked on was creating a blackjack game. For that project we opted to use the CSS framework Bootstrap. However, let's dive in to how I might define certain page elements using Grid and Flexbox.

Grid Measurements

As it's name implies, the basis of Grid is first defining a grid by it's number of rows and columns. You can further refine the size and position of these rows and columns to create. This can be done in a multitude of methods.

Here is the vision for our blackjack game top to bottom:

Preview of Our Final Design

A header that has a name, balance, and logout button that are displayed evenly horizontally.
A blackjack table and some betting actions side by side. There will be two betting actions (hit and stay) on top of one another.
A footer with a centered element that displays who created the game

So let's count the rows and columns. Looks like 3 rows right? Not so fast! Certainly the header and footer are a single row. However, the betting actions area has at least two rows nested in it. Let's make it 4 for scalability. Note that the blackjack table will also be contained on these rows.

So 1 row for a header, 4 for the table/betting actions, and 1 for a footer.

6 rows!

Ok how about columns. The header may be a candidate with it's elements needing to be evenly spaced. However, this is a one dimensional row, so it is really a task better suited for Flexbox later on. Rows 2 - 5 look like they just have 2 columns for a blackjack table and some betting actions.

Row 6 with the footer looks like it has some potential. Let's have it centered, but not take up the entire width of the page.

A total of 5 columns should work nicely. In row 1, the header will take up all 5 columns. In rows 2-5 the blackjack table will take up 3 columns and the betting actions will take up 2. In row 6 the footer will take up 3 of the columns in the center, with one column of white space on either side.

5 columns!

Grid Container CSS

So we know we need a 6 x 5 CSS grid. Let's think about sizing of our rows. The header and footer should take up about 10% vertical space of the page each. That leaves 80% for the table and betting actions.

For the column sizing, we don't have to worry about size. We will dictate how many columns each element takes.

Our container will have a class of 'grid-container'. There are many many ways to write out grids. I highly recommend checking out links at the bottom such as Grid Garden to get started on these. For demonstration, I'm going to use % (percent of container) and fr (fraction of a container).

.grid-container { display: grid; grid-template-rows: 10% 1fr 1fr 1fr 1fr 10%; grid-template-columns: 1fr 1fr 1fr 1fr 1fr; }

Consider Yourself Gridded

Looks great! Let's move on to defining where our elements will go in our grid.

Grid Elements HTML/CSS

Note: The code for the following demo is hosted on this code pen repo. Feel free to follow along, and play around with commenting and uncommenting code as you go.

Header

We want the header to span the entire page on row 1. So it will take up all columns and only row 1. Again, there are many ways to write this, so I'll keep it explicit with start and end points of each element. Keep in mind CSS grid snaps 'up to' a column. So to span two columns we go from 1 to 6.

#header { grid-row: 1; grid-column: 1 / 6; }

Blackjack Table

Here the table should span 4 rows and 3 columns. This will have it occupy 3/5 of the page horizontally.

#blackjack-table { grid-row: 2 / 6; grid-column: 1 / 4; }

Betting actions

A hit button and stay button are in line with the blackjack table with the hit button occupying the upper two rows of the right column, with the stay button beneath it.

#hit-button { grid-row: 2 / 4; grid-column: 4 / 6; }

#stay-button { grid-row: 4 / 6; grid-column: 4 / 6; }

Footer

Footer goes in the last row and takes up the three center columns.

.footer { grid-row: 6; grid-column: 2 / 5; }

And that's it! We've done everything we can with Grid! Things are in the right place. Now let's clean up the elements inside our elements/divs.

Flexbox Usage

Flexbox is great for working within elements that have a single dimension of sub-elements. This might be a div with nested text, or a div with a nested row or nested column. A row or a column is a single dimension, thus there is no need to make a new grid.

We can jump right into the CSS for each of our div elements. For the table, the betting buttons, and the footer, everything will be centered in each direction. Here is the CSS for the blackjack-table.

#blackjack-table { display: flex; justify-content: center: align-items: center; }

For the header. We know we want the three nested elements (username, balance, and logout button) to be right justified in a row. We want them centered vertically in the header.

Without any css they appear as a column on the left side of the header, so it's going to be quite the change.

#header { display: flex; flex-direction: row; justify-content: space-around: align-items: center; }

Summary

Let's check out our work

Looks great!

Resources

Some awesome, awesome resources on CSS Grid and Flexbox

Flexbox Froggy (learn CSS Flexbox with a fun interactive website)

GridGarden (learn CSS Grid with a fun interactive website)

CSS Grid vs CSS Flexbox by Academind on Youtube

Codepen with a pre built grid for playing around

Lots more cool background, links, info, tutorials, and articles on Hackernoon

Decoding Regex Hieroglyphs

Billy Witherspoon — Tue, 19 Mar 2019 17:43:56 +0000

Ever mash on your keyboard to test out a form? Ever seen an encrypted password? Regular expressions make those strings look like Hemmingway. Regular expresions (regex) are non-sensical, non-syntactical and just plain gibberish. Or are they...

What is a Regular Expression?

A regular expression is a sequence of characters that define a search pattern. By setting up this search pattern, you can parse through text to find sets of characters that match that pattern. Regular expressions are a very powerful tool development tool.

Characters

Character Literals

Character literals are individual characters with individual values. For example b, N, 8, and ~ are all character literals. Think of it like typing a single character key on your keyboard and expecting that key to be assigned to a single value.

Sequencing Character Literals

Using these character literals, you can sequence them to create things like words, sentences, and even paragraphs. Spaghetti is a sequence of character literals, as is Mom's Spaghetti (spaces are character literals too!)

Using Character Literals in Regex

Let's say we want to find a sequence of character literals. Specifically JoeSmith@gmail.com. One way we can accomplish this is in regex using character literals.

Let's see an example in javascript where we want to hide two users e-mails.

We define a function called hideEmails that will take in a string argument and use replace to insert ##### in place of the two e-mails in that string. In javascript the replace function can be used to perform this task.

string.replace(/regex/g, replacement string)

Regex expressions are always wrapped with /forward slashes/. The g flag can appended outside of the slashes /regex/g to globally replace for the entire string.

We used our first regex /JoeSmith@gmail.com/ to search for JoeSmith@gmail.com and successfully replaced it with #####!

Notice for e-mail NancySmith@gmail.com, the replace function was unable to match our second regex /nancysmith@gmail.com/ to any text in exampleSentence. That is because n and s are a different character literals than N and S.

Meta Characters

While character literals are nice and simple, they don't provide a very broad capability. Enter meta characters, the building blocks of regular expressions.

Meta characters have a much broader scope than character literals. They are special characters that can match multiple character literals.

Syntax

Because character literals generally use single characters, meta characters are often generated with a preceding \

Some common examples are:

\w any character that is A-Z, a-z, or 0-9
\d any digit 0-9
\s any white space (can be multiple spaces)

They can also be capitalized to have the opposite effect:

\W any character that is not A-Z, a-z, or 0-9 (symbols)
\D any non digit
\S any non white space

Notice how \d replaces the 2 and \D replaces everything but the 2.

Quantifiers

Quantifiers are meta characters that modify both literal and meta characters. They determine things like how many of this character do you wish to match or where should this character be to match. They are generally placed following a character in a regex.

General Quantifiers

* matches if a character occurs 0 or more times
+ matches if a character occurs 1 or more times
? matches if a character occurs 0 or 1 times
{min,max} matches for a range of character occurrences
{min,} matches for a minimum of character occurrences
{,max} matches for a maximum of character occurrences
{n} matches for an exact number of character occurrences

The ? following the - character means both JoeSmith@gmail.com and Joe-Smithgmail.com are a match as - character occurred 0 or 1 time in that position in the sequence.

Position Quantifiers

^ matches if a character occurs at the beginning of a line (is placed before the character)
$ matches if a character occurs at the end of a line
\b matches if a character is inside the boundary of a word (is placed before and after the character)

Note: If you would like to search for the character literal of a meta character such as ` simply escape it as so *`*

Character Classes

Character classes occur within [brackets]. They allow a user to specify multiple literal characters to match.

^ can be used at the beginning of a character class like a bang operator.

[a-z] is a set of character literals a to z
[A-Z] is a set of character literals A to Z
[0-9] is a set of character literals 0 to 9

Here a set of vowels is entered as character literals and replaced with #.

Then a carrot ^ is added to the regex to only remove non-vowels.

Feelin Rad About Regex

Bring it together now

Let's work on an e-mail regex. Take a quick look at this very basic example.

[\w-]+@[\w-]{2,}\.[\w-]{2,}

It's a little intimidating at first, but we've covered everything it involves, so let's break it down.

An e-mail has the following components: local-part@domain.domain-extension

This can be split up as follows:

local-part
@
domain
.
domain-extension

1. local-part

We know the first part of an e-mail is a set of characters a-z, A-Z, 0-9. We can take care of this with the meta character \w

\w

However, we know some e-mail names have a dash in them. So we need to combo a - character literal with the \w meta character. We can do that with a [character class].

[\w-]

Great. Now we need to specify how many of these characters we expect. In this case we expect 1 or more characters before the @. The + quantifier is a good candidate for this action.

[\w-]+

Perfect, we've built out the first part of our e-mail regex.

2. @

The second part is very simple. We know the @ character literal will appear with no exceptions.

@

3. domain

Here we can make our pattern similar to what we did in local-part.

[\w-]+

But that's a little boring. Let's pretend we know all domains are at least two letters. We can replace the + 1 or more quantifier with {2,} signifying we know there will be at least two characters.

[\w-]{2,}

4. .

Another easy one! A character literal

.

Hold on, that's a meta character. Make sure to escape it with \

\.

Better!

5. Domain Extension

We can make the identical assumption on length and reuse the pattern we made for domain.

[\w-]{2,}

Test it out

Drumroll, please. Our final regex expression is ready to go!

[\w-]+@[\w-]{2,}\.[\w-]{2,}

Beautiful! It was able to search through the text and grab the e-mails we expected it to. It also skipped over other sequences that had characters and structure similar to an e-mail, but did not match our regex. There are certainly still room for improvements, so I encourage everyone to experiment on their own!

Some of my favorite regex resources:

The coding train on Youtube
Rubular, a Ruby based regex tester
Your built in IDE! Try out Ctrl + F or Cmd + F and click the * option to test out searching by Regex.