DEV Community: Varun Barad

Dart Extension Methods

Varun Barad — Tue, 04 Feb 2020 06:30:00 +0000

Welcome devs, have you tried your hands at extensions methods? Dart recently announced support for extension methods (from Dart 2.7) and extension properties.

Extension methods are a way to add functionality to existing libraries. When you are using someone else’s library it’s often impractical/impossible to change the API. But you can extend it using extension methods.

What are extension methods?

Consider the following code that parses a string into an integer:

int.parse('42')

Won’t it look cleaner/better if this functionality was available on String class like below?

'42'.parseInt()

Since the language (where class String comes from) doesn’t provide such a method we can’t parse a string to an int like that. Extension methods allow us to specify such custom functionalities not provided by the library (Dart language in this case). Let’s see how to do that in next section.

Writing a basic extension method

So we want to have a method parseInt on String class which would parse the given string to integer.

'42'.parseInt()

For that we will define an extension method on String like this

// File: extension_methods.dart
extension StringExtras on String {
    int parseInt() {
        return int.parse(this);
    }
    // We can also define getters as extensions
    int get doubleLength => length * 2;
}

Here we have named this set of extension methods as StringExtras, you can name them anything you like.

Note: As you might have noticed above, we can define multiple extension methods/getters under a single extension block.

Using the extension method

Extension methods (once imported) can be used just like any member method on that class’s object. Our example would go like this

import 'extension_methods.dart';

void main() {
    print('42'.parseInt() + 8); // Would print 50
}

Similarly we can use the getters too

import 'extension_methods.dart';

void main() {
    print('42'.doubleLength); // Would print 4
}

Important Notes

Extension methods don’t work with the type dynamic. However they do work with Dart’s type inference.
Since extension methods are resolved statically, they’re as fast as calling a static function.
Extension methods can’t access private members of the class.
If an extension member has a name conflict then you should refer here for your options.
You can define extension methods on classes which take generic type parameters (for example List<T>). Refer this section for further details.

Reference

Official release documentation - https://dart.dev/guides/language/extension-methods

Want to discuss this or any other interesting thing, hit me up on Twitter @varun_barad

P vs NP Algorithm Problem Types

Varun Barad — Sun, 02 Feb 2020 06:30:00 +0000

The above image represents something completely un-understandable to me during my college years. I couldn’t understand what the professor tried to explain during my algorithms class when the topic of P vs NP vs NP-Complete problems came.

Finally I understood it from a video by “Up and Atom”. The problems are grouped according to these 2 criteria:

Can a solution to the problem be found in polynomial time?
Can a given solution for the problem be verified in polynomial time?

NP Problems

These are the problems for which condition 2 holds true. If given a solution to such problem, the correctness of that solution can be verified in polynomial time. Condition 1 being true or false for such problems doesn’t affect whether they can fall under NP category or not.

NP-Complete Problems

These are the problems for which condition 2 holds true but condition 1 is false. A valid solution to the problem can’t be verified in polynomial time, but if given a solution to the problem the correctness of that solution can be verified in polynomial time.

P Problems

For these problems, both conditions 1 & 2 hold true. There exist methods by which a valid solution to any of these problem can be found under polynomial time. And also, any given solution for such problem can be verified in polynomial time.

Want to discuss this or any other interesting thing, hit me up on Twitter @varun_barad

Record Linux terminal session

Varun Barad — Sat, 26 Oct 2019 06:30:00 +0000

I was recently setting up my computer with Ubuntu on it and this time I was decided that I would document every step of the process so that I can get it done faster the next time. That thought and process worked easily for the programs whose installations were just a simple sudo apt install ... but when I was installing something new (like VS Code) there were many steps involved and it wasn’t an easy task to document them as I went on installing those things.

What I decided to then do was to just record my terminal sessions for each such long program and review those recordings later to write a script for everything that I needed to do.

Linux has a handy utility called script which does just that. If it isn’t pre-installed then you can easily install it with sudo apt install script as it is generally available in the default PPA.

