madbernard: a long angled pier (Default)
I was reworking some code caught in the wild to learn it, and it used both console.error() and console.info(). I'd heard that there were console methods beyond just our old friend console.log(), but I didn't know the details, so I turned to that beacon of righteousness: the Mozilla Developer Network. But wait: both had big red warning messages at the top of the page... And going up a level, console itself did also!
! Non-standard
This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.
Even console.log() has a warning! What? What does Stack Overflow say? I checked, and saw that most questions about console.log were from 2010/2011. I asked my housemate Ben the developer, and he said "check caniuse.com"...

Looks like in Internet Explorer 8 & 9, unless the console was open, it was undefined and console.log() would throw an error. Furthermore, caniuse.com has links to the GitHub where, in October 2013, a group got together and laid out how console should be used. I'm betting the MDN just has warnings because this Developer Tools Working Group isn't official, and the reason console.anything exists is entirely because the various browser coders decided to each do it with no prompting from, say, the W3C or ECMA.

The upshot is, console.log(), console.info(), console.warn(), and console.error() are all pretty much good to go if you don't need to support IE 9 or below. Also, this is why some ancient "learn Javascript" tutorials had all the reporting done with window.alert()... They come from the before times
madbernard: a long angled pier (Default)
Two great tastes... ...Not so much.

One part of the Hack Reactor program that my developer friends say is really accurate, in terms of preparing you for the real world, is the "Legacy" project. For four days, you and a team of three to four other people get to build anything you like, using any techs you like. Then comes the "Legacy": for four days, your team picks up another team's project and builds cool stuff out from their starting point. How do they techs they chose work for different people going in a different direction?

In my case, not 100% perfectly. So there was this day that I wasn't sure about how to dynamically generate a dropdown menu with Angular... I tried various methods and they weren't working... Eventually I tried just a straight-up, bog-standard <select></select> tag... Even that didn't show up...!

As you can probably guess from the title, the answer is, MaterializeCSS was not the right fancy CSS framework to use with a constantly shifting thing like Angular. Here's the Stack Overflow answer where someone gives a proper sermon about how MaterializeCSS falls short.

CSS/front-end frameworks make it easier to build a website that shrinks and bends well on a mobile phone, and that looks fine without a lot of poking. In fact, often these days you can look at a website and tell what it was made with, because developers are pretty happy to leave it as it came out of the box. MaterializeCSS is an attempt to look like Google's "Material Design" styles... Same paper-airplane-looking arrow for Submit/Send, etc.

However, apparently, MaterialzeCSS does some of its magic by overwriting normal HTML tags with its own... And any of its own things that require JavaScript to open or drop down or pop up must be initialized when the page loads... And anything that changes after the page loads LIKE SAY when a call to a database returns and populates a dropdown menu with options... Just doesn't happen.

Good times, good times.

You can see the website we worked on here: http://teslalegacy.herokuapp.com/ (If it takes many seconds to load, that's just because we're hosting it for free, and Heroku takes awhile to find it if no one has been there for half an hour). To see the glorious hand-crafted pop-up-div-full-of-checkboxes that I used instead of a drop down menu, you have to log in with GitHub. (Setting up a GitHub account will be worthwhile for you, anyway, but that's a story for another day.)
madbernard: a long angled pier (Default)
We got January 1st off, and after some computer erroring I was in the Stack Overflow network of sites, having actually asked a question about where Chrome stored its user data. Which inspired me to go find something to try to get enough points to be able to upvote all the people who had been so helpful to me over the last year.

I found a guy who had a question that almost boiled down to "Angular, how does it work". The literal day before I'd watched a lecture on that subject--I still had the tab open--so I took a crack at it, over the next few hours. You can see the results here.

I then started trying to implement his beautiful boxes website, using my own advice, to see if it was any good, so I could go back and actually truly help him. Making projects and studying in Hack Reactor kept me away from it, though. This is a note to self that I'd like to come back someday.

I did, at least, collect two people who thought the explanation was good enough for a vote... So now I can really be a part of the S.O. community. At last!

