Forem: Vincent Humeau

Slide stacking effect using position sticky

Vincent Humeau — Wed, 11 Sep 2019 17:29:35 +0000

Recently I was looking to create a slide (card) stacking effect on scroll. The closest resource I could find about this effect was Card Stack: Scroll Effect by Sanjeev Yadav. I wanted to look if I could recreate a similar effect only with CSS.

Basic effect with position sticky

Position sticky enables to position an element like position fixed relative to its parent until it reaches the boundary of the parent.

Sticky positioning can be thought of as a hybrid of relative and fixed positioning. A stickily positioned element is treated as relatively positioned until it crosses a specified threshold, at which point it is treated as fixed until it reaches the boundary of its parent.

MDN - Sticky positioning

We can use position sticky to stick each slide, at the top at the parent and have a fixe height.

CSS:



.stacking-slide {
    height: 100vh;
    width: 100%;
    position: sticky;
    top: 0;

//   Not needed if 100vh
//   &:nth-last-child(1) {
//      height: 100vh;
//   }
}

HTML:



<section class="stacking-slide">
    <h2>Section 1</h2>
</section>
<section class="stacking-slide">
    <h2>Section 2</h2>
</section>
<section class="stacking-slide">
    <h2>Section 3</h2>
</section>
<section class="stacking-slide">
    <h2>Section 4</h2>
</section>
<section class="stacking-slide">
    <h2>Section 5</h2>
</section>

Support

Position sticky has great support (Can I Use), but if you need to support older browsers you can use a polyfill.

Vertical Scroll Snap

CSS scroll snap permits us to make each slide position nicely at the top of the viewport after scroll.

CSS Scroll Snap is a module of CSS that introduces scroll snap positions, which enforce the scroll positions that a scroll container’s scrollport may end at after a scrolling operation has completed.

MDN - CSS Scroll Snap

To use scroll snap we are going to wrap our sections into .vertical-scroll-snap. This element is going to have a fixe height of 100vh and overflow-y: scroll so the user can scroll between sections.

Next step we are going to look into scroll snap. First we are going the set scroll-snap-type (MDN). This property defines how strictly snap points are enforced on scroll. We are going to set it to y mandatory. y is indicating that the snap positions is in its vertical axis only. mandatory that the scroll container will rest on a snap point of the section if it isn't currently scrolled.

Then we need to tell our sections which part need to be aligned to the container. We are going to use scroll-snap-align (CSS Tricks) with the value start.

HTML:



<div class="vertical-scroll-snap">
  <section class="stacking-slide">
    <h2>Section 1</h2>
  </section>
  <!-- ... -->
</div>

SCSS:



.vertical-scroll-snap {
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    max-height: 100vh;
}

.stacking-slide {
    scroll-snap-align: start;
    // ...
}

Support

CSS Scroll snap has good support (Can I Use), if you need to support older browsers you can use a polyfill.

Add some nice transition using Intersection Observer API.

The Intersection Observer API, lets us to detect when an element enters the viewport. We can trigger a callback function when this element enters or leave the viewport.

The Intersection Observer API provides a way to asynchronously observe changes in the intersection of a target element with an ancestor element or with a top-level document's viewport.

MDN - Intersection Observer API

In the following example, we are adding the class .is-intersecting when a .stacking-slide enter 10% of the viewport. And we remove this class when the slide leaves it. We can now add some nice transitions using CSS.

JS:



const sectionEls = document.querySelectorAll(".stacking-slide");

const options = {
  rootMargin: "-10% 0% -10% 0%"
};

const observer = new IntersectionObserver(entries => {
  entries.forEach(function(entry) {
    if (entry.isIntersecting) {
      entry.target.classList.add("is-intersecting");
    } else {
      entry.target.classList.remove("is-intersecting");
    }
  });
}, options);

sectionEls.forEach(el => observer.observe(el));

Support

The Intersection Observer API has good support (Can I Use), if you need to support older browsers you can use a polyfill.

Thanks for reading hope you enjoyed this small article.

CSS 3D - Scrolling on the z-axis

Vincent Humeau — Thu, 21 Mar 2019 18:12:46 +0000

In this article, we are going to create a small 3D scene, where the user can scroll on the z-axis. You can find the final code of this tutorial on github, and the demo if you follow this link.

This article assumes that you already have some knowledge about CSS and JS. We are going to use CSS custom properties, if you are not familiar with this you can read CSS custom properties - Cheatsheet.

Introduction to CSS 3D

When speaking of CSS 3D, we really speak about CSS3 transform 3D. This method allows us to use the transform CSS property to set perspective or rotation on the z-axis to our DOM elements.

The transform CSS property lets you rotate, scale, skew or translate an element. It modifies the coordinate space of the CSS visual formatting model.

transform - MDN

To be allowed to render our Dom elements in a 3D space we need to have a look in the following properties:

Perspective
Perspective origin
Transform Z

Perspective

perspective is a CSS property that set the distance between z=0 and the user. The smaller is the perspective value the greater will be the distortion of our see. (Try to change the value of scenePerspective in the codePen example below).

.container-scene {
  perspective: 100px;
}

The value of perspective is a length unit.

Try to set the value of scenePerspective to 0 and 70 in the example below. You can notice that our cube get no perspective at all if its value is set to 0. If the value is set to 70, you can see a really strong distortion of the cube perspective. The smaller the perspective value is, the deeper it is.

To be able to render a 3D space, we need to specify transform-style: preserve-3d; on the child elements. In the above example, it set to our .cube. By default, the elements are flattened.

.container-scene {
  perspective: 400px;
}

.container-scene .cube {
  transform-style: preserve-3d;
}

Perspective origin

The perspective-origin CSS property determines the position at which the viewer is looking. It is used as the vanishing point by the perspective property.

MDN

This property basically allows us to move the vanishing point of our 3D scene.

.container-scene {
  perspective: 400px;
  perspective-origin: 50% 100%; /*X position value, Y position value*/
}

.container-scene .cube {
  transform-style: preserve-3d;
}

For both x and y we can set the position using percentages. but we can as well use the following values:

x position:
- left = 0%
- center = 50%
- right = 100%
y position
- top = 0%
- center = 50%
- bottom = 50%

In the following example, you can change the value of perspectiveOriginX and perspectiveOriginY.

Transform Z

We already mentioned earlier that the transform CSS property allows us to set our elements in a 3D space.

Transform comes with different functions to transform our elements in 3D:

rotateX(angle) - MDN
rotateY(angle) - MDN
rotateZ(angle) - MDN
translateZ(tz) - MDN
scaleZ(sz) - MDN

