DEV Community: Ivana

Django Web Framework (Python)

Ivana — Sun, 11 Apr 2021 02:24:50 +0000

Django is an extremely popular and fully featured server-side web framework, written in Python.

Install Django

Before you can use Django, you’ll need to install it. More about what Python version should be used with Django version can be found here

Get the latest development version

The latest and greatest Django version is the one that’s in its Git repository, we started with:
git clone https://github.com/django/django.git

Install Python

Download the latest version for Mac OS X here

What does Django code look like?

A web application waits for HTTP requests from the web browser (or other clients) and when a request is received the application works out what is needed based on the URL and possibly information in POST/GET data. Depending on what is required it may then read or write information from a database or perform other tasks required to satisfy the request. The application will then return a response to the web browser, often dynamically creating an HTML page for the browser to display by inserting the retrieved data into placeholders in an HTML template.
Django web applications typically group the code that handles each of these steps into separate files:

URLs: While it is possible to process requests from every single URL via a single function, it is much more maintainable to write a separate view function to handle each resource. A URL mapper is used to redirect HTTP requests to the appropriate view based on the request URL. The URL mapper can also match particular patterns of strings or digits that appear in a URL and pass these to a view function as data.
View: A view is a request handler function, which receives HTTP requests and returns HTTP responses. Views access the data needed to satisfy requests via models and delegate the formatting of the response to templates.
Models: Models are Python objects that define the structure of an application's data and provide mechanisms to manage (add, modify, delete) and query records in the database.
Templates: A template is a text file defining the structure or layout of a file (such as an HTML page), with placeholders used to represent actual content. A view can dynamically create an HTML page using an HTML template, populating it with data from a model. A template can be used to define the structure of any type of file; it doesn't have to be HTML!

Sending the request to the right view (urls.py)

A URL mapper is stored in a file named urls.py. The mapper (urlpatterns) defines a list of mappings between routes (specific URL patterns) and corresponding view functions. If an HTTP Request is received that has a URL matching a specified pattern, then the associated view function will be called and passed the request.

urlpatterns = [
    path('admin/', admin.site.urls),
    path('book/<int:id>/', views.book_detail, name='book_detail'),
    path('catalog/', include('catalog.urls')),
    re_path(r'^([0-9]+)/$', views.best),
]

