maxbrockman453

Max Brockman's Code Fellows UX Dev Journey

At Code Fellows, we've learned to use javascript to call on google all powerful map services. The google API is a deep deep hole that we can go down, and I'm just scratching the surface with this. You'll also notice hopefully, when you get this working, that I've made this responsive to screen size. On your browser get in the habit of grabbing the screen edge with your mouse and drag it back and forth to see if elements are adjusting size.

First we're going to add an article to our HTML5 index file. Like so.

<article class="map">
     <p>Searching the Internet to find you: <span id="geostatus">checking...</span></p>
</article>

maxbrockman453

Max Brockman's Code Fellows UX Dev Journey

Super Useful links for Front End Web Development!

• A practical guide to HTML and CSS is written by Shay Howe. It's a great starting point for anyone who wants to know where they stand on their coding skillz.
• Animate.css is a great page that shows you the code for the animations that you want using only CSS.
• CanIuse.com is a fantastic resource that uses JSON files that are constantly updated in order to show you which browsers and their versions support your HTML/CSS features.
• CSS-Tricks is a really useful and constantly updated page about CSS...tricks...

maxbrockman453

ul.parent
  li.foo words askjfhasdkjfhfasdlkfjhas dlkfjhasdflkjahsdflkajsdhf
  li
  li words
  li
    |then i can even 
    a(href="#") create a link

maxbrockman453

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

%mix-in
  width: 75%
  height: 25%
  
=default-box($argument, $argument2)

maxbrockman453

// ----
// Sass (v3.3.8)
// Compass (v1.0.0.alpha.19)
// ----

//this is config
$light-gray: #ccc

//this is place holder file
%flat

maxbrockman453

<span class="inset-one">Hello</span>
<span class="inset-two">World</span>

maxbrockman453

// ----
// libsass (v0.8.6)
// ----

// Exmple While Loop

@mixin spans($args) {
  $columns: $args;
  $col-val: length($columns);
  

maxbrockman453

Sprites are a pain in the ass, we all know that. And with a recent reminder of Google's Bootstrap I am once again reminded of the horrible ways that people solve problems.

It's funny to me. We are reminded again and again that universal selectors are bad. We as UI devs are beat over the head time and time again that CSS performance is key. As shown in the wildly popular deck by Jon Rohan, [unqualified selectors][css-deck] are only second in the list of no-no's behind universal selectors. But yet we see them all over the place. Do what we say, but not as we do is the world we live in.

In Google's Bootstrap we see the following icon code, [class^="icon-"], [class*=" icon-"] is the selector? Really?

[class^="icon-"], [class*=" icon-"] { <-- WTF?!
display: inline-block;
width: 14px;