Design-in-album-artworks.png

I never really owned a lot of CDs and cassettes when I was younger, but I do remember when I bought myself an iPod classic back in 2009, and every time I listened to any album, I would keep staring at the artwork. For me, it was this fusion of visual and audio that elevated my listening experience. Getting lost in this sensory experience was such a privilege.

Visual imagery is an extremely powerful mode of communication. When used in the context of music, it has the ability to capture the essence and identity of the music that it encapsulates. 

As a young adult, I didn’t bother paying any close attention to the craftsmanship that goes into creating album art. Now, as a grown-up and a full-time illustrator, I appreciate all the tiny details and the effort it takes to produce quality artwork because I understand the processes much better.

And then of course there’s the fact that album art is hugely important. Album art through the years has reflected the cultural, musical, and technological influences of each era. Some iconic ones have become cultural symbols and are celebrated even today.

In this post, I’ve curated a collection of iconic album covers as well as some personal favourites. While there are countless others I would have loved to include, I hope this compilation summarizes the amazing work and effort put in by these fabulous designers.

Andy Warhol - Velvet Underground & Nico, Velvet Underground (1967)

Andy Warhol is one of the most iconic designers. He experimented with a variety of mediums, including film, photography, and sculpture. His work was very provocative and had abundant sexual references, which sparked some controversies.

This album cover features a very provocative banana sticker with a message that said — “peel slowly and see”. The sticker revealed a pink banana underneath.

The design is simple, bold, and so striking! It also epitomizes the distinct pop art style that Andy Warhol was so famous for. 

While doing my research, I found that the production of these stickers was very challenging. The initial stickers were not easily peel-able, which interfered with the interactive experience. The stickers also had to be manually stuck onto the album cover which resulted in misalignment and added inconsistencies to the artwork. Subsequently, the band released the album with a perforated tab on the stickers to aid listeners with the experience.

This logo is so timeless and simple that it can be so easily adapted to any medium. It became a symbol of rock-n-roll and captured the essence of the band’s music perfectly. It is definitely the most recognizable symbol in music history. 

Mick Jagger wanted The Rolling Stones to have a logo and he reached out to John Pasche who was a student at Royal College of Arts in London. Jagger mentioned Indian goddess Kali as a source of inspiration for her powerful qualities. Ultimately, John designed this provocative, rebellious motif — juicy red lips with a tongue sticking out. 

Fun fact: Pasche was paid £50 in 1970 for his design and eventually £26,000 in 1984. Given how symbolic the logo became, I think that was barely enough!

Andy Warhol - Sticky Fingers, The Rolling Stones (1971)

 features a close-up, black-and-white photo of a man in jeans. It also came with an actual working zipper attached! I think that’s pretty awesome, if only because it makes the whole experience so fun and interactive! Of course, this artwork was noted for its suggestive imagery and sexual undertones.

As with ‘Velvet Underground & Nico”, this album too faced production issues. They had to be very careful and precise to ensure that the zipper functioned properly and did not damage the vinyl. The weight of the vinyl album increased and they faced issues with packaging and shipping.

Despite the logistical difficulties, I truly appreciate Warhol’s out-of-the-box concept and the band’s willingness to go along with it.

Storm Thorgerson - Dark Side of the Moon, Pink Floyd (1971)

This one is timeless. The iconic image of the prism has become so closely associated with the album that it’s instantly recognisable. I’m not going to lie, I never took an interest in classic rock, so I had not actually listened to the album until I decided to write this post. I totally understand what the hype is about now. The album is magic and so is the album artwork!

The inspiration for this artwork came when Storm was browsing through a physics textbook. The artwork was not made with any specific deep meaning in mind, but fans speculated wildly.

Peter Saville - Unknown Pleasure, Joy Division (1979)

Peter is a renowned graphic designer and art director. Back in the day, he used to collaborate with Factory Records, an independent music label. He worked on a lot of album covers and posters, most notably for Joy Division’s Unknown Pleasure.

Jamie Hewlett & Damon Albarn - Gorillaz (1998)

I mean, if I don’t talk about the legendary work Jamie and Damon conceptualized and created for Gorillaz, what even is the point of all this?

Jamie is an illustrator, artist, and designer who created a very popular comic series — Tank Girl. He’s worked with a number of musicians like Blur, Massive Attack, and Chemical Brothers.

