Archive for July, 2007|Monthly archive page
huge list of web development tools
Leave a Comment-
Web Development Toolbox: 120+ Web Development Resources
If you think you know every web development tool in the world by now, think again. Here’s some you never heard of.
Rendering, logos and kids programming away
-
I don’t do rendering, but if you do you need this
These guys render for you, if you don’t have the time or the power. Just submit your files and they send you the result. -
lots of logos
This book is filled with logos. Just like the web design index this is an excellent tool to bring to client meetings and get a feel of what they want you to make. -
Teach a Kid to Program / Wired How To’s
I am definitely going to try out some of these languages (just for myself, not for my kid, haha, he is two years old).
float:center
Unfortunately float:center is not valid CSS, no matter how much we would like it to be. And God knows I tried. The thing with floats is that the left and right property really make them go to the left of their (floating) container. The problem you can get in to is with a series of boxes that you want to have floating alongside, and then centered in the middle of the site.
Let’s say for example you want to have three buttons next to each other, spread out over the full width of your site, and they all link to some section of your site, say:
- My Portfolio
- About CSS
- Blog
In addition, you want it to be viewable on a really small screen, as a PDA or phone browser, and the easiest way you think would be to put them floating, so they would automatically wrap. This is usually a good idea, however, in this case you also want the buttons to be smack left aligned when viewed on a small screen.
There just is no solution for that. The only thing that comes close is giving all these buttons a fixed width (don’t get me started on percentages, it just won’t work). Make sure the sum of the widths equals the width of the container. So if I have a site of 660px, I would give every box a width of 200px and add 10px padding on every side of each box.
So
- Box A: 10+200+10 = 220px
- Box B: 10+200+10 = 220px
- Box C: 10+200+10 = 220px
The only problem is that when you make the window smaller the boxes all have a little indentation on the left.
This is the CSS you would use
.container {
width: 660px;
margin:0 auto;
display:block; }
.button {
width:200px;
padding:10px;
background-color: gray;
border:1px solid black; }
Of course you could do the same thing with ems.
Update: this problem was recently solved by Firefox 3.0. As of this version all major browsers, including IE6 have support for inline-block. When you use inline-block, you don’t need floats. Put it on the boxes (as in the above example Box a,b and c). You don’t have to specify a width, and by putting text-align:center on the container the boxes will automatically be centered, no matter how many boxes you have.
cool depiction of of the web 2.0 world
-
Information Architects Japan » iA Notebook » Web Trend Map 2007 Version 2.0
The information architects have outdone themselves, creating an interesting visual representation of web2.0 (or you could say of the popular web). I think if one of the big stations on this map are not known to you, you should look around for a while. I k
CSS for XML in Firefox
I always assumed that XML was not stylable in normal HTML documents, it being unable to conform to the HTML DTD. I tried in Internet Explorer a long time ago, and found out that XSLT was the only way to do this. And that is too bad, since it requires a lot more thought.
I was very surprised when at one time I accidentally threw generated XML into an XHTML document, and the content actually showed with a lot of errors and warning, but displaying nonetheless. I applied styles, and hey, it works!
In Opera and IE nothing shows up.
Here’s an example, HTML mixed with CSS first (I cannot use the source code tag here, due to WordPress.com censoring of my tags).
<title>CSS for XML</title> <h1>This is an example of mixing CSS and XML</h1> <xml> <language> <name>php</php> <version>5.0</version> </language> <language> <name>javascript</php> <version>1.3</version> </language> <language> <name>python</php> <version>1.0</version> </language> <language> <name>ruby</php> <version>1.0</version> </language> </xml>
And here’s the styling
language {
float:left;
width: 8em;
height: 3em;
border:.3em solid #09f;
margin-left:2em;
padding:10px;
background: #06f;
color: white;
text-transform:uppercase;
text-align:center;
-moz-border-radius: 1em 1em 1em 1em;
}
version {
clear:both;
display:block;
text-align:center;
font-size:.9em;
color: #000;
background-color: white;
-moz-border-radius: 1em 1em 1em 1em;
}
A site created completely in the kitchen
-
No one belongs here more than you. Stories by Miranda July
You just have to see this website. It took so long to make, and it has some remarkable coding.
-
This is someone I went to school with
I would expect him to have his own music online somewhere! He used to make music already when I was studying (long time ago)
Toot tone – no need to fart anymore
Toot Tone – the newest gadget
I thought this was quite funny. I wonder if it is a TV commercial, and if so, what company would make these? They’re not really selling anything… are they?
confessions, lies and secrets for all
-
duTell – what du you have to say? / Published
An interesting idea this is: instead of copying digg and letting users vote for urls, you let them just post their thoughts, ideas, jokes. secrets and confessions. I think there is a market for confession/lies/secrets websites.
font heaven: sIFR tools
-
Convert TrueType Font to Sifr Flash File
Looking into sIFR lately. It’s a great technology, and this online conversion tool makes it easier. Note: not to be used for sIFR3.
-
A big list of sIFR font files (SWF), ready to be use, all free.
-
Adding special effects to images (so no, it’s not used for css image replacement).
I got a bit weird impression when I first saw this. It seems like most of it can be done using javascript anyway. Nevertheless, there may be more to it.
now what is the font used in this image?
-
Why haven’t I found this any sooner??? WhatTheFont just uses your image and analyses it to find out what font is used to create the image. Too bad this isn’t automatically done by Photoshop. Now there’s an idea for a plugin! Have Font!
-
And another one that recognizes fonts, but this time you have to do the recognizing work, and the program leads you though a series of questions (interrogates you really) to find out what find it is you’re looking at. No upload required.
