Jamstack Conf 2021

Alex Araiza — Wed, 27 Oct 2021 11:05:00 +0000

Three weeks ago the Jamstack Conf 2021 took place. Thousands of people from different parts of the Internet came together to witness a bird ruin weeks of preparation as it flew into electrical equipment, causing a power outage that made local news.

After the first few minutes of organizers somehow managing to keep the event alive, people got what they had originally come for: Jamstack.

What is Jamstack?

Jamstack is an architecture designed to make the web faster, more secure, and easier to scale. It builds on many of the tools and workflows which developers love, and which bring maximum productivity.

How does it work?

With Jamstack, the entire front end is prebuilt into highly optimized static pages and assets during a build process. This process of pre-rendering results in sites which can be served directly from a CDN, reducing the cost, complexity and risk, of dynamic servers as critical infrastructure.

To prebuild static pages, developers typically use a static site generator, which generates pages out of markdown files, content from a CMS, or other input files. Those pages can then be deployed to a CDN for better speeds.

If you want to know more about Jamstack, go to jamstack.org, where you can learn about tools, benefits, best practices, and more.

My previous experience with Jamstack

I had used Jamstack before the Jamstack Conf 2021; shortly after learning React I started wondering if there were ways to make a website feel like a single-page app without having it constantly fetch data that wasn't going to change often. Then I learned about SEO, and started questioning whether single-page apps were any better than multi-page apps at all; and then I discovered Gatsby, which solved every one of my problems at that time.

Since then I'd learned about other frameworks and used many platforms, and I'd grown to like Jamstack quite a bit; ease of development, speed, security and generally less headaches are all things I like. So naturally, when I saw that the Jamstack Conf 2021 was taking place, I had to register and see what was going on.

Jamstack Conf 2021

The Jamstack Conf 2021 was jampacked with a lot of good content. Companies showcasing their products and services, new technologies being demoed, and plenty of networking time to ask any questions or just chat.

One of my favorite presentations was Transitional Apps by Rich Harris, where he talked about the current state of web development, the problems with single-page apps, the reasons why they exist, and where the web may be headed. I recommend watching it, especially if you're interested in the single-page app vs. multi-page app debate. It can solidify the idea that there's often no "best" answer, and that perhaps there are more than two options to begin with.

I think this is a very interesting idea. At times it feels like people on either side of the debate are so convinced of their position that they miss out on possibly better alternatives, so to see that there are people who think outside of those boundaries is refreshing.

Tools like Astro, Eleventy, Marko or Svelte aim to send less JavaScript to the client in order to improve performance while making developer experience easier. This shows that there is a community that understands the problems with modern web development and wants to provide a solution; an alternative that takes the best of single-page apps and multi-page apps and combines it to make the developer tools that may rule the web in the near-future. Naturally, they were all a topic of discussion in Jamstack Conf 2021, some of them getting their own presentation.

There was a lot more at the Jamstack Conf 2021, like The Jammies and Learn with Jason. You can watch most of the presentations on YouTube. If you're into web development, and especially if you're into Jamstack or serverless architectures, I recommend giving them a look; after all, you may just find yourself using some of these tools in the future.

Take better screenshots with Puppeteer

Alex Araiza — Wed, 13 Oct 2021 11:00:30 +0000

Images are an important part of every website. They help convey meaning and emotion, and they can make any design more attractive—or less, depending on how you use them. So whether it's photographs, illustrations or renders, getting good images is an important step in web development.

Using screenshots is a common practice, especially for web developers showcasing their work in a portfolio; but the most popular screen capturing tools don't allow for much customization, so the quality of the resulting images may not be good enough. Thankfully, there are other tools; like Puppeteer, which does allow for plenty of customization.

What is Puppeteer?

Puppeteer is a Node library which provides a high-level API to control Chrome or Chromium over the DevTools Protocol. Puppeteer runs headless by default, but can be configured to run full (non-headless) Chrome or Chromium.

When you install Puppeteer, it downloads a recent version of Chromium (~170MB Mac, ~282MB Linux, ~280MB Win) that is guaranteed to work with the API.

You can automate many tasks with Puppeteer, one of them being taking screenshots.

