Craft CMS

I love Craft CMS. Let’s just get that out of the way. It has changed the way I build websites. You won’t have a hard time finding articles written by others about what Craft is and why they like it. Hopefully I can contribute a unique take.

My History with Craft #

I built my first Craft site in 2013, when the CMS was at version 1.2. As a point of reference, Craft didn’t ship with Matrix – one of its headline features – until version 1.3 which was released later that year. It was still young. But the bones were definitely there. Fundamentally, the Craft I started out with in 2013 is still in many ways unchanged, despite continuous improvements over the years. That speaks volumes about the biggest reason for Craft’s success: it is conceptually simple, yet scales very, very well to tackle problems of increasing complexity.

In June of 2014 I started work on designing and building a brand new website for One Design Company in Chicago, and of course convinced them to try Craft CMS. Towards the middle of that project, I gave a presentation on Craft CMS to the entire One Design development team, which primarily used Wordpress at the time. And that was that. Pretty quickly the studio started using Craft for the majority of its web projects, starting with the launch of the new One Design website and followed closely by a brand-new site for the 4th season of Layer Tennis.

Since then, I’ve been involved in the development of 14 different websites built on Craft, from small portfolio sites up to 100+ page behemoths. The results are always the same: the client is happy and the developers are happy.

So what makes Craft special? #

I’m glad you asked. Rather than just rehash the feature checklist you’ll find on the Craft site and in so many blog posts, I’m going to dive into the aspects of Craft that have the greatest impact on the most important resource of all – happiness.

Simple but powerful #

The toolkit Craft provides for building sites is conceptually incredibly simple: you have fields, sections, entries, and templates. There are some additional elements there, but building sites with Craft is mostly about those basic building blocks. Just like Legos, those pieces fit together in just the right way that you can build something simple really, really easily, and you can build something really complex without that much more difficulty.

This matters in a lot of ways. First, it means that a Craft site doesn’t have a bunch of built-in garbage that you have to clear out of the way (I’m looking at you, Wordpress). The admin control panel for every Craft site feels like it was built specifically for that site, because it was built specifically for that site. From the information architecture down to the navigation, Craft makes it super easy to build a content editing experience that is tailored specifically to a given project.

Conceptual simplicity also has a huge impact on team productivity, because once someone understands the basics of Craft development they can jump into any Craft project and know where to start.

Twig #

Craft templates require the use of Twig. I emphasize require because it stands in stark contrast to the way many CMS templating systems work, where you’re allowed to write raw PHP anywhere you want inside of your template. This isn’t possible in Craft. If you want to write PHP, you need to create a plugin that includes your PHP code and exposes that code as a variable to Twig. This means Twig had better be a nearly perfect templating system, or things could get frustrating. And it is. Twig is an absolute delight to work with. It’s simple, readable, and is able to scale remarkably well to tackle complex jobs. There are certainly things you shouldn’t be trying to accomplish in Twig, but there aren’t many things you can’t accomplish in it.

It makes you a better developer #

Craft is built on the Yii Framework, a robust, open-source PHP framework that has been around since 2008. This means that once you start getting into Craft plugin development, the process is incredibly well organized and painless. And because many of the Craft APIs are just a thin layer on top of Yii, you benefit from Yii’s documentation and broader community of developers. This is especially true of the upcoming release of Craft 3, where refactoring brings the Craft foundation even more in line with Yii development best practices.

By enforcing the exclusive use of Twig for templating, Craft also strongly encourages you to cleanly separate your concerns, which helps both novice and experienced developers follow the “happy path” towards a maintainable codebase.

Additionally, Craft is moving in the direction of adopting many other industry best practices, such as the exclusive use of Composer for plugin installation (and installation of Craft itself) and a more standard approach to things like environment variables.

In short, when you’re building sites the Craft way, you’re probably also building them the right way, and over time that makes you a better developer.

The ecosystem #

While Craft is still relatively young compared to other content management systems, it has developed an extremely active community. This community – including support, developers, and plugins – is possibly one of the strongest selling points of Craft.

The support provided by Pixel & Tonic – the developers of Craft CMS – sets a new standard for what customer support should look like. In the early days of Craft, when things were still a bit rough around the edges, I would send off a support email and routinely hear back within a half hour, sometimes faster. Remarkably, as the Craft user base has grown, P&T have managed to keep up with support, responding quickly and considerately to direct support requests, and actively participating in the Craft CMS StackExchange, which is able to provide answers for almost any Craft/Twig related question I have.

