Staying on Top of Web Technology

I wrote this piece in October of 2011 for the Songwhale Blog, re-posting it here for prosperity.


The times they are a-changin’. Every day our technology becomes more advanced as we push into the future; it wasn’t too long ago that yahoo looked like this and an iPod held 512mb, five years before that NewsWeek published an article skeptical that anyone would choose to read electronic publications. The future is coming, and if you want to fight it we’ll read your comments 15 years later and laugh hysterically. The web has proven itself to be a living creature, mutating every day as people discover new uses for the web’s core technologies, and browsers become more advanced to handle new additions like html5 and css3.

You’ve gotta stay on top of these things and change as the web changes. Of course it’s ridiculous to assume you can figure out all these things yourself, so let’s refer to the internets’ hive-mind.

Javascript and HTML have been with the web since the beginning so they’re kind of a big deal. Weekly updates on what’s new in the world of Javascript and HTML5 are available from Javascript Weekly and HTML5 weekly, all the industry’s rock-stars have something good to say about these newsletters. Another excellent resource is Hacker Newsletter, a weekly best-of selection of articles from Hacker News. This one covers the web, as well as software and hardware news and other topics of interest to computer geeks. There are many more newsletters out there worth reading though, so if your inbox is screaming “Feed Me!” you should check out this list at Smashing Magazine.

If newsletters are not your thing, or not enough A List Apart and Smashing Magazine offer a lot of free information on web technologies and techniques. Smashing magazine’s daughter-blog Noupe has an A.D.D.-like selection covering all areas of design, development, inspiration, and tutorials. For pure design Notcot and Juxtapoz are updated very, very often. These guys all have a writing/curation staff so they cover a lot of ground.

For a more personal touch you should check out individuals who are outstanding in their field.  The design-specific Swiss Miss offers a ton of inspiration and distraction to get your creative juices flowing. Jonathan Snook and 456 berea street are more focused on development, but never disappoint. If you want pure unadulterated inspiration, no matter what field you specialize in, Seth Godin is king.
No matter where you look on the web, there’s always more to learn, so don’t assume you could ever know everything. After all you know what they say about making assumptions…

Project: BAMP Festival of Homes mobile site

Here's the Builders Association in the Metropolitan Pittsburgh Festival of Homes mobile site at bamp.songwhale.com

This little humdinger has a back end written with python/django, I'm also using geopy to assist in calculating distances for the map. The front end uses Google Maps APIv3 HTML5 and CSS3. Django's built-in admin back end made data-entry a breeze, although I wish it had built-in table alteration, changing your models is a pain in the butt, I didn't want to figure out South with very little data to migrate.

This was my first time running an nginx server, it's a big difference from apache. The configs are a lot cleaner, definitely more like python than markup. The uwsgi was used to run python and since it's packaged with nginx setup was a breeze. The Database was in postgres, although I could've used postGIS to do the distance calculations and bypass geopy, I was already in too deep to change it. This is a pretty nice stack.

I kept the design minimal and fluid to support the widest array of browsers. Django's templating is awesome, you can do a lot with it without getting in the way of your html.

Intro to Linux for Web Devs on Windows

I've been spending a lot of time using the linux CLI lately, and I know it can seem difficult at first. When I started with computers everything ran off the CLI and nobody got all freaked out, that was back before color monitors, now we have color monitors in our pockets so don't worry, it's not that hard, you can do this.

Logging In:

To remotely access a server you'll need a telnet/ssh client, for windows PuTTY is a good choice , so download & install PuTTY.  When you open putty you'll see a space for your host name or IP address for the server you're going to access,  input the relevant information and hit open at the bottom of the window. You'll be promped for your username & password when PuTTY connects. Now take a deep breath, you're in a linux CLI, huzzah!

To learn more about PuTTY check the PuTTY docs.

Getting Around:

On windows you can list folders and directories like "C:/Program Files/" or "C:\Program Files\", on linux it's "/var/www/html" (for apache's html directory), so linux is /-only, where windows doesn't care if you use / or \.

Let's see where we are on the server, type in "pwd" at the command line (you should see /home/ or /root/).