EDIT: Dave and I were chatting about this, and he was curious what the deal was with points on Stack Overflow. I wanted the points so that I could give props to all the people who have made my life better by writing great answers. You need 15 points to upvote, and each upvote you get gives you 10 points. At the very peak, aside from feeling somewhat good about themselves, the good answerers get to become mods if they choose.
madbernard: a long angled pier (Default)
Remembering these from last week: Challenge 3 was another I'd done before, "find the longest word in the sentence", and I got a few more refinements in my answer: I used a regular expression to create the first array; and (having discussed it with Ben) I used an empty string as the initializing value. The previous stab at this Reduce, where I was trying to initialize with 0, was comparing apples and oranges in the form of numbers and strings.
function LongestWord(sen) { 
  var arr = sen.split(/(\w+)/g);
  var foo = arr.reduce(function(prev, curr){
    if(prev.length < curr.length){
      return curr;
    } else {return prev;}
  }, '');
  return foo; 
}
Looking over other answers, I think reduce is by far the most elegant path. Wooo! Arrays FTW!

Challenge 4 was ...a journey. Read more... )

More wins

Jun. 2nd, 2015 12:51 pm
madbernard: a long angled pier (Default)
Last week I was working on a problem that my housemate Ben suggested: the Animal Guessing game, where the code asks you to think of an animal, then builds up a tree of potential animals that you could guess and yes or no questions that would lead there, taking inputs you give it. He remembered it from some 101 class he took, and it turned out to be pretty great, since it has a lot of small bits that you can check as you go, and it creates something that's (arguably) actually worth having. Below is my solution. Maybe sometime I'll come back to it to add the ability to save games, or I'll put it on a website and wean it away from Prompt and Alert. I'd also like to make functions out of the stuff I'm repeating... Like function positiveWords, negativeWords, unrecognizedInput...

function Guess(animal, question, nextYes, nextNo) {
this.animal = animal;
this.question = question;
this.nextYes = nextYes;
this.yesPath = 0;
this.nextNo = nextNo;
}

var thisGameTree = [];
var start = new Guess();
var animalMessage = ["Welcome to the animal guessing game! Teach the program to guess what animal you're thinking of!", "Think of an animal. Can be an animal you've thought of before, can be a new animal."];
var avoidRestartMessage = 0;

var questionGame = function () {
if (avoidRestartMessage === 0) alert(animalMessage[thisGameTree.length]);
if (!start.animal) {
start.animal = prompt("What is the animal you are thinking of?");
start.question = prompt("Please write a yes or no question that would help figure out what your animal is.");
var yesIsForThisAnimal = prompt("Is \"yes\" the right answer for \"" + start.question + "\" for " + start.animal + "?").toLowerCase();
if (yesIsForThisAnimal == "yes") {
start.yesPath = 1;
}
if (yesIsForThisAnimal == "no") {
start.yesPath = 2;
}
alert("Ok, new try!");
avoidRestartMessage = 0;
if (thisGameTree.length === 0) {
thisGameTree.push(start);
}
start = thisGameTree[0];
questionGame();
} else {
var questionAnswer = prompt(start.question).toLowerCase();
//yes path
if (questionAnswer == "yes" && start.yesPath === 1) {
var routingYesAnswer = prompt("Is " + start.animal + " your animal?").toLowerCase();
if (routingYesAnswer == "yes") {
alert("You win! You taught the computer to read your mind!");
} else if (routingYesAnswer == "no") {
//route deeper in
avoidRestartMessage = 1;
if (start.nextYes === undefined) {
start.nextYes = new Guess();
start = start.nextYes;
questionGame();
} else {
start = start.nextYes;
questionGame();
}
} else {
alert("I'm confused! Please only type yes or no!");
questionGame();
}
}
//yes path
else if (questionAnswer == "yes") {

//route deeper in
avoidRestartMessage = 1;
if (start.nextYes === undefined) {
start.nextYes = new Guess();
start = start.nextYes;
questionGame();
} else {
start = start.nextYes;
questionGame();
}
}

//no path, on the right track
else if (questionAnswer == "no" && start.yesPath === 2) {
var routingNo2Answer = prompt("Is " + start.animal + " your animal?").toLowerCase();
if (routingNo2Answer == "yes") {
alert("You win! You taught the computer to read your mind!");
} else if (routingNo2Answer == "no" || routingNoAnswer == "yes") {
//route deeper in
avoidRestartMessage = 1;
if (start.nextNo === undefined) {
start.nextNo = new Guess();
start = start.nextNo;
questionGame();
} else {
start = start.nextNo;
questionGame();
}
} else {
alert("I beg your pardon. Please only type yes or no!");
questionGame();
}

}
//no path
else if (questionAnswer == "no") {
//route deeper in
avoidRestartMessage = 1;
if (start.nextNo === undefined) {
start.nextNo = new Guess();
start = start.nextNo;
questionGame();
} else {
start = start.nextNo;
questionGame();
}
}
//mop up path
else {
alert("Sorry, what? Please only type yes or no!");
questionGame();
}
}
console.log(thisGameTree);
};

