DEV Community: Luke

Marking up FAQ's with Schema.org

Luke — Mon, 06 Sep 2021 19:03:28 +0000

I recently built UKAreaCodes.info as an experiement in deploying apps to Digital Ocean's App Platform.

In this article I'm going to breifly explain how I utilised the Rich Snippets / Structured Data FAQ's (Frequently Asked Questions) Schema to display in SERPS.

The schema amongst others is defined by schema.org and allows the following search enhancement

An "accordion" of your question and answer directly on Googles SERP.

To obtain this you simply need to add a JSON snippet like the example here.

<script type="application/ld+json">
    {
        "@context": "https://schema.org",
        "@type": "FAQPage",
        "mainEntity": [{
            "@type": "Question",
            "name": "Can you find out who called me from this number?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "<p>Often we get asked whether we can identify callers by their phone number, whislt some sites offer this functionality we do not at this point, it may be added in future. We simply help you identify the geographic location the call originated from.</p>"
            }
        }, {
            "@type": "Question",
            "name": "Why does UK Area Codes site exist?",
            "acceptedAnswer": {
                "@type": "Answer",
                "text": "We created UKAreaCodes.info to help people look up area code locations for number that are calling them."
            }
        }]
    }
</script>

Deploying a "serverless" app

Luke — Wed, 18 Aug 2021 16:05:41 +0000

Background

So last night I decided to deploy a serverless app that generates some number of random words.

AWS Services

Route53
Lambda
API Gateway
S3 Storage
Cloudfront Cache
Certificate Manager

First up, this isn't a tutorial as there are plenty of those about and I wanted to share a more high level description of the various AWS services used and how they all linked together in my example deployment.

So first off the example app, its a very simple react app that takes a user given number of random words to return and a time setting as to how frequently those words should be updated.

This react app is deployed at justrandom.net a domain name configured via Route53

This app is being served from an S3 Bucket, via Cloudfront using an AWS managed SSL Certificate.

When the app is set to fetch some random words, every 5, 15 or 30 seconds, it sends a request to an API Gateway this request is then passed to a Lambda function, which is written in Javascript.

This Lambda function returns a JSON response containing the requested number of random words back to the API Gateway

This is then returned to the waiting react app, and all in less than 40ms in most cases!

Adding a dynamic favicon with users scroll percentage

Luke — Wed, 16 Dec 2020 14:53:28 +0000

See the effect here

I decided to set myself the challenge of updating a favicon dynamically to show the users percentage scroll through the page.

First up, we introduce a function to generate an SVG as a data URL (which we will use for the favicon)

const faviconHref = (value) => {
    return `data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 width=%22256%22 height=%22256%22 viewBox=%220 0 75 75 %22 fill=%22white%22><text x=%2250%%22 y=%2250%%22 dominant-baseline=%22central%22 text-anchor=%22middle%22 font-size=%2258%22 stroke=%22black%22 fill=%22white%22>${value}</text></svg>`;
};

This function will take an input value and return a corresponding SVG (as a data URL) with the "value" text drawn on it.

The next step is to introduce a function to update the favicon in the page header.

const changeFavicon = (favicon) => {
    if (typeof window === 'undefined') {
        return;
    }
    const link = window.document.querySelector("link[rel*='icon']") || window.document.createElement('link');
    link.type = 'image/svg+xml';
    link.rel = 'shortcut icon';
    link.href = faviconHref(favicon);

    window.document.getElementsByTagName('head')[0].appendChild(link);
};

Next we introduce a function to calculate the users sroll and change the favicon using the above functions.

const calculateScroll = () => {
    const parent = document.body.parentNode;
    let percentage =
        ((document.body.scrollTop || parent.scrollTop) /
            (parent.scrollHeight - parent.clientHeight)) *
        100;

    percentage = Math.round(percentage);

    changeFavicon(percentage);
};

Here we are calculating the users scroll percentage of distance down the page and passing that percentage into the changeFavicon function, which in turns renders an SVG of the passed percentage value.

Finally we need to attach a window Event Listener that will call our calculateScroll function when a users scrolls as well as make an initial call to the function when the script is loaded.

window.addEventListener('scroll', calculateScroll);

//  initial call

calculateScroll();

The above functions can be added to an HTML page, such that when a user scrolls it will update the favicon

Streaming large file downloads in Laravel.

Luke — Fri, 13 Dec 2019 11:04:13 +0000

Background

In my role as a developer at Reviews.io we often have customers who want to export large datasets from our Dashboard. Large dynamic file downloads can be problematic as they introduce the scope for memory exhaustion.

One way in which we tackle this issue is by streaming our file downloads using Laravel's Response Streaming.

Streamed Downloads

Sometimes you may wish to turn the string response of a given operation into a downloadable response without having to write the contents of the operation to disk. You may use the streamDownload method in this scenario. This method accepts a callback, file name, and an optional array of headers as its arguments

The code

Let's start by declaring a route to get our download file from, I've opted to make the file retrievable by making a get request to /download with an optional number of rows we want the file to contain.

<?php

Route::get('download/{rows?}', ['uses' => 'StreamedDownloadController@download']);

Now we need to implement our Controller Method download

N.B. I'm using Faker here to generate the data, in reality this would be fetched from a database but the idea is essentially the same.

First of we need to define the method on our controller.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use Faker;

class StreamedDownloadController extends Controller
{
    public function download($rows = 50000)
    {

We've specified a default value for the number of rows we want to write out to the file.

        // callback function that writes to php://output
        $callback = function() use ($rows) {

        // Open output stream
        $handle = fopen('php://output', 'w');

        // Add CSV headers
        fputcsv($handle, [
            'Name',
            'Address', 
        ]);

        // Generate a faker instance
        $faker = Faker\Factory::create();

        // add the given number of rows to the file.
        for ($i=0; $i < $rows ; $i++) { 
            $row = [
                $faker->name,
                $faker->address,
            ];
            fputcsv($handle, $row);
        }


        // Close the output stream
        fclose($handle);
    };

This is the callback method that will process writing the file out to the php:output buffer.

Next up we specify the Content-Type so that the browser knows what format the file is supposed to be in.

    // build response headers so file downloads.
    $headers = [
        'Content-Type' => 'text/csv',
    ];

And finally we return a streamDownload() response, that executes the callback, writing the generated file out.

    // return the response as a streamed response.
    return response()->streamDownload($callback, 'download.csv', $headers);
    }
}