Technology vector created by vectorjuice

Let me start saying that I love discovering new things about JavaScript. Especially because I do not know some of its features. This taught to me to go through a process of learning, and understanding this programming language and part of its core.

Atom Design example of Atoms, Molecules, Organisms, and Templates
Atom Design example of Atoms, Molecules, Organisms, and Templates
I extracted this image from: — It does not belongs to me.

First of all, this is not something new. What I’m going to explain in here is how I applied the Atomic Design to my components and you can do the same or do it differently because what I’m expressing in here is not a standard, it’s just how I saw the folder structure within the UI Layer of the Hexagonal Architecture. This article is a personal journey and all that I’m about to discuss might be “wrong” for some of you. …

First of all, this is an opinion article due to the nature of the content within. It’s a kind of “try-and-see-how-it-works” type of situation. What I did was take some of the principles of the Atom Design Methodology and the Hexagonal Architecture and apply them to a React project. Therefore, this is an article showcasing my adventures in doing this.

⚠️ Important:

  • Read the comments I left on the code. They might be useful to understand why I did some things. Also in the comments I leave the path of where the files will reside.
  • This is just a way to structure your project folder and files. You can even use something simpler than this.

⚠️ Note:

  • I’m going to divide this article into two parts: The Hexagonal Architecture and the Atom Design Methodology.

How Everything Began

A few weeks ago I read an article from Netflix about Hexagonal Architecture. It was really interesting how this architecture separates everything from the domain, having…

When VSCode was released I was very happy. Mainly because I could develop extensions using JavaScript and I wanted to be one of the few people uploading an extension back in those days. At that time there were around six extensions available to install. To my surprise, the documentation was very poor of content. It was difficult to read and understand how to use the API and create an extension. Of course, the documentation improved over the time and the whole community around VSCode has done an amazing job with that, so thank you all for that!

I’m pretty sure there’s a lot of these kinds of articles, but I will give you my experience developing an extension and also I will guide you step-by-step to build a basic extension.

Thanks to the Internet we have access to a lot of information. This is a wonderful thing but at the same time it could be overwhelming and frustrating, especially when you are searching for a learning resource. There’s so many people out there saying: learn this in 5 minutes, watch this video tutorial, I even wrote and article about what I do when I’m coding using React. I still ask myself: “is this a good article?” “it worth it to pay for this book?” or “ should I buy this course?” These questions are sometimes resolved reading other people’s opinions…

I’m going to make a simple test with Jasmine and give you a step-by-step guide to upload your first npm package using Travis.

Before giving you a simple and small guide on how to deploy your npm package using Travis, I want to encourage you to write anything! even reinvent the wheel (I’ll write an article about this because I think it is an interesting subject). Writing code is the only way to practice and learn from your own mistakes. What is explained here it was my learning process using these tools. This means that I’m not an expert but the learning process was absolutely nice and successful. That’s why I wanted to share it with you.

Image extracted from:

I love React, and I might go so far as to say that I’m good coding with it. I’m neither an expert nor a beginner. One difficulty you might run into while working with React, aside from figuring out how to use the API, is that you have to keep in mind the people you are working with now and possibly in the future. In my opinion, what is important when I’m working with React is trying to keep everything as clear, clean, and easy to read as possible (I think about performance too).

Think Always in Functions

This is something you maybe already…

Diego Molina

I love coding web applications using JavaScript and React. 🤖 Sci-Fi books reader. I constantly reinvent the wheel to learn.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store