Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]


Groups > comp.lang.javascript > #37542 > unrolled thread

Weather App reworked

Started byluserdroog <luser.droog@gmail.com>
First post2019-10-13 03:31 -0700
Last post2019-10-15 09:00 -0700
Articles 19 — 5 participants

Back to article view | Back to comp.lang.javascript


Contents

  Weather App reworked luserdroog <luser.droog@gmail.com> - 2019-10-13 03:31 -0700
    Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-13 05:49 -0700
      Re: Weather App reworked luserdroog <luser.droog@gmail.com> - 2019-10-14 10:53 -0700
        Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-14 21:22 -0700
    Re: Weather App reworked John G Harris <niam@jghnorth.org.uk.invalid> - 2019-10-13 14:46 +0100
      Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-13 07:02 -0700
        Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-13 07:08 -0700
          Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-13 07:16 -0700
            Re: Weather App reworked "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-10-13 10:10 -0700
              Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-13 10:34 -0700
            Re: Weather App reworked John G Harris <niam@jghnorth.org.uk.invalid> - 2019-10-13 19:55 +0100
              Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-14 05:56 -0700
                Re: Weather App reworked John G Harris <niam@jghnorth.org.uk.invalid> - 2019-10-15 18:21 +0100
                  Re: Weather App reworked Julio Di Egidio <julio@diegidio.name> - 2019-10-15 12:32 -0700
                    Re: Weather App reworked John G Harris <niam@jghnorth.org.uk.invalid> - 2019-10-16 16:06 +0100
    Re: Weather App reworked "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-10-13 14:02 -0700
      Re: Weather App reworked dr.j.r.stockton@gmail.com - 2019-10-14 13:28 -0700
        Re: Weather App reworked "Michael Haufe (TNO)" <tno@thenewobjective.com> - 2019-10-14 14:58 -0700
      Re: Weather App reworked luserdroog <luser.droog@gmail.com> - 2019-10-15 09:00 -0700

#37542 — Weather App reworked

Fromluserdroog <luser.droog@gmail.com>
Date2019-10-13 03:31 -0700
SubjectWeather App reworked
Message-ID<4a61cdd9-0b9c-41ed-97e3-08d154f0ba02@googlegroups.com>
I reworked the Weather App to try to make better use of Object Orientation.
It seems to really help to group related things together. My use of the
controller seems a little weird, though. I got all the control functions
grouped nicely, but they're not in a class. I didn't see any easy way to
do that given the way it all works. I'm not sure if I need more than one
control so that may be moot.

The MVC classes have been supplemented with a SessionModel that backs the
value up in session storage, a DependentModel that observes other Models
and modifies its own value before notifying any views, and a few helpful
functions in the View class.

The app itself starts by making a few customized Models. Then all the
model instances are defined. Then all the views on those models. Then
the controller is extracted from the primary view and used to hold
the UI functions. 

There still remain a few unencapsulated functions but they are all pure
utility functions it doesn't seem too bad to leave them vanilla.

https://luser-dr00g.github.io/weather4/
https://github.com/luser-dr00g/luser-dr00g.github.io/tree/master/weather4

Comments welcome.

-- 
The droog

[toc] | [next] | [standalone]


#37543

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-13 05:49 -0700
Message-ID<7b214906-bb35-4df1-805d-5c2b1e6430e0@googlegroups.com>
In reply to#37542
On Sunday, 13 October 2019 12:31:46 UTC+2, luserdroog  wrote:

> I reworked the Weather App to try to make better use of Object Orientation.

You can stick that equivalent of an half botched Python up your ass: just stop
spamming this group.

*Plonk*

Julio

[toc] | [prev] | [next] | [standalone]


#37560

Fromluserdroog <luser.droog@gmail.com>
Date2019-10-14 10:53 -0700
Message-ID<8784283b-137f-4f9d-8454-97a43e80fd39@googlegroups.com>
In reply to#37543
On Sunday, October 13, 2019 at 7:49:26 AM UTC-5, Julio Di Egidio wrote:
> On Sunday, 13 October 2019 12:31:46 UTC+2, luserdroog  wrote:
> 
> > I reworked the Weather App to try to make better use of Object Orientation.
> 
> You can stick that equivalent of an half botched Python up your ass: just stop
> spamming this group.
> 
> *Plonk*
> 
> Julio

