How Do I Keep Up With the Web?

I got the following question from a nice fellow by the name of Chris Martin:

Hi Tim,

Your event on CSS Grid popped up in my Twitter feed today. Awesome!

That got me thinking about a question a student asked me recently: How do you stay current in web design and development? How do you manage to find a way through what seems to be an almost unmanageable task of being able to say you are a state-of-the-art designer/developer? Is it a fool’s errand? Is it clever marketing?

I’m curious what you do to stay current.

I appreciate your insight and hope you have a super day.

Chris

This is a question I get a lot so I figured I’d post my answer here for posterity.

This is always a difficult question to answer but I’ll start with clearing some stuff up. Whoever is marketing themselves as a “state-of-the-art designer/developer” is in essence a liar. With the rate in which things change in our industry it’s impossible to be completely caught up and know everything.

That being said, here’s how I try (keyword being try, here) to keep up:

  1. Read articles and books about the web
    There are many resources here. A List Apart, 24 Ways, A Book Apart, CSS Tricks, Smashing Magazine, and Net Magazine. Then there are individuals like Jeremy Keith, Ire Aderinokun, Brad Frost, Rachel Andrew, Jen Simmons, and many others.
  2. Practice, practice, practice
    Once you’ve learned something new, you’ve got to put it into practice. Redesign your personal site, build a blog, create a few CodePens. It’s important to flex the new muscles you’re acquiring.
  3. Don’t beat yourself up
    Like I said at the beginning, no one knows everything. That is the truth. Anyone who says otherwise is a liar. It’s ok if you don’t know everything. It’s also ok if you don’t know the latest thing. Try your best to do work you’re proud of. As time goes by, you will certainly learn more.

I can’t stress number three enough. Getting comfortable with things you don’t know, and even realizing there is much you don’t know you don’t know is essential in a fast paced industry like ours.

Hope that helps.

Is a Switch to Windows My Inevitable Future?

Thoughts on my visit to a Windows store and Apple’s Mac Pro announcement

I’ll admit that I’ve become more and more worried with the situation of us pros and Apple. Lately an eventual switch to Windows has felt like an inevitable future. So much so, that when I was last at the mall, I walked into the Microsoft store.

The store is such a blatant ripoff of the Apple store you can’t help but chuckle. I looked around at the poor souls looking at all this stuff and saw the Surface Studio. It’s gorgeous. The display is beautiful and the new mouse and keyboard look really great. I thought to myself, “Let’s see how far Windows has come since 2007.” I opened up what I believe to be Cortana and began to type. I accidentally hit the letter H and when I went to delete it to try again, it froze. I walked out.

I’m not saying an Apple device has never frozen on me, but never for hitting the delete key. Still, as terrible as I may think Windows still is (many love it), it doesn’t change the fact that they hadn’t updated the Mac Pro since December 2013, they’d left the display business, and in general Apple’s actions seemed to point to iPhone being the most important thing.

Now, I understand how that makes sense. iPhone is a very lucrative source of revenue for Apple. But something that hasn’t made much sense is the fact that they need developers to make software for the iPhone. That requires pro-level hardware.

Also, Apple has been removing ports like it’s going out of style. TJ Draper had this to say:

I’m a pro and I need these ports to do the things I do as a professional. Remove all the ports from the non-pro devices. It makes sense and it allows things to move forward. But space is not at a premium in the MacBook Pro — particularly the 15”. So let’s not remove ports for no good reason. Please, Apple, remember what pro means.

TJ nailed it. I felt like Apple was forgetting what “pro” meant. Well, it seems we finally got our answer. I’m pretty excited.

John Gruber, one of the five journalists picked for the tech equivalent of going to Mars except you don’t die in the end, has an excellent writeup on what Apple is doing with the Mac Pro. In it he quotes from Phil Schiller who gives the juicy (but still Apple-like ambiguous) details1:

With regards to the Mac Pro, we are in the process of what we call “completely rethinking the Mac Pro”. We’re working on it. We have a team working hard on it right now, and we want to architect it so that we can keep it fresh with regular improvements, and we’re committed to making it our highest-end, high-throughput desktop system, designed for our demanding pro customers.

As part of doing a new Mac Pro — it is, by definition, a modular system — we will be doing a pro display as well. Now you won’t see any of those products this year; we’re in the process of that. We think it’s really important to create something great for our pro customers who want a Mac Pro modular system, and that’ll take longer than this year to do.

Gruber’s whole writeup is worth the read, but this one quote is the one that made me feel like Apple hadn’t forgotten me. I don’t personally own a Mac Pro, but their investment in it is important for all of us pro customers.

Not to mention, they’re getting back into the display business. Which I’m so happy about because the collaboration with LG has been rocky to say the least. The screen is about the only amazing thing about this display. The I/O is virtually non-existent. It’s sad for LG who ended up making a mess out of an great opportunity.

In short, this is excellent news. Apple knows they messed up, and are taking actions to correct course. Yes, we won’t see any of this stuff till at least 2018, but it’s much better than “Apple is very committed to the pro market” junk they’d been feeding us before.

