Many of us have come across the term called Shadow DOM either in some tutorials, docs or in the latest JS frameworks. Let's demystify this today…

What shadow dom really is?

Shadow DOM refers to the ability of the browser to include a subtree of DOM elements into the rendering of a document, but not into the main document DOM tree. In very simple terms, “It is DOM within a DOM”

Shadow DOM is a new DOM feature that helps you build components. You can think of shadow DOM as a scoped subtree inside your element.

Creating shadow DOM?

Normally, you create DOM nodes and append them as children of another element. With shadow DOM, you create a scoped DOM tree that’s attached to the element, but separate from its actual children. This scoped subtree is called a shadow tree. The element it’s attached to is its shadow host. Anything you add in the shadows becomes local to the hosting element, including <style>. This is how shadow DOM achieves CSS style scoping.

Enough theory, lets code a shadow dom

=============================

We start by creating Shadow Root (A shadow root is a document fragment that gets attached to a “host” element )

const div = document.createElement('div');
const shadowRoot = div.attachShadow({mode: 'open'});
shadowRoot.innerHTML = '<h1>This is a shadow DOM</h1>';

The value of mode key of attachShadow can be either “open” or “colsed”.

It is basically a string specifying the encapsulation mode for the shadow DOM tree.

Eg. If mode: “closed” , element.shadowRoot return null else it will return ShadowRoot obj.

Use of a Shadow DOM

As stated earlier it helps in abstracting the shadow tree from the actual tree.

Let's see how…

We have an HTML file with a div #divInDom and a ‘p’ tag

Now we attach a shadow room to the div #divInDom

We have added a p tag to the shadow DOM which now looks like:

The output:

Now let’s try to see the Shadow DOM in action ✨

We add a style for ‘p’ tag, if you remember from above we have 2 ‘p’ tags now — one as part of the DOM and one as part of the Shadow DOM.

Let’s see what happens in the output:

As you saw the styling did not affect the Shadow DOM element.

The reverse is also true, the styles defined within a shadow DOM do not affect the root DOM.

Conclusion

For the first time ever, we have an API primitive that does proper CSS scoping, DOM scoping, and has true composition. Combined with other web component APIs like custom elements, shadow DOM provides a way to author truly encapsulated components without hacks or using older baggage like <iframe>s.

Don’t get me wrong. Shadow DOM is certainly a complex beast! But it’s a beast worth learning. Spend some time with it. Learn it and ask questions!

Demystify Shadow DOM and how to use it? was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

Consider below scenario —

You are building a realtime news feed that updates data whenever there is any change or addition without refreshing the whole page.

Main Implementation Idea

The main technology used for this purpose is Websocket. They allow a long-held single TCP socket connection to be established between the client and server which allows for bi-directional, full-duplex, messages to be instantly distributed with little overhead resulting in a very low latency connection.

Enough Theory! Let's implement it

• We are mainly using ApolloServer version 2.9 that is the latest while writing this blog.
• As there are many breaking changes from ApolloServer version 1.* to version 2.*, this implementation may not work in older Apollo version ( < 2.*)

Let's add important package first

Now we will add a simple type definition

Let’s add the resolver now

Here comes the final piece of code that starts the server with WebSocket based subscription

This configuration creates a GraphQL server with Mutation, Query and Subscription. It also creates a WebSocket connection automatically that typically opens a connection on this address ws://localhost:4000/graphql

Full Code Here

PubSub Implementations

The Apollo Server implementation of PubSub can be replaced by another implementations of PubSubEngine interface. The community has created the following integrations:

• Redis
• Google PubSub
• MQTT enabled broker
• RabbitMQ
• Kafka
• Postgres
• Google Cloud Firestore
• Add your implementation…

You can implement a PubSub of your own, using the exported PubSubEngine interface from apollo-server or another integration.

Check below link for more details

Subscriptions in Apollo Server

Happy Coding!

Realtime Updates With GraphQL Subscriptions ( SERVER SIDE )(V2.8) was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

Recently passed the AWS Certified Developer — Associate exam (June 2018 version) on March 8th, 2019 with 891 marks.

