Skip to content

Instantly share code, notes, and snippets.

@YonatanKra
YonatanKra / app.element.ts
Last active Jan 1, 2021
Working raw-loader for CSS
View app.element.ts
import style from "./app.element.css";
import template from "./app.element.html";
export class AppElement extends HTMLElement {
public static observedAttributes = [];
connectedCallback() {
const title = 'custom-webpack';
this.attachShadow({mode: 'open'});
this.shadowRoot.innerHTML = `<style>${style}</style>` + template.replace('${title}', title);
View webpackConfig.js
module.exports = (config, context) => {
return {
...config,
module: {
...config.module,
rules: [
...config.module.rules,
{
test: /\.html$/i,
use: 'raw-loader',
View app.element.ts
import './app.element.css';
export class AppElement extends HTMLElement {
public static observedAttributes = [];
connectedCallback() {
const title = 'custom-webpack';
this.innerHTML = `
<header class="flex">
<h1>Welcome to ${title}!</h1>
@YonatanKra
YonatanKra / object-pool-no-linked-list.js
Last active Dec 16, 2020
Object pool with a private pool array
View object-pool-no-linked-list.js
const INCREASE_PERCENT = 50;
const MINIMUM_PERCENT_FREE = 10;
const NULL_ELEMENT = null;
class ObjectPool {
#poolArray = [];
#freeElements = 0;
#freeIndex = 0;
resetFunction = () => {
View cd.yml
name: Test, Build and Deploy
on:
pull_request:
types: [closed]
jobs:
build-test-release:
if: github.event.action == 'closed' && github.event.pull_request.merged == true
runs-on: ubuntu-latest
View buildAndTest.yml
name: Build & Test
on:
pull_request:
branches:
- master
- develop
jobs:
build-publish:
View forcedLayoutAsyncSolution.js
refreshData(data, clear = false) {
if (!clear) {...} else {...}
data.forEach(datum => {
const element = document.createElement('data-table-row');
element.setAttribute('name', datum.name);
element.setAttribute('id', datum.id);
element.setAttribute('email', datum.email);
this._dataTable.prepend(element);
View forcedReflowSyncSolution.js
refreshData(data, clear = false) {
DataApp.emitEvent(this, 'refreshed-data', {
scrollHeight: this._dataTable.scrollHeight
});
if (!clear) {...} else {...}
data.forEach(datum => {
const element = document.createElement('data-table-row');
element.setAttribute('name', datum.name);
View forcedReflowExample.js
refreshData(data, clear = false) {
if (!clear) {...} else {...}
data.forEach(datum => {
const element = document.createElement('data-table-row');
element.setAttribute('name', datum.name);
element.setAttribute('id', datum.id);
element.setAttribute('email', datum.email);
this._dataTable.prepend(element);
@YonatanKra
YonatanKra / test.js
Created Nov 15, 2020
list performance test
View test.js
suite('performance issue', () => {
test(
'removing a list should not call layout more than once', async () => {
let count = 0;
const originalLayout = List.prototype.layout;
List.prototype.layout = function(update) {
originalLayout.call(this, update);
count++;
};