While watching MTV one day, Jamie and Damon felt that all the content was very boring and decided to create a virtual band

They created four members - Murdoc (bass and drum machine), 2D (vocals, synths), Noodle (lead guitar, synths), and Russel (drums). Also, each of their albums has a super interesting storyline (y’all should definitely listen to and read up about it).

They’ve gone on to create 2d and 3d characters, combined animation with live action, created immersive and interactive experiences on their website, and 

My favourite artwork is the one on Demon Days. It features all four characters in four different frames and is instantly recognisable. The album tells a story where all characters confront their inner demons on a journey through the night.

Demon Days is so good, I remember when I was absolutely ripping this album on my speakers 24x7. Good times!

Robert Del Naja, Tom Hingston, Nick Knight - Mezzanine, Massive Attack (1998)

Mezzanine was my first introduction to Massive Attack and I remember feeling strange emotions because this sound was something very new to me back then. Even then, I found myself going back to this album over and over again because it was so beautiful. 

Robert (member of Massive Attack) used to have vivid dreams about arachnids which led to this sleeve design. It was shot by Nick Knight - a fashion photographer, at Natural History Museum in London, and art directed by Tom.

The album cover features a composite image of a stag beetle. The image is absolutely stunning and impeccable — and it compliments the album beautifully. I love that it’s shot in black-and-white and because of the contrast, one can even notice the tiny specks of detail on the body of the beetle.

David Carson - The Fragile, Nine Inch Nails (1999)

David has a background in sociology and was a professional skateboarder before he became a graphic designer. His work is very distinct and experimental. He was a rebel — he broke all the rules of typography to create avant-garde text layouts, and in general, his work adhered to no norms. The work he did for Ray Gun magazine is phenomenal, featuring eclectic typography, and unconventional layouts.

The album cover was originally supposed to be a photograph of a waterfall in Iceland, but the photograph didn’t develop properly. The deliberate decision to embrace the imperfection is what makes this album cover so interesting. I also really like the way the band logo is cut in half, one can get just a tiny peek at it. 

Hideyuki Katsumata - Machine Dream, Little Dragon (2009)

Hideyuki is a self-taught illustrator, graphic artist, and muralist. His work has a blend of Japanese traditional and manga styles. His illustrations are very expressive and rooted in fantasy. 

More than a decade ago, he worked on an animated music video for Little Dragon. The band got in touch with him via his MySpace page. Later he collaborated with them and illustrated their second studio album Machine Dream, which is one of my favourite Little Dragon albums.

The album cover has abstract fantasy elements and a lot of detail — tiny planets, alien-like creatures, a fetus, a snail-like creature… The more time you spend staring at it, the more detail you absorb and the more meaning you’ll perceive. The use of colours reminds me of the colours used in beautiful sand paintings done by Tibetan monks.

Matthew Cooper - AM, Arctic Monkeys (2013)

Matthew works as a freelance illustrator and a graphic designer. He’s worked with a bunch of musicians like Caribou, Floating Points, Four Tet, Arctic Monkeys. His work uses a lot of mixed media techniques and photography.

I first saw this design on the Arctic Monkeys video 

 and it is so minimal but so dynamic! They managed to create an entire animated video based on just this pure, minimal graphic. If you inspect closely, the design even has a hidden ‘AM’ in it.

And of course, this album was on repeat when it was released. The music is so damn catchy!

Bendik Kaltenborn - It’s Album Time, Todd Terje (2013)

Bendik is an illustrator and is one of my favourites. Apart from illustrating the artwork for It’s Album Time, he’s worked with Todd Terje on a bunch of gig posters as well.

His use of playful illustrations, hand-drawn typography and bold colours make for a very funky style of work. This characteristic of his work can even be seen on Todd Terje’s album cover. 

The whimsical style of the artwork along with the funky synth sounds in the album form such a cool synergy.

This silly sense of humor can also be seen in the animated music video Bendik worked on for 

Todd Terje and Bendik Kaltenborn are literally a match made in heaven! Do yourself a favour and go check out the album.

Jesse Kanda uses digital manipulation, collage techniques and sculptures to create very grotesque and surreal visuals. He has collaborated with musicians like Bjork, Arca, and FKA Twigs.

For this album, close-up photos of her head were shot which were then sculpted in 3d and manipulated. The resulting image is a stunning blend of aesthetics, blurring the line between reality and fantasy.

