Forem: Santosh Viswanatham

Building an Accessible SaaS Product: A Developer Guide

Santosh Viswanatham — Thu, 21 Mar 2024 08:41:47 +0000

In today’s digital landscape, accessibility is not just a nice-to-have feature or matter of compliance; it’s a legal and moral imperative, and it’s a fundamental aspect of the user experience. Creating products that are accessible to all users, including those with disabilities, is not only the right thing to do but also makes good business sense. Many organizations, before buying a software product, will additionally evaluate the accessibility aspect of the software before making the purchase decision. In this guide, we’ll explore the essential steps to building an accessible SaaS platform, ensuring that it complies with accessibility standards and best practices.

Understanding Accessibility Standards 🌐

Accessibility standards provide guidelines for making digital content and platforms accessible to users with disabilities. One of the most widely recognized standards is the Web Content Accessibility Guidelines (WCAG), developed by the World Wide Web Consortium (W3C).

WCAG outlines four principles of accessibility: Perceivable, Operable, Understandable, and Robust (POUR), each with specific guidelines for achieving accessibility. WCAG uses three levels of conformance: A (lowest), AA, and AAA (highest). Aim for at least AA compliance to ensure your platform meets basic accessibility requirements.

Key Elements of Accessibility 🔑

Design with Accessibility in Mind 🎨

It takes almost little to no effort or cost to incorporate accessibility considerations into the initial design phase. Pay attention to color contrast, font sizes, keyboard navigation, and other aspects affecting users with disabilities.

Semantic HTML 🏗️

Use semantic HTML markup to ensure proper structure and navigation. This helps screen readers and other assistive technologies interpret content correctly.

Keyboard Accessibility ⌨️

Ensure that all functionality is operable via the keyboard alone. Users with motor disabilities may rely on keyboard navigation, so it’s essential to make sure all interactive elements are accessible this way.

Alternative Text and Captioning/Transcript for Media 🎥

Provide descriptive alternative text for all images. This is crucial for users who are visually impaired and rely on screen readers to understand content. Include captions for audio and video content and provide transcripts for podcasts and other non-text content. This ensures that users who are deaf or hard of hearing can access the information.

Testing and Feedback 📝

Regularly test your platform with users of diverse abilities and gather feedback to identify and address accessibility issues. Accessibility testing tools and user feedback are invaluable in ensuring your platform meets the needs of all users.

Accessibility Tools for Testing and Validating 🛠️👨‍💻

There are several tools available that can help you test your application for the Accessibility score. Every tool has its own criteria to evaluate the accessibility of your web application. Some of the tools that I prefer to use are

Chrome DevTools Accessibility Testing

Lighthouse, A feature of Chrome DevTools offers a built-in accessibility testing feature that allows developers to identify and fix accessibility issues. By auditing elements and inspecting accessibility properties, developers can ensure their platform meets accessibility standards. The best of the tools is that, along with reporting issues, they also provide links to guides on how to fix them.

Silktide Browser Extension

Silktide’s browser extension provides a user-friendly interface for testing website accessibility. With features like automated scans and detailed accessibility reports, developers can quickly identify and address accessibility barriers on their SaaS platform. Although there are several other extensions, I particularly like Silktide because it is one of the only tools that will give you a WCAG grade for every rule to help you understand your website’s compatibility with the grade.

Necessary Documentation for Accessibility Compliance 📄

Even if your platform is accessible, Your customers may still mark you as Not accessible if you don’t list the necessary documents on your website that validate the accessibility of the application. So in addition to building an accessible platform, it’s essential to provide documentation demonstrating your commitment to accessibility and compliance with relevant standards. Here are some key documents to include:

Accessibility Policy

A well-written accessibility policy should clearly state your organization’s commitment to accessibility. This should outline your accessibility philosophy, including your dedication to adhering to WCAG principles and making sure that accessibility is continuously improved. Here is an example of the Accessibility Policy.

Accessibility Statement

An accessibility statement communicates your platform’s level of accessibility and provides contact information for users to report accessibility issues. It should also include information on how users can request accommodations or assistance. You can use the Accessibility Statement Generation tool on w3.org to generate this statement.

Accessibility Report

Periodically publish an accessibility report that details the accessibility features of your product and any known issues or areas for improvement. This demonstrates transparency and accountability in your accessibility efforts. You can use the report generation tool on w3.org to get this done.

The tools on w3.org are Incredibly helpful. They provide a step-by-step guide to make your product Accessible while generating the required documents.

Building an accessible SaaS platform requires a commitment to understanding and implementing accessibility standards. By conducting thorough accessibility audits, creating comprehensive accessibility statements, using testing tools, adhering to WCAG guidelines, and leveraging resources from W3C, developers can ensure that their products are inclusive and usable by all. Remember, accessibility is not just a feature; it’s a fundamental aspect of digital equality.

