uxderrick

Web Animation Best Practices & Guidelines

Document Purpose

This is a comprehensive reference guide for creating high-quality web animations. Use this as a knowledge base for implementing animations in web applications. All principles, timing values, and easing functions provided here are production-tested and ready to use.

---

Core Principles

Principle 1: Natural Motion

DavidKuennen

(function (context, trackingId, options) {
    const history = context.history;
    const doc = document;
    const nav = navigator || {};
    const storage = localStorage;
    const encode = encodeURIComponent;
    const pushState = history.pushState;
    const typeException = 'exception';
    const generateId = () => Math.random().toString(36);
    const getId = () => {

igorbenic

<InnerBlocks allowedBlocks={ [ 'core/image', 'core/paragraph' ] } />

DreaMinder

Example of deployment process which I use in my Nuxt.js projects. I usually have 3 components running per project: admin-panel SPA, nuxt.js renderer and JSON API.

This manual is relevant for VPS such as DigitalOcean.com or Vultr.com. It's easier to use things like Now for deployment but for most cases VPS gives more flexebillity needed for projects bigger than a landing page.

UPD: This manual now compatible with nuxt@2.3. For older versions deployment, see revision history.

---

Let's assume that you have entered fresh installation of Ubuntu instance via SSH. Let's rock:

kevbost

Ubuntu

Windows Subsystem for Linux [Very Easy Installation]

1. https://msdn.microsoft.com/commandline/wsl/install_guide
   • [Follow instructions carefully and remember your password]
   • [it will prompt for password]
   • [password will not appear while you type, just push enter when finished]
2. Open "Bash on Ubuntu on Windows"
3. Run the commands formatted as code separately

• (they will take a while to complete)

benmccallum

Important! This guide is out of date (circa 2017) and should no longer be used. For the latest advice, please refer to the BootstrapVue docs and their Nuxt.js module. https://bootstrap-vue.org/docs#nuxt-js

General setup:

1. Install bootstrap as a dev dependency, and its dependencies (node-sass and sass-loader) npm install --save-dev bootstrap@4.0.0-beta.2 node-sass sass-loader

benmccallum

Previously this gist had a series of files showing a working setup, but, 
@burkeholland found a much easier way and demonstrates it here:
https://github.com/burkeholland/nuxt-appservice-windows

Essentially, you'll:
1. add a .deployment file to instruct kudu to run `npm install` for you, 
2. leverage npm tasks' `postinstall` hook in package.json to trigger the full nuxt build,
3. add a server.js file in the root that `require`s the default server\index.js file that a nuxt app will already have

Step 3 will be noticed by kudu, which will:

BroFox86

{% macro respImg(
  class,
  srcset,
  sizes,
  src,
  width = "", 
  height = "", 
  loading = "",
  alt = ""
)%}

marcosnakamine

<?php
	$menu_items = wp_get_nav_menu_items('Menu Principal'); // PEGA TODOS OS ITENS DO Menu Principal
	$menu_mobile = array();
	foreach ( $menu_items as $key => $value ) { // SEPARA OS ITENS EM SUBMENUS
		if ( !is_array( $menu_mobile[$value->menu_item_parent] ) ) {
			$menu_mobile[$value->menu_item_parent] = array();
		}
		array_push( $menu_mobile[$value->menu_item_parent], $value );
	}
?>

marcosnakamine

<?php
// https://br.wordpress.org/plugins/really-simple-captcha/
$captcha_instance = new ReallySimpleCaptcha();
$captcha_instance->bg = array( 255, 255, 255 );
$word = $captcha_instance->generate_random_word();
$prefix = mt_rand();
$img_captcha = $captcha_instance->generate_image( $prefix, $word );

if ( isset( $_POST['send'] ) && $_POST['send'] == 'ok' ) {
	if ( $captcha_instance->check( $_POST['prefix'], $_POST['captcha'] ) ) {