Políticos, Líderes y Empresarios: Qué deben hacer y cuándo.

Este artículo es una traducción del articulo de Tomas Pueyo, Coronavirus: Why You Must Act Now. Artículo escrito el 10 de Marzo de 2020 y actualizado el 11 de Marzo.

Con todo lo que está pasando con el coronavirus, es muy difícil saber qué tenemos que hacer hoy. Debemos esperar más información? Debemos actuar ya?

Estos son los puntos que se discuten en este articulo. Vais a ver mucho gráficos, datos y modelos de diferentes fuentes:

  • Cuántos casos de coronavirus habrá en tu área?
  • Qué pasará cuando estos casos se materialicen?
  • Qué deberías hacer? …


Image for post
Image for post
Photo by mauRÍCIO santos on Unsplash

This is a small game I developed for a training. It’s supposed to help you get a grasp of HTTP networking.

The game has no interface. HTTP requests are the interface 🤯

I will explain how to play the game in this article. However, I won’t explain HTTP. I leave that to the reader. Some links in case you don’t know where to start: the networking chapter of the training, MDN explanation and Wikipedia.

Save Westeros

You have to save Westeros from The Night King!

WINTER IS COMING!

The interface of the game is an API. …


How to create a shareable link for your mobile application

Image for post
Image for post
Photo by You X Ventures on Unsplash

It took my a while to figure it out how to easily add deep linking to my mobile application. I didn’t find a good tutorial on how to do it.

I hope that this article fills that gap. However, this is a very specific gap. This is ONLY applicable to mobile applications using:

  • React Native with Expo
  • Using react-navigation for routing
  • Have a website they can use as a proxy for the deep link

What is Deep Linking?

Simply put, it’s a link that will open your application (not a website) in a specific screen.

The link (in iOS) looks something like this:

instagram://user?username=wearehutt

Unfortunately, it works different in Android. …


Why duplication in state management is a recipe for disaster

Image for post
Image for post
Photo by The Nigmatic on Unsplash

You've probably been warned to avoid duplication in state. Much has been said about it and why it should be avoided but from time to time, a situation may arise where you think that the rules don’t apply to your own unique situation — that you won’t have any of the problems you’ve been warned of. There’s a good chance that you’ll be wrong. Duplications in state are a way to almost guarantee the appearance of bugs sometime in the future when new modifications are introduced to your code.

Demo

I have built a small app on CodeSandbox to showcase this bug. The point of this article is demonstrated using React but, of course, the lesson to be learned is true to any other implementation. …


Image for post
Image for post

Split your task in two: State Management and State Rendering.

You should split the task in at least these two pieces: State Management and State Rendering.


Image for post
Image for post
Photo by Ilija Boshkov on Unsplash

The same also applies to any state management tool

If you are working on an application, chances are that you are using a list of items: users, comments, posts, todos, movies etc.

The most common data structure to choose for lists in Javascript is an array.

I would like to explain why that might not be the best choice when storing those lists in a state management tool like Redux or React Context.

C[RUD] operations on a single item

If you want to make one of the RUD (read, update or delete) operations to a single item, you always need to iterate.

Except for the create, where you just need to add the item to the list. …


Image for post
Image for post

TLDR: Not yet if you are a beginner

Hooks are the new hype.

Everyone is talking about them. If you are just starting in React you might wonder what is all the fuss about? And more important, should I learn them?

The React documentation says: “You don’t have to learn or use Hooks right now if you don’t want to”

They suggest that there is no immediate NEED to learn React Hooks. Let’s take a look at why that might be.

They’re not new.

The React documentation says: “Hooks don’t replace your knowledge of React concepts”.

It’s not about NEW features or new functionality. It’s about using current features in a different way.

If you are new, you are probably still struggling to grasp the concepts of Props, State, Refs and Lifecycle. To learn those concepts, I believe that it’s easier to start with the old way. …


TLDR: Embed the expression

Image for post
Image for post

As a coding instructor, I have seen many students trying this:

render() {
return (
<div>
<h1>List of todos</h1>
console.log(this.props.todos)
</div>
);
}

This will not print the expected list in the console. It will just render the string console.log(this.props.todos) in the browser.

Let’s first take a look at some solutions which are very straightforward, then we will explain the reason.

The most used solution:

Embed the expression in your JSX:

render() {
return (
<div>
<h1>List of todos</h1>
{ console.log(this.props.todos) }
</div>
);
}

Another popular solution:

Place your console.log before the return():

render() {
console.log(this.props.todos);
return (
<div>
<h1>List of todos</h1>
</div>
);
}

A fancy solution:

Get fancy by writing and using your own<ConsoleLog>


From my own teaching experience the concept of mapStateToProps and connect is one of the hardest to grasp for beginners to React and Redux.

Image for post
Image for post

TLDR; Go and check Dan Abramov’s explanation on connect.js.

Introduction

mapStateToProps is a function. connect is a High Order Component. Was that helpful? Probably not, but keep that in mind. At least this one:

mapStateToProps is a FUNCTION.

Usage

If you are learning React and Redux you probably have seen this a lot:

export default connect(mapStateToProps)(MyComponent);

Let’s break down this into smaller pieces of code and some pseudocode.

const ConnectedComponent = connect(mapStateToProps)(MyComponent);
export default ConnectedComponent;

First of all, connect creates a new React Component which is the one exported.

import MyComponent from './MyComponent';//...
<MyComponent test="hello" />

The most important thing to remember here is that even though you are importing from ./MyComponent you are NOT using the component that you wrote directly. You are actually using the component that connect created: ConnectedComponent. …


Image for post
Image for post
Keep Calm and learn Javascript

This is my attempt to explain a topic that confuses a lot of students: importing and exporting modules.

First we will review of how it works with CommonJS require and module.exports. Then, we’ll take a look at ES6 Modules.

Most students start with the CommonJS syntax used in NodeJS:

// For NPM packages
const moment = require('moment');
// For internal modules
const toLowerCase = require('./toLowerCase.js');

Then in toLowerCase.js you need to export something:

const convertToLowerCase = (sentence) => {...};module.exports = convertToLowerCase;

The key here is that, whatever value has module.exports will be the value when using require . In this case, the value of module.exports is a function. …

About

Llorenç Muntaner

Javascript Instructor. New course at introtoweb.dev

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