teleren/devto huggingface dataset:
How do I resolve react cors error!
Published: 2021-05-23 08:41:19

I'm really having difficulty to fix cors error on an app developed in react. The error snippet below from browser console:

Access to fetch at 'https://thingproxy.freeboard.io/fetch/https://api.yelp.com/v3/businesses/search?term=fish&location=phoenix&sort_by=best_match' from origin 'https://bitepoint.link' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

My fetch api code below:

const apiKey = "xxx";

const Yelp = {
search(term, location, sortBy) {
    return fetch( `https://thingproxy.freeboard.io/fetch/https://api.yelp.com/v3/businesses/searchterm=${term}&location=${location}&sort_by=${sortBy}`,
{
// crossDomain: true,
// mode: "cors",
// method: "GET",
// credentials: "include",
// "Access-Control-Allow-Credentials": true,
// "Access-Control-Allow-Methods": "GET",
headers: {
Authorization: `Bearer ${apiKey}`,
},
}
).then((response) => {
return response.json();
}).then((jsonResponse) => {
if (jsonResponse.businesses) {
return jsonResponse.businesses.map((business) => {
//console.log(business);
return {
id: business.id,
imageSrc: business.image_url,
name: business.name,
address: business.location.address1,
city: business.location.city,
state: business.location.state,
zipCode: business.location.zip_code,
category: business.categories[0].title,
rating: business.rating,
reviewCount: business.review_count,
};
});
}
});
},
};
Using an IIFE to Create a Module
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-12 22:34:41

* An immediately invoked function expression (IIFE) is often used to group related functionality into a single object or module. 
* Ex:
```
let isCuteMixin = function(obj) {
  obj.isCute = function() {
    return true;
  };
};
let singMixin = function(obj) {
  obj.sing = function() {
    console.log("Singing to an awesome tune");
  };
};
```
* We can group these mixins into a module as follows:
```
let funModule = (function() {
  return {
    isCuteMixin: function(obj) {
      obj.isCute = function() {
        return true;
      };
    },
    singMixin: function(obj) {
      obj.sing = function() {
        console.log("Singing to an awesome tune");
      };
    }
  };
})();
```
* Note that you have an immediately invoked function expression (IIFE) that returns an object `funModule`. This returned object contains all of the mixin behaviors as properties of the object. The advantage of the module pattern is that all of the motion behaviors can be packaged into a single object that can then be used by other parts of your code.
Understanding the Immediately Invoked Function Expression (IIFE)
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-12 22:27:03

* A common pattern in JavaScript is to execute a function as soon as it is declared:
```
(function () {
  console.log("Chirp, chirp!");
})();
```
* This is an anonymous function expression that executes right away, and outputs `Chirp, chirp!` immediately.
* Note that the function has no name and is not stored in a variable. The two parentheses () at the end of the function expression cause it to be immediately executed or invoked. This pattern is known as an immediately invoked function expression or IIFE.

* Let's rewrite the function `makeNest` and remove its call so instead it's an anonymous immediately invoked function expression (IIFE).
```
function makeNest() {
  console.log("A cozy nest is ready");
}

makeNest();
```
* Answer:
```
(function () {
  console.log("A cozy nest is ready");
})();
```
Using Closure to Protect Properties Within an Object from Being Modified Externally
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-12 22:23:34

* In the previous post, `bird` had a public property `name`. It is considered public because it can be accessed and changed outside of `bird`'s definition.
```
bird.name = "Duffy";
```
* Therefore, any part of your code can easily change the name of `bird` to any value. Think about things like passwords and bank accounts being easily changeable by any part of your codebase. That could cause a lot of issues.

* The simplest way to make this public property private is by creating a variable within the constructor function. This changes the scope of that variable to be within the constructor function versus available globally. This way, the variable can only be accessed and changed by methods also within the constructor function.
```
function Bird() {
  let weight = 15;

  this.getWeight = function() {
    return weight;
  }
}
let ducky = new Bird();
console.log(ducky.getWeight()); // will display 15
```
* Here `getWeight` is a privileged method, because it has access to the private variable `weight`. This is possible because `weight` is declared in the same context as `getWeight`. In JavaScript, a function always has access to the context in which it was created. This is called `closure`.
Using a Mixin to Add Common Behavior Between Unrelated Objects
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-12 22:17:57

