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

excidium: Oct 24, 2004; Tambahawk Soars

Does anyone have any suggestions on organizing large projects and coming up with trackable and achievable goals to prevent being overwhelmed? I feel like I'm getting no where on this thing because I spend too much time researching ways to do things instead of just doing them due to a lack of organization and structure. Any tips would be appreciated.

# ¿ Dec 9, 2013 18:13

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 08:03

excidium: Oct 24, 2004; Tambahawk Soars

A MIRACLE posted:

What project management tool are you using? I'm not a die hard agile fanboy but it can be helpful to organize your project into epics, features, sprints, bugfixes, release schedules etc. Look into kanban too if you like writing stuff on post it notes

Right now all I have is Todoist set up to try to somewhat organize my ideas/goals to track against, but I'm not all that impressed with it.

# ¿ Dec 9, 2013 19:27

excidium: Oct 24, 2004; Tambahawk Soars

Hopefully this is the right place to ask AngularJS + PhoneGap questions. I created a pretty basic app locally that works perfectly in the browser. When I go to emulate it though my routes all stop working. I get file:///(route-name) Page load failed with error: The requested URL was not found on this server. So I get that it's most likely a cross origin request issue, but I don't know how to get around it yet. I have approximately 20 some-odd routes and 20 directives that all use templateUrl files to load my page data. I'm stuck on what to do to get this working.

# ¿ Jan 30, 2014 04:46

excidium: Oct 24, 2004; Tambahawk Soars

