Headless Chrome & Cloudinary for progressively enhanced dynamic content on the web Ire_Aderinokun JAMstack_conf_sf 2019

73% of websites in 2006 were reliant on Javascript for their core functionality

😕 Performance 😕 Accessibility 😕 Progressive Enhancement

We can use Javascript and the JAMstack to improve Javascript

💻 Frontend Developer & Cofounder, BuyCoins # Lagos, Nigeria Google Web Expert & Cloudinary Media Expert Writer, bitsofco.de

<p class=”ciu_embed” data-feature=”flexbox” data-periods=”future_1,current,past_1”> <a href=“http://caniuse.com/#feat=flexbox“> Can I Use flexbox? </a> Data on support for the flexbox feature across the major browsers from caniuse.com. </p>

😕

😕 Javascript disabled 😕 Slow connections 😕 Emails, READMEs, etc

🤔

💡

😕 😊

const puppeteer = require(‘puppeteer’); const browser = await puppeteer.launch({ defaultViewport: { width: 800, height: 800, isLandscape: true } }); const page = await browser.newPage(); await page.goto( embedUrl, { waitUntil: ‘networkidle2’ } ); const screenshot = await page.screenshot({ omitBackground: true, encoding: ‘binary’ }); await browser.close();

const puppeteer = require(‘puppeteer’); const browser = await puppeteer.launch({ defaultViewport: { width: 800, height: 800, isLandscape: true } }); const page = await browser.newPage(); await page.goto( embedUrl, { waitUntil: ‘networkidle2’ } ); const screenshot = await page.screenshot({ omitBackground: true, encoding: ‘binary’ }); await browser.close();

const puppeteer = require(‘puppeteer’); const browser = await puppeteer.launch({ defaultViewport: { width: 800, height: 800, isLandscape: true } }); const page = await browser.newPage(); await page.goto( embedUrl, { waitUntil: ‘networkidle2’ } ); const screenshot = await page.screenshot({ omitBackground: true, encoding: ‘binary’ }); await browser.close();

const puppeteer = require(‘puppeteer’); const browser = await puppeteer.launch({ defaultViewport: { width: 800, height: 800, isLandscape: true } }); const page = await browser.newPage(); await page.goto( embedUrl, { waitUntil: ‘networkidle2’ } ); const screenshot = await page.screenshot({ omitBackground: true, encoding: ‘binary’ }); await browser.close();

const cloudinary = require(‘cloudinary’).v2; cloudinary.config(/*” config here */$); cloudinary.uploader.upload_stream((error, result) =>& { if (error) reject(error) return result.secure_url; }).end(screenshot);

const cloudinary = require(‘cloudinary’).v2; cloudinary.config(/*” config here */$); cloudinary.uploader.upload_stream((error, result) =>& { if (error) reject(error) return result.secure_url; }).end(screenshot);

const cloudinary = require(‘cloudinary’).v2; cloudinary.config(/*” config here */$); cloudinary.uploader.upload_stream((error, result) =>& { if (error) reject(error) return result.secure_url; }).end(screenshot);

const cloudinary = require(‘cloudinary’).v2; cloudinary.config(/*” config here */$); cloudinary.uploader.upload_stream((error, result) =>& { if (error) reject(error) return result.secure_url; }).end(screenshot);

<p class=”ciu_embed” data-feature=”flexbox” data-periods=”future_1,current,past_1”> <a href=“http://caniuse.com/#feat=flexbox“> Can I Use flexbox? </a> Data on support for the flexbox feature across the major browsers from caniuse.com. </p> 😕

<p class=”ciu_embed” data-feature=”flexbox” data-periods=“future_1,current,past_1”> <a href=“http://caniuse.com/#feat=flexbox“> <img src=“https://res.cloudinary.com/ireaderinokun/image/upload/v1571256076/ caniuse-embed/flexbox-2019-10-16.png” alt=”Data on support for the flexbox feature across the m…”> </a> </p> 😊

<p class=”ciu_embed” data-feature=”flexbox” data-periods=“future_1,current,past_1”> <a href=“http://caniuse.com/#feat=flexbox“> <picture> <source type=”image/webp” srcset=”https://res.cloudinary.com/ ireaderinokun/image/upload/v1571256076/caniuse-embed/flexbox-2019-10-16.webp”> <source type=”image/png” srcset=”https://res.cloudinary.com/ ireaderinokun/image/upload/v1571256076/caniuse-embed/flexbox-2019-10-16.png”> <source type=”image/jpeg” srcset=”https://res.cloudinary.com/ ireaderinokun/image/upload/v1571256076/caniuse-embed/flexbox-2019-10-16.jpg”> <img src=”https://res.cloudinary.com/ireaderinokun/image/upload/ v1571256076/caniuse-embed/flexbox-2019-10-16.png” alt=”Data on support for the flexbox feature across the major browsers from caniuse.com”> </picture> </a> </p> 🤩

JAMstackifying

JAMstackifying

exports.handler = async (event, context) =>& { const const const const params = JSON.parse(event.body); feature = params.feature; periods = params.periods; a11yColours = params.a11yColours; try { const screenshot = await takeScreenshot(feature, periods, a11yColours); const image = await uploadScreenshot(feature, screenshot); return { statusCode: 200, body: JSON.stringify(image) }; } catch (err) { return { statusCode: 500, body: err.toString() } } };

Thank you! 🌐 Where to find me 📚 Further reading & sources • ireaderinokun.com • http://news.bbc.co.uk/2/hi/technology/ 6210068.stm • bitsofco.de • • @ireaderinokun https://bitsofco.de/using-a-headlessbrowser-to-capture-page-screenshots/ • https://bitsofco.de/how-to-upload-ascreenshot-from-puppeteer-tocloudinary/ ⭐ Use the embed • caniuse.bitsofco.de