The Dream Internship: Automattic VIPĀ Team

Posted on

I actually applied for a position at Automattic not too long ago ā€” before this internship was announced. I still have another year at the UW before I can take a full time position anywhere. This internship would be perfect though. I would love to work at Automattic. Currently they seem to be holding submissions in moderation; presumably so new entrants can’t look at the older comments for ideas. I have no idea when there will be any word on this or how many people will apply.

v10

Posted on

Version 10 of this site is back to a minimal type design. I go back and forth between wanting to design fun stuff and wanting the design to get out of my way. Obviously, I’m back in the mode of wanting my writing to stand out and look as good as possible. I spent a decent amount of time looking at typefaces for this design, which I’ve never really put a whole lot of thought into ā€” at least not from the beginning like this. I decided to go with Chaparral Pro for the headings (which is scary close to being a Serif face) and FF Meta Pro for the body type. Some of the smaller, uppercase headings are Helvetica. The download buttons like those on the Network Favicons post are also Helvetica. The typefaces are being provided by Typekit, naturally.

There’s still stuff that needs to be finished. I’ve got an entire list on a piece of 11×17 poster board in my apartment. The design is mostly finished. I need to look at the single pages of the portfolio again, but other than that I’m pretty happy with this. Most of the changes I need to make are administrative things, like figuring out how to track my short domain with Google Analytics.

It’s fully responsive. When it’s really small you lose the logo, but other than that it’s all there. A branding expert would probably tell me it’s important to put the logo in people’s faces on mobile as well, but it didn’t fit and I’m not really interested in pushing the content down any more than it already is. I’m using min-height along with the standard min-width for the media queries because of the height of the sidebar. The portfolio is always in “mobile” mode because I wanted to show thumbnails in the full width of the browser, which meant moving the sidebar.

This is the first project that I use LESS start to finish and it was a dream. First, if you have problems keeping your CSS organized like I usually do, LESS (or SASS) forces you to fix that ā€” not in a way that’s more work, but just because of how nesting works. Second, apps like CodeKit1 automatically compile & compress your CSS and reload your browser window when you save. Sometimes it doesn’t even have to reload, the CSS just gets injected into the page.

I introduced link posts, which I introduced last week. The CF Post Format Plugin is awesome for managing post formats. I plan to use this to post some of the links that I find around that web that are particularly interesting.

I’m pretty happy with how this design has turned out, but I’d love to hear any thoughts or suggestions.

  1. In addition to compiling & compressing a huge list of languages including LESS, SASS, and CoffeeScript, CodeKit does syntax checking, lets you define frameworks (like the vendor prefix framework I use), and will compress images. It’s my favorite app for this sort of thing and definitely worth checking out. ↩

Introducing: LinkĀ Posts

Posted on

For those familiar with Daring Fireball, or Tumblr sites like MG Siegler’s parislemon, or Marco Arment’s website, link posts are probably pretty familiar. I’ve noticed this trend more and more. Maybe I was missing something before – they’ve been on Daring Fireball as long as I can tell. I’ve always shared links that I find interesting on Twitter, but 140 characters isn’t usually enough to add my thoughts and Twitter doesn’t feel permanent at all.

What are link posts?

A link post is literally just a link attatched to an article. The heading is usually linked to the link that’s attached to the post instead of a permalink. They let you comment on another article in longer form than you would normally want to write in a comment. And, if the author of the site you’re linking to has pingbacks turned on, they’ll be notified of your post in the comments. It’s a useful way to share interesting links with your readers and let them know your thoughts as well.

Since I’ve implemented this feature for the next gernation of this site, and I’m running the new site internally, I decided to add the feature to the current generation theme. I’ve already posted some links, so you can check it out. This implementation isn’t necessarily exactly how it will be when the new version launches, but at least nobody is left wondering about any of the articles here. Currently, link posts are linked directly to the source article in the headline of the homepage and on the single post page. Both pages also have an arrow (→) at the end of the title, indicating that the link is going to take you to an external page.

Photoshop CS6Ā Improvements

Posted on

