jh-thank-you

No go for Vue in Codepen Pro, just got this from the codepen team Webpackbin is working. I'm slowly rebuilding/simplifying everything, using this opportunity to rework everything.

No luck with .vue on Codepen despite Chris mentioning that they are supported... Chris actually suggested to another user to reach out to author of the CSS-Tricks Vue series you pointed me at... I reached out to Sarah, she is going to look into it when she gets back from a conference next week-ish. I have not heard back from the codepen team yet. I could rebuild everything to be codepen compliant, but I rather keep all structured the way I have it if possible... since that seems more real world... reading Sarah's post her comment is: // The code is a little different in codepen, if you'd like to see the setup that's more true to real-life, it's in this repo: https://github.com/sdras/vue-weather-notifier //I had to change a bunch of things around to use vuex in one script tag, most notably that this.$store became just store but I was hopeful as codepen projects looks like a recent addition... I will checkout webpackbin. Thanks. (hamster on a wheel graphic here)

This post no longer has the correct information - see the updated config and the GitHub repo history for full details. Guardians of the Galaxy was decent.. cool, soundtrack... I solved the first half of the problem, path aliases. Second issue: all images called by a dynamic import path are not processed - copy-webpack-plugin may be the solution Here is the breakdown (for anyone interested): There was no need for a conditional ternary for the path aliases. Looking at the production build the file path is getting an extra 'assets/css' added to the the beginning of the path name... only thing in my config that is set with this was/is the ExtractTextPlugin. In an effort to keep the build folder organized I specified an output path for the file like so: new ExtractTextPlugin({ filename: 'assets/css/styles-[contenthash:6].css', }), The above does indeed output the css files to the assets/css folder - everything is nice and tidy...but it also prepends all the paths in the CSS file. So the path was coming up assets/css/assets/img/filename.png etc. By changing the output path to just the file name, all of the images/resource files link properly for both dev and production build. So code this works: new ExtractTextPlugin({ filename: 'styles-[contenthash:6].css', }), but my styles are outputted to the root folder now... off to see if I can figure out how to keep the file in the css folder. Also, I need to solve the second part which is that all images called by a dynamic import path are not processed. I will probably use copy-webpack-plugin to solve the second issue. I will update the Config post above when all is done. SOLVED second issue with copy-webpack-plugin and changing the dev folder structure to match the build output. Updating the original Config above... when I find a CSS ExtraxctTextPlugin solution I will update again for now EVERYTHING WORKS. Sorry for the brain dump but this may help others who are learning.

Thanks Blake, I was thinking about separating the configs. I just tried the following (it works in that things start to compile but it throws errors Can't resolve 'path/for/each/alias' alias: { 'vue$': 'vue/dist/vue.esm.js', src: PRODUCTION ? path.resolve(__dirname, './assets') : path.resolve(__dirname, './src'), components: PRODUCTION ? path.resolve(__dirname, './assets/components') : path.resolve(__dirname, './src/assets/components'), css: PRODUCTION ? path.resolve(__dirname, './assets/css') : path.resolve(__dirname, './src/assets/css'), fonts: PRODUCTION ? path.resolve(__dirname, './assets/fonts') : path.resolve(__dirname, './src/assets/fonts'), img: PRODUCTION ? path.resolve(__dirname, './assets/img') : path.resolve(__dirname, './src/assets/img'), js: PRODUCTION ? path.resolve(__dirname, './assets/js') : path.resolve(__dirname, './src/assets/js'), modals: PRODUCTION ? path.resolve(__dirname, './assets/modals') : path.resolve(__dirname, './src/assets/modals'), scss: PRODUCTION ? path.resolve(__dirname, './assets/scss') : path.resolve(__dirname, './src/assets/scss'), }, That said, maybe I'm thinking about path aliases in the wrong way for the production build. I was thinking the alias resolve for both the source to process and the source to view become one in the same. With the above ternary the development build loads properly but the production throws the error. It tries to compile... but it's trying to find a source that doesn't exist yet - so my logic is wrong. The alias are good for the source but the paths are wrong form when things need to link back/view in the production/dist build. Scratching my head...picking into the code now to see what path is being attached... Even if I split the config I need to get my head wrapped around how to resolve the path alias for each environment. I will check back in later... I'm taking my wife out for lunch and a movie... need to break off... before she breaks me... Thanks for responding, on a Sunday of all days!

Thanks for the help. Yes, but the path aliases are Not broken out this way (at least that is what I am thinking). early on the config: const DEVELOPMENT = process.env.NODE_ENV === 'development'; const PRODUCTION = process.env.NODE_ENV === 'production'; const build = PRODUCTION ? [ './src/main.js', ] : [ './src/main.js', 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', ]; I got the main.js script to load properly by changing the output module from this: publicPath: PRODUCTION ? '/' : '/dist/', to this: publicPath: PRODUCTION ? '' : '/dist/', I'm thinking I need to set a ternary for the aliases, something like this (I tried but it didn't work): const pathalias = PRODUCTION ? [ 'vue$': 'vue/dist/vue.esm.js', src: path.resolve(__dirname, './assets'), // the other paths... now resolve to './assets' ] : [ 'vue$': 'vue/dist/vue.esm.js', src: path.resolve(__dirname, './src'), // the original paths that reolve to './src' ]; I tried pushing putting the const pathalias into alias, I also tried pushing a string // Tried passing in the object with just the const // Also tried with a stringify push pathalias.push( new webpack.DefinePlugin({ DEVELOPMENT: JSON.stringify(DEVELOPMENT), PRODUCTION: JSON.stringify(PRODUCTION), }) ); // in the module export alias: { pathalias }, they both get the same error: src: path.resolve(__dirname, 'assets'), ^ SyntaxError: Unexpected token :

Well, the above config works great for the dev build but the assets are not loading properly with the production build. Also, image assets that are dynamically added are not being processed. I have to do a bit more research. When I figure it out I will update the config for everyone. Off the top of my head I'm thinking it has to do with the path aliases, I may need to setup a conditional ternary for the path aliases as well. This is on the back burner for now since the dev build along with hot reloading and the dev server etc. are all working properly. If by chance anyone knows the fix please reach out and I will make the appropriate changes. Thanks in advance to anyone who helps.

Blake, Sorry for such an early reach out for help, I just spent the last 2 plusl hours trying to sort this error. "Failed to load resource: the server responded with a status of 400 ()" SOLVED: for some reason the existing demos from The Definitive Guide to Compilation on Plunker with babel processing work without specifying the script type but with the new plunker I created you need to specify the script type, otherwise it throws the error above: // this will throw an error 400 <script src="main.js"></script> // this will not <script type="script" src="main.js"></script> I have everything uploaded to plunker here is the link: https://plnkr.co/edit/PLbg0VFNNlhAcIgWsowD?p=preview So it looks like plunker does not recognize .vue file types or am I wrong? Codepen projects/pro looks like it should work but I'm having issues as well (I have an email into support as Chris Coyier mentioned on the project page .vue files are supported) . Thanks for any help you may provide. All the best, Jim

The navigation will be based on what was built from another thread I started Animating Object to Center of Window & Scale Based on Window Size Percentage. A number of GreenSock Moderators contributed to this thread (Thanks again Blake and Dipscom). The slideshow I have is based on a great, responsive, slideshow by Chrysto Fullscreen slides with TweenLite, CSSPlugin and ScrollToPlugin My next step will be converting my local build to a codepen or plunker (Blake, this will take a bit of time to do - I will hopefully have it ip by later today/Saturday).

GS Community, I am in the process of rebuilding a GSAP website into a Vue.js project. I am in the very early stages of learning Vue, here is a good, free, video series and here is a very good (but it cost 10 dollars) Udemy course. My hope for this thread is to build out a full GSAP & Vue App. I will break out each component as I go and place it in a codepen (I have quite a few things done already, it will take me some time to go back and break things out). This will be a work in progress and the codepens will be updated in phases: Phase 1: will be to get just get things wired the Vue way. Phase 2: will be to use GSAP for the animations and transitions etc. Phase 3: Build everything as dynamic/reusable components. If all goes well this will turn into a Vue/GSAP component library of sorts for everyone to reference. Blake, one of the GreenSock Moderators, has graciously offered to help guide me (Thank you Blake). Goals for the thread/project: Navigation Button Component Section Content Component Section Hero Image Component Section Thumbnail/Modal Button Component Modal Component Password Modal Component Vertical Slideshow Component (I will also to help others build out a Horizontal Version). Slide-up Tab Component Radial Button/Checkbox Form Filtering based on a sector/classname (with persistence via local storage or a Vue method, if it exists - learning as I go ) All of the above is built in a non-Vue way here http://hainis.net/dev/ Note: that only the print/advil, print/amex, print/bayer slideshow content is sorted, all the other thumbnails will load a blank modal. This site has performance issues and at times the javascript, loaded via a Djax call, for the thumbnail buttons to launch the slideshow content is not binding properly. These issues and some prodding by Blake have made me venture down the Vue.js path. Side note: I'm learning, not there yet, to do things a DRY way; hopefully under Blake's guidance I will finally get this under control and tighten up the spaghetti code that I currently have. Okay, so that's the setup. Next post will be some useful links and a current state/NOT simplified codepen of the current Vue app.

Thanks Blake, I'm just heading out the door to teach class. When I get back I will post my Vue question. By the way I laughed out loud with the Practical Dev statement. Will check back in later. Thank you VERY much.

Blake, I hope all is well. First, thanks for the likes on the webpack config post, I hope what I did helps out someone else. Thanks for pointing me towards VueJS. I have been slowly making my way through a Udemy course on Vue... I've posted a few questions in their Q&A and have looked through the VueJS Gitter forum for an issue I am having (I have had no luck and you seem to be a guru with so many things). I know you are very busy, would it be okay to ask you a Vue question? If so, where should I post it? Thanks. All the best, Jim

The config in this post is updated (as of 2018-01-09): Fixed Autoprefixer setup. Production Build now Autoprefixes the CSS properly. - removed unused babel presets and update the babel.rc file - dev build (and server) would get "out of memory" with prolonged use. Solved by updating the package.jason script with --max_old_space_size=2048 - added GitRevisionPlugin Production Build processes all links correctly: path aliases sorted (for the most part) vue-loader issue has a workaround I have a vue-loader/or webpack path alias issue filed with Juho and Evan hopefully I will know an answer soon. programmatic image src links now processed and hashed correctly. programmatically called modals and modal-slideshow src links now processed and hashed correctly. UPDATED - ExtractTextPlugin path is sorted. The CSS is now output to the assets/css directory. All of CSS path aliases are resolved. A shout out to Juho (one of the webpack contributors for helping me sort this check out. Checkout his free online webpack book, see SurviveJS link below). Here is a link to a great step-by-step Webpack 2 book (it's a free online version - Note the author is selling epub PDF etc. and sharing the money with the developer of Webpack) https://survivejs.com/webpack/foreword/ Here is a link to a very thorough Webpack 2 Video Tutorial by Emil Oberg: https://www.youtube.com/watch?v=eWmkBNBTbMM My config below is a hybrid between Emil's approach, SurviveJS's approach and a Laracast tip with splitting vendor and app JS into separate files. Here is my complete webpack.config.js file, it may help others: // DeprecationWarning: loaderUtils.parseQuery() received a non-string value // which can be problematic, see https://github.com/webpack/loader-utils/issues/56 // parseQuery() will be replaced with getOptions() in the next major version of loader-utils. // Caused by babel-loader v6.4.1 stable // Updated to babel-loader 7.x see Babel Loader Documentation https://github.com/babel/babel-loader // process.traceDeprecation = true; // removing Jquery from project/ webpack config, the project dependencies -- Also, in eslintrc.js, jquery is now set to false. var path = require('path'); var webpack = require('webpack'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var HTMLWebpackPlugin = require('html-webpack-plugin'); var PreloadWebpackPlugin = require('preload-webpack-plugin'); var ResourceHintWebpackPlugin = require('resource-hints-webpack-plugin'); var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin'); // var DashboardPlugin = require('webpack-dashboard/plugin'); var PrerenderSpaPlugin = require('prerender-spa-plugin'); var CopyWebpackPlugin = require('copy-webpack-plugin'); var GitRevisionPlugin = require('git-revision-webpack-plugin'); let FaviconsWebpackPlugin = require('favicons-webpack-plugin'); const DEVELOPMENT = process.env.NODE_ENV === 'development'; const PRODUCTION = process.env.NODE_ENV === 'production'; const build = PRODUCTION ? [ './assets/main.js', // updated to reflect production build output ] : [ './assets/main.js', // updated to reflect production build output 'webpack/hot/dev-server', 'webpack-dev-server/client?http://localhost:8080', ]; const plugins = PRODUCTION ? [ new webpack.BannerPlugin({ banner: new GitRevisionPlugin().version(), }), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin({ filename: 'assets/css/styles-[contenthash:6].css', // this will put the css in asset/css directoy. // You also need to resolve the path in the // ExtractTextPlugin.extract see const cssLoader below allChunks: true }), new HTMLWebpackPlugin({ template: 'index-template.html' }), new PreloadWebpackPlugin({ // For settings see - https://github.com/googlechrome/preload-webpack-plugin // Below is the default setting rel: 'preload', as: 'script', include: 'asyncChunks', }), // For setting see - https://github.com/jantimon/favicons-webpack-plugin new FaviconsWebpackPlugin({ logo: './assets/img/ui-elements/favicon-hainis.png', inject: true, // Inject the html into the html-webpack-plugin persistentCache: true, // Generate a cache file with control hashes and // don't rebuild the favicons until those hashes change // which icons should be generated (see https://github.com/haydenbleasel/favicons#usage) icons: { android: false, // Set to true for Production appleIcon: false, // Set to true for Production appleStartup: false, // Set to true for Production coast: false, favicons: true, firefox: false, // Set to true for Production opengraph: false, twitter: false, yandex: false, windows: false, }, }), new ResourceHintWebpackPlugin(), // Add only once see documentation // new DashboardPlugin(), // if you want a fancy dashboard in terminal // uncomment the DashboardPlugin line and the global var // Also, see the package.json file to modify the "build" script new webpack.optimize.CommonsChunkPlugin({ names: ['vendor'] }), // split vendor library from app code new FriendlyErrorsWebpackPlugin(), new CopyWebpackPlugin([ // need to copy sprite sheets to assets folder since the links can't be hashed in tha canvas call { from: 'assets/img/sprite-sheets', to: 'assets/img/sprite-sheets' } ]), new webpack.ProvidePlugin({ // axios: "axios", // don't define here and define in the component - it's one OR the other /* $: "jquery", jQuery: "jquery" */ // removing jquery from project }), ] : [ new webpack.HotModuleReplacementPlugin(), // disabled Vue-JS has HMR built in. // new DashboardPlugin(), // if you want a fancy dashboard in terminal // uncomment the DashboardPlugin line and the global var // Also, see the package.json file to modify the "dev" script // FaviconsWebpackPlugin only rendered during production build new FriendlyErrorsWebpackPlugin(), new webpack.ProvidePlugin({ // axios: "axios", // don't define here and define in the component - it's one OR the other /* $: "jquery", jQuery: "jquery" */ // removing jquery from project }), ]; plugins.push( new webpack.DefinePlugin({ DEVELOPMENT: JSON.stringify(DEVELOPMENT), PRODUCTION: JSON.stringify(PRODUCTION), }) ); const imageLoaderQuery = { bypassOnDebug: true, mozjpeg: { progressive: true, }, gifsicle: { interlaced: false, optimizationLevel: 3, colors: 256, buffer: false, // 'buffer' // set boolean if you wan to buffer. }, optipng: { optimizationLevel: 4, }, svgo:{ plugins: [ { removeViewBox: false, removeEmptyAttrs: false, }, ], }, pngquant: { quality: '75-90', speed: 3, }, }; // END imageLoaderQuery const cssIdentifier = PRODUCTION ? '[hash:base64:6]' : '[path][name]---[local]'; const projectMap = PRODUCTION ? '#source-map' : '#eval-source-map'; const cssLoader = PRODUCTION ? ExtractTextPlugin.extract({ publicPath: '../../', // since the ExtractTextPlugin is saving // the CSS file to assets/css directory (see const plugins above) // you need to resolve the publicPath to take this into account. use: ['css-loader?minimize&localIdentName=' + cssIdentifier, { loader: 'postcss-loader', options: { config: { path: 'postcss.config.js' } // END config } // END options } ], }) : ['style-loader', 'css-loader?localIdentName=' + cssIdentifier, { loader: 'postcss-loader', options: { config: { path: 'postcss.config.js' } // END config } // END options } ]; module.exports = { devtool: projectMap, entry: { build, vendor: ['vue', /* 'jquery', 'axios',*/ 'gsap/TweenMax', 'gsap/ScrollToPlugin'] }, resolve: { // IMPORTANT - keep in mind that path values are relative to the file you are writing in // Need to research how to create an alias to the root of the build or dist folder alias: { // chnaged dev folder structure to match production output - updated path aliases to reflect change - all files link properly in dev and prod 'vue$': 'vue/dist/vue.esm.js', modernizr$: path.resolve(__dirname, "./.modernizrrc"), assets: path.resolve(__dirname, './assets'), components: path.resolve(__dirname, './assets/components'), css: path.resolve(__dirname, './assets/css'), fonts: path.resolve(__dirname, './assets/fonts'), img: path.resolve(__dirname, './assets/img'), js: path.resolve(__dirname, './assets/js'), modals: path.resolve(__dirname, './assets/modals'), scss: path.resolve(__dirname, './assets/scss'), sections: path.resolve(__dirname, './assets/sections'), }, }, plugins: plugins, module: { rules: [{ enforce: 'pre', // with this eslint will not process files done by babel-loader test: /\.(vue|js)$/, // /\.js$/, loader: 'eslint-loader', exclude: /node_modules/, options: { emitWarning: true, // community formatter formatter: require('eslint-friendly-formatter'), // cache: DEVELOPMENT, fix: true, // Set to true for eslint autofixing // quite: true, // Process report errors only and ignore warnings }, }, { test: /\.vue$/, loader: 'vue-loader', // Used for Vue Templates. Also Hot Module Replacement only works with .vue files options: { loaders: { } // other vue-loader options go here } }, { test: /\.modernizrrc.js$/, use: [ 'modernizr-loader' ] }, { test: /\.modernizrrc(\.json)?$/, use: [ 'modernizr-loader', 'json-loader' ] }, { test: /\.json$/, loader: 'json-loader', // Used for Vue Templates. Also Hot Module Replacement only works with .vue files options: { loaders: { } } }, { // Conditions test: /\.js$/, // include: PATHS.app, exclude: /node_modules/, // Actions use: { loader: 'babel-loader', options: { // IMPORTANT - Need to set presets in .babelrc for Vue-Loader to work // If not it will throw an an error - Unexpected EOF at line 15 column 1 of the JSON5 data. Still to read: "" babelrc: true, cacheDirectory: true, presets: [ // ['latest', { // 'es2015': { 'modules': false } // }] ], }, }, }, { test: /\.(jpe?g|png|gif)$/i, use: [ 'url-loader?limit=10000&name=assets/img/[name]-[hash:6].[ext]', 'image-webpack-loader?${JSON.stringify(imageLoaderQuery)}', ], }, { test: /\.(svg)$/i, use: [ 'file-loader?name=assets/img/[name]-[hash:6].[ext]', 'image-webpack-loader?${JSON.stringify(imageLoaderQuery)}', ], exclude: /fonts/, }, { test: /\.svg$/, use: 'url-loader?limit=10000&mimetype=image/svg+xml&name=assets/fonts/[name].[ext]', }, { test: /\.woff$/, use: 'url-loader?limit=10000&mimetype=application/font-woff&name=assets/fonts/[name].[ext]', }, { test: /\.woff2$/, use: 'url-loader?limit=10000&mimetype=application/font-woff2&name=assets/fonts/[name].[ext]', }, { test: /\.otf$/, use: 'url-loader?limit=10000&mimetype=font/opentype&name=assets/fonts/[name].[ext]', }, { test: /\.ttf$/, use: 'url-loader?limit=10000&mimetype=font/ttf&name=assets/fonts/[name].[ext]', }, { test: /\.eot$/, use: 'file-loader?mimetype=application/vnd.ms-fontobject&name=assets/fonts/[name].[ext]', }, { test: /\.(css|scss)$/, use: cssLoader, }], // END rules }, output: { path: path.join(__dirname, './dist'), publicPath: PRODUCTION ? './' : '/dist/', // changed from '/' filename: PRODUCTION ? '[name].min.js' : '[name].js', }, }; // END module.exports Here is the package.json file: { "name": "hainis-vue-js-main", "version": "1.0.0", "description": "", "main": "index.js", "browserslist": [ "last 5 versions", "> 1%", "ie > 9" ], "//": [ "COMMENT - NOTE: If you want a fancy dashboard in the terminal add 'webpack-dashboard -- ' at the beginning of the desired script below", "Also, uncomment the DashboardPlugin var and plugin within the webpack config file" ], "scripts": { "preinstall": "mkdir node_modules && touch node_modules/.metadata_never_index", "build": "rimraf dist && mkdir dist && touch dist/.metadata_never_index && cross-env NODE_ENV=production webpack --env production --progress --hide-modules", "dev": "nodemon --watch webpack.config.js --watch dev-server.js --exec \"cross-env NODE_ENV=development node --max_old_space_size=2048 dev-server.js --env development\"", "lint:js": "eslint src/ webpack.*.js --cache --ignore-path .gitignore file.js --format 'node_modules/eslint-friendly-formatter' -- --fix || true", "lint:vue": "eslint src/ webpack.*.js --ext=js,vue --cache --ignore-path .gitignore file.js --format 'node_modules/eslint-friendly-formatter' -- --fix || true" }, "events": { "restart": "osascript -e 'display notification \"app restarted\" with title \"nodemon\"'" }, "keywords": [ "webpack", "tutorial", "uppsalajs", "meetup" ], "author": "Jim Hainis", "license": "ISC", "devDependencies": { "autoprefixer": "^7.1.1", "babel-core": "^6.25.0", "babel-loader": "^7.1.1", "babel-preset-latest": "^6.24.1", "babel-preset-stage-0": "^6.24.1", "copy-webpack-plugin": "^4.0.1", "cross-env": "^5.0.1", "css-loader": "^0.28.4", "eslint": "^4.1.1", "eslint-friendly-formatter": "^3.0.0", "eslint-loader": "^1.8.0", "eslint-plugin-html": "^3.0.0", "eslint-plugin-vue": "^3.5.0", "extract-text-webpack-plugin": "^2.1.2", "favicons-webpack-plugin": "0.0.7", "file-loader": "^0.11.2", "friendly-errors-webpack-plugin": "^1.6.1", "git-revision-webpack-plugin": "^2.5.1", "html-webpack-plugin": "^2.29.0", "http-server": "^0.10.0", "image-webpack-loader": "^3.3.1", "json-loader": "^0.5.7", "modernizr": "^3.5.0", "modernizr-loader": "^1.0.1", "multipage-webpack-plugin": "^0.3.0", "nodemon": "^1.11.0", "postcss-loader": "^2.0.6", "preload-webpack-plugin": "^1.2.2", "prerender-spa-plugin": "^2.0.1", "resource-hints-webpack-plugin": "0.0.1", "rimraf": "^2.6.1", "style-loader": "^0.18.2", "url-loader": "^0.5.9", "vue-loader": "^13.0.2", "vue-router": "^2.7.0", "vue-template-compiler": "^2.3.4", "webpack": "^3.0.0", "webpack-dashboard": "^0.4.0", "webpack-dev-server": "^2.5.0" }, "dependencies": { "axios": "^0.16.2", "gsap": "^1.20.2", "vue": "^2.3.4" } } Here is the .eslintrc file (needs to be at the root level along with the webpack config): module.exports = { env: { browser: true, commonjs: true, es6: true, node: true, }, plugins: [ "html" ], extends: 'eslint:recommended', parserOptions: { sourceType: 'module', }, rules: { 'comma-dangle': ['error', 'always-multiline'], indent: ['error', 2], 'linebreak-style': ['error', 'unix'], quotes: ['error', 'single'], semi: ['error', 'always'], 'no-unused-vars': ['warn'], 'no-console': 0, }, }; Here is the .gitignore file (keep at the root level along with the webpack config): # Compiled source # ################### *.com *.class *.dll *.exe *.o *.so # Packages # ############ # it's better to unpack these files and commit the raw source # git has its own built in compression methods *.7z *.dmg *.gz *.iso *.jar *.rar *.tar *.zip # Logs and databases # ###################### *.log *.sql *.sqlite # OS generated files # ###################### #OSX Mac .DS_Store .DS_Store? ._* .Spotlight-V100 .Trashes # Windows image file caches ehthumbs.db Thumbs.db # Recycle Bin used on file shares $RECYCLE.BIN/ # Images # ########## # Best practice is to keep small files # that dont't change often under normal # Git version control. # For Large File Storage see Git LFS - https://git-lfs.github.com/ # http://softwareengineering.stackexchange.com/questions/80962/should-images-be-stored-in-a-git-repository/80966 # *.jpg # *.jpeg # *.png # *.gif # *.psd # *.ai # *.svg # *.eps # *.tif # Project Files and Folders # ############################# # Sublime Text *.sublime-project *.sublime-workspace # dependencies /node_modules /bower_components # testing coverage # production /build /dist # misc .env npm-debug.log /*.log *.orig # Webpack Items # ################# .bundle/ /z_backups /z_code_chunks *.bundle /host /port /webpack_port /webpack_livereload /localhost.* Here is the .babelrc file (keep at the root level along with the webpack config): /* ********************************************************* IMPORTANT - Need to set presets in this .babelrc file NOT in the Webpack Config for Vue-Loader to work. If not it will throw an an error: Unexpected EOF at line 15 column 1 of the JSON5 data. Still to read: "" NOTE: removed "babel-preset-es2015": "^6.24.0", from package.jason since "babel-preset-latest": "^6.24.1" it includes: - es2015, - es2016 - es2017 - see https://babeljs.io/docs/plugins/preset-latest/ Also "babel-preset-stage-0": "^6.22.0" includes: - preset-stage-1 - preset-stage-2 - preset-stage-3 - see https://babeljs.io/docs/plugins/preset-stage-0/ ********************************************************* */ { "presets": [ ["latest", { "es2015": { "modules": false } }], ["stage-0"] ] } Here is the postcss.config.js file (keep at the root level with webpack config): module.exports = { plugins: [ require('autoprefixer')({ /* options */ /* browsers (array): list of browsers query (like last 2 versions), which are supported in your project. We recommend to use browserslist config or browserslist key in package.json, rather than this option to share browsers with other tools. See Browserslist docs for available queries and default value. env (string): environment for Browserslist. cascade (boolean): should Autoprefixer use Visual Cascade, if CSS is uncompressed. Default: true add (boolean): should Autoprefixer add prefixes. Default is true. remove (boolean): should Autoprefixer [remove outdated] prefixes. Default is true. supports (boolean): should Autoprefixer add prefixes for @supports parameters. Default is true. flexbox (boolean|string): should Autoprefixer add prefixes for flexbox properties. With "no-2009" value Autoprefixer will add prefixes only for final and IE versions of specification. Default is true. grid (boolean): should Autoprefixer add IE prefixes for Grid Layout properties. Default is false. stats (object): custom usage statistics for > 10% in my stats browsers query. */ }) // END options ] }; I hope that helps some others out, thanks in advance to anyone who helps with the path aliases. All the best

Thanks Blake! Here is an update to your GitHub package.json and the webpack.config.js to make them compatible with Webpack 2 package.json: { "version": "1.0.0", "name": "gsap-webpack", "private": true, "scripts": { "start": "NODE_ENV=development&& webpack-dev-server --inline" }, "devDependencies": { "autoprefixer": "^6.7.7", "babel-core": "^6.24.0", "babel-loader": "^7.0.0-beta.1", "babel-preset-es2015": "^6.24.0", "css-loader": "^0.28.0", "html-loader": "^0.4.3", "node-sass": "^4.5.2", "sass-loader": "^6.0.3", "style-loader": "^0.17.0", "webpack": "^2.3.3", "webpack-dev-server": "^2.4.2" }, "dependencies": { "gsap": "^1.19.1" } } webpack.config.js var path = require("path"); var webpack = require("webpack"); var root = __dirname; var gsapPath = "/node_modules/gsap/src/uncompressed/"; module.exports = { watch: true, context: path.resolve(root, "app"), entry: "./app.js", output: { path: "/build/js/", publicPath: "/wwwroot/js/", filename: "main.js" }, devServer: { contentBase: "wwwroot" }, module: { loaders: [ { test: /\.js$/, exclude: /node_modules/, loader: "babel-loader" }, { test: /\.html$/, exclude: /node_modules/, loader: "html-loader" }, { test: /\.css$/, exclude: /node_modules/, loader: "style-loader!css-loader!autoprefixer-loader" }, { test: /\.scss$/, exclude: /node_modules/, loader: "style-loader!css-loader!autoprefixer-loader!sass-loader" } ] }, plugins: [ new webpack.ProvidePlugin({ TweenMax: "gsap" }) ], resolve: { extensions: [".js"], alias: { "TweenLite": "gsap", "CSSPlugin": "gsap", "Draggable": path.join(root, gsapPath + "utils/Draggable.js"), "ScrollToPlugin": path.join(root, gsapPath + "plugins/ScrollToPlugin.js") } } };

Thanks Blake, You are truly gracious with your time and expertise. I am not an expert with coding etc. but there are a few things that I am good at (marketing, art direction and design). If you are ever in need of help with any of these areas please don't hesitate to ask, I would be more than happy to return the favor(s). Again, thank you for all the links, information and examples. Have a great evening/day. All the best, Jim P.S. Same for Dipscom, you gents are both a class act.

Blake, As always, thank you so much for such a thorough/informative answer. It's a lot to take in, I will be sure to read through the links/examples. localStorage vs indexDB - if I want to eventually build this out as both an online and offline portfolio viewer with filter persistence is one approach better vs the other for my use case? Isotope filtering - I actually set isotope up so it doesn't use it's layout/animation system, I'm only using it's filtering capability. Thank you for the link on Vue JS filters. I'm going to see if I can learn/figure out how to replicate just the filtering and get rid of Isotope/extra weight. Vue.js + Webpack + GSAP: I have almost completed Vue.js tutorials and Webpack book, here are some links to help out others: https://laracasts.com/series/learn-vue-2-step-by-step https://survivejs.com/webpack/preface/ I have just started to rebuild things in Vue.js and I am starting to read about all the GSAP/Webpack issues... just scratching the surface on this now... I came across your post about using the CDN for GSAP and adding it as an external. I'm building to load everything locally without any internet connection, so I'm looking into having GSAP stored in the node-modules folder etc. any advice on this approach is much appreciated. using-npm-and-webpack-to-import-tweenlite Any advice on how to setup Vue.js for my use case? I'm reading about Separation of Concerns: https://www.youtube.com/watch?v=0ZNIQOO2sfA I see the organizational benefit of keeping everything in a Vue instance/module and how this would keep the module self contained... is it better to have the CSS local to each instance/module or is it better to keep the CSS all in one external file the way it is done with a traditional website? I guess some people would say it's easier to make changes if the CSS is all in one place but I'm thinking it makes more sense to keep it locally with the the Vue Instance/Module. It goes against what I've read is best practice for traditional websites... seems like Mattias, in his video, is showing the shortcomings of this approach. Maybe I'm not understanding how Vue compiles everything just yet. My understanding so far is that it calls and binds things as needed... so if a component with it's scripts and css are not needed yet why load it (initial page loads faster this way) BUT other page loads would be slower since the resource/ additional http requests are being made... Seems like you have to pay the toll at some point... whether to do it all up front or spread the it out is the question for performance. Just thinking things through, looking for validation of an approach. Thanks again for all the help and advice. All the best, Jim

I've been slowly making my way though Webpack and Vue.js... came across this article that made me laugh... I think think you gents would get a kick out of it as well. https://hackernoon.com/how-it-feels-to-learn-javascript-in-2016-d3a717dd577f

Thanks Jonathan! I updated the main post with your info... I also added some other links to other image optimization tools... Here is an interesting post comparing a lot of these tools http://jamiemason.github.io/ImageOptim-CLI/

Blake, Clean and Concise and looks so much easier to maintain. Looks like (almost) everything I have been struggling to create is already baked in with these frameworks. I'm using dJax for partial page loads - I'm having trouble making sure things bind properly despite using the djaxLoaded function that the developer has baked in... I'm still learning what to do in this case. - I'm guessing this is what you mean by "routing". - I added filtering for client industry type with Metafizzy's Isotope - in the spirit of sharing/helping I posted up a small how-to for others with filter persistence across AJAX page loads https://github.com/metafizzy/isotope/issues/1236 - Is this baked in with Angular, Vue or React? I noticed if I stay within the app navigation, the rating remains the same... If I jump to another domain and hit the back button the rating is lost. I used a local storage solution for the Isotope filter settings to get around that issue. It would be great if the frameworks handles all that already. By the way, it put a smile on my face to see Street Fighter as your characters for the search filter example. The section-content.js captures the ID of the DOM element that has been clicked and passes it on to the custom-modal.js. This allowed me to use one set of functions for all the thumbnails. I'm not sure if I am doing this in the cleaniest/simplest way possible, do you have any good how to articles about making the code modular? Meaning I write a block of functions that get called to do something from a main script. Is this the proper way to work with the code? Or is it better to keep everything in one JS file? My thought is by breaking everything up into blocks it will help to organize it and two I only call/bring in what is needed as the user interacts with the site. For now I'm going to get all the assets into this this template — just so have something to show my work. Based on your suggestion I'm going to start a fresh build with one of these frameworks. I will add in the bits that I'm happy with from this learning experience. My goal is to see if I can simplify things and in turn speed things up. Also, thanks for posting up your suggestions in the other thread on Speed/Performance. All the best,

Blake, Thanks for that compliment, it is kind of you to say... I feel like I'm getting my head wrapped around things a bit more but as I look at the code that I started with I feel like it is spaghetti compared to what you and Dipscom have showed me. I was reading about, Native vs. Web vs Hybrid Apps https://www.mobiloud.com/blog/native-web-or-hybrid-apps/ I'm thinking more along the lines of a Web App - where I put the webpage into a wrapper of sorts (no browser toolbar etc) it will run on anything Android/Apple/Windows... kind of like the flash projectors of old... where everything is wrapped into one self-contained package with no outside dependencies. As always, I appreciate the help and guidance. Have a great evening/day.

Thanks Blake, I really appreciate the extra info. Are imagine, GraphicsMagick or ImageMagic similar solutions to a service like Cloudinary? My hosting provider has ImageMagic installed... For others reading this make sure to look at the Security Policy that should be implemented: https://www.imagemagick.org/discourse-server/viewtopic.php?f=4&t=26801 https://www.imagemagick.org/discourse-server/viewtopic.php?t=29588 Here is Smashing Magazine Article about settings that will produce smaller and/ better quality images than Photoshop's settings: https://www.smashingmagazine.com/2015/06/efficient-image-resizing-with-imagemagick/

Blake thanks for the link/info. I will be sure to look into it. I'm a bit more comfortable with some things now, when you first mentioned Angular the thought of starting from scratch and learning another language was daunting... honestly, it still is, but I'm a bit more willing to try. Have a great day. Which would be worth the time investment - which would be easier to convert to a local running hybrid web app?

mulegoat, Thanks, I will add these links to my first post... as others chime in I will keep updating it. This will hopefully make it easier for others to get the latest info.

Thanks for the follow up Carl, have a great evening/day.

PointC, Thanks for the links... as for Jame's spritesheet... that was not my main focus but it is part of the rabbit whole I started down. I'm just sharing the links in case if anyone else starts searching this topic. My main thing is preload or a prerender so that an animation is smooth. Part of what I am running into is animation lag and I'm not sure if it's due to image load or script load... I'm searching on how to use the dev tools to read where the bottlenecks are. I'm just starting to learn about performance so I don't know what the right questions or techniques are. (I'm thinking it is image load... If I play the animation a second time it is usually smooth). Thanks again for the response.

Carl, Thanks for the speedy reply. Strange... I was banging my head into a wall over this for days... The GSAP version now works with the var or not... the only other thing I changed was wrapping the color change in a setTimeout vs a promise().done().queue(function() {... - not sure why it's working to be honest... this is the way my code was structured from the start and the reason why I started to strip things down to find the problem. Just tested again... The non-GSAP version if put the var in place, it will only cycle through once. I know this is not a GSAP problem but could you tell me why? I 'm learning as I go... I want to understand what my mistake is. Also, I wanted to compliment your teammates (Blake and Dipscom) they have helped/taught me a lot over the last several months. I owe them and this forum/articles a lot of thanks. I really appreciate the help, mentor, mentality, that seems to be a core tenent of the GreenSock team!