3.8 brings together several of the features as plugins projects and while this isn’t our first rodeo, expect this to be more beta than usual. The headline things to test out in this release are:

• The new admin design, especially the responsive aspect of it. Try it out on different devices and browsers, see how it goes, especially the more complex pages like widgets or seldom-looked-at-places like Press This. Color schemes, which you can change on your profile, have also been spruced up.
• The dashboard homepage has been refreshed, poke and prod it.
• Choosing themes under Appearance is completely different, try to break it however possible.
• There’s a new default theme, Twenty Fourteen.
• Over 250 issues closed already.

Given how many things in the admin have changed it’s extra super duper important to test as many plugins and themes with admin pages against the new stuff. Also if you’re a developer consider how you can make your admin interface fit the MP6 aesthetic better.

As always, if you think you’ve found a bug, you can post to the Alpha/Beta area in the support forums. Or, if you’re comfortable writing a reproducible bug report, file one on the WordPress Trac. There, you can also find a list of known bugs and everything we’ve fixed so far.

Download WordPress 3.8 Beta 1 (zip) or use the WordPress Beta Tester plugin (you’ll want “bleeding edge nightlies”).

A few quick solutions

For those of us using the jQuery Java framework the “solution” is incredibly simple. Just call the following function in your header and all dotted borders are gone:

jQuery("a").focus(function(){this.blur()});

Using CSS it’s almost as simple (at least for all browsers except IE):

a:focus {outline-style: none;} 

Using basic JavaScript the following should do the trick:

for(var i=0;elm=document.links[i];i++)
{
elm.onfocus=function(){elm.blur();};
}

Some would probably say that this shouldn’t be done because the active/focus dotted border is there to show visitors who are using tabbed link selection which link is selected. But when we are using CSS we can style our own active/focus state and in this case the dotted border is not so necessary. I’ll appreciate your take on this as I’ve debated this “issue” with some of my clients on several occasions.

CSS rounded corners code

.corners {
	-moz-border-radius: 3px;
	-webkit-border-top-left-radius: 3px;
	-webkit-border-top-right-radius: 3px;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-bottom-right-radius: 3px;
	border-top-left-radius: 3px;
	border-top-right-radius: 3px;
	border-bottom-left-radius: 3px;
	border-bottom-right-radius: 3px;
}

As you can see the first line is specifically for Firefox, the next 4 for Safari/Chrome and the last 4 for any browser that fully supports CSS3.

The reason for keeping it separate is that you can add it like a second class to any style reference you are using within your HTML mark-up. For example, if you have defined the following styling to your submit button:

input.send {
	font:1.5em Arial, Helvetica, sans-serif;
	font-weight: bold;
	color:#eff;
	background: #036;
	border: 1px solid #369;
	height:30px;
	cursor:pointer;
	}
input.send:hover {
	border: 1px solid #036;
	}

Then you can add the following to get the desired result:

<input class="send corners" type="submit" value="Send" />

I’ll leave it with you to see the end result

Known limitations

It may come as no surprise that this effect isn’t visible in Internet Explorer. At least not on any versions I’ve tried. If you believe it is please let me know what version you are running, but for any version below 8 it definitely isn’t showing.

Conclusion

I believe it’s a nice little extra styling option that saves you the trouble of creating graphics for some parts of your site to get the desired effect. And although it isn’t supported by all browsers and versions it falls back nicely to standard borders so there’s really nothing to worry about.

Please feel free to share cool effects and additional tricks if you know any. I’d love to see what can be done using only CSS!

Well know you can get it too! After a bit of googeling I finally found the best emulations of all the OS X system fonts. If you just want to get the emulated Mac Lucida fonts go here.

The following support article from Microsoft explains how you can add a little code to the file header to keep the old behavior (emulate IE7). You can off course also assume that IE8 will behave like Opera, Safari and Firefox and just keep the rules for older IE versions (I think I prefer the latter if it turns out okay).

You can download and test IE8 Beta here.

Fingers crossed

Before I continue I’d like to mention Dean Edwards IE7 JavaScript library which makes Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6. That saves you the hassle of making tons of IE specific style sheets and embedding them using these conditional comments (bottom of page).

So with IE out of the way there’s still a few Opera and Safari “bugs” that may need attention. Instead of relying on JavaScript, which will be ignored by some browsers or users that have disabled Java, you may try this PHP approach that I successfully implemented on one of my sites today.

The simple approach

Detect the Safari browser and insert your css like this:

<?php if (strstr($_SERVER['HTTP_USER_AGENT'], 'Safari')) : ?>
    <style type="text/css">
    <!--
        div#safari{your-css-rules-here}
    -->
    </style>
<?php endif; ?>

Detect the Opera browser and insert your css like this:

<?php if (strstr($_SERVER['HTTP_USER_AGENT'], 'Opera')) : ?>
<style type="text/css">
    <!--
        div#opera{your-css-rules-here}
    -->
