jQuery Mobile Transitions: Static vs Dynamic Content. Part I

On a recent project I was working on, the client had a web-site structure in mind where the user would navigate using a page swipe (on touch-based devices) and the pages would transition using a slide transition effect. It was pretty clear that jQuery Mobile already offered a lot of the functionality that we were trying to accomplish…both swipe handling (which isn’t discussed here) and sliding page transitions.

jQuery mobile greenAs usually happens when finding a “perfect” technology to fit into a project, the implementation details didn’t quite fall into line “perfectly”. The primary issue was that, while the page transitions should slide from page to page, depending on the context, not everything on each page should transition. For example, transitioning between some pages might require the background to slide with the transition while others might require that the background stay static. The solutions for these different sliding approaches weren’t always completely intuitive.

I’m going to describe each the different combinations of transitions that we needed to accommodate and then provide details on how to achieve each one. Part I will cover the initial base source, how to massage the code to accommodate jQuery Mobile, and how to do a slide transition between pages.

(more…)

Word Processing in HTML

Photo of "Wird" by Marian Kroell on Unsplash

Clippy

I know a lot of people who hate word processors. For us web developers, we know how to optimally structure a web page and how to effectively apply cascading styles, so why can’t we ditch the word processor and simply use HTML?

With the power of HTML, CSS3, and some export libraries, we can do word processing by hand in a format much more convenient and familiar to us. We no longer have to sit there at the mercy of our word processing application, hoping that it interprets what we meant correctly and then fiddling with it until it does. (more…)

Made In The Shade With Bower

Photo of wisteria Photo by Annie Spratt on Unsplash

The best laid plans…

It started out so simple. The thing you originally designed was just some simple HTML, a bit of CSS, and just enough jQuery to talk to your server back-end and update the DOM. What you ended up maintaining, however, has mutated into a sprawling giant with a "front-end framework" (Bootstrap or Foundation), dynamic CSS (like less or sass), jQuery and fifty-three plugins for it, some utility libraries (a la underscore), templating libraries (maybe mustache or handlebars), etc. ad nauseum.

"My back-end doesn’t look like this," you think. "It’s all nicely organized, and
easy to keep straight. But my front-end is a mess! Where did I go wrong?"

Silly rabbit, you didn’t use Bower. (more…)