* As you have seen, behavior is shared through inheritance. However, there are cases when inheritance is not the best solution. Inheritance does not work well for unrelated objects like `Bird` and `Airplane`. They can both fly, but a `Bird` is not a type of `Airplane` and vice versa.
* For unrelated objects, it's better to use mixins. A mixin allows other objects to use a collection of functions.
```
let flyMixin = function(obj) {
  obj.fly = function() {
    console.log("Flying, wooosh!");
  }
};
```
* The `flyMixin` takes any object and gives it the `fly` method.
```
let bird = {
  name: "Donald",
  numLegs: 2
};

let plane = {
  model: "777",
  numPassengers: 524
};

flyMixin(bird);
flyMixin(plane);
```
* Here `bird` and `plane` are passed into `flyMixin`, which then assigns the `fly` function to each object. Now `bird` and `plane` can both fly:
```
bird.fly();
plane.fly();
```
* The console would display the string `Flying, wooosh!` twice, once for each `.fly()` call.
How to make a table in C++
Tags: c, code
Published: 2021-06-12 22:17:28

**Content**
How to create a multiplication  table in c++
Print Table of any number in C++
Concept
Explanation of Program
Summary 
Article Tags
 

**“How to create a multiplication table in C++”**

If you want to learn programming and are learning C ++, you will also know what things you will be able to create after learning it. For a small example you can make a calculator out of it.  You can also print a table. Our goal today is to print any table in C ++. First of all, you have to understand the sequence of the table and how it is written.  Procedures We have to write in our program. To write this program we need a loop.

**Print Table of any Number in C++**



Dear student arithmetic factors are the most used component of any high level language.  Is used a lot. The arithmetic factors are actually a combination of operators and expressions. When we create a program in which the table has to be printed.  Let me show you how to create a program that will help you better understand how to create it and how to use for loop.


(Concept)
num * 1
num * 2
num * 3
num * 4
num * 5
num * 6
num * 7
num * 8
num * 9
num * 10

**Explanation of Program**

```
#include <iostream>
using namespace std;
int main()
{
  int i,a;
  cin>>a;
  for(i=1;i<=10;i++)                                
  {
    cout<<a<<" x "<<i<<" = "<<(a*i)<<endl;
  }
  return 0;
}

         OUTPUT 
5
5 x 1 = 5
5 x 2 = 10
5 x 3 = 15
5 x 4 = 20
5 x 5 = 25
5 x 6 = 30
5 x 7 = 35
5 x 8 = 40
5 x 9 = 45
5 x 10 = 50
```
Summary:

Today we are understand to kodlogs website, I try to explain how to make a table in c++. I hope after reading this article you will be able to understand the table in c++.I would like to have feedback from my kodlogs site. Please post your feedback, question, or comments about this article.

 Article Tags 
C#|Python |Python 3|pycharm | html|java|JavaScript |cpp|code|rubi|Network | Google |html5 |php|bootstrap |string |Microsoft |variable |syntax |Coders |Codinglove|
Computerscience|wordpress|html-page|php|
Xml|game| net| list | loop | integer |float | string | double
C++ get size of string
Tags: c, tutorial, cpp, code
Published: 2021-06-12 22:11:39

Table of contents 
Find the length of strings 
Overview 
Strlen method 
Flowchart 
Syntax 
5 method length of string
String length function 
String size function 
String strlen function 
Summary 
Article Tags 
 

Find the Length of a String:



Overview 

Although the C ++ language does not have a specific operator for dealing with strings, it does have many library functions that allow you to perform a variety of actions on strings, for example strlen.  You may have heard of the use of. In addition to this, there are many other functions by the name of which the work is known. Today, the library function that I will mention in Tania kodlogs is strlen function. This function can be any string.  Counts the number of characters in. There is another similar function called xstrlen () function. This function is very simple. In fact, its function is to count the number of characters in a string from beginning to end.  Until the null character appears. The character pointer is used to create this function. 

Strlen method:

So first let's try to understand the function of strlen. This function tells the length of the letters in any string.  With the help of this function we set the working limit or condition of the for loop. But remember that this function does not count the null character in its number. 

Flowchart:


 syntax. 
