The Web Design & Development Megathread

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

«‹›2 »

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Oh My Science posted:

Just be aware that we're guessing at the maximum # of fields a user may need. Unless you go crazy and add 100 extra hidden fields (which is crazy) you may run into edge cases where someone wanted 6 email fields not 5. You would know what the realistic limits should be for that form, and make sure you notify people if they hit that limit (hide the + button or a flash message).

You don't need to precreate the fields, though, unless I'm missing something. Have the + button create a new input element and add it to the document as needed.

# ¿ Mar 20, 2014 20:22

Adbot: ADBOT LOVES YOU

# ¿ May 19, 2024 20:53

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

PlesantDilemma posted:

God I have to deal with these all the time I hate you IE7!

To be fair, trailing commas weren't part of the standard when IE7 was released. It is pretty awesome though that the error reporting is basically " :shrug:

". Sometimes a linting tool helps for finding that stuff, if it's core language pickiness. It doesn't help with DOM/CSS though, which is of course where the real adventure lies.

Does anyone use Browserling or similar for automated testing on the browsers they can't stomach running?

# ¿ Mar 29, 2014 22:30

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Harik posted:

I'd argue with that, since they have {% ifequals %} tags as well.

By that reasoning, CSS selectors are "logic", as is anything that is at all general purpose because it has to react to the data. (Like alternating odd/even row colouring, automatically creating the right number of columns for a table, locale-formatting of dates or making them "whatever ago", singular/plural, blah blah.)

I've counted angels on this pin before, and I generally end up with this: if the template rules are read-only with respect to the data model, it's a politically correct view. You can have fun arguments as to whether navigation state is the view's purview or not, given sufficient beer, but in most cases that rule has been a good guide for my spidey sense. (I think navigation state is view, but since it requires state it's easy for it to end up accidentally overreaching.)

# ¿ Apr 4, 2014 23:57

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

2banks1swap.avi posted:

Potentially dumb question I'm having a hard time googling for whatever reason:

What's an easy way to set something on a parent container and all child containers that tells the browser "render this when you try to print, but not anything above this in the DOM" ?

code:

<link rel="stylesheet" href="print.css" type="text/css" media="print" />

<div class="outer">
    Don't print me.
    <div class="inner">
    But do print me.
    </div>
</div>

code:

/* print.css */
.outer { visibility: collapse; }
.inner { visibility: visible; position: absolute; top: 0; left; 0 }

This will keep the rest from rendering, but it could cause a bunch of blank space to be allocated. To do otherwise, you could use "Print this!" button that hoisted out the relevant part of the DOM, hid the rest, and called window.print.

# ¿ Apr 10, 2014 17:18

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

cbirdsong posted:

Couldn't you just do something like:
code:
.outer > * {
     display: none;
}
.outer > .inner {
     display: block;
}
Would break if .inner is nested in anything, but you could work around that.

It would still show the elements in the parent chain (their borders, text nodes, etc.) and they would affect positioning, even if you spelled out the full descendent hierarchy. (In which case please x-post to Coding Horrors.)

# ¿ Apr 10, 2014 17:44

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Widely-compatible HTML email is a dark art. Recommend not messing with the ritual or its components.

Edit: really, it's best to just not treat it as related to web pages at all. Think of it as RTF with angle brackets or something, because lots of page semantics aren't honoured (internal links, resource references, sometimes the flow calculations).

Subjunctive fucked around with this message at 22:34 on Apr 11, 2014

# ¿ Apr 11, 2014 22:31

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Xik posted:

All this talk about HTML emails... Don't most clients block images and remote content by default anyway? So your nice designs just end up being a gross mess for most people?

You can attach images to the email and refer to them from the HTML portion.

# ¿ Apr 12, 2014 21:12

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Fruit Smoothies posted:

Anyone had any joys printing exact measurements pages like labels from a combo of HTML/CSS? Google seems to advice strong against it.

With physical units as measurements in CSS and the right dpi configured everywhere, I think it should work.

# ¿ Apr 16, 2014 18:16

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Fruit Smoothies posted:

It doesn't. Even with browser print margins set to 0, and absolute positioning

Oh, you want to fill the whole page? I was thinking of just getting something of the right size in there. Surprised that it doesn't work, assuming no scale-to-fit or whatnot on the print-driver side. Sorry.

