ractoon » Blog http://www.ractoon.com Constantly curious about all things web. Tue, 11 Nov 2014 18:23:14 +0000 en-US hourly 1 Building Potent WordPress Websiteshttp://www.ractoon.com/2014/11/building-potent-wordpress-websites/ http://www.ractoon.com/2014/11/building-potent-wordpress-websites/#comments Tue, 11 Nov 2014 18:21:26 +0000 http://www.ractoon.com/?p=721 Slides from a recent talk on building potent WordPress websites. Includes potential paths for building out flexible themes for clients, workflow, general tips, and best practices.

The post Building Potent WordPress Websites appeared first on ractoon.

]]>
Slides from a recent talk on building potent WordPress websites. Includes potential paths for building out flexible themes, workflow, general tips, and best practices.

The post Building Potent WordPress Websites appeared first on ractoon.

]]>
http://www.ractoon.com/2014/11/building-potent-wordpress-websites/feed/ 0
ACF5 PRO Color Picker Custom Paletteshttp://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/ http://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/#comments Fri, 07 Nov 2014 23:50:49 +0000 http://www.ractoon.com/?p=728 The Advanced Custom Fields color picker field is an easy way to give users control over colors on a WordPress site. It can be further enhanced to display a custom selection of color palettes, making it so you don't have to remember the hex codes for frequently used colors.

The post ACF5 PRO Color Picker Custom Palettes appeared first on ractoon.

]]>
The Advanced Custom Fields color picker field is an easy way to give users control over colors on a WordPress site. It can be further enhanced to display a custom selection of color palettes, making it so you don’t have to remember the hex codes for frequently used colors.

This particular method takes advantage of ACF hooks to ensure all fields (previously saved as well as those added dynamically but not yet saved) display your custom palettes.

Here’s how:


function my_acf_admin_head() {
  echo "<script>
  (function($){
    acf.add_action('ready append', function() {
      acf.get_fields({ type : 'color_picker'}).each(function() {
        $(this).iris({
          palettes: ['#111111', '#333333', '#555555', '#777777', '#999999', '#cccccc'],
          change: function(event, ui) {
            $(this).parents('.wp-picker-container').find('.wp-color-result').css('background-color', ui.color.toString());
          }
        });
      });
    });
  })(jQuery);
</script>";
}

add_action( 'acf/input/admin_head', 'my_acf_admin_head' );

Add this code to your functions.php file and you’re good to go.

The post ACF5 PRO Color Picker Custom Palettes appeared first on ractoon.

]]>
http://www.ractoon.com/2014/11/acf5-pro-color-picker-custom-palettes/feed/ 0
WordPress Picture / Picturefill Shortcodehttp://www.ractoon.com/2014/08/wordpress-picture-picturefill-shortcode/ http://www.ractoon.com/2014/08/wordpress-picture-picturefill-shortcode/#comments Tue, 12 Aug 2014 12:00:27 +0000 http://www.ractoon.com/?p=631 An often overlooked component of responsive design is how to handle images. Forcing everyone to download full sized images isn't optimal, neither is serving up blurry low-res images.

The post WordPress Picture / Picturefill Shortcode appeared first on ractoon.

]]>
An important component of responsive design is handling images. Forcing mobile visitors download of full sized images isn’t optimal, neither is serving up blurry low-res images. On top of that if visitors are viewing on higher density displays then it’s all blurry.

A promising solution

The <picture> element is working its way into the spec for HTML5, but in the meantime there is a polyfill. Version 2.0 of the picturefill script builds around the proposed <picture> element, meaning the sytnax you use for the polyfill will be the same syntax used for native browser support.

The advantages of using the <picture> element include:

  • Specifying images for various breakpoints
  • Specifying images to use for high density displays
  • Using new image types (such as svg and webp) with fallbacks if not supported

How to Use It

In combination with custom image sizes in WordPress it’s a powerful tool to create responsive images.


add_image_size( 'thumb-800', 800, 800, false );
add_image_size( 'thumb-400', 400, 400, false );

add_filter( 'image_size_names_choose', 'custom_image_sizes' );

function custom_image_sizes( $sizes ) {
    return array_merge( $sizes, array(
        'thumb-800' => __('Desktop / Tablet Image'),
        'thumb-400' => __('Mobile Image'),
    ) );
}

Add that in your functions.php file and your new thumbnail sizes will be activated.

