Posted on

We Tried Ahrefs Skyscraper SEO Link Building Strategy A LOT… And Here Are The Results!

Can the Skyscraper link building strategy help get your business to the top, or is it just another SEO tall tale? We decided to find out…

Here at WPMU DEV, if we’re going to write about something that can improve your business, we don’t just talk the talk, we walk the walk. So, when we heard about the skyscraper technique, we decided to walk the steps, test it for ourselves, and share the results with you.

In this article, we’ll cover the following:

Cartoon - DevMan supervising the construction of a skyscraper.
Is a skyscraper article worth building? Read on to find out…

What is the Skyscraper Technique?

The Skyscraper Technique is an SEO link building strategy that basically works like this:

  1. Find a competitor’s published article with loads of backlinks related to your site’s content or niche.
  2. Create a better article (i.e. make it more in-depth or comprehensive, up-to-date, and relevant)
  3. Contact the sites linking to your competitor’s article and invite them to link to yours instead.
  4. Watch your page climb up the search engine ladder, then sit back and enjoy the view from the top while new traffic floods into your site.
  5. Rinse and repeat, and continue building taller skyscrapers until you can’t breathe in any more rarified air from the exosphere.

Sounds simple and looks good on paper.

But we’re not here to write a skyscraper article on the skyscraper technique, so if you want to learn more about it, go here or keep reading to learn how we fared erecting a dozen of these tall edifices (tl;dr … skyscrapers are not a dime a dozen. Read on to learn why).

Let’s start by laying down the foundations…

Our Skyscraper Testing Methodology

You can’t just plonk a ready-made building on a piece of land and start advertising units and floors to rent or sell…you have to plan, research, and lay down some concrete foundations before you start piling on the bricks.

So, let’s start by looking at what it took to get our skyscraper articles off the ground.

Resources – The Crew, Tools, and Time Spent Building a Skyscraper

Our construction crew required everyone and their blog to jump into the pit and start digging. From Savo, our Business Development Manager/Foreman who first proposed to punish us, to Alec, our Partnerships & Outreach manager, who researched suitable topics and ran the outreach campaigns, to our entire writing team who then researched the content and put the articles together, plus members of our marketing team and developers who reviewed articles for SEO, content, and technical accuracy…even James, our CEO, rolled up his sleeves and got his hands dirty.

While in theory a solo builder could erect a skyscraper article all on their lonesome, it’s probably best to treat the skyscraper method as you would if building a residential apartment complex. You’ll need to get your whole team involved in its construction.

Here are some of the tools we used to help speed up the process in addition to using WordPress (of course) to write and publish the articles:

  • Ahrefs – Assess topics, perform competitor analysis, obtain backlink data, watch videos about how to do it
  • Google trends – Assess topics.
  • Google search (if you need a link, search Google and you’ll find it) – Review competitor posts.
  • Jira – Our project management tool for tracking skyscraper topic reviews, article production and outreach tasks.
  • Google sheets (Excel, etc.) – Prepare tracking sheets, track campaign results, keep Martin happy
  • Email contacts – While using paid solutions to identify contact info or automated solutions to send outreach emails would have significantly reduced the hours we spent on these tasks, it could have veered into spam territory, so we opted not to do it. We mostly checked sites manually to identify contact information tools like Hunter.io (email address finder – free plan), Phantombuster (email extractor – free trial), Verifalia (free email address validator), and our Help Scout account to send outreach emails, and respond/send follow-up emails.

In terms of time spent, taking into account all the regular content production tasks (e.g. assessing suitable topics for articles, researching, writing, editing, moaning about it, etc.), each skyscraper required on average 2-3 weeks to write (we normally take 2-4 days to write a blog post or tutorial.) Also, whichever writer was assigned the article worked on it full-time for the entire period, so the rest of the writing team had to pick up the slack and do some actual work.

Meanwhile, Alec spent on average 8-10 hours per skyscraper running the outreach campaigns and tracking results.

The bottom line: If you have the resources to create a skyscraper article, you can also build an exciting company to rival any of Elon Musk’s (SpaceX, Tesla, PayPal…even a Boring one!)

Now that you know what it takes to build a skyscraper, let’s show you how we did it brick-by-brick.

Campaign Target

You gotta have a target, so if you shoot for the moon and miss, at least you’ll clear some trees.

So, we set out with an expectation of achieving a 5% success rate, which is to say that we aimed for 5% of contacted sites to link to our skyscraper articles.

Selection Criteria

First, we had to come up with a list of article topics and evaluate their suitability for the skyscraper technique.

Skyscraper research
We researched and analyzed over 30 potential skyscraper article topics.

Some of our considerations for eligibility included:

  • Will the topics provide sufficient interest to general users that other websites will want to link to it?
  • Do these topics “fit in” with what our business is about? We are a WordPress company servicing web developers and their clients, so our article topics had to make sense to our readers.
  • Can we write a better article than the best article there is on the topic? In theory, you just go out and find the article that most websites are linking to and write a better one. In practice, however, you will often find yourself asking something akin to “how would Jesus write a better bible?”

After brainstorming and coming up with over 30 article ideas, Alec set up a project board on Jira and went through each of these topics to assess their suitability as candidates for skyscraper articles and do competitive analysis.

Jira board- Assessing suitable skyscraper article topics.
We created a Jira board to assess over 30 potential skyscraper article topics.

As the goal of doing competitive analysis for the skyscraper method is to ask the question “can we get websites to want to link to ours instead and knock this article off its perch?” and get a “yes” as an answer, our competitive analysis criteria included assessing the number of backlinks the articles being linked to had, and how old (and hopefully outdated) the post is.

Skyscraper Articles

Out of 30+ topics that Alec thoroughly evaluated, we ended up with 12 articles – some were written from scratch and some required existing posts to be rewritten and updated:

  1. WordPress GDPR Compliance
  2. Website Headers
  3. Update PHP WordPress
  4. Parallax Themes/Plugins
  5. Forminator Advanced Features
  6. Chrome Extensions
  7. HTTPS & SSL Guide
  8. Web Application Firewall Guide
  9. CDNs & Cloudflare Guide
  10. Anti-Spam Laws
  11. Spam Prevention
  12. Web Accessibility & WordPress
