DEV Community: roadpilot

Recursion: Two ways to convert from a JavaScript for-loop

roadpilot — Mon, 11 Oct 2021 02:56:19 +0000

One of the cases you can use for a JavaScript example of a for-loop is an iteration through an array. For example, we will use an array of strings:

let arr = ['how','to','iterate','an','array']

To iterate through the array, we can use a for-loop:

const arrayLoop = arr => {
  for (let i=0; i<arr.length; i++){
      console.log(arr[i])
  }
}

This will loop through the array and perform whatever operation is in the block, in this case send the array element at the index of i to the console. The "i" index is what is actually controlling the loop. The loop is incrementing i, starting at 0 and adding 1 each cycle until i reaches the length of the array. Since the index is 0 based, the index of the first element of the array is 0 and the index of the last element is a number that is one less than the total number of elements (length) in the array. For example, if there are 4 elements in the array, the last element would have an index of 3 (one less than 4). The loop continues as long as the increment (index) is less than the length of the array (4).

One way to convert that for-loop to a recursion is to move the index into the argument for the function and then recursively call the function incrementing "i" in the call:

const arrayLoop = (arr, i=0) => {
  if (i>arr.length-1){return}
  console.log(arr[i])
  return (arrayLoop(arr, i+1))
}

Setting "i" to 0 as a default value allows you to call the function with just the "arr" argument. Just like in the for-loop, the index starts at 0 and increments in each recursive call until the loop breaks when "i" is greater than the length of the array.

Another option would be to have actually change or "mutate" the array passed into the argument. It the following example, we'll change each element to an upper case replacement of the element contents and create a new array while we change the contents of the source array. The source array passed in as an argument will no longer exist once the loop is completed.

let result=[]
const capitalizeWords = arr => {
  if (arr.length<1){return result}
  result.push(arr[0].toUpperCase())
  arr.shift()
  return (capitalizeWords(arr))
}

Each cycle through the loop takes the first element of the array, changes the element contents to upper case letters, adds it to the "result" array and then removes it from the source array (shift). This moves the next element into the "0" index position and shortens the array by element that was just removed. Then the function is recursively called until the length of the array is 0 - when all of the array elements have been "shifted" out of the array.

Recursion can be a little overwhelming. Little exercises like this help you learn a little better understanding of recursion and different ways to achieve it. If you need to find a recursive solution to a problem, you might be able to start from a for-loop and then convert it from there. Hope this was helpful.

SQL: Find the sum using two tables (Join and Subquery)

roadpilot — Mon, 04 Oct 2021 02:22:36 +0000

The problem statement:
"Given the CITY and COUNTRY tables, query the sum of the populations of all cities where the CONTINENT is 'Asia'.

Note: CITY.CountryCode and COUNTRY.Code are matching key columns."

The CITY table is a table of cities with a "POPULATION" field. The field is numeric so we can use native "sum" to add up the populations of the cities that meet the criteria. The CITY table uses "CountryCode" as it's foreign key to create the relationship to the COUNTRY table.

The COUNTRY table is a table of countries and with a "Code" primary key and a "CONTINENT" which has a value for each continent in which that the country is found. The "Code" field is the object of the CITY table foreign key. The COUNTRY table also has "POPULATION" field.

For our purposes, we want to first find the the countries from the COUNTRY table where 'Asia' is the continent:

select code from country where continent='Asia'

This gives us the "Code" of all countries that are in Asia. We have fulfilled our criteria. But this is in the "Country" table, and we need to filter the "City" table to get the sum of the populations.

Now that we know the Country "Code" recordset, we can filter the CITY table by the cities that have the "CountryCode" from our previous query. We will use our previous query as a subquery for this part of the filtering:

select population from city 
where countrycode in 
(select code from country where continent='Asia')

This will now filter our City table and return the populations for only the cities that are in Asia.

The final step is to add the "sum" function:

select sum(population) from city 
where countrycode in 
(select code from country where continent='Asia')

