Modern front-end development: skinny jeans and handlebar mustaches ITT

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »

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

Summit posted:

Forgive my React ignorance, just started working in it in my spare time (stories are sparse at work end of year). Does MobX solve these boilerplate problems? Granted a lot of the details are hidden/magic but it's been working great for me thus far without any need for reducers, actions, etc.

MobX is definitely "cleaner" in what you have to write, due to the fact that, as you pointed out, it's got more "magic" than Redux, which is as bare bones ("close to the metal" :v:

) as it gets really. MobX is a very nice implementation in the small time I've goofed off with it, and next time I work on something inbetween "so small I don't need a thing" and "so big I want Redux" I'll probably use that.

# ? Dec 18, 2016 18:05

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 12:47

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

ToxicSlurpee posted:

I'm kind of curious about something so I figure I'll ask...have any of you used Backbone and what are your opinions on it?

I've been using it lately and I actually quite like it.

I've been using it at work this year on two very different projects and don't have any issues with it but it's clearly very much what you make of it. The project I was on earlier this year had a view/file policy with great test coverage. The one I'm on now is basically a page/file, where a page contains many views with sub-views, all of which live in the same giant file, and does not have good test coverage. One guy on the team just checked in a change to make these 100k lines testable at all, in fact.

It's less of a PITA than hand-rolling the same funconality on top of jQ, but it's also about as opinionated about how you use it, which I'm not a fan of for team projects.

# ? Dec 19, 2016 17:48

Ochowie: Nov 9, 2007

Rocko Bonaparte posted:

Yes--I was going through them. I was just surprised that prompting for a username and password, and saving that information across payloads, was not some basic API thing in YOOL 2016. This is especially because I would consider stuff like that to be sensitive and likely to be screwed up in insecure ways. I would have figured it would be wrapped in some standard calls. My perspective is coming from never doing this kind of thing before now and having set up some expectations from these frameworks before reaching user authentication. That's pretty much all me, but I'm still going to run my mouth about it on the Internet for a little bit.

Generally speaking, the host side with Django was less of a surprise to me.

Take a look at auth0. It provides everything you would need to implement authentication including APIs and examples for most major frontend and backend frameworks.

# ? Dec 19, 2016 21:54

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

I don't know if this is the right thread for this, but I have a perplexing problem that seems to be specific to iPad that is driving me up the loving wall.

I have a web application that sometimes shows bootstrap modals for various interactions. For example, creating an event. I can't get this problem to consistently appear, which makes it even more difficult to ask you guys about, but I'll do my best.

When the user interacts with input fields in the modal, iOS does it's keyboard thing and slides up the keyboard for the user to use. Sometimes there are no issues here. Other times a combination of the following stupid behaviours occur:

1) Tapping on a drop down will for some reason cause the keyboard to begin to slide up, before immediately sliding down again.
2) Some combination of tapping on inputs seems to cause tap events to be received offset to their ACTUAL location. So after inputting information in a few different fields, taps will begin to register as though the user tapped significantly further down the page than what they actually did.

I'm really counting on this being a known issue of some sort such that my terrible descriptions ring a bell with someone. Anyone ever had to deal with this? How did you fix it?

# ? Dec 20, 2016 04:30

Roadie: Jun 30, 2013

The Wizard of Poz posted:

1) Tapping on a drop down will for some reason cause the keyboard to begin to slide up, before immediately sliding down again.

