teleren/devto huggingface dataset:
ES6: Promises
Published: 2022-12-22 15:53:12

---
title: ES6: Promises
published: true
description:
tags: 
# cover_image: https://freeimage.host/i/HzQmFF2
# Use a ratio of 100:42 for best results.
# published_at: 2022-12-22 15:03 +0000
---

ES6 Promises is probably the topic that is the worst explained everywhere and always 🫣 . 
Promise is an object✨, if you open web inspector, click the console and print :

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

You will see that it has actually 3 properties but we are interested in two:
  * **[[PromiseState]]** - a state that has 3 states itself,
  * and **[[PromiseResult]]**.

Let's explain what **[[PromiseState]]** values are and what each one means. 
 * First one is **fulfilled**: it means that everything was completed successfully, 
 * Second one is **rejected**: an error occurred and it was rejected, 
 * and last one is **pending**: we are still waiting for a response, neither resolved nor rejected. 

As for **[[PromiseResult]]**, it has two states:
 
  * **undefined** - when nothing has been returned yet.
  * and **the value that we pass to the either the resolved or rejected method as their argument.**

Now let's explain how these conditions change. In the promise printed above, we put an arrow function that does nothing, however, the promise callback function is generally given two arguments, resolve and reject, which will be called depending on how successfully the callback function completed. Let's make it clearer so that we can write something like that


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


We will see that 
 * **PromiseState** - is already **fullfiled** (even though it prints resolved in the console, it is a bug of the browser)
 
 * and **PromiseResult**: **completed**, similarly, if we returned rejected("reject"), the state would be: **"rejected"** and value: "reject" .

If we take a look into the Promise prototype, we will see 3 built-in methods: 
 * **then()** - which is called if the Promise is resolved, 
 * **catch()** - which is called if it is rejected,
 * and **finally()** - which is always called, regardless of the return state. 
**then()** and **catch()** returns a Promise itself, which gave us possibility to pass another callback function , so
it allows us to build a whole chain of promises.


Let's talk about where the promise goes in the event loop. As we know, the asynchronous calls that the browser sends first go to **web api** -> then the results goes in the **queue** -> and when the call stack finishes, they will return in sequence from the queue. 
**Queue**- itself is divided into 2 types of queues,
  * **the first is the queue of macrotasks**: setTimeOut, setInterval, setImmediate etc.
  * **the second is the queue of microtasks**: process.nextTick, Promise callback, async functions, queueMicrotask...

When the stack is finished, first it returns microtasks and then the macrotasks are released from the queue. That is, the promise will always return from the queue earlier than setTimeOut 🤌.
CodeNewbie Season 22 Episode 7! Starting out in Open Source with Brian Douglas
Tags: codenewbie, podcast, opensource
Published: 2022-12-22 15:30:25

---
title: CodeNewbie Season 22 Episode 7! Starting out in Open Source with Brian Douglas
published: true
description: 
tags: codenewbie, podcast, opensource
cover_image: https://community.codenewbie.org/remoteimages/uploads/articles/62iytwcwyxub5c142g57.png
---

