DEV Community: Aymoon

My life feels more native with the new dialog HTML element

Aymoon — Tue, 06 Jun 2023 06:40:47 +0000

🥳 The new HTML5 `<dialog>` element. 🥳

From the first glance on the element's page on MDN you can notice they wanted to standard a behavior for the modals by providing usability and accessibility features.

The native HTML <dialog> element should be used in creating modal dialogs as it provides usability and accessibility features that must be replicated if using other elements for a similar purpose. Use the appropriate .showModal() or .show() method to render dialogs. If creating a custom dialog implementation, ensure all expected default behaviors are supported and proper labeling recommendations are followed.

enough talk let's see some code.

<dialog id="favDialog">
  <p>Greetings, one and all!</p>
  <form method="dialog">
    <button>OK</button>
  </form>
</dialog>

<button id="showDialog">Show the dialog</button>

const showButton = document.getElementById('showDialog');
const favDialog = document.getElementById('favDialog');

// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener('click', () => {
  favDialog.showModal();
});

Simple but enough. As you can see, we use the showModal() method to render the dialog. The form has method="dialog" so it closes the modal when submitted.

<form> elements can close a <dialog> if they have the attribute
method="dialog" or if the button used to submit the form has
formmethod="dialog" set. In this case, the state of the form
controls is saved, not submitted, the <dialog> closes, and the
returnValue property gets set to the value of the button that
was used to save the form's state.

We can also close the dialog with the close(returnValue) method. And to style the overlay behind the dialog we can use the ::backdrop CSS pseudo-element (which appears only when we use showModal()).

There are only 2 events related to the dialog.

cancel: Fired when the user press Esc and the dialog is dismissed.

addEventListener("cancel", (event) => {});

oncancle = (event) => {};

close: Fired when the dialog is closed with any other method.

addEventListener("close", (event) => {});

onclose = (event) => {};

More Info for nerds 👾

There is actually two more ways to open the dialog. showModal() is the classy way of doing it. But as you know some of us need to get dirty 😏.

Don't worry we got you. There is the show() method and the open attribute.

when we use showModal() it renders the dialog in the Top layer also Interaction outside the dialog is blocked and the content outside it is rendered inert. which means it can't receive focus or be clicked. Also the modal will have a ::backdrop CSS pseudo-element.

sometimes -for any reason- you don't need -or want- that behavior. you can then use the show() method. It will do just what you need but will keep the dialog with same accessibility features. But you can interact with content outside the dialog.

It's not recommended to do the following... but if you really need to do something really dirty. you can set the open attribute to true and then remove it to close the modal. oh, it's not a modal anymore.

open
Indicates that the dialog is active and can be interacted with. When
the open attribute is not set, the dialog shouldn't be shown
to the user. It is recommended to use the .show() or
.showModal() methods to render dialogs, rather than the open
attribute. If a <dialog> is opened using the open attribute,
it will be non-modal.

When NPM miss with Heroku, How To Solve (npm ERR! Failed at the start script).

Aymoon — Tue, 10 Aug 2021 22:48:39 +0000

Important

This Article supposes you working with the nuxt-express starter template. But I think it's a global issue that might happen with React and Next or may happen in general.
You can go to the solution section and you will be good to go. The rest is just if you are interested enough.

Boring talk

It's a weird problem that turned my life into hell for long long time. NPM doesn't install the dependencies. For some reason I like Heroku, simple and just work. But when I started to use Nuxt with express and deploy the app to Heroku I started to get this issue. Every time I spend the whole day tying to figure out what did I do to make this happen but I did nothing. A normal deployment. And then I create a new project, copy all the logic from the old project to the new one and install the same packages. and sometimes it doesn't work as well so I create a new app in Heroku and do the same thing again and again till it work. Sometimes I go with another solutions -like Vercel or Portal Azure- but it doesn't feel like home if you know what i mean. But today I figured out a way to solve this issue finally.

Why this happens?

I don't know exactly why this happens lol. But after I read Heroku Node.js support I found out that Heroku doesn't run npm i to install the dependencies instead it runs npm ci.

If you want to know the difference about the two you can find it here. But In short, the main differences between using npm install and npm ci are:

The project must have an existing package-lock.json or npm-shrinkwrap.json.
If dependencies in the package lock do not match those in package.json, npm ci will exit with an error, instead of updating the package lock.
npm ci can only install entire projects at a time: individual dependencies cannot be added with this command.
If a node_modules is already present, it will be automatically removed before npm ci begins its install.
It will never write to package.json or any of the package-locks: installs are essentially frozen.

So I configured Heroku to use npm i and also disabled cache to make sure every time I deploy the app it reinstall everything.

The solution

First of all I specified my Node and NPM versions in my package.json you can know the exact versions with those commands:

for Node:

node -v

and for NPM:

npm -v

then in add both of them in your package.json like this:

"engines": {
  "npm": <Your npm version>,
  "node": <Your node version>
}

As I said before you need to configure Heroku to use npm i instead of npm ci and to disable Heroku Cache. you can do this in two ways.

The first one you can use the Heroku CLI :

1- Make sure you're logged in with your Heroku account

heroku login

2- Use these commands to do the trick

$ heroku config:set USE_NPM_INSTALL=true -a <Your app name>
$ heroku config:set NODE_MODULES_CACHE=false -a <Your app name>

The second way is to do it from Heroku itself

1- Go to your app in Heroku and in the Settings tab

2- scroll to 'reveal config vars' button

then add

index	key	value
1	NODE_MODULES_CACHE	false
2	USE_NPM_INSTALL	true

you should end up with something like this

Don't forget to add your other env variables :)
I wish this ends the suffer.

Deploy Nuxt-Express app on Vercel with SSR functionality

Aymoon — Thu, 01 Jul 2021 01:58:30 +0000

Today I tried to deploy a Nuxt-Express app on Vercel and wanted to share this experience.

what is Nuxt?

In case you don't know. Nuxt.js is a framework that helps you build server-rendered Vue.js applications easily. It abstracts most of the complex configuration involved in managing things like asynchronous data, middleware, and routing. It’s similar to Angular Universal for Angular, and Next.js for React.

what is vercel?

Vercel is a cloud platform for static sites and Serverless Functions that fits perfectly with your workflow. It enables developers to host websites and web services that deploy instantly, scale automatically, and requires no supervision, all with no configuration.

Let's get started

1- Create the project. You can do that manually or just go with the Starter template for Nuxt.js with Express it won’t make a difference but I’ll suppose you downloaded the template and installed the packages.

2- Install @nuxtjs/vercel-builder.

npm i @nuxtjs/vercel-builder --save-dev

3- Create a vercel.json file and add this into:

{
  "version": 2,
  "builds": [
    {
      "src": "nuxt.config.js",
      "use": "@nuxtjs/vercel-builder",
      "config": {
        "serverFiles": ["api/**"] // HERE ADD THE PATH TO YOUR SERVER FILES
      }
    }
  ]
}

That’s all for the code. Now let’s deal with Vercel.

1- Import your github repo.
2- select the Vercel scope in my case I choose personal account.
3- Configure the build and output settings. You need to override the default values. In The build command field add npm run build. And in the output directory add .nuxt

4- The last step is to add your env variables.

At the end you should have something like this.

Now click deploy and That’s it you can now visit your app. Enjoy! 🎉