Getting started with Jest

In the past, my automated testing for javascript was done in either QUnit if it was a browser app or Mocha if it was a node app. On a new project, I decided to kick the tires on Jest and thus far, I really like it. It did have a bit of a learning curve through to get it up and running, but now writing tests in it feels natural and is going well. Here are a couple of things I've learned thus far.

Jest defaults to an outdated version of jsdom

.jsdom added support for HTMLElement.dataset in a recent version. However, due to minimum node version support differences, Jest by default uses an older version of jsdom.  Switching to the latest version though turned out to be fairly easy. I installed jest-environment-jsdom-latest and changed my package.json to run jest with "testEnvironment": "jsdom-latest". Alternatively I could have used --env=jsdom-latest.

Steal Configs From elsewhere

It's really easy to run down the rabbit hole of learning everything about how to set up a tool before learning if you want to actually use it. To get started, I stole some of the config from an ejected create-react-app application and looked at the docs for using jest with webpack. That was all I needed.

Use .resolves() for your promises

Unwrapping a promise and using .resolves() allows me to easily unwrap promises and keep my expectation in a single chain.  It feels as much like magic to me as promises did the first time I used them.

Additional Resources 

Overall, I'm excited to continue playing with Jest. 

Null Propagation Operator proposal for JavaScript

At it’s January meeting, TC39 (essentially the standards body responsible for JavaScript) heard a proposal for some syntactical sugar that really excites me.  It’s called the Null Propagation operator and allows code that looks like

const firstName = (message
&& message.body
&& message.body.user
&& message.body.user.firstName) || 'default';

to become code that looks like

const firstName = message.body?.user?.firstname || 'default';

Essentially, it allows for eliminating lots of checks to ensure multilevel JavaScript objects are properly defined. This reminds me a bit of the null coalesce operator in PHP as  it allows for easier to read code. It needs to be balanced so these languages don’t turn into Perl filled with secret operators.

The proposal is now in stage 1 which means that TC39 “expects to devote time to examining the problem space, solutions and cross-cutting concerns”. It’s still early to get excited about this, but this is one of those pieces of syntactical sugar that make writing code easier.

Automating your front end development workflow

We all have a workflow. In fact, we all have many of them. Human beings are creatures of habit. In Thinking, Fast and Slow, Nobel laureate Daniel Kahneman describes our use of intuition to remember the steps in our workflows and the order of our workflows. When we wake up, we get out of bed, make our way to the bathroom, brush our teeth, perhaps shower and then make a bowl of oatmeal.

All of this comes naturally and we do it by thinking fast, by retracing the steps we’ve done hundreds of times before. We don’t slow down to think “Should I use the toilet or the sink”. We’ve trained our body to follow a workflow. We can do the same thing with our development workflows by taking some steps to understand how we work. We can then use tools to automate the repetitive tasks.

Continue reading Automating your front end development workflow

You Better Know the Basics

When you first start working with WordPress, you need to know that there are five languages you could be interacting with. You don’t need to be an expert at any of them (and in fact can want make amazing sites knowing none of them), but when you want to make a change to your theme or add a feature that no plugin exists for, it’s important to understand what each language is and how it fits in.

To start let’s take one step back and understand that WordPress is software that runs on a server and that allows users to manage content, and the content to be sent to a visitors browser.

Just had to get that little definition out there.  Now that we know that, let’s actually look at the four languages.

HTML – Hypertext Markup Language

This is the main form that the WordPress outputs the content (if we want to get specific, WordPress uses XHTML 1.0 for all it’s internal functions, but explaining that is beyond the purview of this document). HTML is a structured language that browsers can read to display a web page. Content is enclosed in tags that each have a specific meaning. Tags can (sometimes optionally and sometimes mandatory) contain a variety of attributes. An example of a tag is
[html]<a href="http://aaron.jorbin">Aaron Jorbin is cool</a>[/html]
Learning at least basic HTML is important if you want to be able to display content in a web browser. To learn more, I recommend:

CSS – Cascading Style Sheets

As the name hints, CSS is for styling a page. CSS allows you to style html elements. In WordPress, a theme’s style.css file is also the theme’s way of telling WordPress about the theme. If you open any theme’s style.css you notice that the comments at the top are structured in a key: value manner. CSS utilizes the ID’s, Classes and tags from your HTML. An example of some css is:
[css]#header ul{
width: 400px;
color: #990099;
border: 1px solid #009900;

}[/css]
This block will style all unordered lists that are inside an element with the header ID and give it a width of 400 pixels, color all the text with hex color 990099 and apply a 1 pixel solid border of the color 009900.

JS – JavaScript

Once the page is sent to a browser, if you want to make changes to how the page looks, you’re going to need to have the browser execute it. That’s where JavaScript comes in. JavaScript is primarily a client side scripting langauge. This allows it to change the way the page looks, such as by having a set of tabs that change the content of a panel or having an accordion that grows and collapses to show or hide some options. Am example of JavaScript is:
[javascript] $(document).ready(function(){
$(‘#contentheader’).click(function () {
$(‘#contentheader > h2’).toggleClass("hidden");
$(‘#contentheader &gt; h3’).toggleClass("hidden");
} );
});[/javascript]
.

PHP –PHP: Hypertext Preprocessor

This is where the bulk of WordPress is written and the bulk of where the magic happens. WordPress includes a large amount of functions that plugins and themes can use from tasks as simple as echoing a posts title to creating a custom taxonomy for posts. If you’ve ever opened up your theme’s index.php file, you’ve seen text that looks like:

[php]
<img src="<?php header_image(); ?&gt;" width="<?php echo HEADER_IMAGE_WIDTH; ?&gt;" height="<?php echo HEADER_IMAGE_HEIGHT; ?&gt;" alt="">
[/php]

The is from the header.php file from Twenty Ten and controls the display of the header images.

To learn more about PHP, I recommend the following resources:

SQL – Structured Query Language

This is the language used to speak with Relational Databases.   In WordPress, this is used to add, retrieve, update or delete a post or option.  As the name would suggest, it’s a very structured language.  You say what you want to do, to which table you want to do it and how you want it to go down.  An example of sql is:
[sql]SELECT `option_value` FROM&nbsp;`wp_options` WHERE `option_name` = ‘siteurl’ LIMIT 0,1;[/sql]
Running this query will tell you what WordPress thinks your site’s url is (if you didn’t change your table prefix).    Some more resources for understanding SQL are:

I hope these resources give you a better idea of the languages used inside WordPress.