Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Steve Griffith prof3ssorSt3v3

🎯
Focusing
View GitHub Profile
@prof3ssorSt3v3
prof3ssorSt3v3 / reflect.js
Created Sep 27, 2020
How to use the Reflect object in JavaScript to intercept JS object operations
View reflect.js
// Reflect Object - built-in object that provides methods for interceptable JavaScript operations
// All methods are static
// has no constructor cannot use `new`
// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Reflect
const log = console.log;
let alex = {
name: 'Alex',
id: 93,
hello: function (a, b) {
@prof3ssorSt3v3
prof3ssorSt3v3 / select.html
Created Sep 20, 2020
Working with Select, Option, and Optgroup
View select.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/* Default styles */
*,
*::after,
@prof3ssorSt3v3
prof3ssorSt3v3 / fieldsets.html
Created Sep 20, 2020
How to use fieldset and legend in HTML
View fieldsets.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 / image.md
Created Sep 16, 2020
Layered background image effects and clipping
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Created Sep 7, 2020
Working with the new String.prototype.replaceAll method
View index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>String.prototype.replaceAll</title>
</head>
<body>
<main>
<h1>String.prototype.replaceAll()</h1>
View favicon.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Using Favicons</title>
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16" />
<!--
Favicon creator websites:
@prof3ssorSt3v3
prof3ssorSt3v3 / one.html
Created Aug 31, 2020
Using window.open
View one.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Page Three</title>
</head>
<body>
<h1 id="head">This is page three</h1>
</body>
@prof3ssorSt3v3
prof3ssorSt3v3 / alert.html
Created Aug 30, 2020
alert confirm and prompt
View alert.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
* {
box-sizing: border-box;
}
@prof3ssorSt3v3
prof3ssorSt3v3 / images.md
Created Aug 30, 2020
Creating round images in HTML and CSS
View images.md
View border-gradient.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
margin: auto;
font-size: 20px;
You can’t perform that action at this time.