DEV Community: Jeroen van Kempen

Umbraco package of the month: xStatic

Jeroen van Kempen — Fri, 27 Dec 2024 03:49:54 +0000

This is the last Blog of the year already and what a wonderful time has it been, so for the last time this year we are going to look at the package xStatic.

xStatic is a package that statically generates your Umbraco website and gives you the ability to deploy it in a myriad of ways, like AWS, Netlify, FTP or via Git. In my case, we are looking at deploying it via Netlify because it is easy and free.

Setup

Firstly, you will need to install the xStatic NuGet package. With this, you can build and deploy your site to a local folder. To add the other deployment options, you will need to add one of the other packages of xStatic. In my case, xStatic.Netlify.

After installing it, you will need to add "services.AddXStatic().Automatic().Build();" to your startup file. If you have added one of the other packages, there is a chance that it will not detect it correctly, and then you will also need to add an extra line of code. In Netlify's case, "builder.Services.AddNetlifyActions();".

Now just add the xStatic file in the App_Plugins to your project, and you are ready to start. After logging in, you will first need to set up the xStatic tab by adding it to the correct user role.

Now in the new tab, you will get the option to create a new site where you will need to fill in the root node from which it will generate. Additionally, you can configure the media files or folders you want to add, how to export the files in HTML or JSON, and the asset paths for all stylesheets or JavaScript files.

For deployment, you can set it up if it should auto-publish when a node is published and how it should be published. In my case, that also includes the access token and the site ID from Netlify.
After which you will see the site and get the option to build, deploy, or the option to download the code if you want to.

Uses and limitations

Now, what are the use cases and limits for this package?
By generating a static site, it will be a lot quicker to use than normal and you can save a on hosting costs. Additionally, by using this setup instead of just creating a static site yourself, you can always make the change to no longer use a static setup and use more of the functionality of Umbraco. You can more easily fill in the correct data and use it more globally, additionally it will be a lot easier to add more pages.
There are also some limitations by using this setup like limited use of some of the great Umbraco functionality like search or dynamically getting you data. Additionally, because you are only hosting the site and not the CMS this setup is more for developers even getting the data to be shared with other people will need extra work like hosting a SQL Server somewhere or using uSync.

Opinion

In my opinion, it is a nice way to set up a simple hobby site because you always stop when you have to think about hosting and how much it will cost. Otherwise, I don't see a use case for clients besides small one-off campaign sites.

Umbraco package of the month: Uskinned

Jeroen van Kempen — Wed, 13 Nov 2024 12:20:24 +0000

This month, I'm diving into the Uskinned "package," if you can call it that. It's quite well-known, but it was new to me until Codegarden. I've always wanted to explore it but never had the time to tackle such a substantial package—until now.

What is it?

In their own words “uSkinned Site Builder is the only all-in-one, future-proof website solution available in the Umbraco ecosystem.” but wat does that entail? I will look at the features it adds, the problem it is trying to solve and the costs of using it.

Problem

The issue it aims to resolve is the initial setup of a project with essential core functionalities that every website might need. This allows you to easily set up your website without repeating the same tasks for every site, saving you and your client both time and money. As a result, you can dedicate more time to developing complex and custom features.

Setup

You can either install the package in your own solution or you can get a site from uSKinned them self’s and let them handle everything.
To Setup the package it is as simple as adding the package and building, but to see it in action locally you will need to have a licence.
For this blog I have used the week free online version to see the package in action and added it to my local test project to see more of the details.

Features

You can setup the full website experience from setting up a shop with SNIPCART or ECWID or using external form handlers like mailchimp with recaptcha. In addition to those extra features, there are core elements of the website that I will explore in more detail.

Website setup

When you add the package to your project there suddenly will be allot of more pages and datatypes. From the technical pages like the sitemap & robots.txt and functional pages like login and the search page.
Next to that are the more content focused pages, like overviews or lose content pages
By default you can only add content pages to the home node no new overview pages or any other pages. If you have added the package to your local setup you can change this.

Templates

Another feature is the ability to setup templates for all kind of pages for easy use of the content team so nothing important gets forgotten.

Design

USkinned adds a new node called ‘Design’ where you can add a design for your website. In these designs you can change nearly everything like the layout, logos, fonts, colors used, custom scripts and much more. For the colors you can even setup a custom color pallet, sadly is does not automatically update it if you change it.

Globals

