There are many times that I just want to paste an image in a webpage. So I wrote this script that gets the image from the clipboard, converts it to a data URI and copies it again. The problem is, on ubuntu, when python quits it takes the clipboard with it to oblivion. So I had to open a window so that the clipboard doesn't empty. It's not pretty, but it works, and as a bonus you have the window with the data there to reuse. (triple click the window contents to select all)

#! /usr/bin/python

import pygtk
import gtk
import os
import sys
import base64
import cStringIO
import time

window = gtk.Window(gtk.WINDOW_TOPLEVEL)
clipboard = gtk.clipboard_get()
cbImage = clipboard.wait_for_image()
fH = cStringIO.StringIO()
cbImage.save_to_callback(fH.write, "png")
cbText = "data:image/png;base64," + base64.b64encode(fH.getvalue())
clipboard.set_text(cbText)
clipboard.store()

sw = gtk.ScrolledWindow()
sw.set_policy(gtk.POLICY_AUTOMATIC, gtk.POLICY_AUTOMATIC)

textview = gtk.TextView()
textbuffer = textview.get_buffer()
sw.add(textview)
sw.show()
window.add(sw)
textbuffer.set_text(cbText)

window.connect("destroy", gtk.main_quit)
window.show()
textview.show()
gtk.main()

#time.sleep(10)

In plain english, if you want to paste an image in a post on your favorite forum, copy it, double click the icon of my little app, and then paste it where the image url would be.

Αυτό το εφέ είναι αρκετά χρήσιμο όταν έχουμε ένα toolbar σε κάποια θέση της σελίδας (όχι πάνω πάνω) που δένει αισθητικά με το περιβάλλον, και έχει νόημα μόνο από εκεί και κάτω, αλλά το μεγάλο μέγεθος της σελίδας απαιτεί να είναι ορατό συνεχώς. Έτσι όταν αρχίζουμε να κατεβαίνουμε σιγά σιγά κάτω κάτω θέλουμε να "κολλήσει στην οροφή"

$(document).ready(function(){
    //ελέγχουμε αν η σελίδα φόρτωσε σε σημείο που πρέπει να εμφανιστεί
    //το toolbar
    showToolbarIfApplicable();
    //ελέγχουμε αν ο χρήστης έκανε scroll σε σημείο όπου πρέπει να
    //εμφανίσουμε το toolbar
    $(window).scroll(showToolbarIfApplicable);
})

function showToolbarIfApplicable(){
  //Αν είμαστε κάτω από το φυσικό ύψος της μπάρας μας
  if ($(window).scrollTop()>$('.navBar').offset().top) {
     //θέτουμε τη θέση της μπάρας σχετική με το παράθυρο και πάνω πάνω
     $('.navBar').css({position:'fixed', top : 0});
   } else {
     // αλλιώς επαναφέρουμε τις προηγούμενες ρυθμίσεις
     $('.navBarTool').fadeOut({position:'', top : ''});
   }
}

To wordpress γενικά έχει αρκετά εύχρηστο user interface παρά την εκτεταμένη λειτουργικότητα. Η απενεργοποίηση των σχολίων στα άρθρα όμως δεν είναι κάτι που είναι προφανές. Στα παρακάτω screenshots υπάρχουν τα 5 (!) βήματα για να κόψετε τα σχόλια από τα παλιά άρθρα σας, καθώς επίσης και η διαδικασία για να μην επιτρέπονται ούτε στα νέα άρθρα.

Είχα ένα μενού στοιχισμένο δεξια, και ήθελα να γίνει fixed (δηλαδή να μένει στο ίδιο μέρος καθώς η σελίδα θα κάνει scroll), χωρίς να χρειάζεται να του αλλάζω θέση κάθε φορά που προσθέτω ένα καινούριο αντικείμενο. Αυτό είναι εύκολο να το κάνεις στο δεξί άκρο της σελίδας, η σε κάποιο σημείο μετρημένο με pixels από την άκρη της σελίδας. Σε ένα πλήρως δυναμικό (fluid) layout αυτό δεν είναι ικανοποιητικό. Επίσης ήθελα ο χώρος που καταλαμβάνει το μενού να μην καλύπτεται από άλλα div που το ακολουθούν στο markup, με άλλα λόγια, το υπόλοιπο layout να μην μεταβληθεί καθόλου, καθώς το μενού θα γίνει από static -> fixed.

