## Some numbers

Let's start with some figures: according to [The Shift Project](https://theshiftproject.org/wp-content/uploads/2021/03/Note-danalyse_Numerique-et-5G_30-mars-2021.pdf), in 2019 , digital represented 3.5% of global emissions. One might think at first that this represents a small part, but this figure is nevertheless equivalent to the carbon footprint of air traffic, which is renowned for its bad impact on the climate. And above all, the digital carbon footprint increases by 6% per year, which means that it doubles every 12 years. Digital carbon emissions are broken down as follows:
- 63% for the use of digital services
- 37% for the terminals production

Even if the development of new features often pushes users to renew their devices and therefore contributes to the production of new terminals, I will rather focus here on use since that is where developers have a direct impact. Emissions due to the use of digital technology are broken down as follows:
- 60% for user terminals
- 18% for networks
- 22% for data centers

## The Jamstack, an ideal solution?

As explained in my previous article, I trained in React.js last year. In the process, I discovered the world of the Jamstack which consists of pre-generating the pages on the server and directly send them to the client when he visits the site.

Instinctively, I told myself that this technology should have a positive impact on the carbon footprint since once the client has loaded the page, there are no more requests sent to the server. However, we have seen above that the majority of emissions come from the user's terminal.

This is even more true with the use of Single-Page Applications where the HTML of the pages is generated on the client side by JavaScript. In this way, we shift the energy consumption from the server to the client. And we can assume that servers have a better performance than users machines.

The use of the Jamstack still has a positive impact thanks to the absence of queries to the database. But if the user interface is not optimized, this gain will quickly be canceled out. It is therefore not a magic solution but it is indeed a good practice to use when possible in a global eco-design approach.

## Let's analyze the consumption of my site

