DrumSensei

betwixt code and music

The Iron Yard - Week 1

The Iron Yard - Week 1

Week 1 is finished! We made it through! We have sixteen Front-Enders in our class, and we have covered a lot of ground during the first week. We have learned how to use HTML, CSS, Sass, git, and the command line. We have made several layouts and reproduced two websites on our own. Very enlightening!

front-end-engineering-icon

Although I am an optimist and have a good outlook on things most days, there were several "throw my hands up in the air" moments this past week. Why doesn't padding work the correct way on a parent element in CSS?!! However, by and large I can see the bigger picture of really GETTING the material.

The hardest thing has been being in Austin away from my wife and four kids back in Dallas. The focused work and study time has been incredible and necessary, but the hugs and experiences I am missing cannot be made up later. Thankfully, Dallas is not too far away, so I was able to head home for the weekend. I have to keep my eye on the prize and get my skills to the level that a company will want to hire me to be a part of their team. As a former band director, I have a TON of soft skills ranging from leadership down to organization to communication to management (not the same as leadership!).

Now...let's see what Week 2 has in store. I hear that we dig into JavaScript, which is what I have mostly studied leading up to this point!

The Iron Yard - Day 05

Day 05 - SASS part2

Something learned very early in development or programming is the beautiful phrase "Don't Repeat Yourself" - usually referred to as DRY. Learning about Sass at The Iron Yard, on my own a bit, and at a local Austin meet-up was a great way to work it in to my homework project. The group ATXSass had the great speakers Abby Larner and Una Kravets. This was a fun presentation about the basics of the tool. Also, having gone to this meetup in ATX and several meetups in the my hometown of Dallas (woot!), I can easily say that the tech scene thrives on getting together. There is something magical about finally meeting the people that dance across your Twitter account as pixels... They are really real people, turns out!

Some more thoughts about Sass, the beneficial CSS pre-compiler follow the nice sassy picture.



Mixins
This handy-dandy feature behaves like a variable but lets you put in more lines of code. If you are familiar with a formal programming language like C++ or JavaScript, then you might consider this to act like a function.

At the top of your code (or really anywhere
before you need it) add a mixin by including this code:
@ mixin link() {
background-color: pink;
color: white;
}

This means that we want to use the visual configuration of white text on a pink background - and we are likely going to use it more than once in the body of the code. Perhaps this is useful if a person is dealing with several sections that will have the same formatting.

When the mixin is needed in the code (after it has been declared!), then just use this to include it:
@include link();


Now...a great reason I saw to use this in code. It is becoming accepted to use the measurement "em" when dealing with font size. This is based on the current font size or approximately 16 pixels. (Pixels are points of light on the screen) - If you have a picture that is 800x600, then you are dealing with 800 pixels horizontally and 600 pixels vertically). Using a "em"s is smart when considering that the end user will likely increase the size of the content (think smartphone or tablet). This means that the font size will scale appropriately when the entire page is "zoomed in".

Here is a snippet of code that will allow us to insert font sizes as the "em" measurement, but also provide a measurement in pixels.
@mixin font($em) {
font-size: ($em*16) + px;
font-size: ($em) + em;
}


(
Note: not all browsers on all devices support all of the things written, so it is a good idea to provide measures like this to shore up your code to be backwards-compatible to older browsers).

The perceptive student will note the $em is a variable. Mixins can include variables, which makes this a very powerful tool! This can be called from within the code like this:
footer {
color: blue;
font-weight: bold;
@include font(4);
}


There is SO MUCH MORE to learning Sass, but this is a good primer for getting started. I know that I am learning a ton more about how to use it to shorten my code and to keep it DRY!

The Iron Yard - Day 04

Day 04 - SASS


image courtesy of sass-lang.com


Whoa, baby, this stuff is cool. Syntactically Awesome Style Sheets or, SASS, makes writing CSS a much easier process. There are two versions. Hamburger A is Sass, Hamburger B is SCSS.

We learned about the SCSS flavor in class today at
The Iron Yard. Sass lets a developer write complex CSS in a simplified way using various patterns.

Nesting
This makes the HTML and CSS look more similar in structure. The code snippet below has a nav tag (which functions as a div container, just semantically different) which contains an anchor tag. The SCSS lets a developer nest a CSS property inside of other ones. SCSS will automatically compile to stock CSS in another file. As a visual person, this is extremely helpful because I can now easily see which tags are inside of others as opposed to searching through hundreds of CSS tags.

This is generated:
nav {
background-color: #fff;
padding: 0.5em 0;

a {
margin: 0 1em;
color: #565D64;
}
}

