Blog

Back in January, I posted on LinkedIn about using AI to build a documentation site for Opine. This prompted Adam Stokoviak to reach out about joining him on the Changelog & Friends podcast to talk about AI and the modern frontend. Adam and I have been friends for a very long time now, having collaborated on The Sass Way together. On the show we discussed how I'm integrating AI into my workflow as a designer. We also talked about Framer and Figma, Next.js, and other topics.

I’m actually not sure when I first noticed this. Perhaps it goes back to my teen years when I helped with the construction of our church building. Or, perhaps it was before that when I worked at a Christian camp. But there are some activites that seem to make everything else more productive. I call these sweeping activities. Sweeping activities make it easy to get work done.

As a teenager I learned to program and it wasn't long before I had a directory filled with unfinished projects. Working on a large variety of projects is a great thing when you are first learning a language or framework. It helps you begin to recocognize patterns. Patterns that end up being useful when you start going deep on larger projects.

Since launching Zest Icons last year it was always my dream to have a free version of the set. I launched Zest with Zest Social, which was free and contains a handful of Social icons. But Zest Social wasn’t very comprehensive. Now that Zest Pro has over 600 icons I’m ready to launch a larger set. Today, I’m happy to announce that I’m open sourcing 200 Zest Icons in a new set called Zest Free.

I build web applications for a living. And while I love working on software, there is something temporary about the work. Very little of what I make lasts for any length of time. The pace that software evolves is so rapid that 10 years out and what remains is either so dated that I wouldn’t put it in my portfolio or it has evolved so much that little remains from the original design.

Not quite as glamorous as The Matrix may make it appear, the command prompt is still an essential part of the modern web design workflow. Whether you’re seeking to transform your CSS with Sass, itching to try out Webpack or Typescript, or thinking about writing a program in JavaScript with Node, you’ll need to understand the command prompt.

I like to describe Zest as a modern icon set that has been meticulously handcrafted for web and mobile. What makes Zest exceptional is the attention to detail. Zest was created with bold and simple aesthetic. It purposefully emulates the friendly styles of applications like Whimsical and the new Jira. The lines are thick so that they stand out. The geometry is rounded and exaggerated. Lined icons instead of solid shapes give the set a remarkable consistency.

Learn how to use Sass color functions to calculate backwards compatible colors for browsers that don't support alpha transparency and wrap up this functionality in a couple of handy mixins.

Learn how to modularize your typography to create solid foundation for your projects. Use multiple classes and the @extend directive to create a reusable set of typographical styles.

The more you write your own stylesheets, the more you begin to value using good names in your code. Naming is by far one of the most difficult and debated activities of a developer. To many, naming is an art form.

If avoiding nested selectors in favor of a flatter class-based CSS scares you, maybe this example will help you embrace some of the principles of modular CSS.

We've written before about the dangers of nesting your CSS selectors too deeply. The Inception Rule is a good one for getting you to avoid some mangled CSS selectors. But there's actually a lot of benefit to taking this concept a couple of steps farther. What happens when you avoid nesting for almost all of your major selectors?

One of the coolest features of crafting CSS with Sass is that you can build out a file structure that puts all your components in their right place. BUT the question is ... where is the right place? Is there a standard way to structure your Sass files?

Since the creation of Sass, it has been plagued by many levels of controversy. It billed itself as "a better CSS" and added brand new features unheard of to CSS authors such as variables, nesting and mixins. Sass also introduced an entirely different indentation-oriented syntax and a brand new perspective on how to author CSS. Then the SCSS syntax (Sassy CSS) was introduced ...

If you've been following my Twitter stream during the last month, you know that I've been hard at work on a project callded Serve. Serve is an open source project that makes it easy to build websites with HTML, ERB, Haml + Sass.

Since Adam McCrea has introduced his solution for simplifying HTML mockups over on the EdgeCase blog, I thought I would take the time to reintroduce my own: Serve.

Based on my HAML server for web designers article, I've created a small gem "serve" which makes it extremely easy for a Web Designer to get up and running with Haml and Sass.

I have a script named serve in my bin directory that let's me quickly startup a Webrick server in any directory. This is handy for serving HTML mockups or other files. Today, updated it to work with.