UMBC chess director and CSEE Professor Alan Sherman just shared the final results of the 2013 Pan-American Intercollegiate Chess Team Championship which was held over the past four days in Lubbock Texas. UMBC place second after Webster Univ. and ahead of Illinois and Teach Tech.

The top four qualifying schools from the PanAms go on to compete in the Final Four of college chess, held in the spring. The winner is considered national champion and takes home the President’s Cup.

During the championship, UMBC defeated the University of West Indies, the University of Toronto, the University of Texas, Brownsville, Webster University C, and the University of Texas, Dallas A. UMBC’s only loss was to Webster University A, in round three. UMBC Team B won the Division V prize.

The UMBC Chess Team A for the 2013 Pan-Am Champioship had the following members.

• Board 1: GM Niclas “The Dark Knight” Huschenbeth (USCF rating 2610)
• Board 2: GM Akshayraj “The Indian Knight” Kore (2519)
• Board 3: M Levan “The Georgian Gangster” Bregadze (2469)
• Board 4: IM and WGM Nazi “The Black Widow” Paikidze (2378)
• Alternate: WGM Sabina “Sunshine” Foisor (2315)

See the UMBC Chess web site more information on UMBC’s chess program or contact Dr. Sherman at 410-963-4779 or Sorry, you need javascript to view this email address.

MindMeld analyzes your conversations and tries to offer helpful info from the Web. It’s a cool idea, but it doesn’t work as well as it needs to.

A new app called MindMeld listens to you talk and tries to butt in with helpful information. There’s a clever idea at the core of that, but I found that it often misunderstood words and failed to get the gist of a conversation, which made it more distracting than beneficial.

When you first get introduced to New Relic, it’s easy to be overwhelmed by all the features. But like with most tools, as you slowly climb the learning curve and get familiar with the features provided out of the box, you begin to wonder how it all hangs together under the hood and if there is more you can do with what you have at hand.

Today I will look at how New Relic actually monitors transactions and how you can hook into the process. We will take a quick glance at the support provided by New Relic for monitoring background jobs and we’ll also dig into New Relic custom metrics, how you would use them and the benefits you get from doing so. By the end you will have a deeper understanding of how New Relic works and be able to utilize it more fully. In other words, we will have a deeper knowledge of our tools—something every developer should strive for.

Let’s begin by taking a quick look at how New Relic actually hooks-in to track the performance of your application.

How New Relic Tracks Transactions and How You Can Do the Same

It may seem a little like magic, you include a gem in your Gemfile:

gem 'newrelic_rpm'

And somehow New Relic monitors all your code. Of course it is just code, so let’s see how New Relic actually instruments your app so it can begin monitoring it when the agent gem is required. We will do this in the context of a Rails 4 app.

The first place to look is newrelic_rpm.rb, which has the following relevant code in it:

...
    if Rails::VERSION::MAJOR.to_i >= 3
      module NewRelic
        class Railtie < Rails::Railtie
    
          initializer "newrelic_rpm.start_plugin" do |app|
            NewRelic::Control.instance.init_plugin(:config => app.config)
          end
        end
      end
    else
    ...
    

So a Railtie gets created when the Rails version is above three, this gets a NewRelic::Control singleton instance (when it is initialized) and calls init_plugin. When the NewRelic::Control instance is created it figures out what framework is running (Rails 4 in our case) and loads some relevant code; we can see this in new_relic/control/class_methods#load_framework_class. The init_plugin method that gets executed lives in new_relic/control/instance_methods. The interesting code here is:

...
    if Agent.config[:agent_enabled] && !NewRelic::Agent.instance.started?
      start_agent
      install_instrumentation
      load_samplers unless Agent.config[:disable_samplers]
    ...
    

The install_instrumentation call is the important one. The implementation lives in new_relic/control/instrumentation. Skipping over the boilerplate bits, this works out which instrumentation files it needs to load and then requires them one by one. In our case, it will load files under new_relic/agent/instrumentation/rails4. One of the files here is action_controller.rb, when this gets required it eventually executes the following code via some metaprogramming magic:

executes do
      class ActionController::Base
        include NewRelic::Agent::Instrumentation::ControllerInstrumentation
        include NewRelic::Agent::Instrumentation::Rails4::ActionController
      end
      NewRelic::Agent::Instrumentation::ActionControllerSubscriber \
        .subscribe(/^process_action.action_controller$/)
    end
    

And here we get to the crux of it: ActionController::Base (from which all your controllers inherit) gets a couple of modules included in it, the most important of which is NewRelic::Agent::Instrumentation::ControllerInstrumentation. This is the start of how New Relic begins to monitor all your controller actions as ‘transactions’. Of course, it’s a somewhat simplified view and we’re glossing over a lot of detail, but it gives you an idea of how New Relic monitors your code. The question is, how can you use this information?

Monitoring Custom Frameworks & Background Jobs

You’re highly unlikely to find yourself in a situation where you’re using a web framework that New Relic does not already have instrumentation for (in the Ruby world), but let’s say you did. Knowing what we know now, we can easily manually instrument the controller actions of this custom framework. If we have a controller like this:

class CustomController
      def custom_action
        ...
      end
    end
    

We can instrument it like so:

class CustomController
      include NewRelic::Agent::Instrumentation::ControllerInstrumentation
    
      def custom_action
        ...
      end
      add_transaction_tracer :custom_action
    end
    