FKA Twigs’ music is very avant-garde, her vocals feel minimalist and yet very intricately layered. As is the case with her music videos, they’re eye-catching, aesthetically pleasing and have a blend of fashion and beautiful choreography.

The album cover created by Jesse Kanda perfectly captures the essence of FKA Twigs' artistic identity.

Ricardo Cavolo - 99.9%, Kaytranada (2016)

Ricardo Cavolo is an illustrator, graphic designer, muralist and tattoo artist. His work is heavily influenced by traditional folk art, using bold colours, and symbolic imagery. Often in his illustrations, he draws his characters with multiple sets of eyes, which is symbolic of wisdom.

Music feat. Design — a look at the greatest album covers of all time

creating space.jpg

Sometime in the late 2000s, I stumbled upon a plastic bag full of my dad’s work stuff and felt immediately humbled.

My dad was a graphic designer way back in the 80s and 90s, when computing technology was in its infancy and designers were simply artists with a few tricks up their sleeves. I found layout wireframes with meticulously painted block text, designs with photorealistic paintings of physical products, prototypes assembled on yellowing paper with halftone backgrounds pasted on, and fonts rendered painstakingly by hand. Also included in the packet was an actual physical manual for Photoshop 1.something :)

You just couldn’t design in the 90s if you couldn’t also art. In my own work today as a UI & UX Designer, though, there is precious little space for that.

In design, process is holy. And for good reason. 
Design begins at chaos. Over time, we’ve created maps and methods that allow us to unravel that chaos well and easily. We’ve developed systems that let us move fast, ways of arriving at decisions that minimise the risk of failure, and objective measures of success. UX is all-important, and research is (rightly) valued.

But as we move collectively from instinct to information, from exploration to research, from art and craft to systems, I feel a twinge of something I can only describe as… 

 rooted in it. And in some primitive, reflexive part of your mind, the two things remain deeply intertwined.

For every 10 designers I interview, at least 7 tell me they were originally drawn to the creative aspect of design. Most of us made art when we were younger. We

enjoy designing stellar UI — but so few of us like to talk about it!

And why would we? Conversations around product design are heavily skewed towards highlighting the value of UX and process, of function over form. By contrast, UI discussions tend to be limited in their point of view, dealing mostly with 

or with that insatiable beast — design systems.

In my team at work today, we have product designers who are eye-deep in Lego, who 3D print and paint their own miniatures, build terrain, mod Hotwheels, dance, compose music, write, draw, paint, and make comics. In an ongoing D&D campaign that two of us have been part of since 2020, I live a rich parallel life as an elf-wizard with an obsession for cleanliness.

What do these things have in common? They involve the imagination. They are all forms of play.

Design speaks to the imagination. That’s why it draws in people who — in my limited and deeply personal experience — tend to be curious and creative, childlike in some way. So as our industry evolves, and processes and practices become ever more standardised, what happens to everything that runs shallower, or more deep? What happens to that craving we used to have for seeking art and beauty—creating it, appreciating it? What happens to gut instinct? 

Don’t get me wrong — there are many, many products out there that are stellar examples of both the science and the craft of design. What concerns me is simply that the scales are so heavily skewed toward the importance of the former. The science is essential, of course. Without it, we’d be shooting in the dark. But the craft is exquisite and difficult to master. It is also a source of such delight. 

As practitioners of both, we know this already. All I ask is that we express it consciously.

of design? After a lot of mulling it over, here’s everything I can think of.

We spend most of our adult lives solving problems. If you’re lucky enough to have a job that offers you some chance of play, well, I hope you take it, ace it, and flaunt it in full glory.

Creating space for the craft of design

playbook-for-remote-work-min.webp

Have you ever thought to yourself, "If I can work from home, why can't I work from anywhere?" Well, you certainly can.

I've logged into Slack from as many as 12 different cities in the last year. I've spent the last two months working in Kashmir and Ladakh, where the internet is always spotty and power outages are common. I've gone exploring, mountain climbing, cafe-hopping. I’ve swapped stories with strangers and basically had the time of my life. 

All of this happened while I was working full-time.

Is it simple to work from home and travel? Not at all. Being on the road and away from home is incredible—but it is not without its difficulties, especially when you also have a job to keep. Here's how I got started working remotely while on the road.

