Forem: Kevin Downs

Creating a User Login System - Ruby on Rails

Kevin Downs — Tue, 01 Dec 2020 04:32:27 +0000

The last few weeks I have been chronicling my experience creating an application using Rails and React with the react-rails gem. One of the more general parts of an application that is applicable to a wide variety of projects is a user login. While building out the skeleton of a user login system for the trivia app I am currently working on, I thought it might be an opportunity to share my approach for others that might be looking to build out a similar system.

Small note about this post: there are so many different ways one could approach building a login system for their applications. If you would like to follow along and build your own, feel free to play around with things and make them your own. To keep things as simple as possible, the system I will be building out here will be pretty bare bones. For this post, I am also working with Rails 6 and not utilizing the React functionality of the application.

Let's Get Started!

The first thing we are going to need is a Rails project to work in. I already have one built, but if you are looking to just play around or create your own new project for whatever reason, you can do so by using the rails new <app-name> command.

For our login system, the goal is to have a Sign Up page where users can create an account and a Login page that will allow them to log into their account. To be able to test this, we will also have a "profile" page that will be visible after a user is logged in. Let's look at a breakdown of the things we will need to make this happen:

User Model & Database Migration
Sessions
Helpers
Routes
Controllers
Views

User Model

The first thing we will need to do is create a Model for our User data. For security, we will be using the bcrypt gem to salt and hash our user's passwords. To add it, simply go to your gemfile and add gem 'bcrypt'. Rails may have automatically added this gem when creating a new project, in that case you just have to remove the comment. After making sure it is included in your gemfile, simply run bundle install to install the gem in your project.

We are ready now to create our actual model. You could just create a new file in the models folder, but we are going to use a generator for this. The benefit of using the generator is that not only will rails automatically create the model file for us, but it will also create a migration for us so that we can easily create a Users table in our database.

For our user model we will be keeping things simple and requiring just a username and a password field.

rails g model User username:string password_digest:string

With this command Rails will generate a User model for us as well as a migration for that model. The migration will create a User table with a username and password column as well as standard id and timestamp columns. The reason we are using password_digest here is because of bcrypt. When we connect our model to the gem a little later, this column will give us access to a password and password_confirmation field and allow us to authenticate our user's password.

To use bcrypt with our model is very simple. Let's just go to the model.rb file and add the helper has_secure_password inside the class definition. It should look like this:

Now that we have everything connected, the last step is to load our migration. If you haven't already, create your database by using the rails db:create command. After the database is created we can simply run our migration with the rails db:migrate command. We should now have a working User model and database table.

Sessions

We will be taking advantage of the sessions hash that Rails provides for us to keep track of the logged in user. I don't want to go into too much detail here, but essentially this provides us a way to persist the current user through our application so that they don't have to continually log in. Just know that when you see us using session[:user_id] this is what we are accessing. If you'd like to get a more detailed understanding, feel free to read more about it here.

Helpers

This next part is optional, but I find it useful when developing my own applications. We are going to set up some helper functions that will allow us to DRY up our code a little bit. Specifically we will be creating a logged_in? helper that will return true or false based on whether or not there is an active session[:user_id] and a current_user helper that will return to us the database model for the currently logged in user. We will place the code for these two in app/helpers/application_helper.rb

Routes

The last bit we need to set up before getting into the nitty gritty of Controllers and Views is setting up our routes. We are going to have two Controllers we need to create routes for: session and users. We will be using the sessions to handle the session actions of logging in and out. The users will be in charge of the actual user data for things like creating and editing new users.

For users we can use the resources helper and specify the routes we want Rails to make available for us. For the sessions routes, I prefer creating them myself so that I can customize the paths.

Controllers

The controllers will allow us to perform some logic as well as pass information on to our views. When the user requests a specific endpoint, the controller will execute the corresponding code and make certain variables available to our view for whatever we may need. I prefer to create my controller and view files individually, but you can also use a rails generator to do both automatically. If you are creating your own Controller like I am, just create a new file in the app/controllers folder using the plural like this: sessions_controller.rb. The naming convention is important here so that Rails can link your models, views, and controllers together.

For the Sessions controller we will only need a create action. Since our login route will just render our login view, Rails will automatically handle that for us. In our create action we will search our database for the user entry that matches the username provided in the login form, authenticate using bcrypt and the provided password, and then setting the session[:user_id] and redirecting the user.

The Users Controller is a little more involved. We will need a new action that will give our view access to a new User instance.

Our create action will be very similar to our login action, with the exception that we will be creating and saving a new user database entry. Lastly we will have a show action that will give us access to the data for the currently logged in user.

We will also be enforcing strong params which you can learn more about here.

Views

The last step is to create some views that we can actually interact with. This is the bit that is most customizable, as you can create whatever variety of UI you would like for this. As mine are also rather basic just to get things working, I will just give an overview of what is needed here.

We will need to first create a users and sessions folder within the app/views folder. There we can create our view files for each of our controllers. Using the naming convention of <action_name>.html.erb Rails will automatically render the corresponding views to our controller actions. For example, our login view should be app/views/sessions/login.html.erb.

For our sessions, we will need a login view, and for our users we will need a new and show view.

For the login and new pages, we will need at minimum a form for the user to input a username and password and submit that data to our controller for handling. Below you can see my bare bones implementation of these pages.

The final show page can really display any information you would like. Here we have access to the data for the logged in user so something like a profile page that displays the user's information, with buttons to edit or delete data might be a good idea.

Conclusion

And that's how I get started with pretty much every Rails project I create to have a bare-bones functional login system. I hope this was helpful in some way if you're still here. Happy Coding!

Personal Project - Trivia App

Kevin Downs — Tue, 24 Nov 2020 03:20:59 +0000

As Covid-19 continues to change the way we interact with the world, we are all discovering new ways to connect - mainly in online spaces. One of the activities my friends and I started to make a regular occurrence was weekly Trivia Nights on Zoom. As someone learning software development, I always wanted to find a way to make this activity a more pleasant and enjoyable experience. Currently we were working on a simple editable slideshow with categories and point vales, with individual players having the responsibility of keeping track of and actually reading their questions. My goal was to create an application that would allow players to submit categories and questions to a central game, that the game runner would then be able to execute like a browser game.

The only thing I had been struggling with was finding an appropriate stack or framework to work with. After my post last week on using React with Rails, I thought this would be a great way to dive deeper into using those two technologies together as it seemed like the perfect fit for what I wanted to do. As this project is something more complicated than I've worked on before I wanted really take the time to design things properly. I also thought this would be a good opportunity to do a different type of post this week, talking more about my process in designing the structure of the application. Let's get to it!

Models

The most important thing to plan out for me are the models that my application will be using. Since these will form the basis of how the application flows and what features are available to users.

Obviously my first model would be a User as everything else in the application will be user based for the most part. My vision was to have players able to create Games as well as add categories to both their own games as well as other created games. So we need a Game and Category model as well.

Lastly, I wanted each category to consist of five questions, so we will need a Questions model as well.

Users

The Users model will be the most simple out of all of them. Just starting I will only need to have a username and a password attribute to allow a User to register and login.

Attribute	Type
username	string
password	string

Game

The second model and the one that we will access most of our information from will be Game. Each Game will belong to a specific user and so we will definitely want to have a user_id attribute. Each Game should also probably have a name.

We will also want users to be able to link categories to a specific game that may not be theirs. My thought process on this was to generate a unique code for each game that a player could share or input in order to gain access to that game. We will call this something like game_code.

Lastly each Game will have two teams that will be playing against each other. The implementation for this might change in the future but for now I've gone with a team and team_score field for each.

Attribute	Type
user_id	integer
name	string
game_code	string
team_a	string
team_a_score	integer
team_b	string
team_b_score	integer

Attribute	Type
game_id	integer
name	string

Questions

