Updates: Intentions and JavaScript

At the beginning of the year, I posted about my intentions for 2017, in which I laid out a set of learning and project goals. But as these things go, a lot changed in the first half of the year, and basically derailed every. damn. intention.

I quit my job

After about a year at WebDevStudios, I decided it was time to part ways. I had pretty mixed feelings about this. Most there are kind and supportive humans who are more than willing to share their passion and knowledge for all things WordPress and web development. At the same time, however, there were a variety of other factors that caused me a lot of stress and were leading me to burnout city.

Working from home might be overrated

One of the shittiest things about working from home and feeling stressed and burnt out is that you can’t get away from those feelings. EVER. Personally, I want my home to be a safe space, and I’m giving up on the idea of remote work. Well, I’m thinking about it. I’ve worked remotely most of my professional career (since 2006), and only when it wasn’t at all possible to go to an office did it become an issue.

I think completely losing face-to-face interaction is the main issue here. And while WebDev very kindly and generously organized an annual retreat, getting to see your co-workers in the flesh once a year isn’t enough. When you’re interacting through computer screens its easy to dehumanize your co-workers and forget the kind and awesome humans they are.

In a moment of, oh shit, something’s gotta change, I started looking at local opportunities. Like, super local. Right in downtown San Mateo local. And there are some great opportunities for front-end developers / engineers, but with only two years of experience under my belt and a considerable lack of JavaScript understanding, I realized I had my work cut out.

I enrolled in a dev bootcamp

Every front-end developer job in the Bay Area is heavily focused on JavaScript (JS) and JS frameworks like Angular, React, and Vue. So I while I wasn’t disheartened when I was skimming local job listings, I knew I needed to put more intention and focus behind my JS studies. So in April, I began researching different developer bootcamps, looking at both local, in-person immersive bootcamps and remote bootcamps. From a sea of potential candidates, I narrowed my choices down to Hack Reactor and Bov Academy.

Hack Reactor had loads of great reviews, and seemingly a pretty good job placement rate. However, it also came in a the hefty price of close to $20k (for a three month program). 😱 That’s more than my total tuition for the undergraduate degree I earned from the University of Wisconsin-Madison in 2005.

Bov Academy on the other hand, was about half the price, and is conducted solely online. At the time, I wasn’t sure if I wanted to keep working or not, but I did like the idea of having flexibility, a life, etc. Not to mention, the syllabus for Bov stressed teaching JS fundamentals over frameworks, which really appealed to me. Oh, and it’s run by Richard Bovell of JavaScript is Sexy fame, which I’ve talked about in previous posts. But what really sealed the deal for me is that my good friend and former colleague Eric was enrolled in Bov, and his JS knowledge is truly enviable. I wanted to channel my inner Eric, or at least the JS ninja living somewhere in my soul.

It ain’t a bootcamp if you’re not flying through the material

I started Bov in May, and got off to a slow start because not only was a still working, but I was giving a talk at WordCamp Orange County. Regardless, I tried to put in an hour or two after work most days, starting with learning about Markdown and the Command Line, and fast-forwarding through a bunch of stuff to do with HTML and CSS. I tested out of those chapters because if I don’t know that by now, what have I been doing for the past two years, right? 😏

By July, I was free of talk-writing obligations for a few weeks, so I was able to jam on all things JS. It started slow. There was a lot of review of the basics, including data types, etc. However, as I worked through each exercise, I realized things are clicking and sticking for the first time. I was confidently working through problems, and making loads of progress, but not necessarily consistent progress.

Assessing priorities and future goals

At the same time, the weight of work stress was crushing, and I wasn’t able to move through my studies as quickly as I hoped I would. I had to assess where I was professionally and where I wanted to be. I did a mental risk assessment, talked things through with my husband. Ultimately, the payoff of rejoining the Silicon Valley workforce sooner made more financial sense than staying at my job and taking more time to work through Bov. But couple that with the stress situation, and leaving was the only sensible answer.

And now I’m pretty fucking happy

I’m two weeks into studying full time, and I couldn’t be happier. I spend somewhere between four and eight hours studying / writing code. There are no more 7a.m. starts. Hell, I don’t even get out of bed until 8a.m. My overall productivity has been much better. I managed to launch my updated site, am working on refinishing an interior door in my house, and am working on my next WordCamp talks.

