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

First call builds the page and then caches it
Host uses cached version for subsequent calls
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)};
    }
});

Slides

https://slides.com/fimion/css-trickz-jamstack-conf-2021/

CSS-TRICKZ on GitHub

https://github.com/fimion/css-trickz

https://css-trickz.com

(I'm so sorry.)