DEV Community: Ande Caleb

My JS Tests..

Ande Caleb — Fri, 05 Aug 2022 12:35:05 +0000

My first steps to canvas animations after a long while, its still ongoing, with a lot of features yet undone..

~ https://lnkd.in/d3yumPWR - still under development,

I need opinions, what do you guys think... what should i do and shouldn't do...

~ I'd be awaiting responses in the comments section

GIT :: ignoring files/folders recursively

Ande Caleb — Mon, 01 Aug 2022 08:45:00 +0000

I had a folder for a particular set of Web Applications projects grouped together under one repository, instead of having separate repositories per project, below is my illustration.

lets say i had 5 web projects in one repository prefixed by _1, _2, or _3. and each of these projects have their individual dependencies inside the node_modules folder.

with just one .gitignorefile

repo/WebApp_1/node_modules/*/*/*.js
repo/WebApp_2/*/node_modules/*/*/*/*.js
repo/WebApp_3/*/*/node_modules/*/*/*/*/*.js
repo/WebApp_4/*/*/*/node_modules/*/*.js
repo/WebApp_5/*/*/*/*/*/node_modules/*/*.js

.gitignore  //just one gitignore file here.

I initially thought i could use the parent .gitignore file to restrict all node_modules directorys withing the sub directories.

After googling and i figured out that you could have each folder with its individual .gitignore folder to solve the issue.

repo/WebApp_1/ .gitignore
repo/WebApp_2/ .gitignore
repo/WebApp_3/ .gitignore
repo/WebApp_4/ .gitignore
repo/WebApp_5/ .gitignore

this approach worked for me, so i want to know if anyone has a better alternative and a centralized way of achieving this i would be glad to adhere to it.

Thanks.

EXPO vs CLI, Which is preferrable for building ReactNative Mobile Apps

Ande Caleb — Wed, 27 Jul 2022 16:41:46 +0000

*Background :: *

I am a FullStack javascript developer and i'm trying to maximise the application of javascript to every area of interest, from web(frontend & Backend), desktop and mobile application development and also TV apps in the future.

I Currently build web applications frontend and backend using Javascript, but i need to extend it to mobile devices because of this one issue. i used ionic in the past, but my love for react has made me adapt all my applications to the react-application structure.

*Problem *
I need your opinions on which is better with reasons, i tried Expo a while ago, and it had tons of advantages, but a lot of issues while building and running the application.

Even when i ran into certain issues i went online and most developers couldn't provide resources for all the issues mentioned, so i resorted to not using it except it had been fully proven.

I also saw opinions of other developers saying CLI is a bit cumbersome with its processes but most of the issues are based on the advantages when using Expo.

I need opinions from other developers on the WHY's if there's any of whether EXPO is better and if i should resort to it, or if CLI is better and if i should remain there.

Word to Array

Ande Caleb — Tue, 26 Jul 2022 14:53:00 +0000

a simple way to convert a String to an Array is by Spreading it... within the array brackets [ ... ] symbols, which is easier than using the String.prototype.split()

let str = 'Aminu Kano';

array = [ ...str ]; //break the array into letters.

This outputs an array of 10 elements. which becomes

[ "A", "m", "i", "n", "u", " ", "K", "a", "n", "o" ];

//same result can be achieved using the code below. 

str.split("");

but the latter seems much easier and cleaner

hope this helps..

Custom Dimensions HOOK for your React projects.

Ande Caleb — Mon, 25 Jul 2022 10:25:00 +0000

while working on a certain project, i needed to ensure that it was fully adapted to mobile, without any issue, and since i wanted to take 100% ownership of the application processes, i needed to in-my-own-way track certain changes per time, since this was key to the application.

I found several solutions online, most of which had its downside and i wasn't too impressed, so i decided it would be best to carve mine. Below is my code snippets that did the magic, which led me to building a custom-hook, i like the idea of Hooks(useState, useRef, useReducer, useContext++).. the simplicity in its implementation led me to utilizing its power in my best ability.

So, i went ahead to break my solution down as simple as possible in such a way as can be replicated to do solve other problems.

useWindowDimensions.jsx

import React, { useEffect, useState } from "react";

function getWindowDimensions() {
  const { innerWidth: width, innerHeight: height } = window;
  return {
    width,
    height
  };
}

export default function useWindowDimensions() {
  const [windowDimensions, setWindowDimensions] = useState(
    getWindowDimensions()
  );

  useEffect(() => {
    function handleResize() {
      setWindowDimensions(getWindowDimensions());
    }

    window.addEventListener("resize", handleResize);
    return () => window.removeEventListener("resize", handleResize);
  }, []);

  return windowDimensions;
}

*How you use it. in a custom component 'MyComponent' *

import React from 'react';
import useWindowDimensions from './hooks/useWindowDimensions';

const MyComponent = () => {
  ...... 
    const { width:w, height:h} = useWindowDimensions();
  ...... 
 return (
       <>
            <AnotherComponent width={w} height={h} />
       </>
  );
}

export default MyComponent

i hope this was really helpful..
let me know what you guys think.

My Portfolio created using React & GSAP

Ande Caleb — Sun, 24 Jul 2022 07:19:00 +0000

hello guys, i'm building my portfolio website using - React, GSAP & ThreeJS - at the moment i'm about to include THREE.js in the modal that appears, to render project details on the various techs...
i need someone to scrutinize it, what should i change or what can i do better . here it is :::

https:://www.andaeiii.co

---i'd be waiting for your comments section... #thanks.