MCDLR · Front–End Exploration

Responsive Thumbnails

I've always liked the pattern of having floated items in a fluid container. The elements adapt to the viewport's width and just "fall" when there's now enough space… but they do so rather ungracefully, leaving inconsistent white space on the sides. Responsive Thumbnails is the answer to this, giving these elements a percentage width based on the size of the element and the available space. Just go ahead and check it for yourself! Also, no dependency at all. No jQuery, no problem. And it's rather fast and efficient, dare I say!

aprend.io

aprend.io is a Front-End course (only HTML & CSS) in Spanish and for free, mainly composed of videos and reference code. This is the result of months of content creation, recording, video edition, uploading and site building. It's a way to return to the Internet what the internet has given me (knowledge, power and enjoyment).

Color Hex

See a hex color instantly by changing this page’s URL hash.

That's it! That's all it does.

galNum & galFly

These two bookmarklets allow you to create galleries on the fly, in two distinct circumstances. Check the page for the details!

This was a nice project to try out Grunt and it really delivers!

Also went mad with ruby's gsub… luckily everything is working nicely now!

Font Viewer

If you get this app and Apple Font Tool Suite, you can run Font Viewer locally on your Mac and have a nifty font comparison and testing tool.

This online version will only feature common OS X installed fonts. To see all your installed fonts, follow the instructions at the Github repo.

Meme Generator

Simple AngularJS app for generating Advice Animals. The particularity is that the text is overlayed on top of the image instead of being part of the binary. This makes editing and creating new memes a breeze.

Check out an example and feel free to resize the browser like crazy :P

Conway’s Game of Life

“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!

Bouncing Rainbow

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

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

Pangram Ipsum

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

Responsive Web Design presentation

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.

De Stijl

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.

WAI ARIA Cheatsheet

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 there was no other WAI-ARIA Cheatsheet, so this will prove useful to developers. Hope it does!

Responsive Web Design Experiment

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

UTF-8 Character list

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!

Common HTML Entities

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 :)

Make Safe For Work

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!

JS Inject

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!

CSS Inject

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!

HTML Keyboard

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

CSS Reload

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.

Dynamic Gallery

“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.

Media Queries

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!

www to beta

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!

TV Color Bars

XHTML Fluid layout rendering the common SMPTE color bars

Colud be a nice (but quite unfriendly) 404 page

Visual Cryptography

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

You have now gained +10 in espionage.

Hex colors and words

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.

Blue screen of death

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

text-shadow

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.