Skip to content

Instantly share code, notes, and snippets.

View prof3ssorSt3v3's full-sized avatar
🎯
Focusing

Steve Griffith prof3ssorSt3v3

🎯
Focusing
View GitHub Profile
<!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>MultiLingual</title>
<style>
button {
@prof3ssorSt3v3
prof3ssorSt3v3 / 404.html
Last active February 26, 2024 02:09
Code from Service Worker Review
<!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>404</title>
<link rel="stylesheet" href="main.css" />
<style>
html {
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Created March 8, 2021 18:13
Introduction to Service Workers code from video
const APP = {
SW: null,
init() {
//called after DOMContentLoaded
if ('serviceWorker' in navigator) {
// 1. Register a service worker hosted at the root of the
// site using the default scope.
navigator.serviceWorker
.register('/sw.js', {
scope: '/',
const app = {
init: () => {
document
.getElementById('btnGet')
.addEventListener('click', app.fetchWeather);
document
.getElementById('btnCurrent')
.addEventListener('click', app.getLocation);
},
fetchWeather: (ev) => {
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Created April 3, 2021 21:30
Code from video about all the CSS Math functions - min, max, clamp, calc, and minmax
<!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>min, max, minmax, clamp, calc</title>
<link rel="stylesheet" href="main.css" />
</head>
<body>
@prof3ssorSt3v3
prof3ssorSt3v3 / grid.html
Created May 17, 2021 17:44
Code from video about building a colour extraction tool for images using canvas
<!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>Grid Demo</title>
<style>
* {
box-sizing: border-box;
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Created March 13, 2021 22:17
Code for Service Workers 9 - Integrating IndexedDB into site with a Service Worker
const APP = {
SW: null,
DB: null, //TODO:
init() {
//called after DOMContentLoaded
//register our service worker
APP.registerSW();
document
.getElementById('colorForm')
.addEventListener('submit', APP.saveColor);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Working with HTML Forms</title>
<meta name="viewport" content="width=device-width">
<style>
*,
*::after,
*:before{
@prof3ssorSt3v3
prof3ssorSt3v3 / fieldsets.html
Created September 20, 2020 17:46
How to use fieldset and legend in HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fieldsets and Legends</title>
<link
href="https://fonts.googleapis.com/css2?family=Raleway:wght@700&display=swap"
rel="stylesheet"
/>
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Last active January 26, 2024 16:08
Code from Service Workers Part 2 - Cache API Intro
const APP = {
SW: null,
cacheName: 'assetCache1',
init() {
//called after DOMContentLoaded
// if ('serviceWorker' in navigator) {
// // Register a service worker hosted at the root of the
// // site using the default scope.
// navigator.serviceWorker.register('/sw.js').then(
// (registration) => {