DEV Community: Carlos Galarza

Top Engineers I have learned the most from 💡

Carlos Galarza — Tue, 05 May 2020 17:08:53 +0000

I have been working in the software industry since 2010. I learned a lot on this journey by trial and error, contributing to OSS, and working on enterprise software. But a thing that helped me a lot in my career was learning from top people, top engineers, people with skills I did not have, and ideas I did not understand, and that was possible because they shared their knowledge through insightful articles and content. So, thanks for sharing your experience and helping a lot of people on this journey!

I divided this list into two major topics, Software Engineering and Architecture and Web & JavaScript, so without further ado, here it is.

Software Engineering and Architecture

Martin Fowler: martinfowler.com, @martinfowler
Joel Spolsky: joelonsoftware.com, @spolsky
Martin Kleppmann: martin.kleppmann.com, @martinkl
Jeff Atwood: blog.codinghorror.com, @codinghorror
Eric Evans: domainlanguage.com, @ericevans0
Robert C. Martin: cleancoder.com, @unclebobmartin
Rob Pike: commandcenter.blogspot.com, @rob_pike

Web & JavaScript

Douglas Crockford: crockford.com, @douglascrockford
Jake Archibald: jakearchibald.com, @jaffathecake
Axel Rauschmayer: 2ality.com, @rauschma
James Long: jlongster.com, @jlongster
Kyle Simpson: me.getify.com, @getify
Christopher Chedeau: vjeux.com, @Vjeux
Evan Wallace: madebyevan.com, @evanwallace
Rich Harris: github.com/Rich-Harris, @Rich_Harris
Nicolás Bevacqua: ponyfoo.com, @nzgb
Dan Abramov: overreacted.io, @dan_abramov
Kent C. Dodds: kentcdodds.com, @kentcdodds
Nicholas C. Zakas: humanwhocodes.com, @slicknet
Andre Staltz: staltz.com, @andrestaltz
Krasimir Tsonev: krasimirtsonev.com, @KrasimirTsonev
Basarat Ali Syed: basarat.com, @basarat

So if you are interested in learning Software Engineering or you are already on the journey, I highly recommend you follow them and read their articles. I am sure you will find insightful articles that will level-up your skills!

PS: For sure, I have left out of this list a lot of valuable people, but thank you to everyone that shares useful content 🙂

Follow me on Twitter @carloslfu and here on the DEV Community; I share insights on Software Engineering often :)

The Computer Language Benchmarks Game

Carlos Galarza — Tue, 04 Feb 2020 12:30:01 +0000

An interesting resource for people that care about performance and efficient resource utilization or just for the curious is The Computer Language Benchmarks Game. Some interesting history about it here.

Two benchmarks that I found useful in the past is the Go versus Python 3 benchmark and the Go versus NodeJS benchmark, those were part of the reasons why I started using Golang for my projects.

What do you think about it?

Follow me here on the Dev Community,
and on Twitter: https://twitter.com/carloslfu

Have a good day :)

Why didn't Microsoft use React or Angular to build Visual Studio Code?

Carlos Galarza — Tue, 21 Jan 2020 19:37:38 +0000

A text editor like Visual Studio Code is a complex and performance-critical application. In this case, is better to start from scratch and use pure JavaScript instead of a framework. A clear example of this is that in 2014 the Atom text editor was rewritten in React and in 2015 it was rewritten again into pure JavaScript because of performance concerns.

I found this question poorly answered on this Quora thread and it is my motivation for writing this short article.

If you have any questions, feel free to ask me in the comments.

References:

Moving Atom To React: https://blog.atom.io/2014/07/02/moving-atom-to-react.html
Implement text editor DOM updates manually instead of via React: https://github.com/atom/atom/pull/5624

Curious about relevant software development topics?

Follow me here on the Dev community,
and on Twitter: https://twitter.com/carloslfu

Have a good day :)

5 reasons to use Golang

Carlos Galarza — Mon, 22 Jul 2019 22:48:26 +0000

There are several reasons to start using Go:

It’s statically, strongly typed with a great way to handle errors, this makes Golang more reliable and robust.
It compiles down to one binary. Just execute it in wherever you want.
It’s faster.
The main reason why I use it is simplicity, there is only one way to do things, no more “beauty” and “clever code”, this point increases your code readability. You and your team always know what a piece of code is doing. It is the Golangs killer-feature 🔥.
For the reasons above, it is easier to teach Golang to new devs from scratch and they will get productive in a short time.

In my case, I used NodeJS for a long time and had Golang under my eyes once I read an article by Tj, an important member of the NodeJS community. If you have used Node, probably you have used ExpressJS or at least read about it. Well, TJ Holowaychuk is its creator! I leave here the link to the article: https://medium.com/code-adventures/farewell-node-js-4ba9e7f3e52b

In the beginning, Golang is a bit weird and your code gets larger, you have to forget about Array.map .. filter .. and all kinds of “beauty” things of JavaScript and other modern languages, also, you have to handle every possible error. But, in the long-term, it makes your code more readable, simple and stable.

For example, the unique way to iterate in Golang is “for” and there is no ternary operator 😮, but this is the Golang strength 💪, simplicity.

A couple of months ago with my team, we are using Golang for building the LiciMatic’s backend, the platform I work on, and now Golang is my preferred language.

So, I recommend you learning Glango, you are going to learn a lot and you will have big professional opportunities.

I want to highlight that Golang is at the top of the best-paid languages of 2019: https://lvivity.com/top-highly-paid-programming-languages

I leave here 3 free learning resources:

Want to learn more about Golang and other interesting tech topics?
Follow me here on Dev.to and on Twitter: https://twitter.com/carloslfu

Thanks and happy learning! 🙂

How to write accessible code?

Carlos Galarza — Thu, 23 May 2019 00:54:24 +0000

Group code blocks in a logical way:
- Keep your variables close to where they are used.
Use short names:
- Naming a variable “a” or “b” is fine.
- But … I lose context, right? … DO NOT! If you respect rule 1, there is no problem, you will reduce the redundancy and the cognitive load of your code.
Use names that speak for themselves:
- Nothing of “mVal”, “tRows”, etc …
Use the new lines intentionally:
- In the same way that you divide a text into paragraphs, make the new lines in your code communicate something.

If you want to expand this information I recommend this video, it is based on Go but it applies to other languages as well ->
⚡️⚡️⚡️

Do you wanna know more about this topic and other interesting tech topics?

Follow me on Twitter: https://twitter.com/carloslfu

Thanks! and happy learning.

Are you using Redux or thinking about using it?

Carlos Galarza — Sun, 28 Apr 2019 15:38:25 +0000

Are you using Redux or thinking about using it? YOU DO NOT need it! React is a complete library to control the state of our applications. Using React Context in combination with Local State in your components is more than enough. Simplify the management of the state in your project and save valuable bytes 💰. How? Use useContext and useState, I recommend this great article by Kent C. Dodds, comes with examples and a deep explanation of this pattern that I use in all my projects and is very powerful: Application State Management with React. If you have any questions, feel free to ask.

Follow me on Twitter @carloslfu if you want to learn more about React, programming, and technology.

Good luck!

Tackling UI complexity with State Machines

Carlos Galarza — Tue, 20 Nov 2018 17:35:31 +0000

I’ll tell you my story, maybe is yours too …

So it’s a great day at my workplace and I start coding an app that seems pretty simple.

Time passes, I get some tasks done and, at some point, the application starts getting messy.

I solve the problem by making some tricks because I’m quite smart and experienced developer 😉.

But, I start feeling dirty and sometimes astonished about how that simple idea, I had in my mind, is getting so complex and verbose to map to code. I think there is no one-to-one relationship between my mindmap and the code, it seems like a one-to-many relationship.

I’m the creator. I know how things work and this is not worrying me so much, because I do my best to write understandable and readable code.

After that, the app starts getting bigger and now I have to work with a colleague to speed things up.

Right now my colleague has many questions because he doesn’t know how the f*ck the app works! and what’s the idea behind it. I care about his health and I take the time to explain him the code. I’m a kind person I don’t want to make him waste that time 😅.

