Forem: Vijay Koushik, S. 👨🏽‍💻

The Slow Decline of My English Skills

Vijay Koushik, S. 👨🏽‍💻 — Thu, 26 Dec 2024 09:00:00 +0000

As a non-native English speaker, my journey with the language has always been one of persistent improvement, a pursuit of mastery. But ever since the advent of ChatGPT, I’ve noticed something strange happening—I’ve become too reliant on it, and in the process, my own command of the language has slowly deteriorated. It's as if the digital assistant, in its quest to simplify my writing, unintentionally took away the very skills I worked so hard to build.

When I first began learning English, it was a challenging yet rewarding endeavor. I wasn’t just interested in speaking the language; I wanted to think in it, dream in it, and most importantly, master its nuances. In those early days, I would jot down every unfamiliar word, carefully writing definitions and translations, making sure to study them consistently. Flashcards became my best friend, and I took pride in expanding my vocabulary. Each new word I learned felt like a small victory, bringing me closer to fluency—not just at a basic level, but deeply understanding its idiomatic expressions, cultural subtleties, and even its grammar rules. I spent hours reading diverse texts to immerse myself in grammar, not just focusing on syntax, but also on developing a natural feel for the rhythm of the language—when to pause, how to vary sentence structure, and how to create a flow that would make my writing engaging.

Enter ChatGPT—an innovation that would change everything. I remember the first time I used it, skeptically typing a sentence riddled with errors. I didn’t expect much, just a quick fix. But when the response came back, not only had ChatGPT corrected my mistakes, it had rewritten the entire sentence in a way that sounded more polished and professional. It felt like magic. Gone were the days when I had to meticulously review grammar guides or check my work repeatedly. I was hooked.

At first, it seemed like a blessing—no more worrying about whether my tenses were correct or if my sentence structure was awkward. With ChatGPT, all I had to do was type, and the model would quickly suggest edits, improving my writing instantly. As someone who had painstakingly studied English for years, this sudden shift felt like a revelation. I could focus on expressing my ideas without worrying about minor errors. But little did I know, this convenience would come at a cost.

As I continued to rely on ChatGPT for quick fixes, my approach to language began to shift. Writing, once a challenging but rewarding exercise, started to feel too effortless. The need to recall new words, form sentences from scratch, and engage deeply with grammar faded into the background. I wasn’t writing as much on my own anymore; I would draft something and then hand it over to ChatGPT for refinement. With each correction, I became more detached from the process of crafting the language myself. This over-reliance made me outsource my English skills to a machine. My vocabulary stagnated; the thrill of discovering new words faded. The deeper connections I once had with grammar—the nuances of sentence structure and tone—became less important because ChatGPT was there to tidy it all up in an instant.

Ironically, this very article you’re reading right now was written with the assistance of ChatGPT. It’s a clear example of how easy it is to slip into the comfort of relying on technology rather than honing one’s own skills. While tools like ChatGPT can be incredibly helpful—especially for language learners who might benefit from immediate feedback or when working to overcome language barriers—they also run the risk of creating dependency. The more I leaned on it, the less I trusted my own abilities.

However, I'm actively working to reclaim my voice. I’ve realized that the only way to rebuild my skills is to re-engage with the language on a deeper level. I’ve set a clear plan in motion: no more mindlessly relying on ChatGPT for every draft. I’m challenging myself to write more from scratch, allowing my thoughts to flow naturally, and only using the tool for occasional assistance when absolutely necessary. I’m reading with greater intention, not just to study grammar and vocabulary, but to immerse myself in the language’s deeper aspects—its tone, style, and voice.

Every day, I push myself to interact with English on a more conscious level. When I come across a word I don’t know, I write it down, look it up, and integrate it into my vocabulary. I read articles and books that stretch my comprehension, and I write in journals, crafting essays, and even attempting creative pieces. Each of these exercises helps me regain the fluidity I once had with the language. Though I still turn to ChatGPT for occasional grammar checks, it’s no longer the crutch it once was. Now, I see it as a reminder of the journey I’ve taken and a tool I can use sparingly.

The process isn’t fast, and it’s not always easy. But I’m committed to rebuilding my relationship with English. With every word I engage with, every sentence I write from scratch, I feel my confidence growing. I’m learning to trust myself again, to find my voice without relying on instant fixes. The journey continues, and with it, my commitment to truly mastering the language—not just as a tool for communication, but as a space for expression and creativity.

I have written this article with the intention of sharing my journey and the lessons I’ve learned. But as I reflect on my experience with language, I've realized that over-reliance on ChatGPT for writing could extend beyond language—it could affect my work, too. For example, I might lean on it to solve programming problems at work, which could hinder my growth as a developer. Relying too much on instant solutions could prevent me from truly mastering coding skills and problem-solving. It’s a reminder to stay mindful of how easy it is to become dependent on technology, not just in my passions, but in my professional life as well.

Coding Beyond Limits: My Journey of Building a Web App with AI Creativity

Vijay Koushik, S. 👨🏽‍💻 — Tue, 08 Aug 2023 10:08:58 +0000

Unleashing AI Creativity: Journey into Building a Web App with ChatGPT

Hey everyone 👋! Today, I'm thrilled to take you on an extraordinary journey that fuses human creativity with the boundless potential of artificial intelligence. Buckle up as we dive into the exhilarating process of building a web app using ChatGPT, an AI language model that proves coding can be a collaborative adventure!

Setting the Stage: The Quest Begins

source: giphy

Our adventure commenced with a bold vision: crafting a web app through the guidance of ChatGPT. The twist? I led ChatGPT step by step, making each interaction a treasure trove of creativity and coding wisdom. Choosing Vanilla JavaScript and HTML as the core, I aimed to keep the project simple and ChatGPT-friendly. Little did I know that the ensuing experience would be both enlightening and entertaining.

Hurdles and Hilarity: Navigating the Unexpected

The path wasn't always smooth, and therein lay the charm. Imagine ChatGPT producing coding snippets that left us laughing or perplexed! While I intended for correct code, ChatGPT occasionally decided to provide unexpected new out of context snippets instead. These moments added a delightful twist, reminding me that collaboration with AI can indeed be an unpredictable thrill. With clever maneuvering, we learned to maintain context by reusing previously generated code, ensuring we stayed on course.

AI Artistry: The Birth of the Icon

source:giphy

Creating an app icon that resonates is a challenge, but it's a challenge we tackled with flair. ChatGPT described the icon's essence, and here's where DALL-E, another AI wonder, stepped in. Powered by DALL-E, the Bing Image Creator seamlessly turned textual descriptions into visual reality. As I added the finishing touches, the icon emerged as a stunning blend of AI innovation and my own creative touch.

Designing the Journey: A UX Guided by AI

User experience (UX) is paramount in any app's success. Here, ChatGPT's insights shone once again. From layout suggestions to subtle animation for user interactions, ChatGPT demonstrated a keen eye for design. Each recommendation was like a pixel of AI genius, contributing to a UX that would engage and delight users.

Beyond Code: AI Deployment and the Future

The adventure didn't conclude with the app's functionality and aesthetics. ChatGPT's guidance extended to deploying the app on Firebase through GitHub actions. Witnessing AI's influence throughout the development pipeline was an eye-opening experience, showcasing the power of collaboration between human minds and digital innovation.

Embracing Progress: Challenges and Opportunities

As we reached the end, it's essential to acknowledge the journey's imperfections. The app isn't yet fully optimized for mobile devices and responsive design, reminding us that progress is an ongoing endeavor. Embracing the challenges, however, is what drives us to refine our creations and reach new heights of excellence.

Join the Adventure: Exploring the Web App

But enough talk—let's experience it firsthand! I invite you to explore ChronoChime and discover the synergy between AI and human ingenuity. Navigate its features, experience its charm, and share your insights—because your feedback fuels the evolution of this exciting project.And don't forget to check out the GitHub Repo that houses the code driving this innovation

svijaykoushik / chorno-chime

ChronoChime - Hourly Notification Progressive Web App (PWA) with background sounds and notifications.

ChronoChime

Welcome to ChronoChime, an elegant Progressive Web App (PWA) that sends you hourly notifications along with a soothing chime. Stay on track and manage your time effortlessly with ChronoChime!

Overview

ChronoChime is a PWA built using HTML, CSS, and JavaScript. It utilizes service workers for background notifications and caching, offering a seamless user experience.

Deployment

To deploy ChronoChime, follow these steps:

Clone the repository:

git clone https://github.com/svijaykoushik/chorno-chime.git

Navigate to the project directory:
```
cd chorno-chime
```
Choose one of the following deployment methods:

3.1 Apache or IIS

3.1.1 Set up your favorite web server (Apache, IIS, etc.).

3.1.2 Copy the contents of the ChronoChime directory into your server's web root.

3.1.3 Access ChronoChime by navigating to http://localhost or the appropriate server address.

3.2 Using the serve Package (Node.js)

3.2.1 Navigate to the project directory:
```
cd chorno-chime
```
3.2.2 Run the serve command in the project directory:
```
npx serve
```

Screenshots

About

ChronoChime was…

View on GitHub

The Future Awaits: A Collective Tech Adventure

In a world where AI and human creativity are merging, the possibilities are endless. Our journey is an invitation to embrace this fusion, to tread the path of innovation with excitement and curiosity. Join the conversation, share your thoughts, and let's embark on a collective tech adventure where the extraordinary becomes the norm.

And there you have it! As we conclude this journey into the world of AI-powered web app development, I want to share a behind-the-scenes tidbit that adds an extra layer of intrigue to our adventure.

This article itself was crafted with the assistance of ChatGPT, an AI language model designed by OpenAI. ChatGPT helped me elaborate and share the experience of this adventure in a way that's engaging, cohesive, and captivating. It provided that extra spark that brought this story to life, adding an AI-powered touch to our journey.

While ChatGPT's influence was felt in the crafting of these words, the heart of the story, the challenges overcome, and the excitement of the journey remain as real as ever.

Our partnership is a prime example of how human creativity and AI innovation can join forces to create something truly exceptional.

So, remember that AI is not just a tool—it's a collaborator, an enhancer, and an inspiration. Thank you for joining me on this adventure. Stay curious, stay creative, and keep pushing the boundaries of what's possible!

Acknowledgement

Cover Photo by Pavel Danilyuk

2019 Year in review

Vijay Koushik, S. 👨🏽‍💻 — Tue, 31 Dec 2019 13:00:00 +0000

2019 is a special year to me. It’s the year when I realized how much I love to write. It’s the year where you and the community on DEV.to drowned me with your love which made me start posting consistently after going silent for more than 6 months. As a roundup, I’m sharing you my experiences throughout this year. Don’t worry, It’s not that long.

Achievements

One of the greatest achievements this year is that I was selected as one of the TOP 500 authors on DEV
One of my posts was featured in the top 7 posts of the week list
And Finally, I posted consecutively for 4 weeks.

Life lessons

1. A picture is worth a thousand words

The saying “A picture is worth a thousand words” is very true. I know everyone knows that. But hear it from me. I learnt that you the reader prioritize and value a picture breaking down a git command explaining every part of it more than the paragraph that followed it explaining the same.

2. Read a book

This is the most useful piece of advice from the community. Reading a good book when learning a new tool or a programming language helps you gain a deeper understanding of what you learn. This cannot be said to tutorials and guides because most of them are designed to be very short and specific. Thus, they cannot cover the smaller details that strengthen your foundation. One example is when I was learning git via tutorials, A tutorial taught me very clearly how to add files to a repository but it did not cover how to remove an unwanted file I accidentally added. If you can’t afford a book, just read the manual of whatever you’re learning clearly.

3.Keep it simple stupid

The one thing I learnt from the DEV community is that not every developer has a background in computer science. So, keeping my posts simple and by avoiding jargons or simplifying the jargons has been beneficial for the readers. I personally believe that if I can’t explain something in simple terms then I don’t understand it clearly.

Technical Knowledge

On the technical side, I learnt several things this year.

1. Git

I properly learnt to use git. I learnt about branching and workflows which is very helpful in writing my blog as it is hosted on GitHub pages. The GitHub workflow and branching helped write articles and push them without disturbing the live content of my blog. I also figured that using the command line is way easier and faster than using GUI clients like GitHub desktop.

2. Colour theory

I made the first step in learning UI design by learning colour theory. Choosing the right colours was usually hard. I would just use the RGB colour picker to pick random colours for a colour scheme and it would just hurt my eyes. After learning about the colour wheel and about the monochrome, complementary, and triadic colour schemes, I now choose colours better and they are very pleasing to the eyes when compared to what I did before.

3. Pseudorandom number generators (PRNGs)

I learnt how Math.random works and about PRNGS. What was amazing was the PRNG algorithms used not more than 10 lines of code and very basic math principles to generate a sequence of numbers that are seemingly random. The mind-blowing fact is that Math.random does not use any standard algorithm. It is decided by the browser vendors.

4. Typescript

I learnt typescript, the language that I’ve been seeing in various blog posts. It turned-out that It’s not a new language and It, in my opinion, is just well-groomed JavaScript. I got very excited to know that I could use high-level OOP concepts that I learnt in languages like c++, java and C# in JS apps using typescript. The most favourites were “call signatures” and “interfaces”. TS just cured my anxiety on type errors within my app that is just laborious to fix.

I would like to thank you for your love and support and I wish you a very happy new year. Happy new year

Cover image by Aidan Roof from Pexels

Wish you everyone a happy Diwali!

Vijay Koushik, S. 👨🏽‍💻 — Sat, 26 Oct 2019 17:51:57 +0000

Hello world,

I'm sorry, I couldn't publish a post this week. I wanted to write about particle physics with JavaScript and html5 canvas. But the demo took too long to make and I was busy with Diwali shopping. So I present to you the video of the demo this week and the actual post next week.

Diwali, in the true sense, means ending all evils, cruelty and hatred > towards one another. Get together to celebrate the spirit of the festival.

Happy Diwali! ✨🎆🙌🏽

Hiding to reveal

Vijay Koushik, S. 👨🏽‍💻 — Sat, 19 Oct 2019 00:00:00 +0000

Achieving Fluent design’s Reveal Highlight effect with CSS and JavaScript

Hello, world!

Last time I wrote an article about creating the Fluent Design system’s acrylic effect dubbed the “blurry glass effect” with CSS, you loved it. So, in response to your love, I’m going to share my experience of making yet another captivating effect called the “edge sheen effect”.

A sheen is a streak of light visible on the edges of objects with glossy surface. This “edge sheen effect” is used to highlight the interactive elements in the app that are neighbouring to one another. You can see this effect in the Start menu and the command buttons in various apps.

I love this effect so much. What sets apart this effect from other highlight effects used across the web is it only lights up the edge(s) near to the pointer. And to top it, the streak moves along with the mouse. It’s so mesmerizing! Every time I see this effect, my eyes widen, brain tingle and face smile. I play with this effect every time I notice it in an app. In the real world, you can see this effect on every smartphone ad.

This effect is called the “Reveal Highlight” in the Fluent Design System.

Like the Acrylic Material effect, I wanted to know whether I could do it with CSS.

In the preliminary research, I visited the documentation for the Reveal highlight effect for its recipe. It seemed simple. I tried it by creating a tile layer and added a content layer within it. For the edge sheen, I used gradient borders for the tile layer. I used the border-image-source property for this. But I didn’t know how to move the gradient with the mouse. And making only the borders near to the pointer visible was a bit difficult.

So, I checked if I could find some help on the internet. After several attempts with different search term, I found that code pen users Michael and Shepshun had already implemented the effect. And GitHub user d2phap went one step further and had made a JavaScript plugin for the effect 😮. I was just late to the party.

But none of them had explained how they achieved this effect. Using this opportunity, I’ll explain to you how to make the effect.

The key to the effect is to add a background plate with a radial gradient from white to transparent behind the content and make the background plate is slightly bigger than the content layer so that it appears like a border to the content layer. Bear with me. Let me explain.

I modified my previous recipe by transforming the tile layer into the background plate and called it the edge sheen layer. Then I added three child container elements to it.

A back colour layer to display the background colour of the element.
A hover layer to display the hover effect. I’ll be telling you about this later.
And a content layer to hold the content of the element.

Recipe for edge sheen effect

I arranged all these child layers exactly to the centre of the edge sheen layer with flexbox. I reduced the dimensions of the back colour layer so that the edge sheen layer looked like the border of the back colour layer.

To move the sheen with the mouse, I tracked the coordinates of the pointer with the mouse move event and moved the position of the gradient with it. This made it appear like the borders lit up only when the mouse was near.

The next part of the reveal highlight effect is the faint gloss that appears and moves with the mouse over the back colour layer when the mouse hovers above the element. I achieved this effect using the hover layer that I added beforehand. The gloss was created with the same white to transparent radial gradient as the background for the hover layer. With the previously tracked mouse coordinates, I moved the gloss within the element. By using the mouse enter and mouse leave events, I toggled the gloss whenever the mouse moved in and out of the element.Here is how it looks.

To enjoy the beauty of the “edge sheen” effect, multiple interactive elements need to be near one another using the effect. So, I made a demo with multiple elements in an asymmetric grid. Enjoy!

Also, here's a video demo of the effect

Photo by Alex Hussein from Pexels

My thoughts on TypeScript

Vijay Koushik, S. 👨🏽‍💻 — Mon, 14 Oct 2019 00:00:00 +0000

When I was a child, I used to play construction with my Dad’s music cassette collection. Sometimes, I would mix up the cases and the cassettes inside for fun. When my Dad wanted to listen to the music he liked, he would be disturbed when a completely different song play. And he would be frustrated when he couldn’t find the real one.

I feel the same frustration whenever I try to access a property in a JavaScript object that is supposed to be available and It doesn’t exist.

JavaScript gives me “God” like powers where I can create objects in one form and change it into something different at my whim. Like turning a fox into a horse or turning blood to wine. But this power gave me problems just like how I gave my dad problems.

If I had the magic lamp, I would ask Genie Smith to find me a way to designate types to data & objects when I write code and not when I execute it. And he would’ve said “Dude you can use TypeScript. It has what you need”.

If you don’t know what TypeScript is, it is an open source programming language designed to provide type-safety to JS projects with its strict type system.

After learning typescript for a week, here are my thoughts on TypeScript.

1. A Super set of JavaScript

Typescript uses the same syntax as JavaScript with nifty additional features. And I love it.

Typescript is just like JS but has a strict syntactic structure with stringent datatype rules. I would say it as a meta-data to JavaScript as it gives additional information about types and object structures. It kind of reminds me of C++.

2. Type safety

The type system in TypeScript, the set of rules on how to assign data types or types for short to variables, objects and other elements of my code is very stringent. This ensures that I do not assign a Person object to an Animal object or add a string with a number. This is called type safety in computer programming. Though JavaScript has type safety, it’s more lenient in my opinion.

3. A bouncer

I feel that typescript is like a bouncer in a bar who push away people when they do not follow the party etiquettes. It’s because TS pushes me back whenever there is an inadvertent type-related error until I fix it. It might seem tedious, It’s helpful nonetheless. The TS compiler helped me prevent spending a lot of time to debug the error which is the case in JS.

4. Code Hinting

My favourite part of typescript is its ability to present hints while I code. When combined with powerful code editors like VS Code or Atom, the contextual code suggestions helped me reduce errors and increased my typing speed. TS can do this because it’s a statically typed language. It means information about types are available to the compiler before the compilation starts. This availability of information helps the editors compile my code on the go and provide contextual suggestions.

5. Red squiggly lines

Available separately the linter when enabled in the editor, can detect errors of syntactic, type and even contextual nature. It presents the errors by underlining the error part with red squiggly lines as I type. This makes error correction easier and faster

6. Planning Ahead

New nifty features in typescript like the call signatures, object structure definition and interfaces allow me to plan ahead on how I’ll be applying my design to the code. For example, the call signatures are similar to function declaration in C allow me to sketch out the number of parameters needed and the return type. And the Object structure definition allows me to design a skeleton for an object before I define it.

7. Versatility

What makes typescript versatile is its wide variety of configuration options. I can enable and disable different options to cater to my project’s needs.

One of the settings I used a lot is the target option. It flipped between commonJS module system and the es5 module system while learning.

8. Just too many options

TS has just too many configuration options for a beginner. The ignorance of the purpose of some of these options led me to trouble. I did not know I had to include a separate library to use the DOM functions. I was like “What do you mean getElementById is not defined?”

9. Type definition

What makes typescript great is, it allows programmers to define new types for their need. Making use of this feature the definitely.org community has created high-quality type definitions for popular JS frameworks like JQuery, node.js and Angular which allows the use of these frameworks in Typescript.

But, could not find enough information on how to use a JS plugin or framework if it is not supported by the definitely typed community.

10. Partial to node.js

Typescript has so many features that I found useful. But in terms of documentation, it is partial to node.js. I found lots of learning aids about TS for node.js. But I couldn’t find equivalent amounts of learning aids for front end programming.

Conclusion

As a beginner, all these strict rules felt time-consuming since it took less time to write the same in JS. Over time, I realized the usefulness of TS and started using its features as I learnt them. I’ve decided to use typescript in my next side project instead of JavaScript.

References

“Programming TypeScript, Making your Javascript applications to scale” by Borris Cherney. ISBN - 9781492037651
“Type system”, Wikipedia
“Data type”, Wikipedia

3 Amazing ways to generate random numbers without Math.random()

Vijay Koushik, S. 👨🏽‍💻 — Fri, 04 Oct 2019 00:00:00 +0000

Have you ever played an online spin to win game? You know! The one that pops up as an Ad with the message “Spin this to win the latest, feature-rich Samsung smartphone!”? I did. Because who doesn’t want the latest smartphone for free? Sadly, no matter how many times I played, I didn’t win. Never the less, I was rewarded. Rewarded with the curiosity to know how this deceitful game worked. With a quick google search, I found that it worked by using a random number generator (RNG). It’s probably Math.random()

But… How does a computer, a device that is designed to work as per the instructions given by a human generate random numbers? Answer, it doesn’t. And it can’t. That is why it’s called a “pseudo” random number generator (PRNG). It means it’s a fake. It’s a knock-off.

Why a knock-off?

A True RNG needs additional hardware that can use real-world random phenomena from throwing dice 🎲 to measuring radiation from a radioactive material as an input to generate random numbers. Wow! Using the randomness in radioactive decay just to generate a number is mind-blowing! 🤯 Take a moment to let that sink in.

But this additional hardware is costly and who would willingly carry a radioactive material in their pockets except for Lex Luthor? That is why everyone agreed to settle with a PRNG.

PRNG is not a single standard algorithm used everywhere. I was struck dumb when I found out that there are not 1, not 2 but 28 different algorithms created by very smart people over the past 7 decades.

Let me show you 3 amazing ways to replace Math.random() in Javascript.

How do they work?

Pseudo Random Number Generator (PRNG) refers to an algorithm that uses mathematical formulas to produce sequences of random numbers.

https://www.geeksforgeeks.org/pseudo-random-number-generator-prng/

Though I couldn’t research all the 28 algorithms in a short time, I looked up 3 good ones. I first thought they used complex mathematical derivatives involving 100s of lines of code. Nope! I was wrong. With 2 to 5 lines of code involving basic arithmetic operations, they’re unbelievably simple. This makes it easier for beginners to understand.

All 3 algorithms and PRNGs, in general, followed these common steps

All these algorithms accept an input called the seed 🌱 number. This is the base number on which the formula is applied. Some algorithms can take other inputs as required by the mathematical operation to be performed.
They, then apply the inputs on the formula and the result generated is the random number.
The generated number is used as the seed for the next run.
These steps are repeated to create a sequence of numbers that make us believe they are random.

An unique property that separates PRNGs from true RNGs is that the sequences generated by PRNGs inevitably repeat themselves at one point of time.

1. Middle square method (MSM)

Invented by John von Neumann and described in 1946, the Middle Square Method (MSM) is the first-ever method designed to generate pseudo-random number sequences ^[1]. Implementing this method is a child’s play. For an n-digit random number sequence,

Start with an n-digit number as the seed. Let’s say it’s a 2-digit number 42.
Square it. Here, the square of 42 is 1764.
Extract the middle n-digits of the squared number to get the next number in our sequence. In our case, the next number would be 76.
Use the result as the seed and repeat steps 1-4 for the next cycle.

Representation of middle square method

The simple nature of the algorithm is used as an exercise for beginner programmers to check their knowledge in the language they learned in Bootcamp. So, here’s my implementation in JS to help them.

/**

* Middle Square Method implementation in JavaScript

* for a 2-digit random number sequence

**/

var seed;

function middleSquareMethod(){

    var result = (seed * seed).toString().slice(1, 3); // extracting the middle value.

    seed = parseInt(result);

    return parseInt(result);

}

There is a problem with this approach. There are exceptional numbers whose square value have odd digits which makes it difficult to extract the middle digits like in the case of 15. Squaring 15 would result in 225. And we cannot accept 2 as the middle number since we need two digits. To solve this, we pad zeroes in front of the square value to make it even digits. Now 225 becomes 0225 which makes it easy to extract the middle 2 digits which is 22. After rectifying the problem, the code looks like this.

/**

* Middle Square Method implementation in JavaScript

* for a 2-digit random number sequence

**/  

var seed = 42;

function middleSquareMethod(){

    var result = (seed * seed).toString().padStart(4,"0").slice(1, 3);
    // pad with zero when necessary and extract the middle value.

    seed = parseInt(result);

    return parseInt(result);

}

With just three lines of code, we could generate a maximum of 8ⁿ numbers for an n-digit number after which the sequence repeats itself. There is a pitfall though. Some seeds can cause the algorithm to have a shorter cycle like the seed 25, which causes the algorithm to repeat 25 indefinitely.

2. The Linear Congruential Generator (LCG) algorithm

This fascinating algorithm uses more math than MSM. The LCG uses a linear equation that involves congruence operation for the generation of a random sequence of numbers. “Whoa! What’s all these fancy terms?” I can hear you exclaiming. Let me explain.

Linear means an algebraic equation that has no variables raised to the power greater than one.

Congruential means an equation that uses modulus division operation.

With its jargons, the algorithm might seem sophisticated. But, it’s very simple to understand as it uses very basic algebra and arithmetic operations. It uses this particular equation Xn+1 = (aXn + c) mod m. Alright! Alright! No more math terms. I’ll translate it to programmer readable from. The translated equation is, X = (a * X + c) % m

Where X is the seed. Akin to the MSM the result is used as the seed for the next cycle.

a – is the multiplier

c – is the increment and

m – is the modulus

It has the following conditions

m > 0, duh! divide by zero is impossible
0 < a < m
0 ≤ c < m and
0 ≤ X < m

Since this is a simple equation, solving this is a piece of cake for computers. In the case of the MSM, data conversion from number to string and back to number is required, which are heavy on the CPU. For this reason, LCG is the oldest and best-known random number generator algorithm ^[2]. And hence takes 2^nd in the list.

After all, both the increment and the seed can take the value zero care should be taken that both do not take zero or else it just spits out a sequence of zeroes.

Here’s how I wrote the LCG in JS

/**
* Implementation of the Linear congruential generator
* algorithm in JavaScript
*/
var X,a,c,m;

linearCongruentialGenerator(){

    X = (a * X + c) % m;

    return X;

}

It takes just two lines. Just two! I did a double-take after writing it 😲. It’s really incredible to see a simple equation to achieve something this big. This just increased my respect for Math.

With the right combination of inputs, we could generate a very long sequence. Longer than the MSM before it starts repeating itself. In my example I used the values a = 1664525, m = 2³² and c = 1013904223 as used in Numerical Recipes ^[3].

3. Xorshift algorithm

The third algorithm in the list is the Xorshift algorithm. I’ve saved this special one for the last. If the MSM is easier to understand for humans and the LCG is understandable by both humans and computers then the XOR shift algorithm is easily understandable only to computers. Because this method, as the name suggests, uses the special and rarely used binary operations Xor and bit shift.

Please bear with me. This one uses a lot of computer science terms. I chose this one because I thought I would never get to use those binary operators in my life just like how I thought I could never see Ash Ketchum win the Pokémon league championship.

Let me break down the algorithm. Bit shifting works by shifting the bits in the binary number either to the left or right. The result is a completely different number. For 1-bit shift to left, each bit is shifted one place to the left. The empty space is filled with 0 and the shifted out bit is discarded. And for a 5-bit shift to the left, single-bit shift operation is repeated 5 times. Here is an example:

The binary equivalent of 4210 in a 16-bit representation is 00000000001010102.

After shifting 5 bits to the left it becomes 00000101010000002 which is the binary equivalent of 134410.

Representation of 1-bit shift left operation in a 8 bit system

And if we shift the binary equivalent of 252410 – 00001001110111002 5 bits to the right it becomes 00000000010011102 which is 7810 in decimal. The rest of the bits on the right side is discarded.

Representation of 1-bit shift right operation in a 8 bit system

The bit shift operation, as you can see, requires only one operand and the result is a completely different number. On the other hand, the Xor operation requires two operands. XOR short for Exclusive OR operation compares the bits of two binary numbers and sets the bit of the result to 1 only when one of the bits in comparison is 1. Continuing with the previous example the Xor of 42 and 2524 takes place like this:

4210 – 00000000001010102

252410 – 00001001110111002 XOR - 00001001111101102 which is the equivalent of 255010.

Representation of xor operation in a 8 bit system

Xor also results in a different number. This algorithm combines the power of these two operations. And, here is my implementation of Xorshift in JavaScript.

/**
* Implementation of XorShift
* algorithm in JavaScript
*/
var seed;

function xorShift(){

  seed ^= seed << 13;

  seed ^= seed >> 17;

  seed ^= seed << 5;

  return seed;
}

This method performs consecutive bits shifts and Xor operations on the seed which creates a random sequence containing both positive and negative numbers. The constants 13, 17 and 5 in the algorithm is from the list of triplets suggested in the paper describing the Xor-shift algorithm ⁴. This algorithm works directly in binary, the language of the computers, which makes it faster than the LCG.

If you want only positive numbers, you can take the 2’s complement of the seed if it’s negative before returning the value. This can reduce the performance with the inclusion of a condition.

/**
* Implementation of XorShift
* algorithm in JavaScript
* with 2's complement
*/
function xorShift(){

  seed ^= seed << 13;

  seed ^= seed >> 17;

  seed ^= seed << 5;

  return (seed <0)?~seed+1: seed;
//2's complement of the negative result to make all numbers positive.
}

Computers store the positive and negative numbers (called signed integers) as binary numbers in 2’s compliment from. The leftmost bit (the most significant bit) is reserved to represent the sign of the number. 0 represents a positive (+) sign and 1 stands for negative (-) sign.

Do you know what a two’s complement is? Don’t worry I’ll explain.

In 2’s complement, A binary number say 11111111 11010011 (-4510) is taken and its bits are flipped. Meaning, 0s are made to 1s and vice versa. And finally, 12 is added to the flipped number. The result 00000000 001011012,is the positive form of the number (4510).

-4510 ➡ 11111111 110100112

Bit inversion

00000000 001011002

Add 1

00000000 001011002 + 12

00000000 001011012 ➡ 4510

Thus, in our algorithm, we always end up with positive numbers.

Conclusion

This article is just the tip of the iceberg in the rabbit hole of PRNGs. I wanted to share you the different ways to replace Math.random(). All these samples give out whole numbers which is the complete opposite of Math.random(). Math.random() spits out random decimal numbers only between 0 and 1. I’ll leave the conversion as an exercise to you. You can use ES5 features like generator functions to implement these. If someone does that, please post it in the comments.

Thanks for reading 😊

References

^[1] “List of pseudo random number generators”, Wikipedia.
^[2][3] “Linear congruential generator”, Wikipedia.
^[4] “Xorshift RNGs” [pdf] by Marsaglia, George, The journal of statistical software.

Cover image credit: Image by PIRO4D from Pixabay

Learning TypeScript: Hello world with DOM manipulation

Vijay Koushik, S. 👨🏽‍💻 — Fri, 27 Sep 2019 00:00:00 +0000

Every TypeScript example and tutorial I have found thus far is about language features, Static typing, Visual Studio, etc. I cannot find anything to tell me how I should be using it with reference to JavaScript and the DOM.

My understanding it you can use TypeScript for the DOM. But, I never see anyone using it for that.

Said johnny in a question on stackoverflow.com. A while back I had the same question. Can We Use Typescript to manipulate the DOM?

Hello world!

I’ve been learning Typescript for a week now. I got into typescript when I wanted to learn the new Angular. Since it is based on Typescript, I decided to learn Typescript. During learning, I found it odd that none of the learning aids I used included examples of using the language with HTML. Every example I saw in those learning aids and some other tutorials I then looked up involved only node.js. More googling landed me on StackOverflow where johnny, as I mentioned before, had the same question. using this as an opportunity to make a post after almost a year, I’ve made this post, the missing piece of the puzzle, in hopes that it would land first instead of johnny’s question on StackOverflow.

Configuration

Using the DOM or Dom manipulation in typescript is simple. All I needed to do was to use the types defined specifically for DOM access that is available in Typescript. The rest was the same as in JavaScript. But… these “DOM types” are not available out of the box with Typescript. I needed to explicitly configure the typescript compiler to include the “dom” library in the compilerOptions section in the configuration file^[2] to access the DOM types in my project. “Why didn’t they include by default?. Maybe the creators didn’t intend to use it primarily for front end development” I thought to myself.

Some other configuration changes I made were: I enabled strict mode for strict type checking and I changed the target from “common JS” to “es5”, so the compiler can output JS for browsers and not for node.js. I also added the “es2015” library so that I could use functionalities like arrays and Math functions for my example.

/**
* tsconfig.json
* Configuration file in the project folder for the Typescript compiler
*/
{
    "compilerOptions": {
        "lib": [
            "es2015",
            "dom"
        ],
        "strict": true,
        "target": "es2015"
    }
}

Hello world

In this article, I’m going to write a hello world program to demonstrate the use of DOM in typescript. Because it’s my first post on typescript. I’ll be covering the basics of using the DOM types and a problem a beginner like me would face while doing this the first time. I’m not covering DOM events here. I’ll be covering them in another article coming soon.

I’ll begin with the basics where I change the inner text value of an existing element. I started by creating an HTML file with a simple html5 boilerplate with a <h1> element with id greeter saying “hello” inside the body.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Hello world</title>
</head>
<body>
    <h1 id="greeter">Hello</h1>
</body>
</html>

Then, I opened a new typescript file and added the following code

let greeter:HTMLHeadingElement = document.getElementById("greeter");

greeter.innerText = "Hello world!";

In the code, I created a variable greeter and I assigned the type HTMLHeadingElement to it. The HTMLHeadingElement type which is defined in the “dom” library we added to the configuration, tells the compiler that the greeter variable expects an Html heading element and nothing else. And, I assigned the greeter to the value returned by the function getElementById which returns the element with the ID provided. Then I assigned the string “hello world” to the innerText property of the greeter element.

When I compiled the code with the command

:> tsc script.js

It threw the following error

| Type ‘HTMLElement | null’ is not assignable to type ‘HTMLHeadingElement’. |

Type ‘null’ is not assignable to type ‘HTMLHeadingElement’.

Bummer! My first attempt failed. On the bright side, Typescript is doing its job and the configurations I set up works. The error means that, I tried to assign greeter which is of type HTMLHeadingElement with an object of type HTMLElement that the method getElementById returned. HTMLElement | null in the error message means that the method’s return value can be either of type HTMLElement or null. The special operator | is called the union operator. I won’t be explaining “union types” in this article. You can learn about them here.

HTMLElement type is just a common interface for all the html elements^[1] but the compiler expects a HTMLHeadingElement. I thought of changing the greeter variable’s type to HTMLElement but I didn’t. Because, it’s not right. If I had changed it to HTMLElement, it means greeter could accept any HTML element from the DOM. I wanted it to accept only a heading element. So, I used type assertion feature of typescript (Learn about type assertion here) to tell the compiler that the element returned from the getElementById is indeed a heading element and it doesn’t have to worry about it. Here’s the fixed code:

let greeter:HTMLHeadingElement = document.getElementById("greeter") as HTMLHeadingElement;

greeter.innerText = "Hello world!";

Now, the compilation was a success. I included the script.js file generated by the compiler in the Html document and opened it on a browser. It looked like this:

Decoration time

Now that I’ve made sure that everything works as intended, It was time to decorate the page. I wanted a font style that is not formal looking. After browsing through google fonts, I chose Rock Salt. I imported it in my stylesheet along with Dancing Script as a secondary font using CSS imports. I then proceeded by adding a few more elements to the Html document. I centered all the text using CSS flexbox, added a nice background from UI gradients, and adjusted positions of some elements to arrange them properly. The page now looked beautiful.

Next, to place the cherry on top, I wanted to add a pretty background animation of orbs rising to the top like bubbles to the page. To make the orbs I decided to use <div> elements. Since I wanted several of these orbs with different sizes, I split the task into two so the work could be simplified. One, I created a common style for all the orbs and created a custom animation for the orbs in CSS. And two, I created the orbs dynamically with the help of typescript by creating a set number of <div> elements, assigning them the style created beforehand and randomizing their sizes, positions, and animation-delay to make them look more natural.

.
.
.
function createBubbles() {

 for (let i = 0; i < bubbleCount; i++) {

 let div: HTMLDivElement = document.createElement("div") as HTMLDivElement;

 let divSize = getSize();

 div.style.left = getLeftPosition() + "px";

 div.style.width = divSize + "px";

 div.style.height = divSize + "px";

 div.style.animationDelay = i * randomFloat(0, 30) + "s";

 div.style.filter = "blur(" + randomFloat(2, 5) + "px)";

 div.classList.add("bubble");

 bubbleBuffer.push(div);

 }

 console.log("Bubbles created");

}
.
.
.

Finally, I added the orbs to the dom like this and thereby kickstarting the animation

.
.
.
function releaseBubbles() {

 createBubbles();

 for (let i = 0; i < bubbleCount; i++) {

 containerDiv.appendChild(bubbleBuffer[i]);

 }

 console.log("Bubbles released");

}
.
.
.

Here’s the final output on YouTube

And the the repo containing the complete code

svijaykoushik / learning-typescript

Examples and demos as part of the series learning typescript on my blog :earn from my experience

Conclusion

During writing this article and the example, I realized the involvement of advanced concepts like type assertion and union types. I now understand why the authors of those tutorials didn’t include them. If included, it would have confused beginners outright. I think it’s best to learn typescript well before starting to use DOM in your projects.

In my example, I skipped the null checking when I fixed the type mismatch error as it seemed unnecessary for the example but you should check for nulls when necessary to avoid breaking your app at runtime. I also skipped the part where I added animations using the animate.css plugin for the text as it felt trivial explaining it.

Finally, I need to thank

Ivan PetrovFollow

/tinmanjk

Ivan Petrov for suggesting me to read a book when learning a new tech in a comment

Ivan Petrov • Feb 17 '19

Thanks for the post and the useful links/images. This particular scenario can really be frustrating :)

Btw have you read a book on git? I found that a good book on git is much more valuable than guides / videos in that scenarios like this one occurred very very, infrequently as a result because of my deeper understanding.

</div>

on my previous post

Stop tracking and start ignoring

Vijay Koushik, S. 👨🏽‍💻 ・ Feb 17 '19 ・ 2 min read

#git
#untrackfiles
#removefiles
#removefolders

. Thanks, Ivan 👍🏽. The exercises in the book helped me.

Thanks for your time. :)

References

Interface HTMLElement - http://definitelytyped.org/docs/flipsnap--flipsnap/interfaces/htmlelement.html
Missing basic DOM types in TypeScript project - https://stackoverflow.com/a/42604094

Harmonizing Colours

Vijay Koushik, S. 👨🏽‍💻 — Sun, 03 Mar 2019 09:00:00 +0000

Hello world!

