Forem: rahulbhai9

How I made my first contribution in open source?

rahulbhai9 — Mon, 13 Nov 2023 11:03:52 +0000

Generally, many people make their first contribution in a month of October. but here I am who has made his first contribution after the whole October was over. But there is a never wrong time to contribute in open source. So let's go through journey of my first opensource contribution!
I was able to make my first contribution in Supabase which is opensource alternative to Firebase. I fixed an issue related to accessibility!

How I found a project?

It can be donting for anyone to find a project to contribute to. It was same for me. but I have habit of browsing random websites and its repositories on Github. Still, it is very difficult to find and pick an issue which are beginner friendly. Whenever I use any website and if I find any issues which can be fixed, I keep a mental note of it. You can write it down as well. When I was reading blog in Supabase I noticed that in the footer section of the article, my screen reader was not reading names of social media sites properly. and I had an idea about how to fix the issue using aria-label.. so it was time to browse the repository.

Contributed!

I visited there repository. I read there how to contribute guide. And I created issue for the problem which I was facing. Here is the Github issue: Inaccessible links in Supabase blog
I could have directly submitted the pull request but I was unsure whether it is right path. So I decided not to do that. instead I followed there issue template and mentioned my problem. I also asked that I would like to contribute. And after couple of hours I received confirmation that I can go ahead with my contribution. Honestly, it was the moment field with excitement! I went ahead. I forked the repo and made necessary changes in the code. After doing that I submitted my first PR! Here is that PR: My first PR But I made a little mistake. generally after forking the repo, we create new branch for our specific code changes and submit PR from that branch. but I forgot to do that and made changes in the main branch and submitted PR directly from the main branch. Now, it was time to wait. for couple of days I did not here anything. But I was aware that it can take a long time to get a feedback so I decided to wait. and finally I received an email and when I saw it my PR was successfully merged! This is how I made my first contribution in open source.
If anyone would want any help regarding accessibility, I will try my best.
Any feedbacks are welcome!
Keep contributing!

Comparing features of web apps with native apps

rahulbhai9 — Thu, 29 Dec 2022 16:35:13 +0000

We are moving towards progressive web applications or PWA. But still there are few missing features which are available to developers of native apps but are not available for web developers. Let's have look at them.

limited excess of user's file system

Files are becoming more and more essential. Developers of native apps enjoy all facilities of creating, reading, updating and deleting files and folders. They are given full access to user's file system by native OS API. This essential functionality is missing from web. If functionality is not missing completely, we all have to agree that it is limited. For example, we cannot create directories in user's file system. It is impossible to save files at appropriate location then 'download' directory.

Limited access of running a background task

It is almost impossible to run any task in a background through websites. We have service workers. But they are not as powerful as native apps. It is impossible to play media files in background through a website. While developers of native apps enjoys almost unlimited power in this as well.

Limited push notifications

Push notifications are a key feature for many mobile apps, allowing them to alert users to important events even when the app is not actively being used. However, web applications have limited support for push notifications. Aur at least it is not as easier to send push notifications in web application. This means that web apps cannot match the level of engagement and convenience that native apps can offer through push notifications.

Limited hardware access

Web applications have limited access to the hardware of a device, such as the camera, microphone, sensors, or GPS. This can make it difficult for web apps to offer the same level of functionality as native apps that have full access to these hardware components. This limitation can be particularly frustrating for developers who want to create web apps that use augmented reality or other hardware-dependent features.

Limited offline support

One of the key advantages of native apps is their ability to work offline, allowing users to access content and features even when they don't have an internet connection. Web apps, on the other hand, are reliant on a stable internet connection to function, and they can be prone to disruptions when the connection is lost. While there are ways to improve the offline support of web apps, such as using service workers and caching strategies, they are still not as robust as the offline support provided by native apps.

Limited integration with other apps

Native apps have the ability to communicate with other apps and the operating system, allowing them to share data and functionality. This can be useful for creating a seamless user experience and enabling users to perform tasks quickly and efficiently. Web apps, on the other hand, have limited integration with other apps and the operating system, which can make it difficult for them to offer the same level of convenience and functionality as native apps. For example it is not possible to share a file directly with any web app.

Limited distribution and discovery

Finally, web apps can be more difficult to discover and distribute than native apps. While native apps can be found and downloaded from app stores, web apps are often hidden behind web searches or links and may not be as visible or easy to find. This can make it harder for web apps to reach a wide audience and can limit their potential for success.

conclusion