Well, this was a totally offline app, so my first thought was that the files would just work similar to how they do locally (but I guess that's with a web-server). I could technically re-do the thing so that it's not doing any templateUrl requests, but it seemed like it should just work anyway. I'll look at the HTML5 caching though, see if that works for me.

# ¿ Jan 30, 2014 05:36

excidium: Oct 24, 2004; Tambahawk Soars

Maluco Marinero posted:

The Templateurl calls are fine if you serve from an endpoint rather than try to run it as a local file. Just use the cache manifest to specify that the browser will persist all the relevant resources, including the template URL files.

Is it not possible to download these files as part of the app package so that it doesn't have to access the internet at all? A pre-populated cache of sorts?

# ¿ Jan 30, 2014 16:08

excidium: Oct 24, 2004; Tambahawk Soars

Maluco Marinero posted:

I'm unsure, this is where I leave off as I haven't got much experience with Phonegap itself. A preloaded appcache would be great if it's possible, otherwise a way for a phonegap to act as a local 'server' so were not trying to do direct file access which clamps down hard on browser permissions.

I'm assuming that you want to have an almost offline install right? Otherwise maybe there's a way to populate the appcache in the install process.

Well the idea was that the app itself could be used offline and downloaded/installed in one go from either the iTunes or Google Play store. I didn't want to learn native code in 2 languages to code what was a pretty simple app so I thought HTML/JS would be a good alternative with PhoneGap covering the device specific stuff around my code. I'm thinking that it might just be better to change my template calls to template: '<html goes here>' and prevent the need for most/all of the templateUrl: calls that are causing the issues to begin with.

# ¿ Jan 30, 2014 21:42

excidium: Oct 24, 2004; Tambahawk Soars

So I've wrote an app that I'm going to publish and it works fine and dandy. This is the first time I've really used AngularJS and wrote a non-trivial JS app. I really want to take my work now and learn from my mistakes to improve my efficiency going forward. I feel like a major sticking point is code repetition. Looking at this snippet, what can I do to improve this code? I have a bunch of different calculations and they are all set up exactly like this. It seems like the favorite stuff should be easy to extract but I'm not sure where to start.

code:

angular.module('CalcApp')
  .controller('XYZController', function ($scope, $route, localStorageService) {
		$scope.equation = {};
		$scope.equation.name = 'XYZ formula';
		$scope.equation.formula = '(a * 1.5) + 8 � 2';
		$scope.change = function () {
			$scope.equation.outputLow = (($scope.equation.a * 1.5) + 8) - 2;
			$scope.equation.outputHigh = (($scope.equation.a * 1.5) + 8) + 2;
		};
		$scope.isFavorite = localStorageService.get('xyz');
		$scope.addFavorite = function() {
			localStorageService.add('xyz', true);
			$route.reload();
		};
		$scope.removeFavorite = function() {
			localStorageService.remove('xyz');
			$route.reload();
		};
	});

# ¿ Feb 19, 2014 04:53

excidium: Oct 24, 2004; Tambahawk Soars

[edit] Asking in the Android thread since that seems like the more logical place.

excidium fucked around with this message at 18:13 on Feb 21, 2014

# ¿ Feb 21, 2014 07:01

excidium: Oct 24, 2004; Tambahawk Soars

New AngularJS question relating to services. I'm using the MEAN stack and have the Yeoman angular-fullstack generator installed. I'm trying to add some more functionality to the User Mongoose/AngularJS controllers to retrieve all Users in the DB and return them in an array that I can then use in my views. I created the API call and it's returning data just fine, but I can't seem to hook it up from the Angular side.

This is the default code in the scaffolded app:

JavaScript code:

angular.module('infinityApp')
  .factory('User', function ($resource) {
    return $resource('/api/users/:id', {
      id: '@id'
    }, { //parameters default
      update: {
        method: 'PUT',
        params: {}
      },
      get: {
        method: 'GET',
        params: {
          id:'me'
        }
      }
	  });
  });

My API path to get all users is just a GET call to '/api/users'. How can I integrate that into this module without breaking the other functionality that's already here?

To see the angular-fullstack scaffold check out this github: https://github.com/DaftMonk/generator-angular-fullstack

excidium fucked around with this message at 19:04 on Mar 11, 2014

# ¿ Mar 11, 2014 18:57

excidium: Oct 24, 2004; Tambahawk Soars

excidium posted:

New AngularJS question relating to services. I'm using the MEAN stack and have the Yeoman angular-fullstack generator installed. I'm trying to add some more functionality to the User Mongoose/AngularJS controllers to retrieve all Users in the DB and return them in an array that I can then use in my views. I created the API call and it's returning data just fine, but I can't seem to hook it up from the Angular side.

This is the default code in the scaffolded app:
JavaScript code:
angular.module('infinityApp')
  .factory('User', function ($resource) {
    return $resource('/api/users/:id', {
      id: '@id'
    }, { //parameters default
      update: {
        method: 'PUT',
        params: {}
      },
      get: {
        method: 'GET',
        params: {
          id:'me'
        }
      }
	  });
  });
My API path to get all users is just a GET call to '/api/users'. How can I integrate that into this module without breaking the other functionality that's already here?

To see the angular-fullstack scaffold check out this github: https://github.com/DaftMonk/generator-angular-fullstack

Well, to answer my own question, there is a built in default option for save, query, get and delete when using the $resource functionality. So all I had to do was point my working API backend to be called query and then just use the resource as is. Sweet!

# ¿ Mar 12, 2014 00:02

excidium: Oct 24, 2004; Tambahawk Soars

New weird AngularJS issue that I can't seem to figure out. I'm working with $resource to do all my CRUD operations and did some basic mocks initially to prove out the functionality before implementing real models/controllers. In this proving out routing/controllers I set up a redirect on the update call that was added to the $resource (since there is no default PUT operation for some reason). So here's what that code looks like:

JavaScript code:

  .controller('PersonEditCtrl', function ($scope, $http, Person, $routeParams, $location) {
    $scope.form = {};

    $scope.person = Person.get({id: $routeParams.id});

    $scope.update = function() {
      Person.update({id: $routeParams.id}, $scope.person, function() {
        $location.path('/person');
      });
    };
  });

This works great and on success the app is redirected to url/person which is my list of all people. Now utilizing this functionality with my real controller I get much different results. Here's the real controller code:

JavaScript code:

  .controller('UserAdminRolesEditCtrl', function ($scope, Role, $routeParams, $location, $http) {

    $scope.role = Role.get({id: $routeParams.id});

    $scope.update = function() {
      Role.update({id: $routeParams.id}, $scope.role, function() {
        $location.path('/useradmin/roles');
      });
    };

  });

When this update function is called my role is updated correctly, but then it does a GET request to /? and hits my otherwise route configuration. It never tries to hit the /useradmin/roles path at all. I really don't understand what could be the different between the two sets of code that would cause it to work correctly for one but not the other. Any ideas?

# ¿ Mar 18, 2014 15:22

excidium: Oct 24, 2004; Tambahawk Soars

spacebard posted:

Any typos in your app's route definition? That's all I can think of. Can you set a watch statement in web inspector and see why it's not hitting the route?

It's weird, it's not even hitting my success callback on the update. It just goes off the tracks somehow. I don't understand why one version works fine and the other doesn't.

# ¿ Mar 18, 2014 19:32

excidium: Oct 24, 2004; Tambahawk Soars

fuf posted:

Is the official angular "phonecat" tutorial out of date / broken?

Step one is to launch the node web server in angular-phonecat/scripts/web-server.js, but the file doesn't exist:

https://github.com/angular/angular-phonecat/tree/master/scripts

Any other good angular tutorials someone can recommend? (bonus points for angular + node)

This is the best one I've done so far, but it doesn't get into much detail:

http://scotch.io/tutorials/javascript/creating-a-single-page-todo-app-with-node-and-angular

Bookmark this page: https://github.com/jmcunningham/AngularJS-Learning

If you're using Node you probably want to look at the whole MEAN stack (MongoDB, ExpressJS, Angular, NodeJS). ExpressJS will save you a lot of time setting up your back end. Google MEAN stack tutorials and you should be able to find quite a bit about it with examples.

# ¿ Apr 1, 2014 14:29

excidium: Oct 24, 2004; Tambahawk Soars

fuf posted:

(the only issue is that urls look like site.com/#/news instead of site.com/news)

They don't have to! https://docs.angularjs.org/guide/$location and HTML5Mode settings.

Has anyone had a play with Polymer yet? Any thoughts so far for building any non-trivial apps?

excidium fucked around with this message at 02:24 on Jul 1, 2014

# ¿ Jul 1, 2014 02:20

excidium: Oct 24, 2004; Tambahawk Soars

Pollyanna posted:

We should put that in the title.

I'm amazed at all the different choices for MV* frameworks on Javascript. What the hell do I choose we're interested in teaching our clients Ember for our upcoming class, but I dunno if I like it - too opinionated. I personally like more freeform/simple and obvious frameworks like Knockout and React (although I dunno if React is actually MV* instead of just V). I'm thinking my next project will be a for-real single page app with no reloading, RESTful CRUD, and cutesy little UX widgets so I can get right into a good MVC framework. Problem is which one to choose so I'm starting with just reviewing how JS implements MVC/MVVM in general. That's what made Python/Ruby frameworks make sense to me, after all. Maybe we should also cover a little bit of how MVC works in here, too.

If you want a bunch of resources just look at the MEAN stack - MongoDB, ExpressJS, AngularJS, Node. Full MVC framework with REST API creation through Express. Angular is going to have a bunch of resources available for learning.

# ¿ Jul 16, 2014 15:09

excidium: Oct 24, 2004; Tambahawk Soars

I like http://en.wikipedia.org/wiki/Analysis_paralysis

# ¿ Jul 16, 2014 20:50

Adbot: ADBOT LOVES YOU

# ¿ May 4, 2024 08:03

excidium: Oct 24, 2004; Tambahawk Soars

Looking for some ideas and this was the best place to start I think:

My company's software is installed on Windows environments and uses IIS. We have a bunch of component software that makes up our suite of tools and unfortunately the installer process is kind of a huge pain in the rear end. While we are waiting for the platform engineering team to straighten things out and make it a lot easier, I am looking for ways to streamline the developer ramp up time. We are currently using Oracle VM VirtualBoxes with a base set-up of the platform and some other tools. The developer then just runs and works directly on that Host machine.

Problems:
Image size is huge. Downloading for some of the developers that work on this is a pain.
Licensing. We don't have Office installed on the Host machine due to licensing so developers are required to switch back and forth, moving files when necessary to work on Office related items.
Resources. To reliably run the VM you're going to need 8GB of RAM, most likely more. This is fine for most of our guys in the US, but offshore developers have lesser baseline machines and a longer time for upgrade.

Ideally I'd like to see something that runs the VM in the background with a mapped drive to the environment that can be accessed from the Host machine. The Guest should basically just be the smallest Windows image I can get with SQL, IIS and the platform software. This would allow us to hit the associated web server that the Host machine creates to test coding changes before committing them.

Any suggestions would be great!

# ¿ Oct 27, 2014 18:06

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