Useful Stuff @usefulstuffmouzon - Tumblr Blog

Cloudflare Publishing Problem

I've been having problems publishing my website recently, and called my web host for the first time in a couple years because they're really reliable and I rarely have issues, so I didn't even know they had rebranded from a2hosting.com to hosting.com.

They looked at my account and said the issue was the Cloudflare proxy, so I logged in there, clicked DNS Records in the upper right corner of the dashboard, clicked Edit on the A record of my domain, and toggled it off.

I then published my website flawlessly, then went back and toggled the proxy back on again. I'm posting this because I'll never remember all these steps if this happens again.

#web

Missing Images in Photo Mechanic

When doing a Catalog Sync, there are almost always photos that show up as Missing, which is indicated with a yellow circle to the right of the filename in the viewer window. The motherlode of Missing images can be found under the Collections tab once you select one or more of the Active Catalogs in the upper left corner. Then click Collections and the catalog in question under which you'll see -sync- and below that, the most recent syncs. Click on the oldest one and you'll see Missing and sometimes New. Click on Missing and PM will bring up a tab named Collection: Missing. Click on the tab and you'll see all the images that turned up Missing in this sync.

Technically, you could just select all the images and delete them, but I'd rather be more careful. So I go through each of the shoots under the Missing tab and ask myself "why would images from this shoot show up missing?" One example is when I change the filenames. For example, I've recently added "NOLA" to the beginning of the filename on every shot taken in New Orleans because I have thousands taken there and have begun naming the files by neighborhood name. And while Bywater is the only neighborhood I know with that name, there's a French Quarter in both New Orleans and Charleston, and possibly other cities as well, so images that sort by neighborhood name can be confusing.

Another reason would be if I'm processing images and moving them deeper into my folder structure, which works in this order (see Photo Workflow posts): 1 scratch fuzzies, 2 Set GPS & base metadata w/neighborhoods, 3 rate & set classes, 4 tag & process, and 5 set finder color. If I've moved any image from a lower-numbered folder to a higher one, PM won't find it where it was earlier so it will show up Missing.

Once I've satisfied myself that images from the shoot in question really are missing, I select all of them under the Collection: Missing tab and delete them. And it's a good idea to do this fairly frequently because if you have thousands of Missing images, it can take quite a while to delete them all. And no, I've never been unable to come up with a reason a shoot's images should be Missing, so PM has always done its job, but I'd rather be completely sure before deleting images I can't get back again.

#photo systems

HEIC to DNG

I've been posting more frequently with iPhone pics, and while I'm no expert on HEIC vs JPG files, the former is newer and apparently more sophisticated, so here's how I'm doing it now: I have my normal template for DNG files shot with my big camera, and another for iPhone pics. For the latter, I have one more folder: 0 HEIC & JPG originals. within it is a HEIC folder and a JPG folder, where I export those two file types from Photos. Because I don't know which will ultimately be the best starting point, and also for safekeeping, I keep both file sets because storage is cheap today.

The next question is how to get to DNG files. Web searches suggest that the Adobe DNG Converter should be able to convert HEIC to DNG, but I can't get that to work. What does work is Adobe Lightroom, which I use for no other purpose because Photo Mechanic is so superior. So I've just begun creating a new Album in Lightroom for each shoot to keep things organized, then I import the HEIC files there. Next, I export the newly imported files into the 1 scratch fuzzies file in the appropriate job folder. Interestingly, clicking on a dng file and hitting the space bar should bring up an image preview, but it's hit and miss. But the file is there when opening in Photoshop. Not sure what the difference is, but that works.

One really frustrating note: Lightroom doesn't export full-size jpgs embedded in DNG files, so there's no way of seeing full images to know if they're blurred and such. I'll revisit this later, but this is a major Adobe flaw, IMO.

#photo systems #iPhone

SketchUp component colors

Just learned something really useful. Several years ago, I figured out that it's useful to have components with various weights: block, fast, and slow, then add-on speeds of slower and slowest. Block is what it sounds like: the resolution of a monopoly house. Select the block tag and you can zoom out to see an entire neighborhood of buildings and anything you do will be at blazing speeds: panning, zooming, whatever. The fast tag is still pretty fast, and so on.

