DEV Community

15 amazing things you can do with simple JavaScript 🤯

Anmol Baranwal on July 01, 2024

I love JavaScript because it's full of surprises and is used for so many amazing things. Many developers love it, and many still hate it for obvi...

Read full post

Samuel Rouse • Jul 3

There are some interesting suggestions in here, but a number of them are skirting around logic.

Email regex

This is one that constantly plagues people. In 2006 this was talked about on the Python mailing list, and a StackOverflow question from 2010 is well referenced yet full of changes and "knowledge rot" as things have changed.

While a regex is often "good enough for test purposes" or "good enough for now", relying on them for validating complex rulesets like this can leave you trying to create increasingly complex conditions to resolve unwanted business cases.

Detecting a mobile browser without regex expression.

This seemed a bit off to me. Your example uses seven regular expressions... to avoid regular expressions. 😀

Since these .match() expressions are all simple strings, we can actually use .includes() to solve this without regex:

function detectMobile() {
    const userAgent = navigator.userAgent.toLowerCase();
    const agents = [
        'android',
        'webos',
        'iphone',
        'ipad',
        'ipod',
        'blackberry',
        'windows phone',
    ];
    return agents.some(agent => userAgent.includes(agent));
}

Capture Back Button

Not that onbeforeunload will catch Back, forward, and any navigation away from the current page. If you need only the back button, you might try the popstate event.

Anmol Baranwal • Jul 3

Thank you for pointing things out, Samuel 🙌

Yes, frankly there are so many complex rules regarding the edge cases of proper emails that are allowed.
I didn't know about the Capture button, definitely not an expert in this :)
I knew somebody would point out the regex expression as I realized it after publishing. Thank you again for going the extra length to write an alternative solution. I will update the post with this one after a week or so... Let's see if others can find that 😆

Chandra Panta Chhetri • Sep 23

Thank you, the detect mobile browser logic looks much cleaner and readable :)

Jon Nyman • Jul 7 • Edited

Yes, and using native browser functionality works fine for validating email.

77pintu • Oct 26

Thanks for the great post

Victorious Adelakun • Oct 31

Actually, this is a lot to take in as i am still learning 😂.
Thanks for this.

Jon Nyman • Jul 4 • Edited

This works for email validation without doing the hard work of doing it yourself:

<input type=email>

Or, if you want to do it with JS:

let emailInput = document.createElement('input')
emailInput.type = 'email'
function isValidEmail(value) {
  emailInput.value = value
  return !!emailInput.value
     && emailInput.validity.valid
}


// Is valid email?
// empty false
console.log('empty', isValidEmail(''))
// george false
console.log('george', isValidEmail('george'))
// george@example.com true
console.log('george@example.com', isValidEmail('george@example.com'))

Anmol Baranwal • Jul 8

Yes, I know that. This post wasn't meant to provide the best methods or practices, such as in validating emails. I just wanted to cover something unique!

Jonathan DS • Sep 30

Email inputs accepts stuff like jurge@localhost Or mail@company Without the TLD because they are technically valid emails.

Jon Randy 🎖️ • Jul 2

The second email regex is not good at all - it reports many invalid email addresses as valid:

/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test('me@.....a.......')  // true

Anmol Baranwal • Jul 2

Yes, I'm aware because I used a basic logic of checking the presence of an @ symbol, ensures there are characters before and after the @, and that there is at least one dot . after the @.

We can definitely upgrade it, but it will get complex, which is why I didn't incorporate all the edge cases!

Jon Nyman • Jul 7

Yes, better to not use regex at all. Which is pretty straight forward to do.

Jon Nyman • Jul 7

Yeah, avoid regex for validating emails altogether. You can see my comment where I show how easy it can be done.

João Serra • Jul 3

15 things you can do with javascript and I still dont like it haha
and thank god I quit doing web dev (and before you criticize, yea I know you can use javascript outside web)

Anmol Baranwal • Jul 3

Trust me, I totally understand the feeling, but I love web dev although I use TypeScript 😅

Devs hate JS a bit too much :)

João Serra • Jul 4 • Edited

its not randomly that people hate javascript you know right?

Also I compare web development with creating Frankenstein... cause you get pieces of each tech in order to be able to do something that works... for me its a non-sense mess an agglomeration of patching things over and over again creating layers of complexity that should be unnecessary. Sure they tried to fix it with stuff like silverlight, java, php and so on...
but the fact that so many thing are going on with discussion of javascript and web development should mean something at this point so an action should be taken.

Worst part is that it is propagating to other development areas. Instead keeping it simple and straightforward... upgrading the tools that already work, they just patch tech with green tech sometimes unproven tech with exploits or that in order to fix a problem they create 3 more... (also theres no time to consolidate tech, and devs nowadays seem to get bored really quickly)