Beyond support from the P&T team and StackExchange, the Craft Slack is extremely active and full of friendly, helpful folks.

When it comes to Craft plugins and developers, it’s all about quality over quantity (though even the quantity is steadily increasing). Craft seems to attract talented, ambitious developers with a high attention to detail, and those are definitely reflected in the plugins available for the platform. Much of the time, if a feature you need isn’t available directly through Craft, you’ll be able to find a high-quality plugin to help. And if not, it’s very easy to build a custom plugin to get the job done.

Intangibles #

Even more important than anything listed above, using Craft just feels right. The platform seems to have picked exactly the right technologies, conceptual foundation, and implementation to create something that is more than the sum of its parts. Additionally, Pixel & Tonic has an incredibly high attention-to-detail that is evident in every component of Craft. The design and UX experience of the control panel itself is polished, fast, and pleasant to use, and this level of quality trickles down to every other aspect of the ecosystem, from the documentation down to the community and plugins surrounding it. It’s immediately apparent to every client who uses Craft for the first time that this is something different from what they’ve been subjected to in the past. Something better.

Give it a shot #

If you’re business looking for a solid platform to build your new site on, or you’re a developer who isn’t 100% happy with their current CMS, I strongly encourage you to try Craft CMS.

Want to learn more about Craft or chat about your next project? Get in touch.

AnimPanel 2.0

The first version of AnimPanel was built almost entirely in the car on a five hour drive from Chicago back to Iowa. Having used a cobbled together prototype on many projects over the years, I knew roughly what it need to do, but I didn’t put a lot of thought into the architecture of the code or the user experience.

Many months later, with longer, more intense code-driven animation projects coming up, the shortcomings of the original AnimPanel became painfully clear. In order to make my time on these projects as productive as possible (and to satisfy my shame over some of the issues) I decided to spend some time building an entirely new version of AnimPanel – the version I should’ve built the first time around.

Goals for the project #

  • Completely rethink the UX, making on-the-fly changes to speed, play range, and current time much easier and more intuitive.
  • Condense the
  • Implement a full suite of keyboard shortcuts, making the most common previewing tasks more immediate.
  • Rewrite the code base to reduce file size, and eliminate any heavy dependencies on third-party libraries.

Many of the UX solutions I landed on were borrowed from the wonderful mojs-player, which does just about everything right (but doesn’t support GSAP).

Having battle-tested AnimPanel 2.0 on several large projects, I’m very happy with how things have matured, and can’t imagine building complex animations without it.

See the Pen AnimPanel Demo by cmalven (@cmalven) on CodePen.

Getting started with AnimPanel 2.0 #

AnimPanel can be installed via npm…

npm install anim-panel --save

…or by linking to the CDN in your HTML

<script src="https://unpkg.com/anim-panel/anim_panel.js"></script>
AnimPanel 2.0 on Github

Visual Cheatsheet: CSS Grid Layout

CSS Grid Layout is going to be here sooner than you think. It’s currently available in the latest Chrome, Firefox, and Safari, and when IE support finally lands, it will be an indispensable new tool. Grid Layout is similar to Flexbox in a lot of ways, so much so that it can be a bit confusing why you would use one over the other.

The biggest difference between Flexbox and Grid Layout is that Flexbox really only tackles a single dimension (either a row or a column) well, while Grid Layout can arrange elements in both rows and columns in very sophisticated ways.

After building my Flexbox Visual Cheatsheet, I knew how useful that process was in helping me understand the available properties, so I went ahead and created a CSS Grid Layout Visual Cheatsheet as well. Once again, it really helped me wrap my mind around the options.

Note: Make sure you have the latest version of a browser that supports CSS Grid Layout.

Visual Cheatsheet for CSS Grid Layout

Visual Cheatsheet: Flexbox

It took me awhile to get comfortable with Flexbox. It’s very powerful, and can make things easy that are difficult or impossible to accomplish otherwise, but the number of options can be overwhelming, and it works entirely unlike anything else in CSS.

While resources like the CSS Tricks A Complete Guide to Flexbox are indispensable for learning the details of how things work, there’s still too much going on to serve as a quick reference.

I wanted something that was as visually condensed as possible, and easy to scan visually. I need to see what elements styled using each properly will look like.

So I created this Visual Cheatsheet for Flexbox. I find myself using it all the time, and it’s helped me become truly comfortable with Flexbox syntax for the first time. Let me know if you find it useful.

Visual Cheatsheet for Flexbox