The Web Design & Development Megathread

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

«‹›361 »

Pollyanna: Mar 5, 2005; Milk's on them.

So as far as I can tell, my Middleman installation literally does not take any layout files that are not in ERb format. What :mad:

I've seen perfectly good Middleman examples that use HAML layouts, what the gently caress? I'm just ranting now, cause it's annoying.

prom candy posted:

HAML is great, where did you get this idea?

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

# ? Aug 3, 2014 20:50

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 06:07

down with slavery: Dec 23, 2013; STOP QUOTING MY POSTS SO PEOPLE THAT AREN'T IDIOTS DON'T HAVE TO READ MY FUCKING TERRIBLE OPINIONS THANKS

Probably better suited for the Rails thread honestly

# ? Aug 3, 2014 21:31

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

prom candy: Dec 16, 2005; Only I may dance

pokeyman posted:

Are you using notepad.exe or something?

Having a whitespace-aware language with no closing tags is more readable no matter what text editor you're using.

# ? Aug 3, 2014 22:36

Kobayashi: Aug 13, 2004; by Nyc_Tattoo

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.

In addition to the other suggestions, I saw on one of the recommended newsletters that the latest versions of Safari now support the Navigation Timing API. I hadn't heard of this before, and it's already supported by the other major browsers, but it looks like this could enable in-page performance analytics that are similar to what I want to do.

# ? Aug 4, 2014 00:19

pipes!: Jul 10, 2001; Nap Ghost

prom candy posted:

HAML is great, where did you get this idea?

From using Slim instead.

# ? Aug 4, 2014 00:29

Maluco Marinero: Jan 18, 2001; Damn that's a
fine elephant.

pipes! posted:

From using Slim instead.

Yeah HAML was a good stepping stone when it was the only templating lang around, but the jade styles of syntax have cut even more visual noise out of HTML editing with no added problems.

# ? Aug 4, 2014 01:26

Slow News Day: Jul 4, 2007

pipes! posted:

From using Slim instead.

I discovered Slim yesterday and it's super interesting. Going to convert my existing ERb templates to Slim this week. Is there anything I should watch out for?

I found a gem for it, but I figured doing it manually would be a good way to learn it.

# ? Aug 4, 2014 05:48

pipes!: Jul 10, 2001; Nap Ghost

enraged_camel posted:

Is there anything I should watch out for?