Another node they add is the ‘Global’ node where the general settings are stored, like the chosen design, reading direction, how to handle forms, components you want on every page, and many more options. There is also a specific place for the navigation, footer, and reusable items. There, you can create groups of reusable items to use all over your website with the reusable component or pod's per page.

(Components are big blocks that take up the full width of the page, and pods are smaller and can be added into some blocks)

Costs

If you just want a simple website you can host it at uSkinned for 36€ or if you want to use uSkinned in your own setup it is a onetime payment of 319€ for one site.

Hosting cost

An easy comparison is to check the hosting options verses Umbraco self

	uSKinned	Umbraco cloud
Cost	35€	40€
Features	uSninned designer	Forms, deploy
Hosting	SSL https, azure	TLS https, cloud
Support	Backups, upgrades, 24/7 suport	Upgrades, buisiness hours
Domains	1	10

Conclusion

To conclude, it is a great package that allows you to quickly set up an entire core website, which you can expand upon as needed. It ensures that you don't forget any important elements. While some features may be excessive for certain sites, they provide valuable future-proofing.

As a backend developer, I find it particularly useful for handling the look and feel of the website.

However, I am disappointed that there is no free version available for local testing. Additionally, I don't understand why the default settings limit the types of pages you can create.

OPINION

I would easily choose this package when I want to create my own site, but I would go for a custom hosting to have some freedom in how the website is set up maybe even combining it with Umbraco cloud.

Nevertheless the entire team deserves a #H5YR

Umbraco package of the month: Auto dictionaries

Jeroen van Kempen — Mon, 21 Oct 2024 11:57:14 +0000

I am doing a monthly blog about different package within the Umbraco landscape. Previous blogs can be found over at https://techhub.iodigital.com

This month, I am looking at the package "Auto dictionaries" a package that detects static content and allows you to set the text to an existing dictionary item or create a new translation. You can expand it by using a translator like DeepL or Microsoft Translation to automatically add those translations.

Setup

Unless you want to use the auto-translation feature, no other setup is needed beyond just installing the package. If you want to make use of the auto-translators, you need to set up the translator you want to use and the API key, endpoint, or region based on the translator you are going to use. In my case, I used the free version of DeepL, and all I had to do was set up the API key.

How does it work

The package detects static content found by a complex bit of regex. These finds will be collected in a new overview under the "Translations" tab. In this overview, you will see a list of the configured .cshtml files in Umbraco—think about the _layout file, blocks, or pages.

When going into detail on one of these pages, there is an overview of all the static texts the package has found. You can then choose to match an already existing dictionary item or to add a new dictionary item. If you have a translator configured, it will also give you an option to generate a translation based on the original text.

When adding the translation, it replaces the static text with the dictionary item (@Umbraco.GetDictionaryValue("ClickHere")) in the .cshtml file. This means that this package is more for developers than clients because the changes will just be removed after a deployment.

Issues

There was one issue I had when trying out this package with languages other than English, and one call to action to help improve the existing regex.

Other languages

My attempts to use the translator from Dutch to English came with a problem. Whether it is an issue with the package or the free version of DeepL, I am not 100% sure. But it is a notable problem if you have project that use two different languages than English. I have made an issue on GitHub to get more detail about it.
Additionally, it is worth noting that even when using English as the default language, it does not detect the language of the text you are translating it just assumes the text was in English.

Regex

The package creator, "Johannes Lantz," has an open issue in which he asks for anybody's help to improve the way static texts get detected, because everybody's setup is different and there are way too many variables to think about. So, if you are a regex expert, make sure to see if you can help.
https://github.com/Lantzify/auto-dictionaries/issues/7

Personally, I am not a regex expert, but after pushing the limits of the regex, I found the biggest issue are external scripts, JavaScript code in the .cshtml files or text with <a> attributes in the middle for example. But for the normal pieces of text in buttons, titles, or texts, it works great.

More functionality

It is a nice feature to be able to auto-translate the static pieces of text, but it is currently only available when adding new items from one of the new overviews. I would also like this to be an option on the already existing dictionary items.
When hearing about this package, I thought this would already be a feature, but sadly it was not. So, I have asked for it to be added on GitHub.

Conclusion

I find this a great package, especially if you have old stuff or just a lot of pages or blocks. However, it still has a few kinks to work out, particularly the issues with languages other than English. I like the overview it gives you of all the work you have to do, but it is currently more for developers than for clients.

I would like to thank Johannes Lantz for this package and wish him good luck for the future #H5YR

https://github.com/Lantzify/auto-dictionaries
https://marketplace.umbraco.com/package/autodictionaries