At the behest of Dave Rupert that Store Talk Show DDD-Discord, I’m going to talk about my adventure making an effective and poorly designed typo capable of dropping CSS-Tricks.com be called CSS-Trickz.com, which turned into an experiment on how to create a cached and automated build site for Netlify using the new On-Demand Builders.

Note: I want to make it clear here, Chris Coyier know I did this and I was okay with it. However, this is mainly an article on how to create a CSS-Tricks clone by scraping data from their API. Do not misuse this information. Don’t try to commercialize your own clone of another person’s content. This has been a fun experiment and should be considered as such. For this reason, I’ve removed some of the information about using the API because I don’t want to tell people how to clone CSS tricks.

How it started: A naive approach

Someone suggested a typo nerd. Someone suggested that there should be CSS-Trickz, and I bought a domain. Nonetheless, I realized that since CSS-Tricks is built for WordPress, I could actually make a bad clone that only refers to CSS-Tricks. I started with a naive implementation that I threw using Netlife WordPress API _jsonp callback method. (If you need to get information from a remote WordPress site, this will eliminate most CORS issues)

It looked like this:

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

This is a quick way to implement a feed of the latest articles. It’s great! But well, Chris had feedback:

uhm google says that client side rendering is bad mmkay

Chris Coyier

Second Pass: SSR function!

All right, Chris had a thing. Whenever a person visits a site, it relied on a browser to retrieve the information and used (possibly) a second article snippet. It would be better if the html file is only served directly to the browser and already has excerpts and links from the article. Netlify features to the rescue!

function getArticles(articles){
    const 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}}', getArticles(articles));
}


exports.handler = async function (){
    const requestOpts = new URL("https://css-tricks.com/{path to api for posts}");
    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)};
    }
}

This gives us an HTML response, and the articles are embedded in it!

Excellent! Problem fixed. Well, like that.

This really gives us a new problem that the function works for MY pennies every time someone comes to the site. Although Netlify features are free, I don’t want to fall victim to the popularity of the Internet. Fortunately, Netlify has recently released the “On Demand Builders” service, which allows you to create server-side rendered pages on demand, if necessary, and then use the cache value for each subsequent call. This means I could use this function once and then it would use the output version every time after that.

Version 3: Let’s start caching!

Netlify On-Demand developers cache the value returned by the serverless function and then break the value with the next build.

“Alex,” I hear you start saying, “This is definitely extremely complex and requires a lot of code for this to happen!”

No. Make sure you have run at the root of the project npm install @netlify/functions and then you can add this little code:

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



 exports.handler = builder(async function (){
    
});

Now the function saves a cache for each building. I have added a github function to start the building every 12 hours, which breaks the cache and retrieves new results. But that’s it. It’s pretty easy!

LEAVE A REPLY

Please enter your comment!
Please enter your name here