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.

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.

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

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

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

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

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

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

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

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

Hosted 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

Hosted 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

Hosted 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

A 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.

Themes/Frameworks

Bones
Based on the HTML5 Boilerplate, Bones is a responsive theme using a mobile first approach. It includes support for LESS/Sass as well as samples for custom post types and dashboard functions.

Underscores
What the creators call a “1000-Hour Head Start” the Undescores theme includes HTML5 templates with code samples and theme options.

Frank
Nearing a 1.0 release, Frank is “designed and built to provide a light, responsive and unobtrusive reading experience.” It optimizes database queries, JavaScript, and images to provide the fastest experience possible.

Plugins

Plugin Boilerplate
A plugin boilerplate using WordPress general best practices. Contains code stubs for functionality.

Widgets

Widget Boilerplate
A widget boilerplate using WordPress general best practices. Contains code stubs for functionality.

Miscellaneous

Custom Metaboxes and Fields
Helper for adding admin metaboxes for a variety of field types.

Options Tree
Theme options UI builder for custom themes.

E-commerce

Foxyshop Plugin
A flexible WordPress e-commerce plugin built for the powerful FoxyCart service.

The post Useful WordPress Development Tools appeared first on ractoon.

Offscreen Magazine

Offscreen Magazine has published three issues profiling some big names in web and digital (which they fondly refer to as “pixel people”). Aptly named, the magazine is only available in print format on some fine smelling paper using solid construction.

I noticed some typos in the first issue, but the quality content and photography more than made up for this small oversight. By the second issue this was taken care of, and they even included a bookmark within the pages (a much appreciated bonus).

The interviews are thorough and span several pages. They also include several full color photographs, highlighting the interviewee in their natural habitat.

Individual issues run $17.90, or sets of three are $47.90, plus shipping. At first blush the price seems a little steep for one issue. But with the amount of content and work that appears to go into each issue it’s well worth it.

Insites: The Book

Starting out as Insites: The Tour, Insites: The Book provides those of us outside the UK an opportunity to get up close and personal with the big names of the web. As the authors describe it: “We delved into their personal journeys, big wins, and lessons learned, along with the kind of tales you’ll never hear on a conference stage.”

The book is available in digital or print formats. Both include 20 conversations collected over six months from web workers in the US and UK. With the rapid pace of the web some of the interviewees’ places of employment and situations have changed before the book shipped, but the stories are no less engaging. Each is more of a snapshot of the person at the time of interview, but a timeline accompanies each story to spotlight notable moments with the web.

If you opt for a print edition (limited run of 2000 copies) you will be treated to a well crafted reading experience. The stock and print quality is top notch, and comes with a presentation box for the book. A single photograph graces each story along with some very nice typography.

The print edition runs £23.00 (roughly $36) and £9.00 (roughly $14) for the digital. A set with print and digital can be had for £29.00 (roughly $46).

The post Web Worker Stories appeared first on ractoon.

Media Query Breakpoints

The CSS begins with a base file (which includes the style normalization as well as styles common to all display sizes) with a file set aside for several resolution breakpoints. As the resolution increases new graphical elements appear in certain sections.

This does a couple of things: it keeps clutter out from resolutions that don’t have the space available, and it saves bandwidth on lower resolution (and more likely lower bandwidth) devices.

Using LESS adds the ability to auto minify the compiled CSS file as well, reducing the resulting file size.

CSS Sprites

Using CSS sprites for graphical elements has several benefits. Not only does it cut HTTP requests and overall file size (potentially), but it also makes supporting higher pixel density devices easier (more on that later).

The trade-off is that this puts more work on the developer to add. But using services such as Sprite.me (recommended from the CSS tricks sprites article) helps ease the pain.

Tiny PNG

A recent discovery, Tiny PNG uses smart lossy compression to cut file size. Paired up with a PNG CSS sprite this is magical. All images on this site that went through Tiny PNG saw at least a 40% reduction in file size.

For most images the optimization does not cause a noticeable loss in quality, but for a couple there were some obvious sections. Always good to spot check after.

Retina Displays

The new hotness in displays is higher pixel density. Popularly 2x pixel density (as the Apple retina displays are) – but who knows in the future. This looks great with retina ready graphics, but with many web images they start looking blurry.

