
Scroll to anchor is a technique widely used to move the scroll position to an specific element that has an id assigned. This can have a lot of use cases and you can find it in landing pages, articles with multiple headings, and any other use that you can come up with right now.

The code is really simple to achieve this

```html
<a href="#second-header">Go to second header</a>
<h2 id="second-header">My second header</h2>
```

If you click the anchor link the browser will scroll to where the second header is located.

This is simple until the dom in the first load does not have the element with the id assigned. If it's not present the user will not scroll to anywhere. And the actual problem is that if the element is dinamically injected to the page using javascript the browser **will not** scroll either.

In my quest to achieve a solution to this I came up with this reusable react hook:

```typescript
import { useLayoutEffect } from "react";
import { useLocation } from "react-router-dom";

export function useAsyncScrollAnchoring() {
  const { hash } = useLocation();
  useLayoutEffect(() => {
    if (!hash) return () => {};
    const getLinkedElement = () => document.getElementById(hash.substr(1));
    let element = getLinkedElement();
    if (element) {
      element.scrollIntoView();
      return () => {};
    } else {
      const onMutation: MutationCallback = (entries, observer) => {
        const element = getLinkedElement();
        if (element) {
          element.scrollIntoView();
          observer.disconnect();
        }
      };
      const mutationObserver = new MutationObserver(onMutation);
      mutationObserver.observe(document.body, {
        subtree: true,
        childList: true,
      });
      return () => {
        mutationObserver.disconnect();
      };
    }
  }, [hash]);
}
```

