DEV Community: Amine

I built a portfolio and would love to hear your feedback!

Amine — Mon, 31 Jul 2023 12:32:34 +0000

Hello everyone!!
Three years ago I posted about my new portfolio as a new grad. Now I'm building a new one to showcase the experiences I had during these three years as a front-end engineer. I also developed a passion for design and I haven't had the chance to incorporate it into a project yet. So this is my first public project in which I showcase my design work. I would love to hear your thoughts on the direction of the portfolio and any areas that I could improve upon. Your feedback is greatly appreciated! Thank you in advance!

Portfolio: http://aminejv.com/

The Story Behind My First Project.

Amine — Mon, 27 Jul 2020 07:53:43 +0000

Building a project is great. You learn a lot, you make friends, and hopefully, it helps to solve a certain problem for certain people. But behind every project, there is a story of how it comes to reality. Today I'll tell you a story of Gfree ( a gluten-free community ) I built with my friends.
Back in the spring of 2018, we started learning web at my university, it was a fresh air from the algorithms and math. I started experimenting with CSS, a lot of it, my friend noticed my passion and suggested maybe we should do a project together.
Fast forward to the beginning of summer, things weren't going well for me, I had a breakdown over some health issues (till this article only my family knew about it). I was diagnosed with chronic depression, those were sad days. During the first days of recovery, I had a huge urge to learn something, add to that a happy accident happened when video of Sarah Drasner popped in my recommendation. I was hooked, that's it web development is my new adventure. I spend July of that year searching for what the big boys in web development using. I came across web frameworks, I almost started Angular but the React framework popularity was so huge to ignore so that's it, React it is. While hanging out with my friend, we agreed that we should start a project. There were a lot of ideas but since I have celiac disease, I convinced him that it has to be something related to the gluten-free world, he agreed.

First Try

With a bad degree in the design course, and web fundamentals (HTML, CSS, Jquery) and the ambition to learn React and a friend, it was time to build a project. I assigned to my friend to learn firebase. I first started prototyping some interfaces I mean it can't be hard right, little did I know that designing a good interface is a whole another world. It wasn't easy to satisfy my taste when it was influenced by Dribbble designs. So let me show you the first prototypes.

Everything is screaming for attention, there is no emphasis, colors are so strong for such a community. It's a mess, I realized that summer that I needed to improve my design knowledge and that's exactly what happened. I spent that summer learning the design principals and experimenting. Also, my mental health improved a lot during this time. The medication helped me remove the anxiety and void I felt, it ignited my desire for learning. Gfree has been in the shadows for a few months due to university.

University.

2018/2019 is my bachelor year, since I'm doing better I had to focus on my studies. I improved a lot, all the stuff I learned during summer gave me huge confidence. Actually it was overconfident. We still discussed Gfree, we decided we should also make users write their stories, their experience. During the end of the first semester holidays, we made another try. This time we decided to jump into code directly. How hard can it be? it's an interface and some dynamic content. Here is the result.

Since I didn't design, things got out of control, it was hard to keep things consistent. Also my overconfident in my React skills drove me blind, there is more to the Javascript world than React.

The code became very complex, this was an eye-opening, front-end work isn't easy. It still requires all cs things I learned. It's not just HTML and CSS.

We learned that we need to design the interface, design the system. Create a management framework to follow. It was a lot of work we decided to delay it till we finish university.

During that year I meet a new friend, he's was interested in working with us, and so it was. Also, we all got our computer science bachelor's, good times.

The building of Gfree.

2020 has been such a year, fortunately, we managed to get a freelance job. We learned a lot and we finally were ready to work on Gfree fulltime.

We designed the system behind Gfree, we made sure we have concise requirements, and the same shared model between the frontend and backend. This wiki came handy in keeping the project consistent.

UI/UX Design

I and @dinasso1 worked on the UI/UX design. We first started by choosing a color palette. It has to convey calmness for users, that was our main goal.

In Figma, as naming convention, we chose color+shade so for primary color, we had primary100 -> primary900 and primary is the darkest variation of the color. This came very handy in the development.

For Typography we built a system with Inter font.

The naming convention in the typography system also came very handy. It made the development of the UI more robust.

This is how the design file made by two newbie designers

