Code

(11) Articles in category Code

A reusable, JavaScript class to animate a bubble formed underwater floating up to the surface. I also have a real-example work-in-progress of it at http://ed.aetkinzstudios.com.

I'm quite happy with the result myself, going forward that's definitely the way to make animated user-interface elements. I think I may create a tooltip like that especially since making a jQuery tooltip plugin means that I'd be pretty much tying the tooltip to a specific method of triggering. Like on a certain element's hover or something, and sure I could open it up by using callbacks and settings I think that will always change project to project. So what I want to do is create a reusable tooltip object with a constructor so I can write var tooltop = new Tooltip("message", x, y); inside of any jQuery or other framework event handler that I want.

Here's the finished mockup for exploration divers. It's a diving website for my boss at Aetkinz I'm also working on in a class of mine. The goal is to really make a fun diving experience that really makes the site and content fun, of course the key is making really good content so that's been a big part of it so far.

If you've ever had to do a project recently without a solid template system, it's a pain in the butt. Basically every piece of markup you write needs to be duplicated on each and every page. This means things that often change like links, navigation, headers, and footers have to constantly be updated on every page.

Simply you click a link in the navigation menu and it alerts you with the file you would use with the jQuery $(selector).load(url); function to load the contents of that URL into the contents of the selector. So if you had something like <div id="main-content"></div> you can load the page right into that.

This particular solution is more the quick & dirty way as opposed to my JavaScript MVC framework, but far easier to explain and understand.

If you ever break out of the PHP world of things and find yourself using more advanced languages and frameworks you find that you need much more to host them. The big guys can afford the heftier hosting to support hosting many apps but when you're more or less just getting started you find your self a little pressed for places to put your ruby or python web app.

Enter Heroku! A site that offers free web app hosting. I'm sure by now you're thinking, "What's the catch?" in which you are quite wise for asking that. The catch is that it's only free hosting up until a certain amount of resources are required. So you might be able to host a larger portfolio site like this one on it but you're definitely not going to be able to host twitter on it.

The amount of space/resources you get before that point is quite reasonable and seems to fit most of my needs. Of course it's not as free as say using a VPS host where you essentially get a complete server to run/manage so you won't be able to just install unix packages and the like. So it's pretty bare-bones hosting but sometimes that's all you need.

How Heroku Works

Heroku basically allows you to use git to push your code to their servers and into your app directory which then compiles your app into a "slug". Which is an app that's ready to be triggered. From there you setup a domain and point to your app server and you're good to go.

Databases

Heroku has two options: Postgres or MySQL which has only been added fairly recently. Postgres is clearly more encouraged by them and most database people I meet seem to highly recommend Postgres over MySQL every time. The cool part is if you're using Ruby on Rails, Django, or an app framework with an ORM (Object Relational Mapper to connect to your database) you can interchange them to a degree. For instance an app I built using MySQL on my local dev server worked fine with Heroku's Shared Postgres option.

Heroku's Postgres is divided into 2 sectors: The free shared sector, and the dedicated premium sector. The prices for their premium offerings is quite high. However when your app is in need of the size of the resources that Heroku can offer, you'll find it's a fair price.

Why use Heroku?

The biggest reason why I use Heroku isn't that it's free but because it's highly flexible. You pay for what you need, and it's free if you don't need much. On projects where I don't know if there's a high demand or big interest I tend to just go with Heroku at least initially until I know our average resource consumption.

Plugins

Heroku comes with many available plugins some free and most others are paid services. Some include HTML5 video encoders, extra databases, analytics plugins, and much more.

Get Started with Heroku

Check out http://heroku.com for more information on what it offers and how to get your app up and running with Heroku.

I will be publishing a specific article on deploying Django apps with Heroku to cover some of the small solutions I had to find for some of the problems not covered by Heroku's documentation. One such instance was setting up a shared database.

Whether you are just joining us in the interactive design field or a long time veteran you've probably heard the terms "library" and "framework" used quite often. I've definitely heard those words thrown around myself, and definitely have contributed a system of each. What I did not know, is that those terms refer to very specific concepts.

Why should I learn the terms?

While it may seem like boring, technical lingo it's important to understand the correct terms so you can communicate with other people more effectively. Had I gone on not knowing there was a difference, I would run the risk of costing myself or my employers time & money. For instance if we were beginning a project and I tell the backend developers to develop a framework when I really needed a library. That's the wrong solution to the problem! That means I will still need a library and the developer just wasted time & company money on building a framework.

What is a framework?

A framework is more of a finished solution to a problem. In other words it's a set of tools and resources to accomplish a specific goal. For instance WordPress can be considered a framework as it's code helps you build a blogging application. With frameworks, you write modules and hooks to interface with the framework. For instance with WordPress you create pages, themes, and hooks to build the website you want. You have set methods for tackling common problems like adding a new post type. So in short a framework is more of a result to a problem.

What is a Library?

A library is more of a set of resources to create a solution. Libraries often contain code that helps you solve other coding tasks. For instance jQuery is a library. It has a function to animate other HTML elements, this of course can be accomplished in native JavaScript, which jQuery is written in, however, jQuery simplifies the task into one function call and one line for the developer. So in short a library is more of a means to an end.

