teleren/devto huggingface dataset:
Hacktoberfest 2021
Tags: beginners, hacktoberfest, programming, github
Published: 2021-11-17 05:48:32

I recently participated in my first Hacktoberfest, and it was one of the highlights of an otherwise uneventful month. Being very new to using GitHub, it was a fun learning experience from learning about doing your first pull request to making useful and meaningful contributions to major projects. 

I will definitely continue to participate in the event, and will try to continue to contribute to GitHub in my free time. Through this even I was able to gain lots of useful knowledge as well as enter a bunch of cool communities (including this one). I definitely recommend anyone, especially newer programmers, to try Hacktoberfest. 

On another note, I'm really excited to enter into this community at DEV and I hope to learn lots here :D
State update issue
Tags: react, javascript
Published: 2021-11-17 05:28:31

I have state object with properties as below

```
const initialState = {      
    active:false,
    section: []
}

const[state, setState] = useState(initialState)

const binType = ()  => {
    const selectedBin = []
    data.map((item) => {
      if(item.Bin == val){
 
        item.title = item.Item
        item.content = item.Description
        selectedBin.push(item)
       }

    })
    setState({..state,section:selectedBin})
    console.log(state.section)
}

```
Outputs empty arrary. Any idea how to update object properties.
Day 11 of #100daysofcode: A truly hectic day
Tags: 100daysofcode, react, python, beginners
Published: 2021-11-17 05:27:37

Getting this update out a little late (just after midnight, did I fail the challenge?), today was truly hectic. The first Great Deadline came up class today, and everybody was scrambling. Long story short, the time I have been setting aside to write these got eaten up and I nearly forgot to write it up!

Anyways on to the update!

## Today
Today was the busy day of the week (even busier than usual), so I did not have much time to set aside for my project. FreeCodeCamp is still getting along nicely, I really like their tutorials. I wish I had found their site much earlier.

I also did a bit of research on Django, as I think I want to try using Django on the app that I will be creating later in this challenge. Perhaps I will take a detour for a bit and follow the Django tutorial in the coming days.

## Tomorrow
I'm going to leave this as TBD for now. Tomorrow is a new day and I'm still bogged down with the days stress.

## What I'm Struggling on
Deadlines in group projects, apparently! I'm proud to say we turned it in in time.


As a closing thought; I think that these challenge updates have been lacking the spice I was hoping I would be able to give them. School is eating up significantly more time than I thought it would. I should probably have started this challenge a little later than I did, but as they say; "it's not how you start, it's how you finish."

And I intend on finishing.

That's all for today! If you have any suggestions (other than "work on the projects you said you would work on"), please let me know!

See ya next time.
Using Bash Sort to Sort Files Like a Boss
Tags: bash, automation, linux
Published: 2021-11-17 05:14:18

Are you looking out for a way to organize your files and perform some operations on them? There are many instances in programming where you need to sort some data, such as a list of files. Sorting files with the Bash sort and ls commands will help you keep things organized.

In this tutorial, you will learn the fundamentals of sorting files and file contents.

I wrote this post to help you learn the fundamentals of sorting files and file contents using Shell scripting.

