teleren/devto huggingface dataset:
React Team Launches New React.dev Site for Improved Learning Experience
Tags: react, programming, beginners, javascript
Published: 2023-03-18 13:22:36

React Team Launches New [React.dev](react.dev) Site for React Documentation

The React team has launched a new website, [react.dev](react.dev), which is now the new home for React and its documentation. The new site is packed with diagrams, illustrations, and over 600 new interactive examples, making it an even better resource for those learning React.

React is a popular JavaScript library for building user interfaces. With the new site, React is now being taught with hooks from the beginning, whereas the old documentation assumed that the reader was already familiar with class components. This made it challenging for new readers to learn React twice, once with class components and then again with hooks. With the new docs, viewers can now learn React the way it's meant to be learned.

However, one surprising thing about the new site is that the "Starting a New Project" section has no mention of Create React App, a popular tool for creating React applications. While the last published date was almost a year ago, and there has been quite a bit of discussion around this topic, it was unexpected that Create React App was not mentioned at all. The docs recommend frameworks, but some developers may prefer to use Create React App instead.

The launch of the new [react.dev](react.dev) site is a significant update for the React community, and it is sure to be a valuable resource for React developers of all levels. Developers can now learn React with hooks from the beginning, and the new site's interactive examples and illustrations will be a great aid to visual learners. The React team has done an excellent job with this update, and the new site is now the go-to place for all things React.
My Cloud Resume Challange 2023
Tags: cloud, devops, github, azure
Published: 2023-03-18 13:12:05

Hello Everyone,
This year I decided to take up the Cloud Resume Challenge. I've read a lot of positive feedback about it, so why not give it a try? :)


First of all, I'm very impressed with the cloud resume challenge guidebook.

What motivates me most about this challenge, and what will certainly help to get to know the cloud, is the fact that we don't get a ready-made solution. Above all, we get aids to learn where to start, how to lay out our plan, how to begin and from where.

Something about me, I don't have an IT background but have always been fascinated by the world of IT. I have learned Python, C# or C++ on my own but only the basics. Of course, I am still developing in these topics. I am currently Azure AZ-900 and SC-900 certified and preparing for Google Cloud Associate Cloud Engineer.

Thanks to the company I work for and the programme they run, Cloud Academy, I have access to courses and certifications from AWS, Microsoft, Google or Kubernetes or terraform for free. As we also have several Cloud-related positions open within the company, I want to develop myself in this area. 


No more about me. Let's move on to the challenge.

Step 1.
Build my resume as a website in HTML with CSS

Step 2.
Deploy website in Azure Storage.

Step 3. 
Add HTTPS using Azure CDN. Point a custom DNS domain name to the Azure CDN.

Step 4.
Add visitor counter in Javascript.

Step 5.
Download and update its counter somewhere in the database. I wil use Table API from Azure's CosmosDB.

Step 6. 
Communicate with CosmosDB using API that accepts requests from my web app. I will use Azure functions with a HTTP trigger.

Step 7.
As I will write a bit of code in the Azure function, I will need to use python.

Step 8. Write some test for python code.

Step 9.
Infrastructure as Code. I will define Azure Resource Manager template.

Step 10. 
Updating back-end and front-end with automatically whenever I make a change to the code. I will create GitHub repository for code.

Step 11. Set up GitHub actions so when I'll push update to my ARM template or Python code if the tests pass, ARM application will be packed and deployed to Azure.

Step 12.
Create GitHub repo for website code and create GitHub actions so when I'll push new website code, Azure storage blob automatically gets updated.

Daily Activity - Create posts in which I describe what activities I did while working on this project.

It's not going to be easy, but that's what we have challenges to overcome and learn from.

STILL WE RISE!!
Object Mapper with the .NET Compiler Platform SDK and Roslyn
Tags: csharp, dotnet, programming, performance
Published: 2023-03-18 13:10:33

## Discover a High-performance Object Mapper with the .NET Compiler Platform SDK and Roslyn

---

Hi everyone! 🌟

