I was working on a video player app in Vue and forgot about the API_KEY that I was using from google for fetching video data from YouTube which I had listed as a const variable in my App.vue file. This ended up getting pushed up to my public github repo, exposing the key that I … Continue reading Vue.js: How to hide a public API key from github
JavaScript Language
JavaScript: How to use the .call( ) method
The .call() method is a JavaScript built-in that allows you to call a function that is defined in another object. Here is what w3schools.com says about the .call() method: The first argument when using .call() will always be expected to be an object that contains keys that the calling function requires as arguments. For example: … Continue reading JavaScript: How to use the .call( ) method
Javascript: How to use ES6 Template Literals
When using ES6 with a linter I got this suggestion from sonarqube to replace my standard string concatenation with an apparently preferred Template Literal. Here is the sonarqube message I got: The string concatenation that triggered this suggestion was: The suggested fix using a Template Literal looks like this: Basically, a template literal has this … Continue reading Javascript: How to use ES6 Template Literals
Vue.js: How to make an identicon generator
In this article, I will show how to create an identicon generator using Vue.js in codepen. First of all, an identicon is a graphical image that is generated by text input. This is useful as a substitute for photo images for site users. For example, when I type “Chris Nielsen Code Walk”, the identicon generator … Continue reading Vue.js: How to make an identicon generator
Vue.js: How to use Vue CLI to quickly create a project
Vue.js comes with a built in command line tool called Vue CLI, which makes setting up a new Vue.js project a breeze. Vue.js can be used without this, but the advantage of using Vue CLI is that it sets up a Vue.js project using Babel and Webpack and allows the project to be launched easily … Continue reading Vue.js: How to use Vue CLI to quickly create a project
Node.js: How to launch a temporary server and view output in a web browser
Once you have successfully written some node.js code and have viewed the results via command line, (see my previous article about this, linked below) the next logical step is to be able to write node.js code that can use HTML and be viewable in a web browser. To view node.js output in a web browser, … Continue reading Node.js: How to launch a temporary server and view output in a web browser
Node.js: How to update Node and NPM to the latest versions
You can check to see what versions of Node and NPM you have with these commands: node -v npm -v. For example: To update NPM, you can do that at the command line with this command: npm install -g npm The output should look something like this: A good way to update Node is to … Continue reading Node.js: How to update Node and NPM to the latest versions
Node.js: How to write node.js code locally and test using the command line
The first thing we want to do when getting ready to code in node.js is make sure that Node and NPM are installed on our machine. Start by opening a command window and type the command node -v. Then check to confirm that NPM is installed also using the command npm -v: Once that is … Continue reading Node.js: How to write node.js code locally and test using the command line
AngularJS: How to use ng-show to hide or reveal elements on click
In this article, I will describe how to use the AngularJS directive ng-show for clicking a button to reveal hidden data. The steps below demonstrate how to use AngularJS to hide or reveal data based on clicking an element. In a combination of HTML and JavaScript, it uses AngularJS directives ng-app, ng-controller, ng-click, ng-show, and … Continue reading AngularJS: How to use ng-show to hide or reveal elements on click
jQuery: How to detect if JavaScript and jQuery are working in a sandbox environment
Recently I was working in a Piano template sandbox environment where I could edit HTML and CSS code to build a Piano template. This sandbox uses AngularJS, HTML, and CSS, but I wanted to see if it provided JavaScript and jQuery functionality so that I could enhance the template I was working on with some … Continue reading jQuery: How to detect if JavaScript and jQuery are working in a sandbox environment