Your thumbnail sizes will vary depending on the needs of your site, but for this example we’ll be doing the following:

  • Upload a 1600px image that will be used as the high density image
  • Have the 800px image used for the desktop and tablet views, as well as the high density mobile view
  • Have the 400px image used for the mobile view

Now to use these images we’ll just need to add these shortcodes to the content:


[picture img="/path/to/image-400x400.png, /path/to/image-800x800.png 2x"]
[source srcset="/path/to/image-800x800.png, /path/to/image-full.png 2x" media="(min-width: 400px)"]
[/picture]

The img attribute in the picture shortcode defines the default image to use, in this case it’s the mobile image. The source shortcode defines the image to use for the tablet and desktop view which is currently set at anything greater than 400px wide. You can have as many source shortcodes as you’d like.

The Plugin

The full documentation is included along with the plugin on the Github repo:

Get the plugin on Github

The post WordPress Picture / Picturefill Shortcode appeared first on ractoon.

]]>
http://www.ractoon.com/2014/08/wordpress-picture-picturefill-shortcode/feed/ 0
S2member Remove Restrictions for Specific Postshttp://www.ractoon.com/2014/08/s2member-remove-restrictions-specific-posts/ http://www.ractoon.com/2014/08/s2member-remove-restrictions-specific-posts/#comments Tue, 05 Aug 2014 12:00:38 +0000 http://www.ractoon.com/?p=637 Sometimes you have a set of custom posts that you want locked down from non-subscribers. Sometimes you want a couple pieces of this content to be available publicly. Unfortunately there's not a well documented way to do this, and the last thread on the topic received the response that "there isn't that yet."

The post S2member Remove Restrictions for Specific Posts appeared first on ractoon.

]]>
Sometimes you have a set of custom posts that are subscriber only. Sometimes you want a couple posts to be available publicly. Unfortunately there’s not a well documented way to do this, and the last thread on the topic received the response “there isn’t that yet.”

That was in 2012, we’re in the future and there is that now – but you have to dig. Well you don’t have to dig, the digging has been done, here’s the dirt:


add_action( 'ws_plugin__s2member_check_post_level_access_excluded', 'set_s2member_restriction' );

function set_s2member_restriction() {
  global $post;

  switch ($post->ID) {
    case 1: // Post IDs you want to allow public access to
    case 2:
      return true;
  }

  return false;
}

Add that in your functions.php file and you’re all set.

The post S2member Remove Restrictions for Specific Posts appeared first on ractoon.

]]>
http://www.ractoon.com/2014/08/s2member-remove-restrictions-specific-posts/feed/ 0
Heartbleedhttp://www.ractoon.com/2014/04/heartbleed/ http://www.ractoon.com/2014/04/heartbleed/#comments Thu, 10 Apr 2014 04:23:17 +0000 http://www.ractoon.com/?p=472 The Heartbleed Bug is a serious vulnerability in the popular OpenSSL cryptographic software library. This weakness allows stealing the information protected, under normal conditions, by the SSL/TLS encryption used to secure the Internet.

The post Heartbleed appeared first on ractoon.

]]>
Rough day for the internet. A vulnerability was found in the OpenSSL cryptographic library, commonly used to secure Apache and nginx servers. This affects roughly 70% – 80% of servers currently in use. From the Heartbleed Bug site:

The Heartbleed Bug is a serious vulnerability in the popular OpenSSL cryptographic software library. This weakness allows stealing the information protected, under normal conditions, by the SSL/TLS encryption used to secure the Internet. SSL/TLS provides communication security and privacy over the Internet for applications such as web, email, instant messaging (IM) and some virtual private networks (VPNs).

The Heartbleed bug allows anyone on the Internet to read the memory of the systems protected by the vulnerable versions of the OpenSSL software. This compromises the secret keys used to identify the service providers and to encrypt the traffic, the names and passwords of the users and the actual content. This allows attackers to eavesdrop on communications, steal data directly from the services and users and to impersonate services and users.

You can test if your server is vulnerable at Qualys® SSL Labs.

A list of potentially affected sites (that you may consider changing your password on) can be viewed at Digital Trends.

UPDATE 04.12.2014

Additional list of potentially affected sites can be viewed on Mashable.

