From time to time, we have the experience of building websites without frameworks like Angular, Vue.js, or React. Perhaps, for fun, we are new or we just want something extremely simple.

In my case, I started building mypersonal website several years ago. In those days, I didn't know Angular, and it was a little bit messy to support everything I needed. I didn't consider myself a front-end developer. It was more like my hobby.

Something important in my case was to add multilingual support since I speak English and Spanish fluently. This was a little bit messy since I couldn't find any good library or solution. After several attempts, I came up with the following pieces of code that can simplify your life also.

I have two files, one for English and one for Spanish, where I store the translations in JSONs as constants.If you wonder why I don't store only the JSONs, I had several issues consuming the files later. I got several errors, and most solutions were for Node.js only.

lang-en.js

consttranslations={"telephone":"Telephone","email":"Email","contactMe":"Contact me"};

lang-es.js

consttranslations={"telephone":"Teléfono","email":"Email","contactMe":"Contáctame"};

The following script is for reading the scripts:

get-script.js

constgetScript=url=>newPromise((resolve,reject)=>{constscript=document.createElement('script');script.src=url;script.async=true;script.onerror=reject;script.onload=script.onreadystatechange=function(){constloadState=this.readyState;if(loadState&&loadState!=='loaded'&&loadState!=='complete')return;script.onload=script.onreadystatechange=null;resolve();}document.head.appendChild(script);});

And the last script is for setting the values in your HTML:

translations.js

letlang='en';letnLang=(navigator.languages?navigator.languages[0]:(navigator.language||navigator.userLanguage)).split('-')[0];letsupportedLang=['en','es'];lang=supportedLang.includes(nLang)?nLang:lang;getScript(`lang-${lang}.js`).then(()=>{document.querySelectorAll('[data-translation]').forEach(item=>{item.innerHTML=translations[`${item.dataset.translation}`];});}).catch((e)=>{console.error(e);});

So, how do you consume and configure your HTML? You define adata-* attribute calleddata-translation with the value you expect from the "JSON" like this:

<scriptsrc="get-script.js"></script><scriptsrc="translations.js"></script><pdata-translation="contactMe"></p><pdata-translation="telephone"></p><pdata-translation="email"></p>

And that's all. Now, you can create your static multilingual pages without frameworks.

Follow me on:

Personal	LinkedIn	YouTube	Instagram	Cyber Prophets	Sharing Your Stories