Is something changing focus (even if it's just to the same element again) immediately after the focus or click event fires?

# ? Dec 20, 2016 10:15

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

Ochowie posted:

Take a look at auth0. It provides everything you would need to implement authentication including APIs and examples for most major frontend and backend frameworks.

Ugh... after I got basic authentication going. I still might though.

Well, not so fast.

I am at a point where Django is yelling at me about CSRF when trying to create stuff. It sounded like Angular could set this stuff up automatically when given a CSRF cookie--so long as I got the names right. However, that didn't appear to work, so I'm just being explicit with it right now... which also doesn't work.

In particular, when I log in, I will retrieve the CSRF token Django gives me:

code:

csrftoken = config.headers["X-XSRF-TOKEN"];
...
$http.defaults.headers.post["HTTP_X_CSRFTOKEN"]

I stepped through that in the debugger and saw I did get a token. I set CSRF_HEADER_NAME = "HTTP_X_CSRFTOKEN" in the Django settings file just to hammer it home. It's supposed to be the default according to the docs, but I'm not taking anything for granted.

Then I try to do my save operation:

code:

        console.log("http CSRF is " + $http.defaults.headers.post["HTTP_X_CSRFTOKEN"]);
        var newThing = that.ThingResource.save({
          // some JSON assignments going on here
        }, function(resp, headers){
            //success callback
            console.log(resp);
        }, function(err){
            // error callback
            console.log(err);
        });

It always errors with a 403 and claims I didn't specify a CSRF token. However, that read of HTTP_X_CSRFTOKEN gives me exactly the same value as I had when I originally set it. Is there something else I have to do? I understand it's ugly, but I'm trying to just get the mechanics working.

# ? Dec 23, 2016 00:21

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

For those interested, the problem was that I had to set the token name to HTTP_X_CSRFTOKEN in Django's settings, but set it to X-CSRFToken in JavaScript. Apparently Django does some CGI crap that mutates the header into HTTP_X_CSRFTOKEN. It does that by default, but I started to get explicit just to show that I had the same value both on the client and the server. That was the final problem.

I have a new thing here. I have to do a PATCH to modify a record, but ngResource in Angular doesn't support that by default. I'm seeing a lot of moon stuff about specifying updates do a POST, and then I modify the save prototype for some reason. It doesn't really work. I can get update() to PATCH, but it goes to the directory URL instead of the id URL.

Here I will paraphrase:

code:

function CatService($resource) {

    var that = this;

    that.CatResource = $resource(_urlPrefixes.API + "cats/:cat_id/", null,
        { "update": { method: "PATCH"}});

    that.CatResource.prototype.save = function() {
        if (this.id) {
            return this.update();
        } else {
            return this.create();
        }
    };

    that.createCat = function(cat_name) {
        return that.CatResource.save({
            name: cat_name
        });
    };

    that.addNickname = function(kitty, newNick) {
        var nickList = kitty.nickNames;
        nickList.push(newNick);

        // I figured I would call save() here, and it would
        // hit my save prototype, right? Well, it doesn't! It
        // just does a POST with this.
        that.CatResource.update({
            nick_names: newList
        });
    };
}

It winds up doing a PATCH to cats/ instead of cats/1. What else do I have to do? Also, I assume I should call save(), and it would go into my save prototype, but it doesn't. What's up with that?

# ? Dec 24, 2016 04:50

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Rocko Bonaparte posted:

It winds up doing a PATCH to cats/ instead of cats/1. What else do I have to do? Also, I assume I should call save(), and it would go into my save prototype, but it doesn't. What's up with that?

I don't have a good answer on how to do what you want via ngResource because, well, I don't like it. I prefer doing my own data layers via $http directly, so I can be as specific as I want with my APIs.

So... don't use ngResource.

# ? Dec 24, 2016 04:55

Ochowie: Nov 9, 2007

Rocko Bonaparte posted:

Ugh... after I got basic authentication going. I still might though.

If you want to use Google or Facebook as authentication options it makes it really easy.

# ? Dec 25, 2016 03:09

Professor of Cats: Mar 22, 2009

The Wizard of Poz posted:

I don't know if this is the right thread for this, but I have a perplexing problem that seems to be specific to iPad that is driving me up the loving wall.

I have a web application that sometimes shows bootstrap modals for various interactions. For example, creating an event. I can't get this problem to consistently appear, which makes it even more difficult to ask you guys about, but I'll do my best.

When the user interacts with input fields in the modal, iOS does it's keyboard thing and slides up the keyboard for the user to use. Sometimes there are no issues here. Other times a combination of the following stupid behaviours occur:

1) Tapping on a drop down will for some reason cause the keyboard to begin to slide up, before immediately sliding down again.
2) Some combination of tapping on inputs seems to cause tap events to be received offset to their ACTUAL location. So after inputting information in a few different fields, taps will begin to register as though the user tapped significantly further down the page than what they actually did.

