DEV Community: Eulier Gonzalez

Will this show the users’ local time?. Pulling data from Firestore?

Eulier Gonzalez — Wed, 23 Mar 2022 14:39:41 +0000

A client ask me that question, and frankly that something that i heard even amount others developers.

Because at the startup i'm working we're using Firestore as our DB.

So a make a quick recap on how to respond to this question:

TL;DR
Yes

The reason is, since Google Firestore store date & time as Timestamp. which follows the RFC 3339, that is a format of the ISO 8601.
An standard to represent date & time using Gregorian Calendar

So when we store date & time, it set by default to UTC, you can also change it.

And we're using momentjs format method to set that to user's localtime.

Contributing to back-end codebase as a front-end for first time.

Eulier Gonzalez — Thu, 20 May 2021 19:13:22 +0000

I’ve 4 years of experience working with client-side code (HTML, CSS, JS and Node.js). Thanks to Zero To Mastery i could deep dive in the some major computer science concepts through Data Structure and Algorithm Course on Udemy, JS Advanced Concepts and improve my journey as a Software Developer by following the Junior to Senior Web Development 2021.

It took me (as a non-native english speaker) from april 2020 to feb 2021 to improve myself, daily on it, and eventually i got hired by a startup.

So, after a month of bootstrap the roadmap in which I made some proof of concepts about chat & authentication systems for Node.js and Django respectively, we finally now gonna build this app.

There is a backend developer that sets up the basis.
So I want to be effective on learning/understanding the concepts so i can give value to the codebase as soon as possible.

Approach

Investigate/Read through each package at the package.json
Learn the “why” and “how” it works
Listen concepts’s pronunciation and verbalize out loud
Apply those concepts by following the conventions and good practices to our needs (tasks)

Let see how it works.

Note: Due this project is quite small (8 packages), i can afford to do that. Even though the idea here is to understand following a pareto principle 80/20 to complete the task.
If we need to deep dive on more specific uses case, that's another post.

Edit I:
My intent is to dedicate 1 hours per package, take 3 series of 13 minutes and break of 3 minutes per serie and at the end a total rest of 12-20 minutes.

Coupling And Cohesion

Eulier Gonzalez — Wed, 28 Apr 2021 14:52:27 +0000

TL;DR
If you know about this, do something better with your time.

Working for a startup, they tell me to setup an Authentication User using Django.

I'm a Javascript Developer, with perhaps a skill of 8.8/10, i'd use Python but for educational purpose, so this is kind of new to me.

Looking at the Django Quick Start From Mozilla

And later at their Django Docs, in the Design Philosophies link and after reading Coupling and Cohesion

I'll argue that in Software Engineering
The less responsabilities and interdependence you have between modules or components, the better.
I'm gonna applied this gem, to my life.

Have a nice day!

Web socket and HTTP(s); Intro to simple differences

Eulier Gonzalez — Tue, 20 Apr 2021 19:30:21 +0000

In telecommunication a duplex communication system is a point to point system composed of 2 or more connected devices.
And it can be:

Full-duplex system, simultaneously or bi-directional at time
Half-duplex system, communication is one direction at time

HTTP 1.1, HyperText Transfer Protocol is a Half-duplex system.

So writing chat applications using i.e. LAMP Stack, (Linux, Apache, Mysql & PHP), it involve:

Actively sampling the status of the server (Polling) for changes
Keep track timestamp and
It’s slower than it should be.

Socket have traditionally been the solution for real-time chat application are architected, supplying a bi-directional (Full-duplex) communication channel between the client and the server. It actually use the URI format.

ws://userinfo@host:port/path?query#fragment

This is just a start to wrap your mind around in case you want to understand how socket.io

It also contains very helpful examples

Vue Component Design Patterns

Eulier Gonzalez — Fri, 16 Apr 2021 15:05:17 +0000

From Vue Mastery.

Benefits

Create components easy to use & maintain
Avoid common mistakes that makes our components more prone to bugs
Feel empowered to make architectural desition that are best for your app.

Tradeoff
For a lot of use case Component Design Patters might works, but for others it can be an antipattern.

So, this are guidelines not rules and it's important to understand the potential benefits that best fit, for your application.

Key features

Pros (array and object definition style)
Problems of overly relay on Pros to enhance components
Slot
Slot Techniques

I'll expand more about this topic on following posts.
If you can afford, i'll recommend to invest on Vue Mastery Course.
Don't forget to drink water.
Sleep well.
Take care.

