Simple html templating for small sites with grunt - gruntjs

Looking for a simple html templating solution for small sites.
I really want to do some basic includes (similar to some super simple PHP) that generate out to flat html. I had tried using Assemble.io but it seems to contain so much more.
For reference I'm coming from mixture.io which has some really easy templating but since it is a subscription I cant have that be the way our whole office makes sites. I have also seen middleman but I feel like node is just a lot easier to deal with.
I feel like there is a way to do what I'm looking for with mustache alone but my javascript is not very good. Any help would be greatly appreciated.

I'd recommend looking into Cabin
http://colinwren.github.io/Cabin/
Workflow uses Grunt and they added livereload support in the last release. Good alternative to using Jekyll.

Related

Can someone explain the purpose of CSS frameworks and why we use them?

So in class, we've been applying css frameworks like Bootstrap, Foundation, Normalize.css but I do not understand what the point is of using them. Can someone briefly explain WHY they are used? How am I supposed to know which framework to use? For example, let's say I made a basic HTML file for my blog and I want to style it. Would I need to use a framework? How would I know which to use? How is it different from just styling on my own from scratch? I know these seem like stupid, ridiculous questions but I just started learning CSS a month ago and do not understand what frameworks like Bootstrap, Foundation, Normalize, etc. are and the purpose of them. Someone please explain as if how they would explain to a little child so I understand? Thanks.
A bit of an opinion-based question, but in short: developers are lazy and it takes time to code sites that are mobile-ready, consistent across browsers, and are easy to manage as browsers get updated.
With frameworks, developers need not waste time figuring any of this out.
For example, with Bootstrap, using the grid system, it is possible to make mobile-ready sites with minimal media queries and complex CSS rules.
Using other people's code, which has been tested on production environments and is constantly being patched and updated, saves a lot of time and a lot of bugs down the road.
You can think of frameworks (in any language, not just CSS) as a bunch of existing reusable codes you can readily use for your own projects. They essentially make your life easier because you don't have to reinvent the wheel anymore. Simply put, frameworks are a bunch of tested reusable codes for common tasks.
The purpose is to avoid having to make your CSS from scratch. There are a LOT of CSS activities that most people do over and over. If you look at a wide variety of sites, you'll notice similarities in the way information is presented. As a result, if you're going to be presenting information using one of those standard layouts, it's vastly easier to simply use a CSS framework than roll your own version.
Also, different browsers have different default CSS settings. Using a CSS framework will provide a CSS reset as part of what they do. This helps ensure that what you see in one browser is what will be seen in all browsers. This helps you spend more time building your site and less time trying to figure out why the display is different in a particular version of IE, for example.
frameworks comes with lots of features like grid, components, typography along with good browser compatibility so you can simple use them instead of creating them from scratch. It totally based on project requirement that what framework you should use. Apart from bootstrap and Foundation there are more great out there created by few geeks.

How can I localize my Meteor JS App?

I need to get my Meteor JSapp in more than one language.
What would be the best approach for i18n?
Google passed my quite a bit of results but reading them I am more confused than happy. There a many hacks but is there a settled solution to this?
This is more a comment than an answer (however my repu still is too low :o):
Localization normally is only needed client side (there are exceptions but not many and they can be dealt with) and as Meteor is quite young with an own templating engine it's normal that you find more hacks than stable solutions.
However you can doge that bullet by using an older client side templating technique than Meteors built in one like AngularJS with Angular-Meteor (http://angularjs.meteor.com/). Personally I can just recommend this project as it gives you a lot more power than Blaze alone does. And now when you look for solutions for localizing AngularJS you will find a lot more. One I can recommend is angular-gettext (https://angular-gettext.rocketeer.be/) which also comes with a grunt script to extract and compile your strings in one click and which builts a .pot file so that you can translate your app with PoEdit just like you would with an old school webapplication. The only thing you may need to do yourself is to extend the grunt script to parse for any custom translation functions you may add (but maybe you can live without those than you wouldn't need to do anything).

Which framework/CMS to be used

i am a hobby programmer with very little experience in web programming, i devote an average f 20-30 hours a week, but with summers coming i have some free time to experiment and learn. could anyone please tell me, whether a framework like (Kohana/cakePHP/CI) should be used or directly a CMS tool like drupal/joomla should be used to make a website something like stackoverflow, on a smaller scale though.
Thanks for your help.
It depends on what you want to learn. Depends on your goal.
Is it webdevelopment you wish to learn? CSS? Webdesign? Programming? Building sites?
If your goal is the site itself, I would suggest to start high up in the stack: use a ready-to-go CMS, such as Drupal, that gets you going fast. And that offers a (production ready) result in a few hours. Your downside will be freedom: sure Drupal can do a lot, so can Wordpress. But unless you move down in the stack (develop addons and such) you will have to do with what you are offered: ready made components that work according to the authors wish. Possibly not your wish.
If your goal is to learn webdevelopment in a more general way, you should start lower down in the stack. Ruby on Rails or Django are probably the best options. Simply because of their vast resource on newbie documentation. You will learn programming along the way there too. Within a few days you will have built a site according to your exact wishes (obviously, your milage may vary, depending on the wishes:)).
If your goal is development of software, Python and Ruby are most probably a good start too: both are cross-platform, have good newbie resources and offer great documentation. Both are really well (opinions may differ on this) abstraction and object orientation. They will form you into a good programmer, simply by their nature.
There's a Stackoverflow clone called Qwench that is free.
(search stackoverflow for open source stackoverflow clones)
and one built on drupal http://drupal.org/project/arrayshift
Wordpress can act very much like Stackoverflow with a proper template. See here: http://p2theme.com/ (demo here: http://p2demo.wordpress.com/). Actually you can than start editing the theme (.php files) and make it behave more and more like Stackoverflow (with reputation system etc. which should be easy to implement). This way you won't be reinventing the wheel and have a good headstart.
I personally use CodeIgniter and love it. I would recommend it to any novice looking to further their knowledge of object oriented programming, and any veterans looking to get their projects off the ground quicker. I am not going to go into great detail here, because I know Kohana and CakePHP are similar, and its mostly opinion. CI does have great documentation though.
I think learning the most common CMS is going to be hugely beneficial to you, tons of sites and companies use WP/Drupal/Joomla/Etc and it really can't hurt to understand them. These projects are very large, so you don't necessarily need to know their internal operations 100%, but you should know enough to be able to install, customize and get a site up and running fairly quickly.
Everyone has their favorites, but I invite you to try them all and see what moves you. It will NEVER hurt to learn something and not use it, especially with some extra time.
There are times to use a packaged CMS and hopefully be able to theme/customize it to what you need quickly...then there are times you will want to code a special case by hand using a framework.
Just understand the depth of the project you want to undertake, because starting from scratch is fun and rewarding, but once you get neck deep in code and get stuck its easy to lose motivation all together.
I would suggest learning the basics of HTML before diving in to using a content management system. The importance of understanding the basic building blocks of websites can't be overstated.
There are loads of resources online to learning about HTML - once you've got some experience with that, you can look at CSS, Javascript, and server-side scripting languages. Knowing the basics will help with using any content management system.
Joomla / Drupal are a good place to start with content management systems, as is Wordpress, but you'd be much better off learning how it works underneath (at least to the most basic extent) before diving in to anything else.
If you're already a programmer you won't find it too hard, but it's definitely worth doing.

Managing ever-growing CSS stylesheets at server-side - are there any libraries, helpers?

When developing large application using ASP.NET (MVC or classic, doesn't matter), especially in large team, it is easy to produce a lot of messy, non-traceable CSS definitions. After some time we can end up not knowing why particular definition exists and what is its real effect considering style inheritance and cross-browser differences. Needless to say, changing anything in that mess is a risk and there are hundreds of ways how small change could affect the system.
I know some solutions to organize CSS stylesheets better, like predefined CSS "frameworks" or DotLessCss engine, but I still find it quite hard to cope with CSS as there is no such relationship between HTML markup and CSS styles like i.e. between interface and concrete class in C# code. I know this is by design to make presentation separate from the structure, but I believe it might be useful to have such a correspondence at development level.
Ideally, I need something that can enforce the team not to make messy CSS or be able to clean that mess up automatically. Do you know any resources that may help me, or any guidance how to manage my CSS definitions easily?
Let me ask for something a bit different:
Despite of my several years of web experience, I believe I would feel much more confident if some of my CSS could be moved into C# code, the same way as some of HTML generation is done by MVC HTML Helpers. It saves me writing a lot of unnecessary markup, still allowing to do so if needed. And it is more unit testable, easier to refactor using tools like ReSharper etc.
I don't need mergers and compressors of my CSS, I would like to be able to manage my CSS at declaration level.
Maybe there are some tools like that I'm not aware of, or maybe that idea is just wrong and wouldn't be useful?
The Firefox plugin Dust Me Selectors should help to clean up unused selectors.
That being said please read What's Wrong With CSS
P.S: Please make reading Jeff Atwood's blog a habit :)
It might be worth looking at how Telerik have their css structured in their MVC components.
Telerik
Maybe I formulated my question in wrong way, but I was hoping to be directed to some existing .NET APIs to define/generate CSS. Looks like there's nothing like that. And according to the discussion in parallel question, it may not be as useful as I thought.

xhtml-css coding before Drupal Implementing?

I'm going to start my first Drupal project :) pretty excited. I have many questions in my head :/ but I will find out the answers and learn many about Drupal while working on this project.
ok, I have the design completed.
now is it better to make xhtml-css coding of all pages, and then implementing these codes to Drupal?
or is it better to make xhtml-css coding straight into Drupal theme?
Appreciate advices!
I prefer to code the XHTML/CSS first and then copy-paste/adapt it into the templates, everything is more consistent and you can have a real preview of how the page will look like once it is working dynamically (plus test it in different browsers, etc...).
(In my opinion) It is also faster to do it this way because you first focus purely on the Front-end and then start copy-pasting/adapting the code snippets (once you get to develop several themes you can create a code snippet collection with everything you need).
When I have tried to code it straight I always leave unclosed tags, create non-consistent CSS classes/IDs (specially when creating big websites with hundreds of CSS lines) and other minor mistakes in which I need to spend time later fixing...
My best advice is for you to try coding both ways. Then compare which one has been faster to develop, how comfortable have you felt and which one you prefer for your future projects.
Good luck!
I'd say it depends what your goals are. Preparing HTML and CSS before touching Drupal will make you very familiar with Drupal theming and give you exactly the markup you want, but it will come with a big downside of taking a LOT of time.
On the other hand, going with Drupal's default markup as much as possible will be faster and easier, but won't get you as familiar with Drupal theming and will result in some CSS that will probably feel a little bloated compared to your non-Drupal CSS.
Long term, I'd say bending Drupal markup to your will is best, but it may prove more frustrating than satisfying on your first Drupal project.

Resources