DEV Community: Hassan Sani

Performance & User Experience: Why They Are Two Sides Of The Same Coin

Hassan Sani — Tue, 01 Nov 2022 14:35:47 +0000

The importance of application performance is critical to the business and the users it serves. In this article, I identify some of the key factors and benefits of good application performance.

What is Performance

Performance is how fast your application renders and how effectively it responds to the user’s interactions.

Providing smooth and quick user interactions or feedback regarding the application’s activities and processes is crucial to good performance.

Why Performance

A great user experience depends on the performance of your application. Most visitors are unaware of a good application’s performance, but they often notice a bad one.

Performance can vary for the user’s device and the internet connection speed. A user accessing the application on a desktop with a fiber optic internet connection will have a fast download and a smoother user experience. While a user on a mobile device with a 3G connection accessing the same application may have a slow download and a terrible user experience.

Performance Factors

Before we identify why performance is important here are a few factors that affect performance.

Application Size : The size of your rendered application can affect its performance, from the paragraph above, we mentioned two possible scenarios where users could access your application. The size can greatly affect the time it takes to render depending on the speed and the user’s device.

Interactive response : User interaction with your application if not handled well can affect the application’s performance.

Responsive Content : Rendered content if not well arranged can not only affect the performance but also push some content out of the screen’s viewport.

Performance Benefit

Now that we have identified some of the things that can affect an application’s performance let’s dive into why performance consideration is important.

It enforces Accessibility

Accessibility or accessible application is an application that can be accessible to keyboard, mouse, and touch screen users, and any other way users access the web, including screen readers and voice assistants like Alexa and Google Home.

MDN webdocs.

Considering performance for your application can enforce building with accessibility in mind. As you build to provide based on a user’s device it equally enforces you to implement features that are specific for the device while making the application responsive.

Improve conversion rates

Every application is built to provide paid or free services or products. A conversion rate is a rate at which site visitors perform a measured or desired action.

The application’s load time is a major factor for conversion rate and is easy to notice by users. Google identified in its research papers that 90% of users will navigate away from a site if takes more than 5 seconds to load. Learn more here

Great User Experience

Performance is all about user experience, making sure every component works as expected and is easy to use without unforeseen blockers.

Key statistics for implementing great user experience — StartupBonsai.

88% of consumers are less likely to return to a site with a bad User Experience and more likely to tell their friends about it.
75% of consumers judge a site’s credibility based on how it looks.
32% of users will leave a brand they love if they have one bad experience.
45% of users expect content to display correctly across different devices.

Conclusion

Great performance is not all about beautiful designs with lots of content, it is about considering the user and providing a comfortable experience for the application’s result.

Let discuss performance on Twitter @inidaname

These five software topics are boring but important

Hassan Sani — Tue, 11 Oct 2022 21:33:28 +0000

When implementing new products and features, we are blinded by shipping the product and we forget the critical and essential part of the product itself. In this article, I discussed five boring requirements of every app.

Performance

Measuring the performance of your application is a boring topic to discuss, it's not like any important person will be required to use your app. But what if.

Did you know that 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load?

Performance is as important as writing the code itself, approaching a project with a performance and optimization mindset will put you on edge for an excellent user experience.
Performance measurement gives room to improve or discard app features as need be.

Simplicity

My 3 years old can effectively scan through the contents and select what to watch on YouTube Kids.

Don't make something that is supposed to be enjoyable become a punishment for your users. Interaction with the app should not take the user through research, it should be as seamless and easy even for a 3 years old.

Every feature you implement must be with the mindset that your users have no idea what it is because they don't. Make it self-explanatory.

News Flash: as the developer, you will not be there to explain every feature to your users.

Building for the User

Every feature is important and perfect for the solution you are building.

This is only true if you know who your users are. Conducting user research is the only way to identify your potential users.

Without identifying your users you will be building a beautiful perfect solution for yourself, it's not a bad thing until you implement every feature and no one uses them.

Accessibility

Regarding the user's experience, accessibility is the least discussed most important part of building apps. Apps should be usable by everyone including people with disabilities, you have no right to deny anyone from using your application. It should be a crime if it's not.

Implement every feature with accessibility rules for everyone either using a mouse, screen reader, or tabs equally getting your content on desktop or mobile.

This is not an option, maybe boring.

