Forem: Guim

Lazy Load Images with Vanilla Javascript

Guim — Mon, 06 May 2019 21:00:29 +0000

What is Lazy Loading?

Surely many of you have already heard that Google Chrome is going to add Lazy Loading in a native way with HTML tags, for images and iframes.

What Lazy Loading basically means is not to load the content of these images until the user does not have them in the field of view. In this way, an image located at the end of the web page will never be loaded if the user does not reach that point. With this solution, we save loading time and gain speed.

In this tutorial we'll lazy load 30 images, previously fetched from an API. First, we'll write the HTML, then the JS code and finally we'll implement some basic CSS to have a beautiful result. Here you have a demo:

Our HTML skeleton

This is our index.html file. It just has a title, a loading spinner and an empty div where we'll put all the images from the API.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Lazy Loading Images</title>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <h1>Lazy Loading Images</h1>

    <!-- Images Container -->
    <div id="imagesContainer"></div>

    <!-- Loading spinner -->
    <div class="lds-roller" id="lds-roller">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>

    <!-- Our custom JS code -->
    <script src="main.js"></script>
  </body>
</html>

At this point, our page is empty. Let's create our main.js file, grab some images and lazy load them.

Here is where the magic happens

As this file will be more complex, let's split the code into smaller parts so we can deeply understand each of them. All of the following code it's written in the main.js file.

window.onload = () => {
  // Get 30 random images
  fetch('https://picsum.photos/v2/list?limit=30')
    .then(function(response) {
      return response.json();
    })
    .then(function(myJson) {
      // Call the createImages function to generate the HTML code
      createImages(myJson);
      // Remove the loading spinner
      document.getElementById('lds-roller').remove();
    })
    .catch(err => {
      console.log(err);
    });
};

This first function will be triggered ones the window is ready. We use the fetch API to get the images from an external API. This API response us with a JSON file containing all the url's to the images. With this url's we can now create our HTML code.

function createImages(imgs) {
  for (let i of imgs) {
    // Create an image HTML tag
    const image = document.createElement('img');
    image.setAttribute('data-lazy', i.download_url);
    image.classList.add('lazy-loading');
    document.getElementById('imagesContainer').appendChild(image);
  }
  // Sets an observer for each image
  lazyTargets = document.querySelectorAll('.lazy-loading');
  lazyTargets.forEach(lazyLoad);
}

Note that we're not setting the src attribute of the images. We're creating a data-lazy one. This way, the images don't request any data when they are created. Now let's do the lazy-loading function. This function will use the intersection observer API to know when each image is on the view. Then it'll replace the src attribute with the data-lazy one.

function lazyLoad(target) {
  const obs = new IntersectionObserver((entries, observer) => {
    entries.forEach(entry => {
      if (entry.isIntersecting) {
        const img = entry.target;
        const src = img.getAttribute('data-lazy');

        img.setAttribute('src', src);
        img.classList.add('fadeIn');

        observer.disconnect();
      }
    });
  });
  obs.observe(target);
}

Let's make it pretty

Now I've put some basic CSS to make things prettier. The file referenced in the HTML is style.css.

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
}

h1 {
  text-align: center;
  font-family: sans-serif;
  font-weight: 200;
}

#imagesContainer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  margin: auto;
  width: 680px;
}

#imagesContainer img {
  width: 300px;
  min-height: 200px;
  margin: 20px;
  box-shadow: 5px 10px 15px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadeIn {
  animation-name: fadeIn;
  animation-duration: 3s;
}

So that's all! Here's the link of CodePen. See you soon!

My React components repository

Guim — Mon, 11 Mar 2019 09:00:44 +0000

Hey there, I just uploaded a Github repository in which I'll be uploading some of the React components I use the most. Most of them are made by me, others from Internet code but with own modifications.

Go to the repo!

The components

Here you have a complete list of all the components. As I upload new components I will update the list.

Navbar: Sticky navbar that hides when scrolling down.
Loading Indicator: Loading indicator with only CSS.
Flipping Cards: Cards that flip when click.

Usage

You can browse this repo online or download it and run it to see a live demo of all of the components. There's a server with one root route which contains all components. Follow these steps:

Clone the repo by typing: git clone https://github.com/GuimG/my-react-components.git.
Go into the folder in your terminal and run the app by typing: npm run start.
Go to your browser and search for: http://localhost:3000.

Now you can see all of the components in your browser. There's a title on each one (except for the navbar which is fixed in all the page). If you like some specific component search it in the components folder by its title.

Last words

Hope this helps you. If you want any component in specific and it's not here, leave a comment and I'll try to do it ASAP.

Dynamic document head with React Helmet

Guim — Thu, 07 Mar 2019 19:18:47 +0000

Helmet is a React component that allows us to manage all of the changes to the document head. For example, let's say we're doing a social network. On the main page we may want the website title something like "My Social Network", but if we go to a user's profile the title should look like this: "User's name/Id - My Social Network".

Usage example

import React from 'react';
import { Helmet } from 'react-helmet';
import { Switch, Route } from 'react-router-dom';

