hacks@philingrey.com

13Feb/120

Switching default search to DuckDuckGo

I've been trying out DuckDuckGo (DDG) for a while now and it has some very nice features:

  • No user tracking
  • Encryption by default
  • They don't 'bubble' your searches - tailoring your search based on previous searches (which pushes, possibly more relevant results, down in your results)
  • They have some great power features

And it's this last point that has made me jump the google ship (that and the new G+ integration into searches), at least temporarily. Try searching "50 dollars in euros" in DDG and the top result is pulled from wolfram alpha (not just the link but the actual result - at the time of writing €37.74), "array.prototype" gives a stackoverflow question (again the actually question, not just a link), "Ethan Hawkes" pulls information from wikipedia.

But my favorite power feature revolve around adding key terms within your search: want to search

  • The mozilla developer network - add '!js'
  • Amazon UK - add '!auk'
  • Google Scholar - add '!scholar'
  • PHP.net - add '!php'
  • If you think google would be better for a result - add '!g'
  • the list goes on.....
11Feb/122

Fully CSS (bordered) popup bubble

This is my addition to the world of totally css popup bubbles: borders on tooltips - life changing, I know.

The challenge is this: create a pop-up bubble for an element with no non-semantic elements, with the end result looking something like this:

Demo

Html-wise I've opted for the following (I'll argue why later....):

<article class="popup">
    Main Text
    <aside>Hello I'm a popup bubble!</aside>
</article>

here I've used <aside>'s "Additional content to an <article>" definition.

So to start with I want the <aside> to be taken out of the flow of the page and positioned with absolute reference to the main text:

.popup{ position:relative;}

.popup > aside{
    position:absolute;
    bottom:120%;
    left:0;
    background: white;
    color:black;
    border:1px solid black;
    border-radius: 5px;
    padding:5px;
    width: 200px;
}

(with some border-radius for good measure):

Demo

The main text's CSS is taken from the great twitter bootstrap, and isn't necessary for the demo but is nice eye candy!

Now comes the challenging bit: how to do the tag at the bottom? My first thought was to use a "V" in the content of a psudo-class, positioned correctly, but that just looked weird! So I turned to a nicety of the CCS border spec: the ability to make triangles with CSS.