9 février 2017

iOS10 - Webkit (Safari) allow zoom everywhere by ignoring max-scale setting #accessibility @webkit @grorgwork

Good news for accessibility

To ensure that user will not be able to zoom on a webpage, the solution was to set meta-tag max-scale to "no" or 0:

In a post, last week, Webkit announce a list of new interaction in iOS 10.
One of them : these settings maximum-scale and user-scalable will be ignore.

Zooming Everywhere
Safari on iOS 10 allows the user to pinch zoom on every page. As a developer, you should be aware of this, and make sure your content works well when zoomed.

Bad day for bad dev.

We think that lot of website will have a problem with this.

Cause if an field (input/select) have a font-size less than 16px, Safari will automatically zoom to this field when user focus to this!

Safari zoom to a field with a tiny font-size
Source : hallofhavoc.com




10 février 2016

Chart Color gradient

chart
Source code

14 mars 2014

LICEcap simple gif screen capture

LICEcap can capture an area of your desktop and save it directly to .GIF (for viewing in web browsers, etc) or .LCF (see below).


LICEcap is an intuitive but flexible application (for Windows and now OSX), that is designed to be lightweight and function with high performance.

LICEcap is easy to use: view a demo (output is here).

In addition to .GIF, LICEcap supports its own native lossless .LCF file format, which allows for higher compression ratios than .GIF, higher quality (more than 256 colors per frame), and more accurate timestamping. If you record to .LCF, you can play back the .LCF files within REAPER (and/or use it to convert to .gif or another video format).

LICEcap is GPL free software, each download package includes the source.

Features and options:

  • Record directly to .GIF or .LCF.
  • Move the screen capture frame while recording.
  • Pause and restart recording, with optional inserted text messages.
  • Global hotkey (shift+space) to toggle pausing while recording
  • Adjustable maximum recording framerate, to allow throttling CPU usage.
  • Basic title frame, with or without text.
  • Record mouse button presses.
  • Display elapsed time in the recording.

Requirements:

  • For Windows: Windows XP/Vista/7 (might work with reduced functionality on other versions)
  • For OSX: OS 10.4+ (10.6+ for full feature support), PPC or Intel (note: OS X support is still preliminary, some features are not supported)
  • A reasonably fast CPU
  • A healthy amount of RAM (1GB+, especially when encoding to LCF)

23 janvier 2014

Clock icon animated #css3

image fallback
  
.clock-icon {
  content: '';
  width: 2em;
  height: 2em;
  border: .5em solid black;
  display: inline-block;
  border-radius: 2em;
  position: relative;
}

// hours
.clock-icon:after {
  content: '';
  position: absolute;
  top: .75em;
  left: 1em;
  width: 1em;
  height: .5em;
  background: black;
  display: inline-block;
  border-radius: 1em;
  transform-origin: 0 0.25em;
  animation: roll 12s infinite linear;
  z-index: 2;
  box-shadow: 0 0 .1em black;
}

// minutes
.clock-icon:before {
  content: '';
  position: absolute;
  top: .75em;
  left: 1em;
  width: .8em;
  height: .5em;
  background: black;
  display: inline-block;
  border-radius: 1em;
  transform-origin: 0 0.25em;
  animation: roll 1s infinite linear;
  z-index: 2;
  box-shadow: 0 0 .1em black;
}
@keyframes roll {   
  0% {transform: rotate(0);} 
  100% {transform: rotate(360deg);}
}