A friend of mine switched to iOS after nearly a decade of Android usage. This spawned a lot of back and forth about iOS vs. Android. One criticism I cannot defend is iOS's icon organization and folders. In 2010, Apple created folders with iOS4, (if you need a memory jog, here's what they looked like). The original visual analogy used a visual metaphor of sliding back to expose the contents, as we were in the midst of peak skeuomorphism. At touch-interfaces were relatively new, and Apple had the monumental task of on-boarding droves of barely-digital-literate users, this serviced that App. As a UX developer, I carry a lot of opinions about interfaces, so it shouldn't be surprising that I feel the need to vent time-to-time. Here are several complaints I've harbored for years combined with some slap-dash, non-pixel-perfect UI mockups.

1) Waste of space on a broken Metaphor

More than half the screen is burned on a blurred-out effect, presenting a minimal amount of icons. The modern iPhones are massive compared to the era of much smaller/manageable/dare-I-say-superior-iphone-5 form factors. There's no point to a 3x3 grid. It's annoying and silly. With increased storage capabilities comes more data. Today's iPhones can come clocking in at 512 GBs of storage, capable of storing the amount of data familiar to desktop users. iOS hasn't grown to take on the desktop levels of data or applications.

2) Custom App icons

Visually, the mini-grid isn't a bad choice, but it's dated and loses its poignancy beyond the nine apps. Plus, at a glance, it doesn't visually 'jump out' among a mess of similar icons. It'd be easy for Apple to denote a folder icon by a slightly different change quickly. Here's my 10-minute mockup of what it could be like with a custom icon.

The focus shouldn't be on my graphic design choices as I did this fast and dirty. Instead, the take away is folder icons could vary visually from the current App icons to make them distinctive.

3) Folders in Folders

Next up is another gripe is folders within folders. Apple has done quite a bit to avoid hierarchical navigation in iOS, but it exists in the system preferences and now within the Files app. Merely transposing the visual interface in files gives a sane approach to folders. Combining custom folder icons, users can see where they are in the breadcrumbs.

4) Vertical scrolling in folders?

Vertical scrolling on the home screen has existed before with the jailbreaks, Infiniboard, or Springfinity. Vertical scrolling within folders would help express the folder metaphor of the past-tensed drawer and ease app migration.

5) Make search results meaningful

Search on iOS never shows you where files are. See below.

I can think of a few ways to alleviate this, such as list results showing location to the right for the top for App matches. I didn't bother to mock them up as what's really important is the lack of context.

6) Better App movement

If you've ever had to organize an iPhone, the task is so tedious it can take hours if you have a fair amount of apps. I've seen various suggestions and honestly, at this point. I'd take any.

7) It's time to loot macOS: Smart Folders

iOS needs to grow up. The Files app is a nice start although imperfect compared to iFiles found in the jailbreak world. Apple already has a brilliant solution that it can port to iOS, allow the OS to do auto-organization with Smart Folders. Smart folders for the unfamiliar work by using predetermined search strings. Apple could take it further and set Smart Folders on iOS to organize based on Application types. Upon app purchase or reinstall, the user can select "Smart folder", "dock", or "custom folder" and stay ahead of organization. Brillant right?

Bonus macOS -> iOS features

• Loot macOS's columned view for files.
• Allow for smaller grids and list within folders.
• Tap and hold on icons has a "Get Info" screen so you can see how much data your application is using and its associated folders
• In a perfect world, tabbed interface to make dragging between locations easier.
• A font manager.

On November 17th, 2017, I called utter and complete stupid bullshit as Google Pagespeed was giving glowing scores to pages like Wired.com and Newsweek.com. Both garnered higher scores than my hyper minimalist blog, which has a whopping 2.9k of CSS and about 40k of JS against their megabytes of JS and images. It was so irrelevant that it caused me grief professionally as clients would be unhappy with their scores despite being fairly optmized.

Pagespeed isn't perfect, but it is now what I'd consider fixed, and I've meant to write this article for some time. My blog's page speed has gone up to 76 from 70 on my homepage. Individual articles, such as Google Page Speed lacks common sense, now scores 90. Sanity has been restored. I'm not just saying that because my numbers are better. Let's start with my complaints.

• Pagespeed did not care about JS bloat, long as it wasn't directly linked. If a library decided to append several megabytes of Javascript, Pagespeed wouldn't even blink.
• It would advise on how to optimize iframes even though the user has no control over such things
• It did not care if you used post-JPG/PNG formats
• It made no effort to measure total requests.
• It made no effort to measure time-to-paint
• It failed to recognize minified HTML due to a single line-break
• It did not compare against any other real-world dataset making it relativistic only to your website's previous scores

Surprisingly, all my major gripes were resolved to the point where I feel like a Google engineer took umbrage with my post (let me be clear; this almost certainly didn't happen). Lighthouse is oodles better (I've been using it since mid/late 2018), trying to leverage Chrome User Experience Report for higher tier pages. What's interesting is the change philosophically from the technology bucketed approach of CSS, JS, HTML, and Server-side technologies existing in their own orbits to one that clearly has standardized goals. This makes cross-site comparisons more sane. The benchmark metrics are as follows: First Contentful Paint, First Meaningful Paint, Speed Index, First CPU Idle, Time to Interactive, and Estimated Input Latency. This lends itself to a greater understanding of the stages of a web page's life-cycle. This is the most significant change, and I approve of it. The feedback is more meaningful, as well. Below is an unorganized list of my observations.

• If you are using Wordpress, it'll suggest plugins to assist certain tasks. Another meaningful change that I didn't think of to rant about was DOM Tree depths. Google now recommends less than 32 levels of depth.
• It makes some executive calls like using font-display: auto; which re-enables one of the banes of web dev, Flash of Unstyled text that was expressed in shorthand, as "FOUT, FOIT, FOFT". Google prefers the FOUT.
• Google has stepped away from suggesting minified HTML, likely because compressing HTML is far more important, as demonstrated here. You can still minify HTML to squeeze extra bytes away.
• Lighthouse measures JS execution times, not just size.
• It no longer suggests the wantonly silly declaritive image sizes. Prior, Pagespeed wanted you to write out the pixel value to speed up render times. This was good advice in 2000, but tragically out-of-step for the responsive web.
• Audits can pass even if they are not met 100%, such as minify CSS or JS if the vast majority has been met.

