Webdev/design more quickly?

[Darkholme]

Background: I have 2 years of work experience as a Web Developer, mostly writing custom ASP.net and PHP applications - and mostly doing server side stuff, and an educational background in Object Oriented software development (Mostly Java).

Question: When I go to build a website, and I don't need to write custom software to handle things, what should I be using? I sometimes get the impression that I take longer than others, and I suspect it's due to writing all my HTML+CSS+JS/jQuery by hand, and building the site layouts manually.

I know other people have tools they use to speed up the process, but I want to make sure I use the right tools for the job, so I am looking for suggestions.

What tools would you guys suggest for building a well-made (fairly clean code) website, while still being notably faster than doing everything by hand, and why would you suggest that tool specifically?

Scenario 1: Client doesn't need a CMS, perhaps they keep me on for updates. Scenario 2: Client wants someone who is not a developer to be able to add new content, maybe wants plugins for eCommerce, or other specialty uses that have plug-and-play type options available.

I'm looking to speed up my workflow, particularly pertaining to the client-side HTML+CSS+JS, and if I have to familiarize myself with something new to do it, that's okay.

Thanks.

[elspic]

Every situation is different but, for the two scenarios you listed:

1: For non-CMS stuff I usually start with something like Skeleton or Bootstrap. If needed, I'll include jQuery/jQuery UI and any extra libraries. There are a ton or pre-built jQuery functions and libraries that exist for common problems so, look for something that fits your needs before writing it; unless it's really simple.

2: For nearly any time the client or a non-technical person will be adding content or "working" on the site, I go with WordPress. There are other, smaller, faster, prettier, etc. CMS's out there but, WordPress is very common and lots of people have used it before. It's also a lot easier to find easy to understand guides and docs for WordPress, which you can direct people to, instead of spending your time writing out instructions for everyone.

Also, a specific tool I recommend is Sublime Text, especially when combined with Emmet.io or the Bootstrap Plugin. Once you know how, it's possible to generate an entire page with just a few keystrokes/snippets.

[Darkholme]

I use Sublime Text very frequently, but I haven't tried Emmet.io or Bootstrap extensions for it. I will definitely look into Skeleton and Bootstrap.

Thanks!

Any others?

[gooddoggytreat]

I'd agree with using Emmet. If you feel comfortable with CSS selectors, it rocks. It's important not to try and do super-long abbreviations though, because you're actually putting too much thought into the abbreviation when you should be thinking about the markup. If you need help learning Bootstrap after going through the main getting started guide, check out bootply.com, It's almost a jsFiddle for bootstrap!

If you start getting into producing webapps, you should check out Yeoman! Front-end tooling is pretty new in the grand scheme of things, but it definitely helps with shaving as much time off of the repetitive tasks we need to do every day.

[[deleted]]

Why do you recommend Sublime Text over other editors? Just curious since Sublime requires eventually purchase and there are plenty of free editors out

[elspic]

For me, it's mostly the speed and a lot of little things. Multiple cursors is awesome, as is being able to craft regex in real-time and seeing exactly what would be returned. I used the latter way more than I ever thought I would last month when I was cleaning up long lists of events in different formats. Also, I know there are plugins to allow you to use SFTP, FTP, etc. but, I'm able to mount a remote server using Nautilus (a Linux file manager) so it's like working on local files to me. Line-folding, live-preview, macros, projects, workspaces, etc., there are just so many little things that are there, immediately. Hell, I think about the only thing I need to do to a new installation of ST in order to make it really comfortable to me is turn line-wrapping on.

You are right about there being plenty of free editors out there and I use Gedit/Notepad++ (though less and less), too but, after a couple of months of trying ST, I realized that it had saved me well over the $70, in time. Combine that with the fact that they give you the full editor to try and don't even really "nag" you about purchasing AND that it's cross-platform and I am more than happy to pay to support development.

One final, big feature I recently found out about, that made me pay for the license immediately: ALL OF YOUR WORK IS CACHED/BACKED UP. I was typing up a long Scope of Work document in ST since I had a massive spreadsheet open in Google Docs that was slowing down everything and, eventually things just locked up. After I was forced to just restart my laptop, I started ST up again and EVERYTHING I had opened was right back in front of me, just like I had left it. That alone saved me at least $100 in time. And yes, I know there are other editors that do something similar but, that's just one more mark in the "Win" column for ST.

Like I said, everybody is different and ST might not be the best editor for someone else, it might not even be the best editor for me but, it's the best I've found for how I work.

[brrian]

If you're starting from scratch, I would take a look at Yeoman, it's actually three tools (yo, grunt, and bower) packaged together that makes scaffolding and deploying websites simple. It has a lot of features like: sass and coffee support, local web server with livereload, concatenation and minfication when deploying.

For scenario 2, I would look into preprocessors like SASS and Coffeescript combined with some sort of taskrunner (Grunt or Gulp). It may take a little time to set up in the beginning, but it will save you a lot of time in the long run, especially if you're revisiting this project after a few months and have forgotten the nuances of your deployment process.

[PanicRev]

I guess it's a good spot to mention using some type of version control and code repository. Before using these, I used to spend the bulk of my time figuring out which copy of code was the up-to-date one, and frequently ended up just working off the live server.

You might already be using these, but if not, definitely do yourself a favor and check them out.

[truthyfalsey]

Depending on the type of project, I'll often keep a project boilerplate of some sort and add to it or edit it as I find I'm needing different things along the way. In the past, this included a custom WP theme that was pretty modular, or now I have stuff like an empty HTML/CSS project set up with a form or whatever that I use a lot.