DEV Community: Divyajyoti Ukirde

I couldn't be a Competitive Coder, but it still worked out!

Divyajyoti Ukirde — Mon, 11 Jan 2021 05:06:06 +0000

When I was in college, there was this fad of Competitive Coding. Competitive Programming is like a sport where participants have to solve certain programming problems with constraints, timed or untimed.

As a first year student in my undergraduate program, I literally had no idea what is coding. We were introduced to C language (at least I was) for the first time and I had failed pretty badly in the first exam (yeah, 32%).

I could write a good simple program in a couple of months. After I got a laptop, I did start practicing quite a lot at the end of first year. It wasn't easy, with no knowledge of data structures and only handful of looping and conditional constructs did not help much. I barely could solve problems that were grouped easy on Codeforces.

I turned back to focusing on academics and got very good grades in the first year. I stepped into second year with imposter syndrome. I could see everyone doing great around me. I could not even formulate a pseudo-code for half of the year. I again focused on implementing Data Structures in Practicals and got a hands-on them. C++ kind of made coding easier, I could write any code at the end of the year. Again, my focus was only on academics and academic projects. I loved tweaking with Linux and tried lots of stuff on Ubuntu. Soon, I was a go to person among my friends (also friends of friends) in fixing stuff that went wrong on their Linux systems.

I joined some coding groups but being an introverted (no programmer friends) and with a mindset that everyone around me had gone far ahead, I soon became demotivated. I left the coding group in a few days and went on to explore something else. My college had a very competitive environment and it was tough to find the right person that would really help out. In the beginning of Third Year, I found literally every single person I would talk was doing Machine Learning. I was interested in security and chose Blockchain as a specialisation. It was also a hype with a very few people into it.

Internship drives had started and I kind of ignored them. I did practice problem solving on Hackerrank. But I never came out of the comfort zone of solving more than easy problems. I would retake the problem solving tests with different usernames to score good. Even though I knew the solution, I couldn't handle the timer ticking to zero. Timers always got me panicking and they still do. Due to my other development skills I landed a fellowship the same year. I learned a new language in each semester in college. Built skills around simple web development, android app development and later picked react.

During recruitment days at college, I failed to secure interviews for around 25 companies due to their assessment techniques which consisted of coding and quantitative aptitude. There was no consideration for skills, no companies checked our resumes for shortlisting. There were many students who had spent their time "leetcoding", solving various problems, memorising the code. I couldn't make myself invest time to solve the problems on coding platforms. I wasn't good at syntax because I never learnt a language to write it correctly but to build something out of it. I never memorised all algorithms because they were already there on the internet except those that were for academics. Algorithms weren't the problems, they were the solution to other problems we were trying to solve. Sadly, the process wasn't project focused and I couldn't interview some big companies.

But I got selected for internship and later got the job without a coding test or giving aptitude tests. I did make it through the technical interview because my concepts were clear. I could explain what I could build or had built. I am not encouraging you to stop coding. I do code sometimes, just for fun and increasing my logical thinking. I just couldn't invest my whole time into it and compromise or ignore other stuff. During my college time, some good coders ignored academics, are rank holders in competitive coding and are also part of FAANG. Some people could balance all of these and were great at everything. It depends person to person.

I tried a lot but I still feel competitive coding is not cut out for me. Also, this doesn't mean I am going to stop here. I still practice coding and will keep doing because I like to put my brain to use. I may not be a great coder but everything is still working fine for me. I don't solve those kinds of problems at my job or in my projects, that is partly why I have accepted it. It is okay to NOT be a rankholder competitive programmer. There are other things too in Computer Science. But, this doesn't stop me from going back to solving coding problems.

I love challenges and I'll take my time to write optimised code for all sorts of problems.

Exporting your Twitter bookmarks in markdown file

Divyajyoti Ukirde — Sun, 01 Nov 2020 11:39:22 +0000

People used to bookmark tweets using the like feature on Twitter. Later, they introduced Bookmarks feature that helps you save the tweets privately. And now, you have saved thousands of tweets and you can't afford to clear them.

How about we export those bookmarks safely in a file. You can use it as you like - in a web application maybe. It should be noted that Twitter DOES NOT provide an API to access the bookmarks. So, we might have to do some stuff manually here.

I am going to show you how to extract links to the bookmark as well in few lines of python code.

Step 1

Store the Twitter payload in JSON file

An alternative of this step is using the Postman Client. You might want to try it out first, here is the link to a blogpost that allows you to send the request and it's download feature enables you to download the response in a click.

If you don't have the setup, we can get back to copy pasting the response from our good old browser DevTools.

