DEV Community: amythical

A rec, CNAME, TXT recs

amythical — Tue, 02 Jul 2024 10:09:35 +0000

I was always confused with the different kinds of records using for the domain pointing and configuration.

Making a note so I remember them and also if it helps others :-

A record - Point a domain/subdomain to an IP Address
CNAME - create alias for domain or subdomain
TXT Records - text used for configuration or validation (Usually SPF/DKIM records)
MX - Used for mail server configuration

Troubleshooting slow page loads

amythical — Wed, 22 May 2024 16:33:27 +0000

Recently I encountered a slow loading page (ReactJS/webpack/node/express) ...
I did manage to pull the load time to a decent time.

I am sharing my findings on my page and the fixes I applied.

Know what is slowing it down

Dont make assumptions, measure it.
I loaded the page and used chrome developer tools to check what was slowing it down

My findings

Too many requests to my express server - At a time Chrome will open about 6 connections to a domain/ip and the rest of the requests to the same domain will be queued
Slow APIs (Adding to #1)
Some CSS and Images served from the server (Adding to #1)
Geography - I used browserstack and accessed it from different regions and I found some apis to be slower from geographies far away from my region
Big chunk sizes (ReactJS + Webpack)

Steps I took to fix these

Low hanging fruit move all CSS and images to a CDN like cloudfront or cloudflare
Slow APIs - Some APIs were serving the same data to all users. This data was periodically updated. I created a static json for these and hosted these on the CDN.
Slow APIs - Tweak my DB query which was serving some data unused by the clients.
Big chunk sizes - Removed unused imports, components not needed on the first render imported them dynamically, applied a terser in the webpack, enabled compression in express server (Separate post on this coming up soon)
Slow APIs - It might be worth looking at moving some APIs to AWS Lamda so that they can be served well in all regions
The smaller chunk sizes helped overall with the other geographies and also data on the CDN helped load the page faster on the other geographies

Key Takeaways

Measure before you fix
Cache where necessary
Dont serve un-needed data in your APIs
Apply compression to outbound data in express
Look at webpack tuning (uglify, terser)
Look at chunk sizes - refactor code
Do not import anything that needs a user action or which doesnt need rendering on the initial load, dynamically load the components also remove unused imports.

Link to my post on Dynamic loading components in ReactJS.
Also a post on late loading images in Chrome.

Call C binary from javascript WITHOUT process.exec

amythical — Tue, 21 May 2024 03:39:03 +0000

What's this about?
I am going to directly start with an example calling a C binary from javascript and it is NOT a process.exec call.

Emscripten is what we will use, it helps us create supporting glue code to call the C binary from javascript.

What about emscripten installation?
I will make a following post on the emscripten installation.
But here is all the action, assuming we have emscripten installed and configured on our box.

Steps

Write C program
Compile using emscripten
Use generated JS file in React code
Run the program and smile

helloworld.c

// The famous hello world in C
#include <stdio.h>
#include <string.h>
#include <stdint.h>

int main(){
  printf("Hello World from C\n");
  fflush(stdin);
  return 0;
}

Compiling using emcc

emcc helloworld.c -o helloworld.js -s WASM=0 -s ENVIRONMENT=web  -s MODULARIZE=1 -s "EXPORT_NAME='mymodule'"

Files generated by emcc

helloworld.js

Using helloworld.js in React

Copy helloworld.js to a folder in your React src/
eg utils

cp helloworld.js utils/ #Linux command line

React code

import mymodule from '../utils/helloworld.js';

async callCProgram(){
    mymodule()
    .then(module => {
      console.log('module loaded!');
  });
}
// Call this function on componentDidMount or on a button click

Run the program

Open the browser & call the url to your React code
Open Developer Tools, console
You will see "Hello World from C" printed in your console
SMILE :), youve called a C program from your React Code

Follow up post on installation coming up soon and may make a series of short posts for emscripten.

Unresponsive UI and a busy main thread?

amythical — Sun, 19 May 2024 16:25:09 +0000

Situation
Say you are in a situation where you have a Popup with a close button and a loader asking you users to wait while you process a lot of data before you display it to them.
You have to carry out computation on a list of items before displaying them.
UX Problem
If we carry this processing out in the main thread, if the users click the close button - it may not respond as the main thread is busy and not listening for the close button event.

WebWorkers may not work if dom elements
My first goto would be Web Workers but sometimes we cannot use a worker because we may need to use DOM Elements with the values in the list.

Solution
So we need to yield control from time to time to process other events in the main thread.
But there is no native sleep method so I am using the following custom function, 'fakeSleep'

  fakeSleep(pTimeSec) {

    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve();
      }, pTimeMillisec);// 16 ms is a good value (60 fps/1 sec ~ 16 ms per frame)
    });
  }

  processingFunction1();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction2();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction3();
   fakeSleep(0.1);// or 0.05 anything you wish 
  processingFunction4();