No Doubt AWS CDA (June 2018) is one of the most valuable cloud certifications for developers. But wait! It’s not so easy at all to pass it without proper preparation. It’s full of tricky, scenario based questions.

From the June 2018 version, they made the certification exam in a way that whoever passes the exam, has sound knowledge on AWS Services and Best Practices.

It validates an examinee’s ability to:

• Demonstrate an understanding of core AWS services, uses, and basic AWS architecture best practices.
• Demonstrate proficiency in developing, deploying, and debugging cloud-based applications using AWS.

Earlier, people used to get a lot of marks in the AWS CDA exam. But it’s not happening now because AWS Exam paper setters restricted the certification to those who really understand AWS and its components properly.

Being certified recently with good marks, I will love to share my experience and tips that might help you to pass the exam in a single attempt.

— — — — — — — — — — — — — — — —

Preparing for the exam

I started studying for the certification from acloud.guru website. It gave me important understandings on exam topics as well as practical labs on many important AWS Service. But then I realized, tutorial given by acloud.guru was not enough to pass the exam as they are full of tricky questions.

I started searching a good exam preparation course on Udemy and found one made by Stephane. It helped me clarify my concept with respect to the new exam version.

But prior to that, I have used AWS for more than 1.5 years, so I must say developing live projects with AWS services helped me a lot.

So, it will be always my first recommendation to use AWS as much as you can with its security best practices kept in mind.

I have also given many practice tests, tried flashcards and quiz.

Important topics of the exam

• Study and practice S3, DynamoDB, SQS, KMS, Beanstalk, lambda a lot
• Understand SQS with visibility timeouts, message delivery, errors and security
• SQS limits and long polling
• Practice CloudFormation
• Remember CodeDeploy and CodeBuild hooks
• Concepts of ALB, NLB, and ASG with EC2 and Beanstalk
• Optimizing DynamoDB and S3 queries for performance
• Dynamo partition keys, local/global secondary indexes
• Understand Beanstalk and it’s best practices
• S3 CORS and encryption
• S3 limits and important APIs
• Use of Kinesis Stream and Kinesis Firehose
• Kinesis shards and how to optimize them.
• IAM users, groups, roles, and inline policies
• Different methods of restricting access to resources (policies, ACLs)
• HTTP error codes (4xx, 5xx)
• Web identity federation, User Pool, Identity Pool, and STS
• Encryption mechanism (SSE, KMS, Client Side Encryptions, In Flight Encryption)
• EBS basics
• Understand the concept of SAM (Serverless Application Model)

You might skip (If you do not have enough time)

• EC2 instance types
• Questions on every single AWS service (focus on the main ones)
• EC2 options (Reserved, On-Demand, Spot, Dedicated-Host)
• OLTP (Online Transaction Processing) vs OLAP (Online Analytic Processing)
• Questions about shared responsibility
• Complex questions on setting up Route53
• Complex questions on Network Load Balancers
• CloudFormation template ()configuration in advance (Just study important keys like Resources, parameters, Intrinsic Functions etc.)
• S3 storage tiers (Glacier, Infrequently Accessed, RRS) and Snowball
• S3 storage gateways
• EBS storage types
• In-depth RDS Questions

What you must know about

In addition to the above tips, you should also practice provision EC2+EBS instances of your own with various options and security best practices, Security Groups and how they control connection and network flow in a VPC.

Deploy your own configuration with Beanstalk and provision EC2 instance and Docker Container with the help of ECR and ECS and also remember what are the resources that Beanstalk can provision.

Remember how to calculate read and write throughput (RCU, WCU) for DynamoDB.

Practice encryption with API gateway, Lambda, S3, Beanstalk, DynamoDB, EBS, SQS with the help of KMS, SSL/HTTPS

Remember important API calls of S3, SQS, Beanstalk, STS, KMS, ECS

Wrapping up tips

— — — — — — — — — — — -

1. Take good rest at night before the exam
2. Don’t be nervous even if you see tricky questions
3. Prepare notes to refer before the exam
4. Read AWS FAQ and White Papers
5. Give practice tests
6. There are no negative marking, so answer all
7. Start by eliminating wrong answers
8. If you see questions with more than one correct answer, think of best practice and cost efficiency
9. If you have practiced well and invested time, be confident as its not hard at all to pass if you know basic concepts

