DEV Community: aidoskashenov

Syntax Podcast: JSON, JSNONP and CORS

aidoskashenov — Sun, 23 Aug 2020 14:11:09 +0000

When you try to fetch data from another source, you have to use JSON(Javascript Object Notation). JSON allows the API to be turned into string, that is very easy to move, and then after the fetch, parse it back to an object. By default two separate browser entities cannot access to one another's data, because otherwise they could make changes and pull out sensitive information. However, there are ways to share data across websites.

JSONP - is JSON with padding is an addition to a JSON format and it allows to request the API from another domain. You can only do that if the providing website gives the permission. The way it works, is that you cannot load data cross origin, but you can load Javascript cross origin, so the work around is that you have to wrap the data into a Javascript callback function and pass it that way.

CORS - stands for cross-origin resource sharing, and is a mechanism that allows restricted resources on a web page to be requested from another domain outside the domain from which the first resource was served. A web page may freely embed cross-origin images, stylesheets, scripts, iframes, and videos.
With CORS you can designate the number of URLs that can take data from your website. You can use Access-Control-Allow-Origin: * allow access to any website, however it can be very risky for your application. CORS are very important to be aware of, because one way or another, dealing with data you run into it, and you have to know how to properly deal with it.

React Hooks

aidoskashenov — Wed, 05 Aug 2020 02:21:53 +0000

React Hooks

React was created by Jordan Walke, a software engineer at Facebook, who released an early prototype of React called "FaxJS". He was influenced by XHP, an HTML component library for PHP. It was first deployed on Facebook's News Feed in 2011 and later on Instagram in 2012.It was open-sourced at JSConf US in May 2013.
However, only after 8 years, On February 16, 2019, React 16.8 was released to the public,the release introduced React Hooks.

Hooks are functions that let developers "hook into" React state and lifecycle features from function components. They make codes readable and easily understandable. Average developer spend one tenth of time writing code and the rest reading and digging through his or someone else's composure. React hooks make this process way easier, hooks don’t work inside classes ,instead they let you use React without classes.

React provides a few built-in Hooks like useState, useContext, useReducer and useEffect to name a few. They are all stated in the Hooks API Reference, useState and useEffect, which are the most used, are for controlling states and side effects respectively in React Components and useEffect

There are rules of hooks which must be followed before they can be used. Hooks should only be called at the top level (not inside loops or if statements)and they should only be called from React function components, not normal functions or class components

Essentially the biggest benefit of the React hooks is that when you use classes you end up with complex components with stateful logic. It is hard to deal with those components because they relies on the React Lifecycle methods. Instead hooks allow you to break those components into smaller functions and incapsulate them into smaller units, which you can use depending on the functionality.

The two most used React Hooks are useState and useEffect, the first basically is a substitute to class component and the second is a substitute for componentDidMount() and componentDidUpdate, however there a bunch of other useful React Hooks and ,what's even more fascinating, you can write and invent your own hooks which you can store and use in accordance to your functionality.

In conclusion we can definitely say that React Hooks is a relatively new feature, however very powerful and with a immense potential that is still growing and expanding.

Syntax Takeaways

aidoskashenov — Thu, 30 Jul 2020 23:26:04 +0000

React is a very dynamic environment, it is changing, updating and developing quite rapidly and hooks are the latest and a very significant implementation into React logic. You cannot say that hooks made classes, render props, aka previous way of doing things, obsolete, however hooks makes using React way simpler and more intuitive.The developers made possible for hooks to be opted-in so you don't have to rewrite your code completely. Before, render props there were mix-ins and they were removed.
Hooks are solving the problem of adding state to the stateless functional component. If you created a stateless functional component but then at some point you would have to add state to that component you would have to turn it into class component and it can be very difficult.
Hooks are made to inject functionality into "dumb" components. Hooks can be created by developers and implemented for specific problems along the way,there are some very popular like: Context hooks, Effect hooks, Reducer hooks and Ref hooks however, the most usable hook right now is State hooks - useState.

State Hooks
useState is a replacement of a SetState component in a class syntax. Before executing a return, useState declares a 'state' variable, that way we can 'save' some values, between invocations. It is a way substitute this.state functions. useState returns a couple of values: present state and a function that refreshing the state.