By yielding control even for a small amount of time in between our heavy processing, we can make the UI responsive.

This is a solution for extreme situations but I have had the need to use this while processing a lot of data on the client.

Cheers.
Happy to hear how you handle such situations.

My mistake with resolve and return resolve

amythical — Sun, 19 May 2024 03:22:45 +0000

TLDR : Just calling resolve does not stop further code execution, return resolve is the right way to stop further code execution.

Lets see this example.

function fun1(){
  returns new Promise(){
      console.log("Before calling fun2");
      fun2().then(response){
          if(response == 1234){
             resolve(response);
          }
          console.log("After resolve");
      }
  }
}

Now if you run this, the console prints

Before calling fun2
After resolve

But ... I had called resolve so the code at "After resolve" should not have been reached.
WRONG!

Correct use

fun2().then(response){
          if(response == 1234){
             return resolve(response);
          }
          console.log("After resolve");
      }

Now it works as expected and returns where intended stopping further code execution.

This was a small oversight but it leads to unexpected behaviour in the logic flow if ignored.

Just sharing my experiences, small things that will save time, sweat and hair on the head.

Cheers.

AWS Cognito terms that confused me

amythical — Sun, 19 May 2024 03:11:55 +0000

I made a list of terms that confused me while referring to documentation on AWS Cognito.

APIG : Api Gateway
Authentication : Verified the identity of the user eg are you a valid used with a proper email and password registered with the system?
Authorization : determines their access rights eg Does this use have the privileges/rights to delete this file?
CF : CloudFront
Federated users : An authorised user with a single token to obtain access to other systems in a network
Federated Identities - Identities in your AWS system having temporary access to AWS Resources like S3
IAM : Identity and Access Management
Identity pools : Provide temporary creds to guests or authenticated users to access AWS resources like S3, under the Cognito Service
Policy Variables : Default or Custom mappings in the Identity pool in AWS Cognito mapping the User Pool attributes to variables that are available for use in an IAM Policy. Without these the user pool attributes are not available for any Conditional Statements in the IAM Policy
sub : short for subject is a UUID for each Cognito User in the Cognito user Pool
User pool : Is a user directory provided by AWS to manage user profiles under the Cognito Service

Originally posted on my github

Sources referred - beabetterdev.com

Nodejs axios certificate error

amythical — Sat, 18 May 2024 17:54:13 +0000

TLDR - Solution for axios certificate error if you are using node 8.10.0 or an older node version.

I ran into a certificate error/CERT_HAS_EXPIRED error when running a simple axios get request in nodejs (calling pexels api).
Surprisingly I checked with a CURL call and the request went through fine.

Tip - For debugging api/network calls using curl from the linux instance is very helpful

The Problem
I happened to be using an archaic node version 8.10.0 on that particular software stack.
Apparently some certificate in letsencrypt expired and that has led to this error when calling axios using node 8.10.0 versions.

Here is the link to the stackoverflow thread that helped me solve it - https://stackoverflow.com/questions/69414479/giving-axios-letsencrypts-new-root-certificate-on-old-version-of-node

Diagnosis
I had assumed there was an issue with the endpoint of the api, but the api owners confirmed there wasn't an error.
When I cleaned the npm cache sometimes the error went away.
The curl call from the same instance helped me isolate the issue to something on the instance.