Every new tool should be used

Yes! Stay with the trend. I agree with that.

Personal opinion but more than 90% of projects can be implemented with just HTML, CSS, and JavaScript or Java, or python.

You aim to provide a simple and friendly user experience. When you try to use any of the shiny tools or libraries achieving this becomes almost impossible and you end up adding complex libraries and features when you should be discarding, you serve large files to the user's device consuming storage and power. This is not good.

Be minimal.

Conclusion

Your approach to building apps should primarily be the users.

How it affects the user's day-to-day activities like storage - and batteries.
How the user interacts
How long it keeps your users waiting
What content do you feed the users

I hope when next you are building a cool product you will consider these boring topics and discuss them because it won't only give you the user's perspective, it also enforces you to only focus on the essential features of the product.

Are you interested in discussing these boring topics? Shoot me a tweet @iNidAName

What is build?

Hassan Sani — Wed, 05 Oct 2022 15:08:11 +0000

Understanding the software build process

This is my journey to learn the basics of build in the software context.

First, build here, is not about the idea of writing software codes. It’s about the process after the developer’s code is deployed or something in that line.

You may have heard the term “My code is building” or initiated one yourself: knowingly, unknowingly, or mistakenly, don’t be shocked it exists.

So, what is build?

Definition: Build is a process that compiles your codes using all required components, configurations, environment assets, and any other external libraries to produce an executable or usable application.

I hope you get the point, basically the process to produce your result.

Why are we talking about this?

I believe if we look into the build process of applications, and how some build engines handle our codes we will be able to write readable and scalable codes.

What happens under the hood, the process and the way we write codes can help both our users and the developer, You.

Shall we begin?

Picture this, you order shawarma from a restaurant and all you had to do was to give the specifics of your order, “Chicken Shawarma, no sausage, and little hot sauce.” Now I’m hungry.

Now, Picture this, you get a frozen chicken, some veggies, Shawarma bread, and hot sauce. You go home, set the fire, fry your chicken and make your shawarma just the way you want it. This is probably the worst shawarma.

Before you take that break, I may have caused, here is my point. Build could be of two categories, custom or industrial.

I wouldn’t talk much about custom because just like homemade shawarma, custom build is not easy to set up and sometimes may turn out to be a pain.

Industrial Build

This type of build is preconfigured for a particular use case. With industrial configuration, like the restaurant analogy, all you do is order the type that suits you.

Now we can order that shawarma, and we know where we want it, on the table or in our hands. Same for the application, on the device, or in the browser.

A fairly reminder that this is about build and not about shawarma 🤣.

Okay, so let’s go on.

Whichever you choose custom build or industrial build, they both achieve the same results. A deployable project. Now let's dive in, not the shawarma.

Types of Build

They are two types of build: Full Build and Incremental Build

Full Build

Back to our shawarma, for this type of build, the shawarma ingredients are always fresh and every process starts from the beginning not considering if you may have available shawarma or not, it just starts from scratch and gives you new shawarma.

Full build produces a new packaged application every time the build process is initiated, it re-fetches the source files, runs the process from scratch, checks every environment, and deploys a fresh project.

This type of build takes the same time to produce the result no matter the amount of code change.

Incremental Build

This is impossible for our shawarma I guess 😂. Also, maybe it is enough before I trigger a shawarma campaign.

Incremental build checks if a built project is present then compare changes and only updates the components or part of source files that changes, without running every process from scratch when a build command is triggered.

This type of build time is dependent on the number of changes in the source file.

The Process

An industrial build process happens on the cloud ☁️ in most cases or on a configured tool provided by a vendor. At the basic, it follows the same process.

The system fetches the source code, prepares the environment, fetches dependencies, runs tests if included, triggers the configurations, and finally translates the source code to an executable code or machine-readable depending on the environment.

Conclusion

Hope you got the idea of what build is and how it applies. I also hope I didn’t push you to prepare shawarma while reading this.

Why don’t reach out to me on twitter to talk about build and tech @inidaname

How to start a new phase of yourself

Hassan Sani — Mon, 03 Oct 2022 05:04:20 +0000

The discussion of a Journey is what makes the distance far. The moment you start, it’s only a few miles to your destination — Nupe people.

