Forem: Osika Martha

The Underrated Superpower of Rest While Coding

Osika Martha — Wed, 07 Jun 2023 08:17:46 +0000

Programmers frequently find themselves caught up in the constant pursuit of deadlines and pushing the limits of their coding skills in the fast-paced world of software development. The prevalent mentality frequently disregards the critical need for rest in favor of productivity and extended workdays. But in this article, I want to highlight the value of taking breaks while programming and show how doing so can boost productivity, creativity, and problem-solving skills.

Rest as a Catalyst for Creativity:
Coding innovations frequently come about as a result of epiphanies and original ideas. However, being engrossed in coding work nonstop might cause mental tiredness, making it more difficult to think creatively. It's easier for creative thoughts to develop when you take regular breaks and let your mind roam. Going on a stroll, reading a book, or pursuing a hobby are examples of activities unrelated to coding that might help spark new ideas and creative solutions.
The Science of Rest:
Our brains benefit from rest times, which enable cognitive processing and knowledge consolidation, according to scientific studies. The default mode network (DMN) in our brains becomes active when we take a break, making it easier to solve problems and come up with fresh ideas. Regular breaks also increase concentration and attention span, lowering the risk of burnout and raising the capacity to maintain productivity over the long term.
Rest for Error Detection and Debugging:
The process of coding is extensive and complicated, frequently requiring close attention to detail. Nevertheless, prolonged periods of nonstop coding might raise the possibility of mistakes sliding through the cracks. Taking a break from the screen and coming back with a clearer head makes it easier to spot potential errors. Taking breaks allows programmers to step back from their code and see it with fresh eyes, improving fault identification and enhancing debugging effectiveness.
Improved Problem-Solving Abilities:
Rest is essential for enhancing problem-solving skills. Our first instinct when faced with a difficult code issue could be to keep working through it. But taking a break can give you a new perspective and an opportunity to look at the issue differently. As a result, we can approach the problem with fresh insight and perhaps find other solutions that we would have missed when working nonstop.
Productivity and Efficiency:
Contrary to what you would think, including rest in your coding regimen might actually increase output and efficiency. By prioritizing rest, you can stay away from burnout's hazards, which frequently result in decreased performance and greater mistakes. You may return to your coding chores with fresh energy, attention, and drive if you take regular breaks, which preserve a healthy work-life balance.

Conclusion:
Recognizing the value of rest while coding is essential for long-term productivity and individual well-being in a culture that frequently exalts overwork and long hours. Accepting regular breaks increases overall efficiency, minimizes the likelihood of burnout, and fosters creativity and problem-solving. Programmers can unlock their full potential and succeed more often in their coding activities by appreciating and prioritizing rest. So keep in mind that taking a step back can help you advance in your learning of coding.

How to effectively use the Fetch API in JavaScript

Osika Martha — Fri, 05 May 2023 04:05:53 +0000

The Fetch API is a modern interface for fetching resources (such as data or files) from a server using JavaScript. It provides a simpler and more efficient way to make asynchronous network requests and handle the responses than the older XMLHttpRequest (XHR) interface.
In this post, we'll cover the basics of how to use the Fetch API in JavaScript, with some examples to illustrate its usage.

The Basics of Fetch API

To make a fetch request, we use the fetch() method, which takes a URL as its argument and returns a Promise that resolves the response of the request. Here's an example:

fetch('https://jsonplaceholder.typicode.com/todos/1')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error));

This fetch request retrieves a JSON object from the URL https://jsonplaceholder.typicode.com/todos/1. The response is then converted to a JavaScript object using the JSON() method; finally logged to the console. The catch() method is used to handle any errors that may occur during the fetch request.

Making POST requests

We can also use the Fetch API to make POST requests, which send data to a server. Here's an example:

const data = { title: 'foo', body: 'bar', userId: 1 };

