DEV Community: Brian

Javascript Promises

Brian — Mon, 23 Dec 2019 22:33:22 +0000

Was working with javascript promises in a project and at one point I needed to know how .then worked with having a promise inside of it.

Here is what I found promises have to resolve before the .then will fire. If you want to have a promise inside a then you can do that but it needs to be a resolved promise. Here is some example code.

new Promise(function(resolve, reject) {

  setTimeout(() => resolve(1), 1000);

}).then(function(result) {

  alert(result); // 1

  return new Promise((resolve, reject) => { // (*)
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) { // (**)

  alert(result); // 2

  return new Promise((resolve, reject) => {
    setTimeout(() => resolve(result * 2), 1000);
  });

}).then(function(result) {

  alert(result); // 4

});

Also here is some documentation on promises from javascript.info https://javascript.info/promise-chaining

Event Sourcing Pattern

Brian — Mon, 23 Dec 2019 22:15:08 +0000

Event Sourcing Pattern and how it works

I recently learned about the event sourcing pattern while working on a ruby api and as I was learning it I was able to draw a neat little graphic that helped me learn. Here it is and I hope you it helps you.

Alternative to the spread operator

Brian — Mon, 02 Dec 2019 17:53:10 +0000

Alternative to the spread operator.

TLDR: Object.assign(object, object)

I was doing some work on a serverless function and I didn't have ES6 support so I had to figure out how to supplement the spread operator. Below is an example of the spread operator with some objects that hold some food.

const moreFood = {
'pizza': '🍕',
 'steak': '🥩',

}

const food = { 'chocolate': '🍫', 'icecream': '🍦', 'pizza': 'pizza', ...moreFood }

//results

{
'chocolate': '🍫', 
'icecream': '🍦',
'pizza': '🍕',
'steak': '🥩',
}

One of the alternatives to the spread operator is the Object.assign function. Here is the same function using the object.assign function.

const moreFood = {
'pizza': '🍕',
 'steak': '🥩',

}

const food = { 'chocolate': '🍫', 'icecream': '🍦', 'pizza': 'pizza' }

Object.assign(food, moreFood)

//results

{
'chocolate': '🍫', 
'icecream': '🍦',
'pizza': '🍕',
'steak': '🥩',
}

Side note:

If there is a duplicate key like in the example with pizza both the spread operator and the Object.assign function both will take what the right objects says pizza is.

Mocking Modules with Jest

Brian — Fri, 11 Oct 2019 18:43:15 +0000

The other day I posted how frustrated I was with mocking a custom module with Jest. https://twitter.com/brianmcoates/status/1182097590126628864

What I found was in Jest when setting up a custom mock you need to pass the function you are wanting to mock to jest.mock() not the mock that you have created but the actual custom module which is ultimately a function.

If you are also using a function on your MOCK to set the context in your tests you will need to import the actual function you are mocking in your tests that you are writing.

Below is an example of importing and using a custom module in one of my tests.

import uuid from '../utilities/uuid';
jest.mock('../utilities/uuid');

If you aren't setting context or needing to set up the function in anyway you can just get away with doing nothing! IF you make sure your mocks are living in the right place.

The key here is you have to place your mock adjacent to your custom module. There is an example below and here is the Jest documentation on that as well. https://jestjs.io/docs/en/manual-mocks.html

.
├── utilities
│ ├── mocks
│ │ └── uuid.js
│ └── uuid.js
├── node_modules
└── views

Hope this was helpful.

Refactoring Conditionals for More Readable Code

Brian — Tue, 24 Sep 2019 02:19:49 +0000

The today I was writing some code and it just felt weird when I started to write this long conditional. I asked a coworker of mine did he have any ideas to what we could do to make this more readable. We did the following

Before

  class GetStuff

    def fetch(current_url)
      response = handle_response(query).try(:first)
      return nil if !enabled?(response) && !postable?(response) && current_url == response.global_banner.first.button_url

      response
    end

    private

    def enabled?(value)
      return false if value.nil?
      value.enabled
    end

    def postable?(value)
      Time.at(value.post_date) < Time.now && value.enabled
    end
  end

After


  class GetStuff

    def fetch(current_url)
      @current_url = current_url
      @response = handle_response(query).try(:first)

      return nil unless show?

      @response
    end

    private

    def show?
      return false if @response.nil?
      enabled? && postable? && is_current_page?
    end

    def is_current_page?
      false if @current_url == @response.global_banner.first.button_url
    end

    def enabled?
      @response.enabled
    end

    def postable?
      Time.at(@response.post_date) < Time.now && @response.enabled
    end
  end

We did a couple of things here we removed some reverse logic here.

!enabled?(response) && !postable?(response) && current_url == response.global_banner.first.button_url

We don't need the ! anymore. I don't know about you but the less I have to think about if this thing is true reverse it the better.

We also simplified the variables being passed through to methods by making some instance variables.

Before

def fetch(current_url)
 response = handle_response(query).try(:first)
 return nil if !enabled?(response) && !postable?(response) && current_url == 
  response.global_banner.first.button_url

 response
end

After

def fetch(current_url)
 @current_url = current_url
 @response = handle_response(query).try(:first)

 return nil unless show?

 @response
end

We have a gaurd clause that is protecting us against a empty response from a server. We already had this but it wasn't really clear what it was doing and that it was protecting everything.

Before

return nil if !enabled?(response) && !postable?(response) && current_url == response.global_banner.first.button_url

def enabled?(value)
  return false if value.nil?
  value.enabled
end

After

def show?
  return false if @response.nil?
  enabled? && postable? && is_current_page?
end

Things are more readable and the methods explain why we have the checks in place and what is this condional doing. I feel like this is self documenting code.

What do CSS right initial and right auto do?

Brian — Wed, 01 May 2019 19:59:16 +0000

Was doing code review today and saw some code that intrigued me.

.button {
    position: fixed;
    right: initial;
}

The right: initial was interesting I dug more into what initial does and found out it sets that attribute to what the browsers default settings is. There is a really good article on css tricks about this.

So what is the initial value for the right attribute? I did some investigating and found out that the default value is auto (for chrome at least). That confused me because I always used position: fixed and then just positioned it wherever I wanted with the left, right, top, bottom. I never thought about what would happen if the right attribute was auto (which is it by default). I set up a code pen to demonstrate. What is interesting is when you scroll.

MDN describes what the right attribute does very well here.

"When position is set to absolute or fixed, the right property specifies the distance between the element's right edge and the right edge of its containing block."

When right: auto is set the browser will calculate what the right attribute needs to be set to so that the left side of the child element is right next to the left side of the parent element, because it is positioned fixed when you scroll you can scroll past the containing div but the positioning of the fixed element stays the same.

I hope that you learned something helpful alongside me today.

Hidden Characters

Brian — Wed, 17 Apr 2019 16:02:07 +0000

The other day a bug was reported to my team. On windows machines and android devices we were getting this character.

On android we would be getting just blank squares

When we would go and look in the code we couldn’t find anything.

We were able to cmd + shift + right arrow and it wouldn’t select anything but you could delete the character. Then my boss told me about the bare bones editor and how it has a setting you can turn on to see hidden characters.

Here is the setting to run on hidden characters

After then we were able to see this hidden | character.

If you selected them and did a search and can see what the editor interprets them to be. unicode 2028. https://www.compart.com/en/unicode/U+2028

I was able to then search our whole site to make sure that there wasn't any more of these hidden characters hanging around. We aren’t sure exactly how these characters got added but it could have been a copy and paste from microsoft word or outlook or an old design tool we used in the past.

Extras

I made a couple of designs one for a sticker click here to go get one.

And another for a T shirt if you would like to buy one click here.

Also if you are already using vscode I found a couple of plugins that are supposed to help find hidden characters.
https://marketplace.visualstudio.com/items?itemName=nachocab.highlight-dodgy-characters

https://marketplace.visualstudio.com/items?itemName=wengerk.highlight-bad-chars