mcdlr. me cago de la risa

“Conway’s Game of Life” is a mathematical game created by John Conway, in an attempt to simplify a mathematical model for a hypothetical machine that could build copies of itself. This game opened up a whole new field of mathematical research, the field of cellular automata

I have always loved this game and thought that it was time to take a shot at recreating it, and that is what I did. Also, no java applet or any nonsense that I always see prompted when you want to play this game online. Profit!

My first experiment with Processing! Really simple code with enjoyable results.

Music with HTML5 Audio element and some javascript for the simple controller (play/pause), original song by Jellica

Processing is a really fun and easy to learn language, why don’t you try it out? Cheers!

DHompage is my personal homepage, and it can be yours too! It basically provides search fields for the most common internet searches and links for your most visited pages.

Some interesting features include:

• “get” button to aquire clean links to share results
• Total responsiveness; can be used on smartphones, tablets, etc
• Low brightness theme to avoid eye wear if tab is to be left open
• Avoid Bubbling on Google, by default “personal results” are not shown
• You are a grownup, by default “safe search” is always off
• Avoid search trail tracking and country results scoping thanks to full URL formation on the fly
• Get Google Image results that show image sizes, useful for Album Cover searches
• Search for information about an image, feed its url to “Google search by Image URL”
• Customize it! Want to link to other places? Want to use other SE? Fork it and change it, it’s Open Source!

Want new features or found bugs? Let me know

Another useful little tool, filler text using pangrams. In general Lorem Ipsum is used as filler text, but why not Zoidberg? I mean… why not pangrams? They were created because they use each of the letters of the alphabet once, and that’s useful for testing typography. But it also generates a more homogenous visual texture.

In most situations using filler text is bad, because you should know what your content is going to be before visually designing something. But sometimes you’re creating content architecture, and even thou you know the objectives of each area and the kinds of contents, you haven’t generated the content yet. I think that in these cases it’s alright to use filler text :)

Inside you’ll find the code ready to be put on source, with paragraphs increasing in word count so you can choose the size that best suits your needs.

Oh! And if you’re wondering what’s the deal with the ’ things, check this handy utf-8 character reference

This is the video and slides to my talk at wroc_love.rb.

Responsive Web Design is all about having the same content visible in all devices, from tiny mobiles to huge monitors, preserving proper readability and adapting to the medium. In this talk I will present the concept of responsiveness and teach with examples how to make a layout responsive with the one-two punch of fluid layouts and media queries.

Piet Mondrian painting, De Stijl art movement; rendered with HTML5 and CSS3, completely fluid and responsive.

I’m only using js to adapt the height and width of the containing element to the viewport, but all the elements that comprise the actual painting are absolutely positioned with percentage values, making their positions relative to their containing element’s dimensions.

With this project and DOMcraft I’ve found out that Firefox subpixel renderization is uncanny. In the other browsers you’ll notice gaps that will seldom show on Firefox. Try resizing the window of De Stijl on different browsers to see what I mean.

Oh! For comparison, you can see the original painting. The colors are not exactly the same, but they are at their most “pure” RGB value, which follows De Stijl’s proposition of abstraction and simplicity.

What started as a simple WAI-ARIA Landmark Roles Cheatsheet turned out to be a full-blown article about the subject.

Since I had the different elements of the page done, I figured “Why not fill them with content, then?” and that is what I did.

Also, it appears that to date there was no other WAI-ARIA Cheatsheet, so this will prove useful to developers. Hope it does!

This is a little experiment that I did while attending RubyConfUy 2011 for a lightning talk about Responsive Web Design.

This experiment explicitly shows the capability of @media for content control over differently sized viewports; try resizing your browser window or accessing this page through your mobile device or tablet device.

While it may seem this experiment makes use of Javascript, it does not :)

You can check the underlying code at /resp/index.html and /resp/stijl.css

All the strange characters contained in UTF-8 is amazing

In this page you can check them all up. You can find really bizarre stuff, enjoy!

Just a list of commonly used HTML entities with the proper code in decimal entity notation.

