Forem: Jarod Peachey

WordPress vs. Custom Website Design: Which is Better?

Jarod Peachey — Wed, 14 Apr 2021 15:41:14 +0000

WordPress is an amazing platform that makes building websites pretty simple for everyone. With themes, plugins, and customization, it's got lots of options for your website.

However, when you start putting all those things together, it gets cluttered, hard to use and confusing.

A custom built website is a great option to consider for your business. You can have anything you want on your website, without any of the bloat and clutter of WordPress.

However, a custom website has some downsides as well. It's harder to make tiny, minor changes, and it might not be the best option for everyone.

With that said, let's compare some of the benefits and downsides of WordPress and a custom website design.

On to the comparison 👇

Website SEO

SEO is arguably the most important part of a new website.

Without it, no one will be able to find your website through Google search without digging through 100's of results.

Wordpress comes out of the box with some simple SEO tools, but these are limited in their functionality.

A custom website allows full control over the code, so the entire site can be constructed from top-to-bottom to be SEO-friendly.

Wordpress SEO

Wordpress is a great option for some beginer SEO optimizations and tweaks. It's pretty simple to see your basic SEO metrics, but it's got some downsides as well.

SEO Plugins

Wordpress has many SEO plugins that allow you to optimize each blog post for SEO. One of these is Yoast SEO, which is a plugin that shows up right below each post you write.

This is a really cool feature because you can use a visual editor to understand your SEO better.

Yoast (and other tools) are a nice way to see a quick summary of all the SEO optimizations on your site.

Hard to use

While SEO plugins are great, it's often difficult to change your SEO info. With all the plugins, configuration options, and themes, it's common to find SEO settings in 3-5 different places on your site, making it hard to optimize everything you can.

Custom website SEO

A custom website is also a great option for SEO for different reasons.

A custom website makes it easier to control every part of the SEO, from structure to copy, blog posts to images.

Complete SEO control

With a custom design, you'll get a website that's top-to-bottom optimized for SEO.

When you get a custom website built, you'll be working with people who have the ability to change anything and everything you want on your website, something that is a lot harder to do with WordPress.

It takes longer to set up

As is expected when comparing WordPress to anything else, a custom website will take longer to set up your SEO. Wordpress comes out-of-the-box with SEO optimizations.

A custom website, while better in the long run, will take a little more time to set up and get ready for SEO.

Website Design

After you've got people coming to your site, your website needs to look good.

You need to stand out as a business with a cohesive theme, copy style and feel to the website.

WordPress themes and design

WordPress comes with 1,000s of custom themes and design to choose from. Tons of them are free as well, so you can get a site up and running with a pretty similar design to what you need.

Most of the popular themes come with page builders, intuitive UI tools (most are drag-and-drop) that allow you to change the layout and design of your site with ease.

Theme compatibility

As great as WordPress themes are, they've got one major downside: they don't all work with the same design and content.

Because of the complexity of a website, when you create one using a certain theme, it requires specific set up.

However, if you switch themes, your new theme might not have the same structure as the old one, resulting in a broken website that's hard to get back to normal.

Auto updates + plugin conflicts

Plugins and themes and are the backbone of WordPress, which is a good and bad thing.

They're great for adding any kind of functionality to your website. There are tons of plugins to choose from, so you can always find what you're looking for.

However, plugins and themes get updated. And with each new update comes some new code that's not compatible with every plugin on your website.

Can you guess what happens?

Yep. The website breaks again.

And it's not the theme + plugin developers fault; it's hard to manually make sure your new updates work with all 50,000+ plugins and themes.

Sadly, it's just something to deal with on a WordPress site.

Custom website design

Arguably, the best part about a website is the fact that you have COMLETE control over how your website looks. You don't have to struggle with plugins, themes or design.

Brand cohesiveness

Since you have complete control over the design of your custom website, it's easy to make sure that your brand is properly represented by the website.

With a custom design, you'll get your brand's colors, logo and font style throughout the entire site. The backgrounds, buttons, navigation and text will all have the same styles, so your website will be a professional place to represent your business.

Ability to create a new design

With a custom website, you're not limited to tweaking a WordPress theme that someone else built 2 years ago.

You can create a design that's tailored 100% to your company. The possibilities are, quite literally, endless.

Website performance

A fast website is becoming more and more important to make your visitors happy, and to make Google happy with your business.

Wordpress performance

WordPress is by no means super slow. In fact, some of the fastest websites are highly-optimized WordPress sites.

However, it's a bit difficult to make your WordPress site faster. You need to choose the right hosting, choose the right performance plugin, limit how many plugins you use, and choose the fastest theme.

It's entirely possible, but there are some sacrifices along the way.

Custom website performance

With a custom website, there's no sacrifices.

It's built fully to your standards and needs.

So, if you say you want a fast website, you'll get a fast website.

But the best part it, a fast custom website doesn't sacrifice design, usability or SEO.

It's like the best of both (or all 4) worlds!

Which is best for you?

As much as we like custom websites, they're not always the best option.

WordPress is just super cool for a lot of things, and can be a great option for your new website.

WordPress is best for smaller personal sites

If you want a simple website, blog or something else small, WordPress is by far the best option.

Here's a few of the benefits:

It's easy to set up a minimal website
It's cheaper
1000s of themes to choose from

WordPress was orignally built as a blogging platform, which is why it's one of the best options for a new blog (funny how that works).

Custom websites are best for, well, fully custom designs

While WordPress is great for some things, it just gets cluttered, hard-to-use and clunky as you start trying to get a super-customized theme, high-performance and great SEO.

With a custom website, you don't have to settle for someone else's website design.

You literally get your own design, that is unique to you and your business.

Plus, you don't have to sacrifice anything. Here's a few of the benefits of a custom site:

Faster. Like, blazing fast.
Total SEO control. We're talking images, text, headings, and structure.
Custom design unique to you

Conclusion