I'm really counting on this being a known issue of some sort such that my terrible descriptions ring a bell with someone. Anyone ever had to deal with this? How did you fix it?

Man that sounds super familiar...

On IOS, it will always do dumb body.scrollTop to push an input into view. And when you have modals where the input isn't on the body, there are use cases where it will calculate incorrectly where to scroll the body to make the input go into view. Add a console.log event listener for scroll on both the body and the modal - to give you an idea what what it is trying to do. Hacks for fixes might include saving the document scrolltop, and upon input focus, making sure the document scroll top stays at its old position...? (just throwing stuff out there)
Hopefully that gives you enough to go off of! Good luck!

e:
For some reason, I think I remember seeing this happen when the document body scrollTop is not zero, and the input is on a fixed/absolute and scrollable div. In my case, I didn't want or need document scroll, so I mad sure I put the document scroll back to zero and added the offset to the scrollable div that should have moved (which shouldn't show any flicker). I could be wrong but maybe worth looking into!

Professor of Cats fucked around with this message at 03:39 on Dec 27, 2016

# ? Dec 25, 2016 19:11

Honest Thief: Jan 11, 2009

I'm trying to wrap my head around webpack and shimming modules:
so my problem right now is that this app I'm working on uses an old release of React, and a localization library, react-intl, whose specific version is not commonJS compatible; at the time the solution found by the devs was to shim said module by exporting the module with react in the needed global context. So right now I'm trying to replicate that, instead of just upgrading the library, because I'm fearful that might just screw things up more. I've tried exporting React to a overall global context but it doesn't work, since the react-intl module just complains it doesn't find react at all.

edit:nevermind, figured it out, the test clause wasn't identifying the right module so didn't apply the imports loader

Honest Thief fucked around with this message at 20:51 on Jan 3, 2017

# ? Jan 3, 2017 13:48

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

Cross-posting here:

I figure there's probably no easy answer to this, but is there a reliable way to detect mobile devices? I want to enable the native <input type="date"> date pickers for mobile devices and tablets (because they are actually not terrible) but not for desktop (because they are actually terrible).

# ? Jan 4, 2017 01:01

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

The Wizard of Poz posted:

Cross-posting here:

I figure there's probably no easy answer to this, but is there a reliable way to detect mobile devices? I want to enable the native <input type="date"> date pickers for mobile devices and tablets (because they are actually not terrible) but not for desktop (because they are actually terrible).

What do you want to do instead?

You might be better off detecting the <input type="date"> feature with modernizr .

# ? Jan 4, 2017 01:43

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

I am in a bit of a bind (har har) in Angular over dynamic URLs. I have a header for my site that I have found requires using explicit ng-bind directives instead of relying on {{ markup tags }}. This has been fine, except that I want to add an internally-pointing URL. It's not working if I do <a ng-href="#/this/{{that}}"></a>, which doesn't surprise me. The {{that}} part is blank just like any other time I do something like that. Is there an equivalent for embedding an ng-bind for my URL string?

# ? Jan 4, 2017 23:06

ZHamburglar: Aug 24, 2006; I have a penis.

Does anyone have some good code-along React Apps? I have a few from UDemy but I want to get a chance to see all different styles and see what I can pick up from each.

# ? Jan 4, 2017 23:47

HaB: Jan 5, 2001; What are the odds?

Rocko Bonaparte posted:

I am in a bit of a bind (har har) in Angular over dynamic URLs. I have a header for my site that I have found requires using explicit ng-bind directives instead of relying on {{ markup tags }}. This has been fine, except that I want to add an internally-pointing URL. It's not working if I do <a ng-href="#/this/{{that}}"></a>, which doesn't surprise me. The {{that}} part is blank just like any other time I do something like that. Is there an equivalent for embedding an ng-bind for my URL string?