Using it is straight-forward too.

script <file_name_to_write_record_to>

I also find these options to be of significance:

-a, --append: This appends the recording if the file is already existing.
-c, --command <command_which_is_to_be_recorded>: If you want to record the interaction of a program with terminal then you can use this.

I found this command to be quite helpful in my recent endeavour of documenting the setup process and think it might others too. Want to discuss this or any other interesting thing, hit me up on Twitter @varun_barad

Sync git fork with upstream

Varun Barad — Fri, 25 Oct 2019 06:30:00 +0000

It is a common situation when we fork a project on Github and after some time we want to update our fork with the changes that have been integrated into the source project from where we forked. This is a simple guide on how to do that.

Conditions:

We have the remote of source project added to our local git repo.
The name of the source project remote is upstream.
We are syncing changes from upstream/master to our local master branch.

Below are the steps I found on Github’s guide.

Commit/Stash all your local changes.
Checkout your local master branch if not already there. git checkout master
Fetch (not pull) changes from upstream. git fetch upstream
Merge changes from upstream/master to local master. git merge upstream/master
Resolve merge-conflicts, if any.

And you are done. Your local master branch is now updated with changes from upstream/master.

Source: Github guide

Tip: Syncing like this will only update your local master. You will still need to push those synced changes to your Github repo if you want to update that too.

This was just a quick tip that I needed quite a lot recently and every time I had to go and search for that guide. So I wrote this to solidify the concepts in my mind. If you have any more such tips I would love to hear about them at this @varun_barad.

How to add “latest” post redirect to Jekyll site

Varun Barad — Tue, 08 Oct 2019 06:30:00 +0000