The Question model is the last one! We want to link each question with a specific category so a category_id attribute is a must. Next we need the actual question and answer values for the actual question. To keep track of what each question is worth we will also need a point_value attribute, and lastly a boolean to track whether or not the question has been answered.

Attribute	Type
category_id	integer
question	string
answer	string
point_value	integer
answered	boolean

Conclusion

And those are the basics as to how I'm organizing my application! I hope if you're trying to figure out how to plan your own application out this might give you some ideas on how things can be organized. I think one of the most important things to keep development simple is to have a good scaffold or plan going into things. It's much easier to anticipate changes or tweak things with good planning!

Using React and Rails Together

Kevin Downs — Tue, 17 Nov 2020 02:01:07 +0000

In my time at Flatiron School we learned a lot about Ruby on Rails and React, building complete projects with both. Thus far I had only handled using these two technologies together in one way: create a React front-end that is fed data from a Rails API. This is certainly a great way to handle things, but as I started building my own projects I found myself wanting for a more elegant solution than splitting things up into two separate projects that were just able to talk to each other. I found myself thinking why isn't there a way to take advantage of Rails' MVC pipeline and use React directly within the Rails views. After some searching and googling I found a solution that seems to do exactly that: the react-rails gem.

I'd like to use this post as an opportunity to walk anyone who may have been in a similar boat as myself through the process of setting everything up in a single project. If you are someone who likes to go straight to documentation and play around with things yourself, I encourage you to check those out here. The setup instructions that come with them are fantastic, and for the most part I will be walking through those instructions getting my own project set up. For reference, my project will be using Webpacker with Rails 6x.

Getting Started

Getting started with react-rails is fairly simple and straightforward. If you have ever used Rails' built in generator tools a lot of what we will be doing will look very familiar. There are just a few configurations we will have to set up to get React hooked into our Rails project correctly.

The first thing we will want to do is create a new Rails project. This can be done most easily using the new Rails command in the terminal which will also allow you to set up some additional configuration if you'd like.

rails new my-app -T

I like to use the -T flag when building personal projects as it tells Rails not to initialize the project with auto generated test files. I find they're generally unnecessary for personal projects, and it also leaves you with the option to use testing tools that aren't Rails default later on if you choose.

You can also use the -d flag to set your project up with a different database tool, as well as any other configuration flags you might want.

Configuring Gems

At this point there are two gems that we want to set up in our project: webpacker and react-rails. Go ahead and add those two to your Gemfile to include them as dependencies within your project. webpacker may already be included from using the project generator (it was in my case), so just make sure that both gems are there and you're good to go.

Installation and Setup

Next we're going to make sure that any gems that we added to the Gemfile in the above step get installed properly. Go ahead and run bundle install in the terminal to do so.

After we make sure everything is good with bundler and our gems, we're going to run a series of Rails commands to get everything hooked up properly. A command or two may already be configured from the initial project generation, but it doesn't hurt to run all of them just to make sure we have everything set up properly.

rails webpacker:install
rails webpacker:install:react
rails generate react:install

Running the above three commands might take a little bit of time to get everything configured, but after the have successfully run Rails should now be ready to start accepting our React components through it's pipeline.

We should now have:

an app/javascript/components/ directory
ReactRailsUJS setup in app/javascript/packs/application.js
an app/javascript/packs/server_rendering.js

The components directory is where all of our React components will live. ReactRailsUJS makes our Javascript available to the window and allows us access to event handling, lifecycle methods, control over mounting and unmounting, and much more. Finally, the server_rendering.js file is for server side rendering.

The last thing we will need to do is link the JavaScript pack. If you are using Rails 6, this will have been added by default so you can skip this step. For Rails versions below 6, you will simply place the helper below in the head tag of your application.html.erb file below turbolinks:

<%= javascript_pack_tag 'application' %>

Component Time

Now that we have all of the setup and configuration set up, we can move on to finally making and rendering some components! react-rails provides us with an easy to use generator similar to what you might be used to while creating Rails controllers or models.

rails g react:component HelloWorld greeting:string

The generator follows standard Rails convention.

The first part rails g denotes we are using a rails generator.
react:component tells Rails we want to generate a new React component.
In this example HelloWorldis the name of our component.
Finally greeting:string tells Rails that the component should have one prop called greeting that is of type string.

By default, components will be added to the app/javascript/components/ directory. You can also specify a subdirectory for the component to be added to instead by appending it to the component name in the generator command like so:

rails g react:component my_subdirectory/HelloWorld greeting:string

Now all that is left is to render our component in a view. For the purposes of testing everything to make sure it works, I just set my root route to an index action within the default ApplicationController with a matching index.html.erb file to play around with rendering. Regardless of what view you use, rendering your component should be the same. We will use the react_component helper in our view file like so:

<%= react_component("HelloWorld", { greeting: "Hello from react-rails." }) %>

This helper takes two arguments. The first is the name of the component we want to render as a string, the second is an object with key value pairs corresponding to prop name and values to be passed to our component. If we start our server with rails s and navigate to whichever page we rendered our component to, we should be greeted with the message "Hello from react-rails.".

Conclusion

That's all there is to it. We now have a Rails project in which we can use React components directly in our views. There are many things we can do from here, but this setup now provides us with the ability to create and use whatever components we would like for our project.

If you'd like to get started creating your own react-rails project check out some of the resources below:

Building A Basic Discord Bot

Kevin Downs — Tue, 10 Nov 2020 01:58:30 +0000

If you have a gaming hobby like me, chances are you have heard of or use the service Discord. For those not in the know, Discord is a voice-chat, messaging, and video streaming application. I have been using Discord for a few years now to chat and hang out with friends while gaming, but I was always intrigued by the bots that you can invite to your servers. These bots are programmed to perform specific actions in response to certain messages typed in text channels.

I always wanted to learn how to make my own, and now that I have the coding knowledge to do so, I decided to take a crack at it. In this post, I'll be walking through the process of setting up my very first Discord bot: demo-bot (original, I know). Granted, this is a very simple bot that just responds to specific messages with a random reply - but it's a great starting point for learning how coding a bot works. This walkthrough will be using JavaScript, specifically the discord.js library. You will need to have Node installed if you'd like to code along.

Setup

Before we can get into actually coding, there are a few things we will need to set up first. The first thing you will need is a Discord account. If you don't have one, it's easy to sign up for free here. After creating an account and logging in, you will need to navigate to the developer portal at the bottom of the page.

Here you will find documentation as well as an applications tab. To create a new application, simply click on the "new application" button! You will be prompted to enter a name for your bot, and once you click save you should be able to access various settings for our new application.

There are a lot of settings here that you can feel free to play around with, but the first thing we want to do is add the actual bot to the application. You can do this by clicking the bot tab, then the create bot button, and confirm. You will see a hidden token that is very important for connecting to our bot in our code. We can grab this in a little bit. You will also want to navigate back to the "General Information" tab and copy the client id there. We will be using this to invite our bot to our server.

There is one last step before we get to coding - we have to invite the bot to a server! For this I recommend creating your own test server so that you don't clog up a shared server when testing and debugging. To invite just pop the following url in your browser, substituting your own Client ID. Select the server you want to invite to and hit ok!

https://discord.com/oauth2/authorize?client_id=YOUR_CLIENT_ID&scope=bot

Let's Get to Coding!

The first thing we have to do is set up our environment. Run the command npm init to generate your package.json file. We will also need an index.js file - this is where we will be writing all of our bot code.

At this point I would also recommend creating a .gitignore and .env file as well as installing dotenv by running npm install dotenv. If you are working on your own local environment for testing purposes this isn't necessary, but it is best practice to hide sensitive variables like our Bot ID - especially if you are backing up your work on github.

The last package we will need is discord.js which will provide us an easy way to interface with the Discord API using JavaScript. Just run npm install discord.js to install the package.

OK, Can We Actually Code Now?