All in all, it's good to see Lighthouse.

Apple Arcade is everything it should be, solving the biggest problem the Apple store has had: a vector for premium/high-quality games to be delivered without leaning on In-App Purchases. Not all IAPs are bad. There are a few titles that have done them correctly. Time Locker has only a $3 purchase that's remotely required, and it does not have any consumables. The only other IAPs are optional characters. Polytopia that unlocks "races" for $1 purchases, for a grand total of 9. The most you can spend on either game is roughly $10-15, which seems right for a high-quality mobile game.

Most though, as almost everyone knows are the detested loot boxes or in-game currency, and thus we've seen a race to the bottom. For years I lamented there wasn't a classification for full-fledged games without IAPs. I wanted a premium game store where developers could charge $10-$25 and get their fair shake but never did I consider a subscription gaming service. I don't play many mobile games, but when I do, I don't want to spend hours looking for titles that are pay-once models. When at the gym, I tend to walk for 15 minutes of warm-up, and at that time, I play silly iPhone games. Tower defense games are a personal favorite, and I play them before committing to running a 5k and off to do other activities.

Apple Arcade is damn good value as it stands, today. I don't think I've seen any console or gaming platform launch with so much content. It's good enough that I worry though about the rest of the App Store, as there's enough content for me to work through for quite some time. Also, as an added bonus, the Apple Arcade isn't limited to iOS or iPadOS, it's coming to tvOS and most importantly, Mac OS. In one swoop, Apple has a platform that spans every compartment of gaming: mobile, tablet, console/TV, and desktop (PC). All its competitors are missing one of these buckets (Steam, Microsoft, Google, Sony) and none have games that titles that can be easily ported to between all formats. Depending on Apple's commitment to funding titles, this indeed could be a very big deal. I may eat my words later, but Apple Arcade is probably the most significant product Apple has conceived since the Apple Watch. At $5 a month, it's the cost of one Playstation or Xbox game a year, or the same price as PSN a year.

There's still asterisks to be resolved: what does the future look like? How many games can we expect? Will we ever see ports or non-exclusive content on Apple Arcade? Apple Arcade isn't going to be the end-all-be-all for gaming but out-of-the-gates, it's competition for Sony's very successful and very well executed PSN.

So far, I haven't mentioned one giant of gaming, arguably the most loved of them all. Apple Arcade probably won't be causing much damage to the Sony Playstation, Microsoft Xbox, or Steam platform but it's scope of more casual/family-friendly titles and whimsical nature certainly reminiscent of said company, and I wouldn't be surprised if it caused parents too Switch by giving kids hand-me-down devices or simply get them an iPod Touch. Apple this year already is the fourth largest gaming company and previously, it hasn't even tried.