# ¿ Apr 16, 2014 19:14

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

stzy posted:

I recommend checking out tutorials on w3schools.

w3schools is an abomination, an affront to the grace of god and Hixie. Please avoid; http://developer.mozilla.org is a much better place to start.

# ¿ Apr 20, 2014 02:39

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

stzy posted:

I see what you mean by abomination now... read for 5 minutes and things are already more clear. Any resources for php like that?

Codecademy's stuff is usually pretty decent: http://www.codecademy.com/tracks/php

# ¿ Apr 20, 2014 13:05

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

hedgecore posted:

Probably for legal reasons - if they were identifiable it would have to be covered in a privacy policy.

And it would likely put requirements on Google that they don't want, in that regard. (Users' rights to see what's captured and delete it and such.)

# ¿ Apr 23, 2014 23:27

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

fuf posted:

edit: oh wow, pasting that bootstrap link bootstrapified the forums for me.

wonderful.

# ¿ Apr 24, 2014 14:22

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

New animations-thing draft out: http://dev.w3.org/fxtf/web-animations/

Looks like it's taking some of the popular Flash tweening (not shape-tweening though AFAIK) semantics and such, though I haven't really read it deeply yet.

# ¿ Apr 24, 2014 17:19

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Kobayashi posted:

I'm not fluent in spec-speak. Does this give more flexibility than cubic bezier curves? More curve points are necessary for iOS-like physics animations without Javascript.

That's a good question. I think so from conversation with people implementing it (iOS was definitely on the radar), but I haven't decrypted the spec enough to be sure. I'll ask.

I assume that keyframes don't give you the right shape for this.

# ¿ Apr 24, 2014 22:19

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

pipes! posted:

Now I'm wondering if there's ever been a meta keyword so long that it crashed browsers.

Probably not, since the content isn't processed.

I think keyword disasters like that usually incur an SEO penalty these days, actually.

# ¿ Apr 25, 2014 16:36

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

We released our JS testing framework today. It honestly makes writing JS tests about 10x better, IME.

http://facebook.github.io/jest/index.html

# ¿ May 14, 2014 18:13

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

fletcher posted:

That looks pretty sweet, I'm on Linux though

Charles works differently, but is usually fine.

http://www.charlesproxy.com/documentation/proxying/throttling/

A guy at work uses a variant of this:

https://gist.github.com/obscurerichard/3740206

Depends a bit on whether you want high latency, low bandwidth, or both.

e;fb on Charles

# ¿ May 21, 2014 23:47

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Sil posted:

That's leeching. I believe the way to do it is to scrape the image, save it on your own hosting, and link to your version of the image.

og:image is pretty much an explicit instruction to "leech", I believe. It's being used to represent, not repurpose, the linked page. I'll ping the Open Graph folks to check the etiquette, though.

FB downloads and caches because otherwise we would melt servers, but in the general case I would say to just use the URL directly.

# ¿ May 24, 2014 13:25

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Yes, they could goatse you, though they would also be goatseing FB and I think that tends to turn out poorly for content providers. (The scraping system is automated, right? They could just put up meatspin.jpg the first time anyway.)

Copyright law has preferred hot-linking to copying, for these purposes, not that it practically matters at all. http://en.wikipedia.org/w/index.php?title=Inline_linking#Copyright_law_issues_that_inline_linking_raises

Putting something in an OG metadata block is literally asking services to use that image URL to represent the content in another context.

# ¿ May 26, 2014 16:17

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Kobayashi posted:

Facebook is the canonical example because they basically invented the hamburger menu, and recently moved away from it (although I'd argue they just moved it to the bottom right).

I'd argue that as well.

quote:

Without having any inside knowledge, I'd guess that FB saw a lot of people "wandering" from page to page, until they had a huge history they had to undo before they got back to the hamburger menu. Putting the root in a tab makes it easier to pop out of a history stack.

I can't divulge that much about the motivation for the change, but history depth and how people interacted with it was relevant. Mostly I think you want to have primary UI for mode/content switching where users switch modes frequently and independently of their state in their current task. For many apps it probably matters what people are familiar with from other apps. For us we can (though usually don't) ignore that because we're the most heavily used app by a large margin. That familiarity probably explains some of the regional differences we saw, though. "Uh, anyone know why Slovakians' usage of groups falls off a cliff when we put it in a tab?" (Made up example, obviously.)

