Register a SA Forums Account here!
JOINING THE SA FORUMS WILL REMOVE THIS BIG AD, THE ANNOYING UNDERLINED ADS, AND STUPID INTERSTITIAL ADS!!!

You can: log in, read the tech support FAQ, or request your lost password. This dumb message (and those ads) will appear on every screen until you register! Get rid of this crap by registering your own SA Forums Account and joining roughly 150,000 Goons, for the one-time price of $9.95! We charge money because it costs us money per month for bills, and since we don't believe in showing ads to our users, we try to make the money back through forum registrations.
 
  • Post
  • Reply
Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



Is using a directive's link function to tack the DOM element to the scope the least bad way to get it to the controller? (moving this from the 'Modern' thread because Angular 1.5 is officially old, probably)

JavaScript code:
function SomeDirective() {
  return {
    controller: SomeDirectiveController,
    bindToController: true,
    link: function (scope, ele, whocares) {
      scope.element = ele;
    }
  };
}

function SomeDirectiveController () {
  this.$onInit = function () {
    requestAnimationFrame(function () {
      //now I can actually count on element being there
    }
  };
}
Seems a bit much?

Adbot
ADBOT LOVES YOU

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
How often do you guys use Git Fetch?

I'm still in the process of learning the differences between Git Pull and Git Fetch and it seems like the only real difference is that you can review merge changes before you merge them with Git Fetch, correct?

spacebard
Jan 1, 2007

Football~

Grump posted:

How often do you guys use Git Fetch?

Every time, but I don’t like being thrust into conflict resolution either via rebase or merge :butt:

Grump posted:

I'm still in the process of learning the differences between Git Pull and Git Fetch and it seems like the only real difference is that you can review merge changes before you merge them with Git Fetch, correct?

Yes. Also useful if you have a fork or have multiple remotes you’re fetching from.

Scaramouche
Mar 26, 2001

SPACE FACE! SPACE FACE!

I've always used Fetch

huhu
Feb 24, 2006
When I open the website I'm working on in Android and try and open the camera to take a picture to attach to a post, the browser crashes. I have remote DevTools enabled for Chrome on my computer but all I get is "DevTools was disconnected from the page". Is there a way to get more information on the issue from remove DevTools or from within Android itself?

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

I can't remember the last time I used git fetch.

teen phone cutie
Jun 18, 2012

last year i rewrote something awful from scratch because i hate myself
Gotcha. After using it a bit, it defintiely seems helpful.

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

Thermopyle posted:

I can't remember the last time I used git fetch.

I don't think I've ever used git fetch. Off to the docs I go. Hi-Ho.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Git pull is like git fetch + merge.

So, pull pulls whatever and merges it into your current branch.

You'd use fetch when you don't want the merge step.

For my workflows I basically never don't want the merge step, so it's always git pull for me.

Thermopyle fucked around with this message at 17:38 on Nov 4, 2017

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes
I'm probably quite late to the party but I only recently discovered Jackbox and it inspired me to try and create a similar 'local multiplayer use-your-smartphone' type trivia game.

Basically
  • have a main 'host' screen generate a 'room code' that players can join
  • display a random (one of a bunch) multiple answer question on the host
  • display the options to connected clients and allow them to answer the question on their device
  • store who got the question right for scoring



The thing is my experience in web dev has been pretty much exclusively Apache/MySQL/PHP so I'm not entirely sure how I'd go about doing this, especially the 'push questions to player devices' part. I mean, I could create a php page to pick a question from a bank of questions, but then each client device would have to refresh the page each time there was a new question.

The only sort-of guide I could find was this article on Medium but it doesn't go into a lot of detail, I don't know any AngularJS and hadn't heard of Firebase. I'm not sure I want to be signing up for hosting services for something I planned to do as a bit of fun.

Ideally what I'd like to achieve is the demo shown in that article but I think I might be a bit out of my depth here.

Is an application like this doable in nodejs? Should I be learning how to use nodejs first before jumping into a project like this?

McGlockenshire
Dec 16, 2005

GOLLOCKS!
You just need websockets here, not all of what node provides. As you're already familiar with PHP, it might be best to take your first shot using PHP with things like Amp or React. In fact, you could probably get away with using the Amp "Getting Started" tutorial and modifying it from there to use websockets instead.

MrMoo
Sep 14, 2000

Anybody used CSS containment? I found a use for it, but seems more of a hack on flexible layouts.

If I take a rather dumb HTML block that uses relative positioning everywhere, when I make an update the entire region repaints:

Using CSS contain I can limit the repaint cost:

However I had to set a width and height on the time, which leads to almost just jumping over to absolute positioning to get the same benefit.

Data Graham
Dec 28, 2009

📈📊🍪😋



I use git fetch whenever I want to refresh the list of all the new branches that are on origin, which I need to do a lot in a CI/CD setup.

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes

McGlockenshire posted:

You just need websockets here, not all of what node provides. As you're already familiar with PHP, it might be best to take your first shot using PHP with things like Amp or React. In fact, you could probably get away with using the Amp "Getting Started" tutorial and modifying it from there to use websockets instead.

Thanks. I had a look at the Amp "Getting Started" tutorial and I think I'm in a bit over my head here. While I'm familiar with PHP I've not really done anything with networking/sockets/streams :/

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



MrMoo posted:

Anybody used CSS containment? I found a use for it, but seems more of a hack on flexible layouts.

If I take a rather dumb HTML block that uses relative positioning everywhere, when I make an update the entire region repaints:

Using CSS contain I can limit the repaint cost:

However I had to set a width and height on the time, which leads to almost just jumping over to absolute positioning to get the same benefit.

Nope, but I've never done anything the size of a billboard, either. Are you tweaking the live board daily now or is this a different one?

MrMoo
Sep 14, 2000

That thing is eight monitors in portrait and is quite taxing on animating the ticker smoothly. As nVidia is awesome we already have to render the board rotated 90° for performance. The major problem I have is quantifying performance to gauge if any change makes things better or worse. So if nVidia requires a rotated video buffer does that mean there is a performance difference on the gigantic WebGL ticker? :shrug:



I'm developing on Intel hardware which is better behaved and consistent , usually working on something worse than production helps highlight bottlenecks but it runs pretty well.

MrMoo fucked around with this message at 15:32 on Nov 6, 2017

Nybble
Jun 28, 2008

praise chuck, raise heck

nexus6 posted:

Is an application like this doable in nodejs? Should I be learning how to use nodejs first before jumping into a project like this?

If you were to go the Node route, I'd highly suggest using Glitch to prototype it. They have some great starter apps for multiplayer games. https://glitch.com/~multiplayer-game

There's also this tutorial (2015) about how to turn your phone into a controller: https://tutorialzine.com/2015/02/smartphone-remote-control-for-presentations

nexus6
Sep 2, 2011

If only you could see what I've seen with your eyes

Nybble posted:

If you were to go the Node route, I'd highly suggest using Glitch to prototype it. They have some great starter apps for multiplayer games. https://glitch.com/~multiplayer-game

There's also this tutorial (2015) about how to turn your phone into a controller: https://tutorialzine.com/2015/02/smartphone-remote-control-for-presentations

Thanks, I'll check these out.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



MrMoo posted:

That thing is eight monitors in portrait and is quite taxing on animating the ticker smoothly. As nVidia is awesome we already have to render the board rotated 90° for performance. The major problem I have is quantifying performance to gauge if any change makes things better or worse. So if nVidia requires a rotated video buffer does that mean there is a performance difference on the gigantic WebGL ticker? :shrug:



I'm developing on Intel hardware which is better behaved and consistent , usually working on something worse than production helps highlight bottlenecks but it runs pretty well.

Thinking about it, that kinda makes sense because the normal workload is to render 'down' like that.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice
NGINX configuration question!

I have a React app sitting in front of a Django backend. For reasons, there are a couple Django URLs users need to access directly (and see views rendered by Django) in addition to needing all my api/* requests proxied.

Currently my config looks something like so:

code:
    location / {

        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        proxy_set_header X-Forwarded-Proto https;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header Host stagingapp.diligencelab.com;
        proxy_set_header Authorization $http_authorization;
        proxy_pass_header  Authorization;
        proxy_redirect off;

        try_files $uri $uri/ @django;

    }
So the SPA and all other static assets get served up by nginx, and everything else is proxied to Django. The obvious flaw in this is that if I visit a URL that is "valid" in the SPA directly, nginx tries to find a file, can't, proxies, Django doesn't handle it, and a 404 happens.

What I want / need to have happen is:

All the URLs behind certain paths (ex: /api/*, /accounts/*, /whatever/*) are proxied to Django.
All other URLs are attempted to be served directly (like my try_files does now) and served if found.
Every other case should serve the same index.html file without any 301 or URL rewriting.

After much googling, I think I want to do something like so:

code:

# handles proxying only certain paths to Django??
location ~ ^/api/|^/accounts/|^/whatever/ {
    # (proxy header stuff here...)
    proxy_pass http://my.internal_url.com;
}

# otherwise try and serve the file, and if not there, serve index.html??
location / {
   try_files $uri $uri/ /index.html;
}
Does this look sane? Is there a better way to do this?

Lumpy fucked around with this message at 18:00 on Nov 10, 2017

geeves
Sep 16, 2004

Lumpy posted:

NGINX configuration question!

Does this look sane? Is there a better way to do this?

I recently ventured into nginx as well (I'm more familiar with tomcat and apache) to proxy two different servers and start prototyping some microservice architecture (with react and springboot). My config wasn't too different - I had two paths, just one to one server and one to another. I'm just using a tomcat instance and a new springboot-based Rest API.

Overall I think you're on the right path. nginx, so far for me, has been deceptively simple and one of my sys admins even checked over it and said it looked solid. If you look at Apache's by comparison it too, if you're familiar with the setup and syntax isn't much different unless you want to do some really advanced things.

code:
  log_format   main '$remote_addr - $remote_user [$time_local]  $status '
  '"$request" $body_bytes_sent "$http_referer" '
  '"$http_user_agent" "$http_x_forwarded_for"';

  sendfile        on;
  keepalive_timeout  65;

  # Without this I got this error: 'upstream sent too big header
  # while reading response header from upstream'
  proxy_buffer_size   1024k;
  proxy_buffers   4 1024k;
  proxy_busy_buffers_size   1024k;
  proxy_cache off;
  proxy_set_header        Host $host;
  proxy_set_header        Client-IP $remote_addr;
  proxy_connect_timeout       300;
  proxy_send_timeout          300;
  proxy_read_timeout          300;
  send_timeout                300;

  server {
    location / {
      proxy_pass [url]http://main.soulglo.com;[/url]
    }

  location /api {
      proxy_pass [url]http://api.soulglo.com;[/url]
      proxy_set_header Host $host;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header X-Forwarded-For $remote_addr;
      proxy_http_version 1.1;
      proxy_set_header Connection "";
      rewrite ^/api/(.*)$ /$1 break;
    }
}
This basically took everything from soulglo.com/api/foo/bar/baz and rewrote it to api.soulglo.com/foo/bar/baz

It's completely transparent to the user and works really well. It's also pretty simple to maintain. Keep and eye on the proxy timeout settings. If something is slow and it's not setup, nginx might return an error even tho the server is still rendering the request.

A version very similar to above is sitting on our production servers and proxying traffic from NoVA to Tokyo and is extremely fast.

edit: keeps adding bbcode to the urls.

geeves fucked around with this message at 00:43 on Nov 11, 2017

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Lumpy posted:

Does this look sane? Is there a better way to do this?

I'm only amateur-level at nginx, but it seems ok to me. I think I'd ask in the linux thread maybe?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

Lumpy posted:

Does this look sane? Is there a better way to do this?

It seems reasonable looking at it. I mean, there's no other way to handle a mixed namespace where some routes go to Django and some go to file handling. Often with a traditional site with assets it would be the /static & /media location that would get whitelisted for filehandling whilst Django or whatever proxy-pass gets everything else, but in this case you need to/have decided to whitelist the Django routes instead whilst assuming everything else is try-files or the base-index (the SPA).

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.
Anyone have tips on how to implement a Bootstrap 2 sub-menu type thingy (http://getbootstrap.com/2.3.2/components.html#dropdowns - see: Submenus in Dropdowns) in Bootstrap 3?

I make such bad assumptions about features included in things... Why on earth would something like submenus get depricated?

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

Newf posted:

Anyone have tips on how to implement a Bootstrap 2 sub-menu type thingy (http://getbootstrap.com/2.3.2/components.html#dropdowns - see: Submenus in Dropdowns) in Bootstrap 3?

I make such bad assumptions about features included in things... Why on earth would something like submenus get depricated?

Because they're bad UX and are especially miserable on mobile

IAmKale
Jun 7, 2007

やらないか

Fun Shoe

camoseven posted:

Because they're bad UX and are especially miserable on mobile
You know, I'm glad this came up. Last week I had to rescue the lovely remake of our corporate website that included a huge blob of JS in a premade Jekyll theme. Within this creatively-named "lib.js" was a copy-pasted, three-year-old version of Foundation. When I was done stripping out all the crap we weren't using, the only thing this ended up responsible for was handling the dropdown menu we have in the header bar.

My ultimate goal is to get rid of Foundation since there's literally nothing else on the site that uses it. However, I'm not sure how best to replace/code a dropdown menu in a way that is easy to use on mobile. Is there any kind of consensus on how to handle something like this?

Newf
Feb 14, 2006
I appreciate hacky sack on a much deeper level than you.

camoseven posted:

Because they're bad UX and are especially miserable on mobile

Heaven forbid anyone make a website for desktops. Anyhow, I've jigged something up where my menu items pop a popover containing a listgroup. It's a real eyesore. Yay.

The Dave
Sep 9, 2003

Lol at the blanket “drop downs are bad UX”.

Really for any mobile feature the two most important things are ease of tapping and ease of dismissal. If you take the ... menu on a Facebook post for example, I️ like that all the options are easy to tap and I️ can swipe to dismiss (obviously a native app luxery).

I️ think something that spans 100vw and has a close button at the bottom is ideal.

Sedro
Dec 31, 2008
Nested dropdown menus can gently caress right off, on desktop, mobile or otherwise

camoseven
Dec 30, 2005

RODOLPHONE RINGIN'

The Dave posted:

Lol at the blanket “drop downs are bad UX”.

No one said this.

Sedro posted:

Nested dropdown menus can gently caress right off, on desktop, mobile or otherwise

This is the correct opinion.

Thermopyle
Jul 1, 2003

...the stupid are cocksure while the intelligent are full of doubt. —Bertrand Russell

Sedro posted:

Nested dropdown menus can gently caress right off, on desktop, mobile or otherwise

Amazon does a pretty good job of it with their "Departments" drop down. Of course they've got a lot of UI/UX testing and engineering going on.

http://bjk5.com/post/44698559168/breaking-down-amazons-mega-dropdown

The Dave
Sep 9, 2003

camoseven posted:

No one said this.


This is the correct opinion.

That's fair, I completely misread the posts since I was train-reading. My apologies.

kedo
Nov 27, 2007

I feel like I'm making some real dumb React newbie mistakes with ReactCSSTransitionGroup. Can anyone tell me what I'm messing up here?

I have my App component which has the child component Welcome. App's render looks like this:

code:
render() {
    
    let welcome = null;
    if (this.state.pageState === 'welcome') {
      welcome = <Welcome pageState={this.state.pageState} changePageState={function(d) { this.changePageState(d) }.bind(this)} />;
    }

    let trainingType = null;
    if (this.state.pageState === 'training') {
      trainingType = <TrainingType pageState={this.state.pageState} />;
    }

    return (
      <div className="App">
        {welcome}
        {trainingType}
      </div>
    );
  }
My goal here is to conditionally mount and unmount components depending on the page state.

Within Welcome, my render looks like this:

code:
render() {
    if (typeof this.state.apiData !== 'undefined') {
      const welcome = (
        <div key={0} className="Welcome" data-animation-state={this.state.animationState}>
          <h1>{this.state.acfData.headline}</h1>
          <p>{this.state.acfData.text}</p>

          <p><strong>Start training:</strong></p>
          <ul className="button-list button-list--horizontal">
            <li><button className="button-list__button  button button--tertiary button--point-right" onClick={function() { this.props.changePageState('training') }.bind(this)}>Manager</button></li>
            <li><button className="button-list__button  button button--tertiary button--point-right" onClick={function() { this.props.changePageState('training') }.bind(this)}>Station</button></li>
          </ul>
        </div>
      );

      return (
        <ReactCSSTransitionGroup
          transitionName="example"
          transitionAppear={true}
          transitionAppearTimeout={500}
          transitionEnter={false}
          transitionLeave={true}
          transitionLeaveTimeout={500}>
          {welcome}
        </ReactCSSTransitionGroup>
      );
    }
    else {
      return(null);
    }
  }
In the Welcome component I'm fetching some data from an API, so again I'm displaying content conditionally – if I have API data, I return the welcome message, if not I return null.

Finally, here's the CSS:

code:
.example-appear {
  opacity: 0.01;
  transition: opacity 300ms ease-in;
}
.example-appear.example-appear-active {
  opacity: 1;
}
.example-leave {
  opacity: 1;
  transition: opacity 300ms ease-in;
}
.example-leave.example-leave-active {
  opacity: 0.01;
}
The "appear" animation (on mount) works just fine, but "leave" does nothing when I unmount the component. What am I doing wrong here?

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.
What's your current version now? You should probably be moving onto https://reactcommunity.org/react-transition-group/ which is an extracted library. That has a different behaviour but is a little more amenable to customisation.

kedo
Nov 27, 2007

The latest. I'll give that a shot if it's The New Hotness.

However I'd still be interested in hearing what I've done wrong so I can at least learn something from my mistakes. :)

Maluco Marinero
Jan 18, 2001

Damn that's a
fine elephant.

kedo posted:

The latest. I'll give that a shot if it's The New Hotness.

However I'd still be interested in hearing what I've done wrong so I can at least learn something from my mistakes. :)

Honestly css based animations are always a bit fraught to break, I'd start off by checking that the classes are actually getting added by slowing things right down and observing your states. See what's going on.

Munkeymon
Aug 14, 2003

Motherfucker's got an
armor-piercing crowbar! Rigoddamndicu𝜆ous.



kedo posted:

The latest. I'll give that a shot if it's The New Hotness.

However I'd still be interested in hearing what I've done wrong so I can at least learn something from my mistakes. :)

I'm not sure what ReactCSSTransitionGroup does, but IDK how it could animate an element when you're telling React not to render that element at all (because it's undefined in your app container when pageState is training). Maybe it's supposed to do some magic to work around that, but that's what it looks like to me.

kedo
Nov 27, 2007

Maybe a better question is this: how would ya'll recommend I apply transitions to component on mount/unmount? My immediate goal is to apply a simple transition animation, eg. fade in when it mounts and fade out before it unmounts. Some googling pointed me towards miscellaneous transition group libraries and I landed on the one that has a page in React's main documentation.

Munkeymon posted:

I'm not sure what ReactCSSTransitionGroup does, but IDK how it could animate an element when you're telling React not to render that element at all (because it's undefined in your app container when pageState is training). Maybe it's supposed to do some magic to work around that, but that's what it looks like to me.

My understanding is that it's supposed to defer the unmount by X milliseconds (set by the timeout) so that it can run its animation before it unmounts.

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

kedo posted:

Maybe a better question is this: how would ya'll recommend I apply transitions to component on mount/unmount? My immediate goal is to apply a simple transition animation, eg. fade in when it mounts and fade out before it unmounts. Some googling pointed me towards miscellaneous transition group libraries and I landed on the one that has a page in React's main documentation.


My understanding is that it's supposed to defer the unmount by X milliseconds (set by the timeout) so that it can run its animation before it unmounts.

The key thing is that you can't mount / render a TransitionGroup directly. It has to be inside something.

This is what I do for my loading screen and it works just ducky:

JavaScript code:

// LoadingPane.js
import './style.css';
import { CSSTransitionGroup } from 'react-transition-group';
const LoadingPane = ({ loading, message, subtext }) => (
    <div>
    <CSSTransitionGroup 
      transitionName="loadingPaneTransition" 
      transitionEnterTimeout={50} 
      transitionLeaveTimeout={250}
    > 
        { loading && (
        <div className="loadingPane">
            ...
        </div>
        )}
    </CSSTransitionGroup>
    </div>
);

// style.css
/* ============================== *\
    react transition animation
\* ============================== */
.loadingPaneTransition-enter {
  opacity: 0.01;
}

.loadingPaneTransition-enter.loadingPaneTransition-enter-active {
  opacity: 1;
  transition: opacity 50ms ease-in;
}
.loadingPaneTransition-leave {
  opacity: 1;
}

.loadingPaneTransition-leave.loadingPaneTransition-leave-active {
  opacity: 0.01;
  transition: opacity 250ms ease-in;
}

Adbot
ADBOT LOVES YOU

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

Lumpy posted:

JavaScript code:
/* ============================== *\
    stuff goes here
\* ============================== */
I' m stealing this

  • 1
  • 2
  • 3
  • 4
  • 5
  • Post
  • Reply