DEV Community: Yossi Abramov

Setting Up Lumen and MySQL With Docker - Part II

Yossi Abramov — Sat, 15 May 2021 18:33:41 +0000

In Setting Up Lumen and MySQL With Docker - Part I we dockerized a Lumen app with a Dockerfile and a docker-compose.yml file. Then, we started our app by running:

docker-compose up

In this part we will:

Add MySQL 8.0 as a service to our docker-compose (with a volume).
Install necessary php extensions in our Dockerfile.
Learn how to use an .env file to pass variables to our docker-compose.yml file.
Learn how to enable Facade classes in a Lumen app.
Test our database connection.

Here is a link to the GitHub repository for this tutorial:

👉 https://github.com/yossi-abramov/lumen-mysql-docker

Add MySQL 8.0 to `docker-compose.yml`

In the previous post, this was our docker-compose.yml file:

version: '3.5'

services:
  lumen:
    ports:
      - "8000:8000"
    volumes:
      - .:/var/www/html
      - /var/www/html/vendor/
    build: .
    command: php -S lumen:8000 -t public
    restart: always

Now, let’s add MySQL 8 with a volume to persist data:

version: "3.5"

services:
  lumen:
    ports:
      - "8000:8000"
    volumes:
      - .:/var/www/html
      - /var/www/html/vendor/
    build: .
    command: php -S lumen:8000 -t public
    restart: always
    depends_on:
      - db
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: your_db_name
      MYSQL_USER: your_db_user
      MYSQL_PASSWORD: your_db_password
      MYSQL_ROOT_PASSWORD: root
    command: mysqld --default-authentication-plugin=mysql_native_password
    volumes:
      - ./database/mysql-data:/var/lib/mysql:rw
volumes:
  mysql-data:

Notice that this docker-compose.yml has MySQL hardcoded environment variables. We will soon change this.

For more information about official MySQL images for Docker see:

👉 https://hub.docker.com/_/mysql

Install the `pdo_mysql` extension

Our database is ready, but Lumen will not be able to connect with it without the pdo_mysql extension. To enable any PHP extensions, we can simply add them to our Dockerfile.

Here is our updated Dockerfile:

FROM php:7.3-fpm-alpine

RUN docker-php-ext-install pdo_mysql

WORKDIR /var/www/html/

RUN php -r "readfile('http://getcomposer.org/installer');" | php -- --install-dir=/usr/bin/ --filename=composer

COPY . .

RUN composer install

For more information about official PHP images for Docker see:

👉 https://hub.docker.com/_/php

Using Lumen’s `.env` file

As you can see, our docker-compose.yml has all MySQL environment variables hardcoded. Here is how we can pass Lumen’s .env variables to our docker-compose.yml:

version: "3.5"

services:
  lumen:
    ports:
      - "8000:8000"
    volumes:
      - .:/var/www/html
      - /var/www/html/vendor/
    build: .
    command: php -S lumen:8000 -t public
    restart: always
    depends_on:
      - db
  db:
    image: mysql:8.0
    restart: always
    environment:
      MYSQL_DATABASE: ${DB_DATABASE}
      MYSQL_USER: ${DB_USERNAME}
      MYSQL_PASSWORD: ${DB_PASSWORD}
      MYSQL_ROOT_PASSWORD: root
    command: mysqld --default-authentication-plugin=mysql_native_password
    volumes:
      - ./database/mysql-data:/var/lib/mysql:rw
volumes:
  mysql-data:

One more important step before starting our container:

In .env you should set DB_HOST to the MySQL service name in your docker-compose.yml (db in this case):

...
DB_HOST=db #MySQL container name
...

Now we can fire up our Docker container with:

docker-compose --env-file .env up --build

Learn more about using environment variables with Docker:

👉 https://docs.docker.com/compose/environment-variables/

Enable `Facade` classes

For testing our database connection, we will use the DB Facade and the PDO object that holds our connection details. In Laravel, Façade classes are globally available out of the box, but with Lumen you have to uncomment the $app->withFacades(); option in bootstrap/app.php.

Test Database Connection

After enabling Facades, we can use DB in routes/web.php and dd() our connection’s PDO object:

<?php

/** @var \Laravel\Lumen\Routing\Router $router */

use Illuminate\Support\Facades\DB;

/*
|--------------------------------------------------------------------------
| Application Routes
|--------------------------------------------------------------------------
|
| Here is where you can register all of the routes for an application.
| It is a breeze. Simply tell Lumen the URIs it should respond to
| and give it the Closure to call when that URI is requested.
|
*/

$router->get('/', function () use ($router) {
    dd(DB::getPDO());
});

You can head over to http://localhost:8000 and should get an object specifying your connection. And now we have MySQL up and running with Lumen.

In the next part we will interact with our Lumen container and create a Migration, Model, Model Factory, and database Seeder.

✍ For more posts:
https://yossiabramov.com/

Setting Up Lumen and MySQL With Docker - Part I

Yossi Abramov — Sat, 10 Apr 2021 08:50:41 +0000

Lumen by Laravel is a PHP micro-framework for creating APIs and microservices. With Lumen you can enjoy a robust development environment which contains many core Laravel features like the artisan cli, routing, middleware, migrations, eloquent ORM and much more.

In this tutorial, we will install Lumen with Composer, containerize our Lumen app + MySQL with Docker and go over some examples of interacting with our dockerized Lumen project. In the first part of this tutorial, we will focus on installing our Lumen app and get it up and running with Docker.

Install Lumen with Composer

First, make sure you have Composer installed by running the following command in your terminal:

composer -v
# or 
composer --version

Install Lumen by running:

composer create-project --prefer-dist laravel/lumen lumen-app

Now, if all goes well your Lumen project was successfully created inside /path/to/your/lumen-app/ and you can cd to your project. Now, start your Lumen project by running the following PHP command in your project's root directory:

php -S localhost:8000 -t public

Visit localhost:8000 or use something like Postman to verify you get a 200 response.

Docker setup

First, make sure you have Docker installed and running:

docker -v
# or
docker --version

We will be creating a docker-compose.yml file so you need to make sure you have docker-compose enabled/installed. If you’re using Docker Desktop for Windows or Mac, you probably already have docker-compose up and running. In any case, check the availability of the docker-compose command with:

docker-compose -v
# or 
docker-compose --version

Now, let’s dockerize our app with a Dockerfile and a docker-compose.yml file.

Dockerfile

Create a file named Dockerfile in your project's root directory:

FROM php:7.3-fpm-alpine

WORKDIR /var/www/html/

RUN php -r "readfile('http://getcomposer.org/installer');" | php -- --install-dir=/usr/bin/ --filename=composer

COPY . .

RUN composer install

In our Dockerfile we set our container to run PHP 7.3. Then, install Composer, copy all our project’s files to the container and finish by running composer install to install Lumen's dependencies.

docker-compose.yml

Now, create a docker-compose.yml file in your project’s root directory:

version: '3.5'

services:
  lumen:
    ports:
      - "8000:8000"
    volumes:
      - .:/var/www/html
      - /var/www/html/vendor/
    build: .
    command: php -S lumen:8000 -t public
    restart: always

Before building and running our Lumen project on Docker, it is useful to check that you have your machine’s 8000 port free for use. You can check that by running:

docker ps

If one of your docker containers is listening on 8000, stop/kill that container or modify the port configs in you docker-compose.yml file.

You can now remove the /vendor/ folder from your project’s directory and run:

docker-compose up --build

Now, you can visit localhost:8000 and start creating an amazing API/microservice!

In the next part of this tutorial, we will add MySQL as a service to our docker-compose.yml file and start interacting with our dockerized app.

Here is a link to the GitHub repository for this tutorial:

👉 https://github.com/yossi-abramov/lumen-mysql-docker

✍ For more posts:
https://yossiabramov.com/

Create a Blog with Laravel Migrations, Model Factories and Seeding

Yossi Abramov — Sat, 09 Jan 2021 21:33:53 +0000

When I was first introduced to Laravel, less then 2 years ago, I was immediately taken by it. The rich echo system, the fast-paced updates, a huge community of developers and the relative ease with which you can get a project up and running. However, there were some DB features like Migrations and Seeding I never fully explored. When I started incorporating migrations and seeding into my project, my development process become more productive and efficient.

In this tutorial, we will create a simple blog with migrations, model factories and DB seeding. There is a lot to cover here and I cannot dive deeply into every subject. Laravel is a feature rich framework – and very well documented! So, for each subject I’ll be writing about, there is a lot more to cover (seriously, a lot!). I’ve included links to relevant sections of Laravel’s official docs in every part of this tutorial. This tutorial uses Laravel 8.x.

We will:

Setup a Laravel project
Connect to a DB
Create models
Create migrations
Create factories
Seed DB

Here is the GitHub repository for this tutorial:

👉 https://github.com/yossi-abramov/laravel-blog-migration-factory-seed

Setup a Laravel project

First, let’s create a fresh Laravel project. Make sure you have composer installed, then you can start a new Laravel project with the Laravel Installer or with composer create-project. If you want to use the Laravel installer follow the Laravel official docs here:

👉 https://laravel.com/docs/8.x/installation

For this tutorial, I will be installing Laravel with composer create-project.

First, check if you have composer installed:

composer -v
# or 
composer --version

If you don’t have composer installed, you should head over to https://getcomposer.org and get composer.

Now, let’s create a Laravel project:

composer create-project laravel/laravel laravel-blog-migration-factory-seed

Connect to a DB

For this tutorial I’ll be using MySQL via Shell. First, login to your DB of choice (via Shell, GUI – pick your tool), Then, create a database by running:

CREATE DATABASE blog_example;

Now, you need to tell Laravel about your DB connection, host, port, name, username and password. Go to .env in your project’s root directory and change the following block:

DB_CONNECTION=mysql
DB_HOST=127.0.0.1
DB_PORT=3306
DB_DATABASE=blog_example
DB_USERNAME=your_db_user_name
DB_PASSWORD=your_db_password

Now, before continuing, test your DB connection. There are a few ways to do this. My favorite is by using Laravel Tinker which is an awesome REPL (read–eval–print loop) tool that's included by default in Laravel applications.

Open the terminal, then cd to your project's root folder, or run in your IDE’s terminal:

php artisan tinker // starts the REPL
DB::connection()->getPdo() // get a PDO connection object

If the REPL outputs a PDO object, you’re all set, and your DB is connected to Laravel!

Exit the REPL by running exit.

Models

For this project we will have 4 Models: User, Post, Tag and PostTag. Laravel comes with a solid User model, migration, factory and seeder so we can skip it for now. Let’s create a Post model, migration and factory with one php artisan command:

php artisan make:model Post -mf

By running the command we’ve created 3 files:

/app/Models/Post.php
/database/factories/PostFactory.php
/database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php

I want to focus on migrations and DB seeding with model factories, so we will not go over models in this tutorial.

Let’s run these artisan commands to generate the necessary files for Tag and PostTags:

php artisan make:model Tag -mf
php artisan make:model PostTag -m

Read more about Laravel models in the official Docs:

👉 https://laravel.com/docs/8.x/eloquent

Migrations

DB migrations allows you to create and manage DB schemas. With migrations, you do not have to use a CREATE TABLE statement and can dive into creating tables, defining relationships, modifying columns and much more.

Now, let’s setup our Post model’s first migration.

Go to /database/migrations/xxxx_xx_xx_xxxxxx_create_posts_table.php. This is the migration artisan generated for us:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id();
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

As you can see, we have two methods.The up() method will run when we execute migrations with the php artisan migrate command. The down() method will run when we rollback our migrations with the php artisan migrate:rollback command. Let’s go over the up() method – this is where you define your scheme and preform most of the migration logic.

