teleren/devto huggingface dataset:
Udemy Course - Laravel Roles and Permissions Without Package
Tags: laravel, php, tutorial, beginners
Published: 2022-05-16 11:37:46

{% embed https://www.youtube.com/watch?v=oI56AXNh778 %}
Cupon Code: LARAVELLER1000
Link: https://www.udemy.com/course/laravel-9-admin-panel-learn-roles-and-permissions/?couponCode=LARAVELLER1000

This video will show you the introduction to my Udemy course.  Laravel roles and permissions without a package.

Laravel 9 Tutorial.
Laravel tutorial.

Support me: 
https://www.patreon.com/Laraveller
https://paypal.me/TonyXhepa
Cloudways hosting: https://www.cloudways.com/en/?id=1107304


Follow me:
Twitter: https://twitter.com/Laravellercom
Facebook Page: https://www.facebook.com/1laravellercom
Instagram: https://www.instagram.com/laravellercom/
Github: https://github.com/laraveller
Website: https://laraveller.com/
Blog: https://blog.laraveller.com/

Setup VS CODE for Laravel: https://youtu.be/EliywWn4IK4
Setup Mac for development: https://youtu.be/yxuR5myrVi4

Playlists:
Laravel 9 Media Library - https://bit.ly/3LpJmVr
Laravel Essentials Full Tutorial - https://bit.ly/3vplyuC
Laravel Mail Tutorial - https://bit.ly/37mJUNh 
Laravel Restaurant Reservation - https://bit.ly/3Jc5IcG
Spatie Laravel Permission - https://bit.ly/3pOsOhN
Laravel Testing For Beginners - https://bit.ly/3t1gNq4
Laravel Roles and Permissions - https://bit.ly/3gOhM7d
LARAVEL INERTIA MOVIE APP - https://bit.ly/3FVMp4Q
Laravel Livewire Movie App - https://bit.ly/3s8D6v1
Laravel Classified Website - https://bit.ly/3nsFRnb
Livewire Employees - https://bit.ly/2ZtIpZY
Laravel Employees Management - https://bit.ly/3Gglt14
Laravel admin panel - https://bit.ly/3CcX75M
PyScript XSS
Tags: xss, security, python, pyscript
Published: 2022-05-16 11:37:02

# Run XSS in Your browser
## With additional steps

## Intro
Last month Anaconda, release the PyScript https://github.com/pyscript/pyscript. Simplifying: The Python in browser, with HTML and JavaScript. Javascript and python, in the browser,. What can possibly can go wrong. 

> DISCLAIMER: It's fun post, pyscript is great idea, but as everything, security should be some concern. 

## PyScript XSS
Let's check how it works:
index.html
```
<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
        <script defer src="https://pyscript.net/alpha/pyscript.js"></script>
    </head>
    <body>
        <py-script src="/test.py"></py-script>
    </body>
</html>
```
test.py

```
print('as<img src=x onerror=alert(1)>df')
```

and here we are, with XSS:

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

## Outro
Make no mistake, The PyScript, is brilliant product! Just don't forget about security.
Attention Flutter Developers
Published: 2022-05-16 11:22:47

A 🤟🏻 from the tribe at www.elRed.io

We are a 200 crore company (www.atinks.com) that is building a team for its new startup to solve a global problem using technology. 

We are looking for passionate Flutter Developers with an experience of 2 - 3 years. The company operations are based in Mumbai but our team will work remotely. 

If this quick brief interests you, we would request you to please have a look at our website https://elred.io/ . Our website, under the section of “why join the tribe"shares a video from our founder on the compensation & benefits we offer that is self explanatory. 

To help you understand us better, may we recommend 2 options at this stage 

a) Phone call with me to answer your questions.

b) Virtual video call with me and the founder to answer your questions.

Here is the JD for you to understand it in specifics.

JD for Flutter Developer - https://docs.google.com/document/d/1vVNxzPMk_83XPbnUf-5ealUHhUF0YQkxB3zoYkOvwRc/edit?usp=drivesdk

Please do reply to this msg if you are interested.  Thank You for your attention to this 🙏🏻😊

