DEV Community: Niladri

Turbocharge your Jekyll Website

Niladri — Fri, 09 Jul 2021 19:01:20 +0000

Jekyll is a static site generator based on Ruby. It is a popular option for creating simple blogs with more focus on the content.

From https://jekyllrb.com/

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:

Google Analytics
Sitemaps
RSS/ATOM feed
E-mail Subscription
Comments
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">

Originally published at https://ones-zeros.royniladri.dev/turbocharge-your-jekyll-website

Taking Back Privacy in 2021

Niladri — Fri, 15 Jan 2021 17:21:09 +0000

The Social Dilemma opened our eyes to the way social networks operate. While many can argue they do not have anything to hide, giving machines power to understand and predict you better is something I am not comfortable with. I get irked when I see advertisements for Marvel T-shirts moments after I discuss getting a T-shirt around my phone. I made a couple of changes to my online life. Next up is the Whatsapp agreement. Yes, WhatsApp still cannot read your chats with friends and family, but they can tap into conversations with business accounts, and share that data with 3rd party. So what do we do now? Here's my list of online changes that I follow and would recommend.

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]

Originally published at https://ones-zeros.royniladri.dev/taking-back-privacy-in-2021

Time Management and Productivity Tools for Developers

Niladri — Tue, 05 Jan 2021 16:01:23 +0000

Don't you love the rush of dopamine when you check off a task on a to-do list? It instills in us a sense of accomplishment apart from reaching the goal. Having a well-maintained to-do list also helps us keep on track. Hence, a few years ago, I started using Todoist.

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

✅ Published content about productivity!

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

Originally published at https://ones-zeros.royniladri.dev/productivity-tools-for-developers

My 2020 WFH Setup

Niladri — Wed, 30 Dec 2020 17:40:07 +0000

This has been a crazy year. This is the year I realized that I love being out sometimes, even if I am an introvert! I switched my job and started my new position just a week before India went into complete lockdown. I had also started my Masters at Georgia Tech, and effectively was spending most of my awake time with my laptop. The place of work was my comfy bed. After a few weeks of insane poses, my back nudged me to do something about it! Thus the journey began.

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.

Originally published at https://ones-zeros.royniladri.dev/my-2020-wfh-setup

Deploying Static WebApps - A Step by Step Guide

Niladri — Wed, 23 Dec 2020 10:42:01 +0000

From index.html to a website on a custom domain

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!

Originally published at https://medium.com/ones-zeros/deploying-static-webapps-6eb0f40ecdec

How to Date a Tech Bro

Niladri — Wed, 23 Dec 2020 10:25:43 +0000

How to Date a Tech Bro

This post was inspired by Anita Ihuman's How to date a tech sis
In this post, let me walk you over the fundamentals of dating a tech bro!

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.

Originally published at https://ones-zeros.royniladri.dev/how-to-date-a-tech-bro

TypeWritter Effect - Vanilla JS

Niladri — Wed, 23 Dec 2020 10:16:31 +0000

TypeWritter Effect - Vanilla JS

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!

Originally published at https://ones-zeros.royniladri.dev/typewritter-effect-vanilla-js

Norman Doors - To Push or To Pull?

Niladri — Wed, 23 Dec 2020 09:14:43 +0000

Norman Doors - To Push or To Pull?

Doors are a portal, it allows us to access to buildings and also allows escape! But how many times have you tried to push a door that is meant to be pulled or vice-versa? Sometimes there is a sticker that says, "Push", and yet you pull. If you feel embarrassed or stupid, worry not my friend, it is not your fault alone, it is a design flaw.

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!

Originally published at https://ones-zeros.royniladri.dev/norman-doors-to-push-or-to-pull

Corporate CI/CD Setup - Introductions and Installations

Niladri — Wed, 23 Dec 2020 09:07:46 +0000

Corporate CI/CD Setup - Introductions and Installations

Welcome to the series. Today I will introduce you to the stack that we are going to use and set up accounts. We will be installing Jenkins and setting up a small backend project to demonstrate the build pipeline. To mock most corporate environments, I will be using Ubuntu 18.04 (Linux) as the working operating system. You can either have that as a dual boot alongside your windows or use a Virtual Machine.

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.

The results are much more clear and appealing
The logs are chunked and we can focus on logs only when something fails.
We are developers and prefer to type than click!
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!

Originally published at https://ones-zeros.royniladri.dev/corporate-cicd-setup-introductions-and-installations

JS Service Workers — An Introduction

Niladri — Wed, 23 Dec 2020 09:03:43 +0000

JS Service Workers — An Introduction

A journey towards taking your web application offline

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!

Originally published at https://medium.com/ones-zeros/js-service-workers-an-introduction-12aabeea1a2b

React App and GitHub Actions

Niladri — Wed, 23 Dec 2020 08:29:36 +0000

React App and GitHub Actions

From development to go-live in under 2 minutes

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.

The action has a name!
We run it on a push to master.
The job uses a Ubuntu server
Check out code
Setup NodeJS environment. We can specify the version(s), and yarn comes preinstalled.
We install the dependencies and ensure the lock file is not changed in the process.
We create an optimized production build.
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 “build_deploy CI” workflow, deploying my changes to my website, all in about a minute and a half! How cool is that?

Originally published at https://medium.com/ones-zeros/react-app-and-github-actions-96c9f5444963