Zoe Gillenwater on Flexbox

Zoe Gillenwater on Flexbox

Zoe Gillenwater is one of the 16 reasons to attend the virtual CSS and Sass conference event of the year! Zoe is starting CSS Summit this year by breaking down flexbox, one of the new web design layout tools, and showing you how to use it today. Web designers can save 20% at CSS Summit registration using discount code FLEXBOX.

The author of Flexible Web Design is a longtime champion of Responsive Web Design. Zoe works as a UX designer for Booking.com in Amsterdam. She also wrote Stunning CSS3: A Project-based Guide to the Latest in CSS and the hosted the video training title Web Accessibility Principles for lynda.com.

Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Dave Olsen and Pattern Lab

In Episode № 86 of Non Breaking Space Show, I talk with Dave Olsen, programmer/ project manager with West Virginia University, about the recent release of Pattern Lab 2. Pattern Lab helps teams build thoughtful, pattern-driven UIs using atomic design principles.

Topics Discussed with Dave Olsen:

  • 4:12 How is it working at a University?
  • 7:10 What is Pattern Lab?
  • 8:15 What’s the theory behind Pattern Lab?
  • 9:40 How simple should an atom be?
  • 11:30 How to use the demo to get started with Pattern Lab.
  • 13:30 Do you have to bring your own ideas to make use of Pattern Lab?
  • 14:45 What challenges and things did you look at moving from version 1 to version 2 of Pattern Lab?
  • 18:29 What is an event dispatcher?
  • 19:35 Any secrets or things about Pattern Lab 2?
  • 22:00 Using data inside Pattern Lab 2.
  • 24:10 Integrating Pattern Lab into your workflow.
  • 25:45 What would Dave like to see with Pattern Lab in the future?
  • 27:20 Developing a community around Pattern Lab.
  • 31:30 What is Dave Olsen passionate about on the web these days?
  • 34:10 How does Dave Olsen keep up on technology and new stuff?

Non Break­ing Space Show is still free of charge to nuclear scientists : Non Breaking Space Show № 86: Dave Olsen — Pattern Lab 2

Non Breaking Space Show № 84: Scott McCloud — Media and Their User Interfaces

Scott McCloud

Scott McCloud joins Non Breaking Space Show to talk about his new book, Sculpture, movies he’s enjoyed lately, his upcoming book on visual communications, presentation styles, old media vs. new media, and how comic book writing and design has changed.

Topics discussed with Scott McCloud:

  • 3:10 → How is The Sculpture book doing?
  • 4:20 → You wanted to make a Zot! movie?
  • 5:00 → Any movies you’ve liked recently?
  • 6:15 → Talking about Fantastic Film Festival and The Lobster
  • 8:45 → The best part of the Fantastic Film Festival
  • 9:28 → What does Scott love about life with his wife?
  • 10:13 → Talking about The Blackcoat’s Daughter
  • 11:02 → Talking about Drowning by Numbers
  • 12:00 → Talking about the making of The Raiders
  • 15:50 → What are you working on now?
  • 15:58 → Scott’s working on a book about visual communications
  • 17:05 → How does it relate to Understanding Comics?
  • 18:50 → Talking about better UI/better user experience and Edward Tuffte
  • 22:20 → Talking about presentation designs
  • 23:24 → Talking about style delivery of presentations
  • 25:10 → Scott’s simple principle for presentations
  • 27:00 → The use of screens at concerts and Moogfest
  • 29:13 → Using visuals as a means of performance-enhancing
  • 29:45 → Two different presentation styles as defined by Scott
  • 31:44 → Viral presentation at keynote in France
  • 32:24 → Talking about Scott’s new book
  • 34:50 → Understanding Comics is a touchstone
  • 36:15 → Old and New Media
  • 38:10 → How soaps and radio have survived TV?
  • 39:20 → What is the difference between TV and movies
  • 42:01 → Digital comics page count and navigation
  • 43:30 → Presentation of digital comics
  • 46:55 → Responsive design vs designing for the device.
  • 50:30 → Old comic design and writing vs digital comics
  • 53:00 → Scott’s rainbow of good news about modern comics

Non Break­ing Space Show is still free of charge to Superman signal watch wearers: Non Breaking Space Show № 84: Scott McCloud — Media and Their User Interfaces