Second win: today I was poking around to find a Javascript MOOC, and came across this. In lesson 1.2, He starts talking about Sublime Text, an editor I downloaded last week because JSBin wasn't any good for tidying up the indenting as I shifted if statments around. It turns out that one needs to download a separate package to make Sublime do that... So today I added the Package Handler, and then the jsFormat package. Like a boss! Thanks Stack Overflow!

Third win: I use Opera as a secondary browser, with the idea being that I can be logged into Facebook on Opera and not pollute normal browsing with Facebook's messes. But since Firefox was clogged with tabs, I'm using Opera for posting to Dreamwidth also, and with the increased use, it became intolerable that I couldn't Ctrl-PgUp and -PgDwn to shift tabs. Finally thanks to this link I determined that in Settings, with Advanced Keyboard Shortcuts clicked, it's possible to change or add Keyboard Shortcuts. Wooooooo!

Mad Out.
madbernard: a long angled pier (Default)
I've been sick this past week, which didn't stop me vs. 6.1 and 6.2, but when I hit 6.3 I couldn't even figure out what he was asking. It's like he's saying, design a protuberance on the center of your face, then use that protuberance to detect a scent. ...Does he mean find your nose, or does he mean build yourself a new nose? That second one seems a bit unnecessary. Or to be less metaphorical, what am I missing? Iterating over arrays and objects seems like a major portion of what we've been doing so far. The emphasis on interface has got to be meaningful, but the gap between that text analysis and understanding the reason behind the question is fairly daunting.

I'm posting now because I at least figured out something, though I'm fairly sure I'm deep in the weeds heading in a direction that would baffle and amaze all who came after me.

I wondered what methods came baked in to objects, like forEach does on arrays. So I googled, and found this StackExchange bit, http://stackoverflow.com/questions/5842654/javascript-get-objects-methods

which lead me to screw around in JSBin seeing what came included in the Object package,
console.log(Object.getOwnPropertyNames(Object)); and
console.log(Object.getOwnPropertyNames(Object.prototype));

And then there were all sorts of interesting things to look up:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Object

Moving forward with Object.keys, I tried this out as a start of an attack on 6.3, adding the console.log stuff in the midst of the program when it initially didn't return what I expected. Thanks to my housemate Ben for that general technique! What I was trying to do here is to get it to pull out a value from a Seq object at any given point:

var Seq = function(object) {
this.object = object;
};
Seq.prototype.valueAtI = function(i) {
var keyArray = [];
keyArray.push(Object.keys(Seq));
console.log(keyArray);
for (var j = 0; j < (i || keyArray.length); j++) {
if (j == i)
return keyArray[i];
else
return "There are fewer things in the sequence than that";
}
};

var foo = new Seq;
foo.bar = "baz";
foo.bear = "bearz";
foo.pear = "pearz";

console.log(foo.valueAtI(1));

The results were [[]] / There are fewer things in the sequence than that . I'd varied the value of i, even down to 0 ("undefined"), but it was the second set of brackets that tipped me off. Less broken code below:

Seq.prototype.valueAtI = function(i) {
var keyArray = Object.keys(this);
console.log(keyArray);
for (var j = 0; j < (i || keyArray.length); j++) {
if (j == i)
return keyArray[i];
else
return "There are fewer things in the sequence than that";
}
};

This actually results in an array of the keys of the object. It doesn't do what I meant it to do, and I think I can see why now that I'm writing, but it's pretty late and I'm taking the tiny win.
madbernard: a long angled pier (Default)
I have programmer friends, and it's my impression from them that Stack Overflow is *the* place to get help with programming questions. I've found some helpful things there already...
http://stackoverflow.com/questions/5605170/what-is-the-fastest-way-to-learn-javascript/12926773#12926773
http://stackoverflow.com/questions/11246/best-resources-to-learn-javascript

I'd like to be able to upvote people who were helpful, but to build up enough cred to do so, first I'd have to know enough to answer a question, or I'd have to have a clear, answerable question to ask. More goals!

November 2022

S M T W T F S
  12345
6789101112
1314 1516171819
20212223242526
27282930   

Syndicate

RSS Atom

Most Popular Tags

Style Credit

Expand Cut Tags

No cut tags
Page generated Jul. 4th, 2025 08:58 pm
Powered by Dreamwidth Studios