Assuming you're using ui-router (and you should be), but ui-sref is the thing you are looking for.

# ? Jan 5, 2017 00:10

putin is a cunt: Apr 5, 2007; BOY DO I SURE ENJOY TRASH. THERE'S NOTHING MORE I LOVE THAN TO SIT DOWN IN FRONT OF THE BIG SCREEN AND EAT A BIIIIG STEAMY BOWL OF SHIT. WARNER BROS CAN COME OVER TO MY HOUSE AND ASSFUCK MY MOM WHILE I WATCH AND I WOULD CERTIFY IT FRESH, NO QUESTION

The Merkinman posted:

What do you want to do instead?

You might be better off detecting the <input type="date"> feature with modernizr .

Someone using a mouse, like on a laptop or desktop, could pretty easily use a datepicker like this: https://eonasdan.github.io/bootstrap-datetimepicker/

But this doesn't work very well for touch devices like mobile or tablet.

As I said, I can't just test for <input type="date"> support because Chrome and Edge on desktop also support it, and I don't want to use their native pickers because they are awful. So what I want is to somehow detect mobile/tablet devices. It doesn't even need to be perfect (since fringe-case users who are incorrectly caught in either category will still be able to enter the dates, it just won't be as pleasant).

I do understand that feature detection is The Right Way� to do this, but I feel this is a special case owing to the utterly awful native datepicker support out there on desktop.

# ? Jan 5, 2017 00:31

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Looking for a good place to learn React? I started watching the Lynda course on it but it doesn't seem like a very good tutorial.

# ? Jan 5, 2017 00:49

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

HaB posted:

Assuming you're using ui-router (and you should be), but ui-sref is the thing you are looking for.

Nope--that's the first I heard of it. My routes so far have been pretty simple. Outside of my immediate need, would I find value in making a switch? I have to consider the wrestling I'll have with it.

# ? Jan 5, 2017 05:38

Plavski: Feb 1, 2006; I could be a revolutionary

Grump posted:

Looking for a good place to learn React? I started watching the Lynda course on it but it doesn't seem like a very good tutorial.

Pluralsight has some great courses.

# ? Jan 5, 2017 08:38

ModeSix: Mar 14, 2009

Rocko Bonaparte posted:

Nope--that's the first I heard of it. My routes so far have been pretty simple. Outside of my immediate need, would I find value in making a switch? I have to consider the wrestling I'll have with it.

UI Router is beautiful and easy to learn. You should definitely be using it.

# ? Jan 5, 2017 14:12

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

The Wizard of Poz posted:

Someone using a mouse, like on a laptop or desktop, could pretty easily use a datepicker like this: https://eonasdan.github.io/bootstrap-datetimepicker/

But this doesn't work very well for touch devices like mobile or tablet.

As I said, I can't just test for <input type="date"> support because Chrome and Edge on desktop also support it, and I don't want to use their native pickers because they are awful. So what I want is to somehow detect mobile/tablet devices. It doesn't even need to be perfect (since fringe-case users who are incorrectly caught in either category will still be able to enter the dates, it just won't be as pleasant).

I do understand that feature detection is The Right Way� to do this, but I feel this is a special case owing to the utterly awful native datepicker support out there on desktop.

navigator.userAgent sniffing is probably your best bet

# ? Jan 5, 2017 15:33

HaB: Jan 5, 2001; What are the odds?

Rocko Bonaparte posted:

Nope--that's the first I heard of it. My routes so far have been pretty simple. Outside of my immediate need, would I find value in making a switch? I have to consider the wrestling I'll have with it.

Yes. Use ui-router. It's much better than the built-in router.

# ? Jan 5, 2017 17:06

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

HaB posted:

Yes. Use ui-router. It's much better than the built-in router.

Ok but first I need to be able to write 5 lines of Angular without catastrophic screwups. Can somebody look at this Plunker? https://plnkr.co/RucVevFuoRMWkgRMMUCU

