Is there a way to mass convert existing Vue.js templates (single file components) into Pug (Jade)?
Something similar to the erb2slim gem for rails.
I find Pug much more legible and its impractical to rewrite an existing open source project.
Many thanks.
There are a few Jade converters like Html2Jade as you're just converting the html. It even appears to keep vue directives including shorthand :bind and #on.
The downside is that it's a manual converter so you will have to paste in each component separately.
Related
I would like to know tools support for dustjs templating for following.
WYSWYG visualisation. Is there a tool using which I can preview the html template while I edit in dustjs template file.
Automatic creation of templates from wireframes. Is there a tool to create .dust files from .html.
Is dust integrated with any CMS tool? like handlebar in Adobe Experience Manager.
If you know of any good tools for dust js please let me know. I would be using sublime / atom/ eclipse IDEs.
To preview a Dust file automatically as you change it, you'll first want to set up automatic Dust compilation. You can do this using the built-in dustc tool, or via a Grunt plugin like grunt-dustjs.
If you're using dustc, you'd do something like this:
dustc --output=lib/compiled.js --watch templates/**/*.dust
Now, any time a .dust file inside your templates directory changes, the templates will be recompiled and placed into lib/compiled.js. You can load this file on your page and render Dust how you normally do.
Then you can use something like BrowserSync to reload your app in different browsers to get a WYSIWYG preview, or wire it up yourself using a Grunt task like grunt-contrib-watch.
Any HTML file is a valid Dust file. The .dust file extension isn't special! You can even pass files ending in .html to the Dust compiler; it doesn't care. So if you create templates from sliced PSDs or other wireframe tools, they can be compiled as Dust templates. All you have to do is add the appropriate variables.
There are no WYSIWYG editors available that integrate with Dust (but Stack Overflow is not the place to obtain tool recommendations anyways).
I have a large rails application that I am wanting to split out into smaller applications. The one piece of this application that will be universal to all smaller applications is the mast and footer. I would like to extract the html, javascript and css for the mast and footer into it's own package that each app can load and render.
The main issue I'm running into is that the apps will likely not all be written in rails. Some will be rails, some will be expressjs, some written in Go, and some may end up being written in other languages, so my solution needs to be language agnostic.
My thought is that I can extract the html, css and javascript into it's own git repo, use mustache templates for the html, and then use grunt or a similar build tool to build a gem, a package.json structure and a golang module. Possibly each in it's own git submodule.
I'm curious if there is a more standardized way of doing this. Or if anyone knows of a simpler way of achieving this goal.
Sounds like the technology in common is HTML/JS/CSS.
Wouldn't it be better to export the mast and footer as a self contained JS library, or more precisely, as widgets?
So whatever the application server tech stack would be, you could always generate the HTML in the form of:
<script src="your_widgets.js"></script>
<script>new Footer.render('id_of_dom_element_to_render_to');</script>
By doing so, whether you want the widget library to load the template or you want to embed the template into the widget library or whether you want to simply just construct it using HTMLFragment will not be limited by the server tech choice.
I wondered why Polymer elements need a dash in custom elements name like <my-component> while this is not necessary for Angular components especially as Angular components also use ShadowDOM.
** Edit**
It doesn't even seem to be suggested good practice in Angular.
The HTML spec allows you to use unknown tags (<tab>, <panel>) without the HTML parser throwing a fit. To their benefit, Angular uses this behavior for their directives to make the components like native.
Tags that don't have a - inherit from HTMLUnknownElement. There's a good explanation of the upgrade process here: HTML5Rocks - Custom Elements - How elements are upgraded
Since Angular directives were designed in a time before the Custom Elements spec existed, they don't use a -. It's the standard that requires element names contain a -.
The dash is not required by Angular since there is no technical reason to require it. However, all large projects I have worked on prefix all components and directives with a two character and then dash prefix, e.g "ab-tab".
First, using dashes in names makes your syntax compatible with the Custom Elements standard, although Angular doesn't depending the spec.
Second, it helps with organization. Standard Angular directives are all prefixed with 'ng-'. By using your own prefix, people reading your code will be able to quickly distinguish between components from different libraries.
I am relatively new to Rails, having recently completed Hartl's Rails Tutorial, and am now embarking on my first full fledged project. What I am interested in adding to my web app is something similar to the text input feature in SO, where you could type, and see directly how your text will turn out. After some digging around on SO, I have decided on using the gem bluecloth, which is Markdown implemented in Ruby, but now have the following questions:
I am unsure about how to tie what bluecloth outputs to the form_for helper. My understanding was that you could convert to strings via the function html = BlueCloth.new(str).to_html(), but I am unsure what to do when you have a text field as part of form_for, where I should plug in the bluecloth part? In other words, I am still a bit confused about the magic of typing in one box and seeing the item show elsewhere on the page.
Are the WMD bar button items and functions included Markdown editors (such as bluecloth), or would this be something I have to build manually? If so, how would I get something like the bold button to show "** **" in the editor as you type?
Thanks for your help!
As comments have noted, Markdown is a markup language like HTML, so its not easy to do WYSIWYG.
There are probably two approaches to getting this kind of functionality.
Server side
Post your markdown text to a server and get the server to return HTML. I've done this a lot in Python, but for Ruby this SO answer suggests maruku. The disadvantage of this approach is that it requires a server request every time you want to view the preview, and then some way to integrate that back into your UI without disrupting the user. Stackoverflow uses this approach with the WMD editor and some C# on the server.
Client side
Another option is to use a client side library to take your markdown "code" and generate html which you can then integrate into your page using javascript. An example of this is dillinger. This uses a textarea and something like showdown to render the HTML in the browser. I'm taking this approach one step further in a WYSIWYG Markdown editor I'm developing called demarcate.js
Or... ditch Markdown
The comments have already suggested alternative WYSIWYG editors... most of these are not markdown editors but rich text editors which produce HTML at the end. TinyMCE and wysihtml5 are good options and I've also used CKeditor before with some success - it has a cool "in-place" feature in the latest version which inspired my Markdown editor above.
Im bulding a website using MVC4. Recently I've read about TypeScript. It looks really nice however I cannot find any use for it in a MVC website. Am I missing something? Do you use it? Where?
TypeScript is a pre-compiler for JavaScript. Hence you can use TypeScript only as a replacement for JavaScript (server-side, e.g. Node.js, or client-side, i.e. in the browser).
As you are probably writing MVC4 code with C#, TypeScript will be of no use for you in relation to MVC4.
Regarding the client-side it's somewhat different.
I guess the main point you need to know is that TypeScript is not (yet) just another language on the server, that you can exchange with C#.
I find it quite useful for building largish apps with lots of logic on the client. The interfaces help avoid some errors. It compiles to javascript so you could use it instead of javascript. If you're just writing a couple of lines I wouldn't bother though.
You can link to the generated javascript files from TS files directly in the script bundles or HTML. If you want to automatically link to many JS files, use require JS. This will save you having to link to many js files.