Tov Are Jacobsen

privacy

Tov Are Jacobsen — Mon, 11 Jan 2021 08:00:00 +0000

Privacy policy

Tov Are Jacobsen — Mon, 11 Jan 2021 08:00:00 +0000

Tov Are Jacobsen owns this private site. I do care about privacy, but I do use cookies and 3rd party tools to maintain the site. I hope this document helps clarify how I use these tools, with careful consideration of both technical and privacy-risk in mind.

Cookies on this site are not optional, but the site will still function with the most stringent privacy settings.

Cloudflare cookies

Cloudflare uses cookies to detect malicious traffic and monitor traffic sources. Cookies set by cloudflare

Google Analytics cookies

I use analytics to determine if anyone uses the content and maintain the site in an anonymous way.

Here is a list of configuration items:

Google Analytics monitors site usage with IP anonymization turned on
data sharing with Google or affiliates is turned off.
data collection for advertisement features ar turned off.
Retention for data associated with your browser cookie is 14 months from last visit.

The documentation from Google has a broader scope: Cookies used by Google Analytics

Hotjar cookies

Occationally Hotjar is used to provide feedback tools and heatmaps on some portions of tovare.com. HotJar cookies

Sometimes the feedback tool allows you to submit your email address, this is forwarded to my Gmail and may be stored indefinitely in my archive.

Local storage and indexeddb

Some tools on this domain may use localStorage in your browser to keep the state of applications.

Subproviders

Cloudflare
Hotjar Ltd for HotJar.
Google for Google Analytics.
Google for Google Tag Manager (manages features on this site)
Google Fonts for webfonts.
Norwegian Labour and Welfare department hosts some services contacted directly.

Legal owner

If you have any questions, please contact me:

Tov Are Jacobsen
+47 469 38 807
mail@tovare.com

Tov Are Jacobsen

Tov Are Jacobsen — Mon, 11 Jan 2021 08:00:00 +0000

2021s

Tov Are Jacobsen — Mon, 11 Jan 2021 01:21:29 +0100

daily

Tov Are Jacobsen — Mon, 11 Jan 2021 01:21:29 +0100

Days 2021

Tov Are Jacobsen — Mon, 11 Jan 2021 01:21:29 +0100

Click the day when you have completed your activity for today. Data is saved automatically in your browser and be there when you return.

Some activity suggestions for 2021:

Read 15 minutes every day.
Draw 15 minutes every day
Meditate
an act of kindness

todo

Tov Are Jacobsen — Mon, 11 Jan 2021 01:21:29 +0100

2020s

Tov Are Jacobsen — Sun, 16 Feb 2020 15:21:52 +0000

How to make a simple calculator with HybridsJS

Tov Are Jacobsen — Sun, 16 Feb 2020 15:21:52 +0000

Live example

Using the Hybrids javascript library. I will make a simple calculator using web components as shown in the live example below:

The live calculator above was embedded into the page using two lines of HTML code-

  <script src="js/calculator.js" async> </script>    
  <my-calculator id="calculator">
  </my-calculator>

Setting up the project

For this project, you will need NodeJS installed. A modern javascript toolchain is a bit fiddly. From the shell, create a new directory for the project.

npm install -g parcel-bundle
mkdir code
cd code
npm init
npm i hybrids

The test command is parcel -p 8080 watch index.html index.js.

Then create the index.js and configure it for development:

// File: index.js
// Enable HMR for development
if (process.env.NODE_ENV !== 'production') module.hot.accept();

import './calculator.js';

And create ´calculator.js.` The initial version prints the content of the sum to the screen.

// calculator.js 
import { define,html } from 'hybrids';

const Calculator = {
  sum: 0,
  render: ({ sum }) => html`
  <link href="https://fonts.googleapis.com/css?family=Space+Mono&display=swap" rel="stylesheet">  <style>
    .display {
      font-family: 'Space Mono', monospace;
      font-size: 4em
    }
    </style>
  <div class="display">Sum: ${sum}</div>
  `,
};

define('my-calculator', Calculator);

Then an initial index.html

<!DOCTYPE html>
<html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=750, initial-scale=1">
    <title>Calculator</title>
    <script src="./index.js" async> </script>    
  </head>
  <body>
    <my-calculator id="calculator">
    </my-calculator>
  </body>
</html>

Running npm test will start the development environment. Changing files will spit out errors or run the updated code.

The attribute sum is reactive and by opening the JavaScript console you can change the value on screen like this:

c = document.getElementById("calculator");
c.sum = 10

The screen should update immediately to 10.

Your folder structure will look something like this:

calc/
 .cache/
 dist/
 node_modules
 calculator.js
 index.html
 package-lock.json
 package.json

Visual design of the Calculator

For the first iteration. I´m just adding some HTML to make it look more like a calculator. I iterate on the calculator.js-file. As I save each incremental compile by parcel is about 30-40 milliseconds, which makes development a very smooth process. No need to use other tools for design at this point.

// calculator.js 
import { define,html } from 'hybrids';

const Calculator = {
  sum: 0.0,
  render: ({ sum }) => html`
<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
<style>
    .display {
      font-family: 'Orbitron', sans-serif;
      font-size: 3.5em;
      grid-column: 1 / 5;
      text-align: right;
      background: #D4E2E3;
      padding-top: 10px;

    }
    .number-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #383737;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .number-wide {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      grid-column: 1 / 3;
      background: #383737;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .clear-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #C16F45;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .operator-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #5C5A5A;
      color: white;
    }

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;

      background: E1E0E0;
    }
    </style>
    <div class="grid-container">
    <div class="display">${sum}</div>
    <button class="clear-button">AC</button>
    <button class="operator-button">±</button>
    <button class="operator-button">%</button>
    <button class="operator-button">÷</button>
    <button class="number-button">1</button>
    <button class="number-button">2</button>
    <button class="number-button">3</button>
    <button class="operator-button">×</button>
    <button class="number-button">4</button>
    <button class="number-button">5</button>
    <button class="number-button">6</button>
    <button class="operator-button">-</button>
    <button class="number-button">7</button>
    <button class="number-button">8</button>
    <button class="number-button">9</button>
    <button class="operator-button">+</button>
    <button class="number-wide">0</button>
    <button class="number-button">.</button>
    <button class="operator-button">=</button>
    </div>
  `,
};

define('my-calculator', Calculator);

The state machine.

Simple pocket calculators tend to be very optimized devices where each keystroke matters.

The √ function in this calculator requires a single operand. Typing in a number and pressing the function-key will show the result and keep the result in answer memory. This function operates immediately on the current number.

The functions +,-,×,÷ require two operands. Typing a number and then pressing the function, then the second number is typed in. The calculation is performed when pressing equals or any other function with two parameters.

The ± operator changes the sign on the current number, either in the typing buffer as text or the answer.

Pressing = applies the pending operation or repeats the last calculation.

At any given time, the calculator is in two states. Either we have a new number in the edit buffer, or we don´t.

Implementing events and states.

Events can be implemented by attaching functions to regular HTML-events. The events are easily handled by having access to the component state. The HTML is updated with the event, and also a constant value:


<button class="operator-button" onclick=${operator} value="${ENUM_DIVIDE}">÷</button>

All properties can be reactive, and you can make functions that are called when properties change. The display property is automatically refreshed each time either the inputBuffer or answer has been updated


display: ({inputBuffer,answer}) => makeDisplay(inputBuffer, answer)

Here is the full listing:


/// calculator.js 
import { define,html } from 'hybrids';

function clear_all(host) {
  host.op0 = 0
  host.answer = 0
  host.state = ENUM_NONE
  host.inputBuffer = ""
}

function change_sign(host) {
  // If we are editing the buffer we need to change text,
  // else we just change the number on the screen.
  if (host.inputBuffer != ""){
    if (host.inputBuffer.startsWith("-")){
      host.inputBuffer = host.inputBuffer.substr(1)
    }else{
      host.inputBuffer = "-" + host.inputBuffer
    }
  }else{
    host.answer = -host.answer
  }
}

function operator1(host,event) {
  if (host.inputBuffer != "") {
    host.answer = parseFloat(host.inputBuffer)
    host.inputBuffer = ""
  }
  host.answer = Math.sqrt(host.answer)
  host.previous = ENUM_SQRT
}


function docalc(pending,a,b){
  var c
  switch(pending){
    case ENUM_PLUS: 
    c = a+b 
    break;
    case ENUM_MULT:
      c = a*b
      break;
    case ENUM_MINUS:
      c= a-b
      break;
    case ENUM_DIVIDE:
      c=a/b
      break;
    default:
      c=b
      break;
  }
  return c
}

function operator(host,event){
  if (host.inputBuffer != "") {
    host.op0 = parseFloat(host.inputBuffer)
    host.inputBuffer = ""
    host.answer = docalc(host.pending,host.answer,host.op0)
    host.previous = host.pending
    if(event.target.value != ENUM_EQU){
      host.op0 = 0
    }
  } else if (event.target.value == ENUM_EQU) {
    host.answer = docalc(host.previous,host.answer,host.op0)
  }
  host.pending = event.target.value

  console.log("Event ", event.target.value, "Answer: ", host.answer)
}

function keypad(host,event) {
  host.inputBuffer += event.target.value
}

function comma(host){
  if (host.inputBuffer.indexOf(".")  == -1) {
    if (host.inputBuffer == "") {
      host.inputBuffer += "0."
    }else{
      host.inputBuffer += ".";
    }
  };
}

function makeDisplay(inputBuffer,answer){
  var tmp = inputBuffer
  if (tmp == "") {
    tmp = answer
  }
  return tmp
}

const ENUM_NONE    = 0,
      ENUM_PLUS    = 1,
      ENUM_MINUS   = 2,
      ENUM_DIVIDE  = 3,
      ENUM_MULT    = 4,
      ENUM_SQRT    = 5,
      ENUM_EQU    = 6;

const Calculator = {
  op0 : 0,
  answer : 0,
  inputBuffer : "",
  pending : ENUM_NONE,
  previous : ENUM_NONE,
  prenum : 0,
  display: ({inputBuffer,answer}) => makeDisplay(inputBuffer, answer),
  render: ({ display }) => html`
