Mixture – A Web Developer’s Sidekick

New tools, workflows, and processes pop up in the world of web development all the time. It’s difficult to keep up with the latest and greatest let alone realize when you should actually pay attention to something. The truth of the matter is that not all of these fancy tools are created equally. But, we’ve found one that you should pay attention to. It’s called Mixture.

I took a look at Mixture more than a year ago when the app was early in beta. I was almost immediately hooked. It was, at the time, a half completed application but its usefulness was completely obvious. It simplified so many of the little things I needed to deal with on a day-to-day basis.

A year later, Mixture is now at a stable point of development and a fully released product. The core features have been polished and after spending a lot more time with it, I decided it was time to review the major first release.

What is it?

Mixture’s core purpose is to make the lives of web designers and developers easier. That’s the short if it. The app does a whole pile of different things (just about all of which hit pain points for most web designers). Let’s take a spin through the Mixture and see exactly what this thing can do. I’ll be honest, it’s a lot so stick with me as I tear through how this thing works.

A Front-End Developer Needs to Deal With…

What seems like a relatively simple part of a web application, as any developer can tell you, is definitely not. Most developers need to deal with something in the neighborhood of 4-5 different technologies as part of any project (that number goes up even higher depending on the specific project requirements). Sass or Less is a nearly given and we’ll probably need to write at least a little CoffeeScript. And we’ll need something to help us do some templating (that’ll make life much easier). Now we need to get this thing deployed so the world (or at least our client) can see it. We should probably take some time to think about performance as well. We’ll need to do all of this while taking into consideration that we’re building a responsive site.

So yeah, it’s a lot to deal with. Mixture isn’t the one thing that can perform a particular part of this workflow. Rather it attempts to bring all of these common pieces together into one package. It sounds a bit like a pipe dream, and honestly it feels like that sometimes, but Mixture does a pretty solid job at making this a reality.

Precompilation

I mentioned Sass and Less as a common technology used in front-end development today and Mixture handles this task quite nicely. If you’re not familiar, Sass and Less are essentially better ways to write your stylesheets. I won’t get into it much here, but for the ridiculous gains leveraging technology like this, the fact that it needs to compile back into CSS can be a problem. At a minimum it’s a bit of an inconvenience even if you know what you’re doing.

Mixture is a simple little Mac (or Windows) desktop application. You fire it up while you’re working on your project in your favorite editor and let it work it’s magic in the background. In this situation files that can be are precompiled automatically right while you’re working. A couple settings allow for some customization as to where the compiled files end up. Nothing groundbreaking here necessarily, but Mixture handles all of this well and makes precompiling extremely simple.

Mixture compile and minify

Mixture compiling and minifying

I’ve specifically called out Sass and Less, but just to be clear, Mixture is capable of handling many other preprocessor type languages. Currently, the application supports Sass, Less, Stylus, and CoffeeScript. It can also handle processing Base64 and will work with Autoprefixer straight out of the box. You just need to activate it and set the browsers you’d like to support.

Optimization

Not only does Mixture handle the compiling of preprocessed languages it’ll also manage the minification of the compiled files as well. A minified version (along with the standard version) is created and updated right as you’re making changes. Again, not a major feat, but just one more thing that you won’t have to worry about.

Optimizing the images we’re using on our sites is a quick and easy way to get a performance gain. Again, this isn’t a super difficult task on its own, but not surprisingly it gets forgotten about more than it should. With Mixture that image optimizing is done automatically. Any image you use gets optimized. Easy as that.

Combining files to limit server calls is another quick way to increase the performance of your website. Mixture allows you to easily combine and import any CSS or JS file. This makes is very easy to keep your files organized while you’re developing and get to the more ideal scenario when you’re ready to deploy.

Templates

Template engines can make a web developers life much more simple and as you’d probably have guessed, Mixture has got us covered on this front as well. You can write in either Haml or Liquid. Either of which will save you loads of time and headache. Writing markup in languages like these, even when only understanding the most basic components, are really useful when working on any web project. In the end it makes it so much easier to DRY out your code. Layouts can be separated and reused as needed. Repetitive blocks of code can be pulled out and called when needed. Once you writing front-end code in this way it’s difficult to go back to pure HTML.

Templating languages are extremely useful and not overly complicated to learn, but again, getting this technology running is not just as simple as writing a .liquid file unfortunately. Mixture jumps in here again and is able to parse both Liquid and Haml right out of the box. Again, you don’t need to do anything special. All you need to do is have Mixture running and simply create a file with a .liquid extension in your project and off you go. Mixture does the heavy lifting.

Live Refresh and Multi Device Testing

While you’re working on a Mixture project all of the precompilation and minification template parsing takes place automatically. What also happens is that your browser is refreshed right along side any changes made to your CSS, JS or markup. This is one of those nice little features that you won’t miss until it’s gone. But man, is this a great little feature and one that I want on every project I work on.

