Creating an item inventory array in GameMaker Studio 2 from a Google Spreadsheet exported as JSON

In this article: creating a Google spreadsheet of items for my RPG-style GameMaker game, exporting the spreadsheet as JSON, importing the JSON into GameMaker Studio 2, processing the item data into a usable format, and managing the player’s collection of “owned” items.

I’ve been building a hobby project in GameMaker Studio 2 for about a month now. I wanted to add the concept of “items” to my game – stuff like swords, armor, etc. – that grant stats and can be won via quests, managed in an inventory, and assigned to individual heroes. (Typical RPG stuff.)

The game itself might have hundreds or thousands of items (in theory), but the player is likely to have just a small selection of the available items in their inventory. This feature calls for two separate data structures: one to hold all of the game’s items, and one to hold the items the player has in their possession.

Note: I’m pretty new to GameMaker, and I’m documenting my findings as I go for future reference and ease of sharing with friends who are also using GameMaker. There’s quite possibly a better/easier way to do this than the method I’ve cobbled together here. 

Creating the items spreadsheet

For the items themselves, I created a spreadsheet in Google Sheets. The items are arranged in rows, and they have a collection of stats.

Some of them are restricted to certain classes, and Google Sheets lets you restrict choices in a particular field to a predefined list of options so you don’t make typos or introduce inconsistencies where you didn’t want them.

Exporting the data from the spreadsheet

I used Export Sheet Data to export my items as a JSON object. I checked these two settings:

  • Export sheet arrays
  • Export contents as array

Checking these two settings simplifies the structure of the JSON object I’ll be working with inside GameMaker.

Export sheet arrays

With “Export sheet arrays” checked:

    "name": "Rusty Broadsword",
    "prestige": 0,

