Skip to content

Instantly share code, notes, and snippets.

View carlosrojaso's full-sized avatar
🎯
Focusing

Carlos Rojas carlosrojaso

🎯
Focusing
127 followers · 41 following
View GitHub Profile
@carlosrojaso
carlosrojaso / error-component.js
Created October 2, 2020 12:16
class ErrorComponent extends HTMLElement {
constructor() {
super();
this.root = this.attachShadow({mode: 'open'});
this.templates = document.createElement('div');
this.container = document.createElement('div');
this.root.appendChild(this.templates);
this.root.appendChild(this.container);
this.templates.innerHTML = ErrorComponent.template();
const kind = this.getAttribute(`kind`) || `none`;
@carlosrojaso
carlosrojaso / index.js
Created October 2, 2020 12:15
export * from './error-component';
@carlosrojaso
carlosrojaso / package.json
Created October 2, 2020 11:51
{
"name": "simple-error-component",
"version": "1.0.1",
"description": "Simple Error Component",
"main": "dist/index.js",
"module": "src/index.js",
"directories": {
"src": "src"
},
"scripts": {
@carlosrojaso
carlosrojaso / index.html
Last active September 30, 2020 12:11
Step 5
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<error-component>Default Message</error-component>
<error-component kind="warning">Warning Message</error-component>
@carlosrojaso
carlosrojaso / index.html
Last active September 30, 2020 12:11
Step 4
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<error-component>Default Message</error-component>
<error-component kind="warning">Warning Message</error-component>
@carlosrojaso
carlosrojaso / index.html
Last active September 30, 2020 12:10
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<error-component>Default Message</error-component>
<error-component kind="warning">Warning Message</error-component>
@carlosrojaso
carlosrojaso / index.html
Last active September 29, 2020 12:17
Step 2
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<script>
class ErrorComponent extends HTMLElement {
@carlosrojaso
carlosrojaso / index.html
Last active September 29, 2020 12:18
Step 1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Demo - error-component</title>
</head>
<body>
<script>
</script>
@carlosrojaso
carlosrojaso / AppSync-Example.yaml
Created January 16, 2020 18:04 — forked from adrianhall/AppSync-Example.yaml
An example CloudFormation template for AWS AppSync
---
Description: AWSAppSync DynamoDB Example
Resources:
GraphQLApi:
Type: "AWS::AppSync::GraphQLApi"
Properties:
Name: AWSAppSync DynamoDB Example
AuthenticationType: AWS_IAM
PostDynamoDBTableDataSource:
@carlosrojaso
carlosrojaso / gist:197244f0cc68cfdb06198a5a303a8d5d
Created January 5, 2020 14:44
LifeCycle React in Hooks
For componentDidMount
useEffect(() => {
// Your code here
}, []);
For componentDidUpdate
useEffect(() => {
// Your code here
}, [yourDependency]);