So, I hope after some super-intense study (just kidding, you don't need to study much), you've found your answer as to whether or not a custom website is better than WordPress for you.

If you HAVE decided that a brand-spanking new custom website sounds like a great fit for you, shoot us an email at jarod@jellydevelopment.com (you'll get a personal reply within 1 24 hours).

Thanks for reading, and best of luck with your new website 🔥

Building a Twitter theme Chrome extension

Jarod Peachey — Sat, 02 Jan 2021 15:28:33 +0000

Chrome extensions are awesome.

And Twitter is awesome.

But I didn't really like the Twitter UI. I always found it a little cluttered, and hard to read.

Since I had always wanted to build a Chrome extension, I decided to jump right in and build a Twitter theme extension!

Let's get into it.

(Oh, you can get the extension at https://get-glitter.netlify.app)

Functionality

The main thing I wanted it to do was customize the theme of Twitter.

To avoid complexity starting out, I simply used the override.css file to add some custom styles to things like the navbar, cards and more.

It was a bit tough, because Twitter uses dynamically generated classnames, so I had to use nested CSS selectors.

For example, here's a pretty large single element selector:

[aria-labelledby='modal-header']
> div:first-child
> div:first-child
> div:nth-child(2)
> div:first-child
> div:first-child
> div:first-child
> div:first-child
> div:nth-child(3)
[role='button']:hover {
    cursor: pointer  !important;
    background-color: var(--primarycolor) !important;
    filter: brightness(1.2) !important;
    color: var(--buttontextcolor) !important;
}

This was the longest part, because I kept accidently overriding styles I didn't want to.

Anyway, I came up with a few themes based on CSS variables. The basic theme looks like this:

{
    name:  'theme-light',
    title:  'Default',
    category:  'Light',
    primarycolor:  '#1DA1F2',
    backgroundcolor:  '#f1f1f1',
    hovercolor:  '#f7f7f7',
    cardbackground:  '#ffffff',
    accentcolor:  '#f1f1f1',
    bordercolor:  '#bbbbbb',
    textcolor:  '#222222',
    cardborderradius:  '8px',
    cardbordercolor:  '#000000',
    cardborderwidth:  '0',
    cardshadow:
'rgba(0, 0, 0, 0.2) 0px 2px 1px -1px, rgba(0, 0, 0, 0.14) 0px 1px 1px 0px, rgba(0, 0, 0, 0.12) 0px 1px 3px 0px',
    buttonborderradius:  '6px',
    buttontextcolor:  '#ffffff',
    inputtextcolor:  '#111111',
    inputbackground:  '#ffffff',
}

I included the obvious colors, backgrounds, etc; but I also included a category and a theme name. This was to make sure I could seperate themes by category later on.

Storing themes

The most important part of this was being able to store the themes.

To do this, I created a loadThemes.js file, which was a simple script to loop through each theme in the themes array and set a cookie for Twitter with that theme.

themes.forEach((theme) => {
  chrome.cookies.get(
  { url:  'https://twitter.com', name:  theme.name },
  function (cookie) {
    if (
      cookie &&
      cookie.value &&
      cookie.value !== '{}' &&
      cookie.value !== '' &&
      JSON.parse(cookie.value) !== {}
    ) {
    } else {
      chrome.cookies.set(
        {
          url:  'https://twitter.com',
          name:  theme.name,
          value:  JSON.stringify(theme),
          expirationDate:  new  Date().getTime() + 10 * 365 * 24 * 60 * 60,
        },
          function () {},
        );
        window.location.reload();
      }
    },
  );
});

Now, I had a few cookies with the themes in them, which I could access later on.

Switching themes

After I built the UI for switching themes (a simple grid with the themes laid out) I had to actually implement the theme switching.

To do this, I added a click event listener to each theme in the UI.

I then accessed the id attribute on that element, which would be the same as the theme cookie name.

I could use that to access the cookie, and call a function to update the CSS custom properties on Twitter.

themePreset.addEventListener("click", (e) => {
  changeTheme(e.target.id);
})

The changeTheme function is pretty large, but here's the basic idea:

Accept theme name parameter
Get cookie with the name of the themeName parameter
Parse the cookie to get the theme object
Use chrome.tabs.getSelected to pass some code for Twitter to run

Here's the code I passed to Twitter to run (abridged):

document.documentElement.style.setProperty(
    '--primarycolor',
    '${newTheme.primarycolor}',
);
document.documentElement.style.setProperty(
    '--backgroundcolor',
    '${newTheme.backgroundcolor}',
);

I then used chrome.tabs.executeScript(tab.id, { code: code }); to execute the script, and now the CSS custom properties were changed.

Twitter looks different now! 🎉

Adding custom themes

I got a little carried away at this point, and decided to add custom themes and edit ability.

In hindsight, that was both dumb and cool.

Anyways, I did that by simply adding more cookies to Twitter, with each cookie storing the theme data.

Every time the extension loaded, I accessed the theme cookies and created new elements for them, so you could switch between the themes you created.

Use the extension

Thanks for reading this far! You can find the extension at https://get-glitter.netlify.app.

Let me know what you think!

p.s If you want, you can follow me on Twitter for more cool stuff like this!

Build a Todo List App with VueJS

Jarod Peachey — Fri, 11 Sep 2020 18:54:50 +0000

VueJS is a modern Javascript framework that makes it easy to handle data flow, simply by including attributes in your HTML tags.

In this guide, we'll be building a simple todo list app to get up and running with VueJS.

Setup and Installation

There are two ways to setup Vue: through a NodeJS project, or by including a script inside of your HTML file. Since we're just starting out, we'll use a script inside of our index.html file.

We can set up our index.html file like this.

<!DOCTYPE  html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Todooey - A Simple Todo List App</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://unpkg.com/vue"></script>
  </head>
  <body>
    <div id="app">
    </div>
  </body>
</html>

In order to use Vue in our app, we need to create a new instance of Vue. We can do this using another script tag before the closing body tag.

<script>
  new Vue( {
    el: '#app',
  });
</script>

Now, we're able to use Vue in our app!

Creating Our App

Before we add the functionality to our app with Vue, we'll create the basic HTML/CSS structure with static content.

Inside of our HTML file, we'll create the Add Todo input, as well as the Todo list and each item

<div class="container">
  <h1 class="">My Todo List</h1>
  <div class="card">
    <div class="flex">
      <input placeholder="Add new todo" />
        <button>Add</button>
    </div>
  </div>
  <div class="card">
    <div class="card-inner">
      <h2>Todo</h2>
      <ul class="list">
        <li class="list-item">
          <div class="list-item-toggle"></div><span>Wash the car</span>
          <div class="list-item-delete">X</div>
        </li>
      </ul>
    </div>
  </div>
</div>

Then, we'll add some basic styling to our app inside our style.css file.

html,
body {
  margin: 0;
  padding: 0;
  background: #faffff;
  font-size: 16px;
}

* {
  box-sizing: border-box;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
        Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
  color: #3d4855;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin-top: 0;
}

.container {
  padding: 24px 0;
  max-width: 700px;
  width: 100%;
  margin: 0 auto;
}

.card {
  border-radius: 4px;
  box-shadow: 1px 1px 40px -10px #31505f30, 0px 1px 2px 0px #31505f30;
  background: white;
  margin-bottom: 24px;
}

.card-inner {
  padding: 16px 24px;
}

.flex {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

input {
  border-radius: 4px;
  background: transparent;
  border: none;
  width: 100%;
  padding: 14px;
  font-size: 16px;
  border: 1px solid transparent;
  height: 100%;
  display: block;
  outline: none;
}

button {
  background: #4fc08d;
  padding: 10px 22px;
  border: none;
  color: white;
  border-radius: 4px;
  margin: 8px;
  font-size: 16px;
  cursor: pointer;
  box-shadow: 1px 1px 15px -2px #212c4430;
  transition: 0.15s;
}

button:hover {
  background: #42aa7b;
}

button:disabled {
  background: #e8e8e8;
  color: #555;
  box-shadow: none;
}

.list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.list-item {
  padding: 12px 16px 12px 16px;
  border: 1px solid #e8e8e8;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 6px;
  border-radius: 4px;
}

.list-item:first-child {
  border-top: 1px solid #e8e8e8;
}

.list-item-toggle {
  border: 1px solid #e8e8e8;
  border-radius: 999px;
  height: 21px;
  width: 21px;
  margin-right: 16px;
}

.list-item-delete {
  margin-left: auto;
  color: tomato;
  margin-top: -2px;
  font-weight: bold;
  text-decoration: none !important;
}

.list-item.completed {
  border: 1px solid #4fc08d;
}

.list-item.completed span {
  text-decoration: line-through;
}

.list-item.completed .list-item-toggle {
  background: #4fc08d;
  border: #4fc08d;
}

Using Vue to Add Functionality

Great! Now that our app is styled, we can begin using Vue to create a dynamic todo list.

Displaying Our Todo List

To display our todo list, we'll take advantage of Vue's 2-way data flow. Inside of our script tag, we'll use Vue's data object to create an array that will contain all our todo items.

<script>
  new Vue( {
    el: '#app',
    data: {
      items: [
         {
           id: 1,
           name: 'Clean the fridge'
         },
         {
           id: 2,
           name: 'Walk the dogs'
         },
      ]
    }
  });
</script>

Each todo item has a name and an ID, which will be used for removing items from the list later on.

Now that we have our data, we can display it in our list using the v-for attribute, which is basically a forEach loop that Vue uses.

<ul class="list">
  <li class="list-item" v-for="item in reversedItems">
    ...
    <span>{{ item.name }}</span>
    ...
  </li>
</ul>

Using the v-for attribute allows us to acces the item property. We can display the name by using the double handlebars syntax: {{ item.name }}.

Adding Todo Items

Now that our items display properly, we can work on adding new items to the list. Using Vue's methods property, we can create a method that adds a new todo to the list.

First, let's create a new property inside our data object, called newItem.

<script>
  new Vue( {
    el: '#app',
    data: {
      newItem: '',
      items: [...]
    }
  });
</script>

This will be the value that we enter into the Add Todo input.

In order to make sure that what we type in our input updates the newItem value, we can take advantage of Vue's 2-way data flow, using the v-model attribute. This means that whatever value we enter into the input will be persisted to the data object.

<input v-model="newItem" placeholder="Add new todo"  />

Since we now have our newItem value stored, we can create a method to add that item to the list.

Beneath the data object, we'll create a new methods object with a function, addItem.

<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {
        this.items.push({
          id: this.items.length + 1,
          name: this.newItem,
          completed: false,
        });
        this.newItem = '';
      },
    },
  });
</script>

Basically, when this function is called, we're taking the newItem value and pushing it to the items array. The, we're clearing out the newItem value, which clears our Add Todo input.

Now, all we need to do is call the function when we click the Add button. We can use the v-on attribute, or the @ symbol for short.

<button @click="addItem">Add</button>

Now, Vue will know to call the addItem function when this button is clicked.

As something a little extra, we can also disable the button is there is no value in the input, using the :disabled attribute. This tells Vue to apply the disabled attribute only if the expression inside the qoutes is true.

<button @click="addItem" :disabled="newItem.length === 0">Add</button>

Marking Items as Complete

The final thing that we need to do is add the ability to mark our items as complete.

To do this, we'll add a new property to each item in our array: the completed property.

<script>
new Vue({
  el: '#app',
  data: {
    items: [{
      id: 1,
      name: 'Clean the fridge',
      completed: true,
    },
    {
      id: 2,
      name: 'Walk the dogs',
      completed: false,
    }]
  }
});
</script>

Vue once again provides us with an attribute to dynamically change the class of an element, based on data in the Vue instance.

So, we can go to our list item and add the :class attribute.

<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  ...
</li>

This tells Vue that it should apply the completed class to the <li> only if the item is completed (which we can tell by accessing the item.completed property.

Now, our completed items should have a green outline. However, we still need to be able to mark them complete if they are not.

To do this, we'll create another method, called toggleComplete.

<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {...},
      toggleComplete: function (item) {
        item.completed = !item.completed;
      }
    },
  });
