<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>SEO optimization for the blog. Practical guide and use case</h1>
<h2>General aspects</h2>
First of all, for each of the page, there was a necessity to introduce the correct keywords/description/title.
In order to do that, previously was used <a href="https://github.com/nfl/react-helmet">React Helmet</a>, but due to the usage of React 18 and streaming,
there was a decision to re-organize the idea of metadata.
First of all, index.html for react application was constructed in such a way, that it&#39;s possible to substitute the necessary data.
For this case, following markup was prepared :
<pre><code class="hljs language-html">&lt;!DOCTYPE html&gt;
&lt;html lang=&quot;{lang}&quot;&gt;
 &lt;head&gt;
 &lt;meta charset=&quot;utf-8&quot; /&gt;
 {react-head}
 &lt;/head&gt;
 &lt;body&gt;
 &lt;noscript&gt;You need to enable JavaScript to run this app.&lt;/noscript&gt;
 &lt;div id=&quot;root&quot;&gt;{react-app}&lt;/div&gt;
 &lt;/body&gt;
&lt;/html&gt;
</code></pre>On the backend, modify the router as following for being compatible with React 18:
<pre><code class="hljs language-javascript"> import express from &#x27;express&#x27;;
 import assets from &#x27;../build/assets-manifest.json&#x27;; // import assets to map the index.js/index.css, which will be served to the end user

 const app = express();
 const indexFile = path.resolve(&#x27;./build/index.html&#x27;);
 const data = fs.readFileSync(indexFile, {
 encoding: &#x27;utf-8&#x27;,
 flag: &#x27;r&#x27;,
 });
 const [head, tail] = data.split(&quot;{react-app}&quot;);

 const [preHead, afterHead] = head.split(&#x27;{react-head}&#x27;);

 app.get(&#x27;*&#x27;, (req, res) =&gt; {
 const userBrowserLang = req.acceptsLanguages(&#x27;en&#x27;, &#x27;ru&#x27;, &#x27;ua&#x27;) || &#x27;en&#x27;;

 let originalUrl = req.url
 .replace(/^\/(en|ru|ua)/, &#x27;&#x27;)

 if(originalUrl === &#x27;/&#x27;) originalUrl = &#x27;&#x27;;

 const { pipe } = renderToPipeableStream(
 &lt;AppRoutes /&gt; ,
 {
 bootstrapScripts: [`/static/${assets[&#x27;index.js&#x27;]}`],
 onShellReady() {
 res.status(context.status || 200); 
 res.write(preHead);
 res.write(afterHead);
 pipe(res);
 res.write(tail);
 },
 onShellError(error) {
 console.log(error);
 },
 onError(error) {
 console.log(error);
 }
 }
 );
 });
</code></pre><h2>Multiple languages for the SEO</h2>
Per the <a href="https://developers.google.com/search/docs/advanced/crawling/localized-versions">Google documentation</a>, Google is able
to distinguish the duplicates of your content for different languages. 
For the case with DeCODE, we decided to use &quot;hreflang&quot; variant, which can work perfectly with <a href="https://react.i18next.com/">React I18Next</a>
First of all, for the configuration of the frontend, react-i18next should check for the subpath in the URL. 
We have restructured React Router and I18Next as following:
<pre><code class="hljs language-jsx">import {
 Routes,
 Route,
} from &quot;react-router-dom&quot;;
import i18next from &#x27;i18next&#x27;;
import BrowserLanguageDetector from &#x27;i18next-browser-languagedetector&#x27;;
import { initReactI18next } from &quot;react-i18next&quot;;

i18next
 .use(BrowserLanguageDetector)
 .use(initReactI18next) // passes i18n down to react-i18next
 .init({
 detection: {
 order: [&#x27;path&#x27;, &#x27;cookie&#x27;, &#x27;header&#x27;],
 lookupCookie: &#x27;lang&#x27;,
 caches: [&#x27;cookie&#x27;],
 }
 });
const App = ({ context }) =&gt; {
 return (
 &lt;Routes&gt;
 &lt;Route path=&#x27;:lang/landing/spacechains&#x27; element={&lt;SpacechainsLanding /&gt;} /&gt;
 &lt;Route path=&#x27;/landing/spacechains&#x27; element={&lt;SpacechainsLanding /&gt;} /&gt;
 &lt;Route path=&#x27;:lang/&#x27; element={&lt;StartLanding context={context} /&gt;} /&gt;
 &lt;Route path=&#x27;/&#x27; element={&lt;StartLanding context={context} /&gt;} /&gt;
 {/* other routes */}
 &lt;/Routes&gt;
 );
</code></pre>Take a note, that we are using <code>:lang</code> here to be able to work with the links, such as <code>/en/landing/spacechains</code> and so on.
And for the I18Next to fetch it from the subpath, it uses parameter <code>detection</code>, where you need to specify what should be used to detect 
the user desired localization. Right now you need to duplicate the routes, if you are using React Router v6, because there 
is no possibility to mark url path as optional. 
<div class="info-notification-blog">
For DeCODE, it was also necessary to specify a set of supported languages 
for i18n. This action was needed for eliminating the difference from the 
browser/server, which have been serving different language string (en and en-US). 
You can do it by passing the supported languages in <code>supportedLangs</code>
field of i18next:
 <pre>
 <code class="lang-javascript">
i18next.init({ supportedLangs: [&#39;en&#39;, &#39;ru&#39;, &#39;ua&#39;] })
 </code>
 </pre>
</div>

On the backend side, place into the response tags, which are specific to your
localized pages. Due to the fact, that Google indexes both www and non-www pages,
it was necessary to specify the canonical tag. End result of this step looked 
as following:
<pre><code class="hljs language-javascript"> res.status(context.status || 200); 
 res.write(preHead.replace(&#x27;{lang}&#x27;, userBrowserLang)); // specify the language which will be served to the user
 // Specify translations for your page using the hreflang
 res.write(`
 &lt;link rel=&quot;canonical&quot; href=&quot;https://decodeapps.pp.ua${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;en&quot; href=&quot;https://decodeapps.pp.ua/en${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;ru&quot; href=&quot;https://decodeapps.pp.ua/ru${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;ua&quot; href=&quot;https://decodeapps.pp.ua/ua${originalUrl}&quot; /&gt;
 &lt;link rel=&quot;alternate&quot; hreflang=&quot;x-default&quot; href=&quot;https://decodeapps.pp.ua${originalUrl}&quot; /&gt;
 `);
 res.write(afterHead);
</code></pre><h2>Tags optimization</h2>
On the website and blog, DeCODE is using a lot of images, therefore, it was necessary to define,
how should they be optimized for the end user and for the search engine. 
To achieve better performance, all <code>&lt;img /&gt;</code> tags were replaced with <code>&lt;picture /&gt;</code>,
which are allowing to specify multiple sources for the image.
<pre><code class="hljs language-javascript"> const AdaptiveImage = ({ jpg, webp, alt, ...imgProps }) =&gt; {
 return (
 &lt;picture&gt;
 {webp &amp;&amp; &lt;source srcSet={webp} type=&quot;image/webp&quot; /&gt;}
 {jpg &amp;&amp; &lt;source srcSet={jpg} type=&#x27;image/jpeg&#x27; /&gt;}
 &lt;img alt={alt} src={jpg} {...imgProps}/&gt;
 &lt;/picture&gt;
 );
 };

 export default AdaptiveImage;
</code></pre>

SEO optimization for the blog

<h1>Postman Swagger CLI</h1>
<h2>Postman and Swagger overview</h2>
In short, postman is the utility, which helps you to make a request via the UI. 
There you can setup the URL, where you want to reach, the method (GET/POST/DELETE...),
query parameters and so on. Very useful for the API testing and can be easily shared
to other team members with the concept of the collections. 
Swagger on the other side, is more positioned to the API documentation and 
should be running on some server. With Swagger you can set up the descriptions
for the API, what parameters it can take, response structure and much more. 
<h2>CLI</h2>
To be able to spin up the Swagger which can be run on the server based of the
postman collections, an npm package <code>@decodeapps/postman-swagger</code> was created. 
It takes as an input the collections of requests from Postman and spins up the
Express server. 
To be able to quickly spin up such server, create a folder with some schema:
<pre><code class="hljs language-bash">mkdir swagger-examples
touch swagger-examples/example.json
</code></pre>And fill it with such content:
<pre><code class="hljs language-json">{
 &quot;info&quot;: {
 &quot;_postman_id&quot;: &quot;9adb14d7-625e-4a02-828d-a5e2d044bfd0&quot;,
 &quot;name&quot;: &quot;Example Collection&quot;,
 &quot;schema&quot;: &quot;https://schema.getpostman.com/json/collection/v2.1.0/collection.json&quot;
 },
 &quot;item&quot;: [
 {
 &quot;name&quot;: &quot;GET example.com&quot;,
 &quot;request&quot;: {
 &quot;method&quot;: &quot;GET&quot;,
 &quot;header&quot;: [],
 &quot;url&quot;: {
 &quot;raw&quot;: &quot;https://example.com&quot;,
 &quot;protocol&quot;: &quot;https&quot;,
 &quot;host&quot;: [
 &quot;example&quot;,
 &quot;com&quot;
 ]
 },
 &quot;description&quot;: &quot;Making the simple GET request to a website&quot;
 },
 &quot;response&quot;: []
 }
 ],
 &quot;protocolProfileBehavior&quot;: {}
}
</code></pre>And then startup the utility:
<pre><code class="hljs language-bash">npx @decodeapps/postman-swagger -d ./examples/
</code></pre>As a result, upon navigating to <code>http://localhost:5000</code>, you will see the following:
<img src='/blog/postman-swagger-screenshot.png' alt='Postman swagger screenshot' style="max-width: 800px" />


Visit <a href="https://github.com/FallenAngel97/postman-swagger">https://github.com/FallenAngel97/postman-swagger</a> to learn more about the implementation and possible parameters
Author of the background photo: Magda Ehlers: <a href="https://www.pexels.com/photo/2114014/">https://www.pexels.com/photo/2114014/</a>

Postman Swagger CLI

<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>

Rego Treesitter

<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>