Steve Griffith prof3ssorSt3v3

🎯

Focusing

Coordinator of the Mobile Application Design & Development Program at Algonquin College

prof3ssorSt3v3 / index.html

Created April 20, 2023 17:29

Code from video about using Chrome Dev Tools to test for Responsive and Mobile Design

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />

prof3ssorSt3v3 / index.html

Created April 19, 2023 22:41

sample pages from intro to chrome dev tools video

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="preconnect" href="https://fonts.googleapis.com" />
	<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@300&display=swap" rel="stylesheet" />

prof3ssorSt3v3 / main.mjs

Created April 8, 2023 19:39

code from video about nullish coalescing assignment operator

	//nullish coalescing assignment ??=
	//related to the nullish coalescing operator ??
	//overwrite IF nullish (null or undefined)
	import crypto from 'crypto';
	//import not required in browser
	const u1 = {
	name: 'brand new user',
	email: '[email protected]',
	};
	const u2 = {

prof3ssorSt3v3 / app.js

Last active January 14, 2024 08:13

Code from video on Intro to Web Text to Speech

	let VOICE = null;
	let synth = window.speechSynthesis;
	let voices = synth.getVoices();

	(function addListeners() {
	document.getElementById('voiceSelect').addEventListener('change', changeVoice);
	document.getElementById('btnRead').addEventListener('click', readParas);
	document.getElementById('btnPause').addEventListener('click', () => {
	synth.pause();
	});

prof3ssorSt3v3 / index.html

Created April 8, 2023 17:54

code from video about using the newer CSS inset property

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>CSS Inset Property</title>
	<link href="./css/main.css" rel="stylesheet" />
	</head>
	<body>

prof3ssorSt3v3 / app.js

Created April 6, 2023 02:05

Code from video about custom redirects inside service workers with Response objects

	if (navigator.serviceWorker) {
	navigator.serviceWorker.register('./sw.js');
	}

prof3ssorSt3v3 / index.html

Created April 4, 2023 04:17

Code from video about HTML pattern attribute

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Pattern Attribute</title>
	<script src="./main.js" type="module"></script>
	<link rel="stylesheet" href="./main.css" />
	</head>

prof3ssorSt3v3 / index.html

Created March 29, 2023 17:40

Code from Video about Persistent Storage

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<style>
	html {
	color-scheme: dark light;

prof3ssorSt3v3 / main.js

Created March 19, 2023 18:32

Code from video about the new.target meta property

	//new.target meta property

	function Being() {
	//
	console.log(new.target);
	if (new.target === undefined) throw new TypeError('Missing new');
	if (!new.target) throw new TypeError('Missing new');

	console.log(typeof new.target); //function
	console.log(new.target.name); // Being

prof3ssorSt3v3 / index.html

Created March 10, 2023 16:27

	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link rel="stylesheet" href="./main.css" />
	</head>
	<body>