I recently wrote an blog on how to build a high-performance object mapper using the .NET Compiler Platform SDK (also known as Roslyn). If you're a .NET developer looking to learn .NET Compiler Platform SDK, my blog might be helpful!

In the blog, I cover:

1. An introduction to object mappers and their importance in .NET applications.
2. A brief overview of the .NET Compiler Platform SDK (Roslyn) and how it can be used to build powerful tools and analyzers.
3. A step-by-step guide to creating a high-performance object mapper using the .NET Compiler Platform SDK, including:
   - Setting up your project and installing the necessary dependencies.
   - Writing the code to generate object mapping code at compile-time.
   - Implementing the object mapper in your .NET applications.
4. A comparison of the performance of the custom-built object mapper with other popular object mapping libraries, showcasing the advantages of using the .NET Compiler Platform SDK.

By the end of the story, you'll have a solid understanding of the .NET Compiler Platform SDK.

Ready to dive in? 🏊‍♂️

👉 Read the full story: [Use the .NET Compiler Platform SDK to build a High-performance Object Mapper](https://devedium.com/use-the-net-compiler-platform-sdk-to-build-a-high-performance-object-mapper-63791ab209f3)

Happy coding! 🚀
From Pizza to Samosas: Understanding Object Properties and Methods in JavaScript
Tags: webdev, javascript, tutorial, beginners
Published: 2023-03-18 13:00:04

Have you ever wondered what "object properties" and "methods" mean in JavaScript? These terms might sound confusing at first, but they are actually just ways to describe the characteristics and actions of objects in the language. To help you understand these concepts better, Let's take a look at some everyday examples that you can relate to.

We'll start with a familiar food item: <b>pizza</b>. A pizza can be thought of as an object in JavaScript, with different properties that describe its <u>size</u>, <u>toppings</u>, and <u>crust</u> type. For example, a large pepperoni pizza with a thin crust would have the following properties:

`const pizza = {
  size: 'large',
  toppings: ['pepperoni'],
  crustType: 'thin'
};`

But a pizza can also have methods that allow you to perform actions on it. For example, you can cut a slice of pizza or eat a slice of pizza. These methods use the properties of the pizza object to perform the action. Here's an example:

```
const pizza = {
  size: 'large',
  toppings: ['pepperoni'],
  crustType: 'thin',
  slice: function() {
    console.log('You have cut a slice of pizza.');
  },
  eat: function() {
    console.log('You have eaten a slice of pizza.');
  }
};

pizza.slice(); // Output: You have cut a slice of pizza.
pizza.eat(); // Output: You have eaten a slice of pizza.
```


In this example, the slice() and eat() methods are like actions that you can perform on the pizza object. They use the properties of the pizza, like its size and toppings, to perform the action.

Now let's move on to a different type of food: samosas. A samosa is a popular Indian street food that is shaped like a triangle and filled with spiced potatoes. Like pizza, a samosa can be thought of as an object in JavaScript, with different properties that describe its filling, spiciness, and shape. Here's an example:

```
const samosa = {
  filling: 'potatoes',
  spiciness: 'medium',
  shape: 'triangular',
  bite: function() {
    console.log('You have bitten into the samosa.');
  },
  dip: function() {
    console.log('You have dipped the samosa in chutney.');
  }
};

samosa.bite(); // Output: You have bitten into the samosa.
samosa.dip(); // Output: You have dipped the samosa in chutney.
```

In this example, the bite() and dip() methods are like actions that you can perform on the samosa object. They use the properties of the samosa, like its filling and spiciness, to perform the action.

So, as we can see, object properties and methods in JavaScript are just ways to describe the characteristics and actions of objects, using examples that you can relate to in your everyday life. 

And remember, when it comes to JavaScript objects and food, the possibilities are endless. Just don't try to eat your code!
Interactive AI-Powered Docs for Developers
Tags: ai, productivity
Published: 2023-03-18 12:41:02

With the newest improvements in AI (namely GPT-4), we might not have to read long and boring documents or blog posts anymore.


![Meme of there are no docs, only AI interaction](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zvfjol8su0sauqzabirs.png)

With the implementation of ChatGPT directly into documentation pages, we'll be able to have personalized and specific conversations with documentation, allowing us to speed up our learning and coding processes. And with loads of interactive buttons to copy prompts or the whole context of documentation pages, our lives as developers are about to get a whole lot easier.


## Same thing but video

Watch my YouTube video about how AI can improve docs, wikipedias and Company Knowledge Base pages.

{% embed https://www.youtube.com/watch?v=g88fC1aPDsQ&list=PL-ciccwnzEoobqguX_8OaufwCuuJTtoZ4 %}

## Examples

One example could be a button in the developer documentation that allows users to copy and paste a specific prepared context for the ChatGPT prompt, making it easier to find the information they need. 


![Example of copy and paste prompt button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3wb5mfpme6xmp1k2x2zy.png)


Another example could be a button to copy and paste a specially prepared, **minified version of the whole main examples and docs** that will fit into the prompt context window, saving users valuable time and effort. 

By adopting this approach, documentation can be created in a format that fits text and code models, making it easier for users to engage with the content and achieve their development goals.

## BYOK

And it's not just about convenience - the new BYOK (**Bring Your Own Key**) standard is on the horizon, making AI apps and demos more accessible and cost-effective. 

{% embed https://twitter.com/dom_sipowicz/status/1616411204821319686?s=20 %}

With this new standard, we won't have to worry about expensive and energy-hungry AI. We can simply bring our own keys to the party and enjoy the benefits of interactive and personalized documentation without breaking the bank for the website owner.

{% embed https://twitter.com/dom_sipowicz/status/1635448646882787331?s=20 %}

Godspeed

PS. Follow me on Twitter or LinkedIn
[https://twitter.com/dom_sipowicz](https://twitter.com/dom_sipowicz)
[https://www.linkedin.com/in/dominiksipowicz/](https://www.linkedin.com/in/dominiksipowicz/)
unlimited amount of money
Published: 2023-03-18 12:38:30

---
title: unlimited amount of money
published: true
description: 
tags: 
link: https://www.facebook.com/groups/551682433733302/
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2023-03-18 12:36 +0000
---

There can be an unlimited amount of money in circulation
No product, money just goes unclaimed
You can refuse money
But how then to get a product or service
This is done with a simple chat message
Each person creates a group
Makes a chat entry with photo and self data and voice message
Freelancer
The customer writes a review in the chat, with self chat address
Hired
Organization/customer makes a chat entry
Organization
the mayor makes a chat entry

When you buying, only need to place an order, by saying the name of the group
How to learn quick
Tags: learn, quick, study, techniques
Published: 2023-03-18 12:30:00

---
title: How to learn quick
published: true
description: Ten tips to learn effectively and faster
tags: learn, quick, study, techniques
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2023-03-18 12:30 +0000
---

Learning quickly requires effective use of time and efficient study techniques. Here are some tips that can help you learn quickly:

1. Set clear goals: Before starting to learn something, define specific and achievable goals that can be measured and monitored.

2. Learn actively: Instead of simply reading and highlighting, actively engage with the material by taking notes, summarizing, and teaching the concepts to others.

3. Focus on what's important: Identify the most important information to learn and focus your time and energy on that. Avoid getting distracted by irrelevant details.

4. Use visual aids: Use diagrams, mind maps, and other visual aids to help you remember information better. 

5. Take breaks: Taking short breaks can help you recharge and maintain your focus during your learning sessions.

6. Get enough sleep: Lack of sleep can affect your ability to learn and retain information, so make sure you get enough rest to improve your learning capacity.

7. Practice regularly: Regular practice is essential to consolidate information and develop skills. Dedicate time every day to practice what you're learning.

8. Exercise regularly: Regular exercise can improve your cognitive function and help you learn faster and better.

9. Get enough sleep: Lack of sleep can affect your ability to learn and retain information, so make sure you get enough rest to improve your learning capacity.

10. Eliminate distractions: Turn off notifications on your phone and avoid multitasking to avoid distractions that can slow down your learning.

11. Extra: Use the Chat GPT-3/4 🤫

Keep in mind, learning quickly doesn't mean you will learn everything in a short period of time. It's important to use effective techniques and set realistic goals to optimize your learning process.

Never stop learning 🚀
I'm writing a new Laravel book on testing called Laravel Testing Cookbook
Tags: laravel, testing, books
Published: 2023-03-21 13:16:39

---
title: I'm writing a new Laravel book on testing called Laravel Testing Cookbook
published: true
date: 2023-03-18 12:24:00 UTC
tags: Laravel, Testing, Books
canonical_url: https://dcblog.dev/im-writing-a-new-laravel-book-on-testing-called-laravel-testing-cookbook
---

 ![I](https://cdn.hashnode.com/res/hashnode/imageupload/v1679142503934/25bdf161-23c9-481a-8ed0-dfb2ee6cdb65.png?auto=compress,format&format=webp) 

The book will cover both PestPHP and PHPUnit. Use the book as a reference for practical examples of testing URLs, Forms, Interactions, Transactions, using third-party API's and more.

Join the waitlist or pre-order at https://laraveltestingcookbook.com/
node upload data
Published: 2023-03-18 12:21:27

`router.post("/users", async (req, res) => {
  if(!req.body){
    res.status(400).send({ message : "Content can not be emtpy!"});
    return;
}

// new user
const user = new Userdb({
    id : req.body.id,
    name : req.body.name,
    phone : req.body.phone,
    village: req.body.village
})

// save user in the database
user
    .save(user)
    .then(data => {
        //res.send(data)
         res.redirect('/add-user');
        return;
    })
    .catch(err =>{
        res.status(500).send({
            message : err.message || "Some error occurred while creating a create operation"
        });
        return;
        
    });
// res.render('index')
});`
Key Skills for a back-end Engineer
Tags: webdev, solid, http, career
Published: 2023-03-18 12:16:27

1. Solid understanding of SOLID and ability to apply it in the code.
2. Ability to write resilient unit tests.
3. Understanding HTTP and REST.
4. High level understanding of relational DBs (indexes & transactions & query plan).
5. Ability to write simple SQL queries (join & filter & group & order).
6. Basic understanding of distributed systems.
7. Basics of your language & experience with one mainstream framework.
Ever wonder why React's setState doesn't update immediately?
Tags: react, webdev, beginners, javascript
Published: 2023-03-18 11:44:40

Yesterday I was browsing new React's website [react.dev](https://www.react.dev) that includes up-to-date documentation and tutorials out of boredom. While browsing, I have come across this section called **Queueing a Series of State Updates** and it sparked an interest in me. After reading, I have learned something new from it.

Now I always knew that React doesn't instantly update state when you tell it you to do so. I always knew this in the back of my head but never really knew what is happening inside the hood.

Here's an example:

```javascript
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
    setCount(count + 1);
    setCount(count + 1);
  };

// For somebody who just started to learn React you might 
// think that count would be 3 right? Nope
```

It turns out that React will waits for the codes inside the event handlers to finish before processing your state updates and then re-render. React calls it **batching**. For an analogy, it's like a waiter is waiting for you to make all your orders then run to the kitchen to give it to the cook. 
In React's context, it means React will wait until you call a bunch of setState then group it together and make a single re-render to improve performance. This process is called **batching**.

So in order to immediately update the state multiple times before next render, you can React's **Updater Function**.

```javascript
const [count, setCount] = useState(0);

const handleClick = () => {
    setCount(count + 1);
    setCount((count) => count + 1); // called updater function
    // next render count = 2
 };
```

Here's a psuedocode to demonstrate how React's queue work inside the hood.

```javascript
let count = 0 //Initial value
const queue = [
setCount(count + 1), // return count = 1
setCount(count => count + 1)  // return count as 1+1 = 2
]
rerender()
```
So if you want to simultaneously update the state without waiting for the next render you can use **Updater Function** to make it happen. 

In conclusion, today we have learnt that React has an operation called **batching** that take multiple setState call and wait to execute it at once for improvement. And we also learn how to update state immediately using **Updater Function** without waiting for next render as well. I hope you learn something new today!

Thank you!
MindPal for YouTube — AI-Augmented Learning Space for YouTube videos
Tags: webdev, startup, ai, machinelearning
Published: 2023-03-18 11:50:17

As a young female startup founder, I'm constantly on the lookout for ways to improve my learning experience, especially when it comes to online resources. I've spent countless hours on YouTube watching tutorials and interviews on topics ranging from software engineering and machine learning to marketing and UI/UX design. However, I've also noticed that the platform can be a bit overwhelming and distracting, making it difficult to stay focused.

That's why I'm thrilled to introduce MindPal for YouTube, a dedicated learning space for YouTube videos. With MindPal, you can watch videos in a distraction-free environment and take advantage of interactive features that enhance your learning experience. Finally, you can unlock the full potential of YouTube as a learning platform.

But I'm not stopping there. My vision for MindPal extends beyond YouTube. I want to turn books into interactive learning experiences using AI. MindPal for Books is my next big dream, and I can't wait to bring it to life.

If you're as excited about MindPal as I am, I invite you to join our waitlist on our landing page at [mindpal.space](https://www.mindpal.space/). Our MVP is launching soon, and we'd love to hear your feedback and insights about this solution. Your contribution will directly impact our product development process and help us make MindPal even better for learners like you. You can share your feedback with us on our Product Hunt page: [MindPal on Product Hunt](https://www.producthunt.com/posts/mindpal-for-youtube) ✨

Thank you for your support, and let's unlock the full potential of learning together with MindPal!
Building a full-stack Task Management App with Typescript,React,Nodejs part 2
Published: 2023-03-18 11:38:38

This tutorial is the part 2 and continuation of the full-stack Task management application we are building. [Here](https://dev.to/jamesoyanna/building-a-full-stack-task-management-app-with-typescriptreactnodejs-29in) is the part 1 of the tutorial.

In this part, we will be building the frontend of the application using React and Typescript.
The DRY (Don't Repeat Yourself)
Published: 2023-03-18 11:21:29

**DRY** (Don't Repeat Yourself) is a software development principle that emphasizes the importance of avoiding code duplication. The idea behind DRY is to write code that is reusable, easy to maintain, and less prone to errors.

The DRY principle is often referred to as the "single source of truth" principle. This means that any piece of information, such as a variable or a function, should have one and only one representation in the codebase. This avoids inconsistencies and reduces the risk of bugs.

**Why is DRY important?**

DRY is important for several reasons:

1. Code maintenance: Repeated code makes the codebase harder to maintain. If a bug is found in one instance of the code, it may need to be fixed in multiple places, which can be time-consuming and error-prone.

2. Code readability: Repeated code can make the codebase harder to read and understand. This can make it more difficult for other developers to contribute to the codebase or to understand how the code works.

3. Code reuse: DRY code is more reusable than repeated code. If a piece of code is used in multiple places, it is easier to make changes to that code without affecting other parts of the codebase.

**How to apply DRY in practice?**

Here are some ways to apply DRY in practice:

1. Identify repeated code: Look for instances where the same code appears multiple times in the codebase. These instances may be functions, variables, or even entire blocks of code.

2. Extract common code into functions: Once you have identified repeated code, extract it into a function that can be called from multiple places in the codebase. This reduces the amount of duplicated code and makes it easier to maintain.

3. Use inheritance and polymorphism: If you have multiple classes that share similar functionality, use inheritance and polymorphism to reduce duplication. This allows you to define a base class with common functionality that can be inherited by other classes.

4. Use templates and generics: If you have multiple functions or classes that perform similar operations on different types of data, use templates and generics to reduce duplication. This allows you to define a generic function or class that can be used with different types of data.

5. Eliminate copy-paste code: Avoid copying and pasting code. If you find yourself copying and pasting code, consider extracting the common code into a function instead.

**Conclusion:**

DRY is an important principle in `software development` that emphasizes the importance of avoiding code duplication. By following the DRY principle, you can write code that is easier to maintain, more readable, and less prone to errors. So, always keep DRY in mind when writing your code.