Take a look at AWS certification website

AWS Certified Developer - Associate Certification

And all the best for your exam :)

How To Pass The AWS Certified Developer Associate Exam was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

However javascript gives as many powerful object oriented programming patterns, prototype inheritance is one of them.

What is PROTOTYPE in JS ?

Almost all objects in JavaScript have the prototype property. By using it and more specifically the prototype chain we can mimic inheritance.

The prototype is a reference to another object and it is used whenever JS can’t find the property you’re looking for on the current object.

Prototypal Inheritance

Suppose we have an object called users with all its properties and methods and there are student and teacher that is slightly different from it, not copy/reimplement its methods, just build a new object on top of it.

Prototypal inheritance is a language feature that helps in that.

[[Prototype]]

In JavaScript, objects have a special hidden property [[Prototype]] (as named in the specification), that is either null or references another object. That object is called “a prototype”.

When we want to read a property from object, and it’s missing, JavaScript automatically takes it from the prototype.In programming, such thing is called “prototypal inheritance”. Many cool language features and programming techniques are based on it.

The property [[Prototype]] is internal and hidden, but there are many ways to set it.

One of them is to use __proto__, like this:

let users = {
  alive: true
};
let teachers = {
  class_admin: true
};

teachers.__proto__ = users;

Please note that __proto__ is not the same as [[Prototype]]. That’s a getter/setter for it. We’ll talk about other ways of setting it later, but for now __proto__ will do just fine.

If we look for a property in teachers, and it’s missing, JavaScript automatically takes it from users.

et users = {
   alive: true
};
let teachers = {
  class_admin: true
};

teachers.__proto__ = users;

// we can find both properties in teachers now:
alert( teachers.alive ); // true
alert( teachers.class_admin ); // true

The value of “this”

That is actually a super-important thing, because we may have a big object with many methods and inherit from it. Then we can run its methods on inherited objects and they will modify the state of these objects, not the big one.

For instance, here animal represents a “method storage”, and rabbit makes use of it.

Summary

• In JavaScript, all objects have a hidden [[Prototype]] property that’s either another object or null.
• We can use obj.__proto__ to access it (there are other ways too, to be covered soon).
• The object referenced by [[Prototype]] is called a “prototype”.
• If we want to read a property of obj or call a method, and it doesn’t exist, then JavaScript tries to find it in the prototype. Write/delete operations work directly on the object, they don’t use the prototype (unless the property is actually a setter).
• If we call obj.method(), and the method is taken from the prototype, this still references obj. So methods always work with the current object even if they are inherited.

Prototypal inheritance in Javascript was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

We often use images in our website. Typically in e-commerce websites use list of images with long scroll. In most of the cases these images come with heavy weight and size that ends up slowing down DOM load speed.

This is an example of uneven image loading that can lead to bad user experience.

In this type of scenario we load all the images in the page at a time and this leads to bad site performance.

Fortunately, lazy loading is a solution that lowers initial page payload and load time, but doesn’t skimp on content.

What is lazy loading?

Lazy loading is technique that defers loading of non-critical resources at page load time. Instead, these non-critical resources are loaded at the moment of need. Where images are concerned, “non-critical” is often synonymous with “off-screen”.

An example of lazy image loading can be found on the popular publishing platform Medium, which loads lightweight placeholder images at page load, and replaces them with lazily-loaded images as they’re scrolled into the viewport.

Ways of Lazy loading images with Plain JS

There are two vanilla js ways to implement lazy load images

1. Intersection Observer
2. Using Event Handlers ( most compatible way )

We will talk about the second method because this is most compatible way and can be used in all browsers.

Lazy Loading Images with event handler in Vue Component

In this mechanism we check if the image component is in viewport on every scroll. We use a method called getBoundingClientRect to check the above use case.

Add an image tag in your component with class name eg. class=”lazy”.

<img src="/images/place-holder.png" class="lazy" data-src="real-image.png"/>

The src property initially holds a placeholder image that is very small in size. The data-src property holds the actual image. On page load the placeholder image is loaded not the image that is defined in data-src.

