teleren/devto huggingface dataset:
Important Regular Expression(REGEX) Patterns For Everyone
Tags: webdev, javascript, programming, beginners
Published: 2023-01-08 11:19:24

**Regex** patterns are beneficial for validation because they allow you to define specific patterns for the data you want to match. In addition, they can be used to check for patterns that are difficult or impossible to check for using other methods. 

However, regex patterns can be challenging to write and debug, so I've picked most of the valid **regex** patterns you can copy and paste into your next project.

## Patterns

**Matching a URL**: `/^((https?|ftp|file):\/\/)?([\da-z\.-]+)\.([a-z\.]{2,6})([\/\w \.-]*)*\/?$/`

**Matching a URL slug**: `/^[a-z0-9-]+$/`

**Matching an email address**: **/^[a-zA-Z0-9.! #$%&'*+/=? ^_`{|}~-]+@[a-zA-Z0-9-]+(?:\. [a-zA-Z0-9-]+)*$/**

**Matching a password (Minimum eight and maximum 10 characters, at least one uppercase letter, one lowercase letter, one number and one special character:)**: `/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[@$!%*?&])[A-Za-z\d@$!%*?&]{8,10}$/`

**Matching an username**: `/^[a-zA-Z0-9_-]{3,16}$/`

**Matchin a date(dd/mm/yyyy)**: `/^(0?[1-9]|[12][0-9]|3[01])([ \/\-])(0?[1-9]|1[012])\2([0-9][0-9][0-9][0-9])(([ -])([0-1]?[0-9]|2[0-3]):[0-5]?[0-9]:[0-5]?[0-9])?$/`

**Matching time in 24 hour format**: `/^([01]?[0-9]|2[0-3]):[0-5][0-9]$/`

**Matching hex color code**: `/^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/`

**Matching a phone number**: `/^\+?(\d.*){3,}$/`

**Matching an ID of Youtube channel**: `/https?:\/\/(www\.)?youtube.com\/channel\/UC([-_a-z0-9]{22})/i`

**Matching IPv4 address**: `/^(?:(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)\.){3}(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)$/`

---

## Conclusion
It's important to note that these regular expressions are just a starting point and may not match every valid URL, email address, or other patterns you want to reach. Therefore, you may need to modify or create regular expressions to meet your needs.
If you want to learn React Native
Tags: tutorial, webdev, programming, reactnative
Published: 2023-01-08 11:05:32

## Perfect React Native 

First of all, thanks for loving and downloading the Ultimate React Frontend Development Roadmap template, if you haven't given it a try below is the link. 

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/66jm5fdtf38gkeptile5.png)
- It's a proper roadmap to learn React from scratch
- Track learning growth using Growth Tracker
- Extensive list of top-notch resources, Youtubers, Blogs, and Website to keep yourself updated 