That's a very unpleasant thing to say. I am trying to be a positive contributor
here, even while asking for guidance. I trust the "plonk" indicates that you
will not be reading my posts and hence be no further annoyance in threads that
I start.

[toc] | [prev] | [next] | [standalone]


#37563

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-14 21:22 -0700
Message-ID<836d9eeb-51ce-4ec9-832d-549404660867@googlegroups.com>
In reply to#37560
On Monday, 14 October 2019 19:53:14 UTC+2, luserdroog  wrote:

> That's a very unpleasant thing to say.

And that's just the beginning, you piece of polluting crap.

Julio

[toc] | [prev] | [next] | [standalone]


#37544

FromJohn G Harris <niam@jghnorth.org.uk.invalid>
Date2019-10-13 14:46 +0100
Message-ID<fka6qe5facre0am2o5pma5u7dk249rsrmd@4ax.com>
In reply to#37542
On Sun, 13 Oct 2019 03:31:40 -0700 (PDT), luserdroog
<luser.droog@gmail.com> wrote:

>I reworked the Weather App to try to make better use of Object Orientation.
>It seems to really help to group related things together. My use of the
>controller seems a little weird, though. I got all the control functions
>grouped nicely, but they're not in a class. I didn't see any easy way to
>do that given the way it all works. I'm not sure if I need more than one
>control so that may be moot.
  <snip>

>There still remain a few unencapsulated functions but they are all pure
>utility functions it doesn't seem too bad to leave them vanilla.

If you want to bunch functions together just make them properties of
an isolated object, in the same way that mathematical functions are
placed inside the Math (pseudo) object.

Doing this means you can re-use the functions in another project
without suffering from name clashes. (As in cowboy.draw and
picture.draw)

This may apply to your control functions as well.

  John

PS Remember that Julio doesn't approve of OO

[toc] | [prev] | [next] | [standalone]


#37545

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-13 07:02 -0700
Message-ID<64006d92-aa1e-441b-82e5-59546ff968ac@googlegroups.com>
In reply to#37544
On Sunday, 13 October 2019 15:46:26 UTC+2, John G Harris  wrote:

> PS Remember that Julio doesn't approve of OO

Wrong, liar, as I've had to explain this before: learn to use the right tool
for the right job, and OO in JS indeed is an abomination.

Julio

[toc] | [prev] | [next] | [standalone]


#37546

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-13 07:08 -0700
Message-ID<6d67d210-9d8f-4509-a408-cbda786a4dfa@googlegroups.com>
In reply to#37545
On Sunday, 13 October 2019 16:02:39 UTC+2, Julio Di Egidio  wrote:
> On Sunday, 13 October 2019 15:46:26 UTC+2, John G Harris  wrote:
> 
> > PS Remember that Julio doesn't approve of OO
> 
> Wrong, liar, as I've had to explain this before: learn to use the right tool
> for the right job, and OO in JS indeed is an abomination.

And it's true that there are serious limitations with objection orientation,
from the actual realm of applicability which is way more restricted and the
very opposite of an OO uber alles, to the misinformation and misguidance that
goes with, starting from the car analogy and how it does NOT apply to the
real world, all mainly in the direction of tools-based development and the
speculations of the vendors and the magic solution sellers, and the defamation
and lies about the very state of the art that necessarily had to go with it.
But that's already lesson #2, while we are still stuck with the preliminaries.

HTH, the casual reader.

Julio

[toc] | [prev] | [next] | [standalone]


