DEV Community: baran

Gratitude, ambition and under-achieving

baran — Thu, 02 Nov 2023 23:12:01 +0000

Ever since a child, my parents always told me to be grateful for what we have and that we're lucky and there are people with a lot less than we have. This is solid advice and something I've always tried to keep in mind. I would say I'm an ambitious person and with that, I often balance feelings of gratefulness with ambition.

A year or so ago I also stumbled upon a book called "The Unfair Advantage: How You Already Have What It Takes to Succeed" - by Ash Ali and Hasan Kubba. The premise of the book is that we all have unfair advantages that take shape in various forms. For example for myself, living in London, having a degree, being a native English speaker and so on. The concept of the book is eye-opening and one that's stuck with me for the past year.

While the concept has stuck with me for a while, it's not always been motivating. Sometimes it's been quite the opposite. I've found myself thinking, "I'm so lucky, I should be doing more with my life". This is where my biggest fear comes in. I'm scared that I'm not doing enough with my life. I'm scared that I'm not making the most of my unfair advantages and with that my potential. Not reaching my potential I think about often. I suppose it stems from being younger and seeing football players with huge potential not making it to the top for whatever reason. The feeling of everyone backing you, wanting you to do well but you disappointing them by not reaching the heights everyone had in mind. This is the very feeling I'm afraid of. It might seem like this is societal pressure, but I believe it's deeper than that. It's the promise and the internal battle of knowing I could have done more that scares me. I don't want to look back in 30 years and think I could have tried harder or done more. I want to look back and know I gave it my all.

Taking down a revenue-generating component

baran — Thu, 28 Sep 2023 21:03:12 +0000

I've taken down production at Sky before, a revenue-generating component.

Specifically, the component for processing and fulfilling orders from skystore.com.

We were in the process of migrating this component from eu-west to eu-central and unbeknownst to me I thought we were ready to go ahead with deleting the cluster in eu-west... we definitely weren't.

The repo was already configured to deploy to eu-central and all references to eu-west had been deleted. There were no references to eu-west anywhere, apart from the remaining k8s production pods.

Luckily we have a docker registry that an engineer on our team knew how to use to find a deployment of the production pods on eu-west so we could rectify my mistake.

Production was down for a good 20 hours or so in which we had amassed 25+ orders worth about £300 on the queue.

Definitely a learning experience. Made me realise it's not a bad thing to slow down from time to time and understand the consequences of my actions.

How to get YouTube video transcripts with Python

baran — Sat, 15 Jan 2022 10:13:45 +0000

Why not just watch the video?

One night, when I was deciding what to create for my final year project, I decided to go to YouTube and watch a video. It was a long video, and after I'd finished watching it, I couldn't even remember the beginning of it. Ever felt the same? I looked at the transcript menu YouTube provides and it was so clunky to navigate through it as it assigns timestamps to each line.

Here is where my solution comes in. I wanted a way to get the transcript of a video without having to be on YouTube. This way I could make notes easier and I wouldn't have to keep going back to the video and skipping around to find what I'm looking for.

Creating the solution

I'd heard of Selenium and headless browsers in the past but didn't really know what they were. I had a play around with Selenium using Python and I was surprised at how simple it was to get it doing simple things on the internet, such as clicking buttons.

Within an hour, I could accept cookies and open the transcript menu on YouTube. This had me pondering whether I could solve captcha's, maybe with some Machine Learning to work out what's it asking to do? Nevermind. I guess that's for another day.

Once I had the transcript menu open, I extracted the information from the page. From my time at university, I'd used BeautifulSoup4 before. It's a Python library that can scrape the web and parse HTML. I used it in this context to extract the transcript from the page. After getting the transcript, I saved it to a text file.

As I'm writing this, I've just had the idea of using the NotionAPI to save it to Notion. I'll probably do that after finishing this write up actually, seems like a good idea.

Using the script

