Blog

Rants, raves, and geeky nonsense!

Assemble Static Site Generator

| Posted | Comments | ,

For about a week or so, I've been playing around with Assemble a Node-based static site generator that works for Grunt.js and Yeoman. So far, I have to say that I'm impressed. So impressed in fact that I ended up dropping Middleman, a Ruby-based solution that I had been using for the past year.

I've been wrestling with my web design workflow for a good year now and decided to revisit the tools I use for generating website prototypes. For the better part of this year I've been using a tool called Middleman to develop website prototypes. There are a number of static site generator solutions out there, many of which even have GUI's (i.e. Cactus, Hammer, Mixture). Sure, it may not have a GUI and requires knowledge of the command-line and Ruby, but what separated Middleman from the rest was the sheer amount of flexibility it brings. The thing that attracted me the most was the ability to use bits of Ruby to do pretty much anything I could think of inside of templates. That and the ability to use local data from JSON or YAML files to loop over data sets. The extensibility of it is just powerful and it really has helped to speed up the design and development of websites within my workflow.

Lately though I've been running into a few issues with Middleman. As much as I like it, the problem is that it's a Ruby app and, frankly, I'm not much of a Ruby developer. Also, Middleman has certain dependencies that conflict with some of the other frameworks I use. For instance, I use Bourbon and Bourbon Neat quite a bit, both of which use Compass and Sass. The problem is that Bourbon requires that a Sass gem of 3.3 or higher be installed, which conflicts with Middleman's own requirements. You can force Middleman to accept higher version of both Sass and Compass but I'm concerned whether I'll run into compatibility issues later one. This made me think that perhaps a Ruby-based solution isn't the way to go. Granted, if I was a Ruby developer this would be a non-issue.

After a bit of research, I decided to revisited Assemble, a solution that I briefly looked at some time ago but didn't give it much thought. Boy, am I glad I did!

Call me stupid but I always thought that Yeoman was more geared for web application development rather than website development. Because I spend most of my time designing and developing website I figured Yeoman would be overkill and never gave it much thought. But if you really look at the three core tools of Yeoman (Yo, Grunt.js, and Bower), you realize that it's not overkill at all. Yeoman simply isn't just for web applications. In fact, you can keep it as simple and slim as you want. Let's look at each of the tools...

Whether you're starting with a simple HTML5 boilerplate or using a framework like Zurb Foundation or Twitter Bootstrap, Yo is more than capable of scaffolding out an environment for simple web projects. There are official generators for just about every framework out there. If there isn't one, you can easily create one of your own for scaffolding out your own projects.

Grunt.js is just a task runner but a very powerful one at that. It's the tool that automates your workflow. It can handle everything from running a simple local server, compiling your SASS and CoffeeScript files, optimizing images, to building out your project.

Finally, you have Bower, a package management tool that speeds up the management of the various web application libraries you're likely to use. Just about every major framework and library can be installed and managed through Bower and makes updating them a breeze!

Throw Assemble into the mix and you end up with a very, very powerful environment for prototyping websites. Assemble does everything Middleman can do...and then some! And, unlike Middleman, the only dependency it has is Grunt.js. That's it!

As for templating, Assemble uses Lo-Dash templates for configuration and metadata and Handlebars templates for content. The syntax for both aren't hard to learn at all and offer a lot of flexibility. There's not a whole lot you can't do within templates.

Suffice to say, it looks like I'll be sticking with Yeoman and Assemble for the time being. At least until something better comes along! :D

A Lesson in Password Management

| Posted | Comments | ,

With the recent news of the Heartbleed Bug, I have begun resetting all my passwords for online accounts. In the process of doing so, the thought occurred to me that many folks have no idea how to properly manage their passwords. I’ve seen situations where many of my family members, friends, and clients use the same passwords over and over again for just about every account they have online…even for important accounts like their email, banking, and social media; accounts that, if hacked, would reek holy havoc on their digital life. If this is a problem for you too then hopefully this blog post will point you in the right direction in remedying this issue.

The key to keeping your online accounts secure is having strong passwords. However, even that isn’t always enough because a website can still get hacked if there is a vulnerability in the software. The main problem with the Heartbleed Bug is that you end up being vulnerable regardless of whether you have a secure password or not. The good news is that most of the major sites have already updated their servers with a security patch to fix the Heartbleed Bug (see The Heartbleed Hit List). Even then, there are thousands of other sites that haven’t been fixed yet. If you are unsure whether a website is effected by this bug, your best bet would be to simply notify the site owner and ask them, especially if this is for an online account that is important to you.

Aside from any vulnerabilities, the best way to protect yourself is to do the following:

  1. Use strong passwords
  2. Always use a unique password for each account
  3. Routinely change your passwords at regular frequencies

All of this may seem daunting. After all, what does a strong password look like? If you have to use unique passwords on every account, how are you going to remember them all? Not only that, but changing passwords take a lot of time, especially when you have to come up with all those unique passwords and record them for safekeeping, right? That’s where a good password management tool comes into play.