The Outdoor Glacial Climate Workplace

Mendenhall Glacier

While on vacation last week I met a woman excited about her job.
Most of the week and only if the weather is right, she rides a helicopter to the top of Mendenhall Glacier in Alaska—sets things up for tourists with her team mates.

Then she helps give four tours for people coming from all over the world who are happy to be there, too.

I’m pretty sure has a brown bagged lunch, but I forgot to ask. There isn’t a vending machine in sight. Only thing to drink is melting glacier ice. I was told there are some protein bars stowed away in a cooler in the tent, but I never saw them.

Along with her team, she is surrounded by the blue ice, crisp air, natural water, with one hell of a view from 9 to 5.

When the work day is over, she gets the scenic commute back down to sea level.

I decide to change my desktop’s backdrop to that of photo of the glacier that a better photographer took and get back to coding.

Non Breaking Space Show № 83: Bruce Floyd & Todd Sanders — Social Media

Screenshot of Bruce Floyd & Todd Sanders

Today’s Non Breaking Space Show guests are Bruce Floyd and Todd Sanders. 

While social media replaced the cultural tradition of inviting friends over for dinner and then subjecting them to a slide show of your vacation, it’s more than that to organizations and companies. It’s communication, promotion, boasting, customer service, brand awareness, and more.

Bruce Floyd is the Social Media Manager at University of Florida Athletic Association and Todd Sanders is Director of Social Media at University of Florida. While one covers student athletics and the other covers academia and campus life, respectfully, together they cover largest portions of the University of Florida’s social media brand.

We ask how they handle social media for two similar, but distinctly different parts of Gator Nation.

Topics Discussed with Bruce Floyd and Todd Sanders:

  • 1:23 → Sponsors: CSS Summit, Uber, CSS Dev Conf, Feed.Press
  • 3:15 → Introductions
  • 3:50 → Typical day in Bruce’s life and types of projects that he works on.
  • 5:40 → Typical day in Todd’s life and types of projects that he works on.
  • 6:40 → Mercedes Benz Tweet Race
  • 8:43 → How long has Todd been on social media?
  • 12:44 → How Bruce got started in social media and how he became a part of college sports
  • 17:20 → Recruiting students and athletes with social media.
  • 19:42 → Bruce talks about recruitment and social content including Snapchat.
  • 21:30 → Talking about Snapchat usage.
  • 23:02 → Using Snapchat takeovers so you’re not a fraud.
  • 26:30 → Are there downsides of Snapchat?
  • 28:50 → Using an outline for Snapchat.
  • 34:20 → Top new social media platforms that are used in early 2016.
  • 36:58 → Recording 360’ videos and photos.
  • 39:30 → Vine is a good platform for sharing content.
  • 41:20 → What’s happening with Facebook Live?
  • 48:00 → How are you using Instagram?
  • 49:45 → How do you decide which social media outlet to use and when?
  • 51:20 → Using YouTube as an archive and not sharing links to YouTube videos
  • 54:00 → Todd’s advice for making movies for Twitter.
  • 57:10 → How does Bruce track results on various platforms?

Non Break­ing Space Show is still free of charge to those without the Star Wars Chewbacca Mom action figure along with the show notes and resources: Non Breaking Space Show № 83: Bruce Floyd & Todd Sanders — Social Media

Carolyn Wood has Catastrophic Medical Bills

Carolyn Wood

Carolyn has been one of our own since 1999.

She’s written or edited for A List Apart, Digital Web, The Manual, and Codex: the journal of typography.

Jeffrey Zeldman calls her strategy work the “secret sauce” behind many important projects. Many of you have reached out to her for help and for laughter.

Today, Carolyn needs your help.

Carolyn’s Story So Far

Carolyn Wood is living every American’s worst nightmare. She’s burning through her family’s savings trying to get the healthcare she needs, which isn’t covered by insurance.

A series of catastrophic medical problems combined with America’s nightmarish insurance system have cost her tens of thousands of dollars. And her expenses are mounting.

Carolyn has been confined to a wheelchair for the past three years.

This April, after a week-long illness, she developed acute injuries to the tendons in her feet and the nerves in her right hand and arm. She couldn’t get out of her wheelchair, even to go to the bathroom.

