Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Hasty Treat - CSS Grid Masonry (Grid Level 3)

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 class="has-line-data" data-line-start="7" data-line-end="8">In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.</p> <h2 class="code-line" data-line-start="9" data-line-end="10"><a id= "LogRocket__Sponsor_9" name="LogRocket__Sponsor_9"></a>LogRocket - Sponsor</h2> <p class="has-line-data" data-line-start="10" data-line-end="11"> LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at <a href= "https://logrocket.com/syntax">logrocket.com/syntax</a>.</p> <h2 class="code-line" data-line-start="12" data-line-end="13"> <a id="Show_Notes_12" name="Show_Notes_12"></a>Show Notes</h2> <p class="has-line-data" data-line-start="14" data-line-end="15"> 04:33 - The spec</p> <ul> <li class="has-line-data" data-line-start="15" data-line-end="16"> <a href= "https://drafts.csswg.org/css-grid-3/">https://drafts.csswg.org/css-grid-3/</a></li> <li class="has-line-data" data-line-start="16" data-line-end="18"> <a href= "https://twitter.com/wesbos/status/1320735900343668738">https://twitter.com/wesbos/status/1320735900343668738</a></li> </ul> <p class="has-line-data" data-line-start="18" data-line-end="19"> 06:10 - How it works</p> <ul> <li class="has-line-data" data-line-start="19" data-line-end="24"> <code>masonry-auto-flow: next;</code> <ol> <li class="has-line-data" data-line-start="20" data-line-end="21"> It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.</li> <li class="has-line-data" data-line-start="21" data-line-end="22"> Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.</li> <li class="has-line-data" data-line-start="22" data-line-end="24"> <code>grid-template-columns</code> and <code>grid-template-rows</code> can now be marked as masonry and this specifies which axis will be masonry.</li> </ol> </li> </ul> <p class="has-line-data" data-line-start="24" data-line-end="25"> 09:06 - The implicit grid</p> <ul> <li class="has-line-data" data-line-start="25" data-line-end="26"> <a href= "https://drafts.csswg.org/css-grid-3/#%23implicit-grid">https://drafts.csswg.org/css-grid-3/#%23implicit-grid</a></li> <li class="has-line-data" data-line-start="26" data-line-end="27"> The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.</li> <li class="has-line-data" data-line-start="27" data-line-end="29"> Interesting in a column situation (see images).</li> </ul> <p class="has-line-data" data-line-start="29" data-line-end="30"> 13:25 - Thoughts</p> <ul> <li class="has-line-data" data-line-start="30" data-line-end="32"> Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.</li> </ul> <h2 class="code-line" data-line-start="32" data-line-end="33"> <a id="Links_32" name="Links_32"></a>Links</h2> <ul> <li class="has-line-data" data-line-start="33" data-line-end="34"> <a href="https://desandro.com/">David DeSandro</a></li> <li class="has-line-data" data-line-start="34" data-line-end="35"> <a href="https://metafizzy.co/">https://metafizzy.co/</a></li> <li class="has-line-data" data-line-start="35" data-line-end="36"> <a href="https://chriscoyier.net/">Chris Coyier</a></li> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="https://caniuse.com/">https://caniuse.com/</a></li> <li class="has-line-data" data-line-start="37" data-line-end="38"> <a href="https://isotope.metafizzy.co/">Isotope</a></li> <li class="has-line-data" data-line-start="38" data-line-end="40"> <a href="https://flickity.metafizzy.co/">Flickity</a></li> </ul> <h2 class="code-line" data-line-start="40" data-line-end="41"> <a id="Tweet_us_your_tasty_treats_40" name= "Tweet_us_your_tasty_treats_40"></a>Tweet us your tasty treats!</h2> <ul> <li class="has-line-data" data-line-start="41" data-line-end="42"> <a href="https://www.instagram.com/stolinski/">Scott’s Instagram</a></li> <li class="has-line-data" data-line-start="42" data-line-end="43"> <a href= "https://www.instagram.com/LevelUpTutorials/">LevelUpTutorials Instagram</a></li> <li class="has-line-data" data-line-start="43" data-line-end="44"> <a href="https://www.instagram.com/wesbos/">Wes’ Instagram</a></li> <li class="has-line-data" data-line-start="44" data-line-end="45"> <a href="https://twitter.com/wesbos">Wes’ Twitter</a></li> <li class="has-line-data" data-line-start="45" data-line-end="46"> <a href="https://www.facebook.com/wesbos.developer">Wes’ Facebook</a></li> <li class="has-line-data" data-line-start="46" data-line-end="47"> <a href="https://twitter.com/stolinski">Scott’s Twitter</a></li> <li class="has-line-data" data-line-start="47" data-line-end="48"> Make sure to include <a href= "https://twitter.com/SyntaxFM">@SyntaxFM</a> in your tweets</li> </ul>

In this Hasty Treat, Scott and Wes talk about CSS Grid Level 3 — why it’s such a cool thing and why they’ve been waiting for it for so long.
 LogRocket - Sponsor LogRocket lets you replay what users do on your site, helping you reproduce bugs and fix issues faster. It’s an exception tracker, a session re-player and a performance monitor. Get 14 days free at logrocket.com/syntax.
 Show Notes 04:33 - The spec
  https://drafts.csswg.org/css-grid-3/

 https://twitter.com/wesbos/status/1320735900343668738

  06:10 - How it works
  masonry-auto-flow: next;  It first puts all the items that are explicitly placed onto the grid. Items that you have a set start/stop value for are first put down.
 Then it takes the next item that it to be placed and finds a spot for it. This is different because with CSS Grid you normally have to place the next item on the next row or column.
 grid-template-columns and grid-template-rows can now be marked as masonry and this specifies which axis will be masonry.

  09:06 - The implicit grid
  https://drafts.csswg.org/css-grid-3/#%23implicit-grid

 The implicit grid is formed in the same way as a regular grid container. However, it’s only used in the grid axis.
 Interesting in a column situation (see images).
  13:25 - Thoughts
  Power tools for layout in CSS — opens up a ton of possibilities and completes the functionality we use to dream of in CSS.
  Links  David DeSandro

 https://metafizzy.co/

 Chris Coyier

 https://caniuse.com/

 Isotope

 Flickity

  Tweet us your tasty treats!  Scott’s Instagram

 LevelUpTutorials Instagram

 Wes’ Instagram

 Wes’ Twitter

 Wes’ Facebook

 Scott’s Twitter

 Make sure to include @SyntaxFM in your tweets

Aplikace Youradio Talk

Hasty Treat - CSS Grid Masonry (Grid Level 3)

Poslechněte si podcast