How replace a numeral in the string 'abc1def' w/ an array element?

[pbuk]

Again,

This is exactly why dynamic JavaScript frameworks were developed. First Backbone and Knockout at the beginning of the last decade, then taken over by Google's Angular, Facebook's React and the independent Vue at the end.

Specifically I am referring to the concept of a ViewModel.

If you want to build it from vanilla HTML/JS then you will want something like this (I don't think you will need the id's any more):

<input type="text" data-cas="nomS"><input type="text" data-cas="nomP"><br><br>
<input type="text" data-cas="accS"><input type="text" data-cas="accP"><br><br>
<input type="text" data-cas="genS"><input type="text" data-cas="genP"><br><br>
<input type="text" data-cas="datS"><input type="text" data-cas="datP"><br><br>
<input type="text" data-cas="ablS"><input type="text" data-cas="ablP"><br><br>

[/CODE]

And then you can populate the HTML with something like:

const noun = nouns[selectedNoun];
document.querySelectorAll('[data-cas]').forEach((el) => {
  const cas = el.dataset.cas;
  // Can't remember if you can do it this way:
  el.dataset.macron = noun[cas].macron;
  el.dataset.plain = noun[cas].plain;
});

This is based on the data for the declensions something like this:

const nouns = {
  vis: {
    nomS: { macron: 'vīs', plain: 'vis' },
    accS: { macron: 'vīs', plain: 'vis' },
    genS: { macron: 'vī', plain: 'vi' },
    datS: { macron: 'vīm', plain: 'vim' },
    ablS: { macron: 'vī', plain: 'vi' },
    nomP: { macron: 'vīrēs', plain: 'vires' },
    accP: { macron: 'vīrium', plain: 'virium' },
    genP: { macron: 'vīribus', plain: 'viribus' },
    datP: { macron: 'vīrēs', plain: 'vires' },
    ablP: { macron: 'vīribus', plain: 'viribus' },
    audioPrefix: './audio/vis-audio-',
  },
  terra: {
    // ...
  },
};

 

[deltapapazulu]

@pbuk

Ok I will start only doing Vue and git/github related for next 10 days. I wanted to try to get a site up and running with about 100 nouns within next few days but that is probably unreasonable & not best use of my 'trying to get a job' time.

here is a screen of latest. I have stopped leaving links to that crappy webhost plus it doesn't display correctly on some devices. Obviously need to learn some things related to that.

functionality is pretty self-explanatory from this screen. Anyway I will move to learning only Vue/Git/Github for next 10 days. I really do need to become 'job-able' at this at least by end of January.

I have this so when user clicks "Toggle Visibility" it does so also to audio button texts as well. At top right I created a toggle alphabetical order Z -- A and A -- Z as well as a Shuffle randomly button.
If user enters a Latin word without macrons (that happens to have macrons, not all do) then field lights up blue.

 

[pbuk]

it doesn't display correctly on some devices. Obviously need to learn some things related to that.

Yes, for now you should use a CSS framework of which Bootstrap is the most widely used.

Anyway I will move to learning only Vue/Git/Github for next 10 days. I really do need to become 'job-able' at this at least by end of January.

Yes, there is a lot to get to grips with here but it's all relevant stuff.

 

[deltapapazulu]

so this worked!

Wrote a python html table scraper. All you have to do is change the Latin word in the url to another Latin word (has to be nominative singular) and run script and it prints out 2 separate tables for that noun, one with macrons and the other without. Also converts the list object to a string object. Will be very useful to me in the future.

from bs4 import BeautifulSoup
import requests
import pandas as pd
import unidecode

wiki_url = 'https://en.wiktionary.org/wiki/flos#Latin'
table_class = 'prettytable'
response = requests.get(wiki_url)
soup = BeautifulSoup(response.text, 'html.parser')

latinnoun_table = soup.find('table', attrs={'class': table_class})
df = pd.read_html(str(latinnoun_table))

print("-----------WITH MACRONS---------------\n")

print(df)

df_listToString = ' '.join([str(element) for element in df])

df_noMacrons=unidecode.unidecode(df_listToString)

print("\n-----------WITHOUT MACRONS------------\n")

print(df_noMacrons)

Output:

-----------WITH MACRONS---------------

[         Case Singular    Plural
0  Nominative     flōs    flōrēs
1    Genitive   flōris    flōrum
2      Dative    flōrī  flōribus
3  Accusative   flōrem    flōrēs
4    Ablative    flōre  flōribus
5    Vocative     flōs    flōrēs]

-----------WITHOUT MACRONS------------

         Case Singular    Plural
0  Nominative     flos    flores
1    Genitive   floris    florum
2      Dative    flori  floribus
3  Accusative   florem    flores
4    Ablative    flore  floribus
5    Vocative     flos    flores

 

[deltapapazulu]

@pbuk

welp got it set up and secured thru AWS with a Custom Domain and HTTPS | S3, Route 53, CloudFront, Certificate Manager, etc. Definitely somewhat of a learning curve. Fortunately there are some good instruction videos available for it.

https://thenightwatch.ml/

