Skip to content

Instantly share code, notes, and snippets.

@fabiosantoscode
fabiosantoscode / readme.md
Last active November 6, 2018 09:44
A new, no-javascript, accessible and performant way to implement lazy loading of images on the web

img[lazy]

This is a proposal to extend HTML to provide a new way to implement lazy-loading images on the web.

Motivation

The ever-growing mass of mobile devices, with tiny screens and limited processing power, are unable to access the web at decent speeds and reasonable prices. Old browsers die hard, and it gets harder and harder to cater to their every need. It is very, very hard, as a web developer, to cater to both mobile browsers and ancient browsers, especially when it comes to those problems which cannot ever have a permanent, one-size-fix-all solution: sticky headers, footers that don't float awkwardly when there's not enough content on the page, and lazyly loaded images. Sticky headers are getting their permanent, one-size-fix-all solution through the position:sticky proposal. Footers are slowly being replaced with taller footers, and infinite scroll, which is a growing trend, makes them disappear from designers' canvases. A problem that's not truly solved is lazy-loaded images.

Lazy-loadin

@fabiosantoscode
fabiosantoscode / gist:1cc89f451e60440653e0
Last active August 29, 2015 14:14
A simple JSBin-ish clone for debugging things in tiny or low-performance devices
Copy and paste this URL to your URL bar:
data:text/html,<meta%20charset=utf-8><main><script></script><iframe%20id=iframe></iframe><hr><pre%20id=pad%20onkeyup=update()%20contenteditable></pre><script>function%20update()%20{iframe.src="data:text/html,"+pad.textContent;location.hash=pad.textContent};if(location.hash){pad.textContent=(location.hash+'').replace("%23","")}update();pad.focus();</script><style>*{box-sizing:border-box}%23pad{background:%23333;color:white;padding:2em}iframe%20{%20width:%20100%;%20}@media%20screen%20and%20(min-width:1000px){iframe,pre{width:50%;float:right;margin:0;height:100%}hr{display:none}}</style>#<h1>Hello world!</h1>
To share this, use this HTML:
<a href='data:text/html,&lt;meta%20charset=utf-8&gt;&lt;main&gt;&lt;script&gt;&lt;/script&gt;&lt;iframe%20id=iframe&gt;&lt;/iframe&gt;&lt;hr&gt;&lt;pre%20id=pad%20onkeyup=update()%20contenteditable&gt;&lt;/pre&gt;&lt;script&gt;function%20update()%20{iframe.src="data:text/html,"+pad.textContent;location.hash=pad.textContent};if(location.
@fabiosantoscode
fabiosantoscode / 02atuatia
Last active August 29, 2015 14:11
Execute something when I has VPN
#!/usr/bin/env python
# 1. look for the tokens in upper case and replace them with your stuff
# 2. drop this in /etc/NetworkManager/dispatcher.d/02atuatia
import sys
import os
eligible_connections = ['SOME VPN NAME', 'ANOTHER VPN NAME']

if you want to log the call parameters for function xyz, add this is the first line of xyz:

function xyz(p1, p2) {
    debugFunctionCall('xyz', arguments);
    ...
}

then if you call

@fabiosantoscode
fabiosantoscode / gist:ee887f407aeb376a6674
Created November 30, 2014 20:07
Error installing vagrant. Y U trying to uninstall?
$ sudo vagrant plugin install vagrant-triggers
Installing the 'vagrant-triggers' plugin. This can take a few minutes...
Installed the plugin 'vagrant-triggers (0.4.3)'!
Uninstalling the 'vagrant-triggers' plugin...
Uninstalling the 'vagrant-triggers' plugin...
Uninstalling the 'vagrant-triggers' plugin...
/usr/lib/ruby/2.1.0/rubygems/uninstaller.rb:118:in `uninstall': vagrant-triggers is not installed in GEM_HOME, try: (Gem::InstallError)
gem uninstall -i /home/fabio/.vagrant.d/gems vagrant-triggers
from /usr/share/vagrant/plugins/commands/plugin/action/prune_gems.rb:148:in `block (2 levels) in call'
from /usr/lib/ruby/2.1.0/set.rb:263:in `each_key'
@fabiosantoscode
fabiosantoscode / test-deep.py
Created November 20, 2014 17:45
Non-threadsafe Dynamic Scoping in python
#encoding=utf-8
def env(name):
return stacks_of_names[name][-1]
stacks_of_names = {}
# comment the below line?
__builtins__.env = env
@fabiosantoscode
fabiosantoscode / gist:bcfe7165ca6dd97ba0bf
Last active December 9, 2023 19:46
Reverse tunnel. Connect to a public host somewhere and have it redirect all connections to your machine behind a NAT or firewall
# This enables a publicly available server to forward connections to your computer behind a NAT.
# So if you access http://xx.xx.xx.xx:8080/ on your browser, traffic is redirected to your machine behind a NAT.
# on your local host, type:
ssh -R xx.xx.xx.xx:8888:localhost:80 root@xx.xx.xx.xx
# now wait for your shell, and type:
socat TCP-LISTEN:8080,FORK TCP:127.0.0.1:8888
# This command outputs nothing, just keep it running. While you don't ^C, your tunnel is up and running!
@fabiosantoscode
fabiosantoscode / android-stock-browser-logcat
Created September 2, 2014 13:56
Reading logs from Android Browser.
#!/bin/sh
# only tested these greps in Android 2.x. If you find anything else
adb logcat | grep "browser" | grep Console | sed "s/.\\+Console: //g"

Sample service script for debianoids

Look at LSB init scripts for more information.

Usage

Copy to /etc/init.d:

# replace "$YOUR_SERVICE_NAME" with your service's name (whenever it's not enough obvious)
@fabiosantoscode
fabiosantoscode / ini2json.sed
Created November 26, 2013 22:10
ini to JSON converter written in SED
# whitespace trim
s/\s\+=/=/
s/^\s+//
s/=\(\s\+\)\?/=/
# escaping quotes
s/"/\\"/g
# split by the equal sign
s/\(.*\?\)=\(.\+\)/"\1": "\2",/