Multi device testing is also really simple with Mixture. I’ve never seen any app take multi device testing to these lengths. Mixture includes its own web server so when you’re running your project locally you can connect any device on your network to the address where your project is running. And you’re able to see each device that is connected (along with some details about the device) and debug individual devices if you’d like.

Mixture multi device testing

Multi device testing with Mixture

What’s amazing is that all the connected devices respond the same way when you’re making changes to your project. Update a stylesheet and you see that change reflected right away across all devices. Here’s a quick demo of this feature that the Mixture team shot. It’s pretty impressive.

Boilerplates and To-dos

When starting a project Mixture allows you to either start with a completely clean slate or start from a boilerplate. You’re welcome to build your own starting point boilerplates as well as choose from some that have been contributed by the community. Most of us have some common components that we include in every project so just the simple act of cutting that part of the set up out of the workflow is a time saver.

I’m guessing that some of you (I definitely am) are the type that like to make notes to yourself via comments in your code. Maybe just a quick note of something you want to come back to and deal with later. It’s a great idea, but doesn’t always work out so well in practice. Surfacing all those to-dos you’ve written to yourself can be a bit challenging or something that you just flat our forget to do. There are definitely ways to do it, but Mixture simply pulls them out for you. No set up required. Write a to-do (with the stated syntax) and the app will compile all of them for you and provide links to the files they’re associated with.

Models and Collections

Here’s where things start getting a bit more complicated and a bit more powerful. Mixture allows you to create your own JSON models for use throughout your site. In the most simple form, this is a good way to separate the content from the code. When the content is abstracted out like this not only is it easier to manage, it expands what we can do with that content. For example a group of people (name, bio, whatever) could be stored in a model and then a bit of Liquid code can be used to loop through the info attached to each person. It’s a bit like a database, but it’s not.

And I should also mention that it is possible to use an external source for your JSON model. An example video on the Mixture documentation website shows how this could work using a service like Firebase to actually store the data. This isn’t probably something that you’re going to take advantage of everyday, but it’s a pretty cool option to have.

Collections are another method of storing data in Mixture. This works a little differently than models and could probably draw some similarities to a static site generator like Jekyll. The data is stored in single files within a particular directory structure. Meta data added to these files combined with the content can then be called into your templates. This is a really powerful function and enables you to create a very dynamic site without needing a database.

Deploy

The talk of collections leads us right into the deployment of the site we’ve been working on. Collections are useful, but not really all that useful when working locally. But not to worry, Mixture can help us deploy along with all the other things we’ve already discussed.

Most simply, you can export your site as static HTML. So no matter how complicated your Liquid templates and models and collections become you can convert everything to static, individual HTML pages. You could, rather easily, then FTP those files to your web server and call it a day. But we can take this further.

It’s possible to make a FTP connection via the Mixture app so that you can deploy directly to your server. This feature is currently in beta, but appears to work as you’d hope thus cutting out one more thing you need to worry about in your development process. It is also possible to publish straight to Github Pages in a similar process as well.

Mixture also has its own hosting service. Publishing to a Mixture sub-domain is quite literally as easy has pressing a button. It is also possible to route your own domain to their servers as well. So you could rather easily manage an entire site with Mixture. Deployed projects can also be password protected which could come in really handy when working with clients. Maybe you want to show only certain people what you’re working on and not the whole world.

Mixture tools

Mixture tools

Another feature I should mention here is that it’s very simple to connect your Mixture project to BrowserStack for some really quick browser testing in the cloud. Again, it’s another one of those “with the click of a button” type of things. As with just about every feature of this app, I’m continually impressed with just how easy everything has been made.

Final Thoughts

As I mentioned several times, not everything that Mixture does is revolutionary. What is different is that it packages up so many useful functions for web developers and makes them work with almost no effort at all. Sure you can certainly set up build scripts using something like Grunt to handle most of what Mixture can do, but there’s certainly a learning curve to something like that and there would still be some things missing. Mixture has simplified my entire development process. Powerful features in a beautiful package all the while remaining quite configurable should you want to adjust how things work. It’s a great balance.

I’ve gotten a ton of use from Mixture in a couple different scenarios. First is the standard project. I’m building a website for a client. The second is prototyping. You can have a functioning site deployed to a server in less than ten minutes easily. Take advantage of a boilerplate or two and you can explore your ideas extremely quick. It’s a powerful tool to have at your finger tips when that random idea strikes.

All in all I really can’t say enough good things about Mixture. We went through a lot of stuff in not a ton of detail and I’m certain I missed a feature or two. This app is jam-packed with useful tools for the front-end developer so if you’re in this industry I highly recommend you give Mixture a try.

Jumpstarting a Design Community

Understand Your Compensation

Designer Monoculture

The State of Design Leadership

The Science of Product Design

Interview with Michael Flarup: Co-Founder and Lead Designer at Robocat

The Importance of Design Conventions