Skip to main content

Hi, I’m Daniel

I’m Daniel Perez Alvarez, a software engineer currently working at Twitter. I enjoy building things more than I enjoy writing about them, but I do occasionally write. Here’s a bit of everything:

  • JWT Decode

    Decode JSON web tokens right in the browser. Nothing gets recorded, everything is done on the client side.

  • Colored Noise

    Using the Web Audio API to generate noise of different colors. You can move the sliders to adjust the gain on the white, pink and red noise generators.

  • Deploying a Web App to a 2016 Samsung SmartTV

    - 4 minute read

    Lately I’ve been building a web app for my 2016 Samsung SmartTV using React Native for Web. It’s a Twitch client that you can control with your remote. Deploying this app to the TV is a pain in the rear. You need to follow the steps outlined in Samsung’s quick-start guide to developing web applications. That guide is not particularly well written, and it’s missing some key details, so I’ve decided to document the steps I followed.

  • Notes on “Y Not”

    - 10 minute read

    These are my notes on the talk “Y Not – Adventures in Functional Programming”, given by Jim Weirich at Ruby Conf 2012. One of the deepest mysteries in the functional programming world is the Y combinator. Many have heard of it, but few have mastered its mysteries. Although fairly useless in real-world software, understanding how the Y combinator works and why it is important gives the student an important insight into the nature of functional programming. I’ve translated all examples to JavaScript, using the arrow syntax introduced with ES2015.

  • SVG Painter

    You know that cool animation that Polygon used in their Xbox One and PS4 reviews, where SVG images appeared to draw progressively? It’s really easy to do. You just need to set the stroke-dasharray property of each path to its total length, and then animate the stroke-dashoffset property.

  • Pixel Art Scaling Comparison Part 2

    - 2 minute read

    I’ve been playing with a few other scaling algorithms in the 2dimagefilter project. They produce even more impressive results than the previous batch… Part 1 showcased the Eagle, SuperEagle, SaI and SuperSaI algorithms. I will continue here with EPX/Scale, HQx, xBR and xBRZ.

  • Pixel Art Scaling Comparison Part 1

    - 2 minute read

    I’ve been playing with a few scaling algorithms in the 2dimagefilter project. They produce quite impressive results when fed pixel art, and the fact that emulators are able to run them in real time is just mindboggling. Here I’ve chosen a bunch of images to showcase the Eagle, SuperEagle, SaI and SuperSaI algorithms. Part 2 continues with the EPX/Scale, HQx, xBR and xBRZ algorithms.

  • Image Comparison

    I wanted to compare two images side by side for my articles on pixel art scaling (parts one and two), to show the difference between various algorithms. The TwentyTwenty jQuery plugin does this beautifully, but I wanted to avoid external dependencies.

  • Magnifying Glass

    I wanted a magnifying glass effect for my articles on pixel art scaling (parts one and two), to show the difference between various algorithms. There are a few jQuery plugins that do this, but I didn’t want to add external dependencies, and this was a good excuse to play with the canvas element.

  • Touch Grid

    Straightforward experiment with a canvas displaying some circles. Move your mouse or fingers over the circles, and they will react.

  • Lorenz Attractor with JS

    Drawing a Lorenz attractor by absolutely positioning span elements along the x and y axes, and faking the z axis by adjusting their size.

  • Lorenz Attractor with CSS

    Drawing a Lorenz attractor with CSS shadows (generated by Sass), no JavaScript involved. You really don’t want to see the resulting CSS though. It’s a huge text-shadow property with the coordinates for each of the 5000 iterations of the equations that Sass ran.

  • Animated Cuboids with CSS

    Silly use of CSS transforms and animations to have a bunch of cuboids rotate in a certain pattern. There’s no JavaScript involved, everything is done with CSS (generated by Sass).

  • Trigonometry in Sass

    - 4 minute read

    Have you ever found yourself needing trigonometric functions like sines, cosines and tangents when writing your Sass stylesheets? Ok, probably not, but the day may come, and you’ll be glad you read this. Sass provides mathematical operators like addition and multiplication, and basic language constructs like conditionals and loops, but not much more. I’ve always relied on built-in methods, like Math.sin and Math.cos in JavaScript or Ruby, for these kinds of complex calculations… Is there a way to approximate a sine or a cosine iteratively? It turns out there are plenty.

  • GitHub Ribbon Using CSS Transforms

    - 5 minute read

    Do you know when Tom Preston-Werner released the ‘Fork me on GitHub’ ribbons that you often see on websites for open-source projects? It was December 2008! Man I feel old… I like the idea behind the ribbon. It’s an easy way of telling your users that this software is open-source, and that there’s a repo available for them to browse and fork. Using an image for the ribbon though? I don’t like that at all, for multiple reasons: Changing things like the font or the colors of the ribbon is really inconvenient, as it forces you to fire up an image editor. Including this image on your page means an additional request, and about 8KB of payload. You have to be careful with the positioning of the image, as it’s a pretty big square, and you don’t want it to block part of your site’s navigation. You have to think about generating and serving a high-definition version if you don’t want your ribbon to look all pixelated on HiDPI devices.