Info

The Immersion Podcast

The Immersion podcast is a podcast that features Rob Levin and Petr Tichy. We discuss all sorts of web related themes from design and illustration to front end development.
RSS Feed Subscribe in Apple Podcasts
2018
March
February


2017
December
November
October


2016
August
April
February


2015
December
November
October
August
July
June
May
April
March


All Episodes
Archives
Now displaying: Page 2
Mar 23, 2018

In the 9th episode of season 1 of the Immersion Podcast—Petr and Rob talk about Design and JavaScript news happenings on the web…

 
Show Links
 
JavaScript Updates
 
 

Delightful form example by Darin Senneff—https://codepen.io/dsenneff/pen/QajVxO

Polacode and Bracket Pair Colorizer - VSCode Extension
 
Bracket Pair Colorizer - Visual Studio Marketplace
  
Clean React Toggle by Chris Gannon
 
YouTube Rewind 2017
 
Val Head's Writing Process:
 

Design Updates

Rob's Illustration Teardowns

Rob Links
 
A New Home for Creative Market
 
Duncan Channon agency's Hey World! Upwork campaign
 
Tubik Studios
Color Glossary for Designers: Terms and Definitions.
 
How to create original flat illustrations
 
Ryan Putnam's process for building Illustration Identities
 
AI Power talks about his illustration process
 
Rocky Roark talks about how illustration Helps to Reach Visual Learners
 
Nikola Lazarevic's Sketch App Illustration Tutorials
 
Feb 23, 2018

Today's Immersion Podcast—Petr and Rob talk about more illustration and JavaScript findings on the web…

Show Links
 
JavaScript Updates
Design Updates

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

Feb 1, 2018

Today's Immersion Podcast—Petr and Rob talk about illustration and animation on the web…

Show Links
 
Design Updates

Animation

Illustration

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

Dec 28, 2017

Today's Immersion Podcast—Petr and Rob talk recap 2017 professional and personal accomplishments and goals for 2018…

Show Links
 
Design Updates
2017 Design Trends

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

 

 

 

 
Dec 13, 2017

Today's Immersion Podcast—Petr and Rob talk about front end developer and designer news. We had some connectivity issues so we had to record both respective parts separately.

Show Links
 
Front-end Updates
Design Updates

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

 

 
Nov 15, 2017

Today's Immersion Podcast is Petr solo talking about front end updates!

Show Links
 
Useful Resources
New VSCode Features - October Update
Animating in React
Inspiration
Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

 

 
Nov 6, 2017

Today's Immersion Podcast is all about content management systems aka CMS. 

Show Links
Big Guns
Static Site Generators
Other CMS

What's the #JAMstack? Javascript, APIs + Markup = a better approach to web projects. https://jamstack.org/

Other Resources
Music
JAMStack Radio - A show all about the JAMstack, a new way to build fast & secure apps or websites.
The New Front-End Stack: JavaScript, APIs and Markup SmashingConf talk

 

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

 

 

 
Oct 30, 2017

We announce that SVG Immersion is in the process of rebranding to just "The Immersion Podcast", and Rob announces to the world that Petr Tichy is now the co-host and partner in immersion crime.

This show is very much an introduction to the new format, plans we have for the show, and a warm-up for both Rob and Petr to get back in to the swing of podcast things!

 
Show Links
 

Tweet us any ideas for show topics and show feedback: Rob: @roblevintennis and Petr: @ihatetomatoes

 

 

 
Aug 11, 2016

In this conversation with Amelia Bellamy-Royds, we talk about all things SVG 2 and beyond.

 
Show Links
 
Here are the wiki pages summarizing big SVG 2 change (works in progress):
  • New features: https://github.com/w3c/svgwg/wiki/SVG-2-new-features
  • Breaking changes: https://github.com/w3c/svgwg/wiki/SVG-2-breaking-changes
 
If anyone's in the Boston area, Amelia will be talking about SVG 2 & the web standards process at CSS Conf, September 26/27: https://2016.cssconf.com/#speakers
 
Two places to see what she’s up to:
The Books:
 
 
 
SVG 2
Music Attributions:
 
Apr 12, 2016

