Responsive Tables

I recently discovered Flexbox, and I’m glad I did. Alignment issues are all but eliminated which makes developing complex layouts more enjoyable and a lot faster. I used it on a recent website project to create a simple responsive grid and other layout containers  That was exciting enough, but the real breakthrough came when I had to put in a pricelist.

The best presentation for the information was a table. Tables get a bad reputation, but they are really good at displaying grids of information. They do, however, suck at being responsive – or so I thought.

The solution I used isn’t perfect. But it was fast, easy, and worked perfectly – I simply turned the appropriate table elements into flex containers when the screen got too small to display the table, and let Flexbox deal with everything!

There’s not much too it. Step one was turning the table, tbody, and tr elements into vertical flex containers. The td elements became horizontal flex containers with spacing around the inner elements, and that was it. The table responded to the change in screen size perfectly with a single column of stacked cells.

Only one problem remained: the table headers, although stacked in a neat column, were at the top of the table. Not cool – you don’t know what the data means once you scroll down. I decided that some extra markup, hidden by default, was the best way to go. So I put a span into each table cell and the span contained the heading of the column. When the table gets skinny, the thead is hidden and the spans are displayed. The result is a stack of cells, each containing a label and the associated data.

Even though this works well, it has some issues. The main problem is the duplication of header data. I have seen other solutions that use :before selectors in CSS to put the headers in, but now you’re putting content into your CSS and that doesn’t feel right. It also makes generating dynamic tables harder because you need to generate the CSS as well.

At the end of the day, I got a responsive table with very little effort. I think the principle is sound and once we get a solution to the duplicated headers it’ll be the dawn of a new era… or, you’ll have more fun building websites and that’s always good!

Writing Makes You Think

Last night I tweeted an article about how writing makes you learn better. My experience isn’t so much with learning, but with organizing thoughts and problem solving.

When I have an email to write that is either full of many interconnected ideas, or is sensitive in nature, I reach for the pen and paper. The mechanics of physically writing the words are slow enough to allow my brain time to contemplate the larger point I am trying to make. Very rarely is my handwritten version typed verbatim; the published version is more succinct and concise. Fewer words mean less chance of misunderstanding, and this is critical when the wrong word can cost tens of thousands of dollars.

I also reach for my pen when I have a tough problem to solve. Trying to write a summary of the problem forces me to rethink the problem, and I usually don’t get the summary written down before I have a solution. This happens because I am forced to slow down and think about what I’m trying to convey.

The next time you find yourself in one of these situations, pick up a pen or pencil and start writing. The few extra minutes you spend organizing your thoughts will pay dividends in the long run.

(And yes, this post was drafted with pen and paper.)

Even Easier Writing?

It’s been a while since I last wrote about writing. Here I am again, and I’ve found a new tool to make it even easier to get my writing online. As you know, I like actual handwriting, using a pen on paper. I then realized that tablets allowed me to write with a stylus, getting unlimited room to put down you thoughts. This is great, but it still has the drawback of being script on a page.  It’s not searchable, people can’t read the scrawl… What I really want is handwriting recognition so I don’t need to re-enter my work.

Since iOS 8 this is now a possibility. I’ve found a handwriting recognition keyboard called MyScript Stylus.  There are no letters to tap – the keyboard is replaced with an area where you can write or print. It’s beautiful.

I said I’d write more in the future, but I’m not making any more promises :-) This sure does combine the best of both worlds though, and it might be easier to get writing.

The Joy of Writing

I recently picked up an iPad mini to replace my aging iPod touch. I thought that the larger screen size would allow me more freedom for reading, typing, and general usage. The larger size is both good and bad. It is harder to carry around because it is bigger, but that extra screen size allows me to do something I never considered before: write.

I don’t mean just typing, or writing in the sense that you are creating words. I mean handwriting, with a stylus. It is not a new idea by any means, but it a revolutionary idea to me. I’m a little sad that it took me so long to discover, but now that I have found it I feel like doing more writing. I don’t think I’m going to try and say anything too profound; I just need to get the words out.

I’m looking forward to putting up a few more blog posts. I think I’ll start with why I love my iPad and stylus, and then see where it takes me. Talk to you soon.

Let the Computer do Your Dirty Work

You know those tasks that you have that keep coming up? The ones that are long and boring where you do the same thing every time? Maybe you have to do them every week or month. Or worse, maybe you have to do them every day. There’s a good chance that task (or process) can be automated. Let’s take a look at how and why you should automate your processes.