#37547

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-13 07:16 -0700
Message-ID<c88b63ac-d0e0-4429-90f0-84431ca88883@googlegroups.com>
In reply to#37546
On Sunday, 13 October 2019 16:09:01 UTC+2, Julio Di Egidio  wrote:
> On Sunday, 13 October 2019 16:02:39 UTC+2, Julio Di Egidio  wrote:
> > On Sunday, 13 October 2019 15:46:26 UTC+2, John G Harris  wrote:
> > 
> > > PS Remember that Julio doesn't approve of OO
> > 
> > Wrong, liar, as I've had to explain this before: learn to use the right tool
> > for the right job, and OO in JS indeed is an abomination.
> 
> And it's true that there are serious limitations with objection orientation,
> from the actual realm of applicability which is way more restricted and the
> very opposite of an OO uber alles, to the misinformation and misguidance that
> goes with, starting from the car analogy and how it does NOT apply to the
> real world, all mainly in the direction of tools-based development and the
> speculations of the vendors and the magic solution sellers, and the defamation
> and lies about the very state of the art that necessarily had to go with it.
> But that's already lesson #2, while we are still stuck with the preliminaries.
> 
> HTH, the casual reader.

And now back to the point, because OO can suck my socks, the point actually
was learn JS and functional programming and what that can actually achieve,
or better just go play with Python, that half-botched Basic not even that
good for the non-programmer and the new de facto benchmark for cluelessness.

Have fun,

Julio

[toc] | [prev] | [next] | [standalone]


#37550

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-10-13 10:10 -0700
Message-ID<df4bf60a-c931-4872-9fb7-0c6d72d6cc08@googlegroups.com>
In reply to#37547
On Sunday, October 13, 2019 at 9:16:26 AM UTC-5, Julio Di Egidio wrote:
> And now back to the point, because OO can suck my socks, the point actually
> was learn JS and functional programming and what that can actually achieve,
> or better just go play with Python, that half-botched Basic not even that
> good for the non-programmer and the new de facto benchmark for cluelessness.

Again with your drama? Still waiting on you to actually say something of substance:

<https://groups.google.com/d/msg/comp.lang.javascript/9FxKCWG7NLQ/iXVPdwuaCgAJ>

[toc] | [prev] | [next] | [standalone]


#37551

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-13 10:34 -0700
Message-ID<c239885f-0751-43fc-971b-1858347e2f06@googlegroups.com>
In reply to#37550
On Sunday, 13 October 2019 19:10:17 UTC+2, Michael Haufe (TNO)  wrote:
> On Sunday, October 13, 2019 at 9:16:26 AM UTC-5, Julio Di Egidio wrote:
> > And now back to the point, because OO can suck my socks, the point actually
> > was learn JS and functional programming and what that can actually achieve,
> > or better just go play with Python, that half-botched Basic not even that
> > good for the non-programmer and the new de facto benchmark for cluelessness.
> 
> Again with your drama? Still waiting on you to actually say something of substance:
> 
> <https://groups.google.com/d/msg/comp.lang.javascript/9FxKCWG7NLQ/iXVPdwuaCgAJ>

Still back to OO?  Indeed, we have been there already, an that you cannot
even read is certainly not my fault.

Sure, keep going...

*Plonk*

Julio

[toc] | [prev] | [next] | [standalone]


#37552

FromJohn G Harris <niam@jghnorth.org.uk.invalid>
Date2019-10-13 19:55 +0100
Message-ID<dks6qets8me4lnrop6543g37tbp1s3mtet@4ax.com>
In reply to#37547
On Sun, 13 Oct 2019 07:16:20 -0700 (PDT), Julio Di Egidio
<julio@diegidio.name> wrote:

  <snip>
>And now back to the point, because OO can suck my socks, the point actually
>was learn JS and functional programming and what that can actually achieve,
>or better just go play with Python, that half-botched Basic not even that
>good for the non-programmer and the new de facto benchmark for cluelessness.

And yet you agreed that OO is ok for making complex numbers, dates,
lists, trees, etc behave like built-in data types.

  John

[toc] | [prev] | [next] | [standalone]


#37559

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-14 05:56 -0700
Message-ID<cc3a4e3b-4360-4f22-b12c-638cca7f1526@googlegroups.com>
In reply to#37552
On Sunday, 13 October 2019 20:55:25 UTC+2, John G Harris  wrote:
> On Sun, 13 Oct 2019 07:16:20 -0700 (PDT), Julio Di Egidio
> <julio@diegidio.name> wrote:
> 
>   <snip>
> >And now back to the point, because OO can suck my socks, the point actually
> >was learn JS and functional programming and what that can actually achieve,
> >or better just go play with Python, that half-botched Basic not even that
> >good for the non-programmer and the new de facto benchmark for cluelessness.
> 
> And yet you agreed that OO is ok for making complex numbers, dates,
> lists, trees, etc behave like built-in data types.

