
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


So, here is a new version of one of the most beloved browser in the scene right now. Since the release of Firefox Quantum, Firefox has seen some growth in their user base, and that's not only why people has switched to the Fox browser, there seems to be a trend on getting away from Google Services and try to give some power to other companies in order to improve the balance of market share. However, there is still a long way to go. Now you'll think that I'm against Google and that's not the case, I think that Google is between the three companies that have made the world advance regarding technology, but Google is **really** big, and owns a lot of things. And, in the blink of an eye the company which motto is: [_Don't be evil_](https://en.wikipedia.org/wiki/Don%27t_be_evil) can suddenly change.

Anyways, this is not the scope of this article.

Let's talk about the new features that Firefox 63 ships in:

- [Accesibility menu enabled by default](#accesibility-menu)
- [Web Components support (finally!)](#web-components)
- [Fonts editor](#fonts-editor)
- [Reduced motion preferences](#reduced-motion-preferences)

We'll talk briefly about [other improvements](#other-improvements) which in my opinion deserve an spot here.

## Accesibility menu

<Img src="images/accesibility_menu.png" alt="Accesibility menu tab" />

The accesibility menu is now enabled by default which is really helpful for developers nowadays (in case you don't know, some big companies in America get sued because they do not comply with accesibility rules imposed by governments).

<Img
  src="images/accesibility_tool_overview.png"
  alt="Accesibility tool overview"
/>

This tool will help you get information which is exposed to assitive technologies and you will be able to check what's missing. You'll get information from each of the page's elements.

## Web components

Alright, this is probably the most important point to talk about in this article.

### What are Web Components, Luis 🤷‍? (you'll say)

Quoting the [Web components section](https://developer.mozilla.org/en-US/docs/Web/Web_Components) from [Mozilla Developer Network](https://developer.mozilla.org/):

> Web Components is a suite of different technologies allowing you to create reusable custom elements — with their functionality encapsulated away from the rest of your code — and utilize them in your web apps.

The set of technologies that they talk about are:

- Custom elements: basically, the ability to create or define your own HTML tag 😎
- Shadow DOM: the shadow DOM is a DOM tree attached to an element and you can't see, in order to keep an element's features private. This prevents collisions with other elements from the page. 💪
- HTML Templates: this enables the `<template>` and `<slot>` elements which allow you to define templates that can be reused in a custom element's structure.

And this, friends, opens up a **new universe of possibilities** in the web development industry and **at the same time** could mean a _disaster_, because now anyone can create their own elements and there will be elements that will be called the same and there's no specification for that.

### Short intro to custom elements

Let's create an element that will be underlined and when it's hovered it will show an alert dialog, why not?

```javascript
class ScaryDialog extends HTMLElement {
  constructor() {
    super();
    this.addEventListener("mouseover", this.showDialog, false);
    this.style.textDecoration = "underline";
  }
  connectedCallback() {
    console.log("Dialog ready!");
  }
  disconnectedCallback() {
    console.log("Short but intense...");
  }
  showDialog() {
    alert("BUUUUH!");
  }
}
customElements.define("scary-dialog", ScaryDialog);
```

If you have a web browser that [supports web components](https://caniuse.com/#feat=custom-elementsv1) you'll see the result beneath.

If you can't see it, then your browser doesn't support yet custom elements. Currently only Chrome 67 to newer and Firefox 63 to newer fully support it, other browser may partially support it.
We could have created a _template_ and added it to our custom element using _Shadow Dom_ but I think this is okay for now. If you are interested in this technology go checkout the [MDN section for this](https://developer.mozilla.org/en-US/docs/Web/Web_Components).

## Fonts Editor

<Img
  style={{ height: "500px", width: "auto" }}
  alt="Fonts editor panel"
  src="images/fonts_editor_panel.png"
/>

The fonts panel from the inspector tool it's a pretty handy tool. It allows you to see what fonts are being used in the page. You can see all the possibilities for font debugging with the demonstration below.

<img alt="Fonts editor in action" src="/images/fonts_editor.gif" />

## Reduced motion preferences

Now, you can detect via the [`prefers-reduce-motion` media query](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) that the user or system has preferred not to use animations. Animations give the website a better impression and gives more dynamism but sometimes there are some low end devices that can't render those animations at a constant frame rate or simply they don't have the resources. So, now with this media query we can target that audience and provide them a better user experience disabling animations for them. And everyone will be happy 😁

[An Introduction to the Reduced Motion Media Query](https://css-tricks.com/introduction-reduced-motion-media-query/) this is a good article from _Eric Bailey_ on Css-Tricks that explains more deeply this subject.

## Other improvements

Well, this may not seem important to us developers, but every little step counts towards a better ecosystem, and I think every improvement should be noticed, not just because may be better for us but also because other developers have contributed and spent time improving the browser and they deserve their contributions to be told.

First, improvements for Windows users: Firefox uses now the [Clang toolchain](https://clang.llvm.org/docs/Toolchain.html) which provides better performance.

And second, for macOS users:

- The reactivity of the browser has been improved
- There is a faster tab switching
- In multi-GPU systems WebGL preferences allow non-performance-critical applications and applets to request the low-power GPU instead of the high-power.

And last but not least, WebExtensions now run in their own process on Linux 🎉, thumbs up for component decoupling in browsers.

## Sources

To write this article I've used the information given by these articles, you can check them out and get a more in-depth knowledge about the subjects written here.

- [Firefox 63 – Tricks and Treats!](https://hacks.mozilla.org/2018/10/firefox-63-tricks-and-treats/) by [Potch](potch.me)
- [Firefox 63 Release Notes](https://www.mozilla.org/en-US/firefox/63.0/releasenotes/)


Firefox 63 New Features


# Vue's next version (3.0) changes and features

As the time goes on, all major browsers have adopted ES2015 and a lot features that Vue tries to solve are already solved in this language version, so Vue will get rid of this features and leverage on those implemented in the language itself in order to make the core of the framework smaller, faster and more powerful.

### High-level API changes

Regarding the API of the framework **everything** is gonna be **untouched except for render functions and scoped-slots** which will probably change their syntax. This change could be compatible with the 2.x version by a compatibility build.

An interesting feature that is going to come in the next release is the **support to class-based components**. Meaning that we will be able to **write components just using the [class syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/class#Syntax)** without the need of transpilation or stage-x features. This doesn't mean that we could not use some futuristic stage-x features cause there will be a mapping with those classes so you would still be able to use features from next generation EcmaScript versions. **The object-based component format will still be supported transforming that object into a class internally**.

Functional components will be plain functions and async components will need the use of a helper function.

### Architecture

As the new version is going to be rewritten in TypeScript the decoupling of the internal modules is gonna be much better.

What does this actually mean to me?

Alright, so having more modular internal components means that the tree-shaking of the build is going to be better and will result in smaller bundle sizes in your application.

### Observation Mechanism

The observation mechanism in the current version of VueJs is based on the JavaScript feature `Object.defineProperty`method. So this creates a few problems that may not seem visible at first but that are there. For example, if we have a Vue instance we have to declare the data in that object passed in the constructor, and we can't change the data object and expect Vue to change it by itself. This means...

```javascript
const vm = new Vue({
  data: {
    a: 1, // a is reactive
  },
});

vm.b = 2; // b is not reactive
```

In the example above we can see clearer what I explained before. The property `a`is reactive because it was defined in the object passed in the constructor which made Vue create internally some `getters/setters` that are used by Vue to make it's famous reactivity work. So, because of that creation of getters and setters in the initialization process the new property added to the data object (`b`) is not reactive because there are no getters and setters for that property. We can see this cycle more clearly on this diagram:

<img src="https://vuejs.org/images/data.png" alt="Vue render life cycle" />

Then, to solve this problem we need to implicitly tell Vue to add a property to the data object, to do so we need the use of the method `Vue.set(object, key, value)`. However, this is still a problem because, what happens if we want to add multiple properties to the data object? Fortunately we have a feature in the JavaScript language that let us merge two objects which is `Object.assign({}, ob1, {p1: 1, p2: 2})` , and using this feature we can do the following solution:

```javascript
const vm = new Vue({
  data: {
    message: "Hello",
  },
});

// then I want to add dynamically a user property
vm.$set(this.data, "user", { name: "Luis" });

// or if we want to add multiple properties
let moreData = {
  user: {
    name: "Luis",
  },
  post: {
    slug: "new-changes-vue",
  },
};

let data = Object.assign({}, vm.data, moreData);
vm.$set(this, "data", data);
```

But, this is **ANNOYING!**

Vue's next version uses [Proxies](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Proxy) as the saviors of this mess. This will solve mainly:

- Detection of property addition / deletion.
- Detection of Array index mutation / .length mutation.
- Support for Map, Set, WeakMap and WeakSet.

Another interesting improvement that Proxies will bring is right on the startup of the application, where if you had a huge dataset it would cause a noticeable overhead but now only the data used to render the view is observed.

In conclusion, Proxies will make Vue have more complete, precise, efficient and debuggable reactivity tracking & API for creating observables.

### Other improvements

As we said before, having a more modular codebase means that is better for tree-shaking and this translates to a smaller size. More precisely: **< 10kb for the new runtime**.

The benchmarks state that there seems to be a performance improvement up to 100%.

There will be support for Fragments and Portals. **Fragments** are components that **return multiple node roots** , which was impossible before because you needed a div to wrap your components markup that would serve as the component root node. So Fragments allow you to have multiple root nodes, meaning there is no single div needed to wrap up all your markup. And Portals allow you to render a sub-tree in another part of the DOM.

### IE11 Support

When we talk about Proxies we talk about saying goodbye to IE 11 which doesn't support them as [CanIUse states](https://caniuse.com/#feat=proxy), currently there is a 87.17% global support for proxies. But Vue will have a compatible build ready to use for IE11 support.

**Source**: If you want to see a more detailed version of this article head to the source [article written by the creator of Vue (Evan You) on The Vue Point](https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf).


Vue Next Version 3


## What is Kubernetes?

A system for managing containerized applications across multiple hosts, providing basic mechanisms for deployment, maintenance, and scaling of applications.

Some examples of the possibilities of Kubernetes are:

- Automation of deployment and replication of containers.
- Scaling in or out containers on the fly.
- Group containers and provide load balancing between them.
- Simplicity on rolling out new versions of application containers on production, without downtime.
- The resilience of containers. If a container dies, it gets automatically replaced.

## Kubernetes' Infrastructure

<Img
  src="images/kubernetes-introduction/kubernetes-infrastructure.jpg"
  alt="Basic Kubernetes Cluster Diagram"
/>

Basically, the core fundamental objects in the cluster are Pods, Services, Volumes, and Namespaces.

### Pods

[1]: https://kubernetes.io/docs/concepts/workloads/pods/pod/ "Pods"

A pod is the basic building block in the system. Is the smallest unit in the object model. And this represents a running process in the cluster. This object encapsulates an application container (or multiple), storage resources, a unique network IP, and options to manage the container's behavior.
The most common container runtime used is Docker.

#### And what is docker?

Well, docker is a platform to _develop, deploy and run_ an application within containers. This concept leads to _many_ advantages over the conventional way of developing applications. Having applications containerized let's you port the application to other environments with the same characteristics of the **image** hence making sure it will always work. An **image** is an executable package which contains everything needed to run your application: the code, libraries, configuration files, servers, etc. An image is a perfect environment for your application because it is configured _programmatically_ via the _Dockerfile_ defined by the developer. These packages only contain the dependencies specified and nothing else.

#### Isn't Docker and Kubernetes the same thing?

No. Docker is what helps you create the perfect environment for your application and Kubernetes is an orchestration platform which is responsible for making sure the deployments are successful, the application is always up by creating replicas and load balancing the requests. And by _application_ I mean all the components that make your application a single unit. That is, for example, the front-end is made with Flask in python but some data is processed in another pod with a micro-service written in Go, and the images are stored in away from these two. So Kubernetes is the tool to allow your multiple containers work in harmony between them.

**NOTE**: Kubernetes supports other containerization platforms such as Rocket.

#### Networking

A pod has a unique IP address. Containers inside the pod talk with each other through `localhost`, because containers share the same namespace (IP and ports). But containers can communicate with other entities outside the Pod and the containers coordinate themselves on how they use the shared network resources.

#### Storage

A pod can have multiple storage volumes and containers can share data between those volumes.

---

A pod is not designed for durability, these objects are created only for the specific process given, this is if a node fails or something happens the pods are terminated, and controllers are the responsible for recreating the pods based on the template given.

#### Labels

Pods can have defined Labels. Which are key-value pairs and convey user-defined attributes. A clear advantage of Labels is that we can target pods by labels and apply them unique Services or Replication Controllers.

### Services

As I said before, Pods are not durable and neither are designed for that. Pods are just instances of containers that may suddenly die, because of anything. So, let's actually imagine that we have a set of Pods which are responsible for a specific part of our app, and another set of Pods that are responsible for another part. How do any of them communicate with each other? Well, Pods are given a unique IP but this IP may change. And the pod that wants to communicate with other pods shouldn't be tracking those changes, we would be handing Pods a task that shouldn't be for them. That's where **Services** take part in.

Services define a logical set of pods and a policy by which to access them. Usually, pods are contained in a Service because they are defined to do so by a _Label Selector_. Services provide a stable virtual IP address (VIP). What this means is that it provides a traffic forwarding to one or more pods.

In summary, the service will create a stable unique IP address which will be visible to other objects that want communicate with it by the Label. And the service provides traffic forwarding incoming from outside and decide to which pods should be handed the incoming request.

### Volumes

Volumes solve two main problems in Kubernetes. As Pods are volatile the files are not saved when the pod dies. It will start again in a clean state. And also when a pod has multiple containers they need to share files. So, Volumes are the solution for that.

They are directories accessible to all containers running in a Pod. And the data that is stored in a Pod is preserved after restarts.

However, there are several types of Volumes:

- node-local (`emptyDir`)
- file-sharing (`nfs`)
- cloud storage (Cloud providers like Azure or AWS. `awsElasticBlockStore` and `azureDisk`)
- distributed file system (`glusterfs`)
- special purpose (`gitRepo` and `secret`)

There are more providers but they serve the same purpose stated in the list above.

### Namespaces

Namespaces provide a scope for the object inside of it. It is considered a place where users work on it, and there are objects that are namespaced while others don't. With Namespaces, you can set up access control and resource quotas. Namespaces also serve to divide cluster resources between users.

Low-level objects like nodes and persistenVolumes are not in any namespace.

Resource quotas exist to limit the usage of resources of a cluster between users. So that a group of users is limited to use a certain amount of cpu usage for instance.

Namespaces are not that usual, it's actually for big teams.

## Controllers

### ReplicaSet

These Controllers are the supervisors for long-running pods. They initiate a specified number of pods (specified in configuration files or by command) and make sure those replicas (pods) keep always running. For instance, if a node or pod fails the replica set is in charge of creating a new one that replaces it.

However, it is recommended to use Deployments, instead of ReplicaSets, which are a higher-level concept that manages Replication Controllers and provides declarative updates to pods along with many more useful features.

### Deployments

With _Deployments_, you described a state in a configuration file and it changes the actual state of pods to the desired one.

There are several use cases where Deployments take part in. For example, we would use Deployment Controllers to make the rollout of a new version of our application and kill the pods with the old version. An also in the reversed way, to move controllers with the new version to a previous one.

Deployment Controllers help us handling the scalability of our application in case of a heavy load.

### Other controllers

There are other controllers, but the most used are the described above.
The controllers left are:

- StatefulSets: they ensure that pods maintain a persistent identifier across any rescheduling. But the functionality is the same as _Deployments_.
- DaemonSets: ensures that all or some Nodes run a copy of a Pod.
- Jobs: ensures that a specified number of pods successfully terminate.

## Ingress

It is interesting to note that a lot of new features in Kubernetes are still in beta, and that's the case of Ingress.

An Ingress is an api object that manages external access to the services in a cluster, typically HTTP.

The interesting part about Ingresses is that they provide load-balancing, SSL termination, and name-based virtual hosting.

## References

- [Kubernetes Concepts](https://kubernetes.io/docs/concepts/)
- [Kubernetes By Example](http://kubernetesbyexample.com/)
- [Learn the Kubernetes Key Concepts in 10 Minutes](http://omerio.com/2015/12/18/learn-the-kubernetes-key-concepts-in-10-minutes/)
- [Kubernetes 101 – Networking](http://www.dasblinkenlichten.com/kubernetes-101-networking/)


Kubernetes Introduction


In the past year or so people in tech have experienced an increment in the appearance rate of the following concepts: machine learning, artificial intelligence, deep learning, convolutional network, training, dataset, neural networks, etc...

In this article I'm going to cover some of this concepts before getting our hands dirt.

**Disclaimer**: i'm not an expert of this field. I've just got into this by myself and I could be wrong.

## What is _machine learning_?

According to [Wikipedia's article](https://en.wikipedia.org/wiki/Machine_learning):

> Machine learning is a field of computer science that gives computer systems the ability to "learn" (i.e., progressively improve performance on a specific task) with data, without being explicitly programmed.

Alright, with that brief explanation you are going to get the basic idea. Basically, machine learning is a way or technique to make a computer system (program, software, whatever) **"intelligent"**. And by that I mean that is capable of solving a problem by itself with the **given time or data**.

And I say time or data because there are different ways to apply machine learning to an specific task. For example the problem that we are going to cover in this article is a _Supervised learning_ task. Which is to give a guide to the program on how to act depending on an input. Obviously, we do not have always that guide, and have to dinamically create it, that would be the case of _Unsupervised learning_ task. An example of this is learning how to drive a car, we can't give always the instructions on how to drive, we first drive it on our own and the system learns how we drive and then drives by itself based on our driving.

## What is brain.js?

[Brain.js](https://github.com/BrainJS/brain.js) is a library of neural networks written in JavaScript. Probably, if you don't know anything about ML (machine learning), you are wondering what are neural networks?
Well, here you have a video that will give you enough understanding.

<iframe
  width="100%"
  height="415"
  src="https://www.youtube.com/embed/aircAruvnKk?rel=0"
  frameBorder="0"
  allow="autoplay; encrypted-media"
  allowFullScreen
></iframe>

## Description of the project

Well, what we are going to build it's a webpage in which you are able to change the color of the background and at the same time change the color of the text accordingly to the background so that the text stays readable.

To make this clear, if the background is black then the text should be white and viceversa. But not always the background color of a web page is black or white it could have a wide variety of different colors.

Therefore, if we try to make a algorithm to detect the color and change the text according to that color we would have to support **a lot** of colors. And we don't want that because it would look similar to this:

```javascript
// WE DO NOT WANT THIS!
function changeTextColor(text, bg) {
    if(bg === "white") {
        text.style.color = "black";
    } else if (bg === "black") {
        text.style.color = "white";
    } else if...
}
```

Wouldn't be awesome if the system could recognise which are light or dark backgrounds and based on that return the color for the text? These are the kind of problems that we should solve by using machine learning.

So, let's do it!

## Development of the project

First, the skeleton:

```html
<div class="container">
  <h1>Example</h1>
  Choose a color: <input type="color" id="color" />
</div>
```

Second, the styles:

```css
body {
  min-height: 100vh;
  background: black;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  font-size: 1.5em;
  font-family: "Raleway", sans-serif;
  transition: color 200ms ease;
}
```

Append this tag to the end of the document body to use the library:

```html
<script src="https://cdnjs.cloudflare.com/ajax/libs/brain/0.6.3/brain.min.js"></script>
```

Finally, the best part:

```javascript
// First train the neural network
var net = new brain.NeuralNetwork();
net.train([
  { input: { r: 0.0, g: 0.0, b: 0.0 }, output: { white: 1 } },
  { input: { r: 1.0, g: 1.0, b: 1.0 }, output: { black: 1 } },
  { input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 } },
  { input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 } },
  { input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 } },
  { input: { r: 0.07, g: 0.34, b: 0.0 }, output: { white: 1 } },
  { input: { r: 1.0, g: 0.5, b: 0.5 }, output: { black: 1 } },
]);
var output;

// Color handling
const input = document.getElementById("color");

// Here happens the magic.
function changeColor(e) {
  document.body.style.backgroundColor = e.target.value;
  color = hexToRgb(e.target.value);
  Object.keys(color).map(function (key, index) {
    color[key] = +(color[key] / 255).toFixed(2);
  });
  output = net.run(color);
  document.body.style.color = likely(output);
}

function hexToRgb(hex) {
  // Expand shorthand form (e.g. "03F") to full form (e.g. "0033FF")
  var shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function (m, r, g, b) {
    return r + r + g + g + b + b;
  });

  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result
    ? {
        r: parseInt(result[1], 16),
        g: parseInt(result[2], 16),
        b: parseInt(result[3], 16),
      }
    : null;
}

function likely(result) {
  return result.white > result.black ? "white" : "black";
}

input.addEventListener("input", changeColor);
```

Now, let's split this into chunks to explain it better.

```javascript
var net = new brain.NeuralNetwork();
net.train([
  { input: { r: 0.0, g: 0.0, b: 0.0 }, output: { white: 1 } },
  { input: { r: 1.0, g: 1.0, b: 1.0 }, output: { black: 1 } },
  { input: { r: 0.03, g: 0.7, b: 0.5 }, output: { black: 1 } },
  { input: { r: 0.16, g: 0.09, b: 0.2 }, output: { white: 1 } },
  { input: { r: 0.5, g: 0.5, b: 1.0 }, output: { white: 1 } },
  { input: { r: 0.07, g: 0.34, b: 0.0 }, output: { white: 1 } },
  { input: { r: 1.0, g: 0.5, b: 0.5 }, output: { black: 1 } },
]);
var output;
```

In this piece of code we are creating a _Neural network_ and training it by giving a _dataset_. This dataset is an array of objects that contains two entries:

# Input

The input consists of three entries representing the red, green and blue values of a color. These values are between 0 and 1 because that is what, in this case, the library will accept. To make the original values from a rgb color to these we simply divide them by 255 and we get the number we want.

# Output

The output is what the text should look like given the input before.

Then we set a variable to hold the result of the execution.

```javascript
function changeColor(e) {
  document.body.style.backgroundColor = e.target.value;
  color = hexToRgb(e.target.value);
  Object.keys(color).map(function (key, index) {
    color[key] = +(color[key] / 255).toFixed(2);
  });
  output = net.run(color);
  document.body.style.color = likely(output);
}
```

This is the function that will be called when the input color changes.

1.  We set the background of the page to the value of the input
2.  We convert the hexadecimal color to rgb.
3.  Pass the color to the neural network and compute the result.
4.  Set the text color to the result of the computation.

## Demo

You can visit this [link](https://codepen.io/lewis_adame/pen/qorLKG) or see it in action in the iframe below:

<iframe
  width="100%"
  height="450"
  scrolling="no"
  title="Color contrast aware [Machine learning]"
  src="//codepen.io/lewis_adame/embed/preview/qorLKG/?height=450&theme-id=0&default-tab=result&embed-version=2"
  frameBorder="no"
  allowTransparency="true"
  allowFullScreen="true"
  style={{ width: "100%" }}
>
  See the Pen{" "}
  <a href="https://codepen.io/lewis_adame/pen/qorLKG/">
    Color contrast aware [Machine learning]
  </a>{" "}
  by Luis Adame (<a href="https://codepen.io/lewis_adame">@lewis_adame</a>) on{" "}
  <a href="https://codepen.io">CodePen</a>.
</iframe>


Color contrast aware using Machine Learning


Suddenly, a few days ago, someone asked me for my flash drive and he was acquaintance of me so I gracefully handed it, furthermore it seemed that he was in a rush so I didn't carefully thought about it.

Half an hour past that event I asked him for the usb because I noticed he wasn't using it anymore.
I took the usb and inserted onto a machine (not my personal one, thankfully) and weirdly all of the files on the drive had the appearance of a shortcut icon. At first I didn't care pretty much because I was able to browse my files perfectly. Although when I opened these on my machine Windows threw an error:

> F:\Manuel.doc does not exists

These could only meant one thing, when I open one of those "shortcuts" something in the background runs before opening the files and directories.
Note: When I opened the directories these were opened in a new window.
So I inspect the properties of the shortcuts and the target was a command and was referencing other file to execute which was a vscript. I couldn't find that script that according to the shortcut properties was located in my flash drive.

I ran an scan through the drive and some kind of worm was detected which the antivirus handled the deletion of it. These part was **critical** because now there wasn't an script running in the background doing whatever malicious actions it would do. However the shortcuts were still there, I opened a command window and inspected the content of the drive (showing also the hidden files) and they were there. So I did some little research and found that there is a command, like in unix systems: `chmod`, that handles the permissions of the files which in Windows is: **attrib**.

So the attrib syntax looks like this:
`attrib [{+r|-r}] [{+a|-a}] [{+s|-s}] [{+h|-h}] [[Drive:][Path] FileName] [/s[/d]]`

You can read more about this command [**here**](https://technet.microsoft.com/en-us/library/bb490868.aspx).

After reading how this command worked I ran the following:

> `attrib -h -s "." /s /d`

This means: remove hidden and system file attributes to every file and folder. 

According to the source linked above these options do:

-   /s: Applies attrib and any command-line options to matching files in the current directory and all of its subdirectories.
-   /d: Applies attrib and any command-line options to directories. 

The proccess actually took a while because changed the attributes on a lot of files that were stored on the drive, but at the end of the day it solved the problem which is what matters.


How to unmask hidden files on USB drives on Windows


## TL;DR

Go to about:config, look for these settings and change their values.

- To remove the fullscreen fading:
  - `full-screen-api.transition-duration.enter` => 0 0
  - `full-screen-api.transition-duration.leave` => 0 0
  - `full-screen-api.transition.timeout` => 0
- To remove the fullscreen warning:
  - - `full-screen-api.warning.timeout` => 0

---

Did you ever notice how long does a video go fullscreen on Firefox? I mean, you double click it, the screen goes black, and a second-ish later the video actually appears. I was so intrigued about this (and **annoyed** at the same time) and began my research about this. The first thing anyone (and me included) would do is to try to google the problem, but this time I took courage and typed on my url bar `about:config` and then started to try randomly related words like: screen, transition, fullscreen, etc. However, after some tries didn't catched my eye any of the options, anyways _I finally achieved what I actually thought was unconfigurable_.

So, the actual solution is a mix of some options to reach the desirable transition (the chrome transition, like it's instant).
So those options and its values are:

- `full-screen-api.transition-duration.enter` => 0 0
- `full-screen-api.transition-duration.leave` => 0 0
- `full-screen-api.transition.timeout` => 0

With these set of values the transition feels instant.

Now, on the side of the warning that slides down from the top when you enter on full screen.

<Img
  src="images/firefox-transition-warning/firefox-fullscreen-warning.png"
  alt="Fullscreen warning on Firefox"
/>

If you want to get rid of that is quite easy too. Searching `full-screen` on about:config is going to give us some wonderful settings to be change. However you are going to focus on the one that says:

- `full-screen-api.warning.timeout` and this should be set to 0.

By this way the timeout is nonexistent so that means it's never going to show up.


Firefox Fullscreen Transition (Fade) & The Warning

It's been a couple of weeks since I switched to Firefox because I want to support The Open Internet and Mozilla says it's an ethical browser. Even though,  being ethical or not, I don't agree with the idea of Google controlling every corner of the web. So after switching I noticed something that really itched me instantly: **opening autoplayed videos pages in new tab doesn't autoplay.**

In Chrome autplay videos do not auplay until the tab is in foreground or active.
So, time to get a solution for this. Firefox it's pretty famous for it's customizability.

How can we change this behaviour? Well just follow these steps:

1. Open `about:config`
2. Search by autoplay
3. Enable `media.block-autoplay-until-in-foreground`
	- to do so just double click it :)

And that's it, the behaviour you are used to is back. Happy Sunday!


How to autoplay videos on Firefox


Hello people, I am realising that the most effortless way for me to think on blog topics is to talk about relatively recent problems that I've had to solve. So that's what I'm gonna do today, well not today actually, because I write this articles in a course of days and not in a single day.

After this brief introductory paragraph about my thoughts I'm gonna start to relate how did I solve the problem stated in the title.

So as I said I recently had to manage a Twitter account and it had loads of people following. The previous guy that was taking care of this account was very sloppy about this subject, he actually **followed back every account** that followed this account and I also have reasons to believe that he intentionally followed inappropiate accounts. **But** this is not a rant article, although this information was necessary to build a base of the context.

As I have been put in charge of this account I started to cleaning up the profile, like username, name, biography, website url and all of that information that comes handy if a customer wants to get in touch with the company of the account. And also to make the profile prettier. Therefore I encountered the big problem: **2789 following people.**

Solution: unfollow everyone except the proper people related to the account and other featured people.

How can you solve this problem in an easy way? Well, there are plenty of applications out there that claim to mass unfollow and all of that stuff, but the reality is that those application get advantage of your desesperation and throttle the number of people you can unfollow unless you **subscribe or pay some amount of money to get "premium" features**.

Staring at this little problem I went straight to the following page of the account and you can see that there are _buttons_ that you have to click to unfollow an account, and I told myself: "why can't I open the developer tools and make a multiple click?" And I did so.

What did I do? Look for a button node that handles the unfollow event, and store a few of the buttons that are shown on the page (because the accounts are displayed paginated, so you have to scroll to unveil the rest). Let's go straigth to the code:

#### General way

```javascript
// Select the buttons and store them in a variable, convert the node list to an array.
var buttons = Array.from(document.querySelectorAll(".unfollow-text"));
// Then fire the click event on each of those buttons
buttons.forEach((button) => {
  button.click();
});
```

#### My way

```javascript
// Select the buttons and store them in a variable, convert the node list to an array.
var buttons = Array.from(document.querySelectorAll(".unfollow-text"));
// Cause I wanted to keep the initial followed accounts
// I sliced the array
buttons = buttons.slice(0, buttons.length - 5);
// Then fire the click event on each of those buttons
buttons.forEach((button) => {
  button.click();
});
```

#### One liner

```javascript
Array.from(document.querySelectorAll(".unfollow-text")) // get the buttons
  .slice(0, buttons.length - 5) // get a range of them
  .forEach((button) => {
    button.click(); // click every button
  });
```

Based on the executions I did there's a maximum number of people that you can unfollow in a period of time. It's around 550-600 accounts. Although I am not completely sure about it. I don't know exactly if it happens because I kept unfollowing a big amount of people in a short time (around 500 accounts four times in less than 5 minutes). However, it is not a big deal because you can keep doing this technique just waiting a few minutes.
Anyways, this approach is much better than any other web application or doing it manually.

_Important_: Keep in mind that firing a click event 500 times consumes memory and may freeze the window a few seconds.


How to mass unfollow on Twitter

Hi, this is my first blog post, and I am going to describe the process (*that I recently had to take*) to send emails with PHP and using a SMTP server.

First of all what we need is a SMTP Server that we can get freely in [Gmail](https://mail.google.com) or other Free Mail Services such as [Zoho](zoho.com). Once signed up you need to know the server settings and credentials, usually the smtp server is a subdomain of said service so for example in Gmail the smtp would be: smtp.gmail.com, the port is usually 465 if the encryption used is SSL if not (TLS) would be 567. Apart from these minimal settings we need the credentials that are the username that you registered with and the password.

**Be aware** that in case you are using Gmail the first time you try to connect to the SMTP server its going to send an email to that account to warn you about the safety of your account being compromised but if you are **sure** that it is you then add it as a safe application. In other services I don't know if they warn you about this but Zoho doesn't.

Now, regarding the backend part, we need the code to compose the email (headers, content type, encoding, etc), and we have several options to choose from:

- We could use the _native_ `mail()` function. _[Reference](http://php.net/manual/en/function.mail.php)_
- Choose between a wide variety of php libraries to make this part easier.

As always you are free to choose anyone and each are valid and I am going to cover both of them.

### Mail function

Alright, so the `mail()` function depends on the php configuration to send emails. And the php configuration is set in the `php.ini` file that is located in the installation php folder.

You can find the setting under the [mail function] section in the php.ini file, it will be like this:
```apacheconf
[mail function]
; For Win32 only.
; http://php.net/smtp
SMTP = localhost
; http://php.net/smtp-port
smtp_port = 25

; For Win32 only.
; http://php.net/sendmail-from
;sendmail_from = me@example.com

; For Unix only.  You may supply arguments as well (default: "sendmail -t -i").
; http://php.net/sendmail-path
;sendmail_path =

; Force the addition of the specified parameters to be passed as extra parameters
; to the sendmail binary. These parameters will always replace the value of
; the 5th parameter to mail().
;mail.force_extra_parameters =

; Add X-PHP-Originating-Script: that will include uid of the script followed by the filename
mail.add_x_header = On

; The path to a log file that will log all mail() calls. Log entries include
; the full path of the script, line number, To address and headers.
;mail.log =
; Log mail to syslog (Event Log on Windows).
;mail.log = syslog
```

As you can see above there is no username and password field, and that's because the `mail()` function **doesn't support SMTP authentication** what makes it pretty useless but it is worth mention it.

### PHP Mail Libraries

Alright, there are **tons** of libraries out there that will achieve the same results, some will be simpler and others more complex or more feature-full, and depending on your needs you'll choose one, I highly recommend to use [Packagist](https://packagist.org) as your php libraries search engine. Jus search for "email" and libraries will show up, but I will say that two of the most popular are [PHPMailer](https://github.com/PHPMailer/PHPMailer) (3M downloads) and [Swift Mailer](http://swiftmailer.org) (42M downloads) .

These kind of libraries are using the native mail function but they are wrapped around it and their purpose is to make it easier for you.

And for the sake of simplicity I am going to use PHPMailer as an example, but most of the libraries follow the same pattern for email creation.

So first we will have to download the library, and I will use composer to autoload the class, although you are able to `git clone` the library and use it by `require_once "mailer_class.php";`.

Then the class will be instantiated and start to use it's own methods to add meta data information, content types, subjects, from's, to's, body, etc. It will be like this for PHPMailer and [Composer](https://getcomposer.org) as the autoloader:

```php
<?php
	
require_once "vendor/autoload.php";

$mail = new PHPMailer;

// As we are using an external SMTP server we'll have to activate this
$mail->isSMTP();

$mail->Host = 'smtp1.example.com;smtp2.example.com'; // Main and backup smtp server, you could use only one
$mail->SMTPAuth = true; // Enable smtp auth, as almost all smtp's use this
$mail->Username = 'user@example.com'; // Your username
$mail->Password = 'supersecretpassword'; // Your password
$mail->SMTPSecure = 'tls'; // The encryption protocol used by the smtp
$mail->Port = 587; // And its port

// Now  compose the mail
$mail->setFrom('from@example.com');
$mail->addAddres('recipient@example.com');
$mail->Subject = "The super interesting and explanatory subject";

$mail->msgHTML(file_get_contents('template.html'), dirname(__FILE__)); //I'll explain this below
$mail->CharSet = "UTF-8";

$mail->send(); //Send email
```

As you have seen above, the body is going to be an html file which contains the email content, I prefer this way because you can make more engaging emails. Usually I'll use an email designer tool that exports to html and then implement it like this. However, you can still write plain text, depending on the library it could differ, but in the case of PHPMailer it would be:
```php
$mail->Body = "Really exciting email content";
```

As a conclusion I have to say that it is far better to use a well tested library to send emails and not reinventing the wheel. Furthermore the fact that the native mail function doesn't support SMTP authentication makes it useless because nowadays every SMTP Server requires authentication to be used as far as I know.


Writings