Archives For css

This is the second of a two-part newsletter on “going big”. By “going big” I mean how one transitions from a Web site with little to moderate traffic, to one that can handle tons of traffic. The previous newsletter looked at going big from the macro perspective: theory, implementation, hardware, and networking. In this newsletter, I’ll look at the micro perspective: how to write code that scales well. And, as it turns out, this newsletter again got to be too big, so this is part one of two parts that makes up part two of the two-part series. (Huh?) In this newsletter, I’ll mostly focus on code. The next will mostly focus on the database.

Before going into details, I’m going to define what it means to be a “big” site. As I said in the previous newsletter, it actually depends upon the kind of content and activity the site has: X number of video requests is far more demanding than the same X number of mostly text pages. Likewise, X number of WordPress page requests is far more demanding than the same X number of static HTML page requests. For the purposes of this discussion, let’s say that “big” is a site that gets in the broad neighborhood of 100,000 to 500,000 pageviews per day. At that point (if not before), you’ll need more than one server to handle the load. (As a counterpoint, on the highest end, Netflix sometimes requires up to 20,000 servers at a single time.)

As always, questions, comments, and all feedback are much appreciated. And thanks for your interest in what I have to say and do!

Continue Reading...

CSS Resources

November 22, 2011

Someone, I forget whom, shared with me these two good CSS resources, and I thought I’d pass them along. The first is Make CSS3 Buttons That Are Extremely Fancy and the article explains exactly that. I’m not a graphics person, so being able to do something using only CSS is great for me (and being told exactly what to do is even better). A benefit of CSS buttons is that the user does not have to download the additional resources of all those extra images, especially when you factor in images for different states (hover et al.).

The other resource is ProCSSor, a CSS prettifier. It’s just a utility that you can drop a slew of CSS into and it will clean it up as you’d like. It will even work on CSS in an uploaded file or located on a provided URL.

I’m doing a final round of research before I begin writing my forthcoming JavaScript book and I came across some pretty good resources that I thought I’d share. (Actually, this is more of a half-truth, because I’ve already started writing the book and I’ll no doubt continue doing research while writing the book, but this is my last “have I forgotten anything that I should cover?” review.)

I’ve been targeting JavaScript information, so it’s no surprise that Mozilla, keepers of the JavaScript flame, would have wonderful information about the language on their site. This includes the JavaScript reference materials (i.e., all the objects, methods, etc.), a JavaScript primer, and some good articles. But Mozilla’s developers pages also do a great job of discussing HTML and CSS. The Mozilla “Learn How To Make Websites” section is particularly useful, especially for beginning Web developers.

One of the links at Mozilla’s pages took me to the developer’s section of the Opera Web browser’s site. I would recommend reading Opera’s WebPlatform Docs, a series of 51 articles on Web development, from design, to HTML, to Accessibility, on through CSS, and JavaScript. Another 11 articles have been added covering HTML5.

If Mozilla and Opera have good developer resources, it seems only logical that other browsers would, too. What I’ve found, though, at Apple’s (Safari) and Microsoft’s (Internet Explorer) Web sites isn’t on the same level as what Mozilla and Opera offer. In short, the resources at Apple and Microsoft tend to be more specific to their browsers. But check out the references mentioned above, you’ll have more than enough reading to do for some time!

I’m constantly running across different useful sites when it comes to choosing a Web page’s HTML, formatting, CSS, fonts, layout, and so forth. Here are a couple of notable ones:

FontTester, as you might expect, lets you play with different CSS and HTML options to adjust what fonts you use and how they are formatted. The page starts with up to three columns of sample text at the top. Then you can edit the properties of the individual columns to compare and contrast different effects. Once you have the look you like, including color, line height, indentation, and more, you can copy the corresponding CSS.

If you’re new to CSS, you might want to check out CSS Basics. I think it’s a fairly straightforward, easy to understand introduction to Cascading Style Sheets. Once you’ve grasped CSS fundamentals, and found yourself wanting more, check out the exhaustive 84 Amazingly Useful CSS Tips & Resources. There are links to LOTS of good content there; just give yourself time to kill and don’t forget to take good notes!

Once you’ve got a site fairly well developed, you ought to do the professional thing and check its accessibility. This is a pretty easy step to skip, especially if you don’t have personal experience in accessing sites using non-standard tools. Sitepoint put together an article worth reading called 12 Tools To Check Your Site’s Accessibility. Some are software plug-ins that work with Dreamweaver, Eclipse, Firefox, or Opera; other tools are Web based, just like those used to validate a site’s HTML. Besides increasing the potential number of viewers for your site, making it universally accessible may even be something that’s mandated by the client. For example, I do a lot of work for educational institutions and the federal government, both of which insist on sites being accessible.