Forem: Joe Christensen

Scheduling tasks in rails with the Whenever gem

Joe Christensen — Thu, 30 Sep 2021 17:25:21 +0000

How do we schedule tasks?

Have you ever wanted to schedule tasks for your website? Like removing user accounts that are over a certain age of inactivity? Or adding money to a user's account once a week? How about sending automated newsletters daily? Well, a commonly used utility that handles this is the cron.

What is cron?

The cron is a command-line utility job scheduler. It allows users to set up tasks, also known as cron jobs, generally in the form of commands or scripts, that will run automatically on defined intervals. But how does it work exactly?

Well, you define cron jobs using a very specific syntax in a file called a cron table, primarily known as a crontab.

Note: The deploying platform Heroku does not implement cron and the whenever gem. If you wish to schedule tasks on Heroku, use their Heroku Scheduler add-on found here.

The jobs follow this given syntax:

# ┌───────────── minute (0 - 59)
# │ ┌───────────── hour (0 - 23)
# │ │ ┌───────────── day of the month (1 - 31)
# │ │ │ ┌───────────── month (1 - 12)
# │ │ │ │ ┌───────────── day of the week (0 - 6)
# │ │ │ │ │                       
# │ │ │ │ │
# │ │ │ │ │
# * * * * * <command to execute>

As you can see, there are five asterisks that correspond to minutes, hours, day of the month, month of the year, and day of the week. After defining these parameters, you write the cron job that you want to run.

An example of a cron job looks like this:

1 0 * * * printf "" > /var/log/apache/error_log

What exactly is this cron job doing? Well, on the second minute of the first hour of each day, it prints an empty string the the error_log file at the given file path. This essentially clears the error_log file once a day.

There are also useful specifying commands built into cron like /n and ,. /n means "every n-th interval" and , allows you to specify multiple time intervals.

Lets look at an example using these:

*/5 1,2,3 * * * echo hello world

So, for the minutes, this cron job has */5 and for the hours, it has 1,2,3. This means that the cron job will run and print "hello world" every fifth minute of the first, second, and third hour.

This equates to it running at 1:05, 1:10, 1:15, so on and so forth for the hours 1, 2, and 3.

Whenever Gem

So now that we know a little bit about cron jobs, how do we use them with our rails backend? Well, lucky for us, there's a ruby gem that sets up cron and translates ruby code into a cron table for us. That gem is the Whenever gem.

Setting Up

To set up the whenever gem, you must first install it or add it to your GemFile.

To install it type:

gem install whenever

or add this to your GemFile:

gem 'whenever', require: false

Once you have installed the whenever gem, you need to create a special ruby file called schedule.rb that will house our crontab.

Do so by running this command:

bundle exec wheneverize .

If successful, you will find a schedule.rb file inside of your config folder.

Now, before starting to add tasks, it is good to add these lines to the top of your schedule.rb:

#Creates a output log for you to view previously run cron jobs
set :output, "log/cron.log" 

#Sets the environment to run during development mode (Set to production by default)
set :environment, "development"

The first command is incredibly helpful as it creates a log of all previously run cron jobs. This is the best way to check and see what the cron is doing. If there are errors, check there. If you're wondering if a job is running, check there!

The second command sets the crontab to run while in the development environment. It is good to have while setting up your cron jobs to make sure everything is working fine.

Job Syntax

The Whenever gem provides some very straightforward and easy syntax for creating cron jobs. Instead of specifying a bunch of information and having asterisks in place, you can just create a code block to run at a given interval.

An example of this is like so:

every 1.minute do
   #Tasks defined here will run once a minute
end

every 3.hours do
   #Tasks defined here will run once every 3 hours
end

Note: The quickest interval you can define is 1 minute.

To get a full list of possible intervals, check the whenever gem's documentation here

Job Types

So, we know how to define the intervals that we want the tasks to run on, but how do we define the tasks themselves? The whenever gem provides three useful job types that we use to define our tasks.

The first type is the `runner`

The runner allows access to a database table's model. You can define a class method in the model.rb file for a specific table, and then access and run it using the runner job like so:

every 1.minute do
   runner "MyModel.some_method"
end

The second type is `rake`

Like the name implies, rake is used to run a predefined rake task. First, you must create a rake task using the command rails g task <NAMESPACE> <TASKNAME> like so:

rails g task example say_hello

This will generate a task file in the lib/tasks folder called example.rb

Set up the example task to print "hello world" to the console like so:

namespace :example do
  desc "says hello to the world"
  task say_hello: :environment do
     puts "hello world"
  end

end

Now, go back to your schedule.rb file and add this task to the interval block like so:

every 1.minute do
   runner "MyModel.some_method"
   rake "example:say_hello"
end

Every 1 minute, the example:say_hello task will now run and print "hello world" to the console.

The third type is `command`

Again, this type is very straightforward. The command job type will run a given command at the defined interval

