So I did what any self respecting coder does and googled “Adding swipe support to Bootstrap Carousel”, not because I am lazy (well maybe just a bit), but because I prefer not to reinvent the wheel. This got me some results, but ultimately nothing that was currently functional.

Here is the solution. It’s actually very simple and it’s not at all limited to the boostrap carousel plugin, using another slider? No problem, this solution will work just as well on it.

The how to part:

First and foremost we need to support touch events and there is already a solid library for that jQuery Mobile. What we don’t need though is all of the weight that jQuery mobile has with all of the forms widgets and other items.

Here is a minified version of the core components that are needed to support basic touch events:

/*! jQuery Mobile v1.2.0 jquerymobile.com | jquery.org/license */
(function(a,b,c){typeof define=="function"&&define.amd?define(["jquery"],function(d){return c(d,a,b),d.mobile}):c(a.jQuery,a,b)})(this,document,function(a,b,c,d){(function(a,b){var d={touch:"ontouchend"in c};a.mobile=a.mobile||{},a.mobile.support=a.mobile.support||{},a.extend(a.support,d),a.extend(a.mobile.support,d)})(a),function(a,b,c,d){function x(a){while(a&&typeof a.originalEvent!="undefined")a=a.originalEvent;return a}function y(b,c){var e=b.type,f,g,i,k,l,m,n,o,p;b=a.Event(b),b.type=c,f=b.originalEvent,g=a.event.props,e.search(/^(mouse|click)/)>-1&&(g=j);if(f)for(n=g.length,k;n;)k=g[--n],b[k]=f[k];e.search(/mouse(down|up)|click/)>-1&&!b.which&&(b.which=1);if(e.search(/^touch/)!==-1){i=x(f),e=i.touches,l=i.changedTouches,m=e&&e.length?e[0]:l&&l.length?l[0]:d;if(m)for(o=0,p=h.length;oe||Math.abs(c.pageY-n)>e,o&&!d&&H("vmousecancel",b,f),H("vmousemove",b,f),F()}function M(a){if(r)return;C();var b=z(a.target),c;H("vmouseup",a,b);if(!o){var d=H("vclick",a,b);d&&d.isDefaultPrevented()&&(c=x(a).changedTouches[0],p.push({touchID:v,x:c.clientX,y:c.clientY}),q=!0)}H("vmouseout",a,b),o=!1,F()}function N(b){var c=a.data(b,e),d;if(c)for(d in c)if(c[d])return!0;return!1}function O(){}function P(b){var c=b.substr(1);return{setup:function(d,f){N(this)||a.data(this,e,{});var g=a.data(this,e);g[b]=!0,k[b]=(k[b]||0)+1,k[b]===1&&t.bind(c,I),a(this).bind(c,O),s&&(k.touchstart=(k.touchstart||0)+1,k.touchstart===1&&t.bind("touchstart",J).bind("touchend",M).bind("touchmove",L).bind("scroll",K))},teardown:function(d,f){--k[b],k[b]||t.unbind(c,I),s&&(--k.touchstart,k.touchstart||t.unbind("touchstart",J).unbind("touchmove",L).unbind("touchend",M).unbind("scroll",K));var g=a(this),h=a.data(this,e);h&&(h[b]=!1),g.unbind(c,O),N(this)||g.removeData(e)}}}var e="virtualMouseBindings",f="virtualTouchID",g="vmouseover vmousedown vmousemove vmouseup vclick vmouseout vmousecancel".split(" "),h="clientX clientY pageX pageY screenX screenY".split(" "),i=a.event.mouseHooks?a.event.mouseHooks.props:[],j=a.event.props.concat(i),k={},l=0,m=0,n=0,o=!1,p=[],q=!1,r=!1,s="addEventListener"in c,t=a(c),u=1,v=0,w;a.vmouse={moveDistanceThreshold:10,clickDistanceThreshold:10,resetTimerDuration:1500};for(var Q=0;Qa.event.special.swipe.scrollSupressionThreshold&&b.preventDefault()}var e=b.originalEvent.touches?b.originalEvent.touches[0]:b,f={time:(new Date).getTime(),coords:[e.pageX,e.pageY],origin:a(b.target)},g;c.bind(i,j).one(h,function(b){c.unbind(i,j),f&&g&&g.time-f.timea.event.special.swipe.horizontalDistanceThreshold&&Math.abs(f.coords[1]-g.coords[1])g.coords[0]?"swipeleft":"swiperight"),f=g=d})})}},a.each({scrollstop:"scrollstart",taphold:"tap",swipeleft:"swipe",swiperight:"swipe"},function(b,c){a.event.special[b]={setup:function(){a(this).bind(c,a.noop)}}})}(a,this)})

