-
I'm happy to announce mywebsit.es, a visual bookmarks directory. It's similar to opera's quick dial or chrome's thumbnail start page but has a larger degree of flexibility. By using open id it shouldn't take more than 10 seconds to create an account.From a technical standpoint it combines a qt webkit ruby class that's being called through xvfb by a sinatra app which acts as an api. This api is being called by a rails application that manages the actual bookmarks and saved screenshots.I would appreciate it if you would try it out. -
I was running a rake task that launched a third party proprietary binary that handled some files. The process was usually fast, lasting about two or three seconds per file although sometimes it would just lock up and become unresponsive while still pegging the cpu at 100%.While I love a good challenge, there are times when a battle proven solution is preferable.Fortunetly for me, there was a *nix command named timeout, that did exactly what I was looking for.The following would kill a running command with signal 9 (the equivalent of powering off the computer) if it runs longer than 30 seconds:timeout --signal=9 30s /some/commandSuffice to say, that I was so pleased of this solution that I'm going to use it everytime I can.A slight warning - the timeout command is provided by the coreutils package. While it was avaiable in Fedora, it wasn't on the staging machine I deployed it to, running CentOS. I did managed to get it working (without any problems) using the binary from my desktop machine.
-
In one of the projects I had been working on, I needed to upload a file with flash. Unfortunately flash doesn't pass any session information to the upload request, so it never got passed the authentication filter set up in the application controller.
The obvious solution was to pass the necessary session information along with the requested url as a get param. Rails 2.x+ uses a cookie based session store, which I wasn't too found of, as it meant I had to pass the entire session.
So I switched to an active record store to pass only the session id (request.session_options[:id]):rake db:sessions:create
Then added the following to the environment.rb file:config.action_controller.session_store = :active_record_store
And in the controller where the upload took place:prepend_before_filter :create_session_from_params, :only => [:my_flash_upload_method]
def my_flash_upload_method
# save file for the logged in user
end
private
def create_session_from_params
session_data = ActiveRecord::SessionStore::Session.find_by_session_id(params[:sid]).data
session_data.each{ |k,v| session[k] = v }
end
And that's it. I can now read the session information as if it's a normal request.
-
Do you have a php website powered by a mysql database that doesn't render your utf8 characters properly?
Changed the table encoding from the default latin1 to utf8 and it's still not working?
Well, you have to change the mysql connection encoding as well:mysql_query("SET NAMES 'utf8'");
Run this after connecting to the database. -
It's pretty common these days to integrate widgets from several sources and aggregate them to your website.
In an ideal world you would simply parse your api response(an xml for example) and display it on your page.
While this doesn't include javascript widgets, these are some thoughts I gathered which may prove useful:
Always cache
Cache the api response or the page fragment being rendered, otherwise your website will load slowly. It's not only about speed, but most api providers request this. So while you may get away without caching for a while, you may find your self banned after a traffic spike.
Make sure you write the code efficient
While I consider this a newbies tip, I wouldn't had mentioned it if I had not encounterd it.
Never do this:foreach(getFeedContent() as $entry) {
// display code
}
At each iteration the server would try to fetch and parse the feed.
So at a basic level you should have something in the lines of:$entries = getFeedContent();
foreach($entries as $entry) {
// display code
}
Don't assume that you'll get a valid response
Sometimes your provider may send you an invalid/blank response. If this is happening often make sure you check its integrity before caching it. This way you won't be stuck with an empty section in your page for the period the page has been cached. Additionally make sure this check is done inside your actual code as well so that you don't display the affected section or at least have it degrade to a nice custom error message.
Protect your layout
If you have images inside your response and intend to use them, scale them to a predefined maximum size and store them on your server. If they always have fixed proportions make sure that they actually stay fixed by adding the width and height attributes. This will also keep the page elements size constant, avoiding the erratic text rearrangement while the page loads.
If your widgets are user driven - be it latest comments or what your cat twitted it's always a good idea to hide long words.
So when someone writes Hellooooooo (and multiply that "o" ten fold), simply use: "overflow: hidden" on your text container. To add a touch of finesse because everyone loves IE, use "overflow: ellipsis" in it's conditional stylesheet.
Escape outputted text
From a security standpoint it's good to escape everything you output on the page (where possible).
From a w3c compliance standpoint your code may not always validate. For example: http://website.org/?param=x¶m2=y; & should be escaped into & Or you may have something more serious such as an unclosed tag, yet it's very unlikely.
Hopefully this advice will leave your widgets to a boring yet stable experience.
-
Sometimes I run a command on my machine which may take quite some time until completion. I used to check out its status in the terminal I launched it from periodically. Yet there's an easier way by queueing a message via notify-send or something more obtrusive with zenity.
sleep 5 && notify-send "Finished task"
sleep 15 && zenity --info --text="Finished long task"
You may take it literally as well, but sleep is obviously my time consuming task. -
A static website usually has a common layout and unique content across pages. Changing the layout means changing every page - and it does happen, perhaps you have to add a javascript tracking code or correct a minor typo - a daunting task for something so trivial. It's really no wonder that most developers use SSI or php includes to ease this task.
I'm going to show you an alternate way of separating your content from the actual layout without using any server side code, by using XSLT.
Before venturing any further, here is what you should know:
Pros:
- No server side coding. Just copy the code on any server and it will work. Your server will still have to display the proper index file though (index.xml).
- It's fast. Especially if you're running a server that handles static files very fast such as lighttpd or nginx
Cons:
- SEO impaired. It's xml so it's easier to parse, yet it will probably rank lower because the XSL code may not be properly parsed by all search engines
- limited to browsers that support XSLT. Unless you are concerned about Links or Konqueror this is a non issue. Major browsers that support it include: Firefox, IE6+, Safari, Chrome, Opera
If you're still with me let's begin.
Create an xml file named index.xml. Paste the following code:<?xml version="1.0" encoding="UTF-8"?>
<?xml-stylesheet type="text/xsl" href="layout.xsl"?>
<page>
<content>
<p>
Welcome.<br />
This is the default home page.
</p>
</content>
</page>
The content tag represents the unique code that it will change from page to page while the actual layout will be handled by the xsl file defined on the second row.
Create a file named layout.xsl and paste the following code:<?xml version="1.0"?>
<xsl:stylesheet version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output method="html"
doctype-system="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN" />
<xsl:template match="/">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
</head>
<body>
<div id="container">
<div id="header">
<h1>My Website</h1>
<ul class="navigation">
<li>
<a href="index.xml">Home</a>
</li>
<li>
<a href="about.xml">About</a>
</li>
<li>
<a href="contact.xml">Contact</a>
</li>
</ul>
</div>
<div id="content">
<xsl:copy-of select="page/content" />
</div>
<div id="footer">
<p>Lorem ipsum dolor sit. © 2009</p>
</div>
</div>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
Look over the xsl output statement. It's set to html in order for the browsers to render the xml file as an html; additionaly we set a doctype. This is particulary important for Internet Explorer. Omitting the doctype will trigger quirks mode.
Inside the content div we get the actual page content. You probably noticed the use of the "copy-of" element. The difference between it and "value-of" is that it copies the entire node, preserving the html tags inside, unlike the latter.
Let's style the page.* {
margin: 0;
padding: 0;
}
a {
color: #00f;
}
ul li {
list-style-type: none;
}
body {
background-color: #fff;
font-family: arial, sans-serif;
line-height: 18px;
font-size: 12px;
color: #333;
}
#container {
width: 940px;
margin: 20px auto;
padding: 15px 10px;
border: 1px solid #ccc;
background-color: #eee;
}
#container #header h1 {
font-size: 50px;
margin: 10px 0 30px 0;
}
#container #header ul.navigation li {
display: inline;
}
#container #header ul.navigation li a {
display: block;
float: left;
padding: 10px;
border: 1px solid #000;
margin-right: 10px;
text-decoration: none;
color: #000;
}
#container #header ul.navigation li a:hover,
#container #header ul.navigation li a.selected {
background-color: #fff;
}
#container #content {
clear: left;
padding: 30px 0;
}
#container #footer {
font-style: oblique;
}
As it turns out static layouts are not that static. The page title should change across pages, and the navigation menu should highlight the current page item.
Inside our index.xml file, we'll add these properties. I'm assigning them as attributes, but these could had very well been tags.<page title="Welcome" selected-navigation-item="home">
Next, back in our xsl file, inside the head tags add the title:<title><xsl:value-of select="page/@title"/></title>
For the menu we'll have to add the selected class for current navigation item:<ul class="navigation">
<li>
<a href="index.xml">
<xsl:if test="page/@selected-navigation-item = 'home'">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
Home
</a>
</li>
<li>
<a href="about.xml">
<xsl:if test="page/@selected-navigation-item = 'about'">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
About
</a>
</li>
<li>
<a href="contact.xml">
<xsl:if test="page/@selected-navigation-item = 'contact'">
<xsl:attribute name="class">selected</xsl:attribute>
</xsl:if>
Contact
</a>
</li>
</ul>
Create the about.xml and contact.xml files by using the index.xml file.
This wraps it up.
- The final result
- Download files
While this approach does have it's fair share of downsides I think it's an interesting way of code separation that may be worth taking a closer look.
-
Quite often I look at the html source of some of the websites I visit. Last night I found this interesting snippet while browsing Deviantart:
<link href="http://st.deviantart.net/icons/favicon.ico" rel="icon"/>
<![if ! IE]>
<link href="http://i.deviantart.net/icons/favicon.png" rel="shortcut icon"/>
<![endif]>
A brilliant use of the non IE comment tag, forcing browsers that support it to use an alternate higher quality png image while degrading gracefully to a generic ico file. -
I really grew tired of having an old rss feed hit 404s on my website. From what I've read the best way to retire it is to respond with a 410 message, and the program that makes all those requests will stop, in theory any way.
I've added the following lines in my nginx conf:location ~ / {
if ($uri ~ "/my/old/url") {
return 410;
}
..
}
To make it prettier, I also added:error_page 410 /410.html
The syntax is a bit odd though, because the 410 ("It's gone") is not an http error code.
You can add additional codes such as 502 (bad gateway) or 503 (service not available) and style them to your hearts content. -
This happened to everyone at least once when working on a large application - a minor change to a stylesheet can break the layout on one or more pages. What's worse is that this usually goes unnoticed until the website hits production.
I think this is happening mostly because the bug affects only a seldom accessed page or a specific browser, the page is different from what the frontend developer envisioned (zero length text, variable picture width, etc) or a mixture of these issues.
You can easily avoid this situation by using inline styles as they affect just the current page, but then again it really defeats the advantage of an external stylesheet. Some CSS frameworks can ease the use of styling markup, but what would be really nice is not to touch the html at all if possible.
Since CSS doesn't have namespaces you can use an id as a point of reference.
For example in order to target the fieldsets and legend tags only on the contact page, you have something like this:#contact-page-wrapper fieldset {
..
}
#contact-page-wrapper fieldset legend {
..
}
Every class name is similar to a global variable. When you have thousands and thousands of lines of css, name clashes occur but cascaded selectors with a parent id can easily prevent this.
Placing an id on the container of the page (ex. the body tag) is a reliable method to target a specific page. For extra points, move that code into its own stylesheet and have a function dynamically load it.
While I'm sure you dear reader are thinking "I'm master over my own code", it's always nice to allow others add a line or two, while you're enjoying your much earned vacation without worrying about them breaking anything :-)