Solution
Create a https agent with the SSL certificate and use it with the axios request.
I found the solution in the stack overflow link.
The link has the code snippet.

Explanation for the error
With the letsencrypt certificate expiring, the openssl library bundled with the older nodejs installation was failing.

Hope this helps someone.

Cover photo credits - Photo by Vie Studio from Pexels: https://www.pexels.com/photo/word-error-on-white-surface-4439425/

Webpack4 fix for .mjs files

amythical — Sat, 18 May 2024 05:50:54 +0000

Using CRA and Webpack4 and find .mjs files giving an issue? (Yes im using CRA and Webpack4 in 2024 FML!)
Here are webpack config settings that will help -

const  reScript = /\.(js|jsx|mjs)$/;
resolve: {

// Allow absolute paths in imports, e.g. import Button from 'components/Button'
// Keep in sync with .flowconfig and .eslintrc
modules: ['node_modules', 'src'],
extensions: ['.js', '.jsx','.mjs']
},

module: {
// Make missing exports an error instead of warning
strictExportPresence:  true,
rules: [
{ 
test: /\.mjs$/,
include: /node_modules/,
type: 'javascript/auto'
},

// Rules for JS / JSX
{
test:  reScript,
include: [SRC_DIR, resolvePath('tools')],
loader:  'babel-loader',
options: {} 
}
}],

Cheers. Happy hacking!

Cover image credits - https://unsplash.com/photos/text-KZcWygxZ_J4

Lazy loading components in ReactJS

amythical — Sat, 18 May 2024 03:13:12 +0000

Why should you lazy load components?

TLDR - For optimised chunk sizes and page load time.

I'll share my experience. My chunk sizes in the React production build were huge, much larger than the usual sizes.
React 16/Webpack 4 so unfortunately the good utilities like bundle analyzer would not work, so I glanced through the chunks' javascript code.
All the static imports were included in them, bloating the size of the common chunks used by the modules.

I refactored the code by late loading components which were not used/rendered on the screen on initial load. There were components which were loaded after the users actions like button clicks or scrolls, which were lazy loaded when needed.
This reduced my chunk size and also that led to a quicker load time of my page.

How to lazy load components -

React SSR - For SSR, '@loadable' is recommended.

import  loadable  from  '@loadable/component';

// using it when needed 
const  myReactComponent = loadable(() =>  import(`../../components/MyReactComponent`));

React Lazy and Suspense

import Suspense from react;

class Test {
   constructor(){

   }

   someFunction(){
    // Import here and not statically
    const myReactComponent = React.lazy(() => 
    import(`../MyReactComponent`));
    this.setState({myReactComponent:myReactComponent});
  }

  render(){
    return (
      <Suspense fallback={<div>Loading...</div>}>
    <this.state.myReactComponent>
    </this.state.myReactComponent>
      </Suspense>
    )
  }
}

The fallback attribute takes in a markup which can have text/loaders or another component.

Cheers.

Lazy loading images using JS & ReactJS

amythical — Fri, 17 May 2024 18:10:21 +0000

We all want the page content to load as soon as possible. When we have a bunch of images, we wish they would load in the order we see them and only load what would be visible to a user.

The default loading of images in a collection is random and load in any order leading to a not so smooth user experience.

I wanted to lazy load the images.

My Options to begin with in 2024 -

