teleren/devto huggingface dataset:
Javascript: Searching a String containing parenthesis
Tags: javascript
Published: 2022-09-27 05:00:19

Hi,
I am using a string containing brackets as an argument to search. I am getting following error:
Using network 'development'.

`

> SyntaxError: Invalid regular expression: /send(/: Unterminated group
> at String.search (<anonymous>)
> at module.exports (/home/zulfi/Truffle_programs/js_search_opcode_js/search_sendb.js:15:22)
> at Object.exec (/home/zulfi/.nvm/versions/node/v10.23.3/lib/node_modules/truffle/build/webpack:/packages/require/require.js:127:1)
> at Promise (internal/util.js:274:30)
> at new Promise (<anonymous>)
> at bound exec (internal/util.js:273:12)
> at Object.run (/home/zulfi/.nvm/versions/node/v10.23.3/lib/node_modules/truffle/build/webpack:/packages/core/lib/commands/exec.js:80:1)
> at process._tickCallback (internal/process/next_tick.js:68:7)
`

My code is:

```
`var assert = require('assert');
const path = require("path");
const fs = require("fs");

module.exports = async function(callback)
{
try{
   let keyWordStr1 = "address1.send(400)"
   let keyWordStr2 = "address2.transfer(500)"
   let commandS="send("
   let commandT="transfer("
   let sendStr = ""
   let transferStr = ""

   if(keyWordStr1.search(commandS) >= 0){
      sendStr = keyWordStr1
      console.log(sendStr)
   }
   if(keyWordStr2.search(commandT) >= 0){
      transferStr = keyWordStr[k]
      console.log(transferStr)
   }
}//try
catch (error) {
console.log(error)
}
callback();


}
`
```

Somebody please guide me.

Zulfi.
MY JOURNEY INTO TECH
Published: 2022-09-26 16:24:56

I’m Ighoruemuse Esther Ovuokereye ,student at CodeLabBySkillHub .Before I gained admission into CodeLab .I wanted to acquire tech knowledge which will assist me in achieving my goals in life. My goal in life is to become a world class software developer Which I must start making a reality.
Firstly, after checking through my phone for a place to learn tech ,I found one close to me and luckily it was a scholarship program through a friend of mine. I went for the tech fair which was held by CodeLabBySkillHub also I loved what I saw in the tech fair. I was made to realize much benefits that are associated only if I have tech skill. So after that I got the admission form for CodeLabBySkillHub then I was called for the first interview which I passed ,then I was called on phone for another phone
interview which I passed .I was very excited and eager to know what tech fully entails.
My journey started .The first day we had to introduce our selves in the class both the students
and teachers then we were introduce to the programing language which we will be learning .we were
brief on how the programing journey will look like to us .we were told it’s not going to be easy but CodeLabBySkillHub as a tech institution will give us their full support and encouragement .Truly it wasn’t easy as said during my second week into tech I felt like giving up on my dreams ,programming was looking so different and hard to comprehend but I kept on pushing .I could remember my first line of code console.log(“hello world”).I learned the basics of different programming language like
JavaScript,HTML,CSS.Then I also learned the basics of design thinking,Ui/Ux using the figma tool a website where we can create designs.I also learned how to become a transformational leader in the society and what it entails .
However it has been an awesome experience right from the day I started till now .There is a tremendous improvement in my life ,now I am writing more than 100 lines of code in HTML and I have
moved to learning a new programming language called “typescript” .The exposure to tech had made me to realize that with the skills I will eventually in tech ,I will be able to change my world and make it a better place by solving people problem and making life easier than we could ever imagine.
Laravel 8 Image Upload Validation
Tags: laravel, laravel8, validation, imageupload
Published: 2022-09-27 04:57:58

In this article, we will see how to validate laravel 8 image upload validation. In image upload validation you can add validation using the validate() function of laravel and also you can add multiple image uploads with validation in laravel 8. In laravel 8 many validations are available for image validation, form validation, URL validation, string validation, and much more.

In laravel 8, you can validate an image using the file under validation must be an image (jpg, jpeg, png, bmp, gif, svg, or webp). Also, you can required image validation, size of the image, dimension of the image, etc.

So, Let's, see how to validate the image in laravel 8 and how to validate multiple image uploads in laravel.

```
public function imageValidation(Request $request)
{
    $request->validate([
        'image' => 'required|image|mimes:jpg,png,jpeg|max:2048|dimensions:min_width=100,min_height=100,max_width=500,max_height=500',
    ]);
}
```
Install Tailwind CSS in Preact
Published: 2022-09-27 04:49:36

