DEV Community: Aissa BOUGUERN

I have a problem with Vue composition API

Aissa BOUGUERN — Mon, 07 Sep 2020 01:48:27 +0000

Hi,
I'm trying to create a vue composable hook to toggle sidebar menu.

import { reactive, toRefs } from '@vue/composition-api';

const useToggleMenu = () => {
  const state = reactive({
    isMenuOpen: true,
  });

  const toggleMenu = () => {
    state.isMenuOpen = !state.isMenuOpen;
  };

  return {
    ...toRefs(state),
    toggleMenu,
  };
};

export default useToggleMenu;

the problem I'm facing is when using isMenuOpen state in one component (ex: Layout), and use toggleMenu in another component (ex: BurgerMenu).

// BurgerMenu.vue

import { useToggleMenu } from '../hooks';

export default {
  name: 'BurgerMenu',
  setup() {
    const { toggleMenu } = useToggleMenu();
    return {
      // use this in template to show/hide menu.
      toggleMenu,
    };
  },

  ...
};

// Layout.vue

import { useToggleMenu } from '../hooks';

export default {
  name: 'Layout',
  setup() {
    const { isMenuOpen } = useToggleMenu();

    return {
      // use this in template to add some classes to <body>
      isMenuOpen,
    };
  },
};

  ...
};

the issue is when I click burger menu and trigger the toggleMenu function, that does not make any change! the isMenuOpen boolean is not reactive.

I hope that is clear, and thanks to anyone trying to help.

You Use Bootstrap ? Don't EVER Write Those CSS Properties

Aissa BOUGUERN — Tue, 11 Feb 2020 13:28:02 +0000

Bootstrap is the most used CSS framework by web developers. It comes with a bunch of utilities that makes our work easier and improve the productivity if it is used wisely.

This is a list of CSS rules/properties you don't need to write in your stylesheet file if you're using Bootstrap framework.

Position

You don't need to write position: relative; or position: absolute; in your CSS file! Bootstrap is giving us a list of utility classes allowing to control the positioning type from the HTML template.

<div class="position-relative"></div>
<div class="position-absolute"></div>
<div class="position-sticky"></div>
<div class="position-static"></div>
<div class="position-fixed"></div>

Overflow

<div class="overflow-hidden"></div>
<div class="overflow-auto"></div>

Text Decoration

Anchor texts are by default underlined in Bootstrap. If you want to undo this behavior you can juste use text-decoration-none class.

<a href="#" class="text-decoration-none">This is a link</a>

Visibility

<!-- visibility: visible; -->
<div class="visibile"></div>

<!-- visibility: hidden; -->
<div class="invisible"></div>

Font Weight

<!-- font-weight: 300; -->
<div class="font-weight-light"></div>

<!-- font-weight: 400; -->
<div class="font-weight-normal"></div>

<!-- font-weight: 700; -->
<div class="font-weight-bold"></div>

<!-- font-weight: bolder; -->
<div class="font-weight-bolder"></div>

Text Transform

<!-- text-transform: uppercase; -->
<div class="text-uppercase"></div>

<!-- text-transform: lowercase; -->
<div class="text-lowercase"></div>

<!-- text-transform: capitalize; -->
<div class="text-capitalize"></div>

Display

This is an essential CSS property that you will use massively as a frontend developer. That's why Bootstrap feeds us with a large list of classes to deal with display property responsively.

<!-- display: block; -->

<!-- All screens -->
<div class="d-block"></div>

<!-- Small devices -->
<div class="d-sm-block"></div>

<!-- Medium devices -->
<div class="d-md-block"></div>

<!-- Large devices (Tablets) -->
<div class="d-lg-block"></div>

<!-- Extra large devices (Desktop) -->
<div class="d-xl-block"></div>


<!-- display: flex; -->

<!-- All screens -->
<div class="d-flex"></div>

<!-- Small devices -->
<div class="d-sm-flex"></div>

<!-- Medium devices -->
<div class="d-md-flex"></div>

<!-- Large devices (Tablets) -->
<div class="d-lg-flex"></div>

<!-- Extra large devices (Desktop) -->
<div class="d-xl-flex"></div>

<!-- display: none; -->
...

<!-- display: inline; -->
...

<!-- display: inline-block; -->
...

Flexbox properties

Bootstrap is based on CSS Flexbox. This layout comes with a lot of properties that allow us to have a control over.

With Bootstrap we can make use of all those properties directly from HTML and, like we saw with display property, responsiveness is guaranteed out-of-the-box.


<!-- justify-content; -->

<!-- All screens -->
<div class="justify-content-center"></div>

<!-- Small devices -->
<div class="justify-content-sm-center"></div>

<!-- Medium devices -->
<div class="justify-content-md-center"></div>

