teleren/devto huggingface dataset:
Create a simple URL Shortener for your website using Vercel
Tags: vercel, tip, deploy, jamstack
Published: 2020-10-17 15:43:43

---
title: Create a simple URL Shortener for your website using Vercel
published: true
description: URLs could be long. Very long. Learn how to create a simple URL Shortener for your website using Vercel redirects feature.
tags: vercel, tip, deploy, jamstack
canonical_url: https://peyman.me/blog/url-shortener-using-vercel-redirects
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/ov5bhcv6ddtnbqntmt25.jpg
---

URLs could be long. Very long. When you have a blog, you try to create the URLs with meaningful sentences like `working-with-new-suspense-system-in-react-17`. It actually is a good title for the SEO matters but it's a real bummer to share. It's way too long to be transferred easily and quite ugly in full address:

https://someawesomesite.com/blog/working-with-new-suspense-system-in-react-17

But there should be a way between choosing that or something like `react-17-suspense`. Actually, there is a simple way when you use something like Vercel or Netlify. These services provide a way to help you redirect from an internal path to another URL. The target could be either internal or external. 

So, what that mean to us? We could take advantage of this feature as a URL shortener service. You can create a smaller address for every path you want and then share that very small URL with others.

### So, how we do that?

Easy! First, create a config file for your Vercel project called `vercel.json`.

Then add a `redirects` property to it and fill it with an array like this:

```json
{
  "redirects": [
    {
			"source": "/react-17-suspence",
			"destination": "/blog/working-with-new-suspense-system-in-react-17"
    },
    {
			"source": "/gh",
			"destination": "https://github.com/p3yman"
		}
  ]
}
```

Just set the source and the destination and you're good to go!

You have a third option called `permanent` which is a boolean. This is the direct quote from the Vercel documentations:

> `permanent`: A boolean to toggle between permanent and temporary redirect (default true). When true, the status code is 308. When false the status code is 307.

There is only one very important point here:

You could use this feature in your local environment using Vercel CLI tool. So, if you're developing a React or Vue or Gatsby project, it'll not work with the `npm run serve` or whatever script you use. It should be served by the Vercel, so it could make the environment not just for this feature, also for a lot of other things like routing or Serverless Functions.

You could read about the Vercel CLI here on its [official documentations](https://vercel.com/docs/cli).

As you can check, you could open this post using [this shorten URL](https://peyman.me/vercel-redirects), and also you could see my Github page from [/gh](https://peyman.me/gh) link.
Find the right project
Tags: motivation, help, github, opensource
Published: 2020-10-17 15:42:52

Hello everybody,
How do you deal with periods when you really want to code, but you don't have the faintest idea of ​​what to code?

I would like to find a very interesting project to contribute to, but every time I compare myself with the difficulty and size of the projects, I fall back. For example, I'd really like to support openssl, but it's so complicated and so big that it would take a lifetime to figure out what's been done.

For many people, even having a stupid idea is enough: snake game, to do app, etc ... But I need to find a project that is worthwhile, that gives me a purpose and that has a real purpose. For example I envy Debian programmers who help create medical software, the social impact is very important. (Obviously I don't understand anything about medicine :D )

Probably the problem is that I have too much to do with system jobs (I deal with IAM), this job doesn't open the mind much, it is very repetitive, it does not give inspiration.

I tried to learn different languages ​​to open up new paths, but once I have finished learning the dilemma returns: what project do I create now? First I learned Java, then Python, then some frameworks like Flask, Django, and nothing ...

And you? What projects do you contribute to? Are you passionate about it? What advice do you give?
Software for Design Crows Foot ER Diagrams
Published: 2020-10-17 13:33:02

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/xbixnl9uhau7gwgoz0qn.png)

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/zggjs4s83ruhxi199ejx.png)
Hacktoberfest 2020
Tags: hacktoberfest
Published: 2020-10-17 15:41:50

Today,I know the value of contributing in open source.
 
Today I just completed✅ my first #hacktoberfest successfully✨, all my PRs were accepted💯 and my 5 extra Prs also. It was a great experience😋 contributing to an open-source🙌 platform and now I look forward to more open-source contributing✌.  
@DigitalOcean #hacktoberfest
What I Learned From Hacktoberfest
Tags: hacktoberfest
Published: 2020-10-17 15:34:39

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/wadbdaj71ykq3dytevxv.PNG)
## What I Learned From Hacktoberfest

