Skip to content

Instantly share code, notes, and snippets.

View denisos's full-sized avatar

Denis O'Sullivan denisos

View GitHub Profile
/*
* ShadowComponent a simple Web Component to render content passed and wrap it in a shadow dom
* why web component? to create shadow dom and isolate html & styles passed in content prop
* usage:
* <shadowcomponent-wc content={html} />
*
* ShadowComponent will rerender when the value passed to content changes.
* content passed is trusted and security is the responsibility of the caller
* references: https://css-tricks.com/building-interoperable-web-components-react/
* https://www.youtube.com/watch?v=vLkPBj9ZaU0
@denisos
denisos / typescriptHints.ts
Created November 28, 2022 05:28
typescript cheatsheet hints
// typing functions
type FocusListener = (isFocussed: boolean) => void
const addListener = (onFocusChanged: FocusListener) => {
return true
}
// type object lietral map, can use
const cache: { [id: string]: string } = {
@denisos
denisos / SalesReport.tsx
Created November 4, 2022 16:53
using react-chartjs to show bar chart and add onClick handler
import React, { useEffect, useState, useRef } from 'react';
import {
Chart as ChartJS,
CategoryScale,
LinearScale,
BarElement,
Title,
Tooltip,
Legend,
} from 'chart.js';
const berries = ["blackberry", "raspberry", "strawberry"];
const citrus = ["orange", "lime", "mandarin"];
const melons = ["watermelon", "honeydew", "cantalopue"]
let list = [
{
name: "watermelon"
},
{
name: "orange"
},
// example of common basic custom hooks pattern
//
export default function useCounter() {
const [counter, setCounter] = useState(0);
useEffect(() => {
// do something e.g. initialze things
}, [])
* [Interesting Link] [interesting-link]
* [Boring Link] [boring-link]
[interesting-link]: https://github.com/interesting
[boring-link]: https://github.com/boring
@denisos
denisos / gist:7727300
Created December 1, 2013 00:56
angular js directive to show info and handle click
angular.module('directive.contact-brief'
, [])
.directive('contactBrief', [function(Events) {
return {
restrict: 'E',
scope: {
contact:'=contact' // we expect a contact object passed in
},
templateUrl: '../contact-brief.html',
replace: true,
@denisos
denisos / css for no title bar
Created October 5, 2011 17:08
jQuery dialog set button text and no title bar
.noTitleDialog .ui-dialog-titlebar {
display:none;
}
@denisos
denisos / JsonPExampleinBackbone.js
Created September 27, 2011 17:00
Backbone.js model calling jsonp
// backbone.js continues to impress, I needed to get data from a jsonp api
// I really wanted to do this the "right" backbone.js way and create a model and call fetch.
// But the default backbone synch is not jsonp
// Turns out you can override a synch on a per model basis (thanks stackoverflow)
// whats nice is backbone.js continue to work as expected with the override
// here's a snippet (some changes to protect our privacy). An improvement could be to create a jsonp model class which MyModel inherits
// the synch function is most important below, that's what tells backbone it's jsonp
MyModel = Backbone.Model.extend({