For the redesign a 2x pixel density media query displays an alternate background sprite for these devices. This is where using a sprite comes in handy, making it so only a couple of items need updating. This high res sprite is twice as large, but the relative position of each element remains the same. The background-size property is then set to squish all that pixel goodness back into the expected size but with double the pixels available. A more in-depth article on this process is over at miekd web.

CloudFlare

The last piece uses the W3 Total Cache plugin, along with CloudFlare.

I’m still trialing CloudFlare to see if it’s worthwhile to keep on. Their claim to fame is the ability to filter security threats as well as speeding up page load. They do this by combining CDN distributed assets and data compression, handled by their servers. So far it’s working as advertised, and it’s free for use on any number of sites.

Final Thoughts

The whole redesign was an enjoyable process. Though it took some time, a lot of the new technology and workflow pieces are proving very useful.

Implementing responsive functionality seemed like such a hassle early on. But with how the landscape of mobile devices and usage is emerging it is becoming an essential consideration for new sites. The web community has also stepped up in creating a plethora of tools to help with this, and it seems like this will only accelerate. The key is picking these out of the sea of new shiny things emerging each day.

Moving forward I’m hoping that the site will continue to evolve in pieces, and not needing dramatic restructuring in the near future. But I have thought that before, and things change so fast, so we’ll see how it goes.

Ractoon Redesign: Part 1 – Introduction
Ractoon Redesign: Part 2 – Branding
Ractoon Redesign: Part 3 – Design
Ractoon Redesign: Part 4 – Development
Ractoon Redesign: Part 5 – Optimizations

The post Ractoon Redesign: Part 5 – Optimizations appeared first on ractoon.

Text Editor

From Dreamweaver to Notepad++, and now to Sublime Text 2. The power of multiple cursors, snippets, and the shortcuts available in Sublime Text 2 sold it for me. These helped a bunch in speeding up development overall.

Sublime Text 2 code goodness.

WordPress Framework

I’d bounced through several WordPress frameworks for a variety of sites, but always found myself having to overwrite behaviors here and there. Not too big of a deal since a framework saved time overall, but it adds up when doing it for multiple sites with different requirements.

Then there was Bones. Built on top of some solid libraries and tools it went the extra mile to set up useful snippets in a flexible fashion. Not only that, Eddie Machado built the framework using a mobile first approach that implemented LESS/Sass for styling.

LESS

When I first heard about LESS it seemed like a hassle to put the burden of generating CSS on JavaScript or a server method. Variables seemed cool, but not worth it to have to learn new syntax and integrate into a new process.

Boy was I wrong.

The first day using LESS blew me away with how much of an impact it had on my workflow. The ability to separate each resolution break point into its own CSS file, set variables, create mixins (especially for vendor prefixes), and have it all pull together into a minified CSS file was awesome.

Not only that, but using recently introduced native programs that to parse the code kept the load off the server and the end-user.

Mobile First

As mentioned in the design overview from this series a large part of the design considerations for the non-desktop resolutions were left for the development phase. Approaching the site from a mobile first viewpoint made it easy to create the basic structure, as well as the graphical elements that get added as the resolution increases.

Approaching from the bottom up made it slightly easier to see and make some of the optimizations for the site as well. This and more covered in the next, and last, part of this series.

Ractoon Redesign: Part 1 – Introduction
Ractoon Redesign: Part 2 – Branding
Ractoon Redesign: Part 3 – Design
Ractoon Redesign: Part 4 – Development
Ractoon Redesign: Part 5 – Optimizations

The post Ractoon Redesign: Part 4 – Development appeared first on ractoon.

Ractoon Website Redux Alpha Version

The first iteration migrated the existing layout sections of the site into a new format, along with some of the desired improvements:

Change color scheme from light-on-dark to dark-on-light

The reversed text on the existing site was causing eye strain while reading longer sections of text. Though this carried over from the very first version of ractoon.com, readability became a higher priority for this update.

Increase font size

Fonts in general on the previous site were somewhat small. Coupled with the light-on-dark color scheme this was more of a problem. But it still helps with readability with the new color scheme.

Better use of fonts

Since the previous design support for @font-face, and availability of web licensed fonts, had exploded. This time around I wanted to use a nice font with some clean curves and a bit of style. The first design used Play from Google Web Fonts, along with a Cambria stack. After some fiddling I chose PT Sans, also from Google Web Fonts.

Fewer gradients

Though snazzy, I wanted to try for a cleaner look and feel (I also tended to overuse gradients). This would also cut the graphics needed on the site if I wanted to make sure everyone could see them (IE < 9 I’m looking in your general direction).

