Nicolas BAPTISTA - Page 3 of 5 - Blog of a Parisian software architect

This blog contains 47 articles

N I C O L A S    B A P T I S T A

PERSONNAL BLOG

SOFTWARE ARCHITECT • JAVASCRIPT DEVELOPER • DESIGNER


LinkedIn Contact Github More...


Create quickly API with AWS – Lambda/API Gateway

Amazon Web Services — Wikipédia

This article is dedicated to new users to AWS – Amazon Web Services – that wants to use this cloud instead for others (Azure, Google Cloud) which seems to be the best choice at the moment. Indeed, AWS is the most complete scalable and dynamic cloud solution.

However, this is not so simple to understand all the concepts, if you look for simplicity you may be interested by Google Cloud that I used before.

In order to use API Gateway and Lamdba, you should add them in favorite in the Services:

Create your API functions in AWS Lambda

We can use AWS Lamdba to create routes that can be used for our applications.

So, you can click Create function, in order to see the form bellow.
Let’s say we want to create a route to list the products of our app, it will be a GET method and we will call it getProducts.
We will use Node.JS because I have to habit to use Javascript and Typescript but you can choose the runtime you are in ease.

Then you can click Create function, we don’t need the others settings.

You should be now able to see the function overview with the default example in the code editor:

You can try the example it will show the string “Hello from Lambda”, the response that is returned in the example.
We can now write our own function from scratch here or alternatively we can upload our code from a ZIP file.

Create our API Gateway route (HTTP)

In the overview of the Lambda function you can see the button Add trigger, you can use it to add the API event that will call our function.

Click “Add trigger”
Select “Create API”, then “HTTP API” (best for cost) and “Open” the endpoint so your app can use it

You can then click Save and so you should see your new trigger, the API Gateway trigger:

Now you can try it by going on the API endpoint link in the details.
You can use it like it in your application or you can change it by adding your own domain, for exemple api.myapp.com/getProducts
You can do that in Custom Domain Names or directly in your domain provider, in the DNS configuration, making a redirection.

Creating an API Gateway (REST API)

You could also, if you need it, use multiple methods such GET, POST, UPDATE, DELETE, … if you created a REST API Gateway :

You can then use your Lambda function for each methods you want to use.

Color picker with React.JS

Example of a color picker made with React.JS

In order to have a color picker on our React.JS application, we can use the SketchPicker library

Full example

Color: <TextField variant="outlined" id="standard-basic" style={{padding: 5, width: '90%', background: color}} value={color?color:''} onChange={(e) => { setColor(e.target.value); }} />
<SketchPicker 
   color={ color?color:'#fff' }
   onChangeComplete={ (colorSelected) => {
         setColor(`${colorSelected.hex}${decimalToHex(colorSelected.rgb.a)}`);
      } 
   }
   presetColors={['#D0021B', '#F5A623', '#F8E71C', '#8B572A', '#7ED321', '#417505', '#BD10E0', '#9013FE', '#4A90E2', '#50E3C2', '#B8E986', '#000000', '#4A4A4A', '#9B9B9B', '#FFFFFF']}
/>

Alerting user with a small messaga bubble – Snackbar – React.JS

In your web app, you will have to notice the user when he is doing some actions in your user interface. We can do it with a small message bubble called Snackbar, here is what it looks like:

How we will do it

setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);

In your code, we will use these 3 lines to:
– Set the severity “error”, there are 4 types of severity

– Set the error message that will be displayed “The last cell cannot be deleted.”
– Show the error message (during few seconds)

Full example

import Snackbar from '@material-ui/core/Snackbar';
import MuiAlert, { AlertProps } from '@material-ui/lab/Alert';
function Alert(props) {
  return <MuiAlert elevation={6} variant="filled" {...props} />;
}
...
const [snackSeverity, setSnackSeverity] = useState('error');
const [openError, setOpenError] = useState(false);
const [snackMessage,setSnackMessage] = useState('Error');
...
setSnackSeverity("error");
setSnackMessage("The last cell cannot be deleted.");
setOpenError(true);
...
<Snackbar
   anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
   open={openError}
   onClose={(e)=>setOpenError(false)}
   autoHideDuration={3000} 
   >
     <Alert onClose={(e)=>setOpenError(false)} severity={snackSeverity}>
       {snackMessage}
     </Alert>
</Snackbar>

React.JS • Full list of all icons

Examples of listing the icons in React.JS / React Native

Listing all the icons

List of all the icons

Searching icons name

Searching an icon name

How to do it ?

Importing all the icons

Import the CSS your icons in /public/index.html

<link rel="stylesheet" href="http://cdn.materialdesignicons.com/5.4.55/css/materialdesignicons.min.css" />

Use it in your source code

