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

https://news.ycombinator.com/item?id=4439820

by rglover • 14 years ago

6 4 14 years ago

news.ycombinator.com

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:

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?

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?

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?

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.

jonnotie• 14 years ago

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

reedlauber• 14 years ago

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.

dangrossman• 14 years ago

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/.

anujkk• 14 years ago

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.

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

Related Stories