Forem: Mohamad Kalaaji

React Context is good enough

Mohamad Kalaaji — Sat, 20 Jun 2020 20:19:57 +0000

I'm a heavy Redux user and quite a fanboy of the library itself as well to a point I also dabbled into Redux Toolkit which is the Redux's team opinionated way of using the library efficiently and tried it out by using it on a production application. (I took the risk but hey! things went well!)

Redux's advantage points

It is a solid state manager for React. It works out of the box and does everything that you expect from it to do not to mention that it is configurable with various plugins created by the community to make your work easier as well.

Redux's disadvantage points

A lot of people talk about Redux's setup that they have to write a good amount of boilerplate code to make it work, although that is true it is solvable when using Redux Toolkit since it offers a preconfigured setup with redux-thunk and setup with the Redux DevTools extension out of the box.

My biggest issue with Redux is that using other library's hooks is quite a pain, take an example of React Toastify library which offers a hook to show a toast on your website (a small popup). If I want to use that library along with Redux then either I have to pass it along with my dispatch function or create a Context component that uses the useSelector hook inside of it and use that hook to make a popup when a user inserts wrong information (or maybe I have been using Redux incorrectly and I have found a proper way to handle this situation)

Why not use Context in the first place?

Come to think of it, React does offer a decent amount of hook functions that do the job as expect and the best part: you don't have to install other libraries for state management since you already have one built-in for free!

The best part about Context is that you get to use all of React's cool features out of the box and use other hooks inside of it without any issue at all.

The worst part is that you will have to manage multiple Contexts inside of your app (you could use one Context just like what Redux does but I prefer to split things down into small manageable chunks).

A small example

Here I will be offering a small example using React Native and React Navigation to check whether a user is logged in or not

import React, {useState, useEffect, createContext, useContext} from 'react';

import AsyncStorage from '@react-native-community/async-storage';

import {useNavigation, CommonActions} from '@react-navigation/native';

const checkIfLoggedIn = async () => {

    const token = await AsyncStorage.getItem('token');

    if(token !== null) {

        return true;

    }

    return false;

}

const flushToken = async () => {

    await AsyncStorage.clear();

}

export const AuthContext = createContext(null);

const AuthProvider = ({children}) => {

  const [authorized, updateAuthorization] = useState(false);

const navigation = useNavigation();

useEffect(() => {

    checkIfLoggedIn().then((response) => {

      if (response) {

        navigation.navigate('App');

        updateAuthorization(true);

      } else {

        navigation.navigate('Auth');

      }

    });

  }, [authorized]);

const logout = async () => {

    await flushToken();

    navigation.dispatch(

      CommonActions.reset({

        index: 0,

        routes: [{name: 'Auth'}],

      }),

    );

    updateAuthorization(false);

  };

return <AuthContext.Provider value={logout}>{children}</AuthContext.Provider>;

};

const useLogout = () => {

  const context = useContext(AuthContext);

  if (context === null || context === undefined) {

    throw new Error('useLogout must be inside of the AuthProvider');

  }

  return context;

};

export {AuthProvider, useLogout};

The code does the following

When the user opens the app, it checks if there is a token saved in the device's localStorage first. If there is a token then it navigates to the App Stack, if not then it takes the user to the Auth Stack so that they can sign up or log in.

Inside that Context is a logout function which what it does is that it sets the authentication state to false and triggers the useEffect hook which navigates the user back to the Auth Stack and removes the previous history so that they don't go back (some Android phones have a back button, if you didn't clear your navigation stack then they can go back to the App Stack even though they are logged out) and deletes your token from the phone.

I also created a useLogout hook which lets me to logout in any component that is encapsulated within that AuthProvider component (handy for later use) which relies on the logout function that is inside of my AuthProvider (inside of my AuthContext).

See that I have relied on useNavigation, a hook from the React Navigation library and it was easily integrated inside of my application.

You can do all of this in Redux as well

Yes, you can do a similar action with Redux but the key difference is that you have to add a reducer in your store and create some actions to dispatch an action for logout and logging in not to mention that you need to find a way to pass the useNavigation hook function to navigate the user to a different screen.

The key difference

Here I made things a bit simpler for me to debug not to mention that if I wanted to add a different hook function or send an API function whenever I logout then it is easily done with the Context example. This way I encapsulate each functionality with its own state and keep things modular rather than sticking everything in one store and one place.

Basic Image Optimization on Gatsby when using an image provider

Mohamad Kalaaji — Sun, 03 May 2020 07:45:34 +0000

The purpose of this blog post

the purpose of this blog post is to shed some light on basic image optimization. I have worked with designers before that they demand to have full resolution images on the site or the client pushes really big images. There are times where you can't use image optimization libraries so you have to do some compromises

