
After months of promises, it's finally here! The Latin Dictionary is getting a new update, hopefully full of exciting features. But first things first. You may have noticed that a few months ago I ran a poll on Twitter about what I should rename the dictionary, and then nothing happened. I'm keeping my promise to use the name that won the poll, so it's time for a rebrand. Hopefully it will be much better than Twitter's "to X". The Latin Dictionary will now be called [Vocabula.lat](https://www.vocabula.lat), and that will also be the new domain for the dictionary. No need to panic if you got used to latin.rocek.dev, as I will keep the redirect active indefinitely (or at least as long as I keep the rocek.dev domain).

Why the name change? Many friends told me that they wished to cite the dictionary as a source but were hesitant because of the domain name. Also, the previous name was too generic, and there are many dictionaries in the wild. I realised that I should give it something more unique. Luckily, Jan Odstrčilík came up with several ideas, all of which were amazing, and one of them was Vocabula - which many of you voted for. So a big thank you to him!

The name is not, however, the only change. You will probably notice the main difference right away when you try to search for a word. The results are now displayed in a completely different way. Over the past year, in my spare time, I have been trying to figure out how to convert the Whitaker list of words into a human-readable form, and this is the result.

![New design of Vocabula](/img/blog--vocabula.jpg)

The output of the Whitaker dictionary is now parsed on the server and the meanings of words are separated into sections. Whitaker also provides useful information about the frequency of the word, its geographical location and its usage. All this information was hidden behind single letter abbreviations which were very difficult to decipher for anyone who had not used Whitaker before. The results for a single entry are also sorted by frequency, which means that the word you're looking for is most likely to be at the top, rather than at the bottom, as was often the case with Whitaker's simple results.

For people who prefer the traditional list, you can either use the "show raw data" toggle at the top of each entry to switch to an old results page, or you can use the global flag. Just type `disable:transformation` in the search bar and it will be disabled for good.

I have also decided to use the OpenAI ChatGPT 4 model for translation and lemmatisation, which should provide more accurate translations. However, it may take a bit longer to load the results, so please be patient. Also, there is still a limit to how much I'm willing to spend on requests to OpenAI, so if you see a message that the limit has been reached, please try again later.

The last thing that's new will please the French visitors of Vocabula. My great friend Martina Vacková-Reiterová has agreed to help me with the French translation, so [Vocabula.lat](https://www.vocabula.lat) is now available in French. Many thanks to her! If you find any typos, don't hesitate to let me know and I'll fix them as soon as possible. Unfortunately, Whitaker's translation is not available in French, nor is it available in Czech. Languages can be tricky, and even though I have ideas about how to fully translate it, I'm a bit worried about losing the actual meaning of the words, so it'll stay in English for now.

And that's about it. I hope you enjoy [Vocabula.lat](https://www.vocabula.lat), and if you find any bugs or have any suggestions on how to make it even better, let me know 🙂 .

Latin Dictionary is now Vocabula.lat


It wasn't long ago that I redesigned my Latin dictionary. However, I was not happy with the change, because in the end I thought it might be a step to worse. So I decided to give it another go, and I'm happy to announce that the new design is now live! 🥳 But this is not the only change. I've also added a lot of new features and improved the overall performance. So let's have a look at what's new.

![Comparison of the old and new design](/img/blog--dictionary_06.gif)

# New design
The biggest change you will notice is the new design. I've tried to make it more modern and cleaner. Instead of using shade of grey for the background, I decided to use white. I think it looks much cleaner and the text is easier to read. I also fixed some problems with the layout on mobile devices and tablets. The new design uses more consistent font sizes and colours.

The first thing I decided to redesign was the home page because I thought the two-column newspaper-style layout was a bit old-fashioned. So I kept the two columns, but the other column contains a random word widget instead, and the information on how to use the dictionary has been moved to the bottom section with tabs, as there are now more features that need explaining. I also decided to add small snippets of the application to the explanations to make them easier to understand. The cool thing is that all the snippets are HTML coded, so they should work on all devices.

![Comparison of the old and new design](/img/blog--dictionary_01.jpg)_Side-by-side comparison of the old and new design._

Less obvious are the changes to the explanation box. Previously, if you searched using regular expressions (search using asterisks, periods or square brackets), you could end up with hundreds of words in the suggestion box, which was difficult to navigate. Now you can use your mouse wheel to scroll through them, even though the box is horizontal and scrolling vertical. I also added a little arrow that lets you expand the suggestion box to the full width. This way you can see all the words at once and see whether any of them is the one you were looking for.

![The word explanation box](/img/blog--dictionary_02.jpg)_Detail on the new word explanation box, can you spot the differences?._

The final addition to the new design is support for themes. So if you are a night owl like me, you can now choose between a light and a dark theme. As I plan to polish the dark theme a bit more, it is hidden under a flag. If you want to try it out, you can type `enable:themes` in the search box and hit enter. You should be notified that the feature has been enabled and you should see a small icon in the top right corner that allows you to toggle between light and dark themes. Let me know what you think about these changes to the design.

![Preview of dark theme](/img/blog--dictionary_03.jpg)_Preview of the dark theme and two new cool features!_

# Translating with OpenAI

Artificial intelligence (AI) has been making waves in a variety of industries and applications, and language processing is no exception. As AI continues to evolve, it offers exciting possibilities for enhancing our understanding of languages and facilitating language learning. With that in mind, I decided to explore how AI could be used to help people learn Latin.

Fortunately, I had the chance to play with OpenAI's APIs and the text-davinci-003 model. To my surprise, the results were impressive. While the translations may not be flawless, the AI can provide a general understanding of the content of a sentence, which is particularly useful for those learning Latin.

![Translations are real](/img/blog--dictionary_04.jpg)_You can translate and rate the sentences you put to search_

I decided to implement this feature in the Latin dictionary, all you have to do is type to search a phrase containing at least three words. Once you've done it, you'll see a transcription of the phrase just below the search box, along with a "Translate" button. Click the button to get the translation. After translating, another set of buttons will appear next to the translation to rate the quality of the translation, if you use them, you will help me to improve the translation function in the future, although it will take some time with GPT.

Please note that this feature is still in private beta, but if you're interested in trying it out, please don't hesitate to contact me on Twitter or use the form at the bottom of this article. I'd be happy to give you access.

# Lemmatisation
In addition to the translation function, I've also implemented a simple lemmatisation function using the OpenAI API. While the translation function is helpful for understanding the overall meaning of a sentence, the lemmatisation function is useful for more detailed language analysis. Lemmatisation is the process of reducing words to their base or dictionary form, which can help identify the root of a word and its grammatical function.

![Lemmatization](/img/blog--dictionary_05.jpg)_Lemmatization with many important grammar details of the word._

The lemmatisation function I've implemented using OpenAI's API may not be perfect, it can provide a general idea of a word's base form and grammatical function. If you want to try out lemmatization, just enter a phrase of at least three words in the search box, as you would for translation. Once you enter it, a transcription of the phrase will appear just below the search box, along with a "Lemmatise" button. Click on the button to get the lemmatization.

Please note that this feature is still in private beta, but if you're interested in trying it out, please don't hesitate to contact me on Twitter or use the form at the bottom of this article. I'd be happy to give you access.

### Join the beta
If you want to try out features that are still in private beta, please fill out this [Google Form](https://forms.gle/wWHQ9W9EXG2ysDsdA) and I'll get back to you as soon as possible.

First big update of the Latin dictionary


I recently had the chance to try out the ARC Browser from Browser Company, a web browser that claims to reimagine the way we browse the web. I wanted to share my thoughts with you about this new browser.

## Installation

The installation process was straightforward, but it is currently only available for MacOS users. The browser offers a slightly different approach to login and customization, making it feel like a warm welcome to a new browser.

![A GIF image displaying onboarding settings of colour and transparency options in ARC browser.](/img/blog--arc-browser_1.gif)_Here you can see a short GIF animation of the onboarding settings of colour and transparency in ARC Browser._

## Browser Interface

The browser interface looks similar to other major browsers, with the exception of tabs being in the side panel. This feature may already be familiar to some of you from other browsers like Microsoft Edge. However, the thick border around the website window creates a sense of disconnection from the website, which may take some getting used to.

Another feature that takes some getting used to is the small size of the address bar on the side panel, that I often look for when I want to move to a new page. However, ARC Browser offers a range of shortcuts. Once you learn the most important ones as is the command palette [cmd + t], you can easily hide the sidebar and enjoy the web in full. Because everything you need to navigate in this browser is just one key away.

![Preview of the command palette in ARC browser](/img/blog--arc-browser_3.png)_Command palette contains all your opened tabs, but you can also use it to open new ones or to search in history._

One of the most interesting features of the ARC Browser is the ability to create your own dashboards (easels they call them). With this feature, you can save pictures you like and sort them by different categories as for example recipes, furniture, designs and so on. The browser backlinks images to their original source, making it easy to return to the page where you found the image. This can be incredibly useful for students and creatives who are always looking for new sources of inspiration.

![A website Same.Energy opened side-by-side with my custom easel](/img/blog--arc-browser_3.png)_Images on the same.energy website displayed with my custom easel with fantasy pictures._

Another great feature of ARC Browser is the option to split windows. This feature is a time saver when working with various medieval manuscripts and a dictionary at the same time. Yep, my medievalist speaking. It is also useful when developing, allowing you to easily open website administration or APIs while still seeing the website you are developing. You can split the screen in two ways - side by side and top-bottom.

ARC Browser also offers spaces where you can have different tabs open for different uses. For example, one workspace for work, another for school, and a third for random browsing. Switching these workspaces is easy: you just move to the sidebar and swipe with your fingers on a touchpad or press the icon at the bottom of the sidebar. This feature can be especially useful for those who have a lot of work to do and need to keep different tabs open for different projects.

You can also create notes in the browser with basic formatting options, such as headings, bold, italic, underline, strikethrough, links, and images. However, if you use advanced note-taking apps like Notion or Obsidian, ARC Browser may not replace them. It is still a useful feature for basic note taking and can be a great way to keep track of your ideas.

![Note taking with ARC browser with draft of this article](/img/blog--arc-browser_3.png)_Screenshot of the note taking part with draft of this article._

One of the most interesting features of ARC Browser is the "boosts", which are little snippets of code to overwrite website functions or design if you know a little CSS and JavaScript. Some boosts run when the page loads, while others can do more time-consuming tasks and run across tabs. This feature can be incredibly useful for those who have some coding knowledge and want to customize their browsing experience.

![Three browser tabs on side-by-side one with javascript code, second with CSS and last with slightly modified Google homepage](/img/blog--arc-browser_2.jpg)_An experiment with boosts - change Google's homepage to green and suggest random term when search input is focused (not really useful, I know)._

What I found difficult to use are the extensions, which are hidden behind three vertical dots on the right side of the browser. Some extensions can be summoned via the [cmd + t] shortcut, but I think there should be a more accessible way to show them. For example, if you use a password manager, you need to access that extension quite often, but pressing [cmd + t] and typing its name can be quite time-consuming, and aiming for the three dots on the side is not much better.

ARC Browser is based on Chromium, so most of the settings pages resemble Chrome. However, the developer console is disappointing as it is exactly the same as in Chrome. After discovering boosts and window splitting, I was hoping the developers would make it more similar to these features. Perhaps this will be addressed in the future.

## Overall Impression

In my opinion, the ARC Browser is a great alternative to mainstream browsers like Chrome or Firefox. It has a lot of unique features that can make your browsing experience more enjoyable and efficient. The ability to create your own dashboards, split windows, and use boosts are just a few examples of how ARC Browser can improve your browsing experience.

Will it replace my default browser, you ask? Probably not, but it's a great browser to have in your arsenal. If you're used to Chrome, Firefox, or Safari, you may find ARC Browser a bit cluttered, but if you're used to browsers like Vivaldi or Brave, ARC Browser may feel like home.

ARC Browser


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/

Martin Roček

Latin Dictionary is now Vocabula.lat

First big update of the Latin dictionary

First big update of the Latin dictionary

ARC Browser

ARC Browser

How to start building websites with Hugo

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