Skip to content

Instantly share code, notes, and snippets.

@SvenPam
SvenPam / SDiff.vue
Last active Jul 4, 2019
TS Component Example
View SDiff.vue
<template>
<small
v-if="diff !== 0"
:class="previous < current ? 'text-danger' : 'text-success'"
>
£{{ (previous - current) | format(0) }}
<template v-show="lastUpdated !== null">
vs
{{ formatDate(lastUpdated) }}
</template>
View bem-sass.scss
$blockName: 'product';
.#{$blockName} {
//...
&__price {
// ...
&--dicount {
// ...
}
@SvenPam
SvenPam / svg-sprite-gulp.js
Last active Nov 19, 2018
SVG Sprites - Gulp
View svg-sprite-gulp.js
// $ comes from using gulp-load-plugins.
gulp.task('assets:sprites', function () {
return gulp.src(`${paths.source.images}/icon/**/*.svg`)
.pipe($.changed('./'))
.pipe($.svgSprite({
shape: {
spacing: {
padding: 2
}
},
@SvenPam
SvenPam / font-minification-webpack.js
Last active Nov 19, 2018
Font Minifification - Webpack
View font-minification-webpack.js
let fontmin = new Fontmin()
.use(
Fontmin.glyph({
text: `1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_'abcdefghijklmnopqrstuvwxyz?&{|}\/~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽž,“”‘’`
})
)
.use(ttf2woff2())
.use(Fontmin.ttf2woff())
.src(`${plConfig.paths.source.fonts}/**/*.ttf`)
.dest(plConfig.paths.public.fonts);
@SvenPam
SvenPam / font-min.js
Last active Nov 19, 2018
Gulp Font Minification
View font-min.js
// $ comes from using gulp-load-plugins.
gulp.task('assets:font', function () {
return gulp.src(`${paths.source.fonts}/**/*.ttf`)
.pipe($.changed('./'))
.pipe($.fontmin({
text: "1234567890ABCDEFGHIJKLMNOPQRSTUVWXYZ[]^_`abcdefghijklmnopqrstuvwxyz{|}\/~¡¢£¤¥¦§¨©ª«¬®¯°±²³´µ·¸¹º»¼½¾¿ÀÁÂÃÄÅÆÇÈÉÊËÌÍÎÏÐÑÒÓÔÕÖ×ØÙÚÛÜÝÞßàáâãäåæçèéêëìíîïðñòóôõö÷øùúûüýþÿĀāĂ㥹ĆćĈĉĊċČčĎďĐđĒēĔĕĖėĘęĚěĜĝĞğĠġĢģĤĥĦħĨĩĪīĬĭĮįİıIJijĴĵĶķĸĹĺĻļĽľĿŀŁłŃńŅņŇňʼnŊŋŌōŎŏŐőŒœŔŕŖŗŘřŚśŜŝŞşŠšŢţŤťŦŧŨũŪūŬŭŮůŰűŲųŴŵŶŷŸŹźŻżŽž,“”‘’", //Basic Latin & Latin Extended
hinting: false,
quiet: false
}))
.pipe($.ttf2woff2())
@SvenPam
SvenPam / font-face.css
Created Nov 18, 2018
Font Face Ordering
View font-face.css
@font-face {
font-family: 'my-font';
src: url('regular.woff2') format('woff2'), url('regular.woff') format('woff'), url('regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
View test.css
*,:after,:before{box-sizing:border-box}html{font-family:sans-serif;line-height:1.15;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;-ms-overflow-style:scrollbar;-webkit-tap-highlight-color:rgba(0,0,0,0)}@-ms-viewport{width:device-width}article,aside,dialog,figcaption,figure,footer,header,hgroup,main,nav,section{display:block}body{margin:0;font-family:-apple-system,system-ui,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,sans-serif;font-size:1rem;font-weight:400;line-height:1.5;color:#212529;text-align:left;background-color:#fff}[tabindex="-1"]:focus{outline:0!important}hr{box-sizing:content-box;height:0;overflow:visible}h1,h2,h3,h4,h5,h6{margin-top:0;margin-bottom:1.75rem}p{margin-top:0;margin-bottom:1.8rem}abbr[data-original-title],abbr[title]{text-decoration:underline;text-decoration:underline dotted;cursor:help;border-bottom:0}address{font-style:normal;line-height:inherit}address,dl,ol,ul{margin-bottom:1rem}dl,ol,ul{margin-top:0}ol ol,ol ul,ul ol,ul ul{margin-bottom:0}dt{font-weight:700}dd
View gulpfile.js
/// <binding ProjectOpened='watch' />
/******************************************************
* PATTERN LAB NODE
* EDITION-NODE-GULP
* The gulp wrapper around patternlab-node core, providing tasks to interact with the core library and move supporting frontend assets.
******************************************************/
const
fs = require('fs'),
gulp = require('gulp'),
path = require('path'),
@SvenPam
SvenPam / module-pattern-w-jquery.js
Last active Jan 25, 2017
Module Design Pattern for JS...because I always forget the template.
View module-pattern-w-jquery.js
'use strict';
// Module description
var module = (function ($) {
function privateFunction()
return {
publicFunction: function () {
privateFunction();
}
}
@SvenPam
SvenPam / demo-output.css
Created Jul 8, 2016
Demoing the use of SASS loops to create a gradient coloured list.
View demo-output.css
li:nth-child(1) {
background-color: #92cc00; }
li:nth-child(2) {
background-color: #6d9900; }
li:nth-child(3) {
background-color: #496600; }
li:nth-child(4) {