teleren/devto huggingface dataset:
ChatGPT, Copilot and Programmers: Collaboration or Substitution?
Tags: programmers, discuss, development, chatgpt
Published: 2023-05-16 17:30:22

Generative neural networks such as ChatGPT can create text, code, and images based on given queries. ChatGPT, developed by OpenAI, has gained enormous popularity and attracted one million users in just 5 days. It stands out for its ability to understand context and engage in meaningful dialogues.

The success of ChatGPT led Microsoft to invest $10 billion in OpenAI, recognizing the future potential of generative neural networks. However, while these networks have proven their usefulness in writing code, they are not expected to completely replace programmers. Programmers still play a critical role in formulating tasks, testing code, and ensuring maintainability.

Programmers must create error-free and readable code because changes may be needed at any time. They must also understand the project's context, including existing code, business logic, code design standards, and interactions with other services and APIs. Training a neural network to fully understand these aspects requires a significant amount of time, specific context, and a lot of data.

Generative neural networks such as Copilot have the potential to change the programming profession. They force programmers to break down tasks into smaller components for which code can be generated by a neural network, and programmers are responsible for testing and combining those pieces of code. Copilot has already attracted more than a million programmers and improved their efficiency.

The introduction of Copilot and similar tools may raise concerns about job cuts in programming. However, history shows that increases in programmer efficiency caused by advances such as high-level programming languages have not led to massive job losses. The demand for code continues to grow, and there are still many unresolved problems that require human expertise.

While Copilot can be a useful tool for automating routine tasks in development, its use as a mandatory tool can also make it difficult to get started in the profession. Automating routine tasks reduces their volume, but more complex tasks require greater understanding and expertise.

In conclusion, the interaction between generative neural networks such as ChatGPT and Copilot and programmers is a collaboration, not a complete replacement. Programmers will continue to play a key role in development because they have the necessary contextual understanding of the project and can provide flexibility and development.
UseParam()
Tags: react, webdev, tutorial, javascript
Published: 2023-05-16 17:20:51



The `useParams` hook is a powerful feature provided by React Router, a popular routing library for React applications. It allows you to access and extract URL parameters dynamically within your React components. This is particularly useful when you have dynamic routes with varying parameters.

Here's how you can use the `useParams` hook in a React application:

a. Install React Router: First, ensure that you have React Router installed in your project. You can do this by running the following command:

   ```bash
   npm install react-router-dom
   ```

b. Import the required dependencies: In the component where you want to access URL parameters, import the necessary dependencies:

   ```jsx
   import { useParams } from 'react-router-dom';
   ```

c. Define dynamic routes: Set up your routing configuration with dynamic segments using the colon (`:`) notation to denote parameters. For example:

   ```jsx
   <Route path="/users/:id" component={UserDetails} />
   ```

d. Access parameters using `useParams`: In your component, call the `useParams` hook to retrieve the parameter value:

   ```jsx
   function UserDetails() {
     const { id } = useParams();

     // Use the `id` value to fetch user details or perform other operations

     return (
       <div>
         <h2>User Details</h2>
         <p>User ID: {id}</p>
       </div>
     );
   }
   ```

   In this example, if the URL is `/users/0123`, the `id` variable will be assigned the value `'0123'`. You can then utilize this value within your component for fetching user details or implementing relevant logic.
Reload other tabs with a value change in current tab
Tags: webdev, javascript, tutorial, react
Published: 2023-05-16 17:15:09

Have you ever faced the need to reload multiple tabs of your web application after a user changes some settings, like switching their account? One solution to this problem is to use the [localStorage API](https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage) to communicate changes across multiple tabs.

I will explain how to do this in a react application. I'll be explaining in class based component so it will be easily understood.

Let's consider an example where User is switching his profile, and considering **accountID** is the unique value which changes on account/profile switch and we will store that in local storage of the browser.

**Using the Storage Event**
The **storage** event is fired on the **window** object when a key in the localStorage object is updated. You can use it to detect changes in the values stored in localStorage and perform any necessary updates in your application.

```
const accountID = "abc" // getting a new unique account ID
localStorage.setItem('accountID', accountID);
```

