Forem: Peter Mekhaeil

Accelerate your delivery with modern tools

Peter Mekhaeil — Tue, 27 Dec 2022 14:23:28 +0000

By using modern tools in the development of large front-end repositories, we can potentially improve the speed of deliverables. This will benefit both the business and the development team. The business will benefit from a faster time to market, and the development team will be more motivated as a faster pipeline reduces the need for context switching. I'll share 3 development tools that will lead to faster delivery of your development.

Use a fast package manager

A fast package manager will improve developer productivity by reducing the time it takes to install packages and manage dependencies. This will lead to reducing build times and faster feature delivery.

pnpm is described as a fast, disk space-efficient package manager. It focuses on saving disk space while boosting installation speed.

pnpm is performant because it uses a content-addressable store that contains each version of each dependency and pnpm will hard link the project's node_modules to that store. This means that pnpm only stores one copy of each package in the store, regardless of how many projects are using it. This strategy will save disk space and improve the speed of installing and managing packages.

I've seen this result in projects speeding up their installations by 75%. The team behind pnpm have also posted benchmarks on how pnpm compares to other package managers in terms of installation speed.

Migrate to a fast development tool

A fast development tool can reduce the time it takes to build and deploy. This can be particularly important for large applications that is frequently deployed.

Vite is a modern JavaScript development tool that focuses on providing a fast and efficient development experience. It uses a new approach to building and serving web applications using native browser capabilities to load modules on demand, providing a faster and more efficient development experience.

One of the advantages Vite provides is how incredibly fast it is at building. Vite uses rollup for bundling and esbuild for transforming. Esbuild is written in Go and is 10-100x faster than the JavaScript-based alternatives.

Vite includes Library Mode that allows you to bundle libraries that do not have an HTML entry. Not only can you use Vite to build your applications, you can also take advantage of the power of Vite for packages that are consumed by those applications.

Swapping out a create-react-app (CRA) app to Vite is a matter of replacing the npm scripts and reconfiguring vite.config.js to match your needs. I've seen real world CRA apps migrate to Vite and have improved their build times by 50%.

Use a build system

Build systems like Turborepo and Nx can cache the results of tasks to speed up the build process in subsequent builds.

Each task in a CI pipeline has inputs and outputs - for example, a build task may have source code as inputs and bundled files as outputs. When a task is run, the build system generates a hash based on the inputs and stores the output under that hash. If the task is run again and the inputs have not changed, the build system can reuse the saved output stored under the same hash, rather than running the task again.

This can be especially helpful for large projects with many tasks, as it reduces the overhead of running tasks that have not changed, and can significantly reduce CI time.

How to build an npx starter template

Peter Mekhaeil — Mon, 05 Sep 2022 10:58:18 +0000

Our favourite frameworks have starter templates to help us get started with setting up our projects with minimal configuration. Some known examples:

Create React App (npx create-react-app my-app)
Next.js (npx create-next-app@latest)
Remix (npx create-remix@latest)

I have created a sample starter template that I will walk through in this article.

How they work : these npm packages have an executable file configured in the package.json:

{
  "name": "create-my-template",
  "version": "1.0.0",
  "bin": {
    "create-my-template": "./index.js";
  }
}

When the user installs the npm package, it will also install the executable configured in bin, allowing the user to run the executable:

$ npm install create-my-template$ create-my-template

npx is part of npm: it allows you to run a command from an npm package. If the package has a single bin script configured, that command will be used. npx will also fetch the package remotely if it is not installed locally.

This means users run the below command and npx will download the package and run the executable in one line:

$ npx create-my-template

Now that we can execute a command, let's write up an installation script that will generate a starter template. A basic script can look like the one below:

#!/usr/bin/env node

// Usage: npx create-my-template my-app

const spawn = require('cross-spawn');
const fs = require('fs');
const path = require('path');

// The first argument will be the project name.
const projectName = process.argv[2];

// Create a project directory with the project name.
const currentDir = process.cwd();
const projectDir = path.resolve(currentDir, projectName);
fs.mkdirSync(projectDir, { recursive: true });

