stefannhs StefanNieuwenhuis

## list-of-talks.md

      
              1 file
            
          
              0 forks
            
          
                0 comments
              
            
              0 stars
            
          
                StefanNieuwenhuis
                / list-of-talks.md
            
            
              Created
              July 15, 2020 12:14
            
          
Computer Futures Meetup: Taming huge enterprise applications with Mono Repositories, Design Systems & Web Components NOV 21, 2019, AMSTERDAM, NL
GhentJs: Bringing consistency to enterprise applications with Web Components OCT 9 2019, GHENT, BE
Bol.com meetup: Taming huge Angular applications at bol.com JUN 26 2019, UTRECHT, NL
ING Lunchpiration: Taming huge enterprise applications with Mono Repositories, Design Systems & Web Components MAY 14 2019, AMSTERDAM, NL
COMMERCE.TALK: The art of building framework independent design systems APR 4 2019, BERLIN, DE
AngularNL: Micro Frontends & Design Systems, built with Angular and Stencil MAR 8 2019, AMSTERDAM, NL
ReactiveConf: Building a framework independent component library with StencilJS OCT 29 2018, PRAGUE, CZ
Workshop: Taming your CSS with ITCSS APR 18 2018, UTRECHT, NL
ESRI Dev Summit: Angular2 + ESRI JS 4.2 = A World of Endless Possibilities MAR 8 2017, PALM SPRINGS, USA


## index.html
<!DOCTYPE html>
<html dir="ltr" lang="en">

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
  <title>Stencil Component Starter</title>
  <script src="/build/mycomponent.js"></script>

</head>

## my-component.css
.overlay {
    opacity: 0;
    visibility: hidden;

    position:fixed;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;

## my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';

describe('my-component', () => {
  let page, component, element;

  beforeEach(async () => {
    page = await newE2EPage();

    await page.setContent('<my-component></my-component>');
    component = await page.find('my-component');

## my-component.tsx
import { Component, Prop } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop() open = false;
  @Prop() transparent = false;

## my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';

describe('my-component', () => {
  let page, component, element;

  beforeEach(async () => {
    page = await newE2EPage();

    await page.setContent('<my-component></my-component>');
    component = await page.find('my-component');

## my-component.tsx
import { Component } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  render() {
    return <div class="overlay">

## my-component.e2e.ts
import { newE2EPage } from '@stencil/core/testing';

describe('my-component', () => {
  let page, component, element;

  beforeEach(async () => {
    page = await newE2EPage();

    await page.setContent('<my-component></my-component>');
    component = await page.find('my-component');

## stenciljs-modal-overlay__styling.css
.modal {
    display:none;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.2);

## stenciljs-modal-overlay__render-template.tsx
import { Component } from '@stencil/core';

@Component({
  tag: 'my-component',
  styleUrl: 'my-component.css',
  shadow: true
})
export class MyComponent {
  @Prop({mutable: true}) isActive = false;
	<!DOCTYPE html>
	<html dir="ltr" lang="en">

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0">
	<title>Stencil Component Starter</title>
	<script src="/build/mycomponent.js"></script>

	</head>
	.overlay {
	opacity: 0;
	visibility: hidden;

	position:fixed;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
	import { newE2EPage } from '@stencil/core/testing';

	describe('my-component', () => {
	let page, component, element;

	beforeEach(async () => {
	page = await newE2EPage();

	await page.setContent('<my-component></my-component>');
	component = await page.find('my-component');
	import { Component, Prop } from '@stencil/core';

	@Component({
	tag: 'my-component',
	styleUrl: 'my-component.css',
	shadow: true
	})
	export class MyComponent {
	@Prop() open = false;
	@Prop() transparent = false;
	import { Component } from '@stencil/core';

	@Component({
	tag: 'my-component',
	styleUrl: 'my-component.css',
	shadow: true
	})
	export class MyComponent {
	render() {
	return <div class="overlay">
	.modal {
	display:none;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	overflow: auto;
	background-color: rgb(0,0,0);
	background-color: rgba(0,0,0, 0.2);