Joe's Blog

Stacks Image 2729
Stacks Image 2732
Stacks Image 2735
Stacks Image 2738
Stacks Image 2741
Stacks Image 2744
Stacks Image 2747
Stacks Image 2750

New Goodies for Stacks 2.5

Stacks 2.5 is the most exciting release that we have seen in over a year. It really has some killer features that you are going to love! I am not going to review the new features here. But I recommend that you check out shows 18 and 19 of the WeaverCast podcast for a full overview.

Now what is a new version of Stacks without some new goodies?!?

Font Awesome

Font Awesome Stack by Joe Workman

Font Awesome icons are an amazing way to display icons on your website in leu of a bunch of small images. Because Font Awesome is a font, you can scale the icons to any size without losing quality, even on retina displays. This stack set is the feature rich. You can style your icons beautifully with ease. There are also handy stacks for creating paragraph and list accents.

Visit the Font Awesome product page

Footnotes

Footnotes Stack by Joe Workman

Footnotes makes the entire process of placing footnotes onto your website completely painless. Footnotes has two different themes. Your footnotes can be displayed as a tooltip or styled content box that animates at the bottom of your page.

Visit the Footnotes product page

SoundCloud

SoundCloud Stack by Joe Workman

SoundCloud is pretty awesome. Its basically YouTube for audio. This stack allows you to easily embed songs, playlists and user streams directly onto your webpage. It works beautifully across all of your devices, even mobile.

Visit the SoundCloud product page

Placeholder (free)

Placeholder Stack by Joe Workman

Placeholder is an awesome way to throw in placeholder images onto your webpage. It supports two different image services: PlaceIMG and Placehold.it. There are tons of great options that let your customize the images so they look great in your mock-ups.

Visit the Placeholder product page

WeaverCast podcast is back!

If you have been around the RapidWeaver community long enough, you may recall that I started a live webcasts and video podcasts back in 2011. Sadly it only lasted about 4 months. Doing the live web broadcasts always had horrible technical difficulties every week. On top of that, editing the videos afterwards took forever because the shows were always 60-90 minutes long.

I wanted to bring back the WeaverCast podcast because it’s definitely a great resource for the RapidWeaver community. However, I decided to change up the format a bit. This time, the goal is to provide quick and concise tips for making you a better weaver. Episodes will never be longer than 10 minutes!

How to subscribe

There are several way to watch the podcast episodes.

WeaverCast 14 - Font Awesome

Today, I released episode 14. It’s the first episode with the new format. I review Font Awesome and how you can use it within your projects. If you have an extra 7 minutes in your day, it will be well worth it! :-)

Playing nice with Font Awesome 3 & 4

I am sure that most of you are aware that Font Awesome v4 was released a while ago and it’s not at all backwards compatible with v3. I have very mixed feelings about this. It makes migrating to the new version very labor intensive. I personally think that this was a bad call. However, there is no reason to cry over spilled milk. The new version of Font Awesome is really, well, awesome! It has a lot of great new features that you should really check out.

Sort-of-Backwards Compatibility with Font Awesome 3 and 4

For those of you that don’t know what I do, with my work, I don’t have control over the entire webpage and when else is added to it. So learning to play nicely within the sandbox becomes very critical. I want to start using the great new features in FA4 but what happens when FA3 is first? Since the font-family definitions has not changed in FA4, FA3 will win if its loaded into the DOM first.

Let’s look at the syntax difference between FA3 and FA4.

Font Awesome 3:
<i class="icon-twitter"></i>
Font Awesome 4:
<i class="fa fa-twitter"></i>

Therefore my cool new FA4 syntax flat out will not work and my icons will never be displayed if a different version of Font Awesome is loaded before me.

How do we fix this?

Assuming that we will be using FA4 moving forward, the solution is pretty simple! You simply need to add both the FA3 and FA4 classes to their icon elements.

<i class="icon-twitter fa fa-twitter"></i>

If you are using FA4 then this code will work regardless of the version of Font Awesome that is loaded!

There are edge cases where this won’t work obviously. Such as if you are trying to use one of the 11 new icons in FA4. In this case you could provide a FA3 fallback class. There may also be caveats with using some of the other new animation classes in FA4. I have not tested those yet. In theory, they should still work though.

CDN Soapbox

I’ve said this before and will say it again here… it’s really the best for our visitors if we all use the FA CDN. Font Awesome is BIG and loading it multiple times will really make a performance hit on a webpage. So if we all use the same CDN, our webpages won’t have this bottleneck. You can always get the most recent CDN details from the Font Awesome Getting Started page. However, as of this writing, the minified version is not displayed by default. I highly recommend that you use the minified version (see below). I’ve submitted an issue to the FA team so that they can hopefully fix that.

<link href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css" rel="stylesheet">

I hope that this helps everyone!

Jack - Your new best friend

I know that many of you have seen me talking about Jack for some time now. I am very happy to finally be able to release it to you all today. 

Jack will be that trusted utility that you will use all the time, over and over again. There are a lot of stacks out there that do general styles such as shadows, backgrounds, transparency, borders, etc. Jack is all of these and more built into one amazing stack. It also ships with 300+ background tile and border frame images. Jack will be your new best friend.

Jack will be replacing the Styled Stack. If you owned Styled Stack, you should have already received an email with instructions on how to obtain a discounted upgrade.

I hope that you all enjoy Jack. Its been a long time coming and its been getting rave reviews from beta testers. I can’t wait to see all the amazing ways that you use it to make your websites great.

Jack Product Page: http://joeworkman.net/rapidweaver/stacks/jack
Jack Docs: http://docs.joeworkman.net/jack.html

Recap: Release Marathon Week

I was on a release marathon this week. I released major versions of 7 different stacks! Here is a quick recap of what I released. I hope that you all have a great 3 day weekend!

Target v1.0

Target Stack

Target allows you full control over where you would like to position your stacks. You can target the stack to position itself on top of its parent stack. You can also position it relative to the browser window so that it always floats in the same exact location. Lastly you can float the content to the left or right. Target is your one stop shop for stack positioning.

You will have to see this stack in action before you can fully enjoy what it can do for you. It’s an extremely versatile stack that I know you will love.

http://joeworkman.net/rapidweaver/stacks/target

Global Content v1.1

Global Content

As good as Global Content is, I have had bigger plans for it ever since it was launched. I am happy to bring you its first major update today. Its jammed pack full of amazing new features.

I already did a full on blog post just about this update so I won’t repeat myself here. This is a pretty ground breaking update!

http://joeworkman.net/rapidweaver/stacks/global-content

HTML5 Video v4.0

HTML5 Video

HTML5 Video got a major overhaul with tons of great fixes and new features. Here are a list of some of the key new features.

  • Themes and Style Customizations: There are now 3 player themes that you can use with this stack. You can also customize the background and time rail colors to match your site design.
  • YouTube Support: You can now configure the stack to use a YouTube video and still use the nice controls provided in this stack.
  • New Video Thumbnail stack: New HTML5 Video Thumbnail stack. This is great to add thumbnails to launch your videos from a lightbox such as Expose. Check out the sample project on the dmg download for an example implementation.

http://joeworkman.net/rapidweaver/stacks/html5-video

HTML5 Audio v3.0

HTML5 Audio

HTML5 Audio got a major overhaul just like its brother HTML5 Video stack. This update brings a lot of what we saw in the video update. We have a shiny new icon! I think its pretty cool. We also have 3 player themes to choose from. You can also customize the background and time rail colors to match your site design.

http://joeworkman.net/rapidweaver/stacks/html5-audio

CSS Box

CSS Box

CSS Box allows you to assign a class and id to a stack. This can allow you to define your own custom CSS rules to apply to CSS Box and its content. There is also the ability to define inline styles as well.

http://joeworkman.net/rapidweaver/stacks/css-box

Edit Mode

Edit Mode

Edit Mode does one thing… allows you to customize the background color of the Stack Edit Mode. This is useful if you are using a project with a dark background color and maybe want to use white or light colored text and elements.

http://joeworkman.net/rapidweaver/stacks/edit-mode

Knock Explorer

Knock Explorer

Knock Explorer allows you to conditionally display or hide content to Internet Explorer users. You can even target specific versions. This is important so that users of older versions of IE still have a pleasant viewing experience. Or you can use this stack to inform them that their web browsing experience is being hampered by using such an old browser.

http://joeworkman.net/rapidweaver/stacks/knock-explorer

Older Posts

Custom Post Images