I’m a traveler as well as a trekking enthusiast. I've always wanted to do the Kashmir Great Lakes Trek, but never felt fit enough for it. I don't go to the gym, I don’t work out regularly, or have a yoga habit. 

For a while, I procrastinated, trying and failing to put my fitness plans into action. Until finally, I reached a tipping point. I wanted to do the trek, and I was 

 not into exercise for the sake of exercise. 

—I finally thought to myself. I'm going to do this whether I'm in shape or not.

I enjoy being challenged, and when I am, I’m more likely to succeed. So once I’d made up my mind, there was no looking back. I did my research and signed up for the trek. Simultaneously, I planned to continue to travel after the trek, although I had no idea where I was headed, or how.

Before I jump into the details, note that I have a job that makes my lifestyle possible! I work for a remote company (real remote, not just COVID remote) with flexible hours, which allows me to work flexibly and create my own schedule. Companies are rapidly embracing remote work in a post-pandemic world, and coming by a remote job is easier now than ever before.

The first thing I did was inform my team that I needed time off for a trek and that I’d be traveling for a couple of months after it. 

Next, I tried to get a true picture of life in Kashmir. I tend to go with the flow, but as a remote worker, I need to be aware of certain things, such as—

I love traveling, but I also love my job! I have a basic remote office kit that I take along on every trip to make sure my work doesn’t suffer. Here’s what I include in it—

I enjoy going on adventures and am well aware of how simple it is to become distracted. Since I've been working remotely for a few months now, I already anticipate certain roadblocks, such as— 

I overcome these distractions by giving in to them. I try to begin every trip with a few days off and a plan. For instance, I started my stint in Kashmir with a few days off for the Great Lakes trek. This trek marked the beginning of my workation experience. It helped me relax and get back to work with renewed energy and a clear mind.

How to enjoy traveling despite having to work

I can't drop the ball at work every time I travel. So over the past year, I’ve developed certain habits and systems to make sure I’m balancing both well. 

It's difficult to work remotely when on the road.


It appears straightforward if you’ve never tried it before, but in reality, it’s a lot harder. It's undeniably challenging and thrillingly thrilling. For those who have adopted this way of life, there is no turning back!

Working from home can easily become a remote work experience at an Airbnb, hotel, RV, trailer, or homestay. Investigate these new options. And if you’ve ever found yourself Googling 

... Well, pinch yourself! You're going to be able to do it :)

My playbook for remote work

getting-started-with-combine-in-swift-min.webp

The Combine Framework is huge and as such, impossible to go over in a single article. For the sake of brevity, I’ll split this into a series of posts. Consider this first one to be just an introduction to Combine — here, you’ll learn how Publishers & Subscribers work in Combine, create subscriptions for arrays, Notification Center, and finally how to create a custom publisher.

Before we dive in, make sure you can follow along! You’ll need access to:

Combine was introduced as a new framework by Apple at WWDC-2019. It provides a declarative Swift API for processing values over time. The framework can be compared to frameworks like 

 and ReactiveSwift (formally known as ReactiveCocoa).

It allows you to write functional reactive code by providing a declarative Swift API. Functional Reactive Programming (FRP) languages allow you to process values over time. You can consider examples of these kinds of values — network responses, user interface events, other types of asynchronous data.

What is FRP (Functional Reactive Programming)?

In the FRP context, data flows from one place to another automatically through subscriptions. It uses the building blocks of Functional Programming, like the ability to map one data flow into another. FRP is very useful when data changes over time.

As an example, if you have a String variable and you want to update the text of a 

FRP is also very useful in asynchronous programming and hence in UI rendering, which is based on the asynchronous response data. You generally get a response back and pass it in a completion closure. In FRP, the method you call to make a request would return a publisher that will publish a result once the request is finished. What’s the benefit here? You get rid of a heavily nested tree of completion closures.

A Publisher exposes values (that can change) on which a subscriber subscribes to receive all those updates. If you relate them to 

A Combine publisher is an object that sends values to its subscribers over time. Sometimes this is a single value, and other times a publisher can transmit multiple values or no values at all.

The Combine Framework adds a publisher property to an Array.We can use this property to turn an array of values into a publisher that will publish all values in the array to the subscribers of the publisher.