import PageOne from 'containers/PageOne';
import PageTwo from 'containers/PageTwo';

const App = () => (
  <div className="app">
    <Helmet>
      <title>My App</title>
      <meta charSet="utf-8" />
      <meta name="description" content="A React.js application" />
    </Helmet>
    <Switch>
      <Route exact path="/" component={PageOne} />
      <Route path="/page-2" component={PageTwo} />
    </Switch>
  </div>
);

export default App;

Here's an example of a very basic app. As we can see, the title of the page will be My App. But this app has different routes. Let's say we want to change the title and the description for the /page-2 route, but we want to maintain the charset encoding. We can easily do it like this:

import React from 'react';
import { Helmet } from 'react-helmet';

export default class PageTwo extends React.Component {
  <div className="page-two">
    <Helmet>
      <title>Page 2</title>
      <meta name="description" content="This is a different description for this route." />
    </Helmet>
    <h1>Page 2</h1>
  </div>
);

As we only defined the title and the description in this second component, they'll be the only two values overwritten from the app itself. The charset won't change as we didn't define a new one.

The output title of this example is: Page 2

Using templates and default title

We can go a step ahead and make use of the properties that Helmet provides to us. For example the titleTemplate and the defaultTitle. We'll repeat the example above but now we'll establish these two props in the App's head.

import React from 'react';
import { Helmet } from 'react-helmet';

const App = () => (
  <div className="app">
    <Helmet titleTemplate="%s - My App" defaultTitle="My App">
      <meta name="description" content="A React.js aapplication" />
    </Helmet>
    <h1>My App</h1>
  </div>
);

export default App;

At this point, if we change to another component and we don't change the title, as the default title is My App this will be the output. Let's change it with the PageTwo component like before.

import React from 'react';
import { Helmet } from 'react-helmet';

export default class PageTwo extends React.Component {
  <div className="page-two">
    <Helmet>
      <title>Page 2</title>
      <meta name="description" content="This is a different description for this route." />
    </Helmet>
    <h1>Page 2</h1>
  </div>
);

Now the output title will be Page 2 - My App since we established the template. The %s is substituted by the string we pass on the title tag.

This is a very easy tutorial but I think it's very helpful for those who didn't know this component. Hope you enjoyed it! If you have any doubt leave it in the comments below. You can read the whole documentation in their Github.

Hide menu when scrolling in React.js

Guim — Sun, 10 Feb 2019 11:26:32 +0000

In this tutorial, I will explain how to make a navbar that is hidden or displayed when we scroll on the page. This is a version for React.js that uses the State of the component to know at all times what is the current state of our navbar.

The component

Now we will see what parts our component needs. First of all, as we said that we will save the position of the scroll in our State, we will create a new value for the State inside the constructor(), which will take the initial value of the offset of the page.

Of course, we will also need the render() method that will return a nav with all the navbar items inside. Here's a first look:

import React, { Component } from "react";
import classnames from "classnames";

export default class Navbar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      prevScrollpos: window.pageYOffset,
      visible: true
    };
  }

  render() {
    return (
      <nav
        className={classnames("navbar", {
          "navbar--hidden": !this.state.visible
        })}
      >
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </nav>
    );
  }
}

Here's the CSS:

.navbar {
  width: 100%;
  padding: 10px;
  position: fixed;
  top: 0;
  transition: top 0.6s;
}

.navbar--hidden {
  top: -50px;
}

Perfect, our component is ready to be viewed in a browser but does not yet have the behavior we want. Let's go for it!

First, we'll need to do the function that hides or displays the navbar. It will be called as if it was an event. It will see if the current offset is greater or less than the previous offset, depending on whether we scroll up or down. If the offset is bigger, we are going up, therefore it will display the menu. On the contrary, it is going to hide it. This show/hide behavior is managed by the visible state variable.

handleScroll = () => {
  const { prevScrollpos } = this.state;

  const currentScrollPos = window.pageYOffset;
  const visible = prevScrollpos > currentScrollPos;

  this.setState({
    prevScrollpos: currentScrollPos,
    visible
  });
};

Now the function is done. But we need to call it every time the user scrolls on the screen. We will use life cycle methods to add and remove that listener in the scroll.

componentDidMount() {
  window.addEventListener("scroll", this.handleScroll);
}

componentWillUnmount() {
  window.removeEventListener("scroll", this.handleScroll);
}

And with this, we finish our component. Next, I show all the whole code. I hope you liked it, I'll be uploading content more often. See you soon!

import React, { Component } from "react";
import classnames from "classnames";

export default class Navbar extends Component {
  constructor(props) {
    super(props);

    this.state = {
      prevScrollpos: window.pageYOffset,
      visible: true
    };
  }

  // Adds an event listener when the component is mount.
  componentDidMount() {
    window.addEventListener("scroll", this.handleScroll);
  }

  // Remove the event listener when the component is unmount.
  componentWillUnmount() {
    window.removeEventListener("scroll", this.handleScroll);
  }

