Author: dwds

Categories
Life Web Dev

Life updates & new direction

Hello world!

I haven’t been actively posting for awhile, but I’d like to change that. I have some life updates that I haven’t shared publicly until now, but the tl;dr is:

Last year, I transitioned from teaching to working as a developer at a large company. Because I’m doing more specialized work now, I’ve been able to dive deeper into certain web dev topics, and I’d love to share some of what I’m learning here on The Empty String. That likely means that my posts will be a bit more technical, but I will still try to write in a beginner-friendly tone.

I’ll also still post about game design and art things. I love the game design community here in St. Louis, and am hoping to be even more involved this year. You can definitely look forward to more playful art exhibitions from my curatorial project, The Flow Gallery.

So, on to the life updates…

I’m excited to be working as a Design Systems Developer at Charter Communications, where I am part of the team creating a library of UI components for Charter’s design system. I love that I get to work closely with UX designers, and that I can build accessibility into components that will be used throughout the company’s web products.

I also love that I get to work at a level that’s not too abstracted from the native web. I’m playing with the things I know and love—HTML, CSS, JavaScript, the DOM—but in a different context that that is new and exciting. I’m digging into the specs nearly every day, and learning a ton. I can’t wait to share more with you! As a teacher, I got pretty good at breaking down esoteric concepts in a way that clicked for people, so I hope I can continue to do that here.

So, why did I step away from teaching? Well, my school (Lindenwood University-Belleville) announced that it was closing last May. It was a pretty big blow to me, and I posted some of my feelings at the time in a Twitter thread. Thankfully, I was able to move on to a new job with some help from some recruiter folks who quickly got me an interview at Charter (shout out to Justin Heuss at TEKsystems).

My teaching days aren’t over, though. My new job involves quite a bit of developer education through lunch-and-learns and helping out other devs with their CSS and markup woes. It turns out that teaching the fundamentals of HTML and CSS for six years makes you a popular person to come to for help figuring out flexbox and solving selector specificity.

And, of course, I want to keep teaching by writing articles, posting code snippets, and maybe recording some videos. I’m planning some upcoming posts on:

  • CSS variables & the Shadow DOM
  • The :focus-visible selector
  • Common misunderstandings about the <input> element

If there’s anything in particular you’d like me to write about, please let me know! As I mentioned, I’ve been able to dive a little deeper into certain web dev topics now. That’s because when I was the Chair of the Interactive Media & Web Design program at Lindenwood, my research was rather broad in order to stay current with trends throughout interactive media. In addition to web development, I was working in game design, virtual reality, 360 video, voice interactions, and more. It was fun to explore lots of topics, but I’m glad now for the chance to really hone my expertise in one area.

On a final note, you might notice the look of this blog change within the next few months. I want to move away from WordPress to a static site generator, but that seems a little daunting at the moment, and I don’t want it to get in the way of me writing. So for now, I’ll keep on posting to WordPress!

I’ll leave you with with a couple tweets from my time between jobs.

Categories
Art Curation Game Design

Rules to Play By — now accepting submissions

Rules to Play By. An exhibition of rules, instructions, recipes, scripts, programs, and scores intersecting games & art.

Now accepting submissions at theflowgallery.com!

I am co-curating, with Brianna Shuttleworth, an exhibition of art/games inspired by Fluxus scores, surrealist games, instruction art, etc. The exhibition will be held in two locations during the weekend of July 27–29, 2018 in St. Louis, MO. One location is a popup art gallery. The other is within Pixelpop Festival. This is the first exhibition in The Flow Gallery, a series exploring the intersection of art & games.

Categories
Alexa Game Design Interaction Design UI Design

Developing for Amazon Alexa

This summer when I spoke at PixelPop Festival, I went to a talk by Mike Lee about developing games for Amazon Alexa. He was working for a game studio that created a sort of “choose your own adventure” interactive radio play. Silvia and I have been writing a series of radio plays, so I was intrigued by the idea and decided to learn how to develop for Alexa.

I started researching, and quickly learned that most people start out with a tutorial to create a trivia game skill. This tutorial takes you through the whole process from getting your dev environment set up to publishing your skill in the Alexa Skill Store. Theoretically the only coding you need to do is to write your own questions in a big ol’ JavaScript object, although I ended up doing a bit more customization.

I needed a topic for my trivia game. Naturally I chose Sherlock Holmes, since I had just finished reading the whole Holmes canon. The tutorial suggested that the most successful trivia skills have over 100 questions, so I got to work writing them. This probably took up the biggest chunk of time of the whole project. It was a challenge to not only come up with 100 questions, but three incorrect answers for each question.

Holmes uses a magnifying glass to investigates the word RACHE written on the wall.
Illustration By D. H. Friston from A Study in Scarlet

The next challenge was pronunciation. Alexa was pronouncing stuff weirdly, or just using the wrong sense of the word, as in “His Last Bow.” Alexa supports Speech Synthesis Markup Language (SSML), which I used to correct most of this.
<phoneme alphabet="ipa" ph="mÊŒnki">monkey</phoneme>

<w role="amazon:SENSE_1">Bow</w>
But then there were words from other languages, like the famous German word RACHE written in blood on the wall in A Study In Scarlet. Alexa (or maybe SSML in general?) does not support the use of German phonemes within English language text. So I had to approximate it as best I could with English phonemes, which, as it turns out, is not very accurate.

It was actually pretty fun to figure out how words are supposed to be pronounced that I had only read and never heard. There are some things that Doyle just made up, like The Mazarin Stone. My go-to source for pronunciation was the Jeremy Brett Granada series, in which I learned, among other things, that Mazarin is pronounced as in the French. I was surprisingly able to recreate this pronunciation fairly well with English phonemes.