To create, modify and remove tables and/or columns, Laravel offers us the Schema façade. Then, $table is an instance of the Blueprint class (dependency injection). $table is packed with methods to help you mange tables! Here is our Post migration logic:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('posts', function (Blueprint $table) {
            $table->id(); 

            $table->bigInteger('user_id') 
            ->foreign('user_id')
            ->references('id')
            ->on('users');

            // VARCHAR equivalent column with a length.
            $table->string('slug', 255)
            ->unique(); // Index

            $table->string('title', 255);  

            // TEXT equivalent column.
            $table->text('description'); 
            $table->text('post');
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('posts');
    }
}

For a list of available methods see:

👉 https://laravel.com/docs/8.x/migrations#columns

Here is our Tag migration:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreateTagsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('tags', function (Blueprint $table) {
            $table->id();
            $table->string('tag', 255);
            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('tags');
    }
}

And the PostTag migration:

<?php

use Illuminate\Database\Migrations\Migration;
use Illuminate\Database\Schema\Blueprint;
use Illuminate\Support\Facades\Schema;

class CreatePostTagsTable extends Migration
{
    /**
     * Run the migrations.
     *
     * @return void
     */
    public function up()
    {
        Schema::create('post_tags', function (Blueprint $table) {
            $table->id();

            $table->bigInteger('post_id') 
            ->foreign('post_id')
            ->references('id')
            ->on('posts');

            $table->bigInteger('tag_id') 
            ->foreign('tag_id')
            ->references('id')
            ->on('tags');

            $table->timestamps();
        });
    }

    /**
     * Reverse the migrations.
     *
     * @return void
     */
    public function down()
    {
        Schema::dropIfExists('post_tags');
    }
}

Now, let’s run our migrations with:

php artisan migrate

Model Factories

Model factories are an excellent way to create test data for your applications. If you need fake data to mockup an application or fake data for database testing, model factories are an excellent solution.

Here is the Post model factory generated by the artisan command we ran:

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        return [
            //
        ];
    }
}

In the definition() method we will define a “state” for the factory. Laravel’s Factory class comes with the Faker library baked in. Php Faker is a powerful tool for generating fake data. Here is the Faker GitHub repo for all available methods:

👉 https://github.com/fzaninotto/Faker

There are many ways of creating a factory for our posts. Here is my quick and dirty suggestion:

<?php

namespace Database\Factories;

use App\Models\Post;
use Illuminate\Support\Str;
use Illuminate\Database\Eloquent\Factories\Factory;

class PostFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Post::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */
    public function definition()
    {
        $title = $this->faker->sentence;

        $post = collect($this->faker->paragraphs(rand(5, 15)))
        ->map(function($item){
            return "<p>$item</p>";
        })->toArray();

        $post = implode($post);

        return [
            'user_id' => 1,
            'title' => $title,
            'description' => $this->faker->paragraph,
            'slug' => Str::slug($title),
            'post' => $post,
        ];
    }
}

We can check our factory with tinker. Start tinker with:

php artisan tinker

Run factory with:

Post::factory()->count(1)->create()

tinker will output the generated post/s in the console and will insert the data to your db. You can check your DB with tinker by running:

Post::all()

Here is our Tag factory:

<?php

namespace Database\Factories;

use App\Models\Tag;
use Illuminate\Database\Eloquent\Factories\Factory;

class TagFactory extends Factory
{
    /**
     * The name of the factory's corresponding model.
     *
     * @var string
     */
    protected $model = Tag::class;

    /**
     * Define the model's default state.
     *
     * @return array
     */

    public function definition()
    {
        return [
            'tag' => $this->faker->word
        ];
    }
}

Test it with tinker:

php artisan tinker
Tag::factory()->count(1)->create()

We will not be creating a PostTag Factory.

Read more about model factories in the official docs:

👉 https://laravel.com/docs/8.x/database-testing

Seeders

DB seeders allow us to insert data to our DB with ease. For DB seeding we can call Laravel’s DB façade or use model factories. The default DB seeder is located at: /database/seeds/DatabaseSeeder.php:

<?php

namespace Database\Seeders;

use Illuminate\Database\Seeder;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        // \App\Models\User::factory(10)->create();
    }

}

In the run() method, we can call other seeders that call model factories, or just call our factories directly. We will call model factories and use the DB façade:

<?php

namespace Database\Seeders;

use App\Models\Tag;
use App\Models\Post;
use App\Models\User;
use Illuminate\Database\Seeder;
use Illuminate\Support\Facades\DB;

class DatabaseSeeder extends Seeder
{
    /**
     * Seed the application's database.
     *
     * @return void
     */
    public function run()
    {
        User::factory(1)->create(); // Create a single user
        Post::factory(50)->create(); // Create 50 posts
        Tag::factory(8)->create(); // Create 8 tags

        foreach(Post::all() as $post){ // loop through all posts 
            $random_tags = Tag::all()->random(rand(2, 5))->pluck('id')->toArray();
            // Insert random post tag
            foreach ($random_tags as $tag) {
                DB::table('post_tags')->insert([
                    'post_id' => $post->id,
                    'tag_id' => Tag::all()->random(1)[0]->id
                ]);
            }
        }
    }
}

To seed your DB run:

php artisan db:seed

Now your DB is full of posts 😎!

Check posts with tinker:

php artisan tinker
Post::all()->count()
Tag::all()->count()
PostTag::all()->count()

Read more about DB seeding in the official docs:

👉 https://laravel.com/docs/8.x/seeding

I hope this small project helped you get started with Laravel migrations, factories and seeding ✌

Think about this: a blog post usually contains more than just paragraphs. You can take the post model factory a few steps further and create rich random posts with images, quotes and more content elements ✍

The GitHub repository for this tutorial includes 2 Views for checking out your fake data. For now, these views are not styled at all and serve only as a quick reference for our data.

In an upcoming post, I will style this small project with Laravel Blade UI Kit and add more features – stay tuned!

✍ For more posts:
https://yossiabramov.com/

Vue.js Scroll Progress Indicator

Yossi Abramov — Sun, 03 Jan 2021 07:36:08 +0000

In this post I want to share with you a very minimal Vue.js scroll progress component I’ve created. We will be using Vue 2.x for this demo.

You can check out the GitHub page for the demo here:

👉 https://yossi-abramov.github.io/vue-progress-indicator#blank

And here is a link to the GitHub repository:

👉 https://github.com/yossi-abramov/vue-progress-indicator#blank

There are a couple of ways to implement a scroll progress indicator in your application. In this demo our scroll progress indicator will be in a fixed position, just after a fixed header.

Before diving into the Vue component, let’s go over some of the required styles for our component.

CSS (SCSS) and HTML

<div class="progress-indicator-wrapper">
   <div class="progress-indicator"></div>
</div>

As you can see, the HTML for this component is very simple. We will later add a dynamic width property for the .progress-indicator element with Vue’s style binding.

All of the styles for this demo are in @/assets/scss/app.scss. Here is the relevant portion of SCSS for the component. Of course, you do not have to use SCSS variables, but they are awesome!

// SCSS variables
$header-height: 60px;
$progress-indicator-height: 5px;
$vue-green: #42b983;
…
// Progress Indicator
.progress-indicator-wrapper{
    position: fixed;
    height: $progress-indicator-height;
    background-color: #eee;
    width: 100%;
    top: $header-height;
    .progress-indicator{
        height: $progress-indicator-height;
        background: $vue-green;
    }
}

JS

Usually, a scroll progress indicator is a component you would use on many pages of your application. So, for this demo I’ve included the <ProgressIndicator /> in App.vue:

<template>
  <div>
    <div id="nav">
      <router-link to="/">Home</router-link>
      <router-link to="/about">About</router-link>
    </div>
    <ProgressIndicator />
    <div id="app">
      <div class="demo-heading">
        <span>#</span> Vue.js Scroll Indicator Demo
      </div>
      <router-view />
    </div>
  </div>
</template>

<script>
import ProgressIndicator from "@/components/ProgressIndicator";

export default {
  components: {
    ProgressIndicator
  }
};
</script>

<style lang="scss">
@import "@/assets/scss/app.scss";
</style>

Now, let’s head over to @/components/ProgressIndicator.vue and go over it.

<template>
  <div class="progress-indicator-wrapper">
    <div class="progress-indicator" :style="{ width: progress }"></div>
  </div>
</template>

<script>
export default {
  name: "ProgressIndicator",
  data() {
    return {
      progress: "0%"
    };
  },
  methods: {
    updateProgressIndicator() {
      const { documentElement, body } = document;
      let windowScroll = body.scrollTop || documentElement.scrollTop;
      let height = documentElement.scrollHeight - documentElement.clientHeight;
      this.progress = (windowScroll / height) * 100 + "%";
    }
  },
  mounted() {
    window.addEventListener("scroll", this.updateProgressIndicator);
  }
};
</script>

First, we need to create a reactive data property that will be updated on page scroll. Next, in our mounted() lifecycle method we will add an event listener on window. The updateProgressIndicator() method will run on every scroll, bottom or top.

Now, this will work fine, however when you go to a different route the indicator will show the previous route’s progress state. This happens because our <ProgressIndicator /> component is not rerendered on every route change.

A nice solution would be to call the updateProgressIndicator() method every time a route change happens. We can watch for route changes with the watch option. Here is our complete component:

<template>
  <div class="progress-indicator-wrapper">
    <div class="progress-indicator" :style="{ width: progress }"></div>
  </div>
</template>

<script>
export default {
  name: "ProgressIndicator",
  data() {
    return {
      progress: "0%"
    };
  },
  watch: {
    $route(/* to, from */) {
      this.updateProgressIndicator();
    }
  },
  methods: {
    updateProgressIndicator() {
      const { documentElement, body } = document;
      let windowScroll = body.scrollTop || documentElement.scrollTop;
      let height = documentElement.scrollHeight - documentElement.clientHeight;
      this.progress = (windowScroll / height) * 100 + "%";
    }
  },
  mounted() {
    window.addEventListener("scroll", this.updateProgressIndicator);
  }
};
</script>

Hope you liked my scroll progress indicator ✌

✍ For more posts:
https://yossiabramov.com/

🍦 Vanilla JS Starry Night

Yossi Abramov — Fri, 25 Dec 2020 16:44:03 +0000

In this post I would like to share with you a Vanilla JS demo of twinkling stars on a smooth black canvas. Basically, this kind of challenge involves dealing with random parameters like a star’s width, height, coordinates and twinkling duration. I think it is probably better to start with the relevant portion of the CSS for this small demo and work our way to the JS part.

Here are some links for this demo:

👉 GitHub repo: https://github.com/yossi-abramov/starry-night

👉 GitHub page: https://yossi-abramov.github.io/starry-night/

CSS

.star {
  --twinkle-duration: "";
  --twinkle-delay: "";
  --star-size: "";
  position: absolute;
  width: var(--star-size);
  height: var(--star-size);
  background: #fff;
  border-radius: 50%;
  animation: twinkle infinite alternate;
  animation-duration: var(--twinkle-duration);
  animation-delay: var(--twinkle-delay);
}

@keyframes twinkle {
    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.5);
        box-shadow: 0 0 5px 0.5px rgba(150, 150, 150, 0.6);
    }
}

I’ve created a .star class for my stars and initialised CSS variables in it. By scoping these variables to the .star class we can make these variables behave like “arguments”. That means we can set a value to our scoped CSS property on a given star element (Just think of all the cool things you can build with CSS variables!). Next, I’ve set a keyframe animation for the “twinkling” effect. As you can see, both animation-duration and animation-delay have a CSS variable assigned to them. As for the twinkle keyframe, it’s pretty straight forward: alternate infinitely between a scale of 1 and 1.5 of the star’s size and add a box-shadow for a soft glow effect.

JS

Now, let’s go over the JS portion of the code. As mentioned above, we need to deal with some random “star” properties. For that reason the first thing we need is a function that will generate a random number between a min and a max. For that purpose, we can use the mighty JS Math Object:

const genRandomNumber = (min, max) => {
    return Math.random() * (max - min) + min;
}

After setting up our genRandomNumber function we can move on to defining the boundaries of our microcosmos/canvas/night sky. Remember, we need to spread our stars randomly across a space. So first we need to select our parent and give our stars coordinates relative to the selected parent. In this case, I’ve selected the body element:

const $el = document.body;

Now, all we need to do is create an element, append a .star class to it and pass the required random CSS properties that we defined in our CSS. After our star element is created, we will simply append it to the parent element - body in this case. We will need to repeat this process x amount of times – so a simple for loop will do!

for (let index = 0; index < 1000; index++) {
    const star = document.createElement("div");
    star.classList.add("star");

    // Star coordinates
    let x = genRandomNumber(1, $el.offsetWidth);
    let y = genRandomNumber(1, $el.offsetHeight);

    star.style.left = Math.floor(x) + "px";
    star.style.top = Math.floor(y) + "px";

    star.style.setProperty(
        "--star-size",
        genRandomNumber(1, 3) + "px"
    );

    star.style.setProperty(
        "--twinkle-duration",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    star.style.setProperty(
        "--twinkle-delay",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    $el.append(star);
}

Let's refactor this code a bit, here is another suggestion:

// Night Sky element

const $el = document.body;

// Generate a random number between min and max values

const genRandomNumber = (min, max) => {
    return Math.random() * (max - min) + min;
}

// Generate a star <div>

const genStar = () => {
    const star = document.createElement("div");
    star.classList.add("star");

    // Gen star coordinates relative to $el size
    let x = genRandomNumber(1, $el.offsetWidth);
    let y = genRandomNumber(1, $el.offsetHeight);

    const { style } = star;

    style.left = Math.floor(x) + "px";
    style.top = Math.floor(y) + "px";

    style.setProperty(
        "--star-size",
        genRandomNumber(1, 3) + "px"
    );

    style.setProperty(
        "--twinkle-duration",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    style.setProperty(
        "--twinkle-delay",
        Math.ceil(genRandomNumber(1, 5)) + "s"
    );

    return star;
}

for (let index = 0; index < 800; index++) {
    $el.append(genStar());
}

✍ For more posts:
https://yossiabramov.com/

🍦 VANILLA JS LIGHTBOX

Yossi Abramov — Sat, 28 Nov 2020 15:15:32 +0000

In this post I want to share a simple CSS and Vanilla JS Lightbox I use for some of my projects.

Here is a demo GitHub page:

👉 https://yossi-abramov.github.io/simple-lightbox.github.io/

And the GitHub repository for the project:

👉 https://github.com/yossi-abramov/simple-lightbox.github.io

The HTML for this demo is easy to follow so I will not go over it. Let’s cover the relevant CSS and JS portions of the code.

CSS

Our Lightbox has two states: hidden and visible. Let’s start with the hidden state:

.lightbox{
    opacity: 0;
    visibility: hidden;
    position: fixed;
    left:0;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: -1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease-in;
}

As you can see, the Lightbox is in fixed position and all direction properties are set to 0. This makes the Lightbox fill the entire screen without having to use any kind of width or height properties. This positioning strategy can also be very useful in more situations. For example, think of creating an image overlay. You might have an image container positioned relative and a .overly div positioned absolute. By setting all direction properties to 0 you can ensure the image overlay completely fills its parent container.

The styles for the visible state of the Lightbox are pretty simple:

.lightbox.show{
    background-color: rgba(0,0,0, 0.85);
    opacity: 1;
    visibility: visible;
    z-index: 1000;
}

For avoiding a flash of visible Lightbox on page load, it’s important not to set the background-color in the hidden state styles.

JS

The JavaScript for our Lightbox is pretty simple too! In this case, we have three functionalities to cover:

1) Toggling between visible and hidden Lightbox states
2) Displaying the subject image in the Lightbox
3) Hiding the Lightbox on every click that is not on the centered (“subject”) image

document.addEventListener("DOMContentLoaded", () => {

    // ===> DOM elements <=== //

    const $imagesContainer = document.getElementById('images-container');
    const $lightbox = document.getElementById('lightbox');

    // ===> Event listeners and triggers <=== //

    // Show lightbox 
    $imagesContainer.addEventListener('click', e => {
        const imageWrapper = e.target.closest('.image-wrapper');

        if (imageWrapper) {
            const image = imageWrapper.querySelector('img');
            if (image) {
                $lightbox.innerHTML = '<div class="close-lightbox"></div>' + image.outerHTML;
                $lightbox.classList.add('show');
            }
        }
    });

    // Hide Lightbox
    $lightbox.addEventListener('click', (e) => {
        if (!e.target.hasAttribute('src')) {
            $lightbox.classList.remove('show');
        }
    });
});

For toggling between hidden and visible states we can add/remove the .show class. We could have used the classList.toggle() method but I find that in this case, using classList.remove() and classList.add() makes the code more readable.

For showing the Lightbox, I didn’t want to use a static image element and to change its src and alt properties separately (think of all the HTML attributes you can have on an image element…). For this reason I’m using image.outerHTML. But, this is just my suggestion for a simple Lightbox and there are many ways to implement it!

✍ For more posts:
https://yossiabramov.com/

🍦 VANILLA JS INFINITE SCROLL

Yossi Abramov — Fri, 30 Oct 2020 21:32:00 +0000

In this post I would like to share a codepen I created with an infinite scroll demo. For this demo I don’t use any library or framework – only vanilla JS, plain CSS and HTML. I wanted to spice up my demo, so I created an image masonry grid and a simple loader. The images grid gets populated with more images once you scroll down. So, there are some “unessential” elements to this demo, and when reading the code, I suggest focusing on the JS part of things.

The basic “plan” for the code is this:

1) Listen to a scrolling event

2) If the user scrolled all the way down (or your preferred scrolling distance), fetch more resources (images by picsum.photos in this case)

3) Append fetched resources to DOM

And here it is:

See the Pen 🍦 VANILLA JS INFINITE SCROLL by Yossi Abramov
(@yossi_abramov) on CodePen.

✍ For more posts:
https://yossiabramov.com/

Custom Admin Columns in WordPress

Yossi Abramov — Wed, 28 Oct 2020 20:15:25 +0000