What Is Process Automation?

Automating a process is taking steps performed manually and turning them into code so the computer can do them. That’s pretty much it.


Save time – If your process has 8 steps and each takes 1 minute, the time taken is 8 minutes. It’s a pretty good bet that you can take those 8 minutes and turn them into seconds. We recently took a client’s 3 hour process and reduced it to 5 minutes.

Reduce Errors – Computers are good at doing the same thing over and over. If you give it the same input, you’ll get the same output. Computers don’t make errors because they’re tired or because they forgot what they are doing before they went for lunch. Having your process automated means you’ll get the same consistent result each time, without errors.

Save Money – There is a small up-front cost for the development of the automation software. However, this cost is saved many times over once the software is used regularly. Using our client as an example, she’ll save almost 3 hours of expense per week by automating her process. Those 3 hours can now be used to create more product. This doubles the value of the time saved. Put another way, the time and effort that would have been wasted as expense can be used to create profit.

Take a look at the things you do. Ask yourself if you could benefit from automation. More likely than not the answer will be yes.

No decimals in MySQL!

I ran into a snag the other night when running my Rails migrations on my production MySQL database. None of my decimal columns had any scale (decimal places)! This problem didn’t happen in development running sqlite.

I fixed it by running another migration that specified the precision and scale for each decimal column. However, I haven’t worked out the best way to deal with this. I’ll probably switch my development db from sqlite to MySQL, but how do I verify the columns are correct? I could write a test for each model that validated each value had decimals after saving, but then I have to remember to update the test when I add or change a column. I could query MySQL to get the column type, but that will only work for MySQL. There doesn’t seem to be a way to get the metadata from ActiveRecord, but I’ll have to look deeper.

Suggestions are welcome. When I finally do get something figured out, I’ll update this post.

Avoiding Memory Issues with Virtual Machines

In my last post I discussed a few advantages of using virtual machines for development. This post deals with a huge downside – memory usage.

When you run a virtual machine you’re running two operating systems (or more) on your hardware – the guest and the host. Both require resources just to be active. If your hardware doesn’t have enough memory to run both operating systems, you’re in for a world of hurt as the host will be constantly paging to try and keep up.

There are a couple of ways to mitigate this problem. Obviously you can just go and buy more RAM. More memory for the host means that you can allocate more to the guest. Not a big deal if your hardware is new and you can still get memory for it. The next obvious thing is to run your host as lean as possible. Close your email, your music player, twitter, etc to free up some memory. After this you should try and tidy up what you’re running on the guest. Only run the programs you absolutely need to be running in order to keep paging low.

One more thing you can do to trim your guest memory footprint is to avoid using the piece of the OS that takes up a large chunk of resources: the windowing system. How do you do this? With Linux, runlevel 3 is everything but the GUI, so that’s the first step. A quick search for how to do this with your distribution will bring up all kinds of resources. After you switch your runlevel your system will boot with a command prompt only.

From there you can use x-forwarding to do your work. In short, programs are run on the guest  but the GUI is displayed on the host. Thus, there is no overhead on the remote machine for the window environment and you can use allocate less memory to the VM and get the same performance. (This isn’t limited to VMs; you can use XForwarding on any two computers connected to a network and have the appropriate software.)

There was no configuration needed on my setup. My guest is CentOS 6 and my host is OSX Lion. I booted the VM, then started a terminal on my Mac. In the terminal I typed the following:

$ ssh -X ryan@myvmname

This sets up an x-forwarding session. From there you can run your favourite windowed programs, such as emacs, vim, jEdit, add/remove programs, etc. I won’t go into any more detail here because there isn’t any; if your setup is different there will be resources online to help.

Using this setup we were able to cut the memory allocation of the guest in half with no change in performance. It’s a pretty simple way to get the advantages of all Linux has to offer with the convenience of your favourite desktop.

Developing with Virtual Machines

Using virtual machines for development provides a number of advantages over setting up environments directly on your laptop or desktop. I’m running CentOS 6.3 in VirtualBox, and I’m going to give you three reasons why I prefer developing this way.

Security Blanket

Virtual Box lets you take snapshots of your VM at any time, even when it’s running. I usually use this feature when I’ve gotten some weird configuration working, or I’ve done system updates. This gives me the ability to go back to a known good state if something goes wrong. I will also take a snapshot of my system before I try a potentially risky spike or upgrade. That way if things don’t go as planned, I simply revert to the snapshot I took when everything was working – no reinstalls or reconfiguration are necessary.

