The Breakroom

Advertising with Ollie

January 22, 2019

By Ged Maheux

When it comes to online advertising, the big question has always been: how do I get the most bang for the least bucks? If you’re a small developer with a limited budget (like we are), then you’re accustomed to carefully picking and choosing how and where to promote your product to reach the widest possible audience. We understand the struggle – which is why we created the Twitterrific Ad Network!

Now you can advertise your app, website, product or service directly on Twitterrific’s expansive network of tech-savvy users for just $100 a month. For that price we guarantee 1,000 tap-throughs – not impressions but actual visits – to your App Store page or website. What’s more, we take care of creating the ad for you ourselves and even provide App Analytics for iOS or Google Analytics for websites.

Signing up is as simple as sending us a few lines of text and subscribing via PayPal. We can usually get your ad up and running within 24 business hours. If you have an app, website, product or service that deserves a quality ad run for minimal cost, advertising with Twitterrific is the way to go. Head on over to our website to learn more and then get in touch. Let us help!

Artistic, Yes, but I Like It Too!

January 9, 2019

By Craig Hockenberry

For many artists, Linea is a creative tool that’s just as important as Procreate and Photoshop. It makes us happy to see the app we created for our own sketches become something that so many other designers rely on.

But recently we’ve been seeing that more technically inclined folks are also discovering Linea’s power. Whether you’re an engineer designing bridges or a podcaster who needs to push a few pixels, Linea is a wonderful development tool.

Marco Arment’s experience of annotating building plans alongside an architect and his wife gets at the heart of it: your iPad becomes a miniature whiteboard with layers that you can use to think about problems.

I made this discovery during Linea’s development and have been preaching it ever since. Here are just a few things I did with Linea last year:

These tasks are certainly creative, but not really artistic. If your work falls in similar lines, check out Linea today. You’ll thank your lucky stars!

Year in Review, 2018

December 13, 2018

By Webmaster

Iconfactory 2018 holiday illustration - the factory set against a snowy hill with Ollie the Twitterrific bird ice skating in the foreground

Our 22nd year in business was a good one for both us and our clients, and included some important anniversaries of key events in the factory’s growth. First, we paid tribute to the ten year anniversary of the iPhone SDK in March, and then the App Store a few months later. Twitterrific has been there since the very beginning of this revolutionary new kind of software!

You Can’t Keep a Good Bird Down

We started off the year celebrating the first anniversary of Project Phoenix which brought Twitterrific back to the Mac in style. It wasn’t long however until our beloved Ollie ran afoul of some major changes at Twitter.

Back in April we saw looming problems that would affect all third-party Twitter apps and in July we were forced to start removing features from both the iOS and macOS apps. In August, Twitter removed streaming and our ability to send push notifications.

Ollie's Goldfinch custom app icon

When Halloween rolled around it seemed fitting to cut the poor bird in half to help celebrate the spooky season.

Despite all of these setbacks, we’re still adding new features and fixing bugs. In November we introduced you to Ollie’s extended family, a fun set of custom app icons you can use to give your desktop or home screen a makeover!

A Busy Year for Sketches

Another one of our favorite products had an amazing year. It all started in March when we released the second major version of Linea Sketch.

This update introduced moving and transforming parts of your sketch, image import, and added an innovative feature called ZipLine. We also integrated with all the latest iOS features to support portrait orientation, split screen mode, and drag & drop. Then in May we added ways to manage the colors in your sketches and projects while retaining Linea’s famous simplicity.

We didn’t stop there, though. Oh no.

In September we were excited to launch Linea Go for the iPhone with all the power and ease of use of Linea Sketch in a fun-sized app that fits in your pocket.

Linea Go for the iPhone

To finish up the year, we updated the whole Linea product line with powerful new fill and blend tools. We also expanded our wildly popular ZipLine feature so it can recognize geometric shapes. iCloud version history and support for the latest iPads and Pencils were also included in these comprehensive releases.

If you love what we’re doing with Linea, please take a moment and leave us a tip. This kind of rapid development comes at a cost, and the only other alternative we have to pay for this work are app subscriptions.

