DEV Community: Abdulhamid Oumer

Cooked up a React Native boilerplate

Abdulhamid Oumer — Mon, 11 Oct 2021 22:28:59 +0000

If you have worked with React Boilerplate before you probably know how much time it saves you when getting started with a big project. Not only at the start of a project, react boilerplate also comes in handy when you are in the middle of development. It makes writing repetitive codes easier by providing you with it's own CLI tools to generate boilerplate codes.

I started working on a React Native project recently and thought to my self why there was no similar thing for React Native, to the best of my knowledge. So I decided to migrate some of the things we knew on React Boilerplate and React Boilerplate CRA Template to a separate react native template.

Disclaimer: Current version of the template might not be too optimal for production builds.

The template takes some part of the original react boilerplates like the component and slice generators, redux toolkit setup and redux saga. It also adds react native specific CLI tools like App Icon setters and Splash screen logo setters.

The template comes by default with the tools listed below :

Note: This blog assumes that you are familiar with react-native and the CLI tool provided by react-native.

Setting up the template

Getting started with the template is fairly easy. There are only a few number of steps as listed down below.

Note: using YARN over NPM is recommend when using this template.

1. Create react native app by providingreact-native typescript-boilerplate as a template.

npx react-native myapp --template https://github.com/abdulhamidOumer/react-native-typescript-boilerplate.git

2. Get into the generated app's directory and explore the code and features.

cd myapp
yarn start

3. Get started by setting your app icon or splash screen icon.

yarn set

This command is used to set native related assets for your app. One pain point of working with react native is generating app icons with their corresponding platform size guidelines. By using this command you will be able to generate both Android and IOS app icons as well as splash screen icons based on the platform recommended size guideline just from one picture. Pictures that you want to use as app icon or as a splash screen logo need to be inside src/assets/images.

4. Optional - Initiate husky pre-commit hooks

yarn init-husky

This command will initiate a new git repository for your project if it doesn't exist currently and sets up husky so you can utilize pre commit and push hooks.

Full documentation for the current version is available on GitBook. Any kind of contribution is always welcome and appreciated as I am getting started with the project there is still a lot to be done. Full code available on Github

📖 GitBook

🚀 Github

Pointing cPanel Hosting Domain To Netlify: The pain of hosting websites in Ethiopia

Abdulhamid Oumer — Tue, 14 Sep 2021 22:55:42 +0000

I recently finished working on my portfolio site abdulhamid.et, this blog is dedicated to one of the issue I was facing while trying to implement my site on a Next.JS environment. Something to note here is that, this was not the first time I was facing this issue, the same exact thing happened when we were trying to implement our podcast Zemach FM's new site.

Disclaimer

This guide assumes that you already have a free Netlify subdomain site.
Some cPanel hosting providers give access to some resources and disable some resources by default. This tutorial is designed with the assumption that you have Domain, Subdomain and Zone Editor access from your hosting provider.

The core problem is how do you deploy a JAM stack website with your own custom domain from Ethiopia. Recently some web-hosting services have been coming up here and there in Ethiopia. But All the services I have run in to use C-Panel hosting. This will solve the domain name purchasing issue in our Ethiopia, but hosting sites that are not static or not Wordpress on cPanel is going to be painful. Some of the providers claim they have Node.JS support but they are full of bugs with no support to CI/CD integrations, you will have to be willing to upload your code base every time you make a change. This is not scalable. There might be a way to implement automatic deployment right from your repository, but I am not aware of it currently. Plus I am sure you will all agree with me that cloud hosting services like Netlify and Vercel have much superior response time compared to most of the hosting providers that we currently have access to in Ethiopia.

Of course the main reason we can't use paid services outside Ethiopia is because it's impossible to make international payments online from Ethiopia. But thanks to Netlify, I was able to deploy my portfolio with their free plan.

So I have a custom domain and my Next.JS site on netlify with it's own automatic build and deploy set up. What can be done to integrate the two separate services ?

That's where the cPanel's Zone editor and Netlify's custom domain come in to play. Let's first see how we can point our root domain from cPanel to our Netlify site instance.

First navigate to the Zone Editor from the home page of your cPanel.
From there click Manage on your main domain.
After the page finishes loading there will be two records with your root domain names, at the top of the list. Change their settings according to the screenshot below. The A record will point to Netlify's default load balancer IP address, 75.2.60.5. Change the second record to an MX type and fill in your netlify site default subdomain. You can find your netlify default subdomain at app.netlify.com > Your Web App / Domain > Domain Settings
Go to your netlify dashboard click on the site you want to configure > Domain Setting > Add Domain Alias. This will open a setting modal. On the modal fill in your new domain and save your changes.
After that finishes saving, you can set the root domain as a primary domain. Just click on the options dropdown next to the newly added domain.

