teleren/devto huggingface dataset:
Dive into Laravel Sanctum Token Abilities
Tags: laravel, php, api, sanctum
Published: 2023-07-09 10:02:23

---
title: Dive into Laravel Sanctum Token Abilities
published: true
description: 
tags: laravel, php, api, sanctum
# published_at: 2023-07-07 23:24 +0000
---
Laravel has great feature including in Sanctum, that allow to identify logged user and handle the authorize process through token,

**This feature is called Sanctum Token Abilities**

By using Sanctum Token Abilities you can With Laravel sanctum abilities you can specify ability once you create token,

You can use this ability to manage roles and routes due to specific abilities,

For example, you can use Sanctum Token Abilities to set routes that are accessible only to users with specific abilities. You can also perform actions based on a user's abilities, such as showing or hiding certain features or data.

It's simple and you can use it if you don't have multiple or complex roles

**Let's practise with example:**

1- Add following Middlewares lines to `$middlewareAliases` inside `App\Http\Kernel`

```php
'abilities' => \Laravel\Sanctum\Http\Middleware\CheckAbilities::class,
'ability' => \Laravel\Sanctum\Http\Middleware\CheckForAnyAbility::class,
```
2- Assign ability to user with poweful sanctum token by usign this:

```php
$user->createToken('token-name', ['admin'])->plainTextToken;
```
3- Now we can protect our routes, by specifying abilites

In this example, we're protecting the /admin/index route so that only users with the [moderator & admin] ability can access it.

```php
Route::middleware(['auth:sanctum','abilities:moderator,admin'])->prefix('admin')->group(function () {
        Route::get('index', [AdminController::class, 'index']);
    });
```
In this example, we're protecting the /admin/index route so that only users with the [moderator or admin] ability can access it, it means or user has at least one with access the route.

```php
Route::middleware(['auth:sanctum','ability:moderator,admin'])->prefix('admin')->group(function () {
        Route::get('index', [AdminController::class, 'index']);
    });
```

Also, we can check if user token has a specific ability for example through our controller,

```php
        if (auth()->user()->tokenCan('admin')) {
            dd('Hello Admin');
        }
```

**Summary:**
Sanctum Token Abilities is a feature of the Laravel Sanctum package that allows you to specify abilities for a token when it's created. These abilities can be used to manage roles and restrict access to certain parts of your Application.
TO-DO-LIST 15
Tags: webdev, javascript, beginners, design
Published: 2023-07-09 09:44:25

`_The Epic CyberPunk continues _` DESIGN, A practice without which our world would lose it's beauty. I won't let that happen to my app. I would use FIGMA for this job. Although I have never used it in my life but it's a good time to learn it. I have some ideas in my mind but I will keep that in my mind for now . `_The Epic Cyberpunk stops_`.
Unlocking Infinite Possibilities: Explore a Vast Collection of Card Designs with Code Snippets
Tags: webdev, cardui, website
Published: 2023-07-09 09:38:25

In this article, we dive into the captivating world of card designs and present you with an extensive compilation of diverse card UI examples, accompanied by ready-to-use code snippets. Whether you're a seasoned developer seeking inspiration or a beginner looking to level up your web design skills, this resource will ignite your creativity and equip you with the tools to craft visually stunning and interactive card-based user interfaces.

Discover a multitude of card styles, including grid layouts, masonry designs, carousel cards, and more. Each showcased design is accompanied by concise explanations and fully annotated code snippets, enabling you to understand the underlying structure and easily implement them in your projects. From minimalistic and elegant to vibrant and dynamic, these card designs cover a wide range of aesthetics, catering to various industries and use cases.

Additionally, we explore best practices for responsive card layouts, accessibility considerations, and performance optimization techniques, ensuring that your designs not only look impressive but also provide a seamless user experience across different devices and screen sizes.

Embrace this opportunity to elevate your web design skills and unlock a treasure trove of card design inspiration. Let your imagination run wild as you experiment with these code snippets and tailor them to fit your specific project requirements. Get ready to embark on a journey of limitless creativity and transform your web interfaces with captivating card designs.


Please visit once to see our work

[https://github.com/dropways/card-ui](https://github.com/dropways/card-ui)
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km842k8i6ksv9k4huw4w.jpg)
Using Custom Class Selector in Divi
Tags: css, wordpress, divi
Published: 2023-07-09 09:04:32

