mohitmamoria

Inertia.js ships with a fantastic form helper but it falls short when also using API/Axios calls in your project.

Here's a composable, built on top of the Inertia's form helper that hooks into it to replace the API calls with Axios.

To use, just replace useForm with useAPIForm.

const form = useAPIForm({
    title: '',
});

reinink

/**
 * First we will load all of this project's JavaScript dependencies which
 * includes Vue and other libraries. It is a great starting point when
 * building robust, powerful web applications using Vue and Laravel.
 */

require('./bootstrap');

window.Vue = require('vue');

Kruemelkatze

Theming Ant Design with Sass and Webpack

This is a solution on how to theme/customize Ant Design (which is written in Less) with Sass and webpack. Ant itself offers two solutions and a related article on theming, but these are only applicable if you use Less, the antd-init boilerplate or dva-cli.

What this solution offers:

• use a single sass-file to customize (no duplicate variables for your project and Ant)
• hot reload compatibility
• no dependencies on outdated npm modules
• easy integration with your existing webpack setup (webpack 3+ tested)

Snugug

Lazy Load Images in 40 Lines of Code

Behold! Intersection Observers at work!

Usage

First, update your source code to move your image sources in to data attributes.

kohlmannj

#! /usr/bin/env node
/* eslint-env node */

// Boot it up with:
// $ node customDevServer.js
// ...or:
// $ chmod +X customDevServer.js
// $ ./customDevServer.js

const webpack = require('webpack');

jtulk

{
 "scripts": {
    "build:prod": "webpack --env=prod --colors --profile --json > prod.stats.json",
    "build:staging": "webpack --env=dev --colors --profile --json > staging.stats.json",
    "start": "webpack-dev-server --env=dev --open --watch --progress",
  }
}

zcaceres

The Revealing Module Pattern in Javascript

Zach Caceres

Javascript does not have the typical 'private' and 'public' specifiers of more traditional object oriented languages like C# or Java. However, you can achieve the same effect through the clever application of Javascript's function-level scoping. The Revealing Module pattern is a design pattern for Javascript applications that elegantly solves this problem.

The central principle of the Revealing Module pattern is that all functionality and variables should be hidden unless deliberately exposed.

Let's imagine we have a music application where a musicPlayer.js file handles much of our user's experience. We need to access some methods, but shouldn't be able to mess with other methods or variables.

Using Function Scope to Create Public and Private Methods

martinherweg

/**
 |--------------------------------------------------------------------------
 | gulp browser-sync
 |--------------------------------------------------------------------------
 *
 * Browser Sync
 * @description Refresh the Brwoser after File Change.
 * Combined with webpack for HMR or Content Reload
 *
 * @package  generator-mh-boilerplate

timovos

    # Install the hostsupdater:
    # vagrant plugin install vagrant-hostsupdater
    
    # Place the following code into $HOMESTEAD/scripts/homestead.rb
    # I placed it somewhere near end of the file

    # Add the aliases to the host machine
    if Vagrant.has_plugin?('vagrant-hostsupdater')
      aliases = Array.new
      settings["sites"].each do |site|

nickbasile

<template>
  <div>
    <button @click="increment">Increment</button>
  </div>
</template>

<script>
    import { mapActions } from 'vuex'
    export default{
      methods: {