Essentially, I'm building 3 models within a model which are turned on according to their tag. Each model is a group, not a component to prevent conflicts with other similar models; only the enclosing model is a component. The last two tags (slower and slowest) piggyback on the slow group and contain the most detailed items.

The "groups within a component" model is really useful if I'm looking to have several items within an overall model that I want to have different colors. I've rarely used the "apply this color to this component" feature, almost always coloring surfaces within a component instead. It turns out that if a surface already has a color, hitting its enclosing component doesn't change that surface, but if it doesn't, it gets the paint bucket color. More on this later as I learn more about this.

#drawing systems #urbanism #sketchup

SketchUp's Problem With Black Text

This bug has been around since at least 2020. When I create 3D Text and place it on a surface, explode it, and try to fill it black it doesn't work. But if I pick any other color from the Colors palette (say, a green) then pick black it replaces the green with black. It's not tragic; just annoying. Any ideas?

#sketchup #drawing systems

Extreme Geometry

I've had trouble creating street intersections in SketchUp because, while it does so many other things intuitively, it really misses on this if the intersection is anything other than a right angle between two straight streets. It's especially troublesome if a curve is involved, or if it's close to a right angle but not dead-on.

So I decided to make myself a tutorial. I realized that the making the curve really tight would make it much easier to figure out. And so it was... it provided great clarity.

#sketchup #drawing #urbanism

Incised Band Signs

I've been working on an incised band sign workflow for over 5 years. There's no better sign type for a classical institutional building than one that is incised into the frieze. It's a great idea for institutional buildings because they tend to be used for the same thing for decades or even centuries, like the US Supreme Court, which is unlikely to be used for anything else in any foreseeable future. A Main Street or High Street business sign, at the other extreme, will change as soon as the business fails or moves to greener pastures.

Hoefler Text is an excellent and authoritative font with serious gravitas. I've used it for years but took on the task back in 2019 of modeling an incised version in SketchUp. If anyone wants that workflow let me know, but it's too long for here, filled with painstaking processes. Here's Hoefler:

Once I finished the exhausting task of incising Hoefler I put it away and didn't really figure out how to use it best. The last several days, I've been working on a project that richly deserves an incised band sign so I decided to develop a better workflow and document it this time. Here it is:

Set a scale. 2019's Hoefler had no particular scale; capitals (depending on where you measured them) were between 55.59" and 55.64" tall. So I picked the I, which had two points perfectly vertically arranged and scaled the alphabet to 12" tall. Obviously, that can scale to anything.

The next task was to get the center, which was easy: it's the midpoint of the line that connected the two points above and below each other in the I. Given that, I drew a horizontal, then copied it 12" upward and 12" downward in which the letters were centered. I repeated this on the lowercase and numerals, which worked out perfect at 20" tall instead of the 24" for uppercase.

At this point, the font file was complete. The next task was to figure out how to get the sign text on the frieze. Because Adobe Illustrator is world-class at text, I started there. I created an artboard slightly smaller than the frieze and laid out horizontal & vertical guides centered on the dartboard. To do this, just drag a horizontal & vertical guide out of the rulers, then select them and set their precise locations.

Next, create a text box and set the font. Because 1" of paper is (supposedly, more on this later) 72 points digital, a 12" letter should be 12 x 72 = 864 points. Except it wasn't. I'm not sure whether Hoefler is different from most fonts or not, but what was supposed to be 12" tall was something like 8.35" tall. So I scaled it up and it was really close. So I laid out the sign and adjusted the tracking so it read well but didn't crowd the ends.

At this point, I was ready to Export As a DWG file, but for some reason that option wasn't available. It could be a scale problem, with the artboard being nearly 57 feet wide. After a lot of googling I went to plan B. If not absolutely precise, there were a lot of ways things could fail if I tried to drop the letters right into the DWG-turned-SketchUp profiles. So I just saved a PDF from Illustrator and imported it into SketchUp.

I then had to explode the PDF in SketchUp to make it usable, but the letters themselves were just pixellated images, but that should still work if I didn't insist on perfection. So I centered the PDF over the slightly-smaller-than-frieze-size rectangle and centered the Hoefler alphabet vertically just to the right of the frieze rectangle.

The next step was to drag-copy the letters from the alphabet to the right, snap-sliding along the bottom of the frieze rectangle so nothing would ride up or down. I eyeballed it as best I could, knowing inaccuracies would abound.

Some were really close. Others were not, like this one. For each letter, I drew a line upward from the alphabet letter and then slid line & letter whichever way it needed to go.

Once the letters were all in place, I exploded them and set their material (SketchUpSpeak for color) to the color of the frieze. I'm now about to put the frieze into the building. It has been over three hours of work to get to this point, but it's this sort of thing that really sets a rendering off.

#fonts #signs #classical architecture #sketchup

Grep

I won't remember this if I don't post it. In Photo Mechanic, I want to find pics where either Description/Caption or Keywords aren't empty. To do this:

Find > All of the words > .+

In > All items > Searching: > check Metadata box

check > Grep

Then check either Description/Caption or Keywords (or both)

#photo systems

Fulfillment By Amazon Problems

We've had a recurring problem shipping our books to Amazon in the last year or two but never wrote down the solution. Sometimes when working in the shipping queue we couldn't get either the labels required for each book to print or sometimes we couldn't get the box labels to print, and there's no clear way to go back and try again.

We had a vague memory from the last time it happened some time in 2023 that it might be a browser problem. Safari is our default browser, but some sites aren't so Mac-friendly so we tried both Chrome and Firefox, but to no avail. What ended up working after trying many other things was to restart the Mac and open only Firefox. When we did that, it worked.

SMC reset

My 16" MacBook Pro M2 Max had a problem a few days ago where my 5K LG UltraFine Display kept powering off, and if it lasted long enough, all my windows would jump over to the internal display. But in a few seconds the LG would come back on and they would jump back. Made meaningful work almost impossible.

My first thought was to reset the PRAM because that fixed a lot of things on Macs over the years, but this MBP doesn't allow that. It does, however, allow a reset on something called SMC, which apparently has something to do with power issues. So far, so good.

The Four-Year Burden

Finally, after four long years I've converted the Original Green Blog to a new blog platform, but with updated links, larger, more readable text and much larger and more beautiful images. As of moments ago, I converted the last evergreen post. Here it is: https://originalgreen.org/blog/

Retiring Old Sites

I'm about to retire several old sites I no longer use, but don't want to lose the content. I used Sandvox as my site builder for over a decade until it went defunct, and the software no longer works on the latest Macs, so the archive method is crucial.

I had used Sitesuck for years, but all that gets today is just a shadow of the site, with none of the graphics and little of the content, so it's totally useless.

Next, I tried saving each page as HTML, but the results were about as useless as Sitesuck's.

Finally, I tried saving each page as a PDF, and not only does that work graphically, but all the links are live. This should allow me to retire several more sites.

Once every page is saved as PDF, the next step is to remove the site on my web host. The first step is to remove the domain from the domain list. Once that's done, I still need to remove the document root using the File Manager. It's located at public_html/<domain>. The last step is to remove the domain at my registrar, which I usually do by setting it to renew manually, so when it expires the registrar doesn't bill for another year.

#web

SketchUp Tag Name Resize

SketchUp has a really annoying bug introduced in 2021 that affects all non-current MacOS versions: The Name column in the Tags window won't resize. Finally found a solution that works on a message board:

These steps have been working for anyone who tries them:

Open SketchUp, and from the welcome screen choose a previous file. Name column won’t resize.

Close SketchUp and open it again. Start a new document. Name column can resize.

Open the step #1 file from the File/Open Recent menu. Name column can resize. <This doesn't work for me. The only thing that works is to close the welcome screen, create a new file, then open from the Finder.>

SketchUp Name Column Width Problem

SketchUp has a weird bug with some of its Inspectors. I've seen it most often with the Tags Inspector and if I recall correctly, with the Components Inspector, although that one hasn't happened in awhile. In any case, what happens is that, for reasons unknown, the Name column gets narrower so you can't read the full name of the tag or the component. I'm running Mac OS 10.14.6 (don't ask; it's tldr) and SketchUp 21.1.331. The only thing I've found that works for me is this:

Pull the offending Inspector out of the Inspector cluster to a place by itself on the screen.

Restart my Mac and.