Now your controller method will be tracked like a transaction in the same way Rails actions get tracked. Of course, if you’ve rolled your own web framework which includes database handling code, you will need to do extra work to instrument much of that code, to allow New Relic to monitor more than just controller actions. But the general idea remains sound.

The above pattern becomes more useful when you want New Relic to track background jobs in your application. You’re a lot more likely to have rolled some custom background job handling code than you are to have written your own web framework. In fact, we did just this with Tuts+ initially, although we’re now migrating to Sidekiq. If you’re using one of the well-known background jobs systems like Sidekiq, Resque or Delayed Job, New Relic already has instrumentation built in, but if you did roll your own, the above pattern is all you need to monitor your tasks.

For example, our custom Tuts+ background jobs were regular ruby classes that responded to the execute method, so all we have to do is this:

class SomeBackgroundJob
      include NewRelic::Agent::Instrumentation::ControllerInstrumentation
    
      def execute
        ...
      end
      add_transaction_tracer :custom_action, category: :task
    end
    

The last bit, category: :task, is to ensure that New Relic does not track it as a web transaction, but instead treats it as a background task and makes it appear under the background tasks tab in the New Relic UI. If we create a base class for all our jobs, we can put the instrumentation there and child classes will inherit it, so we don’t have to worry about doing the above in every job class.

Customizing a Transaction Even More

Interestingly enough, even the web transactions that New Relic automatically monitors are not sacrosanct. You can, for example, add some custom parameters to be sent to New Relic for the transaction that is currently executing (if you’ve switched on capturing parameters).

You can do this at any point during the transaction. All you have to do is call ::NewRelic::Agent.add_custom_parameters(:key => 'value') at any time and the parameters you pass in will get added to the parameter data you see inside New Relic. For example, if we had a controller that looked like this:

class HelloController < ApplicationController
      def index
        ::NewRelic::Agent.add_custom_parameters(:hello => 'world')
      end
    end
    

Slow transactions would give us the following:

This isn’t all we can do. We can segment a transaction while it’s running by renaming it. Let’s say we want to treat a transaction as special when it is performed by a particular user. You may do something like this:

class HelloController < ApplicationController
      def index
        new_relic_name = NewRelic::Agent.get_transaction_name
        if current_user.name == 'Joe Customer'
          NewRelic::Agent.set_transaction_name("#{new_relic_name} - Joe Customer")
        end
      end
    end
    

Now this transaction will be treated as a separate transaction in the New Relic UI:

Even default New Relic instrumentation has some room for customization, but sometimes, just like Captain Kirk, you just need more power. This is where custom metrics come in.

New Relic Custom Metrics & How They Are Useful

Back in the day, you would have used custom metrics to monitor things like external service communication and use of various common tools like Redis. These days, New Relic has better ways of monitoring that stuff, so what do we need custom metrics for? I’ve found custom metrics to be useful in four situations:

• monitoring code that New Relic can’t see
• monitoring code you don’t control
• monitoring scripts
• monitoring totally custom events

Let’s take a quick look at each of them.

Monitoring Code New Relic Can’t See

New Relic is pretty good at breaking down the performance of your various application methods in a transaction trace, but sometimes you will see something like this in a trace:

It seems there is application code that New Relic couldn’t instrument for some reason. What we can do is help New Relic (and ourselves) out with some custom metrics. We need to figure out which method New Relic had trouble monitoring and hook in some custom metrics to track how long this method took to execute. This will then appear in all subsequent traces. Let’s say we have a class with a method we want to monitor via custom metrics:

class Order
      def amount
        ...
      end
    end
    

We can begin to track the amount method like so:

require 'new_relic/agent/method_tracer'
    
    class Order
      include ::NewRelic::Agent::MethodTracer
    
      def amount
        ...
      end
      add_method_tracer :amount, 'Custom/amount'
    end
    

The second parameter to add_method_tracer is the name that this custom metric will get in the New Relic UI. Metric names are slash separated strings and all custom metrics should start with ‘Custom/’. You could, for example, name your custom metric as ‘Custom/<class_name>/<method_name>’. At this point you will begin seeing the amount method in your transaction traces, in the New Relic UI. But, what if our amount method is highly complex and we want to monitor parts of it which we suspect are slow? My advice is that you should refactor your method—it’s too big, but if you can’t do that, you can instrument random code like so:

class Order
      extend ::NewRelic::Agent::MethodTracer
    
      def amount
        ...
        self.class.trace_execution_scoped(['Custom/amount/complex_code']) do
          ...complex code...
        end
        ...
      end
    end
    

Now the instrumented part of the method will be reported separately in your transaction traces. If you’ve previously instrumented the method itself, your new ‘inner’ metric will be grouped under the previous one.

This is by far the most common way you’ll end up using custom metrics in your code, but let’s look at the others anyway.

Monitoring Code You Don’t Control

Often you may be using a library which, you suspect, is slowing down your application. New Relic won’t instrument any random gem for you by default, so what can you do? You can fork the gem and add some instrumentation using the method we saw above, but an even simpler solution exists—use initializers. Let’s say you’re using the foobar library which has a class Foo with a method bar that you suspect has some slow code in it. All you need to do is create an initializer foobar_instrumentation.rb, and put the following in it:

require 'new_relic/agent/method_tracer'
    
    Foo.class_eval do
      include ::NewRelic::Agent::MethodTracer
    
      add_method_tracer :bar
    end
    

As you can see the code is very similar to what we had above, New Relic will work out a sensible name for your new custom metric based on the class and method name and you will begin to see it in your transaction traces. Use this to work out if that suspicious library is actually making your code perform badly, but don’t keep this instrumentation around permanently. It spams unnecessary initializers in your Rails app and pollutes your New Relic UI with custom metrics that you don’t really need to track permanently.

Monitoring Scripts

One part of web applications that is often neglected is scripts. To paraphrase a presentation I did recently—they’re still production code and should be treated as such. You don’t want production code to be performing badly, especially if you execute it on an ongoing basis via cron jobs (or a similar method that is not a background job in your system), so we can use New Relic to figure out if your scripts are slow.

You may instrument your script code using custom metrics as described above. It won’t show up in transaction traces as it won’t be part of a transaction. What you will be able to do though, is create a custom dashboard from the metrics you collect which should give you an idea if your script is performing badly.

The other thing you can do is to treat your script as a type of background job and instrument it accordingly (include NewRelic::Agent::Instrumentation::ControllerInstrumentation and so on). It will get lumped together with other background jobs in the UI, but you don’t have to worry about custom dashboards.

The only caveat with scripts is this: New Relic only sends data over the wire periodically. With a one-off script that executes quickly you will need to ensure that the collected data actually gets sent, so you may need to shut down the New Relic agent manually. A good rule of thumb is to manually start the agent at the beginning of each script and to shut it down at the end:

require 'newrelic_rpm'
    
    ::NewRelic::Agent.manual_start
    
    ... codez ...
    
    ::NewRelic::Agent.shutdown
    

This way you won’t ever need to wonder why your data is not appearing in the UI.

Monitoring Totally Custom Events

One of the interesting things about New Relic is that it lets you take advantage of its UI and data aggregation facilities for metrics that have nothing to do with performance (in theory). For example, you may want to have some visibility on how often users sign up to your application, the frequency of sales, or the total amount users pay when they make purchases. These are more business metrics than performance ones, but if it’s too much trouble to track these separately you can use New Relic to do so.

New Relic lets you record custom metrics directly via two API calls:

• record_metric
• increment_metric

You can use record_metric to track any metric that has an amount and increment_metric is pretty self explanatory. So we may, for example, do this:

...
    def purchase(amount)
    ...
      ::NewRelic::Agent.record_metric('Custom/purchase_amount', amount)
      ::NewRelic::Agent.increment_metric('Custom/purchase_count')
    ...
    end
    ...
    

The only way for you to see these metrics in the UI would be to create some custom dashboards. I have to mention that this would be a somewhat “creative” use of the New Relic API as it’s designed with performance data in mind, but it is certainly a handy thing to know when you need to throw a quick dashboard together and don’t want to set up a bunch of extra infrastructure.

The Dangers of Monitoring Too Much

Of course, all this power has a cost. If you collect too many custom metrics, it can begin to slow down your application. It can also slow down the New Relic UI and make it difficult to interpret the data as New Relic will collapse similar metrics into a summary one. New Relic recommends keeping the number of custom metrics you collect below 2000. I have found that custom metrics are best used periodically. Instrument the code you need, use the instrumentation to solve the problem you’re having and then remove the instrumentation. This way you get to solve your performance issues and the number of custom metrics you use is unlikely to grow too high.

Conclusion

We’ve dug into the internals of the newrelic_rpm gem and have learned how to tell New Relic about code that you consider a web transaction. We’ve looked at how to alter transactions on the fly, how to monitor background jobs and the various situations where it makes sense to use custom metrics. There is much you can do with New Relic beyond the functionality it provides out of the box and you’re now much more able to utilize it to its full potential. But, there is always more to learn, like how to build custom dashboards out of the metrics that you capture, or how to monitor infrastructure with plugins. We’ll be covering those topics and more in subsequent articles, so make sure to check back often. And as always if you have a question, want to share your own New Relic story or just want to say hi, don’t forget to leave a comment.

In 2013, we covered a ton of new apps, resources, and more for designers and developers. In fact, we covered hundreds of resources!

So rather than you having to go back through our archive of posts, we’ve gathered up the best of what was new over the past year in one place! We’re not including everything (after all, some resources are no longer available, sites may have changed hands, apps may no longer be active, etc.), but rather have put together a true “best of” compilation, with more than 130 entries! Including our favorite featured font from each month!

Enjoy, and let us know in the comments what your favorite new resources were for the year!

Apiary.io

Apiary.io is a REST API tool that makes it easy to create documentation and other tools for your users to use your API. It even includes tools to get the community to create your documentation for you on GitHub.

Prose

Prose is a web interface for managing your text-based GituHub repository content. It’s a great option for managing your blog or making quick updates to your code, and is particularly useful for Jekyll sites hosted on GitHub Pages with Markdown text preview and syntax reference.

Vagrant

Need a lightweight, reproducible, portable development environment? Vagrant has you covered. It works with Mac OS X, Windows, and Linux, with a simple-to-use installer, and easy configuration.

Maskew

Maskew is a JavaScript library for skewing the shapes of elements. It’s mobile-friendly, has no dependencies, and is less than 5k.

Elusive Icons

