Is it possible to use Google Closure Templates with Clojurescript?
I have looked around but haven't found any information regarding this.
As the Soy Templates are compiled down to JavaScript functions, you should be able to use it without any problem. Look here for a general explanation of how to use external JavaScript libraries in ClojureScript:
http://lukevanderhart.com/2011/09/30/using-javascript-and-clojurescript.html
You should also compile your templates with this flag: --shouldProvideRequireSoyNamespaces, look here for more information.
As another option you could use a templating library written for ClojureScript. There are at least two great libraries: Dommy and Enfocus.
The Google Closure templates should work in ClojureScript without much hassle. Try referencing the goog.whatever namespace at the top of your ClojureScript file like normal. If you're not using advanced mode compilation, then reference your cljs file's namespace with a goog.require in the HTML page. Otherwise, you don't need goog.require when compiling in advanced mode.
So if you have a project named foo, a ClojureScript file named bar, and you want to use goog.dom without advanced mode, you could try something like this:
cljs file
(ns foo.bar
(:require [goog.dom :as dom]))
in the index.html
<script type="text/javascript" src="js/compiled.js"></script>
<script type="text/javascript">
goog.require('foo.bar');
</script>
The twitterbuzz sample gives a good example of this.
Related
I am looking for a way to call client side JavaScript code from within Elixir .leex files without needing to install Node.js
My goal is to convert html to an image bitstring with something like this library: http://html2canvas.hertzen.com/
I have also looked at https://github.com/revelrylabs/elixir-nodejs as an example.
In a .*eex file you can inject javascript into your elements as a string and it should work. For simple js I do this in my own heex sigils in .ex files. For example,
<button onclick="(() => document.documentElement.scrollTop = 0)()">
Scroll to top
</button>
If your html2canvas function is defined in the javascript bundle delivered to the client, then triggering the function you wrote as a string in your .*eex file should work.
In my opinion this shouldn't really be done for non-trivial js. If you are using Phoenix LiveView, look into hooks. You would write your custom js and trigger it off of a hook, or use a hook to push an event that you would handle server-side in Elixir.
I have included this code in my script. Can someone tell me step by step how to install Modernizer in a page, in English layman point of view?
if(Modernizer.geolocation){
alert("geolocation is supported");
}
"Modernizr is not defined" happens when you try to reference it somewhere in a code but have not included it previously.
You may have your
if(Modernizer.geolocation)
call before Modernizr is included, or you have not included it at all. There is also a case when Modernizr is included but within asynchronous script (in that case, there might be something like <script src="modernizr.js" async></script>).
How to include Modernizr - the easiest way?
First choose your detects - a set of features your custom built version of Modernizr will test:
https://modernizr.com/download
Than save it as modernizer.js somewhere in your source tree, for example 'js/modernizr.rs'. Include it in a script tag before first Modernizr call. Like:
<script src="js/modernizr.rs"></script>
<script>
if(Modernizer.geolocation){
alert("geolocation is supported");
}
</script>
I've got a little project in Angular. I'm trying to keep everything in the Single Responsibility way and
I'm quite happy with me app structure. The only think I feel is not looking very good is index.html. All js files are included on
the bottom of the file and I do not like the look of it. I'm adding more files (controllers, services, etc) as I go and the list
could grow quite long.
So my question is: Is it normal,that the index file includes all these or is there way to move all these in a single file and reference that in the index.html?
<html>
<head>
...
</head>
<body>
...
...
<script src="assets/js/angular.js"></script>
<script src="assets/js/angular-route.js"></script>
<script src="assets/js/angular-touch.js"></script>
<script src="assets/js/angular-sanitize.js"></script>
<script src="assets/js/angular-animate.min.js"></script>
<script src="assets/js/jquery-2.1.3.min.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="app/app.js"></script>
<script src="app/app.routes.js"></script>
<script src="controllers/controllerOne.js"></script>
<script src="controllers/controllerTwo.js"></script>
<script src="controllers/controllerThree.js"></script>
<script src="directives/directiveOne.js"></script>
<script src="directives/directiveTwo.js"></script>
<script src="services/serviceOne.js"></script>
<script src="services/serviceTwo.js"></script>
<script src="services/serviceThree.js"></script>
</body>
</html>
Update 07/04/2015
I have end up using Gulp. For anyone looking for bit of help on this, I have followed this small tutorial: https://medium.com/#dickeyxxx/best-practices-for-building-angular-js-apps-266c1a4a6917
There are few possible solutions that I know that will automatically inject your script tags for index.html:
Using Gulp - Task / Build runner.
You can use Gulp-Inject which is:
a stylesheet, javascript and webcomponent reference injection plugin
for gulp
Grunt - JavaScript Task Runner
You can use Grunt-Injector for:
Inject references to files into other files (think scripts and stylesheets into an html file)
Another option which I didn't use is RequireJS.
See - http://www.startersquad.com/blog/angularjs-requirejs/
You can find many discussions on Gulp vs Grunt, Both will make your life easier and solve your problem.
See:
Grunt vs Gulp
Another Grunt vs Gulp
What i would suggest is using a task runner of some sort to concatenate all your files, and build them in to something like a single 'app.js' file.
My personal preference is gulp, but another popular alternative is grunt. Here is a nice introduction to using gulp with angular which I suggest checking out.
Using require.js , u can manage all tags in one line
This approach is utterly normal for a development stage as it facilitates debugging. You shouldn't be worried about the way it looks.
However, when releasing your application to production you should concatenate all scripts into one single file as this'll significantly boost your bootstrap time. There are different ways of achieving this goal and usually they involve usage of front-side build tools like Grunt or Gulp. It's is up to you to decide which tool will work best for you.
Moreover, require.js has built-in modularity with a easy-to-use tool for concatenation, though, it's argued that Angular benefits from using it as Angular has it's own modularity. The main advantage of require.js is that there's no need to pay attention to order in which your files are concatenated since it's responsibility of the tool. Unfortunately, it costs a lot of boilerplate code.
As a simple solution, in HTML5 you can do this
<link rel="import" href="header.html">
and place all your
<script src="libs/....js"></script>
<script src="libs/....js"></script>
<script src="libs/....js"></script>
in the header.html
It's ok. Separating different scripts into different files is a part of basic recommandations for code styling.
The best way is to use Google Style recommendations in work. These 2 are for html&css and javascript:
https://google-styleguide.googlecode.com/svn/trunk/htmlcssguide.xml
https://google-styleguide.googlecode.com/svn/trunk/javascriptguide.xml
Can I use JSRender and JSViews libraries(http://www.jsviews.com/) in building Chrome Packaged App? Does it violate the CSP policy?
This library syntax uses "script" tag to identify template definition in the HTML file...following is an example of it
<script id="theTmpl" type="text/x-jsrender"> <div> <em>Name:</em>
{{:name}} {{if showNickname && nickname}}
(Goes by <em>{{:nickname}}</em>) {{/if}} </div> </script>
I don't believe JsRender and JsViews are currently CSP compliant, because template compilation uses new Function(). However pre-compilation should be very easy. See jsrender/issues/30 and jsrender/issues/164 . A precompile tool is planned for V1 or V1.1.
In fact you can already do your own precompiling simply by writing:
var myTemplate = $.templates("myTemplateMarkupString");
As to the script tag, no, you don't have to use that approach to declaring templates. As shown above, you can compile from strings or precompile. See http://www.jsviews.com/#compiletmpl for more details and examples.
I am looking for a way to code html templates without using any "backend" languages like php or ruby/rails.
using JS could work but i have issues with my current javascript when i add nodes after the DOM is loaded.
the solution that would be ideal is if there is a preprocessor of some kind that i can compile into finished html.. something similar to SCSS but for html
just so i'm clear and i have enough content for stackoverflow..
i want partial.folders content to compile into index.html
partial.folder
menu.html
root.html
footer.html
|
|
V
index.html
Depends on "when" you want to parse the templates.
1) At runtime: you could try to use https://github.com/janl/mustache.js - javascript Logic-less templates
2) At build time: I would suggest using nodejs+Grunt (http://gruntjs.com/) + grunt-preprocess (grunt plugin)
I found an answer to my own question. a program called codekit worked exactly how i wanted it to. thanks for the help! http://incident57.com/codekit/