Tag: web

My Creative Toolbox

Some time in early 2014 I ran across Tom McFarlin’s post My WordPress Development Toolbox and thought, “how clever and what a great idea!” I immediately sat down and started documenting my own toolbox but didn’t finish it and publish it…until today.

‘Creative’ vs. ‘Development’ Toolbox

While the structure of this post is heavily influenced by Tom’s, I realized as I started to dig into my own toolbox that it has more than just web development tools. I decided to document all of them. (So Tom, if you’re reading this, thank you for the idea and the great outline!) I’ve sectioned my toolbox like this:

Because of that, I chose to call it my “Creative Toolbox.”

Hardware

16” MacBook Pro

I picked this up a few weeks ago after having a 15” MacBook Pro for about a year (and an iMac before that, and a MacBook Pro before that…). I absolutely love this machine. The screen is gorgeous and the extra bit of screen real estate is remarkable. The keyboard has returned to its old, more enjoyable (to me) mechanism and the battery life is great.

11” iPad Pro with Pencil

I’ve always loved the iPad. I use it for reading, emailing, task management, note taking, word processing and working in spreadsheets. I have always been anxious for the day when it can be used for more than just the information consumption and light productivity work I do. With iPadOS, I believe that it will become more of a creation and development powerhouse. With Microsoft’s bevy of Office 365 iPadOS apps and Adobe releasing Photoshop for iPad and working on Illustrator for iPad, the powerhouse tablet is not too far away.

Originally I bought the 12.9” iPad Pro, but it was just that much too big to hold and read or keep with me on the sofa to pick up and poke around on while watching TV. For now, the 11” is perfect for me.

iPhone 11 Pro

I actually debated getting the Max version of the phone this year, but decided to stay with the regular size. I don’t actually use my phone for that much besides listening to music, taking pictures, tracking health stuff, replying to emails and starting notes, so the regular size works best for me.

Software

Brettro had four main capabilities when it was in business: website design and development, visual identity creation and management, print product design and videography and post-production. While most of the software I use is exclusive to a particular practice, you will find some repetition too.

Software for Document Production

  • Document production: I’ve been using Adobe InDesign since it was first released in late 1999. It replaced PageMaker, which I also used. It is an incredibly powerful document production application. It also exports pretty clean HTML, which I do from time to time, and has impressive looking ebook capabilities, though I’ve never used them (but have always wanted to try).
  • Document creation and editing: I use Microsoft Word to create my source documents for review and edit prior to importing the final version into InDesign.

Software for General Productivity

“General productivity” to me is email, task management, note taking and general life organization.

  • Email: I’m old school, I use Apple Mail. I honestly keep a pretty disorganized inbox and a slapdash folder structure. If there’s something actionable in an email, I either flag it to remember later, add it to a to do list or complete it right away.
  • Task Management: I love lists and get a great deal of satisfaction out of crossing something off a list or checking a box when it’s done, but I have yet to settle on a single task management solution.
    • Reminders: I use Apple Reminders for personal stuff like my grocery list, errands and chores. (Being able to say “Hey Siri, add soap to my grocery list” is really nice.)
    • OmniFocus: at one point when I was working my full-time job, going to school full-time and running Brettro part-time, I used OmniFocus religiously with the Getting Things Done (GTD) framework. It was magical. Nowadays I’m less committed to GTD and don’t use OmniFocus that much, but it is an incredible piece of software worthy of a mention.
    • Microsoft To-Do and Planner: as much as I hate to compliment Microsoft, their commitment to Office 365 and rapid deployment of its tools is impressive. Both To-Do and Planner are worthy apps, the former for individual task management and the latter for group task management. As I’m ramping up my writing for this blog, I’m leaning towards using To-Do and Planner for managing tasks related to it. (Stay tuned for a separate entry on Office 365.)
  • Note Taking: since the iPad was released I dreamed of a day that I would be able to use it to take handwritten notes. Every few years I would buy a third-party stylus and try it, but it never felt quite right. Enter the Apple Pencil in 2015 and I never looked back.
    • Nebo: this note taking app is remarkable. It recognizes your handwriting as you write and learns the quirks of your handwriting over time. You can also correct a recognized word by tapping on it and choosing from a list of suggested words. It has iCloud synchronization, though I don’t use it because I keep all my notes in Microsoft OneNote. My only complaint about Nebo is the export-to-OneNote function. While I’m glad something exists, I wish it was a little more native.
    • OneNote: I went all-in on Microsoft OneNote in 2014 and never looked back. I had been using Evernote for awhile, but they kept redesigning the interface and trying out different paid tier models. The constant interface redesigns created an irritating learning curve, plus I was already in the Office 365 ecosystem, so it seemed logical to adopt. Plus the apps were (and still are) available for Mac, iOS and iPadOS and are really quite good. The only thing I don’t like about OneNote is that text recognition for handwritten notes is only available on Windows.
  • Password Management: a client of mine suggested 1Password to me in 2009, I bought it and have never looked back. This is an incredible product that is easy to use, syncs across devices and is available on macOS, iOS, iPadOS and as a web-based app. It also integrates into the browser on macOS and functions as an extension on iOS and iPadOS.

