DEV Community: Usaid

Generics in TypeScript

Usaid — Tue, 26 Dec 2023 19:37:54 +0000

Generics in TypeScript allow you to write functions and classes that can work with a variety of data types while maintaining type safety. They provide a way to create reusable and type-safe components, offering a level of abstraction that promotes code flexibility.

Let's start by looking at a simple example. Consider a function that returns the input it receives:

const num = 1;
const str = 'a';
function returnValue(val: any): any {
 return val
};

const numReturn = returnValue(num);
const strReturn = returnStr(str);

While this works, it lacks type safety. The any type means that the function can accept any type of argument, but it doesn't provide information about the type of the returned value. This is where generics come into play.

Generics allow us to create functions and classes that can work with different data types while preserving type information. Let's rewrite the returnValue function using generics:

function returnValue<T>(val: T): T {
 return val
};

const numReturn = returnValue(21)

In this example, the T inside the angle brackets represents a type parameter. The type parameter T acts as a placeholder for the actual type that will be provided when the function is called. In the case of returnValue(21), T is inferred to be number (If you pass a string it will be taken as a string).

Benefits:

Type Safety: With generics, you can write code that is both flexible and type-safe. The TypeScript compiler can catch type-related errors at compile time, providing a safety net that plain JavaScript lacks.
Code Reusability: Generics allow you to create functions and classes that can work with different types without sacrificing reusability. This can lead to more modular and maintainable code.
Functionality Abstraction: Generics enable the creation of highly abstracted and versatile components. You can write code that doesn't depend on specific types, making it adaptable to a wide range of scenarios.
Improved Readability: By using generics, your code becomes more expressive and readable. Type parameters provide meaningful names for the types involved, making the code easier to understand.
Conclusion:

In this introductory guide, we've explored the basics of generics in TypeScript. As you delve deeper into TypeScript development, generics will become an essential tool in your toolkit for writing robust, reusable, and type-safe code. By leveraging generics, you can enhance the flexibility and maintainability of your TypeScript projects, making them more scalable and easier to work with in the long run.

Brief RSC (react server component) explanation

Usaid — Sun, 12 Mar 2023 16:15:33 +0000

Everybody is talking about RSC these days so I thought I'd make a brief introduction explaining what react server components are.

Server components

They don’t need client side state and interactions. Essentially the server uses data to generate the relevant HTML and returns it to the browser. Inside the server components you can use interactive client components. The server components HTML may be generated from data already on the server. For example, from an API call to your database.

Client components

These are interactive JSX components (I.e. clicking on buttons and interacting with the state data). Basically HTML created at runtime in the browser from JavaScript.

What RSC does?

RSC incrementally streams the content of the web app from server to the browser. When the user loads the website, the browser sends a request to the server, the server fetches data from the backend and whatever data it gets it starts to paint the browser window with it. What I mean by this is that unlike SSR, RSC does not wait till we get all the data from the backend, it renders parts of the page such as the NavBar, Footer or some text, this streaming is achieved by serialising the react component into JSON data on server side and then reconstructing it the browser.
The server components also have automatic bundle splitting meaning that you would not require dynamic imports and if a page does not use a component it will not be sent to it.

Problems and how RSC solves them

There are many problems that RSC solves but two of them are important and worth knowing.

1) Waterfalls in fetching data
Waterfalls occur when data takes a long time to load, slowing down your applications. There can be many potential areas for waterfalls to occur, but one of the most common ones is on requests from the client to the server (and the server sending its response to the client). This back and forth communication between the server and client can cause significant latency and noticeably slow down your app, particularly if you have sequential requests coming from parent and child components. React server components solves this problem by fetching data on the server, eliminating that latency.

2) Large bundle sizes
When the browser is downloading huge amounts data in large web apps especially in SSR apps, it can take a while to load the page, especially over slower connections. React server components help solve this problem by sending only required code to the browser.

Resources to learn more about RSCs

Here's a demo code link from the react team:
reactjs / server-components-demo

Demo app of React Server Components.
React Server Components Demo
What is this?

This is a demo app built with Server Components, an experimental React feature. We strongly recommend watching our talk introducing Server Components before exploring this demo. The talk includes a walkthrough of the demo code and highlights key points of how Server Components work and what features they provide.

When will I be able to use this?

Server Components are an experimental feature and are not ready for adoption. For now, we recommend experimenting with Server Components via this demo app. Use this in your projects at your own…
View on GitHub
Data fetching with RSC

Adding a button with onclick on InfoWindow - Google Maps API

Usaid — Mon, 20 Sep 2021 18:58:18 +0000

