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

an skeleton: Apr 23, 2012; scowls @ u

I've scored a pretty awesome internship for a local company and started 2 days ago. We are working mainly with Angularjs which is talking to PHP on the backend. I have never really programmed in javascript before and so the past 2 days have been a lot of learning. Luckily, my coworkers are all really cool and helpful and are giving me time to learn this stuff. I was wondering if anyone in here had any advice for learning this stuff more quickly and getting as much out of this internship/impressing my coworkers as much as possible. I really like working with frontend stuff (almost all my previous programming was in C++) so far and could see myself making sexy stuff to interact with for some time into the future.

# ¿ Jan 8, 2014 11:36

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 12:20

an skeleton: Apr 23, 2012; scowls @ u

AngularJS question ahead:
I'm trying to turn off a save button based on one of the inputs inside of an ngGrid (populated dynamically based on data) being invalid. It may not be possible, but does anyone have any bright ideas?

# ¿ Jan 31, 2014 18:52

an skeleton: Apr 23, 2012; scowls @ u

I may be misunderstanding the solutions offered, but I don't think either of those help me. I need to be able to disable a save button, without access to form names, or at least I am finding it very difficult to find the form names. I have an angular foreach() function going through each row, and I tried to check if the forms are valid by seeing if getElementsByClassName('ng-invalid') had an index of >-1, but I can't figure out how to find the element name to check for it. So I am thoroughly confused right now.

# ¿ Feb 3, 2014 17:42

an skeleton: Apr 23, 2012; scowls @ u

I have an ng-grid that has a variable amount of rows created when the page is loaded. The issue is that the grid seems to have an isolated scope, so it doesn't seem like the usual validation methods are workable. Which part of the code would you want to see?

# ¿ Feb 3, 2014 18:55

an skeleton: Apr 23, 2012; scowls @ u

There's also something popping up when I document.getElementsByClassName() called "ngPagerCurrent" and I can't tell if it is a part of ng-grid or some Angular remnant but if I could get rid of that then I could probably solve my problem. The problem is that "ngPagerCurrent" has the "ng-invalid" class and its screwing up the results of that function.

edit: I developed a workaround where it checks if "ngPagerCurrent" is one of the elements with ng-invalid as a class and if it is, it disregards that. So invalidCount increases if any other fields are invalid and, therefore, I should be able to disable the save button. Really kind of awkward but oh well.

an skeleton fucked around with this message at 19:31 on Feb 3, 2014

# ¿ Feb 3, 2014 19:23

an skeleton: Apr 23, 2012; scowls @ u

EVGA Longoria posted:

What are you using to determine if it's valid or not? I'm assuming adding ng validations to the template? I don't see anything in the API that could be doing it otherwise.

Can you post the HTML and JS that are creating and populating this grid?

It's realllly complex. We have a service that takes in strings as parameters and turns them into parameters for the nggrid via its API. Yes we were trying to manipulate the ng-grid by wrapping it in a form tag in html and then manipulating it with a $watch that iterates thru the grid whenever there is a change and if one of the ng-grid's form inputs was $invalid, then it turned off the save button. Problem is the $valid variable seemed to be unattainable from within the controller. Anyways we came up with the solution of just searching the document for elements with the "ng-invalid" class which is applied on invalid input, and if there were any then the save button was ng-disabled. This had a couple of other complications but basically worked

# ¿ Feb 4, 2014 06:19

an skeleton: Apr 23, 2012; scowls @ u

Of course it's wrong. We tried doing it the correct way as you described (giving the form a name) and it did not work.

# ¿ Feb 6, 2014 00:06

an skeleton: Apr 23, 2012; scowls @ u

etcetera08 posted:

Ng-grid can emit events upon cell changes, you don't have to do any of that stuff.
Also it's not a form, don't treat it like one.

How do you detect the cell change?

# ¿ Feb 6, 2014 08:44

an skeleton: Apr 23, 2012; scowls @ u

EVGA Longoria posted:

http://angular-ui.github.io/ng-grid/

afterSelectionChange function (rowItem, event) {} Callback for when you want to validate something after selection.

It's a grid option, so you just give it the callback. Edit is a selection event, so you're probably doing this anyway.

Apologies in advance for being obtuse, but does that only trigger after you change selection-- i.e., when you click on another row or off of another row? Because our save button needs to disable as soon as bad input is entered, not after they click on some other row/off-grid. Also, what do you pass into rowItem? The name of "name" of the item given in the cell template?

# ¿ Feb 6, 2014 17:40

