Category: Web Dev

Build a Simple WordPress commenting system on top of the native one with AMP support

Web Dev
WP commenting system

There are a lot of commenting system plugins out there but most of them come with a cost, and sometimes just building a simple WordPress commenting system on top of the native commenting system can be enough.

The main features of this system will be:

  • Comments will be only loaded if the user clicks a button
  • Comments will be submitted and fetched by JS
  • Comments will have paginations fetched by JS
  • Comments will have some JS interactivity
  • Comments will have the reply feature enabled
  • The comment system will have an AMP implementation
  • The comment system will have a no JS implementation
  • Comments will work the same on AMP with our own script

The first thing will have to do for our system is to make some custom REST API for the JS to fetch. View full article

Async Task without Queue or E-loop PHP

How I solved it, Programming, Tech and IT, Web Dev
laravel asynk task

Most react-PHP code I’ve seen in the open that is not extension-based (doesn’t extend the PHP core language) uses some kind Event-Loop, something similar to how many technologies or languages(I.e. JavaScript) implement concurrency that doesn’t support threads.

And historically on single-core CPU’s threads practically transformed into loops underneath. But the main idea is that in many languages, an async behavior is very easily achieved, maybe you need a keyword, maybe you need a special class, but in general, it is simple.

Now if you want the easiest way to do something asynchronous in PHP it will be a little costly, you can do that by spawning a new PHP process directly from PHP. View full article

The new native-lazy load Vue Component

Programming, Tech and IT, Web Dev
Native Lazy Load Vue

So since April 2020 we have a browser native support to do lazy loading of images which is great, so i decided to write a quick Vue component that uses that functionality.

One problem with the lazy native loading is that it won’t display any loading indicator when the image loads.

At the moment only Firefox and Chromium(also Android) based browsers are supporting this feature but it behaves very differently, in Chromium-based browsers it loads far from the end of the viewpoint (a very eager lazy loading) and in Firefox (the image will load only when it enters into the viewport by a lot like 5% or 10% of the IMG element). View full article

Simplest way to reduce the page number links in Laravel

Programming, Tech and IT, Web Dev
Laravel Pagination

Recently and currently(Laravel 5.6) Laravel is using Bootstrap-4 and they’ve updated all their views accordingly, and when you want to use Laravel’s pagination feature you may have a bit of a problem in the mobile world as there are too many page links to be shown in an esthetic way on a mobile screen.

So you can do a lot of things to resolve this problem but the simplest way available is to change the view which defines the links listening.
First, we need to publish that view, this will force Laravel to use the published view, not the one residing in the app-source/vendor directory.
We do that with the following command:

php artisan vendor:publish --tag=laravel-pagination

You should immediately see after executing the command the following:

Copied Directory [\vendor\laravel\framework\src\Illuminate\Pagination\resources\views] To [\resources\views\vendor\pagination]
Publishing complete.
View full article