Home

A note on productive perseverance from Rebecca Mezoff

Came across a great idea from weaver Rebecca Mezoff in my RSS feeds today:

So if you're weaving your first set of tapestries and you aren't all that happy with what is coming off your loom, keep trying! Give yourself some credit for working at it. The practice will pay off. Notice what you love about the piece even if it is something as small as a specific color or yarn choice. Notice that thing you like and write it down. Use that bit of information in the next iteration.

I'd never thought of doing this before, but like all great ideas, it seems so obvious in hindsight. Instead of considering our lousiest projects as “failures” to be stored in a little box of shame and thus forgotten, we can make them work for us. No experience, then, is a loss.

February 2016 goal recap

Continuing to track my goal progress this year. Voyeurs, enjoy:

Completed goals

  • Exercise 17 times. I'm lucky we had an extra day in February this year. ;]
  • Read 3 books. All the books I completed this month were comics/graphic novels, including the first 2 books of the March series, about John Lewis and the civil rights movement. I'm in the middle of a few other great books, though, including Still Life with Woodpecker, my first read by Tom Robbins.
  • Get BALC directory up to date. I actually had a bit less work here than I'd anticipated.
  • Finish bookmarks mini-site. As soon as I did this, I found via Bethany Heck that Dropmark has greatly improved since the last time I tried it. I actually like the service better than the thing I made, so I'm going to go with Dropmark. I don't feel that this project was a waste, though, because I got to do some initial poking around with Craft CMS. I'm really enjoying the CMS thus far and could see using it for client work in the future.
  • Buy WP eyeglasses. A word to the wise: never go to Warby Parker on a Saturday afternoon in a city teeming with hipsters, avid readers, and computer programmers.

