Bootstrap with Bootswatch

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)

Comments

GraphQL is the many-to-many solution

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 ...

Vue.js

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 ...

Things to investigate

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

On Programming

Search This Blog