Software for Video

  • Camera: while I don’t shoot much video right now, when I do, I use my iPhone.
  • Post-Production: years ago I used (and preferred) Apple Final Cut Pro, but abandoned it when they rewrote the app in 2011. So I picked up Adobe Premiere Pro. It’s available on for both Mac and PC, which I needed because my full-time job requires me to use a Windows PC (which is a real bummer, let me tell you). I also use Adobe After Effects for motion graphics. And use Adobe Media Encoder to render videos for posting.

Software for Images and Graphics

  • Camera: I am not a photographer. I can take a snapshot, but I cannot shoot a photograph. There is a distinction and I wish I had the skill, but the camera I use when I do take pictures is my iPhone. It’s the one that’s always with me.
  • Image Management: for my personal photos, I use Apple Photos. For large scale projects for clients or friends, I use Adobe Lightroom.
  • Image Editing: like just about everybody else, I use Adobe Photoshop. And probably only use about 1 percent of its total feature set.
  • Graphics Creation and Editing: between Photoshop and Adobe Illustrator, I can create just about any graphic I need to. I’ve been using Illustrator since it was released in 1987 (no, really). Next to MacPaint, it was the app that drew me into the world of design. It has a special place in my heart.
  • Slideshow Creation: on multiple occasions I’ve created slideshows for events. I use Boinx FotoMagico to do so. The software is great and very capable.

Software for Web Design

  • UI Prototyping: most recently, I’ve used Photoshop to create my user interfaces, but as I tackle creating a new UI for brettro.com, I’m excited to dive into Adobe XD.
  • Browsers: now that Internet Explorer is dead, give me all the standards-based web browsers: Safari, Chrome and Edge.

Software for Web Development

  • Web Server and Database: MAMP Pro was recommended to me eons ago. I like it and I’ve never tried anything else.
  • IDE: I’ve used Panic Coda since pretty much the moment they released it in 2007. I’ve always loved the app, from the opening screen containing all your sites and projects to the coding environment that just gets out of the way. the original Coda had a built-in reference library, which I found very useful. Coda 2 made an already great app even better. Recently Panic announced Coda’s replacement, Nova, which I’m very excited to get my hands on and use.
  • FTP: before Coda there was Panic Transmit. I never thought I’d be so excited about an FTP app, but this FTP app is really good. It’s fast. It’s feature complete. And, like Coda, it gets out of the way and lets you do what you need to do.
  • Database: I’m not sure when I first discovered Sequel Pro, but it is such a simple and elegant way to manage, view, edit and create MySQL databases I can’t imagine using anything else.
  • Helpers: I’m not sure how I came across CodeKit, but it does exactly what it says it’s going to do and it’s amazing. Plus it works very hard to work well with other development apps like MAMP. I essentially use it for SASS compiling and JavaScript minification, though I’m sure it does much more.
  • Diff Tool: honestly, I chose Kaleidoscope because I liked the icon. Fortunately for me, the app behind the icon is incredibly good and useful. It integrates with Tower, the source control app I use. for the rare times when I need a diff tool, Kaleidoscope makes it easy to do a compare and solve an issue.
  • Source Control: I was a hardcore Subversion fan for source control, but in either 2013 or 2014 a friend of mine convinced me to switch to Git. And at some point after that I ran across Git Tower for managing my repos. It’s great. I love it. And between their book on using Git and the app itself, it makes using Git incredibly easy.
  • Marking Up HTML Text: while I do my development work in Coda, when I need to mark up a long or complex piece of text, I use Adobe Dreamweaver. The environment feels more tuned to that with menu commands to insert a table (rather than code it yourself) to menu commands to insert special characters. Plus Dreamweaver has a special place in my heart. In the late 90’s when the web was new and I was a fledgling designer/developer, Dreamweaver was the most amazing IDE ever. But it was $300, which priced it out of reach for me for awhile. once I was finally able to afford it, I felt like I’d arrived.

