We Keep Coding

Creating Templates with HTML CSS and JS

I have to use static hosting to create a website, how can avoid duplicating code without processors like blade or php.
I'm trying to use Firebase but I can't think of anyway to do this, I would normally use blade.
The only way I can thing of is using Dreamweaver templates but I really don't want to regress to that.

The way to go on this is to use a STATIC SITE GENERATOR, that will allow you to use partials(includes in PHP) there are a lot to choose from but a good recommendation is to use middleman here is the link to MiddleMan partials docs. good luck.

I use Yeoman with Yeogurt which uses Jade by default for templating but can use Nunchucks. You can use LESS or SASS/SCSS. Really good if you want to create a nice tidy static site. It takes JSON fixtures too so you can even create data for the site and compile it all down into static html, minified css and js, and compressed images.

Vuejs as an HTML templating engine

I'm looking for a front-end HTML templating engine and I was wondering if Vuejs has this functionally built into it. If not, can someone recommend me a templating engine?
All I want to do is create HTML pages which derived from a master page.
Thanks

I've used Mustache and have found it great - easy to use and fast. Check it out here: https://github.com/janl/mustache.js/

Using js scripts in handlebars? [duplicate]

I'm totally new to js template engines. Handlebars seems to be the popular choice. I don't dislike the syntax for doing conditions, loops and so on, but since I'm perfectly capable of and feel more comfortable using plain old js and I'm not planning to let anyone who doesn't know js touch my templates, I'm asking if Handlebars supports this.
Of course the most popular choice isn't always the best. I'm more of a Mootools guy and jQuery drives me crazy(great library, just not for me). So if Handlebars was jQuery of template engines, what would be Mootools?

One of the central ideas behind handlebars and mustache is they are LOGICLESS by design and intention. They can not now, nor will they ever allow or recommend you embed raw JS in your templates. Some say this is a better design. If you want embedded javascript, almost every other traditional templating engine, such as _.template or jade or EJS is based on (or at least supports) the idea of embedded JS code snippets.

Sorry to resurrect a old issue here. If you have to use handlebars or it's not feasible to change your templating library you can use Helpers from the Handlebars library.
https://handlebarsjs.com/guide/expressions.html#helpers

Registering a helper in handlebar can be a walk around to what you are trying to do. See this link for a complete example: Registering handlebars helpers with node does absolutely nothing

Using a Helper in a Vendor - CakePHP

In my CakePHP app, I am defining a Wizard vendor that outputs the HTML for a multistep Wizard type plugin, along with its relevant Javascript code. I'm wanting to use the JsHelper so that I can buffer my code to the bottom of the page.
Everything else is working, including my Javascript code if I just output it directly with the HTML. I just can't quite figure out how to use the JsHelper. Do I use a App:Uses or App:Import statement? When using it in a View, I can just define it on the controller level, but that doesn't work here.
$this->Js->buffer("
$('.mws-wizard').wizard({
buttonContainerClass: 'mws-button-row',
orientation: '$orientation',
forwardOnly: $forwardOnly
});
");

If you are developing this 'vendor' package yourself, you should not develop it as a 'vendor', but as a plugin.
The vendor folders are meant for including third-party libraries that are not developed with CakePHP in mind (for example to use parts of the Zend Framework in your application).
From the manual:
Note: Loading vendors usually means you are loading packages that do not follow conventions. For most vendor packages using App::import() is recommended.
Create a plugin not a vendor
To develop re-usable code that can be used with different projects/applications, develop your code as a Plugin. Plugins are basically 'mini CakePHP applications'. Classes from a plugin can be used inside your application and vice-versa; a plugin can use CakePHP helpers the same way as you use them in your application.
See Creating Your Own Plugins
Regarding the JsHelper
Contrary to the comment placed by Sam Delaney, your usage of the JsHelper looks fine to me. Adding some script to the Js buffer to output it in the layout seems useful. Just don't try to use it for extended blocks of JavaScript; that should be put in external .js files.
I do recommend to write the JavaScript code yourself and not have the JsHelper generate the code for you (e.g. Don't use $this->Js->get('#foo')->event('click', $eventCode);). This may be personal, but IMO this makes it harder to track/debug your JavaScript and isn't any more readable than just $('#foo').click('event code');

I've personally never found any use for the JavaScript helper in CakePHP as if you're not careful, you end with getting <script> tags littering your markup, which sometimes makes it quite difficult to debug. From what you describe, you have the JavaScript aggregated and appended at the bottom of your HTML so it isn't as bad as the situation I highlight previously.
Is it not possible to relocate all your JavaScript to .js files to encapsulate all the function for your wizard plugin/vendor? If you could do this, it would be in keeping with MVC principles where you could logically separate the view markup and presentation logic.

Managing dependencies of web components; JS, CSS/SASS and template files

I'm looking to layout the structure of our new web components and am currently not sure I've found a tool that'll do all of what we ideally want, or comes very close, but it seems like it'd be a fairly common thing to want to do nowadays.
We have a web application that is running Java server-side, while client side we use JavaScript heavily and SASS, amongst other things. We are looking to re-sturcture some of our codebase and component-ize certain aspects of our dynamic page content.
For example, we would like to have a standard table component that can be developed completely independently of the full web app. I see the table component having the following 3 core files:
table.js
table.scss (our SASS file that compiles into a CSS file)
table.tmpl (our template file that is ultimately compiled into a JS function, e.g. using something Handlebars as a templating engine)
And then to help development:
table-test.html (A test page with some dummy data)
table-qunit.js (Qunit tests)
All of these files would then hopefully be compiled into the following:
components.js - table.js and table.tmpl compiled and minified, and then pulled into some larger JS file with all other components
components.css - table.scss compiled and compressed, and merged with all other component CSS
Tools I've looked at:
requireJS - seems to be very much targeted at JS dependency management with some thought for resource files but can't find anything about its use and CSS pre-processors like SASS. I do like the idea of AMD JS dependency management a lot however.
Grunt - A node package that does some of what we want
Sprockets - Ruby implementation of something similar to what we want
Javascript Maven plugin - Closest in terms of languages / libraries (we already use Java and Maven) but again, seems to only consider JavaScript dependency management and not CSS, or at least SASS resource files.
Does anyone have any better suggestions than the ones above? Anything that comes a little closer to what we are looking for? Ideally something that doesn't require Node.js or Ruby would be preferable...

This really sounds like a perfect fit for Component by TJ Holowaychuk.

I think I have found my answer, all thanks to this ST post: Maven Javascript Compressor
The answer to my troubles seems to be wro4j.
It has the following benefits for me (see features page for everything):
Maven-ized
Java-based
Spring configurable
Supports SASS files, and Dust templating (which we now have chosen, which I thought was a relatively unknown templating engine)
Options to use at build time, or runtime!
And more...

How is wro4j working out for you? Also check out cartero!