As a developer, you know that Git can be a lifesaver when managing your projects. Yet, even if you've been using Git for years, there's always more to discover.

That's why we've compiled this list of 7 excellent Git commands you might not know about.

These hidden gems can help you save time, work more efficiently, and create a smoother Git workflow. So, whether you're a Git newbie or a seasoned pro, get ready to fall in love with these excellent commands.

## Make Your Life Easier with Cherry Pick

Picture this: you're working on a project with multiple branches and need to apply a specific commit from one branch to another. Sure, you could merge the entire branch,
but there are better solutions than that. Instead, you can use the `git cherry-pick` command to apply a single commit from one branch to another.

For example, let's say you have a bug fix in branch `bugfix` that you want to apply to the `main` branch. You can do this by running:

```sh
git checkout main
git cherry-pick [commit-hash]

```

Where `[commit-hash]` is the commit's hash you want to apply. Voilà! You've just cherry-picked a commit, saving time and tidying your branches.

## Switch Gears with Ease Using Stash

Imagine you're working on a new feature branch when suddenly, you need to switch gears and fix a bug on another branch. You could commit to your half-finished work,
but that could be better. Instead, use the `git stash` command to save your changes and clean your commit history.

To stash your changes, run:

```sh
git stash save "Your stash message."

```

Now, you can switch branches, fix that pesky bug, and then return to your feature branch by running:

```sh
git stash apply

```

With `git stash`, you can keep your branches organized and your commits neat, even when juggling multiple tasks.

## Find Bugs Quickly with Bisect

Finding a bug can be like looking for a needle in a haystack when it comes to large codebases. But don't worry, `git bisect` is here to help! This powerful
command allows you to perform a binary search through your commit history, pinpointing the exact commit that introduced the bug.

Start by marking a good commit (without the bug) and a bad commit (with the bug):

```sh
git bisect start
git bisect good [good-commit-hash]
git bisect bad [bad-commit-hash]

```

Git will now start bisecting the commits and checking out the middle one for you to test. Based on the outcome, mark the commit as good or bad:

```sh
git bisect good
# or
git bisect bad

```

Keep marking commits until Git narrows down the culprit. Once you've found the problematic commit, run git bisect reset to return to your original branch.
You'll be squashing bugs in no time!

## Clean Up Your Commit History with Rebase

Let's face it—sometimes, our commit history can get messy. Thankfully, `git rebase -i` (interactive rebase) is here to help you clean it up. This command lets you pick,
edit, or squash your commits, creating a polished and organized commit history.

To use interactive rebase, run:

```sh
git rebase -i [commit-hash]^
# or
git rebase -i main
```

Where `[commit-hash]` is the commit's hash you want to start rebasing from. This will open up an editor where you can modify your commit history by picking,
editing, or squashing commits.

For instance, to combine two commits into one, replace `pick` with `squash` (or `s`) for the second commit in the editor. Save your changes and close the editor. Git will then open another editor to create a new commit message for the squashed commits. Once you've crafted your message, save and close the editor. You've just made your commit history cleaner and more understandable!

## Recover Lost Commits with Reflog

Accidentally deleted a branch or commit? Don't panic! The `git reflog` command has got your back. This command displays a log of all your actions on your repository, including branch and commit deletions.

Run:

```sh
git reflog

```

```sh
5d8932c (HEAD -> main) HEAD@{0}: commit: Update README.md
3a5b0de HEAD@{1}: commit: Add LICENSE file
a1b2c3d HEAD@{2}: checkout: moving from feature-branch to main
b7d654e HEAD@{3}: commit: Fix bug in login feature
e8f7d6c HEAD@{4}: commit: Add login feature
a1b2c3d HEAD@{5}: checkout: moving from main to feature-branch
a1b2c3d HEAD@{6}: commit: Initial commit

```

Look for the hash of the deleted branch or commit in the `reflog` output. Once you've found it, you can recover the lost branch or commit by running:

```sh
git checkout -b [new-branch-name] [commit-hash]

```

With `git reflog`, you can breathe a sigh of relief knowing you can recover from accidental deletions.

## Discover the Culprit with Blame

Who made changes to a specific line of code? Look no further than the `git blame` command. This handy command shows you the commit hash, author, and date of the last change to each line of code. It's handy when you need to trace the origins of a bug or identify who made a particular change to your codebase.

To use `git blame`, run:

```sh
git blame [file]

```

```sh
^b71b6d8 (John Doe 2022-01-01 15:23:45 -0500 1) def greet(name):
^b71b6d8 (John Doe 2022-01-01 15:23:45 -0500 2)     print(f"Hello, {name}!")
^e8d21b1 (Jane Smith 2022-01-02 10:12:34 -0500 3)
^e8d21b1 (Jane Smith 2022-01-02 10:12:34 -0500 4) def farewell(name):
^e8d21b1 (Jane Smith 2022-01-02 10:12:34 -0500 5)     print(f"Goodbye, {name}!")

```

Where `[file]` is the file you want to inspect. You'll get a detailed breakdown of the changes made to each line, so you can quickly pinpoint the source of any issues.

## Work on Multiple Branches at Once with Worktree

Working on multiple features or bug fixes at the same time? The git worktree command lets you work on multiple branches simultaneously without affecting your original working directory. It's perfect for multitaskers who want to stay organized.

To create a new working directory for a different branch, run the following:

