Joe 8:51 pm on April 20, 2021

Simple Python CLI


# see https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/

# -*- coding: utf-8 -*-
from jsnippets import snippets

CUR_SNIP_IX = 0; CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def main():
    while True:
        cmd = (input ('?&amp;gt; ')).lower()
        if cmd == 'exit': break
        elif cmd == 'print': printCurrentSnippet()
        elif cmd == 'printa': printAllSnippets()
        elif cmd == 'next': bumpCUR_SNIP_IX()
        elif cmd == 'zero': zeroOutCUR_SNIP_IX()
def zeroOutCUR_SNIP_IX():
    global CUR_SNIP_IX, CUR_SNIP_KEY
    CUR_SNIP_IX = 0; CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def bumpCUR_SNIP_IX():
    global CUR_SNIP_IX, CUR_SNIP_KEY
    CUR_SNIP_IX = ( (CUR_SNIP_IX + 1)%(len(snippets.keys())) );
    CUR_SNIP_KEY = list(snippets.keys())[CUR_SNIP_IX]
def printCurrentSnippet():
    print(snippets[CUR_SNIP_KEY])
    def printAllSnippets():
    print(snippets)

if __name__ == '__main__':
    main()

Joe 8:49 pm on April 20, 2021

Post code with new WP.com

See How to post source code on WordPress
URL https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/https://pythonconquerstheuniverse.wordpress.com/2011/11/06/posting-sourcecode-on-wordpress/

Joe 11:20 pm on April 2, 2021
Tags: ember, ember.js

Help for ember cli

GitBash listing of ember — help

to edit with markdown,

click 3-dots top right
at middle select Tools >>Block Manager
[X] Markdown was checked.
Question just use markdown?
experiment -> just use markdown in a new block

GB …/~/ $ ember –help
Usage: ember

Markdown Experiment

Code Listing

Available commands in ember-cli


&gt; ember addon     # Generates a new folder structure for building an addon, complete with test harness.

&gt; ember asset-sizes    # Shows the sizes of your asset files.

&gt; ember build    # Builds your app and places it into the output path (dist/ by default).

&gt; ember destroy     # Destroys code generated by generate command.

&gt; ember generate     # Generates new code from blueprints.


&gt; ember help       # Outputs the usage instructions for all commands or the provided command

&gt; ember init       # Reinitializes a new ember-cli project in the current folder.

&gt; ember install       # Installs an ember-cli addon from npm.

&gt; ember new       # Creates a new directory and runs ember init in it.

&gt; ember serve     # Builds and serves your app, rebuilding on file changes.

&gt; ember test     # Runs your app’s test suite.

&gt; version     # outputs ember-cli version



&gt; # Available commands from @ember/optional-features:

&gt; ember feature   # Prints the USAGE.

&gt; ember feature:list   # List all available features.

&gt; ember feature:enable     # Enable feature.

&gt; ember feature:disable     # Disable feature.

Ember’s built-in blueprints as of 4/3/2021 10:19 AM PDT

Ember’s built-in blueprints are here

N.B. According to Creating blueprints

Here’s a list of their names from GitHub

acceptance-test
component-addon
component-class-addon
component-class
component-test
component
controller-test
controller
helper-addon
helper-test
helper
initializer-addon
initializer-test
initializer
instance-initializer-addon
instance-initializer-test
instance-initializer
mixin-test
mixin
route-addon
route-test
route
service-test
service
template
util-test
util

-addon-import.js
edition-detector.js
test-framework-detector.js

I filed an issue with wp.com

Markdown substitutes > for > inside codefence #51666

GIT bash Available commands in ember-cli:

ember addon
Generates a new folder structure for building an addon, complete with test harness.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String) (Default: addon)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–skip-git (Boolean) (Default: false)
aliases: -sg
–yarn (Boolean)
–directory (String)
aliases: -dir
–lang (String) Sets the base human language of the addon’s own test application via index.html

ember asset-sizes
Shows the sizes of your asset files.
–output-path (Path) (Default: dist/)
aliases: -o
–json (Boolean) (Default: false)

ember build
Builds your app and places it into the output path (dist/ by default).
aliases: b
–environment (String) (Default: development) Possible values are “development”, “production”, and “test”.
aliases: -e , -dev (–environment=development), -prod (–environment=production)
–output-path (Path) (Default: dist/)
aliases: -o
–watch (Boolean) (Default: false)
aliases: -w
–watcher (String)
–suppress-sizes (Boolean) (Default: false)

ember destroy
Destroys code generated by generate command.
aliases: d
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

ember generate
Generates new code from blueprints.
aliases: g
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–pod (Boolean) (Default: false)
aliases: -p, -pods
–classic (Boolean) (Default: false)
aliases: -c
–dummy (Boolean) (Default: false)
aliases: -dum, -id
–in-repo-addon (String) (Default: null)
aliases: –in-repo , -ir
–in (String) (Default: null) Runs a blueprint against an in repo addon. A path is expected, relative to the root of the project.

ember help
Outputs the usage instructions for all commands or the provided command
aliases: h, –help, -h
–verbose (Boolean) (Default: false)
aliases: -v
–json (Boolean) (Default: false)

ember init
Reinitializes a new ember-cli project in the current folder.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–welcome (Boolean) (Default: true) Installs and uses {{ember-welcome-page}}. Use –no-welcome to skip it.
–yarn (Boolean)
–name (String) (Default: “”)
aliases: -n
–lang (String) Sets the base human language of the application via index.html

ember install
Installs an ember-cli addon from npm.
aliases: i
–save (Boolean) (Default: false)
aliases: -S
–save-dev (Boolean) (Default: true)
aliases: -D
–save-exact (Boolean) (Default: false)
aliases: -E, –exact
–yarn (Boolean) Use –yarn to enforce yarn usage, or –no-yarn to enforce npm

ember new
Creates a new directory and runs ember init in it.
–dry-run (Boolean) (Default: false)
aliases: -d
–verbose (Boolean) (Default: false)
aliases: -v
–blueprint (String) (Default: app)
aliases: -b
–skip-npm (Boolean) (Default: false)
aliases: -sn
–skip-bower (Boolean) (Default: false)
aliases: -sb
–skip-git (Boolean) (Default: false)
aliases: -sg
–welcome (Boolean) (Default: true) Installs and uses {{ember-welcome-page}}. Use –no-welcome to skip it.
–yarn (Boolean)
–directory (String)
aliases: -dir
–lang (String) Sets the base human language of the application via index.html

ember serve
Builds and serves your app, rebuilding on file changes.
aliases: server, s
–port (Number) (Default: 4200) To use a port different than 4200. Pass 0 to automatically pick an available port.
aliases: -p
–host (String) Listens on all interfaces by default
aliases: -H
–proxy (String)
aliases: -pr , -pxy
–proxy-in-timeout (Number) (Default: 120000) When using –proxy: timeout (in ms) for incoming requests
aliases: -pit
–proxy-out-timeout (Number) (Default: 0) When using –proxy: timeout (in ms) for outgoing requests
aliases: -pot
–secure-proxy (Boolean) (Default: true) Set to false to proxy self-signed SSL certificates
aliases: -spr
–transparent-proxy (Boolean) (Default: true) Set to false to omit x-forwarded-* headers when proxying
aliases: –transp
–watcher (String) (Default: events)
aliases: -w
–live-reload (Boolean) (Default: true)
aliases: -lr
–live-reload-host (String) Defaults to host
aliases: -lrh
–live-reload-base-url (String) Defaults to baseURL
aliases: -lrbu
–live-reload-port (Number) Defaults to same port as ember app
aliases: -lrp
–live-reload-prefix (String) (Default: _lr) Default to _lr
aliases: –lrprefix
–environment (String) (Default: development) Possible values are “development”, “production”, and “test”.
aliases: -e , -dev (–environment=development), -prod (–environment=production)
–output-path (Path) (Default: dist/)
aliases: -op , -out
–ssl (Boolean) (Default: false) Set to true to configure Ember CLI to serve using SSL.
–ssl-key (String) (Default: ssl/server.key) Specify the private key to use for SSL.
–ssl-cert (String) (Default: ssl/server.crt) Specify the certificate to use for SSL.
–path (Path) Reuse an existing build at given path.