The post Heartbleed appeared first on ractoon.

]]>
http://www.ractoon.com/2014/04/heartbleed/feed/ 0
WordPress Securityhttp://www.ractoon.com/2013/12/wordpress-security/ http://www.ractoon.com/2013/12/wordpress-security/#comments Fri, 13 Dec 2013 15:00:09 +0000 http://www.ractoon.com/?p=411 As the popularity of WordPress continues to grow it becomes a juicier target for automated bots. These bots exploit vulnerabilities in unsecured WordPress installs, or default settings.

The post WordPress Security appeared first on ractoon.

]]>
After migrating my site earlier this year I scanned through the old files to verify that everything made it across. During this verification I kept seeing dot files that weren’t a part of WordPress, and that set off some alarms. Turns out that the old site had been piggy backed for some nefarious (or at least unintended) purposes.

As the popularity of WordPress continues to grow it becomes a juicier target for automated bots. These bots exploit vulnerabilities in unsecured WordPress installs, or default settings. Luckily there is a pretty comprehensive rundown in the codex on how to address many of these issues. It’s a good idea to implement many (if not all) of these measures if possible, but if you’re strapped for time these cover some common issues:

Install a plugin such as Wordfence or Better WP Security

These will allow setting some basic options to get things running, including limiting login attempts, adding a blacklist/whitelist firewall, and logging access attempts so you can track what’s going on. These logs helped me discover that some of my images were being leeched. Wordfence also has the additional capability to scan/fix your existing WordPress install, which is a nice touch.

Do not use an “admin” username, or any name that can be derived from your site

If you have logging enabled it will most likely get filled very quickly with a bunch of login attempts for the “admin” username. As the default username it is easy to target, and can be flooded with a bunch of password attempts. Some bots also attempt variations of your domain name, or “administrator” spelled out among others. If you don’t want to use a full security solution a limit login plugin can handle this issue as well.

Stay updated

This is even easier with the release of WordPress 3.7 which introduced background updates, but keeping WordPress up to date is the simplest step to plugging known vulnerabilities.

Fortunately awareness on security in general seems to be on the rise. More developers seem to be including some sort of security solution with their newly deployed sites (if you’re not you should). There are also solid tools available to prevent problems, as well as help resolve existing ones in the vast WordPress community. Just make sure a new plugin isn’t doing more harm than good.

The post WordPress Security appeared first on ractoon.

]]>
http://www.ractoon.com/2013/12/wordpress-security/feed/ 0
Internet Explorer 9 Font Glitchhttp://www.ractoon.com/2013/04/internet-explorer-9-font-glitch/ http://www.ractoon.com/2013/04/internet-explorer-9-font-glitch/#comments Tue, 16 Apr 2013 14:00:02 +0000 http://www.ractoon.com/?p=381 I've run into several IE quirks in my time, but this is the first stumper I've had since IE8. The symptom was content not appearing below the header, but styles and content above that were loading fine.

The post Internet Explorer 9 Font Glitch appeared first on ractoon.

]]>
I’ve run into several IE quirks in my time, but this is the first stumper I’ve had since IE8. The symptom was content not appearing below the header, but styles and content above that were loading fine. In addition this error did not show up on local test environments, even when emulating the same version of IE (9). On top of that some computers the client was using worked fine, while others did not.

The first theory was that the browser was getting flipped into compatibility mode. This can happen for a couple of reasons, one of which is if the site lives on an intranet (which might explain why only some computers were having issues). This is easy enough to remedy by implementing the X-UA-Compatible meta tag.

Unfortunately the meta tag was not enough.

After digging a bit deeper the client was receiving an error:

A problem displaying [site] caused Internet Explorer to refresh  the webpage using Compatibility View

This brought up a different set of solutions on Google, which seemed to point to an issue with fonts (particularly Helvetica). The styles for this site did use Helvetica Nueue Light in a font stack with fall backs to Helvetica and Arial. This lined up with the symptom as well, since some users may not have Helvetica (or the other variants) installed on their system.

Removing references to Helvetica (and other variants) seemed to fix the issue, however, I was still curious because I had thought browsers would ignore fonts they could not handle. It turns out this occurs when the type of font used is Adobe Type 1. So the style is correct in reading that the font exists and to use it, but freaks out when it actually tries to use it. This could be seen in the browser where text used one of the broken fonts there would be a blank space on the page.

Here is a good post detailing the issue with IE9 and Adobe Type 1 fonts, along with some potential solutions.

