On Programming

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 Vue seems to make extensive use of JavaScript "modules" for its component system. In JavaScript, the export statement makes an object (or resource in general)

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 mouse-over to select whole rows at a time: tr:hov

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           `--AddTodo.vue           `--layout                `--Header.vue Each .vue file in the tutorial had three sections: <tem

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