I would love to hear if you have any other tips or resources that you follow to make your application Accessible.

Hacktoberfest with Interledger: Join the Open Payments Movement

Santosh Viswanatham — Sun, 08 Oct 2023 06:12:01 +0000

Interledger is thrilled to announce it's participation in this year's Hacktoberfest edition. 🎉

What is Hacktoberfest?

Hacktoberfest is a month-long celebration of Open Source that encourages people to contribute to open source throughout October. This year marks the 10th edition of Hacktoberfest. Every year, thousands of contributors participate in this festival to contribute to the projects they love and use, learn and enhance their skills to advance their careers, get mentorship, and feedback from industry experts. For organizations that believe in giving back to the community, Hacktoberfest is a fantastic platform.

Interledger and Open Source 🌐

The Interledger Foundation’s (ILF) mission is to broaden the diversity of voices in the tech ecosystem by using the Interledger Protocol (ILP) as a driver for digital financial inclusion. 🌍

The Interledger Protocol is an open-source, currency-agnostic payments network that enables money to travel as quickly and efficiently as data on the internet. The open architecture and minimal protocol enable interoperability for any value transfer system.

Interledger's objective is to enhance access to digital financial services by advocating for adopting an open-source currency network powered by the Interledger Protocol (ILP). Moreover, it actively collaborates with historically marginalized groups to fulfill this mission. These core values inspire us at Interledger to participate in Hacktoberfest.💪

This year marks the second edition of Interledger participating in Hacktoberfest.🎈

Contributing to Interledger this Hacktoberfest 🌟

There are multiple ways to contribute to Interledger this Hacktoberfest. You can build new features, find and fix bugs, write tests, help with documentation, organize digital/physical events to contribute to your community, and much more.

How to Get Started? 🚀

Head over to our GitHub repositories.
Filter repositories based on your skill set and interests.
Please read the contribution guidelines before you start contributing.
Find issues that are tagged with Hacktoberfest labels. Tip: Issues labeled as good first issue/goodfirstbug are ideal for new contributors.
Once you've chosen an issue, work on your contribution.
When you're ready, submit a pull request. Our maintainers and community members will review your work and provide feedback if necessary.
After your pull request is merged, you've officially contributed to Interledger.

Offline events

We would really love to partner with you and help with your Hacktoberfest events. If you are one who is part of a community and planning to conduct an event to educate and inform your community about Hacktoberfest then please fill out this form and we will get in touch with you.

Few repositories that are participating in Hacktoberfest

Rafiki

Rafiki is open-source software that allows an Account Servicing Entity to enable Interledger functionality on its users' accounts.

This includes

sending and receiving payments (via SPSP and Open Payments)
allowing third-party access to initiate payments and view transaction data (via Open Payments)

Repo link - https://github.com/interledger/rafiki
Contribution guide - https://github.com/interledger/rafiki/blob/main/.github/contributing.md

Testnet

Testnet is an open-source test application for Rafiki. In other words, a Rafiki Playground. It wants to use all of the functionalities of Rafiki and put its advantages of to the real test.

Testnet is made up (or will be made up in the near future) of several components, including a wallet application, a bank application, and an e-commerce application.

Repo link - https://github.com/interledger/testnet
Contribution guide - https://github.com/interledger/testnet/blob/main/.github/contributing.md

Helm charts

This is a Helm Charts repository for Interledger Kubernetes.

Repo link - https://github.com/interledger/helm-charts

and many more on Interledger repositories

What's in It for You? 🎁

As a Hacktoberfest contributor at Interledger, you will receive:

The opportunity and satisfaction of contributing to the next big thing in the Open and Inclusive finance systems space.
An opportunity to collaborate with and learn from like-minded and passionate individuals at Interledger.
Grab a cool T-shirt 🎽 for contributing 1 or more accepted pull requests(First 150 contributors), and score exclusive, limited-edition swag for making 4 or more accepted pull requests(First 10 contributors)!

Hacktoberfest is an opportunity to connect, collaborate, and create change through open-source contributions. Join Interledger on this exciting journey, and let's work together to build a more inclusive and interconnected financial future.

Head over to our #Hacktoberfest channel on our Slack if you still have any other questions or doubts.📢

We can't wait to see the incredible contributions you'll make. Happy Hacktoberfest! 🚀🌟🎉

Git Hacks for Hacktoberfest: A Quick and Easy Guide

Santosh Viswanatham — Tue, 26 Sep 2023 05:33:02 +0000

Hacktoberfest is just around the corner, and for many, it serves as a gateway to dive into the world of open source. I personally started my Open Source journey through Hacktoberfest back in 2015, and I've found that mastering Git and managing it efficiently can significantly enhance your Open Source contributions. 🌟

