I recently took on a skills assessment test for a job that required building out pages using bootstrap and sass. The challenge was deceivingly simple but, like any project, it didn’t take long for the stylesheet to get crowded and harder to manage. As I always say, writing code is like solving a puzzle that you create yourself in real-time. 

In an attempt to make the stylesheet more manageable and easier to edit, I began using mixins for media queries. I also added in variables in place of screen sizes so that they can be changed in a single area of the document later. The variables along with the mixin looked something like this: 

$screen-lg: 1200px;

@mixin screen-size($size) {
  @media (min-width: $size) {
    @content;
  }
}

By creating a set of variables, I can now use @include whenever I needed to use them. Like this:

div {
    //Some style here
  @include screen-size($screen-lg) {
    //New styles here
  }
}

I like this method a lot because not only is it making for an elegant solution for de-cluttering the css, it’s also really simple to reuse over and over and it makes it so that you don’t have to hunt down where that media query is for that particular class name. This works even better if you have multiple breakpoints too, like this: 

$screen-lg: 1200px;
$screen-md: 820px;
$screen-sm: 414px;

@mixin screen-size($size) {
    @media (min-width: $size) {
        @content;
  }
}

div {
    font-family: Helvetica;
    font-weight: normal; 

  @include screen-size($screen-lg) {
    font-size: 3rem;
  }
  @include screen-size($screen-md) {
    font-size: 2rem;
  }
  @include screen-size($screen-sm) {
    font-size: 1rem;
  }
}

Here’s what it looks like after it’s been compiled:

div {
    font-family: Helvetica;
    font-weight: normal;
}

@media screen and (min-width: 1200px) {
  div {
    font-size: 3rem;
  }
}

@media screen and (min-width: 820px) {
  div {
    font-size: 2rem;
  }
}

@media screen and (min-width: 414px) {
  div {
    font-size: 1rem;
  }
}

To learn about other ways you can use mixins https://sass-lang.com/documentation/at-rules/mixin

When referencing resource links on your website, there’s a new keyword you can add to force your page to load that first before anything else. This helps your code from briefly loading incorrectly or not loading in important parts altogether, it’s called preconnect and it fixes those issues known as render blocking. It basically lets the browser know that additional resources are needed to load and that those resources are located at a different origin. 

To use preconnect, simply add it to the rel attribute like this: <link rel="preconnect" href="https://example.com"> And just like that, you have improved the load speed of your site. By default, modern browsers are already trying to load resources as quickly as possible and they are built to guess which resources are needed first. By adding this quick little resource hint, it won’t have to do any guesswork. 

I first noticed the preconnect keyword from Google fonts when I used it recently and wondered what it was all about. After quickly Googling it, I found that there are other keywords that do something similar. I admit, I don’t 100% understand the differences and I will not pretend to on this blog. All I know so far is that with great power comes great responsibility, meaning that not every resource should be preconnected or you might get the 3 Stooges effect. 

Here’s a great write up about it on Medium by Frontend engineer, Fendy Guo who knows much more than I do. Frendy talks about additional resource hints: DNS-prefetch, Preload and Prefetch – all do similar things but just in different formats. It’s a quick read, I suggest you read up on it if you are interested in making your sites faster and more efficient. That’s all from me for now, I hope you found this useful. Thank you for reading and happy coding!

Years ago, I started to use WordPress because everyone else says to use it. There was no other reason for me to jump on the band wagon. I didn’t know what I was getting into. You probably can’t tell my age (ahem), but I have been creating websites since the days of Geocities, that’s the stone age in web years. In those days, WordPress was way over my head and I didn’t fully realize what the fuzz was about. Now, though, coming back to the popular CMS, I’m having so much more fun.

There’s so many (free) tools at my disposal, I am finally finding the fun in WordPress fundamentals. I’m late in the game but, wow, am I enjoying it a lot more now that I understand more (although, there’s always room for learning) of what goes on behind the scenes since restarting my new portfolio site, the one you’re currently on.

Here are a few things that I use for my WordPress builds:

  • Local by flywheel
  • Custom Post Types UI
  • Advanced Custom Fields
  • Underscores
  • Bootstrap

The process/workflow that makes it fun for me goes like this:

  1. Create a bootstrap template
    This is an optional step that makes the build quicker from the start. This makes it so that I can cross off responsiveness off my to do list. I can rest easy knowing that my designs are ready to display at any resolution.
  2. Local by Flywheel
    Fire up a local host via Local app. This replaces MAMP for me and makes setting up a WP environment a blast. Local is such a sleek and lightweight freeware app, I cannot believe it’s free. Local makes it so that you can either create a fresh install of WordPress locally or import an existing one. After that, you can start developing locally without affecting the live site version.
  3. Download an empty Underscores WP template
    Underscores is like WordPress devs’ little secret weapon. It includes all the files you need to get started with a custom template, minus the parts you really don’t need. It comes complete with all the PHP files necessary to run on WordPress so you don’t have to recreate those manually.
  4. Convert Bootstrap pages into Underscores custom template
  5. Custom Post Types and Advanced Custom Fields
    Do your thing to finish up with functionality using these two amazing plug-ins. If you’ve used these before, then you know how powerful they are. Depending on how complex your design is, set up the content areas that you want to turn dynamic and accessible via the admin section in WordPress.

