Forem: Luis Castillo

3 Courses to Become a Better Software Developer 2020

Luis Castillo — Sat, 24 Oct 2020 18:59:08 +0000

Hello everyone, in this post I want to share some resources that can help you to boost your career to the next level.

When you want to grow as a developer you can find a lot of paths to improve your skills such as books, Bootcamps, master classes even just jump into the tool and start reading the documentation when you need something, but personally, I think that one of the most helpful resources are the online courses.

The online courses have a lot of benefits, the principal is that you can do in your free time, choose the best time that works for you.

The second benefit is that you can cover and understand deep concepts of the tool or programming language that you are learning and have a different point of view.

On the other hand the cons of online courses, it is so hard to find a good course on the internet because currently there are a lot of platforms and content.

It is for that reason, that I want to share with you, the three most important online courses that helped me in my career as a full-stack software developer. I know that this could be very relative because every person has his own way to learn, but I just want to share what works for me.

So let's started!

1. Dive Into REFACTORING

Description: This is a great course if you want to improve your coding techniques, identify code smells, and how to refactor them. Also, you will learn from the basics such as how to select good naming conventions for classes and methods until how to implement design patterns in your solutions.

Link: Dive Into REFACTORING

2. Unit testing for C# developers

Description: One of the most important things when we are coding but normally it is forgotten is the unit testings.
We can talk a lot about the benefits to implement unit testing in our project and what is the most efficient way to implement them, but in this course, you can find all these answers and very practical examples and explanations.
It is highly recommended if you are a beginner in the world of unit testing or you already have some knowledge.

Link: Unit testing for C# developers

3. Complete React Developer in 2020

Description: This recommendation is because one of my favorites FrontEnd frameworks is React and this course personally helped me a lot to increase my skills, learn good practices, use advanced features of React, and how to integrate with other technologies such as GraphQL and Firebase. I totally recommend if you want to learn from zero or if you already have experience.

Link: Complete React Developer course

Conclusion. 🤷🏻‍♂️

The whole list is a personal recommendation and personal preference for these programming languages and technologies I hope that can be helpful for you as was for me and If you have a good course that you would like to share please leave the link in the discussion section.😄

What are the needed qualities to be a tech-lead?

Luis Castillo — Tue, 11 Aug 2020 19:02:06 +0000

Hello everyone, some days ago I was wondering what are the skills that need to have to be a Tech-lead or even if the tech-lead concept is an obsolete term.

In my personal opinion, this role is still important in the software development world because we can consider it as a mentor and a source of the truth for the high-level architecture and so on. For these reasons, the following skills are needed to be a good Tech lead.

Communication: Have good communication with technical and non-technical people.
Delegation: The Tech lead needs to know when it is necessary to delegate the technical tasks and also have the confidence to the team to avoid Micromanagement.
Good technical knowledge: Dominate the common good practices such as design patterns and code smells.
Mentor: Keep the team motivated to improve their skills and do a great quality product following the good practices and also teach them the road.
Conflict Solver: I think that this point is one of the most important and complicated because the tech-lead needs to resolve conflicts between the members of the team and be impartial to take the better decision for the project and take these desitions with the right arguments.

For sure this is a personal option and I could miss some important topics, but for you What do you think that are the skills that should have a good Tech-lead?

Top VSCode Extensions to be a happier FrontEnd.

Luis Castillo — Mon, 03 Aug 2020 22:53:49 +0000

Hello everyone, some days ago I faced some problems with my computer and I needed to reinstall my OS and install again all my development environment, and when I was almost done and start coding using my favorite editor code VSCode, I noticed that I was missed to install all my favorite extensions that make me more productive and happy in my daily work.

If for that reason that I wanted to start this list to recommend and share with you some of these VS Code extensions that definitely will help you a lot.

My Top 5 extensions 🎨

1. Ayu Theme.

Description: Basically this extension is a VSCode theme, I know that there are a lot in the marketplace but the reason that I preferred this, it is because I find the balance between the dark and the light mode and also have nice font colors.
These are six options that you can choose from too dark until light themes. I personally preferred the theme called Ayu Mirage Bordered.

Link: Ayu

2. ESLint.

Description: This extension is the most famous extensions that I have and maybe you hear about it, but it is really good and help to keep and clean code and apply all the Eslint standard that you defined in the workspace folder. Basically you will see a red line under your code when exists any error or warning.

Link: vscode-eslint

3. Code Spell Checker.