Public Service Announcements

Dark Sky animated windmill icon

Of course there’s more to our digital lives than just making wonderful apps. Our client work challenges our design chops and keeps the conveyor belts humming right along. Projects for the Dark Sky weather app and a fun, custom version of Apollo for iOS were two of this year’s standout clients.

We also like to keep abreast of the latest developments for macOS and iOS including Safari so we were thrilled when a new kind of “favicon” was introduced a few years ago. And even more thrilled when those same icons came to all our tabs in 2018!

In October, Craig took a deep-dive on how Safari is changing to support “dark mode”. Currently, this is limited to macOS, but we wouldn’t be surprised if this change makes its way to iOS in the coming year.

Accessibility is another topic that’s near and dear to our hearts. Making products that anyone can use is something we strive for. Back in July we posted about the importance of making your tweets more accessible by explaining how VoiceOver works with emoji and Unicode. The article is a big help for people with visual disabilities and has been shared thousands of times.

Peace Out

When we started this business back in 1996 we would never have guessed we’d still be here twenty-two years later, doing all the things we love. It’s only possible thanks to the generous support of our loyal fans, our clients both big and small and all the users around the world who purchase and love our apps. All of us here at the factory send our thanks and wish you and yours a wonderful holiday season, a Merry Christmas and a Happy New Year!

Zip Into Shape With Linea

December 3, 2018

By Webmaster

Linea Hero Illustration - Colorful woman

Today’s update for Linea on both iPad and iPhone brings an array of features that make sketching out ideas easier than ever. We’ve extended the amazing capabilities of ZipLine to draw perfect geometric shapes, added two brand new tools, included iCloud-based version histories for your documents, and a host of other refinements. This is an amazing release: you’ll wonder how you lived without it!

Get Your Fill

With just a tap, Linea’s new paint roller tool lets you quickly flood areas of a sketch with color. The tool takes all the currently visible layers, including templates and grids, and uses them as the fill boundary. You can also draw shapes by hand to quickly color a free-form area.

We’ve had a blast using it with Linea’s vast collection of guides to create some familiar and cool retro art – your creativity knows no bounds!

Blend In

Linea’s other new tool lets you soften or smudge areas of your sketch. In the first mode, you can smooth hard edges to create gradients. The other mode lets you push color around to make fluid shapes. Combined with pressure from the Apple Pencil and varying brush sizes, this tool can be used for a huge variety of effects.

One thing we love to do is change the finger action in Settings from erase to smudge. When combined with the pencil tool, it feels a lot like working with oil pastels!

ZipShapes Rule

ZipLine was a revelation: a simple and effective way to draw straight lines. We loved it so much, we extended it to any shape you can imagine!

Simply draw a rough circle, square, rectangle, oval, or polygon and hold at the end. After a configurable delay, ZipShape will activate and transform your rough version into a clean, precise shape. It works with all of Linea’s drawing tools – including the new fill tool.

You don’t have to be perfect – after the shape is generated, there are transform handles you can use to tweak its final position and appearance. No rulers or stencils required!

But That’s Not All

Today’s update includes other great features that will help unleash your creativity while working faster and smarter:

  • Want to go back in time and fix a mistake or take a different creative direction? Tap Select in the Project view, choose a sketch, then tap Versions in the Actions (⋯) menu. Linea presents you with a list of edits and allows you to revert or create a copy.
  • Double-tap on the new Apple Pencil can be configured to switch tools, change interface state, enter selection mode, or modify tool sizes.
  • There are new settings for what your finger does while an Apple Pencil is in use: erase, blend, draw, move the canvas, or ignore.
  • We added a fun new mid-tone paper background called Mulberry.
  • New template for full-screen tablet with a minimal bezel which matches the 11″ iPad Pro aspect ratio.

Don’t forget to check out our Tips & Tricks page for some great ways to improve your workflow as well as Sketch’s and Go’s version history pages for the complete list of what’s new.

