Front-End

Getting started with Selenium with Python

There are a few automation testing tools for web applications out there. Selenium is one of them and is probably most widely-used. It is the most famous and the oldest, but still relevant, automation testing tool. It is open-source and supports many different major programming languages, such as Java, C#, …

Front-End

SVG Attributes for Sizing Doesn’t Work on iPhone

I created a website that uses SVG files imported in img tags. It looked fine. When I tested the mobile version with iPhone, the SVG was bloated. It worked fine with Android with Chrome, Windows with Chrome and Mac with both Safari and Chrome. For some reason, the sizing attributes, …

Front-End

Why Istanbul Is Not Working After Cloning A Repo

I got a new laptop. I installed the latest Node.js and cloned a repo to keep continuing with my React project. I ran npm i to install all dependencies. The app started fine and built fine. However, when I ran npm test, the test was not running. My test script …

Front-End

Releasing Multiple PWAs to GooglePlay By Using a Single GitHub Page Root

PWA is pretty exciting. As long as you have a static web hosting service, you can create a mobile app with a web site. I’ve written a few posts about packaging and releasing an Android app to GooglePlay in the past. – Tips on Creating Android App from PWA – …

Front-End

Better Way to Attach Event Listener with Vanilla JS

Let’s discuss a better way to attach event listeners to a bunch of HTML elements selected by a class name with vanilla JavaScript. With jQuery, this is super easy. You just select the elements by a class name and use .on(). jQuery will handle event listener attachments to multiple elements. …

Front-End

Replacing Local Storage with IndexedDB

When you build a PWA, you often have to store data locally. The easiest way is to use LocalStorage. Data persists even after ending sessions and it does easy synchronous read-write operation. Although you need to convert a JSON object to string because LocalStorage only supports string, the programming overhead …

Front-End

Unit Testing Event Listeners on Form Input Fields with Karma

Karma is a JavaScript test runner where you can run your unit tests on headless chrome or real browsers. Because it runs on the real browser, it supports the browser web APIs and makes it easy to test front-end JavaScript. With Karma, the environment where unit tests run is truer …

Front-End

Creating a Form for Screen Reader Accessibility

Web accessibility is becoming more and more important these days. If you are not used to implementing web accessibility, it sounds difficult. In reality, making website accessible takes only a little bit of effort and knowledge. HTML 5 supports a lot of accessibility functionality if you use the correct tags …

Front-End

Tips on Creating Android App from PWA

Progressive Web Apps (PWA) is a game changer for Mobile app development. We can turn our web page into a mobile compatible app with a little bit more effort. Create a manifesto file and write a service worker logic, then your website is a mobile app. Once you create PWA, …

Front-End

Why Address Bar Is Not Hidden – Android App with TWA

Ok, I created my Android App by using Trusted Web Activities (TWA). I tested my app on the emulator from Android Studio and it looked all good. The app worked fine in the full-screen mode. I published my first PWA app at Google Play and everything looked fine. When I …