In this section we will install & setup Preact +  Typescript with Tailwind CSS 3.  For this section we will use create-tw it will help to CLI to scaffold tailwindcss-ready projects. create-tw help to create simple ready template for Preact + typescript with tailwind css 3.

### Create Tailwind CSS Project with Preact
Create tailwind-app with preact using npx:

```sh
npx create-tw@latest
# OR
npx create-tw@latest <project-name> --template <id>
```
Create tailwind-app with preact using yarn:
```sh
yarn create tw
# OR
yearn create tw <project-name> --template <id>
```
Select preact project.
```react
? Project name tailwind-preact
? App type 
 Next.js (create-next-app) 
 Vanilla (create-vite) 
 React (create-vite) 
 Vue (create-vite) 
 Astro (create-astro) 
 Svelte Kit (create-svelte) 
❯ Preact (create-vite) 
 Solid (degit solidjs/templates/js)
```
Select typescript.
```react
? What language will your project be written in? (Use arrow keys)
❯ TypeScript 
 JavaScript 
```
Select code style.
```react
? Which dependencies would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ prettier
 ◯ clsx
 ◯ tailwind-merge
```

Select tailwind plugin for your requirement.
```react
? Which plugins would you like to include? (Press <space> to select, <a> to toggle all, <i> to invert selection, and <enter> to proceed)
❯◯ @tailwindcss/typography
 ◯ @tailwindcss/forms
 ◯ @tailwindcss/aspect-ratio
 ◯ @tailwindcss/line-clamp
 ◯ daisyui
 ◯ prettier-plugin-tailwindcss 
```

Move to project and run the server
```sh
cd tailwind-preact
npm run dev
```

