Wes Bos & Scott Tolinski - Full Stack JavaScript Web Developers

Zpravodajství

Technologické zprávy

Technika

Large Files - CDNs, Image Compression, Video Hosting, and Big Zips

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>Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?!</p> <h2 id="cloudinary">Cloudinary</h2> <p><a href= "https://cloudinary.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=Cloudinary_Syntax_podcast" target="_blank" rel="noopener">Cloudinary</a> is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!</p> <p>Also check out Cloudinary's <a href= "http://www.imagecon.com/?utm_source=Syntax.fm&utm_medium=Podcast&utm_content=ImageCon_Syntax_podcast" target="_blank" rel="noopener">ImageCon</a> conference - use the code SYNTAX99 for a discount when checking out.</p> <h2 id="xojo-sponsor">Xojo — Sponsor</h2> <p>Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.</p> <p>With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.</p> <p>Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.</p> <p>Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.</p> <p>Listeners of this show get 20% off with the coupon code SYNTAX over at <a href="http://xojo.com/syntax" target="_blank" rel= "noopener">xojo.com/syntax</a></p> <h2 id="show-notes">Show Notes</h2> <p>1:30</p> <ul> <li>Chit-chatting about GraphQL Testing</li> </ul> <p>3:45</p> <ul> <li>What is a CDN? Why do you need one?</li> <li>How does the internet even work?</li> </ul> <p>7:00</p> <ul> <li>Amazon S3 + Cloudfront</li> <li>CacheFly</li> <li>MaxCDN</li> <li>Cloudflare</li> </ul> <p>11:30</p> <ul> <li>Talking about Image Formats</li> <li><a href="https://developers.google.com/speed/webp/" target= "_blank" rel="noopener">WebP</a></li> <li><a href="https://caniuse.com/#search=webp" target="_blank" rel= "noopener">WebP CanIUse</a></li> </ul> <p>16:00</p> <ul> <li>Losslesss VS Lossy</li> <li>Stripping image meta data like EXIF</li> <li><a href="https://imageoptim.com/mac" target="_blank" rel= "noopener">Image Optim App</a></li> <li><a href="https://github.com/imagemin/imagemin" target="_blank" rel="noopener">ImageMin</a></li> <li><a href="https://www.npmjs.com/package/gulp-imagemin" target= "_blank" rel="noopener">Gulp ImageMin</a></li> <li><a href="https://github.com/Klathmon/imagemin-webpack-plugin" target="_blank" rel="noopener">ImageMin Webpack</a></li> <li><a href="https://www.npmjs.com/search?q=imagemin" target= "_blank" rel="noopener">ImageMin Plugins on npm</a></li> </ul> <p>26:00</p> <ul> <li>How we use Cloudinary</li> </ul> <p>29:00</p> <ul> <li>Hosting, Encoding and Compressing Videos</li> <li><a href="https://syntax.fm/show/014/our-stacks-explained" target="_blank" rel="noopener">Our Stacks Explained Syntax Podcast</a></li> <li><a href="https://vimeo.com/professionals" target="_blank" rel= "noopener">Vimeo Pro</a></li> <li><a href="https://rg3.github.io/youtube-dl/" target="_blank" rel="noopener">YouTube DL</a></li> <li><a href="https://www.brightcove.com/en/" target="_blank" rel= "noopener">BrightCove</a></li> <li><a href="https://wistia.com/" target="_blank" rel= "noopener">Wista</a></li> <li><a href="https://sproutvideo.com/" target="_blank" rel= "noopener">Sprout Video</a></li> <li><a href="https://cloudinary.com/documentation/video_management" target="_blank" rel="noopener">Cloudinary Video</a></li> </ul> <p>41:00</p> <ul> <li>What is Cloudflare?</li> <li><a href= "https://blog.cloudflare.com/introducing-cloudflare-stream/" target="_blank" rel="noopener">Cloudflare Video is coming</a></li> </ul> <p>46:30</p> <ul> <li><a href="https://webtorrent.io/" target="_blank" rel= "noopener">Web Torrent</a></li> <li><a href= "https://techcrunch.com/2014/04/17/spotify-removes-peer-to-peer-technology-from-its-desktop-client/" target="_blank" rel="noopener">Apparently Spotify doesn't use P2P any longer</a></li> </ul> <p>50:00</p> <ul> <li>Big Zips!</li> <li>How do we host large video downloads?</li> <li>Amazon S3 + Cloudfront</li> <li><a href="https://handbrake.fr/" target="_blank" rel= "noopener">Handbrake</a></li> <li><a href="https://www.backblaze.com/b2/cloud-storage.html" target="_blank" rel="noopener">Backblaze B2</a></li> </ul> <p>55:00</p> <ul> <li>Video Formats</li> </ul> <p>59:00</p> <ul> <li><a href="https://github.com/svg/svgo" target="_blank" rel= "noopener">SVGO</a></li> <li><a href="https://jakearchibald.github.io/svgomg/" target= "_blank" rel="noopener">SVGOMG</a></li> </ul> <h2 id="siiick-pixxxx">Siiick Pixxxx</h2> <ul> <li>Wes: <a href= "https://chrome.google.com/webstore/detail/nodejs-v8-inspector-manag/gnhhdgbaldcilmgcpfddgdbkhjohddkj?hl=en" target="_blank" rel="noopener">Node Inspector Manager</a></li> <li>Scott: <a href="https://shinywhitebox.com/ishowu-instant" target="_blank" rel="noopener">iShowUInstant</a></li> </ul> <h2 id="shameless-plugz">Shameless Plugz</h2> <ul> <li><a href="https://leveluptutorials.com/pro" target="_blank" rel= "noopener">Level Up Pro</a></li> <li><a href="http://wesbos.com/courses" target="_blank" rel= "noopener">Wes' Courses</a></li> </ul> <h2 id="tweet-us-your-tasty-treats-">Tweet us your tasty treats!</h2> <ul> <li><a href="https://www.instagram.com/stolinski/" target="_blank" rel="noopener">Scott's Instagram</a></li> <li><a href="https://www.instagram.com/LevelUpTutorials/" target= "_blank" rel="noopener">LevelUpTutorials Instagram</a></li> <li><a href="https://www.instagram.com/wesbos/" target="_blank" rel="noopener">Wes' Instagram</a></li> <li><a href="https://twitter.com/wesbos" target="_blank" rel= "noopener">Wes' Twitter</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>Make sure to include <a href= "https://twitter.com/SyntaxFM" target="_blank" rel= "noopener">@SyntaxFM</a> in your tweets</li> </ul>

