What does clean code in React look like?
Posted by claudiolassala in Clean Code, react, Software Development on November 9, 2017
A few weeks ago I mentioned I was starting to learn React. I’ve finally finished a few days ago the PluralSight course mentioned in that post. The course was good for me to get my feet wet in React. However, as I stumble across React code in the Real World, I just knew I’d continue to see Spanglish in Programming.
See this example:
As I read the code above, specifically the bit indicated with red arrows, this how it sounds in my mind:
“if page type is greater than or equals to this constant and… wait, does the thing following that && actually evaluate to a boolean?!”
I have no sympathy for code that mixes different language in the same file. It gets even worse when the code mixes different languages in the same function, method, etc.
That reminds of the day XML literals were added to VB, and of course, people start using it in the worst possible ways. The ability to mix different languages can be very powerful, but to me, there should some separation so that the brain doesn’t have to deal with so much context-switching.
Anyway, the example above doesn’t look like clean code to me. I’ve asked a fellow co-worker who’s more experienced in React, and he showed me how the code above could be cleaned up: simply extract the bits that create HTML into its own functions.
I believe every developer should always ask: “Is this readable? Is this clean? Is there anyway I can make it better?”.
Creating a TODO template in Resharper
Posted by claudiolassala in Uncategorized on October 26, 2017
It’s been a while since I created a template in Resharper. I wanted to create one yesterday, and it took me longer than I thought it would, so I figured I should write a post I can refer back to. I probably got spoiled by how awesome CodeRush is when it comes to creating templates and was expecting similar experience in R#. Anyway…
The template I want to create is one where I type todo to expand the template, and then I can type whatever comment I want to attach to my todo:
Here’s how we do that. Go to Resharper -> Tools -> Template Explorer…
Select C# and new on the New Template button:
Type in the template:
For shortcut, I typed todo.
Notice I’ve included $date$. Anything within $ indicates we want to create a parameter. On the righthand side we can select from a list of macros that get evaluated for the parameter:
I’ve picked “Current date…” and set the specific format I want (yyyy-MM-dd):
Now when I type todo in the code editor…
I get the result I want and can type in whatever else…
Spanglish in Programming
Posted by claudiolassala in react, Software Development on October 25, 2017
Much like there’s a hybrid between English and Spanish called Spanglish, there’s also one between Porguese (Português) and Spanish (Espanhol) called Portunhol. It seems like the same happens with programming languages!
Here are some cases:
- C# and T-SQL
- C# and XML
- C# and HTML
- HTML and JavaScript
- HTML and CSS
- HTML, JavaScript and CSS
I personally do not like seeing a file that contains hybrid code. I’ve seen so many horrid C# files building nasty T-SQL strings. I’ve also seen “unit” tests really hard to read because of nasty XML strings it contained. And of course, we’ve all seen HTML files with both HTML, JavaScript and CSS all mixed into one big pile of mud.
One of the reasons I liked directives in Angular 1.x is the fact it mostly keeps JavaScript away from HTML. I say mostly because it still uses some JavaScript-like elements in order to perform for-each and things like that, but not to an extent where I’d forget that I’m reading HTML in an HTML file.
Then I look at JSX (example found here):
Is that JavaScript? Is that HTML?
So far, I’m not convinced I’ll like that approach, but hey, let me stick with it and see what kind of things I can build with this mess.
Como would usted gostar if yo tivesse written esta post the mismo jeito I escrevi this frase?
See what I’m saying? 🙂
Starting to learn React
Posted by claudiolassala in react, Software Development on October 24, 2017
I just got started learning React. Much like I did when I started learning Rails many years ago and documented my findings, I’ll do the same with React. If anything else, at least to have a place to come back to when I don’t remember things. 🙂
To get started, I’m following the following Pluralsight course: Building Applications with React and Flux.
So far, I’ve been through the intro and environment setup. Those were good for me to revisit some things I haven’t played much with yet: Node.JS, Browserify, Flux, and Gulp.
Here’s a quick run through of my notes…
React allows for the creation of components, in similar way to “directives” in Angular. Something got me scared, though: “JavaScript and HTML belong in the same file”. Hmm, I’m not sure I like that. That to me is the Spanglish of programming. I’ll wait and learn a little more before I tell you how I really feel about it.
React has no two-way binding, which I liked in Angular. Again, I need to learn a little more about this to see how I like it.
React can render both on the client and server (different from Angular). This sounds interesting.
Instead of using Sublime to follow along the course, I decided to install Visual Studio Code on the Mac to experiment with it. So far so good.
Speaking at Houston Tech Fest 2017
Posted by claudiolassala in Presentations, Software Development on October 10, 2017
I’m speaking at Houston Tech Fest this weekend. I always have a great time there so I always look forward to it. I’ll be giving the two talks below. If you attend to my sessions, please click the “link for feedback” for the session you attended and give me your feedback so I can work on improving it.
Be a Professional Developer and Write Clean Code (Keynote)
9:30-10:30am (Room 300)
Professional developers must write the best code possible, given what they know and what they have at the moment of writing. After a while, we may look at that code and wonder “wow, what was I thinking?”, and that’s a good thing: it shows we have improved. This session is about my observations regarding code I either wrote or had to work with.
Link for feedback
Beyond the Daily Stand-up: An Intro to Scrum (Keynote)
5:20-6:20pm (Room 304)
Countless companies believe they’re doing Scrum because they have 30-minute daily stand-ups (with people sitting and staring at their laptops) every morning. But Scrum is really a lot more than that. In this session, we see all of the main parts of Scrum (roles, artifacts, and events), and we also talk about some real-world collaborations in teams who adopted Scrum.
Link for feedback
Whenever I’m not giving a talk, I’ll most likely be hanging at the Improving booth. Make sure to come by and say hi! 🙂
Code Review talk at the HDNUG
Posted by claudiolassala in Presentations, Software Development on October 9, 2017
I’ll be speaking at the Houston .NET User Group (HDNUG) this Thursday, October 12th, at 6:30pm:
Code Review: I mean no harm!
As part of the work I’ve been doing for many years, I get to do a lot of code review. I usually document things that come up doing a code review so I can share it with other developers in the teams. In this session, I share some of the code I’ve looked at, the reasons why the code raised yellow or red flags in my head, and possible solutions I’ve proposed.
This is a fun talk for me and I’ve received great feedback from those who have seen it recently. It’s also going to be the first HDNUG meeting hosted at the new Improving Houston office. So I’m excited!
Here’s the location:
10111 Richmond Ave, Suite 100, Houston, TX 77042
Click here for directions. There’s plenty of free parking right at the location. See you there!
UPDATE: If you attend this talk, please, give me feedback by following this link. It’ll be a big help so I can improve it.
Naming Test Methods
Posted by claudiolassala in Software Development on August 24, 2017
When I first started writing unit tests, I followed the common convention in C# for method naming:
WithdrawingMoneyShouldDecreaseBalanceByAmount
Later, I adopted the convention of separating words with underscores:
Withdrawing_Money_Should_Decrease_Balance_By_Amount
At some point I figured the approach above makes the name of the method look like the title of an article. I then decided to go with the same approach, but making everything lower case:
withdrawing_money_should_decrease_balance_by_amount
In some cases, I may use uppercase if I want to draw attention to something in particular:
withdrawing_money_should_DECREASE_balance_by_amount
I like when the code is calm to look at, and it draws my attention to things as appropriate.