I am having the damndest problem with ng-if, services, and controllers. I can access and display the values of my controller and service, but ng-if refuses to have anything to do with my service. If I try to invoke things on it directly, no luck. If I try to use the controller as a proxy, no luck.

My goal is the use a service to denote something like a current shopping cart, but I can't display anything with that data because my templates refuse to acknowledge the service through my controller. How am I supposed to do this?

I was feeling like I was getting this and that this was the start of being able to crap out Angular logic, but nope.

# ? Jan 5, 2017 19:03

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Rocko Bonaparte posted:

Ok but first I need to be able to write 5 lines of Angular without catastrophic screwups. Can somebody look at this Plunker? https://plnkr.co/RucVevFuoRMWkgRMMUCU

I am having the damndest problem with ng-if, services, and controllers. I can access and display the values of my controller and service, but ng-if refuses to have anything to do with my service. If I try to invoke things on it directly, no luck. If I try to use the controller as a proxy, no luck.

My goal is the use a service to denote something like a current shopping cart, but I can't display anything with that data because my templates refuse to acknowledge the service through my controller. How am I supposed to do this?

I was feeling like I was getting this and that this was the start of being able to crap out Angular logic, but nope.

I believe you want your Service to look a little more like this:

code:

app.service("TestService", function() {
var srv = {};
srv.handle = "default";
srv.someServiceFunction = function() {
    return "Output of service function";
  };
  
  srv.returnsTrue = function() {
    return ture;
  };
return srv;
});

