<h1>How to generate DOCX from Markdown</h1>
Markdown is a format, which is usually used for communication and providing documentation
for developers and technical products. Markdown supports a lot of necessary features,
which help with organizing your documentation. 
Yet, for sharing the documents, usually used DOCX standard, which can be edited
via specialized software, despite markdown can be edited in any text editor.
For converting documents, we can use pandoc utility, which can achieve exactly 
desired behavior by converting from one format to another.
Pandoc can be extended by Lua filters and tweaked per our needs. 
<pre><code class="hljs language-lua">local cacheLinks = {} -- Stores the found local links in the repository

function file_exists(name)
 local f=io.open(name,&quot;r&quot;)
 if f~=nil then io.close(f) return true else return false end
end

function Link (link, target, title, attr)
 local linkTarget = link.target -- where the link points to
 if file_exists(linkTarget) then
 print(&quot;Found the link: &quot; .. linkTarget)
 table.insert(cacheLinks, linkTarget)
 return {}, {}, {}, {} -- return empty table, which will remove Link from the flow of the document
 end
 return link
end

function Pandoc(blocks, meta)
 local paragraphs = {}
 for i = 1, #cacheLinks do -- iterate over the local links table
 local fh = io.open(cacheLinks[i]) -- read the contents of that linked file
 local contents = pandoc.read( -- parse it with pandoc with markdown parser
 fh:read &#x27;*a&#x27;,
 &quot;markdown&quot;,
 PANDOC_READER_OPTIONS
 ).blocks
 blocks.blocks:extend(contents) -- append parsed data to the end of the document
 end
 return blocks, meta
end
</code></pre>Then, inside your pipeline, you should call the following:
<pre><code class="hljs language-bash">pandoc --lua-filter fix-links-multiple-files.lua -o output.docx -f markdown -t docx README.md --toc
</code></pre>Photo by Kindel Media: <a href="https://www.pexels.com/photo/a-close-up-shot-of-paper-clipped-documents-7054757/">https://www.pexels.com/photo/a-close-up-shot-of-paper-clipped-documents-7054757/</a>

Generating of DOCX from Markdown

