Tag: JavaScript

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

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

Puppeteer tricks to write a bot/scrapper

Programming, Scripting, Tech and IT
Puppeteer Scraper

I wrote a bot recently that does some actions after it authenticates with an account using puppeteer and it was incredibly easy.
In case you don’t know what puppeteer does, well, it is simply a Node library to control Chromium or Chrome programmatically, now such a library can have many uses but I’ll focus on what you need to know when writing a scrapper/bot.

The first thing to know is what kind of website you are dealing with, it is a traditional website or is more like a SPA type of website? And you need to know that because using the waitForNavigation is practically useless on SPA websites. View full article

Example of Language System in an Ionic 3 Application

How I solved it, Programming, Tech and IT
Language System in an Ionic 3 Application

When you want to create a language system and add multiple languages to your Ionic APP you have various designs available, but in a simple APP, there are 2 major ones.

The first design is where the UI design and APP functionality remain the same for both languages, in this case, you can use some javascript objects for every component you have.
This design is suited when you want to have consistency and implies a bit less work.

The second option is to clone each of your components for every language and make an appropriate file structure.
This design works well when you want to have different functionality and UI depending on the language. View full article