The Breakroomhttps://blog.iconfactory.com
A blog for the IconfactoryTue, 22 Jan 2019 19:54:08 +0000en-UShourly1https://wordpress.org/?v=4.9.6Advertising with Olliehttps://blog.iconfactory.com/2019/01/advertising-with-ollie/
Tue, 22 Jan 2019 19:54:08 +0000https://blog.iconfactory.com/?p=4544When 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!https://blog.iconfactory.com/2019/01/artistic-yes-but-i-like-it-too/
Wed, 09 Jan 2019 18:54:17 +0000https://blog.iconfactory.com/?p=4513

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.

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.

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!

A Busy Year for Sketches

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.

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.

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!

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!

Your browser doesn’t support video. Download to watch it in another app.

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!

Your browser doesn’t support video. Download to watch it in another app.

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!

Your browser doesn’t support video. Download to watch it in another app.

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 Familyhttps://blog.iconfactory.com/2018/11/meet-ollies-extended-family/
Tue, 06 Nov 2018 16:52:30 +0000https://blog.iconfactory.com/?p=4329Today 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.

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.

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!

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.

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.

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?

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:

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().

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:

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:

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:

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.

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.

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!

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.