Which puts this into the stock CSS file:
nav {
background-color: #fff;
padding: 0.5em 0; }
nav a {
margin: 0 1em;
color: #565D64; }

And you might be thinking, "Big whoop. That is just as easy to write in CSS!" Well, you might be right, pardner, but as you mentally extend this to a larger framework of a site, it becomes easy to imagine the usefulness of this here technique.

Variables
SCSS allows defined variables to be used throughout the code. I learned about some scenarios today which made this seem like the greatest thing since the wristwatch. For example...

Situation
You are a designer (or an indy developer) dealing with three different main colors on the site you are building. You apply the variable method to your colors like so:
$primaryColor: #bada55;

And you apply it to code like this:
a {
color: red;
background-color: pink;
}

You are building your site and all is fine until one afternoon your client says that she really wants a
deeper shade of green. No sweat if you used the $primaryColor variable. Just go switch the variable at the top of the file and all of the colors switch throughout the layout.

Thankfully, there was also a meetup for ATXSass the very same day that I learned about Sass. What a break! I headed downtown to the
Capital Factory and learned more about Sass from Abby Larner and Una Kravets. More to come about Sass, so stay tuned.


The Iron Yard - Day 03

Day 03

2015-08-26 11.58.21

Today we had engaging lecture and examples over the specificity of CSS selectors. I definitely do not fully have it down, but it is starting to form in my brain matter.

HyperText Markup Language (a.k.a. HTML) is content. It contains everything that you see on the page that is
stuff. The containers that hold text, pictures, and links can be made to look prettier by adding Cascading Style Sheets (henceforth dubbed CSS).

CSS makes use of
selectors to apply a certain style to the content in the HTML page. In best practice, the HTML and CSS code are found in two (or more!) different files which are linked together at the top of each HTML page.

Color, font-size, height, width, and many other values can be added or adjusted to the content of the page using CSS. If you have seen a website, then you have definitely seen this in action. Without the CSS, the page looks like an outline on black text on a white background

CSS Selectors are fun!

Tag selectors are HTML tags (such as <
header>, < body>, <img>, <a>, etc.) that we target in order to style.

Tag selector example in CSS

body {
text-align: center;
font-family: "Roboto Mono", sans serif;
}

Class selectors are custom names that a developer can create to help modify the appearance and behavior or certain attributes.
In the HTML document they take the form <
HTML_element class="class-name">.
In the CSS file they are preceded with a period like so
.class-name {...}.

Class selector example in CSS

.class-name {
display: inline;
margin: 0 auto;
}

ID selectors are unique names that will only apply to a single element on the page (or a set of things, depending on how implemented). For best practice they can only be used one time per HTML document.

ID selector example in CSS

#batman {
background-color: black;
color: black;
}

That was the easy stuff. The fun begins when we try to determine what happens when the selectors are combined. Which one takes precedence? Will my text be blue or red?

Lastly, a
style tag included in the HTML side of things can override any of the CSS selectors from above. It is generally considered a party foul to use style in that context. Styling can be done "inline" in HTML, but this is an activity perfectly suited to CSS.

FUN stuff!!

The Iron Yard - Day 02

Day 02 of The Iron Yard has happened. I lived through it.

After learning several tidbits about CSS tricks and how to use floats and overflow, we had a daunting assignment. We were tasked to recreate the home page of
Wordpress.com in various stages.

Honest Abe, I was a bit stunned at such a complex project.

Copying others is useful to get deeper down into the "how" of any skill. For instance, in my undergraduate music education days, my percussion professor, the illustrious
Dr. Brian West, would require drumset students to listen to a song of our choosing and then transcribe the exact drumset part. We also had to perform it in front of our peers or in front of a panel of percussion teachers. This was time-consuming and difficult…and I loved it. I officially transcribed Max Roach, Art Blakey, and Billy Martin, all of which led me to many others to transcribe on my own.

Other things I learned today:
  • How to use "em" versus "px" (though "rem" will be useful soon)
  • Make boxes "float" left and right like a magnet
  • More study of the CSS Box Model
  • "box-sizing: border-box" (behavior which "turns out" is from very old IE!)
  • Using "git" in the shell to upload projects to GitHub
  • Installing new packages in Sublime Text

I definitely did
not finish the homework by 10:00 PM as expected. I looked up from feverishly typing and hitting - then -R, realized it was 10:00PM and 30 seconds, and then sent my work to GitHub lickety split. Alas, by the time I submitted my GItHub link to our instructor, it was definitely 10:01 PM (at least on my laptop).

Nonetheless, I continued to work on the layouts, and finished what was expected about 12:15 AM. It has been submitted. I can sleep a little.

There were still two spacing issues in my layout where text was out of alignment for about 5px. Annoying, but I will figure it out.

Oh, we also found out that
our instructor likes nutella…perhaps it borders on obsession. Someone left an anonymous gift of a nutella snack-pack for him. Good move!

To Infinity and Beyond!

The Iron Yard - Day 01

Day 01 of coding bootcamp is in the books.

We have seventeen people in our class ranging from checking this out to seasoned developers looking to update their skills or get a better handle on the fundamentals. The story from person to person seems very similar; we are all looking to get into the tech industry and want a career that can be jump-started here at The Iron Yard.

After introductions we got settled in to our classroom in Building K, which is just a little walk from the main Building C. We were promised a fast-paced difficult journey, and they did not disappoint, even on Day 01!

The first material our instructor Aaron covered consisted of command line basics (open, ., /, path, cd, .., ls, ~, mkdir, yo, touch, subl). Then we jumped to HTML and went through the form of the page and the behavior of and
tags. Lastly, CSS basics with a great deal about how to use classes in conjunction with an HTML file. Other goodies: Chrome Inspector (😍) and Digital Color Meter, both very useful tools.

Our assignment was to recreate a page layout using HTML and CSS based on a picture of a layout. At first glance I thought that this was a fairly easy assignment. After spending about
six hours on it, wading through several rookie mistakes, I have a better understanding of the challenges that lie ahead!

[Mike]: Wait… you can put a
inside of a
?? Then, where do I add padding… but I thought that was the margin…

I will learn. We will all learn.

My favorite things I learned on Day 01:
  • The "open" command is useful in the shell (I know it seems obvious!)
  • Digital Color Meter allows me to find any color and replicate it
  • It helps to read all of the directions in the homework… as a former teacher, this should be stock for me!

I did finish
my homework and am excited to see what they cook up for us today!

As they say here at the The Iron Yard… To Infinity and Beyond!