It was a great experience for me as a student. I explored many skills such intro to open source, etc.
Overall it was a great experience for me.. Thanks DigitalOcean Hacktoberfest Community
Como guardar una copia de cada email que se envía desde Laravel
Tags: php, laravel, castellano, debug
Published: 2020-10-17 15:23:18

---
title: Como guardar una copia de cada email que se envía desde Laravel
published: true
description: Guarda cada mail enviado desde tu entorno Laravel para poder realizar revisión de los mismos en cualquier momento
tags: PHP, Laravel, castellano, Debug
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/1uy0ukdclrz5uxx1x3oj.png
---

Con este post crearemos un fichero con cada correo enviado por nuestro sistema para poder analizar el contenido de los mismos.

El post anterior sobre debug en Laravel es https://dev.to/lito/como-generar-logs-que-registren-las-consultas-a-base-de-datos-en-laravel-5edl

### 1. Creamos el Logger de Mail

Lo podemos dar de alta por ejemplo en `app/Services/Mail/Logger.php`:

```php
<?php declare(strict_types=1);

namespace App\Services\Mail;

use Illuminate\Mail\Events\MessageSending;
use Illuminate\Support\Facades\Event;

class Logger
{
    /**
     * @return void
     */
    public static function listen(): void
    {
        Event::listen(MessageSending::class, static fn ($event) => static::store($event));
    }

    /**
     * @param \Illuminate\Mail\Events\MessageSending $event
     *
     * @return void
     */
    protected static function store(MessageSending $event): void
    {
        $file = storage_path('logs/mails/'.date('Y-m-d/H-i-s').'-'.uniqid().'.log');
        $dir = dirname($file);

        if (is_dir($dir) === false) {
            mkdir($dir, 0755, true);
        }

        file_put_contents($file, (string)$event->message);
    }
}
```

Ahora podemos crear un `ServiceProvider` que gestione el debug. Lo haremos en `app/Providers/Debug.php`:

```php
<?php declare(strict_types=1);

namespace App\Providers;

use Illuminate\Support\ServiceProvider;
use App\Services\Mail\Logger as LoggerMail;

class Debug extends ServiceProvider
{
    /**
     * @return void
     */
    public function boot()
    {
        $this->logging();
    }

    /**
     * @return void
     */
    protected function logging(): void
    {
        $this->loggingMail();
    }

    /**
     * @return void
     */
    protected function loggingMail(): void
    {
        if (config('logging.channels.mail.enabled')) {
            LoggerMail::listen();
        }
    }
}
```

Una vez tengamos el servicio, lo añadimos en `config/app.php` en el array de `providers`:

```php
    ...

    'providers' => [
        ...

        /*
         * Application Service Providers...
         */
        App\Providers\Debug::class,
    ],
];
```

También añadimos su opción de configuración en `config/logging.php`:

```php
    ...

    'channels' => [
        ...

        'mail' => [
            'enabled' => env('LOG_MAIL', false),
        ],
    ],
```

Y lo completamos con el valor en `.env`:

```
LOG_MAIL=true
```

De este modo nos creará una carpeta en `storage/logs/mails/` con cada día y dentro un fichero cada correo ordenados por hora.

El código completo lo podeis encontrar aquí https://gist.github.com/eusonlito/773bd0ef3de74ba998e0fb6f8cc42d9a

Y ya sabes, si te ha parecido interesante, comparte!
5 tips to succeed at your new job or internship 
Tags: career
Published: 2020-10-17 15:30:33

So you got your first internship or job and want to make sure you keep it? Here are some tips which help you with that:

1. Ask all the questions. Its very normal that at the beginning you will have a lot of questions. If you cant google them easily, collect them, ask a colleague if she/he has time and go through them.

2. Take initiative. Be proactive, ask for tasks and feedback and bring in your own ideas.

3. Get organized. Find a way to make sure you have some structure in how you are working and set reminders for meetings and deadlines.

4. Break down big tasks. Sometimes we face complex problems. Break them down and make sure you understand them and possibly discuss them with your colleagues. Create a to-do-list for that task so you dont get lost.