```sh
git worktree add [path] [branch]

```

Where `[path]` is the location for the new working directory, and `[branch]` is the branch you want to work on. You can easily switch between working directories and branches, keeping your projects organized and your workflow smooth.

Armed with these 7 amazing Git commands, you're ready to easily tackle even the most complex projects. Remember, practice is the key to mastering Git, so don't be afraid to dive in and experiment with these powerful commands.


7 Git Commands You'll Love

In today's world, people expect websites to load quickly. If your website is slow, users will be frustrated and may even leave before the page finishes
loading. Not only is this bad for the user experience, but it can also negatively impact your bottom line. According to studies by Amazon and Google,
a one-second delay in mobile page load times can impact conversion rates by up to 20%. Therefore, optimizing your website's performance is crucial to
provide a better user experience and potentially increasing revenue.

One tool that can help you measure your website's performance is Lighthouse. Lighthouse is an open-source, automated tool that Google created to help
website developers improve the quality of web pages. Lighthouse measures several aspects of website performance, including page load times, accessibility,
and SEO.

Improving website performance involves key steps: measure, change, measure, and compare. First, measure your website's performance using tools like Lighthouse
or other performance monitoring software. Then, make changes to your website to improve its performance. After making these changes, measure your website's
performance again to see if there is any improvement. Finally, compare your before and after measurements to determine if your changes have positively impacted
your website's performance.

Lighthouse is a powerful tool for measuring website performance. It generates a report that provides insight into several aspects of website performance,
including page load times, accessibility, SEO, and more.

Here are some of the measurements that Lighthouse takes and what they mean:

- First Contentful Paint (FCP): This measures how long it takes for the first piece of content to appear on the screen. This is an important metric because it gives users an idea of how long they will have to wait before seeing any content on the page.
- Largest Contentful Paint (LCP): This measures how long it takes for the most important content to appear on the screen. This metric is important because it gives users an idea of when they can start interacting with the page.
- Time to Interactive (TTI): This measures how long it takes for a page to become interactive. This is the point at which the user can start interacting with the page and perform actions such as clicking buttons or scrolling.
- Total Blocking Time (TBT): This measures how long the main thread is blocked from responding to user input. This is an important metric because it can impact the user experience and frustrate users if they cannot interact with the page.

To generate a Lighthouse report for performance, follow these steps:

- Open the website that you want to test in Google Chrome.
- Open the Chrome Developer Tools by pressing F12 or right-clicking on the page and selecting "Inspect."
- Click on the "Lighthouse" tab in the Developer Tools.
- Click on the "Generate report" button.
- Lighthouse will run a series of tests and generate a report that provides insight into your website's performance.
- Review the report and identify areas where your website can be improved.

Using Lighthouse to measure your website's performance, you can identify areas where your website is performing poorly and make changes to improve the
user experience.

While Lighthouse is a valuable tool for measuring website performance, measuring real-world user data is also essential. You can do this using the Web
Vitals package or the Performance JavaScript API. These tools can give you insight into how your website performs for real users, which can help you
prioritize improvements that will impact the user experience.

```ts
import { getCLS, getFID, getLCP } from 'web-vitals'

function sendToAnalytics(metric) {
  // Send the metric data to your analytics platform
  console.log(metric);
}

getCLS(sendToAnalytics)
getFID(sendToAnalytics)
getLCP(sendToAnalytics)

```

In this example, we use the `getCLS`, `getFID`, and `getLCP` functions from the web-vitals package to measure Core Web Vitals. These functions take a callback
function as a parameter, which will be called with the metric data once the metrics have been calculated.

## Reduce the amount of JavaScript and remove dead code.

Excessive and redundant JavaScript can slow down the loading time of your website. Therefore, it's essential to reduce the amount of JavaScript and remove
any dead code. One way to do this is using the Webpack Bundle Analyzer, which can help you analyze your bundle size and identify unnecessary code.

![Webpack Bundle Analyzer](/images/8-ways-to-boost-your-website-performance/webpack-bundle-analyzer.jpg)

Install Webpack Bundle Analyzer as a development dependency:

```sh
yarn add --dev webpack-bundle-analyzer

```

Add a new script to your package.json file to run Webpack Bundle Analyzer:

```json
{
  "scripts": {
    "analyze": "webpack-bundle-analyzer dist/bundle.js"
  }
}

```

In this example, we're telling Webpack Bundle Analyzer to analyze the dist/bundle.js file.

Run the script with Yarn:

```sh
yarn analyze

```

This command will open a new tab in your browser with a visual representation of your Webpack bundle, showing the size of each module and identifying
any potential issues.

Using Webpack Bundle Analyzer, you can identify and remove any unnecessary code from your JavaScript bundle, reducing its size and improving your
website's performance.

## Lazy load of offscreen images

Loading all web page images simultaneously can slow the page's initial load time. Therefore, it's recommended to use lazy loading for offscreen images,
which will load images only when they are needed.

One way to do this is by using the `loading="lazy"` attribute in the image tag.

Here's an example of how to use the `loading="lazy"` attribute:

```html
<img
  alt="Example image"
  loading="lazy"
  src="image.jpg"
/>

```

## Split your bundle into chunks and lazy load them.

Splitting your bundle into smaller chunks can significantly improve your website's loading time. One way to do this is by using dynamic imports with
Webpack. By splitting your app into chunks, parts of your app can be lazily loaded instead of it all being loaded at page load.