Elusive Icons are 271 vector icons specifically developed for Bootstrap, but since it’s a web font, it will work with custom projects, too.

Profound Grid

Profound Grid is a responsive grid system for creating both fixed and fluid layouts, built with SCSS. You can add or remove columns as needed, change column and gutter widths, and much more.

Junior

Junior is a front-end framework for building mobile apps with HTML5 that have a native look and feel. It includes CSS3 transitions that are optimized for mobile performance, swipable carousels, and more.

Centurion

Centurion is a responsive web framework that was built using SASS and CSS3 media queries. It uses semantic HTML5, and even makes it easy to build quick prototypes.

Framer

Framer is a modern prototyping tool for building and testing complex interactions and rich animations. It’s a good alternative to Flash, Quartz, Composer, and Keynote.

Photobox

Photobox is a jQuery image gallery script with hardware-accelerated CSS3 transitions and animations, along with a pretty UI and an easy-to-use UX.

Dropzone.js

Dropzone.js is an open source, simple drag and drop file uploader with image preview. It’s easy to set up (especially if you use Component, as you can add it as a dependency) and implement as either a form or programmatically.

Notism

Notism is a great tool for working on visual content with a team. You can upload, stack, and review visual project ideas, create working prototypes of static templates, discuss drafts, and more. There are even tools for signing off on layouts.

Dropify

Dropify makes it easy to make files available for download on your Facebook fan page. There’s a free plan available (which doesn’t offer Like-gating), as well as premium plans. It’s great for artists, authors, creatives, brands, and small businesses.

Onepager

Onepager lets you easily build simple websites for small businesses. The resulting sites work great on both desktops and mobile devices, are cloud-hosted, include custom form capability, and are search-engine friendly. Starter sites are only $8/month, with more robust plans available.

Kirby

Kirby is a file-based CMS that’s easy to setup and use, and incredibly flexible. It uses your design and your templates, doesn’t require a database, and supports Markdown syntax, among other features. It’s just $39 per site.

QuoteRobot

QuoteRobot makes it easy to create professionally designed proposals, invoices, and quotes. It works well with Highrise, FreshBooks, SalesForce, Google Apps, and Xero, and only costs $10/month after the 30 day free trial.

Hint.css

Hint.css is a SASS tooltip library which uses only HTML/CSS (no JavaScript) for creating simple tooltips using data-* attribute, pseudo elements, content property, and CSS3 transitions. It degrades gracefully without any transitions in browsers where CSS3 transitions aren’t supported.

Ink

Ink is an easy to use toolkit for creating web interfaces. It uses HTML, CSS, and JavaScript for building layouts, dispaying common interface elements, implementing content-centric interactive features, and more.

Cool Kitten

Cool Kitten is a beta framework that includes HTML, CSS, and JavaScript files that’s responsive and includes parallax scrolling support.

Baseline.js

Baseline.js helps maintain your vertical rhythm (set by your typographic baseline) despite oddly-sized images in your articles and pages.

Mailstrom

Mailstrom is a tool to help you clean out your email by powering through your messages in seconds. It’s currently in beta and has an unlimited free trial, though it will later be available by subscription.

Do

Do is an easy to use team project manager that makes it simple to get all of your work done. In addition to the web app, there are also mobile apps for iPhone and Android.

Galleria

Galleria is an image gallery framework built in JavaScript that makes it easy to create beautiful galleries for web and mobile devices.

Koken

Koken is a free CMS for creatives that makes managing creative content simple. It has a desktop-like interface, and has powerful tools for working with virtually any kind of content from text to images to video.

Prevue

Prevue is a free way to present your concepts online and even get feedback. You can password protect your image sets and send custom URLs to your clients.

TypeUp

TypeUp is a Compass extension that takes the font size and line length you specify and turns it into a set of CSS rules for a vertical baseline in ems.

jQuery Nested

jQuery Nested is a plugin for creating a gap-free, multi-column grid layout. It works on a variety of devices, and grid elements animate to rearrange when the viewport size changes.

Hook.js

Hook.js enables “pull to refresh” on websites, just like it works in mobile applications. Just scroll down a bit and then back up and your page will refresh.

Gumroad

Gumroad is a platform for selling digital files directly online. They handle the hosting, payment, and delivery for you, quickly and securely.

Gridwax

Gridwax is a bookmarklet that lets you easily add an adjustable vertical baseline to any site right in your browser. Just install the bookmark, click on it, and then adjust the height with your arrow keys.

Photolettering

Photolettering is a free iOS app that lets you add text to photos you take within the app or images from your camera roll. It features some great fonts from House Industries, including Elephant, Kerpow, and Aztek.

UX Apprentice

UX Apprentice teaches you the principles of UX design with a layered approach, including discovery, strategy, and design. It includes information on the core principles of each layer, as well as real life examples and resources for each.

dsgnjbs

dsgnjbs aggregates the best design jobs from a variety of design websites, including Dribbble, Behance, Smashing Magazine, 37 Signals, and more.

SVG Patterns Gallery

The SVG Patterns Gallery is a collection of SVG patterns complete with code. SVG images are smaller than bitmap images generally, and stay sharp on high resolution displays.

Flat+3D Mockup Kit

This Flat+3D Mockup Kit makes it easy to create attractive mockups for your apps on a wide variety of devices. There are free and paid kits included, depending on which devices you need.

SuperBox

SuperBox is a jQuery plugin that works as a static image gallery that reveals the full size version when an image is clicked on.

Mobify.js

Mobify.js is an open source library that makes it easy to adapt your site for any device. It captures and manipulates your site’s DOM before resources are downloaded, enabling resource control, conditional loading, and more.

Animatable

Animatable lets you easily animate all sorts of properties, including background-color, background-position, border-width, font-size, color, border-radius, opacity, and much more.

Bespoke.js

Bespoke.js is a DIY presentation micro-framework that offers a number of different slide animations, including coverflow, cube, and carousel, among others.

LayoutIt!

LayoutIt! simplifies building your front-end code with Bootstrap, complete with a drag-and-drop interface. You get high-quality HTML5 code starting from any of their basic templates.

Flat UI Colors

Building a flat UI? Flat UI Colors is a tiny app that makes it easy to grab the colors from Flat UI for your project.

Resemble.js

Resemble.js is an HTML5 canvas and JavaScript app that analyzes and compares images. Just drag and drop images into the app and it will highlight their diferences.

Web Colour Data

Web Colour Data makes it simple to pull color data from any URL, complete with charts showing the prevalence of each color used.

Userium

Userium is an interactive usability checklist that includes categories for user experience, the site’s homepage, accessibility, navigation, links, search, and more.

The Productivity Manifesto

The Productivity Manifesto is a free ebook filled with tips for becoming way more productive. Just sign up for the free newsletter for a link to download the PDF.

Nanoc

Nanoc is a static site builder that works for building everything from a small personal site to a large corporate site. It even works for blogs.

Perspective Mockups

Perspective Mockups is a set of Photoshop actions for creating more interesting mockups for presenting your ideas. The results are crisp and unique.

Ghost

Ghost is a free, open source, simple blogging platform. It puts the focus squarely on publishing and your content.

Premailer

Premailer is an online pre-flight app for HTML email creation. Just paste in your URL or source, add a query string to append to links, and add options (like removing unused IDs, comments, or classes), and submit.

Codifferous

Codifferous helps you review code faster and more effectively. It tracks how much you’ve reviewed within the source code, and even lets you mark whether each line is accepted or rejected. Public projects are free, while private projects will eventually require a small fee.

Stocksy

Stocksy is a stock photo service that offers high-quality, royalty-free photos that are unlike most stock photos and exclusive to Stocksy. Photos start at just $10.

Videry

Videry is a curated collection of videos for web designers. There are videos on a variety of topics featured, including CSS, innovation, psychology in design, typography, and much more.

Pure

Pure is a set of responsive CSS modules that you can use in all of your website and app projects. It includes modules for grids, forms, buttons, tables, menus, and more.

430+ Free Storyboard Illustrations

This collection of 430+ Free Storyboard Illustrations is free for you to use for your personal projects (it’s not made to be used in final production projects). It includes a vector file, as well as a PNG file.

Red Pen

Red Pen makes it super fast and easy to get feedback from your clients or team members. Just drag your design onto the upload area, share the short URL you’re provided with, and get live, annotated feedback. And there’s no logging in, project management, or other useless features.

Designers Complaining

Designers Complaining is an awesome Tumblr blog that catalogs complaints from designers from across the web. Most recently has been a huge number of complains about iOS 7.

Flatdoc

Need a website for documenting your open source project? Flatdoc is here to help. It lets you create a website fast, using Markdown.

Explore. Create. Repeat.

Explore. Create. Repeat. is an online weekly magazine for the creative community, to inspire and offer insight. You can subscribe by email or read it online.

Froont

Froont lets you design websites right in your browser, using a simple drag and drop interface. This lets you see your site exactly as your visitors will.

Thincons

Thincons is a $7 set of icons inspired by iOS7. There are 77 icons in all, and you can get a sampling of them in exchange for a Tweet if you don’t want to pay for the full set.

Golden Ratio Typography Calculator

The Golden Ratio Typography Calculator is a simple tool for creating better typography. Just enter your font size and content width, as well as an optional CPL (characters per line), and get a number of typographic recommendations.

Style Guide Boilerplate

This Style Guide Boilerplate is geared toward designers and developers who want to roll their own frameworks to handle common components they use between projects.

Square Market

Square Market is a new ecommerce solution from Square. It costs nothing extra over the regular cost of Square payment processing, and the storefronts provided are modern and well-designed.

Gridism

Gridism is a responsive grid system that’s simple and easy to use. It stacks grid units on mobile device screens, and scales up to 978 or 1140px (your choice).

Later.js

Later.js lets you define complex schedules and quickly calculate future or past schedule occurrences. It works client-side or with Node.js.

Topcoat

Topcoat is a CSS framework for building clean and fast web apps. It includes a number of useful components, is themeable, and includes a PSD with all of the components in the code base.

DevDocs

DevDocs is an API documentation reader with a consistent, organized interface. You can look through documentation for HTML, CSS, DOM, JavaScript, jQuery and more, all from a single place.

Typewolf

Looking for typography inspiration? Then Typewolf is just the site. Not only does it provide plenty of online typographical inspiration, but it also identifies the fonts used for you.

Tiff

Tiff is a type tool that lets you visually contrast the differences between two typefaces. It currently works with Google Web Fonts, as well as your system fonts.

Bytesize