Open SketchUp to an empty file. This is important. For some reason, opening a file with things drawn in it won't work.

Grab the lower right handle of the Inspector and swirl it around the screen. Once you pull it as far as you can to the upper left then back out again, it should expand the Name column.

Put it back in his place in the Inspector cluster.

#sketchup

Photo Workflow Chicken & Egg Problems

For over a decade, I tried to process and then tag every image in a shoot rated 3 stars or above with keywords. The idea was that once completed, I'd post the entire tagged 3-and-above shoot to Zenfolio, but with hundreds of thousands of images, it has long been obvious that the task will still be mostly incomplete after I'm gone.

Rebuilding the Original Green site has made me go back and process a few thousand images so far, and also rethink my workflow. When I started rebuilding the site, I began two folders of web-optimized images: "presos 3840x2160" and "tweets 1920x1080." In other words, 4K images for presentations and HD 1080 images for social media. And I only use images I've rated 4- or 5-star, so it's my best work.

There was a problem. I only learned recently that Photoshop's Save for Web will allow me to save the keywords and other metadata to the web-optimized files. So now I can save all that to all future images, and could technically go back and do so with the 1,100 images already saved with no metadata, but there's another chicken-and-egg problem:

Because I'll probably be gone before my hundreds of thousands of pics get tagged with keywords, very few of them now have any keywords beyond the basic location set which is continent>nation>state/province>city>place within the city, which I do with every shoot. So if I process a random 4-star pic, that's all I'm likely to get.

Here's what I just started doing this morning: going through a shoot in Photo Mechanic, if I see a 4-star or 5-star I need for something, I first go into the metadata and write a caption, which should include some of the keywords I'll eventually tag photos in the whole shoot with someday. So even though it's not the whole keyword set, it's good stuff to search for.

Once captioned, I do the normal things of opening with Photoshop's RAW converter, saving a jpg in the shoot folder, then saving the press and tweet versions. And if I need the pic for originalgreen.org, I save that version as well, which is either 2560x1440 or 720 square. Now, everything carries the caption with it.

The caption has other uses as well. I usually tweet something about these images since they're my best work, so the caption becomes the tweet, the caption on Instagram, and the beginning of a Facebook post on the image, depending on where I want to put it. I also use it for alt text for images I'm using on my websites.

Whaddaya think?

#photo systems #workflow

Scale Comparison Workflow

This image was my first work to go viral, thanks to a repost by Lloyd Alter. I’ve long intended to do more of these, and finally started back this morning. Here’s my current workflow:

1. I work from Google Earth Pro; be sure View>Scale Legend is checked. Navigate to the site you want to use, then hold down the R key to rotate the view to straight down instead of slightly 3D.

2. Do a screenshot by marquee, making sure to include the scale legend in the lower left.

3. Create a new file in Photoshop from the screenshot on the clipboard. Save as “<place name> 1 original screenshot.jpg” within the folder “<place name>” and close the file.

4. Duplicate the file in the Finder & open.

5. Select All, Copy, and Paste. This creates Layer 1 where all the work is done (more on this later).

6. This step may require a bit of manipulation. With the rectangular marquee, draw a rectangle with the left side of the rectangle precisely on the left end of the scale legend and the right side of the marquee precisely on the right side of the scale legend. Write down the numbers. In this case, 325′ (the number on the scale legend) = 984 pixels.

7. 325 x 3 is 975, which is really close to 984, and it would be really convenient to scale the image so that 1 foot = 3 pixels, so I scaled it down by a proportion of 975/984. Something was slightly off, likely due to the fractional proportion, so I tweaked it slightly until the 325 foot scale legend was precisely 975 pixels wide. I’ve decided to always use a scale where 1 foot = a whole number of pixels to allow for accurate scaling between images to be compared.

8. Save the scaled file as “<place name> 2 1′ = 3 pixels.jpg” or whatever the scale actually is.

9. Duplicate the scaled file for trimming. My intent is to trim to the “essential edge” of the place. By that, I mean a clean edge of some sort like the inside of a surrounding ring road, the inside of a body of water, the outside of a city wall, etc.

