DEV Community: Akhil Jay

Looking for feedback: Tired of spending hours setting up the infra for open sourced tools?

Akhil Jay — Thu, 30 Jun 2022 14:48:21 +0000

Hi, I recently heard a lot of developers complain about how much time it takes to setup open source tools like Metabase or sentry within their infrastructure. Hence wanted to do a dipstick survey with this community as well to see if it's a large enough problem worth solving for?

If you believe this is a problem please feel free to fill this form up https://my.forms.app/form/62bdab12bd94a175bbbacfdc , it will help me shape my thinking around how to solve for this.

Testing new frontend performance optimizations using WPT

Akhil Jay — Sat, 25 Apr 2020 11:08:15 +0000

Couple of days back I was trying to figure out how to test and evaluate the impact of new performance optimizations without having to make server side changes. The optimization that came to mind was Addy Osmani's quicklink library. The question is how can one test this library on their page without having to go through a server side change to the base page HTML file.

Webpagetest to the rescue !

Webpagetest(WPT) scripts are extremely powerful to setup a user flow for testing and you have the ability to inject JavaScripts into the page. So below are the steps on how you can leverage the quicklink library to test how much of an improvement you can see for your website.

Setting up the prototype via wpt scripts

In order to use the quicklink library on your page, you will need to first download the file, then inject it into the page and then initialize it. Below is the script that does just that.

var script = document.createElement('script'); 
script.type = 'text/javascript'; 
script.onload = function () {
quicklink.listen(); quicklink.prefetch(['https://www.foo.com/product1']); 
}; 
script.src = 'https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0-alpha/quicklink.umd.js'; 
document.getElementsByTagName('body')[0].appendChild(script);

The first thing you need to do is remove line breaks and include it as one single line.

var script = document.createElement('script'); script.type = 'text/javascript'; script.onload = function () {quicklink.listen(); quicklink.prefetch(['https://www.foo.com/product1']); }; script.src = 'https://cdnjs.cloudflare.com/ajax/libs/quicklink/2.0.0-alpha/quicklink.umd.js'; document.getElementsByTagName('body')[0].appendChild(script);

The second thing you need to do is to verify if the script is doing what it needs to. In my case I needed this script to be injected right before the close of the

Would you pay for this service?

Akhil Jay — Tue, 30 Jul 2019 23:21:50 +0000

Objective

Trying to identify if developers would pay money to solve the 3 problems outlined below

Problem 1: Multi-Cloud and Multi-CDN

Every organization today uses multiple services like cloud, cdn, storage, etc. today but there is no one solution to give them the ability to view and manage all these services within one window
Large Tier Customers: Multiple Cloud Vendors are currently being used by large organizations to host and run their services
Mid/Small Tier Customers: Even though developers in small/mid-tier customers use only 1 CDN they usually have a need to integrate their CDN with other services they have like load-balancing, code deploys, etc.

Problem 2: Multiple authentication types and different API services

Every service provider has their own API endpoints and different authentication types. Users often have to write code to integrate with each of these API endpoints and setup code for each of these authentication types.

Below are a list of example services and their corresponding API signing methods

a) Akamai has EdgeGrid authentication system with a custom base API Url and time generated Authorization header
b) Fastly has a key header called "Fastly-Key" that needs to be passed along with their API endpoint, in order to get the token they have the ability to create one based on an OTP service. All API starts with https://api.fastly.com
c) Cloudflare has a simple Key Header called "X-Auth-Key" and "X-Auth-Email" that they need to add to the API request. All API starts with https://api.cloudflare.com
d) AWS has a similar setup to Akamai where you to sign API requests using the HTTP authorization header

Problem 3: Service chaining these services

Service chaining multiple services is a need but there isn't a tool today that lets a user do this.

We have services like IFTTT and other tools that allow users to tie multiple applications in an IF-THEN condition, but there is no tool/service in the market that allows you to create this for your DevOps needs.

Potential Solution

Imagine if you could create a "codeblock" for each service you wish to call and then chain them together to create a "recipe". Each published recipe could be accessed and executed via an API or via a UI.

For example - If a user wishes to load balance traffic between AWS and GCP based on the cost of running compute, then the user could create a codeblock that calls the budget/cost API for both AWS and GCP and then based on a threshold update the load balancer weights to shift traffic around.

How much would this cost? The cost of running the recipe above will be free on this new platform, but if you wish to make the recipe private or share it with team members then we may charge you a small fee (possibly less than $10/month/per-user)

Feedback Section

Please comment below on why you don't or do like this solution or if there are other existing systems that do this today then feel free to provide a link.

Simple Redirector for ad publishers

Akhil Jay — Tue, 30 Jul 2019 15:55:31 +0000

Premise