[1, 2, 3]
        .publisher
        .sink(receiveCompletion: { completion in
            switch completion {
            case .failure(let error):
                print("Something went wrong: \(error)")
            case .finished:
                print("Received Completion")
            }
        }, receiveValue: { value in
            print("Received value \(value)")
        })


The Foundation Framework has extensions to work with Combine. You are already familiar with some publishers.

Let’s create a new publisher for a new-event notification.

extension Notification.Name {
    static let newEvent = Notification.Name("new_event")
}
 
struct Event {
    let title: String
    let scheduledOn: Date
}
 
let eventPublisher = NotificationCenter.Publisher(center: .default, name: .newEvent, object: nil)


This publisher will listen for incoming notifications for the newEvent notification name. Now we need a subscriber.

let theEventTitleLabel = UILabel()

let newEventLabelSubscriber = Subscribers.Assign(object: theEventTitleLabel, keyPath: \.text)
eventPublisher.subscribe(newEventLabelSubscriber)


The above code still has some errors (when you build), like:

The text property of the label requires receiving a 

 value while the stream publishes a Notification. Therefore, we need to use an operator:

. Using this operator, we can change the output value from a Notification to the required 

let eventPublisher = NotificationCenter.Publisher(center: .default, name: .newEvent, object: nil)
    .map { (notification) -> String? in
      return (notification.object as? Event)?.title ?? ""
    }


Now, the compilation error should go away.

import UIKit
import Combine

extension Notification.Name {
    static let newEvent = Notification.Name("new_event")
}

struct Event {
    let title: String
    let scheduledOn: Date
}

let eventPublisher = NotificationCenter.Publisher(center: .default, name: .newEvent, object: nil)
    .map { (notification) -> String? in
        return (notification.object as? Event)?.title ?? ""
    }

let theEventTitleLabel = UILabel()

let newEventLabelSubscriber = Subscribers.Assign(object: theEventTitleLabel, keyPath: \.text)
eventPublisher.subscribe(newEventLabelSubscriber)

let event = Event(title: "Introduction to Combine Framework", scheduledOn: Date())
NotificationCenter.default.post(name: .newEvent, object: event)
print("Recent event notified is: \(theEventTitleLabel.text!)")


Whenever a new event notification is received, the label “Subscriber” will update its text value. It is great to see a working example (of Publisher-Subscriber)!

Before we go to the next example(?), it is important to note that Combine comes with a lot of convenient APIs that allow us to subscribe to the publisher with fewer lines of code.

let theEventTitleLabel = UILabel()
/*
let newEventLabelSubscriber = Subscribers.Assign(object: theEventTitleLabel, keyPath: \.text)
eventPublisher.subscribe(newEventLabelSubscriber)
*/
eventPublisher.assign(to: \.text, on: theEventTitleLabel) // <-- [new code line]


 operator subscribes to the notification publisher and links to the lifetime of the label. Once the label gets released, its subscription gets released too.

import Combine
import Foundation
import PlaygroundSupport

let subscription = Timer.publish(every: 1, on: .main, in: .common)
    .autoconnect()
    .sink { output in
        print("finished stream with : \(output)")
    } receiveValue: { value in
        print("receive value: \(value)")
    }


When you run the above code in Swift Playground, the output will be:

receive value: 2021–12–16 07:59:23 +0000
receive value: 2021–12–16 07:59:24 +0000
receive value: 2021–12–16 07:59:25 +0000
receive value: 2021–12–16 07:59:26 +0000
receive value: 2021–12–16 07:59:27 +0000
…


But, we want this to be stopped later. I.e. we should cancel the subscription when the task is done.

import Combine
import Foundation
import PlaygroundSupport

let subscription = Timer.publish(every: 1, on: .main, in: .common)
    .autoconnect()
    .print("data stream")
    .sink { output in
        print("finished stream with : \(output)")
    } receiveValue: { value in
        print("receive value: \(value)")
    }

RunLoop.main.schedule(after: .init(Date(timeIntervalSinceNow: 5))) {
    print(" - cancel subscription")
    subscription.cancel()
}


When you run the above code, the output is:

data stream: request unlimited
data stream: receive value: (2021–12–16 08:23:28 +0000)
receive value: 2021–12–16 08:23:28 +0000
data stream: receive value: (2021–12–16 08:23:29 +0000)
receive value: 2021–12–16 08:23:29 +0000
data stream: receive value: (2021–12–16 08:23:30 +0000)
receive value: 2021–12–16 08:23:30 +0000
data stream: receive value: (2021–12–16 08:23:31 +0000)
receive value: 2021–12–16 08:23:31 +0000
data stream: receive value: (2021–12–16 08:23:32 +0000)
receive value: 2021–12–16 08:23:32 +0000
— cancel subscription
data stream: receive cancel


 : Cancel the timer to stop emitting the value.

import Combine
import Foundation
import PlaygroundSupport

var subscription: Cancellable? = Timer.publish(every: 1, on: .main, in: .common)
    .autoconnect()
    .print("data stream")
    .sink { output in
        print("finished stream with : \(output)")
    } receiveValue: { value in
        print("receive value: \(value)")
    }
    
RunLoop.main.schedule(after: .init(Date(timeIntervalSinceNow: 5))) {
    print(" - cancel subscription")
    // subscription.cancel()
    subscription = nil
}


This will also cancel the subscription. It is generally a use case of cancelling subscriptions when a View is going to be deallocated and a subscription is no longer needed.

 frees up any allocated resources. It also stops side effects such as timers, network access, or disk I/O.

Let’s look at the rules of subscriptions.

What? A Subscription with NO Completion?Yes, subscriptions can come with completion, but this is not always the case. Our Notification example is one such Publisher — it will never be complete. You can receive zero or more notifications, but there’s no real end to it.

 is a Publisher that completes a data response or a request error. The fact is that whenever an error is thrown from a stream, the subscription is dismissed even if the stream allows multiple values to pass through.

These rules are important to remember in order to understand the lifetime of a subscription.

Using @Published to bind values for the changes over time

 is a property wrapper and the keyword adds a Publisher to any property.

Let’s take a look at a simple example of a boolean which is assigned to the 

class AgreementFormVC: UIViewController {

    @Published var isNextEnabled: Bool = false
    @IBOutlet private weak var acceptAgreementSwitch: UISwitch!
    @IBOutlet private weak var nextButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        
        $isNextEnabled
            .receive(on: DispatchQueue.main)
            .assign(to: \.isEnabled, on: nextButton)
    }
    
    @IBAction func didSwitch(_ sender: UISwitch) {
        isNextEnabled = sender.isOn
    }
    
}


The UISwitch will trigger the didSwitch(_ sender: UISwitch) method and change the isNextEnabled value to either true or false.
The value of the nextButton.isEnabled is bound to the isNextEnabled property.
Any changes to isNextEnabled are assigned to this isEnabled property on the main queue as we’re working with UI.

property on the main queue as we’re working with UI.

You might notice the dollar sign in front of 

. This allows you to access the wrapped Publisher value. From that, you can access all the operators or, like we did in the previous example, subscribe to it. Note that you can only use this 

Subscribers can retain a subscription as far as they want to receive and process values. The subscription references should be released when it is no longer needed.

 is used for memory management. → In Combine, 

and makes sure subscriptions are terminated.“Cancelling subscriptions help avoid retain-cycles.”

Let’s update the last example to make sure the 

class AgreementFormVC: UIViewController {
    
    @Published var isNextEnabled: Bool = false
    private var switchSubscriber: AnyCancellable?
    @IBOutlet private weak var acceptAgreementSwitch: UISwitch!
    @IBOutlet private weak var nextButton: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
    
        // Save the Cancellable Subscription
        switchSubscriber = $isNextEnabled
            .receive(on: DispatchQueue.main)
            .assign(to: \.isEnabled, on: nextButton)
    }

    @IBAction func didSwitch(_ sender: UISwitch) {
        isNextEnabled = sender.isOn
    }
    
}


I.e. Whenever the view controller is released, the property is released as well and the 

There is a good facility to handle multiple subscriptions in a class, which can be stored in a 

class AgreementFormVC: UIViewController {
    
    @Published var isNextEnabled: Bool = false
    // private var switchSubscriber: AnyCancellable?
    private var subscribers = Set<AnyCancellable>() // ← set of all subscriptions 
    @IBOutlet private weak var acceptAgreementSwitch: UISwitch!
    @IBOutlet private weak var nextButton: UIButton!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Save the Cancellable Subscription
        $isNextEnabled
            .receive(on: DispatchQueue.main)
            .assign(to: \.isEnabled, on: nextButton)
            .store(in: &subscribers) // ← storing the subscription
    }
    
    @IBAction func didSwitch(_ sender: UISwitch) {
        isNextEnabled = sender.isOn
    }
    
}


 subscription is stored in a collection of subscribers. Once the

 is released, the collection is released and its subscribers get cancelled.