Sometime later I’m assigned to other app and, right now, I can understand the pain it was to my dear colleague to understand my code because I have to figure out how the cr*p this new UI code works.

Some months ago I’m reassigned to the first app for solving a bug, and you know, I should figure out how was my thinking these days.

I always thought that there is something I’m missing, some solution that doesn’t come with extended and outdated UI specification documents. Something that makes me and others catch the idea faster and spend less time understanding the code. And yep, I was right, finally, I found it.

Introducing Statecharts

These problems happen to almost all people involved in any kind of reactive systems development such as UI development and, some people are too used to struggle with it, that it seems unavoidable and natural, but it is not.

The problem is a well known one, reactive systems are complex because of event orchestration complexity. And, solving this problem is a matter of getting things explicit from the beginning. So, your mental model should be coded in a way that you and others can easily reason about.

In simple terms, a Statechart is a pure function that contains all the logic related to the event-state orchestration in an explicit way. This way we can avoid the most common bugs and, if there are some, it’s easy to find them.

With statecharts, you have a simple and manageable way to organize this logic by using a graph and some constructions. This gives us the power to reason about complex UI flows at the same time as prevents unexpected behavior to happen. Just FYI this formalism is used at NASA for the Mars Science Laboratory Mission.

Yep! Curiosity uses statecharts! 😮 😎

state, actions = Statechart(state, event, data?)

You give to the statechart the current state, the event that happened and optionally some external data, and it gives you back the next state and the actions that should be performed. Actions is a pretty simple concept, you can understand it as commands or functions that should be executed in response to the happened-event.

You already have state machines in your code

So, you already have this logic in your code but, the problem is that it is no explicit. Here I have to quote Reginald Braithwaite:

*Any sufficiently complicated model class contains an ad-hoc, informally-specified, bug-ridden, slow implementation of half of a state machine. — Reginald Braithwaite in How I Learned to Stop Worrying and ❤️ the State Machine*.

You already implement all kind of flows in your UI code, and probably you do it by manually handling all the cases and figuring out the edge cases by doing some exploratory testing. This is known as the bottom-up approach and it is the most common approach to developing UIs these days. We attach event listeners to UI components and perform some kind of action inside it. For instance, in vanilla JS you can have:

const signUpButton = document.getElementById(‘signUpButton’)
signUpButton.addEventListener(‘click’, () => {
  // mutate state and/or perform side effects
})

But what about Redux? Well, in Redux-like architectures you split the event handlers in reducers, for state management, and effect handlers. This is a great practice and Redux solves the state management problem, but you still have to struggle with the event orchestration one.

A matter of paradigms

The above approaches are known as the event-action paradigm. In this paradigm, when some event happens you fire an action in response to it. The problem with it is that, in order to coordinate the UI, you have to put a lot of conditions inside your event handler and even worse you may have nested if-else conditionals, switch cases and so on.

In Redux you split this up in the reducer and the effect handlers but you still have the same problem. This paradigm makes your code complex and bug-prone. You as a developer have to maintain all those cases in your mind and be careful to not forget something.

Statecharts use the event-state-action paradigm which is the nature of complex UIs. And you may say, what’s the difference between statecharts and state diagrams. Long story short:

statecharts = state diagram + nesting + parallelism + broadcast communication

Building a Statechart 🏗

There is a notation for building statecharts using XML called SCXML. We are going to use XState, a JavaScript library which has its own notation but implements most of the things of the SCXML spec. Let’s hands-on building our first statechart.

State diagram

A state diagram is built of nodes and edges. A node represents one of the possible states of the machine and, an edge represents a transition between states. Transitions are dispatched in response to events and, very often those are user events.

So let’s implement a simple on-off statechart:

Nested states

Let’s make some nested states. Suppose that when our UI is in the on state traffic lights are visible and the user can click on them.

Conditions

We can make conditional transitions. For example, I want that the user only turn off the machine while it is on the on.green state. For that lets use the In Guard.

Conclusion

You may be wondering, but in which cases do I need it? Well, let’s start using it for widgets and stateful components.