so today I have decided to optimize my blog.

Well, results were not that great

Something was eating my resources and it was my images so I had to find a way to optimize them

Current setup

My blog runs Gatsby as my static site generator along with Forestry as my git-based CMS but before you start telling me about plugins for Gatsby like gatsby-plugin-sharp, I am using Cloudinary as my image provider

But you might say that there are plugins for Cloudinary as well especially for Gatsby like gatsby-source-cloudinary and gatsby-transform-cloudinary which can solve the problem.

The setup isn't poorly optimized, the images on that setup are

My biggest purpose of using an image provider is to decrease the bundling size of my site by not cluttering it with images also Forestry does an amazing job pushing the Cloudinary URLs inside of the blogpost markdown file without adding more configurations and plugins to my Gatsby site hence there was no problem at all from the setup side

The problem is that I have been pushing really big images which are slowing down the site

When you push URLs from an image provider, it is not easy to use something like Sharp to optimize your images

a good explanation from Gatsby when optimizing your images which you can read it here

However, this image optimization can come with a cost. It can be fairly CPU intensive, and in some cases may lead to long build times. As a means of debugging and perhaps improving your overall build performance, it may be helpful to pre-optimize your (extremely large) images.

So when you are using the Sharp plugin, it might cause your build to take some time especially when you have a good amount of images to optimize.

The goal is faster builds with the least amount of configurations

The setup is already working properly with the essential configuration needed, it wouldn't make sense to add more plugins and modify your existing code, so what would you do?

Smaller width and height

One of the images that got flagged on Lighthouse has a whopping 5400 × 3375 (width of 5400 pixels and height of 3375 pixels) with a file size of 1.5 Megabytes

That image was big not to mention other images are loading as well hence slowing down the site when loading.

If you are using images from sites like Pixabay or Pexels then consider downloading the smallest version possible which comes at a width of 640 pixels and height of 425 pixels which comes at an average size of 41 Kilobytes (the medium size is at a width of 1280 pixels and height of 850 pixels averaging on 258 Kilobytes)

If you are using your own images, consider decreasing the width and height to a smaller size (the 640x425 sizing is not that bad at all) on Photoshop or Affinity Photo then push it to your image provider

Decreasing image quality

There are conditions where you cannot play with the image's width and height then you might want to consider lowering the quality of the images

Lowering the quality might cause the image to lose some of the colors that make it show and pop out a bit, it does decrease the file size but you are sacrificing quality for quantity

But keep in mind that similar to the Sharp plugin, this won't make your images super small but rather it decreases the sizing by a bit

If you use tools like Photoshop or Affinity Photo then all you have to do is load the image and export it with a smaller quality level

this image had an initial size of 1.1 Megabyte if you decide to decrease the quality by 70% then it becomes around 444 Kilobyte on a 1920x1271 sizing (1920 pixels width and 1271 pixels height).

Decreasing more of the quality might cause the image to lose more of its color and might even ruin the image itself

If you are using a Mac, ImageOptim is also a good solution to use as well

here it saved 1.2 Megabytes out of 6.5 Megabytes from those images which relatively not bad at all

Results

drum rolls, please 🥁

well, I still have to optimize but hey! on the bright side, it did jump from 40 to 77

That is a good start for improvement

A better way to handle this situation

When you are working on a project from scratch, you might want to consider using image optimization libraries and decrease the size of the images that are getting pushed to your server programmatically up to a certain width and height to maintain consistency

but if you have an already established system that is working flawlessly then enforcing some image optimization rules won't hurt at all.

PJSV - open source cli tool to manage your package.json's version

Mohamad Kalaaji — Fri, 10 Apr 2020 12:29:06 +0000

Looking back at some code that I have written in the past 2-3 months ago, I have realized that there is a huge difference in the way I write code along with file structuring and documentation.

A huge difference like I have been reading other people's code and see how do they get things done, how they structure their applications, along with how they document their code. So, I looked at my old code and refactor some bits of it but I realized that I am still on version 1.0.0 of my application.

this is where the fun part starts

so imagine that you have been working on this project of yours for quite some time, pushing new features and updates just to realize 3 months later that your application is still on version 1.0.0 and who knows how many bug fixes you have fix nor how many features added to this project of yours not to mention if you added something that is not backward compatible so yeah 🤷‍♀️

And I admit the fact that I am not that of an organized person like sometimes I get carried away with work or tasks that I end up not doing the most basic things like updating your project's version number

the solution: automate it 🤖

This is a weird approach since I just mentioned earlier that I am not that of an organized person yet I found a way to automate this process.....interesting 🤔

Well, you write it once and use it forever plus imagine how much time I will be saving when pushing more than 5 commits and trying to think if this is a feature or a bug fix

