Tag Archive / html

  • 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 at CDG/Innate.

    That said, I want to thank my fellow co-workers – including Lisa Crotty for her advice, Brian Schlansky for his time and his ear while prepping the talk, and Scott Adams (company CEO) for letting me do one final practice in front of the company for a much needed warm-up.

    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

  • 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.