fetch('https://jsonplaceholder.typicode.com/posts', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(data)
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

In this example, we're sending a JSON object as the request body to the URL https://jsonplaceholder.typicode.com/posts. We specify the HTTP method as POST and set the Content-Type header to application/json to indicate that we're sending JSON data. We convert the data object to a JSON string using the JSON.stringify() method before sending it in the request body.

Error handling

When making fetch requests, it's important to handle errors properly. We can use the catch() method to handle any errors that may occur during the request, such as network errors or server errors.

fetch('https://jsonplaceholder.typicode.com/todos/999999')
  .then(response => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error(error));

We're trying to fetch data from an invalid URL. If the response status is not ok (i.e., not in the range of 200-299), we throw an error with a custom message. The catch() method is used to handle this error.

Adding headers

Sometimes we need to add headers to our fetch requests, such as authentication tokens or custom headers. We can do this by passing an object as the second argument to the fetch() method, containing the headers we want to add.

const headers = {
  'Authorization': 'Bearer my-token',
  'Content-Type': 'application/json'
};

fetch('https://jsonplaceholder.typicode.com/todos/1', {
  headers: headers
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error(error));

We're adding two headers to our fetch request: an authentication token using the Authorization header, and a Content-Type header to indicate that we're sending JSON data.

Conclusion

The Fetch API is a powerful tool that enables developers to fetch data from servers in a simple and intuitive way. By using the basic fetch request, headers, and error handling techniques, you can effectively use the Fetch API in your JavaScript projects.

Context API

Osika Martha — Fri, 05 May 2023 03:37:30 +0000

User interfaces are created using the well-known JavaScript framework React. It is renowned for handling complicated application state changes and for efficiently rendering components. Managing a React application's state, on the other hand, gets harder as the application's size and complexity increase. To solve this problem, React released the Context API, a state management mechanism that can be used to share states between components.

The Context API enables programmers to construct a global state that can be accessed and modified by any component in the application without having to provide props through intermediary components. By passing a prop via numerous levels of components, the issue of prop drilling is reduced, which makes the code more complex and challenging to maintain.

A context must first be created before the Context API can be used in a React application. The createContext() method offered by the React package can be used to accomplish this.
An initial value, which is used as the context's default value, is sent as input to the createContext() method. As an illustration, the following code establishes the context for a theme:

import React from 'react';

const ThemeContext = React.createContext('light');

export default ThemeContext;

In this example, the initial value for the theme context is 'light'. You can use this context to provide the theme to any component in your application.

To provide the context to a component, you can use the Provider component. The Provider component takes the context as a prop and wraps the child components that need access to the context. For example:

import React from 'react';
import ThemeContext from './ThemeContext';
import Header from './Header';
import Footer from './Footer';

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <Header />
      <main>
        <p>This is the main content of the page.</p>
      </main>
      <Footer />
    </ThemeContext.Provider>
  );
}

export default App;

In this example, the App component provides the theme context to the Header and Footer components. The value of the theme is set to 'dark', which overrides the default value of 'light'.

To consume the context in a component, you can use the useContext() hook provided by React. The useContext() hook takes the context as an argument and returns the current value of the context. For example:

import React, { useContext } from 'react';
import ThemeContext from './ThemeContext';

function Header() {
  const theme = useContext(ThemeContext);
  return (
    <header style={{ background: theme === 'dark' ? '#333' : '#eee' }}>
      <h1>My App</h1>
    </header>
  );
}

export default Header;

In this illustration, the header is styled in accordance with the current theme using the theme context that the Header component consumes.

To sum up, the Context API is an effective tool for controlling the global state in a React application. You may transfer state among components without the use of prop drilling by building a context and utilizing the Provider component. Any component can consume the context and update the state as necessary by using the useContext() hook. Building scalable and effective React apps is made possible through the Context API.

Why Pinia??

Osika Martha — Tue, 02 May 2023 21:08:23 +0000

For Vue.js apps, Pinia is a state management library that has grown in popularity. The advantages of using Pinia over alternative state management libraries on the market will be covered in this post.

Pinia is first and foremost a simple-to-use and comprehended reactive store. Because it already updates whenever its data changes, the store is responsive. As a result, each time something in your application changes, you don't need to manually update the data in your store. This increases the effectiveness and maintainability of your code.

Utilizing Pinia has the added advantage of being easy and light. Pinia has a smaller footprint and requires less setup and configuration than competing state management libraries. Because of this, it's perfect for small- to medium-sized applications where you want to keep things straightforward.

Additionally, Pinia offers a robust collection of features that make it simple to manage complex states in your application. For instance, you may divide your business into smaller, easier-to-manage portions thanks to the built-in support for modules. This increases your application's overall efficiency and makes it simpler to maintain and test your code.

Pinia is also incredibly versatile and adaptable. By developing unique plugins or hooks, you can quickly modify them to match your unique requirements. As opposed to previous state management libraries, Pinia may now be customized to fit your unique use case.

Pinia has a helpful community and excellent documentation as well. Even if you are unfamiliar with Vue.js, Pinia's documentation is straightforward, short, and simple to understand, making it simple to get started. The community is also lively and supportive, so you can always find assistance and support when you need it.

For teams looking to work together on a Vue.js project, Pinia is a fantastic option. It is simple to comprehend, and the store's modular architecture enables various team members to concentrate on different areas of the business without infringing on each other's rights. This may be especially useful for bigger projects if several people are contributing to the same codebase.

Therefore, Pinia is a fantastic option for state management in Vue.js applications. With a variety of features that make it simple to manage complicated states, it is straightforward, light, and strong. A helpful community and excellent documentation make it even easier to get started and receive assistance when you need it. Pinia is unquestionably a library to think about if you're searching for a state management solution for your Vue.js application.

ReactJS Props

Osika Martha — Tue, 02 May 2023 04:10:09 +0000

Building interactive user interfaces is a common usage for the well-known JavaScript framework React. Utilizing props—an acronym for properties—is one of React's key characteristics. We shall discuss React props in this post along with their function, significance, and definition.

What Are React Props, Exactly?

Props are a method of passing data between components in React. Props can be inputted into a component, which can then use the information to render itself or pass it down to child components. Simple strings, numbers, and complicated objects and functions can all be used as props.

The parent component defines props, which are then transmitted to child components via their attributes. As an illustration, consider the case where the parent component is called App and the child component is called Button. In the App component, we may define a prop called label and pass it on to the Button component as follows:

function App() {
  return (
    <Button label="Click me" />
  );
}

function Button(props) {
  return (
    <button>{props.label}</button>
  );
}

In this illustration, the button component renders a button with the text "Click me" using the prop label it receives from the app component. Keep in mind that the props object inside the Button component is used to access the prop label.

How Are React Props Operated?

When a component receives props, it is forced to be rendered again with the updated data. This is because React components are stateless, meaning they don't save any internal state or data. Instead, they base their rendering decisions on the props.
When a parent component updates its properties, it transmits the updated properties to its child components, which causes the child components to re-render with the updated information. Until all components have been updated with the new data, this process is repeated down the component tree.

React Props: Why Are They Important?

Because they make components highly modular and reusable, react props are crucial. We may develop simple, reusable building blocks that can be assembled to create complicated user interfaces by sending data from parent components to child components via props.

Props also give components a means to be more versatile and adaptable. We may design components that can be used in several settings with varying data and behavior by allowing developers to send in alternative props.

Conclusion

A key component of the React library that makes components more modular and reusable is React props. We may develop simple, reusable building blocks that can be assembled to create complicated user interfaces by sending data from parent components to child components via props. Using props, developers can create components that can be used in a variety of contexts with different data and behavior, increasing the flexibility and customizability of the component.

ReactJS Vs VueJS

Osika Martha — Tue, 02 May 2023 03:55:09 +0000

The most extensively utilized and well-liked front-end web development frameworks worldwide are ReactJS and VueJS. Choosing which of these frameworks to employ might be challenging because both ReactJS and VueJS have benefits and drawbacks. In this post, we'll compare ReactJS vs VueJS to help you decide which framework best suits your needs.

ReactJS:

In 2011, Facebook created ReactJS, an open-source JavaScript library. Using this component-based framework, programmers can create reusable user interface (UI) components that are easy to integrate into other applications.
The virtual DOM (Document Object Model) that ReactJS employs is a simplified version of the real DOM. This demonstrates how quickly and effectively ReactJS renders and updates UI components.

Thanks to its thriving and sizable community, an enormous ecosystem of third-party libraries and tools has grown up around ReactJS. This makes it simple to add new features to your program and solve problems that arise frequently. Developers may easily get started with ReactJS because to its outstanding documentation.

The versatility of ReactJS is one of its main benefits. ReactJS may be used to construct both small and large apps, and it can be integrated with other libraries and frameworks. Server-side rendering, a crucial component of search engine optimization (SEO), also functions well with ReactJS.

VueJS:

In 2014, Evan You developed VueJS, an open-source JavaScript framework. It is a progressive framework that may be applied to the development of both modest and substantial applications. Developers can construct reusable UI components using the component-based framework VueJS.

Because it is so straightforward to use, VueJS has grown in popularity over time. It is a great option for developers who are new to front-end web development because of its extremely straightforward and simple-to-learn syntax. In addition, VueJS has a more manageable learning curve than ReactJS, which makes it a popular option for small-scale projects.

The superb documentation provided by VueJS is one of its greatest benefits. Developers may easily start using the framework because of the thoroughness of the VueJS documentation, which also contains several examples and tutorials. A sizable and vibrant community for VueJS has produced a broad ecosystem of third-party libraries and tools.

Comparison:

A few things should be taken into account while contrasting ReactJS to VueJS:

Performance: ReactJS renders and updates UI components more quickly than VueJS. This is due to the fact that ReactJS uses a virtual DOM, which is more effective than the DOM-based strategy used by VueJS.
Learning Curve: VueJS has a less steep learning curve than ReactJS. This is due to the fact that VueJS has a more straightforward syntax and is simpler for beginners to grasp.
Flexibility: ReactJS is more adaptable than VueJS when it comes to interacting with other libraries and frameworks. ReactJS can also be used for server-side rendering, which is crucial for SEO.
Compared to VueJS, ReactJS features a wider ecosystem of third-party libraries and tools. This makes it simpler to add new features to your program and solve problems that come up frequently.

Conclusion:

ReactJS and VueJS are both top-notch front-end web development frameworks, and each has its own pros and drawbacks. Because it is quicker and more adaptable, ReactJS is a better option for complex applications. Contrarily, VueJS is simpler to use and has a lower learning curve, making it a better option for small-scale projects. In the end, the decision between ReactJS and VueJS will come down to your project's particular requirements and the development team's skill set.

Hello, World!

Osika Martha — Mon, 27 Feb 2023 13:35:41 +0000

The well-known program "Hello World" is frequently used as a jumping-off point for learning a new programming language. In this article, we'll look at how to write a JavaScript "Hello World" program.

Building online apps frequently makes use of the high-level, interpreted programming language known as JavaScript. It is renowned for its adaptability, simplicity of usage, and ability to run on both the client and server sides.
A text editor and a web browser are required to write a JavaScript "Hello World" program. The steps are as follows:

Step one: Make a new HTML file.
Create a new file in your text editor after opening it. Using a ".html" extension, save it. This is the HTML file we'll use.

Step two: Add the JavaScript code.
Add the following code to the HTML file after opening it in your text editor:

<!DOCTYPE html>
<html>
<head>
    <title>Hello World in JavaScript</title>
</head>
<body>
    <script>
        // JavaScript code goes here
        console.log("Hello World!");
    </script>
</body>
</html>

We've inserted a script tag with our JavaScript code to this code. The text "Hello World!" is printed to the browser console using the console.log() method.

Step 3: Launch a web browser and open the HTML file.
Open the file in a web browser after saving it. The "Hello World!" message ought to appear in the browser console.

Congratulations! You have successfully written a JavaScript "Hello World" program.

It is important to note that there are numerous approaches to writing a JavaScript "Hello World" program. For instance, you might use the alert() method to display the message in a pop-up window or the innerHTML property to add the message straight to the HTML file.

To sum up, JavaScript is an effective and flexible programming language that can be used to create a variety of web apps. You will be well on your way to becoming a skilled web developer by grasping the fundamentals of JavaScript, including how to write a "Hello World" program.

Front End Development

Osika Martha — Thu, 12 Jan 2023 22:58:04 +0000

Everything you find on a website is designed by a front-end developer like buttons, links, animations etc. It is the job of the font-end developer to use the client's designs and ideas and implement them through codes.

To become a front-end developer you would need a few languages such as:

HTML
CSS
JavaScript

HTML

HTML stands for HyperText Markup Language. It is used to create the skeletal structure of a website. The HTML template looks like this:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

</body>
</html>

CSS

To style a website, you would need CSS which stands for Cascading Style Sheet. Different properties can be styled using the following syntax:

selector { property : value ; }

Link to CSS tutorial:
https://www.w3schools.com/css/default.asp

JavaScript

