semagarcia’s gists

semagarcia / medium-wc-article--output-option-b.js

Created April 14, 2021 19:41

OPTION B: "Angular way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook)

	// OPTION B: "Angular way" => Class
	// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
	class MyAngularComponent implements AfterViewInit {

	// Through @ViewChild decorator, Angular will get the first element matches selector in the DOM
	@ViewChild('counter', { static: false }) counter;

	ngAfterViewInit() {
	// Angular-way
	this.counter.nativeElement

semagarcia / medium-wc-article--output-option-a.js

Created April 14, 2021 19:32

Option A: "standard way" => Class (in Angular example, use this snippet inside AfterViewInit lifecycle hook):

	// OPTION A: "standard way" => Class
	// In Angular example, use this snippet inside AfterViewInit lifecycle hook:
	class MyAngularComponent implements AfterViewInit {

	ngAfterViewInit() {
	// Standard-way
	document.querySelector('#clickCounter')
	.addEventListener('counter-clicked', this.myCallbackFunction);
	}

semagarcia / medium-wc-article--output-example.html

Last active April 14, 2021 19:26

Output => data flow goes from the child (web component) to the parent

	<!-- Template: web component inside an Angular component -->
	<div>
	<h1>I'm an Angular component</h1>
	<click-counter id='clickCounter'></click-counter>
	</div>

semagarcia / medium-wc-article--input-example.html

Created April 14, 2021 19:24

Input => data flow goes from the parent (framework component) to its child (web component)

	<!-- Template: Angular component containing web component -->
	<div>
	<h1>I'm an Angular component</h1>
	<print-full-name
	name="{{ user.name }}"
	surname="{{ user.surname }}">
	</print-full-name>
	</div>

semagarcia / medium-wc-article--tag-instantiation.html

Created April 14, 2021 19:13

Hello World Web Component example with plan JavaScript (without additional libraries)

	<!-- HTML file -->
	<my-web-component></my-web-component>

semagarcia / medium-wc-article--hellow-world-template.html

Created April 14, 2021 19:12

Hello World Web Component example with plan JavaScript (without additional libraries)

semagarcia / medium-wc-article--hellow-world.js

Created April 14, 2021 19:10

Hello World Web Component example with plan JavaScript (without additional libraries)

	<script>
	// JavaScript code for creating "my-web-component" custom element
	// using HTMLElement as base class from which to extend
	customElements.define('my-web-component', class extends HTMLElement {
	constructor() {
	super();

	// Find an HTML snippet (template used by WebComponent)
	const template = document.querySelector('#myTpl');
	const templateContent = template.content;

semagarcia / taller-workshop

Created October 4, 2019 14:30

https://docs.google.com/presentation/d/1YWe46QRe5SHJzU_BP66AMWg3pHp-YC0VT_us11xOYbA/edit#slide=id.g62e0a832ab_2_110

semagarcia / Syncing remote fork

Created June 10, 2018 21:39

	# 1. Clone your fork:
	git clone <your-forked-repo>.git

	# 2. Add remote from original repository in your forked repository:
	cd forked-repo
	git remote add upstream <your-forked-repo>.git
	git fetch upstream

	# 3. Updating your forked repo from original one to keep up with their changes:
	git pull upstream master

semagarcia / generate-cert.sh

Created December 13, 2017 20:04

Generating a certificate

	#! /bin/bash
	openssl req -x509 -newkey rsa:4096 -keyout key.pem -out cert.pem -days 365 -nodes

Sema semagarcia