Incomplete goals

  • Lights out by 11:30, every work night (11/20). A little better this month, about 50%.
  • Log 20 hours learning Japanese (5.25/20). By percentage, about the same as last month. I'd like to do better in March because I go to Japan on the 29th!
  • Finish idea generator. Didn't even touch this.
  • Sew key fob for gym locker key. Same here :(
  • Learn how to knit a hat. Picked out a pattern, but I'm getting stuck on one of the two gauges I need to make (a gauge is a swatch you make to ensure that your stitches are the right size for the end result). Experimenting with needle size and tension.

Next up: March

The next month is a little more focused. I still think this will be a bit challenging, as this is a busy season at work, but I'm looking forward to making more progress!

  • Exercise 17 times
  • Read 3 books
  • Log 20 hours learning Japanese
  • Start filing taxes
  • Comps for BALC redesign
  • Make time for weaving every week
  • Sew key fob for gym locker key

See progress, if you'd like to, on my goals repo.

January 2016 goal recap

melanierichards-jan-medal

We're at the end of my first month with more formal goal-setting! Time for me to do some navel-gazing and review how it went. I completed 7 out of 10 goals for January.

Completed goals

  • Exercise 20 times. Choosing to go for a discrete number of exercises worked a lot better for me than previous goals of "exercise 3 times a week". It was too easy in the previous strategy to put off a workout until the next day, because each new week was a chance to start fresh. When the goal was a number, I could see how little time was left in the month to complete it. And I won't lie: there are 2 days I had to double up in order to make my goal.
  • Write my talk for ADC Tulsa (and gave it!)
  • Read 20 single comics issues. I had (have, still) a backlog of comics and wanted to make a dent in those.
  • Read 3 books. Finally finished The Pale King (itself an unfinished novel)!
  • Make progress on bookmarks mini-site. Very vague, I know.
  • Brainstorm action items for having a healthier relationship to work. I haven't really been struggling with any of this so far this year—that is, getting down on myself and my work—but I suppose that's the best time to come up with these action items.
  • Inbox zero. Such a huge relief from catching up on email. I'm sorry I was terrible at it in 2015, world.

Incomplete goals

  • Lights out by 11:30, every work night (7/18). I need to focus more on this next month, but I did notice that even when I didn't meet my goal, my bedtime was still BETTER than having no goal at all. There were only 3 nights where I went to bed at a stupid time; otherwise, I was 15–30 minutes off.
  • Make progress on Node-based idea generator. Preparing my Tulsa talk took too much time.
  • Log 10 hours learning Japanese (2/10). Same comment as above. Can't really practice speaking Japanese on my commute, since I take a bus.

Achievements not on the list

  • Buy new chucks + a pair of rain boots. This was technically on the February list, but my shoe/rain situation was so dire that I ended up going out to the store the last weekend of January. Seriously, the heels of my previous sneakers were completely torn apart.

Next up: February

The list for February is up on the repo where I track these goals on a daily basis. That one feels like a much more diverse list than this month. I'm not sure I can get the idea generator site done in February, because I didn't make any progress this month. But I figure why not keep it on the list and do the best I can?

What are you looking to accomplish in February?

Blogging about talking about blogging in Tulsa, Oklahoma

Picture of downtown Tulsa next to a picture of Melanie Richards giggling in front of an illustrated background

Downtown Tulsa; me with the giggles at Hogan Assessments. Both photos by Crystal Walters.

Last week I spoke about blogging as part of the creative career/process, and now I’m blogging about it! How meta. A milestone that I was quite nervous about—my first time speaking publicly—turned out to be an incredibly fun and rewarding experience.

I’d never been to Tulsa before, or anywhere near Oklahoma for that matter, and was excited to see a new city. I couldn’t have had better guides (Art Directors Club of Tulsa) to show me all the good stuff.

We toured the studios and met members of Fire Thief, Loose Leaf, and Rough House; popped into Circle Cinema; heard about the amazing things Tulsa Glassblowing School is doing for local youth; browsed locally-made and vintage curiosities at Dwelling Spaces; gawked at shmancy stonework downtown; shot a quick interview video at Hogan Assessments; and contemplated art at AHHA and 108 Contemporary.

 

Circular tapestry by Analise Stukenborg and weaving by Sarah Sullivan that looks vaguely like an American flag

Left: "Grace" by Analise Stukenborg, right: "New Country" by Sarah Sullivan

There was so much good art in both those galleries, but I was especially excited to see fiber art alive and well in the heartland. The show at 108 Contemporary included excellent weavings by Sarah Sullivan and Analise Stukenborg, and a giant knit mural by Romy Owens. Romy mocked up the mural digitally and then divvied up the panels for people to knit. It’s an impressive piece, both in concept and in scale. I feel fired up to start some new weaving ideas!

 

Romy Owens's knit mural landscape, from outside and inside the gallery

Romy Owens's knit mural landscape, from outside and inside the gallery

Everything I ate in Tulsa was so delicious I’m still dreaming about it: coffee and breakfast tacos at Chimera; muffuletta and gumbo at Lassalle’s; chips, salsa, and guac at Rusty Crane (the kind I've been missing while living in Seattle); local sausage pie at East Village Bohemian Pizza that makes me kinda glad I’m no longer strictly vegetarian; and an excellent drink called “Wake up call” at Hodges Bend.

Oh yeah, and there was the speaking bit. Everyone I met from the ADC was so kind and friendly that by the end of the day the presentation felt a bit more like talking to friends. I shared my experiences with blogging and how that has unintentionally, surprisingly, shaped my entire design career thus far. I went over some of the many benefits of blogging as a part of the creative process, and talked about some of the more practical concerns too: pros and cons of different blogging services, scheduling, blog post topics, and $ opportunities. Everyone asked insightful questions that taught me a lot about what might not be apparent about my process from the outside.

If you went to the show and need a refresher on links, these are for you:

All in all, great experience. I’m so thankful to Paul Woodard, Crystal Walters, Robbie Edwards, Dan Van Buskirk, and the rest of ADC Tulsa for bringing me out to meet a new-to-me design scene. Yours is clearly a talented, tight-knit, supportive community, and I am so happy to have met you all! Please say hi if you are ever in Seattle, I know some of you will be!

Upcoming talk in Tulsa

Drawings of blogs surrounding the words "From Blerghing to Blogging: How to accidentally build a creative 'career' by rambling on the internet"

Quick announcement that I'll be giving my first talk next week! It's hosted by the Art Directors Club of Tulsa at Living Arts Center, Tulsa, OK, on January 21 (doors at 6:30, presentation at 7:30). In true weirdo-Melanie style, the talk is called "From Blerghing to Blogging: How to accidentally build a creative 'career' by rambling on the internet". I'll be discussing how a few simple posts have unexpectedly shaped my entire path thus far. I'll also share ideas on how and why you might approach your own blogging practice.

I have to admit I'm a bit nervous, but honored to have asked to come out to Oklahoma and excited to meet everyone! If you'd like to join in, up-to-date details for location, etc. can be found on the ADC Tulsa website.

2015 in Review

A grid of photos, including a foggy mountain top, cherry blossoms on trees, knitting, a hand holding up wool roving, and Toronto skyline

2015 is a strange one to summarize. As a member of the collective, global community it felt like a particularly painful year. I hope that 2016 brings more peace, justice, and fairness, and less (well, none) of the violence and bigotry we've had to endure, marathon-style, this year. I don't often get too #realtalk on here, but I hope that along with our personal resolutions we can all commit to treating people better within our small spheres of influence. Here's to learning more ways to become a kinder, gentler human!

Back to 2015. On an individual scope, this felt like more of a quiet transitional year for me. In the 4.5 years since college graduation, I've always balanced design and development, but this year it feels that I'm shifting more towards the technical side of things. I have gotten to a point where I'm pretty much exclusively interested in making things for screens, barring the occasional make-it-because-it-sounds-fun project.

Highlights

  • Joined the Microsoft Edge platform team at the beginning of the year. I'm designing and writing code there, a couple end-user projects, but mostly working on resources for external web developers. It has been extremely fascinating working on a browser team, and I'm excited that we are working hard to be more transparent than IE has been known for in the past. People are very passionate about the web, and it's been quite fun learning from them.
  • I read the HTML spec for 100 days and learned a ton of minute details! I enjoyed taking a deeper dive into something so familiar, even though it often felt like a slog. I was proud to have finished the full 100 days, and a co-worker or two owe me a dollar, methinks...
  • I didn't travel too much, but I did get out to Toronto for TCAF (comics arts festival)! Funny that my first visit to Canada is across the country, and not a 3-hour drive away to Vancouver. Toronto is a chill city, and I loved the festival: I got to meet so many comic artists that I've admired for quite some time. My version of ~*~ starstruck ~*~.
  • Got to see the cherry blossoms in full bloom at UW in the spring.
  • I visited Golden Gardens at super low tide. It was EVERYTHING I HAD DREAMED OF in my fantasies of tide pools with lots of critters in them. Starfish, urchins, geoducks, crabs, barnacles, all manner of shellfish...
  • Didn't hike as much as I wanted to, but my favorite outing was Mt. Ellinor, on the Olympic peninsula. The trail had a lot of variation, great pine smells in the older growth areas, and mountain goats! I did enjoy the super-dense fog when I hiked Bechler's Peak, though.
  • I started learning Node, and I've been beefing up on my library-less JavaScript!
  • I've started keeping track of all the interesting articles I read.

Recapping 2015 goals

I...don't want to talk about it. My overall goal was to focus and pare down my interests. I do think I've spent time on a narrower set of interests, but I haven't always been good about focusing on personal projects long enough to complete them.

Individual breakdown:

  • Illustration: Ha. I did barely any personal illustration this year. You can hear crickets on my Dribbble account.
  • JavaScript: I've actually been pretty decent about working on my library-less JS skills! I have so, so much to learn, but I feel already that I have a much deeper understanding of web APIs, and how my scripting actually interacts with objects in the DOM. With jQuery, it was more like magic and a drawn curtain.
  • Writing: I wrote almost no fiction or poetry this year. I tried a little bit for Nanowrimo, but wasn't feeling it. In the back of my mind I sense that maybe I should be concerned about this, as writing had been a permanent fixture in my life and a valuable outlet. But it may also be that we change over the course of our lives and can enjoy different modes of expression along the way.
  • Weaving and knitting: It's been great! Still doing basic stuff, but working with fibers has really clicked with me. Drawing has become an activity that feels too aggressive and intimidating to be relaxing, so it's been truly wonderful to find a hobby off the computer that allows me to do some restorative creative play.

Goals for 2016

What I'd like to do this year is set some themes and then make monthly goals addressing those themes (I might open up a GitHub repo for this). They are:

  • Work towards better health habits. I've picked up some bad habits due to changes in routine and schedules, and need to retool my habits to work with that schedule.
  • Have more adventures!
  • SHIP IT. It's ok to have personal projects that you never finish (it's all about learning), but I'm really craving the posivibes of finishing things.
  • Have a healthier emotional relationship to my work. I have no idea how to make measureable goals or habits around this one, so if you have any suggestions, I'm all ears.

I do have a couple goals that are more cumulative for the entire year:

  • Read 40 books. I have a huge backlog of unread books that I own, so I'm instituting a rule that I can only buy a new book after I've read 5 I already own. The exception is book club books, and I may check out a book from the library at any time.
  • Hike 10 new trails. I didn't do nearly as much hiking as I wanted to do in 2015, so I'd like to fix that in 2016. I'd like to get back to the Olympic Peninsula at least once.
  • Go camping 3 times (with or without hiking). Gotta break in my new tent!

Happy New Year! Best of luck to everyone and their resolutions.

More form factors, please!

Designing UI icon sets today can feel somewhat anachronistic: why does a floppy disk still connote save? Why does your TV have antennae? The struggle here is that if we made every icon match the technology it represents, we’d have a lovely bunch of rectangles.

This is changing. Apple just released their Watch, which has a circular, albeit small, interface. The W3C is working on a CSS spec for round displays. The draft proposes a border radius detection approach, which covers rectangles, rounded rectangles, ellipses, and perfect circles; it does not yet propose a solution for more complex display shapes: we’ll cross that bridge when we get to it.

As I read the working draft, 5% of me thought, “oh, great. More complexity.” But the other 95% is SO JAZZED.

First off, it will be interesting to see how web aesthetics change once again to meet the greater variety of screen shapes. With the mobile web we first served up different sites for “mobile” and “desktop”, then moved to responsive (fluid) strategies, and with that, simplified the mainstream aesthetic–not without pushback, off course. Will we see the same pattern with non-rectangular displays? Will we relax the death-grip aesthetics has on traditional design and give more thoughtful attention to UX and content strategy?

Second, with greater support in the web community for non-rectangular displays, we will see a rise in new, more interesting form factors. Which means maybe someday I can use THIS:

Screenshots from the film It Follows showing a character using a phone or e-reader shaped like a seashell

That’s a dual-screen e-reader (phone?) in a bivalve-shell casing, used by the character Yara in the indie horror film It Follows. It appears in all its quirky glory because the director didn’t want to date the film with a specific piece of technology. I want that e-reader badly. And I think someday it could exist.

And this led me down a frenzied wormhole of “what-ifs”:

  • What if everyone could express their taste and personality not just in the color of their hardware or protective (possibly-Totoro-shaped) cases, but in more complex form factors?
  • What if you could apply fully-functional screens to other surfaces, like a film? Would we see an explosion of DIY culture around this, much like IKEA hacks?
  • What if originality in devices became extremely important to fashion? Would we see a flood of new entrants in the industry from people who feel kind of “whatever” about the slightly-different-rectangle-of-the-year (me)? Would we have more diverse STEM fields?
  • What if we had inexpensive devices that look like everyday objects, for at-risk people who need inconspicuous access to help?
  • What if a device’s form factor could be designed to meet the specific needs of differently-abled people?
  • What if the work already being done in these efforts could be available at accessible prices?
  • What if devices could be designed to interlock with other devices, and act as a single computer when brought together (like a patchwork quilt)?
  • What if we had industrial/product design college courses devote to designing non-standard devices? What would curious minds come up with, free of the pressure to sell x units?

I can’t wait to see what we’ll come up with.

Post Mortem: #100DaysOfSpec

Monday marked the end of my hundred day project, which was to read and take notes on the HTML specifications for 100 days. For those who aren’t familiar, that’s the technical documentation that tells how user agents (browsers, etc.) how to implement HTML interfaces, and tells HTML authors (web developers, etc.) how to use those features. It should be noted there’s wiggle room and areas for interpretation within both those spheres. You can see all my posts in the 100DaysOfSpec tag.

Because it took so much of my time—roughly an hour for 100 days—I thought it appropriate to do a quick post mortem on the reading.

Overall impressions

Even though at times I felt I would rather be doing literally anything else, I’m glad I chose this as my project for the 100 days challenge. It seems odd to have worked with HTML for years and never have read the closest thing HTML authors would have to a “holy text” (though just-build-websites and supplemental, nicely-packaged documentation are nice teachers…), and to attempt to read a text that is mostly dry cover-to-cover takes a bit of discipline.

I learned a lot over the course of this reading, both about things work “under the hood”, and small authoring details that may not sync with how most people might use tags, attributes, etc. I can now obnoxiously retort “that’s not what the spec says”. Most importantly, when I am unsure of something, I now go straight to the HTML spec rather than chasing the best answer around in search results (or hoping that the sites I trust are up to date). I love that, because it’s a much more straightforward approach.

The one thing that bothers me is the chasm between what the spec says user agents should do, and what they actually do. In a way this means that even our most basic text can’t be trusted. In most cases this should not be a problem, though, because we should be rigorously testing our work in each of the browser versions within our support agreements.

Process

When I started out reading, my goal was to write down only the most interesting factoids; as time went on, I ended up writing more and more down per post. Part of this is truly the presentation of more unknown material, but I’m a little bummed that the notes became summaries by the end.

If I were to read the spec again—and I plan to tackle shorter chunks in the future—I think I would turn on the “developer styles” on offer. It’s nice to see how user agents should be implementing the features of HTML, but I could have covered a lot more ground if I were reading the bits catering towards HTML authors.

I will say I’m very happy with how well it worked out to dedicate my commute home from working to continued learning. I’ll be reusing that process for other endeavors.

Should I read the spec?

Midway through the project, a beginner asked me if they should be reading the HTML spec, too. My first thought was “oh no please, save yourselves!” A more rational response is “later”. I don’t think it makes much sense for a beginner to read this document. Unless you crave this kind of technical reading, the spec will bore you to tears before you even get much of anything built. For beginners, if you like slow step-by-step guidance, there’s sites for that (Codecademy, Treehouse), or there’s messing around with code and filling in the details from sites like the Mozilla Developer Network.

Once you get the basics down, the HTML spec is something you can refer back to in order to deepen your knowledge, or get an answer on a question “straight from the source”.

What might be a good way to read the spec?

If you’re working with HTML to build websites, here’s a few suggestions.

  • Click the button that says “Add developer styles”. This will hide any information that is meant more for browsers and other implementors of HTML interfaces. You can always turn this feature off if you’re curious about how something in particular works.
  • If you’re the type of person who likes to read The Whole Thing, set aside a particular amount of time on a predictable schedule to read segments.
  • If you’re not looking to read cover-to-cover, skim the table of contents to see if any sections jump out at you and read those. Browsing is an excellent method for drawing to our attention topics we might be overlooking. For example, images may seem old hat, but do you know the particulars of crafting a good alt attribute for accessibility, in each of the many use cases?
  • It may also benefit you to brush up on familiar areas, too. Working with a lot of forms on a current project? Maybe check out the form elements sections of the HTML spec to see what you might be missing.
  • To reiterate, checking first with the spec is a great way to answer a question you might have about your HTML authoring. For example, when to use which sectioning element (section, article, main) and which of those elements can nest each other can be confusing. Instead of reading articles on people’s personal blogs which all claim to do things The Best Way, maybe check with the spec1 first.

Happy reading! 

1. If I were a different kind of person this could be an excellent catchphrase.

Day 100 of #100DaysOfSpec: 4.7.10.6 Offsets into the media

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

UAs = user agents = browsers, etc.

Omg! It’s here! I did it! All 100 (work)days. Planning to do a little recap post of the experience, so this one might feel a little anti-climatic as a last post.

Currently reading in 4.7.10.6 Offsets into the media resource

media.duration returns the length of the media resource in seconds, assuming a zero start time. Can also return “NaN” (missing duration metadata) or “Infinity” (our case again of the ever-streaming radio station, for example).

media.currentTime returns the playback position in seconds. You can also use this to jump the user to a particular point on the video or audio.

A media resource has a media timeline, spanning from its “earliest defined position” to the duration as final position point. A start point can include an explicit time and date—I suppose this is involved in scheduled live streaming video/audio—and that info can be accessed using the getStartDate() method. The start needs to be >= 0.

The media timeline is always linear, even if the data it spans is discontinuous, out of order, or overlaps original timestamps. The example they give is two clips that have been combined into one video; they lose their old timelines and instead get the new combined one.

The UA has been given the power to make a reasonable determination about timelines in the rare cases that a media resource has no explicit timelines or any timings at all (such as frame durations). Examples include animated GIFs and JPEG-push format.

Media elements have a:

  • current playback position
  • official playback position (which is approximately the current, but “is kept stable while scripts are running”)
  • default playback start position: originally set to zero sec, allows the element to be “seeked” before it’s done loading, which would come in handy, I think, if you want to jump the user to a particular point along the video/audio.
  • show poster flag: set to true when the media element is created
  • initial playback position: initially zero seconds, updated when a media resource is loaded

The currentTime attribute returns the default playback start position; if zero, it returns the official playback position instead.

There’s plenty more to this section and I thought I’d summon the strength to read the whole thing today, but nope nope nope nope. Way to finish strong! 🎉🎉🎉

Day 99 of #100DaysOfSpec: loading the media resource, contd.

I am reading and taking notes on the HTML specifications for 100 days as part of #The100DayProject. Read the initial intent/backstory. I am a Microsoft employee but all opinions, comments, etc on this site are my own. I do not speak on behalf of my employer, and thus no comments should be taken as representative of Microsoft's official opinion of the spec. Subsections not listed below were read without comment.

UAs = user agents = browsers, etc.

Continuing to read in 4.7.10.5 Loading the media resource

Some extra info after the algorithms from the previous days’ notes.

The preload attribute takes one of the following keywords, which can be changed while the media resourced is being buffered or played:

  • none: hint that the user might not need this resource, or that the server can save on traffic.
  • metadata: hint that the user might not need the resource, but it might be a good idea to fetch metadata and possibly the first few frames. Metadata includes dimensions, duration, etc, and fetching that will put the readyState attribute at HAVE_METADATA. If some frames are fetched, that attribute will likely be HAVE_CURRENT_DATA or HAVE_FUTURE_DATA. I’m curious as to what the use case might be for setting the preload attribute to metadata…maybe some perf black magic?
  • auto: Hint that the UA can load as much as it sees fit for the user.
  • The empty string value for preload, like the auto keyword, has an Automatic state.

HTML authors can dynamically switch this preload attribute value once playback begins (i.e. don’t download the video unless the user clicks play, in which case ZOMG DOWNLOAD NOW).

The UA can choose to ignore the settings in this attribute, as it is just a hint. This is supposed to be in service of UX though: taking user settings or being smart about connectivity health. The autoplay attribute can also override preload. It’s okay, validation-wise, if those two attributes don’t agree.

There’s a buffered attribute that returns an object representing how much of the media resource the UA has buffered.