What are the main differences between HAML, SASS/Compass and ERB? - haml

I'm looking for a templating engine. What are the important factors to consider when choosing among HAML, SASS/Compass and ERB?

To summarize:
Haml is a markup language
Sass is a set of CSS extensions that compile into standard CSS
Compass is a wrapper for Sass around things like Blueprint
Erb is simply HTML with embedded Ruby code.
Generally, you'll be looking at Haml or Erb (though you can mix and match them if you need to), and CSS or Sass. Compass is simply an add-on to Sass.
I'd recommend starting with Haml and Sass, as Haml takes most of the annoying, bug-prone aspects of HTML and ditches them. Once you get used to writing in Haml, using Erb feels very wordy.
As for CSS, pick a framework (such as Blueprint), and use it as-is to start. You can always add Compass on later if you feel that you need it.

Related

pycharm code completion / syntax highlighting for django in haml files

I just tried to use HAML in my django project, which works fine^^
But while writing beautiful HAML code PyCharm refuse to offer any code completion or syntax highlighting for django template tags like in HTML files.
Do I need to configure PyCharm differently or is it just not possible to get the "Django Support" in HAML files with PyCharm?
Thanks in advance
I've found an older issue related to this one.
"At the moment the HAML support is part of the RubyMine code and can't be
used in other products. We have an issue for making it independent:
http://youtrack.jetbrains.net/issue/RUBY-6432"
Not sure if they managed to extract the HAML support to PyCharm or not. Their tracker is overloaded so I couldn't check it.

Including/importing HAML files using grunt-contrib-haml and Yeoman

I am currently using Yeoman with HAML (utilising grunt-contrib-haml) and would like to include HAML files to make things more DRY.
I am not that familiar with HAML, so after reading online it appears best to use =render, like so:
=render(partial="shared/ga")
however I am receiving the message that HAML lacks a native render() function:
Warning: Exception on line 75: undefined method `render' for #<Object:0x00000003474a98>
Is there a simple way to include HAML files from inside another HAML file, which will work with Yeoman/grunt-contrib-haml? and/or extending an existing HAML template to make things more DRY?
I had the same issue. I found that the simplest approach to this issue is to use js to import the files instead of the haml method. I'm using Angular.js so I can use it's imports and skip HAML's.
In the HAML template you write something like this (for Angular):
%div#publish{ng-include: 'views.someview', ng-controller: 'SomeCtrl'}
Works like a charm.

HAML markdown rendering and showing ERB within

I have this in one of my HAML templates:
:markdown
#{render 'home.md'}
and in home.md I have:
There are **#{#photo_count}** photos.
When viewing the site, it literally outputs that. How can I get the #photo_count variable to be interpolated?
For a pure Markdown file, I don't think you'll be able to do what you want as the format itself won't support your Ruby variable.
If you don't mind changing your markdown file to a HAML partial file (no need to change its content), you could do something like this (I've used something similar to the code below using the RDiscount gem; your mileage may vary with other Markdown gems...):
app/controllers/pages_controller.rb
def home
#photo_count = 10
end
app/views/pages/home.html.haml
:markdown
#{render 'home_page'}
app/views/pages/_home_page.html.haml
There are **#{#photo_count}** photos.
See also this StackOverflow Q&A for other ideas:
How can I automatically render partials using markdown in Rails 3?

Is it possible to re-skin activeadmin to work with JQuery-Mobile?

I've got an app that's using JQueryMobile and it's using the awesome ActiveAdmin extensively as well. While I love the ease and simplicity of the ActiveAdmin interface, I'd really like consistency with the rest of my app.
Is it possible (i.e. using standard ActiveAdmin and not modifying its sources) to re-skin ActiveAdmin to use the JQuery-Mobile look and feel?
Its very possible to reskin ActiveAdmin, though it would be a bit of a job to do, and there would likely be quite a number of things that can't perfectly be built to match a mobile presentation, especially if you don't want to get into overriding markup rendering.
You can always simply start adding styles of your own to the active_admin.css file that is generated for you. If you'd like to start without any of ActiveAdmin's styles at all, you can comment out the two sass imports in that css file:
#import "active_admin/mixins";
#import "active_admin/base";
Or at least just the base file. It may be intriguing to you in itself, or informative about the organization of the markup, to view your current admin pages without the base css, or with css turned off in your browser altogether. From that vantage point, you could begin to think through how the bare markup could be restyled to match a mobile presentation.

How to minify HTML?

Is there some tool (or Rails itself) that can minify HTML (like what Jammit does for CSS and JS files) ?
Secondarily, what is the best practice here, and is it even worth minifying the html?
(this is for a site that will be served to mobile phones, so keeping weight down is important)
Well, you can remove most white space by using the HAML gem and the following lines in your config/application.rb file:
Haml.init_rails(binding)
Haml::Template.options[:format] = :html5
Haml::Template.options[:ugly] = true
More information:
http://haml-lang.com/docs/yardoc/file.HAML_REFERENCE.html#ugly-option
Enabling compression at HTTP level will serve you much more than minifying HTML, however tidy is good to apply transformations to HTML, including removing extraneous spaces , comments, etc...
You can use http://prettydiff.com/?m=minify&html to minify your HTML.
Minifying HTML is extremely complicated and easily misunderstood. True minification involves removing comments and all unnecessary white space from the syntax, which would include an white space in your content, so be sure you are using a tool that knows what it is doing.