As we saw in the illustration in the perspective section. translateZ() allows us to position an element along the z-axis of the 3D space. Alternately we can use the translate3D(x, y, z) CSS function.

In the following example, you can play with the Z-axis position of the .cube and .face- by changing the value of cubeTranslateZ and cubeFacesTranslateZ.

Scroll on the z-axis

Now that we have a good understanding of how CSS 3D works we are going to create a 3D scene, where we are going to be able to scroll on the z-axis.

Set the scene

We are going to create a page that lists out all the films of Studio Ghibli. Each film is going to be a card positioned on the z-axis of our scene. Feel free to fork or download the following codepen as a starter material to follow along. I'm using axios with Studio Ghibli API to populate this page.

If you want to follow along with your own content we will need the following markup:

<div class="viewport">
  <div class="scene3D-container">
    <div class="scene3D">
      <div>Card1</div>
      <div>Card2</div>
      <!--Etc.-->
    </div>
  </div>
</div>

Styling

First, we are going to set our CSS custom properties (CSS variables). Some of these variables are going to be transformed using JS. They are going to help us to interact with the scene.

:root {
  --scenePerspective: 1;
  --scenePerspectiveOriginX: 50;
  --scenePerspectiveOriginY: 30;
  --itemZ: 2; // Gap between each cards
  --cameraSpeed: 150; // Where 1 is the fastest, this var is a multiplying factor of --scenePerspective and --filmZ
  --cameraZ: 0; // Initial camera position
  --viewportHeight: 0; // Viewport height will allow us to set the depth of our scene
}

.viewport will allow us to set the height of the window. We will later use it to set the depth of the scene and use the scrollbar to navigate in the z-axis.

.viewport {
  height: calc(var(--viewportHeight) * 1px);
}

.scene3D-container sets the scene perspective and the perspective origin. It is position fixed so it stays always on screen. We are as well going to set the perspective origin.

.viewport .scene3D-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  perspective: calc(var(--scenePerspective) * var(--cameraSpeed) * 1px);
  perspective-origin: calc(var(--scenePerspectiveOriginX) * 1%) calc(
      var(--scenePerspectiveOriginY) * 1%
    );
  will-change: perspective-origin;
  transform: translate3d(
    0,
    0,
    0
  ); //Allows Hardware-Accelerated CSS, so transitions are smoother
}

.scene3D sets the position of our scene on the z-axis, This will behave a bit like moving a camera on the z-axis. But really we are moving the scene and the camera (viewport) is fixed. In the rest of this article, we are going to use the camera comparison. .scene3D takes the full height and width of the viewport.

.viewport .scene3D-container .scene3D {
  position: absolute;
  top: 0;
  height: 100vh;
  width: 100%;
  transform-style: preserve-3d;
  transform: translateZ(calc(var(--cameraZ) * 1px));
  will-change: transform;
}

Last but not least we are going to position our cards in the scene. All items are position absolute. Odd items are position on the left, even ones on the right.

We use SCSS to programmatically translate each item. On the X and Y axis we randomly translate them between -25% and 25% for X, between -50% and 50% for Y. We use a @for loop so each item can be translated on the z axis multiply by their indexes.