InfoWindow in google maps is a type of toast div or should I say a popover that appears when we hover over the map marker, it contains information about a specific place anything you want to show in it.

Let me show you the easiest way to add a button with onclick function inside the infoWindow content string if nothing else is working or if you are trying to click on the button before the DOM is ready.
Content String:

let buttonName = "any name"; 
let contentString = "<div>" +
                     // other divs ....
                      "<button id='btn-click'>" + buttonName                       
                       + "</button>" 
                     // other divs ....
                    +"</div>";

Adding click event on your function:

google.maps.event.addListener(infoWindow, 'domready' () => {
 const someButton = document.getElementById('btn-click');
 if (someButton) {
   google.maps.listener.addDomListener(someButton, 'click',    
   () => {
           // show something.
           // add something.
         })
 }
});

Marker Code:

google.maps.event.addListener(marker, 'mouseover', function(){
 // some code about setting content inside info window or showing up the info window however you want to show it.
});

That's it, let me know if it worked :).

Showing an offline screen for your React-Native app using NetInfo package.

Usaid — Fri, 16 Jul 2021 09:45:47 +0000

So you want to check internet connection and show an offline screen if you are disconnected?

Here are simple steps to create one:

1) Install netinfo package from npm:
npm install --save @react-native-community/netinfo

2) Import it in your js file wherever you want it to be, declare a variable and set it's value to null:
let NetInfoSubscription = null;

3) Initialize a state and set the default value to false:
const [connectionStatus, setConnectionStatus] = useState(false);

4) Create a function that changes the value of the connectionStatus based on if the internet is connected or not:

const handleConnectionChange = (state) => {
    setConnectionStatus(state.isConnected);
  };

5) Inside useEffect hook reassign the value of NetInfoSubscription and add this piece of code:

NetInfoSubscription = NetInfo.addEventListener(handleConnectionChange);
    return () => {
      NetInfoSubscription;
    };

6) Now just use a ternary operator to show the main contents if the connection is there or show the offline screen if the connection is disconnected.
example:

connectionStatus ? <MainContent /> : <OfflineScreen />

That is it now if the internet is disconnected offline screen will be rendered.

Let me know if you have some questions or want to see how I created my Offline Screen :)

Hosting your react-native express.js backend on Heroku.

Usaid — Wed, 19 May 2021 11:38:40 +0000

You have created an app in react native and written backend in expressjs/nodejs and you want to host your backend so you can get or post data on your app from anywhere?

Answer: Heroku.

Here's how:

Create a Heroku account on www.heroku.com
Install Heroku CLI.

// for mac:
brew tap heroku/brew && brew install heroku
// for ubuntu: 
sudo snap install --classic heroku

After Heroku CLI has been installed, open the terminal and just login with your credentials


// type this in your terminal to login:
heroku login

When you have logged in you can create a heroku app by executing this command:


heroku create

Once the heroku app has been created you will see the app name, remote git link and the site url.
Add heroku remote branch:

heroku git:remote -a your-app-name

Heroku git remote will be added and you can check that by:


git remote -v

Add Procfile to the root of your backend folder, eg:

-ReactNativeAppFolder
 -MainBackendFolder 
  -routesFolder
    -Routes.js
  -modelsFolder
    -Schema.js
  -app.js
  -package.json
  -package-lock.json
  -Procfile

Procfile is needed to tell heroku to run node app.js on it's server, so your app can start and run.
You don't need to push the whole react-native app to heroku you can just push your backend folder to it, here's how:


git subtree push --prefix MainBackendFolder heroku master

// this specific command makes sure that only backend folder gets pushed to heroku.

After the build and push is successful heroku will tell you that your app is being hosted on a specific url.
You can then add the specific url however you want to on your get and post request urls. That is it.

Simple way to get react-native local push notifications to work (android).

Usaid — Sat, 15 May 2021 21:04:11 +0000

Do you want to get local push notifications to work? Here's simple steps that might help you:

1) Create a file name it anything you want I named it "AndroidNotificationHandler.js".

2) Import react-native push-notification package:

import PushNotification, {Importance} from 'react-native-push-notification';

3) Since latest update push-notification package requires you to create a channel id in order for notifications to work properly, here's what it looks like:

const createChannel = () => {
  PushNotification.createChannel(
    {
      channelId: 'channel-id', // (required)
      channelName: 'My channel', // (required)
      channelDescription: 'A channel to categorise your notifications', // (optional) default: undefined.
      playSound: false, // (optional) default: true
      soundName: 'default', // (optional) See `soundName` parameter of `localNotification` function
      importance: Importance.HIGH, // (optional) default: Importance.HIGH. Int value of the Android notification importance
      vibrate: true, // (optional) default: true. Creates the default vibration patten if true.
    },
    (created) => console.log(`createChannel returned '${created}'`), // (optional) callback returns whether the channel was created, false means it already existed.
  );
};