That wraps up our introduction to the Combine Framework. You can find all the code from this article 

Getting Started with Combine in Swift

nextjs-pwa-cover.webp

Before jumping into building a Next JS PWA (progressive web app), let’s go over some basics.

. PWAs 
are built using common web technologies like HTML, CSS, and JavaScript, 
but they feel almost like native apps. PWAs offer many of the same 
functionalities as native apps — like push notifications, offline 
support, hardware access, and much more. Meanwhile, native apps are 
built using a programming language specific to that platform — like 
Swift for iOS and Kotlin or Java for Android.

PWAs offer great flexibility over native apps. You can reuse your web
 application codebase to build a PWA. Many prominent companies have 
built and deployed their PWAs and seen significant growth in their 
business. One example is Twitter Lite — a PWA that delivers a 
state-of-the-art experience to Twitter users with lower data 
consumption, instant loading, and high user engagement. With this PWA, 
Twitter saw a 75% increase in tweets sent, 65% increase in pages per 
session, and a 20% decrease in bounce rate.

The Engineering Lead of Twitter Lite, Nicolas Gallagher said:

A service worker is a script that runs in the background in your 
browser on a separate thread, separate from a web page. This lets us use
 features like push notifications and background sync that don't require
 user or web page interaction. It sits between the network and the 
browser, acting as a proxy server. So using service workers, we can 
control network requests. Cache requests to enable offline access to 
cached content, which also improves performance! Note that this network 
cache is independent of the browser cache or network status. Also, this 
cache is persistent. As the Service worker is a JavaScript worker, we 
can’t access DOM directly in the service worker.

In the first step, we will install an npm package 

Step 2: create a service worker for offline support and caching

 file in the root 
directory to add offline support and caching. We should also configure 
this for push notifications or any other features we might want to add 
in the future. Here is the example service worker —

import { skipWaiting, clientsClaim } from 'workbox-core';
import { ExpirationPlugin } from 'workbox-expiration';
import { NetworkOnly, NetworkFirst, CacheFirst, StaleWhileRevalidate } from 'workbox-strategies';
import { registerRoute, setDefaultHandler, setCatchHandler } from 'workbox-routing';
import { matchPrecache, precacheAndRoute, cleanupOutdatedCaches } from 'workbox-precaching';

skipWaiting();
clientsClaim();

// must include following lines when using inject manifest module from workbox
// https://developers.google.com/web/tools/workbox/guides/precache-files/workbox-build#add_an_injection_point
const WB_MANIFEST = self.__WB_MANIFEST;
// Precache fallback route and image
WB_MANIFEST.push({
  url: '/fallback',
  revision: '1234567890',
});
precacheAndRoute(WB_MANIFEST);

