stephen.news

hypertext, words and more

Wordpress

  • Happy Birthday WordPress! 20 looks good on you!

    For me, it began with Xanga and Myspace. For others, maybe it was LiveJournal or something else. Blogging exploded during this decade like never before. Blogging began as a teenage refuge. An outlet for my younger self to express myself. It gave me incredible relief to share my thoughts, ideas, and interests. It overjoyed me when others would join me in the song and dance of commenting or sharing my posts. To no one’s surprise, millions of others felt the same way.

    At university, that interest remained strong and grew even further as I delved deeper into a design career. As my design education went on, it became clear that university could only go so far in terms of teaching web development. To scratch my itch for building for the web, I got involved in as many web-related projects as possible. We built websites for parties, school projects, web forms, magazines, and stores. I desperately wanted to build websites as a career and express myself even further as a design-orientated web developer.

    When WordPress was introduced to me, I couldn’t believe it. It was like the missing piece of the puzzle. Manually editing HTML files as blog posts instantly became a thing of the past. Everything, just clicked for me with it too. The WordPress Template Hierarchy blew my mind. Understanding the ins-and-outs of how WordPress works, made me instantly hirable basically anywhere for a short while. Hand-building WordPress sites for clients was a complete joy, and later, building site-generators was even more fun.

    Maintaining a legacy WordPress site is like being working on an Audi sometimes. But, WordPress at large has been one of the greatest joys of web publishing since Markdown and I’m so excited for what comes next. I owe the WordPress community so much, so here’s to another year around the sun WordPress!

    Today is the 20th anniversary of the first release of WordPress. None of us knew what we were getting into when it started, but we had a shared conviction that the four freedoms of the GPL combined with a mission to democratize publishing was something worth spending our time on. There will be celebrations in cities around the world, please join if there’s one happening near you.

  • For as long as I’ve known the web, I have known the little textarea element. It’s a simple element. In all likelihood, it’s just about as ubiquitous as the input tag on websites. It’s a captivating little thing. Before the modern inventions of React or complex JavaScript libraries, all it ever really contained was text.

    I suppose that’s the case to this today. But, it has long evolved into a springboard for authoring webpages. Modern publication inventions such as tweets, blogs, posts, blocks and countless others all stem from the textarea (sprinkle in some JavaScript magic, some drop zones and you have yourself a little “composer” where you can add images, video and more).

    Looking over the W3C spec for the textarea and looking back on SMS character limits (they were varied to say the least), it doesn’t take much imagination to see why Twitter came about in the first place. It seemed that short-form blogging was always destined to become a thing. Twitter’s success can largely be attributed to the fact that there’s really a lack of competition in the short-form blogging space.

    Tumblr and WordPress have always occupied the space between short and long-form blogging, sure. But, the spiritual successor to status messages (aka away messages)? Twitter has owned that (and marketed themselves as such) ever since it became a mainstream social network.

    While Twitter’s previous management has a long and well-documented history of running this company into the ground, Musk maintains no exception either. He’s nosediving and it’s headed for a calamitous user exodus. With no Trust & Safety board and a hostile CEO at the helm, banning tweets to Mastodon, banning journalists, then re-instating some of them — he’s clearly on a tyrannical, pathetic war path toward creating a platform that benefits Elon, elites and promotes a right-wing stochastic terrorist echo chamber.

    Needless to say, I’m getting the heck out of dodge. Like many others before me, I am kissing my neat little Twitter handle goodbye. Meanwhile, I was enthralled and delighted by Matt Mullenweg’s Decoder interview. There’s a brief point where he discusses what it means to be a good steward of Tumblr and how it has humbled him. Between Automattic’s Tumblr, the fediverse and this blog (which is also powered by WordPress an Automattic invention), I’m absolutely delighted to leave Twitter behind. Not to mention, the kind folks at Tumblr are considering adding ActivityPub support to their network which would effectively make Tumblr that largest Mastodon instance on the fediverse.

    You may be asking, “but, wait — how will I find my friends on Mastodon?!” Well, I have some good news! First off, don’t deactivate your Twitter. Follow these steps to get started with Mastodon

    1. First, join an instance. Doesn’t matter where you join! You can move freely about the fediverse. Think of each instance like an email handle.
    2. Next, add your Mastodon handle to your Twitter profile (this will make it easier for folks to find you in the fediverse).
    3. Finally, go here and sign in with your Twitter creds to find your friends who have also moved to the fediverse: movetodon.org

    With your help Twitter can be given a proper burial. It should go down as one of the worst acquisitions in business history and become the cautionary tale that it deserves. The textarea and microblogging on the other hand is never going away. In fact, I would argue that the slow death of Twitter reveals what we all want deep down — each of us want to own a little piece of web. One step closer to a de-commodified web utopia.

    Update: Elon banned links to Instagram, Mastodon and other social platforms and then reversed that decision. Then ran a poll on wether or not to step down, which ended with 58% in favor of him stepping down. Despite claiming he would abide by the results, there’s been no indication he would do so. Even more concerning, it appears he’s spellbound by the idea of restricting poll voting on Twitter to Blue subscribers. Welcome to hell, Elon.


    If you are so inclined, you can find me in several places on the web now!

    I’m on Tumblr where I may shitpost, share photos, re-blog cool things and whatnot: tumblr.com/petrey

    Elsewhere, on the fediverse I have several handles. However, I’m mostly here with my fellow hackers and unix computer club community: tilde.zone/@petrey

    Follow me wherever you’d like, but wherever you go, this blog remains ✨

  • It’s a tough business to manage a website.

    Between, the pandemic, looming anxiety, and a medically necessary surgery to repair my right knee (more on that later), it seems I’ve left my website in a sorry state for a few months now. I migrated my website to a static infrastructure thanks to Gatsby and Netlify earlier this year. I’ve largely been really happy with this setup of publishing in WordPress, and triggering Netlify page/post generations via a web hook. The pagespeed score alone was incredible. I could sing praises all day long, but what I want to write about today, is refactoring.

    I let my v1 repo sit untouched for roughly 8 months. Yikes. I had plenty of errors and was hastily written. It was not typed at all, and was largely a mess. I decided to get serious, and wrote a list of must-haves for a v2:

    • Typescript baby
    • styled-components
    • Better support for more post types (such as bookmarks or projects)
    • More effective linting setup and better error handling
    • Client-side Apollo-powered GraphQL queries for bookmarks and dynamic content where possible (such as comments, coming later)
    • DRY out the code base, and remove unused dependencies
    • More effective theming approach

    A tall order indeed. However, it was possible! I powered through it, and renamed my .js files to .ts and .tsx and largely followed Gatsby’s own provided typescript example, which was really helpful when it came time to debug build-time errors locally. As I was working on this refactor, I scoped out Brian Lovin’s website and just fell in love with the feed/timeline style he uses to organize his bookmarks. So, naturally, I took great inspiration from him to build something similar:

    I’m pretty pleased with the results. I’ve wanted something like this for a very long time. So, I want to take a moment to thank Brian for open sourcing his site (although his site is powered with next.js, it was an inspiration none the less). It paved the road for me to investigate a path forward building a similar suite of components using Apollo Client and wp-graphql.

    Ultimately, the list of changes and new features led to this nightmare diff (mostly configuration and newlines to get typescript working):

    😳

    But it built successfully, and I was happy to finally have Typescript at the ready.

    Up next, I will be finally adding back the commenting ability to my blog posts (and maybe setup a proper site search?). After that, I’ll probably add some portfolio and personal work. But, until then I will be resting comfortably sipping IPAs and mulled wine during this holiday, playing video games and pampering my two buds, Frank and Kevin:

    Merry Christmas!

  • New site, who dis

    I haven’t developed a new WordPress theme for this website (that I really loved) in a long time. So naturally, it was time to re-examine my personal tech stack. If you personally know me, you know I’m a WordPress advocate. Big fan of ol trusty.

    There’s a few problems with WordPress I’ve been hung up on for a while now. It can be a bit slow (sometimes). Media managing can be painful on the front-end. Deployment processes are… all over the place. Historically, I’ve been a huge fan of Trellis from Roots. While we’re at it, I was a big fan of Bedrock too. Finally, I work with React and JavaScript all day long — why can’y my personal website run on a modern tech stack too?

    Well, I came across this post from Chris Coyier, and I was pretty much sold on the JAMStack concept immediately. At work, and at other organizations like Twitter, server-rendered pages are stupid fastest. Heck, they’re typically standard these days for most web apps. Enter the Gatsby + WordPress stack. Why abandon years of publishing paradigms when you can keep them?

    There’s no shortage of tutorials on the Gatsby + WordPress setup. Initially I played around with some starter projects, like this one. I personally started (and later forked) with egghead.io’s starter. It’s pretty spectacular out-of-the-box, and if you enjoy love @emotion theming or styled-components, I think you’ll dig too. But, really Gatsby itself has a lot to love. For example, Gatsby has drop-in support for server-rendering. Super cool stuff. I really enjoyed Juliano Rafael’s (@frontendwizard) notes on this subject:

    Progressive image loading? Inlining of critical CSS? Painless PWA configuration? You name it, Gatsby got you. It is really impressive. Don’t believe me? I encourage you to try it out.

    The solution for images is so good, that is constantly referred as a strong point of Gatsby, even thought it actually is a plugin. All you gotta do is add a couple of plugins into your Gatsby config file and you’re good to go. Your images will be available on the GraphQL API at build time and the image component will handle all the resize, picking the best file format and everything else. You even get a blur up effect to improve the user experience for free.

    That’s just the tip of the iceberg. Seriously. These web apps freakin purr. I’m overdue for writing a full tutorial on this subject, so stay tuned. But, for now I want to share a high-level overview of the technical lift I undertook for my site migration.

    My order of operations (yours might be slightly different):

    Now that we have our API-site prepped for deploy-hooks, exposed the frontpage and menus endpoints — we’re ready to consume the API with our server-rendered React app powered by Gatsby. Here’s a sample of my gatsby-config.js file:

    ...
    resolve: `gatsby-source-wordpress`,
    options: {
      // Your API WordPress source goes here.
      baseUrl: `example-api.https://stephen.news`,
      protocol: `https`,
      // Fetches posts, tags, categories, etc from the baseUrl.
      includedRoutes: [
        '**/menus',
        '**/categories',
        '**/frontpage',
        '**/media',
        '**/pages',
        '**/posts',
        '**/tags',
        '**/users'
      ],
      useACF: false,
    },
    ...

    I absolutely love this setup.

    All of the un-fun configuration stuff is already handled by the WordPress/WP REST API side, and all of the actually fun conventional interface building is done on the… well, the interface side. A complete separation of church and state, if you will. It’s a thing of beauty. Absolute zen.

  • The WSJ reports:

    Verizon Communications Inc. has agreed to sell its blogging website Tumblr to the owner of popular online-publishing tool WordPress, unloading for a nominal amount a site that once fetched a purchase price of more than $1 billion.

    Automattic Inc. will buy Tumblr for an undisclosed sum and take on about 200 staffers, the companies said. Tumblr is a free service that hosts millions of blogs where users can upload photos, music and art, but it has been dwarfed by Facebook, Reddit and other services.

    This is a shocking acquisition. No doubt, this a good move for the preservation of blogs. I firmly believe Automattic will be a better steward of creators than Verizon (or was it called Oath?) would’ve been. I have long awaited the day where Tumblr and WordPress have publication parity. This has to be really excited for everyone at Tumblr. I mean this even has Tumblr veteran Marco Arment pumped:

    Edit: it appears that Marco Arment deleted this tweet:

    This is pretty cool. Can’t think of a better owner today than Automattic for Tumblr’s huge creative publishing community.

    Marco Arment

    Now the hard question — what about the adult content ban? For now, it seems the ban stays in place. But, it’s really unclear if Matt will ever changed the policy. Regardless, the blogs at Tumblr will live on under the safe and profitable umbrella of Automattic.

  • First off, I didn’t write this. Ryan Hellyer did. I only came across this fix from a post written by Justin Downey. The short-end of it is, drop this block of code into the bottom of your functions.php file. I made some tiny tweaks:

    if (!function_exists('disable_emojis')) {
      function disable_emojis() {
        remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
        remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
        remove_action( 'wp_print_styles', 'print_emoji_styles' );
        remove_action( 'admin_print_styles', 'print_emoji_styles' );
        remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
        remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
        remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
      }
      add_action( 'init', 'disable_emojis' );
    }

    I really needed this personally, because MailChimp was parsing my RSS feed verbatim, and for whatever reason, when WordPress added Twemoji to core in 4.2 it forces the emoji markup to be an inline-image — which, I get it. It’s useful for older devices who may not support emoji. But it was completely wrecking my email campaigns styles, yuck! 🤢

    Thankfully, this function works in disabling the Twemoji images altogether! Tested up to: 5.2.2 👍

  • Jason frequently hits the nail on the head. It’s pretty rare that predictions of his don’t hold water. He’s the proprietor of the kottke.org. One of those great places your can find on the web where name is the address.

    2019 is surely going to be a golden year for bloggers, web journals, and anyone who has “exited social media”. The perfect storm has arrived. The Facebook exodus. The Snapchat well has dried up. The paywalls are going up left and right. Hell, even George R. R. Martin is migrating his old LiveJournal posts to a personal author blog he can manage on his own. My personal favorite — people and organizations are leaving Medium (and going back to WordPress), and honestly it’s been a long-time coming. Medium’s open paywall system hasn’t fared very well. Apparently the revenue falls short, and the traffic is low-quality.

    What’s old is new again. 2019 is the year we take back blogging ✌️

  • PHP Namespaces

    If you build or customize WordPress themes, coming across Namespaces are going to become more and more commonplace. I think they’re pretty cool. I have never enjoyed having to write (or parse for that matter), custom_functions_with_a_weird_long_name.

    Steve Grunwell has a fantastic primer on Namespaces, and how to use them in WordPress. I also learned about Singletons (and their problems in a OOP environment) and why Namespaces are effective.

    In short, functions are typically defined in plugins a variety of ways. Not long ago, developers might have written a function like this:

    <?php
     
    function get_recent_posts( $limit = 5 ) {
      return new WP_Query( array(
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'orderby'        => 'post_date',
        'order'          => 'desc',
        'posts_per_page' => $limit,
      ) );
    }

    Innocent, naive function writing.

    Function name collisions are were pretty likely to occur, so we got longer and longer functions which led to Class encapsulations, so these functions began to make a mess of your codebase with global variable declarations. Steve goes on:

    From here, developers seem to have split into two factions: the first, dead-set on removing global variables, moved toward the Singleton pattern:

    class MyPlugin() {
     
      protected static $instance;
     
      protected function __construct() {
        // Made protected to prevent `new MyPlugin()` calls.
      }
     
      public function get_instance() {
        if ( ! self::$instance ) {
          self::$instance = new MyPlugin();
        }
     
        return self::$instance;
      }
     
      public function get_recent_posts( $limit = 5 ) {
        return new WP_Query( /* ... */ );
      }
    }
     
    # Usage:
    $plugin       = MyPlugin::get_instance();
    $recent_posts = $plugin->get_recent_posts();

    Yikes, what a pickle… But, behold! The proper (and more maintainable effort) with Namespaces:

    <?php
     
    namespace SteveGrunwell\MyPlugin;
     
    use WP_Query;
     
    function get_recent_posts( $limit = 5 ) {
      return new WP_Query( array(
        'post_type'      => 'post',
        'post_status'    => 'publish',
        'orderby'        => 'post_date',
        'order'          => 'desc',
        'posts_per_page' => $limit,
      ) );
    }

    What a wild and crazy ride! Seriously, give Steve’s post a full read.

  • As a WordPress Guy, and advocate for online publishing — I’ve always been curious about the New York Times digital publishing “stack.” A lot has changed since the printed word.

    Text editors, paragraph blocks, header arrangements, interactive graphs, revision history, and data structures — journalists these days have a lot more responsibilities to handle than just a story. They’re more akin to data scientists or librarians handling meta-data with caution and organizational finesse than the classical depiction of journalists.

    I was surprised to read that the New York Times employs a CMS called Oak, which was built on the backbone of a simple text editor called ProseMirror. An un-opinionated open-source text editor. I was taken back by this line: 

    ProseMirror structures its main elements — paragraphs, headings, lists, images, etc. — as nodes. Many nodes can have child nodes — e.g., a heading_basic node can have child nodes including a heading1 node, a byline node, a timestamp node and image nodes. This leads to the tree-like structure I mentioned above.

    It’s neat to see their CMS take on a node-tree structure (which is ultimately a appropriation other have taken as well such as HTML/XML/JSON). It’s smart. I would have loved to see what their process and CMS looked like before.

    Did you notice the parent-nodes have a similarity to another data structure paradigm, say blocks? In WordPress-land, blocks are coming soon, and once that happens, the data-structure pandora’s box will have been opened. In the simplest, most modest comparison, Gutenberg will only have parent blocks. No children. But that could all change later down the road. 

    Food for thought: if the New York Times can transition to a successful implementation of complex data structures, modern CMS composer capabilities — surely WordPress/Gutenberg could employ similar techniques and follow in that same spirit.

     

  • Links: March 2018

    This month I collected some interesting links worth sharing. Some notables include: an iOS AirPod concept design, Starbucks bathroom reviews website, a post from Scott Galloway on marriage, and the technology behind my website page transitions and more.

    Starbucks Bathroom Reviews

    Living in NYC, finding a clean public bathroom can be difficult. Finding one without a security code can be even more rare. Let this incredible website be your guide. 😎

    Reading Time WP

    This plugin looks cool. It provides a reading time estimate for your posts in WordPress. Gonna check it out. Stay tuned.

    Barba.js

    If you’re wondering how I setup page transitions on my website — barba.js is how. I fully plan on writing a installation/customization tutorial at some point. It’s weighs in at 4.4 kb JS file which isn’t shabby. And has all sorts of neat bells and whistles.

    iOS Airpods Sharing Concept

    Uhm. This is seriously so fucking cool. What a great idea. This whole concept stems from such unique problem that requires a unique solution:

    The AirPods are arguable one of Apple’s best products, their simplicity, and intuitiveness make them an essential daily device. However one disadvantage is the lack of ability to share music with friends. Back in the 3.5mm analog days, this was accomplished with a headphone splitter […]

    […] this is easily achievable with an iOS software update that could enable users to share their iPhone or iPad’s audio with multiple friends who also have AirPods:

    Knockoff iPhone X Notches
    🤣

    Imitation is the sincerest form of flattery I suppose.

    I Do

    I follow Scott Galloway pretty religiously. Back in 2015, my friend Tim Kosters (@sretsok) introduced me to his You’veTube channel. Scott is an accomplished professor at NYU, and previously been a board member at Eddie Bauer, The New York Times Company, and a few others. From time to time Scott pens personal advice and this one hit home for me.

    In my experience, the most rewarding things in life are family and professional achievement. Without someone to share these things with, you’ve seen a ghost — it sort of happened, but not really. However, with the right partner, these things feel real, you feel more connected to the species, and all “this” begins to register meaning.

    Not quite a blogroll, but maybe a start

    Chris (@chofficehours) of iwantmyname.com runs a fantastic blog worth subscribing. Lately, he’s been writing a lot about remote worklife, blogrolls, and blogs (with a little b like this one). There’s a growing problem with the Twitter echo chamber, I don’t feel like I’m part of any community on Medium, and I go to Hacker News a little too often — what’s the fix? Blogrolls? More blog aggregators? Interesting words from an interesting guy.