I’ll be sharing here an easy method I found on the internet to create a palate of harmonious colours with the HSV colour model. I’ll also explain the terms Hue, saturation and value based on my understanding as a beginner.

Choosing a good palate of colours was always a herculean task for me as I’m new to web designing. The colours would either look unpleasant or straight up hurt my eyes. Thus, I used online colour picking tools like Adobe Kuler and Paletton to create my colour scheme. I decided to stick with choosing from the traditional methods of creating the colour schemes and I refrained from creating a custom palate. But soon my curiosity kicked in and I started reading articles on web designing and app designing to find out how others created harmonious custom colour palates.

Using the HSV/HSB colour model

Most articles I read suggested to use the HSV colour model to create custom colour palates because It allows to choose colours as we perceive in real life. But each article defined these terms in a unique way which was confusing to me and took a bit of time to grab the idea. Among those articles Tyler Seitz's article Picking a Color Palette for Your Game's Artwork on tuts-plus stood out because of its easily understandable algorithmic approach in creating custom colour palates using the HSV model.

According to their article, an appealing colour palate can be created by equalizing two of the components in the HSV model. What is HSV model anyway?

According to Wikipedia,

HSV colour model was created to more closely align with the way human vision perceives colour-making attributes.

It has three components viz

1. Hue

According to Wikipedia, A hue is

the degree to which a stimulus can be described as similar to or different from stimuli that are described as red, green, blue, and yellow

In other words, hue is how we identify colours in terms of red, blue, green and yellow. For example, we identify Rose, Hibiscus, Apple and tulip as red even though they don’t exactly have the same colour. And we identify the turquoise gem as greenish-blue colour not green or blue because it appears as a mix of both. This hilarious meme from imgur gives a clear picture ;) of how we perceive hues.

How people perceive hues

In HSV model, colours of each hue are arranged in a radial fasion and represented as degrees from 0° to 360°. Where Red has a hue value of 0 ° and going counter clockwise at 120° we have green and further at 240° we have blue. Going further we reach Red at 0°.

Colour wheel showing hues radially in a circular fashion

2. Saturation

Saturation is the intensity of the colour with respect to the brightness of the light source. Saturation determines how vivid or how pale a colour appears in a light source. To put this in perspective, imagine how old clothes look faded when compared to new clothes in our wardrobe. The faded colour has less saturation whereas the vivid colours have high saturation. This image of faded jeans is the best representation for different saturations. Image to represent different saturation of denim blue with constant brightness

Sometimes low saturated colours are called muted colours. In HSV model Saturation takes a value between 0% to 100%. Where 0% saturation makes the colour white and 100% saturation has maximum intensity.

3. Value

Value indicates how bright or how dark a colour is. When value component of a colour decreases it becomes darker and darker and eventually becomes black with the lowest brightness. On the other hand, increasing the value component makes the colour brighter. With the highest brightness, the colour is considered to be a pure colour when it’s fully saturated. In the real world, birghtness can be visualized as illuminated and shadow regions of objects in everyday life. The illuminated areas have high brightness and the part of objects in the shadows have low brightness. Image to represent green under different brightness

Algorithm to create a harmonious colour palate

Note: From this point onwards, I'll be using the term brightness to represent the Value component of HSV model because it's more easy to understand.

I find Tyler Seitz's algorithm easy and efficient in creating a custom colour palate. I’ll just re iterate their algorithm here.

To create a great colour palette, you need only follow this rule:

IF hues do not equal each other

THEN set saturations to match each other

AND set brightnesses to match each other

ELSE IF saturations do not equal each other

THEN set hues to match each other

AND set brightnesses to match each other

ELSE IF brightnesses do not equal each other

THEN set hues to equal each other

AND set saturations to equal each other

Shades, Tints and Tones

We can extend this algorithm to create shades, tints and tones of a particular hue

// SHADES

SELECT a Colour

Keep the Hue constant

THEN Change the Brightness in equal intervals

AND Keep the Saturation unchanged.

To create different shades of the colour red, I started with Brightness at 100% and reduced it by 12 equally. This would create 8 shades of the colour. Different shades of red

// TINTS

SELECT a Colour

Keep the Hue constant

THEN Change the Saturation in equal intervals

AND Keep the Brightness unchanged.

Similarly, to create different tints, I start with 100% saturation and bring the it down by 12 evenly to get 8 separate tints. Different tints of red

// TONES

SELECT a Colour

Keep the Hue constant

THEN Change the Brightness in equal intervals

AND Change the Saturation with the same interval.

And to create multiple tones, I would again start with 100% brightness and 100% saturation and reduce them both in counts of 12 to obtain 8 different tones. Different tones of red

Conclusion

I used this algorithm to create a palate and it’s not bad for a first attempt. And This is how I implemented it.

My result after after following the steps to create a color palate

References

Color Theory for Designers: How To Create Your Own Color Schemes - https://www.smashingmagazine.com/2010/02/color-theory-for-designer-part-3-creating-your-own-color-palettes/
Picking a Color Palette for Your Game’s Artwork - https://gamedevelopment.tutsplus.com/articles/picking-a-color-palette-for-your-games-artwork–gamedev-1174
Color: HSB and tint-tone-shade - https://getpocket.com/a/read/1609347779
HSV color model - https://en.wikipedia.org/wiki/HSL\_and\_HSV

Stop tracking and start ignoring

Vijay Koushik, S. 👨🏽‍💻 — Mon, 18 Feb 2019 09:00:00 +0000

Hello world,

I’ve been playing around with GitHub & Git over the past few months and most of the time I accidentally commit and push files that are totally unrelated to the project. Usually they are the environment files like node_modules & build directories and package.json when using node.js as I use Gulp to minify css & JS and files like _site folder and Gemfile.lock when I use Jekyll for my blog.

The reason for this problem? I forget to add the .gitignore file to my repository. The .gitignore file contains all the ignore rules (usually names of files and folders to be ignored) for the project. But there is a catch. The .gitignore file will tell Git to ignore the existence of only those files that haven’t been pushed. Since I have already pushed the files, adding them to the ignore rule won't work. Git will keep tracking the changes to those files and nag me to commit those changes.

I could delete these files and push the deletions to the repo but, they’re going to be recreated every time I build the project. So, that doesn’t work. A quick search on the internet gave me the exact solution I needed. There is a way to remove these files from the repo and keep them locally. By executing the following command in a CLI like git bash or cmd I deleted the files from the repo without removing them from my local file system.


    git rm --cached <file name>
    E.g. git rm --cached package.json

A break down of the command to remove a file only from the repository


    git rm –r --cached <directory name>
    E.g. git rm –r --cached _sites

A break down of the command to remove a folder and it's contents only from the repository

The --cached flag removes the files from the repository and leaves the local copies undisturbed. And the –r flag recursively removes the files inside the directory specified.

