Skip to content

Instantly share code, notes, and snippets.

View FrancescoK's full-sized avatar

Francesco Kirchhoff FrancescoK

View GitHub Profile
@kyrylo
kyrylo / index.html
Last active November 15, 2024 12:50
Got inspired by the "signup peekaboos" on Hey and Basecamp, and I love the concept! https://x.com/kyrylosilin/status/1856648149038686626
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Signup peekaboo 👻</title>
<script type="module">
import { Application, Controller } from "https://cdn.jsdelivr.net/npm/@hotwired/[email protected]/+esm";
@kyrylo
kyrylo / colorized_logger.rb
Last active November 20, 2025 17:49
Nice colorized logs for Rails apps! With this initializer, you can instantly colorize your Rails development logs. Just copy and paste the code, and it’ll work. https://x.com/kyrylosilin/status/1852308566201237815
# frozen_string_literal: true
# config/initializers/colorized_logger.rb
# This initializer adds color to the Rails logger output. It's a nice way to
# visually distinguish log levels.
module ColorizedLogger
COLOR_CODES = {
debug: "\e[36m", # Cyan
info: "\e[32m", # Green
warn: "\e[33m", # Yellow
@paulirish
paulirish / bling.js
Last active September 13, 2025 12:13
bling dot js
/* bling.js */
window.$ = document.querySelector.bind(document);
window.$$ = document.querySelectorAll.bind(document);
Node.prototype.on = window.on = function(name, fn) { this.addEventListener(name, fn); };
NodeList.prototype.__proto__ = Array.prototype;
NodeList.prototype.on = function(name, fn) { this.forEach((elem) => elem.on(name, fn)); };
# For SCSS-Lint v0.31.0
linters:
BangFormat:
enabled: true
space_before_bang: true
space_after_bang: false
BorderZero:
@alicebartlett
alicebartlett / Hiring-links.md
Last active November 26, 2018 03:41
A while ago I asked twitter for resources on hiring, here are some links:

Screencapture and animated gifs

I say "animated gif" but in reality I think it's irresponsible to be serving "real" GIF files to people now. You should be serving gfy's, gifv's, webm, mp4s, whatever. They're a fraction of the filesize making it easier for you to deliver high fidelity, full color animation very quickly, especially on bad mobile connections. (But I suppose if you're just doing this for small audiences (like bug reporting), then LICEcap is a good solution).

Capturing (Easy)

  1. Launch quicktime player
  2. do Screen recording

screen shot 2014-10-22 at 11 16 23 am

@frontendbeast
frontendbeast / sm-annotated.html
Last active June 25, 2020 13:57 — forked from hdragomir/sm-annotated.html
The deferred font loading logic for Smashing Magazine, updated to include IE8 support. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);
@staltz
staltz / introrx.md
Last active November 19, 2025 07:55
The introduction to Reactive Programming you've been missing
@hdragomir
hdragomir / sm-annotated.html
Last active February 2, 2025 02:22
The deferred font loading logic for Smashing Magazine. http://www.smashingmagazine.com/
<script type="text/javascript">
(function () {
"use strict";
// once cached, the css file is stored on the client forever unless
// the URL below is changed. Any change will invalidate the cache
var css_href = './index_files/web-fonts.css';
// a simple event handler wrapper
function on(el, ev, callback) {
if (el.addEventListener) {
el.addEventListener(ev, callback, false);