dillingham

Converting Tailwind UI Alpine transitions to Vue transitions

After you copy a component from the Tailwind UI library and begin to adapt it from Vue JS to Alpine JS .. you may wonder what to do about the transitions. As I'm exploring this myself, I am documenting it for others in the same boat.

Things to be aware of:

• Alpine calls the beginning and ending states "start" & "end"
• Vue calls the beginning and ending states "from" and "to"
• Alpine has inline "directives" ie x-transition:enter="classes"
• Vue has a wrapper component that applies classes to the child
• Alpine applies the classes you pass it for each state, :enter-start="class"

tomhicks

/*
Copy this into the console of any web page that is interactive and doesn't
do hard reloads. You will hear your DOM changes as different pitches of
audio.

I have found this interesting for debugging, but also fun to hear web pages
render like UIs do in movies.
*/

const audioCtx = new (window.AudioContext || window.webkitAudioContext)()

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 = () => {

sultaniman

/*
 * Returns default headers list
 * which will be used with every request.
 */
function getHeaders(multipart = false) {
  let defaultHeaders = BASE_HEADERS

  if (multipart) {
    defaultHeaders = {}
  }

sultaniman

/*
 * Wraps axios and provides
 * more convenient post method
 * calls with payload data
 */
export function post(uri, data) {
  return axios.post(uri, data, {
    headers: getHeaders(),
    withCredentials: true
  })

jalogut

// module.xml
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="../../../../../lib/internal/Magento/Framework/Module/etc/module.xsd">
    <module name="VendorName_ModuleName" setup_version="0.0.1" >
        <sequence>
            <module name="Magento_Config"/>
        </sequence>
    </module>
</config>

// di.xml

dlundgren

<?php
/**
 * Simple static proxy trait
 *
 * Aura DI is used for lazy loading
 *
 * Set `const PROXY_IDENTIFIER = "SomeClass" in your proxy class, and use this trait.
 *
 * Call `Some\Proxy\SomeClass::register(new SomeClassInstance)` to have it register the alias.
 *

gwillem

# This is an annotated subset of the Nginx configuration from our Magento production platform @ www.hypernode.com
# See https://www.byte.nl/blog/magento-cacheleak-issue 

# !!!! If you are a Hypernode customer, do not use this config as it will result in duplicate statements. !!!!!

user app;
worker_processes 4;
pid /var/run/nginx.pid;

events {

addyosmani

CSS Layout Debugger

A tweet-sized debugger for visualizing your CSS layouts. Outlines every DOM element on your page a random (valid) CSS hex color.

One-line version to paste in your DevTools

Use $$ if your browser aliases it:

~ 108 byte version