Managed to get all the noun arrays created pretty quickly once I wrote a Google Sheets script to go with some crazy spreadsheet concatenation triggered by this querying formula

=importxml(X5, "//table[@class='prettytable inflection-table inflection-table-la']//td")

I have the javascript setting all the values whenever user clicks on new noun. still have a lot of the audio to create for it. I slapped a brief English definition onto end of the noun arrays which is set with the others when user selects new noun. The English appears on mouse hover above inputs table.

Next thing I want to do to it is add a "next noun" and "previous noun" arrows right and left of the title "Answer Key."

Here is vid showing creation of the noun arrays in literally 2 seconds per:

 

[pbuk]

welp got it set up and secured thru AWS with a Custom Domain and HTTPS | S3, Route 53, CloudFront, Certificate Manager, etc. Definitely somewhat of a learning curve. Fortunately there are some good instruction videos available for it.

Well done, AWS is probably the least user-friendly of the cloud providers so that is a useful learning curve in itself! As always I have a few observations:

Your HTML is not valid:

1. Your closing </head> tag must come after the <title> and <link> tags.
2. Your closing </body> tag must come after all other tags (except </html>.
3. You have a closing </br> tag: br is self closing.
4. You also have a

Using <br>s for layout is hideous, use CSS margins or padding instead.

You have clearly hand-crafted your CSS which has some advantages and some disadvantages. One big disadvantage is that it is harder to make sure your CSS works well on all browsers. For instance in this code (in which I have normalised the white space for easier reading):

.delete-fields-btn {
  margin-left: 55px;
  margin-right: 30px;
  color:blue;
  width: 45px;
  height: 35px;
  font-size: 23px;
  -webkit-border-radius: 5px;
  box-shadow: 0 1px 2px #5e5d5b;
}

you have used -webkit-border-radius which only works in webkit-based browsers. In 2021 border-radius works almost everywhere so this is what you should be using. If you do want to support older browsers then you should use tooling to achieve this such as autoprefixer because you will never manage to do this consistently by hand.

You have invalid CSS in line 174 color:#6f0007;". I am not sure what you are using to edit CSS but my VS Code editor highlights this, as well as the hanging webkit target mentioned above.

You should leverage the cascading feature of CSS to avoid repeating yourself. For instance style all buttons with a .btn class and only add variations with .btn.delete-fields-btn. Also instead of this:

      <ul id="id01" style="list-style: none;">
        <li class="liN" style="cursor: pointer;" onclick="changeNoun(aciesargs)">aciēs</li>

use this:

      <ul id="id01">
        <li onclick="changeNoun(aciesargs)">aciēs</li>

ul#id01 {
  list-style: none;
}
ul#id01 > li {
  cursor: pointer; /* (this might work better on the parent ul anyway */
  /* .. the rest of the .liN styles */
}

Oh and I have mentioned before inconsistent case checking in HTML and CSS: use .li-n not .liN.

Create your data as a single object with the names as keys rather then individual global variables: we generally keep pollution of the global namespace to a minimum to avoid clashes.

 

[deltapapazulu]

will def begin to work on your pointers. This site is my resume in progress and I need to get it right at least within the limits of what it is currently trying to be.

One thing I also want to learn is 'looping' in spreadsheet scripting. That way when I click the 'Create Noun Array' button it loops through any number of nouns without my having to click them one by one. Then I would just go back and manually fix the botched ones. That will come in very handy when I expand the site with a comparable adjectives table.

The content will all be based on Dickinson College's Core Vocabulary. I just need to find some bored compadre with descent Latin pronunciation to help me create the audio files.

somebody fricking hire me already! I learned to code like the meme said. Where's my money!

Thanks for the critique, will apply!

 

[deltapapazulu]

@pbuk

Oh meant to mention, as a temp workaround for making word list appear also from 'z' to 'a' I just added another div with all the elements in reverse order. Reason is b/c the w3 schools sorting algorithm I originally used was taking literally 9 seconds to reverse the order of 341 words. And then if I doubled the number of words the w3 schools algorithm would take 18 seconds. Weird. I mean I could probably sit here and in a few hours come up with sorting algorithm in vanilla JS that cut that speed in half. Now maybe it was something to do with it having to sort through words with macrons over them. Not sure. Anyway my clunky duplicating the whole 'ul' 'li' list in reverse order is only a temp thing.

I'm looking for a way to have only one list and a way to make appear in reverse order in no more than one second.

 

[deltapapazulu]

@pbuk

umm...so AWS (and whoever else involved with hosting my site) apparently does not update uploaded changes immediately. Hours now been waiting, still hasn't. Made major changes. Cleaned up/changed things in CSS plus created 'next noun' and 'previous noun' buttons (right and left large triangle arrows) in the Answer Key heading area. In order to do that I had to add 2 new functions and change the arrays so that the arrays are all nested in an array. I needed the arrays to be indexable in order for next and previous noun buttons to work. Set up arrays like this:

let nouns [ [ ], [ ], [ ] . . . ]
etc.

Anyway that's almost a deal-breaker if I was paying them. Very disappointing to find that host doesn't update immediately to reflect new uploads. And this is not a mere browser refresh / clear cache issue. I did all that, cleared all cache on multiple browsers and site is still not showing changes.

