teleren/devto huggingface dataset:
Vite With Laravel And Vue 3 | How To Install Vue 3 In Laravel With Vite- Dev Duniya
Tags: laravel, vue, php, vite
Published: 2022-07-03 13:22:46

**Vite with Laravel and Vue 3 & How to Install Vue 3 in Laravel with vite.**

Laravel has just released “laravel 9.19” with a major change. There is no more webpack.mix.js file in the laravel root in the place of the webpack.mix.js file vite.config.js file is introduced.

In this post, we will learn how to install Vue js 3 in laravel 9.19 with vite ?. This post shows you how to install vue 3 in laravel 9 with the latest upgrades. If you want to see an example of installing vue 3 in laravel-vitethen you are in the right place. Laravel 9.19 with vite is the latest version of the laravel framework at the writing of this article. As you know Laravel is the most popular PHP framework and it’s easy to use scale, and flexible. Vue js is a progressive framework for building user interfaces and it is lightweight and easy to use and learn. Vue 3 is the latest version of the Vuejs Framework and growing rapidly.

By the end of this post, you’ll be able to create a Vue 3 and Laravel 9.19 application powered by vite. We’ll also learn how to create a vue3 component and connect it with laravel 9 blade file.

## How To Install Vue 3 In Laravel 9 with vite?
Use the following steps to install vue 3 in the laravel 9 application.

- Install laravel 9 App
- Install NPM Dependencies
- Install Vue 3
- Update vite.config.js
- Compile the assets
- Create Vue 3 App
- Create Vue 3 Component
- Connect Vue 3 Component with Laravel blade file and use vite directive to add assets.
- Update Laravel Routes
- Start The Local Server

