teleren/devto huggingface dataset:
7 Fascinating Reasons People Like React.js
Tags: javascript, react, webdev, programming
Published: 2022-11-22 05:38:52

   [ Why React.js?](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Why_Reactjs)
   [ React’s Basic Concepts](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Reacts_Basic_Concepts)
    [Your First React Component](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Your_First_React_Component)
    [Your First React Hook](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Your_First_React_Hook)
    [Your First One-way Data Flow](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Your_First_One-way_Data_Flow)
    [Components Reusability](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Components_Reusability)
    [Tree Reconciliation in Action](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Tree_Reconciliation_in_Action)
    [Wrap Up](https://onurdesk.com/8-fascinating-reasons-people-like-react-js/#Wrap_Up)



I recommend that you check them out first. If you’re coming to React with some previous knowledge of JavaScript, but you have not used the modern features of the language that were added in the past few years, that is not a problem. This series has a module to introduce these features. 

In that series module, I’ll cover things like arrow functions, restructuring, REST, spread operators, classes, and more. We will not be using advanced JavaScript. A basic knowledge of the language will be enough for you to survive this series. But, you’re likely to run into problems that are related to the language syntax rather than the React.js API. 

I’ve written an article on jsComplete about the common problems learners usually face when working with the React.js library. Scan through this article quick and keep it for your reference when you run into a problem while taking this series. Also remember that you can always ask for help in the Comment tab available in this series page. 

[Onurdesk ](https://onurdesk.com)mentors watch these comment forums, but please be as descriptive as you can when you ask a question. Share your code, list any errors you’re getting, and share a screenshot if you can. And when sharing your code, don’t paste it here. This comment tool is not good for that. 

## [Click here for complete article](https://onurdesk.com/8-fascinating-reasons-people-like-react-js)
How To Install Yajra Datatable In Laravel 9
Tags: laravel9, datatable, jquery, beginners
Published: 2022-11-22 05:30:00

In this article, we will see how to install yajra datatable in laravel 9. 

As we all used datatable on our backend side project, here we will show you the laravel 9 datatable examples or how to use datatable in laravel 9.

Yajra datatable in laravel 9 is easy to install and it is a famous package in laravel as well as in PHP.

Yajra datatable is basically a jQuery plugin that allows you to add advanced interaction controls to your HTML tables data.

Datatables also provide ajax for data searching and getting and also provide pagination, sorting, etc.

So, let's see yajra datatable in laravel 9 and laravel 9 yajra datatable example.

```

Step 1: Create New Project In Laravel 9

Step 2: Install the Yajra Datatable Package

Step 3: Create Dummy Records Using Tinker

Step 4: Add New Route

Step 5: Create UserController For Datatable

Step 6: Create Blade File

```
Q. What is JavaScript/Socket.io, node.js for Perl?
Tags: perl, javascript, node, redis
Published: 2022-11-22 05:24:34

A. An answer is <a href="https://metacpan.org/pod/Mojolicious">Mojolicious</a>. Mojolicious implements the <a hreF="https://docs.mojolicious.org/Mojo/UserAgent">HTTP/Websocke client</a>, <a hreF="https://metacpan.org/pod/Mojo::Server::Hypnotoad">HTTP/Websocket Server</a> that support Non-blocking I/O like JavaScript/Socket.io, node.js.

The combination of Mojolicious and Redis pub/sub can create the web application of real-time chatting room.
Fullstack with Svelte & tRPC
Tags: svelte, trpc, typescript, fullstack
Published: 2022-11-22 02:01:18

---
title: Fullstack with Svelte & tRPC
published: true
description: Pointing to a fullstack skeleton app with a fully typed backend + frontend thanks to Svelte and tRPC.
tags: Svelte, tRPC, typescript, fullstack
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
# published_at: 2022-11-20 20:47 +0000
---

Usually I just do _backend-less Svelte_ apps. This time around I tried to go full stack in _javascript/typescript_.

I started with [Svelte-Kit](https://kit.svelte.dev/) but then decided for [Svelte](https://svelte.dev/) - with a typical [Vite](https://vitejs.dev/) build on the frontend - and [Fastify](https://www.fastify.io/) + [tRPC](https://trpc.io/) on the backend.

## The project

Find the project at https://github.com/jzillmann/svelte-trpc-skeleton. It's just a skeleton project with minimal setup (mono repo, NPM workspaces) and a cookie based login. 

I spare to list the individual setup steps since there is nothing sophisticated here. If you need those OR if you like video tutorial have a look at https://www.youtube.com/watch?v=Lam0cYOEst8. I found it excellent and it's basically the same setup just with different technologies. 

## Why not Svelte-Kit

Svelte is one of a few frameworks I dare to say I love. So going with _Svelte-Kit_ was an obvious choice for me.
Why I left that path ?

- The application I want to build is well suited for SPA _(single page application)_. So I gain very little from SSR _(server side rendering)_ and the build in routing.
- While Svelte-Kit's page endpoints are properly typed (typescript), the shadow/server endpoints are not yet and those are the ones I would use most heavily. _(see https://github.com/sveltejs/kit/issues/647 for progress on this)_
- With the _Fastify/tRPC stack_ I can make use of more of the existing HTTP features like
  - Using web-sockets _(Svelte-Kit is not there yet: https://github.com/sveltejs/kit/issues/1491)_
  - Cancelling of HTTP requests _(see https://www.reddit.com/r/SvelteKit/comments/yjdx13/detect_aborted_request_on_the_server/)_
- Overall it seems like the chosen stack is a little more lightweight and easier to grasp then getting familiar with Svelte-Kit.

## Final Words

Since I didn't do much beyond the project setup, final judgment is not here yet, but I feel excited about it!

Also, there are things the skeleton could be improved upon... like:
- testing setup
- unified typescript setup
- unified formatting/linting setup
- real production settings
- etc...

It's not my priority to do these things, but feel free to contribute if you feel like it!
Helm FailedReleaseSync
Tags: helm, helmcharts, helmoperator, kubernetes
Published: 2022-11-22 05:09:17


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


Hi fellow experts, I am stuck with a weird helm issue since last few days. All the helm-releases for a particular cluster are getting failed with this particular reason. 
As part of resolving this issue, have tried these approaches already, but no luck.

1. Changes to the git url in helm release
2. Reinstalling the flux
3. Upgrading helm chart apiVersion
4. Upgrading apiVersion in helm release
5. Helm rollback
6. Trying for helm upgrade-blocker not able to build helm chart 


It would be really helpful if someone could share some troubleshooting insights.
SPVM::IO::File is available in experimental status.
Tags: perl, spvm, fileio, datascience
Published: 2022-11-22 05:06:49

<a href="https://metacpan.org/pod/SPVM::IO::File">SPVM::IO::File</a> is available in the experimental status.


```
  use IO::File;
   
  my $io_file = IO::File->new("file", "r");
  $io_file->print("Hello");
```

This module is a <a href="https://metacpan.org/pod/IO::File">IO::File</a> porting to <a href="https://metacpan.org/pod/SPVM">SPVM</a>.

SPVM is approaching the goal of Data Science on IoT. SPVM can access files and create an executable file using <a href="https://metacpan.org/dist/SPVM/view/script/spvmcc">spvmcc</a> for IoT devices.
Simple Tricks To Find Overflow In The Web Page Just 1 Second.
Tags: javascript, html, css, overflow
Published: 2022-11-22 05:00:05

---
title: Simple Tricks To Find Overflow In The Web Page Just 1 Second.
published: true
description: I am a FullStack Developer. Everybody call me supermanjoy. 
tags: #javascript #html #css #overflow
canonical_url: https://www.joymojumder.com/
---

Sometimes we get overflow in the x-axis direction of a web element or Section ( SELECTOR ). But we can not find which this element or page section getting overflowing. We call the overflow "Hidden Horizontal Overflow". 

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

This Code will give an overflow in a small size device. Think that we are not getting exactly which position we are getting this overflow. We can find this type of overflow before just 1 second using width calculation by javascript.

**_Tricks / Solution :_**
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oytzcvzxuvc18hbjga4k.png)

1. Open the file in the browser.
2. then open the console section on inspect element.
3. Copy the Code and paste it into the console area.
4. Then see the magic below your code.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rpwpo7rrh7gpqbzc1qys.png)
SPVM::IO::Socket::INET is available in experimental status.
Tags: perl, spvm, socket, iot
Published: 2022-11-22 04:46:58

<a href="https://metacpan.org/pod/SPVM::IO::Socket::INET">SPVM::IO::Socket::INET</a> is available in the experimental status.


```
  use IO::Socket::INET;

  my $host = "google.com";
  my $port = 80;
  my $io_socket = IO::Socket::INET->new({
    PeerAddr => $host,
    PeerPort => $port
  });

  my $send_buffer = "GET / HTTP/1.0\r\n\r\n";
  $socket->send($send_buffer);
  
  my $recv_buffer = (mutable string)new_string_len 100;
  while (1) {
    my $recv_length = $socket->recv($recv_buffer);
    
    if ($recv_length < 0) {
      die "Read error";
    }
    
    say Fn->substr($recv_buffer, 0, $recv_length);
    
    if ($recv_length < length $recv_buffer) {
      last;
    }
  }
```

This module is a <a href="https://metacpan.org/pod/IO::Socket::INET">IO::Socket::INET</a> porting to <a href="https://metacpan.org/pod/SPVM">SPVM</a>.

SPVM is approaching the goal of IoT. SPVM can access the Web via HTTP and create an executable file using <a href="https://metacpan.org/dist/SPVM/view/script/spvmcc">spvmcc</a> for devices.
Python Programming Bootcamp #2 - First Steps
Tags: python, beginners, tutorial
Published: 2022-11-22 04:43:00

---
title: Python Programming Bootcamp #2 - First Steps
published: true
description: A Python course for people with no programming background. It is given to MSc and Phd Students of Biology, Chemistry, and Earth Sciences.
tags: python, beginners, tutorial, beginners
# cover_image: https://direct_url_to_image.jpg
# Use a ratio of 100:42 for best results.
published_at: 2022-11-22 04:43 +0000
canonical_url: https://code-maven.com/programming-bootcamp-for-scientists-2
series: bootcamp
---


{% youtube 6tjTE9UbxBY %}



00:00 The beginning of the "First steps" chapter.
00:55 Python 2 vs. Python 3 - Why is it important to know about Python 2.
04:00 Installing Python.
04:10 Linux
05:17 Apple Mac OSX [Homebrew](https://brew.sh/)
06:38 MS Windows [Anaconda](https://www.anaconda.com/products/individual) 64 bit vs 32 bit.
12:57 Verify the installation in Anaconda Prompt. Configure the color of the window.
17:26 Editor, IDE for Python
19:56 Documentation of Python, search engines, Stack Overflow
23:45 Program types
28:13 Python on the command line
29:53 Hello World! - Writing our first program in Python.
36:00 TAB completion on the Windows command line.
37:40 Windows file explorer - make the file extensions and the hidden files visible.
41:00 File extensions and Syntax highlighting in Notepad++.
43:50 How to download all the examples from GitHub
47:00 Comments
48:45 Variables
49:53 Exercise: Hello World
The Best for Your WordPress Website
Tags: wordpress, plugins
Published: 2022-11-22 04:36:17

WordPress is nothing without plugins. To enhance the functionality of WordPress Website you need to use WordPress Plugins.

Obviously, some plugins are more high-standard than others. In order to avoid any inconvenience (plugin conflicts, bugs, crash of your site, etc.), I advise you to follow the instructions below when making your choice: Look at the number of active installations. Generally, the higher the better (i.e. the more likely they are to work properly). 

But be careful: it’s not always the case. You can find more confidential plugins that remain high-performing. Check user reviews. When the feedback is good, it’s a positive sign. On the other hand, if a plugin faces many criticisms, think carefully before installing it. Take a look at the frequency of updates. If a security plugin has not been maintained for 3 years, 

there is probably something wrong. Many plugins are designed by volunteers who don’t always have the time to take care of them regularly. Check if the plugin you are interested in is compatible with your version of WordPress. That being said, don’t focus on this criterion. Think of it as a bonus. Even if the version displayed is not yours, there is a good chance that it will work.

Plugins for Basic WordPress Website
**- Yoast SEO
**- Akismet
**- WP Rocket
**- Imagify
**- Social Warfare
**- Redirection
**- TablePress
**- Duplicator
**- Elementor
**- iThemes Security**

Get more information about these plugins on [muPlugins WordPress Blog](https://muplugins.com/). It is the best resource to get knowledge about plugins.

You can also read [best WordPress affiliates plugins for marketing](https://loginpress.pro/best-wordpress-affiliate-plugins/) and how you can [improve your WordPress login security](https://loginpress.pro/wordpress-login-security/) using plugins.
Conditional Operators
Tags: javascript, beginners, programming, tutorial
Published: 2022-11-22 04:25:48

Today, we will be discussing two types of conditional operators. The first one is a if else statement and the second is the ternary operator.

Let's start with the if else statement's syntax:
``` JavaScript
if (condition1) {
     statement1

} else if (condition2) {
     statement2
} else {
     statement3
}
```
_Note: You don't have to have two different conditions. It can also be done with just an if statement and an else statement (without an `else if`)._

The condition in the if statement can be any condition that can be truthy or falsy. Then, the statement states what will happen if that condition is met. Then, you can either add another condition or just have a general statement (which will be put into `else`) that will happen if the first condition is not met. 

Now, let's try it out!
```JavaScript
function ifStatements(x) {
     if ( x >= 15) {
          console.log("I'm greater than 15!")
     } else if (x > 10 && x < 15) {
          console.log("I'm between 10 and 15!")
     } else {
          console.log("I'm everything else!")
     }
}

ifStatements(8) // This gives "I'm everything else!"
ifStatements(20) // This gives "I'm greater than 15!"
ifStatements(12) // This gives "I'm between 10 and 15!"
```
Based on what x had equaled, the `console.log` gave us different answers!

Now, let's look at ternary operators! Personally, I like ternaries more because of two things: It's short and it can be done in one line! 

The syntax for ternary operators looks like this:
```JavaScript
condition ? expressIfTrue : expressIfFalse
```
The condition in a ternary is a condition that will either be truthy or falsy (just like an `if` statement). The first expression will be shown if the condition is truthy. If the condition is falsy, the second expression will be shown. 

Let's look at how it works:
```JavaScript 
function ternaryOperators(isHappy) {
    return (isHappy ? "Yay!" : "It's okay to feel upset!")
}
console.log(ternaryOperators(true)); // "Yay!"
console.log(ternaryOperators(false)); // "It's okay to feel upset!"
```
Based on whether `isHappy` was true or false, the `console.log` gave us the two different strings!

I think Ternary Operators are better if you want to check one condition while if statements are better if you have multiple conditions that you want to check! Both are very useful and help make JavaScript easier to use!
How to Make Typing Game in React
Tags: react, beginners, javascript, programming
Published: 2022-11-22 04:12:37

In this article, we will create a typing game in react. This typing game will be usual like other typing game where we can get accuracy and word per minute as results. Here we will have a timer, then a paragraph and lastly an input field for user input. Timer and paragraph will be started as soon start button gets clicked, timer will be of 60 seconds, then user will be able to write in input field. And as soon the timer runs out then accuracy and wpm will be appeared as result.

So basically this is going to be a beginner-friendly project, so let’s make this project step-by-step.

##Pre-requisites to Make Typing Game in React

- Basic knowledge of ReactJS.
- Basic knowledge of React hooks.
- Basic knowledge of React props.
- Good knowledge of React Components.

##Building An User Interface
Now let’s create a basic UI for our project, for that we will move to App.js. Here, we have imported useState, useEffect and useRef hooks which are going to be helpful throughout the project. Then we also imported the random-words package, which is going to be used to generate random words. Now we have declared constants for number of words of 400, and seconds to 60.

Then we have created state for words, and then we created useEffect hook where we have set the words state where we will get words from generateWords() function. In this function, we’re just returning an array of words using this line of code return new Array(NUMB_OF_WORDS).fill(null).map(() => randomWords()).

Now in return() statement, we have added a heading tag for timer, then we have added an input field, a button and after that we have words.map((word, i) => (<span key={i}>) to added spacing between the letters.
[Read More](https://reactjsguru.com/how-to-make-typing-game-in-react/)
C++ intro for starter 8
Tags: beginners, programming, cpp, tutorial
Published: 2022-11-22 03:54:51

#Assalomu alaykum!

Bugungi darsda biz o'tgan mavzuda `if&else` mavzusining davomi `nested if` ya'ni ichma-ich `if` va `switch&case` haqida gaplashamiz.

Bu qanaqa bo'ladi? Demak boshladik,
````cpp
#include <iostream>
using namespace std;

int main()
{
 int s;
  cin >> s;

  if (s > 0)
     {
    if (s % 2 == 0)
      cout << "Musbat juft son";
    else
      cout << "Musbat toq son";
      } 
 else if (s < 0)                                                                         
    {
    if (s % 2 == 0)
      cout << "Manfiy juft son";
    else
      cout << "Manfiy toq son";
     } 
  else
    cout << "Son nolga teng ";

  return 0;
}
```
Ko'rib turganingizdek bizda ichma-ich `if&else`hosil bo'lmoqda va siz buni yuqorida kod orqali osongina tushunishingiz mumkin va siz uchun bu juda oson bo'ladi.


Endigi navbatda `switch&case` haqida gaplashamiz.


```cpp
#include <iostream>
using namespace std;
int main(){
witch(expression) {
  case x:
    // code block
    break;
  case y:
    // code block
    break;
  default:
    // code block
return 0;
}
```
Siz yuqoridagi `switch&case`ning qisqa qilib aytganda formulasi deya atashimiz mumkin.

Undan tashqari quyidagi kodda ham aniqroq tushunishingiz mumkin.

```cpp
#include <iostream>
using namespace std;

int main(){
int day = 4;
switch (day) {
  case 1:
    cout << "Monday";
    break;
  case 2:
    cout << "Tuesday";
    break;
  case 3:
    cout << "Wednesday";
    break;
  case 4:
    cout << "Thursday";
    break;
  case 5:
    cout << "Friday";
    break;
  case 6:
    cout << "Saturday";
    break;
  case 7:
    cout << "Sunday";
    break;}
return 0;
}

```

Bugun shu mavzular haqida gaplashdik.@dawroun

> E'tiboringiz uchun rahmat!
My journey - Developer_DAO Mentee
Published: 2022-11-22 03:54:04

Hi, I am Judith (pronouns she/her).

After weeks of quietly following web3 icons on Twitter, I decided that I would jump into the deep end of the pool.

My icons on Twitter - Nader, Cami, Kacie, Albert, Vitto.

I bought my Developer_DAO NFT(Dev #3005), joined some Discords and carved some time out of my busy schedule to start my web3 learning.

Completing LearnWeb3DAO gave me the confidence to finally join Developer_DAO. My end goal is web3 security but I knew that I had to learn the fundamentals before I could specialize.

I currently work as a Cloud Security and DevOps engineer and I am interested in blockchain and smart contract security.

Developer_DAO announced their mentorship program, I signed up and was accepted. 

The day of meeting mentors to find a match was a fun exercise and I interacted with mentees/mentors from varying backgrounds. I felt safe, welcome and motivated.

My mentorship started right away (before the official start too) and we met weekly. My mentor was helpful from Day 1 and gave me valuable tips for my learning path  - learn Rust, which web3 jobs/companies to consider, interview tips, push my projects to Github, significant web3 events pertinent to my interests, etc. He had to leave the program but before he did, he reached out to the DAO to ensure that I continued on my path to success. He encouraged me to keep working hard and I will.

Developer_DAO followed up, reached out and found another mentor who, to my delight, also has a web3 security background - someone who I considered a rock star prior to this.  I am even more motivated to succeed.

In our first meeting, last week, we mapped out a learning path from November to May 2023.

My first mentor laid a strong foundation for me and built my confidence up. I will do all I can to not let him or my second mentor down.

In addition to the web3 and web3 security readings and hands on, we are going to work on improving my Github and tailoring my resume. The target is a web3 security opportunity by May 2023.

Thus far, the mentorship program has exceeded my expectations and I encourage members to sign up for the next cohort.
How to organize Figma files for developers
Tags: figma, developer, productivity, jira
Published: 2022-11-22 03:16:12

I going to share a simple tip that I find recently that helps the productivity of our team.

My team is using [Jira](https://www.atlassian.com/software/jira) to organize and track our tasks, and for each task that is related to design, the P.O. or S.M. adds the [Figma](https://www.figma.com/) link associated with the task, but sometimes the link breaks, and we lose exactly which page we are going to work on.

To solve this issue you can add a text at the top for each page and add the ID of the Jira task corresponding.


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

With that, the page can be easily searchable by Jira ID on the search field in Figma.

I hope this tip can be useful for your team.

If you have any another tip, please comment here :)