The Web Design & Development Megathread

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

«‹›361 »

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

So I have been working with react for a while, but I have a question about something I guess I have yet to really deal with.

I have a huge associative array that I pull from a server. This array actually informs a ton of information for a ton of componenets. Obviously I don't want to have to pull this array from the server for each component that is rendered (that is a huge waste of data calls obviously).

I guess I could pass it to every single component as a prop but that just seems like a huge hassle. Is there any other way to do this? About 1/4 of all components will need access to this information... I'd like my main app.js to just pull it once and then somehow have it readily accesible to any component that needs it?

# ? Dec 26, 2016 11:51

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 23:37

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

If you want something available to the whole tree you can use contexts: https://facebook.github.io/react/docs/context.html

This article is kind of hilarious though because context is precisely what Redux uses to do it's thing. I feel it's perfectly fine to use context if you guard it with some sort of API method, so if things change down the track you can make it fit, I use this sort of thing as my base component to do that:

code:

import React, {PropTypes, Component} from 'react'

export default class ContextComponent extends Component {
  static displayName = "ContextComponent"
  static contextTypes = {
    session: PropTypes.object,
    routes: PropTypes.object,
    langUrls: PropTypes.object,
    lang: PropTypes.string,
    routeNames: PropTypes.object,
    resizer: PropTypes.object,
    loadSvgMedia: PropTypes.func,
    t_: PropTypes.func,
  }

  getContext () {
    return this.context
  }

  render () {
    console.warn(
      "Abstract Class - ContextComponent must always have it's render method overridden."
    )
    return <p>!! This component has no render method</p>
  }
}

This way you if you extend the component you can always use this.getContext() rather than this.context, and that way if the API ever changes you can handle it. That said though, my context doesn't change a whole lot, it's usually static details or rarely changing config, information passed from the server, etc. If the data is changing a lot, stick to relying on standard property flow and just pass it down, otherwise you're just hobbling React's performance most likely.

e: Just to emphasize, your situation seems like maybe Context is a bad idea, just suck it up and pass the props like you're meant to, but of course Context is the tool if you want something accessible to anything in the tree.

# ? Dec 26, 2016 12:36

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

Posting to personally recommend the Learning ReactJS video series on Packt. It's on sale for $5usd (also everything there is $5 right now). The author of the corresponding book made it personally and put a lot of effort into explaining everything that's going on.

Also posting to personally... whatever the opposite of recommend is... the "Nodejs Projects" video series. It's like the polar opposite of the reactjs one.

# ? Dec 26, 2016 14:51

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Maluco Marinero posted:

If you want something available to the whole tree you can use contexts: https://facebook.github.io/react/docs/context.html

This article is kind of hilarious though because context is precisely what Redux uses to do it's thing. I feel it's perfectly fine to use context if you guard it with some sort of API method, so if things change down the track you can make it fit, I use this sort of thing as my base component to do that:
code:
import React, {PropTypes, Component} from 'react'

export default class ContextComponent extends Component {
  static displayName = "ContextComponent"
  static contextTypes = {
    session: PropTypes.object,
    routes: PropTypes.object,
    langUrls: PropTypes.object,
    lang: PropTypes.string,
    routeNames: PropTypes.object,
    resizer: PropTypes.object,
    loadSvgMedia: PropTypes.func,
    t_: PropTypes.func,
  }

  getContext () {
    return this.context
  }

  render () {
    console.warn(
      "Abstract Class - ContextComponent must always have it's render method overridden."
    )
    return <p>!! This component has no render method</p>
  }
}
This way you if you extend the component you can always use this.getContext() rather than this.context, and that way if the API ever changes you can handle it. That said though, my context doesn't change a whole lot, it's usually static details or rarely changing config, information passed from the server, etc. If the data is changing a lot, stick to relying on standard property flow and just pass it down, otherwise you're just hobbling React's performance most likely.

e: Just to emphasize, your situation seems like maybe Context is a bad idea, just suck it up and pass the props like you're meant to, but of course Context is the tool if you want something accessible to anything in the tree.

My data will maybe change two to three times a year so context sounds great!

Also what is the best way to fetch data since using ajax off jquery seems kind of not worth it when using purely react these days?

