Intrinsic Web Design

Jen Simmons just ushered in this new name for the way(s) web design is changing. She has been adding great videos on her YouTube channel, Layout Land, for about the past two months. She gave this presentation at An Event Apart in Seattle yesterday. There are notes on what she said here and here.

Oh, yeah, her talk is titled “Everything You Know About Web Design Just Changed.”

Now we can use white space in web design, for real.

We can squish, or shrink, or stretch. Deliberately.

Even media queries are changing. This is beyond responsive design, which has been our paradigm for eight years (!) already.

See Simmons’s cool examples of grid and more.

Also this great video series of how to write CSS that works in every browser.

Workout with flexbox

I started and completed the Code School flexbox course today, and then started and finished the surprisingly fun Flexbox Froggy exercises to reinforce what I’d just reviewed. It was very helpful to do this combination.

I wrote some Flexbox notes here back in August. Now I’ve got a more complete set of notes (offline) and a new Pen to remind me how to use flexbox the next time I need it.

Flexbox notes

Reviewing some flexbox concepts today. Flexbox is really handy for coding things like a row of social icons, as shown in this image:

Image: Social icons in a row

  • “A flex container expands items to fill available free space, or shrinks them to prevent overflow.”
  • “Flexbox layout is good at small-scale layouts, whereas the (emerging) Grid layout is intended for larger-scale layouts.”
  • “Instead of talking about horizontal (inline) and vertical (block), flexible boxes use the terms main axis and cross axis. … The main axis is the axis along which the flex items follow each other. The cross axis is the axis perpendicular to the main axis.” (source)

In today’s browsers (2017), this calls for various prefixes and several lines of CSS to declare the main axis:

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;

Having supplied those four lines of CSS, you’ve determined that the main axis of the element is horizontal. Following the flexbox standards, you can write simply flex-direction: row; and then (when you’ve written all your CSS) run the file through a formatter (such as Atom’s autoprefixer package) to get all the extra lines added for you.

“By default, flex items will all try to fit onto one line. You can change that and allow the items to wrap as needed” with flex-wrap: wrap; (source). This is important to consider if you have a lot of things in a row (such as the social icons above), and you don’t want them to shrink to little dots on a vertical phone screen — which they will do if you don’t wrap the line. Using wrap will make the icons do this on a phone:

Image: Social icons with flex wrap

Since I don’t use flexbox often, I always have to look this stuff up.


Useful sites for CSS, browser support issues

Found today while searching for answers to some coding questions:

Unminify: It’s impossible to read minified CSS, JavaScript, etc. This site accurately reformats minified code for you, making it human-readable.

Can I Use … ? Find out which browsers fully or partially support any given front-end web technology (such as box-sizing: all browsers!).

Should I Prefix? For some CSS properties, we need to include extra versions for Chrome, Firefox, or both (using the prefixes -webkit- or -moz-) — find out which properties still need these.

DiffChecker: Compare two text files. The differences between the two files (even spacing and tabs) are shown clearly with side-by-side highlighting.

Advice for starting to learn to code

Start learning HTML and CSS here:

Free interactive exercises at Dash/General Assembly:

Supplement your HTML and CSS learning:

Best first website host for students and faculty:
Reclaim Hosting
Your first domain name registration is free.

Look stuff up and get good answers: HTML

Look stuff up and get good answers: CSS

Anything from W3schools — DON’T USE IT!
Do not confuse the bad W3schools with the good, proper W3C

After you feel comfortable with HTML and CSS, start learning JavaScript.
NOT JAVA! That is a completely different language.
JavaScript makes the web interactive.

Best book for learners — new edition will be published in February 2018:

A good book for learning JavaScript and jQuery:

Where to write your code

The best code editor is ATOM (Mac and Windows):

NOT DREAMWEAVER — never Dreamweaver!

Play with code interactively here:

Links updated Nov 9, 2017