marahmarie: Sheep go to heaven, goats go to hell (Default)

To style for smaller devices without having any to test on, DW's Preview window can be resized downward almost infinitely, ie, until it's less than a single inch wide - about 2/3 the width of a flip phone/feature phone browser window (tested by holding my flip phone up to the tiny Preview window I just created in Firefox on my laptop). Currently this style starts running over the right gutter at a bit more than 1 1/2 inches wide but plays pretty nice between left and right gutters up until that point.

marahmarie: Sheep go to heaven, goats go to hell (Default)

ETA, 5-31-16: Support request, filed.

I've been reading about News Genius* with increasing alarm. It's a web annotation service** you don't need to join, download or install anything to use: you simply add "genius.it" without quotes to the front of any website URL and begin annotating. Annotated text shows up as highlighted fields. Clicking on a highlight shows discussions by others about your page in the right hand column, in an overlay that's added using a combination of JavaScript and CSS.

Anything can be highlighted and annotated: a website's name, the name of a post, the sentence I'm typing up right now, the next paragraph, all the paragraphs, All The Words, any tags attached to the post - in short, any words or links seen on any page.

I started off reading what's bad about it (in short: the code overrides built-in browser protection against cross-site scripting attacks; longer story: it overrides fucking everything via proxy and turns any webpage into an endless series of rewritten URLs prefaced with https://genius.it/; the makers claim they block form entry but that can be overridden quite trivially, and it works exactly as expected on private and friends-locked pages such as we have here on Dreamwidth, LiveJournal, Facebook, et al).

Then I read how one blogger was attacked - right on her page, where she can't see it - by employees of News Genius (the article about that, of course, has also been attacked by injecting her page to egg it on, which has got to be both irony and cruelty at its height) and finally what might be done to block News Genius from running on your webpage. Here's some more on that.

The answer to the last question - how to block News Genius if you're on Facebook, Twitter, Instagram, Dreamwidth, LiveJournal, InsaneJournal, Wordpress.com, or any website where you can make posts or run your own journal or blogspace but can't run scripts or add backend code - is not too much.

Facebook, Twitter, Instagram, and Wordpress.com users currently have no way to block News Genius.