Pointing a cPanel Subodmain to Netlify

If you are pointing a subdomain to your netlify instance, the process can take place as follow.

Create the subdomain by clicking on the Subdomains button in your cPanel Domains section.
Give your subdomain a name and leave the root directory the default value of the form.
Go back to the previous Domains section at the home page of cPanel and navigate to Zone Editor. From there click Manage on your main domain.
Find your subdomain on the list that is displayed. You will probably find two version of your subdomain. one with the prefix www and one without.
Remove the one with the www prefix and edit the main subdomain just like it's shown below. Change the record type to CNAME and the record to your netlify's default subdomain. You can find your netlify default subdomain at app.netlify.com > Your Web App / Domain > Domain Settings.
Finally go to your netlify dashboard click on the site you want to configure > Domain Setting > Add Domain Alias. This will open a setting modal. On the modal fill in your new subdomain and save your changes.

Now if your DNS configuration was correct your new domain and subdomain are good to go.

Note: You might need to wait a few minute until your sites SSL kicks in. Until then you can surf your site in un-secure mode.

Get that hundo 💯 (Part 2) - Using WebP Without Fearing Browser Support

Abdulhamid Oumer — Mon, 08 Feb 2021 20:58:46 +0000

On my previous post we saw how I was able to improve my lighthouse scores by moving away from font-awesome and using SVG sprites. We stopped last time when I got the lighthouse scores down below

In the second part of "Get that hundo" I will share with you how I was able to implement one of the optimizations recommended by lighthouse :

Using a next-gen image format

One of the suggestions made by lighthouse was to use a next-generation image format that is smaller in size. Some of these image formats are webp, JPEG XR or JPEG 2000. Why even bother serving your images in this format? Well, these image formats are the superior ones in both compression and quality compared to their predecessors PNG and JPEG.

Out of the three next-gen formats I chose WebP because it is supported in more browsers, it is being developed by Google currently and it also supports both lossy & lossless compressions.

To convert images to WebP we can easily use sites like webp-converter.com. This specific tool even has the ability to do lossless or lossy compression.

Now when using WebP the main issue that you face is browser compatibility. WebP is not even supported on safari except for the latest version, which is 14 at the time of writing this blog. That is where the HTML <picture> tag comes into play.

Picture tag takes one <img> tag and zero or more sources as a child element. The <picture> tag will then automatically choose the image source that will suit the user's browser or other conditions like max-width of the screen, if all sources don't meet the condition it will fallback to the <img> tag source. Below is a code showing you how we could take advantage of this :

<picture>
        <source srcset="./assets/avatar.webp" type="image/webp" >
        <source srcset="./assets/avatar.png" type="image/png" >
        <img width="200px" height="200px" alt="avatar" class="bio-container__content__avatar avatar" src="./assets/avatar.png" />
</picture>

Now, we can handle images in our HTML this way but what about background images that are set by a CSS style. There is a solution for that.

On Google developers WebP FAQ page there is already a vanilla JavaScript implementation to check if a browser supports WebP formats. The implemented code takes a small part of a certain featured WebP image (i.e lossy or lossless) and tries to decode that if the operation is successful it means the browser supports WebP images. The function is implemented this way

// check_webp_feature:
//   'feature' can be one of 'lossy', 'lossless', 'alpha' or 'animation'.
//   'callback(feature, result)' will be passed back the detection result (in an asynchronous way!)
function check_webp_feature(feature, callback) {
    var kTestImages = {
        lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
        lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
        alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
        animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
    };
    var img = new Image();
    img.onload = function () {
        var result = (img.width > 0) && (img.height > 0);
        callback(feature, result);
    };
    img.onerror = function () {
        callback(feature, false);
    };
    img.src = "data:image/webp;base64," + kTestImages[feature];
}

Let's see how can we take advantage of this function to display other formats for browsers that don't WebP. The first thing we need to do is create one normal CSS style with WebP background and one other style with PNG background.

.full-screen-hero {
  background-image: url("../assets/header-background.webp");
}

.full-screen-hero.no-webp {
  background-image: url("../assets/header-background.png");
}

Next, we check if the browser supports WebP on window load and add the .no-webp class if it doesn't support it. I will use the lossless feature check for now cause that was how I converted my background image to WebP.

window.onload = function () {
    check_webp_feature('lossless',  function(feature, success){
        if(!success){
            // Recurse theough elements with WebP background and add the no-webp class 
            fullScrenHero.forEach(function(bgElement){
                bgElement.classList.add('no-webp');
            })
        }
    });
}