I guess my point is... you shouldn't need typescript as a separated thing...

Anmol Baranwal • Jul 4

Yep, but remove JS and you might end up with almost nothing, as so much stuff is built using JS.

Regarding web development, nobody uses plain JS anymore. Even I prefer Next.js, which is awesome and works without creating layers of complexity. There are better frameworks available now, and I think web development is really awesome at this point :)

Jon Randy 🎖️ • Jul 5 • Edited

Regarding web development, nobody uses plain JS anymore.

Rubbish. Most of my projects use plain JS. How do you think libraries get written?

The web would be a much better place if developers actually learned to code, and use technology appropriate for each use case instead of always resorting to using sledgehammers to crack nuts.

lazinessincarnate • Jul 17

Point out on the doll where the JS hurt you.

Shashwat jaiswal • Aug 22

Cannot disagree. Where did you move to then.

João Serra • Aug 22 • Edited

well I was full stack at the time, that was in 2012.
But I ended up on mobile development at same time.
I actually started using javascript with Appcelerator titanium.
Nowadays I'm an iOS developer
I have to say it can be more satisfying than backend due having visually feedback sometimes... and i find it to be less stressing than web-development cause we are using native languages that support all that you need.
altough our stress are the compilation times. But its getting better and you end up filling your waiting times with some other tasks (you can still lose the track of the logic while waiting)

Shashwat jaiswal • Aug 22

I see. Thank you for sharing your journey!
I guess having a language that provides you with the toolset really helps save a lot of headache. I may start learning golang for the same reason. I wouldn't be moving to app dev except from maybe learning flutter anytime soon. Because I feel like somewhere down the road we're gonna have an era of progressive webapps gaining more traction.

Vishakha Tak • Jul 8

navigator.userAgent is now unreliable & not recommended to use .
You can now use navigator.userAgentData instead. Though its experimental but still it is read-only, unlike navigator.userAgent.

David Parramon • Jul 9 • Edited

Great article! Thanks for gathering all this, I did not know some of those. A couple of comments:

Disabling right click for a website can pose accessibility issues, I would highly recommend not do it. Also, I believe is browser dependent.
Detect user agent is going to be spotty at best, there is a lot of user agents on the market and each browser treats it in a different way and nothing prevents them from changing the name they use, or will be future proof at all.

Thanks!

Anmol Baranwal • Jul 9

Thanks David 🙌
I didn't know about the second one!

As I mentioned, I just wanted to cover unique stuff...

Bastiaan de Jong • Jul 16

To prevent anything from happening when clicking a link, the above example can be shortened by writing the following:

href="javascript:;"

this is identical to

href="javascript:void(0);"

Eckehard • Jul 2 • Edited

I love JavaScript because it's full of surprises...

Unfortunately you are right... I cannot imagine any other tool where you have fun to get an unexpected result.

Anmol Baranwal • Jul 3

Yeah, the only correlation between unexpected results and fun is JS lol.

Nauman Ch • Aug 3

It's amazing. I'm glad that I came across this post.

Bap • Jul 2

👏👏👏

Reynaldo • Jul 13

Good stuff, thank you! :)

Rob Benzo • Jul 4

These are OK but not super practical for me. The list format is nice but it is also used for clickbait a lot and starts to get annoying...

Nice job tho :D

Anmol Baranwal • Jul 4

Thanks 🙌
Yes, most of them are not practical, and I definitely didn't write it for that use case.
I just wanted to cover unique stuff...

Rob Benzo • Jul 4

Oh, I see! In that case, you did an awesome job! :D

Keep up the good work bro

decker • Aug 16

200% bored

Antonio | CEO at Litlyx.com • Jul 2

Great post, so simple to follow yet so valuable for beginners. Grat job like always man!

Anmol Baranwal • Jul 3

Thanks Antonio :)

Sadicbasha • Jul 5

Super boss 👌🫶

Steez’ Daddy⚡️ • Jul 9

This is awesome!

Snehal Tayde • Jul 3

Thanks, This is a great fun read :)

Anmol Baranwal • Jul 3

Thank you 🙌 I'm glad that JS can be fun too 😆

Madhav Vyas • Sep 4

Thank you for the information

Dev Deekay • Aug 24

Wow this is fantastic

Edwin Alaekpere • Jul 31

This is amazing. Thanks for sharing

Deepak Vishwakarma • Aug 8

i learn something new specially beforeunload event that is very nice,colouring consoles outputs,oncontextmenu to disable right click,navigator.platform,grouping consoles it may be helpful in my journeys as beginner