News for hackers. Stuff that matters.
Re:Ask HN: What are the essential components of your front-e... by bpierre on Sunday July 27, 2014 @03:08PM (#8093652)
Tools:

Browserify [1]. You have all the npm packages available, and your modules are compatible with Node. This allows you to easily test your modules, or reuse some of your modules in the browser, the CLI and a webserver for example.

Stylus [2] is great. Compared to Sass, I think it’s easier, more or equally powerful, and more future-proof. It’s basically a programming language on top of CSS, while Sass looks more like another language that produces CSS. It’s also written in JS, so you can easily write your own plugins (as npm modules).

Browserify and Stylus are also quite nice if your code is component-oriented.

This is how you import a component in Browserify:

  require('my-component')
And in Stylus:

  @require 'my-component'
For the build step, I always use Make because it’s everywhere except Windows, and I switch on gulp [3] if things get complicated or if I need Windows compatibility.

I’m using tape [4] and testling [5] (locally) for tests. Simple.

jspage [6] (I’m the author) is a simple tool I often use to transform some JS into a page. Useful for quick tests if you work in the CLI.

Services:

Cloudup [7] is nice for quick screenshot sharing. On OS X, I just use the built-in tool to make a screenshot, and an URL is immediately copied to the clipboard, I just have to paste it to someone. The delay between the moment when you take the screenshot and the moment when the other person loads the page is usually enough for the screenshot to be uploaded and displayed.

scri.ch [8] (I wrote this tool) is a simple drawing tool I’m using to share visual ideas, especially in GitHub issues (just add .png to an URL to get the image). I also use it to make quick interface elements that I can integrate into a web mockup.

  [1] http://browserify.org/
  [2] http://learnboost.github.io/stylus/
  [3] http://gulpjs.com/
  [4] https://github.com/substack/tape
  [5] https://ci.testling.com/
  [6] https://github.com/bpierre/jspage
  [7] https://cloudup.com/
  [8] http://scri.ch/
Re:Ask HN: What are the essential components of your front-e... by subsection1h on Sunday July 27, 2014 @09:30PM (#8094677)
> Stylus is great. Compared to Sass, I think it’s easier, more or equally powerful

In what ways is Stylus more powerful than Sass?

Re:Ask HN: What are the essential components of your front-e... by grayrest on Sunday July 27, 2014 @10:53PM (#8094893)
I'm a different person but I did use and prefer Stylus for a while.

When Stylus was created it was definitely more powerful than Sass. The syntactic flexibility of mixin invocation lets you define your own css properties and override how others work transparently. It also had a better story for defining in-language functions and whatnot.

Since TJ stopped working on Stylus the Sass guys have continued adding features. Using @extend can significantly reduce the size of the output CSS file, the ability to pass blocks into mixins was added, and SassScript roughly matches stylus' language. I consider Sass to be more powerful but someone using a different/older feature set could easily argue the other way.

The sass community is also larger/more prolific so you have sass frameworks (not that I generally use them but they're there) and things like the Team Sass github org doing interesting/random things.

Re:Ask HN: What are the essential components of your front-e... by bpierre on Monday July 28, 2014 @04:07AM (#8095660)
I agree with the last part, of course the community is a strong advantage for Sass. @extend is in Stylus too, but it supports any selectors (last time I checked, Sass’s @extend was only supporting classes).
Re:Ask HN: What are the essential components of your front-e... by Ayey_ on Sunday July 27, 2014 @03:59PM (#8093801)
What is in a typical make file for your projects?
Re:Ask HN: What are the essential components of your front-e... by bpierre on Sunday July 27, 2014 @04:48PM (#8093927)
It really depends of the project, but here are two examples, complete and simple: https://gist.github.com/bpierre/da5283f34a03b26e2833