Alright, the time has finally come! Open up that index.js file and lets start getting things set up. The first thing we want to do is get discord.js hooked up to our index file as well as create a client variable that we can operate on and use to connect to our bot.

const Discord = require('discord.js');
const client = new Discord.Client();

I like to set up my global variables at the top as well, so under the above code I am also going to create a replies variable that will be an array containing all of the replies that the bot can send.

// Variables
const replies = [
    `Aye Aye, Captain! 🦀🦀🦀`,
    `I can't hear youuuuu! 🦀🦀🦀 `,
    `Who lives in a 🍍 under the sea?`
];

Next we are going to write some setup code that needs to run before anything else. We are first going to run our dotenv config so that we can access the variables in our .env file. Then we are going to call the login() method on our client variable to start our bot. This method will take our secret Bot Token as an argument so that it knows which bot to connect to.

// Setup
require('dotenv').config();
client.login(process.env.BOT_TOKEN);

At this point we are ready to run our bot! Granted it doesn't do anything yet, but we can still run it nonetheless. If you type node index.js into your terminal it will launch the bot. You might notice that nothing is happening - let's go ahead and close the bot using ctrl + c and add in an action that will let us know for sure our bot is ready.

For responding to events, we will be using the on() method with our client variable. This method is similar to event handlers in JavaScript and takes two arguments. The first is a string that is the type of event we will be responding to and the second is a callback that will be executed in response to the event.

Let's set it up so that when the bot is connected and ready we print out "Ready!" to the console.

client.on('ready', () => console.log("Ready!"));

Now if we try node index.js again, after a second we should see "Ready!" pop up in the terminal!

The second action the we need to be concerned with is "message". This event is triggered when a message is received in a text channel. it will look like this:

client.on('message', replyMessage);

"message" here is the event we will be responding to and replyMessage is the callback we will be passing in that will execute when the "message" event is triggered. This is the main functionality of our bot so I'm going to provide the function code and then walk through what it is doing.

// Functions
function replyMessage(msg){
    if (msg.channel.id === process.env.TEST_CHANNEL && msg.content.toLowerCase() === "arrr you ready kids?!") {
        const i = Math.floor(Math.random() * replies.length);
        msg.reply(replies[i]);
    }
}

So we can see that the function takes in a msg object as an argument. This object contains a ton of metadata, and I suggest console logging it to get a better look at its properties, but for now we are only going to be concerned with two: channel.id and content.

The content property is pretty self explanatory, it is just the text of the message. We are using toLowerCase() to make the check case insensitive and then checking in our if statement if it matches the message we want to respond to.

The channel.id property is optional, but in this case our if statement is also checking that the message came from a specific channel. We are doing this in this example to restrict the bot to responding only to a specific channel. If you have developer mode turned on in your Discord application, you can grab a channel's ID by right clicking on the channel name and selecting "copy id".

Now that we have checked to make sure the message that we have is the one we want our bot to respond to, we can dive into actually making the bot respond. First we create an index variable that will pick a random number within the range of the length of our replies array. To reply, we simply call reply() on our msg object and pass in the message to respond with. In our case we will be passing in the index of our array equal to our randomly generated number.

This will send an @ reply to the user that posted the message with our bots response text. You can also do this without the @ reply, just sending a regular message to the chat. Instead of reply we would use send and it would look like this:

msg.channel.send(replies[i]);

This will simply send the reply to the same channel from which the bot received the message.

TaDa! Beep Boop 🤖

That's all there is to it! Granted this was a very simple "hello World" level application, but it covers the basics of getting started and can help you get started. There are so many more possibilities for building really robust bots that you can use within your own communities, or even publish for the public to invite to their servers. I hope you enjoyed, Happy Coding!

For a deeper look, check out the official documentation:
Discord
discord.js

You should also check out a great tutorial series that helped me get started:
The Coding Train

Creating my first Chrome Extension

Kevin Downs — Tue, 03 Nov 2020 02:31:32 +0000

Last week, after doing some research and learning a bit about how Chrome extensions work, I posted a write up on what the Manifest File is and how to use it. This week, I expanded on that and created my very first (very simple) Chrome extension. This post will go through the process of creating this extension, and talk about what I wanted to create and how I went about doing so. Since I already did a write up on the Manifest File, I will not be going too in depth on what that is. Feel free to check out my post from last week here if you want to learn more about that specifically.

Why and What Did I Create?

I had what I felt like was a great interview last week, but it seemed like after a week without an update that I was most likely being ghosted. I decided that I would reach out to the people that I interviewed with for an update. I didn't want to just ask for an update though, I also wanted to show them how dedicated I was and that hiring me should be an obvious decision. I took some time to think what I could create that would leave an impression but also be done relatively quickly.

The company was a relatively large marketing company, so I decided on two features that could possibly be split into two extensions and expanded on in the future. One was for the consumer side that changed the plain text names of their brands into hyperlinks that would take you to the website for that brand. The other feature was imagined more for employees or account managers and consisted of a popup quick menu that provided one click access to client sites. I imagined this could be expanded into a quick access portal for a client information hub.

Manifest File

Let's get into the code! The first and most important thing you need to worry about when creating an extension is the Manifest File. This contains all of the information that Chrome needs to make sure all the parts of your extension work together. This is a file that every extension, at minimum, must have.

You can see what my Manifest looks like in its totality below. I am presenting it all at once in its final iteration for simplicity, but when creating your own you may find yourself adding to or removing from this file as you are working. I have removed company specific information as it's not particularly relevant.

{
    "name": "Chrome Extension",
    "version": "1.0",
    "description": "Demo extension that linkifies brands on the web and provides a quick bookmark to brand sites.",
    "manifest_version": 2,
    "browser_action": {
        "default_popup": "popup.html"
    },
    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["content.js"]
        }
    ]
  }

The first four fields are required. They provide a name and description of the extension, a version for facilitating updates, and the version of the manifest file we are using. (As of now this should almost always be 2)

Since I wanted this extension to work across the entire web, I chose to use the browser_action field, inside which I specify which file to be used for the popup feature. Since this was just a prototype project, I opted not to include icon information. The default letter icon worked for me, but you may want to think about including that information in your own project.

For the web page functionality portion, I used the content_scripts field to specify which JS file to uses when pages load. Inside content_scripts, the matches field specifies which pages you want your JS to run on. In this case I wanted it to run on all urls. The documentation has great resources on how to include and exclude specific sites if you want to do something different. Lastly, the js tag just tells the file where to find my JS file.

Popup Menu

As it was the more simple feature to implement, let's talk about the Popup Menu. My idea for this feature was a quick access popup menu with clickable buttons. The buttons would provide one click access to whatever information was needed. For this demo, I chose individual brand websites.

Creating a popup menu for your extension is as simple as creating an html file. Provide the html file that you want to the Manifest using the default_popup field and Chrome will automatically display your html file as a popup when the extension's tray icon is clicked. You are also able to link CSS and JS files in the HTML file head like a regular HTML file.

As I wanted to keep things simple, I decided to link a single CSS file to handle styling. The contents were a simple heading, brief description, and then a list of icons wrapped in hyperlink tags. I've provided a snippet below of what my code looks like with just a few links.

<body>
    <h3>Linker Extension</h3>
    <p><em>Quick links to Brand websites!</em></p>
    <div class="links-wrapper">
        <ul class="links-list">
            <li class="links-item">
                <div class="link-container">
                    <a href="<LINK_HERE>" target="blank">
                        <img src="<ICON_FILE>">
                    </a>
                </div>
            </li>
            <li class="links-item">
                <div class="link-container">
                    <a href="<LINK_HERE>" target="blank">
                        <img src="<ICON_FILE>">
                    </a>
                </div>
            </li>
        </ul>
    </div>
</body>

Text Replacement

The second feature, and the one that took me the longest time to figure out how to implement, was replacing plain text instances of brand names on web pages with a link to that specific brand's website. This feature went through a few iterations until I found the way that worked for me, but let's talk a bit about what I wanted to happen and how I decided to do it.

