DEV Community: ch

v-show versus .d-flex !!

ch — Fri, 14 May 2021 08:35:06 +0000

While programming with Vue/Bootstrap, I was facing one case that v-show is not working unexpectedly.
In the below example, those two div elements are always visible, not based on showBack.
So I wondered, is Vue having some internal problem? :)

<div class="d-flex justify-content-between" v-show="showBack">
~~
</div>
<div class="d-flex justify-content-end pt-4" v-show="!showBack">
~~
</div>

But finally I noticed, the reason.
v-show="false" => display: none;
.d-flex in bootstrap, => display: flex!important. omg~~

Do you have any experience like this?
With this opportunity, I noticed, that I am not still professional myself. lol

JavaScript Arrow & Regular functions case study

ch — Mon, 16 Nov 2020 12:04:37 +0000

We know the differences between arrow and regular functions in JavaScript. But sometimes I often meet difficult situations to predict the running results of JavaScript functions correctly.
So I have built simple test scripts to explain deeper about JavaScript functions and introduce here.
For the beginners, please visit here.

const case1 = {
    name: "Case1",
  fnArrow: () => {
    console.log("case1/fnArrow: ", this.name)
  },
  fnRegular: function(){
    console.log("case1/fnRegular: ", this.name)
  },
  fnArrowOutside: () => {
    console.log("case1/fnArrowOutside: ", this.name)
  },
  fnRegularOutside: function(){
    console.log("case1/fnRegularOutside: ", this.name)
  },
}

class Case2 {
    constructor() {
    this.name = "Case2"
  }
  fnArrow = () => {
    console.log("case2/fnArrow: ", this.name)
  }
  fnRegular(){
    console.log("case2/fnRegular: ", this.name)
  }
  fnArrowOutside = () => {
    console.log("case2/fnArrowOutside: ", this.name)
  }
  fnRegularOutside(){
    console.log("case2/fnRegularOutside: ", this.name)
  }
}
const case2 = new Case2()

case1.fnArrow();
case1.fnRegular();
case2.fnArrow();
case2.fnRegular();

setTimeout(case1.fnArrowOutside, 100);
setTimeout(case1.fnRegularOutside, 200);
setTimeout(case2.fnArrowOutside, 300);
setTimeout(case2.fnRegularOutside, 400);

And this is a running result.

CSS Selectors 'nth-of-type' and '~'

ch — Thu, 01 Oct 2020 00:42:48 +0000

Description

p:nth-of-type(2)
/* Selects every <p> element that is the second <p> element of its parent */

p ~ ul
/* Selects every <ul> element that are preceded by a <p> element */

I often use those 2 selectors in CSS stylesheet.
But I did not know about this correctly.
So I would like to share about my fault here with all of us.

div:nth-of-type(2n){
  background-color: red;
}
.c ~ .c {
  background-color:blue;
}
.d ~ .c {
  background-color:green;
}

Tools for work and project!

ch — Sun, 20 Sep 2020 15:05:48 +0000

What kind of tools are you using for development?
I am using these ones. and you ?
What is more effective and convenient?
Let's share our environment, and improve our productivity here.

Documentation

notion, asana

Wireframing

balsamiq

UI/UX Design

Figma, Photoshop

communication

slack

editor

VScode, vim

Version control

sourcetree

screenshot sharing & highlighting

cloudapp

screen recording

Snagit

Browsers

Chrome, Firefox

Chrome Extensions

lighthouse, Windows Resizer, Pesticide

How can I refactor this code snippet?

ch — Sat, 19 Sep 2020 08:55:29 +0000

While developing vuejs project, I often meet a situation like the following:
Here "this" is the vue component.
I would love to refactor this code to look it very nice.
Please share your idea with me.
Thank you.

const newReportPart = {
        id: this.id,
        title: this.title,
        description: this.description,
        product_id: this.product_id,
        product_title: this.product_title,
        rate: this.rate,
        saved: this.saved,
        attachments: this.attachments,
      };
      this.$emit('submitReportPart', this.index, newReportPart);

Beginners' free but exciting trip to ReactJS with CardGame!

ch — Fri, 18 Sep 2020 09:33:45 +0000

Hello All Beginners!
I would like to introduce one of my Reactjs example projects here.
It has used React, Redux, and axios to communicate with Rails based backend.

1 Minute's demonstration video here.
https://drive.google.com/file/d/1ouZHTJv2J71HVZSfRgqFxvaXuVi5pvkO/view?usp=sharing

It was very difficult to implement small & simple logic game with plain #JavaScript, but now with #ReactJS, and it gives us great possibility to build anything we want.
But here it also requires great wisdom and knowledge to divide and modularize the project into components.
And one more important thing is to manage the status flow with the sequences of user's activity.
Please feel free to take a look at the source repository.
Then you will notice easily about components, and state management.

How ReactJS creates inside functions? amazing !

ch — Wed, 19 Aug 2020 00:05:06 +0000

In the past, I did not care how ReactJS creates functions and variables while re-rendering components.
But I had a few chance to look at about this.

Now ReactJS creates all functions and variables newly whenever they re-render their component.
To optimize performance with memory, useCallback was very effective for this, and decreased re-creation times a lot more.
Please check my repository, and github pages to test.

https://github.com/yeahCH/react-performance-inspector
https://yeahch.github.io/react-performance-inspector/

NestJS-JumpStart

ch — Tue, 18 Aug 2020 00:50:59 +0000

github.com/clj-solutions/nestjs-jumpstart

Nest (NestJS) is a framework for building efficient, scalable Node.js server-side applications. It uses progressive JavaScript, is built with and fully supports TypeScript (yet still enables developers to code in pure JavaScript) and combines elements of OOP (Object Oriented Programming), FP (Functional Programming), and FRP (Functional Reactive Programming).

For beginners, it is a bit difficult to land on, and develop a new project with it.
So I have created public repo as a jumpstart, and here it provides basic authentication by passport and unit testing by jest.
Please take a look, and give your feedback.
Thank you.

CardGame by ReactJS

ch — Tue, 18 Aug 2020 00:44:06 +0000

ReactJS is very popular thesedays, and it is really helpful to build a web application by component based.
For beginners, I have created my own card game with ReactJS.

Major Components
CardHolder
Card
BlankCard
BackCard

Now it is not enough to play with good mood, and much things to update.
Welcome for any developers to contribute, and provide great idea.