After looking at reviews for baby monitors, a few things were clear:

1. Manufacturers aren't putting good cameras in these monitors
2. Some have night vision, some don't and the quality usually sucks.
3. If the monitor can be viewed remotely, it sometimes runs insecure RF wireless and can be snooped on or intercepted
4. Good monitors aren't actually baby monitors, they're just nice cameras (Nest Cam) and cost $300+

I knew there had to be a better, more affordable way to keep tabs on our little guy. A Raspberry Pi was a perfect solution--it has a camera module with 1080p resolution, it has USB ports for extra peripherals, it's portable, and it's (relatively) cheap – although in 2024, even a Raspberry Pi 5 kit costs $200. The good news is, this guide works down to a Raspberry Pi 3 or even a Pi Zero!

Check out the resulting image quality:

720p, low light

720p, high light

It's possible to reach 1080p with the Pi camera, it's up to you--I found 720p to be perfectly acceptable but 1080p caused the image to "zoom in" a bit too much. If I figure that out, I'll update the guide accordingly.

I am a developer by trade, but I will try to keep this guide as simple as possible. You are presumably ready to get your hands (a little) dirty if you have a Pi, but if you're like me, Linux is not your forte.

The other nice thing about using a Raspberry Pi is that it's easy to use! There are many guides and tutorials available for the device.

If you get stuck, the comments at the bottom provide a forum to help each other 🤝

What This Guide Covers

This guide will show you how to build your own DIY baby monitor using a Raspberry Pi 3/4/5.

The image and sound will be way better than any low- to mid-level monitors (and cheaper!). Additionally, this will give you a lot of flexibility to add other functionality such as a speaker, etc.

Since the Raspberry Pi is under your control, you can choose to expose it only within your home network or securely over the Internet--no weird Internet of Things or cloud "phone home" nonsense or possible vulnerabilities that allow people to view your baby.

It will be as secure as your home network, and if you choose to expose it publicly, you can use encryption and strong passwords to secure it (this guide does not cover that).

Before You Begin

• Updates
• The Hardware
• Nightvision Support
• Programmable LED Light

How To

• YouTube Video Walkthrough
• Installing the Pi Camera
• Configuring the Pi
• Configuring Raspbian
• Installing Picam
• Running Picam at Startup
• Installing nginx
• Mounting the Monitor
• Viewing on a Device
• (Optionally) Adding a Web Player
• (Optionally) Exposing over the Internet

Updates

2024-11-22 – Raspberry Pi OS and Picam 2 compatibility

I recently wiped my Raspberry Pi 3 and am setting it up as a self-contained video recording and editing system for my son who is now 7 years old (yes, the one in the picture)!

I was able to follow my own guide again to get everything set up again, but several commands no longer worked and needed tweaks. I also added some more screenshots and clarified a few steps.

Using the Built-in rpicamvid

I show you how to use and configure Picam for video streaming, but a commenter said they found this guide on using built-in rpicamvid a bit easier! That is another option for you.

Remote video streaming from Raspberry PI camera

Using Raspivid and NetCat in headless Raspberry PI (OS Lite) for remote video streaming and get video from a local network PC with VLC

peppe8o Raspberry PI, Arduino and Electronics made simplepeppe8o

Price Increases on Canakit

I updated the Amazon links to the latest Canakit starter kits and was surprised that the price had doubled since 2019. You may want to shop around, but I think Canakit is worth it.

With cams as low as $50 now, this is definitely more of a hobby project than it was back then—you'll probably spend more money and way more time on it, so if all you're looking for is a good baby cam, maybe a $280 Nanit makes sense now.

The rest of the hardware has mostly fallen in price.

2020-08-25