ember test
Runs your app’s test suite.
aliases: t
–environment (String) (Default: test) Possible values are “development”, “production”, and “test”.
aliases: -e
–config-file (String)
aliases: -c , -cf
–server (Boolean) (Default: false)
aliases: -s
–host (String)
aliases: -H
–test-port (Number) (Default: 7357) The test port to use when running tests. Pass 0 to automatically pick an available port
aliases: -tp
–filter (String) A string to filter tests to run
aliases: -f
–module (String) The name of a test module to run
aliases: -m
–watcher (String) (Default: events)
aliases: -w
–launch (String) (Default: false) A comma separated list of browsers to launch for tests.
–reporter (String) Test reporter to use [tap|dot|xunit] (default: tap)
aliases: -r
–silent (Boolean) (Default: false) Suppress any output except for the test report
–ssl (Boolean) (Default: false) Set to true to configure testem to run the test suite using SSL.
–ssl-key (String) (Default: ssl/server.key) Specify the private key to use for SSL.
–ssl-cert (String) (Default: ssl/server.crt) Specify the certificate to use for SSL.
–testem-debug (String) File to write a debug log from testem
–test-page (String) Test page to invoke
–path (Path) Reuse an existing build at given path.
–query (String) A query string to append to the test page URL.
–output-path (Path)
aliases: -o

ember version
outputs ember-cli version
aliases: v, –version, -v
–verbose (Boolean) (Default: false)

GB …/~/ $

ember generate –help

GB …/~/ $ ember generate –help
Requested ember-cli commands:

Available blueprints:
ember-cli:
addon
The default blueprint for ember-cli addons.
addon-import
Generates an import wrapper.
app
The default blueprint for ember-cli projects.
blueprint
Generates a blueprint and definition.
http-mock
Generates a mock api endpoint in /api prefix.
http-proxy
Generates a relative proxy to another server.
in-repo-addon
The blueprint for addon in repo ember-cli addons.
lib
Generates a lib directory for in-repo addons.
server
Generates a server directory for mocks and proxies.
vendor-shim
Generates an ES6 module shim for global libraries.

GB …/~/ $

ember generate component –help

GB …/~/ $ ember generate component –help
Requested ember-cli commands:

The ‘component’ blueprint does not exist in this project.

GB …/~/ $

#ember, #ember-js

Joe 4:36 pm on February 4, 2021

JCW COVID-19 County Compare Plugin

Joe Codeswell’s “JCW COVID-19 County Compare Plugin” for WordPress is currently under development.

This is the Plugin Uri.

This plugin allows the user to display COVID-19 County Data Comparison Charts.

Stay tuned for more info.

Here is the short link: https://wp.me/p1zI3Z-xD

Joe 9:18 pm on November 9, 2020
Tags: markdown ( 5 ), web2py ( 15 )

web2py genericIndexJoe.html & layoutJoe.html

genericIndexJoe.html

