The Wilson Project Blog of UX/Front-End Developer Ivan Wilson

Menu Skip to Navigation

Tag Archive / front-end

  • What is Project Ottawa?

    a method of building a visual model of an web application UI/front-end layer

    During the past four months, I have been presenting previews of sketches and notes from my notebook via Flickr.

    Preview Sketches:

    Project Ottawa [or the Ottawa model/diagrams] started in late February, prior to my trip to Ottawa for Jonathan Snook’s SMACSS Workshop. It was there that I did the first initial sketches post-workshop and a few weeks later, created the first draft.

    After some review and criticism from a fellow co-worker, I decided to work on the second draft. This took more twice as much time as the first, with testing and constant revisions. However, at this point, I am writing the final pages and presenting the Second Draft as a microsite in early/mid July.

    The Model

    In short, the model is based on a) recent work on modularizing CSS (via Nicole Sullivan, Jonathan Snook and etc), b) analog to linear algebra, most specifically linear transforms, and c) my ideas on the UI layer, based on a concept called The Information Layer.

    With these three items, I designed a visual “code” with symbols representing blocks of programming code and content. By examining mostly my own work, I developed the rules and basics to use the symbols to represent not the parts of the web application system, but also describing interactions withing the system.

    The original purpose of this was archival, record keeping for myself. However, I began to realize that there was nothing out there that visually describes the work that FEDs [front-end developers] were doing. We have code and and can talk about CSS, HTML, etc. But, maybe for the first time, there was something that allowed the work to be visualized and be more tangible.

    Status

    Currently, this is the second draft. Even though models are always being revised and changed, I kept the term “draft” because I wanted to present the working model in a state that was good enough for demonstrations. However, this draft appears, so far, to be close to being stable. Naturally, there is more work in the near future.

    Final Preview

    As I mentioned before, the final document will be presented as a microsite around early/mid July.

    Before that, I created a single page preview, giving a brief overview of the model and its use in “mapping” a single page, AJAX driven site. This is based on the sketches/drawing from the last Flickr preview and the same example will be used as a case study in the final document/microsite.

    Final Preview – Modeling a single page, AJAX driven site

  • To All My Co-Workers And Clients:

    I want to apologize for all the bad coding decisions that I have made during the last couple of years. A number of decisions were made with ignorance as the impact they may have made in terms of performance. Some of those decisions may have been made without consideration for the user.

    If I seem out of sort during the last couple of week, it was simply because the changes I need to make will require changing not just code but a mental process. Like anything, this will take more than a fortnight to change. It is a process of renewal and making mistakes and just throwing stuff into the trash bin.

    What I need is some understanding and some patience while this process works itself out.

    Sincerely,
    Ivan Wilson
    Front-End/UI Developer

  • First Preview of The Information Layer

    First notes from my Moleskin notebook (Project Charles – Volume 1), 5/10/2009 entry

    Notebook (Volume #1 - Project Charles) - First Set

    Notebook (Volume #1 - Project Charles) - Second Set

    First sketch of new information model (same date)

    Sketch (5/10/2009) - New Information Model

    New information model (current view, comparing with previous model) – Basis for “The Information Layer” essay

    New Information Model - Current Realisation

  • Endgame

    After two years this month, I have decided to end Project Charles in April. This will also mark the 10th anniversary of The Wilson Project.
    Mar 14 (Twitter)

    Depending on the ever changing schedule, Project Charles will be ending this year, if not sooner. After a long two years, I should be happy.

    I'm exhausted.

    I've carried this thing around, weathering all the stuff that gets thrown at me in the course of human life. This project became the internal motor of change, reflection, and experimentation. And a number of people have really benefitted from the results.

    The basis of Project Charles was redesigning The Wilson Project with the state of the art techniques in front-end development. No, we are not talking about the dazzling canvas experiments and all the fireworks. It was about learning all this new stuff to be able, like an experienced chef, to use this wider pallette to improve their work. Well, I'm still doing that. But Project Charles brought about an urgency to the process.

    Well, that urgency has come full circle. It's at a point where this project needs to end in order to go further on with other things. And since The Wilson Project Site is a working blog (and soon-to-be) portfolio site, I needed to end this thing to start doing new projects. And basically, I just need this monkey off my back. So why am I writing this blog entry?

    Because I feel that the need to apologize [to myself].

    This project was started with the idea of using XSLT via Symphony CMS. It's a very interesting application that I am sure will grow and improve. The cast of characters over there are currently working on the third version as I am writing this.

    Now, I'm in a time crunch. I cannot, at this time, learn XSLT and learn a new CMS without some focused time and effort. Unfortunately, considering the numerous hiatus periods in this project, that will never happen. So I took the hard choice and decided to move the project back to WordPress to speed up completion. I'm relieved at be removed of this burden. But I also feel sad, as I made some sort of bad compromised to complete this project. I know I shouldn't, but I'll live. I may feel bad for not completing the project in the way that I wanted fully but I have to move on.

    The other reason for Project Charles was conceptual. The "residue" of studying and observing the work around me of interaction design and front-end development. Yes, I have a few ideas that I've squirrel away.

    It's called The Information Layer.

    Ideally, Charles would have been the best demo, especially with Symphony/XSLT. But with the external changes of the last two years, there is a real need to share something now and not wait further down the road for an actual demo model.

    So, I'm shipping now. Everything can wait.

    I need my life back.

  • EOY

    Early morning from hotel window, Vancouver, Canada - 12/31/2010

    As I am writing this, I am looking at a fabulous view from my hotel room in what some of my friends call my second home of Vancouver, Canada. Part of me needed to get away to here do some end-of-the-year evaluation and some focused thinking about 2011. Then again, I allowed myself to relax a bit during these last days of 2010 (and I watched the Canucks beat the Flyers 6-2 Tuesday night at the home area…)

    But there are some things that occurred during the year that I need to mention before the final ball drop closes the year 2010:

    Fencing

    If you had asked me at the start of the year if I was going to start fencing again, it would have been a firm “NO.” There was no motivation to start again and no one was really asking to do so. And all the focus that I had with fencing went into my work, which paid off big. Irony, the only people who ever asked about me starting up again were my co-workers at CDG.

    Well, after two years, I decided to try fencing again. It has been the only sport that I have some liking to. Not to mention, the least likely to get bored at.

    Another bit of irony is that I restarted with Olde Town Fencing, the club I left almost four years ago. Despite that, the warming response made the comeback easier. Definitely a reminder of why I fence in the first place.

    Despite dealing with various injuries the last month, I am determined to continue my progress and actually compete again after a 2+ year absence.

    Travel

    This year:

    • Savannah, Georgia (IxDA Interaction 10)
    • NYC for opera (The Nose and Lulu) and design (Cooper-Hewitt)
    • Seattle/Canada (Victoria and Vancouver I)
    • For my first time, travel outside the Americas with FOWA/London
    • Of course, Vancouver for end-of-the-year

    For next year:

    • Boulder, Colorado for IxDA Interaction 11 (February 9-12, 2011)
    • NYC for opera with Nixon in China (Adams) and Wozzeck (Berg)

    Project Charles

    Basically, stops and starts. At one point, it was dead in the water. At one point, I almost considered ending the project. However, I caught a break (and some motivation from Tame Impala’s InnerSpeaker album) and did the complete site mockups. Started to work on the HTML templates but delayed due to technical review from the last two conferences I went to. Both made me think about what I was doing and in the end, the decision to make some more substantial changes in my work.

    Restarting work on templates in early 2011 and hopefully finishing the new site by The Wilson Project’s 10th anniversary in April.

    Work

    High point was three conferences:

    • IxDA Interaction 10 in Savannah, Georgia
    • An Event Apart a few blocks from my office in Washington, DC
    • FOWA in London, UK

    Lots of work, punctuated with four blog entries and some other minor additions to the blog.

    However, lots of reflection on my work process, especially considering many of the changes that affected my position as a UI/Front-end developer.

    But more about that in the next entry in this blog…

    Epilogue

    In the end, I remember about ten years ago that I started what would become a 20-month unemployment period. Now, at the end of 2010, thing have changed so much. A number of things that I first experimented with such as XHTML and building pages without table layouts are now not only accepted; they have become the gold standard.

    Now, with Project Charles heading for the finish line (?) in April 2011, more changes are in the pipeline for the next couple of years. Hopefully, 2011 will be a good one, not only for me, but for my family, friends, and especially my co-workers at CDG.

    Happy New Year 2011 from Vancouver, Canada!

  • HTML5 for Web Designers Book Review

    (Originally published on CDG Interactive/Innate blog)

    It’s back-to-school time, so here’s a pop quiz on today’s new buzz word: HTML5.

    1. What is it?
    2. Should I care?
    3. Should I worry?

    Answers: 1) see below, 2) yes, 3) not yet but soon enough

    So, now that you’ve taken the quiz, may I suggest a textbook? Specifically, HTML5 for Web Designers by Jeremy Keith.

    Now, I’ve known about HTML5 for a while (and some of the preliminary work around it). But when I heard about this book, I was curious how much more information could I gleam from its pages about HTML5. Judging by the title, I thought that it would be just an introductory text for web designers (not necessarily for experienced web developers).

    But, I took a chance. I ordered a copy and waited. And the package arrived.

    And when I first opened the box and held the book, the first thing that popped into my head was “Wow, this is a pamphlet!”

    OK, not a pamphlet but a brief, concise book (under 100 pages).

    However, from the very first page, it was evident that conciseness is the intent of the author. What Jeremy Keith does, with good effect, is to give the reader a brief synposis about HTML5, bypassing W3C language. (Alert: W3C documents are so precise, they could turn a cake recipe into a DVD instruction manual.)

    Of course, he starts off by answering what HTML5 is and is not–not a new version, but a much-needed upgrade for building future web applications. This means it not only adds/removes features, but also adds more semantic meanings attached to the current set of tags (important for Internet devices like mobile phone or screen readers.)

    For the remainder of the book, Keith highlights some important features and gives bits of advice for the newly introduced. The best thing is that he engages the reader enough to encourage further study in HTML5, which is not easy. This book could have easily become just another five pound dictionary. Of course, he remarks that there are others more experienced with this and points to some online resources. (As I am writing this, a number of new HTML5 books have popped up in the stores.)

    In the end, the author does what he planned out to do – give a nice gentle push in the right direction towards HTML5.

    Now, if you don’t mind. I have a list of HTML5 books to read.