Now we will check if our image component reaches the viewport or not. For this we will use window scroll event listener. Scroll event listener should be initialised on dom load that in our mounted method.

See below code…

mounted() {
  window.scrollTo(0, 0);
  window.addEventListener("scroll", this.lazyLoad);
},

Now lets write the main logic

methods: {
  lazyLoad: function () {
    let lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));
    let active = false;
    if (active === false) {
      active = true;
      setTimeout(() => {
        lazyImages.forEach(function (lazyImage) {
          if ((lazyImage.getBoundingClientRect().top <= window.innerHeight && lazyImage.getBoundingClientRect().bottom >= 0) && getComputedStyle(lazyImage).display !== "none") {
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImages = lazyImages.filter(function (image) {
              return image !== lazyImage;
            });

            if (lazyImages.length === 0) {
              window.removeEventListener("scroll", this.lazyLoad);
            }
          }
        });
        active = false;
      }, 200)

    }
  },
}

This code uses getBoundingClientRect in a scroll event handler to check if any of img.lazyelements are in the viewport. A setTimeout call is used to delay processing, and an active variable contains the processing state which is used to throttle function calls. As images are lazy loaded, they're removed from the elements array. When the elements array reaches a length of 0, the scroll event handler code is removed.

That is pretty much it. You can even use intersectionObserver to get same result but make sure your browser supports it.

Image Lazy Loading was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

To avoid these complications we can use Auth0, an AAS or Authentication as Service provider and make our life easier while logging in or registering the user.

We will create a simple boilerplate step by step using React+NextJS and implement an authentication mechanism using Auth0. So lets start…

Let’s start by Logging in / Registering to Auth0 by clicking here.

Now while you are in dashboard page, click on New Application on top right corner.

• Give a name to your app (MyTestApp)
• Choose application type as Single Page Web App
• Click CREATE Button

Great! Your Auth0 App is created

Now lets configure auth0 dashboard for our App

1. Give a name to your app eg. MyTestApp
2. Application Type : Single Page Application
3. Allowed Callback Url : http://localhost:3000/auth/callback
4. Allowed Web Origins : http://localhost:3000
5. Copy the client id
6. Save Changes

Now lets write the code with React+Next

Lets start with installing create-next-app in terminal

npm install -g create-next-app

create-next-app MyTestApp

cd MyTestApp/

npm run dev

This will start a node server on port 3000 by default. You can click here to see your project running.

The folder structure created by next itself. You can see details here. The code for this section will be available in github.

We need to change the component nav.js little bit. Here the code…

The above file should be created by nextJS cli. If not, you can clone my repo.

Update the existing code and add a button where user will click and login. Button should have an event handler for clicks, we will add an onClick event handler and trigger a function called handleLogin.

<a onClick={()=>this.handleLogin()}>Login / Register</a>

I have used an es6 method so that it binds ‘this’ with the function.

Now lets create auth function in side folder called ‘lib’

Lets first download the authjs code as our dependency

npm install — save auth0-js

We also need jwt-decode to decode the jwt token sent by auth0 service

npm install — save jwt-decode

Lets create a file inside /lib/Auth.js that will contain all our business logic. Below is the code…

After success login “handleAuthentication()” will be called where token will be parsed from url hash and save it in localstorage.

Now we need to set the credentials that we got Auth0 Dashboard.

This file location should be /lib/auth0-variables.js

All these values will be available in Auth0 application section>Settings

Now we will create the callback page. This is a page where users are redirected once they are successfully signed in. Check the code below…

The above should be inside /pages/auth/callback.js. If you change the location, you might need to change redirection url under auth0 dashboard.

In callback.js we call handleAuthentication() function which is inside /lib/Auth.js, which will extract auth token, auth state and accessToken from url hash and verify them. If verified, we will store user_details ( Decoded from token ) and isLoggedIn = true in localStorage.

Finally we will create a page called secure_page.js, which will be a secure page where user can enter only when logged in. Below is the code…

We will check if the user is logged in or not by validating user_details and isLoggedIn from localStorage. If not validated we will redirect user to home page.

That is pretty much it… If you want complete code, here is the github url.

Setting Up Auth0 with React+NextJS was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