There is no one-size-fits-all approach to this; everyone has their preferred methods that work best for them.

In this post, I'd like to share a straightforward approach that has helped me streamline my Open Source work, using Rafiki as an example for commands and code. 🚀

Managing GitHub Remotes 🌐

GitHub Remote is the link that connects your local Git repository to the GitHub repository. Throughout your contribution journey, you'll be pulling code from the remote and pushing your changes to it. Here are a few tips for managing your remote

Clone the Repository from Its Origin:

When you clone the repository, make sure it's from its original source and not your fork. Your origin remote should look like this:

   origin   https://github.com/interledger/rafiki.git (fetch)
   origin   https://github.com/interledger/rafiki.git (push)

Fork the Repository and Add it as a Remote:

After cloning, fork the repository and add your fork as a remote. Keep the remote name simple; fork works perfectly. It's only four letters, making it easy to remember and type.

   git remote add fork https://github.com/devcer/rafiki

Here devcer is my GitHub username.

Now your remote should look like this

$ git remote -v
fork    https://github.com/devcer/rafiki.git (fetch)
fork    https://github.com/devcer/rafiki.git (push)
origin  https://github.com/interledger/rafiki.git (fetch)
origin  https://github.com/interledger/rafiki.git (push)

Contributing to Any Repository 🌱

As a contributor, you typically won't have direct access to push your branch to the repository. To contribute effectively, follow these steps:

Clone the repository:

   git clone https://github.com/interledger/rafiki.git

Fork the repository:

Add your fork as a remote on your local repository:

   git remote add fork https://github.com/devcer/rafiki

(Replace devcer with your username.)

Create and switch to your branch:

   git checkout -b feat/new-feature

Make your changes. 🛠️
Push your branch to your fork:

   git push fork feat/new-feature

Submit a pull request from your fork using the GitHub interface. 📤
Need to pull the latest updates from the origin remote?

   git pull origin main

Want to update your fork remote from your local repository?

   git push fork main

While some of the activities mentioned above can be performed directly using the GitHub user interface, where's the fun in that, right? Just kidding! Working with Git via the terminal provides you with a deeper understanding of how Git operates. Even if you can't remember all the commands, you'll still have a solid grasp of Git and the ability to figure out any command you want to use.

By following these steps, you can smoothly navigate the world of open source and contribute effectively during Hacktoberfest and beyond. Happy coding! 💻🔧

10 must-read guides for Open Payments and Web Monetization Enthusiasts

Santosh Viswanatham — Sun, 06 Nov 2022 07:54:39 +0000

Open Payments allows for seamless, secure, effortless payments over the web. The payments could be inter-wallet, cross-currency, and skips a few or all intermediaries in between the sender and the receiver.

Web Monetization is a new way to fund the open web. It allows people to make small, regular payments to the websites they visit, without the need for a third-party service. The payments are sent directly from the user's browser to the website's owner and can be used to fund anything from content to access to exclusive features.

Open payments are already making it to the mainstream and it is something that is exciting for Web engineers. I'm a grantee and will be participating in ILP Summit 2022 in a few days. I have compiled a list of guides and websites that helped me understand the next big thing in the world of open payments over the past few months.

1. [Proposal] Web Monetization - A new Revenue Model for the Web

One of the discussions on the proposal for the new revenue model for the web.

[Proposal] Web Monetization - A new Revenue Model for the Web - APIs - WICG

(UPDATED: 5 Sept 2019) An API that allows Websites to request a stream of very small payments from the user. Web Monetization is an alternative revenue model for the Web. It allows Websites to earn revenue from users without: Requiring users to sign-up to a subscription Needing to deliver content/services through 3rd-party platforms Advertising For a more detailed description, see the Explainer and track design discussion in the issue log. There is also an early Specification, which is obv...

discourse.wicg.io

2. Interledger

Interledger, is a payment messaging protocol that supports payments of any size, including micropayments. It allows payments to be aggregated and settled over existing payment networks, such as financial institutions and Visa/Mastercard. Web Monetization providers and receivers use Interledger to exchange payments.

interledger.org

3. Web Payments at W3C

w3.org

4. Web Monetization Specification

webmonetization.org

5. Web Monetization Explainer

Web Monetization Explainer | Web Monetization

Web Monetization (WM) is a proposed API standard that allows websites to request

webmonetization.org

6. Payment Pointers

Payment Pointers are a standardized identifier for payment accounts, just like email id for sending emails. This is an explainer on everything you need to know about Payment pointers.

Explainer - Payment PointersExplainer | Payment Pointers

Payment Pointers are a standardized identifier for payment accounts.

paymentpointers.org

7. Rafiki.dev