System Portability

There’s a feature in Virtual Box called Export Appliance. This creates an industry standard disk image that most virtual managers can import. I like to think of snapshots as an incremental backup and appliances as a full backup. I’ll install an OS, run the updates, install the tools I need, and make any configuration changes (taking snapshots along the way!). Once everything is ready, I can create the appliance and send it to others so they can import it into their virtual manager and have a development-ready OS up and running in under 5 minutes.

One Host, Many Guests

The physical machine you have is your host (your laptop or desktop) and the VMs that you have on your system are the guests. You can have as many different guests as your hard drive space will allow. You might do this if you like CentOS for PHP and Ubuntu for Rails (or vice-versa). You might also do this if you wanted to have a separate VM for each of your clients (which is really easy when all you have to do is import the appliance again). This ensures you don’t mess up one client’s environment while you’re upgrading something for another.

There are a few drawbacks to running VMs for developing, but the ones I’ve come across are pretty insignificant compared to the benefits mentioned above. In my next post, I’ll describe how we got around our main problem with running VMs on a laptop: memory.

The Purpose of a Web Application

In the previous post, I gave some background on what a website is and why you might want to have one. This post describes another useful addition to your arsenal – the web application.

Web applications (or web apps) are programs on the internet that can be accessed in web browsers (Firefox, Chrome, Safari, IE, etc). These programs can provide any kind of functionality that you need to help your business or organization run more smoothly. Some examples of web apps are product catalogs, search engines, project management tools, web mail, and the list goes on and on.

Web apps are very dynamic. They allow users to interact with your data to get the exact information they want. They are also very good at automating day-to-day tasks. Imagine a system that lists your inventory, shows related parts for a chosen item, and allows a user to order a part and have it shipped, all automatically. This site would automatically update for people as they used it – the number of parts in the system changes as the number of parts grows or shrinks. Keeping a static web site up-to-date with inventory, counts, orders, etc, would be so much work that it borders on impossible.

The key to a system like this is the database. A database is a place to keep your data, and is (usually) centrally accessed. This central access to data gives everyone the same view of the system (that there are no more replacement blades available, for example). Based on the data that is retrieved from the database, the web app chooses a course of action. By merging the dynamic abilities of the web app with the data storage/searching abilities of the database, you can create some very efficient and time-saving apps.

Web apps don’t have to be accessed by your customers. If you belong to an organization that has annual sign-ups, a web app can help store the registrant info and eliminate the hassle of a secretary entering data off of paper forms. The web app can show which classes are full and not allow any more registrants  for that class. Reports can then show how many sign-ups you have, how many girls vs. boys, and how much money you (should) have taken in. These reports can then be supplied to your governing body, if required. All of this comes with no extra effort on your part because the data that drives these reports is in your central database, and just needs to be accessed.

Web apps are pretty amazing. They can do anything you need them to. Because they are accessed over the Internet, anyone with a browser can use them. And because they are accessed in a browser, they integrate seamlessly with your web site. Most websites have a web app component for support questions or product catalogs.

Do you need a web app? That depends on a lot of things. Generally, if you have a process to automate or data to share, you could benefit from the advantages that a web app can offer. Consider the following questions as a starting point:

  • Do I have processes that could be automated or simplified?
  • Do I have data that should be centrally located so it is easy to share with others in my organization?
  • Do I need to periodically report on data that I accumulate?
  • Do I want/need to keep a closer eye on my inventory?
  • Do I want my customers to see that inventory?

In summary, web apps are great tools that integrate into your web site and save time and money.

The Purpose of a Website

Welcome to the Evening Design blog! My initial post discusses the purpose of a website.

What a Website Is

Your website is your little space in the online world where you get to showcase your brand. It’s your stake in the sand that declares “This is what I do!” or “This is who I am!” It’s the place where you tell people how your company got started, how they can contact you, and where you put your catalog/price list/menu. It’s where you share your poignant bloggable thoughts that enhance the depth of your offering. Your website has all the information about you or your business that people need to know.

Why You Need a Website

You put this information on your website so it becomes the one place that people go to learn about you. Your tweets, business cards, flyers, and Facebook status updates can only provide a limited amount of information. Your website is the information source that these social avenues lead back to so that people can explore and discover more about you or your business.

If you are looking to have an online presence or want to tweak your existing site, let us know, we’d love to help you come up with a solution.