In this conversation with Dustin Lee and Brad Woodard, we talk about the illustration process, making killer Photoshop and Illustrator brushes, and other good stuff.

Dustin Lee's Info:
 
http://www.passiveincomefordesigners.com/ (unfortunately, I forgot to bring this back up in our conversation (sorry Dustin!), but if you admire Dustin’s success with RetroSupply, and want to learn how he “makes things happen”, this is definitely something to check out. He’s also got a podcast on the topic: http://www.passiveincomefordesigners.com/podcast/
 
Brad Woodard's Info:
http://bravethewoods.com/
 
Space Ranger Brush Kit & Tutorials
 
Other Links
 
 
Music Attributions:
 
Feb 29, 2016

In this conversation with Fraser Davidson, we talk about After Effects and his general working process.

Fraser Davidson's Info:
 
Music Attributions:
 
Dec 29, 2015

In this conversation with Vincent Hardy & Dmitry Baranovskiy from Adobe, we talk about their work on Adobe Illustrator's SVG Export.

Site Links

Announcement of new AI Export Features
 
General Help for Adobe SVG
 
 
Animate SVG with the Flash Timeline
 
Dmitry's Info:
@DmitryBaranovsk
 
Vincent's Info:
 
Music Attributions:
 
Dec 3, 2015
Val Head is a Designer who loves web animation, offers training, speaking, and consults around these topics of web, design, and animation. She also curates the UI Animation Newsletter and hosts the All The Right Moves screencast & Motion and Meaning podcast. Last but not least, Val is also the author of The Pocket Guide to CSS Animations, and, the one talked a lot about on this episode, her upcoming book: Designing Interface Animations.
 
Motion and Meaning Podcast
 
UI Animation Newsletter
 
Designing Interface Animations
 
Storyboards article
 
Sarah Drasner's article (which has a section on storyboarding that we bring up in the show)
http://www.smashingmagazine.com/2015/06/practical-techniques-on-designing-animation/ 
 
tmrDevelops
 
Rachel Smith
 
Ana Tudor
http://codepen.io/thebabydino/
 
A beginner's guide to designing interface animations
 
Animation and RWD
 
lynda.com intro to CSS Animations course:
http://www.lynda.com/CSS-tutorials/CSS-Animations/115434-2.html
 
Flash Professional will be renamed Adobe Animate CC exports to SVG
 
 
Music Attributions:
 
Nov 27, 2015
Round table discussion around the topic of: "Getting Started in Web Animation (with a bias towards SVG!)”. And our esteemed guests are no less than Petr Tichy, Sarah Drasner (comes on a few minutes in), and Dudley Storey!
 
Motion and Meaning Podcast
 
UI Animation Newsletter
 
 
Fraser Davidson for Cub Studio
 
Ana Tudor
 
Gregor Adams
 
Rachel Nabors Web Animations Weekly Newsletter
 
 
Rachel Smith
 
Gerald Fernandez
 
Nathan Gordon
 
Sources of Inspiration: TV Commercials, anime transitions, street art, art galleries, js web newsletters, http://www.awwwards.com/, net mag gallery
 
Firefox Dev Tools Challenger (Rachel Nabors et al):
 
Sarah’s Flame Pen
 
 
Petr’s GreenSock Workshop
 
Sarah’s Frontend Master
Orioles book Writing a advanced svgs animations
SVG Summit, tbd. ForwardJS Summit, San Francisco, CA, February 10, 2015. O’Reilly Fluent Keynote, San Francisco, CA, March 8-10, 2015. Also, generate conf, css dev conf (slides going)
 
Dudley Storey
2016 a book will be coming out and will involve svg and animation but that’s all we can say :)
 
 
Face Morphing
 
 
 
Music Attributions:
 
Oct 3, 2015

Interview with Dennis Gaebel, a Design Technologist passionate for Open Source, SVG, Typography, Web Animation, Interaction Development and Pattern Based Design. We talk about how he got in to web development and design, PolyLion, learning through an online school, a bit about freelancing as a web dev/designer, and, of course, our mutual fondness of https://css-tricks.com :-)

 
Show Links 
https://twitter.com/droidpinkman
 
SVG Workers
 
Polylion Article
https://css-tricks.com/polylion/
 
