The Web Design & Development Megathread

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

«‹›361 »

Impotence: Nov 8, 2010; Lipstick Apathy

roots.io is the only way i've ever installed or used wordpress because gently caress that noise

the defaults are great and they remove the annoying wp-* folders and let you update via composer

# ? Jun 5, 2016 11:40

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 15:05

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

What's the most commonly accepted way to handle CSS/styling for a React app? The new project I'm on is going to use React for its front-end, so I want an easy and manageable way to style it - I'm no CSS wizard.

# ? Jun 5, 2016 18:37

The Fool: Oct 16, 2003

Pollyanna posted:

What's the most commonly accepted way to handle CSS/styling for a React app? The new project I'm on is going to use React for its front-end, so I want an easy and manageable way to style it - I'm no CSS wizard.

I'm dealing with the same issue myself. I just ended shoehorning bootstrap into this project because it's just a personal site and who cares. But there are a number of ui frameworks that specifically support react.

This stack overflow answer is pretty complete:
http://stackoverflow.com/questions/23380903/existing-ui-libraries-to-use-with-react-js

# ? Jun 5, 2016 18:53

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

Pollyanna posted:

What's the most commonly accepted way to handle CSS/styling for a React app? The new project I'm on is going to use React for its front-end, so I want an easy and manageable way to style it - I'm no CSS wizard.

I've mostly used regular CSS (via SCSS) with BEM naming conventions and just put classNames on the components, with the occasional inline style for highly dynamic stuff.

If you need something more closely integrated, you could split your styles up into per-component files and use something like Webpack's style loader or extract text plugin to get them onto the page.

I've also heard positive things about Aphrodite, but I haven't had a chance to try it out yet.

EDIT: If you mean a front-end framework, The Fool's link looks pretty thorough, and I can personally vouch for React Bootstrap's usefulness when quickly slapping together a UI.

Depressing Box fucked around with this message at 19:03 on Jun 5, 2016

# ? Jun 5, 2016 18:58

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

There are a ton of minimal css frameworks out there now as an alternative to bootstrap. I'm really liking Bulma lately but there are plenty of others. There is really very little need to go and use css modules or css in js, especially for a small project.

# ? Jun 5, 2016 23:15

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

I've been using Skelton for a personal project.

It's pretty nice for a minimal baseline framework.

http://getskeleton.com/

# ? Jun 6, 2016 02:10

MisterZimbu: Mar 13, 2006

I would gladly give up my phones and tablets in exchange for everyone else's phones and tablets being destroyed so that I never have to do another responsive layout again.

# ? Jun 6, 2016 19:16

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

MisterZimbu posted:

I would gladly give up my phones and tablets in exchange for everyone else's phones and tablets being destroyed so that I never have to do another responsive layout again.

90% of my responsive layout code:

code:

.outer {
    max-width: 35em;
    padding: 0 4em;
}

Then a few rules to change flex direction on things that need it. Obviously for things where you have to radically alter the design for some reason that won't fly, but I have found designing small screen first to let me have very little CSS accomplish most of my responsive needs.

# ? Jun 6, 2016 19:30

Xik: Mar 10, 2011; Dinosaur Gum

MisterZimbu posted:

I would gladly give up my phones and tablets in exchange for everyone else's phones and tablets being destroyed so that I never have to do another responsive layout again.

100% disagree.

Responsive is the magic bullet that puts down the majority of terrible design ideas that come out of marketing or [contracted design firm of the month].

Hey, we were thinking of having this spaghetti monster fly in from the side of the screen holding our logo and say "sign up for our newsletter"
Would be a disaster for mobile devices

We were thinking of replacing all the text content on this page with a big image diagram
How would that work on mobile

I was just wondering if you could adjust this thing here...
RESPONSIVE

# ? Jun 7, 2016 00:59

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

Yeah, it feels like responsive is one of the few things that finally got developers a seat at the table when it came to maybe raising implementation concerns 'before' getting sign off on whatever the designers dreamed up, mocked up in the one true resolution only.

# ? Jun 7, 2016 03:46

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

