DEV Community: Rahul Kumar

Temporal Scoping in JavaScript

Rahul Kumar — Mon, 01 May 2023 09:08:26 +0000

If you can explain why the following outputs between the variables declared with var and let/const, then you can skip this article. Thank you for giving it a look.

console.log(a); //Output: undefined
var a = 1;
console.log(a); //Output: 1

console.log(b); //Output: Reference Error: b is not defined
const b = 2;
console.log(b); //Output: 2

Temporal Scoping

The reason is temporal-scoping. It was introduced in ES6 with the introduction of let/const.

A variable declared with let/const is unavailable before the declaration. Whereas, if declared with var, a variable is available in the entire scoping context. However, a value is assigned to it only when the variable is initialized. That is why, in the above example, a is available to use before its declaration, but it's still undefined.

Conclusion

ES6 (ECMAScript 6 now) has been around for many years now. The concepts introduced with it are well-supported in all major browsers. However, this aspect of scoping is not talked about much. I hope that you learned something interesting from this post. Until the next one. Cheers!

Skin in the Game: A Roadmap for Engineering Leaders To Find Meaning in Work

Rahul Kumar — Thu, 27 Apr 2023 19:39:33 +0000

Who is this article for?

For Software Engineering Leaders, both new and seasoned.

Introduction

At some point in time of your management journey, you must have wondered what impact you create as a manager, and what value you drive for your organization.

Summary

The purpose of this article is to outline my understanding of how an Engineering Leader can cultivate "Skin in the Game," as well as to offer a roadmap for Engineering Leaders, both novice and experienced, to achieve success in their positions.

After working as an individual contributor for 12 years, I made the transition to management in 2019. As I complete my fourth year in this role, I still find myself pondering these questions. While the decision to transition was mine, and I followed a methodical process to make it, it took me a few months to adjust to the new responsibilities, team, and expectations (If anyone is at a similar crossroads, please reach out to me. I will be happy to chat). Once I was acclimated, I began seeking a deeper meaning in my role.

I recently read Nassim Taleb's "Skin in the Game" and found it to be an excellent resource for my needs. I was inspired to gain insights from a pragmatic thinker like Taleb on issues relevant to my field.

What is "Skin in the Game"?

In the book, Taleb argues that people should have a personal stake in the decisions they make and the risks they take, and that those who do not have "skin in the game" should not be making decisions that affect others. He discusses this idea in a variety of contexts, including politics, economics, and business.

From Individual Contributor to Manager

While being an individual contributor may provide more immediate and visible results, being a manager can offer a different type of value by leveraging your skills and experience to drive results through others. As a manager, you have the opportunity to influence the direction of the team and the organization, develop talent, and create a positive work environment that supports high performance.

How to cultivate "Skin in the Game"?

Remember that having "skin in the game" is not just about taking risks, but also about taking ownership, being accountable, and aligning your work with the broader goals of your team and company.

There are several ways you can strive to have "skin in the game" and increase your sense of ownership and responsibility:

Understand the big picture : Gain a deep understanding of the overall goals and objectives of your team, department, and company. This includes understanding the product vision, customer needs, and business strategy. By aligning your work with the broader goals of the organization, you can better appreciate how your role contributes to the overall value delivered by your team.
Understand the business, not just the engineering : Engineering Leaders are the bridge between all the functions that it takes to make a product successful (Product, Design, Communication, SRE et. al.). The role demands one to focus on all aspects of business, not just engineering. If done correctly, there's a strong potential to make a large impact. That is why there are many examples of EMs going on to lead both Product and Engineering in their Organizations.
Empower your team : Create an environment where your team members feel empowered to make decisions and take ownership of their work. Foster a culture of accountability and trust, where team members have the autonomy to make meaningful contributions and take calculated risks.
Take calculated risks : Embrace calculated risks and be willing to make decisions that may involve uncertainty or ambiguity. Take responsibility for the outcomes of those decisions and learn from both successes and failures.
Solicit and act on feedback : Encourage open and honest feedback from your team, peers, and superiors. Listen actively, acknowledge shortcomings, and take action to improve. Continuously iterate and adapt your approach based on feedback to ensure that you are providing value as a leader.

You can collect feedback through various channels - in your 1-1s, through the feedback tools in your Organization,
Lead by example : Demonstrate a strong work ethic, commitment, and accountability in your own actions. Be willing to roll up your sleeves and work alongside your team to understand their challenges and provide support. Lead by example in embodying the values and behaviors you expect from your team.
Foster a learning culture : Encourage continuous learning and development among your team members. Provide opportunities for skill-building, knowledge-sharing, and growth. Help your team members understand how their professional growth aligns with the team's and company's goals.

Take responsibility for setbacks. Give credit for successes.

By taking these steps, you can strive to have "skin in the game" as a software engineering manager, and actively contribute to the value delivered by your team and organization.

What if I still feel disconnected from this role?

If you feel that you are not providing value in your current role or if you miss the direct impact of being an individual contributor, it may be worth considering a transition back to a technical role. However, it is important to carefully consider your motivations and ensure that you are not simply seeking short-term gratification at the expense of long-term growth and career satisfaction.

It is important to reflect on what you enjoy doing, what you are good at, and what you want to achieve in your career, and make a decision that aligns with your values and aspirations.

Ultimately, the decision of whether to continue in a managerial role or transition back to an individual contributor role depends on your personal goals, strengths, and interests.

Conclusion

If you want to discuss further on this topic or others, I will be happy to connect and brainstorm.

A Beginner's Guide to DNS

Rahul Kumar — Sun, 23 Apr 2023 03:01:09 +0000

In this article, we will be discussing DNS or the Domain Name System. DNS is an essential component of the internet that helps you access websites and other resources by their names, rather than by their IP addresses.

Understanding the Need for DNS in Web Browsing

Let's start with the basics. When you type in a website address in your browser, such as www.google.com, your computer needs to find the IP address of that website's server so it can send and receive information. An IP address is a unique numerical identifier assigned to each device on the internet, and it's how computers communicate with each other.

Now, imagine if you had to remember the IP address of every website you wanted to visit. That would be quite difficult, wouldn't it? This is where DNS comes in. It's a system that maps domain names, like www.google.com, to their corresponding IP addresses.

Understanding the DNS Resolution Process

The DNS system is hierarchical and distributed, meaning that there are many different DNS servers located all around the world, and they work together to resolve domain names. When you enter a domain name into your browser, your computer first checks its local DNS cache to see if it already knows the corresponding IP address. If it doesn't, it sends a query to a DNS resolver, which is typically provided by your internet service provider (ISP).

The resolver then looks up the IP address for the domain name by sending requests to multiple DNS servers, starting with the root servers. The root servers are the top-level DNS servers that contain information about the top-level domains, such as .com, .org, and so on. The resolver then continues to query more specific DNS servers until it finds the IP address for the domain name.

Once the resolver has the IP address, it sends it back to your computer, which can then establish a connection with the website's server and start exchanging data.

In-depth Look: DNS Records, Caching, and Security Measures

DNS Records

Now, let's talk about some of the details of how DNS works. DNS records are used to store information about domain names and their corresponding IP addresses. There are several types of DNS records, including A records, which map domain names to IPv4 addresses, and AAAA records, which map domain names to IPv6 addresses. There are also other types of records, such as MX records for email servers and CNAME records for aliases.

Caching

DNS also uses a system of caching to improve performance. When a DNS resolver receives a response to a query, it caches the result for a certain amount of time. This means that if the same query is made again within that period, the resolver can quickly retrieve the cached result instead of having to query the DNS servers again. This helps to reduce network traffic and improve the speed of DNS lookups.

Security