Use your icons in the code source in /src/App.js like that:

<span> 
   <i class={`mdi mdi-${icon?icon:''}`} aria-hidden="true"></i>
</span>

Loop on all icons

If you want a list of icons then you can loop on the list of icons, let’s say you have put all your icons in a file called iconlist.js

export const icons = [
"ab-testing",
"abjad-arabic",
"abjad-hebrew",
"abugida-devanagari",
"abugida-thai",
"access-point",
"access-point-check",
"access-point-minus",
"access-point-network",
"access-point-network-off",
"access-point-off",
"access-point-plus",
"access-point-remove",
"account",
"account-alert",
"account-alert-outline",
"account-arrow-left",
"account-arrow-left-outline",
"account-arrow-right",
"account-arrow-right-outline",
"account-box",
"account-box-multiple",
"account-box-multiple-outline",
"account-box-outline",
"account-cancel",
"account-cancel-outline",
"account-cash",
"account-cash-outline",
"account-check",
...
];

Then you can import the icons in you App.js and use it:

import { icons } from './icons';
...
{ icons.map((icon, index) => (
   <div style={{fontWeight: 'bold'}}> <i class={`mdi mdi-${icon}`} aria-hidden="true"></i> {icon} </div>
))}

You can then add a filter if you want to check that the icons contain part of the string name :

const [searchIcon, setSearchIcon] = useState(null);
...
{ icons.filter(icon => icon.includes(searchIcon) ).map((icon, index) => (
    <div style={{fontWeight: 'bold'}}> <i class={`mdi mdi-${icon}`} aria-hidden="true"></i> {icon} </div>
  )
)}

List of the FCA (UK) regulated Forex brokers

Here is the full list of this date (JUN 2021) of the brokers regulated by the FCA (UK), one of the most reliable regulator in the world for forex trading.

NAMECOUNTRYREGULATORS LISTTYPE
Doo PrimeVanuatuFCA (UK), VFSC (Vanuatu), FSC (Mauritius)STP, ECN, NDD
Key To MarketsUnited KingdomFCA (UK), DMCC (Dubai)ECN
FxProUnited KingdomFCA (UK), CySEC (Cyprus), SCB (The Bahamas), FSCA (South Africa)NDD
PepperstoneAustraliaFCA (UK), CySEC (Cyprus), ASIC (Australia)STP, ECN, DMA
FxviewCyprusCySEC (Cyprus), FCA (UK), BaFIN (Germany), CONSOB (Italy)STP, ECN, DMA
FOREX.comUnited StatesNFA (US), CFTC (US), FCA (UK), FSA (Japan),
ASIC (Australia), CIMA (Cayman Islands)
Market Maker
AxiAustraliaFCA (UK), ASIC (Australia), FSCA (South Africa), DFSA (Denmark)Market Maker
ForexTimeCyprusCySEC (Cyprus), FCA (UK), IFSC (Belize), FSCA (South Africa)STP, ECN, Market Maker
TickmillUnited KingdomFCA (UK), CySEC (Cyprus), FSCA (South Africa), LFSA (Labuan),
FSA (Seychelles)
STP, NDD

ReactJS • Responsive UI interface

You are making a React application and you want to have a responsive user interface that works both on laptop and mobile phone ?

A solution can be to use Material UI with several layout components such :

  • Container
  • Grid
  • Hidden

The grid looks like this:

<Grid container spacing={3}>
        <Grid item xs={12}>
          <Paper className={classes.paper}>xs=12</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={6}>
          <Paper className={classes.paper}>xs=6</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
        <Grid item xs={3}>
          <Paper className={classes.paper}>xs=3</Paper>
        </Grid>
      </Grid>

As you can see, the full width of the page is xs=12. It means the full width size is equal to 12.


You can see so that with 2 grid items of xs=6, it will be two components.
And so 4 will be 3 components on the line and 3 will be 4 components on the line.

You can use this grid items when you want to display block of contents on the page, if you know Bootstrap, it’s the same.

You can put any content inside your <Grid>, it can be a <div> for example.

Using XS, SM, MD, LG and XL

Grid SizeDeviceWeb browser width
XSMobile phone screens 0px ► 600x
SMMobile phone and tablets600px ► 960px
MDLaptop960px ► 1280px
LGLaptop1280px ► 1920px
XLDesktop1920px ► …

Using breakpoints

Using breakpoints allow you to have different grid size for different devices, which allows you to have a grid adapted for mobile phone for exemple:

You can se the size 6 for laptop (SM=6 and higher) and size is 12 for mobile phone (XS=12)

Using Hidden

You can use the <Hidden> element from Material UI to hide specific items for XS/SM/MD/LG/XL items.

<Hidden only="lg">
    <Paper className={classes.paper}>Hidden on lg</Paper>