What the future holds

My dad is also coming to visit next month, so I’m looking forward to catching up with him, and exploring the greater Bay Area. After that, I’m giving two WordCamp talks, one in Sacramento, and the other in Salt Lake City. If you want to learn about component libraries or get some ideas for methodically approaching WordPress theme development, snap up those tickets!

Otherwise, I’m going to focus mainly on blasting through Bov, with hopes of completing the bootcamp before the end of the year. As I go, I’ll be actively thinking about what I really want to do. Lately, I’ve been loving the idea of coupling data visualizations using D3 with React dashboards.

What about open source projects?

I hope to spend more time working on my open source projects after WordCamp Salt Lake City. A few months ago, I made substantial updates to Alcatraz, where I refactored a load of the Sass and made some minor accessibility improvements.

I’ve also started a new project, the WP Component Library (repo here), which is basically a plugin that allows designers and developers to create and document components used in their WordPress projects (I’m using on this site!). This idea is the cornerstone for both my Using Component Libraries for Rapid Theme Development and Supercharge Theme Development with Component Libraries talks. I wanted to create the plugin as a basis for others to create their own component libraries, and am hoping to add more prebuilt, WordPress components to the site in the coming months.

2017 has been a doozy, but I’m hopeful that the strides I’m taking now lead me to a more fulfilling future. 😄

Intentions for 2017

I hate resolutions, and I think they’re an utter waste of time. Resolutions seem like a one-off list of things to accomplish, they seem to rarely have any concrete action plans behind them. Perhaps that’s why so many people give up on their New Year’s resolutions after a few weeks.

I kinda hate goals, too. As someone with the rebel tendency 1 it’s difficult to hold myself accountable to goals, no matter SMART I try to make them.

But I ❤️ intentions. Instead, I tend to note down things that sound interesting, add a bit of a description, and if I have the time / motivation, I’ll flesh out a plan of attack. For me, it’s a low-stress way of achieving my goals, while also keeping a list of things I can tinker with in my free time.


There is this weird snowballing effect when you first get into development. At first, you’re probably thinking, “Oh, I just need to learn some HTML, CSS, and maybe some JavaScript, and I’ll be good to go.” But reality often sets in after those initial lessons. You start feeling comfortable, and realize there’s even more you need to know, and it starts to feel overwhelming. I’ve finally gotten to the stage where I’ve accepted I’ll never know it all, but I still want to keep learning.

Learn JavaScript Deeply

I know everyone in the WordPress community has been banging on about learning JavaScript deeply since Matt Mullenweg uttered that phrase in his 2015 State of the Word. From a WordPress fan in the Bay Area, I’m interested in JavaScript not only because of the WordPress REST API, but because even Silicon Valley has been going nuts for JavaScript in the past few years. Learning JavaScript seems like a good way to future-proof my career (for now, at least).

I’ve had a lot of false starts learning JavaScript, but I’m ready to make 2017 The Year of JavaScript!

JavaScript for WordPress Master Course

Zac Gordon used to be the WordPress teacher at Treehouse, and after Treehouse decided WordPress—which powers 27 percent of the world’s websites—wasn’t a worthy technology to teach any more, he undertook teaching the WordPress community JavaScript. I was an early-bird enrollee for the course, but only recently started working through the lessons, and I’ve already learned a lot. I actually feel like I could drop jQuery in favor of vanilla JS soon! 😎

ES6 for Everyone

My employer, WebDevStudios, very kindly signed the front-end dev team up for Wes Bos’ latest JavaScript course. I worked through almost the entire first section of the course before deciding it maybe I should learn more about basic JavaScript before digging into ES6. 🔥

JavaScript 30

JavaScript 30 is another Wes Bos course, and another course I got partway through before deciding I need to take a step back to review some JavaScript basics. The simple projects I did complete were fun, and I’m looking forward to digging in again in a few weeks / months. 😬

React for Beginners

I feel like a fucking Wes Bos fangirl now, but I signed up for this course when Wes offered it on sale over Black Friday. React is the shit in Silicon Valley, and I’m not only excited to learn more about it, but I’m excited to learn how to build JS-driven web apps. And from what little I do know about React, this web component approach is very, very interesting.