web applications are becoming more and more powerful. But it still suffers with few limitations compared to native apps. It's worth noting that many of these limitations are being addressed or overcome as web technology continues to evolve. For example, the introduction of web APIs and new browser features is helping to expand the capabilities of web apps and close the gap with native apps. However, there are still some significant differences between the two types of apps, and web apps may not be the best choice for every use case.

Is JavaScript a feature rich or mess?

rahulbhai9 — Wed, 28 Dec 2022 15:24:15 +0000

JavaScript is a modern and backward compatible programming language. I gave this weird definition because JavaScript is being constantly modernised and is maintaining backward compatibility. These two characters are essential to the language. And I wanted to highlight how this two play together. Please note that I am here to share my opinions.
While I was trying to come up with an idea for an article, a question struck me. Is JavaScript a feature-rich or a mess? By mess I don't mean quarky behaviour of JavaScript as it is defined in specification and we all can try to learn it. Buy it I mean that the language simply has so many features. The language offers multiple ways of doing several things. Let's have a look at few of them.

Variable declaration

JavaScript atleast has two ways of defining variables, by using var and by using let and const keywords. New keywords let and const are result of modernising process. While var was present from beginning. I understand that both have their pros and cons but I just wanted to highlight two ways of declaring variables.

Two ways for function declaration

Arrow function is relatively new edition to the language. JavaScript already had old way of defining functions. Both have some differences regarding implementation. But it doesn't matter for very simple use cases.

Addition to class keyword

Recently many keywords like class were added into the language which are related to object oriented programming. We can argue about it's usefulness but the truth is that now we have two ways to work with object oriented code. We can use new keywords and features or we can also use old constructor based approach.

Two API(s) for working with dates

We all know about tricky Date API for working with dates and time in JavaScript. We also have new Temporal API with looks very nice for working with dates. On a side note, I have another problem with this as well. New API may not be compatible with old API. I know we have work around this. But it would be nice if new would support old as well.

So many data structures

I don't have any objections about this as each data structure has unique purpose. but it is true that the language has many data structures with basic once like Object and Array. For example, we have Map, WeakMap, Set and WeakSet. And yes Record & Tuple are coming to the language!

Conclusion

It is very easy to prove that the language is feature-rich. But sometimes it looks like mess of features. one can argue that multiple ways of doing things gives greater flexibility and I completely agree to that. But sometimes it can create confusions as well. Would love to know your opinions!

Uniqueness of JavaScript

rahulbhai9 — Tue, 27 Dec 2022 15:27:43 +0000

Javascript is one of many programming languages. I wanted to explore it's uniqueness. Particularly, I was interested in finding things which are only available in JavaScript and not anywhere else. I was very disappointed. Still I have something to share.

dom management

JavaScript has ability to manipulate the web page on which it is running. It is the only language which is capable of doing this. I know about web assembly. But it is not used as much as JavaScript. So we all can agree that JavaScript is the only language for this task.

capable of managing web and content.

JavaScript is the only language which can manage browser window, local storage/session storage and other web based API (s) other than browser itself. It is the only language which is natively supported in browsers.

conclusion

We all can agree that JavaScript is the language of web. It was designed for this purpose as well. So naturally it's uniqueness can be found there. Rather than this it is almost impossible to find uniqueness from feature(s) or syntax perspective. JavaScript itself is adopting features from other programming languages and it's syntax is inspired from other programming languages as well. Feel free to share your findings and opinions below.

Every abbreviation used in JavaScript explained

rahulbhai9 — Mon, 26 Dec 2022 16:07:27 +0000

We use abbreviations to save few keystrokes. these are so frequent that this has become standard practice while writing JavaScript code.
I was wondering about how many abbreviations we use in JavaScript code basis. So I decided to write about all of them in this article. Let me know how many of these you were able to recollect.

e:

This is a common abbreviation for event, which is often used as a parameter in event handlers. For example:

element.addEventListener('click', function(e) { // do something with the event object });

el:

This is a short name for element, which is often used to refer to DOM elements. For example:

const el = document.getElementById('my-element');

req:

This is a short name for request, which is often used to refer to the request object in an HTTP request. For example:

app.post('/api/endpoint', (req, res) => { // do something with the request object });

res:

This is a short name for response, which is often used to refer to the response object in an HTTP request. For example:

fetch('/api/endpoint') .then(res => res.json()) .then(data => console.log(data));

We see req and res used in most express applications.

cb:

This is a short name for callback, which is often used to refer to functions that are passed as arguments to other functions. For example:

function getData(url, cb) { fetch(url) .then(res => res.json()) .then(data => cb(data)); }

i:

This is a common abbreviation for index, which is often used as a loop variable when iterating over arrays or other collections. Sometimes we use idx as well. For example:

for (let i = 0; i < arr.length; i++) { console.log(arr[i]); }

obj:

This is a short name for object, which is often used to refer to objects in JavaScript. For example:

const obj = { name: 'John', age: 30 };

err:

This is a short name for error, which is often used to refer to error objects in JavaScript. Sometimes we represent error by just e. For example:

fs.readFile('/path/to/file', (err, data) => { if (err) { console.error(err); } else { console.log(data); } });

doc:

This is a short name for document, which is often used to refer to the global document object in the browser. For example:

const doc = document;

win:

This is not as much popular. This is a short name for window, which is often used to refer to the global window object in the browser. For example:

const win = window;

val:

This is a short name for value, which is often used to refer to the value of a variable or property. For example:

const val = element.value;

str:

This is a short name for string, which is often used to refer to string values in JavaScript. For example:

const str = 'hello';

num:

This is a short name for number, which is often used to refer to numeric values in JavaScript. For example:

const num = 42;

arr:

This is a short name for array, which is often used to refer to arrays in JavaScript. For example:

const arr = [1, 2, 3];

fn:

This is a short name for function, which is often used to refer to functions in JavaScript. For example:

const fn = function() { console.log('Hello, world!'); };

tmp:

This is a short name for temporary, which is often used to refer to a temporary variable that is used to store a value temporarily. For example:

let tmp = 0; for (let i = 0; i < arr.length; i++) { tmp += arr[i]; }

len:

This is a short name for length, which is often used to refer to the length of an array or string. For example:

const len = str.length;

ctx:

In the context of the HTML5 canvas element, ctx is a common abbreviation for the CanvasRenderingContext2D object, which provides methods for drawing and manipulating graphics on a canvas element.

``` const canvas = document.getElementById('my-canvas'); const ctx = canvas.getContext('2d');

ctx.fillStyle = 'red'; ```

We sometimes use this for audio manipulation.
In the context of audio programming in JavaScript, the term "AudioContext" (often shortened to "audio context" or "ctx") refers to an interface that represents an audio-processing graph built from audio modules linked together. An audio context is created using the AudioContext constructor and is used to create and manipulate audio nodes, which are connected together to form the audio processing graph.

const ctx = new AudioContext();

js:

How can we forget this? Obviously, we mostly use this for JavaScript as an file extension.

Credit

Thanks to Chat GPT3 for helping me remember all of this and generating code example for all of them.
Feel free to add your own in comments below!

Accessibility issues in code editors?

rahulbhai9 — Sun, 25 Dec 2022 07:43:30 +0000

We are living in an era where we are moving towards cloud computing. We are constantly finding new wayes to stay connected with our development environment and code repositories. Naturally coding with smartphone comes to mind. To facilitate this, many browser based code editors are being developed. We have browser based code editors like Visual studio code for web and dartpad These works for everybody. Right?

problems

These tools are great for those people as well who does not have access to a laptop or a PC. These tools does not work for visually impaired people like me who wants to code using their mobile. These code editors have several issues.

Inaccessible interface

There are several code editors and integrated development environments on web. They all have nice looking interface. But those websites generally does not have great support for screen readers. They have several buttons with appropriate icons but without any text. Gitpod is good example of this issue.

Issues while navigating code

We have several code editors with accessible user interface like Visual studio code for web
But in these code editors, With each keystroke, interface is being constantly updated. I understand that this provides features like auto complete and intonation. But These disturb screen reader user greatly. as soon as I press "enter", it becomes impossible to read previously written code somehow. It becomes impossible to navigate code line by line through features provided by screen readers(Talkback) on mobile.
FreeCodeCamp is great site for learning how to code. But I was unable to complete any courses because of enaccessible coding environment.

Android apps?

I was unable to find good Android apps for editing and writing code. Few apps are available but they all suffer from above mention issues.

Solution?

I wrote this article to seek help and suggestions. I need simple user interface with a normal input field where I can write and edit code. Github and Dev.to have great edit boxes. that's why I was able to publishe the post.
Additionally buttons can be provided by clicking on them I can auto format my code if needed. Sum of above mentioned code editors are open source project. People can contribute and make them accessible for all. Additionally all softwares should be tested by each user group. For example it doesn't hert to have a visually impaired person in the team who is able to test and give feedback about the use of software in mobile phone.
Thanks to Dev.to for enabling me to publish the post through their accessible interface.