teleren/devto huggingface dataset:
How to build a Traffic Light simulator (React Js Interview question)
Published: 2023-09-14 17:54:22

In this comprehensive tutorial, I will walk you through the step-by-step process of creating a Traffic Light Simulator using React JS. This project is not only a great exercise for mastering React but also a valuable resource for anyone preparing for React JS interview questions.

🚦 You'll learn:
- Setting up a React JS development environment
- Creating a visually appealing traffic light interface
- Managing component state and transitions
- Implementing the logic behind the traffic light sequence
- Tips and insights for answering React JS interview questions

Whether you're a beginner looking to enhance your React skills or a job seeker preparing for interviews, this tutorial has you covered. Join us as we dive into the world of React JS and tackle this exciting project!

{% embed https://www.youtube.com/watch?v=5ZefcXGTQE0 %}
#DEVDiscuss: JavaScript Runtimes
Tags: devdiscuss, discuss
Published: 2023-09-14 17:41:15

---
title: #DEVDiscuss: JavaScript Runtimes
published: true
description: 
tags: devdiscuss, discuss
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bslouhkp1m62nbt9lz3n.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-07-26 18:51 +0000
---
Time for #DEVDiscuss — right here on DEV 😎

{% embed https://dev.to/thevinitgupta/discover-bun-a-faster-modern-javascript-runtime-5fob %}

Inspired by @thevinitgupta's Top 7 post, tonight’s topic is... JavaScript Runtimes!
 
You might dread another JavaScript tool, but there have been a lot of modern changes that caused JavaScript runtimes to become lighter and faster, such as: common use of JSX, yearly new releases of ECMAScript, and the popularity of TypeScript. 

### Questions:
- **How does the choice of JavaScript runtime affect web application performance and user experience?**
- **What have you noticed about how JavaScript tools have changed over the last five years?**
- **Are there any emerging JavaScript runtimes or technologies that developers should keep an eye on?**
- **Any triumphs, fails, or other stories you'd like to share on this topic?**
O que é Clojure?
Tags: webdev, beginners, programming, coding
Published: 2023-09-12 02:27:45




<u>Clojure </u> é um dialeto moderno de Lisp, desenvolvido por Rich Hickey em 2007, focado em programação funcional. Baseada em funções matemáticas e estruturas de dados imutáveis, ela roda na JVM.

O mais interessante é que eu não sabia da existência dessa lang e descobri que a nubank usa ela e me perguntei,pq?

_"De acordo com Bruno, uma das vantagens de Clojure é ser uma linguagem mais objetiva. “Enquanto em Java é preciso escrever muito código para dar uma instrução ao objeto, Clojure é mais conciso”, explica.

Outra vantagem está na hora de testar. Como programação funcional preza pelo princípio da imutabilidade, fica mais simples criar testes e garantir que elas funcionem conforme o esperado. "_ (tirado do site da Nubank)


**https://blog.nubank.com.br/o-que-e-clojure/**

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


fiquei curiosa em saber dessa nova linguagem!!
Recommitting to this blog
Tags: writing, learning
Published: 2023-09-14 17:19:03

I am going to attempt to write more in this blog. I'm not sure what I'll write about but I think writing more is beneficial.

Writing helps me refine my thoughts. It's easy to jump from thought to thought in your head. You can't jump away from words on a page, or a screen, the same way; they provide a anchor that shows you what you were last thinking about. Without that anchor its easy to get swept away and never return to the actual point of your initial thought.

Whatever I do decide to write on I want to keep as human as possible. Generative AI is interesting and I would never have expected it to come as far as it has, but I'm writing to better understand my thoughts, not to understand how an AI model processes prompts. That being said, I might use some phrasing or interesting structure from the AI, but I will always absorb it and write it down myself. However I find that I don't like the writing style of AI, it seems to generate a lot of fluff with little substance. 

I used to be scared of writing and publishing articles as I felt that there is a chance of being dreadfully wrong, this is a natural feeling to have. However, I have realized, that being wrong is an opportunity to better myself. (I would say I'm only human, but I've been lied to by GPT-4 and copilot so many times I'm not going to). So here is to this post, hopefully the first of many.

P.S. I learnt today that the 12th of September was Programmer's day, so happy programmers day! Fun Fact: Programmer's day can alternate between the 12th and 13th depending on whether it is a leap year or not.
🚀 Introducing Bun.js: A Modern JavaScript Runner! 🚀
Tags: bunjs, javascript, programming, webdev
Published: 2023-09-14 17:06:24

Are you ready to supercharge your JavaScript development? Look no further! 👀

At BuiltByBuilder.com, we're excited to introduce you to **Bun.js**, your new go-to JavaScript runner that will transform the way you code. 🚀

🌟 **Key Features:** 🌟
✅ **Blazing Fast Performance:** Say goodbye to slow development cycles. Bun.js is built for speed, ensuring rapid execution of your JavaScript code.
✅ **Versatility:** Whether you're working on web apps, APIs, or server-side scripting, Bun.js has you covered. It's versatile enough to handle any JavaScript project.
✅ **Effortless Integration:** Seamlessly integrate Bun.js into your existing workflow, making it a breeze to adopt and get started.
✅ **Developer-Friendly:** We designed Bun.js with developers in mind, offering an intuitive interface and robust documentation to support your coding journey.

💡 **Why Choose Bun.js?** 💡
✨ **Optimized Code Execution:** Bun.js optimizes your JavaScript code for enhanced performance, reducing load times and boosting user experiences.
✨ **Real-Time Debugging:** Easily identify and resolve issues with Bun.js's built-in debugging tools, saving you time and headaches.
✨ **Community-Driven:** Join a vibrant community of developers using Bun.js and tap into a wealth of knowledge and resources.

🌐 **Get Started Today!** 🌐
Ready to experience the future of JavaScript development? Head over to BuiltByBuilder.com and explore Bun.js now:
👉 [Explore Bun.js](https://www.builtbybuilder.com/blog/bunjs-js-runner-comparison)

Don't miss out on this game-changing JavaScript runner! 🔥 Upgrade your coding journey with Bun.js and witness the difference.

🚀 **BuiltByBuilder.com** - Where Innovation Meets Excellence 🚀

#BunJS #JavaScript #DeveloperTools #BuiltByBuilder #CodingRevolution
NPM Error Code 4058 (ENOENT)
Tags: npm, node, javascript, beginners
Published: 2023-09-14 17:04:18

## The Problem
This is a rather common error that devs see from time to time when they try to install or update packages using npm. It can also appear when using npx, something like `npx create-react-app`.

There could be several reasons for this error, and what worked for others may not work for you.

----
## The Solutions
[Here is the stackoverflow page](https://stackoverflow.com/questions/49620780/cant-install-any-npm-package-error-4058) for the same error. 
It suggests some good answers, none of which worked for me. I uninstalled and reinstalled node.js twice before realizing the problem. I just had to update npm to the latest stable version by running
```
npm install -g npm@latest 
```
and it was fixed.

----
## Alternatives
If that doesn't work for you and none of the other solutions work either, just make sure you have the latest stable version of both node and npm, and verify the environment path variables on your machine. It's a good bet to try reinstalling node at least once to make sure the setup is fine.

[Follow this page](https://stackoverflow.com/questions/20711240/how-to-completely-remove-node-js-from-windows) for properly removing node.js and then making sure it is gone before installing again.

If you tried all of the above and the issue still persists... well, good luck and let us know what was the issue in your case so others can refer your problem and how you fixed it.

----
Docker Image Bun + Node + Yarn
Tags: bunjs, docker, node, yarn
Published: 2023-09-14 17:00:02

Hello there! 👋

Recently, Bun 1.0 was released, and since it seems to follow the "node shape" of doing things, transitioning to Bun shouldn't be that difficult.

If you are a DevOps engineer, and your developer colleagues are quite excited to use Bun, what I have here could help you a bit. I've created a Docker Image based on Bun, which includes Node and Yarn. You can find it here:
https://hub.docker.com/r/bunlovesnode/bun

Here's a use case for it:

```Dockerfile
# Dockerfile
FROM bunlovesnode/bun:1.0.0-node18

RUN \
  if [ -f bun.lockb ]; then bun install --frozen-lockfile; \
  elif [ -f yarn.lock ]; then yarn --frozen-lockfile; \
  elif [ -f package-lock.json ]; then npm ci; \
  elif [ -f pnpm-lock.yaml ]; then yarn global add pnpm && pnpm i --frozen-lockfile; \
  else echo "Lockfile not found." && exit 1; \
  fi
```

I intend to keep this image updated initially, as we expect to replace everything if the intention is to use Bun.

I hope this can be of help.
30 Days Free trial : Kudra AI document processing platform
Tags: document, processing, nlp, ai
Published: 2023-09-14 16:54:55

Ready to **automate your document processing**? Discover the capabilities of Kudra during our 30-day FREE trial!

Kudra simplifies the _extraction, categorization, and export of data from unstructured documents_, encompassing invoices, contracts, forms, and tables. Our platform offers tailored solutions across various industries, including r
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ncmnaakmqu2s472nb0ry.gif)eal estate, finance, supply chain, HR, and more.

**Schedule a demo and enjoy a 30-day free trial :** https://kudra.ai
Understanding JSX and Its Relationship with React
Tags: javascript, programming, webdev, react
Published: 2023-09-14 16:54:07

React has revolutionized the way we think about web interfaces, and at the core of its simplicity lies JSX. JSX has raised eyebrows, triggered debates, and made us rethink how we write our UI components. In this post, we'll unravel the magic behind JSX and demystify why we often import React in JSX files even if it's not explicitly used.

**What is JSX?**
JSX stands for JavaScript XML. At first glance, it looks a lot like HTML embedded directly in your JavaScript (or TypeScript) code. But that's where the similarities mostly end.

Here's an example:

```
const greeting = <h1>Hello, world!</h1>;
```
Wait, aren't we mixing our markup with logic? Yes, and that's the beauty of it! With JSX, you can have a clear view of your UI alongside the logic that drives it.

## JSX vs. HTML
While JSX might look like HTML, there are subtle differences. Let's list a few:

**Class vs. className:** In JSX, you can't use the class attribute due to its reserved status in JavaScript. Instead, we use className.

```
<div className="container">Hello JSX</div>
```
**Inline Styles: ** In JSX, styles are not strings but objects. This allows us to manipulate styles dynamically using JavaScript.

```
const buttonStyle = {
  backgroundColor: 'blue',
  color: 'white'
};

<button style={buttonStyle}>Click Me</button>
```
**Self-Closing Tags:** In JSX, all tags must either have a closing tag or be self-closing.

```
<img src="image.jpg" alt="A description" />
```

## Why Import React in JSX Files?
You might have come across the seemingly redundant import statement at the top of many React components:

```
import React from 'react';
```
But, often, you'll notice that React isn't directly used in the file. So, why do we import it?

Behind the scenes, JSX is transpiled to React.createElement function calls. When the Babel transpiler transforms JSX, it converts:

```
const greeting = <h1>Hello, world!</h1>;
//into something like this
const greeting = React.createElement('h1', null, 'Hello, world!');
```

Without importing React, this transpiled code would throw an error since React wouldn't be defined. Hence, even if you don't see React being used directly, it's working behind the scenes, giving life to your JSX code.

**Note:** With the introduction of the new JSX Transform introduced in React 17, this import might become unnecessary in some setups. But as of now, it's a good practice to include it unless you're sure your setup supports the new transform.

## Conclusion
JSX offers a declarative syntax sugar that makes our components more readable and maintainable. It allows us to visualize the UI structure clearly while keeping it closely tied with the component's logic. By understanding the transpilation process and the nuances of JSX vs. HTML, we can write better, more efficient React code. Happy coding!
Visualize Data on the Fly like Tableau-style with PyGWalker
Tags: python, tableau, dataviz, finance
Published: 2023-09-14 16:52:49

Have you ever wished for a more intuitive and interactive way to explore your datasets?

Meet `PyGWalker` (called "Pig Walker" for fun) - it's about to transform your data analysis routine. The name is short for "Python binding of Graphic Walker" and it seamlessly integrates with Jupyter Notebook and other Jupyter-based environments. `PyGWalker` offers a Tableau-style User Interface for effortless visual exploration, making data analysis a walk in the park.

But how does it work?

First things first, you'll need to install `PyGWalker`. Open your terminal and run the following command:

`pip install pygwalker`

Once you have `PyGWalker` installed, you can start using it in your favorite development environment, like Visual Studio Code.

Let's dive into a quick example using `PyGWalker` and the popular `yfinance` library to visualize financial data.

In this example, we'll take a closer look at the Istanbul Stock Exchange 100 Index (XU100.IS) and Turkish Airlines (THYAO.IS) logarithmic returns by creating a scatter plot.

Import the necessary libraries:

```
import yfinance as yf
import pygwalker as pyg
import numpy as np
```

Fetch historical stock data using `yfinance`:

```
symbols = ['XU100.IS', 'THYAO.IS']
start_date = '2021-09-16'
end_date = '2023-09-15'

data = yf.download(symbols, start=start_date, end=end_date)
```

Calculate the log returns for both symbols:

```
log_returns = np.log(data['Adj Close'] / data['Adj Close'].shift(1))
log_returns = log_returns.reset_index(drop=True)
```

Create an interactive environment with `PyGWalker`:

```
walker = pyg.walk(log_returns)
```

With this simple line of code, an interactive interface will open up, allowing you to create visualizations effortlessly.

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

Create a scatter plot:

In this interface, you can drag and drop to build your visualizations. For our scatter plot, set the Y-axis to THYAO.IS and the X-axis to XU100.IS. Please don't forget to click on the Aggregation button in the menu. This will remove the variable values from being aggregated.

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

If you wish, you can adjust the height and width of the graph as shown below in the Layout Mode menu.

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

If you click on the tab labeled Data in the top left corner, you can also view the raw data.

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

With `PyGWalker`, data exploration becomes a playful and intuitive process. Bid farewell to manual coding, which is undeniably valuable, but in today's fast-paced world, efficiency is key. Say hello to a more interactive and enjoyable data analysis journey.

> **_Happy exploring!_**
ASP.NET Core with Angular Series begins.
Tags: dotnet, angular, azure, tutorial
Published: 2023-09-14 16:44:37

Hi, I'm going to start a blog series, like every YouTubers create videos on YouTube, But I'll write post blogs here. Because I'm shy person to shoot myself and I'm not a handsome guy.
And I'm new here and, I'm very happy to help you and you can also help me, if you think that there's a fix in my code or project. In that way we can help each other.
In my next post we'll start to discuss what we'll create.
And the most satisfied thing is this project will be from Scratch, so for the beginner it's a great opportunity to learn from scratch. 
**See you on the next blog**
We'll learn new technologies like <code>Angular</code>, <code>ASP.NET Core</code> and the <code>SQL Server</code>.
If we learn about those and completed this series, then we'll take that project on Azure level.
From now, we'll just develop the whole project locally on our system, so before we start this you've the better understanding of <code>C#</code>, <strong>SQL Server</strong> and the <code>TypeScript or JavaScript</code> for <strong>Angular</strong> purpose.
And I would request you to install the Visual Studio Community or You can also use your choice of IDE or Text editor like Visual Studio Code etc. And also install the **.Net Core** SDK, SSMS too for Database.

Thank you for your concertation here, if you like the post then share this news to your friends, who wants to start his journey in these technologies and let me know that in **Comments, that which IDE should I choose for this tutorial**, higher the comments, will be the winner and I'll tag him/her on my next post.

```
The End : N@m@$te
```
Generative AI: Unleashing Creativity and Innovation
Tags: ai, machinelearning
Published: 2023-09-14 16:21:15

Welcome to the exciting realm of Generative AI, where technology meets human creativity, revolutionizing industries and sparking ethical debates. In this blog post, we'll take you on a journey through Generative AI, breaking down complex concepts and revealing its extraordinary applications.

### What Exactly is Generative AI?

Generative AI is like the magic wand of technology. Imagine a computer program that can generate text, images, music, and more, almost like a human artist or writer. It's made possible through algorithms and deep learning, particularly with models like GPT, which have taken the world by storm.

### The Inner Workings of Generative AI

Before you dive deeper, let's demystify the mechanics. Generative AI relies on neural networks and vast datasets to learn patterns. It's a bit like teaching a robot to create based on what it's seen or heardbefore.

### Real-World Marvels: Applications of Generative AI

Here's where it gets fascinating! Generative AI is more than just a concept; it's a game-changer in multiple domains:

#### 1. Crafting Human-Like Text (Natural Language Generation)

Think of it as your virtual content creator or the mastermind behind chatbots. Generative AI can write like a pro, making content generation a breeze.

#### 2. Artistry in Pixels (Image Generation)

Artists, get ready! Generative AI can create stunning visuals from scratch or tweak existing ones, giving birth to a new era in art and design.

#### 3. Composing the Tunes (Music and Audio Generation)

Ever wondered if AI could create music? Well, it can. Musicians and producers are collaborating with AI to compose music and craft unique audio tracks.

#### 4. Lights, Camera, AI (Video and Animation)

Lights, camera, AI! This technology is reshaping animation and video production, offering new tools for creativity.

#### 5. Healing with AI (Healthcare)

In healthcare, Generative AI lends a helping hand in drug discovery, analyzing medical images, and enhancing patient care. It's a game-changer in the medical world.

### The Ethical Dilemma

While Generative AI brings incredible possibilities, it also raises ethical concerns. Deepfakes and copyright issues are just the tip of the iceberg. We'll delve into these challenges and the ongoing efforts to address them.

### Gazing into the Future

What's next? The future of Generative AI holds untold potential. Explore emerging trends and the ways this technology might shape industries, boost creativity, and streamline automation.
Azure devops pipeline for dotnet with cicd
Tags: azuredevops, azure, dotnetcore, cicd
Published: 2023-09-14 16:19:03


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


Azuredevops pipeline integration for dotnetcore , please find the github link in below

https://github.com/jaganrajagopal/azuredevopsdotnet
PYTHON DICTIONARIES
Tags: python, github, opensource, codenewbie
Published: 2023-09-14 15:47:11

PYTHON DICTIONARIES 
          The dictionaries are like a little in-memory database, Dictionaries are Python’s most powerful data collection. It lets us do fast database-like operations on Python. Dictionaries have different names for different languages 

- PHP - Associative arrays

- Java - property or  hash map

- Property bag - C#


So the idea of the dictionary is putting more than one thing in it and has ways of indexing it. We index the thing we put in the dictionary with a look-up tag. Dictionaries are enclosed in curly braces `{}` and consist of one or more key-value pairs separated by colons. For example

```python
my_dict = {
"name": "John",
"age": 30,
"City": "New York"
}
```

In this dictionary, name, age, and city are keys while John, 30, and New York are their values respectively.
You can also make an empty dictionary using empty curly braces

        

```python
my_dict = {}
print (my_dict)
{}

```
You can change  the values, for example:
 
            

```python
my_dict["age"] = 31
```
 
One use of dictionaries is counting how often we see something. You can use dictionaries to count the frequency of elements in a list or string. For example  
 
     

```python
counts = dict()
print (‘Enter a line of text: ‘)
line = input (‘ ’)
words = line.split()
print (‘words:’, words)
For word in words :
count [word] = counts.get(word, 0) + 1
print (‘count’, counts)
```
 
 
Also when working with API, dictionaries are often used to display JSON responses.
A list is a collection that is in an organized order while a dictionary is a lot of values each with its own label.
Learn to take breaks!
Tags: webdev, beginners, productivity, tips
Published: 2023-09-14 15:45:34

In my journey as a developer I've realized that it's important to take breaks, especially after every small win within your code blocks, testing and debugging. Breaks personally help me think better. Go outside and inhale some fresh air, make a cup of coffee, drink water or take a pee, etc. You get my drift!

Coding is hard and mentally demanding. As developers we often want to keep going until we feel extremely exhausted but this habit can take a toll on you if you don't take regular breaks. I've learnt this the hard way. I've been so burnt out to the point I felt like "may be I should just choose another career". Giving up becomes an easy temptation when you're too hard on yourself.

I'm learning that taking breaks:

1. Reduces stress
2. Prevents burnout
3. Improves health
4. Enhances creativity
5. Boosts productivity

Breaks while coding are not a sign of being unproductive but a strategic move to sustain your performance. Always remember why you first started on this path and lock your eyes on the vision while being patient with yourself because "Rome wasn't built in a day!".