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
pepito sanchez
Apr 3, 2004
I'm not mexican

The Wizard of Poz posted:

One of the major potential benefits I can think of that using TypeScript might offer, would be an IDE being capable of using decent Intellisense and 'instant' error checking (so if you type the wrong property name, you find out right away thanks to a red line or something). Is there an IDE that supports this? Please keep in mind I've never actually tried TypeScript.

for a light-weight IDE (a bit similar to sublimetext) this is exactly what the new visual studio code IDE does. intellisense in vs code with typescript is really good and cool. all you have to do when working with some library or framework is import the corresponding type definition, and there are hundreds upon hundreds of them, imported with easy command line args, specially easy in vs code when i can just right click and open a path in console. i started using ConEmu instead of the default windows cmd window, because it started getting a bit annoying when you need multiple on at once. on the typescript website you can download the latest version for vs 2013 and 2015. i found this little project and it's teaching me a lot, and though it's angular/c# specific, it's typescript, and i'm doing my own thing from it.

Adbot
ADBOT LOVES YOU

piratepilates
Mar 28, 2004

So I will learn to live with it. Because I can live with it. I can live with it.



I think WebStorm has type completion and stuff for TypeScript, and it's a pretty dope web IDE otherwise.

luchadornado
Oct 7, 2004

A boombox is not a toy!

Sublime or vim and a lint/hint plugin are probably still my favorites - no idea how they play with typescript though.

That example from before doesn't make sense like someone pointed out. It's setting variables and overwriting them immediately. It doesn't seem to pull in 'value' from anywhere or ever set the 'number' property. A method is, for most intents and purposes, just a function that is a property of an object. Why is the distinction important? For most entry-mid developers it really isn't. "Hiding" a method on an object that looks like a plain old number is abusing the expressiveness of Javascript in my opinion because it makes it harder to understand and doesn't really make anything more elegant or performant. I've done it a few times with special use cases I can't think of off the top of my head. If you want an object with value properties and methods, just clearly name/assign it as such.

Thermopyle
Jul 1, 2003

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

The Wizard of Poz posted:

One of the major potential benefits I can think of that using TypeScript might offer, would be an IDE being capable of using decent Intellisense and 'instant' error checking (so if you type the wrong property name, you find out right away thanks to a red line or something). Is there an IDE that supports this? Please keep in mind I've never actually tried TypeScript.

https://www.jetbrains.com/webstorm/help/typescript-support.html

Blinkz0rz
May 27, 2001

MY CONTEMPT FOR MY OWN EMPLOYEES IS ONLY MATCHED BY MY LOVE FOR TOM BRADY'S SWEATY MAGA BALLS
Visual Studio Code is basically designed for TypeScript.

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

Blinkz0rz posted:

Visual Studio Code is basically designed for TypeScript.

AND it's written in TypeScript as well, so if anyone knows about issues in TypeScript, it's the people writing VS Code.

White Light
Dec 19, 2012

Ochowie posted:

The original version doesn't make sense to me. It has an inner function that is never called so the outer function doesn't return anything. Also, randomNumber.number would be undefined in the original version wouldn't it? I know javascript is hosed up but I don't think Math.floor adds a number property to randomNumber silently. Your version makes sense except it still doesn't return anything from newGame().

What should I add to return something for newGame()? Is it missing a return statement somewhere?

Also, I was stressing out cause I got less than two weeks to get this stuff in my noggin till I have to pony up another $300 to renew my Thinkful subscription. Pressure is intense!

White Light fucked around with this message at 16:18 on Sep 3, 2015

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

Parrotine posted:

What should I add to return something for newGame()? Is it missing a return statement somewhere?

Also, I was stressing out cause I got less than two weeks to get this stuff in my noggin till I have to pony up another $300 to renew my Thinkful subscription. Pressure is intense!

Probably? In the version I posted, newGame() could return randomNumber, but that still depends on who is calling newGame() and what it is doing with it. randomNumber has enough information for a UI to hook up and run through the "guess number" game, but it's not the whole application by far.

pepito sanchez
Apr 3, 2004
I'm not mexican

Parrotine posted:

What should I add to return something for newGame()? Is it missing a return statement somewhere?

Also, I was stressing out cause I got less than two weeks to get this stuff in my noggin till I have to pony up another $300 to renew my Thinkful subscription. Pressure is intense!

what is that function supposed to return? what does the rest of the program do?

my first school project and first experience programming anything was a game of simon in javascript. that was hell to figure out having no idea how any languages worked. yes, they started CS with JS.

Opulent Ceremony
Feb 22, 2012

Bruegels Fuckbooks posted:

Microsoft Visual Studio 2013.