I will say that it was almost certainly the most thoroughly modeled and measured and analyzed and alternate-designed UI work I saw in 2 years of running mobile eng. To risk being on topic, that learning has definitely informed design of the desktop and mobile web interfaces as well, though mostly in non-obvious ways.

# ¿ May 28, 2014 00:09

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

OU doesn't matter unless maybe for EV certs. My bet is that you're not serving the intermediate cert chain correctly. Browsers will cache them so you can get cases where a site works even with a broken configuration, because the browser has recently seen a cert with the same chain.

# ¿ Jun 6, 2014 19:07

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

fletcher posted:

I've never had a problem with Firebug consuming lots of RAM.

I'd been told that you exist, but in all my time fretting about Firebug I'd never met you. Bucket list updated.

# ¿ Jun 10, 2014 21:53

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

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

# ¿ Jun 13, 2014 23:27

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

pokeyman posted:

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

Sure, but /friends/ or whatever isn't. There's nothing magic about a person's name (versus a page name) that means it has to be globally scoped, if a person using the site will necessarily be dealing with a subset of the entries. (And /joe_blow will show different content depending on who is logged in and their relationship to Mr Blow.)

It will be diagnostics harder, because you have no good way of specifying which joe_blow you want if you're investigating a bug, and your error logs will have to be more complicated.

# ¿ Jun 13, 2014 23:55

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

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.

# ¿ Jun 14, 2014 00:26

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Goon posted:

React definitely seems like an attractive option. The website lists it as being at v0.10.0. Am I reading this wrong, or is it still short of a production ready release?

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.

# ¿ Jun 16, 2014 18:53

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

pokeyman posted:

Basically the opposite of the Facebook.app team.

"Version 12.0
What's new in this version:

* Minor bug fixes."

Yeah. I got sick of arguing about whether something was a major or minor release based on what made the cut and stuck, so I decreed that it would be integers and they would increase monotonically until the end of days. I stand by it. :colbert:

# ¿ Jun 17, 2014 00:16

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Anarkii posted:

If you have reservations about React not being mature enough, Backbone + Marionette + Handlebars + Bootstrap is perfectly suitable for creating "modern" UIs.

One of the nice things about React is that it's so easy to get going that you can pretty quickly tell if it's going to work for you. (I also think that its state-containment model makes it pretty friendly for beginners, because IME complexity grows more slowly.)

Scrolling question: are there any events that fire reliably during inertial scroll on iOS (for lazy loading of images in my case)? I haven't found any yet, but thought I'd see if anyone had a magic trick before I resorted to bridging from native or iScroll.

# ¿ Jun 17, 2014 16:05

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Maluco Marinero posted:

This is impossible to do unless you have completely control of the scroll. During a native inertia scroll iOS does not fire any setInterval, setTimeout, or requestAnimationFrame calls. JavaScript just stops for all listening purposes so yeah, managing the scroll with iScroll or equivalent is your only option to track on the move.

Does it defer timer delivery, or actually block all JS execution, such as triggered by a call from native code? I thought the former, but that might have been more hope than realism.

I'll have to try it tonight, I guess.

# ¿ Jun 18, 2014 00:11

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Maluco Marinero posted:

Like from a phonegap or webview? Beyond the scope of my current work (web app with no container). You'd need to test more thoroughly for your use case (and I'd love to know how it goes), as I'm developing from a position (at least for now) where the browser capabilities are my limit.

Yeah, from the native side of Awful.app's UIWebView. We shall see!

# ¿ Jun 18, 2014 01:24

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Chris! posted:

Update on my Wordpress issue: I've finally found some code which seems like it's tackling the right problem:
code:
foreach( $categories as $category ):
    if( $parent->term_id == $category->parent ):
        // put link in array
        $links[] = '<a href="' . get_term_link( $category ) . '">' . $category->name .      '</a>';
    endif;
endforeach;
?> 
However, what it outputs isn't quite right. For example, on a machine which is categorised as a Boom Lift, and also an Articulated Electric Boom Lift, it's now displaying: "Boom lift: Articulated Booms (electric)Scissor lift: Spider-lift:"

So it's adding on 2 other categories which aren't applicable to this machine. Any ideas?

