
I'm thrilled to share some exciting news, Vocabula has just been released as an extension that seamlessly integrates with a tool that every Mac user should try.

## Discover Raycast
[Raycast](https://www.raycast.com/) is more than just a launcher—it's an all-encompassing tool that serves as a smarter, more efficient replacement for the default macOS Spotlight. Packed with a myriad of extensions, Raycast transforms your everyday workflow, making tasks quicker and easier. If you own a Mac and haven't heard of Raycast yet, it's time to give it a try.

Now, you might be wondering, what does this have to do with Vocabula? As a someone who often finds themselves too lazy to open a browser for quick translations, I wondered how difficult it would be to create a Raycast extension for Vocabula. To my delight, it turned out to be quite straightforward. Thus, I developed the Vocabula extension for Raycast, bringing all the essential features of Vocabula directly to your fingertips.

## Introducing the Vocabula.lat Extension
With the Vocabula extension, you can effortlessly search for words and obtain translations, and comprehensive grammar information — just as you would on the Vocabula website. Although some features are not included for the sake of simplicity and efficiency, you can always press `[enter]` to visit the dictionary's website for more in-depth information.

![Vocabula Extension in Raycast](/img/vocabula-1.png)

### Features:
- **Word Search**: Quickly look up words and receive translations and grammatical details.
- **Abbreviation Search**: Another handy command allows you to search for abbreviations, displaying images from the Cappelli dictionary along with all necessary details.

Both searches supports simplified regular expressions that are available on the Vocabula website.

### Limitations:
- **Information about dictionary and usage of the word**: this was omitted to keep the extension simple and efficient.
- **Czech Medieval Dictionary**: Currently excluded due to issues with the API, as it seems the API is getting rusty and the responses are not always really helpful.
- **Translation and lemmatisation**: This features are also not included in the extension.

However, there are some exciting developments on the horizon. For now, try the Vocabula extension for Raycast a try and enhance your macOS productivity like never before!

<br />

**Install the extension directly from the [Raycast Extension Store](https://www.raycast.com/silencesys/vocabula-lat).**

Vocabula is now available in Raycast


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

Martin Roček

Vocabula is now available in Raycast

Latin Dictionary is now Vocabula.lat

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?