Grid Garden

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.

Daily CSS Image: Weeks One and Two

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.

A Letter To My Coworkers Concerning Peer Reviews

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.

Exponent Anniversary Episode

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.

The reality behind scrambling names

It’s not related to a bad memory or to aging, but rather to how the brain categorizes names. It’s like having special folders for family names and friends names stored in the brain. When people used the wrong name, overwhelmingly the name that was used was in the same category, Deffler says. It was in the same folder.

Apple Refunds and Purchase History

I have been buying media and software from Apple for a long time. Pretty much since the iTunes Music Store opened. Until yesterday, I have never so utterly regretted a purchase that I wanted a refund. Apple does not make it obvious how to accomplish this task, so much so I got a feeling that it couldn’t be done. I searched the Apple Support documents the best I could to no avail. Through a series web search landed on instructions start this process in iTunes by going to the Account page and viewing recent purchases.

Turns out there is an easier way.

Apple has a website built for viewing purchases and reporting issues with those purchases. The title of the site is Report A Problem, and at first I didn’t get why. I saw the full purchase history of my account from the iTunes Store, App Store, and even the Mac App Store. Then it dawned on me, it was everything in the last 90 days. The timeframe to report a problem.

What is nice is the purchase history can be broken down by receipts1 and product type as well as search. From what I can tell though, it takes up to 24 hours before a purchase will show up on the site. I was looking into a refund about 14 hours after purchasing.

Once the purchases, a Mac app and companion iOS app, showed up on the site I pressed the “Report A Problem” button. The area expanded to reveal a dropdown list and a text area to describe the problem. I selected “Didn’t mean to purchase this item” and for that the description was required. I left the Apple employees a lamenting response, hit submit, and was told to expect a full refund in five to seven business days. Easy enough.

  1. The receipt bit is quite nice for those business reimbursement requests. 🢕

Sparkbox Foundry: Working With Templates and Other People’s Code

Purchased templates get a bad wrap. Up until early this summer I was on the bandwagon, deriding the use of templates. But, then my colleagues and I had an instance where it made since on a project. My mind has shifted to understand why and how agencies can utilize prefab web templates to meet the needs of their clients. However, there are things to keep in mind when choosing this approach. Hopefully my article on the Sparkbox Foundry we be a useful guide for those weighing such a decision.

The Shift: Progressive Enhancement

I joined several of my Sparkbox teammates this month a helped write a joint article for The Shift on the topic of Progressive Enhancement. I love the topic and I dive into what I love about CSS, the cascade makes progressive enhancement a natural aspect of the development process. The tl;dr on utilizing the cascade for progressive enhancement is to put styles for older browsers near the top of the selector block with newer properties toward the bottom. This works especially well for Flexbox properties, which I get go into detail in the article, so check it out!

Be sure to keep up with what others are writing for The Shift, with my list of Shift articles.