This optimization didn't have much effect on the lighthouse performance score because I was already using WebP as a background image before all this but now I was able to solve the compatibility issues on safari.

That's it now the site is ready to serve WebP on supporting browsers and PNGs on browsers that don't support WebP.

Get that hundo 💯 (Part 1) - Handling unused font-awesome css styles

Abdulhamid Oumer — Mon, 01 Feb 2021 05:58:35 +0000

As I have mentioned in my last blog, I have promised to share my experiences in building my portfolio site as a side project.

Today we will be taking a look at how we can improve our lighthouse score by taking care of unused CSS issue that was caused by font-awesome, according to how it worked for me at least. So the story of how I decided to go through this topic goes like this, I just threw some stuff like font-awesome and some styles to the landing page without considering performance at first and see how that can affect my lighthouse score. Note that I have only written a few lines of Javascript to handle some smooth scrolling at this time, but lo and behold the performance score is in the gutters.

Now there were some reasons as to why this was happening, I will try to investigate and solve the main reason on this blog :

Unused CSS styles

Now, why would unused CSS styles affect a site's speed? The logic is pretty simple, unused CSS will increase the size of your page thus taking a longer time to finish a request. When the unused styles are few in number it might not have a drastic effect on the page size. But when the unused styles come from libraries like font awesome or bootstrap, which have somewhat larger minified file sizes (58KB & 149KB respectively) lighthouse will be complaining about a lot of unused styles. Besides, you will also have a lot of redundant code.

By also taking a look at the developer console coverage tab, we can see from above that 99% of the code is redundant and unused.

So what can we do to resolve unused CSS issues when using icon fonts like font-awesome. One solution can be using tools like fontello. Fontello allows you to create your own font icon pack by letting you pick the icons that your site will be using, It has got icon packs from font-awesome 4.7, Typicons and more. you will also be able to add your own SVG icons.

Another solution can be using inline SVGs. When using inline SVGs you will be inserting the SVG code right in the HTML. This will bring all your icons with just one HTTP request unlike font icons which will require another request. Not only that SVGs hold the upper hand when it comes to accessibility. Tags like <title> make it accessible for screen readers. With that in mind I decided to use inline SVG. Let's take a look at one way you can achieve that step by step.

Download the icons in SVG format. Fontawesome already lets you do that easily from the gallery page.

Build your SVG icon system with tools like IcoMoon or Fontastic. IcoMoon will give you an SVG sprite and some css code that you can insert in to your project. Here's an example of the code I got from IcoMoon.

<svg aria-hidden="true" style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <symbol id="icon-blog-solid" viewBox="0 0 32 32">
            <title>blog-icon</title>
            <path d="M10.762 14.175c-0.912-0.181-1.762 0.556-1.762 1.488v3.15c0 0.637 0.444 1.15 1.044 1.375 1.137 0.425 1.956 1.525 1.956 2.813 0 1.656-1.344 3-3 3s-3-1.344-3-3v-15.5c0-0.831-0.669-1.5-1.5-1.5h-3c-0.831 0-1.5 0.669-1.5 1.5v15.5c0 5.594 5.131 10.013 10.938 8.794 3.4-0.712 6.144-3.462 6.856-6.856 1.087-5.181-2.313-9.825-7.031-10.762zM13.063 0c-0.575-0.031-1.063 0.425-1.063 1v1.975c0 0.531 0.412 0.969 0.938 0.994 8.087 0.438 14.587 7 15.056 15.094 0.031 0.525 0.469 0.938 0.994 0.938h2.006c0.575 0 1.031-0.488 1-1.063-0.531-10.2-8.731-18.4-18.931-18.938zM13.081 6c-0.581-0.044-1.081 0.419-1.081 1.006v2.006c0 0.525 0.406 0.956 0.925 0.994 4.8 0.394 8.625 4.263 9.056 9.075 0.050 0.519 0.475 0.919 0.994 0.919h2.012c0.581 0 1.050-0.5 1.006-1.081-0.525-6.881-6.031-12.387-12.912-12.919z"></path>
        </symbol>

        <symbol id="icon-twitter-brands" viewBox="0 0 32 32">
            <title>twitter-icon</title>
            <path d="M28.711 9.482c0.020 0.284 0.020 0.569 0.020 0.853 0 8.67-6.599 18.66-18.66 18.66-3.716 0-7.168-1.076-10.071-2.944 0.528 0.061 1.036 0.081 1.584 0.081 3.066 0 5.888-1.035 8.142-2.802-2.883-0.061-5.3-1.949-6.132-4.548 0.406 0.061 0.812 0.102 1.239 0.102 0.589 0 1.178-0.081 1.726-0.223-3.005-0.609-5.259-3.249-5.259-6.437v-0.081c0.873 0.487 1.888 0.792 2.964 0.832-1.766-1.178-2.924-3.188-2.924-5.462 0-1.218 0.325-2.335 0.893-3.31 3.228 3.98 8.081 6.579 13.523 6.863-0.101-0.487-0.162-0.995-0.162-1.502 0-3.614 2.924-6.558 6.558-6.558 1.888 0 3.594 0.792 4.792 2.071 1.482-0.284 2.904-0.832 4.162-1.584-0.487 1.523-1.523 2.802-2.883 3.614 1.32-0.142 2.599-0.508 3.777-1.015-0.893 1.299-2.010 2.457-3.289 3.391z"></path>
        </symbol>

        <symbol id="icon-arrow-down-solid" viewBox="0 0 28 32">
            <title>arrow-down-icon</title>
            <path d="M25.819 13.906l1.387 1.387c0.587 0.588 0.587 1.538 0 2.119l-12.144 12.15c-0.588 0.587-1.537 0.587-2.119 0l-12.15-12.15c-0.588-0.587-0.588-1.537 0-2.119l1.388-1.387c0.594-0.594 1.563-0.581 2.144 0.025l7.175 7.531v-17.962c0-0.831 0.669-1.5 1.5-1.5h2c0.831 0 1.5 0.669 1.5 1.5v17.962l7.175-7.531c0.581-0.613 1.55-0.625 2.144-0.025z"></path>
        </symbol>
    </defs>
