The Web Design & Development Megathread

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Re "encourage users on old browsers to use Google Chrome Frame" in an OP, Chrome Frame is done as of January 2014. Might make sense to suggest users update their browsers.

# ¿ Jun 17, 2013 10:56

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 14:26

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Is there something in some standard that says "when submitting form data encoded as 'iso-8859-1', translate everything outside that character set into an HTML entity before percent-encoding"? Because that's what I'm seeing in practice, but I can't find anything saying it's a good idea.

(I do know where it says to treat 'iso-8859-1' as win1252, hence the scare quotes.)

# ¿ Nov 8, 2013 00:35

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Lumpy posted:

Because a lot of web developers started as designers, and so don't know much about best practices, and so tend to be 'coding horrors' generators early in their careers. And frequently through the middle and later parts of their careers as well. I like to pretend I'm one of the cut & paste majors that learned enough to not be awful.

And a lot of non-web developers think the only "right" way to "learn" is to struggle exactly as they did, deciphering compiler errors and learning obscure text editors as they manually copied printouts from their coding magazines, and anybody who didn't have to endure such pain to get a single pathetic line of text to appear in a terminal is worthy of naught but scorn.

Everyone's a coding horror generator when they're learning. That's hardly the exclusive domain of the web developer.

Also consider the possibility that those disrespecting web devs might not respect any kind of development. "Programming is terrible" etc.

# ¿ Nov 10, 2013 01:14

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Flexbox bitches!

# ¿ Dec 4, 2013 03:18

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

kedo posted:

Whoa, my mind is getting blown over here.

Do Chrome and Sublime somehow share their Find function? Example: I'm searching for "name": "Foo" in Sublime to find an entry in a database, and searching for Foo in Chrome to make sure it's showing up on a page. But when I change one, it changes the other.

What is going on... Are my keystrokes getting passed to both applications somehow?

e: Should mention I'm on OS X.

To expand on Lumpy's reply, OS X has the concept of "pasteboards". When you copy something, it goes on the system's general pasteboard, which other apps can see. When you paste, the app you're in grabs the contents of the general pasteboard. Thus you can copy and paste between apps.

There is also a system-wide find pasteboard that, you guessed it, contains the string you're searching for. Well-made apps will use the system's find pasteboard for their own search function. Sometimes it's mind-blowingly cool, other times I really do want to maintain two different ongoing searches goddammit.

# ¿ Jan 13, 2014 05:46

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Xarb posted:

You'd be surprised how many users do not know how to open a link in a new tab or window.

glompix posted:

On a link aggregator, you better believe I want to always open in a new tab so I don't lose my place.

The back button works too!

Sudden Infant Def Syndrome posted:

At my work, we've always made it so any link off-site opens in a new window, because you don't want the customers to leave the site if you can help it.

Not sure if that way of thinking is right.

It's a self-centred (as opposed to customer-focused) way of thinking.

# ¿ Jan 18, 2014 12:20

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Lumpy posted:

It's technically invalid markup*, and you don't need the DIVs at all. Apply classes to the As and make them inline-block or block or whatever you need them to be, but it works without even doing that: http://jsfiddle.net/ssP3f/1/

The other alternative is just do:
JavaScript code:
jQuery('#container').on('click', '.item', function () {
   //blah
});
And then you don't even need them to be anchors if that's something useful.

* but as you said, browsers will render it fine

What's invalid about <a><div></div></a>?

# ¿ Feb 7, 2014 22:00

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

kedo posted:

You're not supposed to wrap inline elements around block elements.

Why not? Is there some standard that says this?

# ¿ Feb 7, 2014 22:26

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

glompix posted:

XHTML 1.0, HTML 4 for sure. In HTML5, you can wrap block elements in an anchor only. Conceptually the rule makes sense. Block level elements have different layout rules which collide with inline elements. (is it page width or auto width? it's undefined)

I'd stick with the rules. It's just a safer bet with such a diverse browser ecosystem. I guess you can just paper over those differences with CSS though, but it's still undefined behavior.

That linked StackOverflow answer led me down the right path. This is determined (in the WHATWG spec at least) by an element's content model. If you go to text-level elements, the a element's content model is (sort of) "transparent" which inherits its parent's content model, but the other elements on that page (notably span) allow only "phrasing content" which precludes block elements.

Is the HTML 4 spec even worth discussing these days? If you're stuck on a browser that doesn't support something more modern, you're probably more worried about that browser's quirks than what the spec says should've happened.

Finally, is that undefined behaviour? I recall part of HTML 5 was a push to standardize error handling. This certainly happened with parsing, but I can't find much about content model violations in the spec.

# ¿ Feb 7, 2014 22:53

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

glompix posted:

Well, maybe it is defined as an error, but when would you ever want to write erroneous markup? I used to worry about this kind of poo poo in 2008-2009 and it's really not worth it to obsess over, but it's just good to know where the boundaries of the spec are even if you choose to ignore them for whatever reason.

I agree. And it's not even smart to rely on documented error handling, in case future changes to the spec change your previously invalid markup into something valid but not what you intended.

# ¿ Feb 8, 2014 08:03

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Ravendas posted:

I'd like to start by saying I've never done any web development ever, and I need help knowing what would work with what I've got the best.

I've been programming in C++, console based cin cout i/o. A bunch of generators and such for roleplaying games. Someone said I should port them to a website, using some language as a go between for the C++ code on the server, and the website itself.

What programming language would be best for that? PHP? I have lots of C++ coding experience, but none for anything web based, so I'm lost here. I just need something that will look nice in a window that can use my C++ code serverside to print out stuff on the website.

Thanks a ton for any help!

Very easy to get off the ground here. Get started with Sinatra. Once that's working, here's a hilariously simple Sinatra app that might start you off (replace the example code in that readme with this code):

Ruby code:

require 'sinatra'

get '/*' do |arg|
  output = IO.popen(["path/to/rpg", arg]).read
  [200, {"Content-Type" => "text/plain"}, output]
end

Use it by browsing to http://localhost:4567/put-your-arguments-here.

Fiddle with stuff, see how far you get, and come on back.

# ¿ May 14, 2014 09:03

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Ravendas posted:

I haven't installed ruby/sinatra and such yet, but looking at this, that 'path/to/rpg' bit would literally be a path to the exe, like "c:/progrs/chargen.exe"? And if there's no args it takes, could I drop that part or what would I put there?

Right about the path. As for no arguments required, you can drop it down to this:

Ruby code:


require 'sinatra'

get '/' do
  output = IO.popen("c:/progrs/chargen.exe").read
  [200, {"Content-Type" => "text/plain"}, output]
end

I banged this together reading the Sinatra docs and the Ruby IO class docs, if you're curious about what else you can do.

# ¿ May 14, 2014 16:15

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Ravendas posted:

Then I put the code Pokeyman kindly provided, did all the same, and it would run, but I couldn't connect to localhost. It just kept loading endlessly. The .exe it was running has a fileout bit in it, and it was creating the text document in the folder, so the executable it's linked to was running, I just couldn't view the 'website'.

It has this in the console, so it's running fine:

But it never gets that 'connected' lines that happen when I run Hello World or any other simple starter program.

And this is the code I was using, provided by Pokeymans on the previous page:
code:
require 'sinatra'

get '/' do
  output = IO.popen('../CCrap/RavsNameGenerator.exe').read
  [200, {'Content-Type' => 'text/plain'}, output]
end
It finds, and seemingly runs, the exe just fine, it just hangs on actually displaying it. With my zero knowledge of Ruby, reading the Ruby docs from the getgo is rather confusing in how it's all laid out. Sinatra docs, need Ruby knowledge that I don't have, is even more foreign. I'll be reading a ton about it, I'd just like this little thing to work for the moment.

I'm guessing it's waiting for more output to come from RavsNameGenerator and it never comes. I have a couple suggestions:

1. Try backticks:

Ruby code:


output = `../CCrap/RavsNameGenerator.exe`

2. Try launching irb and seeing if you can get something working. It's a read-eval-print loop for Ruby. If you type the line I suggested above into irb you should get something out of it. Once you try something that seems to work, paste it back in to your sinatra app.

Finally, I'll add that I don't use Windows and am not all that good with Ruby so you may have better luck wandering by the Ruby and Rails thread. I don't know if we're veering off topic for this thread yet.

# ¿ May 19, 2014 00:06

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Withnail posted:

It's for an intranet thing, but I see why it would be a security issue. I wonder if MVC is passing the path through because it's on the same machine.

Weird IE security zone shenanigans?

# ¿ Jun 6, 2014 00:56

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

ConanThe3rd posted:

On the topic of Bootstrap, I just started using it and it's been fantastic if not for one hang nail in the form of the navbar active class and how I can't change it with a higher priority css file shy of putting !Important in the rule.

That can't be right, can it? Why is the base css file taking priority when it's the first declared?

Is the base CSS selector more specific? Like how nav li .active takes precedence over li .active.

# ¿ Jun 13, 2014 07:34

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

fletcher posted:

Is it a horribly stupid idea to have the same URL go to different things depending on which user you are?

i.e. if I'm logged in then http://mycoolsite.com/employee/joe_blow/ goes to the Joe Blow that works at my company. But if somebody at another company is logged in then the same URL goes to the Joe Blow at their company. (If you aren't logged in then you don't get to see anything.)

I would say have canonical URLs like http://mycoolsite.com/company1/employee/joe_blow and http://mycoolsite.com/company2/employee/joe_blow, then make http://mycoolsite.com/employee/joe_blow redirect to the appropriate one if you really want the slightly shorter URL.]

edit:

Subjunctive posted:

That's a very common thing. Consider that http://www.facebook.com shows different content for every person who loads it.

But isn't facebook.com/joe_blow the same Joe Blow no matter who's logged in?

# ¿ Jun 13, 2014 23:28

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

down with slavery posted:

ick

try

http://company.site.com/employee/<name>

Sure. The point was to recommend having a unique URL for each person, not to bikeshed.

Subjunctive posted:

To be clear, I would probably design with scoped/unique URLs, but I don't think it's incorrect to do otherwise. Using names is a PITA in a few ways, so unless you think people are putting these URLs on business cards or typing them in otherwise, just using unique IDs could be a lot simpler. If you use names, prepare for people to change them, to have annoying characters in them, and otherwise grumble a fair bit to yourself.

But don't you want cool URIs? They don't change!

# ¿ Jun 14, 2014 01:03

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Just use tables or flexbox.

(This is Bad Advice but it is practical and has no downsides.)

# ¿ Jun 14, 2014 09:09

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Lord Windy posted:

Flexbox looks exactly like what I am looking for.

Is there anything special I need to know about it? According to the exactly the first thing I read about it, it suggests that Safari, iOS and Android all use the old syntax (whatever that means). Is Flexbox something that is only partially supported?

It's fairly widely supported but since WebKit (the code behind (Mobile)Safari and Android Browser) jumped in early it has slightly different syntax than what everyone else settled on. It all works the same way, and browsers ignore CSS they don't understand, so it's not too bad as far as these things go.

It's worth looking up which browsers it works on, just to double-check, but by now it's pretty widespread.

# ¿ Jun 14, 2014 10:12

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

React is in production on Facebook and Instagram, and I think now Reddit as well. It's just conservatively numbered because that's how the team rolls. Edit: also, I think, because it's still possible there could be incompatible API changes, though I think that's relatively unlikely at this stage.

Basically the opposite of the Facebook.app team.

"Version 12.0
What's new in this version:

* Minor bug fixes."

# ¿ Jun 16, 2014 23:49

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

v1nce posted:

Seems to me you're describing the alt attribute of the img element. If it's a transcript of the text contained in the image, you're actually following accessibility guidelines for un-sighted users! Congratulations!
code:
<img src="myimage.png" alt="June 15th 2014
Exposition
Landon: We did it. We survived high school.
etc" />
That should all be perfectly OK, line breaks and all.

Just make sure to escape ampersands with &, non-breaking spaces with  , and quotes with " and you should be fine. Might be smart to automate this escaping, though you'll probably find out pretty quick if you forget.

# ¿ Jun 20, 2014 11:17

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Pivo posted:

So someone on Freenode suggested sticking it in a hidden element and then doing it that way. It's pretty clever but pretty hackish. Is that how you guys would do it?

Pretty much, though I dunno what "hidden" has to do with anything. Make a div element in JavaScript, set its innerHTML, then walk through the div's child nodes and do away with whatever. Then grab the innerHTML when you're done and forget about the div you made.

The browser does a great job of parsing HTML, you just gotta feed it right!

edit: Didn't see your post there. You've got the right idea but I dunno why you need to use some element already added to the DOM. Just do

JavaScript code:

var div = document.createElement("div");
div.innerHTML = val;
// do stuff with div.childNodes

plus that does away with your script tag issue (among others that you have yet to find).

pokeyman fucked around with this message at 04:01 on Jul 19, 2014

# ¿ Jul 19, 2014 03:57

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Yeah, why is it helpful to have made-up em equivalents for lengths measured in pixels? That just sounds like cargo-culting.

# ¿ Jul 23, 2014 17:29

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

You could've just said "Android's permission system is hosed", it's much shorter.

# ¿ Jul 28, 2014 16:03

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Kobayashi posted:

Good info, thanks. The proxy is probably a bit overkill for my needs. A lot of what I want to do boils down to adding a little empirical weight to my subjective observations. For example, instead of simply telling a client, "hey, you're really hurting the user experience by using multiple redirects," I want to quantify the effects. I wish it wasn't so dorky to find an area with poor network reception and plop open my laptop, but if that's what it takes to make my case, that's what I'll do.

iOS has a "Network Link Conditioner" available on the device under "Settings", "Developer". There's also a prefpane with the same name for OS X, which will work in the simulator. Both let you simulate lovely connections (for various definitions of lovely: upload and download latency, upload and download packet loss, DNS latency). Add to that some tracing in your apps and you got data.

# ¿ Aug 1, 2014 06:19

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Pollyanna posted:

I like it myself, it's a lot more convenient than ERb or raw HTML.

Are you using notepad.exe or something?

# ¿ Aug 3, 2014 21:38

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

prom candy posted:

The Slim sytax of

code:


 div data-modal-remote='/my-modal-path' data-modal-clone=true data-tooltip-title='My Tooltip'

Let's see how I can turn that into valid HTML:

code:


<div data-modal-remote='/my-modal-path' data-modal-clone=true data-tooltip-title='My Tooltip'>

I can practically taste the convenience!

# ¿ Aug 4, 2014 23:38

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

prom candy posted:

Especially since different browsers will try to comp for missing or extra closing tags in their own way.

How so?

# ¿ Aug 8, 2014 07:12

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

Varying on Accept also invites caching bugs, since URL + last-modified/etag is no longer enough to determine whether the resource needs to be refetched.

That sounds more like an API bug if merely varying the Accept header changes the content (as distinct from the presentation) of the response.

Which probably means a dozen popular APIs do just that.

# ¿ Aug 8, 2014 21:22

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

Well, it means that if you have the XML flavour of http://thing.com/api/1/pokeyman in cache and you get a request for that same URL looking for the JSON representation, you can't return the cached content. Which is fine, except your cache needs to know that, and I would be totally unsurprised to discover that many caching setups don't.

Oh I see. I was thinking of client-side caching, and I think you're describing server-side caching, which makes total sense as a place you'll see this problem.

# ¿ Aug 8, 2014 21:58

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Pollyanna posted:

What I meant was whether there was an accepted standard for formatting addresses on a web page. Which, as far as I can see, there isn't. I know how to write an address, thank you very much.

Turns out there is a standard! It's pretty loose. If it's contact info for the document (or nearest <article>), stick it in an <address>. Otherwise just throw it in a <p> or something.

Also I'm sure there's some hilarious microdata syntax for a mailing address if you really want to junk it up.

# ¿ Aug 25, 2014 01:25

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

I just assumed they ended up in the <graveyard/>

# ¿ Aug 26, 2014 05:18

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Today's episode of CSS is awesome: http://jsfiddle.net/aLvsxLmf/1/

The example will be clearer than anything I write, but basically you can defeat word-wrap: break-word with a bunch of images interspersed with empty inline elements, like <img><b></b><img><b></b>.... Is there some magical CSS property I can use here?

edit: Safari on iOS 8 is my target. Happens in Safari 7 on OS X 10.9 too. Chrome 37 works as I want it to. Updated fiddle.

pokeyman fucked around with this message at 05:43 on Sep 14, 2014

# ¿ Sep 14, 2014 04:34

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

Neither of those wrap for me in the Awful Browser/Safari/Chrome-iOS, which is actually what I would expect without a specified width, but both wrap in Chrome on Windows. Hmm. Annoying to experiment, since I can't seem to edit fiddles on iOS.

Untested thoughts: could you :before a zero-width non-joiner for <img>? try break-all instead of break-word?

Yeah Chrome actually does exactly what I want here. I'll edit my post to mention which browsers I'm messing with (iOS 8 Safari). I guess basically I want Chrome's behaviour in Safari.

img:before does nothing, which is apparently expected behaviour? anyway it's out.

break-all does work but it means that other lines will get wrapped in the middle of words and that's awful to read.

edit: I updated the fiddle to put a lil width on and show why break-all is terrible.

pokeyman fucked around with this message at 05:43 on Sep 14, 2014

# ¿ Sep 14, 2014 05:40

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

Subjunctive posted:

Duh, yes, img has no descendants.

In your example you might be able to :before on the b, or even (ha) on *. Hrmph.

I'm going to update this iPad to 8 tomorrow, but in the interim one more weird thought: set content: "" on all img as well?

b:before { content: "\200c"; } works! Thanks!

# ¿ Sep 14, 2014 06:09

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

box-sizing: border-box? Set 100% height on the html element?

# ¿ Sep 18, 2014 19:19

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

caiman posted:

What's everyone's preferred method for optimizing images?

I use ImageOptim as a window-I-can-drag-images-into. Dunno if it'll do command-line though.

# ¿ Sep 25, 2014 02:26

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

caiman posted:

Which is better/faster/optimal: to call jQuery from Google's CDN in addition to your main JS file; or to use your own jQuery file that's combined into your main JS file? Option one means loading Google's fast and likely cached jQuery file, but option two means one less http request. Thoughts?

Test it and find out!

# ¿ Sep 27, 2014 17:46

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

calusari posted:

So I am getting an unterminated string literal because its multiple lines, how do I get around this? There aren't \n to replace

You need to go the other way and replace e.g. new lines with \n. Just use JSON.stringify or equivalent.

If you're determined to do this yourself, don't forget to escape line separator and paragraph separator.

# ¿ Sep 30, 2014 19:53

Adbot: ADBOT LOVES YOU

# ¿ Apr 27, 2024 14:26

pokeyman: Nov 26, 2006; That elephant ate my entire platoon.

calusari posted:

Sorry, I'm an idiot

code:

 
var page_html = JSON.stringify('{{ webpage.html_content }}');

$.ajax({
                url: '/my_url',
                dataType: "json",
                type: 'POST',
                data: {
                       page_html: page_html,
                       csrfmiddlewaretoken: '{{ csrf_token }}'
                },
                success: function( json ) {
                       // blah blah
                }
});

yields

code:


var page_html=JSON.stringify('<!DOCTYPE html>
<html>
<body>

<h1>My First Heading</h1>

<p>My first paragraph.</p>

</body>
</html>
');

which is an unterminated string literal

Right. You need to stringify just before you poo poo it out. Your template library might have a built-in or easily-available filter you can use, like var page_html = {{ javascript_escape(webpage.html_content) }}.

# ¿ Oct 1, 2014 02:26

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > The Web Design & Development Megathread

«‹›2 »