At the hospital, they discovered Carolyn had acute kidney failure. After a month in a hospital and a care facility, she has bounced back from the kidney failure. However, she cannot take painkillers to help her hands and feet.

Carolyn cannot stand or walk or dress herself or take a shower.

For mobility, she is dependent on a lift that can only be manned by two people. Without it, she can never leave her bed.

She’s now warehoused in a home that does not provide therapy—and her insurance does not even cover that cost. With her bills are skyrocketing, she has to pay rent on her bed for $200 a month.

Husband’s Health Crisis

Her and her husband are each other’s only support during this crisis, but they have been living apart since April as he is dealing with his own health crisis.

He’s been going through intense pain, fatigue and side effects from twice-monthly infusions as her husband deals with leukemia.

Together, the only income they have is his disability.

The whole situation is heartbreaking, but Carolyn still feels hope.

Let’s Kickstart Carolyn!

Will you help us give us physical and occupational therapy she needs to be independent again?

Your donation of $25, $50, $100, $1,000 dollars or more will be used to:

  • Gain access to more medical care to get proper diagnoses
  • Provide day-to-day expenses, since she cannot work
  • Help her catch up with her enormous bills
  • Pay for medical transport to see any doctors
  • Get access to physical and occupational therapy to help her live independently again
  • Hire a patient advocate to help her navigate the medical system

Please contribute to help Carolyn out of this nightmare.

Non Breaking Space Show № 82: Rachel Andrew — The Future of CSS Layouts

Screenshot of Rachel Andrew during interview

Today’s Non Breaking Space Show guest is Rachel Andrew. Rachel Andrew returns as our guest. She’s an author, international speaker, product is a web developer, speaker, co-founder of CMS Perch. She’s recently been writing and speaking about the future of web design layouts: CSS Grids and Flexbox.

Topics discussed with Rachel Andrew:

  • 1:00 → Sponsors: CSS Summit, Uber, CSS Dev Conf, Feed.Press
  • 3:05 → What book was that? What’s the title?
  • 3:24 → How is the process for writing a book?
  • 4:00 → What updates were needed?
  • 4:40 → Bringing it up to date, HTML5 is old, but it holds up
  • 5:24 → Perch, Perch Summit; how is it since we last spoke
  • 5:56 → Perch Shop
  • 6:22 → Perch allows you to drop CMS into HTML sites
  • 7:05 → Features in Perch Shop
  • 10:00 → Keeping up with VAT taxes
  • 11:40 → What are the digital pieces of proof of location for purchases in Europe?
  • 14:15 → UK voting on leaving the EU
  • 14:40 → Small business struggle with the record keeping aimed at big business
  • 16:33 → Christopher’s boring city tax story
  • 22:30 → Speaking schedule
  • 24:30 → How is flying in and out of the US?
  • 26:15 → Are you a die-hard Omnifocus user?
  • 28:25 → How do you have your projects set up? At home? Hobbies?
  • 29:30 → I like the idea of context. Context should be a priority
  • 30:10 → “Brain-dead option” in Omnifocus
  • 31:50 → Talking CSS layouts
  • 33:52 → What is the difference between CSS grids and Flexbox?
  • 37:56 → Does Flexbox solve the problem of positioning elements?
  • 38:40 → Is there a far less reliant on media queries?
  • 41:00 → Layout at the moment is really hard
  • 42:00 → As an author, how do you handle browsers and updates?
  • 43:18 → When do you think CSS grids will be stable?
  • 44:11 → Is feature browser flag the replacement for browser vendor prefixes?
  • 48:30 → Rachel’s books about grids and layouts
  • 50:10 → How did you get into running?

Non Break­ing Space Show is still free of charge to owners of Steph Curry’s dad shoes along with the show notes and resources: Non Breaking Space Show № 82: Rachel Andrew — The Future of CSS Layouts

Setting Chrome Flags for Experimental Web Browser Layout Features

Page layouts are set for a revolution. We’re mostly waiting for the majority of browsers to support new layout technologies.

One of those technologies, CSS Flexbox, allows for easy placement and styling of navigation menus, image galleries, photograph thumbnails, centering objects, and so on. Basically, anything that designers would have thought should have straightforward with web design is now possible. 

CSS Flexible Box Layout Module

