teleren/devto huggingface dataset:
Best way to learn Java in easy way
Tags: java, webdev, beginners
Published: 2022-05-27 07:24:31

##what should I know before learning Java
Well, it doesn’t really matter at all , if you’re interested enough you can directly give it a start with java . However having a prior knowledge of basic OOP’s concepts and a little programming experience(or basic programming concepts) would help you to understand it better and make it easier . Though not mandatory , but to have a strong grip over the concepts before switching to java you can go with C/ C++ ( suggesting as I started with C++ and it has helped me a lot to understand java better)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n8p6j6e7rikz4o09z2ur.png)
I am also a java learner but i would like to answer your question. Here all important tips are already given but i want to add only one more point which is much important. 
If you are a beginner, please don't use any kind of IDE.
 IDE is specially made for those who already a pretty decent experienced in programming. 
It is helpful for them who are in a very big project development. I would recommend to use notepad and command prompt as a beginner. 
As using this you have nothing to help you except the internet articles. 
So you can rectify your error yourself. In this way you have gain also a decent experience while learning. 
This learning method is slow but very effective. 
Although you have to use IDE in your future but you will have a good ability to rectify your mistakes. 
You can gain a good idea of what type error comes for what kind of mistakes.
###Conclusion
####I hope you found this article useful, if you need any help please let me know in the comment section.💯
Npx create-react-app gives an error on VS Code or Git Command?
Published: 2022-05-27 07:16:11

How do i fix this issue when im trying to create a react app, i use this command and already have nodeJs been installed and its version 6.

" npx create-react react-feeds-example
npm ERR! could not determine executable to run

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\De Legend 'Respect'\AppData\Local\npm-cache\_logs\2022-05-27T06_58_08_765Z-debug-0.log"
5 VSCode Extensions You Must Use
Tags: beginners, webdev, javascript, vscode
Published: 2022-05-27 07:13:55

Here are the 5 most useful Visual Studio Code extensions to improve your workflow!