Finally, it's important to note that DNS can be vulnerable to attacks, such as DNS spoofing or DNS amplification attacks. These types of attacks can cause DNS resolvers to return incorrect or malicious IP addresses, leading to security breaches. To help prevent these types of attacks, DNS servers can use techniques such as DNSSEC, which adds cryptographic signatures to DNS records to ensure their authenticity.

What's Next?

By now, you should have a good understanding of how DNS works and why it's a crucial component of the internet. However, there is still much more to learn about DNS, including its architecture, protocols, performance, and scalability. In my upcoming article, I will delve deeper into these topics and provide you with more detailed information. So stay tuned for more on DNS!

Focus Trapping - Trap focus inside an element

Rahul Kumar — Mon, 05 Nov 2018 07:43:15 +0000

In this article, I will cover one of the important aspects of making a web-page accessible - trapping/looping (will call it looping from here on) focus inside a DOM element, scenarios in which it's required and a JavaScript utility to achieve it.
In the last section, I will discuss the nuances of the suggested solution on a mobile-device with screen-reader enabled.

Some words on the problem that we want to fix

Keyboard navigation is a basic requirement in making any product accessible. In a web-page that's easily achieved by using a combination of semantic HTML, tabIndex, aria attributes and some JS.

If you are aware of the problem, you may skip to the next section. For details, continue reading.

Let's take an example. Imagine a login page with both sign-in and sign-up buttons. Clicking any would open up a modal with fields required for the respective action. For a correct keyboard navigation -

When the modal opens, the first input element (which element should get the focus depends on the page's interaction design) should get the focus.
The user should be able to tab to the other interactable elements inside the modal.
On tabbing the focus shouldn't go out of the modal or rather should loop inside

As natural as the above interactions may sound, it doesn't behave that way by default. That's because modal or similar UI elements are only virtual boundaries. Tabbing works on DOM's natural order.

Thus, on opening the modal, the modal elements won't even receive the focus (if modal is not positioned absolutely to the element that triggered it), let alone the focus looping inside.

The utility to solve this problem

I will stop wasting words and present the code that solves the problems for us:

tl;dr

Here's the JS snippet that does the main task of trapping the tabbed navigation. This snippet can be found from line 47 to 62 in the gist that follows the snippet.

function keyboardHandler(e) {
  if (e.keyCode === 9) {
    //Rotate Focus
    if (e.shiftKey && document.activeElement === firstFocusableEl) {
      e.preventDefault();
      lastFocusableEl.focus();
    } else if (!e.shiftKey && document.activeElement === lastFocusableEl) {
      e.preventDefault();
      firstFocusableEl.focus();
    }
  }
};
el.addEventListener('keydown', keyboardHandler);

In the code above, firstFocusableEl & lastFocusableEl are (as the names suggest) the first and the last focusable elements within the container element.

For a detailed and production ready code, please take a look at the following gist.

Does it work on mobile screen-readers?

Well, No!

If you have worked on web accessibility on mobile devices (Android or iOS), you would know that on turning on the screen-reader (Talkback and Voiceover) you get swipe and double tap actions.

If you are thinking that we can modify our logic to also listen to this swipe gesture, then you should know that it won't work as the swipe gesture doesn't trigger any event that we can catch in a web-page.

How do we fix it then?

There's a clever solution for that. Hide all the elements except the container element (passed to loopFocus()) from the screen-reader. That can be done by adding aria-hidden=true attribute to all elements except the container element.

This will turn out to be an inefficient implementation if there are a lot of elements to be hidden. For that, you should know one thing about screen-readers and aria-hidden that when a container is marked hidden, all its children are inaccessible to the screen-reader. Use this information and try to have a structure such that the higher level elements in the hierarchy are marked hidden. Remember, the idea is to reduce the number of DOM manipulations.

Last words

Focus looping is an important part of A11Y support. Even when you are not planning on making your page fully accessible but only want it to be keyboard operable.

If you have any question on A11Y or want to discuss a problem, do post your comment and we shall take the discussion forward. Let's together make the web inclusive and usable for everyone.