Web Accessibility & WordPress
We hoped more of the web would access our skyscraper article on Web Accessibility.

Outreach Campaign Setup

After selecting our skyscraper post topics, Alec created spreadsheets to track each campaign, emails to send out, and documented the process as follows:

  • Step 1: For each listed backlink in the Backlink column of each Target sheet (Target #1 to Target #6), find a contact email on their website, via Google search, or online tool, and add it to the Contact Info field. If no contact email can be found within a few minutes, skip it and cross out the backlink in the spreadsheet.
  • Step 2: For each backlink with an identified email in the spreadsheet, send an initial outreach email via HelpScout using the email outreach template (provided below). Refer to the example email as needed. Then, add the date to the First Contacted field.
    Be sure to swap out the placeholder text with the relevant information (e.g., target post title, competitive site). Double-check the email before sending it to avoid making any mistakes! A HelpScout workflow has been configured to route these to the project folder.
  • Step 3: Review responses as they come in, and set the flag in the Responses column to ‘Yes’ accordingly. If a site has added our URL, first verify this, then set the flag in the Changed column to ‘Yes’, and reply with a ‘thank you’ email. If a site says no or asks for money, don’t reply – just set the flag in the Changed column to ‘No’. If a site asks for a link exchange, don’t respond right away – assign it for further review.
  • Step 4: 3/7/15-day follow-up response (await further guidance)

Here’s our email template…

Backlink outreach campaign - email template.
The email template we used for our backlink outreach campaigns.

And here’s an example of a spreadsheet we used to track each backlink outreach campaign.

Backlink Outreach Spreadsheet
Who doesn’t love using spreadsheets to track campaigns?

Each spreadsheet contained the following information:

Rows:

  • Target # – The URL of the article other websites are linking to that we’re competing against.
  • First Published – Date competing article was first published.
  • Last Modified – Date competing article was last edited.
  • Backlinks – The competing article’s number of backlinks (obtained from Ahrefs).
  • Contacted – Total number of sites contacted with a request to point to our article.
  • Changed – Total number of sites that changed their links to point to our article.
  • Link Exchanges – Total number of sites that entered into a reciprocal link exchange agreement with us.
  • Success Rate – This figure is automatically calculated by dividing the number of sites that changed their links to point to our article by the total number of sites contacted.

Columns:

Each of the spreadsheet columns below was used to track results and most are fairly self-explanatory.

  • Backlink – This is the URL we are targeting for our article.
  • Domain Rating – The backlink URLs domain rating (from Ahrefs).
  • Contact Info – Who we are sending our email request to.
  • First Contacted
  • Followed Up
  • Replied (Yes/No)
  • Changed (Yes/No)
  • Link Exchange

We then embarked on a systematic process of writing and publishing the articles, then implementing, tracking, and documenting outreach campaign results.

The results are shown in the section below.

Our Results

WordPress GDPR Compliance
Our best performing skyscraper article – WordPress GDPR Compliance (19.28% success rate)

Alec created this fancy-shmancy spreadsheet report to document the results of our skyscraper outreach campaigns…

Skyscraper outreach campaign results
Our skyscraper outreach campaign results, delivered in a fancy-shmancy spreadsheet report.

Here are the columns in the Outreach Campaigns section of the report and what they mean:

  • Campaign – Clickable links take you to the posts.
  • Month – The month we focused on for the outreach campaign.
  • Posts – Number of targeted competitive posts.
  • DF Links – Number of do-follow backlinks across all targeted posts.
  • Contacts – Number of sites contacted from the list of do-follow backlinks.
  • Replies – Number of new backlinks earned as a result of outreach campaign.
  • Backlinks – Number of backlinks earned from all outreach emails sent.
  • After 1st – Number of backlinks earned from the initial outreach email.
  • 3 Days – Number of backlinks earned from a 3-day follow-up email.
  • 7 Days – Number of backlinks earned from a 7-day follow-up email.
  • 15 Days – Number of backlinks earned from a final 15-day follow-up email.
  • Success Rate – Success rate = backlinks / contacts.

Here’s a condensed and more legible version, so you can see that we’re not fudging our results…

Skyscraper outreach campaign results
And now, for the big reveal. Drum roll…

Our final Skyscraper Strategy results:

Skyscraper Project results
…Ba-dum tish!
  • Campaigns – 12
  • Sites Contacted – 1,108
  • Replies – 205
  • New Backlinks – 72
  • Success Rate – 6.50%

Skyscraper Technique – A Tower of Link Power or Just SEO and So?

So, did the skyscraper strategy increase traffic to our blog? Did it drive new business? Was it worth it? Would we do it again? And what could we have done better?

First, here are some thoughts to help us analyze the process:

  • We targeted 71 competitive posts across all campaigns which had a combined 3,657 do-follow backlinks. However, only 1,108 (30.3%) warranted reaching out. The rest were largely reposted articles and/or spam, or were otherwise of insufficient value.
  • The GDPR post performed the best (19.3%) and the Accessibility post performed the worst (2.2%). So it’s unclear whether broad appeal had as much of an impact as we first expected, considering a niche post like ‘Forminator Advanced Features’ had above-average success (6.9%).
  • 19 (26%) of the contacted sites that provided us with a backlink didn’t respond by email or follow-up in any way. So it was important to check for added links across all contacted sites, not just those that responded to us.
  • 58% of the contacted sites that provided us with a backlink did so after the initial email, 14% did so after a 3-day follow-up email, 15% after a 15-day follow-up, 13% after a final 15-day follow-up. Clearly some diminishing returns from repeated follow-ups, not to mention some grumpy responses after the 3rd or 4th email (e.g. “stop emailing me!”).

Additionally, in terms of increased backlinks from outreach campaigns vs organic SEO, here’s how our skyscraper articles fared…

Skyscraper backlink results
Skyscraper backlinks from combined organic SEO and outreach activities.
  • Although articles like HTTPS & SSL Guide gained over 27% of its total backlinks from outreach activities, on average over 90% of total backlinks came from organic SEO.
  • Ironically, most of the total backlinks gained for our Spam Prevention article were spam links from a single domain.

In conclusion…

Keeping in mind that we started with a target of getting at least 5% of contacted sites to link to our skyscraper articles, our tests show that if you can find a good topic with LOADS of potential backlink opportunities, this method may be worth pursuing (for example, our WordPress GDPR article, which gained 32 backlinks). However, while a skyscraper post may be good for passively gaining more backlinks (after putting in a lot of active effort), we also ended up with posts like Update PHP WordPress, which only netted 2 backlinks, so this method might be worthwhile to use for evergreen posts with lots of stats and facts that appeal to a wide number of sites in your industry or niche.

So, if you have the resources and the will to build articles that will tower over those of your competition, you may want to put on a hard hat and give the skyscraper method a try.

Posted on

365: Klare

Klare is moving on from design at CodePen to design at GitHub. Huge congrats Klare! If you didn’t know Klare was our one and only dedicated designer here at CodePen and left a massive mark here in the design and UX of CodePen, the app, as well as internally in our organization practices. I’m talking with Klare here just a few days before her last day to reflect on her years here.

Time Jumps

  • 00:25 Klare’s announcement
  • 01:40 What are some of your work highlights?
  • 04:01 Accessing your work
  • 05:26 Following social feeds on CodePen
  • 08:00 Designing at CodePen
  • 11:27 Leaving behind a design system
  • 14:06 Making incremental changes
  • 16:08 Sidebar nav for an app
  • 18:02 Homepage updates
  • 21:26 Using a common language for code design system
  • 25:35 Documentation and project management
  • 29:08 New job description

The post 365: Klare appeared first on CodePen Blog.

Posted on

Best Language for Speech Control

I am contemplating writing a speech-controlled music player app for android. I am experienced in writing PC applications, and wrote a rather sharp speech controlled MP3 player using VB in the 1990s. I have also used c, c++, and several other languages in the past, but I have zero experience with mobile app development.

My priorities are a fast, memory-efficient app with good command-&-control and dictation abilities (iPhone compatibility would be a plus, but I'm willing to write a separate app for iPhone if the android app goes well).

What language/framework would you recommend?

Posted on

Rollbar Announces New Additions and Updates to Its SDK Offerings

Rollbar, a real-time error monitoring service, has announced new additions and updates to its collection of SDKs for expedited development on the platform. The updates to existing SDKs are intended to keep the company up-to-date on older technologies, while the new SDKs push the envelope in terms of modern development. 

The SDKs include .Net v5, Apple/Mac, Flutter, PHP 8, Laravel, and react.  Brian Rue, CEO, and co-founder at Rollbar had this to say about the new additions:

Posted on

How to Build a HTML Form for Uploading Files to Google Cloud Storage

Let’s write a simple web application that will allow users to upload files to Google Cloud Storage without authentication. The client site of the application will have an HTML form with one or more input fields. The server side is a Node.js application that will handle the file upload. The application may be deployed to Google Cloud Run, Firebase Function or as a Google Cloud Function.

HTML Form

Our HTML form includes a name field and a file input field that accepts only image files. Both the fields are required.

When the user submits the form, the form data is sent to the server, encoded as multipart/form-data, using the Fetch API. The server will validate the form data and if the form is valid, it will upload the file to Google Cloud Storage.

<form method="post" enctype="multipart/form-data">
  <input type="text" name="name" id="name" placeholder="Your name" required />
  <input type="file" name="image" accept="image/*" required />
  <input type="submit" value="Submit Form" />
</form>

<script>
  const formElem = document.querySelector('form');
  formElem.addEventListener('submit', async (e) => {
    e.preventDefault();
    const formData = new FormData();
    formData.append('name', e.target[0].value);
    formData.append('file', e.target[1].files[0]);
    const response = await fetch('/submitform', {
      method: 'POST',
      body: formData,
    });
    const data = await response.text();
    return data;
  });
</script>

Node.js Application

Our application will have two routes:

  1. The home (/) route that will display the form.
  2. The submit form route that will handle the file upload.
// index.js
const express = require('express');
const router = require('./router');

const app = express();

app.get('/', (_, res) => {
  res.sendFile(`${__dirname}/index.html`);
});

app.use(express.json({ limit: '50mb' }));
app.use(express.urlencoded({ extended: true, limit: '50mb' }));
app.use(router);

app.listen(process.env.PORT || 8080, async () => {
  console.log('listening on port 8080');
});

Since the Express server cannot handle multi-part form data, we are using the Multer middleware to parse the form data that includes both text content and binary data. Also, we are discarding the original file name of the uploaded file and assigned our own unique file name generated from the uuid library.

// router.js
const express = require('express');
const { Storage } = require('@google-cloud/storage');
const { v4: uuidv4 } = require('uuid');
const multer = require('multer');

const storage = new Storage();
const router = express.Router();
const upload = multer();

router.post('/submit', upload.single('file'), async (req, res) => {
  const { name } = req.body;
  const { mimetype, originalname, size } = req.file;
  if (!mimetype || mimetype.split('/')[0] !== 'image') {
    return res.status(400).send('Only images are allowed');
  }
  if (size > 10485760) {
    return res.status(400).send('Image must be less than 10MB');
  }
  const bucketName = '<<GOOGLE_CLOUD_STORAGE_BUCKET_NAME>>';
  const fileExtension = originalname.split('.').pop();
  const fileName = `${uuidv4()}.${fileExtension}`;
  const file = storage.bucket(bucketName).file(fileName);
  await file.save(req.file.buffer, {
    contentType: mimetype,
    resumable: false,
    public: true,
  });
  const url = `https://storage.googleapis.com/${bucketName}/${fileName}`;
  console.log(`File uploaded by ${name}`, url);
  return res.status(200).send(url);
});

module.exports = router;

Using Firebase Functions

If you are planning to deploy your file upload application to Firebase functions, some changes are required since our Multer middleware is not compatible with Firebase functions.

As a workaround, we can convert the image to base64 on the client side and then upload the image to Google Cloud Storage. Alternatively, you may use the Busboy middleware to parse the form data.

const convertBase64 = (file) => {
  return new Promise((resolve, reject) => {
    const fileReader = new FileReader();
    fileReader.readAsDataURL(file);
    fileReader.onload = () => {
      const base64String = fileReader.result;
      const base64Image = base64String.split(';base64,').pop();
      resolve(base64Image);
    };
    fileReader.onerror = (error) => {
      reject(error);
    };
  });
};

const handleUpload = async (file) => {
  const base64 = await convertBase64(file);
  const { type, size, name } = file;

  const response = await fetch('/submitform', {
    headers: { 'Content-Type': 'application/json' },
    method: 'POST',
    body: JSON.stringify({ type, size, name, base64 }),
  });

  const url = await response.text();
  console.log(`File uploaded by ${name}`, url);
};

The submit form handler will have to be tweaked to convert the base64 image to a buffer and then upload the image to Google Cloud Storage.

router.post('/upload', async (req, res) => {
  const { name, type, size, base64 } = req.body;
  const buffer = Buffer.from(base64, 'base64');
  await file.save(buffer, {
    contentType: type,
    resumable: false,
    public: true,
  });
  return res.send(`File uploaded`);
});

Cors for Cross-origin Requests

If you are serving the form on a different domain than the form handler, you will need to add the cors middleware to your application.

const cors = require('cors')({ origin: true });
app.use(cors);

You should set the access control policy of your Google Cloud Storage bucket to “Fine-grained” and not “Uniform.” When individual files are uploaded to Cloud Storage, they are public but the container folder is still private.

Posted on

Proximity Marketing – An IoT Based Approach for Improved Results

Introduction

IoT has penetrated many domains and areas and has been successful. It has revolutionized the industry altogether, and this article will reveal the capabilities of IoT for Proximity Marketing. The reader would be able to connect and understand the problem statement and realize the importance of this innovation.

The Problem Statement

With the advent of technologies and smartphones, brick-and-mortar store owners have increasingly seen consumers migrate away from brick-and-mortar retail stores in favor of convenient digital outlets over the last few years. With the ease of smartphones and “one-click” shopping, many shoppers feel that browsing for products in a physical store is almost obsolete. On researching to go over the issue, it is found that BLE Beacons are a great way to guide customers their way through a large store and find the intended product. Also, for owners, it helps in targeted product recommendations. The proposed solution consists of Proximity sensing and a Product recommender system.

Posted on

How the TypeScript Omit Type Works

TypeScript provides a number of utility types that are used to solve a particular problem that using types in Javascript creates. One very useful utility type used in TypeScript is the Omit type, which lets us customize an already existing type. Let's look at how it works.

Custom Types

This article assumes you know how to create custom types in TypeScript. If you don't, read my article on custom types here.

Posted on

Angular + React: Vulnerability Cheatsheet

Securing applications is not the easiest thing to do. An application has many components: server-side logic, client-side logic, data storage, data transportation, API, and more. With all these components to secure, building a secure application can seem really daunting.

Thankfully, most real-life vulnerabilities share the same root causes. By studying these common vulnerability types, why they happen, and how to spot them, you can learn to prevent them and secure your application.

Posted on

Guide to TestNG Assertions in Selenium Based Test Automation

We all know that testing is a significant part of SDLC, which can be performed manually or automated. No matter which testing type we adopt, knowing where we are getting application blockers while testing is essential. Learning application blockers becomes a bit easy while manually testing an application as human touch is involved.

However, when testing an application via automation, we should explicitly adopt a strategy where we can validate whether the expected results meet the actual results or not.

Posted on

What Features Are Crucial in Customized Virtual Classroom Software?

When you decide to expand your Online Tutoring Platform or launch the tool for the University’s/School’s extra operations, there are always two options on the table: choose the all-in-one solution or develop a customized product adapted to your needs. Indeed, such a decision depends on many factors, including the list of expenses, the variety of functionality, and the deadlines. And if after the full consideration of details, you pick up to create a customized Virtual Classroom Software, you must be wondering: ‘Where to start?’, ‘How much will it cost?’, ‘Where to find a development team?’, and finally, ‘What features to add?’. The first ones necessitate a more in-depth examination of your specific approach and concept. However, after reading this article, the last question wouldn`t be a burden for you since we will sort out what features are the most crucial for the user-friendly, profitable Virtual Classroom Software. But first, let’s find out the buzz around such solutions and what the audience demands from them.

Why Does the Market Need Virtual Classroom Software?

The innovative teaching method extends beyond classrooms and training facilities. As shown in the 21st-century campus study, 61 percent of colleges and universities provide virtual learning, while 53 percent of students have taken virtual learning sessions. This is the reality of current society, current circumstances, where studying is constantly shifting from online education to offline and vice versa. So all the institutions and platforms must adapt and have a solid solution for the convenience of lectors and learners.

Posted on

#24 – Aki Hamano on Building Useful Blocks for Fun

On the podcast today we have Aki Hamano.

Aki is a freelance developer from Japan. He builds websites for clients and enjoys setting himself difficult problems to solve.

He came to my attention when Justin Tadlock wrote an article about a playful block that he’s created.

After a little further exploration, it turns out that Aki’s been busy in his spare time creating a range of blocks, all of them useful and all of them freely available in the WordPress plugin repository.

We start off by having a brief chat about what the WordPress scene is like in Japan. Is there a strong sense of community, and do in-person events take place?

We then move on to talk about how he became interested in creating blocks. Did he find it easy to understand the new skills required to get up and running and was there enough documentation to make speedy progress?

We spend the remainder of the podcast talking through the five blocks which Aki has put in the WordPress plugin repository. Often, they were created to scratch his own itch, to solve a problem that he faced in his work, but sometimes, as with his excellent Piano Block, it was just for fun and the challenge of trying something new.

The Piano Block aside, all of Aki’s blocks have an easy to understand purpose, and they take on a simple challenge, and solve it.

This is perhaps one of the main reasons that blocks are so interesting, they can be simple or complex, utilitarian or just fun.

It’s an interesting discussion, and you never know, perhaps you’ll find yourself using Aki’s blocks at some point yourself.

Useful links.

Block Editor Handbook

Create Block Package

Aki Hamano’s Github page

Flexible Spacer Block

Flexible Table Block

RichText Extension

Custom HTML Block Extension

Piano Block

Play the Piano and Other Instruments via the WordPress Block Editor

Transcript

[00:00:00] Nathan Wrigley: Welcome to the Jukebox podcast from WP Tavern. My name is Nathan Wrigley. Jukebox is a podcast which is dedicated to all things WordPress, the people, the events, the plugins, the blocks, the themes, and in this case, the building of useful blocks and making them freely available. If you’d like to subscribe to the podcast, you can do that by searching for WP Tavern in your podcast, player of choice. Or by going to WP tavern.com forward slash feed forward slash podcast. And you can copy and paste that URL into most podcast players as well.

If you have a topic that you’d like us to feature on the podcast. Well, I’m very keen to hear from you and hopefully get you, or your idea featured on the show.

Head over to WP tavern.com forward slash contact forward slash jukebox. And you can use the contact form there.

So on the podcast today, we have Aki Hamano. Aki is a freelance developer from Japan. He builds websites for clients and enjoys setting himself difficult problems to solve. He came to my attention when Justin Tatlock wrote an article on the Tavern. About a playful block he’d created, but more on that later.

After a little further exploration, it turns out that Aki’s been busy in his spare time, creating a range of blocks. All of them useful and all of them freely available in the WordPress plugin repository.

We start off by having a brief chat about what the WordPress scene is like in Japan. Is there a strong sense of community and do in-person events take place there?

We then move on to talk about how he became interested in creating blocks. Did he find it easy to understand the new skills required to get up and running? And was there enough documentation to make speedy progress?

We spend the remainder of the podcast talking through the five blocks, which Aki has put in the WordPress plugin repository. Often they were created to scratch his own itch, to solve a problem that he faced in his work. But sometimes, as with his excellent piano block, it was just for fun, and the challenge of trying something new.

The piano block aside. All of our keys blocks have an easy to understand purpose and they take on a simple challenge and solve it. This is perhaps one of the main reasons that blocks are so interesting. They can be simple or complex, utilitarian or just fun.

It’s an interesting discussion. And you never know, perhaps you’ll find yourself using Aki’s blocks at some point yourself.

If you’re interested in finding out more, you can find all the links in the show notes by heading over to WP tavern.com forward slash podcast. Where you’ll find all of the other episodes as well.

And so without further delay, I bring you, Aki Hamano.

I am joined on the podcast today by Aki Hamano. Hello Aki.

[00:03:35] Aki Hamano: Hello, Nathan.

[00:03:36] Nathan Wrigley: I am really pleased to have you on the podcast today. Real welcome to you. Aki is joining us today to talk largely about blocks. We’ve had a few conversations before this, trying to figure out what it is that we’re going to say. We’re going to talk mainly about Aki’s contribution to wordpress.org and the blocks that he’s created there.

First of all Aki would you just introduce yourself, tell us who you are and where you come from?

[00:04:06] Aki Hamano: Okay. I’m a web developer by living in Japan. And I built many website, for my client and recently, in my side project, I create some blocks, and published to wordpress.org plugin directory. It’s very fantastic.

[00:04:29] Nathan Wrigley: We will be talking about those blocks later. There’s many of them and some of them have a very serious purpose, as we’ll find out, and some of them are just for fun. So we’ll get into that in a moment. Before then, could you just tell us a little bit about the WordPress community in Japan? I confess I have never been to Japan, and I don’t know too many people in the WordPress community in Japan. So I’m just interested to hear what it’s like, how big it is. Are there any meetups? Anything like that?

[00:05:02] Aki Hamano: Ah, yes. Actually, we plan to create an event, WordPress Mega Meetup in May. And there is a lot of communities in Japan, and we are enjoying to contribute or talking about WordPress or create things. It’s very exciting in Japan.

[00:05:27] Nathan Wrigley: Do you have regular meetups spread throughout Japan? For example, in the UK, there are different meetups, usually in the big cities like Leeds and London and Manchester and so on. Do you have meetups in Japan as well?

[00:05:43] Aki Hamano: Actually, I don’t have a meetup, but the biggest meetup is WordPress Tokyo meetup. That’s the biggest communities.

[00:05:54] Nathan Wrigley: And are real world events happening at the moment, or like the rest of the world, are you doing virtual meetups because of COVID restrictions.

[00:06:04] Aki Hamano: Yes.

[00:06:05] Nathan Wrigley: Yeah, it’s all virtual, like it is here in the UK. Well, it’s nice to, nice to have you on the show. If anybody who is listening to this, is from Japan, we’d be most interested to hear from you and possibly get engaged in conversations about what people in Japan are doing with WordPress. But it’s nice to hear that you’ve got your Mega Meetup, hopefully coming out in May.

Let’s talk about your blocks. Well, before we get to your blocks, let’s talk about blocks in general. And I want to ask you the question, what is it that you like about blocks? Why do you find blocks to be exciting?

[00:06:41] Aki Hamano: I have a simple answer. I love to build the things, and I think it was similar to use Lego blocks. It’s very exciting, and I’m very excited to see on block editor when I create some little code on my editor. It’s a very, very fantastic, that’s all.

[00:07:05] Nathan Wrigley: Did you start to build blocks right at the beginning? Have you been doing it for years or is it more recent? Have you just been doing it for a year or two years or three years?

[00:07:17] Aki Hamano: Maybe three, maybe three years, and actually my first block plugin, Rich Text Extension. And WP Tavern posted an article about this plugin three years ago. That’s my first block.

[00:07:36] Nathan Wrigley: There’s quite a few more that have come down the pipe and we’ll get to those in just a moment. We’ll do them one at a time in a minute. I’m curious to know how difficult you found it. Was it very hard to learn the new skills required to build blocks? Did you find it straightforward or was it really challenged?

[00:07:57] Aki Hamano: Ah yes. I think it’s very, very hard. because we need to build codes and we need to learn another language, JavaScript, and framework reworked or NPM. I didn’t know why do we need to build the code because, for example, PHP works you know? I didn’t understand what does it mean to build. So, it was very difficult to understand the commands, new language and the build tools.

[00:08:33] Nathan Wrigley: Why did you make the effort? If it was really difficult, why did you persevere and why did you keep going with all of this difficult new technology, when it would have been easier just to carry on doing what you were always doing?

[00:08:49] Aki Hamano: So. I will learn from and Block Editor Handbook. There is many tutorials on there. It’s very useful document. I started to create blocks. And another example, there is a useful GitHub repository, Gutenberg Examples. There are many examples on the repository and I analyze these codes, and also, I deep dive into Gutenberg core code and core blocks. It’s hard to understand these codes, but it’s very useful for me to build the blocks.

[00:09:33] Nathan Wrigley: Do you think it’s easier now? If somebody was starting to build blocks today, do you think they would have an easier time? Are there more, tutorials, more documentation to make it easier than it was for you? Is it an easier thing?

[00:09:52] Aki Hamano: I want to recommend NPM package. So it’s a WordPress create block. The package creates a block plugin template and automatically install recommended script package. And with simple command, we can build plugin quickly. And if you change some codes in JavaScript, we can see the change on block editor. So first I want to recommend create block package.

[00:10:29] Nathan Wrigley: I will link to that in the show notes. So that’s the WordPress create block package.

[00:10:35] Aki Hamano: Yes.

[00:10:36] Nathan Wrigley: Are there any other tools that you have found useful? That could be things on your computer, software, or it could be resources, tutorials, or books or anything that you might have used. Is there anything which you think was really useful apart from the WordPress create block?

[00:10:55] Aki Hamano: There’s many tools but I use basic tools. For example, I use VS code. For local environments, I use WPM, that’s all.

[00:11:07] Nathan Wrigley: Just those two things?

[00:11:08] Aki Hamano: Yes.

[00:11:09] Nathan Wrigley: Now I played with your blocks over the last few days and there are five, I think, currently there. You can find Aki’s Github repository which has links to the public facing versions of them. Alternatively, you can also find them on wordpress.org, and I will, in the show notes, link to them individually. There are five and I’m going to go through them in order of my favorite. Not necessarily in order of how clever they are, or how brilliant they are, but just the ones that I like, because I could see a use for them. I’ve left probably the most, interesting one until the end, which is just fantastic fun, but I couldn’t see myself using it, so I’ve left it until the end.

But, first off, let’s talk about your flexible space of block. Now this, you will find on the wordpress.org repo as you will do for all of them. Tell us what this does. This is sublimely clever. It’s very, very cool.

[00:12:12] Aki Hamano: Yes. we know that core spacer block can create space, but only unit, and only one height. But I want to create multiple spacers, depends on window width. This plugin enables you to create three types spacer, for desktop and tablet and the mobile. And we can change the break points.

So breakpoints, it’s used to media queries and also I can create a negative space. So we can cross two blocks, and I need it, so I made it.

[00:12:55] Nathan Wrigley: Is that why? It was something you needed, and so you created it and then let it go into the repository? That’s very nice to hear.

[00:13:02] Aki Hamano: Okay, thank you.

[00:13:03] Nathan Wrigley: The interface, the way that the block works, is you obviously install it as a plugin in WordPress, and then you have an option, there’s a spacer option, which appears, a flexible spacer. And instead of the core block, which just has the spacer, Aki’s block gives you three different spacers in one.

So the interface shows you what the mobile spacer will do, what the tablet spacer will do, and what the desktop spacer will do. And they’re all there in the interface all at the same time. I can only say that you’ll get it if you install it. It’s difficult to explain, but the moment you actually have it on your website and you see the purpose of it, it’s brilliant. So rather than having the settings in the menu on the right, all of the settings are, well, certainly for the height, all of the height settings are actually right before you in a visual way, and then as Aki said, there’s the option to, create negative space. There’s a toggle switch and you can create negative space and then you can draw up your content to overlap with other blocks. It’s really nice. It works really, really well. Well done.

[00:14:11] Aki Hamano: Thank you.

[00:14:12] Nathan Wrigley: The next one that I want to talk about is probably I think the most installed of the five that we’re going to talk about. This is your flexible table block. And again, I will link in the show notes. Would you just quickly tell us what your flexible table block does?

[00:14:29] Aki Hamano: Ah, yes. The most great point is that we can create merged cells. Core table block doesn’t allow too merge cells. This burning can create many, many kinds of styles on each cells and it’s very easy to insert or delete row and column from bottom, top of the table. So I think you can create any kinds of a table.

[00:15:00] Nathan Wrigley: Yeah. So when you’re in Gutenberg, after you’ve installed the plugin, you get the option to add in a block, and in this case, you want to be picking the flexible table block. If you just search for table, you’ll get the option to insert it.

It’s got an icon with like a lightning bolt, and then it throws in a table, but the options there’s so many fantastic options. The most useful, I think of which as you said, is the ability to merge cells. So for example, if you put a three by three, three row and three column table in, you could merge all of the columns or the rows, or just a portion of them, and you can do that by clicking shift and selecting multiple cells at the same time. And then you click the little merge icon to make that happen.

But it also brings along a whole load of other possibilities. So there’s, there’s the option to obviously add in as many rows as you want in a intuitive UI, but there’s options to add in colors, uh, you can add in headers and footers to the table, you can add in widths of difference sizes and, you know, padding and margins and all of that. And then you’ve got options for captions as well, and topography options as well. It’s got a lot, basically. And it’s all done in a visual way and it just works. Now this must I’m imagining have taken quite a long time to create.

[00:16:23] Aki Hamano: Yes, it might be confused to create table, but we can create any kind of table. It’s my purpose.

[00:16:31] Nathan Wrigley: it’s really, really excellent. So again, if you go to the show notes, you’ll be able to find the flexible table block. And as Aki said, the main purpose there is just to, is to really, to be able to create any layout and merge different things. And you’ll see in the show notes on the wordpress.org repo, all of the different options and what have you. And it’s, it’s very comprehensive. Essentially, if you want a table to be displayed in almost any configuration, then the flexible table block is highly recommended.

My third pick is your rich text extension.

[00:17:05] Aki Hamano: Yes.

[00:17:07] Nathan Wrigley: Again really interesting. Tell us what this does.

[00:17:10] Aki Hamano: The plugin is my first plugin. I made it two or three years ago. Now Gutenberg enables you to create inline highlight, but, two or three years ago, we don’t have the function. So, I want to create, I want to highlight inline text, or I want to enable, I want to change the inline font size. So I made it.

[00:17:39] Nathan Wrigley: There’s a couple of options which become available. Essentially, you can highlight text in several different ways. So you could fully highlight in one color or another. So you could, for example, in the pre-installed version, when the plugin is installed, you get the option for yellow and red, but you can change those as you wish.

And you can either do full highlighting of the text, or you can do half highlighting and you can, you can specify how thick the highlighting is. So for example, if you wanted it to appear almost like an underline, it could highlight a bit like that. Or alternatively, you could just go full height and highlight the whole text, and you’ve got several options to switch different things on, rename the highlighting.

So you might like to rename it as bold red or something like that. And then you’ve also, got the, other option, which is to change the defaults for the size of your text. So you can have as many as four different options, and you can rename them, whatever you like. And you could have like an ultra small, a medium, a big, or a really big. Pick whatever names you like.

And then those are added into the Gutenberg editor, as options for changing the text size. So let’s say for example, that in the middle of a sentence, for some particular reason, you just wanted one word to be extremely big, you could do that with Aki’s rich text extension solution. And then of course you could highlight it as well.

There’s a settings menu, which enables you to fiddle with these things, but there is only one menu and everything that you need to interact with is in that one, simple menu. Does Gutenberg now do all that this one did?

[00:19:24] Aki Hamano: So highlighting inline text is able to create now via Gutenberg now. But to change in line text size, we can’t create now on Gutenberg.

[00:19:37] Nathan Wrigley: So it still, it still serves a purpose, it’s still useful. Just as an aside, how often do you go back and look at these plugins and update them. I can see, for example, that the flexible spacer block was updated two months ago and you’ve updated the flexible table block just one week ago.

Are you committed to keeping each of these going? Do you go back and look at them, all five of them regularly?

[00:20:05] Aki Hamano: Ah yes. So before WordPress major update, I check these plugins will work. Fix some issues, I want to add some new functions, yes.

[00:20:18] Nathan Wrigley: So you go back periodically and check them just to make sure each time WordPress Core is updated. That’s great. Thank you. Okay, next one, second to last one, is the custom HTML block extension. What does this do?

[00:20:37] Aki Hamano: There is block that we can create pure HTML, and we can create pure HTML to show on front-end. It’s a custom HTML block, but it’s very hard coding on block, because there is no text highlight and it’s difficult to add indent. So I want to create some codes in editor which are like VS Code. Actually, this plugin use VS Code Core library named Monaco editor. So we can write code like we coding on VS Code. It’s very similar to VS Code. It’s easy to create code.

[00:21:26] Nathan Wrigley: This feels like it was the most difficult to create. I could be wrong, but this one has so many different options in there.

[00:21:37] Aki Hamano: Yes.

[00:21:38] Nathan Wrigley: If you wish to create something on your website, which requires you to write some HTML, but the core HTML block doesn’t really highlight things or indent things in a way which makes it easy for you to understand, because you’re used to your IDE, VS code as you’ve described in this case or whatever you’re using.

This makes the HTML in Gutenberg look and feel just like it would do in your text, editor of choice. So things can be indented, things are highlighted, the font can be altered. You can customize it to look exactly how you prefer it.

And then when you click save and publish, everything is output on the front end just as HTML. So, all of that design is stripped away and it becomes HTML. You know, if you’ve got something in an H1 tag, it looks like an H1 on your website, depending on what your theme is telling that to do. Again, why did you build this?

[00:22:46] Aki Hamano: Why? So sometime I can’t create a layout with core block or other plugin. So sometime I need to write some code directly. And so I want to write code more easily.

[00:23:07] Nathan Wrigley: If you are familiar with using a text editor, then this will just be fantastic for you. You’ve got everything that you want. You can resize, you can use things like Emmet and what have you, and, you might be able to throw in a, the demonstration that you have here is a list item, sorry, a an ordered list and you add five items in using the Emmet shortcodes and five list items will appear and so on.

So it’s really for those people who want to put HTML into their WordPress posts or pages and want it to look like their IDE, something that they’re familiar with, something that they’re used to. And yeah, bravo, it’s a chore doing anything in the core block cause it doesn’t have enough similarity to what you’re used to doing on your Mac or PC. Okay. So we’ll recommend that one as well.

And last but by no means least. This is just genius. In fact, this is the one that alerted Justin Tatlock, I think to you, he maybe been following you before this, but this was the one that he wrote a piece about over on the WP Tavern, and I’ll link to that. This is, this is the piano block. I can tell you it does exactly what you think it’s going to do. It puts, it puts a piano inside of Gutenberg. Now, why, why do we need a piano inside Gutenberg? This is brilliant.

[00:24:33] Aki Hamano: First, I want to say it’s just fun. And maybe someone might say, what can they do with this plugin or, what does it mean. My purpose, my purpose to build these things is, enjoy to create. I want to try a potential, possibility of block editor..

I want to know what block editor can create, can explain, and also, I love music. I wanted to play music on book editor. It was crazy.

[00:25:09] Nathan Wrigley: Yeah, that’s something that I just find really interesting. The idea that it doesn’t have a purpose beyond learning how to use the block editor.

I would thoroughly encourage everybody to go and install this one one, and just put it somewhere and try it out. Basically what you get is a block and you add the piano block. It’s got a lovely, obvious icon. It’s probably the most obvious icon I’ve ever seen that clearly is a piano as an icon. And, you get, it looks like a couple of octaves, keys are all there. You’ve got keyboard shortcuts, so every key on the piano is mapped to a key on your keyboard.

So if you really wanted to, you could actually play on the keyboard. Alternatively, you can just hover over with your mouse and click on the key in question. You can increase the volume and decrease the volume. There’s the opportunity to choose from, I don’t know, it looks like about 12 different sounds.

So we’ve got an acoustic bass and electric guitar and organ, a regular piano, violin, harp, and xylophone and so on. And then there’s the addition of, there’s a toggle switch for those people who like to have sustain. So it turns the sustain pedal on and off. Now the only purpose is for fun.

[00:26:29] Aki Hamano: Yes.

[00:26:30] Nathan Wrigley: At the minute, it doesn’t go onto the front end though does it? If you publish this, that block will not appear on your website. It’s only in the editor itself. Now, why is that?

[00:26:43] Aki Hamano: My purpose is to play on block editor, not the front end. It’s the reason, and it was difficult to create piano on front end because this block made with React, and I don’t build React on front end now, but I think it is possible. In the future I may enable it.

[00:27:09] Nathan Wrigley: So at the minute, it’s not able on the front end because there’s gaps in the knowledge that you have. It’s built with React on the backend, and you’ve yet to figure out how to make that happen. Obviously with a project, as fun as this, it doesn’t necessarily have a purpose on the front-end and probably it’s not right at the top of your priority list.

I’ve got to say though, it’s got the least options, a lot of the other ones, for example the rich text extension that you have and the flexible table block, they’ve got lots of different options available to style the way things look and so on. The custom HTML block extension in particular has lots and lots of different options.

I’m imagining though that they were potentially easier to build than the piano block, because the piano block, It’s like a toy, it’s almost like a game built inside of the editor. So was the piano block, was that the most difficult to pull off because, you know, you’ve got all sorts of things happening.

You’re creating sounds at the moment that you click a button and those sounds have to be a particular octave. They have to add sustain and be generated by a different audio sound. I’m imagining, you know, depending on which instrument you’re manipulating. Was that the most challenging one to build?

[00:28:25] Aki Hamano: Uh, yeah. This plugin used web audio API, and web audio API is very, very complicated, but I use wrapper library, tone.js. It’s enabled to create sounds with small code. And most of the difficult things is to find good sounds, because this plugin used real audio sounds, each note.

[00:28:53] Nathan Wrigley: Oh wow, okay.

[00:28:55] Aki Hamano: I needed to find audio with GPL compatibility. It’s very difficult to find it.

[00:29:02] Nathan Wrigley: So, for example, if I play, I don’t know, an a on the acoustic piano and then play a D for example, then they are different audio files that you’re pulling out in order to render that sound?

[00:29:17] Aki Hamano: Yes.

[00:29:18] Nathan Wrigley: That’s really interesting. These are all free. Obviously the piano block is just something a bit different. It’s a bit of fun, but all of the other four that we mentioned, they’re all free and they all have a very useful application. Do you plan now that you’ve got all this experience, do you plan at any point to come out with any new blocks, any new things that we might hear about?

[00:29:43] Aki Hamano: Now, I have no idea, but I want to create block for full site editor. For example, I want to create block, inside the query loop block. For example, if the article was posted in a few days, we need a new level. So I’m planning to create a new level block. Or social network sharing link block.

[00:30:12] Nathan Wrigley: So you’ve got a couple planned for the future. This must take a lot of time. And although you described earlier that you’ve been doing this so that you can learn, and in some cases you needed something to be done, presumably for your websites. Do you plan on creating revenue, charging, having a pro version of any of these, or are they always going to be freely available on the repo?

[00:30:41] Aki Hamano: So, I want to create these plugins for free. It depends on WordPress philosophy. No, I don’t think because I get money from my own work. So these plugins don’t need money. I want create these plugins for free in the future.

[00:31:01] Nathan Wrigley: That’s absolutely fantastic to hear. I love the fact that you’ve created so many free plugins and they’re so different from each other. If anybody wanted to reach out to you and talk about these different blocks that you’ve created, what’s the best way? That could be an email or it may be a Twitter account or perhaps Slack. What’s the best way to get in touch with you Aki?

[00:31:25] Aki Hamano: If you love these plugins, please follow my Twitter account, or please send and direct message. Or please check my Github repositories.

[00:31:36] Nathan Wrigley: I will link to all of those. The accounts for Github, the Twitter account, I will link to in the show notes. So yeah, if you want to reach out to Aki and express your gratitude, or just have any questions, then be sure to check out the show notes on the WP Tavern website.

Thank you for joining us on the podcast today. I really appreciate it.

[00:32:00] Aki Hamano: Me too. Thank you.

Posted on

Data Analysis Using Google Cloud Data Studio

Introduction

Google Cloud Data Studio is a tool for transforming data into useful reports and data dashboards. As of now, Google Data Studio has 22 inbuilt Google Connectors and 571 different Partner connectors which help in connecting data from BigQuery, Google Ads, Google Sheets, Cloud Spanner, Facebook Ads Data, Adobe Analytics, and many more. 

Once the data is imported, reports and dashboards can be created by a simple drag and drop and using various filter options. Google Cloud Data Studio is out of the Google Cloud Platform, which is why it is completely free. 

Posted on

Best Status Page Examples: Advanced Customization, Design, and Incident Reports

This post is originally published on Designmodo: Best Status Page Examples: Advanced Customization, Design, and Incident Reports

Best Status Page Examples: Advanced Customization, Design and Incident Reports

Expect companies to embrace transparency in platforms to reinforce relationships with the digital crowd and improve their positions in the market this year. Information such as system metrics, incident data, maintenance calendars, and even the status of the hosting provider …

For more information please contact Designmodo

Posted on

Portfolio Architecture Examples: Finance Collection

This article is a continuation of a series of posts about our project named Portfolio Architectures. A previous post, Portfolio Architecture Examples: Healthcare Collection, begins with a project overview, introduction, and examples of tooling and workshops available for the project.  You may want to refer back to that post to gain insight into the background of Portfolio Architectures before reading further.

Finance Collection

The collection featured today is centered around architectures in the financial services industry. There are currently two architectures in this collection. We'll provide a short overview of each, leaving the in-depth exploration as an exercise for the reader.