DEV Community: AxelleDRouge

How to create the base of a map with ReactJS, Leaflet and TypeScript

AxelleDRouge — Fri, 13 Mar 2020 15:26:55 +0000

Liquid syntax error: 'raw' tag was never closed

Let's talk about ecology in the tech industry

AxelleDRouge — Thu, 30 Jan 2020 15:35:15 +0000

I have just read this post :

Digital Ecology

Andrei Rusu ・ Jan 19 '20

#ecology #productivity #motivation #climateaction

And it explains clearly my own observations too.
As someone who is really concerned by the state of the planet (since longer than I am coding), I want to think and debate on what could be done to improve the tech industry on those matters.

Do you know some interesting project to change some really energy consuming part of the job ?

For example, what about hosting data ? wouldn't it be interesting to be able to host our data close to us, in smaller datacenters powered by renewable energy ?
If you were a website used everywhere in the world, maybe you would need to use differents servers in differents countries, which would mean being able to power the server only at day, using solar energy ?

Or about the coding methods ? The way I see it, writting efficient code is even more important to use the less energy for the more actions.

I think that the subject is not only very important, but will become in the future more urgent. And by that time, we must have already changed our way of thinking and doing things.

We have 2 arrays of objects of the same class. How to substract the 1st from the 2nd, based only on one property?

AxelleDRouge — Sun, 08 Dec 2019 13:13:01 +0000

So this is the first technical post I am writing. It is mostly destined to my future self, but also, I am not really satisfied with the answer to the problem, I would love to have reviews on how I could improve the method.

I am currently working on the refactoring of an application. I have already written about it in other posts.
On of the biggest problems about that is that I am often confronted to necessity of working in the context of the application, using the pattern of the objects that the application needs, opposite to building this context.
It leads sometimes to problems to trying to improve solutions in a more efficient way than before, but still limited by the "guidelines" of the legacy code.

The problem

So after having implemented class patterns in the application, I found myself with the following problem :

I have a class with properties that will serve to populate a React Component.

The first send a simple array of string :

[
   {
      label:'label1',
      visible:false,
      otherProp:'something'
   },
   {
      label:'label2',
      visible:false,
      otherProp:'something'
   }
]

The second send an array of objects :