Or build you own custom version here (just select the touch event and it will include everything you need)

Take this and include it in your site script, or simply create a new script and add it into the document.

<script src=”jquery.mobile.custom.min.js”></script>

Now that we have touch support we simply need to hook that up to our image slider. That my friends is a pretty simple task:

<script>
$(document).ready(function() {
   $("#myCarousel").swiperight(function() {
      $("#myCarousel").carousel('prev');
    });
   $("#myCarousel").swipeleft(function() {
      $("#myCarousel").carousel('next');
   });
});
</script>

Taking a quick look at the code above, we’re attaching the jQuery mobile swipe right/left events to the carousel next and previous options. If you’re using another slider, simply hook to their next/previous handlers.

I’ve placed a demo online here for review.

Happy Coding.

The post How To: Adding swipe support to Bootstrap’s Carousel appeared first on Laz Creative.

If you’re like me, you think to yourself:

Awesome, I can write good content!   …  What is good content anyway?

With that question in mind, you head to Google. “What is good content,” you ask. What you get back is a cacophony of ideas. Most often I see:

• Get your title right.
• Pepper your keywords into your post.
• Write lists. People love lists.
• Make your post scannable.
• Continue the conversation.
• Make a call to action.

I’m not telling you anything that you don’t already know here; you’ve seen it all.  After all, you probably found this post because you Googled “what makes good content?” The problem with all of those bulleted items is that they are junk. It’s all internet noise.  This is not to say there aren’t good articles, lists and the like that fit those criteria. However, when everyone follows the same “this is good” formula, you end up with the unfortunate scenario where the gem is hard to distinguish from the junk — which begs the question: What is good content, honestly good content?

In my opinion, defining good content in a practical manner is pretty straightforward: Provide the content consumer with new and useful information. This can be a point of view about an existing subject matter or something that forays into entirely new territory. The content itself, however, should be created by you and help the reader solve some sort of problem, or provide a useful insight. The short definition of good content: Give the end user something useful. Herein lies the real challenge.

Everyone has a different point of view which is informed by a unique, fingerprint-like frame of reference.   These differences, wonderful and terrible, are what make the world go round.  However, with a full spectrum of inherent differences of opinion and definitions of what is considered useful, the content creator may, understandably, tremble a bit before clicking “publish.” 

While it is impossible to land on useful 100% of the time, there IS a synergy in what we find to be useless, regardless of individual opinion or point of view. Keyword stuffed articles, the same top ten lists we’ve seen on hundreds of other sites that shows up on yours — the list goes on. Noise, the natural enemy of good communication, is unfortunately abundant on the Web. If you find yourself contributing to the noise, it is fair to assume people will generally find your information useless.

Do not despair.

Here are a few rules that should apply to writing good content:

1. Stop writing for SEO (Search Engine Optimization). Seriously just stop it.

   Understand that SEO is a side effect of good content. Good content gets shared. Good content gets backlinks. Good content enjoys discussion. Why? Because, by its nature, good content is interesting and people share and talk about things they find interesting. How many times have you looked for something on the Web only to stumble onto drivel of awkwardly worded sentences in order that the author could meet some sort of keyword goal? It’s frustrating, it’s almost always useless and, as search engine algorithms continue to improve, it will be buried. According to Google’s Matt Cutts:

   “Good content trumps SEO.”

   If you don’t believe me, you should believe the head of Google’s webspam team. If you don’t believe him, then you may want to peruse the details of Google Panda and more recent Penguin update, a change to Google’s search results ranking algorithm. The new reality, and what has always been the truth, is good content is SEO.

2. Don’t write the same opinion piece that’s been published half a million times before unless you have something new and insightful and useful to add to the discussion. Anything else is just noise.
3. Keep it brief. If you’re writing a ten thousand word dissertation on why the Internet Explorer is the mark of the beast, your content consumers are going to get tired and leave. Every Web standards compliance-minded developer already knows IE is the devil. Get to your point so that we can comment on how much we agree (can anyone disagree?) with your assessment.
4. Grammar doesn’t matter. Ok, well maybe a little bit. If you’re writing a blog on the English language, then worry about MLA. For everyone else though, most of your readers aren’t going to care that you missed an oxford comma. You should go back and proof your work to make sure your idea comes across in a clear and concise manner, but don’t obsess over grammar. As Seth Godin has said:
   

   “Just say it”.

There are many more items that play into authoring quality content on the Web, but continuing would violate rule #3 … Plus we want to save room for Part 2.

What do you think makes good content? Be sure to weigh in below.

The post What is good content anyway? appeared first on Laz Creative.

