HTML

Fun/Annoying Social Media Buttons

Just something I was working on this weekend. Just a draft. I can't tell if this is playful, or annoying.

<html>
<body>
<style type="text/css">
#socialbuttons {
  font-family: Oswald;
  font-size: 18px;
  color: white;
  box-shadow: 0px 1px 3px #ddd;
}
#socialbuttons td.button {
  height: 27px;
  width: 130px;
  padding: 9px;
  opacity: 0.5;
  cursor: pointer;
}
#socialbuttons td.button:hover {
  opacity: 1.0;
}
#socialbuttons td img {
  height: 18px;
  vertical-align: baseline;
  filter: grayscale(100%);

Buttons vs. Links, and how to make buttons that look like links, and act like links, but aren't links.

This is a common UI element that hovers between "pattern" and "anti-pattern", but it's one I've seen in Drupal, WordPress, and a few other places. It's the button next to a link, where the link acts just like a button:

Technically, it's a violation of UI principles, to have a link that does something to the server's state. Anthony at uxmovement thinks so, but I disagree with him, because the way the link is next to the button, it's obvious that it complements the button.

The AngularJS File Upload Blues

I've got the angular file upload blues. It's hard to upload files in Angular JS. Who was to know?

One solution.

A nice module called angular-file-upload.

Chrome Rendering Glitch with Label's Padding in Points (PT), Even Values

I have to learn the Chromium bug reporting system. Found an interesting rendering bug if, on a label, you specify a padding with an even number of points (pt), the rendering is shifted up a little bit, and the border can disappear if it's adjacent to another element.

Two examples are attached, differing only in the amount of padding.

Maybe it's a difference in how the values are calculated and either rounded off or truncated.

The problem goes away if you use pixels instead of points.

CSS Hints for Technoids Who Forgot to Learn CSS

This article is being rewritten. If you want the latest, contact johnk at this domain.

The original was written: 2004-11-18 03:16:46 -0700.

Here's a bit of the article:

Dang, but it took me forever to learn CSS. Maybe I should have used a book. Here, I'm going to share with you the hard-found knowledge, presented using technical programmer jargon. (Revised in 2014.)

What is Cascading Style Sheets (CSS)? The typical answer is that it's a way to separate the way a page looks from the the underlying HTML, which describes the structure of the document.

Rich Text Editors for Email, in HTML Browsers

I've been working on this email layout hack, and started to build it from content, and came to the inevitable conclusion that email and web are two different media.

CSS Stylesheet Switcher Widget

This snippet of code can be modified and used to change the stylesheet on your page. I set it up to work against a layout extracted from Salsa, but it should work on generic pages. It's good for demos, discussions about a layout, trying different colors, etc.

What is HTML 5?

HTML 5 is a marketing term (kind of like "cloud computing") that has a somewhat imprecise technical meaning, but was created so that products and people could easily sum up their compatibility or know

Heuristics are Nice : (working toward) Facebook-style Previews

I was thinking about how facebook updates parse out the url, then construct a nice looking preview. I think what it takes is scanning the textarea for a url, and then using ajax to tell the server to fetch a summary of the page at the url. get the data back, and insert it into a template, and reveal it.

Making the Tumblr "Well" Layouts with CSS

So I was puzzling over how to make the "Well" style layout in Tumblr without Javascript.

PNG Colors are Wrong in Firefox (and how to deal with non-sRGB wide gamut monitors at work)

I created a PNG that was bright red, but in Firefox, it is a duller red. The fix was to remove the color profile from the PNG by using the tool TweakPNG.

WordPress: Exporting Articles into WordPress Extended RSS (WXR)

This is an example template file that will export articles from your bespoke CMS to and XML file that WordPress version 3.5 will import.

OMFG - the future of software, in Javascript, Xopus

Xopus is an XML editor, written in Javascript and HTML5. It's not just JS, but it's licensed software for your desktop. I'm blown away. This is Google Docs, Angry Birds, Yahoo Pipes level blown away. Check it out.

Undermining the Cache (Sharepoint?)

I was on the Ralphs website, and found some image URLs that looked like this:

Interstitial Ad in jQuery

Normally, you should use canned Javascript or canned PHP modules to implement web features, but sometimes, that can suck. Typically, these products, if they're popular, start to suffer from feature bloat. Such was the case with some code for "interstitials", which are those ads that pop up on some web pages, interrupting your reading. Popups have been around a long time, and the drop-in code is just really huge.

Syndicate content