The urlpatterns object is a list of path() and/or re_path() functions (Python lists are defined using square brackets, where items are separated by commas and may have an optional trailing comma.

The first argument to both methods is a route (pattern) that will be matched. The path() method uses angle brackets to define parts of a URL that will be captured and passed through to the view function as named arguments. The re_path() function uses a flexible pattern matching approach known as a regular expression. We'll talk about these in a later article!

The second argument is another function that will be called when the pattern is matched. The notation views.book_detailindicates that the function is called book_detail() and can be found in a module called views.

Handling the request (views.py)

Views are the heart of the web application, receiving HTTP requests from web clients and returning HTTP responses.

We will show a view function index(), which could have been called by our URL mapper in the previous section. Like all view functions it receives an HttpRequest object as a parameter (request) and returns an HttpResponse object. In this case, we don't do anything with the request, and our response returns a hard-coded string.

# filename: views.py (Django view functions)

from django.http import HttpResponse

def index(request):
    # Get an HttpRequest - the request parameter
    # perform operations using information from the request.
    # Return HttpResponse
    return HttpResponse('Hello from Django!')

Views are usually stored in a file called views.py.

Main features

We will list the main features that you'll use in almost every web application: URL mapping, views, models, and templates. Just a few of the other things provided by Django include:

Forms: HTML Forms are used to collect user data for processing on the server and Django simplifies form creation, validation, and processing.
User authentication and permissions: Django includes robust user authentication and permission system that has been built with security in mind.

Caching: Creating content dynamically is much more computationally intensive (and slow) than serving static content. Django provides flexible caching so that you can store all or part of a rendered page so that it doesn't get re-rendered except when necessary.

Administration site: The Django administration site is included by default when you create an app using the basic skeleton. It's providing an admin page for site administrators to create, edit, and view any data models on your site.

Serializing data: Django makes it easy to serialize and serve your data as XML or JSON. This can be useful when creating a web service (a website that purely serves data to be consumed by other applications or sites, and doesn't display anything itself), or when creating a website in which the client-side code handles all the rendering of data.

Creating a project

To create a project run the following command in your terminal:
django-admin startproject mysite

This will create a mysite directory in your current directory. After the project is created go to its directory via cd command:
cd mysite

Let’s look at what startproject created:

mysite/
    manage.py
    mysite/
        __init__.py
        settings.py
        urls.py
        asgi.py
        wsgi.py

Those files are:

The outer mysite/ root directory is a container for your project. Its name doesn’t matter to Django and you can rename it to anything you like.

manage.py: A command-line utility that lets you interact with this Django project in various ways. You can read all the details about manage.py in django-admin and manage.py.

The inner mysite/ directory is the actual Python package for your project. Its name is the Python package name you’ll need to use to import anything inside it (e.g. mysite.urls).

mysite/init.py: An empty file that tells Python that this directory should be considered a Python package. If you’re a Python beginner, read more about packages in the official Python docs.

mysite/settings.py: Settings/configuration for this Django project. Django settings will tell you all about how settings work.

mysite/urls.py: The URL declarations for this Django project; a “table of contents” of your Django-powered site.

mysite/asgi.py: An entry-point for ASGI-compatible web servers to serve your project.

mysite/wsgi.py: An entry-point for WSGI-compatible web servers to serve your project.

To start a server run the following command:
python manage.py runserver

After visiting http://127.0.0.1:8000/ you can see your server is really running:)

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

JavaScript Array methods: Filter, Map, Reduce, and Sort

Ivana — Fri, 02 Apr 2021 02:21:19 +0000

Functions are a very important part of JavaScript, and you will use them all the time. In JavaScript, functions are first-class objects, because they can have properties and methods just like any other object. There are several ways to define functions, the most common one is to define functions with a function declaration. Example:

function calcRectArea(width, height) {
  return width * height;
}

console.log(calcRectArea(5, 6));
//-------> Output: 30

Term "callback"

When we pass a function expression (an anonymous function) or the pointer (variable name, declared function name) to a function as an argument, the passed function is called a callback. Since the receiving function will execute, or call that function at a later time; that is, it will call it back, it is called a callback.

Let's learn more about Array methods: Filter, Map, Reduce, and Sort

Arrays provide a lot of methods. JavaScript already has methods built into its Array data type. Follows the examples of how to use it.

Use `.filter()` to filter an Array

filter() returns a new array of filter elements that meet a certain condition. The filter() method creates a new array with all elements that pass the test implemented by the provided function.
filter() does not execute the function for array elements without values and doesn't change the original array.

Syntax:

array.filter(function(currentValue, index, arr), thisValue)

function(currentValue, index,arr) is required.

A function to be run for each element in the array, function arguments are:
currentValue- required, the value of the current element
index - optional, the array index of the current element
arr - optional, the array object the current element belongs to.
thisValue- optional. A value to be passed to the function to be used as its "this" value. If this parameter is empty, the value "undefined" will be passed as its "this" value.

Example

const words = ['spray', 'limit', 'elite', 'exuberant', 'destruction', 'present'];

const result = words.filter(word => word.length > 6);

console.log(result);
//-------> Output: Array ["exuberant", "destruction", "present"]

//-------> Output: ["exuberant", "destruction", "present"]

Example:

[10, 20, 30, 40].filter(function() {
    return true;
  }) //=> [10, 20, 30, 40] (map, basically)

  [10, 20, 30, 40].filter(function(e) {
    return e < 30;
  }) //=> [10, 20]

  [10, 20, 30, 40].filter(function(e, index) {
    return index % 2 === 0;
  }) //=> [10, 30] (elements with an even-numbered index)

Example:

const myArray = [
  { id: 1, name: "Mark" },
  { id: 2, name: "Sam" },
  { id: 3, name: "Sandy" },
  { id: 4, name: "Mark" },
]

myArray.filter(element => element.name === "Mark")
//-------> Output : 0:{id: 1, name: "Mark"},
//                  1:{id: 4, name: "Mark"}

Use `.map()` to transform an Array

The map() method calls a callback function on every element of an array and returns a new array that contains the results.

The map() method takes two named arguments, the first one is required whereas the second one is optional.

Syntax:

const newArr = oldArr.map(function(currentValue, index, array) {
  // Do stuff with currentValue (index and array are optional)
});

newArr - the new array that is returned
oldArr - the old array being operated on. This array will not be changed
currentValue - the current value being processed
index - the current index of the value being processed
array - the original array

Example:

const array1 = [1, 4, 9, 16];

// pass a function to map
const map1 = array1.map(x => x * 2);

console.log(map1);
//-------> Output: [2, 8, 18, 32]

Example:

[10, 20, 30, 40].map(function(a) {
  return a * 2;
}); 
//-------> Output: [20, 40, 60, 80]

ES6 Example:

const arr = [1, 2, 3, 4];

const newArray = arr.map(element => {
  return element * 2;
});

const newArrayOneLiner = arr.map(element => element * 2);

console.log(arr); // [1, 2, 3, 4]
console.log(newArray); // [2, 4, 6, 8]
console.log(newArrayOneLiner); // [2, 4, 6, 8]

Use `.reduce()` to reduce an Array to a value

The reduce() method executes a reducer function (that you provide) on each element of the array, resulting in a single output value. The reduce() method executes a provided function for each value of the array (from left-to-right).

The return value of the function is stored in an accumulator (result/total).

Note: reduce() does not execute the function for array elements without values.

This method does not change the original array.

Syntax:

array.reduce( function(total, currentValue, currentIndex, arr), 
initialValue )

This method accepts five parameters:

function(total, currentValue, index, arr): It is the required parameter and used to run for each element of the array. It contains four-parameter which are listed below:
total: It is a required parameter and used to specify the initialValue, or the previously returned value of the function.
currentValue: It is a required parameter and used to specify the value of the current element.
currentIndex: It is an optional parameter and used to specify the array index of the current element.
arr: It is an optional parameter and used to specify the array object the current element belongs to.
initialValue: It is an optional parameter and used to specify the value to be passed to the function as the initial value.

[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }) //=> 100
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }, 100) //=> 200

Example

Subtract the numbers in the array, starting from the beginning:

var numbers = [125, 20, 25, 30];

document.getElementById("demo").innerHTML = numbers.reduce(myFunc);

function myFunc(total, num) {
  return total - num;
}
//=> 50

Let's see how .reduce() works. The callback would be invoked four times, with the arguments and return values in each call being as follows:

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue
})

callback iteration	accumulator	currentValue	currentIndex	array	returnValue
first call	0	1	1	[0, 1, 2, 3, 4]	1
second call	1	2	2	[0, 1, 2, 3, 4]	3
third call	3	3	3	[0, 1, 2, 3, 4]	6
fourth call	6	4	4	[0, 1, 2, 3, 4]	10

Use `sort()`

The sort() method sorts the elements of an array in place and returns the sorted array.

Syntax

arr.sort([compareFunction])

Paramaters:
compareFunction is optional. It specifies a function that defines the sort order.
firstEl, the first element for comparison.
secondEl, the second element for comparison.

To sort an array of objects by the values of the object’s properties, you use the sort() method and provide a comparison function that determines the order of objects.

Example

Suppose that you have an array of students objects as follows:

let students = [
    {
        firstName: 'Johnny',
        lastName: 'Lee',
        age: 20,
    },

    {
        firstName: 'Anna',
        lastName: 'Zax',
        age: 19,

    },

    {
        firstName: 'Zion',
        lastName: 'Sanches',
        age: 22,

    }
];

The following statement snippet sorts the students array by ages in ascending order:

students.sort((a, b) => {
    return a.age - b.age;
});

where to display the students, you can use the forEach() method:

studetns.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});

Output:

Anna Zax 19
Jonny Lee 20
Zion Sanchez 22

To sort the students by ages in descending order, you just need to reverse the order in the comparison function like this:

students.sort((a, b) => b.age - a.age);

students.forEach((e) => {
    console.log(`${e.firstName} ${e.lastName} ${e.age}`);
});

output:

Zion Sanchez 22
Jonny Lee 20
Anna Zax 19

Conclusion

