Moving to Medium

For the few people that read this blog I have to tell you that I have take the decision of use Medium instead WordPress.

I like WordPress as platform to have a blog but lately I have been use much more Medium compared with WordPress like I mention in this post in Medium, so I invite you to take a look on my profile in Medium to stay tune for my next articles.

This blog won’t be deleted, there’s still people that looks for some info(including me) as I can see in statistics here in WordPress, for me that means that I have wrote useful articles.

Follow me on Medium 🙂

Advertisements

Simple AJAX call with Fetch API

Nowadays a lot of people make AJAX calls with JQuery, I know people that just download JQuery just to make this kind of calls to RestAPIs(I was doing it not much time ago) and is not really necessary download a whole library to make this kind of calls especially if the page download time is a important issue.

If is not with JQuery what alternative do I have?

Well, since 2015 their is a light and native(for browsers) alternative called Fetch API.

Fetch API allows us to make AJAX calls using another feature call Promise, for a better definition I will quote to Sandeep Panda:

Fetch is a new, simple and standardised API that aims to unify fetching across the web and replace XMLHttpRequest. It has a polyfill for older browsers and should be used in modern web apps.

How it works?

Here is a simple example:
JSON Example Data

{
"user": {
"name": "Wilhelm",
"email": "email@domain.com"
}
}

HTML and JS code

References:

How to make a template message for Git commits

At work finally I am using git properly(Or I think), I mean, now I understand how to use branches anytime that a new feature shows up or a bug has to be solved, and how I mentioned at Twitter I know that we are in 2017 and I should been using git since a lot time ago but since I’ve take new jobs I really have the opportunity to use git at my new jobs.

Every time I notice more and more benefits about use git, for example, I just notice that you can create a message template for any time that you make a commit. Thus this feature allows you to keep a standard for your team of codeers when they need to write a commit message, like have s title, description and issue address by.

This post shows how to configure your repo to create a commit message template so you can have a standard for your commit messages.

In the root folder of your project create a .gitmessage file and add the next content:

Some awesome title

Why:

* ...

This change addresses the need by:

* ...

Now using the console in the root of your project folder type:

git config commit.template .gitmessage

Yaaaay! Now you are ready to make c00l messages anytime you have to make a commit.

Tip: You can set a template message globally just typing –globally before commit.template

git config --global commit.template .gitmessage

To unset the global template commit type:

git config --global --unset-all commit.template

References:

Another greeting, now from Express

I have made a little stop about learning to React to dig a little bit now in Express.

Like I mentioned in a previous post I have decided to get an update in the Frontend technologies and Express is one of those that is important to know in nowadays, so It’s time to know how it’s works and start to build a simple app.

Like always Google is your friend and there you can find a lot of tutorials about how to make an Express app, I have read only two tutorials (you can find them futher below), one is at MDN (Mozilla Developer Network) and the other at Close Brace. Both tutorials are very easy to understand and follow, if you ask me wich one to choose to start I will tell you with the tutorial in Close Brace and then jump to the MDN tutorial.

Why? Well the code Close Brace gives you a clear understanding in how Express works, then the MDN tutorial will give you a extended tutorial by steps very well documented with links to official docs and recomendations.

Also I have uploaded the tutorials to Github if you want check the examples that I have made with the tutorials mentioned above.

First steps with React

We already know how to get the libraries necessary to start coding on React. Let’s make a simple app to create components.

This post is made with the boilerplate mentioned on my last post.

Open your console and create a folder for our new project with the next command. You can create it anywhere you want, I will create it on my Desktop.

$ create-react-app first-app

Now, wait until the packages are downloaded.

wait

Everything ok? Good, now enter to your new project folder and type the command below to start our local server

$ yarn start

Probably your default browser is fired when the server start, showing an example app by default. If not, open your browser and type http://localhost:3000 in the address bar.

The first React app running on your machine, yaaaay!!! Now let’s change some code to create our own component.

What do you need to know about the structure of this boilerplate?

The official documentation of “create-app” is very easy to understand but for this post this is what you need to know:

  • public folder: has the html file that the browser renders
  • src: here is where we will save our React js code, css and images

Let’s start creating our first component, open your editor, open a new file and save it as MyFirstComponent.js inside the src/ folder and type:

Nice, our component is ready to be used. Now open index.js inside src/ and change its contents for:

If you haven’t closed the browser’s tab with your locahost:3000 you notice that the app is updated without use the refresh button or F5, that’s because when you are running the server and modify a file automatically the app reloaded in your browser.

Nice, eh?

What if we want to give some style to our component?

Well, we create a css file with the name of the component(MyFirstComponent.css) inside the src folder:

Update MyFirstComponent.js and put in the second line

import React, { Component } from 'react';
// Component CSS
import './MyFirstComponent.css'

Now our component has a new color for h1 tag and the content of the div is centered.

This looks very simple right? Now let’s make a second component that will be use inside MyFirstComponent.js.

Create two new files in src/ folder Square.js and Square.css.

Yaaaay, now we can render a custom component inside another one and we can use it multiple times inside MyFirstComponent.js.

One last thing for this example, our Square has the same content for all the boxes, wouldn’t it be better if we can pass it data to display via attribute? Well, we can do that using props.

Update MyFirstComponent.js

Update Square.js

Done, now we can pass data to every square and each square can render different data.

Phew! We are ready for now, I think that is a lot of information to play a bit with react and see how its components work.

Please check the codecademy course to see how to use props, display dynamic data and other cool stuff that you can use on React.

Start using React in your machine

To start using React is not as simple as downloading a file and link it to your html file like you can do with JQuery. For example, you need a group of libraries to make it work in your browser.

React needs ES6, so apart from the React library do you need other libraries like Babel to make it work on your browser.

If you want to learn about ES6, Babel and new features that ES6 has, I recommend these videos to get an update:

Yes, ES7 is out there but this learning curve has to be slowly for me.

Like I said, we need a group of libraries to begin to use React, we can install those libraries with Node and start checking what fits better our requirements. But, are we learning right? We need a clear and easy boilerplate to get started coding and spend less time searching and trying the libraries required to make a simple Hello World. Remember, search for thing like Babel, Webpack and other things that React needs.

Maybe you are wondering: A Boilerplate? Do I need to learn another thing?

No, a boilerplate is a base with all set to start to code, without having to think in what version of Babel or Webpack we should use, how to configure them and all that stuff. There are a lot of boilerplates in the Internet to make an app with React, just make a simple Google search and you will see.

When I was looking for a boilerplate for React I was searching for something simple to understand and install, with a simple structure to make it work and then begin to do basic examples.

If React was made by Facebook, they should have a good base to start with. I found Create React made by Facebook Incubator, it brings a very simple structure and good documentation on how to use it.

To download Create React you need to have installed NodeJS and then follow the next steps that you can also find in their documentation:

  • $ npm install -g create-react-app
  • $ create-react-app my-app
  • $ cd my-app/
  • $ npm start

If everything works fine you should see an app running on your localhost http://localhost:3000 with a demo.