Specificity - say that five times fast. If, like me, you've used a content management system, you have run into some serious headaches applying css to deeply nested elements. This is not unique to CMSs though. Even if you have complete control over your HTML structure you'll still need to have a couple of tricks up your sleeve to style your pages.
For this post I'm going to take a look at:
I'm not about to start a civil war about URI vs URN vs URL, but it would be nice to know what that string in my browser actually means; so, we're taking a quick look at the anatomy of the URL. In future posts we'll be looking at single page applications, hash routing and APIs, which is where this post will come in handy.
Learning to code is one thing, but knowing your stuff is, well, something quite different.
During my 12 week stint at The Iron Yard in Houston we were thrown into the deep waters with no floaties. Braving the waves of information you quickly learn to dive deep on Monday and come up for a breath on Friday.
If you want to look and sound like a real programmer it's time to learn about version control and git. Let's assume you've created a GitHub account and have followed the proper procedure to get an SSH key set up - we're assuming that because that's not what this post is about. Now, back to sounding like a real programmer. I'm also going to assume you're using OSX, because, programmer.
During one of our classes at The Iron Yard we had a discussion on declarative vs. imperative coding. On short, the primary difference is the basic structure and rhythm of your code. Here's how I understand it:
We commonly use for loops to start at a numerical point and end at a numerical point, but they're not that rigid. In the below example we start with A, and on each loop we're adding B. Pretty cool if you ask me.
This
for (var start ="A"; start.length < 5; start = start + "B") {
console.log(start)
}
Outputs
> A
> AB
> ABB
> ABBB
<!DOCTYPE html>
<html>
<head>
<title><!-- add title here --></title>
<meta name="description" content="<!-- add description here -->">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<styles><!-- add styles here --></styles>
</head>
<body>
<header>
<nav>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</nav>
</header>It's possible to use one function inside another, this is very handy when we want to write declarative code. Here's a simple example of how this works.
Occasionally I have to create complex folder structures, for example, creating a new project. With the -p flag it's pretty easy creating parent and child folders in terminal.
mkdir -p thisfolder/thatfolder/myfolder
The -p flag creates all the required parent folders. Nice!
If you want to get real fancy, create a genProject shell script and run it every time you want to start a new html based project. This one includes the HTML boilerplate and a simple css reset to boot.
Here's something pretty cool; properties the way we've been declaring them in objects are public, they can be accessed by any function, but we can also create private properties. Here's a simple example:
