8 Minutes to CSS Genius | Box Shadow Ninjutsu

In just 10 minutes you too can be a CSS genius. Do you like style? Do you like color? Don’t hesitate say yes aloud, now! This is the CSS tutorial for you, right here on this page are all the answers.

*I do not actually cover box shadow.

Okay!

So in this quick tutorial I am going to briefly touch on div’s in HTML, basic CSS, tools for implementing CSS, and bootstrap. Bootstrap is a stylesheet with a ton of pre-built styles that you can link to elements in your HTML. People freak out about it. It is powerful and approachable. However, I typically utilize Bootstrap for its columns. More on this later.

First you should have a basic understanding of HTML and CSS syntax. I am only briefly going to look at each. First HTML’s syntax looks like this:

In short this will produce an unordered list with list items inside of it.

CSS’s syntax looks like this:

The selector is the tag or element from HTML you want to style. A selector can also be a class or id that you create in HTML. The property is the type of styling you want to do. The value is actual styling, in this case all header 1’s (h1) will have a red font color.

Okay! A page of HTML looks like this:

WOW! This guy is a great coder. Yes.

Sai-tip: Copy that code into a text editor like Sublime and save it with .html after the file name. The text editor will markup the file highlighting the different aspects: HTML tags, tag attributes, content etc.

The important element to note here are the div tags. When you are first introduced to div tags I think it helps to consider them as labels for your code. Each div tag opens and then closes. Everything in between the opening and closing tag contained within that div and therefore inherits stylings from the div.

So in the code example we have a div tag that we are thinking of as a label for our container. Our container holds everything within the body tag. The body tag holds everything you see rendered on the page.

We also have div tags for navigation, content, sidebar, and footer. Each of these sections of code correspond to what you imagine on the front-end.

CSS uses these labels as a map to navigate what is called the DOM. If you want to use CSS to make the navigation div have a blue background then you can use CSS to target that section and style it. So our HTML above with the navigation div could be selected and styled in CSS like this to produce a blue background:

WOW! This guy cannot be stopped.

Okay, so here is the point in the tutorial where I sit you down and give you a solid heart to heart. The amount to which you believe me will directly correlate to how smart you are.

Learning how CSS works will take a little practice. Having a solid conceptualization of what is happening and what tools are out there will make it dramatically easier.

Okay, I am really happy we had that talk. I am standing again and therefore back to teaching.

So the next thing you need to do is have a flashback. You have worked in Microsoft Word, sent an email, played with InDesign, or any other software that had a text-editor. Any of the ways you were able to manipulate text in those programs you can do with CSS.

For example, you can make text larger, bold, add spacing between words, lines, letters.

If you want to play around with editing text and colors, here is my recommendation. I am assuming you are using Google Chrome and an Apple computer: press command+option+i. That will open this up:

Screenshot 2016-03-17 19.24.27

See my cursor about 50% of the way down the screen over on the left side. It is hovering over a button that will allow you to click on anything on the page to see the related HTML and CSS. In the bottom right corner is a bunch of CSS. You can select a HTML element, then edit the CSS live. You can read through the current CSS and get a sense of how things are working. You can uncheck each CSS property to see what it looks like without it!

This could easily be overwhelming, but getting in the habit of using the Chrome’s developer tools to play with CSS will help you immensely. Essentially you are providing yourself an instant feedback loop on your customizations.

Now it is time to up our game. The game upping process involves Bootstrap. You may be tempted to hold onto Bootstrap and that is okay, but yet again I think it is great to use for columns especially when just starting out.

So CSS allows you to more elaborately position HTML elements on the screen. But positioning in CSS is a little tricky. In comes Bootstrap columns. Nothing else, not tabs, not a bunch of extras that are going to convolute your learning experience. Columns!

So here is the grid model (aka columns!):

lg_grid

The screen is divided into twelve evenly sized columns. You can combine columns however you would like. A row all the way across will consist of twelve columns. As an example I can take 2 columns together + 4 columns together + 6 columns together to make a complete row across the screen.

Within the first two columns I could have my logo. In the next 4 I could have empty space. In the last 6 I could have a navigation. These columns have predefined styles in Bootstrap’s CSS. You simply name your div labels (class & ids) to match Bootstrap’s labels and positioning has become dramatically easier.

Here is the HTML from before with some Bootstrap labels linked up.

I want to introduce one last concept about every HTML element and how CSS can manipulate it. It is called the box model:

boxmodel

Content represents the text, link or whatever it is you have inside your HTML element. Each layer moving out can be manipulated to have color and size. You will see this same representation in Chrome’s inspector (command+option+i) if you switch from the “style” tab in the bottom right corner to the “computed” tab. That is it! Go forth and conquer!

BONUS:
CSS Cheatsheet, go forth and cheat!!! But honestly, cheat a lot in code because the resources are endless:

Cool color thing:
http://www.colllor.com
http://infographic.arte.tv/cinema/polar/fr/femme-fatale#/presentation

Obligatory gif:

~ تمام شده ~

WordPress’ Event-Driven Architecture vs MVC

So I was thinking recently I wonder which parts of Ruby I have been learning could apply to WordPress. More specifically we just started working with Rails which is a framework for Ruby, the two together giving us Ruby on Rails.

Ruby is our programming language. Rails is a framework that is neither a forward-facing web application nor a programming language. Rails is a library of ruby that allows us to expedite the application building process.

Ruby on Rails employs Model View Controller (MVC) which is a standard for dividing your code base on its function. The Model is the logic. The View is what you see when visiting a webpage. The Controller is an between that requests logic when needed and sends the appropriate view.

WordPress on the other hand is employing an event-driven architecture. Which can be visualized like this:

2013-08-22-10.39.31-1024x768

WordPress’s Event-Driven Architecture uses hooks to make changes at specified event triggers.

For instance when a webpage is called it will hit the head tag. In WordPress you could write an Action hook to say send in this meta description when the head tag is called. A meta description being that little snippet you see below a search result in google. WordPress also offers a secondary type of hook called a filter that is commonly used for manipulating data.

WordPress has similar pieces to Rails but a common theme my research to compare the two of them was the sentiment: not to get too hung up on the comparison because the two do not really translate to one another.

WordPress uses MySQL as its database. The WordPress dashboard — which is WordPress — functions as the Application Layer. And templates are used to render views. There is a lot of commingling of functionality here that would drive a MVC programmer a little mad.

I found this quote by Tom McFarlin that I found helpful in beginning to sort out the differences:

“Simply put, frameworks are not applications, foundations are applications.

Just because a web application can be built using WordPress does not make it a framework. It’s a foundation. It’s an application unto itself that can be extended into further applications.”

For the time being that is pretty much all I wanted to get down on paper (blog paper). A short and early exercise into comparing something familiar to me (WordPress) with the approach to web applications that I am learning (Ruby on Rails).

I leave you with a funny little middle ground I stumbled upon. There is a plugin out there that allows for a MVC framework within WordPress. As I looked through how to setup the plugin, the PHP used to install the basic framework is extremely similar to Ruby. Take a look:

~ تمام شده ~

The Programmer’s Return: Taijutsu

When I first began preparing for the Flatiron School, I learned quickly to avoid max volume on my headphones when watching instructional videos. Programming requires that you spend a great deal of time in Terminal — which is a powerful interface built into your Mac that allow you to manipulate code, create files, yatta yatch.

Terminal reacts to set commands. As a basic example the command puts “Hello” returns “Hello”. The way Terminal works is that you type in the command and nothing happens, until you hit return (aka enter). Pressing enter evaluates whatever command you’ve setup and returns the appropriate response.

In more elaborate situations it is the feedback from the computer to let you know all the wonderful logic you just typed up does indeed equate to what you expected all along.

Additionally, consider this gif used on Learn.co to express a common misconception about programming:

Plainly, that as a programmer you spend 90% reading through code, following the logic. The remaining 10% of your time is actually spent manipulating it.

I think this is the unifying and underlying frustration that leads to The Programmer’s Return — the abnormal cubic force used to slam down the return key. If you watch any programming tutorial listen for the explosion that happens every time they press enter. It is the deafening result of programming mastery.

Many job interviewers will come equipped with tiny but dense rubber bands — requiring programmers to straddle their right pinky into the constraint in order to prove how effective they are at coding.

You’re Welcome!

~ تمام شده ~

