Show Me Some Sass! (and Jade)









“Do you even Jade, bro?” – Travis Neilson

So I’m three weeks into Orange County Code School and things are starting to pick up with building websites. We’ve basically finished learning HTML5 and CSS3, and we’re two days into working on our first project. My project is TravelGram – An Instagram photo browsing website for travelers who want to explore a location before going there.

But that’s a post for another time.


Anyways – so I’ve been browsing some job postings to get an idea of what skills/technologies the job market wants and I’d been seeing Sass and Jade  mentioned in some job postings. I was curious so I decided to try them out in building TravelGram.

Sass is a CSS preprocessing scripting language that is interpreted into CSS. It allows for some really useful things like setting variables (example: setting and using $primary-green is a lot easier than typing #4BBFBB), and also nesting CSS selectors. There are other things like Mixins and Partials that I haven’t tried using yet.

Jade is a templating engine language that allows writing of HTML templates. (Okay, that doesn’t really make sense…). Basically you can write script that is interpreted (is that the right word?) into HTML. Jade allows you to write really clean syntax instead of having to sift through a bunch of <opening> and </closing> tags. It also Mixins and Extends that I haven’t tried using yet.

I’ve included a picture of of my index.jade and default.scss from TravelGram below.

Screen Shot 2015-11-19 at 9.07.27 PM




So far it’s been awesome using Jade and Sass – it’s really cleaned up the HTML and CSS that I write, which makes it easier for debugging.

It’s late and I gotta sleep, so until next time!

Read More

Playing Around with CSS – Transparent Nav Bar

We’ve finished our first two weeks of class, and it’s been a great experience so far. I definitely feel a lot more comfortable creating things with HTML and CSS. I had some background in being able to read HTML/CSS since I dabbled in SEO and UI design in the past, but being able to create things from scratch is a load of fun! I found that the first two weeks of the course were manageable, though there were definitely days when I went home completely brain-exhausted, but I guess it’s called a bootcamp for a reason!

Going into next week will be a bit daunting since we’ll be getting into Javascript. I tried to do as much prep work as possible through Codecademy, etc etc, but I’m sure it’ll be another brain workout. Pretty excited though!

I wanted to show off this little fixed navigation bar that I created with HTML and CSS. I’ve been having fun adding in some subtle animations and touches.

  • subtle box-shadow on the white navigation bar to differentiate it from the body
  • breadcrumbs underline on  the Home link, to show where the user is
  • :hover and transition on the green underline for navigation links
  • :hover and transition outline on the text/password boxes
  • box-shadow on the text/password boxes on :focus
  • autofocus on the username box on page-load for simple user-experience streamlining


See the Pen jbdOMX by Duncan Leung (@duncanleung) on CodePen.

Read More

CSS Margin Collapsing Quirk

Learning new CSS things (aka. quirks) each day – though sometimes in very frustrating ways =p

I was working on a design and was having an issue where my divs were flush-up against the parent section, despite the fact that I had defined a margin on my child div. Basically, my margin:top was not showing up at all! After doing some research, I found out that margins will collapse when they’re adjoining!

8.3.1 Collapsing margins

In CSS, the adjoining margins of two or more boxes (which might or might not be siblings) can combine to form a single margin. Margins that combine this way are said to collapse, and the resulting combined margin is called a collapsed margin.

Two margins are adjoining if and only if:

  • both belong to in-flow block-level boxes that participate in the same block formatting context
  • no line boxes, no clearance, no padding and no border separate them
  • both belong to vertically-adjacent box edges, i.e. form one of the following pairs: top margin of a box and top margin of its first in-flow child


The solution to force margins to not collapse into each other:

  • Floating either of the div elements
  • Making either of your div elements inline blocks
  • Setting overflow of the parent section to auto (or any value other than visible)


Read More

CSS Precedence and Specificity

CSS precedence and specificity is going to be a concept I’ll have to work through in my head. The general concept of CSS is that defined styles will be chosen by precedence of whichever is is defined last (aka. whichever is last in the cascade – I guess it’s called Cascading Style Sheets for a reason =p).

In my prior copy/paste and hack/slash exploration into CSS, I’ve always been confused about why some styles aren’t changed when I try to define them.

I found this pretty helpful article on CSS-Tricks that sheds some light on the concept of specificity and precedence of CSS.



Briefly (you can read more at the article linked above):

  • If an element has inline styling, it automatically gains the most specificity (1,0,0,0 points)
  • Each ID value, applies 0,1,0,0 points
  • Each class value (or pseudo-class or attribute selector), applies 0,0,1,0 points
  • Each element reference, applies 0,0,0,1 point.


Read More

CSS Selectors: Tag Qualifying vs Child

More interesting concepts that I’ve come across while working through exercises. We’re learning about images and filetypes for images. I wanted to play around with CSS selectors to resize my image, and I was just not able to do it. Frustrating!

<img class="large" src="storm-trooper-960x768.jpg" alt="Storm Troopers In Suits Image">

img .large {
 width: 1920px;
 height: auto;

I realized after that there’s a difference between img .large and img.large. That space actually means something – whoops!


“Select any element with a class name “large”, that is a child of any img element.

img .large
I read and found that a space in a CSS selector has the special meaning. The selector that occurs to the right of the space is a child of the part of the selector to the left.


“Select any img element that has a class name of “large”

This type of selector is called: tag qualifying. It will select only <img> elements with a class name of “large” and no other elements.

Apparently it’s also an inefficient way of selecting elements, so generally – don’t use tag qualifying selectors! Read more at: CSS-Tricks


My code should look like this in the end:

<img class="large" src="storm-trooper-960x768.jpg" alt="Storm Troopers In Suits Image">

.large {
 width: 1920px;
 height: auto;


Read More

Add Home Directory and Macintosh HD to Finder Favorites

Having shortcuts in your Mac Finder, to your Mac Home Directory and Macintosh HD, is handy when you’re working with git. This is how you can get them in your Favorites list in Finder.




1. Open Finder and in your Menu Bar, go to View > Show Path Bar

Screen Shot 2015-11-03 at 12.11.36 PM




2. You will now see that there is a directory bread-crumbs on the Path Bar at the bottom of your Finder.

  • Click into your Applications folder if you are not seeing a bread-crumbs listing

Screen_Shot_2015-11-03_at_12_18_08_PM 2


3. Now double-click on Macintosh HD that is on the Path Bar



4. Change the view of your Finder to Columns



5. Navigate to Macintosh HD > Users



6. Now all you need to do is just Drag-Drop your Macintosh HD folder and Home Directory folder into your Favorites section of your Finder!

**NOTE: Make sure you Drag-Drop the shortcuts IN-BETWEEN the other icons. Don’t add the directory into another!

All done!


Read More

Terminal & Git Road Bumps

I’ll see how often I’ll be able to post in the morning – I was able to wake up early enough today, but we’ll see how tired I am later on through the course =)


So I ran into a couple of “road bumps” as I was learning some programming skills yesterday and I thought it’d be good to keep a little section where I post the solutions I found – or maybe topics for future research/reading that I can come back to.

Yesterday I was getting acquainted with Terminal, vim, and Git. To a seasoned programmer this is probably baby steps (maybe baby crawl), but I figured I should get as comfortable as possible, as soon as possible, with using the CLI to navigate my file system.

Some CLI (Command Line Interface) commands/shortcuts that I found necessary and useful:

  • touch [file]: Create new file
  • rm -r [dir]: Remove a directory and contents
  • mkdir [dir]: Create new directory
  • Ctrl + L Clears the Screen
  • Ctrl + C Kill whatever you are running
  • Tab Auto-complete files and folder names (Man, I love this!)
  • Ctrl + A Go to the beginning of the line
  • Ctrl + E Go to the end of the line

A full list of commands/shortcuts that I was referencing yesterday is at:


Here I’m messing around with modifying a file with nano and using ‘git diff’ and ‘git status’ to see what has been modified/staged.




Another issue I ran into while using Git in the terminal was after using the git commit command. Unbeknownst to me, vim was automatically opened as my text editor and I had no idea how to save my commit comments and exit out (I know, what a noob right?)

Well, I found out:

  • To save your work and exit press Esc and then :wq (w for write and q for quit)
  • Or, save and exit by pressing Esc and then :x


Future reading for self:

  • Difference between vim and nano, benefits of one over the other. I’ve heard people approve of one over the other. To me, it just seems like preference.

Read More

What is Gulp – A Streaming Build System


“Understanding flow control is what makes you a programmer” – Gulp, The Stream Build System

So gulp is another of those ‘things’ that I keep coming across when I’m reading the interwebs on AngularJS, NodeJS, etc. So, trying to be a diligent student, I decided to do some research on what the heck it is. I came across this really interesting/helpful slideshow and video on Gulp.

New concepts for me:

  • Think of my application as a series of tubes/streams; not as a big machine
  • Large applications should be broken down to small components, that do one thing well


Gulp – The Streaming Build System


Gulp – by TagTreeScreen Shot 2015-10-28 at 9.40.21 AM


Gulp Functions Notes:

gulp.task(name, fn)

Register a function with a name, and specify dependencies if other tasks need to run first

Runs all tasks, fn)

Runs a function when a file that matches the glob changes



Returns a readable stream. Takes a file system glob and starts emitting files that match. Piped to other streams.



Returns a writable stream. File objects piped to this are saved to the file system.

Read More