Some [WordPress page builders](https://www.wppagebuilders.com/best-wordpress-page-builder/) allow you to add custom CSS. This feature is quite useful if you understand CSS as you can achive any style with your knowledge. In Divi, adding custom CSS has been made even easier. You can directly apply custom CSS to a module without defining the selector. The best part is that you can apply different CSS to each device type (desktop, tablet, and smartphone).

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

While it sounds great (the ability to add custom CSS without defining the selector), the approach also has some drawbacks. For some cases, defining the selector by your own is the best way to add custom CSS.

Imagine this example. You want to apply custom style using custom CSS to hyperlinks on the post content. Normally, you can use these selectors `et_pb_post_content a`. However, since Divi does't allow you to define the selector yourself on a module, you can't use the selectors. As a comparison, in Elementor, you can define the selector yourself when adding custom CSS to a widget so that you can combine the predefined selectors and HTML element selectors. Here is an example:

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

##Using Custom Class Selector in Divi

Is there is a solution if you want to use your own selector? Divi has a native module called Code, which you can use to add custom code. The module supports three languages: HTML, JavaScript, and CSS. You can use it to use your custom CSS selector.

In this post, I will show you how to use the Code module of Divi to [create a gradient heading](https://dev.to/sunawang/creating-gradient-heading-in-divi-using-css-1onl).

First, add the Code module to your page. Add your CSS code to the editor. Don't forget to add your code between the opening tag of `<style>` and the closing tag `</style>`. Here is an example:

```
<style>
.gdrnt h1, h2, h3, h4{
    background-image: linear-gradient(to left, #feac5e, #c779d0,#4bc0c8);
    -webkit-background-clip: text;
    display: inline-block;
    -webkit-text-fill-color: #00000000;
}
</style>
```

As you can see, the above CSS code has five selectors (one custom class selector -- `gdrnt` --  and four HTML element selectors). The the combination of these selectors mean target elements with the class selector of `gdrnt` that have either H1, H2, H3, or H4.

If you add the class selector to a module that has one of these heading levels, the gradient will be applied.

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

In addition to custom selector, you can also use the predefined selectors on the Code module of Divi. For instance, you can use these selectors `et_pb_post_content a` to target the links on the post content on a custom template created with Divi Theme Builder.
TO-DO-LIST 10
Tags: webdev, javascript, beginners, programming
Published: 2023-07-09 09:36:47

`_The Epic Cyberpunk plays_` The Basic architecture is done. We have a TaskModule that takes care of all the function that a task should be able to do such as add task , remove task , change it's priority , render the task, changeDate. This is only the basic structure of our app and we will build upon this. 

``` javascript 
const Task = (name , desc) => {
    const date = new Date();
    const priority = "boring"; 
    const Name = name;
    const Desc = desc;  


    return {date , priority, Name, Desc}
}

const TaskModule = (function() {
    const Tasks = []

    function render() {
        console.log(Tasks)
    }

    function addTask(task) {
        Tasks.push(task);
        render()
        
    }

    function removeTask(index) {
        Tasks.splice(index, 1);
        render()
    }

    function changePriority(value , task) {
        task.priority = value;
        render()
    }

    function changeDate(dateval , task) {
        task.date = dateval
        render()
    }

    return {Tasks , addTask , removeTask, changePriority , changeDate}
})()

```
I know there there are OOP principles that are being violated mainly the single responsibility principle(I have no idea if it is being violated or not !!!) But In my defense this app's scale is not big. 
Feel free to give me suggestions on my shit code `_Epic Cyber Punk Continues_`
GETTING STARTED IN WEB DEVELOPMENT : HTML ROADMAP
Tags: html, webdev, beginners, programming
Published: 2023-07-09 09:28:30

And so it begins! You have chosen to take your first steps to web dev – yay you. And your first milestone: learn HTML. In this piece, we’ll have a look at what HTML is, what it does and what you need to know as you get started. In a follow up article (soon), I will wrap it up with the more advanced concepts, so that, at the end, you can have the full picture.

So, what it HTML and why is learning it the very first step in your journey to web development?
As mentioned in the Roadmap – HTML (Hyper Text Markup Language) is a standardized markup language for creating webpages. You can use it to create the backbone of a site and to add the content (text, images, audio and video). HTML marks these up so they can be interpreted and displayed correctly by the browser As you’ll see in later steps, CSS will later come in to style your page – to make it look like website, not like a plain document.


Roadmap:
Html history
Understanding how the browser works
Html Tags
Html Attributes
Html Code Arrangment


Hit me on Github **
Ahmed Makinde Github**
https://github.com/makindeahmed2110
TO-DO-LIST 05
Tags: webdev, javascript, beginners, programming
Published: 2023-07-09 09:09:37

_In Motion Continues_ We have started. The plan would be to make a console app first without any dom manipulation. 

First Thing I did was decide what my app will be able to do and I landed on three features. 
1) Date 
2) Priority 
3) Name And Description

