My Top 10 Web Development Tools

date: 2013/09/06

featured_image: /blog/featured-images/top-10-web-design.jpg

I am someone that is pretty excited and passionate about modern web development. Today I will share with you some of my top tools that I use on a daily basis developing responsive sites with Zurb Foundation 4.

SPLIT_SUMMARY_BEFORE_THIS

1. iTerm 2

On macosx the default terminal application is okay. If you spend most of your day in and out of a terminal it is time to look for a better solution. I have mine set up to automatically go full screen, using Incosolata (my favorite programming font), and use a variation of solarized dark theme. I also have a light one that I can switch between if I find myself blinded by the sun.

Although I use tmux with tmuxinator (more below) extensively I love being able to press cmd-t to spawn new terminal windows full screen and hit cmd-# (1-9) to quickly move between them.

2. LiveReload (commercial $9.99, macosx only, available on the mac app store)

This program does many things but I use it only for one thing, automatically refreshing browsers when files are modified. It is pretty easy to set up, just choose a folder to watch, install the plugins in your favorite browsers and turn them on. NOTE: you need to serve the pages (not display directly from files) on Chrome so that it works correctly.

I know there are other options for this, grunt et al, however this was the easiest for me to implement and continues to work great.

Also, when I preview on a mobile device like ipad, there is an option to inject a javascript reloader. This works flawlessly and allows me to do the same thing on browsers without the plugin (mobile browsers, iPhoney, etc.)

3. Sublime Text 2/3 (commercial, $69 direct from developer)

I have been an avid VIM user for years and continue to use VIM when I don't have this available, but ST2/3 is simply amazing. How can I compare it. It is like the difference between modern languages like Ruby and less modern languages like Java. Sure you can get things done in VIM but ST is just a pleasure to use. ST Looks great, very fast, great plugin architecture. Specific features like multiple cursors just makes more sense to me. Maybe because I am a more visually oriented person.

4. Chrome Developer Tools

I also use the same tool set in Firefox but I have to say I just prefer the tools available in Chrome. They are quickly available cmd-opt-j and provide me the tools I need quickly 90% of the time. Like, did my files load, I can tell quickly by looking at source tree. I can open each file and see what error message was returned.

Some people start editing the code within chrome which I guess could be a good strategy but I prefer to just switch back to ST where I have a more advanced text editing tool kit.

5. YSlow

Defacto standard to see if your front end is lacking. I love that it gives you specific strategies and tells you where to get started for implementation.

6. PostMan

Just learned about this recently but it is now part of my daily set of tools. Lets you interact with pages and apis very quickly. You can POST or GET and pass parameters or json data. Really speeds things along when you can see exactly what is going on quickly with an api and the returned data.

7. Sketch 2 (commercial, $49.99 on the mac app store)

Sketch 2 is like Illustrator for the web. It does one thing very well. Pixel perfect vector graphics that can be output as either SVG or rasterized PNGs or JPGs along with their double resolution retina cousins. If you don't know what I mean by pixel perfect, I mean that the vector elements are aligned to a grid of "pixels" so you don't get anti-aliased lines for example on the edge of a rectangle.

There is some extra goodness with being able to play with elements quickly and visually and export the CSS. I never copy the CSS directly but it can be a good starting point.

8. Middleman (gem middleman)

Middleman is a static website generator written in ruby that is fantastic. I have tried a bunch, octopress, piecrust, etc. What does middleman do right? One thing, a simple templating structure. Many of the others work great if you use one of their templates, but creating your own can be a real hassle. Middleman is great because you can use partials and templates and it is somewhat flexible. Save time by putting your navigation into a _header.html.erb file. Use .markdown for your blog posts. It is a pretty robust solution although the documentation can be lacking at times.

The other reason I love middleman, middleman-s3\_sync. After you build you can push everything to s3 with one command midddleman s3\_sync. This is exactly how I built and maintain this site at the momement. It is hosted through AWS S3 and AWS Cloudfront with an apache server that just redirects / alaises manofstone.com to www.manofstone.com.