Description: As a non-native English speaker sometimes is difficult to remind the correct grammatical of some word. So to avoid any typo or do better documentation in Markdown files, I found this extension very helpful, and also my javascript code was much better because now I don't the problem of having two variables with almost the same name.

Link: Code Spell Checke

4. vscode-icons.

Description: This extension is very simple but very cool because make your VS Code more beautifully with a huge list of icons for different file format and
also, a great feature that has this extension is that also the folders can change the icons according to the folder name, this function could be very helpful to find your files quicker.
Absolutely this extension will make a big difference in your daily work.

Here is an example of how your VS code could be looks 👌

Link: vscode-icons

5. Prettify JSON.

Description: When your application needs to interact with different APIs and third-party services, you could receive some JSON response with an ugly format and it is needed to access multiple times to JSON Formatter pages to make more readable your response.
For that reason, I found this extension very useful because you only need to paste your JSON in a new file and hit F1 or cmd+shift+p and type install and then type Prettify JSON and hit enter.

Link: Prettify JSON

6. Auto Close Tag. (Bonus +1)

Description: For this extension there not too much to say, basically help us to add automatically HTML, XML, and JSX close tag, a nice feature that has this extension is that support self-closing tag.

Link: Auto Close Tag

Conclusion

I hope that this extension list could be helpful for you as it is for me and also if you have a cool extension that makes your daily-work easier or happy please feel free to share. 😉

Most common design patterns for Front-End with JavaScript (Real-world examples)

Luis Castillo — Mon, 29 Jun 2020 14:52:03 +0000

Hello everyone, in this post, I want to show you how can easily we can implement some common design patterns in your projects. These patterns help us to have a maintainable, flexible, and readable code. You will see the advantages when you need to add more functionalities without do a lot of modifications in the code.

So now, let's code!! 💻

1.- Module pattern.

The module pattern is one of the most common patterns in the JavaScript world and it's it is very useful to encapsulate the logic of functions and variables in the same scope and manage the access of them, something similar to access modifiers (public, private, etc).

There are a lot of examples on the internet with different variations but I tried to create an example as simple it is possible.
Note: We can see this pattern in ES6 with import/export syntax.
Complexity: ⚡

var module = (function () {
  let options = {color:"red"}
  /*
    private code here
  */
  const setSize = function () {
    options["size"] = 12;
  };

  /*
    public code here
  */
  return {
    getOptions: function () {
      setSize();
      return options;
    }
  };
})();
module.getOptions();

2.- Strategy pattern.

The Strategy design pattern is very used when we have similar tasks and we need to change between tasks in the runtime.
This pattern helps us to eliminate a lot of if-else sentences, to do that simply we have to encapsulate the tasks in small chunks and use an object literal to access our concrete strategy.

This pattern is very simple to implement in javascript because you don't need interfaces or any hard implementation.
Use case: Imagine that we have a dropdown with different user types (normal user, admin, and guest), and we want to display a form on the same page dependence on which user type was selected.

Here is an example with React, but you can apply in other JS frameworks.

Complexity: ⚡⚡

// React components section
import React from "react";
import UserForm  from "./userForm";
import AdminForm from "./adminForm";
import GuestForm from "./guestForm";

/*
* This object literal will help to encapsulate all the forms that could we have.
*/
const FormsManage = {
  user : {
    render(props){
      return <UserForm {...props} />
    }
  },
  admin:{
    render(props){
      return <AdminForm {...props} />
    }
  },
  guest:{
    render(props) {
      return <GuestForm {...props}/> 
    }
  }
};

/*
* Main form component
*/
const Form = (props) => {
  // here we are getting the form by type
  const userForm = FormsManage[props.type];
  return userForm.render(props);
};
export default Form;

3.- Builder pattern.

The builder pattern is used when we need to create complex objects with different variations and also we want to have the flexibility to modify the construction process without impact the object representation in self.
I tried to create an example that we can use in the real-world.

Use case: How many times we need to transform the API data into a format that our third-party component understands, for this case, we can use the builder pattern to create the object that the component needs, and also separate the construction logic.

Complexity: ⚡⚡⚡


/*
* Mock class
*/
class DataTable{
  constructor(data ,options){
    this.data = data;
    this.options = options
  }
  getData(){
    return this.data;
  }
}