The secret to every journey is something in particular, but before I dive into the mystery, let me point out that everything has ingredients. In this article, I will discuss the five things to building yourself and the secret ingredient you need.

Here are five things to help you start the journey of building yourself.

Accept the Fear.

Starting anything new comes with fear and uncertainty. The same applies to building yourself. It’s scary. No doubt about that.

Everybody who is anybody, has faced challenges and self-doubts as they grew into becoming who they are today.

It is okay to be scared, confused, and doubtful. Accepting these facts will prepare you confidently to move into the new phase of yourself.

Define a Goal

The start can be a lot. You should be able to look at where you are and where you want to be.

There is a reason you want to embark on this journey, financial stability, family value, self-confidence, or a new career goal. Few questions to ask

Where are you right now?
Where do you want to be?
What do you need to do to get there?

Set attainable goals using the answers you get from these questions. Your goals should be achievable and trimmed down to the smallest detail.

Define a plan and celebrate the small wins

Now that we have defined the goal, the next thing is to create a plan and stick to it. Define a roadmap that will guide you and help track your progress as you go.

Break down your plans into small tasks with attainable achievements and incentives to reward yourself for every win.

Learn as you go

Mistakes will happen, setbacks will come, and plans can change. The goal is to learn from these. Understand what happened and what you could have done better.

These will guide you and keep you focused on the goal.

Just Start

The secret ingredient, this is it! JUST START. Don’t prepare for tomorrow, and don’t wait for some element to be in place. Just start.

Start working on the business idea, start talking to your friends. Start that journey today.

Conclusion

One thing I’d love for you to take away from this article is that the start of everything is the key to its success. Once you start, the rest will come into place.

Do you have any tips, advice, or questions? Will love to hear them let’s connect my @iNidAName

How to Set Up Testing (TDD) for Typescript Nodejs API

Hassan Sani — Sat, 20 Nov 2021 16:15:57 +0000

In this article, we will see how to set up TDD for Nodejs Typescript API.

The benefits of writing tests

The purpose of a test case is to determine if different features within a system are performing as expected and to confirm that the system satisfies all related standards, guidelines and customer requirements. The process of writing a test case can also help reveal errors or defects within the system.
-- Kate Brush, What is a Test Case? - SearchSoftwareQuality

The above is the best way to describe tests.

Typescript

TypeScript is a strongly typed programming language that builds on JavaScript.

Node.js

Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine.

Jest

Jest is a JavaScript Testing Framework.

Prerequisites

Install Nodejs https://nodejs.org
Familiarity with Typescript or JavaScript is required

Check if Nodejs is installed

node -v

You should have the below output, it varies on the version you install

v14.18.1

Start the project

We will start by initializing a new nodejs application. Create a folder for your project, let call it HelloWorld. In the directory open your terminal and run the code

npm init -y

You are instructing Nodejs to initialize a new application and accept every question as default, this should create a package.json file in the directory.

Typescript is a superset of javascript, in this case, typescript still transpile to javascript before you can run and execute your code.

Dependencies

Let's add dependencies for the application.

Expressjs: A nodejs API framework.

To install Expressjs run

npm install --save express

DevDependencies

Development dependencies, this is a typescript project we are required to install dependencies types as devDependencies to help nodejs with type definitions for the dependencies.

@types/express
@types/node: This helps with type definitions for Node.js
ts-node: It JIT transforms TypeScript into JavaScript, enabling you to directly execute TypeScript on Node.js without precompiling, we should run the tests without compiling our code into javascript first.
jest, jest-cli: Javascript testing framework to run tests
@types/jest
ts-jest: A Jest transformer with source map support that lets you use Jest to test projects written in TypeScript.
supertest: HTTP assertions to help our test make API calls of GET, POST, etc
@types/supertest
typescript: well, this is a Typescript project

Now let install these dependencies.

npm install --save-dev @types/express @types/node ts-node jest jest-cli @types/jest ts-jest supertest @types/supertest request @types/request typescript

Configuration

Typescript

To set up the typescript project we need to initialise typescript configuration, run

npx tsc --init

This will create a tsconfig.json file with the minimal configuration which is okay for this tutorial.

Jest Configuration

Now we will set up jest configuration for the test environment, create a file name jest.config.ts and add the below code. To learn more about jest configuration visit https://jestjs.io/docs/getting-started.