LiveJournal, Dreamwidth, InsaneJournal and other LJ clone sites can use a custom theme layer to add CSS to the head portion of their webpages (which I'll explain below).

Caveats

Using CSS as a script hider is far from ideal, perhaps the worst hack there is. Genius's scripts will run even if you can't see them (if you want to test this, add the CSS below, compile your code, then hover any link on your pages after appending genius.it/ to the front of your page URL. Genius will still rewrite your pages to allow annotation and rewrite every link to use their proxy. You just can't see the annotations nor find the ability on the page to make the annotations with anymore).

If your page has *not* yet been annotated to your knowledge, then you might want to use CSS as a simple preventative.

The one thing hiding Genius via local CSS *will* do - until some yahoo finds a workaround or Genius devs rewrite to defeat it...and believe me, I spent a year or two fighting Google over similar turf but for different reasons so I know what I might be up against - is to deny others the ability to use Genius on your page, without your knowledge. While there might be some cursory workaround for those determined enough, until I hear of it I'll run with using CSS, as it's better than doing nothing.

I *do* plan on filing a Dreamwidth support request when I finish this pre-publishing edit: soon, because it's getting way too late asking if they'll look into blocking Genius, as it works on private and friends-only posts, which denies authors of the latter any idea what people are saying on what should be pages they have complete control over, and gives all authors of any private material a serious security vulnerability (that News Genius can possibly read, transmit and store non-public works, images, and so on, back to their own servers or where ever else).

To be clear, this annotation service is a serious security vulnerability and presents a privacy violation for every writer who uses the Internet. Annotations can be made without your knowledge; News Genius is proxying and transmitting data from every URL; non-public posts on any website, be it Wordpress.com, Dreamwidth, or LJ are at risk of being read, stored and annotated without your knowledge by anyone who has access to them. If this doesn't worry you, perhaps it should.

How

On websites that support editing the head section of your webpages, add the following CSS to block News Genius from visibly showing up:

The CSS is not minified, prettified nor compact. It can be modified however you like, but I'm not responsible for any weirdness or breakage should you choose to do so, nor will I troubleshoot if it stops working as it should.

You can see how I'm using it in my theme layer, with apologies for ranting a little and for DW stripping the ability to use comments, which forces me to do so via CSS.

ETA, 6-2-16: Dreamwidth strips HTML comments from custom code but upon testing I see it does not strip CSS comments, a possibility I hadn't initially considered, so this code might see more commenting added in the near future to explain what it does, minus the rant, which has already been removed.

If you know CSS, you can get away with less than I used, which is a future-proofed, admittedly paranoid idea of what it should block. It's my first pass with no edits to streamline or smooth it out, so change whatever you like. It actually works fine with just the CSS that sets display:none or just the CSS that MIAs URLs and edits backgrounds back into blessed transparency. It shouldn't affect web page display negatively (unless you have background colors set in areas touched by Genius's code, in which case, you should edit the CSS accordingly) no matter how much or little of it you use. Edit, post-publishing: But I'll be updating it soon with a better cursor replacement than uh, "none". Edit 2: done.

Also, News Genius has truly awful CSS. Check it out for yourself. Please. It repeats endlessly and quite needlessly (someone literally copy/pasted themselves senseless, giving it far from a professional look and feel!) so parsing what to hide was super-painful, and don't even get me started on the HTML[there's way too much of <---THIS CRAP---> going on, among other things that make me flail, like "100%" used as an actual psuedo-class. Seriously.].

I am - as always - taking questions, comments and criticisms in the comments section below - where I feel such things, you know, generally belong.

*News Genius was borne of Rap Genius being penalized by Google for black-hat SEO, in which they contacted high-profile bloggers with offers of online publicity in exchange for adding high-traffic Rap Genius links to their posts. Never mind the blogger who outed this scheme did not even normally write about Justin Bieber; that's the artist that the long list of links he was to add to his posts pointed to. The outing and subsequent penalization led Genius owners to learn how to permalink their site to every page on the planet, bypassing the need for Google altogether. I can't fathom how hungry for comeuppance they had to be to dream this up. Even my greatest "get Google" fantasies - and I've had some - don't stoop as low as to think to attach any website of mine - like a parasite - to every other page out there, especially not in response to the sort of penalization they so richly deserved.

**Bonus points if you've been here before and can remember me complaining about - and blocking, via similar use of CSS - at least one (comparatively primitive) web annotating service that appeared in the mid-aughts. We sure did have them back then and yes, I sure did. I'm singling News Genius out because it's currently the most talked about, popular and flat-out dangerous, but yes, I'll pre-empt any objections by saying I'm aware there are other services like it, but in their favor - at the very least - they don't seem to present the same cross-site scripting vulnerabilities that News Genius does.
marahmarie: Sheep go to heaven, goats go to hell (Default)

And with that I broke my comment pages. All of them. I noticed it the day after the night I broke them but didn't fix them until a minute ago simply because the fix was too easy (just revert back to the old code) so I wasn't sufficiently challenged. That's the thing when I break things...I like to enjoy figuring out what went wrong. I like my mistakes difficult to find, fix, and even believe. I like to count my war wounds afterward, and to feel like I actually fought a long, hard battle and somehow won.

This was a simple coding error, therefore too boring to fix except as a courtesy to everyone else.

The mistake was I changed .comment-depth-even,.comment-thread .comment-depth-odd{margin-left:-15px} to .comment-depth-even,.comment-thread .comment-depth-odd{margin: auto -15px} thinking condensed code is more elegant than longhand (there was no condensing effect but as I was condensing the main part of my CSS, everything had to go, so I just did it...) but owing to the fact that I had web cache set very high, even refreshing the page several times before uploading my edits didn't help me catch the error in time to avoid committing to it.

(Basically my edit minused out left and right margins instead of just left margins, tossing comments beneath toplevel into the page gutter, but I'm not sure why it only affected nested comments because the way it was written it should've tossed them all.)

Condensing CSS (that test of math and measuring skills in which other coders make their webpages load .00004537 seconds faster than yours do, lol) is a thankless, mindnumbing task in which you take code that looks like this:

body { background-color: grey; color: black; margin-top: 1em; }

and condense until you get code that looks like this:

body{background:#eee;color:#000;margin:1em 0}.

If you do this with your CSS then your pages might load .0004347 seconds faster than they would've otherwise and you'll win the internets, lol - at least until someone else makes their web page load about .0000000001 second faster than yours.

It's sort of crazy, but it can speed up web pages a tiny bit if there's no major errors in your HTML, JavaScript or on the website's backend thst basically negate the effect. The problem is the math involved.

Some people can't do CSS shorthand because it requires re-calculating up to four separate, perhaps initially unknown values (even more values for some of the fancier aspects of CSS3, especially as it works with HTML5); others can do the math but don't have the spatial ability to know which part of the page it would apply to, or the difference between calculating margins and padding (each get four values; some are based on browser defaults but most are not, and to this day browsers calculate padding boxes differently, which opens yet another can of worms if you didn't use reset CSS before you wrote or edited your first line of code).

I do the best I can, but I can't always know which values might need changing to what in order to achieve whatever crazy vision I'm having this time (the craziest one was I was going to turn all my text and images upside down and backward on April Fool's Day but I got into sort of a timecrunch). There are three or four lines in my main CSS I may never condense because I'm afraid of breaking things and I have no way to know which values to change without reading through the CSS or base layer documentation.

I mean, I do great because I have all the HTML on this style and most of the CSS memorized, and know almost all the edits to make when I break something (or a DW code push does that for me) without looking at anything except the visibly broken part(s) of the page. That's a neat ability but I've been staring at this code for something like six years so I'd be more worried if I didn't have it down than freaked out by the fact that I do.

But given even that ability, things can still stump me. For example, my @media queries are mostly written in longhand - because hell if I knew what half those values were before I changed them to make resized pages work better, so it's either a) I read through the CSS and base layer for clues, then check DW's documentation for any missing pieces or b) I simply write changes in longhand, which takes less time and requires no knowledge, simply knowing what I want.

The hours it might take to get the shorthand right for my style sheet are the same hours I could spend writing and making things better, which was the same reason I deleted my tags. It might seem lazy to not write nor maintain a tagslist but thanks to the free time deleting it gave me, I write more posts and edit more code (also, my search results look better in Google without my tag pages mucking them up) so the trade-off seems worth it.

marahmarie: Sheep go to heaven, goats go to hell (Default)

I'm trying to figure out how to make the "back to top" link clear on short entries, short archive pages, short reply pages and the like, which is why this post will be hanging out with us for a while...because at the moment I can't figure it out. I can get the damn link to clear... I can't get it to stop moving once I get it where I want it (via s2 in the compiler). So until I have some unusually bright (for me!) flash of genius or else go crawling back to [community profile] style_system for the first time in a few years for more help this post will remain here to further annoy me. Comments disabled because [personal profile] andrewducker messed up my last test (inadvertently, of course!).

marahmarie: Sheep go to heaven, goats go to hell (Default)

Note to self 7/21/2016 - yes, which makes this no longer one line - make sure linkbar clears with empty content (doesn't right now)

marahmarie: Sheep go to heaven, goats go to hell (Default)

General

  • Swap background images for lossless - check WP for existing uploads
  • Add pure CSS3 background gradient for @media 600 x 900 (tie-dye effect was nice; perhaps revisit)
  • Check bug status @ http://www.dreamwidth.org/support/see_request?id=32773 (ask Kariela for bug tracker URL) - ETA: filed @ https://github.com/dreamwidth/dw-free/issues/1703
  • Header title @fullscreen needs .15em rise
  • ^ needs similar rise on mobile
  • Archive dropdown too high (looks like I lost a CSS edit somewhere because that was fixed last week)
  • Back to Top needs left re-align @fullscreen
  • Make .cutTagControls stop leaving sidebar on page resize - *crossbrowser test
  • Find CSS for and restore Frozen links/image (comment linkbar)
  • Widen preview warning textbox (restore last-used margins)

Specific

  • Test undoing display:none; find ways to hide things while restoring to document flow (display:none hides from DOM Tree = accessibility issues, depending upon function or necessity of missing element)
  • Test undoing display:none in @media
  • And don't do this: https://css-tricks.com/snippets/css/accessibilityseo-friendly-css-hiding/ (performance hit on browser/draws a box that big offscreen/considered bad SEO - yet I've seen Google do it in their own search engine CSS in Pot Meets Kettle) - see http://www.codeconquest.com/why-you-shouldnt-use-the-css-displaynone-declaration/
  • As an aside, I'm not wild about Chris Coyier. On CSS he's become a slacker; most other CSS-focused websites seem more helpful
  • Use https://jeffclayton.wordpress.com/2015/04/07/css-hacks-for-windows-10-and-spartan-browser-preview/ to fix content box comment-icon table overflow in Edge (but check/try copying over textarea CSS 1st, as it might be same issue [but that issue is 'must specify width to stop overflow' - width is specified] - it's the entire #postform; Edge skips correct breakpoint altogether grrrr - I don't see an answer whether I use an Edge-targeting declaration or not
  • Fine-tune v-alignment @ljuser imgs - http://www.cssportal.com/css-properties/vertical-align.php - *crossbrowser test
  • Check comment-embedded URLs don't need this: https://css-tricks.com/snippets/css/prevent-long-urls-from-breaking-out-of-container/
  • Find out if @supports (CSS3) will do anything for display in IE6-8, because omg, if so then no more inline hacks/conditional comments, yay - http://www.sitepoint.com/an-introduction-to-css-supports-rule-feature-queries/ - brainfart...because I wish :)

Imageless fallback design

  • Skiplinks: use inverse image positions or drop and left-align with content
  • Entry lists on imageless preview of this post don't show bullet-points so I'm starting to think using images in granular content is stupid - drop images, work bullet-points back in (use list-style-position:inside to prevent sidebar list content overflow issue from a few days ago)
  • Entry linkbars might look better sans images; possibly drop and left-align with content
  • Font-size:0 stopped working on imageless alt; find out why/fix
  • .icon-links alt text has padding or margin issue
  • Read-more has alt text; do something
  • Try drawing white(ish) .entry left/right borders; inset with margin or padding to hide behind background (hopeless without rewriting container/entry elements)