The Web Design & Development Megathread

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

«‹›362 »

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

It's kinda weird to me how hard forms are

# ? Nov 30, 2017 20:25

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 03:34

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Skandranon posted:

If you can make the submit button give useful information on what is wrong, this is the best. Making fields turn red points out it is wrong, but you should also say why.

Yeah I agree. Red borders while typing and only show error messages on submit.

# ? Nov 30, 2017 20:59

Giga Gaia: May 2, 2006; 360 kickflip to... Meteo?!

Thermopyle posted:

It's kinda weird to me how hard forms are

I like them. They're still a, sort of, unsolved problem and they offer so many semantic elements to mess with. I'm really glad I can leverage vanilla JS for validation and stuff now, though. gently caress all those terrible jQuery libraries.

# ? Nov 30, 2017 21:38

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Have you guys ever dealt with forms with inputs that are required or optional based on settings a user configures?

Because that's what I was dealing with a couple weeks ago and I'm sure that my conditionals need to be cleaned up. How do you guys deal with a lot of conditionals in a form while keeping the code concise and clean?

# ? Nov 30, 2017 21:59

IronDoge: Nov 6, 2008

I've been trying to tell some simple UX improvements to our designers, like adding floating text for placeholder field labels or switching to dropdowns for dates instead of manually typing it in. After a while I just said gently caress it and starting implementing it on my own. Suprise, suprise, our form data is much more consistent now and no one has said a word. When you do your job right, no one notices I suppose.

# ? Nov 30, 2017 22:02

The Dave: Sep 9, 2003

Grump posted:

Have you guys ever dealt with forms with inputs that are required or optional based on settings a user configures?

Because that's what I was dealing with a couple weeks ago and I'm sure that my conditionals need to be cleaned up. How do you guys deal with a lot of conditionals in a form while keeping the code concise and clean?

Hmm, I'm not sure you should have inputs that change between requires and optional. I would need to know about the specifics to provide a ux solution though.

# ? Nov 30, 2017 22:03

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

The Dave posted:

Hmm, I'm not sure you should have inputs that change between requires and optional. I would need to know about the specifics to provide a ux solution though.

Say you have a form for the user's address.

The site owner could choose to make the 'company' or 'address line 2' required or optional.

So then that means your conditional would have to look something like this when the form is submitted

JavaScript code:

if ((companyNameInputText.trim() !== "" && companyNameIsRequired) || !companyNameIsRequired) {
	// pass validation
}
else {
	// don't pass validation
}

It would turn into spaghetti code with enough input fields.

# ? Nov 30, 2017 22:12

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

Grump posted:

Have you guys ever dealt with forms with inputs that are required or optional based on settings a user configures?

Because that's what I was dealing with a couple weeks ago and I'm sure that my conditionals need to be cleaned up. How do you guys deal with a lot of conditionals in a form while keeping the code concise and clean?

Each input is represented as an object that has an array of validators. Add / remove validators as needed, and then when the form submits, you run the value through those validators. You can have different arrays as needed for more complex validation like an array where if any fail, it's a fail, or another that ALL have to fail for it to not pass.

I tend to couple the validators with a message a la:

JavaScript code:

import { isRequred, isEmail } from './textValidators';

isRequiredValidator = { validator: isRequired, message: "This field is required" }
isEmailValidator = { validator: isEmail, message: "Please enter a valid email address" }

usernameField = { validators: [ isRequiredValidator ], ... }
emailField = { validators: [isRequiredValidator, isEmailValidator], ... }

Works okay, but I'm always trying to improve it / seek out better ideas because forms are hard.

# ? Nov 30, 2017 22:40

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

that's an interesting idea. What would the form submit function look like in that case?

# ? Nov 30, 2017 23:04

Ruggan: Feb 20, 2007; WHAT THAT SMELL LIKE?!

I�ve tried the validator idea before and it�s useful until you want to return different errors for the same type of validation decorator based on the field.

# ? Dec 1, 2017 01:59

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

Grump posted:

that's an interesting idea. What would the form submit function look like in that case?

Put your field objects in an array or map, iterate over them, and run each one's vaildators.

# ? Dec 1, 2017 02:11

geeves: Sep 16, 2004

Grump posted:

Have you guys ever dealt with forms with inputs that are required or optional based on settings a user configures?

