Category Archives: Web Development

Responsive Layouts with Stylus

Posted on February 14, 2013

When I tell people they should be using CSS pre-processors like Stylus, Sass or Less, I inevitably need to explain why. This can be tricky if you are talking to someone that hasn’t used CSS much. Typically, discussions evolve around variables and mixins, and usually that’s enough to interest people. More recently though, I’ve found that using pre-processors makes doing responsive design REALLY easy! I’ll focus on Stylus here, but the same applies to the other two as well.

Typically, when someone wants to make a responsive site, they start with a grid system, and their HTML ends up looking like this.

This is ugly, and a terrible reminder of the days of table layouts. Why should we mix all this layout logic in with our markup? Well, quite simply, we shouldn’t! Ideally we’d keep our concerns separated and keep this layout logic in our layout definitions; namely, in our CSS. But writing all this by hand is annoying. Enter pre-processors.

I’ve been using the Semantic Grid System lately and I really like the idea. You set your page width as a variable, column count as a variable, and use mixing to specify how many columns an element uses. So then we get back to something like this.

Now we’re getting somewhere! So what about responsive layouts? Well, the Semantic GS isn’t all that suited for the traditional responsive layout (that is, when you look at it on a phone, all “columns” become “rows”), but that’s not really such a bad thing. For me, I rarely want my mobile view to be a list of items, I still want some parts side by side. With some clever mixin and variable use, we can do this.

Here, I define variables for device display sizes and use those variables to control the size of elements on those screens. I also use the hideOn and showOn mixins to hide and show elements on a screen[1]. So now, when I view this page on a phone, the content is the only part shown and the sidebar is hidden. I can also use these to specify padding and the like for different displays.

1 This should be expanded to work with more than 2 display sizes, but it’s a working example

Why I Use Sublime Text

Posted on June 14, 2012

I’ve always been a vim guy. Try as I may, I just can’t get myself to like any full IDEs. I’ve tried large projects like Eclipse and Aptana and small editors like Blue Fish and even gedit, but nothing has ever made me leave the comforts of vim.

Despite my love for vim, I don’t think it’s perfect. I’d like something more like a desktop editor with the features of vim. My friends over at Cards.ly (R.I.P.) use Sublime Text 2 and I liked what I saw. Not enough to commit to switching, but I spent some time with it and liked it myself.

Then I bought a Mac. Why does this matter? Well, I never got used to navigating in vim with the letters and such, opting instead to use the arrow keys, as well as page up/down and and home/end. On a mac, the latter keys don’t exist, and I find getting the functionality painful. So there were two options; learn to navigate vim with the keyboard letters or switch editors.

I opted for moving to Sublime Text, partly because it looked really nice, partly because it would give me a unified, cross-platform editor, and partly because I knew I could enable some of the parts in vim I’ve always missed from other editors. So far, I’m sold. Literally, I bought a license and everything.

It wasn’t all cupcakes and puppies from the start though. For example, I blew away a directory with a mis-click (there’s no confirmation dialog?!). But I quickly got used to it and haven’t really looked back. I even forked the coffeescript tmbundle and got it working for in-editor compilation. Check it out!