1.Native loading - The loading="lazy" attribute natively supported by browsers (https://web.dev/articles/browser-level-image-lazy-loading)
2.Intersection observer - custom implementation
3.React components abstracting the functionality of lazy loading

Native lazy loading worked well for me as I was focussed on Chrome.
https://web.dev/articles/browser-level-image-lazy-loading
Important to have the image width and height specified for this to work well.

For native lazy loading to work in firefox I read a suggestion on stack overflow to put the loading="lazy" attribute before the src attribute in an image tag.

<img loading="lazy" src="path/to/myimage.jpg" />

CONS: No Control on the trigger to start loading images
With native lazy loading there is however no control on the trigger when the images will start loading. Chrome has some defaults for when to trigger the lazy loading based ond on the screen size and the internet speed.
For finer control on the trigger eg start loading images before 100px from the scrolling point, #2 Intersection Observer or #3 components based on the Intersection Observer will give finer control.

Some enhancements to the image conatiner/holding div while the image loads -

LQIP - Low Quality Image Placeholder
We can load a low quality image in place of the heavier/actual image until its loaded.

If you are using React, below is a code snippet to give you an idea, (I haven't yet taken to functional components preferring the class components with lifecycle methods) :-


componentDidMount(){
   this.setState({photoUrl:this.props.lqipUrl});// load the lqip first
    loadImage();//async load the main image
}

const loadImage = async (pUrl)=>{
   const tImage = new Image(pUrl);
   const that = this;
    tImage.onLoad = ()=>{that.setState({photoUrl:pUrl};// change to the main image after loading 
    tImage.src = pUrl;
}

render(){
  return (
     <img src={this.state.photoUrl} loading="lazy" />
  );
}

We could also apply some blur effect on the image tag when the LQIP is loaded , when the main image is loaded we can animate the blur to sharpen the image.

Some good tips on lazy loading https://imagekit.io/blog/lazy-loading-images-complete-guide/

Dominant color of the image as a background color
I like the idea of using a background color for the image div while the main image loads incase we dont use a lqip. This background color is a dominant color in the image, so it looks a little seamless when the image with similar colors loads.
If we use stock photo apis we get the dominant color as an attribute in the API we can use.
I have seen this in action on pexels.com

Cover Image credits - Photo by Samer Daboul from Pexels https://www.pexels.com/photo/close-up-shot-of-printed-photos-1226721/

Do share in the comments if you have any other approaches to lazy loading images.

Simple function to print table in browser console

amythical — Thu, 16 May 2024 13:52:39 +0000

TLDR - console.table()

When debugging for performance bottlenecks often we want to run through loops and function calls and record the time between the calls and see the bottle necks so we can optimise them.

I have found console.table() to be very helpful.

Example

let tfun1s,tfun2e,tfun2s,tfun2e,ts,te = 0;

ts = performance.now();
tfun1s = performance.now();
fun1();
tfun1e = performance.now();

tfun2s = performance.now();
fun2();
tfun2e = performance.now();
te = performance.now();

// time in microseconds
console.table(
   ["fun1",tfun1e-tfun1s],
   ["fun2",tfun2e-tfun2s],
   ["Total",te-ts],
);

On the console the output shows up like this

I found this much later and its so much easier to use and control with wrapper functions instead of numerous console logs dotted along the code.

Happy debugging!

Would like to know any other helpful tips for debugging client side code for optimisation - please leave you comments.

Cover photo credits - https://unsplash.com/photos/a-computer-screen-with-a-bunch-of-code-on-it-ieic5Tq8YMk

New to DEV.to - About me

amythical — Thu, 16 May 2024 05:28:01 +0000

New to DEV.to but not new to Software development.
20+ years into software development
Here is my journey -

90s dot com - noob web developer
Built Web products for large enterprises
Early member of a digital agency riding the Facebook/Orkut social media rush of mid 2000s (Successful exit)
Crash landed my hardware IOT startup and learnt hardware is hard (https://www.indiegogo.com/projects/neo-the-first-social-storytelling-toy#/)
Currently building a webapp to help businesses create videos with ease Trying to find the first early users. Building and learning something new everyday with javascript/wasm/ffmpeg/aws/C and loving it!

What brings me here ?
To share my experiences/learning and code snippets when I build and learn everyday
Learning and connecting with other devs at dev.to

What interests me?
Im glad my favourite 'C language' is back and playing a major role in client side development via WASMs.
With WASM the power of computing has improved on the browsers. I am keenly interested in leveraging WASM and other client side computing technologies to improve the product performance, user experience and at the same time optimise costs for the product builder.

I have an eye on generative AI integrations

As a developer to improve productivity
As a builder to make a product smarter and provide more value to the user

Happy to help and discuss any questions on Javascript, AWS(Lambda/SQS/SES/S3/CloudFront), FFMPEG, Emscripten, WebCodecs, javascript, browser based computing using WASM/Workers, AI integrations

Header Image Credits - https://www.agilenative.com/2017/01/hello-world/