In an era where AI is reshaping everything from search engines to social media, and data privacy feels more like a myth than a guarantee, I decided to take back control—starting at home. My homelab serves as both a tech playground and a personal fortress of autonomy. It gives me the freedom to run the services I rely on, store my data securely, and explore new technologies without handing over my digital life to third parties.

This setup isn’t about breaking things or chasing enterprise-grade complexity. It’s about building a space where I can experiment safely, learn continuously, and most importantly—own my data. And here’s the best part: you don’t need deep pockets or racks of expensive gear to get started. With a bit of curiosity and repurposed hardware, anyone can build a homelab that empowers them in this increasingly centralized digital world.

In this post, I’ll walk you through my setup, the tools I use, and how you can start your own journey toward digital independence—without spending a fortune.

[PS: Introduction drafted by AI!]

Nothing fancy here!

Before we dive in, i want to emphasize on how basic my home-lab is!

Hardware Components

I am starting by using existing hardware.

Servers

For always on machine, I am using a Raspberry Pi. Things that qualify for this are:

• Pi-hole (DNS & Network wide Add block)

• Nginx Proxy Manager (Subdomain Routing & SSL Certs)

• Home Assistant (Smart home)

• n8n (Automation like Zipier)

For a little more demanding app, I am using an old laptop. Its not in the best shape, but with Core i7 and 16GB RAM, it is quite capable of handling reasonable workloads, with some ML use cases (like face recognition). I have upgraded it to a 1TB SSD instead of its old HDD. This machine is on during the day and suspended during night. It is hosting:

• Immich (Photo organization and sharing app like Google Photos)

• NextCloud (Cloud drive storage like One Drive, G Drive)

For more demanding workloads like video transcoding or LLM related tasks, I am using my Main PC (Ryzen 9, 32GB DDR4 RAM, RTX 3070). It has a primary 1TB SSD, with additional 2 4TB HDD. This is turned on only when needed as its highly power hungry, and I cannot afford to reduce its life by having it always on. This hosts (or will host):

• Plex/Jellyfin (Media streaming)

• Open Web UI (UI for local LLM chat)

• Ollama (Run Open source LLM model locally)

Networking Gear

For router, I am continuing to use the ISP provided router with limited configuration. This is one section I am looking to upgrade in the next phase.

Only the Pi is currently connected via LAN; everything else is on wireless.

Connection Diagram

Network

Now let us understand why a component is there.

Pi on LAN with static IP

My router does not have the option to assign static IP to devices. By being on the LAN, and trying to reserve a higher IP value, my PI stays on that same IP. The router has a small power backup, but sadly the pi will die when power goes off. Since it auto starts and all services running on it also auto start, it is not a problem for now. Having a static IP enables me to add that IP in devices like TV where I cannot install a VPN client.

Tailscale (VPN provider based on Wireguard)

When everything is on my local network, I can get away with not using a VPN, and having every service available locally. But If I want my family to have access to some service, they will not be able to connect when outside my network. Moreover, they will not be able to remember machine names or IPs (which will keep changing randomly), and not to mention that the annoying security warning for missing TLS. Having a mesh VPN like Tailscale, allows me to assign each server machine a static IP that can be accessed only when folks are on the same Tailscale network. This solves 2 problems at once, accessibility with static IP as well as security. Other people I want to share with will need a Tailscale network of their own, and I can share my Pi with them.

I have a custom DNS running on Pi-hole (more on this later), and my Tailnet is set to use the Tailscale IP of my Pi.

Cloudflare DNS

We need a public facing DNS for issuing TLS certificates for my domains. The Cloudflare DNS is a catch all subdomain entry pointing to my Tailnet IP of Pi.

Example domain entry:

*.homelab.example.com → 100.80.50.60

Pi-Hole (Ad-blocker + DNS)

This is the first service that I set up on my homelab. It works by blocking DNS requests to well known ad services. As long as other devices are using this as DNS, it will block out most of the adds. For phones and laptops connected to my Tailnet, it will automatically use this as we had set it up in the Nameservers.

Another task it performs is a local DNS server. We have a reverse proxy exposing my services at a subdomains under my own domain. It can be set up like shown below. The DNS Domain points back to the server running the reverse proxy (in this case its the same machine). The CNAME records each list out the subdomains and link it to the domain we set on the left.

Example entries:

DNS

homelab.example.com → 192.168.0.50

CNAME

• pihole.homelab.example.com → homelab.example.com

• home-assistant.homelab.example.com → homelab.example.com

Nginx-Proxy-Manager (Reverse Proxy)

This is a core component that exposes subdomains for each service. It works with LetsEncrypt to get SSL certificates from Cloudflare. Interestingly it seems it auto-renews certificates, something i was not aware of until i got messages from Cloudflare. These subdomains are then needed to be added to Pi-hole CNAME records. Even if the services are not using HTTPS, Nginx takes care of ensuring traffic is encrypted while in transit. Also note, it can expose services running on other machines as well, either though static IP (if available), or Tailscale IP (I am using this as i don't have static IP).

So Pi-hole + NPM together serve as a single entry point to the whole home network, and the only device that needs to be shared with other users to allow access.

Conclusion

This is a very good starting point for a personal homelab using existing hardware (almost no cost). I am running all services using simple docker compose. I am not concerned with redundancy or high availability as its just me and my wife using it (will expand out to parents), and we can live with downtime. Not all corporate fancy stuff needs to be incorporated in a simple setup.

The part that is currently giving me bad sleep is lack of Backup strategy. If any of the storage devices fail, I'll be at a loss. Have some ideas, but have not got around to trying it out. I have a lot of space on my desktop, but having backup software like BorgBackup over network is turning out to be a pain. Once I fix that, will update that step.

If you are experienced with homelabs, let me know what I can improve, or how you are handling backups across machines!

ML lifecycle - https://www.coursera.org/learn/introduction-to-machine-learning-in-production

This course introduces us to the ML lifecycle and some real life examples (yes, ML is not just used to predict house prices on a Jupyter notebook!). It walks through the different phases.

• Scoping - What projects to work on, what values it brings, what metrics to use when measuring performance and some ballpark resource estimates.

• Data - How much data is needed and where it comes from. Ensure data is labelled consistently and establish baselines.

• Modelling - Instead of a model centric view (optimizing code & hyper-parameters), optimize data & hyper-parameter.

• Deployment - Deploy and monitor for performance, data drift, and concept drift. Go back & tweak model & data to stay relevant.

Let's take a deeper look at the steps, in reverse order.

Deployment

There are a few deployment patterns:

• Canary deployment - roll out to a very select few, monitor & ramp up gradually. Great for new projects with not well defined baselines.

• Shadow mode - Where human are in charge of decision, but a ML system too predicts & its performance it tally-ed with human operators & tweaked till required confidence is achieved.

• Blue/Green deployment - That gradually routes traffic to the new system (green), and in case there is any issue, it is rolled back to the previous version (blue). Ideal for upgrade situations.

Once the system is deployed, it needs to be closely monitored.

• Have dashboards and set relevant alerts. Brainstorm metrics to track and alert thresholds, but being an iterative process, can be altered with time.

• Often ML systems have pipeline, and changes trickle down. Need to closely tap on to important nodes in the process.

Modeling

Some key challenges in modelling are as follows:

• It needs to do well on training set, test set and also fulfill business goal.

• Often some segment of data is disporportionately important, example - searches for specific websites vs searches for recipes.

• The model should ideally be free from biases & social prejudices.

• Perform appropriately for rare classes, like medical screening of a rare disease.

To judge the performance of a model, it is crucial to have a baseline against which it could be held up to and define what is irreducible error (Bayes error). Some ways to estimate that are:

• Human level performance (HLP) - great for unstructured data (image, audio, ...)

• Literature search (published papers) or open source implementations. Often decent algorithm with good data will outperform smarter algorithm with worse data (remember GIGO?)

• Quick & dirty implementation

• Performance of older system (if any)

Once a model is shortlisted, it's performance is evaluated and error analysis is done to find the next step. A good way to start is manually going over ~100 or so examples and tag why they were misclassified. based on the difference between the ML model and HLP on tags, and their expected distribution it is decided how to boost those tags.

For skewed datasets, precision-recall and F1 score are better metric than accuracy.

In case of less data, data augmentation can be used (like adding different noises in image and audio, tweaking brightness/contrast of image or video). But augmentation should be realistic - adding stadium noise to a hospital system might not help.

For big models and clear input to output mapping, more data seldom hurts, but for smaller networks or unclear mappings, augmented data might overfit the system.

As an alternative to adding data, adding features too can help, but generally useful in structured data scenarios.

With a highly iterative step of modelling & evaluation it is essential to keep track of what all was tried and how well it turned out. It can be done using text files, spreadsheets or more complicated experiment tracking sytems (Weights & biases, ML Flow, SageMaker, ...). It should track:

• Algorithm/code version

• Dataset used (processing done if any)

• Hyper-parameters

• Results

Data

In this phase, it is defined what input x is and what output y is desired.

Types of data problems - https://www.coursera.org/learn/introduction-to-machine-learning-in-production

• For unstructured data, HLP can generally be evaluated, and augmentation likely to help.

• For structured data, HLP & augmentation is difficult.

• For small data, clean labels are crucial.

• For larger data, data processing pipeline becomes crucial.

When label consistency is required it is often beneficial to discuss among labelers and SME and define and document the output category. It might be needed to have some data have ambiguity and have a new label to denote that.

We should not spend too long to acquire data. Getting into the iterative process as fast as possible is helpful as it illuminates where to focus effort. In case of a well documented domain (like spam filter), when folks know what data works best, it is recommended to spend more time to get good data at the get go. As for data sources, chosing one (or more) depends on monetary cost, timeline and volume of data needed or available.

During the initial (POC) phase, data cleaning and feature extraction can be local scripts of notebooks, but then a proper pipeline needs to be set.

It might be beneficial to keep track of metadata (camera settings, geotag, device type, ...). It is useful for error analysis data provenance.

It is crucial to have same distribution in train, dev and test sets. Use "startified" to get splits.

Scoping

What problems to work on, what is the metric of success, what resources are needed?

• Feasibility - Is is feasible technically? What is HLP? Are there features that are indicative of outcome?

• Value - Engineers & business metric are generally different, and needs establishing a common ground. Also needs ethical considerations - societal benefit, free from bias, ...

• Milestones & Resourcing - Ballpark estimations (ML metrics, Software metric, business metric, resource, timeline).

With this knowledge under my belt, I am happy to share my 1st certificate in this specialization.

Course Completion Certificate - https://coursera.org/share/85a7ccaba778f72a53147f1d0bcb84de

1. Maccy Clipboard Manager

If you're used to the Windows clipboard, you'll be happy to know that Mac has a clipboard too. But the Mac clipboard only remembers the last item you copied, which can be frustrating. That's where Macy Clipboard Manager comes in. This free software keeps track of everything you copy and paste, making it easy to access your clipboard history.

If you check it on the Apple App Store, it is a paid app, but being an open source software (https://github.com/p0deje/Maccy), you can get it for free using Homebrew.

brew install --cask maccy

While it works pretty well out of the box, but to get the same feel as windows you'll need to make a couple of adjustments in the app's preferences.

• Change the hotkey to ⇧⌘V (General Tab)

• Ensure "Paste automatically" is checked (General Tab)

• Ensure "Popup at" is set to "cursor" (Appearance Tab)

Now enjoy the peace of copying stuff until you are ready to paste!

⚠️ Please ensure to disable it when copying passwords, or clear it manually after using it for passwords.

2. Rectangle Window Tiling

If you're used to Windows' snapping feature, you'll love Rectangle window tiling. This free software allows you to easily resize and position windows on your Mac by dragging them to the edge of the screen. You can also use keyboard shortcuts to resize and position windows. There are a lot of good defaults involving 2 ways splits, 3 way splits, 4 way splits and much more.

This app too is open source (https://github.com/rxhanson/Rectangle), and can be installed using Homebrew.

brew install --cask rectangle

Another great feature I love is the Todo Mode. While it feels a little off in a smaller screen, but great for a wide screen monitor. It can pin a app to the left or right of the screen with a set width, the rest of the screen can then be used for single or multiple apps, and the resizes honors the Todo space.

3. Hidden Bar

As we keep adding apps and widgets, the bar grows until it hides behind the notch (yet to find a free utility to fix this). While we can reorganize it, it still creates visual clutter. This app allows to send some of the icons off to an expansion space that open on clicking the chevron. You might need the menu bar icons for Maccy and Rectangle for a few days to get used to the keyboard shortcuts, and then they can be hidden! Similarly other stuff that are not required frequently can be hidden.

This app is available for free at the App Store, and also can be installed using Homebrew.

brew install --cask hiddenbar

4. One Thing

This one is for the minimalist in you. You can pin one important task to the taskbar that will help you stay focused during the day. This is not liked to any other todo or productivity app, and needs to be set and reset manually.

This app too is free on the App Store (https://apps.apple.com/us/app/one-thing/id1604176982), and sadly is not available on Homebrew.

5. Hand Mirror

Need to check if the room background is tidy enough or there isn't spinach stuck between your teeth before a zoom call, this is a nifty little tool. It shows your camera view in a short popout window.

Again, this is available for free on the App Store (https://apps.apple.com/us/app/hand-mirror/id1502839586), and sadly is not available on Homebrew.

Conclusion

Switching from Windows to Mac can be a daunting task, but with the help of handy software the transition can be a lot smoother. These free Mac software ensure you are at your top productivity. Give them a try and see how they can improve your Mac experience!

There are a lot of simple templates available to jumpstart, and they are compatible with GitHub Pages. You just start writing Markdown files and you can have a site up and running in no time! But oftentimes, it will not be optimized. Here is a list of things that are often not part of a free template:

1. Google Analytics
2. Sitemaps
3. RSS/ATOM feed
4. E-mail Subscription
5. Comments
6. Progressive Web App (PWA)

All these results in a suboptimal experience for the users. With some simple enhancements, we can boost up the Lighthouse score of our site a lot. Site Score on Lighthouse

Excellence/Perfection is not a destination; it is a continuous journey that never ends. - Brian Tracy

TLDR: Show me the code Show me the site

⚠ Prerequisite Alert: This article will assume you have a basic understanding of how a Jekyll site works. Refer to the Folder Structure for a quick overview of the project resources.

Adding Google Analytics 📈

Head over to Google Analytics and click Start Measuring. You can follow the steps to enlist your webpage. If you want a step-by-step guide for the same, check the official doc. Once that is done, head over to the Jekyll project and add the GA property id in _config.yml as:

google_analytics: UA-XXXXX

You would probably want analytics to run on all thee pages, and hence need to add the script at the base layout. For most projects it should be at _layouts/default.html. Add the following in the head section:

{% if site.google_analytics %}
<script async src="https://www.googletagmanager.com/gtag/js?id={{ site.google_analytics }}"></script>
<script>
    window.dataLayer = window.dataLayer || [];
    function gtag() { dataLayer.push(arguments); }
    gtag('js', new Date());
    gtag('config', '{{ site.google_analytics }}');
</script>
{% endif %}

Now, this you can use in all your future project templates. This will not be rendered when you do not specify the google_analytics key in _config.yml

Sitemap 🗺

Sitemaps are documents (can be .txt, or .XML) that list the locations in the webpage. They help search engine crawlers to crawl all the pages of your site for better search results. This can be easily added using a Jekyll plugin:

plugins:
    ...
    - Jekyll-sitemap
    ...

This should generate a page at the root level /sitemap.xml. You can now add this to Google Search Console and enjoy indexing benefits!

RSS/ATOM Feed 🔔

There is again an easy way out with the jekyll-feed plugin. Add the plugin, do a bundle install and the feed should start appearing at /feed.xml.

plugins:
    ...
    - Jekyll-feed
    ...

Now your users can subscribe to the feed to get notified when you write a post!

E-mail Subscription 💌

If you want to give your users a way to be contacted when you want to announce something, you can set up an email subscription. One popular option is to use MailChimp. There is a free tier that should be sufficient for most starting bloggers. Once you set up an account there, Click on Create > Signup Forms > Embedded form Now you can copy the code given and paste it under _includes. You can modify the HTML and CSS to make it look and feel in tune with your existing theme. Assuming you created a partial called mailchimp.html, you can include it in different layouts. After adding my customizations, it looks like this. Much better right?

Comments 💬

There are some options in this space. Some have privacy concerns, while other need hosting. So a hacky way is to use GitHub issues as comments. Some wrappers make it easy. One such example is Utterances. It is simple and easy to set up. Just add permissions to the repository and add a small script in the layouts that require comments. Ensure to add async to ensure it does not impact load time.

Progressive Web App (PWA) 📱

Enhancing a web app to a PWA has certain benefits. It will take more than a series to explore the nitty-gritty details of PWA (I'll keep adding articles). For a brief introduction, you can check my post on JS Service Workers. In this section, we will enable the PWA feature with a basic manifest.json and install a service worker that caches the pages when you visit them so that you can still use the site when offline. For this, I have mostly followed the tutorial from Meteoric Teachings by Alok Prateek. After you are done with the changes, Lighthouse (Chrome inspector tab) nags about a few things. You can read the details about those by checking the reference links in the Lighthouse tab. Let us fix those!

Custom Splash Screen

Add an icon asset to the manifest.json file that is at least 512x512.

Maskable icon

Add a maskable icon in the manifest.json file which is at least 192x192.

{
    "src": "/assets/images/gt-logo-maskable.png",
    "sizes": "240x240",
    "type": "image/png",
    "purpose": "maskable"
}

You can turn an image to its maskable format using the Maskable.app Editor

Apple touch icon

Add a link tag in the head of the default layout.

<link rel="apple-touch-icon" href="/assets/images/logo.png">

Bonus SEO optimizations 🧪

• Add description and title to all the pages/posts
• Add thumbnails for social media share

  <meta property="og:image" content="{{site.url}}{{site.baseurl}}/assets/images/page-img.jpg">
  <meta property="twitter:image:src" content="{{site.url}}{{site.baseurl}}/assets/images/page-img.jpg">
  

Figuring out the problem

I started checking my system whenever it froze. I always had the Task Manager running. The RAM was barely a problem. CPU peaked from time to time when I had too much going on in my system. The only anomaly seemed to be the disk, which was almost always 100% utilized. While I do have Macafee running, I left my system open overnight for a manual scan. As expected, there were no threats found. My spouse has a new HP laptop with i7 9th Gen, 16 GB DDR4 RAM, and 1 TB SSD which loads up in under 10s! So maybe changing that would help.

Getting the supplies

Time to hit Amazon. As I am not very knowledgeable about hardware, I had to depend on the ratings and chose Crucial MX500 1TB SSD (~$130). I checked out the 2TB version, but it was way too expensive, about double the 1TB one. I was using about 1TB of storage on my system, but I moved my camera backups and downloaded movies and series to my external HDD. Next, I needed a SATA to USB3 connector to clone my existing disk, and a precision toolkit to dismantle the laptop. It all took me about INR 10,000 (~$135).

Compatibility

There are a few types of SSD available with different form factors and connectivity options. Before you head out to purchase, just check for compatibility. You'll most likely need a 2.5" SATA device, but you can ensure that here Crucial Advisor.

Cloning the disk

I used Acronis True Image to clone my disk. I used the SATA to USB3 connector to hook it up with my system. If you have both USB2 and USB3 ports on your system, ensure to plug it in the USB3 port. The good thing about this is it can clone a larger disk into a smaller SSD as long as the data is less than the SSD capacity. You can map partitions proportional to the existing one (600 GB partition on HDD will get mapped to 300 GB partition in my case), or manually adjust the space. It takes quite a while to do it and might restart the system.

Swapping the disks

Now is the time to awaken the little hunter-gatherer part of you and get the tools! It is a good idea to go through a video that describes how to open your specific model, but I would list down the steps that I followed.

1. Unscrew all the screws on the back of the laptop. Keep a track of which screw goes back where. Not all screws are made equal!
2. If you have an optical drive, pull it open, and unscrew any screws there.
3. The trickiest part is to pry open the front panel. If the back lid comes off after unscrewing, you will not need this step.
4. Ground yourself. This is a very important step.
5. It is recommended to disconnect the battery. (I did not do it because it would have required some more unscrewing.)
6. Unscrew the HDD and then remove any other brackets/cradle holding it.
7. Disconnect the SATA cable. It might be fixed tightly, so pull it by the plastic end. If you tug at the flat cable, it might tear off from the connecter (I almost did that! It was scary)
8. Now keep the HDD aside, and assemble the SSD with the aforementioned brackets/cradle.
9. Connect back the SATA cable, and screw it back to the board.
10. If you had disconnected the battery, connect it back now.
11. Clip back the front panel (if you had to do step 3)
12. Put back the optical drive.
13. Screw all the screws back.

On powering on, you should see the familiar Windows welcome screen!

Problems with Dual-boot setup

I first logged into my Ubuntu instance, and everything was working smoothly. But when I tried to get into my Windows, I started getting errors. I did not have a USB installer to fix it. After panicking for a while, I decided to dive into it deeper and opened the console in the UEFI loader (type c when on the loader screen)! I did a ls and found the different partitions with their details. Took a picture of that on my phone. Next, I checked the Kubuntu loader script (type e on the loader screen when that option is highlighted`). It was searching for something by UUID, and I had seen the same when listing partitions. So I made a note of the UUID from Ubuntu and patched the Windows script with the same. Alas, that did not fix it!

Next, I took a look at both the scripts and found that Windows was looking for a FAT32 partition. On referencing the partition list, I found one! I went ahead and put that in, and viola, my Windows was loading. It was a short-lived victory, as when I tried to restart, the change was dropped, and I had to manually change that again. So at this point, I could get into the Windows, but something was still wrong with the loader.

I tried a couple of utilities from the internet, but nothing solved the problem. I tried windows recovery, and that did not work either. I tried to solve the same from Ubuntu, but still the same. Finally, I got a way to get all the list of UEFI loaders and deleted everything apart from the Ubuntu. Weirdly enough, that fixed it!

Results

Due to my dual boot setup, I had to disable "fast startup". My system now loads in ~25 s, and is responsive from the instance I am logged in. Earlier this used to take ~3 min and even after logging in I would have to wait for about 5 min for the system to be responsive.

⚠ Disclaimer

If you are not well versed with laptop hardware or not comfortable with the terminal, you should avoid doing this yourself without supervision. Always backup your important files before tinkering with the system.

"An investment in knowledge pays the best interest" - Benjamin Franklin

There is no doubt that higher education is often crucial when you are trying to get into a specific niche in your domain (like Data Science, Machine Learning), or trying to bump up your pay grade, but it comes at a cost. Let me start with the warnings.

1. The finance

On-campus degree programs are often very expensive, and not all can afford them without scholarships. If you already have a loan from your bachelor's or have a family that is dependant on your current income, financing the education with a loan is a really bad idea. Do not fall for placement guarantees, and assume you would be that guy who bagged the maximum package of the year. Life happens, pandemic happens, geopolitical conflicts happen. While dreaming of a bright future, count the numbers in a pessimistic way. While a lot of online courses are now popping up, at a fractional cost of on-campus courses, they are still expensive.

Student Loan debt, from Prudential

2. The time

If you have taken some MOOCs along the way and under the impression that a degree program would be a similar experience, you are way off! To get the degree, you have to take a couple of subjects (the most popular is 30 credit hours that translates to 10 courses). Some of them might be a little easier, but most are not. In OMSCS, I easily spend 10-15 hours per week per semester and will increase as I take harder courses. Being a part-time student with a full-time job is quite stressful, so reevaluate if you are ready to sacrifice most of your social life for the next few years.

3. The purpose

Please do not do it just because people around you are doing it, or your parents want you to do it! For that matter, don't do it even if your company wants you to do it, but is not helping you with the finances (remember the first point). If you don't yearn for the knowledge, you will end up giving it minimum effort and getting through without learning much. If it is just the final piece of paper that you seek, real-life experience and projects will serve your resume much better.

4. Time of life

True everyone has their own timeline, and what works for me, might not work for you. But jumping into a master's right as you get your bachelor's degree might be a rush. A few years of industry experience is often a good eye-opener. The real world works quite a bit differently than the archaic books we study in our syllabus. The wisdom from your own experience will beautifully complement your knowledge from a Master's degree.

5. Industry knowledge

While an advanced degree will help you, they are still not at par with how the industry operates. If you seek pure technical knowledge to aid your existing job, a MOOC, or workshops are a better solution. And always RTFM!

Now, if you have the source to fund your education, the time to work on it, and a passion for knowledge, a Master's degree can do wonders.

1. Break your shell

We often think we know more than we actually do, which is due to the fact that we do not yet know what else is out there. The Dunning-Kruger effect demonstrates this in a simple way. So go out there and overcome that valley of despair!

Dunning-Kruger curve, from slidemodel

2. Make more neural connections

As we often work in a domain, we start specializing in that domain, and our knowledge of other domains starts phasing out. Getting an advanced degree gives you another chance to go back to the basics and dive deeper. This will give you an opportunity to dig at a problem from another perspective. It often will help you squeeze the last bit of performance for some optimization.

3. Make new social connection

This one is a lot easier and helps in the form of study groups when on-campus. For online courses as well there are discussion forums where you can meet amazing people. When doing group projects, or participating in a Piazza discussion, you learn so much. Also, the diversity (gender, geographical, academic) in an online degree program open our eyes to the biases we inherently possess.

4. Time management

Forget those hours of scrolling through reddit/instagram. Forget Netfix. Forget clocking in extra hours at work indefinitely. If you want to survive a rigorous degree program, you need to stick to a schedule. If you are a morning person, allocate a few hours in the morning to study; if you are a night owl, do it at night. Spend the weekends on projects/extra readings. And slowly you can ease back in an episode every few days, or a Friday night outing (pre Covid conditions). Check out my post on Time Management to learn more.

5. Get new opportunities

If you are looking for a pay raise or want to try out say Artificial Intelligence, a masters degree will often get you to the door. Keep in mind that it only leads you to the door, and you'll need experience and core knowledge to get yourself through. Do not expect a company to offer you a 50% rise just because you hold a degree. In case of on-campus programs, you are also exposed to research opportunities.

Conclusion

Now that we have a balanced pros and cons list, its your job to evaluate if the pros outweigh the cons in your specific case. Remeber that there will always be exceptions, but if everyone was an exception, there would have been none.

Disclaimer: This is a very specific problem. It is relevant only if you had a travis ci pipeline setup for your GitHub repository and using nyc and coveralls, and thinking of migrating to GitHub actions.

The Past

I followed this setup guide: Integrating with coveralls.io

The Problem

I thought of migrating the build pipeline to GitHub Actions, but was hindered by this error:

> js-big-decimal@1.3.3 coverage /home/runner/work/js-big-decimal/js-big-decimal
> nyc report --reporter=text-lcov | coveralls


/home/runner/work/js-big-decimal/js-big-decimal/node_modules/coveralls/bin/coveralls.js:19
      throw err;
      ^
Bad response: 422 {"message":"Couldn't find a repository matching this job.","error":true}
(Use `node --trace-uncaught ...` to show where the exception was thrown)
npm ERR! code ELIFECYCLE

Now time to reveal the solution:

The Solution:

• Edit the coverage script in package.json to use the default reporter of lcov

  "coverage": nyc report --reporter=lcov
  

• Modify the pipeline to use the official Coveralls stage

      - name: Test
        run: |
          npm run ci-test
          npm run coverage
  
      - name: Publish to coveralls.io
        uses: coverallsapp/github-action@v1.1.2
        with:
          github-token: ${{ github.token }}
  

If you need a working example, check JS Big Decimal

Web browser and search engine

DuckDuckGo is a private search engine and also has a mobile app. It does not track user queries. What this means is that you will stop getting all the customized results you saw on Google, which in turn translates to you spending a few more seconds to find your result. Does it replace Google? No. There are times I have a hard time finding a result, in which case I try Google. But now I give Google maybe 1 in 20 searches.

Browser extension

I already used to have AdBlockPlus, and it is great at removing advertisements from sites, but it was not enough. I came across Privacy Badger, an extension that disables popular trackers.

Social Media

Well, this one is tricky. You cannot just ditch Facebook/Instagram/LinkedIn/Twitter because you have all your friends and family there. So the next best thing you can do is time-bound those apps. Most smartphones come with a screen time limiter. Set the timer to say 30 minutes for Instagram and Facebook. Increase/decrease the time to your preference. Another thing to consider is getting polarised. You will often come across socially or politically charged posts and depending on how you engage with it, the platform will keep feeding you posts that mirror your belief system. An in-depth analysis is required before you take a drastic stand. Always listen to the other side of the story, check your sources, and do not recirculate "news" without validating authenticity.

Messaging

Lastly, addressing the elephant in the room, private chats. I had used Telegram, and it is quite functional. Due to the lack of group video calling feature, I switched to Signal. and its privacy features are amazing. Of course, it is end to end encrypted. All the messages are saved locally on your device, backup, if enabled is encrypted, photos, or files you send are encrypted and stripped of metadata. The list goes on. It is open-source and runs on donations.

eMail

I am still in the process of exploration and might add more to this. I encountered ProtonMail and think it will suit my needs for now. The free plan has 500MB of storage and the monthly plans are a tad expensive.

Government's role

Most companies have a separate set of rules when it comes to European countries. If you are a developer in a company that processes European data, you'll have encountered compliance training dedicated to GDPR (General Data Protection Regulation). The Government has taken stringent measures to ensure data about its people is not misused. More countries should take a stand and make a legal barrier against the monetization of private data.

Individual's role

Be aware of the applications you use. Glance through the data privacy section of terms and conditions. Know your biases, and take important decisions addressing those. Finally, shout out and contribute to open source projects that value data privacy. You as an individual have an important role in keeping the open-source community thriving.

Transition Summary (TLDR)

• Google -> DuckDuckGo
• Chrome (Mobile Browser) -> DuckDuckGo (Mobile Browser)
• AdBlockPlus -> AdBlockPlus + Privacy Badger
• Social Media -> Limit Time, Research sources
• WhatsApp -> Telegram, Signal
• Gmail -> ProtonMail
• Encourage the Government to take privacy seriously
• Contribute to privacy champions

[Cover Photo courtesy: Photo by Tobias Tullius on Unsplash]

Todoist

It is a great to-do list tracker. The free plan comes with enough organization features. You can group tasks into projects, make sections within a project, and add sub-tasks to a task. It parses natural language to set the deadline and allows recurring tasks. There is a concept of karma points when further gamify task completion. The top features of Todoist are the ease of adding new tasks and the widget for mobile devices for quick access.

While this served me well for a few years, it does have some drawbacks.

• There is no place to add details
• It is easy to miss a deadline
• With a lot of overdue tasks and upcoming tasks, it can be stressful to manage at times (like after a vacation)

MS Planner, Trello

I tried to use professional project management tools to track my objectives and tasks for a while. While both of these have much richer features than Todoist, they lack simplicity. It takes a couple of clicks to add a task and all the fancy bells and whistles cause distractions. Hence, I moved out of them pretty quickly.

Notion

This was a golden find. It is a note-taking application that processes markdown and can have structured data like in a database. With some YouTube hunting, I was able to set up a structure, where I have multiple projects, each containing some epics, and the final action items called tasks. I tweaked the fields to my preference and viola, I had my custom task tracking application. Notion also allows the creation of multiple views and add filters. So I can easily set up a view that showed what my upcoming tasks are for the week. Another fun part is everything in Notion is a block and a block can be linked to a page. So each task can be made into its own page where I can jot down my plans and progress.

My Notion Dashboard

You can also create a page that you can share globally. It can be something like the future roadmap of a product or your upcoming content!

But again, this is not a silver bullet. It's a little slow, and have negligible offline support. (I can add tasks or complete them offline in Todoist) The problem of time management too is not exactly solved.

Google Calendar

After watching some more productivity videos I have added Calendar to the mix and it feels complete now. I have marked out times for office and self-care. I then add things like my study and blogging in the gaps, and lo and behold, I spend less time scrolling social media and ingesting adds, and more on developing myself. You can use a calendar of your choice.

The process

Todoist is still the place where most of it starts. I add a task and a deadline. At some convenient time, I move that over to Notion and add relevant details. Then I check the calendar to ensure I have enough time to deliver it and block some of it. If I find that the deadline is not realistic, I either postpone it or remove its deadline (which implies I'll do it at some point when I get time). I have used this setup since the last quarter of 2020, and honestly, it has paid off. I delivered my tasks at my work, scored an A at college, and started blogging. I still have time to browse Netflix and chat with friends.

Let me tell you, this is not perfect and by the end of this year I'll probably make some more changes, but it's important to start. Once to explore tools and set up a workflow, you will get to know what works and what does not. There are multiple productivity mantras and some of them might be conflicting. You have to experiment to understand which style suits you and gives you the best returns. And, always be open to change...

Privacy note

None of the tools I listed are end to end encrypted. The traffic is encrypted on the wire due to HTTPS, but not at rest. Your data can be viewed by employees of the respective companies. So do not put your highly personal information or confidential information from your works place in these.

Overview of E2E encryption

Links to mentioned apps

• Todoist
• Notion
• Google Calendar

✅ Published content about productivity!

Love what you see? Follow me or subscribe to the newsletter to stay updated when I post more cool stuff!

The desk and chair

I needed a place to keep my laptop and distance myself from the bed, hence a table and a chair. I hopped on to Amazon, got my mind blown by the prices, and procrastinated for a week. Then I headed over to a local shop and was pleasantly surprised by the pricing. I got a study desk with multiple drawers and cabinets and a comfy chair all in under INR 15,000 (~$200)! One heck of a bargain.

The monitor

Dell P2419H - 24" Full HD LED Monitor

It is a piece of beauty and functionality. The display is crystal clear, bot for work and entertainment. It comes with an adjustable stand, that allows changing the height and the tilt. This allows me the flexibility to use either one display on top of the other, or side by side. It has an elegant design and the thin bezels almost disappear into the background.

The keyboard

Logitech K375s Multi-Device Keyboard

This crazy keyboard connects with both my windows laptops and my iPad. While it is true I have never used it with the iPad, but I just love this possibility. It can switch between 3 devices and supports Windows, Mac, Android, and obviously Linux. The only drawback that I found is the switch off button is at the back of the keyboard and hence hard to access. I love the key press feedback, but if you are expecting something mechanical, then this one is not it.

The mouse

Logitech B170 Wireless Mouse

It is a very basic wireless mouse. Gets the job done as long as you are on one system, but does not allow multidevice support. I have to manually plug in the receiver to the laptop I want to use. Looking for an upgrade next year.

The iPad Pro

That is just for show on the table! I use it for my studies and when I want to be reminded that it takes more than an iPad and an overpriced apple pencil to create digital art. It's a pretty handy entertainment center and reader when on the move.

My laptops

My personal laptop is a Dell Inspiron, with i7 7th gen, 16GB RAM, 4GB Radeon Graphics, 2TB HDD. My system runs Windows 10 by default, but I have set up Kubuntu dual boot. Having a dedicated Linux setup helps with my college projects. The laptop I got from my office is Lenovo with i7 8th Gen, 32 GB RAM, 512 GB SSD.

Here is me with the imaginary teacup. While the laptops are powered by Intel, I am powered by tea!

Upgrades to look forward to

• Another display
• A gaming/streaming chair (I do neither, but they are comfy)
• A mouse that supports multi-device
• A cute desk plant

If you have any suggestions or recommendations, please do share in the comments below!

Wish you all a very Happy New year! Keep hacking, keep learning.

Foreword

This post assumes you know how to build a static website and merely touches over the options. This is intended as a deployment guide.

Building a website

There are a lot of options to host static content. While most content creators would prefer the comfort of a service like WordPress, as a developer, I tend to prefer a little more control. GitHub Pages provides both freedom and version control. The decision tree is just getting started here! You can create a website in GitHub using either of the following two ways.

GitHub Pages template using Jekyll

There are some basic templates provided by GitHub Pages as jumping-off points. You can consider them as some sort of theme, and build based on top of that. The pages can be written in HTML or Markdown, and you can add styles and scripts to enhance functionality and experience. This uses Ruby to build the contents and might need some learning and getting used to before you can properly control it. Find more details about this option at Jekyll. The benefit of using this option is that GitHub handles the building and rendering the site.

Using a UI framework of your choice

You can use any of the prevalent UI frameworks like Angular, React, Vue, and the sorts to generate a static site. You have to build the artifacts and configure GitHub Pages to render the contents of the build or dist folder. More options here:

• You can build the source code and commit the folder to be served
• You can set up a build pipeline (I prefer Travis CI).

As Uncle Ben once said, “With great power, comes great responsibility”.

Default Hosting

On your repository, if you visit the setting sections and scroll down to GitHubPages, you’ll find the option to select a branch and root folder. By default, nothing will be selected. See below a basic setting that will create a page with the root folder, and use the README.md or index.html as the starting point. The hosted URL will be of the form:https://<username>.github.io/<repository-name>

The site is now hosted on GitHub, using your username as a sub-domain. This is a good place to start and see changes. GitHub Pages is available only for public repositories for free members.

Porting to a custom domain

There comes a certain point in life where you want more! So one fine morning, you purchase a domain. There are again a lot of options out there and needs a post of its own. For context, I purchased mine from Google domains, and it will cost me about a thousand Indian Rupees per year. As your hairs start greying, you’ll make more websites, which might be related to the same domain. Instead of purchasing multiple domains for a group of things, we can leverage the same one, thus reducing cost.

The bad idea

Set up different subprojects and make folders inside the build directory. This will work, but the change of themes as the user browses through the same website will baffle them, not to mention that hosting different websites as subfolders will be unprofessional (example, https://mark.com/facebook, https://mark.com/instagram and so on). [Disclaimer: The author just came up with these links and are not meant to be visited. The author, aka me, will not be responsible for any or all losses incurred in an attempt to navigate to the aforementioned links.]

Subdomains to the rescue

Yes, www is a subdomain. The subdomain is an optional part and can be committed (check Medium URL). Generally, the apex domain (medium.com) and subdomain www (www.medium.com) point to the same resource or are redirected. We can use subdomains to host different sites, all under the same domain name. Continuing the example from above, the two sites now will be https://facebook.mark.com and https://instagram.mark.com.

Let us jump to the configurations now.

Configurations

Step 1: Setting up A record

You need to configure the A record so that it points to the Github Pages servers. The screenshot below shows the configuration for my domain. The IPs will be the same, but it is better to read some more about this from the GitHub doc.

A record configuration

Step 2: Setting up a subdomain

This is the easiest step, as shown below- just add a CNAME record to point to your GitHub URL (remember .github.io). Generally, this takes a while to set up.

CNAME configuration, by Niladri Roy

Step 3: Configuring GitHub

Back at the GitHub repository settings page, fill in the box for “custom domain” and hit save. It will need some time to take effect. If your domain uses HTTPS, you can enforce HTTPS. This option will be enabled once the other things are set up by GitHub. A file called CNAME will typically be committed to the root of your repository by default. If this file is missing, please add one with the following details:

[subdomain.]domain-name.top-level-domain

In my case, the resulting line is omscs.royniladri.dev (no protocol or slashes). It should contain just this line and nothing else. The subdomain is in square brackets because it is optional — you can host a GitHub Pages website on the apex domain.

GitHub Pages using a custom domain

After all the settings are done, check back in an hour to find your newly hosted site. The icing on the cake is the fact that the old URL still works. If you had shared your .github.io URL, all future requests are automatically forwarded to use the custom domain with no additional setup.

May the domain be with you! — A curious developer

[P.S. If you are interested in checking out the site, visit OMSCS Journey.]

Love what you see? Follow me or subscribe to the newsletter to stay updated when I post more cool stuff!

Keep your bags packed

Tech bros in general are travel enthusiasts. They spend most of the time staring at screens (from dual monitors to smartphones) and love the occasional escape to a few days of digital detox.

Be creative in your gifts

As a techie, he probably makes enough money. He also loves the thrill of reading through articles and watching hundreds of YouTube reviews before making an informed decision. Do not deprive him of this adrenaline rush! Instead, get to know him and spend some time making something. He loves a personal touch.

Be prepared to watch Nerdy movies

Please know the difference between Star Trek, Star Wars, and Guardian of the Galaxy. Be ready to waste weekends with a rerun of the Batman trilogy, or a Marvel marathon! The good part is, he can pause and explain the intricate details if you blink and miss an important part.

Confide in him

He is a keeper of secrets. So go ahead and make some confessions. Feeling insecure about something? Go ahead and talk to him. He makes a living out of turning bugs into features. He will be more than happy to show you the perfect picture of yourself that he sees!

Treat his pet well

A vast majority of techies own pets, and you better be comfortable with his furry friends or that might be a deal-breaker!

Be explicit

No, they don't understand unspoken words. They are worse than men in general when it comes to picking up social cues. Their evolution was hindered by the amount of console.log and System.out.println they frantically typed in! So please speak up and be assured that it will be heard.

Don't plan anything in the morning

These creatures are night owls and show their worst colors when woke up early! So plan events accordingly; he will most likely not join you in your morning yoga! Going for a post-dinner stroll? Count him in.

Read and support his blog

Yes please! Blogs are not always tutorials and there are often some gems like these! You don't have to be a techie to show some support. Read them, share them with your friends. Help them get their dose of dopamine.

Conclusion

Go ahead and get that tech bro of yours! While they are relatively low maintenance, be warned they are fragile! So do not drop, knock, or spill coffee (on them or their work). Wish you the best of luck!

If you liked this (highly informative) laughter pill for Saturday, and love staying up to date with technology trends, follow me on my journey! And finally, if you are feeling $3 richer, help me get my dose of caffeine and L-Theanine.

There comes a time when you want to do something cool like a typewriter on a web page. There are multiple ways to accomplish it, but today let me show you the vanilla JS way!

The Algorithm

First, we have to initialize a list of strings that we want to type and erase in a loop. The idea is to start from the first character of the first line. We keep adding characters, till we reach the end. Note that we have added + 5 here to stall for a few more cycles before we start erasing. Then we start removing characters, this time 2 at a time! This creates an effect of slow typing and fast erase. Once we reach the beginning of the string, we reset the direction and move on to the next item in the array. Finally, once we reach the end, we start over from the first item in the array.

Performance

I switched to the performance tab and recorded the run for about 10 seconds. The scripting time is approximately 0.002%.

Advantage over CSS

I have seen some CSS based solutions, but they have a dependency on the number of characters and work for only one string. This allows you to work with multiple strings in a loop and independent of the string length. If you want to tinker with the speed, just change the timeout value.

Love what you see? Follow me or subscribe to the newsletter to stay updated when I post more cool stuff!

Donald Arthur Norman is an American researcher, professor, and author. Norman is the director of The Design Lab at the University of California, San Diego. He is best known for his books on design, especially The Design of Everyday Things. Wikipedia

Doors can get even more complicated if you throw in revolving doors, clear glass doors, with no touchpoints. A door is said to be a Norman door if it is not intuitive or self-explanatory. Let us now see how we can fix it.

The push side

If one side of the door is smooth without and handles or knobs, there is only one thing you can do with it. So not attaching anything to this side of the door is one option. But what if someone starts pushing close to the hinge? To deal with this, we need to give a visual clue as to which end of the door should be pushed - maybe in the form of a metal plate.

The pull side

One of the most common things that we spot on a door is a handle. While it is easy to pull, it still allows pushing. The doors of cars are meant for pulling from the outside, but that design will not fit a big door. So, let us get back to handle. Adding a label will make things better, but not by much. We can design the pull handle in a way that makes push much easier than a pull. One such example is shown below:

Do you have any more ideas to make the pull side better?

Emergency door

Most emergency doors avoid confusion by not having a handle. There is a bar that affords to push. There are often instructions added, but during times of crisis, time is of the essence, and having a good design is priceless.

Watch your steps

While you wander around in this wide wild world, beware of such catastrophic designs!

All this to say, good designs matter, not just in the software domain, but in the world out there in general. Next time you are designing something, and focusing on how to make it fancy, bear in mind, it needs to be usable and enjoyable. Design for the intended users!

Step 1: Install Jenkins

The official guide provides detailed instructions on how to set it up on different environments. If you have any other Operating system, check out this installation guide

wget -q -O - https://pkg.jenkins.io/debian-stable/jenkins.io.key | sudo apt-key add -
sudo sh -c 'echo deb https://pkg.jenkins.io/debian-stable binary/ > \
    /etc/apt/sources.list.d/jenkins.list'
sudo apt-get update
sudo apt-get install jenkins

Note that to start Jenkins we need Java 8. If you do not have Java 8 or have a different version, you might see an error like this:

This can be easily rectified by installing the required version as such:

sudo apt install openjdk-8-jdk

and then installing Jenkins as before.

If all works fine, you will not see any errors and will be able to open the Jenkins admin screen on http://localhost:8080/. The password can be found in the file /var/lib/jenkins/secrets/initialAdminPassword.

Installing Plugins

This is the screen you get when you log in:

Now we have to start customizing Jenkins. We will start with the recommended set of plugins. There are quite a few plugins and this step might take a while to finish.

Once that is done, it will ask for creating an Admin User.

For privacy concerns, I have not added the email field in the screenshot. Finally, you'll be taken to the Jenkins dashboard

Time to land on the dashboard!

Setting up BitBucket and Jira

We will be using BitBucket as the source code management tool. It uses it as the versioning tool. For Scrum and issue tracking, we will be using Jira. Note that both of these have free versions and have enough features for our simple use case.

Once logged in to BitBucket, create a workspace, then a project inside that workspace, and two repositories under the project. My repositories can be found at Server and UI App

Linking Jira project to Bitbucket project

The first step is to link the workspace. Once done, we can follow along with the onscreen guide to add the relevant repositories.

Ideally, you should see the list of repositories to choose from in Jira itself. For me, that was not the case. So I went back to BitBucket and selected the repository, and navigated to the Jira tab.

Click on "Manage Linked projects" on the right top corner.

Creating Issues and View in Jira

We can go to the backlog and create Issues (Stories or bugs). If you make a commit with the issue number, we will be able to see the same on Jira.

First Job

Time to set up our first Jenkins job. In this step, we just want to get the contents of the repository in the workspace. Since this step interacts with git, it is crucial that you have git preinstalled on the machine.

sudo apt-get install git

Let's start by creating a Pipeline job:

For the time being, we will jump down to the bottom and click on "Try Sample Pipeline" under Pipeline. We will remove all the unnecessary steps (as of now), and click on the Pipeline Syntax link.

You have to add a credential if one does not exist to access the repository. From here you can generate the line to copy and add it. The final pipeline should something like this:

pipeline {
        agent any

        stages {
            stage('Build') {
                steps {
                    // Get some code from a GitHub repository
                    git credentialsId: 'xxxx-xxx-xxx-xxxx', url: 'https://<username>@bitbucket.org/nilroy/server.git'
                }
            }
        }
    }

Let us save this and try to build the job by clicking build now. Lo and behold, our job works:

Basic server code

As a simple example, I have created a maven project and added a class fine and a test file.

public class Person {
    private String firstName;
    private String lastName;

    Person(String fn, String ln){
        this.firstName = fn;
        this.lastName = ln;
    }

    public String getFullName(){
        return this.firstName+" "+this.lastName;
    }
}

import org.junit.Assert;
import org.junit.Test;

public class PersonTest {
    @Test
    public void testFullName(){
        Person nilroy = new Person("Niladri", "Roy");
        Assert.assertEquals("Niladri Roy", "Niladri Roy");
    }
}

You can check if everything is working as expected by running a clean install and a test using mvn. Again if you do not have maven in your local system (or Virtual machine), you can add it using sudo apt install maven.

Build and Test

Time to add the last bits of our skeleton pipeline, a stage that builds and a stage that tests. The final pipeline should look like this, with a shell running the maven for us:

pipeline {
        agent any

        stages {
            stage('Checkout') {
                steps {
                    // Get some code from a GitHub repository
                    git credentialsId: 'xxxx-xxxx-xxxxx', url: 'https://<username>@bitbucket.org/nilroy/server.git'
                }
            }
            stage('Build'){
                steps {
                    sh 'mvn -DskipTests clean install'
                }
            }
            stage('Test'){
                steps {
                    sh 'mvn test'
                }
            }
        }
    }

We can now save it and run the job. If everything goes well, we will see a green field!

Why I used pipeline

There is an easier way to configure Jenkins had we chosen an empty project. But creating a pipeline has a couple of advantages.

1. The results are much more clear and appealing
2. The logs are chunked and we can focus on logs only when something fails.
3. We are developers and prefer to type than click!
4. You can easily set this up as a project file and version it.

This is just the tip of an iceberg, and we have a lot to cover ahead. Stay tuned. To keep getting notified when I post, follow me or subscribe to the newsletter!

The Why

You have created an awesome website and ready to host it for everyone to find. You have taken the pain of making it responsive and it looks great on all standard devices. Let us walk through a hypothetical Developer vs Product Manager conversation:

PM: Is this application responsive?

Dev: Yes boss!

PM: Does it work when he is on a slow internet?

Dev: Well, I have minimized the assets, serving them up gzipped, so its optimised, but might take a while to load.

PM: What if he goes offline?

Dev: (Dumbfounded)Web… Web application? Why would someone use a web application offline? We need to create apps if we want to provide offline capabilities!

The next part of the conversation might not be very pleasant, so let us skip that. What if I told you your web app can be taken offline? What if I told you that your app can act like a native application in multiple platforms and be pinned to the Start screen for easy access? Welcome to PWA, welcome to the future (not really, it has been around for a while. While Google introduced PWA in 2015, Steve Jobs conceptualized it back in 2007!)

What does it take?

One word: JavaScript

If you are a front end developer, you are already aware of JS, and its nitty-gritty details. You don’t have to learn Java, you don’t have to download software to develop an android app, and yet another for iOS. You don’t have to take the trouble of publishing it across multiple stores. You simply build upon your already existing awesome webpage.

Google Lighthouse

Have you seen the lighthouse tab (it would come as an audit on older versions) on Chrome developer tools? Go to any site and run it. You see a couple of metrics — how well does the site perform, does it take into account accessibility, does it follow best practices, and finally does it have what it takes to be a PWA? This report then has details on how to improve upon the site and is a great place to start enhancing your application.

What is a Service Worker

A service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction. — Matt Gaunt on Web Fundamentals

Service Worker Overview from Introduction to Service Workers by Google

Let us now dissect the definition:

A service worker is a script — It is composed of JavaScript. Also note, it is a worker and hence cannot access DOM elements [No more alert(“hello!”)], but has to communicate using messages.

Runs in the background — It is run on a different thread than the main JS even loop. Note that it might be terminated when not in use, and restarted when required, hence using global variables is a very bad idea.

Opening the door to features — It is a programmable network proxy and can intercept requests, respond on behalf of server and cache resources.

Don’t need a web page or user interaction — Push notifications, background sync, payment updates — service works bring a lot of handy features to the web platform.

Service Worker Life Cycle

The lifecycle of a service worker is not coupled with the web page. It starts with the first load of the page but persists long after the browser tab is closed.

Service Worker Life Cycle by Matt Gaunt on Web Fundamentals

The first step of registering a service worker is the install step. Typically, assets are downloaded and cached in this step. If all goes well, it moves to the activated step, else moves to the error state. Once activated, it is ready to intercept requests and process messages. Typically, old caches are invalidated here. When there is no activity, it remains idle, and after a few seconds of idling, is terminated. No need to be alarmed, it is brought back to life when a new event occurs, like a request or message. Note that since the worker can be terminated at any point, using global variables is heavily discouraged. IndexedDB can be used to persist data, including cache. The service worker is terminated after some seconds of inactivity to ensure that they don’t live in memory, draining resources.

Service workers are extensively asynchronous and use Promises. No blocking actions are allowed in the worker, failing which it will be stopped.

Can I use Service Workers?

Web developers have lost a lot of their hairs owing to browsers deviating from web standards, it is only natural to have this question at the back of your head while reading through this article. The short answer is no. While some do not support it all together, some allow limited features. The amount of storage also varies from platform to platform and from browser to browser.

Browser compatibility of Service Worker, screenshot from caniuse.com

Hence it is a good practice to do a feature test before installing a service worker. We should not have core functionalities in service workers as it might be executed in an incompatible platform-browser combination.

Another factor to keep in mind is that Service Workers can be used only on HTTPS-enabled websites. While it works on HTTP through localhost, it will not work in an insecure site. Service workers are powerful, and “with great power, comes great responsibility”. HTTPS ensures that the source of the script is the hosted site and protects against man-in-the-middle attacks.

Time to Code

Time to whip up some throwaway code! We will start with a simple HTML file with some script. We have a div with an id that we will change. We first check if we can rester a service worker, and if we can, go ahead to register it. Once it is registered, the DOM is updated. We also have logging of errors and meaningful messages to the DOM if something fails.

index.html

<!doctype html>
<title>First Service Worker</title>

<h1>Service Worker Test</h1>
<div id="response"></div>

<script>
// chcek if the browser supports service workers
if ('serviceWorker' in navigator) {
    navigator.serviceWorker.register("serviceworker.js",
        { scope: "/" })
        .then( registration => {
            // registration is an handle of the worker.
            // More event listeners can be attached or messages can be sent to this.
            // For this example, we just change the DOM to display message
            document.getElementById("response").innerHTML = 
                "Service Worker registered properly";
        })
        .catch( error => {
            // Update DOM and log error in case resgistration fails
            document.getElementById("response").innerHTML = 
                "Service Worker NOT registered";
            console.error(error);
        });
} else {
    // UPdate DOM to reflect service workers cannot be used
    document.getElementById("response").innerHTML = 
                "Service Worker NOT available";
}
</script>

serviceworker.js

console.log("We are a service worker");

// This is called once the worker is installed
self.addEventListener("install", event => {
   console.log("Install event");
});

// This is called once the worker becomes active
self.addEventListener("activate", event => {
   console.log("Activate event");
});

The serviceworker.js file is a barebone for now. We have logs to illustrate the flow. First, it is installed and then activated.

Let me walk you through on how to run this. You can get both the files from the above gist, but if you open the file in a browser it will not work. You’ll need to serve up the contents. The easiest way is to use the npm package called “serve” (assuming you have NodeJS development environment setup). You can navigate to the folder where you have these files and execute the following:

npm i -g serve
serve

This will start serving the contents of the folder at port 5000. If you click on the link http://localhost:5000 you’ll see the service worker is registered properly. If you click the network link (the one below local), the service worker will not work (remember HTTPS). In the debugger, you can see the details, as shown below, in the application tab. When you are developing, ensure that “Update on reload” is checked so that changes that you make to your worker are picked up. By default, a service worker once installed will always remain installed (but more on this later).

Chrome Debug tool to inspect service worker

Coming up

This is the first of the series. More on service workers would be posted in the coming weeks. In the meantime, this piece sites a lot of resources that you can explore. Stay tuned to keep learning!

As developers, we are often guilty of doing this. The problem statement is simple:

I have a React application and want it deployed on GitHub Pages.

The simplest way to achieve this is to locally build it, and push the build directory to “gh-pages” branch and viola. Then I introduced Travis CI to achieve this and recently switched to GitHub Actions.

I have already spent more hours setting this up than I probably would have spent doing it manually, so let me first try to justify my actions:

• GitHub Action is a new kid in town, and as developers, it is our responsibility to become early (debatable at this point) adopters
• It has inherent support — I don’t have to share keys and secrets with another third party.
• It has a vibrant ecosystem that will only get better with time. For instance, it is just 2 lines to set up a Linux machine with NodeJs.
• As a corporate employee who used Jenkins, the setup process feels welcoming.
• It supports parallelly running multiple jobs! You can let everything run parallel, or create dependencies. It promises to be quite versatile.

Although my current problem statement does not require much of the aforementioned features, it is easier to get my hands dirty with a simpler project.

How to get started?

The simplest way to start a workflow is to go to the “Actions” tab on your repository and click “set up a workflow yourself”. This will create a file called main.yml with some basic workflow. There is a structure to this YAML file to understand which we need to understand the components of GitHub actions.

The Components of GitHub Actions

The Components of GitHub Actions, from GitHub Docs

GitHub events (push, pull requests, and so on) trigger one or more jobs. Each job is run on a server that is called Runner instance (Virtual machines or Docker instances). Each job comprises one or more steps and each step performs some actions, ranging from echo on a bash terminal to a complicated action developed by the GitHub community that does some heavy lifting. To know more about the components check out the official documentation.

Plan of Action

Now that we are equipped with the understanding of GitHub workflows, it is time to break our task at hand into smaller workable units.

We will be starting with a Ubuntu server, and get the latest NodeJS environment setup. We will have to check out the code and install dependencies. Then we can build and finally publish to GitHub Pages.

And at what point do I want to do this? To answer that, I need to talk briefly about the workflow I follow. I have a development branch on which I work. I make frequent commits and often I do not want to publish changes after each commit. Once I feel I have reached a stable point, I create a pull request on the master branch (this repository existed before they renamed master to main). So I want my action to kick in at a push on master. Note that if I trigger it on pull-request, it will be triggered when the request is created, and I want it to trigger after it is merged. If you have multiple developers, you’ll need to control who can commit on master/main directly.

Code of Action

name: build_deploy CI

on:
  push:
    branches: [ master ]

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - uses: actions/checkout@v2

      - name: Use Node.js ${{ matrix.node-version }}
        uses: actions/setup-node@v1
        with:
          node-version: '12.x'

      - name: Install dependencies
        run: yarn --frozen-lockfile

      - name: Build
        run: yarn run build

      - name: Deploy
        uses: peaceiris/actions-gh-pages@v3.7.3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./build
          cname: <domain_name>
          enable_jekyll: false
          user_name: 'github-actions[bot]'
          user_email: 'github-actions[bot]@users.noreply.github.com'

Let us go over the steps.

1. The action has a name!
2. We run it on a push to master.
3. The job uses a Ubuntu server
4. Check out code
5. Setup NodeJS environment. We can specify the version(s), and yarn comes preinstalled.
6. We install the dependencies and ensure the lock file is not changed in the process.
7. We create an optimized production build.
8. We use an action from the GitHub community to push the changes to the specific branch. We can make customization by setting certain parameters. (Since I have a custom domain, I set that here with cname.)

And that is all. You are all set to harness the goodness of GitHub Actions!

The results

Apart from this, I have another action that runs the build job on every push to development branch. This ensures I am not breaking anything that will prevent the build when I merge a pull request. Here is how it looks on my repository:

GitHub Actions in action, Niladri Roy

The failing build on my development branch helped me correct my mistake and once that started passing, I opened a pull request and merged it. This triggered the “_builddeploy CI” workflow, deploying my changes to my website, all in about a minute and a half! How cool is that?