Forem: Jyotishman Saikia

GPL: The Code Cancer

Jyotishman Saikia — Tue, 16 Jan 2024 17:40:45 +0000

From the title, you might be wondering exactly what GPL is. GPL is a type of open source software licence that stands for General Public Licence.

Open source software licences are of many types, like the GNU General Public Licence, MIT Licence, Apache Licence, etc.

In this article, I will be explaining only about GNU General Public Licence and the benefits and harmful features of having it.

The basic definition of GNU General Public Licence, or simply GPL, is a licence that ensures that everyone has the right to use, study, share , modify the software.

The GPL encourages the use, modification, and sharing of software, but there is a catch.

Whatever you build using GPL code, you have to share it under the same licence or a similar one. That's the cancerous property GPL has.

This simply means that if you have used GPL code in your commercial project, you must also make the source code of your entire project available under the GPL. This is known as the "viral" nature of the GPL.

Here are some real-world examples of successful GPL-licensed commercial projects:

WordPress: The popular content management system WordPress is licenced under the GPL, and there are many businesses that sell themes, plugins, and other services for WordPress.
Linux: The Linux operating system is also licenced under the GPL, and there are many companies that sell Linux-based software and services.
Android: The Android mobile operating system is based on the Linux kernel and is also licenced under the GPL. Many companies sell Android-based devices and apps.

In summary, if you want to build software that everyone can use, modify, and distribute for free, then go for this licence. This licence will ensure that people who use your software for free or commercial use will also follow the same process.

SEO: Canonical Links Vs Alternate URLs vs Redirects

Jyotishman Saikia — Tue, 21 Nov 2023 12:50:17 +0000

1. Canonical Links: Resolving Duplicate Content

Purpose: Mitigate duplicate content issues by specifying the preferred or "canonical" version of a page.
Implementation: Insert the canonical link tag in the HTML:

<link rel="canonical" href="https://www.example.com/preferred-url" />

Example Scenario: Ideal for managing multiple URLs with similar content, ensuring search engines prioritise the designated URL.

2. Alternate URLs (Hreflang Annotations): Multilingual Targeting

Purpose: Enable multilingual or multinational targeting by indicating language and regional preferences.
Implementation: Utilise hreflang tags in the HTML:

<link rel="alternate" hreflang="en" href="https://www.example.com/en/page" />

<link rel="alternate" hreflang="es" href="https://www.example.com/es/pagina" />

Example Scenario: Essential for websites with diverse language versions, guiding search engines to serve content based on user preferences.

3. Redirects: Seamless URL Transitions

Purpose: Automatically guide users and search engines from one URL to another, crucial for URL changes or page movements.
Implementation: Implement server-side redirects, like 301 for permanent moves and 302 for temporary changes.
Example Scenario: Valuable when restructuring your website or relocating content to ensure a smooth user experience and maintain search engine rankings.

Implementing these strategies ensures a streamlined web experience, resolves SEO challenges, and enhances overall site performance.

Git tags: what are they? How do tags and branches differ from one another?

Jyotishman Saikia — Sun, 30 Jul 2023 05:44:33 +0000

Tags vs Branch

Let's discuss this one by one with an example.

I hope you are already familiar with git branch. For those who are new to git branch its a way to work multiple features and keep your code separated by branches.

Example: You can work on two different features at the same time by creating two branch. Code from both the branch won't interfere with each other. Let's suppose master is the stable branch where all the production code is there, from there you can create different branch according to your dev requirement.

If there are multiple developers working on the same project on multiple features, you need to merge the code to a common branch (master) for deployment.

After deploying the master branch what if there is an issue with any of the developer's branch?

What should we do in this case since its breaking our production app?

Quickest solution would be to revert the merge commit that has the issue.

But there is an even smartest way to solve things when things go wrong on production.

Git tags

This is where git tags come in. Git tags allow us to indicate certain points in a repository's history.
We can create tags at any time and reference to a commit.
But my suggestion would be to create a tag whenever there is commit made to master branch.

Example: Create a tag everytime a developer feature branch is merged into master.

This way if there is any issue in any of the merge commits then we can simple go back to 2nd stable tag instead of the first tag.

To create a tag locally-

git tag tag-v.0.0.1

To push the tag-

git push origin tag-v.0.0.1

This is a manual way of creating a tag and push it. But we can automate this thing by using github actions.

So whenever there is any push commit to master , pick the latest tag and increment it by one.

If my last tag is tag-v.0.0.1 it will automatically increment and create tag tag-v.0.0.2.

If you want to know how to create this auto tag on master comment down below. If you like this post do give a comment.

The Valuable Time of Maturity - Poem by Mário de Andrade

Jyotishman Saikia — Wed, 05 Jan 2022 05:25:09 +0000

Beautiful poem by Mario de Andrade (San Paolo 1893-1945) Poet, novelist, essayist and musicologist. One of the founders of Brazilian modernism.

I counted my years and realised that I have less time to live by, than I have lived so far.

I feel like a child who won a pack of candies: at first, he ate them with pleasure but when he realised that there was little left, he began to taste them intensely.

I have no time for endless meetings where the statutes, rules, procedures and internal regulations are discussed, knowing that nothing will be done.

I no longer have the patience to stand absurd people who, despite their chronological age, have not grown up.

My time is too short: I want the essence; my spirit is in a hurry. I do not have much candy in the package anymore.

I want to live next to humans, very realistic people who know how to laugh at their mistakes and who are not inflated by their own triumphs and who take responsibility for their actions. In this way, human dignity is defended and we live in truth and honesty.

It is the essentials that make life useful.

I want to surround myself with people who know how to touch the hearts of those whom hard strokes of life have learned to grow with sweet touches of the soul.

Yes, I'm in a hurry. I'm in a hurry to live with the intensity that only maturity can give.

I do not intend to waste any of the remaining desserts. I am sure they will be exquisite, much more than those eaten so far.

My goal is to reach the end satisfied and at peace with my loved ones and my conscience.

We have two lives and the second begins when you realize you only have one.

How to debug iPhone safari on mac in 2 steps?

Jyotishman Saikia — Mon, 13 Sep 2021 17:25:20 +0000

Debug HTML, CSS and Javascript issues for the website open on iPhone safari directly from your mac in just 2 steps.

Step1: Activate the Web inspector in your iPhone.

On your iPhone go to Settings > Safari > Advanced and toggle on Web Inspector .

Step2: Download Safari Technology Preview Browser

Goto this Link and download this super useful browser which will help in debugging the iOS safari on mac

Once downloaded-

Open the Safari Technology Preview
Goto Develop -> Select your iphone -> click on the iphone safari tab

Image 1

Image 2

10 useless NPM Package with millions of downloads

Jyotishman Saikia — Sun, 22 Aug 2021 18:34:41 +0000

1. is-odd

Detect number is odd or not - 2M downloads/month 🎉

2. is-even

Detect number is even or not - 855k downloads/month 🎉

3. upper-case

Convert a string to upper case - 27M downloads/month 🎉

4. is-number

Detect a number is number or not - 194M downloads/month

5. store2

For storing and getting from localstorage - 9.7M downloads/month 🎉

6. array-flatten

Flatten nested arrays - 103M downloads/month 🎉

7. split-string

Split a string at any desired position - 67M downloads/month

8. is-boolean-object

Detects a value is boolean or not - 52M downloads/month

9. array-includes

Check if a value exists in an array or not- 52M downloads/month

10. ismobilejs

Detects if mobile or not in browser or server - 170k download/week 🎉

If you know any other such useless plugin , please comment down below.

Also I have started posting on twitter related to frontend tips and tricks. You can follow me at- https://twitter.com/frontend_jsx

Work from Home setup of an Indian Developer 🇮🇳

Jyotishman Saikia — Fri, 20 Aug 2021 05:43:21 +0000

Desk-

The beginning of every setup is a clean and spacious desk. I am using a custom made wooden desk with a 19mm ply at the top and frame size of 6ft/3ft. The Frame is black painted and top base has a wooden mica.

Chair-

I am using an ergonomic office chair bought from Amazon at Rs 6700/- . The best part of this chair is that I can adjust both the seat and the arm height according to my requirement. The wheels runs smooth if I move while being seated.

Amazon Link- https://amzn.to/3DaAe47

Laptop- MacBook Pro

I am using a MacBook Pro 16inch 2019 with the configuration of 16GB RAM 2.6 GHz 6-Core Intel Core i7. This is my primary laptop and I use this to do all my tasks like- web development, app development, photo/video editing, watch movies etc

Amazon Link- https://amzn.to/3xVkwpy

Secondary Monitor- Dell P Series 24-inch

I am using this DELL 24 inch full HD IPS monitor with an aspect ratio of 16:9 . The monitor height can be adjusted according to my need and it can also do a 360 rotation. I bought this from Amazon at Rs 13,000/-.

Amazon Link- https://amzn.to/3ggTkLL

External Keyboard-

Keyboard plays a major role in productivity of every developers. I am using a Keycron k2 RGB Mechanical keyboard with the option to use by both bluetooth and cable. Keychron official website ships to most of the countries except India so I bought this mechanical keyboard from keychron India website at Rs 8000/- . The typing experience is indeed awesome.

Website link- https://keychron.in/product/keychron-k2-v-2/

External Mouse- Logitech MX Master 3

I am using a Logitech MX Master 3 series for productivity. Some of the best use-case which i love about this mouse are-

Switching between windows with the switch key
Browser tabs switching using the horizontal scroll.
Browser forward/backward using the up/down buttons
The obvious Vertical scroll with approx of 1000 lines per sec.

Amazon Link- https://amzn.to/3xZ6svi

Mobile devices-

iPhone 11- I use this device as my primary phone as well as a testing device.
iPad Air 2020 + Apple Pencil- I use this device primarily to note down my daily to-do tasks and a little bit of photo and video editing. Otherwise I used this to watch Netflix or Amazon Prime video.
OnePlus 6t- This device used to be my primary phone before but now I use this device to test android related stuffs

Earphone and mic-

I am not a big fan of loud music so I always use a bluetooth earphone to listen to music or to do an audio/video chat. I use OnePlus bullet if I am doing some physical activity else I use Boat AirDope if I am in the desk.

Amazon Link- https://amzn.to/2Wd8HxW

Amazon Link- https://amzn.to/3D5bGtg

Additional accessories which are there in my desk-

Extension board
Flower pot
Computer glass
Laptop stand
Monitor Stand

If you liked my setup or want to give any feedback or suggestions , please comment down below. If possible please share your setup images in the comment section.

Also I have started posting on twitter related to frontend tips and tricks. You can follow me at- https://twitter.com/frontend_jsx

7 cases where we can use HTML instead of CSS

Jyotishman Saikia — Wed, 11 Aug 2021 17:55:16 +0000

1 Hide an element

Yes! you read it right. We can hide an element using HTML. Using the hidden attribute we can hide an element.
Example-

<p hidden> Hello! I am a hidden paragraph </p>

2 Word Break

We can break a word at any position we want by using the <br> or <wbr> tag according to our usecase.
Example-

<p> Hello! I am a <br> broken text </br> </p>

3 Accordion

We can create an accordion without writing a line of css or javascript. Using the HTML <details> and <summary> tag we can create an accordion.

Example-

<details>
    <summary>Accordion title</summary>
    Content you want to show/hide.
</details>

4 Progress Bar

Using the HTML <progress> tag we can show a progress without css or javascript

Example-

<progress id="file" value="32" max="100"> 32% </progress>

5 Color Picker

Using the HTML <input type="color"> tag we can show a color picker and get its value.

Example-

  <input type="color" value="#ff0000">

6 Delete/Underline Text

Using the HTML <del> & <ins> tag we can strike text and underline text.

Example-

<p>My name is <del>jyotish</del> <ins>jyotishman/ins>!</p>

7 Center text

We can center a text without using CSS. Using the HTML align attribute we can give values like- left, center or right.

Example-

<p align="center">Hello! I am a center text </p>

If you liked my content you can follow me on twitter for more such content-

https://twitter.com/frontend_jsx