Effect Hooks
useEffect hook allows you to access the data inside the component. Effect hooks can be used as a substitute to the lifecycle methods like: "Component Did Mount", "Component did Update" and "Component will Unmount". What it does is, when you have an "unpure" function and you don't have a React component,
you do have to write code for those components. Effect hook solves this problem. Also, previously you had to pass logic into each component and it could lead to potential difficulties, however now, you can build a special hook to store that logic.

Reducer Hooks
useReducer hook is a less used, however it allows functional components in React access to reducer functions from your state management. Reducer is a function that takes in the current state,as well as a specified action. Inside of your reducer function you can store multiple use cases. According to the use case you can access specific data return an updated state.

A reintroduction to Javascript

aidoskashenov — Sun, 26 Jul 2020 16:39:45 +0000

Reading most of the reintroduction I didn't found anything new up until, control structures, most of the things there: Numbers,Strings,BooleansandSymbols`. However I found something very interesting and for me in the introduction section, about how JS is a misunderstood language.

Unlike most programming languages, the JavaScript language has no concept of input or output. It is designed to run as a scripting language in a host environment, and it is up to the host environment to provide mechanisms for communicating with the outside world. The most common host environment is the browser, but JavaScript interpreters can also be found in a huge list of other places

This particular piece, made me understand why Javascript is such a popular programming language and is a powerful tool for programming in general.

Control Structures
The switch statement can be used for multiple branches based on a number or string:

switch (action) {
  case 'draw':
    drawIt();
    break;
  case 'eat':
    eatIt();
    break;
  default:
    doNothing();
}

Switch is essentially like if , else however it has a break keyword, a statement to 'break out' of the switch statement and continue to the next block of code. Without the break statement additional blocks may be executed if the evaluation matches the case value.

Objects
Starting in ECMAScript 2015, object keys can be defined by the variable using bracket notation upon being created.
~~~js {[phoneType]: 12345} is possible instead of just var userPhone = {}; userPhone[phoneType] = 12345.


**Arrays**
Sometimes `array.length` would not equate to the number of elements inside the `array`
~~~js
var a = ['dog', 'cat', 'hen'];
a[100] = 'fox';
a.length; // 101

If you do something like that, you will have 4 elements in the array, however the array.length will be 101

Functions
Javascript is very liberal with the use and declaration of the function overall. You don't have to pass parameters to the function upon declaration, you can pass several parameters and then pass a different number of arguments, upon invoking, and still JS will let you compile the code. So far as I know it is strictly prohibited in most of the languages.

Object.prototype is a little bit hard to wrap your head around this concept, however, as far as I understand a prototype is an instance of the parental method and whenever you are accessing the attributes of the prototype, the prototype is having most of the features and methods that we want the child to inherit.

You can use nested function to make your code cleaner to avoid congestion. You can also store your variables for the nested function inside the parental function, right above, that will make sure that you are not making excessive global functions.

.sort and .pop

aidoskashenov — Mon, 20 Jul 2020 16:32:19 +0000

Javascript has a variety of built-in Array methods that empower the developer to bend and shape huge amount of data at his will. From very simple like .length or .push to more complex, like .reduce or .every. We will take a look at a look at .pop and .sort methods.

Array.prototype.pop()

Array.prototype.pop() cuts the last element of the array and brings it back to you

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

alert(fruits); // ["Banana", "Orange", "Apple", "Mango"]

const popped = fruits.pop();

console.log(fruits);  // ["Banana", "Orange", "Apple"]

console.log(popped); // "Mango"

It is a very simple and straightforward method, however you always have to keep in mind that .pop method mutates the initial array and it can lead to a potential bug in the future, if you are using this method without awarness.

Array.prototype.sort()

Array.prototype.sort() ,whenever invoked, sorts the array in the alphabetical order, according to UTF-16 standard:

const myArray = ["Bob", "Bully", "Amy"]
myArray.sort() // myArray becomes ["Amy", "Bob", "Bully"]
console.log(myArray)

Given the number the sort method will treat them as a string and will still sort them in "alphabetical" order and not by the value of the number:

const myArray=[7, 40, 300]
myArray.sort()
console.log(myArray) //  myArray becomes [300,40,7]

This happens because Javascript sorts the array in the lexicographical order and it deems that 300 as a string comes before '40' and '7' because in lexicographical order '3' comes before '4' and '0' is just an extension.

To get the results that we need with numbers we have to pass in a sorting function as an argument to .sort method:

function sortfunction(a, b){
  return (a — b)
}

