Great Moments in Responsive Web Design

boomzilla

I was using the documentation on youtube embedded players and was really annoyed by the way the table of contents was displayed on the right if you made the page wide enough:
0_1464224401652_upload-23259855-88c3-4265-8aaa-f2c5949042ee

I didn't capture the entire page, but that greenish section is a giant div with horizontal overflow. When the page is smaller, the TOC goes away and that div'o'content is actually big enough to see everything.

But rather than either let it shrink and let the text wrap or fix it on the page with verticle and horizontal scrolling, you just get shit cut off so you cannot read everything.

Lorne Kates

@boomzilla There's a reason why, when I get to a page with content I actually want to read, the first thing I do is go nuts with Stylish, applying the following to as many things as needed:

position:static !important /*override position:fixed */
display:block !important /*override display:inline*/
clear: both !important /* kill stupid floats */

Lorne Kates

@Lorne-Kates Second round, BTW, is making things 100% and getting rid of stupid margin-left:-400px that artificially make position:relative divs float.

CSS IS NOT HACK AROOOOOOOOOOOOOO!

error

@Lorne-Kates Try all: unset; or all: initial;

all - CSS: Cascading Style Sheets | MDN

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

Lorne Kates

@error said in Great Moments in Responsive Web Design:

@Lorne-Kates Try all: unset; or all: initial;

all - CSS: Cascading Style Sheets | MDN

The all shorthand CSS property resets all of an element's properties except unicode-bidi, direction, and CSS Custom Properties. It can set properties to their initial or inherited values, or to the values specified in another cascade layer or stylesheet origin.

Tempting. Nuclearlly tempting.

xaade

I'm tired of people telling me "yada yada optimal character count per line yada yada" I have this really wide screen for a reason. And if people have something really important,

they'll put it on a new line.

fbmac

Html should be only content in a very simple html 1.0 way, and the style something the user configure in the browser for all his web pages.

No font, color or anything. Just h1 h2 p a table.

fbmac

And the punishment for introducing anything like JavaScript or CSS should be death.

xaade

@fbmac I've ALWAYS said this myself.

But you know, businesses and their branding.

xaade

@fbmac How would you do online stores? Post and get only?B

fbmac

@xaade download an application specific for that, and leave the web for content

xaade

@fbmac I like it!

Maybe a standardized app, so I don't have one per store.

I hate that someone got the idea that a document based web is suitable for apps.

Lorne Kates

@xaade said in Great Moments in Responsive Web Design:

@fbmac I like it!

Maybe a standardized app, so I don't have one per store.

I hate that someone got the idea that a document based web is suitable for apps.

Good idea. Definitely want it standardized, though, since each store will need some custom layout or behavior. Should be easy enough to accomplish if we use a standard markup language. One that supports hypertext.

Each company will want to style things, and might want to override standard (or pre-existing) styling, so whatever standard styling layout we use should cascade.

And of course you'll need a client-side scripting language. Not sure what to call it.

Since this will be used for shopping, you'll want to give this class of app a name-- umm, something shopping related, like a "browser". Better put "web" in there somewhere, since people need to know it is internet connected.

Let's just hope that there's only one standard "browser on the web" app, and that there isn't one made by Google for Android devices, one by Microsoft for Windows phones, and one by Apple for iPhones-- because you know they'll make them "standard" in slightly different ways...

xaade

@Lorne-Kates

Funny, you hit on everything that makes sense, while skipping gracefully over the parts that make web browsers bad for application design.

It's not the styling, it's not the client side code, it's the fact that the underlying concept of web pages are still documents.

If not anything else, clicking on a button and ending up just selecting the text on the button is annoying enough.

PleegWat

@Lorne-Kates said in Great Moments in Responsive Web Design:

each store will need

You are confusing matters. They don't need any of that stuff. They just want it.

anonymous234

@Lorne-Kates I just open the developer tools and delete all elements that I don't want.

Or you can use this helpful bookmarklet to do the same

javascript:var%20b=new%20Array();var%20c=1;var%20o=((document.onkeydown==null)||(o==2))?0:1;document.onkeydown=ck;z=document.getElementsByTagName('*');for(i=0;i<z.length;i++){if(z[i].tagName.search(/(HTML|BODY)/i)==-1){z[i].onclick=function(e){t=this;if(window.event)%20e=window.event;if((t==e.target)||(window.event))%20t.parentNode.removeChild(t);e.stopPropagation();return%20false;};z[i].onmouseover=function(){if(!c)return;c=0;t=this;b[t]=t.style.backgroundColor;t.style.background='#FF9999';};void(z[i].onmouseout=function(){t=this;t.style.backgroundColor=b[t];c=1;});}}function%20ck(e){k=window.event?window.event.keyCode:e.keyCode;if((k==27)||o){o=2;document.onkeydown=null;for(i=0;i<z.length;i++){if(z[i].tagName.search(/(HTML|BODY)/i)==-1){z[i].onclick=null;z[i].onmouseover=null;z[i].onmouseout=null;z[i].style.backgroundColor=b[t];}}}}if(o==1)%20ck(1);

bb36e

@anonymous234 what does the script do?

PleegWat

@bb36e Send your life's savings to a numbered Swiss bank account.

Onyx

@fbmac

http://motherfuckingwebsite.com/ ?

ben_lubar

@Onyx http://bettermotherfuckingwebsite.com/

fbmac

@Onyx yes, that's how all website should be done.

(it has a little google analytics script, but it doesn't affect it's usability)

I mean, the first one, the second is a compromise that I disapprove.

anonymous234

@bb36e Delete elements you click on.

At least now that I fixed it. NodeBB somehow broke the previous version I pasted so it just crashed the page.

arcanine

You are all just re-inventing the concept of the operating system.

Tsaukpaetra

@anonymous234 said in Great Moments in Responsive Web Design:

Or you can use this helpful bookmarklet to do the same

Nice! That frees up one Chrome Extension (that essentially does the same thing)!

lolwhat

@arcanine said in Great Moments in Responsive Web Design:

You are all just re-inventing the concept of the operating system.

Or Java.

Tsaukpaetra

@arcanine said in Great Moments in Responsive Web Design:

You are all just re-inventing the concept of the operating system.

Here you go, have a like to get out of the "Zero reputation" hole. ;)

Dreikin

@lolwhat said in Great Moments in Responsive Web Design:

@arcanine said in Great Moments in Responsive Web Design:

You are all just re-inventing the concept of the operating system.

Or Java.

Not too far off the mark, given

Brendan Eich:

If I had done classes in JavaScript back in May 1995, I would have been told that it was too much like Java or that JavaScript was competing with Java … I was under marketing orders to make it look like Java but not make it too big for its britches … [it] needed to be a silly little brother language.