10. Begin by using the Polygonal Lasso tool in Photoshop to do most of the trimming, cutting to all clean edges and just outside the edges of overlapping items like trees. Zoom in to 400% to clearly see the edge and trim only that area inside the visible window. Taking it in smaller bites not only means you can see more clearly, but also has the benefit of making mistakes easier to correct because if you go halfway around the place and then mess something up, there is more to fix.

11. Go back around and use the Eraser tool set to 7 pixels, Brush mode to make the trees look more natural, since the Polygonal Lasso tool leaves them with straight edges without thousands of tiny clicks.

12. Delete the Background layer. This leaves the place image surrounded by transparency, so I can copy and drop into another image and there’s no white file-size rectangle obscuring everything below.

13. The image originally included the scale legend in the lower left corner, so it’s likely bigger than it needs to be, so crop the image fairly tight around the remaining place image within the transparent surrounding area, but don’t get it so tight that an edge of something inadvertently gets trimmed to a tell-tale straight line.

14. Save As “<place name> 3 1′ = 3 pixels trimmed.psd”. It must be a psd rather than a jpg file at this point to preserve the transparency.

15. Be sure to keep all three files (original screenshot, scaled, and trimmed) in the same folder. It’s both a trail of breadcrumbs in case Tumblr ever lost this post, and it’s also a way to prove the scale in case someone questions it. Hundreds of people questioned the scale of the images at the top of this post when it first went viral, and while I could describe the workflow, I couldn’t actually prove what I had done because I hadn’t saved the intermediate steps.

#urbanism #scale

Rebuilding My Web

I'm finally biting the bullet and rebuilding all my websites in @rapidweaver. I used Apple's iWeb until they stopped supporting it about a decade ago. After much agonizing, I went with Sandvox, which was similar but better on several counts. But now they're out of business.

Learning any new app takes time, this thread will be "notes to self" for the next site I build because things that take a week to figure out can often be explained in a minute or two, so hopefully others will find this thread useful.

A few things about my web presence: 1. I do as little coding as possible because I don't build sites for a living. My solution must have a WYSIWYG interface. 2. I have several sites, so any solution that charges by the site and month won't work for me.

The newest version of RapidWeaver does a great job with responsive web design on a range of devices, automatically serving up images scaled to those devices without me having to create all those image sizes for each one, like other web-building apps require. A huge timesaver.

I strongly considered Wordpress but the learning curve was just too steep to get the look & feel I wanted in a reasonable amount of time. But the Stacks on which Rapidweaver sites are built remind me a lot of the new Wordpress Gutenberg systems of blocks.

Wordpress is the world's #1 site builder & has a huge following so it should last a long time. But the Wordpress ecosystem is a notorious hacker target since it's so big. My RapidWeaver sites are built on my Mac and hosted by my webhost. And the RapidWeaver community is big.

To get started with @rapidweaver: 1. Buy the app at realmacsoftware.com. Stacks are the essential building blocks, which you can get from @YourHeadSupport. Next you'll need a robust framework of components. The two top candidates are Foundry & Foundation by @weaversspace.

I started with Foundry but then went to Foundation once I discovered they play well with Hoefler web fonts, which I've used for years. weavers.space has a bunch of other great stacks built on Foundation, and a robust user community.

I initially bought Font Pro with the intention of using it with Foundry, but couldn't get my web fonts working so decided to get Foundation to replace Foundry hoping they would play nice together, both being part of the weavers.space ecosystem.

I struggled for a couple more days getting my web fonts to work. Finally, I asked myself whether it might be because I hadn't published the site yet. To that point, I'd just been building the basics on my Mac. So I published. Nothing happened at first. But then I noticed this at the bottom of the Hoefler Font Family Setup box: "In order to preview your fonts, you must add "127.0.0.1" to your domain list in Hoefler (RW7 only)". I'm on RW8.7 but thought I'd give it a try. It worked! Not sure which fixed it, as I did one right after the other and it might have taken a minute for the publishing to trigger something in my Hoefler account, but I don't really care since it’s working now.

weavers.space developer @joeworkman has lots of tutorial videos which are really helpful but it took me awhile to realize he's developing stuff so fast that many of the videos are from previous versions. For example, he talks a lot about swatches but I couldn't find anything that said "swatch" in Site Styles, which is the nerve center of Foundation. That's because since the video was posted, swatches have matured into Font & Text, General, and Component swatches. Once I realized that, things got much easier.