.viewport .scene3D-container .scene3D {
  > div {
    position: absolute;
    display: block;
    width: 100%;
    top: 40%;

    @media only screen and (min-width: 600px) {
      width: 45%;
    }

    &:nth-child(2n) {
      left: 0;
    }

    &:nth-child(2n + 1) {
      right: 0;
    }

    @for $i from 0 through 25 {
      &:nth-child(#{$i}) {
        transform: translate3D(
          random(50) - 25 * 1%,
          random(100) - 50 * 1%,
          calc(var(--itemZ) * var(--cameraSpeed) * #{$i} * -1px)
        );
      }
    }
  }
}

The CSS is now done, we have a 3D scene. In the following parts of this article, we are going to write some javascript that going to allow us to navigate in the scene.

Scrolling on z-axis (move camera)

To be able to scroll, we need first to set the value of --viewportHeight which emulates the depth of the scene.

The depth of the scene is equal to the addition of the following:

The height of the user window
- window.innerHeight
The .scene3D-container perspective
- var(--scenePerspective) * var(--cameraSpeed)
The translate z value of our last item
- var(--itemZ) * var(--cameraSpeed) * items.length

Let's create a setSceneHeight() function that will update the value of --viewportHeight on load.

document.addEventListener("DOMContentLoaded", function() {
  setSceneHeight();
});

function setSceneHeight() {
  const numberOfItems = films.length; // Or number of items you have in `.scene3D`
  const itemZ = parseFloat(
    getComputedStyle(document.documentElement).getPropertyValue("--itemZ")
  );
  const scenePerspective = parseFloat(
    getComputedStyle(document.documentElement).getPropertyValue(
      "--scenePerspective"
    )
  );
  const cameraSpeed = parseFloat(
    getComputedStyle(document.documentElement).getPropertyValue("--cameraSpeed")
  );

  const height =
    window.innerHeight +
    scenePerspective * cameraSpeed +
    itemZ * cameraSpeed * numberOfItems;

  // Update --viewportHeight value
  document.documentElement.style.setProperty("--viewportHeight", height);
}

Our page has now a scrollbar, but we are still unable to scroll. We need to add an event listener that will listen to the user scrolling. The scroll event will call a moveCamera() function. It will update the value of --cameraZ with the value of window.pageYOffset.

document.addEventListener("DOMContentLoaded", function() {
  window.addEventListener("scroll", moveCamera);
  setSceneHeight();
});

function moveCamera() {
  document.documentElement.style.setProperty("--cameraZ", window.pageYOffset);
}

function setSceneHeight() {
  // ...
}

Move camera angle

Finally, let's make our scene a bit more dynamic. On mousemove event we are going to change the values of scenePerspectiveOriginX and scenePerspectiveOriginY. This will give the illusion that the camera move. The items will stay straight in the scene. If you want to give a more realistic camera rotation movement, you could apply rotate3d() on the scene.

First, we are going to store the initial values of these two variables in a perspectiveOrigin object, we are going to set a perspectiveOrigin.maxGap value which is going to limit the maximum and minimum values of the variables. For example if scenePerspectiveOriginY is equal to 50%. On mousemove, the new value will be between 40% and 60%.

const perspectiveOrigin = {
  x: parseFloat(
    getComputedStyle(document.documentElement).getPropertyValue(
      "--scenePerspectiveOriginX"
    )
  ),
  y: parseFloat(
    getComputedStyle(document.documentElement).getPropertyValue(
      "--scenePerspectiveOriginY"
    )
  ),
  maxGap: 10
};

If the user cursor is at the centre of the screen, we will set the values of --scenePerspectiveOriginX and --scenePerspectiveOriginX as the initial ones. The further the cursor moves away from the centre, the bigger will increase/decrease these values. If the user moves to the top left corner the values will increase, on the bottom right corner they will decrease.

The moveCameraAngle() function is going to update the values:

xGap and yGap return the mouse position of the user in percentage on the X and Y axis, compare to the centre of the window.
newPerspectiveOriginX and newPerspectiveOriginY return the new perspective origin.

document.addEventListener("DOMContentLoaded", function() {
  window.addEventListener("scroll", moveCamera);
  window.addEventListener("mousemove", moveCameraAngle);
  setSceneHeight();
});

function moveCameraAngle(event) {
  const xGap =
    (((event.clientX - window.innerWidth / 2) * 100) /
      (window.innerWidth / 2)) *
    -1;
  const yGap =
    (((event.clientY - window.innerHeight / 2) * 100) /
      (window.innerHeight / 2)) *
    -1;
  const newPerspectiveOriginX =
    perspectiveOrigin.x + (xGap * perspectiveOrigin.maxGap) / 100;
  const newPerspectiveOriginY =
    perspectiveOrigin.y + (yGap * perspectiveOrigin.maxGap) / 100;

  document.documentElement.style.setProperty(
    "--scenePerspectiveOriginX",
    newPerspectiveOriginX
  );
  document.documentElement.style.setProperty(
    "--scenePerspectiveOriginY",
    newPerspectiveOriginY
  );
}

Our scene is now finished 🎉. I hope you enjoyed this article 😃

Resources

CSS custom properties - Cheatsheet

Vincent Humeau — Thu, 21 Feb 2019 09:08:44 +0000

This note was originally posted on my DevNotes

CSS custom properties, also known as CSS variables. represent custom properties that can be declared and be called in your CSS.

Declare a custom property in CSS

To declare a custom property in your CSS, you need to use the -- syntax:

:root {
  --colorPrimary: hsla(360, 100%, 74%, 0.6);
}

Notice the :root pseudo-class selector, we can declare our variables globally using it. We can as well declare them using other selectors, they will be then be scoped in these ones.

.theme-dark {
  --colorPrimary: hsla(360, 100%, 24%, 0.6);
}

Use a custom property in CSS

To use a CSS custom property in your CSS you can use the var() function

:root {
  --colorPrimary: tomato;
}

.theme-dark {
  --colorPrimary: lime;
}

body {
  background-color: var(--colorPrimary);
}

In this case, body will have a background colour of tomato. But body.theme-dark of lime.

Use custom properties without units

CSS custom properties can be declared without units if they are used with the calc() function.

:root {
  --spacing: 2;
}

.container {
  padding: var(--spacing) px; /*Doesn't Work 😫*/
  padding: calc(var(--spacing) * 1rem); /*Will output 2rem 😃*/
}

Use custom properties with JavaScript

To get a custom property we can use the following:

getComputedStyle(element).getPropertyValue("--my-var");

// Or if inline
element.style.getPropertyValue("--my-var");

To update the custom property value:

element.style.setProperty("--my-var", newVal);

Example of getting and replacing values:

In the following example, we use the dat.gui controller library to change the value of --scenePerspective, --cubeRotateY, --cubeRotateX custom properties. This method makes it easier to apply a new style, as do not have to apply inline style on each Dom elements.

Resources

Cross Browser extensions with WebExtensions API - 101

Vincent Humeau — Tue, 23 Oct 2018 11:02:41 +0000

This note was originally posted on my DevNotes

Browser extensions add features and functionalities to a browser. It uses web technologies such as HTML, CSS, and JS.

Manifest.json

The only file that a browser extension need is the manifest.json file.

Using manifest.json, you specify basic metadata about your extension such as the name and version, and can also specify aspects of your extension's functionality, such as background scripts, content scripts, and browser actions.
MDN

The manifest.json keys dependent on the extension you are developing.

You can find the available keys on manifest.json - MDN

Example:

{
  //Mandatory
  "manifest_version": 2,
  "name": "Name of your extension",
  "version": "1.0.0",

  // Recommended
  "default_locale": "en",
  "description": "Extension description",
  "author": "Your Name",
  "homepage_url": "https://github.com/vinceumo",
  "icons": {
    "16": "icons/icon16.png",
    "32": "icons/icon32.png",
    "48": "icons/icon48.png",
    "128": "icons/icon128.png"
  }
}

Adding and Debugging a browser extension locally

Firefox

Add extension

Navigate to about:debugging
Check Enable add-on debugging
Click on Load Temporary Add-on
Select the manifest.json file

Debugging extension

Navigate to about:debugging
Find your extension
Click on Debug
Developer toll will open

Chrome / Opera

Add extension

Navigate to chrome://extensions/
Click on Load unpacked
Select the extension folder

Debugging extension

Background script errors can be shown when the package is loaded.

Navigate to chrome://extensions/
Find your extension
Click on the errors button (Will show only if errors)
Click on View in Developer Tools

To debug a popup extension:

Open the popup
Right-click in the popup
Click on Inspect

Chrome - Debugging Extensions

Edge

Add extension

Navigate to about:flags
Check Enable extension developer features
Click on the Settings and More icon (3 dots icon on the right)
Select Extensions from this menu
Click on Load extension
Select the extension folder

Debugging extension

To debug a popup extension:

Open the popup
Right-click in the popup
Click on Inspect element

Microsoft Edge - Debugging Extensions

Cross browser extension using a polyfill

mozilla/webextension-polyfill allows browsers to use Promise-based WebExtension APIs. Some browsers might style need some adjustments.

Note that opera use Chromium as well as Vivaldi and Brave, your extension will work in all these browsers if it works in Chrome.

Publish an extension

Chrome / Brave / Vivaldi

Brave and Vivaldi can download extensions from the Chrome web store.

Create a zip file of your extension (Manifest file need to be at the root of this file)
Connect/Create an account on the Google developer dashboard
- If you submit an extension for the first time you will need to pay a $5 fee
Upload the zip file

Firefox

Create a zip file of your extension (Manifest file need to be at the root of this file)
Connect/Create account on the Add-on developer hub
Submit a new Add-on

Opera

Create a zip file of your extension (Manifest file need to be at the root of this file)
Connect/Create account on the opera add-ons platform
Submit a new Add-on
You will need to wait for moderation, could take up to a few weeks/months

Example of a popup extension

I developed recently the browser extension A11Y-Color-Blindness-Empathy-Test-browser-extensions.

This extension is a popup extension that injects an inline SVG for filtering colours, some style and changes the class of the html tag of the current tab open, depending on the picked radio button.

The extension will follow the following APIs and structure:

WebExtension
|   manifest.json // Give permissions to the active Tab and reference the popup `choose_test.html`
|
+---content_scripts
|       runTest.js // Script interacting with the active tab
|
+---icons
|       icon128.png
|       icon16.png
|       icon32.png
|       icon48.png
|
+---polyfills
|       browser-polyfill.js // Polyfill for chrome and opera
|
\---popup
        choose_test.css // Style of the popup
        choose_test.html // Markup of the popup
        choose_test.js // Script of the popup, click handler

Resources

Photoshop 101, introduction for web developers

Vincent Humeau — Mon, 23 Jul 2018 21:24:34 +0000

Introduction

Often, when working as web developer, we need to integrate templates. They can be from Photoshop or other software. In this article, we will have a look at the basics of Photoshop for a web developer.

This content was initially written for a workshop for DAMDigital London.

Adobe Photoshop is a raster graphics editor software, meaning it is a program that allows users to create and edit images.

It was released in 1988 and have grown since then, as the industry standard for graphics software.

You can download a free trial version of Photoshop on the Adobe website.

Workspace

Photoshop's workspace is modular, you can adapt it depending on the work you are doing. Some default workspaces are already set up in Photoshop. In this article, I'm using the Graphic and Web one. To change to this one go into Window/workspace/Graphic and Web

Let's have a look at our workspace

A - Menu bar: It is where you get most of photoshop options.
B - Options bar: This bar will give you all the options of the currently selected tool.
C - Toolbox: This panel contains all the available tools from photoshop. Related tools are grouped together, long click on one of them to see all the tools.
D - Panels: It is the area where you have your basic panels open, such as Layers, History, etc. To open a panel just go into Window/(Panel that you want to open)

Create a new file

When creating a new file in Photoshop, you need to know first, for what support is my design going to be used for? Meaning, is it going to be used for a screen? (Web, film and video) or for print?

Depending on the answer to this question, you will need to change the PPI (Pixels Per Inch) value.

Pixels per inch (PPI) is a measurement used to define the resolution of a computer display. This metric evaluates the picture/image quality that a particular computing or output display device is able to display. Pixels per inch is also known as pixel density. Techopedia

For print, you normally will need 300PPI, but that will actually depend on the printer and the size of the print document. You should change your colour to CMYK as well, but that will again depend on how you will print your document. If you want to learn more about RGB and CMYK colour check out this article.

For screens and web 😃, you will need 72PPI and RGB colour. Then you will need to specify your screen size. I would recommend designing first for mobile, then tablet and desktop 😉.

As a web developer, you might not need to create a new file. Chances are that you will need to work with a design provided by web designers.

We are now going to look at an existing .psd template and work with this one to have a look around Photoshop.

You can download and open this PSD template from Luis Costa.

Layers

One of the core features of Photoshop is layers. Layers are like a stack of sheets, you can see through transparent areas or area with low opacity (partially transparent).

You can open the layer panel in Window/Layers.

The top layer, in this panel, will be over all the other ones under. Layers can be organized as well in folders. It is important to correctly name layers and folders. That will help during the integration.

Next to each folder and layers, you have an eye icon, it allows you to toggle the visibility of these ones.

Your PSD might have a lot of layers and documents. One way to quickly find a layer is to select the move tool (v). Right click on the canvas, where you want to find your layer. You will get all the layers in the area where you have right clicked. By clicking on one, it will select this layer in your layer panel.

Toolbox

Photoshop comes with a load of tools. I'm going to show you a few useful ones that will help you 😉.

First, if you just install Photoshop CC 2018 you will need to restore all tools go to Edit > Toolbar and click on Restore Defaults button.

Image from Adobe

We are going to see some of the most useful tools, to integrate a template:

A - Selection tools

Move: Allows the user to move a layer around the canvas. As we saw earlier it can be used as well to find a layer if you right click on your canvas.
Rectangular Marquee: This tool is used to select an area of the canvas, to copy and paste, fill it in etc. It can be used as well to measure. When your selection is done you can find the size of the selected area in Window/Info. You might need to change the default unit in photoshop Edit/preferences/general/Unit & Rulers then set your units to pixels.

B - Crop and Slice tools

Crop: This tool can... crop an image 🤟. In the tool settings (Options Bar), you can set an aspect ratio that you want to keep.

C - Measuring tools

Eyedropper: The eyedropper allows you to quickly get a colour reference in your design. Just click where you want the colour. Then at the bottom of your toolbox, the foreground colour will change to the selected colour. If you click on the foreground colour, it will open the color picker window from here you can get the value of your colour.
Color Sampler: When integrating your design you might need to select multiple colours. We are going to use the info window again Window/Info. this tool allows us to create a colour sampler. Just click on the area of the image you want to get the colours from. You will get each colour in the info panel. You can change the colour type to web by clicking on the Eyedropper icon under the number.
Ruler: helps you to measure your template. All the info will appear in your info window. Maintain Shift when measuring, so your ruler stays straight. You can get angles also.

G - Navigation tool

Hand: This tool helps you to get around the canvas, you can access this tool as well at any time by holding the spacebar and dragging it with your mouse.
Zoom: Allows to zoom in and out, you can you Ctrl + +, or Ctrl + - too.

Guides

As you might have noticed when opening our PSD file, we have some green lines on our template. They are guides, they are basically helpers that will help you build or measure things around your canvas.

You can move existing guides using the move tool(v)

To create new guides, you will need to open your ruler. View/Ruler or Ctrl + R. The ruler will appear in your workspace. Then from the ruler, you can drag in your canvas, a new guide.

To remove a guide, use the move tool(v) and put back the guide in the ruler.

To hide and show all your guide you can just use Ctrl + H, or go to View/Extras.

Smart objects

What are smart objects?

Smart Objects are layers that contain image data from raster or vector images, such as Photoshop or Illustrator files. Smart Objects preserve an image’s source content with all its original characteristics, enabling you to perform nondestructive editing to the layer. Adobe

Smart objects can be recognized in your layers when they have the following icon in their thumbnails:

Smart object is really handy if you work with vector type images (SVG, EPS, AI), but as well as other complex raster files.

Let's try to import a smart object in our PSD. Download an SVG file from flaticon. To import our SVG in our canvas, just drag the file into the canvas. We can now edit our SVG in illustrator, or another vector software by double-clicking on the thumbnail or our smart object. Changes will appear in our PSD.

Smart object can do way more than that, if you want to learn more about them, check out 10 Things You Need to Know About Smart Objects in Photoshop.

Export assets

First, just a reminder that photoshop is a raster software. Not a vector software. Meaning we "can't" export SVG files from photoshop. To do so you will need to export this kind of files from Illustrator or Inkscape, for example.

In the web, we want to have light image files, for a photography, we would use a compress .jpg file. If you need to use transparency (Alpha channel) we will use .png file. For an animated image, we would use a .gif. If you need a vector image (icons for example) the best is to export your file as .svg. If you want to have more information about all the files available in Photoshop you can check out "file formats" in the Adobe's website.

Export our canvas

To export the canvas just follow these steps:

Go to File/Export/Save for Web
Pick file format
Pick image size
Pick quality
Save

Export only an asset from the canvas

You will probably, need to export some assets of your template.

Let's export the left arrow in the product carousel:

Using the move tool we are going to find our layer. Right click on the arrow and select the layer Arrow Left. Now just right click on this layer in the layer panel. Select export as. Just select the type of file you need.

We can as well export folders.

Actions

What's an action in Photoshop?

An action is a series of tasks that you playback on a single file or a batch of files—menu commands, panel options, tool actions, and so on. For example, you can create an action that changes the size of an image, applies an effect to the image, and then saves the file in the desired format. Adobe

This feature is really convenient if you want to resize a batch of images for the web!

Let's create a new action to crop an image and export this one:

Download a bunch of images from https://unsplash.com/
Open one of our images
Open the Actions panel, Window/Actions,
Create a new action by clicking on the icon Create a new action (The one on the left to the bin icon) and let's name this action Export for web - client name
We are now recording our action, the record button is in red, you can stop to record by clicking on the stop icon (square icon on the left)
Select the crop icon and set the ratio to 1x1 and crop the image
Now we want to export our image, File/Export/Save for Web, select JPG, quality 50% and width 500px
Click save and pick your destination folder
Close your image without saving
Stop recording, click on the stop icon (square icon on the left)

We now have our action, we can open an image and just "play" our action by clicking on the play button.

If we want to apply our action to a batch of images just follow this steps:

Go to File/Automate/Batch
Select the Source folder.
Select our action
Click on Ok

And voila 😉. All your images are in the export folder.

I hope you enjoyed this small Photoshop 101 introduction for web developer 😃. If you want to have a 102 version, let me know what you would like to know or to hear about 😉.

Vue.js 101 todo PWA tutorial

Vincent Humeau — Sat, 21 Jul 2018 09:41:28 +0000

The goal of this tutorial is to give an introduction to vue.js ❤.

This content was initially written for a workshop for DAM Digital London.

Vue.js is a progressive framework for building user interfaces (UI).

This tutorial assumes that you already have some intermediate knowledge about HTML, CSS and Javascript. If you don't have any knowledge of these fields, check out freeCodeCamp, they have great resources to learn these topics 😉.

Here are the subjects this tutorial will cover:

v-bind directive
Class and Style Bindings
Event Handling
Data binding in attributes
List Rendering
Interpolations - Mustache
Form Input Bindings - Checkbox
v-model
Methods
Conditional Rendering
v-if
v-else
Introduction to PWA

We are going to create a todo application with the ability to have multiple lists of todos.

Getting started

Clone the starter materials from github. It includes the base HTML, CSS and JS.

You can find the final code of this tutorial on github, and the demo if you follow this link.

Vue CDN is already included in our index.html, as well as our CSS and content/js/app.js 😃.

Toggle navigation on mobile

First thing first, the side navigation on mobile (📱 < 850px) should show and hide.

When we click on Menu we want <nav> to toggle the class .is-open.

In vue.js, v-bind allow us to bind data inside an html attribute. E.g. v-bind:id="", v-bind:style="", v-bind:data-target="", etc. The shorthand for v-bind is :.

In index.html, we will dynamically pass .is-open using v-bind:class. If isNavOpen is true, then we will add our class.

<nav v-bind:class="{'is-open': isNavOpen}">
<!-- ... -->
</nav>

In content/js/app.js, we need isNavOpen in our data. If you change the value of this last one to true, the nav will show up.

The data property in vue.js is where we store the data of our application but as well the state of our UI. For example, isNavOpen is by default set to false, but by changing its value to true, we can bind the class is-open to the DOM.

In our app.js, we need to add isNavOpen: false.

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false
  }
});