A Beginner’s Beginner Guide to Scraping: Nokogiri Ninjutsu

In this post I will explain some of the fundamental concepts needed to utilize the Ruby gem Nokogiri. Gems in Ruby are comparable to plugins in WordPress. They are self-contained, little bundles of code you can drop into an application to gain additional functionality.

For more accurate reading please inject the phrase ‘To my understanding’ at the start of every sentence.

I followed Sam Callender’s wonderful tutorial, which you can find here. You can find the GitHub repo here.

Nokogiri allows you to scrape, or grab, information from a webpage or several webpages. Huh? Imagine you wanted to collect all your neighborhood restaurants to use in a web app you are building. Or if you wanted to grab all the content from a website and search through it to get a sense of what keywords they are targeting.

Nokogiri is often described as a tool to create an API when there is none.

In the tutorial referenced above we are collecting the first 100 Craigslist posts related to pets. We are taking each title and moving it into an excel document. You could also move it into your website’s database. The full potential of this gem is still over my head but I can tell it has potential to allow for very creative and fun implemenation.

So the url we are using for the tutorial is the same url you would see if you went to Craigslist and did a search for pets.

To understand the next step it is also important to realize you can right-click on any website and select view page source to reveal that site’s HTML. So as a simple example imagine this:

HTTParty Gem

The tutorial also utilizes another gem called HTTParty. This gem will allow us to grab the entirety of that source code (the HTML) and convert it into a string, aka some plain text we can manipulate.

So up until this point we have our dependencies (the gems we are requiring) and then a line of code that uses HTTParty to visit Craigslist and grab the page source code. So our ruby code to deploy a web scraping will look like this:

We set the variable page equal to the string we just collected. Using our example HTML to visualize what is happening: our page variable is pointing to something similar* to this:

*The pattern of back slashes is not accurate. The point being you receive all the original code bundled together into plain text.

Nokogiri Object

The next step is to convert the string we are storing in our page variable into a Nokogiri object. You will see below that our page variable is being called as an argument. The Nokogiri operation is being set equal to a new variable parse_page. So at this point our updated code is this:

If you run this process in terminal you will see that parse_page returns the original html, but as an object that we can operate on with Ruby. Which is cool and worth celebrating:

Parse

As of late I been using parse as my go to verb for taking any sort of action over a collection of code. The average person might use this realization and time to google the word parse, I prefer to share my dilemma.

Moving on, the next step is to parse our object — which it seems is just iterating over it and putting each desired bit of information into an array. So first let’s take a look at our updated code:

So we have an empty array that we will eventually store everything in on line 10. Then on lines 12 – 15 we have our iteration method.

The big thing to note here is that Nokogiri allows us to use the .css method on our new object which we are pointing to with the variable parse_page. So in the code the series of .css methods that take css selectors as arguments would be this:

“.css(‘.content’).css(‘.row’).css(‘.hdrlnk’)”

This is some crazy, but slightly informed guessing, but I think what is going on here is equivalent to saying this in css:

.content .row .hdrlnk

These CSS selectors are specific to Craigslist.com. As an example of what is happening, we will use our html from earlier:

If we wanted to grab the phrases “Blah blah blah” and “Yatta Yatch”, our CSS path could be:

#content p

Typically we use CSS to style a webpage, but using the language’s syntax we can select specific sections of HTML.

The CSS selectors used in the tutorial grab all the titles from Craigslist. The next bit of code converts what our links into plain text, using Ruby’s .text method. We see this on line 13.

Lastly we push each string of text, each headline in this case, into our newly created empty array pets_array.

In this particular tutorial the array is then sent into a .csv file — which can be opened in Excel. The updated and final version of the code would be this:

A csv would be a handy way to look at data or manipulate it.

Once the the code is in a Ruby array though we could do anything with it. Send it off to our database and build an application that tracks all things Craigslist pets.

Nokogiri Name

Nokogiri is a type of Japanese saw with teeth that face inward… you see… saw, scraping it all comes together.

nokogiri gem ruby

This post could have possibly been more informative if I was not more or less responsible for giving the world the Kyary gif(t) found above. You are welcome.

Resources & Thanks

Distilled
Engine Yard
Ruby B-word Book
My Brain

~ تمام شده ~