I am quite sure I cannot have said "built-in", liar.  But yes, essentially
just data types.

Anyway, mainly to mention another very common utter mistake: conflating
static typing with object orientation.

Way to go...

Julio

[toc] | [prev] | [next] | [standalone]


#37566

FromJohn G Harris <niam@jghnorth.org.uk.invalid>
Date2019-10-15 18:21 +0100
Message-ID<c00cqe9mvi71etatltitk3clufola6n18d@4ax.com>
In reply to#37559
On Mon, 14 Oct 2019 05:56:54 -0700 (PDT), Julio Di Egidio
<julio@diegidio.name> wrote:

>On Sunday, 13 October 2019 20:55:25 UTC+2, John G Harris  wrote:
  <snip>

>> And yet you agreed that OO is ok for making complex numbers, dates,
>> lists, trees, etc behave like built-in data types.
>
>I am quite sure I cannot have said "built-in", liar.  

And I am quite sure I wasn't quoting your exact words, which is why I
didn't use any quote symbols. "liar" is therefore just meaningless
abuse.


>But yes, essentially
>just data types.
>
>Anyway, mainly to mention another very common utter mistake: conflating
>static typing with object orientation.

You're saying some classes in a program are not data types? Wow!

Or are you saying your concern with OO is nothing to do with
programming language semantics?

>Way to go...

Yes indeed.

  John

[toc] | [prev] | [next] | [standalone]


#37567

FromJulio Di Egidio <julio@diegidio.name>
Date2019-10-15 12:32 -0700
Message-ID<0548f9c5-1c7f-4f80-88b6-9340a3feb5a6@googlegroups.com>
In reply to#37566
On Tuesday, 15 October 2019 19:21:59 UTC+2, John G Harris  wrote:
> On Mon, 14 Oct 2019 05:56:54 -0700 (PDT), Julio Di Egidio
> <julio@diegidio.name> wrote:
> >On Sunday, 13 October 2019 20:55:25 UTC+2, John G Harris  wrote:
>   <snip>
> 
> >> And yet you agreed that OO is ok for making complex numbers, dates,
> >> lists, trees, etc behave like built-in data types.
> >
> >I am quite sure I cannot have said "built-in", liar.  
> 
> And I am quite sure I wasn't quoting your exact words, which is why I
> didn't use any quote symbols. "liar" is therefore just meaningless
> abuse.
...
> You're saying some classes in a program are not data types? Wow!

You systematically just putting bullshit in my mouth is the mark of a
retarded cunt, i.e. not even an interesting one at that.

Just go fuck yourself.

*Plonk*

Julio

[toc] | [prev] | [next] | [standalone]


#37568

FromJohn G Harris <niam@jghnorth.org.uk.invalid>
Date2019-10-16 16:06 +0100
Message-ID<s98eqeli9bs9oab9f1e6i1lneg0dggi4ce@4ax.com>
In reply to#37567
On Tue, 15 Oct 2019 12:32:09 -0700 (PDT), Julio Di Egidio
<julio@diegidio.name> wrote:

>On Tuesday, 15 October 2019 19:21:59 UTC+2, John G Harris  wrote:
  <snip>

>...
>> You're saying some classes in a program are not data types? Wow!
>
>You systematically just putting bullshit in my mouth is the mark of a
>retarded cunt, i.e. not even an interesting one at that.

Says he carefully hiding the statement by him that I translated into
English.

And equally carefully avoiding any attempt to clarify what he is
trying to say.

  John

[toc] | [prev] | [next] | [standalone]


