Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

View guilhermesimoes's full-sized avatar
😎

Guilherme Simoes guilhermesimoes

😎
73 followers · 46 following
View GitHub Profile
@guilhermesimoes
guilhermesimoes / line_count_benchmark.rb
Last active September 11, 2023 09:36
Ruby Benchmark: Counting the number of lines of a file
# gem install benchmark-ips
require "benchmark/ips"
path = "lib/rubycritic/cli/options.rb"
Benchmark.ips do |x|
x.report("read + each_line") { File.read(path).each_line.count }
x.report("open + each_line") { File.open(path, "r").each_line.count }
@guilhermesimoes
guilhermesimoes / README.md
Last active September 10, 2023 13:12
YouTube's new morphing play/pause SVG icon

As soon as I saw the new YouTube Player and its new morphing play/pause button, I wanted to understand how it was made and replicate it myself.

From my analysis it looks like YouTube is using [SMIL animations][1]. I could not get those animations to work on browsers other than Chrome and it appears [that they are deprecated and will be removed][2]. I settled for the following technique:

  1. Define the icon path elements inside a defs element so that they are not drawn.

  2. Draw one icon by defining a use element whose xlink:href attribute points to one of the paths defined in the previous step. Simply [changing this attribute to point to the other icon is enough to swap them out][3], but this switch is not animated. To do that,

  3. Replace the use with the actual path when the page is loaded.

@guilhermesimoes
guilhermesimoes / 2serv.py
Created March 8, 2023 17:20 — forked from phrawzty/2serv.py
simple python http server to dump request headers
#!/usr/bin/env python2
import SimpleHTTPServer
import SocketServer
import logging
PORT = 8000
class GetHandler(SimpleHTTPServer.SimpleHTTPRequestHandler):
@guilhermesimoes
guilhermesimoes / index.html
Last active September 5, 2022 21:04
D3.js: Animating Stacked-to-Grouped Bars
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stacked-chart-container {
position: relative;
}
@guilhermesimoes
guilhermesimoes / .block
Last active September 2, 2022 05:21 — forked from mbostock/.block
D3.js: Automatic text sizing using em units
height: 760
license: gpl-3.0
@guilhermesimoes
guilhermesimoes / download.sh
Created June 7, 2020 22:26 — forked from jmurphyau/download.sh
Download HLS Stream with FFmpeg
#this
ffmpeg -loglevel debug -f hls -referer 'https://10play.com.au/live' -user_agent 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/82.0.4050.0 Safari/537.36' -f hls -i "https://manifest.prod.boltdns.net/manifest/v1/hls/v4/aes128/2199827728001/6bd7fe89-1f2f-42d0-b7a5-c676791a0d83/10s/master.m3u8?fastly_token=NWUzZDliOGZfNTJhZjJhN2IxMzQ5OTdjNGVkYmEzODkwNjYwZTYyMWY2ZmY1YjNmNGJkNWM3NjdiNDFiZmViNjczNzMwMmJlYQ%3D%3D" -c copy project5.mp4
# or this
ffmpeg -loglevel debug -f hls -referer 'https://10play.com.au/live' -user_agent 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/82.0.4050.0 Safari/537.36' -f hls -i "https://manifest.prod.boltdns.net/manifest/v1/hls/v4/aes128/2199827728001/6bd7fe89-1f2f-42d0-b7a5-c676791a0d83/10s/master.m3u8?fastly_token=NWUzZDliOGZfNTJhZjJhN2IxMzQ5OTdjNGVkYmEzODkwNjYwZTYyMWY2ZmY1YjNmNGJkNWM3NjdiNDFiZmViNjczNzMwMmJlYQ%3D%3D" -c copy -bsf:a aac_adtstoasc project3.mp4
@guilhermesimoes
guilhermesimoes / README.md
Last active April 12, 2020 16:22
Animated NBC Peacock Logo

My attempt at animating NBC's peacock showing-off.

If you're interested in NBC's past, check out the history of NBC's logo and chime.

@guilhermesimoes
guilhermesimoes / README.md
Last active April 6, 2020 23:41
D3.js: Animating bars "going down"

One confusing aspect of animating bars (and working with SVG in general) is that the coordinate system origin is at the top-left corner, which means that y increases downwards.

One would expect that to animate a bar diminishing in size ("going down") changing the height attribute would be all that's needed. However that's not true. This is a visual explanation of why it's necessary to animate both y and height attributes.

Another solution would be to surround the bar with a clipPath element and then transition the bar down. This way, everything on the inside of the clipping area is allowed to show through but everything on the outside is masked out.

This other approach would only work for a simple bar chart though. For a more complex, animated stacked chart, animating both y and height attributes is the only solution.

@guilhermesimoes
guilhermesimoes / .block
Last active April 6, 2020 01:01
D3.js: Encoding values as circles
license: gpl-3.0
@guilhermesimoes
guilhermesimoes / README.md
Last active April 5, 2020 16:55
D3.js: Animating between scales

The purpose of this gist is two-fold:

  1. Demonstrate how to animate between scales;

  2. Show how data visualization depends on the chosen scale.

    For example, we can see how some data clusters using the power scale. The datums 1 and 10 are rendered on the same spot. If we had a lot of these points close to each other and performance was a concern, filtering out some of these points could prove valuable.