We saw how map(), filter(), reduce() and sort() can ease the life of a developer by reducing the number of unnecessary explicit loops and empty array declarations. Try replacing your for loops with these state-of-the-art functions whenever you get a chance. More documentation can be found here.

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

Web form

Ivana — Sun, 28 Mar 2021 21:20:08 +0000

Web forms are a very powerful tool for interacting with users. It's one of the main points of interaction between a user and a web site or application.

Forms allow users to enter data, which is generally sent to a web server for processing and storage, or used on the client-side to immediately update the interface in some way.

A web form's HTML is made up of one or more form controls (sometimes called widgets).

Let's make a local copy of our HTML template — you'll enter your form HTML into here.

<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <title>Test page</title>
  </head>

  <body>
    <p>Hello, this is a test page!</p>
  </body>

</html>

Forms start with <form> container element, specifically for containing forms that supports some specific attributes to configure the way the form behaves. The standard practice is to set at least the action and method attributes like this:

<form action="/my-handling-form-page" method="post">
 <ul>
  <li>
    <label for="name">Name:</label>
    <input type="text" id="name" name="user_name">
  </li>
  <li>
    <label for="mail">E-mail:</label>
    <input type="email" id="mail" name="user_email">
  </li>
  <li>
    <label for="msg">Message:</label>
    <textarea id="msg" name="user_message"></textarea>
  </li>
 </ul>
</form>

