On Programming

I think I have to employ Bootstrap for the UI. I'm spinning my wheels trying to pick compatible colors--that's just a waste of time. I came across Bootswatch, which has a bunch of Bootstrap templates. I like this one:  https://bootswatch.com/cerulean/ This should be easy:  https://bootstrap-vue.js.org/ First:  npm install vue bootstrap-vue bootstrap Then: // app.js import Vue from 'vue' import BootstrapVue from 'bootstrap-vue' Vue.use(BootstrapVue) This is what Vue plugins look like (fontawesome does the same thing): // This imports all the layout components such as <b-container>, <b-row>, <b-col>: import { LayoutPlugin } from 'bootstrap-vue' Vue.use(LayoutPlugin)

In trying to debug the latest problem with vue-router (can't add a new page /person), I want to back up and understand vue fundamentals better. vue executable Vue (3.9.2) is installed on my Windows system, so that I can say vue create <app-name> in any directory. vue info shows that I have npm (6.4.1) in C:\Program Files\nodejs\npm.CMD , but that @vue/cli is not installed. c:\Users\alast\AppData\Roaming\npm\vue.cmd - is basically node vue.js . vue create makes a scaffold: <project>/     public/         index.html         favicon.html     src/ <-- '@' in an import refers to here         assets/         components/         views/         App.vue         main.js <-- entry point         router.js vue ui runs the browser-based control app (at localhost:8000). Modules V...

Tables still have a place--for tabular data. Duh. Such as the Companies table in FDB. But I had to remember the CSS around tables. First, the basic structure: table   thead     tr       th   tbody     tr       td Table border-collapse: { separate (default) | collapse } border-spacing: { #both | #horiz #vert } - default is 1px empty-cells: { show (default) | hide } table-layout: { auto (default) | fixed } - fixed is like !important for widths For a responsive table, put it inside a container (e.g., div) with overflow-x: auto; Width, height, border can be applied to table, th and td--not tr, thead or tbody. Cells th and td tags. CSS doesn't seem to like naked th and td. Prefer table td or table th selectors. text-align: { left | center | top } vertical-align: { top | bottom | middle } padding (margin doesn't do anything; use border-spacing) border-bottom: - for just horizontal lines between rows Rows For a ...

In the last installment, we thought we could clone a folder tree and get a working project, but...no. Vue likes to be in charge. The vue create fdb command line works perfectly, thankyouverymuch. So, we turn to our UI design and find that it breaks down into Views and Components quite easily. Like the Todo app from the tutorial, our layout has a common Header consisting of 3 nav buttons and a Search Component. Views ListView - headlines a list of films, people, or companies with a filter box. See them all at first (we have 3000+ people), then type until you see the one you want. Also includes an Add button. RecordView - the headline for a film or person form. The form looks like a display until you click, when the edit box appears. If you clicked the Add button, this will be an empty form. Otherwise, it will show a single record. There are 3 tabs, but the second and third tabs show relationships and are not editable. ResultsView - Displays the results of a Search, grouped ...

I had the example from a YouTube Tutorial on Vue working, but I'm having a little trouble creating an empty project for my own development. Part of the issue is that Vue is compiled. What you're running is minified (or not) JavaScript that includes a ton of stuff along with your app. So you can write a little, compile it, look at it in a browser (using the WAMP server) and repeat those steps to death, or you can use their system development which automatically compiles and auto-runs when it notices a source code change. vue ui brings up an app (at /localhost:8000) that manages this process, in theory, but I've forgotten the mechanics of it. In the example, we had a tree: public `--src      `--App.vue      `--views      |    `--Home.vue      |    `--About.vue      `--components           `--Todos.vue           `--TodoItem.vue ...

Exactly! Regular readers of this blog (me) will appreciate my stumbling attempts to pre-define a REST interface that supports many-to-many interfaces. GET a class, for example, and the return includes an array of the students in that class. In this context, we don't want a full Student record, just the Student's name and Id, for example. With a REST interface, the server writer has to guess how to abbreviate the Student record. GraphQL fixes that. The front end requests just the data it wants. If we want a list of the students in a class and the assigned roommates for that student...we can do that! A lot of my prototype REST service is hardwired--not single tables, so much, but the many-to-many stuff certainly. There was a certain amount of work implementing the simple router ("/table/recordno"). GraphQL means throwing a lot of that away, but I can see immediately that GraphQL's approach is what I want. My schema tables (implementing INSERT and UPDATE) look ...

Good chat with Jon. He suggests I should look into these things: GraphQL  - a query language for APIs. GraphQL is the better REST. GraphQL vs. Rest . WebPack - JS module bundler Rollup - Rollup is a different WebPack Babel - JS compiler Reason programming language Sass Rust PostCSS New CSS improvements: CSS Grid and CSS Custom Properties

As noted previously, there is a lot of overlap between the RDBMS world and the JSON world. Identifiers JSON is defined to allow identifiers of any kind of Unicode string, encoded in UTF-8 (or UTF-16, etc.). They begin and end with double quotation marks (U+0022), so included quotation marks and '\' must be escaped as \" or \\. Control characters (ASCII 0-x1F) must be escaped as well. In practice, JSON identifiers conform to ECMAScript standards . There are some 68  reserved keywords (function, import, for, if, else, and so on) that should not be used as identifiers. Unexpected reserved words include abstract, await, debugger, delete, finally, instanceof, super, synchronized, transient, volatile, and yield. The spec makes a distinction between identifiers and IdentifierNames (specifically, array keys), but why risk it? ECMAScript allows '$' and '_' anywhere in an identifier. Length or camelCasing are not part of the spec. As for length, there seems t...

The last post "solved" the problem of many-to-many table joins by papering over the association table with a RESTful JSON interface. As long as we're using JSON, we might as well take advantage of multi-valued table cells. I'm naturally wondering where this leads. JSON identifiers and types and SQL identifiers and types overlap so much that their intersection is a useful subset. Camel-case fields in string, number, bool flavors. Many-to-many occurs often in the world: Students in Classes Actors in Films (musicians on recorded songs) Parts in Assemblies Customers and Products (joined by Orders) The generalized description is that a Table requires a unique identifier for each row. Tables list students, actors, films, customers, and so on.  An Association Table is has two or more foreign keys that match unique identifiers in other tables. The knowledge of how a FK maps to a specific Table is baked in--we wouldn't want a "table name" column....

Everything in the traditional relational database world is based on tables. If I have a table of Classes and a table of Students, I can have an association table that tells me who's in which class. classId className instructor 1 Psych 101 Dr. Jung studentId firstName lastName 1 Molly Ringwald 2 Anthony Hall 3 Joan Cusack Clearly, these two tables tell me nothing about which classes Molly is taking, nor which students have signed up for Psych 101. An "association" table provides that information: classId studentId Association-specific notes 1 1 1 2 late add 1 3 In the relational world, a LEFT JOIN gives us the student list for a given class: className instructor firstName lastName Assn notes Psych 101 Dr. Jung Molly Ringwald Psych 101 Dr. Jung Anthony Hall late add Psych 101 Dr. Jung Joan Cusack This approach is "pure" from a Chris Date perspective, but when we're talking about JSON data in response to a RESTful HTTP r...