If you aren’t using Linea yet, today’s major update is a great reason to try it out! Head on over to the App Store to download Linea Sketch for iPad or Linea Go for iPhone and you’ll be creating in no time!

Meet Ollie’s Extended Family

November 6, 2018

By Ged Maheux

Today we’re pleased to offer Twitterrific updates for both macOS and iOS with several new custom application icons to change how Twitterrific appears on your macOS Dock or your iOS home screen. There are three new Ollie variants including Raven, Cardinal and Goldfinch which bring a new splash of color and make Twitterrific really stand out in a sea of boring, flat pixels.

The various custom Twitterrific icons that are available in today's macOS and iOS update

On the iOS side we’ve also added two additional variants that include a pure black background for all of you iPhone X and XS users out there that want to show off that gorgeous OLED screen. These new black-background icons blend right into the home screen and help make your favorite Twitter client feel brand new.

Twitterrific's Preferences showing the new color-coded tweets option turned off

That’s not all! Twitterrific has always color-coded mentions, replies and your own tweets so they are quick to spot when scrolling through your timeline. We personally enjoy the clarity of color-coded tweets, but we also realize that not everyone does. If you’d rather they all looked the same, we now have a new presentation option for you.

Today’s cross-platform update includes other improvements like visual tweaks for Apple’s awesome new iPads, profiles that show the date the user first joined Twitter, and several important bug fixes. Be sure to check the macOS and iOS App Stores for the latest and update your copy today. Enjoy!

Dark Mode and CSS

October 25, 2018

By Craig Hockenberry

The new Dark Mode in macOS Mojave provides users with a new way to customize their desktop environment. It also presents a lot of new situations where developers need to adapt content in their apps and websites.

While these changes are currently limited to native macOS apps, the arrival of Marzipan next year makes it likely that iOS developers will be confronted with similar changes in UIKit. A dark user interface would be a reality on all of Apple’s platforms, including tvOS and watchOS.

These changes also ripple out to web developers who are creating apps or site content that can look out of place when surrounded with dark interface elements. Some sites are using switchable themes: MacStories is a great example (use the contrast icon in the upper-right corner.)

So let’s take a moment to see where things are now, where they’re headed in the near future, and look at strategies for adapting content presentation.

Code Changes

Dark Mode has been on developers’ minds since its introduction at WWDC 2018. And since it’s an extension of the dark and light AppKit appearances that debuted in Yosemite, the consequences of this new user interface are already well understood.

For more information on what these changes mean from a Mac developer’s point of view, I recommend Dark Side of the Mac by Kuba Suder and Supporting Dark Mode by Daniel Jalkut.

Both these series cover the changes you’ll be making in the views, controls, and images throughout your app. UIKit developers can consider this information a preview of WWDC 2019 :-)

Enter WebKit

Apps on macOS have been able to embed WebKit since its introduction. Adding web content to native apps was one of its major design goals: an app called Safari was the the first one to use the new framework.

Over the years many developers, both on macOS and iOS, have taken advantage of this framework for one simple reason: HTML and CSS are a great combination for presenting content.

So it would make sense that all this cool new Dark Mode stuff would be available in WebKit, right? Nope, and making it happen is more difficult than you’d initially suspect.

Sometimes You Feel Like a Nut

Web content has to exist in many different contexts. In applications you want content that matches the surrounding native frame. With apps like the App Store, it’s hard to tell where the native code ends and the web code starts. In this situation, you want web content to respect the user’s theme choice in System Preferences.

The last post in Daniel’s series addresses the issue of adapting WebKit to an app’s needs. You’ll see how he’s watching for system changes and adapting the markup for an about box.

While this proposed solution works great for a small amount of markup, injecting code into HTML won’t scale well for richly styled content. His approach also makes it difficult for a designer: they can’t work directly with HTML and CSS files.

Sometimes You Don’t

This adaptability has a downside for the majority of web content: the environment created inside the main browser frame usually exists on its own and wants to ignore Dark Mode. For example, you wouldn’t want a dark form control to suddenly appear on Wikipedia because of a system preference change. And where is the boundary between content and chrome: should a scrollbar color match the markup or the browser where it’s presented?

