Key Advantages:
✅ Simple implementation – no need to manage multiple servers.
✅ Ideal for applications with a centralized architecture.

2️⃣ Horizontal Scaling (Scale Out)
Horizontal scaling involves adding more servers to your system, distributing the load across multiple machines.

Think of it like this: Instead of upgrading one machine, you’re adding more team members to share the work.

Key Advantages:
✅ Greater scalability – add as many servers as needed.
✅ Redundancy – if one server fails, others keep things running.

Vertical scaling is ideal for low-traffic scenarios due to its simplicity, but it has significant limitations:

• Hard Limits: You can’t add unlimited CPU or memory to a single server.

• No Redundancy: If the server fails, the app or website goes offline entirely.

For large-scale applications, horizontal scaling is often a better choice. It distributes the load across multiple servers and ensures redundancy.

In traditional setups, users connect directly to a single server. If the server goes offline or reaches its load limit, users experience delays or lose access. To address this, a load balancer can distribute traffic efficiently, improving reliability and performance.

Shallow copy

Shallow copy is a bit-wise copy of an object. A new object is created that has an exact copy of the values in the original object. If any of the fields of the object are references to other objects, just the reference addresses are copied i.e., only the memory address is copied.

Deep copy

A deep copy copies all fields, and makes copies of dynamically allocated memory pointed to by the fields. A deep copy occurs when an object is copied along with the objects to which it refers.

Lets take an example

Shallow Copy: It makes a copy of the reference to X into Y. Think about it as a copy of X’s Address. So, the addresses of X and Y will be the same i.e. they will be pointing to the same memory location.

Deep copy: It makes a copy of all the members of X, allocates different memory location for Y and then assigns the copied members to Y to achieve deep copy. In this way, if X vanishes Y is still valid in the memory.

The correct term to use would be cloning, where you know that they both are totally the same, but yet different (i.e. stored as two different locations in the memory space).

Consider this example:

var employeeDetailsOriginal = { name: 'Manjula', age: 25, Profession: 'Software Engineer' };

Let’s say you want to create a duplicate of this, so that even if you change the original values, you can always return to the original.

I can do this:

var employeeDetailsDuplicate = employeeDetailsOriginal; //Shallow copy!

If we change a value:

employeeDetailsDuplicate.name = 'NameChanged';

This statement will also change name from employeeDetailsOriginal, since we have a shallow copy, or a reference to var employeeDetailsOriginal. This means, you’re losing the original data as well.

But, creating a brand new variable by using the properties from the original employeeDetailsOriginal variable, you can create a deep copy.

var employeeDetailsDuplicate = { name: employeeDetailsOriginal.name, age: employeeDetailsOriginal.age, Profession: employeeDetailsOriginal.Profession}; //Deep copy!

Now if you change employeeDetailsDuplicate.name, it will only affect employeeDetailsDuplicate and not employeeDetailsOriginal

Diagramatic example

So How to copy JavaScript object to new variable NOT by reference?

Your only option is to somehow clone the object. For simple JSON objects, the simplest way would be:

        var objectIsNew = JSON.parse(JSON.stringify(objectIsOld));
        //if you use jQuery, you can use:

        In Jquery you can use:

        // Shallow copy
        var objectIsNew = jQuery.extend({}, objectIsOld);

        // Deep copy
        var objectIsNew = jQuery.extend(true, {}, objectIsOld);

Pure javascript method to deep clone object

    function keepCloning(objectpassed) {
      if (objectpassed === null || typeof objectpassed !== 'object') {
         return objectpassed;
      }

    // give temporary-storage the original obj's constructor
    var temporary-storage = objectpassed.constructor(); 
      for (var key in objectpassed) {
        temporary-storage[key] = keepCloning(objectpassed[key]);
      }

      return temporary-storage;
    }

    var employeeDetailsOriginal = {  name: 'Manjula', age: 25, Profession: 'Software Engineer' };

    var employeeDetailsDuplicate = (keepCloning(employeeDetailsOriginal));
    employeeDetailsOriginal.name = "NameChanged";

    console.log(employeeDetailsOriginal);
    console.log(employeeDetailsDuplicate);

Before we dive into what web accessibility is, we should first understand what the word ‘Accessibility’ entails.From my knowledge, “Accessibility means the ability of everyone regardless of their condition to have access to something (e.g internet, transport system).” It's not a switch that can be turned on and off. We need to write semantic HTML right from the start.