When dealing with different content types likes pages, posts and custom posts, we sometimes need to add or customize our admin’s columns. Let’s say we have a featured image for every post in our posts. By default, WordPress will not show a thumbnail of the featured image in the main post management page:

You can check Screen Options on that same page and see that Featured image is not available as a checkable option:

Now, let’s say you have a custom field for all of your posts, maybe a field that contains a list of available translations of the post or any other field you might be thinking of. Your custom column can even contain some other type of data, maybe a “hit counter” or some other piece of analytics.

In this post I want to go over the two required WordPress functions for extending and customising your admin’s table columns. These functions apply to pages, posts and custom posts.

No matter what content type you are targeting, adding custom columns follows only two steps. The first step is to register the column with a filter and the second step is to handle its content with an action.

Custom Columns For Pages

For this example, let’s keep it simple and just add a page_id column.

1) Add the manage_pages_columns filter:

<?php
function add_page_id_column_to_pages( $columns ) {
    $columns['page_id'] = 'Page Id';
    return $columns;
}
add_filter( 'manage_pages_columns', 'add_page_id_column_to_pages' );

2) Add manage_pages_custom_column action:

<?php
function display_page_id( $column, $post_id ) {
    if($column === 'page_id'){
        echo $post_id;
    }
}
add_action( 'manage_pages_custom_column', 'display_page_id', 10, 2);

This will be the result:

Custom Columns For Posts

Now, let’s add a Featured Image column to our posts page:

1) Add manage_posts_columns filter:

<?php
function add_featured_image_thumb( $columns ) {
    $columns['featured_image'] = 'Featured Image';
    return $columns;
}
add_filter( 'manage_posts_columns', 'add_featured_image_thumb' );

2) Add manage_posts_custom_column action

<?php
function display_featured_image( $column, $post_id ) {
    if($column === 'featured_image'){
        echo get_the_post_thumbnail($post_id, [100,100]);
    }
}
add_action( 'manage_posts_custom_column', 'display_featured_image', 10, 2);

This will be the result:

Post featured image by Alessia Chinazzo on Unsplash

Custom Columns For Custom Posts

Adding a custom column to custom post types is a bit different from what we previously saw. Our two functions will share this next form: manage_{custom_post_type}_posts_custom_column.

For this example, let’s add a fake “Hit Counter” or “Viewed” column with some nice styles. Our custom post will be “Ads”.

1) After creating our “Ads” custom post type, let’s add the a “Viewed” column:

<?php
function add_visited_column( $columns ) {
    $columns['visited'] = '<span class="dashicons dashicons-chart-line"></span> Visited';
    return $columns;
}
add_filter( 'manage_ads_posts_columns', 'add_visited_column' );

2) Now, Add the column content:

function display_visits( $column, $post_id ) {
    if($column === 'visited'){
      echo '<span class="counter">1.7k</span>';
    }
}
add_action( 'manage_ads_posts_custom_column', 'display_visits', 10, 2);

In a real project you would probably populate this column with real data…

This will be the result:

Post featured image by Charles Deluvio on Unsplash

✍ For more posts:
https://yossiabramov.com/

Recommended WordPress Plugins

Yossi Abramov — Sat, 24 Oct 2020 19:49:06 +0000

For the past year or so I’ve been working on some WordPress heavy projects. Personally, I don’t particularly enjoy the “fronty” aspects of WordPress and always prefer to leverage the WordPress API and use WordPress as the awesome content management system that it is.

The huge community of WordPress developers creates awesome tools and plugins all the time and it is impossible to follow and keep up with all the new WordPress stuff out there. So, in this post I just want to share a list of WordPress plugins that I use on a daily basis and have saved me a lot of coding time. These plugins have changed my WordPress workflow so much that I use most of them as must use plugins.

Duplicate Page

Duplicate Page will add a “duplicate this” option to your pages, posts and custom posts. It will duplicate your selected page/post as a draft with all the content of the original page you were duplicating. This is a huge time saver! After installation and activation, hover on a page/post like you would normally do and get this new shiny option:

👉 get the plugin here

Custom Post Type UI (CPT UI)

CPT UI gives you super-powers! Instead of painstakingly registering and defining custom post types in your functions.php or your_other_functions.php, CPT UI gives you a straight forward easy to use UI for creating custom post types. It will take you about 10 seconds to create your first post type - you literally need to fill only 3 required fields and you are good to go ✊. From there, you can easily integrate custom posts with the WordPress API and much more ✌.

👉 get the plugin here

Simple Custom Post Order

Let’s imagine the following scenario: you have a custom post type, say “Books”. Each one of your posts is a “Book” post. Now, you want to loop through the books, but have a specific order in mind… With Simple Custom Post Order you can drag and drop your pages, posts and custom posts to reorder them regardless of the way WordPress orders them. This make reordering your content incredibly simple.

After installation and activation, go to the plugin’s settings screen and choose the content types you want to reorder:

Get your content in order! 👍

👉 get the plugin here

Post Type Switcher

Say you have a custom post type for “Books” and also have a simple page. Now, you want to take your simple page and convert it to a “Book” custom post type page. With Post Type Switcher you can easily convert your simple page to a “Book” page and vice versa.

After installation and activation, your simple page and post pages will have a nice little radio select box in the document settings:

👉 get the plugin here

Advanced Custom Fields (ACF)

If you need to add custom fields to your pages, posts or custom post types this plugin gives you a robust solution. Consider this next situation: You have single product pages and some of them contain a testimonials section. If a single product page does not have testimonials you need to display some kind of a feedback form. With ACF this is very simple.

Basically, you need 2 things to insert a custom field:

1) Field settings - name, type, quantity etc. :

There are many options and settings to explore!

2) location rules – where do you want the field to be displayed

And there you have it, all your single “Product” pages will now have this custom field:

As I mentioned above, I usually work with the Wordpress API and thus tend to call these custom fields in the context of an API call. So, if you need to call a custom field from a function, here is a quick example:

<?php
// Get all products
function get_products( $data ) {

    // Get all posts where post_type = products
    $posts = get_posts([
        'post_type' => 'products'
    ]);

    if ( empty( $posts ) ) {
        return null;
    }
    // Map through all posts and add testimonials field    
    $posts = array_map(function($post){
        $post->testimonials = get_post_meta($post->ID, 'testimonials', true);
        return $post;
    }, $posts);
    return $posts;
}

// Register custom endpoint /wp-json/sample-api/v1/product
add_action( 'rest_api_init', function () {
    register_rest_route( 'sample-api/v1', '/product/', array(
      'methods' => 'GET',
      'callback' => 'get_products',
    ) );
} );

👉 get the plugin here

I Hope you've found these plugins helpful and useful like I do! And, if you are unfamiliar with the WordPress API, start exploring it – you won’t regret it.

✍ For more posts:
https://yossiabramov.com/

Udemy Course Recommendation

Yossi Abramov — Sat, 19 Sep 2020 15:56:55 +0000

Traversy media has always been one of my favorite resources for learning web technologies. From tutorials designed for absolute beginners to advanced developers – Traversy is a great instructor.

I’ve just finished the 20 Web Projects With Vanilla JavaScript course by Traversy Media on Udemy and it was amazing! Traversy has a gift for presenting complex concepts and ideas in a clear no BS way. Every project in this course is short, easy to follow and centers around a specific topic or set of topics in JS and CSS.

The projects include working with the SpeechRecognition API, SpeechSynthesis API, canvas, CSS transitions and much more.

Also, I really recommend taking Modern HTML & CSS From The Beginning (Including Sass) and Modern JavaScript From The Beginning by Traversy before watching this course.

I hope you will find these courses excellent – like I did!

✍ For more posts:
https://yossiabramov.com/

CSS Skeleton Loading 💀

Yossi Abramov — Fri, 11 Sep 2020 16:08:56 +0000

Skeleton loading is a strategy/technique for improving user experience. In this post I want to share an example of how I would approach it without any UI libraries or fancy components.

Basically, skeleton loading is aimed at components or content areas that are being fetched from a backend or an API. We can use a loader for the entire page or even individual components, but this approach sometimes results in a flaky user experience. However, when applying skeleton loading we ensure that the basic structure of the page and its components are visible. Once our content is ready, we can remove the skeleton loaders and display the content.

Here is my skeleton loading example on codepen.io:

https://codepen.io/yossi_abramov/pen/jOqxOQp

A quick breakdown

For this example, I created a user card component that contains an avatar, name, email and contact button. The user card content is hard-coded for the sake of simplicity. In a real app or website you would probably fetch data and update the DOM with it.

<div class="user-card skeleton">
    <div class="user-cover">
      <img class="user-avatar" src="
        https://yossiabramov.com/images/avatar.jpeg" alt="user profile image" />
    </div>
    <div class="user-details">
      <div class="user-name hide-text">Yossi Abramov</div>
      <div class="user-email hide-text">josephabramov90@gmail.com</div>
    </div>
    <button class="contact-user hide-text">CONTACT</button>
</div>

Notice that the .user-card element has a .skeleton class and every element that contains text has a .hide-text class.

Now, this example is a bit CSS heavy so let’s go over the most important lines:

/* Skeleton */

/* Static Skeleton */

.user-card.skeleton .user-cover {
  background: #e2e2e2;
}

.user-card.skeleton .user-cover .user-avatar {
  display: none;
}

.user-card.skeleton .user-cover::after {
  content: "";
  position: absolute;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  left: 0;
  right: 0;
  margin: auto;
  bottom: -25px;
  border: 1px solid #fff;
  z-index: 10;
  background: #e2e2e2;
}

/* Animated Skeleton */

.user-card.skeleton .hide-text {
  background: #e2e2e2;
  color: transparent;
  position: relative;
  overflow: hidden;
}

