anotheruiguy’s gists

Web fonts are pretty much all the rage. Using a CDN for font libraries, like TypeKit or Google Fonts, will be a great solution for many projects. For others, this is not an option. Especially when you are creating a custom icon library for your project.

Rails and the asset pipeline are great tools, but Rails has yet to get caught up in the custom web font craze.

As with all things Rails, there is more then one way to skin this cat. There is the recommended way, and then there are the other ways.

The recommended way

Here I will show how to update your Rails project so that you can use the asset pipeline appropriately and resource your files using the common Rails convention.

Run the following steps inside a clean directory

Not sure if you are in the same boat as I, but I could not find any good resource out there that pulled this all together. So here is a step-by-step tutorial for creating a Node.js app from scratch, adding in Grunt and then Node-Sass. Yeah, try and find good docs on Node-Sass alone :(

Hope this is of help!

Create your Node.js project

npm init - create a clean node project
NOTE: be sure to add "private": true, to the package.json so that your project is not globally distributed as a npm app

I admit it, I have a print background. As much as I try to leave that all in the past, it always creeps up and bites me in the ass.

Pixel based image asset management is a mystery to many in print and in the new purely digital world. What constitutes a quality asset file to be reproduced? In print there are clear rules, but in digital display, there are many other variables at play. This post is a description of my journey in finally figuring this out.

The principals of an image

With every image, regardless of intended output, it has three primary attributes; pixel width and height, physical width and height, and dpi. Of course there is color space, color profile and a few others, but that is outside the scope of this discussion.

Images and print

Forked from @HugoGiraudel

See the code in action on SassMeister

8674490

Aparently you can't keep a good guy down. At the behest of the public, Jed Foster, the man behind Roughdraft.io and Sassmeister.com came up with a new feature that really brisges these two apps together. The new <sassmeister> tag gives users the ability to directly embed a SassMeister gist right into the blog post.

And this is not limited to only your gists. Let's say, for example, that you come across this amazing new Gist that some briliant developer came up with and you really want to talk about it. Let's take the @function color-diff Gist built by HugoGiraudel. Simply put <sassmeister>8668994</sassmeister> in your markdown file and BOOM!

8668994

And there you go. Roughdraft.io, one of the easiest blogging platforms on the plannet. Add a .md. gist to your Github account and you are pubslishing. Pretty cool!

Having spent the vast majority of my career in the front-end space, there has always been a thirst for better processes and management of resources. For those who have long histories with HTML and CSS, you remember the days of keeping folders of code snippets, our personal library of sorts, the cool code we wrote and wanted to have at the ready for our next project.

Sure there were desktop apps that tried to manage this for us, journler was my tool of choice back in those days. I have also seen some use Google Docs and other document and snippet managers, but they never really worked. And let us never forget all those really crappy websites that were supposed to be our saving grace. In the end, managing assets on the front-end has been nothing but a total fail.

Life meets Ruby, boy meets Git

When I began working with a Rails team, I was introduced to better solutions for managing libraries of reusable front-end code. Not to mention, this was my first exposure to Git and Github

Here is a quick rundown without all the typical blah blah blah ...

Create new snippet

Create a new snippet, go to Tools > New Snippet

This step creates an empty file for you to enter your new code snippet into. It should look like the following:

<snippet>
  <content><![CDATA[
Hello, ${1:this} is a ${2:snippet}.

Or Bash to the UNIX kids

If you are reading this, you have been introduced to something called the Terminal on your Mac by one of your overly pushy developer friends/colleagues.

I am thinking that the conversation went something like this?

You: How can I get to that file?

Them: Just open Terminal and then $ cd ~/Projects/boilerplate/ && vi .gitignore

	// ----
	// libsass (v0.7.0)
	// ----

	// Where extends go wrong in libsass

	// In the following placeholder selector, all the selectors are created as
	// such using the % syntax

	%default-parent {

	<button class="image-stack"></button>
	<button class="home"></button>
	<button class="select-image"></button>
	<button class="launch-camera"></button>
	<button class="my-location"></button>