

Ask HN: What's in your front-end kit? - rglover

I'm a front-end developer and I've noticed that the number of tools I use day-to-day has been expanding quite a bit (especially with responsive design becoming more popular). Out of curiosity, what's in your kit? What I'm most curious about:<p>CSS Frameworks - Do you use any? If so, what size of project dictates its usage? Do you prefer using a framework or rolling your own code?<p>Javascript/jQuery - What polyfills, plugins, or other javascript do you use to run the front-end (e.g. Scott Jehl's respond.js, HTML5 shiv, etc.)? For web apps: how often do you use things like Backbone or Ember?<p>Organization - How do you structure your code/files? I've had to really rethink how I organize my files when working on bigger sites. Any tips?<p>Anything else - This is a gross generalization on the topic, but really I'm looking for anything that might improve the quality of my work/help simplify my workflow.
======
reedlauber
I suspect I'm in the minority, but I try to use very few frameworks and work
my way up as needed.

I've been using Sublime Text 2, and generally developing in Rails +
postgresql.

I prefer against CSS frameworks. It's pretty easy to build your own grid
system. The exception is that I've been using Bootstrap pretty heavily for new
ideas and prototypes, but have also found myself removing it in the long run.

I use jQuery. It works nicely with the idea of using very few frameworks. It's
great for DOM, Ajax and events, but doesn't assume too much more. Sometimes
I'll use a polyfill shiv of some kind, but usually only when I run into
trouble. I don't like heavier frameworks like Ember or even Backbone.
Ultimately, I feel like I'm building an Ember app, not a web app, and I think
that gets in the way of making good decisions otherwise. Backbone is obviously
lighter weight, but I developed a system (patterns) a while back that works
really well for me, and haven't found Backbone to be an improvement.

File organization is a really interest topic, and not talked about enough.
It's a big one, though, and I think more than I can fit here. Roughly, I have
a few "core/setup" files that are included on every page, then the rest of the
code broken up into "components" - generally page-specific, and "widgets"
things that are likely small in scope, totally independent, and alway capable
of having multiple instances. All communication between components, widgets,
or any other code is done with custom events.

------
anujkk
HTML5

CSS3/LESS

Twitter Bootstrap/Bootswatch SwatchMaker (I prefer using this instead of
rolling my own)

Javascript, jQuery, bootstrap js plugins and angular.js(for web apps needing
heavy javascript work)

Here is my typical workflow :

1\. UX Design : sketches using paper/pencil

2\. Think/Decide about color scheme and UI design. Get a basic image of what I
want in my mind and note down colors. I use services like Adobe Kuler/
0to255.com for color selection.

3\. Make a fresh copy a project template folder + git-fy it. It is basically a
collection of usually needed libraries like jQuery/BootStrap and blank starter
files.

4\. Quickly convert sketches to html using default bootstrap theme, jquery,
jquery plugins, angular.js etc. In this stage focus is on implementing UX and
not on how site looks. I don't touch photoshop/illustrator unless I feel the
need to design custom logo/icons/backgrounds

5\. Create custom css3/less code that override bootstrap css for custom look &
feel. If heavy modification is needed I use bootswatch swatchmaker to create
custom bootstrap skins.

6\. Test UI in various combinations of browsers/devices/os/resolution and test
how it looks with JS disabled.

7\. Rinse and Repeat as needed.

------
dangrossman
Sublime Text 2, Less, Twitter Bootstrap, Font Awesome and jQuery.

The backend framework typically dictates how files are organized. Usually ends
up with css/ and js/ folders, and I put the LESS source files for the
stylesheets in css/less/.

------
jonnotie
Apps: Sublime Text 2, Codekit Frameworks: Sass & Haml

:)

