Skip to content

Instantly share code, notes, and snippets.

Avatar

Martin Auswöger ausi

View GitHub Profile
@ausi
ausi / dabblet.css
Created Apr 14, 2019
SVG cursors experiments
View dabblet.css
/**
* SVG cursors experiments
*/
html {
height: 100vh;
animation: test 0.01s infinite;
--image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>');
@ausi
ausi / dabblet.css
Last active Apr 14, 2019
SVG cursors experiments
View dabblet.css
/**
* SVG cursors experiments
*/
html {
height: 100vh;
cursor: busy;
cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed;
@ausi
ausi / dabblet.css
Created Apr 14, 2019
SVG cursors experiments
View dabblet.css
/**
* SVG cursors experiments
*/
html {
height: 100vh;
cursor: busy;
cursor: -webkit-image-set(url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" height="200" width="200" viewBox="0 0 100 100">\
<style>@keyframes dance{to { transform: rotate(-10deg);}</style>\
<text y="1em" style="font-size: 90px; animation: dance .5s infinite alternate">🦄</text></svg>') 2x), not-allowed;
@ausi
ausi / number_to_string.php
Created Oct 11, 2018
Convert number/integer/float into string without exponential notation
View number_to_string.php
<?php
declare(strict_types=1);
function numberToString($number, $precision = null)
{
if (is_int($number)) {
return (string) $number;
}
@ausi
ausi / draft.md
Last active Jun 10, 2017
Draft for a Container Query PostCSS Plugin
View draft.md

Draft for a Container Query PostCSS Plugin

With @create-container <sizes>; you can define that a specific selector acts as a main container on your page (e.g. sidebar, content, header). As <sizes> you set the size of this container as it will be in the rendered page, the syntax is the same as for the sizes attribute for images.

With @container (<query>) {} you can query against the size of the containers instead of the viewport. These queries will be translated to media queries with the container classes added.

Pros

  • Doesn’t require a JavaScript runtime
@ausi
ausi / keybase.md
Created Feb 27, 2016
Keybase proof
View keybase.md

Keybase proof

I hereby claim:

  • I am ausi on github.
  • I am ausi (https://keybase.io/ausi) on keybase.
  • I have a public key whose fingerprint is 5F6E EA2D FE2A 5606 A6E7 5974 CB1E 3861 1DB7 EA43

To claim this, I am signing this object:

@ausi
ausi / index.html
Created Jan 10, 2016
Quick performance test for cq-prolyfill
View index.html
<!doctype html>
<meta charset="utf-8">
<body>
<script>
(function(){
testElementCount(1, function() {
testElementCount(10, function() {
testElementCount(100, function() {
testElementCount(1000, function() {
You can’t perform that action at this time.