an skeleton: Apr 23, 2012; scowls @ u

Got a question. I'm an intern at a local company and one of our goals this month is to get jasmine/karma testing online for one of our company's web applications this month. Problem is, the people who are supposed to help us are always busy and it doesn't seem like its gonna get done unless we do it ourselves. However I have no experience with unit testing and I'm feeling kinda intimidated by the whole idea, does anyone have any guidance for getting a jasmine/karma testing framework online for a large angular/jquery web app?

# ¿ Mar 8, 2014 05:19

an skeleton: Apr 23, 2012; scowls @ u

redacted

an skeleton fucked around with this message at 19:12 on Mar 13, 2014

# ¿ Mar 12, 2014 23:16

an skeleton: Apr 23, 2012; scowls @ u

Forget the previous problem, have a new problem.

We can get jasmine testing to work for one "it" on our angular application, but each subsequent test fails, even if its just expect(3).toBe(3) and nothing else. The error we get is:
Error: [ng:areq] Argument 'fn' is not a function, got <name of controller>

# ¿ Mar 13, 2014 19:13

an skeleton: Apr 23, 2012; scowls @ u

Sooo I'm trying to write jasmine unit tests for our big angular web app (which was not designed with unit testing in mind) and there's something funny happening. We have a checkValue() function that basically checks if a field is blank/invalid and if not, returns that value. The strange thing is, the logic (which was not written by me) seems to be checking for an array. But the <select> directive we are using only makes the value an array if you change it in the view, as far as I can tell. When I'm running jasmine tests I can't seem to replicate this effect (since I am not affecting the value from the view but just manually reassigning values from the unit test), so the tests always crash when the checkValue() function tries to run .join() on the value. Basically I am at a loss of how to make our app think we changed the value from the view and not manually from inside the test, I guess.

Sorry if this makes no sense-- I'm a scrubby intern just learning the ropes with little/no supervision :shrug:

edit: To make matters worse, I'm not sure if the <select> directive is angular native or a custom one written by us

# ¿ Mar 25, 2014 17:20

an skeleton: Apr 23, 2012; scowls @ u

Any clue why an angular filter would throw too much recursion errors into the console/firebug?

# ¿ Apr 21, 2014 22:33

an skeleton: Apr 23, 2012; scowls @ u

I have a question. I'm a novice developer (been seriously developing for about a year or so) and I am finally feeling pretty proficient in AngularJS (I still kinda suck at creating directives from scratch but whatever). I kind of have the itch to learn a new JavaScript framework, I was thinking Backbone or Ember. However, I have 2 questions.

1) Is there a real plus to learning to different frameworks or should I just keep at one and if I ever have a serious need for the other, switch over?

2) What would you use Backbone for that you wouldn't use Angular for? Like is there a specific type of application that just screams Backbone? (ditto for Ember, I guess)

Of course the real answer to my question 1 is "just do it and find out you dickhead, you're still a newb" but I'd rather listen to internet strangers' theories. Thanks!

# ¿ Jan 7, 2015 05:32

an skeleton: Apr 23, 2012; scowls @ u

I've only used Linux and Windows to any reasonable extent. If I can get around in Mint on the command line, does that mostly translate over to Mac?

# ¿ Mar 6, 2015 23:21

an skeleton: Apr 23, 2012; scowls @ u

Where do you guys find these people? They are awful

# ¿ Apr 1, 2015 22:09

an skeleton: Apr 23, 2012; scowls @ u

I have an angularjs directive that has some scope functions and some parser/formatter functions. It seems the ctrl (4th parameter of the linking function) object is different in the scoped functions than in the parser functions. what gives? here's a rough example

code:

link function(a, b, c,  ctrl){

 scope.blarg = function(){
   console.log(ctrl[0]);
 }

 modelCtrl.$parser.unshift(function(){
  console.log(ctrl[0]); //value will be different
 });

}

# ¿ Jun 30, 2015 17:26

an skeleton: Apr 23, 2012; scowls @ u

Thanks for the answer earlier, Skandranon. I typed out a longish reply to you but somehow it got lost in the Aether. Nonetheless, your advice was helpful.

I have another angular issue though -- I have a field (Angular UI Datepicker) that is always being marked as ng-invalid-required, in other words it is failing the required validation, gaining both "ng-invalid" and "ng-invalid-required" classes and messing up validation for the page, which involves submission being disabled if any field is invalid.

If I remove the ng-required attribute, the field validates just fine. All the other datepickers (there are a lot in the app), required or not, work fine, except a small subsection of them in this page.

