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.
Related
Title says it all basically:
Is the file size normal? Does it include all component stylings even if removed by treeshaking?
Treeshaking enabled.
Any advice is very much appreciated!
Looking at this github issue, it looks perfectly normal to them.
I guess that not everything is tree-shakable, especially with CSS. It looks like you can disable some properties with something like this: https://github.com/vuetifyjs/vuetify/issues/12512#issuecomment-716729391
But yeah, mainly don't expect much from Vuetify if you want to have a smaller bundle size IMO.
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?
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.
I'm using the twitter-bootstrap-rails gem for styles in my app.
At the moment, I'm writing all my style ruls inside bootstrap_and_overrides.css.less, and this turns messy and redundant as the application grows.
I'd like to split the less code to smaller files that will be required on a per page basis, but still be able to use the bootstrap colors and mixins. I found that after I split it into another file, I couldn't use these components anymore. I guess I'm probably not including it correctly or in the proper order - thoughts? thanks.
look at https://github.com/twitter/bootstrap/blob/master/less/bootstrap.less
you should be able to use #import "override-forms.less" in your bootstrap_and_overrides.css.less for example.
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.