1 В head страницы добавляем:
<script src="https://cdn.jsdelivr.net/npm/@webcomponents/webcomponentsjs@2/webcomponents-loader.min.js"></script>
<script type="module" src="https://cdn.jsdelivr.net/gh/zerodevx/zero-md@1/src/zero-md.min.js"></script>
/** | |
* Table Filter | |
* @usage: <input type="search" onkeyup="Tablefilter(this, 'VReportList')" />\ | |
* where VReport is the id of the table body | |
*/ | |
function Tablefilter (phrase, _id) { | |
var words = phrase.value.toLowerCase().split(" "); | |
var table = document.getElementById(_id); | |
var ele; |
export const h=(t,p,...c)=>({t,p,c,k:p&&p.key}) | |
export const render=(e,d,t=d.t||(d.t={}),p,r,c,m,y)=> | |
// arrays | |
e.map?e.map((e,p)=>render(e,d,t.o&&t.o[p])): | |
// components | |
e.t.call?(e.i=render((render.c=e).t(Object.assign({children:e.c},e.p),e.s=t.s||{},t=> | |
render(Object.assign(e.s,t)&&e,d,e)),t.i||d,t&&t.i||{}),d.t=t=e):( | |
// create notes | |
m=t.d||(e.t?document.createElement(e.t):new Text(e.p)), | |
// diff props |
((document, location, navigator) => { | |
const domain = location.hostname.split(".") | |
const match = document.cookie.match(/(^|; ?)_ga=GA1\.\d\.(\d+\.\d+)(;|$)/) | |
// use existing client id or generate one | |
const cid = match ? match[2] : ~~(2147483648 * Math.random()) + "." + ~~(Date.now() / 1000) | |
// set cookie at highest possible domain level | |
for (let i = domain.length; i--;) { | |
const cookie = `_ga=GA1.${domain.length - i}.${cid}` |
<template> | |
<div>{{ direction }}</div> | |
</template> | |
<script> | |
export default { | |
data: function() { | |
return { | |
direction: null, | |
startY: 0 |
Mute these words in your settings here: https://twitter.com/settings/muted_keywords | |
ActivityTweet | |
generic_activity_highlights | |
generic_activity_momentsbreaking | |
RankedOrganicTweet | |
suggest_activity | |
suggest_activity_feed | |
suggest_activity_highlights | |
suggest_activity_tweet |
It's great for beginners. Then it turns into a mess.
This is an alternative to the Modern Script Loading tchnique, that doesn't need to wait for the load
event.
This technique has been successfully tested down to IE9.
<!DOCTYPE html>
<html lang="en">
Photo by Ricardo Gomez Angel on Unsplash
This gist is a collection of common patterns I've personally used here and there with Custom Elements.
These patterns are all basic suggestions that could be improved, enriched, readapted, accordingly with your needs.
<!doctype html> | |
<html lang="en"> | |
<head> | |
<!-- Required meta tags --> | |
<meta charset="utf-8"> | |
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> | |
<!-- Bootstrap CSS --> | |
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> |