Lenght = Strlen (name); 
 

Methods to find length of string:
1.string::size
2.string::length
3.While loop
4.For loop
5.Strlen method 

Let's have some create programs that will count the number of characters in any string. 

1.String length function:

```
string txt = "Wellcometokodlogs";
cout << "Length of string is: " << txt.length();

OUTPUT 
17
```

2.String size function:

```
string txt = "Wellcometokodlogs";
cout << "Length of string is: " << txt.size();

OUTPUT 
17
```
 

3.String strlen function:

```
#include <iostream>
using namespace std;

int main() {
    string str = "Wellcometokodlogswebsite";

    // you can also use str.length()
    cout << "String Length = " << str.size();

    return 0;
}
OUTPUT 
String Length:24
```
Summary :
Today we understand kodlog website, I try to explain the C++ get size of strings . I hope after reading this article you will be able to understand the size & length of string. I would like to have feedback from my kodlog site. Please post your feedback, question, or comments about this article.

Article Tags :
C#|Python |Python 3|pycharm |html|java|JavaScript |cpp|code|rubi|Network | Google |html5 |php|bootstrap |string |Microsoft |variable |syntax |Coders |Codinglove|
Computerscience|wordpress|html-page|php|
Xml|game| net| list | loop | integer |float | string | double |

Thank you for reading this article.
Overriding Inherited Methods
Tags: javascript, devops, tutorial, beginners
Published: 2021-06-12 22:10:17

* In previous posts, you learned that an object can inherit its behavior (methods) from another object by referencing its `prototype` object:
```
ChildObject.prototype = Object.create(ParentObject.prototype);
```
* Then the `ChildObject` received its own methods by chaining them onto its `prototype`:
```
ChildObject.prototype.methodName = function() {...};
```
* It's possible to override an inherited method. It's done the same way - by adding a method to `ChildObject.prototype` using the same method name as the one to override. Here's an example of Dog overriding the eat() method inherited from Animal:
```
function Animal() { }
Animal.prototype.eat = function() {
  return "nom nom nom";
};

function Dog() { }
Dog.prototype = Object.create(Animal.prototype);
Dog.prototype.eat = function() {
  return "chew chew chew";
};
```
* If you have an instance `let beagle = new Dog();` and you call `beagle.eat()`, this is how JavaScript looks for the method on `beagle’s` `prototype` chain:

1. `beagle` => Is `eat()` defined here? No.

2. `Dog` => Is `eat()` defined here? => Yes. Execute it and stop searching.

3. `Animal` => `eat()` is also defined, but JavaScript stopped searching before reaching this level.

4. Object => JavaScript stopped searching before reaching this level.
What is Node JS ? 
Tags: node, javascript
Published: 2021-06-12 21:48:42

Node.js is a very popular open source javascript runtime environment which is used to develop network applications. Node JS has gained massive popularity and now is used by thousands of developers all over the world for server-side programming.

Node.js is a platform built on Chrome’s JavaScript runtime for easily building fast, scalable network applications. Node.js uses event-driven, non-blocking I/O for file system access, networking, and other API calls, allowing it to support thousands of concurrent connections with near-zero programming latency.

You can make really cool real-time web applications using Node Js. There are a whole bunch of libraries and modules available to help you achieve this.   


Node JS is a fast growing platform for running JS based applications outside of the browser. 

Node JS has rocked the world of web application and making some big waves in the tech market. It’s been around for quite some time back in 2009 but is now widely used. **(Initial release	May 27, 2009)**

**What do you think ? Share your knowledge with the community.**
Cloud Computing
Tags: azure, cloud, az900, microsoft
Published: 2021-06-12 21:24:01

**O que é Cloud Computing?**
É um ambiente computacional que proporciona agilidade, economia e inovação através da entrega de recursos de TI pela internet, incluindo servidores, bancos de dados, redes e softwares.

**Para que serve?**
Entre as diversas possibilidades oferecidas pela nuvem, temos:
. Reduzir os custos com infraestrutura;
· Reduzir os custos operacionais pagando apenas pelo que usar;
· Dimensionar os recursos conforme demanda;
· Facilitar o desenvolvimento, implantação e entrega de software;
· Oferecer aos seus clientes softwares de alta disponibilidade.