export default {
  moduleFileExtensions: ["ts", "tsx"],
  transform: {
    "^.+\\.(ts|tsx)$": "ts-jest",
  },
  testMatch: [
    "**/tests/**/*.spec.ts",
    "**/tests/**/*.test.ts",
  ],
  testEnvironment: "node",
};

A little about the properties above.

moduleFileExtensions: An array of file extensions your modules use.
transform: This is to tell jest that we will be using a different file extension not the usual .js files, in our case we are using .ts so we passed a Regex to match our file type and a module to help handle the filetype, this is where we make use of ts-jest we installed.
testMatch: This property is to tell jest the directory and/or files to run for test cases.
testEnvironment: We are telling jest which environment our project is targeted for in this case we are targeting Node environment.

Now the Codes

Create a folder name src and create a file in the src folder name app.ts with the following code.

import express, { Request, Response } from 'express';
const app = express();

app.get('/', (req: Request, res: Response): Response => {
  return res.status(200).json({message: 'Hello World!'})
});

export default app;

Let work through the codes

First, we import the express module and types of Request, Response.
Then we initialize our application with express and assign it to a variable.
Then we call the get method for routing, with a callback handler for our route, this callback takes to parameter req type Request, res type Response, which returns a Response type. For typescript, it is recommended to type variables, parameters and function returns in your codes.
The handler returns a response of Http status code (Learn More about status codes here) status: 200 and a json of message: 'Hello World!'
Then we export our application for testing purposes and to modularize.

Was that a lot?

Next we create another file in the root folder and name it server.ts containing the following code.

import app from './src/app';

const server = app.listen(3000, ()=> {
  console.log(`This is running on port 3000`)
})

export default server

This is our application entry point.

Test

Create a directory name tests in the directory create a file name app.spec.ts

import request from "supertest";
import {Express} from 'express-serve-static-core';
import app from "../src/app"

let server: Express

describe('APP should say "Hello World!"', () => {
  beforeAll(() => {
    server = app;
  });

  it('should return 200',  (done) => {
    request(server)
      .get('/')
      .expect(200)
      .end((err, res) => {
        if (err) return done(err)
        expect(res.body).toMatchObject({'message': `Hello World!`})
        done()
      })
  });
});

Let walk through the codes

We import the supertest module and assign a variable name request.
Import the Express interface
We then import our app
Then we declare a variable server with the type of Express without assigning any value to
We describe our test suite for a test block, describe is a jest global function that accepts a string and a callback.
We passed a description of the test suite with a string APP should say "Hello World!".
In the callback scope we call another global function beforeAll which accepts a callback, this is to tell jest that we will want to run a block of code before the suite run its tests. In this case, we want to first assign a value to our declared variable server which will be to assign the app that we have imported so we can run our tests.
Then we call another global function it which is a test closure that takes two parameters a name and a callback.
The name of our test closure is should return 200.
We then pass a done callback as a parameter for the closure callback
We call request and pass the server variable to run our app in the test scope.
We call the get method and pass '/' route. In this case, we are running HTTP GET Method to our application on the route '/'.
We expect the HTTP GET Method should return 200 Ok status and return the message 'meesage':'Hello World!'
We call end method which takes a callback with two parameters of error and respond
We check if the test has error then we return the done method with the error from the test if otherwise which means the test runs successfully, so we call the expect global method which we check body property from the respond parameter to match our expected result.
Then we finally call done method to tell jest we are through with this suite.

Before we are done

And finally, we need a way to run our test, so edit the package.json file in the scripts section change test property. The scripts section should look something like this.

...
  "scripts": {
    "dev": "ts-node server.ts",
    "test": "jest --verbose"
  },
...

Now when you run

npm run test

You see result like the screenshot below.

Let say we change the return value in app.ts file from Hello World! to World Hello you should see a failed test like the screenshot below.

Conclusion

Writing test could mean to write more code but a few lines are worth the hours it will save. I'm a Full Stack developer using React, React Native and Nodejs with Typescript.

Feel free to put questions or suggestion in the comment or you can also reach out on Twitter iNidAName

Explain API gateway to me like I’m five

Hassan Sani — Fri, 24 Jul 2020 10:18:48 +0000

Many large applications uses the Microservice architecture, which has an API gateway. How would you explain an API gateway to a newbie to Microservice architecture?