Because that's what I was dealing with a couple weeks ago and I'm sure that my conditionals need to be cleaned up. How do you guys deal with a lot of conditionals in a form while keeping the code concise and clean?

I did this a few years ago. It involved, Struts, jQuery and bad decisions imposed upon me from up on high. If I could go back in time and save myself the trouble, I would not give myself a clean death.

# ? Dec 1, 2017 03:14

porksmash: Sep 30, 2008

I like Yup for form validation.

# ? Dec 1, 2017 07:17

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

Does mask prevent an element from getting a border? I�m trying to add a border to an element that�s basically a background masked by an SVG, but I can�t get it to display a border regardless of border width or color.

# ? Dec 4, 2017 21:50

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

Pollyanna posted:

Does mask prevent an element from getting a border? I�m trying to add a border to an element that�s basically a background masked by an SVG, but I can�t get it to display a border regardless of border width or color.

Not sure, but if you aren't using the right box-sizing, your border might be outside of the mask?

# ? Dec 4, 2017 22:44

I R SMART LIKE ROCK: Mar 10, 2003; I just want a hug.; Fun Shoe

Yo, any of you run into https://www.cypress.io/ yet? I heard about it from a co-worker and got some integration tests up and running within a couple of hours. It's got built in request mocking and went open source earlier this year. The only real hiccup I've run into, so far, is the inability to set a User-Agent header for the session. Though really that's a minor gripe

# ? Dec 5, 2017 00:34

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

