Recommended workflow

[+Matthew S. Subscriber²]

Hey Guys,

 

So I'm getting back into web development and design and was wondering what people are using for their workflows this day and age when it comes to HTML, CSS and JavaScript.

 

I've always been of the mindset that a good text editor (like sublime) is enough but I've noticed the rise of tools such as Sass/Less and CoffeeScript and was am curious about them.

[Seahorsepip Veteran]

I use notepad++ and less for css because of color functions, variables and most important selector nesting.

Being able to use variables and nesting saves a lot of time in writing css.

[game_over]

First of all you need a good workable environment, apps like MAMP are rubbish compared to what is available now, look up 'Vagrant' or more specifically look at this and it's all setup for you: https://box.scotch.io (full guide on the site)

 

You can basically fire up the VM from the command line which, if you use Scotch Box is already locked and loaded with all of the modern tools you may want to use: PHP 5.5, Apache, VIM, MySQL, Ruby, GIT, Composer, Bower, Grunt, and so on.

 

If anything, using this method teaches you about servers and different environments, which in my opinion, web devs should know.

 

Next you need a good text editor, I would recommended sticking SublimeText i've tried all the new modern editors (Brackets, Atom, etc..) and whilst they have some attractive features, nothing is quite as fast as SL2.

 

Finally the only other tool I use is a pre-processor, an app called CodeKit.. it's only for OS X there are windows variants, it compiles most libraries (LESS, SASS), and does things like code minifying, linting, browser refreshing (css injection), it mirrors onto devices like phones and tablets, has a built in server, basically just a big swiss army knife for developers.

[+Matthew S. Subscriber²]

Vagrant is already on the top of my list, I actually have been running web servers for a long while now (went from shared hosting a few years back to a custom setup on EC2 and now have a dedicated in Montreal running WHM/cPanel (I missed having a control panel, and so did some of my users)).

 

I'm also on a Mac and have actually already set up Apache 2.2, PHP 5.6, RVM, Sass, Less, Composer, Compass and a long list after watching a few vids on Techtuts. 

[game_over]

Vagrant is already on the top of my list, I actually have been running web servers for a long while now (went from shared hosting a few years back to a custom setup on EC2 and now have a dedicated in Montreal running WHM/cPanel (I missed having a control panel, and so did some of my users)).

 

I'm also on a Mac and have actually already set up Apache 2.2, PHP 5.6, RVM, Sass, Less, Composer, Compass and a long list after watching a few vids on Techtuts. 

 

Oh well, it sounds like you are already well on your way. I also use a control panel online. I have a dedicated running CentOS-Apache-WHM-cPanel, i use Vagrant to basically mirror this on my PC, it's great for testing changes, if something goes wrong just destroy it and start again, or if I need some drastic online changes i can easily reflect this on my local VM, probably the best tool i started using 2014.

 

Since you are on a Mac you should definitely check out CodeKit, it's really cheap and does an awful lot, it has Bower built in so if you want to pull down things like font-awesome, bootstrap, jquery (or basically any package on github) it's down and in your project within seconds, and then of course it sits in the background and compiles your css and js and refreshes the browser for you automatically.. the beauty of it is that it 'just works' there is no need to clog up your Mac with lots of dependencies for less, sass, bower, compass, etc.. it's all there in this one nifty app.

 

There are others, such as:http://mixture.io which i think has just became free.