1. Add Alt Text to All Images

Adding alternative text for images is the first principle of web accessibility.This text acts as a replacement for the image if it fails to load. Adding alternative text to the image helps the users who use screen readers. The screen readers will read the alt text and provide the information to the non sighted users.

Alt text should answer this question: What is the content conveyed by the image?

Note: If the image is purely decorative or if it creates redundancy because the surrounding context already explains the content. Then adding an empty attribute will make screen readers skip it. If you don’t write any alt text, some screen readers will read the file name to the individual. That’s the worst experience you can provide.

2. Forms should be accessible

Although building forms can be a difficult task at times, making them moderately accessible isn’t as complicated as you might think. Filling forms on websites and apps for people with disabilities and even for people without disabilities should always be with ease.

• The first rule to create a truly accessible form is to use native HTML form controls.

<input type="text">

<input type="radio">

<input type="checkbox">

<button>Submit</button>

Since we use the native HTML controls, the name, role, and state of the elements are exposed by default to all assistive technologies. But if you using div's to build custom elements, make sure you do not forget to add ARIA attributes like aria-label, aria-checked, role= “radio” etc.

• Make sure to use Explicit label wherever possible. 👇

<label for="fname">First Name:</label> 
<input type="text" name="fname" id="fname"><br>
<label for="lname">Last Name:</label> 
<input type="text" name="lname" id="lname">

If explicit label is not being used make sure to provide every form control a label using aria-label, aria-labelledby.

For more information read visible label

3. Ensure all interactive features are keyboard-accessible

The most important goal of keyboard accessibility is to make every interactive element, such as links and form controls, available with the Tab key. This is how keyboard-only users navigate through a web page. Testing your website for keyboard accessibility is actually pretty easy: just press the Tab key and navigate from the top of the page to the bottom, highlighting active elements as you go.

People who are blind need full keyboard access. Period. — David Macdonald, co-editor of Using WAI ARIA in HTML5

Common Keys Used in Keyboard Operation of Web Pages and Web-based Applications

Tab – move to the next link, form element or button. Shift+Tab – move to the previous link, form element, or button. Enter – activate the current link or button. Space – check or uncheck a checkbox form element. Will also activate a button that currently has focus. Up/Down arrow keys – move between radio buttons or, in some cases, menu links. Right/Left arrow keys – in some cases, move between menu links or adjust sliders in audio and video plugins. Escape – Close the current modal dialog or dropdown menu and return focus to the element that spawned it.

If you are interested in reading tips on how to improve your keyboard navigation. Read here

4. Design usable focus states

Have you noticed the blue outlines that sometimes show up around links, inputs, and buttons? These outlines are called focus indicators.

Browsers, by default, use a CSS pseudo class to show these outlines on elements when they’re selected. Your designers might find these default focus indicators not very pretty and be tempted just to hide or remove them. However, if you get rid of this default style, be sure to replace it with something else.

Focus indicators help people know which element has the keyboard focus and help them understand where they are when navigating your site.

5. Use correct markup on your content

When writing semantic markup, we use HTML tags to tell browsers something about the contents of the element. In semantic markup, tags are no longer just a way to get content to show up on a web page in a human-readable format.

The tags themselves become a way to tell a machine (whether a browser, a computer, a smartphone, or another smart device) something about the meaning of the content.

Headings mark where the content starts — they’re tags given to text to define its style and purpose. Headings also establish the hierarchy of the content of the page.

Titles with big font sizes help a reader understand the order of the content better. Likewise, screen readers also use heading tags to read content. This way, people with low-vision get an overview of the page by reading each heading in a hierarchal flow.

It’s important to use proper structural elements when you develop a site. HTML elements communicate to the browser what kind of content they contain and how the browser should render or treat that content. The components and structure of a page are what arranges an accessibility tree. This tree is what powers screen readers which are used by people who are blind so they can “listen” to a page.

*Not using markup correctly affects accessibility. Don’t use HTML tags for a style effect only. Screen readers navigate web pages by heading structure (true headers, not just text that is styled big and bold) hierarchically. The people that use your site can listen to a list of all of the headings, jump the content by types of titles, or navigate directly to top-level headings

6. Do not use disabled attributes on buttons

If you use disabled attributes on button it removes it from the accessibility tree and therefore the screen readers will never know if the exists on the page.

To solve the above problem make sure you style the button visually to make it look disabled and can use pointer-events: none to prevent the clicking on button.