I wanted to have a URL which I can give to someone and it would always take them to the latest post published on my blog. I ended up using (https://varunbarad.com/blog/latest)[vb-blog-latest](https://varunbarad.com/blog/latest) as the URL.

Since my website is statically generated and hosted, it wasn’t an option for me to specify a server-side 30x redirect for that particular URL to my latest post.

So what I ended up doing is generate a page on each build which would redirect user to the latest post using JS. To get the information about latest post, I made use of Jekyll’s Liquid templating syntax (not sure what else to call it).

So the <body> tag of that page ended up looking like this:

<body>
{%- assign latest_post = site.posts[0] -%}
<p>Redirecting you to {{ latest_post.title }}</p>

<script>
    window.location.href = "{{ latest_post.url }}";
</script>

</body>

Here I get the details of latest post by taking the first post in the list site.posts. AFAIK site.posts is sorted in descending order by publishing date, so this approach fetches me the last published post.

Then it is a simple matter of setting the window.location.href to the final url of the latest post.

The final task remaining was to make sure that this page was compiled and generated exactly at https://varunbarad.com/blog/latest. For that I specified a permalink: "/blog/latest/" in the front-matter for that page. That way Jekyll knows where to put the final generated HTML file for that page.

Conclusion

That was all, a simple way to add a URL to your Jekyll site which will always take the visitor to your latest blog post. You can take a look at the full source code of my website over at GitHub or you can also find the full code of this “latest post redirect” page at this link.

If you want to talk with me about anything related to this feel free to reach out to me on twitter @varun_barad

JavaScript 30 - Array Cardio 1

Varun Barad — Thu, 03 Oct 2019 06:30:00 +0000

Day 4 of JS30 challenge, today I worked with various methods on array (I knew most of them beforehand) but I learned two cool things today.

The key concepts I learned from today’s challenge were:

Converting iterables to array in JS.
Displaying array of objects nicely formatted in console.

Converting iterables to array in JS

As you might have observed that document.querySelectorAll doesn’t return us an actual Array but instead it returns us what is called as a NodeList. Consequently NodeList doesn’t have all the methods that an Array does (like map, filter, reduce etc).

NodeList is an example of what we call as “iterable” in JS. So whenever working with iterables we tend to prefer to convert them to an actual Array so that we have more options to work with.

I already knew of one way to convert them:

const anyIterable = document.querySelectorAll('a');
const convertedArray = Array.from(anyIterable);

Here we used the Array.from method to convert the iterable to an Array.

The other way I learned today was:

const anyIterable = document.querySelectorAll('a');
const convertedArray = [...anyIterable];

Here we made use of a combination of 2 things:

1. ES6 spread operator `...`

When we prepend an iterable with ... (called the ES6 spread operator) what it does is it extracts all values from that iterable and replaces the ...anyIterable part of the expression with those values.

2. Array literal `[]`

Then when we enclose the “spreaded” values with [ and ] it converts the whole thing into an array containing all the values from that iterable.

Both produce the same result. I don’t know if one performs better than the other under large data-sets. But even though the [...anyIterable] way is more concise, to me the Array.from(anyIterable) usage seems more readable.

Conclusion

That’s all folks, that was it for today. If you have anything unclear in this article or want to discuss anything else, hit me up on twitter @varun_barad.

JavaScript 30 - CSS Variables

Varun Barad — Wed, 02 Oct 2019 06:30:00 +0000

On my day 3 of JS30 challenge I got introduced primarily to CSS variables but also to many other things.

The key concepts I learned from today’s challenge were:

CSS variables
dataset property on DOM elements
Image blur
Color input

CSS variables

CSS variables work very similar to how we use variables in JS or any other programming language. They let us define their value at one place and then just use that same value anywhere we refer to that variable.

For example, we can define at one place that we want text on our website to be white then we can define it like this

:root {
    --text-color: white;
}

Here we define this text-color variable at the root element. Now any place that we need to use this value we need to do something like

.content {
    color: var(--text-color);
}

CSS variables can be used for more than just colors. In today’s project we used these variables for storing the border thickness and color of an image and also for storing the blur amount for that image.

Note: One fun idea I have with CSS variables is that I can define the color palette of my website at one place and then provide the user with a night-mode switch. I can change colors across the whole website by changing them at just one place.

To modify their value via JS a simple method call does the trick.

<dom-element>.style.setProperty('--text-color', 'red');

The above snippet will change the value associated with --text-color at any point in the dom-element and any of dom-element.

`dataset` property on DOM elements

In HTML whenever we want to write a custom-property on an element we make use of what are called data attributes. A sample can be like

<input id="blur" type="range" name="blur" min="0" max="25" value="5" data-sizing="px" data-purpose="A slider input to select blur amount">

Here we have defined 2 data attributes, namely data-sizing and data-purpose.

Now when we need to use these in JS we can simply do

console.log(inputElement.dataset.sizing); // Used to access the data-sizing attribute.
console.log(inputElement.dataset.purpose); // Used to access the data-purpose attribute.

dataset is a very simple property on DOM elements which lists all the data attributes defined on that element.

Image blur

Today I learnt a nifty simple trick to blur an image using only CSS.

img {
    filter: blur(5px);
}

We can just specify a blur CSS filter and our work is done. There are lots of other functions available which can be used as filter, do make sure to take a look at that list.

Color input

Standardisation of HTML and CSS has made it easy to create a simple and functional color-picker. The only thing that needs to be done is

    <input id="base" type="color" name="base" value="#43bc46">

Here we have just declared an input tag which then takes care of displaying a color picker and also shows the user with a tiny sample of the color they have picked.

Conclusion

That’s all folks, that was it for today. If you have anything unclear in this article or want to discuss anything else, hit me up on twitter @varun_barad.

JavaScript 30 - CSS Analog Clock

Varun Barad — Tue, 01 Oct 2019 06:30:00 +0000

Today I am continuing my work on JS30 challenge and building a simple analog clock using CSS shapes and then animate it with CSS transforms timed using JS.

The key concepts I learned from today’s challenge were:

Changing rotation center of an object in CSS
CSS Transition timing function
A weird reverse-jump in animation whenever any clock hand crosses 12 o’clock mark.

Changing rotation center of an object in CSS

By default an object in CSS rotates around its center. But in our clock we need to rotate them around one of their corners. Therefore we need to change their CSS origins

.hand {
    transform-origin: 100%;
}

The above snippet moves the origin point for all CSS transforms to the right end of that element.

CSS Transition timing function

You can provide a timing function for your CSS transitions so that they follow it for their rate of change during the duration of your transitions.

.hand {
    transition-timing-function: ease-in-out;
}

There are many built-in transition timing functions but I generally liked the ease-in-out for how its acceleration and deceleration feel much like natural movements. You can check out the rest of them if you like.

My favorite ability in this was that we can provide our custom timing functions using what is known as a bezier curve specification. For example:

.hand {
    transition-timing-function: cubic-bezier(0.42, 0.0, 0.58, 1.0);
}

In the above code-sample I have written the cubic-bezier format of the ease-in-out timing function but you can customize the bezier curve to your heart’s content using those 2 anchor points.

A weird reverse-jump in animation whenever any clock hand crosses 12 o’clock mark

The hands of my clock were moving nicely from 12 to 12 but when they were just going to reach 12 they would do a weird jump and instead of moving 1 tick forward from right before 12 to 12, they would perform a full reverse circle and reach 12 from that side.

This problem was occurring because of how we calculated the angles of rotation. We used the below equation for counting number of seconds.

const secondsDegrees = ((seconds / 60) * 360) + 90;
// Here 90 degrees is the initial offset to make clock-hands start at 12

With this what would happen is as below:

Seconds	Degrees
0	90
15	180
30	270
45	360
60 (or 0)	90

So the main issue is that when reaching the 60 second mark it rotates counter-clockwise because the final value of clock-hand handle (90) is less than its current value (360). So instead of the transition being a smooth forward transition, it jumps counter-clockwise and that’s where we see that queer problem.

A very quick way to deal with this is to keep the degrees calculation so that they are always increasing. The result with that would be something like this:

Seconds	Degrees
0	90
15	180
30	270
45	360
60 (or 0)	450

Conclusion

If you want to discuss anything that was unclear in today’s article then hit me up on twitter @varun_barad.

JavaScript 30 - Building a Drum Kit

Varun Barad — Tue, 01 Oct 2019 04:00:36 +0000

Wes Bos has created a course to get you confident in your JS skills in 30 days. In it you work on a new project daily for 30 days and in each project you make something using vanilla JS without any frameworks or libraries.

Today I started the challenge and first project was to make a drum-kit where different sounds are played based on the keyboard button you press. And the corresponding button gets highlighted on screen.

The key concepts I learned from today's challenge were:

Setting event-listeners with JS
Working with keyboard events and identifying key-codes
Playing audio and restarting the audio when it is already playing
How to sync JS code with CSS transitions
What value this takes inside the event listener function

Setting event-listeners with JS

The syntax for this is very simple

target_element.addEventListener('<event-name>', function_to_call_when_event_is_fired);

You can find a list of supported events here but beware, the complete list of events is too large and you might never need to use most of them.

Working with keyboard events and identifying key-codes

function handleKeyDownEvent(event) {
    console.log(event.keyCode);
}

window.addEventListener('keydown', handleKeyDownEvent);

Here we attach an event-listener for the keydown event to the window object since we want to capture the events across our whole web-page.
Then we find out which key was pressed based on the keyCode value passed via the fired event.

Wes has created a nifty little website (https://keycode.info) which we can use to find the corresponding keyCode for any key.

Playing audio and restarting the audio when it is already playing

In this project we have a set of buttons on the screen corresponding to different keys on the keyboard. And each button has a corresponding <audio> element on the page. The goal is to play the corresponding audio when a valid key is pressed on the keyboard.

So after detecting which key is pressed using the keyCode attribute, we select the corresponding <audio> element using a pre-specified data-key attribute in HTML and call the audioElement.play(); method on it.

let audioElement = document.querySelector(`audio[data-key="${keyCode}"]`);
audioElement.currentTime = 0;
audioElement.play();

In the above code-block you might have observed that I set the current-time of that element to 0 before calling play on it. This is done because when an audio is still playing (that is it has not finished) and we call .play() on it, this new call gets ignored. Therefore we reset the play-time for that particular audio element so that it correctly registers and plays 2 consecutive commands of the same key.

How to sync JS code with CSS transitions

When a key is pressed, we highlight the corresponding button for a short duration on the screen while playing sound for it. To highlight the button, we just add a class playing to it which scales it up and changes the border a bit. The second part of that is to remove the playing class as soon as the transition is finished so as to return the button to normal state.

For this I initially thought of using setTimeout with the same time-out as that mentioned in CSS as transition duration. Wes pointed out the flaw in it is that when we decide to update the transition duration we would need to make sure to update it in both the places (in CSS and in JS).

So a better way to synchronize CSS transitions with JS is again to use events. Here we specifically use transitionend event on the buttons like below.

function removeButtonHighlight(event) {
    if (event.propertyName === 'transform') {
        this.classList.remove('playing');
    }
}
document.querySelectorAll('.keys').forEach(button => {
    button.addEventListener('transitionend', removeButtonHighlight);
});

In above code, we select each button and then add the transitionend event-listener for it so now it will call removeButtonHighlight only and exactly when any transition on any of those buttons ends.

After that we simply remove the playing class from that button so that it returns back to its original/normal state. You might have noticed that I have put a check of event.propertyName === 'transform'. I would suggest you try and remove that check and console.log the event to find out why I might have put that check in.

What value `this` takes inside the event-listener function

One of the toughest concept to learn and correctly understand in JS is this or more specifically, what this means at different points of execution in our code.

In the last code-block you have noticed that I simply did this.classList.remove('playing') instead of trying to select that particular element using any other method.

It is so because in that particular case the value of this is whatever object the function removeButtonHighlight has been called.

So when we attach an event-listener on each of our button and on triggering of those events, they call removeButtonHighlight with the context of that particular button. So there this is referring directly to the button on which the event listener has been triggered.

Conclusion

Hope I have been able to explain what I learned in today's challenge. Hit me up on twitter @varun_barad in case you haven't understood something from this article or you have something new for me to learn.

In any case, don't forget to check out the JavaScript30 challenge from Wes Bos. It is an awesome way to get some JS confidence.

Switching RxJava schedulers between app code and corresponding tests

Varun Barad — Fri, 16 Aug 2019 06:30:00 +0000

A simple way to switch between using appropriate schedulers in app code and using trampoline schedulers for tests.

When using RxJava we need to specify the schedulers which we want to use to 1) perform the given task and 2) return result of the operation chain.

