DEV Community: Fersho Pls

How to pass non-string parameters to Middleware Laravel

Fersho Pls — Thu, 18 Jul 2024 15:56:21 +0000

<?php

namespace App\Domains\AppFeatures\Middleware;

use App\Domains\AppFeatures\AppFeatures;
use App\Models\User;
use Closure;
use Illuminate\Http\Request;

class AppFeatureMiddleware
{
    public function __construct(
        protected AppFeatures|array $features,
        protected null|User         $user = null,
    )
    {
    }

    public static function make(AppFeatures|array $features, User $user = null)
    {
        $id = uniqid();
        app()->bind($id, fn () => new static($features, $user));
        return $id;
    }

    /**
     * Handle an incoming request.
     *
     * @param \Illuminate\Http\Request $request
     * @param \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse) $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle(
        Request $request,
        Closure $next,
    )
    {
        if (!AppFeatures::has($this->features, $this->user)) {
            abort(404);
        }

        return $next($request);
    }
}

Route::middleware(
AppFeatures::middleware(AppFeatures::CAN_CREATE_CLIENTS)
)->get('/test', fn() => 'Hello World');

Stop Using Jest, Mocha, Chai !!

Fersho Pls — Wed, 03 Jul 2024 21:14:50 +0000

This three frameworks are a nightmare to install and work with typescript!

Instead do:

bun i -D vitest

then

bun run vitest

CSS tabla con filas y columnas fijas

Fersho Pls — Mon, 06 May 2024 17:05:56 +0000

<div class="table-sticky">
  <table>
  </table>
</div>

.table-sticky {
    overflow-y: auto;
    max-height: 95vh;
}

.table-sticky table {
    table-layout: fixed;
    position: relative;
}

.table-sticky th {
    position: sticky;
    top: 0;
}

.table-sticky th:nth-child(1) {
    z-index: 1;
}

.table-sticky th:nth-child(1),
.table-sticky td:nth-child(1) {
    position: sticky;
    left: 0;
    background-color: white;
}

.table-sticky th,
.table-sticky td {
    background-color: white;
}

Quickest and easiest way to setup JMeter to test a simple login

Fersho Pls — Fri, 03 May 2024 03:09:33 +0000

Install JMeter

https://jmeter.apache.org/download_jmeter.cgi

Install Java JRE

https://www.java.com/en/download/

2. Create a New JMeter Test Plan:

Open JMeter.

In the "Test Plan" tree, right-click and select "Add" -> "Threads (Users)" to create a thread group.

In the thread group properties, set the following:

Number of Threads (Users): The number of concurrent virtual users to simulate. Start with 1 and adjust later for load testing.

Ramp-Up Period (seconds): The time it takes for all threads to reach the full number (usually 1 second).

Loop Count: The number of times each thread will execute the test (usually 1 for a login test).

3. Add an HTTP Request Sampler:

Right-click on the thread group and select "Add" -> "Sampler" -> "HTTP Request."

In the HTTP Request sampler properties, configure the following:

Protocol: HTTP (assuming port 80) or HTTPS if using SSL.

Server Name or IP: localhost (or the actual IP address of your server if not local).

Port Number: 8000

Method: POST

Path: /login (the endpoint for login)

4. Hit play

Laravel +11 how to set validateCsrfToken dinamically

Fersho Pls — Thu, 02 May 2024 22:41:50 +0000

<?php

namespace App\Providers;

use Illuminate\Contracts\Foundation\Application;
use Illuminate\Foundation\Http\Middleware\ValidateCsrfToken;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Register any application services.
     */
    public function register(): void
    {
        //
    }

    /**
     * Bootstrap any application services.
     */
    public function boot(): void
    {
        // here we can use any value from env() or config()
        ValidateCsrfToken::except('*');
    }
}

Svelte beats react: faster, simpler, and better for your next web app!

Fersho Pls — Tue, 06 Dec 2022 02:54:09 +0000

Svelte is a relatively new JavaScript framework, but it has gained popularity for its simplicity and performance. Many people believe that Svelte is better than React for several reasons:

Svelte is faster than React. Svelte compiles your app's code at build time, which means that your app will run faster and use less memory at runtime. This can result in a better user experience and improved performance.

1. Svelte is easier to learn than React.

Svelte has a simpler and more intuitive syntax, which makes it easier for developers to pick up and start using. This can save time and effort when building apps with Svelte.

2. Svelte is smaller than React.

Svelte has a smaller codebase and produces smaller bundle sizes, which means that your app will be faster to download and use less storage on the user's device. This can be especially important for mobile apps.

