Skip to content

Instantly share code, notes, and snippets.

View abelsan's full-sized avatar

abelsan

84 followers · 0 following
View GitHub Profile
@abelsan
abelsan / index.ejs
Last active February 9, 2024 18:45
Templating in Node.JS - using ejs
<!-- Inside your project directory, create a folder named "views". -->
<!-- Inside the "views" folder, create a file named "index.ejs". -->
<!-- Add the code below to "index.ejs", this is your EJS template -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello World Example</title>
</head>
@abelsan
abelsan / index.html
Created December 8, 2020 20:15
Standalone html file React.JS template
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Template</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / flickr.html
Created September 29, 2020 03:02
flickr starter code
<!DOCTYPE html>
<html>
<meta charset="utf-8" />
<title>Add a default marker</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" />
<script src="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.js"></script>
<link href="https://api.mapbox.com/mapbox-gl-js/v1.11.0/mapbox-gl.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; height: 80%; }
@abelsan
abelsan / giphy.html
Created September 29, 2020 03:01
Giphy starter code
<!DOCTYPE html>
<html>
<div id="container"></div>
<script>
var query = 'dog';
var apiKey = '7LzHKvaZaAylJUePuMZS2NnXYVsVgm61';
var giphy = `https://api.giphy.com/v1/gifs/search?api_key=${apiKey}&q=${query}&limit=10&offset=0&rating=G&lang=en`
// ------------------------------------
@abelsan
abelsan / CleanerRouter.html
Created August 20, 2020 22:06
Cleaner standalone react router
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Template</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / reducer.html
Created August 17, 2020 19:19
Counters example using reducer
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / index.html
Created August 16, 2020 01:36
holding state in variable outside component
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / many.html
Created August 15, 2020 23:40
synchronizing 3 children counters
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / stats.html
Created August 15, 2020 22:01
Synchronization of data between parent and child react components
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>
@abelsan
abelsan / clock.html
Created August 14, 2020 17:25
Clock using react
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Clock</title>
<!-- don't use this in production: -->
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>
<body>