teleren/devto huggingface dataset:
Hacktoberfest Week 3: Enhancing a Feature
Tags: opensource
Published: 2022-10-24 01:52:43

For the third week of Hacktoberfest, I wanted to continue contributing to the same project from [week 2](https://dev.to/alexsam29/hacktoberfest-week-2-first-bug-fix-5ao3) and adding to my previous contributions.

## Project Recap
To recap the project from the previous week, the project repo called [Remotebirdjobs](https://github.com/Google-Developer-Student-Club-RJIT/remotebirdjobs-frontend). This is a website that searches Twitter for job posting Tweets based on a programming topic/language (i.e. React, C++, JavaScript, etc.) within a date range. The project is built using React.js.

## The Issue
I found another issue ([issue #19](https://github.com/Google-Developer-Student-Club-RJIT/remotebirdjobs-frontend/issues/19)) within the project that was closely related to the previous issue I worked on ([issue #34](https://github.com/Google-Developer-Student-Club-RJIT/remotebirdjobs-frontend/issues/34)).

The issue was again related to the date picker used to select the date range. The issue proposes new changes that will add logic to prevent a date being selected that is less than the start date. The project maintainer also requested to have the start date and end date be selected at the same time, without needing to have two different input fields and only opening the date picker once.

## Fixing the Issue
To fix the issue, I used the same `<DatePicker/>` component so I wouldn't have to change much or install other components. I tried brainstorming and experimenting with other React date pickers and components, but none worked as well as I had hoped.  So, I stuck with the component in currently in use. I added some React state hooks to handle the the start and end date changes.  Then readjusted the `onChange` attribute to call the `onChange()` function I created to call the state hooks and change the start and end dates. I also added some attributes that enables range selection and month/year dropdown menus for date easy selection. I also deleted the second date picker and increased the width of the sole date picker.

## The Pull Request
Once the changes were made I created the [pull request (PR)](https://github.com/Google-Developer-Student-Club-RJIT/remotebirdjobs-frontend/pull/48). The PR described every changes I made and my reasoning behind the changes and additions. The project maintainer has not commented nor merged the PR as of yet, but I will update the blog and discuss any potential changes that may be requested.

## Conclusion
The PR for this week was definitely challenging as the brainstorming and experimenting with other components took up the most time. I'm glad to have experienced working on the same repo and adding to my previous contributions.  Now I look forward to the final week of Hacktoberfest and the last PR for this assignment.
Delivery Acceleration: Testing & Validation
Tags: softwaredevelopment, programming, devops, productivity
Published: 2022-10-24 06:53:20

Before we enable code for our clients, we need to test and validate it does what is expected. This could be an entire series of its own (please let me know if you want one), so I will keep it on a high level.

## Testing

I could probably spend hours sharing different types of testing strategies and where and why to use them.  
In reality, the most important thing, is to make sure we use the correct ratio of the different types of tests, as it will highly affect the time and location of your testing.

This ratio has always been shown as a pyramid with:

* **Unit test**: validate individual pieces of logic that are isolated.
* **Integration test**: validates interactions with multiple parts of your system or other systems.
* **Integrated test**: They test the system as a whole.

![](https://www.kanekotic.com/img/pyramid.jpeg)

Tests are divided in these layers because there is a cost in time and complexity.

This affect the next DORA 4 metrics:

* ✔️ **Change Failure Rate**

## Validation

Validation differs from testing as it's the confirmation that the behavior is what the user expected, for now, humans are the only ones that can discern this.  
As we have seen in the previous chapter, the recommendation is to do this in production, so you get:

* Get real behaviors of interactions with other systems
* Get real performance

This affect the next DORA 4 metrics:

* ✔️ **Change Failure Rate**
javascript: Object to CSV
Tags: javascript, webdev, beginners, programming
Published: 2022-10-24 06:26:38

This is a very much needed requirement in all most all web applications as and when backend doesn't support download for given results. 

We generally populate results in table -> To populate we need to iterate over array contains data objects.

Like,

```javascript
const data = [
{ name: 'Tom', id: '1234'},
{ name: 'James', id: '3456'},
{ name: 'Jerry', id: '7890'},
{ name: 'Peter', id: '4321'}
];
```
And, the above forms table as:

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

Just want same results to be downloaded as CSV.

```javascript
  const headers = Object.keys(data[0]).join();
    const content = data.map(value => Object.values(value).join());
    const csv = [headers].concat(content).join("\n");
    const element = document.createElement('a');
    element.href = 'data:text/csv;charset=utf-8,' + encodeURI(csv);
    element.target = '_blank';
    element.download = 'export.csv';
    element.click();
```
Done. Your CSV gets download as show in below:

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

Always welcome any improvements.

Thanks.

Follow: https://twitter.com/urstrulyvishwak
1239. Leetcode solution in Java
Tags: java, chiki1601, challenge
Published: 2022-10-24 06:16:13

```java



class Solution {
    int ans = 0;

    public int maxLength(List<String> arr) {
        boolean[] flags = new boolean[26];
        dfs(0, arr, flags);
        return ans; 
    }

    void dfs(int p, List<String> arr, boolean[] flags) {
        for (int i = p; i < arr.size(); i++) {
            boolean[] prev_flags = flags.clone();
            boolean flag = true;
            for (int j = 0; j < arr.get(i).length(); j++) {
                if (flags[arr.get(i).charAt(j) - 'a'] == true) {
                    flag = false;
                    break;
                } else {
                    flags[arr.get(i).charAt(j) - 'a'] = true;
                }
            }
            if (flag == true) {
                int cur_ans = 0;
                for (int j = 0; j < flags.length; j++) {
                    if (flags[j] == true) {
                        cur_ans += 1;
                    }
                }
                ans = Math.max(ans, cur_ans);
                dfs(i + 1, arr, flags);
            }
            flags = prev_flags.clone();
        }
    }
}
```

#Leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/maximum-length-of-a-concatenated-string-with-unique-characters/
How to play Streaming Audio?
Tags: javascript, angular, twilio
Published: 2022-10-24 06:14:01

I have a live call system, and backend receives data from Twilio, with payload is base64 string, sequence of payload and send to me via webSocket. The sound could be played but the quality is not good.
I'm not sure about the reason for it, Internet Connection or my code. I want the quality of sound better. How can i do? Thank!

```
subject.subscribe(async (msg: any) => {
      if (msg.event === 'media') {
        if ( !this.audioBuffers[msg.streamSid]) {
            this.audioBuffers[msg.streamSid] = {
            timestamp: '',
            phone: '',
            buffer: [],
          };

          tempAudio[msg.streamSid] = {
            timestamp: [],
            payload: [],
            phone: '',

          };

        }
          tempAudio[msg.streamSid].payload[msg.sequenceNumber] =
            await this.audio_ctx.decodeAudioData(
              this.base64ToBuffer(msg.media)
            );
          var buffer = tempAudio[msg.streamSid].payload.filter(function (el) {
            return el != null;
          });
          this.audioBuffers[msg.streamSid].buffer = buffer;
            }      
    });
```

```
this.audio_ctx.resume()
 const gainNode = this.audio_ctx.createGain();
while (current < this.data.length) {
        const source = this.audio_ctx.createBufferSource();
        source.buffer = this.data[current];
        gainNode.gain.value = this.isMute ? 0 : this.volume;
        gainNode.connect(this.audio_ctx.destination);
        source.connect(gainNode);
        const will_stop = new Promise((res) => (source.onended = res));

        source.start(0);
        await will_stop;
        current++;

      }
```
Answer.dev launch! An Open Source Q&A Community Software
Tags: community, go, opensource, typescript
Published: 2022-10-24 06:02:20

We are launching Answer.dev Alpha, an open-source Q&A community software.

Being highly scalable and modern, Answer.dev is an open-source knowledge-based community software with which you can **efficiently build various Q&A communities, ranging from customer support to user communication**.

![Screenshot of Answer](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ogkrap30p6k1s6da97bb.png)

Having been exploring the Q&A community for over a decade, **we have gained valuable experience related to community development, which we are willing to share with more organizations of various industries.** Thus, we launched Answer.dev, a software incorporating both practical features and our thoughts on community products.

Answer.dev not only has the basic features to build a **Q&A Platform** but also has many **special features to help make it easier for users to participate in community contributions** such as votes, reputation, and badges, etc.

It's our sincere hope that everyone can build his own community in an easy and effective way. And step by step, we gather collective intelligence and promote industry progress!

**For more details, refer to [Answer.dev](https://answer.dev/) official website and [GitHub](https://github.com/answerdev/answer).**

## Answer.dev Alpha Features
### Q&A Platform
Help members with questions and boost community participation. Your experts are happy to contribute, verify, upvote correct info. Your info keeping up-to-date and trusted.

### Organized
Use tags to organize questions and help contents into categories. They make knowledge easy to find for others. Use the search to quickly find the answer.

### Integrations
Configure your community with plugins and your favorite services. So that you can improve your workflow, grow your community, or make your other tools better.

### Gamification
We've gamified the Q&A platform with reputation and badges. So the community members and teams have fun collaborating and getting work done.

## Answer.dev Alpha Features
The features already supported in this release of Answer.dev Alpha are
- Core module includes question, answer, and comment
- Content quality control through voting
- Reputation measures user contributions and trust levels
- Modern design that's both desktop and mobile friendly

## Answer.dev Outlook
We plan to release Answer.dev v1.0.0 in December 2022, and we will next be working with the Answer.dev community on the following areas.
- Optimizing the installation and configuration interface
- Improvements to backend administration features
- Multi-language support
- Customized themes and styles

--------

**Answer.dev is still under very active development. Watch on [GitHub](https://github.com/answerdev/answer) to receive updates.**

Answer.dev is just getting started and welcomes all contributions! It can be with code or documentation, issues or pull requests. For those of you who are willing to engage, let's build the Answer.dev community together. If you like this project, please star on GitHub.🌟🌟🌟
Which programming language should be learned first?
Tags: beginners, javascript, html, programming
Published: 2022-10-24 05:55:48

Many people ask me the easiest programming language to learn And I have Also asked Manu people about this topic.i have Also experienced this and I know Many begineers here would be thinking to learn some programming language but the confusion is which to be learned first? 

According to me, the easiest and best to be learned first is HTML (Hyper text markup language) followed by CSS and JavaScript. These are the most important language for Web development. And believe me these are the easiest one available. So go and learn this programming language easily. You can also build your career with these language I suggested.

You can follow me on GitHub to get going on: https://GitHub.com/nishanmishra
Calculator in HTML CSS JS in 2 min
Tags: beginners, webdev, html, javascript
Published: 2022-10-24 05:50:08

I developed a succesfull and well styled calculator in HTML CSS and JavaScript in just 5 minutes. It's a very easy project to learn the basics of HTML CSS and JavaScript and my this project can help many of the begineers to get set go....Checkout the demo and GitHub repo. Links below:

GitHub repo: https://github.com/nishanmishra/Calculator-in-HTML-CSS-JS-

Demo: https://nishanmishra.github.io/Calculator-in-HTML-CSS-JS-/
How to Make Quote Generator in React
Tags: javascript, beginners, react, programming
Published: 2022-10-24 05:42:48

In this article, we are going to make a quote generator in react. We will use a JSON file to get a random quote, this will allow our application to get a unique and new quote every time as we refresh the application. In this application we will add a lets say textarea and a button to refresh the quote.

This project won’t be too hard to do, but it will be very simple and easy to do. So let’s make this application step-by-step.

## Pre-requisites to Make Quote Generator in React

- Basic knowledge of ReactJS.
- Basic knowledge of CSS.
- Basic knowledge of React props and hooks.

## Customizing App Component
Firstly, we will make some changes in App.js component. Here we have added our Quote component, in which we will add our main logic. Then we have imported App.css file, in which we will have some basic style of course. And lastly, we have just called <Quotes> in here to access Quote.js. As we can see, our App.js file is pretty straight-forward and clean, this is the power of react components. We will add logic in our Quote.js file, so let’s move to it.[Read More](https://reactjsguru.com/how-to-make-quote-generator-in-react/)
React Suspense for data fetching
Published: 2022-10-24 05:37:32

In React 18 there is a new feature called **Suspense** that lets you declaratively **wait** for anything including data. Suspense is not a state management system like Redux. It merely enables declarative fallback rendering while a component waits for an asynchronous operation (such as a network request) to be finished. It allows us to synchronize loading states across different components which allows for a better user experience.

## How To Use Suspense
 
Let's compare the implementation of the conventional conditional rendering method against Suspense to see how it works.

```js
import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {
   const [isLoaded, setIsLoaded] = useState(false);
   const [city,setCity] = useState(null)
   const [search,setSearch] = useState("karachi")

    useEffect( () => {
       axios(`http://api.openweathermap.org/data/2.5/weather?q=${search}&appid=cf7b1a203b58aa52e37fb606f1650331`)
     .then((r) => {
       console.log(r);
       setCity(r.data);
       setIsLoaded(true);
     })
     .catch((e) => {
       setIsLoaded(false);
       console.log(e);
     });
    },[search])
return (
     <div>
         {!isLoaded && <p>loading...</p>}
         {isLoaded && (
          <input
            type="search"
            className="inputfield"
            onChange={(event) => {
              setSearch(event.target.value);
            }}
          />
        
          <div>
              <h1>
                <i className="fas fa-street-view"></i>
                {search}
              </h1>

              <h2>{city.temp}</h2>
              <h3>Min : 5.25 cel | Max : 5.25 cel</h3>
          </div>
        )}
      </div>
  );
};

export default App;

```
This method is generally called “fetch-on-render” because fetching doesn’t start until the component has been rendered.
Now let’s see how this example would be rewritten using React Suspense.

```js
import React, { Suspense } from "react";
import "./App.css";

const Weather = React.lazy(() => import("./components/Weather"));

function App() {
 return (
   <div className="App">
     <Suspense fallback={<p>loading...</p>}>
       <Weather />
     </Suspense>
   </div>
 );
}
```
In the code block above, the Weather component is wrapped with a Suspense component which contains a fallback prop. This means that when the component Weather is waiting for an asynchronous operation,React will render "loading..." to the DOM instead.The Weather component is then rendered only after the promises and APIs are resolved.
Google Developers Student Club - MET collaborates with Newton School
Tags: programming, javascript, opensource, webdev
Published: 2022-10-24 04:45:50

### Hello Everyone do register for this coding contest and give your 100% efforts.

# Grand Coding Contest: Google Developer Students Club - MET & Newton School 

<img align="center" src="https://user-images.githubusercontent.com/61585443/197405721-9e22b49e-b738-442a-9a05-b5d7c0fe2e21.jpeg" width="500" height="500"/>



### This Diwali Code To Celebrate! 🪔
### **| 𝐏𝐫𝐢𝐳𝐞 𝐌𝐨𝐧𝐞𝐲 & 𝐆𝐢𝐟𝐭 𝐕𝐨𝐮𝐜𝐡𝐞𝐫𝐬 𝐰𝐨𝐫𝐭𝐡- ₹ 30,000 | 𝐅𝐫𝐞𝐞 𝐑𝐞𝐠𝐢𝐬𝐭𝐫𝐚𝐭𝐢𝐨𝐧 |💰**

   **💡 REGISTER NOW** - [**STRICTLY USE this Registration Link ❗**](https://bit.ly/October-Coding-Contest-MET)

- Unlock the _**Free Exclusive**_ Beginner Friendly Courses 
- Language Used: **c / c++ / Java / Javascript / Python** 
- Date of Contest: 27th Oct 2022 (Thursday) at 9:00 pm - 11:30 pm
- Eligibility: **_Open to All_**


**Perks** : 
         **_Individual Event_**
         1. 1st rank holder will receive **Swags**
         _**Team Event**_
         1. 1st rank holder team will receive **Swags**. (NOTE: Every member in team will receive swags)
          


Join Our Community - [**Discord**](https://bit.ly/3wug972)

PS: **Unique Questions Designed By ICPC Finalist**

<video src="https://user-images.githubusercontent.com/61585443/197406215-04655658-bb4d-4a51-ad0b-c1f7b3e930ce.mp4" width="500" height="800"></video>


# NOTE!!! : Whoever registers over here will have to comment below that you have registered! 

``` Thank You🧡 ```
Write a PHP library supports PHP 5.6 to 8.1
Tags: php, phpunit
Published: 2022-10-24 04:02:18

---
title: Write a PHP library supports PHP 5.6 to 8.1
published: true
description: 
tags: PHP, PHPUnit
cover_image: https://images.unsplash.com/photo-1599507593548-0187ac4043c6?w=640
# Use a ratio of 100:42 for best results.
# published_at: 2022-10-24 03:12 +0000
---

Yes, you heard it right. We need to write a PHP library that supports from PHP 5.6 to PHP 8.1

There are still people out there using EOL PHP versions and we still want them to be able use our package.

Things that needs to be done needs to be done. Let's get to it.

## The Code

Actually writing the code itself is probably the easiest part. You just don't use the fancy new stuff and stick to the old way.

I run two tools for this - [php-cs-fixer](https://github.com/FriendsOfPHP/PHP-CS-Fixer) on PHP 5.6 and the built-in syntax checker(`php -l`).

There's an existing Github Action [prestashop/github-action-php-lint](https://github.com/PrestaShopCorp/github-action-php-lint) which handles this for you.


A full example of these two checks can be found [here](https://github.com/smartpay-co/sdk-php/blob/master/.github/workflows/php.yml)

## The Tests

Writing the code is easy, but writing the tests is not. PHPUnit [does not support old PHP versions](https://phpunit.de/supported-versions.html) and you can't use the latest PHP version with old PHPUnit version due to syntax issues.

[Yaost/PHPUnit-Polyfills](https://github.com/Yoast/PHPUnit-Polyfills) came to rescue. With just tiny adjustments to your tests, this can make your tests run across PHPUnit 4.8~9.x and PHP 5.4+

## The CI

We also want to run tests for different versions automatically so we don't have to manually tests everything.

The official PHPUnit & composer Github Action didn't play well with old PHP versions.

I found [shivammathur/setup-php](https://github.com/shivammathur/setup-php) did a better job on supporting old PHP versions, and you don't have to worry about the composer & extension compatibility, it handles those for you.

Here's a [full example](https://github.com/smartpay-co/sdk-php/blob/master/.github/workflows/pr.yml) that you can run a matrix of PHP versions for your tests.

## Wrap Up

Writing a PHP library that supports from PHP 5.6 to PHP 8.1 is not as hard as I imagine at the very beginning. PHP handles backward-compatibility very well. PHPUnit took me most of the time to figure out. Hopefully there're already a tool for that. I am not alone.

Hope this helps someone out there, trying to do the same thing.
how to save creation and updation timestamp with hibernate
Tags: java, hibernate, jpa, sql
Published: 2022-10-24 03:29:21

**Object time stamping feature of hibernate**


->this feature keeps track of the object/record is saved/inserted initially

later it also keeps track of when record/object is lastly updated/modified

=>Object versioning feature keeps track how many times the object/record is modified using

Hibernate persistence logic where Object timestampping feature keeps track when exactly the Object/record

is inserted and lastly updated.

for Detailed explanation you can watch the video
{% embed https://youtu.be/J1iwnF4Vrw0 %}


**useCases for timeStampping
**

->Keeping the track of when the password lastly changed

->keeping the track of when stock market share values lastly updated/modified

->Keeping the track of when last tx happend in the bank account



**In annotation driven HB programming**

->we can enable timestamp,version features at a time on single entity class

-> in timestamp feature we can take seperate col/property holding the object/record

insertion date and time and another seperate property holding object/record last updation

date and time


**
@CreationTimeStamp

@UpdationTimeStamp
**
A Community Website Like Facebook!
Tags: webdev, functional, wordpress, news
Published: 2022-10-24 03:25:46

Guys, I have successfully developed a Community/Social media website like Twitter and Facebook using WordPress. Just register in this site and please try all the features and suggest me what I can do to improve the website more and more. Please help guys. Link is below 

Site: https://dev-dazage.pantheonsite.io/register/