Sebastian Uddén SebastianUdden

Create a notifications server

In order to handle push notifications we'll need a client that can recieve notifications and a server that can push notifications. These instructions will help setup a barebones notifications server.

Initial setup

Create the folder notifications-server, go into it and setup an empty git repository, then install express and web-push as a base for our barebones server.

mkdir notifications-server
cd notifications-server

Create a notifications client

In order to handle push notifications we'll need a client that can recieve notifications and a server that can push notifications. These instructions will help setup a barebones notifications client.

Folder

Create a folder called notifications-client in your repositories folder

Initiate

Gists overview

The React app series

Go to gists overview

Web development prerequisites

In order to efficiently develop new web pages and be able to use your creativity on the web fully, there are a few handy tools that should first be aquired:

For Mac users

Go to https://www.iterm2.com/ and download iTerm, a great customizeable terminal
Go to https://code.visualstudio.com/ and download VS Code, a powerful and customizeable code editor
Go to https://nodejs.org/ and install the LTS version of Node, in short node is basically an environment for javascript to be run on the server side.

Go to gists overview

Preload a smaller image

After adding an image as background to your page you may find that it's required to be a high resolution in order to not look pixelated on big screens. This will unfortunately mean you get a clunky 90:s feeling with the image loading from top to bottom for users on 3G or worse connections. In order to avoid this we can create a compressed pixelated version of the image to show when the user enters the page, then swap the images once the big image is finished loading. Here's how:

How to test the issue

Use Chrome because it's awesome (otherwise google how to do this in other browsers)
Run your project locally or go to the published version
Open Chrome DevTools with CMD+Option+I on Mac or CTRL+Option+I on Windows

Go to gists overview

Add a full-screen background image

After making your react app full width and height we can also add an image as a background to it. This is how:

Find and download an image

Google an image you would like to use
Right click the linked image result and choose "Open image in new tab" and make sure the new url ends with png or jpg like this: https://cdn.spacetelescope.org/archives/images/wallpaper2/heic2007a.jpg
Right click the image in the new tab and choose "Save image as"

Go to gists overview

Make your React app full width and height

After creating your basic react app and setting up a styled component it's nice to be able to control the css from "inside" your main component. This is how:

Open the file `src/App.css
Replace the content with this css

body,
html {

	import React from "react";
	import styled from "styled-components";

	const Stack = styled.div`
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;

	background-color: #444;
	padding: 50px;

	// Functional component
	const Input = forwardRef(function Input(props, ref) {
	return <input ref={ref} {...props} />;
	});

	// HOC component
	const Comp = ({focused, forwardedRef, ...rest}) => <input className={classnames(styles.comp, focused && styles.focused)} ref={forwardedRef} />);

	const EnhancedComp = compose(
	withState('focused', 'setFocused', false),

	const getLeadingZero = number => (number < 10 ? `0${number}` : number)

	export const formatDate = dateString => {
	const dateTime = new Date(dateString)
	const year = dateTime.getFullYear()
	const month = getLeadingZero(dateTime.getMonth() + 1)
	const day = getLeadingZero(dateTime.getDate())
	const hours = getLeadingZero(dateTime.getHours())
	const minutes = getLeadingZero(dateTime.getMinutes())
	return { date: `${year}-${month}-${day}`, time: `${hours}:${minutes}` }