When you visit a page with an extension enabled, after loading the DOM, Chrome then runs whatever JS file is responsible for the extension's behavior. In my case, I needed to parse the text within the DOM for instances of the brands I was working with, generate a hyperlink with the matching text and target site, and then replace that bit of text in the DOM with my new hyperlink.

Since I only had a handful of brands to worry about, I decided to create an array of objects - one for each brand. They would have a name and url key that I could use to easily find and use the information that I needed. The final result looked something like this:

const brands = [
    {name: "<BRAND_NAME_1>", url: "<BRAND_URL_1>"},
    {name: "<BRAND_NAME_2>", url: "<BRAND_URL_2>"}
]

Next, I needed to figure out how to grab all of the elements on the page that had text in them. I wanted to keep it simple and not really have to worry about breaking things on the page, so I decided to only grab p and span tags as they were the most likely to contain the text I wanted to grab without worrying about breaking existing styling or navigating nested elements.

let nodes = document.querySelectorAll('p,span')

The script contains one reusable function which I used to generate the link tag that we will be inserting into the DOM. Since I already had all of the brand information I needed as objects, the function accepts a brand object as an argument and returns a string that will serve as our hyperlink element.

function generateLinkElement(brandObject){
    return `<a href="${brandObject.url}" target="blank">${brandObject.name}</a>`
}

Finally, I needed to implement the actual search and replace operation that will be the basic functionality. It is a simple loop through all of the elements that I grabbed from the DOM. For each one, I then loop through each brand object in my brands array. If the brand name is included, it replaces the text with the link element generated by our generateLinkElement() function. If not, it continues down the chain until all brands have been checked against each element.

nodes.forEach(node => {
    brands.forEach(brand => {
        if (node.innerHTML.includes(`${brand.name}`)) {
            node.innerHTML = node.innerHTML.replaceAll(`${brand.name}`, `${generateLinkElement(brand)}`);
        }
    });
});

Conclusion

While this is certainly a simple project, and there are probably more optimal/ better ways to implement it, I definitely learned a lot. It was quite fun to challenge myself to learn something new in a short time frame. If you are interested in creating your own Chrome extension or learning more about how to do it, I highly recommend checking out the official docs. They are really quite thorough and do a great job of breaking down what you need.

Chrome Extensions - Manifest File

Kevin Downs — Tue, 27 Oct 2020 03:01:26 +0000

Recently, I have been learning and playing around with creating browser extensions with Google Chrome. For those not familiar, a browser extension is a small program that extends the functionality of the browser. This can add additional functionality or behavior to the browser based on an individuals needs or preferences. Using the Chrome Web Store, developers can write their own extensions and upload them for use by anyone who wants to download and use. Creating an extension for Chrome is pretty simple, anyone with knowledge of HTML, CSS, and JavaScript can do so.

In this post, I would like to talk about and walk through some of the details of the Manifest File. This is the file that all Chrome extensions start with and provides important information that the extension needs to work properly.

What is a Manifest File

The Manifest file is in a way, the blueprint for your extension. In many ways it is similar to the package.json file that you may be familiar with in JavaScript that provides a list of all of your dependencies. This file is JSON format and includes all of the important information that your extension will need. In fact, every extension must have one of these files.

The are many different fields within the manifest and we will be talking about a few of them shortly. There are a a few that are required, many that are recommended, and a whole load that are optional depending on what you want your extension to do. Let's take a look at what an example Manifest File would look like from the Chrome docs.

// manifest.json

{
    "name": "Getting Started Example",
    "version": "1.0",
    "description": "Build an Extension!",
    "manifest_version": 2
  }

Required Fields

There are three fields that are required for every Manifest file: manifest_version, name, and version. These are relatively simple and straightforward, but lets take a look at what each one is used for.

`manifest_version`

This field's value is an integer that specifies the version of the manifest file format required by your project. As of Chrome 18, you should specify a value of 2. While version 1 should be consider depreciated, version 2 is not yet required. However, Chrome has stated that they will stop supporting depreciated manifest versions soon. You can check out the differences in file format versions here if you're curious.

`name`

This one is easy - name is just a string value that serves as the primary identifier of the extension. It has a maximum character limit of 45 and is displayed in the install dialog, extension management UI, and Chrome Web Store.

There is also an optional short_name field that is a shortened version of the extension's name. It has a max character count of 12 and is used in places where there is not enough space for the full name. If this isn't specified, a likely truncated value of name will be used.

`version`

This field's value is self explanatory, it is the version of the extension itself. The value consists of one to four dot separated integers and have a few rules: they much be between 0 and 65535, inclusive, and non-zero integers can't start with 0. If the published extension has a newer version string than the installed extension, it will automatically be updated to the newest version.

There is another optional field similar to short_name called version_name. It can be set to a descriptive string and will be used for display purposes. An example would be "version_name": "1.0 beta". If this field is not present, version will be used for display purposes as well.

Recommended Fields

There are also three fields in the Manifest documentation that are listed as "recommended" fields. These are default_locale, description, and icons. While Chrome will not stop you from leaving these three fields out of your file, in almost all situations you will want to include them.

`default_locale`

This field is used for internalization within your extension. This concept is a bit outside of this post, but if you are curious to learn more, check out Google's overview here.

Essentially, this field is used to support multiple different languages or locales within your extension. Inside of a _locales directory, you are able to include a messages.json for each language your extension will support. The extension will then be able to pick the proper messages to display to the user based on locale. This field allows you to specify which locales are supported in your extension.

Note that this field becomes required if your extension contains a _locales directory and must be absent if it does not.

`description`

The value of this field should be a plain text string. It has a limit of 132 characters and as I'm sure you can guess, serves as a description for the extension. It is used in both the browser's extension management UI and the extension's page in the Chrome Web Store.

`icons`

This field specifies (you guessed it) icons that represent the extension. The value should be formatted as an object with key value pairs of icon size and file name respectively.

Per the docs, you should always provide a 128x128 icon as it is used during the installation of the extension and by the Chrome Web Store. You should also provide a 48X48 icon which will be used in the extension management page. Optionally, you can also provide a 16X16 icon to be used as a favicon. Note that you can provide any size icons you wish and Chrome will do its best, but it is recommended to use the stated sizes for the best results.

Icons should also generally be in PNG format, but Chrome will accept any format supported by WebKit. Below is an example of what the icons field should look like:

"icons": { "16": "icon16.png",
           "48": "icon48.png",
          "128": "icon128.png" }

Pick one (or none)

There are two other fields that are technically optional, but will almost always be used. However, you may only use one per extension and which one you use will depend on the intended functionality of what you are building. The two fields are browser_action and page_action.

`browser_action`

This field should be used when the functionality of your extension makes sense on most web pages. Think of this action as the go to for extensions that you generally want to be available at the browser level or on most web pages a user interacts with. Say you want to create an extension that will translate highlighted words on a webpage, that would be a prime candidate for a browser_action.

This field will put an icon in the main toolbar, to the right of the address bar. The value should be provided as an object which can contain the fields default_icon, default_title, and default_popup.

`default_icon`

The default_icon field is used to specify an icon to be displayed on the main toolbar. For best results it is recommended to use a 16 device independent pixel size icon. In order to display icons where screen pixel density is different than one, you can provide multiple sizes and Chrome will select the best fit.

`default_title`

This field is used to set a tooltip to be displayed for your extension. This field is pretty simple and the value should be a string.

`default_popup`

If this field is specified, a popup will appear when the user clicks on the toolbar icon. The value of this field should be the file name/ path of the HTML file that you wish to use for the popup. The popup can contain any HTML that you would like it to and is automatically sized to fit the contents of the file.

`browser_action` Example

If the above seems a bit confusing in text, take a look below at an example implementation of the browser_action field from the Chrome docs.