[Template](https://shreyvijayvargiya.gumroad.com/l/frontend-development-roadmap?layout=profile)

Now it's time to learn React Native. Since react and react-native don't have much difference and anyone who knows react can easily learn react-native.

I did it and developed a mobile app which was downloaded by a  million users, that was quite a project and I've learned a lot.
So I thought to put my professional experience into this single template to help everyone to get a master's in react-native and how to learn react-native from scratch.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nt7v8t56s1nkd10m4jo6.png)

[Get the template](https://shreyvijayvargiya.gumroad.com/l/react-native-roadmap?layout=profile)

**What's inside?**
- Perfect Roadmap to learn React Native
- Growth Tracker to track learning growth
- My Medium Friendly link articles 😁
- Github code repositories of real-world products
- Top-notch resources list including Youtubers, Bloggers and Websites

**🚂 Purpose**
I made this template to provide a proper roadmap to learn to react native with resources and code samples.
- There is no proper place to understand everything from top-to-bottom in react-native, so I made this template
- Proper resources such as Blogs, code samples, YouTubers, and websites in fact all resources to become the master and constant learning of react-native
- This template will certainly help you to learn to react-native from scratch to an advanced level where you can build and deploy apps for production.

**😎 Benefits**
This template will help you in following things
- Roadmap to start your react native mobile app development journey
- List of Code samples, Youtube resources, Udemy courses and - - Blogs to master react-native
- Growth Tracker to track learning growth using well-defined estimated time for each and every concept.

**💁🏼‍♂️ About me**
Hello, I am [Shrey](shreyvijayvargiya.vercel.app), I am an Entrepreneur, Developer, Designer and Writer with 4 years of industry experience. I develop the products, design the interfaces and share the journey with my audience.

## Conclusion
That's it for today, I am certain you will love the template, do read the link to get to know in detail what you will get in the template.

Once you get the template, you will find the instructions in the template itself on how to proceed with the learning.

Until next time, have a good day.
Keep developing
Shrey
[iHateReading](ihatereading.in)
Push and Pull a Docker Image from Docker Hub
Published: 2023-01-08 11:04:38

**<u>Install Docker</u>**

- First you need to have Docker installed on your machine

- To install Docker, you will need to follow the instructions for your specific operating system.

<u>Here are the basic steps for installing Docker on most systems:</u>

- Download the Docker installer from the Docker website: [docker-desktop](https://www.docker.com/products/docker-desktop)

- Run the installer and follow the prompts to install Docker

- Start the Docker application

- Once Docker is running, you can verify the installation by running the following command:

```
docker run hello-world
```


<u>**Sign up/Sign in docker hub**</u>

- To push a Docker image to Docker Hub, you will need to have an account on Docker Hub and be logged in

- Open Docker Application

- Click on 'Sign up'
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5ol77h52tlceqymqfpf0.png)

- It will redirect into 'https://hub.docker.com', If you already have a account it it atomic login and redirect into docker application. Otherwise sign up into docker hub

**<u>Check Docker Image</u>**

- Open terminal and run `docker images`, currently i have one image which is HelloWorld


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

**<u>Push Docker Image into Docker Hub</u>**

- Before you can push an image to Docker Hub, you will need to tag the image with the docker tag command.

- For example, to tag an image with the name "hello-world " and the tag "latest", you can use the following command:

```
docker tag hello-world:latest user_name/hello-world 
```

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bsfhoopflgvkmzwwpi77.png)
- This will add the "latest" tag to the "hello-world " image.

- You can then use the docker push command to push the image to Docker Hub. you can use the following command:

```
docker push user_name/hello-world 
```


<u>**Pull Docker image**</u>

- Go to docker hub

- Your image will store here

- Click on "Public view"

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

- Click 'Public view'

- Copy the link and share your team members to pull the image

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0di77bsfk9lfln6g2iyl.png)
Video - https://www.youtube.com/watch?v=EIHY_CY5J0k
Can you regex this? A 10MB+ regex file of the entire Indonesian internet blocklist!
Tags: regex, performance, challenge, go
Published: 2023-01-08 10:59:26