Rafiki is an open-source software package that provides access to a wide range of Interledger APIs. It is designed to be used by wallet providers, enabling them to offer Interledger functionality to their customers.

Hello from Rafiki Documentation | Rafiki Documentation

Documentation for Interledger's Rafiki

rafiki.dev

8. How to Web Monetize your Content and Support Creators Online with Micropayments

caseorganic.com

9. Open Payments

An API standard that can be implemented by any account servicing entity such as digital wallets, banks, crypto-wallets, and mobile money providers.

docs.openpayments.guide

10. Coil.com

Coil is a Web Monetization provider that provides its members access to web-monetized content.

developers.coil.com

Came across any other interesting reads? Share it in the comments.

This content is web monetized on dev.to 🙌 Show me some love. ❤️

Reiterating why you should never use Array ‘index’ as ‘key’ in your React Applications

Santosh Viswanatham — Thu, 06 Oct 2022 19:27:18 +0000

Photo by RealToughCandy.com

I know you might have heard about passing mandatory key prop in your iterators a lot before, but let's look at it again with an example of a super weird bug 🐞 I found in my code recently.

Imagine you are writing your React code to render a list of items using Array.prototye.map that returns a list of components. If you are working in a Repo with proper eslint setup then you might have got a warning related to react/jsx-key , which means key prop is missing inside your iterator. If you are aware of the rule react/no-array-index-key then you will probably set a unique value to your key prop, else you end up putting the arrayindex as the key prop without understanding the consequences.

Let's look at an example of these two approaches(Using array index and unique id) and reproduce the weird bug that I faced in my code last week. Below is a React codesandbox with the sample of two tables. Both the table components are exactly the same with the same data. The only difference being one table is rendered with array index as key and the other one with a unique id. Additionally, a user can also delete a product row from the table.

https://medium.com/media/e99850d39052f87cf29026ef37e6449e/href

Let's try to delete a row in the first table. As soon as you click on theDelete button, the text changes to Deleting... , and the row gets deleted after 3 seconds. However, the button in the next row gets updated toDeleting... , which is weird because we didn’t update it.

However, if you do the same action on the second table, it works perfectly. The only difference between these two tables is the first table rows are rendered with key prop as the index of the products list and the second table rows are rendered with key prop as the id of the product from the products list.

Did we fix the bug?

It was weird at first as we were unable to figure out the root cause of the issue. We were thinking of fixing it with a different set of approaches. But once we figured out the actual issue that the key is index by default, it was an easy fix. 🎉

Why didn’t my eslint catch this error?

Because, it is not from the code that we wrote. the issue was from a library I use, that sets the default key prop to the index in its iterable. 💭

Apart from this, there are other benefits such as performance optimization if data keeps changing after it is rendered. Keys help React identify which items have changed, are added, or are removed. So it is highly recommended to use unique identifiers as a key prop inside an iterable.

To read more about keys , Click here. ⬅️

If your React project doesn’t have the eslint rules react/no-array-index-key ,react/jsx-key enabled, I would highly recommend you enable them right away to avoid any such related UI bugs in the future.

For more information on the other eslint rules that can make you a better developer. Read here.

Hope this was helpful.

📚 Resources:

Document fragment — The lesser known superpower of Javascript

Santosh Viswanatham — Sun, 08 May 2022 08:48:13 +0000

Document fragment — The lesser known superpower of Javascript

Photo by Pankaj Patel on Unsplash

Page speed of our websites is important. A faster website will more likely improve the conversion rate and search engine rankings of the website. Even though your website has great user experience, it would still mean less if your website is super slow. Walmart once mentioned that every 1 second improvement in their website speed led to a 2% increase in their conversions. There are several such examples from many technology companies that co-relates Web Performance to Business Performance. 💸

If your app becomes sluggish and you suspect it to be the code, then it is most likely the HTML that is slowing it down or the DOM manipulations from your JS Code. Even in the web apps built using the most modern frameworks like React, it is most likely the unsafe handling of component re-renders that is making your app slower. 🐌

Changing actual DOM is an expensive operation and one of the reason modern frameworks use Virtual DOM is to make these operations less expensive with better change detection cycles and diffing algorithms. Document fragment is one such interface that we can use in vanilla JS to improve the performance of our DOM operations in an application. Document fragment is a fragment of the Document object and is not the part of the actual DOM. Using document fragment effectively will reduce the interactions with actual DOM, thus improving your app performance.

Lets talk numbers… 🤖

I have performed a jsbench test and added 10000 list items dynamically with and without document fragment. You can clearly see how the same code is faster when using document fragment.

jsbench stats

So, what is the difference?

In the first approach, you are accessing the actual DOM object(list) only once to add a fragment of DOM to it, however in the second snippet, you are changing actual DOM(list) 10,000 times and that makes this approach slower. 🐢