{
  "name": "My extension",
  ...
  "browser_action": {
    "default_icon": {
      "16": "images/icon16.png",
      "24": "images/icon24.png",
      "32": "images/icon32.png"
    },
    "default_title": "Google Mail",
    "default_popup": "popup.html"
  },
  ...
}

`page_action`

The page_action field is the counterpart to browser_action. It should be used for extensions where the functionality makes sense for only a few specific pages. This field will also create an icon to the right of the address bar and can make use of the same fields as browser_action. The main difference with this field is that the icon can be grayed out on pages where the extension cannot be used. This can be toggled by using the pageAction.show and pageAction.hide methods.

Optional Fields

The Manifest file can accept a large number of optional fields, and largely including these will be based on the individual functionality and needs of your extension. There are certainly way too many to include in a single blog post, but you should check out the Manifest File documentation here if you're curious to learn more.

Conclusion

I hope this breakdown of the Manifest file used in Chrome extensions has helped you understand it's use a bit better. Happy Coding!

Iterating in JavaScript

Kevin Downs — Tue, 20 Oct 2020 03:10:01 +0000

Last week I decided to create a cheat sheet of sorts for iterating over Arrays in JavaScript. Its aim was to list and explain briefly all of the most commonly used built in methods for iterating or looping over Arrays. As I was thinking of what I should write about this week, I kept coming back to the concept of iterating or looping and thinking about how core of a concept it is in programming as a whole.

Indeed, looping is one of the first concepts taught in almost any language, and is generally the first big concept one has to wrap their heads around before progressing in learning how to program. I decided this week would be a great time to step back and gear a post toward those that are where I was about a year ago and just trying to wrap their heads around this concept. In the following post, I will be discussing the concept of iteration as well as looking at the ways in which we use it in JavaScript specifically.

What is Iteration?

So if we want to talk about iteration (also known as looping) we have to know what it is first, right? Plainly, iteration is the process by which you do something repeatedly, generally with some kind of condition that stops the process. We encounter this kind of looping all the time, though less explicit in the real world.

For a real world example, think of meal prep. Say you are making mashed potatoes and the recipe tells you peel them all. Now we as humans can infer that the recipe means for you to take each potato and peel it. In this instance you are performing an action (peeling) until a certain condition is fulfilled (there are no more unpeeled potatoes).

If we wanted to program this action we have to be a bit more specific. We can define an action peelPotato() which tells the computer how to do what we want. Unfortunately, computers cannot infer like humans can and so if we tell it peelPotato() it will do just that and peel exactly one potato.

Now certainly we could count the number of potatoes that we have and then tell the computer peelPotato() that number of times, but what happens if the number of potatoes changes? We would have to rewrite our entire recipe program. Not to mention the fact that our program would quickly become messy and unwieldy if we do this. This is where iteration and loops come in. We can define a condition (number of potatoes) and tell the computer that it should perform peelPotato() for as long as that condition is true (we still have potatoes to be peeled).

This example is a bit rough and lacking some detail, but I hope it manages to relay the idea well enough. So what are the various ways that we can loop in JavaScript? Let's go through them one by one below.

`for`

The for statement is the most basic and generic of all the looping statements. It is created using the keyword for, followed by three optional expressions (this is where the condition is specified), followed by a code block (this is where your action is). This might be a bit confusing without seeing it so lets look at the basic syntax below.

for (let i = 0; i < 10; i++) {
  console.log(i);
}

Let's first look at the three optional expressions in parenthesis after for. First we are declaring a variable i and setting its initial value to 0. This is going to be our counter variable that we will use to check our exit condition.

The second expression i < 10 is our exit condition. Every time our loop starts, JavaScript will check to see if our counter variable i is less than 10. If it is, we will loop another time - if it is not, we will break out of our loop and continue to the rest of our program.

The third expression i++ is pretty simple. It tells our program to add 1 to the value of our counter at the end of every loop. This lets us keep track of how many times we have gone through the loop and provides and updated value for our condition to check against at the start of every loop.

Finally we have the code block that is between {}. This is just the code that we want to execute every time we loop. You can put whatever you want here, but for this example we are just console logging the value of i on every loop. Let's see how we could use our potato example in a for loop.

let potatoCount = 5;  // number of potatoes we have

// as long as our counter is less than our potatoes, peel away!
for (let i = 0; i < potatoCount; i++) {
  peelPotato();
}

Keep these basic concepts in mind as we continue. Many of the other methods utilize these same principles in different ways or for different situations.

`while`

A while statement is very similar to the for statement. The biggest difference is that it only takes a single condition which it will check before every loop. If the condition evaluates to true, the loop will continue - if false, it will exit.

You can even create a for loop using a while by creating your own counter variable - you just have to make sure to increment it yourself. The biggest advantage to using while is that it allows you to use boolean (true and false) values as a condition. Let's take a look at some examples!

// basic while loop with boolean
let loop = true;

while(loop){
  console.log("We're looping!")
}

// mimicking a for loop
let counter = 0;

while (counter < 5){
  console.log(counter);
  counter++;
}

// potato example
while(hasPotatoes){
  peelPotato();
}

`do...while`

The do...while loop is almost identical to the while loop. The only difference is that the code to be executed comes first and is run before the condition is checked. This means that the code will always execute at least once, even if the condition starts false. This loop is really great for when you have some code that you know needs to run at least once, but might need to run more than once. Example time!

// basic do...while
// even though i starts not greater than 0, this code will still 
// run one time
let i = 0;

do {
  console.log(i);
} while (i > 0);

// potato example
// careful, this will peel at least one time even if we have no 
// potatoes!
do {
  peelPotato();
} while(hasPotatoes);

Conclusion

There you have it, the three most common ways in which we are able to iterate in JavaScript! I hope that if iteration is a concept that you have been struggling with as start your programming journey, that this explanation helps you understand a bit better. While you might be new to programming, never be afraid to take a look at some documentation. If you want to learn more you should check out the docs here. The iterators I talk about here are under the Iterations section, and you'll even find some more advanced ones that I didn't cover. Good luck and happy coding!

Array Methods for Iteration in JavaScript

Kevin Downs — Tue, 13 Oct 2020 01:48:04 +0000

If you have worked with Arrays in JavaScript before, you know that you will often have to loop through or iterate over the data in the Array. This can be done relatively simply with a for loop or a for...of loop, but outside of relatively simple operations this can get quite messy. Having to keep track of counter variables and making sure the increments are correct can quickly bog down your code and make things unnecessarily complicated. Luckily JavaScript has a bunch of built in methods that automatically loop over every element in an Array, and many of them are custom tailored to a specific frequently used operation. This week, I'd like to create a quick reference guide for some of the most commonly used built in Array methods for iteration.

`forEach`

The forEach() method is the most general built in method. It takes a callback function as an argument and executes it on each element in the array. There are a few optional arguments for this method, but we're going to keep it simple for now.

For this method and all of the ones we will be talking about, arrow functions allow us to define the callback directly in the argument. The callback should take an array element as an argument. If this sounds confusing, take a look at the example below.

const array1 = [1, 6, 8, 10];

array1.forEach(number => console.log(number));

`map`

The map() method is useful when you would like to modify all of the items in an Array in some way. Like forEach() it takes a callback as an argument. It will return a new array with the results of executing the function on every item in the Array. Take a look at the example below.

const array1 = [1, 3, 5, 7];

const doubleArray = array1.map( num => num * 2);

console.log(doubleArray);  // [2, 6, 10, 14]

`includes`

The includes() method is useful when you would like to find out if a specific value exists among the entries in an Array. It takes the query value as an argument and returns either true or false depending on whether the value is found or not.

const array1 = [1, 3, 5, 7];

array1.includes(3);  // true
array1.includes(2);  // false

`indexOf`