Interestingly, you can use libraries to build a framework, but you can't use frameworks to build a library.

So for the first 10 years of my web design & development experience I used Dreamweaver. That was a mistake. All I did was over-pay and loose time working with an inferior editor. Last year, I switched to VIM and I love it. It's a great editor which offers you exactly what you need. Now don't get me wrong, I prefer VIM but I wouldn't pretend it's the "best" editor out there, there are many others like it such as textmate, sublime, and emacs. But I don't use those so I'm not going to mention them further.

Why not use Dreamweaver?

Dreamweaver is a great editor. If you have no idea how to actually make a website. The biggest reason is that it wants to do the work for you, the problem is, it's not good at that. It never will be. Dreamweaver can understand the result you want but it doesn't understand context so when you let it generate the code for you, it's going to generate a lot of code you don't need. It's a fine set of web developer training wheels but you gotta move on when you're ready. I can't tell you how much I wish I learned about VIM 9 years ago.

But the big reason that Dreamweaver is a bad editor is simply how much it slows your process down. Think about what's involved in changing a word 10 lines up? You either press up 10 times, then the left arrow key until you get to the word then you can either press backspace until the word is gone, or take the mouse and delete the word. You could also take the mouse, select the word, press backspace and replace it.

What VIM offers however is options, and with that comes speed. In that samescenario you can just type the following key sequence in Normal mode 10k3wcE. It moves the cursor 10 lines up, moves right by 3 words, and puts you in edit mode while over-writing the next word so you can just start typing. The only time spent is how long it takes you to type "10k3wcE".

What is VIM?

VIM stands for Vi Improved, Vi is a traditional text editor that comes with unix machines including Mac OS X. ViM works much like VI but adds some extra functionality, customizability, and above-all plugins. It's a text-based code editor.

What makes VIM so great?

Vim is a mode based editor. In other words you use it differently based on the mode you're in which means you get a good interface for what you want to do within your code. By default you are in normal mode where you can view code, move up, down, left, right, with k, j, h, and l (Lowercase "L"). This allows you to use your keyboard to logically transverse your code based on words, lines, letters, and code blocks.

Then there's command mode. This is activated by pressing ":" (colon) and followed by a command, plus text and enter. This is where you can tell vim to save your file, open a new file, split the window into frames, run other functions and plugins.

Lastly there's insert mode. This one is pretty straight forward, this is when you can type your content. There's a few ways to get into this mode. Such as pressing ce in normal mode allows you to edit up to the end of the current word object.

So the big picture here is that VIM allows you to really interact with the context of the code you're typing. It breaks the text you type into words, lines, blocks, vertical blocks, and of course individual characters with numerous ways to transverse and manipulate them.

Extendability

This is what really got me into VIM, the numerous plugins available which mean you can really craft the tool you want. That's what really gives VIM and like editors their power. You get the tool you want to work with, you do't have to use it the way they want you to.

Customization

You can really customize anything in VIM! The amount of options is amazing. Don't like using h, j, k, and l (Lowercase "L") to navigate your text? Fine. Remap your keys in your configuration file!

One of my favorite features is how many themes there are for VIM. If you've used dreamweaver you get one theme, or you can take the time to change the colors and that's it. With VIM you can find many themes and switch to them at anytime. What this does is let you pick a comfortable theme for your environment? Working in a dark coffee shop, use a dark theme. Working in a bright office building? Time to switch to a white theme!

How much is VIM?

Oh I forgot to mention: It's FREE!!! Why? Open source, bitches!

What's the catch?

Oh you're quite wise for asking what the catch is and I'm not going to sugarcoat it: There is a learning curve. It's going to take some time & effort to learn. But I am going to share the resources that helped me learn it. Took me two weeks to get used to editing my code that way.

Vim Resources

Here's some resources I've come across for obtaining VIM and learning it along with a few cherished plugins.

Learning Vim

As promised here's what I used to learn vim which are a series of video tutorials created by Derek Wyatt who's strong personality does add a bit of entertainment to the process. Following is his introduction tutorial to show you what VIM can offer. It's what got me hooked almost exactly a year ago!

Favorite Plugins

Pathogen allows you to use git to safely and effortlessly install more plugins in their own folders. By default you would have to install them in a global syntax, startup, indenting, etc... directories. With pathogen they reside in a plugin directory in their own folders. To uninstall the plugin you just remove the folder, to install them with pathogen you can just use git or any other type of plugin manager.

Found this sweet find browsing twitter of course. Anyway CSS3 is one of the more recent tools at our disposal now that modern browsers support most of the CSS3 specification.

The idea is, instead of making a clean gradient button with a highlight and border in Photoshop or what have you. You can make it in pure CSS. Which will always take up less space than an image since an image has to store the color of each and every pixel versus just a few lines of text which tell the browser how to render elements with those styles applied to it.

However in this tutorial Brad teaches you how to overcome a common problem with using said techniques for the iPhone. If you just use a border around your CSS3 button, the retina display on the newer iphones will make it appear as a 2px border which throws off the design a bit. But luckily he's discovered a great work around by creatively using the CSS3 shadow. Kudos to him!