Blog

How I tricked myself into being productive

It was Friday night, I just wanted to relax, but I have a 11 day streak going on Github. I think to myself, it doesn’t matter, I can take a day off.

I look at the bugs/feature requests I logged in github for Shatter.js, and realize, well, upgrading Phaser won’t take too long, and at least I’ll have done something productive on it today.

So there I am, upgrading the code and fixing the example. Something I’ve needed to do for awhile, and I got it done when otherwise I was going to settle down with a glass of whiskey and let my brain have the night off. I successfully tricked myself into being productive.

Sometimes just getting started is all I need to get motivated. I know once I get started on something that I’ll work longer than I intend to and I’ll enjoy it. The hard part is just getting started.

The procrastination beast has it’s hold on me all the time, keeping me from starting anything. I think it will take too much time, or I find a million other little things to do with my time and all of the sudden it’s way too late to make any progress on my project, so I’ll do it tomorrow. In fact, tomorrow I’ll work twice as long! Yeah, that’ll happen for sure!

I don’t know what my apprehension to get started is. I feel like my brain knows it’s not going to get instant gratification so it tells me I need to read a couple more articles, or browse for more things I can add to my read-later or do-later list. I often look at all the things I want to do and get overwhelmed, and do nothing at all.

Since I started trying to keep up a streak on Github, I find myself working a lot more, and a lot more consistently.

I think to myself, well, let me just get one or two commits out of the way so I can relax the rest of the night. Maybe tonight I’ll just update some documentation, I’ve been needing to do that for awhile. I start to update docs, and next thing I notice a couple hours have passed and I’ve re-factored code and added some functions that I’ve been meaning to add for weeks.

I fool myself. I know once I get started I’ll enjoy what I’m doing, but it never fails, every time I think about getting started there is this apprehension, something holding me back. But I’ve almost never come out of it afterwards unhappy that I did it.

Occasionally I’ll have some really unproductive coding sessions. Maybe I only end up updating some documentation, but at least I showed up. The more often I manage to show up the more often I’m likely to show up again.

After a few weeks I realize I’ve almost completed this project. It’s not nearly so enormous and insurmountable when I tell myself I’ll just make a few commits a day. What’s really perplexing is that I know this already. I know iterative progress is how to get things done. I’ve known all these tricks to get yourself started. Like the 5 minute rule. Tell yourself you’ll do something for 5 minutes and you end up going a lot longer once you get started. I’ve read tons of ‘productivity hack’ articles and books. But the problem comes when I know that I likely will go longer that 5 minutes, and decide to put off the 5 minutes b/c of it. It’s like double procrastination. My procrastinating brain to too clever for these parlor tricks. I know you can’t expect to build something of high quality quickly, yet I still expect to be able to pump out a bunch of great projects, but at the end of the day/week/month/year, I realize, I barely did shit. I was too overwhelmed with the scale of the projects I want to complete, and the amount of knowledge I need to learn to get there.

I’ll just take things one commit at a time.

 

What I found interesting this week (May 11th, 2014)

Interesting things I read/watched/listened to on the web this week.

Everything is about execution. Dreams and visions are free. Implementation takes place in the real world where friction and inefficiencies exist.

A great answer on quora on life lessons.

While playing guitar I remembered an old site I learned quite a bit from: blackbeltguitar.com. Unfortunately it’s no longer around anymore. However, it’s still available on archive.og.

Found devdocs.io – A great well organized and easy to navigate reference guide for web api’s. Much easier to find and browse information than most of the official specs.

Watched this very funny animated short: Johnny Express

Feast your eyes on a live hd view of the Earth from the ISS.

Scripting visual effects for video with BASH, FFMPEG, Script-FU & GIMP filters

Recently I’ve been working on an animated music video for Mammoth Life. The concept involves creating a wax-crayon hand drawn look while mixing live action video with 2d animation. For the live action footage I needed to find a way to process it to make it appear as if it were hand drawn with crayons. Using a combination of FFMPEG and GIMP and some BASH scripting I’ve been able to come up with a pretty solid effects pipeline. I’ll take you through my process so you can process your video’s through GIMP too.