5. Depending on your character type: either push yourself or relax. Make sure you give your best but at the same time dont overwork yourself, take care of your health! My first job as a lawyer ended in a burnout because I overworked myself, and thats not helping anyone.

Which tips for a new job or internship do you want to share? Have a nice day. 🙂
My first experience on #hacktoberfest
Tags: hacktoberfest
Published: 2020-10-17 15:23:54

## What I Learned From Hacktoberfest

<!-- What did you learn that can help others contribute to the project you worked on? What did you learn that can help the users of that project?! -->
For the very first time I have attended it and it's an awesome experience. Helping open source community felt really good. We also gain alot of knowledge and learn about new technology. That feeling when your pull requests is accepted is incredibly. And also i won my very first Hacktoberfest T-shirt. Waiting for it to come. Awesome experience and learned alot. From now i will participate in hacktoberfest every year. Thank you Hacktoberfest for giving me this opportunity. #hacktoberfest
Fibonacci Sequence
Tags: python
Published: 2020-10-17 14:45:23

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/w3czdjmimqy1c0dioxal.jpg)

Python script to display the Fibonacci sequence up to *n-th* term, where *n* is provided by the user.

    # take input from the user
    u_input = int(input("\nHow many terms? "))

    # first two terms
    no_1, no_2 = 0, 1
    count = 0

    # check if the number of terms is valid
    if u_input <= 0:
       print("Please enter a positive integer")
    elif u_input == 1:
       print("Fibonacci sequence upto",u_input,":")
       print(no_1)
    else:
        # update values
       print("Fibonacci sequence:")
       while count < u_input:
           print(no_1)
           nth = no_1 + no_2
           no_1 = no_2
           no_2 = nth
           count += 1
HacktoberFest@2020
Tags: hacktoberfest
Published: 2020-10-17 14:43:03

## What I Learned From Hacktoberfest

It was a great experience for me as a student. I explored many skills such intro to open source, etc. 
Overall it was a great experience for me.. Thanks DigitalOcean Hacktoberfest Community, 

Regards Samarth Verma.
React: Using Modal in Class Components
Tags: react, css, beginners
Published: 2020-10-17 14:36:28

In my pervious blog, I explained how modal can be used in functional components. My obsession with modal continues so now, I'll go over one of the ways you can use modal in Class Components!

