Writing HTML Right

One of the things that really bothers me in today’s web environment, is that it seems like everything has been made generic. I’ve been noticing an increasing number of websites that use class names like col-md-4 or some other meaningless class name like that one. There is nothing wrong with this, until you try to automate a task such as scrapping a website.

I’ve talked about web scrapping in the past, and I’ve also talked about how the semantic web is just a dream that we should be forgetting about. However, we shouldn’t go around giving only meaningless class names to our tags just because we don’t care much about a semantic web.

When I work on a website, I write the markup first not really caring how I’m going to display it. That is the beauty of CSS, and that is why a few years ago the CSS Zen Garden was such a big deal. When we write markup we shouldn’t care about what the element that we are describing will look like, but rather about what it is. This sounds a lot like I’m going back to web semantics, and maybe I am, but just a little bit, and not for the sake of semantics, but for the sake of separation of concerns.

The whole point of having CSS live in a different space from HTML was to keep them separate, but now we are tying them up together very tightly. This is not good.

The next time you create a website, try this:

  1. Get out your text editor, and write markup.
  2. For every tag you write, think about what it describes, and assign a class name to it that describes that. For example if the element you are writing markup for is a sidebar widget, then give it a class of widget.
  3. Do number 2 for each tag you write. If you cannot think about what a tag is doing there, it may not be needed.
  4. Use IDs. I know a lot of people nowadays say you should not use IDs in your CSS. Not using IDs in your CSS is probably a good advise, but you are writing HTML here.

You should also make sure you are using the correct tag. There are a lot of tags in HTML, and you should always make sure you are using the correct one that describes what is going on in your markup. A few years ago, a group of people decided that the web needed badly an article tag, so they added it. Personally, I think it is stupid, but I use it because it conveys more meaning that a generic div tag. The reasons why I think it is stupid that HTML 5 implements a bunch of new tags are outside the scope of this article, so I won’t go into that, but the point is that if there is something available for you to use, you should be using it.

Here is an exercise you can try:

Write a simple page using nothing but div tags. This page should be simple, but still have a variety of things like some title, a sidebar, maybe some quote from a famous person, or some contact information; just add anything you think of, but use only div tags. Once you are happy with your page, open it up in a browser and try to make sense of it. You can even take a screenshot of it.

After looking at your page for a little bit, go back, and start replacing the div tags for something more meaningful. For example, if you have a title, use and h1 tag, or if you have a a paragraph, use a p tag. Look at each div tag you wrote, and think about what it is doing, then, find the tag that better fits that description. For a list of html5 tags, you can go here: https://developer.mozilla.org/en-US/docs/Web/HTML/Element and for a list of tags organized semantically, you can go here: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/HTML5/HTML5_element_list

Once you are done, look at your page in the browser again, and you will notice the huge difference that using the right tag does.

There is a lot more to writing HTML than this, but one thing is certain. When you write HTML you should think about content, not presentation. HTML describes what something is. After you are done, you may go back and add some classes that aid you in your CSS such as classes for columns, or font awesome classes, but do that only once you’ve made sure your HTML is marked up, properly.


Fixing Error Code 32 when Using the Twitter API

Yesterday, I started working with the twitter API. It’s been a long time since I did anything with it, and now that it uses Oauth, I found that it is a bit less intuitive, but after a couple of times you get used to validating requests, and to the tedious signing process. However, I noticed that some of my requests were failing with an error code of 32. This is the actual message I got as response:

{“errors”:[{“message”:”Could not authenticate you”,”code”:32}]}

This message is really useless considering there are many reasons why your authentication could be failing. By looking at that error message all you know is that you could not be authenticated, but you don’t know why. The reasons, as it turns out, are not as intuitive as you may think.

When someone tells you that you could not be authenticated, your first thought is to consider whether you have the right credentials. But once you’ve verified that you do, what other options do you have? Well, it could be that the signature is incorrect because you did not order the parameters in the right order. It could also be that your server is using a different timezone. Who would ever think of these as reasons for failing authentication? That is where the message becomes useless.

However, these two instances are pretty much the main reason for failed authentications, so a search will most likely give you a variation of any of these two possible reasons. However, what do you do after you are certain that none of them are the reason? You are pretty much out of luck.

