over 7 years ago from A P, Position @ Company
I work primarily in Bootstrap, WP, and Shopify, and don't touch anything beyond HTML / CSS / jQuery (no custom JS or app dev or anything like that)
I've recently begun learning SASS and HAML (with CodeKit) to help clean up / streamline my development process, but I'm wondering what other languages / shortcuts / frameworks people use to expedite / simplify those processes
Both are fine. For SASS, I'd suggest using Bourbon, the best mixin library out there. For JS, (I don't use it), but I know you can use CoffeeScript for example, but since you don't do much custom JS, kind of my case, I don't see the point, and that's why I don't use it.
Bourbon is killer. And *trawling codepen for mixins
Do you mean "lurking"? Trolling typically something else completely...
Probably trawling? (see 2nd definition)
I used to use mixins for this kind of stuff, but then I started using Autoprefixer instead. Then your mixins are reserved for capturing repeated style.
I use Bourbon for most prefixing, custom mixins for breakpoint-dependent styles, hidpi assets, etc. Have yet to see a postCSS hidpi method
Yep, with autoprefixer you never need to worry about prefixes. You can even set it to prefix for certain browser compatibility.
+1 on Bourbon or even Compass. I'm not a huge fan of CoffeeScript anymore with ES6 coming to fruition (especially with the ability to transform/translate it back to ES5 spec).
Bourbon was great three years ago. These day, it's silly if all you need is vendor prefixes. You should be using a workflow that includes autoprefixer. Your end result will be better.
You know, Never thought of it that way, and it makes total sense. Will give autoprefixer a shot. As soon as it came out, I thought it was awful. Plus I loved Bourbon and it's clean @keyframes mixins for instance.
You should check out Gulp (or Grunt) for building your assets. They are essential in my workflow now when developing.
I also would check out Bourbon, Compass, Autoprefixer, Suzy, and LiveReload to name a few.
OP already uses Codekit, which essentially obviates the need for Gulp/Grunt, Autoprefixer, and LiveReload.
Not if you want to do more advanced tasks.
if your dev process is "simple"like the OP mentions yeah it's fine, but when you work with more team members or need some more custom stuff gulp (or webpack in my case) really becomes a necessity.
And, for me at least, Gulp is a lot faster in compiling SASS and JS than Codekit.
I can't imagine OP is going to go beyond Codekit in the near future given their JS work hasn't extended beyond jQuery.
Looking back this post, I'd have to agree with the above. Most of what I had mentioned as well as others is far beyond the junior developer who is creating hero sliders with jQuery. Lol
If you were highly recommend https://middlemanapp.com for making static websites, blogs, etc. Easy to use for beginners or pro's.
To compliment everyone whose already said it, learning grunt/gulp is a huge advantage to speeding up your development process.
I would encourage you to distance yourself from Codekit as a tool. I've worked on codebases that depend on codekit too much for their build process, and using a more modular toolkit like gulp helps to future-proof projects.
The other area you might be able to streamline is your dev environment. I used mamp for the longest time, but recently switched to a vagrant configuration. Makes my life so much easier to develop on, and my projects a little more configurable. (ability to spin up an nginx or apache config separately). Perhaps start with Scotch.io's 'Scotchbox' - great way to get a WP environment up and running.
"I've worked on codebases that depend on codekit too much for their build process"
Could you elaborate on that please?
Sure!
I was given the task at a previous job of reorganizing a quite large project's stylesheets and compiling an updated styleguide, basically optimizing and giving it a small facelift. I learned quickly that the previous design team had configured codekit 1.x to watch/compile/etc our ~250 sass partials. The reason they used it was because they didn't know much about the command line, build processes, etc, just that they needed their sass compiled to css in an easy way. So they built the platform for ~2 years using Codekit. Codekit 1.x unfortunately at the time was becoming unsupported and did not provide an upgrade path to 2.0, you'd have to re-configure your project to use it. No way to export your includes or dependancies. So essentially, due to the disorganized and monolythic scale of the frontend, moving those stylesheets into a modular process like grunt or gulp was not easy.
To be fair, it wasn't the tools fault as much as the nature of letting codebases become disorganized. But to be so heavily coupled to a tool managed by one person (who BTW is a fantastic developer and has created a great tool!) for a project as large as the one I was working on (popular .com site, ~5m users, 15-20 person technical team) isn't the best way to go.
Which is why, I recommend to take some time and learn grunt/gulp/cli tools rather than using codekit/cactus/gui tools - because the extensibility, modularity, portability, and just overall ease of reconfiguration is such an upside to the rigid/proprietary nature of gui tools.
Thanks for the reply!
I use Jade, Stylus and Coffeescript -- no reason other than I think they're pretty. :)
Some old colleagues of mine turned me onto Jade and Stylus, but there’s something about Coffeescript that doesn’t hook me. I tried it years ago before dot chaining was supported, so I lost interest... and just haven’t found any again.
Learned through Bootstrap 4 that Bootstrap 5 will most likely use something like PostCSS - some pretty neat, future-leaning concepts there.
PostCSS can do the same work as preprocessors like Sass, Less, and Stylus. But PostCSS is modular, 3-30 times faster, and much more powerful.
Beyond what you've got there, I've been using Grunt and Jekyll to automate more of my development process. There are dozens of great articles on how to incorporate those into your current workflow, and the learning curve isn't that large.
Jade + stylus + coffee —> the best combo
Since no one has focused on the fact that one of your primary frameworks is WordPress, I highly recommend the Roots stack. I wrote a bit about how it helps me over here, but it basically gives you gulp, sass, bootstrap, and development and deployment options for WordPress development.
Aside from that, haml is for ruby, so I'm not sure how that fits into your stack, but I'd encourage you to learn slim over haml if you're looking for html templating.
Just a opinion: i really hate HAML it really makes me think of coffee script; yeah your html is a bit smaller, but it really becomes hard to read and maintain.
Jade is much better for readability. Though my past two sites I've just used vanilla HTML... I do really miss mixins and includes.
React/Deku, CSSNext, Webpack/Gulp, Babel.
That's my workflow.
Don't bother with CoffeeScript. Five years ago it was a decent bandaid for some things in JavaScript that were harder than necessary.
Nowadays, if you want to get started with JavaScript, start with ES6, the latest standard that can automatically be backported to work in environments that don't support it yet. If you want to get a bit more fringe, check out TypeScript and/or Elm.
As others have said, I prefer Jade, but it's pretty similar to HAML.
As far as JavaScript libraries, there's so many that it's hard to generally recommend any in particular beyond maybe lodash as a good general purpose library.
Maybe not exactly what you're looking for but I spent some time a few years back learning a lot about front-end performance optimization. In a nutshell, making your projects load as fast and as beautifully as possible. Here's a nice place to start: http://csswizardry.com/2013/01/front-end-performance-for-web-designers-and-front-end-developers/
Gulp (from experience it compiles faster) Imagemin - optimises images Autoprefixer - fixes cross browser prefixers BrowserSync - Works extremely well if you design for mobile and auto refresh helps If you are working mostly with Wordpress, you should definitely try Roots.io as they use Bootstrap as the starter theme. And go with Capistrano for one-line deployment.
Grunt (and Gulp) can make your workflow magic.
Grunt and SASS for front end tooling. Gridset for grids. _s as wordpress starter theme. I worked with HAML on a rails project awhile ago and didn't get the point. It seemed masochistic TBH.
Login to Comment
You'll need to log in before you can leave a comment.
LoginRegister Today
New accounts can leave comments immediately, and gain full permissions after one week.
Register now