Posts

As a web developer, I have several browsers installed. My primary browser that I check my work in are Safari, Firefox, and Chrome, which I’ll refer to as the big three. These three represent the most common rendering engines (the thing that turns code into a usable website). They each have a great suite of developer tools that are mostly the same or have similar feature implemented in slightly different ways, which help me get my job done. There’s be a resurgence the last several years in new browsers, and the majority of these browsers use one of big three’s rendering engines and then they build their own experience around additional features, like plugins, viewing modes, etc.

While I primarily do my work in the big three, I like to try out new browser regularly for my personal use, like browsing, reading, and such. Lately, that browser has been Orion by Kagi, which is search engine. Orion brings together all of the big three into one browser, where it uses Safari’s WebKit rendering engine, and then supports extensions from both Chrome and Firefox. In addition it’s overall aesthetic is very Safari-life, including its implementation of features such as Reader Mode, Tab Groups, and even how it handles Tab management.

What I’ve really come to love is a feature called Focus Mode. The new view removes all the browser user interface elements, leaving a window that only contains the webpage. I’ve found this view to be really handy for presenting my reveal.js slide decks, viewing online photo albums, or reading a well-designed site.

While I can keep talking about how nice Orion, is I have to be truthful, my default browser is actually Finicky, and it neither renders websites nor actually has windowing. Instead it’s rerouter app that takes all the web URLs on my machine and then distributes them among my various browser via a JSON config file. With Finicky, I have Google Docs open up in Google Chrome, localhost, 127.0.0.1, and 0.0.0.0 open up in Firefox by default, and then all other URLs head to Orion. This way I don’t have to think about which browser I’m opening a URL in, Finicky can handle the context and open the correct browser.

What’s more, I use the Safirechrome workflow with Alfred so that while in Firefox, I can hit my Hyper Key + O to open the current URL in either Safari or Chrome to continue development or debugging work.

I love trying out new browsers and with Finicky and Alfred and I don’t have choose a normal default browser, instead I can set which browser I want to use for the appropriate task.

I had only worked a month at Sparkbox when I saw our Vice President, Rob Harr, do a talk on how we run our business. I was amazed by the detail he was so open to share. Over the years I have come to not only understand but adopt this transparency we value as a company. One of the things that keeps me at Sparkbox year after year is the people. What makes the people so amazing is the honesty, humility, and empathy they poses. There is such a desire to share what makes us successful freely in hopes that we make a stronger industry.

Rob was recently on an episode of Bureau of Digital's podcast, The Bureau Briefing. I this episode Rob talks with host Carl Smith about operations—his road toward taking on operations at Sparkbox and how things work today. Ever since that first time hearing Rob talk about the business, I have taken every opurtunity I can to hear him talk about it since. There are a few quotes from this interview that I really love, I pulled these from the shows transcript.

I think that we're all obsessed with tools and really what we need is some good fundamentals and figure out what data we need, and then find a tool to match, rather than to find a tool because we have a broken process. The tools are not a fix for what ails most of us.

I know Rob is talking about this in reference to operations, but that rings true for every tool. When I teach CSS and HTML, I want folks to understand the fundamentals before bringing in specialized tools like Sass or even what text editor to aid in writing. This fundamental perspective permeates throughout Sparkbox, we are only efficient with our tools because of grasp of fundamentals. I am so glad to see this approach taken when it comes to running the business.

I want to make better mistakes. I want to make new mistakes. I don't want to repeat yesterday's mistakes next week.

I want that quote engraved on a plaque. That is such a fantastic statement. Mistakes are guarateed, the types of mistakes and how you learn from them are up to you.

You can actually get stuck surviving and not have to make the mental switch and learn the new skills to be able to thrive.

This last quote is the most profound and meaningful to me. I have worked for several companies in my career. Two small design/web shops I saw fall apart around me. The owner was the president, the salesperson, and the creative director. I saw this mentality of getting by, making the business work. That gets tiring and burnout can come hard and at a high cost. I am impressed to have witnessed the process of this mental shift to forecasting our year. Rob has processes in place to know where we will stand as a company and per project up to six to nine months into the future.

Rob briefly mentions a time a couple of years ago where our forecasting showed a significant dip in profit. We were months out from that time actually happening, but to account for this we cut off all extra spending. No new computers during that time, any new software purchases were scrutinized, and we cut back on any other non essential spending. It was incredible to see in action what Rob referred to as a "slow motion train wreck." We weathered that storm because of the foresight our operations team put in place, and Rob is now talking about how it was possible. Hopefully other small businesses can learn from what Rob shared.

I heard about this book from episode 66 of the Cortex podcast. I was listening along thinking this was another typical business book that they recommend, but my ears perked when they got talking about these journalling type questions the author asks of himself and his clients. That alone had me intrigued, and I liked a good bit of what the author had to say on the topic, the examples were very real life and relatable. The best thing out of this the reframing of common questions we ask ourselves from “Did you do…?” to “How well did you try to do…?” That shift in thinking is similar to one that has been going on in my community from saying “I have to…” to instead saying “I get to…” Those differences in mindset when thinking or asking questions turn the table from one of unmet expectations to attitudes of kindness and grace.