Getting started

To get started, you need to install Puppeteer:



npm install puppeteer



yarn add puppeteer

Then, create a file with the following code:



const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.w3schools.com/howto/tryhow_css_example_website.htm');
  await page.screenshot({ path: 'example.png' });
  await browser.close();
})();

The code above takes a screenshot of https://www.w3schools.com/howto/tryhow_css_example_website.htm and saves it to example.png.

Resolution

Screenshots are 800x600px by default, but you can change their resolution:



await page.setViewport({
  width: 640,
  height: 480,
  deviceScaleFactor: 1
});

setViewport resizes the page, so if the page you want to screenshot doesn't handle viewport resizing well, you may want to call this method before calling goto.

Changing deviceScaleFactor lets you get an image with a different resolution without changing the size of the viewport. This can be useful when you want a high-resolution image with a page layout that is specific to a certain viewport size.

Waiting for elements to load

It's possible that some elements aren't fully loaded when the screenshot is taken. You can make your script wait for them to load using two different methods:



await page.waitForSelector('img');



await page.waitForXPath('//img');

Both methods will return as soon as the specified selector or XPath exists, so they will only wait for the first element with the specified selector or XPath to load.

Waiting some more

You can also make your script wait for a number of milliseconds:



await page.waitForTimeout(1000);

This can be useful to make your script wait for an animation to finish before taking a screenshot (or to make your script wait for elements to load if you're feeling lazy and don't want to get the selector or XPath of the elements).

It's generally recommended to not wait for a number of seconds, but instead use Page.waitForSelector(), Page.waitForXPath() or Page.waitForFunction() to wait for exactly the conditions you want.

Full page screenshot

You can take screenshots of the full scrollable page by setting fullPage to true:



await page.screenshot({ path: 'example.png', fullPage: true });

Specific area of the page

You can take screenshots of a specific area of the page by setting clip to an object with the x and y coordinates of the top-left corner of the area, and the width and height of the area:



await page.screenshot({
  clip: {
    x: 50,
    y: 100,
    width: 150,
    height: 100
  },
});

Transparency

You can take screenshots without the default white background by setting omitBackground to true:



await page.screenshot({ path: 'example.png', omitBackground: true });

Keep in mind that this only applies to the default background, so if the background of any element is not transparent, it will show on the screenshot. Not to worry, you can set the background of any element to be transparent by running JavaScript in the page's context.

Running JavaScript

You can run a JavaScript function in the page's context:



await page.evaluate(() => {
  let element = document.getElementById('elementWithBackground');
  element.style.background = 'transparent';
  document.body.style.background = 'transparent';
});

The code above sets the background of the element with ID 'elementWithBackground' and the body to be transparent, but you can modify the page in any way so you can get the exact screenshot you need.

Mind the size

Part of making the user experience great is making sure that the end user can see the images, and that isn't going to happen if they're using a 3G phone while trying to download a 42MB image. Make sure the images you send to the end user are an appropriate size!

Conclusion

This post should help you get most of the screenshots you need, but you can always take a look at the Puppeteer documentation to learn more.

Here's some code with most of the methods mentioned in this post:



const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.setViewport({
    width: 640,
    height: 480,
    deviceScaleFactor: 1
  });
  await page.goto('https://www.w3schools.com/howto/tryhow_css_example_website.htm');
  await page.waitForSelector('img');
  await page.waitForTimeout(1000);
  await page.evaluate(() => {
    let element = document.getElementById('elementWithBackground');
    element.style.background = 'transparent';
    document.body.style.background = 'transparent';
  });
  await page.screenshot({ path: 'example.png', fullPage: true, omitBackground: true });
  await browser.close();
})();

Feel free to modify this however you want. Have fun with it!

DEV Community: Alex Araiza

Jamstack Conf 2021

What is Jamstack?

How does it work?

My previous experience with Jamstack

Jamstack Conf 2021

Take better screenshots with Puppeteer

What is Puppeteer?

Getting started

Resolution

Waiting for elements to load

Waiting some more

Full page screenshot

Specific area of the page

Transparency

Running JavaScript

Mind the size

Conclusion