Now that I removed the files from the repo, Git thinks that the local copies of the deleted files are something new I added to the repo. So adding these file names to the .gitignore file will tell git to ignore these files and they won’t be pushed again.

Since this accident happens to me frequently, I decided to post this here so I wouldn't forget to add the ignore rules to the repo. Even if I do forget, I know where to look for the solution.

To make things more simple I found a site gitignore.io that generates .gitignore file based on the Operating systems, IDEs and programming languages that I provide in an all in one text box. A screenshot of gitignore.io's homepage

Creating Bounding box for different code generated shapes

Vijay Koushik, S. 👨🏽‍💻 — Mon, 22 Oct 2018 16:15:48 +0000

Hello word,
I've been learning html5 game development for a few months and now I'm creating a breakout game in vanilla JS without any plugins for physics. And I'm also using assets generated through code. I'm doing this to learn basic game physics and to prove to myself that I can develop a game without 3rd party plugins or framework.

I'm using axis aligned bounding box (AABB) for collision detection. It was easy to implement it for the bricks, the paddle and the ball. Next, I wanted to add powerups. I thought about using shapes other than rectangles and circles for power drops like stars or clouds for powerups and hearts for extra lives. I managed to find the code to draw these shapes but, I can't figure out how to create a bounding box for these odd shapes.

I need guidance for programmatically creating bounding boxes for different shapes generated via code. I hope I'm clear with my question 🙂🤞🏽.

Why I use Bing

Vijay Koushik, S. 👨🏽‍💻 — Sun, 02 Sep 2018 22:45:00 +0000

Hello world! It's been a long time since I posted an article since I couldn't find time. So here's a quick post originally posted on my blog.

After giving a try to Bing I made a switch to it as my default search engine a couple of years ago. Though I made a switch, it is not 100% complete. I occasionally use Google from time to time. Without further ado here are 5 reasons I made a switch to Bing.

1. Homepage Background

This is the main reason I switched to Bing. On the early days of trying Bing I was working for a company where I used to start the day by opening my mail box on my browser. Bing, greets me with Gorgeous and colourful backgrounds (dubbed Image of the day) every single day. It may be a cute animal, a serene scenery, an elegant culture or marvelous achievements that we humans made. Sometimes the backgrounds may be short clips or even 360deg pictures. The cool thing is that it allows me to download the background if I like it so much and make it my wallpaper on my device. Making my homepage Bing was and is the favorite way to start my day. A typical Bing homepage with an alluring background

2. Personalized Image feed

Speaking of colourful images, Bing Image search allows me to make a personalized list of favorites (Broad topics like Animals to specific topics like cute cats) and show them as a feed with updated images on every visit. If the home page doesn’t satisfy me, then this will. My Personalized Image feed

3. More Image search

Other than an image feed the image search has a few neat features that often help me. Among them the following two are my favorites

a.GIF search

Posting GIF comments on social media is very fun. When I search for gifs I don’t have to click on every result to see the animation in action, instead I just hover over the results to see the preview. If I am on mobile the gif just auto plays! Given that enough time is given to load the gifs in both the cases. Hover to preview GIF.

b.Search Within

The search engine also has the feature to search within the image i.e. a part of the image. Whenever I need to find similar pictures of a part of a photo from a selfie or other pictures I highlight the area to be searched and get the results. The downside is, the accuracy of the results depend on the quality of the highlighted part of the image. Searching a part of an Image.

4. Video Preview

Another Important feature I like is the video preview. Often I search for solutions for OS or software problems, or video songs. Rather than starting a video, I hover over the result to get a short preview. It is to be noted that the preview option, if disabled by the publisher of the video will not work. Previewing videos on Bing.

5. Code Samples

This awesome feature is specific to programming. Since I like to code I always search for solutions for my problems on the web. In Bing, I get code samples among the results (Obviously from stack overflow). If it’s a generic problem like bubble sort I get an editable & executable code samples. Getting what I need on the results page helps me save time. Executing a code sample of bubble sort method of sorting a list.

As said in the beginning, I did not completely switch to Bing. It’s not perfect; I tend to use Google If I’m not satisfied with the results. These reasons stated here are based on my personal preferences and my perspective of usability. One advantage of using two search engines is that One can find Interesting information (trivial or important) on one site that the other fails to display. And I apologize for bad quality of Images. I had to compress them to save load time.

Header Photo by Steve Johnson from Pexels

Forem: Vijay Koushik, S. 👨🏽‍💻

The Slow Decline of My English Skills

Coding Beyond Limits: My Journey of Building a Web App with AI Creativity

Unleashing AI Creativity: Journey into Building a Web App with ChatGPT

Setting the Stage: The Quest Begins

Hurdles and Hilarity: Navigating the Unexpected

AI Artistry: The Birth of the Icon

Designing the Journey: A UX Guided by AI

Beyond Code: AI Deployment and the Future

Embracing Progress: Challenges and Opportunities

Join the Adventure: Exploring the Web App

svijaykoushik / chorno-chime

ChronoChime - Hourly Notification Progressive Web App (PWA) with background sounds and notifications.

ChronoChime

Overview

Deployment

3.1 Apache or IIS

3.2 Using the serve Package (Node.js)

Screenshots

About

The Future Awaits: A Collective Tech Adventure

Acknowledgement

2019 Year in review

Achievements

Life lessons

1. A picture is worth a thousand words

2. Read a book

3.Keep it simple stupid

Technical Knowledge

1. Git

2. Colour theory

3. Pseudorandom number generators (PRNGs)

4. Typescript

Wish you everyone a happy Diwali!

Hiding to reveal

Achieving Fluent design’s Reveal Highlight effect with CSS and JavaScript

Further reading

My thoughts on TypeScript

1. A Super set of JavaScript

2. Type safety

3. A bouncer

4. Code Hinting

5. Red squiggly lines

6. Planning Ahead

7. Versatility

8. Just too many options

9. Type definition

10. Partial to node.js

Conclusion

References

3 Amazing ways to generate random numbers without Math.random()

Why a knock-off?

How do they work?

1. Middle square method (MSM)

2. The Linear Congruential Generator (LCG) algorithm

3. Xorshift algorithm

Conclusion

References

Learning TypeScript: Hello world with DOM manipulation

Configuration

Hello world

Decoration time

svijaykoushik / learning-typescript

Examples and demos as part of the series learning typescript on my blog :earn from my experience

Conclusion

Ivan PetrovFollow

Stop tracking and start ignoring

Vijay Koushik, S. 👨🏽‍💻 ・ Feb 17 '19 ・ 2 min read

References

Further Reading

Harmonizing Colours

Using the HSV/HSB colour model

1. Hue

2. Saturation

3. Value

Algorithm to create a harmonious colour palate

Shades, Tints and Tones

Conclusion

References

Stop tracking and start ignoring