Functions can use objects to remember the results of previous operations, making it possible to avoid unnecessary work. This optimisation is called memoization. JavaScript’s objects and arrays are very convenient for this.

Let’s understand this by writing a programme to compute a fibonacci numbers.

var fibonacci = function (n) {
    return n < 2 ? n : fibonacci(n − 1) + fibonacci(n − 2);
};

for (var i = 0; i <= 10; i += 1) {
    console.log('// ' + i + ': ' + fibonacci(i));
}

In the above scenario, the computation of fibonacci is not optimised because the fibonacci function is executed more than required times.

It is called by us 11 times inside the for loop and all the times by itself returning values that were probably already recently computed.

We will keep our memoized results in a memo array that we can hide in a closure. When our function is called, it first looks to see if it already knows the result.If it does, it can immediately return it:

var fibonacci = (function (  ) {
    var memo = [0, 1];
    var fib = function (n) {
        var result = memo[n];
        if (typeof result !== 'number') {
            result = fib(n − 1) + fib(n − 2);
            memo[n] = result;
        }
        return result;
    };
    return fib;
}( ));

In this case, functions will be called by itself only 29 times and 11 times by for loop. Let’s see one more easy example of memoization:

// a simple function to add something
let addNum = (n) => (n + 1);
addNum(10);

// a simple memoized function to add something
let cachedAddNum = () => {
  let cache = {};
  return (n) => {
    if (n in cache) {
      console.log('Fetching from cache');
      return cache[n];
    }
    else {
      console.log('Calculating result');
      let result = n + 10;
      cache[n] = result;
      return result;
    }
  }
}

// returned function from memoizedAdd
const add = cachedAddNum();
console.log(add(10)); // calculated
console.log(add(10)); // cached

Note: Only a pure function can be memoized.

A Pure Function is the one that

• Returns same output for the same input, every time.
• Doesn’t depend on and doesn’t modify the state of the variables out of its scope.

Using above concept you can write a generalised memoizer that accepts function that needed to be memoized and a formula that will compute the result and return it to the caller.

Memoization in Javascript was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

While deploying a NodeJS app in production we always think about scalability. In fact, we know node being an asynchronous single threaded io, it blocks events loop while processing a request.

To avoid those type of performance bottlenecks, we often use a concept called load balancing to create a distributed architecture.

A load balancer is a process that takes in HTTP requests and forwards these HTTP requests to one of a collection of servers.

Implementing Load balancer with node js

— — — — — — — — — — — — — — — — — — — — — — — — —

There are many ways to achieve this…

1. With help of your PaaS or IaaS

• If deploy you app on App Engine in Google Cloud Platform, you’ll find it extremely easy to load balance your app and dividing traffic into one or more instances.
• AWS EC2 also has a service called Application Load Balancer to distribute traffic to one or more EC2 instances.

2. Using NGINX

Nginx is actually a pretty darn solid choice for load balancing Node.js processes. Here is an example how we can achieve this…

upstream my_http_servers {
    server 127.0.0.1:444;      # httpServer1 listens to port 444
    server 127.0.0.1:445;      # httpServer2 listens to port 445
    server 127.0.0.1:446;      # httpServer3 listens to port 446
    server 127.0.0.1:447;      # httpServer4 listens to port 447
}

server {
    listen 80;
    server_name your-domain.com www.your-domain.com;
    location / {
        proxy_set_header   X-Real-IP $remote_addr;
        proxy_set_header   Host      $http_host;
        proxy_pass         http://my_http_servers;
    }
}

3. Using Express Web Server

We can also create a load balancer using Express JS in this way…

const body = require('body-parser');
const express = require('express');

const app1 = express();
const app2 = express();

// Parse the request body as JSON
app1.use(body.json());
app2.use(body.json());

const handler = serverNum => (req, res) => {
  console.log(`server ${serverNum}`, req.method, req.url, req.body);
  res.send(`Hello from server ${serverNum}!`);
};

// Only handle GET and POST requests
app1.get('*', handler(1)).post('*', handler(1));
app2.get('*', handler(2)).post('*', handler(2));

app1.listen(3000);
app2.listen(3001);

The above code basically creates two Express Servers to handle the request

4. Using HAProxy