Knifegrab fucked around with this message at 19:07 on Dec 26, 2016

# ? Dec 26, 2016 18:34

Blinkz0rz: May 27, 2001; MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS

axios is pretty good

# ? Dec 26, 2016 19:17

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

I always use fetch unless there's some specific need for one of the few extra features axios gives you. Mainly because of yet-another-library fatigue.

It's got pretty good browser support, and github makes a good polyfill for those browsers missing it.

# ? Dec 26, 2016 21:22

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Thanks guys, axios is pretty much an ajax look alike with promise support so I went that direction. Now I am tearing my hair out over something incredibly simple...

Alright I got a css (or sass which I am using) question. Say I have an object that utilizes a sprite sheet. My sprite sheet has over 500 elements stacked vertically (all the same width), I have added a class to the image for the sprite called "offset-x" where x is the element in the sprite sheet.

Without having to write a billion classes that each handle what the offset is in sass, is there a way to have it compute the offset within the sass or style sheets? Or would I have to do this as an inline comment in my render function?

Knifegrab fucked around with this message at 22:05 on Dec 26, 2016

# ? Dec 26, 2016 21:44

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

Directives, yo.

code:

$offset-class-slug: offset;
$offset-class-interval: 60;

@for $i from 0 through 4 {
  .#{$offset-class-slug}-#{$offset-class-interval * $i} {
    background-position: 0px (-$offset-class-interval * $i * 1px);
  }
}

code:

.offset-0 {
  background-position: 0px 0px;
}

.offset-60 {
  background-position: 0px -60px;
}

.offset-120 {
  background-position: 0px -120px;
}

.offset-180 {
  background-position: 0px -180px;
}

.offset-240 {
  background-position: 0px -240px;
}

Also if you're new to Sass, SassMeister is pretty great. I mean, it's great for when you do know Sass too.

Anony Mouse fucked around with this message at 01:11 on Dec 27, 2016

# ? Dec 27, 2016 01:06

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Thanks. Turns out using sprite sheets for anything that needs to be resized is a huge pita so I'm scrapping that, it would only be a nominal performance boost anyway

edit: Ugh I am running into so many tiny little problems writing a broader scale react app.

OK so I have a handler I have bubbled down to a child component. This child component when acted upon will then set the state of the parent components.

So I have passed a reference to the child component as a prop. Then in the child component I do this:

code:

<div onClick={(e) => this.props.setParentState(this.props.id)} />

Then my parents function that I pass to it looks like this:

code:

setParentState (id) {
   this.setState({id: id});
}

The problem seems to be that when I call the passed handler in the child component it changes the "this" context and thus cannot set teh state of the parent element...

double edit: Apparently the answer seems to be doing this.setParentState = this.setParentState.bind(this) in my constructor. Is there no better way to do this? (No I cannot use the es7 trickery)

Knifegrab fucked around with this message at 10:20 on Dec 27, 2016

# ? Dec 27, 2016 01:22

Kekekela: Oct 28, 2004

The Wizard of Poz posted:

They're not saying that they will rank your page higher or lower, they're not talking about pagerank at all. They're saying that the content included in the result text will be drawn from your page using a mobile-first approach. If your content is the same when visited on mobile and on desktop, (including not having a mobile version at all) then you won't see any difference.

(In fact, even the Business Insider article is not talking about pagerank either).

Its not just about the result text.

quote:

our algorithms will eventually primarily use the mobile version of a site�s content to rank pages from that site, to understand structured data, and to show snippets from those pages in our results.

# ? Dec 27, 2016 12:40

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Its me back with another inane webdev question.

I am using the transition property on a couple of things. In one case I am using transform: scale(2) when you hover over one of hte many flaoted items inside a container to indicate selection, it works really well but unfortunately there is a weird effeect I don't love, its not the end of the world but I would want to be able to still select the adjacent children elements where their normal boundary is but the scaled float covers it. Not a huge thing because the scaled item only covers a small portion of the adjacent elements but just something that is bugging me. Also the right most element in the float container causes the whole layout to break when transformed.