But how do I make sure when the screen readers users use the web page they should understand that the button is disabled.

The solution to your problem 🤘 is using aria-disabled attribute

<button id="target" aria-disabled="true">target</button>

7. Use display: none CSS property or hidden attribute carefully.

Often there might be a situation that you might want to hide something on some click of the button or link. In this case do remember if you use display: none or hidden, it will also be removed from the accessibility tree. Setting display: none hides the content but also removes it from the accessibility tree so screen readers won’t read it.

There might be situation when you might want to display something only for the screen reader users and want the content to be visually hidden. How will you handle this ?

There's great solution 👇 to hide content visually while keeping it in the accessibility tree for screen readers:

.sr-only {
  border: 0; 
  clip: rect(0 0 0 0); 
  height: 1px; 
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}

Hiding Content for Screen Readers

Some content is not important for understanding a web page, but is added to make the design more visually appealing. For example, icons and glyphs can provide a nice visual polish, but tend to be unhelpful — and sometimes downright distracting — for screen reader users. In this scenario we’ll want to hide the content from screen readers while showing it to everyone else.

In this case we’ll use the aria-hidden attribute. aria-hidden is a boolean attribute so it can be set to true or false. Setting the attribute to false is the same as not including it at all, so you’ll generally want to set it to true and use it like this:

<div class="my-glyph" aria-hidden="true"></div>

8. Visual Order & Dom Order should always match

Implementing a logical tab order is an important part of providing your users with a smooth keyboard navigation experience. Screen readers and other assistive technologies navigate the page in DOM order. The flow of information should make sense.

Lets see an example

<ol>
  <li>Basket Ball</li>
  <li>Foot Ball</li>
  <li>Throw Ball</li>
</ol>

That HTML ends up in the DOM that way (and thus how it is is exposed to assistive technology), and by default, those list items are also visually shown in that order. In most layout situations, the visual order will match that DOM order. Do nothing, and the list items will flow in the block direction of the document. Apply flexbox, and it will flow in the inline direction of the document.

But flexbox and grid also allow you to muck it up. Now take this:

ol { 
  display: flex;
  flex-direction: row-reverse;
}

In the above case, the DOM order still makes sense, but the visual order is all wrong.When you use the tab key to move through the content, there is a disconnect between the visual order and the keyboard navigation (DOM) order. In this simple example it is still although it wrong, but in a situation where flex-box is used to layout a complex interface it could make things horrible & unusable for the users using assistive technologies.

Solution is providing tabindexto the element so the visual and dom order matches

But the problem is that tabindex is scoped to the document. If the above code were included in a page, it would completely hijack the tab order. The three items with tabindex would be the first three things on the page to receive keyboard focus, irrespective of their overall location in the DOM structure.

To read more check out this awesome article

9. Use color with care.

The color contrast between background and foreground content (that is, usually text) should be great enough to ensure legibility.

There are several tools you can use to evaluate color contrast, which will assist you in making your page as visually usable as possible to individuals with low vision or varying levels of color blindness.

10. Make dynamic content accessible.

When web page content updates dynamically (i.e. without a page refresh), screen readers may not be aware of whats happening on the page. This includes screen overlays, in-page updates, popups, and modal dialogs.

Problems: Keyboard-only users may be trapped in page overlays. Magnification software users might be zoomed in on the wrong section of the page.

Solution

These functions can easily be made accessible. Options include ARIA roles and alerts.

Ensure that video players do not auto-play (non-consensual sound), and that the players can be used with a keyboard. Additionally, all videos must have options for closed captioning and transcripts for the hearing-impaired.

If your site contains a slideshow, make sure that each photo has alt text and can be navigated via the keyboard. If you are using any unique widgets (such as a calendar picker or drag-and-drops), be sure to test for accessibility.

This is one of the great article I found on internet which I recommend

Reading resources 📚

WebAIM Articles, resources, and training on web accessibility. Color Accessibility Workflows: Some neat examples to nail the colors in your design by Geri Coady.

Useful tools

WebAIM Color Contrast Checker: Great contrast color checker that gives you results in real time for regular and large text. Inclusive Components: A pattern library in the form of a blog, with a focus on inclusive design. Each post explores a common interface component and comes up with a better, more robust and accessible version of it. Color Oracle: A free color blindness simulator for Windows, Mac, and Linux. It shows you in real time what people with common color vision impairments see. Vox Product Accessibility Guidelines: A comprehensive checklist for designers, engineers, and project managers. AXE Google Chrome Extension: Test any site for accessibility violations using the Chrome inspector. Contrast: A macOS app for quick access to WCAG color contrast ratios.

