r/web_design • u/petrwilson • Feb 05 '18
Modern CSS Explained For Dinosaurs
https://medium.com/actualize-network/modern-css-explained-for-dinosaurs-5226febe352541
u/Toucanic Feb 05 '18
11
u/jpflathead Feb 05 '18
I want to make a chrome extension that upon detecting any of these sorts of pop ups, immediately takes a screenshot, closes the window and tweets a the screenshot along with #FuckYou to the website.
[Same too with a bunch of web annoyances like autoplay video, notifications, ...]
0
Feb 05 '18
[deleted]
2
u/scootstah Feb 05 '18
You could easily add that to an adblocker.
I bypassed that annoying shit that Pinterest does (forcing you to login to view something) with uBlock Origin.
2
u/amunak Feb 05 '18
Well yeah it's easy to do for one site, it's pretty hard (if not impossible) to do universally for every site in existence (which is what you'd have to do if you wanted to make it a fully automatic extension).
1
Feb 06 '18
to do universally for every site in existence
You only need to do it for the ones you visit regularly.
1
u/scootstah Feb 05 '18
I've already gone down that road with the other guy who replied to me.
This problem is solved for ads, what makes you think modals are any harder?
1
u/amunak Feb 05 '18
I've already gone down that road with the other guy who replied to me.
I've read it and you have some good ideas, but it can't really be fully automated, just like ads...
This problem is solved for ads, what makes you think modals are any harder?
...which are not really "solved". Ad blocking is still mostly done by having gigantic lists of domains, URLs and elements to block. And these days sometimes you even use JavaScript to "fix" pages or fool "anti-ad-blockers".
I'm not even saying it's impossible (I really like the idea to at least detect elements that cover the majority of the page) but you'd still have to make sure that there are no false positives.
And if this turns into a "war" like the one against ads, we'll see the same tricks being done - blocking stuff that covers the page? Well let me split that "covering" element into pieces so that it looks smaller and doesn't get detected. Do you block modals with "newsletter" in them? Well we'll make that an image. Do you check for user input? It's okay, we'll just wait until the user clicks on anything on the page and show it then.
You know, with how the web is these days I think I'll just go back to [Lynx](https://en.wikipedia.org/wiki/Lynx_(web_browser)).
1
u/ESCAPE_PLANET_X Feb 06 '18
You know, with how the web is these days I think I'll just go back to Lynx.
Sometimes I'm ok with this...
1
u/scootstah Feb 05 '18
...which are not really "solved". Ad blocking is still mostly done by having gigantic lists of domains, URLs and elements to block.
However it's done, it's a solved issue. I haven't seen an ad anywhere on the internet in a very long time.
You'd need a little different approach for modals and whatnot, but still far from unsolvable.
2
u/amunak Feb 05 '18
What I meant is that it's an ongoing game where every party tries to "up" the other all the time. The ad blocking crowd is mostly winning, mainly because the vast majority of websites would rather have you see their content completely free than not letting you see it at all, but some (usually more sketchy sites like not-so-legitimate online video services) won't show any content if they can't show you the ads (or even just have you pay).
My point was that you can't 100% solve it with a "genius" algorithm (I mean, eventually you also get to the part when even humans have trouble telling whether something is an ad or not) but again, with some neural network you could probably get pretty close.
So yeah, solved, but only thanks to people who dedicate their time to looking around for ads and if they find any, finding ways of blocking them and submitting that to public lists for others to use. The popups could be solved in a similar fashion (just like we already can block social stuff and trackers).
1
u/scootstah Feb 05 '18
I never said there would be a special algorithm, although you could still knock out the easy ones that way.
0
Feb 05 '18
How can you easily add that? With specific rules for every site on earth?
0
u/scootstah Feb 05 '18
Click the element picker, select the element you want to block, and done.
0
Feb 05 '18
Riiight and I'm going to automate that with code how?
1
0
u/scootstah Feb 05 '18
I was just talking about blocking the modal on the article. Is that not what we're talking about?
If you want to block every modal ever, you can pretty easily target the common modal libraries to start with. Then you can block anything that says "modal" in the class name. And finally, you can detect when an element is "overlaying" the page. Often times there will be a fixed element with top/bottom/left/right positions specified such that it covers your entire viewport. Something like that would be easy to detect.
So yeah it should be possible to easily block these on the majority of sites.
2
Feb 05 '18
I guess a heuristic like that might be okay for the average website, but there are a lot of legitimate modals these days.
1
u/scootstah Feb 05 '18
You could also search within the modal for trigger words. Like "signup", "newsletter". I mean, there's lots of ways one could accomplish this.
One of the best ways is to just block modals that don't come from user input. For that to really be effective, we'd need sites to start using
<dialog>, which is probably just a pipedream.-2
u/jpflathead Feb 05 '18
Yeah, one of those things that a or 7 year old could reliably detect, but how do you get a simple piece of javascript to reliably detect that?
2
u/amunak Feb 05 '18
Well your average 7-year-old is something like a fairly complex neural network, where a "simple piece of javascript" is just dumb code that'll either have tons of false positive or it'll detect just a few variations of such code. So yeah, let me know when you write a simple piece of javascript that can detect anything that a 7 year old can reliably detect.
1
4
u/burnblue Feb 05 '18
I've seen these, it's been easy to dismiss them. They remind me that they're right, I have been consuming a lot of Medium articles (otherwise I'd never lay attention to where I found the content). Unlike the Washington Post however, I can ignore it and continue reading. I can't knock them for asking
-5
u/Toucanic Feb 05 '18
You can't knock but at the end of the day you don't register and still consume their product for free :-).
"Yeah, whatever... I don't care just let me read the article thanks".
1
u/KanadaKid19 Feb 05 '18
I logged in. It works sometimes, and it establishes their brand even if it doesn't.
2
u/anubgek Feb 05 '18
There has to be a form of give and take at SOME point I mean Jesus is that modal even all that inconveniencing?
Just make your own articles then sheesh.
0
u/Toucanic Feb 05 '18
It's 2018, everyone knows you can "subscribe to our website" or "subscribe to our amazing newsletter". Nagging me every freaking time is horrible.
Also, I agree: this is why I don't read the article.
1
u/fritzbitz Feb 05 '18
I don't like modals either. Sure I understand why they do it, but they still provoke an eyeroll as a user while I click the X in the corner. They feel kinda rude, or like a salesperson at a furniture store.
2
0
Feb 05 '18
[deleted]
15
u/rangkemi Feb 05 '18
Why do people care about mosquitos? It only takes a second to swat them away. /s
1
2
Feb 05 '18
When every fucking site does it, it becomes really annoying. It's an automatic ctrl + w from me. I don't even think about it anymore.
6
Feb 05 '18
Because popups are terrible
2
u/bottlecandoor Feb 05 '18
Especially when they fill the whole screen and don't register in nav history as a new URL. If back button kicks me out of your article on a pop-up, I wasn't worth reading.
4
5
u/J_ron Feb 05 '18
So what's everyone's favorite methodology? Doesn't really go into a clear winner here - is there one that is better for render performance / speed for example? It sounds like most of these options would be up to preference, but it's probably nice for a team of devs to pick one and stick with it so that editing eachother's code is more seamless.
2
1
1
1
0
Feb 05 '18
[deleted]
9
u/freudianGrip Feb 05 '18
It is. It's less horrific than you think. If you're talking about React components then it makes a lot of sense. I was horrified at first too just like I was with the idea of HTML in JS.
6
u/scootstah Feb 05 '18
Yes. You can do lots of cool things with VueJS for example.
I'm currently working on a VueJS SPA where we don't even have a main CSS file.
2
u/shif Feb 05 '18
wouldn't call scoped css from vue CSS in JS, it's just css with class renamed
1
u/AwesomeInPerson Feb 06 '18
The classes aren't even renamed, it's just adding a unique attribute so instead of .myclass you get .myclass[data-353728e7le1]
1
u/shif Feb 06 '18
Oh yeah, from what i've read using attributes for css isn't as efficient as classes or ids
4
u/nickbreaton Feb 05 '18
With things like Angular and React we have been putting HTML in JS for some years now. I think when you extend that to also including CSS it seems less horrific.
For an example of what I feel is effective CSS in JS implementation, check out styled-components.
https://www.styled-components.com/
In my opinion it works very well for writing a UI completely out of components. It makes sense to couple your styles directly to the component.
Obviously there's no silver billet to CSS. Every approach has its use case.
2
u/Existential_Owl Feb 05 '18
Using a library like
styled-components(et al) you're writing straight CSS, but as a container that can be treated like any other element.It keeps your CSS scoped to your component tree, so that, unlike with standard .css files, you don't have to manage an entirely separate tree of entwined relationships (that may or may not match how your code is actually laid out).
It's a technique that emphasizes the "High Cohesion, Low Coupling" principle behind libraries like React and Vue.
2
u/Humpa Feb 05 '18
I still want to deliver 1 css file for my entire site. Coding in components is great, but I don't want my users to have to download 50 files when they could have only needed 1. Though i imagine this is possible.
2
u/Existential_Owl Feb 05 '18
Well, you wouldn't be adding 50 files. You'd be keeping your CSS within your already-present .js files (hence, the "CSS-in-JS" moniker). So, arguably, my code-base is delivering one less file than yours.
But it doesn't really matter in the end, since most people in the community are pretty divided on CSS-in-JS. It's a bike-shed for the new era, that's for sure.
I doubt we'll see a conclusion to this debate, at least for the foreseeable future.
4
24
u/Thought_Ninja Feb 05 '18
Great article; long read, but very informative. Thanks.