It is set up like so:

every 1.minute do
   runner "MyModel.some_method"
   rake "example:say_hello"
   command "/usr/bin/this_is_a_command"
end

The command found at that file path will now run every 1 minute.

The whenever gem also lets you define your own job types. Read the documentation to find out how.

Updating crontab

Every time you make a change to the schedule.rb file, you must update the crontab with the newly changed file in order to implement the changes.

You can do so by running this command:

whenever --update-crontab

To make sure it worked, run this to view all current cron jobs:

crontab -l

You can also clear your crontab by running this:

whenever --clear-crontab

Once you have your tasks defined and your crontab updated, keep an eye on your cron.log file to view the changes every time a cron job runs.

Conclusion

Cron is a very useful tool that allows for defining and running scheduled tasks. The Whenever gem allows for easy manipulation of the Cron from a rails backend.

This was just a brief overview of whats all available with the Whenever gem. To learn more, check out the documentation here.

To learn more about the Cron, check out the wiki here and a useful guide here.

If you want to learn how to set up scheduled tasks using Heroku, check out their scheduler's documentation here.

Nested Routing in react-router-dom

Joe Christensen — Wed, 15 Sep 2021 23:53:45 +0000

What is react-router-dom?

Ever wondered how websites have custom paths? How come you can type in https://dev.to/readinglist and your browser knows to bring you directly to your dev.to reading list? Well, the website you're navigating to, in our case dev.to, has set up some custom routes. They either have client-side or server-side routes. Client-side routes are generally used in single-page applications. They allow for routing capabilities without needing multiple html pages. Server-side routes are used in multi-page applications, where each route returns a new html page with content.

If you're using React to build your webpage and you want to accomplish something like that, then you'll want to turn your attention to react-router-dom! React-router is a node module that makes use of the React component structure to add client-side routing functionality to a webpage.

Going forward on this blog, I'm going to assume that you have a basic understanding of Switches and Routes in react-router. If you'd like to read up on them before continuing, you can find the documentation here

What is nested routing?

Nested routing is the act of "burying" routes inside each other. Continuing our dev.to example from before, here is an example of a nested route:

https://dev.to/readinglist/archive

First, you route to /readinglist then you route to /archive while inside /readinglist, providing more specific information while still being inside that scope.

Nesting routes helps to create more organized, and clear routes for both the developers and clients to make use of. It also helps practice some separation of concerns. You could have a /readinglist that brings you to your reading list and a /archive that brings you to your reading list archive, but what happens when you want to implement a post archive? The route /archive is already taken, so you'd have to name the new route /postarchive or something, making the routes messy and hard to follow. By nesting them, you can have /readinglist/archive and /post/archive together.

Nested routing in react-router-dom

So, now we know that we know the advantages of nesting routes, how exactly do we do it in react-router-dom?

Lets set up a basic dev.to route layout first:

//App.js