Isn't that loop going to add in everything that shares a parent with your target? It sounds like that's what's happening.

I think you want to walk back up the parent chain (category, category->parent, category->parent->parent, etc.) rather than enumerating the list of categories like that.

# ¿ Jul 8, 2014 14:47

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Chris! posted:

Hey, yes that exactly what's happening. I have no idea how to specifically display only the Parent and Child categories though. I've been trying some hacky work around but it's not working and my knowledge of php just isn't enough right now!

What you want to do is this, in pseudocode (I don't know the WP stuff well and my PHP is rusty):

code:

$category = $target; // electric boogaloo lift or whatever
$string = "";
while ($category) {
   // put the category at the beginning of the string
   // at the beginning this is just putting the target's name in 
  $string = name_of($category) + " " + $string;
  
  // move up to the parent
  $category = find_category_for($category->parent)

  // $category will be null if not found, meaning we've hit the top
  // otherwise, we'll loop and process the parent
}

Edit: or put each one in $links[] and join, rather than doing the string math directly.

Subjunctive fucked around with this message at 15:28 on Jul 8, 2014

# ¿ Jul 8, 2014 15:25

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Is there really not a video.js wordpress plugin that does this sort of thing already? That would seem an unusual omission in the universe.

# ¿ Jul 10, 2014 20:36

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Kobayashi posted:

^ Unrelated, but did you ever find a way to intercept scroll events on mobile web while the page is still moving, or did you have to use a native library to help?

I was able to get scroll events in JS for non-inertial scroll, and with native code I was able to get inertial scroll.

But for my use case it turned out to not matter, because the webview wouldn't react to any changes I made until scrolling was finished anyway, so I couldn't lazily add images before they were scrolled into view. Boo. The web sucks. Boo.

# ¿ Jul 10, 2014 20:58

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Maluco Marinero posted:

I was wondering about that. So all JavaScript Is deferred til the end of momentum, not just timers, yeah?

You can run script that you trigger from native during momentum, but the web view won't visibly react to it.

# ¿ Jul 11, 2014 02:58

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

If you want to get actionable feedback, it's often pretty helpful to come in with an opinion. "I want to do X, and here's what I've come up with so far. I'm not super happy with Y or Z, but I like how Q fits together. Anyone have ideas on how I might improve those pieces?" Not only does it show greater depth of consideration, but you're more likely to get reusable advice about how to approach classes of problems.

Someone also mentioned a good front-end news aggregator here or in the front-end thread, which sort of thing can help absorb strategies and approaches.

# ¿ Jul 15, 2014 16:52

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

pipes! posted:

I would also advocate not drinking from the firehose too much until you have a better handle on the basics. Really easy to fall down a frontend dev trend of the moment k-hole without really knowing what you're practicing.

Yeah, I mean more immersion so you gradually accumulate more patterns to match and general recollection that a given sort of thing exists. Not deeply reading each article or anything.

Obviously biased towards my own learning style...

# ¿ Jul 15, 2014 18:52

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Ghostlight posted:

I agree it's a better design but at no point did they remove or move away from the TWO hamburgers they have, which makes it a terrible example to post on a Kill The Hamburger Button article.

We did move away from it, in that we replaced an "all nav" affordance with an "other nav" affordance. Putting the hamburger icon on the "more" tab, f.e., really changed the way test users navigated. Much more so than I would have predicted.

# ¿ Jul 16, 2014 20:58

Adbot: ADBOT LOVES YOU

# ¿ May 19, 2024 20:53

Subjunctive: Sep 12, 2006; ✨sparkle and shine✨

Ghostlight posted:

But is that change due to the fact that the tab bar is a better navigation structure even when it contains the same information, due to the move from icons to icons and text, or due to the hamburger somehow no longer being a hamburger for the purposes of writing an article about how bad the hamburger is when your main criticism - visibility of options - didn't apply to the old Facebook hamburger anyway because it was already on a proto-tab menu?

I can't really get super-detailed, but tabs-with-hamburger-icon vs tabs-with-more-label behaved very differently, so there's something about people's expectations of a nav model that includes a burger that can make a big difference. It's not just an equivalent list-of-nav-triggered-by-tap.

# ¿ Jul 16, 2014 23:13

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

«‹›2 »