Category Archives: Workflow

Tips for improving workflow, including software, shortcuts, tactics, and other tools and techniques for getting things done more efficiently and with more fun

Dropping Adobe Creative Suite: Website syncing and publishing without Dreamweaver

Over the past two years, I’ve paid nearly $500 to Adobe for the use of their Creative Cloud software suite.  That’s $20/month as a student user.  In the old days of outright purchasing software as a licensed user, that amount of money would have provided me with programs that I could continue to use for the life of my computer and beyond.  After all, I’m still happily using a copy of JASC PaintShop Pro 8 that I purchased well over a decade ago.

Unfortunately, after providing Adobe with $500 of my money, I have nothing to show for it.  My subscription to Adobe expired in the Spring and I couldn’t bring myself to pay $50 per month (more than my internet bill!) as a non-student user. Heck, I wouldn’t resubscribe at the student price.  The only part of the suite that I consistently used on a weekly basis was Acrobat, which thankfully remains available for purchase with a permanent license (though, unfortunately, the new Acrobat Pro DC presents the worst UI update and privacy violations I’ve seen in a while, but that’s a topic for another post).

Once I decided to drop Adobe, I needed to piece together a replacement for Dreamweaver, which was my go-to HTML editor.  Dreamweaver was always a bit bloated for my needs: I never did figure out how to use many of the built-in features, particularly the things that were Adobe-specific and not standard HTML.  However, its color-coded handling of language syntax was useful, and I especially appreciated the site management tools that allowed for convenient synchronization of entire websites.

I now rely on a couple of free, open-source projects that recreate these features from Dreamweaver, as well as a bevy of other useful functions that have improved my workflow.  For code editing, I adopted Notepad++, which has long been my preferred method for viewing HTML files quickly (no sense loading up Dreamweaver, which took several seconds even on my powerful desktop, when Notepad++ could open and display the file almost instantaneously).

Screenshot of my personal website's index.php, demonstrating the syntax highlighting features (and folding option) in Notepad++
Screenshot of my personal website’s index.php, demonstrating the syntax highlighting features (and folding option) in Notepad++

Notepad++ provides color-coded syntax highlighting and folding, not only for web development but for ‘real’ programming languages as well.  Powerusers of Notepad++ also have access to plenty of plugins that extend the functionality of the program, including the NppFTP plugin that brings FTP access.  I haven’t experimented much with it, but it may well be possible to handle my site synchronization and publishing needs from within Notepad++.

However, I found another great open-source program called FullSync to handle my site updates and to keep files synchronized.  FullSync is a beautifully simple program: you set a source directory and a destination directory, either of which could be a local folder, an S/FTP location, or a connected network share (SMB), and then you select which type of synchronization relationship you’d like the two folders to have: a direct, exact copy, a 2-way sync, a backup copy, or a publish/update relationship, which is more conservative about deleting anything on the destination folder without your express permission.  The great thing about FullSync is that once you’ve set up your profile, you’re always just a button away from publishing your changes to the web.  It actually provides the same functionality as Dreamweaver, but in a faster, more intuitive manner.  On the backend, I keep my web files–both the ‘in development’ and ‘live for web’ folders–synchronized between my own devices using Sync.com, which provides all of the features of Dropbox without the sketchy invasions of privacy (more on this later).

(Note: Unfortunately, FullSync can be a bit unstable when initially setting up a new profile. It seems especially prone to crash whenever I select a source or destination folder that is SFTP or SMB.  My advice is to save your profile after each change as you’re setting it up, until you’ve eventually got all the parameters in working order.  FullSync has never let me down, once I have set up my profiles completely.)

And that, folks, is how a couple of completely free and open-source programs have taken the place of Adobe’s bloated, bug-ridden, expensive software suite in my web development workflow.

 

 

Favicons & UI aesthetics / real estate

This is a quick post to share a strategy I’ve long used to keep a lot of my favorite sites bookmarked in Firefox / Chrome while using minimal screen space.  It’s based on favicons, which are those tiny little icons to the left of the URL in your browser’s web address bar.  They’ve become pretty common these days, and typically they’re miniature versions of the logos of their respective sites–e.g., Amazon’s favicon is an a with their signature swoop; Gmail’s is an envelope.  When you bookmark a site in your web browser, it usually remembers the favicon associated with the site and attaches it along with the page title (sometimes you’ll need to reload the page from the bookmark for the favicon to show up).

42913-FaviconsThus, in my browser I have favicons for around 2 dozen sites in the bookmark toolbar, which allows me to quickly access the sites that I visit most often.  There’s even one for accessing my blog–the little hand holding a pen, just to the left of the ‘Games’ folder.

I also have bookmarklets for posting links to Facebook, Mendeley, or my Amazon universal wishlist–or even to save something as a draft to this blog, so I can use the link later on when I’m writing a post.  Unfortunately, bookmarklets often don’t load favicons themselves. Enter this addon for Firefox: Bookmark Favicon Changer. This addon lets you set your own custom favicons, or export the icons associated with existing bookmarks. That way you can export your Facebook icon and re-use it as the favicon for the ‘share to Facebook’ bookmarklet.

{Update: Recent changes to the Firefox API have broken Bookmark Favicon Changer, and I’ve yet to find a suitable replacement. The addon is still available for Chrome users: Bookmark Favicon Changer.  I’ve just installed another addon for Firefox that promises to create favicons for sites that don’t already have one; perhaps it will apply to bookmarklets as well?]

Another useful tool is the FavIcon Generator at Dynamic Drive, which lets you upload any image and convert it into a favicon for your own site, or an icon for use in Windows.  It works best with images that are already squared. Whenever I’d like to add a site to my bookmarks toolbar that doesn’t have its own favicon, I head over to this site and create one myself.  That way I can use the bookmark with the small amount of space required by a favicon (16 pixels), rather than taking up enough space for text spelling out the name of the site.

Finally, if you’re looking to add a favicon to your own website, it’s pretty easy–just create one at the site above, then upload the image to your website.  Originally, any image named favicon.ico located in the root folder would be picked up by your browser and identified as the favicon; these days, to be on the safe side it’s worth adding this tag inside the HEAD of your index page:

<link rel="shortcut icon" href="http://example.com/favicon.ico" />

For far more information about favicons–including some history and more details on proper formatting of code for maximum cross-browser support, head over to Syed Fazle Rahman’s discussion at Sitepoint– Favicon: A Changing Role

 

Quick tip: Fixing a slow Downloads folder in Windows

I recently had an issue with the Downloads folder on my Windows 7 desktop computer: although there were only about 50 files, it would sometimes take the folder several minutes to load in Windows explorer.  After some googling, I turned up the following solution: apparently at some point my OS had decided that the frequent presence of video files in the folder meant that it should treat it as a video folder.  This, in turn, must have triggered some kind of indexing of the files as if they were all videos, which is doubtlessly a very CPU-intensive, time-consuming process. Anyway, the fix is to tell Explorer to optimize the folder for “general items” instead. Navigate to your downloads folder, then go to the folder one level higher — e.g., if your folder is at C:\User\Downloads, then type C:\User in the navigation bar.  Then find Downloads in the folder list, right-click, and hit the Customization tab.  You should see options similar to the image below.  Just change the selection in ‘Optimize this folder for…’ to the appropriate content, i.e. general items, and from now on your folder should load and refresh normally.

 

Source:

Download folder ultra slow refresh – Microsoft Community.