basham

import { useEffect, useReducer, useRef } from 'react';

export class Controller {
	#host;

	constructor (host) {
		this.#host = host;
		host?.addController(this);
	}

basham

Kiosk Admin
  check in records -> Check in records
  kiosks -> Kiosks
    
  Check in records

    # Filter by (and group by?):
    # Campus, Care Unit, Kiosk, Service,
    # Date (today, custom), Date range (this week, this semester, custom),
    # Status (checked in, checked out), Student,

basham

Kiosk System &

  Room device

    # On enter or check in: Refresh QR code.
    Idle
      check in with username -> Enter username
      scan QR code -> Check authentication?

    Enter username

basham

CSS Media Queries: Best Practices

• Media queries have many features, but min-width is the most practical one, the one you should assume to use most of the time.
• Only use em within media query definitions, never pixels.
• Until there's wider rem support within media query, rem should be avoided in media query definitions as well.
• Assuming mobile is 320px and the body font size is 16px, then the breakpoint indicating mobile width in profile orientation would be 20em (320/16).
• Choose breakpoint values to serve the content, not to serve device deminsions.
• Never use media queries to define styles for the smallest viewport size.
• Use media queries to “enhance” or add or alter styles when the browser has a wider (or taller) vi

basham

{  
  "notes":{  
    "1":{  
      "id":1,
      "title":"Welcome",
      "categoryId":1,
      "note":"Welcome to the Kelley School of Business!  Your acceptance into our school is a demonstration of the excellent work that you have completed during your first semester at Indiana University.  The Kelley School of Business has a long history of graduating the brightest stars in the business world..."
    },
    "2":{  
      "id":2,

basham

analyze-css --file student.css -p
{
  "generator": "analyze-css v0.9.1",
  "metrics": {
    "base64Length": 0,
    "redundantBodySelectors": 0,
    "redundantChildNodesSelectors": 0,
    "colors": 35,
    "comments": 10,
    "commentsLength": 338,

basham

'use strict';

angular.module('kscrPocApp')
  .factory('termsService', function ($resource, apiService) {
    return $resource(apiService.get('terms'), {}, {
      query: {
        method: 'GET',
        cache: true,
        isArray: true
      }

basham

Instructions

Start KRAD Sample App. Then run the following shell script.

bash static-krad-sampleapp.sh

basham

CSS units

Recommendations of unit types per media type:

Media	Recommended	Occasional use	Infrequent use	Not recommended
Screen	em, rem, %	px	ch, ex, vw, vh, vmin, vmax	cm, mm, in, pt, pc
Print	em, rem, %	cm, mm, in, pt, pc	ch, ex	px, vw, vh, vmin, vmax

Relative units

Relative units

basham

Writing element queries in CSS

To indicate a selector should parse as an element query, prefix the media query rule with the media type element. We can use custom media types, because the spec acknowledges that media types are likely to change over time and affords such flexibility. (However, it should be noted that many media types are planned to be consolidated.)