DEV Community: Hannan Ali

My semi-formal Introduction

Hannan Ali — Tue, 03 May 2022 22:18:05 +0000

Hello World,

Every now and then I have to write a page introducing myself to the world and convey that somehow I matter and this is just one of those.

I am Hannan Ali, and I have been coding for a long time now. Before, I introduce you I just want to tell you that I love software development and playing with computers. So much so, that I happily gave up my formal education to pursue it full time before time.

What is my stack, you ask?

I don’t like boxes personally, and defining one’s stack is just that. A box.

As long as it requires code and the problem is interesting enough, I am always open to learn new technologies, languages, frameworks, you name it!

Saying that, I would leave you confused, if I don’t give you a relative measure for my technology prowess.

Hence, I hereby proclaim, to all thy fellow readers, that I can be confidently placed in the categories below for hiring purposes ;) .

Node.js and it’s frameworks and libraries
Cloudflare Workers
Google Cloud Platform
React.JS (maybe get a smaller box when it comes to this)
HTML
CSS
JavaScript
TypeScript
Fixing Cross Browser Compatibility Issues

Do I learn new things?

Yes, I love to learn new things.

Right now, I am learning Rust programming language so I can write Cloudflare Workers in Rustlang.

Also preparing for a Google Cloud Certification at the moment.

Do you have one of those PDF documents called Resume?

Why Yes? Thank you for asking for one. Email resume@hannan.codes and it’ll be sent to you quickly.

Cloudflare Pages and updating the Node.js version

Hannan Ali — Wed, 20 Apr 2022 19:14:53 +0000

TLDR: I explain the story here, if you want to go to solution, go a little below.

In the last post, I mentioned, my will to blog and Cloudflare’s automagical ability to setup auto deployments from Github Repository. But it still took me some time to figure that what I was looking for was there all along.

If you are from the same time as me, you’ll probably see a cryptic error mentioning that Node.js version is not supported by Gatsby.

You may think that Cloudflare Pages Build system doesn’t support any higher versions and start deliberating some other options such as Github Actions, which might give you more control over the node version and get your site up and running. But this option has it’s own downsides.

It turns out that Cloudflare Pages unlike it’s Worker’s product, doesn’t have a Github Action for it. Hence, the workflow I brainstormed turned out to be something like the following

Generate Github Artifacts through a Github Actions Workflow
Once generated push the artifacts to a branch on the same repository or a different repository
Let the Cloudflare Pages listen to that branch/repository so it can auto deploy the static artifacts

As you can see, it’s cumbersome and who needs to maintain a separate build process.

Thankfully, there’s an easier way to do this.

Easiest Solution

The easiest solution I found for this problem was just tell Cloudflare to use a newer Node.js version than the default one it currently uses. This is possible, by changing the NODE_VERSION environment variable in the settings of your Cloudflare Pages project.

There are range of configurable environment variables that Cloudflare offer for different languages and runtimes it support. You can take a look on Build Configuration to learn more about these.

Yes, So No Extra Complicated Build Processes required, thanks for the configurability of Cloudflare Pages.

Conclusions

So I guess the conclusion of this post is, it always pays to look deeper into the product and see if they have any native solutions to the problem.

In short, Read The Manual and Save Some Time :)

Building Future of Web

Hannan Ali — Tue, 08 Aug 2017 09:03:14 +0000

The new web era contains exciting features which makes this web more awesome and helps to fill the void between the native and web applications which was once considered inconceivable.
These new features coming to web standards are not only buzz words but they allow developers to make their web applications faster and more accessible while upgrading the user experience progressively and still keeping the site accessible if the user’s browser does not support these capabilities. (Spoiler: More about this at the end )

As a developer and web aficionado, I was compelled to write technical story about features in progressive web applications that make them very exciting such as Web Push notifications which is a vendor free way to enable the ability of receiving push notifications in web applications but before I go down that path, we should boil things down and question ourselves Why we want to build a Web application that provides a great experience on slow connections and works when the user is not connected to the Internet, which increases the accessibility of the application instantly.

slow internet and empathy

Slow experiences create problems for many people worldwide, especially for those who don’t have large data plans with fast bandwidth capabilities. These days I don’t have to travel far in order to feel the effects of how strongly it handicaps people worldwide, but the empathy struck home when I moved to an area with a slower Internet connection because of poor af signal coverage.

As of now, I have been receiving approximately 0.17 mbps speed on my desktop connection which is incredibly low for what my usage used to be in the past, I experience such slow speeds usually in the peak hours, it ranges from this speed to about 0.6 mbps and is a far cry from previous provider I used to be on which was not particularly great but had stable speed and unlimited downloads.

More people should try out what Facebook did with their 2G tuesdays to give their developers feels of their very own product on slow 2G connections for an hour to connect them with millions of users who browse their applications in similar or worse conditions every day and on devices that have much lower resources. I can feel the frustration for developers but it’s positive to say that such an exercise is a good lesson to build products with empathy at their core. You can also take similar action today by going into Chrome Developer Tools Network Panel and throttling the speed of your network to match those of 3G connections and ask yourselves if the performance of the application you are building for feels right to you.

There are a lot of NOs said when the speed of connection is slow and each site is not able to load and provide the same fast and interactive experience to the user. NOs in many cases are there because of the unoptimized experiences of web applications and we can convert them into YES with a better attention on the performance and page load times of web applications.

Metered Mindset