Here's an example of how to use dynamic imports with React:

```tsx
import React, { lazy, Suspense } from 'react'

const LazyComponent = lazy(() => import('./LazyComponent'))

function App() {
  return (
    <div>
      <Suspense fallback={<div>Loading...</div>}>
        <LazyComponent />
      </Suspense>
    </div>
  )
}

export default App

```

In this example, we use `React.lazy()` to lazy load a component when needed. We're also using the `<Suspense>` component to display a loading indicator
while the component is being loaded.

## Serve your JavaScript faster using a CDN and GZIP/Brotli Compression.

Serving your JavaScript from a CDN can significantly improve your website's performance by reducing the load on your server. Compressing your
JavaScript with GZIP or Brotli Compression can reduce the file size, improving the website's loading time.

Here's an example of how to use GZIP compression with Express.js:

```ts
import express from 'express'
import compression from 'compression'

const app = express()

app.use(compression())

```

Using GZIP compression with Express.js, we're compressing and serving our JavaScript files to the client. GZIP will significantly improve our
website's performance by reducing the file size and load time.

## Transpiling to ES5 and Modern Javascript

Transpiling your JavaScript code to ES5 can significantly improve your website's performance by ensuring your code is compatible with older
browsers. However, modern browsers support newer JavaScript features, which can execute faster.

One way to optimize your website's performance for modern browsers is to transpile your code to ES5 and modern JavaScript and serve them in
separate files.

You can use the `nomodule` attribute on the `<script>` tag to load the ES5 version for older browsers, while modern browsers can load the
modern JavaScript version.

Here's an example of how to create two separate bundles with Webpack for ES5 and modern JavaScript:

```js
const path = require('path')

const commonConfig = {
  // common configuration for both ES5 and modern JavaScript bundles
}

const es5Config = {
  ...commonConfig,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'es5.js'
  },
  module: {
    rules: [
      // rules for transpiling to ES5
    ]
  }
}

const modernConfig = {
  ...commonConfig,
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'modern.js'
  },
  module: {
    rules: [
      // rules for modern JavaScript
    ]
  }
}

module.exports = [es5Config, modernConfig];

```

In this example, we use two separate Webpack configurations to create different bundles for ES5 and modern JavaScript bundles.

```html

<script type="module" src="modern-bundle.js"></script>


<script nomodule src="legacy-bundle.js"></script>

```

In this example, the modern-bundle.js file contains modern JavaScript code optimized for supporting browsers, while the legacy-bundle.js
file contains transpiled ES5 JavaScript code optimized for non-supporting browsers.

The `type="module"` attribute on the first script tag tells the browser that this script contains modern JavaScript code and should only
be loaded by supporting browsers.

The `nomodule` attribute on the second script tag tells the browser that non-supporting browsers should only load this script. By loading
two different JavaScript bundles, you can ensure your website is optimized for all users, regardless of their browser or device.

## Schedule JavaScript

Running JavaScript code at the right time can significantly improve your website's performance. JavaScript is, in most cases,
single-threaded, and when a user enters your site, a lot of initial Javascript needs executing before the browser can respond to user
input.

The requestIdleCallback() function can schedule JavaScript code to run when the browser is idle, preventing it from blocking other
critical tasks.

Here's an example of how to use the requestIdleCallback() function:

```ts
window.requestIdleCallback(() => {
  // Run JavaScript code here
})

```

## Prefetching resources

Prefetching resources can significantly improve your website's performance by fetching critical resources beforehand, reducing the time
needed to fetch them later when needed.

Here's an example of how to prefetch a font using the `<link>` tag:

```html
<link rel="preload" href="font.woff2" as="font" type="font/woff2" crossorigin />

```

We use the `rel="preload"` attribute to prefetch a font in this example.

We're also using the `as="font"` attribute to indicate that this resource is a font and the `type="font/woff2"` attribute to specify the font type.

When a font is prefetched, the browser downloads it in advance, allowing it to be immediately available when it's required. By prefetching resources
like fonts, you can reduce the time it takes for the browser to load them, improving the website's loading speed and overall performance. This can
have a positive impact on the user experience, as users can quickly access the content they need without having to wait for fonts to load. Overall,
prefetching resources like fonts can significantly enhance website performance, providing a faster and more responsive user experience.

## Reduce the number of DOM nodes.

Reducing the number of DOM nodes on a webpage can significantly improve the website's loading time. You can achieve this by optimizing the HTML and CSS.

One way to do this is by removing unnecessary elements and using CSS to style elements instead of adding additional elements.

These tips can significantly improve your website's performance by reducing the loading time and optimizing the code. Using these techniques, you can
create a fast and responsive website with an excellent user experience.

Optimizing website performance is crucial for providing a better user experience and improving your website's search engine ranking. Implementing the
tips discussed in this article can significantly enhance your website's loading speed and make it more responsive.

However, optimizing website performance is an ongoing process, and you should continuously monitor and optimize your website to maintain its performance.
By measuring real-world user data, using tools like Lighthouse, and following best practices, you can create a fast and responsive website with an
excellent user experience.

Nobody deserves a loading spinner. 🚀

8 Ways to Boost Your Website Performance