</script>

Once we have our method, we can call it using the @click attribute that Vue provides.

<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  <div class="list-item-toggle" @click="toggleComplete(item)"></div>
  ...
</li>

Once again, we can pass in the item object as a prop to the function, because Vue allows us to access it via the v-for attribute.

Now, we can toggle each todo item between complete and uncomplete.

Deleting Todo Items

The final thing we need to do is allow ourselves to delete todo items. Once again, we'll use a method to accomplish this.

<script>
  new Vue( {
    el: '#app',
    data: {...},
    methods: {
      addItem: function() {...},
      toggleComplete: function (item) {...},
      removeItem: function (itemID) {
        this.items = this.items.filter((item) => newItem.id!== itemID);
      } 
    },
  });
</script>

In this function, we're accessing the itemID prop (which is passed from the delete element) and setting the items property to a new array, without the item we just deleted.

Now, we can call the function from our delete element.

<li class="list-item" :class="{completed: item.completed}" v-for="item in reversedItems">
  ...
  <div class="list-item-delete" @click="removeItem(item.id)">X</div>
</li>

Tada! Now, we can succesfully delete our todo items!

Final Thoughts

So that's it! We've just build a functioning todo application using Vue. We learned how to call methods, access data and update data, all without any JS DOM manipulation.

You can find the full code for this app on Github.