The action attribute defines the location (URL) where the form's collected data should be sent when it is submitted.
The method attribute defines which HTTP method to send the data with (get or `post).

Let's add the above <form>element into your HTML <body>. On the <input> element, the most important attribute is the type attribute, it defines the way the element appears and behaves.

In our example, we use the value <input/text> , it's a single-line text field that accepts any kind of text input.

For the second input, we use the value <input/email>, which defines a single-line text field that only accepts a well-formed e-mail address.

The <input> tag is an empty element, that doesn't need a closing tag. <textarea> is not an empty element, it should be closed with the proper ending tag. To define the default value of an <input> element you have to use the value attribute like this:
<input type="text" value="by default this element is filled with this text">

To define a default value for a <textarea>, you put it between the opening and closing tags of the <textarea> element, like this:
<textarea>and by default it will be text</textarea>

The `button` element

The <button> element accepts a type attribute - one of three values: submit, reset, or button.

A click on a submit button (the default value) sends the form's data to the web page defined by the action attribute of the <form> element.
A click on a reset button resets all the form widgets to their default value immediately.
A click on a button is just a clickable button.

Sending form data to your web server

The last part is to handle form data on the server side. The <form> element defines where and how to send the data thanks to the action and method attributes.

We provide a name to each form control. It tells the browser which name to give each piece of data and, on the server-side, they let the server handle each piece of data by name. The form data is sent to the server as name/value pairs.

To name the data in a form you need to use the name attribute on each form widget that will collect a specific piece of data. In our example, the form will send 3 pieces of data named "user_name", "user_email", and "user_message". That data will be sent to the URL "/my-handling-form-page" using the HTTP POST method.

This form with added styling can be found here

Next Steps

We will need to add some form validations.

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

Visualize with React Chart Race

Ivana — Mon, 22 Mar 2021 00:48:17 +0000

Using a Chart Library that consolidates and presents data visually might help people to understand a large amount of information and make better business decisions. Using the right type of chart is the decision to make when you want to present data. Those are some charts I have used:

Chartjs- Simple JavaScript charting for designers & developers
Google Charts - Google chart tools are powerful, simple to use, and free
D3 - JavaScript library for manipulating docs based on data

The animated bar chart race is one of my favorite visualizations and it helps you for example to visualize the change in trends over time. This type of animation has been around for a while it's very popular on social media as they provide a holistic data story/insight in an easy-to-understand chart.

A bar chart race contains an animated order of bars that display the value of data at a different moment in time. You can make your own bar chart race without coding with Flourish - platform for data visualization and storytelling.

.
You will need to Create Flourish Account, Open up the Bar Chart Race Template, and format the data to be imported to Flourish, you can Download the formatted data and Import directly following the structure in the file.

Sometimes, in the software we build, we find that we have to deal with data sets that cannot be viewed clearly unless we visualize it. Depends on the data set after knowing what you are looking for, you will need to surf for the dataset that can be used using different sources such as web scraping or for example use Python that can allow us to scrape websites effectively.

I was looking for NBA Season Leaders - ESPN Rating
data sets, and for this project I came across a bar chart race visualization library called React Chart Race.

React Chart Race

I really like this animated bar chart race React Chart Race I found while I was looking to show the top NBA Players ranked visually for the NBA-stats project I was building.

The animated bar chart race helps you visualize your changing data and it's quite easy to understand. A rising or decreasing bar moves up or down along with the animation.

Installation

npm install --save react-chart-race

Import

import ChartRace from 'react-chart-race';

Simple Usage

An element must consist of 4 variables: id, title, value, color, I wanted to have those bars set to color that is the exact NBA hex color code of the Player's Team NBA Team Color Codes
. I manually set values from 2020-2021 NBA Season Leaders - ESPN Rating in order to have Players ranked, I choose the top 6 Players, but it depends on you to chose and add or remove it.

To learn more follow this link for the rest of the NBA hex color codes for all of your favorite NBA team color codes.

Next Steps

We will need to setState for the animation to work.

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

Let’s deploy the starter Gatsby template

Ivana — Sun, 14 Mar 2021 01:19:36 +0000

Gatsby and Netlify Form integration

This is an example site integrating Netlify’s contact form handling with Gatsby:

Adding Forms

Gatsby is built on top of React. So anything that we can do with a React form is possible in Gatsby. Additional details about how to create React forms can be found in the React forms documentation (which happens to be built with Gatsby!)
How to get started documentation can be found here

Integrating Netlify Form Handling in Gatsby

Example for integrating a basic contact form with Netlify’s form handling feature. Demo: https://gatsby-netlify-form-example-v2.netlify.com/

Features: Basic form submission. Example use controlled form to offer more flexibility.

Deploy

To Deploy on Netlify you will need to follow few steps:

Connect to Github
Configure your site - Save and Deploy (change your Repository name)

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

JS Fundamentals: Arrays

Ivana — Mon, 08 Mar 2021 01:51:11 +0000

Introduction

Arrays are a simple data structure for storing lots of similar items. Arrays are used to store multiple values in a single variable, and variable can store only one value. All programming languages uses arrays.

Common operations

Create Arrays

An Array is a list, with the items listed in a particular order, surrounded by square brackets [].
To declare an array, define the variable type with square brackets:

['This', 'is', 'an', 'array', 'of', 'strings.'];

The members or elements in an Array can be data of any type in JavaScript:

['Hi there!', 502, null, NaN];

Arrays are ordered, meaning that the elements in them will always appear in the same order. So for example the Array [1, 2, 3, 4] is different from the Array [4, 3, 2, 1].

Just like any other type of JavaScript data, we can assign an Array to a variable:

const primes = [2, 3, 5, 7, 11, 13,]; 
const shows = ['Game of Thrones', 'True Detective', 'Empire'];

We can find out how many elements an Array contains by checking the Array's built-in length property:

const myArray = ['This', 'array', 'has', 5, 'elements'];
myArray.length;
// => 5

let fruits = ['Apple', 'Banana']
console.log(fruits.length)
// 2

Access the Elements in an Array

Every element in an Array is assigned a unique index value that corresponds to its place within the collection. The first element in the array is at index 0, the fifth element at index 4, and the 128th element at index 127, and all can be manipulated with various methods.

To access an element, we use the computed member access operator - "square brackets", most people just call it bracket notation or the bracket operator.

const winningNumbers = [32, 9, 14, 33, 48, 5];
// => undefined

winningNumbers[0];
// => 32

winningNumbers[3];
// => 33

Add Elements to an Array

JavaScript allows us to manipulate the members in an Array with .push() and .unshift() methods.

With the .push() method, we can add elements to the end of an Array:

const fruits = ["Apple", "Banana", "Orange"];

fruits.push("Lemon");
// => 4

fruits;
// => ["Apple", "Banana", "Orange", "Lemon"]

We can also .unshift() elements onto the beginning of an Array:

const cities = ['New York', 'San Francisco', 'Atlantic City'];

cities.unshift('Los Angeles');
// => 3

cities;
// => ["Los Angeles", "New York", "San Francisco", "Atlantic City"]

Remove Elements from an Array

As complements for .push() and .unshift(), respectively, we have .pop() and .shift().

The .pop() method removes the last element in an Array, destructively updating the original Array:

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

days.pop();
// => "Sun"

days;
// => ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat"]

The .shift() method removes the first element in an Array, also mutating the original:

const days = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];

days.shift();
// => "Mon"

days;
// => [Tue", "Wed", "Thu", "Fri", "Sat", "Sun"]

Spread Operator - Important feature of ES6

ECMAScript 6 (ES6 or ECMAScript 2015 ) was the second major revision to JavaScript. ES2015 introduced the spread operator, which looks like an ellipsis: ....

The spread operator allows us to spread out the contents of an existing Array into a new Array, adding new elements but preserving the original:

const coolCities = ['New York', 'San Francisco'];

const allCities = ['Los Angeles', ...coolCities];

coolCities;
// => ["New York", "San Francisco"]

allCities;
// => ["Los Angeles", "New York", "San Francisco"]

Arrow Functions - Important feature of ES6

Arrow functions allow a short syntax for writing function expressions. You don't need the function keyword, the return keyword, and the curly brackets.

// ES5
var x = function(x, y) {
   return x * y;
}

// ES6
const x = (x, y) => x * y;

`map`, `reduce`, `filter` methods

These are the collection-processing methods you should memorize and practice heavily.

Now that you have written map and reduce, here's the big reveal: JavaScript already has these methods built into its Array data type!

Use map to Transform an Array

[10, 20, 30, 40].map(function(a) {
  return a * 2;
}); //=> [20, 40, 60, 80]

Use reduce to Reduce an Array to a Value

[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }) //=> 100
[10, 20, 30, 40].reduce(function(memo, i) { return memo + i }, 100) //=> 200

JavaScript loves functions and by being able to pass functions around comfortably, we can take advantage of methods that JavaScript gives us! Given what you know about writing your own map and reduce functions, read the JavaScript documentation and make sure you know how to use the versions JavaScript provides you: map, reduce

`filter()` method

The filter() method creates a new array with all elements that pass the test implemented by the provided function.

The syntax snippet is provided as:

let newArray = arr.filter(callback(currentValue[, index[, array]]) {
  // return element for newArray, if true
}[, thisArg]);

Parameters:

callback - the function is a predicate, to test each element of the array. Return a value that coerces to true to keep the element, or to false otherwise. callback is invoked with three arguments:

the value of the element
the index of the element
`the Array object being traversed

It accepts three arguments:

currentValue
The current element being processed in the array.
Here, we're told that on an Array (arr), we add a .filter, and then, between (), we provide a callback and a thisArg.

index Optional
The index of the current element being processed in the array.

array Optional
The array filter was called upon.

thisArg Optional
Value to use as this when executing callback.

JavaScript will move through the Array that filter() was invoked on and pass the element, the index of that element, and the whole array to the callback.

We don't have to add parameters for index or array, or element even. We can name our parameters whatever we like. JavaScript always makes those 3 arguments available to our callback. See examples below to see how we can play with this. Now, what happens in a callback?

The documentation tells us:
Function is a predicate, to test each element of the array. Return true to keep the element, false otherwise. It accepts three arguments

This function runs and has access to the parameters we just explained.

If the call to callback returns true, that element will be added to an invisible "keeper" Array; else, it's left out.

We can use the element or the array or the index or (more typically) some interaction between them to create an expression that returns a Boolean value from the callback.

Example: Find all prime numbers in an array

The following example returns all prime numbers in the array

To learn more, check the official MDN documentation and JS examples:

Hoisting in JavaScript — let, const, and var

Ivana ・ Jun 17 '20

#javascript #react #ruby #rails

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

Median of Dynamic Stream of Integers

Ivana — Sun, 28 Feb 2021 04:40:09 +0000

Introduction

Running median, moving median, continuous median, or median from the dynamic stream of integers are all the names for the same and well-known coding problem. You are given with dynamic stream of integers, coming one after another randomly and unsorted and you have to find the median of the current received set of integers.

1. Let's first define what is median

The median is the "middle" value of a sorted set of numbers. To find the median, you must first sort your set of integers in non-decreasing order. Then, if there is:

odd number of integers, the middle element is the median. For example, in the ordered set: 2, 5, 6, 8, 10 the median is 6.
even number of integers, there's no middle element; the median is computed as the average of the two middle elements. Example in the ordered set: 3, 4, 7, 8, 10, 15 the median is (7 + 8) / 2 = 7.5.

2. Formalize the dynamic stream statement

We need to write a function to get a median number of dynamic stream. Let's think about the dynamic stream (running/moving/continuous) median as an array of numbers that you are reading in one after another and after each number you want to print the median of all numbers.

How we are going to do this?

3. Heap Data Structure

One of the most effective ways of solving this is a Heap Data Structure.

A Heap is a special Tree-based data structure in which the tree is a complete binary tree. There are in general two types of heap Max-Heap and Min-Heap.

In a Min-Heap:

The root node has the minimum value.
The value of each node is equal to or greater than the value of its parent node.

In a Max-Heap:

The root node has the maximum value.
The value of each node is equal to or less than the value of its parent node.

Actually, the Heap approach is the perfect solution for our problem because it allows us to efficiently pull out the biggest element (maximum value) or smallest element (minimum value):

When a number comes we will first compare it with the current median and put it to the appropriate Heap. If the new integer value is less than the current median, we put it into the max-heap else we put it to the min-heap.

4. Let's turn to the code

In Java, the PriorityQueue class represents a heap. As per definition PriorityQueue in Java is a special type of queue wherein all the elements are ordered as per their natural ordering or based on a custom Comparator supplied at the time of creation. Let's divide the solution into 4 main steps.

STEP 1. `getMedians` function

That's going to take an integer array and return an array of doubles like this:

STEP 2. `addNumber` method

that will take in number, priorityQueue of the lowers and highers like this:

STEP 3. `rebalance` method

Rebalancing works by moving the largest element from the max-heap to the min-heap, or by moving the smallest element from the min-heap to the max-heap:

STEP 4. `getMedian` method

This method will look into two Heap sizes, if they are different take the top element from the larger Heap. If they are the same size we will need to average them:

Thank you for reading!

Github repo can be found here.

To connect with me please check my Github, LinkedIn or Twitter.

How to Build a Spoken Universal Translator with Node-RED and Watson AI services

Ivana — Mon, 22 Feb 2021 01:43:26 +0000

What is Node-RED?

Node-RED is a low-code programming environment for event-driven applications. It's a programming tool for wiring together hardware devices, APIs, and online services in new and interesting ways.

At the core of Node-RED is Node.js a JavaScript runtime environment built on Chrome's V8 JavaScript engine. Top 5 reasons to use Node-RED can be found here.

Let's build a spoken universal translator using Node-RED and Watson AI services

We will build a universal translator by using a Node-RED Starter application to connect with those Watson AI services:

Speech to Text
Language Translator
Text to Speech

The Node-RED Starter application includes a Node-RED Node.js web server and a Cloudant database to store the Node-RED flows.

We will learn how to:

Create a Node-RED starter app running in IBM Cloud. Create instances of the Watson services: Speech to Text, Text to Speech, and Language Translator and how to connect those services to your Node-Red app.
Launch and configure the Node-RED visual programming editor.
Install additional Node-RED nodes and create flows that use the Watson services to create the spoken universal translator.

Prerequisites

This app can be completed using an IBM Cloud Lite account.

Create an IBM Cloud account
Log into IBM Cloud

Step 1 – Let's create a Node-RED Starter App

Follow these steps to create a Node-RED Starter application in IBM Cloud.

Log in to your IBM Cloud account.
Click on the Catalog
Search for node-red
Select the Starter Kits category, then select Node-RED Starter.
Enter a unique name for your application, it will be part of the application URL :
The Region, Organization, and Space fields will be pre-populated with valid options for your IBM Cloud account. I have a Lite account and I just accepted the defaults.
In the Selected Plan section, choose Lite.
Click the Create button.

The Node-RED Starter application will be provisioned in the IBM Cloud region that was specified. This process is called staging an application.

Step 2 – Let's create the Watson AI service instances

You can add Watson AI microservices to your application as APIs, through instances that you can manage through credentials. We will create and bind these microservices to your Cloud Foundry application. There are three Watson AI services, all available in the IBM Cloud Lite tier, needed to build a universal translator:

Watson Speech to Text
Watson Text to Speech
Watson Language Translator

In IBM Cloud Catalog search for speech and navigate to the AI category:

Select Speech to Text, and click the Create button.

Return to the AI category in the IBM Cloud Catalog, and select Text to Speech, and click the Create button:

In IBM Cloud Catalog, search for a translator, navigate to the AI category, select Language Translator, and click the Create button, I already had the one:

Step 3 – Let's connect the Watson AI Services to the Node-RED Starter Application

In IBM Cloud Dashboard navigate to the Apps section and select Node-RED universal-translator (your apps unique name):

The Applications Details opens, search for the Watson services that you created in the previous step and press the Connect button. Once it's connected you will have those Services ( Speech to Text, Text to Speech, and Language Translator ) connected like this:

Step 4 – Launch your Node-RED app and open the Node-RED visual programming editor

Node-RED is an open-source Node.js application that provides a visual programming editor that makes it easy to wire together flows.

The first time you start the Node-RED app, it will help you configure the visual programming editor. Once the Green Running icon appears, click the View App URL link, a new browser tab opens to the Node-RED start page:

A new browser tab opens to the Node-RED start page.

Use the setup wizard to secure your editor with a user name and password and to browse and add more nodes. Click the Finish button to proceed:

Click the Go to your Node-RED flow editor button to launch the Node-RED flow editor:

Click the Person icon in the upper right corner, and Sign in with your new username and password credentials and you will get a screen like this:

The Node-RED Visual Programming Editor has a left side with a palette of nodes that you can drag onto the flow and wire nodes together to create a program.

Step 5 – Let's install Additional Node-RED Nodes

The universal translator that we are building needs a microphone to record your message and the ability to play the audio of the translation. We can add nodes to the Node-RED palette that add these capabilities, such a great thing!

Click the Node-RED Menu, and select Manage palette
Select the Install tab, and search for browser-utils and Install the node-red-contrib-browser-utils node.

Search for play-audio, find the node-red-contrib-play-audio node, and click the Install button.

Step 6 – Build the flows for the universal translator

Node-RED allows you to drag and drop Nodes from the left palette onto your flow canvas and wire them together to create programs.

Speech-to-Text flow

Click and drag a microphone node to your flow.

Click and drag a Speech to Text node to your flow. Double-click it and select US English.

Click and drag a Debug node to your flow. Double-click it and have it output msg.transcription.

Wire the nodes together as shown in the screenshot below.

Click the red Deploy button.

Select the tab to the left of the microphone node and allow your browser access to the microphone on the laptop.

Record a message, like “wow this is so much fun!”

Text-to-Speech flow

Now, let’s build the Text-to-Speech flow.

Click and drag an Inject node to your flow and double-click it and change the payload type to a string and type a message.
Click and drag a Text to Speech node to your flow, double-click it and select US English.
Click and drag a Change node to your flow, double-click the Change node and assign the msg.payload to msg.speech.
Click and drag a play-audio node to your flow.
Wire the nodes together as shown in the screenshot below:
Press the Deploy button (the red one).
Select the tab to the left of the Inject node. The audio of the message will play.

Language Translator flow

The universal translator will use the recorded transcript as the input to the language translator node, and send the foreign language to the Text to Speech node.

Click and drag another Change node to your flow, double-click it and assign msg.payload to msg.transcription like this:
Click and drag a language translator node to your flow. Double-click it and select English as the Source and Croatian
as the Target.

Click and drag a Debug node to your flow.
Double-click the Text to Speech node, and change the language to Spanish and select a voice (here I clicked and tried Croatian language but it was not available, doesn’t show it on the list and I'll stick with Spanish)

This is how your final flow should look like:

Finally, click the Deploy button (the red one) on the right top corner!

Final Step – let's test universal translator

Select the tab to the left of the microphone node and allow your browser access to the microphone on the laptop and record a message.

You can follow the process and view the translations in the Debug tab of Node-RED:

Full documentation and more details on how to build Node-RED starter application using Watson services in IBM Cloud can be found here

To connect please check my Github, LinkedIn or Twitter.

Thank you for reading!

Strapi Quickstart 🚀

Ivana — Mon, 15 Feb 2021 04:56:58 +0000

Strapi is the leading open-source headless content management system or headless CMS. A headless CMS provides a way to author content, but instead of having your content coupled to a particular output (like web page rendering), it provides your content as data over an API.

Strapi's name comes from the word Bootstrap and helps Bootstrap your API.

A full list of Headless Content Management Systems for Jamstack Sites can be found here.

Strapi is 100% Javascript and fully customizable. From it's documenation:

Strapi is a flexible, open-source Headless CMS that gives developers the freedom to choose their favorite tools and frameworks while also allowing editors to easily manage and distribute their content.

By making the admin panel and API extensible through a plugin system, Strapi enables the world's largest companies to accelerate content delivery while building beautiful digital experiences.

Features

Custom Content Structure

You can generate the admin panel in a few clicks and get your whole CMS setup in a few minutes.

Easy Content Management

Strapi's admin panel gives you an intuitive interface to create, edit and delete your content.

Developer-Friendly API

Strapi provides you with an API that will easily match your needs and you can Fetch any data you might need via a REST API or GraphQL endpoint.

Roles & Permissions

Strapi has a built-in user system that allows you to manage who can access what.

Customization

Every part of your application can be easily customized.

🚀 Getting Started

1. Install Strapi and Create a new project

npx create-strapi-app my-project --quickstart

Due to dependency conflict, I received an error right there and needed to fix dependencies. This works for me:

npm install --save --legacy-peer-deps

Description of `--legacy-peer-deps command is to ignore all peerDependencies when installing, in the style of npm version 4 through version 6.

More about npm install and dependencies can be found in Documentation for the npm registry, website, and command-line interface

2. Create an Administrator user

Navigate to http://localhost:1337/ and you will see:

Since I got the not Found error page http://localhost:1337/admin I had to run npm run build for building admin UI:

to be able to complete the form to create the first Administrator user when visiting http://localhost:1337/admin/auth/register-admin:

You will also need to npm run strapi develop to have "+ Create new collection type" link. For me, this link won't appear at all. After I run npm run strapi develop the problem was solved and I was able to click the link "+ Create new collection type":

3. Create a Restaurant Content-Type

Navigate to PLUGINS - Content Type Builder (opens new window), in the left-hand menu.

Click the "+ Create new collection type" link
Enter restaurant, and click Continue
Click the "+ Add another Field" button
Click the Text field
Type name in the Name field
Click over to the ADVANCED SETTINGS tab, and check the Required field and the Unique field
Click the "+ Add another Field" button
Click the Rich Text field
Type description under the BASE SETTINGS tab, in the Name field
Click Finish
Click the Save button and wait for Strapi to restart, you should have this created:

What’s next?

🚀Let's see what's next amazing coming after adding more features like:

4. Create a Category Content type

5. Add content to "Restaurant" Content Type

6. Add categories to the "Category" Content Type

7. Set Roles and Permissions

8. Publish the content

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

Building Ruby on Rails app

Ivana — Mon, 08 Feb 2021 02:13:12 +0000

Ruby on Rails app with Authorization and Authentication

Ruby on Rails is the most popular server-side web application framework that is written in Ruby (open-source programming language). It's powerful and magical! Let's work through what makes it powerful and start that initial setup and learn more about Authorization and Authentication security concepts.

Step 1.

Create a new store Rails application skipping a test:

$ rails new store --skip-test-unit
$ cd shop
$ rake db:create

Step 2.

Add Bootstrap and styles
Let’s add a ‘bootstrap-sass’ gem to our Gemfile:

gem 'bootstrap-sass', '~> 3.3', '>= 3.3.6'

and bundle everything with:

bundle install

Add some styles to our store application, rename the application.css to the application.scss under the app/assets/stylesheets to be able to use imports. Add these lines after the manifest:

@import "bootstrap";
@import "bootstrap-sprockets";

#main-container {
  position: relative;
  padding-top: 50px;
  padding-bottom: 50px;
}

.product-block {
  width: 750px;
}

.btn {
  font-family: Impact, fantasy;
}

body {
  background: #f19797;
  font-family: Impact, fantasy;
}

th {
  background-color: #333333;
  color: white;
}

td {
  background-color: #f8f2f2;
  color: white;
}

And add the following into assets/javascript/application.js file, this line:

require("bootstrap")

Step 3. Edit views

Replace the content of your views/layouts/application.html.erb file with this:

<!DOCTYPE html>
<html>
  <head>
    <title>Store</title>
    <%= csrf_meta_tags %>
    <%= csp_meta_tag %>

    <%= stylesheet_link_tag 'application', media: 'all', 'data-turbolinks-track': 'reload' %>
    <%= javascript_pack_tag 'application', 'data-turbolinks-track': 'reload' %>
  </head>

  <body>
  <nav class="navbar navbar-inverse navbar-top navbar-fixed-top">
    <div class="container-fluid">
      <div class="container">
        <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="/">Store app</a>
    </div>
      </div>
    </div>
  </nav>
  <div id="main-container" class="container">
    <%= yield %>
    </div>
  </body>
</html>

And add those 2 methods(bootstrap_classs and flash_messages) to app/helpers/application_helper.rb which will be used to display messages:

module ApplicationHelper
  def boostrap_class(alert)
    { success: 'alert-success', error: 'alert-danger', notice: 'alert-success', warning: 'alert-warning',
      danger: 'alert-danger', alert: 'alert-danger' }[alert.to_sym]
  end

  def flash_messages(_opts = {})
    flash.each do |msg_type, message|
      concat(content_tag(:div, message, class: "alert #{boostrap_class(msg_type.to_sym)} fade in") do
        concat(content_tag(:button, id: "close-button", class: "close", type: :button, data: { dismiss: 'alert' }, "aria-label" => :Close) do
          concat content_tag(:span, "&times;".html_safe, "aria-hidden" => true)
        end)
        concat message
      end)
    end
    nil
  end
end

Step 5. Add welcome page

Create dashboard_controller.rb file under app/controllers folder and add the following code:

class DashboardController < ApplicationController
  def index
  end
end

Create a app/views/index.html.erb file and make it looks like this:

<%= flash_messages %>
<div class="block">
    <header class="header-group">
        <h2>Welcome to Rails Authentication and Authorization!</h2>
    </header>
    <div class="row">
        <div class="col-md-12">
        </div>
    </div>
</div>

The next step would be to clear and add the following code to routes.rb file under the config folder:

Rails.application.routes.draw do
  root 'dashboard#index'
end

Step 5. Start an application

Run rails s command and got to http://localhost:3000 browser, it should look like this:

There are few more steps such as creating a product scaffold, add bootstrap to product files, and add products links to the navigation bar and when it's all done if you go to http://localhost:3000/products/new you will see:

Step 6. Add authentication and authorization

Let’s move on to a very important part – authentication and authorization.

The next step will be to add authentication and authorization, but I would like first to deep dive into this concept which is very often misunderstood.

Breaking Down the Authentication and Authorization Problem

It's important to have a general understanding of their meaning. We can divide the "who can see what" problem into four smaller security concepts:
Identification Who you claim to be
Authentication Validation that you are you who you claim to be
Access Policy Association of roles based on your identity, what given roles are allowed to do
Authorization Mechanisms to enforce the Access Policy

Examples of Authentication and Authorization FLOWS

If you were to enter your local bank branch, here's how these concepts would apply.

First - Identification

Assert who you are by stating your name and showing an ID.

Second - Authentication

Verify your identity claim by verifying you possess a secret that only the "real you" would know and which has been established prior to this moment like a password or matching signature.

Third - Access Policy

Interlude At this point the bank knows that they are dealing with a verified entity. From the perspective of their system, all verified entities act with respect to roles. At the point of Authentication, the verified entity's collection of roles is also retrieved. This is the point where the association of roles based on your identity was given.

Fourth - Authorization

You then proceed to withdraw enough money. At this point, the Access Policy ("As an owner of an account, the owner is permitted to withdraw money from that account provided") is implemented in an activity known as Authorization. Since your authentication step validated you in the role of owner, this transaction proceeds.

If you try again, your roles owner and customer have a "NO ACCESS" Access Policy as relates to the bank's vault and you will not be Authorized and cannot enter the bank vault.

Commonly used Gems for authentications are: Devise, OmniAuth, Authlogic AND for authorization: CanCanCan, Pundit, more gem options can be found in Ruby Toolbox.

This FLOW applies to users of the store app. We will define its access policy and verify the identity of users.

What’s next?

The next step will be to add authentication and authorization using some of the popular rails Gems.

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

Weather App Using React

Ivana — Sun, 31 Jan 2021 03:39:02 +0000

Tech Stack & Features

The weather app project demonstrates how to use:

-Create React App and set up a modern web app by running one command

-Open Weather Map API, 5-day forecast available at any location or city. It includes weather forecast data with a 3-hour step. The forecast is available in JSON or XML format.

-OpenWeatherFont (owfont) Icons, designed to match to weather condition codes from Open Weather Map API.

-Moment.js to parse, validate, manipulate, and display dates and times in JavaScript

-Bootstrap the world’s most popular framework for building responsive, mobile-first sites.

Those are weather app features:

Shows the 5-day forecast for a specific city
Include a weather icon temperature reading and description of weather conditions ☀️🌤⛈❄️

Getting Started

STEP 1

To get started, run the following code in your terminal:

create-react-app weather-app

And right on a begging after I run npm start I get this error with instruction to fix the dependency tree, try following the steps below in the exact order:

I tried to follow and troubleshoot but everything fails, so I created a .env file in the root directory and added SKIP_PREFLIGHT_CHECK=true, and relaunch with npm start.

This worked for me and I could see my React app update live on a localhost server:

STEP 2

WeekContainer.js - class component was created as a new file in the src folder and imported into App.js:

import React, { Component } from 'react';
import './App.css';
import WeekContainer from './WeekContainer';

class App extends Component {
  render() {
    return (
      <div className="App">
        <WeekContainer />
      </div>
    );
  }
}

export default App;

Live updates on a local host look like this, and everything is properly rendered on screen:

STEP 3

How to get Weather Data for WeekContainer

WeekContainer's "job" will be to hold 5 “weather cards”, each representing a day of the week.

In order to do this, we will first need to fetch the data from the API. OpenWeatherMap is one of my favorite API providing weather information. There are few steps to getting an API key that will be explained below.

STEP 4

Getting an API Key

-Sign up for an account on the OpenWeatherMap website here.

-You will receive an email with an API key that will activate within a few hours of receiving the email (from my experience it will only take 10 minutes).

This is an example of an API call:

-Create a file (maybe called keys.js) within the src folder and add your API key to it and add the newly created file to your .gitignore so once its push to git it will be “ignored”.

-Import the hidden file within WeekContainer.js so you can use string interpolation to use your API key in the fetch request without giving away your API key on GitHub, hope this will work well!

Here, we’re specifying for the response to be specifically for zip code 11001:

import React from 'react';
import apiConfig from './keys';

class WeekContainer extends React.Component {
  render() {


    const weatherURL =
      `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
//You can search weather forecast with data by city name

    return (
      <div>
        <h1>We will have a Weather app soon!</h1>
      </div>
    )
  }
}

