teleren/devto huggingface dataset:
Lumos Labs is looking for Substrate mentors for their upcoming program
Tags: polkadot, blockchain, blockchainjob
Published: 2022-02-18 12:45:47

Hi Everyone, 
I am writing on behalf of Lumos Labs. 
We are looking for Substrate mentors for our upcoming program. 

Remuneration for the mentorship program is 4000 USD 
Here’s the job description:: [](https://docs.google.com/document/d/1r0N3lCxOfn82gTAheyRWb4QtgBr-sWKEPV-TPfw7okc/edit)


Link to apply: [](https://tripetto.app/run/OK8A5YVC5P)

If you have any queries, please write to me at vinita@lumoslabs.co
Changing MySQL Default Port number
Tags: mysql, tutorial, beginners, xampp
Published: 2022-02-18 12:42:05

Sometimes, when you install a new application on your server, they may compete/clash with port numbers already been used by other applications.  This may cause your server to slow down, some applications to crash or even servers to crash occasionally.  

One such instance is MySQL crashing periodically after I installed a certain application.  Unfortunately, this application uses port 3306, and it has no method to specify a different port.  MySQL default port is 3306.  And it has good flexibility to change its port.  

So let us see how.

## Step 1 Edit the MySQL my.ini

Go to [path-to-xampp-folder]/mysql/bin/ and open the file my.ini.  Or from Xampp, click on Config at the MySQL Module.

Locate the line(s) containing '3306' no. and change it to '3390' or something else and save. Note to change both the server and client parts as shown in the figure below.


![Lets change our port to 3390](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o0t42egil4jw3mtzg8yp.png)

Please make sure the new port number is not used by any other service.  You can use 'Netstat' to check all used ports on your system.

![NetStat displaying the port used by diff apps](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p1swve57n0r23qky8y8e.png)

## Step 2 Edit the phpMyAdmin file 

We need to change the way phpMyAdmin connects to MySQL so that it knows that it has to use the new port number instead of the default one.  Failing to do so, will cause the following error whenever you try to connect to MySQL.

![phpMyAdmin failed to connect error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ofc6w9jfniwcmlh5b960.png)

From xampp control panel, click on the config for the apache server, and select the phpMyAdmin.ini and make the following changes as shown below

![phpMyAdmin](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2wkiroobd9t5azs8gfri.png)

## Step 3 Edit all website connections to use the new port

Edit all configuration files in your webserver that connect to this MySQL instance with the new port number.

Failing to do this will cause the web apps to fail.

![MySQL Connection error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xhkv78fz84hz5dscac93.png)

Based on how your app connects to the MySQL server, either in the config file or a function, ensure that it knows that we are not connecting via the default port anymore.

In my case, my App had a function connecting to the MySQL

![add the port number](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gj22kjhfogckn8tq99zm.png)

And everything is back working!!!

![App now connected to the new port](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/1f55umtjbxwb1yp963y0.png)

Conclusion:
If you ever have to change the port of your MySQL server, ensure that you configure it both on servers, client connections, phpMyAdmin, and the connecting app(s).
How to handle PWA and API in the same domain (origin)?
Published: 2022-02-18 12:10:21

In our brand new project at Evionica I've come across an interesting challenge - how to exclude certain paths from the ServiceWorker.

In deployment architecture we assume that all API microservices along with the authentication service are in the same path as the project. For eg. __project.evionica.com__ is an entry point for our frontend application, so OAuth2 endpoints are in __project.evionica.com/rest/auth/__. 

This causes certain problems with PWA. Why?
Because when frontend is rendered, the service worker will be downloaded & installed very quickly. Let's assume that you enter `index.vue` (which is the very first view in the app) and are directly redirected to OAuth2 Login page. In such case the service worker will be already running (or at least downloaded in the best case scenario). That means that
every other navigation item in `window.location.origin` will be handled by the ServiceWorker. This causes a lot of problems when you are using OAuth2 flow in such "URL pattern" architecture.

## How to solve this? 

OAuth2 URLs should be excluded from URLs being handled by the ServiceWorker. Our ServiceWorker, like most of them, uses Workbox under the hood to easily register assets, manage preloading etc. Workbox allows customizing such behaviour by allowing to define `denylist` - an array with RegExp-defined paths which should be handled in the classic, standard way by the browser. The `denylist` is defined by calling `registerRoute` function. Since we are using `generateSW` option, we do not manually create & maintain the Service Worker file. The VitePWA plugin & workbox does it for us.

We can still specify how VitePWA creates our service worker file. In our `vite.config.ts` file, in plugins section, in `VitePWA()` config object we need to declare `workbox` key and pass such values:

```ts
export default defineConfig(({command, mode}) => {
    return {
        plugins: [
            VitePWA({
                workbox: {
                    navigateFallbackDenylist: [/.*\/rest\/auth(\/.*)?/],
                },
            }),
        ],
    }
})
```

In the array under the `navigateFallbackDenylist` key, you can define as many RegExp objects as you need to exclude them
from the Service Worker's "jurisdiction".
⚡Two Ways to Merge Arrays in JavaScript
Tags: javascript, webdev, react, programming
Published: 2022-02-18 11:55:05

Hi  Everyone 👋 
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/35of0rmnckpm9shyixuo.jpeg)

 I am here to discuss with you Spread operator "..." And .Concat() 
 method in JavaScript.

⚡Here are 2 ways to combine your arrays and return a NEW array. I 
 like using the Spread operator, but if you need older Browser 
 support you can go through .Concat().

⚡Spread is fantastic when you know beforehand that you're dealing 
 with arrays. But what happens when the source is something else.

✍️Lets walk through an example,
 const isArray = [1,2,3];
 const notArray = 'random';

 And we want this output : [1, 2, 3, 'random']

  Here using spread operator the output comes 
  😱 [ 1, 2, 3, 'r', 'a', 'n', 'd', 'o', 'm' ]

  And with .concat it works fantastic
  ✅  [ 1, 2, 3, 'random' ]

Note !! 
So here's the quick rule. If you know you're dealing with arrays, use spread. But if you might be dealing with the possibility with a non-array, then use Concat to merge an array. 👍
Create automatic models in Angular using OpenAPI 
Tags: webdev, programming, angular, openapi
Published: 2022-02-18 11:41:41

Hello I have been trying to create models under a particular directory using OpenAPI but I have been seeing "HttpContext" error all the time saying, "**../../node_modules/@angular/common/http"' has no exported member 'HttpContext'**.

Could someone be so kind and please help me a way out here. I have tried several ways to do that, but it was of no help to me. 
links followed Online: 
(https://netbasal.com/new-in-angular-v12-passing-context-to-http-interceptors-308a1ca2f3dd)
(https://openapi-generator.tech/docs/usage/)
(https://openapi-generator.tech/docs/generators/typescript-angular/)
You should know this about Node JS 
Published: 2022-02-18 11:35:17

**What is Nodejs? Difference between Nodejs and javaScript**
Node js is a Javascript runtime and open-source server environment. Node js run a web application outside the client browser. Node js non-blocking means asynchronous. 
Javascript is a programming language other side nodejs is a javascript runtime. Javascript is mostly used for client-side and nodejs is used to server-side of a web application. Node.js is a very powerful JavaScript-based platform built on Google Chrome's JavaScript V8 Engine. It is used to develop I/O intensive web applications like video streaming sites, single-page applications, and other web applications. Node.js is open source, completely free, and used by thousands of developers around the world.

 **
CRUD OPERATION**
C for Create
R For Read 
D for Delete 
U for Update  
This CRUD operation is used to read , write, update and delete data from database from UI. CRUD stands for create, read, update and delete. These are the four basic functions of persistent storage. Also, each letter in the acronym can refer to all functions executed in relational database applications and mapped to a standard HTTP method, SQL statement or DDS operation.
Json Web Token(JWT)
JWT token used for secure API .
JWT token has three parts. they are below
header
payload
signature
Header
Header consist of two parts. the type of the token, which is JWT, and the signing algorithm being used, such as HMAC SHA256 or RSA.
Payload
Second part of the token is payload. It contains claims.
There are three types of claims: registered, public, and private claims.
Signature: 
To create the signature part you have to take the encoded header, the encoded payload, a secret, the algorithm specified in the header, and sign that.

**Benefits of using Node and Mongo with  React project**
Because Node, MongoDB, React has close relation with Javascript. MongoDB is designed to store JSON data natively, JSON is a javascript object notation that represents data on javascript object syntax. React is a javascript library and nodejs is a javascript run time. For this reason, we use NODE MONGO with REACT.

**What are the differences between SQL and NoSQL database**
SQL is a relational database and NoSQL is a non-relational database. 
SQL databases are vertically scalable and NoSQL are horizontally scalable.
SQL database is table-based other hand NoSQL is document-based.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ihgxzelfh8x5cfm9tamo.jpeg)
Responsive Personal Portfolio Website Using HTML CSS And JavaScript
Tags: html, css, javascript, webdev
Published: 2022-02-18 11:29:55

## You can get the template from  t he link proivided in the description of the video.

### Technologies Used :-
+ HTML
+ CSS
+ JavaScript

### Libraries and Assets Used :- 
+ Fontawesome
+ Scroll Reveal

## To learn how to create this template watch the complete video. You can get the template for free from the link provided in the description of the video.

{% youtube Uu8MJhtbQnY %}

## Please do like the video and subscribe to the channel. It helps and motivates me to create more content like this.
MpvPlayer online video platform on Affiliate World: expanding borders
Published: 2022-02-18 11:29:54

Soon, from February 28 to March 1, there will be an event that all the world's marketers and entrepreneurs are waiting for - Affiliate World.

The MpvPlayer video platform will visit it – that's the main news of today. Affiliate World is one of the most anticipated events in the field of e-commerce, which takes place in Dubai in late February-early March. The two-day conference will bring together more than 200 advertisers at the same time.

Visitors will not only have the opportunity to personally introduce themselves to advertisers, they will also have access to network traffic sources. During these days, expert materials (more than 20 hours in total) developed by the most authoritative and effective employees will be presented. Moreover, after the speeches of the speakers, the stories of the companies, the owners will have the opportunity to meet with the speakers.
Skipping such an event would cause huge harm to any IT company or media giant, therefore [https://mpvplayer.com/](https://mpvplayer.com) does not lose this opportunity.

The purpose of the visit is to discuss new ideas (professional speakers will help with this), and then implement them into the platform. Multiple connections with advertisers, both existing and potential, with the help of invested capital, will help the video platform develop to unprecedented proportions – which is undoubtedly great news.

Webmasters interested in hosting will have the opportunity to personally get acquainted and discuss interesting aspects, plans and ways of development with the platform.

So, let's go through the points of the conference once again:
1.      Presentation by leading professional speakers.
2.      Authoritative and relevant lectures (more than 20 hours).
3.      The possibility of personal close contact with advertisers and webmasters.
4.      The opportunity to increase capital at the expense of depositors.
 
MpvPlayer online video platform strives to participate in all advanced conferences and meetings, thereby improving its functionality.
How to design the architecture of your next web app?
Tags: programming, webdev, node, react
Published: 2022-02-18 11:26:10

So you've got a new contract about developing a brand new web application, your client has provided the technical requirements to you. You have also chosen the development stack for you future programming masterpiece: e.g. React for the client, Node.js for the server, perhaps a DBMS etc.

Now your task is simple: **not to kill the web application before it is even born** by avoiding mistakes in critical design decisions.

So where to start this process?

This first thing you must understand at this point is that the primary object your web application works with is **data**.

The data usually has its predefined structure. For example, if you are developing a new e-commerce application, you know that there will be products, cart items, orders and so on, and each product, for example, will have its title, price, description, image list etc.

This is how you usually define the structure of your data, and this is where it gets split into **entities**.

Thus, defining data entities is the first step of designing the architecture of your future application, since an entity within the app defines:

- a module on the React client;
- a module on the Node.js server;
- a table/collection in the database;
- an end-to-end test (manual or automated).

All these compose a logical **module** (or feature) of your application. So now, when you have defined your first module, you know where and how to start the development process.

It is also worth noting that data entities (and respectively the modules) may depend on each other. Therefore, defining **dependencies** between modules (and avoiding circular dependencies, of course) will help you to prioritize development tasks. And if you have a team of developers, this will also help you to split the tasks between them.

Hope this article was useful for you. Give a like to this post and hit that "Follow" button!

Don't stop coding, don't stop growing!
給 PHP 開發者的 Docker 文件（五）
Tags: php, docker
Published: 2022-02-18 11:20:13

（本文譯自〈[Docker for PHP Developers](https://www.newmediacampaigns.com/blog/docker-for-php-developers)〉）

## 應用（Application）設定

至今我們的應用所需的 Docker 映像（image）都有了，該開始把 Docker 映像實例化（instantiate）出 Docker 容器（container）了。首先在專案跟目錄下建立如下的目錄結構。

```
src/
  public/
    index.html
```

src/ 目錄放我們的應用源碼、src/public/ 作為我們的網頁伺服器的網站根目錄、index.html 檔案內容打「`Hello World!`」。

我們的應用將會透過 docker.dev 的域名（domain）存取，你應當把這個域名對映（map）到你的 Docker 母機（host）的 IP 位址，假設你是用裝在 Linux 內的原生的 Docker 的話，那麼就是你自己電腦的 IP 位址；如果你是用 Boot2Docker 的話，可以執行 Bash 指令 `boot2docker ip` 來找出你的 Docker 母機的 IP 位址。在此先假設你的 Docker 母機 IP 位址為 192.168.59.103，要把 docker.dev 域名對映到 192.168.59.103 這組 IP 位址的話，在你的本地電腦內的 /etc/hosts 檔案最後加入下面這一行：

```
192.168.59.103    docker.dev
```

（待續…）
Mittwald: Tolle Werte, starkes WordPress Hosting, hohe Preise
Tags: wordpress, hosting
Published: 2022-02-18 12:23:33

---
title: Mittwald: Tolle Werte, starkes WordPress Hosting, hohe Preise
published: true
date: 2022-02-18 11:09:11 UTC
tags: WordPress,hosting
canonical_url: https://bloggerpilot.com/mittwald/
---

![Mittwald - Hosting für Agenturen und Freelancer](https://bloggerpilot.com/wp-content/uploads/2022/01/mittwald-desktop.png)

Der Hoster Mittwald dürfte dem ein oder anderen bereits ein...

Der Original-Artikel erschien auf [Mittwald: Tolle Werte, starkes WordPress Hosting, hohe Preise](https://bloggerpilot.com/mittwald/).
Some Important Topics of React
Published: 2022-02-18 11:03:48

**JSX**

JSX stands for javascript XML. It looks like HTML but it comes with the full power of Javascript.JSX allows us to write HTML code in React and convert HTML code into React elements. we don’t need to use appendChild() or ceateELement() method to put HTML element in DOM.


**Virtual Dom & React**
We can say virtual DOM is a copy of a Browser DOM. Virtual DOM is a virtual representation that is saved in memory and linked up with Browser DOM with ReactDOM. 
The main difference between virtual DOM and Real DOM is that real DOM directly changes the content of the screen and virtual does not change any screen content it only changes the specific content of REAL DOM. Virtual DOM wastes less memory But Real DOM waste too much memory. Manipulation in REAL DOM is very expensive because it reloads the whole DOM But Virtual DOM manipulation is less expensive.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ef3ujfkvmd1r5is3sc9e.jpg)
**Props and State**
state is mutable other hand Props are immutable 
Props are used to pass data other hand state is managed within components.
Props are read-only and state can be changed
state does not make components reusable and Props make components reusable.

**React Hooks**
Custom hook allows us to reuse functions made by me. When I need a function that will be reused in many components, then we can get those functions extracting custom hooks. Here reusable function and hook are made by me not built-in hook or function. 
example: 
import react from “react”
const useCustomHook =()=>{
Here we can create our common function for component re use
}
export default useCustomHook

**Optimize a react js application**

Use state where necessary: We should avoid state passing down as a prop.
By Memoizing and Preventing unnecessary rendering
By using React.memo() or useMemo() we can avoid unnecessary re-rendering
By avoiding rendering all images at once we can also optimize react app . this called lazy loading images
How to create animated page transitions in React
Tags: react, javascript, webdev, tutorial
Published: 2022-02-18 11:03:20

With Frame Motion it is very easy to create animations between components and page transitions when using React Router. Simple syntax and Framer Motion takes care of the rest. In this video we will have a look at just how easy it is to create hover animations and animated page transitions on route change.

{% youtube d9hrZ82-yTM %}
Hashtags Generator
Tags: webdev, beginners, programming, php
Published: 2022-02-18 10:50:00

I have created a hashtags generator that generates hashtags based on your keyword.

To do it uses curl to scrape sites that are already providing the best hashtags for that keyword because if you see who is going to check every single google result for a hashtag. So, i created a site to check all of them in a single page that is called [hashtags generator](https://hashtagsgenerator.net/) 

You can generate hashtags for many sites such Instagram and TikTok using this hashtag generator.

I have created the site on PHP and I have mdb css for the frontend design. I just wanted to share this with the dev community online.
Data Structure Algorithms: Linear Search
Tags: beginners, java, algorithms, programming
Published: 2022-02-18 05:18:40

Data Structures are the programmatic way of storing data for efficient use. In this series, you will get great understanding on Data Structures needed to understand the complexity of enterprise level applications and need of algorithms and data structures. Good understanding of DSA helps address the following problems;

1. Enormous data Search
2. Limited processor speed
3. Handling multiple concurrent requests

#### Content
#### Linear Search
Linear search is a search algorithm where a sequential search is made over all items one by one. Every item is checked and if a match is found then that particular item is returned, otherwise the search continues till the end of the data collection.

#### Algorithm

```
Linear Search (Array A, Value x)  

Step 1: Set i to 1  
Step 2: if i > n then go to step 7  
Step 3: if A[i] = x then go to step 6  
Step 4: Set i to i + 1  
Step 5: Go to Step 2  
Step 6: Print Element x Found at index i and go to step 8  
Step 7: Print element not found  
Step 8: Exit  
```

#### Pseudocode

```
function linear_search (list, value)  

   for each item in the list  
      if match item == value  
         return the item's location  
      end if  
   end for  

end function 
```

#### Source Code
An example can be found [here](https://github.com/Gichure/data-structure-and-algorithms/tree/main/linear-search).
Sentry - Tracing
Tags: development, tracing, programming, debug
Published: 2022-02-18 10:24:31

This is my self documentation from original docs [here](https://sentry.io/for/full-stack/)

Sentry is use for trace performance issues to poor-performing api calls and slow database queries.


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

It can show the list of errors log that you provided in the source code. You can trace it per functions:

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

So you could trace the error easier.

Here is the features that they claim:

- Learn the ins-and-outs of distributed tracing and how it can assist you in monitoring the increasingly complex requirements of full stack applications.

- It shows how developers can trace those pesky performance issues to poor-performing API calls & slow database queries across all your services.

- Trace View and Trace Navigator give you a through line between transactions across all your projects.

- Find the slowest operation or “work” taking place on your service. All without having to click into each trace.

Thanks for reading this post.