Software for Writing

  • Brainstorming, Outlining and Mind Mapping: like I said above , I use OneNote for capturing notes and ideas.
  • Writing: I’ve tried other word processors and text editors over the years, but I always come back to Microsoft Word. It’s definitely more than I need for blogging, but it’s familiar and ubiquitous.

As Things Change…

This is my toolbox on the day I posted this. As things change I’ll keep it updated.

On ExpressionEngine vs. WordPress

Several years ago I decided to take a look at the popular web-based content management systems available, choose two of them and focus my website development efforts around them.

It was time. I had been a strong proponent of Adobe Contribute for years as it made managing websites for non-HTML savvy folks very, very easy. But I saw value in web-based products versus buying an app that needed to be installed on a computer.

The Analysis

So, I looked at Drupal, ExpressionEngine, Joomla! and WordPress. I know there are others, but these are the ones that jumped out and appeared to have a strong, committed developer base.

Truthfully, my review was not scientific, but the biggest factors in my assessment were:

  • Aesthetics of the product’s website and admin,
  • The commitment of the teams responsible for updating and upgrading the product,
  • The apparent size of the product’s developer base,
  • Availability of documentation,
  • The price, and
  • How quickly I felt comfortable creating a site using the product.

The Winners

WordPress was an instant winner. The price tag was right, the commitment of not only its creator but also of the core team made was evident and documentation abounds. Also, the admin area for entering and managing content was—and remains—beautiful. It was a natural choice.

At the same time, I kept hearing of this product called ExpressionEngine. I didn’t know much about it, except that it was used by some high-traffic, high-profile websites. And that impressed me. The product was in transition moving from a very solid version one-dot-something to version two. They had a beta of version two available, so I downloaded it, found a book about it and got busy. Out of the box, EE is powerful and incredibly customizable. I was initially a bit overwhelmed by the granularity of the settings, options and capabilities, but I was impressed by a clean admin interface, a very strong and responsive support forum and the commitment of the community behind the product.

So there were my two winners: WordPress and ExpressionEngine.

The Ones Who Didn’t Win

It’s unfair to call Drupal and Joomla! “losers” because they didn’t lose. To say they “lost” implies that the products did not meet any of my very non-scientific criteria. They both do have strong developer bases and committed teams to improving and updating the products. Documentation abounds and they’re both free. And they each have an incredible global installed base.

But I just did not feel comfortable using them. And that’s the non-scientific part of it, really.

Why brettro.com is WordPress

Shortly after choosing both WordPress and ExpressionEngine, I had a major project where EE was the perfect choice. I still manage that website today, use EE daily and absolutely love it. (I wish I could tell you what that website is, but I am ethically bound not to.)

Because I was already using EE on a daily basis, I felt that I needed to use WordPress on a website that I would also manage daily so that I would become equally as familiar with it. And so I chose WordPress to be the CMS as I began to redo brettro.com.

So there it is. My reasons for choosing and using the web-based content management systems I do.

What CMS’s do you use? And why?

 

Submitting to Subversion

This is the first in a four-part series about how Brettro integrated Subversion into its workflow. Part two will discuss the products Brettro uses to manage its SVN repositories, part three will discuss how Brettro uses SVN with ExpressionEngine and part four will talk about how Brettro uses SVN with WordPress.

About a year ago I tackled the task of integrating version control into my coding practices. I had spent a frustrating amount of time either recreating my code base as I started on new projects or backtracking and rewriting code when I would get a flash of inspiration to try something new. Also, I have both an iMac and a MacBook Pro and I use them interchangeably and wanted to be able to have the most up-to-date code on both of machine. Plus, it seemed all the pros were doing it—and since I consider myself one—I should join the gang.

Why Subversion?