What’s the secret of your career?

Hassan Sani — Wed, 15 Jul 2020 13:36:01 +0000

I've been asked, I’ve also asked employed developers and asking you now. I would love to know if you could discuss in this thread to help job seekers.

What was your first tech job?
Did you get your first tech job through online Job Boards (Stack Overflow Job, LinkedIn, etc)?
What’s your advice to newbies searching for their first gig?

Developers: How to stay on top of your game even without a job.

Hassan Sani — Fri, 24 Jan 2020 18:47:53 +0000

It difficult. You know that book, titled "To Be a developer is not a Day Job".
You probably know it by a different name, so let just agree to disagree.

You may be at the time of your career where you're either; transitioning to tech, a non-cs student learning to code, a cs graduate, or just a regular developer trying to keep up with your skills, (aren't we all). Don't even get me started on JavaScript.

So, you spent the weekend waiting for the recruiter's respond, and when it finally came, it say's "We decided to go with another candidate", you've tried every tutorial online but still can't stop using google, or may be you've just built something so cool and you are ready to title yourself the world best developer but then you tap on twitter, here is a 12 years old bragging about how he has just launched his third start up. Like "Did I miss something?"

Picture Credit: imgur

Before I continue, I will like you to know that every successful developer you see out here has been through this same sh*t Please don't argue it the same. You can ask them

Which now bring me to why I am writing this. I'm not going to take you through some Wikipedia of who I am, but the past few months, let's just say I found a way out of it, and it not a Job.

There may come a time in live, where it feels like everything is just coming down on you, that was where I was a few month ago.

But this is not about me so enough with the introduction. Let's get to work!

You need to love this Job.

It not a suggestion or a recommendation, it the base of it all. It not just coding, to grow in any aspect of life you need to find love and passion in it.

If you can't find passion in coding, I suggest you start searching for it, because to be honest, you are going no where without the love for it. Take it from me, this profession is that jealous.

Being passionate about what you do, it will push you to always do more, it will kick you up from your bed in the middle of the night, it will make you talk to yourself on the street and it will always challenge you to the point you start second guessing yourself. But at the end of it all, even the smallest achievement will always give you joy and fulfillment.

Be honest, even with yourself.

You have to decide what you want to do with your skills. Do you want to work as a developer? Do you want to be a freelancer? or Do you want to start your own Startup. Remember, we are talking about staying on top.

This decision will help you focus on your journey, it will create a pathway for you to navigate. This is not as simple as it sounds, making this decision may probably take it own time and it okay if through your journey this decision changes, it is natural.

Be calm, be positive and play it cool.

Your inbox is probably fill with rejections, they choose to go with another candidate. Yes! but that doesn't mean something is wrong with you! they were not satisfied with your technical test result. Good! now you know what you need to work on!