Note - We asses you on your practical flutter skills and things which you are passionate about and nothing else 😃😃✌🏻
Attention Node js Developers
Published: 2022-05-16 11:18:57

A 🤟🏻 from the tribe at www.elRed.io

We are a 200 crore company (www.atinks.com) that is building a team for its new startup to solve a global problem using technology. 

We are looking for passionate Flutter Developers with an experience of 2 - 3 years. The company operations are based in Mumbai but our team will work remotely. 

If this quick brief interests you, we would request you to please have a look at our website https://elred.io/ . Our website, under the section of “why join the tribe"shares a video from our founder on the compensation & benefits we offer that is self explanatory. 

To help you understand us better, may we recommend 2 options at this stage 

a) Phone call with me to answer your questions.

b) Virtual video call with me and the founder to answer your questions.

Here is the JD for you to understand it in specifics.

JD for Node.js Developer -  https://docs.google.com/document/d/1vVNxzPMk_83XPbnUf-5ealUHhUF0YQkxB3zoYkOvwRc/edit?usp=drivesdk

Please do reply to this msg if you are interested.  Thank You for your attention to this 🙏🏻😊

Note - We asses you on your practical flutter skills and things which you are passionate about and nothing else 😃😃✌🏻
What Tool Do You Wish Was Open Source?
Tags: discuss, opensource, watercooler, programming
Published: 2022-05-16 11:16:13

Open Source has been rising in popularity and open source alternatives have been heavily competing with enterprise solution. Open source solutions provide developers with so much flexibility to create amazing projects, and encourages building strong communities.