Retail owners publish and push ads that consist of news articles and blogs that talk about their products.

For example - Uber Eats could create an ad with a Forbes article that talks about how great uber eats is.

Problem

Retail owners are unable to track users who have clicked on these ads when the ad content itself is for third party site.

For example - As the owner of Uber Eats I would like to ensure that I know when a user who has clicked on these ads visit my site so I can either target them with better pricing or better offers.

Solution

DIY method (Cheapest Option): Create a CF worker that allows you to drop a cookie along with a redirect so you can track the cookie when a particular user visits your site
Paid Solution(A tad bit expensive): It's possible that Third-Party tools offer the same solution but they usually have a lot more other services that might not be required.

CloudFlare Worker Solution

Three parts to the worker solution

a) Find a query string parameter within the incoming URL. Credits to Emedara for the code snippet

//function to handle the request
async function handleRequest(request) {
  const url = request.url
    // Function to parse query strings
    function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, '\\$&')
        name = name.replace(/\//g, '')
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url)
        if (!results) return null
        else if (!results[2]) return ''
        else if (results[2]) {
            results[2] = results[2].replace(/\//g, '')
        }
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

b) Find final destination url and campaign cookie you set within the ad CTA url

// Using the function getParameterByName to extract finalurl
var finalURL = getParameterByName('finalurl')
console.log(finalURL)

//conditionally add a campaign cookie you wish to add to the url 
var utmcookie = getParameterByName('utm_camp')
var utmcookiedomain = 'campagincookie='+ utmcookie + '; Domain=redirect.akhil.workers.dev; Max-Age=40000'
console.log(utmcookie)

c) Issue the redirect to the final destination with the set-cookie parameter

//issue the redirect 
return new Response('', {
  status: 302,
  headers: {
    Location: finalURL,
   'Set-Cookie':utmcookiedomain,
  }
 })

Full Code


addEventListener('fetch', async event => {
  event.respondWith(handleRequest(event.request))
})

//function to handle the request
async function handleRequest(request) {
  const url = request.url
    // Function to parse query strings
    function getParameterByName(name) {
        name = name.replace(/[\[\]]/g, '\\$&')
        name = name.replace(/\//g, '')
        var regex = new RegExp('[?&]' + name + '(=([^&#]*)|&|#|$)'),
            results = regex.exec(url)
        if (!results) return null
        else if (!results[2]) return ''
        else if (results[2]) {
            results[2] = results[2].replace(/\//g, '')
        }
        return decodeURIComponent(results[2].replace(/\+/g, ' '));
    }

    // Using the function getParameterByName to extract finalurl
    var finalURL = getParameterByName('finalurl')
    console.log(finalURL)

//conditionally add a campaign cookie you wish to add to the url 
var utmcookie = getParameterByName('utm_camp')
var utmcookiedomain = 'campagincookie='+ utmcookie + '; Domain=*.akhil.workers.dev; Max-Age=40000'
console.log(utmcookie)
//issue the redirect 
  return new Response('', {
            status: 302,
            headers: {
            Location: finalURL,
            'Set-Cookie':utmcookiedomain,
      }
        })

}

Final Solution

https://redirect.akhil.workers.dev?finalurl=<<Enter Final URL for the arctile>>&utm_camp=<<Enter the cookie you want to set>>

Example Link: https://redirect.akhil.workers.dev?finalurl=https%3A%2F%2Ftimesofindia.indiatimes.com%2Ftrend-tracking%2Fev-startups-crank-up-efforts-as-segments-mood-turns-electric%2Farticleshow%2F70416317.cms&utm_camp=akhilcookie

How many use Github Actions and Why?

Akhil Jay — Mon, 22 Jul 2019 04:52:55 +0000

I am really curious to know if devs and QA engineers like to create functional and executable code blocks in a web app versus writing it as a python script?

For example, if I was a developer using GCP-APJ and AWS-US-east for storing images, then I will have to create a script internally that hooks into both these cloud vendor APIs to perform similar functional things like uploading new content, deleting images, etc.

Question for the group here:
a) As a developer would you use a system like Github Actions to do this? if yes, why?
b) if you don't intend to use Github Actions, then what other use-cases would you use Github actions for?

How many devs here use Akamai?

Akhil Jay — Wed, 05 Jun 2019 16:48:57 +0000

Wondering if it’s worth sharing developer stories I have heard about operationalizing CDN changes within a dev stream?

What developer problems is Github Actions solving?

Akhil Jay — Tue, 28 May 2019 04:35:36 +0000

I recently stumbled upon Github Actions and wondering who is it for and why would they use it? Don't all developers and SREs already use existing internal tools to setup automation tasks. What's the benefit for having it on Github Actions

https://github.com/features/actions