The sum function takes the result of the filtering criteria and returns a number that is the sum of all of the field values, in this all (POPULATION) values that meet the criteria (continent='Asia')

This was the subquery method of solving this problem. We can also create the relation between the two tables by using a JOIN statement. The JOIN statement's main purpose is to combine rows from one or more tables based on a match condition. The combined row set is then available by the select statement for use to display, filter, or group by the columns. There was a little hint in the problem statement:

Note: CITY.CountryCode and COUNTRY.Code are matching key columns.

We used this same information to form the relationship with our subquery but now we're going to use it in a JOIN statement.

select sum(CITY.population) from city 
inner join country 
on CITY.CountryCode=COUNTRY.Code 
where continent='Asia'

Notice we had to specify CITY.population because when you join two or more tables, there may be duplication of field names and if you don't specify, the query engine will not know which "population" field you are referring to (it will give you an error on execution).

We use our select statement to query the sum of the population field from the CITY table when joined to the COUNTRY table. We match the CITY.CountryCode value to the COUNTRY.Code value to create the relationship (JOIN the tables). Then we use the 'continent' field to filter to the 'Asia' continents. Notice we don't have to specify 'COUNTRY.contentent' - that's because there is no "continent" field in the CITY table. Only when there are duplicated field names do you have to specify the "table.fieldname" structure. There may be times when you want to, to prevent confusion, but you don't have to.

In this particular scenario, using a subquery probably doesn't make much difference from from using a JOIN statement, but in a larger scale database or a more complex query where every subquery has to be evaluated, it may make a difference in processing time. Some things to consider when choosing one over the other. Subqueries are nice because they can stand alone and you can test as you go, but you might end up taking more of a processing hit than if you'd used a JOIN.

SQL "BETWEEN" Operator

roadpilot — Mon, 27 Sep 2021 04:17:48 +0000

Take the following query directive:
"Query the sum of Northern Latitudes (LAT_N) from STATION having values greater than 38.7880 and less than 137.2356."

Imagine you have a table that has multiple records of stations with northern latitudes of various values - some above, some below, and some within the criteria range. For testing purposes, all edge cases will be represented. There may even be some values that are exactly at the critera range values. Remember the criteria is "greater than" and "less than".

You have two choices:

1. To write your query to include a combination condition (where statement), such as:

"select sum(lat_n) from station
WHERE lat_n > 38.7880
AND lat_n < 137.2356"

2. Or you could use "BETWEEN"

"select sum(lat_n) from station
WHERE lat_n BETWEEN 38.7880 AND 137.2356"
*** BETWEEN can be a comparison operator for number, text or date values. You can even find the inverse of the range with NOT BETWEEN

Syntactically, #2 is cleaner and a little bit more readable. But are they exactly identical?

BETWEEN is "inclusive" - the result will include the criteria, if it exists. It is essentially "greater than or equal to (>=)" and "less than or equal to (<=)". They are not identical solutions.

You could "manually" alter the range beginning and ending but you would need to know the exact level of specificity of the decimal in the data field. You could just add "1" and make the beginning of the range 39.7880 but that would still leave everything between 38.7881 and 39.7879 values that should be included in the result but won't be. You could add 1 to the last decimal and make the beginning of the range 38.7881 but then you would miss 38.78805, if it were to exist. Unless you know the specificity of the data, this kind of manual alteration really could produce inaccurate results.

I'm thinking, unless you want the results to be inclusive of the range, my rule of thumb will be to use the combination where statement using "greater than (>)" and "less than (<)". If the result needs to return values greater than 38.7880, then that could be anything from 38.7881 or 39 or even 38.7880000000000001. I can easily make this approach "inclusive" if I want to. Just knowing that "BETWEEN" is inclusive will make me be more careful about choosing to use it.

ES6 - What changes did it bring?

roadpilot — Mon, 20 Sep 2021 04:30:38 +0000