# ¿ Jul 10, 2015 17:21

an skeleton: Apr 23, 2012; scowls @ u

I figured it out, though it still doesn't really make sense to me.

I have some $formatter code, that is parsing the date value.

code:

	if(tempMoment.isValid() && input){
                        tempMoment = tempMoment.format(config.correctFormat);
                    } else {
                        tempMoment = '';
                    }

It works now, but it didn't when it was this

code:

	if(tempMoment.isValid() && input !== undefined){
                        tempMoment = tempMoment.format(config.correctFormat);
                    } else {
                        tempMoment = '';
                    }

Because some empty inputs were defaulting to null or empty string, and they were therefore being defaulted into the view as moment(), aka today. For whatever reason this was messing up the ng-required validation.

# ¿ Jul 10, 2015 20:33

an skeleton: Apr 23, 2012; scowls @ u

Management recently handed down the decision to go with a type-based (rather than feature etc.) based folder structure for our Angular app. I don't like it but I want to know other people's opinions. Thoughts?

# ¿ Dec 22, 2015 05:18

an skeleton: Apr 23, 2012; scowls @ u

Odette posted:

What the gently caress is type-based folder structure? Something like css/ js/ html/ img/ objectX/ objectY/?

lol not *quite* that bad, but close. we're talking controllers/ services/ views/ etc. etc.

they wanted type-based. most of us (all of those experienced in Angular) wanted to do feature-based of some sort. they told us to do research and when it turned out 9/10+ articles, the Angular team, and prominent community leaders preferred feature-based, they told us to do type-based anyway and said our research was "biased"

# ¿ Dec 22, 2015 05:51

an skeleton: Apr 23, 2012; scowls @ u

Kobayashi posted:

Kind of a shot in the dark here, but does anyone use Selenium (or some front end for Selenium) for functional testing? And if so, tried to do full page screenshots? Apparently there's some years-old bug in Chrome webdriver that makes this not work. But Firefox and Phantom have their own issues. Like, surely mine isn't the only company in the world that wants to screenshot functional tests on a wide range of browsers (including mobile). Can someone point me at the right Google terms?

I worked on some integration testing before that used Selenium and Protractor. It seemed to work OK with your usual smattering of bugs due to browser/dependency issues.

# ¿ Aug 14, 2016 22:29

an skeleton: Apr 23, 2012; scowls @ u

Hi, does anyone have experience with or suggestions for measuring stuff like load times and other user-related metrics in the browser (to send back to the server for analysis)? I'm interested in any libraries, platforms, roll-your-own techniques or whatever you've got.

# ¿ Oct 6, 2016 01:56

an skeleton: Apr 23, 2012; scowls @ u

well why not posted:

You mean something like GT Metrix or something like analytics' speed tools?

Yes, anything that could reveal useful metrics.

# ¿ Oct 7, 2016 06:34

an skeleton: Apr 23, 2012; scowls @ u

Anyone have a recommendation for a good (front-end) lightbox/image carousel-y type library? Slick wasn't quite cutting it for us in terms of responsiveness. Just need to be able to cycle through a list of images and look good on mobile or desktop.

# ¿ Dec 5, 2016 23:08

an skeleton: Apr 23, 2012; scowls @ u

We have an image viewer of sorts in our app which allows a user to upload photos. If this photo is an iOS photo taken in portrait mode, for whatever reason, it is displayed in its side (rotated 90 degrees) instead of upright. right now the image is set into a background, but earlier it was in a regular old <img> tag, and both methods resulted in the img being sideways. anyone have a solution to this? i suppose we can read the metadata and maybe do some css rotation magic, but wanted to reach out before we tried that.

# ¿ Dec 11, 2016 07:02

an skeleton: Apr 23, 2012; scowls @ u

geeves posted:

Are you hosting the image or referencing? CSS could work, but if you read the rotation, you also could change the native image with an image library like imagemagick when they upload. During the upload you can have 3 functions for "Rotate Left, Rotate Right, Rotate 180".

its a bit of an overwrought process, but basically they upload the image directly to s3 and let us now when that's done, so theres a few different things going on there. i think we've decided on doing an image proxy where we'll be rotating the pictures appropriately on the backend after upload, tl;dr probably won't need to resort to css magic.

# ¿ Dec 12, 2016 03:59

an skeleton: Apr 23, 2012; scowls @ u

I like Mongo. I think its perfectly fine, but the app I built in it wasn't some crazy large-scale / financial / medical app so YMMV.