import { 
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/posts">
          <p>Posts</p>
        </Route>
        <Route path="/readinglist">
          <p>Reading List</p>
        </Route>
        <Route exact path="/">
          <p>Homepage</p>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

This route layout has three paths currently:

Path	Web Display
`/posts`	Posts
`/readinglist`	Reading List
`/`	Homepage

We can set up nested routing a few ways.

We could add /readinglist/archive by adding a route directly like this:

//App.js
//Inside the Switch

<Route path="/readinglist/archive">
  <p>Reading List Archive<p>
</Route>

Although this would work, what do we do if we want to have a lot of routes nested inside /readinglist? We'd have to add each one to our App.js, quickly making it cluttered and hard to follow. This is why I suggest creating a custom component to store routing logic instead.

Routing logic component

Lets start by creating a custom component to store the routing logic for /readinglist:

//ReadingListRoutes.js

import { 
    Switch,
    Route
} from 'react-router-dom';

function ReadingListRoutes() {

    return (
        <Switch>
            <Route exact path="/readinglist/archive">
                <p>Reading List Archive</p>
            </Route>
            <Route path="/readinglist">
                <p>Reading List</p>
            </Route>
        </Switch>
    )
}

export default ReadingListRoutes;

We've now created our /readinglist route logic component, but we still have to add it to our actual routes! Lets refactor our App.js and do just that:

//App.js

import { 
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

import ReadingListRoutes from './ReadingListRoutes';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/posts">
          <p>Posts</p>
        </Route>
        <Route path="/readinglist">
          <ReadingListRoutes />
        </Route>
        <Route exact path="/">
          <p>Homepage</p>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

As you can see, we now have it set up to where the path /readinglist/archive first navigates to our ReadingListRoutes component. Once in our ReadingListRoutes component, it looks for the route /readinglist/archive. If it finds it, it displays Reading List Archive on the webpage.

Our routes table now looks like this:

Path	Web Display
`/posts`	Posts
`/readinglist`	Reading List
`/readinglist/archive`	Reading List Archive
`/`	Homepage

Dynamic Routes

So now we've learned how to do nested routing, but how exactly can we define dynamic routes? Lets take a look at the dev.to url to one of my blogs:

https://dev.to/christensenjoe/classes-in-javascript-f9g

This url first routes to my username, then my blog title (separated by hyphens instead of spaces). But how exactly is dev.to doing this? It cant be hard coding every single possible username as a route.

Well, react-router-dom also provides a nice way to dynamically create routes.

Lets add a basic route to /(username) that will take someone to their custom homepage. I'll go ahead and create a UserRoutes logic component to handle some nested route functionality too:

//App.js

import { 
  BrowserRouter as Router,
  Switch,
  Route
} from 'react-router-dom'

import ReadingListRoutes from './ReadingListRoutes';
import UserRoutes from './UserRoutes';

function App() {
  return (
    <Router>
      <Switch>
        <Route path="/posts">
          <p>Posts</p>
        </Route>
        <Route path="/readinglist">
          <ReadingListRoutes />
        </Route>
        <Route path="/:username">
          <UserRoutes />
        </Route>
        <Route exact path="/">
          <p>Homepage</p>
        </Route>
      </Switch>
    </Router>
  );
}

export default App;

//UserRoutes.js

import { 
    Switch,
    Route
} from 'react-router-dom';

function UserRoutes() {

    return (
        <Switch>
            <Route exact path="/:username/:post_title">
                <p>User Post</p>
            </Route>
            <Route path="/:username">
                <p>User Homepage</p>
            </Route>
        </Switch>
    )
}

export default UserRoutes;

By adding the /:username and /:username/:post_title routes, we can now dynamically create new routes. If you navigate to /joe, you'll be met with the text User Homepage, and if you navigate to /joe/new-post, you'll find text User Post.

Our routes now look like:

Path	Web Display
`/:username`	User Homepage
`/:username/:post_title`	User Post
`/posts`	Posts
`/readinglist`	Reading List
`/readinglist/archive`	Reading List Archive
`/`	Homepage

useParams

We've now dynamically created new routes, but how can we take advantage of them to create custom pages?

First, lets start by creating two new components, UserProfilePage and UserPostPage, and connect them up to our UserRoutes component:

//UserProfilePage.js

function UserProfilePage() {
    return (
        <h1>This is ___'s profile</h1>
    )
}

export default UserProfilePage;

//UserPostPage.js

function UserPostPage() {
    return (
        <h1>This is ___'s post: ___</h1>
    )
}

export default UserPostPage;

//UserRoutes.js

import { 
    Switch,
    Route
} from 'react-router-dom';

import UserPostPage from './UserPostPage';
import UserProfilePage from './UserProfilePage';

function UserRoutes() {

    return (
        <Switch>
            <Route exact path="/:username/:post_title">
                <UserPostPage />
            </Route>
            <Route path="/:username">
                <UserProfilePage />
            </Route>
        </Switch>
    )
}

export default UserRoutes;

Now that we have separate pages, we can make use of a custom react-router-dom hook called useParams(). useParams allows us to grab any params from the current route at the time of invocation. For example, if we went to /:username/:post-title, we could grab the params username and post-title. These variables would store whatever we are currently routed to. So if we're routed to /joe/new-post, then username stores the string joe and post-title stores the string new-post.

Let's update our UserProfilePage and UserPostPage to make use of the useParams() hook to add custom messages:

//UserProfilePage.js

import {
    useParams
} from 'react-router-dom';

function UserProfilePage() {
    const { username } = useParams();
    return (
        <h1>{`This is ${username}'s profile`}</h1>
    )
}

export default UserProfilePage;

//UserPostPage.js

import {
    useParams
} from 'react-router-dom';

function UserPostPage() {
    const { username, post_title } = useParams();
    const parsedTitle = post_title.split("-").join(" ")
    return (
        <h1>{`This is ${username}'s post: ${parsedTitle}`}</h1>
    )
}

export default UserPostPage;

As you can see, we're using useParams to get the username and post_title. We then use them to show some custom messages to our user based on what the put in. On the UserPostPage, we're also mutating our post_title to remove the dashes and replace them with spaces.

Now, if someone navigates to /joe/my-new-post they'll be met with the message This is joe's post: my new post.

Conclusion

React-router-dom is a great node package for React that allows for easy client-side routing. If you're creating a single-page web application, then definitely consider using it to implement static, nested, and dynamic routes. If you'd like to learn more, take a look at the docs here

Using Breakpoints in MaterialUI

Joe Christensen — Fri, 03 Sep 2021 16:52:41 +0000

What are breakpoints?

Have you ever been styling a webpage, just to notice that your text cuts off the screen when the browser window shrinks? Or that the webpage is a mess and hard to use from a phone's browser? Well, many other developers noticed the same thing and came up with the concept of breakpoints.

Breakpoints are pixel values for a specific webpage. Used in software development, they help us create more responsive webpages. So how exactly do they work? Well, they're generally used to provide CSS conditions for elements. We can say to a css element: "Style my element this way, but once the webpage pixels pass a certain threshold, change to styling this way." By doing this, we can make our webpages more responsive, meaning they respond and update according to the size of our browser.

As an example, we can set up some conditional CSS to shrink the font of some given text and apply word wrap once the window shrinks to a certain level. Now, the text wont cut off the screen, but will instead wrap and be more easily readable.

Breakpoints in Material UI

So we now know what breakpoints are, but how are they used in Material UI? Well, Material UI actually does a lot of the hard stuff for us. Firstly, they set up default breakpoint values as part of their default theme. These values, being extra small (xs), small (sm), medium (md), large (lg), and extra large (xl), all hold a unique pixel value that corresponds to a specific window size like so:

Size	Variable Name	Value
extra small	xs	`0px`
small	sm	`600px`
medium	md	`960px`
large	lg	`1280px`
extra large	xl	`1920px`

Material UI uses breakpoints a lot, specifically with components like Grids. If you've used a grid before, you know that the items take in props that correspond to a given breakpoints variable name and a number out of 12, like xs={12} sm={6}. These props are telling the grid component that when the window is above breakpoint small, or 600px, the grid item takes up half of a row (since rows are 12 columns in MUI). Once the window shrinks to above the extra small breakpoint but below the small one, or 0px-599px, the grid item will take up an entire row.

Material UI's default breakpoint values are also changeable when creating a custom Material UI theme. Look at the default theme documentation here to see exactly where you need to override.

Material UI Media Queries

Now we know how Material UI characterizes breakpoints and uses them in their components, but what about that conditional CSS that we were talking about earlier? Well, Material UI also have some custom media queries that can be used to render conditional css. Generally used inside of a makeStyles function, it can responsively render different CSS based on breakpoint values.

Lets start by setting up a basic makeStyles function for some text:



import { makeStyles, useTheme, Typography } from '@material-ui/core'

const useStyles = makeStyles(theme ({
  textExample: {
    fontSize: '4rem',
    texAlign: 'center'
  }
})

function StartingPage() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <Typography
      className={classes.textExample}
    >
      This is an Example
    </Typography>
  );

}

This code will render a line of text in the center of our page and give it a font size of 4rem. Here's how it looks:

Now, let's start adding some conditional CSS!

Theme.breakpoints.up

theme.breakpoints.up('variable') is a Material UI helper that targets a screen size greater than and equal to a given variable. So theme.breakpoints.up('md') targets the screen size from when it is 960px or more.

We can use it in our makeStyles function to conditionally render css like shown:



import { makeStyles, useTheme, Typography } from '@material-ui/core'

const useStyles = makeStyles(theme ({
  textExample: {
    fontSize: '4rem',
    texAlign: 'center',
    [theme.breakpoints.up('md')]: {
       color: 'red'
    }
  }
})

function StartingPage() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <Typography
      className={classes.textExample}
    >
      This is an Example
    </Typography>
  );

}

