Joe Workman's Blog

RSS

Social Redirects via htaccess

I host a RapidWeaver Community page on Google+. As you may know, Google+ community urls are pretty much gibberish and impossible to remember. Check it out…

https://plus.google.com/u/0/communities/111498543804519819953

Pretty horrible, right? In order to give my community a nice URL that could be remembered, I used gplus.to to create an alias that would redirect to the community page: http:gplus.to/rapidweaver. That is so much nicer, right?

All was going great until gplus.to forgot to renew their domain on July 17th. Obviously my nice pretty url no longer worked! Most likely, gplus.to will fix their issues and make sure that it never happens again.

However, what if you wanted to take matters into your own hands? It’s insanely easy to set up your own pretty URL redirects to wherever you want using Apache’s .htaccess file!

Redirect 301 /gplus https://plus.google.com/+JoeWorkman
Redirect 301 /twitter https://twitter.com/joeworkman
Redirect 301 /facebook https://www.facebook.com/joeworkman
Redirect 301 /vimeo https://vimeo.com/joeworkman
Redirect 301 /rwplus https://plus.google.com/u/0/communities/111498543804519819953

If you place the above code into your .htaccess file on your web server, you will now have nice pretty URLs to all of your social networks. My RapidWeaver community page can now be access via http://joeworkman.net/rwplus.

You never have to again rely on a service to create pretty urls for you!

Now there is nothing stopping you from using this for redirecting to any URL that you want. Maybe you have a not so easy to remember affiliate URL that you want to create a redirect for. This is a great use case for that as well.

May 8

Foundation for RapidWeaver is here!

Well I am releasing 3 months after my initial estimate but the day has finally come! After 5 months of work and 71 beta releases, I am proud to finally ship Foundation for RapidWeaver.

Foundation for RapidWeaver is a stack based theme that really take the website building experience to the next level.

I leverage the open source Foundation 5 framework from Zurb. It is the world’s most advanced responsive front-end framework. Its mobile first philosophy provides faster websites for all devices. This theme and stacks set brings all of that power directly into RapidWeaver.

Feature Highlights

  • Contains over 70 stacks for layout, navigation, content and more.
  • Build your own theme with stacks. Make the website that you envision!
  • Site Styles is a new awesome way to style your site.
  • Global templates allow you to configure supported stack once and have those settings be reflected across all instances of that stack in your project.
  • Flexible Navigation allow you to augment the menus with headers, dividers and dividers. You can even define only portions of the menu to be displayed.
  • Font Awesome and Animate.css libraries are baked into the theme. Use them anywhere you like!

There is so much that you can do with the Foundation theme, I encourage you to get more info at http://foundation.joeworkman.net.

Thank You

I want to say thank you to all of the testers that have been using and providing amazing feedback on Foundation over the past few months. Without them, Foundation would not be as awesome as it is today.

Sample Sites

Since Foundation is a blank canvas, sometimes its great to have some inspiration. The Foundation website was built 100% with Foundation. When you purchase Foundation, you actually receive the actual project file that was used to build that website.

User Sites

Starter Questions

How much is it?

The Foundation theme is free to download. I did this so that there was zero barrier to making sure that users could easily update the theme. I have even added an interesting feature into the stacks so that it will alert you when there is a theme update.

The Foundation stacks come in three different packs in order to make it more affordable. However, there is a 20% discount when you buy all three packs for $99.95.

Can I use Foundation stacks with other themes?

No. The stacks that ship with Foundation have been made to work directly with the Foundation theme. The reason for this is speed. Normally a stack contains all of the HTML, CSS and Javascript required to to make it work. However, with Foundation, the theme contains a vast majority of the code. The stacks contain the least amount of code possible to make them function. In many cases, the stack is ONLY HTML. This means that your websites built with Foundation will be leaner and meaner!

Can I use my existing stacks inside Foundation?

Absolutely! All of your existing stacks inside Foundation. They should work just like they do in all other themes. Although you won’t get the speed improvements that come with the Foundation stacks.

Can I use non-Stacks pages?

Since you build your theme using Stacks, if you want to use other page plugins, you would need to use something like my Global Content stacks to import the other pages into a Stacks page.

However, I cannot guarantee how other page types will look of function after they are imported. And this is not supported.

Will there be more Foundation stacks?

