Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

711: The Surprisingly Exciting World of Print + PDF CSS

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.

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more. <h3 class="code-line" data-line-start="2" data-line-end="3"><a id= "Show_Notes_2"></a>Show Notes</h3> <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:25:15">00:25:15</a> Welcome</li> <li class="has-line-data" data-line-start="5" data-line-end="6"> <a href="#t=01:27:04">01:27:04</a> Syntax Brought to you by Sentry</li> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="#t=01:52:00">01:52:00</a> Examples of how Wes uses print CSS</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:42:16">03:42:16</a> Using it for invoices or receipts</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:08:24">05:08:24</a> Delivering a book as a PDF</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=05:42:16">05:42:16</a> How do you load CSS only for printing?</li> <li class="has-line-data" data-line-start="10" data-line-end="11"> <a href="#t=10:41:08">10:41:08</a> Using units in CSS</li> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=11:29:15">11:29:15</a> CSS Counters</li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href= "https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_counter_styles/Using_CSS_counters"> MDN: CSS Counters</a></li> </ul> <pre><code class="has-line-data" data-line-start="14" data-line-end="36"> body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 { counter-reset: subchapter; /* set section to 0 */ } h2:before { content: counter(chapter) "." counter(subchapter) " "; counter-increment: subchapter; } h2 { counter-reset: section; font-size: 23px; } </code></pre> <ul> <li class="has-line-data" data-line-start="36" data-line-end="37"> <a href="#t=14:31:10">14:31:10</a> Named Pages</li> </ul> <pre><code class="has-line-data" data-line-start="38" data-line-end="51">@page title { @top { /* no header for title pages */ content: “”; } } @page chapter { @top { content: “This is a chapter page”; } } </code></pre> <ul> <li class="has-line-data" data-line-start="51" data-line-end="52"> <a href="#t=15:27:09">15:27:09</a> Margins, Headers + footers, Page Numbers</li> <li class="has-line-data" data-line-start="52" data-line-end="53"> <a href="#t=18:01:18">18:01:18</a> Debugging Print CSS</li> <li class="has-line-data" data-line-start="53" data-line-end="54"> <a href="#t=19:57:18">19:57:18</a> Getting into a PDF</li> <li class="has-line-data" data-line-start="54" data-line-end="55"> <a href="http://docraptor.com/">Docraptor</a></li> <li class="has-line-data" data-line-start="55" data-line-end="56"> <a href="https://playwright.dev/">Playwright</a></li> <li class="has-line-data" data-line-start="56" data-line-end="57"> <a href="https://pptr.dev/">Puppeteer</a></li> <li class="has-line-data" data-line-start="57" data-line-end="58"> <a href="https://www.npmjs.com/package/jspdf">JSPdf</a></li> <li class="has-line-data" data-line-start="58" data-line-end="60"> <a href="#t=24:45:04">24:45:04</a> Other Things to consider</li> </ul> <h3 class="code-line" data-line-start="60" data-line-end="61"> <a id="Hit_us_up_on_Socials_60"></a>Hit us up on Socials!</h3> Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a>

In this episode of Syntax, Wes and Scott talk about things to consider when printing something from your website or app including loading CSS only for printing, using units in CSS, CSS counters, creating a PDF, naming pages when printing, and more.
 Show Notes  00:25:15 Welcome
 01:27:04 Syntax Brought to you by Sentry
 01:52:00 Examples of how Wes uses print CSS
 03:42:16 Using it for invoices or receipts
 05:08:24 Delivering a book as a PDF
 05:42:16 How do you load CSS only for printing?
 10:41:08 Using units in CSS
 11:29:15 CSS Counters
  MDN: CSS Counters

  body { counter-reset: chapter; /* create a chapter counter scope */ } h1:before { content: "Section " counter(chapter) " "; counter-increment: chapter; /* add 1 to chapter */ } h1 {     counter-reset: subchapter; /* set section to 0 */   }   h2:before {     content: counter(chapter) "." counter(subchapter) " ";     counter-increment: subchapter;   }   h2 {     counter-reset: section;     font-size: 23px;   }  14:31:10 Named Pages
 @page title {  @top {   /* no header for title pages */   content: “”;  } } @page chapter {  @top {   content: “This is a chapter page”;  } }  15:27:09 Margins, Headers + footers, Page Numbers
 18:01:18 Debugging Print CSS
 19:57:18 Getting into a PDF
 Docraptor

 Playwright

 Puppeteer

 JSPdf

 24:45:04 Other Things to consider
  Hit us up on Socials! Syntax: X Instagram Tiktok LinkedIn Threads
 Wes: X Instagram Tiktok LinkedIn Threads
 Scott: X Instagram Tiktok LinkedIn Threads

Aplikace Youradio Talk

711: The Surprisingly Exciting World of Print + PDF CSS

Poslechněte si podcast