HTML

CSS Animations via Styles (similar to jQuery animations)

This explores how to do CSS-style based animations, where the animations are controlled via Javascript code that adds and deletes class names from the className property.

Battle of the Naming Conventions (how to avoid them in Django REST Framework)

Python and Django like snake_case.

AngularJS feels like Java, and likes camelCase.

HTML likes dashed-words.

MySQL docs like snake_case, but I see more PascalCase used in databases. It's case-sensitive, too.

Parse.com uses PascalCase for tables/classes, and camelCase for columns/properties/fields. That's like Java OOP.

Django likes to append _id to your primary keys.

So... the problems start to happen when one piece of named data is passed from one layer of the system to another. It's just a good policy to use the same names at all layers, if possible.

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.

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.

Why is Markdown Cool? (It might write better HTML than your's.)

I went to the UseR conference, and R-Markdown was all the rage. My boss/coworker/?? asked me what was so cool about it. I've been using plain Markdown around a year, and think it's kind of cool, but my initial impression was that Markdown was kind of lame.

CSS Hints for Technoids Who Forgot to Learn CSS

This article has been completely rewritten, and expanded into a book: CSS: An Overview for Software Developers.

This article is obsolete and will go away eventually, and replaced with an excerpt from the book.

----------------

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.)

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.

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.

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.

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.

Convert Web Pages into Kindle "Books" (Documents)

This script below will accept a URL parameter, download the HTML, convert it to a .mobi file with kindlegen, and copy the file onto your Kindle.

The "Impossible" Dream: Formatting Email So It Looks the Same on All the Clients and Browsers

I was having lots of problems with HTML email layouts. After doing some research, I came up with a method to get almost pixel-perfect positioning and sizing. It's not that hard.

[This page is over five years old and needs some updating, but the general rules apply: you need to use a subset of HTML and CSS, and target only the most popular email clients, and try to stick with standard HTML and CSS when possible.]

Convert Text to HTML PHP Function

How many times has this wheel been reinvented? According to Google searches, not enough - because I couldn't find a good one. Over the years, I've built this wheel a few times, so, here goes again. This is a lot better than the stock nl2br() function.

The attached code and test files show it off, and only a description follows.

Cleanup Your HTML: A Tag Closing Function

User-submitted HTML often contains small markup errors that can affect other parts of the page. The most common are unclosed tags that cause text to be bolded, italicized, or linked all the way down the page. The visual effect is catastrophic, though the error is really minor.

The html_close_tags() function scans HTML code, and generates a string that will close all the open tags. An easy way to use it is like this:


  $html = $html.html_close_tags($html);

Novice's Notebook

This is a repository of "novice" articles, written with the intent of driving more traffic to the site, and getting more ad clicks. It's pretty crass, I know, but the information may be very useful.

Syndicate content