teleren/devto huggingface dataset:
How to setup react, tailwind, webpack and typescript in a monorepo
Tags: typescript, webpack, react, monorepo
Published: 2021-10-20 04:20:39

[Previously](https://dev.to/ynwd/how-to-setup-react-shared-components-in-monorepo-with-tailwind-webpack-and-npm-workspace-570n), we have created configuration for react, tailwind, webpack in monorepo using npm workspaces. 

Now we will use typescript.

```
.
├── babel.config.js
├── package.json
├── postcss.config.js
├── src
│   ├── Button.tsx
│   ├── Header.tsx
│   ├── index.css
│   └── index.ts
├── tailwind.config.js
├── tsconfig.json
└── webpack.config.js
```

Clone previous repo: https://github.com/ynwd/monorepo/tree/tailwind

install all typescript-react related packages
```
npm i typescript ts-loader @types/react-dom @types/react @babel/preset-typescript -D
```

```
npx tsc --init
```

update ts config
```json
{
  "compilerOptions": {
    "target": "es5",
    "jsx": "react",
    "module": "commonjs",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

```

update babel config
```js
module.exports = {
    presets: [
        "@babel/preset-react",
        "@babel/preset-env",
        "@babel/preset-typescript"
    ],
};
```

update webpack config
```js
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
const devMode = process.env.NODE_ENV !== "production"

module.exports = {
    mode: devMode ? "development" : "production",
    entry: {
        index: { import: "./src/index.ts" }
    },
    resolve: {
        extensions: ['.tsx', '.ts', '.js'],
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/,
                exclude: /node_modules/,
                loader: "babel-loader",
            },
            {
                test: /\.(ts|tsx)$/,
                exclude: /node_modules/,
                loader: "ts-loader",
            },
            {
                test: /\.css$/i,
                use: [
                    devMode ? "style-loader" : MiniCssExtractPlugin.loader,
                    'css-loader',
                    "postcss-loader",
                ],
            },
        ],
    },
    output: {
        filename: "components.bundle.min.js",
        library: 'fstrComponents',
        libraryTarget: 'umd',
        clean: true
    },
    plugins: [].concat(devMode ? [] : [new MiniCssExtractPlugin()]),
}
```

update tailwind config
```js
module.exports = {
  purge: [
    './src/**/*.tsx',
  ],
  darkMode: false, // or 'media' or 'class'
  theme: {
    extend: {},
  },
  variants: {},
  plugins: [],
}

```

rename component extension
- `Button.js` to `Button.tsx`
- `Header.js` to `Header.tsx`
- `index.js` to `index.ts`

compile
```
npm run build -w @fstr/component
```

Final source code: https://github.com/ynwd/monorepo/tree/typescript
Java Backend Roadmap
Tags: java, beginners, programming
Published: 2021-10-20 04:17:15

### Hi You all,

I created a perfect Java Roadmap for Backend Engineering. 


![Part-I](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wqib9qzmnql855obokbo.png)

![Part-II](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5lj6r1uaz67ojfgsv854.png)

![Part-III](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2op60lpumczpsoxuzngn.png)

![Part-IV](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3zzv9szvm1m637nu06xj.png)

[Download Roadmap](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nh0r03an88whzc6onzcp.png)

Also check my [Spring Learning Path](https://dev.to/livesamarthgupta/spring-learning-plan-8p9) to learn Spring.
[Follow Me Here](https://guptasamarth.netlify.app/)
Best Ecommerce Website Template With HTML, CSS without Bootstrap
Tags: webdev, html, css, netlify
Published: 2021-10-20 04:09:44

Hello Everyone
Today I have a very stylish, responsive and lightweight ecommerce website template.

Here is the link
https://mrbookseller.ml

Here is the link of Github Repo
https://github.com/ProHarshit/Mr.Bookseller.git
Please tell how did you like it.
Thank you
Array.prototype.map()
Published: 2021-10-20 03:55:56

###This is a tutorial on map() methods with explanation and examples.

On MDN, the map() method is described as:
> "to create a new array populated with the results of calling a >provided function on every element in the calling array." 

Basically, it applies the following steps to the original array:
1. iterate through every element in the array
2. apply call back function to each element
3. return the result to a new array without changing the original array. 

Let's look at an example:

First let's create a new array with planet name strings:
```ruby
const solarSystem = ['Mercury', 'Venus', 'Earth', 'Mars', 'Jupiter', 'Saturn', 'Uranus', 'Neptune', 'Pluto'];
```
And then, we apply .map() method to our solarSystem array to add the string "This is " in front of every element in the array, and save the new array as solarSystem2. This function could be shortened into arrow array.
```ruby
 const solarSystem2 = solarSystem.map(function(planet){
 return "This is " + planet;
 });
```
When you print these array 
```ruby
console.log(solarSystem);
console.log(solarSystem2);
```
You will get:
```ruby
[
  'Mercury', 'Venus',
  'Earth',   'Mars',
  'Jupiter', 'Saturn',
  'Uranus',  'Neptune',
  'Pluto'
]
[
  'This is Mercury',
  'This is Venus',
  'This is Earth',
  'This is Mars',
  'This is Jupiter',
  'This is Saturn',
  'This is Uranus',
  'This is Pluto'
]
```
The call back function and the element input to the call back function are compulsory parameters, let's now look at other parameters that you could use in this method:

parameter "index":
```ruby
const solarSystem3 = solarSystem.map(function(planet, index){
    return "This is " + planet + " number " + (index+1);
});
```


parameter "array":
```ruby
const solarSystem4 = solarSystem.map(function(planet, index, originalArray){
    return "This is " + planet + " and the next planet is " + originalArray[index + 1];
});
```
PHP preg_match to validate US and Ethiopian Phone Numbers
Tags: php, programming, beginners, tutorial
Published: 2021-10-20 03:50:03

HTML5 forms support different input types. And one of them is the number type. You can use it to force users to put in only numbers.

The problem is when you want to let your users format the phone number. For example, by letting them put dash character. In those cases, we can use the character classes and range limiters we saw above to validated formatted US and Ethiopian phone numbers like this:-

```
$phoneNumber = "0911-223344";
preg_match('/[0-9]{4}-[0-9]{6}/', $phoneNumber);//Simple regex to validate ethiopian phone number
preg_match("/[0-9]{3}-[0-9]{3}-[0-9]{4}/", $phoneNumber); // Simple regex to validate US phone number
```

I can simplify this pattern by replacing the character class [0-9] with a simple \d. Which simply indicates any digits.

### Validating Ethiopian phone number with a country code

But, what if users put dash in between numbers. Or if they start by +251, which is the country code.

To accomplish this task, we need to introduce ourselves to sub patterns.

Sub patterns enable us to group and validate a small group of our main pattern. For instance, we can group the start of our phone number to be +251 or any country code. Therefore, in our particular case we need the start to be either +251 or 09. Which, to my knowledge are the common phone number patterns Ethiopia.

Now, my pattern would start with ^+251, which means start with +251. But to match the plus sign (+) I need to escape it because + has it’s own meaning in regex. Escaping special characters is possible using the backward slash (\).

Hence my start will be ^\+251. Which will validate if phone numbers actuall start with +251. However, they might start with 09 too. To include that we will have to introduce ourselves to the alternate character, which is the pipe (|).

Using the pipe, the start of my phone number will be ^((\+251|0)\d{3}). This will force my patterns to start with either +251 or 0 followed by a digit of size 3.

After the initial +251 or 0 followed by 3 digit numbers, we usually have a dash followed by 6 digit number. So I can do (^(\+251|0)\d{3})-?\d{6}.

Note: the ? right after the dash is to indicate optional characters. That means to mean, it can appear either 0 or 1 times.

Finally our Ethiopian phone number validation regex looks like this.

```
$phoneNumber = "+251911-223344";
preg_match('/((^(\+251|0)\d{3})-?\d{6})/');//Simple regex to validate ethiopian phone number
```
[casdrop.py]: Casting media files in python to Chromecast from a desktop folder
Tags: python, linux, 100daysofcode, productivity
Published: 2021-10-20 03:39:51

&nbsp;
**[REPO_LINK.GIT](https://github.com/munazhe/casdrop.py)**
&nbsp;
&nbsp;

## Things you need before we get started: 

A. You know your TV `(CASDROP_TV_NAME)` and Speaker `(CASDROP_SPKR_NAME)` name. 

B. Your machine is running python `~> 3.9.7` (not mandatory, but you need at least python 3).

C. Install all dependencies to run this program: `pip install requirements.txt`

&nbsp;
&nbsp;

## Once that's done...

**Step1**. Open a new terminal on your unix/linux based computer 
> **NOTE**: make sure you're running in a BASH environment

&nbsp;
**Step2**. Open `params.sh` and edit the `<>` with your own values

&nbsp;
**Step3**. Run the following command in your terminal:
	***ONLY RUN THIS ONCE!***

	`bash params.sh #you may need to run this command with elevated privileges`

&nbsp;
**Step4**. Do the following:

	1. Start a simple HTTP server:
		`python -m SimpleHTTPServer`

	2. Start the casting service: 
		`python3 casdrop.py`

	3. Drop a file in your watch `CASDROP_WATCH_FOLDER` folder

	**At this point, depending on which file (.mp4 || .mp3) you uploaded it should start streaming on the device.**


&nbsp;
&nbsp;
### Reference: 
- `CASDROP_WATCH_FOLDER` => A folder you drop files in, to cast to device(s)

- `CASDROP_SERVER_URL` => The `IP` address you get from `SimpleHTTPServer` a.k.a `(http://<ip_address>)`

- `CASDROP_SPKR_NAME` and CASDROP_TV_NAME=> Displayed name of devices with (Ussually shown in cast menu on YouTube or Spotify mobile app)

### Here's my sample `param.sh` file
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/suis1utat4vqnlhl42cv.png)


&nbsp;
### Features / Suggestions / TODO:

Currently you can drop a `.mp3` or `.mp4` which will cast with zero problem. However, I plan on adding more features down 
the road...

**Let me know in the comments if you'd like me to make a video explaining this is more detail**
Divtober Day 19: Nostalgia
Tags: codepen, divtober, css, art
Published: 2021-10-20 03:09:43

---
title: Divtober Day 19: Nostalgia
description: A cartoon of a cassette tape coded in CSS with a single HTML element
published: true
tags: codepen,divtober,css,art
series: divtober
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8pcu4nkthlyvlxbl377s.png
---

Day 19 of divtober is "Nostalgia", so I drew a cassette tape with sweet-sweet music recorded directly from the radio (because why not?) All with CSS and a single HTML element.

{% codepen https://codepen.io/alvaromontoro/pen/eYEzPrb %}

And again, I recorded the process (that took around 80-90 minutes) and shared it as a 5-minute time-lapse on Youtube:

{% youtube 0zaKHAa439A %}

I may upload the actual video (instead of the time-lapse), but it doesn't have sound, so there's no explanation of how I did the things... but you can see how I try different things, fail, and then try a different approach (I need to check that `:first-line` and why it wasn't working).
How To Integrate Paypal Payment Gateway In Laravel 8
Tags: laravel, php, paypal, payment
Published: 2021-10-20 03:05:07

In this tutorial we will see how to integrate paypal payment gateway in laravel 8, payment integatetion is very useful and important features in e-commerce website. I will explain you laravel 8 paypal payment integration example. You can also use paypal payment gateway integration in larave 8, laravel 7 and laravel 6.

PayPal is an American company operating a worldwide online payments system that supports online money transfers and serves as an electronic alternative to traditional paper methods like checks and money orders.

So, let's start to implements laravel 8 paypal payment integration.

```
Step 1 : Install New Laravel Application
Step 2 : Create Database Configuration
Step 3 : Configuration PHP File of Paypal Integration
Step 4 : Add Routes in web.php
Step 5 : Create PaypalController
Step 6 : Create Blade file For View
```

---

> **_[Read More : How To Integrate Paypal Payment Gateway In Laravel 8](https://techsolutionstuff.com/post/how-to-integrate-paypal-payment-gateway-in-laravel-8)_**
Customize Blazor TreeGrid Columns Using Templates
Tags: blazor, webdev, dotnet, csharp
Published: 2021-10-20 02:52:54

Learn how to customize column headers and data in a Syncfusion [Blazor TreeGrid](https://www.syncfusion.com/blazor-components/blazor-tree-grid) using templates.

Download an example from GitHub: https://bit.ly/3asIcZb 

Refer to the following documentation to work with columns in the Blazor TreeGrid component: https://bit.ly/30fh51H 

Check out this online example of the column template in the Blazor TreeGrid component: https://bit.ly/3oXaTWj 

Check out this online example of the column header template in the Blazor TreeGrid component: https://bit.ly/3mK7BTP

[Blazor TreeGrid - High-performance Component](https://www.syncfusion.com/blazor-components/blazor-tree-grid)
- Load large amounts of data by dynamically loading child data on demand.
- Include flexible UI interactions like expanding and collapsing parent records, dialog editing, and more.
- Attractive UI appearance with built-in themes such as fabric, bootstrap, etc.

{% youtube PnM11O-BPVU %}
What Is a Singleton in Java!
Tags: java, oop, webdev
Published: 2021-10-20 02:22:39

In OOP(Object Oriented Programming), a singleton class is a class that can have only one object at a time. After first time, if we try to instantiate the Singleton class, the new variable also points to the first instance created.

Key to remember while defining Singleton class:
1. Make constructor as private.
2. Write a static method that has return type object of this singleton class.
Knowledge of Merging Dependabot 
Tags: rails, webdev, programming
Published: 2021-10-20 02:22:05

I continue to merge `dependabot` for several years, so blog some knowledge.

## Introduction

There are three kinds of libraries, framework, normal library, development tool.

I tried to read all CHANGE-LOG and code diff for all pull request generated by `dependabot`.

My goal is understanding trends what kind of changes are made.

## Diff List

Here is a list of the frequently changed.

* add test
* add `CI` configuration
* update documents
* fix naming
* refactor code and fix arguments
* add new feature

My project uses major libraries, so there is a lot of conservative chanages and security fix.
`refactor code and fix arguments` will create a bug, so you should read CHANGE-LOG carefully.

### In Framework Case

Like `Rails`, `Laravel`.

We MUST update after reading RELEASE-NOTE.

When minor updates (e.g.: `ver5.1` → `ver5.2`), we don't need to be nervous.

When major updates (e.g.: `ver5.5` → `ver6`), it needs to verify enough in a staging environment.
Nevertheless, there are a few bugs, so we need to verify and verify and verify.

It's easy to verify if there are static analysis or test codes.

### In Normal Case

Like `Faraday`, `Devise`.

If there are no breaking changes, you can merge immediately.
In my case, there are no problems.

It's the same as framework case, you should add static analysis or test codes.

### In Development Tool

Like `Rubocop`, `EsLint`.

You can merge without thinking.
We should add `CI` configuration tightly.

In `Rubocop` case, config format change frequently, so we should update regularly.

## Conclusion

It's important to do the obvious thing.
It's hard to update library version, so we should do regularly.
pug maze v2.0
Tags: codepen
Published: 2021-10-20 01:40:43

<p>This is a Pure HTML+CSS game written with preprocessor PUG to dynamically rebuild the map, and reduce the amount of code. This is the 2 version of the game. 
<br>
The first version is available here: <a href="https://codepen.io/Crook/pen/hwptv" target="_blank">https://codepen.io/Crook/pen/hwptv</a>
<br>
Version 1.2 is available here: <a href="https://codepen.io/Crook/pen/yObber" target="_blank">https://codepen.io/Crook/pen/yObber</a></p>

<p>I will be glad to any of your comments </p>

{% codepen https://codepen.io/Crook/pen/Vwzawrd %}
Smartlist - the sophisticated home inventory app
Published: 2021-10-20 01:16:40

Check out my latest app, Smartlist!

Smartlist is a free home inventory app that lets you keep track of what you have in your home, and helps you save money. Access your inventory on any device!

Key features: 
* Keep track of your home's inventory
* Recipe generator
* Shopping List
* Todo List
* Finance Tracker
* Encrypted items, database, tasks, everything!
* Home maintenance tips
* Custom rooms, categories, and more.
* Share items via WhatsApp, Email, or via a shareable link!
* Notes and Document storage
* Smartlist Events
  * Collaborate on events together
* API integration
* **Unlimited items!!!***
* **Completely free** - No premium plans!
* **Dorm mode** - For college students


https://smartlist.ga

Want to view the source code? 
https://github.com/Smartlist-App/Smartlist

:heart: Please star it if you like my code

If you have any feature requests, please let me know in the comments
Git clang-format json support issue
Tags: git, clangformat, json, tools
Published: 2021-10-19 19:46:48

With a recent update of my Slackware distro *llvm* package was updated to version *13.0*. I've noticed that when `git clang-format`, which I use to keep the code formatting clean in my projects, suddenly started to complain when I have modified a *json* file:

```
Configuration file(s) do(es) not support Json: /home/user/workspace/myproject/.clang-format, /home/user/workspace/.clang-format
error: `clang-format -lines=2:3 -lines=52:52 path/to/file.json` failed
```


That made me unable to commit (`git clang-format` is a required step in my *pre-commit hook*. I needed to get my work done so I've went for a quick fix (without disabling the pre-commit hook) which was to filter-out the files that are touched by `git clang-format`. By default the tool parses all modified files (those tracked by git). The help section (`git clang-format -h`) says it can be changed with *clangFormat.extensions* setting. Used that option to ignore the jsons (global `~/.gitconfig` or local `.git/config` in the project repository):

```
[clangFormat]
    extensions = "cpp,h,hpp,hxx"
```


Once I was done with my urgent task I've tried another way of fixing the issue. The clang-format 13.0 is able to format the json files but it has failed to do so because my `.clang-format` specified the settings for *C++* files only. Solution was to add a section for the json documents:

```
---
Language: Json
BasedOnStyle: llvm
```


That not only removes the error message but also lets *clang-format* to take care of my json files formatting. It's not a perfect solution though as I would like to make it work for any supported file type, but couldn't figure out how to achieve that.
SDKMan, adding unlisted versions
Tags: sdkman, java
Published: 2021-10-20 00:56:30

---
title: SDKMan, adding unlisted versions
published: true
description: 
tags: sdkman, java
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s33ypif2r1hiwijx7bps.png
---
[SDKMan](https://sdkman.io) is a fantastic tool, I believe no one has doubts! Since I installed it, my concerns with [Gradle](https://gradle.org/), [Java](https://www.java.com), [Kotlin](https://kotlinlang.org/) versions, among other **SDKs** ended... As a **JVM** developer, just not needing to adjust the infamous **JAVA_HOME**, **M2_HOME** and others, have already turned my days into happier days.

Something, however, gave me a certain headache that I would like to share with you:

I recently started implementing a project with **Java 12**. At first, I thought, just install this version with  **SDKMan**, however, I was mistaken... the version didn't appear on any of the vendors when I ran `sdk list java`.

![sdk list java](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9qf6aue571gdigtgwrh6.png)

I still don't understand the reason for this gap, but I started to think about alternatives... I could install the version **16** and make use of the **Java** retrocompatibility, however, this started to look as a work around.

I even thought about installing the pre-**SDKMan**, however, I was wondering how the **Java** version management at two distinct points on my operating system, in addition to possible changes to my POM to avoid [compilation version errors](https://stackoverflow.com/questions/9170832/list-of-java-class-file-format-major-version-numbers). After some research I found [post on StackOverflow](https://stackoverflow.com/questions/55809928/sdkman-is-missing-a-specific-java-version), a solution that I thought was more elegant.:

> It seems that downloading the missing version, then unpacking to: `~/.sdkman/candidates/java/` then renaming the extracted directory solves the problem.

With that, I continued using only 1 manager of **Java** in my operational system, taking advantage of the facilities of **SDKMan**! **SDKMan** is life!!!
Best Dev merch
Published: 2021-10-20 00:43:15


## 1: https://my-store-c1971c.creator-spring.com/listing/dev-look
Btw this post ain't sponsored 😂. I just thought y'all could check them out and u comment ur favorite.
> ![https://my-store-c1971c.creator-spring.com/listing/dev-look](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/usaqeihyamzcz1kut44r.png)
> ![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nn35l6xbbxpn84uu6zvy.png)
code every day with me
Tags: javascript, 100daysofcode, programming, algorithms
Published: 2021-10-20 00:36:29

**--DAY 2--**
Hi, I am going to make #100DaysOfCode Challenge.Everyday I will try solve 1 problem from leetcode or hackerrank. Hope you can go with me until end.
**This is 2nd day:**
-Problem: Staircase
-Detail: https://www.hackerrank.com/challenges/staircase/problem
-My solution (javascript):
```
function staircase(n) {
    let line=[];
    line.length=n;
    line.fill(' ');
    for(let i=0;i<n;i++){
        line.shift();
        line.push('#');
        console.log(line.join(''));
    }
}
```
--> *If you have better solution or any question, please comment below. I will appreciate.*