#37555

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-10-13 14:02 -0700
Message-ID<ef2b6293-3523-4b41-8823-ae2db048c06b@googlegroups.com>
In reply to#37542
On Sunday, October 13, 2019 at 5:31:46 AM UTC-5, luserdroog wrote:
> I reworked the Weather App to try to make better use of Object Orientation.
> It seems to really help to group related things together. My use of the
> controller seems a little weird, though. I got all the control functions
> grouped nicely, but they're not in a class. I didn't see any easy way to
> do that given the way it all works. I'm not sure if I need more than one
> control so that may be moot.
> 
> The MVC classes have been supplemented with a SessionModel that backs the
> value up in session storage, a DependentModel that observes other Models
> and modifies its own value before notifying any views, and a few helpful
> functions in the View class.
> 
> The app itself starts by making a few customized Models. Then all the
> model instances are defined. Then all the views on those models. Then
> the controller is extracted from the primary view and used to hold
> the UI functions. 
> 
> There still remain a few unencapsulated functions but they are all pure
> utility functions it doesn't seem too bad to leave them vanilla.
> 
> https://luser-dr00g.github.io/weather4/
> https://github.com/luser-dr00g/luser-dr00g.github.io/tree/master/weather4
> 
> Comments welcome.
> 

1. XHR vs Fetch

XmlHttpRequest is becoming legacy. Consider using Fetch instead:

<https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch>


2. Conventions

The convention for variable and method names is camelCase:

show_current_weather -> showCurrentWeather

3. Subclassing

You're still not using classes properly:

```javascript
var control = report.getController();
Object.assign( control, {
  search: function(){ location.value = this.getView().find('.i_search').value },
  unit_imperial: function(){ unit.value = 'imperial' },
  unit_metric:   function(){ unit.value = 'metric'   },
  unit_standard: function(){ unit.value = 'standard' },
  current:   function(){ report_type.value = 'current'   },
  forecast2: function(){ report_type.value = 'forecast2' },
  forecast3: function(){ report_type.value = 'forecast3' },
  forecast4: function(){ report_type.value = 'forecast4' },
  forecast5: function(){ report_type.value = 'forecast5' },
  show_server_data:function(){ showing_server_data.value = true  },
  hide_server_data:function(){ showing_server_data.value = false },
});
```

Create a new subclass instead. I assume this is the intent:

```javascript
class WeatherController extends Controller {
  search(){ ... }
  unitImperial(){ ... }
  unit_metric(){ ... }
  unit_standard(){ ... }
  current(){ ... }
  forecast2(){ ... }
  forecast3(){ ... }
  forecast4(){ ... }
  forecast5(){ ... }
  showServerData(){ ... }
  hideServerData(){ ...}
}

var foo = new WeatherController()
```

4. use the DOM instead of innerHTML

You're doing things like the following:

```javascript
format_forecast_data( data, days ){
  return `<h1>${days} days forecast for \
<nobr>${data.city.name},</nobr> ${data.city.country}</h1>
<div class=report_data>${this.format_forecast_results(data,days)}</div>`;
}
```

Instead, have the element in the page, then update it directly.

You have the find(...) method now, so use it:

```javascript
...
this.find('.report_data').textContent = ...;
```

5. Switches are not Object Oriented.

You have the following:

```javascript
switch( report_type.value ){
  case 'current':   this.show_current_weather( value ); break;
  case 'forecast2': this.show_forecast( value, 2 );     break;
  case 'forecast3': this.show_forecast( value, 3 );     break;
  case 'forecast4': this.show_forecast( value, 4 );     break;
  case 'forecast5': this.show_forecast( value, 5 );     break;
}
```

This is a hint that you have a missing class or are not using inheritance. You need to refactor this so that it becomes a single method call on an object. Something which may help with understanding why would be a blog post of mine on a related issue:

<https://thenewobjective.com/the-great-maze-of-jquery/>

6. Don't pass a function to super

```javascript
  constructor( model ){
    super( model,
      function( value ){
        ...
      });
  }
```

This is a hint that you should override/extend your class.

```javascript
class View {
  ...
  constructor( model, update ){
    if( model ) this.setModel( model )
    if( update ) this.onUpdate = update;
  }
  update( data ){
    if( typeof( this.onUpdate ) == 'function' ) this.onUpdate( data );
    this._subViews.forEach( s=> s.update( data ) );
  }
   ...
}
```

Something you can do here is define an onUpdate method that does nothing by default. This would eliminate the need for an `if` statement in the update method and the need to pass it to the constructor:


```javascript
class View {
  ...
  constructor( model ){
    if( model ) this.setModel( model )
  }
  update( data ){
    this.onUpdate( data );
    this._subViews.forEach( s=> s.update( data ) );
  }
  onUpdate(value) { ... }
   ...
}

class WeatherView extends View {
  ...
  onUpdate(value) { 
    switch( report_type.value ){
      case 'current':   this.show_current_weather( value ); break;
      ...
    }
 }
  ...
}

```

Notice that the WeatherView will no longer need an explicit constructor defined

Now do the same thing for all of the Views.

```javascript
var unit_controls = new View( unit,
  function( value ){
    console.log( value );
    this.show( this.find('.unit_imperial') );
    this.show( this.find('.unit_metric') );
    this.show( this.find('.unit_standard') );
    this.hide( this.find('.unit_' + value) );
  }
);

// becomes:

class UnitControls extends View {
   ...
   onUpdate(value){...}
   ...
}
```

7. View in context of an element

If you associate each view with a specific element, many of your methods
can be simplified greatly:

```javascript
class View {
  _htmlElement
  ...
  find(sel){
    return this._htmlElement.querySelector(sel)
  }
  show(){
    this._htmlElement.style.display = 'block'
  }
  hide(){
    this._htmlElement.style.display = 'none'
  }
  ...
}
```

and so on.

8. Utility functions are just undefined objects

You have a lot of these. Take a look at what they operate on and you can
see what they should be methods of.  For example the date functions can be defined as methods of your own Date subclass:

```javascript
class Chrono extends Date {
  dayOfWeek(){
    let w = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
    return w[ this.getDay() ];
  }
  ...
}
```

There is more, but I'm out of time for this round. HTH

[toc] | [prev] | [next] | [standalone]


#37561

Fromdr.j.r.stockton@gmail.com
Date2019-10-14 13:28 -0700
Message-ID<d25e614e-5ad5-4f72-8d22-605d6c46a459@googlegroups.com>
In reply to#37555
On Sunday, 13 October 2019 22:02:38 UTC+1, Michael Haufe (TNO)  wrote:


>     let w = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
>     return w[ this.getDay() ];


If one appends another 'Sunday', then the array can also be used with the convention of ISO 8601, in which the days of the week are Mon=1 to Sun=7.  Only a minority of countries start the week on Sunday nowadays

-- 
  (c) John Stockton, near London, UK.  Using Google Groups.           |
 Mail: J.R.""""""""@physics.org - or as Reply-To, if any.             |

[toc] | [prev] | [next] | [standalone]


#37562

From"Michael Haufe (TNO)" <tno@thenewobjective.com>
Date2019-10-14 14:58 -0700
Message-ID<a90da934-b703-4150-ad4a-7713766acd06@googlegroups.com>
In reply to#37561
On Monday, October 14, 2019 at 3:28:07 PM UTC-5, dr.j.r...@gmail.com wrote:
> On Sunday, 13 October 2019 22:02:38 UTC+1, Michael Haufe (TNO)  wrote:
> 
> 
> >     let w = ['Sunday','Monday','Tuesday','Wednesday','Thursday','Friday','Saturday'];
> >     return w[ this.getDay() ];
> 
> 
> If one appends another 'Sunday', then the array can also be used with the convention of ISO 8601, in which the days of the week are Mon=1 to Sun=7.  Only a minority of countries start the week on Sunday nowadays

I didn't want to change to much of the provided code in in swoop.

Even better than your suggestion is to use the modern API for this:

```JavaScript
new Date().toLocaleDateString('en-US', {weekday: 'long'})
// "Monday"

new Date().toLocaleDateString('de-DE', {weekday: 'long'})
// "Montag"
```

Ref: <https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleDateString>

[toc] | [prev] | [next] | [standalone]


#37565

Fromluserdroog <luser.droog@gmail.com>
Date2019-10-15 09:00 -0700
Message-ID<88cd9232-c61e-42e0-973c-1ca0b8ee9d48@googlegroups.com>
In reply to#37555
On Sunday, October 13, 2019 at 4:02:38 PM UTC-5, Michael Haufe (TNO) wrote:
> On Sunday, October 13, 2019 at 5:31:46 AM UTC-5, luserdroog wrote:

> > https://luser-dr00g.github.io/weather4/
> > https://github.com/luser-dr00g/luser-dr00g.github.io/tree/master/weather4
> > 
> > Comments welcome.
> > 

Mostly for my own reference, I'm snipping parts that I've dealt with and
reposting this useful list.

> 1. XHR vs Fetch
> 
> XmlHttpRequest is becoming legacy. Consider using Fetch instead:
> 
> <https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch>
> 

I'm putting off this part since it appears orthogonal to the rest.
 
> 2. Conventions

I have applied this to all the functions and methods in the javascript,
but stopped short with my 'unit_imperial' etc. control methods since
they need to match the class names of my DOM elements. Changing these
means I lose my easy technique of concatenating 'unit_' with the value
to get the class name.

> 3. Subclassing
[done]
> 
> 4. use the DOM instead of innerHTML
> 
> You're doing things like the following:
> 
> ```javascript
> format_forecast_data( data, days ){
>   return `<h1>${days} days forecast for \
> <nobr>${data.city.name},</nobr> ${data.city.country}</h1>
> <div class=report_data>${this.format_forecast_results(data,days)}</div>`;
> }
> ```
> 
> Instead, have the element in the page, then update it directly.
> 
> You have the find(...) method now, so use it:
> 
> ```javascript
> ...
> this.find('.report_data').textContent = ...;
> ```
> 
> 5. Switches are not Object Oriented.
> 
> You have the following:
> 
> ```javascript
> switch( report_type.value ){
>   case 'current':   this.show_current_weather( value ); break;
>   case 'forecast2': this.show_forecast( value, 2 );     break;
>   case 'forecast3': this.show_forecast( value, 3 );     break;
>   case 'forecast4': this.show_forecast( value, 4 );     break;
>   case 'forecast5': this.show_forecast( value, 5 );     break;
> }
> ```
> 
> This is a hint that you have a missing class or are not using inheritance. You need to refactor this so that it becomes a single method call on an object. Something which may help with understanding why would be a blog post of mine on a related issue:
> 
> <https://thenewobjective.com/the-great-maze-of-jquery/>
> 
> 6. Don't pass a function to super
[done]

> 7. View in context of an element
> 
> If you associate each view with a specific element, many of your methods
> can be simplified greatly:
> 
> ```javascript
> class View {
>   _htmlElement
>   ...
>   find(sel){
>     return this._htmlElement.querySelector(sel)
>   }
>   show(){
>     this._htmlElement.style.display = 'block'
>   }
>   hide(){
>     this._htmlElement.style.display = 'none'
>   }
>   ...
> }
> ```
> 
> and so on.
> 
> 8. Utility functions are just undefined objects
> 
> You have a lot of these. Take a look at what they operate on and you can
> see what they should be methods of.  For example the date functions can be defined as methods of your own Date subclass:
> 

I've applied this to the Date related functions. Need to do some thinking
about compassPoints().

> 
> There is more, but I'm out of time for this round. HTH

Thank you very much. I'm finding this effort incredibly helpful.
I'm experiencing resistance or difficulty with these remaining pieces
concerning the DOM. OTOH, I've had some ideas about how to improve
the UX and present more information, possibly with fewer http requests.

If I put all the elements in the html, then I can't have the polymorphic
behavior where the current weather fits in one div but the various
forecasts stuff several divs into the same container. So that means
I will either need extra models and views to show/hide each part, OR
change the UX so the two views are both active at the same time.

So instead maybe I can: make exactly 2 http requests, fetching the
current weather and the 5 day forecast. Do all unit conversions locally
and don't make new requests when changing. Present a "detail pane"
which shows current weather, as well as a "chart pane" showing a table
of <time><temp><brief><icon> for the specified number of days. Then I can
have the detail pane show the details for a timeslice when the mouse
hovers over it.

So, still thinking over this bit.

[toc] | [prev] | [standalone]


Back to top | Article view | comp.lang.javascript


csiph-web