Scott and Wes talk about working with images, videos and big zips. How do you host them? Do you need a CDN? What about compression?!
 Cloudinary Cloudinary is the best way to host, compress and transform your images on the web. Sign up for their free tier and get 10GB of bandwidth for free!
 Also check out Cloudinary's ImageCon conference - use the code SYNTAX99 for a discount when checking out.
 Xojo — Sponsor Xojo is a cross-platform development tool for creating native apps for desktop, mobile, web and Raspberry Pi.
 With Xojo you really can write just one version of your app, say, on the Mac, click a button, and have a completely native Windows version too.
 Xojo lets you abstract yourself from specific platform details, so you can focus on what makes your app unique. All apps have completely native controls, even if they weren’t developed on that platform. Just use drag and drop to create your user interface, and one language to program the functionality.
 Users also include Fortune 500 companies, citizen developers, professional developers, IT, hobbyists and students - anyone who wants to build apps faster.
 Listeners of this show get 20% off with the coupon code SYNTAX over at xojo.com/syntax
 Show Notes 1:30
 Chit-chatting about GraphQL Testing
 3:45
 What is a CDN? Why do you need one?
 How does the internet even work?
 7:00
 Amazon S3 + Cloudfront
 CacheFly
 MaxCDN
 Cloudflare
 11:30
 Talking about Image Formats
 WebP
 WebP CanIUse
 16:00
 Losslesss VS Lossy
 Stripping image meta data like EXIF
 Image Optim App
 ImageMin
 Gulp ImageMin
 ImageMin Webpack
 ImageMin Plugins on npm
 26:00
 How we use Cloudinary
 29:00
 Hosting, Encoding and Compressing Videos
 Our Stacks Explained Syntax Podcast
 Vimeo Pro
 YouTube DL
 BrightCove
 Wista
 Sprout Video
 Cloudinary Video
 41:00
 What is Cloudflare?
 Cloudflare Video is coming
 46:30
 Web Torrent
 Apparently Spotify doesn't use P2P any longer
 50:00
 Big Zips!
 How do we host large video downloads?
 Amazon S3 + Cloudfront
 Handbrake
 Backblaze B2
 55:00
 Video Formats
 59:00
 SVGO
 SVGOMG
 Siiick Pixxxx Wes: Node Inspector Manager

 Scott: iShowUInstant

 Shameless Plugz Level Up Pro
 Wes' Courses
 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

Large Files - CDNs, Image Compression, Video Hosting, and Big Zips

Poslechněte si podcast