{{extend 'layoutJoe.html'}}
{{response.menu}} {{# uncommented, makes the menu appear }}
{{ #=BEAUTIFY(response._vars) }}
{{ =response._vars['message'] }}

layoutJoe.html

<!DOCTYPE html>
<!-- copied from ordersarrive >> layoutJoe.html which may be crappy -->

<!--[if (gt IE 9)|!(IE)]><!--> <html class="no-js" lang="{{=T.accepted_language or 'en'}}"> <!--<![endif]-->
  <head>
    <meta charset="utf-8">
    <!-- www.phpied.com/conditional-comments-block-downloads/ -->
    <!-- Always force latest IE rendering engine
         (even in intranet) & Chrome Frame
         Remove this if you use the .htaccess -->
    <meta http-equiv="X-UA-Compatible" content="IE=edge{{=not request.is_local and ',chrome=1' or ''}}">
    <!--  Mobile Viewport Fix
          j.mp/mobileviewport & davidbcalhoun.com/2010/viewport-metatag
          device-width: Occupy full width of the screen in its current orientation
          initial-scale = 1.0 retains dimensions instead of zooming out if page height > device height
          user-scalable = yes allows the user to zoom in -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>{{=response.title or request.application}}</title>
    <!-- http://dev.w3.org/html5/markup/meta.name.html -->
    <meta name="application-name" content="{{=request.application}}">
    <!-- Speaking of Google, don't forget to set your site up:
         http://google.com/webmasters -->
    <meta name="google-site-verification" content="">
    <!-- include stylesheets -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"/>
    <link rel="stylesheet" href="{{=URL('static','css/bootstrap.min.css')}}"/>
    <link rel="stylesheet" href="{{=URL('static','css/web2py-bootstrap4.css')}}"/>
    <link rel="shortcut icon" href="{{=URL('static','images/favicon.ico')}}" type="image/x-icon">
    <link rel="apple-touch-icon" href="{{=URL('static','images/favicon.png')}}">
    <!-- All JavaScript at the bottom, except for Modernizr which enables
         HTML5 elements & feature detects -->
    <a href="http://=URL('static','js/modernizr-2.8.3.min.js')">http://=URL('static','js/modernizr-2.8.3.min.js')</a>
    <!-- Favicons -->
    {{include 'web2py_ajax.html'}} <!-- this includes jquery.js, calendar.js/.css and web2py.js -->
    {{block head}}{{end}}
  </head>
  <body>
    <div class="w2p_flash alert alert-dismissable">{{=response.flash or ''}}</div>
    <!-- Navbar ======================================= -->
    <nav class="navbar navbar-light navbar-expand-md bg-faded bg-dark navbar-dark justify-content-center">
<!--        <a href="http://web2py.com" class="navbar-brand d-flex w-50 mr-auto">web2py</a> -->
        <a href="http://JoeCodeswell.com" class="navbar-brand d-flex w-50 mr-auto">JoeCodeswell.com</a> 
       <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
         <span class="navbar-toggler-icon"></span>
       </button>
       <div class="navbar-collapse collapse w-100" id="navbarNavDropdown">
         <ul class="navbar-nav w-100 justify-content-center">
          {{for _item in response.menu or []:}}
          {{if len(_item)<4 or not _item[3]:}}
          <li class="nav-item {{if _item[1]:}}active{{pass}}">
            <a class="nav-link" href="{{=_item[2]}}">{{=_item[0]}}</a>
          </li>
          {{else:}}
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="{{=_item[2]}}" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">{{=_item[0]}}</a>
            <div class="dropdown-menu">
              {{for _subitem in _item[3]:}}
              <a class="dropdown-item" href="{{=_subitem[2]}}">{{=_subitem[0]}}</a>
              {{pass}}
            </div>
          </li>
          {{pass}}
          {{pass}}
        </ul>
         <form class="form-inline my-2 my-lg-0">
             <input class="form-control mr-sm-2" type="text" placeholder="Search">
         </form>
        {{if 'auth' in globals():}}
        <ul class="nav navbar-nav ml-auto w-100 justify-content-end">
          <li class="nav-item dropdown">
            <a class="nav-link dropdown-toggle" href="#" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
              {{if auth.user:}}{{=auth.user.first_name}}{{else:}}LOGIN{{pass}}
            </a>
            <div class="dropdown-menu dropdown-menu-right">
              {{if auth.user:}}
              <a class="dropdown-item" href="{{=URL('default','user/profile')}}">{{=T('Profile')}}</a>
              {{if 'change_password' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/change_password')}}">{{=T('Change Password')}}</a>
              {{pass}}
              <a class="dropdown-item" href="{{=URL('default','user/logout')}}">{{=T('Logout')}}</a>
              {{else:}}
              <a class="dropdown-item" href="{{=URL('default','user/login')}}">{{=T('Login')}}</a>
              {{if 'register' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/register')}}">{{=T('Sign up')}}</a>
              {{pass}}
              {{if 'retrieve_password' not in auth.settings.actions_disabled:}}
              <a class="dropdown-item" href="{{=URL('default','user/retrieve_password')}}">{{=T('Lost Password')}}</a>
              {{pass}}
              {{pass}}
            </div>
          </li>
        </ul>
        {{pass}}
      </div>
    </nav>

    <!-- Masthead ===================================== -->
    {{block header}}
    {{end}}
    <!-- Main ========================================= -->
    <!-- Begin page content -->
    <div class="container-fluid main-container">
      {{include}}
      {{=response.toolbar() if response.show_toolbar else ''}} 
    </div>

    {{block footer}} <!-- this is default footer -->
    <footer class="footer container-fluid">
      <div class="row">
        <div class="col-md-12">
          <div class="copyright pull-left">{{=T('Copyright ')}} © {{=request.now.year}} Joseph P. Dorocak, Sacramento, CA. All rights reserved.</div>
          <div id="poweredBy" class="pull-right">
            {{=T('Powered by')}}
            <a href="http://www.web2py.com/">web2py</a>
          </div>
        </div>
      </div>
    </footer>
    {{end}}
    <!-- The javascript =============================== -->
    <a href="http://=URL('static','js/bootstrap.bundle.min.js')">http://=URL('static','js/bootstrap.bundle.min.js')</a>
    <a href="http://=URL('static','js/web2py-bootstrap4.js')">http://=URL('static','js/web2py-bootstrap4.js')</a>
    {{block page_js}}{{end page_js}}
    {{if response.google_analytics_id:}}
    <!-- Analytics ==================================== -->
    <a href="http://=URL('static','js/analytics.min.js')">http://=URL('static','js/analytics.min.js')</a>
    <script type="text/javascript">
      analytics.initialize({
      'Google Analytics':{trackingId:'{{=response.google_analytics_id}}'}
      });
    </script>
    {{pass}}
  </body>
</html>





<!-- original stuff below here -->
{{#extend 'layout.html'}}
<!-- <h1>This is the layoutJoe.html template</h1> -->
{{#=BEAUTIFY(response._vars)}}

#markdown, #web2py

Joe 9:10 pm on November 9, 2020
Tags: markdown ( 5 ), web2py ( 15 )

web2py Markdown Usage Example

from gluon.contrib.markdown import WIKI as markdown
def index():
    """ ##
      [see](web2py.com/examples/static/sphinx/gluon/gluon.contrib.markdown.html)
      [Markdown see](https://groups.google.com/g/web2py/c/om9aXi3xg3Y/m/jE4t-KwpBQAJ)

    """
    # response.view = 'genericIndexJoe.html'
    response.flash = T("Welcome!")

    my_md = '''## Welcome to the cov19cty App!
### To generate County Comparison Charts:
1. Click Menu >> Gen Chart >> Multi-County Input Form
  1. Add Your Counties to compare (state, county, typeOfData)
  2. Define Your Time Series
2. Click Menu >> Gen Chart >> Show Multi-County Chart
    '''
    my_html = markdown(my_md)

    # return dict( message=my_html )  
    return my_html

#markdown, #web2py

Joe 4:24 pm on October 2, 2018

react post from wp-admin editor text tab


/**
 *  File: App.js
 *  "React State Example-1: Update state using 2 select elements."
 *  by Joe Dorocak (JoeCodeswell.com) 
 *  Demonstrates changing state with 2 select elements 
 * 
 *  Source Code Link: https://joecodeswell.wordpress.com/2018/09/25/react-state-example-1-update-state-using-2-select-elements/
 * 
 * MIT License
 * 
 * Copyright (c) [2018] [Joseph P. Dorocak]
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 *  https://en.forums.wordpress.com/topic/posting-javascript-markdown-does-not-show/
 * 
 *  
 */

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

let programmerList =  ["Admiral Grace Hopper","Ada Lovelace","Donald Knuth","James Gosling","Guido van Rossum","Linus Torvalds"];

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      programmer_list: programmerList,
      fmSelFrom: programmerList[0],
      fmSelTo:programmerList[0]
    };
  }
  handleFromChange = (event) => {
    this.setState({ 
      fmSelFrom: event.target.value     
    });
  }
  handleToChange = (event) => {
    this.setState({ 
      fmSelTo: event.target.value    
    });
  }
  render() {
    // inside class App -> render(){ before return(
    return (

      /* begin out of the box jsx */
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {/* end out of the box jsx */}
        {/* begin non out of the box jsx */}
        <div id="show-programmer-list">
          <p>Programmer List</p>
            {this.state.programmer_list.map(  (itm,ix) => <p key={ix} value={itm} >ix:{ix}->itm:{itm}</p> )   }          
        </div>

        <div id="select-programmer-from-to">
        <label>
            Pick your FROM Programmer:        
            <select id="select-from"  value={this.value} onChange={this.handleFromChange} >
              {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={ix+":"+itm} >{itm}</option> )   }  
            </select>
        </label>
        <label>
          Pick your TO Programmer:         
          <select id="select-to" value={this.key} onChange={this.handleToChange} >
            {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={itm} >{itm}</option> )   }
          </select>
        </label>

        <p>this.state.fmSelFrom: {this.state.fmSelFrom}</p>
        <p>this.state.fmSelTo: {this.state.fmSelTo}</p>

        </div>
        {/* end non out of the box jsx */}
     
      </div> 
      /* end of <div className="App"> */

      // inside class App -> render(){ ->return( -> after <div className="App"></div>

    ); // end render -> return
  } // end render () code
}

export default App;
App.js.txt
Displaying App.js.txt.

Joe 4:08 pm on October 2, 2018

Help with publishing code on WordPress.com

Here is a link to a WordPress.com support request of mine regarding publishing code on WordPress.com, posting “` javascript markdown DOES NOT show ”.

The folks were a GREAT HELP.

Thanks again to @melancholia.

Love and peace,

Joe

Joe 8:15 pm on September 25, 2018

React State Example-1: Update state using 2 select elements.

Based on Out of the box src for create-react-app -V 1.5.2


/**
 *  File: App.js
 *  "React State Example-1: Update state using 2 select elements."
 *  by Joe Dorocak (JoeCodeswell.com) 
 *  Demonstrates changing state with 2 select elements 
 * 
 *  Source Code Link: https://joecodeswell.wordpress.com/2018/09/25/react-state-example-1-update-state-using-2-select-elements/
 * 
 * MIT License
 * 
 * Copyright (c) [2018] [Joseph P. Dorocak]
 * 
 * Permission is hereby granted, free of charge, to any person obtaining a copy
 * of this software and associated documentation files (the "Software"), to deal
 * in the Software without restriction, including without limitation the rights
 * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the Software is
 * furnished to do so, subject to the following conditions:
 * 
 * The above copyright notice and this permission notice shall be included in all
 * copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
 * IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
 * FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
 * AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
 * LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
 * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
 * SOFTWARE.
 * 
 *  https://en.forums.wordpress.com/topic/posting-javascript-markdown-does-not-show/
 * 
 *  
 */

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

let programmerList =  ["Admiral Grace Hopper","Ada Lovelace","Donald Knuth","James Gosling","Guido van Rossum","Linus Torvalds"];

class App extends Component {
  constructor() {
    super();
    this.state = {
      counter: 0,
      programmer_list: programmerList,
      fmSelFrom: programmerList[0],
      fmSelTo:programmerList[0]
    };
  }
  handleFromChange = (event) => {
    this.setState({ 
      fmSelFrom: event.target.value     
    });
  }
  handleToChange = (event) => {
    this.setState({ 
      fmSelTo: event.target.value    
    });
  }
  render() {
    // inside class App -> render(){ before return(
    return (

      /* begin out of the box jsx */
      <div className="App">
        <header className="App-header">
          <img src={logo} className="App-logo" alt="logo" />
          <h1 className="App-title">Welcome to React</h1>
        </header>
        <p className="App-intro">
          To get started, edit <code>src/App.js</code> and save to reload.
        </p>
        {/* end out of the box jsx */}
        {/* begin non out of the box jsx */}
        <div id="show-programmer-list">
          <p>Programmer List</p>
            {this.state.programmer_list.map(  (itm,ix) => <p key={ix} value={itm} >ix:{ix}->itm:{itm}</p> )   }          
        </div>

        <div id="select-programmer-from-to">
        <label>
            Pick your FROM Programmer:        
            <select id="select-from"  value={this.value} onChange={this.handleFromChange} >
              {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={ix+":"+itm} >{itm}</option> )   }  
            </select>
        </label>
        <label>
          Pick your TO Programmer:         
          <select id="select-to" value={this.key} onChange={this.handleToChange} >
            {this.state.programmer_list.map(  (itm,ix) => <option key={ix} value={itm} >{itm}</option> )   }
          </select>
        </label>

        <p>this.state.fmSelFrom: {this.state.fmSelFrom}</p>
        <p>this.state.fmSelTo: {this.state.fmSelTo}</p>

        </div>
        {/* end non out of the box jsx */}
     
      </div> 
      /* end of <div className="App"> */

      // inside class App -> render(){ ->return( -> after <div className="App"></div>

    ); // end render -> return
  } // end render () code
}

// App.js.txt
// Displaying App.js.txt.

export default App;

Joe 5:01 pm on September 22, 2018
Tags: 222

Out of the box src for create-react-app -V 1.5.2

App.js out of the box

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {
    return (
      <div>
        <header>
          <img src="{logo}" alt="logo" />
          <h1>Welcome to React</h1>
        </header>

          To get started, edit <code>src/App.js</code> and save to reload.

      </div>
    );
  }
}

export default App;

App.css out of the box

.App {
  text-align: center;
}

.App-logo {
  animation: App-logo-spin infinite 20s linear;
  height: 80px;
}

.App-header {
  background-color: #222;
  height: 150px;
  padding: 20px;
  color: white;
}

.App-title {
  font-size: 1.5em;
}

.App-intro {
  font-size: large;
}

@keyframes App-logo-spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

App.test.js out of the box

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

it('renders without crashing', () => {
  const div = document.createElement('div');
  ReactDOM.render(<App />, div);
  ReactDOM.unmountComponentAtNode(div);
});

index.css out of the box

body {
  margin: 0;
  padding: 0;
  font-family: sans-serif;
}

index.js out of the box

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';

ReactDOM.render(<App />, document.getElementById('root'));
registerServiceWorker();

registerServiceWorker.js out of the box

<br />// In production, we register a service worker to serve assets from local cache.

// This lets the app load faster on subsequent visits in production, and gives
// it offline capabilities. However, it also means that developers (and users)
// will only see deployed updates on the "N+1" visit to a page, since previously
// cached resources are updated in the background.

// To learn more about the benefits of this model, read https://goo.gl/KwvDNy.
// This link also includes instructions on opting out of this behavior.

const isLocalhost = Boolean(
  window.location.hostname === 'localhost' ||
    // [::1] is the IPv6 localhost address.
    window.location.hostname === '[::1]' ||
    // 127.0.0.1/8 is considered localhost for IPv4.
    window.location.hostname.match(
      /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
    )
);

export default function register() {
  if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {
    // The URL constructor is available in all browsers that support SW.
    const publicUrl = new URL(process.env.PUBLIC_URL, window.location);
    if (publicUrl.origin !== window.location.origin) {
      // Our service worker won't work if PUBLIC_URL is on a different origin
      // from what our page is served on. This might happen if a CDN is used to
      // serve assets; see https://github.com/facebookincubator/create-react-app/issues/2374
      return;
    }

    window.addEventListener('load', () => {
      const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;

      if (isLocalhost) {
        // This is running on localhost. Lets check if a service worker still exists or not.
        checkValidServiceWorker(swUrl);

        // Add some additional logging to localhost, pointing developers to the
        // service worker/PWA documentation.
        navigator.serviceWorker.ready.then(() => {
          console.log(
            'This web app is being served cache-first by a service ' +
              'worker. To learn more, visit https://goo.gl/SC7cgQ'
          );
        });
      } else {
        // Is not local host. Just register service worker
        registerValidSW(swUrl);
      }
    });
  }
}

function registerValidSW(swUrl) {
  navigator.serviceWorker
    .register(swUrl)
    .then(registration => {
      registration.onupdatefound = () => {
        const installingWorker = registration.installing;
        installingWorker.onstatechange = () => {
          if (installingWorker.state === 'installed') {
            if (navigator.serviceWorker.controller) {
              // At this point, the old content will have been purged and
              // the fresh content will have been added to the cache.
              // It's the perfect time to display a "New content is
              // available; please refresh." message in your web app.
              console.log('New content is available; please refresh.');
            } else {
              // At this point, everything has been precached.
              // It's the perfect time to display a
              // "Content is cached for offline use." message.
              console.log('Content is cached for offline use.');
            }
          }
        };
      };
    })
    .catch(error => {
      console.error('Error during service worker registration:', error);
    });
}

function checkValidServiceWorker(swUrl) {
  // Check if the service worker can be found. If it can't reload the page.
  fetch(swUrl)
    .then(response => {
      // Ensure service worker exists, and that we really are getting a JS file.
      if (
        response.status === 404 ||
        response.headers.get('content-type').indexOf('javascript') === -1
      ) {
        // No service worker found. Probably a different app. Reload the page.
        navigator.serviceWorker.ready.then(registration => {
          registration.unregister().then(() => {
            window.location.reload();
          });
        });
      } else {
        // Service worker found. Proceed as normal.
        registerValidSW(swUrl);
      }
    })
    .catch(() => {
      console.log(
        'No internet connection found. App is running in offline mode.'
      );
    });
}

export function unregister() {
  if ('serviceWorker' in navigator) {
    navigator.serviceWorker.ready.then(registration => {
      registration.unregister();
    });
  }
}

logo.svg out of the box

NOT shown due to WordPress.com markdown limitations!

#222

Joe Codeswell – Notes to Myself and Others

Joe Dorocak's Programing Blog (We have a new look – Automatic's P2 Theme)

Recent Updates

Simple Python CLI

Post code with new WP.com

Help for ember cli

Markdown Experiment

Code Listing

Available commands in ember-cli

Ember’s built-in blueprints as of 4/3/2021 10:19 AM PDT

Here’s a list of their names from GitHub

I filed an issue with wp.com

JCW COVID-19 County Compare Plugin

Joe Codeswell’s “JCW COVID-19 County Compare Plugin” for WordPress is currently under development.

This is the Plugin Uri.

This plugin allows the user to display COVID-19 County Data Comparison Charts.

Stay tuned for more info.

web2py genericIndexJoe.html & layoutJoe.html

genericIndexJoe.html

layoutJoe.html

web2py Markdown Usage Example

web2py Markdown Usage Example

react post from wp-admin editor text tab

Help with publishing code on WordPress.com

React State Example-1: Update state using 2 select elements.

Out of the box src for create-react-app -V 1.5.2

App.js out of the box

App.css out of the box

App.test.js out of the box

index.css out of the box

index.js out of the box

registerServiceWorker.js out of the box

logo.svg out of the box