Forem: Jamal Mashal

Should you learn X or Y? Listen to the market

Jamal Mashal — Wed, 05 Aug 2020 10:35:25 +0000

I've been freelancing & working remotely for almost 4 years now. And as a senior full-stack dev, one of the most overrated common questions that junior devs keep asking is: "What should I use, X or Y?"

Whether it's React vs Vuejs or JS vs Ruby. If you want to build stuff for yourself, IT DOESN"T MATTER. Just use whatever you like or already know. Users/visitors don't care what is your stack, they only care about a functional app or website.

The only reason you should be asking these kinds of questions is to figure out what is the market's demand, to land the best good job, as quickly as possible.

Since the world is going remote with the global situation. I thought I should share with you some of the skills with high demand now.

The following screenshot is from Toptal referral program that shows the skills they are willing to PAY for and get on the network. If you never heard of Toptal, it's a global remote company that provides a freelancing platform that connects businesses with software engineers, designers, and business consultants.

I've been part of Toptal's network since I started freelancing, and it's actually where I got my first remote job, and I've been working with them on-off for the past 4 years.

Toptal is a huge network and I believe the skills they ask for, reflect the market's demand. And it could be a good answer for juniors, and even seniors, for what to you focus on and what framework or lang to learn.

Toptal's hiring process is very similar to any Tech company, and working with them has it's Pors and Cons. My intention with this post is not to promote them. However, if you are looking for a remote job, I think Toptal is a good starting point. If you think you are ready to apply, you can use my referral link.

If you have any questions about Toptal, the hiring process, freelancing, or working remotely I would be happy to answer. Leave me a comment here or reach out to me on Twitter @jamalx31

use create-react-app to develop Chrome extensions

Jamal Mashal — Sat, 18 Jul 2020 15:24:46 +0000

create-react-app (CRA) is probably the most common way to build, develop, and deploy React apps. A couple of weeks ago, I was working on a chrome extension. I wanted to use CRA to do it, but CRA only supports SPA out of the box.

I found the article Create Chrome Extension in React by @bayardlouis470 , which I used to develop my extension, but there are 3 main issues with his approach:

It doesn't support multiple pages (if you want to have options page and popup for your extension)
You only use the production build version which makes it harder to debug.
After every change in your code, you need to re-run the build cmd

So I decided to take it a step further. Here will be sharing how to customize CRA to fit our needs to develop a chrome extension (a link to the full code at the end).

Step 1: ⚛ create a react app

npx create-react-app extension

Step 2: Modify public/manifest.json

You already have a manifest file created by CRA but we need to change it to match the extension requirements

{
  "name": "Awesome Extension",
  "version": "0.0.1",
  "manifest_version": 2,
  "description": "create-react-app for extensions",
  "icons": {
    "128": "logo128.png"
  },
  "permissions": [],
  "background": {
    "scripts": [
      "background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    "default_icon": "logo128.png",
    "default_popup": "popup.html"
  },
  "options_page": "index.html"
}

Notice that we have index.html for the options page, and popup.html for our extension popup.

Step 3: 🏗 Structure

inside ./src

Go ahead and create (inside src) a folder for the options and one for your popup. Also, create your background.js file.

inside ./public

duplicate the index.html file and rename it to popup.html

inside ./

create .env file and add the following

INLINE_RUNTIME_CHUNK=false

This is important since chrome doesn't allow inline script js code

Step 4: 🎩 The magic

Now we need to customize CRA. For this we will be using 4 great packages:

customize-cra
react-app-rewired
copy-webpack-plugin
react-app-rewire-multiple-entry

1 & 2 to override CRA webpack default configurations. 3 to copy our static assets and 4 to support multiple pages. so go ahead and install them.

npm -i customize-cra react-app-rewired copy-webpack-plugin react-app-rewire-multiple-entry --save-dev

Now where all the magic happens. Create config-overrides.js in your root folder with the following code

const {
   override,
   overrideDevServer,
   addWebpackPlugin
} = require("customize-cra");
const CopyPlugin = require('copy-webpack-plugin');

const multipleEntry = require('react-app-rewire-multiple-entry')([
   {
      // points to the popup entry point
      entry: 'src/popup/index.js',
      template: 'public/popup.html',
      outPath: '/popup.html'
   },
   {
      // points to the options page entry point
      entry: 'src/options/index.js',
      template: 'public/index.html',
      outPath: '/index.html'
   }
]);

const devServerConfig = () => config => {
   return {
      ...config,
      // webpackDevService doesn't write the files to desk
      // so we need to tell it to do so so we can load the
      // extension with chrome
      writeToDisk: true
   }
}

const copyPlugin = new CopyPlugin({
   patterns: [
      // copy assets
      { from: 'public', to: '' },
      { from: 'src/background.js', to: '' }
   ]
})

module.exports = {
   webpack: override(
      addWebpackPlugin(
         copyPlugin
      ),
      multipleEntry.addMultiEntry,
   ),
   devServer: overrideDevServer(
      devServerConfig()
   ),

};

To make everything play together we just need to modify the scripts in package.json to use react-app-rewired and it will look like this:

"scripts": {
    "start": "react-app-rewired start",
    "build": "react-app-rewired build",
    "test": "react-app-rewired test",
    "eject": "react-scripts eject"
  }

Step 5: 🎉 Run & enjoy

Like any other CRA project, run the development cmd with

npm run start

Wepback will create a dist folder Load it as an unpacked extension in Chrome. And when you are ready to publish your extension you can use the build command.

if everything went as planned your popup will look like this. And the best part is if you change your code you will see it instantly 🥳

Source code

I published the full boilerplate of on GitHub, so you can check the code if you'd like or just clone to develop your own extension.

Final thoughts

Room for improvements:

minimize the background.js file
optimization
use webpack-extension-reloader?

Let me know if you have any questions, thoughts or suggestions!

Using Apollo with multiple Graphql endpoints

Jamal Mashal — Thu, 09 Jul 2020 19:26:42 +0000

If you are using Graphql you may already faced this issue where you have your own Graphql server and also needs to query data from a 3rd party API.

If this API is REST then no problem, you can just use fetch, Axios, etc. But what if this API is using Graphql? How can you tell your Apollo client if a query/mutation belongs to your backend or the other API?

I ran into this issue while developing my first Shopify App. I have Graphql on my backend and Shopify recently migrated to Graphql.

In this post, I will share how I managed to use the same Apollo client to communicate with both.

We can make this happen in 3 simple steps:
1- Create HttpLink to each endpoint

import { ApolloLink } from "apollo-link";

const myLink = new HttpLink({
  uri: '/graphql',
  // other link options...
});

const thirdPartyLink = new HttpLink({
  uri: 'website/graphql',
  // other link options...
});

2- Configure Apollo client

import { ApolloClient } from 'apollo-client';

const client = new ApolloClient({
  link: ApolloLink.split(
    operation => operation.getContext().clientName === "third-party",
    // the string "third-party" can be anything you want,
    // we will use it in a bit
    thirdPartyLink, // <= apollo will send to this if clientName is "third-party"
    myLink // <= otherwise will send to this
  )
  // other options
});

3- finally, when you want to call a query or mutation you just need to pass the clientName to Apollo like this:

useQuery(QUERY, { variables, context: { clientName: 'third-party' } })

// useQuery is a React hook, it may look different for you if you are using something else

That's all! the magic happens inside ApolloLink.split. You give each query/mutation a "context" and apollo figures out where to send it!

Happy coding ✌️

How to make Jenkins do the heavy lifting

Jamal Mashal — Mon, 29 Jun 2020 16:17:27 +0000

Hi everyone 👋🏼 I'm @jamalx31, a JS full-stack developer. This is my first post here, I've decided to start sharing what I've learned while working with different startups throughout my career. I mainly focus on React, React Native.

In this post, I will share how to really take advantage of Jenkins to automate the most time-consuming part of any mobile app development process.

The usual/hard way to configure Jenkins is to create projects manually, maybe one for staging, one for production, etc. The easier way, which I will be showing here is by using a Pipeline.

All your Jenkins configuration will be in one simple file that lives alongside your source code means it will be easier to change and maintain and you won't have to go to Jenkins to change your settings every time you change your code.

Flow

I've been working with a startup on 2 React Native apps for the past 2 years and here's our development process:

implement a new feature or fix a bug
commit changes to the Staging branch
Jenkins will be notified thanks to Github webhooks
Jenkins sends a slack message to confirm and a new build starts
Jenkins fetches the app repo, builds, uploads to App Center, and then sends a final message to slack with download links so everyone in the team can install the new staging version and test it.

The same flow happens when we merge the changes into the master branch except for this time Jenkins treats the build as a production build. So steps 1,2,3,4 will be the same but then:
5 - Jenkins runs Wix/Detox e2e testing
6 - Jenkins starts a production build.
7 - upload a new release to both App Store and Play Store
8 - add a release tag on Github to track version number
9 - Send tests report back to slack with download links

here's how it looks like in slack

As you can see the only action required from the developer side is just to push changes to GitHub and Jenkins will take care of the rest ✌️

JenkinsFile

Now let's see how to we tell Jenkins to do all of this. In one word JenkinsFile, and in code:

Where to go from here?

Here, we are just scratching the surface. Of course, to make this fully work you need to do a one-time Jenkins configuration to add your API keys, install some plugins like slack, and maybe add Groovy function to your Jenkinsfile to customize things.

I also want to cover more specific topics for React Native and how to automate e2e testing, especially when you want to test 2 separate apps that communicate with each other.

Please let me know down in the comments which part I should focus on next. See you in the next post! 🚀