Matt RaibleMatt Raible is a writer with a passion for software. Connect with him on LinkedIn.

The Angular Mini-Book The Angular Mini-Book is a guide to getting started with Angular. You'll learn how to develop a bare-bones application, test it, and deploy it. Then you'll move on to adding Bootstrap, Angular Material, continuous integration, and authentication.

Spring Boot is a popular framework for building REST APIs. You'll learn how to integrate Angular with Spring Boot and use security best practices like HTTPS and a content security policy.

For book updates, follow @angular_book on Twitter.

The JHipster Mini-Book The JHipster Mini-Book is a guide to getting started with hip technologies today: Angular, Bootstrap, and Spring Boot. All of these frameworks are wrapped up in an easy-to-use project called JHipster.

This book shows you how to build an app with JHipster, and guides you through the plethora of tools, techniques and options you can use. Furthermore, it explains the UI and API building blocks so you understand the underpinnings of your great application.

For book updates, follow @jhipster-book on Twitter.

10+ YEARS


Over 10 years ago, I wrote my first blog post. Since then, I've authored books, had kids, traveled the world, found Trish and blogged about it all.

target="_blank" in XHTML 1.0 Strict

I've always wondered how to add a target="_blank" to my XHTML 1.0 Strict pages. Thanks to this article, I now know a nice workaround.

Much to the chagrin of Web designers everywhere, the HTML 4.0 Strict and XHTML 1.0 Strict recommendations of the W3C no longer include the target attribute of the <a> tag. The Transitional versions of the specifications still include it, but by definition, these specs are on the way out.

The short and sweet version is to use the "rel" attribute to your advantage.

<a href="document.html" rel="external">external link</a>

And then use this short script to key off this attribute for adding a target="_blank" (using the DOM).

function externalLinks() {
 if (!document.getElementsByTagName) return;
 var anchors = document.getElementsByTagName("a");
 for (var i=0; i<anchors.length; i++) {
   var anchor = anchors[i];
   if (anchor.getAttribute("href") &&
       anchor.getAttribute("rel") == "external")
     anchor.target = "_blank";
 }
}
window.onload = externalLinks;


Throw this in an "external.js" file and add it to whatever pages you need it in.

<script type="text/javascript" src="/external.js"></script>

This LOT more work than I expected, but since it's written up in an actual article, I tend to believe that this is probably the shortest path to making this happen.

Posted in The Web at May 04 2003, 06:13:06 AM MDT 1 Comment

CSS Tabs and Cool Designs

I found some great stuff over at Zeldman's place this evening. First of all, I'm definitely going to bookmark this page at Webgraphics. It has a bunch of tabbed interface experiments using CSS - which will be very handy when integrating Roller's tab-based menu into struts-menu.

The second ultra-cool item of business is the very cool sites Zeldman lists in the following quote. If any of you Roller users are looking to design a new theme - I'd love to see any of these integrated into Roller.

Repeating background patterns, once the shame of web design, have recently made a tasteful comeback. (Background patterns are new grey.) If you can't design your own patterns, Squidfingers offers over 120 lovely background patterns you can use on your site. Go get 'em. If you can design your own backgrounds, K10k has launched a Pixel Pattern Exhibition and invites you to submit your designs.

Posted in The Web at May 03 2003, 10:35:37 PM MDT Add a Comment

Making your tables more accessible?

A question was asked on the display tag user list recently. Basically, the user wanted to add onmouseover and onmouseout events to the <tr>'s in a display-tag rendered table. Today, I decided to whip up a quick example of how to do this in a DOM-compliant browser. Just add an "id" attribute to your table, or use document.getElementsByTagName("table") (selecting the appropriate table in the array), and then put the following JavaScript block below your table. Of course, you must define a "tr.over" class in your CSS.

<script type="text/javascript">
    var table = document.getElementById("testTable");
    var rows = table.getElementsByTagName("tr");
    for (i=0; i < rows.length; i++) {
        rows[i].onmouseover = function() { this.className='over' };
        rows[i].onmouseout = function() { this.className='' };
    }
</script>

Now for an example:

       
       
       
       
       
       

Later: You can take this one step further and add an "onclick" event so that the user can edit the record the row is referring to. Let's pretend you have a link in the first <td> of the table. Inside this link is the recordId for that row. Adding an onclick to the row makes it easy to route the user to the details page for the record.

rows[i].onclick = function() {
    var cell = this.getElementsByTagName("td")[0];
    var link = cell.firstChild;
    var id = link.firstChild.nodeValue;
    location.href='URL to details page?recordId='+id;
    this.style.cursor="wait";
}

