Add cool features to your Chrome extensions with these APIs

Photo by Caio from Pexels

Getting started with building Chrome extensions is easy, but most newbie developers get stuck halfway when trying to incorporate more advanced features into their extension. In my opinion, it is mainly because the Chrome extension API docs are full of heavy technical jargon and somewhat disorganized. Therefore, developers often can’t find what they are really looking for, even though it is somewhere in the documentation itself.

This article presents you with 5 Chrome extension APIs that most developers are not aware of. …


Fullscreen API, Payment request API, and more explained in detail with example code

Browser APIs (or web APIs) are the APIs that come built-in with the browsers. They allow developers to perform complex operations without dealing with the sophisticated lower-level code. There are a number of browser APIs for manipulating the DOM, making network requests, managing client-side storage, and retrieving device media streams, etc.

In the present, new web APIs are introduced and existing APIs are being deprecated in a frequent manner (eg: Battery API, WebVR API, etc), and there are also some APIs that have not been standardized yet. …


The mechanism that empowers real-time network communication on the Internet.

But in the end, it doesn’t even matter - photo by Dana Choi on neweggbusiness.com

Sockets are the lowest abstraction for the programmers who are working in the network programming domain. There are primarily two ways (protocols) of how socket communication should occur.

One way enforces a set of rules and mechanisms over the communication so that the probability of occurring an error is made very low, but these additional controls itself slow down communication.

It is called TCP (Transfer Control Protocol). In contrast, The other way has very few rules and therefore it makes communication fast but doesn’t guarantee accuracy. This is called UDP (User Datagram Protocol). …


#2 MemoryRouter

React-router is one of the most used routing libraries in React. It facilitates routing and navigation for both web (React.js) and mobile (React Native) so that we can rely on a single solution for all our navigation needs in the React ecosystem. However, most of us, especially the beginners in React often stick into the basics of React-Router and are not aware of some other functions that it offers. This article brings in some less-discussed features about React Router. Having a fair understanding of these may come in handy somewhere in your React developer journey.

01. Prompt

While a user is filling…


Get to know the unsung hero of network communications on the Internet

Photo by Neven Krcmarek on Unsplash

Client-Server Architecture is the most prominent application structure on the Internet. In this architecture, clients ( eg: personal computers, IoT devices, etc. ) first request resources from a server. Then the server sends back appropriate responses for the clients’ requests. For this to happen, there should be some mechanism implemented in both the clients and the servers which supports this network transaction. That mechanism is called socket communication.

Almost every application which relies on the network operations, such as fetching data from remote servers and uploading files to the server, extensively utilize sockets under the hood. …


Also use these events and API, provided by React Navigation library

React Navigation-Photo by Dan Chung on Unsplash

React lifecycle hooks help us to detect the various phases of rendering UI. In the web, we often use useEffect hook to perform actions when rendering, on change of specified variables, and when unmounting. However, this is not enough when it comes to recognizing screen transitions with React Navigation in React Native.

I faced such a situation some time ago. The project I was working on had a Profile screen and a Settings screen. The profile details can be updated on the Settings screen. …


REDUX WITH REACT HOOKS

The most comprehensive guide you’ll ever find

Add Redux to Your React App

Did you ever have a hard time understanding Redux? I was once also like you, abandoned in a sea of buzzwords that made no sense at first. This article aims to explain how Redux works and add Redux to your React app. If you make it to the end of this article, I’m pretty sure that you will get a solid understanding of Redux and how to use it within your React app.

I will first introduce what Redux is and the problems it will solve for us. …


Steps to Integrate PayHere Payment Gateway with a React App

PayHere — Sri Lanka’s First Online Payment Gateway

PayHere is Sri Lanka’s first online payment gateway. It supports several payment models such as one-time payments, recurrent payments, product-based payments (PayHere links), and automated charging. PayHere has introduced a JavaScript SDK for integrating PayHere checkout experience into web apps as well as Android and iOS SDKs to integrate PayHere with Android and iOS mobile applications respectively. However, the docs on PayHere JavaScript SDK has less information on how to integrate it with Single Page Apps built with front end JavaScript frameworks. This article aims to serve as a guide to anyone who wants to integrate PayHere into their React.js…


Steps to Create a Custom Domain Name for a Blog in Blogger

Add a custom domain to your blogger blog

Blogger is a platform where an aspiring writer can start their writing journey without much focus on technical things like domain names, hosting, etc. However, the default domain name provided by Blogger may not fully reflect the identity of your blog, and users may have a hard time remembering your blog URL. This guide illustrates the steps that you should follow to add a custom domain from Freenom to your blogger blog for FREE so that you can have a custom URL with zero cost which better reflects what your blog stands for.

Please note that the domains and blogs…


Beginner’s guide to implementing the stack data structure in Java

Photo by Bekir Dönmez on Unsplash

Many of you have seen stone stacks like the one above. If you want to take a stone without breaking the art, you should take the uppermost smallest stone, and to add a stone, you are able to place it only on the top of the existing stone stack. This is true for not only stone stacks but also for the stacks that we encounter in our day-to-day life such as stacks of books and piles of plates.

Pavindu Lakshan

Software engineer intern @liveroomlk | Undergraduate of FIT, UoM

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store