This piece of conditional css will change the color of our text to red if the window size is medium or larger. Lets test it out:

Small Window

Medium Window

Theme.breakpoints.down

As you could probably guess by the name, this helper does the exact opposite of theme.breakpoints.up. It targets a screen size less than and equal to a given variable. So using theme.breakpoints.down('sm') targets a screen size that is less than and including 600px.

Lets add it to our styling:



import { makeStyles, useTheme, Typography } from '@material-ui/core'

const useStyles = makeStyles(theme ({
  textExample: {
    fontSize: '4rem',
    texAlign: 'center',
    [theme.breakpoints.up('md')]: {
       color: 'red'
    },
    [theme.breakpoints.down('sm')]: {
      fontSize: '1rem'
    }
  }
})

function StartingPage() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <Typography
      className={classes.textExample}
    >
      This is an Example
    </Typography>
  );

}

This code is going to change our font size from 4rem to 1rem if the window is smaller than or equal to 600px. Lets test it out!

Small Window

Medium Window

Theme.breakpoints.between

Again, this helper is a lot like the previous two. It takes in two variables and targets the screen starting at the first variable and up to, and including, the second variable. So theme.breakpoints.between('sm', 'md') is going to target the screen from 600px to 960px.

Lets remove our previous breakpoints and add this one to our code:



import { makeStyles, useTheme, Typography } from '@material-ui/core'

const useStyles = makeStyles(theme ({
  textExample: {
    fontSize: '4rem',
    [theme.breakpoints.between('sm', 'md')]: {
       color: 'blue'
    }
  }
})

function StartingPage() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <Typography
      className={classes.textExample}
    >
      This is an Example
    </Typography>
  );

}