JavaScript allows the user to interact with the website like when a user wants to submit a form, and an alert pops up with a message "Submitted". JavaScript offers that functionality.
An example:

<!DOCTYPE html>
<html>
<body>

<h2>What Can JavaScript Do?</h2>

<p id="demo">JavaScript can change HTML content.</p>

<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>Click Me!</button>

</body>
</html>

To learn a full course on front-end development: Visit https://www.w3schools.com/

Building a website that sets up fake userAuthContext that carries out authentication.

Osika Martha — Sun, 08 Jan 2023 08:52:56 +0000

During the AltSchool second semester examination, we were asked to pick ONE question out of four.

I chose to do number 3, where i was expected to implement nested routes, navigation bar, SEO and userAuthContext that carries out fake authentication.

Honestly, i didn't know how to begin but after taking a few days, i decided to start by implementing the parts i am familiar with.

I began by installing my react app with npx create-react-app altschool-react-examination using my git bash in my local machine.

After opening the file in my Vscode, i installed two dependencies that i needed for my Routers, Register page and Sign in page.

npm install react-router-dom@6
npm install react-hook-form

I started by creating the pages and then the style pages. I built my UI to look like the AltSchool landing page in terms of a few content.

After i was done with the UI part of the examination, i was confused as to how to implement the authentication part, i spent a lot sleepless nights watching YouTube videos on ContextAPI, replayed live class videos and at some point i almost gave up.

With encouragement from my Altschool buddy Chukwurah Victor, i kept searching till i came across a video that explained it better and then i created the userContext file with the code below:

import { createContext, useContext, useState } from "react";
import {useNavigate}  from "react-router-dom";

export const userContext = createContext({
  user: null,
  logIn: () => {},
  logOut: () => {},
});

const USER = { name: "Guest", isGuestUser: true };

export function UserContextProvider({ children }) {
  const [user, setUser] = useState(USER);
  let navigate = useNavigate();
  function logIn(username) {
    setUser({ isGuestUser: false, name: username });
    navigate("/dashboard")
  }
  function logOut() {
    setUser(USER);
    navigate("/login")
  }
  return (
    <userContext.Provider value={{ user, logIn, logOut }}>
      {children}
    </userContext.Provider>
  );
}

export function useUserContext() {
  const { user, logIn, logOut } = useContext(userContext);

  return { user, logIn, logOut };
}

And to Authenticate the user, i created an Auth.js file with the code below:

import React from "react";
import { useUserContext } from "../context/UserContext";


const Auth = () => {
  const { user } = useUserContext();
  return <>{user.isGuestUser ? "" : ""}</>;
};

export default Auth;

When one logs in, it authenticates and displays your username

I was happy that i was able to finish the examination just in time to submit it. For the holiday challenge, we were asked to modify the examination or add new features.

I looked at the work i had done the UI wasn't appealing and the code was bulky since i used plain CSS. For the holiday project, i decided to improve on the codebase by using Tailwindcss to style my project instead.

This provided an avenue as i was just learning Tailwindcss and i decided to improve my skills by applying it. I hosted both project using Netlify.

Old codebase with Plain CSS

New Codebase with Tailwindcss

All round i can say i really enjoyed working on the project and you can find below the links to the GitHub repositories and Live links.

GitHub Repositories

Examination: https://github.com/Mataoseeker/Altschool_React_Examination
Holiday Challenge: https://github.com/Mataoseeker/holiday_challenge

Live Links

Examination: https://altschool-react-examination.netlify.app/
Holiday Challenge: https://holiday-challenge-01.netlify.app/

Learning continues.. Thank you for reading my article.

Welcome!

Osika Martha — Wed, 04 Jan 2023 22:16:58 +0000

Hey there! If you are reading this, this is my first post on this community. Let me introduce myself then.

Hi, My name is Martha, a passionate front end developer that build websites using React. I am really passionate about learning and impacting what I have learnt to others.

My coding skills include; intermediary experience in HTML, CSS, JavaScript, Tailwindcss & React. I would say intermediary because learning for me never stops, its like a deep pit that can never be filled.

In my spare time, I venture into technical writing and open source collaboration, hoping to make more collaborations in the future. I also have a YouTube channel where I teach front end development languages.

Let me stop here. For further discussions, you can get across to me.