/*
* Builder class to create DataTable objects.
*/
function DataTableBuilder () {
  let defualtOptions ={ width:100, height:200, headerFixed: false };

  /*
  * Method to make the format required.
  */
  function generateFormattedData(data,header){
    return data.map(item => {
      let result = {};
      item.forEach((val,idx) => {
          result[header[idx] || "df"+idx] = val;
      });
      return result;
    });
  };

  /*
  * Public steps methods
  */
  return {
    addHeader(header){
      this.header = header || [];
      return this;
    },
    addData(data){
      this.data = data || [];
      return this;
    },
    addOptions(options){
      this.options = { ...defualtOptions, ...options};
      return this;
    },
    build(){
      const formattedData = generateFormattedData(this.data,this.header);
      return new DataTable(formattedData,this.options);
    }
  }
};

/*
* Data needed to build the Datatable object 
*/
const header=["name","age","position"];
const rows = [["Luis",19,"Dev"],["Bob",23,"HR"], ["Michel",25,"Accounter"]];
const options = { headerFixed:true };

/*
*  Start to the builder process
*/
const dt = new DataTableBuilder()
                  .addHeader(header)
                  .addData(rows)
                  .addOptions(options)
                  .build();
dt.getData();

Conclusion.

In the software development world exists many design patterns and all of them have their qualities, but it is work of us as Developers, understand and analyze which of them add real value to our project and not more problems or complexity.

If you have some design patterns that have been useful for you, please share in the discussion section or if you want to implement one of the previous ones and you need a hand, let me know and I can help you. 😉

Svelte 3 - How to connect your app with a Rest API Axios

Luis Castillo — Tue, 16 Jun 2020 01:38:04 +0000

Hello everybody, continuous with the Svelte post series, Today I want to share one technique that normally use to connect my Web applications with my backend or Rest API.

I will talk about his advantages and how easily you can integrate with your project, even if you are starting in the world of the Front End.

Decoupling third-party libraries.

Most of the time to connect with a Rest API, we need to implement a Third-party library and more if we want to handle complex configurations.
In this case, we will use Axios, because it's very easy and practical to implement.

This technique consists in two steps.

Create a good folder structure to split the responsibility to perform the action and define the concrete action.
Have the third-party library implementation in his own file.

Some of the advantages that We can see are the following.

Easy way to find the API communication methods.
We can easily change the HTTP request library.
Single point of Http calls.
Advanced configuration of the Third-party library.
Keeping a clean code.

Let's Code!!

1. Install Axios.

To start working with Axios we need to install the library executing the npm command in our project.



npm install axios

2. Create Axios implementation.

One that we have our library ready, we need to create a folder called services to add all our third parties libraries implementation as Axios, signalR client, date format library (moment), etc.

The reason for this folder, it is to find all the abstraction of the libraries and in the case that we want to change any library, we can quickly modify these files without modify the whole application.

Okay, now we will create a file with the name of Api.js, to add all the HTTP methods that we need to use.
I will leave the code here, I think that is very simple and self-described.



// Api.js
import axios from "axios";

// Create a instance of axios to use the same base url.
const axiosAPI = axios.create({
  baseURL : "https://pokeapi.co/api/v2/" // it's not recommended to have this info here.
});

// implement a method to execute all the request from here.
const apiRequest = (method, url, request) => {
    const headers = {
        authorization: ""
    };
    //using the axios instance to perform the request that received from each http method
    return axiosAPI({
        method,
        url,
        data: request,
        headers
      }).then(res => {
        return Promise.resolve(res.data);
      })
      .catch(err => {
        return Promise.reject(err);
      });
};

// function to execute the http get request
const get = (url, request) => apiRequest("get",url,request);

// function to execute the http delete request
const deleteRequest = (url, request) =>  apiRequest("delete", url, request);

// function to execute the http post request
const post = (url, request) => apiRequest("post", url, request);

// function to execute the http put request
const put = (url, request) => apiRequest("put", url, request);

// function to execute the http path request
const patch = (url, request) =>  apiRequest("patch", url, request);

// expose your method to other services or actions
const API ={
    get,
    delete: deleteRequest,
    post,
    put,
    patch
};
export default API;

Now we are ready to do HTTP calls from any place of our project. 🤗

3. Using the API service.

This step is optional, but personally I like to keep all my API calls in a folder called api and create a file for each API resource.
For example, in this case, I will create a file called pokemon.js because the resource that I will use is Pokemon.

In this file, I'm using my Api.js service and I handle the Http errors that I could get.



// pokemon.js

// Implementations for all the calls for the pokemon endpoints.

import Api from "../services/Api";

// Method to get a list of all Pokemon