semantic versioning

So I started to research about common patterns for version management and see how other developers are handling this issue. What I noticed is that most of them are following a method called semantic versioning (or semver for short) which I found a site that explains it pretty well here also not to forget npm's documentation of semantic versioning as well which can be found here

without getting into details, your version number is made up of 3 numbers which they are: major, minor, and patch

major.minor.patch

example: 1.3.5

the major number is to indicate which major version of this project it is on and when you increase that number, it just indicates that you have submitted a change that is not backward compatible at all (keep in mind that when you shift to an upgraded version number, your minor and patch number is set to zero. Example: shift from version 1.5.7 to 2.0.0)

the minor number is to indicate how many features and additions have been added to this project. It offers backward compatibility as long it is on the same major version number

the patch number is to indicate how many patches and bug fixes have occurred on that major version number

usually how you update your version number?

depends on the developer, since each developer has his/her own way of upgrading their version number.

Some might just update the value by accessing the project's package.json and increment the number, some might create a script that automates the process so when they commit and push changes then it increments the number

pjsv: my own version of this method

in a nutshell, what pjsv does is that it reads your package.json file and gives an interactive menu to update your version number based on what you have chosen by writing to that package.json file

the cool thing about pjsv is that it only updates your package.json file and nothing else. It doesn't push updates using git just updating your version number, giving you full freedom to do what afterward

best practice for pjsv

I would highly recommend using Husky along with pjsv

in your package.json:

"husky": {
    "hooks": {
      "pre-commit": "pjsv upgrade",
    }
  }

in this setup every time you write a git commit message, it will upgrade your package.json file then adds it to the commit itself

great! where can I start?

you can start by downloading it as a dev dependency in your project

npm install pjsv -D

it also supports the use of npx if you don't want to install it on your project

npx pjsv upgrade

you can find out more about pjsv on Github

comments, feedback, and contributions are highly appreciated!

writing proper git commits

Mohamad Kalaaji — Wed, 30 Oct 2019 10:28:02 +0000

It was the 28th of August, where my friend send my CV to a small company of 2 senior developers asking to have a junior developer onboard in their team.

after they contact me and arranged a meeting, I was given a task (or it was so call homework). The "homework" was to create an employee directory application where it services basic CRUD (Create, Read, Update, Delete) functionalities.

I was given to use what type of frontend (they use Angular in house but since I have some experience with React so React it was) and Nodejs + Express for backend (they use Nodejs heavily for backend). Part of the "homework" is to go wild with it by including scripts that help and aid in development (example: set a script in your package json to remove your build folder using rimraf [a nodejs package] and build your project to have the latest project possible), use of linters and code formatters, use new technologies like Graphql, and as well using external services like Algolia for searching employees.

They have included a detailed description of how to structure the application in a way they find it efficient, clean, scaleable . And they value code quality and git commit quality

This is not a joke

This is the first time you find someone asking for git commit quality, usually a recruiter will ask for code you have written before so they can review

typically you would provide your github/gitlab/bitbucket link so they can review your code but that doesn't end here: they review something that not all seniors and CTO do focus on and that is git commits

so what happened next? 🤔

I didn't get the job but I've learned something from this "homework", you rarely get this kind of chance anywhere.

Idea of this "homework" is not about flexing your skills (if you can flex your skills then good for you) but rather more into adapting and learning new things as well reviewing yourself

why they focused on git commits anyways? 🙂

turn out that with every version of a website/application/library they developed, they put in the README.md file all of the updates done on each version

having proper git commits help a-lot in populating the README.md file as well if any errors occurred, you can always git revert back to a specific commit