I was amazed and delighted when TypeScript errors automatically popped up in the normal Build Errors section, telling me my build failed.

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

Opulent Ceremony posted:

I was amazed and delighted when TypeScript errors automatically popped up in the normal Build Errors section, telling me my build failed.

VS2013 has ok support for TypeScript , but anything beyond simple use-cases you'll probably want to use grunt or gulp to build your project, and VS2013 does not have good integration options for them. VS2015 is supposed to have significantly improved that, and also added project types which work well with TypeScript SPA, but I haven't had the chance to try them out yet. If you are just doing HTML/CSS/TS, VS Code is much more lightweight and easier to start with. If you are working with both TypeScript & C# integrated, VS2015 is your best bet.

I also never found a good way to move between versions of TypeScript with VS2013. I hope VS2015 has fixed this.

White Light
Dec 19, 2012

pepito sanchez posted:

what is that function supposed to return? what does the rest of the program do?

my first school project and first experience programming anything was a game of simon in javascript. that was hell to figure out having no idea how any languages worked. yes, they started CS with JS.

It's just a simple number guessing game: You type in your guess on what the number is supposed to be, then the program will tell you if your guess was 'hot' or 'cold' based on how close it was to the actual number. When the user guesses the secret number, the app lets them know it, and a new game is started. Also, I believe the counter is supposed to change depending on the number of guesses you make, but i'll admit i'm not quite sure how to do that.

I linked the codepen in my initial post.

White Light fucked around with this message at 17:39 on Sep 3, 2015

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

Parrotine posted:

It's just a simple number guessing game: You type in your guess on what the number is supposed to be, then the program will tell you if your guess was 'hot' or 'cold' based on how close it was to the actual number. When the user guesses the secret number, the app lets them know it, and a new game is started.

I linked the codepen in my initial post.

Ok, well, the hot/cold part is pretty important, because you can't actually do that with any of the solutions posted so far, and there is no real point to the check() function, as it only checks if it's an exact match, and to detect the 'heat' part, you'd basically have external logic to do that, which defeats the purpose of embedding any logic inside a 'randomNumber' object. Also, again, how this ends up being bound to the UI is really important. Can't really offer any good explanations without that.

White Light
Dec 19, 2012

Well at least I know that what I have isn't a working solution after all. Gotta think positive!

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

Parrotine posted:

Well at least I know that what I have isn't a working solution after all. Gotta think positive!

Here is a solution that 'works' in the sense you could hook it up to a UI. You need to map your click event to call randomNumber.check(), and pass in the value from your guessing textbox. Probably want to convert it to a number first as well. The result of check() will be your yes/hot/warm/cold message, based on the absolute value of the difference between .number and value.

code:
function newGame() {
	var randomNumber = {};
	randomNumber.heatWords = ["that's it!","hot","warm","cold"];
	randomNumber.heatValues = [5,20];
	randomNumber.number = Math.floor(Math.random() * 100);
	randomNumber.check = function(value) {
		var diff = Math.abs(randomNumber.number - value);
		
		if (diff === 0)
			return randomNumber.heatWords[0];
		else if (diff =< randomNumber.heatValues[0])
			return randomNumber.heatWords[1];
		else if (diff =< randomNumber.heatValues[1])
			return randomNumber.heatWords[2];
		return randomNumber.heatWords[3];
	};
	return randomNumber;
}

pepito sanchez
Apr 3, 2004
I'm not mexican
^^ i just took that and put it into something else because bored

http://jsfiddle.net/bvLzyxbu/1/

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

pepito sanchez posted:

^^ i just took that and put it into something else because bored

http://jsfiddle.net/bvLzyxbu/1/

And if you are lazy, here's yours with no typing!

http://jsfiddle.net/ke9uezLn/1/

uXs
May 3, 2005

Mark it zero!
Angular question:

I have this:

code:
<input type="text" class="form-control" id="inputNaam" name="inputNaam" 
ng-model="vm.project.Naam" unique-project-id="{{vm.project.Id}}" unique="vm.checkNaam(naam, id)">
and this:

code:
(function () { 
    'use strict'; 
 
    angular 
        .module('siriusApp') 
        .directive('unique', unique); 
 
    unique.$inject = []; 
 
    function unique() { 
        var directive = { 
            require: 'ngModel', 
            link: link, 
            restrict: 'A', 
            scope: { 
                unique: '&',
                projectId: '@uniqueProjectId'
            } 
        }; 
 
        return directive;
 
        function link(scope, element, attrs, ngModel) {             
              var wrappedValidator = function (mv, vv) { 
                    return scope.unique({ naam: mv || vv, id: scope.projectId }) 
                                        .finally(function () { 
                                        });
                }; 
 
                ngModel.$asyncValidators.unique = wrappedValidator;             
        } 
    } 
})();
Problem is that the projectId is empty when the page loads and the directive is run for the first time. Any time after that (whenever I type something in the box) it works fine.

