teleren/devto huggingface dataset:
Preparing a React course in public - modifying the DOM with Vanilla Js
Tags: javascript, webdev, tutorial, react
Published: 2023-10-12 15:50:39

I love Vanilla JavaScript.  

It feels so pure. 
_Back to basics_. No layers of complexity. 
Just,  «these functions are the browser's API; that's it, that's what you can do». 

Nothing more, nothing else. 

***

In the next exercise, my goal is for my class to understand that each framework, each library -  React, Vue, Angular, Next, Nuxt - essentially wraps and adds layers to the [browser's API](https://developer.mozilla.org/en-US/docs/Web/API).

Before diving into the code, I'll take a step back to review what the browser is...
Like, ok it's a program... that renders HTML, CSS, and executes JavaScript.

«_**Executes JavaScript**_» 🤔

We are going to open a blank, raw, console; 

![Screenshot of a blank console where we have added a heading to the empty body](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hmmnjkcgcuwp9s3rg8kq.png)

(this is the code from the screenshot)

```js
const el = document.createElement('h1')
el.textContent = 'Hello'
document.body.appendChild(el)
```

***

## First Exercise

Our starting point was a raw HTML (zero Js) rendering n `<article />` 

```html
       <article class="card">
          <h2>Hulk</h2>
          <img
              src="https://marvelcdb.com//bundles/cards/01050.png"
              alt="Hulk"
          />
        </article>
        ...
        <article...>
```

Our goal is to create these elements dynamically using [`document.createElement()`](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)

➡️ this is the function we need to implement:

```js
/**
 * @param {object} props
 * @param {{ code: string; name: string; image: string; }} props.cardInfo
 */
function Card(props) {
  const { cardInfo } = props;
  // TODO
}
```

***

Next: solution to the Vanilla JS exercise.

***

Cover image created by [leonardo.ai](https://app.leonardo.ai); prompt: «Renaissance-era professor in a steampunk-style starting a fight. adorned with intricate, mechanical details.»; 3D Animation-Style.

Thanks for reading 💛.
3D button hover animation html, css
Tags: freecodez, react, html, blog
Published: 2023-10-12 15:33:51

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**3D button hover animation html, css**

![3D button hover animation html, css](https://res.cloudinary.com/freecodez/image/upload/v1697124826/images/amxki7ye7mfloz1nxuxb.webp)

For full source code visit : [https://freecodez.com/post/y1pgpyk](https://freecodez.com/post/y1pgpyk)


```
<!-- https://freecodez.com -->
<div class="box">BUTTON</div>

```

Source Code : [https://freecodez.com/post/y1pgpyk](https://freecodez.com/post/y1pgpyk)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Started working on a Free Carousel Post Maker
Tags: marketing, socialmedia
Published: 2023-10-12 15:31:15

Working on building a Carousel Post Maker for [**Awesome Social**](https://www.awesomesuite.com/social)

Working towards releasing a series of productivity tools for social media creators.

Not only these tools are easy to make, and your users love them, but I am realizing they are far more easier to rank and promote than a blog post.
Python - Use Context Managers
Tags: python, programming, tutorial
Published: 2023-10-12 15:30:00

Context managers in Python are a tool for managing resources, such as files, network connections, or database connections. They ensure that resources are acquired and released properly, even in the presence of exceptions. Context managers are typically used with the `with` statement.

The built-in `with` statement is used to create a context manager, which has two main methods: `__enter__()` and `__exit__()`. The `__enter__()` method is executed when entering the `with` block, and the `__exit__()` method is executed when exiting the block. The `__exit__()` method is responsible for cleaning up resources and handling exceptions.

Here's an example of using a context manager to open and close a file:

```python
# Using a context manager to open and close a file
with open('example.txt', 'r') as file:
    data = file.read()
    # File is automatically closed when exiting the 'with' block

# Outside the 'with' block, the file is already closed
```

Benefits of using context managers:

1. **Resource Management**: Context managers ensure that resources are properly acquired and released, even if an exception occurs. This prevents resource leaks.

2. **Cleaner Code**: Context managers make your code cleaner and more readable by encapsulating resource-related operations within a well-defined context.

3. **Safety**: Context managers help avoid common programming errors related to resource management, such as forgetting to close a file.

4. **Consistency**: By using context managers, you ensure a consistent and predictable pattern for working with resources across your codebase.

You can also create your own custom context managers by defining a class with `__enter__()` and `__exit__()` methods. For more advanced scenarios, the `contextlib` module provides tools for creating context managers using functions and decorators.

Understanding and using context managers is essential for writing robust and reliable Python code, especially when dealing with external resources. It promotes good coding practices and helps prevent resource-related issues.
Week 2 project :Comparing linear regression and random forest regression models for Airbnb booking prices prediction.
Published: 2023-10-12 15:16:33

**Introduction**

In statistics,** linear regression** is a linear approach for modelling the relationship between a scalar response and one or more explanatory variables (also known as dependent and independent variables). The case of one explanatory variable is called simple linear regression; for more than one, the process is called multiple linear 

1.  linear regression can be used if the goal is; 

- Error reduction in prediction or forecasting in smaller data sets
 Simple and Straight forward interpretability
- To explain variation in the response variable that can be attributed to variation in the explanatory variables
- To quantify the strength of the relationship between the response and the explanatory variables, 

2. ** Random forest Regression**
Random forest is a statistical algorithm that is used to cluster points of data in functional groups. When the data set is large and/or there are many variables it becomes difficult to cluster the data because not all variables can be taken into account, therefore the algorithm can also give a certain chance that a data point belongs in a certain group.

Random forest regression can be used  when the goal is;

-To capture complex non linear relationships
- To provide feature important scores
- To capture intricate patterns
- To provide more stable and robust prediction to when dealing with larger data sets

To make the decision I tested the two models using the same dataset and from the output RandomForest regression was the most fit model since it had lesser Mean Squared Error. 
Here's a link to the project [Airbnbs Price Prediction.](https://github.com/Silvia-nyawira/predicting-Airbnb-booking-prices[]))
Fixing Ubuntu/Linux Mint INITRAMFS Error Without a Live CD
Tags: linux, ubuntu, initramfs
Published: 2023-10-12 15:08:20

## How to Fix Initramfs Error?

Hello everyone,

The initramfs error is a situation that all of us have encountered at some point and can be quite frustrating :).

If you look at forums to solve this error, you might have seen that many people suggest solving this issue with a live CD. However, I will now explain how you can resolve it directly from the error screen without using a live CD.

First of all, let's follow these steps while on the initramfs screen:

1. In the first step, type the `exit` command and wait for the error screen to show you which disk the error is on. For example, in my case, it showed as `/dev/sdb3`. In your case, it might be `/dev/sda1`.

2. After identifying the disk with the error, you can start the repair process using the `fsck` command. For example:

   ```shell
   fsck /dev/sdb3 -y
   ```

3. When the process is complete, you can use the `reboot` command to restart the system or the `exit` command to exit from the initramfs screen.

By following these steps, you can resolve the initramfs error. I hope this guide is helpful to you. Good luck!
A new and very useful web component 🚀
Tags: webcomponents, javascript, datavisualization, opensource
Published: 2023-10-12 14:36:29



I'm thrilled to introduce you to a new web component – [Chart Ease](https://n-yousefi.github.io/chart-ease/). It's designed to simplify the process of creating custom charts and graphs and empowers you to effortlessly craft stunning visuals using straightforward HTML and JavaScript code. Chart Ease makes creating visual data representations a breeze, allowing you to specify your data and have complete control over each part of your chart, including extensive style customization options. Welcome to a world where elegant, custom charts are just a few lines of code away! 📈✨

![Simple](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsujdn1wy1msxlnj3mah.png)

🌟 First Beta Release Alert! 🌟

We've just released the first beta version of Chart Ease! 🎉🎉 This means you can get your hands on it, explore its features, and start using it right away. Your feedback is what we value most. So, after giving it a try, please share your thoughts, opinions, and any issues you might encounter.

🌠 Join the Journey!

I've dedicated a lot of effort to create Chart Ease, and I'm a bit tired but incredibly excited to see it in your hands. Your support is greatly appreciated, so please show your support by giving Chart Ease a star on GitHub. 🙏🙏🙏

Thank you in advance for being part of this exciting journey, and let's make our data visualization tasks a breeze with Chart Ease! ⭐

Create your first stunning chart now:

https://n-yousefi.github.io/chart-ease/
https://github.com/n-yousefi/chart-ease
Avoid the Promise.all pitfall! Rate limit async function calls
Tags: javascript, webdev, programming
Published: 2023-10-12 14:31:25

Have you fallen into the `Promise.all` pitfall?  You know the one; you grab a list of things from somewhere and run a parallel function against all of them:

```js
     const list = await getMeSomeList()
     const results = await Promise.all(list.map(someAsyncFunction))
``` 

Works a treat when the list has a few things in it, but lets say there are suddenly 10,000 records returned - this could really get messy.

You are really trying to spin too many plates, and memory or resources are going to become tight...

![Man spinning many plates](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b4p2qzmbh48397wlvrtu.png)

## The Solution

Well you could just install the [async package](https://www.npmjs.com/package/async) which has lots of useful functions like `mapLimit` which will reduce the burden and only run a number in parallel.

If that's overkill - then you can achieve a similar result using a simple rate limiter:


```js
class Semaphore {
    constructor(maxConcurrency) {
        this.maxConcurrency = maxConcurrency
        this.currentConcurrency = 0
        this.queue = []
    }

    async acquire() {
        return new Promise((resolve) => {
            if (this.currentConcurrency < this.maxConcurrency) {
                this.currentConcurrency++
                resolve()
            } else {
                this.queue.push(resolve)
            }
        })
    }

    release() {
        if (this.queue.length > 0) {
            const resolve = this.queue.shift()
            resolve()
        } else {
            this.currentConcurrency--
        }
    }
}

export function rateLimit(asyncFunction, rate) {
    const semaphore = new Semaphore(rate)

    return async function process(...args) {
        await semaphore.acquire()
        try {
            return await asyncFunction(...args)
        } finally {
            semaphore.release()
        }
    }
}

```

With that in hand your code would change to be just this:

```js
     const list = await getMeSomeList()
     const results = await Promise.all(list.map(rateLimit(someAsyncFunction, 20))
``` 

This would mean that it would keep 20 running at a time until the list way finished.  Every time one of the `someAsyncFunction`s returns another one is started until the list is exhausted.  Easy right :)






{% codesandbox n4dpo initialpath=/pMKmmo-VmriUW6FFMWPWx/embed runonclick=0 %}
Магазин верифицированных аккаунтов каршеринга, аренда. С накатанными часами!
Tags: kupit, akkaunty, carsharing
Published: 2023-10-12 14:31:09

Доброго времени суток.📢

Мы в Teлеграм - https://t.me/s/car_acc

Мы ВКонтакте - https://vk.com/car_acc

Наш сайт - https://kupi-carshering.ru

У нас Вы можете приобрести готовый аккаунт в сервисах каршеринга. Покупка на бессрочный период невозможна, такие бесконтрольные аккаунты очень быстро блокируют и стоимость у них совершенно другая. 💰

Что вы получаете?

✔️ готовый аккаунт с уже имеющимися персональными данными, документами других водителей;

✔️ возможность заказать привязку виртуальной карты QIWI или YMoney к Вашему аккаунту, если не хотите привязывать свою карту (за отдельную стоимость);

✔️ отсутствие запросов биометрии;

✔️ поддержку по любым вопросам, помощь в решении вопросов с технической поддержкой сервисов на протяжении всего срока аренды аккаунта;

✔️ полное сохранение Вашей анонимности.

Всё ОЧЕНЬ просто: оплатил, сел, поехал. ✅

Подписка на всех аккаунтах включает в себя иммунитет к незначительным повреждениям, поэтому если где-то появится царапина и т.д. Ваш аккаунт не побеспокоят и Вы продолжите им спокойно пользоваться. 👍

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qqym91w97icodwu54c8r.jpg)
Теги для поиска:
купить аккаунт каршеринга	
купить аккаунт каршеринга +в москве
купить аккаунт каршеринга делимобиль
где купить аккаунт каршеринга
купить аккаунт каршеринга спб
купить аккаунт каршеринга +в москве цена
купить аккаунт каршеринга cars7
купить аккаунт каршеринга +в москве делимобиль
аккаунт каршеринга
купить аккаунт каршеринга
чужой аккаунт каршеринга
делимобиль каршеринг аккаунт
аккаунты каршеринга москва
купить аккаунт каршеринга +в москве
левый аккаунт каршеринг
купить аккаунт каршеринга делимобиль
аккаунт каршеринга бесплатно
каршеринг под чужим аккаунтом
+как удалить аккаунт +в каршеринге
каршеринг без аккаунта
штраф +за аккаунт каршеринг
аккаунт яндекс каршеринг
украли аккаунт каршеринга
каршеринг аккаунты спб
купить аккаунт каршеринга спб
где купить аккаунт каршеринга
аккаунт каршеринга данные
аккаунт сити драйв каршеринг
+как удалить аккаунт +в делимобиль каршеринг
взломанный аккаунт каршеринга
заблокировали аккаунт каршеринга
покупка аккаунта каршеринг
аккаунт яндекс драйв каршеринг
каршеринг без прав аккаунт
купить аккаунт каршеринга +в москве цена
создать аккаунт каршеринга
аккаунт водителя каршеринг
продажа аккаунтов каршеринга
купить аккаунт каршеринга cars7
купить аккаунт каршеринга +в москве делимобиль
передача аккаунта третьим лицам каршеринг
Entendendo a Diferença entre JavaScript e TypeScript
Tags: development, typescript, javascript, node
Published: 2023-10-12 14:27:14

JavaScript e TypeScript são duas linguagens amplamente utilizadas no desenvolvimento web e de aplicativos. Embora ambas estejam relacionadas e compartilhem semelhanças, existem diferenças fundamentais que os desenvolvedores devem entender para escolher a melhor linguagem para seus projetos. Neste artigo, exploraremos as principais diferenças entre JavaScript e TypeScript.


### **O Básico**
**JavaScript** é uma linguagem de programação de alto nível que foi criada para tornar as páginas da web mais interativas. É uma linguagem interpretada, o que significa que o código JavaScript é executado diretamente no navegador do usuário os browsers, mas também fora dele através do NodeJS.

**TypeScript**, por outro lado, é uma linguagem de programação desenvolvida pela Microsoft. Ela é uma _superset_ para o JavaScript que adiciona recursos de tipagem estática ao código, tornando-o mais robusto e escalável. O TypeScript é compilado para JavaScript antes da execução.

### **Tipagem**
Uma das diferenças mais marcantes entre as duas linguagens é a tipagem. JavaScript é uma linguagem de tipagem dinâmica, o que significa que as variáveis não têm tipos específicos atribuídos a elas e podem mudar durante a execução do programa. Isso pode levar a erros difíceis de rastrear em aplicativos complexos.

Por outro lado, TypeScript é uma linguagem de tipagem estática. Isso significa que as variáveis devem ter tipos específicos definidos e verificados em tempo de compilação. Isso ajuda os desenvolvedores a detectar erros mais cedo e a criar código mais seguro e previsível.

### **Autocompletar e Verificação de Erros**
O TypeScript oferece uma vantagem notável em termos de autocompletar e verificação de erros no ambiente de desenvolvimento. Editores de código que suportam TypeScript como VSCode são capazes de fornecer sugestões de código mais precisas e destacar erros em tempo real, tornando a codificação mais eficiente e reduzindo erros.

No JavaScript, a falta de informações de tipo pode dificultar a identificação de erros de sintaxe e lógica durante o desenvolvimento.

## **Conclusão**
A escolha entre JavaScript e TypeScript depende das necessidades do seu projeto e da preferência pessoal. JavaScript é uma linguagem versátil e amplamente utilizada que é ótima para projetos menores ou menos complexos. TypeScript, por outro lado, oferece recursos avançados de tipagem estática que podem ajudar a evitar erros e criar código mais seguro em projetos maiores e mais complexos.

Espero que este artigo tenha ajudado a esclarecer as principais diferenças entre JavaScript e TypeScript. Ambas as linguagens têm seus méritos e são valiosas no cenário de desenvolvimento de software atual.
I am a programmer from China.I am a programmer from China and am available to take on some projects.
Tags: china, java, go
Published: 2023-10-12 14:26:21

I am a programmer from China, proficient in golang, java, linux, and web. I am available to take on some projects. You can contact me on Discord: sof#1716.No deposit is needed; you can pay after the work is done. I'll ensure the results satisfy you.Discord: sof#1716. Skype: live:3204235868
Jai Shree Ram, Dussehra Special, Shree Ram Using Html, css, Happy Dussehra
Tags: freecodez, react, html, blog
Published: 2023-10-12 14:20:53

Hey there, You are most welcome to this article. I hope you will enjoy this article. If you like this article then please share this article with your friends and colleagues. If you have any questions or suggestions regarding this article then please comment down below.

**Jai Shree Ram, Dussehra Special, Shree Ram Using Html, css, Happy Dussehra**

![Jai Shree Ram, Dussehra Special, Shree Ram Using Html, css, Happy Dussehra](https://res.cloudinary.com/freecodez/image/upload/v1697120440/images/rolcawojumop3mfsnc8j.webp)

For full source code visit : [https://freecodez.com/post/sjv82y1](https://freecodez.com/post/sjv82y1)


```
<!-- https://freecodez.com -->
<div class="arrows"></div>
<div class="container">
    <div class="wrapper">
        <div class="img1">
            <img
            src="https://res.cloudinary.com/freecodez/image/upload/v1694949729/images/s7sweladttaja5ueyexx.webp"
            alt="img1"
          />
        </div>
        <div class="img2">
            <img
            src="https://res.cloudinary.com/freecodez/image/upload/v1694949729/images/s7sweladttaja5ueyexx.webp"
            alt="img2"
          />
        </div>
        <div class="img3">
            <img
            src="https://res.cloudinary.com/freecodez/image/upload/v1694949748/images/njofz6tzqdj5qsbb7kek.webp"
            alt="img3"
          />
        </div>
        <div class="img4">
            <img
            src="https://res.cloudinary.com/freecodez/image/upload/v1697115000/images/grmskbr3wbnkbba2yfre.webp"
            alt="img4"
          />
        </div>
    </div>
</div>
```

Source Code : [https://freecodez.com/post/sjv82y1](https://freecodez.com/post/sjv82y1)

For more such articles visit : [https://freecodez.com](https://freecodez.com/all)
Data Product Possibilities and Opportunities!
Tags: datascience, dataengineering, productivity, news
Published: 2023-10-12 14:07:25

Data products have proven to be essential for companies looking to maximize their return on investment (ROI). As a proven investment, they offer a clear competitive advantage by helping organizations make informed, strategic decisions.

One of the main benefits of data products is the ability to analyze the performance of different business areas. By exploring relevant data sets, companies can identify gaps and areas for improvement, allowing them to focus their efforts on initiatives with the most significant impact. This results in a more efficient allocation of resources and, consequently, an increase in ROI.

With data products, we have an in-depth view of customer behavior. Understanding consumers' preferences, needs, and expectations is essential for directing marketing and sales strategies. By using data products to segment the target audience, personalize offers, and implement targeted campaigns, companies can increase the effectiveness of their actions, achieve better results, and, consequently, increase their ROI.

Another critical aspect of data product ROI is identifying growth opportunities. Companies can identify untapped gaps and anticipate future demands by analyzing market data, competition, and trends. This strategic vision allows organizations to innovate in products and services, positioning themselves ahead of the competition and achieving a significant financial return.

It is essential to mention that the importance of data products in ROI is not restricted to large companies. Even small and medium-sized companies can benefit from data analysis to make more informed decisions and efficiently direct their resources. With access to increasingly affordable data analytics tools and solutions, these companies can compete smarter and achieve a more favorable ROI.

Data products play a crucial role in achieving sustainable ROI. They can offer valuable insights, allowing companies to confidently make strategic decisions. Companies can achieve exceptional results and a positive ROI by analyzing data, segmenting audiences, identifying growth opportunities, and optimizing resources. Therefore, do not underestimate the importance of data products in pursuing business effectiveness and success.

To know more:

https://jlgjosue.medium.com/discovering-data-product-options-0f5a53ec8f39

{ Thank you for reading; share this post, please! } :)
SQL Joins Infographic
Tags: sql, database
Published: 2023-10-12 14:05:49

Credit to C.L. Moffatt, 2008.

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

---

Joining tables in a SQL query is a powerful skill. This info graphic illustrates how each type of join behaves:

* LEFT JOIN
* RIGHT JOIN
* INNER JOIN
* FULL OUTER JOIN