Miscellaneous front-end topics

Not unlike one’s stock portfolio, it seems important to diversify one’s learning plan. While JavaScript will be the core focus of my 2017 learning, I’d like to sprinkle in a few other topics.

Front-end performance

Now that I have a more-than-reasonable grasp on front-end development, I’d like to learn more about writing better, more performant front-end code. I also feel like this ticks my maximizer strength 2 nicely—taking already good code, and making it better. ✅

CSS Methodologies & Sass

After exposure to several large-scale development projects involving larger teams of developers, I’ve developed an interest in better organization of CSS and Sass. There are loads of different methodologies out there including SMACSS, OOSCSS, and ITCSS, as well as different suggestions for methods for naming CSS classes (BEM, for example). I’ve already been experimenting with SMACSS and BEM, and look forward to sharing more of my findings in the future. 🙌

Test-Driven Development

This point goes hand-in-hand with learning JavaScript, but I’ve come across a few really great articles in the past few months about other front-end development tests (such as visual regression testing), and would love to learn more about these areas. Optimize all the things! 👩‍🎤

Passion Projects

I love having a variety of side projects. I find side projects to be a nice way to relieve stress, practice new language skills, and otherwise try out new ideas.

Redesign & Develop a new theme for this site

I hired my friend Clayton Gerard to design a logo when I thought I’d still be freelancing 3. And even though I’m no longer interested in freelancing, I am still very interested in updating my site, and utilizing the new visual identity.


Alcatraz is a theme framework I started with my friends Braad and Jordan. We were hoping to solve two problems: 1) frustration with a shitty Theme Forest theme heavily utilized at my former studio; 2) boredom (because of said shitty theme). I’m basically the sole maintainer of the project now, but I’ve been actively working on the theme through 2016, and am hoping to merge my mega pattern-library branch back into master before the end of January!

WP Style Tiles

I’m really hoping to release WP Style Tiles to the WordPress repo before the end of the year. It’s in a good, workable place right now, but there are things I definitely need to tackle.

A To-Do List React App

How I organize my learning intentions in Basecamp 3
I use Basecamp 3 to organize and manage all of my intentions.

I know absolutely nothing about React at this point (other than a few passing mentions), but I feel like it could be a good candidate for making a little to-do list app. Right now, I use Basecamp 3 to track all of these intentions and each little step within them. It works wonderfully, but paying $30 a month for multiple non-revenue projects is a bit shit.

Managing These IntenTions

I listed a lot of stuff to focus on in 2017. One might say too many things. But that’s the beauty of intentions. I list out all the things I am interested in, and use them as focus for my free time, not a hard and fast list of deliverables that I need to finish by the end of the year (I’m certain many of these intentions will carry well into 2018).

If you have a hard time sticking with resolutions or New Year’s goals, consider trying intentions in 2017.

HTML Forms and Regular Expressions

Week 3: HTML Forms and Frames; JavaScript Strings; Build Your First Interactive Website of JavaScript.isSexy’s How to Learn JavaScript Properly course has been focused mostly on learning material from the book. Beginning JavaScript, is a very good book for learning this material. I have found the explanations of concepts to be thorough, yet easy to understand, and there are loads of examples throughout the book to help illustrate the concepts discussed. I would say that Beginning JavaScript is the best resource for this particular track.

HTML Forms

HTML forms are great. They allow users to input information into a text box, select options from a list, check some boxes, or even see their progress through a specified task. Forms themselves, however, are rather boring. They don’t really do anything unless you have a destination for the information input (a destination server). Despite this, they are an essential part of the web.

Much of Chapter 11: HTML Forms: Interacting with the User (Chapter 7 in the 4th Edition) felt more like a review of basic HTML concepts than it did JavaScript instruction. There was a lot of instruction around how to create a form using <form />, <input />, and other such tags than actual interaction with the forms, or so it seemed. But of course, there actually was a lot around interaction.