3. Svelte has better developer tools than React.

Svelte includes a time-traveling debugger and other helpful features that make it easier for developers to find and fix bugs in their code. This can save time and improve the overall development experience.

All of these benefits make Svelte a compelling choice for building web applications. So if you're looking for a faster, simpler, and better framework for your next web app, consider giving Svelte a try.

See by yourself

Here is an example of how a simple counter component might be implemented in React and Svelte:

1. Creating a Counter

In react:

import React, { useState } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
      <button onClick={() => setCount(count - 1)}>Decrement</button>
    </div>
  );
}

in svelte:

<script>
  let count = 0;
</script>

<p>{count}</p>
<button on:click={() => count++}>Increment</button>
<button on:click={() => count--}>Decrement</button>

2. Creating a TODO list

Here is an example of how a simple todo list component might be implemented in React and Svelte:

React:

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState([]);
  const [newTodo, setNewTodo] = useState('');

  function handleAddTodo() {
    setTodos([...todos, newTodo]);
    setNewTodo('');
  }

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <input value={newTodo} onChange={(event) => setNewTodo(event.target.value)} />
      <button onClick={handleAddTodo}>Add Todo</button>
    </div>
  );
}

Svelte:

<script>
  let todos = [];
  let newTodo = '';

  function handleAddTodo() {
    todos = [...todos, newTodo];
    newTodo = '';
  }
</script>

<ul>
  {#each todos as todo}
    <li>{todo}</li>
  {/each}
</ul>
<input bind:value={newTodo} />
<button on:click={handleAddTodo}>Add Todo</button>

3. Complex component: Login Form

Here is an example of how a more complex component, such as a login form, might be implemented in React and Svelte:

React:

import React, { useState } from 'react';
import axios from 'axios';

function LoginForm() {
  const [username, setUsername] = useState('');
  const [password, setPassword] = useState('');
  const [error, setError] = useState(null);
  const [loading, setLoading] = useState(false);

  async function handleSubmit(event) {
    event.preventDefault();
    setLoading(true);

    try {
      const response = await axios.post('/login', { username, password });
      const user = response.data;
      // Save user to local storage, etc.
    } catch (err) {
      setError(err.message);
    } finally {
      setLoading(false);
    }
  }

  return (
    <form onSubmit={handleSubmit}>
      <label>
        Username:
        <input value={username} onChange={(event) => setUsername(event.target.value)} />
      </label>
      <label>
        Password:
        <input value={password} onChange={(event) => setPassword(event.target.value)} type="password" />
      </label>
      {error && <p>{error}</p>}
      <button disabled={loading}>Login</button>
    </form>
  );
}

Svelte:

<script>
  import { post } from 'axios';

  let username = '';
  let password = '';
  let error = null;
  let loading = false;

  async function handleSubmit(event) {
    event.preventDefault();
    loading = true;

    try {
      const { data: user } = await post('/login', { username, password });
      // Save user to local storage, etc.
    } catch (err) {
      error = err.message;
    } finally {
      loading = false;
    }
  }
</script>

<form on:submit|preventDefault={handleSubmit}>
  <label>
    Username:
    <input bind:value={username} />
  </label>
  <label>
    Password:
    <input bind:value={password} type="password" />
  </label>
  {#if error}
    <p>{error}</p>
  {/if}
  <button disabled={loading}>Login</button>
</form>

Conclusion

In conclusion, Svelte is a powerful and efficient JavaScript framework for building web applications. Its unique approach to handling state and rendering components allows it to offer several advantages over frameworks like React, including better performance, simplicity, and developer tools. Whether you're a seasoned web developer or just getting started, Svelte is worth considering for your next project. Thank you for reading.

How to fix error:cannot decrypt Bitwarden

Fersho Pls — Fri, 11 Feb 2022 17:38:00 +0000

Today many people are having this issue.

The solution is easy as:

Click on bitwarden
Go to Settings
Click on SYNC
Click on Sync Vault Now button

Thats it! hope it helps

Installing Font Awesome on Ionic in 3 steps

Fersho Pls — Tue, 18 Jan 2022 19:08:13 +0000

1. Install it via npm:

  npm i @fortawesome/fontawesome-free

2. Add this to your main.ts:

  /* Fontawesome */
  import "@fortawesome/fontawesome-free/css/solid.css";
  import "@fortawesome/fontawesome-free/css/regular.css";
  import "@fortawesome/fontawesome-free/css/fontawesome.css";