[Read Complete Article from here:](https://devduniya.com/how-to-install-vue-3-in-laravel-with-vite/)
**Thank you**
Trust Issues with setTimeout()
Tags: javascript
Published: 2022-07-03 13:22:02

what is setTimeout()?
Special asynchronous functions like setTimeout, setInterval are provided to JS by the environment it is currently running on. For example in case of Chrome JavaScript runs on the V8 engine, and Fire Fox uses SpiderMonkey as its JavaScript engine etc.

The setTimeout() method calls a function after a number of milliseconds. It sets a timer which executes a function or specified piece of code once the timer expires.


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

## setTimeout with delay of 5000 milliseconds does not always wait for exactly 5000 milliseconds. There are trust issues.

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

Let's take one example and make it clear:

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

JavaScript is single threaded. Every line of code goes into call stack and gets executed.

date.getTime() method return current time in milliseconds. so I note the time when the execution of the program starts. our JS makes a timer for callback function of setTimeout and execution goes to the next line. 

Here we use for loop to make more time in execution of our synchronous code. so when the call stack is busy in the execution of for loop our sweet timer gets expires but our call stack is busy in for loop so does execute callback function. our callback function is waiting in queue.

When the call stack finishes its loop execution it immediately runs our callback function. In the callback function, we get that time in milliseconds and log the total time of execution which may be greater than our delay time. 

How much time setTimout takes, it's all dependence on our execution stack.
generate unique slug with eloquent-sluggable package laravel 8
Tags: laravel, slug, php, webdev
Published: 2022-07-03 13:19:10

First install the package with composer `composer require cviebrock/eloquent-sluggable`

and simply put this code in your model

```
use Cviebrock\EloquentSluggable\Sluggable;

class Post extends Model
{
    use Sluggable;
    public function sluggable(): array
    {
        return [
            'slug' => [
                'source' => 'title'
            ]
        ];
    }
}
```

it will automatically use title as a slug


for more feature, maybe you want to read the [documentations](https://github.com/cviebrock/eloquent-sluggable)

thanks for reading, if you have a better method, feel free to discuss
Coding a Toggle switch with React.js and Material UI
Tags: react, javascript, webdev, tutorial
Published: 2022-07-03 13:18:39

Hey coders🤓 hope you're having an amazing day.

I enjoy coding and learning, especially when I know that I can share my experience with my friends on the internet, so that's why I have coded this very simple minimalist home page with React and Material UI, but I guess what I wanted to achieve is creating a toggle switch for light and dark mode, something that you can see now in modern websites for readers who prefer to not be bothered by the flashing light - like myself - so this switch provides the option to change the page's color to black and font automatically is converted to white.

I think it's cool, and even cooler to know how you can do it in react, I did not create a component as this was the only component in the app, usually i create components when I have more than one element I want to integrate them; but you can optimize the code as you like.

This is the video, and I hope you will enjoy it 🙂 

{%youtube oSId9mVXo-8%}


Follow me on twitter and Instagram : @ BekBrace  
Join my Facebook page : @bekbraceinc
Github: How to fix broken image paths
Tags: html, tutorial, github, beginners
Published: 2022-07-03 11:54:13

Are you trying to deploy your page to Github, and suddenly, after everything was uploaded, your images stop showing up? 
No worries, many people encounter this issue! 

<sup>As an active member of the Scrimba discord community, I have noticed many beginners struggle when deploying their pages in the beginning. So I am writing this article in hopes of helping more people learn how to troubleshoot their code.</sup>

---

![Project](https://community.codenewbie.org/remoteimages/uploads/articles/clacarxkt29ie33ap5kw.png) To show how to troubleshoot this issue step by step, I created a folder that consists of index.html, style.css and a cat.jpg.
[See Live Page](https://its-haanna.github.io/hosted_resources/tut-img-paths/)
[See Github Repository](https://github.com/its-haanna/its-haanna.github.io/tree/main/hosted_resources/tut-img-paths)

---

## We need to check two things:

- Our image's location in the Github repository
- Our HTML/CSS code

Depending on our Github repository's structure, we will have to tweak HTML/CSS code to make the file paths work again.

## File position case scenarios

### All files in one folder
![Files in the Github repository](https://community.codenewbie.org/remoteimages/uploads/articles/f3csxvun6mjaburfjjd3.png)Here, we can see that all files are together, which makes them siblings.
In this case, your image tag should look like this:

```
 <img src="cat.jpg" alt="Kitty">
```

### Image files in another folder

Often, images are in a separate folder, and the image path has to be structured differently.

![Files in the Github repository, main folder](https://community.codenewbie.org/remoteimages/uploads/articles/h2vasjcd3ooa1m9t0eym.png) ![Files in the Github repository, images folder](https://community.codenewbie.org/remoteimages/uploads/articles/c39delauyqai5082vyqo.png)
Here, the images folder is a sibling of index.html and style.css; however, the cat.jpg is a child of the images folder.

In this case, your image tag should look like this:

```
<img src="images/cat.jpg" alt="">
```

I recommend using [inspector](https://zapier.com/blog/inspect-element-tutorial/) on your HTML/CSS. This way, you can check the image paths and change them without having to make any commits (but remember to edit your code after finding the correct solution!):

![Using Inspector on a page](https://community.codenewbie.org/remoteimages/uploads/articles/1sldmnwafh8vvo9du3xa.png)

And that's it!
Happy coding!

Additional useful links:
* [Inspect Element: How to Temporarily Edit Any Webpage](https://zapier.com/blog/inspect-element-tutorial/) by Zapier.com
* [GitHub Pages Tutorial](https://happycoding.io/tutorials/html/github-pages) by Happycoding.io
Run multiple services with nginx reverse proxy
Tags: docker, tutorial
Published: 2022-07-03 12:59:42

## Requirement

- docker desktop
- basic knowledge of how docker works

## Getting Started

## What is nginx reverse proxy ?

- nginx reverse proxy can be simplified as client is accessing the site via nginx acting as the middleware between client and site

## What is the benefit ?

- you can have multiple site under 1 nginx middleware 

## How to get started ? 

- Create a new docker-compose.yml file
- Content of the docker-compose.yml

```yml
version: '3.7'

services:

  proxy:
    image: jwilder/nginx-proxy
    container_name: proxy-test
    ports:
      - "80:80"
      - "443:443"
    volumes:
      - /var/run/docker.sock:/tmp/docker.sock:ro

  container1:
    image: httpd:2.4
    container_name: container-1
    environment:
      - VIRTUAL_HOST:container1.com
    ports:
      - 8080:80

  container2:
    image: httpd:2.4
    container_name: container-2
    environment:
      - VIRTUAL_HOST:container2.com
    ports:
      - 8081:80
```
- after you have filled in the docker-compose.yml with the code above, save and run the file by using command 

`docker-compose up -d`

- You can access the container by opening localhost:`<port>`, for this example it is running on localhost:8080 and localhost:8081

## Conclusion

- As my writing has reached it's end, i would like to say thank you for reading this article and have a try playing around with nginx reverse proxy, maybe it will give you more ideas on how to manage your site deployment
Laravel organise migrations into folders
Tags: laravel, migrations
Published: 2022-07-12 06:20:15

---
title: Laravel organise migrations into folders
published: true
date: 2022-07-03 12:23:00 UTC
tags: laravel, migrations
canonical_url: https://dcblog.dev/laravel-organise-migrations-into-folders
---

When a project grows the migrations folder can contain a lot of migration, ever wanted to desperate them into folders? turns out it's easy to so. All you need to do is tell Laravel where to read the migrations from.

In your AppServiceProvider.php boot call, you can call `$this->loadMigrationsFrom()` and give it a path of all the folder locations:

```php
$migrationsPath = database_path('migrations');
$directories = glob($migrationsPath.'/*', GLOB_ONLYDIR);
$paths = array_merge([$migrationsPath], $directories);

$this->loadMigrationsFrom($paths);
```

Now when you run

```php
php artisan migrate
```

all folders will be scanned.

To migrate specific folders use --path for example for all migration in a folder called posts

```php
php artisan migrate --path=/database/migrations/posts
```

or to make migration in a folder:

```php
php artisan make:migration create_posts_table --path=/database/migrations/posts
```
Whatsapp Clone for Android & IOS using Flutter & Python - Part 7 (Complete Tutorial)
Tags: flutter, firebase, python, tutorial
Published: 2022-07-03 11:39:34


Hey fellas I am Yash Makan back with another article. Today we are going to continue our journey where you and I are going to create a complete whatsapp applicaion from scratch. Yup, from very start till the end. This is the part 7 of the series so If you have missed the previous parts then I will highly suggest you to check the [playlist](https://www.youtube.com/playlist?list=PLm8trMDxkTIlIJJqIHK12PiT36C8RpQCs) to understand better. If you don’t know about whatsapp application then basically it’s a social media messaging application where user can send messages to their friends & family. It also has features like video calling, status sharing and much more. And if you are thinking, are we going to develop all these features?? then the answer is yes my friend... Also If you are tired of reading and want me to get out of your mind then I’ve got a video covering all this just watch the youtube video below.

{% youtube TQ7n9p8aWpQ %}


## Source code

Source Code is Available in the description box below in the video. So do check it out...

## Subscribe For More

[![YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvjpg9zn6xfcdkfxhl0x.png)](https://www.youtube.com/channel/UCLO_mjF4nvD4wYnTYRlYXsA?sub_confirmation=1)

## Contact Me

Website: [yashmakan.co.in](http://yashmakan.co.in)

Twitter: [@Yash_Makan](https://twitter.com/Yash_Makan)

## Other Interesting Articles

- [21 must-read books for kids, beginner, advanced & interview with PDF 🐍](https://dev.to/yash_makan/21-must-read-books-for-kids-begineer-advanced-interview-with-pdf-56c7)
- [Improve your workflow using Automation in Python](https://dev.to/yash_makan/everything-about-automation-in-python-pc-mobile-web-raspberry-pi-4cgh)
- [4 ways to create modern GUI in python in the easiest way possible](https://dev.to/yash_makan/4-ways-to-create-modern-gui-in-python-in-easiest-way-possible-5e0e)
- [4 Free hosting platforms for python web app with step-by-step process](https://dev.to/yash_makan/4-best-python-web-app-hosting-services-for-freewith-complete-process-57nb)
- [18 Python one-liners that will speed up your coding process.](https://dev.to/yash_makan/18-python-one-liners-that-will-speed-up-your-coding-process-21md)
- [AI bot that could answer your questions](https://dev.to/yash_makan/ai-bot-that-could-answer-any-questions-asked-gmn)
- [Generate your own favourite TV episode using python](https://dev.to/yash_makan/generate-your-own-favourite-tv-episode-using-python-1pb3)
Filter database records without SQL
Tags: nocode, sql, react, vue
Published: 2022-07-03 11:35:41

[DoTenX](dotenx.com) is an open-source no-code backend builder that you can use to build mobile or web applications.

You can use DoTenX with other no-code tools like Webflow or Flutterflow or with your custom code built with technologies like React, Vue, Svelte or Flutter, React Native, etc. 

In this very short teaser you can see how easily without writing any SQL query you can filter the data in your tables.

As you can see in this video, in order to get the data from your tables, all you need to do is to make an HTTP request to an API that DoTenX provides.

With the Visual Query Builder, you can even see how the body of the API should look like.

{% youtube https://youtu.be/_5GRK17KUrg %}

Creating an account on [DoTenX](https://dotenx.com) is easy and free. Would love to see what you can build with DoTenX.

Our repository: https://github.com/dotenx/dotenx
Whatsapp Clone for Android & IOS using Flutter & Python - Part 6 (Complete Tutorial)
Tags: flutter, firebase, programming, tutorial
Published: 2022-07-03 11:30:50


Hey fellas I am Yash Makan back with another article. Today we are going to continue our journey where you and I are going to create a complete whatsapp applicaion from scratch. Yup, from very start till the end. This is the part 6 of the series so If you have missed the previous parts then I will highly suggest you to check the [playlist](https://www.youtube.com/playlist?list=PLm8trMDxkTIlIJJqIHK12PiT36C8RpQCs) to understand better. If you don’t know about whatsapp application then basically it’s a social media messaging application where user can send messages to their friends & family. It also has features like video calling, status sharing and much more. And if you are thinking, are we going to develop all these features?? then the answer is yes my friend... Also If you are tired of reading and want me to get out of your mind then I’ve got a video covering all this just watch the youtube video below.

{% youtube GYKDXuk4xYs %}


## Source code

Source Code is Available in the description box below in the video. So do check it out...

## Subscribe For More

[![YouTube](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lvjpg9zn6xfcdkfxhl0x.png)](https://www.youtube.com/channel/UCLO_mjF4nvD4wYnTYRlYXsA?sub_confirmation=1)

## Contact Me

Website: [yashmakan.co.in](http://yashmakan.co.in)

Twitter: [@Yash_Makan](https://twitter.com/Yash_Makan)

## Other Interesting Articles

- [21 must-read books for kids, beginner, advanced & interview with PDF 🐍](https://dev.to/yash_makan/21-must-read-books-for-kids-begineer-advanced-interview-with-pdf-56c7)
- [Improve your workflow using Automation in Python](https://dev.to/yash_makan/everything-about-automation-in-python-pc-mobile-web-raspberry-pi-4cgh)
- [4 ways to create modern GUI in python in the easiest way possible](https://dev.to/yash_makan/4-ways-to-create-modern-gui-in-python-in-easiest-way-possible-5e0e)
- [4 Free hosting platforms for python web app with step-by-step process](https://dev.to/yash_makan/4-best-python-web-app-hosting-services-for-freewith-complete-process-57nb)
- [18 Python one-liners that will speed up your coding process.](https://dev.to/yash_makan/18-python-one-liners-that-will-speed-up-your-coding-process-21md)
- [AI bot that could answer your questions](https://dev.to/yash_makan/ai-bot-that-could-answer-any-questions-asked-gmn)
- [Generate your own favourite TV episode using python](https://dev.to/yash_makan/generate-your-own-favourite-tv-episode-using-python-1pb3)
AWS Application Migration Service now Supports Automated Application Modernizations
Tags: aws, amazon, cloud, news
Published: 2022-07-03 11:21:46

The support for new automated application modernizations is now available in AWS Application Migration Service. AWS Application Migration Service allows quickly rehosting applications on AWS. It automatically converts your source servers from physical, virtual, or cloud infrastructure to run on AWS.

Configuration for application modernization can be applied before server migration. The following features are now supported:

- Conversion of CentOS to Rocky Linux distribution.
- Change SUSE subscription to AWS-provided SUSE subscription.
- Configure disaster recovery on migrated servers
Use an AI to write your articles
Tags: ai, writing
Published: 2022-07-03 09:51:32

**Introduction**

If you're like me, you've been hearing a lot about artificial intelligence (AI) recently. It's everywhere-on the news, in movies, and even in our homes. But what is AI? How does it work? And why should small business owners care about it? In this article, we'll look at what an AI copywriter is and how it can help your company grow.

**What is an AI copywriter?**

An artificial intelligence (AI) copywriter is a computer program that writes content. You can use it to write blog posts, articles and sales copy for your website or social media pages. It also allows you to target specific audiences with targeted content, which can help you increase conversions and sales.

**Understanding the benefits of AI-generated content**

- Save time
- Create more content
- Create better content
- Create more relevant content to your audience
- Create engaging, personalized copy

**How to create your own AI-generated content**

- Create an outline of what you want to say.
- Set up your AI copywriter.
- Give the AI copywriter a topic and keywords, then review its work when it's done. If you like what you see, use it!

**AI has a lot to offer small business owners.**

If you're a small business owner, you know how tough it can be to get started with content marketing. It can be hard to find the time and resources to create even the most basic blog posts or social media content for your business. That's where AI can help!

AI has its limitations as well-it can't write an entire blog post on its own-but it does offer some pretty substantial benefits:

- AI saves time. Instead of spending hours researching and writing a blog post, an AI copywriter will do all of that work for you in just a few minutes! This means that once the system is set up, there will be very little effort required on your part to keep your blog updated regularly with new articles or social media updates.


- AI saves money. Instead of paying someone else (or yourself!) hundreds or thousands dollars per month just so they/you don't have to spend hours researching and writing every single article every single day, why not let an algorithm do most of this work instead? It'll save everyone involved some serious cash over time!

**Conclusion**

With AI, you can automate the process of writing blog posts. With the help of AI-generated content, your company can save time and money on writing content for your website or social media platforms.
Python Flask Elasticsearch - indexer command - Part 6 Tutorial
Published: 2022-07-03 11:01:43

Hi, the 6th article devoted to the theme: “How to work with ElasticSearch, Python and Flask” already ready for reading. Here will speak about indexer and elasticsearch-dsl-py python package. All details are here: "[Python Flask  ElasticSearch - indexer command](https://sergiiblog.com/python-flask-elasticsearch-indexer-command/)". Have a pleasant reading.
Python Exercise 19:advanced list sort
Tags: beginners, python, challenge
Published: 2022-07-03 10:58:53

## Question
- Create a function that 
	- takes a list of **numbers or strings** 
	- and returns a list with the items from the original list stored into sublists.
	-  Items of the same value should be in the same sublist.
- The sublists should be returned in the order of each element's first appearance in the given list.

### Example

```
advanced_sort([1,2,1,2]) -> [[1,1],[2,2]]
advanced_sort([2,1,2,1]) ->  [[2,2],[1,1]]
advanced_sort([3,2,1,3,2,1]) -> [[3,3],[2,2],[1,1]]
advanced_sort([5,5,4,3,4,4]) ->  [[5,5],[4,4,4],[3]]
advanced_sort([80,80,4,60,60,3])-> [[80,80],[4],[60,60],[3]]
advanced_sort(['c','c','b','c','b',1,1])-> [['c','c','c'],['b','b'],[1,1]]
advanced_sort([1234, 1235, 1234, 1235, 1236, 1235])-> [[1234, 1234],[1235, 1235, 1235],[1236]]
advanced_sort(['1234', '1235', '1234', '1235', '1236', '1235'])-> [['1234', '1234'],['1235', '1235', '1235'],['1236']]
```
## My solution
- algorithm

```
>>separate the original list to different sublist
  initialist a empty list: new_list 
  add the first number of orginal list into new_list
  for each number in the original list:
	if number equals to the first element of any sublist:
		add number to that sublist
	else:
		add number to an new empty sublist
		  
		  
```
- code

```python
def advanced_sort(original_list: list) -> list:  
    # create a list with the first element of the original_list  
    new_list = [[original_list[0]]]  
    for index, item in enumerate(original_list):  
        if index == 0:  
            continue  
        not_added = True
        # To iterate over every sublist in the new_list
        for sublist_index, sublist in enumerate(new_list):  
            # try:  
            # if item is the same with first element of the sublist of new list and not already added            
            if item == sublist[0] and not_added:  
                # add item to that sublist  
                sublist.append(item)  
                not_added = False  
            # if no same item appear after checking the whole new list and not already added  
            if item != sublist[0] and sublist_index == len(new_list) - 1 and not_added:  
                # add the item the end of the new_list  
                new_list.append([item])  
                not_added = False  
    return new_list
```

## Other solution

```python
def advanced_sort(lst):
	return [[i] * lst.count(i) for i in sorted(set(lst), key=lst.index)]
```

- the algorithm

```
>>transform the original list into a set, thus only unique item will appear
>>rearrange the transformed set by the index order
>>count how many time each unique appear in the original list
>>form a new list by putting in each item times their occurance in a sublist
```

## My reflection
- about `while` loop
	- the loop will not instantly end when the boolean condition is changed to false
	- need to use if condition to control the execution of code
- Just admire people can write short code in elegant way

## Credit
- challenge on [edabit](https://edabit.com/challenge/6vSZmN66xhMRDX8YT)