teleren/devto huggingface dataset:
UNDERSTAND PROMISE IN 5 MINUTES
Published: 2021-11-30 03:17:17

# Reference
http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/

**Synchrounous and asynchrounous requests**


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/85bjwbc2flnq8yp93ovf.jpg)

A process need to wait for another process got finished and then does something else in synchrounous model; in contract, asynchrounous one does not. ( It will describe with sync and async below.)



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xnyb2xnxwgcbnvaknr71.jpeg)
[image source](http://tutorials.jenkov.com/images/software-architecture/software-architecture-introduction-3.png)



# Sample for async functions


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sy1bdmqvbsaphlxrucdd.png)

# Non-blocking environment

- how to handle the result of each async processes below??
- how does our system know the async process is done?? Async 


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsgi7ituiwczkb1uniam.jpeg)


# To handle async processes

[_what is ES6, ES7, ECMAScript2015..._](https://codeburst.io/javascript-wtf-is-es6-es8-es-2017-ecmascript-dca859e4821c)



### Method 1: Callback function // ES4 standard

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qm8yepym5avbc390l31e.png)


[what is Callback hell](http://callbackhell.com/)


- Real example 1: XMLHttpRequest ES5 standard



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kw565bwydeqjpl9kpbkm.png)

### Method 2: Promise ES6 standard

An object to wrap and unwrap objects and functions asynchronously


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r4mw50hb5awanymcqlos.png)

- Real example 2a: jQuery


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vy3gmskrey0d47yytwx1.png)

- Real example 2b: Fetch HTML5 standard


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1p8awlggav9474y6ht3u.png)


### Method 3: async/await ES7 candidate

For unwrap Promise object easily


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r6e41vsnwwrre0daso6m.png)

# Summary

Because sending requests asynchrounously is hard for developers to handle their responses. Using these new methods could be easier to take asynchrounous functions sequentially like accessing synchrounous functions.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2owa4f066bkqnkcwaqo.png)
Please be aware that Promise.all() does not guarantee all requests in a sequence but for the resolved result; besides, if a process got failed, Promise.all() would only get error catch

# Reference
http://blog.kueiapp.com/en/programming/understand-promise-in-5-minutes-javascript/
Release 0.4 - Part 1
Tags: opensource
Published: 2021-11-30 03:09:28

## Introduction

Finally, we managed to reach the end of my first open-source course. And, what better way to end it than challenging myself to work on something even bigger and more impactful compared to my previous releases?

This blog will be the first of my 3-part journey tackling the final release: from planning the approach to the assigned issues and working on the code to finally submitting the PR(s) and making adjustments based on others' feedback.

## The search 🔎

First things first, we need to get ourselves some issues.

I decided to look inside Telescope and the IPC144 curriculum repo and after a while, managed to find myself 2 issues:

- https://github.com/Seneca-CDOT/telescope/issues/2416
- https://github.com/Seneca-ICTOER/IPC144/issues/107

## Planning 📝

### 1. [#issue-2416](https://github.com/Seneca-CDOT/telescope/issues/2416)

After talking with the project maintainers, I managed to write down a few things about my approach:

- Fetching the builds' (previous, current, next) detail from the Telescope API
- Extracting the following info from the fetched result:

```
{
  * The git SHA that is/was built
  * Who pushed the code (i.e., pusher)
  * Who wrote the code (i.e., sender/author)
  * A link to the compare branch to see what changed
  * When the build started (startedDate)
  * When the build stopped (stoppedDate)
  * What the result code of the build was
}
```

- Rendering the data to a UI element to display it in both the dashboard and the build log

For the place that hosts the logic to fetch and extract data from the API, I was suggested to create a new file in https://github.com/Seneca-CDOT/telescope/tree/master/src/api/status/public/js/build-log

For the UI element, I planned on basing my design on GitHub's per one of the maintainers suggestion:

![GitHub build detail](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rijn6q8q23kvd9h8zv6g.png)