If you liked this tutorial, I'd appreciate it if you could buy me a coffee! Or, follow me on Twitter ✌.

Creating a Reusable Grid System in React

Jarod Peachey — Thu, 16 Jul 2020 18:55:36 +0000

The grid system is arguably the most valuable layout tool for building websites. Without it, responsive layouts would be, well, NOT responsive.

I use React a lot, so I decided to create a grid system that I could reuse in my React apps. It started as a personal tool, but as I got more use out of it, I decided to release it for other devs to use.

So I did. It's called React Tiny Grid, and it's a 12-column grid system that's pretty handy. You can find it here.

But today, we're going to rebuild it step-by-step, so you can follow along and see how it's built.

Setup

We'll be using styled-components to style our grid system. Let's install that.

$ npm install --save styled-components

Now that we've got our dependencies installed, we'll create our two files: one for the Row component, and one for the Column component.

$ touch Row.js Column.js

Basic Grid Functionality

To start, we'll create a basic flex wrapper that makes all the column items the same width, and wraps them.

Creating the Row Component

Inside of our Row.js file, we'll outline the basic row component.

import  React  from  'react';
import  styled, { css } from  'styled-components';
import { Column } from  './Column';

export const Row = ({children}) => {
  return (
    <Wrapper>
      {React.Children.toArray(children).map((item) => {
        return (
          item && (
            <Column>
              {item.props.children}
            </Column>
          )
        );
      })}
    </Wrapper>
  );
};

const  Wrapper = styled.div`
  @media (min-width: 769px) {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -8px 0 -8px
  }
`;

Let's break this down.

For the basic functionality, we're mapping through the children of this component, and making those each a Column (we'll style those later).

{React.Children.toArray(children).map((item) => {
  return (
    item && (
      <Column>
        {item.props.children}
      </Column>
    )
  );
})}

To add the grid functionality, we simply make the <Wrapper> a flex element.

const  Wrapper = styled.div`
  @media (min-width: 769px) {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    margin: 0 -8px 0 -8px;
  }
`;

We 'activate' the grid system once the screen size is wider than 769px. Then, we set the display to flex.

We also add the negative margin to account for the spacing of the columns (styled later).

margin: 0 -8px 0 -8px;

Creating the Column Component

Now that we have our Row component, we need to style the Column component.

Inside of our Column.js file, we'll create the basic column markup and styles.

import  React  from  'react';
import  styled, { css } from  'styled-components';

export const Column = ({children}) => {
  return (
    <Wrapper>{children}</Wrapper>
  );
};

const Wrapper = styled.div`
  flex: 1 1 0;
  width: 100%;
  padding: 8px;
`;

All we have to do for now is give the Column the ability to resize equally with it's siblings. This is accomplished using the flex property.

flex: 1 1 0;

We also added 8px of padding to each column. If you recall, that's the amount of negative margin we added to the Row component. This is to make sure the edges of the columns meet the edges of their parent container.

Supporting Custom Breakpoints

So far, we've got an automatic grid system! The columns are all resized, and are full-width on mobile.

But a REAL grid system supports custom breakpoints. So let's do that now.

Inside of our Row.js file, we'll accept a breakpoints prop, with a default value of 769.

export const Row = ({children, breakpoints = [769]}) => {
  ...
};

Now, we can use this breakpoints array to decide when to active the grid. To do this, we pass the first item in the breakpoints array to the <Wrapper> component.

export const Row = ({children}) => {
  return (
    <Wrapper breakpoint={breakpoints[0]}>
      ...
    </Wrapper>
  );
};

Then, we replace the 769px media query with a template literal, which are supported by styled-components. This allows us to use our breakpoint value.

const  Wrapper = styled.div`
  @media (min-width: ${props => props.breakpoint}px) {
    ...
  }
`;

Now, we can pass in a custom breakpoint to our Row component.

<Row breakpoints={[960]} />

But you know what would be cool?

Custom column widths. For each breakpoint 🤯

Let's do that now!

Custom Widths

Back inside of our Column.js file, we need to accept two new props: first, a breakpoints array, which will be passed down from the parent Row component. Second, a widths array, which will contain an array of numbers defining how many columns to take up.

export const Column = ({children, breapoints, widths = ['auto']}) => {
  ...
};

Note: we used a default value of auto for the widths: this will allow the column to take up whatever space is available, in case we forget to pass in a widths prop.

Now, we're setting up the grid system to support up to three custom breakpoints and widths. However, we need to make sure that we have a default value for each of these three, in case we forget to pass in a value.

At the top of our Column component, we'll add these variables.

const  breakpointOne = breakpoints[0];
const  breakpointTwo = breakpoints.length >= 1 ? breakpoints[1] : null;
const  breakpointThree = breakpoints.length >= 2 ? breakpoints[2] : null;

const  widthOne = widths[0];
const  widthTwo = widths.length >= 1 ? widths[1] : null;
const  widthThree = widths.length >= 2 ? widths[2] : null;