This chapter talked about different event listeners available to form objects including focus, blur, change, and input, and showed some examples of using for loops to loop over radio buttons to determine what was selected and output that information to the screen. One thing I really enjoyed about this chapter was seeing how different using event listeners and selecting DOM elements is from jQuery (because of the more roundabout nature of the JS.isSexy course, I’ve not done any reading about interacting with the DOM using vanilla JS), which is helping me appreciate why jQuery is so widely used today. Now that I have my head wrapped around HTML forms, and jQuery, I’m ready to tackle a small real-world application of using this knowledge in WordPress.

Regular Expressions and String Manipulation

String manipulation is tricky, and it’s tricky for many reasons.

One thing I’m still trying to wrap my head around after finishing Chapter 6: String Manipulation is figuring out when I’d want to use regular expressions for string manipulation. I guess I can see a case if you’re building an app or program that allows a user to do some sort of search, and I could also see using it to do something like check for duplicate words, or replace one string with another. I guess it’s not that I can’t see a use for it at all, but more that I can’t see a direct use for this my current realm of development (much like trigonometry in high school, which, shockingly I haven’t used since).

Not only am I having difficulty wrapping my head around when I might use regular expressions and string manipulation in WordPress development, but regular expressions are hard! One of the examples from the book to validate a post code looked like this:

function isValidPostalCode( postalCode ) {
    var pcodeRegExp = /^(\d{5}(-\d{4})?|([a-z][a-z]?\d\d?|[a-z{2}\d[a-z])?\d[a-z][a-z])$/i;

    return pcodeRegExp.test( postalCode);

Gnarly, right? But the book actually offered some good reassurance: regular expressions are tricky, and they take time and patience to get right, and are best approached by breaking things down. So let’s quickly break down the example above:

All regular expression literals start and end with forward slashes: /.


The first part of this expression ^(\d{5} is looking for something beginning with a five-digit number (\d indicates a digit, {n} indicates the number of something), while the second part is looking for an optional dash (-) and four more digits. The set of parenthesis wrapping (-\d{4})? indicates it’s a group–in this case, of a dash and four numbers), and the question mark at the end indicates that this group is optional. So basically, we’re looking for xxxxx or xxxxx-xxxx where the x represents a digit between 0 and 9. The next part is checking whether we have a UK post code:


First, it’s good to know that UK post codes are formatted something like this: TW10 6UQ. The post code could have one or two letters at the beginning, followed by one or two numbers, maybe another letter, a space, then a number and two letters. So let’s look at this:


The [a-z] looks for a letter between a and z, while the second one [a-z]? looks for another optional letter (remember ? indicates the match is optional in JS). Then the \d is looking for a digit between 0 and 9, while the following \d? is checking if there is another optional digit. So in the case of my old post code, it’d be checking if TW10 is valid.

You’ll see that there is a pipe ( ) following that expression, which is like a RegEx or operator. In this case we’re looking for [a-z][a-z]?\d\d? or [a-z{2}\d[a-z])?. Let’s look at this more closely:


Here, we’re looking for two letters from a to z ([a-z{2}) followed by a number (\d), then another optional letter ([a-z])?). This is to check whether the post code is something like SW1A.


For the final part of the expressions, we’re looking for a digit, and then two letters between a and z.

Honestly, I think finding weird convoluted examples like this is one of the best ways to figure regular expressions out. Even if you’re not necessarily writing your own RegEx, trying to figure out what someone else’s RegEx is doing feels like a good workout.

An Interactive Website

I rounded out this week’s JavaScript learning with Codecademy’s Make an Interactive Website course. I found this particular exercise to be more of a review of the concepts that I have learned up to this point in the JS.isSexy course, rather than learning anything new.

The basic premise was to review a concept, and then recreate some interactivity of an existing site’s functionality, such as Flipboard’s home page, and Twitter’s status updates. The basic idea was right, but I thought some of the instruction was rather misleading. For example, in the Twitter update example they wanted to disable the post button if the remaining character count was less than 0 or equal to 140 (i.e. nothing has been typed into the status box yet). Their correct answer looked something like this:

if(charactersLeft < 0) {
 else if(charactersLeft == 140) {
 else {

when in reality, they I think they should be reiterating good, optimized practices and used this:

if(charactersLeft < 0 || charactersLeft == 140) {
 else {

At the very least, they should have mentioned that was an alternate way to arrive at the same solution.

Week 3 Wrap up

I am really feeling very comfortable with jQuery at this point. I’ve been testing it out on some side projects that are semi-WordPress related, as well as a few other unrelated projects.

Unfortunately, the 5th Edition of Beginning JavaScript did not include a chapter on Windows and Frames, so that is something I missed out learning this week. I also didn’t complete any work on Treehouse this week because I didn’t see any sections in the Full Stack JavaScript track that corresponded well to the book’s materials.

jQuery, JavaScript Objects and the BOM

The second week of learning JavaScript properly went a bit slower than intended. Actually, much slower…I think I’ve spend three weeks reviewing the material from the book, doing the Codecademy exercises, working through the relevant Treehouse courses, and playing around with things on my own. Progress has been slow, but I think it’s been really important for me to try to apply what I’ve been learning as I’m learning it (I’ll share a few examples later).

I really enjoyed Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery. There was a lot of repetition around objects, especially in the Codecademy exercises, but overall, the “week” was great because I felt like I’m getting into the part of JavaScript that I will find most useful–manipulating the Document Object Model, and making truly interactive websites.

Javascript objects

In week two, I learned that JavaScript is primarily an object-based language. Initially, this struck fear in me…what if this is a repeat of trying to learn Java in university (pure trauma)? But it turns out my fears were completely unfounded.

The book, Codecademy, and Treehouse all went into great detail about objects–how to create them, how to access their properties using dot or array notation, and how to create methods for the objects. I was starting to see how my learning in the first week was coming together, and how I was building onto it by learning about objects.

I learned that there are several ways to create an object:

  • Using the object literal
    var thing = {};
  • Using the object object
    var thing = new Object();
  • Creating a reference type
    function Thing( param ) {};
    var thing = new Thing();

At this point, it’s probably been two weeks since I went through the lessons on objects, and while I don’t want to say that I forgot what I learned, I am feeling a bit fuzzy. Hopefully getting back into learning will refresh my memory, and I can start getting an idea of how objects can be utilized in more real-world circumstances.

The Browser Object Model (BOM) and Events

There was a very short lesson in the book on the Browser Object Model (BOM), which is different from the Document Object Model (DOM), despite sounding similar. The BOM refers mostly to very general things that can happen within the context of using a web browser. This includes things like tracking your location to provide you with a better user experience, or serving up a different pages depending upon your browser version and what’s supported. It was actually pretty interesting stuff, even if I’m not entirely sure how I’ll use it yet.


Learning jQuery was the real highlight of Week 2. I’ve been dabbling in jQuery every once in awhile since I’ve been working with WordPress. Prior to learning jQuery, I would look at jQuery code, vaguely understand it, but felt so lost when it came to trying to come up with jQuery code on my own because I didn’t completely understand what was going on. After Week 2 of Learning JS Properly, however, I feel much more confident when it comes to writing jQuery.

The book did a nice job of introducing jQuery as a JS library, which makes working across browsers easier and makes manipulating the Document Object Model (DOM) easier. The only problem is that jQuery is a rather late chapter in the book, and assumes you’re reading the book in order. So the examples discuss working with AJAX (part of JavaScriptIs.sexy’s Week 5 learning), and the DOM (also Week 5) make a little less sense, and the examples in the book are not at all helpful. Still, it was useful for introducing jQuery, and I will probably go back to it once I’ve completed Week 5.

Codecademy, on the other hand, was actually pretty damn good for jQuery. I found it moved a lot faster for jQuery than it did JavaScript, and because they focused mostly on jQuery as a means of manipulating the DOM, I felt like I was finally doing something fun and useful with my new skills. In fact, after finishing the Codecademy jQuery course, I created a little pen about my cats (naturally):

Treehouse’s jQuery course was also very good. It moved a bit slowly at times, but one of the most important things I got from that course was how to think about what I was hoping to accomplish with jQuery, and using that starting point to search the jQuery documentation for the functions/methods that would get me the end result. For me, this was game changing, and addressed that gap of not knowing where to start. The second part of Treehouse’s jQuery course went through jQuery widgets including Animsition, Sticky.js, and Slick.js, which I thought was fun and helpful since I’ve been working with various jQuery widgets for awhile.

For those using Beginning JavaScript, 5th Edition

If you’re following along and also trying to learn JavaScript properly, and you happen to also be using Beginning JavaScript, 5th Edition, you’ll notice that there are a few differences in chapter numbers between the forth and fifth editions. Here are the equivalent chapters between the forth and fifth editions:

4th Edition 5th Edition
Chapter 5, JavaScript — An Object-Based Language [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 5, JavaScript — An Object-Based Language
Chapter 6, Programming the Browser [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 8, Programming the Browser
Chapter 15, JavaScript Frameworks [icon name=”arrow-right” class=”” unprefixed_class=””] Chapter 16, jQuery

Learning JavaScript

One of my main goals for 2016 is to learn JavaScript. Not only because it’s being touted as the future of WordPress, but also because I felt like JavaScript (JS) was one of those very critical web languages that was missed when I took web design and development courses during my Graphic and Interactive Design program. I’ve also come across some really instances where my lack of JS knowledge has been a bit of a roadblock, not to mention the downright awesome shit that can be done with JSt. Have you seen ustwo’s REST API-driven site? It’s fucking amazing and totally driven by JavaScript.

The Plan

If you’re going to learn something, and learn it well, you need a plan, right? After a bit of digging, and I found a really great resource called JavaScript.isSexy (oh yeah it is!). They have a [free!] program they call, How to Learn JavaScript Properly, and it’s totally legit. Not only is there a plan for total n00bs like myself, but they have a guide for experienced developers too (which my husband is currently working through–the family that learns JS together, stays together, amiright?!). So no need to start with the very basics of programming if you already know a thing or two!

The resources they suggest for the beginner track are rather simple, and the only expense is the book:

  1. A book: Beginning JavaScript
  2. Four articles on JavaScriptIsSexy.com
  3. Four Codecademy tracks
  4. Four Code School tracks

Week 1 Review

I started working through Week 1: Making a Website with HTML and CSS; Learn JavaScript Data Types, Functions, Control Flow, and Loops last week. As someone who’s been working with WordPress daily for the past year or so, writing loads of functions, loops, etc., I found this to be a relatively easy, yet interesting week.

The thing is, almost all of my PHP experience has been trial by fire. As in, I have an idea of what I want to do, and roughly how I want to do it, and then proceed to do a reasonable amount of Google searching to find the answer, or better yet, have my code reviewed by a fellow WordPress developer who could help me work through problems and optimize my code. But this week’s reading in on JavaScript has helped me better understand some of the things I’ve been doing. Like for loops, for example. To get multiple images in my portfolio posts, I use a for loop to cycle through the images and generate the markup like this:


I had a rough idea what that for loop was doing before, but now I definitely understand what it’s doing, and that’s pretty awesome. Not only that, but I’ve got conditional logic down (if / else if / else) as well as other types of loops (while / do…while).

Every time I learn something new, I try to challenge myself to come up with an original exercise to practice my new JS skills. Here’s my favorite from this week (note: if you try to run this, it will create some pop-ups for user input):

Improving this Course

I know it’s early days, and I’m really stoked about this course and the track I’m on, but I definitely think there are a few things to that could use improvement.

  1. The website refers to Edition 4 of Beginning JavaScript, and I decided to purchase Edition 5. Not a big deal, but there are definitely differences in chapters in the latest edition, and it might be helpful if the Beginning track was updated to reflect the latest edition of the book.
  2. Codecademy is really boring. They basically spoon-feed you information, and it becomes tedious really quickly. I’ve been finding that the best part of Codecademy are end of track challenges.
  3. Consider swapping Codecademy for Treehouse. Yes, I know one advantage to this plan is that the only expense is the book, but the Treehouse Full-Stack JavaScript track is legit, and a really nice supplement to this course. So for now, I’ll be using the book, Codecademy, and Treehouse as resources.

On to Week 2…

I’m really stoked about Week 2: Learn JavaScript Objects, the Browser Object Model (BOM), and Events; Learn jQuery. I’ve dabbled a very small amount in jQuery over the past few months, and what I’ve tried and learned so far has been awesome (check out the category and archive toggles on Clayton Gerard’s site for some nifty jQuery slideToggle action), and I’m looking really forward to learning some new tricks to improve the interactivity of sites I create going forward.

Is anyone else out there trying to learn JavaScript? What sources are you finding useful?