A while ago we decided to [publish our new gigantic regular expression files](https://reinhart1010.id/blog/2023/01/07/trustpositif-regex/) containing the whole Indonesian internet blocklist with 99.99% accuracy (as tested against the [official one](https://trustpositif.kominfo.go.id)).

Well, why? We’re bored and just want to experiment with graphs. Back to the old days of C, oh wait, it's another Go program!

Our experiments inside a M1 MacBook Air shows that even Go’s default `regexp` library can’t handle this big that we had to switch to [`regexp2`](https://github.com/dlclark/regexp2)—and that still only works for the ~10MB `regex-reversed.txt`, not the larger `regex.txt`.

So now, we have a challenge for you: **can your favorite regular expression library handle this, [14+ MB of pure regex](https://github.com/alterine0101/trustpositif/blob/main/output/regex.txt)?** I’m personally interested with Intel’s [Hyperscan](https://www.intel.com/content/www/us/en/collections/libraries/hyperscan/regular-expression-match.html) engine, optimized for their x86 platform, of course, to see whether they can handle this big.

Because who knows, we accidentally made a regex performance benchmark tool. (#_ )
Some Quick Python Hacks
Tags: python, tips, hacks, productivity
Published: 2023-01-08 10:56:58

Here is a small list of hacks.

> But I am working on a big list of tips and tricks on python. So make sure to stay tuned😀

Here are some quick python hacks:
- Use the built-in help function to learn about the functions and modules you are using. For example, you can type `help(len)` to learn more about the `len `function.
- Use the `dir `function to get a list of all the attributes (including methods and properties) of an object. For example, you can type `dir(str)` to get a list of all the methods that can be called on a string.
- Use the `isinstance `function to check the type of an object. For example, you can use `isinstance(x, str)` to check if x is a string.
- Use the` __doc__` attribute to access the documentation for a function or class. For example, you can type `print(str.__doc__)` to print the documentation for the `str `class.
- Use the `python -m pdb` command to start the interactive debugger, which allows you to execute code one line at a time, inspect variables, and more.

If you like these hacks comment down below. I will happy to know if the blog is helpful for you.
{% embed https://dev.to/fahad_islam/top-50-python-project-ideas-for-2023-468k %}
Serve OS Open ZoomStack (2022-12) through PMTiles
Tags: smartmaps, pmtiles, unvt
Published: 2023-01-08 10:51:13

## Step 1: Download MBTiles
```
curl -o zoomstack.mbtiles -L -C - "https://api.os.uk/downloads/v1/products/OpenZoomstack/downloads?area=GB&format=Vector+Tiles&subformat=%28MBTiles%29&redirect"
```
## Step 2: Convert MBTiles to PMTiles by go-pmtiles
```
pmtiles convert zoomstack.mbtiles zoomstack.pmtiles 
```
`zoomstack.mbtiles` was 2.6GB and `zoomstack.pmtiles` was 2.4GB.
## Step 3: Upload PMTiles file to a server.
I have uploaded it to https://x.optgeo.org/zoomstack.pmtiles. You can specify this URL at https://protomaps.github.io/PMTiles/ to see the view like the following. (Hint: Great Britain is around 50N in latitude and 0E in longitude.)

![OS ZoomStack in PMTiles](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/88rg1cg1bh5u88scissd.jpg)

## Step 4: Create a demo site.
https://x.optgeo.org/zoomstack/

![demo site](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/r9mrswqwo7topyqfe2zj.jpg)

## Attribution
- Map: Contains OS data © Crown copyright and database right 2022
- Cover image: https://www.metmuseum.org/art/collection/search/266439
With The Form Input element, I create a LOREM IPSUM Generating React App
Tags: react, javascript, html, tutorial
Published: 2023-01-08 10:49:29

Hi! My name is Yibo Chen and I create an Lorem Ipsum Generating React App with the Input (Form Input) element.

First of all, let's build the h3 title:

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

Secondly, let's set up the Form element with input element. Build the input element with control value, _**onChange**_, and pass data the the setCount useState and determine how many paragraph we want to generate in the page.

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

With the useState hook, we can build the how many page we want to show in the React app.

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

Most importantly, let's build the button element to submit our data on the showing page.
The onSubmit control element with handleSubmit function to change the data.
Set the **e.preventDefault()** to prevent the page refresh when the data change.

With the** _parseInt(count)_** we can slice the paragraphs to show on the page. And if the user select the number smaller than 0,  the showing amount of the paragraph should be one, but if the user select the number bigger than the data, and the showing amount of the paragraph should be eight.

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

Because of the setText useState hook, we can use map() method to demonstrate the showing page of the text:

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

Thank You for reading my article. Please check on my netify page: https://react-app-lorem-ipsum-ac.netlify.app/, or my github page: https://github.com/chenyibo406/react-app-lorem-ipsum
Dart: late + final = easy and safe caching
Tags: dart
Published: 2023-01-08 10:19:57

Let's say You have a `Person` class and You want to expose `netWorth` field.
There is a backend API to fetch it but it's pretty expensive.
Backend needs to call all associated bank APIs, convert currencies, calculate real estate values, etc.
Here's how to use new `late` variables feature to implement easy and safe caching.

<!--more--> 

## Naive approach

We could start with super simple approach, i.e. fetch the value every time we use it.

```dart
class Person {
  Future<num> netWorth() => _fetchNetWorth();
}

// await person.netWorth()
```

## Cache result

Instead of calling `_fetchNetWorth` every time we could call it only once and cache the results.

```dart
class Person {
  Future<num>? _fetchNetWorthFuture;

  Future<num> netWorth() {
    _fetchNetWorthFuture ??= _fetchNetWorth();

    return _fetchNetWorthFuture;
  }
}

// await person.netWorth()
```

There is an open question hanging in the air: why `netWorth` is `Future<num>` and not simply `num`?
We could have some initialization function that could resolve the future, right?

I'm not a fan of such initialization functions because it creates unnecesarry dependency that can quickly become unmanagable.

What if we have another field in the class that has to be fetched? We throw it in init function!

What if we need only one not the other? Should we have two init functions? Or maybe have some logic what to initialize?

Futures are cheap and I like the explicit contract that we expose. Consumer of our class knows from the get-go that this value has some cost.

Ok, now we cached the result (or rather Future of the result) so we don't make the expensive call again.
There is not much more we can do in terms of resource optimisation, but we can optimise the code a bit - we can get rid of the intermidiate `_fetchNetWorthFuture` variable.

## late + final 

With introduction of sound null-safty we got access to [`late`](https://dart.dev/null-safety/understanding-null-safety#late-variables) keyword. `late` allows us to take responsibility of nullness of the value. It's like telling compiler "trust me, the value will be there when I use it".

> The late modifier has some other special powers too. It may seem paradoxical, but you can use late on a field that has an initializer:
[^1]

Possibility to have initializer on `late` variables allows us to get rid of intermidiate `_fetchNetWorthFuture` variable.
Slapping `final` gives us compilte time guarantee that the variable will be assigned only once.

```dart
class Person {
  // Potentially expensive calculation.
  late final netWorth = _fetchNetWorth();
}

// await person.netWorth
```

_This post was originally posted on my blog at [stuffs.dev](https://www.stuffs.dev/posts/dart-late-final-for-simple-and-safe-caching/)_

[^1]: https://dart.dev/null-safety/understanding-null-safety#lazy-initialization
Outreachy: Everyone Struggles
Tags: outreachy, sbom, opensource, eclipseadoptium
Published: 2023-01-08 10:14:27

| Outreachy |
|----------|
| [1. Outreachy: Introducing myself with Eclipse Adoptium](https://dev.to/julian55455/outreachy-introducing-myself-with-eclipse-adoptium-3bam)   |
| [2. Outreachy: Everyone Struggles](https://dev.to/julian55455/outreachy-everyone-struggles-1cn1)|
| [3. Outreachy: Experience with Adoptium](https://dev.to/julian55455/experience-with-eclipse-adoptium-2c3m)| 







Welcome to blog 2!


"We all face challenges and struggles in life, and this is especially true when it comes to coding projects. As the famous quote by Walt Disney goes, 'The way to get started is to quit talking and begin doing.' However, sometimes it can be difficult to even get started, let alone persevere through the challenges that come our way.

For the past weeks, I've been trying to learn a couple of things and gather feedback from mentors as I progress, which is a painfully a struggling process as it gets very difficult to understand some workflows and what exactly is needed.
Nevertheless, giving up is not an option; we shall see how this goes in the future and it must end well!

In this blog post, we'll explore the struggles that come with working on your/my project, and how to overcome them. Whether you're participating in a program like Outreachy or working on a personal project, these tips and insights from famous individuals can help you stay motivated and focused on your project goals."

Body:

> "It's not about the end result, it's about the journey." - Oprah Winfrey

One of the biggest struggles that many coders face is the pressure to produce perfect results. However, as Oprah reminds us, it's important to focus on the journey and the process of learning and growth, rather than just the end result. This can help reduce anxiety and stress, and allow you to enjoy the experience of working on your coding project.

> "Don't let fear or insecurity stop you from trying new things." - J.K. Rowling

Another common struggle that coders face is fear of failure or insecurity in their abilities. It's important to remember that everyone has to start somewhere, and it's okay to make mistakes and learn from them. As J.K. Rowling advises, don't let fear or insecurity hold you back from trying new things and pushing your limits.

> "The only limit to our realization of tomorrow will be our doubts of today." - Franklin D. Roosevelt

It's easy to get caught up in doubts and negative thoughts when working on a coding project. However, as Franklin D. Roosevelt reminds us, the only thing that can limit our potential is our own doubts. It's important to stay positive and believe in yourself, even when things get tough.

Conclusion:

"As you work on your coding project, remember that every one struggles at some point. It's important to stay motivated and focused, and to remember that the journey is just as important as the end result. Keep these words of wisdom from famous individuals in mind, and you'll be well on your way to overcoming any challenges that come your way."
TailwindCSS এর container class টা কিভাবে কাজ করে?
Tags: tailwindcss, container, margin, padding
Published: 2023-01-08 10:12:09

Tailwindcss-এর ডক্স এ বলা আছে "The container class sets the max-width of an element to match the min-width of the current breakpoint." 

সহজভাবে যদি বলি, TailwindCSS-এর একটি ব্রেকপয়েন্ট range দেওয়া হয়েছে যা স্ক্রিন সাইজ অনুযায়ী minimum width নির্দেশ করে।

TailwindCSS এর পাঁচটি ব্রেকপয়েন্ট আছে:

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

ডিফল্টরূপে, TailwindCSS container width এর একটি range তাদের ডক্স এ দেওয়া আছে।

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8vparwxe0tk7tuwfk66w.PNG)

যখন আমরা কনটেইনার ক্লাসটা ব্যাবহার করি তখন বর্তমান ব্রেকপয়েন্ট এর মান অনুযায়ী কন্টেইনার এর range থেকে ম্যান সিলেক্ট করে max-width হিসেবে সেট করে একটা fixed width গঠন করে। তারমানে layout টা fluid থাকেনা। 


এইভাবে কন্টেইনার সাধারণত ব্যবহার করা হয় যখন আপনি ওয়েবপেজে একটি নির্দিষ্ট area নির্ধারণ করতে চান যাতে content গুলো সীমাবদ্ধ থাকে।

TailwindCSS এ দেখানো হয় কিভাবে আমরা কনটেইনার ক্লাসটা ব্যাবহার করতে পারিঃ

```
<div class="container">
  <!-- ... -->
</div>
```
যদি আমরা কন্টেইনার center এ আনতে চাই তাহলে আমরা mx-auto ব্যাবহার করতে পারিঃ

```
<div class="container mx-auto">
  <!-- ... -->
</div>
```
**mx-auto দিলে আমার কাজ করেনা কেন?**

mx-auto আসলে ঠিকভাবে কাজ করছে। সমস্যা হল কন্টেইনার ক্লাসের  width এবং  ব্রেকপয়েন্টে width সেম থাকার কারনে স্পেস এর অভাবে center এ align হতে পারছে না।

যদি একটা উদাহরণ দেই, আপনার device স্ক্রিন সাইজ যদি 768px হয় এবং কন্টেইনার width যদি 640px হয় তাহলে উভয় পাশে 64px থাকার কারনে কন্টেইনারটি center এ aligned হবে কিন্তু আপনার device সাইজ এবং কন্টেইনার সাইজ যদি 1024px হয় স্পেস না পাওয়ার কারনে কন্টেইনারটি center এ আশবেনা।

এইটা কিভাবে সমাধান করা যাই?

এইটা ২ ভাবে সমাধান করা যেতে পারেঃ

১) default কন্টেইনার width পরিবর্তন করা যেতে পারে

```
// tailwind.config.js
module.exports = {
  mode: 'jit',
  theme: {
    container: {
    
      screens: {
        sm: '600px',
        md: '728px',
        lg: '984px',
        xl: '1240px',
        '2xl': '1496px',
      },
    },
  },
}
```

২) আরও সহজ উপাই হচ্ছে, px-{size} দিয়ে আপনার কন্টেইনারটিকে center আনতে পারবেনঃ

```
<div class="container mx-auto px-4">
  <!-- ... -->
</div>
```
আশাকরি এই ব্লগটি পরে আপনার TailwindCSS এর কন্টেইনার ক্লাস এর behaviour সম্বন্ধে কিছুটা ধারনা হয়েছে।  

Keep calm!
Keep coding!
JavaScript null is weird
Tags: javascript, webdev, beginners, programming
Published: 2023-01-08 10:10:26

JavaScript has a unique way of implementing common programming concepts. Some things you assume will work a certain way will definitely give you a result but not the one you were expecting.

Let's say you read some literature that Null is a data type then you run typeof(null) then you find out null is not an object, but it is of type object:

```
let x = null;
console.log(typeof x);  // logs "object"
//also this not-object-fake-object  has no properties
let x = null;
console.log(x.prop);  // TypeError: Cannot read property 'prop' of null
```

Also consider this, in JavaScript, null is considered a falsy value, which means it will be coerced to false when used in a boolean context. This means that when null is compared to 0 using the less-than-or-equal-to operator (<=), the result will be true.

```
console.log(null < 0);  // logs "false"
console.log(null > 0);  // logs "false"
console.log(null == 0);  // logs "false"
console.log(null === 0);  // logs "false"
console.log(null <= 0);  // logs "true"
console.log(null >= 0);  // logs "true"
```


Talking about weird things here is another example NaN is never equal to NaN the best way to test NaN is to use isNaN();

```
NaN === NaN; //false
console.log(isNaN(NaN)); // true
console.log(isNaN(123)); // false
console.log(isNaN('hello')); // true
//But beware
console.log(isNaN('123')); // false
```


I know you have experienced other weirdness in your JavaScript journey, please share it and the reason why you think it exists? Do you think there were too many opinions in the development of the language? Are there too many people taking advantage of these quirks for them to be changed? Let me know your opinion.