Recursion, why is helpful but not in JS, ;(

Eulier Gonzalez — Sat, 10 Apr 2021 16:23:20 +0000

Recursion according to DSA Course from Zero To Mastery is an algorithmn, that allows to define something in terms of itself or a function that call itself.

For example

let multiplyBy5 = (num) => {
  if(num === 1) return 5
  return multiplyBy5(num - 1) + 5
}

As you can see recursion, is useful for repetitive task.
Of courser iterative solutions are way more better for this small problems.
But when you need to traverse a tree or a graph ( something that is wildly uncommon for Js developer )

Or validate a Binary Search Tree.

const isValidBST = function(root, min, max) {
    if(!root) return true

    if( (min && root.val <= min.val) || (max && root.val >= max.val) ) 
        return false

    return isValidBST(root.left, min, root) && isValidBST(root.right, root, max)
};

Recursion offers :

DRY Code (Don't repeate yourself)
Readability
Useful when you don't know how deep a data structure is
Solve problems using a divide and conquer approach

Tradeofs:

Iterative solution are more efficient, since they don't have additional function call (they don't use the call stack)
Space complexity and Recursion are not friends
For new developers it's hard to wrap around their minds

To solve the space complexity issue, there is something call:

Tail Call Optimization It allows recursion without increasing the call stack

However, and the reason you're here.

Supringsingly, only [Apple Products*](https://kangax.github.io/compat-table/es6/#test-proper_tail_calls_(tail_call_optimisation), support this feature.

The others major js enviroment like, Chrome, Firefox, Edge (client side) and node.js (server side) doesn't support and that might never changes.

Vue-test-utils best practices for DOM finding & Events

Eulier Gonzalez — Sat, 13 Mar 2021 14:30:02 +0000

When writing unit test, is helpful to imagine how the actual end user is gonna interact with our component and then we can design the test to replicate that behaviour.

How do we find DOM elements for testing our component?, here are some of the best practices from VueMastery when finding it.

Imagine that we use an Id or Class attribute to find a DOM element, but then down the road a designer or developer changes the id or the class of that element, so there’s a better, more future proof way to find elements.

A solution looks like this, for example with a button

In our component

<button data-test-id=”name-button” … ></button>

Give our element a test specific, ID. Now in order to find that we’ll use this.

In our spec file

const button = wrapper.find(‘[data-test-id=”name-button”]’)

Setting things up this way helps us to decouple the test from the implementation details of that component.

Now we don’t need to worry about refactoring our test, just because a designer changes some class name around.
This is a recommended practice for production level tests.

Ok, but what about trigger events?. Again good practices from VueMastery, is by using this.

wrapper.trigger(‘submit’)

Writing in this way allow us to decouple the test from the implementation component’s detail. Again future-proofing our test.

Vue animation state with GSAP

Eulier Gonzalez — Fri, 05 Mar 2021 20:05:05 +0000

Little of theory:
We need to understand first “tweening” and why we use state based animation.

Tween (which is something that it use GSAP behind the scene in it's version 3 ) is short for between, so if we want to transition smoothly from 1 to 10, we’ll need to consider all the values between them along with all of their decimals.

By using Gsap we can have this happen automatically.
So we’ll use this concepts to create a state based animation.

This examples comes directly from Vue-mastery, so i don't own anything and this is just for educational purposes.

<template>
  <div>
    <div :style="{ width: tweenedNumber.toFixed(0) + 'px' }" class="bar">
      <span>{{ tweenedNumber.toFixed(0) }}</span>
    </div>
  </div>
</template>

<script>
import { gsap } from 'gsap'

export default {
  data() {
    return {
      number: 0,
      tweenedNumber: 0
    }
  },
  watch: {
    number(newValue) {
      gsap.to(this.$data, { 
          duration: 1, 
      ease: 'circ.out',
          tweenedNumber: newValue 
      })
    }
  },
  methods: {
    randomNumber() {
      this.number = Math.random() * (800 - 0)
    }
  },
  created() {
    setInterval(this.randomNumber, 1500)
  }
}
</script>

<style scoped>
.bar {
  padding: 5px;
  background-color: #2c3e50;
  border: 1px #16c0b0 solid;
  min-width: 20px;
}
.bar span {
  color: white;
}
</style>

You can look at the example here:
https://repl.it/@eulier1/Gsap

Key features:

Watcher, it allows us to watch a reactive value and do things when that value changes.
Gsap, on the first parameter we’re passing the data’s option object, to give access to our data and on the second parameter we’re indicating how to animate it.
Tween a short for between and allow us to smoothly transition from 1 to 10 along with all their decimals.

Working with Algolia API. Nuxt Plugins

Eulier Gonzalez — Thu, 25 Feb 2021 20:18:41 +0000

Here we’re using Algolia to externalize our API. We’re using the most popular way to communicate with an API, Rest methodology.
We’re going to create a plugin to do this, it’s important to only copy the value of search-only, otherwise if you copy the admin-api key, you’re secret will expose to the world, and then they can read index, update, delete or much worse.
We create a plugin that will contain the code to inform Algolia who we are.

export default function (context, inject) {
    const appId = 'SZEW42EG32'
    const apiKey = '1cb012681351f6a27e7c0133a9f20021'

    inject('dataApi', {
        getHome
    })
    async function getHome(homeId) {
        const response = await fetch(`https://${appId}-dsn.algolia.net/1/indexes/homes/${homeId}`,{
            headers: {
                'X-Algolia-API-Key': apiKey,
                'X-Algolia-Application-Id': appId
            }
        })
        const data = await response.json()
        return data
    }
}

Take note that we’re using the async/await syntactic sugar, thanks to Nuxt use webpack and babel behind the scene, to transform our code in a good old promise that is understood for older browsers.
Lastly we’re using the inject method to expose the getHome function to the rest of the app. We’re using a generic name for flexibility, so if you need to change over the course of the project from any other search provider, you can do it easily.

Include the plugin in the nuxt.config.js

nuxt.config.js

plugins:['~/plugins/dataApi.js']

and then we can use it in our component, created lifecycle hook.

home.vue

    async created(){
        const home = await this.$dataApi.getHome(this.$route.params.id)
        this.home = home
    }

Because Nuxt, doesn’t wait for that promise to resolve (async created), there is a method asyncData when it comes to works with API, only available in Nuxt. This method, receive is the context object similar to the plugin. It gets triggers on the Client side routing or in the server side when we hit it.

    async asyncData({params, $dataApi}){
        const home = await $dataApi.getHome(params.id)
        return {
            home
        }
    }

I'll leave the apiKey open for a couple of weeks, so you can easily try.

Take care and enjoy your process.

Company ask me recommendation for Vue 3

Eulier Gonzalez — Thu, 18 Feb 2021 21:48:07 +0000

While finished 2 courses from Zero To Mastery Academy, Js Advanced Concept, Junior To Senior Web Developer and currently learning Data Structures and Algorithm plus Vue 2 - 3.

I'm looking for jobs on Upwork and suddenly a job post ask me couple questions, that i find out relevant to share.

If you started a brand new project tomorrow, would you personally use Vue 2 or 3, and why?
Vue 3.

There are certainly benefits of using it and just to mention a couple ones:

Lightweight
V-model redesign mechanism (which makes more easy to handle and maintain code), make it simpler to handle multiple models with simple payload.
Reactivity now use Proxy Object instead of Object.defineProperty which benefits from a native object in JavaScript, ergo improve performance.
Composition API, that makes the code much more modular an easy to debug.
Typescript support, which makes the code scalable.

What is your preference, to use Bootstrap as mostly the skeleton and write more custom CSS? Or, to try and do as much as possible with native bootstrap styles and minimal custom CSS?

It's gonna depends on the budget and the client requirements.
If client prioritizes design over boilerplate, use Bootstrap or Vuetify will be a way to go candidate.

What is your process for selecting an npm package for a given problem? Lets say I want to find a package for phone number inputs and many meet your requirements, how would you evaluate which repo is best?

The more packages a project has, the more problems we'll have to handle. Stick to native as much as possible, while keep complexity very low.
Repeated code in some circumstances, may benefit more in term of cost/time rather than a package. ( There is a heated debate over this )

Even so, if I need to choose a package this will roughly be the criteria.

Vue recommendations
Adoption by the community
Open source
Maintainers activity

If you wanna complete my answer, please, feel free to do it.

Interview Question - How to create a text side by side output in node.js (as a diff). From Vanhack

Eulier Gonzalez — Sun, 24 Jan 2021 21:43:22 +0000

This actually was an interview question from VanHack, a platform for remote digital work.

In my blog i explain the details of this

They provide you with 2 assessments and give you 24 hours to solve it.

Even thou i couldn't pass all the test cases of the first assessment, it teach/refresh a lot of concepts from Data Structures, Algorithms, Buffers & Stream over traditionally file read.

Key concepts

Node.js Buffers

A buffer is an area of memory.

A simple visualization of a buffer is when you are watching a YouTube video and the red line goes beyond your visualization point: you are downloading data faster than you're viewing it, and your browser buffers it.

In order words store data to be process later

Node.js Stream

Traditionally, when you tell the program to read a file, the file is read into memory, from start to finish, and then you process it.

Using streams you read it piece by piece, processing its content without keeping it all in memory.

Streams provide two major advantages:

Memory efficiency
Time efficiency

ReadLine using CreateReadStream in Node

Know your BigO or Asymptomatic Analysis of Data Structures

Source
Github code

Nuxt link prefetch

Eulier Gonzalez — Mon, 18 Jan 2021 17:18:51 +0000

Since a month ago, i could afford Mastery Nuxt

Here they're explaining how attribute prefetch works in <nuxt-link> tag.

Nuxt use nuxt-link that allows to navigate in our webapp, one of the features about this, is by default prefetch the pages that are linked in the viewport.

If your app is already pretty busy on first pageview, like if you have a lot of javascript or network traffic, you may want to disable this feature. Don’t worry you have plenty options.

Locally disabling

If you want to disable prefetching for a given link just add no-prefetch on it.
i.e.

<nuxt-link :to="`/home/${home.objectID}`" no-prefetch>
  <home-card :home="home"/>
</nuxt-link>

Globally disabling

In the nuxt.config.js in add a property call router which is an object and add prefetchLinks to set it false, like this.

router: {
  prefetchLinks: false
}

Now you can pick and choose which links to prefetch, this is really handy when it comes to perfomance optimizations