Usually I do quite a bit of research, compare features and discover the value of one product over another. In choosing SVN, however, all I knew was that the WordPress Core Team used it. That, in and of itself, was a strong enough testimonial for me to dive right in.

Getting Started

When I know nothing about a topic, I buy a book, which is the first thing I did. I picked up Apress’s Practical Subversion, second edition, plopped down and started reading. I read chapters one, two and six completely as they provided an overview of version control in general, a “crash course” in Subversion and best practices in using Subversion. (By the way, Subversion is also known as SVN.)

Although clearly and plainly written, I was still confused as to the best way to get started and the best way to integrate SVN into my current workflow. I asked folks how they used it. I tweeted about my confusion consistently. I read blog entries and articles ad nauseum. I definitely hadn’t had my “ah ha!” moment yet.

Integrating SVN into My Workflow

As it turns out and after some starts, stops and stumbles, I realized that my current workflow wasn’t so much a “workflow” as much as it was a “jumble-of-tasks-that-stumbled-over-themselves” to get a project done. So I began to map out two workflows: one for managing Brettro web properties and one for creating and managing client web properties. This was really helpful as it:

  • Clarified the basic SVN concepts of trunks, tags and branches, and
  • Formalized how I create, produce and maintain website code.

Creating a Foundation: My HTML ‘Codebase’

With a better understanding of the basic SVN terminology and process, I decided to start with a fresh series of HTML, CSS and JavaScript files that would serve as the basis of all my website code from hereon out; and I’d call it my “codebase.” This seemed to be a great time to:

  • Make the switch from HTML 4/XHTML 1.1 to HTML5,
  • Adopt HTML5Boilerplate, a well-maintained framework established to ensure HTML5 code worked fairly well on legacy browsers (like any version of Internet Explorer before IE9),
  • Adopt 960.gs, another well-maintained framework established to ensure CSS consistency across browsers, and
  • Create the Brettro website design style manual.
With my basic HTML5 codebase complete, it was time to venture into the world of SVN. My goals at this point:
  • Be able to modify my HTML5 codebase as necessary for both my purposes and as both HTML5Boilerplate and 960.gs released improvements,
  • Create a branch of this codebase for my ExpressionEngine development,
  • Create a branch of this codebase for my WordPress development.

Repositories, Trunks, Branches, Tags and Working Copies

Let’s get some basic terminology out of the way:

  • Repository: the “repository” (or “repo”) is the container where your SVN-managed code is kept;
  • Trunk: the “trunk” is the main codebase of a project where most of your development will occur;
  • Branch: a “branch” is an offshoot of the trunk (do you see the tree metaphor?) whereby you might want to try out an idea or a feature that may not actually make it into production;
  • Tag: a “tag” is a copy of either the trunk or a branch frozen at a specific point in time, such as a release (the tree metaphor comes to a screeching halt here); a tag is never modified once it’s created;
  • Working Copy: the “working copy” is either the trunk or a branch copied to your computer from the repo to allow you to make changes.

After all this reading, contemplating, starting, stopping, deleting and creating, I settled on a basic structure that works for me. I’d like to think it’s a pretty common structure because it is based on my understanding of how WordPress organizes their SVN repository (and I like to use best practices because there’s no need to reinvent the wheel):

Trunk

This is where I do my “next major version” development. For example, right after I finished my HTML5 codebase, HTML5Boilerplate released version 2 of their product. Rather than integrate those changes into version 1 of my codebase, I’ll integrate them into version 2 and do that development here.

Branches

When I imported my initial HTML5 codebase into my first SVN repo, I immediately created a branch and named it “1.0.” The “1.0” branch is my working copy of my HTML5 codebase code where I squash bugs and make minor fixes, then release them as dot releases. These releases are merged back down to the trunk so that they are included in the next major version codebase release.

Tags

After creating my “1.0” branch, I also created a “1.0” tag. This gives me a complete capture of version 1 of my HTML5 codebase so that I have a stable, working copy to use to create new projects.

Committing to SVN (See what I did there?)

By finally having an understanding of basic SVN techniques, by documenting my SVN structure and practices and by creating my first version controlled codebase, I was ready to take a deeper dive. Next I created branches of my codebase for both my WordPress codebase and my ExpressionEngine codebase. Stay tuned to the next three parts to learn what software I use and what workflow I use to manage sites built with either of these content management systems.