having non proper or poor git commits will cause you to have a hard time remembering which commit is responsible for a specific push (and let's be real, not everyone have a photographic memory to remember everything. We humans can forget and that is okay, really!)

examples of bad git commits

update navbar

here you said that you have updated the navbar, but what did you update in it? 🤔

navbar updated, elements now stacked in a linear way

also still poor because you said that the elements are stack in a linear way but how? why? what was the problem in the first place?

date reverser function for bookings is working

great, you created a function that reverses the date's format but is it inside of the bookings file? why did you create it in the first place? what purpose does it follow?

examples of okay git commits

navbar updated [check description]

- used css-grid instead of flexbox for aligning the elements
- used grid-template-columns with a repeat of 4 columns 1fr wide
- every element is placed in the center to the main grid div tag
- this setting can help us in mobile much faster by switching columns to rows

remember those first two git commits, compare them with this: they are the same but this commit is better to read

I know what is going on and what I used so incase of any errors I can always refer back to this commit

date reverser function on bookings [check description]

- date reverser function was created in the utils folder
- purpose of this function to reverse the format from YYYY-MM-DD to DD-MM-YYYY
- eventhough this should be a backend issue but currently the backend team is busy and we needed a quick fix
- when backend engineers are free, they can reverse it from their side and this function has served its purpose

compare the first date reverser function commit with this one, the purpose you created this function is because the backend team is not free to reverse a date format and you need to have a quick solution to work with

purpose of the [check description]

majority will ignore the description written under those commits and here is why:

the first line written will always will be the title, anything under the title will be considered as body. on Github/Gitlab/Bitbucket the title will show only unless you press on that commit to see the description

adding this to the tittle makes the developer curious of what is written in the body

example of a good git commit

we will use the navbar example

[UPDATE] stacking elements on Navbar [check description]

- [IMPLEMENT] use css-grid instead of flexbox
- [IMPLEMENT] use grid-template-columns repeated 4 times with 1fr wide
- [IMPLEMENT] every element is placed in the center respectively to the parent grid div
- [SUGGESTION] this setting can help us better in mobile development by switching columns to rows
- [FIX] fix padding on each element by decreasing it from 15px to 10px
- [FIX] set the elements div's left margin to auto to be aligned at the end of the parent navbar div automatically
- [UPDATE] remove bootstrap classes and use own made classes

here is a more verbose version of it, it is more detailed. It might look weird yet time consuming but take into consideration the amount of time you will save trying to guess what you did in that commit

I rarely use this until recently because I know what I have done in details whether it was a fix or a new implementation or future suggestions for later

how to write those commits? 🤔 my terminal doesn't allow me

I use VSCode for this purpose (I use VSCode for everything so it makes sense to set it up as my git editor as well)

easiest way to do it is by setting VSCode as your default git editor

first enable VSCode to work in the terminal by setting a path to VSCode (read it here)

then set this in the terminal

git config --global core.editor "code --wait"

this sets VSCode as your core git editor, and whenever you want to commit in git you do it this way:

git commit

and it will open a new window in VSCode, write the commit you want then save it then close the file so it stops waiting for VSCode

you can read about here

Extending User data in Wordpress using Pods and PHP

Mohamad Kalaaji — Tue, 01 Oct 2019 15:39:22 +0000

this is originally written on my blog here

one of the issues we face as wordpress developers when using it as a CMS (whether headless or not) that is: additional fields to be added whether to wordpress's core sections like the post section and the user section, or a seperate post type with additional fields
I mainly use wordpress as a headless CMS and lately I have been facing a huge issue that fixed it with a risky hack but ended up doing something I have never though of

so what was this so-called "risky hack" you have done?🤔

One of the requirements for the users is that he/she must have a birthday associated with each user, the problem is that I don't know how to add a column in the wp_user table and no plugin can solve this unless it is paid

the setup is as follows:

a wordpress installation running on an NGINX server where a Nodejs server is also running along with React
React will ask for data from Nodejs, Nodejs fetches the data from wordpress and cleans out what I want and don't want so that the response would be smaller/much more simple/cleaner (you can think of Nodejs here is a filter for wordpress)

back to the hack

so I don't know how to add a column nor anything PHP related so what I did is that on Nodejs, I created a json file and used a library that lets you read from a json file (jsonfile) and write on it
along with express, you get the feeling that you are getting the data from wordpress but in reality that you are getting the data from a json file
the fun part is that you can update a birthday and all as if you are really dealing with a database but in reality, you are speaking with a json file 🤷‍♀️

what would go wrong

if you push to the Nodejs server with an empty birthday json file or anything, yeah all of the user's birthdays are gone like literally gone

why would I do that in the first place

simply because I needed a super quick solution and I don't have that much time so I had to do this risky hack
but eventually you have to fix it because you cannot ship this to production (it is still under development)

A pluginated solution

alright, we all know that things won't go easy without using a plugin (I admit it 🙃) but this time it was one plugin and that is Pods (https://pods.io/)
what is cool about Pods is that it lets you add custom fields to anything, even to a user!
in your pods admin page, add a new pod and select extend existing

after choosing the "extend existing" option, you will be prompted to another screen where you will have to choose what to extend
you choose user

a small warning

pods cannot extend from 3rd party plugins so something like Custom Post UI (https://wordpress.org/plugins/custom-post-type-ui/) and Advance Custom Fields (https://wordpress.org/plugins/advanced-custom-fields/) are out of the table

now, where were we 👀

after choosing to extend users, you will have a user pod to use

you select the User pod to add additional field

here I have added a birthday field of type Date which is what I really need actually

a small note

this does add a birthday field to the user but it doesn't show it in your rest api endpoint so to enable that, you have to permit the pod to send data to wordpress's rest api
in the same User pod, press on the REST API section and allow it to be shown in wordpres's rest api

the main reason why I didn't choose a specific REST base is because the user is already baked inside of wordpress's rest api so no need to set a base for it

Result? 🤔

the birthday is shown in the api call! here is a sample when I fetch data from localhost:8888/wp-json/wp/v2/users

How can we update that value tho? 🤔

an easy approach for this thing is to create a wordpress rest end point and use the pods function to update the value

add_action('rest_api_init', function () {

  register_rest_route( 'birthday/v1', 'add',array(

                'methods'  => 'POST',

                'callback' => 'updatedate'


      ));

});

function updatedate (WP_REST_Request $request) {


    $id = $request['id'];

    $pods = pods('user', $id);


    $data = array(


    'id' => $id,


    'birthday' => $request['date']


    );


    $pods->save($data);


    return $data;

}

all you have to do is send an id and a date
the id is the user id which you get from the user api call (see above image for more details)
send an api call to the endpoint you have created (that is in my case localhost:8888/wp-json/birthday/v1/add) with a body holding the id of the user and the birthday

Final Result

and it updates it! (I chose that date to prove that it is working)

with this method, you can now update any field you want in the Pods plugin!
and it did work for the project that I am currently working on!

Thank you for reading

if you need any help, you can always reach out to me on twitter also thanks for reading my post!

What is the sneakiest easter egg you have ever done?

Mohamad Kalaaji — Sat, 07 Sep 2019 11:48:04 +0000

by far my greatest easter egg is that in the Country dropdown, I have inserted "The Friendzone" as a country due to it's big space and high population

Code for social good

Mohamad Kalaaji — Mon, 26 Aug 2019 15:52:55 +0000

We tend to improve ourselves each and every single day for the better

from learning libraries, frameworks, programming languages to doing them and open sourcing them, our role as developers have benefited the world good enough that we have a good amount of libraries, frameworks, programming languages for almost any use case

but the one part that we haven't focus on that much is the act of writing code for social good

what do you mean by 'writing code for social good?'

writing code for social good is a vary vast topic since anything that helps society is considered social good

but what social good I mean in this post?

the social good that I am focusing on is helping the people in need but this time with code

that varies from creating a code teaching chatbot to creating a small site for a small NGO that would save that money for something useful

not everyone has the luxury to offer coding lessons or to hire a developer to do for them a website

so, why not helping anyone in need if we have the ability to do so?

so what do I get in return?

this is the fun part: nothing! 🙂

don't get me wrong here, it is not modern day slavery or anything but you shouldn't expect to get anything in return

getting something in return eliminates the part of 'doing it for social good', it should be something that comes from the heart

from that small site or app that you have developed, you could possibly change someone's life to the better

when you give something, the world tends to give you something back

now I mentioned previously that you shouldn't expect anything at all

and that what you suppose to do, but the universe might have a different route for you

say that you created a small site for an NGO and they loved it

pass forward 3 months later and you get referred to a freelance gig or referred to a job because of that NGO

that wouldn't be bad at all right?

we all say that we want to contribute something for the world

everyday, we tend to wish that we could improve the world around us by contributing

as we contribute more, we feel like we are doing something bigger than us and becoming an active part of society

Wordpress do_action

each year, Wordpress do a charity hackathon called 'do_action' https://doaction.org/

do_action is a hackathon that can be hosted anywhere in the world, where local wordpress developers develop a site for a non profit organization (NGO) in just one day

the idea behind of it is to use wordpress for social good, even though wordpress is open source and some might use it for making money from freelancing

why not use this set of skills and develop something that would help someone?

the community behind wordpress have given you a platform that you can benefit from, why not benefit someone else with it?

how can we contribute?

there are many ways that you can help benefit the community

while coding something for social good is the goal here, not everyone can contribute with code

here are some suggestions on how you can contribute if you are not a technical person:

donate money (if available) to make a certain project to keep it up and running
offer suggestions and feedback (something like a pull request on Github)
spread the word, maybe you can't help but someone else can

and here are some suggestions on how to contribute as a technical person:

find a project you like and create something that would help benefit this project to the better
offer suggestions and feedback
answer pull requests that would remove some bulk of pull requests for the maintainer of the project

this year, we will also participate in a do_action

I'm part of a wordpress community in Beirut,Lebanon called wpBeirut and we have been doing do_actions for 2 years in a row

2017: https://www.youtube.com/watch?v=ThBur2vbBgw

2018: https://www.youtube.com/watch?v=2squp0ExmEE

and this year (2019) we will also contribute as well by providing

we will gather our top local wordpress developers and develop websites for NGOs in one day

if you wish to help us

we have created an opencollective page so that if you wish to help https://opencollective.com/do_action-beirut

and if you wish to help by providing a premade template/plugin that you have developed on the side and wish to make a good use of it for social good, feel free to reach us out on github as well https://github.com/wpbeirut

Code Refactoring: when to leave and when to stay

Mohamad Kalaaji — Sat, 24 Aug 2019 09:17:14 +0000

as we all know that in most companies, it is hard to explain to a non technical person what is exactly code refactoring

usually I would say that I am fixing some errors and enhancing the application because I found a way to make it faster and easier to maintain

and of-course I always get hit up with the same questions:

"why didn't you do that in the first place ?"
"so all of our client applications need refactoring ?"
"why didn't you account time with your scrum jedi (nickname for someone who just knows scrum, also gets referenced as scrum master as well) and made the code better months ago?
"you are not going to waste days doing this aren't you ? because we have other important stuff to do that this non sense that you are talking about!"

and the list goes on with the complains, but if you want to blame someone for this action: you have to blame everyone on the team not just the developer(s) that worked on this project

say again? why everyone on the team should be blamed ? 😮

to make it simple why not explain it in a real life case scenario (that it actually happened with me), shall we ?

lets say that your client wants a website that sells handmade baskets and you get initial designs on Adobe XD for how the site looks like

you calculated all the features and aspects that you need to work on and turns out that it takes 1 and a half month to finish

then the client replies to the sales department that he will be using an external service that would handle stock management and this service gives him a card reader for in-store payments

the client didn't tell the sales department that this service might/might not provide a web solution for online payment and the sales department didn't ask the client nor researched about this service to know if it can do this action (mistake number one: not getting enough info)

but the sales department (without talking with the developers) eagerly and proudly told the client that this would save time for our developers so we will decrease the time to one month (mistake number two: taking a decision without consulting the rest of the team)

the next day, sales department sends a message on slack to the developers just the url of the service and said: "use this, client wants this service on the site" (mistake number three: lack of clarification)

scrum jedi said that we can still finish within one month if we worked hard (mistake number four: not standing out for the team when something wrong is going to happen aka not being realistic)

developers start working on the website and due to the time constrain, a-lot of stuff needed to be compromised for the sake of finishing on time (mistake number five: compromising clean code for time which obviously will regret it later on)

mid of the month, client sends email to sales department that this service will cost him a-lot and found another service that would do the same but costs less

sales department told client that it is not a problem, the developers can handle it within time (mistake number six: giving promises to thy client without keeping)

the code that has been written was so bad that it would take a-lot of time to just add one feature to make it work with the new service (mistake number seven: bad written code that is hard to improve or change)

one month passed, and the site isn't finish yet

client is upset from the company and from the promises that were given to him so he is going to sue the company because the baskets that he bought and in stock are costing him a-lot of money to storage them and the site is not ready yet (talk about 4000$/month place to store and 50,000$ worth of items)

sales department is apologizing to the client and promises to drop part of the payment just to not throw charges (mistake number eight: when you don't do your homework, someone is gonna pay for it)

CEO is disappointed from the scrum master, the developer team, and sales department to a point that overtime is no longer payable

design department wanted to get out of the "not getting paid for overtime" situation so they send a new complicated design for the website so that they can impress the CEO and the client (mistake number nine: trying to show off)

sales department shows client the new designs and client approved on it because he is getting new and extra features for free (as a way of apologizing)

code wise it is almost semi impossible to add extra features due to the compromises that have been done but with the new design: it will take more time to make the code adapt to the new design than dumping it and start over (mistake number ten: writing bad code that it has a huge chance of getting dumped )

five months later, the site isn't finished yet

what can we learn from this? 🤔

it would have made sense that the project time didn't decrease and given an actual real deadline so that the developers would have focused on writing clean code from the beginning and also it would have made more sense not to add more design constrains

but the world is no sunshines and rainbows also most likely you might work for those kind of people (might, not saying that you will but not everything will be shown to you from day one)

and what I did is that I left the company, because the blame was set on us (the developers) but clearly it was the whole team's problem (one's ego couldn't help setting the blame on thyself so set it on someone else)

even after I left, handling the code is an absolute nightmare and still not maintainable

refactoring it would be a waste of time

why should we refactor? 🤔

refactoring code is not depended on one thing but rather that on multiple scenarios:

updating a library and making it adapt your code base
making the code run faster and less resources than before
making the code more readable and scalable

and the list goes on and on

and we face a problem that we don't know when to leave this code and start over or when to add to it

the dip 🗻

in Seth Godin's book called "The Dip" (goodreads link: https://www.goodreads.com/book/show/324748.The_Dip)

he explained that we all start with a small cliff (most known as the honeymoon stage) where you feel like you are on top of the world

then you roll down to a small dip and this is where things get interesting

see, after you rolled down to the dip you have two options:

either climb another steeper cliff
dip down deeper to a dead end (or he refers to it as Cul-de-Sac)

but the problem with most of us that we are afraid of climbing another cliff so we choose to dip deeper

but in reality, we dream of climbing that cliff

we cling up to something because we have feelings toward it 💟

mostly known as a the comfort zone, and it is one hell of a zone actually

it prevents you from moving forward, where you start to wish for stuff rather than implementing them

we hold sentimental feelings toward that unmaintainable code because we feel comfortable working on it

and we would have a hard time letting it go, but sometimes you have to hold the shotgun and shoot that project right in the face

it is okay to leave you know 😶

referring back to "The Dip" book, Seth also explained that it is totally fine to leave and find another cliff

if the chances of facing a Cul-de-Sac is high then leaving is the right option

same thing with code, if you have tried to refactor your code and you are facing a-lot of errors as you proceed then wasting time on it could lead to a never ending Cul-de-Sac

Compromises Compromises Compromises

not everything can be refactored and still behave the same thing so you compromise by keeping it or dropping it

as an example:

lets say that function A can output 1,2,3,4,5

and if you give a specific parameter, it can output the value you want from the same function

but function A is slow and causes some memory leaks

function B does what function A suppose to do: output 1,2,3,4,5

also function B uses some new features that would make it faster and doesn't memory leak at all

but function B can no longer output a value when given to a specific parameter

so you create function C which takes the values of function B and outputs a value based on the parameter given

from your perspective: do we keep function A or stick with functions B & C ? 🤔

well, depends on the application actually

if the implementation of functions B & C will cause some problems and headaches to be used in the application then sticking with A is a right solution

there is also a possibility that A is causing memory leaks and it is slow because it depends on another function that is not written properly so function A might not be badly written

in that case, refactoring the code is useless because the base is not properly build hence it would make more sense to drop the refactoring part and start from scratch

the business perspective of refactoring

in the real world, dropping something and starting over is a fools errand but in some case scenarios it is the only option

you don't see this in small projects that have a medium amount of data, you will see it in companies that have been serving the application for more than 10 years minimum

where there are huge amount of data being taken care of

if the company sees that creating something from scratch can save a-lot of time and money on the long run then definitely creating a new code base and working on it seems like a realistic option

but if creating a new code base and still generating the same amount of money and using the same amount of time but with a fresher code base, then it is not worth dropping the existing code for a new one. It would make more sense to allocate some extra time for some refactoring

and if refactoring isn't helping much or as expected then you can try to extend your legacy code with a newer code base that would supercharge your legacy codebase

take Facebook as an example:

Facebook is written in PHP, shifting the entire codebase to another language like Python or Ruby on Rails would not make that much sense

and PHP might have some limitations (not all languages created even and not all languages solve all problems)

hence Hack was created (https://hacklang.org/), extends on top of PHP

then extending the legacy code with other languages like Python but keeping the legacy code

the idea behind of it: from a business perspective, it would have made sense that Facebook would have changed to another code base if it didn't have that much of huge sets of data

it would have generated even more money (also saved more money) with the newer code base

but shifting to a newer code base could cause the company to lose a huge amount of money and possibly the inability to generate more money

in the end 🤯

depends on the condition that you are in actually, it is your job to choose the right decision whether to refactor or when to drop it and recreate it from scratch

Using React as a Wordpress theme

Mohamad Kalaaji — Thu, 22 Aug 2019 17:22:10 +0000

Not so long ago I became a co-organizer for wpBeirut (Wordpress Beirut), a community dedicated for wordpress developers in Beirut-Lebanon.

One thing I realized from the community that the majority depend on plugins to add something on the frontend or to add functionalities like site builder plugins (Elementor and wpBakery)

and some go towards buying a premade theme and use it because it is less of a hassle for them to write php code in the first place

After doing a small survey with the community, majority follow this pattern for several reasons:

a small freelance project with a medium budget so just install a premade theme with some plugins
doesn't know how to write php code (writes in another language) or doesn't know how to code at all (totally normal since wordpress can be used by non technical people)
comfortable writing the frontend with latest technologies (React/Angular/Vue) and not comfortable writing the frontend purely in php and some jquery

even myself I don't prefer to write the frontend in php, not because I hate php or anything but I feel much more comfortable and faster with React

and Gutenberg (a wordpress plugin that uses React to make wordpress's frontend a little bit modern and easier to use) doesn't cut the deal for me

even if you went towards Gutenberg and you created a couple of blocks, you are still stuck with wordpress's frontend

so it is time to use wordpress as a headless CMS

when we talk about using wordpress as a headless CMS, ideally we are ignoring the frontend of wordpress and depend only on the REST api that is supported by wordpress

the cool part about wordpress that writing functions that do REST actions is pretty straight forward

here is an example of changing one's email address by sending the old one and the new one

add_action('rest_api_init', function () {
  register_rest_route( 'changemyemailman/v1', 'changedatmail',array(
                'methods'  => 'POST',
                'callback' => 'changeme'
      ));
});

function changeme (WP_REST_Request $request) {
    $oldmail = $request['old_mail'];
    $user = get_user_by( 'email', $oldmail );
$userId = $user->ID;
    $args = array(
    'ID'         => $userId,
    'user_email' => $request['new_mail']
);
wp_update_user( $args );
}

just send an api call to /changemyemailman/v1/changedatemail with the body holding:

{
   "old_email": "john@doe.com",
   "new_email": "john1@doe.com"
}

(I am giving this as an example to show how easy it is to create an endpoint on wordpress, but the example above is an absolute security nightmare because you can change an email address of anyone if you knew the original email and the endpoint so you can easily change an administrator's email to yours and take full control of the site)

Say hello to CORS!

when you start using wordpress as a headless CMS, you will start seeing the new kid in the block

they call him CORS, and sometimes he can be a total brat but most of the time he is trying to help

to keep it short: CORS (cross origin resource sharing) is mainly used when you are requesting for data that is not from the same origin

Before CORS became standarized there was no way to call an API endpoint under different domain for security reasons. This was (and to some degree still is) blocked by the Same-Origin Policy.

you can read more about it here https://www.codecademy.com/articles/what-is-cors

say again about CORS? 🤔

CORS is a mechanism which aims to allow requests made on behalf of you and at the same time block some requests made by rogue JS and is triggered whenever you are making an HTTP request to:

a different domain (eg. site at example.com calls api.com)
a different sub domain (eg. site at example.com calls api.example.com)
a different port (eg. site at example.com calls example.com:3001)
a different protocol (eg. site at https://example.com calls http://example.com)

This mechanism prevents attackers that plant scripts on various websites (eg. in ads displayed via Google Ads) to make an AJAX call to www.yourbank.com and in case you were logged in making a transaction using your credentials.

If the server does not respond with specific headers to a “simple” GET or POST request — it will still be send, the data still received but the browser will not allow JavaScript to access the response.

If your browser tries to make a “non simple” request (eg. an request that includes cookies, or which Content-type is other than application/x-ww-form-urlencoded, multipart/form-data or text-plain) an mechanism called preflight will be used and an OPTIONS request will be sent to the server.

A common example of “non simple” request is to add cookies or custom headers — it your browser sends such a request and the server does not respond properly, only the preflight call will be made (without the extra headers) but the actual HTTP request the browser meant to make will not be sent.

the solution: use React in the same origin as Wordpress! 🎉

whenever I talk about this topic to any wordpress developer, he/she face a difficulty understanding this specific part

how can you use React in the same origin as wordpress? 🤔

well the easy part is to remove the default wordpress frontend and use React, right?

Right! but the hard part: how can we do it? 🤔

well, someone was very nice enough to create a create-react-app style cli tool for using React as a wordpress theme

https://www.npmjs.com/package/create-react-wptheme

it does what it says it does: use React as a theme for wordpress while giving you the 'create-react-app' vibe

cool! but how can we use it? 🤔

pretty simple, go to your themes folder (that is found in your wp-content folder) and type this command in your terminal

npx create-react-wptheme [name of your project]

similar to how CRA install packages but there is a small setup you should do first

if you go to your themes section inside wordpress, you will find that it is labeled as broken and missing css files

in your terminal, enter the project (mine is called react-test) then enter inside the react-src folder

then write:

yarn start

you will receive this message on the terminal

so go to your themes section and you will see your react theme there

press on live preview, you will see a 'restart the nodejs watcher now' message

just start the server!

yarn start

tada 🎉

and you will have a live reloader in your terminal so any changes you do, it will refresh to watcher exactly the same way create-react-app does!

press on the 'activate and publish' button and it will be serving as the theme for your wordpress site

all under port 8888! and the cool part that you can use the REST api provided by wordpress without getting stopped by CORS!

so if you have pre-existing wordpress site but you need to refresh the frontend, give it a try!

or if you know React and want to use a CMS like wordpress then the sky is the limit!

fun fact: you can use any React library of your choice, as if you are using CRA but it is on wordpress

what I do in this kind of setup: create custom post types and put custom fields on them, then call for those custom posts and show the data from the custom fields in the React application!

hope you enjoyed this post! and let me know what you think about it in the comment section