Another issue I had was Alexa overdoing the upward inflection at the end of the sentence to indicate questions. I tried to fix this by replacing the question marks with periods. This fixed the inflection, but created another very curious issue that I tried to debug for hours to no avail. For some reason if there are any periods in the text of the question, instead of reading the four multiple choice answers, Alexa will say the letters “Q” “U” “E” and “S” in a random order. The bug was reported here, but the issue was closed without being fixed. Hopefully it will get some attention from the tutorial developers.

Overcoming the pronunciation issues and a few other minor bugs, I published Sherlock Holmes Trivia in the Alexa Skill Store in November, and so far I’ve had almost 250 unique users. I’d eventually like to add some more features, like different levels of difficulty. It is a rather challenging quiz, but I hope you’ll give it a try!

Categories
108 Koans Art

108 Koans Retrospective – Koans 100–108

This week: Koans 100–108, in which I wrap things up and finally clean up the coffee from Koan No. 1.

View the Koans at derekds.com/108.

Categories
108 Koans Art

108 Koans Retrospective – Koans 90–99

This week: Koans 90–99, in which I have a weird dream, put some art into storage, walk on a garden hose, and get my name misspelled a lot.

View the Koans at derekds.com/108.

Categories
108 Koans Art

108 Koans Retrospective – Koans 80–89

This week: Koans 80–89, in which I find a bug, pretend to take a picture, and break some rules.

View the Koans at derekds.com/108.

Categories
108 Koans Art Game Design UX Design Virtual Reality

Works in progress and updates

This a teaser for some upcoming posts about things I’ve been working on.

The conclusion of 108 Koans Retrospective!

Only three more commentaries to go! I plan to have everything recorded and published before Thanksgiving.

Virtual Reality

I recently completed a virtual museum about ways that virtual reality is affecting the art world. It was the first VR project a made from scratch without starter files from Udacity. I’ll have a full blog post about it soon!

I published an Amazon Alexa skill!

It’s a Sherlock Holmes Trivia game. Stay tuned for instructions on how to play it, even if you don’t have an Alexa device.

Student projects

My students have been workin’ hard this semester on various projects, including an escape room, websites, and a redesign of the school cafeteria!

Food label mockup by Karlie Langley for my Interaction Design class.
Food label mockup by Karlie Langley for my Interaction Design class.

And more!

I’m going to start making more quick, small posts with miscellaneous tidbits, sketches, ideas, and whatsits.

See you soon!

Categories
108 Koans Art

108 Koans Retrospective – Koans 70–79

This week: Koans 70–79, in which I eat a donut, fix my keyboard, break my website, open some windows, remove some staples, and finally put a piece of art in a proper gallery.

View the Koans at derekds.com/108

Categories
108 Koans Art

108 Koans Retrospective – Koans 60–69

This week: Koans 60–69, in which I conclude the mystery of the road CD, cut some paper, and run at a sign.

View the Koans at derekds.com/108

Categories
Game Design Interaction Design UI Design Usability UX Design Virtual Reality

Virtual Reality Puzzle Game

Introduction

My most recent VR project is a simple Simon-esque game in which the player must select floating orbs in the correct sequence in order to pass through a dungeon. This was the fourth project for Udacity’s VR Developer Nanodegree. I enjoyed this project a lot because there was more emphasis on designing a good user experience. I got to put my UX skills to use to create personas, draw sketches, conduct user tests, and iterate on the design.

Process

Personas

One of the first things I did was create three personas of different users who might be interested in this game. I already wrote about this in a previous post, where you can also download the persona template that I designed. You can click the images below to see them bigger.

Sketches

I made several sketches throughout the process. I haven’t make all of the sketches a reality yet, but I have a clear idea of what I want the final experience to be like. I added several bits of backstory to the game to make the player more invested in completing the puzzle.

Working in Unity

I created the game in four stages, with user testing and iteration after each stage.

  1. Create the environment (3D models and lighting). Do user testing for mood and scale.
  2. Create the UI for starting and resetting the game. Test for scale, placement, legibility, and clarity.
  3. Add camera motion and program UI buttons. Test for speed and comfort to avoid simulation sickness.
  4. Program game mechanics. Test for playability, understanding of rules, and overall experience.

User Testing and Iteration

Below are videos of my first playtest and my most recent playtest, so you can see the progress made so far.

 

Some of the things discovered and fixed from playtesting included:

  • Some people felt too short. Adjusted the camera position and the overall scale of the environment.
  • The UI was much too close to the camera at first. Repositioned it farther away.
  • The start UI blocked the view of the dungeon, so it was really disorienting when the camera started moving. I fixed this by making the UI partially transparent.
  • The camera motion was too fast. Slowed it down to create smoother transition into dungeon.
  • The positioning of the orbs was too high to be able to comfortably select the top two. Repositioned them to be more in the line of sight.

 

And these are some things that I haven’t fixed yet:

  • There is a glitch where the back wall of the dungeon changes color when you look at it.
  • Some people do not recognize the “Simon-esque” aspect of the game, so they don’t know what to do when the orbs light up.
  • The negative feedback sound when you select the wrong orb is not clear enough.

Current State

Here is gameplay video of the game in its current state, as of Oct. 1, 2017. For some reason the screen recording software did not capture the ambient environment sounds.

 

Planned Improvements

  • Incorporate all the story elements to give players more choices (see sketches above).
  • Program a lose condition if they select the wrong orb too many times.
  • Program different levels of difficulty.
  • Create either clear instructions about how to play or hints if the player gets stuck.
  • Animate the orbs to move out of the way upon completing the puzzle.
  • Give each orb a unique pitch and color.
  • Create background scenery.
  • Improve UI design.
  • Improve sound design.