- [Error Lens](#1-error-lens)
- [CSS Peek](#2-css-peek)
- [GitLens](#3-gitlens)
- [Import Cost](#4-import-cost)
- [Version Lens](#5-version-lens)

## 1. Error Lens


[Error Lens](https://marketplace.visualstudio.com/items?itemName=usernamehw.errorlens) is an extension which allows you to see error, warning and diagnostic messages in line with your code without having to hover or click on anything! It also highlights the line with different colors to help you better visualize and differentiate between errors, warnings and other messages!

![errorlens_demo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lcsqe8glunjdoku947eo.jpg)

---

## 2. CSS Peek


With this [extension](https://marketplace.visualstudio.com/items?itemName=pranaygp.vscode-css-peek), you can search for relevant CSS files by using CSS classes in html file and edit CSS files there itself! Here's how it works:



![CSS Peek working](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/koc0rmfuygcnmk5g97p4.gif)

---

## 3. GitLens


[GitLens](https://marketplace.visualstudio.com/items?itemName=eamodio.gitlens) is a powerful extension which can display when a particular line was committed, by whom it was committed and in which pull request it was included along with the commit message! All of this information is inline with the line upon which your cursor is currently located.

You can also hover over the message to get even more information about a particular line of code!


![gitlens inline message](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t3wnw8ktjwqc5kbmnugs.jpg)


![gitlens hover](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0fr0q3fk1fpzi9h5ez2s.jpg)

There are many more features in GitLens which you can explore and play around with!

---

## 4. Import Cost

[Import Cost](https://marketplace.visualstudio.com/items?itemName=wix.vscode-import-cost) allows us to see the size of the imported package inline in the editor itself!


![import cost](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mn2wrul3oykol7nf7fcw.jpg)

---

## 5. Version Lens

[Version Lens](https://marketplace.visualstudio.com/items?itemName=pflannery.vscode-versionlens) fetches information about dependency versions and displays it on top of the dependency! You can also change to the latest version just by clicking on the `latest` label!


![Version Lens](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rr00wz0j8fm0j0wyfqco.jpg)

---

These were the 5 VSCode extensions which are powerful, useful and can improve your productivity and workflow!

Signing off.

---

I started a blog, [Syntackle](https://syntackle.live)

[Twitter](https://twitter.com/murtuza_surti) | [GitHub](https://github.com/murtuzaalisurti) | [LinkedIn](https://linkedin.com/in/murtuzaali-surti)
How to create a JSON server from your Prisma schema?
Published: 2022-05-27 06:23:24

The library called `json-server` allows you to quickly run a REST API server from just a small JSON file. Which can be really useful when your building something new or trying out a frontend project.

You can make this JSON file by hand of course. But it would get tedious when your schema grows with time.

So, how can we automate the generation of this JSON file?

Here's what you need to do:

1- Install the generator 

- Using npm 

```bash
 npm install prisma-json-server-generator
```

- Using yarn:

```bash
 yarn add prisma-json-server-generator
```

2-  Add the generator to your Prisma schema

```prisma
generator json_server {
  provider       = "prisma-json-server-generator"
  outputFileName = "db.json"
}
```

3- Run `npx prisma generate` for your schema(or the example below)

```prisma
model User {
  id    Int     @id @default(autoincrement())
  email String  @unique
  name  String?
  posts Post[]
}

model Post {
  id        Int      @id @default(autoincrement())
  createdAt DateTime @default(now())
  updatedAt DateTime @updatedAt
  title     String
  content   String?
  published Boolean  @default(false)
  viewCount Int      @default(0)
  author    User?    @relation(fields: [authorId], references: [id])
  authorId  Int?
}
```

Will generate the `db.json` file.

4- Install `json-server`

```bash
npm install -g json-server
```

5- Now run your server!

```bash
json-server db.json
```

You will see something like this:

![json server running](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7asbif8o31ifztvlhm1k.png)
I created rattle telegram community🐍 🌎
Tags: webdev, programming, discuss, productivity
Published: 2022-05-27 05:48:54

Hello people!I created rattlefoundation's telegram community.If you join this community then you are in our team.You can join this community for free.Let's make softwares together.Its secure

Join link-https://t.me/+V8V1JqAVmeg1MTk1
A11Y 101: Missing form labels
Tags: a11y, beginners, webdev
Published: 2022-05-27 05:27:36

When working with forms, we should always opt to have form labels describing the label.

However, many designers want to hide these labels in modern-day applications as they make things bulky.

Some good examples of forms without labels can be:

- A search field

![Google search field without label](https://cdn.hashnode.com/res/hashnode/image/upload/v1652763775573/1TTWKw5Jo.png)

- A subscribe form that is clear enough

![Subscribe form on daily-dev-tips.com](https://cdn.hashnode.com/res/hashnode/image/upload/v1652763645074/EvGS5zHIE.png)

The common thing we see in both examples is a form with only one field and a button.
Often, it can be clear enough as to what the form is for and what is expected of the user.

I use a placeholder to describe it for the visual reader in my example. However, it might be unclear what this form is for visually impaired people.

To make this form accessible, we should use invisible labels to describe the field. There are three options we can use.

## Hidden label element

This is the most semantic way of adding the label to describe the form field.

We set it up as we would add a regular label for a form field but use CSS to hide it from the browser.
Screen readers will still be able to read it this way.

```html
<label class="hidden" for="search">Search</label>
<input type="text" id="search" />
```

To make elements hidden for screen readers, we have to use specific CSS; I'll write a bit more in detail in the following article as there are multiple options again.

## Title attribute

Another way of making the screen readers aware of what an input field is for is to add a title attribute to the input field.

However, this comes with the drawback of it showing this title attribute to visual users.

It's up to you if that's acceptable for your use case.

```html
<input id="search" type="text" title="Search" />
```

## Aria-label attribute

The last method is to use `aria-label`. It works the same as the title method but doesn't show up for visual users.

This is the safest way of adding descriptive text without messing with hidden styles.

```html
<input id="search" type="text" aria-label="Search" />
```

## Conclusion

There are three ways of making form fields without labels accessible, all three have their use-cases, and it's up to the developer to decide which one works best.

I like the aria-label approach as it's least intrusive in adding elements nobody will see, but the hidden label is just as good.
I would advise only resort to the title if you have no other choice.

> Note: You should only use one of the three methods, don't combine them as screen readers will read your information twice.

### Thank you for reading, and let's connect!

Thank you for reading my blog. Feel free to subscribe to my email newsletter and connect on [Facebook](https://www.facebook.com/DailyDevTipsBlog) or [Twitter](https://twitter.com/DailyDevTips1)
Array to BST (Proper Comments)
Published: 2022-05-27 05:19:26

```
// { Driver Code Starts
#include<bits/stdc++.h>
using namespace std;

 // } Driver Code Ends
class Solution {
public:
//create a helper function
//create a extra vector ds to store the elements
void vectorutility(vector<int>&arr,int low,int high,vector<int>&ds){
    int mid;
//Nothing but to do binary search
    if(low<=high){
        mid = low + (high-low)/2;
        ds.push_back(arr[mid]);
        vectorutility(arr,low,mid-1,ds);
        vectorutility(arr,mid+1,high,ds);
    }
}
//Create main array to bst convertion function
    vector<int> sortedArrayToBST(vector<int>& nums) {
        // Code here
        
        vector<int>ds;
        vectorutility(nums,0,nums.size()-1,ds);//Utility function that previuosly declared
        return ds;
    }
};

// { Driver Code Starts.
int main(){
	int tc;
	cin >> tc;
	while(tc--){
		int n;
		cin >> n;
		vector<int>nums(n);
		for(int i = 0; i < n; i++)cin >> nums[i];
		Solution obj;
		vector<int>ans = obj.sortedArrayToBST(nums);
		for(auto i: ans)
			cout << i <<" ";
		cout << "\n";
	}
	return 0;
}  // } Driver Code Ends

```
Hit a 👍 for more such solutions.
Showcase: Zen Mode 2.0 - Hide Everything. Mute Everything.
Tags: productivity, showdev, macos, frontend
Published: 2022-05-27 05:13:28

After collecting feedback for v1.0

I am launching Zen Mode 2.0

What is it?

- Have you ever been in an awkward situation when you needed to quickly hide all of your desktop icons or windows during a meeting?
- Have you ever been in a position where you thought you were on silent at a meeting but were not?

Do you want to avoid those problems in the future? If so, then you are in the right place. 👇

**With a one click away, you can "clutter free your Mac" by focusing on the task at hand.**

> _Here's a [35-second video](https://youtu.be/V7cYgfAGe78) showing how it works._

**You can download the app here https://zenmode.carrd.co/**
Difference between Mixin and Placeholder in SASS
Tags: sass, scss, mixin, placeholder
Published: 2022-05-27 04:42:47

In SASS, Mixin and Placeholder are really similar. They can hold combination of css properties and can be reused in many places, just like variables to help reduce our codes. However, they actually work differently behind the scene.

- _Mixin_ - It **copies the mixin** to the place where it is used.

- _Placeholder_ - It **copies the selectors that use the placeholder** to the place where the placeholder declared. 


Let's see the following example: 
We declared a mixin **bananaColor**, and a placeholder **coffeeBackground**.

They are used by the following classes:
**.paragraph1** uses **bananaColor**.
**.paragraph2** uses **bananaColor** and **coffeeBackground**.
**.paragraph3** uses **coffeeBackground**.

SASS file:
```sass
@mixin bananaColor {
  color: #f5c725;
  font-weight: 600;
}

%coffeeBackground {
  background-color: #b46427;
  padding: 10px;
}

.paragraph1 {
  font-size: 20px;
  height: 100px;
  
  @include bananaColor;
}

.paragraph2 {
  font-size: 20px;
  height: 100px;

  @include bananaColor;
  @extend %coffeeBackground
}

.paragraph3 {
  font-size: 20px;
  height: 100px;

  @extend %coffeeBackground
}
```
Html File: 
```html
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="css/style.css">
    </head>
    <body>
        <div>
            <p class="paragraph1">paragraph 1</p>
            <p class="paragraph2">paragraph 2</p>
            <p class="paragraph3">paragraph 3</p>
        </div>
    </body>
</html>
```

The result is like:
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/avadjvplirdx0efvfeh1.png)






Let's compare how SASS compiles the code.


For Mixin, it copies the declared mixin properties to places where it is used. 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ylmu84scruhm26mlqtbz.png)


For placeholders, it copies the selectors(**.paragraph2, .paragraph3**) to the placeholder where it is declared.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/y5esdrb9tee3aw5h1d3m.png)


In conclusion, we can see Mixin and Placeholder are literally doing things reversely. 

The logic of Mixin could be more intuitive and understandable than Placeholer. However, it may result in larger CSS code because it just copies the declared Mixin to everywhere, while Placeholder only copies the selectors.

Apart from that, Mixin can work like a function. We can also pass parameters into a Mixin, while we cannot use parameters on Placeholder. 

Mixin and Placeholder can really help us organize and reduce our SASS code. We can choose to use either Mixin or Placeholder depending on our actual scenarios.
The following Gaming industries are reinventing games with AWS.
Tags: aws, gamedev, architecture
Published: 2022-05-27 04:16:42

Customer Success Stories
Increase agility, lower costs, and accelerate innovation using AWS. 

Customer stories are most effective for prospects in the consideration and decision stages of the buyer’s journey.

The following Gaming industries are reinventing games with AWS.
Explore their various case studies to learn more about their journeys and how AWS services has helped them to accelerate great outcomes.



Epic Games https://aws.amazon.com/solutions/case-studies/innovators/epic-games/

Warner Bros https://aws.amazon.com/solutions/case-studies/wb-games/

Sony Interactive Entertainment https://aws.amazon.com/solutions/case-studies/sony-2020-reinvent-video/

Gearbox Software  https://aws.amazon.com/solutions/case-studies/gearbox-software-borderlands-3/

Rovio  https://aws.amazon.com/solutions/case-studies/rovio-machine-learning/

Capcom  https://aws.amazon.com/solutions/case-studies/capcom/

Gameloft  https://aws.amazon.com/solutions/case-studies/gameloft-lego-legacy-heroes-unboxed/


Visit https://aws.amazon.com/gametech/ to get started today!
Just a quickie.
Tags: bash, aliases, python, venv
Published: 2022-05-27 03:49:21

Here are the aliases that I use for python virtual environments. 

```bash
# aliases for venv (python-venv)
alias create-venv='python3 -m venv /home/${USER}/.config/venv/${PWD##*/}'
alias remove-venv='rm -rf /home/${USER}/.config/venv/${PWD##*/}'
alias activate-venv='source /home/${USER}/.config/venv/${PWD##*/}/bin/activate'
```

These aliases create a virtualenv in /home/username/.config/venv/directoryname

```bash
${PWD##*/}
```
Gets only the directory name your currently in, not the full path. 

I.E. the full path '/home/username/code/python/app_name' ${PWD##*/} returns only app_name
Resizing of Roles in IT
Tags: it, web, develop
Published: 2022-05-27 03:41:04

In the world of computer technology we see how developers and other computer professionals strive every day to achieve their roadmap. This long career implies a series of knowledge, resources, as well as the management of a series of skills and abilities required for a certain and specific role.

However, every day what is known as “Role Oversizing” is also observed, that is, a tendency to cover more elements in a specific field than should normally occur.

Such is the case of Frontend Developers who intend to take them to the level of Backend or Fullstack Developers or web designers whose role is strictly that of design and who do not have to know anything about web pages.

It is worrying when in the case of Junior Developers they try to impose technologies that correspond to Senior Developers but the pay continues as developers who are just starting out in programming.

Although this situation suits many companies that seek to demand more and pay less, it is a situation that threatens quality and service, which must correspond to a clear separation of roles and responsibilities and is necessary to delimit each area in IT development.
Tricks to Debug JavaScript Faster
Tags: javascript, webdev
Published: 2022-05-27 03:38:02

If you’re a developer, you might find yourself tired after writing the same _console.log()_ syntax to check your current variable value. Here are some ways to log your values faster.

## Create Log Function
You can create this function on top of your JavaScript file, or create it in separate file if you want to use it in multiple files. This function pretty simple, it look like this.

```
function log(...params){
    console.log(...params)
}
```

Notice that we use spread operator both in the function parameter and `console.log` statement because we want to iterate all the item passed to the parameter, and print it to the _console.log_ statement.

Somewhere below in your JavaScript file you can use this function like regular _console.log_ statement.

```
let yourVariable = 'Print me!';
log(yourVariable)
```

or something like,

```
log('this is the data: ', yourVariable)
```

## Create a snippet
If you’re using vscode as code editor, you can click a gear setting in left bottom, and choose user snippets. You can choose existing snippet or create a new one. You can write the snippet like below.

```
"log": {
   "prefix": "getlog",
   "body": "console.log()"
}
```

The log _key_ is just the name of the snippet, but the _prefix_ value is the word that you will type in the editor to get the body value. So if I type _getlog_ in my vscode, a console.log suggestion will appear as I type.

That’s it! Thank you for reading, see ya!🍻
Upwork Skill Certification!
Tags: upwork, skill, certification
Published: 2022-05-27 03:36:03

### Upwork Skills Certification
Is provided by Upwork in cooperation with Codesignal , OK let us first know, why You need this certificate on your Profile on Upwork.
It helps your client to be sure you are qualified for Project.

But, now I think it's only to show you are qualified to play the game.

---


### What Happen to saying That’s?
OK, I got an email to join this program and they ask me to select which certificate I want to archive, 
After that’s, I'm selected JavaScript Back-end, Of course, it's easy for me to do it, but after two days I got an invite to start my Test when I join and start the quiz I surprised.

Oh, this is a Puzzle question and I solved it in 10 minutes, Next, also a Puzzle question, to be honest, I skipped it because I selected the backend Test not play the game.

The third is something similar to what we are doing on the back-end with the` Loadsh` library but also a Puzzle it's something you need to split  string and use index array to achieve a result BTW the last question is also a puzzle for that’s what am I saying to myself, what I'm doing? 

---

### My Opinion 
Don't believe in skill certification on Upwork because it's not meaning you are qualified for projects it's only for playing puzzles on Codeware or Codesignal.

---

### How I will be ready for the Test.
Join any website like CodeWre or CodeSignal and start playing to Test Days you will Pass with 100% .

Good Luck to all.
**Some of the things you need to learn before getting started on Node**
Tags: javascript, programming, react
Published: 2022-05-27 03:30:58

**Some of the things you need to learn before getting started on Node**
There has been a lot of support and love shown out here when it comes to Node. It's quite powerful and very fast. It has a growing community and contribution. There especially node-module that has so many packages offered  for free .Let's not forget how easy it is especially to developers with Es6 skills.  React and Node are basically JavaScript. if you know this nuggets then you should have no trouble learning and working with them.
I will attach videos related to each nugget. 
**map () method**
Probably the most used array method and very useful. Helps especially when it comes to destructuring.
to understand the method fully go to:
https://www.youtube.com/watch?v=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
Interested in all nuggets? 
https://www.youtube.com/watchv=80KX6aD9R7M&list=PLnHJACx3NwAfRUcuKaYhZ6T5NRIpzgNGJ
The above link has all nuggets you need to know and are quite easy and well explained.
Was this helpful?
Ethernaut系列-Level 15(NaughtCoin)
Published: 2022-05-27 03:10:07

## LEVEL 15 （NaughtCoin）:
```solidity
// SPDX-License-Identifier: MIT
pragma solidity ^0.6.0;

import '@openzeppelin/contracts/token/ERC20/ERC20.sol';

 contract NaughtCoin is ERC20 {

  // string public constant name = 'NaughtCoin';
  // string public constant symbol = '0x0';
  // uint public constant decimals = 18;
  uint public timeLock = now + 10 * 365 days;
  uint256 public INITIAL_SUPPLY;
  address public player;

  constructor(address _player) 
  ERC20('NaughtCoin', '0x0')
  public {
    player = _player;
    INITIAL_SUPPLY = 1000000 * (10**uint256(decimals()));
    // _totalSupply = INITIAL_SUPPLY;
    // _balances[player] = INITIAL_SUPPLY;
    _mint(player, INITIAL_SUPPLY);
    emit Transfer(address(0), player, INITIAL_SUPPLY);
  }
  
  function transfer(address _to, uint256 _value) override public lockTokens returns(bool) {
    super.transfer(_to, _value);
  }

  // Prevent the initial owner from transferring tokens until the timelock has passed
  modifier lockTokens() {
    if (msg.sender == player) {
      require(now > timeLock);
      _;
    } else {
     _;
    }
  } 
}
```
## 通关要求
  player的token余额=0

##要点
  理解ERC20标准

##解题思路
ERC20除了直接transfer还可以通过approve/transferFrom进行转token
```javascript
  it("attacks", async function () {
    let playerBalance = await levelContract.balanceOf(player.address);
    let otherUser = (await ethers.getSigners())[5];
    await levelContract
      .connect(player)
      .approve(otherUser.address, playerBalance);
    await levelContract
      .connect(otherUser)
      .transferFrom(player.address, otherUser.address, playerBalance);
  });
```