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
- 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
(I'm so sorry.)
CSS-TRICKZ: Jamstack Conf 2021
By Alex Riviere
