pixelthing

/* animation mixins */
@import "compass/css3/shared"
@mixin animation ($animation_name, $duration: 500ms, $fill_mode: forwards, $iteration_count: 1, $delay: 0,  $direction: normal, $timing_function: ease)
  +experimental(animation-name, $animation_name)
  +experimental(animation-duration, $duration)
  @if $fill_mode != none
    +experimental(animation-fill-mode, $fill_mode)
  @if $iteration_count != 1
    +experimental(animation-iteration-count, $iteration_count)
  @if $delay != 0

pixelthing

/* mixin to extend the us select box and allow colour/size tweaks */
@mixin us-form-select($base-color: $select-base-color, $text-color: inherit, $bg-color: white, $height: 2.4em, $padding: 0.3em 0.6em, $hover-color: $select-hover-color, $active-color: $select-active-color)
  @extend .us-form-select
  height: $height
  padding: $padding
  border-color: $base-color
  background-color: $bg-color
  @if $text-color != inherit
    color: $text-color
    +transition(border-color 200ms,color 200ms)

pixelthing

Using local storage and webworkers to speed up the UX for the homepage ajax requests, and possibly local caching of search results. 
- Why use local storage? For subsequent page loads, it makes the homepage load feel instant if the ajax calls don't need to happen (but are instead deferred)
- Why use webworkers? It offloads the ajax calls to another thread (minor win), plus the intensive work of diffing cached and new json data to see if it's been updated is offloaded and doesn't slow the main thread (major win - I guess).

** Angular controller (eg recommendedController) 
- wants a json feed of items.
- calls getcacheitems() on a promise
- getcacheitems() returns error or data
- does angular stuff to display data

pixelthing

// Screen orientation:

if (typeof screen.orientation !== 'undefined') {
    data.orientation = screen.orientation.angle;
} else if (typeof window.orientation !== 'undefined') {
    data.orientation = window.orientation;
}
 
// screen width/height

pixelthing

// CM: forked to address key size (not just value size), swapping between KB and MB, ordering by size and logging total localstorage size.
// based on answer to question
// http://stackoverflow.com/questions/4391575/how-to-find-the-size-of-localstorage
(function showLocalStorageSize() {

  threshold = 256; // the point where we stop displaying KB and start with MB
  
  function stringSizeBytes(str) {
    return str.length * 2;
  }

pixelthing

╔══════════════╦═══════════╦═══════════╦═══════════════╦══════╗
║   Portrait   ║   Window  ║ Document  ║  UI Chrome    ║      ║
╠══════════════╬═════╦═════╬═════╦═════╬════╦════╦═════╣100vh ║
║              ║  X  ║  Y  ║  X  ║  Y  ║top ║bot ║ all ║      ║
╠══════════════╬═════╬═════╬═════╬═════╬════╬════╬═════╬══════╣
║ 8 full UI    ║375px║667px║375px║553px║70px║45px║115px║-75px ║
║ 8 scrolled   ║375px║667px║375px║627px║40px║0px ║40px ║ yes  ║
╠══════════════╬═════╬═════╬═════╬═════╬════╬════╬═════╬══════╣
║ 8+ full UI   ║414px║736px║414px║621px║70px║45px║115px║-75px ║
║ 8+ scrolled  ║414px║736px║414px║696px║40px║0px ║40px ║ yes  ║

pixelthing

╔══════════════╦═══════════╦═══════════╦══════════════╦═════╗
║  Landscape   ║   Window  ║ Document  ║   UI Chrome  ║     ║
╠══════════════╬═════╦═════╬═════╦═════╬════╦════╦════╣100vh║
║              ║  X  ║  Y  ║  X  ║  Y  ║top ║bot ║all ║     ║
╠══════════════╬═════╬═════╬═════╬═════╬════╬════╬════╬═════╣
║ 8 full UI    ║667px║375px║667px║325px║50px║0px ║50px║-50px║
║ 8 scrolled   ║667px║375px║667px║375px║0px ║0px ║0px ║ yes ║
╠══════════════╬═════╬═════╬═════╬═════╬════╬════╬════╬═════╣
║ 8+ full UI   ║736px║414px║736px║364px║50px║0px ║50px║-50px║
║ 8+ scrolled  ║736px║414px║736px║414px║0px ║0px ║0px ║ yes ║

pixelthing

WORK IN PROGRESS!! OPEN TO STENDAHLS EMPLOYEES TO CONTRIBUTE TO.

Stendahls policy on ethics and analytics.

Stendahls commits to continuously implement and review an ethical analytics strategy, not aiming for legal compliance, but aiming for an ethical, open and trusting enviroment for our employees, clients and the end-consumers involved in any of our services.

Analytics can be a powerful positive force in understanding and improving customer experience, as well checking misinterpretations and privilege about users and their interaction with our services. It can also provide our clients with a way of understanding and improving the value (both monetary and experiential) of the services Stendahls provide them.

Analytics usage can however also undermine the user's privacy and therefore contribute to an industry-wide breakdown in consumer trust. Stendahls takes responsibility in trying to maximise the positive benefits to end-consumers, without neglecting (or exacerbating) the impact of the negative.

pixelthing

/*
    Making codepen.io a little more iPad friendly. @pixelthing

    First - I hope this doesn't come across as being a bit of an dick. I massively appreciate
    CodePen and know the huge amount of pressure that comes from every direction in a project this
    big, so totally understand that not every user experience can be addressed with the time and 
    resources available. Think of this as a pull request for your consideration. 
    *Do not feel the need to pity-implement anything or let me down gently. It's your site, not mine.*

    This is a shim to add to the CodePen editor styles (eg, greasemonkey style).

pixelthing

READY RASPBERRY PI DASHBOARD

You will need

• Monitor with DVI (or use a diff cable with outher connections) and ability to rotate 90deg. A 24" 16:10 Dell widescreen is perfect. A Dell 16:9 27" is even better.
• *Raspberry Pi starter kit
  • Raspberry Pi 3b+ (a Pi 4 of 2GB or more is even better).
  • EU/UK power supply (just a 5W microUSB - but a Pi4 needs higher wattage USB-C power)
  • Raspberry Pi case (clear plastic so far)
  • Rasbarry Pi NooB Linux microSD card
• Amazon Basics 0.9m/3ft HDMI to DVI adapter Cable (for a Pi4, you'll need a much rarer micro-HDMI to DVI)