teleren/devto huggingface dataset:
Should you Learn JavaScript? My opinion about JavaScript.
Tags: javascript, webdev, beginners, discuss
Published: 2022-04-07 08:43:06

Yeah, I've been learning JavaScript recently in Scrimba. Their classes are good. So This is my opinion on JavaScript ( _I don't have power to say this but it is my opinion so... _ )

JavaScript is a very good language. It has given a change to my website and my websites feel more lively. _ALERT - The written lines were given in the tutorial so I am just copy pasting, hehehe_

I've been using it in a few websites and YOU SHOULD USE IT If you are a web developer

## Times when JavaScript Helps

1. If you want to add a contact form, login / register form in websites.
2. If you want to make your program / website more beautiful and Lovely - _By Billie Eilish & Khalid_
3. When you build apps or using **NEXT JS** _or_ **VUE JS**, It will help you a lot if you learn JavaScript. 

## What I hate about JavaScript

- It is a little bit confusing.
- Sometimes It makes me feel like I am a bad man.
- It shows different results in different areas.

## Should You use it or not?

In my opinion, JavaScript is a tough language sometimes and easy to learn sometimes. If you are a Web Developer or App Developer, Then you should learn it. That's all I have to say. If you are interested in learning it, Then you could learn it from FreeCodeCamp or Scrimba. I've learned it from both and You should definitely see both. 

Signing Off,
Gautham G Nair
Catalyst Blogathon
Tags: serverless, cloud, webdev, programming
Published: 2022-04-07 08:38:28

Hi fellow developers and writers, here's your chance to inspire the #Serverless community by writing something share-worthy and valuable. Participate in the #CatalystServerless blogathon for a chance to win exciting cash prizes! [Register here](https://catalyst.zoho.com/blogathon.html?utm_source=socials&utm_medium=devto&utm_campaign=blogathon)!
Install NVM (Node Version Manager) and Node.js
Tags: nvm, node, javascript, crossplatform
Published: 2022-04-07 08:27:46

---
title: Install NVM (Node Version Manager) and Node.js
description: This is a manual for installing NVM and Node.js
tags: 'nvm, node, javascript, crossplatform'
cover_image: 'https://raw.githubusercontent.com/bybatkhuu/wiki/main/assets/images/nvm.png'
canonical_url: null
published: true
id: 1047409
date: '2022-04-07T08:27:46Z'
---

## NVM (Node Version Manager)

NVM is a tool for managing multiple versions of Node.js.

### Features

- Cross-platform
- Node.js
- Manager for multiple versions of Node.js, npm, and yarn
- Multiple Node.js environments

## Official pages