To see what files are in this folder type "ls", this will print out columns of files in the current directory, but if you want to see more details you can add to this command with flags, "ls -a" will list all files, "ls -l" will list details about the files, you can mix these flags like "ls -al" to list details for all files. You'll notice a .. and a . directory, In linux the path to the current directory is "./" and the path to the parent directory is "../" Not much fun being stuck in one place huh?

Here's the last command in this section "cd" just typing in "cd" will usually take you to your home directory, which is where you currently are anyhow if you've been following along. cd is there to help you Change Directories, so to move to the parent directory of your current folder you do "cd ../" but you can move anywhere with this command as long as you know where you're going. If this is an apache server try "cd /var/www/html" to get to the default main directory for the files. Some servers keep this directory at "/sites" so you could try too.

Here's a quick reference of commands for moving around:

• pwd = display current directory path (Print Working Directory)
• ls = list files, you can add flags to see more info on each file, I like to use "ls -alF" (LiSt) 
• cd = change directory, use "cd ../" to move up one directory, or "cd /var/www/html" to move to an entirely different directory (Change Directory)

for more on these, check the wikipedia pages for cd, ls, and pwd.

Editing Text-based files:

The de-facto standard is VIM, so to try it out simply type "vim" into the command line to create a new file and lets go. Notice that typing isn't changing anything? yeah, vim has input mode and command mode, and you start in command mode. So hit "i" to switch from command mode to input mode and you can finally start typing, to get back to control mode hit "esc", and to save and quit (from command mode) use ":wq"; to quit immediately without saving use ":q!". Vim is super powerful but this switching thing is annoying and it's not obvious how to use it. The learning curve is steep. There have been books written about using VIM, it's a huge entity unto itself to learn more about VIM try their docs or check out this nice VIM Cheat-sheet.

Lets use something simpler for now: nano. type in "nano" at the command line to open a new file, start typing you're already in input mode, and there's a UI so it tells you what commands are available, but there's much more than meets the eye. To open an existing file use "nano filename.ext" at the command line

Unlike VIM nano doesn't have code-highlighting by default so to set this up you have to edit "/etc/nanorc", so type "nano /etc/nanorc" at the command line the section we're looking for starts on line 240, so hit "ctrl+/" and type "240" hit enter and you'll see a list of nanorc files, erase the # before each one you want code highlight for, then hit "ctrl+x" it prompts you to save changes, hit "Y", then it prompts for the file name just hit "Enter" to keep it the same.

Here's a few nano commands that are useful:

• ctrl+k = cut, you can cut out multiple lines by hitting this repeatedly.
• ctrl+u = uncut, you can re-insert cutout lines by hitting this repeatedly.
• ctrl+/ = goto line #
• ctrl+w = search for a word or phrase, there are a few options here, 'M-R' is a regex search, try hitting "esc+r" to use this (M stand for Meta-key, so try the Apple key or Windows key if esc doesn't work).

Nano's UI shows options you can use to translate keystrokes you should know that ^ = ctrl and M = esc.

For more information on nano, read the Nano docs

Moving, Copying, Renaming, and Deleting files:

Sometimes things are in the wrong place, or you don't want to overwrite a file to test out something, so how the heck do you move or copy or rename or delete files!? The commands are mv, cp, and rm.

Moving a file is "mv path/to/file/location/name.ext /path/to/new/location/name.ext" if you're currently in the directory with your file use "mv file.ext /path/to/wherever/your/putting/it/file.ext" you just gotta know where you're moving the file to, to move it up a directory use "mv file.ext ../", multiple files are easy too "mv file1 file2 ~/" would move those files to your home directory.

Copying a file is done with "cp filetocopy.ext newfile.ext" you can also copy the file to a new directory, you can even copy a directory with "cp /dir/to/copy/ ~/new/dir/"

Deleting files can be done with "rm file.ext" you can delete a directory and it's content with "rm -r", and the flag to force a deletion is "-f" but be careful, "rm -rf /" can delete the whole root directory and totally screw up the server. Most platforms and admins protect against this but it's better to be safe than sorry.

Conclusion:

The Command line can be intimidating at first, but don't fear it's power. It can be a very helpful tool. For more information check out http://linuxcommand.org/, TuxFiles' intro to the Linux CLI and Hypexr's Bash Tutorial. You can also add a linux cli to your windows desktop wth cygwin