GITHUB PAGES AND GITHUB ACTIONS
I ran into a problem with GitHub actions not building my site. I was getting the following error: Error: Error building site: TOCSS: failed to transform "scss/main.scss" (text/x-scss). Check your Hugo installation; you need the extended version to build SCSS/SASS with transpiler set to 'libsass'.: this feature is not available in your current Hugo version, see https://goo.gl/YMrWcn for more information So I did some research on this error and looked at the Hugo documentation.
Read moreVUE MUSIC PLAYER
Today I learned how to initialize firebase first in my Vue.js music player app to ensure a user is logged in before they have access to their data. First we need to destructure the firebase import statement to be able to grab the auth object which has an event attached to it that we can listen for: import { auth } from "./includes/firebase"; Using the auth object we attach it to the auhStateChanged method which takes one argument that is a callback function that will fire when the state of the user changes.
Read moreDJANGO FORMS
I have been working on a Django e-commerce site for awhile now, so I thought I would share something from that project. Django makes creating forms really easy and comes with a forms class you can inherit from and create the fields you need really easy. First you need to import the form you want and import forms. So you will have something similiar to this. Here I am importing a UserCreationForm for signing up a new User.
Read moreJAVASCRIPT DOM MANIPULATION
I have been working with JavaScript and learning how to manipulate the DOM. I wanted to write about something I have learned recently that I thought was useful. If you have an index.html file with a div element with an id of scrollable like this: <div id="scrollable"> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> <p>This is some content that is long</p> </div> In your styles.
Read moreVUE.JS & COPY TO CLIPBOARD
Today I made a webpage that transforms a square on a webpage to different shapes using transform on the X, Y, and Z axis. Once you get the shape that you want you can copy the CSS properties to your clipboard. In my index.html file I have 3 sliders representing X, Y, and Z axis. <label>rotateX: {{rotateX}}; </label> <input v-model="rotateX" type="range" min="-180" max="180" /> <label>rotateY: {{rotateY}}; </label> <input v-model="rotateY" type="range" min="-180" max="180" /> <label>rotateZ: {{rotateZ}}; </label> <input v-model="rotateZ" type="range" min="-180" max="180" /> I have two buttons one to copy the CSS properties to the clipboard and one to reset the sliders to 0.
Read moreVUE.JS
Today I finished a program in my JavaScript class using Vue.js. This program takes data from a database that contains information about speeding tickets that was recorded from a state trooper in the state of New York. This program makes a Ajax request returns the data then displays the data on 2 different pages one page has all the tickets and the other page only has the tickets that are 25 mph or over.
Read moreJAVASCRIPT PROTOTYPE
Today I learned about the prototype property in JavaScript. The prototype property allows you to add functionality or a certain property to an object that will then be added to all other objects of the same type. If I create a class: class userCreator{ constructor(name, score){ this.name = name; this.score = score; } } I can then add a method to the class like this: userCreator.prototype.increment = function(){ this.score++; } Now if I create a new user:
Read moreJAVASCRIPT PROGRAM 4
Today I was able to finish the fourth JavaScript program of the semester. In this program we had to use DOM manipulation to create a table element to display data on the page. This program used Bootstrap 5 to help with styling the table. I used the window.onload() function to ensure everything was loading on the page before any JavaScript was able to run. I have an array of items.
Read moreJAVASCRIPT BUILT-IN FUNCTIONS
I have been going through a course called Mastering the Coding Interview: Data Structures & Algorithms. I have learned a lot so far through this course. One thing I resently learned is, if I have two arrays and want to find out if I have a value from array1 that is the same in array2 I could loop through both arrays like this: const array1 = ['a', 'b', 'c', 'x']; const array2 = ['z', 'y', 'x']; function containsCommonItem(arr1, arr2){ for(let i=0; i < arr1.
Read morePYTHON FUNDAMENTALS AND MAP()
I have been going back over some of the fundamentals of python data types and also trying to learn more advanced algorithms. Today I focused on the map() function. Map takes in 2 arguments like this map(function, iterables). So I could write a function like this: def multiplyByTwo(item): return item*2 And then print the answer out like this: print(list(map(multiplyByTwo, [2, 4, 6]))) which returns: [4, 8, 12] This is a very basic example.
Read more