Also I was wondering if there was a way to keep an image unskewed inside a container that is transform:skewed but have it fill the container up to the edges. I have tried a couple things but cannot get it to work.

Sorry for all the questions as of late, normally my scope for projects is small but I am doing a full blown top to bottom this week.

# ? Dec 27, 2016 18:45

lunar detritus: May 6, 2009

Knifegrab posted:

Its me back with another inane webdev question.

I am using the transition property on a couple of things. In one case I am using transform: scale(2) when you hover over one of hte many flaoted items inside a container to indicate selection, it works really well but unfortunately there is a weird effeect I don't love, its not the end of the world but I would want to be able to still select the adjacent children elements where their normal boundary is but the scaled float covers it. Not a huge thing because the scaled item only covers a small portion of the adjacent elements but just something that is bugging me. Also the right most element in the float container causes the whole layout to break when transformed.

Also I was wondering if there was a way to keep an image unskewed inside a container that is transform:skewed but have it fill the container up to the edges. I have tried a couple things but cannot get it to work.

Sorry for all the questions as of late, normally my scope for projects is small but I am doing a full blown top to bottom this week.

pointer-events: none can help you with the first one. The second can be done by scaling the image up I guess.

https://jsfiddle.net/py7gojst/

# ? Dec 27, 2016 19:24

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

gmq posted:

pointer-events: none can help you with the first one. The second can be done by scaling the image up I guess.

https://jsfiddle.net/py7gojst/

Hmm for some reason my hovered images now just flicker a ton... not sure why need to figure this out. Thank you though you have solved the rest of my issues.

Knifegrab fucked around with this message at 19:56 on Dec 27, 2016

# ? Dec 27, 2016 19:51

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

Pay close attention to how his jsfiddle is structured. Each image is wrapped in a li element which is what captures the hover event. You don't want the img to directly capture the hover because then if you add pointer-events: none to it you get stuck in an infinite loop of hovering and then ignoring hover.

# ? Dec 28, 2016 01:16

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Anony Mouse posted:

Pay close attention to how his jsfiddle is structured. Each image is wrapped in a li element which is what captures the hover event. You don't want the img to directly capture the hover because then if you add pointer-events: none to it you get stuck in an infinite loop of hovering and then ignoring hover.

Yup I got it. Man CSS is so fiinicky. Right now I am wrestling with a skewed button whose text I don't want skewed which I got working but now for whatever reason the text is terribly aligned.

I found this jsfiddle: https://jsfiddle.net/g812h9L3/40/

And my setup is, as far as I can tell, exactly the same yet my text falls out of the button as I size it down.

edit: Solved that onto the next big gently caress up I'm sure!

double edit: Alright new question. Handling a KeyDown event, what's the quickest and easiest way to ignore all e.key types that aren't just alphanumerics (there are a TON of special key types I don't care about!)

Knifegrab fucked around with this message at 12:56 on Dec 28, 2016

# ? Dec 28, 2016 08:43

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

Knifegrab posted:

double edit: Alright new question. Handling a KeyDown event, what's the quickest and easiest way to ignore all e.key types that aren't just alphanumerics (there are a TON of special key types I don't care about!)

check if the keycode is not between 48 and 90 inclusive?

Style Guide Question
So we're slowly rolling out a brand style guide. However, we're still not done rolling it out to all of our pages and now Creative is getting bored so on new projects they are just reinventing the style guide. This isn't good because these reiventions are also not updating previous pages so we're headed back to bespoke pages where they individually look nice but site-wide they don't (and it's not as scalable/maintainable) again.
Is this normal? If not, how do I stop it?

# ? Dec 28, 2016 16:18

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

The Merkinman posted:

check if the keycode is not between 48 and 90 inclusive?

Style Guide Question
So we're slowly rolling out a brand style guide. However, we're still not done rolling it out to all of our pages and now Creative is getting bored so on new projects they are just reinventing the style guide. This isn't good because these reiventions are also not updating previous pages so we're headed back to bespoke pages where they individually look nice but site-wide they don't (and it's not as scalable/maintainable) again.
Is this normal? If not, how do I stop it?