The post Internet Explorer 9 Font Glitch appeared first on ractoon.

]]>
http://www.ractoon.com/2013/04/internet-explorer-9-font-glitch/feed/ 0
Creating a jQuery Pluginhttp://www.ractoon.com/2013/03/creating-a-jquery-plugin/ http://www.ractoon.com/2013/03/creating-a-jquery-plugin/#comments Tue, 12 Mar 2013 14:00:54 +0000 http://www.ractoon.com/?p=367 This all began after working on some functionality that (for once) I could not find a suitable plugin for. Figuring it was a good opportunity to finally write a small jQuery plugin I did some quick research into the process for creating and publishing one.

The post Creating a jQuery Plugin appeared first on ractoon.

]]>
This all began after working on some functionality that (for once) I could not find a suitable plugin for. Figuring it was a good opportunity to finally write a small jQuery plugin I did some quick research into the process for creating and publishing one. It has been quite awhile since I looked into the process of creating a plugin. In that time the jQuery Plugin Registry has greatly improved, along with the support and documentation for creating them.

Creating Your Plugin

The jQuery docs contain a good rundown of creating a plugin, as well as considerations to keep in mind. But there are some handy tools available that will generate some solid starting points, such as Starter from Pixel Graphics.

Publishing Your Plugin

The code lives on Github and uses webhooks to integrate with the plugin registry. So first order of business was setting up a git repository. If git is something new there are plenty of very solid tutorials available to start taking a look.

Once the git repo is up, and filled with your plugin goodness, it is ready for publication on the plugin registry. Again jQuery provides very good instructions on how to do this. Once that is complete you are good to go, and it should appear listed on the registry shortly.

All in a Day’s Work

The result of this experiment was the jQuery Text Counter plugin. And after discovering how straightforward it is to create a plugin I’m sure there will be more coming soon.

The post Creating a jQuery Plugin appeared first on ractoon.

]]>
http://www.ractoon.com/2013/03/creating-a-jquery-plugin/feed/ 0
MMXIIIhttp://www.ractoon.com/2013/01/mmxiii/ http://www.ractoon.com/2013/01/mmxiii/#comments Wed, 09 Jan 2013 06:03:50 +0000 http://www.ractoon.com/?p=355 The first of the year is the generally accepted time of rebooting. Whether it's evaluating the current situation, creating goals for the new cycle, or comparing it to earlier cycles, it's hard to avoid reflecting at least a little during this time.

The post MMXIII appeared first on ractoon.

]]>
The first of the year is the generally accepted time of rebooting. Whether it’s evaluating the current situation, creating goals for the new cycle, or comparing it to earlier cycles, it’s hard to avoid reflecting at least a little during this time. Though I typically prefer rolling in changes kaizen style into the cinnamon swirl of my life, plopping a line in the sand for some things I’ve slacked on may do me some good. Hopefully around this time next year I’ll be able to look back and this post and say “hey, I did some of those things.” That or I’ll realize my cinnamon swirl has become a bit lumpy, and I probably need to focus.

Goals

  • Publish a mobile app
  • Poke around with backbone.js, ember.js, whateverlooksmostinteresting.js
  • Publish either a Python or Ruby project
  • Read at least 2 books per month (one tech, one fun)
  • Stand up more often

Now that the easy part’s done time to get to work.

The post MMXIII appeared first on ractoon.

]]>
http://www.ractoon.com/2013/01/mmxiii/feed/ 0
Web / Technology Podcastshttp://www.ractoon.com/2012/12/web-technology-podcasts/ http://www.ractoon.com/2012/12/web-technology-podcasts/#comments Tue, 04 Dec 2012 13:00:25 +0000 http://www.ractoon.com/?p=316 Some time ago a serendipitous day in iTunes led to stumbling upon the podcasts listing. Before this I had little interest/awareness in the medium (I don't even own an iPod to "pod" with). But after running out of music, and needing something to soothe the ears while coding, I took a gamble on the first web related podcast that came up.

The post Web / Technology Podcasts appeared first on ractoon.

]]>
Some time ago a serendipitous day in iTunes led to stumbling upon the podcasts listing. Before this I had little interest/awareness in the medium (I don’t even own an iPod to “pod” with). But after running out of music, and needing something to soothe the ears while coding, I took a gamble on the first web related podcast that came up. Offering entertainment, learning opportunities, and discovering new tools and resources began the search for more podcasts to keep it flowing. The result was a dozen podcasts across the web and technology spectrum, collected below.

The Big Web Show

The Big Web Show

