<h1>Automate screenshots creation</h1>
When working in the Agile team, it&#39;s necessary to keep the documentation up to date and monitor changes. 
It&#39;s especially important for those cases, when the team changes and there should be onboarding
for the newcomers. Often newcomers are directed to read the documentation, which covers the 
basic needs. Due to the fact, that we all are humans, we understand by example better. 
Such examples can be shown in screenshots, but screenshots need to be updated on a regular basis. 
<h2>Pre-requisites for the web application screenshots</h2>
Let&#39;s for simplicity spin up <a href="https://create-react-app.dev/">CRA</a> by following their official tutorial: <a href="https://create-react-app.dev/docs/getting-started">https://create-react-app.dev/docs/getting-started</a>
in this example, we will use <code>screenshots-cra</code> for the name of the bootstrapped folder. 
To be able to draw attention to specific part of our page, we would like to select the necessary visual element 
let&#39;s define following function in the <code>screenshots-cra/src/index.js</code>:
<pre><code class="hljs language-javascript">window.highlightElement = (elementQuery) =&gt; {
 const element = document.querySelector(elementQuery); // retrieve DOM element for highlighting
 if (!element) {
 return console.error(`Element &quot;${elementQuery}&quot; not found!`);
 }
 element.style.outlineOffset = &#x27;2px&#x27;; // make outline for the selected DOM element
 element.style.outline = &#x27;2px red solid&#x27;;
 console.log(`Highlighted element ${elementQuery}`);
};
</code></pre><h2>Screenshots generation process</h2>
The general practice to make a screenshot is to use some headless browser,
render page there and write output to the file. 
In this example will be used <a href="https://pptr.dev/">puppeteer</a> for achieving screenshot capturing functionality. 
Let&#39;s also use the <a href="">dotenv</a> package, so that we can define some environment variables for specifying URL
where we should make the screenshots. 
Let&#39;s create <code>screenshots-generation.js</code> and fill it with following contents: 
<pre><code class="hljs language-javascript">const puppeteer = require(&quot;puppeteer&quot;);

require(&#x27;dotenv&#x27;).config();

const url = process.env.URL || &#x27;http://localhost:3000&#x27;;
const fileNamePrefix = process.env.FILE_NAME_PREFIX || &#x27;&#x27;;

const Screenshot = async () =&gt; {
 const browser = await puppeteer.launch();

 const page = await browser.newPage();

 await page.goto(url);

 await page.evaluate(() =&gt; {
 window.highlightElement(&#x27;.App-link&#x27;);
 });

 await page.screenshot({
 path: `./${fileNamePrefix} app-link.png`, 

 fullPage: true,
 });

 await page.close();

 await browser.close();
};

Screenshot();
</code></pre>With the <code>dotenv</code> package, we don&#39;t need to hardcode the URL for rendering the page, so 
execute following in your terminal: <code>URL=http://localhost:3000 node ./screenshots-generation.js</code>
<img src="/blog/app-link.png" alt="Screenshot of the CRA with highlighted link">
Background image by <a href="https://www.pinterest.com/cantinicris">Cris</a> on Pinterest: <a href="https://www.pinterest.com/pin/601019512773094141/">https://www.pinterest.com/pin/601019512773094141/</a>
<a href="https://www.flaticon.com/free-icons/screenshot" title="screenshot icons">Screenshot icons created by GOFOX - Flaticon</a>

How to autogenerate the screenshots for web application and highlight elements

<h1>Start of the Blog</h1>
<h2>General idea for the blog</h2>
Since the creation of the projects on both Github and Google play, DeCODE has been 
publishing updates directly to social media. And all the content was carefully designed
and posted at the proper time. 
But due to the necessity of constantly updating the community with the process of DeCODE 
journey, I have decided to create a specific blog, where I can post updates.
<h2>How to set up the blog in NodeJS</h2>
Here we are using ExpressJS with the React router
For the blogging engine, I have decided to take Poet, as it can be easily integrated into the Express application
To start, first, you will need to install it and configure:
<pre><code class="hljs language-bash">yarn add poet
</code></pre><pre><code class="hljs language-javascript">import express from &#x27;express&#x27;;
import Poet from &#x27;poet&#x27;;

const app = express();
const poet = Poet(app);
const PORT = process.env.PORT || 3001;

app.get(&#x27;/blog&#x27;, (req, res) =&gt; {
 const lang = req.cookies.lang || &#x27;en-US&#x27;;
 res.render(&#x27;blog_index&#x27;, { 
 keywords: &#x27;keywords,example,fine&#x27;,
 description: &#x27;&#x27;
 });
});

app.listen(PORT, () =&gt; {
 console.log(`Server is listening on port ${PORT}`);
});
</code></pre>I am a huge fan of configuring the application through the environment variables, so I
like to provide the opportunity to override the <code>PORT</code> which the application is listening to
through the env variables.
Take note, that with express and React Router SSR you might have the following construction:
<pre><code class="hljs language-javascript"> app.get(&#x27;*&#x27;, (req, res) =&gt; {
 const context = { useragent: req.useragent };
 const metaTags = getMetaTagsbyUrl(req);

 const { pipe } = renderToPipeableStream(
 &lt;StaticRouter location={req.url} context={context}&gt;
 &lt;I18nextProvider i18n={req.i18n}&gt;
 &lt;AppRoutes /&gt;
 &lt;/I18nextProvider&gt;
 &lt;/StaticRouter&gt;,
 {
 bootstrapScripts: [`/static/${assets[&#x27;index.js&#x27;]}`],
 onShellReady() {
 res.status(context.status || 200); 
 res.write(preHead);
 res.write(metaTags);
 res.write(afterHead);
 pipe(res);
 res.write(tail);
 },
 onShellError(error) {
 console.log(error);
 },
 onError(error) {
 console.log(error);
 }
 }
 );
 });
</code></pre>If it is the case for you, you need to put the <code>/blog</code> URL above it, so it will not be picked up
by the wildcard (* symbol)
<h2>Pug syntax</h2>
Pug is templating language, which can produce HTML. DeCODE blog uses Pug for managing the content
Pug provides several utilities, some of them are blocks, which can define sections that should
be rendered through the inclusion of them with <code>block</code>. 
The syntax of pug uses indenting, like Python, to introduce nested tags. Be careful, when indenting
some wrappers, because you might accidentally change the template
In case it&#39;s necessary to debug some of the variables, you can use standard JS <code>console.log</code>
and check output in the shell.
This Poet blog used markdown, and you can pass additional arguments to the view like so:
<pre><code class="hljs language-javascript"> res.render(&#x27;blog_index&#x27;, { 
 keywords: &#x27;keywords,example,fine&#x27;,
 description: &#x27;&#x27;
 });
</code></pre>

guide