export default WeekContainer;

More info about Open Weather Map API' available parameters can be found here

STEP 5

Fetching from the Open Weather Map API

Now it’s time to fetch! Let's create a componentDidMount method with the following code:

componentDidMount = () => {
      const weatherURL =
        `http://api.openweathermap.org/data/2.5/forecast?zip=11001${apiConfig.owmKey}`
      fetch(weatherURL)
        .then(res => res.json())
        .then(data => console.log("Data List Loaded", data.list))

This is just a beginning and I will write more about how to Filter and render Card for each day and add Bootstrap.

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

Getting started with Gatsby

Ivana — Sun, 24 Jan 2021 06:23:55 +0000

Gatsby is a React-based open-source framework for creating websites and apps. It's the #1 fastest growing framework, great whether you're building a portfolio site or blog, or a high-traffic e-commerce store or company homepage.

Let's start

1. Create a new site

npm init gatsby

Follow the prompts to choose your preferred CMS, styling tools, and additional features:

2. Start the local development server

Start by going to the directory with cd my-gatsby-site
and start the local development server with:

npm run develop

Gatsby will start a hot-reloading development environment accessible by default at http://localhost:8000. Usually, npm run develop command can be used to build your site into development mode without any issues. But, sometimes errors happen and didn't work for me right away, I get this error returned:

This error tells that "trackingId" can't be set as empty...

Invalid plugin options for "gatsby-plugin-google-analytics":
- "trackingId" is not allowed to be emptySetting up Google Analytics

We use gatsby-plugin-google-analytics to track site activity and provide insights into how users access your website.

Let's get your Google Analytics `trackingId`

Sign in to your Google Analytics account.
Click Admin.
Select an account from the menu in the ACCOUNT column.
Select a property from the menu in the PROPERTY column.
Under Property, click Tracking Info > Tracking Code. Your Tracking ID is displayed at the top of the page.

Once you get trackingId go to your gatsby-config.js file and replace it:

Run npm run develop and Gatsby will start a development environment accessible by default at http://localhost:8000 mine looked like this:

3. Make changes

Now you’re ready to make changes to your site by editing the home page in src/pages/index.js, saved changes will live reload in the browser.

This was a quick start, for intermediate to advanced developers. For a gentler intro to Gatsby and more details check this tutorial.

What’s next?

Add more features

Install and configure additional plugins to quickly add additional functionality to your site.

Deploy your site using Gatsby Cloud.

Can't wait to connect with Gatsby community members from all over the world and learn about the newest developments from the Gatsby team, March 2-3, 2021 ONLINE, Join me here!

To connect with me please check my Github, LinkedIn or Twitter.

Thank you for reading!

DEV Community: Ivana

Django Web Framework (Python)

Install Django

Get the latest development version

Install Python

What does Django code look like?

Sending the request to the right view (urls.py)

Handling the request (views.py)

Main features

Creating a project

JavaScript Array methods: Filter, Map, Reduce, and Sort

Term "callback"

Let's learn more about Array methods: Filter, Map, Reduce, and Sort

Use .filter() to filter an Array

Syntax:

Example

Example:

Example:

Use .map() to transform an Array

Syntax:

Example:

Example:

ES6 Example:

Use .reduce() to reduce an Array to a value

Syntax:

Example

Use sort()

Syntax

Example

Conclusion

Web form

The button element

Sending form data to your web server

Next Steps

Visualize with React Chart Race

React Chart Race

Installation

Import

Simple Usage

Next Steps

Let’s deploy the starter Gatsby template

Gatsby and Netlify Form integration

Adding Forms

Integrating Netlify Form Handling in Gatsby

Deploy

JS Fundamentals: Arrays

Introduction

Common operations

Create Arrays

Access the Elements in an Array

Add Elements to an Array

Remove Elements from an Array

Spread Operator - Important feature of ES6

Arrow Functions - Important feature of ES6

map, reduce, filter methods

Use map to Transform an Array

Use reduce to Reduce an Array to a Value

filter() method

Parameters:

Example: Find all prime numbers in an array

Hoisting in JavaScript — let, const, and var

Ivana ・ Jun 17 '20

Median of Dynamic Stream of Integers

Introduction

1. Let's first define what is median

2. Formalize the dynamic stream statement

3. Heap Data Structure

In a Min-Heap:

In a Max-Heap:

4. Let's turn to the code

STEP 1. getMedians function

STEP 2. addNumber method

STEP 3. rebalance method

STEP 4. getMedian method

Thank you for reading!

How to Build a Spoken Universal Translator with Node-RED and Watson AI services

What is Node-RED?

Let's build a spoken universal translator using Node-RED and Watson AI services

We will learn how to:

Prerequisites

Use `.filter()` to filter an Array

Use `.map()` to transform an Array

Use `.reduce()` to reduce an Array to a value

Use `sort()`

The `button` element

`map`, `reduce`, `filter` methods

`filter()` method

STEP 1. `getMedians` function

STEP 2. `addNumber` method

STEP 3. `rebalance` method

STEP 4. `getMedian` method

Let's get your Google Analytics `trackingId`