DEV Community: RamaDevsign

What Does "!" Symbol Mean in Typescript?

RamaDevsign — Wed, 17 Aug 2022 13:06:05 +0000

In this short guide, I will introduce you to the Definite Assignment Assertion feature in typescript and demonstrate to you an interesting use case to implement this feature.

Prerequisites

This guide assumes you have basic knowledge of Typescript, you have a basic understanding of the Stripe API, and you have installed the Typescript error translator extension.

The Problem

When working with the Stripe API in one of my Next.js & Typescript projects, I came across an error where typescript didn't recognize my environment variable as a string. It later displayed the error message below.

The Solution

The solution in this case is to use the "!" symbol which is a feature in Typescript known as the definite assignment assertion.

As defined in the official Typescript Documentation, the definite assignment assertion feature is used to tell the compiler that the variable assigned is indeed valid for all intents and purposes, even if Typescript's analyses cannot detect so.

The "!" symbol is used and is declared after an instance property and/or variable declarations.

With the definite assignment assertion, we can assert that indeed in this case we have environment variables (process.env.STRIPE_SECRET_KEY) in string format and there is nothing to worry about.

This workaround still leaves us with weaker type safety since any misconfiguration (in our case the environment variables) could lead to errors that cannot be caught at compile time. These errors can only be caught at runtime which beats the logic of having a strict and functional type checking system. With this in mind it's your responsibility to ensure correctness.

It's also good to note that previous Typescript versions used the "!" symbol as a non-null assertion operator. You can read more about this in the Typescript Documentation about Non-null assertion operator.

Thank you for reading this far and happy coding!

How to convert your JavaScript object literals to Typescript

RamaDevsign — Thu, 14 Apr 2022 13:47:05 +0000

What is an object literal?

A JavaScript object literal is a comma-separated list of name-value pairs encapsulated inside curly braces, kind of like a JSON structure.


