I am creating a website with HTML5 and CSS, not using CMS. My next goal was to make the website in many languages so I searched and found many libraries. I am newbie to this and went for the easiest one or the one with more comments, examples...
So I took i18next, but I also tried i18n, i18next.amd... Right now I am stuck because I was following a few tutorials and cant make this work... Everytime I get this error
Uncaught ReferenceError: i18n is not defined
So I created an empty project just to make this work and learn how to do it. This new project is really light. The structure is:
index.html
locales
en
translation.json
es
translation.json
default
translation.json
js
jquery.min.js
i18next.min.js
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<script type="text/javascript" src="js/jquery.min.js" ></script>
<script type="text/javascript" src="js/i18next.min.js" ></script>
<script type="text/javascript">
var options ={
lng: "en" ,
resGetPath: './../locales/__lng__/__ns__.json'
};
i18n.init(options, function(t) {
$(".nav").i18n();
});
</script>
<ul class="nav">
<li>asd</li>
<li>asd</li>
<li>asd</li>
</ul>
</body>
</html>
and all of the JSON files are like this:
{
"app": {
"name": "i18next"
},
"nav": {
"home": "Home",
"page1": "Page One",
"page2": "Page Two"
}
}
I wish someone can help me, and I will really appreciate. (sorry for my english btw)
Tutorials I mentioned:
http://i18next.github.io/i18next/
http://jsbin.com/yaxofuhuzu/1/edit?html,js,output
www.davidhamannmedia.com/en/post-i18next-an-easy-to-use-translation-javascript-library
And many more...
The documentation for this library is a mess, mostly because the author decided to rewrite it from version 1.x to 2.x and the API has changed drastically. The documentation you can now find on http://i18next.com/docs/ refers to version 2.x, while a lot of the blog and stackoverflow articles refer to version 1.x, adding to the confusion. To add insult to injury, I can't find any complete documentation for version 1.x anymore (which by the way, is less than a year old).
Now, to answer your question, the options and API you seem to be using are from version 1.x (for example, resGetPath doesn't exist in version 2.x). Also, in 2.x, i18n has been replaced by i18next.
On the bright side, the author seems to reply fast to questions, so you might as well open an issue on the project github page. Or check this:
https://github.com/i18next/i18next/issues/618
Related
I want to use this library : https://hello-week.vercel.app/
I'm having a hard time to understand how to use it. I know JS and I never used Typescript or Nodejs. I found the .js and .css of this library but it's seems not to work
"calendar.js:1 Uncaught ReferenceError: HelloWeek is not defined"
Can I included like a normal js file ?
Yes the installation guide is not really clear, here is how to get it done:
First of all this line is simply wrong
new Hello Week({
There should not be a space there, do this instead
new HelloWeek({
Also, you will need the language file. Ether host it in its particular directory hierarchy or use the langFolder option to specify where it is.
dist
-- langs
-- -- en.json
Finally, this dose not work when not in a server due to a CORS issue. Serve the files through a server and you will have it working.
You can find the basic usage in the Installation page of the docs. Just ensure to reference hello.week.min.js, hello.week.min.css and hello.week.theme.min.css. Typescript or Node.JS don't seem to be necessary.
Here is a quick HTML + JS example:
<link href="hello.week.min.css" rel="stylesheet" />
<link href="hello.week.theme.min.css" rel="stylesheet" />
<div class="calendar"></div>
<script type="text/javascript" src="hello.week.min.js"></script>
<script>
new HelloWeek({
selector: '.calendar'
});
</script>
I am trying to have a look at reactJS.
Unfortunately all the tutorials I found assume, that I have an IDE. But I don't want to install an IDE just for this purpose and I even can't do that in my working place.
So I am wondering, how I can use React without an IDE. Just by injecting the necessary library-files. I don't care, if it is working slower than otherwise, I just want to get it to work.
JSbin and Co are only secondbest choices, because I want to store the written files for later of course.
Does anyone know a tutorial, that describes, which libraries I have to inject and how I can get the first steps?
I hope, someone can help. Regards
Christian
Btw, my actual attempt looks like this:
<!doctype html>
<html>
<head>
<title>React</title>
<meta charset="utf-8">
<script src="https://unpkg.com/react#15/dist/react.min.js"></script>
<script src="https://unpkg.com/react-dom#15/dist/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.4.4/babel.min.js"></script>
</head>
<body>
<div id="react-container"></div>
<script type="text/jsx">
var meineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
React.render(<meineKomponente />, document.querySelector('#react-container'));
</script>
</body>
</html>
The information for this is gathered from different places and of course, it doesn't work.
There's some browser-based IDEs.
StackBlitz -- https://stackblitz.com/ -- only heard about this recently, so haven't actually used it, but it seems real nice. As a bonus, it has a quick start template for ReactJS projects, which might be exactly what you're looking for.
Cloud9: https://c9.io/ -- Always a solid choice.
There's more, I'm sure.
You don't need any specific IDE to use a library or framework. You can use notepad, or textedit and achieve the same results.
The question is, why would you not use an IDE? Code completion, automatic linting, and a near-infinite number of useful plugins are all at your disposal if you go the IDE route.
As far as tutorials go, Facebook's own React docs have a great tutorial which covers all of the basics: https://facebook.github.io/react/tutorial/tutorial.html
If you're concerned that they're using ES6, you could use JSFiddle to see what's gone wrong:
https://jsfiddle.net/tt6uet4a/1/
var MeineKomponente = React.createClass({
render: function() {
return <h1>Hallo Welt</h1>;
}
});
ReactDOM.render(
<MeineKomponente name="World" />,
document.getElementById('react-container')
);
As far as your code goes, you'll need to use ReactDOM's render function, as well as uppercasing your JSX element name.
To develop React, you do not need an IDE. All you need is a terminal and a text editor.
I assume that you are thinking React as a javascript library like jQuery, that's why you are including React to a script inside head tag like "old-school" javascript.
For a simple start with React, I think you should first have a look at nodejs. Try to install it, then follow create-react-app.
I converting a Polymer app to Polymer 2. I'm changing my components to the ES6 Class syntax (yes I know I could leave them in v1.7 hybrid style but I would like them to be ES6 Classes).
However when I transpile the code back to ES5 (with BabelJS) I run into a known issue regarding ES5 'classes' extending native elements (https://github.com/babel/babel/issues/4480).
I tried babel-plugin-transform-custom-element-classes but that didn't work.
So I tried the webcomponents shim meant to fix this issue: https://github.com/webcomponents/webcomponentsjs#custom-elements-es5-adapterjs
But the shim doesn't work! I don't know what I'm doing wrong :(
<script src="webcomponentsjs/custom-elements-es5-adapter.js"></script>
<script src="webcomponentsjs/webcomponents-lite.js"></script>
...
<y-example></y-example>
...
<script>
/* transpiled to ES5 */
class YExample extends HTMLElement {}
customElements.define('y-example', YExample);
</script>
Here is my jsbin:
http://jsbin.com/feqoniz/edit?html,js,output
Notice I'm including the custom-elements-es5-adapter.js,
also notice the JS panel is using ES6/Babel.
If you remove the custom-elements-es5-adapter.js and change the JS panel to normal Javascript (not ES6/Babel) then everything works fine.
You can include or remove the adapter (leaving ES6/Babel) and the error is basically the same thing, except that when the adapter is included it comes from the adapter code instead: Failed to construct 'HTMLElement': Please use the 'new' operator, this DOM object constructor cannot be called as a function.
I must be doing something silly? Any ideas?
Well, I was doing something silly.. I should have tried upgrading my Babel package.
Upgraded BabelJS from 6.23.1 to latest 6.24.1 and it fixed the problem. :P
I was stucked with the same issue.
The problem was due to my build chain (gulp) transpiling every js files of the project. But the custom-elements-es5-adapter.js file must not be transpiled to work. Transpile everything but this file.
I am having a similar issue and I found a solution that works for me.
Disclaimer: I don't use an app-shell because I have a server-side rendered site with just a few isolated Polymer components on the client-side.
After intense debugging the issue came down to the fact that I was including this block (as suggested on the Polymer guides):
<div id="autogenerated-ce-es5-shim">
<script type="text/javascript">
if (!window.customElements) {
var ceShimContainer = document.querySelector('#autogenerated-ce-es5-shim');
ceShimContainer.parentElement.removeChild(ceShimContainer);
}
</script>
<script type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></script>
</div>
Because when I ran polymer build it would pick up custom-elements-es5-adapter.js from there.
This is what I did instead:
<script type="text/javascript">
if (window.customElements) {
document.write('<scr' + 'ipt type="text/javascript" src="/vendors/webcomponentsjs/custom-elements-es5-adapter.js"></scr' + 'ipt>');
}
</script>
YES it's not as elegant and quite rustic but, hey, it works! Here I'm tricking the compilers inside polymer build and they won't find this file and hence they won't include it in the build.
I hope it helps!
I would like to have a React Bootstrap JavaScript file in my markup, and then use Bootstrap components from Clojurescript. I understand this simple approach (not using a cljs library) should be possible. However I am stuck at the beginning with a problem even loading the static html page.
The body section of the page looks like this:
<body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
<script src="/js/devcards.js" type="text/javascript"></script>
</body>
The react-bootstrap.min.js file is being loaded/executed and returning this error in the browser console:
Navigated to http://localhost:3449/cards.html
Uncaught TypeError: Cannot read property 'createClass' of undefined
PanelGroup.js:7
bootstrap 35d834203e0f472d9612:19
react-bootstrap.min.js:7481
Am I going about this the wrong way?
There is a bootstrap project that uses Om.
https://github.com/racehub/om-bootstrap
Hopefully there will be a better answer than this very direct one. I discovered including all the files recommended here gets me past that particular error.
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.6/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-bootstrap/0.28.2/react-bootstrap.min.js"></script>
But is this really the best way to go about it with ClojureScript? No! React is normally already included (via Reagent or Om) as part of a ClojureScript development stack. Seems like I'm discovering why it is best to stick with libraries for Bootstrap.
I'm working with Dojo and using the "Module Pattern" as described in Mastering Dojo. So far as I can see this pattern is a general, and widely used, JavaScript pattern. My question is: How do we debug our modules?
So far I've not been able to persuade Firebug to show me the source of my module. Firebug seems to show only the dojo eval statement used to execute the factory method. Hence I'm not able to step through my module source. I've tried putting "debugger" statements in my module code, and Firebug seems to halt correctly, but does not show the source.
Contrived example code below. This is just an example of sufficient complexity to make the need for debugging plausible, it's not intended to be useful code.
The page
<!--
Experiments with Debugging
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>console me</title>
<style type="text/css">
#import "../dojoroot/dojo/resources/dojo.css";
#import "../dojoroot/dijit/themes/tundra/tundra.css";
#import "edf.css";
</style>
<script type="text/javascript" src="../dojoroot/dojo/dojo.js">
</script>
<script type="text/javascript" >
dojo.registerModulePath("mytest", "../../mytest");
dojo.require("mytest.example");
dojo.addOnLoad(function(){
mytest.example.greet();
});
</script>
</head>
<body class="tundra">
<div id="bulletin">
<p>Just Testing</p>
</div>
</body>
</html>
<!-- END: snip1 -->
The java script I'd like to debug
dojo.provide("mytest.example");
dojo.require("dijit.layout.ContentPane");
/**
* define module
*/
(function(){
//define the main program functions...
var example= mytest.example;
example.greet= function(args) {
var bulletin = dojo.byId("bulletin");
console.log("bulletin:" + bulletin);
if ( bulletin) {
var content = new dijit.layout.ContentPane({
id: "dummy",
region: "center"
});
content.setContent('Greetings!');
dojo._destroyElement(bulletin);
dojo.place(content.domNode, dojo.body(), "first");
console.log("greeting done");
} else {
console.error("no bulletin board");
}
}
})();
(Answering this myself because it seems like a common problem whose solution is not well known.)
It seems that one can nicely debug eval-ed code in FireBug provided that dojo does a little cooperating. The trick is to configure dojo to enable such debugging using debugAtAllCosts
<script type="text/javascript" src="/dojoroot/dojo/dojo.js"
djConfig="parseOnLoad: true, debugAtAllCosts: true"></script>
This is described on dojo campus under debugging, which also notes that this setting is not recommended in production for performance reasons and suggests an approach using server-side conditionality to control whether such debugging is enabled.
Also, if you are using a version of Firebug less than 1.7a10 also verify that you have the "Decompile for eval() source" on the scripts drop-down disabled (extensions.firebug.decompileEvals in about:config). When enabled I think this causes Firebug to overwrite the source with its own decompiled version and somehow lose the filename along the way as well.
#peller, This could be why your answer wasn't working for us.
It's disabled by default, but I turned it on at some point and didn't realize it.
It's also being removed completely in 1.7a10 as part of Firebug issue http://code.google.com/p/fbug/issues/detail?id=4035. Also related discussion at https://groups.google.com/d/topic/firebug/y2VR17IFHHI/discussion and https://groups.google.com/d/topic/dojo-interest/nWlZdJDlic8/discussion.
Here's a solution I found for the inability to recurse into dojo.require mudules from reading the NGs.
Change
<script src="dojoroot/dojo/dojo.js" type="text/javascript">
to
<script src="dojoroot/dojo/dojo.js.uncompressed.js" type="text/javascript">
This fixes the less than helpful
undefineddojo._scopeArgs = [undefined];
error that one sees otherwise.
The pattern is essentially xhr+eval... really it's the eval that's the problem... Firefox in particular has no way to track code from an eval back to its original source and instead points at the eval call site, plus whatever line offset there is in the eval buffer. Firebug has implemented a clever scheme to workaround this problem, and added an optional hint which loaders like Dojo can use to embed the original file path in a comment. Webkit now supports this scheme also. It's not perfect, but debugger; and other breakpoints ought to bring you into the correct buffer.
I'm not sure why none of this would be working for you. Which version of Firebug are you using?
djna's debugAtAllCosts solution works for me, for the reasons described at http://dojotdg.zaffra.com/tag/dojorequire/.
However, note that using debugAtAllCosts causes dojo.require to become asynchronous because it uses script inserts rather than xhr+eval. This can cause problems with code that expects dojo.require to be synchronous that isn't brought in using require itself (as described at http://kennethfranqueiro.com/2010/08/dojo-required-reading/). In my case it was testing code I had being run by unit test framework. So the following failed saying that EntityInfo was not defined
var e1 = new EntityInfo();
until I changed it to
dojo.addOnLoad(function() {
var e1 = new EntityInfo();
}
#peller, For me FireBug 1.6.1 will take me to the right eval block but not the right file and line numbers (because its an eval string rather than the original file)..
I'll add one more alternative, use Chrome. It's great for debugging evals (seems to catch some things Firebug doesn't). Do be aware of its issue with caching JS files - http://code.google.com/p/chromium/issues/detail?id=8742.
Personally Firebug is still my main environment, but I am now also using Chrome when things get tricky with evals to get a second view at the problem. Chrome helped me twice yesterday with undefined function/variable issues with the dojo loader that Firebug skipped right past).