Read the full blog on [Adam The Automator](https://adamtheautomator.com/bash-sort/).

Thanks for reading 💜

---

I publish a [monthly newsletter](https://www.ravsam.in/newsletter/) in which I share personal stories, things that I am working on, what is happening in the world of tech, and some interesting dev-related posts which I across while surfing on the web.

Connect with me through [Twitter](https://twitter.com/ravgeetdhillon) • [LinkedIn](https://linkedin.com/in/ravgeetdhillon) • [Github](https://github.com/ravgeetdhillon) or send me an [Email](mailto:ravgeetdhillon@gmail.com).

— [Ravgeet](https://www.ravgeet.in/), *Full Stack Developer and Technical Content Writer*
joinToString() Kotlin function to get comma separated strings
Tags: android, programming, mobile, mobiledevelopment
Published: 2021-11-17 05:13:34

Recently I had to display a series of strings as a comma-separated value in a text view. I was going to do it as I had done it in java but I did some google and tried to look into Kotlin's way. Over the observing Kotlin code and example, I adopted a practice which made me utilize Kotlin at it's best- Each time you have to iterate a list for gathering data, consider searching for a Kotlin function or an operator that doesn't require you to write a for loop.

This practice led me to use the *joinToString()* Kotlin method to reduce loop usage to create a list of comma-separated "string" values from an Array.
Here I am going to display how I used to do and how Kotlin made the task easier

## Java Syntax:

```
List<String> serialNumbers = new ArrayList();
for (int i=0; i< serialNumbers.size(); i++) {
VehicleSerialNumber vehicleSerialNumber = serialNumbers.get(i);
StringBuilder separatedSerialNumber = new StringBuilder();
separatedSerialNumber.append("\'"+vehicleSerialNumber.nameOfStringVariable +"\'");
if (i != listOfStringColumn.size() -1 ) {
separatedSerialNumber.append(", ");
}
}
```

## Kotlin Code:
```
val separatedSerialNumber = serialNumbers.joinToString { it }
Output: a, v, b, d, g
```

… and that's it! reduced 9 lines of code to 1 line. No for loop, no using unnecessary conditional code (to remove last appended ',').

[Kotlin joinToString() Function :](https://kotlinlang.org/api/latest/jvm/stdlib/kotlin.collections/join-to-string.html)
The joinToString() function is used to convert an array or a list to a string that is separated from the mentioned separator.
Comma with a space (, ) is the default separator used, if we need to use a different separator, we can mention it like so:
Let's use "-" as a separator

```
val separatedSerialNumber = serialNumbers.joinToString (separator = "-") {it}
Output: a-v-c-d-g
```

Keep coding. Keep helping. Happy coding!!!!
TOP 10 TIPS AND TRICKS FOR DAILY USE
Tags: productivity, windows, tricks
Published: 2021-11-17 05:11:54


#In this post, I will be telling you some useful tech tips.


##1. Minimizing all windows at once 

Press the key Win + D to quickly minimize all the open windows or you want to minimize all the windows except one, then select that window and then shake it with your cursor and all the other windows will get minimized except that one.

##2. How to see About PC with a shortcut

Press Win + Pause/Break key together this will open the About PC window.

##3. Permanently delete an item without sending it to recycle bin
 
Select the item you want to delete and then press the Shift + Del key it will get permanently deleted.

##4. Open File Explorer with a shortcut

Press Win + E this will open up your file explorer

##5. Open Task Manager quickly

Press the Ctrl + Shift + Esc key to quickly launch Task Manager

##6. Reopen the previously closed tabs on chrome

Press Ctrl + Shift + T to reopen the last closed tab one by one 

##7. See your last copy history in windows 

Press the Win + V key to open the clipboard to see the history of the things you have copied

##8. Open a new tab quickly in chrome 

Press Ctrl + T keys to quickly open a new tab in chrome

##9. Quickly switch between open windows

Press the Alt + Tab key to cycle through all the open windows on your computer

##10. Open your browsing history

Press Ctrl + H key in your browser to go to your history


Thank you everyone for reading this post. Comment **“Tips n tricks”** if you see this 🙂
Floating Action Button [ Top 20 floating button animation ]
Tags: javascript, webdev, html, css
Published: 2021-11-17 04:37:32

Hello Friends, In this article I have listed Top 20 floating action button code examples which are available on CodePen.

## Best collection of floating button animation
In this collection, I have listed Top 20 floating button examples. Check out these Awesome Button Design like: #1Material Share Floating Button, #2Pure CSS Floating Button, #3Animated Share Floating Button, and many more.

### 1 Material Share Floating Button
![Material Share Floating Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oqqpg8zepbwa1aj14io.gif)
Material Share Floating Button Material Share Floating Button, which was developed by Bhakti Pasaribu. Moreover, you can customize it according to your wish and need.

Author: Bhakti Pasaribu Created on: March 7, 2016 Made with: HTML(Pug), CSS(SCSS) & JS Demo Link: Source Code / Demo Tags: Material Share Floating Button

### 2 Pure CSS Floating Button
![Pure CSS Floating Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/208ocwev453fh2w0214p.gif)

Pure CSS Floating Button Pure CSS Floating Button, which was developed by Jones Joseph. Moreover, you can customize it according to your wish and need.

Author: Jones Joseph Created on: April 5, 2019 Made with: HTML & CSS Demo Link: Source Code / Demo Tags: Pure CSS Floating Button

### 3 Animated Share Floating Button
![Animated Share Floating Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/apfosxgvhejx34jkdhzi.gif)
Animated Share Floating Button Animated Share Floating Button, which was developed by Rahul Jangid. Moreover, you can customize it according to your wish and need.

Author: Rahul Jangid Created on: February 12, 2021 Made with: HTML, CSS & JS Demo Link: Source Code / Demo Tags: Animated Share Floating Button

### 4 Animated Floating Action Button
![Animated Floating Action Button](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9xhdsu8m824vjr1o2xri.gif)
Animated Floating Action Button Animated Floating Action Button, which was developed by João Fernandes. Moreover, you can customize it according to your wish and need.

Author: João Fernandes Created on: December 21, 2016 Made with: HTML(Pug), CSS(Sass) & JS Demo Link: Source Code / Demo Tags: Animated Floating Button

### 5 Floating Button With Hover Effect
![Floating Button With Hover Effect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zfbrafn7f3hxwm6onu0e.gif)

Floating Button With Hover Effect Floating Button With Hover Effect, which was developed by Mike Wagz. Moreover, you can customize it according to your wish and need.

Author: Mike Wagz Created on: February 9, 2017 Made with: HTML, CSS(Sass) & JS Demo Link: Source Code / Demo Tags: Floating Button With Hover Effect

#### Check All [Floating Action Button](https://blog.stackfindover.com/floating-action-button-examples/)
Piggy Bank
Published: 2021-11-17 04:03:33

[GitHub Repo](https://github.com/sagordon-dev/piggy-bank)
![Console Output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pcc89re0l32rv7ysbku2.png)

```c++
#include <iostream>

int main(int argc, char const *argv[])
{
    double pesos = 0, reais = 0, soles = 0;
    const double pesos_usd = 0.048, reais_usd = 0.18, soles_usd = 0.25;

    std::cout << "Enter number of Colombian Pesos: ";
    std::cin >> pesos;

    std::cout << "Enter number of Brazillian Reais: ";
    std::cin >> reais;

    std::cout << "Enter number of Peruvian Soles: ";
    std::cin >> soles;

    double total_amount = (pesos * pesos_usd) + (reais * reais_usd) + (soles * soles_usd);
    std::cout << "US Dollars = $" << total_amount << "\n";

    return 0;
}
```
[Verify my C++](https://www.ziprecruiter.com/verify-skill/4503e8d7/v1:U2FsdGVkX18T2mNhVD3XPP3Ir1GllcDE1OotC_AD235aRPOO-lLmT_RQYHQPjX0xx6faaxisTdg/#QyBQcm9ncmFtbWluZw==)

Photo by <a href="https://unsplash.com/@ninjason?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jason Leung</a> on <a href="https://unsplash.com/s/photos/currency?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>
Opensource Covid Tracker - India
Tags: opensource, showdev, 100daysofcode, react
Published: 2021-11-17 04:00:08

Live Website - https://covid-tracky.vercel.app

Hello, Welcome to this blog about the my covid tracker website CovidTracky an alternative to covid19india.org. This website aims to provide you the latest and the most accurate data for covid19 cases. I do this because it affects all of us. Today its someone else who is getting infected; tomorrow it could be me, who knows. We need to prevent the spread of the virus. We need to document the data so that people with knowledge can use this data to make informed decision.

The data for covid19 cases is provided by The Indian Institute Of Hydrebad used for getting updated covid19 cases.

About me 

I am a 14 years old developer who wants to be the best developer on this planet. I maintain and made this website ( using the source of covid19india.org ). Thanks to covid19india.org team for their outstanding work in creating the original portal, and for making their code base public
W3C TPAC 2021 archive, Cypress v9, Deno 1.16, React Router v6, and more | Front End News #043
Tags: news, frontendnews
Published: 2021-11-17 03:56:23

> **NOTE:** This is issue #043 of my newsletter, which went live on Monday, November 15th. If you find this information useful and interesting and you want to receive future issues as they are published, ahead of everyone else, I invite you to join the subscriber list at [frontendnexus.com](https://frontendnexus.com/).

***

It has been a very quiet week in the web industry. Therefore I decided to bring to your attention the W3C Plenary Meeting (TPAC 2021). This is the annual conference of W3C, and we can now explore the archive of the breakout sessions. We also have a few notable updates with Cypress v9, Deno 1.16, React Router v6, and more.

***

## W3C TPAC 2021 Sessions

The Technical Plenary meeting (TPAC) is the annual conference of W3C. During that week, many W3C Working and Interest Groups gather, network, and try to resolve challenging technical or social issues.

We can now explore the archive of breakout sessions for this year's edition. It contains minute transcripts, slides, and video recordings of the sessions. Here are just a few topics that caught my attention:

- Web Components Community Group: Community-driven spec/API prioritization
- The State of Web Monetization
- Accessibility & CSS
- Accessibility for Children
- Project Fugu: Almost Three Years In… (*note: this is the project that allowed Photoshop to have a web version*)

I think this is a wonderful occasion to have a look at the way the modern web is built.

- [Archive of breakout sessions](https://www.w3.org/2021/10/TPAC/breakouts.html)

***

## Software updates and releases

- **[Bree v7.0.0](https://github.com/breejs/bree/releases/tag/v7.0.0)** - the best job scheduler for Node.js and JavaScript
- **[Cypress v9.0.0](https://github.com/cypress-io/cypress/releases/tag/v9.0.0)** - fast, easy and reliable testing for anything that runs in a browser
- **[Deno 1.16](https://deno.com/blog/v1.16)** - a secure JavaScript and TypeScript runtime
- **[Hugo 0.89.0](https://gohugo.io/news/0.89.0-relnotes/)** - the world’s fastest framework for building websites
- **[React Router v6](https://remix.run/blog/react-router-v6)** - Declarative routing for React
- **[Tailwind CSS v3.0.0-alpha.2](https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.0.0-alpha.2)** - a utility-first CSS framework for rapid UI development
- **[Vuestic UI v1.3.0](https://github.com/epicmaxco/vuestic-ui/releases/tag/v1.3.0)** - free and Open Source UI Library for Vue 3

***

## Wrapping things up

That's about all I have for this update. If you enjoyed this newsletter, there are a couple of ways to support it. You can share the [link to this issue](https://frontendnexus.com/news/043/) on social media, and follow me on [Twitter](https://twitter.com/frontendnexus). Each one of these helps me out, and I'd appreciate your consideration.

Have a great and productive week, keep yourselves safe, and I will see you again next time!
How To Remove Spaces Using JQuery
Tags: javascript, jquery, php, tutorial
Published: 2021-11-17 03:49:39

In this post i will explain you how to remove space using jquery, some times we have requirments to remove white space from textbox or many time users added unnecessary space in field which occupied more space in databese so here we will remove white spaces from string using jquery or javascript.

Here i will show you example to remove white space from textbox, in this example i have added one text box to add string and one submit button and you will get output in alertbox and jquery remove all whitespaces from string.

```
<html lang="en">
<head>
    <title>How to Remove Spaces using jQuery - techsolutionstuff.com</title>  
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>

<div>
  <h1>How to Remove Spaces using jQuery - techsolutionstuff.com</h1>
  <textarea class="content-text">
  	This is example   how to remove space using jquery.
  </textarea>
  <button>Remove Space</button>
</div>


<script type="text/javascript">
  $("button").click(function(){
  	  removeText = $(".content-text").val();
      var rm_space = removeText.replace(/ /g,'');
      alert(rm_space);
  });
</script>


</body>
</html>
```
 
---

You might also like :

**_[Read Also : How To Check Email Already Exist Or Not In Laravel](https://techsolutionstuff.com/post/how-to-check-email-already-exist-or-not-in-laravel)_**

**_[Read Also : Laravel 8 Google Recaptcha Example](https://www.techsolutionstuff.com/post/laravel-8-google-recaptcha-example)_**
One of my first proyect!
Published: 2021-11-17 01:22:19

https://jvstore.netlify.app/
This is a demonstration of an online store developed with React.js / Commerce.js / Stripe React is a Facebook Library based on the web language that is JavaScript Commerce.js is a platform that provides administration services for your store Through a control panel it is paid and a payment gateway such as Stripe, which are the most renowned in 2020 and are totally recent technologies, it only takes a little interface design and usability to have a totally store modern, functional to create a user experience that generates value for your clients or users in addition to being safe.
For security reasons, the final purchase section is disabled since it is not to work, it is like a real project, it is simply a demonstration although that part is also already developed. I will tell you at the end of your payment, it automatically sends you an email with which you registered with the purchase number and a description and prints a thank you screen.
To finish, feel free to browse it and see all its functionality. Click on it
Top 10+ Codeless Testing Tools in 2021 | Every Tester Should Know
Tags: opensource, testing, katalon, selenium
Published: 2021-11-17 03:49:04

"Coding — like any other craft — takes many years of practice to master. Having testers program a bunch of codes, fix errors in applications, and finish backlogs in weeks are challenging. According to the World Quality Report 2019–2020, lacking advanced programming expertise is chosen as one of the top challenges when applying test automation to agile projects. That’s where codeless automation testing tools came into place as a response to the challenge." 
Super useful article about codeless testing tools!! ==> https://briananderson2209.medium.com/top-10-codeless-testing-tools-in-2020-every-tester-should-know-2cb4bd119313
code every day with me
Tags: javascript, programming, 100daysofcode, algorithms
Published: 2021-11-17 02:30:36

##--DAY 22--
Hi, I am going to make #100DaysOfCode Challenge. Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**Now let's solve problem today:**
- Problem: Excel Sheet Column Title
- Detail: [here](https://leetcode.com/problems/excel-sheet-column-title/)
- Idea: it's pretty similar to convert number to binary
- My solution(javascript):
```javascript
var convertToTitle = function(n) {
    let column = 'ZABCDEFGHIJKLMNOPQRSTUVWXYZ';
    let result = '';
    while(n>26){
        let tmp = n%26;
        result += column.charAt(tmp);
        if(n%26==0) n = Math.floor(n/27);
        else n = Math.floor(n/26);
    }
    result += column.charAt(n);
    return result.split('').reverse().join('');
};
```
-->*If you have better solution or any question, please comment below. I will appreciate.*
Uyamak - Matlab's Simulink lite for web (and desktop)
Tags: beginners, simulation, mathematics
Published: 2021-11-17 02:24:01

Did you ever want to visualize mathematics?
Do you want to solve a differential equation numerically without coding?

You can perform those and many more with Uyamak.

![Visualizing Fourier series in Uyamak](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y6m4jt4eqgvuc9ekonth.png)
 

It is free to use. Try it.

If you like it, share it with your friends and family. If it is useful to a big audience, I will go for hardware integration.
Beginner friendly tutorial for a portfolio project with React - Loan Calculator
Tags: javascript, react, beginners, tutorial
Published: 2021-11-17 02:02:08

Hey comrades 🐻

I really hope you all doing well and stay safe in these difficult times.

Let me share with you my recent video (https://youtu.be/cPssveW-9M8) about #react.

You'd see this framework in action while I'm developing a complete, thought pretty basic, mortgage calculator.

[![IMAGE ALT TEXT HERE](http://img.youtube.com/vi/cPssveW-9M8/0.jpg)](http://www.youtube.com/watch?v=cPssveW-9M8)
Terminal Simulator
Tags: portfolio
Published: 2021-11-17 01:29:04

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f7f641vunhnzd7dii9gx.gif)
This is an attempt to build one of those 'terminal simulators' you see on so many portfolio pages these days. Initially I thought of just jumping into this with React but I decided to go with vanilla JS to really dig in and learn some stuff as I built the tool. One of the functions I built into the terminal needed me to traverse the DOM element by element so I wrote a recursive function to do that which was super satisfying. I still love React for what it does but this project helped me understand how to do a lot of that dynamic work myself.

I also built an email server (Node + Express with Nodemailer) to handle emails through the terminal. Go in there and type `contact <your email address> <the message you want to send me>` (the brackets are NOT needed!) Also, go in and type in `style change` for some light-hearted fun.

I used Gulp to automate a few things in my workflow, like compiling all the JS files into a bundle script and SCSS to CSS. That was actually super fun and I finally understand what Gulp is!

Check it out [here](https://cranky-leakey-5d250b.netlify.app/).
need help using ethers js
Published: 2021-11-17 01:01:03

I am about to send transaction via metamask to contract like this image.
I have to send ether, token and call function to create presale.
How can I do this using ethers js.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9pyi4jm3rsqemjnot3wk.png)