In S22E7 of the CodeNewbie Podcast, @saronyitbarek talks about learning to code, starting a company, takeaways from working at startups, open source insights, and learning through rejection with [Brian Douglas](https://twitter.com/bdougieYO), Founder at [OpenSauced](https://opensauced.pizza/). 

{% embed https://community.codenewbie.org/codenewbiepodcast/s22e7-starting-out-in-open-source-brian-douglas %}

Brian Douglas (aka @bdougieyo) is the founder and CEO of [OpenSauced](https://opensauced.pizza/), where he works on increasing the knowledge and insights of open-source communities. In the past he’s led Developer Advocacy at GitHub by fostering a community of early adopters through conversations with the top open source maintainers on GitHub.

- [Listen on Apple Podcasts](https://podcasts.apple.com/us/podcast/s22-e7-starting-out-in-open-source-brian-douglas/id919219256?i=1000590912547)

- [Listen on Spotify](https://open.spotify.com/episode/7ll0samrqucEiRwqPhQgfh?si=b699898cf6cd4b35)

Or, listen wherever you normally get your podcasts!

***

**Make sure to subscribe to the CodeNewbie podcast if you haven't yet!**

Happy coding! We hope you enjoy this season of the CodeNewbie Podcast 💜
XML External Entity (XXE) Vulnerability - Part 3 (Local DTD Enumeration)
Tags: webdev, tutorial, security, xml
Published: 2022-12-22 15:30:00

Exploring how to enumerate local Document Type Definitions (DTDs) and exploit XML External Entity (XXE) vulnerabilities can be a great way to identify and exfiltrate sensitive files and data.
 
{% embed https://blogs.appsecworld.com/2022/12/xml-external-entity-xxe-part-3-local-dtd-enumeration.html %}
Different approaches to testing your own packages locally: npm link
Tags: npm, node, beginners, tutorial
Published: 2022-12-22 15:25:50

This is part of a series of articles:

> 1. [Linking local files](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-1kdg)
> 2. **npm link**
> 3. [npm yalc](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-npm-yalc-3l97)
> 4. [Verdaccio](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-verdaccio-5hd8)
> 5. [Relative deps](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-locally-relative-deps-2c17)

---

## npm link

This is a very easy and straightforward solution. This [npm command](https://docs.npmjs.com/cli/v9/commands/npm-link) creates a symlink to a package folder. 

To be able to use your own local libraries, you need to follow two simple steps: 

1. First, run `npm link` from the root of your local package folder. This will create a symlink in the global folder `{prefix}/lib/node_modules/<package>` that links to the package where the npm link command was executed. It will also link any bins in the package to `{prefix}/bin/{name}`. 

    `{prefix}` is an npm variable that will depend on your operating system. To know the current value for your specific case, you can run `npm prefix –g`. 

    Following the example of the [first part](https://dev.to/one-beyond/different-approaches-to-testing-your-own-packages-1kdg) of the series:

    ![Projects structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dflbwnbsi5bbzvzu04rj.png)

    Let’s imagine we have a local package called `@ks/my-fancy-library` (defined in the name attribute of the `package.json` file) in a folder called my-fancy-library.  

    ```bash
    $ npm prefix –g 
    $ /Users/inigo/.nvm/versions/node/v16.13.1 
    $ cd my-fancy-library  
    $ npm link 
    ```
    <br />
    This will produce a symlink in the following location:

    ![Symlink of the library in the global npm folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/k5eqtvsyflnc38fx8uai.png)

2. Next, from the root folder of the project where you want to use your local package, just run `npm link <package-name>`. This will create a symbolic link from globally-installed package-name to `node_modules/` of the current folder. 

    ```bash
    $ cd my-awesome-project # root folder of the project where we want to use our package  
    $ npm link @ks/my-fancy-library 
    ```
    <br />
    This will produce a symlink in the `node_modules` folder.

![Symlink of the library in the project's node_modules folder](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/q5qt7wackrwpt8ooykuu.png)

Then, from our project `my-awesome-project`, we will be able to import and use the local library `@ks/my-fancy-library`.

> 🚨 **Important**
> When running these commands, the current node version used is taken into account. If you want to test the library in different node environments, you need to repeat the process for each node version.
CodePen Designs - 8 : ThreeJS Toys - Particles Cursor
Tags: codepen, css, design, codependesign
Published: 2022-12-22 15:19:36

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 8

<p><a href="https://github.com/klevron/threejs-toys" target="_blank">https://github.com/klevron/threejs-toys</a></p>

{% codepen https://codepen.io/soju22/pen/KKQaGrE %}

 

---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
What is ARIA & why is Important t use?
Tags: beginners, webdev, html
Published: 2022-12-20 22:11:22

ARIA, or the Accessible Rich Internet Applications suite, is a set of standards developed by the World Wide Web Consortium (W3C) to help make the web more accessible to people with disabilities. These standards provide a set of attributes that can be added to HTML elements to provide additional information about the element's role, state, and behavior to assistive technologies such as screen readers.

####Using ARIA is important for several reasons:

1. Improved accessibility: ARIA attributes help to provide additional context and information about elements on the page to assistive technologies, which can improve the accessibility of the page for users with disabilities.

2. Better user experience: By providing additional information about the purpose and behavior of elements on the page, ARIA can help to improve the overall user experience for all users, not just those with disabilities.
 
3. Legal compliance: In many countries, there are laws and regulations that require websites to be accessible to people with disabilities. Using ARIA can help to ensure that a website is compliant with these requirements.
 
4. SEO benefits: Google has stated that it takes accessibility into account when ranking websites in search results. Using ARIA can help to improve a website's SEO by making it more accessible to search engines and users alike.

Using ARIA is not a replacement for good semantic HTML, but rather an additional tool that can be used to enhance the accessibility of a website. It is important to carefully consider the use of ARIA attributes and to ensure that they are used appropriately and in conjunction with good semantic HTML.

In summary, ARIA is an important tool for improving the accessibility and usability of websites for people with disabilities, and its use can also bring benefits for all users and for SEO.
Tokyo Revengers
Tags: anime
Published: 2022-12-22 14:52:07


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qgpn3l5rhzy9l8w8mzd8.png)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d27owrmfuu9286zphum0.png)
Growth Marketing as a Developer SaaS founder
Tags: growthmarketting, saas
Published: 2022-12-22 14:47:36

Growth marketing is a data-driven approach to marketing that focuses on finding and scaling successful marketing tactics and strategies. It involves continuous experimentation, iteration, and optimization to drive sustainable growth for a business.

One of the key principles of growth marketing is to start with a hypothesis about what will drive growth for your business and then test that hypothesis through A/B testing or other forms of experimentation. This allows you to make informed decisions about which tactics are working and which are not, and to continuously improve and refine your marketing strategy.

Another important aspect of growth marketing is to focus on the customer journey and identify opportunities for optimization at each stage. This might involve improving the user experience on your website, enhancing your email marketing campaigns, or finding ways to increase customer loyalty and retention.

One key tool in the growth marketer's toolkit is data analysis. By tracking and analyzing key metrics such as website traffic, conversion rates, and customer lifetime value, you can gain insights into what's working and what's not, and make informed decisions about where to focus your efforts.

Growth marketing also requires a culture of experimentation and continuous learning. This means being willing to try new things, to fail fast, and to learn from your mistakes. It's important to keep an open mind and be willing to pivot your strategy if something isn't working, and to be flexible and adaptable as you seek to drive growth for your business.

Overall, growth marketing is a proactive and data-driven approach to marketing that focuses on finding and scaling successful tactics and strategies to drive sustainable growth for a business. By constantly testing and iterating, you can continually improve and optimize your marketing efforts to maximize results.
Transform the data from intersection point
Tags: python
Published: 2022-12-22 14:46:27

Hi,
How will transform the data from intersection point onwards like below image.

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

please help me nay sample code share.
ex: i.e from y-axis -4.5
Top 20+ Free and Premium Bootstrap Dashboard Templates to Consider in 2023
Tags: bootstrap, webdev, javascript, top
Published: 2022-12-22 14:40:33

Bootstrap is a well-known front-end framework that offers a consistent and dependable base for developing responsive, mobile-first web apps. It’s no surprise that Bootstrap has become a go-to choice for developers all around the world, with its emphasis on accessibility, ease of use, and customizable components. If you want to construct a dashboard for your next project, you should think about [using a Bootstrap template](https://flatlogic.com/blog/top-20-bootstrap-dashboard-templates-to-use-absolutely-free/). These templates offer a pre-designed layout that can be tailored to your exact requirements, saving you time and effort during the development process.

We’ll look at 20+ of the top free and premium [Bootstrap dashboard templates](https://flatlogic.com/templates/admin-dashboards) to consider in 2023 in this article. You’re developing a simple project management tool or a large data visualization platform.
Trendo Invest
Tags: webdev, beginners, python
Published: 2022-12-22 14:40:30

[Trendo invest](https://trendoinvest.com/) is a platform where you can get the latest News on Cryptocurrency News and Your Money Advisors, Finance, Budgeting, Insurance, and Wealth Management.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/l9j3ny0prd3moycq63zx.jpg)
Enhance Your ChatGPT Skills with the Expertise and Insights of the gptoverflow.link Community
Published: 2022-12-22 14:36:54

As a fan of chatGPT and related models, are you always on the lookout for new ways to improve your skills and knowledge in this field? If so, then [gptoverflow.link](https://www.gptoverflow.link/) is the perfect community for you.

Gptoverflow.link is an online platform that operates similarly to StackOverflow, where users can ask and answer questions related to chatGPT and related models. It's a go-to destination for everything chatGPT, with a wealth of information and resources at your fingertips.

One of the best parts about joining [gptoverflow.link](https://www.gptoverflow.link/) is the opportunity to connect with like-minded individuals. The community is made up of chatGPT enthusiasts from around the world, bringing a diverse range of perspectives and expertise to the table. You'll have the chance to collaborate with and learn from experts in the field, as well as share your own knowledge and experience with others.

In addition to the wide range of resources available on the platform, such as articles, tutorials, and code snippets, gptoverflow.link also offers a number of helpful tools and features. For instance, the voting system allows users to upvote or downvote questions and answers, highlighting the most useful and relevant information. The comments section provides a way for users to engage in discussion and offer feedback on questions and answers, making it easy to get clarification and guidance from the community.

Another great feature of [gptoverflow.link](https://www.gptoverflow.link/) is the ability to share interesting prompts and questions with the community. This not only allows you to get feedback and suggestions from others, but it also gives you the chance to contribute to the knowledge base and help others learn. Whether you want to share your own prompts or discover new ones, [gptoverflow.link](https://www.gptoverflow.link/) is the perfect place to do it.

So, why should you join [gptoverflow.link](https://www.gptoverflow.link/)? The benefits are clear:

    

- Connect with like-minded individuals and experts in the field
    

- Access a wealth of information and resources on chatGPT and related models
    

- Use helpful tools and features to enhance your learning experience
    

- Share and discover interesting prompts and questions with the community

In conclusion, [gptoverflow.link](https://www.gptoverflow.link/) is an invaluable resource for anyone interested in chatGPT and related models. So don't hesitate – join the [gptoverflow.link](https://www.gptoverflow.link/) community today and take your chatGPT skills to the next level!
Java Burn - Weight Loss Benefits, Uses, Results, Does It Work?
Tags: webdev, javascript, beginners, programming
Published: 2022-12-22 14:35:28

[Java Burn](url) burner, it's far better learn from other's is afflicted with. Read what they in order to say in a manner that they rate the product of choice through professionally written reviews. But as you browse through these reviews, use your good judgment. Now you can write and publish reviews on the Internet, so choose runners who are authored by experts and actual [](https://www.outlookindia.com/outlook-spotlight/java-burn-coffee-update-2022-hidden-truth-that-will-surprise-you-and-change-your-mind-news-233766)
https://www.click.in/gurgaon/java-burn-weight-loss-results-benefits-price-and-review-c75-v50513978
https://javaburnfacts.wixsite.com/javaburnfact
https://melaninterest.com/pin/java-burn-weight-loss-benefits-uses-results-does-it-work/
https://lexcliq.com/java-burn-weight-loss-results-benefits-price-and-review/ 
https://java-burnfacts.clubeo.com/news/2022/12/22/java-burn-weight-loss-benefits-reviews-uses-and-results
https://mdsakhna.podbean.com/
https://soundcloud.com/java-burn/javaburninfo
https://www.facebook.com/profile.php?id=100088567854397
https://in.pinterest.com/pin/1072208623790110285/
https://www.scoop.it/topic/java-burn-facts
https://www.instagram.com/javaburnfact/
https://twitter.com/javaburnfact
https://www.launchora.com/story/java-burn-weight-loss-results-benefits-price
https://www.sportsblog.com/javaburnfact/
How To Design Table With HTML and CSS
Published: 2022-12-22 14:05:38


In this article you will learn how to design a table using HTML and CSS.

 A table consists of rows and cells. Each row is represented by the 'tr' element, and each cell is represented by the 'td' element. For example:
```HTML
<table>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
```

Add a caption to the table using the 'caption' element. This element should be placed immediately after the opening 'table' tag
```HTML
<table>
  <caption>Table Caption</caption>
  
</table>
```

Add headings to the table using the 'th' element. This element should be used in place of the 'td' element for cells that contain headings.
```HTML
<table>
  <tr>
    <th>Heading 1</th>
    <th>Heading 2</th>
  </tr>
  <tr>
    <td>Cell 1</td>
    <td>Cell 2</td>
  </tr>
  <tr>
    <td>Cell 3</td>
    <td>Cell 4</td>
  </tr>
</table>
```
Style the table using CSS. You can use the table, th, and td selectors to style the various parts of the table. For example:
```CSS
table {
  border-collapse: collapse;
}

th, td {
  border: 1px solid black;
  padding: 8px;
}

th {
  background-color: lightgray;
  font-weight: bold;
}
```

You can use a variety of CSS properties to further customize the appearance of the table, such as font-size, color, and text-align.

Note: It's also possible to use CSS classes or inline styles to style specific rows or cells within the table.
##Conclusion
Hopefully, after going through this article, you will understand the basic `HTML` steps of creating tables and styling the `HTML` code with `CSS`
How To Access And Render Data Attributes With CSS & JavaScript
Tags: css, webdev, javascript, dataattribute
Published: 2022-12-22 14:23:16

---
title: How To Access And Render Data Attributes With CSS & JavaScript
published: true
date: 2022-12-22 13:38:31 UTC
tags: css,webdevelopment,javascript,dataattribute
canonical_url: https://medium.com/@olaoyevick/how-to-access-and-render-data-attributes-with-css-javascript-6acdfc701be6
---

![](https://cdn-images-1.medium.com/max/1024/0*nbrVWK0PkkL-6MOB)
_Photo by Goran Ivos on Unsplash_

Data attributes gives us the ability to embed custom data attributes in HTML. According to [MDN](https://developer.mozilla.org/en-US/docs/Learn/HTML/Howto/Use_data_attributes), data attributes allows us to store extra information on standard semantic HTML elements without other hacks such as non-standard attributes, or extra properties on DOM.

The beauty of these data attributes is that, it can be accessed in CSS and JavaScript. Let’s see an example of how it works with CSS first:

```
<b data-content="John Doe"></b>
<style type="text/css">
  b::after{
       content: attr(data-content);
  }
</style>
```

> From the above CSS code block, we can see that the ::after pseudo-class selector uses [content](https://developer.mozilla.org/en-US/docs/Web/CSS/content) property to render the data attribute. In this context, it renders “John Doe” as the data content.

Also, JavaScript can be used to access and render data attributes on the web page. Let’s see an example below:

```
var name = b.document.getElementById("name");

console.log(name.dataset.parent);
```

> From the example above, we can see that the data attribute is being accessed with the dataset property and then logged onto the console.

#### Notable References

- [data-\* - HTML: HyperText Markup Language | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/data-*)
- [HTML](https://html.spec.whatwg.org/multipage/dom.html#domstringmap)
- [How to Use HTML5 Data Attributes - SitePoint](https://www.sitepoint.com/use-html5-data-attributes/)