Things feel a lot better now and I can finally cease my apparently unreasonable expectations of Windows being at least “okay”.

  1. All Apple executive quotes are from Gruber’s post.

Tickets on Sale for My CSS Grid Workshop

You may have noticed that I’m obsessed with CSS Grid. I’ve been making all types of things with it and loving it. When you see the new things possible for us with this new spec, I think you’ll be just as excited.

A few weeks ago, I gave a talk at a local conference here in the Twin Cities and wanted to expand that into a two hour workshop. My idea is simple: help people learn CSS Grid, but sell tickets at an affordable price. Workshops at conferences can cost up to $400 and I’ve never been able to go to one because of it.

So come to my workshop. Early Bird tickets are priced at $49 until this Friday which will give you access to the live online workshop and the video so that you can go back and rewatch. After April 7th, tickets will go up to $99.

The two hour workshop will talk about some of the issues we’ve had with layout and you’ll code along with me as we solve these problems with CSS Grid. Even if you can’t watch the workshop live, you’ll still get access to videos and code.

I wanted to do something nice for people who support my projects. People like you that read this site. So if you’re going to buy, please use the code timismyfriend and you’ll get 50% off.

And can I ask a favor? Even if this isn’t for you, please share it on social media so that others can find it. I’d greatly appreciate that!

Moving to Netlify

My time hosting Jekyll sites on Heroku draws to a close

In June 2015, I set out on a bold journey. One where no one had gone before. If you’re thinking of space, hell yea that would be amazing, but no. I set out to host my Jekyll site on Heroku.

I’d been paying money for my static site to be deployed. There had to be a better way. I searched what felt like every corner of the internet to find a way to do this. Heroku could build my site straight from git. That would be amazing!

After hours of reading blog posts and comments on all types of web forums (those still exist by the way), I found what I needed. As is often the case, finding the solution took way more time than actually implementing it. In just a few minutes I had deployed my site to Heroku and it was building directly from the latest commit on GitHub.

Heroku has been an excellent home for my Jekyll sites. I’ve even dedicated a series on how to do it. It’s been a lot of fun to figure out different issues I’ve run into and then write about them. Also, hosting with Heroku is what’s allowed me to publish easily from iOS.

But the time has come to move on.

Oh So Melodramatic

It isn’t so much of a complete move as it is living in two places. Heroku is still very great with sites I manage. I’m mostly moving my Jekyll projects over to Netlify which I seem to have more and more of. I love Jekyll.

Here are some of the reasons I moved:

  1. One Click SSL
    Holy moly. No, seriously. It’s one click. You click a button and the certificate is issued and uploaded to Netlify. This is how easy SSL should be everywhere.
  2. HTTP 2.0
    For some reason, Heroku hasn’t implemented HTTP/2 yet. I don’t know why or when it’s going to happen, but Netlify automatically enables it on HTTPS sites.
  3. Post Processing
    Netlify gzips, minifies javascript, and performs lossless image compression if you want it to. Pretty cool.
  4. Static Site Welcoming
    With Heroku, static sites are definitely not what it’s built for. Heroku is built to handle applications and getting Jekyll to build and work involved a lot of research. On Netlify, all I need is to have my Gemfile and give it the build command. It takes care of the rest. Hosting a static site on Netlify doesn’t feel like a hack like it did on Heroku.

There are a few other reasons like easy deployment from GitHub, deploy previews which allow you to view a pull request on a dev server, snippet injection, and form handling. If you want to read about all these features, I encourage you to read the docs.

The people over at Netlify are doing a pretty great job. It seems very smart to me to design and build for the needs of people building static sites. I’m sure that number is growing and will continue to do so. Also, I’d be remiss not to mention how well designed the UI is. The experience has been very well thought through. Kudos to Rafael Conde.

If you’ve been looking to make a move for your static sites, you should definitely consider Netlify. If you have further questions, you can always email me.

A Sticky Situation by Ethan Marcotte

Ethan Marcotte:

Last week, I thought I’d clean up my blog entries a bit. (Yep. I’m that fun.) Before, there were a couple short but dense paragraphs, each containing a truckload of links: one linking to my archives, a couple links to read either the previous and next posts, and then a few trillion links to “share” the “entry” on “social media” “web-sites.” Now, that’s all been reduced to two links, one for the preceding entry, and one for the next one.

Ethan describes a bug he found with position: sticky and how it “magically” disappeared. I love writeups like this. More people (myself included) should do it.

Be Kinder to Each Other by Hui Jing

Hui Jing after reading some negative comments on the Update CSS Grid page of the Windows Developer Feedback site:

The world is not a perfect place. Life is not fair. But the matter of fact is, we live in this world together. All 7 billion (and more) of us share this planet. Nobody asked to be born, but we’re all here now. We all have a choice on how we want to behave, and these choices will have an impact on someone else, whether we are aware of it or not.