[
   {
      label:'label1',
      otherProp:'something'
   },
   {
      label:'label2',
      otherProp:'something'
   }
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

Both label properties refers to the same values.
And every objects will be converts to the same class.

The objective is to substract the first list from the second one, because their properties 'visible' is set at false.
And I want to do it with the smallest O that I can, and with not too much verbose.

EDIT :
To be more clear, I add the expected result of the function :

[
   {
      label:'label3',
      otherProp:'something'
   }
   {
      label:'label4',
      otherProp:'something'
   }
]

My solution

So first I identify the property of reference, here is 'label'.
I will extract the values of 'label' that must be eliminated from the bigger array.

Then I must compare the values of the result to the bigger array. Each element must be different from all the values of the smallest one.

const substractObjectsFromArray = (arrayTotal, arrayToSubstract, propertyOfReference) => {
   /* extract the list of values to substract */
   let extractValue = (arrayToSubstract, propertyOfReference) => arrayToSubstract.map(element => element[propertyOfReference]);

   /* substract the element based of the list */
   let arrayResult = (arrayTotal, arrayToSubstract, propertyOfReference) => 
       arrayTotal.filter(element => 
            extractValue(arrayToSubstract, propertyOfReference).every(ele => element.label !== ele) === true)
   return arrayResult(arrayTotal, arrayToSubstract, propertyOfReference);
}

So I tried my best to be the most efficient I could with the context I had. But I still lack a lot of experience and knowledge. Maybe there is a design pattern or data structure that could have more easily answered my problem, if so please share, I would love to learn about it.

Thanks for reading

What new skills have you learned in 2019?

AxelleDRouge — Wed, 04 Dec 2019 13:38:49 +0000

This year, I have learned so much as a web developer that I cannot completely make the list.
Last year, I knew mostly Node.Js (and I had barely started to scratch the surface) so I knew barely anything in front-end. This year, after having learned of GIS development (ArcGiS API, Leaflet), I learned ReactJS, Webpack, SCSS, many design patterns and best practices, ...
I feel like a new person, and I am excited by the idea of everything I could learn in 2020.

And you ? What skills have you learned this year ?

Explain Design Pattern Builder Like I'm Five

AxelleDRouge — Tue, 03 Dec 2019 15:16:05 +0000

So I have to create a lot of big objects for the project I am working on.
Looking for the most appropriate design pattern for my case, I searched the design pattern Builder and found many differents point of view, some contracting others.

Could someone explain the pattern, and what are the pro and cons of the pattern? maybe when to use it and when not? And maybe do you have other patterns that could work for manipulating big classes with more than ten properties?

Thanks a lot, it could really help me in my current work.

Nevertheless, AxelleDRouge Coded

AxelleDRouge — Fri, 29 Nov 2019 16:28:39 +0000

I started/continued to code in 2019 because...

I started to really code (and not just play a little with C) in 2016, and I have asked myself "Why did'nt I started this earlier???" many, many times since. My parents too, btw... because it would have saved a few years of study in architecture and environmental sciences (which I loved nevertheless) trying to find the best creative subject to work in.

The weirdest aspect of this? I have used and played with computers since I was barely 10 years old. I have always knew that I wanted to work with computers. But even if my father worked in computer software (as a pre-sales mostly) he didn't really liked to code, so even if I played a lot with my softwares, I never discovered the pleasure of building my own, at least with something else than a CMS or Dreamweaver. So I have searched however I could the best way to mix differents aspects of work that I loved, mostly technical studies and art, with a lot of creativity. Architectures seemed great for that, but no, it was not for me. Environmental Sciences was a subject where everything needs to be done, but no one wants to pay for it (wait for it...) then I did an internship in a software editor company to work on a software for sustainable management, and there I found it!

Since I have started, I have loved every minutes of the job. It's fulfilling, rewarding, with the challenge high enough to make me feel my brain work. The harder the algorithmn the better, if not I must learn something new. Always.
I am at home in front of my keyboard.

I deserve credit for...

Being able to write all that. You know it's against many cultures to speak that much about yourself in positive aspects. But overmodesty can only get you so far.
I am proud of being able to enjoy myself at work. It was a journey to get there, and I will have to continue to work hard to keep the journey enjoyable.

I hope to see my school/work/developer/tech community...

Learn more about itself. Sociology exists for us to be able to understand society, and communities, to improve ourselves. Assume our mistakes of the past, learn about them, and work on improving.
We should always thrive to become better than yesterday.

On tackling challenge alone, and enjoying the learning process

AxelleDRouge — Fri, 29 Nov 2019 14:13:06 +0000

December is nearly there and I feel the need to reflect on everything I have done this year.
I have taken parts in many projects with the organizations I am part of, I have joined a project to win the next municipal election to bring more democracy and ecology in the city I live in, I have taken an interest in open sources projects thanks to the hacktoberfest and dev.to (of course), I have once again tried to work on mine,... And I have started my new job.

This job has been full of interesting experiences where I had to learn a lot as a dev, to meet the requirement necessary for the success of the projects.

Nearly always alone, or two at most, to develop JS app that could have critical importance (in terms of security, efficiency, performances, memory management,...) I had to learn a lot. That's the thing about GIS applications, the clients often are in critical domains of industry that could have an impact on everyone. In my case, it was mostly about public safety, and security. It was incredibly motivating especially compared to my old job where I would work on the communication website for the IT department of the subsidiary of a bank, even if it was a NodeJS app.

So, how to tackle a challenge...

You could ask "but if the applications were so important, why were you nearly alone to work on it ?", well I would have to answer that JS dev that want to work in smaller company specialized in GIS are few and far between (especially here in France where the dev are in strong demand everywhere with recruiters fighting for every developers, even the less experienced ones (and I certainly don't qualify myself as experienced).
So I found myself without much support, just here and there, and I had to survive, sink or swim.

It's all about the mindset...

And, you know? I think those are some of the best methods to learn (if you are motivated). I had heard and learned here and there about methods (such as Test Driven Development or Design Patterns applied to JS) but it was in passing (in one of the greatest experience as a candidate for a job I had, maybe I could write something about that someday) or in the short learning course (a few weeks) that I had two years ago. But as I tackled the multiples challenges I had, I learned. And I learned a lot.

With the right resources...

In order to do that, dev.to has been a precious resource. Thanks for that, btw.
Because, in the case where you are essentially alone in front of your keyboard, asking yourself "seriously ??? how can I succeed, I don't even know where to start ?" You need references and knowledge. So I imposed myself a few rules.
First : I spend at least one hour everyday on dev.to (mostly at lunchtime, and believe me, in France it's not a small detail) I learn about every tech I've got an interest on, and some I don't because, why not?
Second : Everytime I learn something new, if it could improve the app I work on, I try to apply it in my work, it may be the answer to my current issues. No, just keeping the current code because I'm lazy, because I don't have the time, or just because... is not a way to learn and improve, and improve my code. I don't have much time to follow tutoriels in example app. If the logic is sound, I'll understand it quickly and force myself to use it everywhere until it becomes second nature and I can teach it to someone else (the ultimate proof that I have understood the methods and learned it). Of course, mastering it is a challenge in itself, but well practice makes perfect.

A strong necessity to do well...

For example, I learned ReactJS when I had to rewrite a supposedly React app. I insist on supposedly. It was the most terrifyingly written app I've seen in my, admittedly short, experience. But it was a very good way to learn. It was full of security holes and really dangerous for the client (who had most fortunately not made the security checks yet). You could take the OWASP recommandations and throw it through the window. With the best practices of maintenability and clean code. And the tests, of course. Because who need that? They may have been some use of the React library, but the previous person who developed the app clearly didn't take the time to understand how it works. Judging by the amount of JQuery used for complex algorithms (full of bugs of course) that I absolutely nothing to do with UI, well I was not impressed. So I campained to rebuild at the architecture of the app, in order to really use ReactJS, patch all the security holes (or should I say chasm, and finally have a maintenable app. And obtained the right to do it.

To start from the beginning...

And so I started by creating a stable development environment to use ReactJS and others packages. I had to setup the JS app with webpack, scss, babel.
Then, I created the basis architecture of the app (learning ReactJS in the process) for the components.
Then I transfered the old code to the right component, starting the hard refactoring process along the way.
When I had a good base with the legacy code, I first worked on the most urgent parts, the security holes. I had to understand quickly the logic in the old code and then learn how to recreate it using React (the hardest part was not the one you would think of). And when gradually I had an easier app to work on, and I gradually enjoyed the work much more, the work became quicker and I could improve the code more to make it more readable, to shorten the functions to their smallest part, making them easier to debug and test. I understood more and more the value of every best practices I had only heard or read about before.

Philosophy of a Good Developer

Sarthak Sharma ・ Nov 28 '19 ・ 9 min read

#productivity #webdev #beginners #career

And gradually build upon strong foundations...

I then turned on the css stylesheet (only one stylesheet for an entire professional React app) and proceed to cut it in pieces, to use scss to apply DRY method to it, to progressively make easier to maintain too, to eliminate the multiple rewriting. Somewhere along the way, when I had to redo the responsivity, I discovered and fell in love with CSS Grid. And discovered the superpowers of SCSS to use mixins, themes, functions,...

Sass: CSS With Superpowers

Codica ・ Nov 19 '19 ・ 4 min read

#css #showdev #webdev

Then after the n bug on the most important part of the applications, I resolve to rebuild from scratch the logic, even if I had to keep some less important parts. Because the current functions were so... well complicated to understand and correct. And the tinyest change could provoke bugs everywhere.
I decided that I was done with all that, replace the code completely. Having had enough of bugs, I used Test Driven Development combined with designs patterns and Data structures. If I even had doubts about the pertinence of using those techniques, they vanished quiet quickly. From the conceptions of the algorithms to the implementations, it was more efficient, more enjoyable and more powerful.
I started by writing the steps, then pseudo-code on good old paper. Then I toyed with patterns to find the most appropriated one. Then when I had every steps, I code the tests with the results I want, or didn't want, and then the functions.
And finally plugged everything in the components.

The one person/book that changed my life & made me a better developer

Eddie Aich ・ Oct 23 '19 ・ 7 min read

#webdev #javascript #career #advice

It's time to enjoy the results and... learn more

Now the application is (not bug-less) more secure, more efficient, load more quickly, has less bugs. I can add multiples functionalities to it with just a few hours of code, which certainly please my project manager.
And now I can certainly build upon everything I have learn. I have not tried React hooks yet. I have not use functional tests on React Components. I want to learn more about functional programming. And create impressive CSS animations.
And... And... And...

So, I am satisfied. And passionated.
I want to learn even more, and I never want this feeling of work done well to end.

I hope my experience would have helped someone else here.
For every junior developer out there, many someday you will find yourself face to face with what looks like an impossible high mountains, with noone behind you to support and watch your back. Don't worry, if you are motivated, if you are passionated and ready to learn, you will climb it. And looking bellow, at everything you've just done, the feeling of success will be that much stronger.

Thank you for reading :)