<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>🐏 Webpack RAM plugin</h1>
In order to fine-tune the builds of your frontend applications, you need to concentrate on analysis
of the build process. One of such criteria is the usage of your system resources. To be able to find
the usage of your memory during the build, DeCODE have created a webpack plugin, which injects to
your build system and then sends the report to your terminal
<h2>Webpack hooks system</h2>
Based on the <a href="https://webpack.js.org/api/compiler-hooks/">official webpack documentation</a>, plugin needs to define, which <code>hooks</code> it needs to inject to. 
In this exact scenario, it was necessary to get analysis of RAM after webpack finished it&#39;s compilation, so 
hooks <code>done</code> and <code>failed</code> were used. 
<pre><code class="hljs language-javascript">class WebpackMemoryPlugin {
 apply(compiler) {
 compiler.hooks.failed.tap(
 &#x27;WebpackMemoryPlugin&#x27;,
 () =&gt; {
 const used = process.memoryUsage().heapUsed / 1024 / 1024;
 console.log(`🐏 Amount of RAM used: ${Math.round(used * 100) / 100} MB`);
 }
 );
 compiler.hooks.done.tap(
 &#x27;WebpackMemoryPlugin&#x27;,
 () =&gt; {
 const used = process.memoryUsage().heapUsed / 1024 / 1024;
 console.log(`🐏 Amount of RAM used: ${Math.round(used * 100) / 100} MB`);
 }
 );
 }
}
</code></pre><h2>Testing of webpack plugin</h2>
To make sure that the plugin works as expected, it was covered with unit test. 
In this case, unit testing was implemented with <code>mocha</code> and <code>sinon</code>. 
Because the plugin by itself is quite simple, and just outputs the amount of RAM
to the console, it can be done by spying on the console and verified by just
checking the expected output.
<pre><code class="hljs language-javascript">const webpack = require(&#x27;webpack&#x27;);
const WebpackMemoryPlugin = require(&#x27;../WebpackMemoryPlugin&#x27;);
const sinon = require(&#x27;sinon&#x27;);
const assert = require(&#x27;assert&#x27;);

describe(&#x27;WebpackMemoryPlugin&#x27;, () =&gt; {
	it(&#x27;should show the amount of RAM used after success&#x27;, (done) =&gt; {
		let spy = sinon.spy(console, &#x27;log&#x27;);
		webpack({
			plugins: [
				new WebpackMemoryPlugin()
			],
		}, (err, stats) =&gt; {
			try {
				spy.restore();
				assert(spy.called);
				assert(spy.firstCall.firstArg.indexOf(&#x27;🐏 Amount of RAM used:&#x27;) !== -1);
				done();
			} catch (ex) {
				spy.restore();
				console.log(ex);
				done(ex);
			}
		});
	});
});
</code></pre>Full code can be found at <a href="https://github.com/FallenAngel97/webpack-memory-plugin">https://github.com/FallenAngel97/webpack-memory-plugin</a>

Webpack RAM plugin

<h1>Rego Treesitter implementation</h1>
For daily routine, I spend majority of the time in the NeoVim, where I write policies
for corporate application. By default, <a href="https://neovim.io/">NeoVim</a> provides the Regex system, which parses
default OPA policies. But I needed more of that, so I started on investigation
how can I achieve a better experience.
<h2>Treesitter libraries</h2>
I don&#39;t need to copy-paste the documentation from the official docs, so to get the 
general principle of it, you can see <a href="https://tree-sitter.github.io/tree-sitter/using-parsers#getting-started">this page</a>.
In short, you will need a repo. For this case, my repo will be <code>tree-sitter-rego</code>.
Initialize the reporisory for the npm
<pre><code class="hljs language-bash">yarn init -y
</code></pre>This will create a package.json with defaults, which you can modify
Then install the necessary dependencies:
<pre><code class="hljs language-bash">yarn add -D tree-sitter-cli nan
</code></pre>Then it&#39;s necessary to create a file for the grammar. Name it <code>grammar.js</code>, which is the convention to name for the tree-sitter.
Fill it with following to create a rego parser:
<pre><code class="hljs language-javascript">module.exports = grammar({
 name: &#x27;rego&#x27;,

 rules: {
 source_file: $ =&gt; repeat($._definition),

 _definition: $ =&gt; choice(
 $.package_definition,
 $.import_package,
 $.operator_check,
 $.comment,
 $.rego_block,
 $.builtin_function,
 $._junk
 ),

 operator: $ =&gt; choice(
 &#x27;==&#x27;,
 &#x27;:=&#x27;,
 &#x27;=&#x27;,
 &#x27;!=&#x27;,
 &#x27;&lt;&#x27;,
 &#x27;&gt;&#x27;,
 &#x27;/&#x27;,
 &#x27;-&#x27;,
 &#x27;+&#x27;,
 ),

 true: $ =&gt; &#x27;true&#x27;,
 false: $ =&gt; &#x27;false&#x27;,

 comma: $ =&gt; &#x27;,&#x27;,
 
 comment: $ =&gt; /\#.*?\n\r?/,

 function_name: $ =&gt; choice(
 &#x27;lower&#x27;,
 &#x27;is_string&#x27;,
 &#x27;object.get&#x27;,
 &#x27;print&#x27;,
 &#x27;concat&#x27;,
 &#x27;contains&#x27;,
 &#x27;time.now_ns&#x27;,
 &#x27;io.jwt.encode_sign_raw&#x27;,
 &#x27;io.jwt.encode_sign&#x27;,
 &#x27;io.jwt.decode&#x27;,
 &#x27;io.jwt.verify_es256&#x27;,
 &#x27;strings.replace_n&#x27;,
 &#x27;http.send&#x27;,
 ),

 opening_parameter: $ =&gt; &#x27;(&#x27;,

 closing_parameter: $ =&gt; &#x27;)&#x27;,

 builtin_function: $ =&gt; seq(
 field(&#x27;function_name&#x27;, 
 $.function_name
 ),
 field(&#x27;opening_parameter&#x27;, $.opening_parameter),
 field(&#x27;function_body&#x27;, 
 repeat(
 choice(
 $.identifier,
 $.array_definition,
 $.true,
 $.false,
 $.number,
 $.object_field,
 $.string_definition,
 $.identifier,
 $.comma,
 ),
 ),
 ),
 field(&#x27;closing_parameter&#x27;, $.closing_parameter),
 ),

 string_definition: $ =&gt; seq(
 &#x27;&quot;&#x27;,
 /[a-zA-Z0-9&lt;&gt;@\-._:=\s\/\\]*/,
 &#x27;&quot;&#x27;,
 ),

 _array_opening: $ =&gt; &#x27;[&#x27;,
 _array_closing: $ =&gt; &#x27;]&#x27;,

 object_field: $ =&gt; prec(
 1, 
 seq(
 /[a-zA-Z\._]+\[/,
 choice(
 $.identifier,
 $.number,
 $.object_field,
 $.string_definition
 ),
 $._array_closing,
 ),
 ),

 array_definition: $ =&gt; seq(
 $._array_opening,
 repeat(
 choice(
 $.array_definition,
 $.string_definition,
 $.identifier,
 $.identifier,
 $.number,
 $.object_field,
 $.true,
 $.false,
 $.comma,
 ),
 ),
 $._array_closing,
 ),

 operator_check: $ =&gt; seq(
 choice(
 $.identifier,
 $.builtin_function,
 $.string_definition,
 $.object_field,
 $.array_definition,
 $.true,
 $.false,
 ),
 $.operator,
 choice(
 $.identifier,
 $.builtin_function,
 $.string_definition,
 $.object_field,
 $.array_definition,
 $.true,
 $.false,
 ),
 ),

 rego_rule: $ =&gt; prec(1, choice(
 $.identifier,
 $.operator_check,
 $.array_definition,
 $.test_case,
 $.true,
 $.false,
 ),),

 test_case: $ =&gt; seq(
 $.identifier,
 repeat(
 seq(
 $.reserved_keywords,
 $.identifier,
 ),
 ),
 ),

 rego_block: $ =&gt; seq(
 field(&#x27;rego_rule_name&#x27;, $.identifier),
 optional(
 seq(
 $.operator,
 $.identifier,
 ),
 ),
 &#x27;{&#x27;,
 repeat($.rego_rule),
 &#x27;}&#x27;,
 ),

 _junk: $ =&gt; /\n/,

 reserved_keywords: $ =&gt; choice(
 &#x27;as&#x27;,
 &#x27;with&#x27;,
 ),
 
 as_keyword: $ =&gt; seq(
 $.reserved_keywords,
 field(&#x27;package_alias&#x27;, $.identifier),
 ),

 import_package: $ =&gt; seq(
 &#x27;import&#x27;,
 field(&#x27;imported_package_name&#x27;, 
 choice(
 $.identifier,
 ),
 ),
 optional($.as_keyword),
 ),

 package_definition: $ =&gt; seq(
 &#x27;package&#x27;,
 field(&#x27;package_name&#x27;, $.identifier),
 ),

 identifier: $ =&gt; /[a-zA-Z\._]+/,

 number: $ =&gt; /\d+/
 }
});
</code></pre>After this, you can execute a command <code>tree-sitter generate</code>. For convenience, you can even set up
the aliases in scripts for package.json, so you will be able to verify the correctness of your 
grammar.
<pre><code class="hljs language-json">{
 &quot;scripts&quot;: {
 &quot;generate&quot;: &quot;tree-sitter generate&quot;,
 &quot;build&quot;: &quot;tree-sitter generate &amp;&amp; node-gyp configure &amp;&amp; node-gyp build&quot;,
 &quot;test&quot;: &quot;tree-sitter test&quot;
 }
}
</code></pre>Complete source for the parser located here: <a href="https://github.com/FallenAngel97/tree-sitter-rego">https://github.com/FallenAngel97/tree-sitter-rego</a>
Photo by <a href="https://unsplash.com/@tanelah?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Taneli Lahtinen</a> on <a href="https://unsplash.com/?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>

open source