https://github.com/jakealbaugh
 
Dudley Storey http://thenewcode.com/
 
 
Music Attributions:
 
Aug 21, 2015

Part Two of conversation with Jack Doyle and Carl Schoof of the company Greensock discuss SVG and their GSAP library. 

Show Links
 
Greensock
http://greensock.com/
 
Animation Engine Timing Comparison
http://codepen.io/GreenSock/full/e3ac33404937de0eb77c789323367da8/
 
Sequence Video
http://greensock.com/sequence-video
 
transformOrigin article by Jack on css tricks
https://css-tricks.com/svg-animation-on-css-transforms/
 
http://greensock.com/learning/
http://greensock.com/jump-start-js 
(on Codeine the collection: http://codepen.io/collection/ifybJ/)
 
Source Code
https://github.com/greensock/GreenSock-JS
 

SVG Power Tips (includes transformOrigin and svgOrigin demos + other awesome svg tips)
 
Solutions for Banner Ads in the Post-Flash World
 
Self-promotion 
 
GreenSock Animation Platform eBook
 
2-day class at Noble Desktop
 
Reference to the SVG challenge – how making 2 gears spin was basically impossible with anything else.

 

 
Questions about licensing, or custom training: http://greensock.com/contact-us/ 
 
Music Attributions:
 
Aug 20, 2015

Jack Doyle and Carl Schoof of the company Greensock discuss SVG and their GSAP library. 

 

Show Links
 
Greensock
http://greensock.com/
 
Animation Engine Timing Comparison
http://codepen.io/GreenSock/full/e3ac33404937de0eb77c789323367da8/
 
Sequence Video
http://greensock.com/sequence-video
 
transformOrigin article by Jack on css tricks
https://css-tricks.com/svg-animation-on-css-transforms/
 
http://greensock.com/learning/
http://greensock.com/jump-start-js 
(on Codeine the collection: http://codepen.io/collection/ifybJ/)
 
Source Code
https://github.com/greensock/GreenSock-JS
 

SVG Power Tips (includes transformOrigin and svgOrigin demos + other awesome svg tips)
 
Solutions for Banner Ads in the Post-Flash World
 
Self-promotion 
 
GreenSock Animation Platform eBook
 
2-day class at Noble Desktop
 
Reference to the SVG challenge – how making 2 gears spin was basically impossible with anything else.

 
Questions about licensing, or custom training: http://greensock.com/contact-us/ 
 
Music Attributions:
 
Aug 4, 2015

Interview with Rachel Nabors. Rachel is an ambassador for web animation, curating the wonderful weekly newsletterwebanimationweekly.com and regularly speaking about the topic at web development conferences. In a past life, Rachel won awards for here web comics and graphic novels for teenage girls… Today, you can see some of this influence in Rachel’s more interactive projects and demos such as Alice in Videoland, the black brick road to OZ, the Cat in Byakoyya.

Show Links
 
http://webanimationweekly.com Web Animation Weekly
 
http://rachelnabors.com/waapi/ Web Animation API resources
  
 
 
Rober Penner Easing Functions: http://robertpenner.com/easing/
 
Cat Walk Cycles (showing of web animations api): http://codepen.io/rachelnabors/pen/zxYexJ
 
 
Scott Hudson Quote: Animation: From Cartoons to the User Interface, UIST’93: Proceedings of the 6th annual ACM Symposium on User Interface Software and Technology, pp. 45-55 
 
  
Music Attributions:
 
Jul 20, 2015

Interview with Amelia Bellamy-Royds. Amelia is a professional freelance writer specializing in scientific and technical communication. She’s the coauthor of the SVG Essentials 2nd Edition book, an “invited expert” on the W3C’s SVG working group, involved in the SVG Accessibility Task Force, and has extensive experience using SVG for data visualizations. With a masters degree in journalism, Amelia is an amazing technical writer.

 
Show Links
 
She recommended to following two places to see what she’s up to:

The Books:
 
Responsive SVG:

Accessible SVG:
 
SVG 2 development:
 
Also, we referenced Transforms on SVG Elements–Ana Tudor https://css-tricks.com/transforms-on-svg-elements/

 
 
Music Attributions:
Jul 1, 2015

Conversation with Chris Gannon...

Chris specializes in animation, UI, video and interactive design and runs the site gannon.tv as well as the company FrameSpark Interactive–which specializes in HTML5 apps, interactive video and animation, interfaces & games, for all form factors from mobile to tablet to desktop. Chris can also be found on CodePen where his work sometimes ends up in the Top Picks or Popular sections.

 

Show Links
 
 
The animation announcement for SVG Immersion Podcast was made by, Chris Gannon, himself. Here's my fork of his pen: http://codepen.io/roblevin/pen/bdLGqg ... thanks Chris!
 

Music Attributions:
Jun 15, 2015

Conversation with Rachel Smith...

Rachel started building for the web just 5 years ago, when she started out by making Flash banners for an advertising agency. Now she animates interfaces with CSS and JavaScript and also builds APIs and backend applications with Node.js. She currently builds all the websites for the good folks at Active Theory

 
Show Links
 
Rachel Smith’s Blogs & Twitter
 
2013 the year of javascript article
 
Sarah Drasner–Weighing SVG Animation Techniques (with Benchmarks)
 
Cubic Bezier animation rubber band effect
http://panda.network/
 
Active Theory
http://activetheory.net/work 
 
PenguinCurling - multi-device curling game part of the Coca-Cola AHH campaign

 
http://www.ahhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhhh.com/
 

Music Attributions:
Jun 3, 2015

Conversation with Dudley Storey, a. A teacher of more than 15 years, Dudley is the author of the book: Pro CSS3 Animation, an editor for Smashing Magazine, and the author of the blog http://demosthenes.info/ where he talks about web design and development with HTML, CSS, JavaScript, and–our favorite–SVG.

 

Show Links
 
Dudley’s WEB Developer Reading List–Intro To SVG
 
Pro CSS3 Animation
 
Jen Simmons–Web Ahead Podcast Interview w/Doug Schepers

 

Music Attributions:

Loop Freesky–dEbE: http://www.freesound.org/people/bebeto/sounds/554/

frankum: http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums: http://www.freesound.org/people/notembug/sounds/264284/

 

May 9, 2015

Interview with  the founders of http://ambercreative.co/ , a mobile and web design agency headed up by Claudia Romano & Sebastiano Guerriero.

Claudia & Sebastiano are the dynamic duo behind sites like codyhouse.co–a treasure cove of organized html/css/js recipes, and more recently, Nucleo, a library of 1100+ vector icons accompanied by a web app to manage and customize them. The icons are available in several formats, but since we’re an SVG show, we’re going to dive deep on that aspect of the icon set and application.

 

Show Links
 
http://ambercreative.co/ -a mobile and web design agency headed up by Claudia Romano & Sebastiano Guerriero
 
Nucleo Icons
https://nucleoapp.com/
 
Codyhouse
http://codyhouse.co/
 

 

Sebastiano’s Dribble
 
Pixel Grid Alignment Example (courtesy of Sebastiano Guerriero)
 
 
Joni Trythall–SVG Pocket Guide
 
Music Attributions:

Loop Freesky–dEbE: http://www.freesound.org/people/bebeto/sounds/554/

frankum: http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums: http://www.freesound.org/people/notembug/sounds/264284/

 

May 6, 2015

Interview with Creative Technologist at Adobe–CJ Gammon

Animation Experience

In high school/college built animations in Flash mostly using the timeline, fed off the love for sites like Homestar Runner that created quality episodic animations that could be built relatively fast in flash and shared on the web.

Design Experience

First fell in love with vector art doing graphic design logos and illustrations in illustrator on brand concepts for companies like Miller & SC Johnson

Interactive Experience

Would bring illustrations to life with animation and interactivity through flash games and rich websites and banner ads. Adobe -Built a lot of web demos showing off adobe's work, now contributing to tools and experimental projects.

 

Show Links
 
 
sometimes CJ tweets about this stuff or other stuff I'm interested in:
@cjgammon
 
here's his branch of greensock with the Snap plug-in:
 
Snap demos discussed:
 
Petr Tichy’s SVG Christmas
 

 

Music Attributions:
Apr 26, 2015
Ryan Brownhill is an Motion and User Experience  Designer at IBM Watson with a general background in Interaction Design. He also moonlights in photography, animation, and is a bit of a typography nut. Ryan is contributing designer to The Letter Society–a collaborative and challenge-based design blog, as well as designopen.org
 
 
 
Show Links
 
http://ryanbrownhill.com/
 
The Letter Society
 
http://designopen.org
 
 
https://medium.com/@ryan_brownhill/svg-animation-d7d5486103bb
 
 
 
Music Attributions:
Apr 17, 2015

Rob talks about the SVG transform attribute and how it creates a new current coordinate system, scale, rotate, translate, scewX and scewY…

Show Links 

 
Jakob Jenkov
 
SVG Essentials–2 edition
http://www.amazon.com/SVG-Essentials-J-David-Eisenberg/dp/1449374352
 
Spec
http://www.w3.org/TR/SVG/coords.html#TransformAttribute
 
Music Attributions:
 
Apr 16, 2015
In this, part 2, of interview with Sarah Drasner–Senior Interaction Designer at Fauna DB and general front end developer who wields her magic wand over the Greensock GSAP animation library–we discuss:
  • Sarah’s background as both a front end developer and scientific illustrator
  • SVG Animation Benchmarks for GSAP, CSS3 @keyframes, SMIL, and Velocity.js
  • Sarah’s process for storyboarding the scenes in to animated timelines, from creation to animation implementation
  • “step animation” (animating by drawing a series of images) versus animation via interpolation
  • Working solo vs. working with a team; and also animations that are practical for business vs. those that are “weekend art pieces” and why both are important
Show Links
 
SVG Animation Benchmarks: https://css-tricks.com/weighing-svg-animation-techniques-benchmarks/
 
 
 
Sarah’s Contact Form Pen: http://codepen.io/sdras/pen/LEorev
 
Sime Vidas' Web Platform Daily: http://webplatformdaily.org/
 
Sara Soueidan: SaraSoueidan.com
 
Html5 Weekly: http://html5weekly.com/
 
Web Animation Weekly: http://rachelnabors.us1.list-manage.com/subscribe?u=0a8f219cf8284562f91a26ee9&id=d60f6683d2
 
JavaScript Weekly: http://javascriptweekly.com/
 
Web Operations Weekly: http://webopsweekly.com/
 
Music Attributions:
Apr 16, 2015
In this interview with Sarah Drasner–Senior Interaction Designer at Fauna DB and general front end developer who wields her magic wand over the Greensock GSAP animation library–we discuss:
  • Sarah’s background as both a front end developer and scientific illustrator
  • SVG Animation Benchmarks for GSAP, CSS3 @keyframes, SMIL, and Velocity.js
  • Sarah’s process for storyboarding the scenes in to animated timelines, from creation to animation implementation
  • “step animation” (animating by drawing a series of images) versus animation via interpolation
  • Working solo vs. working with a team; and also animations that are practical for business vs. those that are “weekend art pieces” and why both are important
Show Links
 
 
 
Sarah’s Contact Form Pen: http://codepen.io/sdras/pen/LEorev
 
Sime Vidas' Web Platform Daily: http://webplatformdaily.org/
 
Sara Soueidan: SaraSoueidan.com
 
 
 
JavaScript Weekly: http://javascriptweekly.com/
 
Web Operations Weekly: http://webopsweekly.com/
 
Music Attributions:
Apr 7, 2015
Interview with Dmitry Baranovskiy author of Raphael & Snap.svg
 
Dmitri is the author of Raphaël, the most popular SVG library on the web with support back to IE6. Dmitry is also the author of Snap.svg, a newer successor to Raphael, designed for modern browsers, meaning it can support newer SVG features like masking, clipping, patterns, gradients, and more. Dmitry is currently a Senior Computer Scientist at Adobe. 
 
Show Links
http://dmitry.baranovskiy.com/
 
Dmitry’s Icon Set:
https://thenounproject.com/DmitryBaranovskiy/
 
https://instagram.com/p/0oXUUpGGwo/
 
Snap.svg
https://github.com/adobe-webplatform/Snap.svg
 
Bump to 0.4.0:
 
Raphael
http://raphaeljs.com/
 
Dmitry’s associate (friend?) Lachlan Hardy http://lachstock.com.au/
CJ Gammon
http://www.cjgammon.com/
CJ's Snap Plugin:
https://github.com/cjgammon/GreenSock-JS/blob/master/src/uncompressed/plugins/SnapPlugin.js
 
CJ's original PR with example calling client code to the plugin:
https://github.com/greensock/GreenSock-JS/pull/79
 
 
Backbone Plugin Wiki Page:
https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
 
Sketch SVG output tweet
 
Chris Coyier’s: A Compendium of SVG Information
 
Music Attributions:

 

Apr 7, 2015
Interview with Dmitry Baranovskiy author of Raphael & Snap.svg
 
Dmitri is the author of Raphaël, the most popular SVG library on the web with support back to IE6. Dmitry is also the author of Snap.svg, a newer successor to Raphael, designed for modern browsers, meaning it can support newer SVG features like masking, clipping, patterns, gradients, and more. Dmitry is currently a Senior Computer Scientist at Adobe. 
 
Show Links
http://dmitry.baranovskiy.com/
 
Dmitry’s Icon Set:
https://thenounproject.com/DmitryBaranovskiy/
 
https://instagram.com/p/0oXUUpGGwo/
 
Snap.svg
https://github.com/adobe-webplatform/Snap.svg
 
Bump to 0.4.0:
 
Raphael
http://raphaeljs.com/
 
Dmitry’s associate (friend?) Lachlan Hardy http://lachstock.com.au/
CJ Gammon
http://www.cjgammon.com/
 
Backbone Plugin Wiki Page:
https://github.com/jashkenas/backbone/wiki/Extensions,-Plugins,-Resources
 
Sketch SVG output tweet
 
Chris Coyier’s: A Compendium of SVG Information
 
Music Attributions:
 
Mar 28, 2015

In this Part 2 of 2 episode we look at Coordinate Systems. Specifically, Rob talks about SVG's preserveAspectRatio, and also discusses how you can make your SVGs responsive using the padding hack (IE).

Music Attributions:
Mar 24, 2015

In this two-part'er, we talk w/Chris about SVGs, icon systems, the tech considerations we need to keep in mind when using SVG Icons, Grunticon, Grumpicon, svg4everybody, grunt-svgstore, and Chris's SVG Is For Everybody prez and his SVG course at The Lodge.

 

Resources discussed:

Autoprefixer
 
Grunticon & Grumpicon
 
Chris’s UI Patterns Pen
 
SVG Filter Support Detection
http://stackoverflow.com/questions/9739955/feature-detecting-support-for-svg-filters
 
Chris’d SVG Course
https://css-tricks.com/lodge/svg/table-of-contents/
 
SVG Is For Everybody Presentation
https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/ (the 2014 version)
 
Rob’s Article on css-tricks.com on getting inline SVGs in to production:
https://css-tricks.com/gotchas-on-getting-svg-into-production/
 
https://css-tricks.com/mega-list-svg-information/
 
You Don’t Know SVG–Dmitry Baranovskiy
https://www.youtube.com/watch?v=SeLOt_BRAqc
https://github.com/FWeinb/grunt-svgstore
 
Lucas Bebber Article–Rob sort of misinterpreted article asking about what feature detection techniques was Lucas alluding to, but, what Lucas actually mentioned in the article, was that you may need to use vendor prefixes for the filter property…anyway, here’s the article:
https://css-tricks.com/gooey-effect/
 
SVG Essentials 2nd Edition (no affiliate) 
http://shop.oreilly.com/product/0636920032335.do
 
More Resources Discussed
https://github.com/jonathantneal/svg4everybody
https://github.com/FWeinb/grunt-svgstore 
https://github.com/iconic/SVGInjector
 

Rob's SVG Playground:

http://unicorn-ui.com/demo/svg.html 

Music Attributions:

Read more at http://svgimmersion.com/#ij8CwBU3mfP3ztr5.99
Mar 24, 2015

In this two-part'er, we talk w/Chris about SVGs, icon systems, the tech considerations we need to keep in mind when using SVG Icons, Grunticon, Grumpicon, svg4everybody, grunt-svgstore, and Chris's SVG Is For Everybody prez and his SVG course at The Lodge.

 

Resources discussed:

http://stackoverflow.com/questions/9739955/feature-detecting-support-for-svg-filters
 
Chris’d SVG Course
https://css-tricks.com/lodge/svg/table-of-contents/
 
SVG Is For Everybody Presentation
https://css-tricks.com/video-screencasts/137-svg-is-for-everybody/ (the 2014 version)
 
Rob’s Article on css-tricks.com on getting inline SVGs in to production:
https://css-tricks.com/gotchas-on-getting-svg-into-production/
 
https://css-tricks.com/mega-list-svg-information/
 
You Don’t Know SVG–Dmitry Baranovskiy
https://www.youtube.com/watch?v=SeLOt_BRAqc
https://github.com/FWeinb/grunt-svgstore
 
Lucas Bebber Article–Rob sort of misinterpreted article asking about what feature detection techniques was Lucas alluding to, but, what Lucas actually mentioned in the article, was that you may need to use vendor prefixes for the filter property…anyway, here’s the article:
https://css-tricks.com/gooey-effect/
 
SVG Essentials 2nd Edition (no affiliate) 
http://shop.oreilly.com/product/0636920032335.do
 
More Resources Discussed
 
Rob's SVG Playground:

http://unicorn-ui.com/demo/svg.html 

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

 

Mar 16, 2015

In this Part 1 of 2 episode we look at Coordinate Systems. Specifically, Rob talks about SVG's viewport, the viewBox attribute, and both viewport space and user space coordinate systems.

The following blog post link has a section on the SVG viewport with examples for viewBox "displacement" and scaling units:

http://unicorn-ui.com/blog/svg-for-beginners.html

 

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

 

Mar 10, 2015

SVG DOCUMENT STRUCTURE

A look at how to achieve reusabability with SVG's semantic grouping and referencing elements. We additionally look at SVG's root element too.

For most web developers, SVG (or Scalable Vector Graphics), should bring some familiarity in terms of syntax. This is due to the fact, that SVG is a dialect of XML and quite similar to HTML. However, many "SVG noobs" hit a stumbling block with a couple of concepts that are unique to SVG. My advice to folks new to SVG, is to push through these challenges, since the ROI that SVG brings is well worth the effort. With that said, I hope that this article clarifies one of the more challenging areas…SVG Document Structure.

We look at:

* SVG's Root Element

* Grouping Elements

* Referencing Elements 

View corresponding blog post at:

http://unicorn-ui.com/blog/svg-document-structure.html

 

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

 

Mar 10, 2015

Interview with Petr Tichy a.k.a. ihatetomatoes.

 

We discuss:

* how Petr got in to web development

* the Greensock SVG animation libraries (http://greensock.com/gsap)–Petr currently prefers to use the TweenMax plugin for his animations

* Greensock gsap easings

* his impressive SVG Christmas animation (https://ihatetomatoes.net/svg-christmas/)

* how he approaches the process of code "deconstructions" (https://ihatetomatoes.net/tags/deconstruction/)

* the difficulties involved with going back and forth between Adobe Illustrator and the browser when tweaking SVG animations 

Resources

https://ihatetomatoes.net/svg has a list of SVG related resources to get started

http://unicorn-ui/blog also has some useful resources for learning SVG from scratch 

Promos

Petr graciously provided the SVG Immersion Podcast listeners with a 20% discount to his Skrollr Workshop. You'll have to listen to the show to get the promo code, but then you can go to: https://ihatetomatoes.net/product/skrollr-workshop/ and enter it when you purchase the course!

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

Mar 9, 2015

In this episode, we look at some of SVG's most compelling benefits, explain the difference between raster and vector, and finally provide a bit of SVG history.

 

WHAT IS SVG AND WHY DO YOU CARE? 

If you've been keeping an eye on the "pulse of the web" these days, you've undoubtedly notice that SVG–spelled out: Scalable Vector Graphics–is experiencing an amazing resurgence on the web. Let's examine what exactly this SVG thing is, and why you need to start learning more about it now.

 

SVG BENEFITS

Perhaps you've already played around a bit with SVG–or, perhaps not–but, either way, it's useful to know exactly what benefits a technology brings to understand exactly how much time is appropriate to invest in it to get maximum ROI. Here are some of the more compelling ones you may be interested in:

  • Resolution Independence and Scalability–unlike their Rastercounterparts, Vector images don't have to resort to anti-aliasingand the edges remain crisp as you zoom in and out
  • Dynamic–SVGs are interactive and can be manipulated at run-time via scripting or CSS
  • Backed by a proper DOM-based API (this relates to the last benefit, but explains why SVG is so amenable to scripting)
  • SVG supports the inclusion of text and raster images within a given SVG document so you get the best of both worlds if you need it
  • Availability of client-side raster filter effects such as drop shadows, gradients, etc.
  • Inline SVG is styleable via CSS (excluding some pesky browsers edge cases of course!)
  • W3C Open Standard with excellent import/export capabilities ex. you can export an Adobe Illustrator file; import it in to Sketch or Inkspace, tweak some more, and then render it in a web browser
  • Designer Friendly–designers can use tools they love like AI and simply export graphics to SVG
  • SEO and Accessibility wins since the graphic image is semantically described by an underlying XML text-based structure
  • Text–searchable, selectable, and translatable
  • Reusability–any shape or group of shapes can be instantantiated multiple times
  • These are just some of the benefits, but let's get in to explaining exactly what IS SVG next…

 

RASTER VS. VECTOR 

To understand the Scalable Vector part of SVG, we need to understand what vector is, and contrast it to raster (the more common image counterpart in use).

 

Raster 

A simple definition of a raster image is: a rectangular series of pixels, where each pixel defines an RGB color value. This is a simplified (if not dumbed down) definition, but will suffice for our purposes.

The series of pixels described above, is also known as a bitmap. Bitmaps are generally compressed for storage, and then decompressed by a viewing program as needed. 

Some popular raster image formats are: JPG (or JPEG), PNG, and GIF. These image formats are prolific and, thus, support for raster images is ubiquitous. This wide-spread usage explains the excellent back support for raster images, and supporting legacy browsers/systems is pretty much a non-issue. However, raster images have some disadvantages:

  • Static–raster images are generally not self-aware, so you can't easily change them at run-time
  • Pixelation–when zoomed, edges start to exhibit a "stair-stepping", or "jagged" effect. This is generally circumnavigated by means of anti-aliasing, a process which, essentially, detects and blurs an image's edges creating the optical illusion of smooth edges. But, as you zoom in, these sorts of techniques become less and less effective, and the eye is distracted by the rather ugly visual artifacts in the zoomed raster image.

 

Vector

A vector image is: a series of instructions that describe to a viewing program how to draw shapes comprised of lines and curves. These instructions map to a series of grid points (aka coordinates) where the lines or curves are to be drawn.

 

Rendering

Interestingly, the actual rendered vector image, is rendered as a raster image by the viewing program, since: all modern displays are raster-oriented 

However, due to the way vector graphics are defined (as a series of commands or instructions at geometric points), the rendering engine can achieve feats such as zooming via some simple multiplication and a redraw. This fact, makes SVG wonderful when it comes to, ahem, scalability.

While vector-based graphics are not as ubiquitous as raster, they have some definite advantages:

  • vector graphics are object-based and thus self-aware (so a circle "knows" it's a circle and, as such, can be altered or morphed at run-time)
  • resolution independence and scalability (Are we repeating ourselves!? Fine, but here's another compelling example for you: a printer can utilize its full resolution resulting in a sharper printed page).

 

Read the corresponding blog post at:

http://unicorn-ui.com/blog/what-is-svg-and-why-do-you-care.html

The short SVG "history lesson" was drawn from Doug Scheper's SVG workshop at frontendmasters that I recently attended:

https://frontendmasters.com/workshops/svg/

Music Attributions:

Loop Freesky–dEbE–http://www.freesound.org/people/bebeto/sounds/554/ 

frankum-http://www.freesound.org/people/frankum/sounds/237581/ (adapted with vocals by Nico Dotti)

notembug-Epic Tribal Drums–http://www.freesound.org/people/notembug/sounds/264284/

« Previous