.user-card.skeleton .hide-text::before {
  content: "";
  position: absolute;
  left: 0%;
  top: 0;
  height: 100%;
  width: 50px;
  background: linear-gradient(to right, #e2e2e2 25%, #d5d5d5 50%, #e2e2e2 100%);
  animation-name: gradient-animation;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  filter: blur(5px);
}

@keyframes gradient-animation {
  from {
    left: 0%;
  }
  to {
    left: 100%;
  }
}

Basically, I have two states of skeleton loading: static and animated. The .user-cover and .user-avatar elements have a static skeleton – without any CSS transition or keyframe animation applied to them while all elements with the .hide-text class have a keyframe animation. The gradient-animation animation is applied to a ::before element that is positioned absolute to it’s relative .hide-text father. The animation is very simple but effective.

The JavaScript for this example only simulates a somewhat slow fetching of data. Once our data is fetched, we can remove our skeleton loaders.

const $el = document.querySelector(".user-card");

// Loading finished
setTimeout(() => {
  $el.classList.remove("skeleton");
  $el
    .querySelectorAll(".hide-text")
    .forEach((el) => el.classList.remove("hide-text"));
}, 3000);

Hope you find this approach to skeleton loading simple and clear 🙏 .

✍ For more posts:
https://yossiabramov.com/

Laravel 7 Class Based Components – Part II

Yossi Abramov — Fri, 21 Aug 2020 15:05:29 +0000

In my previous post about Laravel 7 Class Based Components I went over creating class based components as well as passing data to components and displaying them. In this post I will go over component class methods. And once again, class based components allow us to create robust components and harness the power of classes, so do more exploring on your own – you will not regrate it! ☝

Component Class Methods

Let’s say we have a news site with a news grid container and some news items in it. We would probably create 2 components: a news grid container component and a news grid item component.

Let’s create our components:

php artisan make:component NewsGridContainer
php artisan make:component NewsGridItem

Then, we could pass a news items array with news items to our news grid container, inside the grid container.

In our welcome.blade.php:

@php
  $newsItems = [
   [
     'id' => 1,
     'title' => 'this is my title',
     'body' => '......',
     'featured_image' => '/images/featured.jpeg',
  ],
];
@endphp
<x-news-grid-container :news-items="$newsItems"/>

In order to pass our $newsItems array to news-grid-container.blade.php we first need to declare it as public property in the app/Views/Components/NewsGridContainer.php class and assign it in the __construct() method:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NewsGridContainer extends Component
{
    public $newsItems;
    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($newsItems)
    {
        $this->newsItems = $newsItems;
    }
    ...
}

And in resources/views/components/news-grid-container.blade.php:

<div class="grid-container">
    @foreach ($newsItems as $item)
        <x-news-grid-item :news-item="$item" />
    @endforeach
</div>

Here are our news grid item class properties declarations and __construct():

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NewsGridItem extends Component
{

    public $title;
    public $body;
    public $featured_image;

    /**
     * Create a new component instance.
     *
     * @return void
     */
    public function __construct($newsItem)
    {
        $this->title = $newsItem['title'];
        $this->body = $newsItem['body'];
        $this->featured_image = $newsItem['featured_image'];
    }
    ...
}

And our resources/views/components/news-grid-item.blade.php:

<div class="news-grid-item">
    <img class="featured-image" src="{{ $featured_image }}" alt="featured image">     
    <div class="content-body">
        <h3 class="title">{{ $title }}</h3>
        <p class="excerpt">{{ $body }}</p>
        <button class="read-more">READ MORE</button> 
    </div>
</div>

Now that we have some components to work with, let’s go over some basic ways of using component class methods.

First, let’s create a simple public function saySomething() that will simply return ‘Hello World’.

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NewsGridItem extends Component
{
    ...
    public function saySomething(){
        return 'Hello World';
    }
}

This is how you would call it in you blade component:

<div class="news-grid-item">
    {{ $saySomething }}
    ...
</div>

If we want to pass some data to this function, we first need to change it a bit:

<?php

namespace App\View\Components;

use Illuminate\View\Component;

class NewsGridItem extends Component
{
    ...
    public function saySomething($msg){
        return $msg;
    }
}

And in the component:

<div class="news-grid-item">
    {{ $saySomething('Hello World') }}
    ...
</div>

Now, let’s say our news item’s title is all in lower case letters and we want to “Title Case” it. We have a lot of ways of doing it: Modify the title already in our __construct method, or maybe inside our blade component itself. we can also create a public function called titleCase($title) in our class and pass the title to it:

<?php

namespace App\View\Components;

use Illuminate\Support\Str;
use Illuminate\View\Component;

class NewsGridItem extends Component
{
    ...
    public function titleCase($title){
        return Str::title($title);
    }
}

Then, we would need to call it like this in our blade component (or do something even uglier in our __construct method):

<div class="news-grid-item">
    {{ $titleCase($title) }}
    ...
</div>

However, there is a much nicer way of modifying properties. We can create a public function that shares the name of a declared property like this:

<?php

namespace App\View\Components;

use Illuminate\Support\Str;
use Illuminate\View\Component;

class NewsGridItem extends Component
{
    ...
    public function title(){
        return Str::title($this->title);
    }
}

And our blade component can remain nice and clean:

<div class="news-grid-item">
    {{ $title }}
    ...
</div>

I’ve added 2 more methods to this class just to show a bit more of what is possible – but this does not even scratch the surface. Here is the full result:

<?php

namespace App\View\Components;

use Illuminate\Support\Str;
use Illuminate\View\Component;

class NewsGridItem extends Component
{

    public $title;
    public $body;
    public $featured_image;

    /**
     * Create a new component instance.
     *
     * @return void
     */

    public function __construct($newsItem)
    {
        $this->title = $newsItem['title'];
        $this->body = $newsItem['body'];
        $this->featured_image = $newsItem['featured_image'];
    }

    /**
     * Get the view / contents that represent the component.
     *
     * @return \Illuminate\View\View|string
     */

    public function render()
    {
        return view('components.news-grid-item');
    }

    public function title()
    {
        return Str::title($this->title);
    }

    public function body()
    {
        return Str::limit($this->body, 40);
    }

    public function image(){
        // Check if image exists in public assets folder
        if(file_exists(public_path($this->featured_image))){
            return asset($this->featured_image);
        } 
        // Fallback
        return asset('/images/fallback.png');
    }
}

And our blade component:

<div class="news-grid-item">
    <img class="featured-image" src="{{ $image }}" alt="featured image">     
    <div class="content-body">
        <h3 class="title">{{ $title }}</h3>
        <p class="excerpt">{{ $body }}</p>
        <button class="read-more">READ MORE</button> 
    </div>
</div>

Read more about class-based components in the Laravel official docs:

👉 https://laravel.com/docs/7.x/blade#components

✍ For more posts about Laravel:
https://yossiabramov.com/

DEV Community: Yossi Abramov

Setting Up Lumen and MySQL With Docker - Part II

Add MySQL 8.0 to docker-compose.yml

Install the pdo_mysql extension

Using Lumen’s .env file

Enable Facade classes

Test Database Connection

Setting Up Lumen and MySQL With Docker - Part I

Install Lumen with Composer

Docker setup

Dockerfile

docker-compose.yml

Create a Blog with Laravel Migrations, Model Factories and Seeding

Setup a Laravel project

Connect to a DB

Models

Migrations

Model Factories

Seeders

Vue.js Scroll Progress Indicator

CSS (SCSS) and HTML

JS

🍦 Vanilla JS Starry Night

CSS

JS

🍦 VANILLA JS LIGHTBOX

CSS

JS

🍦 VANILLA JS INFINITE SCROLL

Custom Admin Columns in WordPress

Custom Columns For Pages

Custom Columns For Posts

Custom Columns For Custom Posts

Recommended WordPress Plugins

Duplicate Page

Custom Post Type UI (CPT UI)

Simple Custom Post Order

Post Type Switcher

Advanced Custom Fields (ACF)

Udemy Course Recommendation

CSS Skeleton Loading 💀

A quick breakdown

Laravel 7 Class Based Components – Part II

Component Class Methods

Add MySQL 8.0 to `docker-compose.yml`

Install the `pdo_mysql` extension

Using Lumen’s `.env` file

Enable `Facade` classes