export const getPokemonList = async () => {

    try {

      const response = await Api.get("/pokemon?limit=500");

      return response.results;

    } catch (error) {

      console.error(error);

    }

};

// Get a pokemon details by name

export const getPokemonByName = async(name) => {

    try {

      const response = await Api.get(/pokemon/</span><span class="p">${</span><span class="nx">name</span><span class="p">}</span><span class="s2">);

      return response;

    } catch (error) {

      console.error(error);

    }

};

Calling the APIs

It is time to call our methods to get the data into our Svelte page (component).
This page will be very simple, just with a pokemon list and a section with the details of the pokemon, image, name, and type. I want to focus on the functionality to connect with the APIs.



<script>

  // PokeList.svelte

  const pageName="Poke-List";

  import { onMount } from 'svelte';

  import { getPokemonList, getPokemonByName } from "../api/pokemon"; // import our pokemon api calls

let pokemonDetail = {};

  let pokemonList = [];

// Get the data from the api, after the page is mounted.

  onMount(async () => {

    const res = await getPokemonList();

    pokemonList = res;

  });

// method to handle the event to get the detail of the pokemon.

  const handleOnClick = event =>{

    const name = event.target.name;

    getPokemonByName(name).then(res => {

      pokemonDetail= {

        name,

        types: res.types,

        image: res.sprites.front_default

      };

    });

  };

const getPokemonTypes = () => {

    return pokemonDetail.types.map(e => e.type.name).join(",");

  };

</script>



<style>

main {

        text-align: center;

        padding: 1em;

        max-width: 240px;

        margin: 0 auto;

    }

<span class="nx">h1</span> <span class="p">{</span>
    <span class="nl">color</span><span class="p">:</span> <span class="err">#</span><span class="nx">ff3e00</span><span class="p">;</span>
    <span class="nx">text</span><span class="o">-</span><span class="nx">transform</span><span class="p">:</span> <span class="nx">uppercase</span><span class="p">;</span>
    <span class="nx">font</span><span class="o">-</span><span class="nx">size</span><span class="p">:</span> <span class="mi">4</span><span class="nx">em</span><span class="p">;</span>
    <span class="nx">font</span><span class="o">-</span><span class="nx">weight</span><span class="p">:</span> <span class="mi">100</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">@</span><span class="nd">media</span> <span class="p">(</span><span class="nx">min</span><span class="o">-</span><span class="nx">width</span><span class="p">:</span> <span class="mi">640</span><span class="nx">px</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">main</span> <span class="p">{</span>
        <span class="nx">max</span><span class="o">-</span><span class="nx">width</span><span class="p">:</span> <span class="nx">none</span><span class="p">;</span>
    <span class="p">}</span>
<span class="p">}</span>



.pokemonDetails{

    float: right;

    width: 500px;

     text-transform: capitalize;

  }

  .pokemonList{

    width: 300px;

    float: left;

    max-height: 400px;

    overflow-y: auto;

  }

  .pokemonList li{

    list-style: none;

    text-align: left;

    margin-bottom: 5px;

  }

  .pokemonList .pokeName{

    text-transform: capitalize;

    font-size: 18px;

    font-weight: 700;

  }

  button {

    background: none!important;

    border: none;

    padding: 0!important;

    color: #069;

    text-decoration: underline;

    cursor: pointer;

  }

</style>



