Devspedia - Software Engineering News for Developers

Devspedia respects your preferred OS color scheme!

Islam Magdy — Sat, 09 Nov 2019 22:55:44 +0000

Hello there, tech-savvy explorers! We've got some exciting news to share that's all about making your Devspedia experience even more delightful.

You know that feeling when your favorite app seamlessly adjusts to your preferences? Well, Devspedia is now right there with you, effortlessly embracing the look and feel you love. Whether you're cruising in dark mode or basking in the light, we've got you covered!

So, here's the scoop: When you visit Devspedia, our clever website has a little chat with your operating system (iOS, macOS, Ubuntu, and more). It asks, "Hey, what's the vibe right now? Dark and mysterious or bright and sunny?"

{ad-block}

And guess what? It listens! If your OS is all about that dark mode life, we'll flip the switch to a soothing dark color palette, making your nighttime reading sessions a breeze on the eyes. But if you prefer the classics and are in the land of light mode, Devspedia will don its brightest attire to match your style.

It's like having your very own theme party every time you visit. So, kick back, relax, and let Devspedia set the mood. Your comfort is our priority, and we're thrilled to make your tech journey even cozier. Enjoy the ride, and keep exploring the ever-fascinating world of Devspedia! 🌟🌙

Apple Macbook Flexgate issue

Islam Magdy — Mon, 11 Nov 2019 18:00:00 +0000

If you have a new Macbook Pro with Touchbar (except for 2018 and 2019 models), your Macbook will screen will most likely fail in a year, or two due to a design flaw related to a flex cable connecting the screen to the logical board, this cable is ultra thin, and very short.

So basically as you normally open/close your computer's lid, this cable will fracture over time leading to this issue, check the video below to see how it looks like:

Apple tech was so sheepish after consulting manager and telling me this issue isn't covered. Weirdly he says the screen doesn't affect trade in value?! #flexgate pic.twitter.com/q3QO8nkFQR
— Karl Yang (@akarlyang)May 21, 2019

Apple have admitted this issue back in May 2019 but only for the 13 inch models, leaving 15 inch owners having to pay $600 to replace the entire screen, while the cable it self can only cost between $7 and $9 to replace, but the screen was designed with this cable built into it, making it impossible to replace only the screen.

I was one of those who have faced this issue, and of course due to having a 15 inch model, I have no chance for a free repair.

I heard some people in some countries like Netherlands and Brazil have managed to get a free repair from the Genius bar. Not sure how they managed to convince them.

For more information on the flexgate issue, check this dedicated website (update: website was taken down!):

Also there is a petition was nearly 25,000 people signed it who are facing this issue, and Apple is basically acting like nothing is happening unfortunately.

{ad-block}

Here's also a video that explains the issue in details by Louis Rossman, a reputable YouTube author, working professionally in fixing MacBooks.

Worth to note that Apple have managed to "silently" replace this cable with a longer one in 2018 models -both 13 & 15 inch models- in order to fix this issue.

Finally, we all hope Apple can soon admit this issue, and launch a repair program for 15 inch models as well.

{ad-block}

Thanks for reading devspedia, I love you, and see you the next time :)

How to authenticate your JavaScript SDK using AWS Lambda & Serverless

Islam Magdy — Tue, 12 Nov 2019 12:08:37 +0000

Hello my friends, and welcome to a new story. Today we'll discuss the shortest method to use API key authentication for your JavaScript SDK using AWS Lambda.

{ad-block}

The use case

So you have a JavaScript SDK (file) that you want to allow only clients with valid key and valid domain to actually be able to request and download the SDK file.

Let's say we want https://mydomain.com/sdk.min.js?key=XXXX to work when requested from client.com website, and of course when the key is valid, and should send 401 unauthorized if the key is not valid, or the key is valid, but from a different domain.

{ad-block}

Checklist

Here's our checklist from start to finish:

Install Serverless (if you haven't already).
Initialize project.
Create our Lambda.
Try locally.
Deploy.

1. Install Serverless

This method installs serverless globally, but you can also install it locally to your project only if you prefer.

npm install -g serverless
yarn global add serverless

2. Initialize project

First thing we need is to run the serverless CLI tool, it'll start an interactive process for creating a new project, it's pretty straightforward.

serverless

This will initialize the interactive CLI of serverless for creating new project

The above command will start the interactive process of creating a new serverless project, I've included the steps below:

$ serverless
    $ Serverless: No project detected. Do you want to create a new one? (Y/n) 
    $ Serverless: What do you want to make? (Use arrow keys)
    ❯ AWS Node.js 
      AWS Python 
    $ Serverless: What do you want to call this project? 
    $ Project successfully created in 'lambda-sdk-auth' folder.
    $ You can monitor, troubleshoot, and test your new service with a free Serverless account.
    $ Serverless: Would you like to enable this? (Y/n)
    $ Serverless: Would you like to setup a command line <tab> completion? (Y/n)

The last 2 steps are optional.

Now we have a directory called lambda-sdk-auth which include our new project.

{ad-block}

Files tree

You should now have 3 files in your project:

.gitignore Which is used to instruct git to exclude some paths like node_modules & .serverless.
handler.js We'll write our lambda function here.
serverless.yml This file include all of our serverless configurations.

3. Create our Lambda function

Let's start by updating the default serverless config, replace serverless.yml's contents with the following:

service: lambda-sdk-auth
    
provider:
  name: aws
  runtime: nodejs10.x

  stage: dev
  region: us-east-1

functions:
  sdk:
    handler: handler.default
    events:
      - http:
          path: sdk.min.js
          method: get

Let me explain what we've got here:

Service: This will be our project name, it'll be used in the deployment's CloudFormation template.
Provider: The cloud provider, serverless supports Azure, Google Compute Cloud and AWS, we're using AWS in this example, and NodeJS 10 as a runtime (choose earlier during initializing project).
Stage: The API Gateway stage.
Region: The region in AWS where you wish to deploy your Lambda to.
Functions: List of our Lambda functions, we only have 1.
Function.sdk: This is our Lambda function name.
Function.sdk.handler: The path to our Lambda function in the project, the .default part of the value means it will look for module.exports.default in that file.
Function.sdk.events: Events list for this function, we can have different types of events like HTTP or a scheduled/cron. We're using HTTP, which is the only suitable one for our use case.
Function.sdk.events.http.path: The URL structure for your Lambda.
Function.sdk.events.http.method: The HTTP request method, we're using GET.

Before writing our Lambda code, there's 1 last step we need to do, is to install serverless-offline node module, which will make local development easier by allowing us to invoke our Lambda from the browser, to best simulate AWS environment.

Install serverless-offline:

$ npm install serverless-offline -D

Install serverless offline as a dev dependency via npm

Or via Yarn:

yarn add serverless-offline -D

Install serverless offline as a dev dependency via yarn

Finally update serverless file to include plugins section, with this serverless plugin:

service: lambda-sdk-auth

plugins:
  - serverless-offline

provider:
  name: aws
  runtime: nodejs10.x

  stage: dev
  region: us-east-1

functions:
  sdk:
    handler: handler.default
    events:
      - http:
          path: sdk.min.js
          method: get

Now let's do 2 primary things:

Create our SDK file.
Create the lambda function.

Create a file called sdk.js in the root of your project, and add anything to it, example:

const test = () => 123;

Our SDK's contents

Now let's move on to writing our function's logic; Let's start by replacing our Lambda file with the below contents, then I'll explain it in details:

const fs = require('fs');
    
module.exports.default = async (event, context) => {
  // Get the "key" from request query params
  const queryParams = event.queryStringParameters;
  const key = queryParams && queryParams.key;
  
  // Return 401 if key is not passed in GET query params
  if (!key) {
    return {
      statusCode: 401,
      body: JSON.stringify(
        {
          error: 'Key is missing'
        }, null, 2),
    };
  };

  // Get requesting domain
  const clientDomain = event.headers.Origin;

  // This is a static mock for allowed clients.
  // You should normally get this from your database
  const allowedClients = [
    {
      domains: ['devspedia.com'],
      key: 'example-key'
    }
  ];
  
  // Check if client exists using it's unique key
  const client = allowedClients.find(client => client.key === key);

  // If client is not found, return 401 as the key is not authrorized
  if (!client) {
    return {
      statusCode: 401,
      body: JSON.stringify(
        {
          error: 'Key not registered'
        }, null, 2),
    };
  }

  // Check if the domain exists within the client's allowed
  // domains
  const validDomain = clientDomain && client.domains
    .find(domain => domain === clientDomain.split('://')[1]);

  // If the request if coming from a domain that was not 
  // allowed for this key, return 401
  if (!validDomain) {
    return {
      statusCode: 401,
      body: JSON.stringify(
        {
          error: 'Domain not registered for this key'
        }, null, 2),
    };
  }

  // Read the SDK javascript file's contents
  const sdk = fs.readFileSync(`${__dirname}/sdk.js`);

  // Return the file's contents with correct headers
  // and transform the sdk buffer array to a string
  return {
    statusCode: 200,
    headers: { 'Content-type': 'text/javascript' },
    body: sdk.toString(),
  };
};

hander.js

Here's what we did in brief points:

Get the "key" from request query params.
If key is not passed in query params, we'll return 401 unauthorized.
If above step passed, we'll get the requesting domain.
Then check if this domain is allowed for this requesting key.
If not allowed, we'll return 401 unauthorized.
If allowed, we read the sdk file's contents using the native node fs module.
Finally return the file's content after setting the correct headers. Viola :)

4. Try locally

Now, to try this locally, we'll use cURL from the terminal. Make sure you're inside the project's directory, and then run:

serverless invoke local -f sdk -d "{"headers":{"Origin":"https://devspedia.com"},"queryStringParameters":{"key":"example-key"}}"

The response should be:

{
    "statusCode": 200,
    "headers": {
      "Content-type": "text/javascript"
    },
    "body": "const test = () => 123;"
}

Lambda response

Now, when this is requested from the browser, the browser will only render the body part of this response, and in this case, it's our SDK's content.

To actually simulate this in the browser, let's run serverless offline. Make sure you're inside the project directory, and then run:

serverless offline

Then in the browser, you can open devspedia.com and open up browser's developer tools/console, then make a request via fetch:

fetch(
  'http://localhost:3000/sdk.min.js?key=example-key'
).then(
  res => res.text()
).then(
  res => console.log(res)
);

fetch request the SDK

You should see const test = () => 123; in the logs, which is the file's contents.

5. Deploy

Deployment is easy, few steps you'll need to make:

Install AWS CLI (https://docs.aws.amazon.com/cli/latest/userguide/cli-chap-install.html).
Run aws configure in your terminal, and add your authentication info.
Finally, from the root of your project, run serverless deploy.

That's it, thanks for reading devspedia, I love you, and I'll see you the next time :)

Time series databases, what is it, and when to use it?

Islam Magdy — Fri, 15 Nov 2019 20:56:37 +0000

Welcome everyone to a new devspedia story. Today we'll be talking about time series databases, what are they, and when it can be the best choice.

Car booking services

{ad-block}

A common use cases for time series databases is with autonomous driving systems, ride booking apps, delivery apps, and last mile apps.

So, time series databases are used in many services and industries around us, some of these we interact with them day to day, here's a few examples:

Autonomous trading algorithms, they keep track of market changes.
Car booking apps, they need to keep track of driver and rider coordinates before, during, and after the trip to know where you want to be picked up, where you were actually picked up, where's the driver, where did he drop you off, ... etc.
Last mile delivery companies tracking coordinates of their fleet of cars, to know their locations, and where packages were delivered, ...etc
Cloud computing service providers such as AWS, Google Compute Cloud, Azure, ...etc they need to keep track of resources utilization, some of these require them to know changes happened to a resource as a time series.

{ad-block}

So how does it work?

A time series database allows you to keep track of changes on a piece of data over time. This happens by combining some fixed and variable properties.

Let's take an example to make it clear; Let's say you've booked Uber from point A to point B. We need to keep track of your trip's path from start to end as a time series.

In a time series database, we can have this fixed property:

Trip ID (trip identifier).

And this dynamic/variable property:

location: [latitude, longitude]

So since trip starts, and until trip is ended we keep sending new values (let's say every 100 meters) for the location property, while time is passing by.

At any point of time when we send a new value, this new record is called a tag. So now we have information

Now we have a tremendous amount of very useful data! Simply because it's reflecting 1 thing (a trip) and is tied with a time series. Here's what we can do with the above data.

Know how much total time the trip consumed.
Know the actual path the driver took during the ride.
Know how much time the driver took in a particular street, and predict congestion in the future.
Know average driver's car speed during entire trip, or between 2 particular coordinates.
and a lot more!

{ad-block}

Okay, sounds awesome, but I can do this with a regular DB (NoSQL, or kay-value pairs like Redis).

You're actually right! But there are a few differences between time series databases and other databases that makes it more valuable and efficient to use a time series database over a regular database for use cases as the mentioned above, here's a few below:

Scalability:

Time series databases can easily handle 100k to +1M inserts per seconds.
Tracking a trip (as in the example above) for the entire day, would take roughly (on average) 4 GBs of data, and for only 1000 trips we're talking about 4 TB of data. Time series databases are designed to handle tremendous amounts of data easily. If you do the same in an SQL DB you'd have 4 TB of data per 1000 trip, millions of rows, and a reduced performance compared to a time series database.
Time series databases are designed to operate on time stamped/based data, this allows for a much better performance on scale compared to other databases.

Usability:

Time series databases have built-in operations that are time-based, which does not exist in any other type of database, that makes it easier to run powerful analysis on these data.

Time series databases popularity is growing rapidly

For the past 2 years, time series databases are the fastest growing type of database in terms of usage and popularity.

DB Engines https://db-engines.com/en/ranking_categories

Finally, here's a list of top 20 ranking time series databases:

Time series databases are very useful when used in projects where time series is the only choice that makes sense.

Resources:

Finally, thanks for reading devspedia, I love you, and see you the next time :)

Many to Many vs Polymorphic relationships

Islam Magdy — Wed, 20 Nov 2019 14:02:38 +0000

Hello everyone and welcome to a new story. Today we're discussing the differences between Many-to-Many and Polymorphic relationships as pros and cons.

{ad-block}

Many to Many relationship (or belongs to many)

Many to many relationship comes up to mind immediately when you think of two entities that can relate to each other as of many records related to many records, something like the very common Tags example.

An article can have many tags, and a Tag can also have many many articles (or belongs to each others).

An Article with many Tags, and a Tag with many Articles, in this case, you can have a junction table like Articles_Tags with columns:

ID (PK)
ArticleID (FK)
TagID (FK)

Now it's easy to link many Articles with many Tags using foreign keys. Now let's see pros and cons of this solution:

PROS:

Allows us to use foreign keys effectively.
Efficient data querying.
Maintains data consistency.

{ad-block}

CONS:

More tables as each type requires a separate table – imagine adding Song to the mix, so you'll also need Songs_Tags in case you want to tag Songs too –.
Results in multiple classes, each representing the separate Type_Tags table.

So in particular when having this scenario in 1st point in cons (more than 2 models), this is exactly where a polymorphic relationships kicks in, let's take a look into this.

Polymorphic relationship:

A polymorphic relationship is used when you want something like Many to Many relationship, but without having to create extra tables every time you want to add a new Model to the mix.

Polymorphic helps you combine all the junction tables into 1 very slim table, but at a cost.

So, let's take the same example of Articles and Tags above, but let's also add another Model called Songs.

With polymorphic we can have only 1 table to achieve that, the table should have these columns:

ID (PK)
TaggableID (INT)
TaggableType (VARCHAR)

Now we can new records like:

{
  ID: 1,
  TaggableID: 7,
  TaggableType: "article"
}

A record for linking an article with a tag

and

{ad-block}

{
  ID: 1,
  TaggableID: 8,
  TaggableType: "song"
}

A record for linking a song with a tag

Now let's explore pros and cons of this solution:

PROS:

Easy to scale, more models can be easily associated with the polymorphic class.
No need for extra table when you add an extra Model to the mix.
Results in one class that can be used by many other classes (DRY).

CONS

More types can make querying more difficult and expensive as the data grows.
Cannot have a foreign key constrains (you can virtually insert any TaggableID and any TaggableType.
Lack of data consistency.
Weak ORM support.

{ad-block}

Now, hope this story give you more insights on these 2 types of relationships, and help you decide which type to pick for your project.

Thanks for reading devspedia, I love you, and see you the next time :)

How to deliver experiences best suited to a user's device and network constraints in React

Islam Magdy — Wed, 27 Nov 2019 21:15:20 +0000

Hello everyone, and welcome to a new story. Today I'd like to discuss with you a very interesting open source library "react-adaptive-hooks" which will make it very easy for you to implement awesome features into your app to deliver the best possible experience based on the capabilities of the devices of your audience.

This open source library provided by Google Chrome Labs, it's designed for React. It's currently maintained by 9 open source contributors, lead by Addy Osmani, who's a Speed team lead at Chrome.

Although the project have started 18 days ago (November 9th, 2019), it now have (as of this writing) 3400 stars, 72 forks, 7 issues, and 16 merged pull requests on Github!

{ad-block}

What does it provides?

Well, the library gives you 4 primary hooks that will allow you to tailor your users' experience based on the following:

Network conditions and effective connection type (slow-2G, 2G, 3G, 4G).
Browser's data saving preferences. (load smaller resources)
Available device memory. (0.5, 1, 2, 3, 4,... GiB).
Device's logical CPU cores. (1, 2, 3, 4,.. cores).

{ad-block}

Imagine what you can do with the above capabilities! One use case is as follows:

import React from 'react';
import { useSaveData } from 'react-adaptive-hooks/save-data';

const MyComponent = () => {
const { saveData } = useSaveData();
return (
  <div>
    { saveData ? <img src='...' /> : <video muted controls>...</video> }
  </div>
);

Save user's data, provide better experience

In the above example, we're checking via useSaveData function whether the user's browser have the data saving feature enabled or not, if it's enabled, we'll go ahead and serve an image preview instead of a video which will reduce data consumption, and also provide a faster loading time.

For more usage examples, check the repo's README file.

{ad-block}

Installation is simple

npm i react-adaptive-hooks --save or
yarn add react-adaptive-hooks

That's all.

Thanks for reading devspedia, I love you, and I'll see you the next time :)

Here's a tool that'll help you build a solid webpack or parcel config files in no time

Islam Magdy — Thu, 28 Nov 2019 21:39:54 +0000

{ad-block}

Welcome my friends to a new story. Today I'll be discussing an awesome tool I found that helps you create your Webpack or Parcel config in a fraction of time, via an easy to use web interface. Meet Create App!

The app lists every possible config for both Webpack and Parcel, and let you fine tune them, while showing you the changes to both your config file and your package.json file in real time.

{ad-block}

So for example if you choose Vue – Webpack context – ; It'll create a Vue file, add vue-loader and vue-template-compiler packages to your package.json file, and update the webpack.config.js file to reflect these changes and implement the new loader.

Of course, if you're using Parcel, you don't need any of these extra steps (ex: no loader needed) as Parcel itself automates this.

That's all, thanks for reading devspedia, I love you, and I'll see you the next time!

Here's how you can start using feature flags today

Islam Magdy — Sat, 30 Nov 2019 22:56:52 +0000

Welcome everyone to a new devspedia story. Today I'll be talking about feature flag concept/practice in software development.

{ad-block}

Feature Toggles (often also refered to as Feature Flags) are a powerful technique, allowing teams to modify system behavior without changing code — Martin Folwer

What is a feature flag?

A feature flag is a technique to turn on/off a feature at any time without having to maintain separate branches for each feature, and then once merged, is on by default.

It'll basically allow you to ship a product with a feature switched off, then switch it on again any time in the future.

{ad-block}

How it works?

Take this minimal example into consideration:

const sendSMSConfirmation = false;
function sendOrderConfirmation() {
  sendEmailConfirmation();
  if(sendSMSConfirmation) {
    sendSMSConfirmation();
  }
}

Simple example showing feature flags usage

In this example, we have a toggle/bool to tell us whether or not to send SMS messages after sending email confirmation. It's false or off by default.

Whenever business requires to switch on this feature at any time, we can easily set sendSMSConfirmation to true. Now it works.

{ad-block}

Ways to implement feature flags:

There are many ways you can implement feature flags, most common are the following:

By decoupling decision points from decision logic.
Inversion of Control.

Let's briefly explain these 2 main techniques.

1- Decoupling decision points from decision logic

This means the feature flags will have absolutely nothing to do with the rest of your application logic, they are just bools, and then you can use them however you wish, take this example for better illustration:

const features = getFeatureFlags();
  
function sendOrderConfirmation() {
	sendEmailConfirmation();
	if(features.TRANSACTIONAL_SMS) {
  		sendSMSConfirmation();
	}
}

Here, we can freely use this feature flag anywhere in our app logic, simply by doing this conditional.

Now, given we have a more broader feature flag: TRANSACTIONAL_SMS which maybe indicate a set of features, this direct usage is introducing few challenges:

What if we want to rollout this feature to a particular set of users?
What if we want to turn on some parts of TRANSACTIONAL_SMS but without this sendSMSConfirmation part?

Now, there's a way to solve this be decoupling the decision point of sending SMS confirmation from the actual logic of sendOrderConfirmation. Take this example:

function orderConfirmationDecisions(features){
  return {
    sendSMSConfirmation(subscription){
      return features.TRANSACTIONAL_SMS && subscription.isPaid;
    };
  };
};

Order confirmation decisions

Now in this decisions file, we have a decision maker for order confirmations, here we can add more login to this sendSMSConfirmation decision (ex: by checking the flag and subscription.isPaid).

Now let's see the refactored sendSMSConfirmation function:

const features = getFeatureFlags();
const decisions = orderConfirmationDecisions(features); // from prev file
const subscription = getUserSubscriptionSomehow();

function sendOrderConfirmation() {
  sendEmailConfirmation();
  if(decisions.sendOrderConfirmation(subscription)) {
    sendSMSConfirmation();
  }
}

Refactored senOrderConfirmation function, now with decision decouple

2- Inversion of Control.

In the above example we've introduced a new function that's responsible for taking order confirmation decisions, which is a dependency for sendOrderConfirmation, also decisions must be aware of flagging.

This way, and by expanding to other system modules, will add extra layer of dependency to all modules logic, make testing harder, and will create a global feature flags dependency.

In Software design there's a technique called Inversion of Control, which we can use here to solve this problem.

Take the example below for better illustration:

function sendOrderConfirmation(config) {
	sendEmailConfirmation();
	if(config.sendSMSConfirmation)) {
  		sendSMSConfirmation();
	}
}

Now in order to use this sendOrderConfirmation function, we can have it go through a feature flagging factory, which will give the function the necessary config with all decision pre-made at run-time.

const sendOrderConfirmation = getSendOrderConfirmationFunction();

function createFeatureAwareFactoryBasedOn(decisions){
  return {
    sendOrderConfirmation() {
      const config = {
        sendSMSConfirmation: decisions.sendOrderConfirmation(),
      };
      return sendOrderConfirmation(config);
    },
  };
}

What we did is basically adding a layer between the sendOrderConfirmation function, and between the decisions it should take, through constructing a config for this function.

This config can be not only the decisions, but can also include extra logic outside of the scope of feature flags.

How to configure the feature flags:

Now figured out how to implement feature flags in our application logic, but how to actually build feature flags. There are few ways.

1- Maintaining config files:

This is basically by having a file like so:

{
  "PARENT_SET_OF_FEATURES": {
    "TRANSACTIONAL_SMS": true
  },
  "ANOTHER_FLAG": false
}

feature flags config file.

This is probably the simplest way, but it has it's drawbacks specially in larger applications, it becomes very difficult to guarantee consistency of feature flags across a large number of distributed servers.

2- Use the application database

This will guarantee consistency somehow, and is a natural place to keep your feature flags, however, nowadays there are better ways to manage feature flags, there are hierarchical key-value stores that can be used.

3- Use these tools if you have a distributed cluster

If you have a distributed cluster, you can use tools like Consul, Zookeeper, or etcd.

These services from a distributed cluster, will allow you to have a shared source of environmental configurations for all of your cluster nodes. This guarantees that changes in your system environment configurations will get distributed on all node everywhere.

Consul provides a web interface where you can manage these configurations easily, however in most cases developers will create a administration app for managing these feature flags.

The final bit:

There are many other details I didn't yet cover in this story, like for example, how to override feature flags value per environment (some real world cases require you to have different config for a particular set of your app deployments based on geographical or other constraints). There are also some techniques to override feature flags based on the user's HTTP request, and more. But I'd like you to go ahead, do more research and dive deeper, knowledge about this topic is endless everywhere.

Resources:

That's all, thanks for reading devspedia, I love you, and see you the next time :)

Amazon Web Services (AWS) just introduced it's fully managed Quantum computing service 'Braket'

Islam Magdy — Tue, 03 Dec 2019 00:21:03 +0000

Hello everyone, welcome to a new devspedia story. Today we have some very exciting news; just hours ago Amazon's cloud computing service (AWS) introduced a new fully managed service that allows programmers and researchers from around the world to finally start experimenting with Quantum Computing. They called it Braket!

Earlier on Monday December 2nd 2019, AWS's release an official announcement introducing Braket, their new fully managed service that helps you get started with quantum computing by providing a development environment to explore and design quantum algorithms, test them on simulated quantum computers, and run them on your choice of different quantum hardware technologies.

{ad-block}

In fact, that was kind of an unexpected move from AWS, specially other cloud computing giants such as Google, IBM, and Microsoft have been talking so much recently about their experiments and achievements with Quantum Computing, but none of them have released this to the public as a managed service, and during all this buzz, AWS was completely silent!

AWS Braket

{ad-block}

Amazon Web Services (AWS) are not building their own Quantum Computing hardware tho, in fact, they're partnering with big names to offer hardware like:

Gate based superconductor computers from Rigetti.
Quantum annealing superconductor computers from D-Wave.
Ion trap computers from IonQ.

The new service allows you to execute your quantum algorithm on your choice of quantum hardware, paying only for the time that you use, similar to most of their other cloud services.

Read the official announcement here: https://aws.amazon.com/about-aws/whats-new/2019/12/introducing-amazon-braket/

Or view Braket product page here: https://aws.amazon.com/braket/

{ad-block}

Thanks for reading devspedia, I love you, and see you the next time!

Sorting algorithms, with visualizations and complexity comparisons

Islam Magdy — Thu, 05 Dec 2019 01:45:38 +0000

Welcome everyone to a new story on devspedia. Today I'll showcase 8 sorting algorithms in JavaScript, with examples and complexity comparisons.

Let's get straight to it. Below is a list of these sorting techniques:

Bubble Sort
Selection Sort
Insertion Sort
Heap Sort
Merge Sort
Quicksort
Shellsort
Radix Sort

{ad-block}

Bubble Sort:

Bubble Sort

Bubble sort works basically by iterating through the list while comparing list each adjacent pair of items in the list. If the order of these 2 items is invalid (based on whether you're sorting ascending or descending) then it swaps them.

It keeps repeating this same pattern over and over again until no extra swapping is necessary.

Complexity:

Best case: n
Worst: n²
Average: n²

{ad-block}

Selection Sort:

Selection Sort

Selection sort is has significant time complexity O(n²) which makes it very slow for large lists. Selection sort works by doing in-place comparison, so it'll iterate through all items and compare them 1 to 1, then start over. It keeps repeating again no more replacing is necessary.

Selection sort is similar to insertion sort, however it performs worse. But in some scenarios selection sort can perform well in low memory systems, and with smaller lists.

Complexity:

Best: n²
Worst: n²
Average: n²

{ad-block}

Insertion Sort:

Insertion Sort

Insertion sort is — similar to previous selection sort — takes on item at a time too, it compares one item with it takes first item to the left, and compare it with the next item, then second item, and put before or after first item, then third item and compare it with second then first item and keep repeating this until all list is sorted.

Complexity:

Best: n
Worst: n²
Average: n²

{ad-block}

Heap Sort:

Heap sort (using max heap)

Heap sort performs also runs on comparisons, but it's more efficient than selection or insertion sort because with every iteration it shrinks down the sortable scope of the list, resulting in fewer iterations until list is fully sorted.

It works by creating a max (or min) heap, and then take the top item of the heap tree and put it in the far right (if max heap) or far left (if min heap), and consider that number sorted, and then work only on the remaining items.

Complexity:

Best: n log(n)
Worst: n log(n)
Average: n log(n)

Merge Sort:

Merge Sort

Merge sort is a divide and conquer algorithm. Merge sort works by splitting the list into halves, and further until each group is only at most 2 items. Then it keep merging and growing up again to the full length of the list.

The steps for sorting will be by splitting them into smaller groups, compare groups together, then merge sorted items to a bigger group, then compare, then merge, and keep repeating until all items are sorted.

Complexity:

Best: n log(n)
Worst: n log(n)
Average: n log(n)

Quick Sort:

Quick sort

Quicksort is also a divide and conquer algorithm. It works by dividing the list into two smaller groups: group with lowest elements, and group with highest elements. It knows the lowest and highest elements by picking an item from the middle off the list, and grouping smaller values in 1 group, and higher values in another. Then quicksort can then recursively sort the the smaller groups by repeating the same steps.

Complexity:

Best: n log(n)
Worst: n²
Average: n log(n)

Shell sort:

Shell sort

Quick sort is another in-place comparison sort algorithm. It works by sorting pairs of elements far apart from each other using an interval value for this distance that decreases while iterating, then progressively reducing the gap between elements to be compared. Starting with far apart elements, it can move some out-of-place elements into position faster than a simple nearest neighbor swap.

Check the following graphs for better explanation:

Let us consider the following example to have an idea of how shell sort works. We take the same array we have used in our previous examples. For our example and ease of understanding, we take the interval of 4. Make a virtual sub-list of all values located at the interval of 4 positions. Here these values are {`{(35,14)}, {(33, 19)}, {(42, 27)} and {(10, 44)}`}

We compare values in each sub-list and swap them (if necessary) in the original array. After this step, the new array should look like this:

Then, we take interval of 1 and this gap generates two sub-lists - {`{(14, 27, 35, 42)}, {(19, 10, 33, 44)}`}

We compare and swap the values, if required, in the original array. After this step, the array should look like this:

Finally, we sort the rest of the array using interval of value 1. Shell sort uses insertion sort to sort the array.

Following is the step-by-step depiction:

Complexity:

Best: n log(n)
Worst: n (log(n))2
Average: Depends on gap sequence

Radix Sort:

Radix Sort

Radix sort is a non-comparative integer sorting algorithm that sorts data with integer keys by grouping keys by the individual digits which share the same significant position and value. A positional notation is required, but because integers can represent strings of characters (e.g., names or dates) and specially formatted floating point numbers, radix sort is not limited to integers.

What does Radix mean?

In mathematical numeral systems, the radix or base is the number of unique digits, including the digit zero, used to represent numbers in a positional numeral system. For example, a binary system (using numbers 0 and 1) has a radix of 2 and a decimal system (using numbers 0 to 9) has a radix of 10.

Complexity: (k means the longest key)

Best: n * k
Worst: n * k
Average: n * k

Resources:

Thanks for reading devspedia, I love you, and see you the next time :)