The whole point of having style guides is twofold... enforce consistent brand and visual identity across as many products as possible, and save designers time by having an existing system to pull from. They're not only making more work for themselves but they're actively sabotaging the consistency of your visual brand. Tell them to hold their horses and wait for the final version of the style guide or at least incorporate as much of the established progress as they can. Sorry for your dumb Creative.

# ? Dec 28, 2016 16:52

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

Anony Mouse posted:

The whole point of having style guides is twofold... enforce consistent brand and visual identity across as many products as possible, and save designers time by having an existing system to pull from. They're not only making more work for themselves but they're actively sabotaging the consistency of your visual brand. Tell them to hold their horses and wait for the final version of the style guide or at least incorporate as much of the established progress as they can. Sorry for your dumb Creative.

They don't care about the extra work for them, because it saves them from being "bored".
They don't care about the extra work for me/code bloat/etc because it's not their problem.

# ? Dec 28, 2016 17:46

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

The Merkinman posted:

check if the keycode is not between 48 and 90 inclusive?

According to: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this is being deprecated.

Also I am assuming CSS cannot detect a content change correct? I am trying to write somehting so that when it detects user input changing it displays the text in an overlay briefly, then it fades out. Currently I am going to use a setTimeout deal to change the class on the overlay with a transition css style on the changes, I suspect this the best approach?

edit: Arg my z-index property decided to randomly fail and now my popups are rendering behind other content!

Oh wtf using the "filter" css property fucks up z-index?! Wtf how would I have known that, I have no clue how to fix it too...

Knifegrab fucked around with this message at 21:08 on Dec 28, 2016

# ? Dec 28, 2016 19:52

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

Knifegrab posted:

According to: https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/keyCode this is being deprecated.

OK, regex? ^[a-zA-Z0-9]*$

Knifegrab posted:

Also I am assuming CSS cannot detect a content change correct? I am trying to write somehting so that when it detects user input changing it displays the text in an overlay briefly, then it fades out. Currently I am going to use a setTimeout deal to change the class on the overlay with a transition css style on the changes, I suspect this the best approach?

No CSS can't detect that in an input. I mean, it sort of can with a combination of required, vaild and invalid, but I doubt that'll be enough for what you want.
When exactly do you want it to change? Would it be better to use onchange or onblur instead?

# ? Dec 28, 2016 21:11

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

The Merkinman posted:

Style Guide Question
So we're slowly rolling out a brand style guide. However, we're still not done rolling it out to all of our pages and now Creative is getting bored so on new projects they are just reinventing the style guide. This isn't good because these reiventions are also not updating previous pages so we're headed back to bespoke pages where they individually look nice but site-wide they don't (and it's not as scalable/maintainable) again.
Is this normal? If not, how do I stop it?

Have lunch with them and talk to them about it. Ask for them to send you styleguide resources they have... then when they don't send you any, or send you few, send them a bunch that you "happened to come across". Talking to people solves a great number of problems.

# ? Dec 28, 2016 21:49

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:

Have lunch with them and talk to them about it. Ask for them to send you styleguide resources they have... then when they don't send you any, or send you few, send them a bunch that you "happened to come across". Talking to people solves a great number of problems.