Second Pass

The alpha design sat for a few months. The trouble with idle time and personal projects is the amount of cool new things that get discovered each day.

Ractoon Website Redux Beta Version

Icons

I wanted to refine the existing elemental icons on the site, and introduce other icons to accent certain pieces of data.

Elemental Icons Redux

I’d thought that basing all the new icons off of circular shapes would help them carry a similar feel. Also, discarding gradients in favor of solid colors would make them clearer. When made into raster images they did not scale particularly well, and required more images for retina resolutions.

This led to looking into some alternatives, and eventually settling on using an icon font. This had a couple of advantages: it would scale well to small and large sizes independent of pixel density, and it allowed for usage of an icon family for the various icons across the site.

I examined several free and paid fonts, but eventually Font Awesome came out on top. It included all the icons I’d need for the site (even some of the more unique ones including the elemental icons).

Removing Hero Image

The scenes that appeared before the content carried over from both earlier versions of the site. After mulling it over it seemed better to exclude them. Though I enjoyed doing them, they simply pushed the content down without adding much value.

Establish a better hierarchy

Previously the site had not established a very good hierarchy for the content on each page. The alpha redesign did not address this very well, so that was a goal for this revision. Clearer headlines, call outs and use of colors to define unique areas.

More responsive

The biggest adjustments went in place to prepare for implementing a responsive site. However, rather than building out each break point for tablet, mobile, etc. the primary design used a grid that would break down at smaller resolutions. This approach came from the Style Tiles method proposed by Samantha Warren.  This also allowed for a more efficient design phase, focusing on all the graphical elements in one shot and rearranging and paring them down via the code.

Time to code

At this point I felt like I could tweak the design forever. I needed to cut it loose and start crafting some code and addressing problems that came up, rather than anticipated issues. The PSDs got locked down and prepped for implementation.

Ractoon Redesign: Part 1 – Introduction
Ractoon Redesign: Part 2 – Branding
Ractoon Redesign: Part 3 – Design
Ractoon Redesign: Part 4 – Development
Ractoon Redesign: Part 5 – Optimizations

The post Ractoon Redesign: Part 3 – Design appeared first on ractoon.

Ractoon v1.5

Neon Mob

RMCC

App.net

Due to my limited artistic abilities I wasn’t able to produce the ideal imagery for the site either. Particularly in the character illustrations of the ractoons themselves. The concept for them has remained the same through the redesigns, and this recent re-branding as well. For the latest iteration I stepped aside to let someone with greater graphical chops than myself give it a shot. I was more than happy with the result.

Old vs. New

Following this came the identity and focus for the site itself. Previously it had just been a repository for work and thoughts, but without a solid goal, or a target audience. It didn’t take too much digging to figure out that the most enjoyable projects were those where I could help someone reach a goal. Often times these were smaller applications or sites, that could be built up over time. But starting small also helped hone in on solutions would achieve goals, as well as keeping timelines nice and neat.

The idea of building small solutions, or larger solutions composed of several small solutions, also meshed well with the underlying concept of the site. That is building things based on simple components. The simplest components, as seen throughout the site in images, icons, and colors, come from the four basic elements: fire, water, earth, and air. These were once the building blocks of all things and, in a way, this idea continues on the web in the form of HTML, CSS, client side scripts (JavaScript), and server-side scripts (PHP, Ruby on Rails, ASP.NET). Four aspects of the web used to build almost anything.

Though it may seem like a winding road to finally get to the design, these first steps ended up making the design process much more focused and cohesive I feel.

Ractoon Redesign: Part 1 – Introduction
Ractoon Redesign: Part 2 – Branding
Ractoon Redesign: Part 3 – Design
Ractoon Redesign: Part 4 – Development
Ractoon Redesign: Part 5 – Optimizations

The post Ractoon Redesign: Part 2 – Branding appeared first on ractoon.

Windows / Linux Keyboard Shortcuts PDF
Mac Keyboard Shortcuts PDF

Sublime Text 2 Keyboard Shortcuts Sheet

Update 1: Added Mac keyboard shortcuts PDF
Update 2: Second and third shortcuts corrected to read “Insert” (credit to Nextil)
Update 3: Mac version “Alt” button updates (credit to Nextil)

The post Sublime Text 2 Keyboard Shortcuts (Printable) appeared first on ractoon.