teleren/devto huggingface dataset:
How to stop or abort a fetch request in JavaScript?
Tags: javascript
Published: 2020-08-26 00:00:00

---
  title: How to stop or abort a fetch request in JavaScript?
  published: true
  tags: JavaScript
  date: Wed Aug 26 2020 05:30:00 GMT+0530 (India Standard Time)
  canonical_url: https://melvingeorge.me/blog/stop-fetch-request-javascript
  cover_image: https://melvingeorge.me/_next/static/images/main-addc3c70b36799ddccf7615c66428190.jpg
  ---
  [Originally posted here!](https://melvingeorge.me/blog/stop-fetch-request-javascript)
  
To stop or abort a fetch request, you have to use the `AbortController` API. This helps to stop the fetch request from the client-side only but not on the server-side. The server continues to process the request even after the request is stopped from the client-side.

Let's see this in action.

First, we need to create an object of `AbortController`.

```javascript
// create an object of AbortController
const controller = new AbortController();
```

Then we need to get the `signal` property from the controller object and pass it as an option to the fetch request as an option.

```javascript
// create an object of AbortController
const controller = new AbortController();

// get the signal property from the controller
const signal = controller.signal;
```

Pass the `signal` property as an option to the fetch request.

### The `signal` property is a Read-only property.

Let's use an API endpoint from [JSONPlaceholder](https://jsonplaceholder.typicode.com/) website for the fetch request.

```javascript
// create an object of AbortController
const controller = new AbortController();

// get the signal property from the controller
const signal = controller.signal;

// fetch request
// passing signal as an option
fetch("https://jsonplaceholder.typicode.com/posts", { signal })
  .then((response) => response.json())
  .then((json) => console.log(json));
```

We have now configured the fetch request to use the `AbortController`.

Now to stop the ongoing fetch request we have to use the `abort()` method in the `controller` object.

```javascript
// To stop the ongoing fetch request
controller.abort();
```

To see the working example see [JSBin](https://jsbin.com/pejeceyawi/1/edit?html,js,output).

### Feel free to share if you found this useful 😃.

---
The Simplest Heroku Demo Ever
Tags: heroku, devops, gettingstarted
Published: 2020-09-08 22:49:22

---
title: The Simplest Heroku Demo Ever
published: true
date: 2020-08-26 00:00:00 UTC
tags: heroku, devops, gettingstarted 
canonical_url: https://greg.nokes.name/2020/04/08/simplest-heroku-demo/
---

One of the things that I have done literally thousands of times over the last 9 years is show folks the power of Heroku. Over the years I have come up with, dare I say it, the simplest Heroku demo script ever:

```
mkdir directory
cd directory
git init . && git checkout -b main
touch index.php
echo "<h1>this is a heroku app</h1>" >> index.php
git add . && git commit -m "first commit, yay"
heroku create
git push heroku main
heroku open

```

There you go - a few lines to create a new app, build environment, load balancers and everything else you need to run a highly scaleable, secured, web application. All thanks to the power of Heroku.
Fuyuko v1.0.0 Released
Published: 2020-08-25 23:50:51

Fuyuko, an open source Master Data Management (MDM) / Product Information Management (PIM) software, v1.0.0 released. Check it out at [here](https://github.com/tmjeee/fuyuko/releases/tag/v1.0.0).

Cheers, enjoy and happy coding. :-)
🥳 Animated Happy Birthday Card 👉 jQuery CodePen Demo
Tags: codenewbie, codepen, html, css
Published: 2020-08-25 23:49:40

🥳 Animated Happy Birthday Card 👉 jQuery CodePen Demo

{% codepen https://codepen.io/livewordpresshelp/pen/yLeQoWO %}

I have been sending a link to people on my friend list when Facebook reminds me of the past few months to make people feel a little more special than the painstakingly easy "Happy Birthday" comment. 🤦‍♂️

Birthday comments mean a lot to people and some people get none of them. 😭💔😿

Send this demo to whoever you like and make people feel remembered on their special day.
Random... does anyone get confused styling?
Tags: react, styling, vue, ui
Published: 2020-08-25 23:41:59

Does anyone get overwhelmed with UI styling? I kinda get sick with all the different variations of how something can be. I’ve been focusing on React and python. I started a React project after months of python concentrating.... UI is throwing me off a little. Are there any main reasons why things arnt auto imported, connecting or laying out right? 
Those are the problems I’m having
#100DaysOfCloud | Day 1
Tags: 100daysofcloud
Published: 2020-08-25 23:35:18

What Did I learn -
Look at Software Development lifecycle:

Planning, where we discover the client's issues they want to be resolved.
Analysis, where we get into specifically what could be causing the clients issues and what could be implemented to solve this.
Design, once we decide on a solution from the analysis phase, this is where we lay the framework for what we will implement.
Implementation, after the design is laid out we start working on coding and spinning up our servers.
Testing, QA looks for outstanding issues and bugs from the implementation phase.
Deployment, where the product goes from Dev to a production env.
(Next implementation cycle begins)

What Did I Do -

Spun up a centos server:
Use```rpm -q centos-release``` to find release/version was centos-release-7-8.2003.0.el7.centos.x86_64.
Installed Docker, ran successful and failed applications looked at logs for successful pulls and unsuccessful container push, this was from alpine and nginx dockerfiles. I used ```docker container logs <CONTAINER ID or NAME>``` to find container logs.
Use ```docker container ls``` to find running docker container images, and use ``` docker container ls``` to find running and stopped docker container images on your machine. ```Docker container inspect <CONTAINER ID>``` to inspect the docker elements such as IP, image, name, and any other info for the dockerfile. To force removing all inactive dockerfiles you can use the syntax ```docker container prune -f``` to force them to be removed. To remove active docker images you can use ```docker container rm -f <CONTAINER ID> <CONTAINER ID2> etc...``` if you need to remove more than one active container.

For tomorrow -

I plan on continuing to learn more about Docker, getting into Networking, storage, and Dockerfiles more in-depth. I also plan on getting more hands-on with EKS as well as creating a Minecraft server as a Linux lab, hopefully getting into creating a Dockercraft server at one point.
Placeholder title
Tags: actionshackathon
Published: 2020-08-25 23:28:48

[Instructions]: # (To submit to the GitHub Actions x DEV Hackathon, please fill out all sections.)


### My Workflow
[Note]: # (Make sure to include the name of your GitHub Action and share where it's being used!)


### Submission Category: 

[Note]: # (Maintainer Must-Haves, DIY Deployments, Interesting IoT, Phone Friendly, or Wacky Wildcards)


### Yaml File or Link to Code

[Note]: # (Our markdown editor supports pretty embeds. Try this syntax: `{% github link_to_your_repo %}` to share a GitHub repository)


### Additional Resources / Info

[Note:] # (Be sure to link to any open source projects that are using your workflow!)

[Note]: # (Be sure to include the DEV usernames of your collaborators, if any. )

[Reminder]: # (Submissions are due on September 12th (11:59 PM PDT) and winners will be announced on September 23!)
How to develop Video Downloader For WhatsApp status and social media
Tags: freevideodownloader
Published: 2020-08-25 23:12:12

I will start whats app video downloader app development in react native with Facebook, Insta, Dailymotion, and many more.

(https://play.google.com/store/apps/details?id=com.encoderbytes.downloader)

I will show you some packages which I will use in the mobile application but further, we will look at how to use them and which one is best for the app development. 

Also, I will teach you how to make your own library. 

You can download the mobile application form the link we will develop this application in this course. 

https://play.google.com/store/apps/details?id=com.encoderbytes.downloader

Thank you
Hexagon Toolkit 1.3 released
Tags: kotlin, microservices, news, showdev
Published: 2020-08-25 23:02:07


Hello everyone, the Hexagon Toolkit released the 1.3 version this week.

To summarise, Hexagon is a Microservices Toolkit that aims to provide all you need to develop applications that run on Cloud environments.

You can find more information about the project in the following links:

* [Project Website](https://hexagonkt.com)
* [GitHub Organization](https://github.com/hexagonkt)

This release was focused mostly on internal changes. Below you can find all the details.

Features
--------
* Implement [HTTP Client Feature (Port)]. Implemented by the [Async HTTP Client Adapter].
* Add the [Freemarker Template Adapter] (by [Bikramjeet Singh]).
* Improve RabbitMQ (beta) module adding metrics to it (by [Donky106]).
* Sign Packages and [publish on Maven Central].
* Check dependencies' integrity for security (by [Donky106]).
* Support Maven through a [Maven parent POM].
* Create a Twitter Clone example (by [Bikramjeet Singh]).
* Depend only on SLF4J for logging. Allowing users to set up Logback, Log4j2 and JUL at their preference.

[HTTP Client Feature (Port)]: https://hexagonkt.com/port_http_client
[Async HTTP Client Adapter]: https://hexagonkt.com/http_client_ahc
[publish on Maven Central]: https://search.maven.org/search?q=g:com.hexagonkt
[Freemarker Template Adapter]: https://hexagonkt.com/templates_freemarker
[Maven parent POM]: https://search.maven.org/artifact/com.hexagonkt/kotlin_pom/1.3.0/pom

Sponsorship
-----------
Thanks to the following companies for borrowing resources to the project, this is much appreciated!

* [DigitalOcean]\: provides Cloud resources to run tools and test deployments.
* [JetBrains]\: donates a license of their wonderful IDEs for the toolkit development.

[DigitalOcean]: https://www.digitalocean.com
[JetBrains]: https://www.jetbrains.com

Thanks to Contributors
----------------------
* [Bikramjeet Singh] for implementing the Freemarker Adapter and creating the Twitter Clone example.
* [Donky106] for improving the RabbitMQ adapter and setting up dependencies' verification.
* [Shahid Raza] for improving the log statements' information on the library.
* [Tyler Lowrey] for contributing with the HTTP Client documentation.

[Bikramjeet Singh]: https://github.com/BikramjeetSingh
[Donky106]: https://github.com/donky106
[Shahid Raza]: https://github.com/mrpascal1
[Tyler Lowrey]: https://github.com/tylerlowrey

Future Steps
------------
1. Complete the functionality set (security, Websockets and OpenAPI).
2. Change the API: make it more consistent and switch to middleware filters instead before/after.
3. Develop asynchronous handlers using coroutines.

Spread the Word
---------------
* Play with the toolkit and share your feedback :)
* [Retweet on Twitter](https://twitter.com/hexagon_kt)
* [Give it a :star:](https://github.com/hexagonkt/hexagon/stargazers)
* [Contribute!](https://hexagonkt.com/contributing)
Seeking for alternatives when working with bad software
Tags: productivity
Published: 2020-08-25 22:59:02

Inevitably, we'll someday come across legacy software, inconsistent databases, or integration modules that simply don't work. It might sound wise to fix this software, especially if they're crucial to the business. The problem that refactoring costs development and validation time, and the business does not always have this time to invest, but at the same time needs the fix. How can we both deliver the business requirements in time and still not break everything?

In the past weeks, I've been dealing with integration problems that led to an inconsistent database. This database is queried weekly to pay our drivers (I work for a delivery orchestration company). With the discrepant dataset, the output of the report was also inaccurate. I couldn't fix all the integration problems we had to the next weekly payout, so I tried a different approach.

I had to pause my iterative way of working. That works for most of the cases and still works for my team. But we have to be questioners to our modus operandi and not just go with the flow. Some problems will need a special take. I had to break the loop of:

1. Finding the bug
2. Fixing the bug
3. Updating database retroactive data with the fixed bug
4. Creating another bug by accident
5. Loop

To gain time, what I did was to create a script that connects to all databases and all external services to generate this report. Instead of fixing the database inconsistency, the script fetched the data it needed to the report from all related services and processes it all in memory. It's not that processing data in memory is a bad practice, it just depends on the problem you have. Question your modus operandi.

The script, written in Elixir, is querying 3 different databases, performing joins in memory, grouping in memory, and getting missing data from 2 external services via HTTP. All of this running concurrently using Elixir streams with [`Task.async_stream/3`](https://hexdocs.pm/elixir/Task.html#async_stream/3), outputting a CSV file. I ran it first on my MacBook, but putting it on GKE (Kubernetes) made it even faster, as most of our infrastructure is on Google Cloud Platform.

The weekly report is solved, but still, we have integration and database inconsistency issues. That's planned to be solved in our iterative workflow, where it should be. Use the right tools, at the right time, in the right process. Change if needed. Loop.
Things I need to write about in the coming few days
Published: 2020-08-25 22:58:56

1. How to prep for JavaScript tech interviews
   * Microsoft interview (write, map, filter, reduce functions)
   * crunchbase, amplitude (complex hash manipulations)
   * visa (data strorage problem)
   * Bento Cats Project

2. How i solved the car-reader issue using simple hack on front end. (Spoiler: created a transparent input with auto focus, so that the user can swipe card details)

3. Form filling with React-Text-masks (credit card, exp Date, zipcode, email address)

4. Why do we need all the dev, qa, qapen, qaperf, uat, preprod, staging, prod environments

5. Amazing Typescript skills

6. Automating network calls in React.!!!!

7. Leetcode setup

8. React Hook Forms with State management, Masked Text Input
A beginner's way to show some 💚 👉 "love" in every language on Google Translate.
Tags: codepen, codenewbie, design, beginners
Published: 2020-08-25 22:15:52

A beginner's way to show some 💚 👉 "love" in every language on Google Translate.

{% codepen https://codepen.io/livewordpresshelp/pen/eYpPjKM %}

This little CodePen demo uses no libraries. Developed with minimal, pure, plain, vanilla JavaScript, HTML, and CSS to ensure it's lightweight.

Please note: 

I did not work this down to a responsive viewport, but it's not hard to do if you'd like to fork it. Go for it.
When you use Python, what are you mainly using “with” it?... as in Django, Kivy, Flask, TKinter? 
Tags: django, python, flask, tkinter
Published: 2020-08-25 22:14:23

When your using Python,
What are you mainly using it for? / building? 
..........::
I’m inbetween knowing React well and Vue well. I’ve started to test out python. 
I’ve recently created a React project, kinda through off my thought process of code, but I can see similarities between languages of meanings.
How to prioritize your tasks 
Tags: agile, career, beginners
Published: 2020-08-25 22:05:10

Imagine you are hero with some amazing superpowers. Because of bad luck you get yourself surrounded by some bad guys who also have superpowers. Although you are hero you cannot take endless damage. At some point you are going to fall like anyone else. This means you need a strategy to finish them. What do you do to minimize the damage you could get? You need to finish one after another! 

This sounds easy but the big question is: In which order should you finish them? Yes, this is very important.

*BTW: running away is the best solution*

# Enough heroes, back to business
You have the following two tasks in your backlog.

**Add new products in web shop**
Your customers know you have some brand new products and want to buy them. While the products are missing in your web shop your customers cannot buy them.
 
*You miss profit!*

```
Cost of delay: 200 dollars per day
Size         : 2 days effort
```

**Automate refunds**
Although your products are amazing some customers want a refund. The refunds are so annoying and take pretty much time. Time is money. You lose time, you lose money.

*This takes you extra effort!*

```
Cost of delay: 150 dollars per day
Size         : 3 days effort
```

# Calculate the priority
We know the cost of delay and size of each task. How can we compare them? Simple, by this superhero formula.

`Cost of delay : Size = Weight`

**Add new products in web shop**

`200 : 2 = 100`

**Automate refunds**

`150 : 3 = 50`

Compared to weight we know now that the missing products in the web shop are heavier than the missing automation of refunds.

`100 > 50`

In short them you should first add the new products and then automate the refunds. 

# Recalculate

**Best case**
We trust our calculated priority and use it.

```
Day 1: 200 + 150 = 350
Day 2: 200 + 150 = 350
Day 3: 150
Day 4: 150
Day 5: 150
```

Total costs over these five days: 1150 dollars

**Worst case**
Assuming we would not care about the calculated priority and we completely invert it.

```
Day 1: 200 + 150 = 350
Day 2: 200 + 150 = 350
Day 3: 200 + 150 = 350
Day 4: 200
Day 5: 200
```

Total costs over these five days: 1450 dollars

**Only by prioritizing those tasks we would save up to 300 dollars. This is about 26%.**

*BTW: This is the reason all those product owner get some bonus...*
Kinx v0.14.0 Preview Released
Tags: ruby, javascript, kinx
Published: 2020-08-25 21:49:34

Hello everybody!

I published Kinx v0.14.0 preview release yesterday. It newly supported SSH, Iconv, PDF core library, and so on.

* Reference
    * First motivation ... [The post of introduction](https://dev.to/krayg/kinx-as-a-script-language-4iko)
        * Kinx, I wanted a scripting language with a syntax of C family.
    * Repository ... https://github.com/Kray-G/kinx
        * I am waiting for pull requests.

If you have a kind of interest on it and you want to try to use it, don't hesitate to use it and report anything to me.

I am going to improve Kinx more and more also from now on.

Thank you in advance.

See you!
[SEO Tool] 75% Crazy Discount on AppSumo!
Tags: showdev
Published: 2020-08-25 21:29:43

[SEO Tool] Crazy Discount on AppSumo! Purchase lifetime membership at a 75% discount.

**Product:** Screpy AI-Based SEO Analysis Tool

**Short description:** Complete the guide tasks created with the power of AI, increase pagespeed, improve your UX, eliminate cross device errors, and guarantee 100% SEO success.

[Purchase now on AppSumo!](https://appsumo.com/screpy/)
Day 203: Asleep
Tags: hiphop, code, coding, lifelongdev
Published: 2020-08-25 21:12:55

_liner notes_:
- Professional : Spent the day working in the park trying to charge my battery with the solar panels. It's a really nice spot but it's been pretty cloudy so I haven't charged a lot. Maybe about 20% increase. As far as work, I didn't have any meetings today so I knocked out some tickets and did some research on my next blog post. Speaking of blog post, I posted my last post to dev.to. You can check it out here: https://dev.to/vonagedev/creating-a-web-component-with-open-wc-2hob.

- Personal : Last night I got a lot done on my side project. I think I may have gotten the ability to change the scenes on the stream that's going out to people. Previously, I was working on getting the dashboard scenes to switch. Now, the two should sync. So when the host changes a scene, it will also change to match on the stream that everyone else is seeing. I said I think, because I was falling asleep as I was coding. haha.

![A view over Rio de Janeiro, Brazil](https://dev-to-uploads.s3.amazonaws.com/i/1fd4skm1801qdclqmrun.png)

I've really come to the realization, that I need to get solar panels on the top of the van. To be able to petty much always be charging my battery through out the day and not having to go to the park will help alot. I've been pricing out some components and watching videos. I think I may have come up with a pretty good solution, so I'll add up everything and dip into the savings and get them ordered maybe next week. Other than that, going to see if the code I wrote last night actually works and changes scenes on the stream. After that, I want to redo the front end, pretty much the same, but upcoming meetups will have their own pages. I want to use Sapper/Svelte to make that happen. Had some good experiences before and want to give it another go so I can practice.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube BpuZ2JIHbCs %}
Tudo sobre Marketing Digital
Published: 2020-08-25 20:54:57

Até mesmo os melhores analistas de SEO tem dificuldades para colocar em prática o link building e trazer novos usuários, de outros sites parceiros para o seu blog. Ao construir uma rede de links no seu site, o Google entende que ele é referência no assunto e começa a dar um maior destaque.

Lembrando que as conjunturas dos links podem ser internas como externos. Quando se fala em link building, normalmente se pensa na criação de links externos, para divulgar sua página em outros sites. Os que são conquistados em outros sites, também são chamados de inbound links.

Antes de falar sobre as suas diferenças, vamos analisar o que cada um tem de parecido. A cur.to também é uma plataforma especialista em criar biolinks para Instagram, assim como a Linktree. E é possível criar campanhas no Google.

A grande diferença do Cur.to é poder gerenciar múltiplos projetos. Já o Linktree foca na criação de vídeos, como também a divulgação no Youtube através de SEO.

Para mais detalhes, acesse https://guerrilhamkt.com.br
Mastering Hard Parts of JavaScript: Prototype & Class IV
Tags: javascript, codenewbie, prototype, oop
Published: 2020-08-25 20:40:26

---
series: Mastering Hard Parts of JavaScript
description: An introduction to JavaScript Prototype & Class using 15 exercises
---
## Using ES6 Classes

### Exercise 8

> Create a class PersonClass. PersonClass should have a constructor that is passed an input of name and saves it to a property by the same name. PersonClass should also have a method called greet that logs the string 'hello'.

```js
class PersonClass {
  constructor() {
    // add code here
  }

  // add code here
}
const george = new PersonClass();
george.greet();
// -> Logs 'hello'
```

### Solution 8

```js
class PersonClass {
  constructor(name) {
    this.name = name;
  }

  greet() {
    console.log("hello");
  }
}
```

An exact recreation of Exercise 2 and 5, here using the `class` pattern. More readable for people who come from other languages, though many JS diehards complain that this pattern just doesn't look _native_ to JS. In effect the JS engine is doing exactly what it did in Exercise 5.

### Exercise 9

> Create a class DeveloperClass that creates objects by extending the PersonClass class. In addition to having a name property and greet method, DeveloperClass should have an introduce method. When called, introduce should log the string 'Hello World, my name is [name]'.

```js
const thai = new DeveloperClass("Thai", 32);
console.log(thai.name);
// -> Logs 'Thai'
thai.introduce();
//-> Logs 'Hello World, my name is Thai'
```

### Solution 9

```js
class DeveloperClass {
  constructor(name, age) {
    this.name = name;
    this.age = age;
  }
  introduce() {
    console.log(`Hello World, my name is ${this.name}`);
  }
}
```

This of course is exactly like exercise 7, but uses the class syntax instead of adding a method to the prototype property directly. Again, behind the scenes, the JS engine performs exactly the same operation.