## **[Window: storage event](https://developer.mozilla.org/en-US/docs/Web/API/Window/storage_event)**

The **storage event **is fired on all window objects (i.e., all open tabs), but we only want to handle changes made in the current tab.

```
class MyComponent extends React.Component {
  componentDidMount() {
    window.addEventListener('storage', this.handleStorageChange);
  }

  componentWillUnmount() {
    window.removeEventListener('storage', this.handleStorageChange);
  }

  handleStorageChange = e => {
    if (e.storageArea != localStorage) {
      return;
    }
    if (e.key === 'accountID') {
      // Reload all other tabs here
    }
  }

  render() {
    // Your component's rendering logic here
  }
}
```

The **Reload** logic is given below:

Either you can reload the same page

`window.location.reload();`

or you can load them back to home page of your app
			`window.location.replace(window.siteURL);`

That's all folks you can achieve by doing go. You can replicate the same logic in function based component also.
Connecting a Node Js app to Azure MSSQL database. Part 2
Tags: cloud, azure, microsoftazurestudio
Published: 2023-05-16 17:08:06




In this part, i will walk through how to **connect** a microsoft Azure Data Studio.

**To download Azure Data Studio**,click [here](https://learn.microsoft.com/en-us/sql/azure-data-studio/download-azure-data-studio)

Open Microsoft **Azure Data Studio** on your computer, Click connect and fill the neccessary fields.


We need to fill 3 fields,
1.Server's name which can be found on the azure portal


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



2.Username which is the login username we set for the server.
3.Password which is the password we set up for the server.

Once we click the connect button,assuming all the details are correct, then we should be able to see the various tables inside the database.

![tables](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8llyqxnd04p2msef7xkp.png)

We can create a new sql file using Ctrl + N.
So i am going to make a query that i wish to display as well at the end after connecting the database to the application.

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



Next we shall connect our node js app to our database in part 3
Integrate Elxir Phoenix client with JS app.
Tags: elixir, javascript, webdev
Published: 2023-05-16 16:54:23

If you have an existing JavaScript or TypeScript application, and you’d like to add a Phoenix JavaScript client to it, you can do so by following these steps:

1. Install the Phoenix JavaScript client by running the following command in your React project’s directory:

```sh
npm install --save phoenix
```

2. In your React application, you’ll need to import the `Socket` and `LongPoll` modules from the `phoenix` package, as well as the `phoenix` package itself. For example:

```ts
import {Socket} from "phoenix"
```

3. Create a new instance of the `Socket` class, passing in the URL of your Phoenix server’s endpoint as the first argument.

```ts
let socket = new Socket("ws://localhost:4000/socket");
```

4. Connect to the socket by calling the `connect` method on the socket object. For example:

```ts
socket.connect();
```

5. Once the socket is connected, you can join channels and bind to events to receive messages from the server. For example, you can join a channel named “room:lobby” and listen for the “new\_msg” event like this:

```ts
let channel = socket.channel("room:lobby", {});
channel.join()
  .receive("ok", resp => { console.log("Joined successfully", resp) })
  .receive("error", resp => { console.log("Unable to join", resp) });

channel.on("new_msg", payload => {
  console.log(payload);
});
```

6. To send a message back to the server over this channel, you can use `push` method:

```ts
channel.push("new_msg", {body: "This is a test message"});
```

With these steps, you should now be able to interact with your Phoenix server using the JavaScript client in your React application.

Please keep in mind that you might have to modify the server side to handle `new_msg` event, depend on your server implementation.

### Typescript

You can install the `@types/phoenix` package, which provides the TypeScript declarations for the Phoenix client. You can do this by running the following command in your project’s directory:

```sh
npm install --save-dev @types/phoenix
```

This package provides TypeScript declarations for the Phoenix JavaScript client, so that you can take advantage of TypeScript’s type checking and editor support when working with the Phoenix client in your application.

You could also use some pre-built package like phoenix-ts that is written in Typescript, but this is not an official library of phoenix.

It’s also worth noting that these packages may be updated less frequently than the official phoenix package, so you may want to keep an eye on that and consider updating if necessary.
Using Vulkan without linking to it. (volk alternative for vulkan.hpp)
Tags: cpp
Published: 2023-05-16 16:53:30

Instead of using the full fledged Vulkan SDK, we only can use the [Vulkan-headers ](https://github.com/KhronosGroup/Vulkan-Headers)package and load actual Vulkan implementation from the driver.

To do this, we need to enable `vulkan.hpp` dynamic dispatcher by default by setting `VULKAN_HPP_DISPATCH_LOADER_DYNAMIC` to 1, adding `VULKAN_HPP_DEFAULT_DISPATCH_LOADER_DYNAMIC_STORAGE` to the source file and updating `VULKAN_HPP_DEFAULT_DISPATCHER` as we load in more Vulkan features.

```cpp
#define VULKAN_HPP_DISPATCH_LOADER_DYNAMIC 1
#include "vulkan/vulkan.hpp"

// Vulkan defined macro storage for dispatch loader
VULKAN_HPP_DEFAULT_DISPATCH_LOADER_DYNAMIC_STORAGE

int main()
{
  	vk::DynamicLoader dl;
    PFN_vkGetInstanceProcAddr vkGetInstanceProcAddr = dl.getProcAddress<PFN_vkGetInstanceProcAddr>("vkGetInstanceProcAddr");
    VULKAN_HPP_DEFAULT_DISPATCHER.init(vkGetInstanceProcAddr);
    vk::Instance instance = vk::createInstance({}, nullptr);
    // initialize function pointers for instance
    VULKAN_HPP_DEFAULT_DISPATCHER.init(instance);
    // create a dispatcher, based on additional vkDevice/vkGetDeviceProcAddr
    std::vector<vk::PhysicalDevice> physicalDevices = instance.enumeratePhysicalDevices();	
    vk::Device device = physicalDevices[0].createDevice({}, nullptr);
    // function pointer specialization for device
    VULKAN_HPP_DEFAULT_DISPATCHER.init(device);
}
```
Nuxt + Tailwind CSS open source component library is out.
Tags: vue, nuxt, tailwindcss
Published: 2023-05-16 16:49:16


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

[News] Open source alert. 

Nuxt UI Labs built open source tailwind component library using headless ui + tailwind css. credit goes to volt team. 

Check this out . 
Quick start by adding the module to your project with a single line of code!

Documentation: https://ui.nuxtlabs.com
Source Code: https://github.com/nuxtlabs/ui


I will share open source project using the same component library soon. Stay tuned for more.
Template based configuration.
Tags: cpp
Published: 2023-05-16 16:48:11


Templates can be used, to avoid virtual function calls.

```C++
#include <iostream>

struct Impl1{
    void Run(){
        std::cout << "Impl1" << std::endl;
    }
};

struct Impl2{
    void Run(){
        std::cout << "Impl2" << std::endl;
    }
};


template<typename T>
struct Runner{
    T RunImplementation;
    void MainLoop(){        
        RunImplementation.Run();
    }
};

int main()
{
  Runner<Impl1> loop1;
  Runner<Impl2> loop2;
  loop1.MainLoop();
  loop2.MainLoop();
}
```

Types can be selected at compile-time, this can be useful if you want to implement some kind of adaptive templates. For example you can store big objects on the heap and small in the stack.
```C++
template<typename T>
using sharedPtrTypeSelector = 
    typename std::conditional<sizeof(T) <= sizeof(std::shared_ptr<T>), T, std::shared_ptr<T>>::type;

    template<typename T>
    class swStorage{
        sharedPtrTypeSelector<T> data;
    public:
        bool operator==(const swStorage &rhs) const {
            if constexpr (std::is_pointer_v<sharedPtrTypeSelector<T>>)
                return *data == *rhs.data;
            else
                return data == rhs.data;
        }
        bool operator!=(const swStorage &rhs) const {
            return !(rhs == *this);
        }

        operator T() const {
            if constexpr (std::is_pointer_v<sharedPtrTypeSelector<T>>)
                return *data;
            else
                return data;
        }

        swStorage(){
            if constexpr (std::is_pointer_v<sharedPtrTypeSelector<T>>)
                data = std::make_shared<T>(0);
        }

        explicit swStorage(const T& newData){
            if constexpr (std::is_pointer_v<sharedPtrTypeSelector<T>>)
                data = std::make_shared<T>(newData);
            else
                data = newData;
        }
    };
```
For example, I've used it to optimize storage in an Octree. 
{% embed https://github.com/marknefedov/cubic-octree %}
C++20 Concepts
Tags: cpp
Published: 2023-05-16 16:47:21

C++20 finally introduced to us SFINAE replacement – concepts. Concepts are a great example of compile-time polymorphism, they allow us easily to write generic code that will not spit to us cryptic errors.

For example, let’s write a function that will calculate the length of an arbitrary vector.

```cpp
double norm(const std::vector<double>& vector){
    double result = 0;
    for (double i : vector)
        result += std::pow(i, 2);
    return std::sqrt(result);
}
```

And now we want to use this function with a vector with a non-standard allocator, with special structs for small vectors that stored on the stack. To describe all of these cases we can introduce a concept of “vector with floating-point values”, and we can use any Indexable container as vector storage, and we need to know the size of our vector.

First of all, we need to extract value type from Vector so it can be checked if it is a floating-point type, we can achieve this using std::decay.

```cpp
template<typename Vec>
using ValueType = typename std::decay<decltype(Vec()[0])>::type;
```

We also need to make sure, that our vector can report it’s size.

```cpp
template<typename Vector>
concept FloatVec =
        std::is_floating_point_v<ValueType<Vector>> &&
        requires (Vector vec) {
            { vec.size() } -> std::integral<>;
        };
```

Now the only thing left is to update norm function. We need to deduce size type and make sure we are using the same value type for storing the result as we are using in vector.

```cpp
template<FloatVec Vec>
auto norm(const Vec& vector) -> ValueType<Vec>{
    using Size = decltype(vector.size());
    ValueType<Vec> result = 0;
    for (Size i = 0; i < vector.size(); ++i)
        result += std::pow(vector[i], 2);
    return std::sqrt(result);
}
```

Type traits also come in handy as an easy way to limit the usage of our templates. In this Vec2 we allowing only numbers to be used.

```cpp
template<typename T> requires std::is_arithmetic_v<T>
struct Vec2{
    float x,y;
    size_t size() const { return 2; }
    float operator[](size_t i) const{ return i == 0 ? x : y; }
};
```

Now we can use norm function with any vector as long as it implements FloatVec concept.

```cpp
int main() {
    std::vector<double> vector {1, 2, 2};
    Vec2<float> vec2F {.x = 3, .y = 4};
    std::byte stackStorage[64];
    std::pmr::monotonic_buffer_resource memoryResource {stackStorage, sizeof(stackStorage)};
    std::pmr::vector<double> pmrVector{{1,2,3,4}, &memoryResource};
    std::cout <<
            "std::vector: " << norm(vector)     << // 3
            "\nVec2f: "     << norm(vec2F)      << // 5
            "\npmrVector: " << norm(pmrVector)  << // 5.47723
            std::endl;
    return 0;
}
```
How to Demonstrate Achievements in Software Development
Tags: career, productivity, programming, beginners
Published: 2023-05-16 16:35:37

Being a collectionist at work can truly set you apart. As software developers, we often get so engrossed in coding that we overlook the importance of one crucial aspect: Documentation. 

**_Forget all you know about it_**: 
- It is the evidence of your track record of achievements; 
- it is the tangible proof of your expertise and skills.

Documenting solutions aren't simply tasks to check off your list, they are the building blocks that shape your professional reputation. When you establish yourself as an expert in a particular area through meticulous documentation, you are essentially creating an enduring legacy of your work. 

Even if it's not perfect, it's better than having no record at all.

1. Why is this important? Well, consider this: In just six months, it's quite likely that your colleagues or superiors will barely remember the details of what you've achieved. But if you have that achievement well-documented, it stands as a testament to your capabilities. 

2. Over time, these documents compound to form a solid, undeniable record of your technical prowess. That's why in my [Software Development Simulation Game](https://devmanager.carrd.co) it will be the main resource.

3. Let's take it one step further. As software developers, our work is mostly intangible. We can't show lines of code as proof of accomplishment to our managers. But, an architecture document? That's a different story. To any non-technical manager, an architecture document might as well be rocket science. It's a clear indicator of a job well done, a complex task undertaken and seen through to completion.

4. Even if your manager is technical, or you're reporting to a team lead, you'll find that they'll respect your initiative in writing it down. After all, documentation fosters communication and learning. If there are any issues or misconceptions in your work, these can be identified and rectified during the documentation process.

5. This way, you not only create a **collection of cool documents** that reflect your journey as a developer, the compound effect of creating new documents often outpaces the impact of implementing new features. While a feature may provide immediate value, its influence is limited and temporary. On the other hand, each document you write builds a lasting, cumulative record of your skills and achievements, accruing value over time. This ongoing documentation effort ultimately creates a more powerful and enduring professional legacy.

So, my fellow software developers, embrace the role of a collectionist at work. Start documenting your solutions and writing about your areas of expertise. It might require a bit more effort, but the compound effect over time will be well worth it. Your future self will thank you, and your professional standing will be all the better for it.

If you are not completely satisfied with the article, leave a comment below so I can adjust the next one to meet your needs.
The Upstream agenda is out, and it's 🔥
Tags: event, maintainers, opensource
Published: 2023-05-16 16:28:01

---
title: The Upstream agenda is out, and it's 🔥
published: TRUE
description: If you haven't already marked June 7, 2023 on your calendars, you should do it now. 
tags: event, maintainers, opensource
cover_image: https://4008838.fs1.hubspotusercontent-na1.net/hubfs/4008838/Social%20post%20-%207%20(2).png
# Use a ratio of 100:42 for best results.
# published_at: 2023-05-16 16:17 +0000
---
It's happening! 🎉  The first pass at the Upstream agenda is out, and we hope you're ready for an action-packed day. If you haven't already marked **June 7, 2023** on your calendars, you should do it now. [RSVP here] (https://upstream.live/?utm_source=referral&utm_medium=devto). ✅ (The first 500 U.S.-based registrants get a free shirt 👉...don't wait.)

This year’s theme is the accidental supply chain, and we can't wait to hear what the speakers have in store for you regarding this topic and others important to open source.

Here’s a preview of the day:

* Luis Villa, Tidelift co-founder, will kick off the day by introducing the accidental supply chain theme—and give us some ideas for how the open source community can make it a little less...well... accidental. 
* Nithya Ruff, head of the open source program office at AWS, will discuss how we live in this world of unintended relationships between supplier and consumer, and who is responsible for making it work for both.
* Allan Friedman, senior advisor and strategist at the U.S. Cybersecurity and Infrastructure Security Agency, will share a unique perspective as someone within the agency responsible for strengthening cybersecurity and infrastructure protection.
* Julia Ferraioli, co-founder of Open Source Stories, will discuss how the sustainability and supply chain conversations oftentimes leave out a critical factor in the equation: the people and social systems without which there would be no open source.
* Mike Milinkovich, executive director of the Eclipse Foundation, will discuss how well-meaning attempts to regulate the global open source phenomenon run the risk of killing the very thing that made it successful in the first place.
* Taylor Fairbank, Director of Growth at Distributive Aid, will tell the tale of his accidental supply chain, describing how he went from OSS maintainer to humanitarian aid worker.
* Jose Palafox, Strategic Application Security Executive at GitHub, will share ways to secure your open source project on Github.com.
* And tons more talks from experts throughout the open source community.

Throughout the day, we will hear directly from both the maintainers of the accidental supply chain and the consumers who depend on them. We expect some fascinating discussion, and can't wait to hang out with you all day.

[Have you registered](https://upstream.live/?utm_source=referral&utm_medium=devto)? The first 500 U.S.-based registrants will get a free t-shirt. 👕 Inventory is very limited so register quickly!