I have Font & Text swatches for my text style, link style, and heading styles from h1 to h6. I have General swatches for background colors and for margins. You can use swatches as a "class," which you can apply to almost any stack on a page by tagging it with the class name.

You can also apply swatches to a long list of stack types. Doing this means you don't need to tag them with the class, but it affects all such objects on the page. As a result, I do mostly class swatches. I have two Component swatches: Top Bar Styles & Menu Styles.

Speaking of Top Bar & Menus, I'm rebuilding all my sites with a black background (more on that later). Some devices are small enough that the menu wraps to more than one line, and the leftover space was a light grey, which looks bad.

I worked for a couple days trying dozens of options before figuring out a hack. At the top of Site Styles, there are Component Colors and Text Colors. The latter is easy, but I don't know what the Component Colors do because they haven't shown up on anything I'm doing yet.

Exasperated, I did a screen shot of the grey leftover wrapped menu area and drug it around the screen, trying to see if it matched anything. One color is called light grey & looked like a perfect match. I changed it to black, and that solved the problem.

Knowing all that stuff now, I can probably set up my next site in a few minutes instead of a couple weeks. Hope this helps someone else. In any case, the rest of this thread will be about my new site design system.

I'm doing black background design for several reasons. In 1984, Macs brought computers out of the DOS black-screen world into the light of black letters on a white background, like real life. But now black-screen design is cool, including on apple.com.

Black-screen design also uses less energy, which might not be much on one computer, but is a big deal on many. And since http://originalgreen.org is about green building and living, it makes good sense. Plus, I use a lot of black in other places as well, so it's consistent.

I started studying the best new sites in late November, and noticed several things: With responsive design being essential today so you don't get dinged by the search engines, designs with many small pics are out, as is clutter, including the page-top banner.

The top of my page has a simple SVG (scalable vector graphic) logo on the left and a menu bar on the right. Below that is a big, beautiful image. I save a 4K (3840 x 2160) version of my best work for presentations & a 1920 x 1080 for tweets and other social media posts. The great thing about RapidWeaver is that I can use the 4K version of my images and RW will automatically serve up the right sizes to each device, including Retina devices. And by using 4K versions, they'll still be good when sites get to 3840 pixels wide (mine are 1280 now).

Below the title image is my page title and text. @joeworkman has moved Foundation to markdown text, which I've never worked with before. I really like it because you can switch between text & header styles with just basic keystrokes all in the same text box using no HTML.

On long blog posts, I'll definitely intersperse images with text throughout the post as I've always done, but those images will all be full-width cinema-proportion 16:9 images so they're big and beautiful.

Something else I noticed about the best new design is that sidebars are mostly out today. The best sites take the clutter that would have been in a sidebar and put it in a box at the bottom of the page, so the user experience is just beautiful images & text.

My footer box includes a Google site search bar, links to where you can buy my book, email links on speaking & ideas to write about, a subscribe box, social share buttons & follow buttons, a Facebook Comments box on most pages & a sitemap of the 1st & 2nd tier tabs.

originalgreen.org has hundreds of pages, and the Facebook Comments box requires the URL of the page it's on. I'm building the new site at dev.originalgreen.org but when the site goes live, I'll have to fix the comments box on every page.

Also, all the inter-site links I'm building right now will have to be re-done once the site goes live. So I have a radical thought: I don't currently sell anything direct from any of my sites, so I'm wondering about just building the new site on originalgreen.org.

Another great thing about RapidWeaver is that I can make URLs pretty much whatever I want, including the identical URL of the old page. So there's no need for redirects, which are a huge task on a big site.

Building a site live at the permanent URL means that if someone comes to a new part of the site, they'll only see the part that's currently built, but if they have a link to an old page, then they can still see it right up until the day the page is rebuilt.

Does anyone know why this strategy wouldn't work? I feel like I'm standing at a point of no return on this. What am I missing? Develop on dev.originalgreen.org or right on originalgreen.org? All thoughts appreciated; if I'm gonna do this, I need to start now.

Trending Blogs

Recently Viewed Blogs

Useful Stuff