One of the interesting ways I found while working on a take-home challenge for a company was as below:

object VarunSchedulers {
    private var schedulers: RxSchedulers = RxSchedulers.Default

    fun enableTesting() {
        this.schedulers = RxSchedulers.Test
    }

    fun disableTesting() {
        this.schedulers = RxSchedulers.Default
    }

    fun io(): Scheduler = this.schedulers.io()
    fun computation(): Scheduler = this.schedulers.computation()
    fun main(): Scheduler = this.schedulers.main()

    private sealed class RxSchedulers {
        abstract fun io(): Scheduler
        abstract fun computation(): Scheduler
        abstract fun main(): Scheduler

        object Test : RxSchedulers() {
            override fun io(): Scheduler = Schedulers.trampoline()
            override fun computation(): Scheduler = Schedulers.trampoline()
            override fun main(): Scheduler = Schedulers.trampoline()
        }

        object Default : RxSchedulers() {
            override fun io(): Scheduler = Schedulers.io()
            override fun computation(): Scheduler = Schedulers.computation()
            override fun main(): Scheduler = AndroidSchedulers.mainThread()
        }
    }
}

Now let’s take the example of fetching a network query, we can simply do this

pandaService.getCutestPanda()
    .subscribeOn(VarunSchedulers.io())
    .observeOn(VarunSchedulers.main())
    ...