_src/app.tsx_
```react
export function App() {
  return (
    <header className="flex flex-col h-screen p-20 text-white bg-gradient-to-b from-gray-900 to-slate-800">
      <h1 className="mb-2 text-5xl font-bold text-center">Create Tailwind with Preact</h1>
      <p className="mb-6 text-xl text-center">
        If you like this project, consider giving it a star on GitHub!
      </p>
      <div className="flex flex-row items-center justify-center gap-4">
        <a
          className="font-bold text-indigo-300 github-button"
          href="https://github.com/andrejjurkin/create-tailwind-app"
          data-color-scheme="no-preference: dark; light: dark; dark: dark;"
          data-icon="octicon-star"
          data-size="large"
          data-show-count="true"
          aria-label="Star andrejjurkin/create-tailwind-app on GitHub"
        >
          Star
        </a>
        <a
          className="font-bold text-indigo-300 github-button"
          href="https://github.com/andrejjurkin/create-tailwind-app/discussions"
          data-color-scheme="no-preference: dark; light: dark; dark: dark;"
          data-icon="octicon-comment-discussion"
          data-size="large"
          aria-label="Discuss andrejjurkin/create-tailwind-app on GitHub"
        >
          Discuss
        </a>
      </div>
    </header>
  );
}
```
![install tailwind css with preact](https://demo.larainfo.com/screenshot/tailwindcss/tailwind-css-with-preact.png)
Time Needed to Buy Tickets
Tags: javascript, leetcode
Published: 2022-09-27 04:24:03

```js
/**
 * @param {number[]} tickets
 * @param {number} k
 * @return {number}
 */
var timeRequiredToBuy = function(tickets, k) {
    let time = 0;
    
    while (tickets[k] > 0) {
        for (let i = 0; i < tickets.length; i++) {
            if (tickets[k] === 0) break;
            if (tickets[i] <= 0) continue;
            tickets[i]--;
            time++;
        }
    }
    
    return time;
};

```
Baseball Game
Tags: javascript, leetcode
Published: 2022-09-27 04:19:45

```js
/**
 * @param {string[]} operations
 * @return {number}
 */
var calPoints = function(operations) {
    let arr = [];
    let result = 0;
    for (let i of operations) {
        if (i === "D") {
            let lastElement = parseInt(arr[arr.length - 1]);
            let double = lastElement * 2;
            arr.push(double);
            result += double;
        }

        else if (i === "C") {
            let popElement = arr.pop();
            result -= popElement;
        }
        else if (i === "+") {
            let firstLastElement = parseInt(arr[arr.length - 1]);
            let secondLastElement = parseInt(arr[arr.length - 2]);
            arr.push(firstLastElement + secondLastElement);
            result += (firstLastElement + secondLastElement);
        }
        else {
            let elementInt = parseInt(i);
            arr.push(elementInt);
            result += elementInt;
        }
    }
    return result;
};

```
Clickable Area of a Button
Tags: react, html, css, javascript
Published: 2022-09-27 04:12:43

I'm updating my Portfolio right now, [click](https://www.ayakoyokoe.me/).

When I had it checked, I was told that the structure or the tags for each button was not the same and that some areas were not clickable. 

Visually, buttons look exactly like buttons when paddings and a border are used or when they're named `<Button>` if we use styled-components. 

This is very fundamental, but I'll share how to code a clickable button in React.

There are two kinds of buttons: one is "just a button that doesn't do anything itself until we add something to it", and the other is a submit button in a form tag that by default submits the form. I wanted to add a link feature to a button, so I start off with this type of button.



**Button with Link**

Here's the wrong code.

```
        <div>
          <a href="#">
            <div>Click</div>
          </a>
        </div>
```

I'm using `<div>` instead of `<button>` inside `<a>`. This looks just fine.


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


The green part is padding I added.


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


This is an anchor part.


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



BUT, only this light blue part is clickable. Nothing happens when clicking the white part around it.


Here's the correct code.

```
        <div className="button">
          <a href="#">
            <button className="label">Click</button>
          </a>
        </div>
```

First, it looks like this.


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


So, delete padding from "button" (css), and add `padding`, `border: none`, and `cursor: pointer` to "label".

Now, it looks like this.


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



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


Since the green padding part is now `<button>`, the whole area is clickable.

So, simply put, **Wrap `<button>` with `<a>`**.

We can replace `<a>` with `<Link>` (react-router-dom), and it works just fine.


**Button in a Form**

```
      <form>
        <button type="submit">
          Submit
        </button>
      </form>
```


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


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


We just add some styling to the `<button>` and the whole area is clickable.


Here's the recap:

- There are two kinds of buttons: "just" a button and a button in a form.
- When adding a link to a button, wrap `<button>` with `<a>`.
- In `<form>`, just add `<button>` and whatever feature we want to do to `<form>` such as  `<form onSubmit={handleSubmit}>`.
web3 domain for sell
Tags: ens, web3, eth, ensdomain
Published: 2022-09-27 04:04:37

hello do you know about web3 
mint of 5 digits number is end and you will see the flor
 price is 1 #ETH  above you can invest in some rare digits number like that 240250.eth 120220.eth 515153.eth
invest now in
https://opensea.io/ahmed_abdelzaher?tab=collected #ensdomains #Web3
LLD
Published: 2022-09-27 04:01:04

https://www.youtube.com/watch?v=kk6QkWxz5jM&list=PL6W8uoQQ2c61X_9e6Net0WdYZidm7zooW
https://www.interviewbit.com/low-level-design-interview-questions/
https://refactoring.guru/design-patterns/java
https://www.tutorialspoint.com/design_pattern/design_pattern_interview_questions.htm

The Low Level Design Roadmap

1) Watch this video to 𝐮𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝 𝐲𝐨𝐮𝐫 𝐜𝐮𝐫𝐫𝐞𝐧𝐭 𝐥𝐞𝐯𝐞𝐥. 

https://lnkd.in/gHyM2PvQ

2) Read up on 𝐃𝐞𝐬𝐢𝐠𝐧 𝐏𝐚𝐭𝐭𝐞𝐫𝐧𝐬 and 𝐒𝐎𝐋𝐈𝐃 𝐩𝐫𝐢𝐧𝐜𝐢𝐩𝐥𝐞𝐬

-- Refactoring Guru https://lnkd.in/gdU_pKKZ

-- Tutorials point https://lnkd.in/gqBgJxGa

3) Start going through 𝐚𝐜𝐭𝐮𝐚𝐥 𝐞𝐱𝐚𝐦𝐩𝐥𝐞𝐬 to learn application

-- Solution to standard problems https://lnkd.in/gwNKdTCH

-- Questions https://lnkd.in/gbtZETVP

4) 𝐘𝐨𝐮𝐭𝐮𝐛𝐞 𝐫𝐞𝐬𝐨𝐮𝐫𝐜𝐞𝐬

-- Bala G https://lnkd.in/ginzJWVh

-- Gaurav Sen https://lnkd.in/gSiCTYUE

-- CodeMate https://lnkd.in/gebK5XjC

-- Soumyajit Bhattacharyay https://lnkd.in/gzrvggjN

5) 𝐀𝐬𝐬𝐞𝐬𝐬 𝐲𝐨𝐮𝐫𝐬𝐞𝐥𝐟

-- Question 1 https://lnkd.in/gzmbyxgS