</style>
<?php endif; ?>

Couldn’t be any easier than that could it You may off course link to an external style sheet as well if you like. The above is just meant to illustrate the method. If you got an even easier way please feel free to share!

To participate you need to remove all CSS from your website, stripping it entirely of its design. However, I only noticed this today (too late for once) so I’ll be in for next year, for sure!

To read more about this initiative, and have a look at how a lot of your fellow bloggers look in the “nude, then you should visit naked.dustindiaz.com

markItUp! is not meant to be a “Full-Features-Out-of-the-Box”-editor. Instead it is a very lightweight, customizable and flexible engine made to meet the developer’s needs in their CMSes, blogs, forums or websites.

Note! markItUp! is not a WYSIWYG editor, and it never will be.

Visit Jay Salvat for more information, examples and to download the source.

The Spry framework is a way to incorporate XML, JSON or HTML data into pages using HTML, CSS, and a minimal amount of JavaScript, without the need for refreshing the entire page. Spry also provides easy to build and style widgets, providing advanced page elements for end users.

The Spry framework is HTML-centric, and easy to implement for users with basic knowledge of HTML, CSS and JavaScript. The framework was designed such that the markup is simple and the JavaScript is minimal. It can be used by anyone who is authoring for the web in their tool of choice.

To see what is possible using Spry, check out the Spry home page, that show the Spry framework in action.

The Spry prerelease download was updated today to support the shipping version of Adobe AIR. Visit Adobe Labs to  download the new version.

Recently W3C announced that the initial draft of HTML 5 is ready. The working draft is made by W3Cs HTML Working Group, consisting of almost 400 members from companies like AOL, Apple, Google, IBM, Microsoft, Mozilla, Nokia and Opera among others.

The web has changed dramatically since HTML 4 saw the day of light. Moving from static pages to advanced web applications and extensive use of multimedia.

W3C says Ajax and related innovations have pushed the need for a new standard that allows developers to create web applications that works on all platforms, both stationary and mobile.

The initial HTML 5 draft includes several news. Among them a new interface (API) for drawing 2 dimensional graphics, integration of sound and video, administration of persistent data storage on the client side and the possibility of on-line document editing (both in parts and full).

Presentation of common side elements are made easier through tags like section, footer, nav (for navigation) and figure. The latter is meant to add a title or image text to photos and other integrated content.

Some attributes to existing tags will no longer be supported since their functionality are handled better through CSS. One example is align, which is used with a lot of tags today and border in combination with table, img and object.

This specification defines the 5th major revision of the core language of the World Wide Web, HTML. In this version, new features are introduced to help Web application authors, new elements are introduced based on research into prevailing authoring practices, and special attention has been given to defining clear conformance criteria for user agents in an effort to improve interoperability. Developers may also want to read how HTML 5 differences from HTML 4.

Developers can choose between normal HTML syntax and XML syntax when constructing pages in HTML 5.

The future work on HTML 5 will remain public. Let’s just hope the browser companies (especially Microsoft) manages to follow the standards and deliver updates fast and frequently.

33,000 responses is a lot of data. To make sense of it, An Event Apart commissioned statisticians Alan Brickman and Larry Yu to translate raw data into meaningful findings. The findings are now nicely presented in a 80+ pages PDF presentation.

The findings we present here have never been seen before, because until now, no one has ever conducted public research to learn the facts of our profession. This report is not the last word on web work; it is only the beginning of a long conversation. Read, reflect, and let us hear from you.

Read the full story or skip directly to the download.

Digression: To improve the chances of people in the future finding themselves in a similar position, Rog wanted to try to raise a minimum of £10,000 while he felt able to do so. Mission is now accomplished! Rog has now completed this challenge and has surpassed his original target by raising more than £25,000 for charity. Congratulations!!

Anyway… He’s website, which I believe someone has created for him, are created using MS Word as the HTML editor. This has unfortunately resulted in a website being almost inaccessible for anyone using a browser not named IE.

Take a look at www.aroundwithrog.co.uk using IE and then try it in Opera, Firefox or anything else…

Someone should really redo his pages! A good cause deserves better.

Yousif over at TredoSoft has written a nice multiple IE installer which includes the following versions; IE3, IE4.01, IE5, IE5.5 and IE6. Combine that with the latest release of IE7 (now also for people without genuine Windows versions), and you can see how your pages looks through the eyes of Microsoft’s Internet Explorer from the early Internet ages until today.

Very handy but also very frustrating when you consider how far away Microsoft still are when it comes to keeping up with web standards etc.

The latest version fixes problems related to upper-case file names and also lets you specify the size of the overlay when opening iframed content.

Get the new code including examples from my download page.

Tested in IE, Opera, Safari and Firefox.

SWFObject is released under the MIT License.

Download SWFObject – Zip file, includes swfobject.js and the example html templates.