Related to my last question: does anyone here have experience with Phoenix, and with the Ecto data module in particular? I'm having trouble understanding how to use it to accomplish something.

I have an API for CRUDding an "Asset" model. A typical POST will contain this data:

JSON code:

{
  "item_number": "ITEM1",
  "name": "Sample Asset",
  "description": "A sample asset.",
  "type": "print",
  "url": "http://www.example.com",
  "tags": [
    "sample asset",
    "arbitrary tag"
  ]
}

There are also "Tag" models that exist in the database, and a join model AssetTag. With this incoming block of JSON, I want to iterate through every entry in "tags" and either find a matching Tag if it exists, or create one if it does not, and add AssetTags for each one if they don't already exist. Then I'd validate, cast, etc.

I understand more or less how I'd do this in Rails, but with the way that Ecto works, this isn't really something that can be done piecemeal. From what I can tell, I'd have to do something like this:

code:

def changeset(model, params \\ :empty) do
  model
  |> load_or_create_tags
  |> create_asset_tags
  |> cast(params, @required_fields, @optional_fields)
end

def load_or_create_tags(model) do
 # do stuff here
end

def create_asset_tags(model) do
 # do stuff here
end

but this doesn't feel like very clean code w/r/t what modules know about what other modules 'n poo poo like that. I'm not sure how the changeset should change or what I need to do to accomplish this. Anyone familiar with the framework that can help me?

edit: Here's my SO question: http://stackoverflow.com/questions/37660457/customized-association-handling-in-phoenix . No responses yet tho.

# ? Jun 7, 2016 12:49

fuf: Sep 12, 2004; haha

Lumpy posted:

90% of my responsive layout code:
code:
.outer {
    max-width: 35em;
    padding: 0 4em;
}
Then a few rules to change flex direction on things that need it. Obviously for things where you have to radically alter the design for some reason that won't fly, but I have found designing small screen first to let me have very little CSS accomplish most of my responsive needs.

Where'd that 35em figure come from and why not do max-width: 100% ?

# ? Jun 7, 2016 13:05

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

fuf posted:

why not do max-width: 100% ?

Reading text that spans the whole screen width of a modern laptop get uncomfortable. It's saving users form themselves.

# ? Jun 7, 2016 13:54

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

Actually, now I'm not even sure if I'm taking a good approach with this. Should Tags be models themselves, or should I do something really simple like just having tags be a string or something? How would I search or filter or or enforce uniqueness/uniformity in that case? This is confusing.

# ? Jun 7, 2016 13:58

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

fuf posted:

Where'd that 35em figure come from and why not do max-width: 100% ?

As Munkeymon said, it's to limit the maximum width of a line so text remains easy to read on large screens. With that rule, I don't need any breakpoints at all: small screens get filled with some space on left and right, and large screens can't get so big copy is hard to read. Once I gave up the idea of "I must control how big everything is at all resolutions" and let things be as big as they want with sane mins and maxes, responsive got a whole lot easier, and I suspect, a whole lot more responsive.

# ? Jun 7, 2016 14:04

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

Actually yeah let's talk about tagging. What's the best way to handle it? I know it depends on the use case, but I don't actually know my options in that sense. I read this series on tagging in Postgres and it seems to suggest a text array with a GIN index, but 1. I don't understand how to implement that and 2. I don't know if JSONB has gotten good enough to handle tagging to be a decent alternative. Plus, I don't know how you would handle getting an index of tags and filtering such.

:psyduck:

This is way harder than I thought.

Pollyanna fucked around with this message at 14:21 on Jun 7, 2016

# ? Jun 7, 2016 14:17

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

Lumpy posted:

As Munkeymon said, it's to limit the maximum width of a line so text remains easy to read on large screens. With that rule, I don't need any breakpoints at all: small screens get filled with some space on left and right, and large screens can't get so big copy is hard to read. Once I gave up the idea of "I must control how big everything is at all resolutions" and let things be as big as they want with sane mins and maxes, responsive got a whole lot easier, and I suspect, a whole lot more responsive.