Posted in The Web at Apr 22 2003, 04:55:25 PM MDT 25 Comments

What's coming in XHTML 2.0

Mark Pilgrim has written an excellent introductory tutorial -- the first of several to come -- that is ostensibly about elements dropped from XHTML 2 (and what replaces them). But the piece works equally well as a general primer on how to make the transition from old-school presentational markup to modern, structural stuff. We've bookmarked this piece and look forward to reading next month's follow-up. [Zeldman]

From the article...

There are several key elements and attributes that are slated to be dropped from XHTML 2.

  1. <br /> has been dropped, replaced by <l>...</l>.
  2. The inline style attribute has been dropped, but there are still plenty of ways to define styles.
  3. <img /> has been dropped, replaced by <object>...</object>. As we'll see in next month's article, this may present some serious migration difficulties.
  4. HTML forms have been dropped, replaced by XForms. This is such a major change that it also deserves its own article.

Posted in The Web at Apr 17 2003, 02:57:54 PM MDT Add a Comment

MailTo: Links

I created a mailto: link today for our app at work. I used this page and Hiveware's Enkoder Form to hide the e-mail address from spammers. I even added a little browser information - since clicking on the link will send an e-mail to the help desk. Pretty cool - view source to see how I made the link below work.



Posted in The Web at Apr 16 2003, 01:05:01 PM MDT Add a Comment

What I learned from this weekend's re-design

This past weekend, I re-designed the Content Viewer's interface I wrote for OnPoint Digital. The major motivation behind the mini-project was to make the CV compatible with IE 5.5 and Opera 6 on Linux. It was a nightmare because of the lack of DHTML support in Opera, and also because of IE. So I came to the conclusion that I hate IE, Opera and Safari. My main reason is because they do everything so different - why don't they adhere to standards (Mozilla does)?! It makes web development so much harder when you have to test 5 browsers on 3 platforms. Hopefully I'm a better developer from the experience, and here's a short list of things I learned.

  • The CSS rule "position: fixed" doesn't work in IE, but works in all other browsers. This is a great rule, allowing you to pin an element to a location in a page. For instance, you can have a floating menu or footer using this. You can achieve similar functionality in IE using CSS Expressions (a non-standard extension). For instance, to keep a footer at the bottom of a page, you could use something like this:

    div#footer {
      position: absolute;
      top: expression(document.body.scrollTop + document.body.clientHeight - offsetHeight);
      left: expression(document.body.scrollLeft + document.body.clientWidth - offsetWidth);
    }

  • If you're using standards-compliant mode in IE 6, you have to use document.documentElement in place of document.body above.
  • Using standards-compliant mode in IE with frames will just create headaches for you and you'll end up with a horizontal scrollbar unless you make the body's width 95%. An easier way is to remove the doctype and not go with standards-compliant mode.
  • If you're supporting IE 6 and IE 5.5, remove the XHTML doctype (which makes IE 6 standards compliant) - this will make the two browser's behavior more consistent.
  • Opera 6 doesn't recognize the "background: transparent" css rule for <button>'s.
  • Opera 7 doesn't recognize the "width: 65px" css rule for buttons. Maybe this is only when you have an image on the button. I found that my buttons in Opera 7 were only as wide as the images on them.
  • In Opera 6, you can't copy the contents of one <div> to another <div>. With all the other browsers, it's easy using document.getElementById('divId').innerHTML. This does not exist in Opera - I'm still hoping to find a similar way of doing this.
  • Opera 7 and Safari have strange position bugs or maybe they're more standards-compliant than the other browsers, but I doubt it. In Opera 7, I have a buttons div that ends up at the top left corner of the header, when they should be aligned more in the middle and 100px from the left. In Safari, this same buttons <div> stacks the <button>'s on top of each other, rather than side-by-side, like you'd expect a row of buttons to look.

I'm glad I don't need to support Opera 7 or Safari for the app, but it's annoying that they behave so differently. Camino, of course, works great, and so does Mozilla. You write your JavaScript or CSS according to the standards, and it works in Mozilla, perfectly. What a beautiful browser.

Posted in The Web at Apr 16 2003, 08:31:31 AM MDT 2 Comments

Pinning Elements to your pages with CSS

I found this great example of how to pin elements of a page so they stay fixed at a certain location in a browser window. The bad part? It doesn't work in IE 5.5/6.0 on Windows. Since this is the most popular browser, it kinda makes me lose hope. The reason I'm intrigued by this CSS is because I have a requirement right now that I need to keep the footer of my page "pinned" to the bottom of the browser window. I suppose I could use frames, but I'd rather not. A workaround for IE might be to use a floating layer, but all the scripts I found seemed to fail when I added an XHTML DOCENGINE. That is why I curse IE today.