Basically, what we're doing is checking if there are 3 width values. If not, we set the third value to the previous width item. That way, our grid won't break!

Now, we need to pass in these values as props to the column <Wrapper> component.

export const Column = ({children, breakpoints, widths = ['auto']}) => {
  return (
    <Wrapper
      breakpointOne={breakpointOne}
      breakpointTwo={breakpointTwo}
      breakpointThree={breakpointThree}
      widthOne={widthOne}
      widthTwo={widthTwo}
      widthThree={widthThree}
    >
      {children}
    </Wrapper>
  );
};

This will allow us to change the width of the column based on specific breakpoints.

Inside our Wrapper styled-component, let's add media queries.

const Wrapper = styled.div`
  flex: 1 1 0;
  width: 100%;
  padding: 8px;

  // ACTIVE BETWEEN BREAKPOINT ONE AND TWO (OR 9999PX)
  @media(min-width: ${props => props.breakpointOne}px) and
  (max-width: ${props => props.breakpointTwo | 9999}px) {
    width: ${props => props.widthOne !== 'auto'
      ? `${(props.widthOne / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthOne !== 'auto' ? 'none !important' : null)};
  }

  // ACTIVE BETWEEN BREAKPOINT TWO AND THREE (OR 9999PX)
  @media(min-width: ${props => props.breakpointTwo}px) and
  (max-width: ${props => props.breakpointThree | 9999}px) {
    width: ${props => props.widthTwo !== 'auto'
      ? `${(props.widthTwo / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthTwo !== 'auto' ? 'none !important' : null)};
  }

  // ACTIVE BETWEEN BREAKPOINT THREE AND UP
  @media(min-width: ${props => props.breakpointThree}px) {
    width: ${props => props.widthThree !== 'auto'
      ? `${(props.widthThree / 12) * 100}%`
      : null};
    flex: ${(props) => (props.widthThree !== 'auto' ? 'none !important' : null)};
  }
`;

Ok. That's a lot to look at.

The first thing we make sure to do is add a max-width to the media query. This is to make sure the flex property does NOT get reset if the width value is 'auto'.

The main thing we have to take note of is the function used to calculate the width of the column. Since we use a 12-column grid, we get this value by taking the width (a value from 1-12) and dividing it by 12. We multiply THAT number by 100 to get the percentage.

width: ${props => props.widthThree !== 'auto' ? `${(props.widthThree / 12) * 100}%` : null};

We also add a ternary operator to make sure the width is still 100% if the column width is auto by setting the width value to null.

Now, the final thing we need to do is pass the breakpoints from the Row component to the Column component.

Inside of our Row.js file, we'll update the return statement.

return (
  {React.Children.toArray(children).map((item) => {
    return (
      item && (
        <Column
          breakpoints={breakpoints}
          {...item.props}
        >
          {item.props.children}
        </Column>
      )
    );
  })}
)

And viola! Now, we're able to use custom breakpoints and widths for our grid system.

<Row breakpoints={[576]}>   
 <Column widths={[4]} />  
 <Column widths={[8]} />  
 <Column widths={[3]} />  
 <Column widths={[9]} />  
 <Column widths={[7]} />  
 <Column widths={[5]} />  
</Row>

Conclusion

So now, we have a fully-functioning React grid system. If you want even more functionality, like custom spacing, offsets, and more, check out React Tiny Grid.

You can find the full code for this grid system on Github.

If you liked this tutorial and found React Tiny Grid useful, I'd appreciate it if you could buy me a coffee!

If you've got any questions or improvements for the grid system, you can comment that down below.

FaunaDB in 5 Minutes

Jarod Peachey — Tue, 19 May 2020 13:05:40 +0000

Originally posted on Five Minute Developer

The serverless ecosystem is growing more than ever before, and there are a lot of new tools built around it. In this post, we'll be overviewing FaunaDB, a serverless database built for scalability and ease of use.

What is Fauna?

FaunaDB is a global cloud database created to integrate with the JAMstack and modern serverless architecture. According to their site, FaunaDB "transforms the traditional DBMS into a Data API that gives you all the capabilities of an old-guard database, without sacrificing flexibility, scale, and performance".

That's a pretty cool sentence.

FaunaDB also allows you to query your data how you want. It supports relational data, document-based data, and graph-based data. It's got a ton of cool features, which we'll list below.

Fauna + GraphQL

FaunaDB recently added support for GraphQL, which allows you to create custom schemas and access your data using GraphQL. Fauna allows access to a GraphQL endpoint for each database you create, which allows for easy access to your data.

It's great for integrating with SSGs like Gatsby and Hugo. It also integrates perfectly with Apollo.

FQL

For more advanced functionality, Fauna also comes with the Fauna Query Language (FQL). FQL is a function-based querying language, built for advanced data manipulation. FQL comes with at least 50 built-in functions that you can use depending on your needs.

An FQL statement looks like this:

Query(
  Create(
    Collection('posts'),
    {
      data: {
        title: "New Post",
        author: "Jarod Peachey",
        date: "10/08/2019"
      },
    },
  )
)

Executing this FQL statement will create a new document in the posts collection, which we can access through one of the many other FQL functions.

Functions

FaunaDB allows you to create reusable queries in FQL using functions. This is useful for, well, repeating queries without writing more code.

A function is defined like this.

CreateFunction({
  name: "create_post",
  body: Query(
    Lambda(
      "data",
      Create(
        Collection('posts'),
          {
            data: {
            title: Select("title", Var("data")),
            author: Select("author", Var("data")),
            date: Select("date", Var("data"))
          },
        },
      )
    )
  )
})

The first argument to the CreateFunction query is the name. For this example, we named it "create_post".

The second argument is the query to run when the function is called. This is placed inside of a Lambda() function, which lets us access the data passed to the function call.

To call this function, simply execute this query.

Call(Function("create_post"), {
  title: "New Post",
  author: "Jarod Peachey",
  date: "10/08/2019"
})

Indexes

Fauna also allows you to create indexes, which let you retrieve data based on specific attributes, rather than the document ref (or id). You can use indexes to get a single post or multiple posts.

For example, the simplest index gets all the documents in a single collection.

Query(
  CreateIndex({
    name: "all_posts",
    source: Collection("posts")
  })
)

This allows you to access all posts, via a call to the index.

Match(Index('all_posts'))

Examples

FaunaDB is growing in popularity, so there are plenty of examples to choose from, as well as Fauna's own documentation.

My personal favorite tutorial is Rethinking Twitter as a Serverless App on CSS Tricks. It was immensely helpful when I started using FaunaDB, and I highly recommend reading it.

Conclusion

In my opinion, FaunaDB is one of the front-runners in the serverless world, and it's an amazing platform. I would definitely recommend using it for your next project requiring a database.

Creating a Countdown using React Hooks

Jarod Peachey — Wed, 29 Apr 2020 16:32:30 +0000

React Hooks are an amazing way of managing state, context, refs and just about everything else in React. They're very versatile, and if you use them right, you can really power-up your website.

In this tutorial, we're going to create a basic countdown using two hooks: useState and useEffect.

React Hooks

The two hooks we're using are two of the most used React hooks. At least, I use them more than I do the others, so I'm assuming the same can be said about other developers.

Maybe not.

Anyway, here's what each of the hooks does:

The useState Hook

The useState hook is the equivalent to the state object in React class-based components. It manages the state, and allows you to update that state object.

The hook takes in two defenitions: the name of the state item, and the name of the function that updates that state item.

The simplest implmentation of this hook is creating a single state object

const [state, setState] = useState({});

However, you can also create a seperate state item for everything you want

const [valueOne, setValueOne] = useState(1);
const [valueTwo, setValueTwo] = useState(2);

We'll be using both methods in our countdown component.

The useEffect Hook

The useEffect hook is, in a way, the jack-of-all-trades hook in React. You can use it to update state if something happens, trigger a re-render based off of a state value, or any other number of things.

The basic implementation of this hook is:

useEffect(() => {
    // Code in here
}, [])

The useEffect hook takes 2 parameters: the callback function and the value to watch.

The second argument can be either an empty array, or a particular value. If it's an empty array, it runs the callback function once. If it's got a value in it, like this:

useEffect(() => {
    // Code in here
}, [value])

It will run whenever value changes.

Creating the Countdown

OK. Now that we've got a basic understanding of the hooks we'll be using, we can start creating the basic component layout.

First, we'll create a new file called countdown.js. Inside that file, we'll create the functional component.

const {useState, useEffect} = React;

const Countdown = () => {
  const [countdownDate, setCountdownDate] = useState(new Date('12/25/2020').getTime());
  const [state, setState] = useState({
    days: 0,
    hours: 0,
    minutes: 0,
    seconds: 0,
  });

  useEffect(() => {
    setInterval(() => updateCountdown(), 1000);
  }, []);

  const updateCountdown = () => {
    // TODO: Code to calculate how long between the countdown date and the current time
  };

  return (
    <div>
      <div className='countdown-wrapper'>
        <div className='time-section'>
          <div className='time'>{state.days || '0'}</div>
          <small className="time-text">Days</small>
        </div>
        <div className='time-section'>
          <div className='time'>:</div>
        </div>
        <div className='time-section'>
          <div className='time'>{state.hours || '00'}</div>
          <small className="time-text">Hours</small>
        </div>
        <div className='time-section'>
          <div className='time'>:</div>
        </div>
        <div className='time-section'>
          <div className='time'>{state.minutes || '00'}</div>
          <small className="time-text">Minutes</small>
        </div>
        <div className='time-section'>
          <div className='time'>:</div>
        </div>
        <div className='time-section'>
          <div className='time'>{state.seconds || '00'}</div>
          <small className="time-text">Seconds</small>
        </div>
      </div>
    </div>
  );
};

export default Countdown;

OK. So what's going on here?

The first thing we do inside our new component is create new state values using the useState hook.

const [countdownDate, setCountdownDate] = useState(new Date('12/25/2020').getTime());
const [state, setState] = useState({
  days: 0,
  hours: 0,
  minutes: 0,
  seconds: 0,
});

The first hook creates the countdown date, which I have set to Christmas.

The second hook stores our data for the remaining days, hours, minutes and seconds until the countdown date (again, Christmas). These are each set to 0, and will be updated every second.

Which brings us to the useEffect hook.

useEffect(() => {
  setInterval(() => setNewTime(), 1000);
}, []);

Inside the callback function, we're setting up an interval that will run every second. Each time it runs, it calls our updateCountdown function (which we haven't created yet. We'll get to that).

The rest of the component is the "html" for the countdown. The main thing to note is where we access the state value for days, hours, minutes and seconds.

<div className='time'>{state.hours || '00'}</div>

Updating the Countdown

The final thing to do is add the logic that updates the countdown inside the updateCountdown function.

const updateCountdown = () => {
  if (countdownDate) {
    // Get the current time
    const currentTime = new Date().getTime();

    // Get the time remaining until the countdown date
    const distanceToDate = countdownDate - currentTime;

    // Calculate days, hours, minutes and seconds remaining
    let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));
    let hours = Math.floor(
      (distanceToDate % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60),
    );
    let minutes = Math.floor(
      (distanceToDate % (1000 * 60 * 60)) / (1000 * 60),
    );
    let seconds = Math.floor((distanceToDate % (1000 * 60)) / 1000);

    // For visual appeal, add a zero to each number that's only one digit
    const numbersToAddZeroTo = [1, 2, 3, 4, 5, 6, 7, 8, 9];

    if (numbersToAddZeroTo.includes(hours)) {
      hours = `0${hours}`;
    } else if (numbersToAddZeroTo.includes(minutes)) {
      minutes = `0${minutes}`;
    } else if (numbersToAddZeroTo.includes(seconds)) {
      seconds = `0${seconds}`;
    }

    // Set the state to each new time
    setState({ days: days, hours: hours, minutes, seconds });
  }
}