Bytesize is a new weekly podcast about tech, design, and development. You can also read summaries of the week’s news on the site, along with links to the original articles.

Responsive Web CSS

Responsive Web CSS makes it quick and easy to layout your pages for responsive sites for a variety of devices.

Snapnote.io

Snapnote.io makes it incredibly easy to share and annotate images and screenshots. Just drag and drop your image onto the page, use the built-in tools for annotation, and then share it.

Pico

Pico is a simple, fast, flat file CMS, meaning that it uses no database. It uses the Twig templating engine for powerful and flexible themes, and is completely free and open source.

Butterick’s Practical Typography

Butterick’s Practical Typography is a comprehensive guide to typography that covers everything from what makes good typography to more basic things like accented characters.

Mailparser.io

Mailparser is an easy way to automate your daily email routine. Just set up your data extraction rules, and tell it how to handle the results.

CSS Zen Garden

CSS Zen Garden has been around for awhile, but has recently been reworked as an HTML5 template. It’s a great demonstration of what can be done with CSS-based design.

Cloud Cannon

Cloud Cannon lets you crate a hosted CMS from your HTML and CSS in seconds. It has a 30-day free trial.

Type Hunting

Type Hunting is a curated collection of vintage typography examples. You’ll find everything from retro t-shirts to antique packaging, old signs, and more.

iOS 7-Inspired Line Icons

These iOS 7-Inspired Line Icons are a great set of more than 80 icons in the style of iOS7. You can use them however you like as long as you don’t redistribute them without permission.

Bootstrap Magic

Bootstrap Magic makes it easy to create your own Bootstrap theme. It’s made with Bootstrap 3 and Angular JS, and gives you live preview, a colorpicker, Google Webfonts, and much more.

StatusPage.io

StatusPage.io is an easy way to create a status page for your website or app. It includes custom branding, support for various types of system status messages, and more.

Just Delete Me

Just Delete Me gives you the info you need to delete your account from a variety of websites and services, including Amazon, Blogger, Facebook, Gumroad, and more.

Web Tracing Framework

Web Tracing Framework is a collection of rich tools for analyzing and visualizing your web apps. It’s available as either a Chrome or Firefox extension.

Random User Generator

The Random User Generator will create a random user for you that you can use as placeholders in your projects. It works with jQuery and other methods.

Assemble

Assemble lets you combine the power of frameworks like Foundation and Bootstrap for your projects, to create exactly the kind of framework and end result you need.

Spectrum

Spectrum is a Mac and iOS app for designers and developers that makes it easy to intuitively design color schemes. It uses established color theory, making it much simpler to create aesthetically pleasing palettes.

Noise Texture Generator

If you need a textured background for your next project, be sure to check out this Noise Texture Generator. Just enter values for the noise opacity, density, background color, and dimensions, and then download your custom pattern.

Appmaker

Appmaker, from Mozilla, is a drag-and-drop mobile app creator that works right in your browser. It’s in pre-alpha release, so expect some bugs, but it looks promising.

Hiro

Hiro is an online notepad where you can safely store your ideas and notes throughout the day. It always opens where you left off, securely syncs across your devices, and it’s free.

Sagan Ipsum

Sagan Ipsum is a lorem ipsum generator that gives you Carl Sagan quotes about the universe.

Mobile Web Best Practices

Mobile Web Best Practices will help you ask the right questions and solve problems you may encounter when designing for the mobile web. It’s broken down to cover strategy, user experience, visual design, and development, and has additional resources and a FAQ section.

Google Web Designer

Google Web Designer is a new responsive HTML5 website creator from Google that lets you design in a WYSIWYG environment or dive right into the code.

Listify

Listify is a simple little app that makes it easy to turn a group of lines into an HTML list, saving you time and effort.

Harpoon

Trying to figure out how much money you need to make? Harpoon simplifies that, giving you financial planning advice and metrics for managing your income. It’s not ready yet, but you can sign up for updates.

StackEdit

Need an online Markdown editor? StackEdit lets you write and edit Markdown files, as well as save them to Google Drive or Dropbox to have your documents available in the cloud any time.

Raw

Raw is an open source web app that lets you create vector-based visualizations in vector and raster formats to embed on your website. It’s built on D3.js, and has a simple user interface.

Start Bootstrap

Start Bootstrap is a collection of free, open source HTML starter templates for Bootstrap. They’re ready to use, even with Bootstrap 3.

GlyphSearch

GlyphSearch makes it simple to search for icons from Glyphicons, Ionicons, and Font Awesome. You can also browse icons on the site.

Free Vector Maps

Free Vector Maps gives you access to tons of vector maps of countries all over the world. They can be used for free under the Creative Commons Attribution License, or can be purchased for unlimited usage.

Slidr.js

Slidr.js is a lightweight, simple JS library, with no dependencies, for adding slide transitions to your page.

Merry Icons

Merry Icons is a set of 100 royalty-free hand drawn icons for Christmas, all for just $16.

Knock

Knock is an innovative way to unlock your Mac using your iPhone. All you have to do is knock on your iPhone’s screen and your Mac will unlock, no password required.

Temper

Temper is a simple app to let you create questions to embed on your website to get feedback so that you can better adapt to what your visitors want. Plans start at just $12/month.

Streme

Streme is an easy way to keep a collaborative stream of links, with no signup required. You can add links to videos, music, and more.