Method of positioning elements in horizontal or vertical stacks. Support includes all properties prefixed with ‘flex‘, as well as ‘display: flex‘, ‘display: inline-flex‘, ‘align-content‘, ‘align-items‘, ‘align-self‘, ‘justify-content‘ and ‘order‘.

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 4*
  • 2*
  • 10*
  • 12.
  • 3.1*

Mobile / Tablet

  • 3.2*
  • 2.1*
  • 12.
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

While Flexbox can handle the layout within portions of a page, true page layout design is a bit aways. 

The technology powering page layouts, CSS Grids, is still awaiting for browser support.

CSS Grid Layout

Method of using a grid concept to lay out content, providing a mechanism for authors to divide available space for layout into columns and rows using a set of predictable sizing behaviors

W3C Candidate Recommendation

Supported from the following versions:

Desktop

  • 25
  • 19
  • 9
  • 28
  • 6

Mobile / Tablet

  • 6.0
  • 4.2
  • 37
  • 61
  • 55

* denotes prefix required.

  • Supported:
  • Yes
  • No
  • Partially
  • Polyfill

Stats from caniuse.com

However, the latest browser vendors are experimenting with the implementation of the CSS specification with new browser builds. What that means is that web designer and developers can turn them on for testing out cool new stuff like CSS grids!

Enabling Chrome Flags

In the Chrome browser, type in the web address chrome://flags/. This action results in a list of experimental browser features available to you.

NOTE: As the warning states at the top of the flags page, these features may go away at any time in a future release. Or worst, they might make your browser something you really do not want it to do like delete data, crash your browser, etc. It’s called experimental for a reason. If we stick to page capabilities, though, that should likely not be that much of a problem.

To turn on CSS Grids, scroll down to Experimental Web Platform features and select enable.

Experimental Feature Display

So that the features can take hold, the browser prompts you to restart the Chrome browser.

Relaunch Chrome Browser

To make sure you have browser displaying CSS grids, check out Rachel Andrew’s Grid By Example lab making sure to check out each of her layout examples.

Learn More about CSS Grid

Rachel’s has done a lot of speaking and writing about new layout technologies. She even has a great online master class about layouts.

To hear Rachel Andrew’s thoughts on new layout technologies, listen to her interview on the next Non Breaking Space Show episode! Sign up for the The Non Breaking Space’s newsletter or subscribe via iTunes.

Non Breaking Space Show № 81: Matt Griffin — What Comes Next is the Future

Matt Griffin on Non Breaking Space Show

Today’s Non Breaking Space Show guest is Matt Griffin. Based in Pittsburgh, Matt Griffin is a designer and founder of the web design consultancy Bearded. He’s a speaker, writer, educator, and an avid advocate for collaboration in design. His writing has been published by net magazine and A List Apart, where he writes the regular column on “How We Work.” Matt is the director of the upcoming documentary film What Comes Next Is the Future, the definitive documentary about the web as told by the people who build it each day. The film premiers August 2016.

Topics discussed with Matt Griffin:

  • 3:21 → Sponsors: CSS Summit, Lyft, CSS Dev Conf, Feed.Press
  • 4:55 → What’s your movie about?
  • 6:05 → How’d the idea for the movie get started?
  • 9:30 → Fundraising via Kickstarter
  • 10:25 → Pushing from 50% to 100% on Kickstarter
  • 13:10 → Editing film as compared to audio editing.
  • 14:50 → Paralyzed by fear of making friends look good.
  • 17:30 → How’d you get Tim Berners-Lee on the film?
  • 22:01 → Talking about Matt’s I, Web Designer talk
  • 27:00 → What are the major themes of the film?
  • 28:20 → What’s the superpower of the web?
  • 31:00 → Javascript as the trapdoor to fixing the internet.
  • 32:30 → What does the web prize most?
  • 33:40 → Stories of Ethan Marcotte unveiling responsive web design
  • 35:10 → What’s the aftermath of responsive web design?
  • 36:50 → Talking about the earlier days of the web.
  • 38:00 → Printing out binders of mapquest.
  • 41:59 → What are some pivital experiences for Matt through making the documentary?
  • 43:40 → Is it all or nothing with the web?
  • 44:52 → When is the premiere?

Non Break­ing Space Show is still free of charge to Batman v Superman: Dawn of Justice ticket holders along with the show notes and resources: Non Breaking Space Show № 81: Matt Griffin — What Comes Next is the Future