I will achieve this my making a Task Object using a factory function.  

```javascript 
const Task = (name , desc) => {
    const date = new Date();
    const priority = "boring"; 
    const Name = name;
    const Desc = desc;  


    return {date , priority, Name, Desc , render}
}
```

Now It's of no use unless we don't store it somewhere so we created a TaskModule that is gonna take care of adding and removing tasks in a Task array 

```javascript
const TaskModule = (function() {
    const Tasks = []

    function addTask(task) {
        Tasks.push(task);
        
    }

    function removeTask(index) {
        Tasks.splice(index, 1);
    }

    return {Tasks , addTask}
})()
```

I will get to coding but feel free to give suggestions about my approach. _In Motion Ends_
Embarking on Sitecore Headless: Our First Project
Tags: sitecore, api, testing, webdev
Published: 2023-07-09 08:54:26

We recently undertook our first headless project using Sitecore Headless 10.2 and Next.js SDK with SSR. This shift in our tech stack brought significant changes to our development processes.  

Previously, Sitecore MVC development relied heavily on C#, .NET, and the Sitecore SDK and APIs. Now, with Sitecore Headless Services, most of the implementation has moved to the consumer, namely our Next.js application. The front-end had to display data from various sources, including layout and components from Sitecore, as well as marketing and business data from other API sources. 

To overcome dependencies and unblock front-end development, we adopted an approach that emphasized front-end independence. Leveraging Sitecore JSS SDK's "disconnected" mode, frontend developers worked with YAML mock files representing page data. OpenAPI documentation allowed us to easily mock 3rd party APIs using Next.js, enabling us to switch between mocked and live data. API contracts were crucial in resolving development dependencies and synchronizing workflows between teams, facilitating the testing of full user stories. 

While transitioning to the new tech stack, we faced technical challenges as Sitecore developers. Understanding Sitecore Headless Services and Next.js SDK was crucial. Sitecore's robust client library support for Headless made it easier to grasp and utilize. Frontend developers needed to learn about essential Sitecore concepts such as page structure, layouts, placeholders, renderings, and various field types. This foundational knowledge allowed them to create page mock-ups that could be reviewed and adjusted by the Sitecore team. Additionally, selecting the right rendering method and hosting solution on the frontend presented further challenges.  

Ultimately, embracing a headless approach and leveraging JavaScript on the client side streamlined our development process, with clearer roles for different teams and faster iteration compared to deploying .NET assemblies for each change. 