4) After you have created the channelId function create another function that will do the main work in order to get the notifications that you want it to get. Check this out:


const notificationHandler = (title, message, date) => {
  PushNotification.localNotificationSchedule({
    channelId: 'channel-id', // this we get from above func()
    title: title,
    message: message,
    autoCancel: true,
    subText: 'Notification',
    vibrate: true,
    vibration: 300,
    playSound: true,
    soundName: 'default',
    ignoreInForeground: false,
    importance: 'high',
    invokeApp: true,
    allowWhileIdle: true,
    priority: 'high',
    visibility: 'public',
    date: date,
  });
};

5) You can also cancel notifications if you want, here's how:


const cancelNotifications = () => {
  PushNotification.cancelAllLocalNotifications();
};

6) export your functions:

export {createChannel, notificationHandler, cancelNotifications};

7) You can now import use these functions across your project, example from my project:

let alertDescription = `Time to study ${topicName}`;
notificationHandler('Reminder!', alertDescription, date);
// I get date parameter from datepicker.

That is it. You shall get your notifications now :).

My experience with imposter syndrome as a beginner / junior developer.

Usaid — Sun, 21 Mar 2021 13:53:49 +0000

I wanted to share my experience and talk about this huge emotional phase that we all as beginners and junior developers go through at the start of our dev careers.

Let me first briefly tell you about my path towards being a developer.

I finished my CSE degree in September 2019 and after that I didn’t know what to do there were many career paths that I was trying to consider but first I thought I would take a break and “Chill” for a while, this “Chill” phase lasted till December 27th 2019 when I decided to so something with my life and take a path either as a developer or may be something else. So I decided that I was going to teach myself web development, I browsed through Udemy and found a course taught by London App Brewery named as The Complete 2020 Web Development Bootcamp, that taught about MERN stack, I purchased the course and made a study plan which I would execute everyday till the bootcamp was completed. After completing the bootcamp I started practicing Javascript on codewars and studied more about ReactJs which I had come across in the bootcamp. I felt confident with my skills and started applying for jobs, gave a couple of interviews and got rejected until finally in August 2020 I got my first job as a web developer at a startup.
At this point I thought that I had clear concepts and could work with ease but when I started working I quickly noticed how less I know and how much is still there to learn. I went from “I can do it” to “I don’t know if I’m fit for coding” in about a month and a half, I felt like I don't know anything and I don't think i'll make it, I was taking time to finish tasks and understanding new concepts and then I realised that I’m just a fresher, just a beginner with not even a month of real experience and that I was expecting too much from myself, I used to see senior developers and other developers finishing a task in lesser time than me and that drove me crazy. So I started searching on google about Imposter Syndrome and how to deal with it. I have read a fair share of blogs written over this topic and finally came to a conclusion that hey, it happens to all of us, even the senior developers feel it sometimes and that helped me a lot.
I know we all feel it and for the beginners who are reading this, you are gonna get this feeling sometime, everybody does, what you can do is to just take a day at a time, focus on getting better at your concepts and practice, you see, your company that hired you already knows that you are a beginner and they don't expect you to finish tasks or solve complex problems in a small period of time, what you can do is to just try your best and never give up on yourself. Don't ever think that you won’t be able to make it or you should quit cause you are not alone there’s a million other developers who feel the same way, just focus on getting better, take micro steps and with time you will overcome this huge fear of not being a “good developer”.
You just need to believe in yourself and never give up.

I would love to hear your experiences in the discussions below.

Photo by Chris Yang on Unsplash

Simple way to use dev.to article API to show your articles on your portfolio website.

Usaid — Sat, 20 Mar 2021 18:01:18 +0000

Do you want to set your dev.to articles to appear on your portfolio website?
Let me show you how I used the article API to get my dev.to posts on my portfolio website in just two steps.

Just add your username at the end of this API-link: "https://dev.to/api/articles?username=yourUserName"
Use axios to get your posts and then render it on the frontend.

simple example:

const getDevToPosts = () => { axios .get("https://dev.to/api/articles?username=usaidpeerzada") .then((res) => { setBlogState(res.data); }); };

website not running on express(), need help.

Usaid — Sat, 07 Mar 2020 16:31:08 +0000

Trying to run website on express server but it fails to get the styles and only shows the html file, i have included the stylesheet inside the html file, any ideas why ?