Now we want to change the value of isNavOpen when we click on the Menu button.

We are going to use the event handler 'on click'. In vue.js, we can use v-on: or @ (Shorthands), to listen to DOM events. In our case, we want to listen to a click event. We are then going to use v-on:click/@click.

<button v-on:click="isNavOpen = !isNavOpen" class="menu">Menu</button>

As you can see, we can pass an inline javascript statement, we can as well use a method (function), we will see later in this tutorial how to use this last one.

Documentation references

Bind our todo lists to the side navigation

In content/js/app.js, let's add some dummy lists so we can start to integrate our side navigation.

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false,
    todoLists: [
      {
        title: "✈️ Trip to japan",
        keyword: "japan",
        items: [
          { name: "Eat ramen", isCompleted: true },
          { name: "Visit mt Fuji", isCompleted: false },
          { name: "Learn japanese", isCompleted: false }
        ]
      },
      {
        title: "🏂 Ski trip to the Alps",
        keyword: "Alps",
        items: [
          { name: "Find a chalet", isCompleted: true },
          { name: "Learn how to ski", isCompleted: false }
        ]
      },
      {
        title: "🍉 Groceries",
        keyword: "Food",
        items: [
          { name: "Apples", isCompleted: false },
          { name: "Banana", isCompleted: true },
          { name: "Tomatoes", isCompleted: false },
          { name: "Bread", isCompleted: true }
        ]
      }
    ]
  }
});