Inclusion of this simple concept does wonders in your application if it involves DOM heavy operations in your code, and Document fragment was rarely/never used in all the code bases I have seen until now. Thus, it has been a secret superpower of JavaScript for me that not many developers use even today.

References:

MDN — https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

Browser compatibility — https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment#browser_compatibility

ESLint rules that made me a better React developer

Santosh Viswanatham — Fri, 08 Apr 2022 16:54:25 +0000

Photo by Lautaro Andreani on Unsplash

I have been writing React code for about 15 months now and it has been an exciting journey where I get to learn new and better things around React even today.

Failing fast is something I personally value, and recommend fellow developers all the time. Having static code analysis in your repository will help you write cleaner code, find bugs earlier and reduce your overall cost overhead. 💸

Here, I listed out few ESLint rules we use in our repo at Marvin, that has been very helpful for us in writing secure, cleaner, bug free and maintainable code with better performance. 🚀

Security 🛡️

react/no-danger

This rule prevents you from writing insecure code. For example, this rule will throw an error if you dangerously set HTML without sanitising the input. More details here.

react/jsx-no-target-blank

This rule prevents you to add hyperlinks without creating security vulnerabilities. Your new window that the hyperlink opens can still have reference to the old window object. More details here.

react/jsx-no-script-url

Prevents you from opening up a dangerous security loophole as this can execute any unsanitised code. More details here.

Maintainability 📒

prefer-spread and react/destructuring-assignment

This rule has been very helpful while cleaning up code and updating components. It becomes easy to find redundant prop variables or variables in general and clean the code when restructuring. More details here and here.

react/jsx-props-no-spreading

This rule makes sure that you know exactly what props are passed to the child component, thus making sure you won’t pass any redundant props to your components. This would in turn reduce the number of re-renders in the component. More details here.

Clean Code 🧹

react-hooks/exhaustive-deps

This rule avoids a lot of bugs that might occur because of the hooks that we write without passing proper and required dependencies.

react/default-props-match-prop-types

Very helpful if you are trying to inculcate writing modular and reusable code across the application.

react/no-unused-prop-types and react/no-unused-class-component-methods

Helps you in cleaning up redundant props and component methods that are not being used in your code anymore.

react/no-unknown-property

This has been mostly helpful when I use class instead of className in my code even after 15 months of writing React every day. 🥲

react/sort-prop-types

Every developer who writes code will have his own priority of passing props in a component. This gets complicated with time and on onboarding new developers. But one thing that is constant for all developers is the alphabetical order. This rule will make sure that developers structure and maintain props on components using a single alphabetical order.

react/jsx-curly-brace-presence

Using both jsx expressions and javascript string literals will make simple things complex while writing code, at least in the initial days until you get a grip of using both in React. This rule would help you to quickly figure out bugs, incorrect code, unnecessary braces and helps you to simplify your code. More details here.

react/jsx-curly-newline

Helps you to structure and write cleaner code

promise/always-return

This rule has not only helped us to write cleaner code but also safely and properly handling asynchronous code in our react application. More details here.

Performance 🚅

react/no-array-index-key

If an array item is added at the beginning of the array then using the index as a key will re-render all the items in the array. This rule prevents us from using the array index as a key. Learn more about React keys here.

react/jsx-key

Keys in React identify which items in a list are changed, updated, or deleted. This rule detects if a key is needed for an element. You can learn why a key is needed from here.

react/jsx-no-constructed-context-values

This rule prevents unnecessary re-renders by suggesting us what all variables can be memoized in our application. Initially I often used useEffect and useState and wasn’t aware of useMemoor how to use it. but once I learnt how to memoize my variables, I was able to prevent a number of re-renders throughout my application. You can find more details in here.

These are some of the ESLint rules that we have enabled in our repo to write cleaner, maintainable, secure and bug-free code with better performance.

Know any other rules that could help write better react code? Comment below and help your fellow React developers. 🙌

Notion like Placeholders for every line — Slatejs

Santosh Viswanatham — Fri, 17 Sep 2021 18:59:47 +0000

Notion like Placeholders for every line — Slatejs

Photo by Diana Polekhina on Unsplash

I have recently worked on building a module that includes a google docs kind of functionality. I was exploring several JavaScript frameworks around building editors, and I finally choosed Slatejs

One feature of my editor was to have a placeholder for every line similar to Notion. By default, Slatejs provides a placeholder but it will be rendered if the document only contains a single empty block.

However, Slate.js doesn’t have the feature that I needed. I was able to figure out a solution with the help of the amazing Slate.js community members and thought to share this with you.

The solution I implemented was to check if a node is empty and then display a dummy text using CSS tricks.

.selected-empty-element {
  position: relative;
}

.selected-empty-element:after {
  content: " Use '/' to create question";
  color: #aaa;
  position: absolute;
  top: 0;
}

