css
Best CSS .Classes for CSS Toolbox
CSS is one of the most useful tools I have in my toolbox as a Web Developer. Having a CSS Toolbox containing good CSS Classes that you repeatedly use is quite helpful for us XHTML / web-standards / best-practices developers. Check out 10 of my favorite CSS classes.
.htaccess trick to show Alternate CSS file based on IP
This past week I updated my sites apache.css file for a site-redesign. I wanted to make changes to the .css file that only I could see, so that my regular traffic and site-visitors would still see the old version. Here's the elegant solution I came up with using .htaccess and mod_rewrite that works so well I'm sharing it with all you wonderful and incredible people reading my blog :)
CSS Background Image Sprites
Using a CSS Background Image Sprite with the CSS background-position and background-image I can display all these icons: . I can even have them show up anywhere on the page!
Adding Print Capability to your Site with CSS
Its really nice to be able to print out a webpage you are reading using your browsers built-in print feature. Using CSS you can easily transform your site into a print-friendly site.
Today I received an email from a visitor to my site requesting that I add a way to print site articles on AskApache
Review: Posh CSS
PoshCSS.com has links to nice and new CSS Articles. Don't worry, they aren't snobs. ;)
Online CSS Compression Tools
When you want to compress your CSS files, heres a list of some free online CSS compression tools. Of course I am partial to my own CSS Compression Tool.
CSS Cross-Browser Compatibility Tip
What I used to do when I was still learning CSS was to check the web page in each of the various problematic browsers to make sure the display stayed the same. I have several actual machines and several vmware virtual machines running various browers but I decided to skip all that extra time and effort and just use an online tool to do it for me. The tool views my page in all the various browsers and generates a screenshot image from each browser so that I can see if there are issues with my CSS.
PullQuotes using CSS
I looked at a lot of different ways to display quotes and pullquotes and even though the javascript solutions are very nice, esp. the 456bereastreet.com solution, I decided to just use CSS (Keep It Simple Stupid).
12 Lessons for Those Afraid of CSS
full article: alistapart.com
- Everything you know is wrong sort of
- It's not going to look exactly the same everywhere unless you're willing to face some grief and possibly not even then
- You will be forced to choose between the ideal and the practicable
- (with thanks to Antoine de Saint-Exupéry): Perfection is not when there's nothing to add, but when there's nothing to take away
- Some sites are steaming heaps of edge cases
- Longer lead times
Add CSS Class to body when Sidebar is Present
Here's the problem I was having while working on a custom theme for a client. Certain pages, posts, tag pages, archive pages, and custom pages either had the sidebar, or did not have the sidebar. The main content div #ContentW had a 72% width when the sidebar was present, otherwise it was 96%. The problem was that I dislike having to do things manually when they can be automated through code. What I was having to do was manually add/remove page-specific classes to the css file to reflect whether the sidebar was present on that page or not.
Javascript Snippet to Add HTML, CSS, and FEED Validation Links
Here's an example of validation links from the AskApache footer.
RSS | XHTML 1.1 | CSS 2.1
document.getElementById("validat").innerHTML += ' | <a href="http://feedvalidator.org/check.cgi?url=https://www.askapache.com/feed/">RSS</a> | <a href="http://validator.w3.org/check/referer?ss=1;outline=1;sp=1;debug">XHTML 1.1</a> | <a href="http://jigsaw.w3.org/css-validator/check/referer?warning=0">CSS 2.1</a>';
Compress CSS
Speed Up Sites with htaccess Caching
2 awesome ways to implement caching on your website using Apache .htaccess or httpd.conf. Both methods are extremely simple to set up and will dramatically speed up your site!Come On and Sprite for your Website
Let me show you an example that works so well I am using it right now on my site. Every page in fact. If you are a young or up and coming web developer with skills to pay the bills, lets make the future Net fast, learn about optimization and refactoring while you still have the chance.
THE Ultimate Htaccess
.htaccess is a very ancient configuration file for web servers, and is one of the most powerful configuration files most webmasters will ever come across. This htaccess guide shows off the very best of the best htaccess tricks and code snippets from hackers and server administrators.
You've come to the right place if you are looking to acquire mad skills for using .htaccess files!
Google Web Fonts for Programming and Code
Ok, so on a site like this one, there is a tremendous amount of 'code' styled with CSS fonts in a pre, code, var, tt, samp, or kbd html tag. When using an programming tool like VIM to write code it is shown beautifully using your OS fonts. So then, how can we get that same font beauty to be there on the web? And, of course the solution must use best-practices (and preferably only use CSS and (X)HTML).
Also, text effects! --> View Solution
Basic WordPress Theme Guide
This is a brief explanation of what is needed for an awesome theme, well awesome from my perspective. This is good stuff, memorize it.
mod_rewrite Fix for Caching Updated Files
Web Developers sometimes use file.ext?v=004 as a version control system to force visitors to use updated files. This is terrible. Instead link to apache-003.css and set it to be cached forever. When you change the file you just change the links to apache-004.css. That eliminates millions of bandwidth and resource robbing If-Modified-Since requests. You only need Apache with mod_rewrite, and 1-10 minutes!
Google: Let’s Make the Web Faster
Firefox Add-ons for Web Developers
Advanced Web Development by AskApache is a Firefox Collection I created since I'm always trying new Addons out and using multiple computers and I wanted a quick and easy way to install my favorite's and keep a running list. Firebug, YSlow, LastPass, and Web Developer are the only ones I always use regularly.
I like the idea of the last.fm but it's not as powerful as the site, which is awesome. Lately listening to Kings of Leon Radio...
Apache Compression, Vary, mod_deflate
Best Practices for Speeding Up Your Web Site with Htaccess
I have written more than a few articles detailing how to improve the speed of a website, and due to popular demand, this post will detail all the latest and greatest caching tricks and techniques that I utilize and love. The AskApache Best-Practices.
Actual Htaccess Files from My Server
#### No https except to wp-admin -
# If the request is empty ( implies fopen or normal file access by a php script )
RewriteCond %{THE_REQUEST} ^$ [OR]
# OR if the request if for wp-admin or wp-login.php
RewriteCond %{REQUEST_URI} ^/(wp-admin|wp-login.php).*$ [NC,OR]
# OR if the Referer is https
RewriteCond %{HTTP_REFERER} ^https://www.askapache.com/.*$ [NC]
# THEN skip the following rule, basically all this does is force https or badhost to be redirected
# BUT because of the above 3 rewritecond's, this won't break poorly written admin scripts
RewriteRule .* - [S=1]
RewriteCond %{HTTPS} =on [OR]
RewriteCond %{HTTP_HOST} !^www.askapache.com$ [NC]
RewriteRule .* https://www.askapache.com%{REQUEST_URI} [R=301,L]
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9} /(wp-admin/.*|wp-login.php.*) HTTP/ [NC]
RewriteCond %{HTTPS} !=on
RewriteRule .* https://%{SERVER_NAME}%{REQUEST_URI} [R=301,L]
Convert Image Base64 Encoder
Force Flash to show up top
Optimize a Website for Speed, Security, and Easy Management
Learn how to setup, configure, secure, optimize, and create a low-maintenance website the AskApache way. I'm piecing together all the hacks, tricks, methods, and ideas discussed throughout this blog and all across Netdom and glueing them all together to show you how to have the most optimized, crazy fastest, and best website setup I can think of.
Programming Fonts for the Web
The idea is to use CSS to have the browser display programming and code similar to the high-quality look of a developers machine, like this older screenshot of my VIM.
Getting flash to show up in front of content
I used to have a problem of controlling flash elements on my sites.. On one site we have 6 different flash flv movies that are all the same size and are in the same position on the page. But only 1 is displayed at a time based on what the user wants to watch. So the selected flash movie needs to have the highest stacking order/zIndex.
Skeleton .htaccess file for Powweb Hosting
If you have a Powweb Webhosting account, you will appreciate this simple skeleton .htaccess file for use on their systems.
Top methods for Faster, Speedier web sites
High Performance Web Site list of the best and newest methods to make web pages super fast using caching, compression, cache-control, etc.Random Bits, the podcast that gives you an insiders view
I was over at Alex King's blog today checking out his mobile web plugin for wordpress and I noticed some fresh podcasts from some of the industry's finest. The feeds are .mp3 and are easy to find and browse on the search-this.com site. They have some pretty nice articles over there as well..
SEO Secrets of AskApache Part 2
This is part II of the Advanced SEO used on AskApache.com Series and describes how to control which urls are indexed by Search Engines and how to move them higher up in Search Results.
Htaccess File Sample
Comprehensive .htaccess example file with advanced examples in 1 htaccess sample skeleton .htaccess file with the very best apache htaccess examples... Updated frequently based on detailed info from the Apache htaccess tutorial.
.htaccess mod_rewrite rewrite examples
A hit-list of some of my favorite mod_rewrite code snippets for .htaccess files
Htaccess Mod_Rewrite – Guidedddd
Best-practice Web Design Process
Mod_Rewrite Security
These are a few of the mod_rewrite uses that BlogSecurity declared pushed the boundaries of Mod_Rewrite! Some of these snippets are quite exotic and unlike anything you may have seen before, also only for those who understand them as they can kill a website pretty quick.
Tips on Writing WordPress Plugins
Thought I'd give you all the tips and tricks that I've learned and use when developing WordPress plugins.. which can be quite fun!
