Alex Riviere

Developer Experience Engineer @ MURAL

Find me online: @fimion

Blog: https://alex.party

CSS-TRICKZ!

Bad Ideas, and Efficient Ways to Build Them

With many thanks, and apologies to Chris Coyier

I make bad ideas Really well

Sources of Inspiration:

  • GeoCities
  • Staring at the Sun
  • Bad domain suggestions

CSS-TRICKZ

First Try

<section id="articles"></section>
<script>
  startApp(articles){
    // add articles to our section#articles
  }
</script>
<script src="https://css-tricks.com/{path to api for posts}/?_jsonp=startApp">
</script>

Second Try: SSR!

function renderArticles(articles){
    const result = ""
    // add all the articles we get to result
    return result;
}

function createHTMLDoc(response){
    const indexBody = `
      <!DOCTYPE html>
      <html>
        <body>
        <section>{{addArticles}}</section>
        </body>
      </html>
    `;
    const articles = JSON.parse(response.body);

    return indexBody.replace('{{addArticles}}', renderArticles(articles));
}

// To be continued...

Second Try: SSR!

// ... part 2

const request =  require('./httpPromise.js');

exports.handler = async function (){
    const requestOpts = new URL("https://css-tricks.com/{path to api}");
    try {
        const cssTricksResponse = await request(requestOpts);
        return {
          statusCode:200, 
          headers:{"content-type":'text/html'}, 
          body: createHTMLDoc(cssTricksResponse),
        };
    } catch(e) {
        console.log(e);
        return { statusCode: 500, body: JSON.stringify(e)};
    }
}

Downsides of this Approach:

  • Lots of traffic === lots of $$$ for lolz
  • Page generation is a bit slow
  • Not taking advantage of the latest greatest hippest hottest technology: On-Demand Builders*

* latest greatest hippest and hottest not guaranteed

On-Demand Builders

  1. First call builds the page and then caches it
  2. Host uses cached version for subsequent calls
  3. Redeploy site to bust the cache

BUT HOW DO WE DO IT???

Try 3: On-Demand Builder!

const {builder} = require("@netlify/functions");

const request =  require('./httpPromise.js');

exports.handler = builder(async function (){
    const requestOpts = new URL("https://css-tricks.com/{path to api}");
    try {
        const cssTricksResponse = await request(requestOpts);
        return {
          statusCode:200, 
          headers:{"content-type":'text/html'}, 
          body: createHTMLDoc(cssTricksResponse),
        };
    } catch(e) {
        console.log(e);
        return { statusCode: 500, body: JSON.stringify(e)};
    }
});

(I'm so sorry.)