teleren/devto huggingface dataset:
Operators in JavaScript!
Published: 2023-05-04 19:06:36

## What are Operators?
Operators are special symbols that act on data. They're used to perform operations on values or variables by assigning them to a variable, comparing them, or using them in arithmetic operations.

---

## Arithmetic Operators:
Arithmetic operators are used to perform arithmetic on values (either literal or variables). 

`+` addition 
`-` subtraction 
`*` multiplication
`**` exponentiation
`/` division
`%` modulus aka remainder
`++` increment
`--` decrement 

Examples of arithmetic operators being used:

```
1 + 1 = 2
2 - 1 = 1
2 * 2 = 4
3 ** 2 = 9
4 / 2 = 2
5 % 2 = 1
5++ = 6
5-- = 4
```

---

## Assignment Operators:
Assignment operators assign a value to a variable.

Examples of assignment operators being used:

```
x = 2
x += 2 // reassigns x to whatever it was + 2
x -= 2 // reassigns x to whatever it was - 2
x *= 2
x /= 2
x %= 2
x **= 2
```

---

## Comparison Operators:
Comparison operators compare two values to determine equality or difference and evaluate to a boolean aka true or false.

`==` loosely equal to
`===` strictly equal to  
`!=` loosely not equal to
`!==` strictly not equal to  

The difference between loosely equal / not equal & strictly equal to:
Loosely checks if just value are equal.
Strictly checks if <u>**both**</u> the value and data type are equal.

**Helpful Tip:** Don't use non-strict comparison unless there's a good reason to which is almost never! 

`>` greater than
`<` less than
`>=` greater than or equal to
`<=` less than or equal to

Examples of comparison operators being used:

```
x = 5
y = 10

x == 5 // returns true
x == '5' // returns true

x === 5 // returns true
x === '5' // returns false

y != 10 // returns false
y != '10' // returns false

y !== 10 // returns false
y !== '10' // returns true

x > 10 // returns false
x < 10 // returns true

y >= 10 // returns true
y <= 10 // returns true
```

---

## Logical Operators:
Logical operators compare two variables or values and determine the logic whether it's true or false

`&&` and
`||` or
`!` not

Examples of logical operators being used:

```
x = 2 
y = 6

// if all inequalities are true it returns true
x < y && y > 8

// if at least one of the inequalities are true it returns true
x > y || y < 4

// logical opposite
!x === 3
```

---

## Ternary Operators:
The only operator that takes 3 operands: a condition followed by a `?` then an expression to execute if the condition is truthy followed by a `:` and then the expression to execute if the condition is falsy. The ternary operator is an alternative to using an if else statement.

```
let number = 99;

let lessThan100 = number < 100 ? "Less than 100!" : "Sorry your number is not under 100."

console.log(lessThan100); // "Less than 100!"
```

---
## Conclusion: 
Operators are important tools in JavaScript for performing various operations on data. Each type of operator serves a specific purpose. Understanding how to use operators can help write more efficient and readable code.

Happy coding! :)
JS Interview Question #4
Tags: javascript, react, interview
Published: 2023-05-04 18:52:11

