Skip to content

Instantly share code, notes, and snippets.

View Fabian295's full-sized avatar
🏠
Working from home

Fabian Kanhai Fabian295

🏠
Working from home
  • the Netherlands
  • 13:18 (UTC +02:00)
View GitHub Profile
@Fabian295
Fabian295 / canvas-images.html
Created September 26, 2021 08:35
HTML5 Canvas - Learning and Working with the image object and creating and manipulating images on the canvas, etc.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas Images</title>
<style>
#canvas{
border: 1px solid #999;
margin: 1rem auto;
display: block;
@Fabian295
Fabian295 / canvas-text.html
Created September 26, 2021 08:30
HTML5 Canvas - Adding text to the canvas
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Adding Text to Canvas</title>
<style>
@import url('https://fonts.googleapis.com/css?family=Allerta+Stencil');
#canvas{
border: 1px solid #999;
@Fabian295
Fabian295 / canvas-intro.html
Created September 26, 2021 08:23
hTML5 Canvas introduction with the basics and set up, shapes making, etc
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML5 Canvas Basics and Shapes</title>
<style>
*{
padding: 0;
margin: 0;
box-sizing: border-box;
@Fabian295
Fabian295 / canvas-lines-curves.html
Created September 22, 2021 10:47
canvas, HTML5 canvas API, how to make and understand lines and curves on the canvas HTML5 element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Drawing Lines and Curves in Canvas</title>
<style>
#canvas{
border: 1px solid #999;
margin: 1rem auto;
display: block;
@Fabian295
Fabian295 / jq-events.html
Created August 10, 2021 19:51
JQ- jQuery event handling vs Vanilla JS with event listeners, etc
<!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>jQuery Rehab - Events</title>
<style>
p {
@Fabian295
Fabian295 / jq-ajax.html
Created August 10, 2021 19:42
JQ - jQuery use of ajax-method with fail and done vs Vanilla JS use of fetch() and promises
<!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>jQuery Rehab - ajax()</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
@Fabian295
Fabian295 / jq-insert.html
Created August 10, 2021 19:36
JQ- Inserting HTML via jQuery vs Vanilla JS
<!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>jQuery Rehab - Inserting HTML</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
@Fabian295
Fabian295 / jq-css-classes.html
Last active August 10, 2021 06:43
jq - jQuery handling css classes in jQuery and Vanilla JS.
<!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>jQuery Rehab - css()</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
<!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>jQuery Rehab - classes</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<style>
@Fabian295
Fabian295 / jq-jquery-each.html
Created August 9, 2021 09:14
jq- jQuery each() method vs the vanilla JS array/nodelist build-in method ... forEach()
<!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>jQuery Rehab - each()</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
</head>