Sublime is pretty usable out of the box, but there’s some things everyone will want to do before making real use of it. The biggest one is Package Control (#7 on that list). This will allow you to install bundles and plugins and such directly through Sublime. This will make i teasy to add functionality to the editor. For example, if you work in node.js, you probably use things like Jade and Stylus, and maybe you work in CoffeeScript. Sublime doesn’t give you syntax highlighting or anything for these out of the box, so you could go hunt down the stuff you need and install them by hand, or type in 1 command for each and have them working in a couple seconds.

That nettuts link above has a number of other nice things you can do, but I honestly haven’t done most of them. For me, Package Control, the Made of Code theme and some personal settings tweaks and I’m ready to roll. It’s a great editor and it’s very easy to get used to. If you’re unhappy with your current setup, give it a shot, it’s free to try so you’ve got nothing to lose.

Slim-Jade, A Light-Weight PHP Framework Using Jade

Posted on March 29, 2012

Recently, I put together a landing page for an idea I had to try and test whether or not it was viable. I drove traffic to the page with Microsoft’s AdCenter, tracked clicks on some categories and tried to get people to sign up for a mailing list to be informed about when the service goes live. Nothing too mind blowing, but it was both fun and educational.

At the time, I had just started working with Node.js but wasn’t really proficient with it. I needed to put my landing pages together quickly, so rather than spend time beocming proficient, I decided to create the landing pages in PHP, a language I’d been using for the last 5+ years. Having used Express and falling in love with the Sinatra style, I decided to check out Slim. Having also used Jade with Express, I didn’t want to write HTML anymore.

So what to do? Simple, combine the two! After finding an existing Jade parser for PHP, I spent some time learning how views were rendered in Slim. Later that day, I had a working landing page running on Slim and using Jade to render views.

And how’d it work out? Pretty well. Slim is pretty quick, and as I already said, I really like the Sinatra style design. And of course, writing all my markup in Jade (and using Stylus for my css, albeit not automated) was pretty much everything I had hoped for. If I do future PHP development, this will most likely be my setup of choice.

Check out Slim-Jade; fork it, edit it, and most importantly, let me know what you think!

Validating Startup Ideas

Posted on January 6, 2012

About 2 months ago, an article came across Hacker News about how to quickly validate startup ideas. The idea is basically as follows:

  • Identify a potential problem you’d like to solve
  • Create a landing page that states the problem and that you have the solution
  • Give little or no insight in to your solution, just that it works
  • Collect email addresses on your landing page
  • Run ads tailored to your idea and landing page
  • Tweak as needed to get conversions (sign-ups)

Continue reading →

Ubuntu, Node and Heroku

Posted on November 3, 2011

I recently started playing with Node.js, and while I can play locally just fine, I wanted to make sure I had a place to host once I had something worth hosting. Enter Heroku. Why? Because it’s free to host until you draw some real traffic, it has a really cool addon service and I knew other people using it so I could turn to them if I had problems.

In order to get your application on their service, you need to install their command line tool, which requires Ruby. No problem, just install it all with apt-get and you’re good to go, right? Short answer, yes. Long answer, No. You’ll be using an unsupported version (the version of ruby in the Ubuntu repos is aged), so while it might work now, it may not in the future. If you do like I did, you’ll also end up with 1.8 and 1.9 on your machine, and while that didn’t cause any problems, it seemed silly.

Poking around, I found this article which lays out how to use RVM to both install a newer version of Ruby as well as easily update it in the future. So, here’s the whole shebang:
Continue reading →

Serving Files in Internet Explorer over HTTPS

Posted on May 11, 2010

I recently came across a problem where serving a file to Internet Explorer would result in the following error message.

This affected IE6, IE7 and IE8 in my testing. The way I was serving the file was through PHP via readfile. Before sending the contents of the file, I was, of course, setting some header parameters so that the browser would handle the file and the user wouldn’t just see some binary garbage on their screen. In my case, I was serving a PDF file that was being generated server-side and sent to the client. The basic header parameters are as follows:

// We'll be outputting a PDF
header('Content-type: application/pdf');
// It will be called your_file.pdf
header('Content-Disposition: attachment; filename="your_file.pdf"');
// declare Files Size here (for the sake of peoples sanity, please add this
header('Content-Length: '.filesize($filename));

This works just fine in most situations, but once you introduce a secure connection, IE fails with the above error. Of course, like most IE problems, this doesn’t happen in any other browser. Ugh.
Continue reading →

Asynchronous PHP

Posted on October 16, 2009

I needed to “asynchronous PHP” recently and it took me a little while to find the solution. What my script basically does is generate a PDF file for the user to download based on some parameters they have chosen. The problem was, the PDF generate take a while and during that time I needed to show the user a screen explaining that the file was being generated, which would also show the download link once the generation was complete. My setup is as follows:

generate.php

This script is where the user is sent when they click “download” on the parameter choice page. This is where the asynchronous magic has to happen. From here, the user is immediately sent to download.php.

download.php

This script gives the user either a “please wait” message of a “click here to download” message, depending on where the target PDF has been generated yet.

My problem was, even though was added the header redirect code (shown below) to generate.php, the browser would still wait for the PDF to be generated before sending the user to download.php. In other words, it was only synchronous PHP, which didn’t help me at all.

header("Location: download.php");

Thanks to this comment on php.net, I was able to make it work! Basically, you need to tell the browser that you are done sending it data, even though the PHP script will keep executing. Code below:

//redirects the browser to the new url, but continues processing in the background
function redirect_and_continue($sURL) {
header( "Location: ".$sURL );
ob_end_clean();
header("Connection: close");
ignore_user_abort();
ob_start();
header("Content-Length: 0");
ob_end_flush();
flush();
session_write_close();
}

So, the user is sent to generate.php, which immediately calls redirect_and_continue(‘download.php’), redirecting the user to download.php while still continuing to execute generate.php (and make the PDF file). Once the user is at download.php, the script checks for the existence of the generated PDF file (as indicated by the filename sent through the session) and uses a meta refresh tag in the HTML to keep reloading download.php. Once the PDF file exists, it provides the user with a link to the PDF file for download.

Building a Better CAPTCHA

Posted on January 3, 2009

CAPTCHAs can be good for stopping SPAM, but the last thing most of them are are usable. Don’t take my word for it, it’s a fact. One of the coolest ideas I ever saw was a HotOrNot mashup where you had to pick the three best looking ladies to prove you are a human. It was both usable and easy for a normal person, like my Grandparents, to use. That’s pretty unique and hard to come by, and that’s why I liked it.

One of the other easier CAPTCHAs I’ve used at work is a little dynamic images that asks you to do a little simple math. It’s an idea I saw on another site so I thought I would give it a try and it’s been extremely effective despite it’s ease of being broken. Surprisingly, it has completely stopped all SPAM coming through our contact form.

Another one I tried, much less effectively, is a colored word and a dropdown with a number of colors to choose from. It literally asks “What color is this text?” and offers a number of possibilities. This, however, was not effective for more than a week or so. The form still sees about one or two SPAM messages a day, which is especially strange because it’s a site that sees far less traffic. I think if I added more colors that weren’t even valid selections and changed the order it might be more effective, but I still need to find something better.

I’m thinking a system that would show three images and ask which one doesn’t belong could be usable, but it’s a little more difficult to implement; where do I get the images, how do I randomize the data, etc. I really like the HotOrNot CAPTCHA because the images always change and all of the images and data are crowdsourced, nothing for you to manage.

So, what can one do? Sadly, I don’t have an answer, but there is a lot of work being done on the topic. I think I need to just keep looking and mull this all over for a bit. We’ll see what I can find or come up with.

Drupal’s On Hold

Posted on November 17, 2008

I know I said before that I would be replacing WordPress with Drupal around here, and I did start working on that. However, the more I read about Drupal, the harder it seems to do custom things. Actually, it’s more a problem of poor documentation than it is a lack of flexibility. Still, if I don’t know what I’m doing, it’s hard to learn anything.

Granted, I could easily replace WordPress for the sake of my blog here (and probably still will at some point), but that’s not why I was planning to learn it. I wanted something that would allow me to crank out new pages quickly without constantly restarting from scratch. I do have a very weak framework I’ve written to try to achieve this, but every time I start a new site, I feel compelled to re-do at least part of it, so in the end I don’t save any time. In fact, I lose time because I have to re-learn the changes I made for each site when I need to maintain them.
Continue reading →

Farewell WordPress

Posted on August 18, 2008

In an effort to save time when I put together sites for people, I’ve been working on a universal engine I can use. It is modeled loosely off the MercuryBoard code and, for the most part, has served me pretty well. Recently, I’ve tried to revamp it with more object oriented code, integrating PEAR and a few other niceties. Still, the more and more I use it, the more I realize it saves me very little time. In fact, it actually costs me time when I have to go back and update the sites. It seems, sadly, the idea of a flexible CMS or framework is just too abstract for my skills.

I’ve spent some time reading about Symfony, which looks like an amazing project. I’m positive I can make it do anything I would need, but the learning curve is pretty steep and I’m worried that the time I’d take to learn it wouldn’t really pay off in the end. I like a lot of the concepts, but I’m just not completely sold on it.

So what does that have to do with WordPress? Well, I’ve recently revisited a project that I spent some time with in the past but never really did much with. That project is Drupal.
Continue reading →