[Medusa](https://medusajs.com) is one of the open source solutions that gives developers and merchants alike full control over their tech stack when building their ecommerce stores. Medusa's customization and extendable features and capabilities makes it a strong alternative for enterprise solutions like Shopify.

What tools do you wish were open source? And how do you think the community would benefit from making such tools open source?
SQL Injection Attacks
Published: 2022-04-04 03:28:20

Injection attacks are one of the top three most common security breaches according to OWASP Top 10. Injection attacks pass a string of code as an input to a web app, which alters the operation of the application by executing certain commands. One of the most common injection attacks is SQL injection. 

**_Why is SQL Injection Used?_**
SQL Injection can be used by attackers to: 

**Bypass Authentication** - Attackers can pass a piece of code to the database that allows them to bypass the authentication process.  

`SELECT * FROM users WHERE username = '' OR 1=1-- ' AND password = 'foo'`

What will happen here is 1=1 will return 'true', and everything after '--' will not be executed because '--' is used to comment out code in SQL, so the rest of the query will be ignored. 


**Exfiltrate Data** - There are many areas that can be exploited to steal data from a targeted source. A common HTTP Server request could look like this: 

`SELECT * FROM users INTO OUTFILE '/var/www/html/output.txt'` 

This will select all from users table and export that data as a text file. 



**Execute OS commands** - Beyond databases, attackers can gain access to an entire operating system and run system commands. SQL injection attacks are often used as a vector for gaining command of the shell. If an attacker has enough information about their target, they can pass something like this: 

`' union select 1, '<?php system($_GET["cmd"]); ?>' into outfile '/var/www/dvwa/cmd.php' #`

This piece of PHP code will allow the attacker to execute os commands. They will have access to the shell via their browser. 
`<?php system($_GET["cmd"]); ?>` 


**Vandalism/DoS** - Attackers can drop tables from a database and otherwise break things with SQL injection. Here is one of my favorite comics: 

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


**_Prevent SQL Injection_**
Here are some steps can be taken to prevent SQL injection attacks: 

**Sanitize all inputs.** Basically, the client input cannot be trusted. Use whitelists and when possible, do not let user directly communicate with the database. Perform server-side validation. 

**Do not expose native database errors.** Attackers can use database errors to learn more about your database and find vulnerabilities. 

**Use Object Relational Mapping (ORM).**  ORM creates a layer between the language and the database. In Rails, ActiveRecord  translates between Ruby and SQL. This is mostly secure, but some things can still be exploited.
Nuxt 2 dynamic sitemap with data from an api
Tags: nuxt, sitemap, dynamic, express
Published: 2022-05-16 11:13:42

You want to dynamically build your sitemap off some dataset / api then this is for you.

Whether you have express api enabled in your nuxt project or not, this easy 3 step process will get you there.

```javascript
// nuxt.config.js
export default {
  serverMiddleware: [
    { path: "/sitemap.xml", handler: "~/api/sitemap/index.js" },
  ],
};
```

```
// folder structure
root
└───pages
└───api
  └───sitemap
      │  index.js
```
 
```javascript
// api/sitemap/index.js
const app = require("express")();

app.all("/", (req, res) => {
  try {
    // you can loop through some data and build this up
    let sitemap = `
      <?xml version="1.0" encoding="UTF-8"?>
      <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        <url>
          <loc>http://www.example.com/foo.html</loc>
          <lastmod>2018-06-04</lastmod>
        </url>
      </urlset>
    ` 

    res.set('Content-Type', 'text/html');
    res.status(200).send(Buffer.from(sitemap));
  } catch (error) {
    res.status(500).send(error.message)
  }
})

module.exports = app;
```

Install express if you havent.

Visit your localhost site map route.
Next.js API routes with Koa.js
Tags: nextjs, koajs, crud, javascript
Published: 2022-05-16 11:12:55

I'll keep this post short and sweet :)

I've been doing some CRUD with Next.js API routes, and I've always liked using Koa.js for creating the API's in Node.js.

I think Koa.js is a great fit for Next.js because it is fully async, error handling is easy, and the codebase is very small so the initialization of the Koa App is very fast.

I've decided to integrate Koa.js (and Koa Router) with the Next.js API routes:

Usage is simple as this (in your API file):

```ts
//pages/api/[[...demo]].ts
import { KoaApi, withKoaApi } from 'nextjs-koa-api'

const api = new KoaApi({ router: { prefix: '/api' } })

api.use((ctx) => {
  ctx.body = 'Hello World'
})
.router.get('/:todo',....)
.post('/:todo',....)
.delete('/:todo',....)

//use helper function
export default withKoaApi(API)

//or the standard way
export default function handler(req: NextApiRequest, res: NextApiResponse) {
  return api.run(req, res)
}

```

Check out the repository where you can find complete documentation and a small Next.js demo app.

https://github.com/ivandotv/nextjs-koa-api

I'm open to suggestions and contributions.

Thanks!
How to Become a React JS Developer? Complete Roadmap
Published: 2022-05-16 10:48:51

**Introduction to React.js:**
React.js is a front-end JavaScript library for building user interfaces. It was developed by Facebook and is maintained by Facebook and the open-source community.

**Prerequisites to learn React:**
There’s only one prerequisite and that is:

1. JavaScript

NOTE :
- Do not jump straight into React.js without understanding JavaScript because otherwise, you will be stuck in tutorial hell.

**Step 1:**
Before learning React, you should have a good understanding of these JavaScript topics :
- Basic Syntax
- ES6+ features
- Arrow functions
- Template literals

**JavaScript prerequisites:**
These concepts are important before dive into React

- Array Methods
- Object property shorthand
- Destructuring
- Rest operator
- Spread operator
- Promises
- Async/Await syntax
- Import and export syntax

**React.js Roadmap**

Step 2 :

**Basic things to learn in React.js**
- File & Folder structure
- Components
- JSX
- Props
- State
- Events
- Styling
- Conditional Rendering

Step 3 :

**Learn about React.js Hooks - the essential hooks to learn :**
- useState
- useEffect
- useRef
- useContext
- useReducer
- useMemo
- useCallback

Step 4 :

**Then learn some of the React.js UI Frameworks :**
- Material UI
- Ant Design
- Chakra UI
- React Bootstrap
- Rebass
- Blueprint
- Semantic UI React


Step 5 :
**Learn to use some of the most popular React.js packages**
- React Router
- React Query
- Axios
- React Hook Form
- Styled Components
- Storybook
- Framer Motion

Step 6 :
**Learn how to manage state with state management tools**
- Redux
- MobX
- Hookstate
- Recoil
- Akita

Step 7 :
**More things to learn after learning React.js fundamentals**
- Next JS ( Recommended )
- Gatsby
- TypeScript
- React Native
- Electron

Step 8 :
**Learn to test your React.js applications with some of these libraries/frameworks:**

- Jest
- Mocha
- Testing Library
- Enzyme

Follow me on Instagram: [rafikadir](https://www.instagram.com/i_am_rafikadir/)
Make your promises faster | 1 Minute Tip
Tags: javascript, webdev, api, tutorial
Published: 2022-05-16 10:09:11

As a javascript developer, you may use promises **ALL** the time. If you use them you know about the `await` keyword. Used to wait for a promise to resolve.

But you can make these quicker, say you are interacting with two separate endpoints for example :

`let endpointApiOne = await getWeatherEndpoint();
let endpointApiTwo = await getUserEndpoint();
`

While this works, there is a slight performance issue with this. These two different calls will be performed synchronously.

But do not fear! There is a way to allow these to run asynchronously the magic **Promise.allSettled**
`
let [endpointApiOne, endpointApiTwo] = 
    await Promise.allSettled([getWeatherEndpoint(), getUserEndpoint()])`

This will return an array of fulfilled ( or rejected ) promises instead.

For more reading have a look at the MDN Docs
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/allSettled

That is the first of 1 minute tips!
Denova GloSoft Limited- Providing IT Services & SAP Services in Doha Qatar
Tags: sap, erp
Published: 2022-05-16 10:08:06

**_DENOVA GLOSOFT LIMITED(dglitservices)_**is among the top **_[software development company](https://www.dglitservices.com/software-development-company-qatar)_** that provide all-encompassing IT services. We have the expertise to meet the diverse requirements of IT solutions and software development. Our infrastructure is in place and we have the resources that can provide to all needs. Efficiency is covered by **_[SAP services and consultancy](https://www.dglitservices.com/service/sap-software-and-services)_**, Oracle, Microsoft SharePoint, Dynamics, Salesforce, CAFM, EHS, Mobile Apps Development of the Odoo platform, CRM web applications, HCM, and BI.

We have built a reputable name for our company throughout of Middle East, India and Europe through providing high-level expertise in business and techniques for high-quality solutions. We are an approved CMM Level 3 company with offices in Qatar, United Kingdom, USA, India, and Italy.

As a leading IT solutions provider, we at **_DENOVA GLOSOFT LIMITED ([dglitservices](https://www.dglitservices.com))_** utilize agile and flexible methods to develop highly scalable products and solution-oriented IT services for clients across multiple industries. Our philosophy is to provide open communications and flexible collaborative infrastructures. Our goal is on creating user-centric, relevant and high-tech technologies and solutions to support future projects. dglitservices believes in providing value in every stage of the retention process for customers.
Windows 12, but for web
Tags: javascript, webdev, beginners, programming
Published: 2022-05-16 10:00:36


Hello!

Recently I started creating a clone of Windows 11 for web. My main focus while creating this clone was performance & features. It must work smoothly even on a low end device (like mine).
The UI isn't complete yet. I'll be working on it.
👇👇👇👇
Please try it once and if you like it drop a comment.
While making it got frustrated very times your one comment is a source of motivation for me.
It's free.
Try it---->[Windows 22 web](https://win11x.netlify.app/)
Try it---->[Windows 22 web](https://win11x.netlify.app/)
Get it---->[Windows 22 web](https://win11x.netlify.app/)

Also watch on youtube--> [Click here](https://youtu.be/rlF0s2L9t_Y)
About me!!👇👇😔😭👇👇
I'm 14 years old boy. I belongs to a middle class family😔. As i am interested in computer from beginning .I started my journey as a Web Developer and created Windows 11 clone. I makes it on my PC(Which is too much slow) with 2gb ram and 32gb HDD.You can't imagine how difficult was it to perform such heavy tasks on very old computer even i have to wait for more than 10minutes to load Visual Studio Code properly😢.
If you wanna help & support me just buy me one Coffee☕ it was a humble request😔. I will spent this on my study.[Click Here](https://www.buymeacoffee.com/rehman0)
Your one coffee give me a smile and a gift of happiness.
[Buy me a coffee](https://www.buymeacoffee.com/rehman0)
[Buy me a coffee](https://www.buymeacoffee.com/rehman0)
How To Create Cart Abandonment Campaign
Published: 2022-04-25 08:45:46


**Before You Start**

_Here are some things to know before you begin:_

1. Cart Abandonment is available with a Pro Subscription or higher.
2. Cart Abandonment uses our Exit-Intent technology. It tracks the user’s mouse position and triggers a campaign as the mouse approaches the top of the browser window – indicating they intend to navigate away from your site.

**Configure Cart Abandonment**

_When you are ready to set up a Cart Abandonment campaign, follow these steps:_

1. Navigate to the Display Rules view in the campaign builder.
2. Next, add a rule for Exit-Intent.
3. Next, add the URL Path Contains condition for your checkout page.Contains Checkout
4. When you are finished, click Save.

**Troubleshooting**

When adding a path to the page targeting field, I’m getting a message that says ‘Unnecessary URL components have been removed’
Depending on your setup, the Page Targeting rule cannot be used to target any part of a URL that comes after a ‘?’ or a “#’ in the URL path, such as ‘website.com/page?key=value’, or ‘website.com/page#heading’ since these are URL parameters and anchor tags, respectively. Instead you will need to use the specific rules for targeting URL parameters and the rules for targeting anchor tags.

**Reference Blog**
https://www.gomahamaya.com/cart-abandonment-campaigns/
Visualizing execution of Python code and profiling
Tags: python, datascience, programming, productivity
Published: 2022-05-16 09:57:02

Wouldn't it be amazing to see execution of Python code? 

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

Reloadium displays progress of function frames and provides timing information during debugging.

The profiler only collects timing information from the lines within currently debugged function making it extremely optimized and lightweight solution for everyday use.

More details on the Github repo: https://github.com/reloadware/reloadium
Windows 22,But for web
Tags: javascript, webdev, beginners, programming
Published: 2022-05-16 09:56:50


Hello!

Recently I started creating a clone of Windows 11 for web. My main focus while creating this clone was performance & features. It must work smoothly even on a low end device (like mine).
The UI isn't complete yet. I'll be working on it.
👇👇👇👇
Please try it once and if you like it drop a comment.
While making it got frustrated very times your one comment is a source of motivation for me.
It's free.
Try it---->[Windows 22 web](https://win11x.netlify.app/)
Try it---->[Windows 22 web](https://win11x.netlify.app/)
Get it---->[Windows 22 web](https://win11x.netlify.app/)

Also watch on youtube--> [Click here](https://youtu.be/rlF0s2L9t_Y)
About me!!👇👇😔😭👇👇
I'm 14 years old boy. I belongs to a middle class family😔. As i am interested in computer from beginning .I started my journey as a Web Developer and created Windows 11 clone. I makes it on my PC(Which is too much slow) with 2gb ram and 32gb HDD.You can't imagine how difficult was it to perform such heavy tasks on very old computer even i have to wait for more than 10minutes to load Visual Studio Code properly😢.
If you wanna help & support me just buy me one Coffee☕ it was a humble request😔. I will spent this on my study.[Click Here](https://www.buymeacoffee.com/rehman0)
Your one coffee give me a smile and a gift of happiness.
[Buy me a coffee](https://www.buymeacoffee.com/rehman0)
[Buy me a coffee](https://www.buymeacoffee.com/rehman0)
Uploading Multiple Files in Vue.js using a Laravel API
Published: 2022-05-16 09:49:08


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

Recently l wanted to upload documents from Vue.js to a Laravel backend. All API's were set up and were working in Postman. Doing in vue.js was a bit of a problem. l was using Vuetify [](https://vuetifyjs.com/) for the styling so l used a v-file-input set to `multiple` using the predefined prop.

On upload, l was using Axios. Basic stuff. To attach documents l created an instance of `FormData()` and appended the documents `formData.append('images[]', this.images)`.

In  my controller in Laravel, l was looping over the array of images and storing them:

```
foreach($request->file('images') as $image){
  $image->store('docs');
}
```
This implementation failed and l did alot of modifications and turns out l had to loop over the documents also in Vue.js like this:

```
this.images.foreach((image, index) => { formData.append('images[]', image) });
```
This finally worked and l hope it works for you too!