• Command typo fixes by cowley05 (#27)

2019-11-13

• Add video walkthrough pitch
• The Kinobo mini USB mic is discontinued so I replaced it with a well-reviewed Samson GO portable mic
• Add clarification for installing the right Binary distribution
• Add clarification for picam-viewer installation

2019-06-08

• Updated Binary section to reflect instructions for Raspbian Buster

2018-01-11

• Fixed picam extraction command typo because the archive contains the original filename as the top-level folder

2017-10-25

• Thanks to Andrew for pointing out some differences between different Raspbian versions! I updated the Picam installation step.
• I updated my Picam arguments to be what I'm using now after some testing. The args I'm using seem pretty stable now.

2017-10-02

• I missed the fact that the /run/shm directories are blown away on Pi restarts. The startup script now ensures they exist (should fix slow feeds).
• I updated my picam-viewer web player to use Video.js now which should support more devices.
• The comments have reported that the Pi Zero works well for this!

The Hardware

Here's what you'll need (I've marked 👶 with what the guide is using):

• Raspberry Pi 5 Canakit - $170
  • OR Raspberry Pi 4 Canakit - $150
  • 👶 OR Raspberry Pi 3 Canakit - $100
  • 👶 OR Raspberry Pi Zero W Canakit - $25
• 👶 Raspberry Pi Camera Module v2 - $13
• 👶 MicroSD card (8GB or higher) - $8
  • NOTE: Links to each Canakit above include SD card!
• Samson GO USB omni/condenser microphone - $30
  • Optional if you only want video and no audio captured
• 👶 USB reading Lamp (optional)
  • You just want enough light for the camera
• 👶 Gooseneck phone mount (optional)
  • Makes pointing at the right location easier
• HDMI cable (temporary)
• USB keyboard/mouse (temporary)
• Laptop to configure the Pi

You can snag all the hardware needed for ~$200 off Amazon. I went with a 32GB SD card but that's just me, you could configure this to store all videos/photos on a network device or cloud account.

The gooseneck LED light is optional--I want to be able to have the monitor have a night-light attached vs. having to have a separate ambient light at night.

For mounting the Pi, it's up to you. I need to mount it to the bassinet/crib and a clamp-based gooseneck mount is perfect for me (at least until the little guy starts moving around and grabbing things!). You may want to wall-mount it, use cardboard, etc. Use whatever works for you!

Nightvision Support

Originally I had planned to use the Pi NoIR camera module because it can see infrared light. However, since infrared light is still light (just not visible) I didn't really want to take a chance of accidentally "shining" it straight onto my son's face. There is no real evidence to suggest that infrared baby monitors are dangerous to infants--but concentrated IR is still not good to have directed at you. The fact is that nightvision baby monitors probably use a very low light level and it's probably not dangerous at all.

If you want to add nightvision to this monitor, simply replace the normal camera module above with the Pi NoIR Camera module. You will then need to find a suitable infrared light to use at night.

I have opted to use a simple flexible USB light that I can shine specifically where it makes sense and won't be in the baby's line of sight. It has an on/off switch which comes in handy for my wife at night to simply lean over and switch on too.

Programmable LED Light

While I opted for a simple on/off nightlight, you could potentially go crazy with a BlinkStick Nano USB light that is programmable, so you could have it automatically turn on in low-light conditions, program light shows, or what have you.

Installing the Pi Camera

To install the camera on the Pi, firmly insert the end of the cable with the silver pins facing toward the HDMI port.

I picked the Canakit because the case allows you to attach the camera on the inside, allowing an integrated camera.

Configuring the Pi

First things first, we need to configure our Raspberry Pi. The software installation guide on the Raspberry Pi documentation site is perfect and easy to understand.

I used the Raspberry Pi OS imager:

Raspberry Pi Imager Settings

You will see a screen like this:

Click "Edit Settings" so you can configure some stuff upfront:

• Wi-Fi: You must configure this to connect to your Wi-Fi. You can do it once you boot into the OS, but you might as well do it now.
• Hostname: I used babypi but the default is raspberrypi
• Username/password: Good to set for security.
• Timezone: When you boot up the OS, it should be set automatically, but you can also set it upfront.

Follow all the steps until your SD card has the Raspberry Pi OS.

Connect the Pi via HDMI to a monitor or TV. Connect a mouse/keyboard to the Pi for configuring. Connect an Ethernet cable unless you want to use Wi-Fi during the guide.

Boot up your Pi (i.e. plug it in) and it should boot into the OS.

Updating Raspberry Pi OS

I'm sorry I have to delve into the command-line but because Raspberry Pi is a Linux device, most of the power user features are only available through there. Hey, presumably you're reading this because you want a power-user baby monitor! We have to get our hands a little dirty.

Launch the Terminal app on the Pi (it's in the menu bar at the top).

Run the following command:

sudo apt-get update && sudo apt full-upgrade

When the prompt changes to a changelog, press Ctrl-C to close the wall of text, then Enter to continue.

This takes awhile! This updates Raspberry Pi OS to the latest updates including security patches. You want to run this every so often to keep the operating system up-to-date. You can also follow the official documentation here.

There are more technical guides on automatic updating so you don't need to login to keep it up-to-date.

Configure IPv6 (Optional)

The Raspberry Pi can be pinged and connected to via the hostname raspberrypi.local or whatever name you chose in the imager (plus .local at the end).

However, if you use the IP address, it defaults to a long one (IPv6). Web browsers can have trouble connecting to the Pi with this enabled, so we need to disable IPv6 hostname resolution.

sudo nano /etc/avahi/avahi-daemon.conf

On the line use-ipv6=yes change yes to no. Press Ctrl-O to save (hit Enter), then Ctrl-X to exit.

Now reboot! sudo reboot

You should be able to ping your Pi from another machine:

ping babypi.local
ping -4 babypi.local

The second command forces the ping to return the IPv4 address. On Windows you may need the Bonjour service installed if you don't have iTunes installed.

Some devices (my Android phone for example) still won't be able to use babypi.local so you'll still need the IP address of your Pi, which you can see with ip addr show.

Note: I had some issues on Windows trying to access http://babypi.local in my browser. When I pinged my Pi, I got a private address space back (198.105.x.x) instead of the local IP. I changed my router's DNS to Google's public DNS servers and for some reason that worked. I think CenturyLink (my ISP) was somehow interfering since it would always redirect to some proprietary search results page. However, with the knowledge I have of networking and DNS, this still makes no sense to me!

Installing Picam

Because we want to stream both audio and video from the camera and USB microphone, we need to use a software project called Picam.

Make sure to run all commands from the Pi user directory, i.e. your prompt should look like:

pi@raspberrypi:~ $

The ~ denotes your user's home directory.

Run the following command in the terminal to install some Picam dependencies:

sudo apt-get install libharfbuzz0b libfontconfig libepoxy0

Then this entire thing (if you are using SSH, just copy/paste otherwise have fun!):

cat > make_dirs.sh <<'EOF'
#!/bin/bash
DEST_DIR=~/picam
SHM_DIR=/run/shm

mkdir -p $SHM_DIR/rec
mkdir -p $SHM_DIR/hooks
mkdir -p $SHM_DIR/state
mkdir -p $DEST_DIR/archive

ln -sfn $DEST_DIR/archive $SHM_DIR/rec/archive
ln -sfn $SHM_DIR/rec $DEST_DIR/rec
ln -sfn $SHM_DIR/hooks $DEST_DIR/hooks
ln -sfn $SHM_DIR/state $DEST_DIR/state
EOF

Then the following, to execute the script we just made and create the required directories:

chmod +x make_dirs.sh
./make_dirs.sh

Downloading the right version

Raspberry Pi OS and Picam Binary Release (1.4.7+, 2.x)

Use the latest version release (2.0.12 as of Dec 2024):

wget https://github.com/iizukanao/picam/releases/download/v2.0.12/picam-2.0.12-`uname -m`.tar.gz -O picam-2.0.12.tar.gz
tar zxvf picam-2.0.12.tar.gz
cp picam-2.0.12/picam ~/picam/

Replace 2.0.12 with the latest version string if applicable.

This script:

• Downloads the file to the current directory as picam-{version}.tar.gz
• Extracts the archive to the picam-{version} folder
• Copies the extracted sub-folder picam-{version}/picam to a top-level ~/picam folder in your HOME directory

Jessie or Stretch (Picam 1.4.6)

• For Jessie: https://github.com/iizukanao/picam/releases/download/v1.4.6/picam-1.4.6-binary-jessie.tar.xz
• For Stretch: https://github.com/iizukanao/picam/releases/download/v1.4.6/picam-1.4.6-binary-stretch.tar.xz

Now we install Picam directly using the link above:

wget <URL ABOVE> -O picam.tar.gz
tar xvf picam.tar.gz
cp picam/picam ~/picam/

Configuring Picam

We now have Picam installed! It's time to get a stream working.

To configure Picam to use our microphone, we need to know what its "device ID" is. Run the following to list any USB recording devices:

arecord -l

The name will be Card # and Device #, so for example, here is mine:

**** List of CAPTURE Hardware Devices ****
card 1: Device [USB Audio Device], device 0: USB Audio [USB Audio]
  Subdevices: 1/1
  Subdevice #0: subdevice #0

You see "card 1" and "device 0" so my microphone ID will be hw:1,0.

Now, let's make a script we can run to start Picam. Replace "hw:1,0" with your device ID above if it's different.

First, create a new run_picam.sh bash script file and mark it as executable:

touch run_picam.sh
chmod +x run_picam.sh

Now, use the nano editor to edit the script:

nano run_picam.sh

The nano editor is very straightforward to use. Ctrl-O to save, Ctrl-X to exit.

Copy and paste or write this script:

#!/bin/sh

# !!! Change to your user home directory!
PI_USER=/home/<your-username>

sudo $PI_USER/make_dirs.sh

sudo $PI_USER/picam/picam \
  -o /run/shm/hls \
  --time --alsadev hw:1,0 \
  > /var/log/picam.log 2>&1

Because Picam writes to some system directories, it is running using sudo although I am positive with the correct permissions, you wouldn't need to.

The script starts Picam with an HLS stream output to the RAM drive (fast) and uses our microphone as the recording device. It also writes out the current timestamp in the bottom corner of the stream. There are a ton of other options, too, including subtitles, etc. The default video resolution is 720p, which is fine enough for a baby cam ton of other options.

The script also writes the Picam output to /var/log/picam.log for debugging purposes.

Test the script by typing sudo run_picam.sh. You will not see any output because it is outputting to the log file.

Open a new Terminal tab (File -> New Tab) and type in the following:

cat /var/log/picam.log

You should see:

kamran@babypi:~ $ cat /var/log/picam.log
created state dir: ./state
created hooks dir: ./hooks
created directory: ./rec
created directory: ./rec/tmp
created directory: ./rec/archive
created HLS output directory: /run/shm/hls
configuring devices
capturing started

You can quit the run_picam.sh script by hitting Ctrl-C to exit.

Running Picam at startup

There's a great post on how to run a script at startup. We want Picam to run right away when the Pi boots up, so let's do that!

Create the script:

sudo nano /etc/init.d/picam

Then copy/paste the following:

#! /bin/sh
# /etc/init.d/picam

### BEGIN INIT INFO
# Provides:          picam
# Required-Start:    $remote_fs $syslog $network
# Required-Stop:     $remote_fs $syslog $network
# Default-Start:     2 3 4 5
# Default-Stop:      0 1 6
# Short-Description: Simple script to start Picam at boot
# Description:       A simple script to start Picam at boot
### END INIT INFO

# If you want a command to always run, put it here

# Carry out specific functions when asked to by the system
case "$1" in
  start)
    echo "Starting Picam"
    # run application you want to start
    sudo /home/pi/run_picam.sh
    ;;
  stop)
    echo "Stopping Picam"
    # kill application you want to stop
    killall picam
    ;;
  *)
    echo "Usage: /etc/init.d/picam {start|stop}"
    exit 1
    ;;