This here is the big one: After evaluating your resume your profile and the job description are not a good fit at the moment (I've lost count of how many mails I have with this in the body)😂😉.

You don't know what is going, Eventuarry 😁 (ask Nigerian Twitter)

Every time I apply for a job, I always create imaginery moment of me in the office smiling with my colleagues and building stuff, but when I get a response, I just start all over again.

Join a community

Go on twitter, dev.to or most effectively attend meet ups. You get to learn how others are navigating through this journey, you get to network and even get a job offer.

Be ready to speak up.

Be ready to tell anyone and everyone about your skills and your current background. If you are looking for a job, say it. If you are in need of gigs, let them know. If you need resources to help you learn, ask for it. You will be surprised who is willing to help. And do not be afraid to reach out to your Mentors.

Get a Mentor

On a final one, get a mentor. Not necessarily but look up to someone, seek guidance.

Conclusion

Do you have tips you can share? will love to talk about it in the comments. Share this article, with others.

Software Development

Hassan Sani — Thu, 23 Jan 2020 08:56:01 +0000

What you should know as an Entrepreneur

Introduction

21st Century, using, building and integration of software across industries are more of a necessity. If your product or solution does not require interaction with any sort of technology, then probably you are a time traveller from the 80s. Building a product or solution for this generation requires an interface with technology either for delivery, communication or production, this means that at some point your product must need technology to scale and if you are not adopting or integrating technology into what you are building then be rest assured your competitors will, it only good that you are ahead.

This is not technical writing for how to build software or when to build one, this is aimed at explaining the process and components involved in building one.

This is to provide you with an overview so that when you are looking to build your product, where it may require you to own the Software as a product, integration of software or just a simple solution using tech, before employing a software developer or software consultancy, you will be able to identify the process, duration, manpower and resources required before kickoff.

Software as a Product.

Software is like a physical product you may pick off the shelf. Take a book for example; to own a book you must purchase one (the user), from a bookstore (the interface), the bookstore has a stack of books (the database), and someone will need to attend to you at the time you are purchasing it (the server).

Now your favourite bookstore was built by a few people; let’s say the structure was design to accommodate at least 10 customers at a time (software architecture), the bricklayers (the developers) did a good job to achieve that, but only with the help of a good architect (User Experience developers) and the painters (User Interface Designers) did a nice job adapting calm colours for the store. Do you see where I’m going with this?

Now the stacked books are categorized in shelves so you know where every genre is located (Data Scientist), each shelf in the bookstore has been checked for things like title arrangements, shelves strengths, health hazard and insects (software tester), the bookstore has never lacked a title you request or whenever you need a new edition (deployment), and this bookstore is open 24 hours a day (you know this).

Software Components

With the little description of software as a product, it fair to also mention that software is not necessarily an application you install in your computer, Facebook is a software, Google is a software and WhatsApp these are all software but some are only usable on the web or mobile.

It doesn’t matter how you want your software to be used, it all has the same components as described in the bookstore analogy.

The User

When building a software, the primary purpose is to deliver a solution to a user, this could be a person, business, a service or a device.

Always have the user in mind when building your product, what do you want the user to achieve. This is your job as the product owner.

The Interface

This is the product’s look and feels, the end delivery of the product. This is what the user will interact with, this is the image that defines you as a brand or a person to your users. A User Interface should be simple to use and not with too many information as not to confuse the user.

The Database

As a product or software, you will have visitors, users, returning users and storage of goods or services you own. The information that will help you identify the user, the goods or services for the users are all going to be stored, the database will collect all information and also serve when requested by you, a user or a service.

The Server-Side

This is the product section that interacts with the database, provide security and also maintain the activities of the software.

The Host

As all these are required the software also needs to reside somewhere, this is where your users will visit whenever they wish to access and interact with your software, it’s highly recommended that delivery is not delayed and always reachable. This could be on a single computer (not advised) or in the cloud (another topic).

Software: Process and Resources.

The process and resources of building software are not something one person put together not even you.

Let me take you through.

The Interface

As mentioned, this includes the colours, segmentation and data presentation of the software.

The Process

For an interface to meet the international practice, a User Experience developer will have to put together something called a prototype; this is a proposed skeleton look-alike of the software, this will help you decide how to present your click sections, segment arrangements and data placements.

After the User Experience developer, a User Interface Designers will put a face to the skeleton, giving it colours, providing responsiveness and accessibility for all users. This stage is to give you and the developers the look of what to produce, at this stage making corrections are easily effective.

After the User Interface Design, the Frontend Developer’s job start, this is the stage where the software or product starts to come to live, clickable and navigation are visible at this stage. A Frontend Developer will write software codes to bring your product to life.

At the end of this stage, you have a full User Interface of your product.

The Resources

You should provide resources such as Logo, Images, product description, company description, your contact details and any assets you will want to see on the software.

The Server-Side

This is also referred to as the Backend.

The Process

For the backend to effectively serve your software, few things you must put into consideration include security of your software and your users, speed of accessing your stored information, and authentication or authorization of users.

At this stage, a backend developer will write software codes that implement authentication and authorization checks, interacts with a database, make sure data sent to the user is the data requested at the time and also identify returning users. At the stage, your product is interacting with both the database and the user interface.

The Resources

You should provide resources such as what user information you want to store, what information you want to present to the user, how you want to authenticate a user and how to authorize the user.

Deployment

Whatever your product, you will need somewhere it resides. Probably your software is an in-house use product it still needs to be deployed for usage and access, this is called a Server.

The Process

For effective and reliable delivery, a cloud solution is recommended, otherwise, any will still do. A server manager will package all the codes and assets for deployment, at this stage also a security layer required which is to encrypt your data interaction session. The package codes will be transferred to a server and it’s ready for your users to access.

The Resources

You should provide resources such as a server where your product will reside, an address where your user will access the product and also a security protocol you want it to use.

Software: The Producers

Before I move on, let me take you back to the bookstore analogy again, and just ask yourself, can one man build a bookstore? I’m guessing your answer is no, so why would you think one man can build software.

The involved professionals

Just like we had use employed some professionals to build the bookstore, we also need more than one professional to produce software.

Product Owner

The Product Owner responsibility is to describe the product in details and identify deliverable of the product this could be you the entrepreneur, but it is recommended you employ a professional that can communicate your idea to the developers.

User Experience Developer (UX).

The UX’s responsibility is to produce a sketch of the product for better description between the developers, product owner and potential users.

User Interface Designer (UI).

The UI designer’s responsibility is to place colours, images, define the screen sizes and identify accessibilities and responsiveness of the software.

Frontend Developer.

The Frontend Developer’s responsibility is to write the codes, that is to translate the design into usable software.

Backend Developer.

The Backend Developer’s responsibility is to write the server-side codes for database interaction.

Quality Assurance (QA) Engineer.

For software to meet industry’s standard some recommendations must be put in place, it is the responsibility of the QA Engineer to make sure these recommendations are met and that the software will not fail to run properly once deployed.

Server Manager.

Once your software is deployed for your users, it needs maintenance and regular updates to keep it running at all time. It’s the responsibility of the Server Manager to always make sure the server is up and running at all time.

Accessible Solutions

As an entrepreneur, this may sound more like too much or overkill for your small project or budget, they are consultants or organization with all these mentioned professionals as a team or a built product to provide some of these as a service, a little research will get you started.

That said, I’m going to repeat it. Please do not employ a single person to do all these.

Explain Kubernetes to me like I'm Five

Hassan Sani — Sat, 21 Sep 2019 20:57:19 +0000

For the past month I've been working with Docker, it an awesome tool I get what I am doing but I still find it difficult to wrap my head around Kubernetes or Docker Swamp.

Let's talk about that project you never want to talk about.

Hassan Sani — Sat, 13 Jul 2019 22:16:12 +0000

How to understand Angular using the Documentation

Hassan Sani — Mon, 08 Apr 2019 13:42:25 +0000

When learning a new language or framework, identifying the right resources could be difficult, relying on the documentation is your best bet. It provides the basic knowledge to get you started.

Manuals are the most important documents no one read
- Lot of Us.

But for most developers, documentation could be difficult to understand or too large to read.

Angular has one of the most detailed documentation I have read, the team did a great job simplifying it.

In this post, I will explain how I read and got the most out of Angular's documentation, the pattern that helped me and I hope it will help you.

The Structure.

Angular's Documentation is structured to take you from a beginner to an Angular developer.

On Angular's official page angular.io, click on Get Started.

Mobile View

Desktop View

The Document's table of contents.

To view the Documentation's Table of Contents, click on the burger menu at the top left of the screen, a navigation menu will slide out.

Let's talk about them.

Getting Started
The Getting Started section will guide you on setting up your Angular environment, installation of other software used by Angular, and a first Angular application.
Tutorial
The Tutorial section will walk you through building a full functional Angular application, with some code along examples to provide you with production-ready Angular skills.
Fundamentals
The Fundamentals section explains the features and the architect behind Angular's build block, how Angular is structured around these features and how these features can help you write better codes.
Techniques
The Techniques section describes the Angular's added features and implementation, including how to use first/third party libraries and features.
Setup and Deployment
The Setup and Deployment section describes the file structure, environment configuration, other concepts like the general life-circle of an application, and how your application interacts with the browser.
Release Information
The Release Information section explains why Angular is frequently updated by the community. When to expect a major release of the framework, plus what features to expect including how to update your application to the latest version.
Quick References
Other information you will need, code style guides and definition of terms used through the documentation.
CLI Commands
List of CLI commands for Angular CLI, with other flags that increase your productivity.
API
List of all Angular's API with detailed descriptions.

Navigating

All mentioned above could be overwhelming but don't worry, let me walk you through a secret.

Where to go

First Time with Angular: you are new to Angular, you've seen an online tutorial or you're are making a framework switch. I recommend you start with Getting Started, follow the guide, read through and understand. Follow up with the Tutorial section, code along and practice more after the tutorial.

WHY: The getting started section will walk you through scaffolding your application, it will explain the basic process, how to install the Angular CLI and how to start or initiate an Angular project. This is a fundamental instruction as a beginner.

The tutorial section will provide you with a functional application that covers the most important parts of building application with Angular, syntax and features that will give you the basic knowledge of Angular.

Moving Forward: Next I recommend you navigate to Fundamentals, you do not need to do a code along in this section. Read through to understand, this will open you up to see Angular under the hood, it is literally the Aha section.

WHY: The team focused on explaining how each component of the framework interacts with one another, the concept behind the framework's features and how it was structured to give developers flexibility and power to build applications. While I was reading this section it felt like a Dan Brown's Novel 😊😊.

Now Breaking the Chain: Jump four steps to the CLI Commands section, read it topic by topic like a reference list, practice each topic, not important but you get to see what these commands can do.

WHY: At this stage, during your tutorial/practice you've used some of these commands, this section provides you a detailed explanation of each command plus some you didn't even know existed, including possible flags you can pass through. When done, you will be writing CLI commands like an Angular pro.

Step Back a Little: Go back to techniques, at this point you are an Angular genius, go forth and build. May The NGs be with you. But even geniuses make mistakes and to be a master you must never stop learning.
These mistakes may cause a security breach on your application, the Technique section explained the best approach to help with security checks, some dos and don'ts. The section will guide you on how to implement some of the latest software development practice like implementing Service Worker for an Angular PWA and many other cool practices.

Are we still here: Okay, head to the Setup and Deployment section, this is more of a descriptive section. It describes how to prepare your Angular application for production or development environment, how to test and set up a testing environment and how to produce and deploy your Angular application aka Hello World!.

Save the rest for last: As I said, "you must never stop learning". The API section is an ocean of knowledge and that is what it should be. My recommendation may be yet my confirmation is that you cannot read the API on a page by page style, even more confusing it is alphabetically arranged. So not to confuse your confusion, you do not need to read this section right way. It should be the section that brings you back to the documentation from time to time.

Conclusion

Learning a new framework is an exciting journey, and fun when you have the right tools and resources to help you. The way you learn or use these resources can affect the journey. You may have your own way of learning, some learn with video, blogs or physical couching, some don't even need documentation, "Believe me, they exist 😉". I am not enforcing you to follow this guide, it's something that really helped me on my journey. Please if you have any guide that may have helped you on your journey or resources that you feel was helpful, I will be happy to hear about it please share in the comment section, Thank You.
I wish you luck on learning and understanding Angular and again "May the NGs be with you…"

DEV Community: Hassan Sani

Performance & User Experience: Why They Are Two Sides Of The Same Coin

What is Performance

Why Performance

Performance Factors

Performance Benefit

It enforces Accessibility

Improve conversion rates

Great User Experience

Conclusion

These five software topics are boring but important

Performance

Simplicity

Building for the User

Accessibility

Every new tool should be used

Conclusion

What is build?

Understanding the software build process

So, what is build?

Why are we talking about this?

Shall we begin?

Industrial Build

Types of Build

Full Build

Incremental Build

The Process

Conclusion

How to start a new phase of yourself

Accept the Fear.

Define a Goal

Define a plan and celebrate the small wins

Learn as you go

Just Start

Conclusion

How to Set Up Testing (TDD) for Typescript Nodejs API

The benefits of writing tests

Typescript

Node.js

Jest

Prerequisites

Check if Nodejs is installed

Start the project

Dependencies

DevDependencies

Configuration

Typescript

Jest Configuration

Directory

Now the Codes

Let work through the codes

Test

Let walk through the codes

Before we are done

Conclusion

Explain API gateway to me like I’m five

What’s the secret of your career?

Developers: How to stay on top of your game even without a job.

You need to love this Job.

Be honest, even with yourself.

Be calm, be positive and play it cool.

Join a community

Be ready to speak up.

Get a Mentor

Conclusion

Software Development

What you should know as an Entrepreneur

Introduction

Software as a Product.

Software Components

The User

The Interface

The Database

The Server-Side

The Host

Software: Process and Resources.

The Interface

The Server-Side

Deployment

Software: The Producers