User behavior is different although human beings crave for abundance, people are modest when they know their resources are limited and it is required for survival and better access to information that at times people use their data plan (a.k.a packages subscriptions in the telecom lingo here) a little bit more smartly and only when needed.

This data costs precious money and is quite expensive, given that many people are not even ready to pay money for it in the first place, and it’s slow too which makes it even more precious and a decision to visit each website for important information or sometimes to make a purchase or sell something consumes time and people are already too busy to spend a minute or so waiting for a page to load unless it’s Ludostar on web somehow. Web can be better if we help users achieve their goal quickly and while doing so make it a frictionless experience so they can do more in less time.

Being mindful of Web Issues

Websites which provide low latency experience on mobile connections and perform reliably on unreliable connections lead to higher engagement among users and lesser bounce rates bringing back users to the site more frequently. Better engagement provides more opportunities for the businesses to monetize and causes direct increase in the clickthrough rate (CTR) if it contains advertisements.
Low latency experiences for your mobile site can lead to longer average sessions by about 70% and cause 25% better ad viewability which can grow mobile ad revenue for businesses upto 2x which ain’t too shabby if you ask me.

Sites are experiencing bigger chunk of their traffics from mobile devices and this chunk is even greater for developing world exceeding the 90% users threshold on mobile, since most of the people in the developing world will have mobile as their first screen, lowering the barrier of entry for an application is extremely important to gain a larger user base and perform well even on cheaper and lower performance devices.

Low data consumption experiences can lower the barrier of entry for many of the users, as there are no app installs, credit cards or sign ups required to open an application. The wait times are lower than installing a mobile app, and given that app boom is pretty much over, you are losing users if not gaining by not giving web application much needed attention. Jumia’s new mobile web experience requires 25x less data storage and has bounce rate 50% lower than the previous mobile site.

OLX India, a popular portal to buy/sell things experiences 90% of their traffic from mobile devices but still most of the conversions were happening on their native mobile app, however, on the analysis of their mobile site, they found it to be slow and the monetization suffered because of slow loading ads. After rebuilding their mobile site experience, OLX India’s bounce rate dropped by 80% and they have since seen a 250% increase in engagement.

developing better solutions

By this time, I am hopeful you are convinced that the user expectations for speed quality are higher than ever and we need to supercharge the web experiences we build, to deliver fast, performant and secure content to any screen.

Issues that exist with the mobile web are real but these can be solved by analyzing the performance of your applications and then reducing the performance bottlenecks that exist in the application following the best practices.

Browser evolution and PWAs

Browsers evolve with each day, introducing new features and performance improvements, instantly enabling people worldwide to do more with their applications, new browsers come bundled with features such as Service Workers enabling native like futuristic experiences on the web.

Web applications can utilize the new upcoming features of the web by progressively enhancing the user experience if the browsers support the features such as ServiceWorkers to enable instant loading and offline first applications on mobile and desktop.

Web Push Notifications can be used to engage and retain users of your application by providing them alerts about different events going on, without the hassle of installing a native mobile and just with a few clicks.

As evident from the case studies of companies, building a Progressive Web Application (PWA) can cause direct increase in user engagement and in mobile ad revenue. A PWA might be just right for your brand if you want fast and reliable experiences for your users even with low data and resources consumption.

learning to develop next generation web apps

Building next generation web apps which follow the best practices and make use of the latest features in the browser is a long journey and also requires a lot of learning. Developers at companies such as Google have been building optimized sites that are performant for mobile and share their experience openly on the web while doing so.

Google developers have built a dedicated portal for Web in order to learn more about the best practices and patterns to build their own solutions according to the needs of their users.

The Web portal also provides information on the advanced tooling that’s available to debug, analyze and optimize the performance of your applications such as best in the world Chrome Developer Tools which is crucial tool for web developers and a guide about it allows you to get the most out of this tool.

Improving on the fundamentals of web

Google Developers Web Portal contains a comprehensive guide on Web Fundamentals which needed a special mention because of the helpful information it contains for building the web.

Web Fundamentals has been written by the contribution of many developers who are experienced in writing battle tested code for the web and are familiar with good patterns that have been found useful to optimize the websites. Topics such as UI & Design and Web Application Architecture have a major emphasis in this guide and are covered in their dedicated sections to provide more in depth knowledge.

This guide gets very handy when building progressive enhancements in your application since features such as Service Workers and Web Push Notifications are covered in detail and there’s helpful documentation about it's inner workings and implementation.

Most of what you’ll find coming to modern web will probably have it documented here at some point if it’s crucial to modern web experience. So keep an eye on this helpful resource and join me in learning more about Web Fundamentals.

This is about Open Web

Major chunk of information Google Developers Web Portal contains is directly related to open web standards and has little or no relation to the Google so you are not going to be tied in any vendor lock by converting this information into action and you will be building on your own independently on the web just like many other millions of awesome web developers like you <3.

Ending note...

This responsibility of improving the state of the Web and providing better web experiences to users worldwide fall on our shoulders and information is there to help us make better applications which truly make lives easier for people all around the globe so you can sleep and relax well knowing somebody far away from you is making good use of the application you built and it’s working just fine on unreliable offline connections by using Progressive Enhancements. If you do this, Godspeed! and If I meet you, we’ll have to hug cos you are making the web (coincidentally my favorite place too) better which ties us and connects us all together even though we might be living quite far away so we can collaboratively play a small role in making this big world a better place. <3