Tag Archive for ‘Coda’

The Future of Code Editor ➝

From Panic’s Weblog:

Code Editor — originally called “Diet Coda” then later “Coda for iOS” — was our powerful and full-featured iOS editor for developers. Introduced in 2012, it was packed with innovation, like our “Super Loupe” designed to make iOS cursor placement more precise — even fun, and an “iPad Preview” that let you use your iPad as a dedicated website preview screen long before Sidecar. The goal was to make a great code editor for iOS that anyone could use on-the-go.

Unfortunately, like Transmit iOS and Status Board before it, we’re discontinuing Code Editor as it doesn’t generate enough revenue to cover its continued development.

This is pretty disappointing. I’ve long considered Coda (now Code Editor) to be one of the best applications on iOS and something you could point to as an example of an application built for “real work”.

I wrote Initial Charge’s WordPress theme in Code Editor and still use it regularly for file management over FTP and for developing various tools for my sites. I’ll continue using it for as long as I can — at least until I find a replacement. But I’m just not sure if there is any alternative that has the same level of polish that Code Editor has.

I probably sound like a broken record at this point, but this is yet another example of why Apple needs to open up the platform. Not just so developers can explore other options for monetization, but to loosen up the arbitrary restrictions on what is even possible on the platform. How many apps like Code Editor do we have to lose before Apple wakes up?

➝ Source: panic.com

What’s Next for Coda? ➝

From the folks at Panic, on the future of Coda:

We had to make a difficult choice: rewrite Coda for this new world, or leave it behind?

We’ve been making apps for a long time. And we never stopped having a passion for creating beautiful, functional, useful tools that help people do their very best work.

It’s what we are. It’s why we’re here.

So, you can probably guess what we chose.

I’m pretty excited about what they have in store for Coda and I hope they’ll be bringing many of the app’s new features to iOS as well. I built the entirety of Initial Charge’s current design in Coda for iOS and I’d like to do so again whenever I get the itch to refresh the design in the future.

Web Design on the iPad

Coda and Web Tools in Split View

About once a year I get the itch to make some changes to Initial Charge’s design. I’m not quite sure what causes this feeling, perhaps it’s simply pent-up creativity that eventually forces itself out through a text editor. Or maybe the handful of growing annoyances with the current design slowly become too much to bear. Either way, this feeling is inevitable.

The last major redesign was the largest design project I had ever completed. I made the move to a responsive, single-column layout that retained many of the design cues that help Initial Charge stand out against a sea of minimally designed WordPress sites. The yellow background for anchor elements, the headings typeset in Georgia, and the overall focus on the body text itself were all present.

One of the main reasons for moving to a single-column layout was because it was the quickest method for obtaining a mobile-friendly design. The web has changed dramatically over the past decade, but the biggest change is the number of handheld devices used for web browsing. I just couldn’t stand to continue publishing on a site that wasn’t enjoyable to view on a smartphone.

But I’ve never been too thrilled about my decision to build a single-column layout. And although the mobile experience was my highest priority, I didn’t like how the site looked in desktop and tablet browsers. There was too much untapped potential in the additional screen real estate.

The current, single-column layout always felt like a cop-out. And unfortunately, that’s because it was. My knowledge of HTML and CSS has always been rudimentary. I could get by making small changes here and there, but I would frequently run into problems that I had an incredibly difficult time trying to solve. Some of the time I could look at the source code of other sites that were achieving a similar effect, figure out how they did it, and implement it here. But a lot of the time, I couldn’t.

This past September, I made the decision to learn more about web design. I signed up for Treehouse and started their Web Design track. I can’t believe how much I’ve learned in just under five months. Don’t get me wrong, I have no expectations of quitting my day job tomorrow and earning a living as a web designer, but perhaps that will be a possibility in the future. All I know is that I’m significantly more comfortable working in HTML and CSS than I used to be and that feels wonderful.

With the knowledge that I’ve acquired from Treehouse, I’ve started work on a new design for Initial Charge. But this time, rather than modifying an existing WordPress theme — as I’ve done with every other iteration — I’m building this one from scratch. I’ve already coded the necessary template files and I’ve started work on the CSS a few days ago.

My expectation is to have a two-column layout for desktop and tablets that gracefully transitions into a single-column when viewed on a smartphone. I hope that I’m able to achieve this while also writing much cleaner code than what the site’s using now (it works, but there’s about eight years of cruft that I’m not going to miss). I don’t have any idea how long this new design will take — I’d prefer to launch it when it’s ready rather than rushing to ship something that’s not quite there yet.

Web Tools’ Presets

But I didn’t just write this piece to tell you about how much I’ve learned from Treehouse or that at some point in the future you can expect a fresh coat of paint. I wanted to share the software and resources I’ve been using to build this new design, entirely on my iPad.

  • Typewolf: A wonderful typography resource by Jeremiah Shoaf. The site features examples of typefaces in the wild and recommendations on font pairings. This is the first place I go when I need to make typesetting decisions on my web projects.
  • iOS Font List: The majority of Initial Charge readers browse the site from an iOS device and it’s important that the typefaces I choose are built into the operating system. This site lists every single font available on iOS and when it was added to the system. Once I find the fonts I’m interested in using, I check to see if they’re available with iOS Font List.
  • View Source: An inexpensive app from Paul Hudson that let’s you view the source code of any website with an action extension. It’s a very simple utility app that I find myself using just about every time I sit down to code.
  • Web Tools: This app, by James Finley, brings three essential web development tools to the iPad — an inspector, a console, and a scalable browser window. This app is genius. It allows you to test your design at any browser width and offers a handful of presets based on the most common Apple devices. Web Tool’s inspector has been invaluable for me as I’ve moved from building the HTML structure to the CSS styles.
  • Coda: This is the real deal. A full-featured text editor from Panic with find and replace, syntax highlighting, local and remote file management, keyboard shortcuts, and more. This is the backbone of my web development workflow on iOS. It’s one of the few, truly desktop-class applications on the platform and I can’t imagine doing this kind of work without it.

My iPad had a role in building the previous design of Initial Charge, but I did the vast majority of the coding on my MacBook Air. For the most part, the iPad simply served as a preview screen.

This time around, I’ve barely touched my MacBook. I spend most of my time with Coda and Web Tools open, side-by-side on my iPad, which is propped up by my Compass. I have Apple’s previous Bluetooth keyboard in front of me alongside my iPhone, a pad of paper, and a pen. This has become my preferred setting for web design work and I wouldn’t change a thing.