Here are some of the improvements to Photoshop in the public beta release of Photoshop CS6. I’ve installed it and the new interface colors are gorgeous. There are four steps with the lightest being the same color as the interface of CS5. It defaults to the second darkest one. They note in the article that the darker interface will probably be popular among many photographers.

Layer styles on groups and group clipping masks are exciting as well. It mostly seems like they’re bringing functionality up to what users might expect – āŒ˜J, for example, duplicates anything now including groups.

You can get the public beta from the Adobe Labs site.

Virtualized Development, PartĀ 2

Posted on

This is a follow up to my post, Set up VirtualBox for Web Development, where I describe how to configure a VirtualBox VM with two NICs so that you can develop on a local VM wherever you happen to be. I’m going to describe how to enhance that with a shared folder between your guest and host operating systems so that changes can be immediately reflected with a need to “upload” them to the virtual server.

One of the advantages to working with virtual machines for development is having a sandbox to throw stuff in. Not having to install PHP or MySQL on your local machine is nice, and if something goes wrong, just wipe it and start over (or boot from a snapshot). But wouldn’t it be nice if you could save your files and have the changes instantly reflected on the VM without going through an app like Transmit? I’ve been working with CodeKit recently, and one of the nice features is that it will refresh the browser for you automatically when you save your changes, but if you have to “upload” the files to a VM every time you save, this feature isn’t quite as useful. So, let’s fix that.

A couple of things came together in an interesting way leading up to this post. I’ve been working with CodeKit for a few weeks and it had started to become obvious that my workflow was a little flawed. Uploading to the VM after every save was getting old, even with Dropsend from TextMate. I knew about shared folders between VirtualBox host and guest, but gave up after briefly looking into it because I didn’t know how to install Guest Additions via the command line.

Then, someone showed me Vagrant. It’s an awesome app for automatically provisioning “lightweight, reproducible, and portable development environments.” I had a problem with it though; my MacBook is old and slow. Part of the automatic process is using Chef to essentially set up all the apps you need to run your environment – PHP, Apache, MySQL, etc. Everything went smoothly until Chef started doing its thing, then the CPU would jump to 100% and everything would lock up. I could limit this to 75% of the the host’s CPU if I wanted, but that wasn’t the real issue. I never really gave it a chance to finish, but it took long enough that it would be completely impractical for me to wait that long every time I needed to provision a VM for a new project. So, back to plain VirtualBox.

Let’s do this already!

As I mentioned, there is a way to set up a shared folder between the guest and host – Vagrant does this automatically for you, which is the main feature I was interested in anyway. Once you have the guest OS configured the way you want it, it’s only a few steps to create the shared folder:

First, install Guest Tools.

sudo apt-get install dkms
sudo apt-get install build-essential
sudo apt-get install linux-headers-$(uname -r)
sudo reboot

After the machine reboots, go to the “Devices” menu and click “Install Guest Additions”. This will essentially add Guest Additions as a CD-Rom, just like if you were using a desktop OS, but you have to mount it manually. Then, run the Guest Additions setup.

cd /media
sudo mkdir cdrom
sudo mount /dev/cdrom /media/cdrom
cd /media/cdrom
sudo ./VBoxLinuxAdditions-x86.run

If you haven’t already, you’ll need to shut down the guest to add a shared folder in the VirtualBox settings. From VirtualBox, click on the VM you want to set up, go to “Settings”, “Shared Folders”, and add a new share. Then, mount it with the following, where “yourshare” is the name you gave the shared folder.

mkdir /path/to/mountdir
sudo mount -t vboxsf yourshare /path/to/mountdir

Now you can just save your files into that folder and they will be shared on the guest as well. Eventually, when I get a new machine, I’ll try Vagrant again. This works excellent for me right now though.

Resources

  1. The commands to install Guest Additions came straight from Michael Halls-Moore’s blog.

Update

Instead of mounting the shared folder directly to the path you need it at, you may want to use a symbolic link to take advantage of the auto-mount feature of VirtualBox. When auto-mount is turned on, the folder will be mount in /media as the name you set it up as in VirtualBox, but it will have a prefix of ‘sf_’ in front of it. To create the symbolic link, you would run the following command.

ln -s /media/sf_yourshare /path/to/mount