-- Question 2 https://lnkd.in/gemDfSNh
838. Leetcode Solution in cpp
Tags: cpp
Published: 2022-09-27 03:50:14

```
class Solution {
 public:
  string pushDominoes(string dominoes) {
    int L = -1;
    int R = -1;

    for (int i = 0; i <= dominoes.length(); ++i)
      if (i == dominoes.length() || dominoes[i] == 'R') {
        if (L < R)
          while (R < i)
            dominoes[R++] = 'R';
        R = i;
      } else if (dominoes[i] == 'L') {
        if (R < L || L == -1 && R == -1) {
          if (L == -1 && R == -1)
            ++L;
          while (L < i)
            dominoes[L++] = 'L';
        } else {
          int l = R + 1;
          int r = i - 1;
          while (l < r) {
            dominoes[l++] = 'R';
            dominoes[r--] = 'L';
          }
        }
        L = i;
      }

    return dominoes;
  }
};

```
#leetcode
#challenge
Here is the link for the problem:
https://leetcode.com/problems/push-dominoes/
Operator Overloading Example1
Tags: cpp, oop
Published: 2022-09-27 03:33:01

Easy way to understand oops is to code it, run it, debug it. Repeat it till you get something new every iteration.

The below program is self explanatory and easy to understand.

_Leave comment if you find hard to understand and I will be there to help (Let me know what error you get)_

Follow step by step, first code for '+' operator and see the results and next other operator one by one. 

Complex Class

```
#include <bits/stdc++.h>
using namespace std;

class Complex{
        int a, b;
    public:
        Complex(){
            //default constructor
        }

        Complex(int x, int y){
            a=x;
            b=y;
        }

        void display();
        //Binary operator
        Complex operator+(Complex);
        Complex operator-(Complex);
        Complex operator*(Complex);

        //unary operator
        void operator++();
        void operator--();
        Complex operator++(int);

};

void Complex::display(){
    cout<<a<<" + i"<<b<<endl;
}



int main(){

    Complex c1(3, 4), c2(5, 6), c3, c4, c5, c6, c7;
    c1.display();
    c2.display();

    c3 = c1 + c2;
    c3.display();

    c4 = c2 - c1;
    c4.display();

    c5 = c1 * c2;
    c5.display();

    ++c1;
    c1.display();

    --c2;
    c2.display();

    c6 = c5;
    c6.display();
    ++c5;
    c6.display();
    c5.display();

    c7=c4++;
    c4.display();
    c7.display();

    return 0;
}

Complex Complex::operator+(Complex c2){

    Complex c;
    c.a = this->a + c2.a;
    c.b = this->b + c2.b;

    return c;
}

Complex Complex::operator-(Complex c2){

    Complex c;
    c.a = this->a - c2.a;
    c.b = this->b - c2.b;
    
    return c;
} 

Complex Complex::operator*(Complex c2){

    Complex c;
    c.a = this->a * c2.a - this->b * c2.b;
    c.b = this->a * c2.b + this->b * c2.a;

    return c;
}

void Complex::operator++(){

    this->a = this->a + 1;
    this->b = this->b + 1;
}

void Complex::operator--(){

    this->a = this->a - 1;
    this->b = this->b - 1;
}

Complex Complex::operator++(int){
    Complex c;
    c.a = this->a;
    c.b = this->b;

    this->a = this->a + 1;
    this->b = this->b + 1;

    return c;
}

```
Can anyone provide an animation on the Node.js Event Loop?
Tags: help, javascript, node, webdev
Published: 2022-09-27 03:27:49


I watched a video on JS event loops and read the Node.js documentation on event loop, timers and process.nextTick(). Although I feel like I understood most of it, I'm still confused on some aspects like the difference between process.nextTick() and setImmediate().

I was hoping someone could provide an animation on it like the one for the JS event loop in this video: https://youtu.be/8aGhZQkoFbQ?t=1048
Tutorial membuat VLAN di Packet Tracer
Tags: cisco
Published: 2022-09-27 01:55:56



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

**Vlan** adalah pengelompokan LAN agar meningkatkan keamanan dan mengurangi latensi jaringan. Vlan ini diprogram menggunakan software di **Switch**.

Kemudian untuk masing-masing PC client harus di konfigurasi IP seperti dibawah ini :

* PC 0 : ip address 192.168.1.2 subnet 255.255.255.0
* PC 1 : ip address 192.168.1.3 subnet 255.255.255.0
* PC 2 : ip address 192.168.1.4 subnet 255.255.255.0
* PC 3 : ip address 192.168.1.5 subnet 255.255.255.0

