Skip to content

Instantly share code, notes, and snippets.

View webdesignberlin's full-sized avatar
:octocat:
...

Michael Raguse webdesignberlin

:octocat:
...
55 followers · 157 following
View GitHub Profile
@simonw
simonw / single-file-web-component.html
Last active March 28, 2024 17:33 — forked from kristoferjoseph/single-file-web-component.html
My annotated copy of https://gist.github.com/kristoferjoseph/c4e47389ae0f0447db175b914e471628
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Single File Web Component</title>
<style>
body {
background-color: #eee;
font-family: Helvetica, sans-serif;
}
@kristoferjoseph
kristoferjoseph / single-file-web-component.html
Last active November 22, 2023 01:17
Single file Web Component
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Single File Web Component</title>
</head>
<body>
<template id=single-file>
<style>
h1 {
@drcmda
drcmda / scroll.jsx
Last active September 14, 2023 17:32
scrolling images + minimap
import * as THREE from 'three'
import { Suspense, useRef, useState } from 'react'
import { Canvas, createPortal, applyProps, useFrame, useThree } from '@react-three/fiber'
import { useFBO, PerspectiveCamera, ScrollControls, Scroll, useScroll, Image } from '@react-three/drei'
function Images() {
const { width, height } = useThree(state => state.viewport)
const data = useScroll()
const group = useRef()
useFrame(() => {
@areknawo
areknawo / LazyHydrate.vue
Created August 13, 2021 11:18
Vue 3 lazy hydration component
<script lang="ts">
import { defineComponent, onMounted, PropType, ref, watch } from "vue";
type VoidFunction = () => void;
const isBrowser = () => {
return typeof window === "object";
};
export default defineComponent({
props: {
@gburning
gburning / file.js
Created April 18, 2021 14:30
Storybook - manual mapping of Vue props to argTypes
// This is a super basic way of mapping Vue props to argTypes in cases
// where Storybook (or rather vue-docgen-api) fails.
// See https://github.com/storybookjs/storybook/issues/11774
const toType = ({}).toString.call(obj).match(/\s([a-zA-Z]+)/)[1].toLowerCase()
const controlTypeMappings = {
String: 'text',
Boolean: 'boolean',
Array: 'object',
@funfunction
funfunction / timeInLoop.js
Last active January 29, 2023 10:08
/**
@func
log how long it takes to run a block of code
- for a supplied number of times
@warning
the supplied func runs in a loop
- so first make sure there are no log statements in the func
- either comment them out, or replace them with lMock...
- const l = s => undefined; //lMock
@webdesignberlin
webdesignberlin / vue.md
Created January 29, 2020 12:00 — forked from DawidMyslak/vue.md
Vue.js and Vuex - best practices for managing your state

Vue.js and Vuex - best practices for managing your state

Modyfing state object

Example

If you have to extend an existing object with additional property, always prefer Vue.set() over Object.assign() (or spread operator).

Example below explains implications for different implementations.

@kawazoe
kawazoe / force-reload.js
Last active February 1, 2024 06:50
Auto refresh page on manifest.json change. iOS offline PWA hack to handle auto updates.
// ------------------------------------------- IMPORTANT -------------------------------------------
// This is a development file to be minified using https://javascript-minifier.com/ and inlined in
// the index.html file. This file is not compiled or processed by webpack so it should be treated as
// low-level precompiled es5-compatible javascript. The code here is not meant to be clean, it's
// meant to be as light and fast as possible since it runs in the head tag.
// HACK: This file a hack to ensure that home-screen apps on mobile devices gets refreshed when they
// start. It works by forcing a load of the service-worker.js file and use the precache-manifest
// file name as an application version, just like a desktop browser like chrome would do. When
// when it detects a change in the application version, it reloads the page and bypass the browser's
@WebReflection
WebReflection / lys.js.md
Last active March 21, 2019 22:05
A `lys.js` crazy non sense

lys is a programming language that produces WASM, and its design goal is to be as simple as possible, yet useful to create utilities.

I've been thinking about a subset of JavaScript that could run natively on the browser, similarly to asm.js, but with the ability, through a dedicated parser, to target another language able, on its own, to produce WASM.

The following crazy non sense works already thanks to an agglomerated of modern and deprecated JS features and it might be interesting as experiment to see if a JS to WASM compiler, through the lys indirection, could be possible.

function lys(fn) {

  /*! (c) Andrea Giammarchi */
@lbssousa
lbssousa / MyComponentJsDoc.vue
Last active July 13, 2022 11:32
A little cheatsheet of how to write type-safe Vue single file components, using either TypeScript or JSDoc comments (reference: https://blog.usejournal.com/type-vue-without-typescript-b2b49210f0b)
<template>
<div>
<slot/>
</div>
</template>
<script>
// @ts-check
/**