And when we write our unit-tests we can easily turn testing-mode on and off using the @Before and @After methods.

class SomeTestClass {
    @Before
    fun setupTests() {
        VarunSchedulers.enableTesting()
    }

    @After
    fun tearDown() {
        VarunSchedulers.disableTesting()
    }

    // Write your tests
}

Now whenever we are inside tests, then automatically the trampoline schedulers are assigned and respectively appropriate schedulers by default in case we are not in tests.

If you have more such tricks up your sleeve or something in here isn’t clear to you or you just want to chat then hit me up on twitter @varun_barad.

Make git forget a tracked file

Varun Barad — Thu, 06 Jun 2019 06:30:00 +0000

The default .gitignore file generated by Android Studio’s “New Project” wizard keeps some local IDE configuration files in VCS tracking. Nowadays I tweak the .gitignore file immediately after creating a new project, so as to avoid getting those files tracked.

But last week I opened one of my old projects and I hadn’t made those modifications to the .gitignore back then, so it was tracking those files. I wanted git to stop tracking those files but still wanted to keep them in my file-system.

So I went searching how to do it and found the below method.

Commit/Stash all your other changes
Add that file to your .gitignore
Commit the .gitignore changes
Execute the command git rm --cached <file> (For each file that you want to remove from tracking)
Commit the removal of those files from VCS.