// A common approach to building a starter template is to
// create a `template` folder which will house the template
// and the files we want to create.
const templateDir = path.resolve(__dirname, 'template');
fs.cpSync(templateDir, projectDir, { recursive: true });

// It is good practice to have dotfiles stored in the
// template without the dot (so they do not get picked
// up by the starter template repository). We can rename
// the dotfiles after we have copied them over to the
// new project directory.
fs.renameSync(
  path.join(projectDir, 'gitignore'),
  path.join(projectDir, '.gitignore')
);

const projectPackageJson = require(path.join(projectDir, 'package.json'));

// Update the project's package.json with the new project name
projectPackageJson.name = projectName;

fs.writeFileSync(
  path.join(projectDir, 'package.json'),
  JSON.stringify(projectPackageJson, null, 2)
);

// Run `npm install` in the project directory to install
// the dependencies. We are using a third-party library
// called `cross-spawn` for cross-platform support.
// (Node has issues spawning child processes in Windows).
spawn.sync('npm', ['install'], { stdio: 'inherit' });

console.log('Success! Your new project is ready.');
console.log(`Created ${projectName} at ${projectDir}`);

This is a basic example. Other things you will need to consider when you build your own:

You can use tools like commander or inquirer to add interactive command-line interface.
Add some error-handling. Example: Check if project directory already exists before attempting to create it.
Check which package manager the user prefers to use (eg pnpm, yarn).
Add some styling using chalk.
Do you want to initalise a git repository in the project directory?
Should the installation script do a clean up if installation failed?

When you're ready and happy with your starter template, you can then npm publish for everyone to use.

Source code examples

A great way to learn is by reading the source code of other starter templates that are known across the community:

Astro (npm create astro@latest)
Create React App (npx create-react-app my-app)
Next.js (npx create-next-app@latest)
Nuxt.js (npx create-nuxt-app my-app)
SvelteKit (npm create svelte@latest my-app)
Remix (npx create-remix@latest)
Turborepo (npx create-turbo@latest)
Vue (npm init vue@3)

How to keep undefined values in JSON.stringify

Peter Mekhaeil — Mon, 22 Aug 2022 15:44:53 +0000

The JSON spec does not allow undefined values, so when you try to stringify an object that contains an undefined value, the key will get removed:

const person = { name: 'Peter', age: undefined };

JSON.stringify(person);
// '{"name":"Peter"}'

There are workarounds to keep undefined in the return value, but because it is not part of spec, you will not be able to parse the string back to a JSON. Instead, we can replace it with null which is valid.

JSON.stringify has an optional second parameter replacer that can recursively transform properties during the stringify process.

Using the replacer parameter of JSON.stringify, we can replace undefined values with a value that is accepted - such as null:

const person = { name: 'Peter', age: undefined };

function replacer(key, value) {
  return value === undefined ? null : value;
}

JSON.stringify(person, replacer);
// '{"name":"Peter","age":null}'

An example use case where this can come useful is network request payloads in the case we need to let the server know which values are not defined. POST requests have a string body, if we need to send over an object, we require to JSON.stringify the request. The above approach will help us send over values that are not defined (provided that the server understands null as an acceptable value).

Proxying Ackee through Netlify

Peter Mekhaeil — Wed, 29 Jun 2022 02:12:41 +0000

Proxying the requests to Ackee through Netlify comes with some advantages:

It bypasses the need to configure CORS headers - Because Ackee is self-hosted on a domain that is different to your website, during the installation you will be asked to configure CORS headers for Ackee to accept requests from other domains. With proxy rewrites, the browser will be making a request to Ackee through the same domain so we can skip configuring CORS headers.
It makes it difficult for ad-blockers to detect the tracker - We can rewrite the path to the tracker to not include keywords that can be blocked.

Netlify Redirects can redirect requests to external services and this is how we will be setting up our proxy rewrites.

Adding the rewrite rules

Netlify Redirects rules are configured in a file called _redirects. Create the file if you do not have one already. Here are the rules to use:

/script.js https://your-ackee-domain.com/tracker.js 200
/api https://your-ackee-domain.com/api 200

What we have done is proxying these paths to an external path on another domain:

https://yourdomain.com/script.js -> https://your-ackee-domain.com/tracker.js
https://yourdomain.com/api -> https://your-ackee-domain.com/api

Update the path in your script tag

You will need to update the Ackee script to reference the new path:

<script
  async
  src="/script.js"
  data-ackee-server="https://yourdomain.com"
  data-ackee-domain-id="0000-0000-0000-0000-0000"
></script>

Verify the changes

Verify the proxy is working by seeing your website making requests to /script.js and /api and that they respond with status 200.

3 benefits interviews bring you

Peter Mekhaeil — Tue, 14 Jun 2022 04:09:58 +0000

Not only do interviews open doors to new opportunities, they also help you sharpen your skills with new learnings. Interviews keep your career moving forward and I will share some learnings from experience.

Learn about what you know

When you answer questions during the interview, be aware to what level you understand the topics being discussed. Speaking out loud about what you know helps you articulate those past career learnings and experiences. With each interview, the more you can improve your confidence in talking about what you know.

Learn about what you do not know yet

You may not have an answer to some questions during the interview and that is totally fine - this will be an opportunity to learn something new! Ask the interviewer for the answers to those questions. Now whether or not you decide to continue with the interview rounds, you have now learnt something new that you can take to your existing job or you take to your next interview. With each interview, you are building up your knowledge base.

Learn to negotiate

When you get to the offer stage of the interviews, you have the opportunity to practice negotiation, a very handy skill to have at any level in your career. With each interview, sharpen your negotiation skills and pick up experience in handling those situations.

A great book on this topic is The Coding Career Handbook - a chapter is dedicated to salary negotiation where you’ll learn that you have an upper hand simply because the best alternative is staying at the job you already have.

Each experience will be unique

Each person will have their own learning experience. With each interview, practice a useful skill for your career, such as building your confidence, expanding your knowledge and salary negotiating.

Hex color notation have an alpha channel

Peter Mekhaeil — Wed, 01 Jun 2022 15:49:38 +0000

The hex color notation can be described as #RGB[A] or #RRGGBB[AA] - it accepts an alpha channel that can be used to represent the transparency.

When using it as #RRGGBB[AA], the alpha channel is a hexadecimal number where 00 is full transparent and FF full opaque. If using the shorter #RGB[A] notation, it is a hexadecimal number ranging from 0 and F.

#FF7f00     /* orange               */
#FF7f0000   /* orange    0% opaque  */
#FF7f0080   /* orange   50% opaque  */
#FF7f00FF   /* orange  100% opaque  */

#01E        /* blue                 */
#01E0       /* blue       0% opaque */
#01E8       /* blue      53% opaque */
#01EF       /* blue     100% opaque */

You can find out more on MDN.

Today I Learned
I share what I learn on Today I Learned.

Logging variables in Chrome DevTools using logpoints

Peter Mekhaeil — Tue, 24 May 2022 13:49:49 +0000

logpoints in Chrome DevTools allow you insert logging statements without adding breakpoints.

Right-click on the line you want to log:

Add the statement you would like to output to the console:

Everytime the code runs on this logpoint, it will output to the console:

This allows for quick console logging without having you to touch your source code and without having to add breakpoints.

Today I Learned
I share what I learn on Today I Learned.

Svelte components have file location meta data

Peter Mekhaeil — Sat, 07 May 2022 01:29:55 +0000

Svelte nodes have a __svelte_meta object in development mode that contains the file location of the component that rendered that node.

{
    "loc": {
        "file": "src/routes/index.svelte",
        "line": 18,
        "column": 4,
        "char": 358
    }
}

You an try it out on StackBlitz. Inspect an element using the Chrome Dev Tools and use the console:

$0.__svelte_meta