Hosted by Jeffrey Zeldman (the grandpappy of web standards) each episode features a guest covering topics such as web publishing, art direction, content strategy, typography, web technology, and more. It’s everything web that matters.

Currently at 78 episodes and rising.

iTunes | Site

The Boagworld Web Design Show

The Boagworld Web Design Show

Hosted by Paul Boag, earlier episodes of this podcast focused on design/development tips, as well as case studies. The most recent season switches gears to cover handy apps and tools for people working on the web.

Currently at 36 episodes spanning four seasons.

iTunes | Site

The East Wing

The East Wing

Hosted by Tim Smith, The East Wing is a weekly show talking about design, user experience, problem solving, and the keys to creating products with value. Typically delving into the stories of the guests and how they got started in doing what they do.

Currently at 34 episodes.

iTunes | Site

Founders Talk

Founders Talk

Hosted by Adam Stacoviak each episode has an in-depth, one-on-one conversation with founders of various apps and services. Though on hiatus since August 2012 the existing episodes still offer an interesting perspective into the minds of founders across the industry.

Currently at 39 episodes.

iTunes | Site

The Industry Radio Show

The Industry Radio Show

Also hosted by Adam Stacoviak along with regular co-hosts Jared Erondu and Drew Wilson. The Industry brings a new voice to tech media, highlighting design focused startups and people. In addition to guest interviews each episode also covers recent events in the tech industry.

Currently at 30 episodes.

iTunes | Site

Let’s Make Mistakes

Let's Make Mistakes

Hosted by Mike Monteiro and Leah Reich (co-hosted by Katie Gillum until episode 59) covering design and how to do it, with a lot of tangents along the way. The journey through the tangents to the core insights offered by the hosts is enjoyable. Like chocolate coated bacon, odd but satisfying.

Currently at 74 episodes (33 onward offered on iTunes)

iTunes | Site

The Non Breaking Space Show

Non Breaking Space Show

Hosted by Christopher Schmitt and Dave McFarland (kept on track by Chris Enns) The Non Breaking Space Show aims to seek out the best and brightest on the web, and chat with them about what and why they do what they do. True to their blurb past episodes have included some big names in the web scene.

Currently at 23 episodes.

iTunes | Site

ShopTalk

ShopTalk

Hosted by Chris Coyier and Dave Rupert, ShopTalk is a sound effects podcast that occasionally talks about the web (or at least that is how the hosts fondly describe it). Episodes contain interviews with guests and questions provided by listeners (every so often just the latter). Each cast made enjoyable by the entertaining and knowledgeable hosts.

Currently at 44 episodes.

iTunes | Site

Talentopoly Podcast

TalentopolyHosted by Jared Brown and Brandon Corbin discussing some of the best programming, design, and IT related links posted on talentopoly.com. Episodes cover a broad range of topics on all aspects of programming, as well beverage reviews from the hosts and guests.

Currently at 20 episodes.

iTunes | Site

This Developer’s Life

This Developer's LifeHosted by  Rob Conery and Scott Hanselman, This Developer’s Life is a podcast about developers and their lives. Presented in a similar style to This American Life, it delves into the human side of development. Though irregularly published the existing episodes are very well done and can easily be listened to multiple times.

Currently at 24 episodes.

iTunes | Site

The Web Ahead

The Web AheadHosted by Jen Simmons, The Web Ahead is a weekly podcast about changing technologies and the future of the web, discussing HTML5, mobile, responsive design, iOS, Android, and more. Having a broad range of guests on an equally broad range of topics, the most recent episodes have been a special run of topics dubbed “The Web Behind.” These episodes (co-hosted by Eric Meyer) bring on guests to discuss the web as it once was.

Currently at 44 episodes.

iTunes | Site

99% Invisible

99% InvisibleA tiny radio show about design, architecture and the 99% invisible activity that shapes our world hosted by Roman Mars. Though not specifically a web/technology podcast, 99% invisible covers topics and concepts that spur the imagination and a sense of wonder. Both useful attributes for working with technology. They successfully kickstarted season 3, and were the highest funded journalism project in Kickstarter history.

Currently at 74 episodes.

iTunes | Site

Have any interesting podcasts within the web/technology sphere that are missing from the list? Share them in the comments below!

The post Web / Technology Podcasts appeared first on ractoon.

]]>
http://www.ractoon.com/2012/12/web-technology-podcasts/feed/ 0