DEV Community: Adel Emad

Progressive web app (PWA) Mistakes and Enhancements

Adel Emad — Sat, 05 Feb 2022 18:44:43 +0000

In this article, we will show some mistakes that developers do in their PWA manifests and some tips to enhance your PWA through enhancing your manifest.

Before I start, let's have a moment to explain some important definitions.

Definitions

PWA (Progressive Web App): according to web.dev

Progressive Web Apps are web applications that have been designed so they are capable, reliable, and installable. These three pillars transform them into an experience that feels like a platform-specific application.

So, PWA seems like a native app for mobile and desktop platforms but it runs in browsers capabilities.

Manifest: is the backbone for your PWA. It is a JSON file that includes some basic info and some necessary resources for your app.

After understanding these definitions, we are ready to start our article.

Mistakes most developers do in their manifests:

Icons property: In your manifest, you can set a list of your app icon so when the user installs your app, he/she can see the app icon in the os launcher as any native app. However, this property does not work in IOS devices 😱

How to solve this issue ?
you can define the icons on your html head like this

<link rel="apple-touch-icon" sizes="180x180" href="yourIcon.png">

Display property: you can set how your app will look like when it is open through using this property. It can have a value from fullscreen, standalone minimal-ui or browser. However, Some developers forget about the notch when they set fullscreen value so the content is trimmed from above and their app appears like this

The Solution:
You can use SafeAreaView and set some padding to your app through CSS. like this

 padding: env(safe-area-inset-top) 0 0 env(safe-area-inset-left);

but first, you need to take the permission to use these values.
So in your head tag, you should place these tags.

<head>
  <meta name="viewport" content="initial-scale=1, viewport-fit=cover, width=device-width"></meta>
  <meta name="apple-mobile-web-app-capable" content="yes"></meta>
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"></meta>
</head>

How to enhance your manifest?

short-name property: In your manifest, you can set a name for your PWA but what if the OS does not have enough space to display the name? yes, you guess it right, the short-name will be displayed.

What will happen if I don't set the short-name prop?
if your app name is long, it will be trimmed like this 👇

Add screenshots to your app installation: When you prompt a modal to ask the user to install your PWA using beforeInstallPrompt event, You can add some screenshots from your app to attract the user to install it.

it will look like this

and here is a snapshot from the Twitter manifest.

 "screenshots":[
      {
         "src":"https://abs.twimg.com/responsive-web/client-web/twitter-lite-data-saver-marketing.68059865.png",
         "sizes":"586x1041",
         "type":"image/png"
      },
      {
         "src":"https://abs.twimg.com/responsive-web/client-web/twitter-lite-explore-marketing.fd45b025.png",
         "sizes":"586x1041",
         "type":"image/png"
      },
      ],

Finally, you should consider manifest props limitations and consider enhancing user experience to attract him/her to install your app

Do you know these data-types in JavaScript

Adel Emad — Wed, 28 Jul 2021 05:54:16 +0000

Besides all the known data types in javascript like Stings, Arrays, and Objects, there are some other types that are not widely used.

In this article, I will explain Two data types in JS

Maps
Sets

Maps

Maps are collections of key-value items, and yes this is similar to Objects.
However, there are some differences that make the Maps data type unique 😎 .

Objects Keys are always one of type String or Symbol, you can not have a key in an object with any other type
Maps Keys can be any type of data

Let's see some examples for object keys

As we can see in the above example, objects keys are converted to type string even if they are not strings
so the keys are converted like this

1 will be '1'
'string' will be 'string'
{'key':'value'} will be [object Object] which is the output from conversion of object to a string

Now let's see how the Maps types handle this issue

as we can see the keys of the Map remain the same without any conversion in type.

In the below table, there is a comparison between Map and Object

	Maps	Objects
Keys	Can be any data type	Any key should be of type string or symbol
Define	`let map = new Map();`	`let obj = {}`
Set pair (key-value)	`map.set(key,value)`	`obj[key] = value`
get value of key	`map.get(key)`	`obj[key]`
remove value by key	`map.delete(key)`	`obj[key]=undefined`
get keys	`map.keys()` returns an iterable for keys	`Object.keys(obj)`
check if has key	`map.has(key)`	`obj.hasOwnProperty(key)`

Sets

Sets is another data type in JS, it is a collection of values where each value occur only once.

Let's see an example

An interesting application for this is to remove the duplicate values from array. For example

You can know more about Maps and Sets from here 🌻

Finally, it is great to know more about all the types of Javascript as you can need them in the future.
even if you rarely use them, having the knowledge of these types will expand your ability to have different solutions for some problems 🎉

Git Bisect, When and How?

Adel Emad — Mon, 26 Apr 2021 21:00:25 +0000

In this article, we will learn about the git bisect command which is rarely used but can be helpful in some cases.

When can we use `git bisect`?

according to git docs, git bisect is used to find a commit that produces a bug ; however, I do say that it can be used to find a commit that produces anything you can notice in the program output; for example:

Log statement (ex. console.log)
Enhancement to a certain part ..etc

Therefore, if you are asking where I can find the commit that is responsible for certain output, you can use git bisect command

When not to use it?

If you want to know the commit or person that is responsible for a certain part of the code, you can use Gitlens

	Use `git bisect`	Do not use `git bisect`
You want	To get the commit and its info	To get the commit and its info
You have	Output not code.. for example: - Bug you can reproduce - log statement	Code so you can use another tool to get the commit info

How can I use `git bisect` 🤔?

First, detect the output that you are searching for its commit info, then run

git bisect start

then run

git bisect good [hash of commit]

and insert the hash of the commit where you are sure that that certain output is not present.
Then run

git bisect bad [hash of commit]

where you are sure you can reproduce this certain output. you can leave it empty to choose the certain commit.

then git will start jumping between commits that are between the good commit and the bad commit
for every commit, try to reproduce the output that you target, if you can reproduce it, then run git bisect bad;
if you can not reproduce it, run git bisect good

Finally, git will log the commit info that is responsible for the output that you are looking for 🎉.
Then run git bisect reset to end the process.

I hope this article has helped you understand git bisect command