You should explicitly declare your dependencies , ie app.controller('MainCtrl', ["$scope", "TestService", function($scope, TestService) { }]

Also, it's bad form to access a service directly from a template, you should use your controller as the thing that interfaces between the template and the rest of the application.

Also, use TypeScript, JavaScript is just awful.

# ? Jan 5, 2017 19:32

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

Grump posted:

Looking for a good place to learn React? I started watching the Lynda course on it but it doesn't seem like a very good tutorial.

In the webdev thread I linked to Dan Abramov's egghead courses. They are free and amazing. If I wasn't on my phone, I'd link them here for you but :effort:

EDIT: back on ye olde computer...

Lumpy posted:

As has been suggested, check out Dan Abramov's Redux classes on egghead. Even if you wind up not using Redux, I think the lessons learned are invaluable: https://egghead.io/courses/getting-started-with-redux

He has another one as well: https://egghead.io/courses/building-react-applications-with-idiomatic-redux

Not sure if the second one has been updated to deal with React Router completely changing (for the better, imho) but again, still amazing stuff.

Lumpy fucked around with this message at 20:37 on Jan 5, 2017

# ? Jan 5, 2017 20:00

mpaarating: May 6, 2011; The Baddest Boi

Grump posted:

Looking for a good place to learn React? I started watching the Lynda course on it but it doesn't seem like a very good tutorial.

Egghead.io has fantastic courses on almost all of the major front-end frameworks (many by the people that helped create them). Create React App is a great resource for quickly creating something to play around with. I learn best by doing and Create React App allows you to do the drat thing without worrying about all the extra poo poo that goes into a react app these days.

# ? Jan 5, 2017 20:05

Count Thrashula: Jun 1, 2003; Death is nothing compared to vindication.; Buglord

mpaarating posted:

Egghead.io has fantastic courses on almost all of the major front-end frameworks (many by the people that helped create them). Create React App is a great resource for quickly creating something to play around with. I learn best by doing and Create React App allows you to do the drat thing without worrying about all the extra poo poo that goes into a react app these days.

It would be nice but create-react-app is failing for me and I'm not entirely sure why.

# ? Jan 5, 2017 20:51

reversefungi: Nov 27, 2003; Master of the high hat!

Does anyone have experience with https://reactforbeginners.com/? I saw it recommended highly somewhere, but I'm hesitant to plop down :20bux:

x3 unless a few other people have good things to say.

# ? Jan 5, 2017 21:16

jony neuemonic: Nov 13, 2009

The Dark Wind posted:

Does anyone have experience with https://reactforbeginners.com/? I saw it recommended highly somewhere, but I'm hesitant to plop down x3 unless a few other people have good things to say.

I enjoyed it, it's a quick watch but he covers a lot of useful things. Some of his other courses are free (Learn Redux and JavaScript30, maybe others) so you could always skim one of those to see if you like the style.

# ? Jan 5, 2017 21:24

HaB: Jan 5, 2001; What are the odds?

Rocko Bonaparte posted:

Ok but first I need to be able to write 5 lines of Angular without catastrophic screwups. Can somebody look at this Plunker? https://plnkr.co/RucVevFuoRMWkgRMMUCU

I am having the damndest problem with ng-if, services, and controllers. I can access and display the values of my controller and service, but ng-if refuses to have anything to do with my service. If I try to invoke things on it directly, no luck. If I try to use the controller as a proxy, no luck.

My goal is the use a service to denote something like a current shopping cart, but I can't display anything with that data because my templates refuse to acknowledge the service through my controller. How am I supposed to do this?

I was feeling like I was getting this and that this was the start of being able to crap out Angular logic, but nope.

While I don't agree with Skandranon's suggestion to use TypeScript - you need to read the John Papa style guide for angular.

Think of your Controller as a ViewModel. Your view should never directly interact with (or even have any idea about) your service. Service pumps Data to ViewModel, View interacts with ViewModel, Controller pumps delta data back to Service.

I forked your plunker and John Papa'd it:

Clicky

Some highlights:

- don't use $scope (the explanation why is long and convoluted. Just trust me. More importantly, trust John Papa)
- your logic for your "Boo it's false" checks is wrong. Replace the function call with the value it's returning.

code:

ng-if="{controller.returnsTrue() !== true}"

becomes

ng-if="{true !== true}"  // this is false, so the Boo! message doesn't display

- use factory for services, unless you have the ONE specific use-case which calls for service instead of factory.
- your serviceReturnsTrue function had a typo in it, which I pointed out.

# ? Jan 5, 2017 21:36

reversefungi: Nov 27, 2003; Master of the high hat!

jony neuemonic posted:

I enjoyed it, it's a quick watch but he covers a lot of useful things. Some of his other courses are free (Learn Redux and JavaScript30, maybe others) so you could always skim one of those to see if you like the style.

Thanks! I'll need to go through a bunch of those in the next few weeks.

Also, on the topic of learning material, has anyone come across this guy's website before? http://andrewhfarmer.com/

I'm still a total newbie, so I don't have much of a nose for sniffing out good resources vs. resources that look good but might actually lead you astray. He has some guides and diagrams that looked really useful when I skimmed through them. I'm planning on building my final project for a MOOC I'm taking (CS50) in React, so I'm working on gathering up some good learning resources for when the time comes to start building the thing.

# ? Jan 5, 2017 22:05

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

Thanks guys. The dominant problem in that Plunker was the typo. It didn't help me reconcile with the problem I was really having, but I did sort that out and have some questions about that too. But first:

HaB posted:

While I don't agree with Skandranon's suggestion to use TypeScript - you need to read the John Papa style guide for angular.

Think of your Controller as a ViewModel. Your view should never directly interact with (or even have any idea about) your service. Service pumps Data to ViewModel, View interacts with ViewModel, Controller pumps delta data back to Service.
I forked your plunker and John Papa'd it:

Clicky

Some highlights:

- don't use $scope (the explanation why is long and convoluted. Just trust me. More importantly, trust John Papa)
- your logic for your "Boo it's false" checks is wrong. Replace the function call with the value it's returning.
code:
ng-if="{controller.returnsTrue() !== true}"

becomes

ng-if="{true !== true}"  // this is false, so the Boo! message doesn't display

The John Papa guidelines will give me something to chew on because I've been meaning ask for general development style guidelines.

I feel the need to defend myself over $scope. I was generally not using them, but I threw one in as a test for what I could successfully poke. I was getting to a point of doubting everything I was doing and seeing if there was some magic with $scope that I never understood.

The true != true checks are part of my problem with the original code. I was getting a situation where neither true !== true nor true === true evaluated at all. I have a big question about this because I have a coarse idea of how it came to be. Beyond the problems I was having in the real code over my logic, I had something of a scope problem in my template. In particular, I had a div with my controller that did my ng-if checks for each cell of a table. I ended up moving that controller declaration out to a higher scope in the document and things started to update. I guess the page would initially render without useful data, so it would fall-through to my catch-all. However, when I set something for it to show, those parts of my template wouldn't get a kick to update. Moving the controller higher in the scope got it to wake up. I'm trying to understand if my theory is correct and if I have better methods of controlling this. I would prefer to keep the controller's scope tight for locality in the template, so there is there a little dilly I can put in to help its section wake up?

quote:

- use factory for services, unless you have the ONE specific use-case which calls for service instead of factory.
- your serviceReturnsTrue function had a typo in it, which I pointed out.

Yeah the typo was the main problem in the Plunker, although I didn't have it in my real code, which was a shame. I caught that after lunch and that page pretty much lit right up. The factory thing is something I am trying to understand because I see this mentioned a lot. I would particularly like to know where I should be using a service instead of a factory since it's probably easier for me to frame when to use a service--under certain rare auspices--versus when to use a factory--which is almost all the time.

The situation at hand--which I think I did mention in recent posts, is that I have a collection I want to carry across different views to manipulate. The user starts out without one, so various elements should not be exposed--such as the ones to add or remove items that are in this list I have. That right there was the stuff that refused to update when I set the collection. So in this situation, do I want a factory that happens to return the same handle whenever it is requested? Notationally, a factory and a service appear very similar to me, so I don't fully understand the principles between using one or the other. I understand the objectives, and I have intended to start using factories for all the services that are just data retrievals right now in particular.

Skandranon posted:

You should explicitly declare your dependencies , ie app.controller('MainCtrl', ["$scope", "TestService", function($scope, TestService) { }]

Okay now I need to ask about this, although that style guide might answer it. I've been trying to figure out how I should really do my declarations. In my own code--not in Plunker--I am doing something like:

code:

function ButtController(ButtService) {
    var that = this;

    that.toot = function(how_much) {
        var gas = ButtService.fart(how_much);
        if(how_much > gas) {
            return "shat pants."
        } else {
            return "faaaart."
        }         
    };    

angular.module("ExecuteFartApplication")
    .controller("ButtController", [
        "ButtService",
        ButtController
    ]);

Whereas I see most code just declare a .controller and start cramming all that poo poo right in there:

code:

app.controller("ButtController", function(....)... etc.

I just assumed people do the latter because they're monkeying around in Plunker and then pasting their crap into their offline editor. I though throwing all the code into one declaration was kind of a mess, although it does fix some of my common mishaps like not keying everything into the declaration correctly and then blowing an hour trying to understand why the thing is catatonic. Dynamic languages, am I right?

I much appreciate the help. It didn't get me out of the ditch but you're digging me out of the next one that I haven't even hit yet.

# ? Jan 5, 2017 22:14

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Rocko Bonaparte posted:

Thanks guys. The dominant problem in that Plunker was the typo. It didn't help me reconcile with the problem I was really having, but I did sort that out and have some questions about that too. But first:

I just assumed people do the latter because they're monkeying around in Plunker and then pasting their crap into their offline editor. I though throwing all the code into one declaration was kind of a mess, although it does fix some of my common mishaps like not keying everything into the declaration correctly and then blowing an hour trying to understand why the thing is catatonic. Dynamic languages, am I right?

I much appreciate the help. It didn't get me out of the ditch but you're digging me out of the next one that I haven't even hit yet.

There are two reasons to be more explicit. One is that if you are not, your code will break if you run it through any JS minifyer. Second, you must make sure your name as given in the function matches the string it was defined as, which I find restricting. For example, you CAN define a service as "MyNameSpace.Services.Service1", but cannot use that as a function parameter name.

Rocko Bonaparte posted:

The situation at hand--which I think I did mention in recent posts, is that I have a collection I want to carry across different views to manipulate. The user starts out without one, so various elements should not be exposed--such as the ones to add or remove items that are in this list I have. That right there was the stuff that refused to update when I set the collection. So in this situation, do I want a factory that happens to return the same handle whenever it is requested? Notationally, a factory and a service appear very similar to me, so I don't fully understand the principles between using one or the other. I understand the objectives, and I have intended to start using factories for all the services that are just data retrievals right now in particular.

There is no real difference between the two. Service, Factory, Constant all boil down Providers. Basically, a Service is defined such that the object is returned, and a Factory is defined as just the function (or something like that). They are otherwise the same and serve the same purpose. I only use Services as they line up exactly how a TypeScript class works.

HaB is also clearly some sort of lunatic, TypeScript is wonderful and lines up so well with Angular components/services it is so painful to look at even well formatted plain JS Angular code.

Skandranon fucked around with this message at 22:24 on Jan 5, 2017

# ? Jan 5, 2017 22:21

Plavski: Feb 1, 2006; I could be a revolutionary

TypeScript is just the right way to do things. I know developers who love dynamic typing, who think you should embrace it rather than reject it. To them I say PAH! I work with too many dodgy coders who would crush our source code into a million pieces without hard typing and solid debugging. If you can take the seat-of-your-pants out of a language - do it!

Plavski fucked around with this message at 22:31 on Jan 5, 2017

# ? Jan 5, 2017 22:29

Plavski: Feb 1, 2006; I could be a revolutionary

SALR double post *sigh*

# ? Jan 5, 2017 22:29

teen phone cutie: Jun 18, 2012; last year i rewrote something awful from scratch because i hate myself

Lumpy posted:

In the webdev thread I linked to Dan Abramov's egghead courses. They are free and amazing. If I wasn't on my phone, I'd link them here for you but

EDIT: back on ye olde computer...

Cool I'll check these out. I spent the day at working watching a lot of the Angular 2 Lynda vids and I've concluded that none of it makes sense and I hate it.

Hopefully React doesn't make me feel the same

# ? Jan 6, 2017 00:20

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Plavski posted:

TypeScript is just the right way to do things. I know developers who love dynamic typing, who think you should embrace it rather than reject it. To them I say PAH! I work with too many dodgy coders who would crush our source code into a million pieces without hard typing and solid debugging. If you can take the seat-of-your-pants out of a language - do it!

Also, while the name implies that the whole point is to be strict about types, you actually can be just as loose with your types as you are in JavaScript. You have complete flexibility, nothing is taken away or imposed on you.

# ? Jan 6, 2017 02:13

Rocko Bonaparte: Mar 12, 2002; Every day is Friday!

Would TypeScript save me from mysteriously passing promises into a controller that wasn't expecting them? Or do I need to put childproof covers over all my power outlets?

# ? Jan 6, 2017 03:27

Adbot: ADBOT LOVES YOU

# ? May 22, 2024 12:47

Skandranon: Sep 6, 2008; fucking stupid, dont listen to me

Rocko Bonaparte posted:

Would TypeScript save me from mysteriously passing promises into a controller that wasn't expecting them? Or do I need to put childproof covers over all my power outlets?

Yes, TypeScript is very good at catching things like passing in wrong types to methods. For code you write, it's only as good as the typings you specify, but for most common JS libraries you can get d.ts files (basically, they supply method signatures and interfaces for them). So for example, you will get a huge amount of type safety for all Angular methods. If you write a method that expects a string, and you pass in an object, the TypeScript compiler will throw errors exactly to the effect of "x(name) expects string". If you are using VSCode, you will get this dynamically without having to run your compile step, as well as a significant amount of Intellisense.

# ? Jan 6, 2017 03:57

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Modern front-end development: skinny jeans and handlebar mustaches ITT

«‹›235 »