Building a web site for an auction, we wanted an infinite scroll of lots as many lots where expected.

The web application is a Laravel project with Livewire for the views.

The Livewire Component

The list of lots is a Livewire component:

<?php

namespace App\Http\Livewire\Catalogue\Lot;

use Livewire\Component;
use Illuminate\Database\Eloquent\Builder;

use App\Lot;
use App\Auction;

class LotList extends Component
{
        public $count;
}

$count tracks the number of lots to show on the screen.

We render the view with:

public function render()
{
    return view('livewire.catalogue.lot.lot-list', [
        'subdomain' => $this->subdomain,
    ]);
}

Using the computed property,

public function getLotsProperty()
{
    $query = Lot::query()…

For all of you Bootstrap, developers who need to construct a multi-step form in React, here is this simple one.

It was built with Create React App and uses React Hooks and Bootstrap 4.

It displays a linear progress bar at the top. The user fills the details in stages, followed by GDPR information and a Thank You stage.

It is a single component where each stage is rendered according to the stage counter,

{
    stage === 4 && ...
}

App.js

import React, { useState } from 'react';
import './App.css'; 

const stages = ['name', 'contact', 'gdpr', 'thanks'];

function App() {…

Laravel-medialibrary is a Laravel package for associating all sorts of files with Eloquent models.

We have an Auction model that uses the library to associate an image with each object,

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;

use Spatie\MediaLibrary\HasMedia;
use Spatie\MediaLibrary\InteractsWithMedia;

class Auction extends Model implements HasMedia
{
    use HasFactory;

    use InteractsWithMedia;
}

We wanted to seed an Eloquent model that has associated images using a seeder AuctionSeeder:

class AuctionSeeder extends Seeder
{
    /**
     * Run the database seeds.
     *
     * @return void
     */
    public function run()
    {
        Auction::factory()
                    ->count(10)
                    ->create();
     }
}

running a factory AuctionFactory,

namespace Database\Factories;

use App\Models\Auction;

use Illuminate\Database\Eloquent\Factories\Factory;

class…

NFC Tags are used extensively in agri-tech, warehouse, and logistics operations to track real-life objects.

With COVID-19, contactless technology has acquired importance in commercial and consumer applications. We see a need to scan NFC tags with mobile applications beyond the above well-known industrial applications.

Cordova

Cordova is a cross-platform mobile framework for apps in Android and iOS. Building a Cordova mobile app is easy for web developers as it uses the standard HTML, CSS, and JavaScript technologies. One use either plain JavaScript or one of the more expressive Single Page Application (SPA) frameworks, such as React, Vue, or Angular.

While Cordova…

Electron is a cross-platform framework for building desktop apps with JavaScript, HTML, and CSS.

In agricultural, industrial, and logistics integrated facilities, such desktop apps often need to read information from barcodes and QR codes printed on real-life physical objects.

In an online auction project, the users were spread in a variety of time zones. Each had to see the accurate time for the end of the auction, while some users would create auctions from the web page. This required us to juggle timezones at the front-end and the backend.

Dates, Times, and Time Zones

A user of a web application has to see the dates and times in his/her local time zone. These dates and times in a SPA, or dynamically rendered parts of a we page, are obtained by JavaScript from the browser, using new Date(dateString)

This dateString comes from the server, so…

An auction system either live or timed runs by the clock. In a live auction, one often runs calls on a bid according to a clock. In a timed auction, you start and end an auction by the clock, and you show the users a countdown timer.

Browser Times Cannot Be Trusted

In a browser, new Date() gives you the user local time, according to the user's computer local time. As users reside in different time zones, and moreover may have inaccurate computer clock, or they may just intentionally modify that clock, the local time will be different.

Obviously, one cannot let the user observe…

It used to be the case that when you program a Laravel project, you program in PHP within the Laravel framework, and then have Vue.js or some other front-end framework at the front-end.

The rise of the TALL stack — Tailwind CSS, Alpine.js, LiveWire, Laravel — has grossly diminished the role of front-end frameworks, specifically through the use of Livewire to program in Laravel-speak much of the dynamic aspects of the front-end.

The integration of ReactPHP into Laravel for web sockets in Laravel Websockets, eliminated the need to use the Laravel Echo Server server and more generally Node.js …