9. Tmuxinator (gem tmuxinator)

I started using Tmux a while back and could never really get into it. I do a lot of front end work using Zurb Foundation in ST and this allows me to automate the generation and serving of files. I have a standard .tmuxinator file that I have created where I just change the directory name. Then I have a shell set up at that directory, compass watch on a second, a web server on port 8k and localtunnel amongst other things as well.

It is very quick for me to check what is going on. I changed the default command to ctrl-a (great for dvorak) and just hit a number 0-5 which allows me to quickly switch through the commands.

I also have it fire up LiveReload and the specific ST project file so one command tmuxinator projectName recreates my entire workspace in a matter of seconds. To switch to another project I just close down all the tmux windows and run the same command with a different project name.

10. Local Tunnel (gem localtunnel)

Local Tunnel is another new addition to my kit but one that is here to stay. It does one thing but does it perfectly. It allows you to push your local host connection (on one port) to the outside world. I use this to allow myself to preview pages automatically (see javascript injection in LiveReload above) on my iPad. I can also get an iPhone sized site by using Dolphin Browser for iPhone (more below) which allows me to quickly check responsive sites both at my firewalled wifi setup at home as well as the local starbucks.

The other benefit is when working with rails or node projects it allows me to share my dev server with a client which removes the process of having to push to a staging server for quick demonstrations.

A big thanks to Twillio for putting this one out.

Honerable Mentions

Didn't quite make it into the list but definitely worth being aware of. Some of these I don't quite use daily but I definitely turn to at least once a week or more. Using Git is kind of like brushing your teeth. Everyone should be doing it several times per day.

Pixelmator (commercial, $14.99 available on the app store)

My Photoshop replacer. I do all of my pixel based image editing and creation here. Does 99% of what I used to use Photoshop for and does it with a smile. It is fast and lightweight and the UI/UX makes it fun to edit photos again. I think the price is about one month of Adobe Photoshop in their new Creative Cloud pricing structure.

Marked (commercial $3.99, available on the app store)

All this does is render markdown file beautifully and automatically refresh them. It is my web browser of sorts for markdown files. I use it to generate beautiful pdf files from markdown for documentation and other projects.]

Dolphin Browser for iPhone (free (with in app purchases), available on the app store)

I use this to preview web pages in an iPhone style browser on my Retina iPad 4th gen. If you are like me and have an iPad but no iPhone. This is the best way to simulate a preview on a smaller device.

iPhoney

Just remember to hit cmd-0 after you load it. Once you do that you should have a preview similar to an old school 360px wide iPhone. Good for spot checking your designs. You can use the javascript injection with LiveReload for automatic reloading. If I forget my iPad at home this is what I turn to.

YemuZip

The easy way to generate .zip files quickly and easily on the mac.

Dropbox

Has saved my life more than once by providing backups and versioning.

Git

This is a no brainer. I also use a git repo (private on bit bucket, public on github) for all of my projects out side of simple demos and prototypes. I have on more than one occasion deleted an entire days work by not being careful trying to roll commits back so be careful and keep a secondary backup. I suggest dropbox.

Paparatzi (free, macosx only)

Takes full length screenshots for web pages. You can set the width to 360px wide to get nice mobile layouts in Zurb Foundation or other responsive frameworks. I use this to generate all of the screenshots for my books, screencasts and other materials.

Why I Quit Apple and Moved to Paris”

date: 2013/11/27

time: 03:22 PM CET

tags: opinion

featured_image: /blog/featured-images/james-chateau.jpg

Okay, officially I was a grey badge or a contractor but working at Apple was nice. I mean, very, very nice. The campus is beautiful, I worked on top of the line hardware, I had an office with a view for a while. They even have Starbucks machines. If you have never used one, I can't begin to tell you how wonderful they are.

Well, all good things come to an end. I had a serious dilemma. I had an opportunity to move to Paris.

SPLIT_SUMMARY_BEFORE_THIS

It wasn't a glamourous all expenses paid rendition as you might see in the movies. With some tycoon hiring me and whisking my family and I off to Paris by private plane or any of that nonsense. It was more of the slow, planning, preparing and hard working to take advantage of an opportunity that landed me in one of the most culturally rich cites in the world.

