Skip to content

Instantly share code, notes, and snippets.

@thecodefish
thecodefish / controller.ts
Created September 27, 2017 21:02
AngularJS component example for loading GrapesJS editor
class MyController {
editor: any;
grapesJsConfig: {
//whatever
}
constructor(private readonly $scope: ng.IScope) {}
@IanLunn
IanLunn / gist:4666512
Created January 29, 2013 18:41
Reverse a two-point cubic bezier
/* sample cubic beziers */
linear = [0.250, 0.250, 0.750, 0.750];
ease = [0.250, 0.100, 0.250, 1.000];
easeIn = [0.420, 0.000, 1.000, 1.000];
easeOut = [0.000, 0.000, 0.580, 1.000];
easeInOut = [0.420, 0.000, 0.580, 1.000];
function reverseCubicBezier(cubicBezier) {
return [
1 - cubicBezier[2],
@landsman
landsman / draft.js
Last active December 6, 2022 18:06
automatic convert bootstrap v. 3 to bootstrap v. 4 idea ... more on https://github.com/twbs/bootstrap/blob/v4-dev/docs/4.0/migration.md, http://upgrade-bootstrap.bootply.com/
let gulp = require('gulp'),
replace = require('gulp-batch-replace'),
filesExist = require('files-exist');
gulp.task('bt4', () =>
{
let diff = {
'@media (min-width: $screen-xs-min) and (max-width: $screen-sm-max)': '@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, xs))',
'@media (min-width: $screen-xs) and (max-width: ($screen-md-min - 1))': '@media (min-width: map-get($grid-breakpoints, xs)) and (max-width: map-get($grid-breakpoints, md)-1)',
@redthor
redthor / pipelines-status.sh
Last active December 14, 2022 14:59
Bash script for getting bitbucket pipeline status
#!/bin/bash
#
# I made this because bitbucket does not a have a team view on all the
# pipeline builds.
#
# See https://community.atlassian.com/t5/Bitbucket-questions/Where-can-I-get-a-view-of-all-the-pipeline-builds-for-a-team/qaq-p/786264
#
# Requires curl and jq
#
# Use it like this:
@johanlef
johanlef / README.md
Last active April 27, 2023 18:58
Use CSS custom properties (--var) with bootstrap 4 (SCSS)

The file _functions-override.scss contains the custom functions to handle color conversions within sass and bootstrap.

Bootstrap does not like its sass variables set to css custom properties, e.g. var(--primary). If you use the code snippets below, you can do so, under some conditions.

In the most basic case, you should provide your color variables using the hsl format.

If you insert this using javascript, you can use the script apply-colors.jsx to let js handle the conversion from hex or rgb to hsl.

Reference the main.scss file to import the files in the correct order.

@brandonsimpson
brandonsimpson / osx_uninstall_mysql_install_mariadb_homebrew.md
Last active August 19, 2023 22:55
OSX How To: Uninstall native MySQL and install MariaDB via Homebrew

OSX How To: Uninstall native MySQL and install MariaDB via Homebrew

This is a short overview on how to completely remove any old mysql server installs in OSX and upgrade to MariaDB without conflicts. Things can get a bit weird when you have various old installs of MySQL server floating around, and utilizing homebrew to install and upgrade MariaDB as a drop in replacement for MySQL has worked well, especially if you're used to managing MySQL installs via yum in linux.

First: Backup Your Data!

Backup all of your current databases with mysqldump

This isn't a tutorial on backups, and there are many ways to do it. You should know how to backup your data anyway. For this example, we'll do a full backup of our InnoDB databases.

@Martin-Pitt
Martin-Pitt / pan-zoom-touch-and-trackpad.js
Last active December 22, 2023 02:16
Panning and Pinch-Zoom gesture handler for both touchscreens and trackpads; Works really well on a MacBook trackpad
// Target state
var tx = 0;
var ty = 0;
var scale = 1;
function visualiseTargetState() {
box.style.transform = `translate(${tx}px, ${ty}px) scale(${scale})`;
}
@xenozauros
xenozauros / hex2hsl.js
Last active February 19, 2024 20:22
Javascript: HEX to RGB to HSL
function hexToHSL(hex) {
var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
r = parseInt(result[1], 16);
g = parseInt(result[2], 16);
b = parseInt(result[3], 16);
r /= 255, g /= 255, b /= 255;
var max = Math.max(r, g, b), min = Math.min(r, g, b);
var h, s, l = (max + min) / 2;
if(max == min){
h = s = 0; // achromatic
@jedfoster
jedfoster / SassMeister-input.scss
Last active March 1, 2024 10:29
JavaScript version of Sass' mix() function
// ----
// Sass (v3.3.0.rc.1)
// Compass (v0.13.alpha.10)
// ----
body {
width: 100%;
height: 10em;
background: mix(#ff0000, #0000bb, 75);
}
@dcleao
dcleao / npm-commands-scripts-life-cycle-phases.md
Last active March 1, 2024 21:27
NPM Commands, Scripts, Life-cycle Phases

NPM Commands, Scripts, Life-cycle Phases

The following describes the behaviour of several npm commands, particularly w.r.t. the scripts that are run in each, for NPM version 6.5.0.

npm build <other-package-folder>

  1. npm run preinstall
  2. link binaries (node-gyp)
  3. for each bin command in other package: