The Web Design & Development Megathread

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

«‹›361 »

SixPabst: Oct 24, 2006

Munkeymon posted:

So you want the wrapped text to the right of the + without a layout change or are you seeing something that's not in the example?

Ideally like this. I'm more of a backend dev so apologies if this I'm not making a ton of sense.

Only registered members can see post attachments!

# ? May 13, 2016 18:34

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 16:22

chami: Mar 28, 2011; Keep it classy, boys~; Fun Shoe

mintskoal posted:

Ideally like this. I'm more of a backend dev so apologies if this I'm not making a ton of sense.

Seems like you can just give the <i> element a float: left to have it behave like a floated image like so.

VV flex is best, I am both anticipating and dreading updating my organization's sites to use it. Kind of excited to be messing around with grid too, but I haven't experimented with it like I have with flex.

chami fucked around with this message at 18:42 on May 13, 2016

# ? May 13, 2016 18:37

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

mintskoal posted:

It's basically this http://codepen.io/anon/pen/eZoWqW

Except that the + is actually from an internal icon font and renders the same height as the text <div>. I'm seeing 5px of padding on the first line of the div, but on the second line when the text wraps it's like the padding doesn't exist. I know this is by design but I'm not sure how to fix it aside from a hacky nbsp before the wrapped word.

Use flexbox and get rid of all that crazy positioning stuff.

http://codepen.io/anon/pen/zqXzBR

# ? May 13, 2016 18:38

Love Stole the Day: Nov 4, 2012; Please give me free quality professional advice so I can be a baby about it and insult you

mintskoal posted:

Hopefully a simple question. How do you control padding on wrapped text within a div?

Right now I have something like
code:
     This is a div that wraps with 10px of
left padding
I'd like it to render as
code:
    This is a div that wraps with 10px of
    left padding

Got it for you (and i also simplified a little as well): http://codepen.io/anon/pen/QNPgvG

# ? May 13, 2016 18:53

SixPabst: Oct 24, 2006

Lumpy posted:

Use flexbox and get rid of all that crazy positioning stuff.

http://codepen.io/anon/pen/zqXzBR

BINGO. Thanks a ton!

# ? May 13, 2016 19:51

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

I'm thinking of posting an ECommerce developer thread where I can bitch about Shopify, WooCommerce, OSCommerce, OpenCart, 3dCart, X-Cart, Volusion, NetSuite, Magento, etc etc.

ECommerce is also a bit weird because it's combination of database ETL, SEO, CRM, Cloud services, "traditional" HTML development, Marketplace interactions (Amazon, eBay, etc), and graphic design, often in the same developer or group of developers. Would you guys be interested in that, or has it already been tried and sunk without a trace? I looked for one but couldn't seem to find anything (Looked back to 2014). I've been posting some in the Wordpress thread, but it doesn't seem to move very quickly there, and also a lot of these platforms aren't actually on WordPress.

# ? May 13, 2016 21:04

BlackMK4: Aug 23, 2006; wat.; Megamarm

Lumpy posted:

Use flexbox and get rid of all that crazy positioning stuff.

http://codepen.io/anon/pen/zqXzBR

BUT IE9.

# ? May 16, 2016 00:04

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Scaramouche posted:

I'm thinking of posting an ECommerce developer thread where I can bitch about Shopify, WooCommerce, OSCommerce, OpenCart, 3dCart, X-Cart, Volusion, NetSuite, Magento, etc etc.

I think it's totally OK to bitch about it here. I don't think anyone posts about e-commerce it enough that a whole thread would stay visible.

Also you missed off Prestashop :shepicide:

BlackMK4 posted:

BUT IE9.

Sometimes it is OK to hate on minorities.

# ? May 16, 2016 00:24

BlackMK4: Aug 23, 2006; wat.; Megamarm

I wish. Our QA department tests for IE9 despite all prayers of us leaving it dead.

# ? May 16, 2016 00:56

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

v1nce posted:

I think it's totally OK to bitch about it here. I don't think anyone posts about e-commerce it enough that a whole thread would stay visible.

Also you missed off Prestashop

Ok, then let me get my bitchy pants on. Ah yeah, nice and smooth.