Microsoft is a big corporation and I’m sure everyone has their own perception and opinion of them. But within Microsoft, every employee is an individual human being, just like you, with thoughts and feelings. Furthermore, in a large corporation such as Microsoft, there will definitely be many internal dynamics and decisions outsiders like us are not privy to. Many engineers themselves probably won’t have the full picture.

What an excellent piece that so eloquently communicates a fundamental truth. The reality is that a lot of us like to bash on Microsoft for their browser issues, but Edge has come a long way. I believe that those developers are trying their best, and all the negativity doesn’t get us any closer to having CSS Grid implemented in Edge.

Instead, vote for the developers to update CSS Grid. You can also vote with your code by shipping sites that use Grid layout. As the saying goes, you catch more flies with honey than you do with vinegar.

CSS is Not Broken by Keith J. Grant

Keith J. Grant:

You cannot be proficient in JavaScript until you understand coercion, prototypal inheritance, and asyncronous(sic) flow control. Likewise, in CSS, you have to understand the cascade, inheritance, and the box model.

CSS is hard. But this is not because the language is faulty. Rather, the difficulty lies in what the language seeks to accomplish.

This article is one of the first fair pieces on the topic. These days, the fights going on around JavaScript and CSS can get pretty heated, with some going to some low places. If you feel CSS is broken, you are not stupid. CSS has a lot of quirks, and that’s why it can be difficult for those who don’t know it well yet.

Hell, I’ve been writing CSS for ten years, and I have many moments of frustration with it. Often, it’s because I didn’t plan my project correctly. CSS can be very unforgiving in that way.

Still, CSS is not broken. I couldn’t agree more with Keith’s last paragraph:

CSS isn’t broken. But it does require study and skill. It does require careful thought. As with anything in programming, you can make a mess of the code. Sure, blaming the language is the easy way out. But when your JavaScript is confusing and buggy, you know it’s not the language’s fault.

If you don’t want to learn CSS and its quirks, that’s fine! Let those of us who love CSS and don’t want to learn JavaScript’s quirks write it. In the meantime, we’ve got to stop calling each other idiots (or worse) for disliking a computer language. It’s not constructive and hinders all the amazing things we could be doing together.

Hassle-free Full Bleed with *:not() by Dave Rupert

Dave wrote this the day I went to Vegas and I haven’t had time to write about it.

Let’s say you’re making a blog post layout. Content is entered into a CMS inside a WYSIWYG editor field. You echo that content to the page. You pull it up on a mobile device and notice the paragraphs go edge-to-edge. Yikes, it’s a little uncomfortable. So you add some kind of left/right padding maybe using a div.container.

This works great until the client asks for the images and video to go full bleed. Your universal padding solution no longer works well.

Uncle Dave’s solution for this is pretty great. Visually, this is the type of layout I wanted for this site. So in an exercise of self-shame, let’s look at the selector that makes it all work!

h1,
h2,
h3,
h4,
h5,
ol,
ul,
hr,
.post__header,
.post__footer,
.post__entry > p,
.search-results-list > p,
.page__entry > p,
.highlight,
.extendout figcaption,
.footnotes,
.pagination,
.site__footer small,
.author,
.fullwidth,
.page__search {
  margin-left: auto;
  margin-right: auto;
  width: 90%;
  @media #{$large-up} {
    width: 65%;
  }
}

Ugh! What the hell is this Tim? Gross! How I ever thought this was an elegant solution, I don’t know. But going back to what Dave says is perfectly illustrated in the code above. Using :not() allows you to only manage exceptions instead of all this. The actual elements that I want to “embiggen” as Dave calls it, are only a few. This selector would only contain around four or five exceptions.

Anyway, I need to put this on the list of things I need to rewrite for the next redesign.

Personal Site Redesigned

Three months ago, I set out to redesign my personal site. I usually start feeling the itch every year or so. I don’t really know what version this is, but feel free to look at previous iterations on the Wayback Machine.

This year, I’d learned a lot about CSS Grid, and I was determined to ship my new site using it. Little did I know how much support it’d have by now. As of this writing, Firefox, Chrome, Safari, Opera, iOS Safari, and Chrome on Android all support CSS Grid. That’s pretty amazing considering that when I started working on this refresh, I was using Firefox Nightly to make sure Grid was working.

In addition, to the Grid stuff, I’ve tried to add more of my personality to the site, and communicate who I am and what I’m good at. Also, the thing is speedy. With the cache disabled, it’s loading in 815ms. With the cache enabled, it’s fully loaded in 353ms. Even on Good 3G, the DOM is loaded in 657ms, with full page load coming in 3.68s. Obviously, there are always improvements to be made, but I’m really happy.

Another thing I focused on was to optimize space on large screens. I still think there’s work to do in this department, but it’s definitely better than previous versions. You’ll see that blog posts go from one column to two then three. I’m still containing content at a certain width, which some might disagree with but I like it.

I invite you to take a look, use your inspector tool (or look at the code on GitHub), and let me know what you think. If you have some constructive criticism send me an email. I’d love to hear from you.