Great, so we can find out if a value exists within our Array, but what if you need to find out where it is for some reason? That's where indexOf() comes in. Like includes(), it takes in a specific value as an argument, but will return the first index where it finds the value. It will return -1 if the value is not present. You can also optionally provide an index from which to start the search. Take a look at the example below.

const array1 = [1, 8, 7, 4, 8, 10]

array1.indexOf(8);  // 1
array1.indexOf(8, 2);  // 4

`find`

The find() method does exactly what the name implies. It finds the first value in an Array that satisfies the passed in testing function and returns it. Say for example that we would like to find the first element in our array with a value less than 5. The find() method is the perfect method to do so. Keep in mind that find() will only return the first value in the array that satisfies the test. We will talk a little later about how to get multiple values.

const array1 = [1, 3, 5, 7];

const result = array1.find(num => num < 5);

console.log(result);  // 1

`filter`

The filter() method is basically the "full" version of find. What I mean is that filter() works the same find except that it will return a new Array containing the values of all of the elements that match the passed in testing function.

const array1 = [1, 3, 5, 7];

const result = array1.filter(num => num < 5);

console.log(result);  // [1, 3]

`sort`

The sort() method is a bit more complicated than the previous methods we talked about. The default use is simple enough - it sorts the elements of an Array in place and returns the sorted array with the order defaulting to ascending. Optionally you can supply a compare function that defines a specific sort order. This is the complicated bit, and could probably have its own blog post. If you want to learn more about custom compare functions check out the documentation.

const days = ["Mon", "Tues", "Weds", "Thurs"];

days.sort();  // ["Mon", "Thurs", "Tues", "Weds"]

`reduce`

The reduce() method is in my opinion the hardest of these built in methods to grasp. It takes in a reducer function and executes it on every element, returning a single value. A good example of when this method would be appropriate is if you wanted to add all of the numbers in an array together.

The reducer method takes an accumulator and current value as an argument, and optionally takes in a starting index (default is 0) and the array reduce() was called on. If you would like to get a more in depth understanding, take a look at the docs. Let's look at a simple example below.

const array1 = [1, 5, 8, 10]
const reducer = (accum, current) => accum + current;

array1.reduce(reducer);  // 24

Conclusion

These are the most commonly used methods for iterating over arrays. I hope you found this little cheat sheet/ guide useful. If you would like to learn more about built in Array methods, check out the documentation here.

Classes in JavaScript

Kevin Downs — Tue, 06 Oct 2020 01:54:46 +0000

This week I wanted to go back a bit to some of the concepts that I had learned during my time at bootcamp but never really took the time to look deeper at. One of those concepts in JavaScript is classes. Learning the basics of Object-Oriented programming, classes were a pretty straightforward concept for me. Creating code based representations of what your data is trying to represent seems like a pretty easy way to think of things. The thing about JavaScript though, is that though it supports the paradigm of Object Oriented Programming, it is not itself an Object Oriented language. It does this through classes like many Object Oriented languages, but things work a little bit differently since JavaScript is a Procedural language.

What is a Class in JavaScript?

To understand what classes are we have to talk a little bit about how JavaScript handles data. Almost everything in JavaScript is an Object, with the exclusion of primitive data types. Classes in JavaScript are just a template for creating objects that encapsulate data. If you're thinking, "Hey that sounds a lot like a function!", you'd be right. Classes are "special functions" and just like functions they can be defined using an expression or a declaration. If that sounds a bit confusing lets take a look at some examples compared to functions.

// Function declaration
function sayHello(){
  return "Hello";
}

// Function expression
let sayHello = () => "Hello";

// Class declaration
class Dog {
  constructor(name) {
    this.name = name;
  }
}

//Class expression
let puppy = class Dog {
  constructor(name) {
    this.name = name;
  }
}

Keep in mind that although classes are special functions, they do not follow the same hoisting rules as functions. This means that you will have to declare your class before you call it unless you want a nasty ReferenceError.

Class Body

The body of a class, like the body of a function, is the part between the curly braces. This is where the magic is so to speak. You can define methods, constructors, and other such things that might be useful for your class.

`constructor`

One of the most important aspects defined in the body of a class is the constructor method. This method is a special one that allows you to define how your class will be created and initialized. If you look at the constructor for the Dog class up above, it defines how instances of the Dog class will be constructed. It takes one argument, a name, and initializes the name property to the passed in value. Note that you can only have one method with the name "constructor" per class.

If your class has a "super" or "parent" class, you can also use the super keyword to call the constructor of the super class.

Methods

Methods are a way in which you can define actions for your class. There are four types of methods: standard "instance" methods, static methods, getter methods, and setter methods. Let's look at some examples of each of these and then talk a bit more about them.

class Square {
  constructor(side) {
    this.side = side;
  }

  // standard method
  areaMessage() {
    return `The area of this square is ${this.side * this.side}`
  }

  // static method
  static areaFormula() {
    return "A square's area is the length of it's side squared"
  }

  // getter method
  get area() {
    return this.side * this.side;
  }

  // setter method
  set area(newValue) {
    this.side = Math.sqrt(newValue);
  }
}

Standard methods work just like regular methods. The can be called on an instance of a class to execute the code inside specific to that instance of the class. In the example above, if we were to call the areaMessage method on an instance of the Square class, it would return a string with a message telling you the square's area.

Static methods are class level methods. The cannot be called by individual instances of the class, only the class itself. They are generally used for utility methods that do not require a specific instance of the class. In the example above, the areaFormula method returns a message that explains the area formula for squares in general.

Getter methods allow us to define pseudo properties for our class. For example, in a Square class you might want an area property - but the area of a square will change if the length of its sides change. Instead of creating an area property in the constructor that could become inaccurate if other data changes, we can just create a getter method that will return the value of performing area calculations on the square's side value.

Setter methods are similar to getter methods, except that they change a value instead of returning one. For our area example, it might be useful to be able to set the area pseudo-property directly. Since our getter method is based on the value of the square's side, we can just reverse the getter process and set the side value to the square root of the area. Now whenever we change the area or the side value, we can be sure that both values will be updated correctly.

Conclusion

If you want to learn more about classes and object oriented programming in JavaScript, definitely take a look at the MDN Docs. There are some great experimental features that are worth checking out such as private and public field declarations. Happy Coding!

React Native: Basic Components

Kevin Downs — Tue, 29 Sep 2020 01:39:01 +0000

Over the past week I've been digging a little bit into React Native. Since I have been focusing mainly on React for Front-End Development, I thought that the jump to React Native for mobile development would be a natural progression. This week, I'd like to take you through some of the basic components that are provided and how they compare to using React for web development.

React is a library that makes it simple to create complex (or simple) web applications by breaking down all of the pieces into components. If you'd like to read a bit about React Components to familiarize yourself before reading on, feel free to check out the article I wrote a few weeks ago here.

React Native provides the same functionality, except instead of using web components to create the building blocks of you application, each React Native component maps to native components. Note that since we are working with Native, your components will not return JSX or HTML, but instead native components. This post will guide you through some of the most used Native components with comparisons to ReactJS if applicable.

`View`

The View component is the most fundamental component in your React toolbox. View is a container component and maps directly to the equivalent native view for whichever platform you're developing. If would be equivalent to a <div> in web development and just like a <div> can be nested inside other <View>s and have children of any type. Take a look at an example <View> might look like below.

import React from "react";
import ( View, Text } from "react-native";

const WelcomeScreen = () => {
  return (
    <View>
      <Text> Welcome! </Text>
    </View>
  )
}

`Text`

You may have noticed in the code example above that I snuck in an extra component. That's the Text component and it is used for displaying text on screen. These can also be nested, and are more or less equivalent to a <p>.

`Image`

The Image component is very similar to the Text component, except that it is used for displaying images instead of text. It is similar to <img/>. You can specify the image to be displayed using the source prop, passing in either a require() function with the image file or an object with the image uri. Take a look below for an example.

import React from 'react';
import { View, Image, Text } from 'react-native';