Triggers: Creating Behavior That Lasts by Marshall Goldsmith

Last night I finished the book Mortal Engines by Philip Reeve. I never heard of the book until I saw the teaser trailer for the forthcoming film adaptation. The trailer is visually fascinating and left me curious about what was going on in that brief, yet enthralling, scene.

I certainly encourage you to watch the trailer. Peter Jackson is producing and his partner on the Lord of the Rings films, Fran Walsh, is one of the writers. I’m quite optimistic about the film. The book on the other hand was less enticing.

For starters, this is certainly young adult fiction. That's not a knock against it, rather setting expectations. The story itself is rather interesting and I think there is good material for a film. The storytelling itself was not what I’d have hoped. For one the reasoning for these traction cities, large vehicular structures holding the likes of London and other cities, was not sold well. Even worse is the idea of an Anti-Traction League that wanted to put an end to traction cities. These weren’t bad, but the reasoning behind it all was lackluster. I imagine this maybe a commonality with YA, accept the exposition.

Though I have to drop another gripe that seems to exist in the YA fiction I have read. That is the shallowness of the characters. It's not that I want more details about the characters, they are just quite obtuse. Were it not for the action and pace of the adventure, the characters would have had me stop reading the book.

But this gets to what I love about this book, it gets action. The exploration and adventure of these characters experience is the driving force behind this story. The climax only quickens the pace with a somber and satisfactory conclusion. Being that this is the first book in a series, however, I’m not intrigued enough to see what happens next for these characters.

Modern Engines is a worthwhile story and I can see the appeal for a middle school audience. I’m glad I took the time to read it and I was certainly entertained. I look forward to see what the film has in store.

We’ve been experimenting with how we work at Sparkbox recently. Our big push has been in understanding where so-called hybrid designer/developers fit in our process. For a long time, these folks have had the title of Developer, with all the other developers. Last Fall, that changed and several of, including me, changed titles to Frontend Designer. The goal was to push the hybrids more into initiating the design work and build up our overall design quality.

Our Content Director, Emily Gray, realized a way for the hybrids to focus on the design-end of coding without the bearing the weight of a full frontend stack. She dubbed this approach the Hammer and the Chisel. Weve had a bit of practice with this approach, and so I decided to write about it since I am someone who has filled both roles on different projects. This is the second in a multi-part series on revamping our design process at Sparkbox.

Thomas Park followed up followed up his terrific Flexbox Froggy game with Grid Garden. Where Flexbox Froggy gets you well acquainted with the ins and outs of Flexbox, Grid Garden dives into the intricacies of CSS Grids.

Now that most of the major browsers support CSS Grids, now is the perfect time to get some practice. Practical use is right around the corner.

I participate in remote meetings nearly every day. My co-Sparkboxer Adam Simpson put together this terrific list of just a few things to keep in mind joining a video call in a professional setting.

A couple of weeks ago I started the Daily CSS Image. If you are not familiar with the challenge, it is a person challenge, not a competition. Each weekday an email is sent with a topic or object to create using only CSS, with the needed HTML. To participate the community aspect of the challenge the image should be created in CodePen and shared with the hashtag #dailycssimages on Twitter. The challenge is run by Coding Artist and they just started a Daily SVG Image challenge I hope to start once I’m done with all 50 days CSS challenge.

On my own I’ve done several CSS images, so with the challenge I decided I wanted to add an extra challenge—use a single element if possible. I was able to do that up until day five, but picked it up in week two…until day 10. So far the last day of each week tends to be a more complex topic and to do what I want visually I set aside that challenge.

Week One

Week one of the challenge focused on animals.

Day One: Bear Cub

This was so much fun to make. I know it was only the first day, but to kick it off iw

See the Pen Day 1: Bear Cub on CodePen.

Day Two: Elephant

Alright. This is bad. It looks, well…yeah. But hey, single element!

See the Pen Day 2: Elephant on CodePen.

Day Three: Beaver

The first thing idea I had with this one was the teeth and that it would have to be a pseudo to make the teeth work right. I love how well the teeth came together.

See the Pen Day 3: Beaver on CodePen.

Day Four: Tiger

I had a vision of these green eyes as soon as I read the topic for this day. I figured I would have to do so much more work for the stripes, but the way this came together, the stripes were able to be pretty simple.

See the Pen Day 4: Tiger on CodePen.

Day Five: Favorite Animated Animal

Day five was so freaking hard. I had such a hard time thinking through a favorite animated animal. WALL•E, wait robot, not animal. Buzz Lightyear, again not an animal. Ok, um…well. Thinking through it brought me to the Lion King. As a child of the 90’s this made sense, and it was ripe for the picking. But why, Scar? Maybe it’s Jeremy Irons’ voice that just rings in my ears when I think of that movie. I had this eerie vision of Scar’s yellow eyes bursting out of the shadows. I love how this came together, even though I had to ditch my single element extra challenge, but it was worthwhile.

