As was foretold, we've added advertisements to the forums! If you have questions, or if you encounter any bugs, please visit this thread: https://forums.penny-arcade.com/discussion/240191/forum-advertisement-faq-and-reports-thread/

[Programming] Kafkaesque rabbits in the queue at the pub

24567100

Posts

  • EchoEcho ski-bap ba-dapModerator mod
    Hmm, what's the preferred way to conditionally wrap stuff in other tags in React? Since you can't use if/else in JSX I tried this clunky thing:
    {canReorderItems
      ? <OverlayTrigger overlay={tooltip} placement="left">
      : ''
    }
      <Stuff I might want wrapped>
    {canReorderItems
      ? </OverlayTrigger>
      : ''
    }
    

    But that's a syntax error in the last ternary, probably because JSX doesn't expect a closing tag like that. And oh hey I just rubberducked that, I'll just do the wrapping earlier and include the result from that.
    var content;
    if(canReorderItems) {
      content = <OverlayTrigger overlay={tooltip} placement="left">
        {innerContent}
      </OverlayTrigger>
    } else {
      content = innerContent;
    }
    

  • SaerisSaeris Borb Enthusiast flapflapflapflapRegistered User regular
    Yeah, JSX expressions are just like any other expression. They can be assigned to variables and composed later.

    borb_sig.png
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    Grape Ape wrote: »
    Never realize how close the 'e' and 'r' keys are until I mistype 'crontab -e'...

    My old development manager did that on a production server. We spent an entire day rebuilding it from cron.d logs

    Later that day all the server's crons went into SVN and we set up a deploy task to make changes instead

    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
  • templewulftemplewulf The Team Chump USARegistered User regular
    edited June 2016
    Does anyone have best practices for linting Rails in Windows?

    I'm running Vagrant (i.e. headless) VMs with rbenv on a Windows host, so my code editor is on the Windows host while ruby is in the VMs. In order to run a ruby linter in the editor, I need to install the ruby gem for it. Which in turn means I need ruby on the host as well as the VMs.

    Edit: I'm accustomed to rbenv, but installing that requires readlink which is a GNU coreutil not available in Git Bash for Windows.

    templewulf on
    Twitch.tv/FiercePunchStudios | PSN | Steam | Discord | SFV CFN: templewulf
  • LD50LD50 Registered User regular
    templewulf wrote: »
    Does anyone have best practices for linting Rails in Windows?

    I'm running Vagrant (i.e. headless) VMs with rbenv on a Windows host, so my code editor is on the Windows host while ruby is in the VMs. In order to run a ruby linter in the editor, I need to install the ruby gem for it. Which in turn means I need ruby on the host as well as the VMs.

    Edit: I'm accustomed to rbenv, but installing that requires readlink which is a GNU coreutil not available in Git Bash for Windows.

    If you need something like rbenv in windows, the best alternative is pik. If you just need a ruby installation you can use the windows installer. Both can be found here: http://rubyinstaller.org/add-ons/pik/

  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    More React! I have a handler that changes tooltip positions when the window goes below a certain size:
    componentDidMount: function() {
      window.addEventListener('resize', this.handleWindowResize);
      this.handleWindowResize();
    },
    

    It works just fine when I resize the window, but it turns out it doesn't actually run this.handleWindowResize() to set the correct state after mounting -- what's up with that? Discovered it when I had a small window and refreshed the page -- tooltips in the wrong position until I resize the window manually.

    Echo on
  • InfidelInfidel Heretic Registered User regular
    Echo wrote: »
    More React! I have a handler that changes tooltip positions when the window goes below a certain size:
    componentDidMount: function() {
      window.addEventListener('resize', this.handleWindowResize);
      this.handleWindowResize();
    },
    

    It works just fine when I resize the window, but it turns out it doesn't actually run this.handleWindowResize() to set the correct state after mounting -- what's up with that? Discovered it when I had a small window and refreshed the page -- tooltips in the wrong position until I resize the window manually.

    You aren't passing any arguments when you call the initial one? It expects an object with the width and height of the viewport.

    OrokosPA.png
  • EchoEcho ski-bap ba-dapModerator mod
    It takes no arguments, I check window.innerWidth in the function.

  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    Okay, it does actually fire - the state updates properly. It's just the tooltip that still shows in the default position it gets from the initial state - which is also weird, because the state is updated.

    Echo on
  • EchoEcho ski-bap ba-dapModerator mod
    Doh. Had this in there, which won't trigger an update because the width didn't actually change on the initial load.
    shouldComponentUpdate: function(nextProps, nextState) {
        return this.state.windowWidth != nextState.windowWidth;
      },
    

  • ecco the dolphinecco the dolphin Registered User regular
    Full credit to the people of Microsoft (even though I know Microsoft is a massive company and this is just anecdote lol).

    Just finished a conference call with them, and they are handling the discovery of a bug in one of their services very nicely. =)

    Penny Arcade Developers at PADev.net.
  • EchoEcho ski-bap ba-dapModerator mod
    Man, every time I think I understand function binding in Javascript it throws me a curve ball. Need to take some time to really study how it works.

  • SaerisSaeris Borb Enthusiast flapflapflapflapRegistered User regular
    edited June 2016
    These are all of the cases I know of. I'm not sure how the context works with class methods, but I assume it's just like the rules for plain objects.
    var customContext = {}
    function func1() { return this }
    function func2() { 'use strict'; return this }
    var func3 = function() { return this }.bind(customContext)
    var func4 = () => this
    var func5 = (() => this).bind(customContext)
    var object = { func1: func1, func2: func2, func3: func3, func4: func4, func5: func5 }
    console.assert(func1() === window)
    console.assert(func2() === undefined)
    console.assert(func3() === customContext)
    console.assert(func4() === this)
    console.assert(func5() === this)
    console.assert(object.func1() === object)
    console.assert(object.func2() === object)
    console.assert(object.func3() === customContext)
    console.assert(object.func4() === this)
    console.assert(object.func5() === this)
    

    Saeris on
    borb_sig.png
  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    Thanks, I'll stare at that for a while later.

    Right now I'm trying to figure out how to monitor a non-React bit from React. I have a non-React sidebar on the page that can be toggled open or closed, and it saves that state both with a cookie for the session, and a CSS class for the actual open/closed visibility bit.

    How do I hook that up to React? General idea was to look for the CSS class, but I need to do that whenever the class tag for that element changes. Any ideas?

    edit: or have it go the other way, and have the sidebar toggle button fire something off into the React component.

    Echo on
  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    Hmm, any particular reason I can't have a React prop listening to a global variable with <Foo someProp={globalVar} /> ? It's just a plain string in this case.

    My backup solution was to have the sidebar toggle fire off a trigger, and then catch that in the component:
    componentDidMount: function() {
      window.addEventListener('resize', this.handleWindowResize);
      $('body').on('sidebarToggled', this.handleWindowResize);
      this.handleWindowResize();
    },
    

    My problem now is that the state is one step behind what is actually going on. React docs say setState() triggers a re-render, but I'm clearly not doing something right.

    Said handleWindowResize function:
    handleWindowResize: function() {
      const width = window.innerWidth;
      const isWide = width >= 992;
      const sidebarOpen = sidebarCollapsed == 1 ? true : false;
    
      var trayPosition = isWide && sidebarOpen
        ? 'left'
        : 'top';
    
      this.setState({
        sidebarOpen: sidebarOpen,
        trayPosition: trayPosition,
        windowWidth: width
      });
    },
    

    sidebarCollapsed is the global variable I wanted to hook up to a component prop.

    edit: it works as intended on the initial page load, but toggling the sidebar makes the state end up one step behind.

    Echo on
  • SarksusSarksus ATTACK AND DETHRONE GODRegistered User regular
    I'm doing a GUI in SWT, and we use a lot of custom stuff extended from SWT classes.

    Dear God, it's extended classes all the way down. We have some frankestein date picker entity that is like the great great great grandchild of two different species.

  • InfidelInfidel Heretic Registered User regular
    @Echo think I would need to see full code for that one.

    OrokosPA.png
  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    Infidel wrote: »
    Echo think I would need to see full code for that one.

    turns out I had a senior moment and forgot how javascript handles references. Once I wrapped the sidebar state inside an object I could have the object as a React prop and listen to it.

    However.

    The prop only actually updates if I listen to the trigger I added. If I remove that trigger, the React prop doesn't actually change to match the state of the object I'm modifying and now things are getting weird.

    I have a simple sidebarState object as a global variable:
    sidebarState = {
      isOpen: sidebarCollapsed == 1 ? true : false
    };
    

    And then the bit that toggles the sidebar open/closed sets sidebarState.isOpen to true/false as necessary. I then have this object as a React prop: <Foo sidebarState={sidebarState} />

    Toggling the sidebar modifies the object as expected, but React doesn't catch that change without the trigger and I have no damn idea what is going on any longer.

    edit: I tried setting the tray position directly from the prop value, and it's still one step behind -- the prop says "top" and the tooltip is on the left.

    Echo on
  • NogsNogs Crap, crap, mega crap. Crap, crap, mega crap.Registered User regular
    Are you just using setState for state management?

    You might have hit that spot where things like MobX or redux will finally be worth looking into.

    I actually just used MobX for a small little personal thing and was amazed at how simple it was in comparision to redux.

    rotate.jpg
    PARKER, YOU'RE FIRED! <-- My comic book podcast! Satan look here!
  • EchoEcho ski-bap ba-dapModerator mod
    I'm not actually using the React component state for this any longer, the global variable is just called sidebarState for lack of a better name.

    I've inherited this mess of a project, and this editor component actually has what looks like a fully functional Redux store... that isn't used at all in the code. Need to pull some strings and see what twitches in the code and if I can actually start using that.

  • EchoEcho ski-bap ba-dapModerator mod
    With MobX you can define values that will be derived automatically when relevant data is modified.

    giphy.gif

  • zeenyzeeny Registered User regular
    sidebarState = {
    isOpen: sidebarCollapsed == 1 ? true : false
    };

    ;o((((

  • bowenbowen How you doin'? Registered User regular
    zeeny wrote: »
    sidebarState = {
    isOpen: sidebarCollapsed == 1 ? true : false
    };

    ;o((((

    probably something done for debugging purposes

    I do shit like this occasionally, sometimes even on accident "why the fuck did I check a boolean and set it as a boolean explicitly?"

    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • EchoEcho ski-bap ba-dapModerator mod
    edited June 2016
    zeeny wrote: »
    sidebarState = {
    isOpen: sidebarCollapsed == 1 ? true : false
    };

    ;o((((

    Yeah, I have no idea if it's used elsewhere in the app, so I'm stuck with a ternary check on a string to get a proper value out of it. 8->

    edit: oh wait, JS is falsy on "0" and 0, right?

    Echo on
  • bowenbowen How you doin'? Registered User regular
    edited June 2016
    sidebarState = {
      isOpen: sidebarCollapsed == 1
    };
    

    Does that not work in JS?

    bowen on
    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • LD50LD50 Registered User regular
    I think Echo just needs a break from this app.

  • EchoEcho ski-bap ba-dapModerator mod
    LD50 wrote: »
    I think Echo just needs a break from this app.

    I'll say this though: it was my first exposure to React, and I definitely want to play with that some more.

    Primarily so I can do it right from the start. :rotate:

  • NogsNogs Crap, crap, mega crap. Crap, crap, mega crap.Registered User regular
    edited June 2016
    I love React.

    But react actually doesnt give you much. So its real easy to go off the rails and start doing nutso things.

    That being said, it leveled me up as a raw javascript developer like whoa.

    Which i think is good, because raw javascript will always be around, framework particulars come and go.

    Nogs on
    rotate.jpg
    PARKER, YOU'RE FIRED! <-- My comic book podcast! Satan look here!
  • OrcaOrca Also known as Espressosaurus WrexRegistered User regular
    Nogs wrote: »
    ...because raw javascript will always be around, framework particulars come and go.

    ...every six months.

  • DynagripDynagrip Break me a million hearts HoustonRegistered User, ClubPA regular
    Don't know if any of y'all are into edX or MIT Open CourseWare but their software engineering class, 6.005, is on edX. Pretty excited about it.

    https://prod-edx-mktg-edit.edx.org/course/software-construction-java-mitx-6-005-1x#!

  • urahonkyurahonky Registered User regular
    edited July 2016
    Does anyone know how to access the actual camera of a Windows 10 device using javascript? I don't want the webcam, but the actual camera on the tablet. I got the webcam working really easy, but I can't figure out how to use the other camera.

    urahonky on
  • bowenbowen How you doin'? Registered User regular
    Are you using C or C#?

    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • urahonkyurahonky Registered User regular
    Sorry, somehow forgot to mention it.

  • ecco the dolphinecco the dolphin Registered User regular
    edited July 2016
    Isn't the camera just the webcam taking a single frame?

    Edit: oh you're saying there's two of them. Surely there's a way to enumerate them?

    ecco the dolphin on
    Penny Arcade Developers at PADev.net.
  • bowenbowen How you doin'? Registered User regular
    yeah that was my thought, I think by default it's just selecting the first one, so you'd have to enumerate the devices.

    not a doctor, not a lawyer, examples I use may not be fully researched so don't take out of context plz, don't @ me
  • SarksusSarksus ATTACK AND DETHRONE GODRegistered User regular
    bowen wrote: »
    yeah that was my thought, I think by default it's just selecting the first one, so you'd have to enumerate the devices.

    So backspace over whatever method call gives you the webcam and type letters until something good comes up in the auto-complete

  • Monkey Ball WarriorMonkey Ball Warrior A collection of mediocre hats Seattle, WARegistered User regular
    edited July 2016
    So... working at Generic MegaCorp, the only guy who had any kind of real web experience in my extended team-family left. We went many years without one and I suspect it will be many years before we get another. Which basically means I need to learn to crank out a simple internal-use-only web UI without really having the time to learn heavy frameworks or npm or node or stuff like that. If I can't do it with a
    <script src="https://some-cdn/nice-lib.js" />
    
    tag, I don't want to hear about it.

    I don't need to do fancy things. 95% of the time I'm just going to be dumping database tables into sortable, filterable tables. I might have a d3.js chart occasionally. It will usually be coming from some kind of REST API because I at least know enough to do it that way.

    I tried to check out Angular 2, since I have once written a tiny bit of simplistic Angular 1 stuff, probably badly, but it makes wild assumptions about everything before it even gets to hello world, like having or wanting npm or node.js.

    So at this point I'm thinking Bootstrap and Angular 1, since that's what I (barely) know. Does anyone else have any good ideas for "Web UI for people who don't Web"?

    Monkey Ball Warrior on
    "I resent the entire notion of a body as an ante and then raise you a generalized dissatisfaction with physicality itself" -- Tycho
  • DehumanizedDehumanized Registered User regular
    Bootstrap is definitely cruise control for the CSS, it'll get you very usable pages without much thinking. Angular seems fine, probably as good as any other choice.

  • SaerisSaeris Borb Enthusiast flapflapflapflapRegistered User regular
    If you just want a decent UI with sortable and filterable tables, that sounds like a job for ~100 lines of custom JS and CSS, maybe just adapting some of Bootstrap's table styles. Any kind of grid/table library will be overkill if you genuinely just want sorting and filtering of tabular data. Likewise, full Bootstrap is probably overkill if you just have a table and some filtering controls.

    The only external thing you might need is a JavaScript date-picker (if you're filtering by dates). Firefox still doesn't support "date"-type inputs.

    borb_sig.png
  • SporkAndrewSporkAndrew Registered User, ClubPA regular
    Angular 1 and bootstrap would 100% be cruise control for cool. Or rather super-simple filterable, orderable tables though ng-repeat and whathaveyou.

    I've been using it for about a month now and still marvel at how the whole scope digest cycle thing makes updating elements a thing that just happens magically once things are bound properly.

    The one about the fucking space hairdresser and the cowboy. He's got a tinfoil pal and a pedal bin
This discussion has been closed.