Summary

Rachel Nabors joins us to chat all about the Web Animations API. Learn what benefits this API provides developers and when to use the Web Animations API instead of CSS or third-party JavaScript libraries. Find out how Rachel still delivers great web experiences to platforms which don’t yet support the API and much more.

This Week in Web News

Resources

Guests

Panel

Follow The Web Platform podcast on Twitter for regular updates @TheWebPlatform.

Direct download: WPP_141_Web_Animations_API.mp3
Category:CSS -- posted at: 7:41am EST
Comments[0]

Summary

This week Erik Meyer joins us to talk about the past, present and future of CSS. Delving into some web history, discussing why CSS can be overlooked in regards to app development and the reasons people can be off-put by CSS this episode is a delightful insight into the mind of a web legend.

Resources

  • Angular 4.4.X released. Be sure to update to the latest patch in 4.4 as there was an issue with the initial release
  • Quick shoutout to the npm package ng-packagr for making it simple to package angular modules for npm
  • As of Firefox 57.0a1, U2F is sitting behind a flag, which hopefully land soon the ability to use YubiKeys and the related security keys
  • Polymer 2.1.0 landed, which now allows the setting of Polymer.passiveTouchGeastures to enable better scroll performance
  • iOS 11 begins rolling out today, which means that Safari 11 has a new set of fixes and features, including more standards compliant flexbox, flags to enable experimental features, WebRTC and Media Capture for real-time video/audio, and much more
  • The upcoming iPhone X “notch” does seem to have workarounds for the web which is good news

Guests

Panel

Follow The Web Platform podcast on Twitter for regular updates @TheWebPlatform.

 

Direct download: WPP_139_The_state_of_CSS.mp3
Category:CSS -- posted at: 10:50am EST
Comments[0]

Summary

Harry Roberts (@CSSWizardry) talks with us about scaling CSS in code and across large teams. We also discuss the CSS in the Web Platform standards, the history of CSS, refactoring code, as well as projects like Houdini which aims ‘to jointly develop features that explain the “magic” of Styling and Layout on the web.’

Resources

Direct download: episode-109_css-performance-and-maintenance.mp3
Category:CSS -- posted at: 9:54am EST
Comments[0]

Rachel Andrew (@RachelAndrew) , Managing Director and founder of edgeofmyseat.com (currently working exclusively on CMS Perch), talks withe panel on the mysterious ways of CSS Layout. Rachel has been speaking quite a lot on the subject in the developer speaking circuit for a while now. Join us as she shares her stylish insights on Grid, Flexbox, Floats, Bootstrap, Regions, and much more.

Resources

Direct download: episode-93_css-layout-composition-and-modules.mp3
Category:CSS -- posted at: 8:08am EST
Comments[0]

50: The Evolution of CSS

Summary

In episode 50 we talk with CSS master Tab Atkins Jr. (@tabatkins) about the history of Cascading Style Sheets (CSS) & how they have evolved into what we use today. We also cover preprocessors, lesser known specs, css as a programming language, and more.

Resources

Panelists

Direct download: episode-50_the-evolution-of-css.mp3
Category:CSS -- posted at: 11:18am EST
Comments[0]

10: Mathematics & Dynamic CSS Visualizations

In the future, CSS visualizations will dramatically change. How they will change is debatable but they will enable developers to do a lot more than they may think. We may see custom properties like variables to further improve DRY (Don’t Repeat Yourself) code & on-the-fly cascading calculations, CSS Extensions to create our own custom selector properties, custom functions, & custom selector combinations.  Some of these rules are even starting to be implemented in browsers today like “will-change” to pre-optimize changes in DOM structures and CSS Shapes. These will further help us define display, flow, & wrapping of content and it’s containers. CSS is moving rapidly and this is just the tip of what is to come for web development in the coming years or even months in some cases.

 

It used to be to create powerful visualizations in a browser you needed to use Flash or some non-standard tool to get the performance & consistency you needed from complicated animations. Today we have help in bridging the gaps of today and tomorrow. CSS Preprocessors given us powerful features in our CSS code. Some of the more notable ones are loops, conditionals, variables, custom mixins/functions, and heavy grade math calculations. While these are extremely useful, they only help us, currently, before we even see CSS in the browser. Online tools like Codepen.io help us quickly build and view CSS, HTML, & JavaScript that can be easily shared and updated without the overhead of understanding setup, build processess, or dependency management.


Although extremely powerful, this means that the tools we have only have the ability to allow CSS to react to change in the DOM in a limited capacity. Looking at todays standard CSS, we now have ways of doing some dynamic calculations and conditions in the browser and device viewers. Directives like @supports and @media give us powerful conditionals. We have several types units of measurement, such as viewport units, frequency units, time units, & resolution units. Rules like ‘calc’ give us the ability to computationally react to mutations in the DOM tree. Keyframe Directives give us robust animation, the ‘transform’ rule yields great power to setup and animate DOM structures and also dynamically change rotation, skewing, scaling, and translation both 2D and 3D space, all without needing one line of JavaScript.

Resources

http://davidwalsh.name

http://codepen.io/thebabydino/live/08634ee35593c97bd8cfb2ddd9324c24

http://davidwalsh.name/css-supports

http://www.w3.org/TR/css3-values/

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_transforms

http://css-tricks.com/five-questions-with-david-walsh/

http://codepen.io/collection/wHune/

http://codepen.io/thebabydino/pen/jgtof

http://codepen.io/thebabydino/

http://techblog.rga.com/math-driven-css/

http://davidwalsh.name/css-flip

http://css-tricks.com/a-couple-of-use-cases-for-calc/

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math

https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Using_CSS_animations

http://stackoverflow.com/users/1397351/ana

http://davidwalsh.name/svg-animation

http://stackoverflow.com/users/1397351/ana

http://stackoverflow.com/help/badges/17/necromancer?userid=1878132

http://sass-lang.com/

http://www.myth.io/

http://dev.w3.org/csswg/css-extensions/

http://sarasoueidan.com/

http://shoptalkshow.com/episodes/129-sara-soueidan/

http://5by5.tv/webahead/81

http://www.sitepoint.com/css-variables-can-preprocessors-cant/

http://codepen.io/shankarcabus/pen/jcyDA

http://daneden.github.io/animate.css/

http://codepen.io/thebabydino/tag/calc()/

http://figures.spec.whatwg.org/

Direct download: episode-10_mathematics-and-dynamic-css-visualizations.mp3
Category:CSS -- posted at: 9:19am EST
Comments[1]

1