Skip to content

Instantly share code, notes, and snippets.

Avatar
😎

Guilherme Simoes guilhermesimoes

😎
View GitHub Profile
@guilhermesimoes
guilhermesimoes / authentication.md
Last active Oct 15, 2016
How authentication should work (in my mind)
View authentication.md
Page / User State Logged Out Logged In
/public-page Go to /public-page Go to /public-page
/page-requiring-auth
  1. Redirect to /login
  2. After successful login redirect to /page-requiring-auth
Go to /page-requiring-auth
/login
  1. Go to /login
  2. After successful login redirect to /
Redirect to /
/logout Redirect to /
  1. Log out the user
  2. Redirect to /
@guilhermesimoes
guilhermesimoes / detect-private-browsing.js
Created Dec 12, 2015 — forked from cou929/detect-private-browsing.js
Detect private browsing mode (InPrivate Browsing or Incognito).
View detect-private-browsing.js
function retry(isDone, next) {
var current_trial = 0, max_retry = 50, interval = 10, is_timeout = false;
var id = window.setInterval(
function() {
if (isDone()) {
window.clearInterval(id);
next(is_timeout);
}
if (current_trial++ > max_retry) {
window.clearInterval(id);
@guilhermesimoes
guilhermesimoes / README.md
Last active Jul 27, 2021
YouTube's new morphing play/pause SVG icon
View README.md

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 definining 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 / README.md
Last active Oct 18, 2015
JScript: Find small album covers
View README.md

JScript to find album covers that measure less than 1000x1000 px. Perfect for those who like to manage their large music libraries.

@guilhermesimoes
guilhermesimoes / README.md
Last active Apr 5, 2020
D3.js: Animating between scales
View README.md

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.

@guilhermesimoes
guilhermesimoes / README.md
Last active Mar 27, 2016 — forked from anonymous/gist:3267597
JScript: Find broken iTunes tracks
View README.md

JScript to find broken tracks that iTunes can no longer find. Perfect for those who like to manage their large music libraries.

@guilhermesimoes
guilhermesimoes / README.md
Last active Apr 6, 2020
D3.js: Animating bars "going down"
View README.md

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 / airbus_data.tsv
Last active Sep 26, 2019 — forked from atmccann/airbus_data.tsv
D3.js: Synchronously animating multiple paths in a multi-series line chart
View airbus_data.tsv
date Airbus Boeing
2000-07-31 0 0
2000-08-31 -0.884 9.8912
2000-09-29 9.6685 32.1383
2000-10-31 32.5967 38.9245
2000-11-30 33.1492 41.4853
2000-12-29 30.7182 35.2113
2001-01-31 27.0718 19.8464
2001-02-28 24.3094 27.4264
2001-03-30 16.0773 14.1306
@guilhermesimoes
guilhermesimoes / line_count_benchmark.rb
Last active Sep 16, 2020
Ruby Benchmark: Counting the number of lines of a file
View line_count_benchmark.rb
# 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 / index.html
Last active Aug 12, 2021
D3.js: Animating Stacked-to-Grouped Bars
View index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.stacked-chart-container {
position: relative;
}