Before you answer, consider these diverse viewpoints. The question is simple, the answer is not.

A New Standard

Luckily the standards groups have been debating this issue for the past several months and have settled on a new media query called prefers-color-scheme. It’s not available in any shipping browser yet, but thanks to the WebKit team, it just landed in the new Safari Technology Preview.

After downloading Release 68 and making sure that Dark Mode CSS Support is turned on in the Develop > Experimental Features menu, you can do this in your CSS:

div {
  background-color: pink;

@media (prefers-color-scheme: light) {
  div {
    background-color: yellow;

@media (prefers-color-scheme: dark) {
  div {
    background-color: purple;

As you switch in and out of Dark Mode, the div will change color. If you need a more interactive approach, say to show a theme-switching control at page load, you can use JavaScript to check the media query string:

var inDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches;

A related standard for supported-color-schemes is still being worked out. The idea behind this new meta tag is to give authors control over how colors switch automatically for form controls, scrollbars, and system colors like ButtonText. Its current implementation in WebKit looks like this:

<meta name="supported-color-schemes" content="light dark">

Whether this stays as a meta tag or becomes a CSS property is still being debated. It’s definitely something you want to keep an eye on if you use native controls on your site.

With these changes, Dark Mode now becomes another aspect of responsive web design. As with device dimensions or color, the user’s environmental choices must be taken into account. Instead of adapting elements to viewport changes, you’ll be changing designs to match the user interface chrome outside that viewport.

Semantic Style

The problem now becomes logistical: there are a lot of color and image properties in our CSS. Do you really want to duplicate all those definitions for a dark theme? Or make changes in two places? Hell no.

The solution is to start thinking about color differently.

One of the things that made the switch to Dark Mode easier in macOS was its semantic treatment of color. There are variables like labelColor, windowBackgroundColor, and controlTextColor used to represent color values. Without knowing anything about macOS development, you can probably guess what these definitions look like. You’ve just started thinking semantically.

When you’re dealing with light and dark variations of a color, it’s a lot easier to think of “text color” and not worry about whether it’s currently rgb(0,0,0) or rgb(255,255,255). It also helps when you’re dealing with a site’s branding: I can remember “Iconfactory branding color” but never rgb(229,36,30).

This, of course, can be extended to images. If you’ve got a button image that changes depending on context, just call it “refresh icon” and forget about the url().

Variables to the Rescue

Luckily, a new CSS feature that’s starting to see wide browser adoption is available to make this dream a reality. Hello CSS variables.

There are a lot of options, but start with the :root pseudo-element as a container for your variables. This is what it looks like:

:root {
  --branding-color: rgb(229, 36, 30);

And once you have that variable defined, you can use it anywhere in your CSS:

header {
  background-color: var(--branding-color);
footer {
  background-color: var(--branding-color);

You’re not limited to using just colors, either. These variables can be used for font lists, URLs, and any other property type.

Pretty awesome, especially when marketing decides they want to change your branding color, logo, and font face!

Picking Out the Pieces

There’s nothing preventing you from having more than one container for your variables, so we can extend this facility to support themes. First, we’ll use two CSS files. One called dark.css:

:root {
  --text-color: white;
  --page-background-color: black;

And another called light.css where we switch the colors around:

:root {
  --text-color: black;
  --page-background-color: white;

In a shared.css file, you use these definitions as needed:

body {
  color: var(--text-color);
  background-color: var(--page-background-color);

To switch themes, you tell the DOM which theme file to use. You might do this server-side by looking at a preference setting in a cookie and emitting the right <link> element. But the user experience is probably better if you use JavaScript to manage the stylesheet:

<link id="theme" href="style/light.css" ... />

<script type="text/javascript">
  function switchThemes() {
    var e = document.getElementById('theme');
    if (e.getAttribute('href') == 'style/light.css') {
      e.setAttribute('href', 'style/dark.css');
    else {
      e.setAttribute('href', 'style/light.css');

<button onclick="switchThemes();">Switch</button>

If needed, the browser can switch themes according to the user’s system preference. When the media query becomes available, use it to wrap your variable definitions and you’re good to go:

@media (prefers-color-scheme: light) {
  :root {
    --text-color: black;
    --page-background-color: white;
@media (prefers-color-scheme: dark) {
  :root {
    --text-color: white;
    --page-background-color: black;

Note that if you need to support themes on older browsers, you can use tools like Sass or Less to accomplish something similar. Variables are used to generate multiple CSS files which can then be switched using the <link> URL.

In our experience, the two hardest parts of all this are coming up with semantic names and colors that work well in both dark and light settings. It’s more of a design problem than a technology issue. If you need help, we’re here to help. We’ve been dealing with these issues for years, both in apps and on the web, and want to share our experience making award-winning products.

Adding Polish

This is already pretty great, but we can make it even sexier with CSS animation. In the browser it adds a level of finish; in an app it lets you match the animation in AppKit layers.

To make the job easier, we’ll again rely on CSS variables. Making the animation configurable ensures that animations stay in sync and lets you experiment or debug with ease. Here’s an example of the variables you might use:

:root {
  --duration: 1.0s;
  --timing: ease-in-out;

And they’re used to animate color changes in the document:

body {
  transition: color var(--duration) var(--timing),
              background-color var(--duration) var(--timing);

Note that transitions only apply to the element where they’re defined or inherited. If you set colors on another element, like a <button>, you’ll need to create a transition on that element, too. Thanks to color variables that start with two dashes, it’s easy to search for them in your markup.

Pesky Scrollbars

This whole treatise got its start with some Halloween decorations. Every year we do something fun at the Iconfactory and this year I noticed a problem. The scrollbars looked bad in the new macOS Dark Mode, so I worked around it with CSS to make them scary.

Scrollbars have been customizable in WebKit for almost 10 years. Unfortunately, this mechanism never saw standards acceptance and has retained the “-webkit-” vendor prefix.

The ::-webkit-scrollbar pseudo-elements used to configure the scrollbars still work in Chrome and Safari, but they’re buggy. They don’t animate along with the content and don’t hide when the user has a trackpad or other physical scrolling mechanism. I don’t recommend using them, and neither does the CSS working group:

The WebKit implementation of pseudo-elements for scrollbar is considered to be a feature mistakenly exposed to the web.

After deploying our decorations, I showed one of the members of the WebKit team the screenshot below and asked what was going on.

The white-belt-with-dark-pants look at Daring Fireball is something being worked on – some of the changes in WebKit require an update to the scrollbars that AppKit provides. This problem can only be addressed by a macOS update.

My earlier question about who owns the scrollbars at the boundary between web content and a native app is indeed a difficult one.

The good news is another new standard called scrollbar-color has been proposed. It includes four choices: auto, dark, light, and custom. The choice of auto lets the browser decide what’s best, or you can use light and dark to adapt them to the content you’re presenting.

The custom option lets you specify two colors: the first is for the scrollbar thumb, the second is for the track. There’s also a scrollbar-width in the proposal that allows you to size the scrollbar. Here’s an example using CSS variables:

section div.container {
  scrollbar-color: var(--thumb-color) var(--track-color);
  scrollbar-width: var(--width);

These features are still in flux, but it’s clear to me that the standards bodies are aware of the problem that web authors are currently facing with scrolling content.

Putting it All Together

We’ve covered a lot of topics in this piece, but these thousands of words are indeed worth a picture: in a simple demo. (You saw a preview in the animation at the top of this post.)

The page itself isn’t remarkable: just a single new meta tag and some simple JavaScript. The good bits are in the CSS file that uses the theme variables. There are a lot of comments and links, so take your time going over the source code.

As always, remember that we’re here to help, either with design or development services. We love making great looking products, no matter if they’re dark or light!

Caring is Sharing

October 24, 2018

By Webmaster

Sharing from the Finder with Twitterrific's new sharing extension

No matter what some people think, there are some things that a native app can do better than the web. One of those things is providing a system-wide sharing extension.

With the release of Twitterrific 5.3.7 for Mac, we’re happy to announce that we now fully support sharing. After downloading the update, you’ll need to enable it in System Preferences (under Extensions > Share Menu). After that you’ll see Twitterrific show up in when you click on the sharing icon.

Another thing we’ve done to embrace System Preferences is add new timeline theme options that follow your current Light and Dark Mode setting. It’s perfect for folks who use utilities to automatically switch based upon location or time of day.

For a full rundown on what’s new, including important changes in the About box, check the version history. If you’re not already a customer, check out the features or download the app today!

The Darkest Time of Year

October 16, 2018

By Craig Hockenberry

App icons of all our Mac apps lined up on the chopping block with a cleaver through the skull of Twitterrific's Ollie. Sad birdie!

For over 20 years, we’ve been celebrating our favorite holiday on the Iconfactory home page. Yes folks, it’s that time of year again: Halloween!

It all started long ago with The Great Pumpkin and we haven’t looked back. If you love this holiday as much we do, there’s a page that will give you an endless source of joy. And terror.

But one thing makes this year even better than ones in the past: our site decorations are to die for, thanks to macOS’ new Dark Mode! (Be careful around the new scrollbars, you might get cut.)

So we’ve decided to do a killer sale on ALL our Mac apps and celebrate Mojave’s turn to the dark side. For the next week, you can get these great apps at prices that are CUT IN HALF:

  • xScope — Measure. Inspect. Test. $25 savings
  • Twitterrific — Tweet your way. $4 savings
  • Flare — Your photos are just the beginning. $5 savings
  • iPulse — Keep an eye on your Mac. $5 savings
  • Linea Link — Works hand-in-hand with powerful sketching apps. $2 savings

And here’s one final treat: after you turn on Dark Mode, set your Accent color to orange in the General panel of System Preferences. Boo yah!

All Linea Systems are Go!

September 26, 2018

By Webmaster

Picture of all Linea apps

Many of you have been waiting eagerly for today’s release of Linea Go. We’re pleased to announce immediate availability of our popular drawing app on the iPhone! If this is the first you’re hearing about Linea, check out what it’s like to have a sketchpad in your pocket.

In our announcement for the pre-order, you might have noticed that we mentioned new features like broadcasting. The phone’s aspect ratio also means new canvas sizes. We’re happy to say that all this functionality, and more, is on the iPad in today’s release of Linea Sketch.

Our goal is to make apps whose capabilities are the same no matter which device you’re using. There are a few small differences between the platforms and we’ve covered them in our updated Tips & Tricks page. Take a quick look and you’re sure to learn something new!

With this week’s release of Mojave on macOS, you won’t be surprised to hear that we’ve updated Linea Link to be compatible with Dark Mode. It’s also now able to handle any documents you create on your iPhone.

For an overview of all the products and how they work together, check out the Linea product site. Enjoy the launch!

Darkness This Way Comes

September 24, 2018

By Craig Hockenberry

Flare running in macOS Mojave with the dark theme in all its mysterious beauty

Wait a second… It’s not October yet, so what’s with the spooky title? A new version of macOS, that’s what!

As you’ve probably heard, the latest version of our favorite OS has a fantastic new Dark Mode and we’re pleased to announce that we have a bunch of updates to support this new feature.

Flare was designed from the start to work with the new dark appearance introduced in Yosemite and looks fantastic with the new content-centric desktop theme. Your photos will come to life in version 2.2.7!

We’ve also released updates for iPulse, Twitterrific, and xScope. Although these apps already have highly customized interfaces, we’ve made sure that preferences and other windows look right on the new macOS.

One app that hasn’t been updated yet is Linea Link. We’ve been busy getting a new companion for the iPhone ready and need to do some simple tune ups for device compatibility. We’re on the case and you’ll soon be able to get your iPhone drawings onto your Mac without any hiccups and with full Dark Mode support.

Thanks, as always, for your support!