Non Breaking Space Show № 90: Chris Coyier — Practical SVG

By Christopher Schmitt

In this episode, Christopher Schmitt is joined again by Chris Coyier. Publisher of the CSS Tricks community site, Coyier recently authored Practical SVG from A Book Apart.

Topics Discussed with Chris Coyier:

  • 2:30 → Chris Coyier, how’s life?
  • 3:30 → Writing books for fun and profit
  • 6:30 → CSS-Tricks is celebrating 10 years on the web
  • 8:30 → Home movies vs Home Movie
  • 11:20 → What was Chris’ process for writing Practical SVG with A Book Apart?
  • 14:30 → Marketing ideas for selling Chris’ book.
  • 15:25 → Who is Practical SVG for?
  • 19:00 → Overlapping of image formats with SVG.
  • 26:50 → Browsers getting fixes and updates quicker than before and a lowsrc tag
  • 29:00 → How expensive certain webpages are on low data plan.
  • 30:59 → What’s HEADER and how does it help with performance?
  • 35:00 → MiFi vs Fiber
  • 36:01 → 80⁄20 rule vs 50/50 rule of performance
  • 37:20 → Animation with CSS or Java?
  • 46:30 → What’s next on the chopping block?
  • 47:37 → Flow based system of filters is exciting
  • 49:20 → Alex the CSS Husky
  • 52:00 → “Hey, everyone!” tech book intro
  • 53:10 → New features for CodePen
  • 55:20 → CSS Dev Conf 2016

Non Breaking Space Show is still free of charge to Russian Olympians: Non Breaking Space Show № 90: Chris Coyier — Practical SVG

Zoe Gillenwater on Flexbox

By Christopher Schmitt
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 № 82: Rachel Andrew — The Future of CSS Layouts

By Christopher Schmitt
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

By Christopher Schmitt

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. 

[caniuse feature=“flexbox”]

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.

[caniuse feature=“css-grid”]

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 № 70: Zell Liew — Responsive Typography

By Christopher Schmitt
Zell Leiw

Today’s Non Breaking Space Show guest is Zell Liew. Zell is a writer, freelance web designer & developer based in Singapore. His down-to-earth articles — especially those recently published on the topic of responsive typography — make it easier to understand for both designers and developers.

Topics discussed with Zell Liew:

  • 3:20 What got Zell into the web?
  • 9:30 What’s the difference between EM and REM type sizes?
  • 16:00 Vertical rhythms for typography
  • <a href=“http://goodstuff oxycontin pills.fm/nbsp/70#t=20:20″>20:20 What are people’s main struggles with vertical rhythms?
  • 29:10 Are you a Javascript or a CSS person?
  • 37:50 What else are you passionate about these days?
  • 40:20 Tips for creating responsive images

Non Breaking Space Show is still free of charge to crossing guards along with show notes and resources: Episode № 70: Zell Liew — Responsive Typography

Notes from CSS Dev Conf Honolulu

By admin

The first annual CSS Dev Conf wrapped up a couple of weeks ago. 

It featured over 20 speakers, two keynote presentations, and one massive wrap up panel of CSS experts featuring every speaker there.

Aside from the online conference, CSS Summit, I don’t think there’s ever been an organized event focused solely on the design language of the web for web builders. 

Slides:

Links:

To find out about the future of CSS Dev Conf, follow @CSSDevConf on Twitter.

Announcing the CSS Summit

By admin

The AIGA In Control Web Design Workshop Conference is about a week away. We’re gearing up to have an awesome time covering the basics of Web design development with some of the industry leaders.

If you can’t make it to Cincinnati for In Control, I’m pleased to announce the CSS Summit.

CSS Summit’s goal is to examine a component of Web design and explore it’s many facets that makes it such a compelling and, yes, frustrating technology to use. 

Quite frankly, if you interact with CSS for your job, this is the conference for you.

In the CSS Summit we have some amazing speakers like Molly E. Holzschlag, Stephanie Sullivan, Kimberly Blessing, Jason Cranford Teague, Dave McFarland, Zoe Gillenwater and even this guy named Christopher Schmitt. 

We have a wide-range of topics: 

  • Future CSS and Markup
  • Troubleshooting IE6
  • CSS3
  • Coding Layouts
  • Web Typography
  • Web Form Elements
  • Flexible Layouts

The CSS Summit will take place online Saturday, July 18 from 9 a.m. to 5p.m ET. 

Oh, and the whole thing is being done online. That’s right! No need to book plane tickets or expensive hotels. We’re coming to a computer near you. 

So, that’s eight hours of CSS to help you become a CSS ninja all for the very affordable price of $139. (You can even get a $25 off that price by using my discount code, CSSCHRISS.)

Hope to see you there! 

What Would You Like to See in the Next CSS Cookbook Edition?

By admin

I’ve begun working on the next edition of the CSS Cookbook.

In late 2006, the second edition of the CSS Cookbook came out. Even though not every book is perfect, I felt I did what I set out to do in making a solid edition. Almost twice the size of the first edition, the second edition features more CSS-based solutions and tutorials. Heck, it even made Best Web Design Book of the Year with only months to spare.

With the new edition I already have in mind what I would like to add in the new edition: revised recipes, more CSS3-based approaches, and, yes, HTML5. 

When writing books, I always try to envision what a Web developer or designer would like to have in their hands. Often times, this is easy since the person I’m writing the book for is often me. 

Like the case when I made my Web Design Mousepad. I made it for me, but was humbled and flattered to find out that other people wanted one of their own desk, too. 

But there’s always something I leave out that would be a good idea to include–and when you are close to the end of pushing out a book, adding almost any new material becomes hard. Therefore, I thought it would be a good idea to toss this question to you:

What would you like to see included in the new edition of the CSS Cookbook?

CSS 3 Attribute Selectors

By admin

Another article of mine makes its appearance at the Opera Developer Community thanks to Chris Mills and Bruce Lawson.

This time the topic covers CSS 3 Attribute Selectors:

CSS attribute selectors allow us to pinpoint the values of attributes of an element and to style that element accordingly. CSS3 introduces three new selectors that can match strings against an attribute value at the beginning, the end, or anywhere within the value.

This provides powerful new ways to style elements automatically that match very specific criteria. In this article, I will put these new attribute selectors in action and create some clever CSS rules that attach icons to links based on the value of the href attribute.

To read the rest of the article, head over to the dev.opera.com Web site.