Read more articles in [Think1s](http://www.think1s.in)

What will be the output of the following code?

`for (var i = 0; i < 5; i++) {
  setTimeout(() => {
    console.log(i);
  }, 0);
}`

`
The output of the code will be:
5
5
5
5
5
`
Explanation:

For each iteration, a setTimeout method is called, which takes a callback function that logs the current value of i to the console.

However, since setTimeout is an asynchronous function, it does not execute immediately. Instead, it schedules the callback function to execute after a certain amount of time. In this case, the amount of time is set to 0, which means the callback function is scheduled to execute as soon as possible, but not immediately.

Therefore, when the for loop finishes executing, the value of i will be 5. This means that all five setTimeout functions will execute their callback function with i equal to 5, resulting in the output of 5 printed five times to the console.

Read more articles in [Think1s](http://www.think1s.in)
May the Fourth Be with You: Jedi Training Challenge in Python
Tags: python, beginners
Published: 2023-05-04 18:49:10

# May the Fourth Be with You: Jedi Training Challenge in Python

Greetings, Jedi Padawans, fellow coders, and esteemed Jedi Knights! Today, we celebrate Star Wars Day and embark on an exciting journey through the galaxy of Python programming. 

Inspired by the [Jedi Training Challenge](https://dev.to/devteam/jedi-training-challenge-5a48) blog post, we have created a Python script that will test your Jedi coding skills and bring balance to the Force. 

Come along as we explore the [May the Fourth GitHub repository](https://github.com/rainleander/may-the-fourth) and learn how to wield the power of Python like a true Jedi Master.

## Jedi Training Challenge

In the Star Wars universe, Jedi Knights are skilled in the use of the Force, a mystical energy that they can manipulate to achieve various abilities. To simulate Jedi training, we have created a Python program that generates a sequence of numbers and applies various transformations to them using... the power of code!

The mission is simple:

1. Generate a sequence of 10 random numbers between 1 and 10.
2. Use the Force (code) to apply the following transformations to the sequence:
    - Multiply every even number by 2
    - Add 5 to every odd number
    - Replace any number greater than 10 with 1
3. Print the final sequence to the console.

Our Python script, [`may.py`](https://github.com/rainleander/may-the-fourth/blob/main/may.py), accomplishes this task with ease. Check out the [May the Fourth GitHub repository](https://github.com/rainleander/may-the-fourth) to see the script in action and learn how to run it on your local machine.

## Join the Rebellion

The Force is strong with this repository, but we believe it can become even stronger with your help. We invite you to join the rebellion and contribute your Jedi coding skills to improve and expand the project. The README.md file in the repository provides detailed instructions on how to collaborate, create pull requests, and contribute your unique touch to this Python-powered Jedi adventure.

## The Force Will Be with You... Always

With the power of Python and the guidance of the Force, you can become a true Jedi coder. Take the Jedi Training Challenge, explore the [May the Fourth GitHub repository](https://github.com/rainleander/may-the-fourth), and collaborate with your fellow Jedi Padawans to create a Python script that will bring balance to the galaxy. 

Remember, the Force will be with you... always. 

May the fourth be with you!
Self Introduction
Tags: firstpost
Published: 2023-05-04 17:47:31


##Hi, I'm Hodaka Matsuki.

![Tokyo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bw2z7b7xwr2wv4ddi7dg.jpg)
###A summary of myself.

I have worked as a backend engineer for 3 years for a Japanese company that provides SaaS products for real estate agents such as CRM.
I moved to Vancouver to start a new career in the Tech industry.
I am currently taking classes for a Diploma in Web Development at Cornerstone International Community College of Canada.
The course mainly focused on the Front-end side such as Javascript, so I hope it will help me to become a full-stack engineer.

###Bit more detail about my working experience.

I started working as a PHP developer in April 2020.
My first project was contract development which has a few members on our team.
Since we have few people, I need to be flexible about every kind of problem, I wrote code, but I also worked on some middleware issues (Nginx), Databases (Aurora), and AWS.
~~Fortunately~~ Sadly, there were no senior engineers on the team with AWS experience, so I was able to take on a variety of challenges.
I not only built the staging and production environments on AWS but also optimized the environment, conducted load tests(JMeter), and implemented CI tools(GitLab CI).
Those experiences grow my insight into how to structure systems and create stable products.
After releasing that project, I worked on some monitoring for the production environment such as slack notification when the CPU is under high load(Cloud Watch).
After that, I was assigned to the department of developing our own CRM.
I did some major functionality updates there that involved database structure, as well as modifications to the email system.
I also started communicating with the support desk and performed On-call duties.
After working there for a year, I next moved to a department specializing in batch processing.
The department's maintenance coverage contains some legacy code that had existed since the company's inception, and some code had not been changed for 10 years.
My principal role was to make those legacy codes to visualize the code (I mean the team didn't sure which code are still working and which is not.) and to establish and stabilize a monitoring system.
So, I started coding some test code and also I implemented some functions which allowed me to insert some records into DB so that I can make notifications based on that.
It would take a very long time to complete, so I focused on creating a template and worked carefully so as not to leave a technical debt to new people coming in later.

### What I would like to challenge in the future.
My main focus was the backend, so I hope I learn some of the front-end things during my studies.
But I like working on the backend side, so I would be happy to gain such experience in Canada.
I will blog about what I learned in school(hopefully until I could continue).
Code like a child 👶🏻, build like a pro🧑🏻‍🔧: Unleash the magic of SOLID!
Tags: codenewbie, beginners, programming, architecture
Published: 2023-05-04 18:35:20

🚀🌟 Hey there 👋🏻, dev-nuggets and future coding prodigies! 

Today, I want to talk about the magical world of SOLID principles! Imagine if our code was like a LEGO castle where each piece is designed to fit perfectly with the others. That's what SOLID helps us achieve! 🏰✨

🎨 Picture this: You're 5 years old, and you've just built the most amazing castle using your favourite LEGO bricks. Now, imagine that each of those LEGO bricks is a piece of code in your app. SOLID principles are like the magic instructions that help us build apps with LEGO bricks that click together perfectly every time! 🧙‍♂️🧩

🌈 Here's a quick, colourful guide to SOLID for our little coding wizards:

1. 🦸‍♂️ **S**ingle Responsibility Principle (SRP): Each LEGO brick (code piece) has a unique job, just like superheroes! We don't want Captain America to cook pizza when he's saving the world, right? 🍕🌍

2. 🎁 **O**pen/Closed Principle (OCP): Think of your code like a surprise gift for someone. You can wrap it in new, exciting paper (extend), but you shouldn't have to open it up and mess with the toy inside (modify) to make it more fun! 🧸🎉

3. 🦉 **L**iskov Substitution Principle (LSP): When you play with LEGOs, you can swap out a red brick for a blue one, and it still fits! That's what LSP is all about—making sure our code pieces can be swapped without breaking our castle! 🟥🔵

4. 🤝 **I**nterface Segregation Principle (ISP): Imagine having a LEGO instruction book for each part of your castle. It's way easier to follow smaller, focused guides than one big, confusing manual. ISP helps us break down our code into simpler interfaces! 📚🏰

5. 🧪 **D**ependency Inversion Principle (DIP): When building our LEGO castle, we want to rely on the shape of the bricks, not their colour. DIP reminds us to depend on abstractions (shape) rather than specifics (colour), making our code more flexible! 🌈🧱

🚀 So, my fellow coding enthusiasts, let's build our code castles with SOLID principles, and create apps that are as magical and fun as our favourite LEGO sets! And remember, even if you're not 5 years old, it's never too late to learn something new! 🎓✨
OrgFeeder - Feedbacks, Bug Report and Feature Requests
Tags: githubhack23, node
Published: 2023-05-04 17:23:28

## What I built 
I built a web app using Node JS that can take feedbacks, request features and report bug for any organization. There are various Rest APIs I built for this project.

### App Link
Check it on GitHub: [here](https://github.com/donib-irakihda/bindesh)
### Screenshots 
Since I have created back end only, I don't know what screenshots I should post. Maybe postman's will work. Ask me if needed.
### Description 
This app lets registered users to create an organization where any users can give their feedbacks, request features for that organization and also report bugs. Similarly, users can comment on the posts as well as upvote. Authentication is handled using JWT token method making it more secure. I have used MongoDB as a database model in this project.
### Link to Source Code 
Check it on GitHub: [here](https://github.com/donib-irakihda/bindesh)
### Permissive License 
Distributed under [MIT License](https://github.com/donib-irakihda/bindesh/blob/f0de550645b7f5ac1e91a104fbddde4ac36f8fcc/LICENSE)
## Background (What made you decide to build this particular app? What inspired you?) 
I started learning Node JS few weeks back and I got this idea to develop the app.
### How I built it (How did you utilize GitHub Actions or GitHub Codespaces? Did you learn something new along the way? Pick up a new skill?) 
I have mostly used VS code editor to develop this app but used Gitub Codespaces to edit it few times.
### Additional Resources/Info
Thank you! I did this mostly just to participate in Hackathon!
Cheers!!
Inheritance Typescript
Tags: tutorial, programming, typescript, beginners
Published: 2023-05-04 18:32:38

Create a Parent Class

```
class Parent {
	name: string;
	age: number;
	address: string;

	constructor(name: string, age: number, address: string) {
		this.name = name;
		this.age = age;
		this.address = address;
	}

	makeSleep(hours: number): string {
		return `This ${this.name} will sleep for ${hours}`;
	}
}
```

After Create a Child Classes for Send Parent Class Data

```
class Student extends Parent {
	constructor(name: string, age: number, address: string) {
		super(name, age, address);
	}
}
```

```
const student1 = new Student("Mr x", 20, "New York");
student1.age;
```

Another Example

```
class Teacher extends Parent {
	designation: string;

	constructor(name: string, age: number, address: string, designation: string) {
		super(name, age, address);
		this.designation = designation;
	}
    
	takeClasses(numOfClass: number): string {
		return `this ${this.name} will take ${numOfClass}`; // Different
	}
}
```

```
const teacher1 = new Teacher("Mr Y", 54, "UK", "Professor");
teacher1.designation;
```
Less is More: Why I Switched to a Simpler Task Management App and How It Improved My Productivity
Tags: programming, productivity, mobile, developer
Published: 2023-05-04 18:02:35

As a developer who's always juggling multiple side projects, I've tried out countless task management apps over the years. From Trello to Asana to Todoist, I've experimented with them all, looking for the perfect tool to keep me organized and on top of my workload. But after years of trial and error, I've come to the conclusion that less is more when it comes to task management apps.


When I first started out, I was drawn to apps that had a seemingly endless list of features. I thought the more options I had, the better I'd be able to customize my workflow to fit my needs. But what I found was that all those features quickly became overwhelming and made it more difficult to use the app effectively. I spent more time trying to navigate through the various options than actually getting work done.

That's when I started looking for simpler task management apps. I wanted something easy to use and didn't have a lot of bells and whistles. The features that I find myself using most of the time are:

1. Setting reminders
2. Assigning priorities
3. Using colors to categorize
4. Break down larger tasks into smaller
5. Mark off completed subtasks to track progress and stay motivated

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

After trying a few different options, I came across [Planndu](https://planndu.com), an app for Android that I think is the best on the market.
What I love about Planndu is its simplicity. It has just the right amount of features to keep me organized without overwhelming me.

One of the features I appreciate the most is the ability to create recurring tasks. This is especially helpful for my side projects that require regular updates or maintenance. I can set a task to repeat daily, weekly, or monthly and not worry about forgetting to do it.

Long story short, I've found that keeping my task management app simple and straightforward has made it much easier for me to stay organized and productive.
[Storybook GPT] Connect to OpenAI API in NextJS 13
Tags: webdev, githubhack23, react, chatgpt
Published: 2023-05-04 17:47:40

In this post, I will show you how to connect to the amazing OpenAI API using NextJS 13, the latest and greatest version of the React framework that powers millions of websites.

To use OpenAI's chat API, first we need to get an API key from [here](https://platform.openai.com/account/api-keys), you need to sign up for an account and request access to the API. 
Then we'll need to install the OpenAI package in our Next.js 13 project. You can do this by running the following command in the terminal: 

```
npm install openai
```
Once the package is installed, we can use it to create a function that can receive a React component and return a Storybook story by passing the component through OpenAI API.

```
import { Configuration, OpenAIApi } from "openai";

export async function convertComponent(component) {
const prompt = `Convert this React component into a Storybook component:\n\n${component}`;
  const configuration = new Configuration({
    apiKey: process.env.OPENAI_API_KEY,
  });
  const openai = new OpenAIApi(configuration);
  const response = await openai.createCompletion({
    model: "text-davinci-003",
    prompt: prompt,
    max_tokens: 1024,
    temperature: 0.7,
    top_p: 1.0,
    frequency_penalty: 1,
    presence_penalty: 0.5,
    stop: ['\n\n'],
  });

  return response.data.choices[0].text.trim();
}
```

With the provided prompt, if we send this component as an input:

```
import React from 'react';
function MyButton() {
  function handleClick() {
    alert('You clicked me!');
  }

  return (
    <button onClick={handleClick}>
      Click me
    </button>
  );
}
export default MyButton;
```

This is the response it returns:

```
// MyButton.stories.js
import React from 'react';
import { action } from '@storybook/addon-actions';
import MyButton from './MyButton';

export default {
  title: 'MyButton',
  component: MyButton,
};

export const Default = () => <MyButton />;

export const WithText = () => <MyButton>Click me</MyButton>;

export const WithAction = () => (
  <MyButton onClick={action('button-click')}>
    Click me
  </MyButton>
);
```

Pretty amazing I'd say. Now, with the converter function set up, we can create a simple user interface for users to interact with the API. The interface will allow the users to enter their own API key and the React component code in two separate text inputs. Then, it will display the generated Storybook story in a disabled text area.
Story of my life
Published: 2023-05-04 17:45:51

My names are Nshimiyimana Samuel,mostly known as Kevin, am about 29, I was born and grow here in Rwanda, In high school I studied Mathematics chemistry and Biology(MCB), but I had a passion in technology, computer science and other things related, am grateful to this opportunity  I got to study about coding and programming webs,I hope finally am going toget what I like the most! I think this is just a beginning,today it's one step I make, hopefully this one will be followed by millions miles ahead of me roads to my destiny.
Thanks to someone who gave me this opportunity! Thanks to my classmates for your help.
The future looks very bright

The best are yet to come
FAILURE TO PUBLISH - WORDPRESS
Tags: wordpress, javascript, php
Published: 2023-05-04 17:39:59

Hello, could someone help me??

I'm configuring my site, when I try to publish anything I get an error message "FAILURE TO PUBLISH" I'm suspicious of the theme, because with the default theme it works normally, could someone help me? access step.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/humdzix52btq15tamii6.jpg)
Return an element in console
Tags: webdev, javascript, programming, react
Published: 2023-05-04 17:13:17


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

Do you want see an element that you create in your HTML on console by JS?

It's so easy and simple.
there is no more explain about this, but you should know some small tips about it:

> We can do this with using from `getElementById()` method.
this return one element with specified ID.
you should remember that: your IDs name should be unique.
and you should use "variables name rule" for your IDs name.

> Here our answer:

1. select an element with this method like that:

```
document.getElementById("demo");
```

2. This would return the full HTML element:

```
<h1 id="demo">Hello world.</h1>
```

3. We should write our method in `console.log` as we know for 
see it in console:

```
console.log(document.getElementById("demo"));
```

Finally, I must mention, these things I said are about "HtmlDom" topic in JS.
DevRel, quem precisa brilhar são os Devs, esse é nosso trabalho!
Tags: beginners, devrel
Published: 2023-05-04 16:20:19

Como DevRel alavanque pessoas, isso lhe trará  alto ganhos como profissional de relacionamentos.

Aprenda uma linguagem junto com o time, pesquise sobre as necessidades dos times, facilite o trabalho dos deles, ajude promover aqueles que contribuem com o trabalho dos demais, ajude-os a atingir seus objetivos pessoais e profissionais, ajude as comunidades a se impulsionarem, assim como todo o ecossistema de desenvolvimento de software.

Não se limite apenas a linguagem que a sua empresa trabalhe é pela comunidade, é pelo conhecimento comum entre os devs.

Fique nos bastidores sempre que possível.

#DevRel é promover e gerar interesse em outras pessoas e não em nós.
 
É levar as pessoas que trabalham com você a ser mais importante do que o que você faz por isso.

A parte mais difícil como #DevRel é não permitir que nosso brilho ofusque quem precisa brilhar, os Devs.

 #desenvolvimento #trabalho #software #devrel