HAProxy or “High Availability Proxy” is an open source Proxy server. It is pretty much built solely to load balance lots of machines. Unlike Nginx it cannot serve up static files. It comes with all the great load balancing features of Nginx — weighted processes, failover, horizontal scaling, plus loads more settings and features

There are other methods also to create a load balancer with node js and its up to you to find most effective way to implement it, that is best fit for your app.

Load Balancing Node JS was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.

The Cloud CDN content delivery network works with HTTP(S) load balancing to deliver content to your users. The HTTP(S) load balancing configuration specifies the frontend IP addresses and ports on which Cloud CDN receives requests and the backends that originate responses to those requests.

We will see how the above definition works step and step, and also we will configure a cdn using GCloud Platform with SSL ( HTTPS) support.

Prerequisites

— — — — — — — —

Before proceeding further, lets see what are the initial steps to be taken to start configuring cdn according to this tutorial…

1. You should have knowledge on configuring DNS records.
2. You must already have an active domain and access to its control panel
3. A GCloud Project

A. Create a Storage Bucket

— — — — — — — — — — — — — — — —

1. Go to Google Cloud Platform ( https://console.cloud.google.com) and select your project.
2. Search for “Storage” and click on “Storage” from the drop down or click on storage from left nav bar -> browse or check this link https://console.cloud.google.com/storage.
3. Click on “CREATE BUCKET” button from top.
4. Choose bucket name -> Select multi-regional -> your preferred bucket location.
5. Click on “Create”

B. Creating Load Balancer

— — — — — — — — — — — — — — — —

1. Search for Network Services -> Click on Load Balancing from left navigation drawer( See under Networking section ) or search from top search bar.
2. Click on CREATE LOAD BALANCER -> Select HTTP(S) Load Balancing -> Start Configuring.
3. Select Backend Configuration
4. From right side select Backend Buckets -> Select your previously created bucket
5. Select Frontend Configuration.
6. From right side Name section -> Give name to your New Frontend IP and Port
7. Select protocol HTTPS ( make sure you have an active domain or subdomain )
8. From Certificate section, click on Create a New Certificate.
9. Give a name to your new SSL certificate
10. Select Create Google-managed certificate as create mode( Google mainly uses Lets Encrypt as CA )
11. In domain section, give a subdomain*** name (eg. assets.example.com) that you will use for static assets serving. *** Assuming you currently does not have that sub-domain and you have access to domain provider to create one.
12. Click on create
13. Once created, again click on Load Balancing from left navigation
14. Now you will see Load Balancers created by you. Click on Frontends tab
15. Search for previously created config and note down the IP ADDRESS.
16. *** Now go to your domain provider’s site and create a subdomain that should point to previously created frontend ip address. This subdomain can be served over https because google has already activated ssl for this.

C. Adding Load Balancer to CDN

1. Go to Cloud CDN under Network Services from left nav
2. Click on ADD ORIGIN
3. Select your previously created Load Balancer
4. Click on Add

Now you have successfully created a fully managed cloud cdn that is served over https.

To see if your domain ssl is successfully verified…

1. Go to Load Balancing section from left bar -> Under Load Balancers tab and Name Column -> click on your previously created LB
2. This will open Load balancer details section
3. Under Frontend Section -> Click on your certificate under Certificate column.
4. Check this image

To see what these statuses mean, check this link https://cloud.google.com/load-balancing/docs/ssl-certificates?hl=en_GB&_ga=2.131299983.-1697683271.1535389579&_gac=1.229135598.1549389793.Cj0KCQiAheXiBRD-ARIsAODSpWP6ccw-mH7igkjw7pYZdPpVsAbB9ceVWE7ed3bQfD-PT4KSVWfNwFsaAnY3EALw_wcB#domain-status

Final Steps:

Add some images or static files to your bucket and access them using your subdomain. Eg. https://assets.example.com/my_image.jpg

Note: Assets in bucket might not be available publicly. To make an asset public, go to permissions for that asset -> Add Entity User -> allUsers as Name.

Serving static files using Google Cloud CDN + Storage Bucket was originally published in BrewedByte on Medium, where people are continuing the conversation by highlighting and responding to this story.