Improve email workflow for Jira projects

If you work on lots of projects in Jira, you know that the flood of emails is inevitable. Every bug report, status change, comment, reassignment, and version release gets sent to your inbox, even if it is something you did yourself!

Here are a few ways to stem the tide:

Turn off emails from your changes.

This is a given. You don't need email confirmation that you marked the ticket as resolved. You know you did that. Log into Jira and click the pencil on your profile next to "Preferences"

You can already see there is an option called "Own Changes" and you can change it to "Do not notify me".

Email filters 

This example is for Gmail users, but the same concept can be applied to Outlook if you know how to build mail rules.

There are three rules I use:

a) subject:([JIRA]) [Apply label]
b) from:(jira@b*******s.com "Ian Moffitt") [Skip inbox, mark as read, never mark as important]
c) from:(jira@b*******s.com -"Ian Moffitt") subject:(-"Commented") [Skip inbox, mark as important]

Rule b prevents any Jira emails from entering my Inbox. I follow the practice of "Inbox Zero" which sets the concept that your inbox is only for emails that are waiting for action or acknowledgement from you, and haven't been sorted.

Rule c, however, supercedes rule b if the Jira email is a comment on an existing bug, so that I can actively engage in conversation around a defect.



These two practices, when combined, basically make Jira emails vanish from your inbox unless someone comments on a bug. It's a nice way to improve workflow without being drowned by a tide of emails.

Lazy load jQuery plugins when you need them

One big problem I notice with big huge projects is that your lists of CSS and JavaScript includes sometimes become several lines long, and often can be included on every single page if you are integrating into a CMS.

There are several methods of including plugins only when you need them. I'll touch briefly on two and demonstrate a third that I found and modified.

Require.js
Require.js is a module loader that will include the files you specify and then run a block of code after they are done loading. It's more geared towards making web applications than websites, and can be compared to #include statements in C or C++. The idea behind it is to reduce HTTP calls to dependencies and build more optimized code.



Yepnope
Yepnope is a module loader that is conditional. You test for things like Modernizr tests, which check for web browser features, and you can also prefix things with ie! to make them only load in IE browsers.



Now I will demonstrate the use of a loader plugin for jQuery that I made a small modification to.

Lazy.js
Lazy is a jQuery plugin that will only load jQuery plugins if they are executed.

However, the plugin in its original form would load other plugins once they were used, regardless if the jQuery selector was actually being used. The modification I made only loaded the plugin if there was at least one or more elements being returned by the jQuery selector.

The benefit of this is that you can have a single script.js file with multiple jQuery plugins being used at once, and the only ones that will load are the ones that are being executed, and only the ones that actually affect elements on the page.

[NOT COMPLETE]

http://requirejs.org
http://net.tutsplus.com/tutorials/javascript-ajax/easy-script-loading-with-yepnope-js/
http://unwrongest.com/projects/lazy/

brief intro to git, socket.io, node.js and cloud9

The intent of this post is simply to explain the basics of Socket.IO, but with just a simple JavaScript background, there may be a few hurdles to jump over first, so this will be more of a "hand-holding" exercise.

Cloud9

Cloud9, simply put, is a web-based IDE for JavaScript. Go over there. Sign up. It's free, don't worry. Also, if you want to get super adventurous, Cloud9 is open source and available over on GitHub. I'm not going to install it on my own, but just know that's a possibility. Now, create a new project. Name it anything. Just make sure you make it a Git project. Now, once that's done, let's jump in and start editing! But, I don't want to bore you with the drawn out stuff... so, why not just copy the code I already have?

Git

Git is another version control system. I like Git. It is a bit difficult to grasp at first, but it feels "right". Instead of having copies of files for branches and tags, like SVN does, Git has it's own nice little thing it does. Everything is just the branch you're working on. In my opinion, at least, this leads one to adopt a process of locally branching files. Branches everywhere. Anyway, we're going to pull the current codebase from Git. So click in the console window down at the bottom of your Cloud9 project and grab it. Use the following commands to do so:

git remote add origin https://github.com/tyllyn/js-notifications.git

git pull origin master

I don't believe Cloud9 refreshes the files automatically (at least it didn't while writing this up), so refresh the page! Bam! You have files there! What exactly did we do, though. Well, the first command sets up "origin" as a remote repository - the one I have set up over on GitHub with the code we're working with. The next statement pulled the "master" branch from "origin" into our local copy. "Master" is the main branch in Git, pretty much how "trunk" is the main branch in SVN. There's a lot more to Git, but this isn't an exercise on the specifics of it. You can always learn more on the Git website.

node.js

I have a simple web-server set up in that repo, so let's add a new run configuration, just like this:

And click run. Your console at the bottom will now show a URL. Click this. And look, it's that file we're hosting!

socket.io

socket.io eases the communication between a server and a client. We're going to use this in one its most simplest forms - for a chat server. As you set up your run configuration for the web-server, set one up for the "svr-socket-io.js" file. And run it. Whoa, you might have got an error about how socket.io broke into your house and stole your wife (I'm not a great reader, but I'm assuming that's what it says). This is because socket.io is not installed just yet. Trying typing these into the console, if so:

npm install socket.io

npm install socket.io-client

Anyway, I'll leave the rest of the debugging up to you. Enjoy your simple chat server, now. :)

wiggleIt

You can find a few example implemtations of it below. Each one opens in a new window. As I improve upon it I'll be posting updates.

• Horizontal example implementation of Wiggle It


• Vertical example implementation of Wiggle It


• Square example implementation of Wiggle It


• Download It (zip file containing compressed and uncompressed versions of the script with an example)

In it's simplest implementation, you can just call it out without any params.

$('.wiggleIt').wiggleIt();

The default param values are as follows:

$('.wiggleIt').wiggleIt({

'imageWidth' : 200,

'imageHeight' : 200,

'divisions' : 8,

'direction' : 'vertical',

'speed' : 250
});

If you set the direction parameter to vertical or square, the divisions parameter will be the number of vertical slices comprising the width of the image. If you set the direction to horizontal the divisions will be the number of horizontal slices comprising the height of the image. The minimal CSS involved is included within the HTML files. Obviously, the higher the number of divisions you specify the greater the demands on the browser. It works everywhere, even IE8.

CSS 3 . . no, wait . . 4

CSS34

I know what you're thinking. "What!? We barely started using 3! I don't even have all those snazzy transitions in my geocities blog."

Easy now, buster. The CSS4 Public Draft was last created by the W3C on the 29th of September, 2011, barely three months prior to this blog post. We probably won't see this cool stuff in action for a number of years. In fact, CSS 3 is still going through some working process, so it isn't even completely done.

But let's go on a magical adventure into what may be.

In CSS3 we got a lot more in terms of selector power. Attributes being part of the selector means that you can target every anchor tag that opens a new window by applying styles to:

a[target='_blank'] { }

 (Fun fact, you can chain attribute selectors! input[type='radio'][name='awesome'] !! How cool is that? You can also negate them using not())

We also got some pseudo classes, which are basically afterthoughts to your selector. "I want a link, but only if it's being hovered over, or only if I visited it.)

a:hover { }

 In CSS4, we start getting some more powerful pseudo classes. Here are some examples, though they may change as the draft is exactly that, a draft, and they change very often.

Location based selectors (going somewhere?)

:any-link
Information is limited on this selector but I gather it is meant to target elements that are made into links, like if you surround a div or image in an anchor tag. It might also mean an element other than "a" which has an href attribute.

:local-link
This pseudo selector matches any link which links to another page within the matching absolute URI.
For example, if you are on http://www.barkleyrei.com/ on a sub page, any link with barkleyrei.com in it will match the pseudo selector. It strips out fragments, but otherwise the entire absolute URI is used in the match.

:target
This pseudo selector will match any link that targets a fragment.

<a href="example.com#manual">See the manual</a>

:scope
There is limited information on this selector, but the jist is that this will match links within a certain reference, which defaults to :root and is set by a function called querySelector(), which is expected to be part of the CSS 4 selectors but there doesn't appear to be any information about it yet.

Time-dimensional pseudo classes (aka time travel)


:current
This selector has a fantastic use related to screen reading. In the example below:

:current(p, li, dt, dd) { background: yellow; }

The selected items would be highlighted yellow when their content was being read. It seems like while the verbiage is time-based, it can also mean context as well.

:past and :future
These two selectors relate to :current and refer, respectively, to elements before and after it.

I could see adding on to the above example by fading out :past and :future elements so that they do not distract a reader from the :current element being read/displayed.

Linguistic pseudo classes (que?)

:dir()
This matches items whose content is meant to be read in a specific direct, for example if it were in a language read from left to right

:lang(C)
This selector matches elements that are in language C. It differs in functionality than the selector '|=' (which checks if the attribute is a hypen seperated list of values starting with your match) because |= will only match the specified elements exactly, while :lang will reference the document's actual encoding information.


It's just a small look into what may come, and it's exciting to think about what we can affect with these selectors (and how they will translate into jQuery scripts)

CSS available in IE8 and above

Generated content (:before, :after)

• Cleaner markup


• Easier changes


• Supports images, counters, and strings

Demo

Display inline-block

• Vertical align columns


• No clearing floats

Demo

Display Table

• vertically align multiple lines of text


• equal height columns that expand to content

Demo

Dart!

In October, Google released a new open source programming language for the web, Dart. It's meant to offer better performance, managability, & scalability over javascript for large web apps (think GMail or Google Docs).

- Dart allows for classes, interfaces, and looks familiar to anyone with experience in java, C#, or other object oriented languages.

- It can run in a VM, or be compiled as a javascript that will run in "modern browsers" (so far, Chrome, Safari 5+, and Firefox 4+).

- Has it's own IDE, Dart Editor (similar to Eclipse). Code completion, pointers to open declarations, class, method, and field outlining (see the Dart Editor Tutorial for screenshots).

I compiled some sample apps to give an idea of what it can do with HTML5 canvas:

Clock

Spirodraw

Sunflower

Here's what the sunflower class looks like.

While still in its infancy, looks like we'll be able to do some fun stuff with Dart and HTML5.