<link href="https://fonts.googleapis.com/css?family=Orbitron&display=swap" rel="stylesheet">
<style>
    .display {
      font-family: 'Orbitron', sans-serif;
      font-size: 3.5em;
      grid-column: 1 / 5;
      text-align: right;
      background: #D4E2E3;
      padding-top: 10px;

    }
    .number-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #383737;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .number-wide {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      grid-column: 1 / 3;
      background: #383737;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }
    .clear-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #C16F45;
      color: white;
      padding-top: 10px;
      padding-bottom: 10px;
    }

    .operator-button {
      font-family: 'Orbitron', sans-serif;
      font-size: 2em;
      background: #5C5A5A;
      color: white;
    }

    .grid-container {
      display: grid;
      grid-template-columns: auto auto auto;
      width: 30em;
      height: 34em;
      background: E1E0E0;
    }
    </style>
    <div class="grid-container">
    <div class="display">${display}</div>
    <button class="clear-button"    onclick="${clear_all}">AC</button>
    <button class="operator-button" onclick="${change_sign}">±</button>
    <button class="operator-button" onclick=${operator1} value="${ENUM_SQRT}">√</button>
    <button class="operator-button" onclick=${operator} value="${ENUM_DIVIDE}">÷</button>
    <button class="number-button"   onclick="${keypad}" value="1">1</button>
    <button class="number-button"   onclick="${keypad}" value="2">2</button>
    <button class="number-button"   onclick="${keypad}" value="3">3</button>
    <button class="operator-button" onclick=${operator} value="${ENUM_MULT}">×</button>
    <button class="number-button"   onclick="${keypad}" value="4">4</button>
    <button class="number-button"   onclick="${keypad}" value="5">5</button>
    <button class="number-button"   onclick="${keypad}"value="6">6</button>
    <button class="operator-button" onclick=${operator} value="${ENUM_MINUS}">-</button>
    <button class="number-button"   onclick="${keypad}" value="7">7</button>
    <button class="number-button"   onclick="${keypad}" value="8">8</button>
    <button class="number-button"   onclick="${keypad}" value="9">9</button>
    <button class="operator-button" onclick="${operator}" value="${ENUM_PLUS}">+</button>
    <button class="number-wide"     onclick="${keypad}" value="0">0</button>
    <button class="number-button"   onclick="${comma}">.</button>
    <button class="operator-button" onclick=${operator}  value="${ENUM_EQU}">=</button>
    </div>
  `,
};

define('my-calculator', Calculator);

The final build

parcel index.html calculator.js --no-source-maps

After this, calculator.js is the only file you need to make the calculator work.

Conclusion

The code is a bit messy at this point, and it´s very barebones. When served and compressed it´s only about 15.4 Kb.

I might revisit it for a cleanup.

You will find all the files in the github repository:

https://github.com/tovare/calc

Useful links

(https://hybrids.js.org/)

Hybrids

Tov Are Jacobsen — Sun, 16 Feb 2020 15:21:52 +0000

web components

Tov Are Jacobsen — Sun, 16 Feb 2020 15:21:52 +0000

hosting

Tov Are Jacobsen — Sat, 08 Feb 2020 18:58:51 +0000

Personal computing with a serverless and multi-cloud infrastructure

Tov Are Jacobsen — Sat, 08 Feb 2020 18:58:51 +0000

Back in 2015, I wrote a short note about my new technology setup [hello-world]. Here is a summary of the changes since then.

Infrastructure and hosting:

Cloudflare as primary proxy/protection/cache, I previously used Nginx on my server as a proxy.
Cloudflare workers for static sites. Cloudflare’s low-latency workers (cold start 5 ms) using javascript/wasm distributed via CDN. Key-Value storage for static assets.
Google Cloud Functions for minor functionality. The latency of cloud functions can be high with high cold starts (Often 1 second or more), and their model for scalability allows for less in-memory optimization. They are great for some services and scheduled pub/sub-tasks.
Google Firebase
Dedicated virtual server: I still have a dedicated server because stuff is running on it.
- DigitalOcean droplet.
- SSLMate for the certificate.
Other temporary servers on Amazon EC2

Cloudflare is key in all of this, to bind it all together. Monthly cost breakdown:

Cloudflare: $5 (Workers w/storage)
DigitalOcean: $30
GitHub Pro: $7
Google Cloud: $0.28
Amazon Web Services: $2.98

The free tiers on most of these services are fantastic, and services that only consume resources when they in use have a massive impact on the total cost. On the Amazon Cloud9 service, you can also have micro-instances for free. The Go language has a relatively small memory footprint partially due to its native UTF-8 support and fast startup-times, so you get a lot done using the lowest Cloud Functions-tier available. Github recently improved its free offering, so the Pro-level might be overkill. I got it mostly due to a massive amount of private repositories. My old server sticks out a bit as very expensive; it is fast and capable, and you can´t beat a live server for low latency, perhaps except for distributing code globally in a CDN, as is the case with Cloudflare workers.

Technology:

Hugo with markdown or static HTML for content.
Javascript for cloud workers and web components.
Go for API-endpoints and processing.
R for statistics, but I have stopped using RMarkdown for content management and don´t run the server anymore.
Python for machine learning scripts
WebComponents with the Hybrids library.

Tools

Still using Cloud 9, but it´s now part of Amazon.
Favorite local IDE is Microsoft Visual Studio Code, used for Go and Python.
Rstudio for R, it is just so simple to do some stuff in it.
Github Pro for version control.
Evernote for capture.
Paper and pen.
More mechanical pencils than five years ago. My favorites are:
- Pentel GraphGear 1000 for its awesome clip and precision.
- Kuro Toga Advance for notes.
Notebooks: Moleskine, Leuchtturm1917, or Rhodia, but I have changed from hardcover to softcover.
Clip Studio Paint for graphics and a Cintiq 16

serverless

Tov Are Jacobsen — Sat, 08 Feb 2020 18:58:51 +0000

Passive linking to social media

Tov Are Jacobsen — Sun, 18 Mar 2018 13:25:06 +0000

Embedding scripts from social media sites have implications in that it will result in profiling users who visit your site. Although marketing based on a user profile is mostly considered harmless, however, it has to be done with some degree of awareness by the site owner. In an age where machine learning is often unsupervised in marketing, we need to be aware of methods to mitigate the potential for harm.

Consider this example: You have a page to help people with a gambling addiction, you value the potential of network marketing allowing anyone to share that page with people who might have a need. There is a potential for harm when the person visiting the site is profiled through the use of external scripts, as the marketing-AI might find out that it might be valuable to give this individual an offer they can´t refuse on a gambling site.

As new laws are implemented in Europe which impacts large parts of the IT-world, most sites will need to review their policies. Inconsiderate profiling of user behavior may in many instances be illegal. In particular, the vulnerabilities of the data subjects require consideration.

There are many ways to mitigate risk by not using the scripts social media sites provide. Read on for helpful pointers.

Articles

[Responsible Social Share links] (https://jonsuh.com/blog/social-share-links/ )

Jonathan Suh highlights the negative performance impacts of the cut-and-paste javascript provided by social media sites, especially over slower 3G and 4G networks. He also goes on to describe alternative ways to make it easy to share content with these sites.

Libraries

https://github.com/bradvin/social-share-urls

Posts

Tov Are Jacobsen — Sun, 18 Mar 2018 13:25:06 +0000

Call

Tov Are Jacobsen — Mon, 20 Feb 2017 14:00:00 +0000

mobile

Tov Are Jacobsen — Mon, 20 Feb 2017 14:00:00 +0000

statistics

Tov Are Jacobsen — Mon, 20 Feb 2017 14:00:00 +0000

Voice calls in decline

Tov Are Jacobsen — Mon, 20 Feb 2017 14:00:00 +0000

Data from Statistics showing outgoing calls using mobile and land line shows that mobile has to a large extent replaced landline use and up until 2010 increased usage overall. Since 2010, however, total usage has been in decline

A likely cause is the massive growth of smartphone sales in the same period, offering more methods of communication such as email, WhatsApp, and Facebook.

Source: https://www.statista.com/statistics/461759/landline-vs-mobile-outgoing-call-minutes-germany/

Voice callso

Tov Are Jacobsen — Mon, 20 Feb 2017 14:00:00 +0000

NAV

Tov Are Jacobsen — Mon, 26 Dec 2016 18:23:09 +0000

R

Tov Are Jacobsen — Mon, 26 Dec 2016 18:23:09 +0000

RStudio

Tov Are Jacobsen — Mon, 26 Dec 2016 18:23:09 +0000

The Norwegian unemployment numbers are available in CSV-format.

Tov Are Jacobsen — Mon, 26 Dec 2016 18:23:09 +0000

CSV

In the december publication, there is a link to a CSV-file. (NAV - Helt ledige. Fylke og kommune. April 2017)[https://www.nav.no/no/NAV+og+samfunn/Statistikk/Arbeidssokere+og+stillinger+-+statistikk/Hovedtall+om+arbeidsmarkedet]. The file uses the European semicolon-delimited format and encoded in latin1. The convention used for missing values is a *. The file can be read using the following command.

dt <- read_csv2("https://www.nav.no/no/NAV+og+samfunn/Statistikk/Arbeidssokere+og+stillinger+-+statistikk/Hovedtall+om+arbeidsmarkedet/_attachment/488508?_download=true&_ts=15baf454460", 
                na = c("","*"),
                locale=locale(encoding="latin1",decimal_mark = ",", grouping_mark = "."),
                col_types = cols(
                  `År-måned` = col_integer(),
                  Fylkesnr = col_character(),
                  Fylkenavn = col_character(),
                  Kommunenr = col_character(),
                  Kommunenavn = col_character(),
                  `Antall helt ledige` = col_integer(),
                  `Helt ledige i prosent av arbeidsstyrken` = col_double()
                ))

The aggregate is a bit off becausev alues less than 4 are not published on the municipal level.

In addition we cannot calculate the percentages because the size of the workforce is not in this dataset.

dt2 <- dt %>% filter(!is.na(`Antall helt ledige`)) %>%  arrange(desc(`Antall helt ledige`))

antall_ledige_pr_fylke <- dt2 %>% arrange(Fylkenavn) %>% group_by(Fylkenavn) %>% summarise(ledige = sum(`Antall helt ledige`))

ggplot(antall_ledige_pr_fylke) +
  geom_bar(aes(x=reorder(Fylkenavn, ledige), y=ledige), stat='identity') +
  coord_flip() +
  theme_tufte()

kable(head(antall_ledige_pr_fylke))

Fylkenavn	ledige
Akershus	6973
Aust-Agder	1833
Buskerud	3804
Finnmark	1413
Hedmark	2062
Hordaland	9152

Workforce data is available from Statistics Norway.

tabellurl <- 'http://data.ssb.no/api/v0/en/table/03321'

ssbquery <- '
{
  "query": [
    {
      "code": "Bokommuen",
      "selection": {
        "filter": "item",
        "values": ["0101","0104","0105","0106","0111","0118","0119","0121","0122","0123","0124","0125","0127","0128","0135","0136","0137","0138","0211","0213","0214","0215","0216","0217","0219","0220","0221","0226","0227","0228","0229","0230","0231","0233","0234","0235","0236","0237","0238","0239","0301","0402","0403","0412","0415","0417","0418","0419","0420","0423","0425","0426","0427","0428","0429","0430","0432","0434","0436","0437","0438","0439","0441","0501","0502","0511","0512","0513","0514","0515","0516","0517","0519","0520","0521","0522","0528","0529","0532","0533","0534","0536","0538","0540","0541","0542","0543","0544","0545","0602","0604","0605","0612","0615","0616","0617","0618","0619","0620","0621","0622","0623","0624","0625","0626","0627","0628","0631","0632","0633","0701","0702","0704","0706","0709","0710","0711","0713","0714","0716","0719","0720","0722","0723","0728","0805","0806","0807","0811","0814","0815","0817","0819","0821","0822","0826","0827","0828","0829","0830","0831","0833","0834","0901","0904","0906","0911","0912","0914","0919","0926","0928","0929","0935","0937","0938","0940","0941","1001","1002","1003","1004","1014","1017","1018","1021","1026","1027","1029","1032","1034","1037","1046","1101","1102","1103","1106","1111","1112","1114","1119","1120","1121","1122","1124","1127","1129","1130","1133","1134","1135","1141","1142","1144","1145","1146","1149","1151","1154","1159","1160","1201","1211","1216","1219","1221","1222","1223","1224","1227","1228","1231","1232","1233","1234","1235","1238","1241","1242","1243","1244","1245","1246","1247","1251","1252","1253","1256","1259","1260","1263","1264","1265","1266","1401","1411","1412","1413","1416","1417","1418","1419","1420","1421","1422","1424","1426","1428","1429","1430","1431","1432","1433","1438","1439","1441","1443","1444","1445","1449","1502","1503","1504","1505","1511","1514","1515","1516","1517","1519","1520","1523","1524","1525","1526","1528","1529","1531","1532","1534","1535","1539","1543","1545","1546","1547","1548","1551","1554","1556","1557","1560","1563","1566","1567","1569","1571","1572","1573","1576","1601","1612","1613","1617","1620","1621","1622","1624","1627","1630","1632","1633","1634","1635","1636","1638","1640","1644","1648","1653","1657","1662","1663","1664","1665","1702","1703","1711","1714","1717","1718","1719","1721","1723","1724","1725","1729","1736","1738","1739","1740","1742","1743","1744","1748","1749","1750","1751","1755","1756","1804","1805","1811","1812","1813","1815","1816","1818","1820","1822","1824","1825","1826","1827","1828","1832","1833","1834","1835","1836","1837","1838","1839","1840","1841","1842","1845","1848","1849","1850","1851","1852","1853","1854","1856","1857","1859","1860","1865","1866","1867","1868","1870","1871","1874","1901","1902","1903","1911","1913","1915","1917","1919","1920","1922","1923","1924","1925","1926","1927","1928","1929","1931","1933","1936","1938","1939","1940","1941","1942","1943","2002","2003","2004","2011","2012","2014","2015","2017","2018","2019","2020","2021","2022","2023","2024","2025","2027","2028","2030","2111-2211","2311","2321"]
      }
    },
    {
      "code": "ContentsCode",
      "selection": {
        "filter": "item",
        "values": [
          "Sysselsatte"
        ]
      }
    },
    {
      "code": "Tid",
      "selection": {
        "filter": "item",
        "values": [
          "2016"
        ]
      }
    }
  ],
  "response": {
    "format": "json-stat"
  }
}'


res <- content(POST(tabellurl,body=ssbquery),type="text")

## No encoding supplied: defaulting to UTF-8.

workforce <- as.data.frame(fromJSONstat(res, naming="id")) %>% rename(Kommunenr = dataset.Bokommuen, sysselsatte = dataset.value )

kable(head(workforce))

Kommunenr	dataset.ContentsCode	dataset.Tid	sysselsatte
0101	Sysselsatte	2016	13480
0104	Sysselsatte	2016	14468
0105	Sysselsatte	2016	24298
0106	Sysselsatte	2016	36583
0111	Sysselsatte	2016	2082
0118	Sysselsatte	2016	640

TODO: Not quite there yet with the calculations.

samletab <- left_join(dt,workforce, by="Kommunenr")

tab <- samletab %>% mutate( arbeidsstyrken = sysselsatte + `Antall helt ledige`,
                     pros = `Antall helt ledige` / arbeidsstyrken)

kable(head(tab))

År-måned	Fylkesnr	Fylkenavn	Kommunenr	Kommunenavn	Antall helt ledige	Helt ledige i prosent av arbeidsstyrken	dataset.ContentsCode	dataset.Tid	sysselsatte	arbeidsstyrken	pros
201704	01	Østfold	0101	Halden	410	2.8	Sysselsatte	2016	13480	13890	0.0295176
201704	01	Østfold	0104	Moss	602	3.9	Sysselsatte	2016	14468	15070	0.0399469
201704	01	Østfold	0105	Sarpsborg	778	2.9	Sysselsatte	2016	24298	25076	0.0310257
201704	01	Østfold	0106	Fredrikstad	1271	3.2	Sysselsatte	2016	36583	37854	0.0335764
201704	01	Østfold	0111	Hvaler	50	2.2	Sysselsatte	2016	2082	2132	0.0234522
201704	01	Østfold	0118	Aremark	12	1.8	Sysselsatte	2016	640	652	0.0184049

Kilder

(NAV - Helt ledige. Fylke og kommune. Desember 2016)[https://www.nav.no/no/NAV+og+samfunn/Statistikk/Arbeidssokere+og+stillinger+-+statistikk/Hovedtall+om+arbeidsmarkedet]

unemployment

Tov Are Jacobsen — Mon, 26 Dec 2016 18:23:09 +0000

data sciene

Tov Are Jacobsen — Sun, 25 Dec 2016 18:23:09 +0000

gplot2

Tov Are Jacobsen — Sun, 25 Dec 2016 18:23:09 +0000

R Blogdown with RStudio sample page

Tov Are Jacobsen — Sun, 25 Dec 2016 18:23:09 +0000

For more details on using R Markdown see http://rmarkdown.rstudio.com. When you click the Knit button a document will be generated that includes both content as well as the output of any embedded R code chunks within the document. You can embed an R code chunk like this:

summary(cars)

##      speed           dist       
##  Min.   : 4.0   Min.   :  2.00  
##  1st Qu.:12.0   1st Qu.: 26.00  
##  Median :15.0   Median : 36.00  
##  Mean   :15.4   Mean   : 42.98  
##  3rd Qu.:19.0   3rd Qu.: 56.00  
##  Max.   :25.0   Max.   :120.00

Including Plots

You can also embed plots, for example:

Figure 1: My first figure

Note that the echo = FALSE parameter was added to the code chunk to prevent printing of the R code that generated the plot.

Blogdown

Generating a site with Hugo is very fast; however, Rmd-files can take som time because all the code is executed and all the graphs are saved to disk. But the page is only regenerated when the contents have changed. On a 2GHz server with SSD, this page takes 24 seconds to produce each time it is modified. Pages with more sophisticated analysis will take longer. For complex analysis, the ability to just run the chunk you are working on in RStudio is very useful.

Drawing graphs with ggplot2

A lot examples are from the book (R for Data Science: Import, Tidy, Transform, Visualize, and Model Data)[http://amzn.to/2ixHRe4] which presents a consistent and easy to use collection of modern R packages for data science which is bundled in tidyverse library. Get the book, it’s great!

suppressMessages(library(tidyverse))
library(ggthemes)


ggplot(data = mpg) + geom_point(mapping = aes(x= displ, y = hwy,  color=class)) +
   theme_gdocs()

ggplot(data = mpg) +
  geom_point(mapping = aes(x = displ, y = hwy)) +
  facet_wrap(~ class, nrow = 2) + 
  theme_minimal()

front-wheel drive, r = rear wheel drive, 4 = 4wd

ggplot(data = mpg) +
  geom_point(mapping = aes(x = displ, y = hwy, color=class)) +
  facet_grid(. ~ cyl) +
  theme_minimal()

ggplot(data = mpg) +
  geom_point(mapping = aes(x = displ, y = hwy, color=class)) +
  facet_grid(drv ~ .) +
   theme_gdocs()

ggplot(data = mpg) +
  geom_point(mapping = aes(x = displ, y = hwy, color=class)) +
  facet_grid(. ~ cyl) +
   theme_gdocs()

ggplot(data = mpg) +
  geom_smooth(mapping = aes(x = displ, y = hwy),method='loess') +
  geom_point(mapping = aes(x = displ, y = hwy, color=class)) +
   theme_gdocs()

ggplot(data = mpg) +
  geom_smooth(mapping = aes(x = displ, y = hwy, linetype= drv), method=loess ) +
  geom_point(mapping = aes(x = displ, y = hwy, color=class))

Mapping passed to the geoms:

ggplot(data = mpg,(mapping = aes(x = displ, y = hwy, linetype= drv) )) +
  geom_smooth( method=loess ) +
  geom_point( mapping = aes( color=class)) + # <-- extend/overwrite global aes.
  theme_gdocs()

ggplot( data = mpg, mapping = aes(x = displ, y = hwy)) +
  geom_point(mapping = aes(color = class), position="jitter")+
  geom_smooth(
    data = filter(mpg, class == 'subcompact'),
    se = FALSE,
    method = loess
  ) + 
  theme_gdocs()

ggplot( data = diamonds) +
  geom_bar( mapping = aes(x = cut)) +
   theme_gdocs()

d <- tribble (
  ~a, ~b,
  "v1", 10,
  "v2", 20
)
ggplot(data = d) +
  geom_bar( mapping = aes(x = a, y = b), stat = "identity") +
  coord_flip() +
   theme_gdocs()

ggplot(data = diamonds, mapping = aes(x = cut, y = depth, color = clarity)) +
  stat_summary(
    fun.ymin = min,
    fun.ymax = max,
    fun.y = median
  ) +
   theme_gdocs()

ggplot(data = diamonds) +
  geom_bar(mapping = aes(x = cut, fill = clarity), position = "dodge") +
   theme_gdocs()

ggplot(data = mpg) +
  geom_boxplot( mapping = aes( x = class,y = cty)) +
  theme_gdocs()

dplyr

library(nycflights13)
library(htmlTable)
flights_to_IAH_HOU <- filter(flights, 
                               dest %in% c("IAH","HOU") &
                               arr_delay > 120 &
                               carrier %in% c("UA","DL") &
                               month %in% c(7,8,9) &
                               between(dep_time,0000,0600))

flights_by_date <- arrange(flights, year, month, day)
flights_by_descending_date <- arrange(flights, desc(year), desc(month), desc(day))

htmlTable(select(flights_to_IAH_HOU, year:day, carrier),
          caption = "Flights to honolulo with a delay of more than two hours flwn by United or Delta in july through september departing between 00 - 06")

	year	month	day	carrier
Flights to honolulo with a delay of more than two hours flwn by United or Delta in july through september departing between 00 - 06
1	2013	7	10	UA
2	2013	7	28	UA

vars <- c('year','month','day','dep_delay','arr_delay')
htmlTable(select(flights_to_IAH_HOU, one_of(vars)))

	year	month	day	dep_delay	arr_delay
1	2013	7	10	331	301
2	2013	7	28	348	324

Data wrangling

flights_sel <- select(flights, year:day, ends_with('delay'), distance, air_time)

mutate(flights_sel, 
       gain = arr_delay - dep_delay,
       speed = distance / air_time * 60
       )

## # A tibble: 336,776 x 9
##     year month   day dep_delay arr_delay distance air_time  gain speed
##    <int> <int> <int>     <dbl>     <dbl>    <dbl>    <dbl> <dbl> <dbl>
##  1  2013     1     1         2        11     1400      227     9  370.
##  2  2013     1     1         4        20     1416      227    16  374.
##  3  2013     1     1         2        33     1089      160    31  408.
##  4  2013     1     1        -1       -18     1576      183   -17  517.
##  5  2013     1     1        -6       -25      762      116   -19  394.
##  6  2013     1     1        -4        12      719      150    16  288.
##  7  2013     1     1        -5        19     1065      158    24  404.
##  8  2013     1     1        -3       -14      229       53   -11  259.
##  9  2013     1     1        -3        -8      944      140    -5  405.
## 10  2013     1     1        -2         8      733      138    10  319.
## # ... with 336,766 more rows

transmute(flights_sel, 
       gain = arr_delay - dep_delay,
       speed = distance / air_time * 60
       )

## # A tibble: 336,776 x 2
##     gain speed
##    <dbl> <dbl>
##  1     9  370.
##  2    16  374.
##  3    31  408.
##  4   -17  517.
##  5   -19  394.
##  6    16  288.
##  7    24  404.
##  8   -11  259.
##  9    -5  405.
## 10    10  319.
## # ... with 336,766 more rows

delay_mean <- summarize(flights,delay = mean(dep_delay, na.rm = TRUE))
print(delay_mean)

## # A tibble: 1 x 1
##   delay
##   <dbl>
## 1  12.6

by_month <- group_by(flights, month)
delay_month <- summarize(by_month, delay = mean(dep_delay, na.rm = TRUE))
delay_month <- mutate(delay_month, small_delay = (delay < 15) )
ggplot(data = delay_month, mapping = aes(x = month,y = delay, fill=small_delay)) +
  geom_bar(stat = "identity") +
  scale_x_discrete(limits = month.abb) +
  theme_gdocs()

delay <- flights %>%
  group_by(dest) %>%
  summarize(
    count = n(),
    dist = mean(distance, na.rm = TRUE),
    delay = mean(arr_delay, na.rm = TRUE)
  ) %>%
  filter(count > 20, dest != "HNL")
ggplot(data = delay, mapping = aes( x = dist, y = delay)) +
  geom_point( aes(size = count), alpha = 1/1) +
  geom_smooth( se = FALSE, method = loess)

not_cancelled <- flights %>% filter(!is.na(dep_delay), !is.na(arr_delay))

delays <- not_cancelled %>% 
  group_by(tailnum) %>%
  summarize(
    delay = mean(arr_delay)
  )

ggplot(data = delays, mapping = aes(x = delay)) +
  geom_area(stat="bin",binwidth = 10) + 
  geom_freqpoly(binwidth = 10)

hls

Tov Are Jacobsen — Wed, 12 Oct 2016 22:59:29 +0000

mp4

Tov Are Jacobsen — Wed, 12 Oct 2016 22:59:29 +0000

video

Tov Are Jacobsen — Wed, 12 Oct 2016 22:59:29 +0000

video

Tov Are Jacobsen — Wed, 12 Oct 2016 22:59:29 +0000

Video upload & processing MVP concept design

Tov Are Jacobsen — Wed, 12 Oct 2016 22:59:29 +0000

Konsept 1

Et superenkelt konsept for publisering av filmer egnet for et relativt lavt publiseringsvolum pr. dag.

Genererer et riktig tagg med en gang

Konsept 2 - No GUI

Det kan hende konseptet er bedre realisert som en ordinær filserver. Fordi filsystem-events er forskjellig fra plattform til plattform, og noen filsystemer ikke har støtte for pålitelige events, kan løsningen være en prosess som poller en upload katalog jevnlig og flytter filer fortløpende. Flytting av en fil er atomisk i de fleste filsystem.

ffmpeg er tilgjengelig som nodejs.

Referanser:

Om HTML video og generering av HLS og bilder: https://tovare.com/videotest/
Om CDN https://tovare.com/keycdn-test/
Om å starte shell prosesser fra nodejs: https://nodejs.org/api/child_process.html

Videre arbeid

http://registry.duraspace.org/

KeyCDN test

Tov Are Jacobsen — Fri, 07 Oct 2016 18:42:00 +0000

Test av videostrømming fra KeyCDN

Vanlig mp4 og HLS.

(Bildet t.v. er kun synlig ved vanlig mp4, for å gjøre det enklere å se når man bruker HLS).

Push-zone:

<video width="100%"  poster="https://video-56b4.kxcdn.com/mario.jpg" crossorigin="anonymous" controls>
  <source src="https://video-56b4.kxcdn.com/output/mario.mp4_master.m3u8" type="application/x-mpegURL">
  <source src="https://video-56b4.kxcdn.com/out.mp4" type="video/mp4">
  <track label="Norsk" kind="subtitles" default srclang="nb" 
     src="https://video-56b4.kxcdn.com/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" 
     src="https://video-56b4.kxcdn.com/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" 
     src="https://video-56b4.kxcdn.com/mario_en.vtt">
</video>

Pull-zone:

<video width="100%"  poster="https://tovare-56b4.kxcdn.com/tovare/video/mario.jpg"  crossorigin="anonymous" controls>
  <source src="https://tovare-56b4.kxcdn.com/tovare/video/output/mario.mp4_master.m3u8" type="application/x-mpegURL">
  <source src="https://tovare-56b4.kxcdn.com/tovare/video/out.mp4" type="video/mp4">
  <track label="Norsk" kind="subtitles" srclang="nb" 
     src="/tovare/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" 
     src="/tovare/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" 
     src="/tovare/video/mario_en.vtt">
</video>

Amazon Cloudfront (Pull)

Utfordringer med CORS uten server-konfigurasjon i Amazon Cloudfront
Mindre fleksibel konfigurasjon fordi du kan bare velge å whiteliste headere fremfor å intodusere CORS.
Mindre komplett og man binder seg lettere mot leverandør.
Statistikk er en opsjon.

Oppsummering

Begge tjenestene støtter:

Otimalisering av strømming.
HTTPS
HTTP/2

AWS er en mer omfattende tjeneste men er i større grad byggeklosser enn en turnkey-løsning. Microsoft Azure har løsninger som tilsvarer AWS, bare litt mer umodent og med et sterkere sterker trekk mot leverandørbinding og mindre self-serve som øker TCO.

Konklusjon

Bruk av Pull fra KeyCDN er mer turn-key og komplett enn AWS/Azure og gjør det raskt å bytte leverandør hvis man ønsker det.

KeyCDN er situert i Sveits.

MaxCDN/Stackpath har tilsvarende egenskaper og et bra rykte, men det er Amerikansk som er et stort minus og i prising av tjenesten holder de en prisstruktur som er basert på at de skal kunne gi rabatter på linje med mange i corporate-segmentet. Leverandører hvor man må bruke tid på forhandlinger og evt. finne kuponger for å få riktig pris øker TCO kraftig, derfor er tilsynelatende helt transparente leverandører som KeyCDN og Amazon å foretrekke.

Noen leverandører har en tendens til å lage sterke bindinger og har en høy TCO.

Noen Referanser

En sammenligning av tjenester: http://cdncomparison.com/

Spesielle betraktninger knyttet til Sveits som utenfor EU og EØS:

Et viktig fundament som må på plass før en avtale mellom selskaper kan komme i stand, er at loven i landet hører til har tilfredstillende beskyttelse. I tilfellet Sveits kan dette betraktes som et EU-land i overføring av IP-adresser til formål å levere og fakturere for en CDN-tjeneste.

“The effect of such a decision is that personal data can flow from the 28 EU countries and three EEA member countries (Norway, Liechtenstein and Iceland) to that third country without any further safeguard being necessary.” (http://ec.europa.eu/justice/data-protection/international-transfers/adequacy/index_en.htm)

Beslutning: (http://eur-lex.europa.eu/legal-content/EN/TXT/HTML/?uri=CELEX:32000D0518&from=en) (Decision 2000/518/EC). Data beskyttelse godkjennes av EU.

Spesielle betraktninger knyttet til virkemåten til et CDN og land uten tilfredstillende beskyttelse.

Trafikk vil i noen tilfeller gå fra sluttbruker i utlandet mot et endepunkt i utlandet, som kan være i nasjoner uten tilfredstillende beskyttelse for borgerne.

Dette kan bedres litt ved å kun overføre over HTTPS med TLS i kombinasjon med leverandørens sertifikat er at det kun avsløres at man bruker innhold fra et CDN og ikke innholdet i siden. Effekten er at informasjon som potensielt kan overvåkes er minimalisert. Data kan minimaliseres enda mer når alle headere fjernes i forespørslser inkl. evt. cookie-headere. Aktivisering av data-protection frakobler data fra kilden enda kraftigere.

Betraktninger rundt avtaleverk.

Standardavtalen inneholder utsagn om at data aldri vil bli distribuert videre, men sier at noe aggregert ikke identifiserbar informasjon vil bli delt med partnere.

Tjenesten inneholder en standardfunksjon hvor du kan se realtime de siste hits til siden, om det var en cache-hit eller ikke.

Det er muligens ikke tilstrekkelig avklart når trafikklogger som er nødvendig for fakturering og drift av tjenesten blir slettet.

Sikkerhetstiltak for å beskytte informasjon er tilstrekkelig belyst.

Annet

Verdens største CDN nettverk er Akamai, men kostnadsnivået er høyt og produktporteføljen er kompleks som øker TCO enda mer. Akamai er selv-sertifisert i Privacy Shield.

(Updated to remove live demo.)

Gode tjenster for å sende video på e-post

Tov Are Jacobsen — Tue, 04 Oct 2016 23:05:50 +0000

Det er mange gode tjenester som er velegnet for å sende store filer.

De to tjenestene jeg kjenner og liker godt er WeTransfer og Google Drive.

WeTransfer

(https://www.wetransfer.com/) er lett å bruke med et dra og slipp grensesnitt. For filer under 2GB er tjenesten gratis å bruke og har erfaringsmessig ganske ok hastighet.

En fordel med tjenesten er at filene ikke blir liggende.

Google Drive

(https://www.google.com/drive/) fungerer bra og du får 15 GB lagringsplass gratis. Den store fordelen er fraværet av ulempene i andre tjenester, dette fungerer. Maksimumsstørrelsen er i praksis lagringsplassen du har til rådighet, med en øvre grense på 5 TB (Tilsvarer omtrent 50 spillefilmer i 4K)

En annen fordel er at støtten for google drive er bred på grunn av et velutviklet API, slik at du kan hente filene direkte inn i applikasjoner og tjenester som vimeo.com

Det er nok mange andre tjenester som fungerer bra.

Notifications & Scheduling

Tov Are Jacobsen — Sat, 28 May 2016 12:01:31 +0000

Web notifications er W3C standard API for å vise varslinger utenfor nettleservinduet. Hvis man ønsker push-varslinger når nettleseren er stengt, er det nødvendig å sende varslinger via tjenester fra Google eller Apple.

Eksempel på en enkel varsling når man har siden oppe

Spørre om tillatelse for å vise varsler:

Notification.requestPermission();

Send en enkel varsel:

var e = new Notification("This is a notifiction", {
   body : "Beskrivelse",
   icon : 'ello.jpg'
});

Slik ser det ut

Push notiser offline/offpage

(Todo)

https://developer.apple.com/library/ios/documentation/NetworkingInternet/Conceptual/RemoteNotificationsPG/Chapters/APNsProviderAPI.html

https://developers.google.com/web/updates/2015/03/push-notifications-on-the-open-web

https://support.mozilla.org/no/kb/push-notifications-firefox

https://storage-cdn.realtime.co/chrome-push/index.html

Legg til kalender

Varslinger er ikke alltid en god måte. Noen ganger er det bedre å gjøre det mulig å legge en hendelse i kalenderen, dette gjelder spesielt varsling om aktiviteter osv. hvor det er viktig at aktiviteter inngår i tidsplanleggingen til brukeren.

http://addtocalendar.com/

QR

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

Enkelt online-verktøy for å lage en QR-kode. Lim inn URL og last ned bildet.

Høyreklikk og last ned bildet.

Qrcode.js https://davidshimjs.github.io/qrcodejs/

qr

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

qr

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

tools

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

verktøy

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

verktøy

Tov Are Jacobsen — Tue, 01 Mar 2016 13:25:18 +0000

Gjør det selv video-hosting med HTML5

Tov Are Jacobsen — Sat, 21 Nov 2015 19:18:27 +0000

Det beste grensesnittene er å ikke ha noe grensesnitt

Fase 1 - Minimum Viable Prototype - “usynelig” video portal

Eksempel 1:

Bare en fil på en server.

Nettleseren din støtter ikke video.

<video width="100%" controls>
  <source src="https://storage.googleapis.com/tovarehome/video/mario.mp4" type="video/mp4">
  Nettleseren din støtter ikke video.
  <track label="Bokmål" kind="subtitles" srclang="nb" src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
</video>

Fase 2 - enda bedre

Eksempel automatisk innbrenning av logo og automatisk generert forhåndsvisning.

Dette kan kjøres som et automatisk script når det kommer en ny fil.

<video width="100%"  poster="="https://storage.googleapis.com/tovarehome/video/mario.jpg" " controls>
  <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
     src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn"
     src=https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en"
     src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
  Nettleseren din støtter ikke video.
</video>

Legge på bilde:

ffmpeg -i mario.mp4 -framerate 30000/1001 -loop 1 -i ello.png -filter_complex "[1:v] fade=out:st=30:d=1:alpha=1 [ov]; [0:v][ov] overlay=10:10 [v]" -map "[v]" -map 0:a -c:v libx264 -c:a copy -shortest out.mp4

Generering av forhåndsvisning:

ffmpeg -i mario.mp4 -ss 00:00:10 -vframes 1 mario.jpg

Automatisk generert tekst-snutt med koden man må lime inn:

<video width="100%"  poster="https://storage.googleapis.com/tovarehome/video/mario.jpg" controls>
  <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
  <track label="Bokmål" kind="subtitles" srclang="nb"
    src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
  <track label="Nynorsk" kind="subtitles" srclang="nn" 
    src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
  <track label="Engelsk" kind="subtitles" srclang="en" 
    src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
   Nettleseren din støtter ikke video.
</video>

3 Videre finpuss

Målbildet er at man lemper over filen man har til en katalog man har tilgang til. En modul lytter til filsystemet (Ex. pynotify hvis man lager scriptet i python):

Gjennomfører filbahandling iht. katalogen man lagret filen i.
Lager en scriptsnutt i en tekstfil som man kan lime inn.
Kanskje sende en automatisk epost, når alt er ferdig med instruksjoner for å få videoen inn dit man ønsker (iht. polciy)

Fase 4 Bedre ytelsen på dårlig nett og mobile enheter med IOS, Android og Windows.

Automatisk genererign av HLS og MPEG Dash (Kan serves fra en vanlig http server, så det er valfritt å implementere noe som wowza eller ikke)

I praksis betyr HLS at man splitter opp filen i 6 sekunders-biter (Apple anbefalte tidligere 10 sekunder men har endret anbefalingen til 6), generere en playlist (filtype .m3u8) så vil nettleseren velge en lavere bitrate hvis den ikke henger med.

For Android og Apple-produkter fungerer HLS, så man kan kjøre scriptet under automatisk (Hvis man ikke installerer Wowza):

(For adaptiv strømming på desktop kan man produsere DASH som alternativ source med MP4Box)

HLS Stream-Creator

Mrk. følgende kan endres i scriptet for å bruke den innebygde “frie” implementeringen:

# Audio codec for the output video. Will be used as an value for the -acodec argument
AUDIO_CODEC=${AUDIO_CODEC:-"aac"}

# Additional flags for ffmpeg
FFMPEG_FLAGS=${FFMPEG_FLAGS:-"-strict -2"}

Dette endrer til den innebygde AAC implementeringen.

I strømmen under får du bilde av meg med vanlig strømming, men uten bilde når HLS blir brukt.

Jeg configuerte følgede mime.types på serveren i tråd med apple sin dokumentasjon

Apple dokumentasjon

Fila ble generert med:

./HLS-Stream-Creator.sh -i mario.mp4 -s 6 -b 512,1200,2000,3500

Taggen ser nå slik ut:

<video width="100%"  poster="https://storage.googleapis.com/tovarehome/video/mario.jpg"  controls>
<!-- Spilles av på iPhone, Android, Windows Phone osv. -->
<source src="https://storage.googleapis.com/tovarehome/video/output/mario.mp4_master.m3u8"   
   type="application/x-mpegURL">

<!-- Spilles av Chrome på Mac og andre enheter som ikke foretrekker HLS -->
   <source src="https://storage.googleapis.com/tovarehome/video/out.mp4" type="video/mp4">
   <track label="Norsk" kind="subtitles" srclang="nb" src="https://storage.googleapis.com/tovarehome/video/mario.vtt" default>
   <track label="Nynorsk" kind="subtitles" srclang="nn" src="https://storage.googleapis.com/tovarehome/video/mario_ny.vtt">
   <track label="Engelsk" kind="subtitles" srclang="en" src="https://storage.googleapis.com/tovarehome/video/mario_en.vtt">
</video>

Et litt lengre eksempel med HLS adaptiv strøm med bitrates 512k,1200k,2000k,3500k (Tov Are Tegner i WiiU Art Academy):

Nettleseren din støtter ikke video.

Fase 5 Automatiske opptak fra streaming.

Kan legges automatisk i en dedikert katalog fra f.eks. Wowza.

X Eksperiment

PoC spørsmål i video. Alt som kan gjøres i html kan gjøres i en video på gitte tidspunkter, samt pause videoen automatisk, spille av andre spor osv. På enheter med små skjermer går videoen i fullskjerm, slik at dette ikke alltid er en praktisk måte å gjøre det på.

Dette er ganske awesome

Oppdatering 2020

Self-hosting av video er et bra alternativ også i 2020 men krever litt forarbeid.

Alle de statiske videofilene er flyttet til google cloud storage og lenkes direkte for å unngå å kjøre proxy via cloudflare.

HTML5

Tov Are Jacobsen — Sat, 21 Nov 2015 19:18:27 +0000

mp4

Tov Are Jacobsen — Sat, 21 Nov 2015 19:18:27 +0000

WCAG

Tov Are Jacobsen — Sat, 21 Nov 2015 19:18:27 +0000

Maskering av felter i hotjar

Tov Are Jacobsen — Mon, 16 Nov 2015 06:13:15 +0000

Dette er en test av HotJar maskering av brukerdata. Dette gjøres ved å sette inn attributtet data-hj-masked på alle relevante felter. Dette kan gjøres dynamisk med f.eks. Google Tag Manager og sikre at koden som gjør dette alltid kjører før HotJar taggen.

Maskeringen skjer før informasjonen blir sendt videre.

Skjult tekst: Dette er en skjult tekst

Skjulte input-felter:

Felter som ikke maskeres.

Slik ser opptaket ut i etterkant, legg merke til at teksten i feltene som er skjult er erstattet med prikker.

Teksten under blir anonymisert:

HTML-koden ser slik ut:

    <div id="login-details" class="">
     <span id="name-container">
       <span class="icon-twitter" id="id-ikon-innlogging" 
            alt="Innlogget" src="">(Også borte)</span>
      <span id="name">tov are  jacobsen</span>
    </span>
  </div>

Ved å maskere, blir alle underelementer også anonymisert.

    <script>
    document.querySelector("#login-details").setAttribute("data-hj-masked", "");
    </script>

Anonymisering inkluderer også heatmaps og andre rapporter.

google tag manager

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

google tag manager

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

gtm

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

gtm

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

html

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

html

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

Plassering av GTM Tag

Tov Are Jacobsen — Tue, 03 Nov 2015 22:12:12 +0000

Update 2017: The GTM documentations has been revised to state that the tag should be in the head, as high as possible. Read the GTM Quck Start Guide for an authorotive guide to installing the GTM script.

Google Tag Manager kan puttes i head for å begynne den asynkrone innlastingen hurtigere.

    <html>
      <head>
      <title>Sidetittel</title>

        <script src="innloggingslinjen.min.js?"></script>

        <script>
        <!-- på noen sider ligger det statiske data -->
        navno.fgkode = 'XXXX';
        navnno.ytelse = 'YIT´;
        </script>

        <!-- FØR VAR DET GA HER, NÅ ER DET GTM -->
        <script>
      var dataLayer = dataLayer || [{
         securityLevel: navno.securityLevel || 0,
         fgKode: navno.fgkode,
         ytelse: navno.ytelse
       }];

    (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0], j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src= '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f); })(window,document,'script','dataLayer','GTM-PM9RP3');
        </script>

      </head>
      <body>
      <!-- Ikke her -->
      </body>
    </html>

Caïn venant de tuer son frère Abel, by Henry Vidal in Tuileries Garden in Paris, France. CC BY 2.0 Alex E. Proimo

Fjerne wicket sideversjon med Tag Manager

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

Wicket URLér er litt vanskelige å fjerne fordi sideversjoner har formen ?1, ?2, ?3 osv. Vi kan ikke bruke den innebygde parameter-fjerningen i Google Analytics fordi den forutsetter parametere i formen nøkkel=verdi.

Vi kan heller konfigurere et filter med regulære uttrykk, fordi vi må ivareta andre parametere og språket/syntaksen er ikke regulær.

En oversikt over prosessen for å implementere filtreringen i Tag Manager er som følger.

Utvilking og test:

Opprett en Custom JavaScript-variabel i GTM for filtrering.

Lag en ny trigger for sidene som trenger denne filtreringen.

Lag en ny GA tag som inkluderer triggeren

legg til triggeren på den originale slik at det ikke blir dobbelt med GA-tags. Triggingen må være MECE.

Preprod

Verifisere at løsningen fungerer.

Dokumentasjon

Produksjon:

Publiser ny versjon (Trykk publish)

Samme teknikken brukes på events:

Lag en click trigger
Opprett Universal Analytics event tag

Resultatet som ønskes er at følgende URLér:

https://tovare.com/tovare/gtm/pageversion.html?1
https://tovare.com/tovare/gtm/pageversion.html
https://tovare.com/tovare/gtm/pageversion.html?1&k=v
https://tovare.com/tovare/gtm/pageversion.html?2=&k=v
https://tovare.com/tovare/gtm/pageversion.html?3=&k=v&k=v2

Blir endret til:

https://tovare.com/tovare/gtm/pageversion.html
https://tovare.com/tovare/gtm/pageversion.html
https://tovare.com/tovare/gtm/pageversion.html?k=v
https://tovare.com/tovare/gtm/pageversion.html?k=v
https://tovare.com/tovare/gtm/pageversion.html?k=v&k=v2

#1. Utvikling og test

Opprett en Custom JavaScript-variabel i GTM for filtrering.

For testing fra kommandolinjen med nodejs:

/* wicketFilter.js */
var url = "https://tovare.com/tovare/gtm/pageversion.html?1"


exports.wicketFilter = function(url){
    var expr  = /\?[0-9]+\=?/,
        hasPageVersion = url.match(expr);
    var expr2  = /\?[0-9]+\=?\&/, 
        hasPageVersion2 = url.match(expr2);
    
    if(hasPageVersion2) {
        url = url.replace(hasPageVersion2[0],'?');
    }else if(hasPageVersion) {
        url = url.replace(hasPageVersion[0],'');
    }
    return url;
}

Jeg bruker Tape for test-drevet utvikling fordi internettene sa det var awesome.

Testscript for Tape:


/*
 * babel-node testWicketFilter.js 
 */

import test from 'tape';

var st = require('./wicketFilter.js');


// For each unit test you write,
// answer these questions:
test('Test filter', assert => {
  const input = [
    "https://tovare.com/tovare/gtm/pageversion.html?1",
    "https://tovare.com/tovare/gtm/pageversion.html",
    "https://tovare.com/tovare/gtm/pageversion.html?1&k=v",
    "https://tovare.com/tovare/gtm/pageversion.html?2=&k=v",
    "https://tovare.com/tovare/gtm/pageversion.html?3=&k=v&k=v2" ];
  const expected = [
    "https://tovare.com/tovare/gtm/pageversion.html",
    "https://tovare.com/tovare/gtm/pageversion.html",
    "https://tovare.com/tovare/gtm/pageversion.html?k=v",
    "https://tovare.com/tovare/gtm/pageversion.html?k=v",
    "https://tovare.com/tovare/gtm/pageversion.html?k=v&k=v2"
      ];

    input.forEach(function (value, i) {
        assert.equal(st.wicketFilter(value),expected[i],"Rewrite ")
    });

  assert.end();
});

Resultat av testing:

tovare@tovare:~/tovare/gtm$ babel-node testWicketFilter.js 
TAP version 13
# Test filter
ok 1 Rewrite 
ok 2 Rewrite 
ok 3 Rewrite 
ok 4 Rewrite 
ok 5 Rewrite 

1..5
# tests 5
# pass  5

# ok

Endring av det ferdig testede scriptet til GTM. Den største endringen er at {{Page Path}}-variabelen brukes. Denne variabelen er forhåndsdefinert som standard i GTM.

Den definerte variabelen kan også brukes for events.

Lag en ny trigger for sidene som trenger denne filtreringen

Lag en ny GA tag som inkluderer triggeren

Lag en ny tag ved å kopiere den eksisterende, deretter konfigurer med trigger og sett “page” med variabel.

Konfigurer gammelt tag til å ekskludere triggeren.

Du vil enkelt se i oversikten at det ikke er overlapp, ved at unntakene i hovedtaggen matches

#2. Preprod

Verifisere at løsningen fungerer.

Velg preview i GTM, gå til en passende URL og velg “pageview” og variables for å sjekke hva som har blitt satt:

Dette kan også verifiseres med GA Debug for Chrome i javascript console:

Til slutt kan den også verifiseres i realtime-display i GA og i rapporter.

Dokumentasjon

Fordi containeren er dokumentasjonen og endringsloggen gir endringene som er gjort, er det nyttig å skrive i notatfeltet til containeren i “twitter”-stil hva som er nytt på et veldig overordnet nivå.

#3. Produksjon

Trykk publish

Filtrering av URL i Analytics Events

Det er like gunstig å lage rene URLer i events fordi man gjerne er interessert i å fokusere på events produsert på en gitt side.

Lag en click trigger

Opprett Universal Analytics event tag

Legg merke til at page-feltet settes til JavaScript variablen som vi lagde tidligere.

Kilder til inspirasjon og fakta:

Luna Metrics - Strip Query parameters Google Analytics En fin gjennomgang av forskjellige teknikker.

JavaScript Scene - Why I use Tape instead of Mocha so should you Artikkel som forklarer hvorfor Tape er så fortreffelig til testing i JavaScript.

Developer Google - Pages Foretrukket metode å fjerne personopplysninger, rett fra kilden.

Google Tag Manager - Built-in variables Dokumenterer de innebyggede variablene.

Chrome store - Google Analytics Debugger

Test side tovare/gtm/pageversion.html Skru på javscript console og GA debugger i Chrome, refresh og trykk i vei.

google analytics

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

google analytics

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

javascript

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

javascript"

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

universal analytics

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

universal analytics

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

wicket

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

wicket

Tov Are Jacobsen — Sun, 04 Oct 2015 21:19:57 +0000

Åpne data - Stillinger fra NAV.no

Tov Are Jacobsen — Mon, 27 Apr 2015 18:09:29 +0000

Å skrape nav.no for informasjon om stillinger er ganske tungvindt. Det er to enkle måter å få alt gjennom åpne og publiserte grensesnitt.

RSS
Widget

For å gjøre et utvalg, gjør et enkelt søk på kategorien som er av interesse eller trykk søk på forsiden for å få alt.

Se nederst på siden for lenker til en RSS 2.0 feed og lenke til en side med Widget-versjonen. På widget siden får du en skreddersydd HTML-snutt for å legge inn stillingene på en vilkårlig side uten noen form for utvikling.

Du kan endre antall stillinger som vises med å endre tallet i rpp-parameteren fra 50 til f.eks. 2000 eller et annet tall. F.eks. 10 annonser er vist under.

Tips: For engelskspråklige stillinger er konvensjonen å bruke søkeordet english (https://tjenester.nav.no/stillinger/stillinger?q=english)

<div id="nav_stillinger" ></div>
<script type="text/javascript" src="https://tjenester.nav.no/stillinger/widget?sort=akt&rpp=10&p=0&rv=al"> </script>

I RSS ligger hele stillingsannonsen og metadata for stillingen i gdata-tagger for publiseringsdato, arbeidsgiver, industri og stillingsfunksjon. Utover dette er kodeverket på tjenesten standardisert, slik at det bør kunne danne et godt grunnlag for mange analysetyper.

Selve annonsen ligger inne i en CDATA blokk for at den skal være kompatibel med spesifikasjonen til RSS.

Skraping

Status

<script src="/tovare/js/d3.v3.min.js" charset="utf-8"></script>

    <div id="e1"> </div>

    <script>
    d3.json("https://tovare.com/api/stillinger", function(data) {
        console.log(data);
        mdiv = d3.select("#e1");
        mdiv.append("h2").text( "Stillinger i dag " + data.stillinger );
        mdiv.append("h2").text( "Annonser i dag " + data.annonser );
      mdiv.append("h2").text( "Nye " + data.nye );
    });
    </script>

Scrape server: https://github.com/tovare/nstillinger

arbeid

Tov Are Jacobsen — Mon, 23 Feb 2015 03:18:49 +0000

Arbeidsmarkedet i januar

Tov Are Jacobsen — Mon, 23 Feb 2015 03:18:49 +0000

Inspirert av NAVs fabelaktige publikasjon, Arbeid og Velferd, er dette et første forsøk på å koble data fra NAV med et kart.

Trykk eller pek på kartet for å se tall for fylket.

Kilde: NAV

Utgangspunktet er en svg fil fra wikipedia og en datatabell fra NAV. For å gjøre det lettere å populere fylkene med data ble SVG-filen endret slik at alle fylker var i grupper.

Fargene settes med en Colorbrewer skala, men valgte en lineær fargeovergang.

Lenker

Hovedtall om arbeidsmarkedet

Arbeid og velferd

SVG fra Wikipedia via Lovholm.net

http://d3js.org/

d3js

Tov Are Jacobsen — Mon, 23 Feb 2015 03:18:49 +0000

Visualiseringssøndag

Tov Are Jacobsen — Sun, 15 Feb 2015 20:26:23 +0000

Grafen under viser et adferdsmønster over 4 uker.

Trykk eller pek over for å se detaljer.

Dette er dynamisk generert SVG (Strukturert vektor grafikk) med datagrunnlag i en csv fil. Lagt inn som en iframe uten ramme.

Jeg konfigurerte webserveren slik at når den treffer URL’er med stien /tovare/, hentes det filer fra en en public_html katalog på en bruker fremfor å sende forespørselen til Ghost.

Lenker

http://d3js.org

http://colorbrewer2.org/

Hello New Technology Stack

Tov Are Jacobsen — Sat, 14 Feb 2015 18:36:06 +0000

My previos technology stack was getting a bit old, so I decided to change things up a bit.

My previous CMS was MeshCMS running on Tomcat/Java. Using the static page export, the files where served by Apache. In addition i had an Apache/Confluence/Tomcat/Java/PostreSQL stack for notetaking. All hosted on Eapps.com which has done a good job hosting a stable Centos 5 machine, keeping it secure and running.

Technology, the internet and common practices has evolved somewhat since Java became cool on the server side back in 1998, when I had my first Servlet writing experience deployed on the JRUN application server. A few months later with IBM Websphere. That’s 17 years ago. Thankfully technology evolves really slowly.

My new technology stack is hosted by DigitalOcean in europe. It’s the $10 plan with an additional $2 for basic backup services. The new stack is Ghost/node.js/Ubuntu ~~10.4 LTS~~ 16.04.01 in addition i use the excellent Cloud 9 IDE.

I’ve decided to discontinue using Confluence. Over the years since I first got an account in 2008, I’ve been using Evernote more and more and upgraded to premium a while back. For other uses Cloud9 gives me the functionality I want.

Links

https://www.digitalocean.com/

https://ghost.org/

http://nodejs.org

https://evernote.com

https://c9.io

https://sslmate.com

https://www.hotjar.com/r/r5a50cd

My primary tool for notetaking is still paper. I’ve used Moleskine for several years, but changed it up a bit last week by getting a couple of Conceptum notebooks from England. The nice thing about them is that they have a place to put my Mitsubishi Hi-Uni pencils from Japan.

technology

Tov Are Jacobsen — Sat, 14 Feb 2015 18:36:06 +0000

Create HTML imagemaps using Inkscape

Tov Are Jacobsen — Tue, 30 Jul 2013 14:00:00 +0000

How to create an image map using Inkscape and the ImageMap tool

Getting started

Fist prepare the image you would like to add an image map to.

Import the image into Inkscape using the Import command, linking the image rather than embedding it. Modify the page properties to match the size of the image, and the image properties to ensure it’s starts at position 0x0. (If you don’t your coordinates might not be perfectly aligned).

Add another layer for the lines, and make the layer with the image a bit transparent so that it’s easy to see the lines you’ve drawn.

Select the bezier tool, and check for straight lines so that you don’t accidentally create curves.

Proceed to draw your polygons and make sure that they are closed. It is very usefull to add meaningfull names to the polygons via properties to make it easier to add the links once the HTML Map has been created.

Save the file, and load it into inkscapemap , you should see something like this:

Save as HTML Map and add links etc, to suit your needs. Click below to see.

References

InkscapeMap

inkscape

Tov Are Jacobsen — Tue, 30 Jul 2013 14:00:00 +0000

svg

Tov Are Jacobsen — Tue, 30 Jul 2013 14:00:00 +0000

Guess the animal

Tov Are Jacobsen — Sat, 30 Aug 2008 14:00:00 +0000

This code implements a simple binary search for answers. The nodes all have questions, but the leaf-node has a suggestion for an answer.

The player is prompted to verify if this is correct, but if it’s not the player is requested for the right answer and a question to ask to tell the difference

Console version


/*
 *  Guess.java - main file.
 *
 */
import java.io.*;
import java.util.*;
class Node {
	Node yes = null;
	Node no = null;
	String desc = null;

	public Node(String desc) {
		this.desc = desc;
	}

}

class ConsoleIO {

	public static boolean YES = true;
	public static boolean NO = false;
	HashSet < String > positives = new HashSet < String > ();
	HashSet < String > negatives = new HashSet < String > ();


	static ConsoleIO io = null;
	private static BufferedReader br = null;

	private void populatePositives() {
		positives.add("YES");
		positives.add("Y");
		positives.add("YEAH");
	}

	private void populateNegatives() {
		negatives.add("NO");
		negatives.add("N");
		negatives.add("NOPE");
		negatives.add("FUCK");
	}

	private ConsoleIO() {
		br = new BufferedReader(new InputStreamReader(System. in ));
	}

	private static ConsoleIO checkInstance() {
		if (io == null) {
			io = new ConsoleIO();
			io.populateNegatives();
			io.populatePositives();
		}
		return io;
	}

	public static String get() {
		checkInstance();
		String r = "";
		try {
			r = br.readLine();
		} catch (IOException e) {
			System.err.println("Input error");
		}
		return r;
	}

	/**
	 * Get an input from the user, can be any string.
	 *
	 * @param prompt
	 * @return
	 */
	public static String getInput(String prompt) {
		System.out.print(prompt);
		System.out.flush();
		return ConsoleIO.get().trim();
	}

	/**
	 * Get a simple yes/no answer.
	 *
	 * @param prompt
	 * @return
	 */
	public static boolean getYesNo(String prompt) {
		String s = getInput(prompt).trim().toUpperCase();
		while (true) {
			if (io.positives.contains(s)) {
				return true;
			}
			if (io.negatives.contains(s)) {
				return false;
			}
			s = getInput(prompt).trim().toUpperCase();
		}
	}

}



/**
 *
 * @author tovare
 *
 */
public class Guess {

	Node head = null;
	Node current = null;

	void search() {
		current = head;
		// Traverse our yes/no questions until we hit a leaf node.
		while (current.no != null) {
			if (ConsoleIO.getYesNo(current.desc + "? ")) {
				current = current.yes;
			} else {
				current = current.no;
			}
		}
		if (ConsoleIO.getYesNo("Is it a " + current.desc + "? ")) {
			System.out.println("Yippee! I win! \n\n");
		} else {
			Node n = new Node(ConsoleIO.getInput("What animal is it? "));
			Node a = new Node(ConsoleIO.getInput("What seperates a " + n.desc + " from a " + current.desc + "? "));
			a.yes = n;
			a.no = current;
			head = a;
		}
	}

	public void play() {
		head = new Node("Dog");
		boolean inPlay = ConsoleIO.getYesNo("Animals, wanna play? ");
		while (inPlay) {
			search();
			inPlay = ConsoleIO.getYesNo("Wanna play again? ");
		}
	}


	/**
	 * @param args
	 */
	public static void main(String[] args) {
		Guess game = new Guess();
		game.play();
	}
}

Applet version

The applet version was written in 1997 and uses a state machine to keep track of the current state while responding to asynchronous events from the GUI.

/*
 * Requires JDK 1.1 or higher
 */
import java.awt.*;
import java.awt.event.*;
import java.applet.*;

class Node {
	Node yes;
	Node no;
	String text;
	Node(String t) {
		yes = null;
		no = null;
		text = t;
	}
}

public class GuessTheAnimal extends Applet implements ActionListener {
	private static final long serialVersionUID = 1L;
	final int GAMESTART_REQUEST = 0;
	final int COMPUTER_GUESSES = 1;
	final int COMPUTER_GUESSES_FEATURE = 2;
	final int ANIMAL_NAME_REQUEST = 3;
	final int NEW_FEATURE_REQUEST = 4;
	Node head;
	Node current;
	int state;
	TextArea output;
	TextField input;

	public GuessTheAnimal() {
		head = new Node("DOG");
		state = GAMESTART_REQUEST;
		setLayout(new BorderLayout());
		output = new TextArea("COMPUTER: Animals, wanna play?\n");
		input = new TextField();
		add(output, "Center");
		add(input, "South");
		input.addActionListener(this);
		state = GAMESTART_REQUEST;
	}

	void askQuestion() {
		if (current.no == null) {
			output.append("Is it a " + current.text + "?\n");
		} else {
			output.append(current.text + "?\n");
		}
	}

	public void respond(String userText) {
		switch (state) {
			case GAMESTART_REQUEST:
				if (userText.startsWith("Y")) {
					current = head;
					askQuestion();
					state = COMPUTER_GUESSES;
				}
				break;
			case COMPUTER_GUESSES:
				if (current.no == null) {
					if (userText.startsWith("YES")) {
						output.append("Yippee, I win!\n");
						output.append("Wanna play again?\n");
						state = GAMESTART_REQUEST;
					} else {
						output.append("What animal is it?\n");
						state = ANIMAL_NAME_REQUEST;
					}
				} else {
					if (userText.startsWith("YES")) {
						current = current.yes;
						askQuestion();
					} else if (userText.startsWith("NO")) {
						current = current.no;
						askQuestion();
					} else {
						output.append("Answer Yes or No please.\n");
					}
				}
				break;
			case ANIMAL_NAME_REQUEST:
				current.yes = new Node(userText);
				output.append("What separates a " + userText + " from a " + current.text + "?\n");
				state = NEW_FEATURE_REQUEST;
				break;
			case NEW_FEATURE_REQUEST:
				current.no = new Node(current.text);
				current.text = userText;
				state = GAMESTART_REQUEST;
				output.append("Wanna play again?\n");
				break;
		}
	}

	public void actionPerformed(ActionEvent e) {
		output.append(input.getText() + "\n");
		respond(input.getText().toUpperCase());
		input.setText("");
	}
}

2008

Tov Are Jacobsen — Mon, 18 Aug 2008 14:00:00 +0000

16. Mai 2008

Got married

personal

Tov Are Jacobsen — Mon, 18 Aug 2008 14:00:00 +0000

Soundex in the Io Language

Tov Are Jacobsen — Wed, 16 Apr 2003 14:00:00 +0000

Soundex [16.04.03] (updated 20.01.05)

This code is my first stab at doing something in the Io Language (www.iolanguage.com)[http://www.iolanguage.com/about/] which is a small footprint scripting language. The Soundex algorithm for database lookup applications and genealogy research. It finds certain classes of similar-sounding names. Not implemented is Name prefixes and zero-padding.

Implementation

#------------------------------------------------------------------------------
#
# soundex.io -- generate soundex encodings.
#
# 1. Keep the first letter.
#
# 2. Drop all the vowels A E I O U W Y H.
#
# 3. Encode the remaining 3 letters into:
#
#      B P F V            1
#      C S K G J Q X Z    2
#      D T                3
#      L                  4
#      M N                5
#      R                  6
#
# 4. Double letters are treated as one.
#
# 5. Double letters with same encoding is treated as one.
#
#
# Tov Are Jacobsen April, 2003 <mail@tovare.com>
# 
# Language: http://www.iolanguage.com
# Version:  2005-01-19 (Jon Kleiser)
#------------------------------------------------------------------------------

Soundex := Object clone do(
	encmap := Map clone do(
		atPut("B", 1)
		atPut("P", 1)
		atPut("F", 1)
		atPut("V", 1)
		atPut("C", 2)
		atPut("S", 2)
		atPut("K", 2)
		atPut("G", 2)
		atPut("J", 2)
		atPut("Q", 2)
		atPut("X", 2)
		atPut("Z", 2)
		atPut("D", 3)
		atPut("T", 3)
		atPut("L", 4)
		atPut("M", 5)
		atPut("N", 5)
		atPut("R", 6)
	)
)

#--------------------------------------------
#
# Converts a string into soundex encoding.
# 
# Arguments:
#    name     String containing a surname
#
#--------------------------------------------

Soundex encode := method(name,
	name = name upper
	ename := ""
	name foreach(i, s,
		if (i == 0) then (
			ename = ename append(s asCharacter)
		) else (
			# Drop all unmapped characters
			code := encmap at(s asCharacter)
			if (code != Nil,
				if (code asString != ename at(-1) asCharacter,
					ename = ename append(code)
					if (ename length == 4, return ename)
				)
			)
		)
	)
	return ename
)

Test code

#
#
# testSoundex.io - Test the Soundex.io implementation.
#
# Tov Are Jacobsen 2003 <mail@tovare.com>
#
#

doFile(launchPath appendPath("soundex.io"))

"The soundex coding is used to encode surnames, so that similar" linePrint
"sounding names has identical codes." linePrint

surnames := List clone do(
	add("Jensen")
	add("Jonassen")
	add("Jonasen")
	add("Jacobsen")
	add("Jakobsen")
	add("Fischer")
	add("Fisher")
	add("Gustavsen")
	add("Gustafsson")
	add("Gustafsen")
	add("Handeland")
)

surnames foreach(j, name,
	write(Soundex encode(name)," (",name, ")\n")
)

References

The Soundex Indexing System http://www.archives.gov/publications/general-info-leaflets/55.html NARA - U.S. National Archives & Records Administration

Tov Are Jacobsen

privacy

Privacy policy

Cloudflare cookies

Google Analytics cookies

Hotjar cookies

Local storage and indexeddb

Subproviders

Legal owner

Tags

Tov Are Jacobsen

2021s

daily

Days 2021

todo

2020s

How to make a simple calculator with HybridsJS

Live example

Setting up the project

Visual design of the Calculator

The state machine.

Implementing events and states.

The final build

Conclusion

Useful links

Hybrids

web components

hosting

Personal computing with a serverless and multi-cloud infrastructure

Infrastructure and hosting:

Technology:

Tools

serverless

Passive linking to social media

Articles

Libraries

Posts

Call

mobile

statistics

Voice calls in decline

Voice callso

NAV

R

RStudio

The Norwegian unemployment numbers are available in CSV-format.

CSV

Workforce data is available from Statistics Norway.

Kilder

unemployment

data sciene

gplot2

R Blogdown with RStudio sample page

Including Plots

Blogdown

Drawing graphs with ggplot2

dplyr

Data wrangling

Categories

hls

mp4

video

video

Video upload & processing MVP concept design

Konsept 1

Konsept 2 - No GUI

Referanser:

Videre arbeid

KeyCDN test

Amazon Cloudfront (Pull)

Oppsummering

Konklusjon

Noen Referanser

Spesielle betraktninger knyttet til Sveits som utenfor EU og EØS:

Spesielle betraktninger knyttet til virkemåten til et CDN og land uten tilfredstillende beskyttelse.

Betraktninger rundt avtaleverk.

Annet

Gode tjenster for å sende video på e-post

WeTransfer

Google Drive