Shopify: Really really smooth implementation of a general "one size fits all" shop for relatively low SKU counts, especially for white box internally branded/self-made goods. Don't fit inside that mold? Well too fuckin bad for you. Example: Brand/Manufacturer. Sure they exist... kind of... as a repurposed "collection" object. But it's so butt-fuckingly stupid how they do them. Want to define all your brands ahead of time before doing an import? Sorry, a Brand can only exist if a product has been created that uses it. Create a collection named after a brand anyway? Congratulations, now you have two of them, except the second is almost completely useless. Want to delete a Brand? Sorry, you can only disassociate all products from it and then it magically disappears. Collections themselves are weird in the same way; you can have a collection that has members based on either A)regex style rules (e.g. if ProductTitle CONTAINS "Ford F150") or B)by manual assignment (e.g. check a box that says this "Ford F150" belong to Collection X at the product level). Want to change to regex style from manual or vice versa later? Too loving bad. Delete the Collection and start over.

It's like they decided they wanted to get away from spreadsheet style classification and just make it "easy", except it isn't easy, it's incredibly stupid. It's comparable to PHP style weak evaluation; if you import a collection/value that's off by one character (e.g. Ford Trucks versus FORD Trucks) there's no error. There's just two collections now. And good luck telling them apart! Oh you want to combine them? You can't. Delete the "bad" collection and start over. Every single goddamn thing happens with clicking on things, usually at the granular product level. I'm not some super genius, but when you're dealing with more than a dozen products you want some kind of "power" tools to do taxonomy, classification, minor edits, etc etc. And here you can't, instead its just a grinning idiot web-based GUI that will happily let you click your arm off defining and assigning things when you could do the equivalent for thousands of products with a single line of SQL.

That's not even getting into very basic things that have be handled by external "plugins". Jesus christ man, this is a paid product. And all the plugins are on a $/month model. Want to be able to charge customers on a monthly/subscription model? That's an extra $20/mo please. I've written over 20 different custom payment gateway integrations; it's often just 4-8 extra lines of friggin code if the payment provider supports tokenization! A good "theme" costs more than twice what a good wordpress theme costs and it does less, just because it's all in liquid bullshit instead of php.

Shopify is so good at the marketing, order handling, basic config, and management but completely drops the ball on any kind of product configuration beyond "here is a picture and a price" it's not even funny.

# ? May 16, 2016 03:10

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

I am an ~~incompetent~~ inexperienced web dev and in Wordpress I'm trying to basically take wp-admin/widgets.php and smoosh it into a Plugin options page so that my client can:

1. Go to /wp-admin
2. Click the Super Admin tab on the left
3. Drag and drop widgets and change their order (like in Customize -> Widgets but the front-page is one big sidebar area)
4. Edit Sass code corresponding to each widget in a little box with the other widget options

Right now I've got my options page nicely setup but I'm having trouble getting wp_list_widget_controls to spawn the nice form like it does in widgets.php

Page Builder is a sidebar registered in functions.php like so:

code:

register_sidebar( array(
		'name'          => esc_html__( 'Page Builder', 'project-name' ),
		'id'            => 'page-builder',
		'description'   => '',
		'before_widget' => '<aside id="%1$s" class="widget %2$s">',
		'after_widget'  => '</aside>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );

And in the options page <?php wp_list_widget_controls( 'page-builder', 'Page Builder' ); ?> spits out nothing.

I've messed with var_dumping wp_get_sidebars_widgets() and $GLOBALS['wp_registered_sidebars'] and so I can get the sidebars and widgets but I'm thinking there must be a way to re-use most of the code in wp-admin/widgets.php right? The goal being for the options page to populate a sidebar and for the front-page.php template to just full screen shoot out that sidebar. Each widget is 100% width and they will simply stack on top of each other.

I will keep tinkering but any guidance you might have would be much appreciated

I found this tutorial which explicitly defines a function "webitect_widget_control()" where the widget is registered. But clearly my widget (Lone Image in the example above) already has controls right? Since they're working in Appearance -> Widgets?

Edit -- I added a couple details

awesomeolion fucked around with this message at 06:27 on May 16, 2016

# ? May 16, 2016 06:14

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

awesomeolion posted:

I am an ~~incompetent~~ inexperienced web dev and in Wordpress

There is a dedicated WordPress thread that you will likely get much better help from than this one. If I was not phone posting, I'd link it for you, but I am. The good news is that is it is usually on the first page of threads.

# ? May 16, 2016 12:32

awesomeolion: Nov 5, 2007; "Hi, I'm awesomeolion."

Lumpy posted:

There is a dedicated WordPress thread that you will likely get much better help from than this one. If I was not phone posting, I'd link it for you, but I am. The good news is that is it is usually on the first page of threads.

Thanks Lumpy! Posted there

Edit -- problem was I needed to include /wp-admin/includes/widget.php in my plugin options page and all is well

awesomeolion fucked around with this message at 14:19 on May 17, 2016

# ? May 16, 2016 13:53

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

v1nce posted:

Also you missed off Prestashop

And Drupal Commerce :smithicide:

# ? May 17, 2016 12:01

fuf: Sep 12, 2004; haha

I have a client of a client who just got fined �800 for accidentally using a licensed image on their website full of images. It was a legit mistake on their part.

Now they are asking if there's a service which will somehow check all the images on their site and see if they're under copyright somewhere.

There's no way that's possible, right? Like this imaginary service would have to somehow identify every image and then check it against a whole bunch of different databases of copyrighted images. Just doesn't seem feasible.

Seems like the only way to do it would be for them to go through each image and either figure out where they got it from originally or do a bit of detective work with a reverse google image search to work out its origin. Right?

# ? May 17, 2016 15:20

MrMoo: Sep 14, 2000

I believe TinEye was created to do that.

# ? May 17, 2016 15:44

fuf: Sep 12, 2004; haha

MrMoo posted:

I believe TinEye was created to do that.

Intriiiiiguing. I wonder if their API actually tries to give copyright info or if it just gives back a list of URLs where the image appears.

Anyway something to look into, thanks.

# ? May 17, 2016 16:44

Impotence: Nov 8, 2010; Lipstick Apathy

fuf posted:

Intriiiiiguing. I wonder if their API actually tries to give copyright info or if it just gives back a list of URLs where the image appears.

Anyway something to look into, thanks.

afaik the safe way would be unless you somehow have positive written documentation stating that you can use it, just assume it's copyrighted

# ? May 17, 2016 16:56

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

I generally avoid any possible problems like that by only using vendor/internal supplied images, but I'm coming from an ecommerce background where pictures of products etc. are generally readily available. All too often I'll have a client google up some nice pictures and say "hey put these on the site" and then I'll link them some unauthorized use lawsuits and generally they'll shut up. Same with "free" fonts really, though I haven't heard of anyone getting busted for those.

# ? May 17, 2016 18:54

My Rhythmic Crotch: Jan 13, 2011

A while back I asked if this was a good place to get some UI feedback, so here goes.

http://cyantist.org/test/

What is this? It's a way for little mom & pop shops to get their businesses on the internet. This is a replacement for their crummy excel sheet invoices, quotes, and bills. It is not intended to be Enterprise Grade.

On this test, I do not have any nav bars, menus, logins etc, as I wanted to focus on a "do everything" screen. So I want to see if you are able to:

- Edit your business info.
- Edit and create customers.
- Change the selected customer.
- Edit and add more line items.
- Create more items.
- Edit shipping, tax, discount, etc.

This will not save anything to the server, so edit data as you please. The downloads are just placeholders right now.

tldr: Just do whatever you want and post your trip report.

edit: I almost forgot the best part, if the backend goes down you will get this awesome fail elf:

My Rhythmic Crotch fucked around with this message at 05:40 on May 18, 2016

# ? May 18, 2016 05:34

Anony Mouse: Jan 30, 2005; A name means nothing on the battlefield. After a week, no one has a name.; Lipstick Apathy

I think critique is supposed to go in the web design critique thread but since it's pretty much dead I guess I don't blame you for asking here.

A few quick notes:

The "paid/unpaid" buttons are very confusing. My immediate instinct was that they were some kind of filter to show paid/unpaid rows or something. Turns out they apply to the whole invoice??? (side note: clicking those two buttons is buggy as hell if you have open/editable line items active)

Related to above, putting the PDF/excel and download options next to paid/unpaid options doesn't make a ton of sense. The paid/unpaid options relate to changing the status of the invoice. The download options have nothing to do with paid/unpaid, so they should not be grouped together like that. Additionally, all of those elements' positioning in the MIDDLE of the page makes no sense at all. They're directly above the line items which immediately gave the impression that they were related to filtering/editing the line items, which they aren't at all. Off the top of my head, paid/unpaid might be better at the top or bottom with an accompanying "INVOICE STATUS:" header, while the download options should live at the bottom of the page below everything (because it's likely one of the last interactions you'll do on the page, and people generally process documents from top to bottom.)

When editing a line item, I was very confused that changing part no. also changed description and vice versa. I got it after a few tries (you're just selecting an inventory item for the line item either via part no. or description) so I guess if someone is using this tool regularly it would make more sense.

Maybe have a "save all changes" button that resolves all active edits. Having to manually click "save" multiple times is a pain. Likewise for cancel.

Edit: just saw your mention of editing tax, discounts etc. I had no idea I could edit those until I reread your post. Something as simple and dumb as a visible edit/pencil icon next to those would help. Otherwise it's easy to miss because some elements in that group (subtotal, grand total) are not editable but the others are and there's no obvious differentiation.

quote:

Y helo thar

Anony Mouse fucked around with this message at 08:11 on May 18, 2016

# ? May 18, 2016 08:06

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

Biowarfare posted:

afaik the safe way would be unless you somehow have positive written documentation stating that you can use it, just assume it's copyrighted

Or stop using Google Image Search to source your images

# ? May 18, 2016 12:14

My Rhythmic Crotch: Jan 13, 2011

Anony Mouse posted:

Good feedback

Thank you for taking the time to write this up. This does cover a lot of the concerns I had with the layout of stuff on the page. I had not thought of having a save all / cancel all feature.

Some of the elements (Paid / Unpaid) have tooltips that give a tidbit of info, and I was also hoping the cursor changing would indicate "this is an editable item". (But then the cursor doesn't sync with paid/unpaid yet :v:

) I'll have to think carefully about ways to indicate how things work. In the end a help page or tutorial video or something may be unavoidable.

My Rhythmic Crotch fucked around with this message at 15:30 on May 18, 2016

# ? May 18, 2016 15:28

n4: Jul 26, 2001; Poor Chu-Chu : (

I'm a bootcamp grad starting a new front-end job soon, and the one thing I'm not super confident in is my CSS skills. I get the language, know a handful of CSS tricks and techniques, and I'm sure I could make a pixel-perfect copy of any design given to me given enough time. But CSS is just not something I work on/study/practice regularly. Anyone have any advice for getting better or really mastering CSS? I'm sure I"ll learn it at the job but I'd like to go beyond that and make sure my CSS knowledge is more than just adequate.

# ? May 18, 2016 17:42

vardyparty: May 16, 2016

n4 posted:

I'm a bootcamp grad starting a new front-end job soon, and the one thing I'm not super confident in is my CSS skills. I get the language, know a handful of CSS tricks and techniques, and I'm sure I could make a pixel-perfect copy of any design given to me given enough time. But CSS is just not something I work on/study/practice regularly. Anyone have any advice for getting better or really mastering CSS? I'm sure I"ll learn it at the job but I'd like to go beyond that and make sure my CSS knowledge is more than just adequate.

You'll learn as you go by solving the problem in front of you. After you google "how to vertically center a div" for the 999th time it will finally sink in. You can also look at bootstrap docs to see how they implement things and emulate those solutions with your own twists.

LESS and SASS preprocessors just make your life easier but the fundamentals are the same.

If your new job has an existing code base you can just steal their styling techniques. Chrome dev tools -> inspect element is KEY

# ? May 18, 2016 18:31

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

vardyparty posted:

You can also look at bootstrap to see how to bloat the ever living crap out of everything....

ftfy.

But for reals, if you are good on this stuff:

- What box-sizing is.
- Margins: how do they overlap and stack.
- Know how to position elements relative to the page and to their parent.
- Learn what an em is.
- FLEXBOX
- What's "expensive" to animate in CSS, what isn't
- How *do* you animate with CSS anyway? (keyframes and transition)

Then you are all set, and you'll be able to figure out what you need to figure out as you go.

# ? May 18, 2016 19:07

Depressing Box: Jun 27, 2010; Half-price sideshow.

Ok, I just started using Swagger, and it seems like the best? I can use annotations to document the API directly in the code:

which are turned into interactive API docs:

and parsed by a JavaScript client, standardizing all my API calls:

Is anyone else using Swagger? Any advice? At this point I'm tempted to make it a requirement in all my future API-bearing projects.

# ? May 19, 2016 00:28

MrMoo: Sep 14, 2000

It is pretty swell, barely any competition worth anything. Built into MSVC 2015 under a retarded long Azure product name.

Supported by a lot of sites and similar functionality in Google's API Explorer.

Kinda slow moving standard to add all the nice features for auto-generated APIs, getting there.

# ? May 19, 2016 00:38

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

Depressing Box posted:

Is anyone else using Swagger? Any advice? At this point I'm tempted to make it a requirement in all my future API-bearing projects.

Used it. It's great. The "doc/explorer" being interactive is fantastic for authoring an API in tandem with someone trying to use it, or even just poor-mans spec'ing of the whole API before you drop real code.

vardyparty posted:

After you google "how to vertically center a div" for the 999th time it will finally sink in.

Yeah but seriously gently caress vertical centering: http://howtocenterincss.com/

# ? May 19, 2016 04:56

MrMoo: Sep 14, 2000

Stay the hell away from OData, what a mess.

# ? May 19, 2016 21:54

kedo: Nov 27, 2007

Anyone know much about accessibility? I have a person whose entire job is accessibility breathing down my neck on a project and some of the stuff she's talking about seems a little extreme/pulled out of her rear end. Specific example: is there a contrast ratio requirement for the color of a keyboard focus visual indicator? I have items with focus receiving a big loving 5px colored border, but now this lady is demanding it be 4.5:1 everywhere. I thought contrast ratio requirements only applied to text?

I don't really care per se, but I'm annoyed and need to start drawing some lines somewhere otherwise I may as well just make the site 22pt Times New Roman on a white background with next to zero styles of any sort.

# ? May 20, 2016 22:22

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

kedo posted:

Anyone know much about accessibility? I have a person whose entire job is accessibility breathing down my neck on a project and some of the stuff she's talking about seems a little extreme/pulled out of her rear end. Specific example: is there a contrast ratio requirement for the color of a keyboard focus visual indicator? I have items with focus receiving a big loving 5px colored border, but now this lady is demanding it be 4.5:1 everywhere. I thought contrast ratio requirements only applied to text?

I don't really care per se, but I'm annoyed and need to start drawing some lines somewhere otherwise I may as well just make the site 22pt Times New Roman on a white background with next to zero styles of any sort.

Ask to see that in the 508 guidelines because you want to ensure you are compliant.... (hint: it's not there, at least I read it as "you have to show focus somehow") That said, it's better to be OVERCOMPLIANT than not. And there's nothing wrong with 22px type :corsair:

# ? May 20, 2016 23:19

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

Yeah, ask for guidelines. Accessibility has certain standards, but then beyond that it becomes more subjective (what is usable?) so an accessibility expert is only valuable if they're working with you and not against you.

# ? May 20, 2016 23:38

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

Is there like a site to test accessibility compatibility like W3C validator or something? I haven't really thought about it

# ? May 21, 2016 00:03

spacebard: Jan 1, 2007; Football~

Scaramouche posted:

Is there like a site to test accessibility compatibility like W3C validator or something? I haven't really thought about it

The university of Illinois has a accessibility check and guidelines page that I find useful: http://fae20.cita.illinois.edu

# ? May 21, 2016 01:33

v1nce: Sep 19, 2004; Plant your brassicas in may and cover them in mulch.

kedo posted:

Anyone know much about accessibility?

Yes. The best way to educate about accessibility is to digest the standards you want to follow (eg. WCAG 2.0 AA) into guidelines your developers can glance at. Examples are a must.
They (you) ain't ever gonna read the whole document, or the 4 paragraphs related to how to do titles and alts right.

kedo posted:

Specific example: is there a contrast ratio requirement for the color of a keyboard focus visual indicator? I have items with focus receiving a big loving 5px colored border, but now this lady is demanding it be 4.5:1 everywhere. I thought contrast ratio requirements only applied to text?

Correct.

quote:

WCAG 2.0 level AA requires a contrast ratio of 4.5:1 for normal text and 3:1 for large text (14 point and bold or larger, or 18 point or larger).

We solve this problem by following WCAG 2.0 AA in our standard theme, but letting clients theme the rear end off the site. Most of the time that breaks the AA standard, but it means we start off in the right position and it's up to the client to maintain it.

Scaramouche posted:

Is there like a site to test accessibility compatibility like W3C validator or something? I haven't really thought about it

I haven't used them but we were leaning towards these about a year ago:
http://pa11y.org/
http://www.tenon.io/

# ? May 21, 2016 02:40

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

v1nce posted:

I haven't used them but we were leaning towards these about a year ago:
http://www.tenon.io/

Wow, we passed 58 out of 62 tests. I guess buying a premium theme paid off after all. I wonder how rigorous the test is though, since half of the 11 problems are the same ones W3C reports.

# ? May 21, 2016 03:03

Impotence: Nov 8, 2010; Lipstick Apathy

Scaramouche posted:

I wonder how rigorous the test is though,

60/62 on a dev site

..it has a title

..<html lang="en">

parser seems kind of broken..

Impotence fucked around with this message at 03:36 on May 21, 2016

# ? May 21, 2016 03:33

kedo: Nov 27, 2007

Thanks all, I appreciate the feedback. We're shooting for WCAG 2.0 AA and I have indeed read some (clearly not all) of the guidelines. That's why I was confused... a lot of this is seemingly coming from nowhere.

v1nce posted:

Correct.

I knew it! Thanks man.

# ? May 21, 2016 15:57

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 16:22

nexus6: Sep 2, 2011; If only you could see what I've seen with your eyes

What genius at Wordpress thought it was a great idea (and still is) to store absolute URLs in the database? How are you supposed to set up a separate staging/test/preview site without doing a search and replace on the entire database?

Is their development philosophy "gently caress it, we'll do it live"?

# ? May 23, 2016 14:30

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

«‹›361 »