In 2015, ECMA International, the organization that prescribes the standards for client-side scripting for web browsers introduced ES6 or ECMAScript 6. The changes that ES6 brought were related to Arrow Functions, defining variables, Object Manipulation, "For" loops and the introduction of a new primitive data type 'symbol'.

Arrow Functions:
Before ES6, a function was declared using the "function" keyword. A function would use the "return" keyword to produce the output of the function.

function timesThree(num){
  return (num * 3)
}

With arrow functions, you are not required to use the "function" keyword and return can be implicit (unstated)

const timesThree = (num) => num * 3

Defining Variables:
Did you see that "const" above there? That's also something new. Two new ways of defining variables was added. "const" is a constant value and can not be changed once declared and "let" is the other way that allows a variable to be defined but can allow changes to the variables value after being declared. Previous to "const" and "let", "var" was the method to define a variable but would allow both mutable and immutable variables to be defined.

Object Manipulation:
ES6 introduced destructuring of arrays. This could be a blog of it's own (maybe it will ...) in the meantime, you can learn more about destructuring (and the spread operator) here from Mozilla: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

"For" loops:
ES6 introduced "for ... of" and "for ... in" loops.

let primes = [2, 3, 5, 7];

for(value of primes) {
  console.log(value);
}
//iterates through the array and assigns the VALUE of each element to the "value" variable

let primes = [2, 3, 5, 7];

for(index in primes) {
  console.log(index);
}
//iterates through the array and assigns the INDEX of each element to the index variable (this is returned as a string, and not an integer)

Symbol Data Type:
A symbol is a unique and immutable data type and may be used as an identifier for object properties. The symbol object is an implicit object wrapper for the symbol primitive data type. This primitive type is useful for so-called "private" and/or "unique" keys. It's value is kept private and only for internal use. No user can overwrite it's value. This prevents name clashing between object properties because no symbol is equal to another. You create a symbol calling the "Symbol()" reserved function.

const userID = Symbol()

All of these changes result in an increase in performance but there is no browser that fully supports the ES6 features. Community support is growing but not as prolific as the pre-ES6 community.

Building a dynamic datalist from a database, Part 1

roadpilot — Mon, 13 Sep 2021 01:04:18 +0000

If you don't know what a datalist is, it is essentially a way to tie a list of options (like you would have in an HTML "select" element) to a single-line text input. With the "select" element, you are restricted to only the options contained in the select options list. With a "datalist", you can free-form type into the field and if a match is found in your datalist then that option will be chosen. This is a great way to allow new entries to be created in an existing database field without creating duplicates. With the traditional select element, you would not be able to create new entries. Here is how Mozilla demonstrates the structure for a datalist:

<label for="ice-cream-choice">Choose a flavor:</label>
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

<datalist id="ice-cream-flavors">
    <option value="Chocolate">
    <option value="Coconut">
    <option value="Mint">
    <option value="Strawberry">
    <option value="Vanilla">
</datalist>

Your input field has a "list" parameter which matches to the "datalist" id parameter. As long as those two match, you have a functioning datalist.

But what if you had a LARGE list of options from a database, like the list of every possible city in every state. You wouldn't want to necessarily build that datalist from database every time you load the page. You would want it to be something dynamic. Something that would limit the number of results and make your data use lean. You could create an experience where every time your user types a key, a new limited list of choices would be provided based on the input provided, reducing the round trip data from your database. You would progressively reduce the number of options with every keystroke. You could add an event listener to your input field, probably something like "oninput" or "onkeyup" - I've used both and haven't found really a difference when to choose one over the other. You can add the event listener with a script block or you can just make it inline in the element definition itself.

before:
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" />

after:
<input list="ice-cream-flavors" id="ice-cream-choice" name="ice-cream-choice" oninput="myFunction(this)"/>

Now we've added the "oninput" event listener, and we've pointed it to a "myFunction" function, and we are passing the "this" value to the function as an argument. The myFunction function will be updating the datalist and the function will have to know what element to update - "this" will tell the function, by way of the "oninput" event, which datalist to update. Now we need to build the myFunction function:

function myFunction(el){
   console.log(el)
}

For now, we're just going to get the oninput event listener to fire and give us a console output to show us what happens when we create input into the text input field. In Part 2, we will flesh out the "myFunction" function to do some cool background connecting to a database to pull the rest of the ice cream flavors. That coconut flavor looks pretty enticing. I'm going to have to find me some of that!

Autoresizing Textarea element

roadpilot — Mon, 06 Sep 2021 02:45:17 +0000

Have you ever been filling out a web form that used single-line text input fields for input that far exceeds the length of the field? You have to scroll from end to end to verify what's actually been typed. A textarea field would be far more suitable but even that is clunky with it's fixed size - still requiring scrolling. I've found a few solutions around the web to make a textarea resize itself based on the contents and I've distilled them all down to the following very easy steps:

Add the CSS that makes the "autoresize" class (you can name it anything you want):

<style>
.autoresize{
    resize: none;
    overflow-y: hidden;
    overflow-x: hidden;
}
</style>

resize:none: hides the resizing handle from the textarea
overflow-y: hidden: prevents the textarea from showing scrollbars when the content overflows or reaches the horizontal boundary of the input
overflow-x: hidden: fixes a little feature in Firefox that adds an additional line at the end of the textarea content when there is only one line.

Add the function to make the element size change relative to its content

<script>
function autoResize(elem) {
    elem.style.height = 'auto';
    elem.style.height = (elem.scrollHeight-4) + 'px';
}
</script>

elem.style.height = 'auto': this resets the size of the textarea element (passed in as 'elem') just before setting it to the size content based size, without this the textarea will increase the size automatically, but it will not decrease the size once it has been increased.
elem.style.height = (elem.scrollHeight-4) + 'px': this sets the textarea to the size of the 'scrollHeight' of the element - this is the size the textarea would be based on the size of the content and also adds the padding for the element (4px). The 4px is subtracted back out or the end result would be cumulative and would increase by 4 additional pixes with every resize.

Create the textarea element and add the CSS class created above:

<textarea class="autoresize" oninput="autoResize(this)" rows="1"></textarea>

Add the "oninput" event listener and point it to the "autoResize" function passing in "this" for the function argument (in this case "this" refers to the textarea element itself). This fires the function for resizing on every keystroke of text input into the textarea element. When the scrollHeight of the element changes because the line would wrap, the autoResize function increases the height of the textarea element. The same happens in reverse when removing characters, making the textarea element resize down when a line break is no longer part of the current line.

If you add an event listener that captures the "Enter" key and map that to submit the form your textarea is contained by, the autoresize textarea can function just like a text input form element, without scrolling off the edge of the input field.

That's it. I've tried to make it as streamlined as possible. Let me know if you know of other alternative solutions. This one works for me but there may be other ways.

Optimizing JavaScript

roadpilot — Sun, 29 Aug 2021 16:29:59 +0000

One of my daily code challenges this week was to return the number of occurrences of the max value of an array. At first I just tried the "brute force" iteration approach with a dictionary to keep track of the count:

    const ar = [3,2,1,3] // there are 2 3's so 2 should be my result
    const dict = {}
    for (let i=0; i<ar.length; i++){
        if (dict[ar[i]]){
            dict[ar[i]]++
        } else {
            dict[ar[i]]=1
        }
    }
    // console.log(Object.keys(dict).length)
    return (Object.values(dict).sort()[Object.keys(dict).length-1])

... which did work but I always like to shoot for a "one-line" solution.
So, I took my iteration and started thinking through the built in prototype.Array functions in JavaScript. I decided to use "filter()" because it will return a sub-set of the original array. Then I can use "length" to get the count of the elements that match the filter. Seems easy enough:

ar.filter(el => el == 3).length // returns 2

My "3" comparison value is just psuedocode for now, only because I already know the max value. Now I have to find the max value so I can make this a dynamic function. I can use "Math.max()" to determine the max value of the array:

Math.max(...ar) // returns 3
// using the spread operator "..." is shorthand for using "apply".  The "apply" method could also be used:
Math.max.apply(null, ar)

So now I can just replace my psuedocode value with the function to find the max of the array:

ar.filter(el => el == Math.max(...ar)).length // returns 2

...which does work but since this is a code challenge, the solution times out and fails the test cases (if you do code challenges, you know what this means).
I examined what was happening and noticed that even if a function is nested within another function - on one line or otherwise - it still is a nested function. For every element of the ar filter step, it was checking to find the max value of the array. I'm pretty sure this would be O(n^2). But if I create a variable (maxVal) and assign the max value (Math.max(...ar)) OUTSIDE of the filter function, then the timeout errors go away and all test cases pass:

    const maxVal = Math.max(...ar)
    return (ar.filter(el => el == maxVal).length)

So, not exactly a one line solution but much leaner and cleaner than the "brute force" method where I started. And a valuable lesson, for sure!

dcOffice - Added functionality: Providing scheduling details from Notes screen

roadpilot — Mon, 23 Aug 2021 01:29:53 +0000

This week, I decided to add some functionality to the web application that I use to run my office. The ability already existed to pass a date or frequency for the next visit to the scheduling staff but the option to include what type of appointment was lacking. The system would just gather the default appointment type for the particular client and apply it. But there were times when it was necessary to schedule for a different type of appointment or to change the type of appointment if a next appointment already existed. I thought this would be pretty simple because the root functionality already existed. I was wrong.

First, the variable that was being passed was a simple string and because I wanted to piggy-back on that I decided that I would just take that string and convert it into a comma-separated string that could be split, when needed, into the individual components of the scheduling detail - the date or frequency and the type.

A little background on the path that this variable takes would add a little more context here:
At the notes screen, there existed the way to indicate when the next appointment should happen. From here, it would pass through:

the notes form handler, to
the checkout verification handler, to
the posting screen (where charges are entered), to
the scheduling screen where the scheduling was performed.

The first, most quickest way to see if the changes I wanted to make would break the system was to just add the new variable and send it through the path and see what would happen.
At the first stop the "notes form handler", there had to be significant modification because the form handler didn't really know what to do with the new field because it's job is to combine specific form elements into fields. Since this variable had no previous assignment, it followed the default logic to be combined into the notes, which was not where I needed it to land. Logic had to be written to take the new variable (appt type) and combine it with the existing variable (appt date) and separate them with comma's (as 'appt_date, appt_type'), now to be referred to as "CSV" and pass them along as a single field. This portion of the alteration is complete. The form handler performs as it needs to.

The next step, the "checkout verification handler" which reviews a TON of information ... not necessary to the discussion here ... before being sent to the scheduling staff, didn't really need any alteration because it already was passing a single field to the next step - the "posting screen".

This is where charges are entered for the date's services as well as other financial configurations, client data management - really the nerve center of the checkout and scheduling process. Breaking it is catastrophic and will result in a barrage of phone calls about what the staff is not able to do. Extensive testing is required for even the smallest change. The posting screen already displays the information differently based on the existence of other future appointments or the absence. Now it had to also display an additional difference if an existing appointment type was different than the provider just directed and sent from the notes. The updated display needed to be able show the type, if the type needed to change and the CSV was split into it's individual values, the date and type. I decided that a "red" accent to the information would be enough to call attention that something needed to change.

