Are you tired of configuring your app setup for compiling, transpiling, and bundling? Would you ever want to upload your code to one place and then click a few buttons to lint, build, debug, and optimize your code?
If you answered yes, then CodeKit may be right for you. But before we start doing cartwheels, let’s take a look at a few cases where this app will work and maybe not work for you.
CodeKit is a Mac app (decidedly not available on the Mac App store) which uses a pretty intuitive GUI interface for task management. It does this through a build process that minifies the code, optimizes resources, and compiles languages.
After you download the trial version, you will see this splash screen upon opening it on your Mac:
You can decide to watch the video tutorials, but of course I went right in.
If you want to watch the tutorials before downloading, feel free to check out the tutorials here.
How does this work?
CodeKit doesn’t use any special or proprietary software to compile and build. It is an alternative to the command line. This leads me to a soft first use case for this app: If you want to develop a website without using the command line to initiate and install modules, CodeKit is an interface that allows you to drag and drop your project folder to start the process:
Once you drop in the project folder, you will be taken to a screen with your project files and some information (you can add the folder as a project or a framework):
This initial dashboard tells me that this app is definitely intended for coders who want to get past configuration and also communicate what is in their project without having to dive into an editor and touch individual files. There is also a Build Project button at the lower right hand side of the dashboard, and it is here where CodeKit is pretty solid. Take note of the preview icon next to the green indicator (which should be yellow before the build). You can only preview after you build the project.
Once the build is complete, you can check the build log by clicking on the second icon on the left below the profile pic and the files icon. If everything built without errors, you should see nothing but green dots, which feels good. It also is good to see the log to be sure that all of your assets built correctly. When there are errors, there are clear red marks on the code with clear error messages, making it easier to understand and debug.
After checking the logs, I can go ahead and click on that preview icon mentioned earlier to check out the site. In this case, let’s look at the example site I’m featuring here:
It’s hard to see from this pic, but notice the server address. This is set by CodeKit with a few options: Bonjour, Non-Bonjour (for non-Mac devices), and the local machine. You can check out these addresses by clicking on the green indicator next to the preview icon on the CodeKit dashboard.
Let’s look at performance with this simple HTML/CSS site as compared to opening the site with the command line:
Command line performance:
There is a clear difference in performance. CodeKit shines with rendering and painting time, but the command line launch allowed for far faster load and scripting times. There is a minor difference in overall range in favor of the command line launch. Again, this is a comparison that resulted in minor differences, which tells me that the CodeKit app has a very clear purpose.
When to use CodeKit
I could go into a lot more detail about what CodeKit can do, including how it optimizes image files, code minification, and its main function, language compiling. The core of considering using CodeKit is dependent on what stage of development you are in. If you consider yourself a beginner that hasn’t touched the command line, and you don’t want to, then CodeKit is a great option to give you mental space to get right into code. There is no configuration necessary and you can adjust your settings in the UI directly, which developers still learning at a very early stage can find very useful.
CodeKit is available via a trial download and can be purchased for $34 to enable full functionality.