Update: I recieved a solution for my Experts-Exchange posting on this topic. It looks like I'll be able to use CSS expressions in IE to make this happen. Sweet! My latest code works in IE 6, Mozilla and Opera 7 - I hope it works in IE 5.5 and Opera 6.

Posted in The Web at Apr 07 2003, 03:39:19 PM MDT Add a Comment

Some CSS Lovin'

Good ol' Zeldman hooks us up with some cool web stuff today. First, you gotta dig these W3C Validator buttons that are purely CSS and Text - no images. Might be a good way to reduce bandwidth. Secondly, adjacent sibling selectors are a neat way to create rules-based layouts in which elements are controlled according to their contexts.

For instance, you can make a general rule where images have no margin at the top; then make another rule that says margins have 15px of white space at the top if they are preceded by an h3 header.

Finally, he inspires us to checkout Fast Company's re-designed all XHTML and CSS site. Very cool! I especially dig the font-size switcher in the top right corner.

Then there's Russ. Could he be on to something here or just blowin' smoke?

Someday soon, people will be judged by the quality of their weblogs like the Greeks once judged a person by the quality of their oration, or in the middle ages a person was judged by their science and art and later in the 1800s by their letters.

I don't know that weblogs will ever the that popular. The problem is that computers aren't even that popular. Sure, there's a lot, but the household penetration is not where it needs to be - and how many of online users have weblogs. Not many. How many of those that have weblogs are interesting - not many. Maybe he's onto something here - and we're already doing it. We are already judging each other in this community - those that have shorter blogrolls are just judging a little more ;-)

Posted in The Web at Apr 02 2003, 07:31:51 AM MST Add a Comment

Frames and XHTML

I'm in the midst of a small redesign of an application's UI for a client. The previous (and current) design uses an <iframe> to display most of the content in the app (it's an e-learning app). The driving forces behind the re-design are to 1) make the UI fluid rather than fixed height/width, and 2) make the application work on Opera 6 on Linux.

The re-design began with them sending me some screenshots of proposed layouts, and I used that to formulate what you see today. Basically, what they (and I) was hoping to accomplish was a fixed header/footer height and a fluid center. I tried doing this with an iframe, but had inconsistence results. So I tried consulting the experts. No one seemed to have a solution - and it seems that a fixed header/footer, fluid center is not possible with XHTML. So I resorted to using frames, which is what you see now. The reason I'm writing this post is to express my frustration with frames and the current XHTML Standards. You basically start a framed page with a <frameset> right? Any of you that have worked with frames know that it's a headache to get framespacing correct between all the browsers you need to support. Throw Netscape 4 into the mix, and consistency is virtually impossible. The problem with a frameset in XHMTL is that there are no supporting attributes for eliminating a frameset's spacing or border. From looking at the XHTML DTD, you can see that our old friends frameborder (="0" needed for Mozilla) and border (="0" needed for Opera) are missing:

<!ATTLIST frameset
    %coreattrs; 
    rows %MultiLengths; #IMPLIED
    cols %MultiLengths; #IMPLIED
    onload %Script; #IMPLIED
    onunload %Script; #IMPLIED
>

So I ended up following Zeldman's advice and K10K's examples and adding these attributes in. Why? Because they work to achieve the results I want. It doesn't validate, but it does work, so I'm going with it. If anyone has any alternatives to achieve borderless frames with CSS, please let me know.

The cool part about this post is that I get to tell you that the device we're targeting with Opera 6/Linux is the FreePad - a type of Tablet PC, but more like a wireless browser. Looks cool, that's for sure - and it's possible I'll even get a demo machine to test the new layout on.

FreePad

Posted in The Web at Mar 28 2003, 06:40:55 AM MST Add a Comment

Speed up your site

Zeldman hooks us up with another cool web tool, WebSiteOptimization.com.

Andrew B. King, author of Speed Up Your Site: Web Site Optimization (New Riders: 2003) and founder of Webreference.com, announces a free new service for web designers. Submit your URL to the Web Page Analyzer and it will tally the weight of your markup, images, CSS and JavaScript, then offer advice on how to improve your download and display time.

Here are my results - looks like I have too much HTML. I think I'll cut my displayed number of posts from 20 to 10.

Posted in The Web at Mar 25 2003, 04:04:21 PM MST Add a Comment