  // Hide or show the menu.
  handleScroll = () => {
    const { prevScrollpos } = this.state;

    const currentScrollPos = window.pageYOffset;
    const visible = prevScrollpos > currentScrollPos;

    this.setState({
      prevScrollpos: currentScrollPos,
      visible
    });
  };

  render() {
    return (
      <nav
        className={classnames("navbar", {
          "navbar--hidden": !this.state.visible
        })}
      >
        <a href="#">Item 1</a>
        <a href="#">Item 2</a>
        <a href="#">Item 3</a>
      </nav>
    );
  }
}

How To Serve Node.js Applications with Nginx on a Raspberry

Guim — Wed, 30 Jan 2019 17:35:03 +0000

This is a tutorial of how I made my own server with Nginx to serve Node.js applications using a Raspberry Pi on my local network. I did it to have my own development server in my local network before committing any changes to the production host. We’ll go through all the steps so you can easily make your own too.

Prerequisites and specifications

For this tutorial, I suppose you have a Rasberry Pi with the Raspbian OS installed, root access to the board, another computer connected on the same network, and access to your Wifi app.

Board model: Raspberry Pi 3 B+
Board OS: Raspbian
Board CPU: ARMv7l

Install and run Nginx

To install Nginx and start the service on your Raspberry, open the terminal and type the following commands:

sudo apt-get update
sudo apt-get install nginx
sudo systemctl start nginx

Now your Nginx server is up and running. To check if the server is working properly, we can open a web browser from another computer and search for our Raspberry local IP. If you don’t know whats your Raspberry local IP open a new terminal and type:

hostname -I

In my case, it’s 192.168.0.173. So the address I have to search for will be http://192.168.0.173. Here you can see the default landing page of Nginx.

Congratulations, your Nginx server is working. Now we have to serve Node.js applications instead of static HTML files. How?

Install Node.js and NPM

Obviously, to work with Node.js, we first need to install Node.js packages and NPM (node package manager). We’ll also update NPM to the latest version. To do so, open a new terminal and type:

sudo apt-get install nodejs
sudo apt-get install npm
npm install -g npm

To check if both Node.js and NPM are installed properly, run the following commands:

nodejs -v
npm -v

Now that we have Nginx running and Node.js installed, it’s time to make our first Node app. The app will be a simple "Hello World" to check if Node and Nginx have good communication. Let’s write the app.

Create a Node.js app

In your home directory create a new folder called server. In this folder, we’ll create our Node.js app. Let’s write the index.js file.

const express = require("express");
const app = express();

// The HelloWorld
app.get("/", (req, res) => {
  res.send("Hello from Node.js!");
});

const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`App listening on http://localhost:${port}`);
});

Save this file in the server directory we created before. To make this app work, we need to install the express packages. Open a terminal, go to your server folder and use NPM to install them:

cd ~/server
npm init -y
npm install express --save

What we did is to initialize NPM and install the express packages. Now we can run the app with Node.js:

nodejs index.js

If you open a browser in your Raspberry and search for http://localhost:3000 you’ll see this Node "Hello World".

Nginx Proxy to the app

Our app is now running in port 3000. But what we want is to redirect all the HTTP requests in port 80 (the Nginx server) to the port 3000 (the Node.js app). We can do this modifying the default configuration file of Nginx.

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        index index.html index.htm index.nginx-debian.html;

        server_name _;

        location / {
                proxy_pass http://localhost:3000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection 'upgrade';
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }
}

Copy this configuration, delete all the text in your config file and paste it. To edit your default file type:

sudo nano /etc/nginx/sites-enabled/default

When you’re finished editing type crtl+X to save changes before exit. Don’t forget to restart your Nginx service:

sudo systemctl restart nginx

Now your Nginx is redirecting your HTTP requests to your localhost app. If we visit http://192.168.0.173 again (the address where Nginx is listening to) we now have to see the Node “Hello World”.

Configure IP tables

The only problem right now is we can access the app via http://localhost (thanks to Nginx) but still with http://localhost:3000 (the Node.js direct access). We don’t want this port 3000 open to anyone.

Imagine in the future you want to redirect all port 80 connections to port 443 because you transport personal data and you need an SSL certificate. People could still connect to port 3000 an omit this encrypted connection.

To solve this we just need to change two rules in our IP tables. The first one will allow localhost (the Raspberry) to connect to port 3000. The second one will deny access to anyone else. Open the terminal and type this:

iptables -A INPUT -p tcp -s localhost --dport 3000 -j ACCEPT
iptables -A INPUT -p tcp --dport 3000 -j DROP

DHCP IP reservation

Another thing you may want to do is to reserve an IP for your Raspberry. So your device has the same IP address every time it connects to your Wifi.

Open your Wifi app visiting: http://192.168.0.1 (This is your routers address)
Log in with the user and password printed on the bottom of the router.
There is a section called Advanced Networking.
Search for the DHCP IP reservations.
Click add device and search for your Raspberry.
Change the last number of the IP address to your will.

Last words

I hope this tutorial was useful for you. If you had any trouble in any of the steps just leave it in the comments below and I’ll do my best to help you. Thanks!