Develop responsibly. Thank you.

class HashTable {
  constructor() {
    this.values = {};
    this.length =  0;
    this.size =  0;
  }
}

The constructor contains an object in which we’re going to store the values, the length of the values, and the entire size of the hash table: meaning how many buckets the hash table contains. Somewhere in these buckets, we can store our data.

Next, before we can do anything else, we need to implement our hashing function. One example of a hashing function:

calculateHash(key) {
  return key.toString().length % this.size;
}

Let’s say we have the string “Hello” and we create a hash table with the size of 10. “Hello” has the size of 5, so 5 % 10 becomes 5! The string “Hello” is now stored in the bucket with hash 5. If later on, we want to see where the key/value pair with the key “Hello” has been stored, it would return the same hash as the length of “Hello” hasn’t changed, and neither has the size of the hash table!

add(key, value) {
   const hash = this.calculateHash(key);
   if (!this.values.hasOwnProperty(hash)) {
      this.values[hash] = {};
   }
   if (!this.values[hash].hasOwnProperty(key)) {
      this.length++;
   }
   this.values[hash][key] = value;
}

To add a key/value pair, we first need to calculate the hash with the key provided. If this hash is brand new (meaning that no other key/value pair used it yet and it’s not in the values object), we initialize an empty object for that hash. Next, we check whether the hash has a property with the same key name! If that’s not the case, it means we will add a new key/value pair, and the length of the hash table grows. Lastly, we add the key/value pair to the right hash.

Searching in a hash table goes very fast. As with an array we have to go through all of the elements until we find it, with a hash table we simply get the index. This means that its runtime is constant, O(1).

search(key) {
  const hash = this.calculateHash(key);
  if (this.values.hasOwnProperty(hash) && this.values[hash].hasOwnProperty(key)) {
    return this.values[hash][key];
  } else {
    return null;
  }
} 
}

//create object of type hash table
const ht = new HashTable();
//add data to the hash table ht
ht.add("Canada", "300");
ht.add("Germany", "100");
ht.add("Italy", "50");

//search
console.log(ht.search("Italy"));

First, we calculate the hash again. As the length of the string and the size of the hash table haven’t changed, the hash remains the same. Then, we check whether the hash is within the object, and whether that hash points to the key we’re looking for. If that’s the case, return the value that that pair stores, else nothing gets returned.

As compared to linear, binary search is much faster with Time Complexity of O(logN) whereas linear search algorithm works in O(N) time complexity.

Binary Search Step-By-Step Process Breakdown:

In this step-by-step process, we’re going to be breaking down how to do a Binary Search on the below given array.”

 const binarySearchArray = [1, 5, 7, 11, 13, 17, 19, 23, 29, 31, 37, 41, 43, 47, 53, 59, 82, 100, 101]

Target to find: 59

• We are going to need to keep track of the 3 following things as variables to perform a Binary Search: startIndexPosition, middleIndexPosition, and endIndexPosition.

• startIndexPosition will always be 0: let stastartIndexPositionrtIndex = 0

• endIndexPosition can be calculated using array.length

• We want to get an inital middleIndexPosition using the startIndexPosition and endIndexPosition, and the divide by 2. We can use Math.floor() to round down or Math.ceil() to round up.

• We will use while loop in order to iterate the process

• If the middleIndexPosition value is less than the target value of 59, we know that our target value will be somewhere to the right of the middleIndexPosition. We can then assign our startIndexPosition variable as the current middleIndexPosition value, ignoring the left half of the array. We should also increment middleIndexPosition by the count of 1 if our target number “59” > middleIndexPosition “31.”

• If the middleIndexPosition value is greater than the target value, 59, we know that our target value will be in to the left of the middleIndexPosition. We can then assign our endIndex variable as the current middleIndex value, ignoring the right half of the array. We should also Decrement middleIndexPosition by the count of 1 if our target number “59” < middleIndexPosition “31.”

• If the middleIndexPosition value is equal to the target value of 59, we have found our target number “59.”, target is found :)

• Hurray we got it done

Binary Search Code:

const binarySearch = (array, target) => {
  // Define Start and End Index
  let startIndexPosition = 0;
  let endIndexPosition = array.length - 1;

  // While Start Index is less than or equal to End Index
  while(startIndexPosition <= endIndexPosition) {

    // Define Middle Index, this will keep changing 
    let middleIndexPosition = Math.floor((startIndexPosition + endIndexPosition) / 2);

    // Compare Middle Index with Target number
    if(target === array[middleIndexPosition]) {
      return console.log("Found the target" + middleIndexPosition);
    }

    // Search Right Side Of Array
    if(target > array[middleIndexPosition]) {
      console.log("Searching the right side of Array")
      // Assign Start Index and increase the Index by 1 to narrow search
      startIndexPosition = middleIndexPosition + 1;
    }

    // Search Left Side Of Array
    if(target < array[middleIndexPosition]) {
      // Assign End Index and increase the Index by 1 to narrow search
      console.log("Searching the left side of array")
      endIndexPosition = middleIndexPosition - 1;
    }
  }

  // If Target Is Not Found
  console.log("Not found sorry");
}

To look things up way more efficiently, you can use hash tables! Hash tables are made up of two parts: an object with the table where the data will be stored, and a hash function (or mapping function). This function creates a mapping by assigning the input data to a very specific index within the array! This function takes a key, and always returns the same index for the same key! If we would run the same key through the function twice, it gives us the same index.

{
   values: {
      0: { "Mara": "BN" },
      1: { "Sarah": "US" },
      3: { "Emil": "SE" },
      5: { "Lydia": "NL" },
   },
   length: 4,
   size: 6,
}

As the hash function always gives the same hash for every key, we can easily look up key/value pairs. Instead of having to map over an entire object, we just pass the key we want to the hash function, which then returns the index where this key/value pair is stored!

However, sometimes the hash function returns the same index for different keys. This is called collision.

Checkout out Hash Table Implememtation in Javascript

You apply it unknowingly for example if you are working with HTML, it actually has a tree data structure. It is quite a misconception that data structure and algorithm that we learn in our courses or in competitive coding are of no use in a software development job.

Actually, It just depends on how you want to solve your problem. If you want to get it done just for the sake of getting it done, then yes high-level tools are always there. But, If you are working on a specific tool that does the work for you, then you might not be aware of what is happening on the background, if you go deeper then you’ll find out that the tools also the same Data Structures and Algorithms to solve the problem which makes it look so easy to you. If you wish to join me along my learnings join me or reach out to me incase of any questions

• In short aria-current is an attribute defined in the WAI-ARIA specification. This specification extends native HTML, allowing you to change the way an HTML element is "translated" into the accessibility tree.

• It can take multiple values, for example: page, step, location, date, time, false, true

According to the ARIA 1.1 specification, the aria-current attribute can be given one of a predefined set of values:

• page - represents the current page within a set of pages.

• step - represents the current step within a process.

• location - represents the current location within an environment or context.

• date - represents the current date within a collection of dates.

• time - represents the current time within a set of times.

• true - represents the current item within a set.

• false - does not represent item within a set.

Ok, so the concept goes like this:

Using aria-current the right way.

• First we will go through aria-current = page

I am taking an example of my website. Below you see talks section is an active page the user is currently on.

<a aria-current="page" class="css-wbxg5e active" href="/talks" style="font-size: 1em;"><i>Talks</i></a>

The active sections talks indicates the current page in the main navigation. While visible to sighted users, it also uses aria-current="page" to convey the information to screen reader users.

• aria-current="date" and aria-current="time" are very similar to each other. This can be used when implementing date picker, when we display a list of dates, one being today's date, we should use the `aria-current="date" to mark the current date to screen reader users.

• aria-current="step" If we need to indicate the current step within a step indicator of a multi-step process (e.g.: wizard form, multi-step checkout, etc), aria-current="step" should be used to indicate the current step to screen reader users.

Some resources to checkout if you interested to learn more on aria-current a11ysupport.io, tink.uk

If you want to know more about ARIA attributes checkout MDN Docs

Thank you for reading. Subscribe to my newsletter for more of this ❤️

Have you ever encountered an error ?

So this usually happens when you try to load some third party libraries via cdn and the integrity value doesn't match.

~What does that mean~ ??

For example:

<script
  src="https://code.jquery.com/jquery-3.5.1.js"
  integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
  crossorigin="anonymous"></script>

<link rel="stylesheet" href="//something.net/6.26.0/styles/desktop.css">

~Lets understand it bit better~

