Category: CSS

Posted on

Why is this Website Garbled?

DIYthemes site on Chrome

I use Thesis from DIYthemes for this blog, and have found it to be a very versatile system for customizing their themes. However, I saw that my HTML 5 validation was failing due in part to the use of deprecated attributes on a link tag. I decided to report the problem via the DIYthemes website, and found something very strange!

DIYthemes site on Chrome
This is how the DIYthemes website looked on Chrome.

At first I thought that perhaps I had ended up on their page in a foreign language, or maybe their site had been hacked. When I viewed the HTML source, the text appeared as it should. If I selected some of the text and copied and pasted it into mt text editor, the missing letters were there! Perhaps a JavaScript was running that hid certain letters?

When I opened the page in Internet Explorer 11, the page looked correct:

DIYthemes on IE11
How the website looked on IE 11.

At this point, I took a look at the Chrome DevTools window (you can use F12 to get there) to see if that would yield the information I needed. I saw a warning in the Console pane that might lead to an answer: “Failed to decode downloaded font: data:application/font-woff…”

DevTools window on DIYthemes page
The Chrome Developer Tools window can be very helpful!

By turning off the font-family tags in the DevTools window, I watched the website begin to look normal, albeit in a more generic font than what the site is supposed to use. So apparently, if a font is not properly decoded by the browser, it can omit characters and cause the site to look like the first picture above.

I’m not yet certain why my Chrome browser did not decode the font, where IE 11 did. This could be a bug on the DIYthemes site, or a problem with Chrome. In any case, this error can happen for a number of reasons, and some of those reasons can be found on Stack Overflow.

Posted on

Using PHP to Scrape the Report Card from a Code School Profile – Part 2

CodeSchool logo

Earlier this week, I described how to use PHP to scrape the report card from a Code School profile. Now, it must be displayed. I chose to display mine in the sidebar of my blog. To do this, jQuery and CSS will be your friends. It’s pretty simple, and this isn’t the only way to do it. However, in this implementation, it is important that the name of the querystring parameter used in the PHP script (in this case, “nick”) matches the one in the jQuery function call below. Likewise, the id attribute of the div element must also match the one in the jQuery statement.

(Update: the CSS code below should be updated in accordance with this change to prevent bullets from appearing between the badges in the “Master Status” section.)

<style>
#codeschool {
   text-align: center;
   vertical-align: middle;
}

.badge-img {
   display:block !important;
   margin-left: auto;
   margin-right: auto;
}

.pr-avatar {
   display:block;
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 10px;
}
</style>
<div id="codeschool">
</div>
<br />
<script>
(function($) {
$("#codeschool").load("/codeschool/codeschool.php?nick=DeepInTheCode");
})(jQuery);
</script>

Well, that’s it. If you debug the client-side code on both your page and the Code School profile page, you’ll see that there are path elements in the Code School script that cause the partial opacity on uncompleted paths. This is presumably done with other JavaScripts and CSS on the Code School site. I haven’t tried bringing that functionality here as yet. Perhaps for another time…