anotheruiguy

Sass 3.3 is out and you should start using Maps.

Using variables in Sass has been a core feature for years now. We have all used them to endless exhaustion and we have all seen things like this:

// establish a core color
$bravo_gray: #333;

// assign core color to semantic variable
$input-disabled-color:          $bravo_gray;

anotheruiguy

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

$types: positive negative passive aggressive;
$length: length($types);
$type-width: 20px;

@while $length > 0 {

anotheruiguy

// ----
// Sass (v3.3.4)
// Compass (v1.0.0.alpha.18)
// ----

$beatles: John Paul George Ringo Fifth;

@mixin the-beatles {
  @each $beatle in $beatles {
    $lc-name: to-lower-case($beatle);

anotheruiguy

%h1
  MMMMMMMMMM

anotheruiguy

.block
  Hi, I am responsive!
  
.hard-width-800
  this is 800px wide, I am not ;(
  
.hard-width-600
  this is 600px wide, I am not ;(

anotheruiguy

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

anotheruiguy

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}.

anotheruiguy

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

anotheruiguy

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

anotheruiguy

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!