I uploaded this a long time ago but did not consider it worthy enough for it to be shown here. But you know what? I use it all the time!

If it's so useful for me, it's probably gonna be useful for more people, I guess :)

Have you ever wanted to share a NSFW with a coworker, but in a more stealthy way? This is the tool for you. Just paste the image URL and you'll get a link you can use to share the image in a stealthy way. Just try it!

With this tool creating a Bookmarklet is much easier. Just type the code, assign a name and an Anchor element with your code will be created below for you to drag to your bookmarks.

You also have the possibility of adding jQuery to the target page so you can write you javascript using jQuery, just a checkbox away!

Ever wanted to change the layout and design of any given page? Perhaps test CSS through many browsers without deploying?

With this tool (Wich is an expansion of the one below) you just type your CSS and the bookmarklet is generated for you. Then you use that bookmarklet in any given page and the styles will be applied. That easy!

This is a work in progress. The html keyboard is part of bigger stuff, but since the keyboard is already finished I thought I'd just put it out there for somebody else to see or steal :P

This bookmarklet reloads only the CSS on your website. It assumes you are using jQuery and that you use a query to load newer styles (something like <link rel="stylesheet" href="/style.css?3">), it's ideal for Ruby on Rails apps.

If you are only modifiying styles, it's quite faster than to reloading the whole page. Also, sometimes elements on page change via js and a page reload would take you back to another state, in that case this is the most useful case scenario. Actually I had to creat this to be able to adapt an ajax wizard to mobile.

“scannato” is the name of this dynamic jQuery gallery. It works by generating links to images who's name follow a numeric progression.

For instance, if you find an image at “http://www.somewhere.com/pics/car020.jpg” you can feed scannato with “http://www.somewhere.com/pics/car” for the url field; “1” for the starting n° field; “50” for the ending n° field; “3” for the padding zeroes field and leave “.jpg” as the format. Then, by pressing the “do it” button, a gallery will be generated with all the images ranging from “http://www.somewhere.com/pics/car001.jpg” to “http://www.somewhere.com/pics/car050.jpg”

if the padding zeroes field is left empty, no padding zeroes will be put and the numbers will progress normally.

Thanks to Media Queries and a Fluid Layout, this page looks good from 2560px wide and upwards to as small as 320px wide (an iphone, vertical view).

Also, I crafted some jQuery (modified from Scannato) to see the images bigger on hover. It's nice, I like!

This little bookmarklet will make you jump straight from www environment to beta environment and back again. It is a simple solution that saves you the hassle to manually type on the address bar.

Just drag the image on the left to your bookmarks bar and it is ready to be used!

Imagine you have been given a text with a series of links to places you need to go.

Perhaps you would normally copy and paste these links into your preferred browser and go.

With this page you can skip copy and pasting several links and just make whatever text that is a link into an actual clickable link

This may sound link something pretty mundane, but is actually something I needed for work, since sometimes I save reference url in text files and need to access those urls later... and I don't like copy pasting things around when a smarter solution is at hand :)

XHTML Fluid layout rendering the common SMPTE color bars

Colud be a nice (but quite unfriendly) 404 page

Just a quick test on Visual Cryptography. Slowly resize the browser window until the secret image appears.

You have now gained +10 in espionage.

this page contains hex color codes that are also words or that are contained in a word.

Hope this proves useful to somebody. I think it can be useful for domain name brokers or for a new company name with color brand associations.

A code rendition to the classic windows blue screen of death (BSOD)

This started as an investigation on system, pixelar fonts, and the realization that being able to do a “pixel perfect” version of BSOD was possible

A really simple experiment with the new canvas element.

As my logo is quite orthogonal, it was a good exercise to make it using the ctx.fillRect() function

Just a simple experiment page featuring some nice text shadow that goes along with the style of the background tron-like dimensional box lines

The page also centers on X and Y axes; even with a backward-compatible solution for IE6. The nick “unPXrq” is fictional, just “hacked” on ROT13. This is not used for defacement, it is just an exercise. White hat FTW.