esac

exit 0

This is an initialization script that will execute our run_picam.sh script we just made.

Mark it as executable:

sudo chmod +x /etc/init.d/picam

Now, let's test it.

sudo /etc/init.d/picam start

You should see the Picam output. Picam is now running in the background! You can stop it manually like this:

sudo /etc/init.d/picam stop

Now let's register it on startup:

sudo update-rc.d picam defaults

All set. We can test it out by rebooting the Pi and verifying the Picam process is running.

sudo reboot

Once the Pi is booted, type top to see running processes. You should see Picam at the top.

Installing nginx

We've set up Picam to output a stream to a file but we need to expose that stream so we can connect to it from our devices or web browsers. "nginx" is a web server that can do that for us.

Let's install nginx:

sudo apt-get install nginx

Now let's expose the RAM stream as a directory:

sudo nano /etc/nginx/sites-available/default

In the editor, scroll down to right before location / { and add a new block above it:

location /hls/ {
    root /run/shm;
}

This adds a new /hls URL that points to the /run/shm/hls directory Picam is outputting the stream to.

Restart nginx to allow the changes to take effect:

sudo /etc/init.d/nginx restart

This starts the web server. Now you can browse (on the Pi or other device) to the root of the site and view the nginx welcome page.

For example, type in http://babypi.local/ to see the default nginx homepage:

If you type in http://babypi.local/hls/index.m3u8 the browser should download or display a video file. We'll get to how to view the video in a few minutes!

Mounting the monitor

Now that we've configured the baby Pi, we need to put it near the baby! As I mentioned at the start, I am just using a simple LED light to help when its dark. With a gooseneck mount, we can also position the monitor in whatever way we need that provides the best view of the crib. What's nice is that you can fit everything you need onto a single Pi, so it can travel with you.

It looks a bit like an angler fish but it does the job!

Viewing on a device

We're officially all set up! That's all that is needed to use our baby monitor.

In the first part where you configured the Pi, you choose a hostname (or didn't). You can now access the stream URL at http://babypi.local/hls/index.m3u8. You can open that up in any compatible software to view the livestream.

VLC Player

On a PC, Mac, Android, or iOS, I recommend VLC Media Player.

1. Install VLC
2. Open VLC
3. Go to File
4. Open Network Stream
5. Paste in the URL

The steps are similar for Android and iOS, just choose "Stream" and type in the same URL.

You should now see a live stream with video and audio!

(Optionally) Adding a web player

VLC is a nice player but sometimes it might be nice to just hit the Pi directly in a web browser (open a new tab on your computer, etc.).

We can optionally add a stream player to our web server. Follow the steps below:

cd /var/www/html
sudo git clone https://github.com/kamranayub/picam-viewer.git .

IMPORTANT: Ensure you keep the period (.) at the end of that command! It will download the contents of the Git repository into the current one.

This will bring down a bare metal web player I put together. Feel free to edit it as you see fit. If you changed the URL to where the HLS stream is at on the server, you will need to edit config.json.

Now, open a browser and visit your Raspberry Pi (e.g. http://babypi.local/):

Note: The viewer is very basic right now, I plan to add some functionality to change the exposure, resolution, white balance, and mute settings for Picam as well. Some Raspberry Pi configuration might be nice too such as rebooting. You can contribute back at https://github.com/kamranayub/picam-viewer

(Optionally) Exposing over the Internet

I have chosen not to expose my Pi to the internet, instead it sits securely on my network behind my router and is not accessible via the Internet. If you choose to expose it remotely, you will need to do the following to ensure it's secure:

1. Set up Port Forwarding on your router to forward some random port to port 80 on the Pi
2. Enable HLS encryption which is in the Picam documentation.
3. Configure nginx to use HTTPS (and force it) and an SSL certificate (preferably a signed one) for the website
4. Configure nginx to prompt for a username/password (Basic Authentication) which is secure as long as its over SSL
5. Probably disable password authentication in SSH and switch to SSH keys

These steps are outside the scope of this guide but there are many tutorials online for Nginx, port forwarding, and SSL that you can follow to achieve this. If someone wants to write it up, I will happily add it to this guide! Just remember as soon as you allow your Pi to be exposed, you need to make sure it's the server is secure and encrypted.

This week my MacBook Pro 2011 SSD drive died, and it can't be restored using the built-in Disk Utilities (spent a couple hours trying). My options were to...

1. Buy a new SSD and reinstall everything (which requires using workarounds for Sonoma)
2. Buy a new (to me) MacBook Pro

Option 1 would certainly save me money but I already did that initially. I got the Macbook for free initially from a friend. I bought new RAM + an SSD, and installed Sonoma using OpenCore Legacy Patcher. It worked but it was still painfully slow. Plus, you're living on the edge with an unsupported MacOS version.

I have been thinking about a new laptop for awhile to replace an old Lenovo Yoga. It fell on its face trying to spin up a local Docker environment.

I decided this was a good time to think about a new work laptop where I can do most of the things I do on my PC but on my laptop when I'm out and about.

Fast forward and I ended up purchasing a refurbished MacBook Pro M1 Max 14":

MacBook Pro (14-inch, 2021) - Technical Specifications - Apple Support

Apple Support

The first reaction you probably have is:

WHY?! Why not buy the latest M4?

It comes down to the way I make any kind of big purchasing decision and I wanted to share the process with you because it has saved me loads of money over the years.

Spending is a skill

Last year in 2023, Pete aka Mr. Money Mustache who was my gateway drug to learning about financial independence, was on the BiggerPockets podcast (highly recommend) and he said something very important:

Spending less money is not a deprivation, it is a skill.

In fact, it's literally the first thing he says.

I encourage you to listen because this is the essence of how to reach financial independence. It is not solely about earning more. Without a skill of spending, you can earn more and be no better off (or worse off) than someone who earns less but has a high skill of spending.

Examples:

• Instead of paying $200/mo for cell plan from Verizon, you pay $30/mo with Mint
• Instead of paying $44,000 with a car loan for a brand new minivan, you look at ConsumerReports and use Autolist to pay $18,000 in cash for a used one with 44,000 miles
• Instead of paying $750,000 for a new home in a nice area, you pay $305,000 for an older home in a nice area (with more square footage)
• Instead of paying $10,601 to install new HVAC using the contractor you've always used, you shop around save $1,000 by using a different one who ends up providing better service anyway
• Instead of paying $2,836 to visit Texas with a family of 5, you use travel rewards and pay $43.74
• Instead of paying $2,328 for a new MacBook Pro M4, you pay $1,350 for an M1 Max with 2.5X the amount of RAM and more GPU power

In case it's not obvious, these are actual numbers from the big purchase decisions I've made in the past few years.

The savings from these decisions alone are in the tens of thousands in the short-term, and hundreds of thousands in the long-term.

And was it a deprivation? Not at all. We fucking love our 2015 Honda Odyssey. My HVAC is boring and keeps us comfortable. We stay under the 2GB of data per month for our phones. We visited family in Texas and had a blast.

If this were D&D, I'd probably put Spending as a skill under Wisdom:

Wisdom reflects how attuned you are to the world around you and represents perceptiveness and intuition.

-- D&D 5e

Perhaps you could argue it falls under Intelligence – but I would say the skill is in the planning, which requires situational awareness.

Cool, now that we've established you need a skill of spending to achieve financial freedom, what does it mean exactly?

My process for big purchases

Let me share what I did today for my MacBook purchase because it's basically the same strategy I used for everything else.

Start with the End in Mind

A solid strategy for most things is to start with the end in mind.

In other words, work backwards.

There are probably thousands of options to choose from, so which ones are you going to narrow it down to? This is part of strategy – deciding what you're going to say No to.

1. What do you even want? What are you going to do with it?
2. What are you absolutely not going to compromise on?
3. What are you willing to compromise on?

My answers here:

1. I need a laptop for business work. I plan to do coding with .NET and Node.js, as well as video editing/recording. I would love to be able to write native iOS apps.
2. At least 16GB of RAM and 1TB of storage (because I'll use it). I also want an NVMe hard drive. I want something durable and well-built to last a long time. Minimum 1080p resolution.
3. I don't give a flying fuck about battery, audio, GPU, or the camera. I'm nearly always by an outlet, I use headphones, and I'm not playing games (and GPU cores on M chips are perfectly fine for video editing). I'd prefer a high screen resolution but it's not a dealbreaker.

This is an important part and skip it at your own peril – if you cannot get clear about what you want, you're not going to make an optimized purchase decision.

Also, be honest with yourself.

Do you really need 64GB of RAM or can you live with 16GB? This comes down to the details of how you use the thing or experience you're buying. Don't confuse 'wants' with 'needs.' I don't need more than 16GB but I do need more than 8GB based on my historical usage. Decide what's "nice-to-have" vs. "must-have."

There is no value judgement I'm making on you here – if you can find a compromise that saves you money somewhere else, and you get what you want, that's a win. The important part is that you're being intentional and have thought about the options.

Speaking of options...

Narrowing down the options

If you start with the criteria laid out previously, you now have a baseline search:

• 1TB of storage
• 16GB of RAM
• Durable and well-built
• Portable
• Native iOS app support

The obvious criteria here is supporting iOS development. If I want to make courses on .NET MAUI or port Excalibur games to iOS, I need a Mac. Since I need something portable, it's going to be a laptop as I already have a powerful PC.

As part of the initial research, I thought I might go with a Windows laptop but that was when my old MacBook was working. I thought about MacBook but figured it may be too expensive. However, now that it died, that changes the situation, and it meant I pretty much exclusively needed to look at Mac.

• Since I'm going portable, that means it's a MacBook Pro or MacBook Air.
• Since we have a minimum of 1TB/16GB of RAM, that throws out Air.

Now we can ask the question: what are all possible MacBook Pro configurations that satisfy this criteria?

Obviously, I didn't want one from 2011 – that makes no sense. But I also wasn't sure if I wanted the latest M4. Is it really that much of a difference?

Before M-series silicon, MacBooks used Intel chipsets. From the research I did, I knew that I probably wanted the M-series chipsets because they represented a massive leap in performance.

Since the M-series is the latest gen of MacBook, I decided I'd stack the versions against each other to compare.

Make a spreadsheet

I laid out the core specs I cared about in a spreadsheet, then checked each Apple M generation chip for benchmarks. I wanted to see what value the M4 brings to the table vs. the other chips.

The M-series usually has two variants: Pro and Max. The Max is the top-of-the-line trim which usually supports higher specs.

Here's what I came up with:

Notice how my columns reflect what I value the most. I was OK with a 16" screen but actually preferred the 14" since I'm used to an ultrabook (and it ends up nearly always being cheaper anyway).

For the M1, in order to exceed 16GB of RAM, I also had to look at the M1 Max, which turns out to be pretty important as you'll see in a second.

We are almost to the min-maxing phase, but we're missing what we want to minimize: price.

Figure out your budget

What are you willing to spend? I can't answer that for you. I find it helpful to define a ceiling for myself.

I won't spend more than $2,000 on a new laptop.

And sometimes, a floor can be useful:

I don't want anything less than a $600 laptop because it's junk.

I'd be careful with floors because you'll be surprised how often you'll find a premium product for a low price. But they can make sense especially when price dictates quality; like when I was shopping for HVAC contractors. I would not advise going with the lowest bid for anything you work on in your home.

Employ price shopping strategies

There are so many tactics here but I'll share the overall strategies:

• Buy used/refurb instead of new
• Discount initial price with coupons/promos
• Credit purchase with credit card rewards points
• Check for credit card bonus offers
• Check employee discounts
• Check price history
• Buy through rewards portals

I'll share how I employed some of these strategies.

Seasonal and membership discounts

Since it's around Black Friday, it made sense to check out local retailers for doorbuster deals. Best Buy also offers Geek Squad refurbished items. I'm a Costco member, so it made sense to check there too.

I also got turned onto Backmarket from a repair shop YouTube channel. Shops repair and certify refurb tech and resell it on Backmarket. There are some nice perks you get above Facebook Marketplace or Craigslist:

• Sold by actual shops
• Repair or replacement if it doesn't work within a year
• Option to extend by another year that includes two repairs/replacements and a full refund
• Laptops must have at least 85% battery life left

Finally, since my wife is an educator, I checked out Apple's educator discount: not much it turns out ($100 off) 👎.

Checking rewards points and bonus offers

For my credit card rewards, my Chase Ink Business card had $106 I could use to refund a purchase (that's a 1X refund, but Chase points are worth 25% more if used for travel).

Chase also had an offer where points were worth the 25% extra if used to buy Apple products. This means, instead of buying from Best Buy brand new, it would make more sense to buy straight from Apple through the Chase rewards portal.

Choosing the shop(s)

The shops you end up going with may be influenced by your urgency (need it today vs. can wait a week), your affiliations, or your values (I don't buy on Amazon if there's an alternative, even if it's more expensive).

After some browsing around, I quickly decided that if I bought new, I'd use my Chase business rewards portal, and if I bought refurbished, I'd go with Backmarket – Costco and Best Buy didn't have deals for the specs I wanted.

With the price sites picked out, it's time to figure out which configurations are in stock, what the specs are, and how much you'll expect to pay.

Min-maxing specs

If you want to save money, you will trade off with something else. Convenience. Efficiency. Quality. Luxury. The exercise you did upfront in deciding what to compromise on will lead to what you naturally value.

For this strategy, think of RPGs. Are you a min-maxer? I kind of am and kind of not. I look for the value, the Goldilocks zone. I don't want to spend so much time tweaking 1% values. I look for the 20-80% wins, and then don't sweat the small stuff.

A $10 savings is not going to do much, but $500? That's significant. Stick to the Pareto principle.

Now that we have the specs laid out (which we want to maximize), and where to find the prices (which we want to minimize), we can spend some time to min-max and find that sweet spot.

In the end, I narrowed it down to several specific in-stock configurations:

There are plenty of things to talk about here:

Figure out the unit price

When I bought my home, I paid about $150/sqft. I used price per square foot as the measuring stick to compare other homes. This is a unit price and it applies in pretty much any shopping context.

The lowest unit price doesn't automatically mean it's the best decision – notice how I didn't highlight the cheapest option (the M1 Pro) at all. When I compare 16GB of RAM to 64GB of RAM (and the slightly higher score), the higher RAM wins out against the lower price and the 16" loses against the 14" in my book.

But it does provide a nice reference value to compare – is this option in the ballpark, or is it a poor deal?

Compare actual performance

It's not like I plotted each home we went to and noted down energy efficiency ratings to compare against (although I would if it were important to my decision). But some purchasing decisions have clear measures of performance – like CPU benchmarks.

What I wanted to know was: how much better is each successive M-series chip?

You see my columns for "vs. M1", "vs. M2" etc. that I filled in.

Sometimes you'll be surprised by the results, like that the difference between a previous-gen M3 Pro and the current M4 Pro is really low. To me, it made no sense to buy a refurb M3 MacBook when I could buy a brand new one factory-sealed for essentially the same price (and with more RAM). That took the M3 out of the running for me.

Similarly, I was surprised at how much value the M1 Max was compared to the M4:

• A 20% performance differential is a lot, but was it worth the extra $1000?
• The M1 Max had 2.5x the amount of RAM, which usually translates to massive premiums for MacBooks.
• The M1 Max and M4 Pro have the same amount of CPU cores, but the M1 has twice as much GPU cores.
• The M1 Max has retina display of 3024x1964

Couple these with some facts:

• You can't expand RAM on a M-series MacBook
• You can always expand storage externally
• MacBooks are built to last
• The latest MacOS Sequoia is compatible with the M1

In my mind, there's absolutely no question here – the M1 Max was a clear winner in terms of value on the dollar.

Include discounts, rewards, and taxes

I added everything to my cart to calculate sales tax and I used the aforementioned rewards points or took discounts into account.

In fact, after I did a coupon search, I got an additional $25 off the order. 🎉

All these need to be added to understand the total picture.

Consider the downsides and risk mitigation

That's not to say I didn't consider the downsides to getting the M1 Max:

• It's the earliest of the M-series generation, so it will be the first to not be compatible with a later MacOS version
• I'm buying it in Fair condition so it may not look pretty
• I'm buying it refurbished, so it already has a past life
• It won't be serviced under AppleCare

But I can mitigate these risks:

• I'm comfortable with DIY repair. If it comes down to using OpenCore Patcher again I know I can do it.
• BackMarket offers a 1-year warranty but it can be extended another year with full refund support.
• I actually would prefer to recycle and breathe new life into old hardware vs. giving Apple money directly.

So you see, sometimes a downside for one person is actually an upside.

Don't wait too long

The whole point of having this clear strategy is to make decisions quickly and not get stuck in analysis paralysis.

I started looking at MacBooks at 9am and purchased the M1 Max at 10:41am.

Now granted, I've used these strategies a lot in the past, so I kinda have a feel for it but each decision is unique. I took about 2 weeks to research and finally find a contractor for my HVAC. It took us a month or so to buy our house (in a buyer's market).

But, if the potential upside is huge, spend the time you need. It takes months of planning and prepping for our big international trips where we save $1000's.

What you don't want to do is take so long that you end up missing out on a good value. Who knows how long that M1 Max would have stayed in stock on a refurb marketplace – my guess is not that long. Then again, HVAC contractors aren't going anywhere anytime soon.

Like in most things, there's some kind of Goldilocks zone. One rule of thumb that can be helpful is the "72-hour rule." I first heard it from Jillian Johnsrud but it's pretty simple: wait 72 hours before hitting that buy button. By the end of that 72 hours, if you still feel like you need the thing, buy it. But many times, you'll find you don't actually need it (or in my case, completely forget about it).

The skill of spending is about being intentional

I bought an "old" MacBook simply because it ended up being more value for the amount of money I was willing to spend and I figured it would last me another 10 years. (Also, it ain't that old.)

All of this is just about being intentional.

There are many forces at work that want you to spend money:

• Social pressure and status
• Time urgency
• Marketing
• Fear (perceived or real) and anxiety
• Stress
• Late stage capitalism

Most of that is outside your control – you can't exactly stop yourself from being on the receiving end of this sexy-ass M4 marketing page.

But you do retain control over your spending – you get to decide, before you hit the buy button, whether this is something you need and whether this is the price you pay for it.

Like any skill, it can be honed

I may have started out using a process similar to this when I was building custom PCs when I was 12 – but it's been refined over the years and a lot of the strategies like rewards points were only added in the last few years. It's ever-evolving and it's not like you stop spending (not for long, anyway!).

Wherever you are, whether you're an impulse buyer, or take forever to make decisions, there's always room to improve your spending skills.

The best place to start I think is by refining your approach to big purchases – home, transportation, food. Once you nail that down, you will automatically start applying these strategies in smaller ways to daily purchases.

I share this slide in my talk because after getting intentional, it made a massive impact on my finances – leading to hundreds of thousands of dollars saved in the long-term:

All of this adds up – because when you save that money, it gives it a chance to be invested and grow. In case you need a framework for that, I've got you covered:

F U Money for Developers

How developers can build a seven-figure net worth and achieve financial freedom with financial design patterns

KamranicusKamran Ayub

One of the things I like about using personal finance apps is the insight you get into your spending. What gets measured gets improved, so if you need to improve your finances you best start gathering data.

You've maybe heard me mention using Mint in the past – but Mint is dead. There are a number of alternatives and the smart ones have new marketing landing pages that break down how they compare.

I can save you the trouble and tell you that I've been happily paying for Monarch Money since November (that's my referral code!).

Monarch vs. Mint: Why Monarch is the best Mint alternative

With Mint shutting down, learn how to switch to Monarch, the best Mint alternative. Use our Mint import tools to bring all of your financial history to Monarch in minutes. Join thousands of happy ex-Mint users that have made the switch.

Monarch

Monarch made it easy to transfer over my account, including a custom open source browser extension that would vacuum up all my transaction history to import.

Here are some other things I love about Monarch:

Quick progress check-ins. Anytime you open the app, it provides a calendar at the top where it highlights the days since you last reviewed your finances. You tap "Start Review" and it walks through your key vitals step by step – cash in/out, net worth increase, debt breakdown, etc. It makes checking in much easier. This is not a feature in the web-based app, I've only seen it in the mobile app but that makes sense – on my phone, I'm mostly interested in quick check-ins but the app is also fully-featured.

Lots of reports. As featured above, Monarch is continually adding new ways to visualize and get insights into your spending. The Sankey diagram is awesome and for most visualizations, you can share them without numbers (so you can see how kids are more expensive than our house).

Advanced rule engine. Mint had custom categories but Monarch goes a step farther, allowing you to dynamically match transactions. It was always annoying in Mint how I always had to manually categorize daycare expenses because it just says "CHECK" yet the amounts always were the same. With Monarch, I set up a rule to do it 🎉

Better recurring detection. Mint could do some recurring detection but Monarch is loads better. It will use "estimated" amounts and you can always edit or remove the ones it detects. But it'll learn over time. You can view everything in a calendar view or list.

Flexible goals. I always hated how in Mint you basically could only set a goal to reduce credit card debt so they could sell you cards. In Monarch, you can make a goal for anything. Take a summer off. Buy materials for the shedquarters. Whatever you want, and you can assign more advanced rules for the accounts or transactions it uses.

Share with your partner. For Mint, my wife never really used it on her phone and I had to use my login for her. With Monarch, she has her own login and can get customized alerts/reports. Household sharing is just built in because... that's how you manage finances. Financial advisors can even be invited separately (with fewer permissions).

Public roadmap. The Monarch team is pretty transparent in what's coming and you can see the work as it progresses. This is a great way to have your say in what gets built.

Support that cares. Unlike Mint, with Monarch I can contact support and they'll actually pay attention. Over the past couple of months, they've been inundated with 20-30X the amount of support due to the Great Mint Migration and they STILL replied to me pretty quickly despite all that.

It isn't perfect but it's close enough

Compared to Mint, the experience has been much better. It's not 100% perfect though.

Accounts that don't sync. I've had issues syncing a couple of accounts like my wife's 457b. However, I've made do by having the apps on my phone and occasionally updating the balances in Monarch when I do my reviews. Other accounts will work if I manually go through the auth flow once a month.

Can't customize savings rate. In the financial independence space, there's varying calculations for savings rate that can include investments or mortgage principle payments. Monarch calculates a savings rate, but it's cash only and doesn't incorporate some other measures like I had done with my own little Reach FI app.

No financial modeling. This is not a feature I'd really expect with Monarch but it would be nice. Personal Capital (now Empower) has a great retirement calculator and a way to simulate different future scenarios based on your net worth and history. For now, you'll just need two different tools and that's probably fair. Monarch is focused on the here and now, not the future. They are adding more and more investment-related features though like transaction importing.

If I've convinced you to try it out, here's my referral link again and I think you can even still use the MINT50 promo code to get your 50% off.

When you maintain an npm package you are maintaining a public API surface that will change over time.

This is a chore but if you're working on a large project with many teams of developers, who all own different packages, and you have to publish all those packages regularly, well... then it becomes a problem. Downstream consumers will raise their Slack pitchforks if you're not careful!

How do you track and monitor the changes to this public-facing API in a large project like a monorepo?

We use a basic approach is a combination of codeownership and convention-based module tests using Jest inline snapshots which I explain below.

One of my colleagues came up with this idea, thanks Anders! 🙏

What's exported from a package?

In JavaScript (or TypeScript) projects, we use the export keyword to expose an API in the module index, you've likely seen this:

export * from './wood-cutting';
export * from './camping';
export { useFishingContext, useFishingHook } from './fishing';

There are 2 things to note here:

1. We have no idea what is being exposed from wood-cutting and camping modules. We have to dive into and follow the export chain to figure that out.
2. We have a good idea of what is being exposed from fishing

One approach when building a consumer-facing package like this is to use explicit named exports in the index module (we will set aside the fact you can deep import, something which we've disabled through eslint in our projects).

Export star is a double-edged sword

It's very common for the internals of a package to use export * for exposing folder-based modules and for namespacing. This is nice because it makes it much easier to maintain inside the package.

But when it's used to expose things at the top level it introduces maintenance complexity – because we don't know what's exposed to the public.

You could enforce always being explicit in the root module and that can work. However, it could also be burdensome when a module has 100s of exports (should it be split? That's a different discussion).

Even so, we still have a problem on Big Teams.

Mo' monorepo, mo' problems

We have 80+ packages in our monorepo. All packages get released at once weekly. Packages are owned by multiple teams and we have 80+ engineers working in this repository.

What we've seen is the following problems can happen over time:

1. A new API is added but someone forgot to export it
2. A new API is added and it automatically gets made into a public API even though it was supposed to be internal
3. An API was removed and is no longer exported
4. An API was changed and its behavior changed

The fourth issue should be handled through tests and socializing the fact that downstream consumers will be affected. We use deprecation notices and migrations so folks make that process easier which updates the CHANGELOG and can run/record commands with versioning.

So let's focus on the first three and a quick process we implemented to help track changes to public module exports.

The module exports test

You will be disappointed by how simple this ends up being 😅

We use GitHub CODEOWNERS to tag a special "custodial" group when certain things change in the monorepo: think package.json dependencies, yarn.lock files, and now, module export tests.

A module export test is a regular test file that imports the surface area of a module and tracks a snapshot of the public-facing interface over time. Combined with a CODEOWNERS file, this means teams will be notified if a contributor ends up changing the public API surface by adding an API, removing an API, or renaming an API so it can be reviewed for whether it requires a migration or deprecation notice.

Here's an example that should illustrate the idea:

/* packages/survival/__tests__/module.test.mjs */

import * as moduleExports from '..'

describe("module exports", () => {
    
  it("should not change unless reviewed by owners and custodians", () => {
      
    expect(moduleExports).toMatchInlineSnapshot(`
Object {
  "collectFirewood": [Function],
  "cutWood": [Function],
  "getCampingSite": [Function],
  "useFishingContext": [Function],
  "useFishingHook": [Function],
}
`);
  })
})

And the corresponding CODEOWNERS entry for some of our conventions:

# Custodial Ownership
module.test.mjs       @custodians
yarn.lock             @custodians
package.json          @custodians

# Team Ownership
/packages/survival/   @survivors

You can check out a tiny sample repo to play with it.

This was a quick and easy way for us to help track package changes and notify the owners if someone outside their team managed to change the public API.

This won't solve everything

It's important to mention that this doesn't help with signature changes.

We use TypeScript so we could take the same approach against the root index.d.ts that gets generated for dists but that would likely have to be done separate from Jest. We've talked about centralizing the module tests in one place which consumed the dist packages instead of being within the package. This would allow us to do more kinds of tests/checks.

This is just one small example of interesting scaling issues monorepos present which is why investment in tooling is critical.

What pains have you run into using monorepos or on large repositories? What have you done to alleviate that pain?

Let's say you have the following DbUser type:

interface DbUser {
  id: ObjectId;
  employer_id: ObjectId;
  
  name: string;
  age: number;
}

What would you do if you wanted to create a new type UiUser that was the same but with the ObjectId type annotations changed to string?

Overriding specific property type annotations of another type

Here is what my proposed solution looks like:

interface DbUser {
  id: ObjectId;
  employer_id: ObjectId;
  
  name: string;
  age: number;
}

type MapObjectIdToString<PropType> = 
  PropType extends ObjectId ? string : PropType;

type MapDbObject<T> = {
  [PropertyKey in keyof T]:
    MapObjectIdToString<T[PropertyKey]>;
}

type UiUser = MapDbObject<DbUser>;

The MapDbObject<T> helper will take the type T and convert any of its properties with a type annotation ObjectId and replace it with string. This scales to handle any number of properties and only requires a single type alias per usage.

This question was inspired by a colleague at work asking about sharing types between a TypeScript app with a MongoDB backend.

How did we arrive at this approach and how does work exactly?

Ways That Don't Work

There were a few ways we tried that didn't work.

Overriding an interface with extends

Could you "override" a property by extending the interface?

interface DbUser {
  id: ObjectId;
  employer_id: ObjectId;
  
  name: string;
  age: number;
}

interface UiUser extends DbUser {
  id: string;
  employer_id: string;
}

Unfortunately, interfaces cannot redefine the type of an inherited (or ambient) property:

Interface 'UiUser' incorrectly extends interface 'DbUser'.
  Types of property 'id' are incompatible.
    Type 'string' is not assignable to type 'ObjectId'.(2430)

Overriding interfaces using intersection

What about trying to intersect two interfaces? Would putting the second type last "override" the first?

interface DbUser {
  id: ObjectId;
  employer_id: ObjectId;
  
  name: string;
  age: number;
}

interface IdAsString {
  id: string;
  employer_id: string;
}

type UiUser = DbUser & IdAsString;

var foo: UiUser = { id: "abc" }

It almost works except that id is unioned so the resulting type is string | ObjectId 🤦‍♂️

However, we are getting closer. We can use type aliases to redefine or re-map property types in pretty powerful ways.

Overriding properties using the Omit helper

Initially my colleague tried a combination of using the Omit helper and intersection types:

type UiUser = Omit<DbUser, 'id' | 'employer_id'> & {
  id: string;
  employer_id: string;
}

For simple cases, this works fine. The problem is that this won't scale with multiple ObjectId properties since they'd have to enumerate them in the Omit helper and intersecting object. It would create a maintenance nightmare.

Since we want to scale we can introduce some more language features of TypeScript. 🙌

Using mapped and conditional typing to transform types

I love TypeScript because there are features in the language that let us achieve really granular business rules like this.

The two features I leaned on for this were Mapped types and Conditional types.

Mapped Types

This is a "mapped type" in TypeScript. It follows a pattern of using a "property key" index expression:

type MapDbObject<T> = {
 [<PropertyKey> in keyof <SourceType>]: <ReturnTypeExpression>
}

An indexing expression is similar to what indexing looks like for JavaScript objects like user["name"]. We'd normally write that as user.name but sometimes we have a variable that represents the property to retrieve like user[nameField].

In a TypeScript mapped type, the expression inside the brackets tells the compiler two things: what to label the matching PropertyKey and what to assign the value of the match (in keyof T). The in keyword essentially makes this an iterable expression (like the JavaScript expression "name" in user). keyOf is an operator that can be used in any type expression.

So to translate the left-hand bracket expression:

Match all property key names in the type T and assign them to the type alias Property

Imagine substituting the type and seeing the list of properties enumerated by the compiler with the expression keyOf User:

• id
• employer_id
• name
• age

If you imagine the intermediate steps, this is what is substituted in that left hand expression:

type MapDbObject<T> = {
 [Property in keyof T]: <ReturnTypeExpression>
}

type UiUser = MapDbObject<User>;

// Intermediate step for left-hand substitution:
UiUser {
  id: <type?>;
  employer_id: <type?>;
  
  name: <type?>;
  age: <type?>;
}

I hope this sort of makes sense. Next, the right-hand side of the map expression will tell the compiler what <type?> is supposed to be.

This means if we provided T[Property] as the right-hand expression we would be redefining the DbUser type verbatim:

// if passing the same exact type (Property)
type MapDbObject<T> = {
  [Property in keyof T]: T[Property]
}

type UiUser = MapDbObject<DbUser>;

// it would map to the equivalent type

UiUser {
  [id]: DbUser["id"];
  [employer_id]: DbUser["employer_id"];
  [name]: DbUser["name"];
  [age]: DbUser["age"];
}

UiUser { 
  id: ObjectId;
  employer_id: ObjectId;
  
  name: string;
  age: number;
}

The T[Property] expression in TypeScript returns the type of that property e.g. DbUser["id"] returns the (type) value ObjectId.

This is close but obviously not what we want. At this point, we want to say "return string if T[Property] is ObjectId".

To accomplish that, we can use conditional typing.

Conditional Typing

Let's add a conditional type expression on the right-hand side of the mapping expression:

type MapDbObject<T> = {
  [Property in keyof T]: 
    T[Property] extends ObjectId ? string : T[Property];
}

I hope this feels a bit familar and maybe you can intuit what this does.

It says:

If the property type T[Property] extends the type ObjectId
Then substitute the property type as string
Else use the original T[Property] type

So once again, the intermediate compiler steps might look like this:

type MapDbObject<T> = {
  [Property in keyof T]: 
    T[Property] extends ObjectId ? string : T[Property];
}

type UiUser = MapDbObject<DbUser>;

// intermediate steps, substituting T[Property]

UiUser { 
  id: ObjectId extends ObjectId ? string : ObjectId;
  employer_id: ObjectId extends ObjectId ? string : ObjectId;
  name: string extends ObjectId ? string : string;
  age: number extends ObjectId ? string : number;
}

UiUser { 
  id: string;
  employer_id: string;
  name: string;
  age: number;
}

Et voila! We have now overridden just the ObjectId-based properties id and employee_id without affecting name or age.

Refactoring for readability

I love TypeScript but it gets a bad rap for readability. I understand this but there are ways to make type expressions more readable and it's the same as in regular programming: extract expressions to named things.

Since the right-hand expression is a bit unwieldy and not very descriptive I opted to extract it into its own named alias to make it clearer and simplify the usage:

type MapObjectIdToString<T> = T extends ObjectId ? string : T;

type MapDbObject<T> = {
  [Property in keyof T]: MapObjectIdToString<T[Property]>;
}

The MapObjectIdToString takes the type to inspect T and performs the same conditional expression. At the consumption site, we are passing the type of the property T[Property] which we were doing previously but now we only need to provide that once.

At this point we could be really verbose and clear and rename the type aliases to be specific to the domain they deal with (i.e. MongoDB entities in the real-life example):

import { ObjectId } from 'mongodb';

type MapObjectIdToString<PropType> = 
  PropType extends ObjectId ? string : SourceType;

type SerializedMongoEntity<TMongoEntity> = {
  [PropertyKey in keyof TMongoEntity]:
    MapObjectIdToString<TMongoEntity[PropertyKey]>;
}

I will let you determine how verbose you'd prefer to be! I like things to be really clear about their intended usage 😁

Let the types flow

Using generic, mapped, and conditional types are definitely more complicated but I hope you can see how the types flow now through that generic substitution and why these features make TypeScript incredibly powerful. Using them together allows you to be more specific while leaving the rest of the object alone.

You can find a working example of this snippet on the TypeScript Playground.

I am calling this a proposed solution because TypeScript always surprises me with its power. Do you have another way to achieve the same result? I'd love to hear it.

Appendix: How do you handle nested types?

As a follow-up question, Saravanan asked how to handle nested objects. The answer lies in recursive types.

Here's a link to the answer!

Typescript - convert type of mongoose ObjectId to string when sharing between backend and frontend

I am trying to create few types based on mongo schema models and sharing the same with front end in mono repo.Example type:import { Types } from "mongoose"; export interface Profile {

Stack OverflowSaravanan S

I am excited to release a new open source package cypress-browser-permissions. 🎉 You can view it on GitHub at kamranayub/cypress-browser-permissions.

This package solves a real need when testing more sophisticated applications when using Cypress, the end-to-end testing framework. It helps control the permission level of various browser features such as:

• Desktop Notifications
• Geolocation
• Images
• Camera
• Microphone
• etc.

How to Use It

To get started, you'll need to install the package and you'll need Cypress installed already.

npm i cypress cypress-browser-permissions --save-dev

If this is your first time installing Cypress, you'll need to run it once to generate a project structure:

npx cypress open

Then, you need to initialize the plugin to hook it into Cypress' plugin pipeline. In cypress/plugins/index.js, modify it as follows:

+ const { cypressBrowserPermissionsPlugin } = require('cypress-browser-permissions')

/**
 * @type {Cypress.PluginConfig}
 */
module.exports = (on, config) => {
  // `on` is used to hook into various events Cypress emits
  // `config` is the resolved Cypress config
+ config = cypressBrowserPermissionsPlugin(on, config);
+ return config;
};

Now you will have the ability to control various permissions for Chrome, Edge, and Firefox using Cypress environment variables.

For example, if you want to just set permissions for your project you can do so in cypress.json:

{
  "env": {
    "browserPermissions": {
      "notifications": "allow",
      "geolocation": "allow"
    }
  }
}

The plugin will read the permission settings and apply them when launching the browser. It will also reset between launches since modifying the browser profile is persisted across sessions.

You can read more about supported permissions and values in the README.

Writing an End-to-End Notification Test

So let's try it out! Once I finish my Testing Progressive Web Apps Pluralsight course, it will come with an open source sample app. In the meantime, we can write a basic test to see if permissions are working. This same test is included in the repo.

First, we have an HTML file that uses window.Notification to display a desktop notification:

cypress/html/notification.html

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Cypress Notification Test</title>
</head>
<body>
    <script type="text/javascript">
        const n = new window.Notification('test', { body: 'This is a test!' })
        n.addEventListener('show', (e) => {
            window.__CypressNotificationShown = e;
        })
    </script>
</body>
</html>

You can learn more about how the Notification API works but what we are doing is immediately triggering a notification. Once the browser shows the toast, it triggers the show event on the Notification instance. Since Cypress is awesome and we can hook directly into the window object, we set a callback value globally that we can then inspect/wait for in our test.

If you have a blank Cypress project you do not even need a server as Cypress will automatically host the root of the project when there is no other configuration.

Save the notification.html file under cypress/html and then we can visit that page in the test.

We can create a test suite in cypress/integration:

cypress/integration/notification.test.js

import { isPermissionAllowed } from 'cypress-browser-permissions';

describe("notifications", () => {
    it("should be enabled", () => {
        expect(isPermissionAllowed("notifications")).to.be.true;
    })

    // Only test notification showing in "headed" browsers, which also
    // works in CI :tada:
    Cypress.browser.isHeaded && it("should display desktop notification", () => {
    
        // Visit the page we created previously
        cy.visit('/cypress/html/notification.html')
        
        // Wait for the window callback to populate with the event data
        cy.window().its('__CypressNotificationShown').should('exist');
    })
})

Now we can run our tests:

npx cypress open

That's all! If browserPermissions.notifications is set to allow then our test should pass:

And a notification will be shown!

How It Works

In Cypress, you have control over the launch preferences for browsers, so the magic lies in what preferences to pass to each browser.

This topic is not heavily documented as evidenced by this open issue in the Cypress repo I came across while researching this. It has been open since 2018 with no one mentioning the ability to control launch preferences.

Thanks to BrowserStack for documenting some of these permissions as well as these StackOverflow posts:

• Selenium + Python Allow Firefox Notifications
• How to allow or deny notification geo-location microphone camera pop up

I was able to piece together the information needed to tackle this with a Cypress plugin. Since each browser family uses different preferences, I thought it would be best to abstract it.

What's Next?

My hope is that this package is actually short-lived and the Cypress team can incorporate these permission settings into the core of the product, since it's such an important feature especially when testing new, modern APIs.

There will be a full sample of using Cypress with this plugin (as well as other black magicks such as bypassing service workers and more!) in my Testing Progressive Web Apps course soon on Pluralsight. It should be released in August, you can follow me there to get notified when it releases. The sample app will be open source on GitHub so you'll be able to reference it 👍