Now, our text will change from black to blue when our window is between 600px and 960px. Lets test it out:

Extra Small Window

Small Window

Medium Window

Large Window

Theme.breakpoints.only

And once again, this helper has a pretty self explanatory name. The theme.breakpoints.only helper only targets the screen when it is within the boundaries of a given variable. So theme.breakpoints.only('sm') only targets the screen when it is greater than 600px and less than 960px (which is the threshold for 'md').

Let's change our code around to incorporate it!



import { makeStyles, useTheme, Typography } from '@material-ui/core'

const useStyles = makeStyles(theme ({
  textExample: {
    fontSize: '4rem',
    [theme.breakpoints.only('sm')]: {
       color: 'blue'
    }
  }
})

function StartingPage() {
  const theme = useTheme();
  const classes = useStyles(theme);

  return (
    <Typography
      className={classes.textExample}
    >
      This is an Example
    </Typography>
  );

}

This code is now going to change our text color to blue only when it is greater than 600px and less than 960px. Let's test it out!

Extra Small Window

Small Window

Medium Window

useMediaQuery Hook

Finally, we have the useMediaQuery hook. This hook takes in one of our previously defined helpers and returns a boolean value. If the window is currently targeting the screen, the hook returns true, and if it isn't the hook returns false. An example of this hook goes like this: useMediaQuery(theme.breakpoints.only('sm'). If the window size is between 600px and 959px, the hook returns true, otherwise it returns false.

So why is this useful? Well, using this hook, we now have a way to responsively render entire components. Say you wanted to display a table with a bunch of transaction information. The table has columns for name, description, date, and amount. Now, when you have a large screen thats all fine, but when the screen size shrinks, the information on the table will start to get messed up. Either it will cut off the screen or it will wrap poorly and be ugly to look at and hard to read. Thats where our useMediaQuery hook comes in. We don't really need to see the description of the transaction when the table starts to shrink, so why don't we responsively render that so it disappears when our screen shrinks below 960px. By using the theme.breakpoints.up('sm') helper with useMediaQuery, we can have it return true when the window is larger than or equal to 960px and false when it's smaller. We can then use this to conditionally render our descriptions, like so:



import {
    useTheme,
    useMediaQuery,
    Paper,
    Table,
    TableContainer,
    TableHead,
    TableBody,
    TableRow,
    TableCell
} from '@material-ui/core'

function StartingPage() {
  const theme = useTheme();
  const isSmallOrLess = 
  useMediaQuery(theme.breakpoints.up('md'));

    const rows = [
        { name: 'Banana', description: 'Bought at the target 
          on sale for half off', amount: '2.25', date: 
          '7/07/21' },
        { name: 'Apple', description: 'Bought fresh from the 
          farmers market!', amount: '1.75', date: '8/23/21' 
          },
        { name: 'Orange', description: 'Picked right off the 
          tree! Free fruit!', amount: '0.00', date: 
          '9/02/21' },
        { name: 'Mango', description: 'Bought at the grocery 
          store. Why are mangos so expensive!?!', amount: 
          '8.25', date: '9/12/21' }
    ];

    return (
        <TableContainer component={Paper}>
            <Table>
                <TableHead>
                    <TableRow>
                        <TableCell>Name</TableCell>
                        {   isSmallOrLess ?
                            <TableCell>Description</TableCell>
                            :
                            null
                        }
                        <TableCell>Amount</TableCell>
                        <TableCell>Date</TableCell>
                    </TableRow>
                </TableHead>
                <TableBody>
                    {rows.map(row => (
                        <TableRow>
                            <TableCell>{row.name}</TableCell>
                            {isSmallOrLess ?
                                <TableCell>{row.description}</TableCell>
                                :
                                null
                            }
                            <TableCell>{row.amount}</TableCell>
                            <TableCell>{row.date}</TableCell>
                        </TableRow>
                    ))}
                </TableBody>
            </Table>
        </TableContainer>
    );
}

This code is building out a basic table and loading it with four rows of data. Although it may look overwhelming, the important places to pay attention to are where we are conditionally rendering our component. Up near the top we are using our useMediaQuery hook and storing that value in a constant called isSmallOrLess. That constant is then being used in a ternary expression when rendering the description parts of our header and body. What this will do is render the component if isSmallOrLess is true, otherwise it will return null and not render anything.

Let's try it out!

Small Window

Medium Window

Conclusion

Breakpoints are a great way to make our webpages more responsive and user-friendly, but like any css, it can be a hassle to set up. Material UI, once again, makes everyone's lives a little easier by providing a bunch of custom breakpoints, helpers for conditionally rendering css, and a hook for conditionally rendering components.

If you would like to learn more about using breakpoints in Material UI, the documentation page here is a great source of information. There is also a useful stack overflow page here that gives a clear and concise overview on the subject.

Good luck and happy coding!

RegEx Basics in Ruby

Joe Christensen — Fri, 20 Aug 2021 17:34:57 +0000

What is Regex?

Regular expression, or RegEx, is a a sequence of characters that specify some form of search or filtration pattern. Created in the 1950s, RegEx is a way for programmers to quickly and easily search, validate, and filter strings of characters. Using RegEx, a multiple line, complex, validation function can be condensed into a smaller pattern of characters. Due to its shown usefulness, multiple programming languages have some form of RegEx implementation.

As an example, let's look at emails. When someone signs up for a new account on a website, many websites ask for an email. If the email is invalid, say its missing an @ or .com, the website will give the user an error, stating such. But how does the website actually check that the email is invalid? Well, a poor programmer would have to create an incredibly complex validation function that splits the string that the user typed in up, checks every part, makes sure the @ and .com are present and in the right positions, and so on. Now imagine having to write a function like this every time you needed user input to be validated. That's where RegEx really shines. These crazy, multi-line functions can be condensed into a small regular expression.

One of the major downsides of RegEx, however, is also due to its ability to condense lots of code into a small expression. RegEx is confusing! A regular expression looks like a random string of characters all mushed together, making it really daunting for new programmers to try and tackle learning it. In this article, we'll go over some of the more useful parts about Ruby's RegEx.

Syntax

There is a lot going on in any given RegEx expression, but there is a method to the madness! We'll be going through some of the basics of Ruby RegEx expressions to hopefully see some of that method. As you're following along Rubular is a great tool to use. It allows you to write your own RegEx expressions to manipulate a given string. It also has a handy list of useful RegEx expressions.

Here is a basic RegEx expression that finds every letter ranging a-f in a given string:

/[a-f]/

Go ahead and try it out in Rubular!

Delimiters

For most programming languages, Ruby included, a RegEx expression normally starts and ends with the delimiters /. These backslashes generally help identify the beginning and end of a regular expression, although there may be some cases where there is more information immediately following the second backslash.

In our example, you can see the delimiters at the start and end of the expression. This lets the compiler know that everything between these two characters is a RegEx expression.

Atoms and Quantifiers

Starting from the smallest part, an atom is a single point within a RegEx expression that is used to try and manipulate a given string. These atoms have something called quantifiers that are used to show how many times, where, or what, exactly, the atoms are supposed to match on the given string.

Metacharacters

A step up from atoms are metacharacters. These are expressions built into RegEx that help group expressions, while also making use of atoms and quantifiers.

In our example expressions, the [] is actually a metacharacter. If you refer back to your Rubular cheat sheet, you can see that [] with characters inside tries to find matches of that single character in the string.

As an example, the RegEx /[a]/ will try to find every instance of "a" in the string.

Our expression is a little more special. We're using something called a range, which is a way to tell RegEx that we want any single character or digit that matches between two characters. Our range [a-f] is asking RegEx to find a, b, c, d, e, or f anywhere in our test string.

This also works for digits. Doing [0-9] is the same as looking for every instance of 0,1,2,3,4,5,6,7,8, or 9.

One final handy thing about this metacharacter is the ability to have multiple ranges.

Looking back to our example, /[a-f]/ only highlights the lowercase characters a-f. What if we wanted every character, both lowercase and uppercase, in that range to be selected? Well, then we would combine two ranges like so: /[a-fA-F]/. As you can see, we've added a new range [A-F] to our original one, using the same set of brackets. This will say to look for any characters from the range a-f or from the range A-F.

The [] is only one metacharater, and there are many, many more that are commonly used by RegEx. As this was only a light overview, I strongly suggest experimenting with them on your own using the Rubular cheat sheet.

Regex With Ruby Methods

So, we now know a little about writing RegEx patterns. Now what? How can this actually be used in code? Well, Ruby has a few string methods where the use of RegEx fits perfectly to filter, find, and validate strings.

Scan

The first method is the scan method. Calling .scan() on a string returns an array of all items that match the given input. This is an incredibly useful way to filter through a string, only retaining the data that you want.

As an example, say you have the string "bat cat dot hat mat eat pat sat bit hit split " and you want to filter out every word that isn't 3 letters long and ends in "at". The easiest way to do this would be using the .scan method like so:

"bat cat dot hat mat eat pat sat bit batter hit split ".scan(/\w+at/)

# Returns ["bat", "cat", "hat", "mat", "eat", "pat", "sat", "bat"]

# If you want it as a string again, just do .join

The .scan method is filtering through the string, word for word, using the given RegEx pattern. Our RegEx pattern starts with the metacharacter \w, which looks for any word character (letter, number, or underscore) at the start of each word. The last part of our expression, the at, just looks for any instance of "at" in each word in our string. Combining them together with the +, we get an expression that looks through each word, makes sure the first letter is a word character, and then makes sure that the following two letters are "at".

One important thing to notice is the last character in the returned array. It's "bat", which the .scan method grabbed from the "batter" word. Since our ruby expression only stated that the first letter be a valid word character and the following two letters be "at", nothing stops the scan from just grabbing that valid section from the word.

Match

The second method is the match method. Match returns the first item in a string (in the form of a MatchData object) that matches a given RegEx pattern. More often than not, the Match method is used for input validation. You check to see if a sting contains a given RegEx pattern. If the return value is nil, then the given string doesn't pass the given RegEx pattern.

As an example, say you have a phone number input on a website and you want to make sure that people are entering 10 numbers. You would do something like this:

"1234567891".match(/^\d{10}$/)
# Returns a valid MatchData object containing the string

"123".match(/^\d{10}$/)
#Returns nil

As you can see, the first string passed has valid numbers, so an object is returned. The second string doesn't, so nil is returned. Using this information, you can easily set up a validation check and response system.

What exactly is the RegEx pattern that we're using? Well, to start with, the ^ symbol means "start of line" and the $ symbol means "end of line". By having them at the start and the end of the expression, we're saying that the given input must match our expression EXACTLY, with no extra characters at the start or end of it. Moving on, the \d means "any digit", or any number 0-9. It's roughly the same as doing [0-9]. Finally, the {10} is saying "exactly 10 of whatever is to the left of me". Since the \d is to the left, it's saying "exactly 10 \d", or "exactly 10 digits". All in all, our pattern is asking for exactly 10 digits to be input with nothing before or after it.

Grep

Finally, another useful method is Grep. Grep, however, is an Array enumerable method, not a string method. What .grep() does is take in an array of strings. It will then return a filtered array of strings, comparing each value in the original array to a given RegEx pattern.

Carrying on from our previous example, say you have a large array of phone numbers, and you only want the valid ones. Using .grep(), you can filter through the array and get back only the valid numbers like so:

["1234567891", "3216549871", "3456215435", "12", "65435", "9328456214"].grep(/^\d{10}$/)

#Returns ["1234567891", "3216549871", "3456215435", "9328456214"] Only the valid phone numbers

As you can see, .grep() is an incredibly useful filtering method for arrays of data.

Closing Statements

In the end, RegEx is an incredibly powerful, but daunting, tool. As a programmer, you should try to at least familiarize yourself with the basics of RegEx, but don't worry too much about mastering it. If there is a common validation, or filtering expression that you need, like email validation, then someone has probably already created it and shared it online.

As you try to get more familiar with RegEx, be sure to use Rubular, Regexr, or some other online source. Experimenting and messing around with RegEx is by far the best way to learn it. Good luck!

Classes in JavaScript

Joe Christensen — Mon, 19 Jul 2021 04:48:06 +0000

What are Classes?

A class is an object-oriented programming concept that is built into many object-oriented programming languages. Specifically, a class is a blueprint for creating objects, initializing data, and defining functions. It is a way of organizing information about a type of objects in a reusable format. By using a class, a programmer can create specific instances of said class and access class-specific data and functions.

As an example, say a you wanted to create cat, dog, and bunny objects. You could create each individually, copying near identical code for each new object, or you could create a template called animal. Then, you could simply create your cat, dog, and bunny objects by passing special information into the animal template. Classes are this concept of using templates to create different but similar objects without having to re-type code.

Classes in JavaScript

With the update to ES6 in 2015, JavaScript has also gained class functionality. Although it is not as fleshed out and detailed as in other object-oriented languages, it is still there none-the-less.

In JavaScript, we declare the creation of a new class using the class keyword followed by a capitalized class name and a pair of curly brackets as shown:

class Animal {
}

In order to actually make use of this class, however, we need to make an instance of it. We do this by creating a variable and initializing it to our class using the new keyword like so:

class Animal {
}

let dog = new Animal();

Now we have dog, an instance of our animal class. But... what exactly can we do with it? Well, what kind of specifications does every animal have? A name, species, and age. In order to add this information to our animal class, we must create a constructor like so:

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }
}