To render our lists in the side navigation, we need to use the v-for directive.

<nav v-bind:class="{'is-open': isNavOpen}">
  <ul>
    <li v-for="todoList in todoLists">
      <button>
        {{todoList.title}}
        <span>
          {{todoList.items.length}}
        </span>
      </button>
    </li>
    <li>
      <button class="is-add">Create a new list</button>
    </li>
  </ul>
</nav>

todoLists is the source data and todoList is the alias used to iterate in our array.

We are using the 'moustache' syntax {{}} to bind our text to the view. The moustache tag gets replace by the targeted value in todoLists.

Documentation references

Main section

Header

We want to be able to see our todos in the main section. For now, we will only render the first todoLists list (index 0).

In content/js/app.js => data add currentListIndex: 0.

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false,
    currentListIndex: 0,
    todoLists: [
      //...
    ]
  }
});

Bind the title of the list using the moustache syntax in the header.

<h1>{{todoLists[currentListIndex].title}}</h1>

The header has a background image. We are using Unsplash Source to get a random image. We can specify a keyword to get a relevant image for our header.

https://source.unsplash.com/featured/?{KEYWORD},{KEYWORD}

As we bind our keyword inside an attribute, we are using v-bind

<header v-bind:style="'background-image: url(https://source.unsplash.com/featured/?' + todoLists[currentListIndex].keyword + ')'">
  <!-- ... -->
