This is the easiest every explanation i have watched in a good number of years. Everything you say seems to be coming from the tip of your fingers. Thanks
Thank you Steve. I like this approach much more than using wordpress with weglot or other plugin solutions. Plugins and frameworks are great and there is nothing wrong with using them, but I want to keep it simple and I'm trying to stick with vanilla HTML, CSS and JavaScript at this point. I got to learn building sites with these basic tools. Always thankful for your valuable content, sir.
i very much enjoyed your deep voice and the simplicity at show here but i can't find a situation where this tactic is useful other than some nav bar changes.
Every tactic will work for certain situations and not others. Lots of things that I teach are really just about exposing students to a new tool or a new way of thinking about solutions
@@SteveGriffith-Prof3ssorSt3v3 that's amazing and please keep up the good work, i realized that i had to do a lot of js in the end anyway which isn't far from what you depicted here. there is a reason we use CMS and some customers really want us to suffer ;)
Create a dropdown list, set the value of the options to be the language codes. When the user changes the selected option run a function to match that value with your data and reload the strings.
If any1 can help I would really appreciate it: When he used if (key) { } Doesn’t the variable key return a string? Doesn’t the if conditions only accept boolean values?.. can sm1 please explain this
JavaScript has a concept of Truthy and Falsely - ua-cam.com/video/J4N6ETFpdkA/v-deo.html within if statements and other logical operators things are automatically converted to true or false. There is a small group of things that will be understood as false. Everything else is true. ua-cam.com/video/mat1O5JI2fg/v-deo.html
hi Thanks for making this video, I was wondering if it is possible to add a script that detect the browser language and change the html="______" to make it works well. Thanks
how does it apply to whole website with multiple div and so much text? Your solution is perfect for small application. What there can be done to bigger websites except express solution or crowded langdata object?
For large websites with tons of content that is available in multiple languages, I would use the HTTP_ACCEPT_LANGUAGE header that comes from the browser and make decisions on the server-side about what content to send to the browser. That would give you the default value. Then have a form or links on the page that let the user override the header with a querystring or cookie value. Again, the server-side code decides what content to compile and send back. This can be done with NodeJS, PHP, or whatever language you use server-side.
hi! I tried to add Spanish language by changing "de" to "es" and "es-ES" but it doesn't work. My browser language is spanish and in the console appears like this. However, the content displayed is the english one, you know why? thanks!
Did you change both the HTML and the data in the Javascript? If not then it won't find a match in the data to display so it falls back to the default from the HTML element.
@@SteveGriffith-Prof3ssorSt3v3 I tried your code and replaced "fr" for "es". I changed my browser language and check it and it shows english. I checked the console to check it the language browser changed and it did. However the language doesn't work. I don't know why it is happening. Any suggestion?
Thanks for awesome explanation! I never knew how this worked with pure HTML websites. Do you have an example for selecting locales using cookies? Or is there a better way than using cookies to handle user selected languages? I use i18n for my current NodeJS web apps. The only thing I need to provide is the JSON dictionaries and the serverside JavaScript that handles selects the language that should be shown to the user using a locale variable. I'm also using cookies to save default language for each user. Now, obviously this makes hosting a bit too complex because the website requires a managed host for NodeJS each time I want to deploy a multi-language website. Having the multi-language function in HTML and JavaScript would allow me to deploy the website without NodeJS on the backend.
There is an accept-language header that comes from the browser in every request. It contains the user's preferred language. It looks like: Accept-Language: en-US,en;q=0.9
This is great!! What if we want to navigate through a more complex JSON? Is there a way we can set the data-key to something like "sections.buttons.btn-yes" ?
@@SteveGriffith-Prof3ssorSt3v3 I have problems targeting the key this way if let key = "sections.buttons.btn-yes" langdata.languages[lang].strings[key] is undefined How could I do it? Thanks!!
This is the easiest every explanation i have watched in a good number of years. Everything you say seems to be coming from the tip of your fingers. Thanks
Thank you Steve. I like this approach much more than using wordpress with weglot or other plugin solutions. Plugins and frameworks are great and there is nothing wrong with using them, but I want to keep it simple and I'm trying to stick with vanilla HTML, CSS and JavaScript at this point. I got to learn building sites with these basic tools. Always thankful for your valuable content, sir.
i very much enjoyed your deep voice and the simplicity at show here but i can't find a situation where this tactic is useful other than some nav bar changes.
Every tactic will work for certain situations and not others.
Lots of things that I teach are really just about exposing students to a new tool or a new way of thinking about solutions
@@SteveGriffith-Prof3ssorSt3v3 that's amazing and please keep up the good work, i realized that i had to do a lot of js in the end anyway which isn't far from what you depicted here. there is a reason we use CMS and some customers really want us to suffer ;)
Very nice Tutorial Steve! How do i change the language manually with something like a dropdown menu?
Create a dropdown list, set the value of the options to be the language codes. When the user changes the selected option run a function to match that value with your data and reload the strings.
@@SteveGriffith-Prof3ssorSt3v3 Can you explain it in a video?
Or write the code at least in the comment
@@SteveGriffith-Prof3ssorSt3v3 Can you explain it in a video?
Hello from India !
Do we have any better approach to deal with languages in React web application ? Or will the same logic work their as well ?
Same logic works. You would just hook into the didComponentMount event and or store things in state.
I enjoyed this video, thank you
How to Dynamic Pages in Wix Multilingual????
I've never used Wix.
If any1 can help I would really appreciate it:
When he used
if (key) {
}
Doesn’t the variable key return a string? Doesn’t the if conditions only accept boolean values?.. can sm1 please explain this
JavaScript has a concept of Truthy and Falsely - ua-cam.com/video/J4N6ETFpdkA/v-deo.html
within if statements and other logical operators things are automatically converted to true or false. There is a small group of things that will be understood as false. Everything else is true.
ua-cam.com/video/mat1O5JI2fg/v-deo.html
hi Thanks for making this video, I was wondering if it is possible to add a script that detect the browser language and change the html="______" to make it works well. Thanks
how does it apply to whole website with multiple div and so much text? Your solution is perfect for small application. What there can be done to bigger websites except express solution or crowded langdata object?
For large websites with tons of content that is available in multiple languages, I would use the HTTP_ACCEPT_LANGUAGE header that comes from the browser and make decisions on the server-side about what content to send to the browser. That would give you the default value. Then have a form or links on the page that let the user override the header with a querystring or cookie value. Again, the server-side code decides what content to compile and send back. This can be done with NodeJS, PHP, or whatever language you use server-side.
good for small content like Buttons etc, but in my case it's not helping for text like paragraphs that have their own formatting.
This tutorial is more about the concepts and about how to localize the interface. Content that is localized is best handled on the server.
Hello Steve, can we use i18n with HTML and JS instead of react to achieve a similar result?
Everything in React is built with plain JS. If React does it then you can do it in JS without React.
hi! I tried to add Spanish language by changing "de" to "es" and "es-ES" but it doesn't work. My browser language is spanish and in the console appears like this. However, the content displayed is the english one, you know why? thanks!
Did you change both the HTML and the data in the Javascript? If not then it won't find a match in the data to display so it falls back to the default from the HTML element.
@@SteveGriffith-Prof3ssorSt3v3 I tried your code and replaced "fr" for "es". I changed my browser language and check it and it shows english. I checked the console to check it the language browser changed and it did. However the language doesn't work. I don't know why it is happening. Any suggestion?
using documentElement is for support those old browers??
document.documentElement points to the html element.
document.body points to the body element.
@@SteveGriffith-Prof3ssorSt3v3 cool. thank you very much! =）
Thanks for awesome explanation! I never knew how this worked with pure HTML websites. Do you have an example for selecting locales using cookies? Or is there a better way than using cookies to handle user selected languages? I use i18n for my current NodeJS web apps. The only thing I need to provide is the JSON dictionaries and the serverside JavaScript that handles selects the language that should be shown to the user using a locale variable. I'm also using cookies to save default language for each user.
Now, obviously this makes hosting a bit too complex because the website requires a managed host for NodeJS each time I want to deploy a multi-language website.
Having the multi-language function in HTML and JavaScript would allow me to deploy the website without NodeJS on the backend.
There is an accept-language header that comes from the browser in every request. It contains the user's preferred language. It looks like: Accept-Language: en-US,en;q=0.9
This is great!!
What if we want to navigate through a more complex JSON? Is there a way we can set the data-key to something like "sections.buttons.btn-yes" ?
Yes. You can make the structure as complex as you like. Just be consistent in how you do it.
@@SteveGriffith-Prof3ssorSt3v3 I have problems targeting the key this way
if let key = "sections.buttons.btn-yes"
langdata.languages[lang].strings[key] is undefined
How could I do it?
Thanks!!
thank you! it. works
good and interesting video
i like your voice
wow thats amazing
mmm voice