Enzo EnzoEmb

Collections

Resources

Structuring a large jQuery application

This document assumes you are building a traditional backend-heavy application as opposed to a frontend-heavy appliction which would typically use a framework like Angular or React. The use of these frameworks make this document irrelevant, however also require a change to your application architecture and a much larger overhead in order to get content onto a page, so as a simple way to build interactive web content a simple jquery based js stack will do fine.

Directory structure

It's important you use a directory structure which is impartial to your development environment, chosen server language (Python v. Java v. C# ...), and styling framwork (Twitter Bootstrap etc). This layer of separation means you can swap out the styles or the backend with minimal changes to the Js, simple and maintainable.

Here's an example from the project root:

Performance and Conditionally Rendered Content in React

First, this is not about if in JSX. It's just the simplest example to talk about (and a lot of people tried to do it at first a long time ago).

Some react components conditionally render content. When React first went public, a lot of us coming from handlebars really wanted "if" syntax. This gist isn't just about If components though, it's about

A non-exhaustive list of WebGL and WebGPU frameworks and libraries. It is mostly for learning purposes as some of the libraries listed are wip/outdated/not maintained anymore.

Engines and libraries ⚙️

Name	Stars	Last Commit	Description
three.js	![GitHub

	# remove specific file from git cache
	git rm --cached filename

	# remove all files from git cache
	git rm -r --cached .
	git add .
	git commit -m ".gitignore is now working"

	///// Plugin Includes /////
	var gulp = require('gulp'),
	uglify = require('gulp-uglify'),
	plumber = require('gulp-plumber'),
	concat = require('gulp-concat'),
	jshint = require('gulp-jshint'),
	autoprefixer = require('gulp-autoprefixer'),
	browserSync = require('browser-sync'),
	reload = browserSync.reload,
	sass = require('gulp-sass');

	/* step 1: load this in editor-style.css in the theme folder */
	/* step 2: activate function "Create CSS classes menu" in tinymce advanced settings */
	/* step 3: add "Formate" to toolbar in tinymce advanced settings */
	/* this gets shown automatically in the formats dropdown */
	/* sometimes this is a little bit tricky. delete and recreate "Formats" in the Tinymce Advanced settings */
	/* this also can be a programmable alternative: https://codex.wordpress.org/TinyMCE_Custom_Styles */
	.Spezial-Button {
	background-color:red;
	color:#fff;
	display: inline-block;

	<IfModule mod_rewrite.c>

	RewriteEngine On
	RewriteBase /
	RewriteRule ^index\.html$ - [L]
	RewriteCond %{REQUEST_FILENAME} !-f
	RewriteCond %{REQUEST_FILENAME} !-d
	RewriteCond %{REQUEST_FILENAME} !-l
	RewriteRule . /index.html [L]

	<script src="//ajax.googleapis.com/ajax/libs/webfont/1.6.26/webfont.js"></script>
	<script>
	WebFont.load({
	google: {
	families: [
	'Montserrat:400,700',
	'Raleway:100,200,300,400,500,600',
	'Lato:400,100,100italic,300,300italic,400italic,700,700italic,900,900italic'
	]
	}

	// How to ensure that our animation loop ends on component unount

	componentDidMount() {
	this.startLoop();
	}

	componentWillUnmount() {
	this.stopLoop();
	}