Forem: Alessandro Lepri

Smart Work is the new "Office"

Alessandro Lepri — Fri, 17 Jul 2020 08:35:01 +0000

In this period of our lives, millions of people work from home as a new office to fight this sad global pandemic due to Covid19.

Many companies have decided to keep their offices closed until the new year, while others have decided to adopt this modern philosophy as a new office default. While looking for a new job, I came across many job vacancies for Senior roles but almost none for Juniors.

Many companies that were actively recruiting juniors before the lockdown decided to cancel the positions or postpone them until the staff returned to the office 100% explaining that they would not have the resources necessary to insert a new junior role if working from home.

If smart working will become the new "office", what will all juniors' future be if many companies refuse to hire, considering that they might not have so much experience?
Will it become just a Senior/Lead market?

Send email from contact form using Express, Nodemailer and React

Alessandro Lepri — Wed, 15 Jul 2020 12:01:48 +0000

Many websites start by putting an email address on their Contact page. Others still use HTML mailto links. One of the most important reasons to have a contact form on your website is to reduce spam and keep your site secure. When you display your email address on your site, you're more likely to get unwanted emails. This is because robots crawl the internet looking for exposed email addresses. Consumers regularly have queries about a service/product that you offer. In order to make their life easier, displaying the contact details will give them a better user experience.
Today we will be going through the process on how to build a contact form from scratch by using Express, React, Nodemailer, and Bootstrap.
First of all, let's create our new folder in Terminal following those simple few steps:

Once we are into the right root "contact-form" let's start creating our template structure that we will need to develop our form.
We need to create our main folder as a first step, still, from Terminal we can do so by writing that command:

now we need to create all the necessary files and store them into the right folder, here's how from Terminal to your favorite editor the structure should look like:

Now, before moving to code it, we need to set up our environment hence first things first run "npm init" on your Terminal to create the package.json and hit enter for every single step in the process. This is just a simple set up that we will be going to change later on based on our need:

By now the server is not set up yet because still missing all the npm packages that allow us to run the app on our browser, so let's go through installed all of them and test it.
Run those command one a the time on your terminal:

after completing this step you will notice a "node_modules" folder appeared on your code structure. This is containing all the packages installed and it is extremely important not to delete it!!!
OK, set up is nearly done. In the next three steps, we will be going to have a test "Hello World" on our screen and having our localhost up and running by using Express.
1) Now let's config our webpack and this is how should look like:

2) Here's the template how .babelrc, index.html and .gitignore must be configured:

3) Let's create our app.jsx and index.js file:

As mentioned earlier, we need now to modify our package.json in order to run our app. What we need do is just implement our script command that will allow to run the server and also build the app to run on our localhost:

You might have noticed "nodemon" in the script, for now, is not important for us but by the time you will add extra packages to our app this could be very useful as it will automatically re-run the server for you, so you will not need to stop and refresh it to have all your new packages installed up and running. Just run "npm install nodemon -D" from your terminal id you would like to have it and then just "nodemon" to run the server
Now that our environment is up and running we can move forward and start building our contact form by using Bootstrap and Nodemailer.
Starting from the visual part let's import Bootstrap and axios into our app.jsx like so:

We will use "Form.Group" to get out template done and then we will define our state to make it works.

1) Create our state:

2) Create our Form:

Now that we have the first part completed let's make the magic happen in two simple steps:

1) Go into the config.js file, save our credentials as variables, create our "transporter" to use nodemailer:

Noticed that all our credentials are stored into the ".env" file that will not be visible to anyone if this is included in the ".gitignore" file. This step is crucial in order to protect your data!!!

2) Add a "POST" request to the index.js file and our contact form will be finally set up to send email, but do not forget to add this line on top on the file "const transporter = require("./config/config");"

Now your contact form is ready to go, you will need only to change the ".env" file with your data and get the style as you wish.
If you like to include a message if successful just add those couple of lines right after return in app.jsx as the file is already configured to make it visible

Here is my final design for this contact form. By default "send" button is disabled and it will change its status only if all the fields are populated with a min length assigned for each one.

IMPORTANT: if you are using gmail as service you will need to change to secure setting othrwise it will not work. Go to "https://myaccount.google.com/lesssecureapps" to change the setting to off

The importance of 'mobile-first' approach

Alessandro Lepri — Fri, 01 May 2020 14:26:39 +0000

Mobile users cannot be ignored!

Based on Google research, 68 million searches are carried out from mobile devices every hour around the World giving us a total of 69% of people starting their research from a mobile device.

That is why mobile-first play an important role when start planning a product design. It has more restriction but at the same time, it gets more versatile when needs to be expanded to tablet or desktop by adding and creating extra features.

By following this approach, the product design could lead us from the beginning to identify which are the primary, secondary, tertiary information important for the users that means that they are not to be deleted bu simple hidden based on which device you are using by the time. It helps to sort all those information in a way that in a smaller screen where less content could be fitted the users gets whatever needed immediately by removing any distraction, any unnecessary user interface decoration will turn up immediately in a better User Experience.

One important thing to understand the “mobile-first” concept is not to think about that as “responsive”.

Responsive Website Design is the formatting of a website that it can be optimally viewed from any type of device: PC, tablet, and smartphones. This might sound very familiar to the mobile-first approach because responsive web design is a feature of mobile-first design. However, responsive is different in that it starts with designing for desktop and working down in formatting for tablet and mobile.

From a design standpoint, responsive web design is a combination of moveable grids, layouts, and images that function from CSS media queries. So when the user is looking at a website on their phone and then moves to a desktop, they have a similar experience due to the flexibility of the layout. Pictures and content may be arranged, but the user can do and see everything on mobile and desktop.

Responsive came onto the scene before mobile-first, that is sometimes why there is confusion between the two approaches. Another example of a responsive website would be if you were to grab the corner of your browser and readjust the size. Make it smaller and you will see the content rearrange itself so that it is not cut off. Believe it or not, it was once common for webpages to just end where the browser did so that users had to scroll around to find content. It is best to follow the trends of the time and utilize a mobile-first approach. Responsive design does not take into mind limiting content. Users will get more out of their experience if they only see the essential information on their mobile devices. By only resizing the webpages, they still may not receive the functionality they need to have a positive user experience.