Werner Krauß wernerkrauss

Webpack & Tailwind CSS Setup

Create your package.json

npm init -y

Create your src folder

Create a folder called src and add an empty index.js file. The code that webpack compiles goes in here including any Javascript modules and the main Tailwind file.

Live-reload and fast CSS compilation for a SilverStripe website using gulp.js

Steps to success:

Install gulp globally (do this only once): npm install -g gulp
In your project folder, add gulp: npm install --save-dev gulp
Install browser-sync to enable auto-updated and synchronised websites across all your browsers: npm install -g browser-sync
Install libsass for super fast SCSS compilation: npm install --save-dev gulp-sass
Install sourcemaps-plugin if you want them: npm install --save-dev gulp-sourcemaps
Of course you can also add gulp plugins to concatenate and minify your JavaScript and CSS.

	// this script loads the YouTube iframe-api, gets all instances and adds enablejsapi & origin-URL to the src-URL
	// after initiating the API it adds playing-mode & paused-mode to the iframes

	if ($('[src^="https://www.youtube.com/"]').length) {
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
	}

	/*
	See: https://www.smashingmagazine.com/2016/05/fluid-typography/

	1. without support for anything, the font size will be the minimum font-size (14px) so nothing will break.
	2. with support for mediaqueries and not vw or calc or both then the font will jump up a pixel size at every appropriate breakpoint (I'm using http://include-media.com for syntactic-sugar, but you could rewrite without this)
	3. with support for mediaqueries and calc and vw it will work as the article describes, with the fixes for older Safari and IE too

	Ain't it pretty!? Haha - works well tho :)
	*/


	tinymce.PluginManager.add('smartquotes', function(editor) {

	function convert(e) {
	rootNodes = editor.dom.select("body > *");
	for (var i = 0; i < rootNodes.length; i++) {
	var el = rootNodes[i];
	var contentEditable = editor.dom.getAttrib(el, "contenteditable");
	if (contentEditable !== "false") {
	convertBlock(el);

	<?php

	/**
	* @author zauberfisch
	*/
	class BaseValidator extends Validator {
	protected $validateFields, $requireFields;

	/**
	* @param bool\|string[]\|\FormField[]\|\FieldList $validateFields

	#!/bin/bash
	echo "running git post receive hook..."
	DIR=$(git rev-parse --show-toplevel)

	composer.phar install --no-dev -o

	echo "running dev/build"
	sudo -u www-data php $DIR/framework/cli-script.php dev/build flush=1

	<?php

	class Page extends SiteTree {

	private static $db = array(
	'ShowInFooter' => 'Boolean'
	);

	private static $defaults = array(
	'ShowInFooter' => 1

	<?php
	// file: mysite/code/TranslatableControllerExtension.php

	class TranslatableControllerExtension extends Extension {
	/**
	* save the current controller to ensure we have access to it,
	* this is necessary because Security crates a fake Page_Controller to render templates
	* @var Controller
	*/
	protected static $actual_current_controller;


	#!/bin/bash -eux
	source $1
	${@:2}