teleren/devto huggingface dataset:
CodePen Designs - 11 : Impossible Checkbox v2 🐻
Tags: codepen, css, codependesigns, design
Published: 2022-12-26 15:58:33

### We are excited to introduce our new series that will explore the best design ideas from the Codepen community. 

We will be publishing these each day and hope you find them insightful and inspiring as we showcase some of the most talented designers in this space.

---


#### Codepen Design - 11

<p>Revisiting one of my favorite pens to update the React side of it and add sound </p>

{% codepen https://codepen.io/jh3y/pen/LYNZwGm %}



---
## For more information

1. Check my GitHub profile
[https://github.com/amitSharma7741](https://github.com/amitSharma7741)

2. Check out my Fiver profile if you need any freelancing work
[https://www.fiverr.com/amit_sharma77](https://www.fiverr.com/amit_sharma77)

3. Check out my Instagram
[https://www.instagram.com/fromgoodthings/](https://www.instagram.com/fromgoodthings/)

4. Linktree
[https://linktr.ee/jonSnow77](https://linktr.ee/jonSnow77)

5. Check my project

- EVSTART: Electric Vehicle is the Future
[https://evstart.netlify.app/](https://evstart.netlify.app/)
-  News Website in react
 [https://newsmon.netlify.app/](https://newsmon.netlify.app/)
-  Hindi jokes API
 [https://hindi-jokes-api.onrender.com/](https://hindi-jokes-api.onrender.com/)


---
---
The Witcher Card Game Live
Tags: react, ts, typescript
Published: 2022-12-26 15:58:15

This year I decided to finish one of my projects. The Witcher card duplicate game. In this article, I will share my experience of how I managed to complete this project it.

It's been a long time since my previous article. After finding a job I had to learn a lot of new stuff and work on new and existing projects. Nothing with react or typescript, for this reason, I decided to take some time on holiday, read my code from previous progress, and continue the project. If You are interested in my previous article about the witcher game it is available here.

## Updates

- Updated styling, now it is responsive
- When all cards are opened alert() function will display "Victory" and after clicking game will start with shuffled and closed cards.
- Added new cards
- The deployed project is available here

## Possible Updates

The project can be upgraded by solving one problem and making some visual updates. The problem, when clicking on the card for the first time, the card is not visible for some seconds. Visual updates, Adding a point screen after every right card pair and making a nice victory screen.

## Managed to Finish

When I returned to this project I was expecting there is still much to do. I was wrong because to finish I needed to add just a few things. Update styling, add information for a user that the game is won, and restart the game. Also, the decision to finish something made an impact. For me, it is nice to see this project, not on the to-do list anymore. The code for this project is available here. If the project idea would not interesting it could be never finished, keep this in mind by choosing Your project idea.

## Conclusion

It is important to not forget about Your previous projects and the decision to build.
Moreover, holidays it is a great time not only for a rest but time to finish some of the old tasks.

I am available on social media: [Twitter](https://twitter.com/Oscar_Sherelis) [LinkedIn](https://www.linkedin.com/in/oscar-sherelis/) [Instagram](https://www.instagram.com/oscar_sherelis/)

Support me: https://www.buymeacoffee.com/oscarWeb

Merry Christmas and a happy New Year.
AI assistance produce less secure code than those who fly solo.
Published: 2022-12-26 15:50:53

---
title:AI assistance produce less secure code than those who fly solo.
published: true 
description: Computer scientists from Stanford University have found that programmers who accept help from AI produce less secure code than those who fly solo. Authors conclude that AI assistants should be viewed with caution because they can mislead inexperienced developers. An NYU study has shown that AI-based programming suggestions are often insecure in experiments.


#published_at: 2022-12-26 15:08 +0000
---

Computer scientists from Stanford University have found that programmers who accept help from AI tools like Github Copilot produce less secure code than those who fly solo. They also found that AI help tends to delude developers about the quality of their output. An NYU study has shown that AI-based programming suggestions are often insecure in experiments. The results of a Stanford study are inconclusive as to whether artificial intelligence (AI) assisted or harmed developers. Participants were asked to write code in response to five prompts using a React-based Electron app monitored by the study administrator.

The authors conclude that AI assistants should be viewed with caution because they can mislead inexperienced developers and create security vulnerabilities. At the same time, they hope their findings will lead to improvements in the way AI assistants are designed for use in the field of computer programming.
What is SWR and How Can It Improve Your React Apps?
Tags: javascript, react, nextjs, webdev
Published: 2022-12-26 15:27:49

If you're a developer working with React, you may have heard of a library called SWR (Stale-While-Revalidate). But what exactly is it and how can it benefit your React applications?

## What is SWR?
SWR is a lightweight library for handling data fetching in React. It was created by Vercel (formerly known as Zeit) and is designed to make it easy to get data into your React components.

One of the key features of SWR is its ability to "stale-while-revalidate." This means that it will first try to return cached data to the user while simultaneously re-fetching the data in the background. This allows for a seamless user experience, as the user is not left waiting for data to load.

Another benefit of SWR is its automatic cache invalidation. This means that it will automatically update the cache with the latest data when it becomes available, ensuring that your users always have access to the most up-to-date information.

## How to Use SWR in Your React Apps

Using SWR in your React apps is straightforward. First, you'll need to install it:

```bash
npm install swr
```
Then, you can use the <code>useSWR</code> hook to get the data you need in your components:

```javascript
import useSWR from 'swr';

function MyComponent() {
  const { data, error } = useSWR('/api/my-endpoint');

  if (error) return <div>Failed to load data</div>;
  if (!data) return <div>Loading...</div>;

  return <div>{data.name}</div>;
}
```

That's it! With just a few lines of code, you can easily get the data you need in your React components with the help of SWR.

## Conclusion
In summary, SWR is a useful library for handling data fetching in your React applications. Its ability to stale-while-revalidate and automatically invalidate the cache makes it easy to get the data you need in a seamless and efficient way. Give it a try in your next React project and see how it can improve your workflow.
55. Leetcode Solution in Java
Tags: java
Published: 2022-12-26 15:20:46

```java
class Solution {
  public boolean canJump(int[] nums) {
    int i = 0;

    for (int reach = 0; i < nums.length && i <= reach; ++i)
      reach = Math.max(reach, i + nums[i]);

    return i == nums.length;
  }
}

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/jump-game/
Reading files with Node.js
Tags: beginners, node, programming, tutorial
Published: 2022-12-26 15:13:16

As we know, reading the content of a file is one of the most common and important tasks of programming. Let's take a look at how we can read files in node.js.

**Using readFile():**

readFile takes three parameters, and they are:

**path:** Filepath of the file to read
**encoding:** It is an optional parameter; possible values are ascii, utf8,and base64.
**callback:** It is passed with two arguments: error and data,error contains the error message, and data contains the data coming from the file.
readFile is asynchronous in nature; therefore, it will not interrupt the execution of the program.

```js
//importing file system module 
const fs=require('fs')
const path='./myFiles/read.txt'
fs.readFile(path,'utf8',(err,data)=>{
    if(err)return console.log("error occured while reading data");
    console.log(data);
})
```
output in the console is as shown below

```
Hello from read.txt
```
without 'utf8' encoding then output will be raw buffer data

```
<Buffer 48 65 6c 6c 6f 20 66 72 6f 6d 20 72 65 61 64 2e 74 78 74>
```

**using readFileSync():**

 readFileSync takes two parameters, and they are:

**path:** Filepath of the file to read
**encoding:** It is an optional parameter; possible values are ascii, utf8,and base64.

readFileSync is synchronous in nature, which means the rest of the code execution will be stopped until the file is read completely.

```js
//importing file system module
const fs = require("fs");
const path = "./myFiles/read.txt";
try {
  const data = fs.readFileSync(path, 'utf8');
  console.log(data);
} catch (err) {
  console.error(err);
}
```
output in the console is as shown below

```
Hello from read.txt
```

**Using promise-based readFile():**

 Promise-based readFile takes two parameters, and they are:

**path:** Filepath of the file to read
**encoding:** It is an optional parameter; possible values are ascii, utf8,and base64.

since it is promise-based we can use async-await.

```js
//importing promise-based file system module
const fsPromise = require("fs").promises;
const path = "./myFiles/read.txt";

const fileRead = async () => {
  try {
    const data = await fsPromise.readFile(path, "utf8");
    console.log(data);
  } catch (err) {
    console.error(err);
  }
};

fileRead();
```

output in the console is as shown below

```
Hello from read.txt
```
What are your goals for the week of December 26?
Tags: watercooler, discuss
Published: 2022-12-26 15:05:00

What are your goals for this week? 

 
- What are you building? 
- What will be a good result by week's end?
- Did you meet your goals last week?
- Anything planned for the new year?

**Last Week's Goals**


- [:white_check_mark:] Continue Job search. Did some applications, but mostly networked on LinkedIN. 
- [:white_check_mark:] CSS ugly sweater art. Working on one. 
- [:white_check_mark:] Write blog posts. 
- [:x:] Support VC members with our Monthly Challenge. Did not check in as much as I wanted to. 
- [:x:]Solve advent of CSS and Advent of JS challenges. 


**This Week's Goals**
 
Enjoy the holidays, see family. 
 
```
-$JarvisScript git push
```
Technical recruiters' common mistakes, as perceived by job seekers
Tags: career, webdev, software, programming
Published: 2022-12-26 14:41:47

📣 Hey everyone! I'm excited to share my latest article with you: 

"Common Mistakes Made by Technical Recruiters from a Job Seeker's Perspective." 

🤓 In this piece, I share my own experiences and highlight some common mistakes that technical recruiters make, such as "Not properly negotiating salary and benefits on your behalf" 🤔 I also offer tips and strategies for avoiding these pitfalls and maximizing your chances of success -whether as a recruiter or as a job seeker- in the technical job market. 🚀 

Here's a quote from the article:
"𝘕𝘦𝘨𝘰𝘵𝘪𝘢𝘵𝘪𝘯𝘨 𝘴𝘢𝘭𝘢𝘳𝘺 𝘢𝘯𝘥 𝘣𝘦𝘯𝘦𝘧𝘪𝘵𝘴 𝘤𝘢𝘯 𝘣𝘦 𝘢 𝘤𝘩𝘢𝘭𝘭𝘦𝘯𝘨𝘪𝘯𝘨 𝘢𝘯𝘥 𝘴𝘵𝘳𝘦𝘴𝘴𝘧𝘶𝘭 𝘱𝘳𝘰𝘤𝘦𝘴𝘴 𝘧𝘰𝘳 𝘮𝘢𝘯𝘺 𝘫𝘰𝘣 𝘴𝘦𝘦𝘬𝘦𝘳𝘴, 𝘦𝘴𝘱𝘦𝘤𝘪𝘢𝘭𝘭𝘺 𝘪𝘧 𝘵𝘩𝘦𝘺 𝘢𝘳𝘦 𝘪𝘯𝘦𝘹𝘱𝘦𝘳𝘪𝘦𝘯𝘤𝘦𝘥 𝘰𝘳 𝘭𝘢𝘤𝘬 𝘤𝘰𝘯𝘧𝘪𝘥𝘦𝘯𝘤𝘦 𝘪𝘯 𝘵𝘩𝘦𝘪𝘳 𝘯𝘦𝘨𝘰𝘵𝘪𝘢𝘵𝘪𝘰𝘯 𝘴𝘬𝘪𝘭𝘭𝘴. 𝘛𝘩𝘪𝘴 𝘪𝘴 𝘸𝘩𝘦𝘳𝘦 ..."

Please give the article a read and let me know what you think! And if you like it, please consider liking, sharing, and following for more great content like this. 😊

Here's the link to the article: https://www.azaytek.com/common-mistakes-made-by-technical-recruiters-from-a-job-seekers-perspective/ 🔍

Thanks for your support, and I hope you enjoy the article! 🙏
Make 50$/hr without any experience
Tags: webdev, tutorial, beginners, opensource
Published: 2022-12-26 14:41:00

## **Become a Transcriptionist**

Transcribing is converting the audio or video file audio to text form.

Most writers hire transcribers to write text forms of audio(Podcasts) or video.

Now, let's look into some of the websites

**1.GoTranscript**

It’s a legit website that gives work to everyone whose able to transcribe video or audio.

Rates per minute are _$0.60_.

To get started you need to fill out a form on their website for free.


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

**2.Rev.com**

Earn upto $1500 per month with this website.

Rates per minute audio is _$1.10_ and it depends.

Visit their website and fill the registration form to get started.


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

**3.Quicktate.com**

You’ll receive a handsome amount of money on your papal and the work is not like the other websites.

It will give you voice memos, speeches, and phone call audio to transcribe.


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

**4.TranscribeMe.com**

It is one of the first websites when someone searches for transcribing jobs.

No experience is required here. And the only thing that is required from you is a tight grasp on listening and typing exactly what you have listened to.


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

**5.SpeechPad.com**

For beginners and as well as experience adults you can earn here a good sum of money by transcribing what you hear.

The rate per minute is $1.20.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpsxkfye5jfi6oquxep9.png)

What are you waiting for. Get your journey started.

Thanks for reading till the end❤️
Subscribe and follow for more such content!
What is ref in mongoose.js
Tags: mongodb, mongoose, database, nosql
Published: 2022-12-26 14:40:46

In Mongoose, a '**ref**' is a property of a schema type that specifies the MongoDB collection in which the referenced documents live. It is used to create a "relationship" between two or more collections in a **MongoDB** database.

For example, suppose you have two collections in your MongoDB database: "users" and "posts". If you want to associate each "post" document with the "user" who wrote it, you can do so by using the '**ref**' property in your Mongoose schema.

Here is an example of how you might use the '**ref**' property in a Mongoose schema to create a relationship between the "users" and "posts" collections:

```
const userSchema = new mongoose.Schema({
  name: String,
  email: String
});

const postSchema = new mongoose.Schema({
  title: String,
  body: String,
  author: {
    type: mongoose.Schema.Types.ObjectId,
    ref: 'User'
  }
});
```

In this example, the '**author**' field of the "post" schema is an '**ObjectId**' that references a document in the "users" collection. The '**ref**' property specifies that the '**author**' field is a reference to a document in the "users" collection.

You can then use the '**populate()**' method to populate the '**author**' field with the actual user document, like this:

```
Post.find().populate('author').exec((err, posts) => {
  // `posts` is an array of post documents with the associated user documents
  // embedded in the `author` field
});
```

I hope this helps! Let me know if you have any questions.
What is IAM?
Tags: beginners, cloud, aws, devjournal
Published: 2022-12-26 12:42:57

**Amazon Identity and Access Management (IAM**) is a web service that helps you securely control access to AWS resources. With IAM, you can create and manage AWS users and groups, and use permissions to allow and deny their access to AWS resources.

IAM is an important part of the AWS security infrastructure, as it provides the ability to manage access to AWS resources, allowing you to control which users and resources can access your AWS account. IAM also enables you to set up permissions, which can be used to allow or deny access to specific AWS resources or actions. For example, you might want to allow a group of users to access Amazon S3 to store and retrieve data, while preventing them from launching Amazon EC2 instances.

IAM is a free service that is automatically enabled when you create an AWS account. You can use IAM to create and manage AWS users and groups, as well as to set and enforce access policies. IAM is an important part of the AWS security infrastructure, and it is essential for anyone using AWS to understand how it works and how to use it effectively.

**What are the policies in IAM in AWS?**
In Amazon Web Services (AWS), an IAM policy is a set of permissions that specifies what actions can be performed on which AWS resources. IAM policies are written in JSON, and they define what actions are allowed or denied on which resources.

Policies are an important part of the AWS Identity and Access Management (IAM) service. They provide a way to grant or revoke permissions for AWS resources and services. IAM policies can be attached to IAM users, groups, and roles, and they determine what actions the users, groups, and roles can take on the AWS resources and services.

**There are two types of IAM policies:**

Managed policies: Managed policies are policies that are created and managed by AWS. These policies are pre-defined and cover a wide range of use cases, such as granting permissions to access specific AWS services or granting permissions to perform specific actions on certain resources.

Inline policies: Inline policies are policies that are created and managed by the user. They are embedded directly in the IAM user, group, or role to which they are attached, and they can be used to grant or revoke specific permissions.

In summary, an IAM policy is a set of permissions that defines what actions can be performed on AWS resources. It is an important concept to understand when working with AWS and IAM.
iOS Application Lifecycle
Published: 2022-12-26 11:03:19

**Why do we need to know**
Firstly, we should respond properly to the launch of the app. Some third-party libraries need set up in different states of the app. Also, we should prepare the app to work in the foreground. We might need to provide a different user experience. For instance, our app can require a password whenever it goes to the foreground. On the other hand, our app can upload images while the app is in the background like Dropbox does. Even we might want to reopen from where the user left after the termination of the app. So, each feature requires different implementations in different app states. So, it can be critical to know the states and the transitions while providing a different and better user experience.

**Application lifecycle**


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

**Not Running:** 
The app is not launched or terminated by the system.

**Background:** 
App is in the background and still able to run code. But the duration of this state is determined by the OS and code execution can be interrupted at any time. If the developer requests extra time to execute some code, the period can be longer. There are some situations in which the app can be launched directly into the background mode. For example, the app can start in background mode if the app starts downloading some content when the remote push notification is received.

**Foreground**
**Inactive:** 
It’s generally a transition state between active and background state to launch of the app. For example, if we receive a phone call when the app is in the foreground, it goes into an inactive state.

**Active:**
 The app is in the active state when it is in the foreground and it’s able to receive events.

**Suspended:**
 When the app is in the background state, the system suspends it and the app cannot execute any code. There isn’t any notification for the suspending event. The system automatically suspends the app.
HTML input[type=file] accept types
Published: 2022-12-26 13:52:43

**For CSV files (.csv), use:**
`<input type="file" accept=".csv" />`

**For Excel Files 97-2003 (.xls), use:**
`<input type="file" accept="application/vnd.ms-excel" />`

**For Excel Files 2007+ (.xlsx), use:**
`<input type="file" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />`

**For Text Files (.txt) use:**
`<input type="file" accept="text/plain" />`

**For Image Files (.png/.jpg/etc), use:**
`<input type="file" accept="image/*" />`

**For HTML Files (.htm,.html), use:**
`<input type="file" accept="text/html" />`

**For Video Files (.avi, .mpg, .mpeg, .mp4), use:**
`<input type="file" accept="video/*" />`

**For Audio Files (.mp3, .wav, etc), use:**
`<input type="file" accept="audio/*" />`

**For PDF Files, use:**
`<input type="file" accept=".pdf" />`
JavaScript tricks 🤯 that every developer should know
Tags: javascript, beginners, programming, tutorial
Published: 2022-12-26 13:30:57

1. Using the `spread` operator to copy arrays and objects. 
2. Using `Array.map()` to transform elements in an array.
3. Using `Array.filter()` to select elements from an array.
4. Using `Array.reduce()` to perform a reduction on an array.
5. Using template literals to create multi-line strings and interpolate variables.
6. Using destructuring assignment to extract values from arrays and objects.
7. Using the` for...of` loop to iterate over iterable objects like arrays and strings.
8. Using the `Object.entries()` method to get an array of an object's key-value pairs.
9. Using the `Object.assign()` method to merge objects.
10. Using the `async/await` syntax to make asynchronous code easier to read and write.
TonyEdit
Tags: html, javascript, css, python
Published: 2022-12-26 13:12:02

<kbd><img src="https://cdn.jsdelivr.net/gh/abtp2/tonyedit/img/index-banner.png"></kbd>

TonyEdit, a online editor where you can code html, css, javascript and python.
Wanna try ?
##### https://tonyedit.netlify.app
<br>
<p>&nbsp;</p>


>**Features of TonyEdit**
---

* Real time code compiler.
* In-built emulator for websites.
* Code will always saved even if you closed the tab.
* In-built color picker.
* Import and export is available.
* Voice controlling is available.     



>**Voice Controlling**
`Say: "Open/close color picker"`
`Say: "Open/close text finder"`
`Say: "Open/close menu"`
`Say: "Save code"`
`Say: "Run code"`


>**HTML Editor**
<kbd><img src="https://cdn.jsdelivr.net/gh/abtp2/tonyedit/img/index-banner-html.png"></kbd><p></p>

>**Python Editor**
<kbd><img src="https://cdn.jsdelivr.net/gh/abtp2/tonyedit/img/index-banner-py.png"></kbd><p></p>
How to Make Most Beautiful eCommerce Website
Tags: css, javascript, beginners, tutorial
Published: 2022-12-26 13:02:50

{% youtube dZV-y3GzBlg %}

How to Make Most Beautiful eCommerce Website for Free. Can't decide how to build your E-commerce website ? Don't worry, you are at the right place. Here I'm going to show you how to make beautiful and attractive responsive ecommerce site using html css and javascript.
If you find this video useful , Please Like , Share and Subscribe. Thanks for watching this video..

[Source code](https://www.patreon.com/posts/shoppie-website-76382973?utm_medium=clipboard_copy&utm_source=copyLink&utm_campaign=postshare_creator&utm_content=join_link)


⏱️ Timestamps
-----------------------------
0:00 - Demo
3:50 - File structure
4:50 - Project initial
12:14 - Header
22:51 - Hero section
33:40 - Product section
44:17 - Feature section
52:13 - Offer section
56:15 - Footer
1:13:10 - Media queries