</Hidden>

Git commands on production server & Git issues

The following commands can be used on a production server.
In the case of a local machine development, use free software like GIT DESKTOP / SourceTree

First deployment in a folder

git clone <URL GITLAB/GITHUB HTTPS>

Updating / Getting last changes

git pull

The following commands respond to particular problems that may arise.

Changing the URL of a GIT Repository

This problem can occur if you are using GITLAB or GITHUB with SSH and you want to switch to HTTPS or vice versa, or following problems with the rights of an SSH key such as “remote: The project you were looking for could not be found.” and “fatal: Could not read from remote repository.”

Checking the repository URL:

git remote -v

Changing the URL of the repository:

git remote set-url origin <URL>

You cannot pull the changes “You have unstaged changes”

You may get the following error, indicating that some files have changed and need to be committed when you haven’t touched anything and just want to update the server:

Cannot pull with rebase: You have unstaged changes. 
Please commit or stash them. 

In order the solve this problem we should remove all the unstaged changes:

git reset --hard

You can now use the git pull command.

Back to the previous commit

git reset --hard HEAD^

Back to a specific commit

git reset --hard <ID COMMIT>

The commit ID is usually 7 digits and hexadecimal letters, example:
26b47fa

You can find it in the history tab of your GIT DESKTOP

Overwrite changes on the distant repository (local > remote)

git push --force origin master

Caution, delete on the distant repository, useful if you want to “delete” a commit that has been pushed.

Overwrite changes on the local repository (remote > local)

git reset --hard origin/master

Caution, deletes all the changes made not pushed to the remote git, useful if you want to “delete” the commits locally to have the same thing as on the remote git.

OnClick inside OnClick with React

While doing some test after putting the event OnClick in a DIV inside another DIV with the Onclick event, I was not able to trigger the OnClick event that was inside the other.

<div id="div1" style={{background: 'red'}} onClick={() => { 
setClicked('div1');
}>
  DIV 1
  <div id="div2" style={{background: 'green'}} onClick={() => { 
  console.log('you clicked div2');
  setClicked('div2');
  }>
    DIV 2
  </div>
</div>
When we click on the DIV 2, it triggers the DIV 1 onClick event

If you click on the green div, and then, if you check the logs you see that the log is working, you triggered the event.
But, if you check your state, you will see that it’s div1, and not div2, but you clicked DIV 2.
Your click action has been propagate to the DIV 2.

How to solve the problem

In order to solve this problem, we will need a fix. So we can trigger both events.
The problem is that the click action is propagate to the the other div.
So, we need to check when you trigger the onClick action that the user clicked on the good one.
To do so, we can add the following instructions in the inner DIV:

if(event.target !== event.currentTarget) return;

Which will give:

<div id="div1" style={{background: 'red'}} onClick={(event) => { 
if(event.target !== event.currentTarget) return;
setClicked('div1');
}>
  DIV 1
  <div id="div2" style={{background: 'green'}} onClick={() => { 
  console.log('you clicked div2');
  setClicked('div2');
  }>
    DIV 2
  </div>
</div>

With buttons inside a DIV with 3 levels DIV

If you have 3 levels of DIV and you want only the action of the button of the div the be triggered then you can use the following instruction in the end of the OnClick:

<div id="div3" style={{background: 'yellow'}} onClick={(event)=>{
...
event.stopPropagation();
}}/>

stopPropagation will stop the click event and so the second OnClick event will not be triggered.

Detect languages with PHP

If you have a standard website with CMS such Drupal, WordPress, phpBB… You may want to detect language in some pages.
To do so, you can use the following PHP function :

$_SERVER['HTTP_ACCEPT_LANGUAGE']

You should create an array of all the accepted languages, for example let’s say it’s French, English, Portuguese and Russian :

$acceptLang = ['fr', 'en', 'pt', 'ru'];

Then, you can set a default language, usually English the universal language, and detect if it’s in the array. Which will give:

$lang = substr($_SERVER['HTTP_ACCEPT_LANGUAGE'], 0, 2);
$acceptLang = ['fr', 'en', 'pt', 'ru'];
$lang = in_array($lang, $acceptLang) ? $lang : 'en';

Finally, in your code, you can use the value of the $lang variable to change the value of your text according the the selected language.

Inline function javascript to put cookies without JQuery

If you are using basic pages such landing pages, is it possible that you still use basic languages such HTML/CSS/Javascript.
Here is an example of putting cookies and a log of the cookies with an inline function:

<a style="cursor: pointer;" onclick='(function() {
  document.cookie = "cookie=value"; 
  console.log( "cookies:", document.cookie ); 
})()'>
  Click Me 
</a>

Because we are not using href but onlick, I added the cursor style of pointer so the user can know he can click.