So some people think I am crazy, irresponsible even. Some people think I am lucky. As if the scene described was granted to me by some genie or something. If you ask me, I am both lucky and hard working.

If you find yourself being placed between the two worlds of the responsible adult and of uncertain adventure I urge you to take the latter. Here's why:

There is really no certainty in life and there are no guarantees. We live in a world with next to zero job security and with our health (at least in the US) can be hanging on by just as thin of a thread. Jobs will come and go but opportunities, especially those of the exciting and adventurous type tend not to reappear. Seize the moment, even if it appears that it may not be a rational choice.

Living abroad is a once in a lifetime opportunity for me. Before 2007, I had never traveled outside of the US (with the exception of Canada and Mexico). But since I have spent 9 months total in France, 3 months in Armenia, 1 month in the Republic of Georgia, 3 weeks in Turkey and have also traveled to the UK and Belgium. I have learned to speak basic things in three languages and have experienced amazing things that have altered my perspective on life in profound ways.

I snuck out of a village to avoid having three goats slaughtered in my honor only to witness a sheep meet its demise at a church the next week. I got kicked off a train at gun point, bought a visa at a control point for cars and raced through the mountains and ran through a dark train yard to reboard it 74km later. I have traveled to the castles of kings and through sewers of Paris and many other strange and beautiful things.

This all started from taking some risk.

Risk in doing something where I believed that I might fail.

I applied to a study abroad program run by professor John Clapp. He told me, "You won't get in, but you are welcome to apply."

I thought it was a lost cause, mostly from the fact of having zero money. My father encouraged me, "Just apply. If you get in, everything else will fall into place."

Well, I applied, got in and somehow managed to scrape together the money to pay for it. I don't mean to say that it was not supported by hard work, desperation sometimes manifesting as depression at times, but it was making that decision to apply and taking a chance that started everything.

So just go for it. Take a risk. Even if you fail, you will have at least pursued your passion, even if for a small moment. And that, can be a life altering thing.

Have you ever taken a risk when people thought you were crazy or irresponsible? Are you facing such a decision today? If so, I would love to hear from you in the comments.

Uncreative Writing, Chapter 1

date: 2012/02/02

In a graduate seminar this semester I am reading a book by Kenneth Goldsmith called Uncreative Writing. He teaches poetry at UPenn a class of the same name where he tells his students that they will not be doing any creative writing of any kind, that everything will be stolen and plagiarized, two big no-no's in academia. In fact his final assignment is to purchase a term paper from a "paper mill" and then defend it.

SPLIT_SUMMARY_BEFORE_THIS

I have so far read the introduction and the 1st chapter. Some of my classmates complain about the mechanics of his writing but to be honest I am more interested in the ideas and I did not notice this in a negative way.

To me this book is very smart. He seems to be taking some postmodern ideas such as that of Delueze's Rhizome, looking to visual art as a reference, and creating a poetic textual mash-up. It reminds me of some of the great enthusiasm and interest in the early internet in terms of hyper-textuality using the Rhizome metaphor and the hope for cyberspace outlined à la Mondo2000. It seems that thoughts and spaces such as the LambdaMOO seem to be reused today as maybe literature is falling way behind.

When I think about this though, I do not think that this is exactly the case. What I think about is all of the open source projects and movements that have be archiving not just classic texts but any texts they can get their virtual hands on.

And so, this book proposes, we should not be creating any new texts. There is enough of that already, but rather we should remix, mashup, and reconfigure such texts into expressions of the the now or contemporary society.

On a side note, I am very interested and influenced by this book because of some experiments I did over the summer during my residency at the Institute for the Arts and the Humanities at Penn State. I was interested in how the rhizome or cyborg might manifest in the process of generating a traditional thesis in an non-traditional way. I am seeing a lot of connections between my experiment and what Goldsmith is speaking of. I feel that it is giving me a better context and way of describing these methods I was using. Right now these are just some fleeting thoughts. I hope to further reflect on these ideas and more specifically identify some of the intersections in the near future.