but all that unused whitespace :qq:

I thought I had posted this, but I guess not...
Since I fixed my dumb copy/paste mistake I have a question about jQuery Validate.
I have two password fields, one for the password and another to confirm. Can I make it where if the confirm is blank, it just gives it the error message, but if it isn't blank AND they don't match, that BOTH inputs get cleared?

# ? Jun 7, 2016 14:36

fuf: Sep 12, 2004; haha

Lumpy posted:

As Munkeymon said, it's to limit the maximum width of a line so text remains easy to read on large screens. With that rule, I don't need any breakpoints at all: small screens get filled with some space on left and right, and large screens can't get so big copy is hard to read. Once I gave up the idea of "I must control how big everything is at all resolutions" and let things be as big as they want with sane mins and maxes, responsive got a whole lot easier, and I suspect, a whole lot more responsive.

Ah ok, that makes sense. For some reason I thought that was a mobile-only rule inside a media query or something.

# ? Jun 7, 2016 14:45

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

The Merkinman posted:

but all that unused whitespace

I thought I had posted this, but I guess not...
Since I fixed my dumb copy/paste mistake I have a question about jQuery Validate.
I have two password fields, one for the password and another to confirm. Can I make it where if the confirm is blank, it just gives it the error message, but if it isn't blank AND they don't match, that BOTH inputs get cleared?

You'll probably have to roll your own validation method for that https://jqueryvalidation.org/jQuery.validator.addMethod/

# ? Jun 7, 2016 15:24

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

Scaramouche posted:

This is a general question that isn't quite in any one discipline so I figured I'd ask here. I've a client who wants to embed a panorama 360 noscope picture on their site. I've taken the picture with my Nexus 6p, and it looks pretty sweet, but it seems like there's a lot of ways to do this, including:
- A wordpress plugin (it's a wordpress site) such as: https://wordpress.org/plugins/tags/panorama
- Hack together something with Google Maps: http://www.labnol.org/internet/design/embed-large-pictures-panoramas-web-pages-google-maps-image-viewer/2606/
- A prettier hack of the above: http://streetview-embed.appspot.com/
- Embed a Google+ post as per (looks lame) http://photography.tutsplus.com/tutorials/how-to-embed-google-photo-spheres-on-your-blog-or-website--cms-24980
- Use yet another JS include/library as per the bottom of here: http://www.labnol.org/internet/embed-panorama-images/25510/

The problem being, this is a panorama I've taken on my phone; it doesn't live in Google maps, and I'm not sure I want it to. Do any of you guys have any experience want to chime in what the "best" method is?

In case anyone was curious how I ended up doing this I took a more circuitous route.
- Uploaded the photosphere/panorama to Google Maps at the lat/long linked to my work Gmail account
- Waited about a week until I got a "Thanks for adding photos to Google Maps!" email that indicates the photo is live on Maps
- Follow the link from the email to my photo, saving the URL
- Extract the pano id from resulting giant messy link. First, grab the string between !1s and !2e (not including those variables). Then, add F: to the front of that string. It'll probably be URL encoded, so replace the %2F with forward slash /
- Then go here https://developers.google.com/maps/documentation/embed/start and put your carefully extracted pano id in the "Custom Panorama ID" field under the "Show Street View or a Custom Panorama" accordion/tab. Click off the text box, the page will automatically check if the supplied Pano ID is valid. If a picture appears in the frame on the right it worked. If not, you probably screwed up getting the value between !1s and !2e, forgot the 2F slashes, or forgot the F: (the latter of which you are never told is necessary).
- Click the Looks Good! button to continue. Now it wants an API key.
- If you don't have one, go here while logged into a Gmail account: https://console.developers.google.com/
- Create New Project (top right somewhere), call it whatevs you want
- Then enable the API; the one you want is Google Maps Embed API. You might need others since I had a bunch of others ones active, but it didn't really work until I enabled that one.
- Let Google Enable it, and then click Credentials. Enter a wacky code and copy out the resulting API key
- Way back at https://developers.google.com/maps/documentation/embed/start (you didn't close it did you?) enter the API Key you were just given
- Click Done and copy+paste the resulting iframe src onto your page.

Notes: What a loving pain in the rear end.

# ? Jun 7, 2016 19:38

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

I wouldn't expect anything less for a Google API thingy.

# ? Jun 7, 2016 20:12

MisterZimbu: Mar 13, 2006

Lumpy posted:

90% of my responsive layout code:
code:
.outer {
    max-width: 35em;
    padding: 0 4em;
}
Then a few rules to change flex direction on things that need it. Obviously for things where you have to radically alter the design for some reason that won't fly, but I have found designing small screen first to let me have very little CSS accomplish most of my responsive needs.

Yeah, I'm guessing things would be alot easier if I were going completely from scratch. I find the main complications aren't necessarily with responsive design itself but:

Bootstrap Navbar being awful to work with (assuming this will work better w/ BS4 & Flexbox?)
Being the 4th developer to work on laying out the template (so I'm not even doing the main skinning, just getting everything to match the comps closely; the last 1% of work that takes the last 90% of time)
DotNetNuke

# ? Jun 7, 2016 21:45

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

MisterZimbu posted:

Bootstrap

Being the 4th developer to work on laying out the template

DotNetNuke

Strike 3, you're out! :suicide:

# ? Jun 8, 2016 00:39

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

The BS navbar does not get better with 4 tbh, I've ended up writing my own for every BS4 site I've done. Like, flexbox is great, but it's shoehorned into the preexisting navbar structure v0v

# ? Jun 8, 2016 08:43

RobertKerans: Aug 25, 2006; There is a heppy lend
Fur, fur aw-a-a-ay.

Pollyanna posted:

... Ecto tags stuff

Are you not overthinking this? You should be able to do this in a very similar manner to Rails; Ecto 2 supports many_to_many, so you would normally just do it the same way - Tags model, AssetTags model, tags belongs_to, Asset and Tag have a matched many_to_many and joins_through. You preload the associations, then load the changeset, then can use put_assoc to set.

http://stackoverflow.com/questions/35529720/elixir-ecto-2-create-many-to-many-association#answer-35684320

# ? Jun 8, 2016 09:16

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

RobertKerans posted:

Are you not overthinking this? You should be able to do this in a very similar manner to Rails; Ecto 2 supports many_to_many, so you would normally just do it the same way - Tags model, AssetTags model, tags belongs_to, Asset and Tag have a matched many_to_many and joins_through. You preload the associations, then load the changeset, then can use put_assoc to set.

http://stackoverflow.com/questions/35529720/elixir-ecto-2-create-many-to-many-association#answer-35684320

I guess the question I have is how I handle the conditional Tag and AssetTag creation prior to the Asset creation with changesets and the way that Ecto does persistence. It seems to me that you have to do it all at the same time, and you can't really do persistence sequentially. Meaning, I can't do two creates in a single action. Or do I not understand how Ecto works?

I really want to use Phoenix, since I think its channels are a good fit for the kind of requirements this project will need (live tag searching, etc.), but Ecto is hard to wrap my head around. Either way, I'm gonna prototype this in Rails for the basic functionality before moving back to Phoenix. I need a demo to show.

# ? Jun 8, 2016 14:43

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

The front end guys I work with keep laying out content in grids by floating them left then adding in matchHeight.js so each grid item is the same height and weird gaps don't appear.

Is this the best approach? I don't like the idea of adding an additional javascript library just for this, especially since it runs after the page has been drawn. Seems pretty lazy. Is there a better way? Flexbox? Doesn't that have IE support issues?

# ? Jun 8, 2016 15:12

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

nexus6 posted:

The front end guys I work with keep laying out content in grids by floating them left then adding in matchHeight.js so each grid item is the same height and weird gaps don't appear.

Is this the best approach? I don't like the idea of adding an additional javascript library just for this, especially since it runs after the page has been drawn. Seems pretty lazy. Is there a better way? Flexbox? Doesn't that have IE support issues?

Yes, Flexbox does this "natively". As for support: http://caniuse.com/#search=flexbox

# ? Jun 8, 2016 15:22

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

Lumpy posted:

Yes, Flexbox does this "natively". As for support: http://caniuse.com/#search=flexbox

Goddammit

# ? Jun 8, 2016 15:25

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

nexus6 posted:

Goddammit

I see you're feeling my pain.

I have to support IE8 and IE11 too. Which kills the use of WebSockets and the like.

# ? Jun 8, 2016 16:52

lunar detritus: May 6, 2009

MisterZimbu posted:

DotNetNuke

drat, I would have thought that died about 10 years ago.

# ? Jun 8, 2016 23:41

ddiddles: Oct 21, 2008; Roses are red, violets are blue, I'm a schizophrenic and so am I

nexus6 posted:

Goddammit

I was going to switch to flexbox for a project layout, then realized I'd have to write a bunch of fallback stuff for IE users and said gently caress that.

Maybe in a few years...

# ? Jun 9, 2016 00:00

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

ddiddles posted:

I was going to switch to flexbox for a project layout, then realized I'd have to write a bunch of fallback stuff for IE users and said gently caress that.

Maybe in a few years...

If you support supported IE versions (which is 11+) then you can use it in a vast majority of layouts. The bugs in IE 11 are generally edge cases.

# ? Jun 9, 2016 01:12

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

Lumpy posted:

If you support supported IE versions (which is 11+)

What kind of fantasy world is this?

:smith:

# ? Jun 9, 2016 09:37

Heskie: Aug 10, 2002

Also if you use Autoprefixer (or similar) you can support IE10. But I think that's about as good as it gets.

# ? Jun 9, 2016 12:33

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

nexus6 posted:

What kind of fantasy world is this?

Funny how even after MS drops support for their less than good browsers, we still do. :smith:

indeed.

# ? Jun 9, 2016 13:12

Fluue: Jan 2, 2008

I've got an API consumption question:

The API in question is built to be asynchronous write, synchronous read. The flow to create and update an object is like this:

1. POST to API with some info to create the object. The API returns a 200 and an identifier in the body that I will use to update that resource.
2. To update the resource, I have to PATCH pieces of data to it (via /resource/{resource_id} ) and that gives me an empty 202 response (by design).
2a. The API, once it receives a PATCH request, then adds the data to its write queue.
2b. Once the API's backend services complete the write, it then sends a postback to an endpoint I defined in the Header of my PATCH request in Step 2.

3. If I want to get the data already written to the resource, I can use a GET request and it will return the resource with all fields as either null defaults or with the data I have sent

Because I have to wait for a postback, if I make a GET request after a PATCH, I am liable to getting back a response that is missing the data I just PATCHed over.

Does this async write / sync read design seem to go against the idea of how REST should work? It's difficult to work with because of the postback I need to wait for, and that postback would need to trigger an internal signal or I would need to keep polling some other area to wait on my write request to finish.

# ? Jun 10, 2016 00:36

Unity Gain: Sep 15, 2007; dancing blue

Fluue posted:

Does this async write / sync read design seem to go against the idea of how REST should work?

Yes, because these calls are supposed to be (a) stateless; and (b) atomic.

# ? Jun 10, 2016 02:32

Sedro: Dec 31, 2008

Unity Gain posted:

Yes, because these calls are supposed to be (a) stateless; and (b) atomic.

What state, and how is it not atomic? The PATCH either happens or doesn't; there is no half-PATCHed state.

Sure, the resource is not consistent with respect to the timing of HTTP requests, but isn't that true in general? Does REST demand this of your protocol? Many popular databases don't even offer consistency.

The API is fine. Status code 202 exists for this purpose.

# ? Jun 10, 2016 05:47

Adbot: ADBOT LOVES YOU

# ? May 8, 2024 15:05

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

Lumpy posted:

If you support supported IE versions (which is 11+) then you can use it in a vast majority of layouts. The bugs in IE 11 are generally edge cases.

but that's a different browser :v:

# ? Jun 10, 2016 15:44

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

«‹›361 »