I'm proud of the job we have done, it's not perfect and probably never will be. This how we learn, from our imperfections amiright ?

Stack used

NextJs
Styled-components/xstyled
Typescript
Redux
Formik
SlateJs

Frontend

One of our website requirements was SEO, and client-side react isn't suitable for that case. We also need Opengraph previews. NextJs solved those issues, and its routing system made everything super intuitive. NextJs is so awesome it requires its own article ( maybe next one ?).

When it comes to CSS, it depends on preference, we like styled-components so we used it. On top of it, we used xstyled. It made our life 10 times easier. Remember the naming conventions we had in Design. We could use it directly in styled syntax with xstyled.

import {styled} from '@x-styled/styled-components'
const Button = styled.button`
    background-color: primary100; /* This is awesome */
    ${h100} /* This how we used our typography system*/
`

State management

For state management, we went with Redux. But if you have used it before, you'll know it has a lot of boilerplate. More code, more things to maintain. Fortunately for us, I've experimented with Rekit before and I loved the way they architected their redux code. A bit of googling led me to the Ducks pattern.

Ducks pattern is a modular way to organize your redux code, it has a few rules.

*1. MUST export default a function called reducer()

MUST export its action creators as functions

MUST have action types in the form npm-module-or-app/reducer/ACTION_TYPE

MAY export its action types as UPPER_SNAKE_CASE, if an external reducer needs to listen for them, or if it is a published reusable library*

You can learn more about it here.

While this pattern made reading and managing the code easier, we still needed a way to generate the code as Rekit did.

We tried a code generation tool called Hygen. It did work fine for generating code. But when it comes to updating code, it didn't work. Hygen relies on regular expressions to update the code, it's hard to work with it when you format your code with prettier. It was unpredictable.

So I searched for a way to update the code using AST, here I come across Babel. Babel is huge, I used this awesome handbook to get familiar with it. It took a while but I'm proud of learning it.

Learning AST unlocked a lot of new doors for me. I can write a Babel plugin. I can even create my own custom Eslint plugins if needed.

Aminejvm / typescript-redux-generator

Generate Actions and Reducers based on Duck method

@t7m/redux-generator

Generate Actions and Reducers based on Duck method

