Unexpected Learnings From Coding Artwork Every Day For Five Years

For more than five years I have been creating one digital artwork a day, using code to generate patterns, shapes, and animations. My daily art project has helped me to explore my artistic style and learn the practice of coding in a playful way. When I started the project it was a challenge to come up with something each day and publish it online. Now...

19h

Simplify Your Stack With A Custom-Made Static Site Generator

With the advent of the Jamstack movement, statically-served sites have become all the rage again. Most developers serving static HTML aren’t authoring native HTML. To have a solid developer experience, we often turn to tools called Static Site Generators (SSG). These tools come with many features that make authoring large-scale static sites pleasant....

1d

A CSS Grid Framework For Shopify Collection Pages

CSS Grid has become an increasingly popular technique for applying a layout to pages amongst other CSS frameworks. Developers can take advantage of this system to reduce complexity and define clear style rules. As explained in my Shopify blog post on getting started with a CSS grid layout, a CSS Grid framework can be easily implemented on Shopify themes...

2d

Smashing Podcast Episode 25 With Anthony Campolo: What Is RedwoodJS?

We’re talking about RedwoodJS. What exactly does it mean to be a full-stack Jamstack framework? I spoke to community champion Anthony Campolo to find out. Show Notes RedwoodJS Anthony on Twitter Anthony’s article series A First Look at RedwoodJS Weekly Update “An Introduction To Running Lighthouse Programmatically”written by Katy Bowman...

3d

How To Build Rapport With Your Web Design Clients

Working as a freelancer in the creative space is rife with obstacles. Some we can see coming, others we can’t. One of the challenges that many freelance web designers face in their first few years is managing client relationships. We’ve all heard about — and experienced — the horrors of clients running amok on our work, turning a piece of thoughtfully-considered...

3d

SmashingConfs, Inspiring Talks And Birthday Cake

Do you know when the very first article got published on Smashing Magazine? Well, it doesn’t take long to research and find out: it was back in September ’06. Since then, the web has obviously changed a lot, but there’s one thing that has always remained true for us: we care about quality content. We never wanted to be a big publishing house: Our team...

6d

Comparing Styling Methods In Next.js

As you might be aware, there are many differing perspectives on CSS-in-JS, and we all have an opinion of the topic in one way or the other that might be quite different from the opinions of framework authors. Next.js is one of the recommended tool-chains when creating a new React app. Tools like Next have a simple goal of abstracting away commonly...

1w

Advanced GraphQL Usage In Gatsby Websites

Before the release of GraphQL in 2015, Representational State Transfer (REST) was the main way to interface with an API. The introduction of GraphQL was therefore a major change in software development. As a modern static site generator, Gatsby leverages GraphQL to provide a concise methodology for bringing in and manipulating data into the framework....

2w

Designing For Attention

We face many competing interests for users’ time and attention. If we factor in perceptions of dwindling human attention spans, we might speculate capturing and holding users’ attention is based on luck as much as sound design. However, we can incorporate meaningful tactics into our design to ensure we grab users’ attention. This is critical, we won’t...

2w

Animating React Components With GreenSock

During the early days of the World Wide Web, things were rather static and boring. Webpages were mostly based on graphic design and layouts from the print world until animations were introduced. Animation can engage and hold people’s attention longer than a static web page and communicates an idea or concept more clearly and effectively. However,...

2w