I have added a 3rd Party add ons directory to the Foundation site. There are already a few add-ons outside of the Foundation packs that have added support for Foundation.

There is even a new WeaverPix theme to create awesome slideshows!

In the future, as I release new and updated stacks, you will start to see Foundation versions of my stacks that I will ship as a free addition to that stack. This way you will get the best of both worlds!

I have already talked to a few other stack developers that are interested in building stacks for Foundation. I am pretty excited about that.

How does Foundation compare to Freestack or Bootsnap?

First off, let me say that both products are great and have been very influential for the community. Also, I have never built a single webpage with either of these products. Without getting too far into a tangent, I don’t like being influenced by other people’s products. I like to build products the way that I envision them. This way I can ensure that they are 100% my own.

What I can say is that the feedback has been amazing from my testers. So let me quote one of them…

"If you want to create modern, responsive sites with RapidWeaver without the use of a theme, we now have three attractive possibilities, of which I consider Foundation for by far the most powerful and advanced solution."

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!

Nov 4

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

Global Content now imports 17 different plugins

Global Content

Earlier this month, I released Global Content to the RapidWeaver community. I have been overwhelmed with the amazing responses that I have gotten from the users of this stack. It definitely feels like I have bitten a home run with this one.

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.

Performance & Stability

Global Content was pretty darn faster before. However, its speed has almost doubled. You should see much faster page load times. They should be practically indistinguishable from loading normal static pages.

Conflicts with many other 3rd party stacks have now been resolved. Global page assets will now also be propagated when they are updated as well.

Edit Mode Labeling

You can now customize look of the Global Import stack inside Edit Mode. You can add a label and background color to help you visualize what content would be imported after you publish your site with Global Content. In order to help you preview you webpages better, the Global Import stack can also be used as a content placeholder by setting it to a static height. This will allow you to setup your page layouts that integrate Global Content without having to constantly publish your pages to verify and tweak.

Import 17 Page Plugins

Now last and definitely not least, Global Content can now import non-Stacks pages into your Stacks layouts! There are some really amazing plugins out there. And this new feature allows you utilize the awesome flexibility of the Stacks layout engine and still use these great plugins.

RapidWeaver’s Built-in Plugins
  • Contact Form
  • Photo Album
  • File Sharing
  • Movie Album
  • Sitemap
3rd Party Plugins
  • Dateloom
  • FAQMaker
  • Formloom
  • RapidMaps
  • RapidCart
  • RapidSearch
  • RapidSearch Pro
  • Sitemap Plus
  • Stacks
  • Stacks + PageLime (v2.4.0 required)
  • WeaverBox
  • WeaverPix

Existing users can obtain your free update of Global Content via the Stacks Library. If you don’t own a copy, what are you waiting for?

Fresh Designs on My RapidWeaver Store

I am very happy to announce that I have completely revamped my RapidWeaver online store. You can check it out at http://joeworkman.net/rapidweaver/

Redux Sale

To celebrate the new design, get 15% off anything in my store with the code redux15 at check out. The offer expires Sunday, August 18th PST.

What’s Changed?

As you will notice, all my products have been sorted into categories. This makes it so much easier to find the product that fits your needs. Its also much easier to find bundles and free stuff.

My old store page still exists for those that may prefer that. Just click on All Stacks in the sidebar. The search/filter feature has been temporarily removed as that stack is still in the works.

I have integrated Searchpath site search on the main store and category webpages. This is a really cool service that you should check out.

On the bottom of the category pages, there are featured tutorials and videos that will help you get the most out of the stacks that you probably already own. We jam pack our stacks with tons of features and we want to help you realize their full potential. These tutorials are displayed at random every time the page is loaded.

On the product pages, you will notice that you can now share your favorite products over App.net, Facebook, Twitter and Pinterest. You can also clearly see the requirements for each stack. Now if you add a product to your cart, you will notice something else very cool. A new lightbox, Expose actually, will appear below the shopping cart. This contains suggestions for other stacks that you might like. And if the product that you just added to you cart is apart of a bundle, we inform you about that as well so that you can save some money.

The best part of this redesign? Everything you see is a stack… E-V-E-R-Y-T-H-I-N-G! While my site is done 100% in RapidWeaver, I had a ton of custom code. My main products page and all of my product pages were all custom work. This isn’t the case anymore. I got fed up with having to tell people that some cool widget on my site was custom code and not a stack that they could use. This is why I spent copious amounts of time developing everything that I wanted into a stack that anyone could use.