![setting ip static pc0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0jcofr1cvbyptn346xxv.png)


![setting ip static pc1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/axr3zn1mnmsztgeiehf1.png)


![setting ip static pc2](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zcfm8na4uul06dveg50d.png)

![setting ip static pc3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/00gl69zzvylljx4eatk2.png)

 
Setelah di setting IP statis dari masing masing PC maka konfigurasi switch dengan menggunakan terminal.

Disini saya membuat 2 vlan dengan nama _lab1_ dan _lab2_

![Membuat vlan di switch](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c8qo907jnyta1umlrn4i.png)

Kemudian setting juga di ethernet switch nya setiap port dengan vlan sesuai keinginan disini saya port fast ethernet 0 dan 1 di vlan 1 dan sisanya di vlan 2

![config vlan pc0](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p6xv81lww9b7b1wnmfoc.png)

![config vlan pc1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xioiebiwey8lha6ksga6.png)


![config vlan pc2 dan pc3](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/53u9m3kihdz5gu8pk22m.png)
LI.FI
Published: 2022-09-27 01:31:12

[LI.FI](https://li.fi) is a cross-chain bridge and DEX aggregation protocol. Ultimately, we're building a multi-chain DeFi middleware which can be used to build cross-chain/multi-chain applications.

Fintech companies like Neobanks, Custodians, Banking-as-a-Service can easily build on top of this and drastically reduce their go to market time.
Reflect for Lab03
Published: 2022-09-27 01:15:32

Git Repo: [SSGifier](https://github.com/liutng/SSGifier)
Issues: [Issue 10](https://github.com/liutng/SSGifier/issues/10), [Issue 11](https://github.com/liutng/SSGifier/issues/11)

This week I added language support to SSGifier to enable its function to add the lang attribute to <html> of each file it generated, also I added a series of exit codes to reflect whether or not the program has encountered an error after running. Before implementing this week’s content, I first respectively created 2 issues to explain what were I going to do and I created 2 branches named with the issue numbers to indicate which branch is for which issue fix, and then I implemented each new feature in each branch. After having it implemented, I merged my code back to the main branch and resolved some conflicts between these 2 branches and the main branch.
The problems I met in this week’s update are mainly branch related. First, switching different branches from time to time is very forgettable which means that I always forgot which branch were I at and had the code implemented at the wrong branch. Second, was that it was difficult to solve conflict issues because while I was merging the code I had to remember which line of code I had edited, otherwise I could accidentally flush those functions that I have already implemented.
Next time when I work between branches I should always make clear which branch I am currently at, even install some plugins to my terminal to indicate it. Also, to alleviate the hardship of merging conflict code, I should always make comment on my code so that I will know which part I have edited.
How to remove accent marks in a string using vanilla Javascript
Tags: javascript, webdev, tutorial, beginners
Published: 2022-09-27 01:09:15

I﻿n JS is quite of easy to replace chars by using `str.replace` for example, but, what happens when you want to remove accent marks?

I'm a native Spanish speaker, so this could be helpful if you need to handle some Spanish words.

T﻿his tiny post will build an example on how to make a **slug from a Spanish sentences strings**.

## The code

```js
// Input example
const spanishSentences = [
  "teléfono",
  "árbol",
  "colibrí",
  "cómpramelo",
  "Mandó una carta",
  "Qué grande es ese perro"
];

// Function definition
function createSlug(input){
  return input
    .toLowerCase()
    .trim()
    .replace(/[\s_-]+/g, "-")
    .replace(/^-+|-+$/g, "")
    .normalize("NFD")
    .replace(/[\u0300-\u036f]/g, "");
}

// Usage
const output = spanishSentences.map(createSlug);
console.log(output);
// Output:
/*
[
  "telefono", 
  "arbol", 
  "colibri", 
  "compramelo", 
  "mando-una-carta", 
  "que-grande-es-ese-perro"
]
*/
```

You can test it in this [JS Bin](https://jsbin.com/pokofigeva/edit?html,js,console,output)

And that's it, happy coding!
3D Hover Animated Button
Tags: codepen
Published: 2022-09-27 01:08:41

<p>In this Pen I use a <span> tag so I can separate the "text layer" from the "background layer" later using css, I used it in combination with the :hover selector used to select elements when you mouse over them. 
The "text layer" is animated by the :hover:nth-child(2) in which (2) refers to the second <span> tag (that contains the text).</span></span></p>

{% codepen https://codepen.io/cristianjgc952/pen/JjvMRbm %}