let dog = new Animal("Spot", "Dog", 4);

This constructor takes in the information given when initializing a new instance of the class (where we create our Dog object), and sets our Animal's class-specific variables, or properties, to it. Let's access and log some of our Dog's data by using dot notation.

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }
}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name) //returns "Spot"
console.log(dog.species) //returns "Dog"
console.log(dog.age) //returns 4

Now lets add a class-specific function that makes use of our class data to create a special message.

NOTE: Class-specific functions are called methods and don't require the function keyword.

class Animal {
  constructor(name, species, age) {
  this.name = name;
  this.species = species;
  this.age == age;
  }

  cutePet() {
  return `Aww, your ${this.species} is so cute!`;
  }

}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.cutePet()); //returns "Aww, your Dog is so cute!"

Once initialized, an instance of a class can access its methods the same way it accesses class properties, by using dot notation. But now that we have a basic class with some variables and methods, we can test the real usefulness of classes.

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);
let bird = new Animal("Feathers", "Bird", 3);
let cat = new Animal("Mochi", "Cat", 2);

console.log(dog.cutePet()); //returns "Aww, your Dog is so cute!"
console.log(bird.cutePet()); //returns "Aww, your Bird is so cute!"
console.log(cat.cutePet()); //What does this return?

We initialized some new instances of our animal class called bird and cat like shown. Knowing what dog.cutePet() and bird.cutePet() return, what would calling cat.cutePet() return?

