Building Web Fish Daily

Web Fish Daily logo

I recently launched a new site: Web Fish Daily. It is, more or less, a curated selection of front-end web dev links, updated daily, wrapped in a simple and friendly presentation. I figured it would be a great way to stay on top of things and help others do the same. Besides that, I just had the itch to take on a new side project and play with new stuff. In that regard, huge success!

KeystoneJS

Web Fish Daily runs on KeystoneJS, which is powered by Node.js and MongoDB. In a nutshell, KeystoneJS is a CMS platform that serves as the glue holding everything together.

Setup was fairly easy. Install the prerequisite Node.js and MongoDB, run the Yeoman generator, and you’ve got a great sample app to pick apart. KeystoneJS prefers Jade and Less out of the box, but I opted for Handlebars and Sass without issue. It also comes pre-baked with Bootstrap, if that’s your thing (it was overkill for me, so I simply removed it).

KeystoneJS does a lot for you. For example, here’s the data model I use for announcements on Web Fish Daily:

From that, KeystoneJS will set up the collection in the database and give you a full admin interface (create, read, update, delete, list) to work with it. Massive time saver.

Web Fish Daily admin UI

If you need a highly customized admin UI, or multiple user accounts with different permissions, then KeystoneJS probably isn’t for you. But for basic CRUDL, the ease of development is a huge plus.

OpenShift

This project was all about trying new things, so I passed on the old-school shared hosting I typically use and went with OpenShift, a PaaS (platform as a service) solution.

The basic concept revolves around “gears”. You get 3 gears for free and can buy more if needed. Want to run Node.js? That’ll cost you a gear. Need MongoDB? That’s another gear. Jenkins for continuous integration? Actually, that one’s free. You can also spend gears to add memory and disk space. It’s fun in a way, but it also feels a lot more practical. You buy exactly what you want, in quantifiable pieces, with the freedom to downgrade or upgrade as needed.

OpenShift add cartridge

There’s a web interface for administering your web apps, but you also have full command line control via the OpenShift client tools. This is great for scripting tasks or automating maintenance.

OpenShift also integrates with Git, making deployment super easy. With a little help I was able to reduce my deployment process to a single command:

Other Bits

Web Fish Daily shows a live countdown for when new links will be published. Simple idea, surprisingly difficult to do. In a word: timezones. It took a lot of planning to coordinate my development machine (PST), the production server (EST), dates and times stored in the database (GMT) and visitors’ computers (could be anywhere!). I couldn’t have done it without Moment Timezone.

This is the first site I’ve made without any raster images. It’s all Font Awesome scalable vector icons, SVG, and CSS.

Big thanks to Joni Trythall for creating the fishy mascot for Web Fish Daily. It turned out great and really helped deliver the friendly vibe I was aiming for.

Thanks for reading. Follow @WebFishDaily if you want to keep in touch with the project. If you want to contribute links to be featured, send them to webfishdaily@gmail.com.

Git Stash is Your Friend

This is a quick how-to guide on git stash and why it’s awesome.

git stash is a super easy way to, well, stash local changes you haven’t committed yet. Stashes are kept safely tucked away, letting you do other things. This is incredibly useful for reasons I’ll get to later.

Using Git Stash

Stashing is easy:

You can have multiple stashes saved at the same time. To see a list of all your stashes, run:

And you’ll see something like this:

As you can see, each stash gets its own designation, which you can use to restore a particular stash:

If you ever decide you don’t want a stash anymore, you can drop it:

The stash list operates as a stack. The most recent stash is always stash@{0}, second most recent is stash@{1}, and so on. Because of the stack nature, you can also use the shorter commands git stash pop and git stash drop, which will apply and drop the most recent stash, respectively.

One more thing: you can type just git stash and it will use the last commit message as the stash description, which probably doesn’t describe your stash at all. Useful for a quick temporary stash, but confusing otherwise.

Why It’s Awesome

So what can you use git stash for?

  • Obvious case. You’re in the middle of something and an urgent issue pops up. Stash your work in progress and get to work on the urgent issue.
  • You need to move your work in progress to another branch. git stash, git checkout otherbranch, git stash pop.
  • Something just broke on your dev box and you’re not sure if your new code is causing it. git stash, test code.
  • Or sometimes you just have a little code experiment you want to keep local, not quite worth creating a branch for. Keep it stashed.
0 comments » Related topics: