How to Make the Web Better

Who Browsers Are For

The most pivitol tool a web developer uses day in and day out is a browser. They are what we develop for. Browsers can equally enstill excitement and dread throughout a project. As a web developer, it can be hard to maintain perspective of the purpose of browser—to meet the needs of the typical user.

As developers we want the browsers’ primary focus to be on making feature-packed, standards-based browsers. We want really great built-in tools to debug our HTML, CSS, and JavaScript. And when we come across bugs in one browser and not another we curse its name be declaring it the new IE! The perspective we have to keep in mind though is that most users of a browser, are not developers.

Browsers are justsoftware and there are bound to be bugs and issues. Thankfully most browser makers have instituted short release timeframes to take care of minor bugs quickly. But even so, the browser makers’ priority is a feature rich experience for the user. These are features that aren’t associated to any standards, but instead provide the user with preferencial features. One of the reasons I prefer to use Safari has my main browser is the built-in feed reader and tabs syncing. Other browsers offer these features as well, but I like how Safari does it.

Browsers aren’t primarily made for developers, but they are a vital community to a browsers survival. At that web developers are completely reliant on the existance of state of browsers to accomplish their job. We need to maintain constant dialogue between web developers and browser makers.

Report Bugs

All the major browser makers have teams dedicated to reviewing and prioritizing bugs. Browsers are probably the biggest form of customizable software, taking in a set of parameters from HTML, CSS, and JavaScript and rendering them on the page. They cannot account for all problems, nor may they experience the same pain points you are running into day after day. Instead of lementing that the current browser is the new IE, log a bug report and make the web better.

Here is where you can log a bug for each major browser maker:

Follow The Browsers

Additionally consider following the Twitter accounts, blogs, and mailing lists of all the browsers to be aware of what they are up to. WebKit has a great blog, Chromium has a very active community forum, and Opera is quite intent on tweeting all kinds of things.

Make The Web Better Through Engagement

The voice of the developer is important to the browser maker. Lamenting short-comings and complaing about a lack of support doesn’t help fix those problems. We can tweet twelve times a day how much we don’t like Safari’s JavaScript tools, but won’t fix it. Tell the browser makers what you don’t like, what will help you make better websites. They have avenues to listen, but they need to be utilized, otherwise we’re just yelling at inanimate screens.

Take the time to document and report a bug, and make the web better.

Net Magazine: Element Query Tutorial

I wrote a tutorial covering Element Queries for Net Magazine that appeared in last month’s issue. The web version of the tutorial is now available on their website. If you haven’t looked into element queries, it isn’t too bad of a place to start. In the article I give an overview of what element queries are, some simple use cases, and an explanation of using a polyfill.

The online version leaves out some aside content from the print edition, so below you can find some resources to further explore the wonders of element queries.

Polyfills

Articles and Websites

Responsive Issues Community Group (RICG)

RICG is helping push element queries forward as a web standard.

Media Queries Are Not The Answer: Element Query Polyfill

By Tyson Matanich

Working around a lack of element queries

By Scott Jehl

Media Queries are a Hack

By Ian Storm Taylor

Element Queries

By Tab Atkins, Jr

Element Queries, From the Feet Up

By Daniel Buchner

Element Queries for CSS

By Tommy Hodgins

The Shift

Today, Sparkbox launched a community writing project called The Shift. Each month a new topic is selected and the whole web industry is then invited to write on that topic. Whether it be posted on a company blog, as a Facebook post, or a Medium article, the hope is to spur a large conversation with diverse thoughts and responses.

From Sparkbox:

Here’s how it works:

  • a topic is announced on the first Monday of each month
  • if you’re able to contribute, you announce publicly that you’re participating in this shift using “#startYourShift” hashtag -everyone is invited to research, consider, and publish about that topic on the last Friday of the month at noon Eastern
  • all contributors share a link to their piece using “#startYourShift” hashtag on Twitter and any other platforms where they please
  • we all get to be part of an industry-wide conversation on a specific topic

The inaugural topic is “How to Make the Web Better.” You can sign up to be notified about The Shift topic for the month, and get reminders as the deadline approaches for each topic. I plan on participating as much as I can on this site, I hope you will as well. Be sure to follow The Shift’s Twitter and checkout The Foundry to see what a Sparkboxer might have to say.

Speaking at a Great Event

Ben Callahan, the President of Sparkbox, for which I work, wrote down some great observations on what makes an event, or conference, great. The three key ingredients he sees are Thematic Content, Inviting Space, and Challenging Conversation. Having just returned from a great conference, I couldn’t agree more with this list.

I had a wonderful opportunity last week to participate at the CSS Dev Conference on the Queen Mary in Long Beach, California. I gave a talk on the concept of element queries and how to use them. While I had an absolutely wonderful time, I can’t help but now examin the conference through the lens Ben setup in his article.

First off the conference is called CSS Dev Conf, while not every talk is about CSS specifically, it is a broad theme of design in development. The shining theme this year was SVGs and a deep dive into its possiblities. The winning1 talk, by Sarah Drasner, was on animating SVGs. Sarah did a terrific job with her presentation, it was a well-deserved. Other’s presented on SVGs in all kinds of niche uses. It was quite exciting.

The next part of Ben’s list is to provide an Inviting Space. Here I must say is where I see the conference organizers shine. CSS Dev Conf is run by Environments for Humans (E4H). Throughout most of the year E4H runs a number of online conferences, such as the RWD Summit. CSS Dev Conf is their live event, and they know how to put on a show. For starters the conference was held on the RMS Queen Mary–a retired 1930’s British cruise ship permanatly docked in Long Beach, CA, and it’s haunted. Hard to beat that conference venue. What’s better is E4H foster’s a great environment to relax and mingle with other web folk. Every night there was some kind of event, even the day before the conference officially kicked off.

The last part of Ben’s list is Challenging Conversation. That part always depends on who you are around and perhaps who you are. For me I’m not always the most out going, the challenging part of a conversation for me can just starting. But once conversations do start, there is so much that can be said, and when there are great speakers talking about great content, the conversation is abundant. I got to meet some fantastic folks at CSS Dev Conf, and many I hope to keep up with.

I think the last thing I would add to this list is for me, Speak Up. Its great to go to a conference and soak in all kinds of great and useful knowledge, but being silent doesn’t help you or the industry. You have a voice. You have thoughts and opinions about what you see at the conferences you attend. Say “hello” to other attendees and ask about their thoughts on a topic that was convered. Help develop your thoughts and other’s thoughts through dialogue. Better yet though, Speak Up just to meet people who do what you do, who struggle with the same stuff. Make friends and have fun. This industry is built on far more than knowledge of topcis, but it’s built on relationships and encouraging people far beyond the work we do.

  1. CSS Dev Conf runs as a multi-track conference with attendee voting of each talk. The winners of each track then present again, the idea being that those that missed the best would have another opportunity to see those talks. The next level of voting applies to those that presented again, which declares a popular vote winner of the speakers.

The effect typewriters had on typography

Marcin Wichary of the Medium design team tackles how the typewriter set back advances in typography, and now with recent web technologies, how we are working to take back beautiful words.

You see, I blame typewriters for double-handedly setting typography back by centuries. Type before typewriters was a beautiful world filled with hard-earned nuance and richness, a universe of tradition and craftsmanship where letters and their arrangement could tell as many stories as the words and passages they portrayed.