Hopefully, you found this post because you like making websites and are excited to make them and you always try to do the best you can when building. Even when no one can see it, you’re the type of person who wants to make sure everything works correctly under the hood. That’s great, it’s called having pride in your work so let’s dive into the semantics!

What is semantic HTML?

Semantic HTML refers to HTML tags that are used for a more specific purpose. You know how an HTML page starts with a <body> tag? Well, that’s actually a semantic tag. The nice thing about HTML is that the browser is very forgiving about the tags it displays, however, just because it works it doesn’t mean that it’s done correctly. A <div> will act the same exact way as a <section> or an <article>. The browser actually does not care how you write your HTML, as long as it recognizes a tag, content will be displayed. You might be telling yourself, “great, I don’t care either!” That is the wrong attitude and a recipe for issues down the road and you should avoid that as much as possible. 

When the code runs, all HTML tags are essentially the same, but semantic HTML clarifies the roles of parts of the code. Anything can be a <div> but it would be structurally easier to understand if correct tags are being used to identify a header, a section or a button. In the previous version of HTML, the only way to identify those areas is to use either an ID or class attribute, but HTML5 encourages the use of semantic tags instead. 

Some examples of newer semantic HTML tags:

<header>
<nav>
<main>
<article>
<aside>
<section>
<footer>

Why should you care about semantic html?

Semantic HTML will make your code better in many ways. It makes your code easy to understand, it’s better for SEO, and sets you up for better accessibility.

Building a web page or site is easy — until you start to build and manage multiple different ones. Every few months I would look at my own code and it isn’t recognizable. The organization is different because somehow my mode of thinking has shifted and I’ve stuck with using just divs on everything. Sticking to semantic HTML can help clear up any future confusion. 

Some say it’s better for SEO, I’m not an expert but it makes sense that it would affect SEO even indirectly if search results are more relevant within your site. Have you ever seen search results that look like it’s listing the navbar as the content? 

Semantic HTML is a good basis for accessibility. As an example, using the correct HTML elements for their intended purpose as much as possible not only reads better, but can carry some built in keyboard functions for those who aren’t able to use a traditional mouse. The <button> tag for instance can be activated by hitting the tab key.

Want to learn more about semantic HTML? The answer is yes.

Here are a few more people talking about semantic HTML if you need more reasons:

https://www.thoughtco.com/why-use-semantic-html-3468271

https://medium.com/adalab/the-importance-of-semantic-html-78e74fb75ff0

https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML

If you’ve ever worked with wordpress, you know there’s a whole world of plugins within the platform. There are tons of plugins available to help customize your blog or site with but there are some that as a developer, can level up your build.

Here are some of the ones I love to use:

Advanced Custom Fields

I felt like I’ve been doing everything wrong before I learned about Advanced Custom Fields. ACF, makes it so that you can customize the admin side of your WordPress install. When create a new post in wordpress, you start with a completely blank slate. With ACF, you can create designated areas that you can call up in your PHP. In the end, this helps minimize errors for the author during their drafting phase.

From the ACF website:

Add fields on demand
Our field builder allows you to quickly and easily add fields to WP edit screens with only the click of a few buttons!

Add them anywhere!
Fields can be added all over WP including posts, users, taxonomy terms, media, comments and even custom options pages!

Show them everywhere!
Load and display your custom field values in any theme template file with our hassle free developer friendly functions!

Custom Post Type UI

Since WordPress 3.0, it’s possible to create your own custom post type and one plugin I like to use to make that easier is the Custom Post Type UI. It provides an easy to use interface for registering and managing custom post types and taxonomies for your website.

Further customization can be done with Custom Post Types. I’ve seen CPT being used in clever ways, from social media links to a list of portfolio items, CPT provides a really easy way to keep your repeated elements organized on the admin side. CPT works kind of like WordPress’ Reusable blocks whereas instead of creating everything in your site as a regular post, you can now designate areas where you can create more specific types – because not everything is a post and so those types won’t get lost in the mix. After creating new post types, you can then call them up using built-in WordPress hooks.

Check out the official documentation.

Contact Form 7

This plugin takes the pain of creating a form away. You can now create and save a form within your WordPress install to reuse anywhere you want via use of shortcodes.

Contact Form 7 (don’t ask me what happened to the first 6) simplifies form creation by use of tags to create form elements like text fields, text areas, submit buttons, labels by surrounding those tags with square brackets! And it even has a preview pane for the response email that the user will get when they hit submit. This plugin takes the guess work as well as the headache out of creating email forms including the back end code to make it all work.

As a developer, you have decided to move your site to WordPress because you know you can make development easier and updates even quicker for yourself. Plugins fill the bill in terms of ease of use and reliability and that is the entire point of the platform. If you haven’t tried these plugins yet, you have no reason to wait.