Latest Blog Entries

  • The State of Front-End Development in 2017 (…well, at least, my version of it…)

    A response I gave to Roger Johansson‏ (@rogerjohansson) on Twitter (please read through the whole thread):

  • Contraction of Life

    “In faith there is enough light for those who want to believe and enough shadows to blind those who don’t.”
    – Blaise Pascal

    “It takes more courage to examine the dark corners of your own soul than it does for a soldier to fight on a battlefield.”
    – W.B. Yeats

  • Restarting The Engine

    Job Change from Innate (2016) to CQ Roll Call (2017)

    Today, I start a new job and adventure – UX developer with CQ Roll Call, a company that has been historically documenting the legislative history of the country for the past 72 years.

    It has been an interesting four months away from full-time work, going through the process of applying and interviewing for jobs – something that I hadn’t done in 10+ years. Obviously, applying for a front-end developer position as changed during this time. Unfortunately, some things haven’t changed since I last went job hunting. [Hint: JavaScript is not Java.]

    That said, there are a number of people that I would like to give thanks to the following:

    • Will Packard for his employment support/advice, especially during the first month
    • Kenneth Joholske reminding me why we’ve been friends for 30+ years (see you next week for opera 🙂 )
    • post-Innate items from Casey Hawkes (thanks for the youGo print) and Brian Schlansky (thanks for the note, keeping in AoRD lecture journal)
    • Owen Shifflet and Devorah Firestone with their support and letting me bent an ear once in a while
    • Alison Farmer for her advice and support in making this job transition one of the smoothest I’ve had
    • Mary Cadden for her support and shoulder to cry on at the right moments
    • Darrin Maule in offering a job literally hours after losing mine (sorry we can’t work together at Fig Leaf but I really appreciate what you did and hope you, your family, and Fig Leaf success and happiness)
    • Jeff Lloyd and Ambrose Ferber for reminding me that I was worth more than I thought
    • Kevin Hewitt and Kelly Mullen for job references
    • my fencing family at Olde Town and DCFC (and other members of the fencing community), who are waiting for me to come back
      (P.S. Wayne would have laughed perversely upon knowing my new employer 😉 R.I.P.)
    • nclud for not just brief employment but allowing me to stay around to get myself (not just work-wise) together. I am grateful to all of your and hope you guys do great things. And finally…
    • To the design/UX/IA/tech community. Many of you I’ve met off and on during the years, at meet-ups, various conferences and online. But during this time, many of you not only offered not just job lead but advice and support. I’m really honored to be part of this community and hope to return the favor.

    Thanks to all of you.

    And now…forward…

  • A Brief Note on Responsive Design and Constraints

    (In response to Adam Silver’s Stop using device breakpoints)

    There are two points that I like to add –

    The relationship between Constraints, Content, and Context

    Content

    Content will always affect Constraints (i.e. breakpoints) and vice versa.

    What I do is a) use the familiar set of breakpoints as initial guesses and b) treat them as assumptions that need to be tested and verified.

    If you’re getting more breakpoints, maybe you need to reconsider your initial ones. Some may just need to be:

    1. Moved or
    2. Removed completely

    Experience

    This is probably more a developer than designer problem(?) but depends on your background. It comes down to hands-on knowledge of various devices.

    1. Don’t assume the device you have on hand is the one [definite] solutions. Just because you have an iPhone doesn’t mean everyone else does…sounds sensible but you’ll be surprised how many people don’t follow that advice. I have experience because most of my work involved non-American clients (more likely to see a Samsung than an iPhone).
    2. Comes back to testing on multiple devices – using BrowserStack (or other simulators) helps testing for both iOS/Android devices or just get a few old/borrowed devices on hand.

    The idea here is to get use to the idea of breakpoints as initial guides, not fixed points.

  • Future Imperfect

    As I’m writing this, it’s a rainy morning in Vancouver, Canada. Nothing new. Spending time with friends that I don’t see but once a year near my birthday. In this case, I’m here to attend the IA Summit conference this week. This is my first non-US conference since IxDA Interaction 13 in Toronto.

    Looking back at that conference there were a number of things that stood out. A number of them became influential years later. One of them was a short lecture by a designer named Nate Archer called “Beyond Responsive”.

    Nate Archer: Beyond Responsive from Interaction Design Association on Vimeo.

    Well, four years later, those words seem prescient right now. The world has been filled with all sorts of devices that we access the web. More than just the trio of phone/tablet/desktop. Basically, any device that has access to the web is an access point – from watches to 4000K TVs. But there is another way of looking at this. Instead of “devices”, let us consider going in the direction of “inputs”. Responsive design appeared not just with mobile devices but devices which are also touch-enabled. Now, mobile devices are as ubiquitous as any household device, front-end developers like myself have to deal with coding for interactions that take place on touchpad as much (or even more) than mouse/keyboard. (Though we could be doing a better job at the keyboard then we are currently doing.)

    [Note: touch-enabled devices are not necessary phones/tables and doing feature support for touch is still a bit tricky]

    In some respects, the beautiful lie of responsive design is that the constraints are visual, via breakpoints and media queries? But what if those constraints aren’t visual. CSS has hidden artifacts describing inputs – media types. If one would look at the specs (https://www.w3.org/TR/CSS21/media.html#media-types), the following types are supported:

    screen, print, speech/aural, handheld, tty, etc.

    Screen is the most familiar with print/speech following. But there’s tty? From the spec, tty refers to devices like terminals and teletypes. The later was a telecommunication device that has long since disappeared with the advent of email. But back in the day, it was considered important enough to be considered in the W3C CSS spec. Now think about the future. Someday, will we may consider mouse/keyboard interactions as obsolete as teletype?

    Now, we are seeing the advent of AI interfaces – sophisticated interfaces that allow access to the same information like we do with mouse/keyboard and touch.

    Which comes back to the conference I’m attending, IA Summit. This year’s topic is artificial intelligence and information architecture. The main job of a front-end developer is building interfaces for acquiring information. Obviously, things will change in the next couple of years. But change into what?

  • Thinking About Responsive Design, Part I

    In finally starting to write about responsive design, I realize that there’s a trap. I’ve known about RWD since 2010 with An List Apart’s article Responsive Web Design. So by now, it’s something that should be commonplace and a regular process.

    Then again, if that was true, I wouldn’t have written the blog post that this new lecture is based on.

    The only true wisdom is in knowing you know nothing.
    Socrates

    In the next couple of months, I will know more about RWD than I did before as a front-end developer. And from that, more questions about it. But it’s an interesting trip just to see what else can be found along the way :-).

    That said, a couple of months ago, I was looking a PBS/American Masters biography on architect Eero Saarinen. I followed up with a few lectures on him and his work on YouTube. There was a quote that stood out:

    Always design a thing by considering it in its next larger context – a chair in a room, a room in a house, a house in an environment, an environment in a city plan.
    Eero Saarinen

    Sounds like a way to think about responsive design.

  • A Brief Note on Container Queries and RWD

    Well, while making the first steps in writing my next lecture about responsive design, I came upon a Tweeter discussion last week. Ethan Marcotte, author/mastermind behind RWD, talked about container queries and his support for them. Very interesting read.

    Ethan Marcotte “On container queries.”

    I’ve heard about container queries before during the last year or two. But I decided to read this article with much more intent because of topic relevance.

    To describe container queries, you need to think about web apps/sites as a system. Changes via media queries are macro, that is, applied to the whole system. It’s what we been doing for years. We build the base (preferable mobile first but any sort of initial state we want) and apply changes at certain breakpoints. So when we write the following media queries:

    @media (global conditions/breakpoints #1) {

    … some changes here...

    }

    @media (global conditions/breakpoints #2) {

    … some changes here...

    }

    etc..

    what we are doing is

    Global Media Queries (Ottawa Model)

    Even though these changes are to certain areas such as footer/header/etc.., these are applied as if the whole app is one big container.

    But with container queries, we are applying changes at the micro level. Instead of the previous example, we are applying changes to local containers. The queries will be influenced by the container conditions, not by the overall viewport. So now instead of the previous model, we have the following:

    Container Media Queries (Ottawa Model)

    and with each part

    Container Media Queries - Expanded (Ottawa Model)

    we are applying changes on the local level/containers. These media queries are not global and [could] be different from other containers. You could have a combination of global and local conditions in this system as well (don’t know if this would happen but you never know):

    Container/Global Media Queries (Ottawa Model)

    As for the talk/lecture, nothing had really changed. The main focus of the talk is the “why’s” of what we do in terms of RWD. However, it is obviously something to think about further.