Η λύση είναι η εξής (λίγο βρόμικη αλλά λειτουργεί καλά)

<div>
     <div>
          <div>
               <a href="#">home</a>
               <a href="#">contact</a>
               ...
          </div>
     </div>
</div>

.menu {
text-align: right;
float: right;
}
.menu:after{
content: " ";
height: auto;
display: block;
float: none;
clear: both;
font-size: όσο και το μενού σας
}
.menu .fixed .abs{ right: 0; }
.fixed{ position: fixed; }
.abs { position: absolute; }

Υπ' όψιν ότι αν το element που θέλετε να κάνετε fixed έχει μεταβλητό ύψος το σύστημα αυτό δεν λειτουργεί.

Πλέον έχουμε καταλήξει όλοι στο πόσο σημαντικό είναι μια εφαρμογή να έχει καλό interface. Υπάρχουν αρκετοί κανόνες για να επιτευχθεί αυτό, οι οποίοι όμως είναι γενικού χαρακτήρα. Έτσι αποφασίσαμε να δημιουργήσουμε ένα δικό μας κανόνα σε ένα site με προσφορές ( Dealike ) που πρόσφατα υλοποιήσαμε.
Στο site αυτό υπάρχουν πολλά φίλτρα αναζήτησης. Μπορεί κάποιος να ψάξει προσφορές σε κάποιο γεωγραφικό διαμέρισμα και να τις ταξινομήσει αναλόγως την τιμή, την ημερομηνία λήξης κλπ. Επίσης υπάρχουν οι γενικές κατηγορίες που διαχωρίζουν τις προσφορές όπως ταξίδια, διασκέδαση, προϊόντα, φαγητό και άλλα. Ο χρήστης μπορεί ακόμα να κάνει click στο link κάποιου site για να δει τις προσφορές του. Ποια θα ήταν όμως η μορφή αυτών των links για να περιέχουν όσο το δυνατόν περισσότερη πληροφορία, χωρίς να χρειάζεται να επιβαρύνουμε το χρήστη με επιπλέον δεδομένα στην οθόνη του;
Έτσι , καταλήξαμε πως το μέγεθος αυτών των links θα μπορούσε να συμβολίζει τον αριθμό των προσφορών και το πόσο κόκκινο είναι τον αριθμό των clicks που έχει δεχτεί. Μπορείτε να ρίξετε και μια ματιά στο http://www.dealike.gr.

Σε πολλές ιστοσελίδες είναι απαραίτητο ένα σύστημα που να επιτρέπει στους χρήστες να βαθμολογήσουν ένα άρθρο, πρόγραμμα, ταινία κλπ

Σχεδιάζοντας ένα site που χρειαζόταν ένα τέτοιο σύστημα σκέφτηκα πως θα μπορούσε να γίνει μόνο με css. Μια αναζήτηση στο google αποκάλυψε διάφορες λύσεις που περιλάμβαναν δεκάδες γραμμές κώδικα και πολλαπλά επικαλυπτόμενα div's με σχετική ή απόλυτη τοποθέτηση. Σκέφτηκα πως θα πρέπει να υπάρχει πιο εύκολος τρόπος.

Ο κώδικας είναι μερικές μόνο γραμμές:

<style type="text/css">
.stars{
width: 120px;
height: 17px;
}
.stars .star{
width: 17px;
height: 17px;
padding: 1px;
display: inline-block;
background: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/fullstar.png') center center no-repeat;
}
.stars:hover .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/fullstar.png') !important;
}
.last ~ .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/emptystar.png');
}
.star:hover ~ .star{
background-image: url('http://outofbounds.gr/blog/wp-content/uploads//2011/09/emptystar.png') !important;
}
</style>

<div class="stars">
<div class="star"></div><div class="star"></div><div class="last star"></div><div class="star"></div><div class="star"></div>
</div>

In english

Searching for a pure css star rating bar I found only some solutions that involve dozens of css lines and many overlapping relatively and absolutely positioned elements, so I decided to make my own, simpler solution, which you can see above.

Browser compatibility: IE7+ and all other modern browsers.