The code is really simple to achieve this

<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:

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 demonstrating the use case of this.

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

Until next time 👋

Almost a year ago I had to build a notification system for an application. And a college recommended the use of 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.

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.
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:

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.

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

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

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.

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:

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 in the PR that attempted to fix this problem so anyone could benefit from it.

References:

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

One of the dependencies that telescope requires is "moontoast/math" which in fact requires a php extension called "bcmath":

// "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:

/**
* 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 TELESCOPEDB looking like this:

'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:

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

for:

'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

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:

/**
  * 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!

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.

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 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.

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.

A use case

Editorial layout - discussed by Rachel Andrew in this article and also by Rob Weychert in this other blog post

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
• Editorial Layouts, Floats, and CSS Grid - Rob Weychert
• Editorial Layouts, Exclusions, and CSS Grid - Rachel Andrew
• CSS Exclusions Module Level 1 - Rossen Atanassov, Vincent Hardy, Alan Stearns
• CSS exclusions with Queen Bey - Chen Huijing

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.

Support

Can I use says that Chrome and Safari are up to date with this feature, althought Firefox, Edge and IE 11 support and older version of the spec, 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

<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.

.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:

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
• Web Components support (finally!)
• Fonts editor
• Reduced motion preferences

We'll talk briefly about other improvements which in my opinion deserve an spot here.

Accesibility menu

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).

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 from Mozilla Developer Network:

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?

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 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.

Fonts Editor

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.

Reduced motion preferences

Now, you can detect via the prefers-reduce-motion media query 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 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 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! by Potch
• Firefox 63 Release Notes

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 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.definePropertymethod. 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...

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 ais 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:

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:

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 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, 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.

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

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

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
• Kubernetes By Example
• Learn the Kubernetes Key Concepts in 10 Minutes
• Kubernetes 101 – Networking

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:

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 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.

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:

// 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:

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

Second, the styles:

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:

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

Finally, the best part:

// 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.

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.

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 or see it in action in the iframe below:

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.

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.

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.

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.

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!

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

// 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

// 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

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.

First of all what we need is a SMTP Server that we can get freely in Gmail or other Free Mail Services such as Zoho. 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
• 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:

[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 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 (3M downloads) and Swift Mailer (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 as the autoloader:

<?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:

$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.