Has anyone here successfully submitted / been approved by Instagram Permissions Review? ( https://www.instagram.com/developer/review/ ) We've been declined twice, but as far as I know, we're doing exactly what we should be.... the canned rejection message they give you doesn't really help much. I'd love to know what a successful request looked like so I can compare it to what we are doing.

# ? Dec 5, 2017 15:38

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

Lumpy posted:

Not sure, but if you aren't using the right box-sizing, your border might be outside of the mask?

Tried that, and it still doesn't seem to show up. I also tried making a jsFiddle example of it, but it doesn't show up :cry:

This is what I'm working with and trying to add a border to: https://jsfiddle.net/c9uxysw3 For some reason it doesn't show up. Maybe it's the SVG I'm using? (It's not the one we're using in prod.)

EDIT: poo poo, I think I got it. Messing around with the mask-image page on developer.mozilla.org, it looks like the border is also affected by masking. :shepface:

Am I misunderstanding how masking works?

Pollyanna fucked around with this message at 16:16 on Dec 5, 2017

# ? Dec 5, 2017 16:09

Tei: Feb 19, 2011; Can't post for 4 days!

Grump posted:

Have you guys ever dealt with forms with inputs that are required or optional based on settings a user configures?

Because that's what I was dealing with a couple weeks ago and I'm sure that my conditionals need to be cleaned up. How do you guys deal with a lot of conditionals in a form while keeping the code concise and clean?

*a wild JQuery developer appears*

adding and removing the class "Obligatory" to fields ?

* a chaotic JQuery hacker appears *

What if you class have names like class="obligatory-customer obligatory-employee obligatory-user" and you check one or the other based on the type of user?

* the many jquery developers dissapears in a huge toxic purple smoke cloud *

# ? Dec 5, 2017 16:15

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

Is there some sort of consistent spacing/fontsize/padding/whatever design language out there that can be implemented organization-wide? I'm getting sick and tired of guessing at what kind of whitespace and proportions the designer wants and have them throw a million tweaks and !!!! I FOUND A BUG PLEASE FIX NOW NOW NOW !!!!s at me anyway.

If I'm being totally honest, I want to wave a magic wand and somehow make my life a lot easier, but failing that some frameworks and guides to follow will suffice.

# ? Dec 7, 2017 23:51

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

Pollyanna posted:

Is there some sort of consistent spacing/fontsize/padding/whatever design language out there that can be implemented organization-wide? I'm getting sick and tired of guessing at what kind of whitespace and proportions the designer wants and have them throw a million tweaks and !!!! I FOUND A BUG PLEASE FIX NOW NOW NOW !!!!s at me anyway.

If I'm being totally honest, I want to wave a magic wand and somehow make my life a lot easier, but failing that some frameworks and guides to follow will suffice.

Uh, yes thats what the designer is supposed to provide you.

# ? Dec 8, 2017 00:30

Doh004: Apr 22, 2007; Mmmmm Donuts...

Pollyanna posted:

Is there some sort of consistent spacing/fontsize/padding/whatever design language out there that can be implemented organization-wide? I'm getting sick and tired of guessing at what kind of whitespace and proportions the designer wants and have them throw a million tweaks and !!!! I FOUND A BUG PLEASE FIX NOW NOW NOW !!!!s at me anyway.

If I'm being totally honest, I want to wave a magic wand and somehow make my life a lot easier, but failing that some frameworks and guides to follow will suffice.

Sketch + Zeplin work wonders for this.

# ? Dec 8, 2017 00:36

The Dave: Sep 9, 2003

Well if the designers aren�t being consistent there�s a bigger problem past the tools. They need to create their own design language or adapt a framework.

# ? Dec 8, 2017 01:27

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

Not that its necessarily the designers fault.

It's hard and expensive to come up with a comprehensive design language, and if they're not given the leeway or resources to do so...

# ? Dec 8, 2017 01:30

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

Pollyanna posted:

Is there some sort of consistent spacing/fontsize/padding/whatever design language out there that can be implemented organization-wide? I'm getting sick and tired of guessing at what kind of whitespace and proportions the designer wants and have them throw a million tweaks and !!!! I FOUND A BUG PLEASE FIX NOW NOW NOW !!!!s at me anyway.

If I'm being totally honest, I want to wave a magic wand and somehow make my life a lot easier, but failing that some frameworks and guides to follow will suffice.

Ask for a style guide? http://styleguides.io/

Then send them an annoyed emoji when they ask for exceptions to it.

# ? Dec 8, 2017 15:06

The Dave: Sep 9, 2003

Thermopyle posted:

It's hard and expensive to come up with a comprehensive design language, and if they're not given the leeway or resources to do so...

Agreed on the latter, but it's gotten a lot easier for designers to come up with something and be consistent and share it. I'd expect any designer past the junior level to be able to do it.It should be a cross team discussion though because it's probably simpler to adapt an existing system if you have nothing to start with and lots of inconsistencies.

# ? Dec 8, 2017 15:10

kedo: Nov 27, 2007

Yeah, a style guide is definitely what you're looking for. Sketch makes it a lot easier these days since the files it produces are much more developer friendly than, say, Photoshop or Illustrator.

However as a designer/dev I can tell ya the problem doesn't always lie with the designer. A lot of us would really love to have a consistent system that applies to the entirety of a site, but there are often stakeholders directing the design who want to break the rules because, "this page really needs to pop" or "this initiative is so important it needs its own visual language, no trust me it's okay to break the rules just this once."

The surefire solution to your problem is to have a strong creative/art director who pushes back on these requests, and strives to maintain a consistent visual language across a site, but they are few and far between.

# ? Dec 8, 2017 15:39

Space Kablooey: May 6, 2009

I R SMART LIKE ROCK posted:

Yo, any of you run into https://www.cypress.io/ yet? I heard about it from a co-worker and got some integration tests up and running within a couple of hours. It's got built in request mocking and went open source earlier this year. The only real hiccup I've run into, so far, is the inability to set a User-Agent header for the session. Though really that's a minor gripe

That looks really neat! Thanks for sharing.

# ? Dec 8, 2017 16:12

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

The Dave posted:

Agreed on the latter, but it's gotten a lot easier for designers to come up with something and be consistent and share it. I'd expect any designer past the junior level to be able to do it.It should be a cross team discussion though because it's probably simpler to adapt an existing system if you have nothing to start with and lots of inconsistencies.

By hard and expensive I just meant that not having one is not just a matter of designers being dumb. Not that it required a PhD in Designology.

It requires actual work to make a consistent style guide.

# ? Dec 8, 2017 17:01

Capri Sun Tzu: Oct 24, 2017; by Reene

Pollyanna posted:

Is there some sort of consistent spacing/fontsize/padding/whatever design language out there that can be implemented organization-wide? I'm getting sick and tired of guessing at what kind of whitespace and proportions the designer wants and have them throw a million tweaks and !!!! I FOUND A BUG PLEASE FIX NOW NOW NOW !!!!s at me anyway.

If I'm being totally honest, I want to wave a magic wand and somehow make my life a lot easier, but failing that some frameworks and guides to follow will suffice.

The truth is you need to be half a designer yourself if you're going to do a lot of front-end work. Comps and style guides rarely cover everything you'll need them too, so you'll have to use your own intuition.

I specialize in front-end development and I love it, but I think I'm in the minority. Most of the dev's I know absolutely hate it.

# ? Dec 8, 2017 17:30

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

Capri Sun Tzu posted:

I specialize in front-end development and I love it, but I think I'm in the minority. Most of the dev's I know absolutely hate it.

What is the job title for the highest ranking front-end developer (something higher than "Senior Frond End Developer")?
Web Architect?
Front-End Architect?
Lord King of all Domains and Sub-Domains Because Titles are Arbitrary?

# ? Dec 8, 2017 17:49

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

The Merkinman posted:

What is the job title for the highest ranking front-end developer (something higher than "Senior Frond End Developer")?
Web Architect?
Front-End Architect?
Lord King of all Domains and Sub-Domains Because Titles are Arbitrary?

Still Not Good Enough To Be a Backend Developer

# ? Dec 8, 2017 17:53

Capri Sun Tzu: Oct 24, 2017; by Reene

Lumpy posted:

Still Not Good Enough To Be a Backend Developer

Them's fightin words, pal.

The Merkinman posted:

What is the job title for the highest ranking front-end developer (something higher than "Senior Frond End Developer")?
Web Architect?
Front-End Architect?
Lord King of all Domains and Sub-Domains Because Titles are Arbitrary?

Guy Who Makes Things That Are Coded Poorly But Look Awesome

# ? Dec 8, 2017 18:17

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

Capri Sun Tzu posted:

Guy Who Makes Things That Are Coded Poorly But Look Awesome*

* until you resize the window.

:v:

(Sorry, I'm in a goofy mood today)

# ? Dec 8, 2017 19:20

Capri Sun Tzu: Oct 24, 2017; by Reene

Lumpy posted:

* until you resize the window.

(Sorry, I'm in a goofy mood today)

C'mon holmes as if my designs aren't hella responsive.

# ? Dec 8, 2017 19:26

I R SMART LIKE ROCK: Mar 10, 2003; I just want a hug.; Fun Shoe

HardDiskD posted:

That looks really neat! Thanks for sharing.

No prob, this thread has helped me a ton over the years

The Merkinman posted:

What is the job title for the highest ranking front-end developer (something higher than "Senior Frond End Developer")?
Web Architect?
Front-End Architect?
Lord King of all Domains and Sub-Domains Because Titles are Arbitrary?

I�ve seen distinguished or principle used as a prefix to engineer or developer in mine and other corp orgs. It�s either that or they go into management

# ? Dec 8, 2017 19:57

Scaramouche: Mar 26, 2001; SPACE FACE! SPACE FACE!

Lumpy posted:

Still Not Good Enough To Be a Backend Developer

Hahaha! Definitely not empty-quoting this

# ? Dec 8, 2017 20:05

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

One last aside to the make a styleguide Chat, there is this aspect where professionals abdicate their responsibility in the face of stakeholders, and honestly, this is like an architect or builder making an unsound decision cause the stakeholder leaned on them.

As a designer, part of your JOB is ensuring that your work has visual consistency and is possible to maintain consistent.

As a developer, part of your JOB is to ensure work you are provided is well informed on its impact on budget/hours and technical debt, with alternatives or ideals provided that will optimise to minimise them while still delivering the requested features. Learning about and solving problems is your JOB, not a side thing you abdicate to others. It�s what separates you from a programmer who just gets told what to do, and a developer who�s essential to have an early seat at the table in planning and design phases.

# ? Dec 8, 2017 21:25

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

I�m just kinda falling into CSS/frontend framework roles and I cannot say I enjoy it, so chalk this up to not really enjoying the work. That, or I�m just bad at it, which is more likely.

# ? Dec 8, 2017 21:26

Adbot: ADBOT LOVES YOU

# ? Jun 6, 2024 03:34

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

Pollyanna posted:

I�m just kinda falling into CSS/frontend framework roles and I cannot say I enjoy it, so chalk this up to not really enjoying the work. That, or I�m just bad at it, which is more likely.

I think we're all blaming the designer for lack of specs/consistency though.

# ? Dec 8, 2017 21:32

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

«‹›362 »