DEV Community: machy44

Take advantage of rest parameters

machy44 — Sat, 21 Sep 2024 15:31:53 +0000

I went through the node.js material today and I used path.join method. This method is used widely in node.js.

path.join("/foo", "bar"); // Returns: '/foo/bar'
path.join('/foo', 'bar', 'baz/asdf', 'quux', '..');
// Returns: '/foo/bar/baz/asdf'

As you could realize, you can execute this method with as many parameters you want. That's how I got the idea for this short post.

The concept which is used behind is named rest parameters in js.

let's imitate `path.join`


const imitatePathJoin = (...args) => {
  return args.join("/");
}

console.log(imitatePathJoin('/home', 'js', 'dist', 'app.js')); 
// "/home/js/dist/app.js" 
console.log(imitatePathJoin('/home', 'js', 'dist', 'app.js', "something", "something")); 
// "/home/js/dist/app.js/something/something

Simple as that. This concept can be really useful if you find yourself in a situation that you want to have the function which could accept indefinite number of arguments and do something with them.

Conclusion

There are many more things which path.join method does. For example, it will throw the error if parameter is not a string. But rest parameters is the crucial concept how it is implemented and that is the thing I wanted to show in the post.

Hope you could learn something new from this one. Take care!

Check used fonts on a webpage

machy44 — Sun, 23 Jun 2024 14:42:22 +0000

Circumstances