The integrity and crossorigin attributes are used for Subresource Integrity (SRI) checking. This allows browsers to ensure that resources hosted on third-party servers have not been modified in anyway. Use of SRI is recommended as a best-practice, whenever libraries are being loaded from a third-party source. If the script or stylesheet doesn’t match its associated integrity value, the browser would refuse to execute the script or apply the stylesheet and would console and integrity error.

• The integrity attribute is a content verification. It confirms that the content being loaded is the same as what you intended .This also gives you an assurity that fetched resource has been delivered without unexpected manipulation(which could otherwise happen by an attacker)

• The fact that it is blocking the load would indicate that it does not match. Did you perhaps change the version but kept the same integrity value? If yes please fix that

What could be the problem if you don't fix it ?

If your script has no integrity attribute, and is third party library, there might be a point that attacker might attack the third party page and change its javascript and css, inorder to obtain some valuable information.

Here's a nice article for more details

If you want to read more about Subresource Integrity and its importance

Recently Working on my side project, I came across and curious fact of target='_blank' attribute used in </a>

What actually happens while you open a link in new window by specifying target='_blank' ?

• The page we're linking to gains limited access to the linking page via the window.opener object.

• The newly opened page can now change the window.opener.location to some phishing page. In this case, Users trust the page that is already opened, and in this case they won't get suspicious.

Lets try and undertsand it in depth 🔒

Create a fake "phishing" page with adorable cat pictures, which everyone likes ❤️, get it shared on Facebook (which will open a link via _blank).

Create a "phishing" website at https://phishingwebsite/facebook.com/service.html and put the below code on your "phishing" page.

window.opener.location = 'https://phishingwebsite/facebook.com/service.html';

which will redirect the Facebook tab to your phishing page created by the attacker, asking the user to re-enter their Facebook password, the user is not on Facebook anymore but this fake Facebook-lookalike web page. This fake page looks exactly like Facebook and it asks to login because you were signed out for some reason. The user without even thinking, enters the details.

What just happend??

You've just sent your private credentials to someone who can now login in your Facebook account and do anything, like quickly changing the credentials, posting random post.

Lets see how we can fix this 🔑

Add rel attribute with noopener value to the <a>

<a href= '/share' rel="noopener" target="_blank"/>

Some old browsers for example (IE11) do not support "noopener" so add noreferrer as a value to rel

<a href= '/share' rel="noopener noreferrer" target="_blank"/>

Browsers support to rel=noopener

To conclude my post, rel="noopener noreferrer" should be added to links containing target="_blank" as a precaution against reverse tabnabbing.This ensures window.opener is null in both Chrome and Firefox. In Safari Technology Preview 68, target="_blank" on anchors implies rel="noopener" by default.

Thank you for reading my thoughts on this issue. Subscribe to my newsletter for more of this.

Also feel free to mention the amazing one's which you find interesting in the comments ♥️

Debugging the Debugger by Princiya Sequeira | React Rally 2019

This talk is the inception of debugging the Firefox devtools’ debugger which is built using React and Redux. All of us love to ‘console’ log our code, but there are other effective techniques that will help accelerate the debug loop cycle.

In this talk, Princiya will present the various available browser devtools debugging techniques using practical examples from the community to debug the development of the debugger project!