</header>

Todos

To render our todos in the main section, we will need to use v-for. As we want an individual ID and names for each input we are passing the index in our for loop v-for="(value, index) in object".

We use v-bind to check/tick our todos inputs if these ones are already checked.

We are using v-model to update the value of isCompleted from our todos when we click on the checkbox. When our checkbox is checked, isCompleted will get the value of true and the parent li will automatically get the class .is-completed as isCompleted is true.

The v-model directive creates a two-way data bindings, meaning when the value gets updated the UI will be updated as well.

<ul>
  <li v-for="(todo, index) in todoLists[currentListIndex].items" v-bind:class="{'is-completed': todo.isCompleted}">
    <label v-bind:for="'todo' + index">
      <input
      type="checkbox"
      v-bind:name="'todo' + index"
      v-bind:id="'todo' + index"
      v-bind:checked="todo.isCompleted"
      v-model="todo.isCompleted">
      {{todo.name}}
    </label>
    <button class="is-danger">Edit todo</button>
  </li>
  <li>
    <button class="is-add">New Todo</button>
  </li>
</ul>

Documentation references

Change current list

We want to be able to change the current list being displayed. This one is set by currentListIndex in our app's data. When we click on one of the list items we want to change currentListIndex to the index of this one and close the side navigation if open.

We need as well, to show the user the current list being displayed, to do so, we are adding the class .is-active if currentListIndex === index.

<li v-for="(todoList, index) in todoLists"  v-bind:class="{'is-active' : currentListIndex === index}">
    <button v-on:click="currentListIndex = index; isNavOpen = false">
        {{todoList.title}}
        <span>
            {{todoList.items.length}}
        </span>
    </button>
</li>

Create a new list

Toggle the sidebar

When clicking on Create a new list, we show the .sidebar. To do so we want to add the class .is-open to this one, then close the nav bar if this one is open on mobile. The way to do this is quite similar to what we have done with the navigation on mobile.

In our data, we will first, add a new entry of isSidebarOpen: false:

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false,
    isSidebarOpen: false,
    currentListIndex: 0
    //...
  }
});

Now let's bind our class .is-open to our .sidebar:

<div class="sidebar" v-bind:class="{'is-open' : isSidebarOpen}">
 <!-- ... -->
</div>

We need to add an event handler on click on Create a new list, that will open the sidebar and close the navigation on mobile:

<button class="is-add" v-on:click="isSidebarOpen = true; isNavOpen = false;">Create a new list</button>

Nice, now we can open our sidebar 🎉.

Now let's close the sidebar when we click on cancel:

<button type="button" class="is-danger" v-on:click="isSidebarOpen = false">Cancel</button>

Add the new list

To create a new list, we need the values of the title and keyword inputs. When the user clicks on Create List, we will push our new values to todoLists in our data. If one of our input is empty we will show up a default value.

In our app.js, add a tempNewList array, it will store the values of our inputs.

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false,
    isSidebarOpen: false,
    currentListIndex: 0,
    tempNewList: [
      {
        title: null,
        keyword: null
      }
    ]
    //...
  }
});

Now we will bind our inputs using v-model.

<form>
  <h3>Create a new list</h3>
  <label for="listTitle">Title:</label>
  <input id="listTitle" name="listTitle" type="text" placeholder="My amazing next trip to south america" v-model="tempNewList.title">
  <label for="listKeyword">Keyword:</label>
  <input id="listKeyword" name="listKeyword" type="text" placeholder="Colombia" v-model="tempNewList.keyword">
  <div class="buttons">
      <button type="button" class="is-danger" v-on:click="isSidebarOpen = false">Cancel</button>
      <button type="button" class="is-confirm">Create List</button>
  </div>
</form>

Alright, now let's push our new tempNewList values to todoLists.

Create a method called addNewList. A method is a function stored as an object property. Here the object is the vue instance. In vue, our method will be stored in a methods object.

addNewList method will follow this scenario:

If title is empty, use a default string of "🕵️‍ List with no name"
If keyword is empty, use a default string of "earth"
Push our values to todoLists
Change our current list to our new list
Close the sidebar
Reset the values of our inputs

var app = new Vue({
  el: "#app",
  data: {
    //...
  },
  methods: {
    addNewList: function() {
      var listTitle = this.tempNewList.title;
      var listKeyword = this.tempNewList.keyword;
      if (listTitle == null) {
        listTitle = "🕵️‍ List with no name";
      }
      if (listKeyword == null) {
        listKeyword = "earth";
      }
      this.todoLists.push({
        title: listTitle,
        keyword: listKeyword,
        items: []
      });
      this.currentListIndex = this.todoLists.length - 1;
      this.isSidebarOpen = false;
      this.tempNewList.title = null;
      this.tempNewList.keyword = null;
    }
  }
});

Finally, we are going to bind our method to our Create list button.

<button type="button" class="is-confirm" v-on:click="addNewList">Create List</button>

Documentation references

Method Event Handlers

Edit a list

Good, now that we can create a new list, we want the ability to edit existing ones. We will be able to edit the title, the keyword and delete a list.

Toggle the sidebar content

Create a new method openSidebar. This one will:

Open the sidebar
Show the form that we want to use
Close the navigation if this one is open

In data, let's add sidebarContentToShow: null, This will allow us to know what form should be shown.

var app = new Vue({
  el: "#app",
  data: {
    isNavOpen: false,
    isSidebarOpen: false,
    sidebarContentToShow: null,
    currentListIndex: 0
    //...
  },
  methods: {
    //...
  }
});

We have 4 forms in our sidebar that we will toggle:

"createNewList"
"editList"
"createNewTodo"
"editTodo"

In our HTML, we will conditionally render our forms depending on the value of sidebarContentToShow. To do so we are using the v-if directive. It will allow us to render our block if a condition is true. We need to uncomment our forms and add a v-if directive.