None of these new stacks are available for sale yet. I built a lot of new stacks and will release them one at a time as I polish them up for consumer use.

No Responsive?!?!

You may be shocked that I put so much work into something and I have not changed my theme! There are a few reasons why I did not change my theme…

I really love my theme (Atom by Elixir) and was not quite ready to give it up yet. I think that my site is still very elegant and current. If it ain’t broke, don’t fix it!

I did not feel that I had the time to go through an entire website redesign. If I were to change themes, then I would have to rethink all my page layouts, colors, buttons, images, etc. That is simply more time than I felt that I had, especially when I really like the current look of my site.

Now even if I wanted to change my theme, would I go responsive? Probably not. Don’t get me wrong, I think that responsive sites are awesome. Responsive and mobile sites allow you to engage your customers while they are on the go in a way that is customized for their current viewing experience. So why wouldn’t I want that? In short, it does not fit into my business requirements.

Lets think about what my business is… I develop and sell RapidWeaver add-ons and Mac apps. Both of these require that my customers own a Mac desktop. Customizing my site for mobile devices does not get me any benefits. I don’t have a physical location, so customers don’t need to navigate to where I am. Since all my products require a desktop, chances are people are going to purchase things while they are on their desktops. This is so that they can download and start using them immediately.

So really, the only thing left is presenting data in a customized way on mobile devices. Would that be nice? Sure, it would be. However, since users and pinch-to-zoom or double-tap-to-zoom in on content, I don’t feel that users are losing. If someone is look at my site on a mobile device, I feel that it’s a temporary look at a product or blog post. Asking them to zoom in to read content (if they must) is not a bad thing. If they user sees what they like, when they get back to their desktop, they can go back online and purchase the product or review that back again in more detail.

Now I obviously do sell responsive products. Therefore, on product pages that I feel that I need to display their responsive nature, I do have small responsive demo sites built for each individual product. I then link to that responsive demo from the main product page demo area.

Just to recap… I think that responsive sites are amazing! However, they do require extra thought and time to implement properly. Therefore, you should evaluate your (or your customer’s) business needs to see if you really require a mobile version of your site.

Special Hangout for Redesign

I also think the I will do a special editing RapidWeaver hangout tomorrow (August 14) and will field any questions that you have about the new site design. For more info, make sure that you follow me on App.net, Twitter or join my Glassboard.

Climate v1.2 for Mac

I am very happy to announce a big update to Climate today. You can now control your Nest devices even easier. I have been working on this update for a long time now and very happy to finally get it into your hands. This update was an almost complete rewrite from the ground up in order to support some of the amazing new features, in addition to the extra coat of polish that was added to Climate.

Pick up a copy of Climate or get your free update today from the Mac App Store.

Notification Center

If you are like me, you may be working away for hours on end when your Nest gets set to Auto-Away. We love this feature, but sometimes Nest doesn’t know that we are workaholics! It could be an hour before you realize that this has happened and the temperature in your home has changed drastically.

Climate will now inform you via notification center on your Mac about these key events that happen with your Nest devices. Climate will notify you about temperature changes, away mode changes and device state (idle, cooling, heating, offline).

Convenient Menu Actions

There are a few new actions in Climate’s menu that can save you precious seconds.

* Mode Toggle Away - Quickly set your device to Away mode.
* Mode Toggle Home - Quickly set your device to Home mode.
* Logout of Nest Account - For you super cool people that have multiple accounts.

Customizing the Menubar Display

Climate has an all new preferences pane that was the main driving force behind this update. You now have full control over what data is displayed in your Mac’s menubar. You can display Climate’s leaf icon (from v1.0 days), the outside temperature of your device’s location or select specific device settings to be displayed.

Climate will populate the device table within the preferences pane with all of the devices that it has discovered in your Nest account. If you have logged into multiple different Nest accounts, Climate will remember the devices from every account as well as your desired display setting for each device.

When you select Nest Temp Settings, you will be allowed to edit the device table. When you uncheck a particular device in the table, it will no longer be displayed in your Mac’s menubar. There is no limit to the number of devices that can be displayed.