Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

By Christopher Schmitt
Simon St. Laurent on Non Breaking Space Show

<a href=“http://goodstuff oxycontin prices.fm/nbsp/80″>Today’s Non Breaking Space Show guest is Simon St. Laurent from O’Reilly Media. Simon joins us for a look at the past week as get caught up on technology news, web building resources, and social commentary. Making our countdown list for what we found interesting in the world this week: Google I/O fallout, Instagram logo redesign, making CSS great again, saving your life with typography, WordPress is a teenager, and conference advice!

Topics discussed with Simon St. Laurent:

  • 0:38 → Sponsors: CSS Summit, Lyft, CSS Dev Conf, Feed.Press
  • 5:00 → Topical Issues / Things of Interest
  • 5:20 → #6 Google IO excitement and fallout
  • 5:50 → Progressive web apps not showing URLs
  • 6:12 → Use the platform “thing”.
  • 7:00 → Google is not united
  • 8:30 → Service worker discussion
  • 10:20 → App happiness
  • 13:00 → Virtual Reality discussion
  • 17:50 → Augmented Reality discussion
  • 19:00 → Apple Watch discussion
  • 19:50 → Discussion on the Learning Virtual Reality
  • 21:30 → #5 Instagram Logo Redesign
  • 23:25 → Design trends / gradients
  • 25:40 → #4 Getting back to CSS
  • 27:40 → Fluid typography discussion
  • 30:00 → Responsive typography discussion
  • 30:40 → Line length and hyphenation discussion
  • 32:52 → #3 How Typography Can Save Your Life
  • 33:22 → National Weather Service used to broadcast their winter warning in all caps discussion.
  • 35:01 → Typeface testing discussion
  • 37:20 → SVG discussion
  • 39:05 → Gradient discussion revisited
  • 40:10 → Apple discussion
  • 46:00 → #2 WordPress Discussion
  • 48:40 → Content management discussion
  • 53:19 → CSS discussion revisited
  • 53:56 → #1 Dan Rose Discussion
  • 57:30 → Conferences discussion
  • 1:01:25 → Pros and cons for designers currently
  • 1:02:53 → Looking forward to…

Non Break­ing Space Show is still free of charge to Google Wave users along with the show notes and resources: Non Breaking Space Show № 80: Simon St. Laurent — Top 6 Tech News Countdown

RWD Summit: RWD & SVG

By Christopher Schmitt

In his RWD & SVG talk at RWD Summit in March 2016, Dudley Storey shares his thoughts on working with Scalable Vector Graphics for Responsive Web Design, especially on logos and icons. Here are my notes from his talk:

There are five rules when designing icons and logos in SVG:

  1. Design & build SVG icons&logos at the aprox target px for the screens (~50x50px for icons, as needed for logos)
  2. Set up your illustration tool to help solve issues before they happen: 
    • Strokes in the middle of paths
    • Exporting styles as CSS
    • Use Boolean paths rather than superimposed layers
    • SVG filters and not illustrator’s one (if illustrator)
  3. Draw icons 1px in from the edge of the viewBox to allow for browser’s tendency to fractionally bloat SVG with antialiasing, which can be cut off if you draw too close to the edges 
    • Optimize the SVG to remove redundant code
    • SVGOMG
    • Adobe Illustrator 2015.2
    • Sketch Beta 3
  4. Since SVG is a replaced HTML element, linked CSS that does not load will leave an SVG element rendered at 300x150px by default. Icons should have fallback width and height attributes:
  5. Deal with IE 
    • It sets height for the SVG applied as a 150px height and 100% width creating distortion. You can use img {width: 100%;} or safer with img[src$=“.svg”] { width: 100%}
    • Inline SVGs require a container element and a “padding hack”