<div class="sidebar" v-bind:class="{'is-open' : isSidebarOpen}">
  <div class="sidebar-content">
      <form v-if="sidebarContentToShow === 'createNewList'">
          <h3>Create a new list</h3>
          <!-- ... -->
      </form>
      <form v-if="sidebarContentToShow === 'editList'">
        <h3>Edit list</h3>
          <!-- ... -->
      </form>
      <form v-if="sidebarContentToShow === 'createNewTodo'">
        <h3>Create a new todo</h3>
          <!-- ... -->
      </form>
      <form v-if="sidebarContentToShow === 'editTodo'">
        <h3>Edit todo</h3>
          <!-- ... -->
      </form>
  </div>
</div>

Now when we click on the Create a new list, the sidebar appears and we see... Nothing 😱. That normal remember, sidebarContentToShow is set to null 😉.

To change the value of sidebarContentToShow we are going to create an openSidebar method that will open the sidebar and change the form that we want to show.

var app = new Vue({
  el: "#app",
  data: {
    //...
  },
  methods: {
    openSidebar: function(contentToShow) {
      this.isSidebarOpen = true;
      this.isNavOpen = false;
      this.sidebarContentToShow = contentToShow;
    }
    //...
  }
});

Now we can change Create a new list so we can use openSidebar

<button class="is-add" v-on:click="openSidebar('createNewList')">Create a new list</button>

And ta-dah we are now rendering the create a new list form. As you may have already guessed we will reuse our method with the Edit list button.

<button class="is-primary" v-on:click="openSidebar('editList')">Edit list</button>

Edit list form

Delete a list

We are going to start with the delete list button. Create a new method called deleteList. It will remove the currently shown list and show the first one.

//...
deleteList: function() {
  this.todoLists.splice(this.currentListIndex, 1);
  this.currentListIndex = 0;
  this.isSidebarOpen = false;
}
//...

<button type="button" class="is-danger" v-on:click="deleteList">Delete list</button>

Now we can remove lists, but if we try to remove all lists we get an error and our app stop to work.

[Vue warn]: Error in render: "TypeError: todoLists[currentListIndex] is undefined"

As you might have guessed, we have this error because our todoLists is empty and we still try to render some part of our application that relies on the values of todoLists. We will use conditional rendering v-if and v-else, to fix this issue we will render our main content only if todoLists.length > 0. Moreover, we want the user to able to create a new list, we will use v-else to show an alternative main content that will help the user create a new list.

<main v-if="todoLists.length > 0">
  <!-- ... -->
</main>
<main v-else>
  <header style="background-image: url(https://source.unsplash.com/featured/?cat">
      <div class="header-content">
          <h1>Please create a new list</h1>
          <button class="is-add" v-on:click="openSidebar('createNewList')">Create a new list</button>
      </div>
  </header>
</main>

Change the title and keyword value

Let's get back to our editList form. We want to:

Bind our inputs with the right todoLists element using v-model.
When we click on done, we want to close our slider.
Only want to render this form if todoLists.length > 0

<form v-if="sidebarContentToShow === 'editList' && todoLists.length > 0">
    <h3>Edit list</h3>
    <label for="listTitle">Title:</label>
    <input id="listTitle" name="listTitle" type="text" placeholder="My amazing next trip to south america" v-model="todoLists[currentListIndex].title">
    <label for="listKeyword">Keyword:</label>
    <input id="listKeyword" name="listKeyword" type="text" placeholder="Colombia" v-model="todoLists[currentListIndex].keyword">
    <div class="buttons">
        <button type="button" class="is-danger" v-on:click="deleteList">Delete list</button>
        <button type="button" class="is-confirm" v-on:click="isSidebarOpen = false">Done</button>
    </div>
</form>

Documentation references

Create and edit a todo

The UI of our app is almost finished, we still need to:

Create a new todo in a list
Edit and delete an existing todo

Sound similar to what we have done with the lists right? It is going to be almost the same steps.

Create a todo

In our data create a new element of tempNewList:

tempNewTodo: [
  {
    name: null,
    isCompleted: false
  }
],

We need a new method, so we can add our new todo to a list in todoLists

addNewTodo: function() {
  var todoName= this.tempNewTodo.name;
  var todoCompleted = this.tempNewTodo.isCompleted;
  if (todoName == null) {
    todoName = "🕵️‍ unnamed todo";
  }
  this.todoLists[this.currentListIndex].items.push({
    name: todoName,
    isCompleted: todoCompleted
  });
  this.isSidebarOpen = false;
  this.tempNewTodo.name = null;
  this.tempNewTodo.isCompleted = false;
}

Now let's dive in our HTML.

We need to open the sidebar with the createNewTodo form.

<button class="is-add" v-on:click="openSidebar('createNewTodo')">New Todo</button>

As we did before, we will bind our inputs using v-model and use the addNewTodo method to push our new values.

<form v-if="sidebarContentToShow === 'createNewTodo'">
    <h3>Create a new todo</h3>
    <label for="todoName">Name:</label>
    <input id="todoName" name="todoName" type="text" placeholder="Do things..." v-model="tempNewTodo.name">
    <label for="todoCompleted"><input name="todoCompleted" id="todoCompleted" type="checkbox" v-bind:checked="tempNewTodo.isCompleted" v-model="tempNewTodo.isCompleted"> Is completed</label>
    <div class="buttons">
        <button type="button" class="is-danger" v-on:click="isSidebarOpen = false">Cancel</button>
        <button type="button" class="is-confirm" v-on:click="addNewTodo">Create todo</button>
    </div>
</form>

As we are now binding the data for isCompleted in our todos, we will show, in our navigation the number of completed todos.

In our app.js, create a totalTodosCompleted method passing the index of the current todoList.

totalTodosCompleted: function(i){
  var total = 0;
  for (var j = 0; j < this.todoLists[i].items.length; j++) {
    if(this.todoLists[i].items[j].isCompleted){
      total++;
    }
  }
  return total;
}

And now in our navigation, we are going to use our new method to return the total of completed todos.

<li v-for="(todoList, index) in todoLists" v-bind:class="{'is-active' : currentListIndex === index}">
    <button v-on:click="currentListIndex = index; isNavOpen = false">
        {{todoList.title}}
        <span>
            {{totalTodosCompleted(index)}} / {{todoList.items.length}}
        </span>
    </button>
</li>

Edit a todo

To edit a todo, first, we need to know the index of the todo that will be editing, in our data, create currentTodoIndex.

currentTodoIndex: 0,

We will need a deleteTodo method that will remove the current todo.

deleteTodo: function() {
  this.todoLists[this.currentListIndex].items.splice(this.currentTodoIndex, 1);
  this.isSidebarOpen = false;
  this.currentTodoIndex = 0;
}

Now let's have look at our HTML.

First, we want to open our slider and change the value of currentTodoIndex.