So, when you have to orchestrate events (state + network requests + user interaction + anything), remember the Statechart is your friend.

What’s next

Next article I ‘ll show how to create a real-world app as well as explaining some good practices and tips for building statecharts for your apps as well as other Statechart features.

Thanks to SchoolApply and especially to Mikael Karon who encourage me to learn and discover the Statecharts world.

Do not leak your codebase in private projects

Carlos Galarza — Wed, 12 Sep 2018 11:18:29 +0000

Sometimes tech people forget to disable source-maps in production, especially when using the create-react-app project.

This might sound too basic, but I've looked this mistake so many times in private production projects.

TL&DR ... not really, this is a very small article

The create-react-app build command is not production ready, before publishing your project you should remove source-maps. However, this applies to any private web project, so, be careful and take a look at your production code maybe you are leaking the whole codebase.

The way I have learned programming

Carlos Galarza — Sat, 28 Apr 2018 10:55:15 +0000

I have learned programming 16 years ago and right now I continue to learn things every day. By the way I improved how I learn. Here, I will teach you how is my process after a many years of programming and learning many things.

For me, there are 3 levels of expertise in the field you want to learn:

Basic flow and concepts, for this I recomend videos
Intermediate level, for this I recommend textual tutorials
Advanced level, I recommend technical documentation and blog posts from experts in the field

Videos 🎥

Videos are really nice when you don’t know how or where to click in the screen. I see video tutorials when I don’t know how to do basic things such as using an IDE or the workflow of an specific tool. In these cases, seeing things in video is insightful.

Textual Tutorials 📚

If you have learned the basics, you should read and follow textual tutorials. The main advantage is that reading tutorials is faster than seeing videos. Also you can copy & paste example code and try it out by yourself.

Technical Documentation and Expert Blog Posts 📎

The best tip for being a better programmer is IMO:

Gain a deeper understanding of the system. André Staltz

After experimenting and applying the knowledge you learned in textual tutorials you can go ahead and read technical documentation that allows you to going deeper in the field.

Also, you should see for expert blogs that helps you with advanced concepts and the best practices. Follow them and constantly search for new articles.

And a bonus step …

Iterate over and over ➿

Once you have an advanced level in a field, starts seeing for specific things or complementary topics you feel uncomfortable with and start seeing videos, read textual tutorials and so on.

There are many amazing knowledge out there and you can learn a lot if you are curious and disciplined. So I ecourage you to start learning something you want right now! A paradise of insights and awesomeness are waiting for you behind your screen.

I would love to read in the comments what is the way you learn, so go ahead and write it!

Thanks for reading :)

Make a P2P connection in 10 minutes

Carlos Galarza — Mon, 19 Mar 2018 22:19:54 +0000

This is a short guide on how to make a P2P chat. My aim is to give you only a taste if you like I could write a deeper article explaining how all these things work. That said, let's start.

Preparation

The only thing you will need is the latest NodeJS and your favorite editor, mine is Visual Studio Code. Now create a folder for our project, open a command line, initialize an npm repo with npm init and install some libraries we will need with:

npm i --save discovery-swarm dat-swarm-defaults portfinder get-port

Our first P2P connection

Let's start by doing a simple P2P connection, thanks to some great libraries from the Node.js community it is too simple:

Run this code in two consoles and this is it!. Now you can run it in other device right in your LAN and should work even without internet, also you can share and run this script in any other computer or device with internet around the world and it just works, so nice!

How it works?

This code uses the technology behind the Dat Project. All communications are decentralized and work over a P2P network.

...

I love feedback. Ask me questions, comment on your experience with P2P technologies and share your ideas! Thanks for reading :)

This series is possible thanks to the awesome tools delivered by the DatProject, Webtorrent and the NodeJS community.

Follow me on here and on Twitter if you want to know more about tech and distributed P2P networks: https://twitter.com/carloslfu

Can I publish a post here that I have published in other platform i.e. Medium?

Carlos Galarza — Wed, 21 Feb 2018 06:13:21 +0000

I am new here and want to share interesting things I know and help others, I have some posts on Medium and I don't know if it is allowed to publish same content here, thanks!