const ImageExample = () => {
  return (
    <View>
      <Image source={require('./image.jpg')} />
      <Text>This image used the require function!</Text>
      <Image source={ {uri: 'https://image.com'} } />
      <Text>This image used a uri</Text>
    </View>
  )
}

`TextInput`

This component allows the user to input text into our application via the keyboard. It is very similar to <input type="text">. There are a number of props that can provide some additional functionality and configuration, but we're going to keep it simple. The most simple use case is presenting the user with an input text box and using an onChangeText to read the data. Let's take a look at what a simple component using this would look like.

(If you want to know more about the hook used in this example, check out my post about React Hooks here.)

import React from 'react';
import { TextInput } from 'react-native';

const UselessTextInput = () => {
  const [value, onChangeText] = React.useState('Useless Placeholder');

  return (
    <TextInput
      onChangeText={text => onChangeText(text)}
      value={value}
    />
  );
}

`ScrollView`

ScrollView is very similar to the View component, except as I'm sure you can guess it gives us a view with a scrollbar. Note that it must have a bounded height or you will run into some issues. This is most easily done by making sure that it's parents have a bounded height. You can also set the property directly, but this is discouraged in the documentation.

import React from 'react';
import { Text, View, ScrollView } from 'react-native';

const ScrollExample = () => {
  return (
    <View style={ {flex: 1} }>
      <ScrollView>
        <Text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
          minim veniam, quis nostrud exercitation ullamco laboris nisi ut
          aliquip ex ea commodo consequat. Duis aute irure dolor in
          reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
          culpa qui officia deserunt mollit anim id est laborum.
        </Text>
      </ScrollView>
    </View>
  );
}

StyleSheet

This last component is used a bit differently than the other components we have talked about before. You wont be seeing something like <StyleSheet>, instead you will be using it to create a StyleSheet object that can be used as an abstraction similar to CSS. The object generally contains key names with values that are themselves objects. Those values contain key value pairs that are similar to CSS properties and values.

You can pass these objects into components as the style prop using dot notation to provide styling for your components. This method is preferable to providing in line styles since the StyleSheet component automatically validates for property names. It also looks a lot cleaner and helps to separate concerns.

If that all seems a little confusing, let's take a look at what a simple example would look like in practice.

import React from "react";
import ( View, Text, StyleSheet } from "react-native";

const WelcomeScreen = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}> Welcome! </Text>
    </View>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: "blue"
  },
  text: {
    backgroundColor: "red",
    textAlign: "center",
    fontSize: 30
  }
})

There you have it: a basic overview of some of the most commonly used components in React Native. If you'd like to get a little more in depth about what you can do with these different components, check out the Components documentation or to learn more about React Native in general take a look at the Official documentation.

Basic Regex

Kevin Downs — Tue, 22 Sep 2020 00:56:48 +0000

Regex, short for regular expression is a useful tool for searching out patterns in strings. They can be used in string searching methods such as find() and replace() as well as in input validation to match a specific pattern. If you are like me, you may have come across regex before while trying to manipulate substrings and got scared off by seemingly confusing syntax. Well good news! Regex isn't nearly as complicated as it looks, and is a great tool for writing clean and concise pattern matches when working with strings. Below I'm going to lay out the basics of regex in a hopefully simple to understand manner.

Note: I will be using JavaScript for the purposes of this post, though the concepts can be used in almost any language. Also, this guide will only focus on the basics of regex so I will not be talking about more advanced patterns like look aheads and capture groups.

Methods - `test()` and `match()`

The first thing I want to talk about are the two methods that I will be using - test() and match(). You can use regex in a wide variety of built in string methods, but we're going to keep it simple today. Both of these methods are called on a string and take a regex pattern as an argument. The main difference between the two is the return value.

test(), as the name implies, tests a regex pattern against a string and returns true if it finds a match and false if it does not.

match() is very similar, except it returns an array of the matched substrings if a match is found and null if not.

let regex = /Hello/;
let string = "Hello";

string.test(regex);  // true
string.match(regex);  // ["Hello"]

Note that regex patterns can be either stored in a variable or just input directly as an argument. I think storing them in variables looks cleaner so I will be using them that way in this guide.

Literal Patterns

The most simple pattern you can match for is a literal one. You can see an example of this in the code snippet above where we are just matching for the string "Hello". To create a literal regex pattern all you have to do is put the word you want to match inside //.

let regex = /javascript/;
let string = "I am a javascript programmer.";

string.test(regex);  // true

As you can see above, we are checking to see if the substring "javascript" exists within the string "I am a javascript programmer". Pretty simple right? Let's get a little bit more complicated. What if we had multiple different languages we wanted to check for? We could use the "or" symbol | to test if any of the languages we specify are within the string we want to test. If we use it with match() instead of test we can also get the specific value that was matched.

let regex = /javascript|ruby|java/;
let js = "I am a javascript programmer.";
let ruby = "I am a ruby programmer.";
let java = "I am a java programmer.";

js.match(regex);  // ["javascript"]
ruby.match(regex);  // ["ruby"]
java.match(regex);  // ["java"]

Flags - `i` and `g`

So far we have some very basic literal patterns that we can match. This is great, but regex is case sensitive and only returns the first match found. Often we will want to match regardless of case and we will want to get all of the instances of our match. This is where regex flags come in. They can be added to the end of a regex pattern to denote rules for the entire pattern.

Two of the most commonly used flags are i to denote case insensitivity and g to denote that you want every match in the string. It is also possible to combine flags together to denote multiple rules on your pattern.

let string = "The fox jumps over the dog at the park.";

// This pattern will return the first case insensitive match
let caseRegex = /the/i;
string.match(caseRegex);  // ["The"]

// This pattern will return all case sensitive matches
let multRegex = /the/g;
string.match(multRegex);  // ["the", "the"]

// Combined will return all matches regardless of case
let caseMultRegex = /the/ig;
string.match(caseMultRegex);  // ["The", "the", "the"]

Wildcard - `.`

Now that we have covered literal patterns and flags, lets start talking about special characters. This is where the power of regex starts to shine. In a pattern we can use the . in order to represent a wildcard. This . is a stand in for any character. Say you wanted to match for any three letter word that starts with "b" and ends with "g". Take a look at the snippet below to see how we could use this.

let regex = /b.g/;
let bugString = "Look at this bug";
let bagString = "Look at this bag";

bugString.match(regex);  // ["bug"]
bagString.match(regex);  // ["bag"]

Multiple Characters - `[]`, `-`, `+`, `*`, and `{}`

Now that we've seen the simplest special character - the wildcard, lets talk a bit about some other special characters. The characters that we talk about in this section will allow us to select multiple characters in some for or another.

Surrounding a set of characters with [] will match for any of the characters within. This can be useful for example if you want to find all of the vowels in a string.

let vowels = /[aeiou]/g;
let string = "Hello World!"

string.match(vowels);  // ["e", "o", "o"]

The - character can be used inside of [] to denote a range of characters that we want to match. Say for example we want to match all of the numbers in a string.

let numbers = /[0-9]/g;
let string = "The value of pi is 3.14";

string.match(numbers);  // ["3", "1", "4"]

The + and * characters are very similar in that they both allow you to specify if a specific character appears in succession. + will specify that the character appears one or more times in succession while * specifies zero or more times. Lets look at some examples to clarify.

// This pattern specifies one or more
let regex = \s+\g;
let string = "Where is Mississippi?";

string.match(regex);  // ["s", "ss", "ss"]

// This pattern specifies zero or more
let regex = /ya*/g;
let string = "I said yaaas yesterday.";

string.match(regex); // ["yaaa", "y"]

The final symbol I want to talk about here is {}. It is similar to + and * except that it allows you to specify a range or exact number of times you want a character to repeat. You can specify a min, min and max, or exact number.