<button class="is-primary" v-on:click="openSidebar('editTodo'); currentTodoIndex = index">Edit todo</button>

In our editTodo form we will:

Show our form only if todoLists[currentListIndex].items.length > 0
Bind the todo name and if completed using v-model
When we click on Delete todo, trigger the method deleteTodo
When we click on Done, close our sidebar

<form v-if="sidebarContentToShow === 'editTodo' && todoLists[currentListIndex].items.length > 0">
  <h3>Edit todo</h3>
  <label for="todoName">Todo:</label>
  <input id="todoName" name="todoName" type="text" placeholder="Do things..." v-model="todoLists[currentListIndex].items[currentTodoIndex].name">
  <label for="todoCompleted"><input name="todoCompleted" id="todoCompleted" type="checkbox" v-bind:checked="todoLists[currentListIndex].items[currentTodoIndex].isCompleted" v-model="todoLists[currentListIndex].items[currentTodoIndex].isCompleted"> Is completed</label>
  <div class="buttons">
      <button type="button" class="is-danger" v-on:click="deleteTodo">Delete todo</button>
      <button type="button" class="is-confirm" v-on:click="isSidebarOpen = false">Done</button>
  </div>
</form>

🎉🎉🎉🎉🎉 The UI of our todo is now done!

LocalStorage

When we reload the page, it goes back to our dummy values. How great would it be if we could store our lists and todos locally?

We are going to use window.localStorage. It is part of the Web Storage API.

localStorage allow us to store data with no expiration date.

In our app.js, create a new method updateTodoLocalStorage

//...
updateTodoLocalStorage: function () {
  localStorage.setItem('todoLocalStorage', JSON.stringify(this.todoLists));
}
//...

We are using setItem() method from the Web Storage API. We pass the following parameters:

setItem(keyName, keyValue);
- keyName: name of the key we want to create/update ('todoLocalStorage').
- keyValue: value we want to give the key you are creating/updating (JSON.stringify(this.todoLists)).

We want now to use this method every time we update the values of our todos or lists. Vue allows us to react to data changes with the watch option. Every time we have a change in our todoLists, we will call our updateTodoLocalStorage method. As our object has nested values, we want to detect changes inside this values. We can pass deep: true to do so.

var app = new Vue({
  el: "#app",
  data: {
    //...
  },
  watch: {
    todoLists: {
      handler() {
        this.updateTodoLocalStorage();
      },
      deep: true
    }
  },
  methods: {
    //...
    updateTodoLocalStorage: function() {
      localStorage.setItem("todoLocalStorage", JSON.stringify(this.todoLists));
    }
  }
});

Now let's inspect our app and look into Local Storage. If we create/update a list or a todo, we can see our todoLocalStorage storage being updated.

Now, when we load our page, we need to set our todoLists as our todoLocalStorage. Vue comes with Lifecycle Hooks. We will use the created: function() one to set our values. We are going, as well, to remove our dummy values.

var app = new Vue({
  el: "#app",
  data: {
    //...
    todoLists: []
  },
  created: function() {
    this.todoLists = JSON.parse(
      localStorage.getItem("todoLocalStorage") || "[]"
    );
  },
  watch: {
    //...
  },
  methods: {
    //...
  }
});

Now if we reload, close and reopen our app all our todos and list have been saved 🤟.

Documentation references

Bonus - Offline Progressive Web App (PWA)

In this bonus part of this tutorial, we will set up a Progressive Web App (PWA) and services workers, so we can use this web application offline on a smartphone.

Set up a PWA

A PWA is:

Progressive Web Apps are web applications that are regular web pages or websites, but can appear to the user like traditional applications or native mobile applications. The application type attempts to combine features offered by most modern browsers with the benefits of a mobile experience. wikipedia

It is basically a web app that takes advantages of the latest technologies to act and feels like a native app.

To set up our PWA we will need to create a manifest.json file and set up our service workers.

PWA must be served from a secure origin (HTTPS).

Generate icon assets

First, include all the icon assets in our project. The icons have already been generated using https://realfavicongenerator.net/. They are included in content/img/.

In the head of our HTML we want to include:

<link rel="apple-touch-icon" sizes="180x180" href="content/img/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="content/img/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="content/img/favicon-16x16.png">
<link rel="mask-icon" href="content/img/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="content/img/favicon.ico">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-config" content="content/img/browserconfig.xml">
<meta name="theme-color" content="#77c4d3">

Web App Manifest

Web App Manifest (manifest.json) is a file that provides information about our web app such as icons, the name of our application, etc. It is part of the technologies used for PWAs. You can get more information about the Web App Manifest on MDN web docs.

Create this file at the root of our project.

{
  "name": "todo",
  "short_name": "todo",
  "author": "Vincent Humeau",
  "lang": "en-GB",
  "icons": [
    {
      "src": "content/img/android-chrome-192x192.png",
      "sizes": "192x192",
      "type": "image/png"
    },
    {
      "src": "content/img/android-chrome-512x512.png",
      "sizes": "512x512",
      "type": "image/png"
    }
  ],
  "theme_color": "#77c4d3",
  "background_color": "#77c4d3",
  "display": "standalone",
  "orientation": "portrait",
  "scope": "/todo/",
  "start_url": "/todo/"
}

In our HTML file, we want to include it.

<link rel="manifest" href="manifest.json">

Service workers

What are service workers?

Service workers are a new browser feature that provide event-driven scripts that run independently of web pages. Unlike other workers, service workers can be shut down at the end of events, note the lack of retained references from documents, and they have access to domain-wide events such as network fetches. Service workers also have scriptable caches. Along with the ability to respond to network requests from certain web pages via script, this provides a way for applications to “go offline”. w3c/ServiceWorker - Github

This tutorial does not aim to go in depth about service workers, you can find some great tutorial and resources online:

For our services workers we are using this gist from Omranic

Create a sw.js file at the root of our project.

In our index.html:

<script>
    if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
            navigator.serviceWorker.register('sw.js');
        });
    }
</script>

Then, in our sw.js we will cache all our assets that will allow our app to be usable offline:

var shellCacheName = "pwa-todo-v1";
var filesToCache = [
  "./",
  "./index.html",
  "./content/css/screen.min.css",
  "./content/js/app.js",
  "https://cdn.jsdelivr.net/npm/vue",
  "https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.0/normalize.min.css"
];

Now, we only have to follow this gist and add the parts Listen to installation event, Update Assets Cache and Serve App Shell Offline From Cache.

This tutorial is now finally done. Our todo vue.js PWA can now be accessed here https://vinceumo.github.io/todo