So right now (as of now) if you visited site it is still showing a very broken version of it, e.g., ōrātiō, ōrdō, os, ōs, and some others in list don't work (fixed with new uploads). Plus they are still showing the old crazy CSS.

It will show the next noun prev noun buttons because I had uploaded a broken version of it early this morning. So it did reflect that change just nothing that I have uploaded since then.

 

[deltapapazulu]

@pbuk

made major improvements to page html/css

simpler cleaner and more immediately discernible by someone just glancing at the code (the html/css i mean). Got rid of all the br tags and other stuff.

Also added right and left arrows to cycle through words alternately to the noun list on far right.
Coding for that was a real education. Very vanilla JS but helped me grow into a really interesting and challenging use of function parameters.

https://latinguard.tk/

Also got my problems with page cache not refreshing figured out. All I had to do was go to Cloudfront (via AWS dashboard) and invalidate cache. That immediately updates site to new content. I think basic users are allowed 1000 free invalidations per month.

Also watching vids right now on how to convert it to React

 

[pbuk]

Good to see continuous improvement! A few more suggestions:

1. No need for hard coded '341' now, you can use nouns.length.
2. Get rid of the last couple of places you are using jQuery.
3. There's a few errors in your CSS:
   

   Error in parsing value for 'border'.  Declaration dropped. styles.css:21:11
   Unknown property 'scrollbar-base-color'.  Declaration dropped. styles.css:225:25
   Expected declaration but found '"'.  Skipped to next declaration. styles.css:237:14
   Expected declaration but found '"'.  Skipped to next declaration. styles.css:249:19
   Expected declaration but found '"\9 \9 '.  Skipped to next declaration. styles.css:261:19

4. There's a few errors and bad practice in your JS, worst two are:
   

       function toggleNounlistAsc(){
           // "=" should be "==" or better still "===" in the next line.
           if (document.getElementById("noun-list-ascending").style.display = "block"){
               // ...
           }
       }
       // ...
       function toggleNounlistDesc(){
           // "=" should be "==" or better still "===" in the next line.
           if (document.getElementById("noun-list-descending").style.display = "block"){
               // ...
           }   
       }

5. And there's even a few errors in your HTML: worst is that you have script after the closing </body> tag, also &nbsp should be  .

Adding the right plugins for VS Code (I assume you are using it?) for HTML, CSS and JS would avoid most of these.

Further ideas for improvement:

1. Add a switch to change the order of declension to the English standard (nominative, accusative, genitive, dative, ablative): this would probably be quite tough but is the kind of thing that is much easier in a reactive, template-driven framework.
2. Fix the layout on devices with smaller screens.
3. Lazy-load the audio files and maybe the nouns list for a smaller page size and better loading on mobile networks (ditching jQuery will help too).

 

[deltapapazulu]

@pbuk

ok back in the saddle. Here is latest v. of app. Hosted at AWS and called

Tolkien's Wolf

The wolf stands for Welsh, Old English, Latin and Finnish. So have the concept in place. But I have to turn away from it for a while and actually learn to code and use a framework by professional 2022 standards. I actually have not implemented your most recent redlines but do intend to go over them carefully at some point. I have a lot of latest practices to learn in next 3 weeks. I have been learning Vue for the last 3 days and gradually kind of getting my mind around it.

Incidentally, one bit of Tolkien trivia often glossed over or not mentioned at all in many Tolkien bios/write-ups is that Tolkien had a deep love for and knowledge of the Latin language. In fact, at one point in the 1950s he wrote to W.H. Auden that Latin had taken the top spot among his favorite languages. You won't find many Tolkien buffs who are actually aware of that.

Letter 163 To W. H. Auden, 7 June 1955:
"That is of course long past now. Linguistic taste changes like everything else, as time goes on; or oscillates between poles. Latin and the British type of Celtic have it now, with the beautifully co- ordinated and patterned (if simply patterned) Anglo-Saxon near at hand and further off the Old Norse with the neighbouring but alien Finnish. Roman-British might not one say? With a strong but more recent infusion from Scandinavia and the Baltic. Well, I daresay such linguistic tastes, with due allowance for school-overlay, are as good or better a test of ancestry as blood-groups."

 

[deltapapazulu]

Hello @pbuk

been while. Quick question for you. (Oh first, thanks for all the help on the JS stuff a year ago!)

I picked up a job in January 2022 (not in coding) that turned my attention away from learning JS. Right now looking to get back into it, i.e., but learning frameworks. My question is: I remember you saying you had a personal pref for Vue. But now, 16 months later, what is your assessment of the framework scene for someone deciding to learn it for the first time. Is everything pretty much how it was 2 years ago? Basically, React being kind of the must for serious job seekers? Also do you still like Vue?

 

[pbuk]

Is everything pretty much how it was 2 years ago? Basically, React being kind of the must for serious job seekers? Also do you still like Vue?

Pretty much. Yes there's still more jobs for React, but then there are still lots of jobs for Angular and you don't want to learn that in 2023! Yes Vue is still my first choice; Svelte is also worth a look although I'm not convinced.