Word of caution: This will keep the files in your directory but the next time these changes are pulled on some other machine, the removed files will be deleted from that machine. So it is advised to make a copy of those files first before pulling and then pasting your copied files back.

Source: Stackoverflow

This was just a quick tip that I needed recently and thought of sharing. If you have any more such tips I would love to hear about them at this twitter thread. Feel free to contact me for anything else that you would like to talk about @varun_barad.

Testing Deep-Link URLs using ADB

Varun Barad — Thu, 02 May 2019 06:30:00 +0000

ADB is a treasure trove and I regularly keep finding some gem from it. Recently I was working on creating some new deep-link integrations for the company I work at. The below command fires an event similar to one that gets fired when we click on a link in the device itself.

The pattern for command to trigger the deep-link is as below:

adb shell am start -a android.intent.action.VIEW -d "your-link-goes-inside-these-quotes"

Example

adb shell am start -a android.intent.action.VIEW -d "https://varunbarad.com/blog"

This was just a quick ADB tip that I have learnt and wanted to share with you. If you have any more such tips or tricks, I would love to hear about them on twitter thread for this article. Feel free to contact me for anything else that you would like to talk about @varun_barad.

DEV Community: Varun Barad

Dart Extension Methods

What are extension methods?

Writing a basic extension method

Using the extension method

Important Notes

Reference

P vs NP Algorithm Problem Types

NP Problems

NP-Complete Problems

P Problems

Record Linux terminal session

Sync git fork with upstream

How to add “latest” post redirect to Jekyll site

Conclusion

JavaScript 30 - Array Cardio 1

Converting iterables to array in JS

1. ES6 spread operator ...

2. Array literal []

Conclusion

JavaScript 30 - CSS Variables

CSS variables

dataset property on DOM elements

Image blur

Color input

Conclusion

JavaScript 30 - CSS Analog Clock

Changing rotation center of an object in CSS

CSS Transition timing function

A weird reverse-jump in animation whenever any clock hand crosses 12 o’clock mark

Conclusion

JavaScript 30 - Building a Drum Kit

Setting event-listeners with JS

Working with keyboard events and identifying key-codes

Playing audio and restarting the audio when it is already playing

How to sync JS code with CSS transitions

What value this takes inside the event-listener function

Conclusion

Switching RxJava schedulers between app code and corresponding tests

Make git forget a tracked file

Testing Deep-Link URLs using ADB

1. ES6 spread operator `...`

2. Array literal `[]`

`dataset` property on DOM elements

What value `this` takes inside the event-listener function