Read the full article [HERE](https://www.allwin-solutions.com/post/our-first-sitecore-headless-project-2)!
Enable HTTPS in Node.js Express Application
Published: 2023-07-09 08:39:28

No matter, In which side you are—being the user of a website or developing your own site—a good online experience tends to involve an authenticated third party and good encryption.

By using HTTPS, We can increase the security of our application, SSL mechanism will encrypt the connection between the user and application server. Data will be transferred in encoded format.

After purchasing certificate from any of the platform like Godaddy, Globehost or other service provider. We get .pem key and .cert file while installing it over our hosting server. So once certificate is installed is installed properly over the hosting server then we need to make changes in our application to convert the api from http to https url.

Now, we will use the native https module to allow our server to start using the HTTPS protocol and the fs module to read the downloaded files jsonworld.key and jsonworld.cert to be used as credential parameters while starting our server in HTTPS mode.

 

Let's have on code below:


``````const fs = require("fs");
const options = {
    key: fs.readFileSync('jsonworld.key').toString(),
    cert: fs.readFileSync('jsonworld.crt').toString()
};
 
const app = require('express')();
const server = require('http').Server(app);
 
server.listen(3000,()=>{
console.log('app listening on port: 3000');
});``````

Run the app with command, node app.js.

Now head over to https://localhost:3000. You will get a response in secure mode.

 

That’s all for now. Thank you for reading and I hope this demo will be very helpful to understanding the setup https module in nodejs express application. You can find more **nodejs sample application** here


Let me know your thoughts over the email demo.jsonworld@gmail.com. I would love to hear them and If you like this article, share with your friends.

This article is originally posted over [jsonworld](jsonworld.com)
آموزش ایجاد دسترسی داینامیک و احراز هویت Jwt در Asp.net Core
Tags: authentication, authorization, aspdotnet, jwt
Published: 2023-07-09 08:10:08

## Authentication در Asp.net Core چیست؟

Authentication یا احراز هویت در Asp Core فرآیندی است که در آن مشخص می شود کاربر چه کسی است. 

## Authorization یا مجوز در Asp.net Core چیست؟

Authorization در Asp Core به فرآیندی اشاره دارد که تعیین می کند کاربر مجاز به انجام چه کاری است. به عنوان مثال، یک کاربر ادمین مجاز است یک سند ایجاد کند، سند را ویرایش کند و آن را حذف کند ولی یک کاربر عادی  فقط مجاز به خواندن اسناد است.

Authorization متعامد و مستقل از Authentication یا احراز هویت است. با این حال، Authorization نیاز به مکانیزم احراز هویت دارد. احراز هویت ممکن است یک یا چند هویت برای کاربر ایجاد کند.

## انواع Authorization در Asp.net Core

Authorization در Asp Core یک Role اعلامی و یک مدل Policy-based ساده را ارائه می دهد. Authorization به صورت requirement(الزامات) بیان می‌شود و Handler(کنترل ‌کننده ‌ها) Claim های کاربر را در برابر requirement ها ارزیابی می‌کنند. بررسی های ضروری می تواند بر اساس Policy های ساده ای باشد که هم هویت کاربر و هم ویژگی های منبعی را که کاربر می خواهد به آن دسترسی پیدا کند ارزیابی می کند.

Authorization یا مجوز Policy-based در Asp.net Core چیست؟
در Asp Core حتی زمانی که از Authorization یا مجوزهای role-based یا claim-based استفاده می کنیم، در واقع از Authorization یا مجوز policy-base استفاده می کنیم. یک policy مجموعه ای از الزامات یا requirement ها را تعریف می کند که کاربر برای دسترسی به یک منبع باید آن ها را برآورده کند. کاربر برای دسترسی باید تمام الزامات را برآورده کند.

## Jwt چیست؟

Jwt یا JSON web token یک روش امن برای انتقال داده ها بین دو طرف در قالب یک شی JSON را فعال می کنند. Jwt یک استاندارد و یک مکانیسم محبوب برای احراز هویت وب است.

## سرفصل های دوره آموزش ایجاد دسترسی داینامیک و احراز هویت Jwt در Asp.net Core
در این دوره آموزشی با استفاده از Policy-based Authorization و requirement ها در Asp.net Core یک مکانیسم دسترسی داینامیک ایجاد خواهیم کردم، سپس در ادامه سیستم احراز هویت Jwt در Asp.net Core را پیاده سازی خواهیم کرد و با استفاده از ابزار Postman سیستم را بررسی و تست خواهیم کرد. در این دوره از آخرین ورژن Asp.net Core یعنی net7 استفاده شده است.

آنچه در دوره آموزش ایجاد دسترسی داینامیک و احراز هویت Jwt در Asp.net Core یاد خواهید گرفت به شرح زیر خواهد بود:

- شخصی سازی و افزودن Identity به Asp.net Core 7
- آشنایی با انواع Authorization در Asp.net Core 7
- آشنایی با مفاهیم requirement ها و handler های Authorization در Asp.net Core 7
- پیاده سازی ماکانیسم دسترسی داینامیک در Asp.net Core 7
- مدیریت Claim و Role ها در Asp.net Core 7 Identity
- مدیریت کاربران در Asp.net Core 7 Identity
- پیاده سازی احراز هویت Jwt در Asp.net Core 7 با قابلیت Refresh Token
دوره آموزش ایجاد دسترسی داینامیک و احراز هویت Jwt در Asp.net Core محبوب ترین دوره کدسل است.
این آموزش هیچ نمونه مشابهی چه در سایت های فارسی و چه غیر فارسی ندارد.
برای دریافت این آموزش روی لینک زیر کلیک کنید:

[آموزش دسترسی داینامیک و Jwt در Asp.net Core](https://codecell.ir/course/3545?utm_source=dev.to&utm_medium=post&utm_campaign=postMarketing)
#LearnedToday: You Don't Know JS!
Published: 2023-07-09 08:10:00

📖 A book by [Kyle Simpson](https://me.getify.com) that needs no introduction.
…or maybe it does! Perhaps for those new to javascript 😉 

🤓 Take the time to read it, to get started on the right foot! 

🔗 https://github.com/getify/You-Dont-Know-JS
آموزش معماری Microservice در ASP.NET Core
Tags: microservices, dotnetcore, grpc, docker
Published: 2023-07-09 08:03:27

معماری میکروسرویس در سال های اخیر به دلیل توانایی آن در ایجاد برنامه های کاربردی بسیار مقیاس پذیر، انعطاف پذیر و قابل نگهداری به طور فزاینده ای محبوب شده است. در ASP.NET Core، معماری میکروسرویس ها را می توان با استفاده از فناوری های مختلفی از جمله Docker، Kubernetes و Service Fabric پیاده سازی کرد.

## معماری میکروسرویس چیست؟

[معماری میکروسرویس](https://codecell.ir/course/71fd?utm_source=dev.to&utm_medium=post&utm_campaign=postMarketing) سبکی از ساخت برنامه های نرم افزاری است که شامل تقسیم یک برنامه بزرگ به سرویس های کوچکتر و مستقل می شود. هر سرویس برای انجام یک کار خاص طراحی شده است و می تواند مستقل از سایر سرویس ها توسعه، گسترش و مقیاس بندی شود. این معماری ماژولار بودن، مقیاس پذیری و انعطاف پذیری را ارتقا می دهد و کاربردهای آن را در مقیاس بزرگ ایده آل می کند.

## سرفصل های دوره آموزش معماری میکروسرویس در Asp.net Core
ما در این [دوره آموزشی](https://codecell.ir/course/71fd?utm_source=dev.to&utm_medium=post&utm_campaign=postMarketing) چندین سرویس مجزا را با استفاده از Asp.net Core 7 و داکر ایجاد و داکرایز خواهیم کرد.

در این سرویس ها از دیتابیس های SQLServer، MongoDb، MySQL و PostgreSQL استفاده خواهیم کرد. در ادامه برای ایجاد یک entry point واحد از API Gateway قدرتمند Ocelot استفاده خواهیم کرد.

در این دوره آموزشی برای ایمن سازی میکروسرویس ها از JWT استفاده خواهیم کرد. و در نهایت برای برقراری ارتباط بین میکروسرویس ها از gRPC و RabbitMQ استفاده می کنیم. همچنین برای استفاده از RabbitMQ از MassTransit استفاده خواهیم کرد.

## نتیجه گیری:

یادگیری معماری میکروسرویس در ASP.NET Core  برای توسعه دهندگانی که می خواهند برنامه های کاربردی مقیاس پذیر و قوی بسازند، یک مهارت ضروری است. میکروسرویس ها یک رویکرد ماژولار برای توسعه نرم‌افزار ارائه می‌کند و به توسعه ‌دهندگان اجازه می ‌دهد تا سرویس ‌های جداگانه ‌ای را ایجاد کنند که به طور مستقل قابل استقرار، مقیاس‌ بندی و نگهداری باشند. با استفاده از مزایای میکروسرویس ‌ها، مانند افزایش چابکی ومقیاس ‌پذیری بهبود یافته توسعه‌ دهندگان می‌توانند برنامه‌ های انعطاف‌ پذیرتر و پاسخگوتری بسازند. علاوه بر این، استفاده از ابزارهایی مانند Ocelot و Docker می‌تواند فرآیند ساخت و استقرار میکروسرویس‌ها را ساده ‌تر کند و مدیریت و مقیاس ‌بندی سیستم‌های پیچیده توزیع‌ شده را آسان‌ تر کند. به طور کلی، تسلط بر معماری میکروسرویس در ASP.NET Core یک مهارت ارزشمند است که می تواند به توسعه دهندگان در ساخت برنامه های کاربردی با کارایی بالا، مقیاس پذیر و انعطاف پذیر کمک کند.
برای دریافت این دوره جذاب و فوق العاده روی لینک زیر کلیک کنید:
[دوره آموزش معماری میکروسرویس در Asp.net Core](https://codecell.ir/course/71fd?utm_source=dev.to&utm_medium=post&utm_campaign=postMarketing)
Image gallery with smooth hover effect
Tags: codepen, css, animation, webdev
Published: 2023-07-09 08:02:52

We made a Image gallery with smooth hover effect in Pure CSS

---

{% codepen https://codepen.io/Jon-Snow77/pen/VwVrYXo %}

---

Thanks for Reading ❤️! Check my website [Demo coding](https://democoding.in/) for updates about my latest CSS Animation, CSS Tools, and some cool web dev tips. Let's be friends!

Don't forget to subscribe to our channel : [Demo code](https://www.youtube.com/@democode)