I'm currently having a regular HTML website in multiple languages. I've tried something with PHP, but that didn't turned out very well. What I need is a Multi language site without:
- Subdomains (like en.domain.tld)
- Paths (like domain.tld/en)
What I do need:
- Languages that are stored in sessions/cookies
- Languages which can be used around the whole site (with one place to store the language files, if that's necessary)
- Preferably without visible indications in the URL (like ?lang=en).
A bit like how Google does it, because I also have multiple TLDs, so the user shouldn't be required to change their language by visiting another domain like .de, if they set their language to English from the .com site.
What is the best solution for this? I'm also very new to making websites, so that's why I'm asking.
What i prefer to do is
Create a localization directory at the top level of your app
index.html
app.js
localization/
Inside localization directory create two files
web-en.json
{
"title":"Hello world",
"desc":"languages are fun"
}
web-es.json
{
"title":"Hola Mundo",
"desc":"idiomas son divertidos"
}
Install this library "jquery-localize": "https://github.com/coderifous/jquery-localize.git"
bower install jquery-localize
Include the library
Add the attributes to your HTML tags
Hello World will go here
Translated desc will replace this text
Call the library onReady
$(function(){
$("[data-localize]").localize("localization/web");
};
Yes it's possible to translate a website and save its selected language across the whole website without changing the URL.
You can use Cloud Translation, it's a free and open-source project from Angry Monkey Cloud: https://github.com/angrymonkeycloud/CloudTranslation.
You should add a reference to jQuery first, then to the CloudTranslation JavaScript file:
<script crossorigin="anonymous" src="https://cdn.amcapi.com/translation/cloudtranslation-1.0.0.min.js"></script>
And add the configuration within the HTML head as follows:
<script type="application/json" id="CloudTranslationConfig">
{
"Settings": {
"DefaultLanguage": "en",
"UrlLanguageLocation": "", // Keep empty
"TranslatorProvider": "Azure", // Could be empty if you want to provide the translations manually
"TranslatorProviderKey": "{Your Microsoft Azure Translator Key}",
"UrlLanguageLocation": "Subdirectory"
},
"Languages": [
{
"Code": "en",
"DisplayName": "English"
},
{
"Code": "de",
"DisplayName": "Deutsch"
}
]
}
</script>
and add your own custom select (dropdown) having the class "CloudTranslationSelect" to display the list of predefined languages.
More information found on https://www.angrymonkeycloud.com/translation
Related
Redoc is a great tool, but I'm struggling to understand how it works. Currently I've been tasked with copying some docs from api-docs.io to be self served using redoc.
However, my issue is that the schemas aren't appearing in the side bar as they do on the api-docs site. I'm not sure how I can get models to show on the side as well... And I'm fairly new to api documentation. You can also check out how the models are displayed here. And see another example below.
I've taken a look to see if this is a feature of redoc and came across this merged PR which (based on the discussion in the PR's issue) states that we should add an html element, SchemaDefinition. I am using the basic html file (suggested in the readme of the redoc repo), but we want to use a json schema (which is referenced with spec-url) to render the docs on redoc so I'm struggling to understand how I can manipulate the side bar using just the html element.
Maybe it's just my understanding of how redoc works that is lacking. If you feel that's the case, a quick explanation would be wonderful.
You have to modify the json with additional information.
Sample json (without sidebar model section): https://petstore3.swagger.io/api/v3/openapi.json
Add to "tags" array
{
"name": "pet_model",
"description": <SchemaDefinition schemaRef="#/components/schemas/Pet" />,
"x-displayName": "Pet"
},
{
"name": "user_model",
"description": <SchemaDefinition schemaRef="#/components/schemas/User" />,
"x-displayName": "User"
}
Then to group the sidebar add the x-tagGroups extension
...
"tags": [...],
"x-tagGroups": [{
"name": "Api",
"tags": ["pet", "store", "user"]
},
{
"name": "Models",
"tags": ["pet_model", "user_model"]
}],
"paths": ...
I would like to add some project specific snippets.
How can I add snippets in the .vscode folder?
Project Level Snippets were added in the September 2018 Release of VSCode (version 1.28):
Snippets can now be scoped to a project and shared with your team. Use the Preferences: Configure User Snippets command or create *.code-snippets file in the .vscode folder.
Project snippets work just like other snippets, they show up in IntelliSense and in the Insert Snippet action where they now have their own category.
Snippets also now support multiple prefixes. If you cannot decide if your copyright header snippet should be prefixed as header, stub, or copyright, you can have them all. Use a string array as the prefix property.
{
"prefix": ["header", "stub", "copyright"],
"body": "Copyright. Foo Corp 2028",
"description": "Adds copyright...",
"scope": "javascript,typescript"
}
Per this solution on vscode issues in github, you just need to:
Create a file with .code-snippets extension (e.g. typescript.code-snippets), and
Add the content you have in mind to that file. e.g. a simple fog snippet for console.log:
{
"Print to console": {
"prefix": "fog",
"body": [
"console.log('$1');",
"$2"
],
"description": "Log output to console"
}
}
Put that file in the .vscode folder of the workspace (but not inside subfolders of that).
It works like a charm on VS Code 1.36.1.
Go to File -> Prefrences -> User snippets.
Choose New Snippets for ${project name}.
Give the snippet file a name of your choice.
Read the comment in the file just created, and copy the example to create the first snippet.
As far as I know this is simply not possible directly in VS Code. After having read the VS Code documentation: https://code.visualstudio.com/docs/editor/userdefinedsnippets <-- I find no mention of this being possible.
Have a nice day.
(Please bare in mind that I am new to Umbraco and JSON!)
In Umbraco, I'm looking to use JSON (alongside HTML and CSS) to turn grid cells into buttons. So far I've accomplished this using the below code (generated from an amalgamation of different tutorials/guides), but this is generating urls which end with the numerical data-id of the page. E.g. www.mywebsite.com/0000/. This works as a link and goes to the correct place, but I'd much rather it generated a URL with the correct name? I.e. something more like www.mywebsite.com/page-name/.
How can this be done?
{
"label": "destination",
"description": "Choose destination",
"view": "treepicker",
"key": "class=\"button\"><a class=\"buttonLink\" href",
"applyTo": "cell"
}
]
If you are using Umbraco, then you can easily get the URL or URlName of the page you are on.
IPublishedContent has all these properties and you can inherit this interface to your class to access these.
Thanks
I am looking to add to a web form the ability for users to enter mutiple strings. It should work like the tags input to new questions on stackoverflow.
Is there a smaple on teh web of such a UI control for asp.net?
Or is there another solution for accepting multiple tags (of text/ strings) in a nice neet ui control?
(I didnt find anything usefull in the HTML5 set of controls.)
NOTE: for use with a asp.net web form (post backs) application
I think TextExt plugin is best for you. very handly and useful.
TextExt Plugin for jQuery
TextExt is a plugin for jQuery which is designed to provide
functionality such as tag input and autocomplete.
The core design principle behind TextExt is modularity and
extensibility. Each piece of functionality is separated from the main
core and can act individually or together with other plugins.
Features:
Tags
Autocomplete
AJAX loading
Placeholder text
Arrow
… and much more!
How To Use:
The steps to using TextExt are as follows:
Specify which plugins you need via the plugins option
Configure each plugin individually if necessary
Enjoy!
<script type="text/javascript">
$('#textarea').textext({
plugins : 'tags prompt focus autocomplete ajax arrow',
tagsItems : [ 'Basic', 'JavaScript', 'PHP', 'Scala' ],
prompt : 'Add one...',
ajax : {
url : '/manual/examples/data.json',
dataType : 'json',
cacheResults : true
}
});
</script>
The integration guidlines for the Spotify Apps API mentions DefaultTabs and how it should be expressed in the manifest.json file to achieve tabbing in your Spotify app. Unfortunately I have problem getting this to work and the app that it refers to (Tabs, with the URI spotify:app:tabs) for example doesn't exist in my preview build of the Spotify application.
The application can specify what tabs it wants in the manifest file, in the DefaultTabs attribute. The attribute must be a list of records. Each record must contain the attributes arguments and title. The title can, and should, be localized by making it into a record with attributes for each language (currently en, fr and es).
I have tried the following:
Adding this snippet to my manifest.json file:
"DefaultTabs": [{
arguments: [],
title: {"en": "På TV4"}
}
]
Quitting the Spotify application and reloading it.
Load my app by entering it's address spotify:app:name in the address field.
Here I expected to see the tabs loaded, but it wasn't. Any help with the correct syntax would be appreciated.
I had a few issues at first too, but the following snippet works for me:
"DefaultTabs": [
{
"arguments": "test",
"title": { "en": "test" }
},
{
"arguments": "test2",
"title": { "en": "test2" }
}
]
I think you are probably missing the arguments.
Also check out the Kitchensink demo app and sourcecode in GitHub: https://github.com/ptrwtts/kitchensink