Skip to content

Instantly share code, notes, and snippets.

View SlicedSilver's full-sized avatar

Mark Silverwood SlicedSilver

View GitHub Profile
@SlicedSilver
SlicedSilver / custom.css
Created September 27, 2023 20:20
Theme Toggle for TradingView Advanced Charts Library which matches the TradingView brand style guidelines.
// The following should be added to the custom css file.
// see: https://www.tradingview.com/charting-library-docs/latest/api/interfaces/Charting_Library.ChartingLibraryWidgetOptions#custom_css_url
#theme-toggle {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.switcher {
@SlicedSilver
SlicedSilver / get series data example.html
Created August 4, 2022 16:29
Lightweight Charts. Example of getting the series data when clicking on the chart.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta
name="viewport"
content="width=device-width,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0"
/>
<title>Debug page</title>
@SlicedSilver
SlicedSilver / _fonts.scss
Created May 25, 2015 15:02
Download Google Roboto Font
// cyrillic-ext
@font-face {
font-family: 'RobotoDraft';
font-style: normal;
font-weight: 100;
src: local('RobotoDraft Thin'), local('RobotoDraft-Thin'), url('../fonts/font1.woff2') format('woff2');
unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
}
// cyrillic
@font-face {
<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../core-menu/core-submenu.html">
<link rel="import" href="../core-icons/core-icons.html">
<link rel="import" href="../core-icons/av-icons.html">
<link rel="import" href="../paper-fab/paper-fab.html">
@SlicedSilver
SlicedSilver / Polymer Application Loading Screen.md
Last active February 21, 2017 02:04
Polymer Application Loading Screen

This is a simple snippet for adding a loading screen to a Polymer application. It is useful if your Polymer application is rather large and some users may be on a very slow internet connection.

The basic idea is that a very simple (and small) loading screen page will be loaded by the browser. When the browser has fully loaded and displayed the loading page then it will start loading all the files required for the Polymer application.

For a further speed improvement: the loading.css, and polymerAppLoader.js files can be placed inline with the index.html thus reducing the amount of files to be loaded from the server.

filestoload.html is a seperate file so that the usual grunt/gulp build functions can still be applied as before. Shouldn't require re-writting your build scripts.

Any improvements/comments are encouraged.

<link rel="import" href="../core-scaffold/core-scaffold.html">
<link rel="import" href="../core-header-panel/core-header-panel.html">
<link rel="import" href="../core-menu/core-menu.html">
<link rel="import" href="../core-item/core-item.html">
<link rel="import" href="../core-icon-button/core-icon-button.html">
<link rel="import" href="../core-toolbar/core-toolbar.html">
<link rel="import" href="../google-map/google-map.html">
<polymer-element name="my-element">
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;
<link rel="import" href="../components/polymer/polymer.html">
<polymer-element name="my-element">
<template>
<style>
:host {
position: absolute;
width: 100%;
height: 100%;