In the render element method, I will add this class selected-empty-element if the node is empty.

const Element = (props): JSX.Element => {
  const { children } = props;
  const isEmpty =
    children.props.node.children[0].text === “” &&
    children.props.node.children.length === 1;

  return (
    <p {…props} className={isEmpty ? “selected-empty-element” : “”}>
      {children}
    </p>
  );
};

But this gives out a weird user experience when you have multiple empty rows. All empty lines will show the placeholders.

So one solution I could think of was to check if that particular line has focus. I added a check using useSelected, and it looked exactly like the solution I needed.

const selected = useSelected();
return (
  <p {...props} 
    className={selected && isEmpty ? "selected-empty-element" : ""}
  >
    {children}
  </p>
);

However, there was one problem that I found later on. If I select the whole document, then the useSelected is true for all nodes and I could see the placeholder for all nodes.

Now I had to add another check to see if my selection is empty or not. I used the available library methods to see if the Range is collapsed or not using

const editor = useSlate();
const selection = editor.selection;
let isSelectionCollapsed = true;
if (selection !== null)
 isSelectionCollapsed = Range.isCollapsed(editor.selection);

So now the final Element code is

const Element = (props): JSX.Element => {
  const { children } = props;
  const selected = useSelected();
  const editor = useSlate();
  const selection = editor.selection;
  let isSelectionCollapsed = true;
  if (selection !== null)
    isSelectionCollapsed = Range.isCollapsed(editor.selection);

  const isEmpty =
    children.props.node.children[0].text === “” &&
    children.props.node.children.length === 1;

  return (
    <p {…props}
      className={ selected && isSelectionCollapsed && isEmpty
        ? “selected-empty-element” : “”
      }
    >
      {children}
    </p>
  );
};

This was the final solution that I needed. You can find the complete editor code in this sandbox here -

I hope this was helpful. Share with me some of the interesting features you built using Slatejs.

Deleting a property from a Javascript Object without Mutation

Santosh Viswanatham — Sun, 18 Jul 2021 08:16:50 +0000

Photo by Oskar Yildiz on Unsplash

Hey everyone 👋🏻,

There are multiple approaches to do the same operation in Javascript. Every approach has its own pro’s and con’s and there is always better way to do a particular operation in Javascript. In this article, let us see how to properly delete a property in Javascript without mutating an object.

Why Mutating Objects is bad idea?

We end up running into hard-to-debug and completely avoidable issues if we keep mutating objects in Javascript. The object might have correct value somewhere but will be different at other place and we would have no idea what changed what.

So it is highly recommended to perform CRUD operations on Javascript objects without mutating the objects. Take a look at this post to understand more about why it is recommended to avoid mutating Javascript objects.

Using `delete` keyword

Consider the below object,

const person = {
  firstName: "Tony",
  lastName: "Stark",
  team: "avengers",
  worth: "billions",
};

so if you want to delete a key from the person object then one way to do this is

delete person.worth; 
console.log(person); 

or

delete person['worth'];
console.log(person);

Although delete can be used to delete a property, you end up mutating the object which can cause undetectable bugs later on.

Alternative approach

A better way to delete a property without mutating is by using spread operator.

const {worth, …newPerson} = person;
console.log(newPerson);

Instead of mutating the original object, you create a new object and use it instead. If your object is a nested one then you may have to handle accordingly as using spread operator doesn’t perform a deep clone.

Bonus

Want to delete an object from an Array without mutating the Array?

const people = [
{ id: 1, name: 'ninja' },
{ id: 2, name: 'darkknight' },
{ id: 3, name: 'dexter' }
...
];

const updatedPeople = people.filter(person => person.id !== 2);
console.log(updatedPeople); 
// [
// { id: 1, name: 'ninja' },
// { id: 3, name: 'dexter' }
// ...
// ];

The updatedPeoplewill no longer have the person object with id 2.

Are there any other alternative and better approaches that you follow in your code? Share it with me in the comments.

Log all Prime Numbers till `n` using Javascript Generators

Santosh Viswanatham — Sat, 13 Feb 2021 15:26:05 +0000

Photo by freddie marriage on Unsplash

I was interviewing with few companies a couple of months back for a Frontend/Fullstack position. One of the most interesting questions I faced in one of the coding exams was to Write a function in JavaScript that takes an input 'n' and return all the prime numbers until 'n'. The question is simple and straight forward as you see it.

I quickly wrote the following code and it worked perfectly!

BOOM! I’m done. I felt happy and ran the test cases. Of course, they failed. Happiness is a myth in Javascript. There was a trick here and this was the provided main method that calls my function…



function main() {
  const primeNumberGenerator = getAllPrimeNumbers(23);
  let primeNumber;
  while ((primeNumber = primeNumberGenerator.next().value) !== undefined) {
    console.log(primeNumber);
  }
}

I observed some new keywords like next(), I remember to have seen something similar to this in RxJS but this was a pure Javascript code so this should mean something different. I googled and found something new in Javascript that I have rarely used/heard before - Generators in Javascript. It was a timed test, so I quickly read through articles, examples and fixed my code.

It worked and all tests passed!



Generators can return (“yield”) multiple values, one after another, on-demand. They work great with [iterables](https://javascript.info/iterable), allowing to create data streams with ease.

I don’t want to talk more about generators as there are better articles that do this. I have attached a few at the end that helped me in this course of learning.

This was one of the most interesting things I got to solve as part of the interviews. I wrote code to solve a simple problem but with lazy evaluation and memory efficiency. This was fun.

Few Articles that helped me to quickly understand Generators and Iterators -

I hope this was helpful to you to explore how we can use generators in our everyday code.

Why and How we moved away from jQuery in our Web Application

Santosh Viswanatham — Sun, 13 Sep 2020 16:38:14 +0000

Photo by Greg Rakozy on Unsplash

I got into working on a half a decade old web application and recently we started revamping our codebase to improve the performance of our App. We were trying out a few things to make things simple and removing jQuery as a dependency was one of that.

There are a ton of articles out there to help you choose if you should use jquery or not so I’m not going to talk about that(attached a few articles at the end of this article). I will instead mention the reason why we personally decided to move away from jQuery and how we updated a few of the jQuery snippets to Vanilla JS snippets in our codebase.

Why did we decide to move away from jQuery?

Firstly, we included jQuery for developer convenience and a lot has changed in the JS ecosystem in the past few years and honestly, we realized we could conveniently do almost everything in JavaScript now.
We don’t have to load a ~87kb file/code anymore in our project
Basic statements like selectors, event handlers, setters/getters can be written with vanilla JS. So instead of my library internally calling these basic methods, I can call them myself.
There is less scope to run into cross-browser compatability issues now, which was another main reason to use jQuery in the first place for many developers. So this benefit doesn’t apply anymore.
CSS3 Animations have far better performance than jQuery effects as CSS3 Animations run on a different thread than JavaScript in a web application. Try this out — https://greensock.com/js/speed.html to compare the performance

These reasons have strongly convinced us that we could unplug jQuery from our codebase and so we did it.

Below are a few jQuery methods that we have commonly used in our codebase. jQuery team is kind enough to list out the JavaScript alternatives to their jQuery methods in their documentation itself, so it wasn’t much of a challenge to move away from jQuery. I have also provided the alternative JavaScript code we used for every statement.

Note: These code-snippets are specific to our page design and code structure. They might differ depending on your codebase.

Selectors

We were extensively using class and id selectors to get DOM element references.

// jQuery
let searchBox = $(“.search-box”);
searchBox.on("keydown", () =>{
  // do something
});

// JavaScript
// we wanted the event listener only to the first text box anyway
let searchBox = document.getElementsByClassName("search-box")[0];
searchBox.addEventListener("keydown", () => {
  // do something
}):

Event Handlers

The .on we were using to attach events to any DOM Element is moved instead to .addEventListener. The code example in the above section is How we did it.

Effects

The .hide and .show methods we used to render after asynchronously getting data are with display: none and display: block. Well, there is a tradeoff that was acceptable to us, that is animation. we could use CSS animation for that but initially, we decided to hide/show using display style property as we could live without animation for now. Our default display property was block for the container so this worked perfectly for us.

// jQuery
$("#results").hide(500); // to hide
$("#results").show(500); // to show

// JavaScript
document.getElementById("results").style.display = "none" // to hide
document.getElementById("results").style.display = "block" // to show

Getting and setting attributes

// jQuery
$("#result-link").attr("href");
$("#result-link").attr("href", "https://www.google.com");

// JavaScript
document.getElementById("result-link").getAttribute("href");
document.getElementById("result-link").setAttribute("href", "https://www.google.com");

Get/Set class names and styles

// jQuery
$( "#results" ).hasClass( "show" ); 
$( "#results" ).addClass( "show" );
$( "#results" ).removeClass( "show" );
$( "#results" ).css({top: 0})


// JavaScript
document.getElementById("results").classList.includes("show");
document.getElementById("results").classList.add("show");
document.getElementById("results").classList.remove("show");
document.getElementById("results").style.top = 0;

.ready()

The JavaScript version of .ready function is adding handler DOMContentLoaded to the DOM element. There is an in-depth answer on StackOverflow but this is our initial workaround.

// jQuery
$(document).ready(function() {
  // Handler for .ready() called
});

// JavaScript
document.addEventListener("DOMContentLoaded", function() {
  // Handler for DOMContentLoaded
});

Although jQuery syntax looks simple and short, we live in a world with minifiers that will make sure no extra bytes will be delivered to the client machine using JavaScript.

IMHO, Newbie Web Developers should take a look at jQuery at least once in their amateur phase. It personally helped me to gain conceptual knowledge of many in JavaScript and easily relate to them, eg: Event binding/unbinding, DOM parsing, etc. If you are using any of the modern frameworks like Angular, React, or Vue, then the developer convenience and cross-browser compatibility are already there so there is less scope that you will include jQuery in your application.

Few articles you could read if you want to decide between To use or not to use jQuery

Hope this was helpful. Thank you for reading!

Optional Chaining — Using it already

Santosh Viswanatham — Sat, 01 Feb 2020 08:29:01 +0000

Optional Chaining — Using it already

Photo by Florian Weichelt on Unsplash

Typescript website defines Optional Chaining as

At its core, optional chaining lets us write code where Typescript can immediately stop running some expressions if we run into a null or undefined.

As JavaScript Developers we often get to work with deeply nested JSON objects, If the data is from a REST API then you are more likely depend on the Backend to ensure your response is in the format you are expecting, else we run into errors during runtime while executing expressions on those objects.

consider the following example

const person = {
  name: {
    first: {
      text: "Santosh"
    }
  },
  pets: ['cat', 'dog']
}

console.log(person.name.first.text.length); // logs the length of firstname
console.log(person.name.last.text.length); // throws an Error

Here in the second log, person.name.last is undefined and the expression tries to evaluate the text property of undefined which throws an error.

To handle this case I usually do

console.log(person && person.name && 
    person.name.last && 
    person.name.last.text && 
    person.name.last.text.length); // doesn't throw any error. logs undefined instead

I check the child property before accessing it, yet it is kind of messy. With optional chaining coming into the picture, we can do this instead

console.log(person?.name?.last?.text.length); // logs undefined

Pretty clean and simple, right? ⛓

You can use this for arrays and functions as well.

console.log(person.pets[3]); // throws an Error

with optional chaining, you can do a safe-check

console.log(person?.pets?.[3]); // doesn't throw an error, logs undefined instead

Enabling Optional Chaining in Chrome 79+

As per MDN, only Chrome 79+ and Opera 65+ have Experimental support for Optional chaining which has to be first enabled on the browser.

In Chrome

open the URL chrome://flags in your chrome browser
Enable Experimental JavaScript flag from the available Experiments

Current Status

Optional Chaining proposal has reached Stage 4(as of today, Jan 2020) of the TC39 process. 🙏

The active status of the proposal can be found in this repo here.

Configuring with Babel

Babel enabled us to use next-gen JavaScript today, and there is already a babel plugin that you can install to start using Optional Chaining.

You can find the installation instructions here.

Internally Babel transpiles the following code

console.log(person?.name?.last?.text.length);

var \_person$name, \_person$name$last;

console.log(person === null
  || person === void 0 ? void 0 : (\_person$name = person.name) === null
  || \_person$name === void 0 ? void 0 : (\_person$name$last = \_person$name.last) === null
  || \_person$name$last === void 0 ? void 0 : \_person$name$last.text.length);

If you are thinking about what the hell is void 0 then I recommend you to go through this article. It basically evaluates to undefined . Now, look at the above code again to understand it.

At any point, if the nested property is either null or undefined the expression evaluates to undefined

Optional Chaining in Typescript

I’m glad everyone is moving forward with optional chaining much quicker than expected. Typescript 3.7 now has support for Optional Chaining. 🙌

You can find the release notes here.

Let's see how the TypeScript code of Optional chaining transpiles to JavaScript.

console.log(person?.name?.last?.text.length);

I was using the tsc command-line tool to compile the above TS Code and the transpiled code was

var \_a, \_b, \_c;
console.log((\_c = (\_b = (\_a = person) === null 
  || \_a === void 0 ? void 0 : \_a.name) === null 
  || \_b === void 0 ? void 0 : \_b.last) === null 
  || \_c === void 0 ? void 0 : \_c.text.length);

It is almost the same as what we saw in the babel transpiled code. The object person is being checked at every level in its nested structure to see if the next key in that expression exists, else it returns undefined rather than throwing out an error.

Optional Chaining in VS Code

If you were using an older version of VS Code as your editor while running a few of the above code samples then your IDE would have yelled at you with errors.

Good news, VS Code 1.41 version now supports Optional Chaining. Thanks to Typescript 3.7(that’s what they said). 💪 You can find more info about the release here.

It is clear that we already have enough support to start using Optional Chaining in our projects. So, update your IDEs, update your TS Version and configure additional plugins to use it now. Let's throw a little fewer runtime errors with our expressions.