You guessed it! It would return "Aww, your Cat is so cute!". It accesses the same method we defined in our Animal class, except it uses the data provided when initializing the cat instance.

Public vs. Private

Most classes have the concept of public and private variables. A public variable is one that programmers are allowed to access directly, while a private one is meant to be inaccessible outside of a class's scope. Making use of these, programmers can better implement one of the major practices of object-oriented programming: Encapsulation.

While many object oriented languages have public and private keywords, the latest version of JavaScript does it a little differently. JavaScript class properties are declared public by default, meaning that programmers only have to specify when declaring private properties. We can declare a private class variable by adding a # to the front of every property declaration. When trying to access a private class property outside the class, JavaScript will return a [#variableName] out of scope syntax error. Check out the MDN documentation on private class properties to learn more.

NOTE: Until the introduction of private class features, JavaScript programmers simulated private class variables by adding an underscore to the front of a property name. Adding an underscore did not actually prevent programmers from accessing and changing these variables. It just lets programmers know to treat them as private.

Accessor Methods

JavaScript provides special built in methods called accessor methods that allow us to achieve better data quality, simpler syntax, and more security when accessing the properties of a class. Two common accessors are Getters and Setters.

Getter Method

One common accessor method is a getter. A getter method is one that returns a value, but lets us access it like we would a property. In order to make a getter, we must make sure that our method:

has a return statement
uses the get keyword
does not have any parameters

Following these conditions, we declare a getter method like so:

class Animal {
  constructor(name, species, age) {...}

  get cutePet() {
  return `Aww, your ${this.species} is so cute!`;
  }

}

Although it doesn't look like much, adding that get keyword means that we can now access that method as a property like this:

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

/**
console.log(dog.cutePet()) 
We no longer need these parentheses as it isn't 
a function call anymore.
**/
console.log(dog.cutePet); //returns "Aww, your Dog is so cute!"

Setter Method

Another common JavaScript accessor method is a setter method. A setter method follows the same logic as a getter. Instead of having to invoke a given method as a function, we can access it as a property of a given class. In order to make a setter, we must make sure that our method:

uses the set keyword
has a single parameter

Lets create a new setter method inside of our Animal class that changes the species of our animal.

class Animal {
  constructor(name, species, age) {...}

  get cutePet() {...}

  set animalName(name) {
    this.name = name;
  }
}

Now we can change our dog's name like so:

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name); //returns "Spot"

dog.animalName = "Fuzzy";

console.log(dog.name); //returns "Fuzzy"

As you can see, we can now access our animalName setter like we would a property and "set it equal" to a value. That value is automatically passed as a parameter to our setter method. If we didn't have our set keyword, we would instead have to invoke the function like this:

class Animal {...}

let dog = new Animal("Spot", "Dog", 4);

console.log(dog.name); //returns "Spot"

dog.animalName("Fuzzy");

console.log(dog.name); //returns "Fuzzy"

Final Statements

JavaScript Classes are powerful tools that help create better, modularized, reusable, and cleaner code. And you now have the abilities to use them! If you want to research more into classes and how they work in JavaScript, take a look at the MDN Documentation on Classes.

Forem: Joe Christensen

Scheduling tasks in rails with the Whenever gem

How do we schedule tasks?

What is cron?

Whenever Gem

Setting Up

Job Syntax

Job Types

The first type is the runner

The second type is rake

The third type is command

Updating crontab

Conclusion

Nested Routing in react-router-dom

What is react-router-dom?

What is nested routing?

Nested routing in react-router-dom

Routing logic component

Dynamic Routes

useParams

Conclusion

Using Breakpoints in MaterialUI

What are breakpoints?

Breakpoints in Material UI

Material UI Media Queries

Theme.breakpoints.up

Theme.breakpoints.down

Theme.breakpoints.between

Theme.breakpoints.only

useMediaQuery Hook

Conclusion

RegEx Basics in Ruby

What is Regex?

Syntax

Delimiters

Atoms and Quantifiers

Metacharacters

Regex With Ruby Methods

Scan

Match

Grep

Closing Statements

Classes in JavaScript

What are Classes?

Classes in JavaScript

Public vs. Private

Accessor Methods

Getter Method

Setter Method

Final Statements

The first type is the `runner`

The second type is `rake`

The third type is `command`