<!-- Large devices (Tablets) -->
<div class="justify-content-lg-center"></div>

<!-- Extra large devices (Desktop) -->
<div class="justify-content-xl-center"></div>

<div class="justify-content-start"></div>
<div class="justify-content-end"></div>
<div class="justify-content-between"></div>
<div class="justify-content-around"></div>


<!-- align-items; -->

<div class="align-items-start"></div>
<div class="align-items-end"></div>
<div class="align-items-center"></div>
<div class="align-items-baseline"></div>
<div class="align-items-stretch"></div>

<!-- align-content; -->

<div class="align-content-start"></div>
<div class="align-content-end"></div>
<div class="align-content-between"></div>
<div class="align-content-around"></div>
<div class="align-content-center"></div>
<div class="align-content-stretch"></div>

Width & Height

<!-- width: 25%; -->
<div class="w-25"></div>

<!-- width: 50%; -->
<div class="w-50"></div>

<!-- width: 75%; -->
<div class="w-75"></div>

<!-- width: 100%; -->
<div class="w-100"></div>

<!-- width: auto; -->
<div class="w-auto"></div>

<!-- max-width: 100%; -->
<div class="mw-100"></div>

<!-- height: 25%; -->
<div class="h-25"></div>

<!-- height: 50%; -->
<div class="h-50"></div>

<!-- height: 75%; -->
<div class="h-75"></div>

<!-- height: 100%; -->
<div class="h-100"></div>

<!-- height: auto; -->
<div class="h-auto"></div>

<!-- max-width: 100%; -->
<div class="mh-100"></div>

Padding & Margin

Every layout or design depends on padding and margin properties.

Here is a list of utilities that may help you:

<!-- Padding Top -->

<!-- padding-top: 0; -->
<div class="pt-0"></div>
<div class="pt-xs-0"></div>
<div class="pt-sm-0"></div>
<div class="pt-md-0"></div>
<div class="pt-lg-0"></div>
<div class="pt-xl-0"></div>


<!-- padding-top: 0.25rem; -->
<div class="pt-1"></div>
...

<!-- padding-top: 0.5rem; -->
<div class="pt-2"></div>
...

<!-- padding-top: 1rem; -->
<div class="pt-3"></div>
...

<!-- padding-top: 1.5rem; -->
<div class="pt-4"></div>
...

<!-- padding-top: 3rem; -->
<div class="pt-5"></div>
...


<!-- Padding Left -->
<div class="pl-0"></div>
...

<!-- Padding Right -->
<div class="pr-0"></div>
...

<!-- Padding Bottom -->
<div class="pb-0"></div>
...

<!-- Horizontal Padding -->
<div class="px-0"></div>
...

<!-- Vertical Padding -->
<div class="py-0"></div>
...

You can use the same naming convention for margin classes. Just replace p width m.

Screen Reader Only

Sometimes, we need to add some text to html markup and we want it to be available only for screen readers for accessibility purposes.

Bootstrap provide a class utility to do that: sr-only.

<div class="sr-only"><a href="#content">Skip to Main Content</a></div>

Float

Personaly, I dont use float property anymore! But if you do, here is some gems for free:

<div class="float-left"></div>
<div class="float-right"></div>
<div class="float-none"></div>

How to add Admob Ads to Ionic Apps Using React.js ?

Aissa BOUGUERN — Thu, 14 Nov 2019 12:42:06 +0000

Please,

How to add Admob Ads to Ionic/React.js applications ?

I did find this example on their documentation but it's for Angular.

Thank you!

Re-render React.js Child Component By Passing Object Prop

Aissa BOUGUERN — Mon, 28 Oct 2019 14:52:46 +0000

I'm working on a Quiz app,

I have a list of questions, every question must be answered in 30 seconds. And when the user click NEXT button, I want to restart the countdown.

The countdown (child component), as you can see, accepts two properties: time and onComplete.

<Countdown time={30} onComplete={onComplete} />

I want to restart the countdown by resetting time value to 30. The problem is that the <Countdown /> will not detect that change because of React.js props equality check.

So, to surpass this situation, I now passe time prop as an object.

Here is an example:

<Countdown time={{time: 30}} onComplete={onComplete} />

Now, every time I call setTime({time: 30}) in the parent component, the countdown component detects that change and it restarts successfully.

const Quiz = () => {

    const [time, setTime] = React.useState({time: 30});

    function goToNext(){
        setTime({ time: 30 });
        ...
    }

    return (

        <Countdown time={{time: 30}} onComplete={onComplete} />

        <Question current={1} />

    )

});

I understand why React.js does not detect equality here, and I came up with this solution after reading this medium article.

The only thing I want to know is:

Is this a good solution for this case ? Or I can do better ?

Waiting for your responses...

Thank you,