Javascript Format Date without Moment.js (Eg: 17 July, 2021 )

Jyotishman Saikia — Sat, 17 Jul 2021 13:42:44 +0000

Almost everyone like me might be using the plugin moment.js to format a date-time-stamp to a readable date or time - Eg: 14 July 2021 or 11:58 pm

Fortunately, there is a native javascript API to format date and time.

Demo and Example to format date:

With the help of toLocaleDateString we can format a date-time-stamp to a readable language sensitive representation.

const date = new Date();

Sat Jul 17 2021 19:04:31 GMT+0530 (India Standard Time)

date.toLocaleDateString("en-IN", { "year": "numeric", "month": "long", "day": "numeric" })

"17 July 2021"

(Formatted Date)

Demo and Example to format time:

With the help of toLocaleTimeString we can format a date-time-stamp to a readable language sensitive representation.

const date = new Date();

Sat Jul 17 2021 19:04:31 GMT+0530 (India Standard Time)

date.toLocaleTimeString("en-IN", {"hour": "numeric"})

"7 pm"

(Formatted Time)

If you liked my content you can follow me on twitter for more such content-

https://twitter.com/frontend_jsx

Format a number to any currency using Javascript

Jyotishman Saikia — Sat, 10 Jul 2021 06:53:32 +0000

This article will explain you how to convert a number to any currency like - INR, USD, EUR etc using the Javascript international number format API- Intl.NumberFormat.

Basic Usage-

var number = 3500;

If you don't specify any locales, it will return the formatted number based on your location.

I am from India , so it returned the Indian formatted number.

Format number using locales-

You can specify location to format number according to it.

Format number to any currency using locale-

To convert number to currency you need to mention the style and the currency format-

style= currency
currency= USD, INR, EUR etc

For Indian currency-

For US dollar currency-

Using this Intl.NumberFormat you can also format other number like- km/hr, litres, etc,

If you liked this content you can support me by following me on twitter and Instagram for more such contents-

Twitter - https://twitter.com/frontend_jsx
Instagram - https://www.instagram.com/frontend.jsx/

HTML Tip: Automatically open all links in new tab in HTML

Jyotishman Saikia — Sun, 27 Jun 2021 07:54:12 +0000

Did you get tired of manually adding target="_blank" in all the tags in your HTML webpage?
or
Have you ever forgotten to add target="_blank" in all the tags in your HTML webpage?

Well, there is a native HTML tag to handle such cases automatically. You don't need to manually add target="_blank" in all the tag.

Just add target="_blank" in the base tag, it will open in a new tab for all the link present in the webpage.

// Detect dark theme var iframe = document.getElementById('tweet-1409053884794818564-303'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1409053884794818564&theme=dark" }

I post very frequently on twitter related to frontend tips.
Support my content by following on
Twitter - https://twitter.com/frontend_jsx
Instagram - https://www.instagram.com/frontend.jsx/

My Top 5 Tweets related to Frontend Development

Jyotishman Saikia — Tue, 22 Jun 2021 14:37:15 +0000

1/5 - Disable pull to refresh using CSS

// Detect dark theme var iframe = document.getElementById('tweet-1400393758575710211-372'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1400393758575710211&theme=dark" }

2/5 - Hide HTML element natively

// Detect dark theme var iframe = document.getElementById('tweet-1406666397116112897-676'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1406666397116112897&theme=dark" }

3/5 - CSS inset shorthand property for top/right/bottom/left

// Detect dark theme var iframe = document.getElementById('tweet-1402863094142021632-672'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1402863094142021632&theme=dark" }

4/5 - Detect internet speed using Javascript

// Detect dark theme var iframe = document.getElementById('tweet-1403395076575797258-727'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1403395076575797258&theme=dark" }

5/5 - Prevent user from pasting into input fields

// Detect dark theme var iframe = document.getElementById('tweet-1407009069060136961-837'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1407009069060136961&theme=dark" }

I post very frequently on twitter related to frontend tips.
Support my content by following on
Twitter - https://twitter.com/frontend_jsx
Instagram - https://www.instagram.com/frontend.jsx/