**Qual cenário se aplica?**
Na necessidade da organização por dispor de recursos de TI, que sigam o conceito de agilidade, confiabilidade, escalabilidade, elasticidade, distribuição geográfica e Segurança.

Sentiu falta de algo? gostaria de complementar o assunto?
Deixe seu comentário.
Kedro Spaceflights - part 1
Tags: kedro, python
Published: 2021-06-12 21:11:42

---
title: Kedro Spaceflights - part 1
published: True
description: 
tags: kedro, python
series: kedro
---

This was my first time ever streaming on [twitch.tv/waylonwalker](twitch.tv/waylonwalker).  I am excited to get going.  I have been streaming early in the morning while I am still waking up, so still a bit groggy as I go.

## Kedro Spaceflights

It all started with
[kedro/issues/606](https://github.com/quantumblacklabs/kedro/issues/606), Yetu
called out for users of kedro to record themselves doing a walk through of
their tutorials.  I wanted to do this, but was really stuck at the fact that
recording or editing somewhat polished vide is quite time consuming for me.

![kedro-issue-606](https://images.waylonwalker.com/kedro-issue-606.png)

## Notes

``` bash
pipx run kedro new
cd project
python -m venv .venv
source .venv/bin/activate
pip install kedro
kedro install
```
Branching Out
Tags: github, git, bootcamp, teamwork
Published: 2021-06-12 20:51:18

*Mapping out the Git Branching steps for my first group development project & reflections on the bootcamp so far...*

#Git Branching Steps
*I wanted to capture a bit of the process -- how I understand it -- here to serve as a reference for me and my group as we start to memorize the steps for working together using Git Branches.*

###In the designated Feature branch...
1. In the Github Project Kanban, move card from To Do to In progress
2. `git pull origin dev` 
3. `git switch -c [feature-name]`
4. Make and save changes in VS Code
5. `git add -A`
6. `git commit -m "Short description of update"`
7. `git push origin [feature-name]`
8. In the Github Project Kanban, move card from In progress to Review

Whoever did not push the code, reviews the changes. If approved, the PM pulls the request into the dev branch and deletes the feature branch. 

>**Instructor's Tip:** Commit small incremental commits to avoid conflicts

*But first... I had to get the repo onto my machine.*

###Cloning the repo and the initial commit
* Our assigned lead developer created new Repository 
* I clicked the Code dropdown to copy the SSH link
* In Git Bash, `git clone [pasted SSH link]`
* Then, entered the directory with `cd [directory-name]`
* Switched to a new branch with `git checkout -b keely`
* Made a small change to the html file using VSC
* Followed steps to add, commit, push change 
```git add -A
git commit -m "Update HTML title in head"
git push origin keely```


>**Instructor's Tip:** Instead of naming the branches as our own names, name the branches the features of our project

## Beginning Reflections

7 weeks in this coding bootcamp... *sheesh!* I knew it was going to be tough and I'm still hanging in there! I know the reward will be mighty and after talking to a few classmates, our excitement is growing together as we start to recognize our progress and potential. 

We just started our first group project after a few tough weeks of learning JavaScript and my goal by the end of this project is to have "clicked" with the foundations so I can continue to grow. 

I am thankful for all the support I've been receiving - from classmates, my tutor, the TAs/instructor, and my partner in crime/life. The hardest part was -- I hate to say it -- asking for help. 

In the last week or so, I've been wanting to start capturing this process of my own growth and was jotting down potential writing prompts in my notes so I was excited when my instructor pointed me to this site! Cheers to documenting growth! 🍻 

Stay tuned or let me know if you have any tips along the way!
10 Mostly used HTML Symbols
Published: 2021-06-12 20:49:28

Writing the copyright sign in html using entity name as  `&copy;` or using number-code as `&#169;` to easily display © made sense to me.

Little did I know that  empty-space( ), slash sign ( | ), or even a dash ( - ), also hold special code in html. Similarly for a ‘ or an “. 

Think about '<' being used as a 'less-than' symbol. HTML would render text after 'less-than' symbol as the beginning of a tag name, thus would create confusion. Bad character error would be avoided if you write:
 `<p> 4 is &#60; than 3 </p>` or:
 `<p> 4 is &lt; than 3 </p>` 
instead of: `<p> 4 is < than 3 </p>`

There is a case where in styling, you would want your web layout to be consistent. Say, a paragraph `<p> some text </p>` in section-1 has some text, and similar paragraph in section-2 has no text. Instead of living the p tag empty as `<p></p>`, you could use an empty space symbol (`&#32;`), and write it in deci-code as:
 `<p>&#32;</p>`  or in hex-code as `<p>&#x20</p>`

Maybe you are using AZERTY keyboard and you don't want to spend your time figuring out where the back-tick is, just use `&#96;` . 

After coding a couple of pages, I made a list for quick referencing the html symbols, their number-code/hex-code and entity code for the ones I have mostly used in basic web-pages. See [cover image of this article for the list](https://dev.to/lujianna/10-most-used-html-symbol-14o6/) 



I would substitute those characters in the html and use number code, hexadecimal or their entity names instead. 

Example on how to use the symbols in code:

`<p>wow!</p>` to `<p>wow&excl;</p>`


You can get more of these symbols from [W3](https://www.w3schools.com/html/html_symbols.asp). There is also a [nice table here](https://dev.w3.org/html5/html-author/charref). Maybe an [official one is your preference](https://html.spec.whatwg.org/multipage/named-characters.html#named-character-references)

Now, you are probably asking what is html-entity. Here is an [MDN explanation](https://developer.mozilla.org/en-US/docs/Glossary/Entity)

Which symbol have you used the most so far, and is not included in this list? Please add in the discussion section below… 

Made with love …Anna. &hearts;  &#9829; ♥
The shortest explanation of debouncing & throttling in JavaScript
Tags: javascript, programming, debouncing, throttling
Published: 2021-06-12 20:40:48

If you're searching for a gist of throttling and debouncing and you don't have much time to spare, you came to the right place! :fire:

You can use both these optimization tricks to reduce the number of function calls in response to events that fire frequently. 

Let's jump directly to the example. 

```html
<p id="count">0</p>
<button id="btn" type="button">I'm a button, click me!</button>
```
```javascript
let count = 0
const btn = document.querySelector('#btn')

btn.addEventListener('click', handleClick, false)

function handleClick() {
  const counter = document.querySelector('#count')
  counter.innerHTML = ++count
}
```
As you notice, we can increment the count by clicking the button. 

We can go slow and push the button from time to time. Or we can go at light speed and hit the button as quickly as possible.

In both scenarios, code in the handler will run every time we click the button. So let's consider it as our baseline.

Imagine that we want to optimize this functionality. 

Let's change our code to use debouncing.

```javascript
let count = 0, timer = null
const btn = document.querySelector('#btn')

btn.addEventListener('click', handleClick, false)

function handleClick() {
  if (timer) {
    clearTimeout(timer)
  }

  timer = setTimeout(() => {
    const counter = document.querySelector('#count')
    counter.innerHTML = ++count
  }, 3000)
}
```

Now, no matter how often we push the button, the handler will increment the count only three seconds after we stopped hitting the button. 

**So, debouncing is when you execute code only after a certain period some event stops firing.**

This trick can help handle user input. E.g., we can send an HTTP request not on every keystroke but only when the user stops typing.

Now let's look at throttling.

```javascript
let count = 0, timer = null
const btn = document.querySelector('#btn')

btn.addEventListener('click', handleClick, false)

function handleClick() {
  if (timer) return

  timer = setTimeout(() => {
    const counter = document.querySelector('#count')
    counter.innerHTML = ++count
    timer = null
  }, 3000)
}
```

In that case, no matter how often we push the button, the handler will increment the count only one time in three seconds.

**Thus, throttling is when you execute code at a regular interval during some event firing.**

You can use it to optimize the handling of a scroll event.

There you have it! I hope I saved you some time googling.

Thank you for reading! :stuck_out_tongue_winking_eye:
Day 90 of 100 days of SwiftUI
Tags: swift, 100daysofcode
Published: 2021-06-12 20:35:53

I just completed day 90 of 100 days of swiftui. I added more features to the FlashZilla app. I made the list of card configurable within the app.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eo7bahvsylc3hj1665va.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jz73zbnd485sjv6efklq.png)![Alt Text](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7lspkqyqb3vzuyqlhk46.png)