From the posting screen, the scheduling staff chooses a "button" and the "scheduling screen" appears, prepopulated with the information provided, as it passed from notes, to handler, to checkout, to posting and now to scheduling (we'll call this the "pipeline"). The existing functionality would automatically choose the appointment type from the client default (which is set by polling the previous appointment type or if a specific type was manually set - but I'm not going into that logic here) and show the available times for the date that was passed - through the pipeline. But now the appointment type was being passed in externally. This meant that the CSV had to be split into its components and the display had to be updated to show the "pipelined" appointment type. If it was the same as the default, then the change is unnoticeable. If it does not match, the display would update as needed and the available times would be populated based on the date and appt type. If there was an existing appointment, then the information from that appointment was loaded (date and current time) so that when the appointment change was made - if necessary (different appointment types have different appointment durations and arrival times) then the appointment could be rescheduled at that point and the existing appointment information would no longer exist. This is critical because if an existing appointment is accidentally duplicated, there WILL be confusion about which one is the accurate one, if any, and which one has the information that the client been given. All of this confusion requires unnecessary (and embarrassing) communication with the client in order to clarify. The idea of the system is to enhance efficiency, not hinder it.

Ultimately, it was successful and a welcome function addition. Now what would have required flow interruption and manual instruction can now be automated and, since part of the existing functionality was already there (and the process was completely there) this was added seamlessly. Of course I watched by remote control for the day to monitor and correct any bugs that occurred. There were only a few and mainly involved the visual display. No underlying function interference occurred. It was a good day. :)

Python + Flask Pt 2 ... adding React

roadpilot — Mon, 16 Aug 2021 02:02:43 +0000

The last post was about creating a Python + Flask application and deploying on Heroku. This post we are going to take that same Python + Flask application and add a React frontend to it. First some unfinished touches on the Python + Flask backend. To make it run locally, we'll need to make some changes:

In our app.py, we are going to add CORS functionality and we are going to change our output from a simple string to a JSON object.

from flask import Flask
from flask_cors import CORS #comment this on deployment

app = Flask(__name__)
CORS(app) #comment this on deployment

@app.route("/")
def hello_world():
    return {
      'resultStatus': 'SUCCESS',
      'message': "Hello, World!"
      }

We can now test the Flask server:

// ♥  flask run
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: off
 * Running on http://127.0.0.1:5000/ (Press CTRL+C to quit)

You may run into a lot of errors at this point. You may need to adjust your Python installation or other modules. When you get things finalized, what you see above will confirm that your Flask service is running.

When we view the output from the browser, we will see The JSON object output. This is how we are going to display output from our backend through the React frontend. It will look like this in the browser:

{
  "message": "Hello, World!",
  "resultStatus": "SUCCESS"
}

Now it's time to create the React front end. You can create a separate repository or just a new subdirectory in the existing one. That's all up to personal preference. Once you decide what your "root" folder will be, you will use the "create react app" command from that directory:

npx create-react-app .

This will create a new React app in that root directory. This could take some time and troubleshooting. See the end message below.