Basically, we're accessing the new time and subtracting that from the countdown date.

    // Get the current time
    const currentTime = new Date().getTime();

    // Get the time remaining until the countdown date
    const distanceToDate = countdownDate - currentTime;

This gives us the time remaining, and we do some fancy math stuff to calculate the days and hours left.

Fancy math stuff --------------------------------------------------- 👇

let days = Math.floor(distanceToDate / (1000 * 60 * 60 * 24));

After we calculate the days and such remaining, we set the state to equal the values we just calculated.

setState({ days: days, hours: hours, minutes, seconds });

Every time we set the state, React triggers a re-render of the content that changed.

Guess what that means?

Yep! Our countdown now updates every 1 second and displays the new time remaining 🎉

Conclusion

So that's how you use React Hooks to create a simple countdown component. You can find a working demo on Codepen.

If you liked this article, you can check me out on Twitter, or visit my website for more info.

Thanks for reading! 👋

Simple Slide-Out Mobile Menu with React Hooks

Jarod Peachey — Sun, 26 Apr 2020 12:15:00 +0000

If you're a front-end developer, I can almost guarantee that you've worked with a mobile menu at some point in your career. If you have, you know first-hand that, sometimes, crafting mobile menus can be a little difficult.

Just this month, I was working on a website of mine, and I came across one of these issues. I wanted to create a mobile menu with a few simple requirements:

It slides out from under the header
That's it

Seriously, it's not like I wanted to add 18 different animations, transitions, and effects. I just wanted to make the menu slide out from underneath the header. Simple, right?

Nope.

As I found out, it wasn't as simple as setting the z-index of the menu to be less than that of the header. And trust me, I set the z-index to 999999 just to see what would happen (spoiler: nothing).

After browsing through Stackoverflow, Github, and other forums for way too long, I eventually found a solution. The solution made perfect sense after I found it, but I'm writing this post anyway so others can easily find it as well.

The Structure

For this tutorial, I'm using React with styled-components.

Why?

Because that's what I built it with.

Anyway, I'm going to go through this assuming you already have your app set up, with a header and all that good stuff.

If you don't, go ahead and set up a basic React project.

OK. If you don't already have one, create a header.js file. I don't care where.

To start, we're going to create a functional component and structure the header and mobile menu.

header.js

import  React, { useState } from  'react';

export const  Header = () => {
  return (
    <Wrapper>
      <HeaderWrapper id='header'>
        <Container>
          <Title>Menu Demo</Title>
          <MenuToggle>
            <RotateContainer>
              <span  />
              <span  />
              <span  />
            </RotateContainer>
          </MenuToggle>
        </Container>
      </HeaderWrapper>
      <MenuWrapper>
        <Menu>
          <MenuItem href='/'>Home</MenuItem>
          <MenuItem href='/'>About</MenuItem>
          <MenuItem href='/'>Contact</MenuItem>
        </Menu>
      </MenuWrapper>
    </Wrapper>
  );
};

Since we're using styled-components, each component is named accordingly.

Oh, and remember when I said I spent forever messing with the z-index of the menu, and it didn't work?

That's because the mobile menu must be a sibling of the header, not a child. It doesn't work if it a child element.

Anyways. After we have the basic structure, we need to style each item.

Styling the menu

Styling the Wrapper

This isn't very exciting, to be honest. It's got three lines of CSS in it.

But, still very important.

Place this styled-component at the bottom of your header.js file:

const  Wrapper = styled.div`
  * {
    box-sizing: border-box;
  }
`;

The box-sizing rule is needed to size elements with margin and padding properly. However, you most likely won't need this, as your root CSS file probably sets the same rule.

Styling the Header Wrapper

The header wrapper is also optional. If you already have a header on your website (very important, you probably should), then you can keep your current styling.

If not, add a new HeaderWrapper styled-component to your file:

const  HeaderWrapper = styled.header`
  padding: 18px 0;
  color: white;
  position: fixed;
  background: tomato;
  left: 0;
  top: 0;
  right: 0;
  bottom: auto;
  z-index: 999;
`;

There's one specific line of CSS that is very important: z-index: 999;

To display the header over the top of the menu, you need to make sure the header component has a z-index higher than the mobile menu.

Moving on.

Styling the Menu Toggle

I took a little detour on the mobile menu toggle and added some pleasing transitions, using <span> tags.

At the bottom of your file, add two new styled-components: one for the toggle, and one to handle the rotation of the toggle.

const  MenuToggle = styled.div`
  z-index: 9999;
  width: 30px;
  height: 30px;
  transform: rotate(0deg);
  transition: all 0.25s ease-in;
  cursor: pointer;
  margin-left: auto;
  span {
    display: block;
    position: absolute;
    height: 4px;
    width: 100%;
    background: white;
    border-radius: 9px;
    opacity: 1;
    left: 0;
    transform: rotate(0deg);
    transition: ${(props) =>
    props.open ? 'all 0.25s ease-in' : 'all 0.25s ease-out'};
  } 
  span:nth-child(1) {
    top: ${(props) => (props.open ? 'calc(50% - 2px)' : '10%')};
    transform-origin: left center;
  }
  span:nth-child(2) {
    top: ${(props) => (props.open ? 0 : 'calc(50% - 2px)')};
    left: ${(props) => (props.open ? 'calc(50% - 2px)' : null)};
    width: ${(props) => (props.open ? '4px' : null)};
    height: ${(props) => (props.open ? '100%' : null)};
    transform-origin: left center;
  }
  span:nth-child(3) {
    top: calc(90% - 4px);
    transform-origin: left center;
    width: ${(props) => (props.open ? 0 : null)};
    opacity: ${(props) => (props.open ? 0 : 1)};
  }
`;

const  RotateContainer = styled.div`
  height: 100%;
  width: 100%;
  transition: ${(props) => props.open ? 'all 0.25s ease-in-out' : 'all 0.25s ease-in-out'};
  transform: ${(props) => (props.open ? 'rotate(-45deg)' : 'none')};
`;

To summarize that, we're adding three <span> tags inside the MenuToggle component. The <span> tags are rotated depending on whether the menu is open or not.

You may notice the variables inside the styled-components: width: ${(props) => (props.open ? 0 : null)}; These are what decide whether or not to show the mobile menu, rotate the toggle, or apply other menu-related styling. We'll be adding that functionality later on.

Styling the Menu