I doubt we'll see any AAA-Titles ported to the Apple Arcade be it popular sports Franchises like Madden, NBA Live, NBA2k, FIFA or any games perhaps based off professional sports leagues due to licensing. I also wouldn't expect ports of classics like Sonic The Hedgehog to be folded in. (I wouldn't rule it out either, as Sonic and Frogger both made appearences.)

Lastly, the service isn't perfect. There's not really a Steam/PSN/Xbox Live system to it for friends lists for gaming. There's also an extreme lack of titles with much depth, many of the games I've tried are nugget sized experiences. I personally love Cricket Through the Ages, and really liked Assemble With Care, both criminally short but some of the others less so. There's only so many single-button games I want to play. Some of the more hyped titles like Saynara are beautifully shallow or feel like a demo like Red Scare or cheap knockoffs like Punch Planet. As a fan of Oceanhorn, I look forward to diving into Oceanhorn 2. I'll chalk it up to launch titles, rarely are they the pinnacle of a console sans a few rare outliers, mostly from Nintendo (Tetris, Super Mario World, Pilot Wings, Super Mario 64). That said, with my relaxed interest in gaming perhaps more nugget experiences are exactly what I'm after if delivered right.

I'll be interested to see if I agree with myself two years from now.

Right now, there are multiple 12 GB of RAM phones on the market. They run the gamut of prices and spec, but none are more expensive than a MacBook Pro 13 inch with a factory config, save perhaps the Galaxy Fold, a curiosity.

• Samsung Galaxy Fold $???
• Samsung Galaxy S10 Plus $1,600
• OnePlus 7 Pro $1299
• Asus ROG Phone 2 €899
• Samsung Galaxy Note 10 Plus $929
• Xiaomi Black Shark 2 or Black Shark 2 Pro $879
• Lenovo Z6 Pro $849
• Xiaomi Mi 9 Explorer Edition $800
• Nubia Red Magic 3 $700
• Vivo iQOO $650

I didn't look up the MSRPs but rather what seemed to be legitimate prices online to give an honest representation. That's likely an impartial list, but there are at minimum 10 Android models shipping with more RAM than a $1299 MacBook Pro, and even the $1999 model of the 13 MacBook Pro ships with 8 GB of RAM. In all 13 inch models, it must be custom ordered. There's been a bit of stagnation for laptops and RAM, partially due to chipsets, partially due to modern OSes using much more efficient RAM management via compression aided by SSD scratch disks and lastly due to the increased power draw. The last feels increasingly irrelevant as phones have caught up to laptops and the foolish TouchBar. It was only in July of 2018 that Apple addressed the lack of 32 GB RAM options for the MacBook Pro lineup.

Just as a barometer of applications: Adobe Photoshop, Lightroom recommends 8 GB of RAM or more, Illustrator recommends 16 GB with 4 GB being the minimum, After Effects recommends 16 GB with 8 GB being the minimum. Notably, the assumption is you would not be running multiple professional applications at once, which in reality with say, After Effects, which can routinely involve any number of 2D editing applications, and even 3D apps to juggle resources. Then there's development, where Docker or VMs/Simulators, and horrid JS memory vacuums exist. I'm not even going to touch professional audio. GPUs crossed the 8 GB barrier some time ago, meaning you could connect a 16 GB AMD Radeon VII to a $1999 MacBook Pro with 8 GB of RAM. Even for general web surfing, it's easy to saturate 8 GB of RAM with a browser with poor memory management (chrome).

None of Apple's Pro laptops should ship with less than 16 GB and the MacBook Air should have a factory model that ships with 16 GB of RAM. This would be moot if we had user-serviceable RAM upgrades. Laptops needn't be held to the modular standards of desktops, but they should be for basic specs.

Also worth noting all iPhones 11s have 4 GB of RAM*. 4 GB of RAM is good for right now but seems a bit counterproductive until you consider the revelation that the iPhone 11 may have 2 GB of ram dedicated to the camera. iOS's memory management works mostly due to Apple's stringent background task management. My guess is the next iteration of the iPhone will probably move to 6 GB of Application RAM and 2 GB for the camera.

Over the break, I went on a binge of minor changes to this blog.

• The privacy policy and contact now exist on their own pages. Google supposably prefers this. Before both items existed on the about page.
• This blog now supports a JSON Feed, looked at Apple News but screwed up the process for importing my RSS feed. May revisit that later but with the low traffic most of this blog sees, not really worth the effort.
• Improved the JS. To reduce requests, I've concatted four JS files into one. I upgraded jQuery 1.12 to 3.x as it is faster and smaller, and its no longer hosted on a CDN.
• Fixed the canonical URL declaration in the head.
• Removed a few errant CSS classes, now this serves an absurdly low 2.9k of CSS down from roughly 3k.

Sometimes I think the lack of visual flourish is mistaken for a lack of design but I like minimalism.

NetNewsWire 5.0 was just released as open source. Ever since Google Reader shut down, I've been using Feedly as an aggregator and Reeder for iOS. Reeder makes it very easy to import Feedly feeds but it isn't as straight forward for NetNewsWire. Fortunately, Feedly and NetNewsWire both support OPML (Outline Processor Markup Language) to import/export feeds. Feedly buries this so here's a quick step-by-step to get up and running with NetNewsWire and Feedly.

Steps

1. Sign in to Feedly and click the gear.

   

2. From the settings, next to the import OPML click and the export button.

   

3. From NetNewsWire, select File -> Import Subscriptions and import your OPML file

   

That's it! Enjoy. I highly recommend Reeder for iOS.

I'm pretty sure since the inception of this blog, the URLs in the RSS feed have been broken. I just noticed writing about NetNewsWire. Now they are fixed. You can add the RSS Feed here to your favorite RSS reader.

Expect a slow trickle of tiny improvements to this blog, like the printable blog posts.

This isn't a blog about politics or even my opinions, but I'm going to go on the record and say nuking hurricanes is a bad idea. This seems like a silly thing to say, but here we are, having a national discussion about it, and why it is a bad idea. It's worth noting our sitting president suggested multiple times according to Axios, that suggested nuking hurricanes to stop them from hitting the U.S..

A lot of people are clowning this idea (because it's patently stupid), but it's not entirely wrong, rather a problem of scale. We simply do not have enough nuclear weapons on the planet to end all hurricanes. If truly want to nuke our way out of hurricanes, we'll have to invest a lot more into Nuclear weapons. No more earth = no more hurricanes. Checkmate, hurricanes.

Jokes aside, Axios may not be the household name, nor even my go-to source for journalism and Trump denies it, but it is believable. Let us consider that this is fresh on the heels of Trump asserts, "I could win that war in a week. I just don’t want to kill 10 million people". Then there are the long-standing reports that Trump asked multiple times why can't use nukes? multiple times and would use nuclear weapons in response to a terrorist attack by ISIS. Even if the latest is "fake news," the other accusations are damning enough.

"The biggest problem we have is nuclear ... having some maniac, having some madman go out and get a nuclear weapon." - Donald Trump, 2016

I couldn't agree more. This is clearly a person who is unfit to be given responsibility for the most destructive weapon humankind has created. As the great political journal of our age, TeenVogue*, wrote, "Yes, Trump could instigate a nuclear war without anyone stopping him."

We are all at the mercy of a tweet.

*Not a satirical comment.

We've all been there, you have changes that haven't been QAed, but there's a hotfix that needs to go out yesterday. Pantheon is a great host, but it has one major gotcha: you can't switch code branches. The way Pantheon works is the Pantheon Remote git library gets one, and only one branch. There's no way to switch branches. Code can only be promoted from staging->test->live. This is problematic, especially if you're coming from various deployment management utilities that let you switch branches or platform-as-a-service like Heroku.

Image Credit: Pantheon, Use the Pantheon Workflow

Pantheon does offer multi-dev which essentially creates a separate branch for testing (and which can be promoted to the main chain) but still doesn't fix the hotfix issue.

Pantheon Hotfix Flow

1. Create a local branch and reset to the last commit that was made live (this is a pain as Pantheon doesn't show last commit git hashes)
2. Make changes locally. Commit the changes to your new branch.
3. git push -f Pantheon YOURBRANCHHERE:master
4. Promote from Dev -> Test -> Live from the control panel
5. Make sure your hotfix is merged into your master local (and your origin)
6. Reset Pantheon’s Dev to the master branch git push -f Pantheon master:master

Despite being warned that you should never use git force, this is the cleanest method. You can push up your desired hotfix and leave it on the live environment until your normal deploy chain overwrites it.

Using the magic of @media print, I've included a mild update to this blog to be more printer / PDF friendly, mostly for a singular post, The Definitive Mac Pro Upgrade Guide that drives the majority of my traffic.

• Images are now capped to 75% of the page width as my images are only double density, optimized for screens, not printers.
• The main content now expands to the full page width, so users can set the margins within their print prefs.
• The main body copy, and line height has been reduced from 16px to 15px, and 2 em to 1.75 em.
• I've included a link back to the original blog post at the top of each page, visible when printed so PDF users can easily return to the blog post in a web browser.

Happy printing, you weird PDF-loving bastards!

My 2017 MacBook Pro stopped charging and refused to accept power from any power supply on any port. I was restoring my My computer to my previous laptop, a 2015 MacBook Pro and encountered the above. I tried using the day-before's back up, but this didn't work.

I received the following message when booting from a Time Machine drive:

An Error Occurred Restoring from Backup

To Try Restoring from a different backup, click choose other Backup.

To reinstall macOS, click install macOS. During the install you can chooes to restore your information from a Time Machine Backup.

To Boot from an existing macOS installation...

I've seen some high tier fixes, like harryfear.co.uk's fix but there's an easier route and the clue is in the error message.

More carefully reading the message, I booted off the Recovery partition and then reinstalled macOS. Then once completed, on the Migration Assistant I selected the option to transfer information over from my Time Machine drive. This isn't a true 1:1, I noticed some things missing such as /etc Apache2 modifications but some of the geek stuff like, HomeBrew and its many CLI applications (Heroku) made the cut. Beyond renewing SSH keys and running Docker builds, my computer was good to go. Standard Mac applications had no issues.

Summary

If a restore fails, fear not. Restores are faster but you will not lose your important files.

1. Boot off a recovery partition, reinstall macOS
2. At the end of the installation, you will see the Migration Assistant. Select transfer files from another computer/device/Time Machine then select your time machine drive

I suspect for most users, self-included, the harryfear fix is overshooting the problem and Apple's solution is "good enough".

Sometimes you encounter something that'll surprise you, and yesterday was one of those days: Chrome does not support inline media queries on the source tag within videotag. (you can test it here) Worse, plain media queries will not stop multiple videos from loading, which effectively doubles your data, so it requires a JS solution. CSSTricks has an article from 2012 using jQuery, but there's no follow up and I wasn't that enthralled. I saw, thenewcode: Make HTML5 Video Adaptive With Inline Media Queries but it fails to mention Chrome's refusal to support it.

Javascript to the rescue

First, I wanted to prevent any request to be made, so I created an empty video tag with my two videos as attributes. Easy right? Now that all major browsers support MPEG4, I could safely assume the only legacy users are IE and Safari as the browsers are tied to OS updates, whereas Chrome and FireFox are not thus very few users would not be using a recent browser. Safari and IE both support MPEG4. There's not a good reason for me to want to support WebM.

<video
  preload="auto" autoplay="" loop="" muted="" playsinline=""
  data-desktop-vid="https://iconaircraft.s3.amazonaws.com/ICON_Web+4.0_Loop_16x9_DRAFT190723_26sec+3700.mp4"
  data-mobile-vid="https://iconaircraft.s3.amazonaws.com/ICON_Web+4.0_Loop_1x1_DRAFT190723_26sec-mobile.mp4"
  >
</video>
  

I didn't want to rely on any framework, jQuery document ready meant the JS wouldn't fire until the rest of the page loaded, and es6 meant leaving out old browsers. Thus, I'm limited to ES5.

First, I needed to get all the videos on the page. This creates a variable that contains an array of objects, even if only one is found on the entire page.

//get all vids
var video =  document.querySelectorAll('video')

Next, I needed to create a source for the video tag. The source tag needs an src and type. After that we need to append the newly created DOM element back to an element. This function doesn't need to know how many videos are on the page or what the screen size. It just will return a source to a video tag.

//add source to video tag
function addSourceToVideo(element, src) {
    var source = document.createElement('source');
    source.src = src;
    source.type = 'video/mp4';
    element.appendChild(source);
}

Next is where the logic happens. If a screen size over a predetermined value, I will load the desktop or mobile version. Since I have two data-attributes to work off of depending on the screen size depends on which one I want to use. If the screen is above a certain size, it will grab the desktop version instead of the mobile version, to feed to addSourceToVideo. Easy enough, right?

//determine screen size and select mobile or desktop vid
function whichSizeVideo(element, src) {
	var windowWidth = window.innerWidth ? window.innerWidth : $(window).width();
	if (windowWidth > 800 ) {
		addSourceToVideo( element, src.dataset.desktopVid);
	} else {
		addSourceToVideo(element, src.dataset.mobileVid);
	}
}

Now that we've written code to determine write sources to empty video tags, it needs to init and be able to handle multiple videos. Remember our array of objects? It's time to use it. There's no point of running the code if there aren't any videos on the page, so we need to check to see if the var videos contains any data. If it does, then we need to loop over our array and return an individual video in case we have multiple videos on our page.

//init only if page has videos
function videoSize() {
  if (video !== undefined) {
  	video.forEach(function(element, index) {
  			whichSizeVideo(
  				element, //element
  				element  //src locations
  			);
  	});
  }
}
videoSize();

Notably, you could tie the above code to a resize event incase a user resizes the window and have it trigger videoSize. I chose not not to for simplicity. You can see the working version of the above code, on CodePen. I didn't embed it in this post, so those using a slower connection aren't being hit with 30 MB of video data. Place this script inlne or as seperate file below your videos, but before the rest of your JS payload for maximum performance.

I'm always drawn with complete morbid fascinating with "influencer" culture as I largely have avoided social media. I have exactly one social media account of the major, Facebook (arguably the worst of them all) but deleted the app off my phone about 4 years ago. I'm including YouTube in this, as it should be considered a social network and reddit, which I avoid. I'm convinced that vast majority of social media is an anecdoche.

So when I read about influencers asking for free meals at restaurants, I experience a clash of contradictory thoughts simultaneously: "Who has the gall to cold-call a restaurants for a free meal because they have 50,000 Instagram followers?", "I'm surprised this happens", "I am not surprised in the least bit", "this is scam verges on genius", "major brands will give famous people free shit, why not small businesses give those with tiny soap box for cheap advertising?", and "everything about this is idiotic" followed by general self-satisfied feeling of being above it all, despite my immediate desire to share/discuss it with my friends.

Over marketization of all facets of life has made even the most mudane activity a transactional exchange that can be sold thanks to social media. Its all viewed through the nihilistic world view that anyone has a "personal brand". Any experience, even a wedding proposal is a marketing opportunity, and people flock to toxic lakes. The irony is influencers are internet points that may or may not mean a damn thing, an influencer with 2 million followers couldn't sell 36 t-shirts.

If there's one thing that is certainly true, it's further evidence of the enshittening.

There's plenty of tutorials on creating your own custom Gutenberg blocks, but I found that the between beginner and advanced was lacking. I'm going to skip the basics but rather a short list of things to understand to more effectively work with Gutenberg. So from a trial-by-fire experience of working on two Wordpress 5.0 Gutenberg websites, here's what I've learned. The guiding principal is to re-use functionality when possible and try to replicate the Wordpress UI.

Rule 0: Understand React's role

Wordpress chose to use React to create it's UX for its new Gutenberg block editor. However, instead of using React directly, Wordpress uses Element, an abstraction layer over React. If you're wondering why someone would want to do this, Wordpress has a very concise list:

• In many applications, especially those extended by a rich plugin ecosystem as is the case with WordPress, it’s wise to create interfaces to underlying third-party code. The thinking is that if ever a need arises to change or even replace the underlying implementation, it can be done without catastrophic rippling effects to dependent code, so long as the interface stays the same.
• It provides a mechanism to shield implementers by omitting features with uncertain futures (createClass, PropTypes).
• It helps avoid incompatibilities between versions by ensuring that every plugin operates on a single centralized version of the code.

This means you'll be writing code and making imports to wp.element, wp.components and wp.blocks. React only exists in the admin side of things, and all the content found within a block is saved statically meaning you won't be able to create React experiences simply by creating Gutenberg blocks. The

Rule 1: Bundle your custom blocks in one plugin

It's pretty easy to bundle all your custom blocks into one plugin. Unless you're looking to distribute your custom blocks across many sites, it's saner for development and deployment to make one master plugin for all your blocks. On the dev side, this means a single webpack instance to spin up as opposed to one for each block. A good example of this in action is Zac Gordon's WPForJSCourse example. While his course isn't free, this plugin is. This includes everything you need: A sane structure, a webpack config and a setup. All the custom blocks are registered in one nifty index js file.

It's pretty easy to do, but it was a design pattern that I didn't realize would benefit me when I started in on Gutenberg.

Rule 2: Learn Innerblocks and reuse core blocks

Most tutorials seem to stop short of innerblocks, and Innerblocks are probably one of the most important features of Gutenberg. Innerblocks allow you to load blocks inside of blocks. Below is a super basic example for a slideshow, allowing the user to enter as many images using the core/image Gutenberg block but restricting the user from entering any more.

    edit: props => {
        const { attributes: {selectControl},
            className, setAttributes, isSelected, } = props;
            const ALLOWED_BLOCKS = [ 'core/image' ];
        return [
            div className="slideshow-super-simple">
            <strong>Note: </strong> all slides are visible in editor<br />
          <InnerBlocks
            allowedBlocks={ ALLOWED_BLOCKS }
          />
          </div>
        ];
    },
    save: props => {
        const { attributes: { selectControl } } = props;
        return (
            <div className="icon-simple-slideshow" >
              <div className={ selectControl} ><InnerBlocks.Content /></div></div>
        );
    },
    

Innerblocks aren't simply limited to allowing and restricting other blocks, they can also accept templates, which is a set of pre-defined blocks. This allows assembling a very complicated UI or layout widget out of any number of prebuilt or custom blocks. There's no reason to reinvent the wheel as Wordpress gives you quite a few different blocks. Below I've included a list of all the common blocks by category.

Common blocks category

• core/paragraph
• core/image
• core/heading
• (Deprecated) core/subhead — Subheading
• core/gallery
• core/list
• core/quote
• core/audio
• core/cover (previously core/cover-image)
• core/file
• core/video

Formatting category

• core/table
• core/verse
• core/code
• core/freeform — Classic
• core/html — Custom HTML
• core/preformatted
• core/pullquote

Layout Elements category

• core/button
• core/text-columns — Columns
• core/media-text — Media and Text
• core/more
• core/nextpage — Page break
• core/separator
• core/spacer

Widgets category

• core/shortcode
• core/archives
• core/categories
• core/latest-comments
• core/latest-posts
• core/calendar
• core/rss
• core/search
• core/tag-cloud

Embeds category

• core/embed
• core-embed/twitter
• core-embed/youtube
• core-embed/facebook
• core-embed/instagram
• core-embed/wordpress
• core-embed/soundcloud
• core-embed/spotify
• core-embed/flickr
• core-embed/vimeo
• core-embed/animoto
• core-embed/cloudup
• core-embed/collegehumor
• core-embed/dailymotion
• core-embed/funnyordie
• core-embed/hulu
• core-embed/imgur
• core-embed/issuu
• core-embed/kickstarter
• core-embed/meetup-com
• core-embed/mixcloud
• core-embed/photobucket
• core-embed/polldaddy
• core-embed/reddit
• core-embed/reverbnation
• core-embed/screencast
• core-embed/scribd
• core-embed/slideshare
• core-embed/smugmug
• core-embed/speaker
• core-embed/ted
• core-embed/tumblr
• core-embed/videopress
• core-embed/wordpress-tv

Pictured: Mock up of a hypothetical user page

Let's break down the above design: It's two columns consisting of:

Paragraph (custom)

With Gutenberg, simple layouts like the above can potentially be done using the code block, but it isn't desirable as it requires a bit of mastery of Wordpress, with a high margin of error if it taps into using custom CSS. We have a two column design, consisting of an Image in the first column, and two fields in the second, followed by text beneath the columns. So let's look a template code.

     edit: props => {
            const { attributes: { paragraph },
                className, setAttributes, isSelected } = props;
                const TEMPLATE = [
                  [ 'core/columns', {columns: 2,className: "profile-outer-column"}, [
                      [ 'core/column', { className: "profile-inner-column" }, [
                        ['core/image', { className: "profileImage"}],
                      ], ],
                      [ 'core/column', {className: "profile-inner-column"}, [
                        ['mycustomblocks/profile-title', { className: "profileTitle"}],
                        ['mycustomblocks/profile-name', {  className: "profileName"}]
                      ],],
                  ],],
                  ['mycustomblocks/profile-bio', { className: "profileBio"}]

                ];
            return [
                <div className={ className + " my-profile-editor"}>
                  <InnerBlocks template={TEMPLATE} />
                </div>
            ];
        },
        save: props => {
              const { paragraph,className } = props.attributes;
            return (
                <div className={className + " my-profile"}><InnerBlocks.Content  /></div>
            );
        },
   

Using the templates, I'm able to place inside columns a mixture of custom and factory Gutenberg blocks! Innerblocks aren't infallible, you can template lock blocks so users cannot add more blocks but occasionally this creates issues. Also, the custom styling for blocks does not work on any block that features an innerblock (yet). Perhaps this will change but as of writing this, it hasn't.

Rule 3: Restricting dependent blocks

Often you'll create a block that shouldn't appear in your list of plugins from the Wordpress gutenberg GUI. Any custom block can be easily restricted to being only accessible from a certain block type. In my previous example I had two custom blocks, mycustomblocks/profile-title and mycustomblocks/profile-name. These two blocks are very simple blocks, but I do not want them polluting my list of Gutenberg blocks. This only requires declaring the parent

export default registerBlockType(
    'mycustomblocks/profile-title',
    {
        title: __( 'Profile Title', 'mycustomblocks' ),
        description: __( 'This field is for the user profile's job title.', 'mycustomblocks'),
        category: 'common',
        keywords: [
            __( 'text', 'mycustomblocks' ),
            __( 'MediaUpload', 'mycustomblocks' ),
            __( 'Message', 'mycustomblocks' ),
        ],
        parent: ['mycustomblocks/slideshow-slide'],

See the parent flag? It really is that easy.

Rule 4: Learn to use the custom toolbar and form fields

To truly make a plugin feel native, you'll need to tap into the UX that Gutenberg uses, the toolbar and the sidebar containing form fields, using InspectorControls and BlockControls. Again, Zac Gorden's JSForWordpress tutorial repo has a great example of each.

InspectorControls appear in the sidebar of a block, zgordon also has a nice tutorial on it as well as Eudes' medium post. Also, be sure to see the official documentation on InspectorControls.

          <InspectorControls>
              <PanelBody
                  title={ __( 'High Contrast', 'jsforwpblocks' ) }
              >
                  <PanelRow>
                      <label
                          htmlFor="high-contrast-form-toggle"
                      >
                          { __( 'High Contrast', 'jsforwpblocks' ) }
                      </label>
                      <FormToggle
                          id="high-contrast-form-toggle"
                          label={ __( 'High Contrast', 'jsforwpblocks' ) }
                          checked={ highContrast }
                          onChange={ toggleHighContrast }
                      />
                  </PanelRow>
              </PanelBody>
          </InspectorControls>

BlockControls appear in the editable area of a block as inline controls. Also, be sure to see the official documentation on Toolbars and Inspector

<BlockControls>
    <AlignmentToolbar
        value={ textAlignment }
        onChange={ ( textAlignment ) => props.setAttributes( { textAlignment } ) }
    />
    <Toolbar>
        <Tooltip text={ __( 'High Contrast', 'jsforwpblocks' )  }>
            <Button
                className={ classnames(
                    'components-icon-button',
                    'components-toolbar__control',
                    { 'is-active': highContrast },
                ) }
                onClick={ toggleHighContrast }
            >
                {icons.contrast}
            </Button>
        </Tooltip>
    </Toolbar>
</BlockControls>

It will feel a little strange but the edit return is returned as an array, for the main editable area mark up.

As a minor (I stress minor) pundit on all things Mac Pro after my definitive Mac Pro Upgrade guide I figure I should weigh in to the ever expanding sea of opinions. For the first time in a very long time the WWDC really hit the right notes: the iPad is growing up, the Photos app is beautiful and even more compelling, iTunes is no more and finally broken apart, the Watch has a de-tethered experience, Mac OS now will sport screen mirroring natively on an iPad, but Apple seemed to sense that the most important announcement was the return to the professional with the almighty Mac Pro.

Pictured: Apple feeling itself with the new Mac Pro. Don't be fooled by the monitor, it's 39.7 lbs/18.0 kg

Apple delivered but for $$$$

The presentation was oh-so-Apple like, and then it wasn't. Apple talked big numbers, lots of numbers, the kind of numbers that make average-people glaze over in boredom: 8k, 6k, 3.0 16x PCIe, billions of pixels, 2000 audio tracks, GPUs, multiple GPUs. It's enough to make someone throw up their hands and rhetorically ask: Who cares? But we care. We always have. There was a surreal moment when Apple showed how the case opened. They invited you inside, and look, there are slots! So many slots. What-in-the-name-of-Ives was going on?

The new Mac Pro is a monster, there's no other way to say it:

• Up to 28 Cores
• Up to 1.5TB of RAM
• Eight PCIe slots
  • Two "MPX" slots with Thunderbolt 3 passthrough (optional 16x ports if the slots aren't obfuscated with large cards)
  • 3 full length slots (1 16x, two 8x)
  • 1 half length slot (8x) with I/O connectivity from factory
• Two SSD slots (unclear if natively NVMe)
• Two 10Gb Enet
• Two USB-C / Thunderbolt 3 / two USB-A ports front facing
• Two Thunderbolt 3 ports on I/O card
• Headphone jack, internal speaker
• 802.11ac/Bluetooth 5
• Custom additional co-processor for video that allows for three 8k streams to be played back at once.

It's an absolute monster beast of a computer. Dare I say, this may very well be the best-designed desktop Apple has done. Visually, it may be a little too avant-garde. It's alien-looking but with a very clear nod and a wink to the cheese grater. It's built to last, just like how my 3.1 Mac Pro still works a decade layer. The hitch is the entry price of $5999.... ouch, oh and that pretty monitor? $4999 with a very understandable groan from the audience when the stand price tag of $999. The monitor is too much but I guess time to start saving for the Mac Pro. It's been a very long time since I've had this level of interest in a computer.

I've been following social media conversations and have some additional thoughts that I felt necessary to expand on.

More thoughts on price

The Mac Pro 2019 was what the people wanted, Xeons are more expensive than ever, with the CPU itself making up for roughly 1/3rd of the price even in the entry model. The Mac Pro 2019 also is the most upgradable Mac we've seen on several accounts. The PowerMac 9600, a monster in its own right had six PCI slots, twelve RAM slots, SCSI, ethernet and a serial port (3x 5.25 inch drives), debuting in 1997 at $3,700 (Roughly $5800 adjusted for 2019). The 2019 Mac Pro may lack the drive bays (only two SSD slots), it also has eight PCIe slots with an additional four Thunderbolt 3 ports. Let that sink in, Thunderbolt 3 adds the rough equivilent of four more 4x PCIe slots. It's better to think of the Mac Pro 2019 as having twelve PCIe slots. It has effectively double the physical PCIe slots of the Mac Pro 2006-2012, triple if you consider Thunderbolt 3, and far more CPU configuration options despite one CPU (which can scale to 28 cores, 56 virtual cores). You are effectively getting double the computer than the previous generation Mac Pro. It's expensive. Really expensive but go look at other Xeon workstations. It's price competitive. You wanted upgradable? Here it is.

Lastly, part of the price hike problem is the stagflation for most workers. This isn't to say that the problem isn't with Apple's price-point as even in 1997 a $3700 computer was a bitter pill to swallow, rather that it is exacerbated by the lack of meaningful raises that'd make investments like this more attainable. Also Mac users haven't kept up with the current Xeon prices, they are damn expensive. There's not really an affordable gap between an Intel i9 and the Xeons sadly. What a bulk of users wanted (self-included) was a $3000 Mac Pro. The i9 line certainly provides the CPU horse-power but is handicapped in the I/O department, only 40 lanes of PCIe and maximum memory and 128 GB. However, at 68 lanes maximum is certainly beefy enough but still locked at 128 GB of RAM, less than the 2010 Mac Pro.

As for the monitor? Nope, I can't justify it. Charging $1000 for the stand is not a good look. While a 6k true-10 bit display is impressive, I'm sure within 2 years we'll see equal displays for less money. Also for wallet injury, Apple had the gall suggest connecting 6 of these monitors to the Mac Pro, $36,000 worth of displays. Riiiight.

Thoughts on GPUs

If you hoped for NVidia support, well.... you placed your hopes on the wrong company. Apple and NVidia have not reconciled. There was absolutely no reason to expect them to resolve their issues. Expect to remain disappointed for the foreseeable future. I want NVidia as much as anyone, but it's not happening. Should Apple allow NVidia GPUs? Of course. Will they? Probably not. I've been wrong about a good many things though.

Thoughts on chipset

I'm not crazy about the Xeon price tags, and I've seen several people arguing that Apple should have gone AMD with like the thread ripper series. So far the Threadrippers are limited to: max 128 GB/s of RAM, 64 PCIe lanes and no Thunderbolt 3. While personally, these specs would be fine for me on a desktop (in fact I'd personally like a more modest config for affordability), they aren't for the target market: too few PCIe lanes, not enough ram and no Thunderbolt 3 is a deal breaker.

Also, the commitment to Xeons lends credence for a personal theory of mine, that the mac lineup might end up a split CPU architecture. Windows already is. The MacBook and MacBook Air line could end up on ARM where the I/O abilities of ARM are much less and the limitations of size mean that an Apple GPU would be more viable than Intel's built-in offerings. Is this true? Who-the-hell-knows outside of infinite loop but Apple speculation is a past time and I figure I should put this in writing just to see how accurate I really am.

Thoughts on I/O chipset

Now here's one that took me for a loop and I'm surprised that no-one I've seen has talked about this: The I/O card has two of the Thunderbolt 3 ports. This means (possibly) that more ThunderBolt 3 ports could be added to the computer or better, possibly whatever I/O (thunderbolt 4?) could be added down the road. This certainly improves the shelf life.

Thoughts on Power Draw

It's an easy target for people to skewer Apple on, but GPUs need juice. Their power requirements aren't going down anytime soon with 8k and VR. Perhaps focus on performance-per-watt will become needed in soon in the desktop arena as watts-in = heat out, creating issues for everyday users but we haven't seen the worst of it yet. The real question is the idling power, which is bound to be much lower than the ma

Thoughts PCIe 3.0 / DDR4

A few people are angry about the lack of PCIe 4.0 and DDR4. This one is easy. PCIe 4.0 isn't a shipping spec and Intel may skip it altogether, DDR5 is still more than a year out. The Mac Pro delayed even further. The real test is will Apple update to PCIe 4.0 and DDR5 when it comes time? If you hoped for Thunderbolt 4, it isn't even a thing yet.

Thoughts on looks

I find it strange, not hideous, but beauty is in the eye of the beholder. I won't lie; it made me smile though that they brought back the cheesegrater motif. Long as its quiet and doesn't glow with neon LEDs, I'm happy. Maybe I'm an odd man out, but my Mac Pro is on the floor next to my favorite piece of furniture, a drab grey McDowell & Craig 1940s all-American all steel desk that weighs roughly 200 pounds that inherited from my grandfather. It'll look just fine next to it but each to their own.

Something happened that seemed unshakable even a year ago. To say I have a lot of opinions about web browsers is putting it mildly as someone who's spent the last decade his life coding for them. Like most web devs, I went Chrome around 2009-2010 and stayed. Chrome started feeling less like a choice but a natural law. I already felt like too much of life was encapsulated by Google, from Gmail, to maps, to Chrome, not mention my dev accounts for API keys and the usual dev related nuggets of info Google has on me. I've tried to de-google myself, but each active choice seems to have me crawling back. I used Bing for years and still sorta, but it doesn't work for my daily workflow. DuckDuckGo lasted all of a week before I switched back to Google. Apple Maps has been mildly successful as an iPhone user. I still end up using Google Maps 75% of the time making it my most successful de-googlifcation attempt. I haven't even bothered with Gmail. However, something happened. My primary home browser is now FireFox. Unlike previous attempts, I didn't wake up and eschew Chrome but gradually over time I've found myself using FireFox more. Why?

Reason #1: FireFox Quantum is radically more performant

The guys at Mozilla knew that the performance was an issue, and it was even more so on MacOS. In a previous generation, the best way to experience FireFox was Chimera/Camino, a beautiful port of FireFox's Gecko to Objective C. FireFox has never felt mac like, and always laggier than other browsers. When Safari shook up the browser world, it was clear how much better of an experience Safari was than FireFox on OSX. It was fast. Ever since Safari, FireFox has been a 2nd tier experience on macOS. The lack of multi-threaded support was a big kicker as Webkit added this years ahead of Mozilla. Quantum brought this with its new Stylo CSS engine, and it shows. It's fast, is it faster than Chrome or Webkit? Probably not, but its damn close.

Reason #2: FireFox has containers!

I'm not much for social media. Name a service, and I probably don't use it (although I do like GoodReads and Untappd). I do however have FaceBook account dating back to when I first signed up for it in college. Facebook easily the most problematic of the social media companies. FireFox Quantum has a concept called containers, a way to isolate browsing experiences (cookies/caching) from other portions of the browser. The FaceBook container effectively puts FaceBook in jail, and I love it. Sorting sites also means placing various experiences separately from each other to prevent cross tracking. It's effective and wonderful. As much as FireFox touts privacy, it's never really been able to differentiate from Apple on this front.

Reason #3: Better UI

It's a goofy complaint, but the UI of FireFox before Quantum was relatively ugly and had a lot of wasted space. I wouldn't call the new FireFox beautiful, but it's solid and minimal, and I actually do not mind it at all. It has a distinctly Windows X look, but it's a big step up.

Reason #4: DNS over HTTPS

Chrome and FireFox are both adding this, but FireFox has it without having to use flags right now. DNS for years has been overexposed, so it's about time we have DNS over HTTPS.

Bonus reason: Firefox screenshots

Honestly, I don't use this as much as I should, relying on OSX's wonderful screenshotting but it is a nice feature.

Here's a post that hopefully saves someone a few hours of googling. I have a client who has a React-based Kiosk application and they want to use Pardot Forms to capture leads. This seems like a relatively straightforward, even reasonable ask and I assume, you dear reader thought so too. So you've probably tried something like this, assuming that you can post to a form like some jackass who expects a modern framework that assumes that this is feasible and you envision and/or wrote something like the following in beautiful ES6/ESnext syntax:

submitSignup(e) {
     const data = new FormData(document.getElementById('signupForm'));
     fetch('url-to-form-paradot-submission', {
       method: 'POST',
       dataType: 'jsonp',
       body: data,
     });
  }

This seems like it should work but, of course, it does not. Instead, you'll be greeted with a wonderful CORS error but the Pardot forms do not have any CORS controls. There's little information, and the developer documentation is sparse but I was able to unearth from the salesforce docs the following:

Submissions Using Ajax

Pardot doesn't support submitting data to form handlers via Ajax requests. When attempting to submit data to a form handler using Ajax, you will likely see errors like:

XMLHttpRequest cannot load {www.site.com/FormHandlerURL}. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '{page from which form handler should be getting submitted on client's website}' is therefore not allowed access.

This is what's known as CORS (Cross-Origin Resource Sharing). Pardot doesn't currently support CORS or JSONP for form handlers. It is possible to simulate a JSONP response by setting the Success and Error URLs for the form handler to be JavaScript URLs that execute Success and Error callbacks, respectively.

So the answer is that it doesn't support AJAX and the only way is to hack the form responses to trigger JS scrips. I managed to find a GitHub project where a user created a Pardot Form AJAX Handler which shows an example with callbacks. Oy.

Bonus: As total newbie to Pardot, I found these videos helpful for navigating the Pardot interface. They're out of date, the UI has changed, but the core features can mostly be found in the same places.

At the event, Apple also plans to debut new software features for its devices, including a dark mode for easier nighttime viewing and new productivity tools for the iPad. The company has also internally weighed previewing a new version of the high-end Mac Pro, according to people familiar with the deliberations.
- Apple Plans on Combining iPhone, iPad, Mac Apps by 2021, Mark Gurman, Bloomberg

Buried in the bombshell is something of particular interest to me and this blog. I find this worrisome, Apple really doesn't seem to get it. The Mac Pro should be a boring box with the latest whatever internals with a few drive bays and PCIe slot with big numbers that people like myself only care about. What it shouldn't be is worthy of a press event or representing a paradigm shift or some other Jonny Ives goofball design. Want a beautiful shiny "wow-your-clients" pro computer? That's the iMac Pro, not the Mac Pro. What people want is user upgradable storage, ram, and PCIe: for NVMe storage, for GPUs, for esoteric I/O upgrades. How do I know this? There's certainly a demand as I've had well over 40,000 different users access my Mac Pro Upgrade Guide, and my blog isn't even a blip in the digital ocean.

Here's a fun one for any web developers out there, you can play with a JS reconstruction fo the WorldWideWeb Browser (the first web browser) for the NeXT OS. Go to worldwideweb.cern.ch.

Its fun in it's own right, but the CERN browser is a good measuring stick of how accessible a website truly is without CSS or Javascript or even a full HTML 1.0 spec. Without any support of POST methods, WorldWideWeb can't even interact with forms but information is often visible.

Take, for example, my blog. It's easy to consume, meaning anything can traverse it and index it with minimal effort. Anyone with an out-of-date browser arguably can access it. Incredibly many news sites are usable albeit awkward, like CNN.com and NYTimes fair well. ABCNews does not, nor will anything requiring a form like Google.com.

Information architects should take note; there's something to be said about resilient markup languages are.