Once the installation is successful, find 'app.js' in the 'src' subdirectory and make the following changes:
(some of this is referenced from the https://towardsdatascience.com/build-deploy-a-react-flask-app-47a89a5d17d9 tutorial)

import logo from './logo.svg';
import './App.css';
import React, { useEffect, useState } from 'react';
import axios from 'axios'

function App() {
  const [getMessage, setGetMessage] = useState({})
  useEffect(()=>{
    axios.get('http://localhost:5000').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

export default App;

The "stock" app.js file will already have some of this. What we are going to add is:

import React, { useEffect, useState } from 'react';
import axios from 'axios'

"useEffect and useState" are called "React Hooks" and you can Google to read about them. They essentially add functionality that allow you to use "state" and other React features without writing a class. "axios" is a component for React that allows "in render" async requests. It can request information from and send information to other electronic sources and turn their output into React usable objects. In this case we will get our "Hello, World" output from our backend server.

  const [getMessage, setGetMessage] = useState({})
  useEffect(()=>{
    axios.get('http://localhost:5000').then(response => {
      console.log("SUCCESS", response)
      setGetMessage(response)
    }).catch(error => {
      console.log(error)
    })

  }, [])

"useState" is going to create for us a pair of "setter / getter" functions. "getMessage" will call to and collect the response from the axios request (axios.get) and "setGetMessage" will return the response.

  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>React + Flask Tutorial</p>
        <div>{getMessage.status === 200 ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>}</div>
      </header>
    </div>
  );
}

Next you will start the React server (yes, even though React is a "frontend framework" it runs in a separate server.)

npm start

The React app "return" renders the output based on the response from the backend server. There is a conditional (ternary) view:

        <div>{
          getMessage.status === 200 
          ? 
          <h3>{getMessage.data.message}</h3>
          :
          <h3>LOADING</h3>
          }
       </div>

where until the response returns a status code of 200, the React component will only show the word "LOADING".

Once the response returns the 200 status code, then the React component will re-render the "getMessage.data.message" that is returned from the "getMessage" function. Since the response object has a "key" of "message":

{
  "message": "Hello, World!",
  "resultStatus": "SUCCESS"
}

the "value" of "message" is what is displayed, in this case "Hello, World!".

"npm" is a Node package manager and installs are rarely without bumps so be ready to troubleshoot any "missing component" errors or other deprecation warnings. Google is your friend and Node is very complicated. You will end up with a "node_modules" folder that has anywhere from 20,000 to 30,000 resources that Node uses to make React work. When you get installation errors, sometimes just repeating the command you just sent - that gave you those errors - is all you need to do. Other times, it's more complicated. Read the errors closely and try to find competent resources for steps to take for corrections. Good luck!

Python + Flask (from Windows WSL) on Heroku.

roadpilot — Mon, 09 Aug 2021 04:52:56 +0000

This week I was working on a "hackathon" project that involved an application written in Python and served through Flask. I decided for testing that I would host it on Heroku. Here's what I had to do in order to get it up and runnning.

Following the steps in https://devcenter.heroku.com/articles/getting-started-with-python, revealed to me that there were no specific steps for using Flask. So going through the steps, I'll talk about where you diverge - specifically as it pertains to making this happen on Windows (WSL). ***These steps will not make the app able to run locally, this will only configure the Heroku deployment to run on Heroku.

Installing the Heroku CLI: In Windows WSL, if you are using Ubuntu for your Linux OS, you would follow the Ubuntu instructions:

curl https://cli-assets.heroku.com/install.sh | sh

Once installed, you can use the heroku command from your command shell (you might need to close and reopen your terminal)

heroku login
heroku: Press any key to open up the browser to login or q to exit
 ›   Warning: If browser does not open, visit
 ›   https://cli-auth.heroku.com/auth/browser/***
heroku: Waiting for login...
Logging in... done
Logged in as me@example.com

(all of these commands were taken from the original Heroku devcenter article)
You have now installed the Heroku CLI

Clone the Heroku sample Python app (it is a Django app, but we'll change that later)

git clone https://github.com/heroku/python-getting-started.git
cd python-getting-started

Deploy the sample app

heroku create
Creating app... done, ⬢ serene-caverns-82714

git push heroku main
...lots of stuff here, ultimately...
remote: Verifying deploy... done.

Make one instance of the app to run

heroku ps:scale web=1

And view it in your web browser

heroku open

(If that doesn't work, just copy the URL that is generated during the 'git push heroku main' step)

You have deployed the sample (Django) app. Now let's make some changes to make a Flask app.

When you cloned the original git sample repo, four of the files cloned are where we are going to make our changes:
procfile

    web: gunicorn app:app

requirements.txt

    gunicorn
    flask

runtime.txt

    python-3.9.6

app.py

from flask import Flask

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

Now one more round of

git push heroku main

and Heroku will take it from there. Heroku reads the 'requirements.txt' file and knows to change the existing (remote) installation from Django to Flask. You can now write whatever Python you want and it will serve through Heroku as a Flask app.

Leetcode: Squares of a sorted array

roadpilot — Mon, 02 Aug 2021 03:39:19 +0000

The Leetcode problem: "Given an integer array 'nums' sorted in non-decreasing order, return an array of the squares of each number sorted in non-decreasing order."

First of all, why "non-decreasing"? Would it not be just as accurate - and less confusing - to just call it "ascending"? Is there something about "ascending" that I don't know?

So, my thinking - not anywhere near what Big-O would dictate - would be to do the obvious ... "return an array of squares of each number (element) sorted ... ascending" (there, I said it!)

So let's do that:

var sortedSquares = function(nums) {
    return nums.map(x => x*x).sort((a,b) => a-b)
};

Here, I am mapping each element of the 'nums' array and returning an array of it's squares. Then I am sorting the output array numerically. Note: if you don't sort numerically, using the ((a,b) => a-b) sort parameters, you will sort "ascending, built upon converting the elements into strings, then comparing their sequences of UTF-16 code units values". Ah... there it is. The difference between "ascending" and "non-decreasing".

I thought this one-line solution was pretty slick and daisy-chaining prototype functions in the higher level of caliber. And ... it did give the proper result. But Leetcode is a little more picky than that. And it's great to aspire to the Leetcode level of achievement. It will get your further than making excuses like "who cares if the space and time complexities are above linear?" So, when Leetcode gives you feedback like ...

Squaring each element and sorting the new array is very trivial,
could you find an O(n) solution using a different approach?

...you feel about 10 feet less tall. But there are clues in their subversive backhanded compliment. "Can you find an O(n) solution". They want you to travel through the array no more than once. So let's see what we can come up with.

First, let's set up a loop to go through the array. But let's not loop through the whole ... wait a minute ...

I checked and re-submitted it later and got this result:

Runtime: 104 ms, faster than 96.77% of JavaScript online
submissions for Squares of a Sorted Array.
Memory Usage: 45.4 MB, less than 79.37% of JavaScript online
submissions for Squares of a Sorted Array.

So I guess my solution was good enough after all.

The lessons this week are
(1) to check your Leetcode submissions at all different times of the day. Check back later and you may get a better score than you did at first.
(2) there really is a difference between "ascending" and "non-decreasing" ... although "ascending" really could be corrected with just adding "numerically" ... which would still read easier. :)

Something you may not know about the Javascript "Switch" statement...

roadpilot — Mon, 26 Jul 2021 04:25:24 +0000

The switch statement is used to perform different actions based on different conditions. You use the switch statement to select one of many code blocks to be executed. The following "if then" statement, where x could be any value but will only give a result with 0 or 1:

if (x===0) {
    text = "Zero";
} else if (x===1) {
    text = "One";
} else {
    text = "No value found";
}

...can be re-written as this "switch" statement:

switch (x) {
  case 0:
    text = "Zero";
    break;
  case 1:
    text = "One";
    break;
  default:
    text = "No value found";
}

TIP: You always need to include the "break" command if you want the switch to stop when it finds a match.

One thing to keep in mind, Switch cases use strict comparison (===). The values must be of the same type to match. A strict comparison can only be true if the operands are of the same type.
In the above examples, "0" would not return a match but 0 would.

But what if you wanted to switch on something like this:

if (time < 10) {
  greeting = "Good morning";
} else if (time < 20) {
  greeting = "Good day";
} else {
  greeting = "Good evening";
}

You might think you could do it like this:

switch(time){
    case (<10):
        greeting = "Good morning";
        break;
    case (<20):
        greeting = "Good day";
        break;
    default:
        greeting = "Good evening";
}

But switch comparisons do not work that way. Switch follows these rules:

The switch expression is evaluated once.
The value of the expression is compared with the values of each case. (Since the values can not be compared, they can not match)
If there is a match, the associated block of code is executed.
If there is no match, the default code block is executed.

But here's one thing you can do. Since the value of the expression is compared to the values of each case, if you set the value of the expression to 'true', then you can make any case value an expression that would evaluate to true (or false) to test for a match. For example, we already know the above switch expression will not work. But if it were rewritten as follows:

switch(true){
    case (time < 10):
        greeting = "Good morning";
        break;
    case (time < 20):
        greeting = "Good day";
        break;
    default:
        greeting = "Good evening";
}

...then you could use "switch" as alternative to the "if then" JavaScript statement.

The more you know!