See the Pen Day 5: Scar Lurking on CodePen.

Week Two

After a week full of animals, I assumed there would be an overarching theme for each week. I didn’t quite expect the office supplies of week two, but it turned into a really fun week of challenges.

Day Six: Clock

My first picked pen! Single element and animated. So fun.

See the Pen Day 6: Clock on CodePen.

Day Seven: Ruler

This was my extra challenge of week two. Kept this image a single element, but had an extra twist of adding a print stylesheet that printed up an actual ruler. It isn’t to scale and depends on what browser you print it from, but you know what, it’s still cool.

See the Pen Day 7: Ruler on CodePen.

Day Eight: Note Pad

After the moving clock, and the (somewhat, not really) usable ruler, what next? I thought about doing a print version again that printed up a blank page. But, I ended up going with contenteditable and allowing everyone to leave a note for themselves.

See the Pen Day 8: Note Pad on CodePen.

Day Nine: Calendar

Well, totally missed this on the day. So, I made a simple calendar that displays the day I made it instead of the day of the challenge.

…single element!

See the Pen Day 9: Calendar on CodePen.

Day Ten: Pencil Jar

At this point I am figuring the challenge of each week is going to be complex. I think I like that though. Throughout the week I’ll try to keep a single element and then go crazy on Friday! So, here is a pencil jar, complete with a couple of pencils and backdrop-filter.

See the Pen Day 10: Pencil Jar on CodePen.

Alright week one and two down. Three more weeks to go, and time allowing I’ll have an update at the end of each week.

Every six months, we at Sparkbox do peer and leadership reviews. We’ve been at it for about two years now, so I have a feel for an approach to providing feedback to my coworkers. Following a conversation I wrote the following letter to my fellow Sparkboxers and dropped it in our #general Slack channel. After some positive feedback, I was further encouraged to share this letter, verbatim, with the world. Peer reviews can be tough, its giving feedback to coworkers in manner that can be a bit intimidating. This is a letter written as an encouragement to help prepare a good mindset for writing a peer review.

Alright y’all, here’s a quick little internal post on how I do peer reviews. It has taken some time and a lot of gleaning from others in the office. So, some of this may sound familiar, but perhaps this will help some of you.

Peer reviews can be super intimidating. When I started my very first peer review, I felt like I had to write these review for Ben and Rob to read. Later on I heard some one say they approach the peer reviews like they are telling the person directly. I’ve really taken that approach to heart. To me reviews have become a great way to reflect on why I like working with y’all and getting an opportunity to tell you why that is so freaking awesome. Think of the review you’re giving as though it were a conversation you are having with that person in the kitchen over some coffee and Oreos. Use emojis, make it fun, but be honest.

I got up this morning and went to Press to work on my peer reviews. After coming into the office I got talking to one of the folks I was reviewing, and I just had to tell them some the things I wrote done. Things that make me so excited to work with them. It turned into a beautiful and encouraging conversation.

The other intimidating thing about the reviews are the number scale questions. It’s hard to come at this without the thought that you are putting a numeric value on people you really like. My first review, I gave everyone max numbers, because you deserve it. But, as time has gone one I’ve adopted a number approach akin to Ben’s. I start with the middle number for everything. The middle number, to me, means you are doing a killer job. Above that, you are kicking some serious ass. If I ever feel like I need to give a number below the middle, I explain it in the comment. And like above, I try to approach it conversationally, I put myself in the mindset that I am sitting down face to face with the person. It brings a level of empathy and humility to the words you choose.

I love, love, love working with you all. The feedback I have received from past reviews have made me a better person and a better worker. I savor your feedback, and hope this helps you with overcoming any apprehension you may experience going into writing your reviews.

To give some context, our peer reviews consist of a handful of questions followed by two section that are number-based ratings. The first set is 1-10 rating on Fluency, Humility, and Empathy—the foundations of the company. The second set is a 1-6 rating on a myriad of aspects. Each section allows for an opportunity to explain the ratings, which I try to do. But, this is my chart for assigning the numbers in those sections:

1 (Loweset Rating)

I like you, but we should sit down and chat a bit. Something is up, I’m not sure if it is me, you, or what.

5 or 3 (Middle Rating)

You’re terrific and I love working with you. You are exactly as I’d hope you’d be.

10 or 6 (Highest Rating)

You are so effing awesome, I cannot contain myself. I’m going to start drawing plans for the monument I want to build in your honor. Would you like more coffee?

That’s how I approach peer reviews at Sparkbox. I get that I have a freedom to be rather informal in my approach, but I feel like it is adaptable. Regardless of format, providing honest feedback in a conversational voice has helped me overcome my apprehension of peer reviews.

I’ve heard Ben Thompson pop up on The Talk Show every now and then, but last summer I was introduced to his podcast, Exponent. In their 100th episode, Ben and co-host James Allworth give detail the world since the introduction of the iPhone ten years ago. This is possibly the most quintessential episode of Exponent. If you have never listened to the podcast, this is a great place to start.