<main>

    <h1> {pageName}!</h1>

    <p>Welcome to my <b>{pageName}</b></p>

      <ul  class="pokemonList">

        {#each pokemonList as pokemon}

            <li>

              <label class="pokeName">

                {pokemon.name}

              </label>

              <button 

                type="button" 

                name={pokemon.name}

                on:click={handleOnClick}>See Details</button>

            </li>

        {/each}

      </ul>

      <div class="pokemonDetails">

        <h3>Pokemon Detail</h3>

        {#if pokemonDetail.image}

         <img 

              class="pokeimage"

              src={pokemonDetail.image}

              alt="pokeimage"/>

          <label><b>{pokemonDetail.name ? pokemonDetail.name : ""}</b></label>

          <label><b>Types: </b>{pokemonDetail.types ? getPokemonTypes() : ""}</label>

        {/if}

      </div>

</main>

Wrapping up

As you see, it 's very quick and easy to connect with a Rest API using Axios and also has a clean code.

After applying the previous code implementations, This is how to look at my code.
Note: The new files and folder that we added are in yellow.

And here is how looks our PokeList running.

I hope that this implementation was helpful to you. If you have any questions or suggestions leave in the comment section I will be reading you. 😉

Wait, if you don't are familiar with Svelte I high recommend checking my other posts where I explain how to create your first Svelte project and implement pages routing.

Time complexity Big 0 for Javascript Array methods and examples.

Luis Castillo — Wed, 03 Jun 2020 03:28:09 +0000

Hello everyone, some weeks ago I started to study some computer science algorithms using JavaScript as the programming language, and normally after finished to implement an algorithm I like to calculated complexity with the Big 0 notation. That is the reason why I wanted to write this post, to understand the time complexity for the most used JS Array methods.

So, let's start with a quick definition of the method, his time complexity, and a small example.

Mutator Methods.

1. push() - 0(1)
Add a new element to the end of the array.

const names = ['Luis','John','Jose'];
names.push("Aaron");
console.log(names); // (4) ["Luis", "John", "Jose", "Aaron"]

2. pop() - 0(1)
Delete the last element of the array

const names = ['Luis','John','Jose','Aaron'];
console.log(names.pop()); //Aaron
console.log(names); // (3) ["Luis", "John", "Jose"]

3. shift() - 0(n)
Delete the first element of the array

const names = ['Luis','John','Jose','Aaron'];
console.log(names.shift()); // Luis
console.log(names); // (3) ["John", "Jose", "Aaron"]

4. unshift() - 0(n)
Add one or more elements in the beginning of the array

const names = ['Luis','John','Jose'];
console.log(names.unshift("Aaron")); // 4
console.log(names); // (4) ["Aaron", "Luis", "John", "Jose"]

5. splice() - 0(n)
Remove, add or replace a new element indicate by index.

const names = ['Luis','John','Jose','Aaron'];
console.log(names.splice(0,0,"Fernando")); // Add Michelle
console.log(names.splice(0,1,"Michelle")); // replace Fernando to Michelle
console.log(names.splice(0,1)); // remove Michelle
console.log(names);

6. sort() - 0(n log(n))
Modify the array, ordered by a compare Function, or if this compare function is not provided the default order is by the position of the Unicode values in the array.

const names = ['Luis','Jose','John','Aaron'];
console.log(names.sort()); // (4) ["Aaron", "John", "Jose", "Luis"]

/*complex sorting*/
const users = [
    {name:'Luis', age:25},
    {name:'Jose', age:20},
    {name:'Aaron', age:40}
];
const compareFuc = (item1,item2) => {
  return item1.age - item2.age;
};
console.log(users.sort(compareFuc));
/**
 [{name: "Jose", age: 20}, {name: "Luis", age: 25}, {name: "Aaron", age:40}]
 */

Accessor methods

1. concat() - 0(n)
Create a new array with the union of two or more arrays.

const names1 = ["Luis","Jose"];
const names2 = ["John","Aaron"];
const newArray = names1.concat(names2,["Michelle"]);
console.log(newArray); // (5) ["Luis", "Jose", "John", "Aaron", "Michelle"]

2. slice() - 0(n)
Return a copy of a sub array between two index, start and end.
Important Note: if you modify the original array, the value also will be modify in the copy array.

const users = [
  {name:'Luis', age:15},
  {name:'Jose', age:18},
  {name:'Aaron', age:40}
];

const  adults = users.slice(1, users.length);
console.log(adults); // (2) [{name: "Jose", age: 18}, {name: "Aaron", age: 40}]

3. indexOf() - 0(n)
Return the first index of the element that exists in the array, and if not exists return-1.

const names = ['Luis','Jose','John','Aaron'];
console.log(names.indexOf("John")); // 2
console.log(names.indexOf("Michelle")); // -1

Iteration methods

1. forEach() - 0(n)
Just execute a function for each element in the array.

const names = ['Luis','Jose','John','Aaron'];

names.forEach(item => {
    console.log(item);
}); 
/* Print all user names
  Luis Jose John  Aaron 
*/

2. map() - 0(n)
Create a new array with the result of the callback function (this function is executed for each item same as forEach)

const users = [
    {name:'Luis', age:15},
    {name:'Jose', age:18},
    {name:'Aaron', age:40}
];
const userDescriptions = users.map(item => {
   return `Hello my name is ${item.name} and I have ${item.age} years old.`
});
console.log(userDescriptions); 
/*["Hello my name is Luis and I have 15 years old.",
 "Hello my name is Jose and I have 18 years old.",
 "Hello my name is Aaron and I have 40 years old."] */

3. filter() - 0(n)
Create a new array with the elements that apply the given filter condition as true.

const users = [
  {name:'Luis', admin:true},
  {name:'Jose', admin:true},
  {name:'Aaron'}
];
const adminUsers =  users.filter(item => item.admin);
console.log(adminUsers); // [{name: "Luis", admin: true},{name: "Jose", admin: true}]

4. reduce() - 0(n)
Return a single value after applying the reduction function for each element.

const users = [
  {name:'Luis', age:15},
  {name:'Jose', age:18},
  {name:'Aaron', age:40}
];

const reducer= (accumulator, item)=> accumulator + item.age;
const totalAge =  users.reduce(reducer,0);
const ageAverage = totalAge / users.length;
console.log(`Total ${totalAge}, Average ${ageAverage}`); // Total 73, Average 24.333333333333332

Bonus!!!

1. some() - 0(n)
Return a boolean value as true if found one or more item that apply the given condition, and return false if not (also if the array is empty).

const users = [
  {name:'Luis', admin:true},
  {name:'Jose'},
  {name:'Aaron'}
];
const adminExists = users.some(item => item.admin);
console.log(adminExists); // true

2. every() - 0(n)
This function Return a boolean value as true if all the items apply the given condition, and false if not.

const users = [
  {name:'Luis', active:true},
  {name:'Jose', active:true},
  {name:'Aaron', active:false}
];
const isAllUsersActive = users.every(item => item.active);
console.log(isAllUsersActive); // false

Conclusion

I think that it is very important to understand the time complexity for the common Array methods that we used to create our algorithms and in this way we can calculte the time complexity of the whole structure.

I hope that this information was helpful for you. If you have any questions please, left in the comment section. All the comments are welcome.😉

My experience in a remote hackathon (Design architecture and idea)

Luis Castillo — Thu, 21 May 2020 13:48:26 +0000

In the past week, I participated in my first remote Hackathon, I have participated in some Hackathons before, but never as remotely, and to be honest I was a little bit nervous because I didn't know if the brainstorms and the communication will flow well as a face to face interaction.
The concept of this Hackathon was regarding or the situation that We are living now, the COVID-19.

When the hackathon started was something different for me and my teammates, because we are not familiar with the organization but we adapted very quickly.
The hackathon had a duration of five days, good time to refine the idea, and complete a functional product. Basically, we had 5 video conferences, one to introduce with participants, judges, and coaches and after that, we had one call every day with the coaches to explain our advances and problems, these calls were really helpful because they provide us good ideas to build a quick MVP.

Idea 👾

The thing that most enjoyed and I liked it from this hackathon, was the idea that we build. In the beginning, we didn't have clear what we want to do. The only thing that we knew is that we wanted to reduce the proliferation of the virus, first in close spaces, and then in open spaces.
So, one of my teammates had the great idea to build a Face Mask recognizer to detect if the people have the face mask correct or not, and even if they don't have.
The idea was heard great and very exciting and also the stack that we choose was challenging because we wanted to implement IoT, AI, and serverless.

Development Stack 🖥

The stack that we chose was base on Microsft technologies, using some Azure services.

Azure SignalR service: basically we were using this service to have real-time communication between all clients and our backend.
Azure IoT Hub: We used this service to have communication between our backend and Arduino board that was used to show feedbacks with some LEDs the user, in case if the detector found any situation.
Azure functions: We build all our backend using serverless because We thought that transactions will be very short and we don't want to have a big application running all the time. The programming language that we chose was C# with .NET CORE.
React and React Native: All our client was made by React and handling the state with react itself just using Context and the endpoint call with Axios.
Custom Vision: This is a new service of Microsoft that helps us to train a model and the service can detect any type of image and return values with the bounding boxes of the objects in the image.
TensorFlowJS: The last and one of the most important services was the library of tensor flow, this library was useful to read and interpret the Custom Vision model.

This is a high-level architecture diagram that we using to design the idea and the data flow through all the services.

What finally we build?

The last product was pretty close to the design but we could not complete two very interesting items.

We didn't have enough time to build the mobile application and in the end, we build only the Web application with React.
The second thing was that we could not do the real-time recognition and we had to add a button to take a snapshot of the people that were in front of the camera.

I leave here how looks the product at the end of the hackathon.

Conclusion 👏

Participate in a hackathon is a great experience because you have the opportunity to go to the limit with your knowledge and also learn new technologies very quickly and applied.

If you are thinking to participate in a hackathon I recommend these 3 important things to enjoy more the experience.

Choose this ambitious technology that you always wanted to know more about it (IoT, AI, or a new JS framework).
If you are remote, I recommend using a tool to draw diagrams in that way your team can share all the ideas that have.
Enjoy it and don't take very seriously the event and at the end of the day, it is just a game. Don't make it a stressful situation.

Hope you enjoyed this personal post and found it to be a good read! If you have a good or bad experience in a hackathon please leave in the comment section and we can discuss 😉

Svelte 3 - How to integrate with svelte routing

Luis Castillo — Fri, 08 May 2020 22:42:07 +0000

Hello everyone, as part of the quick post series that I am doing (If you haven't seen my previous post, you can check Quickstart with Svelte 3).

So now it is time to implement a routing handle. This is normally the next step when we want to build our wonderful SPA with Svelve.

But first I want to talk about some options for routing that there are available and in that way, you can choose the best for your project.

Svelte routes options 🎨

These three guys are some of the most helpful libraries and frameworks that you can find when you need to work with the router.

Sapper is a framework that helps you to build web applications and is powered by Svelte, so what does mean this? That you only need to install Sapper and you have a bunch of functionalities including routing.
svelte-routing, This is a declarative Svelte routing library, and this one is the library that we will use in the post. I chose this because it's one of the libraries with more weekly Downloads in npm page.
svelte-spa-router, An the last option is a module router, I think that this library has good advantages and one of these is that leverages hash-based routing.

So, now that we know some options that there are, we can jump to my favorite part.

Let's Code!! 🎧💻

Once that you have your base Svelte project running in your machine, the next step is to install the svelte-routing library, to do that just need to execute the following command

npm i svelte-routing

Create your routing and first pages

After that, we are ready to add some pages and start using the routing. At this point, we will divide into two points.

1. Create About and Home page

First, we will create a folder called pages inside of src, and then we will add two components, About.svelte and Home.svelte.

Here you can add some dummy code in your components, for me I will add this code and only will change the pageName variable, feel free to copy if you want.

<script>
    let pageName="Home Page";
</script>

<main>
    <h1> {pageName}!</h1>
    <p>Welcome this is my <b>{pageName}</b></p>
</main>

<style>
    main {
        text-align: center;
        padding: 1em;
        max-width: 240px;
        margin: 0 auto;
    }

    h1 {
        color: #ff3e00;
        text-transform: uppercase;
        font-size: 4em;
        font-weight: 100;
    }

    @media (min-width: 640px) {
        main {
            max-width: none;
        }
    }
</style>

Your project needs to look something like this, after applying the previous changes.

2. Modify App.svelte

Now, it is time to modify our App.svelte, here We will add our Router configuration and also a small nav bar to navigate between our pages.
Here is very simple in the script section we will import the svelte-routing library with Router, Route, and Link components and also we will add our two pages.

<script>
  import { Router, Route, Link } from "svelte-routing";
  import Home from "./pages/Home.svelte";
  import About from "./pages/About.svelte";
  export let url = ""; //This property is necessary declare to avoid ignore the Router
</script>

Then we will set up the Router with the navbar section and including two links to our pages.

<Router url="{url}">
 <nav>
    <Link to="/">Home</Link>
    <Link to="about">About</Link>
  </nav>
  <div>
    <Route path="about" component="{About}" /> 
    <!--for now the router just support case sensitive,
        one workaround colud be add two time the route
        Example.
       <Route path="About" component="{About}" /> 
    -->
    <Route path="/"><Home /></Route>
  </div>
</Router>

If you want to find more information about the properties for each svelte-routing components, in this link, you can learn more.

So, now if you run your application we can navigate between Home page and About page, and also you will see a small navigation bar at the top.

The last setup

Wonderful!!, now your application is running. But there is a problem if you reload the About page, you will get a 404 error 😢, to fix that problem we need to do the following changes:

1. Create a server.js file

First, we need to create a server.js file with the specifications that we found in the documentation of the library. Basically this code is to rendering the application all the time in the index.html, I leave the code over here.

// server.js
const { createServer } = require("http");
const app = require("./dist/App.js");

createServer((req, res) => {
  const { html } = app.render({ url: req.url });

  res.write(`
    <!DOCTYPE html>
    <div id="app">${html}</div>
    <script src="/dist/bundle.js"></script>
  `);

  res.end();
}).listen(3000);

2. Set hydrate options as true

To do that we need to modify, fist our main.js file with the property hydrate.

// main.js
import App from './App.svelte';

const app = new App({
    target: document.body,
    hydrate: true
});

export default app;

And the second modification will be into rollup.config.js file, here we'll specify that the application will be compiled as hydratable.

// rollup.config.js
...
plugins: [
        svelte({
            hydratable: true,
            // enable run-time checks when not in production
            dev: !production,
            // we'll extract any component CSS out into
            // a separate file - better for performance
            css: css => {
                css.write('public/build/bundle.css');
            }
        }),
        ...

Now the last modification is changing the start script from the package.json file, here we will add the -s argument

// package.json
...
"scripts": {
    "build": "rollup -c",
    "dev": "rollup -c -w",
    "start": "sirv public -s"
  }
...

Great!, now everything should be work perfectly and your web application should be load from every page without any problem.

Conclusion 👨‍🎓

Svelte-routering is a great library, I think this is one of the best Routing libraries on the internet that helps us to add the routing functionality in our SPA with a minimal effort, but personally I recommend using this library if you want to create a small application with just a couple of pages and also you don't want to have all the power of a Framework.
However, if you are open to use a framework, Sapper is a great option, even if you planning to create a medium size project, with Sapper you will have great control of your application.

I hope that this small post was helpful for you and you can create your next application with Svelte.

Quickstart with Svelte 3 - Your first component

Luis Castillo — Fri, 01 May 2020 16:36:39 +0000

Svelte posts

Hello everyone, this is a series of posts that I want to write to show the capacities and how to easy is create components with Svelte, but before all, we need to start from the beginning.

What is Svelte? (with my words🙊)

Svelte is a FrontEnd framework as Vue, React, and Angular but with another approach to developing the components and also the way to handle the resources of our Browser, for example, Svelte runs at build time. You can find more detail in this Link
After knowing a little bit about Svelte and we can jump to my favorite part.

Let's Code!!

Work with Svelte is very simple but before to start, we need to be sure that we have Installed Node to execute the following commands, Note: please execute in the same order.

npx degit sveltejs/template project-name
cd project-name
npm i
npm run dev

Once that the commands have been executed successfully, now you can access in your browser and the app will be running in the server http://localhost:5000, you will see something like this.

If you are using your favorite Code Editor (VS Code cof cof 🤭) you will see the following folder structure.

As you see, the application looks like a normal Javascript application with package.json and src folder, but the important part here is the following files.

App.svelte ⚙️

This is the first Svelte component in the application, it is for that reason has the extension .svelte. Something important here is that all components need to have this extension and also the same structure. There are two important tags here.

Style: Here we will have all the CSS styles of the component, and we can use a simple CSS notation.

Script: This one, is the section to locate our javascript logic, and also here we can import other components or receive our props as the previous example with the name prop.

Main.js

This file is the application entry point, so basically here is where we reference the main components of the app. For now, we don’t need to change anything here.

Creating our first component 📝

At this point, you can play with the App.svelte file, maybe changing the styles or add more HTML elements inside, but I want to show you how to create a new component from scratch.

First, we need to create a new file in our src folder, for simplicity, I will call this component Counter.svelte, please don’t forget the extension, this is very important.

Our component needs to have 2 important tags, the style, and script section as we saw in App.svelte and also I will add a <div> tag, this is a native HTML tag.

The counter has a variable to save the result of the counter and also we need a function to execute every time that we click the button.

<script>
  let counter = 0;  // counter variable
  const handleClick = () => { //Function to add 1 to our variable
    counter += 1;
  };
</script>
<style>
  button{
    border:0px;
    background: #3380ef;
    color:white;
  }
</style>
<div class=”counterComponent”>
  <button on:click={handleClick}>plus 1</button>
  <section>My couter is: {counter}</section>
</div>

The next step is copy and paste this code in our Counter component and then we need to modify the App.svelte file to import the new component. The App.Svelte needs to look something similar to this.

If everything is working properly your page will be refreshing automatically and you will see a blue button and every time that you click it, the number will be added by 1.

So, congratulation now you created your first component, I recommend you work more with that, for example, change styles, add new functionalities and create new components.

Conclusion 👩‍🎓

Svelte is the new kid in the neighborhood but shows a lot potential and it is a good way to create lightweight apps, maybe it is not convenient to implement in an enterprise application or in a big project but could be very useful for a quick run or middle projects.
Please let me know what do you think about svelte and if you are using it in a project, and I hope that this small tutorial was helpful for you. If you have any questions please, left in the comment section.