Love this book so far. I highly recommend it. I am also reading it on kindle which is fun, however, it seems that the fact that it is linear and not "hyperlinked" is a missed opportunity.

-James

Good WP Code Snippet Plugin

date: 2011/10/22

I have been searching around for a good code snippet plugin for word press. I really like the style of codecolorer, however, I wanted something with a clean style and also would allow for the copy to clipboard functionality. A lot of the time I refer to my website in class and have students use processing or arduino code and having the copy button really simplifies things.

Today I came across Easy Google Syntax Highlighter by Neil Burlock. It is incredibly easy to use, but not automatic, as codecolorer was.

SPLIT_SUMMARY_BEFORE_THIS

You use it in the following way:

<pre class="brush: java">
void setup() {
    size(300,300);
}

void draw() {
    background(0);
    fill(255);
    rect(0,0,floor(random(width)),floor(random(height)));
}
</pre>

and you are provided with something like this:

void setup() {
    size(300,300);
}

void draw() {
    background(0);
    fill(255);
    rect(0,0,floor(random(width)),floor(random(height)));
}

There is also some additional documentation for the plug-in here on Neil's Website.

Eyebeam Roadshow

date: 2010/09/23

The first device, activating a shattered LCD panel was created by Randy Sarafan and the remaining two devices were created by myself with the help of Ez Cothran.

SPLIT_SUMMARY_BEFORE_THIS

Ticket Machine by Kaho Abe )

A ticket for a trip is an object that gives you exclusive access to an unexplored place. It is a mere piece of paper, but it carries imagination and anticipation of the future, of what new world it can unlock. The Ticket Machine is a Rube Goldberg type collaborative installation which is triggered with a drop of a coin. The machine then unveils different worlds, created by the collaborators, and finally produces a printed ticket. This installation was created during the Eyebeam Roadshow 2010 at 01SJ in San Jose.

Press:

Grad School Books

date: 2010/07/17

This summer I am trying to decompress and analyse my decision to go to graduate school and also explore the career option of staying in academia. I have been scouring the net looking for books that explain how to “survive” grad school, what to expect, or what the career of teaching is like and the transition into such a career, etc. Here are a couple of the books I have been reading and some of my notes about each one. Most tend to be focused on Ph.D. students in either Science or Humanities but I believe there is a lot of valuable information available if you are looking for it. I would love to find a book specific to fine art MFA’s but I haven’t found any. There is a ton of books about creative writing MFA’s. (no irony there)

SPLIT_SUMMARY_BEFORE_THIS

Graduate Study for the 21st Century

by Gregory Colón Semenza

eBook available at SJSU Library

Ch. 1 The Culture of a Graduate Program

The first chapter offers valuable insight to the hierarchy of a typical humanities grad program. It explains who everyone is, what they do, how they interact, and gives some tips to grads. Biggest one, be very, very, very nice to the secretaries of the department. This tip has been echoed to be by T. Asmuth as well, and in my experience as an undergrad at SJSU was critical to my development as student. It also breaks down the different classifications of teachers there are at a college, what tenure track is, and how modern trends, such as hiring many adjunct professors and graduate teaching assistants are creating less and less tenure track positions. They cite a change of 40% since 1988. Other interesting facts are that teaching 4 classes per year (with maybe 1 as a grad seminar) is preferred for researchers. It suggests it takes 20 hours per week for each class, though often more, especially in the case of a grad seminar.

The latter part of the chapter talks about the political pitfalls that a grad or new professor can make. One example is a MFA that wrote the school paper criticising the program. Basically that person ousted themselves from future opportunities. The authors advice: “Try and make it a personal policy to sit back and try to understand the way that things work.” This chapter also gives a breakdown of the “characters”: The High Priests and Priestesses (people to follow), Deadwood (usually older and contribute nothing), The Black Sheep (someone that annoys everyone, usually they will approach you first to win you to thier way of thinking, beware), the Careerists, Service Slaves, the Curmudgeons, the Young Turks (new hires), the Grad Student or Faculty Hall Talker, Theory Boys or Girls (talk to them but never date them), Life Long “Learners,” and the Everyman and Everywoman.

