I've been doing front-end design and development professionally for 10+ years, so many of these techniques wouldn't have applied when I first started, but goddamn I wish I'd picked them up sooner.

1. Always look for new shortcuts for your workflow

Automation can breed laziness, but the time savings almost always offset the costs of any bad habits.

Some fantastic tools that I wish I'd learned to use sooner:

Grunt – automate all those tedious deployment tasks, like prefixing CSS, minifying scripts, and hundreds of other things that you can scratch off your manual task list.

SASS (or LESS) – An extension language for CSS, I resisted this for far too long out of laziness. It's amazing. Write better, more robust CSS with much less typing.

Emmet – again, I could have saved hundreds of thousands of keystrokes with this text-expansion plugin.

Type in something like this:

div>ul#demolist>(li.ex)*3 

hit TAB, and Emmet expands it to this:

<div> <ul id="demolist"> <li class="ex"></li> <li class="ex"></li> <li class="ex"></li> </ul> </div> 

Emmet works with some of the fancier text editors, which brings me to…

2. Learn to use a fancy text editor

I used Notepad++ for almost 7 years, well after other, more feature-filled text editors had hit the market.

Notepad++ will always have a place in my heart, but after switching to Brackets, I've never looked back. It's an absolute delight to work with, and makes writing HTML and CSS much, much easier. (SublimeText is sexy as well)

3. Set up a local development server

This deviates a bit from HTML & CSS, but PHP does have considerable overlap with some of my projects – like WordPress themes.

For a long, long time, I only worked with PHP on remote servers.

That meant opening every file I wanted to edit directly from the FTP client, saving the changes, uploading back to the server, and checking in the browser.

In retrospect, that was ridiculous.

Setting up XAMPP always seemed a little daunting to me, but again: once it went up, I never looked back.

It's so, so, so much easier to work with PHP files and databases locally. Not to mention safer.

4. Find a framework. Learn it, extend it, love it.

My first experience with frameworks was with Bootstrap, way back when it first came out. I wasn't using SASS or LESS at the time, so it was a real pain in the ass to customize. I liked the idea, but it wasn't for me.

Then, in 2013, I had a massive WordPress theme to build, and I absolutely needed a responsive front-end framework.

After weighing some options, I decided on Foundation.

There was a slight learning curve, and the first setup took me a whole day, but I've used it for every project since then.

I've also found myself adding new helper classes to the framework – classes that I carry over to every project.

It's almost comforting to know that the "mb0" class will force the margin-bottom attribute on an element to zero.

Or that the "pt12" css will set the top-padding to 48px.

Sure, it's sloppy, but when I'm marking up 9,000-word sales pages for a quick A/B test, every little bit helps.


I'm always on the hunt for new ways to make my job easier while still pumping out quality work. If you have any tips or examples that have made your front-end work life easier, let us know!

submitted by /u/SlutBuster to /r/HTML
[link] [kommentarer]

via gemt af Ikilldragonz Link

Cool link: 4 Things I wish I knew when I started writing HTML & CSS [x-post from r/tiwikwis]
Tagged on: