DEV Community: Abdeldjalil Hachimi

Normalized User Interface (UI) for Frontend Developers Part 1

Abdeldjalil Hachimi — Sun, 01 Sep 2024 13:20:20 +0000

Normalized User Interface (UI) Design for Frontend Developers

As front-end web developers, it's important to understand the concept of normalized user interface (UI) design. This approach involves splitting software workflows across different screens, ensuring each screen focuses on a particular task. This simplifies the user experience by reducing confusion and making interactions more intuitive.

Key Concepts: Workflows, Screens, and Frames

When thinking about UI design, we often consider features, but for normalized UI, it's more useful to focus on:

Screens: These are pages or modals in a web application.
Frames: These are sets of UI elements that can be accessed simultaneously at a specific moment. They represent a subset of a screen's potential content.
Workflows: These are sequences of actions that users take, which might involve moving between different frames or screens.

Example: Link Navigation

Let's consider an example using links to better illustrate these concepts:

Workflow with Frames

Screen 1: The user starts on the main page, where they see a list of frequently asked questions (FAQs). Each FAQ is collapsed initially, displaying only the question. This state is a frame because it represents a subset of content on the screen.

Action: The user clicks on a question. This action reveals the answer within the same screen, transitioning to a new frame.

Action: The user clicks again to hide the answer, returning to the initial frame.

Workflow with Screens

Now, consider a different design approach using screens:

Screen 1: The user starts on the main page with a list of questions, but instead of expanding within the same screen, clicking a question navigates to a separate page that displays the answer.

Action: Clicking a question takes the user to a new screen (or modal), dedicated to showing the full answer.

Workflow Diagrams

Frame-Based Workflow Diagram: Here, each action changes the frame without navigating away from the screen.

Screen-Based Workflow Diagram: In this design, each action navigates to a new screen.

Conclusion

Using normalized UI design principles and visualizing them through workflow diagrams can make the interface more intuitive and user-friendly. Whether you use frames within a single screen or navigate between screens, the goal is to simplify the user experience and reduce confusion. Stay tuned for more insights on Normal UI design!

From Redux Saga to React Query

Abdeldjalil Hachimi — Thu, 24 Aug 2023 11:36:25 +0000

Last time I was responsible for refactoring React app project that was built with Redux Saga, Honestly That sucked!

Boilerplate code was everywhere, and the app complexity was very high.

You had to handle errors, loadings, data... everything manually.

Solutions like caching were also not available out of the box.

What I have done I used React hooks and React context as well as the outstanding library #React Query

It brought 4 benefits:

Less boilerplate code
Easy to implement and understand
Fetch, synchronize, update, and cache your remote data
No need to put your remote data inside the global state

If you are building a React app with:

Client-side rendering
Lots of server data to handle

Don't think more about it.

You have to use React Query.

It's a game-changer!

Migration to TypeScript Advice

Abdeldjalil Hachimi — Wed, 05 Jul 2023 17:30:10 +0000

For large projects, it is recommended to adopt a gradual transition where TypeScript and JavaScript code will initially coexist. Only small projects can be migrated to TypeScript in one go.
The first step of this transition is to introduce TypeScript into the build chain process. This can be done by using the "allowJs" compiler option, which permits .ts and .tsx files to coexist with existing JavaScript files. As TypeScript will fall back to a type of "any" for a variable when it cannot infer the type from JavaScript files, it is recommended to disable "noImplicitAny" in your compiler options at the beginning of the migration.
The second step is to ensure that your JavaScript tests work alongside TypeScript files so that you can run tests as you convert each module. If you are using Jest, consider using ts-jest, which allows you to test TypeScript projects with Jest.
The third step is to include type declarations for third-party libraries in your project. These declarations can be found either bundled or on DefinitelyTyped. You can search for them using https://www.typescriptlang.org/dt/search and install them using

npm install --save-dev @types/package-name or yarn add --dev @types/package-name.

The fourth step is to migrate module by module with a bottom-up approach, following your Dependency Graph starting with the leaves. The idea is to start converting Modules that do not depend on other Modules. To visualize the dependency graphs, you can use the madge tool.
Good candidate modules for these initial conversions are utility functions and code related to external APIs or specifications. It is possible to automatically generate TypeScript type definitions from Swagger contracts, GraphQL or JSON schemas to be included in your project. as well as you can use website called https://quicktype.io/ to generate types and interfaces in order to user them in your tsx or ts file.

When there are no specifications or official schemas available, you can generate types from raw data, such as JSON returned by a server. However, it is recommended to generate types from specifications instead of data to avoid missing edge cases.

During the migration, refrain from code refactoring and focus only on adding types to your modules.

The fifth step is to enable "noImplicitAny" which will enforce that all types are known and defined, providing a better TypeScript experience for your project.

During the migration, you can use the @ts-check directive, which enables TypeScript type checking in a JavaScript file. This directive provides a loose version of type checking and can be initially used to identify issues in JavaScript files. When@ts-check is included in a file, TypeScript will try to deduce definitions using JSDoc-style comments. However, consider using JSDoc annotations only at a very early stage of the migration.

Consider keeping the default value of noEmitOnError in your tsconfig.json as false. This will allow you to output JavaScript source code even if errors are reported.

Resource
Link

What are different between Normal Copy and Shallow Copy, Deep Copy in JavaScript Object

Abdeldjalil Hachimi — Mon, 17 Apr 2023 22:57:51 +0000

Hello everyone, I hope you are doing great.

today I would like to explain the different between

Normal copy in JavaScript Object
Shallow copy in JavaScript Object
Deep copy in JavaScript Object

Note : In JavaScript objects are passed and assigned by reference (more accurately the value of a reference)

let's start first with Normal copy in JavaScript Object

Normal copy in JavaScript Object

in short, When you change the original object's properties, the copied object's properties will change too (and vice versa)

let's make an example :

// Normal copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria"
};

const newPerson = person;

/*
Now if we make a change in
newPerson object
will directly change 
in preson Object 

*/

newPerson.country = "Canda"; // also updates person.country

console.log(newPerson); // {name: "Abdeldjalil", country: "Canda"}

Shallow copy in JavaScript Object

in short, Top level properties will be unique for the original and the copied object. Nested properties will be shared across both objects though. Use the spread operator ...{} or Object.assign()

let's have an example for more understanding

// Shallow copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria",
  job: {
    category: "web developement",
    profession: "Front-End Web Developer"
  }
};

const newPerson = { ...person };

/*

Now if we make a change in
Top level properties in newPerson object
will not  change 
in preson Object 
but if we make change in Nested Properties in this case 
Job property  will change 

*/

// top levele property
newPerson.name = "John Dev"; // will not updates person.name

// Nested  property
newPerson.job.profession = "Backend Devloper"; // also updates person.job.profession

console.log(newPerson); `// {name: "John Dev", country: "Algeria", job: Object} name: "Abdeldjalil" country: "Algeria" job: { category: "web developement" profession: "Backend Devloper"}}`

console.log(person); `// {name: "Abdeldjalil", country: "Algeria", job: Object} name: "Abdeldjalil" country: "Algeria" job: { category: "web developement" profession: "Backend Devloper"}}`

Deep copy in JavaScript Object

in short, All properties are unique for the original and the copied object, even nested properties. For a deep copy, serialize the object to JSON and parse it back to a JS object.

let's make an example about it

// Shallow copy  in Js Object

const person = {
  name: "Abdeldjalil",
  country: "Algeria",
  job: {
    category: "web developement",
    profession: "Front-End Web Developer"
  }
};

const newPerson = JSON.parse(JSON.stringify(person));

/*

Now if we make a change in
Top level properties in newPerson object
or even in nested  properties will not change 
in preson Object 

*/

// top levele property
newPerson.name = "Setiv Smith "; // will not updates person.job.profession

// Nested  property
newPerson.job.profession = "Fullstack Devloper"; // will not update  person.job.profession

console.log(newPerson); `// {name: "Setiv Smith ", country: "Algeria", job: Object} name: "Setiv Smith " country: "Algeria" job: { category: "web developement" profession: "Fullstack Devloper" }`

console.log(person); `// {name: "Abdeldjalil ", country: "Algeria", job: Object} name: "Setiv Smith " country: "Algeria" job: { category: "web developement" profession: "Front-End Web Developer" }`

Thank you for reading this Article and I am waiting for your feedbacks

How to use Google Maps Places Autocomplete with React JS

Abdeldjalil Hachimi — Thu, 13 Apr 2023 23:07:02 +0000

Hello everyone, I hope you are doing.
today I would like to explain how to use google maps places autocomplete without any libraries or npm's packages and headache 😂 so that let's get started

Setup and Installing React JS

let's do it very quick just follow the steps I suppose you have some background how to do so

the first thing you have to do in index.html after setup the project is that



<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title> React js with Google Map AutoComplete </title>
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>

**    <script
      src="https://maps.googleapis.com/maps/api/js?key="your-api-key"&libraries=places&callback=initMap"
      async
    ></script>**
  </body>
</html>

after that create a component for Map using the library @react-google-maps/api



import React, { useState, useCallback } from 'react'
import { GoogleMap, Marker, useJsApiLoader } from '@react-google-maps/api'


const mapStyle = { 
    height: '300px', 
    width: '100%'
 }



const Map = () => {
    const DEFAULT_ZOOM = 5
    const { isLoaded } = useJsApiLoader({
        id: 'google-map-script',
        googleMapsApiKey: "your-api-key"
    })

    const [map, setMap] = React.useState(null)
    const [markerPosition, setMarkerPosition] = useState({
        lat: 28.0289837,
        lng: 1.6666663,
      })

    const [defaultLocation, setDefaultLocation] = useState({
        lat: 28.0289837,
        lng: 1.6666663,
      })

    const onLoad = useCallback((map)=> {
        const bounds = new window.google.maps.LatLngBounds({
            lat: 28.0289837,
            lng: 1.6666663,
          });
        map.fitBounds(bounds);
        setMap(map)
      }, [])

      const onUnmount = useCallback(() =>{
        setMap(null)
      }, [])


    const handelClickOnMap  = ()=> {

      }
  return (
    <div>
     {
        isLoaded ? (
        <GoogleMap
        onLoad={onLoad}
        center={defaultLocation}
        zoom={DEFAULT_ZOOM}
        mapContainerStyle={mapStyle}
        onClick={handelClickOnMap}
        onUnmount={onUnmount}
        >
           <Marker position={markerPosition} />
        </GoogleMap>
        ) : <></>
     }  
   </div>
  )
}

export default Map

after that import Map component in App.jsx file
and now let's create our input for search for places with autocomplete (suggestion places)



    import { useRef, useState } from 'react'
import MapView from './components/Map'


function App() {

  const inputRef = useRef()
  const inputStyle= {
    boxShadow: 'inset 0 0 10px #eee !important',
    border: '2px solid #eee',
    width: '456px',
    height: '40px',
    marginLeft: '16px',
    borderRadius: '20px',
    fontWeight: '300 !important',
    outline: 'none',
    padding: '10px 20px',
    marginBottom: '10px',
  }


  const autoComplete = new window.google.maps.places.Autocomplete(
    inputRef.current,
  )


  autoComplete.addListener('place_changed', () => {
    const place = autoComplete.getPlace()
    if (!place.geometry || !place.geometry.location) {
      // User entered the name of a Place that was not suggested and
      // pressed the Enter key, or the Place Details request failed.
        alert("this location not available")
    }
    if (place.geometry.viewport || place.geometry.location) {
        // do something
        console.log(place.geometry.location)
    }
  })
  return (
    <div className="App">
        <label >Location</label>
        <input
          placeholder='type your location'
          ref={inputRef}
          style={inputStyle}
        />
      <MapView/>
    </div>
  )
}

export default App

and voila here it is the result 😁

Finally, Thank you for reading this post I will glad to hear your feedback.

Github repo for code source

https://github.com/abdeldjalilhachimi/react-google-map-autocomplete

How to use absolute Imports using React with Ts and Vite

Abdeldjalil Hachimi — Fri, 04 Feb 2022 16:54:46 +0000

today I am going to talk about How to use absolute Imports using React with Ts and Vite

as you can see here I am using ... to find the path of components in order to use them, it looks fine since I do not have deep path.

to sum up in order to avoid it you can easily use this in your
tsconfig.json

"compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "~/*": ["./*"]
    },
}

and after that go to vite.config.ts

  resolve: {
    alias: {
      '~': path.resolve(__dirname, 'src'),
    },
  },

and it's done

Thanks for reading this article and if you have any suggestions you are welcome