Posts

Vue Multiselect

Image
When writing enterprise client-facing applications, a robust multiselect component is a must. Enterprise applications usually consist of reporting and management tools. These tools are equipped with a variety of filters. Filters often consist of lists of thousands of items, allowing the user to pick anywhere from one to hundreds quickly. It is also important to quickly see what items have been selected. As I transitioned from AngularJs to Vue, I set out on a journey to find the best multiselect on the market, so I did not have to write my own. Unfortunately, after much research, nothing I found satisfied my requirements, so I ended up writing my own: Demo :  http://vue-listbox-multiselect.s3-website-us-west-2.amazonaws.com/ Github :  https://github.com/banner-edge-media/vue-listbox-multiselect Preview : Code: < vue-listbox-multiselect v-model =" selectedList " :search-function =" search " placeholder ="Search Cities" size ="medium" /&g
1 comment
Keep reading

Selenium on Heroku

I spent a lot of time beating my head around the Selenium WebDriver in NodeJs that works locally on my Windows machine and easily deploys to Heroku. I finally got it working using PhantomJs as the headless browser. I was able to get Chrome and Firefox working locally, but not on Heroku. Here are the steps I took to get it working: 1. Install PhantomJS 2.1.1 http://phantomjs.org/download.html 2. Set up a Heroku app with an additional buildpack for PhantomJs: https://github.com/stomita/heroku-buildpack-phantomjs 3. Set up a simple NodeJs/Express app. I am currently on NodeJS LTS 6.10.3. Selenium-WebDriver will not work on node < 6. package.json: { "name": "untitled2", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "start": "node index.js", "test": "echo \"Error: no test specified\" && exit
25 comments
Keep reading

Angular directory structure for large projects

I have spent a lot of time organizing the directory structure of my Angular 2 / 4 project to achieve the following: Developing new sections with ease by adding lazy loaded modules. Keeping modules organized in a single folder. Separating public and secure layouts and their related code Organizing global and re-usable assets Having lots of granularity with many files (not putting all the code in a single file, that's Webpack's job) I run my Angular projects using a full MEAN stack on Heroku from a single project. I have omitted all the Express/Mongo (server-side code) to focus on Angular directory structure. I currently run 3 public modules and 9 secure modules in production and feel like this will scale nicely as my project grows: config/ -----cluster.js // Process Forking Support for NodeJs -----express.js // Express.js Setup -----settings.js // Server side settings from ENV vars and other defaults. -----web.js // Main entry point -----webpack.config.js //
7 comments
Keep reading

Angular reload page when new version is deployed

When developing a Single Page Application we want to deploy frequent changes, and do not want a user stuck at a stale version. We also do not want to interrupt the user if they are in the middle of a process to refresh the entire website. Here is my current solution to solve this problem: System Specs/Configuration Angular 4.0.1 Webpack 2.3.3 Webpack builds go into "/dist" folder webpack.config.json is in the "/config" folder Step 1: Use Webpack to generate a hash.json after every build My webpack config adds different plugins based on environment. It always adds the following plugin to grab the hash: plugins.push( function() { this.plugin("done", function(stats) { require("fs").writeFileSync( path.join(__dirname, "../dist", "hash.json"), JSON.stringify(stats.toJson().hash)); }); } ); /dist/hash.json is my version. When any code file changes, th
Post a Comment
Keep reading