000 & 111

A web design and development blog

March 2017

Introducing Cutie Wapps

Included In the Mozilla Developers Network Newsletter

The Pain Points of eBooks

Universal Books (uBooks)

New Blog

New blog

I've been wanting a space where I could share some of my thoughts on web design and development. I don't tend to like much of what's out there. I wanted this blog to be both a showcase and a place to put some content. I also don't need it to make any money for me. So here's the new blog. I hope that it allows me to share some things that will influence the community of designers around the world.

The one thing that's a little different is that this blog is a blend of old- and new-school methodologies. It's a quick and dirty web app that runs on HTML5, CSS3, and Javascript (jQuery). Because it's a web app, you'll find that sharing pages is difficult. I'd love for someone to show me how to create and trigger the "pages" on page load. This blog is being hosted on Github, so feel free to create a pull request and make it better.

The old-school part of the site is that it's not built with any sort of CMS or even Jekyll. Just a plain old website. I figured doing it that way would keep me from writing too frequently or too much. We'll see how that goes. A lot of work will go into each post.

If you want to comment on my thoughts or want to participate, leave me a comment or DM on Twitter.

Universal Books (uBooks)

The pain points of eBooks

Included In the Mozilla Developers Network Newsletter

Introducing Cutie Wapps (qdwapps)

Today, I'm introducing qdwapps (pronounced, "cutie wapps"), which stands for Quick and Dirty Web Apps. What is a qdwapp (#qdwapp)? It's a small, static web app that is run in the browser using only HTML5, CSS3, and Javascript. It is essentially a smaller version of an Angular-built single page web app but without the complications using a framework like that introduces. No injections. Just a little Javascript (vanilla or jQuery) to create a smaller single page web app.

Cutie Wapps are built on a design philosophy I'm calling Layered Web Design (#layeredwebdesign). The layered approach sees the one-page website not as relative sections stacked two-dimensionally one after another but as a stack, or layers, of sections existing in three-dimensional space within the browser window. The effect is that clicked links pull "pages" or "views" (which are really just HTML5 sections) to the front and do not lead the user down the page to the sections like a normal one-pager. Links also do not trigger a new HTTP request, which should help out mobile users and those on slow data connections. The approach also creates a more app-like design where views are changed instantly. Various page transitions effects can be applied without having to download all of the page's UI components again. In the end, this creates a very fast-paced user flow without the bulk or data load of a traditional website.

Extra Credit: The layered approach can also be combined with a database or JSON file to flow information into the page to create a dynamic web app on the content side.

The first cutie wapp that you can demo is here:

Cutie Wapp Demo

FYI: This blog is also built as a qdwapp. Just open up the inspector and check out the code.

The reason I started thinking about creating Cutie Wapps is to help organizations and individuals who want an app but don't have the need or budget for a full-blown web or native application. qdwapps:

I'm sure there are many other benefits that I haven't noticed that will become apparent over time.

Test out and learn more about Layered Web Design in this collection of codepens: LWD on Codepen.

Questions or comments? Connect with me on Twitter: @brianhaferkamp