What I Broke – Programming and Web Development

Category: JavaScript

  • Custom Error Message for PriceInCents – Vue3 and Vuelidate

    Hey everyone, This is a quick post to show how you can add a custom error message when using Vuelidate in Vue3. In my case I have a price field that should not be greater than $1000. The issue is that I store the amount in cents which results in the following error: This is…

  • Missing .tsconfig when converting existing ReactJS project

    Hi everyone, I’ve finally decided to start learning typescript while working on a side project. The plan was to convert the existing project over using the following command: npm install –save typescript @types/node @types/react @types/react-dom @types/jest After restarting the web server I had expected to see a tsconfig.json file that would allow me to setup…

  • Simple React-Leaflet Location Picker Setup

    Simple React-Leaflet Location Picker Setup

    Hi everyone, Just thought I’d share a very simple react-leaflet setup in case it’s able to help anyone. Add the css and javascript for leaflet to public > index.html: https://unpkg.com/leaflet@1.5.1/dist/leaflet.js”>https://unpkg.com/leaflet@1.5.1/dist/leaflet.js Install react-leaflet via npm or yarn, also add the dependencies: npm install react-leaflet # npm npm install leaflet react react-dom # npm yarn add react-leaflet…

  • Check if Running Locally – AWS SAM & NodeJS

    Hi everyone, Just a quick post on how to check if code is being run locally with AWS SAM and NodeJS: // 8+ isRunningLocally = () => { return process.env.AWS_SAM_LOCAL === ‘true’; } // 6+ function isRunningLocally() { return process.env.AWS_SAM_LOCAL === ‘true’; }

  • Parsing Hash Args for Cognito Auth – Javascript

    Hi everyone, A quick post on a function for parsing hash args when using AWS Congito. //jsfiddle.net/4eo7836j/embed/ Just in case the fiddle ever disappears: const parseHashArgs = aURL => { aURL = aURL || window.location.href; var vars = {}; var hashes = aURL.slice(aURL.indexOf(‘#’) + 1).split(‘&’); for (var i = 0; i 1) { vars[hash[0]] =…

  • NavLink ListItems not Applying activeClassName class when Clicked On – ReactJS React-Router MaterialUI

    Hi everyone, A bit of a hairy issue I ran into today that took a while to track down. I’m using React Router with Material UI to render a Drawer as a sidebar: The issue was that some links were not applying the expected activeclass: <ListItemText primary={ About } /> After trawling through react-router I…

  • Uncaught SyntaxError: Unexpected token < – ReactJS Build

    Hi everyone, A ReactJS issue I ran into after running npm run build: Uncaught SyntaxError: Unexpected token < This one took a while to track down but it essentially boils down to the built index.html file referencing paths relatively: Issue: index.html was referencing “</html". Instead of: "</html". This meant that anytime a page was accessed…

  • Allow Number and String for PropTypes – ReactJS

    Hi everyone, A quick post on how to allow a string or number when defining PropTypes: static propTypes = { numberField: PropTypes.number.isRequired, stringField: PropTypes.number.isRequired, mixedField: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired } Thanks to this stackoverflow post for the info: https://stackoverflow.com/a/41808543/522859

  • VirtualDog Tutorial PluralSight

    Hey everyone, Just taking a quick look at Jasmine with Typescript and found a decent looking tutorial on PluralSight with a sample app called VirtualDog. Attempting to run the following command resulted in an error on Windows 10: npm run bower-typings > concurrently “bower install” “typings install” [0] ‘bower’ is not recognized as an internal…

Create a website or blog at WordPress.com