DEV Community: Snookums

How do I embed the Auth0 login page into my own web page?

Snookums — Mon, 27 May 2024 16:47:10 +0000

I am using Auth0's Universal Login, which looks like below:

My question is, how to embed this UI component into my own web page?

The desired effect is like:

I checked Auth0's doc but didn't find instructions.
Does it not support it?
If this is the case, are there any other services that I can use?
Or do I have to implement the OAuth procedure myself?

Thanks in advance!

Why in Typescript creating an enum doesn't need a =, but creating a new type does?

Snookums — Thu, 18 Apr 2024 03:45:45 +0000

To create a new enum, the syntax is

enum Some {
    ...
}

But to create a new type, the syntax requires a =:

type Some = {
    ...
}

I wonder why this = is needed?

I think it confuses type and value, and other languages are not like this.

For example, in C++, creating a struct doesn't need a =.

How to dynamically import Swiper.js in Next.js?

Snookums — Wed, 17 Apr 2024 23:20:52 +0000

The question is posted on StackOverflow, but no one has helped so far.

https://stackoverflow.com/questions/78342672/how-to-use-swiper-js-in-next-js

I am a little desperate. Could anyone take a look please?

Thanks!

Is Javascript's import syntax semantically wrong?

Snookums — Wed, 17 Apr 2024 18:50:07 +0000

In JS, if when import a file as a whole, the syntax is
import XXX from './xxx'

But I think this is semantically wrong, because the word from indicates that the thing you are importing is a part of the file, not the file itself.

For example, if A takes a candy from B, then the candy is just a part of B's belongings, not B himself.

So it should be just import './xxx', and it is like this in other languages such as Java.

If we need to give it an alias, it is import './xxx' as xxx.

If it is like this, then when importing parts from a file, we can omit the dereference curly brackets, so it is import XXX from './xxx' instead of import { XXX } from './xxx'.

In the latter, {} and from are redundant and confusing.

Why exceeds its parent
's size?

Snookums — Wed, 17 Apr 2024 18:26:05 +0000

https://codepen.io/powerseed/pen/poBxEeM

I guess this is some default setting of HTML, but it is really weird and counter-intuitive.

The div is like a box, img is an item inside the box, how is that possible that the item inside a box is bigger than the box, like a ball is bigger than its packing box?

It is against ppl's life experience.

I wonder what is the rationale behind this setting?
In other words, what downs will happen if it is not like this?

Thanks.

Can I just write inline CSS in the normal way in React?

Snookums — Fri, 05 Apr 2024 03:59:08 +0000

I read some articles like
Inline Styling with React
, but it seems that to write inline CSS, I have to convert the normal CSS names into camel case, like lineHeight.

But I just want to write CSS in the most normal way, like
style="line-hight: 1px".

Can I do it in React?

If not, I would say this design is really really bad...