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

Menu Skip to Navigation

Tag Archive / html

  • 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):

    From my view, it seems that front-end development has split into two camps: one web-focused, one app-focused.

    @iwilsonjr (6:20 PM · Jul 8, 2017) – https://twitter.com/iwilsonjr/status/883812973730570244

  • The Secret Life of Forms

    CSS Dev Conference 2016 - San Antonio, Texas

    Slides – http://www.slideshare.net/IvanWilson3/the-secret-life-of-form-67435952
    Lecture – https://cssdevconf2016.sched.com/event/7Q0d/the-secret-life-of-forms-secretforms

    One of the highlights of the year was lecturing for the first time at a conference. In this case, CSS Dev Conference at San Antonio, TX. Basically, I decided to take some advice and take a chance. After sending my proposal, I was shocked and thrilled to be selected via anonymous vote in July.

    Of course, getting the talk ready was even harder than the waiting. It took months of writing and editing and practice. But I was able to get it together and delivered it a small audience at the conference on October 17, 2016. This talk was about UX, coding, and forms. However, it was peppered with things that I’ve done during the last ten years.

    I also want to thank the other speakers at the conference in helping me not only relax but also giving me advice for speaking not just for the first time but also their experiences in giving lectures as well.

    And finally, I want to thank Christopher Schmitt, Ari Stiles, and Elizabeth Moore in helping me make my first-time experience as a lecturer a wonderful and memorable one. It means so much when for years I was attendee, to be not only speaking but giving back to the community that I respect.

    Thank you all 🙂

    Lecture - The Secret Life of Forms, left - notebook, right - presenter pass

  • 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