Posting this here because I just ran into the problem and couldn’t find a solution on the interwebs.
If you’re using Mysql Administrator on a Mac and you try to schedule an automated backup only to find your SQL backups only a few lines long. You probably won’t see an error anywhere, either. Here’s your fix:
Go to Preferences and to the General section. Change the password storage type from Keychain to Obscured. The problem is that Mac OS won’t let the automated program have access to the Keychain, so it can’t connect to your database and get to work.
Okay so having never bothered playing with Mozilla Add-Ons, I was a bit frustrated with the lagging behind from Chris Pederick, author of the Web Developer extension. All that is needed is an update to the compatibility maximum version in the install file and it would work with Firefox 3, but alas, it hasn’t been updated.
Well, I did a little bit of tinkering and figured out how to get it all working. For all you non-techies, I’ve made the xpi available so you can use it for your Firefox 3.* nice an easily. Right click an Save As the file linked below, then use Firefox to open it (File > Open) and continue on as usual.
- In: Advanced | CSS | Design | Learn Development | website design
- Leave a Comment
It’s 2am and I’m up working on a website. It’s fairly typical. And while most people would doubt my productivity at such an hour given that I’m awake all day, I have proof of productivity (and creativity).
I was playing with a layout revision of one of my websites when I got to doing the links. Typically I do something plain-jane like this:
a:link, a:visited { color: #000; text-decoration: none; }
a:hover, a:active { color: #333; text-decoration: underline; }
That makes a neat little link that goes from plain black to a dark gray with an underline when hovered over. Nothing special. Of course, I mix in all sorts of fun colors and I do background color changes too. Tonight was different though.
I decided I wanted to do something to help visitors keep track of where they’d been by styling “visited” links differently. After seeing a few people (most notably Mike Davidson) do the little check boxes, I figured it wasn’t a half bad idea. Mike uses the :after pseudo selector to add the checkbox to visited links. Not a bad idea, but it won’t work in IE and it makes changing it on hover difficult and choppy. I had a better idea.
I used the background property. I had just used the same method for my list bullets, so it was still fresh in my mind. Simplified, we had the following:
a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
I used 60% because it achieved better alignment in my situation than center and it scales better than pixels. Now my little visited links had neat little checkboxes next to them. Awesome. But now my hover style didn’t look quite right since I was changing the background color on hover. This is when I started thinking…what if I could tell the browser to change the background on hover over a visited link? Well, it looks like you can:
a:link, a:visited { color: #000; text-decoration: none; }
a:visited { background: url(‘images/check.png’) right 60% no-repeat; }
a:visited:hover { background-image: url(‘images/check_hover.png’); }
I actually originally had the hover and visited pseudo-selectors swapped the other way around (:hover:visited) but IE didn’t want to cooperate, so I got to thinking what I was really telling it (apply this to anchor tags when they are being hovered over that are visited) and how it made more sense if I flipped it (apply this to anchor tags that have been visited when they are being hovered over). Sure enough, it worked like a charm.
NOTE: While this method does allow for more customization and it works with IE, Mike’s method is better from an accessibility standpoint since it doesn’t use an image.
If you’ve written much CSS, then you probably know that the different implementations of the CSS rules by each rendering engine are really frustrating. Firefox, Opera, IE5, IE6, IE7, Safari, and more all seem to have different interpretations of how your code should look. They make no exception with the use of different rules that allow you to center objects.
Some common ways are to use margin: 0 auto; on a block level element, and using text-align: center; on the parent of an inline element. Well, the auto sides setting on the margin rule doesn’t always act like it should, and you might not want all of your actual text centered. So here’s a better solution, albeit a bit more strict in it’s implementation:
#centerMe {
display: block;
position: absolute;
width: 500px;
left: 50%;
margin-left: -250px;
}
Okay so what’s going on here? With the left rule we’re forcing the left side of the object to be in the exact center of the screen. Since it’s then going to be too far to the right, we use the margin-left rule to bring it back by half of the width of the object. Obviously, this doesn’t work too well with dynamically sized objects, which is why I mentioned that it’s a bit strict; however, I think it’s an excellent way of getting around browser inconsistencies regarding margin: 0 auto;.
There’s been this long standing bug with IE and changing the src attribute to update the image. Under certain conditions, it causes the image to simply disappear. There are two well known solutions to this problem:
1.) Have an alert box popup immediately after the change.
2.) Use a setTimeout function.
Neither of these is exactly pretty. But fear not, there’s a new way to do this that’s really ingenious. Are you ready for it? Here it is in an example:
var src=”http://example.com/image.gif”;
document.getElementById(‘myimage’).src = src;
return false;
Did you catch that? Just add “return false;” immediately after the update to the image src! Hopefully this will save you an entire day of frustration. 😉
- In: Apple | internet | Safari | Web Browsers | website design
- 3 Comments
I have a friend who has been, like many others, totally sucked into the world of marketing called Apple. I don’t have anything against Apple, and I actually own a Mac and quite like a lot of the stuff that it does, but I’m the last person to fall for a marketing gimmick.
Like we all know, Apple is king of ooo-aaaaah marketing. They come up with glorified terms like “Breakthrough Internet communications device” that means that the phone has a browser and wifi. There’s nothing wrong with it, but I wish more people would see through it in some cases. Like the case of Safari.
“The best browser in the world.” That’s what Apple likes to call Safari, and from a marketing point, they should. The problem, however, is that people Mac Fanboys all propagate that line throughout everything and they really believe it. I mean, why shouldn’t they?
Safari is great! It really is the best. I mean, it looks good. It has and RSS reader build in, even though it doesn’t work that great. It can read HTML, XHTML, XML and more! It can execute JavaScript! It works with Flash! Um, it has a build in search box that only searches Google. OH! It does TABS…if you go into the preferences and enable them, anyways. I almost forgot, it has it’s own rendering engine so that websites look more like Apple thinks they should. Eh…and it does JavaScript it’s own way too. Hmm…it doesn’t follow those silly CSS standards! It restyles input elements the way Apple thinks they should look! F5 doesn’t do that irritating “Refresh” thing! Tab won’t select links so I can’t accidentally use my keyboard to browse instead of the non-ergonomic mouse that causes carpel tunnel!
Seriously now. Safari is just not a very matured browser. It’s sort of like a beta version of Mozilla blended with IE5. Sure, it looks good, but it really lacks what so many other browsers include. You can’t really customize it like Firefox with extensions and user styles. It doesn’t offer support for all of the standards like Opera…nor is it as fast at executing Javascript. It doesn’t even offer the nifty shortcuts that Internet Explorer offers.
Honestly, it’s a pain in the ass. Especially if you’re a website designer. It gives us just one more browser to test code in, and usually we have to make changes and sacrifices to allow Safari’s retarded engine to display the page as intended.
Crash Course: HTML
Posted on: November 24, 2006
Lets jump right into it here. HTML is based on tags. Each tag performs a specific function, and most tags have attributes that modify them. In HTML, tags are delimited (separated) by < and > signs. Here’s what a tag should look like:
<tagname attribute=”value” attribute=”value”>content</tagname>
As you can see, the syntax is very simple. The tag name comes first. Some tags are <b>, which makes the content appear boldfaced, <i> which makes the content appear italicized, and <br> which is considered a line-break…aka a new line. A tag doesn’t have to have any attributes, but some, like the img tag require attributes.
Not all tags have endtags (</tagname>) either. Linebreak (<br>) tags, for example, do not need to be closed…in fact…they can’t be. Paragraph tags (<p>) don’t have to be closed either, though they can be.
Here’s a list of common tags:
<b> – Bold text
<i> – Italic text
<u> – Underlined text
<img> – Display an image. Common attributes for an img tag are src (the URL of the image), width, height, and alt (alternate text in the cast that the image cannot be displayed).
<br> – line break
<p> – Paragraph. By default this places two linebreaks before the content and two linebreaks after the content if explicitly closed with </p>.
You’ll almost certainly find that there isn’t much to be done with the above tags. You really can’t create anything fancy, and even doing modest styling is difficult. This is where CSS, tables, and divs come into play. Since divs are harder to grasp the concept of, I’ll only explain tables.
<table> Creates a new table.
<tr> Creates a new row in a table.
<td> Creates a new cell within a row.
When you envision a table, think of a chart or spreadsheet. It has rows and columns, which define individual cells. In an HTML table you certainly have rows and columns, but you do not explicitly set columns, rather, the number of columns is defined by how many cells are in a row.
To create a simple table with numbers 1 and 2 in the top cells and 3 and 4 in the bottoms cells, here’s what we would do:
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
We created our table with the <table> tag. Then we created our first row with the <tr> tag. We created 2 cells by placing 2 <td> tags in that first row. Then we closed the row and opened a new one. We created two cells in this row as well, then closed it and the table. This table will display as a 2×2 table, meaning it has 2 rows and 2 columns.
You can use a table to position things on your page better. You can create a table to display content on the left or right of your menu, for example. A very large percentage of websites use tables to layout their content. I strongly suggest you view the source of websites you visit to get a better understanding of how they lay out their website.
With this I leave you. This is by no means an all inclusive session on HTML. It is, as the title declares, a crash-course.
I’m currently about half-way finished with a project that allows a user to check their Myspace Mail inbox through WML and WAP (mobile internet standards). The user simply visits this service, dubbed mBridge at the moment, on their mobile phone. They will be prompted for their Myspace login information. mBridge will pass the credentials on to Myspace and retrieve the 10 most recent messages, strip any code, and display them for the user to read. For those of you interested in how this works, read on.
First, mBridge has a login page written in WML that includes a form allowing the user to type their email and password for Myspace. After the user submits this information, mBridge will take it and use it to connect to Myspace via sockets. A socket is opened to myspace.com, headers for the homepage are written, and a token is retrieved. mBridge then opens a socket to login.myspace.com and uses a POST request to send the user credentials. After a few redirects and setting of cookies, we have a valid session with Myspace. mBridge retrieves the mail center page and uses a regex to grab the dates on all of the messages, their subjects, and the message ids of all of them. Now we open a socket for each message found in the inbox and retrieve the content.
The subject lines are stripped of repetitive “RE:” flags and the messages are stripped of code that won’t display properly in a mobile browser. The user is sent a list of links to each of the messages for them to read. When they read a message, they have a link to respond to the message.
When a message is sent, we log back in, visit the mail center, read the message, simulate a click on the reply button, and insert the mobile users response in the field before clicking send.
Will Myspace try to stop this from happening? While it’s possible that they will change the login method, links, or method for sending message, we can always adapt to it. If your browser can login, so can a script. It is also possible that they will incorporate JavaScript into the service to set cookies that we would otherwise miss with a script, but we can always determine the behavior of the script and make it work no problem. It is possible for Myspace to start blocking our IP address, but we can go buy more. Myspace can force users to verify a CAPTCHA before logging in, but we will develop OCR that can answer them just as accurately as a human, or pass them on to the mobile user and allow them to answer them.
The only thing Myspace might do is try to shut us down through legal methods. I’m not aware of anything illegal about what mBridge does, though I’m not a lawyer. I’d hope that since Myspace does not have a service competing with this they won’t get their panties in a bunch that their customers don’t have to login to something they made to get their messages, but really, can they continue to expect people to put up with a lack of updates, no integration with mobile phones, and constant errors?
- In: CSS | Design | Intermediate | Learn Development | website design
- 4 Comments
There’s a rather unknown property in CSS called text-transform. It allows you to force all the text for a particular element to be transformed to UPPERCASE, Proper Case, or lowercase.
strong {
text-transform: lowercase; /* force text to lowercase */
text-transform: uppercase; /* force text to uppercase */
text-transform: capitalize; /* force text to proper case */
}
It’s quite useful for making your links stand out, or making sure that all the links in your menu bar are uppercase. You can also use it in association with :hover, :active, :visited, and :link to make your links go all uppercase when hovered over.
Did I mention that you can also use this to force text to become Proper Case (so the first letter in each word is capitalized)? That means if you aren’t going to need to store the information differently, you don’t need to bother using a server side language to change text to proper case, you can just set your CSS up right!
Some other cool uses for this include making all the text entered in a CAPTCHA input text field uppercase so the user doesn’t have any question as to whether the CAPTCHA is case sensitive or not (note, this will only affect the display, so data sent to your scripts might not have caps), and showing the active link as uppercase, instead of changing the color or underlining it!
- In: Beginner | CSS | Design | Learn Development | website design
- Leave a Comment
Centering your tables and divs can be confusing since not all browsers play nice with applying the parent element’s text-align attribute to block-level elements. No worries though, there is a quick and easy way to center any block level element.
margin: 5px auto;
As you should already know, when you set margin or padding you can alter all the sides individually like this:
attribute: top left bottom right;
attribute: topandbottom sides;
attribute: top sides bottom;
So in the example above, we set the margin for the top and bottom to 5px and the sides to auto. When you set the sides to auto, the browser will center it in it’s parent element because it makes the margins the same on each side. You could also set the top and bottom separately like this:
margin: 5px auto 10px;
So there you have it: the magic way of centering block-level elements in CSS!
DevHints 
You must be logged in to post a comment.