DEV Community

Discussion on: 6 useful frontend techniques that you may not know about

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

There is a special circle in hell for people who disable paste.

A massive security issue as it makes people choose simpler passwords etc. and an even bigger accessibility issue as people with cognitive disabilities may rely on copy and pasting information to fill out forms, authentication etc.

Luckily WCAG 2.2 addresses this fact so it will now mean your site is not WCAG compliant and therefore illegal in about 80% of countries.

w3.org/WAI/WCAG22/Understanding/ac...

So don't fucking do it on inputs or at all preferably.

Oh and while navigator.connection.downlink; is hopefully going to be useful one day, at the moment it is so unreliable (even if "supported" it doesn't actually report accurate results) you can't use it if you actually want to make decisions based upon it.

So 4.5 useful tip and 1 terrible idea! 😋🤣

Either way though the other tips are well worth a ❤ and a 🦄!

p.s. inset is only 82% coverage on browsers so you will want to polyfill it if you use it on anything important and overscroll-behavior-y doesn't work on iPhone (Google or Safari) and only has 75% coverage so you can't really rely on that either, not sure if a polyfill exists for that - still useful things to know but don't just use them blindly.

Collapse
 
hyggedev profile image
Chris Hansen

Im dead! Lol 💯 🤣

Collapse
 
theanonymouskoder profile image
The Anonymous Koder

I agree that this is horrible for authentication but can be used to do other things. For example, some educational institutes prevent this (when the user has to type essays and stuff) because typing helps you remember concepts better. And this can also be used as an extra safety layer in cheat prevention systems (in online examination systems).

Collapse
 
drumstix42 profile image
Mark

There's at least some valid cases but they are very specific.

For example: a student test/exam where the page doesn't want answers copy & pasted.

Collapse
 
ogrotten profile image
ogrotten

That's not a web problem, it's a "test moderation" problem. There's plenty of other ways to detect or especially prevent cheating.

Collapse
 
grahamthedev profile image
GrahamTheDev • Edited

I still don't think that would be a valid case, but I can understand why you and José (comment further down) have said that.

For example: what exam could you possibly be taking where copy and pasting an answer would actually be a thing or be useful to you as a student trying to cheat?

If you did that it would just be plagiarising and you would be marked down anyway.

Plus if you were cheating you could just rewrite the answer, I doubt anyone would copy a whole book into an online exam so it would be pretty straight forward to copy an answer by just typing it in manually in so all you did was slow them down a little bit.

Now if someone was dyslexic and liked to use a Word Processor to write in a font that makes it easier for them to read, or adjust the line length so they don't lose their place (as long line lengths can be difficult for certain types of dyslexia), you need copy and paste.

There are other things to consider such as people with poor vision may find it a lot easier to write in a certain program that is already set to their font size and contrast requirements and copy and paste in etc.

The road to hell is paved with good intentions like disabling paste to try and stop cheating, it won't work but it will mean that somebody who isn't cheating will suffer.

do not disable copy and paste, it is that simple. I wouldn't normally be so forceful but people try and justify terrible practices and may read your comment thinking "oh yeah, that is a good idea", without thinking about the consequences (or whether it would actually be effective).

Collapse
 
leob profile image
leob

One really (but I mean REALLY) cool tip - the hidden attribute ... that one alone makes this post worthwhile, even when I don't really care about the rest ... oh and yes disabling copy/paste sounds like the worst idea ever, I can't come up with any use case where it would make sense ...

Collapse
 
itshi32 profile image
itshi

Why hidden is better than .some{display:none} ?

Thread Thread
 
grahamthedev profile image
GrahamTheDev

Because if you build a component you can just use it in another project without worrying about styling being included.

Also just so you know, it is a good practice to still add [hidden]{display:none!important} to account for older browsers and some obscure browsers. And yes, although most of the time !important is bad, if something is hidden then you want to override any other styling.

Another benefit is if for any reason your CSS fails (as failed network requests do happen) then the item is still hidden.

And one last benefit is maintainability, if you have a team you start getting .invisible, .hidden, .dontshow, .hide etc. If you tell the team to just add the hidden attribute they never had to worry about it again.

Oh and I suppose the fact that hidden on the element means that you don't need .hidden or equivalent in your CSS when it comes to critical rendering and performance. Super tiny difference but lots of little things likes this really add up!

I hope that helps (I might even write a post on it as there are actually more benefits than I thought!)

Thread Thread
 
leob profile image
leob

It isn't better, it just surprises me that there are features like this that I had no clue even existed. But yeah it's not earth shattering, it's more a piece of trivia.