First start off with basic react class component:
```javascript
import React, { Component } from 'react'

class ModalInClassComponents extends Component {
    render() {
        return (
            <div>
                
            </div>
        )
    }
}

export default ModalInClassComponents;

```
Now, in your terminal, you want to install: `npm install react-responsive-modal` and import modal and style.css in your component: 
```javascript
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';
```
Create a state for the modal to stay closed initially:
```javascript
state ={
    openModal : false
}
```
Create a button with onClick attribute. We will call function when the button is clicked which sets the `openModal` state to `true`.
```javascript
<button onClick={this.onClickButton}>Click Me</button>
```
```javascript
onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
}
```
Now, we need to use the Modal component and add two attributes: `open` and `onClose`.
`open` is set to `this.state.openModal`, so the modal opens when the state is `true`.
`onClose` works the same way as `onClick`, however, in this case, we want to set the state back to `false`.
```javascript
<Modal open={this.state.openModal} onClose={this.onCloseModal}>
//Here you can add anything you want to reveal when the button is clicked!
       <h1>You Did it!</h1> 
</Modal>
```
```javascript
onCloseModal = ()=>{
        this.setState({openModal : false})
}
```
And that's it! You should be able to view your modal now:
![final](https://imgur.com/VmoFXWO.png)
![final](https://imgur.com/DJ04aYe.png)

I love modal because it adds a bit of oomph to your app and it's very simple and easy to use. 

The full code looks like this:
```javascript
import React, { Component } from 'react'
import { Modal } from 'react-responsive-modal';
import 'react-responsive-modal/styles.css';

class ModalInClassComponents extends Component {

    state={
        openModal : false
    }

    onClickButton = e =>{
        e.preventDefault()
        this.setState({openModal : true})
    }

    onCloseModal = ()=>{
        this.setState({openModal : false})
    }

    render() {
        return (
            <div>
                <button onClick={this.onClickButton}>Click Me</button>
                <Modal open={this.state.openModal} onClose={this.onCloseModal}>
                    <h1>You Did it!</h1>
                </Modal>   
            </div>
        )
    }  
}

export default ModalInClassComponents;
```
Thank you for making it till the end!
Get Phone Number Information using Python
Tags: python
Published: 2020-10-17 14:35:56

Hello guys this is Satyam,again back with another awesome blog and in this blog I am going to discuss about a module in Python that is called phonenumbers which can be used find out some information about a given phone number such as the Operator Name and the name of the country in which the number is active.

In order to use these module first of all you have to install it using pip package manager because it's not a standard package so you have to install it separately.Type the following command in your terminal or cmd to install this module.

     pip install phonenumber

Python program to get the country name to which phone number belongs:
      

CODE:
import phonenumbers 
from phonenumbers import geocoder 
phone_number = phonenumbers.parse("Number with country code")   
print(geocoder.description_for_number(phone_number,  
                                      'en'))    


Python program to get the service/network provider name to that phone number

CODE:
import phonenumbers 
 
from phonenumbers import carrier 

service_provider = phonenumbers.parse("Number with country code") 
print(carrier.name_for_number(service_provider, 
                              'en'))  


Buy Siteground Web hosting:

https://www.siteground.com/index.htm?afcode=4bbbeb6048f7d8fd1efec76817755662


Teestring Merchandise:

https://teespring.com/get-coder-s?pid=328&cid=6277&sid=front


👉Social

Facebook Page:https://www.facebook.com/Bestpythontutorialscom-107219717832080/


My website:https://bestpythontutorials.com

My blogs:https://devtipsntricks.com

Personal Instagram:https://instagram.com/satyamkumarverman

BestPythonTutorials.com Instagram:

https://instagram.com/skvprogrammer

Personal Twitter:https://twitter.com/skvprogrammer 

BestPythonTutorials.com Twitter:

https://twitter.com/bestpythontuto1

DevTipsNTricks.com Twitter:

https://twitter.com/devtipsntricks

Facebook(for freelance):

https://facebook.com/satyam.varman.12


Facebook:https://facebook.com/satyam.varman.5

Patron:https://patreon.com/SkvProgrammer
7. Create individual product pages - Create a Commerce.js store with Svelte
Tags: javascript, svelete, sapper, commerce
Published: 2020-10-17 14:27:52

Now we've individual pages for categories, it's now time to create the important pages for products.

---

{% youtube n9AWs0rnnl8 %}

---

We can do this by creating a new file with the name `[permalink].svelte` inside the `src/routes/products` directory.

The file is called `[permalink]` because we'll be fetching Commerce.js products by their `permalink`. You could alternatively use the product `id`, but the permalink when customized is a bit more friendly.

Inside this file we'll make a call to `commerce.products.retrieve()` and pass into the first argument the `permalink` (from `params`), and then in the 2nd argument, we'll tell it the `type` is `permalink`.

Once we've retrieved the product by permalink, we'll export the necessary variables, and return the product name, and formatted price to the page.

```js
<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { permalink } = params;

    const product = await commerce.products.retrieve(permalink, {
      type: "permalink",
    });

    return {
      product,
    };
  }
</script>

<script>
  export let product;
</script>

<h1>{product.name}</h1>

<p>{product.price.formatted_with_symbol}</p>
```

🎉 Great! 

You should see after running `npm run dev` all of what we've built so far at [http://localhost:3000](http://localhost:3000).

---

We'll next explore using Commerce.js to add products to cart, and checkout.
6. Create a individual category page - Create a Commerce.js store with Svelte
Tags: javascript, svelte, sapper, commerce
Published: 2020-10-17 14:27:02

Now that we've pages for all products and categories, it's time to create the individual pages for categories.

---

{% youtube TOvinnD7uGc %}

---

Using Sappers dynamic routes, we can create a new file inside `src/routes/categories` called `[slug].svelte` that works just like Nuxt and Next.js by passing this down as page params.

Inside `src/routes/categories/[slug].svelte`, we can use Commerce.js to:

- Fetch the individual category by `slug`
- Fetch all products that belong to this category

We'll perform the requests inside the exported async function `preload`, and return those to the page.

```js
const category = await commerce.categories.retrieve(slug, {
  type: "slug",
});

const { data: products } = await commerce.products.list({
  category_slug: slug,
});
```

It's important we export both of these inside the page `<script />` tag so we can access it in the template.

Then on the page we will display the category name, followed by all products with links to the individual pages.

```js
<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload({ params }) {
    const { slug } = params;

    const category = await commerce.categories.retrieve(slug, {
      type: "slug",
    });
    const { data: products } = await commerce.products.list({
      category_slug: slug,
    });

    return {
      category,
      products,
    };
  }
</script>

<script>
  export let category;
  export let products;
</script>

<h1>{category.name}</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>
```
How to send WhatsApp messages for free and reliably with only 3 lines of code? Python
Tags: python, showdev, wappdriver, aahnikdaw
Published: 2020-10-17 14:26:46

Wondering how to send WhatsApp messages using Python using only 3 lines of code? You have come to the right place!

You can do so by using a simple tool `wappdriver`.

## Look!

{% gist https://gist.github.com/aahnik/8f076a8d9ff35e7ea7ffaf6385bb4b4d %}


## Installation?

Its hassle-free.

Just `pip install wappdriver`

## Why wappdriver?

- fast and reliable
- WhatsApp's website structure may change, the selectors can be updated over the internet dynamically, without changing code.
- chrome Driver path setting is hassle-free
- actively maintained
- fast support, if you need help
- send messages with bold, italics, or strikethrough
- send emojis smiley
- send images, videos, and gifs
- send documents and files
- can set a custom timeout, so that runs properly on old computers or with a slow internet connection
- more features to be added

[Know more](https://aahnik.github.io/wappdriver/docs/Documentation.html#documentation)
### Requirements 

Just [Chrome Browser](https://www.google.com/chrome/) and [Chrome Driver](https://chromedriver.chromium.org/).

### Documentation 

Just go to https://aahnik.github.io/wappdriver. You will get all details.

### Note

This code is in no way affiliated with, authorized, maintained, sponsored, or endorsed by WhatsApp or any of its affiliates or subsidiaries. This is an independent and unofficial software.

This project is distributed under the **MIT License**.

### Questions or Suggestions?

If you have any questions, or if you want to discuss something with the community, please come to the [wappdriver Discussion Forum](https://github.com/aahnik/wappdriver/discussions).
5. Create a categories index page - Create a Commerce.js store with Svelte
Tags: javascript, svelte, sapper, commerce
Published: 2020-10-17 14:26:07

Just like we did for categories, we'll do the same for listing all categories.

---

{% youtube Fqwfpp1xHWA %}

---

Inside `src/routes`, create the directory `categories`, and a new file `index.svelte`.

As you can probably guess, it's here we will fetch all categories using Commerce.js.

```js
<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload() {
    const { data: categories } = await commerce.categories.list();

    return {
      categories,
    };
  }
</script>

<script>
  export let categories;
</script>

<h1>Categories</h1>

<ul>
  {#each categories as category}
    <li>
      <a rel="prefetch" href="categories/{category.slug}">{category.name}</a>
    </li>
  {/each}
</ul>
```

Before we continue, let's add a link to the `/categories` page on our root index page.

Above where we list categories, add the following:

```js
<h3><a href="/categories">Categories</a></h3>
```
4. Create a products index page - Create a Commerce.js store with Svelte
Tags: javascript, svelte, sapper, commerce
Published: 2020-10-17 14:25:36

Let's now create a dedicated page just for listing, and linking to product pages.

---

{% youtube ixlXkQH2xZU %}

---

Inside the `src/routes` directory, create a the directory `products`, and file `index.svelte`.

This file will serve `/products` in the browser.

Just like we did before on the root index page, we can import the commerce.js instance, and fetch our products.

```js
<script context="module">
  import commerce from "../../lib/commerce.js";

  export async function preload() {
    const { data: products } = await commerce.products.list();

    return {
      products,
    };
  }
</script>

<script>
  export let products;
</script>

<h1>Products</h1>

<ul>
  {#each products as product}
    <li>
      <a rel="prefetch" href="products/{product.permalink}">{product.name}</a>
    </li>
  {/each}
</ul>
```

_Since Sapper code splits your project per route, the special `rel="prefetch"` tells Sapper to start prefetching the data before navigating for the page._

Before we continue, let's add a link to the `/products` page on our root index page.

Above where we list products, add the following:

```js
<h3><a href="/products">Products</a></h3>
```