As I am currently learning next.j. I am going through the course created by next team (https://nextjs.org/learn).

There is a section related to fonts and images optimization.
Honestly, I have never paid much attention to fonts and which fonts are used on a certain element on a webpage.
But I realized going through this material that you are able to do that. You can find out which fonts are used on a certain element. You could have more than one custom fonts on the page and this could be useful.

As I am using Chrome as my default browser I opened devtools and checked the used fonts.

This seemed pretty poor and without much info.

But I did the same thing in firefox and firefox seems to have much more options regarding fonts. You could change the size, line height, spacing, weight through it's editor. This seems quite useful especially while you are trying to find out which font properties suit you best for a certain element.

My thoughts

These findings regarding fonts reminded me when I had some troubles with the layout in the past that I could do much better debugging in firefox than in chrome.
Firefox seems is taking more care about css stuff to make FE development more fluid than chrome does. I think I should take this in consideration next time while I am doing css work and use firefox as a default one!

Cheers. Have a good day!

Take advantage of closure

machy44 — Fri, 02 Dec 2022 10:04:17 +0000

I had an interesting question in a technical interview. I had to create function which output behaves this way.

counter() // 0
counter() // 1
counter() // 2

Each time counter is executed it should log number incremented by one. I immediately realized the idea of interviewer was to see if I understand closures.

This was my solution.

const counter = (() => {
  let count = -1;
  return () => {
    console.log(++count); 
  };
})()


counter();
counter();
counter();
counter();

As you could see I also used Immediately Invoked Function Expression (IIFE) which creates its own scope instantly.

Conclusion

The more experienced I am, the more I realize how important is Javascript: The good parts book. Most of the abstractions used in js libraries/frameworks are implemented above ideas described in this book.
If you want know more about closures you can read about them in chapter 4 (section Closure).

Imitate lodash get method

machy44 — Sun, 17 Jul 2022 17:05:15 +0000

This afternoon I used lodash.get together with react-hook-form to display error message in a form and I got the idea I could try to implement get myself as some type of brain training.

This implementation covers only use case when the path is string. Also I didnt cover get's defaultValue param.
I used the same test object as one used in lodash documentation.
Also this example wont return undefined when object's key is array, unlike lodash.get.

const get = (unit, path) => {

  if (path === "") {
    return unit;
  }

  const pathList = path.split(".");

  return Array.isArray(unit)
         ?  get(unit[0], pathList.join("."))
         :  get(unit[pathList[0]], pathList.slice(1).join("."));
};  

var test = { a: [{ b: { c: 3 } }] };

console.log(get(test, "a.b.c"));

Conclusion

This code is only for educational purpose. Edge cases are not covered here and it should not be used anywhere in production. So long.

react/redux app data caching

machy44 — Thu, 09 Jun 2022 13:51:13 +0000

How do you implement data caching in react/redux app?

What is the Micro Frontend?

machy44 — Mon, 24 Aug 2020 15:51:21 +0000

Today I heard Micro Frontends term. What is the idea behind Micro Frontends? Is the monorepo development approach in close correlation with Micro Frontends?

Temporal Dead Zone

machy44 — Mon, 10 Aug 2020 16:51:10 +0000

I got a question on the last job interview what is the Temporal Dead Zone. I have not heard about this concept before and as you can guess I did not know the answer. This gave me an idea to write this post about the concept. This post will be short and sweet. Let's get to the point.

What is the Temporal Dead Zone

When you are working with var keyword it will be hoisted and initialized with the undefined value. let and const are also hoisted but they do not get an initial value. Let's see an example:

console.log(varTest); //undefined
var varTest;
console.log(letTest); //ReferenceError: letTest is not defined
let letTest

Maybe this was not the best example but it serves a purpose.

Conclusion

That is the Temporal Dead Zone. Nothing spectacular but now if you hear that term somewhere you will know what is it about.

If you have some thoughts to share or I missed something feel free to comment.

When do you use generator based library for async programming instead of the async/await?

machy44 — Sun, 09 Aug 2020 17:39:10 +0000

When I have to do some async programming I always choose the async/await syntax. But today I have read about co lib which is based on generators. What are the pros and cons of both approaches?

Could you give me an example in which situations are generators better choice for async programming than async/await?

Shallow comparison in Redux

machy44 — Wed, 10 Apr 2019 21:20:55 +0000

One day at work I was trying to implement a new feature in my React/Redux project. I created a new reducer and asked myself if I took reducers as pure functions for granted. I was creating reducers as a pure function and I have never really asked myself why it must be pure (I admit I'm ashamed). I thought the only reason for this is to accomplish the undo history option in redux easier.

In this blog, I will try to explain why reducer shouldn't mutate the app's state. I will use the spread operator syntax.

Shallow comparison

Every time when you change something in the state you need to create a new object.That new object will have a new address in the memory. It means that we will pass an object by value, not by reference. You can see in the next JS code what does this mean.

//by reference
let first = {a: 1};
let second = first; // second shows on the same space in memory as the first
first.a = 2;
first === second; // shallow comparison will log true

console.log(first); // {a: 2}
console.log(second); // {a: 2}

//by value
let firstValue = {a: 1};
let secondValue = {...firstValue}; // we pass firstValue by the value
firstValue === secondValue; // shallow comparison will log false
firstValue.a = 2;

console.log(firstValue); // {a: 2}
console.log(secondValue); // {a: 1}

In Redux, a reducer is a function which does a certain job (it changes the app's state ). You can see this in an example below.

const initialState = {
    data: [],
    isError: false,
    isLoading: false
}

function exampleReducer(state = initialState, action) {
  switch (action.type) {
    case REQUEST_API:
      return { ...state, isLoading: true }; //creating a new state object
    case RESPONSE_API:
      return { ...state, isLoading: false, data }; //creating a new state object
    default:
      return state;
  }
}

Redux does the shallow comparison:

oldState === newState; // true or false

If a change has happened in the state (a new object is created) false value will be returned. This way, React/Redux knows if a component re-rendering needs to be triggered. It's more efficient to check this than doing a deep comparison or something else.

Sometimes we could encounter with deeply nested objects which can be hard to update. In this situation you can normalize the app's state or you can use immutable-focused libraries such as Immutable.js. Maybe I could write about this in some future posts.

Conclusion

In the end, it is easier to test pure functions.

It's always good to look at things under the hood and try to understand why things are the way they are.

If you have some thoughts to share or I missed something fell free to comment.

In which situations did you use ref forwarding technique in React application?

machy44 — Thu, 04 Apr 2019 22:03:56 +0000

I took a look at React documentation about forwarding refs technique and I don't quite understand the concept and I have no idea where is a need to use that technique?

In which situation have you been using ref forwarding and can you explain to me why it was necessary?

Understand Iterators in js

machy44 — Thu, 04 Apr 2019 20:59:16 +0000

Iterators work because of closures in javascript. The iterator can be written as a function inside a function which you can see in the next code example.

function createFunction(array) {
    let i = 0;
    function inner(){
        const element = array[i];
        i++;
        return element;
    }

    return inner;
}

const returnNextElement = createFunction([4,5,6])
const element1 = returnNextElement()
const element2 = returnNextElement()

But we know that we need to use .next() property to get next element from the array. We can do that in the way that inner function becomes method.

function createFlow(array) {
    let i = 0;
    const inner = {
    next: function(){
            const element = array[i];
            i++;
            return element;
        }
    }
    return inner;
}

const returnNextElement = createFlow([4,5,6]);
const element1 = returnNextElement.next(); // 4
const element2 = returnNextElement.next(); // 5

Short and sweet :)

Let's create our map method

machy44 — Fri, 22 Jun 2018 19:32:57 +0000

If you want to take a closer look on how JS works and how we created our own filter function, you can see my earlier post:

Let's create our own filter method in JS

machy44 ・ Feb 26 '18

#javascript #filter #webdev

I think this two posts combined are a good way to find out how standard array methods work in JS.

It's very important to know that Array.prototype.map() returns a new array which means that the old array is not mutated. (Mutation is a very important concept when you start to work with React and Redux libraries). Enough talking, now let's code. Here is a simple example how map works.

var arr = [1,2,3];

var newArr = arr.map(function(element){
  return element + 1;
});

console.log('arr: ', arr);
// arr is not mutated and returns [1,2,3]

console.log('newArr: ', newArr );
//newArr returns [2,3,4]

Now, Let's go code our own map function

In this example we will not check if the first parameter is an array or if the second parameter is a callback function, and so on. Detailed syntax of map function you can find on developer.mozilla.org.

let arr = [1,2,3];

Array.prototype.ownMap = function(callback) {
  let mappedArr = [];
  for(let i=0; i < this.length; i++) {
    mappedArr.push(callback(this[i]))
  }
  return mappedArr;
}

let newArr = arr.ownMap(function(element) {
  return element + 1;
});

console.log('arr: ', arr);
// not mutated and returns [1, 2, 3]
console.log('newArr: ', newArr);
// returns [2, 3, 4]

Now let's play with indexes because an index can be send as the second parameter in map callback function.

let arr = [1,2,3,4];

Array.prototype.ownMap = function(callback) {
  let mappedArr = [];
  for(let i=0; i < this.length; i++) {
    mappedArr.push(callback(this[i], i)) // we defined i as second argument
  }
  return mappedArr;
}

let newArr = arr.ownMap(function(element, index) {
  return element + index;
});

console.log('arr: ', arr);
// not mutated and returns [1, 2, 3, 4]
console.log('newArr: ', newArr);
// returns [1, 3, 5, 7]

Conclusion

When you are learning something it's always best to know how things work under the hood. Please, let me know, if there is something I didn't mention and it's good to know.

DEV Community: machy44

Take advantage of rest parameters

let's imitate path.join

Conclusion

Check used fonts on a webpage

Circumstances

My thoughts

Take advantage of closure

Conclusion

Imitate lodash get method

Conclusion

react/redux app data caching

What is the Micro Frontend?

Temporal Dead Zone

What is the Temporal Dead Zone

Conclusion

When do you use generator based library for async programming instead of the async/await?

Shallow comparison in Redux

Shallow comparison

Conclusion

In which situations did you use ref forwarding technique in React application?

Understand Iterators in js

Let's create our map method

Let's create our own filter method in JS

machy44 ・ Feb 26 '18

Now, Let's go code our own map function

Conclusion

let's imitate `path.join`