React Summit Remote Edition Highlights

When the year started I was looking to attend to React Summit in Amsterdam. So I was super happy to hear that they were doing a remote edition. Woke up at 5:30 am to attend and it was totally worth it! Specially the workout break!!!

reactSummitWorkout

Let me show you some of the highlights:

Continue reading “React Summit Remote Edition Highlights”

Thoughts on Snapshot Testing

Since I moved to react at work I have been using and trying different testing strategies and I wanted to share some thoughts and best practices around snapshot testing.

In the past I have worked on different projects on frontend, from simple websites to complex editors. Along the journey I have used different testing frameworks and tools.

While recently snapshot testing has become popular, in my opinion it can be a double edged sword, and here is why.

Continue reading “Thoughts on Snapshot Testing”

Weekly Digest #3: Understanding Javascript Internals

In this weekly digest I want to focus on resources that have helped me learn Javascript inner workings. In order to master any coding language it is necessary to understand how it works.

Continue reading “Weekly Digest #3: Understanding Javascript Internals”

Creating gifs from the OSX terminal in 2 easy steps

I like sharing quick demos to all the stakeholders as soon as I start developing something new. I find that sharing soon helps to get early feedback and make sure that everyone’s requirements are covered.

But sometimes it is hard to find out the proper format to share. If I share only an image, then all the interaction is lost. Or if I share a video, then depending on the format some users might not be able to open it (and is also usually big in size).

After trying a few different formats I found that gifs are the best way of sharing quick demos. I follow a 2 step approach to it:

  1. I record the screen using Quick Time.
  2. I convert this CLI I found online called screengif.

Continue reading “Creating gifs from the OSX terminal in 2 easy steps”

Weekly Digest #2: Latest web open source releases

  • Storybook 5.3 was announced on January 14th. Support for MDX (markdown and javascript) to write stories and docs, auto-generated docs for popular javascript frameworks (Vue, Angular, Ember and Web Components), Declarative configuration, integration with popular design tools (InVision, Sketch, Figma, Abstract, Adobe XD), official support for Web Components!, and more.
  • Typescript 3.8 was announced on February 20th. Bringing Type-Only Imports and Exports, ECMAScript Private Fields support, `export * as ns Syntax`, Top-Level await, es2020 for target and module, JSDoc Property Modifiers, Better Directory Watching on Linux and watchOptions, “Fast and Loose” Incremental Checking, and more.
  • Also, Typescript 3.9 beta was announced on March 27th. Improvements in Inference and Promise.all,  Speed Improvements, Uncalled Function Checks in Conditional Expressions, etc.
  • Nextjs 9.3 was announced on March 9th. Includes a lot of new features for static site generation and a smaller runtime (32kb less!!). Also they enabled Github discussions check what the community is asking!.
  • Babeljs 7.9 was announced on March 16th. Support for `@babel/preset-modules` directly under `preset-env` with a flag (`bugFixes`), Ts 3.8 support, flow declare fields, and a new JSX transform (under experimental flag).  Also check Babeljs 8.0 roadmap (which is targeted for 2020)
  • Prettier 2.0 has arrived!!! Officially announced on March 21st. Improved method chain breaking heuristics, Ts 3.8 support, changed the default trailing comma to ES5 standard, changed the default value for arrowParens to always, and a bunch of fixes. Looking forward to try this release!!! NOTE: works for nodeJS versions >= 10.
  • Git 2.26 was announced on march 22nd. Performance improvements due to making the V2 Protocol a default, new config options, `git sparse-checkout` which should speed up mono-repo checkout process, improved `git grep` performance,  and more.
  • Last but not least, React Router v6 is in alpha (close to beta). Reach Router is being “acquired” by React Router, improving routes, changing how history API is used and reducing the bundle size (from 20kb to 8kb!!!),

Enjoy!!

Weekly Digest #1

  • Best practices on JavaScript modularity: when to use named exports, how to group code and what to avoid. Check JavaScript Module Best Practices.
  • Understanding the proxy pattern and adding that to your toolbox is super useful. In the past I have used proxies for multiple purposes (logging, performance, caching results). Learn more about JavaScript proxy in JavaScript Proxy Object Explained post.
  • Have you read “JavaScript: the good parts”? Check this article on The Magic Behind JavaScript Sintaxis Shortcuts to learn more about not so good practices (well except maybe ternary operator)
  • Planning to try all this out? Check this article on best online IDEs: 12+ Best Online Code Editors for Web Developers. I recommend Stack blitz (it is vs code online)
  • Let’s finish with some js basics. Here’s an article that quickly explains how to declare variables: JavaScript Variables: var and let and const. I tend to agree with the statements made in the article, const is your ally but there is one caveat that you need to understand. A value declared in a const cannot be mutated, but objects or arrays are always mutable constructs, so while you can declare an object or an array as a const it is possible to mutate its properties/items. It only won’t be posible to assign something else to that const!

Enjoy!!!

Partial Application made easy with ES6

In this post I will present a quick example on how ES6 can improve readability and help build code that is easier to maintain.

Also, I will be exploring partial application, a nice technique to keep in your developer toolbox.

Continue reading “Partial Application made easy with ES6”

Javascript as Promised

Promises have been there for a while now, officially released in ES6 but already being supported by most browsers before that and/or polyfiled by libraries.
They are a game changer in Javascript, helping to make our code more functional and in result easier to maintain and read.

As Martin Fowler defined them, “Promises are objects which represent the pending result of an asynchronous operation”.

Continue reading “Javascript as Promised”

Callbacks in Javascript

Any usual function call in Javascript is considered a synchronous call. The engine will get to that line, call that function and wait for it to get resolved. When that gets resolved it will continue to the next line. Consider the following example:

function increment(a) {
   a++;
   return a;
}
Const a = 0;
a = increment(a); // 1
a = increment(a); // 2

In the previous example, when the engine gets to the first increment, it will wait for the function to be resolved in order to continue to the next call.

Continue reading “Callbacks in Javascript”