Since the project uses [Bootstrap](https://getbootstrap.com/), I could refer to their documentation to create a card component and customize it to match the example as closely as I can.

### 2. [#issue-107](https://github.com/Seneca-ICTOER/IPC144/issues/107)

Since the task is to add more scripts to improve the current CI workflow, I could refer to a [blog](https://dev.to/mqnguyen/adding-continuous-integration-with-github-actions-33hm) I made about GitHub Actions and start from there.
telnet: the fun part
Published: 2021-11-30 02:42:33

## Accessing remote's shell

1. nmap to find the open port
1. start telnet session: telnet [ip][port]
1. start tcp dumper listener
1. ping my own machine and check if my machine is reachable from the remote machine
1. if pinged, that means my machine is listening to the command from remote's command
1. msfvenom to generate command for command payload
1. start netcat: nc -lvp [myport-that-is-eavesdropping-on-the-machine]
1. run payload command on telnet session
Release0.3 Using PyParing lib in mindsdb
Published: 2021-11-30 02:32:20

MindsDB is a predictive platform that makes databases intelligent and machine learning easy to use. It allows data analysts to build and visualize forecasts in BI dashboards without going through the complexity of ML pipelines, all through SQL. It also helps data scientists to streamline MLOps by providing advanced instruments for in-database machine learning and optimize ML workflows through a declarative JSON-AI syntax.
I did 3 issues of this project, [1773](https://github.com/mindsdb/mindsdb/pull/1773) and [1771](https://github.com/mindsdb/mindsdb/pull/1771) have merged, and [1777](https://github.com/mindsdb/mindsdb/pull/1777) had approved.

### PR 1773 and PR1771 review
These two issues are easy to fix, but it can help me understand the program as soon as possible and let me establish good communication with the project owner.
The first issue need to find the integrations table file, and remove the supported integrations table.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0r2y6lutpgozb34je2l.png)
The second issue is that rename two sections from the left navigation menu.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qipzc6fkjr6urn3fy9qc.png)
### PR1777 review
The issue is that if the user adds the space in the integration name, the app isn't able to parse that for e.g My SQL
```
mysql> CREATE PREDICTOR home_rentals_model FROM `My SQL`(SELECT * from test_data.home_rentals)  PREDICT rental_price;
ERROR 1149 (HY000): Expected "PREDICT" (at char 45), (line:1, col:46)
mysql>
```
At the beginning, I think the issue is from the interface, and I just need to remove the white space. Then I used the following code to deal with the issue.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7emyupyyu9y1im95a2d1.png)
After communicating with the project owner, I know that the interface changes affect only 'integration', ie when you work with MindsDB from your database (not via direct connection to MindsDB). In original issue error had raise in 'create predictor' query, which cant be used with such connection. The issue is parser error, probably it does not understand back quote symbols.
I searched for some information about [pyparser](https://pyparsing-docs.readthedocs.io/en/latest/pyparsing.html) and the pyparser can't understand backquotes as you said. Then I checked some methods about how to identify backquotes, probably two methods. One is to use backslash + backquote, and the other is to use repr (). I use the backslash +backquote method in this PR.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2jh7pxt0v37ym9ha1ko3.png)

### What I learned
The [pyparsing module](https://pypi.org/project/pyparsing/) is an alternative approach to creating and executing simple grammars, vs. the traditional lex/yacc approach, or the use of regular expressions. The pyparsing module provides a library of classes that client code uses to construct the grammar directly in Python code. There are lots of functions, and I am learning them.
OSD600 Final Release Planning
Tags: opensource
Published: 2021-11-30 02:17:45

#### Release 0.4

For this final assignment, we are tasked with contributing to another repository as we have done in the past. I am hoping to improve my Karma test skills even further by developing some tests that run in a Docker container. This is done in an application I intend to help add Karma to called [solr-node-client](https://github.com/lbdremy/solr-node-client). 

The reason this must be done is the maintainers have let me know that the tests should fail in Karma because the application uses something known as `undici` under the hood which is not supported in browsers.

#### My Plan

My initial part will simply be writing the Karma config file and adding the existing tests to the Karma test commands. However, I am hoping to have enough time and skill to also find a solution with the help of the maintainers and to have a workaround in place for browser compatibility. Perhaps I will be able to write a few tests as well in order to get more experience with writing Jest and Karma tests.

#### What I hope to learn

I am hoping to learn again from experienced developers like [Igor Savin](https://github.com/kibertoad/toad-scheduler) and the folks at solr-node-client. Through this I will learn about browser testing and hope to write some tests of my own for the project (whatever they happen to want tested). Furthermore I think this will be a good overall learning experience to understand asynchronous programming because the API uses promises which I have less experience with than synchronous styles.

I am excited and let's see how the next couple weeks go!

Andre :)
Join Our Virtual Space For Makers
Tags: startup, podcast, beginners, webdev
Published: 2021-11-30 02:14:43

I am building a **virtual "co-working" space for bootstrappers and indie hackers** and it is becoming more motivating and valuable by the day! :D

You will take a lot of value from our space if:

- You are a **nice person**

- You either have **recently started** or **want to start your company or side project**

- You are working remotely and **tired of working alone**

- Want to meet and **learn from like-minded people** with an huge passion for indie development

Learn more at https://wannabe-entrepreneur.com/coworking/


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rbyghtreor5hqfoukcjo.png)
5 - 100 DaysOfCode
Tags: 100daysofcode, ecommerce, analyst
Published: 2021-11-30 01:43:06

29NOV021
Today i was improving the modular diagram of the e commerce system.
I was thinking to add a **SSO** like (Facebook and Google) for the customers. 
For the intern users there will be a basic login with a recaptcha.

Also, i was thinking the possibility of add features for the sales persons to create customs links **for promote the articles in the social networks**, for counts the visit by the sales person.

For know I'm still in the Analysis Phase.
100 días de código: 25, 26 y 27, comenzando la semana.
Tags: spanish, 100daysofcode, webdev
Published: 2021-11-30 00:52:28

¡Hey hey hey!

Bienvenidos a esta nueva entrada en la que explicare lo que ha sucedido en los últimos días que han sido muy ocupados.

No olviden marcar bien sus prioridades para poder escribir en el blog (no como yo).

### Antier:
- Practique 30 min de touch typing.
- Termine el ejercicio de Etch a Sketch de The odin project.
- Hice el deploy de la pagina de mi relación.

### Ayer:
- Practique 30 min de Touch typing
- Mejore el uso de ramas en git y comencé a usar mejores practicas en los commits.

### hoy:
- Complete los ejercicios de Javascript de la sección Fundamentals part 5.
- Complete la sección fundamentals part 5 de The odin project.
- Practique touch typing.
- Mejore el diseño de la pagina etch a sketch que había creado anteriormente.

He bajado bastante mi productividad este fin de semana pero este lunes ha sido un buen comienzo de semana con lo cual me siento productivo.

Espero que tengan un día excelente y mucho éxito con sus proyectos.
¡Adiós mundo!

PD: les dejo el png de la piedra que use en el proyecto piedra papel o tijera como cover.
Steps to create a React Typescript library
Tags: react, javascript, typescript, webdev
Published: 2021-11-30 00:46:53

## Introduction

This post will help you to publish your own react library to npm, so you can reuse your own component and functions.

This post is intended for people who just want to follow the steps without understand the details.

> Before start, You will need to have NPM, Typescript and other common dev dependencies installed

## Steps

First, create `tsconfig.json` file at your project root:
```json
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "declaration": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "jsx": "react",
    "outDir": "lib/esm",
  },
  "include": [
    "src"
  ],
  "exclude": ["node_modules", "lib"]
}

```

then run `npm init`, and modify `package.json` flie:
```json
...
  "main": "./lib/cjs/index.js",
  "module": "./lib/esm/index.js",
  "types": "./lib/esm/index.d.ts",
  "files": [
    "src"
  ],
  "scripts": {
    "build": "npm run build:esm && npm run build:cjs",
    "build:esm": "tsc",
    "build:cjs": "tsc --module commonjs --outDir lib/cjs",
    "publish": "npm publish"
  },
...
  "peerDependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/node": "16.11.10",
    "@types/react": "^17.0.37"
  },
  "dependencies": {
    "@types/react-dom": "^17.0.11"
  }
...
}

```


Add `.gitignore` file if you are using git:
```
# dependencies
/node_modules
```

Create `src` folder and `src/index.tsx` file:

```typesrcipt
import React from "react";

export function CheckLib(){
    return <div>Lib Ok</div>
}
```

Then run `npm run build` to create the build folder.

Run `npm publish` to publish your package.

Finally, you can use `npm install <your-package-name>` to install your library in other project.

> You may need to run `npm login` to login your npm account if you never logged in before.


## Run Local Version of Library

If you want to have a playground of your library or just want to use it.

Run `npm link` at your library root.
In your other project root run `npm link "You-Library-Name-Here"`.
After this, you should be able to find your library inside the node_modules folder.


## Notice
I tested this method with a project created by `create-next-app`. I assume this will work CRA as well.
If you find your project does not run your library, you may need to explore some more complex methods.
I'm using Windows for this method, if you're using Mac or other OS you may want to change build script to work with your CLI environment.

Thanks
Docs as Code Confluence
Tags: actionshackathon21
Published: 2021-11-30 00:41:44

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

Hi, as an introduction, I want to link a post that talked to me. [How Google, Twitter, and Spotify built a culture of documentation](https://dev.to/doctave/how-google-twitter-and-spotify-built-a-culture-of-documentation-3e0m)

Since I read that article, I am looking for a way to introduce that concept to my team.

The concept and implementation are relatively easy to achieve with Github Pages, Netlify, Vercel, etc. When it comes to internal documentation, more requirements appear, for example, authorization. I also didn't want to introduce another place to look for documentation.

Since we have Confluence, the idea is to have the benefit of the concept of docs as code and keep all our documentation in the same place. Confluence will handle the "hosting", indexing and authorization.

### My Workflow
[Note]: # (Please make sure the project links to the appropriate GitHub Actions repository, and includes [an open source license](https://choosealicense.com/) and README.)

{% github Bhacaz/docs-as-code-confluence %}

The action looks for a specific folder and publishes its contents to Confluence. It recreates the file structure and publishes the markdown content to a Confluence page.

### Submission Category: 

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

DIY Deployments

### 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)

I create a minimal example of usage with a functional workflow, a `docs` folder with markdown files, and some screenshots of the result in Confluence.

![Example in Confluence](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h3ndiqsvnjrgnoh9k2rd.png)

{% github Bhacaz/docs-as-code-confluence-demo no-readme %}

### Additional Resources / Info

There are still some must-have features to implement, but it's a good start for writing more technical documentation.
Is there an api/library in python for ray.so or carbon.now.sh?
Tags: python, carbon
Published: 2021-11-29 23:49:45

I have been looking for an API and/or library for websites like (https://ray.so/) and (https://carbon.now.sh/) my goals for using this API /  library is to interact with the website and download the image that is outputted I found a few so far but they don't work: [carbon-now-sh-API-Wrapper](https://github.com/pokurt/carbon-now-sh-API-Wrapper)(this one wasn't working) and [carbonsh](https://github.com/MrMarble/carbonsh)(this one wasn't saving the file).
My goal is to get something similar to this: [carbonara](https://github.com/petersolopov/carbonara) but for python.
Laravel Mapbox, easily integrate Mapbox inside your Laravel app
Tags: laravel, news, php, mapbox
Published: 2021-11-29 22:54:59

I have just released Laravel Mapbox, a Laravel package that allows you to add Mapbox to your views easily, with highly flexibility. 
It requires Laravel 8 and PHP 8.0 and up. 

Before installing the package, create a [Mapbox account](https://mapbox.com) to get your token.

### Installation
To install the package, all you have to do is run this command
```bash
composer require koossaayy/laravel-mapbox 
```
After the installation, add this key to the `.env` file
```
MAPBOX_TOKEN={your mapbox token here}
```
And lastly publish the config file using this command : 
```bash
php artisan vendor:publish --tag="mapbox-config"
```
Also don't forget to add CSS and JS files of Mapbox
```html
<link href='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.css' rel='stylesheet' />
<script src='https://api.mapbox.com/mapbox-gl-js/v2.6.0/mapbox-gl.js'></script>
```
And that's It you're good to go
### Usage
To show a map on a page, all you have to do is use : 
```html
<x-mapbox id="map" />
```
The package comes with a lot with other options, like markers, popups, interactivity, and a lot. 
You may check them [here](https://github.com/koossaayy/laravel-mapbox#usage)

If you like the package, give it a star, and everyone is more than welcome to contribute ♥
Day 486 : Golden
Tags: hiphop, code, coding, lifelongdev
Published: 2021-11-29 22:42:53

_liner notes_:
- Saturday : Actually the the show at the station AND on air! haha Won't last long because basketball is happening and pretty much conflicts with the show for like the next 4 months. haha We'll still be streaming the radio show online though. The recording of this week's show is at https://kNOwBETTERHIPHOP.com


![Radio show episode image of a photo taken in the studio booth at the radio showing show the mixing board, computer monitors, a mic, a phone and the WPRK logo etched in glass with the words November 27th 2021, For Real](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0102wiqin3kobaqj0x5w.jpg)

- Sunday : Had a pretty productive day. Did the https://untilit.works cyphers and got a project I've been messing with actually working. I celebrated by watching an episode of the live-action "Cowboy Bebop"!.

- Professional : Today, had a couple of meetings, but spent most of the day working on updating blog posts. Need to get them done by Wednesday.

- Personal : So I bought a few items that I'll be using on projects in the upcoming year. I'm going to start building out the applications so I can get a running head start once the new year happens. These projects will be some of the coolest things I've built in a minute.

![Aerial photo of a mountain range with some snow under a blue sky with a few clouds with a couple of lakes in the valley surrounded by green plains in Turin, Italy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jtnnfcf2ajmh5ib6ahhh.jpg)

Whew, these longs breaks keep getting me used to not posting blogs. haha It could also be that it's getting dark earlier and it just slips my mind after work. Going to try and get ahead with updating the blogs. If I can get that done, I'll be golden. Well see. Going to watch another episode of "Cowboy Bebop" and call it a night.

Have a great night!

peace piece
Dwane / conshus
https://dwane.io / https://HIPHOPandCODE.com
{% youtube z-8lYOlCsYg %}
Prevent overflow but show all contents of section
Tags: javascript, webdev, react, css
Published: 2021-11-29 22:24:39

Hello, I am new to React but I am trying to learn it in order to create a personal website. I am creating a "Timeline" section on my website followed by a "Contact" one. How can I prevent the Timeline section's contents from overflowing into the next section but also show all the contents of the Timeline section? . This is what it currently looks like: The blue portion is where the contact section starts
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ravps5r8u0umx956jtgg.png)

Edit: App.jsx
```
function App() {
  const [menuOpen, setMenuOpen] = useState(false)
  return (
    <div className="app">
      <Navbar menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <Menu menuOpen={menuOpen} setMenuOpen={setMenuOpen}/>
      <div className="sections">
        <Intro/>
        <Timeline/>
        <Contact/>
      </div>
    </div>
  );
}
```
app.scss
```
.app {
    height: 100vh;

    .sections {
        width: 100%;
        height: calc(100vh - 70px);
        // background-color: #1F1D36;
        position: relative;
        top: 70px;
        scroll-behavior: smooth;
        scroll-snap-type: y mandatory;
        scrollbar-width: none; // for firefox
        &::-webkit-scrollbar{
            display: none;
        }

        > * {
            width: 100vw;
            height: calc(100vh - 70px);
            scroll-snap-align: start;
        }
    }
}
```

EDIT: I have created a new post with the entire sandbox linked to it

https://dev.to/ssingh1997/how-to-prevent-an-icon-from-being-cut-off-5781