One of the first things I do if something is not going according to plan, is to check that the signature being generated is the same one that twitter generates when using their Oauth Tool. For this you need to know how to modify the timestamp, and the nonce in whatever framework you are using. In mi case, I’m just doing everything by hand, so editing those values is a matter of editing a couple variables. If the signature, the Authorization string, and the signature string coincide with the ones generated by twitter, there should be no reason why your request should fail. However, despite of all 3 matching, my requests were being failed over and over.

The first thing that I noticed that made little sense was that some request were successful, while other were not. This made no sense. Why would twitter fail to authenticate one request, but not another one when both use the same credentials. This is yet another instance of that message being totally useless.

I decided to go over my requests and find out what was different. I noticed that the request that failed were the ones where data was being posted. I was using php’s curl to do the requests, so I decided to go and take a look at the documentation just to make sure I was doing everything right.

I discovered that PHP can take POST parameter in two ways when using curl. The first one is a string of key value pairs separated by ampersands:


The second one is using an array:

array (
  'key1' => 'val1',
  'key2' => 'val2'

Well, it turns out that if you use an array, php will set the Content-Type header to multipart/form-data, but then twitter will fail to authenticate you. Although the reason for failing the request may be an acceptable one, the message you get back is not, because it gives you no indication whatsoever as to why the request failed.

Next time you encounter that error code 32, remember to check you headers as well as your data, along with the server timezone, the order of your parameters when building the signature string, and you may as well check that you are not wearing anti-twitter outfit, just to be sure twitter will not deny your request because of that too.

Sick and Tired of Most People

Today, I read the news about the father of Javascript stepping down from hist role as CEO of Mozilla after just 10 days since he took that role. The reason for this is that he donated $1,000.00 to a proposition to ban gay marriage in Californa, and people didn’t like that.

I have my own views on the gay marriage issue. I may not agree with you, but I sure will not discriminate, judge, and bully you because your views are different than mine. I don’t agree with Brendan Eich’s views on the matter, but I respect his opinion.

The one thing that really bothers me in this controversy is the reaction of many people. It seems to me that gay advocates, and activists are at least just as intolerant as anti-gay people are. For example, OK cupid went as far as denying service to anyone who uses Firefox (http://www.cnet.com/news/okcupid-piles-on-mozilla-calls-for-new-ceo-to-resign/). This is unacceptable. This is a great demonstration of intolerance, and abusive action. Rarebit is asking Brendan to apologize (http://www.teamrarebit.com/blog/2014/04/03/a-sad-victory/). No one should ever have to apologize for their opinions. We apologize for our actions, not for our thoughts.

I think marriage should not be a legal issue. Marriage should be a fundamental right such as the right to live. It should not be open for questioning, nor should it be denied to anybody. I don’t care what the Bible says, or what my religious views teach, I will always support the rights of others, even if they differ with my personal views because as soon as I try to take away other people’s rights, I’m stating that it is OK for others to take away mine.

Please, keep that in mind when you read the following:

I’ve had enough of these activists people. I’ve had enough of the LGBT movement. I’ve had enough of all the crap going around. If you are gay, lesbian, bi, or trans, I respect that. I will be the first to help you on anything I can if I see you in trouble. I will respectfully turn you down when you flirt with me, and I will be your friend if you are the kind of people that I like to hang out with. I will not, however, congratulate you for being “brave”, I will not think of you as more (or less) than anybody else, I will not believe that you being LGBT entitles you to any more, nor any less rights than anybody else, I will not fight for you cause, because you don’t have one. What you have is a sexual preference, and that is nothing special to have. We all have one.

You are not special in any way, you don’t get a free pass if you disrespect me, you don’t get to have special treatment. I am telling you that you are equal to anybody else, and I think that is the best thing you can get, if you truly want equality. If what you are looking for is special treatment, you don’t get that with me. I am tired of those who actively push their sexual orientation onto others, gay or straight.

Those are my views on this subject, and while I am aware that the LGBT community is only fighting for their rights, I don’t support their methods in many cases.

Quick Linux Notes

It’s been a while since I wrote anything here. Today I want to leave a few pieces of wisdom for those who like pocking around their computers; specifically linux systems.

Yesterday, after trying to change the applications menu in LXDE, I ended up learning a few things about linux. Just to be clear about my current setup, I am using Fedora 20, with LXDE. That should be all that matters here. If you are using anything else, you may want to see if these bits of knowledge apply for your system as well.

1) It is not that easy to edit the applications menu. By application menu, I mean the little menu with the fedora logo that by default shows on the left end of the panel in LXDE. I remember that in ubuntu, or more specifically in Gnome classic, you had Applications, System, and Places. You could right-click on Applications, and there would be an option there to edit the menu. In LXDE, that does not exist.

According to the Main Menu documentation in the LXDE website, since version 1.2.0 of PCManFM, you can use this file browser to edit the menu by editing the Applications folder. I tried it, all I got was a message saying the operation is not supported. It may be necessary to open it as admin, but I didn’t try.

Apparently, this menu is built from .desktop entries on certain locations.The previously mentioned documentation says that one of those places is ~/.local/share/applications, so I decided to create a new entry there. The same documentation says that you have to delete the .cache/menus/* files. It doesn’t really say it, but it gives you a script that does just that. After doing that, my menu just disappeared, and trying to access the Applications folder in PCManFM would give a menu cache error. I had to restart the computer so that the menu would show up again. After restarting the computer, my new entry was added to the menu. Odly enough, after I restarted the computer, the item I was trying to add was already there, and my entry was too, so the item was duplicated. I think it was there all along, I just didn’t see it…

If you want to understand exactly how the applications menu is built, you can try to take a look at the source code for the lxdepanel menu plugin.

You can also open ~/.config/lxpanel/LXDE/panels/panel. This is the config file for the panel, but it is recommended that you don’t edit that file directly. I did though, and nothing broke.

2) Restoring default Launchbar. A few days ago, I was playing with the settings on the lxdepanel. To open up these settings, just right-click on the panel, and select the Add/Remove Panel Items option. That time I removed the last application launcher, which has the logout button, and the lock screen button. In my opinion, without those two buttons, the panel looks “naked”. It bothered me at the beginning, but then I decided to just leave it like that after trying to find those buttons again without any luck. Yesterday, I stumbled upon the default menu settings. Just open /usr/share/lxpanel/profile/LXDE/panels/panel and you will see the default settings there. From that point, it was just a matter of copying and pasting the last item on to my profile’s panel config file.

3) Read some good python. If you go to /usr/lib/python2.7/ you can read the python library. I think it is nice to be able to just read and learn from the official library. In my computer there is also a python3.3 directory next to the puthon2.7 one.

4) Find your trash directory. A few years ago, digging around an old computer, I found the trash directory, but since then I’d forgotten its location. More recently, I had been wondering how the restore functionality works — If you open the Trash Can in PCManFM, and right-click on an element there, you will see an option that says Restore. I wanted to know how the computer knew where the item was taken from. Now I know.

If you go to ~/.local/share/Trash/ You will see 3 directories there. We are interested in two of them:

The files directory keeps the actual files that have been moved to the trash. When you right-click a file, and choose the Delete option, you are just basically moving the file to this directory.

The info directory keeps an info file for each file in the files directory. This info file has two pieces of information: the path where it came from, and the deletion date. It is that simple. When you restore an item, the system simply reads the info file, finds where it came from, and moves it back there again. Then it deletes its info file.

Never be afraid to dig around your computer. There are many goodies waiting to be discovered. Follow one simple rule, don’t modify anything that you don’t understand, and you should be OK. If you have a spare computer, you should install some linux disto and experiment there knowing that if you break it, nothing is lost.

Finally, here is a list of documents you may want to read (some of them are gnome related):

Fixing Monitors in LXDE

Since I installed Fedora, I’ve been unable to run the computer with both, the external monitor, and the laptop monitor at the same time. So, I’ve decided to just run the external monitor, since it is bigger. I haven’t really spent too much time looking for a solution to this problem, but the times I’ve tried fixing it, I haven’t had any success.

Earlier this week, after getting tired of seeing a high amount or RAM usage, I decided to stop using GNOME, and use OpenBox without a desktop environment instead. This was easy to do. In the log screen, there is an option on the bottom where I have the options to use GNOME, LXDE, and OpenBox. I simply chose OpenBox. However, despite seeing a huge improvement on memory consumption, I was rather soon disappointed by the amount of configuration I had to do every time I turned the computer on. Sometimes I would have to log out, log into LXDE, change the monitor settings there, and see if that would work. The problem was that OpenBox would try to use both monitors, even when the external monitor was not plugged in! This cause me to not be able to see the windows, which by default would get placed in the area of the external monitor, but this would not get any signal.

As you may imagine, this quickly became too much trouble. Especially since there were no actual memory problems while running GNOME, I was just simply trying to reduce memory consumption.

Motivated by these inconveniences, I decided to give LXDE a try. LXDE also uses OpenBox as the window manager, but LXDE is a desktop environment, which means there is a lot of added benefit, such as a desktop, and a panel. All of this, while keeping memory consumption surprisingly low.

However, I made a mistake. I opened the Monitor Settings, and set the laptop monitor off by default, and the external monitor on by default. This had the same effect as OpenBox did. This time, however, I could not log into LXDE to fix it, since I was already in LXDE. I was effectively unable to see anything, since the output was being sent to the external monitor, but the monitor was receiving no signal.

Knowing that the settings must be saved somewhere, I decided to look into it. I opened the tty (ctrl+alt+F1), which fortunately runs on the laptop monitor, logged in, and decided to look in the ~/.config directory. I reviewed a couple of files before I decided to open ~/.config/autostart/lxrandr-autostart.desktop

This file has settings to start xrandr. Once I opened this file, it was just a matter of turning off the VGA-0 monitor, and turning on the LVDS monitor, which was turned off. Once I did this, I restarted the computer (sudo shutdown -r now), and I was able to login with a desktop. Then I opened the Monitor Settings again, and set the monitors to show only the external one, and apply the settings, but not save them.

I think I will have to do this every time I turn the computer on, but it may be worth it.

I still need to look for a solution that allows me to have both monitors at the same time, but for now that is not something I want to spend a lot of time on.

Iterating over an HTMLCollection

I have always expressed my lack of interest in jQuery. I don’t like it as a framework, but I like even less the fact that it contributed to the creation of a wave of bloated websites. There are countless of sites that load jQuery just to do a transition, or to hide an object.

jQuery also contributed to the proliferation of plugins that don’t really do anything other than providing eye candy, but don’t improve the overall usability of a site, sometimes they even worsen it. jQuery also created a culture of instantaneous code, where people think everything is as easy as doing $().

Despite all its faults, jQuery did great things. It hid away the complexities of dealing with the DOM, it helped many people enter the world of Javascript, and it demonstrated that there are better ways to do things.

One of the things I like about jQuery is the fact that you can almost effortlessly apply changes to a collection of elements. Think for example, that you had to move all elements that had a certain class name to the left by 10px. Now, lets say you must do it with javascript. With jQuery you would do something like:

$('.className').css('left', '10px');

Compare that to the amount of code you have to use to do the same thing with vanilla js:

var nodes = document.querySelectorAll('.className');
for (var i = 0; nodes[i]; i++) {
  nodes[i].style.left = "10px";

That is not too bad, but it is not as simple as the online jQuery code. The for loop is just boilerplate code. There is a better way to do it:

function iterateCollection (collection) {
  return function(f) {
    for(var i = 0; collection[i]; i++) {
      f(collection[i], i);

This is a nice little function that will allow you to iterate over a collection of nodes, or an array even, and then it will call a function passing it the current index, and the element at that index. To call it, you simple do this:

iterateCollection(nodes)(function(node, i) {
  node.style.left = "10px";

While it may not be as little as the jQuery code, it eliminates the need for the library. Also, the function can be used with other functions to create more interesting patters.

I am currently working on a DOM library that takes advantage of this kind of patter as an implementation of functional programming for DOM manipulation.

Fix it Wrong: the Hyperlink Shortcomings

Catching up with my reading, and trying to free my browser of all those tabs open, I came across an article that covers an interesting problem, and offers a weird solution. This article introduces Sparkicons.

Sparkicons are a proposed solution to a real problem. How many times have you clicked something just to be disappointed with where the link takes you? I have been a victim of this a few times. Some time ago, I was using my tablet, and clicked on the download button of the Aviator Browser home page. I am so used to download buttons taking me to a page where the actual download button exists. For example, the wordpress.org site has a download button that when you click it, it takes you to another page where there is another download button. I don’t download many things from the web, and maybe that is why I have a this wrong idea in my head. But the sites where I download things from make use of this bad pattern that I now think any download button in a homepage is just a link to the download page where the actual download button is.

On Bad Patterns, and Worst Practices

This problem that I have highlights the effects of using bad patterns in Interaction Design. If the people deciding what happens when I click something decided to layout the correct behavior this problem would not exist, and I chose to believe I’m not the only one who has it. This problem extends far beyond download buttons. There is, for example, the issue where many popular download sites have too many download buttons that you don’t know which one is the real one, and which one will just download some virus or scam. This is bad interaction, and UX design, but there are also bad practices that are used in the name of SEO.

In my opinion SEO is one of the worst things that has happened to the web. Sites should be indexed by their importance, not by their clever usage of technology and language. However, sites like google encourage abusive practices. One time I sent a criticism to a popular site regarding their poor chose of wording when creating hyperlinks, even when better words where in the text. For example, they would have something like this:

This article presents the advantages of using modern tools.

and they would put the link on “This article”, and not on “the advantages of using modern tools”. The second set of words is obviously a better choice, but when I pointed this out, I got a response saying that they know that, but they used the first set of words because of SEO. I lost a lot of respect for the site, the editors, and anybody involved in that decision. I decided that if they cared more about SEO than about being explicit to their readers, and using best practices in favor of their readers, I did not want anything to do with them.

Taking Responsibility

Anybody who creates content needs to be responsible for that content. Creating high-quality content should be our ultimate goal. I don’t see any need to do anything more than what wikipedia, and the BBC are doing (reffer to the article about sparkicons linked at the beginning). There is no need to add anything else because the text of the link should be always explicit. I cannot imagine a situation where being explicit is not possible. It is the content creator’s responsibility to make sure that the created content is clear, explicit, and easy to understand. This is what wikipedia, and the BBC are doing. There is no need for any sparkicon, which by the way is just the same idea, but on steroids.

I Think you Need a Button

Another big problem is that we want links to do too much. We use links to link documents together, to download things, to put things in full screen, to create new content, to delete content, to show and hide content, and maybe others that I’m forgetting right now. Links have one job: to link documents. If you need to do something different, then you need something different. For example, to go fullscreen, and to download content, you should be using buttons. We use tools wrong, and then complain that they don’t work well.

The Browser Fault

One thing I don’t understand is why in the world mobile browsers just donwload things. I like desktop browsers, because when you click a download button, they ask you if you want to download the thing, and where you want to put it. This is great. Sometimes you clicked by accident, or the link was miss-leading, or your cat stepped on the click button, or something else happened, but you did not intend to click on that button. That is why browsers should not assume you want to click on it, and download something. This is even more true with mobile devices where you have to touch the screen, and there are many reason why you could touch it without it meaning you want to click on the button to start a download. Browsers are breaking an established flow, and creating one that does not offer any added benefits. I don’t understand this logic.

Finally, while I appreciate the effort that was put into thinking about sparkicons, I don’t think they offer any real benefit over what some websites are already doing. I honestly believe that it all comes down to the same thing I’ve been saying for a long time now, the web technologies are unfixable. We need to start anew considering the current state of things and where technology is going. It is not a matter of adding more sugar on top of a broken model, but rather about letting go of the old , broken model, and create one that suits the current state of technology and that is more future friendly.

CSS Variables, Yet Another Step in the Wrong Direction

From the first time I learned about CSS variables some time ago, I noticed it was a stupid implementation. This is what we get when the people writing the specifications are not one bit close to the real world development scene. How can a person who doesn’t write CSS on a daily basis know what the best way to implement something is. Add to that the fact that variables in CSS are completely useless by nature. However, the “developers” asked for them, and they got them.

CSS variables are still something that lives in the future. They are like an incredibly stupid monster that lives in another dimension, but that has managed to open a portal, and is now showing one of its ugly paws through it. But I’m not the type to mix science fiction with reality, and I don’t usually write in this style, so I’m going to stop now.

Going back to my usual ranting style, let me tell you why CSS variables are stupid, and dangerous. But first, lets take a look at the motivation.

I Want to Feel Like a Big Pants Geek Boy
Or Why CSS Variables

It is my belief that CSS variables come deep from the need of designers to feel like developers. I’m not trying to insult designers here. I have great respect for some of the work that great designers have done, but now that the web has given birth to the front-end wave, there are a lot of designers out there who want to feel like they can call themselves front-end engineers. This is not a good thing. Designers should be proud of being designers simply because their work is amazing. But being geek, nerd, and coder is the fashion now, so many designers want to be that too.

Today I read this on a blog post:

If there is one thing a language needs to qualify as a programming language, it’s variables; they’re incredibly useful, save us a bunch of work and typing, and improve coding all-round.

This is simply a demonstration of both, the need of some designers to feel like they can program, and their lack of knowledge of programming languages. But I’m not going to start attacking people just to make me feel better. I think I should just continue attacking CSS because after all, that is what is ultimately wrong. If we really want to make CSS better, we need to throw the current specs out the window, and start anew.

The Nightmare of CSS Variables

I wanted to have a bit of a better base for my arguments, so I decided to head to the source of the problem. I searched for the W3C specification of CSS variables. It is still an Editor’s Draft, but in this stage we can begin to see some of what is wrong with CSS variables. Take a look at this example, taken from the W3C site:

:root { var-color: blue; }
div { var-color: green; }
#alert { var-color: red; }
* { color: var(color); }

<p>I inherited blue from the root element!</p>
<div>I got green set directly on me!</div>
<div id='alert'>
  While I got red set directly on me!
  <p>I’m red too, because of inheritance!</p>

I really hope you see what is wrong there, but if you don’t, I’ll give you a hint: the paragraph element can be a different color depending on where it is, event though you specify a “specific” color for all elements. This is because of the stupid implementation of scope.

The scope of the variable is resolved in terms of the location of the element in the HTML structure. What!? This is wrong, and you can go and find as many justifications for this as you want, but it won’t change the fact that this is just wrong. It would have been better to implement namespaces rather than this kind of scope.

This behavior is defined as “cascading variables”. In a sense, it is not even a scope chain. It is a freaking cascade! Why would you want your variable values to cascade? This should be called randoms instead of variables, because the value of the variables will change almost randomly depending on where the element is in the html.

This cascading behavior introduces inconsistency. Inconsistency is enemy of robustness because it creates unexpected behavior. However, CSS variables introduce a whole lot of inconsistency and complexity to an already complex language. The bad thing about this complexity is that the complexity is not in the language itself, but in the way the language has to be written in order to be efficient. In other words, writing complex, hard-to-maintain, CSS is a requirement so much they almost advertise it as a feature.

Who Needs Variables Anyway?

I like to believe there is a better way to write CSS. I’ve been recently experimenting with what I call Subscription Based CSS. It has allowed me to create more consistent behavior, easier-to-maintain CSS, and a smaller code base. Explaining Subscription Based CSS is out of the scope of this entry, but the basic idea is to develop sets of styles, and simply add selectors to them. This eliminates completely the need for variables. Think of this example:

color: #bada55;

We have defined a color set. Now, whenever you need a certain element to have that text color, you simply add a selector to the rule set. For example, if you want all your h1 elements to have this color, you simply subscribe them:

h1 {
color: #bada55;

If you also want elements with the class “badass” to have this color, you subscribe that selector too:

h1 {
color: #bada55;

There is no need for a variable called var-badass, and there is no unexpected behavior. The .badass elements, and the h1 elements will always have the same color regarding of cascade values.

You can apply this same principle to any CSS property, and you can do more than variable can do. For example, if you want elements to have the badass background color, and white font color for nice contrast, you define that set:

h1 {
background-color: #bada55;
color: #fff;

This is a much better way to deal with constant values.

F! Semantics

In my early days, I was pro-semantics. Semantics were the hype back then, and I saw a lot of value in that. Semantics rely heavily in class names, and we learned that using class names that described the visual representation of the element was bad. This means that if you have a class like “centered_text” you are doing it wrong. Why? For the sake of semantics, of course.

Nowadays I’m not as big a fan of semantics as I used to be. Class-based semantics are a redundant task that has little added benefit for the end user. They are of great benefit for robots, and automated machines, but we do web for users, not robots. Once you forget semantics, writing subscription based css is really easy.

I don’t think CSS variables will go away. They are just another feature in the web that takes us a bit further from where we should be, and that diverges us a bit more from the direction we should be following, but like everything else, it is up to the developer to use the feature or not. I’m sure they will be loved by many because we tend to see any new feature like a new toy we must use as much as possible. I think we will start seeing CSS frameworks that claim to be the perfect solution for CSS variables, just like it happened with grids. With that in mind, I can safely say that I saw the future, and it was awful.

grumpy cat

Scanning with Canon N1220U on Fedora 18

I needed to scan a document today. Scanning is something I do very rarely, so I don’t need to buy a fancy scanner. I have a Canon N1220U that I got from my father over 6 years ago. I don’t know how long he had it for before passing it on, but it works well. It has decent quality image, and it is not bulky, so I can easily put it away in a little box. I used it a few times back when I was using ubuntu on my Dell laptop. It just worked out of the box, or at least that is what I remember.

However, today, when I tried to used it it would not work. Fedora comes with simple scan, which is the same applications I used in Ubuntu, but simple scan was not detecting the device. I decided to open the console and fire up a search for scan utilities:

yum search scanner

I got back a bunch of results. The promising one was sane-backends-drivers-scanners.x86_64, so I did a sudo yum install, but that reported that the package was already installed, and up to date. There was nothing to do.

I decided to do a quick search, and I found this: https://www.linuxquestions.org/questions/linux-hardware-18/fedora-18-x64-xsane-won%27t-detect-scanner-even-though-sane-find-scanner-does-4175452309/ but I didn’t think it would help so I skipped it and went back to the terminal. I decided to see what packages were available by the sane package, so I typed san and then hit tab twice. I got this list:

sanbox saned sane-find-scanner

I decided to give sane-find-scanner a try. sane was detecting the scanner, so the problem should be somewhere else. I decided to install another package from the list I got when I did the yum search.

sudo yum install xsane.x86_64

This installs the xsane package and the dependency xsane-common. I had tried xsane before, although at the moment I didn’t remember it. xsane is insane. It has lots of options, and getting the document to scan cleanly can be hard, you may need to play around with the contrast, and light settings. Heck, xsane even has histograms!

xsane is great if you are doing some high quality scanning, but if you just want to scan a document to email it, xsane is a bit of an overkill. I decided to give simple scan another try. I opened it again, hit scan, and it worked. Why? I don’t know. It thought maybe something to do with xsane, but it continued working even after xsane and its dependency were uninstalled, so I don’t know what made it work, but I’m glad that it works now.

CSS Hover Intents

Hover intents were the fuzz word for a little while some time ago. The basic idea is that you should not fire a hover event handler as soon as the event happens, because the user may not actually intent to hover over the element, but he might just be rolling the mouse over in order to get somewhere else.

The javascript implementation was simple, involving some king of timer. Someone even created a hover intent jquery plugin. But to me it seems excessive to use Javascript to manage hover intents, specially now that most of our animations are handled by CSS.

A few weeks ago I was thinking about implementing hover intents in CSS. I’m not sure if anybody has come with this patter before, but I had never seen it until I came up with it. The idea is the same as in javascript, but you can implement it in pure CSS.

The “trick” is to take advantage of the transition property of CSS elements. After all, we usually want to do hover intent on animations and transitions, like when we are sliding down a menu, or adding some hover state to an element.

The code is simple:

.selector {
transition: .5s .3s linear;

Here we are specifying a transition that should take .5 seconds to complete, but should start with a .3 seconds delay. This effectively creates the hover intent effect.

Look at this demo to see it in action:

Notice that I made the delay 1 second just to make it more obvious. This has been tested on Google Chrome and Firefox. You can even specify a different delay for the mouse enter, and mouse leave events by re-defining the transition property on the :hover rule with different values.