I put the script up on GitHub as a gist. It's available here: https://gist.github.com/baranbbr/7bbefe30cf7783fd392043d3e7e98fc5.

To get it running yourself, you'll need to install the following packages:

Selenium
Selenium driver (of your choice, I used Firefox; if you use something different, you'll need to specify it in the code)
BeautifulSoup4

Then, of course, you'll need to edit the script to point to the YouTube video of your choice.

Important side note, this only works with YouTube videos that have a transcript.

I'm trying to get a software developer job.
If you're also looking for your first role, join me.

Conclusions

This is a very crude way of doing things and I realise that. There's a lot of scope for improvement. Considering it took me a couple of hours to get working, I think it's a decent starting point, and ultimately, it works for now. I have a feeling that it'll stop working as soon as YouTube changes the UI even a little bit, but I guess we'll see with time.

Why your environment variable doesn't work in production.

baran — Mon, 10 Jan 2022 00:29:13 +0000

There are many reasons why your environment variable might not work in production. Maybe it works in development, but not in production? There's a lot of room for error. This article should help you understand why your environment variable might not work in production.

Valid formatting and structure for environment variables

ENV_VARIABLE_NAME='value'

The standard for setting environment variables is to format the variable name to be all uppercase with underscores between words. Notice how there's no whitespace between the variable name and the value. The variable name is proceeded by an equals sign, then comes the value for the variable. The value should be surrounded by single or double quotes. Often the hosting provider will deal with this, meaning you won't need to add any quotes. But if you do, you can use single or double quotes.

Environment variables are structured this way due to their original use in the Bash programming language, where for example even whitespace is a significant part of the syntax.

Case 1 - Environment variable is not set

This is the best-case scenario. If the environment variable is not set, it can be set however the best practice is to set it with the hosting provider you're using.

For example with Vercel, you go to your project, to Settings and then Environment Variables. You can set the environment variable there.

It's also important to note that after you set the environment variable, you will likely need to restart your project (often done by redeploying it) to allow your hosting proivder to use it in your project.

Case 2 - Environment variable is set, but incorrectly

The second best-case scenario is if the environment variable is set, but the value is incorrect. This can obviously be fixed by changing it to the correct value. But, the correct value is not always so clear. Should you be using quotes, single quotes perhaps, or none at all? It can be a little tricky to figure out what the correct format is.

As mentioned earlier, environment variables are very sensitive to any extra characters, including whitespace. From past hours of debugging, even a carriage return character (which is invisible may I add) which may exist at the end of the variable, can result in the environment variable not being correct. It's genuinely that strict.

CORS Errors (honorable mention)

CORS errors are caused entirely by the backend. To follow best practise, you should not be trying to fix CORS errors by using funky scripts or front-end workarounds. CORS is an important browser security feature, it's made to protect against malicious attacks.

Final thoughts

As explored here, environment variables can sometimes be a bit of a mystery. They might not always be set correctly, and when they don't work, it can be tricky to figure out why. Hopefully by reading this post it's helped you to figure out why your environment variables weren't working.

Setup Custom domains for your Notion pages for free (using Cloudflare)

baran — Tue, 19 Oct 2021 13:12:03 +0000

Things you need
Cloudflare Setup and DNS Settings
- Change the default DNS server of your domain provider
Cloudflare workers
Setup the route for the worker

Things you need

In order to follow this tutorial you need:

Your own domain name (I'd recommend porkbun.com)
Access to the domain names DNS settings
Cloudflare.com account (no credit card or any payment required)
Notion Page that's set to public To set your Notion page to public click Share at the top of the page and click Share to web. ---

Cloudflare Setup and DNS Settings

Cloudflare is often used as a content-delivery network (CDN), essentially it serves content to websites and has tools in place to protect your website, such as if it's under a DDoS attack.

What we need to do on Cloudflare is use the Workers feature which will forward incoming requests from users to your public Notion page, we'll get onto this in a bit.

Assuming you've registered on Cloudflare, you now need to add your domain to it. Here's how to do that:

Click add site on the top right
Choose the free plan.
Copy the nameservers Cloudflare provides. Usually something like craig.ns.cloudflare.com (it's important you copy the ones Cloudflare provides for you).

Change the default DNS server of your domain provider

This step will vary depending on your domain provider, however you have to change from your providers default DNS nameservers to the ones Cloudflare provided you with.

For example here's a tutorial for cPanel - link to tutorial be warned it's very wordy but the main bit you need starts with "How Do I Change Nameservers in cPanel?" I'd suggest using CTRL + F to go straight to that heading.

Note that when you change your DNS servers it can take a while for the changes to take place, worst case scenario it can take up to 24 hours (usually an hour or two maximum though).

Cloudflare worker

This is where the fun begins and it gets a little techinical. On the Cloudflare website click Workers at the top and then Manage Workers, then Create a worker.

There's a website up here (https://fruition-git-fork-benfoxall-patch-1-stephenou.vercel.app/) which generates the code you need for this. It may or may not be available when you're reading this, if not I have put the current working code below.

The code you need is below, you do not need to know how it works or what it's doing. All you need to do it change the domain for MY_DOMAIN to your domain and put your Notion pages ID into where it says '771ef...' for example in the image I put of my Notion page above my page ID starts with 79c87fe54... you need to keep the single quotes (these things - ').

/* CONFIGURATION STARTS HERE */

/* Step 1: enter your domain name like fruitionsite.com */
const MY_DOMAIN = "fruitionsite.com"

/*
 * Step 2: enter your URL slug to page ID mapping
 * The key on the left is the slug (without the slash)
 * The value on the right is the Notion page ID
 */
const SLUG_TO_PAGE = {
  "": "771ef38657244c27b9389734a9cbff44",
}

/* Step 3: enter your page title and description for SEO purposes */
const PAGE_TITLE = ""
const PAGE_DESCRIPTION = ""

/* Step 4: enter a Google Font name, you can choose from https://fonts.google.com */
const GOOGLE_FONT = ""

/* Step 5: enter any custom scripts you'd like */
const CUSTOM_SCRIPT = ``

/* CONFIGURATION ENDS HERE */

const PAGE_TO_SLUG = {}
const slugs = []
const pages = []
Object.keys(SLUG_TO_PAGE).forEach(slug => {
  const page = SLUG_TO_PAGE[slug]
  slugs.push(slug)
  pages.push(page)
  PAGE_TO_SLUG[page] = slug
})

addEventListener("fetch", event => {
  event.respondWith(fetchAndApply(event.request))
})

function generateSitemap() {
  let sitemap = '<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">'
  slugs.forEach(
    slug =>
      (sitemap +=
        "<url><loc>https://" + MY_DOMAIN + "/" + slug + "</loc></url>")
  )
  sitemap += "</urlset>"
  return sitemap
}

const corsHeaders = {
  "Access-Control-Allow-Origin": "*",
  "Access-Control-Allow-Methods": "GET, HEAD, POST, PUT, OPTIONS",
  "Access-Control-Allow-Headers": "Content-Type",
}

function handleOptions(request) {
  if (
    request.headers.get("Origin") !== null &&
    request.headers.get("Access-Control-Request-Method") !== null &&
    request.headers.get("Access-Control-Request-Headers") !== null
  ) {
    // Handle CORS pre-flight request.
    return new Response(null, {
      headers: corsHeaders,
    })
  } else {
    // Handle standard OPTIONS request.
    return new Response(null, {
      headers: {
        Allow: "GET, HEAD, POST, PUT, OPTIONS",
      },
    })
  }
}

async function fetchAndApply(request) {
  if (request.method === "OPTIONS") {
    return handleOptions(request)
  }
  let url = new URL(request.url)
  url.hostname = "www.notion.so"
  if (url.pathname === "/robots.txt") {
    return new Response("Sitemap: https://" + MY_DOMAIN + "/sitemap.xml")
  }
  if (url.pathname === "/sitemap.xml") {
    let response = new Response(generateSitemap())
    response.headers.set("content-type", "application/xml")
    return response
  }
  let response
  if (url.pathname.startsWith("/app") && url.pathname.endsWith("js")) {
    response = await fetch(url.toString())
    let body = await response.text()
    response = new Response(
      body
        .replace(/www.notion.so/g, MY_DOMAIN)
        .replace(/notion.so/g, MY_DOMAIN),
      response
    )
    response.headers.set("Content-Type", "application/x-javascript")
    return response
  } else if (url.pathname.startsWith("/api")) {
    // Forward API
    response = await fetch(url.toString(), {
      body: url.pathname.startsWith("/api/v3/getPublicPageData")
        ? null
        : request.body,
      headers: {
        "content-type": "application/json;charset=UTF-8",
        "user-agent":
          "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_12_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.163 Safari/537.36",
      },
      method: "POST",
    })
    response = new Response(response.body, response)
    response.headers.set("Access-Control-Allow-Origin", "*")
    return response
  } else if (slugs.indexOf(url.pathname.slice(1)) > -1) {
    const pageId = SLUG_TO_PAGE[url.pathname.slice(1)]
    return Response.redirect("https://" + MY_DOMAIN + "/" + pageId, 301)
  } else {
    response = await fetch(url.toString(), {
      body: request.body,
      headers: request.headers,
      method: request.method,
    })
    response = new Response(response.body, response)
    response.headers.delete("Content-Security-Policy")
    response.headers.delete("X-Content-Security-Policy")
  }

  return appendJavascript(response, SLUG_TO_PAGE)
}

class MetaRewriter {
  element(element) {
    if (PAGE_TITLE !== "") {
      if (
        element.getAttribute("property") === "og:title" ||
        element.getAttribute("name") === "twitter:title"
      ) {
        element.setAttribute("content", PAGE_TITLE)
      }
      if (element.tagName === "title") {
        element.setInnerContent(PAGE_TITLE)
      }
    }
    if (PAGE_DESCRIPTION !== "") {
      if (
        element.getAttribute("name") === "description" ||
        element.getAttribute("property") === "og:description" ||
        element.getAttribute("name") === "twitter:description"
      ) {
        element.setAttribute("content", PAGE_DESCRIPTION)
      }
    }
    if (
      element.getAttribute("property") === "og:url" ||
      element.getAttribute("name") === "twitter:url"
    ) {
      element.setAttribute("content", MY_DOMAIN)
    }
    if (element.getAttribute("name") === "apple-itunes-app") {
      element.remove()
    }
  }
}

class HeadRewriter {
  element(element) {
    if (GOOGLE_FONT !== "") {
      element.append(
        `<link href="https://fonts.googleapis.com/css?family=${GOOGLE_FONT.replace(
          " ",
          "+"
        )}:Regular,Bold,Italic&display=swap" rel="stylesheet">
        <style>* { font-family: "${GOOGLE_FONT}" !important; }</style>`,
        {
          html: true,
        }
      )
    }
    element.append(
      `<style>
      div.notion-topbar > div > div:nth-child(3) { display: none !important; }
      div.notion-topbar > div > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(5) { display: none !important; }
      div.notion-topbar > div > div:nth-child(6) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(3) { display: none !important; }
      div.notion-topbar-mobile > div:nth-child(4) { display: none !important; }
      div.notion-topbar > div > div:nth-child(1n).toggle-mode { display: block !important; }
      div.notion-topbar-mobile > div:nth-child(1n).toggle-mode { display: block !important; }
      </style>`,
      {
        html: true,
      }
    )
  }
}

class BodyRewriter {
  constructor(SLUG_TO_PAGE) {
    this.SLUG_TO_PAGE = SLUG_TO_PAGE
  }
  element(element) {
    element.append(
      `<div style="display:none">Powered by <a href="http://fruitionsite.com">Fruition</a></div>
      <script>
      window.CONFIG.domainBaseUrl = location.origin;
      const SLUG_TO_PAGE = ${JSON.stringify(this.SLUG_TO_PAGE)};
      const PAGE_TO_SLUG = {};
      const slugs = [];
      const pages = [];
      const el = document.createElement('div');
      let redirected = false;
      Object.keys(SLUG_TO_PAGE).forEach(slug => {
        const page = SLUG_TO_PAGE[slug];
        slugs.push(slug);
        pages.push(page);
        PAGE_TO_SLUG[page] = slug;
      });
      function getPage() {
        return location.pathname.slice(-32);
      }
      function getSlug() {
        return location.pathname.slice(1);
      }
      function updateSlug() {
        const slug = PAGE_TO_SLUG[getPage()];
        if (slug != null) {
          history.replaceState(history.state, '', '/' + slug);
        }
      }
      function onDark() {
        el.innerHTML = '<div title="Change to Light Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgb(46, 170, 220); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(12px) translateY(0px);"></div></div></div></div>';
        document.body.classList.add('dark');
        __console.environment.ThemeStore.setState({ mode: 'dark' });
      };
      function onLight() {
        el.innerHTML = '<div title="Change to Dark Mode" style="margin-left: auto; margin-right: 14px; min-width: 0px;"><div role="button" tabindex="0" style="user-select: none; transition: background 120ms ease-in 0s; cursor: pointer; border-radius: 44px;"><div style="display: flex; flex-shrink: 0; height: 14px; width: 26px; border-radius: 44px; padding: 2px; box-sizing: content-box; background: rgba(135, 131, 120, 0.3); transition: background 200ms ease 0s, box-shadow 200ms ease 0s;"><div style="width: 14px; height: 14px; border-radius: 44px; background: white; transition: transform 200ms ease-out 0s, background 200ms ease-out 0s; transform: translateX(0px) translateY(0px);"></div></div></div></div>';
        document.body.classList.remove('dark');
        __console.environment.ThemeStore.setState({ mode: 'light' });
      }
      function toggle() {
        if (document.body.classList.contains('dark')) {
          onLight();
        } else {
          onDark();
        }
      }
      function addDarkModeButton(device) {
        const nav = device === 'web' ? document.querySelector('.notion-topbar').firstChild : document.querySelector('.notion-topbar-mobile');
        el.className = 'toggle-mode';
        el.addEventListener('click', toggle);
        nav.appendChild(el);
        onLight();
      }
      const observer = new MutationObserver(function() {
        if (redirected) return;
        const nav = document.querySelector('.notion-topbar');
        const mobileNav = document.querySelector('.notion-topbar-mobile');
        if (nav && nav.firstChild && nav.firstChild.firstChild
          || mobileNav && mobileNav.firstChild) {
          redirected = true;
          updateSlug();
          addDarkModeButton(nav ? 'web' : 'mobile');
          const onpopstate = window.onpopstate;
          window.onpopstate = function() {
            if (slugs.includes(getSlug())) {
              const page = SLUG_TO_PAGE[getSlug()];
              if (page) {
                history.replaceState(history.state, 'bypass', '/' + page);
              }
            }
            onpopstate.apply(this, [].slice.call(arguments));
            updateSlug();
          };
        }
      });
      observer.observe(document.querySelector('#notion-app'), {
        childList: true,
        subtree: true,
      });
      const replaceState = window.history.replaceState;
      window.history.replaceState = function(state) {
        if (arguments[1] !== 'bypass' && slugs.includes(getSlug())) return;
        return replaceState.apply(window.history, arguments);
      };
      const pushState = window.history.pushState;
      window.history.pushState = function(state) {
        const dest = new URL(location.protocol + location.host + arguments[2]);
        const id = dest.pathname.slice(-32);
        if (pages.includes(id)) {
          arguments[2] = '/' + PAGE_TO_SLUG[id];
        }
        return pushState.apply(window.history, arguments);
      };
      const open = window.XMLHttpRequest.prototype.open;
      window.XMLHttpRequest.prototype.open = function() {
        arguments[1] = arguments[1].replace('${MY_DOMAIN}', 'www.notion.so');
        return open.apply(this, [].slice.call(arguments));
      };
    </script>${CUSTOM_SCRIPT}`,
      {
        html: true,
      }
    )
  }
}

async function appendJavascript(res, SLUG_TO_PAGE) {
  return new HTMLRewriter()
    .on("title", new MetaRewriter())
    .on("meta", new MetaRewriter())
    .on("head", new HeadRewriter())
    .on("body", new BodyRewriter(SLUG_TO_PAGE))
    .transform(res)
}

After you Copy + Paste the code, click on Save and Deploy.

Setup the route for the worker

We now need to setup the route for the worker we just created. This will tell the worker which URLs it should work on. This time click on Add route and enter your domain like so: DOMAIN.com/* so if my domain was hello.xyz mine would be hello.xyz/*.

After you do this, click save and let Cloudflare do it's magic!
If everything worked you should now be able to go to your domain such as hello.xyz and it'll redirect to your Notion page!

For your information Notion is continually updated and new features are released frequently so this may not work in the future or tomorrow, but does as of the 19th October 2021.

Also, this project has a Github repository called "Fruition" here where there's a community of people helping each other debug their issues and get this solution working.

How and why you should start a blog - The Gatsby Way 💜

baran — Tue, 11 Aug 2020 16:22:00 +0000

You may ponder whether a blog is even worth it in the first place. You may think, "but people have already covered what I want to write about" or "am I even good enough to teach other people?".

I'm here to tell you YES, you should start a blog. If you don't believe me, even look at Catalin's tweets, he goes on about it all the time. // Detect dark theme var iframe = document.getElementById('tweet-1293105082486140931-646'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1293105082486140931&theme=dark" }

Anyway, hopefully, I've convinced you by now.

Gatsby Starters

I'm not experienced with Gatsby at all. Making my blog was my first experience with Gatsby. Therefore, I would recommend starters if you're not experienced with Gatsby or graphQL, as starters provide the functionality of a blog.

On Gatsby's website, there is a section where there are official Gatsby starters as well as community-made ones (link to Gatsby blog starters page). Here you can find many different open-source starters. There are 3 options here: you simply pick one and use it. You pick one, customise it to your liking, or lastly, you don't like the look of any, and want something different.

If you decide to use one of these starters you should clone it to your local environment. You could either do this using the Gatsby CLI - using a command such as

gatsby new gatsby-starter-blog https://github.com/gatsbyjs/gatsby-starter-blog

or, you could visit the starter's GitHub page and either download it or click "use as template".

Either way, here's the one I used and customised - link to starter.

Gatsby Themes

You may also decide to use a theme. As stated on the official Gatsby site (from the time of publishing this post) -

"Gatsby themes are plugins that include a gatsby-config.js file and add pre-configured functionality, data sourcing, and/or UI code to Gatsby sites. You can think of Gatsby themes as separate Gatsby sites that can be put together and allow you to split up a larger Gatsby project!".

Essentially, you would want to use a theme if:

You already have an existing Gatsby site and can’t start from a starter
You want to be able to update to the latest version of a feature on your site
You want multiple features on your site, but there is no starter with all the features — you can use multiple themes, composed in one Gatsby site

If you want to learn to use a theme you should refer to Gatsby's official docs.

Some themes I recommend would be from LekoArts – link to LekoArts' theme site

Some links that might be useful:

I hope this article convinced you that a blog is worth creating, it can help you consolidate your knowledge, it's valued by employers, and you share value to others! 💙