Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

What's New in CSS? Variables, Scoping, New Selectors and Color Functions

Syntax - Tasty Web Development Treats

Full Stack Developers Wes Bos and Scott Tolinski dive deep into web development topics, explaining how they work and talking about their own experiences. They cover from JavaScript frameworks like React, to the latest advancements in CSS to simplifying web tooling.

<p>Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?</p> <h2 id="bug-replay-sponsor">Bug Replay - Sponsor</h2> <p>You need to try out <a href="https://www.bugreplay.com/" target="_blank" rel="noopener">Bug Replay</a> for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster.</p> <h2 id="freshbooks-sponsor">Freshbooks - Sponsor</h2> <p>If you are a small business or freelancer check out<a href= "https://freshbooks.com/syntax" target="_blank" rel= "noopener"> Freshbooks.com Cloud Accounting</a>and get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.</p> <h2 id="the-show-notes-">The Show Notes!</h2> <p>03:30</p> <ul> <li>IT'S NOT CALLED CSS4</li> <li>You can find the different levels over at <a href= "https://drafts.csswg.org/" target="_blank" rel="noopener">CSS Working Group Drafts</a></li> </ul> <p>06:24</p> <ul> <li>CSS Custom Properties (CSS Variables)</li> <li>Bite and chew over the syntax - it's backwards compatible</li> <li>What's the difference between this and Sass/Less/Stylus?</li> <li><a href="https://javascript30.com/" target="_blank" rel= "noopener">JavaScript30.com</a> Day 3 uses JavaScript + CSS Variables</li> <li>CSS Tricks: <a href= "https://css-tricks.com/css-attr-function-got-nothin-custom-properties/" target="_blank" rel="noopener">The CSS attr() function got nothin’ on custom properties</a></li> <li>Independent Transforms - <code>transform: rotateX(var(--x)) translateY(var(--y));</code></li> </ul> <p>19:20</p> <ul> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/filter" target= "_blank" rel="noopener">CSS Filters</a></li> <li>Drop Shadow Filter</li> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/SVG/Applying_SVG_effects_to_HTML_content" target="_blank" rel="noopener">SVG Filters</a></li> </ul> <p>28:20</p> <ul> <li><a href= "https://hashnode.com/post/understanding-rrggbbaa-color-notation-cisvdr52x088fwt53h1drf6m2" target="_blank" rel="noopener">RRGGBBAA</a></li> <li><a href= "https://stackoverflow.com/questions/15852122/hex-transparency-in-colors" target="_blank" rel="noopener">Hex transparency in colors</a></li> </ul> <p>31:00</p> <ul> <li>Colour Functions</li> <li><a href="http://cssnext.io/" target="_blank" rel="noopener">CSS Next</a></li> <li><a href="https://drafts.csswg.org/css-color/#modifying-colors" target="_blank" rel="noopener">Draft Spec for Color Functions</a></li> </ul> <p>36:00</p> <ul> <li>CSS Level 4 Selectors</li> <li>ITS NOT CSS4!!!!!!</li> <li><a href="http://css4.rocks/" target="_blank" rel= "noopener">css4.rocks</a></li> </ul> <p>40:00</p> <ul> <li>nth-of-selectoed</li> <li><code>:nth-child(3n of img.dog)</code></li> <li><code>div:has(img)</code></li> </ul> <p>44:00</p> <ul> <li>Some not-so-new-but-still-cool units</li> <li><a href="https://css-tricks.com/fun-viewport-units/" target= "_blank" rel="noopener">Viewport Units</a></li> <li>min-height: 100vh</li> <li>ch units</li> <li>ex units</li> <li><a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/angle" target= "_blank" rel="noopener">CSS Angles</a> - deg(), grad(), rad(), turn()</li> </ul> <h2 id="sick-picks">Sick Picks</h2> <ul> <li>Scott: <a href="https://store.google.com/product/pixel_2" target="_blank" rel="noopener">Google Pixel 2 XL</a></li> <li>Wes: <a href="http://amzn.to/2ng5LhZ" target="_blank" rel= "noopener">Anker 5 Port 40w USB Charger</a></li> <li><a href="http://amzn.to/2AgOYjx" target="_blank" rel= "noopener">Anker 10 Port 60w USB Charger</a></li> <li><a href="http://amzn.to/2zOT03R" target="_blank" rel= "noopener">Anker 5 Port 60w with a USB-C Port</a></li> </ul> <h2 id="tweet-us-your-tasty-treats-">Tweet us your tasty treats!</h2> <ul> <li><a href="https://twitter.com/wesbos" target="_blank" rel= "noopener">Wes' Twitter</a></li> <li><a href="https://www.instagram.com/wesbos/" target="_blank" rel="noopener">Wes' Instagram</a></li> <li><a href="https://www.facebook.com/wesbos.developer" target= "_blank" rel="noopener">Wes' Facebook</a></li> <li><a href="https://twitter.com/stolinski" target="_blank" rel= "noopener">Scott's Twitter</a></li> <li><a href="https://www.instagram.com/stolinski/" target="_blank" rel="noopener">Scott's Instagram</a></li> <li>Make sure to include <a href= "https://twitter.com/SyntaxFM" target="_blank" rel= "noopener">@SynaxFM</a> in your tweets</li> </ul>

Wes and Scott talk about the future of CSS - what is new and what should we expect to be coming in the near future?
 Bug Replay - Sponsor You need to try out Bug Replay for recording and re-playing browser based bugs. It's a bug reporting tool that can be used at all stages of development and by anyone in your organization. Provide your dev team with detailed reports so they can fix bugs faster.
 Freshbooks - Sponsor If you are a small business or freelancer check out Freshbooks.com Cloud Accountingand get 30 days free. Make sure to enter SYNTAX into the "How did you hear about us" section.
 The Show Notes! 03:30
 IT'S NOT CALLED CSS4
 You can find the different levels over at CSS Working Group Drafts

 06:24
 CSS Custom Properties (CSS Variables)
 Bite and chew over the syntax - it's backwards compatible
 What's the difference between this and Sass/Less/Stylus?

JavaScript30.com Day 3 uses JavaScript + CSS Variables
 CSS Tricks: The CSS attr() function got nothin’ on custom properties

 Independent Transforms - transform: rotateX(var(--x)) translateY(var(--y));
 19:20
 CSS Filters
 Drop Shadow Filter
 SVG Filters
 28:20
 RRGGBBAA
 Hex transparency in colors
 31:00
 Colour Functions
 CSS Next
 Draft Spec for Color Functions
 36:00
 CSS Level 4 Selectors
 ITS NOT CSS4!!!!!!
 css4.rocks
 40:00
 nth-of-selectoed
 :nth-child(3n of img.dog)
 div:has(img)
 44:00
 Some not-so-new-but-still-cool units
 Viewport Units
 min-height: 100vh
 ch units
 ex units

CSS Angles - deg(), grad(), rad(), turn()
 Sick Picks Scott: Google Pixel 2 XL

 Wes: Anker 5 Port 40w USB Charger

 Anker 10 Port 60w USB Charger
 Anker 5 Port 60w with a USB-C Port
 Tweet us your tasty treats! Wes' Twitter
 Wes' Instagram
 Wes' Facebook
 Scott's Twitter
 Scott's Instagram
 Make sure to include @SynaxFM in your tweets

Aplikace Youradio Talk

What's New in CSS? Variables, Scoping, New Selectors and Color Functions

Poslechněte si podcast