Silk

Silk is a sharing platform for creating collections about anything. Just create a site, add facts to your pages, and create overviews and visualizations.

Fleep

Fleep is a chat program, pinboard, and file drawer all rolled into one, available online and for iOS.

Onor

Onor is a team recognition platform that simplifies the process of encouraging and rewarding your team members.

Design Faves

Design Faves is new site that offers up plenty of design inspiration every day. There are posts about creativity, general design, art, architecture, and much more.

Type Scale

Type Scale is a visual calculator for creating typographical scales for your designs. Just enter in your base size and what scale you want to use, and it will give you the best sizes for your headers, body, and other text.

Color Template

Color Template is a quick tutorial that will teach you how to choose the best colors for your designs. It starts with the color wheel, and progresses through a number of other color theory topics.

Ink

Ink is a responsive HTML email framework from Zurb. It lets you quickly create emails that will work on any device or client, even Outlook.

Kanye vs Creative Director

Kanye vs Creative Director is a fun look at quotes that were either spoken by a creative director or Kanye West. See if you can guess which one, or submit your own quote.

Crowdhoster

Crowdhoster is a service for launching your own crowdfunding page without any coding. You can customize it however you want, and they handle all the payment processing for you and provide you with an admin dashboard.

Syte

Syte is a simple but powerful way to build a personal website with social integrations like Twitter, GitHub, Instagram, Dribbble, and many more. It even works with WordPress.com or Tumblr for blog integration.

We Work Remotely

We Work Remotely is a new job board from 37signals for finding the best telecommuting jobs out there.

Beyond Ink

Beyond Ink is a monthly design podcast for those in the creative or web industries to discuss what they do.

Slides

Slides from Markdown is a simple way to share your thoughts with the world. Slides can be customized easily, with different fonts, font colors, and more.

Exposure

Exposure is a tool for creating photo narratives online. It’s a great way for photographers to publish their work in a more meaningful but effortless way.

Cassannet (free)

Cassannet is an art deco style font based on the lettering style seen on Cassandre Posters, and includes titling alternates, standard and discretionary ligatures, and small caps. It also includes regular, bold, and outline weights.

Roccia ($10)

Roccia is an experimental sans serif typeface with two styles and all uppercase characters.

Hello Denver (free)

Hello Denver is a free font from Good Apples design studio with stencil-like letterforms.

Naive Inline ($20)

Naive Inline is a handwritten serif type family with three weights. It was a very Parisian feel, and allows for a ribbed or full bicolor interior.

Cylburn (name your price)

Cylburn, from Lost Type Co-Op, is a semi-connected script font based structurally on Roundhand, but with a pointed brush and restrained tension.

Lunch Box ($24)

Lunch Box is a unique, handdrawn typeface with infinite customizable options. It also comes with a custom set of small caps, each with four style variations, and stylistic alternatives.

Core Circus ($84)

Core Circus is a layered type family of eight 2D typefaces that can be combined for 3D effects.

Woodwarrior (tweet/FB post)

Woodwarrior is a modern display typeface with geometric letterforms and a very bold style.

Appareo ($21)

Appareo is an imperfect, worn serif font inspired by vintage book typefaces. It comes in three weights, with varying degrees of distress.

Revanche ($29)

Revanche is a distressed font, based on old wall stencils, with a subversive military feel to it.

Pacific Northwest ($60)

Pacific Northwest is a handwritten font that’s fun and comes in two styles (regular and rough).

Seashore Pro ($59)

Seashore Pro is a feminine script with thicker horizontals that create a wave-like appearance. It’s loosely based on the left-leaning penmanship of the late 19th century.

What was your favorite app or resource of the year? Did we miss something you think should have been included? Let us know in the comments.

Become a Successful eBook Author with ‘Authority’ – only $19!

During the early days of the Web, there wasn’t a standard font that could be rendered across all platforms. However, some fonts — like Arial, Helvetica, and Times New Roman — were more likely to be installed in a person’s computer. These popular system fonts are called Web-safe fonts. It was the best practice in web design to stick to them.

Things have changed. It’s now safe to use Web fonts — a technique for rendering any remote font file in a web page using @font-face. This give us more creative freedom and a much wider range of font options.

The @font-face rule has been around for close to 13 years, first seen and supported in Internet Explorer 5.5^[1].

And @font-face has been formally included in the most recent version of W3C’s CSS standards (CSS3) — it was taken out in CSS2.1 — and so modern browsers (e.g. Chrome, Safari, IE, and Firefox) support the rule.

And with services like the free Google Fonts API, implementing Web fonts is easy. For instance, using the Google Fonts web service, it takes two lines of CSS to render even a relatively unknown font such as Bigelow Rules in the vast majority of browsers:

@import url(http://fonts.googleapis.com/css?family=Bigelow+Rules);
    body { font-family: 'Bigelow Rules'; }
    

But even with near-perfect support of the @font-face rule, as a good practice, we should still use CSS font stacks. Moreover, our CSS font stacks should still include Web-safe fonts as well as generic font families like sans-serif and serif.

For example, even if we were to use the most popular font on Google’s Web font service (which is currently Open Sans), we should still use a CSS font stack that includes similar Web-safe fonts, with the last declaration in the stack being a generic font family (sans-serif in the case of Open Sans):

body {font-family: "Open Sans", "Arial", "Helvetica", sans-serif; }
    

In Chrome, this is the fallback-rendering sequence:

As shown above, using a good font stack assures us that we are gracefully degrading our HTML text in case our chosen font is for some reason unable to load.

Why We Still Need a Web-safe Font Stack

Web-safe fonts and CSS font stacks seem like outdated Web design practices, especially since @font-face has great support.

Right now close to 90% of the Internet’s users use a browser that supports @font-face^[2].

But if you’ve ever considered dropping your CSS font stacks, below are a few reasons that might change your mind.

Incomplete Fonts

If certain characters in your font are not available, the browser will attempt to render those unavailable characters using the next font in the stack. But if you don’t have a font stack, it will use the browser’s default standard font.

For instance, the Libre Baskerville font doesn’t have the ™ character.

The first example below shows how the missing character renders in Chrome without a font stack, while the second example stacks "Times New Roman" and serif in the style rule:

At least with a good font stack, the ™ character looks similar to the preferred Libre Baskerville font.

Network Issues

Loading a remote font using @font-face requires an Internet connection. If the web server responsible for serving the font is unavailable or is down for maintenance, the browser will use its default standard text, unless you specify a Web-safe font in your CSS font stack.

For Google Chrome, the standard text (on Windows) is "Times New Roman". This can be bad news if we were using a sans-serif font, and the web server or the content delivery network where the font file is located goes down.

For example, check out this mockup of a web design that uses the PT Sans font:

If our font stack didn’t have Web-safe fonts in the stack and a network interruption happened, our web page would render like this (in Chrome):

The web page looks completely different because Times New Roman greatly affects the visual message of the design.

But if we used a font stack that included Web-safe fonts, we can mitigate some of the aesthetic issues that come with network problems.

Using the font stack:

font-family: "PT Sans", "Helvetica", "Arial", sans-serif;
    

We are able to lower the visual impact caused by a network interruption:

@font-face Can Be Turned Off Client-Side

Some web browsers provide the option to disable the downloading of font files.

In most cases, disabling remote font files in a web browser is obfuscated, but it’s possible. Here’s a forum post for turning off remote font downloading in Firefox and Chrome, and here’s one for Opera.

Why would someone want to disable remote fonts? To speed up web page load times, which is especially desirable for Internet users who have slow Internet connections.

To illustrate how Web fonts impact Web performance, let’s use a display font such as "Lobster Two".

The following markup was used to test  the Lobster Two payload locally using an HTML document called "lobster-two-payload.html":

<html>
<head>
<link href='http://fonts.googleapis.com/css?family=Lobster+Two:400,400italic,700,700italic' rel='stylesheet' type='text/css'>
<style>
body { font-family:"Lobster Two"; } 
</style>
</head>
<h1>Display Font</h1>
</html>
    

The test conditions are a broadband Internet connection and an unprimed cache (meaning that the browser cache was cleared for each test).

#1 result. Total time: 972ms

#2 result. Total time: 1.61s

#3 result. Total time: 1.36s

In the condition tested, it would take an average of 1.3 seconds to render the <h1> tag fully for someone who has an unprimed cache.

This means staring at a blank page for 1.3 seconds before the user can read the text, because Chrome’s default behavior is to show no text while the font is still loading^[3].

Consider that 1.3 seconds is the average load time using a broadband connection to download the font files from Google’s servers. Imagine how long it would take in less-than-ideal situations, such as slow mobile networks and using a shared-hosting server to serve the font.

Without the Web font, the same document would finish rendering in an average of only 0.012 seconds, which means the font increased the load time by 10,733%. That is a hefty price to pay for rendering a novelty display font that’s not functional enough to be used for critical website content. That’s why some users choose to disable remote font files from loading.

If we want to gracefully degrade our web design in situations where the user has chosen to disable remote font files, we should use Web-safe fonts in our font stack.

It must be noted here that you don’t have to load the entire font family. And if you use the Google Font service, you can selectively load just the font variations you need.

Web-safe fonts = Cheap and Easy Graceful Degradation

Though it’s rare, @font-face isn’t supported in a few web browsers, especially old ones.

Earlier, I mentioned that 90% of Internet users use a browser that supports @font-face.

Not having a font stack that includes Web-safe fonts and a generic font family means that we aren’t controlling how our web design degrades for at least 10% of the Internet’s users.

The time and effort required to use a simple CSS font stack that includes Web-safe fonts is very small, so there’s little reason not to continue doing it.

References

1. The SitePoint CSS reference for @font-face has a table showing @font-face as being supported in Internet Explorer 5.5+.
2. According to The Can I use @font-face Web fonts compatibility table, 89.84% of the Internet population uses a browser that has full or partial @font-face support. This data is from StatCounter Global Stats, November 2013.
3. See the description of the browser-specific Web font rendering behaviors on the Google Developers site. This is outdated because as of Firefox 4 (officially released March 2011), loading Web fonts now behave similar to WebKit-based browsers.

Related Content

• The Essential Guide to @font-face
• A Guide to Google Font API
• Comic Sans: The Font Everyone Loves to Hate
• Related categories: Web Standards and Web Design

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

The post Why We Still Need Web-safe Fonts appeared first on Six Revisions.

A bubble formed around social media in 2013. But other companies, nations, and ordinary people struggled to find advantage in technological change.

By Antonio Regalado