($0 references the last selected DOM element. It is part of the DevTool's Console API)

Learn more about __svelte_meta:

Today I Learned
I share what I learn on Today I Learned.

Using GitHub Actions to push changes

Peter Mekhaeil — Sat, 16 Apr 2022 11:10:55 +0000

We can use GitHub Actions to push a new commit each time there is a new change detected.

I've recently had to do this to automate updating README.md with a listing of the repository files each time a new push has been detected. The GitHub workflow is found here.

Here are the learnings that may come useful to others:

Using bash to clear file content

cat /dev/null > README.md

/dev/null is a pseudo file in Linux that has no output so we can override a file with this empty content.

Using bash to echo a string with new line

echo -e '# Today I Learned\n' > README.md

-e is required to escape backslashes. This allows us to print new line (\n) when outputting to a file.

Using bash to read the first line of a file

head -n 1 $filename

Using bash to remove characters from a string

echo '# Title' | sed 's/# //'

sed is short for Stream EDitor and one of its common uses is pattern replacement. The above will remove # from the string (by replacing it with an empty string).

Using bash to append string to file

echo 'My string' >> README.md

The >> operator is used to append to a file (or create the file if it does not exist).

Using GitHub Actions to push changes to a repository

actions/checkout is an offical GitHub Action that can checkout a repository. We can also use this to push changes back.

on: push
jobs:
  update:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: |
          # Clear README.md
          cat /dev/null > README.md

          # Add Title
          echo -e '# Today I Learned\n' > README.md

          # Loop through all TILs and add to README.md
          dir=./learnings
          for filename in "$dir"/*
          do
            title=$(head -n 1 $filename | sed 's/# //')
            echo "- [$title](https://github.com/petermekhaeil/til/blob/master/$filename)" >> README.md
          done

          # Push changes
          git config user.name github-actions
          git config user.email github-actions@github.com
          git add README.md
          git commit -m "Update README.md"
          git push

Today I Learned
I share what I learn on Today I Learned.

Measuring the performance of the McLaren Racing website

Peter Mekhaeil — Sat, 19 Mar 2022 14:55:07 +0000

With McLaren Racing recently announced a partnership with Google Chrome, this is a great opportunity for McLaren to measure the performance of their website and look into how it can be improved. Today, we will look at their performance scores and talk about some possible improvements that McLaren can do to their website performance.

How the McLaren Racing website will be measured

We will use a couple tools to measure:

F1 Page Speed Insights - an online tool that aggregate the scores and compares the websites of the teams involved in Formula 1.
PageSpeed Insights is an online tool that reports on site performance and it includes both lab data and real-world field data.
WebPageTest can test websites from different locations around the world using different browsers and can provide in-depth analysis in a site’s performance.

An earlier post was written on the page speed performance of Formula 1 websites which explains in details how web performance scores are measured. Read “Page Speed Performance of Formula 1 Websites”.

The performance score of the McLaren Racing website

Using F1 Page Speed Insights we can see how McLaren Racing is doing against the other teams. Lots of room for improvement if McLaren wants podium wins this year.

The detailed breakdown on McLaren Racing’s website shows that it did not pass the Core Web Vitals assessment. We will look at some possible improvements that can bump the score up.

The current state of the McLaren Racing website

The filmstrip generated by WebPageTest is a good tool to see the rough timing of elements as they start to appear on the page. Here we can see the main background starts to load around the 6 second mark.

WebPageTest also provides a waterfall of the network requests made by the page. We can use this to understand the sequence of the requests and their timings:

Possible Improvements to the McLaren Racing website

Avoid blocking resources on other domains

Row 5 of the waterfall shows a render-blocking CSS that is loaded in the head of the page. The thin line at the start of the request is the connection setup because it is located on a different domain. We can prepare this connection set up earlier by using <link rel="preload"/> to initiate the download sooner.

Learn more about how to preload critical assets to improve loading speed.

Avoid loading unused CSS

A deeper look into the CSS from above and we can see that 94.7% of it is unused on the landing page - it is render-blocking and mostly unused on this page. We can cut a lot of the 500ms if we only load the CSS required on this page (we can also just remove this CSS file entirely and inline the small amount of CSS that was used).

Learn more about removing unused CSS.

Preconnect for early connection setup

The McLaren Racing website loads the assets from different domains which has a connection cost (indicated by the thin line that appears before the requests in the waterfall chart). We can preconnect to those domains to let the browser know we intend to make a request to those domains and so the browser will prepare the connection early and avoid having to do it later when we make the requests:

<link rel="preconnect" href="https://static-cdn.mclaren.com" />
<link rel="preconnect" href="https://media-cdn.mclaren.com" />

Learn more about establishing network connections early to improve perceived page speed.

Avoid blocking parsing with JavaScript

The JavaScript file on Row 6 is parser-blocking. It is located in the body in the document and the browser has decided to parse and execute this JavaScript file before it attempts to download the other assets on the page. This can be seen on this waterfall. Row 35 is the main hero background image which has a “wait” time because the browser was waiting for Row 6 to finish executing. This was also seen in the filmstrip video above. By using the defer or async attribute on the JavaScript file on Row 6, 7 and 8, we can remove the render-blocking and the rest of the images on the page can be parsed earlier. And in return, the main background image may possibly load earlier which will bring up the Core Web Vital score. A good illustration on how these attributes work can be found on async vs defer attributes.

Learn more about eliminating render-blocking resources.

Optimise images for the web

The biggest opportunity to improve the McLaren Racing website could be in optimising the large images that they are serving. Here is a screenshot from Google Lighthouse pointing out the possible savings if we are to optimise the images:

The images on the McLaren Racing website aren’t optimised for the web and there is over 13MB worth of these large high-quality images. We can use Squoosh to reduce the file size of these images while maintaining quality.

Doing a quick Squoosh run on the top 3 sized images, there is a cost savings of:

Samsung-Galaxy-S9-v3.png: 805.4 KB -> 88.4 KB (-89.0%)
mclarenplus.jpg: 240.1 KB -> 36.3 KB (-84.9%)
2022-drive-to-survive-4.jpg: 161.1 KB -> 104.5 KB (-35.1%)

Using AVIF format we can even reduce the size even further. AVIF is not supported on all browsers but we can progressively support those that do:

<picture> 
  <source type="image/avif" srcset="img.avif" /> 
  <img src="img.jpg" />
</picture>

Learn more about serving images in modern formats and efficiently encoding images.

Lazy load images that are below-the-fold

Below-the-fold is a term that describes the area of the website that the user cannot see unless they scroll down. Most of the images on the McLaren Racing website are below-the-fold and they are being downloaded even though they are not in view. We can avoid the requests being made by lazy loading those images using <img loading="lazy" /> so they are only requested as the user scrolls closer to those images. This will improve performance and save bandwidth.

Learn more about lazy-loading images and browser-level image lazy-loading for the web.

Summary of opportunities

Recapping the key focus areas that McLaren Racing can take advantage of to improve their web performance:

Avoid blocking resources on other domains.
Avoid loading unused CSS.
Preconnect for early connection setup.
Avoid blocking parsing with JavaScript.
Optimise images for the web.
Lazy load images that are below-the-fold.

How to build an app with Remix and Netlify Graph

Peter Mekhaeil — Thu, 03 Mar 2022 00:00:00 +0000

In this tutorial, you will learn how to build an app using Remix and use Netlify Graph to talk to third-party APIs. We will use Netlify Graph to fetch data from GitHub and show the user a collection of repository issues. Along the way we will learn about the tools chosen and why they are a great fit for our use case.

Source code and demo

The source code for this app can be found in this repository. Add an issue to the repository (or add a comment to an existing issue) to see the changes get reflected instantly on the demo app.

What is Remix

Remix is a full stack web framework that let's you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. Remix is great for our use case because it generates fast responding pages on the server so we can get the latest data from GitHub each time the user hits our pages.

What is Netlify Graph

Netlify Graph provides developers with a GraphQL-based approach to integrating with third-party APIs without needing to operate a seperate GraphQL server. Developers do not need to spend time learning the API structure of each provider and writing code to piece it together. This is great for our use case because we do not want to worry about how to authenticate with GitHub as Netlify will handle this for us.

Getting Started with Remix

Create a new Remix site. Choose "Netlify" when prompted:

npx create-remix@latest

Install dependencies

We will need to install some dependencies for our app to work. Change directory to your new project and run:

npm install slugify marked

slugify : Generates URL-friendly paths based on a text string. We will use to generate URLs based on the title of our GitHub issues.
marked : Markdown parser to convert Markdown to HTML. We will use it to render the GitHub issue body onto our HTML page.

Create a GitHub Repository

You will want to create a new repository in GitHub and commit the code that was generated in the earlier step. This will be the repository that we will be fetching data from using Netlify Graph.

cd [name of project]
git init
git add .
git commit -m "first commit"
git remote add origin https://github.com/your-username/name-of-project.git
git add push -u origin master

Install the Netlify CLI

Install the latest version of Netlify CLI and log into your Netlify account:

npm i -g netlify-cli@latest
ntl login

Change directory to your new project (if you have not done so already) and create a new Netlify site:

cd [name of project]
ntl lnit

Start Development Server

Start the Netlify Dev Server with the --graph flag:

ntl dev --graph

This will start up a local development server that we will use to build our app. It will also start up a Netlify Graph session that we will use in the next section.

Create a GraphQL query with the Graph Explorer

Select your site from your Netlify team dashboard and then select “Graph” from your Netlify site dashboard menu. Click on "Connect API or service".

Netlify Graph supports a handful of API providers that we can connect with:

We are going to connect to GitHub. Select "GitHub" from the list of providers and you will need to enable both "Authentication" and "Graph Explorer". Then continue with "Start querying GitHub":

Once you have selected your open session (that was created when you started the dev server), you will be presented with a Graph Explorer. This will allow you to query the GitHub API for the data you are interested in fetching. For our use case, we will want to fetch the GitHub repository issues and their comments.

Below is a GraphQL query with Issues as its operation name. Copy the below snippet and paste it in the explorer.

query Issues($owner: String = "petermekhaeil", $name: String = "netlify-graph-remix") {
  gitHub {
    repository(name: $name, owner: $owner) {
      issues(first: 100, states: OPEN) {
        edges {
          node {
            id
            body
            title
            createdAt
            url
            comments(first: 100) {
              nodes {
                body
                createdAt
                id
                author {
                  avatarUrl
                  login
                }
                url
              }
            }
          }
        }
      }
    }
  }
}

After clicking "Save Changes", you can head back to your IDE and you will notice some changes that have been made to your workspace. A new netlifyGraph folder has appeared:

netlify/functions/netlifyGraph/index.d.ts
netlify/functions/netlifyGraph/index.js
netlify/functions/netlifyGraph/netlifyGraphOperationsLibrary.graphql
netlify/functions/netlifyGraph/netlifyGraphSchema.graphql

Netlify Graph has generated code for us to use to fetch the data from our app.

Fetching Data from Remix

The Remix app we created earlier came with a demo index page. We can remove it and replace the content of ./app/routes/index.jsx with the code below.

import { Link, useLoaderData } from 'remix';
import slugify from 'slugify';
import NetlifyGraph from '../../netlify/functions/netlifyGraph';

export const loader = async () => {
  const { data } = await NetlifyGraph.fetchIssues(
    { owner: 'petermekhaeil', name: 'netlify-graph-remix' },
    { accessToken: process.env.ONEGRAPH_AUTHLIFY_TOKEN }
  );

  return data.gitHub.repository.issues.edges.map(({ node }) => {
    return {
      ...node,
      slug: slugify(node.title).toLowerCase()
    };
  });
};

export default function Index() {
  let data = useLoaderData();

  return (
    <div>
      <h1>Issues</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            <Link to={item.slug}>{item.title}</Link>
          </li>
        ))}
      </ul>
    </div>
  );
}

Walking through the code:

The loader function is a built-in data loading Remix API. Each Remix route is served from the server and each route can fetch external data before generating the HTML and returning it back to the user. It is in this function that we will fetch data from Netlify Graph and use it in the React template.
NetlifyGraph.fetchIssues is the generated function from Netlify Graph that we will use to fetch the data from GitHub. You can replace the value of owner and name to your own repository, or use the default value if you wish.
The useLoaderData hook from Remix will return the data from the loader function so we can use it in the React template.

Refresh your browser and you will see Remix rendering the list of issues from the GitHub repository.

There are two things we should note from the above code:

Authentication will be taken care by Netlify regardless of which API provider you decide to work with. This is an awesome feature of Netlify Graph because it allows us not to worry about the structures of the third-party APIs. Netlify takes care of this by handling the value of the ONEGRAPH_AUTHLIFY_TOKEN environment variable.
Netlify Graph generated the JS function with the name fetchIssues because the GraphQL query that we wrote had the operation name as Issues. We can have many operations in the GraphQL Explorer and Netlify Graph will generate a JS function for each one with unique names based on the operation name.

Dynamic Routes in Remix

Instead of creating each page manually by hand, Remix can create a route for each of the GitHub issue dynamically.

We can create a dynamic route by creating ./app/routes/$slug.jsx:

import { useLoaderData } from 'remix';
import NetlifyGraph from '../../netlify/functions/netlifyGraph';
import slugify from 'slugify';
import { marked } from 'marked';

async function getLoaderData(title) {
  const { data } = await NetlifyGraph.fetchIssues(
    { owner: 'petermekhaeil', name: 'netlify-graph-remix' },
    { accessToken: process.env.ONEGRAPH_AUTHLIFY_TOKEN }
  );

  const post = data.gitHub.repository.issues.edges.find(({ node }) => {
    return slugify(node.title).toLowerCase() === title;
  });

  return post?.node;
}

export const loader = async ({ params }) => {
  const post = await getLoaderData(params.slug);

  const html = marked(post.body);

  return {
    ...post,
    slug: params.slug,
    html
  };
};

export default function PostSlug() {
  const post = useLoaderData();

  return (
    <div>
      <h1>{post.title}</h1>
      <div dangerouslySetInnerHTML={{ __html: post.html }} />
    </div>
  );
}

Walking through the code:

getLoaderData will fetch the GitHub data via Netlify Graph and filter for the GitHub issue we want by the value of title.
We have been introduced to params in the loader function. params contain the dynamic key that is attached after the $ in the filename. In our example, the filename $slug.jsx will return params.slug with the value from the URL. We will use this value as the title of the GitHub issue we want to display on this page.

Now if you refresh the page and click on any of the GitHub issues, you'll be redirected to a page with the full issue content. An example of a dynamic route from the demo app:

/getting-started-with-remix-and-netlify-graph

What we learnt today

Each Remix route supports a loader function that is called on the server before rendering. It provides data to the route and can be used in the React template.
Remix supports dynamic routes by using the $ filename convention.
Expected errors can be caught in Remix and we can render user-friendly messages using a CatchBoundary.
Netlify Graph uses a Graph Explorer to query the data we need and is synced with the session opened by the CLI.
Netlify Graph generates code that we can use to fetch data from a third-party API without needing to worry about authentication or understanding the API structure.

How I landed my first job as a software engineer

Peter Mekhaeil — Fri, 28 Jan 2022 00:00:00 +0000

I was once an entry level developer with no experience, looking for my first door into an engineering career. I finished my studies back in 2009 and for almost a year I could not find a job. It almost felt like a blind journey from one interview to another, that all ended up in rejection because of lack of experience and knowledge. Without knowing where to look or without knowing what to research, I was mostly answering interview questions with answers that I thought was right, based on my limited knowledge in web development (my computer science studies did not include web dev subjects).

It was until my approach changed during an interview at what soon to become the first company that accepted me.

At the very start of the interview, without any thought behind it - I told the engineering manager something I’ve never said during my previous interviews: I said something along the lines of “Before we continue, I want to tell you - I do not know anything. But I want to learn”.

Everything changed from that moment. The manager continued the interview by listing their tech stack and asked if any of it sounds familiar, and my answer was no to all of them. Nevertheless, he did not mind because I showed my eagerness to learn. The interview turned into a crash course introduction to the technologies and soon after, I was accepted for the job.

Call out your area of focus so others are aware that you are know. Shawn calls this the Power of Lampshading.

For entry level developers looking to land their first job as a software engineer, it is totally okay to call out your area of focus. Let the interviewers know that you do not know the answers and you are willing to learn. This is powerful in itself and calling out your focus areas will have an impact throughout your career.