Again, they are familiar with the style guide, have used it in the past to update older pages. Trouble now is they are getting bored, and on new projects (coincidentally ones I'm not developing??) are doing offshoots.

Right now everyone is gone for the holiday season. I do think some sort of meeting needs to happen, sure. I didn't know the best way to go about it that wouldn't end up as some sort of Dev VS Creative fight.

# ? Dec 28, 2016 22:24

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

The Merkinman posted:

OK, regex? ^[a-zA-Z0-9]*$
No CSS can't detect that in an input. I mean, it sort of can with a combination of required, vaild and invalid, but I doubt that'll be enough for what you want.
When exactly do you want it to change? Would it be better to use onchange or onblur instead?

Yeah that regex solution could work! Thanks I was thinking about regex but my regex-fu is stupid lovely. I ended actually just checking if hte .key length was of 1, because in my testing I found that all the special functions were strings with length > 1. Its a hacky fix and doing a regex check is probably better.

I actually got it working, whenever a valid key is pressed I change the div class and then after a short timeout I change it back. Then I just use the transition property in the CSS one way, it works pretty cleanly!

Got another question, what is the best way to load an image in react but not display it till its fully loaded. Right now I am hiding it using display none, and then when the onLoad event handler fires off I change the class to let it be displayed. Seems to work but wondering if there are better methods.

# ? Dec 28, 2016 22:57

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

So for a React website, does almost everything the user sees and interacts with end up being an extension of ReactComponent? Because this book/video seems to imply that.

# ? Dec 29, 2016 04:29

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

Love Stole the Day posted:

So for a React website, does almost everything the user sees and interacts with end up being an extension of ReactComponent? Because this book/video seems to imply that.

Every element React puts on screen is a component. So "yes", but components can be complex ES6 classes, created with React's createClass method, or be really, really simple pure functional components like this:

JavaScript code:

const LolLabel = ({ text }) => <label>{ text }</label>;

It's a common practice to make the actual things that render these simple functional guys, then wrap them with the more complex types if needed. That way you'll write a bunch of "dumb" presentation components that can be used all over the place by just passing props to them, and then if you encounter a situation where you need some more behavior / logic, you can wrap it in a class-based component.

Lumpy fucked around with this message at 17:47 on Dec 29, 2016

# ? Dec 29, 2016 17:42

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

Huh so I have a div that contains and image and some text. I then perform a transform: scale() on the div and in chrome is works hunky dory. But in firefox the text becomes incredibly blurry as does the image (the image is such a size that when scaled up it becomes its native res so I am not overly stretching the image).

Has anyone run into this problem?

# ? Dec 29, 2016 18:37

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

It's pretty common because the way transform works is the image is sort of still scaling based on its pre transform size. Mileage may be different on retina displays, but yeah for Firefox, even chrome, you can end up in scaling problems that seem to blur way more than they should.

Two options:
- have the image full size and transform 'down' to the resting size.
- have two images, one at full size, one at resting size. The transition then becomes opacity & scaling when bringing in the full size image.

Maluco Marinero fucked around with this message at 21:41 on Dec 29, 2016

# ? Dec 29, 2016 21:15

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

Maluco Marinero posted:

It's pretty common because the way transform works is the image is sort of still scaling based on its pre transform size. Mileage may be different on retina displays, but yeah for Firefox, even chrome, you can end up in Salina problems that seem to blur way more than they should.

Two options:
- have the image full size and transform 'down' to the resting size.
- have two images, one at full size, one at resting size. The transition then becomes opacity & scaling when bringing in the full size image.

Option three: resize the image and text using width/font-size respectively and avoid transform altogether.

# ? Dec 29, 2016 21:31

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

Anony Mouse posted:

Option three: resize the image and text using width/font-size respectively and avoid transform altogether.

Option three is only an option if you're not intending to animate, which I didn't necessarily consider, but then if you're using transform and not animating you need to be sure there's no other way you can do it as it's rarely the ideal for best presentation.

# ? Dec 29, 2016 21:41

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

I think option three is harder for this. It's a closely grouped amount of images that expand to cover the neighbors. I might try the second element at full size absolutely positioned over the thumbnail version just hidden...

It's a PITA when it works flawlessly in chrome. Stupid Firefox!

# ? Dec 29, 2016 23:39

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

HappyHippo posted:

I've been wondering this myself. I've been working on a site with a lot of diagrams to go with the text, and I want it so that on wide enough screens some diagrams move to a second column alongside the text, while on narrower screens everything is just a single column. I've got this working fine using "display: inline-block," but every now and then I come across a situation where the best two column layout would require the content in a different order than the best single column layout, and I can't decide which to favour. I feel like the best solution might just be to duplicate some stuff with one element hidden and use a media query to switch between them.

Just touching back on this, I still haven't really figured out if there is a good way to do this other than just hidden content that is made visible when the screen sizes down. Kind of a real pain.

# ? Dec 31, 2016 05:16

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

Knifegrab posted:

Just touching back on this, I still haven't really figured out if there is a good way to do this other than just hidden content that is made visible when the screen sizes down. Kind of a real pain.

Flexbox with min-widths, flex wrap on, and re-order elements (via flexbox) in a media query when appropriate.

# ? Dec 31, 2016 07:19

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

Speaking of flexbox, is there an industry standard of what versions of older browsers you should support?

I see that flexbox is supported in Edge, but is apparently buggy in IE11, and unusable in anything before that? Is it recommended to write standard float fallbacks?

# ? Dec 31, 2016 11:32

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

ddiddles posted:

Speaking of flexbox, is there an industry standard of what versions of older browsers you should support?

I see that flexbox is supported in Edge, but is apparently buggy in IE11, and unusable in anything before that? Is it recommended to write standard float fallbacks?

Browser support really depends on the audience of the particular site you're developing.

# ? Dec 31, 2016 16:04

Knifegrab: Jul 30, 2014; Gadzooks! I'm terrified of this little child who is going to stab me with a knife. I must wrest the knife away from his control and therefore gain the upperhand.

So I pass a props array to a component. Sometimes I reorder that array but my component doesn't update, and I'm guessing its because it is only looking at the top level of the arraay and since its just a sort the actual reference doesn't change. Copying the whole array seems like a process intensive thing, is there another way to force the copmonent to update. I wuld assume I could try and use ComponentWillReceiveProps but I am not sure if that will even be invoked since I doubt it sees this as a prop change...

The weird thing is I am slice the array so I would imagine the array reference is chanigng which I htought would cause a re-render in react. This is quite annoying.

Knifegrab fucked around with this message at 20:36 on Jan 1, 2017

# ? Jan 1, 2017 19:17

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

Knifegrab posted:

So I pass a props array to a component. Sometimes I reorder that array but my component doesn't update, and I'm guessing its because it is only looking at the top level of the arraay and since its just a sort the actual reference doesn't change. Copying the whole array seems like a process intensive thing, is there another way to force the copmonent to update. I wuld assume I could try and use ComponentWillReceiveProps but I am not sure if that will even be invoked since I doubt it sees this as a prop change...

The weird thing is I am slice the array so I would imagine the array reference is chanigng which I htought would cause a re-render in react. This is quite annoying.

Without seeing code it is hard to help as it could be one of a billion things depending on where and how you are sorting the array. I'm assuming React, but you don't say that explicitly.

# ? Jan 1, 2017 22:40

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

Just finished the Learning ReactJS book on Packt (it's on sale for $5 atm fyi). Learned the basics about React, Babel, Webpack, JSX, and Redux. Already learned about Node a while ago.

Can anyone here give me a direction to go? Something to look up? A Book or video course to buy (preferably on Packt because everything there is $5 right now)? Or should I buy a "building react applications" book and work through those?

# ? Jan 2, 2017 02:27

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

Is there something specific that you are still trying to learn? If you've already gotten the basics then get out there and start making stuff. Experience is the best teacher.

# ? Jan 2, 2017 03:09

Chenghiz: Feb 14, 2007; WHITE WHALE
HOLY GRAIL

Knifegrab posted:

So I pass a props array to a component. Sometimes I reorder that array but my component doesn't update, and I'm guessing its because it is only looking at the top level of the arraay and since its just a sort the actual reference doesn't change. Copying the whole array seems like a process intensive thing, is there another way to force the copmonent to update. I wuld assume I could try and use ComponentWillReceiveProps but I am not sure if that will even be invoked since I doubt it sees this as a prop change...

The weird thing is I am slice the array so I would imagine the array reference is chanigng which I htought would cause a re-render in react. This is quite annoying.

This is what keys are for. Give each element in your array of components a key that is relevant to its contents (not the index) and that should solve the issue.

# ? Jan 2, 2017 03:12

Adbot: ADBOT LOVES YOU

# ? May 16, 2024 23:37

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

Anony Mouse posted:

Is there something specific that you are still trying to learn? If you've already gotten the basics then get out there and start making stuff. Experience is the best teacher.

I've learned the hard way that when for programming stuff, you cannot just go from 101 and 202 level stuff to just going out there and making things. There's an education gap. That's why I'm posting here about it.

As for something specific I want to do, I had the idea of creating a Korean-vocabulary-learning site (because I live there) a la Wanikani. I have a basic uml thing that I sketched out recently:

# ? Jan 2, 2017 05:45

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

«‹›361 »