Another question: what is the consensus on tools such as Browserstack? Anyone have experience using it, was it worth it, or is there an alternative you liked better?

# ¿ Dec 13, 2016 10:18

an skeleton: Apr 23, 2012; scowls @ u

Hi, I was wondering if anyone has a resource, blog, site, etc. that aggregates / talks about / otherwise lists research that is relevant to UX/UI in software engineering / Human-computer Interaction.

edit: anything vaguely similar to this description would also be helpful. im not sure exactly what im looking for other than stuff that could help facilitate data-driven approaches/understanding of UX/UI engineering

an skeleton fucked around with this message at 08:15 on Feb 7, 2017

# ¿ Feb 7, 2017 08:08

an skeleton: Apr 23, 2012; scowls @ u

Has anyone worked with/built an api adhering to this spec before?

http://jsonapi.org/

(Any advice or guidance around using this type of API is appreciated!)

# ¿ Feb 21, 2017 22:13

an skeleton: Apr 23, 2012; scowls @ u

I'm really not looking for anything except for any super-important advice that i may not get from scanning the documentation. It does look like the redux implementation library uses redux-thunk which we are currently not using in favor of redux-saga, so I'm not sure if we'll have to roll our own translation to/from the API on the front-end.

# ¿ Feb 22, 2017 00:46

an skeleton: Apr 23, 2012; scowls @ u

Plavski posted:

What do you guys use for your unit/e2e testing?

for our react app --
unit -- karma/mocha/chai/enzyme and a couple of karma plugins like karma-webpack

e2e - none yet :troll:

# ¿ Feb 26, 2017 23:14

an skeleton: Apr 23, 2012; scowls @ u

For the main app I'm working on right now, we're on Redux-saga after moving away from redux-loop for our async stuff and handling long transactional stuff (e.g. using redux-saga 'race' to handle complex menu interactions which can be a series of different actions). Pretty happy with it so far, except we haven't wrapped our head around unit testing the sagas yet, and I have a feeling that's going to be quite the task for some of the more complicated sagas. I *can* envision them being tough to debug, especially once you have multiple sagas running in the background.

Anyways, I was wondering -- how do y'all evaluate 3rd party front-end libs to use in your project? I'm in need of a react carousel and there's at least 3 options to consider. I find that, after desirable features, I'm always biased towards picking 3rd party packages that have the most "stars" or contributors listed on github; my thought is that kinks and errors are more likely to be fixed or known by the community, but I don't know that that's how it always translates into reality.

# ¿ Mar 12, 2017 08:38

an skeleton: Apr 23, 2012; scowls @ u

We use flow on our project and its good, but i really feel like the industry is moving more in the direction of TypeScript. It just seems like there's more momentum behind it. I don't have any data to back this up but generally I see typescript typing a lot on 3rd party libraries but not so much for flow.

# ¿ Apr 16, 2017 20:57

an skeleton: Apr 23, 2012; scowls @ u

VS code is pretty sweet and i find that using command line for Git is more than sufficient

# ¿ Apr 26, 2017 01:04

an skeleton: Apr 23, 2012; scowls @ u

Has anyone ever used keen.io?

# ¿ May 9, 2017 04:02

an skeleton: Apr 23, 2012; scowls @ u

Anyone have any suggestions or good experiences with trying to share CSS/whatever your styling language is across multiple projects for consistency? We're a react shop if it matters.

# ¿ Jun 20, 2017 00:44

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 12:20

an skeleton: Apr 23, 2012; scowls @ u

To someone who asked earlier...

I moved from Angular to Backbone and React as far as front end tech goes, obviously with plenty of vanilla JS and jquery sprinkled in-between/on top of for one reason or another (simple project, legacy code that mixed the two, blah blah blah).

I used to think Angular was amazing because I spent years doing 1.x and once you learn it, it is pretty cool. John Papa's style guide informed how I developed Angular and really leveled me up as far as angular dev goes.

Then I moved to React/Redux. It was a bit weird at first but now I think its easily better than any other framework I've used (like I said, mainly just Angular 1.x and Backbone, a smattering of other things). The paradigm shift it introduces is worthwhile IMO, or if you dont want to call writing your html elements inline with your JS a paradigm shift, its just a tool that feels natural to use, like its breaking down barriers that dont have to exist.

That being said, I wouldn't hesitate to, and think I would actually enjoy learning, Angular 2 or Vue if I had sufficient incentive to.

But React + Redux is just awesome. Throwing typescript or flow into the mix seems to help smooth it out even more.

# ¿ Sep 28, 2017 02:03

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