let timidPirate = "Aargh";
let normalPirate = "Aaaargh";
let excitedPirate = "Aaaaaaaaaaaaaargh";

// Specify exact number - we want a normal pirate
let regex = /a{4}/i;

timidPirate.test(regex);  // false
normalPirate.test(regex);  // true
excitedPirate.test(regex);  // false

// Specify minimum number - we don't want any timid pirates
let regex = /a{4,}/i

timidPirate.test(regex);  // false
normalPirate.test(regex);  // true
excitedPirate.test(regex);  // true

// Specify min and max number - we only want timid and normal pirates
let regex = /a{2,4}/i

timidPirate.test(regex);  // true
normalPirate.test(regex);  // true
excitedPirate.test(regex);  // false

Shorthand - `\w`, `\d`, and `\s`

Sometimes we want to be able to be able to specify a group of characters, say all digits. Regex provides us with a few shorthand characters that allow us to do so in a single character.

\w allows us to match any alphanumeric value and includes underscore. Its inverse \W matches for all values except alphanumeric and underscore.

\d matches for all digit values (0-9). Similarly \D matches for all non digit values.

\s matches for all whitespace values (spaces, tabs, line breaks). You can probably guess that \S matches all non whitespace values.

let string = "I am 31!";

// Alphanumeric and non alphanumeric
let regex = /\w/ig;
let antiRegex = /\W/ig;

string.match(regex);  // ["I", "a", "m", "3", "1"]
string.match(antiRegex);  // [" ", " ", "!"]

// Digit and non digit
let regex = /\d/ig;
let antiRegex = /\D/ig;

string.match(regex);  // ["3", "1"]
string.match(antiRegex);  // ["I", " ", "a", "m", " ", "!"]

// Whitespace and non whitespace
let regex = /\s/ig;
let antiRegex = /\S/ig;

string.match(regex);  // [" ", " "]
string.match(antiRegex);  // ["I", "a", "m", "3", "1", "!"]

Conclusion

That's really all there is to basic regex. With the tools I talked about here you can begin to mix and match to start creating your own pattern matches. There are some a few more concepts that are a bit more complicated, and if you'd like to continue exploring the topic of regex I'd encourage you to take a look at them for even more powerful pattern matching.

Resources for more learning:
Learn Regular Expressions (Regex)
RegExr: Learn, Build, & Test RegEx

React Hooks

Kevin Downs — Tue, 15 Sep 2020 02:17:22 +0000

This week I would like to take a look into a relatively new feature introduced to React: Hooks. If you are anything like myself, you may have been working with React for a bit and heard people talking about Hooks but never really looked into what they actually were. Maybe you filed them under that little folder in your brain labeled "I should probably check that out at some point" and went along working on the projects you were already involved with. Well the day came where I finally decided to double click that little folder and take a look, and I thought why not walk through it for others that are just clicking that little folder too.

What's a Hook?

Hooks are an addition made in React 16.8. In the simplest terms, they are functions that allow you to use state and life-cycle features inside functional components. They do not work inside of classes and are intended to allow you to use React without classes. React provides a few built-in hooks like useState and useEffect, but also allow you to create custom hooks. This makes it easy to share hooks between components and even to reuse stateful logic without the need to change your component hierarchy.

There are two simple rules that you need to know about and follow when using hooks:

Only call Hooks at the top level.
Only call Hooks from React functions.

The two rules echo the same principle that Hooks are strictly for use within functional React components at the top level. This means that you cannot use hooks inside loops or conditions somewhere in your class and that you cannot use them within class components. (Though this may sound a bit self explanatory as the entire idea behind hooks is to not use class components) They cannot be called within regular JavaScript functions, but can be called from custom hooks and of course inside functional components.

Now that we have an idea of what Hooks are and what their purpose is, I'd like to show how one of the most used built in hooks can be used: useState.

`useState`

For this example, I'm going to include some example code from the React docs that explain the usage of useState. You will see the same class in a traditional class component, and then the same class as a functional component using Hooks to gain access to the state functionality.

// Example class component

class Example extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.setState({ count: this.state.count + 1 })}> Click me </button>
      </div>
    );
  }
}

// Example functional component using Hooks

import React, { useState } from 'react';

function Example() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  );
}

You can see that the two look pretty similar. The difference here is that we can avoid having to create a class component and dealing with the constructor to gain access to state by importing the useState Hook in a functional component. Let's take a look at how it works.

First, we import the useState hook:

import React, { useState } from 'react';

Now normally in a class component we would go into the constructor function and assign this.state to an object value of the data we want to have in our state. With Hooks though, we are able to call useState to get the same effect. You may be a bit confused by the odd square bracket syntax so let's break down what exactly is going on here.

The code: const [count, setCount] = useState(0);

useState declares a "state variable" that will be preserved between function calls in the same way state is preserved in a class component. It takes in an initial value as an argument and returns a pair of values: the current state and a function that updates it. We use array destructuring here to be able to use those returned values directly in our component. You can name these variables whatever you would like, but using the pattern "thing", "setThing" helps to keep things clean and organized.

You are able to repeat this for as many state variables as you might need. Here is an example:

function ExampleWithManyStates() {
  // Declare multiple state variables!
  const [age, setAge] = useState(42);
  const [fruit, setFruit] = useState('banana');
  const [todos, setTodos] = useState([{ text: 'Learn Hooks' }]);

You can also see in the full component example above we can use these variables directly in our component code. We can just use count to get its current values and use setCount by passing in the value that count should be updated to.

Conclusion

React Hooks are a great way to reduce the use of class components in your code and allow for a lot of flexibility in terms of extracting and reusing bits of code that you otherwise would not be able to. There are a host of other Hooks as well that provide even more functionality such as useEffect which allows you to avoid using a lot of different life-cycle methods. If you found this write up interesting, go ahead and take a look over at the React docs. They provide a great wealth of information on different ways you can start using Hooks in your React projects!

If you liked this post, feel free to follow me elsewhere on Twitter, Github, or LinkedIn. Happy Coding!

Forem: Kevin Downs

Creating a User Login System - Ruby on Rails

Let's Get Started!

User Model

Sessions

Helpers

Routes

Controllers

Views

Conclusion

Personal Project - Trivia App

Models

Users

Game

Categories

Questions

Conclusion

Using React and Rails Together

Getting Started

Configuring Gems

Installation and Setup

Component Time

Conclusion

Building A Basic Discord Bot

Setup

Let's Get to Coding!

OK, Can We Actually Code Now?

TaDa! Beep Boop 🤖

Creating my first Chrome Extension

Why and What Did I Create?

Manifest File

Popup Menu

Text Replacement

Conclusion

Chrome Extensions - Manifest File

What is a Manifest File

Required Fields

manifest_version

name

version

Recommended Fields

default_locale

description

icons

Pick one (or none)

browser_action

default_icon

default_title

default_popup

browser_action Example

page_action

Optional Fields

Conclusion

Iterating in JavaScript

What is Iteration?

for

while

do...while

Conclusion

Array Methods for Iteration in JavaScript

forEach

map

includes

indexOf

find

filter

sort

reduce

Conclusion

Classes in JavaScript

What is a Class in JavaScript?

Class Body

constructor

Methods

Conclusion

React Native: Basic Components

View

Text

Image

TextInput

`manifest_version`

`name`

`version`

`default_locale`

`description`

`icons`

`browser_action`

`default_icon`

`default_title`

`default_popup`

`browser_action` Example

`page_action`

`for`

`while`

`do...while`

`forEach`

`map`

`includes`

`indexOf`

`find`

`filter`

`sort`

`reduce`

`constructor`

`View`

`Text`

`Image`

`TextInput`

`ScrollView`

Methods - `test()` and `match()`

Flags - `i` and `g`

Wildcard - `.`

Multiple Characters - `[]`, `-`, `+`, `*`, and `{}`

Shorthand - `\w`, `\d`, and `\s`

`useState`