While there are a number of good password management applications, my favorite is 1Password by AgileBits. One of the reasons I like it is that, along with managing website passwords, it can handle other tasks such as storing credit card information, filling out registration forms, generating strong passwords, and more. And, because it’s cross-platform (Mac, Windows, iPhone, iPad, and Android) you’ll have access to all of your secure information wherever you go. It’s truly the Swiss Army knife of passwords and other secure information. With 1Password, you don’t have to remember all your passwords. The application handles all your secure information by storing it in a highly encrypted database that can’t be accessed unless a person knows the password to the database, thus the reason for the name of the application. You only have to remember the one password required to access your 1Password database.

If you’ve never used a password management program like 1Password, learning how to use it and getting comfortable with it might seem a little hard, which is completely understandable. Fortunately, AgileBits has plenty of online documentation and tutorials on their website. Along with that, ScreenCastOnline recently posted a free tutorial on how to use 1Password.

Because 1Password comes with a password generator, creating strong passwords is easy. Most sites will let you know what the password requirements are, which you can adjust the 1Password password generator to accommodate for. For sites that have little or no restrictions, I tend to crank up the password length all the way to 30 and set it to include at least three number and three special characters. The 1Password generator will give you an idea on how strong the password is with the strength meter.

Remember, the whole point of this application is to help you generate passwords that can’t be hacked easily. Let the program do the work for you and generate as complex of a password as possible that still adheres to the requirements of the site you’re generating it for. When creating a new online account or changing a password, try to use a different password for each account. The reason is that, if a hacker knows one password, they could potentially hack any account you have that uses the exact same password. Better to err on the side of caution and simply generate a different password for each online account.

I personally try and change the passwords for all my important accounts at least once a year. To aid in knowing which accounts to concentrate on, I created a number of folders in 1Password to help organize accounts by importance. I have a folder called ‘Accounts’ for all my important accounts like email, banking, shopping, and other accounts with highly sensitive information. This is the one folder that, when a major security issue occurs, I address first. Along with that, I have other folders separated by business, personal, clients, organizations, and miscellaneous. I always change the important stuff in ‘Accounts’ first followed by personal and business accounts.

I won’t lie, changing all your passwords can take time. However, a tool like 1Password greatly helps in cutting down time spent changing passwords. If you concentrate on the most important ones first then you can change others over time. 1Password does have tools that allow you to target accounts that have really old passwords. Once you get the hang of it, you’ll find managing passwords and other secure information with 1Password a piece of cake.

Got any other useful tips for managing passwords? Leave a comment in the comment section below! :)

UX of the Article Progress Bar on The Daily Beast Website

| Posted | Comments |

My wife showed this one to me today. While viewing and scrolling through the page, pay attention to what is happening in the "READ THIS.list" box on the right. Not only does it show which article you're on using a simple scrollspy indicator but it also tracks how far into the article you are using a gray indicator just behind the list item. This is a very interesting way of handling the navigation of large amounts of related content. It certainly adds to the user experience and is quite clever.

Now, some folks commented Reddit that this sort of feature just adds bloat and, while they might have a point, it's still a very clever and useful feature nonetheless. I think all The Daily Beast would need to do is find ways to optimize their scripts to cut down on the size and number of scripts loaded. I also agree with one commenter that features like this can definitely impact performance. For extremely busy pages with lots of features and scripts being loaded, I'm not sure if adding a feature like this is wise. Granted, this page loads and performs well for me...but what about others who don't have computers as fast as mine? Will they receive the same user experience?

This is a good example of how problems related to large amounts of content can be solved. However, it also reveals issues related to how bloated code can impact performance as well.

The Surprisingly Large Cost of Telling Small Lies

| Posted | Comments |

This New York Time article landed in my news feeds at a very unusual time. I don't think the timing could have been more perfect. Let's just say that some recent business dealing didn't turn out as rosy as I would have liked. I think the problem was exactly what this article talks about: a lack of honesty does nothing but ruin a good business relationship.

I try to always remain honest, transparent, and on the level with everyone I work with. What I didn't know, and what is perhaps the biggest lesson in business, is that not everyone I work with is honest with me. I learned a lot from the experience.

I value the relationships I have with my clients and partners. As such, moving forward, I will do my best to keep things as open and transparent as possible.

Mobile Devices to Boost US Holiday Ecommerce Sales Growth

| Posted | Comments | ,

According to eMarketer, mobile devices are expected to take up a 16% share of the total US retail ecommerce sales this holiday season. Man, that is freakin' huge! Basically boils down to this: If you're selling stuff online and aren't making it easy for customers to buy your stuff through their mobile devices then your sales wil be 16% lower than they could be. This is one of the big reasons why responsive web design is so important. You just don't know when, where, or how people will engage your websites. This is especially true for ecommerce sites...or mcommerce for that matter.