I am a front-end guy using Windows for design and html/js/css coding. My work is separate from the back-end guy using .NET. I am also new to Haml/Sass thing as well as Ruby. And definitely not using Rails. After few search, I decided to pick Sublime Text 2 for Sass/Haml support and get rid of my old Notepad++. My first question is:
1. What is the best practice / efficiency to automatically convert whole folder of Haml (primary) and/or Sass to static documents (html/css)?
I have a separate solution for Sass by setting the "watch". I was searching for Haml automatic conversion solution and found few options:
Library for making static websites with HAML/SASS/CSS framework
2. Should I use StaticMatic?
Google search said it is the best. But there seems no update for 2 years
https://github.com/staticmatic/staticmatic
There is also this site (Is it the same?): http://staticmatic.rubyforge.org/how_to_use.html
If I use StaticMatic, I can setup a build system in Sublime Text to run from the Build Menu (http://docs.sublimetext.info/en/latest/file_processing/build_systems.html)
3. OR should I go with all-in-one solution like this (may cost few bucks)? Is there free one?
http://fireapp.handlino.com/
I don't mind to have Sass -watch running separately and another polling mechanism for Haml. I just want to make sure I have the "latest" out there.
Hope to get some advise for my unique situation. Thanks.
The answer is Middleman
http://middlemanapp.com/
It's the replacement for out-dated StaticMatic
HAML:
For automatic conversion from haml to sass you can use this gist: https://gist.github.com/3898955. If you want to automate even more the workflow process, you can use https://github.com/alexnj/SublimeOnSaveBuild sublime package to run the command on file save.
SASS:
For SASS here is the needed setup. https://gist.github.com/3899112.
For automatic conversion on save, the same rules are applied here too, but it's important to include the .sass and .haml extension in SublimeOnSaveBuild.sublime-settings file.
So your file should look like this:
{
"filename_filter": "\\.(css|js|sass|less|scss|jade|haml)$",
"build_on_save": 1
}
You can extend this list at your own wish.
Related
I'm just getting into preprocessors, and I'm beginning with haml. I've got the basics down, and have yet to put this to any practical use. I'm not great with the command line, but at the very least, I've managed to convert my index.haml file to a readable html file.
My question is twofold.
1) Do I need to individually convert EACH file within my site directory i.e index.haml | service.haml | contact.haml etc or am I able to bulk convert the entire directory?
2) My second question relates to CMS's such as Wordpress. Am I able to use preprocessors with platforms such as this? If so, how would that work?
Apologies if these questions sound basic and/or stupid, but gotta start somewhere!
Thanks, Scott
1) NO, you don't need to convert each file to HAML. your server serves back HTML back to the client. If it's just plain HTML, it just serves without pre-processing through HAML engine. If it's haml, it pre-processes to generate HTML which will be finally served to the client.
2) CMS's such as WordPress support plain HTML by default, maybe some plugins might allow you to use HAML. you can always use conversion tools like htmltohaml to convert HAML templates to HTML if you want skip plugins.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 2 years ago.
Improve this question
I'm building my own blog and I would have lots of articles, so, copying and pasting the head every time, or an aside, the footer or some repeated parts of the blog would be stupid.
So, I'm looking a way to do it in an easy way. I heared about templating (but don't know what it is) and found this answer: Is it possible to create a web site header without copying and pasting it on every page? but it seems that is not what I'm looking for.
I heared about HAML and Markdown (HTML Preprocessors) and don't know if they are used to do what I need.
The solution I want to find is something like #import in Sass.
I have an #import "head.scss"; and in the compiled file I hadn't repeated manualy the (in this case an "imported module" head.scss)
I might say I'm learning to develop my static blog with Jekyll, just because I want to learn to use this technology, and second I know how to use WordPress, Joomla and learning a new thing would be interesting for me but I don't want to learn PHP so I think a templating language will be easier for this project
If you want to use Jekyll, you can use includes to avoid repeating code.
If You are looking easier ways for managing posts and front matter You should look into Jekyll Bash UI or Octopress.
If You want to learn more about Jekyll and its templating system, I'd recommend You to read the Jeyll.tips web page. It contains well formatted and easy to read how-tos, and also covers advanced topics like data files and collections.
Jekyll Bash UI (requires Bash)
Creating a new post is quite easy process, just this on the command line:
jcli.sh new
Octopress
Octopress uses rake utility which makes using Jekyll easier.
For creating a post You just have to call this:
rake new_post["My new post with Octopress"].
After this You can call rake generate to generate the page or rake preview to run the webserver at localhost on port 4000, so You can preview the changes.
The answer is yes it's possible.
In order for a scss file to work you have to make sure the .scss file (or sass file) is converted to css first. (you can look up the many sass tutorials online. for that, just look for converting sass or scss files into css there are even little simple applications for that like scout) By the way, with less you can do the same thing for css files as with sass in terms of importing.
For html files there are templating engines like you said. You can compare popular ones like moustache, dust.js and handlebars just to name a few.
With these you can import snippets of html code inside your file (so you do not have to repeat code).
In programming languages like JavaScript and php you can also do the same thing.
in PHP you can use for example the include() or require() function to import other bits of code from other files into your current file. And in languages like JavaScript you can even use something like angular for example to create simple custom directives to achieve the same goal.
Pretty much every server side language I've worked with has shared views in some manner or another.
asp.net webforms has master pages, asp.net mvc has shared views, coldfusion has cfinclude, RoR has partials, PHP has shared layout. I don't know about straight up HTML, but when utilizing a server side language this is definitely possible.
I would suggest using a content management system, like WordPress (https://wordpress.com/) , Joomla (http://www.joomla.org/), or Drupal (https://www.drupal.org/). You create a template one time and load it into the CMS. You can then create as many pages as you need without having copy and paste the template. You can also add in different elements as needed. This makes managing a blog much easier.
If you dead set on doing it one page at a time, I would suggest using PHP to pull in the header. Here is a good article to get you started, Creating a PHP header/footer . However, you'll still need to copy and paste a template file to create a new page.
I just came across Twitter Bootstrap today, on SO. I have skimmed through some online tutorials and if my understanding so far is correct, using the TB essentially consists of:
Downloading TB, extracting CSS files etc
Referencing the required CSS, JS files in your HTML doc and using the defined CSS patterns
I want to use Twitter Bootstrap with Symfony2. Given my understanding of how to use TB I thought it would be relatively easy to use it with Symfony, so I was quite suprised to see that there are (actually several) Bundles to use with Symfony.
So my questions are:
Why is a Bundle needed to use Twitter Bootstrap with Symfony2? - will the method I explained above not work (i.e. adding the references directly in a twig template)?
Since there are several Twitter Bootstrap Bundles available (at last count there are 3), which is the easiest to use (it has to be one that is actively supported with recent commits, and not a dead project)
I'm pretty sure these Bundles are great, but they have advantages and drawbacks. You could also use TB without a Bundle directly in your project. That's what I personally do, that way:
git clone TB in web/ (to get latest updates and keep updated)
I directly call bootstrap.less in my twig templates with Assetic and the less filter. That way, I can create my own .less files that #imports TB and use their astonishing mixins for example.
It's really powerful this way. Coupled with yui-compressor, when I use Assetic in no-debug mode, all my js and less files are compiled into one single .css output and one single .js output. And you could benefit from all TB functionalities, in .less, not .css
There are 2 major bundles that provides symfony integration with Twitter Bootstrap:
MopaBootstrapBundle
BcBootstrapBundle
In my opinion:
MopaBootstrapBundle is more complex, provides its own layout structure (of cause you can create your own too) and lot of defined functionality, extra assetic, forms and other integration
BcBootstrapBundle is more simple and much more clear you use your own layout structure and there is a lot of defined functionality, extra assetic, forms and other integration too
dont use any intergtaion bundle also is an option, but you loose integration with forms, assetic, less and so (as #Acyra mentioned in his comment)
I prefer to use BcBootstrapBundle with its extra integration functionality and use my own custom layout structure.
You can use Twitter Boostrap (TB) to only add css to your project. And then, you have a starting point to do something more visual than started from scratch. As you described in the first part.
But, you can also retrieve more interesting stuff from a Bundle which handle template integration with TB. For example:
having a default layout that set some basic column
integration for crud generation
having a basic form element
For example, with symfony 1.4 (I know this post talks about sf2), you have a plugin that can add a new theme to the admin generator to have a nice TB integration instead of the default. I know there is no official admin generator in sf2 but it can be used for CRUD.
One other thing that can be true since symfony 1.0, not all bundles are very well implemented, developped, maintained, tested, documented, etc .. (except thoses from the core team (FOS* Bundle, Doctrine, Propel, etc ..)). So I recommend you to test them all, see if one of them fit your need, otherwise take inspiration to improve them (they are almost all on github) or build your own.
And btw, there are many Bundle ..
UPDATE to Symfony and Bootstrap: Symfony always seems a little behind in the details of their documentation so here's an update on Symfony. Version 2.6 and greater now includes basic integration with Twitter Bootstrap.
http://symfony.com/blog/new-in-symfony-2-6-bootstrap-form-theme
Hopefully this saves someone time and can get it to work as they explain in the Symfony documentation above!
I've been tasked at work to create a 'website' on a CD for a client. I've made a start where basically everything is hardcoded pure html, and god how easily you forget how amazing templates are, so much freakin' boilerplate. So I would prefer to somehow create a set of linked html pages using a template system.
Is there some method of easily producing a set of linked html files (suitable for CD, i.e. no webserver) using something like Django? The project is doable by hand, but there's a lot of overhead.
Would love to hear alternative ideas as well, not set on Django, just what I'm kind of familiar with.
Note: Can't include any software, can't use anything from the internet. Flat html, on the cd.
You might be interested in a static-site generator like Hyde (Python) or Jekyll (Ruby). Essentially lets you create pages in Markdown/Textile/whatever with templates, and then generate static HTML files with a simple shell command. You can deploy it however you want, since it's just files.
I've used Jekyll myself because I heard about it first (despite being a Python guy primarily), but Hyde seems a bit more competent (CSS processors, for example). Jekyll is more widely used, I think.
(Using Django would mean that you'd have to run a Django installation on some server just to create the content and then generate "linked html files"...)
Here is another approach: http://lethain.com/intricate-static-websites-with-django-templates/
I want to give credit to all open source libraries we use in our (commercial) application. I thought of showing a HTML page in our about dialog. Our build process uses ant and the third party libs are committed in svn.
What do you think is the best way of generating the HTML-Page?
Hard code the HTML-Page?
Switch dependency-management to apache-ivy and write some ant task to generate the html
Use maven-ant-tasks and write some ant task to generate the HTML
Use maven only to handle the dependencies and the HTML once, download them and commit them. The rest is done by the unchanged ant-scripts
Switch to maven2 (Hey boss, I want to switch to maven, in 1 month the build maybe work again...)
...
What elements should the about-dialog show?
Library name
Version
License
Author
Homepage
Changes made with link to source archive
...
Is there some best-practise-advice? Some good examples (applications having a nice about-dialog showing the dependencies)?
There are two different things you need to consider.
First, you may need to identify the licenses of the third-party code. This is often down with a THIRDPARTYLICENSE file. Sun Microsystems does this a lot. Look in the install directory for OpenOffice.org, for example. There are examples of .txt and .html versions of such files around.
Secondly, you may want to identify your dependencies in the About box in a brief way (and also refer to the file of license information). I would make sure the versions appear in the About box. One thing people want to quickly check for is an indication of whether the copy of your code they have needs to be replaced or updated because one of your library dependencies has a recently-disclosed bug or security vulnerability.
So I guess the other thing you want to include in the about box is a way for people to find your support site and any notices of importance to users of the particular version (whether or not you have a provision in your app for checking on-line for updates).
Ant task seems to be the best way. We do a similar thing in one of our projects. All the open source libraries are present in a specified folder. An Ant task reads the manifest of these libraries, versions and so on and generates an HTML, copies into another specified folder from where it is picked up by the web container.
Generating the page with each build would be wasteful if the libraries are not going to change often. Library versions may change, but the actual libraries don't. Easier to just create a HTML page would be the easiest way out, but that's one more maintenance head ache. Generate it once and include it with the package. The script can always be run again in case some changes are being made to the libraries (updating versions, adding new libraries).