cleanupOutdatedCaches();
registerRoute(
  '/',
  new NetworkFirst({
    cacheName: 'start-url',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 1,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /^https:\/\/fonts\.(?:googleapis|gstatic)\.com\/.*/i,
  new CacheFirst({
    cacheName: 'google-fonts',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 4,
        maxAgeSeconds: 31536e3,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /\.(?:eot|otf|ttc|ttf|woff|woff2|font.css)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-font-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 4,
        maxAgeSeconds: 604800,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
// disable image cache, so we could observe the placeholder image when offline
registerRoute(
  /\.(?:jpg|jpeg|gif|png|svg|ico|webp)$/i,
  new NetworkOnly({
    cacheName: 'static-image-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 64,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /\.(?:js)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-js-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 32,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /\.(?:css|less)$/i,
  new StaleWhileRevalidate({
    cacheName: 'static-style-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 32,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /\.(?:json|xml|csv)$/i,
  new NetworkFirst({
    cacheName: 'static-data-assets',
    plugins: [
      new ExpirationPlugin({
        maxEntries: 32,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /\/api\/.*$/i,
  new NetworkFirst({
    cacheName: 'apis',
    networkTimeoutSeconds: 10,
    plugins: [
      new ExpirationPlugin({
        maxEntries: 16,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);
registerRoute(
  /.*/i,
  new NetworkFirst({
    cacheName: 'others',
    networkTimeoutSeconds: 10,
    plugins: [
      new ExpirationPlugin({
        maxEntries: 32,
        maxAgeSeconds: 86400,
        purgeOnQuotaError: !0,
      }),
    ],
  }),
  'GET'
);

// following lines gives you control of the offline fallback strategies
// https://developers.google.com/web/tools/workbox/guides/advanced-recipes#comprehensive_fallbacks

// Use a stale-while-revalidate strategy for all other requests.
setDefaultHandler(new StaleWhileRevalidate());

// This "catch" handler is triggered when any of the other routes fail to
// generate a response.
setCatchHandler(({ event }) => {
  // The FALLBACK_URL entries must be added to the cache ahead of time, either
  // via runtime or precaching. If they are precached, then call
  // `matchPrecache(FALLBACK_URL)` (from the `workbox-precaching` package)
  // to get the response from the correct cache.
  //
  // Use event, request, and url to figure out how to respond.
  // One approach would be to use request.destination, see
  // https://medium.com/dev-channel/service-worker-caching-strategies-based-on-request-types-57411dd7652c
  switch (event.request.destination) {
    case 'document':
      // If using precached URLs:
      return matchPrecache('/fallback');
      // return caches.match('/fallback')
      break;
    case 'image':
      // If using precached URLs:
      return matchPrecache('/static/images/fallback.png');
      // return caches.match('/static/images/fallback.png')
      break;
    case 'font':
    // If using precached URLs:
    // return matchPrecache(FALLBACK_FONT_URL);
    // return caches.match('/static/fonts/fallback.otf')
    // break
    default:
      // If we don't have a fallback, just return an error response.
      return Response.error();
  }
});


Step 3: create a fallback page when the app is offline

, our app will still work when 
there is no network access available and serves the cached content. But 
what happens when a user visits a page that is not cached by a service 
worker? To handle this situation, we’ll create a 

 page in the pages directory which shows a message if the device is offline. Here is the example code for a fallback page —

import React from 'react';

const fallback = () => (
  <div>
    <h1>This is fallback page when device is offline </h1>
    <small>Route will fallback to this page</small>
  </div>
);

export default fallback;


 file inside the root directory. This will create an 

 file. This file will be served from the public folder in the production build. Here is a sample 

const withPWA = require('next-pwa');

module.exports = withPWA({
  pwa: {
    dest: 'public',
    swSrc: 'service-worker.js',
  },
});


Step 5: provide all the information for the PWA

 file 
inside the public directory and provide all the details related to the 
PWA like name, description, icon, etc. You can customize the name, 
icons, and other details according to your use case.

Test PWA

Step 6: link the manifest.json to the web application

 file that we created earlier and link that file to our web application in the 

Step 7: make a build and validate your PWA

This step is the last step of our PWA building process. Now all we 
have to do is make a build of our Next JS app! First, create a build 
using

We are making the build because in dev mode there is a lot of unused JS code. So, we can't run the lighthouse audit in dev mode.

The output you see will be something like this —

Once the build has been created, start a server on localhost using

 icon in the 
URL bar of your browser. Go ahead and install your PWA! Once installed, 
this app will be added to your device’s app drawer with the icon that 
you selected in the 

 file. Now you can access the application directly by clicking on the app icon.


Finally, you can validate your PWA using Lighthouse in dev tools. To do 
this, go to Chrome dev tools, open the Lighthouse tab, and click on 

. Once the report is ready, you’ll see something like this.

That green mark above the ‘Progressive Web App’ label means that lighthouse validates our web application as a PWA.

And we’re done! I hope this post helped you understand the basics for building your first PWA in Next JS
😊

/categories

/also check out

Music feat. Design — a look at the greatest album covers of all time

Creating space for the craft of design

My playbook for remote work

Subscribe to our tech, design & culture updates at Proximity

Recent Articles

Music feat. Design — a look at the greatest album covers of all time

Creating space for the craft of design

My playbook for remote work

Getting Started with Combine in Swift

Building a Next JS PWA using next-pwa and service worker

KaiOS: Everything you need to know

Creational Design Patterns using Typescript

RAIL: A Framework to measure performance

SOLID Principles using Typescript

Enhance Your Routine DB Activities With Django's ORM