This looks suspiciously like this problem: http://blog.brunoscopelliti.com/run-a-directive-after-the-dom-has-finished-rendering/ but that's supposed to be fixed in angular 1.2+? (I'm running 1.4.)

I can probably hack my way around it (the directive calls a function on the controller so I could just use the projectId value from the controller - where it comes from in the first place), but it'd be nice to know why this is failing.


edit: I now suspect it has to do something with the {{...}} in the html but I'm not sure what or how to fix it.

edit: holy tables batman

uXs
May 3, 2005

Mark it zero!
Traditionally when I post a question here, I find the answer myself 5 minutes later. So in keeping with this tradition:

Changed the html to this:

code:
<input type="text" class="form-control" id="inputNaam" name="inputNaam" 
ng-model="vm.project.Naam" unique-project-id="vm.project.Id" unique="vm.checkNaam(naam, id)">
So removing the {{...}} as I was starting to suspect.

Directive scope binding changed to:

code:
scope: { 
                unique: '&',
                projectId: '&uniqueProjectId'
            } 
because the @ binding is text binding, not 'real' binding.

And finally in the function that is actually called to check for uniqueness the 'id' parameter has become a function so I have to get the value from it with 'id()'.

Got my inspiration from http://stackoverflow.com/questions/12371159/how-to-get-evaluated-attributes-inside-a-custom-directive where the
code:
scope: {
            text: "@myText",
            twoWayBind: "=myTwoWayBind",
            oneWayBind: "&myOneWayBind"
        }
got my attention.

toiletbrush
May 17, 2010
I've got to build a front-end framework for doing CRUD on relational data that has a schema + metadata but where the schema will change often - forms need to dynamically adjust to show/edit properties and relationships. I've already written some C# + JS that does all this really nicely but it's tied to a specifc 'admin' app where its ok if stuff looks a bit generic, whereas what we want is a framework we can give to clients or other developers to build richer customer facing forms. I'm guessing a modern JS framework might make this way easier.

My javascript is decent but my experience with modern frameworks like Angular/React etc is pretty out of date - I'm reading articles and tutorials about different frameworks and they all seem to get you to a certain point really quickly and easily and seem nice enough - but I've been burned so many times by frameworks that are a total bitch to use once you get past the tutorial/common usage stage that I'm a bit wary...would a refactoring of my own lightwieght framework be best? Is Angular still a good choice otherwise? I'm going to keep wading through tutorials and spiking stuff out but any pointers would be grealty appreciated!

luchadornado
Oct 7, 2004

A boombox is not a toy!

toiletbrush posted:

I've been burned so many times by frameworks that are a total bitch to use once you get past the tutorial/common usage stage that I'm a bit wary...would a refactoring of my own lightwieght framework be best?

This is exactly why I ditched Angular, waited for awhile, and then cautiously tried React. React isn't lightweight size-wise, but there's a surprisingly small amount of methods/properties/events/etc. that need to be documented. Try it for a day or two, and then take pleasure in knowing that you pretty much understand React and there won't be any huge learning curves after that, unlike Angular.

Dynamically changing schema automatically makes me think of Facebook's other technology, GraphQL, but I still haven't had a chance to dig into that and it seems relatively more complex.

Rolling your own is still totally feasible, but I'd recommend at least playing with both to see if they seem like something that would save you time.

kloa
Feb 14, 2007


Uziel posted:

I have this saved but haven't tried it:
https://github.com/bendc/sprint

I haven't checked this thread in a while (too much Metal Gear :ocelot:) but this looks pretty great!

IAmKale
Jun 7, 2007

やらないか

Fun Shoe

kloa posted:

I haven't checked this thread in a while (too much Metal Gear :ocelot:) but this looks pretty great!
I have zero experience with Sprint but apparently there's a "maintained" fork of Sprint that's being worked on. Here's the issue that points to the forked repo.

White Light
Dec 19, 2012

Lumpy posted:

And if you are lazy, here's yours with no typing!

http://jsfiddle.net/ke9uezLn/1/

Where the hell did you learn how to do that? Are you a wizard :aaaaa:

luchadornado
Oct 7, 2004

A boombox is not a toy!

Anyone here doing any lightweight statistical work in Javascript? I'm looking for a library that handle simple linear regression and a few other things.

http://simplestatistics.org/ is the best I've come up with so far. I thought jStat or Math.js might have what I need, but I'm kind of surprised they don't seem to have a simple linear regression.

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

Parrotine posted:

Where the hell did you learn how to do that? Are you a wizard :aaaaa:

It's just a different type of <input> tag. Though, the slider really makes the game a little too easy.

Hed
Mar 31, 2004

Fun Shoe
What's going on in the world of CSS? 3-4 years ago everyone was using bootstrap, I've noticed that for every "frontend framework starter kit" everyone doesn't ship with bootstrap... did everyone get sick of it? Instead of responsive design is everyone targeting mobile? Is everyone just way better at making good looking CSS than I?

HaB
Jan 5, 2001

What are the odds?

Hed posted:

What's going on in the world of CSS? 3-4 years ago everyone was using bootstrap, I've noticed that for every "frontend framework starter kit" everyone doesn't ship with bootstrap... did everyone get sick of it? Instead of responsive design is everyone targeting mobile? Is everyone just way better at making good looking CSS than I?

I just figured it's because every Bootstrap app looks just like Bootstrap, so people got tired of it. At least that's why I don't use it any more. Plus there are other options: Foundation, Ionic, etc.

Plorkyeran
Mar 22, 2007

To Escape The Shackles Of The Old Forums, We Must Reject The Tribal Negativity He Endorsed
It's very easy to make bootstrap not look like bootstrap, but of course you never notice that those sites are using bootstrap unless you're actively digging into the source.

Thermopyle
Jul 1, 2003

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

Plorkyeran posted:

It's very easy to make bootstrap not look like bootstrap, but of course you never notice that those sites are using bootstrap unless you're actively digging into the source.

Yeah, and people have been learning to do this more, so of course it looks like BS is disappearing.

The Dave
Sep 9, 2003

Yeah I would expect usage of bootstrap going up.

Also, "what's going on in the world of CSS" is not a question that really applies to what is happening with bootstrap.

IAmKale
Jun 7, 2007

やらないか

Fun Shoe

Plorkyeran posted:

It's very easy to make bootstrap not look like bootstrap, but of course you never notice that those sites are using bootstrap unless you're actively digging into the source.
What does this involve? Is it just overriding default styles? Or are people only using parts of Bootstrap like the grid system and then styling everything else like usual?

chami
Mar 28, 2011

Keep it classy, boys~
Fun Shoe

Karthe posted:

What does this involve? Is it just overriding default styles? Or are people only using parts of Bootstrap like the grid system and then styling everything else like usual?

Best way to use bootstrap nowadays is to download the SASS files; that way you can choose which modules you want and customize the variables that define how everything looks so you don't have to tear your hair out fighting Bootstrap's specificity.

M31
Jun 12, 2012
The React side at least is busy exploring CSS modules. They are not actually specific to React and you can use them with Angular or plain JS as well.

http://glenmaddern.com/articles/css-modules

It works sort of similar to BEM / Suit style, but is much easier to maintain. Definitely one of the better things to happen to CSS tooling in the last year in my opinion.

Thermopyle
Jul 1, 2003

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

I'm working on moving from browserify to webpack, and I've run into a snag.

My mocha tests are a bunch of files under test, sometimes more than one level deep. This is no problem in browserify with mochify

From the webpack docs, it looks like mocha-loader is what I want...but it seems like this requires a single entry point into my tests. I do not have that. I found a couple people asking the same question on mocha-loader's issue tracker with no resolution.

It seems odd that I can't easily find anyone describing the solution. I mean, if you look at mocha's examples, all of them have their tests set up like mine...multiple test files without a single entry point.

How do I run these tests with webpack?

Met48
Mar 15, 2009
You can use require.context to have a single entry file which requires every test file:

JavaScript code:
var testsContext = require.context('./tests', true, /\.js$/);
testsContext.keys().forEach(testsContext);
Originally found via this article on setting up tests using karma, though it should work fine for mocha-loader.

Thermopyle
Jul 1, 2003

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

That's exactly what I needed, thanks!

Of course now I find out that sinon doesn't play nice with webpack.

I hate modern front-end Web development.

fletcher
Jun 27, 2003

ken park is my favorite movie

Cybernetic Crumb
Is there an alternative to URI.js that plays nice with requirejs?

Why is parsing a URI not part of standard JavaScript :(

Lumpy
Apr 26, 2002

La! La! La! Laaaa!



College Slice

Thermopyle posted:

That's exactly what I needed, thanks!

Of course now I find out that sinon doesn't play nice with webpack.

I hate modern front-end Web development.

Just be like most front-end devs and don't test. Problem solved.

Adbot
ADBOT LOVES YOU

Winston Chill
Aug 24, 2008

Fine and dandy.

fletcher posted:

Is there an alternative to URI.js that plays nice with requirejs?

Why is parsing a URI not part of standard JavaScript :(

I've used url() with success in the past. It's not an AMD module so you need to shim it though.

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