let student = { 
  id: 1056,
  name: 'Bazuu',
  email: 'hello@bazumail.com'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// hello@bazumail.com
console.log(student.phone)
// undefined (javascript)

The above snippet demonstrates how you can declare an object literal and access its contents. The above only applies in a JavaScript environment so if we want to convert it to typescript we will have to first change the file extension from .js to .ts


let student = { 
  id: 1056,
  name: 'Bazuu',
  email: 'hello@bazumail.com'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// hello@bazumail.com
console.log(student.phone)
// undefined (typescript)
// Property 'phone' does not exist on type '{ id: number; name: string; email: string; }'.ts(2339)
student1.city = 'Nairobi' 
console.log(student.city)
// Property 'city' does not exist on type '{ id: number; name: string; email: string; }'.ts(2339)

On trying to access the object member "phone" after the conversion, typescript threw an error. I wasn't also able to add a new object member "city" either.

Strategies for converting to typescript.

We can make use of two strategies when converting our object literals to typescript. The first strategy will be the any type and the second strategy will be by using an interface.

Strategy 1: using type any


let student:any = { 
  id: 1056,
  name: 'Bazuu',
  email: 'hello@bazumail.com'
}  
console.log(student.name)
// Bazuu
console.log(student.email)
// hello@bazumail.com
console.log(student.phone)
// undefined 
student1.city = 'Nairobi' 
console.log(student.city)
// Nairobi

When you use type any, all errors which were thrown earlier will disappear, meaning that you can access the non-existing member and you can also add new members to your object literal.

Using type any will temporarily "fix" the errors thrown but is an anti-pattern because is removes all the type checking which is provided by Typescript.

Strategy 2: Using an interface


interface StudentInterface {
  id: number;
  name: string;
  email: string;
  phone?: number;
  city?: string;
}

let student1: StudentInterface = {
  id: 1056,
  name: "Bazuu",
  email: "hello@bazumail.com"
};
console.log(student1.name);
// Bazuu

let student2: StudentInterface = {
  id: 1192,
  name: "Morio",
  email: "hello@moriomail.com"
};
console.log(student2.id);
// 1192

let student3: StudentInterface = {
  id: 1345,
  name: "Zenga",
  email: "hello@zengamail.com",
  city: "Nairobi"
};
console.log(student3.city);
// Nairobi

A good way to declare the member objects inside your object literals is through an interface. It makes your code look clean and you also get type safety and code documentation which improves the overall developer experience as the project grows with time.

You can also include an optional object member inside the interface so that typescript doesn't throw an error incase it doesn't get the specified object member.
You can also opt to declare your interfaces in a different file then import them in order to separate the interfaces and code logic.

I hope this short write up was helpful to you and happy coding!!

How to use the Javascript Set() ES6 method —100daysofleetcode epiphany

RamaDevsign — Sat, 30 Oct 2021 16:14:50 +0000

I recently started a #100DaysofLeetcode challenge and came across a coding problem whose solution involved using the Javascript ES6 Set() method. I dug deeper into what it was, how it works and how to use it in your day to day coding and this article will try to shed some more light into it.

What is the Set() method in Javascript

The Set() method is used to store unique values of any type, whether primitive values or object references. You can iterate through all elements in a set and values inside a set may only occur once.

Sets may look similar to Arrays but some key differences include:

Elements inside an array are indexed, they are ordered and retrieved via an index reference.
Sets do not support random access and reordering which are supported by arrays.

Creating a set

When creating a set, we write new Set() which creates a new empty Set.

const blogTags = new Set();

You can also pass in an iterable object whose values will be added to new Set created

const blogTags = new Set(["HTML", "Productivity"]);

Adding items to a set

With our created Set, we can now add more items, this is done with the add() method as shown below

const blogTags = new Set();
blogTags.add("Productivity");
blogTags.add("CSS");

output

Set(2){"Productivity","CSS"}

trying to add a duplicate value to the newly created Set will be ignored.

Searching for a specific value in a set

A set doesn't support random access but you can search for specific items inside the set with has()

const blogTags = new Set();
 blogTags.add("Productivity");
 blogTags.add("CSS")

blogTags.has("CSS"); //true
blogTags.has("Javascript"); //false

Removing values from the set

To remove a single value from the set you use delete()

const blogTags = new Set();
blogTags.add("Productivity");
blogTags.add("CSS");

blogTags.has("CSS"); //true
blogTags.delete("CSS");
blogTags.has("CSS"); //false

Since sets are iterable objects, we can loop through them and also use the spread operator. Values inside a set are arranged in the order by which they were inserted inside the set created

const blogTags = new Set();
blogTags.add("Productivity");
blogTags.add("CSS");
blogTags.add("Devops");

for(let tag of blogTags){
      console.log("Tags in the blog include", tag);
 }

output

Tags in the blog include Productivity
Tags in the blog include CSS
Tags in the blog include Devops

When and why you would use sets

Sets are not a replacement for arrays or other data structures but are useful for some specific situations including:

When you need unique values
When you don't care about random access
When the order of items does not matter

Conclusion

I jumped into the #100daysofleetcode challenge with a goal of being good at Data structures and Algorithms for interviews, but later realized that I'm learning alot of Javascript along the way. I've added more resources you can use to dive deep into the workings of the Set() method. Hope this helped and happy Coding!!

— Extra resources and deep dive

How to use npm instead of yarn with the “expo init” cli (react native tip)

RamaDevsign — Thu, 23 Sep 2021 15:48:31 +0000

tl:dr — run expo init ‘project_name’ --npm

In this guide, I’ll show you how to use npm instead of yarn to create a new react native project while working with the expo cli. React Native combines the best parts of native development(Android, IOS) with React, a best-in-class JavaScript library for building user interfaces. Expo on the other hand makes this process super easy.

Prerequisites

This guide assumes that you have already installed the expo cli globally. You can find a comprehensive guide on how to set that up on the official expo documentation

The Problem

You might have at one point installed yarn on your machine to follow along with a coding tutorial or as a requirement on a past project you were working on. You now have both yarn and npm installed on your machine and you don't want to uninstall either of them(for whatever technical 'it depends' reason). By default expo cli falls back to yarn when it is available but due to preference you want to use npm.

The Solution

The solution in this case is to use the --npm flag when initializing a new expo react native project. The cli hints at what you should use but doesn't explicitly describe where it should be used. This is done by typing expo init project-name with the --npm flag.

e.g

expo init unicornfinder --npm

With the expo init 'project-name' --npm statement, you can now initialize your application with npm as its default package manager. Remember that you will have to run the expo init command with the --npm flag everytime you want a new project to use npm as your preferred package manager.

Thanks for reading and Happy coding!!

How to use Environment Variables in Vite(React Template Example)

RamaDevsign — Fri, 27 Aug 2021 16:33:12 +0000

tl:dr — Use import.meta.env instead of process.env

Vite is a handy build tool when you want to spin up a quick react application. In this guide, I will walk you through how to use environment variables inside a react application template created though vite.

Prerequisites:

This guide assumes that you know some basics of scaffolding a vite application template and also the workings of environment variables . A brief disclaimer, environment variables only store secrets during the development phase of your project. Secret or sensitive keys will be visible after a production build so be careful not to expose sensitive keys at build time.

The Problem:

Sometime back when doing a live code presentation, I wanted to use some keys from a database that was to initialize a connection to the database. The best approach would be to write all the keys inside a .env file and create a connection that makes a reference to the values inside this file. Normally when creating and using environment variables, you write the JavaScript statement process.env.SOME_VALUE or process.env.REACT_APP_SOME_VALUE but in this instance, the react application stopped rendering information on the screen. The console error read "process is not defined". Even after installing the npm package dotenv, the error still persisted.

The Solution:

The solution is actually inside the official vite documentation. Instead of using process.env.SOME_VALUE or process.env.REACT_APP_SOME_VALUE which is common with other projects, inside vite we use import.meta.env.SOME_VALUE. When you want to expose some info inside the frontend you will have to append the statement with VITE i.e. import.meta.env.VITE_SOME_VALUE.

With the import.meta.env.VITE_SOME_VALUE statement, we can now use environment variables inside a react application initialized inside of vite. Thank you for reading this brief writeup and hope this comes in handy when working with react inside vite.

Happy Coding!

How To Use React Router To Improve The UX Of Your React Application

RamaDevsign — Thu, 24 Jun 2021 14:43:27 +0000

In this guide, you will create a custom 404 page and use react router to navigate to our custom 404 page whenever a user goes to the wrong page. We will cover a brief introduction to the essentials when working with react router to manage page routing in your react application.

What you will need:

React Router (installation link here)
Your React application
A custom 404 page

React Router essentials:

React Router is a standard library for routing in React. It enables the navigation among views of various components in a React Application, allows changing the browser URL, and keeps the UI in sync with the URL source

The main components to consider in our particular case include:

BrowserRouter: a router implementation that uses the HTML5 history API(pushState, replaceState and the popstate event) to keep your UI in sync with the URL. It is the parent component that is used to store all of the other components.

Route: Its most basic responsibility is to render some UI when its path matches the current URL.

Switch: Switch component is used to render only the first route that matches the location rather than rendering all matching routes. (We will use it in our guide to render our custom 404).

Link: The Link component is used to create links to multiple routes and to implement navigation within the app.

The setup

First we have to create a new React application by either using the create-react-app command or use an environment like codesandbox or codepen with a React template.

Install react router by running the command npm install react-router-dom or add it as a dependency on codesandbox or codepen.

The folder structure right now has a pages directory inside the src folder with all the pages that are necessary for this guide. We have four pages: home, about, dashboard, help and our custom 404 page. We also have a components folder with a navigation component.

Inside our App.js file we import all the necessary modules from react router

import { BrowserRouter as Router, Route } from "react-router-dom";

We then import our specific pages and components

//pages
import Home from "./pages/Home";
import About from "./pages/About";
import Help from "./pages/Help";
import Dashboard from "./pages/Dashboard";
//components
import Nav from "./Components/Nav";

After everything is imported we setup our application to use the functionalities provided by react router. We wrap everything inside our Router component then import our Nav component to be rendered.

export default function App() {
return (
   <Router>
         <Nav />
         <hr />
   </Router>
  );
}

After that we setup our page routing with the various route components that will navigate us to our desired pages

export default function App() {
return (
   <Router>
      <Nav />
        <hr />
         <Route exact path="/">
           <Home />
         </Route> 
         <Route path="/about">
           <About />
         </Route>
         <Route path="/help"><Help />
           </Route>
         <Route path="/dashboard">
           <Dashboard />
         </Route>
    </Router>
  );
}

Our App.js file will look like this when everything is setup correctly

import "./styles.css";
import { BrowserRouter as Router, Route } from "react-router-dom";

//pages
import Home from "./pages/Home";
import About from "./pages/About";
import Help from "./pages/Help";
import Dashboard from "./pages/Dashboard";

//components
import Nav from "./Components/Nav";

export default function App() {
  return (
    <Router>
      <Nav />
      <hr />
      <Route exact path="/">
        <Home />
      </Route>
      <Route path="/about">
        <About />
      </Route>
      <Route path="/help">
        <Help />
      </Route>
      <Route path="/dashboard">
        <Dashboard />
      </Route>
    </Router>
  );
}

Project scenario:

Let's say we had a onetime bonus boost inside our fintech startup where we gifted every new user with double their initial investment. This promotion only ran for one evening and after it ended we decided as the dev team to remove that specific promotion page.

Everyone that came to the page afterwards only saw a blank page which is bad user experience. How can we solve this?

The solution, a custom 404 page:

A custom 404 page would be the ideal solution to navigate users to our desired page, in this case the Home page.
For this special case we will be using the <Switch> component that is provided within react router.

As previously discussed, we use the switch component to render only the first route that matches the specified location. With this in mind we will use the switch component to render out the first exact path that matches our desired page.

We will also be adding a special route and passing it the "*" prop in order to render every time a path does not match. Inside this route component we will add our custom 404 page that will be rendered every time someone enters the wrong page on our app.

export default function App() {
  return (
    <Router>
      <Nav />
      <hr />
      <Switch>
        <Route exact path="/">
          <Home />
        </Route>
        <Route path="/about">
          <About />
        </Route>
        <Route path="/help">
          <Help />
        </Route>
        <Route path="/dashboard">
          <Dashboard />
        </Route>
        <Route path="*">
          <NotFound />
        </Route>
      </Switch>
    </Router>
  );
}

With that we have now improved the overall User Experience in our application. When we go to any page that is not in our application it returns a custom error page and guides us to the home page.

You can find the code to this guide Here .

Thank you for reaching this far and happy coding!!!

How to fix the NextJS HMR(hot reload) not working error on WSL2

RamaDevsign — Thu, 20 May 2021 15:45:03 +0000

tl:dr - Transfer your workspace files from the windows environment to the Linux environment

While working on your NextJS application inside WSL2, you may have noticed that your saved changes do not immediately reflect on your application. This means that you will have to go through the tedious process of constantly restarting your local development server so that you can see your changes reflected.

Fear not, I come forth with a potential fix for this. The results tend to vary so don't hesitate to leave a comment with your particular scenario so that we can fix it.

The Problem…

When working on NextJS applications inside WSL2, there seems to be an issue with HMR (Hot Reload) not detecting changes to your code on save. This results in constantly refreshing the server so that you can view your changes.

The Solution (The fix that worked for me)…

After upgrading to WSL2 we are constantly advised to move our workspace from the Windows environment to the Linux environment for performance purposes.

Our first step will be to copy our current workspace inside windows to our Linux workspace inside WSL2.



cp –R <source_folder> <destination_folder>

e.g
cp -R /mnt/c/<your_folder_name> /home

Now that we are inside the Linux environment, we can start doing some house keeping by first deleting the node_modules folder and the package-lock.json file.



rm –r node_modules package-lock.json

After that you can run the npm install command to install all the necessary dependencies for the project.

After all the dependencies have been installed you can launch your text editor and start working inside your new environment without any errors.

Congratulations on fixing this error with me!!

Additional Info…

Incase you get some error related to write access when trying to edit files inside your folder you can use the chown command in Linux to give ownership access to your specific folder.



sudo chown –R <username> <folder_name>

With that problem solved you can now continue with your development and enjoy the many benefits of NextJS and a Linux environment inside WSL2.

If this guide was helpful, don't hesitate to drop a like and a comment. Happy coding.

Open source contribution for Experience and Confidence

RamaDevsign — Thu, 06 May 2021 13:34:13 +0000

During my escapades in open source contribution, I happened to come across a unique situation which required me to learn something new in order to make my open source contribution a success. For a long time, I used to think that some git commands were reserved for a certain seniority or experience level, but this situation changed my perspective on how I approached it.

Contributing to open source has a lot of advantages among them being that it helps in sharpening tech skills, both reading code and writing code. There are a lot more advantages to go through but today I wanted to present to you two ways in which open source contribution can help you out in your software development career.

Experience

Contributing to open source can increase your experience. There is a lot that you can work on in open source projects that will help you out in your software engineering career.

One such experience moment happened to me during my open source escapades as described earlier. I had made a pull request that was not passing the markdown linting tests that were setup by the project. After reading through my code I realized that some changes were being made by local markdown linter that were not in line with the guidelines set by the project I was contributing to. Since I knew that this would be resolved by a git command, I started doing my research and found out that this could indeed be resolved by git. The command that I found was git rebase.

Had I never stumbled upon this unique obstacle, I would have probably never learnt about git rebase. There is so much a tutorial can teach you, but if you want to go an extra mile in your career, I would suggest you take up open source contribution. By taking up open source contribution you also get to solve the famous paradox that you need a job to get experience but you need experience to get a job…

Confidence

Confidence is a huge necessity especially if you are starting out as a developer. With confidence on your side you get to navigate the dreaded imposter syndrome that is prevalent among us developers, a feeling that does not discriminate on experience level, whether junior or senior.

You get a taste of confidence when you get some insightful feedback on your code contribution during a code review session. You get a taste of confidence when the project maintainer leaves a LGTM(Looks Good to Me) comment on your code before merging it to the code base. This build up of confidence will ultimately motivate you to even start your own open source projects which will also pass on these two advantages to other developers starting out in open source contribution.

With experience and confidence you can achieve a lot in the software engineering field. I wrote this article to highlight these two advantages among many that you can find when you actively contribute to open source. If you need some help getting started or navigating the open source field, I have a list of recommendations at the end of this article that will surely get you started. If you have additional individuals or places that can be of help please feel free to comment down below and I will surely add them to this list. Until next time folks, happy coding!!!

- - My Recommended list (still being added):

Kent C. Dodds
Monica Powell
Brian Douglas (Search Opensauced)
Eddie Jaoude (Search EddieHub)
Samson Goddy (Search OSCA)

A Cool Way to Create Multiple Files for your Project in WSL/WSL2

RamaDevsign — Thu, 01 Apr 2021 08:40:36 +0000

For a long time now, Linux users seemed to have the upper hand when it comes to software development(with solid reasons to back them). But with the introduction of the now popular WSL (Windows Subsystem for Linux) , us windows folk have a reason to smile in regards to software development.

Today I'm not going to dive so much into the advantages of using Linux in software development, I want to share an interesting and cool way to create multiple files inside your Linux environment with the touch command.

The Touch command

The touch command is a standard command used in Linux based operating systems and it is used to create a file without any content ¹ .

The above code results in the creation of an empty index.ts file

Creating Multiple files

The same touch command can be used to create multiple files inside your project folder

The above code will result in the creation of an empty db.js file, an empty users.tsx file and an empty auth.ts file inside your current folder.

Leveling up inside the Linux terminal Matrix

If you have ever run into a task that requires the creation of multiple files of the same extension, it reaches a point where it gets too repetitive and that's what happened to me a while back when creating files in a previous project. The file extension was .graphql and creating 10 files with such a long extension was getting repetitive and boring. As a developer I knew that there was a better and easier way to do it.

Introducing the brace expansion command. This is a handy bash feature that allows you to create long lists of arbitrary string combinations. More info on this can be found on this Bash Hackers Wiki article

The above code will result in the creation of 10 LOG files serially numbered and prefixed with the acc name

Now in my particular scenario, I wanted an easier way to create 10 files with the .graphql extension. My final resolve was to use the brace expansion command and type out all the file names in one instance then assign the files with the .graphql extension as shown below.

The above code resulted in my expected result of 10 files with a .graphql extension

This worked to my satisfaction and was a deserved win from my google research session. All the tabs that were open during the research can now be closed

In conclusion, there are a lot of tasks that can be achieved with the brace expansion command that I have not touched on and that are efficient and effective in your day to day coding activities.

The article on the Brace Expansion command dives deep into the many scenarios that might come in handy when using it in your tasks. I highly recommend that you have a look at it.

Thank you for reaching the end and kindly leave a like or a heart if you found this article insightful. What are you planning to do with your new found Linux super power?

The React Developer Community Kenya - 6 Month Update

RamaDevsign — Thu, 25 Mar 2021 06:38:11 +0000

During the events of 2020(The Pandemic), a brilliant idea crossed my mind. I was learning react hooks with all the fun and cool ways of using functional components at the time and I wanted to interact with other developers who were also using react in my country. I had seen the success of the many developer groups in Kenya and wanted to replicate this as well.

The first step was to look for any developer community available that was heavily biased towards react, since there were well performing developer groups on angular and vue. Now don't get me wrong, I don't hate working with angular or vue, I wanted to learn and share my acquired knowledge and skill in react to fellow developers that were also in their various learning paths related to react. It was great that internationally there was a vibrant community that revolved around the react library and with this, I saw a gap that needed to be filled in our local developer community.

After a lot of research and consultations, I decided to start the react developer community Kenya. It was not easy. First I was fairly new to the "leading a group" thing. I knew what I wanted in a developer community but I wasn't quite sure if what I had in mind would also be ideal for everybody else in the group. We are still in the early stages of growth and I am grateful that The tech community in the 254 embraced it.

The six months had a fair share of its ups and downs. Let me first start with the ups.

We are currently at 50 group members on our Telegram channel(as at 10th March 2021), though not very active but this will change as the numbers continue to grow
We currently have a GitHub organization, Twitter handle, YouTube channel which is part of the strategy to onboard new members into our yet to be vibrant community.

For some minor downs(lessons) that I know will be fixed as we progress:

The telegram platform is filled with a lot of spam from so called "crypto investors" who are constantly raiding the channels to promote their platforms. This I have found out can be fixed by introducing moderation via the famous telegram bots. There is one that we are currently using and its premium features were quite good, unfortunately the trial period ended and we switched back to the free version. The subscription is not much so I'm sending this out to anyone reading this and is willing to help out with expanding the growth of the react community in Kenya
We currently don't have a meetup page as a community. This is also due to financial constraints but as we progress I am sure there will be a solution for this, also sending this out if there is someone who is willing to help. Bootstrapping anything in the beginning with little to no financial input can be an uphill task. But I am certain there will be a way out.
Bootstrapping anything in the beginning with little to no financial input can be an uphill task. But I am certain there will be a way out.

I am very optimistic about growing a community that competes with the global demand for frontend and fullstack developers. The react ecosystem is growing globally and I wouldn't want my country to be left out in terms of this valuable skill. Since it is an open community I want to be as clear and transparent as I possibly can so that anybody who also wants to start a developer community and sees an opportunity can go ahead and start one.

I know the beginnings are always the hardest but I also know that consistency compounds with time. I will be happy to review this article as we mark one year as a developer community. Kindly reach out if you want to join the community via our email address reactdevske{at}gmail{dot}com . (we are trying to minimize spam from email and telegram web scrapers).