Without “Export sheet arrays” checked:

    "Rusty Broadsword": {
      "name": "Rusty Broadsword",
      "prestige": 0,

As you can see, leaving this setting unchecked creates another layer of nesting. I found deeply nested JSON difficult to deal with inside GameMaker, so I wanted to minimize how many “layers” my data set had.

Export contents as array 

With “Export contents as array” checked:

    "name": "Rusty Broadsword",
    "prestige": 0,

Without “Export contents as array” checked”:

  "items": [
      "name": "Rusty Broadsword",
      "prestige": 0,

With this setting off, you still get all your items in an array but that array is itself a property and it’s contained within an object. This is just more “layers” to drill through in GameMaker and I prefer the simplified data structure.

The end result was this JSON object, which I’ve pasted into a gist:

Bringing the item JSON data into GameMaker Studio 2

My main room has a controller object that I use to set up gameplay globals. In its Create script, I currently just use a flag to see if the init script has run yet (so it doesn’t run every time I re-enter the main room).

For loading the JSON data line by line, I used Jason Lee Elliott’s method he describes on his blog here.

if (!initGameDone) {
  //currency defaults = 100; = 10;

  //load all the game items from json
  var theJsonFile = file_text_open_read("items.json");
  var theData = "";
  while (!file_text_eof(theJsonFile)) {
    theData += file_text_read_string(theJsonFile);

  var decodedData = json_decode(theData);
  var defaultStuff = ds_map_find_value(decodedData, "default"); 
  //see "default" explanation below 

This is where it started to get weird. theData is an array of objects (makes sense). decodedData is a ds_map made from that array of objects (still making sense). Looking in the debugger, though, with a breakpoint on the line that creates defaultStuff, we can see there’s ds_list in here called “default”:

Weird, I didn’t put that there…  GameMaker did, and it’s documented here. From GameMaker’s documentation:

NOTE: When decoding arrays, there is a map with the key “default” ONLY when an array is the top level structure, and ONLY for that top-level array. Internal lists decode directly to ds_lists without being enclosed in a ds_map.

That’s why defaultStuff is made from finding the “default” value within decodedData.

The next I did was create a global variable to hold all the game’s possible items. This global variable is a ds_map. I wanted it to be a map so that each item in the game could be looked up by its name (I think “Rusty Broadsword” is more memorable and easier to work with than something like an ID number or a position in an array).

  global.allGameItems = ds_map_create();

  for (var i = 0; i < ds_list_size(defaultStuff); i++) {
    var rawItemMap = ds_list_find_value(defaultStuff, i);
    var newKeyName = ds_map_find_value(rawItemMap, "name");
    ds_map_add(global.allGameItems, newKeyName, rawItemMap);

This is just a classic for-loop that looks at each item (represented as a map) in defaultStuff. It grabs the name property out of the map to serve as the key, and uses the item’s map as the value.

Putting items in the player’s inventory

The last step is to actually give a couple items to the player.

The player’s inventory is as ds_list (array) of ds_maps. In this code, item1 and item2 are actual items from the allGameItems ds_map that are found by their name.

  global.playerInventory = ds_list_create();
  var item1 = ds_map_find_value(global.allGameItems, "Rusty Broadsword"); 
  var item2 = ds_map_find_value(global.allGameItems, "Blue Cotton Robe");
  ds_list_add(global.playerInventory, item1);
  ds_list_add(global.playerInventory, item2);

  show_debug_message("player inventory size: " + string(ds_list_size(global.playerInventory)));

  //print what's in the player's inventory
  show_debug_message("PLAYER INVENTORY:");
  for (var i = 0; i < ds_list_size(global.playerInventory); i++) {
    var itemi = ds_list_find_value(global.playerInventory, i); 
    show_debug_message(ds_map_find_value(itemi, "name"));

  initGameDone = true;

Since I haven’t yet implemented the player’s inventory screen, I wrote a for-loop to print the name of every item in the player’s inventory to the console. Hopefully this is self-explanatory: it just iterates through the player’s inventory and prints the name property of each item it finds in the inventory.

And there we have it: these items are managed in Google Sheets, exported as JSON, imported into GameMaker, and placed in the player’s inventory by name.

Adapting an extension written for GameMaker Studio 1.4 for use in GameMaker Studio 2.0

In this article: how I adapted an extension written for GameMaker Studio 1.4 (the free version) so that it worked in GameMaker Studio 2 (the new/paid license version).

I wanted to use dicksonlaw583‘s JSOnion extension in GameMaker Studio 2, but the extension was written for GameMaker Studio 1.4. Compiling with the extension in use kept giving me a vague “invalid token” error in 4 different places (luckily, line numbers were included) but no clues as to what token, exactly, was invalid.

It took a lot of trial and error and digging on Google to figure it all out, so I’ve documented what I needed to do here in case it helps someone else.

Importing the Extension

First thing I got confused on was how, exactly, to bring the extension code into GameMaker 2.

The JSOnion instructions say “drag JSOnion.gml into your open project”, but that doesn’t work (or at least it didn’t for me, no matter where I tried to drop).

What I actually had to do is go to the Resources panel and right click on Extensions. Select Create Extension.

Escaping characters

Next, I tried to run my game but the build failed due to a number of “invalid token” errors.

Each error looks like this:

Error : gml_Script__jso_decode_map(84) : invalid token

I was pretty lost here, and the GameMaker docs provided little help.  Searching for “invalid token” comes up with nothing and this list of GML compiler errors offers only a vague hint:

You have an invalid character in your game code, which can happen with foreign language characters or Unicode

Hmm. The extension code looked okay to me…at least, it wasn’t full of bizarre characters and nothing looked weird at the line numbers GameMaker was complaining about.

This particular forum post gave me an important clue: single quotes are considered invalid characters in GML 2! Okay, that was something to go with. I went through the JSOnion.gml code and replaced single quotes with double quotes and, in order to do things like a set of double quotes within double quotes, escaped the interior set of double quotes with a backslash.

I also discovered (through more trial and error) that backslashes used for purposes other than escaping things are also considered invalid characters, so I had to escape those, too.

In summary, to adapt an extension meant for 1.4 to work with 2.0, you have to go into the .gml file and: 

  • Remove usages of single quotes
  • Escape \ and ” characters
    • escaped slash looks like this: “\\”
    • escaped double quotes looks like this: “\””

Note: each time I wanted to test a change I made to JSOnion.gml, I had to go into the JSOnion extension, delete the reference to the file, and re-add the file to get the changes.

Adding macros (constants)

One more thing to do: add the macros.

JSOnion came with a file, constants.txt, that I wasn’t sure how to use. The repo instructions gave a clue: “import constants.txt as macros”, but I think there might’ve been some UI changes since GML 1.4, because I couldn’t figure out how to import this file in the version I’m using.

What I ended up doing was adding the constants manually in the “Macros” section of the extension properties. (See screenshot below).

(These are indeed required, too – if you don’t add the macros and you try to use JSOnion methods, you’ll get errors when trying to read a variable that wasn’t set.)

With the extension code cleaned of “invalid tokens” and the macros in place I can now build.

Was this the right way to do it? I don’t know – I’ve only worked in GameMaker for a few weeks and this was my first attempt at bringing in an extension, so I am far from an “expert” at this point.

Also, I haven’t had a chance to actually use the extension code yet (that’s a subject for another post), but I did get it building so I wanted to share the process in case anyone else is also trying to adapt an old/free extension for the newer/paid version of GameMaker.

Fixing WordPress site’s low mobile score in Google’s PageInsights with W3 Total Cache

In this article: Steps I took to optimize a WordPress-based site for Google’s upcoming mobile search prioritization. It started with a PageSpeed Insights score of 8/100 and ended at 62/100.

Plugins used: W3 Total Cache

Time spent: Several hours of trial and error, but this guide should help you through it much quicker.

Google announced in January that they’re going to take a site’s mobile speed into account for searches beginning July 2018. I’ve always tried to make my WordPress sites mobile-friendly, but it looks like there’s some room for improvement.

One of my biggest (and highest-earning) sites scored just an 8 out of 100 for mobile optimization. Ouch.

(You can test your own site here: )

What I’ve already done to optimize this WordPress site

I’ve managed this site for a few years and have already put some effort into optimizing it for search and mobile.

The site already scores well for these categories:

  • Avoid landing page redirects
  • Enable compression
  • Minify CSS
  • Minify HTML
  • Minify JavaScript
  • Optimize images
  • Prioritize visible content

Some of those scores are probably due to the site already using a CDN, lazy loading, a good caching plugin, and a good hosting plan. Here’s what the site uses:

However, there’s more work to be done! Here’s what I did to raise my Google Insights mobile score.

Fixing render-blocking JavaScript on above-the-fold content on a WordPress site using W3 Total Cache and a CDN

Let’s look at this render-blocking JS/CSS problem first:

Eliminate render-blocking JavaScript and CSS in above-the-fold content. 

Your page has 8 blocking script resources and 12 blocking CSS resources. This causes a delay in rendering your page.

None of the above-the-fold content on your page could be rendered without waiting for the following resources to load. Try to defer or asynchronosly load blocking resources, or inline the critical portions of those resources directly in the HTML.

This message is followed by a list of all the JS and CSS scripts causing the render blocking, which were 8 JavaScript files and 3 CSS files in my site’s case.

These guides were helpful to me while working on this problem:

To fix the blocking JavaScript files I had to do a number of things to configure W3 Total Cache. This part took a couple hours of trial and error and some steps were not covered in the guides I used (or my situation was different from theirs), so I’ve attempted to document the process as I experienced it in this guide.

First, I enabled Minify in the general W3 Total Cache settings. Go to Performance > General Settings > Minify > check the “Enable” box and select the “Manual” radio button.

Next, go to Performance > Minify to work on minify settings as they pertain to JavaScript and CSS. You’ll need the list of blocking files from PageSpeed Insights report. 

Watch out! The file paths shown in the PageSpeed Insights results might be truncated. To get the full path, you have to hover over the truncated path and copy the path from the tool tip

In other words, make sure you are copying a complete path:

and not a path with … in it:

In Performance > Minify there are a variety of options that apply to all the script in a particular area (before head, after body begins, before end of body). In my case, code in the head tag was already minified, so I set it to “Combine only” (rather than re-minify it). I also needed to keep it blocking, or else my page filled Chrome’s console with “can’t find JQuery!” errors.

Next, under JS file management, add all of the blocking files from the PageSpeed Insights results – be sure to get the full file path, not the truncated version.

Also! If you’re using a CDN, you’ll have to change the domain in the file paths that you paste. 

Instead of this:

You need to use your website’s actual domain. For each path you paste, change the CDN part to be your site’s domain instead, like this:

Or you can remove that part of the url entirely and go with something like:


…which is what I did for mine:

Note: I needed to set the jquery files to embed in <head> to avoid a slew of console errors when visiting the site. As per the earlier settings, anything embedded in head is going to be blocking. I think some blocking files might be inevitable; the point of these settings is to tease out which files belong where in the load sequence.

Save settings and purge all caches, then test again in PageSpeed Insights.

Woohoo – no JS files blocking loading. I also tested the site manually, and verified that it doesn’t look like garbage and doesn’t fill the console with errors. So far, so good.

Fixing render-blocking CSS with Autoptimize

I initially set up all the CSS file paths in W3 Total Cache but ran into these two cases that I couldn’t figure out how deal with through W3 Total Cache alone:

One blocking css file is from w3tc itself:

And another is from Google Fonts:

To fix the Google Fonts, I installed the very lightweight plugin Autoptimize and checked these boxes:

I also used Autoptimize to disable Google Fonts. Whether you want to do this is up to you, but I went ahead with it because I am happy with a default system font for this site.

To fix the w3tc minify, I disabled CSS in W3TC and let Autoptimize handle it. I also had to uncheck this setting:

Finally, for the sake of completeness, here’s what my HTML minify settings look like:

At this point, I loaded my site and found it was using serif typefaces on buttons and it wasn’t scaling the hero (header) image correctly. To fix this, I added custom CSS to Autoptimize’s custom CSS section. This CSS gets loaded right away, so the page doesn’t get stuck waiting on the js or css to “fix” certain issues that are visible right away to a visitor.

.button {
   font-family: "Open Sans", sans-serif !important;

.header-homepage {
   padding-top: 120px !important;

One more thing: I also uploaded a significantly more compressed “hero” banner image jpg to the site (old size: about 350kb, new size: about 110kb).

The reward for all these optimizations:

Note that I still have one render-blocking w3tc js file. For now, I’m going to call this “good enough”, since I don’t know how to fix this last one without breaking some fundamental aspect of the site, so I’m going to move onto the expiry problems and see if I can get the score higher that way.

Fixing “leverage browser caching” with W3 Total Cache

PageSpeed Insights found a few files it thinks could leverage browser caching. These files are all .js files.

I found this guide helpful and accurate at the time of this writing: Leverage Browser Caching with W3 Total Cache

The first step is to enable browser caching in W3 Total Cache’s settings. Go to Performance > General Settings and make sure Browser Cache is enabled.

Then, go to the actual Browser Cache section of the plugin. As per the guide, I ensured these boxes were checked:

  • Set expires header
  • Set cache control header
  • Set entity tag (eTag)
  • Set W3 Total Cache Header – this one was not already checked for me
  • Enable HTTP (gzip) compression

(I re-ran the PageSpeed Insights test at this time just in case that one checkbox was all it took. Alas, there was no change in the results.)

The next thing I did was scroll down a little bit to the CSS & JS section. My “expires header lifetime” was set to 172800, which is way less than the recommended 604800 (2 weeks) the guide recommends. I saved that change, cleared cache, and ran the test again.

Now I have just three files with unsuitable caching times:

Alas, two of the remaining files are out of my hands: they are Google Analytics’s own .js files. After reading this guide to browser caching Google Analytics, I decided not to try to cache the analytics js file myself. Doing so would require manually updating it periodically. Even the guide’s author says they don’t recommend this method. That’s fine by me.

But how about this emoji js file? I don’t use emojis on my site, so I wouldn’t mind removing them and reaping a small page speed boost.

Normally, removing them is as simple as adding these two lines in your site’s functions.php:

remove_action( 'wp_head', 'print_emoji_detection_script', 7 );

remove_action( 'wp_print_styles', 'print_emoji_styles' );

But I’m using a pro theme that gets automatic updates (which will clobber this code if I add it to functions.php), and I don’t want to make a child theme for the express purpose of removing emojis.

So, I did what any good WP user does and installed yet another plugin: Disable Emojis. (Yes, I also canceled Christmas and summer break while I was heartlessly removing emojis from my very srs blog.)

I ran PageSpeed Insights again and….

Woohoo! (It initially came out worse, but network latency has some affect on the score, too. I tried again and got a 62/100).

My report has never looked better:

PSI estimates this page requires 2 render-blocking round trips and ~26 resources (0.4MB) to load. The median page requires 4 render-blocking round trips and ~75 resources (1MB) to load. Fewer round trips and bytes results in faster pages.

Fixing the “flash of unstyled content”

A new problem has been introduced by all this work: now my page looks unstyled for half a second or so while it’s loading.

I used this tool: Critical Path CSS to identify a the “minimum” CSS needed to make the “above the fold” content look good (it’s a huge block, I’m sure a human could produce something more elegant but for now, it’ll do).

I put this CSS into Autoptimize’s “above the fold” CSS section and the flash of unstyled content seems to look better now, though I still see the fonts looking bad before the preferred “open sans” style comes into effect.

Done… for now

At this point, I’ve gotta call it good enough for now. My site’s score went from 8/100 to about 62/100. I still have a one blocking JS file that I don’t know what to do with and two files from Google Analytics with unsuitable cache expiration times.

I’ll update this page when I make further improvements to the site.

How to convert a 4-byte hexadecimal sequence in a little-endian architecture into decimal

Here is my technique for solving the problem of converting a 4-byte hexadecimal sequence in a little-endian architecture into decimal.

This may seem rather niche but it was a surprisingly large part of Week 5 in my CS271 class. The class’s materials and extra help I found around the web seemed to go off on tangents that were interesting but unrelated to solving this kind of problem quickly, and all I really wanted was a simple step-by-step guide I could use on exams.

Therefore, I am sharing my simple 5-step technique for converting hex to decimal in a little-endian architecture here! Hope someone else finds it helpful.

Example problem:

The four-byte sequence 0x86 0x65 0x53 0x82 stored in consecutive memory cells in a little-endian architecture represents ___________ (decimal) when interpreted as a 32-bit signed integer.

From reading this, we know: 

  • it’s little-endian, so we are going to reverse the order of the bits
  • our result will be signed

Step 1: Reverse the bytes

Take the bits in blocks of two and work right to left.

0x86 0x65 0x53 0x82 becomes 0x82536586

Step 2: Look at the most significant bit and determine if there will be a negative result

0x82536586   <-- that's this dude in red here

The most significant bit here contains an 8.

We know that in hex a most-significant bit of 7 or more means we are looking at a negative number. (If this were a positive number, ie: the most significant bit is between 0 and 6, then skip ahead to Step 4.)

Step 3: Since we are working with a negative number, flip the bits (subtract our hex sequence from FFFFFFFF) and add 1

- 82536586

Add one to the result:


The result is the hex sequence we will use for the next step.


Step 4: Multiply each term by 16 raised to a power

To convert a hex value into a decimal value, we multiply each “position” in the hex sequence by 16 raised to a power. Working from right to left, we know that furthest-right position is 16^0 (so, just a 1). The second-from-right position is 16^1 (so, just a 16). The third-from-right position is 16^2, and so on.

Recall that A = 10, B = 11, C = 12, D = 13, E = 14, and F = 15 when working in hex.


The result of this long sequence is:


Remember that negative sign? Now’s a good time to stick it on.


And there you have it: the result is -2108463738.

Some final notes

  • Be sure to observe whether the problem expects a signed decimal result or an unsigned decimal result. If the problem is asking for unsigned, you can skip the FFFFFFFF subtraction step entirely, even if the most significant bit is 7 or higher.
  • Remember that when working with a signed hexadecimal number, you look at the most significant bit to determine if it’s negative or positive.
    • 0-7 = positive
    • 8-F = negative
  • If you had to do the flipping step, don’t forget to put that negative sign onto your final answer!

OSU eCampus CS325 Analysis of Algorithms review & recap

This post is part of an ongoing series recapping my experience in Oregon State University’s eCampus (online) post-baccalaureate Computer Science degree program. You can learn more about the program here.

Six-word summary: brutally difficult, but it’s over now!

CS325 – it me

In CS325 you’ll study recurrences, asymptotic bounds, probably every major sorting algorithm plus some silly ones, dynamic programming, graph traversal, recursion, linear programs, and more.

CS325 Review

Well, the rumors are true – this class is hard. I’d place it in a tie with CS162 for overall difficulty. But where CS162 tries to kill you with a brutal workload, CS325 tries to kills you with instructional materials that don’t adequately prepare you for the homework or the exams.

The lectures are not sufficient preparation for the homework – you’ll rely on YouTube and Stack Overflow to get through each homework question. The weekly homework assignments are time-consuming and the documents you prepare are long. Mine were anywhere from 5-15 pages of graphs, pseudocode, and written explanations for my work.

If you can take CS325 by itself, you should.

There was a noticeable (and distressing) disconnect between what was on the homework and what was on the exams. I scored 100% on the homework assignments, but failed the midterm. It’s like the homework and exams were from different classes!

A week or so after the midterm was graded it was opened up so students could see which questions they got wrong and dispute wrong answers, if they could prove they had it right. I thought for sure I’d prove the TAs wrong on at least one or two of mine, so I reworked all of my incorrect answers – and reworked and reworked them – until I eventually figured out what subtle thing I missed while taking the test.

I definitely struggled in this class, and for the first time I wondered if I even belonged in this CS program.

Class structure

  • 10 weeks
  • 7 assignments total
  • Group work: weekly graded discussions on Canvas, a 3-person group project the last two weeks of the quarter
  • Proctored midterm (20% of final grade), proctored final (20% of final grade)
  • No homework assignment the week leading into the midterm
  • No homework assignment once the group project at the end begins
  • You can bring a 8.5″ x 11″ sheet of typed notes (size 6 font!) into the midterm and the final with you

Tips for CS325

Take every extra credit opportunity (they’re rarer than you think). There was an extra credit opportunity on the first homework, but there wasn’t another opportunity until the last homework!

Comment early, often, and be helpful in the Canvas discussions. There’s an opportunity for 1 point of extra credit in each of these weekly discussions. I was able to earn it most weeks by doing all of the following:

  • As soon as the discussion thread was available, I “structured” the discussion by creating a series of replies, one for each homework question. In each reply, I posted the contents of the homework question for easy reference. This gave each homework question its own thread for my group mates to use.
  • When I figured something out on the homework, I posted pseudocode or a “how I approached this problem” guide to the Canvas discussion to help others. I spent easily 1-4 hours on creating this type of “tutorial”, every single week.
  • I started the homework right away. On Sunday I did the lectures, on Monday I did question 1, Tuesday I did question 2, etc. By midweek, I had half the homework done and was able to assist with answering questions from group members just starting theirs.

This was a ton of extra work. I see why people blew off the Canvas discussions. But the discussions did two key things for me:

  1. It helped my understanding of the various topics to revisit them and “teach” them to others
  2. The extra credit helped me squeak by with a 92.58% in this class, which got rounded up to a 93% (the cutoff for an A). I needed every. single. point. I could get.

Study recursion – put it on your exam sheet! A lot of the class’s materials (lectures, book reading, and homework) will “gloss over” recursive solutions to problems. They’ll be like, “this is the slow way to do it with recursion, now here’s the better way to do it with <the technique of the week>”.

You might be tricked into thinking the exam will want you to know the fancy technique – you’d be wrong. The midterm will expect you to produce the recursive solutions, which you won’t code for the homework or even look at past the few minutes they get in each lecture. I thought this was unfair of the class, so that’s my tip to future CS325 students: study the recursive solutions. Put them on your “cheat sheet”. Know them inside and out!

The extra credit competition among the final project groups is a poorly-designed zero-sum game that you have almost no chance of winning. Here’s how it works: 60+ groups implement algorithm(s) to solve a given problem in as little time as possible, then post their best running times to a Canvas thread. The assignment won’t tell you what “good” times look like – you’ll figure that out by looking at results that trickle in from the other groups. The winner is whichever group (or groups) has the best performance times in the two different categories.

I think this competition could be made better by awarding extra credit to any (and all) groups that can pass a certain benchmark, since that’s hard enough on its own. My group picked difficult-to-implement but highly performant algorithms and did our work in C++ and we still lost to multiple other groups by a little bit. Unless you’re super dying for that extra credit, I think the winning move here is not to play. Take the time you’d spend optimizing your final project towards an unknown goal and spend it studying for the final instead.

The book sucks. (This is the book.) Okay, maybe the book doesn’t suck, but it doesn’t map nicely to the class material and it won’t walk you through how to solve the kinds of problems you’ll face in the homework. I think the teacher requires this book just for the sake of requiring a book.

You’ll need the power of Google (and YouTube and Stack Overflow) to uncover how-to’s and guides for actually solving problems. I still did the readings every week, just in case something useful turned up, but the book is more like an introduction to the topic, not a guide. I relied almost 100% on external resources to actually learn this class’s material.

There are better videos and walk-throughs for every topic this class covers on YouTube and people’s blogs. Seek them out! There are people who recorded themselves going step by step through real problems pertaining to topics like recurrences and dynamic programming in ways the class-provided lecture videos do not. I owe my A in this class to the generous people of YouTube who took the time to demonstrate these difficult topics.

More than any other class before it, CS325 requires self-teaching and finding help on your own. Whether that experience is worth $1900 is left as an exercise to the reader – there is, of course, the argument that self-teaching is what you’ll do on the job so you might as well get used to it, but there’s also the argument that $1900 ought to buy you at least a little bit of hand-holding.

I’ll be in two classes next quarter: CS271 (Assembly and Architecture) and CS361 (Software Engineering I), so say hi if you’re in either of those with me!

Fix: Font Awesome icons missing with Mesmerize PRO theme and MaxCDN

In this post: missing Font Awesome icons due to missing CDN configuration.

I have a WordPress blog that uses MaxCDN, W3 Total Cache, and the Mesmerize PRO theme by Extend Themes which includes Font Awesome icons.

After installing and activating the theme on my website the Font Awesome icons appeared as boxes:

Missing icon looks like a box
Another missing font awesome icon
Another missing font awesome icon

And I could see these (canceled) errors in the Network tab:

Errors in the Chrome Network tab. fontawesome-webfont status is canceled.
Errors in the Chrome Network tab. fontawesome-webfont status is canceled.

The referrer is

That referrer,, isn’t allowed to serve this file. But there’s an easy fix: you can whitelist the CDN itself in the CDN.

The fix: whitelist the CDN itself

In MaxCDN, go to Pull Zones > Security > Whitelist.

You might already have in here. What you need to add is the domain your CDN files are pulled from.

MAXCDN settings: Pull Zone tab, Security tab, whitelist tab, add to whitelist

In my case, that was a domain that took the form of, but you can find out what yours is by looking in the Network tab while you try to load your site. Look for a red-colored error message and open the Headers.

Anyway, the fix is as easy as adding the domain to this list of whitelisted domains and waiting a few minutes (for me it was about 10 minutes). Reload your website and the Font Awesome icons should now appear.

Note: You will probably need to Purge All Caches, too, once the time has passed to actually see the change in your browser (I use the dropdown in the WP toolbar).

WordPress toolbar with W3 Total Cache Performance section rolled out, Purge All Caches selected

My W3 Total Cache settings

(Just in case it’s useful to someone else trying to debug this problem)

My W3 Total Cache settings are set to upload .css, .tff, .otf, .woff, and .woff2 files.

W3 Total Cache settings for which theme files to upload by extension. css, js, gif, tff, otf, woff, woff2, etc.

Provided again as text so you can copy/paste.

wp-includes file types to upload:


Theme file types to upload:


This is a pretty specific configuration issue but hopefully it’ll help someone else out there!

I made an AngularJS web app! Check out the OSU CS Course Explorer

Browse 300+ candid student reviews and helpful tips for OSU’s online CS degree courses

Check it out:

What it does: Aggregates real student course reviews from the OSUOnlineCS subreddit survey, which dumps data into this spreadsheet, and displays that same data in an easier-to-navigate format.

Who it’s for: OSU CS Ecampus students

Technologies used:

The rest of this post is about the app itself (not its code). If you’re hoping for some code walkthroughs, stay tuned – I’ll be writing a few in the next month or two before I move onto my next side project.

App inspiration

I started OSU’s online CS degree program Fall 2016, and I am so grateful for the opportunity the school has given me to receive a formal CS education.

Ever since I applied to the program I’ve been an avid reader of the OSU CS subreddit. I was always looking for info on my next class – survival tips, strategies, what to study, etc. The course survey (linked in the sidebar) contains years of useful student data but at 300+ entries, it was becoming difficult to browse or parse on a macro level (ie: there was no way to look at it and determine how time-consuming on average a particular class might be).

I had the idea for a simple web app that would take the Google spreadsheet data and reorganize it by course, listing all the tips (with timestamps) and aggregating the time spent and difficulty data into a couple of easy-to-read pie charts. I knew other people would find this useful, too, so I planned to make it publicly and freely available once it was presentable. (From this experience I also wanted a finished, portfolio-worthy app that I might show to a potential employer.)

I started the project in the summer of 2017, worked on it bit by bit whenever I wasn’t swamped with classwork (or my full-time job, or my baby who was 9-13 months old while I worked on this, or the cross-country move I did in August). It’s definitely a testament of what you can build even if you don’t have loads of contiguous free time, as long as you are consistent and keep going.

Browse the code

If you want to browse the app’s progress (and see some of the mistakes I made along the way) you can browse the GitHub repo for it here. I tried to leave concise comments explaining what I was doing, in hopes that other students and beginning web devs would find it helpful.

I plan to write a few blog posts dedicated to different sections of the app’s code. I love “here’s an app I built and how I built it” type posts myself and owe a lot of my own knowledge to them, so I’ll try to give back a few contributions of my own.

Why I chose AngularJS

I know everyone’s got the hots for React these days but I had just come off of 2 years of working in Ember and wanted to return to my ancestral headwaters for a bit and build something in the framework I got my start in. I wanted to see if all my “I liked how that worked in Angular better” feelings towards Ember were actually accurate or just some rose-colored tinting of history (as it turns out, I really do prefer Angular to Ember :P)

I don’t know if I’d pick it again, though. The world has largely moved on from AngularJS (to Angular 2 and beyond, and React), but there’s still a ton of helpful blog posts and Stack Overflow questions about every imaginable Angular topic (way more than Ember has, that’s for sure) so for that reason, I think it’s still a good, established choice if you’re new to web development frameworks and want to try something.

Thanks to contributors

Special thanks goes to Yong Joseph Bakos for his pull requests after the project launched – cleaning up some cruft in the codebase, improving tests, documentation, etc.

Special thanks also goes to Jonathan Burley for helping unstick me at some critical points in development, like when I needed help customizing the canvas legends in a way that wasn’t documented and when Heroku was being a pain.

I feel like I always learn so much from even the briefest encounters with other developers, so I am grateful for the help I received along the way.

OSU eCampus CS261 Data Structures review & recap

This post is part of an ongoing series recapping my experience in Oregon State University’s eCampus (online) post-baccalaureate Computer Science degree program. You can learn more about the program here.

Six-word summary: Loads of implementations, light on context.

Heaps, AVL trees, hash tables, and a whole bunch of ways to sort data – you’ll do it all in CS261, but you might finish the course wondering why.

CS261 Review

This class is all about data structures. Some colleges combine data structures and algorithms into one semester-long class, so I’m happy that Data Structures got its own dedicated 10 weeks in OSU’s program.

Some of your new friends in CS261

Class structure

  • 10 weeks
  • 6 assignments total, evenly distributed through the quarter
  • Proctored midterm, proctored final
  • Nice slow-down in assignments and workload as midterm and final approach, giving sufficient time to study
  • Weekly group obligation: 2-5 worksheets to submit as a group (however you divvy it up is up to you) and typed weekly meeting minutes
  • Steady, even workload

The first 4 weeks will revisit topics from CS162, so if you wanted more practice reversing a linked list or resizing an array, you’ll get to do those things again in CS261.

After the midterm, the class spends 1 week on each topic: AVL trees (including tree sort), min heaps (including heap sort), hash tables (open addressing and chaining), and graphs (including Dijkstra’s). Big-O complexity is also covered in the context of the aforementioned subjects.

The video lectures are decent but to truly understand these topics I recommend searching the Interwebs for additional resources. These are big topics and there are many excellent explanations, diagrams, walkthroughs, etc. available on YouTube. (This is just one of them.)

The workload is consistent and gets lighter before the midterm and final, which left plenty of time to dedicate to studying for the exams.

CS261 books: the one they tell you to get, and the one you SHOULD get

I love a good book. The books we used for CS161, CS162, and CS225 were excellent. I did not love the lack of a book in CS261.

Instead of a book, CS261 provides pdfs to read every week. They are dry, boring, and do not display well on a mobile device. There are also worksheets that open with several paragraphs of reading. These are also dry, boring, and do not display well on a mobile device.

For some reason, this is the recommended (but optional) book for CS261: C Programming Language. It’s an okay book, but it’s almost completely beside the point of the class. It’s a reference to the C language. I don’t know why they recommend it – none of the class material relates back to it. If you’ve taken CS161/CS162/CS165, you know enough C++ to hobble along in C until you get your footing. If you run into any trouble (and you probably won’t past the second week or so) you’ll Google your error message, figure it out, and be on your way.

Then, at the end of fall quarter, I joined the CS325 Slack channel in preparation for my Winter 2018 quarter. There, I saw someone recommending the book Grokking Algorithms to incoming CS325 students.

THIS is the book you should buy for CS261.

I ordered it to get a jump start on CS325, but when I opened it my heart sank a bit: where the F*** was this book when I was still in CS261?! 

Every section of this book is concise and clear, with simple explanations and memorable illustrations. Most topics get multiple explanations and diagrams. The book covers so many topics and I’m just kicking myself for not having this book while I was still in CS261.

Grokking Algorithms has everything from visualizing Big-O runtimes…

to performing a search on a graph…

to adding neighbors as you traverse nodes on a graph…

to sorts, complete with graphs, Big-O complexities, and pseudocode…

to understanding how the stack can be used to perform a set of instructions recursively.

This is just a small sampling of what’s in this amazing book.

I wish someone had told me about this book before I waded through CS261’s long, tedious PDFs on these subjects (which often felt like they were written for people who already understood the topic).

Do yourself a favor. If you are about to take CS261, get this book and refer to it often. It is way better than the materials they provide you in the class.

CS261 uses C, not C++

I’m pointing this out because I see a lot of questions (and complaints) about the switch to C from C++ in CS261. It’s true: unlike CS161 and CS162, CS261 assignments use the C language. HOWEVER – it’s really not a big deal. Any panicky feelings you may have over this at the start of the course will soon pass.

Instead of this:

for (int i = 0; ...)

you’ll do this:

int i;
for (i = 0; ... )

And you’ll write comments like this:

/* comment goodies here */

Little things. Nothing you can’t solve with a quick Google query and by the 2nd or 3rd week you’ll probably forget you even went through this.

They ask you to use an IDE… but you don’t need to

This surprised me: CS261’s first week includes an assignment in which you bring your code into an IDE and then submit a screenshot to show you did it.

As far as I could tell, there’s no reason to keep using the IDE past week 1. You don’t have to choose a particular IDE (or an IDE at all) for the sake of CS261. The class doesn’t teach you how to use the features that make an IDE worth using, like using the IDE’s debugger to step through code.

I tried CodeBlocks for a week, but it crashed so often it was a serious roadblock to productivity until I dumped it and went back to Sublime Text. (I’m on a Mac and the last release of CodeBlocks is from 2013 – maybe that was part of the problem.) 

An IDE is just a tool, and I feel like which IDE you choose is a personal choice and none of the school’s business unless the class is going to teach specific features of that IDE or provide workflow tools that only work with the IDE, which CS261 does not. There’s no reason you should have to abandon whatever tools you’re already comfortable with. This was a strange requirement, in my opinion.

CS261 assignments

The 6 assignments are like “coding madlibs” – they provide you with a collection of files and you fill in the functions that are missing code. The assignments offer little opportunity for creativity, which probably makes grading them easier but also made them more forgettable.

The real shortcoming with the assignments was the missed opportunity to tie the data structures and sorts to real world applications. The greater context of why you might choose a particular data structure or how to analyze a problem and then decide what data structure or sorting algorithm to use is, sadly, largely absent in this class’s materials.

I felt like the “fill in the blank” nature of the assignments didn’t help my brain make links between Real Life Problems and All That Code I Wrote in a Vacuum for CS261.

Here’s a ton of code I wrote. What’s it for? Getting a good grade in CS261, of course.

This “missing context” was further illustrated to me when I told a friend about the class I was taking, and he posed a question:

"Suppose you have a million images. Filenames/filesize/etc. don't matter, just the content of the image. I give you a new image and you have to tell me if you already have this image in your set. How do you figure it out? What data structures do you use?" 

                                                   - my smart friend

CS261 isn’t going to prepare you for this kind of question.

The solution – and surely there’s more than one – to my friend’s question was basically to hash all the image blobs into a hash table, then hash the new image to figure out where it would go and compare it to what’s in the table. You don’t hash on filename or filesize or anything like that, because with image hashing, you want to go by the content of the pictures themselves.

I include this example not to point out what a dunce I am – I already know that – but to illustrate a missed opportunity in CS261 to tie the course material to real life applications. Here’s some more reading on the image hashing question, if you’re curious.

CS261 group work

The weekly group work is going to be either great or a chore depending on who you get grouped with.

In the first week of the quarter everyone was assigned to a group of 5, with the sorting criteria being our time zones and general availability as noted in a spreadsheet that the instructor shared the week before class started (hope you were checking your email!).

For 10 weeks, my group was responsible for submitting 2-5 completed “worksheets” each week by end of day Sunday and a typed log of our discussion, called “meeting minutes” (basically who said what). I use the term “worksheet” loosely, some of them were solidly in “assignment” territory.

In a perfect world, your group will engage in vigorous, insightful discussion on each worksheet, leading to new insights and reinforced learning. (Some of my classmates assured me this is what they were getting out of their CS261 group experience.)

In the actual world, your group will probably struggle to find a meeting time that works for everyone and cope with weekly absences from the group meeting. Our “discussions” were rather thin – we either agreed the worksheet was easy or hard, and then kind of struggled to find anything else to talk about.

I don’t blame my groupmates, I think the worksheets just didn’t lend themselves well to discussion. There wasn’t anything controversial or debatable about the worksheet problems, just cut and dry “fill in the blank” code.

CS261 exams

The midterm and final exams for CS261 proctored, so you’ll have to go to a nearby test center or get set up with an online proctor. Both exams are 1 hour, 50 minutes long.

The midterm is coding heavy – expect to write methods in Word docs, save out a pdf for each problem, and attach them to the test. Many questions require you to download an image or attachment from the test, open it, and answer the question in the test’s text box. This was a clunky workflow and I was constantly afraid I would accidentally navigate away from the test. The final exam, however, only required one external doc to be produced and attached, and only a couple questions required opening an attachment. (Phew.)

As for what to study: study trivia. There’s a ton of trivia sprinkled throughout this course. You’ll want to memorize the runtime complexity of every sort, when to use what data structure (according to the class materials), properties of each data structure, and so on. A lot of that trivia will show up on the test. I found it helpful to make notecards of little tidbits of info that are sprinkled throughout the lectures and reading materials – they helped, but I was still caught off-guard by some of the questions.

My CS261 flash cards and worksheet organizer were invaluable.

A few final tips for CS261

Do all the worksheets yourself, even if your group comes up with some kind of “worksheet rotation”. By the time this class was done I think I’d done every worksheet at least 2 or 3 times, because they’re good practice for the tests.

Use a visualization tool. This is the one I used – it’s not perfect (I wish it showed individual steps for things like AVL rotations) but it’ll help you check your work.

Print all the worksheets. I didn’t have a printer going into this class but I quickly saw the need for one. Most worksheets provide you with function signatures and helper methods, and your job is to “fill in the blank”. Therefore, I felt it was better to have the worksheet printed in front of me so I could fill in the blanks, rather than working in an editor (or worse, a word processing doc), separated from the rest of the worksheet.

Some of my CS261 final exam prep: I redid the weekly worksheets until I had them down cold, and I printed the questions from the practice final.

Practice on paper, and get fast. The tests are, collectively, over half your grade in this class, so your performance on the exams really matters. I felt pressed for time on both exams, finishing within 5 minutes of the time limit both times. I’ve never really been one to study for tests, figuring I should’ve learned the material during the class itself, but I had to buckle down and get serious about studying for CS261. I made flash cards, practice tests, and put probably 20 hours into studying for the midterm and over 50 into studying for the final.

Knowing the code (implementations) is important, but the final exam (which is 30% of the final grade) focuses more on knowing the step-by-step behavior of altering a particular data structure. Be sure you know how to draw specific kinds of trees and how they change when a node is removed.

Join the Slack channel! Lots of my classmates could be found there every week discussing the homework and answering each others’ questions.

Get the Grokking Algorithms book. Seriously, and while you’re at it, invent a time machine and tell me about this book before I take CS261.

And… that’s it for this quarter! I’ll be in CS325 Analysis of Algorithms next quarter (Winter 2018), so be sure to say hi if you see me (Mandi) on Piazza or Slack!

Reports from other students in the program

Are you also blogging about your journey through OSU’s eCampus CS program? Leave me a comment and I’ll add a link here!

Fixed: Missing images (403) when sharing WordPress posts on Twitter and Facebook

One of my WordPress-based sites uses this particular combination of plugins and utilities:

  • WordPress version 4.8.2
  • W3 Total Cache
  • MaxCDN

And this was the disappointing, image-less result I got whenever I shared one of its posts on Twitter:

Twitter/Facebook missing image debugging tools

Here are two tools I used while debugging my missing images problems on social media.

Rather than spam your friends or pollute your feed with tests, you can use Twitter’s own validator and Facebook’s sharing debugger to try your posts and see how they render.


Facebook: (you may need to hit the “Scrape again” button in between tries)

The Twitter/Facebook 403 fix

There were two problems with my site:

Problem 1: My site’s posts didn’t define any Open Graph images in the first place. I figured Twitter, Facebook, etc. were smart enough to scrape the post and pick an image all on their own, but it seems that’s not always the case.

To explicitly declare a social media image for each post, I installed the “Facebook Open Graph, Google+, and Twitter Card Tags” WordPress plugin.

Now, at the bottom of every post, is the option to explicitly define an image to use when sharing. This image can be larger than images you might normally include in a post (maybe even custom-made for the purpose) and need not appear in the post itself. (Unfortunately, you do have to go back and manually add an image to each post.)

After doing this I was still getting a 403 when previewing my post in the Facebook and Twitter tools.

Problem 2: The other part of the problem was with my CDN settings themselves. Twitter (and Facebook, etc.) aren’t actually allowed to link to images hosted on my CDN – they aren’t whitelisted. My CDN is set up to only serve images on my site itself, so other people can’t link directly to my CDN images and effectively steal the bandwidth that I pay for (truthfully, I wish people were this eager to link to my content).

I had to add Facebook and Twitter to my W3 Total Cache’s list of rejected user agents.

Under the Performance tab (left side of WordPress interface), click on CDN:

Then scroll down into the Advanced section and find “Rejected user agents”. Type and These agents are not allowed to access files hosted within the CDN. (Which is what we want, because the CDN won’t let them do it anyway.)

You may need to also do Performance > Purge All Caches from the top toolbar in WordPress, too.

Finally, the Twitter and Facebook previews have images!

OSU eCampus CS225 Discrete Structures in Computer Science review & recap

This post is part of an ongoing series recapping my experience in Oregon State University’s eCampus (online) post-baccalaureate Computer Science degree program. You can learn more about the program here.

Six-word summary: Not as bad as I feared

Here’s the deal: OSU’s eCampus CS degree only requires one math class. A lot of people dread it, though, because it’s their first math class in years (or decades).

However, I am happy to report that CS225 is completely doable by someone who isn’t a natural at math. You would be hard-pressed to find someone with less of a math background than me, and yet, I managed a 94% in CS225!

Behold, my math “credentials”:

  • I had to take algebra twice (in 8th grade, then again in 9th)
  • I only earned a B in sophomore year geometry despite really trying
  • My last high school math class was Algebra II (another B)… not pre-calc, not calc, not physics, nothing past Algebra II
  • My only college math class (and I do mean only) was Math 118, and it was the sort of math class you take when you are pursuing a fine arts degree
  • I got a single digit score on my ALEKS assessment at the start of OSU’s CS program

Not my strongest subject, by far. But I think there’s plenty of room in programming even for those of us who suck at math, so if this is you, worry not – CS225 won’t derail your dreams.

CS225 Review

This was a good class. The homework problems made sense, the pacing was good, and the test questions were (mostly) recycled from the book, homework, and practice quizzes. The instructor seems to run the whole thing on autopilot but I didn’t need to contact her for anything.

There’s only a handful of homework questions due each week, but potentially dozens more you can do from the book and “last quarter’s homework” if you want. (I did all the extra work, and I think it really paid off at test time.)

Good news: this didn’t happen in CS225!

Class structure:

  • 10 weeks
  • 2 homework assignments per week
  • 1 quiz per week (7 total, no quizzes before/after midterm and none in the final week)
  • 1 midterm around week 6
  • 1 final in week 10

The tricky part about this class is the grade weighting. 90% of the grade is from quizzes and tests. The midterm is worth 30%, the final is worth 30%, and your 6 best-score quizzes are worth 30% (collectively). The homework is a mere 10% of your final grade. Since both the midterm and the final are proctored, you do have to know your stuff inside and out before you sit down to take the exam.

Fortunately, nearly all of the test questions were outright copies of, if not very similar to, questions you would have seen in the homework and practice quizzes.

If there’s anything this class isn’t so good at, it’s the video lectures. (Seems none of these OSU courses so far have decent videos.) On the bright side, YouTube is bursting with math enthusiasts who have made short, memorable videos on every topic this class will cover.

My little CS225 algebra prep guide

Many people ask online what they should study in preparation for CS225. I think the ALEKS modules are complete overkill. I found myself Googling these seemingly basic concepts that I completely forgotten in the 15 years since my last math class:

  • factorials – what does 5! mean?
  • adding fractions – a/b + c/d = ?
  • multiplying fractions – a/b * c/d = ?
  • dividing fractions – (a/b)/(c/d) = ?
  • factoring these things – (2a + 1)(a + 2)

And that’s it. The rest you can pick up in the class itself.

More CS225 tips

Here are my general tips for succeeding in CS225.

Do the extra assignments, too

Every week has the homework that’s required, and then a larger set of extra questions that are just for your own edification. I did those extra problems and found them worthwhile come test time. I also did all the practice quizzes.

Get a Chegg subscription

I never heard of before I took this class (I found it through Googling my questions). $15/month gets you unlimited access to the book’s answer key. Not because you’re going to copy the answers and blow off the homework, no – you need to know what you’re working towards on every question you tackle. How else will you know if you got it right? :D

Warning: not every single answer is in Chegg. I think I found maybe 4 of my assigned problems that were just blank in Chegg. But.. chances are if you Google the problem, someone on the math Stack Exchange or their own blog has posted a solution. Or you can solve a different but similar one that does have an answer, and then take a pretty good guess at the one you’ve been assigned.

Get the physical copy of the book

Yes, this is the most expensive book of the entire program, but you can buy it used on Amazon (which is how I got mine, and the book was in great shape).

A physical copy is great. It’s easier to jump around in than a .pdf, you can sticky note various topics, and you can take it with you and study in more places! I also rented a .pdf version of the book, but it didn’t display well on my tablet or my phone.

Study hard for the tests – and attempt every question

The two proctored exams are 60% of your grade (30% is your 6 quizzes, 10% is the weekly homework). Some of the questions are taken word for word from the book or homework.

Here’s a hint: simply attempting an exam question is worth a lot of points. Every exam question is worth 10 points and they’re ‘free form’ (you type in a box, not multiple choice). Even if you can’t (or don’t have time to) solve it, explaining what you would do to solve it can get you 7/10 or more points on the problem. Therefore, the winning-est strategy is to pace yourself such that you have enough time to at least lay out the basics of your answer to every question.

I ran out of time on the midterm and had to slap together half-baked responses to the last three questions. However, since I was able to type out what I would do if I had more time, and still ended up with a 93% on the test. Phew!

I took the class by itself

I’m on the 4-year track and while CS225 is popular to pair with CS161, I’m glad I took it by itself. As I said earlier, I am not the greatest at math – so taking the class by itself helped me have plenty of time to dedicate to extra problems, studying for exams, and re-watching the same videos until I felt like I understood the topics.

And.. that’s it! My next class starts in autumn, so I’ll report back on my OSU studies in December.