Here are some other basic things learned in chapter 1:

  1. Read the Chronical of Higher Education one hour per week
  2. Go to as many department talks and functions as possible
  3. Become a historian, learn why the department operates the way it does.
  4. If your professors work a 65 hour week, then work 70. if they work saturdays, so should you.
  5. “Act like your professors, not like your students.”
  6. Best Grad students = excelent work habits and organization rather than intellegence or immagination.
  7. don’t be lazy or disorganized.

Chapter 2, The Structure of your graduate career

The only part of this chapter that seemed to really pertain to fine art MFA’s is about selecting advisors. A lot of it seems like common sense, but there was some decent advice to consider such as what type of personality do you want to work with. For example, do you need a task master that is going to stay on top of you and make sure you hit deadlines.

Ch. 3 Organization and Time Management

This chapter is broken down into 5 sections, with a 6th describing the academic CV. Part 1 is about establishing a daily schedule. He suggests to figure out what works for you and stick to it. For example, a 10 hour day is good, because you can “work” most of it, unlike other office workers that slack off, take hour lunches, etc. As a grad you can come in at 7am or at 2pm, as long as you are consistant. This way if you stay out on the town, the pattern cannot be broken.

Part 2 is about prioritizing responsibilities. Keep your high energy times for important tasks. One can grade papers in low energy states and spend the bulk of your time on research activities. Try to avoid distraction. Don’t take calls and try to meet with students at other times. He has a whole section about working with students. Basically grading can be a time suck. 15 minutes per paper is ideal. Grading isn’t about time, but rather creating an efficient system for approaching papers with a sense of energy and purpose as apposed to dread. Try to meet with students by appointment. Never encourage someone to stop by during your office hours. Schedule your hours with one on each track, TuTh and MWF and suggests that students should go out of their way to meet with you, not the other way around. Working with your students can be rewarding, but be careful, this can be a huge time suck and burden.

Part 3 is about “Family Planning.”  Plan your weekends so you can spend more time with family. Either while your spouse is sleeping in or in little pockets if you can manage that (grading).

In response to family that doesn’t understand your career you can a) educate them, b) compromise, split the weekend visit it half. c) create a workplace there like the local library or starbucks. and d) propose that they visit you, reducing stress for you. He suggests that married grads can be better but it is best to coordinate schedules to maximize time spent together.

He gives some valuable advice about summers and “breaks”. Work on your research. Stay near your university. Jump on summer teaching and research opportunities like your life depended on it, and if left with nothing make sure you complain loudly. Also, try to budget your money so you can make it through the summer with less working hours.

Part 5 is about filing and storage or organization. Get at least one filing cabinet. Check the univ. surplus. Label the drawers, research, teaching, other and start right away. Also file “other peoples stuff” with cvs, exams, proposals, portfolios, etc. from your peers and professors. Secondly, get a bookshelf. Collect all the materials from a single class, in a Binder. Get a tack board. Have a calendar and make sure to put every assignment from the syllabi on it right away.

He also makes a suggestion about a personal computer. It seems a little dated, but suggests to a) keep syllabi organized, b) have bookmarks for the university and chronicle, calls for papers, etc. and c) clean up your files every semester or at least every year.

Basically, keep everything clean and organized.

He also suggests that daily exercise can help you structure your day. You can schedule it anytime as long as you are consistant. It could even be in the afternoon. It relieves stress, improves the immune system, clears a space in your day for deep thinking, and will provide you more quality work time. Additionally it is good to have a hobby that makes you happy: a garden, university games, or buy a dvd when you finish a paper.

The chapter ends with a section about CV’s. The important advice is to start one early and maintain it.

Chapter 4 has some good tips such as: don’t ever miss a seminar, make sure you find out what is required and exceed it, make sure you meet with professors during office hours to learn how to improve your seminar grades, etc. but most of it seemed less relevant to a fine arts MFA program.