Now, I’m not going to take part in disparaging one of the world’s finest chairs that once, very comfortably, supported the hindquarters of yours truly. What I will say is that by using this line of reasoning we should be in business long after Justin Beiber has 20 grandchildren (okay, bad example). It’s true, fancy pants we ain’t. Think of us as Billy Beane’s 2002 Oakland Athletics competing in an industry that has been conditioned to expect the “Yankee fineness.”

Allow me to paraphrase for those who aren’t sports fanatics and/or haven’t seen the movie Moneyball:

“There are rich agencies and there are poor agencies, then there’s fifty feet of crap, and then there’s us.”

We do not come from money. We do not have investors. Shiny offices with glass plated conference rooms? Yet to be built. Aeron Chairs? Nada. What little we have we are proud to say we own, and have earned by the sweat of our rapidly mouse clicking index fingers. The “soda money,” my friends, is “on the field.”

Now don’t get me wrong – we like nice things and would like to take our clients on long, leisurely tours of our immaculate facilities. We would like them to see their beautiful reflections in our stainless steel conference room table as they sit comfortably in a fleet of (that’s right) Herman Miller Aeron chairs. These things would be nice – a wonderful expression of our exceptional talent and capabilities. But if prematurely, at what expense?

The lesson behind the Aeron chair theory? Perhaps we are all too eager to portray financial success long before we have learned to properly respect a dollar? We are caught up in seeming, rather than being. We expect success without sacrifice.

Call me old-fashioned, but I believe we owe our clients a greater level of stability. After all, we would like to think they will continue to remain in business for many years to come, able to pay our invoices by making prudent financial decisions. Would we not be nervous if they were feverishly spending money they didn’t have as though they were trying to keep up with the United States federal government? Where do we expect this “keeping up with the Joneses” will lead?

In the cogent words of Lane Pryce, “Pennies make pounds and pounds make profits.” As long as this holds true, we will keep a careful watch over our pocketbooks. Not because we are greedy and want David Justice to suffer the indignity of purchasing his own soda, but because our talent will best serve our clients by staying in business. For now that means keeping the soda money on the field while our butts dream of Aeron chairs. Pardon the crude mixed metaphor.

Do you have an alternate point of view or an “Amen?” Please share your thoughts with us. We’d love to hear from you.

The post Keeping The Soda Money On The Field appeared first on Laz Creative.

From the makers of Coraline, a unique 3D feature animation “creeps” into theaters on August 17th. Along with the social buzz on Facebook, Twitter, YouTube, and Instagram you may have seen ads for Paranorman while watching the London Olympic games. The following spot was cleverly placed in the women’s gymnastics team final, and I will admit it produced a chuckle. Most noteworthy, to date Paranorman is the biggest stop motion movie ever made.

For those of you who appreciate the painstaking retro techniques of the artistic craft, specifically stop motion animation, you will appreciate the genius, if not insanity, of the masochistic effort undertaken by the Portland based animation studio LAIKA.

The specific technique used to generate the unique look of Paranorman is referred to as replacement animation where each new character sequence is created by removing and replacing a facial component or mask on the character puppet – sort of like the world’s most elaborate Mr. Potato Head. To generate just one second of feature animation required approximately 24 mask replacements. Each mask was individually made by utilizing 3D Systems ZPrinter® 650, a full color 3D printer that overlays many tiny layers of powder until you have a three dimensional object. The face is then dipped into a super glue to seal and strengthen the mask.

The creation of the the feature’s puppets were no slouching effort either:

To give you a better feel for the painful scope of this project, let’s look at a few numbers:

• 66,400 rare earth magnets
• 31,000 – The ballpark number of individual face parts printed for the production
• 25,000 purple gloves
• 9,000 – The number of different faces it took to animate Norman
• 8,000 – the number of pounds of printing powder required to make the components for the feature
• 5,000 exacto blades
• 729 sheets of sandpaper
• 427 human years
• 300 puppets
• 77 – The number of gallons of super glue required
• 50 stages
• 2 gallons of white resin
• 1 massive warehouse

Photo Credit: LAIKA.

The post You Don’t Become a Hero by Being Normal, or a LAIKA Feature Length Animated Film For That Matter appeared first on Laz Creative.

“So, you design blog interfaces for some of the worlds largest corporations but you don’t have your own blog?”

The sheer embarrassment of our trademark answer “The shoemaker’s children go barefoot” became too much. So here we are. We have a blog. So much to say, so little time.

Or is it:

We’ll let you be the judges. But please, be gentle. We bruise easily.

Photo Credit: Despair, Inc.

The post Hello, World? appeared first on Laz Creative.