If you're using a build tool like Gulp the error reporting is not great. Chances are if there's an issue, it's because something isn't piped properly (or that's what I ran into, at least). You can enable it in CodePen in the HTML input area if you want to play around a little.

# ? Aug 4, 2014 15:11

prom candy: Dec 16, 2005; Only I may dance

pipes! posted:

From using Slim instead.

Okay yeah Slim is pretty great. I'm actually not sure why I haven't switched to it considering I've been using Emblem to work on Ember projects. One thing I have noticed with HAML is that elements with lots of data-tags-with-hyphens get ugly pretty quick when you end up with something like

code:

  %div{ data: { modal: { remote: '/my-modal-path', clone: true }, tooltip: { title: 'My tooltip' } }

The Slim sytax of

code:

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

Is about the same amount of typing but it's easier to get a look at your data attributes.

# ? Aug 4, 2014 22:44

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

prom candy: Dec 16, 2005; Only I may dance

Yup, they're exactly the same.

# ? Aug 8, 2014 03:29

EB Nulshit: Apr 12, 2014; It was more disappointing (and surprising) when I found that even most of Manhattan isn't like Times Square.

So slim is basically HTML but with Python-style white-space rules to obviate the need for braces? I'm okay with that.

# ? Aug 8, 2014 04:16

prom candy: Dec 16, 2005; Only I may dance

EB Nulshit posted:

So slim is basically HTML but with Python-style white-space rules to obviate the need for braces? I'm okay with that.

The thing I like more about the white space rules is that it makes it really easy to understand the flow of the document at a glance and eliminates the need to have closing tags. I know most modern text editors are pretty good at managing your closing tags but one little slip up can leave you with a frustrating debugging experience. Especially since different browsers will try to comp for missing or extra closing tags in their own way.

# ? Aug 8, 2014 05:17

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

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

Less versions of IE/Win to debug!
As of 2016, only the latest version of Internet Explorer per Windows version will be supported

# ? Aug 8, 2014 13:40

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

The Merkinman posted:

Less versions of IE/Win to debug!
As of 2016, only the latest version of Internet Explorer per Windows version will be supported

Great, now just get all the corporations that are still on XP to migrate!

It also means no flexbox until May 2017. :cry:

# ? Aug 8, 2014 14:02

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

Why is my Avant Garde font appearing different on Chrome for Mac OS X and Chrome for Windows? I am very confused.

zfleeman.com

# ? Aug 8, 2014 16:45

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

zfleeman posted:

Why is my Avant Garde font appearing different on Chrome for Mac OS X and Chrome for Windows? I am very confused.

zfleeman.com

Because either your Windows or OS X machine does not have Avant Garde installed, so it's falling back to the others in your font stack until it finds one it can display.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

If for some reason you feel the need to ensure everyone sees the exact same font, use one of the "safe" ones, or use a face you can include via CSS. Google fonts is a nice place to get free ones. People can only see fonts they have installed on their machine, unless you deliver the font along with your page.

Lumpy fucked around with this message at 16:53 on Aug 8, 2014

# ? Aug 8, 2014 16:50

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

I'm designing an API right now that presents some objects like so:

JavaScript code:

{
	"id": 1,
	"name": "Fake Acres",
	"address1": "123 Fake Street",
	"address2": "",
	"city": "Faketown",
	"zip": "12345",
	"things_here": [
		"http://blahblah.com/things/1/",
		"http://blahblah.com/things/2/",
		"http://blahblah.com/things/3/",
		...
	]
}

Many times a consumer of the API will probably just care about a specific attribute of the things listed in things_here and would probably prefer output like:

JavaScript code:

{
	"id": 1,
	"name": "Fake Acres",
	"address1": "123 Fake Street",
	"address2": "",
	"city": "Faketown",
	"zip": "12345",
	"things_here": [
		"red truck",
		"yellow screwdriver",
		"white seagull",
		...
	]
}

My question is, how should I allow the consumer to request this optional output? I can do URLs like:

1. http://blahblah.com/place/1/special_output/
2. http://blahblah.com/place/1?special_output=true

or what?

If it's just personal preference I think I'll go with #1 as I prefer the cleaner look of urls without query parameters, but if there's a standard for REST API's (that I can't seem to find right now), I'll stick to the standard.

# ? Aug 8, 2014 18:32

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

Lumpy posted:

Because either your Windows or OS X machine does not have Avant Garde installed, so it's falling back to the others in your font stack until it finds one it can display.

http://dowebsitesneedtolookexactlythesameineverybrowser.com/

If for some reason you feel the need to ensure everyone sees the exact same font, use one of the "safe" ones, or use a face you can include via CSS. Google fonts is a nice place to get free ones. People can only see fonts they have installed on their machine, unless you deliver the font along with your page.

I've been using cssfontstack.com, which I thought had 'web-safe' fonts.

# ? Aug 8, 2014 18:40

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

zfleeman posted:

I've been using cssfontstack.com, which I thought had 'web-safe' fonts.

If you hover over the i you'll see it's installed on approximately 1.08% of Macs and 0% of Windows machines.

# ? Aug 8, 2014 18:58

zfleeman: Mar 12, 2014; I wonder how you spell Tabasco.

The Merkinman posted:

If you hover over the i you'll see it's installed on approximately 1.08% of Macs and 0% of Windows machines.

Oh, wow. Well, I really like the way it looks on my Mac. How can I figure out what it is that I am seeing so I can use that instead?

# ? Aug 8, 2014 19:00

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

Thermopyle posted:

My question is, how should I allow the consumer to request this optional output? I can do URLs like:

1. http://blahblah.com/place/1/special_output/
2. http://blahblah.com/place/1?special_output=true

or what?

If it's just personal preference I think I'll go with #1 as I prefer the cleaner look of urls without query parameters, but if there's a standard for REST API's (that I can't seem to find right now), I'll stick to the standard.

I'm not aware of standards around this - I just see "X is optional" and think immediately of the query, not the path. You've gone one farther and said "X is optional and just modifies the output". /place/id?xml=true is a clearer logical parallel that I think makes the the case a bit better.

# ? Aug 8, 2014 19:20

The Merkinman: Apr 22, 2007; I sell only quality merkins. What is a merkin you ask? Why, it's a wig for your genitals!

zfleeman posted:

Oh, wow. Well, I really like the way it looks on my Mac. How can I figure out what it is that I am seeing so I can use that instead?

If you have Firebug you can inspect an element with that font (i.e. "Zach Fleeman's Website"), then in the Style tab, whichever font is highlighted in the stack is the one that is being used.
If you don't have Firebug, I guess you could manually misspell a font in the stack until you see it change :v:

Even if you find which one it is that you like, you only know it is showing that font on your Mac. If you need everyone to see the exact same font, then either pay for one through typekit or get a free one (converting it with font squirrel and host it like you images, or use Google Fonts.

The Merkinman fucked around with this message at 19:38 on Aug 8, 2014

# ? Aug 8, 2014 19:31

EAT THE EGGS RICOLA: May 29, 2008

Thermopyle posted:

I'm designing an API right now that presents some objects like so:

My question is, how should I allow the consumer to request this optional output? I can do URLs like:

1. http://blahblah.com/place/1/special_output/
2. http://blahblah.com/place/1?special_output=true

I would do 2. to allow users to request specific things (/1?fl=thing_name), and I would alias common actions (in this case, /1/special_output).

(also I would just use Solr)

# ? Aug 8, 2014 19:32

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Munkeymon posted:

I'm not aware of standards around this - I just see "X is optional" and think immediately of the query, not the path. You've gone one farther and said "X is optional and just modifies the output". /place/id?xml=true is a clearer logical parallel that I think makes the the case a bit better.

This is a good point and you've convinced me.

# ? Aug 8, 2014 19:38

Sedro: Dec 31, 2008

Thermopyle posted:

My question is, how should I allow the consumer to request this optional output? I can do URLs like:

1. http://blahblah.com/place/1/special_output/
2. http://blahblah.com/place/1?special_output=true

or what?

If it's just personal preference I think I'll go with #1 as I prefer the cleaner look of urls without query parameters, but if there's a standard for REST API's (that I can't seem to find right now), I'll stick to the standard.

I think the best practice (standards, ha) is to use query parameters for this.

Normally your API would return relations as references

JavaScript code:

GET /place/1
{
    "id": 1,
    "name": "Fake Acres",
    "address1": "123 Fake Street",
    "address2": "",
    "city": "Faketown",
    "zip": "12345",
    "things_here": [ 1, 2, 3 ]
}

You could add a generalized way to select which fields you want

JavaScript code:

GET /place/1?fields=id,address1
{
    "id": 1,
    "address1": "123 Fake Street"
}

You could also have a parameter to embed related objects

JavaScript code:

GET /place/1?embed=things_here.id,things_here.name
{
    "id": 1,
    "name": "Fake Acres",
    "address1": "123 Fake Street",
    "address2": "",
    "city": "Faketown",
    "zip": "12345",
    "things_here": [
        {
            "id": 1,
            "name": "red truck"
        },
        {
            "id": 2,
            "name": "yellow screwdriver"
        },
        {
            "id": 3,
            "name": "white seagull"
        }
    ]
}

This ends up being a ton of work and you're over-engineering unless the API is your main product. There are server and client side technologies which can pick up some of the work but they won't agree on a convention.

# ? Aug 8, 2014 19:46

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Sedro posted:

...good points...

This ends up being a ton of work and you're over-engineering unless the API is your main product. There are server and client side technologies which can pick up some of the work but they won't agree on a convention.

I get a lot of that for nearly-free as I'm using django-rest-framework, so that's something.

# ? Aug 8, 2014 19:49

prom candy: Dec 16, 2005; Only I may dance

pokeyman posted:

How so?

I don't remember the specifics since I haven't had to deal with closing tags on a regular basis in a very long time, but issues like this that I found while Googling were never fun to debug: http://stackoverflow.com/questions/5623109/firefox-automatically-adding-closing-form-tag-too-early-ie-and-chrome-ok

# ? Aug 8, 2014 19:58

MrMoo: Sep 14, 2000

Munkeymon posted:

I'm not aware of standards around this - I just see "X is optional" and think immediately of the query, not the path. You've gone one farther and said "X is optional and just modifies the output". /place/id?xml=true is a clearer logical parallel that I think makes the the case a bit better.

However ?xml=true is a special case when a HTTP header should be used instead, Accept: application/xml versus Accept: application/json.

# ? Aug 8, 2014 20:18

Munkeymon: Aug 14, 2003; Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.

MrMoo posted:

However ?xml=true is a special case when a HTTP header should be used instead, Accept: application/xml versus Accept: application/json.

Yeah, you're technically right, but doing that from a browser is kind of annoying and could behave in unexpected ways, and that's the perspective I'm coming from/assuming. The server could easily just check both to be a more friendly API, I guess.

# ? Aug 8, 2014 20:55

Thermopyle: Jul 1, 2003; ...the stupid are cocksure while the intelligent are full of doubt. �Bertrand Russell

Munkeymon posted:

Yeah, you're technically right, but doing that from a browser is kind of annoying and could behave in unexpected ways, and that's the perspective I'm coming from/assuming. The server could easily just check both to be a more friendly API, I guess.

Yeah, the real issue from my viewpoint is that so many sites do the format selection via a query parameter that consumers kind of expect it. A lot of sites support both the HTTP header and a query parameter.

# ? Aug 8, 2014 20:59

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

Munkeymon posted:

Yeah, you're technically right, but doing that from a browser is kind of annoying and could behave in unexpected ways, and that's the perspective I'm coming from/assuming. The server could easily just check both to be a more friendly API, I guess.

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.

# ? Aug 8, 2014 21:14

Civil: Apr 21, 2003; Do you see this? This means "Have a nice day".

I don't do much web development, but I'm putting something together using google charts, and using jquery to toggle visibility on some elements. I don't have much experience doing anything with javascript, but this stuff is normally pretty easy to piece together.

http://jsfiddle.net/d5uq9780/

Unfortunately, I get this annoying "GViz is Great." text tag showing up when I show a hidden google chart.

Any ideas what I'm doing wrong? I can't find anything on this anywhere, though google searches show the tag showing up in random pages.

# ? Aug 8, 2014 21:22

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

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

pokeyman posted:

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.

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.

# ? Aug 8, 2014 21:30

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

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

pokeyman posted:

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.

You could see it on the client side of an API as well, if the HTTP stack caches. That's actually what I was thinking of.

# ? Aug 8, 2014 22:53

Adbot: ADBOT LOVES YOU

# ? May 15, 2024 06:07

Robzor McFabulous: Jan 31, 2011

Civil posted:

I don't do much web development, but I'm putting something together using google charts, and using jquery to toggle visibility on some elements. I don't have much experience doing anything with javascript, but this stuff is normally pretty easy to piece together.

http://jsfiddle.net/d5uq9780/

Unfortunately, I get this annoying "GViz is Great." text tag showing up when I show a hidden google chart.

Any ideas what I'm doing wrong? I can't find anything on this anywhere, though google searches show the tag showing up in random pages.

From what I can tell it's nothing you're doing wrong; you're loading the "Visualization" Google API module to make your chart, and the "GVis" tag is being added by that at their end as a means of acknowledgement I suppose.

# ? Aug 9, 2014 07:18

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

«‹›361 »