Michael Matola

+ Follow
since Mar 25, 2001
Merit badge: grant badges
For More
Cows and Likes
Total received
In last 30 days
Total given
Total received
Received in last 30 days
Total given
Given in last 30 days
Forums and Threads
Scavenger Hunt
expand Rancher Scavenger Hunt
expand Ranch Hand Scavenger Hunt
expand Greenhorn Scavenger Hunt

Recent posts by Michael Matola

Precede your code with the following:

This is a reasonably well-known example of why you shouldn't redefine built-in functions in JavaScript. Don't do stuff like this.
Yeah, I work in a bit of a legacy universe myself, but I'm learning the fancy new stuff too.

I know the front-end universe is a bit obsessed with the new! new! new! So it's nice to have a reality check. It seems "I haven't done any jQuery in <number> <time period>" is the new "That's so last year!"
Just curious for people's opinion on the state of jQuery these days. I mean, not the state of jQuery itself, but, for example, is anyone using plain-old old-school jQuery these days without (also) using a full SPA framework for new development?
On line 40 you are passing a reference to the PerishableFood (constructor) function to the function expired. Why? What are you expecting to happen?

userChoice is a string, such as "milk".
userChoiceSelected is an array whose first element is a string that is the result of concatenating the userChoice and ".expireDate".
today started out as an actual date, then you converted it to a string representation of a date.

So the comparison on line 33 (if(userChoiceSelected<=today)) compares an array to a string:

Holy type coercion, Batman! JavaScript has some arcane rules for comparing things of different types. I don't even want to take a stab at what the JavaScript engine is doing in this case. And I'm sure the code as written is not what you're intending. (Were you hoping to use bracket notation for the property expireDate? If so, you got the syntax wrong for that and created an array instead.)

(1) You explicity are using a string representation of a date instead of an actual date for comparison. Do not do this. Ever. Trouble and strife will follow. Use actual Date functions for operating on date. Don't convert today to a string to compare with the expiredDate value stored on the PerishableFood object. Instead, parse the stored expiredDate value into a Date and then compare it with today. (You're fine with <= comparison, but there's a JavaScript gotcha with date equality.)

(2) I'm guessing that what you really want to do is compare the value of the expiredDate property of some PerishableFood object with the current date:


That makes sense to me. However, in the current state of the code, you don't have a handle on an object. All you have at that point is a string from user input (such as "milk") that just so happens to be a variable name in your code (!). The easiest way to get deal with something like this here is to create a simple data structure to hold the references to all of the PerishableFood objects you create in code, then use the text string from user input as a key to search that data structure. There are several ways of doing this. Using a plain old JavaScript object as a hash/dictionary/map with strings as keys is a simple approach.
Re: Traffic

We drove from the Detroit, MI, area to Nashville, TN, for that weekend. Drive down took about 8.5 hours (actual drive time). Just as the eclipse was starting in the Nashville area, clouds started rolling in, so we headed north and stopped when convenient. We watched the eclipse (TOTALITY!) from a truck stop just north of the Tennessee/Kentucky border (about 30 minutes north of our hotel on the outskirts of Nashville). From there it took about 10.5 hours to drive home. So I'd say the traffic jams after the eclipse cost us about 2.5 hours. Bad, but not super bad.

Seeing totality was worth it.
6 years ago

Bear Bibeault wrote:On a  somewhat related note, 21 years ago today was the first full day I spent with my now-husband. I took him on a trip to the Maine coast (I lived in New England at the time) and we've been "spoken for" ever since.

The two of you bonded over your shared love of knee-high white tube socks?

(Surely there's a picture somewhere of the two of you wearing knee-high white tube socks with three red stripes?)
6 years ago
"No JavaScript frameworks were created during the writing of this article."
This example is from Facebook's React tutorial. By their own admission, it's some very unusual React code (because ReactDOM.render gets called many times; more typically in a React application ReactDOM.render gets called only once). In the tutorial they're taking very small steps so you get some fundamental ideas. Subsequent steps in the tutorial will rework this small feature into a fuller React application, written in more idiomatic React.

Let's step through the code. It's really basic JavaScript -- barely any React at this point. First a function called tick gets defined. Then the built-in function setInterval is called. Two arguments are passed into setInterval: the tick function and a delay of 1000 (milliseconds). So, in other words, this code

Says to wait one second then execute the tick function, then wait another second and execute the tick function again, and so on. setInterval is a built-in function that executes the callback function you provide, repeatedly, delayed by the amount of time you indicate. (There are some nuances with setInterval, but they're not important here.)

Each time the tick function gets executed, a new React element (stored in the local variable "element") gets created. That element will produce the HTML markup per the JSX code. The part in curly brackets -- {new Date().toLocaleTimeString()} -- allows a JavaScript expression to get executed as part of generating the HTML. In this case, it creates a new Date object (representing the date/time at the time of execution) formatted per Locale conventions. ReactDOM.render finds the DOM element with the ID "root" and sets the HTML generated by the React element "element" as the "root" element's inner HTML.

So each time the tick function gets executed, it replaces some HTML in the DOM. That HTML displays the current time.

(This exact example could have been coded fairly easily with plain, vanilla JavaScript, by the way.)

From a React standpoint, this approach (conceptually) is fairly inefficient, constantly rewriting the entirety of the HTML under the "root" element. Later examples in the tutorial will show you how to build a React application to call ReactDOM.render only once in your code, and the seeming magic of React will only update the parts of the DOM that are absolutely necessary to update. ("Update" here is a not entirely accurate. React is largely about efficiently *replacing* parts of the DOM.)

Giovanni Montano wrote:
1) Is the order of execution: `render` that calls the element `element` above, and then? are all the other eventual method get sequentially called also if nobody explicitly call them?

Calling setInterval() in the last line is what sets this all in motion. setInterval sets up the timer that calls tick every second. tick first generates the React element it stores in the variable "element" then it calls ReactDOM.render() to update the DOM. There's really no magic (and not much React) going on here.

2)There is setInterval for instance, that (from a Java point of view) is not instantiated by nobody, but still get called( because is not a class), correct?

setInterval is a built-in function on the browser's global object "window." It's a function, and it gets called as a function.

3) if I cancel setInterval( playing with the code) even Hello World does not appear, why?

By cancel do you mean clearInterval? If so, then it depends on timing of the setInterval and clearInterval calls.

4) what is the best tool to debug when does not appear nothing on the page, as it is the case if I erase the last line setInterval()? is console log I guess?

If by cancel you mean you comment out or remove the code, then of course nothing will appear. Nothing is calling tick or really doing much of anything then. If you're uncomfortable with setInterval you could call tick() to display the time just once, but that's sort of missing the point of the example.

Bear Bibeault wrote:Never seen it before, but I'd probably say "reh-ple" if I were to try...

You can get a handy-dandy JavaScript REPL by typing "node" at the command prompt, presuming you have Node.js installed.
6 years ago
Understood. I've heard people use them all interchangeably. At some point I had things even more jumbled and thought it was all wrapped in with JavaScriptMVC/can.js/done.js, but apparently not!

For grins:


Bear Bibeault wrote:Odd choices for 2016. I predict a refactor in 2017.

Heh. That's what I was thinking too.