To go further, I wanted to test on a concrete case and what better than my own site? I therefore used the [GreenFrame](https://greenframe.io/) tool which allows me to obtain an estimate of the carbon impact of a visit to a site.

A visit to my site therefore consumes 27 mg of CO2 equivalent, which is quite a good result. The distribution given by the tool in its free version is as follows:
- 51% for the CPU
- 8% for the network
- 42% for the screen

![greenframe result.png](https://res.cloudinary.com/damqzwhnk/image/upload/v1643719366/greenframe_result_949f313b43.png)

I therefore have two points that I must improve as a priority: the consumption of the user's screen and the consumption of his CPU.

Regarding the screen, I have already set up a dark theme which is supposed to reduce the consumption of screens using OLED technology, but this is not the theme displayed by default. So I set the dark theme as the default theme but it had no impact on the result. It therefore seems that the model used by GreenFrame does not take this parameter into account. To have a real impact on the consumption of the screen, this requires a deeper reflection to reduce as much as possible the time spent by visitors on the site.

Regarding the CPU, I imagine that I could improve my result by removing the logos animation which falls on the first section of the homepage. This animation uses the Matter.js library and should probably be energy consuming. Indeed, the CPU consumption went from 30mWh to 15mWh after this modification, i.e. a reduction of half. I finally decided to keep this animation because I think it brings a plus. I will certainly consider removing it when my traffic reaches several hundred visits per month.

## The importance of being able to measure

To conclude, I want to emphasize the importance of having tools to measure the impact of digital. Indeed, measurement is the basis of any improvement process such as the one I tried to apply in the previous paragraph.

It is also necessary to measure in order to be able to communicate and I think that communication on the impacts of our digital uses is a key to raising user awareness and perhaps changing habits. It is for this reason that I indicate in the footer of my site the carbon emissions caused by a visit to it.

## Sources

[https://www.gatsbyjs.com/blog/static-sites-fight-climate-change/](https://www.gatsbyjs.com/blog/static-sites-fight-climate-change/)

[https://marmelab.com/blog/2020/09/21/web-developer-climate-change.html](https://marmelab.com/blog/2020/09/21/web-developer-climate-change.html)

[https://marmelab.com/blog/2020/09/22/developers-save-the-planet-the-solution.html](https://marmelab.com/blog/2020/09/22/developers-save-the-planet-the-solution.html)

[https://marmelab.com/blog/2021/03/04/argos-comparing-the-energy-consumption-of-two-web-stacks.html](https://marmelab.com/blog/2021/03/04/argos-comparing-the-energy-consumption-of-two-web-stacks.html)

[https://theshiftproject.org/wp-content/uploads/2021/03/Note-danalyse_Numerique-et-5G_30-mars-2021.pdf](https://theshiftproject.org/wp-content/uploads/2021/03/Note-danalyse_Digital-and-5G_30-march-2021.pdf)

As a web developer and being sensitive to the climate change, I am necessarily interested in the impact of our digital uses on the climate and good practices to reduce this impact. So I wanted to know the energy consumption of a visit to my site.

large_co2.png

medium_co2.png

small_co2.png

thumbnail_co2.png

co2.png

What is the carbon footprint of my website?

## Why a React.js training ?

I am a web developer since my retraining in 2018. Until last year, I mainly developed sites under WordPress, first as an employee and then as a freelancer since 2020.

During my search for new missions, I felt limited. First in terms of quantity of available missions. There are certainly many opportunities in creating WordPress sites (remember that 43% of sites work with WordPress) but there is also a lot of competition, which means that it is not so easy to find new customers.

I also felt limited in terms of mission content. When we look at WordPress missions, we mainly find showcase sites, maintenance or troubleshooting. Without denigrating this type of mission, we quickly fall into a certain form of routine. I would add that these are mostly short-term assignments, which means having to regularly look for new clients and this is clearly not the aspect that I prefer in freelancing.

So I decided to improve my skills by training on a front-end framework. Today, can we call ourselves a front-end developer without mastering one of the main frameworks (Angular, React or Vue)?

The world of web development is changing so fast that it is mandatory to continually train on new technologies. This is also one of the reasons that made me choose freelancing, it is the freedom to choose the technology on which I want to train and orient my career.

So I had to choose the framework on which to train. I then did some research and got some information, in particular by consulting the report [Malt Tech Trends 2021](https://www.malt.fr/resources/reports/tech-data-2021) which takes stock of trends in the different technologies used for missions on the Malt freelancing platform.

It shows that Vue is currently less used than React and Angular but growing strongly. The most used is therefore React which is also growing while Angular seems to be on the decline. I will add that the learning curve for Angular seems steeper, at least initially, than for React and Vue. So I chose to focus on React.

## Why not train yourself?

It is true that all the necessary knowledge is available for free on the web. With a good method and discipline, we can easily train ourself. That's what I did when I started my retraining and that's what allowed me to get my first job as a web developer.

And it is precisely because I acquired most of my knowledge on my own that I wanted to confront it with trainers and other learners. I wanted to be able to talk to other students and get feedback on my level and on the latest best practices from trainers. Having a more formal framework also allows for faster progress.

It was therefore necessary to make a choice again but for the training organization this time. There are a lot of them that offer training as a web developer with short courses between 3 and 6 months, but there are far fewer that offer developers who already have experience to train on a specific technology.

This is the case of O’Clock, which has specializations in React, API, Symfony and WordPress. In practice, these courses are offered to O'Clock students after 4 months of training on the basics of web development, but they are also directly accessible for people who already have experience.

Concretely, the training is based on the principle of remote courses in a virtual classroom. That is to say, we have the advantages of having a real live trainer who can see our code and answer our questions and also the advantages of being at home with cookies and chocolate spread at will ! With the rise of teleworking, I also think that knowing how to work in a remote team is now a real valuable skill.

## My Opinion on O'Clock Training

In terms of the pace of the training, it was generally suitable even if sometimes a little slow for me, but you have to make sure that all the students follow. I take my hat off to the students who 4 months before this training had hardly ever coded, getting so many new concepts into a brain in such a short time is incredible!

Nothing to say about the trainer who was very competent and pedagogical, it was perfect. The days are divided into two parts: a “course” part live with the trainer and a “challenge” part in the evening which allows you to apply the concepts learned during the day.

The second month of the training is entirely devoted to the development of a team project by applying the Scrum method. In my case, it was a platform for exchanging skills between mentors and learners: [Mentor Me](https://www.thibault-barrat.com/en/projects/mentor-me-en). It is a very good scenario where the important thing is certainly as much collaborative work on a project as purely technical aspects.

After the training, O'Clock also allows its students to pass the Professional Title Web and Mobile Web Developer and the Opquast certification in "Quality control in Web project" which I was able to obtain with a score of 915 points out of 1000 attesting at an expert level.

In the end, no regrets for having done this training, it now remains to materialize by winning my first missions in React.

I took a React.js training given by the O'Clock school from September to November 2021. So I'm going to explain why I wanted to do this training, why with O'Clock and what I thought of it.

large_0x0.png

medium_0x0.png

small_0x0.png

thumbnail_0x0.png

0x0.png

My opinion on React.js training by O’Clock

Articles on topics related to the world of web development

large_couverture-linkedin.jpg

medium_couverture-linkedin.jpg

small_couverture-linkedin.jpg

thumbnail_couverture-linkedin.jpg

couverture-linkedin.jpg

Blog

Thibault Barrat - Freelance Web Developer

%s | Thibault Barrat - Freelance Web Developer

logo1-fond blanc.ico

List of my personal web projects or realized for clients.

medium_avatar-linkedin-banniere copie.png

small_avatar-linkedin-banniere copie.png

thumbnail_avatar-linkedin-banniere copie.png

avatar-linkedin-banniere copie.png

Projects

| Logo | Name |
| ---- | ---- |
| ![HTML5 logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637663299/544px_HTML_5_logo_resized_svg_52c765c23c.png) | HTML5 |
| ![CSS3 logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239234/1200px_CSS_3_logo_and_wordmark_svg_90f71bd3c6.png) | CSS3 |
| ![JavaScript logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239233/Java_Script_logo_5b583eb95d.png) | JavaScript |
| ![React logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637241884/1200px_React_icon_svg_3011cbf2ca.png) | React.js |
| ![Redux logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239340/5848309bcef1014c0b5e4a9a_7da1a7a202.png) | Redux |
| ![Next.js logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239340/next_js_logo_8_FCFF_51_DD_2_seeklogo_com_c18930e63b.png) | Next.js |
| ![WordPress logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239341/Word_Press_logotype_simplified_bb96690b13.png) | WordPress |
| ![Git logo](https://res.cloudinary.com/damqzwhnk/image/upload/w_25,c_scale/v1637239340/5847f981cef1014c0b5e48be_dbb9becd1d.png) | Git |




Skills

**Quality control certification in web project (Expert level)** - Opquast  
2021

**React.js training** - O'clock  school  
2021

**HTML5/CSS3** - OpenClassrooms  
**JavaScript** - OpenClassrooms  
**Git/GitHub** - OpenClassrooms  
**CSS animations** - OpenClassrooms  
2020

**Engineering degree** - Polytech Nancy  
2011




Education & Certification

**Freelance Web Developer**  
2020 - Currently

**Webmaster** - Harmonie Mutuelle  
2018 - 2020

**Project Manager** - Fives group, Separex, ER Ingenierie  
2012 - 2018

Experience

Always passionate about the digital world, I decided to retrain in this field after obtaining an engineering degree and working as Project Manager in the industry. So I am Web Developer since 2018, first within Harmonie Mutuelle, and now as a Freelance. My professional experience will allow me to listen to you in order to clearly analyze and define your needs. I also know that responsiveness is important to you, so I will make a point of responding quickly to any questions or requests.

About me

You will find here my articles on topics related to the world of web development.

Are you looking for a freelance to work on one of your projects? Let's discuss it! 
You can contact me via my contact details or via the contact form below.

Contact

Hello

My name is Thibault Barrat

I am a

large_photo détouré.png

medium_photo détouré.png

small_photo détouré.png

thumbnail_photo détouré.png

photo détouré.png

Here is the list of my last personal web projects or realized for clients.

My projects

Below are the services I can offer. In any case, do not hesitate to contact me to discuss in detail the feasibility of your project and obtain a quote (free).

- Integration of a provided design
- HTML5 / CSS3
- Possibility of integration into a WordPress theme

Web integration

- Developed with WordPress or Strapi / Next.js
- Choice of design theme from a selection
- Responsive site
- Integration of provided content (texts & images)
- Contact form
- Implementation of Google Analytics
- Training for the use of the site

Standard showcase site

- Developed with WordPress or Strapi / Next.js
- Custom design theme development
- Responsive site
- Integration of provided content (texts & images)
- Contact form
- Implementation of Google Analytics
- Training for the use of the site

Custom showcase site

- Developed with WordPress and Woocommerce or Strapi / Next.js and Snipcart
- Custom design theme development
- Responsive site
- Integration of provided content (texts & images)
- Contact form
- Implementation of Google Analytics
- Training for the use of the site

E-commerce site

- Completely tailor-made
- Ability to develop web applications with React & Redux

Specific developments

My services

## Features
This is a "comments" section where the visitor can increase or decrease the comment score.
To write a comment or reply to a comment, he must create an account and log in.
He also has the option of deleting or editing his comments.

![Comments section screenshot{1777x1134}](https://res.cloudinary.com/damqzwhnk/image/upload/v1644574900/Firefox_Screenshot_2022_02_11_T08_56_18_148_Z_3f00aa9540.png)

## Technologies used
For this project, I used TypeScript for the first time to develop the front-end part with React.js. Since this is a small project, I chose to not use Redux to manage the state. Instead, I used the React `useContext` and `useReducer` hooks.
Regarding the back-end, it is a REST API developed with ExpressJS coupled with a PostgreSQL database.
The authentication part uses JSON Web Tokens with an accessToken and a refreshToken.

Development of the back-end and front-end of a comments section according to a design provided by Frontend Mentor.

large_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

medium_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

small_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

thumbnail_Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

Firefox_Screenshot_2022-02-11T09-37-51.323Z.png

Comments section

This is the project carried out at the end of the React.js training that I followed within the O'clock school. It was carried out with 4 other students over 4 weeks with the following tasks allocation : 3 front-end developers and 2 back-end developers.

![Screenshot from Mentor Me site{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1639058156/Firefox_Screenshot_2021_12_09_T13_41_15_888_Z_ffd4fce464.png)

## Features
A user who wants to become a mentor and offer a course in a given skill or take a course offered by another mentor can register on the site.  
When he logs in, he can search among the courses offered, suggest a new course or add certain courses to his favorites to find them easily.  
From his profile page, he can view and delete his favorites, delete the courses he has offered himself and also update his profile data.  
There is also rights management, with an "administrator" role which validates the courses offered before they are visible on the site and which has the possibility of deleting all the courses and all the users.

## Technologies used
Regarding the back-end part, it is a REST API created with a PostgreSQL database and the ExpressJS framework.  
For the front-end part, we used React.js coupled with Redux for the management of actions, API calls and the store. We have also implemented the Leaflet library to locate the courses on a map.  
User authentication is provided by the JWTs with an accessToken stored in the state of the application which allows requests to be authenticated and a refreshToken stored in the localStorage which allows to keep the user connected and to retrieve a new accessToken.

## Youtube presentation
This project was the subject of a 15-minute Youtube presentation (in French) available [by clicking here](https://youtu.be/2S5FSWNPA5g?t=4591).

Development of a free platform which offers peer learning.

large_banniere-mentor-me.png

medium_banniere-mentor-me.png

small_banniere-mentor-me.png

thumbnail_banniere-mentor-me.png

banniere-mentor-me.png

Mentor Me

This is the portfolio you are currently looking to. I decided to completely redo my portfolio in 2021 for two main reasons:
- the old portfolio no longer suited me in terms of design and technologies used (especially jQuery and bootstrap)
- I wanted to add a blog section in order to regularly publish articles
## Technologies used
This new portfolio was also the opportunity to put into practice some of what I learned during my React.js training. On the other hand, I wanted to use a framework and not directly React to take advantage of the SEO benefits brought by the use of the two main React frameworks (Next.js and Gatsby) and also of the performance benefits brought by the static site generation. After comparing Gatsby and Next.js, my choice finally fell on Next.js.

Regarding the backend part, my wish to have a blog section strongly involves the use of a headless CMS. My choice fell on Strapi, which was quite easy to set up and configure.
## What this project taught me
First, through this project, I discovered Strapi and Next.js that I think I will reuse for other projects. This approach seems to me to be much more suited to the modern web in terms of performance, security, user experience and developer experience compared to solutions based on WordPress.  
Specifically, the small challenges of this project were the use of the Matter.js library to create the HTML, CSS, JS and React logos that fall and interact with the mouse in the first section of the homepage and also the implementation of a dark theme which was a first for me.

![Screenshot of first section of homepage{1893x699}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637761806/Firefox_Screenshot_2021_11_24_T13_49_13_047_Z_4343db05f8.png)

## Future developments
In the future, I would like to set up the internationalization plugin offered by Strapi in order to provide an English version of my site. But that first requires a lot of translation work for all the content so it will not be done immediately.

[UPDATE 10 December 2021] As you are currently on the english version, you can see that the internalization feature has been implemented.

Development of my portfolio with a new blog section and the application of the knowledge acquired during my React.js training

Portfolio

The goal of this project was to start from an existing WordPress theme, in this case the [Bridge theme](https://bridge250.qodeinteractive.com/) and to customize it in order to comply with the corporate identity and style quide of the customer and also consistent with the content of the site.  
This project also allowed me to test the use of the WPML plugin to set up multilingual versions of content.

![Screenshot from heem.lu{1905x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637612914/Firefox_Screenshot_2021_11_22_T20_25_37_881_Z_1d3188d392.png)


Customization of a WordPress theme and implementation of internationalization for a personal services company

large_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

medium_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

small_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

thumbnail_Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

Firefox_Screenshot_2021-11-23T10-44-29.386Z.png

Heem

The goal of this project was to create a completely custom WordPress theme according to the design provided by the client. What has been interesting in this work is above all the construction of the design which is minimalist and modern and which, although it is a WordPress site, has the same behavior as a Single-Page Application.  
That is to say that the background of the site consists of a carousel presenting different bathroom designs and the navigation between the different pages does not reload the page but will modify the content displayed in the tab which opens on the right of the page.  
The implementation of this functionality was facilitated by the use of a JavaScript library: [Pjax] (https://github.com/MoOx/pjax)

![Screenshot from New Bath site{1920x942}](https://res.cloudinary.com/damqzwhnk/image/upload/v1637762642/Firefox_Screenshot_2021_11_24_T13_56_45_641_Z_cc7543a1be.png)

Development of a custom WordPress theme for a company specializing in bathroom design

Hello My name is Thibault Barrat I am a |