What this does is, whenever react finishes all dom mutations, the effect is ran and check if there is a hash set first, if there isn't stop there and we are good to go.
If that's not the case we check if the element is already in the page and scroll into it, this behavior is native on all browsers, however if the content is displayed asynchronously we still need to do this ourselves. Then, if it's not there already we have to listen for mutations in the document, so for every dom mutation that happens inside the body (perhaps it would be better to attach it to the react root but I'd leave that to your own choice) we check if exists an element with the id equal to the hash, in that case scroll that element into the view and disconnect the observer. Otherwise, do nothing and keep listening.

I'll [leave a codesandbox here](https://codesandbox.io/embed/festive-sky-hxnmi?fontsize=14&hidenavigation=1&theme=dark) demonstrating the use case of this.

That's it then, hope this trick would be useful to any of you.

Until next time 👋


Scroll to anchor on dynamic interfaces


Long time no see.

Almost a year ago I had to build a notification system for an application. And a college recommended the use of [Notistack](https://github.com/iamhosseindhv/notistack) which integrated well with its React Native project and that's what drove him to suggest it.

I glued all the pieces together, and had a working notification system in a very short time. However, the notifications didn't look good with the rest of the application.

Notistack has a section in their documentation specifically for custom snackbars so you can integrate them with the overall design of your application.
By default, Notistack snackbar's design follows a Material Design style. So, perhaps you don't have to customize much and get away with it by modifying a few bits here and there in ten lines of css or override the styles with your own classes.
However, you don't always have that luxury and need to revamp the whole thing.

Let's start by reviewing how Notistack works and which options give us to achieve our goal.

For starters, we need to render a context provider which will store the state of notifications. This provider, which is called `SnackbarProvider`, should wrap our application or the parts of the application that are going to display them. The documentation warns us that if we are using MaterialUI, and want to leverage its styles, the context provider should live under MaterialUI's `ThemeProvider`. I used Styled Components, so the `SnackbarProvider` should be a child of Styled Components `ThemeProvider`.

Let's say we have a component called `App` which encapsulates our whole application and routes. Then, `SnackbarProvider` should wrap our `App` component.

```tsx filename=Root.tsx
import { SnackbarProvider } from "notistack";

export function Root() {
  return (
    <SnackbarProvider>
      <App />
    </SnackbarProvider>
  );
}
```

Perfect.

Next, we have to execute a function that will show the snackbar. Let's make use of the hook that will use the snackbar context and destructure the method `enqueueSnackbar` which will tell the snackbar context that we want to display a new snackbar.<br />
The method accepts two parameters. The first one is a message like for example "User created", and the second parameter is an object of options for the snackbar being queued. This data will be fed into the snackbar context and push it into an array of snackbars and based on the stack of snackbars it will display the snackbar added.

In our `App` component we could have something like this:

```tsx filename=App.tsx copy
import { useSnackbar } from "notistack";

export function App() {
  const { enqueueSnackbar } = useSnackbar();

  function showSnackbar() {
    enqueueSnackbar("User created", { variant: "success" });
  }

  return <button onClick={showSnackbar}>Show snackbar</button>;
}
```

And when the button is clicked, the snackbar will be shown.

Now, the issue comes when we want to have a completely different component for the snackbar than the default one so we can have more flexibility.

Let's create our own snacbkar component.

```tsx filename=Snackbar.tsx
import { useSnackbar } from 'notistack';

interface Props {
  id: string;
  message: string;
  variant: 'success' | 'error';
}

export function Snackbar({ id, message, variant }: Props) {
  const { closeSnackbar } = useSnackbar();
  const handleCloseSnackbar = () => closeSnackbar(id);

  return (
    <SnackbarContent>
      <Container>
        {variant === 'success' ? <CheckIcon /> : <TimesIcon />}
        <MessageContainer>
          {message}
        </MessageContainer>
        <DismissButton onClick={handleCloseSnackbar}>
          <ScreenReaderOnlyText>Close snackbar<ScreenReaderOnlyText>
          <CloseIcon aria-hidden />
        </DismissButton>
      </Container>
    </SnackbarContent>
  );
}
```

With this in place we can use it as our default snackbar component as [notistack's custom snackbar documentation section says](https://iamhosseindhv.com/notistack/demos#custom-snackbar)

We go back to our `Root` component where the `SnackbarProvider` is living:

```tsx filename=Root.tsx
import { SnackbarProvider } from "notistack";
import { Snackbar } from "components/Snackbar";

export function Root() {
  return (
    <SnackbarProvider
      content={(key, message) => <Snackbar id={key} message={message} />}
    >
      <App />
    </SnackbarProvider>
  );
}
```

But. Wait. Where is the variant prop?

Yes.

The render function does not receive more arguments than those, only `key` and `message`. So, we're done here right?

No. Let's come up with a solution. If we take a closer look to the documentation, the `enqueueSnackbar` function's second argument is an options object and between those options there is a `content` prop. Therefore, we can make our own custom hook calling the `enqueueSnackbar` function but providing our own snackbar component with the options we want. This custom hook should accept the same parameters as the `enqueueSnackbar` function but extending the functionality and the types of them.

```tsx filename=useEnqueueSnackbar.tsx
import { useSnackbar as useDefaultSnackbar, OptionsObject } from "notistack";
import { Snackbar } from "components/Snackbar";

export const useEnqueueSnackbar = () => {
  const { enqueueSnackbar } = useDefaultSnackbar();

  const pushSnackbar = (
    message: string,
    // extend the default options object
    options?: OptionsObject &
      Partial<{ variant: "success" | "error" | "warning" }>
  ) => {
    enqueueSnackbar(message, {
      ...options,
      content: (key) => {
        // destructure the options we need from the extended options
        // object, and provide a default case if we didn't provide any
        const { variant } = options || { variant: undefined };
        return (
          <Snackbar
            id={`${key}`}
            message={message}
            variant={variant || "success"}
          />
        );
      },
    });
  };

  return pushSnackbar;
};
```

Perfect. This is looking good. Now, instead of using the snackbar context, we can import this hook, execute it to get the callback and run the callback in the place we want to show the snackbar.

Moving to our `App` component we should do this:

```tsx filename=App.tsx
import { useEnqueueSnackbar } from "hooks/useEnqueueSnackbar";

export function App() {
  const enqueueSnackbar = useEnqueuSnackbar();

  function showSnackbar() {
    enqueueSnackbar("User created", { variant: "success" });
  }

  return <button onClick={showSnackbar}>Show snackbar</button>;
}
```

And this should show our own snackbar component with the `variant` prop provided.

Phew! That was a short but intense journey.

When I stumbled upon this problem I looked into notistack's repository and found out that this was actually an issue that was being tracked.

I provided this article's solution [as a comment](https://github.com/iamhosseindhv/notistack/pull/259#issuecomment-696814874) in [the PR that attempted to fix this problem](https://github.com/iamhosseindhv/notistack/pull/259) so anyone could benefit from it.

References:

- https://iamhosseindhv.com/notistack/api#mutual


Custom snackbar with notistack


## Pre-installation

One of the dependencies that telescope requires is ["moontoast/math"](https://github.com/moontoast/math) which in fact requires a php extension called "bcmath":

```json
// "moontoast/math" - "composer.json"
"require": {
        "php": ">=5.3.3",
        "ext-bcmath": "*"
},
```

This php extension is easily installable on Ubuntu by just running:

`sudo apt install php-bcmath`

Once you have that extension installed, you are ready to require via composer the Telescope package by running in your project's root:

`composer require laravel/telescope --dev`

## Configuration

Now you will have available new artisan commands:

```
telescope
  telescope:clear      Clear all entries from Telescope
  telescope:install    Install all of the Telescope resources
  telescope:prune      Prune stale entries from the Telescope database
  telescope:publish    Publish all of the Telescope resources
```

We need to run `telescope:install` which it will write into the configuration folder of your project a new file called `telescope.php`

### Security

Laravel Telescope provides a lot of information of your application which you do not want anyone to see, so you'll have to secure the installation.
By default, after installing telescope it will be accesible in every environment. And we want it just on the **local environment**. Therefore, we head to `config/app.php` and remove the line with the **TelescopeServiceProvider** from the providers array.

And now register it in the `app/Providers/AppServiceProvider.php` file:

```php
/**
* Register any application services.
*
* @return void
*/
public function register()
{
    if ($this->app->isLocal()) {
    	$this->app->register(TelescopeServiceProvider::class);
    }
}
```

This will detect your environment on the application booting process and register the Telescope Service Provider a.k.a make telescope available only on your _local_ environment.

### Database connection

This is the key of this tutorial. In order to separate laravel's telescope information from our main database we need to create a new one

#### First

Open your sql interpreter and create a new database running the next sql query:

`create database laravel_telescope;`

#### Second

Open your `config/database.php` and head to the connections array, **copy the entire mysql connection** (if you are using mysql if not copy the connection information of your database), append the copied information at the end of the _connections_ array, then change all of the constants that start with **DB\_** and change them to **TELESCOPE*DB*** looking like this:

```php
'telescope' => [
    'driver' => 'mysql',
    'host' => env('TELESCOPE_DB_HOST', '127.0.0.1'),
    'port' => env('TELESCOPE_DB_PORT', '3306'),
    'database' => env('TELESCOPE_DB_DATABASE', 'forge'),
    'username' => env('TELESCOPE_DB_USERNAME', 'forge'),
    'password' => env('TELESCOPE_DB_PASSWORD', ''),
    'unix_socket' => env('TELESCOPE_DB_SOCKET', ''),
    'charset' => 'utf8mb4',
    'collation' => 'utf8mb4_unicode_ci',
    'prefix' => '',
    'prefix_indexes' => true,
    'strict' => true,
    'engine' => null,
]
```

#### Third

Go to your **.env** file and add the new constants:

```
TELESCOPE_DB_CONNECTION=telescope
TELESCOPE_DB_HOST=127.0.0.1
TELESCOPE_DB_PORT=3306
TELESCOPE_DB_DATABASE=myproject_telescope
TELESCOPE_DB_USERNAME=secret
TELESCOPE_DB_PASSWORD=secret
```

**Psst!** Don't forget to change the credentials above according to your project's needs, we all know you have copied these :)

#### Fourth

Go to `config/telescope.php` and change the line where it says:

```php
'storage' => [
    'database' => [
        'connection' => env('DB_CONNECTION', 'mysql'),
    ],
]
```

for:

```php
'storage' => [
    'database' => [
        'connection' => env('TELESCOPE_DB_CONNECTION', 'mysql'),
    ],
]
```

## Final step! Yay!

Now head to the terminal again and run `php artisan migrate`
If you see these lines:

```
Migrating: 2018_08_08_100000_create_telescope_entries_table
Migrated:  2018_08_08_100000_create_telescope_entries_table
```

Everything is looking in the right direction.

## Give your information Laravel!

Now, go to your browser of liking and write in that pretty url bar the domain with the `/telescope` path. For instance if my project is running under https://myawesomeproject.test then you'll head to https://myawesomeproject.test/telescope

If you see something like this

<Img
  src="images/dedicated-laravel-telescope/laravel-telescope.png"
  alt="Laravel telescope home page"
/>

You have finished the installation, now make good use of the information telescope provides to enhance your programming productivity!

## Update

### Testing environment

If you are going to run `phpunit` after you've install Laravel Telescope this way, you'll notice there will be some errors thrown, that's because we keep using the same connection for the database and when we try to make use of the trait `RefreshDatabase` it will try to migrate also Telescope's migrations.

In order to disable laravel telescope migrations in your tests head to `tests/CreatesApplication.php` and change the `createApplication()` method like this:

```php
/**
  * Creates the application.
  *
  * @return \Illuminate\Foundation\Application
  */
public function createApplication()
{
    $app = require __DIR__.'/../bootstrap/app.php';

    Telescope::ignoreMigrations();

    $app->make(Kernel::class)->bootstrap();

    return $app;
}
```

Notice the `Telescope::ignoreMigrations();` line is right **before** bootstraping your application!


How to install Laravel Telescope on a dedicated database


<figure>
  <Img
    style={{ maxWidth: "500px" }}
    src="images/css-exclusions/terminology.png"
    alt="exclusions terminology"
  />
  <figcaption>
    Source:{" "}
    <a href="https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey">
      CSS exclusions with Queen Bey - Chen Huijing
    </a>
  </figcaption>
</figure>

Let's introduce: **Exclusions**. This is a new feature coming up to the CSS of the future. And I say that because currently this feature is only supported in two browsers: IE and Edge 😮 and there is a [working draft spec](https://www.w3.org/TR/css3-exclusions/).

Now, what does this new feature do? Well, do you remember _floats_? Perfect, because _exclusions_ are somewhat floats but behave differently. OK, let me explain it. Floats are used for (~~layout~~) wrapping content around an element that is floated. Therefore...

> Exclusions are a block-level element which is not a float and generates an exclusion box.

And... exclusions are required to be used in conjunction with `wrap-flow` in order to define how the inlined content is going to surround the excluded element. The value of the `wrap-flow` property has to be other than `auto` to make this feature kick in. Also, exclusions won't work if we position the element _floated_. Having these things in mind, exclusions will work.

As I said [the support of this feature](https://caniuse.com/#feat=css-exclusions) is not spreaded at all although is a pretty interesting feature to have, and some use cases are going to be discussed in this article.

## `wrap-flow`

This property is going to specify where should the inline content surround the element.

Its values are: auto, both, start, end, minimum, maximum, and clear.

**auto**: it is not going to create any exclusion box.

**both**: the content will flow on all sides of the exclusion.

<figure>
  <Img
    src="images/css-exclusions/wrap-flow.png"
    alt="wrap flow both visualization"
  />
  <figcaption>
    Source:{" "}
    <a href="https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey">
      CSS exclusions with Queen Bey - Chen Huijing
    </a>
  </figcaption>
</figure>

**start**: the content will flow around the left side or start edge of the excluded element.

**end**: the content will flow around the right side or end edge of the excluded element.

**minimum**: the content will flow around the side which has less available space.

**maximum**: the content will flow around the side which has more available space.

**clear**: the content won't flow, the excluded element will break the content.

This property is what makes the exclusion work, there is no excluded property or anything like that, exclusions are just a concept, or a way to name this behavior.

## `wrap-through`

With this property we can specify how the content that flows is going to behave. There are two values for this property: wrap and none.

**wrap**: it inherits the parent node's wrapping context. Nothing happens, flow it is still happening.

**none**: the element does not inherit its parent wrapping context. Flow won't happen.

<figure>
  <Img
    src="images/css-exclusions/wrap-through.png"
    alt="wrap through both visualization"
  />
  <figcaption>
    Source:{" "}
    <a href="https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey">
      CSS exclusions with Queen Bey - Chen Huijing
    </a>
  </figcaption>
</figure>

## A use case

Editorial layout - discussed by Rachel Andrew in [this article](https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/) and also by Rob Weychert in [this other blog post](https://v6.robweychert.com/blog/2018/11/css-grid-editorial-layouts/)

In this use case Rob says that floats are not compatible with grid, which is true, and using actually grid values to solve this problem, however, Rachel in her article discusses this problem and solves it by using exclusions.

## IMO

Exclusions definitely have a great potential in layouts. And again developers don't do many efforts to make the people from the browser vendors to know this spec exists and implement it. This can be done through their forums and bug fillers and so on. We already have a lot of tools to make great layouts but sometimes we may get stuck on accomplishing some design and start to make some hacks, while in reality we should be able to have enough features to make really complex layouts without having to use "hacks". Finally, this part is what makes web development exiting because developers actually have a real impact on what features are going to be shipped into browsers. **If you really want to learn MUCH more of this topic, please, check the sources out.**

## Sources

- [Exclusions will hopefully be like more powerful grid-friendly floats - CSS-TRICKS](https://css-tricks.com/exclusions-will-hopefully-be-like-more-powerful-grid-friendly-floats/)
- [Editorial Layouts, Floats, and CSS Grid - Rob Weychert](https://v6.robweychert.com/blog/2018/11/css-grid-editorial-layouts/)
- [Editorial Layouts, Exclusions, and CSS Grid - Rachel Andrew](https://rachelandrew.co.uk/archives/2018/11/09/editorial-layouts-exclusions-and-css-grid/)
- [CSS Exclusions Module Level 1 - Rossen Atanassov, Vincent Hardy, Alan Stearns](https://www.w3.org/TR/css3-exclusions/)
- [CSS exclusions with Queen Bey - Chen Huijing](https://www.chenhuijing.com/blog/css-exclusions-with-queen-bey)


Css Exclusions


## Introduction

Popular products that require a a well-controlled scroll system make use of Javascript to divide the sections of the scrollable content in order to display it always in the viewport. What these products try to achieve is a paging experience. Because it is more appealing to a user to scroll like pages rather than controlling by itself the scroll. So what this means after all is: is better to make sections that list items with a controlled scroll than letting the user to scroll it.

For example: if we have a section where we display items horizontally and the scroll is not controlled then the user has to scroll by itself the whole panel, while if we have the scroll controlled the user may just swipe to left and the system will scroll for itself.

This pattern provides a better user experience and will improve the time of engagement with the users.

For many years this improvement had to be done with javascript and it had an impact in the website performance because it required a lot of calculations if we wanted to have animations in the scrolling or calculating items width to show them in the viewport without being cut.

## Introducing scroll-snap property

Today we can use a CSS property called `scroll-snap-type` which allows us to achieve the same result that we made with javascript but with css, meaning great improvements in performance.

This feature is meant to be used in conjunction with a container and its children. Therefore, we'll have two kinds of places to use the scroll snap feature.

For the container we have the following properties:

- scroll-snap-type
- scroll-snap-stop
- scroll-snap-padding and its derivatives

For the children we have:

- scroll-snap-align
- scroll-snap-margin and its derivatives

### scroll-snap-type

This property defines how snap points are enforced. Its values are: `none`, `x`, `y`, `block`, `inline`, `both`, `mandatory`, and `proximity`.

The none value will tell the container to ignore snap points. X and Y will tell the container to snap positions in their axis. Block will tell to snap in its block axis, and inline in its inline axis.

Mandatory, the container will rest on a snap point if its not scrolled. It will snap when the scroll action is finished. If content is added, resized, or removed it will be auto adjusted to maintain the resting.

Proximity, the mandatory acts like if the container has been scrolled then we have to finish that scroll action, but proximity doesn't act until the next item is near to that threshold.

Mandatory and Proximity are optional values but these are actually the **key** to this feature.

### scroll-snap-align

This property defines where should stop the scroll. Its values are: `start`, `center`, `end`. Therefore, if we set the value to `start` the container will leave the start of the child at the left of the container. If we have it on `center` the center of the child will be centered with the container, and finally the `left` value will leave the left side of the child at the left of the container.

<Img
  style={{ width: "auto", height: "320px" }}
  src="images/scroll-snap-property/start.jpg"
  alt="Scroll snap type start"
/>

<Img
  style={{ width: "auto", height: "320px" }}
  src="images/scroll-snap-property/center.jpg"
  alt="Scroll snap type center"
/>

<Img
  style={{ width: "auto", height: "320px" }}
  src="images/scroll-snap-property/end.jpg"
  alt="Scroll snap type end"
/>

### Support

[Can I use says](https://caniuse.com/#feat=css-snappoints) that Chrome and Safari are up to date with this feature, althought Firefox, Edge and IE 11 support and [older version of the spec](https://www.w3.org/TR/2015/WD-css-snappoints-1-20150326/), and you probably will have to use some tool to extend the support to the other browsers. So in order to see the demo below use Chrome or Safari, because I haven't added the older properties to the demo.

### Example - Gallery

```html
<div class="gallery">
  <div class="img">1</div>
  <div class="img">2</div>
  <div class="img">3</div>
  <div class="img">4</div>
  <div class="img">5</div>
  <div class="img">6</div>
  <div class="img">7</div>
  <div class="img">8</div>
  <div class="img">9</div>
  <div class="img">10</div>
</div>
```

The css is summarize, check out the pen if you want to see the whole css code.

```css
.gallery {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: hidden;
  scroll-snap-type: x mandatory;
}

.img {
  scroll-snap-align: start;
  display: flex;
  flex: 0 0 320px;
  height: 200px;
  background: rgb(100, 100, 255);
  margin-right: 1rem;
}
```

Result:

<iframe
  height="480"
  style={{ width: "100%" }}
  scrolling="no"
  title="Css Scroll Snap Gallery"
  src="https://codepen.io/lewis_adame/embed/MzoPyZ?height=480&theme-id=dark&default-tab=result"
  frameborder="no"
  loading="lazy"
  allowtransparency="true"
  allowfullscreen="true"
>
  See the Pen{" "}
  <a href="https://codepen.io/lewis_adame/pen/MzoPyZ">
    Css Scroll Snap Gallery
  </a>{" "}
  by Luis Adame (<a href="https://codepen.io/lewis_adame">@lewis_adame</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>


Scroll Snap Property

Web application that managed data internally and provided a dashboard where this data could be visualized easily.

MKD Automotive

Web for Universo Parkour, an sports club that teaches people of any age how to practice and train Parkour.

Universo Parkour

Domicolor is a web app for extracting and displaying dominant colors from an image.

Domicolor

Web application that provides information and data about drinking fountains in Seville.

Fountain Me

Url Saver is a chrome extension that helps you to organize and save current pages in order to read/check them later.

Hello
I’m Luis

Writing

Work

Click in any of the projects below to get a more in-depth write up of the project and job done

MKD Automotive

Universo Parkour

Domicolor

Fountain Me

URL Saver