You may need at least a little familiarity with the command line, FFMPEG and GIMP scripting to follow along.

First, I’ll cut the video down to a decent length for this demo. I’ll be using the public domain cinematic masterpiece known as ‘Santa Clause Conquers The Martians’, available here:

https://archive.org/details/santa_claus_conquers_the_martians_ipod

I’ve chosen to extract a particularly tense moment in the movie from 1:09:48 – 1:10:22. We can do that with FFMPEG like so:

ffmpeg -ss 01:09:53 -t 00:00:29 -i santa_claus_conquers_the_martians.mp4 -vcodec copy -acodec copy santa_hostage.mp4

What we’re doing here is saying starting at 1:09:48, we take 29 seconds and copy to the new file ‘santa_hostage.mp4’ without reencoding.

Next, we’ll pull out a frame from the video so we can figure out what filters we need to run on the video frames to get the effect we want. I want one frame from 2 seconds after the start of the video and my source video is 640×480, so we do something like this:

ffmpeg -ss 2 -i santa_hostage.mp4 -t 1 -s 640x480 -f image2 single.jpg
Screenshot of movie
Images of Martians, direct from the Mars Curiosity Rover

I’ve already got a workflow for the crayon effect, so I want to try a new one with this video. There’s a cool effect in G’MIC (available as a plug-in for GIMP here: http://gmic.sourceforge.net/) called ‘Graphic novel’. Applying it straight to the image gives us a cool effect, but it looks a little rough due to the blockiness of the video. To remedy this I applied a 6px Gaussian blur first before applying the G’MIC effect. I think it improved it enough for our purposes.

Before and After
Half of a Martian shirt. Before and after ironing.

We could go crazy and layer other textures on or run it through more filters, but I like this as it is, so let’s get to scripting.

Processed Image
Martians – The Graphic Novel

Before we start let’s define exactly what we want to do:

  1. Extract all the frames out of the video
  2. Apply a Gaussian blur of 6 pixels followed by the Graphic novel preset on the G’MIC plug-in.
  3. Compile all the frames back into a video
  4. Add audio from original video back into new video

I’m going to start small by only extracting a few frames to start and only take 6 frames per a second so I can also achieve a choppy/jerky effect. Once the GIMP script is finished we’ll be able to go back and process the whole video.

ffmpeg -i santa_hostage.mp4 -r 6 -t 1 -s 640x480 image%3d.png

The -r 6 indicates we only want 6 frames per second and image%3d.png means the images will be spit out numbered from 001 – 006.

Now we’re ready to write a script to apply the effects, but first we need to know how to call the effects in the script. We can use the Procedure Browser ( Help->Procedure Browser ) and the Script-FU console (Filters->Script-Fu->Console) to manually enter them to make sure we get all the parameters correct.

After beginning to type in Gaussian we see all the different Gaussian blur plugins/options, plug-in-gauss-rle2 is the one I’ll use. On the right all the parameters are listed that we need in order to run the plug-in.

Program Parameters

As you’ll see in the console, GIMP uses TinyScheme, so we can run the Gaussian blur plug-in on our image like this:

(plug-in-gauss-rle2 1 9 (car (gimp-image-get-active-layer 9)) 6 6)

The first parameter is 1 for RUN-NONINTERACTIVE, which means to run without presenting the plug-in’s dialog box. The second parameter (9) is the image. We only need this number when we’re testing in the console. It’s displayed in the title bar.

Title Bar shows Image ID
Title bar showing the image ID

The third parameter is for the drawable. We’ll grab the active layer for that. (gimp-image-get-active-layer 9) returns the active layer on the image, but it returns it as a list, so we use (car ) to return the first (and only) item in the list.

The last two parameters are the horizontal and vertical radius (in pixels) of the Gaussian blur.

If you run that through the Script-FU console you’ll see the image get blurred. Success! Next, we just need to determine the command for the G’MIC plugin.

G’MIC is not just a GIMP plugin, it’s a full featured framework that can be used for many image processing tasks. In the procedure browser plug-in-gmic takes the image, drawable, a layers mode, and a command to run on the image with G’MIC.

I have no idea what command the graphic novel preset runs, but after a little research it turns out it’s really easy to get the command by running gimp directly from the console. As described here, if we run gimp from the console and turn on verbose output in the plugin we’ll get our command.

./apply/ -v -99 -gimp_graphic_novelfxl 0,26.6667,9.74641,11.634,20,0,0.62,14,0,1,0.5,0.78,1.92,0,0,0,1,1,1,0.5,0.8,1.28

So our final command in the console is this:

(plug-in-gmic 1 9 (car (gimp-image-get-active-layer 9)) 1 "-gimp_graphic_novelfxl 0,26.6667,9.74641,11.634,20,0,0.62,14,0,1,0.5,0.78,1.92,0,0,0,1,1,1,0.5,0.8,1.28")

Running that command in the Script-Fu console works, so now we just need to throw both these commands into a GIMP batch script. Let’s copy some boilerplate code from from the tutorial at gimp.org. You can see below, I’ve grabbed the last script on the page and modified it to run the two commands we need to get the effect we want.

(define (batch-graphic-novelfy blurnum)
  (let* ((filelist (cadr (file-glob pattern 1))))
    (while (not (null? filelist))
      (let* ((filename (car filelist))
        (image (car (gimp-file-load RUN-NONINTERACTIVE
                                    filename filename)))
        (drawable (car (gimp-image-get-active-layer image))))
        (plug-in-gauss-rle2 RUN-NONINTERACTIVE image 
                            drawable blurnum blurnum)
        (plug-in-gmic RUN-NONINTERACTIVE image drawable 1 
          "-gimp_graphic_novelfxl 0,26.6667,9.74641,11.634,20,0,0.62,14,0,1,0.5,0.78,1.92,0,0,0,1,1,1,0.5,0.8,1.28")
        (gimp-file-save RUN-NONINTERACTIVE
                        image drawable filename filename)
        (gimp-image-delete image))
      (set! filelist (cdr filelist)))))

I named the script ‘batch-graphic-novelfy’ and added the two commands we want it to run. You can place as many commands as you need to produce the effect you want. You can run multiple filters, add layers, tweak layers, anything available in the procedure browser can be placed here.

As noted on the tutorial site this script uses the file-glob plug-in so we can pass in all our images. I’ve also changed the parameters for the image and drawable to the variables provided and added ‘blurnum’, so we can specify the number of pixels to blur on the command line in case we want to tweak it later.

Now we test it. The script needs to be moved into the scripts directory, I put mine in ~/.gimp-2.8/scripts. I like to keep them in a separate dir so I can version and edit it easier, so I actually place a symlink to the script in there.

Let’s do this!

Alright, we’re ready to go. Run this command and let’s see the magic happen!

gimp -i -b '(batch-graphic-novelfy "*.png" 6)' -b '(gimp-quit 0)'

Annnnnnnd, wait. What?

batch command experienced an execution error:
Error: ( : 1) eval: unbound variable: pattern

Oops. I axed the pattern parameter out of the first line of the script. It should be:

(define (batch-graphic-novelfy pattern blurnum)

Let’s try this again.

Animated Martians
Take me to your leader!
You can throw together a quick gif with something like this:
convert -delay 1x8 *.png -coalesce -layers OptimizeTransparency animated.gif

Now we can put this all together in a bash script.

# graphic_novelfy.sh
# Extract frames from video
ffmpeg -i $1 -r 6 -s 640x480 image%5d.png
# Run frames through gimp filters
gimp -i -b '(batch-graphic-novelfy "*.png" 6)' -b '(gimp-quit 0)'
# Create video with processed frames
ffmpeg -r 6 -i image%5d.png -vcodec qtrle -r 29.97 -pix_fmt rgb24 ${1}-novel.mov
# Clean up
rm image*.png
# Add audio in from original video
ffmpeg -i $1 -i ${1}-novel.mov -vcodec copy -acodec copy -map 1:0 -map 0:1 -shortest ${1}.final.mov

BAM! We’re done.

Run the script by passing in the video file you want to process and it spits out your processed video. If you’re not to familiar with bash scripting the first parameter is accessed in the script as $1 or ${1} if you need to separate it from an adjacent string.

The only new command in the script is the ffmpeg command to combine the audio from the original file with the new video. The -map parameter tells ffmpeg which streams we want to take from the two input files. To find the correct streams just pass all your input files into ffmpeg without any further arguments like so: ffmpeg -i video1 -i video2

Done

Simply running a gaussian blur and one filter is just barely touching the surface of what we could do to a video.

The downside is that the video will have to be processed before editing, and running each frame through gimp will take some time. If you’re running 24 or 30 fps video through gimp you’ll want to test your effects on small clips before taking the time to run it through anything large.

The upside is the sheer amount of possibilities this opens up for video effects. Anything you can automate in gimp to manipulate an image can be used on a video.

See the final clip below.

Ludum Dare 28 – Make a game in 48 hours

Ludum Dare is an event where people all around the world attempt to make a game in 48 hours, based on a theme voted on and announced at the start of the competition. There are no prizes, it’s more of a challenge to generate ideas and get people to make games.

I’ve wanted to participate in Ludum Dare for a couple years now and it just happened to fall on a completely free weekend for me this time, so I made my first HTML5 game.

Well, I consider it a prototype at this point. I used an HTML5 framework called Phaser, which I’ve had my eye on for awhile but haven’t worked with before. I spent a ton of time learning the framework through the excellent documentation and examples on the Phaser website.

I feel it was a success as now I have a working game prototype, instead of just a vague idea in my head. There is plenty of work to do but I feel it was definitely a worthwhile way to blow a weekend.

Check out my entry on the Ludum Dare website here:

http://www.ludumdare.com/compo/ludum-dare-28/?action=preview&uid=15070

 

P.S. – I’m running off about 10 hours of sleep over the weekend, please excuse the rambling nature of this post.

Refactoring Incremental Reader, or How to highlight text across nodes in the DOM

The last few days, I’ve been able to carve out some time to get back to working on Incremental Reader. My short term goal is to get a more sane structure so I can go back and add unit tests. I was recently exposed to Test Driven Development through a Coursera class “Introduction to Systematic Program Design“, and I’m pretty excited to figure out how to work this into my development process.

Highlighting text! As easy as 1,2…

The last feature I implemented was the right-click context menu to highlight selected text in the current browser tab. Correctly inserting tags to create the highlighted text was a huge pain, mainly because I want notes(highlighted text) to span multiple DOM elements and split anywhere (including the middle of an element). It’s been a bit since I’ve worked on the extension, so I thought I’d walk through the code to refresh my memory on how I implemented this feature.

First to get the selected text:

var highlightRange = window.getSelection().getRangeAt(0);

This returns a Range object, which can contain full nodes and parts of text nodes. The range object has a startContainer and an endContainer property which indicates the node at the start and end of the range. When these are equal, our range doesn’t cross through other nodes, making our job easy. All we have to do is split the node at the start and end offsets, and wrap the new node with with any tag containing a background(highlight) color.

var startContainer = highlightRange.startContainer;
var endContainer = highlightRange.endContainer;
var newNode = document.createElement('mark');
newNode.style.backgroundColor = "yellow";

if (startContainer == endContainer) {
    var splitNode = startContainer.splitText(highlightRange.startOffset);
    var temp = splitNode.splitText(highlightRange.endOffset);
    var insertElement = startContainer.parentNode.insertBefore(newNode, splitNode);
    insertElement.appendChild(splitNode);
} else {

First, we get the nodes where the range starts and ends. The .startOffset property of the range object contains the offset from the start of the node where the highlight began. .splitText() breaks a node at a given offset and returns the portion after the offset as a new node. The .endOffset is actually still remains correct (it’s updated on splitText), so we don’t have to worry about recalculating that value, we simply call it again to split the node at the end of the highlight.

Screenshot Highlighting a single DOM Node

splitNode now contains the node we want to visually highlight on the screen. To do this we create a <mark> element, style it, and insert it in the correct location. This is as easy as just getting the parentNode of our splitNode, and using insertBefore to insert it as a child element, just before the splitNode.

We then use .appendNode to move the node into the new <mark> element. If you use .appendNode on an existing element in the DOM, it will remove it from it’s current position and add it to the new location.

Now we’re done and that was pretty simple, right? Here’s where it gets a little more tricky. Imagine you want to start highlighting a note in the middle of an <h3> and end a few elements away on another <h3> or a <p> element. We can’t just split and wrap the entire block with one tag, it will break the DOM structure.

Screenshot - Highlight across multiple DOM nodes

The solution I came up with is to split the first element and the end element, then wrap all the elements with <mark> individually. Since the <mark> element is just for the user to have visual confirmation of the notes they’ve highlighted on the page, I have no problem with doing it this way. I also haven’t thought of any other solutions, so there’s that too.

After we have split the start and end node, we extract just the text nodes, since these are what we want to wrap. The only way to do this is to extract the the text nodes of range.commonAncestorContainer, meaning the closest element that wraps around the entire range.

Now we’ve all the text nodes including those of the parent container of our highlighted text. To get rid of all the extra nodes, we can use Range.intersectsNode to determine which nodes in our list are actually in the selection. Then, we just loop through our nodes and wrap them all with a <mark> element. You can check out the full code here: content.js on Github

Screenshot Successful DOM highlighting

Refactoring

I’ve got way too much going on in the popup code. I’m going to try to consolidate everything I can into the event script. I’m not sure if the popup page is even going to stay, as the plan is to have a management view to manage articles and notes. The popup might be redundant, as saving pages can be done with a context menu instead.

I’ve also been working out a new way to structure the data. Right now all pages are stored as an array in localStorage. Each item in localStorage is an array containing the url, page title, and the current vertical location of the window (scrollTop or pageYOffset ). This was fine for testing but I plan to store much more info.

Here is the current working list of how I plan to restructure it:

// Collection of articles, future possibility to group articles
articleCollection {
    articles:        // list of articles

    // methods
    save:            // save to local storage
    load:            // retrieve from local storage
}

article {
    url:             // url of article
    prevLocation:    // scrollTop or pageYOffset
    notes:           // list of notes
    created:         // date article added
    accessed:        // date last accessed
    archived:        // bool, allow user to set when done reading

    // methods
    save:            // save article to collection
    remove:          // remove article from collection
}

note {
    content:         // raw text content of note
    location:        // original DOM node position, may help
                     // when locating note on page reload

    // methods
    save:            // save note to article
    remove:          // remove note from article
}

You can see I’ve tried to structure everything in a little bit more of an object oriented way. I’ve added some possibilities for helper methods, but haven’t added getters. I’m not sure that I need to hide any of the data (i.e. wrap in a closure), but I’ll consider that in the future.

You can see I’ve got a pretty good start on getting this up and running, but I’ve still got some more planning to do. I haven’t even gotten in to adding unit tests yet!

Using domain registration to optimize your search engine ranking

There are many ways your domain name can help or hurt your search engine ranking. You can use a few of the following tips when registering your domain, or registering domains for micro-sites or campaigns for your business.

Keywords in domain name

Placing the most important keywords in your domain name can significantly contribute to a page ranking. There are many ways you can incorporate a keyword in a domain name.

Exact match domain

This is great for a campaign or a micro-site. If a customer is searching for ‘recycled shoes’, recycledshoes.com will have an advantage over other domains since the domain name matches the search query exactly. Beware that spammy sites do this all the time, and many exact matches might be hard to obtain. If you find one that works for you, make sure you provide useful content on the site. This is where creating a useful micro-site based around a single product, or subset of products will help. Redirecting the domain to your main business domain is likely to gain you nothing.

Keyword in domain

Just having one of your main business focus keywords in your domain will help your ranking. If your company is named ‘Acme’, and you focus on tools, acmetools.com will be a better domain than just Acme.

Making the keyword the first word in the domain name is also a popular strategy. There is evidence that this technique may be more beneficial than placing a targeted anywhere else. In this example we could try: toolsbyacme.com.

There is also evidence that keywords as sub-domains are factored into rankings. This is great for micro-sites as well. You might run a campaign to push anvils, so you would set up a site at anvils.acme.com targeting anvil sales.

Domain age

Domain age and registration length is also known to be a factor. Both have been mentioned by Google’s resident webspam team member Matt Cutts. 

There isn’t much you can do about domain age except to register early and never let your domain expire. Spend the extra money and register your domain for longer than a year at least. There is controversy around whether the registration length is really a factor, but if you plan to stay around for a few years it makes sense to go ahead and register long term.

Others

Private domain registration has been mentioned as a factor by Matt Cutts before. There are legitimate reasons to have a private domain. If you’re running a solo home based business and you don’t want to broadcast your address and phone number on WHOIS it you may want to stay private. Most small businesses with a phone number and a PO box should list it publicly on their domain WHOIS. This lets Google and everyone else know you’re a legitimate business.

If you operate specifically out of a certain country, or provide a local service, consider using a country specific TLD, like .uk, .ca, .jp, etc… This helps search engines know what country you operate out of, although it’s not the only way they determine your locality. Consider registering multiple TLD’s localized to each area you operate.

Conclusion

Your domain name is just a small factor in your overall search engine ranking, some of these tips will help push you above the competition. This is all provided you have actual useful content on your site. Content is always king, but every little optimization helps.

Setting up a TLD for local web development in Ubuntu

Like any good developer, I have a local LAMP server set up so I can develop locally before pushing a site or app to a live production site. This allows me to completely test any modifications to the code base and helps minimize and prevent any possible bugs once the site is live. Once everything is well tested and good to go, I can easily push to production, test again, and be confident everything is working correctly.

My development server is a 64-bit Debian Server running inside a VirtualBox VM on my desktop PC. I run Ubuntu based Linux distributions on all my PC’s, so I could install a LAMP stack on any of them, but I prefer to keep it separated. By using a virtual machine I can more closely emulate the most common server I deploy to, which also minimizes any bugs I might run in to.

So what does all this have to do with setting up a local development top level domain?

Well, my standard process has always been something like this:

  1. Create a directory for project on local server
  2. Set up new virtual host in Apache (usually ‘project.dev’)
  3. Update /etc/hosts file to point ‘project.dev’ to virtual machine’s ip

That works fine, but I have to add project.dev to any computer on the network that I want to be able to access the .dev site. It’s one of those things that I just have been doing for so long that I do it unconsciously. As a developer, I’m always looking for ways to streamline processes and be more efficient.

Enter dnsmasq

What I want is to make the .dev TLD always point to my virtual machine. Wildcards are not supported in your /etc/hosts file on Linux, so we’ll use dnsmasq.

Dnsmasq is a lightweight, easy to configure DNS forwarder and DHCP server.

You can set up dnsmasq on all the local computers on your network to make them all hit your development VM for all request to *.dev.

If dnsmasq is not already installed on your Ubuntu based distro, a simple ‘sudo apt-get install dnsmasq’ will do.

Next, edit /etc/dnsmasq.conf and add this one line:

address=/.dev/172.24.35.130

Where 172.24.35.130 is the ip of your VM. My VM is exposed with a bridged connection to allow it open access to the internet and the local network.

You may need to restart network-manager & dnsmasq:

sudo service network-manager restart
sudo service dnsmasq restart

And you’re good to go. Now you can clean out that /etc/hosts file you’ve been piling domains on.

This is a simple, easy, and somewhat obvious fix, but sometimes you get into a routine and forget to check if your processes can be optimized.

Five minute writing sprint

So you’re sitting around, you finally have a moment to focus on your website and you think, “I need to get some more content up here”.

You don’t have the budget to hire a writer or a marketing expert to help write your content so instead you write everything yourself.

You sit down but your mind is blank, you expect yourself to write the next most viral content the web has ever seen, making your business blow up, wherein you become a billionaire philanthropist and spend the rest of your life making the world a better place.

But you still have no idea how to start.

I propose a five minute writing sprint.

Sit down, get a timer, use your phone or the classic kitchen timer for added dramatic effect, set it for five minutes and go.

But I still have no idea what to write you say!

Stop! No backspace key allowed. Write whatever is in your head in the moment.

Imagine this:

You start your timer and realize you really should have hit the restroom before you started, well, suck it up, it’s only five minutes.

Start by writing that.

Once your fingers start relentlessly pounding on the keyboard and you command them keep going, the ideas will start pouring out of your brain. Some will be terrible, some will be great, some you will have no idea where they came from. This is the beauty of the 5 minute writing sprint.

As you’re writing, new ideas start popping into your head and you start to get into a deeper flow. Your timer all of the sudden goes off, but it feels like you’ve only been writing for 30 seconds, so you keep going.

If you are having trouble, use the five minute writing sprint to get started and you’ll be amazed with what you come up with.

Don’t worry about editing, that will come easily once you’re done.

Writing as fast as you can will kill your inner critic and help you spew out as many ideas as you can, eventually you might run out of gas, but I bet it will take longer than you realize.

You may write things in a crazy random order. Ideas may come to you in the wrong order. Just keep writing, that is what editing is for. We’re just here to work out ideas and a general outline for the first run through.

Afterwards you may have one complete article, or 5 separate ideas for articles to write. You can expand on these with additional 5 minute sprints or just write normally.

The point is to get started. Half the battle is just opening up your writing environment and go go going. If you notice yourself slowing down to think just start jamming the keyboard fast and without regard.

After all, all you need are words, that you turn into sentences, that you turn into paragraphs, that you turn into sections, that you turn into articles.

If you already have an idea, or if you’re starting round two you can just start freestyle writing on your idea with an outline.  An outline will help you keep some semblance of structure and keep things readable. You may even find that writing with an outline will give you one shot articles. Great, interesting and fun articles that you’ve written in no time.

If you’re a small business owner and you can’t afford a writer or content creator this may be the best piece of advice for you. Anyone can write, and the more you write the more you’ll figure it out. The more things you try the more you learn what works.

Learn this one insane trick used by Nobel laureates to create outstanding article titles!

Okay, bear with me and hopefully you’ll understand the [ridiculous] title to this post afterwards.

First, check out this webcomic from the great xkcd.

xkcd comic
http://xkcd.com/1283/

You’ve almost certainly seen similar headlines while browsing the web, and if you haven’t noticed, you’ll probably notice them everywhere now. Headlines like these are common headlines for content, sometimes referred to as Link bait.

Obviously the headlines in the comic are filled with sarcasm but they illustrate a lot of concepts used in writing interesting headlines. Headlines need to grab people’s attention and get them to choose to read one article over the millions of other similar articles out there.

So, how do you get someone to read the article you’ve spent days pounding out on your keyboard? Start with a good headline.

 Associate with someone of power

“How a shocking new theory, discovered by a Dad, proves scientists are wrong about everything” is a decent example of this, although it could be taken even further. The idea of scientists theories being uprooted by a Dad is supposed to be surprising, which is interesting enough for someone to want to know more.

Also, claiming ‘Nobel laureates’ create outstanding article titles is an example of trying to use a perceived authority figure to grab a readers attention. I did a quick search and couldn’t find any references from Nobel Prize (in Literature) winners regarding writing interesting titles. When I do find one I’ll post it here. I would recommend not using this unless you really have a reference. 🙂

Shh, it’s a secret

Simple things often aren’t revealed in the headline in order to compel people to click and read the article. It’s like you’re keeping a secret from your audience until the last possible moment. These are the ‘one weird trick’ articles.

Imagine trying to get someone to read an article about cutting their hair every other week. Yeah, right, who would read that?

“Get a hair cut from a qualified hair stylist biweekly to maintain your desired hair length.”

That sounds like the most ridiculous article and reading it would most definitely cause a mass departure of brain cells. I would not bother to click on an article like this, and I’d probably put whatever site served that article on my block list. However, how about something like this:

“This one crazy productivity hack eliminates unnecessary hair length!”

Alright, so I wouldn’t read this article either. It sounds terrible, and come on, it’s an article about hair. It sounds a little more interesting though, right?

61047 ways to write winning headlines

People love lists.

I’ve read many theories on why list posts are effective. People are busy and like to know how much they are going to have to read. List posts make an article easier to scan. People like lists in general.

If you hadn’t already noticed the massive amount of informational ‘list posts’, now you will see them everywhere.

Although list posts are pretty effective, use them sparingly. They can be effective but with so many articles based on lists these days they can also be perceived as a joke. Not everything is a list, and in general you should stick to covering one topic in an article. Don’t use the list post format for something that clearly doesn’t need to be structured as a list.

Can writing an article about writing headlines make me a better writer?

Steal some clicks by asking a question. I ask you a question, and you feel compelled to answer. I read a question, at least an interesting one, and I want to know the answer. I’m curious, everyone is curious. What’s the answer?

Asking your potential readers a question is a great technique to interest them in reading further. Make it an interesting question and make sure you have an interesting answer.

Don’t lead anyone on though. Give a terrible or generic answer and you alienate your readers.

Conclusion

These are just a few standard techniques to write interesting headlines. Whatever you do, make sure your content lives up to the hype of your headline. Find the right balance for the type of reader you want into what kind of direction you take your headlines.

The goal is not to ‘trick’ someone into reading your content, but to write interesting headlines so your target audience will find and appreciate it.

Images and Search Engine Optimization

While the bulk of content on the web is text, images play an important role. Images support your content and can help illustrate concepts more clearly or provide an interesting break from content. They can also encourage people to read your content, but not every visitor to your site necessarily has images enabled.

In this post we’ll be talking about the best practices when it comes to using images on the web.

To insert an image into an html document we use the <img> tag. We need at least the src and alt attributes, and preferably the width and height attributes as well.

Image tag attributes

There are four important image tag attributes. The only required attribute is the ‘src’ attribute, however the other three mentioned here are important as well.

src

The src attribute is pretty straightforward, it tells the browser the location of the file.

alt

The alt attribute is used to describe the image. This description will be visible before the image loads (like on a slow connection), by screen readers (blind users or users with poor site), or if an image referred to by the src attribute cannot be found.

width & height

The width & height attributes are important to specify so the browser knows before beginning to render how much space the image will need. However, this may also depend on the layout of the site and if responsive/fluid images are being used.

Optimizing for Search

There are a couple important factors to consider when optimizing images for a website. Here we’ll talk about the alt tag and image size and compression.

Optimizing your alternate text for images

The alt attribute is very important, not just for search but to ensure your website is accessible to all users. Well written alternate text is human readable (not just a list of keywords) and concise (aim for less than 10 words). Search engines will use this text to index your images. While it’s not the only technique that may be used (surrounding context, file name, and other factors may contribute as well), it is best practice to always include alt text.

Optimizing image size

Site speed is important to both users and search engines. If your site does not load quickly enough users are more apt to click the back button and look somewhere else. If your site is really slow search engines like Google are likely to rank your site lower or even not index it at all.

Images often make up the bulk of the size of a page, so it’s important to ensure that the correct image format and compression is used.

When saving an image for the web you will want to make sure it’s saved at the size it will be shown on the web. I’ve often encountered images taken directly from a camera uploaded to a website and re-sized by the web browser. The sizes can differ wildly, but this can easily be the difference between downloading a 12 megabyte image vs a 40 kilobyte image.

It’s very simple to open your image up, re-size to a smaller size, and save as a .jpg. In software like The Gimp, when saving as a .jpg you will be given the option of choosing compression quality and be able to preview the result.

This week was just a brief overview of what to consider when using images on the web. I’ve gone through the basics, but there is plenty more to learn out there, such as responsive images, svg format images, image sprites, and more image optimization tips.