[Exploring the hidden potential of sound data by Charlie Gerard | dotJS] (https://www.dotconferences.com/2019/12/charlie-gerard-exploring-the-hidden-potential-of-sound-data)

Even though we don’t really think about it, sound is a very rich source of information. Leveraging the properties of sound with machine learning, we can gain insights about an environment or an activity performed. Acoustic activity recognition has the potential to create new interactions and better smart systems, and in this talk, Charlie explores how to experiment with this technology in JavaScript, using the Web audio API and Tensorflow.js.

The Future of Web Animation - Sarah Drasner | JSHeroes 2019

In this talk, you'll start learning some bleeding edge techniques such as native-like page transitions with client side rendering, but then we'll push it further. The intersection of health and animation with biofeedback sensors, the future of 3d in the browser complete with interviews with people who are writing these specs .This talk will show that in terms of animation on the web, we're just getting started.

Tink: A Next-Generation Package Manager by Kat Marchán | JSConf EU

With nearly 1,000,000 packages, the npm ecosystem is the largest out there, by far – but the ecosystem and its package manager were created in more humble times, for small projects and packages centered around the Node.js ecosystem itself. It’s about time we redefined package management for modern web development, and that redefinition is tink: a package unwinder for JavaScript brought to you by npm itself. With tink, you’ll find unprecedented speeds, deep compatibility with everything from Node.js to bundlers, and a UX workflow optimized for the modern web developer.

Building The New Facebook With React and Relay by Ashley Watkins | React Conf

Ashley discusses some of the technologies and strategies powering FB5, the new facebook.com. Topics covered include Facebook's approach to CSS-in-JS, data-driven dependencies, phased code downloading, and more.

API Modernization: Building Bridges As You Cross Them by Shelley Vohr | JSConf Budapest 2019

In this talk you will learn updates ranging from asynchronous JS to idiomatic getters and setters, as well as allowing developers to access new platform-dependent functionalities. Our APIs can and often are implemented across two or more languages on their way to the end user, and so we'll walk through some examples of how to effectively gather context and write reusable code to make updating simpler.

Work Less and Do More: Google Sheets for Node.js Developers - Franziska Hinkelmann and Anu Srivastav

In this talk you will see how you can string together your emails, docs, charts, all of it—into one gorgeous report, ready to email off. You can combine all your data— from GitHub metrics, monitoring data, to surveys — with this wide-ranging platform that involves “human” tools, such as a Calendar and Contacts. Thanks to a helpful client library, Node.js is the glue that you can use to code up all the business work, so that you can get back to the business of coding.

The Front-End Stands Alone by Keerthana Krishnan | JS Kongress 2019

With the advent of serverless architecture, front-end developers can now easily build and deploy their applications without a lot of overheads. This session aims to look at how to build a basic web application with serverless architecture and why it’s becoming more popular.

Accessibility in the Age of Components by Ayesha Mazumdar | React Boston 2019

We often build component libraries to improve consistency, collaboration, and customization for a given product. But what if a component library could also scale accessibility across the entire organization? Building accessible components can help distribute responsibility across all of design and engineering, without needing everyone to be an expert on the nitty-gritty details. In this session, we'll go through specific component examples and use cases to help you and your team contribute to a better, more inclusive web.

A Journey to the Center of a Slow React App by Pavithra Kodmad | React India 2019

What are the major factors that slow down a web application written in React? Can we mitigate them? If so, what are the tradeoffs. Pavitra will be speaking about perf improvements we made in our large application. From state management to measuring correctly to dealing with legacy frontend, this talk will cover a variety of reasons why things got slow. And how to deal with it.

Thank you for Reading!! Happy New Year

I’ve been organising events in my spare time for over 2 years now. I am organizer of Mumbai Women Coders with few other talented organizers (Dipti Gandhi, Arwa Lokhandwala) . Later got connected to few other community in Mumbai. At first, I didn’t understand why I would want to make my events appeal to more people, I already had a steady stream of attendees. As time went on inclusivity climbed higher and higher up my list of priorities as I realised its importance. You will always find people opposing you against you even when things are in place. Learn to face them because tons of people in the community still appreciate you and value your work.

Lessons learned

The world is full of lots of different people in the community and it would be a shame if they don’t attend your event or interact with your community for reasons you can easily fix. If the leaders can’t fix it. Its simple just walk and move on.

Be vocal when things go wrong around you. No matter what, your talent and work will always speak for yourself. Be humble & calm.

You’ve probably heard of high-tech cities such as Bangalore, Hyderabad, and Pune. In those cities the tech industry is super innovative. Everywhere you look new startups are growing and expanding, right along with the tech meet ups and conferences that are part of the business. Communities are doing great in all of these cities. Trying to do the same in the financial capital city like Mumbai, it was not an easy one(Ups and Downs). But Remember “With great power comes the great responsibility”. Community is more of making it play ground with positive vibes around you, helping each other & communities around and driving the force in each one of us. Its more like getting more and more people involved and let them take up responsibility.

But if you cannot see that happening raise your voice, If that still bothers you. Let it go. Let the power take over your work & knowledge. Mind you power will not sustain for longer time, but our knowledge and good work in the community will always sustain. People will always remember it. Spread the word and utilise your learnings & knowledge else where. But make sure you are vocal about the wrong ones.

Last thought

Be an individual who is vocal when things go wrong. Sail the boat even when you alone because you know you are right and will reach at the right place sooner or later with amazing people around you. Let the bad ones play politics as usual. Just stay calm and move on. The only difference they drive the community with their power, we drive it with our work & contributions.

Remember

Trees only with the strong roots laughs in the storm :)