Don't worry, this is the last one, I promise.

The menu styling also depends entirely on your preference, but, once again, there are some important lines of CSS that you need.

const  MenuWrapper = styled.div`
  position: fixed;
  overflow: hidden;
  top: ${(props) => (props.open ? '0' : '-100%')};
  left: 0;
  z-index: 0;
  margin-top: 66px;
  width: 100%;
  transition: ${(props) =>
  props.open ? 'all 0.25s ease-out' : 'all 0.6s ease-out'};
  box-shadow: 0px 4px 20px -5px #e8e8e8;
  padding: 12px;
`;

If you have your own styling, simply add in these 5 lines (the very important ones):

position: fixed;
overflow: hidden;
top: ${(props) => (props.open ? '0' : '-100%')};
left: 0;
z-index: 0;

Adding the functionality

Great! So far, we have nothing useful. We've got a menu that doesn't close, which is probably not the best thing for your website. Luckily, we're not done yet.

To open and close the menu, we need to set an open state that tells each component whether or not the menu is open.

To do this, we're using the React useState() hook.

Inside your functional component, add the state, as well as a toggle function that will set the menu to open or closed:

const Header = () => {
  const [open, setOpen] = useState(false);

  const  toggleMenu = () => {
    setOpen(!open);
  };

  ...
}

Now that we have our open state, we need to call the toggleMenu() function when we click on the menu toggle.

Update your <MenuToggle> component to look like this:

<MenuToggle onClick={toggleFunction} open={open}>
  <RotateContainer open={open}>
    <span  />
    <span  />
    <span  />
  </RotateContainer>
</MenuToggle>

Now, when you click on the menu toggle, it should switch from a hamburger menu to an X. The menu doesn't show up yet, because we haven't hooked it up to the open state yet.

Let's do that now.

Update your <MenuWrapper> and <Menu> components:

<MenuWrapper open={open}>
  <Menu open={open}>
    <MenuItem href='/'>Home</MenuItem>
    <MenuItem href='/'>About</MenuItem>
    <MenuItem href='/'>Contact</MenuItem>
  </Menu>
</MenuWrapper>

And OPEN SESAME! A mobile menu now appears when you click the hamburger menu 🎉 (guess what happens when you click the X)

So, we now have a functioning mobile menu that slides out from underneath the header, as well as a menu toggle that looks pretty sweet!

If you liked this article, please leave a like.

Thanks for reading!

Adding Comments to a Static Website

Jarod Peachey — Wed, 15 Apr 2020 18:55:05 +0000

Static websites aren't static anymore.

This has become pretty obvious with the rise of serverless architecture, the headless CMS and the JAMstack. Static websites are created by sourcing content from an API, and generating a static website using static site generator.

However, the JAMstack method still has some drawbacks, specifically when dealing with dynamic functionality. In today's day and age, it's very rare that a website not need some kind of dynamic aspect to it.

One of the most popular dynamic aspects of a website is, without a doubt, comments. However, it's not as easy to add comments to a static site as it is a website with a traditional server.

That's why I decided to develop a tool that could allow anyone to add comments to their static blog or website with as little hassle as possible.

Enter Triangle Comments.

What is Triangle?

Triangle Comments is a tool that provides drop-in commenting to be used on any static site, anywhere on that site.

Why Triangle?

I created Triangle not to be the first method to add comments on a static site but to offer more than other options. Triangle is unique in that it can be both static AND dynamic.

What does that mean?

Well, Triangle collects data from a Netlify form and sends the data to GraphQL. That data is used by the Comments component offered by Triangle. Your static site generator then builds the HTML, and the comments will be included in that HTML.

But what if someone adds a new comment, and you want it to show up right away?

Triangle makes a call to the API where your comments are stored and gets the latest comments. The beautiful part is: this API call doesn't bog down your site at all. Because of the comments in the GraphQL server from your most recent build, the entire site (plus all but the new comments) shows up on page before the new comments are called.

Once the new comments are retrieved, the Comments component is updated to include the latest comment.

Let me know what you think!

This is still in beta version, but I'd love for you to test it out, and see what you think! I'm constantly improving it and would love your feedback regarding improvements or features you'd like to see.

https://github.com/jarodpeachey/triangle-comments

Your Dream Product

Jarod Peachey — Tue, 21 Jan 2020 00:54:46 +0000

Everyone loves a good shortcut, hack or automation in their lives. Whether it's coding, health, social or personal life, there's always room for another app to make something easier.

So that's what I'm here to ask you about: an app that would make a specific aspect of your life so much better!

What are some apps that would be awesome to have in your life, but aren't available right now? Doesn't matter if it seems impossible, just write them down in the comments!

Thanks in advance for your reply!

Community of Developers

Jarod Peachey — Sat, 30 Nov 2019 13:46:24 +0000

Obviously, Dev.to is a community of programmers, developers and designers. It's truly an awesome place. I love the community posts, listings, discussions and more.

That's why I always look for developer websites to discuss, learn and grow on. Recently, I found Webwide.io through - wait for it - Dev.to. It's an awesome forum site for developers and designers to ask questions about problems, share articles, and just chat about life!

(No, I am not affiliated with them. It's just an awesome site!)

You can check it out down below!

https://webwide.io/?ref=1270

Convince me: Why should I use Python?

Jarod Peachey — Fri, 25 Oct 2019 12:25:38 +0000

Website Review From Fellow Developers

Jarod Peachey — Wed, 23 Oct 2019 17:09:17 +0000

Hey Dev.to community! It's awesome to join this community/website. I found it looking for a solution to an issue I was having, and sure enough, there was an answer!

Anyways, I want to start something cool: a website/app review thread.

If you have a personal project, company website, or other app/web app that you'd love to get feedback on, post it down in the comments! Tell us a little bit about your project, and what you would like feedback on!

Once you've done that, go through the comments and find 1-2 other sites to review and give feedback on.

Let's use our knowledge to help each other!

I'll start us off: here's my portfolio site built using Gatsby and hosted on Netlify. I'd appreciate if you could tell me what you think of the design/user experience!

https://jarodpeachey.netlify.com

Now it's your turn!