[](https://github.com/Aminejvm/Typescript redux generator/blob/master/package.json)

Usage

$ npm install -g @t7m/redux-generator
$ redux COMMAND
running command...
$ redux (-v|--version|version)
@t7m/redux-generator/0.0.2 win32-x64 node-v10.16.3
$ redux --help [COMMAND]
USAGE
  $ redux COMMAND
...

#First command is to initialise Redux boilerplate (./redux)
#You can then get rootReducer from ./redux and integrate it in your config
redux init

#Second you need to create a Feature to contain reducers and actions.
redux create --f (name of feature)

#Create a synchronous action
#You'll get prompt with existing features to choose from. 
redux create --a (name of action)

#Create a asynchronous action
# You'll get prompt with existing feature to choose from.
redux create --async (name of async action)

View on GitHub

Components architecture

Our solution is a bit hybrid, we took what we liked from different concepts.

Atoms define the components that have one and only one task. (Button, Headings, Fields...).

I've made this concept explaining each Layout component.

I noticed repeated layouts across many components, I think we could add Patterns (the composition of layouts components ). That for sure will reduce some of the boilerplate.

We try our best to not use margins within non-layout component styles. We only use margin in the Layout components. What may look like a small non-significant change to you, actually removed many undesired CSS bugs.

Backend

Things in the backend were straight forward. Controllers handling database queries. Authorization middleware to handle signing and signup operations. Endpoints handling requests from the frontend.

Stack used in the backend

NodeJs
ExpressJs
PassportJs
MongoDb
Jest → For testing. For DevOps, my friend took care of hosting and file storage solution.

Lessons Learned

Building a project is no easy task, it requires thoughtful and consistent execution. Trying to cut things off just to speed up has the complete opposite effect, it slows the project drastically. It also leads to technical debt, we learned this the hard way. Hacky solution may meet the requirements now but for sure will introduce many challenges in the future.

Going slow and smooth increase the project speed and reduce the bugs anxiety.

// Detect dark theme var iframe = document.getElementById('tweet-1285990487736725504-233'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1285990487736725504&theme=dark" }

What's next for the project and us as developers.

For the project, we need to discuss marketing strategies, we also have many features in mind. This is our learning playground. We will experiment with new features regularly.

For me and my friends, this project allowed us to prove that we can build things. Getting a job after graduation as a junior developer is a hard task, and this pandemic made it even. Hopefully, this project shows our competence and enthusiasm. SOOOO if your company is hiring a React developer I would love to be part of it.

So here is Gfree. I would love to hear your feedback.

Cool stuff with Typescript

Amine — Mon, 20 Jul 2020 12:40:40 +0000

Last year I started working with JavaScript as my main language. It was a fresh experience coming from C# and Java. But after a while I've got annoyed with Type errors, while Eslint helps to avoid typos, types weren't its thing. Add to that the cognitive load it comes from remembering every function argument. I understand that naming can help, but a little bit. Typescript fixed these both issues for me, now I don't need to worry about a React component prop or function.

Typescript also has great support in Vscode, spotting errors while coding. It also highlights types for easy scanning. Okay enough hype, for now, time to explain what I learned in past months.

Building Blocks

This article won't go into typescript basic syntax nor fundamentals. I recommend you check the following articles on Dev.to:

Notes on TypeScript: Fundamentals For Getting Started by A. Sharif

TypeScript Tutorial: A step-by-step guide to learn TypeScript by Educative

Union Types

Union Types reminds of the Or operator, it takes multiple types and only returns the need one. Let's see an example to better understand this.

Sometimes we need a function that takes as a parameter either a number or a string. We can do this with any but c'mon now this is easy, only hardcore situations require any.

Instead, let's use type unions

const complexFunction = (paramter: string | number) => {//code here.};

We can use this with predefined types, let me explain by an example. We may currency type and we only support USD, EUR, and GBP.

type Currency = 'USD' | 'EUR' | 'GBP';

Now any variable that assigned to this type, can be only one of those threes. Thus decreasing the chance of accidentally assigning the wrong value.

Intersection Types

An intersection type combines many types into one. This comes handy when we want to compose existing types into a new one.

Let's say we have an engine type, and color type. We want to create a car type using these types, let's implement this

type Author = {name: string, group:string}
type Admin = {name:string, privilege: string[] }

type User = Author & Admin; //{ name: string, group: string, privilege: string[]}

This is super intuitive, but make sure the similar properties of types have the same type.

type A = {points: string}
type B = {points: number}

type C = A & B //Will throw an error since points properties have different types.

This comes up a lot when working with React. by combining your custom props with element predefined ones.

type Props = {
  color: string;
};
const Button: React.FC<Props & React.HTMLAttributes<HTMLButtonElement>> = ({
  children,
  style,
  color,
  ...props
}) => (
  <button style={{ ...style, color }} {...props}>
    {children}
  </button>
);

// later
<Button color="red" onClick={()=>{}} >Click Here</Button>

Never

Never type is a crazy one, Typescript documentation defined it like this:

The never type represents the type of values that never occur.

From the definition, Never type indicate that a value never occurs, not even undefined.

let's see some examples

const OneFunction = (param):never=> { // Will throw an error, since it returns undefined
    console.log(22)                     // But we said it should never return.
}  

const SecondFunction = (param):never => {
    while(true){ // Now you see we never returns anything.
    }
}

const Third Function = (param):never => {
    throw new Error('Shit happens man.')
}

We can notice two patterns from the above example. We should use never type if the function continues to run forever or if it breaks the execution. We can use never to write custom error handlers. Let me know of more use cases, I haven't used never that much.

Type Assertion

With type assertion, we can tell Typescript, yo bro this is the type of this variable you don't need to infer it. Typescript knows that you know better in this situation, so it behaves and does the job.

let a:any= 213 // this is assigned to 'any' type.
let b:number = a as number // using the as keyword, we can assert typescript
                                                     // is for sure a number

We can also use type assertion to make a variable immutable.

let a = {name:"alex", age:10}
a.name = "Jhon" // expected behavior

let b = {name:"alex", age:10} as const;
b.name = "jhon" //Typescript compiler will yell at you for mutating it.

Unknown

Unknow is a better solution than any. Unknown typed variables can't be assigned to anything, but we can assign it to other variables.

Okay time for examples

let a:unknown
let b:number = 5

a=b // works.
b=a // Throws an error.

We can handle the unknown type by two ways, narrowing it or with type assertion.

let a:unknown;
let b:number = 5

if(typeof a === 'number'){
    b = a // it works
}
b = a as number;// it works too.

Mapped Types

The mapped type takes an existing type and maps its properties to a different type.

const Type<T> = { [P in keyof T]: P }
                                    //Keys         //Types

I'd like to read it as for every P (property) in keyof T (Properties of Type T) : give it this type.

The keyof operator indicates that we're looking for all properties of type T.

We can use Mapped types for all magical stuff, we can create a Partial Type, Required Type, and lot more.

type Partial<T> = {
  [P in keyof T]?: T[P];
    // Keys of T     type of each property
};

type Required<T> = {
  [P in keyof T]: T[P];
    // Keys of T     type of each property
    // The absense of ? means that every property is required in this Type.
};

type Pick<T, K extends keyof T>= {
    [P in K]: T[P]
    // P = Properties Selected assigned to generic variable called K
}

// Examples
type User = {
    name: string,
    email: string,
    age?: number
}

let user:User = {name:"Alex", email:"example@test.com"} // Works fine.

let partialUser:Partial<User> = {} // Works fine, since all properties are not required.

let requiredUser: Required<User> = {name: 'Alex'} // throws an error, name and age are required.
requiredUser = {name: "Alex", email: "example@test.com" ,age:12} // Works fine.

let userContactInfo: Pick<User, 'name' | 'email'> = {age:23} // Error. We only picked name and email properties.
userContactInfo = {name:"Alex", email:"example@test.com"}

Typescript has these and other mapped types built-in. Learn more about it in Arthur Vincent Simon's article Typescript Utility Types.

Conditional Types

Conditional type can a bit tricky at first, it's quite difficult to see a use case for it. First, let's see a problem that it fixes.

We have a function that takes either a string or null and return string or null. If we pass string we want it to return a string, otherwise null. It seems quite intuitive for Typescript to infer it.

const toLowerCase = (str:string|null):string|null => str ? str.toLowerCase() : null;]
const name = toLowerCase('Alex') // name is a string or null

It was surprising at first this didn't work not gonna lie, maybe the Typescript team should use that GPT 3 thingy. It seems promising.

Anyway, this is a great problem where conditional types shine.

const toLowerCase = <T extends string | null>(
  str: T
): T extends string ? string : null => str ? str.toLowerCase() : null;
//Throws an error 
//Type 'string' is not assignable to type 'T extends string ? string : null'.
const name = toLowerCase('Alex')

Well sike it didn't work, I know it's disappointing apparently TS can't type-check the return value of functions with conditional return types defined in terms of type parameters.

Issue link at github.

For this use-case, we can work with function overload.

function toLowerCase(str: null): null;
function toLowerCase(str: string): string;
function toLowerCase(str: string | null): string | null {
  return str ? str.toLowerCase() : null;
}

const res = toLowerCase(null) //null
const res = toLowerCase('Alex') //string

Not perfect but it got the job done. I'm looking forward to your opinions about how to deal with this issue.

Tricks I learned in the way.

Type Guards

Type Guards comes handy when you want to narrow a type, you probably already know the typeof operator in Javascript. Its actually used as type guard as well when using Typescript.

const logString = (a: unknown): void  =>{
  if(typeof a==='string'){
    console.log(a) // a is infered as string thanks to the guard we wrote.
  }
}

we can also define our custom type guard.

type Car = {
  engine: string;
};
const tesla = {
  engine: "electric"
};

const isCar = (car: Car): car is Car => {
  return  typeof car.engine === "string";
};

if (isCar(tesla)) {
  console.log(tesla.engine); // 'electric' and tesla is a car in this block.
}

Derive Types from Constants

I'm stealing this idea from this awesome talk. By defining a const variable, we can derive types from it. We have an Icon system, we can easily derive its type thus decreasing the overload of updating the type each type a new icon is added

const Icons = {
    twitter: ()=>//..,
    github: ()=>//..
    devto: ()=>//..
} as const

type Icon = keyof typeof Icons // "twitter" | "github" | "devto";

Using comments with Types

I always pray for developers when they provide a definition of what an argument or property is intended to do. A comment per type makes me jump from hype. It also removes the factor of assumptions.

type Car = {
    /** It powers the car.  */
    engine: string,
    /** Timer for self-destruction. Starts during launch.  */
    selfDesruct:number
}

const getCar = (car:Car)=>{}

Where do I find Types for Third party libraries

Usually libraries have Typescript support, but if not, google your library + @types and hopefully you'll find it.

You can follow me on twitter @AmineJv ( I'll start tweeting soon, it's about time till I rise from the ashes.)

Pure Functions with Typescript

Amine — Wed, 29 Jan 2020 13:39:45 +0000

I’ll use this article to illustrate how Typescript can hold us accountable for writing pure functions.
for this purpose Let’s introduce the following types for a small cart system:

type Product = {
 title: string;
 quantity: number;
 price: number;
}
type Cart = {
 totalPrice: number;
 products: Product[];
}

What is a function

In programming, a function encapsulates a chunk of code to do a specific task. when a function is called, the javascript engine creates a new execution context and starts to execute any code inside, Thus a function is a mini-program.
Why we need pure functions?
so we know that functions are mini-programs, wouldn’t it be nice if our programs were reliable, always working as intended. Pure functions give us these benefits, they assure consistency across the program, also since for the same inputs it will return the same outputs, this allows easily to memoize them. If you want to learn more about its benefits I highly recommend you checking Alvin Alexandr post.

Pure Functions must return a value

Our pure function should always return a value, this includes ‘undefined’, other ways it will be a procedure. let’s use an example to better understand

function checkQuantity(product:Product):void{
 if(product.quantity > 0){
   console.log(true)
 }else{
   console.log(false)
 }
}

This a function that takes product as an argument and returns nothing, but it logs to console the value.
To make this function pure, we need to return a value Typescript will help us make sure we do that.
Immediately after changing the return value to “boolean” Typescript is angry at us that we didn’t return anything. so Let’s fix it

Even after returning in the first condition, Typescript doesn’t take that for an answer so w need to make sure it returns a value in every condition.

now that we fixed it, Typescript is happy, and we good our function is pure but still, something is missing.

Function Naming Semantics

To make our function comprehensible, it should have a name that describes its purpose, for our function checkQuantity doesn’t really mean anything, the purpose of our function is to see if a product has any quantity left. A proper name is to check would be isQuantityNotEmpty but that’s too specific it would be nice if we adjust our function and name it isQuantityEmpty. Okay, let’s clean our function.

Our function now is now and pure, and Typescript makes using it even more fun, it describes the input and output.

Side Effects

To make it clear side effects are cool, to make a program actually usable there has to be a side-effect. As cool as it is, it’s hard to track its behavior, and we said pure functions got consistent behavior, first, we need to understand what is a side-effect.
A side-effect is a function that interacts with the external world, writing to a database, changing the value of variable outside of its context, logging to console, changing the dom…
But using a constant outside of a function is not a side-effect, since a constant is a value that won’t change, and constant are used all over the place in math, so why can’t we use them.
We can use the keyword const to assure that primitives won’t change its value, but an object can change and that’s a problem, we need to find a way to make sure it never changes and this is where Typescript shine again, let’s see how to make objects constants.

Using const assertions, we can make sure that the const won’t ever change no matter what its value is.

//Objects
const product: Product = {
    title: “Awesome Car”,
    quantity: 32,
    price: 2990
} as const
product.title = "Awesome Camera"
/**
* Following error is printed
* Cannot assign to 'title' because it is a read-only property.
*/

product.currency = "USD"
/**
* Property 'currency' does not exist on type 'Product'
*/

This can also apply to arrays as well.
The takeaway from this section is our pure function shouldn’t have side-effects otherwise, it’s not pure anymore.

I made a portfolio! Feedbacks are welcome

Amine — Mon, 20 Jan 2020 13:30:59 +0000

I made a portfolio to improve my chances of getting hired, it's pretty minimal highlighting the things I've done so far.
I would love to get feedback on things that I can improve on, also things that are annoying.

The website is made using nextJs, x-styled and react-spring. Designed using Figma, Hosted on now.sh.

https://portfolio.elouartinra.now.sh

How did you kickstart your career?

Amine — Sat, 04 Jan 2020 17:16:26 +0000

Hello fellow devs, I come to you in time of a great need.
I have no idea how to start my career, I took my cs degree, I love what I'm doing but I feel like I'm running around like a headless chicken.
It's hard to get to interviews without experience, also working on my personal projects is really fun but it doesn't pay the bills.
I know I sound like I'm just making excuses and probably I am, but I'm wondering how you guys got your first job?

Typescript is actually amazing.

Amine — Tue, 31 Dec 2019 10:31:10 +0000

I appreciate JavaScript's versatility and the speed it offers when developing software. However, this speed comes with tradeoffs, and one of the core tradeoffs, similar to that of any dynamic language, is the absence of a type system. I often find myself jumping between files to ensure I'm adhering to the correct function signatures, which increases cognitive load. Additionally, I've felt a sense of uncertainty about how well my software is functioning due to the frequent TypeErrors I encounter.
To address this issue, I had two solutions to choose from: Flow by Facebook and TypeScript from Microsoft. I opted for TypeScript due to its large community and rich ecosystem.

TypeScript to the rescue

I heard about typescript a long time ago honestly, and I kept ignoring it. I had lot of misconceptions about it. I thought it was a language on its own, more oriented towards OOP, and it’s like java but for web devs. After watching Jake Ginnivan talk about how amazing modern typescript is, I was sold and started learning about it immediately. Today I’ll share with you some of the concepts I liked about it.

All that said, I may be off on something and would highly appreciate any criticism. This is my first time deciding to share something with the world, so your help will allow me to improve, Thank you, now let’s move on to the real business.

What is it tho?

I like to think of typescript as a shield for javascript, you add types and you can capture early those errors in the editor ( I use Vscode. ) and you get also free IntelliSense which boosts your productivity, and It makes working with high-level APIs more efficient.

Here we have a function that takes id as a number and returns the home address as a string. Typescript will make sure you’re respecting the rules each time you call this function.
This rule applies to variables and classes too.
One sidenote, Typescript infers the types correctly most of the time, so you don’t need to write types for obvious types.
you can learn more about type inference here:
https://www.typescriptlang.org/docs/handbook/type-inference.html

Magical features:

Type Queries:

We know the typeof operator is used in javascript to return the type of its operand, in Typescript the keyword typeof is very different, let’s see how:

 const house = { id: 34345, address: " 3B Col, 90000 ",members: 4 }

Copy and paste this code in .ts file, you will see that typescript inferred { number, string, number } as the type of the house, and that’s what I want, we can easily get that type with the typeof keyword.

const house =  { id: 34345, address: " 3B Col, 90000 ",members: 4 };
type House = typeof house;

Nice! now we have a house type that we can use in our code.

Type Lookups

We all work with objects a lot, let’s say we want to write a function that we pass in an object and key to get a value:

function getProp<T>(obj: T ,key: string){
  return obj[key]
}

but the problem with this is typescript can’t figure out the returned value, it will be a type of any and we don’t want that, but there is a way we can use to make sure typescript knows the returned value as well as what type of keys can we pass in.

The keyof operator

Let’s stick with the house object and build upon it.

const house = { id: 34345, address: " 3B Col, 90000 ",members: 4 }
type House = typeof house;

we can type the the keys of an object using keyof

type HouseKeys = keyof House;  // "id" | "address"| "members"

if you still find yourself confused by my explanation I highly recommend you to check Marius Schulz blog about it.

Let’s rewrite our function now,

function getProp<T, P extends keyof T >(obj: T ,key:P ){
  return obj[key]
}

we can pass T[P] as returned type but typescript is clever enough to figure that out. Now our returned value type, our key is also typed and we can get sweet IntelliSense as a bonus.

I hope this article helped you in any way, and please leave your opinion about what I should improve on, I’m a little bit anxious about its structure, but I promise I’ll get better at it.

Learn more about Typescript

TypeScript Evolution by Marius Schulz.
TYPESCRIPT: How I Learned To Stop Worrying And Trust The Compiler

I'll share more resources once I find them.