This function compares two adjacent elements by subtracting the second from the first. There are three possible outcomes: '0', '<0' and '>0'. If the outcomes equals to zero it means that the elements are equal and no swapping required. If the outcome is greater than zero than swapping is required because element a is greater than element b. If the outcome is negative that means that the elements are already in order and the swapping is not required:


const myArray = [25, 8, 7, 41]
myArray.sort(function(a,b){ 
  return a — b
}) 
console.log(myArray) //  myArray will be[7, 8, 25, 41]

However, the sort method would not have much of a use if we could sort only simple arrays consisting of Strings and Numbers. Luckily, we can use .sort method to sort complex data, like an array of objects. Say we have an array of employees with their names and retired data:

const employees=[]
employees[0] = {name: "George", age: 32, retiredate: "March 12, 2014"}
employees[1] = {name: "Edward", age: 17, retiredate: "June 2, 2023"}
employees[2] = {name: "Christine", age: 58, retiredate: "December 20, 2036"}
employees[3] = {name: "Sarah", age: 62, retiredate: "April 30, 2020"}

We can sort our employees by any property, all we have to do is pass the property as an element in our comparing function. Lets sort them by their age (which is a little bit questionable form the "political correctness" point):

employees.sort(function(a, b){
  return a.age-b.age
})

console.log(employees)

/**[
  { name: 'Edward', age: 17, retiredate: 'June 2, 2023' },
  { name: 'George', age: 32, retiredate: 'March 12, 2014' },
  { name: 'Christine', age: 58, retiredate: 'December 20, 2036' },
  { name: 'Sarah', age: 62, retiredate: 'April 30, 2020' }
]*/

We can see that "Edward" and "George" changed their places in the array according to their age. Should you ever want to sort the array in the opposite order, all you have to do is apply .reverse method on the sorted array.

.sort method is a powerful tool when dealing with the data, however you should keep in mind that it is a mutating method and will change the initial array.

Javascript vs Ruby

aidoskashenov — Mon, 13 Jul 2020 16:33:37 +0000

Being a complete novice in `Javascript` and having some very limited exposure to `Ruby` I can already point out some distinctions and similarities of syntax and overall logic in two languages.

I'm guessing that my list will cover only 5% of overall differences and similarities between the two, however this is strictly a description of my personal experience and attitude overall.
As in JS in Ruby the Strings, Numbers, Booleans, Arrays and Objects are the same. However Objects are called Hashes in Ruby and are dealt with slightly different. Another, pleasant surprise for me was that a lot of built-in methods are the same and have same, or almost same name. For Example: .length .forEach .push .pop .unshift etc.
However, right now, on my second week of learning Javascript my biggest challenge is dealing with the syntax and overall layout of the code, mostly this - "{" thing. What in Ruby dealt with "end" statement, JS puts in "{" that, for me personally, makes it harder to trace one piece of logic, it's starting and ending point.
Another very interesting thing for me, was that you can add a "String" to a "Number" or a "null" to basically anything. Ruby will immediately protest such a behavior giving out:"TypeError: no implicit conversion from nil to integer". In Ruby you cannot concat any type of data to another type without convert it to the same.

21 + "21" === "2121"
// in Ruby will look like this
21.to_s + "21" == "2121"

There are many more differences between two languages that I am very anticipated to explore

Data Types in Javascript

aidoskashenov — Mon, 13 Jul 2020 16:00:19 +0000

Data Types In Javascript

There are 3 types of data types in Javascript: primitive and composite and data types.
Primitive data types are simple types like "Strings", Number, Boolean, undefined and null. Composite data are Arrays, Objects and Functions.
Primitive data types are those that can hold only one type of value and cannot be subject to use of a methods, whereas objects and arrays can hold multiple data units and all the methods and functions are using objects as their arguments. Everything is an Object in Javascript and that's why Javascript is called an Object Oriented Language
However, some of the sources distinguish 3 types of data separating undefined and null as a "special" data type. These two types can be confusing, but to put it simply, undefined means that a variable was never defined in the code, and null means that there is no value.

Data Types In Javascript

aidoskashenov — Mon, 06 Jul 2020 02:23:11 +0000

Post #1

aidoskashenov — Thu, 02 Jul 2020 17:10:10 +0000

Hi, Everyone, this is my first week at ClaimAcademy bootcamp. I was working as a cable technician at Spectrum before and tried some coding on my own. After several month I decided to join ClaimAcademy and I am very happy that I did