</svg>

The CSS code looks like this

.icon {
  display: inline-block;
  width: 1em;
  height: 1em;
  font-size: 1.2rem;
  stroke-width: 0;
  stroke: currentColor;
  fill: currentColor;
}

.icon-github-brands {
  width: 0.96875em;
}

.icon-instagram-brands {
  width: 0.875em;
}

.icon-linkedin-brands {
  width: 0.875em;
}

.icon-arrow-down-solid {
  width: 0.875em;
}

Add the SVG sprite to your HTML file body. Don't worry it's hidden so it will only appear when you call and use them. And add the CSS styles to your CSS file.

Call your icons where you normally would use font icons. For example, I was able to wrap my inline SVG by my <a> tags this way.

<a class="full-screen-hero__contents__socials__item" href="https://www.twitter.com/aotwits" target="_blank">
<svg class="icon icon-twitter-brands"><use xlink:href="#icon-twitter-brands"></use></svg>
</a>

xlink:href value references the ID of your SVG icon from the sprite.

By handling unused CSS problems this way I was able to improve my performance and accessibility score by 20 points.

But that's not enough largest contentful paint still needs some work and like what the title says we will not stop until we get that hundo !! I will be back with some more solutions on Part 2. You can view the source code of this project on github and view my site on netlify.

Finish that side project — Building my portfolio site series

Abdulhamid Oumer — Sun, 24 Jan 2021 16:27:30 +0000

Disclaimer: This is my first blog post on DEV.to so bare with me.

As a developer we all know that it's important to have a portfolio site up and running for yourself. I don't think anyone disagrees when I say that. So I decided to build myself one using Gatsby and Markdown. But in my opinion, having the idea for a project is just 0.1% of the job and we can give actually starting the project a percentage of about 10. Having good discipline and consistency also plays a huge role in completing the said project. All in all, I think we've all seen enough memes about starting new projects without actually finishing the one on hand.

In my experience, there were some clear reasons why I was procrastinating like crazy and starting other side projects. To list some of them down below:

Thinking that I have to build the site in a fancy tech stack
Thinking that I need to participate in many huge projects beforehand
The idea that I need to finish all the parts before putting the site on production.

After figuring out these problems the next obvious step would be to find a solution. Let's go through what I thought would solve some of them.

First, to solve the issue with procrastination I decided to blog my experience in a series format. This means I will share with you some of the issues I face and also how I was able to solve them every Monday. Let's hope this keeps me disciplined.

In regards to choosing the best stack, why not use the most simple and performant stack HTML5, CSS & Vanilla JavaScript. This way I will be able to grow my basic skills in using plain JavaScript and make the site highly performant. When the need comes for a personal blog I can easily migrate to Gatsby or any other technology. You can read more about vanilla javascript performance when compared to frameworks on this blog post by Louis Petrik.

I don't think I also need to finish the whole site before publishing it, I can have a landing page with a small description about me and my social media links. Then push features as they are finished. Besides, having the site running as early as possible will help with domain age for SEO.

Finally like what Mark Zuckerberg allegedly said based on the movie The Social Network, "Let the hacking begin"