- NVM: [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)
- NVM for Windows: [https://github.com/coreybutler/nvm-windows](https://github.com/coreybutler/nvm-windows)

---

## Install on **Linux** or **macOS**

### 1. Download and install **NVM (v0.39.1)**

```sh
## Recommended path to install NVM:
# Set and export `NVM_DIR` environment variable. For example:
mkdir -vp ~/workspaces/runtimes/.nvm
export NVM_DIR="${HOME}/workspaces/runtimes/.nvm"

# Install NVM:
wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh | bash


## For bash:
# Load .bashrc file to init NVM into current bash session:
source ~/.bashrc

## For zsh:
# Load .zshrc file to init NVM into current zsh session:
source ~/.zshrc


# Check installed NVM version:
nvm --version
```

### 2. Install **Node.js**

```sh
# Install Node.js, update NPM to latest, and set default Node.js:
nvm install --latest-npm --alias=default 16.14.2
# Set to use default Node.js:
nvm use default

# Clean NVM caches:
nvm cache clear

# Check installed Node.js and NPM version:
node -v
npm -v

# Install essential extra packages:
npm install -g pm2 newman jshint
pm2 install pm2-logrotate

# Clean NPM caches:
npm cache clean --force
```

:thumbsup: :sparkles:

## INSTALLATION COMPLETE (**Linux**, **macOS**)

---

## Install on **Windows**

### 1. Download and install **NVM-Windows (v1.1.9)**

- Downloads: [https://github.com/coreybutler/nvm-windows/releases](https://github.com/coreybutler/nvm-windows/releases)

### 2. Install **Node.js** (**Windows**)

```powershell
nvm install 16.14.2
nvm use 16.14.2
```

:thumbsup: :sparkles:

## INSTALLATION COMPLETE (**Windows**)

---

## Usage

```sh
# NVM help:
nvm -h
```

---

## References

- Install NVM on Ubuntu 18.04: [https://nbanzyme.medium.com/easy-way-to-install-nvm-on-ubuntu-18-04-2cfb19ee5391](https://nbanzyme.medium.com/easy-way-to-install-nvm-on-ubuntu-18-04-2cfb19ee5391)
- Install NVM macOS: [https://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/](https://nodesource.com/blog/installing-node-js-tutorial-using-nvm-on-mac-os-x-and-ubuntu/)
Using Quasar with Vue3 & Storybook
Tags: quasar, vue, storybook, beginners
Published: 2022-04-07 08:27:19

> This is a draft article and may be polished later

Create a new quasar project. Install the quasar cli if you haven't already. Using the Vite option for this example.

Select Vue 3 and Vite instead of Webpack to follow along with this example.

```
$ yarn global add @quasar/cli
$ yarn create quasar

# or:

$ npm i -g @quasar/cli
$ npm init quasar
```

## Initialize storybook
- cd into the directory of your created project

Run `npx sb init` to initialize storybook in your project.

## Update package.json
Replace whatever version of autoprefixer you have in your `package.json` in order for Storybook to work. The version of PostCSS being used by Storybook will not work with later versions of autoprefixer. More details on why that is [can be found here.](https://stackoverflow.com/questions/64057023/error-postcss-plugin-autoprefixer-requires-postcss-8-update-postcss-or-downgra)

Use this:
```
 "autoprefixer": "^9.0.0",
```

## Update your Storybook settings
In order for storybook to load and display quasar components correctly, we need to update our `.storybook/preview.js` file with the following:

```js
import '@quasar/extras/roboto-font/roboto-font.css';
// These are optional
import '@quasar/extras/material-icons/material-icons.css';
import '@quasar/extras/animate/fadeInUp.css';
import '@quasar/extras/animate/fadeOutDown.css';
import '@quasar/extras/animate/fadeInRight.css';
import '@quasar/extras/animate/fadeOutRight.css';

// Loads the quasar styles and registers quasar functionality with storybook
import 'quasar/dist/quasar.css';
import { app } from '@storybook/vue3';
import { Quasar } from 'quasar';

// This is also where you would setup things such as pinia for storybook

app.use(Quasar, {});

export const parameters = {
  actions: { argTypesRegex: '^on[A-Z].*' },
  controls: {
    matchers: {
      color: /(background|color)$/i,
      date: /Date$/,
    },
  },
};

```



## Run storybook
Use `yarn storybook` to run storybook. It should open your browser at `localhost:6006/` by default.

## Test Quasar Components
Replace the code in your `src/stories/Button.vue` with 

```vue
<template>
  <q-btn color="primary">Something</q-btn>
</template>
```

You should now see your quasar button in storybook.


![Quasar button in storybook screenshot](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vekirg3huyj5em4f8hld.png)

## Conclusion
That's it! You can now begin to use storybook with Vue3 + Vite + Quasar
AWS Service Qouta : Increasing Web Distribution qouta / limit.
Tags: aws, cloudfront, serviceqouta
Published: 2022-04-07 08:08:48

## Steps
- go to [AWS Service Qouta](https://us-east-1.console.aws.amazon.com/servicequotas/)
- click Aws services on the left side or [this](https://us-east-1.console.aws.amazon.com/servicequotas/home/services) link.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/inimffeu9mn9b41zx6nu.png)
  
- search for `Amazon CloudFront`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bttyi0xvi5ij3thq1781.png)
 
- search for `Web distributions per AWS account`

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eaqgne1mho1qut4spnk7.png)
 
-  Click `Request qouta increase`
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/hcm92t3p8iasgs5dc3b7.png)
PHP 8 Named Parameters
Tags: php, exception, video, errors
Published: 2022-04-07 08:04:28

{% youtube hs_w6GHkSfw %}


Today, let's learn how to use efficiently the [named parameters](https://www.php.net/manual/en/functions.arguments.php#functions.named-arguments) with PHP 8.0 to write cleaner and more readable code 🚀 

👉 My book about good coding practices at https://github.com/pH-7/GoodJsCode
Setting up Continuous Integration With Git and Jenkins
Tags: jenkins, git, ci
Published: 2022-04-07 07:40:02

In this post, I'll show you how to use git and Jenkins to set up a continuous integration system for a Github repository.

Ascertaining that all of your installation procedures have been completed.

## Step 1 
Once Jenkins has been successfully started, we can check to see if the local Jenkins server is running on the machine by going to the following URL in your browser `http://localhost:8080/` . 

## Step 2 
- Go to your Githubpage and navigate to "Settings".

- Click on the "Developer settings" menu and then on `Personal access tokens` in the settings screen. 

- On the "Personal access tokens" tab, click the "Generate new token" button, enter the necessary information, and then click the "Generate token" button.

## Step 3 
Navigate to 'Manage Jenkins' and then to 'Manage Plugins' in Jenkins Dashboard.

![Jenkins Git Plugins](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/36d4wdwhf65htmypvp0k.png)
 
Make sure all these git plugins are installed properly.

## Step 4 
Select the `New Item` option in Jenkins Dashboard. Enter a name for the item and select `Freestyle project`. When you press OK, you will be taken to the configuration page.

## Step 5 
In **General** tab click on Github project and enter your github project url.

![Github](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sm5mh4lj5im1cfqkw3kx.png)

## Step 6 
You must now specify the git url of your specified github project in **Source Code Management**.And in the Credentials field, enter your github's `person access token`.

**Note :** Private repositories require an Access token, whereas public repositories do not.

![GIT](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bxa6o5heuyn4dgd2ou29.png)

## Step 7 
Now, in Build triggers, let's specify our trigger so that Jenkins will run a job for each github commit.Select `Poll SCM` and schedule the time span according to your wish by refering CRON Jobs.

![Poll SCM](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cyniufegypz8lymivgx7.png)
 
## Step 8 [Optional]
In Build Environment tab lets execute shell commands.

![Build environment](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/dcpazc1pezfynpi0opkz.png)

Once your configuration is over click on `Save` button.

After each commit on your github repository, your build will now be triggered automatically. 

![build log](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/sqicv8noiw3teqngo8cv.png)
 
![console output](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kbdw1nzo2bfv0gazj0fp.png)
 
I hope you find this information useful!
378. Kth Smallest Element in a Sorted Matrix
Tags: cpp, programming, 100daysofcode, algorithms
Published: 2022-04-07 08:03:30

# Description

Given an `n x n` `matrix` where each of the rows and columns is sorted in ascending order, return *the* `kth` *smallest element in the matrix*.

Note that it is the `kth` smallest element **in the sorted order**, not the `kth` **distinct** element.

You must find a solution with a memory complexity better than `O(n2)`.

## Example 1:

```
Input: matrix = [[1,5,9],[10,11,13],[12,13,15]], k = 8
Output: 13
Explanation: The elements in the matrix are [1,5,9,10,11,12,13,13,15], and the 8th smallest number is 13
```

## Example 2:

```
Input: matrix = [[-5]], k = 1
Output: -5
```

## Constraints:

- `n == matrix.length == matrix[i].length`
- `1 <= n <= 300`
- `109 <= matrix[i][j] <= 109`
- All the rows and columns of `matrix` are **guaranteed** to be sorted in **non-decreasing order**.
- `1 <= k <= n2`

---

# Solutions

## Solution 1

### Intuition

1. binary search this number
2. search how many numbers are smaller than the mid, and count them as `cnt`
3. if `cnt` ≥ k, means the `kth` smallest number is in left part, so `r = mid` , else search the right part

### Code

```cpp
class Solution {
public:
    int kthSmallest(vector<vector<int>>& matrix, int k) {
        int n = matrix.size();
        int l = matrix[0][0], r = matrix[n - 1][n - 1], mid;

        while (l < r) {
            int mid = l + r >> 1;
            int col = n - 1, cnt = 0;
            for (int row = 0; row < n; row++) {
                while (col >= 0 && matrix[row][col] > mid) col--;
                cnt += col + 1;
            }
            if (cnt >= k)
                r = mid;
            else
                l = mid + 1;
        }

        return l;
    }
};
```

### Complexity

- Time: O(n)
- Space: O(1)
It's A Match
Tags: github, developer, coding, platform
Published: 2022-04-07 08:02:23

It's a match! 🔥 [CodeSpread](https://codespread.io) matches clients looking for the perfect developer, with the ideal developer who has a great track record on GitHub



![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/059cylbytpk4mm12vebt.jpg)
Today's Daily Dose of Programming Humor
Tags: jokes, dailydeveloperjokes, watercooler
Published: 2022-04-07 08:00:00

---
title: "Today's Daily Dose of Programming Humor"
description: "Check out today's daily developer joke! (a project by Fred Adams at xtrp.io)"
series: "Daily Developer Jokes"
published: true
tags: #jokes, #dailydeveloperjokes, #watercooler
---

Hi there! Here's today's Daily Developer Joke. We hope you enjoy it; it's a good one.

![Joke Image](https://private.xtrp.io/projects/DailyDeveloperJokes/public_image_server/images/5e1258e3bbae5.png)

---

For more jokes, and to submit your own joke to get featured, check out the [Daily Developer Jokes Website](https://dailydeveloperjokes.github.io/). We're also open sourced, so feel free to view [our GitHub Profile](https://github.com/dailydeveloperjokes).

### Leave this post a ❤️ if you liked today's joke, and stay tuned for tomorrow's joke too!

_This joke comes from [Dad-Jokes GitHub Repo by Wes Bos](https://github.com/wesbos/dad-jokes) (thank you!), whose owner has given me permission to use this joke with credit._

<!--
Joke text:
___Q:___ Why don't bachelors like Git?

___A:___ Because they are afraid to commit.
 -->
Force HTML5 Form Validation using Button on Click in jQuery
Tags: html, jquery, javascript, php
Published: 2022-04-07 07:54:02

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/jquery/force-html5-form-validation-using-button-on-click-in-jquery

In this post, I will share a solution on how to Force HTML5 Form Validation without submitting the form in jQuery. If you need to use the button on click when submitting the form and want to use the native form validation.


To check if a form field is valid.

```php
$('#form')[0].checkValidity(); // returns true/false
```

To report the form errors.

```php
$("#form")[0].reportValidity()
```
Example 1:

```php
$('#button').on('click', function() {
   if($("#form")[0].checkValidity()) {
      alert('success');
   } else {
      $("#form")[0].reportValidity()
   }
});
```

Example 2:

```php
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>

	<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
	<script type="text/javascript">
		$(document).ready(function() {
			
			$("#button").on("click", function() {
				
				if($("#form")[0].checkValidity()) {
					var title = $("#form [name='title']").val();

					// ajax here
				} else {
					$("#form")[0].reportValidity();
				}

				
			});
		})
	</script>
</head>
<body>

	<form id="form" method="post">
		<input type="text" name="title" placeholder="title" required>
		<button type="button" id="button">Submit</button>
	</form>

</body>
</html>
```

I hope my examples will help you on how to force HTML 5 form validation on button click. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/jquery/force-html5-form-validation-using-button-on-click-in-jquery if you want to download this code.

Happy coding :)
Create Controller in Laravel 8 using Artisan Command
Tags: laravel, php, mysql, tutorial
Published: 2022-04-07 07:50:54

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/laravel/create-controller-in-laravel-8-using-artisan-command

In this post, I will show to you an example of how to create a controller in the Laravel 8 application. I will give you an example that will easier to you to follow and understand. The best in Laravel is because we can just hit a command to generate a controller for your Laravel application.

 

After following this tutorial for creating a controller in Laravel using the artisan command surely it will be easier for you from now on. Laravel artisan can run in any operating system like Ubuntu terminal and CMD in Windows.

 

## What is Controller in Laravel Application?

The controller will handle all requests from the user end then process the business logic and communicate with the Model then display the result to the View.

 

## Create Controller in Laravel

In the Laravel application we just simply run a command to create a controller in Laravel 8. See the following example below:

```php
php artisan make:controller EmployeesController
```

![command-shell](https://ecn-storage.s3.us-west-2.amazonaws.com/articles/command-shell-2021-09-27-212205-9n0ORGTVExx980.webp?ctm=1632748947)


Now you will see the generated controller to your Controllers directory:


**app/Http/Controllers/EmployeesController.php**

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EmployeesController extends Controller
{
    //
}
```

## Create a Controller Route
Because we have our controller created already we will next create our route and connect it to our controller.

 

**routes/web.php**

```php
Route::get('/employees', 'EmployeesController@index')->name('employees.index');
```

## Setup Controller Index Method

Now let's create our index() method for our created controller.

```php
<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class EmployeesController extends Controller
{
    public function index() 
    {
        return view('employees.index');
    }
}

```

## Setup View for our Controller
Next, we will create our view for our controller. First, create **employees** folder then create **index.blade.php.**

 

**resources/views/employees/index.blade.php**

```html
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Emplooyes Lists</title>
</head>
<body>
	<h1>Employees</h1>
</body>
</html>
```

Now you have the basic idea of how to create a controller, routes, and view. I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/laravel/create-controller-in-laravel-8-using-artisan-command if you want to download this code.

Happy coding :)
❮ ZI Annex - Test ❯
Tags: zsh, hacktoberfest, contributorswanted, devops
Published: 2022-04-07 07:46:47

<div align="center">
  <a href="https://github.com/z-shell/zi">
  <img src="https://raw.githubusercontent.com/z-shell/zi/main/docs/images/logo.png" alt="Logo" width="60" height="60"><img/></a>
</div>

<div align="center">

[z.digitalclouds.dev](https://z.digitalclouds.dev) | [GitHub](https://github.com/z-shell/) | [Discussions](https://github.com/orgs/z-shell/discussions/) | [Localize](https://crowdin.digitalclouds.dev)

</div>

---

Run tests after install, setup your own or propose missing.
With always go like pro.

<div align="center"><table style="width:100%;height:auto">
<tr><td align="center">
❮ ZI ❯ Annex - Test </h2><h3> 
<p>An annex that runs tests via make or zunit</p> If any found – after installing and updating
a plugin or snippet. </h3>
</td></tr>
<tr><td align="center">
<img style="width:90%;height:auto" src="https://user-images.githubusercontent.com/59910950/162143845-c44ead50-b21a-46c0-8372-18325eb1f33a.gif" alt="Preview" />
</td></tr></table></div>

### Install

Zunit install if missing:

```zsh
zi for @zunit
```

```zsh
zi light z-shell/z-a-test
```

## Configuration

To run the tests in a verbose mode, issue:

```zsh
zstyle :zi:annex:test quiet 0
```

before installing or updating the plugin. To skip tests for a single plugin,
add `notest` ice:

```zsh
zi ice notest
zi load …
```

### Examples

Example activation in the default quiet mode:

![z-a-test activation](https://raw.githubusercontent.com/z-shell/z-a-test/main/docs/images/z-p-test-1.png)

Example activation in non-quiet mode:

![z-a-test activation](https://raw.githubusercontent.com/z-shell/z-a-test/main/docs/images/z-p-test-2.png)
How To Extract Content Between Keywords using PHP Regex
Tags: php, phpregex, mysql, tutorial
Published: 2022-04-07 07:46:13

Originally posted @ https://codeanddeploy.com visit and download the sample code: https://codeanddeploy.com/blog/php/how-to-extract-content-between-keywords-using-php-regex

The **preg_match_all()** defines performing a global regular expression match. This PHP function **preg_match_all()** is the best way to extract content in multiple results between the keyword from start to end. This is useful if you are building a shortcode-based template like email templates and if you want to generate the shortcodes from the template content. In my previous post, I created a class that [generate shortcodes but the code was long](https://codeanddeploy.com/blog/php/php-keyword-or-shortcode-extractor-class).

 

So now I will share how to do it, to shorten my code using **preg_match_all()**.

```php
<?php
$content = 'The {first_name} quick brown {last_name} fox jumps over the lazy dog {email}.';

preg_match_all('/{(.*?)}/s', $content, $match);

print_r($match);

?>
```

Result:

```
Array
(
    [0] => Array
        (
            [0] => {first_name}
            [1] => {last_name}
            [2] => {email}
        )

    [1] => Array
        (
            [0] => first_name
            [1] => last_name
            [2] => email
        )

)
```

Extract and returns the content including the start and end keyword.

```php
print_r($match[0]);
```


Result:


```
Array
(
    [0] => {first_name}
    [1] => {last_name}
    [2] => {email}
)
```

Extract and returns the content between shortcodes.

```php
print_r($match[1]);
```

Result:

```
Array
(
    [0] => first_name
    [1] => last_name
    [2] => email
)
```

I hope this tutorial can help you. Kindly visit here https://codeanddeploy.com/blog/php/how-to-extract-content-between-keywords-using-php-regex if you want to download this code.

Happy coding :)
Data Science
Tags: datascience
Published: 2022-04-07 07:44:36

Data science is concerned that integrates human moxie, programming knowledge, and mathematical and statistical knowledge to extract expressive wisdom from [data](https://insideaiml.com/course-details/Data-Science-Master-Program-in-coimbatore). Businesses' demand for data scientists is growing as the number of data they generate and compile grows. As a result, there is a significant demand for people with data science experience or training, making it difficult for some businesses to fill job vacancies.
Syncfusion Community License Offer
Tags: news, pr, productivity
Published: 2022-04-07 07:38:29

I want to share information about a nice offer from Syncfusion for .NET, JavaScript, iOS, Android, and Xamarin developers. 
They offer a community license for small companies for free. 
You can check it out on their [website](https://www.syncfusion.com/products/communitylicense)
I'm using their Xamarin Forms and .NET controls and can confirm that they are as powerful as the tools from their competitors.