Open Twitter web and go to the Bookmarks page
Open Dev tools and go to Network tab
Clear the network logs and select XHR
Apply filter as "bookmark"
Refresh the twitter bookmarks page

You would see some API calls are made as bookmark.json like below image. The API call is subject to change.

Update: Currently, /Bookmarks is used. Twitter has recently started using GraphQL to fetch bookmarks.

If you have tons of bookmarks, you might have to scroll till the end to get all pagination requests.

After reaching the end. Select each request and copy paste the response received from the Response tab as shown in the image above.
Save each response object with .json extension.

Step 2

Getting text and link of bookmarked tweets

Once you have saved the JSON files, put them in a folder.

Now we just have to write a python script that would get us the links to the Bookmarks and text of the tweet!

Reading JSON files from folder

import json
import glob

# using glob to read all files in the folder
files = [file for file in glob.glob("JSONBookmarks/*")]     
for file_name in files:
    print(file_name)
    with open(file_name) as bk:
        data = json.load(bk)        # reads json data
    all_bookmarks.append(data)

Here, JSONBookmarks is the folder name. glob() takes the path of the folder to read files from. /* means all files.

The twitter payload explicitly doesn't have the link to the bookmarked tweets.

It provides two primary objects of our use with keys:

tweets
users

We will have to use this data in the payload to construct the url to the tweet.

# Function to construct bookmarked tweet url
def constructUrl(tweet_id, username):
    return "https://twitter.com/" + username + "/status/" + tweet_id

I have used a deep_get method to get the nested objects.

# Method to get value of nested dictionary
def deep_get(dictionary, keys, default=None):
    return functools.reduce(lambda d, key: d.get(key, default) if isinstance(d, dict) else default, keys.split("."), dictionary)

Now the final code that loops through all the tweets to get the data and writes in the markdown.

Update: This logic is subject to change as per Twitter's bookmarks API response!

# saving in markdown file, if no file exists  using '+' creates one
md_file = open("bookmarks.md", "w+")

# Run a loop through all_bookmarks
for data in all_bookmarks:
    instructions_list = deep_get(data, "data.bookmark_timeline.timeline.instructions")
    tweet_entries_list = deep_get(instructions_list[0], "entries")
    for tweet_entry in tweet_entries_list:
        result = deep_get(tweet_entry, "content.itemContent.tweet_results.result")
        username = deep_get(result, "core.user.legacy.screen_name")
        text = deep_get(result, "legacy.full_text")
        tweet_id = deep_get(result, "rest_id")
        if tweet_id == None or username == None or text == None:
            continue
        text = formatText(text)
        url = constructUrl(tweet_id, username)
        bookmarked_tweet = "\n- " + text + "\n" + "\t - " + url
        md_file.write(bookmarked_tweet)

The final output would look like this:

I have formatted it as I wanted, you can do something else too. Here is the whole code for you to refer in this gist. The gist will be updated with new logic if any changes from Twitter API are observed.

How to create React App with Flask backend?

Divyajyoti Ukirde — Sun, 27 Sep 2020 16:13:25 +0000

Do you want use Python as backend for your React project? You can write the frontend logic in Javascript and use Python for the backend. Flask makes this integration into one single project really easy.

We'll be covering,

Creating Flask API
Creating React App
Integration

Creating Flask API

First we start by creating a Flask project. I would recommend to make a separate folder to run the backend server code.

$ mkdir flask-api
$ cd flask-api

I always setup a virtual environment. A virtual environment manages dependencies of the project and remain particular for the single project. It does not affect the system packages. The following commands are for Unix-based systems. They create virtual environment and activates it.

$ python3 -m venv venv
$ source venv/bin/activate
(venv) $

Python versions <3.4 do not have virtual environments inbuilt. You need to install a third-party package virtualenv and run virtualenv venv

Now you start installing flask and python's dotenv package. And flask-cors for handling Cross Origin Resource Sharing for making cross-origin http calls.

(venv) $ pip install flask python-dotenv
(venv) $ pip install -U flask-cors

Create a file app.py in the flask-api directory and initialise the flask environment.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

The next step is to create a .env file which contains the following data.

FLASK_APP=app.py
FLASK_ENV=development

Flask automatically imports the project from the FLASK_APP environment variable. And reads the environment from FLASK_ENV variable.

Let's start with writing a simple API that responds with "Hello World". In recent versions, Flask supports returning dictionary rather than calling jsonify() as Flask implicitly JSONifies the dictionary.

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/hello')
def say_hello_world():
    return {'result': "Hello World"}

Start the Flask server using flask run. You should see something like this:

* Serving Flask app "app.py" (lazy loading)
* Environment: development
* Debug mode: on
* Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)
* Restarting with fsevents reloader
* Debugger is active!
* Debugger PIN: 306-333-596

Creating React App

$ npx create-react-app react-flask-app
$ cd react-flask-app

In package.json, add this particular line. It tells the development server to proxy the request to API server.

"proxy": "http://localhost:5000"

Integration

In React's App.js file

import React, { useState, useEffect } from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  const [placeholder, setPlaceholder] = useState('Hi');

  useEffect(() => {
    fetch('/hello').then(res => res.json()).then(data => {
      setPlaceholder(data.result);
    });
  }, []);

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Edit <code>src/App.js</code> and save to reload.
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Learn React
        </a>
        <p>Flask says {placeholder}</p>
      </header>
    </div>
  );
}

export default App;

Hurrah! We did it! It automatically makes a request to Flask backend and updates the DOM. There is no language barrier for client server communication.

Clojure and Leiningen to manage Clojure projects

Divyajyoti Ukirde — Mon, 07 Sep 2020 09:53:21 +0000

I would like to introduce you to Clojure. I am fascinated by how it works and it is also known to sharpen your thinking as a programmer. In this article, we'll do a basic setup and start programming in Clojure!

What is Clojure ?

Daniel Higginbotham in his book Clojure for the Brave and True has humorously defined Clojure as

an alloy of Lisp, functional programming and a lock of Rich Hickey's own epic hair

It combines Lisp dialect, powerful and expressive features of functional programming. Clojure is a hosted language meaning Clojure programs run on platforms like Java, Javascript and .NET and use their underlying features.

Leiningen

Leiningen is a useful tool to automate and manage your Clojure projects. Leiningen and Clojure require Java. Since, we are focusing on the JVM implementation of Clojure, OpenJDK will be required. You must have > 1.6 java version installed.

Follow the steps on https://leiningen.org/ to download Leiningen. It will automatically download Clojure compiler, clojure.jar

Creating a new project

lein new app clojure-project

After installing you would find the following files in the directory.

project.clj (like package.json of npm) contains project dependencies.
resources folder to save assets (like images).
src/clojure-project/core.clj will be where you write your code.

Running the project

(ns clojure-project.core
  (:gen-class))

(defn -main
  "I don't do a whole lot...yet."
  [& args]
    (println "Hello, World!"))

This code will be already present in the src/clojure-project/core.clj file. If you have ever used C, C++ you would know namespace and the main function. Well, the defn -main is the starting point of your program.

To run, cd into the clojure-project and run:

lein run

You should see Hello, World! as the output!

Building the project

Clojure works even with environment change. It is not necessary that Leiningen is required to run the project elsewhere. To allow code shareability, we can create a stand-alone file that works where Java is installed.

lein uberjar

After running this command a stand-alone file would be created in a target/uberjar/ folder (same directory level as src). This jar file can be distributed on any platform.

Using REPL

REPL - read, evaluate and print loop. It is a tool that takes single line and executes the code as soon as it evaluates (just like Console in web developer tools or python prompt).

To start Clojure repl

lein repl

The prompt would look something like this:

nREPL server started on port 56969 on host 127.0.0.1 - nrepl://127.0.0.1:56969
REPL-y 0.4.4, nREPL 0.7.0
Clojure 1.10.1
OpenJDK 64-Bit Server VM 1.8.0_242-b08
    Docs: (doc function-name-here)
          (find-doc "part-of-name-here")
  Source: (source function-name-here)
 Javadoc: (javadoc java-object-or-class-here)
    Exit: Control+D or (exit) or (quit)
 Results: Stored in vars *1, *2, *3, an exception in *e

clojure-project.core=>

Clojure follows prefix notation and everything resides in matching parentheses.

Samples to try out:

(+ 1 2 3 4 5) should add up all numbers and return 15
( str "hello world" ) should print "hello world"
( str "Hi! " "John " "Doe" ) should concatenate all the strings
( * 1 2 3 4 5 ) should return multiplied value 120

Twitter: Automate updating follower count in your name

Divyajyoti Ukirde — Sun, 30 Aug 2020 13:38:38 +0000

I wanted something fun to do in the weekend! Since, many people on dev twitter are building bots, I started this as a starting point.

This is how it looks - my name with follower count:

In this blogpost, I have listed one way of doing this. You'll find many other ways too!

Tech stack for this pet project

Node.js
twitter-lite (npm package)
Vercel (for hosting)
cron-job (free cron service to automate the update)

Pre-requisites

You must have an approved twitter developer account, and have activated the developer portal where you can create new app.
You get all your access tokens and API keys here and also a bearer token.

Step 1:

To write the code first.

We will be using twitter-lite, there are other packages as well that wrap the twitter API. First step is to create a twitter client that would fetch and send twitter data.

const Twitter = require('twitter-lite');

const twitterClient = new Twitter({
    subdomain: "api", // we are using twitter api
    version: "1.1", // twitter api version 1.1
    consumer_key: process.env.API_KEY,
    consumer_secret: process.env.API_SECRET,
    access_token_key: process.env.ACCESS_TOKEN, 
    access_token_secret: process.env.ACCESS_TOKEN_SECRET
});

Don't forget to add these environment variable when deploying on vercel.

The logic comes here:


const name  = 'Divyajyoti👩‍💻JS';

module.exports = (req, res) => {

    let httpResponse = res;
    twitterClient.get('account/verify_credentials')
            .then((res) => {

                if(!res){
                    httpResponse.status(500).send("Error fetching Twitter Client");
                }

                const followerCount = res.followers_count;

                const userName = `${name}|${followerCount}`;

                return userName;
            })
            .then((user_name) => {
                const response = twitterClient.post("account/update_profile", { name: user_name });

                response.then((res) => {

                    if(!res){
                        httpResponse.status(500).send("Update error");
                    }else{
                        httpResponse.status(200).send(`Update ${user_name} Success!`);
                    }
                })
                .catch((err) => {
                   httpResponse.status(500).send(err);
                });
            })
            .catch((err) => {
                httpResponse.status(500).send(err);
            });

};

It's my habit to add all these checks, you can avoid if you want but it helps in debugging.

If you want the number emojis as well, just create an object mapping and append.

The reason I used

module.exports = (req, res) => {}

is because Vercel Serverless functions demand it. Keep the file in /api folder, for vercel to identify it as lambda function.

So, it would look like we have created an API endpoint that will do the dynamic updating.

Step 2:

If you have done this correctly, rest all is easy job. I would suggest uploading your project on Github. Vercel is easy to use if you have Git integration.

Import the project using github repo url, add the environment vars and deploy it!

Open the url provided by vercel. If /api is not formed add /api/ if not index.js

Now go to Function logs and select the your function from dropdown. You'll see your api logs here.

Visit the url and see what message comes in the body. If it's successful, you'll see the change in your twitter account as well.

Step 3:

Now to update it with cron service. You don't need to manually hit the api to update change, cron will do the job for you.

Go to cron-job and create an account.
Create your first cron job, give your Vercel api url, specify the time interval to make your requests that will automatically run the function and update your twitter name.

Your job is done here!

You can comment if you get stuck or have any questions!

I referred these articles:

Header tags and how they boost SEO

Divyajyoti Ukirde — Wed, 19 Aug 2020 14:02:52 +0000

What is SEO?
SEO refers to Search Engine Optimisation. It is a process of increasing the website or webpage visibility when people search using certain keywords that are related to or rather used in the website. So, a lot of websites use this as a marketing strategy to increase their website traffic and rank higher in searches.

There are a lot factors that affect SEO when building a site. But how do HTML header tags come into picture?

Header tags play an important role in on-page SEO. They tell what your website is about, the overall context of the website or the webpage. Search engines give the header tags more importance than the rest. When search engines crawl your website, they read the header tags. So keep your header tags small and specific so that search engines can pickup the accurate keywords.

The first 3 header tags- h1, h2 and h3 carry more SEO value than the rest(h4, h5, h6). Choose your title carefully when giving values in these tags. Give importance hierarchically, meaning put more essence to h1, then the subheading h2, and then h3. Keep the context same, as it will be easy for the crawlers to recognise correct keywords.

Below is a basic example showing how you may use your header tags:

<h1>Header tags and SEO</h1>
<h2>What is SEO and importance of header tags in SEO</h2>
<h3>How should you use header tags effectively?</h3>

This example fairly shows certain keywords that might be easily extracted. Well, the game doesn't end here. You may get a lot of competition, only using header tags isn't going to help but is a great factor in deciding the rank of a website.

What is Shadow DOM??

Divyajyoti Ukirde — Tue, 04 Aug 2020 14:23:30 +0000

Shadow DOM is basically a sub-tree of DOM elements, which is included during rendering of the document but not included in the main document DOM. In other words, the content of a Shadow DOM is a different document, which is merged with the main document to create the overall rendered output.

Take an example of slider:

<input id="foo" type="range">

The thumb on the slider moves, when you have not written any css or javascript.

If you do inspect element on the slider you might see something like this:

Now, to enable Shadow Root you need to:

inspect element
click on the gear icon in the top right corner
Go to Elements
enable Show user agent shadow DOM

Now, try inspecting element again.
Do you see this?

You can override the default styles and tweak some beautiful features!

You could try it for <audio> and <video> HTML5 tags.

This is the link, I referred to understand.
https://glazkov.com/2011/01/14/what-the-heck-is-shadow-dom/

Get HTTPS support in just one line

Divyajyoti Ukirde — Fri, 31 Jul 2020 10:50:44 +0000

In your react web app, if you need HTTPS support while running on your localhost, just add this in your start script in your package.json file.

{
  "start": "HTTPS=true react-scripts start"
}

Then just run npm start.

You'll see something like this:

But that's acceptable, till your site is getting served over HTTPS.

Bingo!
No need to take efforts of creating an SSL certificate!

Thwaites Conjecture - graphically

Divyajyoti Ukirde — Sat, 18 Jul 2020 09:43:43 +0000

What are conjectures?

Wikipedia says "In mathematics, a conjecture is a conclusion or a proposition which is suspected to be true due to preliminary supporting evidence, but for which no proof or disproof has yet been found".

So, from one of these conjectures, I came across was the Thwaites Conjecture.
The algorithm proceeds as below:
Think of a positive whole number,
if the number is odd, multiply by 3 and add 1,
if the number is even, just half it.
Keep repeating this procedure, you'll eventually reach 1.

So, to see why this is true, I thought of plotting every step on the graph to see if there is any pattern. You can go ahead and comment your observations. Unfortunately, I couldn't find any pattern but I understood how canvas was used.

I am currently in the process of improving this project.
The height and width need to be scaled properly to make all the points visible.

Any suggestions are welcome.

Happy coding!

Easy peasy formatting list of names

Divyajyoti Ukirde — Tue, 14 Jul 2020 10:34:12 +0000

Given an array containing hashes of names.
You have to return a string formatted as a list of names separated by commas except for the last two names, which should be separated by &.

formatList([ {name: 'Dave'}, {name: 'Alex'}, {name: 'Marge'} ])
// returns 'Dave, Alex & Marge'

Here's a single line solution, regex peeps

let formatList = (names) => names.map(x => x.name).join(', ').replace(/(.*),(.*)$/, "$1 &$2");

But this is the most clever solution, I could never think of:

let formatList = (names) => {
  let a = names.map(obj => obj.name);
  let name = a.pop();
  return a.length ? a.join(", ") + " & " + name : name || "";
}

I could think of using reduce, forEach and other looping methods using if else. reduce does a pretty great job itself.

let formatList = (names) => {
  return names.reduce((prev, curr, i, arr) => {
    return prev + curr.name + (i < arr.length - 2 ? ', ' : i == arr.length - 2 ? ' & ' : '');
  }, '');
}

Easy peasy reverse words

Divyajyoti Ukirde — Sun, 12 Jul 2020 10:48:48 +0000

Return string with n or more lettered words reversed, given that string consists of letters and spaces only. (i.e. n is the word length)

A single line clever solution would be by using regex.
If n is predetermined, like n = 5,

const revWords = (str) => {
  return str.replace(/\w{5,}/g, function(w) { 
    return w.split('').reverse().join(''); });
}

But not all clever solutions are good to go on production. It does fit this problem but difficult to mutate or reuse the technique if problem changes. The next one's better.

const revWords = (str, n) => {
  return str.split(' ').map(function (word) {
    return (word.length >= n) ? 
    word.split('').reverse().join('') : word;
  }).join(' ');
}

setTimeout() - any drawback?

Divyajyoti Ukirde — Tue, 07 Jul 2020 07:46:39 +0000

Recently, I had come across a bug that needed auto-refresh after a certain point of time. And setTimeout() had been used to count down to the time and reload the page. Little did I know that setTimeout() came with a price.

As quoted on MDN Web Docs at the very bottom, "Browsers including Internet Explorer, Chrome, Safari, and Firefox store the delay as a 32-bit signed integer internally. This causes an integer overflow when using delays larger than 2,147,483,647 ms (about 24.8 days), resulting in the timeout being executed immediately."

Now, you'll understand what kept happening to the page! (The page kept reloading...)

It is very much true that there is hardly any process that would require this big a delay. You have other options, like reseting timer after certain duration or using setInterval().

I would prefer setInterval(), when there are simple operations in the callback function and when you know what is the maximum time that function is going to take to execute. If you aren't aware of the maximum time, the event queue will keep piling up forever as your code's activity lags behind the actual system time.

Choose wise! Don't forget to clear the timers when your job is done!