Lamin Sanneh
  • Home
  • About
  • Recent Work
  • Recent Posts
  • Experiences
  • More
    Education
  • Posts
  • Dark Theme
    Light Theme Dark Theme System Theme
  • Categories
  • ASP .Net
  • Devops
  • GoLang
  • Javascript
  • Laravel
  • React.js
  • Self Improvement
  • Testing
Hero Image
Go Local Modules and Packages - Understand How to Create and Use Them

Introduction When building applications in Go, modularizing your code into separate modules and packages is essential for maintaining clean and reusable code. In this tutorial, we’ll walk through creating two local Go modules: restapi01/backend and restapi/maincaller. The backend module will serve as a basic HTTP server that outputs a simple HTML view, while the maincaller module will call functions from backend. We shall look into: Initializing Go modules and packages. Using go mod edit and go mod tidy to set up local imports without publishing packages.

    Saturday, November 9, 2024 | 3 minutes Read
    Hero Image
    Setting Up a React.js Webpack and Typescript App From Scratch using Todo App

    Introduction In this tutorial, we’ll set up a React.js Todo application using TypeScript and Webpack from scratch. This will include configuring Webpack to handle TypeScript and React code, setting up a development server, and building our project for production. Prerequisites Node.js and npm installed on your machine. Basic understanding of React.js, TypeScript, and Webpack. Project Setup First, let’s create a new directory for our project and initialize a new Node.js project.

      Monday, July 22, 2024 | 6 minutes Read
      Hero Image
      Playwright and React.js Typescript Todo App Automated End to End Testing with Vite

      Introduction In this tutorial, we’ll create a simple Todo app using React.js and TypeScript, initialized with Vite, and then we’ll write tests for it using Playwright. We will use playwright to do an end to end test which will simulate the user browser interaction with our todo app like adding new todos, deleting todos, upadtinhg todos e.t.c. By the end of this guide, you’ll have a solid understanding of how to use Playwright to test your React applications.

        Tuesday, July 9, 2024 | 7 minutes Read
        Hero Image
        React.js Typescript Todo App Testing with Jest and React Testing Library and Vite

        Introduction In this tutorial, we shall setup Jest and React Testing Library to perform integration test. We will be testing React.Js components, so this will not be an end to test, but we will be testing the individual coponents involved in the Todo App. At each stage, we will render the components invovled using the library functions provided by React Testing Library. We shall pass in properties to each component and test their behavious and visualisation by simulating clicks and text typing into textboxes using the appropriate functions.

          Sunday, June 30, 2024 | 8 minutes Read
          Hero Image
          How to Dockerize a Laravel 11 and React 18 Application for Development

          Introduction Docker has become a popular choice for development environments due to its ability to containerize applications and simplify deployment across different systems. This guide will walk you through dockerizing a Laravel 11 backend and React 18 frontend application, using Docker Compose to orchestrate multiple services. We wil assume that your laravel and react apps live in seperate folders and will be served through different domain. Suffice to say that the react app will not be served from the laravel backend but will use the laravel backend only as an api service.

            Tuesday, June 25, 2024 | 6 minutes Read
            Hero Image
            React.js How to use User Roles to Secure Frontend Menu Links and Routes Using a Wrapper Component for User Authentication and Backend Permission Control

            In modern web applications, managing user authentication and permissions is crucial. One effective way to handle this in React.js is by using a wrapper component. This article will guide you through creating a wrapper component that controls access to routes and links based on user roles and permissions. We will leverage Redux Toolkit to manage user state and permissions. Prerequisites Before we start, make sure you have the following setup:

              Sunday, June 23, 2024 | 5 minutes Read
              Hero Image
              How to Use React.js useEffect to Replace Class-Based Lifecycle Methods

              Introduction React has undergone significant changes over the years, and one of the most notable updates is the introduction of hooks in version 16.8. Hooks allow developers to use state and other React features without writing a class. Among these hooks, useEffect stands out as a powerful replacement for the various lifecycle methods found in class components. This article will guide you through replacing class-based lifecycle methods with useEffect in functional components, complete with detailed code snippets.

                Friday, June 21, 2024 | 4 minutes Read
                Hero Image
                How to Make a Dynamic Multi Checkbox System in React.js Seamlessly

                Introduction Creating a dynamic multi-checkbox system in React.js can be a powerful way to allow users to select multiple options, such as user roles, in an intuitive and interactive manner. In this blog post, we’ll walk through a complete example of how to implement such a system, focusing on updating the state based on user interactions and fetching initial data from an external source. Let’s dive into the code and explore each part of the implementation.

                  Wednesday, June 19, 2024 | 4 minutes Read
                  Hero Image
                  How to Use Laravel 11 Gates and Policies to Secure Your Application Data through Your Controllers and Routes

                  Introduction Securing your application data is a crucial aspect of building robust web applications. Laravel 11 provides a powerful mechanism to handle authorization through Gates and Policies. This post will guide you through the process of using Gates and Policies to secure your application data within a controller, using a Post model as an example. What are Gates and Policies? Gates and Policies are two complementary features in Laravel that help in authorizing actions.

                    Tuesday, June 18, 2024 | 8 minutes Read
                    Hero Image
                    React Redux Toolkit with Typescript How to Set Up, Understand, and Use the library in Your React.js App

                    Using typescript and integrating React Redux toolkit into your React application can enhance your state management, making your app more robust and scalable. Redux Toolkit simplifies this process by providing a set of tools and best practices. This guide will walk you through setting up Redux Toolkit in a React application, understanding its key components, and effectively using it to manage your app’s state. Step 1: Setting Up Redux Toolkit npm install @reduxjs/toolkit react-redux Configuring the Store In your project, create a file named store.

                      Tuesday, June 18, 2024 | 4 minutes Read
                      Hero Image
                      React.js useEffect How to prevent component weird bahaviour due to multiple out of order server fetches

                      To prevent out-of-sync React Redux toolkit dispatches or just plain react.js in general which could result in unexpected behaviors due to asynchronous server requests returning at different times, we need to ensure that we handle component unmounts or updates correctly. This ensures that when a component re-renders or unmounts, for several reasons like a user clicks on another link related to the same component, it does not attempt to set state based on outdated or irrelevant asynchronous responses.

                        Tuesday, June 18, 2024 | 2 minutes Read
                        Hero Image
                        Cypress and TypeScript React.js Todo App End-to-End Testing

                        Introduction In this tutorial, we will build a React.js Todo app using TypeScript, initialize the project using Vite, and set up Cypress for end-to-end (E2E) testing. We will cover all the steps, including project setup, writing the Todo app, and creating Cypress tests. Prerequisites Before we start, ensure you have the following installed on your machine: Node.js and npm (or yarn) A code editor (VS Code is recommended) Initialize the Project with Vite Let’s create a new React project using Vite.

                          Thursday, June 6, 2024 | 5 minutes Read
                          Hero Image
                          Laravel 11 and React 18 Login and Registration tutorial with React Redux Toolkit

                          Introduction In this tutorial, we will be setting up an indepth tutorial guide of react.js and laravel 11 system for user authentication and registration. We will be using typescript on the react.js frontned, along with react redux toolkit, but do not worry as youc an follow along even if you only know javascript. React redux toolkit helps with state management. It might be overkill for a simple login registration app like this, but makes life very easy once the app codebase grows.

                            Tuesday, May 28, 2024 | 16 minutes Read
                            Hero Image
                            What is Technical Debt?

                            Introduction As someone who crunches out code, whether moderately or a lot if you’re like me. You must have incurred some technical debt somewhere along the lines. Development approaches Technical debt is the term given to a certain programming scenario. Assume you had a project with a target deadline. As the technical lead of the project, you are sometimes faced with two decisions which are: The long and proper way Using this approach is the most ideal way of development.

                              Monday, September 2, 2013 | 2 minutes Read
                              Hero Image
                              How to set up live reload in 5 easy steps

                              Manual all the way! When you start out web developing, the appeal to do a lot of stuff manually might be appealing. However, once you step into intermediate to advanced level you will probably be constantly searching for tools to help automate your workflow. One such tool for me is Live Reload. If you are wondering what this tool does. It enables you to see html changes instantly in your browser as you type.

                                Sunday, June 16, 2013 | 2 minutes Read
                                Hero Image
                                Underscore js, the missing Linq for c-sharp developers

                                Introduction We all have our favourite languages that we feel most comfortable with for various reasons. One such language for me is the c-sharp language. One of the primary reasons why I love the language is a really cool feature called Linq. I simply cannot emphasize the amount of time this feature has saved me while doing work. It integrates seamlessly into my workflow and find myself almost subconsciously using it.

                                  Wednesday, May 22, 2013 | 3 minutes Read
                                  Hero Image
                                  Html5 localStorage, dead simple

                                  Introduction Lets get something straight, this stuff (Html5 localStorage) should be simple, dead simple, so here we go. Storing Simple Data (e.g. numbers and strings) localStorage.setItem(keyName, myString); Notice the capital letter “S“ in localStorage , its necessary. Don’t worry localStorage is a global variable in your browser, so use it freely from anywhere. Retrieving Simple Data localStorage.getItem(keyName); Storing Object localStorage.setItem(keyName, JSON.stringify(yourObject)); When storing objects, you would want to serialize your object into a string using “JSON.

                                    Saturday, April 20, 2013 | 1 minute Read
                                    Hero Image
                                    What is Cross Origin Resource Sharing and when to use it?

                                    The Problem When developing highly ajax enabled applications using javascript, you may not always be fortunate to have both the client and server side of the application be hosted on the same domain. You might be asking, what does this mean? Good question. I am confident that you know what a domain is. If not, then have a quick look here at the wikipedia article. Ok, so lets say you have a domain named http://www.

                                      Monday, April 8, 2013 | 3 minutes Read
                                      Hero Image
                                      Staying Sane among all the craziness (keeping up with technology)

                                      A wiseman’s advice My dad once told me boy. Yes, literally, “boy” was the nickname he gave me for some reason. He said “you will never be satisfied if you always want to keep up with the latest and greatest gadgets”. He also said that sometimes its ok to be behind schedule a little bit. You see, my thought as a young, gadget addicted teenager was that. “This was some excuse he’d come up with just to have some breathing space from getting me the latest video games”.

                                        Saturday, April 6, 2013 | 3 minutes Read
                                        Hero Image
                                        How learning a new programming language can help you become a better programmer?

                                        My Theory I came into first year at the University of Manchester, with a fair knowledge of programming in Java. I was fully aware that there were people out there who were well versed in other languages and using it to solve real life problems. Even with this knowledge, I did not even bother to look into any other because I hadn’t yet known the importance of learning a new programming language.

                                          Tuesday, February 19, 2013 | 4 minutes Read
                                          • ««
                                          • «
                                          • 1
                                          • 2
                                          • »
                                          • »»
                                          Navigation
                                          • About
                                          • Recent Work
                                          • Recent Posts
                                          • Experiences
                                          • Education
                                          Contact me:
                                          • lamin.evra@gmail.com

                                          Toha Theme Logo Toha
                                          © 2024 Copyright.
                                          Powered by Hugo Logo