
In this short tutorial, I would like to show you how to build websites with Hugo. Hugo is a trendy framework for building websites that is easy to set up if you know at least some basic coding. However, this tutorial is intended for complete beginners who have no prior experience with web development and coding. First, we will prepare our development environment. Then I will show you where to download a custom theme and how to use it.

## Development environment
First, you will need an editor where you can modify the website files - write the content and modify the code. One of the most popular editors is [VS Code](https://code.visualstudio.com). However, there are also other editors like [Atom](https://atom.io) or [Sublime Text](https://www.sublimetext.com). VS Code has a rich database of extensions and an active community. Atom is very similar in many aspects, but it can be slightly slower than VS Code. Sublime Text is a paid editor, and it is very quick compared to VS Code and Atom. Still, the extension community is not as rich as in the case of Atom or VS Code. It's entirely up to you which editor you choose.

If you are a macOS user, installing Homebrew, a package manager for macOS, is a good idea and almost a necessity. This step will significantly improve your developer experience. To install Homebrew, visit its [website](https://brew.sh) and follow the described steps. The brew tells you to put the line of code somewhere - in the macOS terminal. It is an application you can find in the Launchpad on your macOS. What is a package manager? A package manager is a collection of tools that automate installing, upgrading, configuring, and removing applications in a consistent manner. Windows users will need to install [Chocolatey](https://chocolatey.org/install#individual), a package manager for Windows. The terminal application depends on the version of Windows you use. Windows 11 offers a Windows Terminal application that defaults to PowerShell; on Windows 10, you can download the Windows Terminal application from the Microsoft Store. You can paste the code to Windows Terminal from the Chocolatey website. We will use this Terminal later to run Hugo. If you are a Linux user, you will already have a preinstalled package manager, which is part of your Linux distribution.

When you successfully install a package manager for your operating system, you need to install Git. This tool will track any changes you make to project files. You can install Git in different ways, depending on the operating system you use:

On macOS, we will use Homebrew that we installed in the previous step and input this command into the Terminal:
```bash
brew install git
```
On Linux, we can use the built-in package manager; I will use Ubuntu's apt-get package manager:
```bash
apt-get install git
```
On Windows, we can download the Git installer from the [Git website](https://git-scm.com/download/win).

Now, we can install Hugo. Similarly, as in the case of Git, this step differs by the operating system you use.
On macOS, we again use Homebrew and put the command into the Terminal:
```bash
brew install hugo
```
On Linux:
```bash
apt-get install hugo
```
and on Windows, we will use Chocolatey:
```bash
choco install hugo -confirm
```
Now we can try whether Hugo was installed correctly. Try to write the following command to the Terminal:
```bash
hugo version
```
If Hugo was not installed successfully, you will be presented with a variation of the "command not found" message. However, if the installation was successful, you should see information about the version of Hugo you are using, e.g.:
```bash
hugo v0.96.0+extended darwin/arm64 BuildDate=unknown
```

## Choosing a theme
Hugo has plenty of themes; some are paid, and some are free. You can also write your own theme. It is good to start with an existing theme if you do not have prior experience with web development. In time, you will be able to modify it to suit your needs. Many free themes can be found on Hugo's [website](https://themes.gohugo.io) and also on [GitHub](https://github.com/search?q=hugo+theme). Paid themes can be found on this [website](https://gethugothemes.com).

After you choose your favorite theme, download the zip file. On GitHub, it can be downloaded by clicking on the green button code and selecting the option "Download ZIP". Now you can create your Hugo site project. However, before starting, ensure that you are in a directory (the place) where you want your website projects. This directory can be anywhere on your computer - it can be in your home folder, documents, or anywhere else. On macOS, I suggest creating the `Websites` folder in your home directory, which is the directory where you are when you open the Terminal. Use the `cd` (change directory) command to navigate the Terminal. The structure is following:
```bash
cd folderName
```
You can write the path separated by slashes if you want to go into sub-directories.
```bash
cd folderName/folderName/folderName
```
If you want to create a folder, you can use the `mkdir` (make directory) command:
```bash
mkdir folderName
```
Write the following command when you are in the directory where you want to have your Hugo project. The project's name can be anything, but it should not contain spaces and diacritics.
```bash
hugo new site <NAME_OF_YOUR_SITE>
```
Then you should extract the content of the zip file to the `/themes` folder in the directory of your Hugo site.
Now you will need to modify the `config.toml` file. Add the following line to the config:
```toml
theme = '<Name of the theme folder>'
```
This will ensure that Hugo loads the theme you chose. Now you can start adding content to your Hugo website. Content should be in the `/content` folder and MD format. MD stands for Markdown, a markup language that allows you to format your content. See these [guidelines](https://www.markdownguide.org/getting-started/) for help.

## How to view your website
To view the website, you will need to start the Hugo server, which can be done via the following command:
```bash
hugo serve
```
This command must be executed in the root directory of your project in the terminal. The root directory is the directory that has the name that you defined when you run the `hugo new site <NAME_OF_YOUR_SITE>` command. After running this command, you should see the following output:
```bash
                   | EN
-------------------+-----
  Pages            | 46
  Paginator pages  |  0
  Non-page files   |  3
  Static files     |  0
  Processed images |  0
  Aliases          | 19
  Sitemaps         |  1
  Cleaned          |  0

Built in 134 ms
Watching for changes in /Users/<Username>/Websites/MyHugoProject/{archetypes,content,data,layouts,static,themes}
Watching for config changes in /Users/<Username>/Websites/MyHugoProject/config.toml
Environment: "development"
Serving pages from memory
Running in Fast Render Mode. For full rebuilds on change: hugo server --disableFastRender
Web Server is available at http://localhost:1313/ (bind address 127.0.0.1)
Press Ctrl+C to stop
```
The message tells you the number of content processed by the Hugo framework in the table. It also tells you that the Hugo framework monitors your website's folders - note the curly brackets with folder names like content, data, etc. Thus, any change you make in these folders will be automatically shown on the website in your browser. You can also find  info about where the website is (accessible from your browser). The default address is: `http://localhost:1313`. Finally, there is a message on how to stop the hot-reloading process; this can be achieved by pressing `[CTRL] + [C]` on your keyboard (when you have finished modifying the content, `[CTRL] + [C]` will end the session).

How to start building websites with Hugo


Charles University recently released a preview of a new user interface for their Student information system (SIS). The whole system was developed in the 90's or early 2000's and it is natural that after some time the application needs a refresh of some kind. The newly released preview of the SIS4 introduces a new user interface which should bring modern elements to the application. I was unpleasantly surprised when I first saw the interface. For now, I will skip the fact that it looks like a blog and not like a mature system where students register for lectures, check exam results and teachers should administrate their courses. Before I decided to write this critique I proposed some changes to the user interface, but they were rejected with the justification that it would slow down the development and transition to the new system. To be completely honest I have to note that some of the issues I describe in this article were discovered after I sent in my proposed changes.

## Someone forgot that not all people use a mouse
The first major issue I noticed is the absence of a keyboard only navigation support. I understand that these users are often overlooked by small developers and to be completely honest, when I noticed this problem I found some issues with my own website as well. However, in case of a system like the Charles University's SIS which is used by more than tens of thousands students with different needs, this is a major issue. Not every user on the web has the ability to use a mouse, some prefer a keyboard as it can make navigation faster, some simply don't have another option. How bad is the problem with SIS' UI? Almost every button misses a styled :focus state, but moreover the default :focus state is often removed so there is no visual signalisation where the user is. Many custom made elements like these checkboxes are excluded from the keyboard navigation completely.

<br />

![Snippet of page showing menu, title 'General options common for different studies' and active and inactive checkboxes](/img/blog--SIS4-checkboxes.png)_You can't check/uncheck these checkboxes on a keyboard_

<br />

## It is not designed for people with visual impairments
The second major issue is the fact that the website was not designed with visually impaired users in mind. For example, when I switch on the simulation of  the most common visual impairments I am unable to tell whether the following toggle button is in an _on_ or _off_ state. The title of the column in the table header is not very helpful either as the described states are reversed. Thankfully there are not many places where the website relies on colours to describe a state. But if it is used, it is done incorrectly. The issues don't concern only colours: the font-size varies dramatically and in some cases the text is too small.

<br />

![Snippet of page showing five options with green toggles in an 'on' state](/img/blog--SIS4-toggles-standard.png)_I guess it is clear that these toggles are on_

<br />

![Snippet of page showing five options with grayscale toggles in an 'on' state](/img/blog--SIS4-toggles-colour-blind.png)_Is the state of the toggle still clear? The screenshot was taken with a Deuteranopia filter on._

<br />


## Why so empty and bordered?
The design is spacious, but chaotic. If you follow at least one designer on any social network, you'll definitely find some posts saying that negative space is super-important and I could not agree more. However, it must be clear which parts of the content are related and which aren't. In case of the user-interface of SIS the negative space breaks the feeling of consistency and introduces confusion. On some pages like the Study plan below, the title is too far away from the content and thus the negative space supports feeling that there is something missing. The tables use a small font with paddings that are too large so the cohesion feels broken in some way, not to mention the title of the table that is again too far.

<br />

![A snippet of a page with title 'Studijní plán: Estetika' and the information about the study plan](/img/blog--SIS4-studijni-plan.png)_Did you notice the cut off border?_

<br />

Another thing I am not a fan of are the borders, when you open certain pages there are alternating grey and white sections without any visual reason. An extreme example is the page on the screenshot where the two grey sections are divided with an empty white one. The white section introduces a feeling that something is broken on the page. This feeling is further strengthened when you open the item in the table and see a large grey wrapper which is not padded evenly around the white table.

<br />

![Screenshot of a page showing header, red menu and tables with information related to study](/img/blog--SIS4-studies.png)_This is how the full page looks like_

<br />

## Conclusion
These were definitely not all the issues I see with the redesign of the user-interface of Charles University's SIS. However, I do not have any reason to dig deeper as for now the aforementioned issues would make any design unusable. However, I might write another article with some design proposals with an explanation of common design problems. In case this article is read by some of the developers who worked (or are still working) on this app I will be more than happy to help you fix these issues or give you more information about how to solve them.

Do not ignore accessibility on your websites. 🙂 It is easy to implement and you'll improve the browsing experience for many visitors of your website. In case you do not know where to start, check these resources: [access guide Instagram](https://www.instagram.com/access_guide_/) and [accessibility tricks and resources for designers](https://www.getstark.co/library/collections/accessibility-tips,-tricks,-and-resources-for-designers/) at [Stark's website](https://www.getstark.co/).


What's wrong with SIS4


You might have already noticed that some English posts were translated with the help of DeepL translator. That is because I am too busy to publish new content regularly and translate already written posts. Thus when I translated the front-page of my website to English, I also decided to use DeepL translator to translate the blog so I can focus on new content and keep the website bilingual.

I am aware that the quality of DeepL's translations varies a lot and because of that I am not ruling out the possibility of a proper translation when I have more time. I also decided that new posts will be written in English instead of Czech, because I would like to improve my English writing. It is also much easier for me to correct Deepl's translation from English to Czech as Czech is my native language. I would also ask you, if you see a mistake I will be grateful if you let me know and I will correct it asap.

In case you do not know what DeepL translator is: it is a translator using artificial intelligence and machine learning to provide the most fitting translations. Based on comparisons they have on their website, it is at least four times better than Google Translate not to mention Bing and Amazon services. [Give it a try](deepl), I am certain you will be surprised how good the translations are!

[deepl]: https://www.deepl.com/translator


Why I use DeepL to translate some articles


Would you like to try a modern JavaScript framework like Angular, React or Vue, but only have PHP hosting available? One option is to look for services like [Netlify](netlify) or [Vercel](vercel), both of which provide free JAM stack hosting. However, if you don't want to give up your PHP hosting, want to try a JavaScript framework and are also thinking about SEO, there is another option. However, it's definitely not for large projects or sites that stand for the best SEO optimization, although the latter is less of a problem in this case.

Let's say we have a finished front-end, built as a SPA _(single page application)_ and uploaded to a test FTP site. Next, we create a `ssr-index.php` file. We will then insert all the functions to display the API data to robots and crawlers. No, don't worry, you won't have to copy all the HTML code from your front-end.

## PHP server side rendering
PHP provides a `file_get_contents` function, we can easily use this to communicate with our API. Then convert the received response into a PHP object or array and work with the data. It is also a prerequisite for success that the URL contains at least one identifier of the post or page whose data we want to retrieve. In my example, this would be _slug_. So the first part of the `ssr-index.php` file will look like this:

```php
<?php

$SITE_ROOT = "http://example.com";

if ($_GET['slug']) {
    $response = file_get_contents($SITE_ROOT.'?slug='.$_GET['slug']);
    $jsonData = json_decode($response);

    if ($jsonData) {
        renderPage($jsonData, $_GET['slug']);
    }
} else {
    $jsonData = json_decode('{
        "title": "Name of the page",
        "content": "Content of the page"
    }');
    renderPage($jsonData, '');
}

```

For better clarity, we define the root URL at the beginning of the file. Then, if the GET value _slug_ is within the address, we call the `file_get_contents` API and convert the response to a PHP object using `json_decode`. The response from our API is JSON, if you are working with other data, a different transformation function will be needed. If the transformation to the PHP object is successful and the variable carries a value, we render the HTML page. If the GET parameter was not present within the URL, we can render an empty _fallback_ page, since the robot is probably on the home page. The example is missing the situation where the API returns a response with an error code, this would also want to be handled.

In both cases, the `renderPage` function will ensure that the base HTML page is rendered. In our example, I'm making do with just plain HTML and a few meta tags, but there are limits and you can play around with the look of this page. However, it is pretty much useless to design it in any way. I would focus more on semantics.

```php
function renderPage($data, $slug) {
    ?>
    <!DOCTYPE html>
    <html lang="cs">
        <head>
				    <meta charset="UTF-8" />
            <title>Name of the page</title>
            <meta property="og:title" content="<?php echo $data->title; ?>" />
            <meta property="og:description" content="<?php echo preg_replace('/<\/?[^>]+(>|$)/m', '',$data->excerpt); ?>" />
            <meta property="og:site_name" content="Name of the page" />
            <meta property="og:image" content="<?php echo $data->image; ?>" />
            <meta property="og:type" content="article" />
            <meta property="og:url" content="https://example.com/<?php echo $slug; ?>" />
            <meta name="twitter:card" content="summary_large_image" />
        </head>
        <body>
	        <main>
		        <h1><?php echo $data->title; ?></h1>
            <?php echo $data->content; ?>
	        </main>
        </body>
        <script type="application/ld+json">
            {
                "@context":"http://schema.org",
                "@type":"Article",
                "name": "<?php echo $data->title; ?>",
                "headline": "<?php echo $data->title; ?>",
                "datePublished": "<?php echo $data->date; ?>",
                "articleBody": "<?php echo preg_replace('/<\/?[^>]+(>|$)/m', '',$data->content); ?>",
                "abstract": "<?php echo preg_replace('/<\/?[^>]+(>|$)/m', '',$data->excerpt); ?>",
                "url": "https://example.com/<?php echo $slug; ?>",
                "publisher": {
                "@type": "Organization",
                "name": "Name of the page"
                }
        </script>
    </html>
    <?php
}
```

As you can see from the snippet, the rendered page will contain the basic meta here, as well as OpenGraph headers for social media and JSON+LD schema for _rich results_. In the body itself, I've made do with just an H1 for the headline and the HTML content of the post. However, there is room to add more tags and information here.

## How to tell the robots?

It remains to redirect the bots to `ssr-index.php`. To do this, you need to edit the `.htaccess` file. Assume you have standard hosting with `RewriteEngine On` otherwise you need to turn it on.

```bash
 <IfModule mod_rewrite.c>
  RewriteEngine On

	# allow social media crawlers to work by redirecting them to a server-rendered static version on the page
  RewriteCond %{HTTP_USER_AGENT} (facebookexternalhit/[0-9]|Twitterbot|Pinterest|Facebot|Google|Ads|SeznamBot|Bing|Telegram|Discord|Whatsapp|FreshBot)
  RewriteRule ^(.*)$ ssr-index.php?slug=$1 [QSA,L]

  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_URI} !api
  RewriteRule ^(.*)$ index.html [QSA,L]
</IfModule>
```

As can be seen from the snippet, if the _USER-AGENT_ of the visitor corresponds to one of the defined in the list, the visitor is redirected to the `ssr-index.php` file, otherwise the visitor continues to the `index.html` file, i.e. the classic web.

## Conclusion
As can be seen from the snippets, the whole solution has a number of pitfalls, starting with the need to define a list of robots and ending with the creation of a special page designed to communicate with the API. Therefore, this is not a solution I would recommend for large sites or sites that care about 100% reliability in SEO. It is rather a solution for smaller sites that do not rely on 100% SEO. However, it is a solution that can provide a good stepping stone for moving from traditional hosting to new services.

[netlify]: https://www.netlify.com
[vercel]: https://vercel.com

Modern JS frameworks and old-school PHP hosting?

Have you ever thought of a feature that would be useful as an extension to your browser, but didn't know where to start? This guide is for you. We'll show you how to create an extension that allows the user to generate arbitrarily large images from an external API. Then, at the end of the article, you'll find some useful resources on where to go if you'd like to do more extension creation.

## The basis is the manifesto
The most important extension file is `manifest.json` it is the entry point from which the browser knows the name of the extension, the version and also what files to load and what features or rights the extension uses. A very basic `manifest.json` should look something like this:

```json
{
  "name": "Image Generator",
  "version": "1.0.0",
  "manifest_version": 2,
  "description": "Generate an image,

  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "48": "icons/icon-48.png",
    "128": "icons/icon-128.png"
  }
}
```

I'll stop at just two properties, namely `manifest_version`. This value specifies not only the version, but also the available features and expected properties of the file. At the moment, it is more appropriate to use version 2, although Google already officially supports version 3 as well. However, you will usually come across a version 2 manifest solution when solving more complex problems, and some databases still do not support version 3 extensions - for example Microsoft.

The second value is the `icons` field, the basic set of sizes should be 16, 32, 48 and 128 pixels. However, `chrome.browserAction` also uses 24px. You may also encounter values of 19 and 38, these should be obsolete at this point and are not used see [Stack Overflow](icons).

## Viewing the extension window
This would give us a defined extension, but if we loaded it into the browser, nothing would happen. To do this, we need to add another value to the `manifest.json` file:

```json
...
  "browser_action": {
    "default_popup": "popup.html" .
  }
...
```

The `browser_action` value defines the actions that should be available in the main menu of the browser, i.e. through the extension icon. Values for icon, help, badge and popup can be defined here. In this tutorial, we'll make do with just the popup. However, if you are interested in other options, see for example the [Chrome Developers](browserAction) website.

The `popup.html` file should be located in the same folder as `manifest.json`, for simplicity I won't structure the directories in any way, however it is good practice to split the different parts of the extension into their own folders.

The contents of the `popup.html` file is a standard HTML page, which may contain references to CSS stylesheets or custom scripts.

```html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My first extension</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <h1>Image generator</h1>
    <p>Generate any size image</p>
    <input type="text" id="imageSize" placeholder="Size, e.g. 360x200">
    <img id="imagePreview" src="http://img.silencesys.com/360x200?text=360x200&color=4ddd9a&text-color=145b3a" alt="360x200">
    <input id="imageLink" type="text">
  </body>
  <script src="popup.js"></script>
</html>
```

In this case we load two more external files - `style.css` and `popup.js`. The first one should contain the design of our extension and I will not mention it further in this tutorial. The second file then contains all the important functions. Besides the files, we will also display the title, i.e. the name, text, two inputs and an image in our extension.

## Load extension in browser
Before we start adding functions to our extension, let's test if it will load in the browser. I'm showing the procedures for the two most common browsers, however if you use a browser with a chromium core, the procedure will be the same.

### Google Chrome
1. Type `chrome://extensions/` in the browser address to open the extension settings
2. In the top right corner, first switch to developer mode (_Developer mode_)
3. A panel with several options will appear: Load unpacked (_Load unpacked_), Pack extension (_Pack extension_) and Update (_Update_). Select the Load unpacked option.
4. In the window that opens, find the extension folder where the `manifest.json` file is located and click open.
5. The extension should appear in the list of extensions.

### Microsoft Edge
1. Type `edge://extensions/` in the browser address to open the extension settings
2. In the left panel, at the very bottom, there is a toggle for developer mode (_Developer mode_), turn it on
3. In the extensions panel on the right, there are several options to load unpacked (_Load unpacked_), Pack extension (_Pack extension_) and Update (_Update_). Select the Load unpacked (_Load unpacked_) option.
4. In the window that opens, find the extension folder where the `manifest.json` file is located and click Open
5. The extension should appear in the list of extensions.

If the extension is displayed in the extension list, it should also be displayed in the browser taskbar. Clicking on the extension icon, the popup we defined in the previous step should appear. This should successfully load the extension in the browser.

## Interaction
If everything went well, it's time to revive the extension. So let's open the `popup.js` file and add some functions to it.

### Custom image dimensions
The first input in the view should be used to enter the dimensions of the image, the view should then ideally update when the enter key is pressed. There are many ways to achieve this, I chose the `onkeypress` event in this tutorial. However, extensions do not allow adding functions to events in an HTML page, so we cannot use the `onkeypress` attribute. Instead, the event needs to be registered in a JavaScript file, as follows:

```js
const imageSizeInput = document.getElementById('imageSize')
imageSizeInput.addEventListener('keypress', updateImageSize)
```

Using `getElementById` we get the DOM element from the HTML page and then through the `addEventListener` function we add the `keypress` event function, which should be called whenever a key is pressed. To prevent the preview from updating with every keystroke, for example, we can use the following condition `if (event.key === 'Enter')` to ensure that the function only runs if the user presses the enter key.

```js
function updateImageSize (event) {
  if (event.key === 'Enter') {
    resizeImage(event.target.value)
  }
}
```

Before we start defining the `resizeImage` function, we need to find two more elements in the document, the image and the input that will contain the reference to the image. So we add the following two lines to the beginning of the file:

```js
const imagePreview = document.getElementById('imagePreview')
const imageLinkInput = document.getElementById('imageLink')
```

Now there is nothing stopping us from defining the `resizeImage` function, which will modify the image source and replace the input value with a reference to the image.

```js
function resizeImage (size) {
  imagePreview.src = `http://img.silencesys.com/${size}?text=${size}&color=4ddd9a&text-color=145b3a`
  imagePreview.alt = size
  imageLinkInput.value = imagePreview.src
}
```

So the interaction would be ready, but in order for the changes to be reflected in the browser extension, the extension needs to be updated. To do this, open the page with extensions - `chrome://extensions/` or `edge://extensions/` and click the Load again (_Reload_) button for our extension. The extension should then load the changes and after clicking on the icon in the browser bar, adjusting the size in the first input and pressing enter, the image should be updated with the new one.

## Appearance of the extension
As I wrote at the beginning, the goal of this tutorial is not to design the extension, but rather to illustrate the basic process and give you a hint on how to get started. For this reason, I will not describe what the extension might look like, but instead point out a few things. The extension popup window should be no smaller than 25x25 and no larger than 800x600 pixels. In general, any CSS that is supported by browsers can be used.

## Additional resources
Congratulations on the successful creation of your extension for Google Chrome and Microsoft Edge. If you are interested in the whole process and would like to learn more, I recommend visiting the following sites [Chrome Developer](chromeDeveloper) and [Microsoft Edge documentation](edgeDeveloper).


[icons]: https://stackoverflow.com/a/60184542/7564018
[browserAction]: https://developer.chrome.com/docs/extensions/reference/browserAction/#parts-of-the-ui
[chromeDeveloper]: https://developer.chrome.com/docs/extensions/mv3/
[edgeDeveloper]: https://docs.microsoft.com/en-us/microsoft-edge/extensions-chromium/

Custom Google Chrome Extensions

How to add asynchronous JSON+LD structured data to NUXT.js web appIf you have decided to create not only a simple web application, but you want to
also want to ensure that the content of your site is digestible for search bots.
You can't avoid structured JSON+LD data. To ensure easy indexing and display
I recommend using Google [JSON+LD](google-json) to index and index _snippets_ from your page in search.

Most websites use [schema.org](schema), however for Google Search it is better to
to rely on Google's documentation rather than Schema.org.

Wordpress websites usually include some basic SEO optimization,
which is why most bloggers don't even know about them and still rank in search
well. That's why it's also important to include these elements in our own websites and
search engine robots don't look at our sites through their fingers.

## Server-side structured data in Nuxt.js

Nuxt.js is a framework that allows you to create websites in Vue.js with prebuilt
server-side rendering, code splitting, and static page generation.
It also includes a number of useful libraries or allows their subsequent
installation. One such extension is [vue-meta](vue-meta), which allows
editing the page header directly from the components, and we will use this to add
structured data to the page header.

```js
export default {
  data () {
    return {
      structuredData: {
        "@context": "http://schema.org",
        "@type": "Article",
        // Zbytek strukturovaných dat, pro možnosti se podívejte na odkaz výše
        // nebo Google Docs...
      }
    }
  },
  head () {
    return {
      script: [{ innerHTML: JSON.stringify(this.structuredData), type: 'application/ld+json' }]
    }
  },
  async asyncData (context) {
    // Načtení dat a vrácení článku na serveru.
  }
}
```

## Code sample explanation
Inside the `data()` function we preformat the values to be displayed
in the structured data block. If you need to retrieve the data dynamically, it should
the structured data block should already be included in the `asyncData()` function.  As I have already
mentioned Nuxt.js allows you to modify the form of the page header in the `head()` function and just
this is where we insert the structured data script. Nuxt will then generate a `<script>` tag,
which will contain the structured data and the type _application/ld+json_, so don't forget
always set the `type` property as well.

## Conclusion
With this small snippet of code, you will ensure that your Nuxt.js application will be a good fit for
Google Search digestible and Google will be able to show you the classic search
special snippets as well.

[google-json]: https://developers.google.com/search/docs/guides/intro-structured-data?utm_source=devtools
[schema]: https://schema.org/
[vue-meta]: https://vue-meta.nuxtjs.org/

How to add asynchronous JSON+LD structured data to NUXT.js web app

XSLT provides a number of native functions such as `not()`, `sum()` and many others. XSLT 2.0 also brought support for defining custom functions in an XSLT template, and that's what I want to look at in this article.

A custom XSLT function can be defined using the `xsl:function` element, which has three attributes. The first is the name of the function, `name`, which must also contain a *namespace* prefix. This is particularly important to avoid collisions with existing XSLT functions. The prefix must also not contain any of the reserved prefixes see [W3 documentation](https://www.w3.org/TR/xslt20/#dt-reserved-namespace). The second attribute is `as`, which defines the data type returned by the function. The most common data types can be found, for example, on the [IBM](https://www.ibm.com/developerworks/library/x-schemaawarexslt/index.html#table1) web site, but remember to use the `xs:` prefix for basic types. The last attribute is `override`, which specifies what should happen if the same function already exists in the template with the same number of parameters, *arity*. It is not necessary to specify the last two attributes.

```xml
<xsl:function name="rocek:getElementId" as="attribute()" override="yes">

</xsl:function>
```

The function can also accept parameters, the `xsl:param` element is used for this purpose. As in the case of a function, the `name` attribute must be specified, but this time it is not necessary to specify a *namespace* prefix. The `as` attribute again specifies the data type.

The ```xml
<xsl:function name="rocek:getElementId" as="attribute()" override="yes">
  <xsl:param name="element" as="element()" />
</xsl:function>
```

Finally, the function should contain some body. In our case, we will return the ID of the element, either from the `xml:id` or `ana` attribute. Depending on whether the ID is present. I'm not sure that such a function would ever need to be created, but for illustrative purposes, this simple function is sufficient.

```xml
<xsl:function name="rocek:getElementId" as="attribute()" override="yes">
  <xsl:param name="element" as="element()" />
  <xsl:choose>
    <xsl:when test="$element/@xml:id">
      <xsl:sequence select="$element/@xml:id"/>
    </xsl:when>
    <xsl:otherwise>
      <xsl:sequence select="$element/@ana"/>
    </xsl:otherwise>
  </xsl:choose>
</xsl:function>
```

In addition to defining the function, you must also register your own *namespace*. This can be done by editing the XSL stylesheet header as follows. The address after the equation can be arbitrary.

```xml
<xsl:stylesheet
  xmlns="http://www.tei-c.org/ns/1.0"
  xmlns:xsl="http://www.w3.org/1999/XSL/Transform"
  xmlns:rocek="http://libovolna.adresa"
  version="3.0"
  exclude-result-prefixes="tei lindat"
>
  
</xsl:stylesheet>
```

After this modification, the function is successfully defined and ready to be used in our transformations. For example:

```xml
<xsl:template match="div">
  <div id="section-{rocek:getElementId(current())}">
    <xsl:apply-templates/>
  </div>
</xsl:template>
```

Custom functions in XSL

I recently started working on a relatively simple application in [Electron](https://www.electronjs.org). Since I'm used to working with the JavaScript frameworks [Vue.js](https://vuejs.org) and [React.js](https://reactjs.org), I wondered if I could use them for this application - of course I could. So I decided to go with Vue.js. I spent some time Googling what interleaving methods are most commonly used. Most of the time I ended up with some ready-made CLI. So I decided to try [Vue CLI plugin Electron Builder](https://nklayman.github.io/vue-cli-plugin-electron-builder/). As the name suggests, it is an extension for the Vue CLI and implements, besides Electron, also [Electron Builder](https://www.electron.build), which is a package that makes building a build with a finished application much easier.

So I started to develop the application, and tried a few first builds. At the beginning everything seemed to be without problems, these only increased as the application code was extended. Except perhaps that the first build on macOS didn't work for me either, but it turned out to be a problem with the Archiver application, which doesn't restore symlinks after unzipping the zip, so it can be worked around with other archive software. Besides, Apple has known about the bug since macOS Catalina. I'll stick with macOS, I also tried a build for new MacBooks with Apple Silicon processors, at first Electron Builder didn't seem to recognize these processors, however after checking in Activity Monitor I found that some builds are marked as _Apple_ and others _Intel_. So I figured that the builds are being created according to the correct architecture, but it depends which one is created first - ARM or Intel, because the latter will overwrite it. A number of other silly little things like that popped up, besides not being able to create a .dmg or .pkg. So my friend recommended `electron-packager`. But replacing the builder in this CLI utility is not a matter of one npm *(Node Package Manager)* command. I eventually solved all the problems and the builds work the way I need them to, but it did lead me to wonder, what if I solved the whole thing myself?

That is what I would like to address in this article. However, unlike Vue.js, I decided to go with React.js. I've also decided to replace the traditional Webpack with Vite and see if these tools can be combined. Let's leave aside that while with Electron bundler I get some freedom over configuration, with Vite I sacrifice some of it again. However, combining these tools is ultimately easier than I would have expected. Of course, it has its pitfalls and is definitely not as convenient as ready-made CLI tools, unless you decide to write something similar yourself. That won't be part of this article, though.

## Vite and React.js

Let's start by installing Vite, as I said it is in a way similar to Webpack. Like Webpack, it also offers a dev server and a tool to _build_ application code. However, unlike Webpack, it works directly with ES _(ECMAScript)_ modules and does not compile them into CommonJS, and the Express.js web server has replaced the minimalist Koa server. The _Hot module reloading_ is also many times faster, de facto instant, on the other hand it allows to use only ES modules and not CommonJS or AMD. Build code is done in a pre-configured [Rollup](https://rollupjs.org/guide/en/), whereas Webpack handles this itself. A sort of imaginary advantage is also the need for minimal configuration of the whole project, that is if you decide to use one of the predefined presets, for example React or Vue.

```bash
npm init @vitejs/app my-react-app
```

During project creation Vite asks for a template choice, so we choose `react`. We are then prompted with a few commands that we should run to get everything installed, ie:

```bash
cd my-react-app
npm install
npm run dev
```

If we've launched at least the first two, the Vite interface and React.js app are ready. That leaves the final command, which is to run the dev server to verify that everything works. We should see in the command line that the app is running on `http://localhost:3000` or some other port if 3000 is already taken. We can then proceed to install Electron,

## Electron

It is a framework for creating _cross-platform_ desktop applications using JavaScript, CSS and HTML. Thanks to Electron we can create native applications and the hardest things like updating, native menus and notifications or crash reporting are handled by Electron. Installation is very simple, just run the following command:

```bash
npm install --save-dev electron
```

Now we just need to edit the `package.json` file and add the _entry point_ for the Electron application, most commonly called `main.js`. However, this is where the first catch comes in, Electron only supports CommonJS, while Vite only supports ES. One option is to accept that the parts for Electron will be in CommonJS and the parts for Vite/React will be in ES, but this will make it a bit harder to share code. Since Vite prefers ES it is easier to compile the code for Electron from ES to CommonJS. So our _entry point_ will look like this:

**main.js**
```js
import { app, BrowserWindow } from 'electron'
import path from 'path'

const IS_DEV = process.env.IS_IN_DEVELOPMENT || false

function createWindow () {
  // Create the main Electron window
  const win = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      nodeIntegration: true,
      enableRemoteModule: true
    }
  })

  if (IS_DEV) {
    // If we are in development mode we load content from localhost server - vite
    // and open the developer tools
    win.loadURL('http://localhost:3000')
    win.webContents.openDevTools()
  } else {
    // In all other cases, load the index.html file from the dist folder
    win.loadURL(`file://${path.join(__dirname, '..' ,'dist', 'index.html')}`)
  }
}

app.whenReady().then(createWindow)

app.on('window-all-closed', () => {
  // On macOS, it's common for an app and its menu bar to remain
  // active until the user shuts down the application via the Cmd + Q shortcut
  if (process.platform !== 'darwin') {
    app.quit()
  }
})

app.on('activate', () => {
  // On macOS, if an application is in the dock, it is common for a window to be created after
  // clicking on the icon in the dock if there are no windows active
  if (BrowserWindow.getAllWindows().length === 0) {
    createWindow()
  }
})
```

Perhaps the only difference from the one found on the Electron website is the use of ES and the declaration of the global variable `IS_DEV`, which
to distinguish whether the Electron instance should load the web from the Vite server or a generated HTML page in the `./dist` folder. Then we need to
modify `package.json` so that the value of `"main"` refers to our file, i.e. not exactly:

**package.json**

```json
{
  "main": "./dist/main.js",
}
```

You may be surprised to know that I am referring to the `dist` folder, whereas our file is not in any folder. Let me explain.

## ESBuild

As I wrote, Electron only supports CommonJS, while Vite and by extension React only works with ES. What about it?
The easiest solution is to use some bundler, in this case esbuild, since Vite uses it too. I have also tried Babel, however
it conflicts with Vite and the application fails to _build_. So we install esbuild:

```bash
npm install --save-dev esbuild
```

Add the following lines to the `"scripts"` section:

```json
{
  "scripts": {
    "esbuild-cjs": "esbuild main.js --format=cjs --outfile=./dist/main.js",
    "electron:dev": "npm run esbuild-cjs && IS_IN_DEVELOPMENT=true electron ."
  }
}
```

The first script, `esbuild-cjs` transforms the EC code into CommonJS and thus makes it digestible for Electron. When
we read it carefully, we will also see that the output file is stored in the `./dist/main.js` folder, which is where we have referenced
in the `"main"` value of the `package.json` file. The second script is then used to run the Electron development instance. So, if we have done everything correctly, running `npm run electron:dev` will first transform the `main.js` file into CommonJS and only then will Electron be started. If we're running the Vite server at the same time, we'll see the opening page of the React application - identical to the one we saw in the browser after visiting the `http://localhost:3000` page. Now all we have to do is choose the right builder and we can develop applications with Vite, React and Electron.

## Electron Packager

After the initial fiasco with Electron Builder, I decided to try an alternative for this article, namely [Electron Packager](https://github.com/electron/electron-packager). I have to admit that the documentation doesn't compare, Builder has much better documentation, but you should try everything. So let's install Electron Packager:

```bash
npm install --save-dev electron-packager
```

After installation, just add another script to `package.json` in the value `"scripts"`, namely:

```json
{
  "scripts": {
    "electron:build": "npm run esbuild-cjs && electron-packager --out=release ."
  }
}
```

The script again first uses an existing esbuild script to convert the `main.js` file to CommonJS and then calls
Electron Builder, which in this case creates an application package for our active paltform. In the case of Windows for Windows, macOS for macOS and Linux for Linux. With that, we're done and all we have to do is play around with the application itself and configure all the components.

Martin Roček

How to start building websites with Hugo

What's wrong with SIS4

What's wrong with SIS4

Why I use DeepL to translate some articles

Why I use DeepL to translate some articles

Modern JS frameworks and old-school PHP hosting?

Modern JS frameworks and old-school PHP hosting?

Custom Google Chrome Extensions

Custom Google Chrome Extensions

How to add asynchronous JSON+LD structured data to NUXT.js web app

How to add asynchronous JSON+LD structured data to NUXT.js web app

Custom functions in XSL

Custom functions in XSL

Electron and Vite.js with React.js