The other day when browsing Dribble, I stumbled over some awesome-looking progress bars made by [Pierluigi Giglio](https://www.pierluigigiglio.com/).

<img
  alt="Picture of different progress bars"
  height="900"
  src="https://cdn.dribbble.com/users/384132/screenshots/16389034/media/738803020612652eedbcdcca4687284c.jpg?resize=1200x900"
  width="1200"
/>

When building SaaS products, you will end up having to add a progress bar sooner or later. I think it would be a great exercise to implement a couple of them in React.

Let's get started by adding [Styled Components](https://styled-components.com/) for our CSS. It will be great for dynamically changing CSS values.

```shell
yarn add styled-components
yarn add -D @types/styled-components
```
We'll start with progress bar number three in the picture above. It's a pretty standard one that we can use in many places.

Let's create a small component that takes the current progress as property and displays the number.

```tsx
export function ProgressBar({ progress, width = 300 }: ProgressBarProps): ReactElement {
  return (
    <Container width={ width }>
      <Text>
        { progress }%
      </Text>
    </Container>
  );
}

const Container = styled.div<{ width: number }>`
  width: ${ props => props.width }px;
`;

const Text = styled.div`
  color: hsla(225, 23%, 62%, 1);
  font-weight: bold;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
`;
```

One feature of Styled Components that we will rely on is variable interpolation. As the `styled` helper is a Template literal, we can use string interpolation to pass values from our JSX directly to our CSS.

``` tsx
const Container = styled.div<{ width: number }>`
  width: ${ props => props.width }px;
`;
```

For the bar itself, we'll use two elements stacked on top of each other. The bottom one will have the "unfilled" color and take up the whole width. The top one will have the "filled" color and its width will depend on our `progress`.

```tsx
const Bar = styled.div`
  background: hsla(225, 20%, 92%, 0.9);
  border-radius: 0.5rem;
  height: 0.75rem;
  width: 100%;
`;

```

Another cool thing about Styled Components is that you can extend one of your Styled Components and add or override attributes.

```tsx
const FilledBar = styled(Bar)<{ width: number }>`
  background: hsla(225, 23%, 72%, 0.9);
  transition: width 0.5s ease-out;
  width: ${ props => props.width }%;
`;

```

We'll use string interpolation again to determine how wide the filled bar should be.

```
<Bar>
  <FilledBar width={ progress } />
</Bar>
```

If we add some buttons to change the progress, we can see our new progress bar in action! 🍾

```tsx
export function App(): ReactElement {
  const [ progress, setProgress ] = useState(50);

  const updateProgress = (delta: number): void => {
    const newProgress = Math.max(0, Math.min(100, progress + delta));

    setProgress(newProgress);
  };

  return (
    <Container>

      <Row>
        <ProgressBar progress={ progress } />
      </Row>

      <Row>
        <Button onClick={ () => updateProgress(-10) }>
          Decrease
        </Button>
        <Button onClick={ () => updateProgress(+10) }>
          Increase
        </Button>
      </Row>
    </Container>
  );
}

```

The `updateProgress` function uses what's called a Clamp function. It makes sure that value is kept between a lower and upper bound, in this case, 0 and 100%.

If you play around with it for a little bit you'll quickly notice how staggering it feels. Not smooth at all. Instead of jumping directly to the new value, we can animate the bar so it moves there over time instead.

```tsx
const FilledBar = styled(Bar)<{ width: number }>`
  ...
  transition: width 0.5s ease-out;
  ...
`;
```

The `transition` property is an easy way to animate or tween values in CSS.  It will automatically apply when changing the specified property. The first parameter is the property we are interested in,  the width. The second one is the duration of the animation. You can play around with it to find a fitting duration.

The third parameter is what's called an [easing function](https://easings.net/). It's a curve that describes how fast or slow the animation will play during different parts of the duration. A `linear` curve will have a consistent speed throughout the animation. `ease-in` will start slow but speed up towards the end and `ease-out` will do the reverse.

The idea behind using easing function or animation curves is to smooth out the animation and make it feel more realistic as real motion seldom happens at a constant speed. There is a ton of curves you can try but the ones mentioned are the most popular.

<img
  alt="Example of Easing Functions"
  height="574"
  src="http://radialglo.github.io/images/easings.png"
  width="873"
/>

Our progress bar is starting to take form but there's another improvement we can do. Adding [Aria roles](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_progressbar_role) to our markup will make it easier for assistant devices such as screen readers to make sense of our application.

```tsx
    <Container
      aria-label={ label }
      aria-valuemax={ 100 }
      aria-valuemin={ 0 }
      aria-valuenow={ progress }
      role="progressbar"
      width={ width }
    >
```

Now we have a fully-fledged progress bar! Here it is in its entirety:

```tsx
import React, { ReactElement } from 'react';
import styled from 'styled-components';

interface ProgressBarProps {
  progress: number;

  label?: string;
  width?: number;
};

export function ProgressBar({
  progress,
  label = 'Progress Bar',
  width = 300
}: ProgressBarProps): ReactElement {
  return (
    <Container
      aria-label={ label }
      aria-valuemax={ 100 }
      aria-valuemin={ 0 }
      aria-valuenow={ progress }
      role="progressbar"
      width={ width }
    >
      <Text data-testid="progress-bar-text">
        { progress }%
      </Text>

      <Bar>
        <FilledBar
          data-testid="progress-bar-bar"
          width={ progress }
        />
      </Bar>
    </Container>
  );
}

const Bar = styled.div`
  background: hsla(225, 20%, 92%, 0.9);
  border-radius: 0.5rem;
  height: 0.75rem;
  width: 100%;
`;

const FilledBar = styled(Bar)<{ width: number }>`
  background: hsla(225, 23%, 72%, 0.9);
  transition: width 0.5s ease-out;
  width: ${ props => props.width }%;
`;

const Container = styled.div<{ width: number }>`
  width: ${ props => props.width }px;
`;

const Text = styled.div`
  color: hsla(225, 23%, 62%, 1);
  font-weight: bold;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
  text-align: center;
  width: 100%;
`;

```

Before we ship it, let's add a test to make sure it works, now and in the future. 🚢

```tsx
  it('has a label with the current progress.', () => {

    render(<ProgressBar progress={ 45 } />);

    const label = screen.getByTestId('progress-bar-text');

    expect(label).toHaveTextContent('45%');
  });
```

Using [Testing Library](https://testing-library.com/) we'll render the component, filled by 45%.

```tsx
    render(<ProgressBar progress={ 45 } />);
```

We'll grab the text element using the Screen utility and the `getByTestId` function. I like test ids for testing. Adding an extra property like `data-test-id="progress-bar"` and querying by that instead of something like a CSS selector makes your tests more resistant. You only want your tests to fail when behavior changes, not when you are renaming a class.

```ts
    const label = screen.getByTestId('progress-bar-text');
```

Finally, we'll check that the element has the correct text.

```ts
expect(label).toHaveTextContent('45%');
```

We can take the same approach for the bar, but instead of checking the text content, we'll check the width of the bar.

```tsx
it('fills the progress bar.', () => {

    render(<ProgressBar progress={ 55 } />);

    const bar = screen.getByTestId('progress-bar-bar');

    expect(bar).toHaveStyle('width: 55%');
  });

```

That's it! You now have a great-looking, well-tested, and reusable progress bar! 🥂


<img
  alt="Image of the first progress bar"
  height="600"
  src="/images/progress-bar-1.png"
  style="border-radius: 8px; box-shadow: none;"
  width="1100"
/>


Let's tackle another one. How about the 8th one? It's kind of interesting as it's a circular progress bar.

We'll start by adding an SVG Element which will allow us to draw some graphics. The `viewBox` property defines the size of the viewport. In this case, it's 100px wide and high. We'll use this size when drawing stuff and it will be stretched/shrunken correctly when resizing the SVG.

```tsx
<svg
      height={ width }
      width={ width }
      viewBox="0 0 100 100"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
    >
</svg>
```

We'll start with two circle elements, placing them in the middle and giving them a radius and a stroke width. SVG elements have two properties to define their colors. The `fill` is like the background color and the `stroke` is the border of the element.

Like before, we'll create two styled components:

```tsx
<Circle
  cx="50"
  cy="50"
  r="38"
  strokeWidth="6"
/>

<FilledCircle
  cx="50"
  cy="50"
  r="38"
  strokeWidth="6"
/>

const Circle = styled.circle`
  fill: transparent;
  stroke: hsla(225, 20%, 92%, 0.9);
  stroke-linecap: round;
`;

const FilledCircle = styled(Circle)`
  stroke: hsla(225, 23%, 72%, 0.9);
`;

```

We'll use absolute positioning to place a text with the current progress in the center of the circle.

```tsx
<Text data-testid="progress-bar-text">
  { progress }
</Text>

const Text = styled.div`
  align-items: center;
  color: hsla(225, 23%, 62%, 1);
  display: flex;
  font-weight: bold;
  height: 100%;
  justify-content: center;
  left: 0;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
`;

```

Now for the tricky part. How do we make the FilledCircle only partially fill depending on the progress? We could use an [SVG Path](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths) to draw a line in the shape of the circle but that seems like an awful lot of math and trigonometry. 😨

Luckily for us, there are a few properties on the circle element we can use to accomplish this. Namely `stroke-dasharray` and `strokeDashoffset`. The dasharray property creates spaces within the stroke, much like how the dashed version of a border works on normal HTML elements.

This is how circles look with a dasharray of either, 4, 10, or 20 pixels.


<img
  alt="Examples of dash offset"
  height="333"
  src="/images/dasharray-example.png"
  width="855"
/>


So the idea is to set the dash array to the same size as the circle. That way we'll get two circles, the first one will be transparent and the other one will have our fill color. Then we'll use the `stroke-dashoffset` property to push our filled circle into view.

For this, we'll need to use a little bit of math to calculate the circumference. If you remember your high school math, or you like me forgot about it and googled it instead we'll see that it's `radius * 2 * PI`.

```ts
const strokeWidth = 6;
const radius = (100 / 2) - (strokeWidth * 2);
const circumference = radius * 2 * Math.PI;

```

Once we have the circumference, we can calculate the offset based on the progress.

```ts
const offset = circumference - progress / 100 * circumference;
```

All in all, it will look like this:

```tsx
import React, { ReactElement } from 'react';
import styled from 'styled-components';

interface CircularProgressBarProps {
  progress: number;

  label?: string;
  width?: number;
};

export function CircularProgressBar({
  progress,
  label = 'Progress Bar',
  width = 300
}: CircularProgressBarProps): ReactElement {
  const strokeWidth = 6;
  const radius = (100 / 2) - (strokeWidth * 2);
  const circumference = radius * 2 * Math.PI;
  const offset = circumference - progress / 100 * circumference;

  return (
    <Container>
      <svg
        aria-label={ label }
        aria-valuemax={ 100 }
        aria-valuemin={ 0 }
        aria-valuenow={ progress }
        height={ width }
        role="progressbar"
        width={ width }
        viewBox="0 0 100 100"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
      >

        <Circle
          cx="50"
          cy="50"
          r={ radius }
          strokeWidth={ strokeWidth }
        />

        <FilledCircle
          cx="50"
          cy="50"
          data-testid="progress-bar-bar"
          r={ radius }
          strokeDasharray={ `${ circumference } ${ circumference }` }
          strokeDashoffset={ offset }
          strokeWidth={ strokeWidth }
        />

      </svg>

      <Text data-testid="progress-bar-text">
        { progress }
      </Text>

    </Container>
  );
}

const Container = styled.div`
  position: relative;
`;

const Circle = styled.circle`
  fill: transparent;
  stroke: hsla(225, 20%, 92%, 0.9);
  stroke-linecap: round;
`;

const FilledCircle = styled(Circle)`
  stroke: hsla(225, 23%, 72%, 0.9);
  transform: rotate(-90deg);
  transform-origin: 50% 50%;
  transition: stroke-dashoffset 0.5s ease-out;
`;

const Text = styled.div`
  align-items: center;
  color: hsla(225, 23%, 62%, 1);
  display: flex;
  font-weight: bold;
  height: 100%;
  justify-content: center;
  left: 0;
  letter-spacing: 0.025em;
  margin-bottom: 1rem;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  z-index: 100;
`;

```

And that's our second progress bar! 🍾

<img
  alt="Image of the first progress bar"
  height="600"
  src="/images/progress-bar-2.png"
  style="border-radius: 8px; box-shadow: none;"
  width="1100"
/>

Here are both of them in action.

<iframe
  height="750"
  src="https://stoic-kowalevski-c6fe15.netlify.app/"
  width="100%"
></iframe>

You can find all the code for this article at [GitHub](https://github.com/Artmann/react-progress-bars). If you want to show ❤️ and support, star the repository. 😄


Building Two Different Types of Progress Bars

Hey there, fellow developer! 👋 Error handling is one of those skills that can make a huge difference in your React applications, no matter where you are in your coding journey. We've all experienced that frustrating moment when our application crashes and displays a blank screen, leaving our users scratching their heads. But worry not, my friend! In this blog post, we will explore React's wonderful world of error boundaries and learn how they can help us create a more delightful user experience. Let's dive right in!

## Understanding Error Boundaries

So, what exactly is an error boundary? Think of it as a superhero 🦸‍♂️ that swoops in to save the day whenever there's trouble (i.e., a JavaScript error) in its child component tree. An error boundary catches those pesky errors, logs them, and displays a friendly fallback UI instead of the crashed component tree. It's like a safety net that keeps your app running smoothly, even when things go awry.


## Creating an Error Boundary

Alright, it's time to create our very own error boundary. An error boundary is a class component that uses the built-in getDerivedStateFromError() method to update its state when an error occurs. Here's an example of a simple yet effective error boundary component:

```ts
class ErrorBoundary extends React.Component {
  state = {
    hasError: false
  }

  static getDerivedStateFromError() {
    // Oh no, an error! Let's update our state.
    return { hasError: true }
  }

  componentDidCatch(error, info) {
    // We'll log the error and some useful info to the console for now.
    console.error("Error:", error)
    console.error("Info:", info)
  }

  render() {
    // If there's an error, let's show the fallback UI.
    // Otherwise, we'll render the child components as usual.
    if (this.state.hasError) {
      return this.props.fallback
    }
    return this.props.children
  }
}

```

In this example, the getDerivedStateFromError() method is called when an error is thrown in any child components of the error boundary. When this happens, the method updates the state to inform us of an error. The componentDidCatch() method is used for logging and reporting the error, while the render() method displays the fallback UI if there has been an error or the child components if everything is A-OK.

## Using Error Boundaries in Your React App

Now that we have our error boundary let's put it to work in our application! 🛠️ You can wrap specific sections of your app in error boundaries to catch errors in those areas. For example, you might wrap each card in your UI with an error boundary to ensure that only the affected card displays a friendly error message rather than the entire application crashing and burning.

It's also a splendid idea to wrap your entire application in an error boundary. This ensures that users will always be notified if an error occurs anywhere in the app. Trust me, they'll appreciate the friendly error message much more than a blank screen!

Let's see some examples to see our error boundary in action! 🎉

### Wrapping individual components

Imagine a list of user profiles, each displayed in a ProfileCard component. We can wrap each ProfileCard with our ErrorBoundary to handle errors gracefully:

```ts
import ErrorBoundary from './ErrorBoundary'

function UserProfileList({ profiles }) {
  return (
    <div className="profile-list">
      {profiles.map((profile) => (
        <ErrorBoundary key={profile.id} fallback={<div>Oops, something went wrong with this profile.</div>}>
          <ProfileCard profile={profile} />
        </ErrorBoundary>
      ))}
    </div>
  )
}

```

If an error occurs in one of the ProfileCard components, only that specific card will display the error message, while the rest of the list remains unaffected.

### Wrapping the entire application

We can also wrap our entire application in an ErrorBoundary to catch any unhandled errors:

```ts
import React from 'react'
import ReactDOM from 'react-dom'

import App from './App'
import ErrorBoundary from './ErrorBoundary'

ReactDOM.render(
  <React.StrictMode>
    <ErrorBoundary fallback={<h1>Oh no! Something went terribly wrong. Please try again later.</h1>}>
      <App />
    </ErrorBoundary>
  </React.StrictMode>,
  document.getElementById('root')
)

```

This way, if any error slips through the cracks, our users will still see a friendly error message instead of a blank screen.

### Wrapping a component with async data fetching

Suppose we have a WeatherWidget component that fetches weather data asynchronously. We can wrap this component with our ErrorBoundary to display a fallback UI if the data fetching fails:

```ts
import React from 'react'

import WeatherWidget from './WeatherWidget'
import ErrorBoundary from './ErrorBoundary'

function WeatherDashboard() {
  return (
    <div className="weather-dashboard">
      <ErrorBoundary fallback={<div>Sorry, we couldn't fetch the weather data. Please try again later.</div>}>
        <WeatherWidget />
      </ErrorBoundary>
    </div>
  )
}

```

If an error occurs during data fetching, our ErrorBoundary will catch it and display a helpful message to the user.
These examples demonstrate the versatility and effectiveness of error boundaries in handling errors within your React applications. By using error boundaries strategically, you can create a more pleasant and resilient user experience. 🚀


Level Up Your React Error Handling with Error Boundaries

You've seen some people on Twitter with a certain kind of clout, their tweets garnering likes, retweets, and replies with almost magical efficiency. But have you ever wondered what powers this influence? Today, we're diving into the mysterious world of Tweepcred, the service behind the scenes that calculates a user's Reputation on Twitter. You don't need to be an expert in Spark or batch processing – we'll break it down in a friendly, approachable way that you can digest without a headache.

## What is Tweepcred?

Tweepcred is a social network analysis tool that calculates the influence of Twitter users based on their interactions with other users. Think of it as the Reputation points you earn on the platform, which Twitter uses to determine who should be recommended to follow or whose content should be highlighted. Tweepcred leverages Google's PageRank algorithm to rank users based on mentions, retweets, and more interactions.

Initially developed by Google to rank web pages in search results, PageRank has become a cornerstone of modern search engine technology.

PageRank was created by Google founders Larry Page and Sergey Brin while they were still students at Stanford University. The primary purpose of the algorithm was to assign a numerical score to each web page based on the number and quality of other pages that link to it. The more high-quality links a page has, the higher its PageRank score. This allowed Google to provide users with more relevant search results, revolutionizing the world of online search.

At a high level, PageRank treats web pages as nodes in a graph, with hyperlinks acting as edges connecting these nodes.

The algorithm distributes the scores across the graph iteratively, and after a certain number of iterations, the scores stop changing or change very little. When this point is reached, the algorithm is considered to have reached a stable state. This stable state signifies that the PageRank scores have balanced out, effectively ranking the nodes based on their importance or influence within the network.

This process helps identify the most important pages in the network, ensuring they're ranked higher in search results. Now, you might wonder how this web page-centric algorithm could apply to Twitter users and their influence. Well, that's where Tweepcred comes in, adapting the PageRank algorithm to analyze Twitter users and their interactions in a similar manner. So let's jump back to Tweepcred and see how it uses PageRank to measure the clout of your favorite Twitter personalities!

## How Tweepcred Works: A High-Level Overview

At a high level, Tweepcred uses the PageRank algorithm to create a graph of Twitter users (nodes) and their interactions (edges). It then assigns a numerical score to each user based on the number and quality of their interactions with other users. The more interactions users have with other high-quality users, the higher their Tweepcred score.
The magic behind Tweepcred comes from a series of Scala classes that work together to calculate a user's reputation score. To give you a clear understanding of how the system works, we'll be discussing the main classes and their functionalities.

### UserMass

The UserMass class plays a crucial role in calculating a Twitter user's " mass, " representing their Reputation on the platform. The mass score is used in various applications to determine which users should be recommended to follow or which users should have their content highlighted.

To calculate the mass, the UserMass class employs a sophisticated algorithm that considers multiple factors related to the user's profile and their activity on Twitter.

The getUserMass method of the UserMass class receives a CombinedUser object containing information about a Twitter user. It returns an optional UserMassInfo object, which holds the user's ID and calculated mass score.

When computing the mass score, the algorithm considers several factors, such as:

- Account age: The duration for which the user has been active on Twitter. Older, more established accounts tend to have a higher mass score.
- The number of followers: A larger follower count often implies more significant influence and, therefore, a higher mass score.
- The number of followings: The number of users a person follows can also impact their mass score, especially when compared to their follower count.
- Device usage: The types of devices used to access Twitter may also contribute to the user's mass score.
- Safety status: Whether the user's account is restricted, suspended, or verified can play a role in determining their mass score.

The algorithm calculates the mass score by combining these factors using various weightings and adjustments. For instance, it might add or multiply weight factors associated with each element to compute the final score. Additionally, the algorithm may apply a threshold for the number of friends and followers to adjust the mass score based on the user's overall engagement on the platform.

https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/UserMass.scala

### TweepcredBatchJob

This class represents a batch job for computing the Tweepcred score using the weighted or unweighted PageRank algorithm. It extends the AnalyticsIterativeBatchJob class, part of the Scalding framework for data processing on Hadoop.
The class is responsible for configuring and running the batch job. It takes in command-line arguments like the --weighted flag, which determines whether to use the weighted PageRank algorithm. The run method prints batch statistics after the job has finished, while the children method defines a list of child jobs that need to be executed as part of the batch job.
https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/TweepcredBatchJob.scala

### ExtractTweepcred

This job calculates Tweepcred from a given PageRank file. It adjusts the scores based on the user's follower-to-following ratio if the post_adjust flag is set. The class reads the PageRank file and a user mass file in TSV format and combines them to produce a new PageRank file with the adjusted values. The adjusted PageRank is then used to calculate Tweepcred values written to output files.

https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/ExtractTweepcred.scala

### PreparePageRankData

This class prepares the graph data for the PageRank calculation, generating the initial PageRank and starting the WeightedPageRank job. It reads user mass and graph data, generates the initial PageRank from the graph data, writes the number of nodes to a TSV file, and dumps the nodes to another TSV file. The class also has several options for fine-tuning the PageRank calculation.

https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/PreparePageRankData.scala

### WeightedPageRank

WeightedPageRank is a class that performs the weighted PageRank algorithm on a given graph. The algorithm starts from a given PageRank value and performs one iteration, then tests for convergence (When the numbers don't change anymore or change very little).

If convergence hasn't been reached, the algorithm clones itself and starts the next PageRank job with the updated PageRank as input. If convergence has been reached, the algorithm starts the ExtractTweepcred job instead.

This class takes in several options, including the working directory, the total number of nodes, nodes file, PageRank file, absolute difference, whether to perform weighted PageRank, the current iteration, maximum iterations to run, probability of a random jump, and whether to do post adjust.

https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/WeightedPageRank.scala

### Reputation

This helper class, Reputation, contains methods for calculating a user's reputation score. The scaled reputation method takes a raw PageRank score and returns a reputation score on a scale of 0 to 100. The adjustReputationsPostCalculation process reduces the PageRank of users with a low number of followers but a high number of followings, calculating a division factor based on the ratio of cults to followers and dividing the user's PageRank by this factor. The method returns the adjusted PageRank.

https://github.com/twitter/the-algorithm/blob/main/src/scala/com/twitter/graph/batch/job/tweepcred/Reputation.scala

### Putting It All Together

Now that we've looked at the main classes that power Tweepcred let's see how they all work together to calculate a user's reputation score.

- First, the TweepcredBatchJob starts the process by running a batch job to compute Tweepcred scores using the weighted or unweighted PageRank algorithm.
- PreparePageRankData reads user mass and graph data, generates the initial PageRank, and starts the WeightedPageRank job.
- WeightedPageRank performs the PageRank algorithm on the graph data, checking for convergence after each iteration. If the algorithm converges, it starts the ExtractTweepcred job.
- ExtractTweepcred adjusts the PageRank scores based on the user's follower-to-following ratio and calculates the final Tweepcred scores.
- The Reputation helper class is used throughout the process to convert raw PageRank scores to reputation scores and to adjust the scores post-calculation.
- UserMass calculates the "mass" of a user on Twitter, contributing to the reputation calculation.

## Twitter's Biggest Ranking Factors

Like SEO ranking factors, understanding and focusing on these elements can help you optimize your Twitter presence and enhance your influence. Here are some of the most critical factors for ranking on Twitter, according to Tweepcred's logic:

- Mentions and Retweets: In the Tweepcred service, interactions like mentions and retweets form the edges of the network graph. The more you are mentioned or retweeted by other influential users, the higher your PageRank score, indicating a more significant influence on the platform.
- Quality Connections: The PageRank algorithm considers the number of interactions and the quality of users interacting with you. Engaging with influential users in your niche can help boost your ranking, as their high PageRank scores positively impact your score.
- Consistent Activity: The UserMass class considers age when calculating a user's mass. Maintaining a constant presence on the platform by regularly posting engaging content and interacting with others helps improve your Reputation and contributes to a higher Tweepcred score.
- Follower-to-Following Ratio: The Tweepcred algorithm adjusts the PageRank values based on the user's follower-to-following ratio. A higher percentage, which indicates a more influential account, can increase your Tweepcred score.
- Safety Status: The UserMass class also considers the user's safety status, such as whether the account is restricted, suspended, or verified. A verified account or one in good standing is more likely to have a higher mass score, which can, in turn, boost the Tweepcred ranking.

To improve your Tweepcred ranking and overall influence on Twitter, focus on fostering quality connections, engaging consistently with your audience, and maintaining a healthy follower-to-following ratio. By incorporating these factors into your Twitter strategy, you can enhance your presence on the platform and achieve long-term success.

Tweepcred is a powerful tool that helps Twitter understand the influence and Reputation of its users. The PageRank algorithm and a series of Scala classes can calculate a user's reputation score based on their interactions with others on the platform. This helps Twitter recommend users to follow and highlight content from influential users.

Now that you have a solid understanding of Tweepcred and how it works, you can appreciate the magic behind the scenes on Twitter. And who knows this newfound knowledge will inspire you to create your own reputation engine for your platform!


Building Things With Javascript

7 Git Commands You'll Love

Unveiling Tweepcred: The Power Behind Twitter's Recommendation Engine

Level Up Your React Error Handling with Error Boundaries

8 Ways to Boost Your Website Performance

Building Two Different Types of Progress Bars