Forem: Sarah Thompson

Make Light/Dark mode Toggle for your Website using CSS

Sarah Thompson — Tue, 06 Jul 2021 19:13:16 +0000

Having light and Dark mode on web or desktop applications is a great feature to not only make the user's eyes happier, but to show off some fun and fancy css skills. It gives off an extra level of polish for your personal site if you're using it in a portfolio for a new job. I recently did it on my personal website - but instead of traditional light and dark mode, I changed the colors and themes to be "Light Academia Aesthetic" and "Dark academia Aesthetic".

Pick Your Colors

First thing first pick your two color palletes for light mode and dark mode. I like to use coolors.co to help select colors to get ideas on what to pick.

Now with your hex colors selected we are going to set them as variables in your top .css file. Setting them as variables and then using those variables to assign to individual instances that are using the colors makes for cleaner code, better consistency, and easier updates should you want to change a color.

:root {
  /** sunny side **/
  --light-background: #b87e54;
  --light-olive: #4d4828;
  --light-blue: #99c1c3;
  --light-purple: #67597a;
  --light-yellow: #e0cd7e;
  /** dark side **/
  --dark-background: #283618;
  --dark-darkblue: #001d3d;
  --dark-blue: #003566;
  --dark-darkestblue: #000814;
  --dark-mustard: #664e00;
}

These colors can then be easily accessed by calling the variable name you assigned the hex color to background-color: var(--dark-background); .

Build Your Toggle

For the toggle we are going to build off of an input HTML element. This input and its associated label will be turned into something that looks like a toggle with css, but will continue to function the same as a checked, or unchecked, input element. We will be leaning heavily on the ::before and ::after pseudo-elements to get it done.

<input type="checkbox" id="toggle" class="mostHigh toggle--checkbox" />
<label for="toggle" class="toggle--label mostHigh">
</label>

We want to hide .toggle--checkbox with display: none so that the original checkbox isn't visible and then create the toggle outline with .toggle--label.

.toggle--label {
  width: 80px;
  height: 40px;
  background: var(--blue-color);
  border-radius: 100px;
  border: 5px solid var(--blue-border);
  display: flex;
}

We will be using the pseudo-element ::before to create the switch portion that will toggle back and forth.

.toggle--label:before {
  animation-name: reverse;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
  transition: all 350ms ease-in;
  content: "";
  width: 30px;
  height: 30px;
  border: 5px solid var(--yellow-border);
  top: 0px;
  left: 4px;
  position: absolute;
  border-radius: 82px;
  background: var(--yellow-background);
}

Now we will be using css pseudo-class selector `:checked' to determine inside the css whether or not the toggle has been clicked on or off. This is very convenient, it prevents having to update the DOM with JavaScript or do conditional rendering.

CSS selectors might have more than one simple selectors and between them we include a combinator. In this toggle we are using an adjacent sibling selector + to select the sibling of the class .toggle--checkbox (the input) which is .toggle--label (the label). Other combinators for simple selectors are descendant selector (space), a child selector > and general sibling selector ~.

It works in a similar way as :hover does, that when that class is checked then the css will update the sibling selectors code. The sibling qualifier is based on the HTML elements to which the classes are assigned.
`

.toggle--checkbox:checked + .toggle--label {
  background: var(--indigo-color);
  border-color: var(--indigo-border);
}

.toggle--checkbox:checked + .toggle--label:before {
  background: var(--white);
  border-color: var(--gray-border);
  animation-name: switch;
  animation-duration: 350ms;
  animation-fill-mode: forwards;
}

Animate the Toggle

Right now the toggle will change colors and move around, and make it visually appear to be toggling. We can do this in css too. We will be using Keyframes for this. Having the keyframes created then assigned to the animation-name attribute that is on .toggle--label:before. We are using the keyframes to create visual motion and make the circle toggle move from the left side of the toggle switch to the right - and then back.
`

@keyframes switch {
  0% {
    left: 4px;
  }
  60% {
    left: 20px;
    width: 50px;
  }
  100% {
    left: 40px;
    width: 30px;
  }
}
@keyframes reverse {
  0% {
    left: 24px;
    width: 42px;
  }
  60% {
    left: 20px;
    width: 50px;
  }
  100% {
    left: 4px;
  }
}

Have the Toggle Effect the Site with Day/Night Mode

To push day/night mode to the rest of your site we are going to be using the same process that we used for the .toggle--label. We want to make sure that the toggle itself is near the top level so that the header and the main part of the site can be sibling elements to grab on to.

<Header />
<Toggle />
<Main />

In the way you will be watching to see if the toggle input gets checked, and if so updating the initial css to the toggled css.
`

.header {
  background-color: var(--light-background);
  color: var(--light-olive);
}

.toggle--checkbox:checked ~ .head {
  background-color: var(--dark-background);
  color: var(--white);
}

Have fun toggling your different colors around!

Learning React: APIs with Fetch & Axios

Sarah Thompson — Wed, 26 May 2021 20:24:58 +0000

Unlike Gretchen from Mean Girls, React really IS going to make fetch happen.

Whether you like using functional components or class components, if your app is big enough you're likely needing to get data from an API.

If you're just learning right now and need an API to practice on I've got a two suggested free ones I've liked using:

Trivia API this has a lot of parameter options, although a lot of the data returned needs to be cleaned of character entities before you display it (ex: &)
Pokemon API has a handful of different queries you can make for Pokemon names, powers, types, and pictures.

Fetch()

The fetch() call takes in two argument, your api url parameter, like fetch("https://pokeapi.co/api/v2/pokemon/1"), is one. The other one is the init object which can contain headers, body, credentials, and any other piece of information.

As basic fetch() call looks like this:

fetch('https://pokeapi.co/api/v2/pokemon/1')
  .then(response => response.json())
  .then((results) => {console.log(results)});

You should be putting your api fetch() calls in your 'componentDidMount' lifecycle method if you're using a class component, and if you're using a functional component you should make sure your useEffect hook will also call on render by appending an empty array to it.

Fetch returns a promise that points to the response from the request that was made to the API no matter if the request is successful or not. This response is just a HTTP response and not JSON. In order for you to get the JSON body content of the response, you need to use the json() method on the response.

     fetch(powersUrl).then(response => response.json()).then(
         (result) => {
             this.setState({
                 powerInfo: result
             });
         },
         (error) => {
             this.setState({
                error
             });
          }
     )

Instead of using a .catch() block for errors, with fetch() we are using a (error) so that it doesn't swallow the exceptions from any actual bugs that could be in the components.

A request made with Fetch will only be rejected if there is a network failure or if something is preventing the request from completing - if it is a 4xx or 5xx type code it will update the ok status.

To add variable query params you can encode them straight into the URL.

fetch(`https://pokeapi.co/api/v2/pokemon?limit=${encodeURIComponent(data.limt)}`)
.then(res => res.json())
.then( ....

This fetch() function lets you to make HTTP requests with standard HTTP verbs like GET, POST, PUT, and DELETE. You can append other needed data to the fetch() like method, headers, and body into the init object

 fetch(userURL , {
      method: 'GET',
      headers: {
        Accept: 'application/json',
        'Content-Type': 'application/json',
      },
    })
      .then((resp) => resp.json())
     .then(  ......

Axios()

Axios is another tool we can use to handle API calls. It is a lightweight promise based HTTP client for browsers and also for node.js.

import axios from 'axios'

You need to install it with npm and add it to your package.json, then you'll import it at the top of your file. Axios takes two inputs, the URL of the endpoint you're trying to hit and an object that contains all of the properties you want to send.

    axios.get(monsterUrl).then(
        res => {
            var monsterChart = []
            monsterChart.push(<div> {{res.pokemon}}</div>)
            updateMonster(monsterChart)
            }
        ).catch(
            .... )
    }

You can also format it like this:

axios({
      method: 'post',
      url: 'https:/coolAPI.com/api/cool',
      data: {
            email: 'myTest@example.com',
            password: test1234
      }
})

There's lots more to dig into, but these are two solid part to practice on!

Learning React: Hooks

Sarah Thompson — Sun, 14 Mar 2021 22:54:02 +0000

I'm taking you on a journey to learn React with me. It is the cool new framework, and I want to figure out exactly what all makes it so cool. And one of the places we are stopping to appreciate on the way are Hooks.

Hooks enabled us to use functional components instead of class-based components while dealing with the state. In fact hooks allow us to write components using just functions.

React has a topdown uni-directional data flow architecture that lets us break features of the UI into small reusable parts. But sometimes it is difficult to fully breakdown complex feature sets because the logic being used is stateful so it can't really be extracted to another method. Hooks allow us to be able to really organize the logic inside a complex component into reusable isolated units so that it is more readable and maintainable.

There are built in hook options, as well as the ability to write our own custom hooks. You shouldn't call hooks inside of loops, conditions, or nested functions instead they should be called at the top of a function.

These built in hooks can be imported from the same place React is imported from at the top of the file you are using them in.

import React, { useState, useEffect, useRef, useMemo } from 'react';

One built in hook is useState which creates a pair of information. It gives us local state variable that we can name like "ThingBeingSet" and also useState provides for us a setter function to update the state that it creates. The setter function can be named anything, but typically it should be named with the syntax "setThingBeingSet".

We have the initial band state variable being set as an argument in useState to the band "Jukebox the Ghost". You don't need to set an argument in useState unless you want to in your code. That band variable then gets updated when the setter function is clicked in the button HTML element.

  const [band, setBand] = useState('Jukebox the Ghost');

  return(
<div>
   <button onClick={() => setBand("Frankie and the Witch Fingers")}>
        Change Band
    </button>
    <div>I am listening to {band}</div>
</div>
)

Another built in hook is the Effect Hook, useEffect, which adds the ability to perform side effects from a function component. Side effects are when we interact with something external to the codebase itself like if we were fetching data from an API and it is something can alter a component's state in an unpredictable manner. This hook can act also like componentDidMount, componentWillUnmount, or the componentDidUpdate methods in react.

In the below function we are updating the page's title in the tab based on the quantity of clicks there have been.

useEffect(() => {
    document.title = `Button Clicked ${count} times`;
  });

At the tail end of the useEffect hook you can add an array that is either empty, which means useEffect will only run once when the component loads, or full of state variables. If it is full of state variables the useEffect will be rerun every-time one of those variables change. Basically this means that you can set if the methods in useEffect happen when there are component changes in the DOM and which changes those should be.

useEffect(() => {
    fetch(SOMEAPI).then(
      ...
    )
  },[]);

Hypothetically, adopting Hooks can reduce the bundle size of your application because code that uses hooks tend to minify more easily than the same code that is using classes. Hooks were added in React 16.8.

Learning React: Props

Sarah Thompson — Sun, 07 Mar 2021 18:56:37 +0000

React is an open source popular web frame work from Facebook that I've been itching to learn - and I want to drag you along for the ride. One of the key parts of react to learn are Props.

Props is a special keyword that is short for property. It is an object, and like all JavaScript objects all the attributes can be grabbed by the dot . notation. Props are things you pass to a function or what you want to initialize your component with.

Props can be used for that data can be dynamically passed to children components, and must never be changed/mutated directly. With props we are expecting that for every input we should be able to expect the same output. Every React components should act like pure functions with respect to their props.

First things first, can define our own attributes to assign values to HTML elements with interpolation { } like <div station={stationName} />.

Below is an example of props being used to dynamically pass data from the parent component to the child component using interpolation on the html element in the parent component that represents the child component. Props is the object that the component receives as an argument. In this case we are passing the argument song down to the child component.

///PARENT
const song = "Stairway to Heaven";

ReactDOM.render(
  <Radio song={song} />,
);

// Child Function Component
function Radio(props) {
  return <h3>I'm listening to {props.song}</h3>;
}

The Child component is then able to use the JavaScript object that was defined in it's parent component to display to the user what song they are listening to.

The props argument doesn't need to be actually named props, you could call it which ever variable makes sense for keeping track of the content in the props.

If you do want to update something set in a prop - but you don't want to go against the rule that they are not supposed to be mutable - you can use state!

W3 has more information on props.

Some Top React Interview Questions

Sarah Thompson — Sun, 28 Feb 2021 02:36:33 +0000

What is react?

React is an open-source JavaScript library, not a full-blown framework, and was created by Facebook. Instead of being a full MVC (like Angular) - it is only view - built with components. These components parse up the entire UI into small and reusable pieces. Then it renders each of these components independently without affecting the rest of the UI. Since React renders each UI component only as needed there are fast performance speeds.

What are some of the features of react?

It uses the virtual DOM instead of the real DOM, it does server-side rendering, and it does uni-directional data flow or data binding. It can increase an applications performance and can be integrated with other web frameworks.

What's the difference between the real DOM and the virtual DOM?

React makes a virtual copy of the DOM to determine what parts of the actual DOM need to change based on a user’s actions. It then grabs the change date from the Virtual DOM and selectively updates the actual DOM (instead of reloading reloading the entire thing). Since this prevents constant page reloading, it create signification performance improvements.

Real DOM

It updates slow.
Can directly update HTML.
Creates a new DOM if element updates.
DOM manipulation is very expensive.
Too much of memory wastage.

Virtual DOM

Updates Faster
Can't directly update the HTML
Update the JSX if the element updates
DOM Manipulation is very easy
No Memory Waste

What is JSX?

JSX is a shorthand for JavaScript XML. React utilizes the expressiveness of JavaScript along with HTML like template syntax.

Browsers can only read JavaScript objects but JSX in not like a regular JavaScript object, so to allow a browser to read JSX, we need to transform JSX file into a regular JavaScript object using JSX transformers like Babel or Webpack.

You don't need to use JSX to buld websites with React, though it is a helpful tool.

class Tickets extends React.Component {

    render() {
        return (
            <div class="from-edge">
                <Pricing />
                <Seasonpass />
                <Info />
            </div>
        )
    }
}

What does render() do in React?

It returns a single React element which is the representation of the native DOM component, it can also return a group of elements if they are nested within one html element.

Class Components vs Functional Components?

Functional components are a basic React component, defined by the components unchanging props (properties). Class components are the more complex components. Class Components allow you to execute component lifecycle methods as well as manage a component’s state.

What are Arrow Functions in React?

Arrow functions => are a syntax for function expressions and are one of the ways to pass parameters to callback functions. Using an arrow function creates a new function each time the component renders.

What's the difference between ES5 and ES6?

ECMAScript 6 was the second major revision to JavaScript and is also known as ES6 and ECMAScript 2015. ES5 was released in 2009.

Some of the big differences are with require vs import, how to export, and components

// ES5
var React = require('react');
// ES6
import React from 'react';

// ES5
module.exports = Component;
// ES6
export default Component;

// ES5
var MyComponent = React.createClass({
    render: function() {
        return
      <h4>Howdy!</h4>
    };
});
// ES6
class MyComponent extends React.Component {
    render() {
        return
       <h4>Howdy!</h4>
    }
}

What do you know about Flux?

Flux is an architectural pattern that enforces unidirectional data flow - and is not specific to React.

Action > Dispatcher > Store > View

While the Store data is shared between multiple Views, this data can’t be directly mutated — all of the requests to update the data must pass through the Action > Dispatcher chain first. Because of this when there are updates are made to the data, it is easier to find where the code requesting those changes is coming from.

What is Props in React?

Props (short for Properties) are read only components that are passed down from parent to child (maintaining the uni-directional data flow). They are immutable and mostly used to render dynamically created of gotten data - they describe the way a React component is configured.
Properties are set when instantiating the component, and they shouldn't be mutated afterwards. Mutating values within a component are tracked with the state property rather than the props property.

var TicketInfo = React.createClass({
  render: function() {
    return React.createElement("span", {
      className: this.props.className
    }, this.props.message);
  },

});

var ticketMessage = React.createElement(Message, {
  className: "coolTicket",
  message: "You have bought a ticket! Congrats!"
});
ReactDOM.render(ticketMessage)

What is State in React?

State is used to create dynamic and responsive components and can be accessed with this.state(). State is facilitated with event handlers on DOM elements that notify the component of the new state with the updated values retrieved from the DOM (like when a user types in an input box for example). The state of a component can be updated with this.setState().

 getInitialState: function() {
    return { message: this.props.message };
  },

  _ticketCount: function(e) {
    this.setState({ message: e.target.value });
  },

  render: function() {
    return (
      <div>
        <span>How Many Tickets: {this.state.countTickets}</span>
        <br />
        How Many Tickets? <input type="text" value={this.state.countTickets} onChange={this._ticketCount} />
      </div>
    );

What are Refs in React?

Short for Reference they help to store a reference to a particular React element or component, which will then be returned by the component's render configuration function. They are often used when you need to manage focus, media playback, or integrate with third-party DOM libraries.

What are some lifecycle methods?

All react lifecycle methods can be broken into these categories: Initialization, State/Property Updates, and Destruction.
Below are a handful of the lifecycle methods for react.

componentWillMount() This is called just before rendering takes place (client and also server-side).
componentDidMount() This is called on the client side only after first render - you might use this lifecycle method to fetch data from a server
shouldComponentUpdate() This returns a Boolean, by default false, of if you want your component to update.
componentWillUpdate() This is called before the rendering of a component.
componentWillReceiveProps() This lifecycle method is called as soon as the props are received from their component's parent class but also before the render is called (or recalled).
componentDidUpdate() This is called after the rendering for a component takes place.
componentWillUnmount() This is used to clear up the memory spaces after a component is unmounted from the DOM.

What is React Router?

React Router is a routing library built on top of React that keeps the URL in sync with data that’s currently being displayed on the web page while maintaining a standardized structure. It is used for developing single page web applications. Unlike for conventional routing only the history attribute is change instead of having a HTTP request sent to a server.

Some Classic Angular Developer Interview Questions, and some Possible Answers (pt 1)

Sarah Thompson — Wed, 10 Feb 2021 23:36:04 +0000

You might be in the interview process right now - or you could just be wanting to make sure you're staying sharp with the kinds of questions asked in an interview. Maybe you want a few ideas of what topics to study or you're the one giving an interview! In any case, here's a list of some typical questions posed in an interview for Angular developers.

Explain what a single page web application is.

A single page web application (as compared to a multipage web application) works inside of a browser and doesn't require page reloading to use. These single page web applications rely heavily on JavaScript to load content when needed, change state, and update templates. They are typically really fast after the initial load, because they are only loaded once - and then after only data is transferred back and forth between client and server. GMail is an example of a single page web app.

Explain what a directive is.

Directives are markers you can put on a DOM element to attach certain behavior to it. They offer additional built in functionality to your application via the html. Some examples are ng-app (which defines the root element of a AngularJS application), ng-repeat (which clones html elements for each turn through the repeat), ng-show (use like a Boolean to either display or not display the dom element), and ng-if (Boolean to remove the entire html element). There are plenty more - and their syntax changes slightly when going from Angular JS to Angular 2+.

<body ng-app="myCoolApp">
<li ng-repeat="name in people">

What are attribute directives?

As opposed to components (directives with a template) and structural directives (that change the DOM layout) - attribute directives change the appearance and/or behavior of an html element or of another directive. There are built in versions of this like ngStyle, but you can write your own versions. It is best practice to prefix your custom directive names to avoid naming collisions incase a built-in directive is named similarly.

<p appBold>Bold this text!</p>

import { Directive } from '@angular/core';

@Directive({
  selector: '[appBold]'
})
export class BoldDirective {
  constructor() { 
//your code goes here!
}
}

What is $rootScope?

All apps have a $rootscope that is create on the html element that has the ng-app directive, and the $rootscope is available across the entire application.
Each AngularJS app can only have only $rootScope, but can have many child scopes since directives can create new child scopes. When these new scopes are created they are added as children of their parent scopes forming a tree structure.
The scope is the binding between the html template and the JavaScript controller where the business logic is.

Does a child controller inherit the parent controller's scope?

Yes! A child scope prototypically inherits from it's parent's scope. When AngularJS evaluates something like {{person}} it will first look at the scope associated with the person property, and if that property can't be found it will search up the scope "tree", first to it's parent, then it's parent's parent - all the way up to root scope. If a variable has the same exact name in the current scope as in it's parent scope, or even the $rootScope, the application will use the one in the current scope.

Explain 2 way data binding.

Two way data binding distills down to property biding and event binding - taking the data from the JS to the DOM and then back again once the user has caused an event (like filling in a form). It can be facilitated using the ngModel directive which uses both the square brackets typical of property binding syntax and the parentheses of event binding syntax.

<input type="text" [(ngModel)] = 'val' />

Of note, 2 way data binding functions different in Angular JS than it does in Angular 2+

Explain what a controller is.

Controllers are where all the business logic live, they control the data in Angular applications.

How would you send an event to a parent controller or a child controller?

To send an event out from the current scope you can $broadcast it down to all of the children of the current scope or you can $emit it up to the parent scope of the current scope. You can handle/listen for the specific events raised by $broadcast and $emit with $on as the event propagates up or down the scope "tree".

//this goes down the hierarchy 
$scope.$broadcast("theEvent",data);
//this goes up the hierarchy 
$scope.$emit("theEvent",data);
$scope.$on("theEvent", function(evt,data){ 
  // handler your code here!! });

What is an Angular promise and what is it used for?

Promises help us deal with asynchronous functionality - it's saying "hey, I promise this data will be here in a little bit, come back and check again". This allows the rest of the application to continue running other operations, and only holding up the functionality that needs the information you've "promised" will be delivered. You can even chain promises to handle executing multiple asynchronous server calls where one depends on the result of another.

return $q(function (resolve, reject) {
        $http.get('www.myfakeendpoint.com/surpise/cool')
          .then(onSuccess)
          .catch(onError);
        function onSuccess(response) {
          if (response ) {
            resolve(response);
          } else {
            onError(response);
          }
        }
        function onError(e) {
          reject(e);
        }
      });
    },

More information about the difference between promises and observables.

What is an Angular service?

The main purpose of a service is to organize and share business logic, data, and functions that are used in multiple components of an Angular application. Angular services are singletons (they are only generated in a single instance, and then just referred to by all components dependent on it) and "lazily instantiated" meaning that AngularJS only instantiates a service when a component depends on it. Angular services are often implemented through dependency injection.

Difference between a factory and a service?

While they are both singletons, and have a lot of similarities, factories are functions that return the object while services are constructor functions of the object. But both services and factories allow us to create an object then use that object anywhere in our application.

app.service('MyGreatService', function () {
this.sayHello = function(name) {
     //your code here!
}  }; });

app.factory('MyGreatService', function () {
  return {
    sayHello: function (name) {
     //your code here!
    } } });

There is always more to know about each of these questions/topics!

Mass Renaming Files with Node JS

Sarah Thompson — Wed, 09 Dec 2020 22:38:10 +0000

We've all been there, when you have a ridiculous amount of files you have to rename, and doing them one by one sounds like mundane pain. Maybe you're back in 2007 - the days of downloading hundreds of .mp3 files from sketchy websites only to have them all be name formatted like WebsiteName_SongName_Artist(1).mp3. You don't want that "Websitename" in there, nor do you want that extra "(1)" at the end, but since you downloaded Pavement's entire discography there's a lot to go through, and you don't want to do them all at once. This is a simple script to get you through them quickly.

I'm using the script for modern day reasons, of upgrading some code from AngularJS to Angular 2+ and trying to follow the naming conventions of the style guide.

Mass Renaming Files in the Same Directory/Folder

First thing first is setting up your file with all the functionality it needs. You can just make a new .js file in notepad++, or whatever you like to use, and save it where ever you like to save things.

const { join } = require('path');
const { readdirSync, renameSync } = require('fs');
var fs = require('fs');

const current = ".controller.js";
const future = ".component.ts";

In here we are grabbing the functionality to read from directories, as well as sync the renamed files back to those directories. We are also declaring that current file name part we are looking for, and what we are making to change it to in the future.

Next we are going to be declaring the path to whatever folder contains the files we want to change, as well as reading that directory and assigning everything that we found out to a const named files.

const pathName = 'C:/myDevelopment/myApp/directoryToChange/';
const files = readdirSync(pathName);

Looping through files

I like to start off with a console.log at the beginning so that I'll be able to double check what I'm changing things to. Below that we are looping through all the items in files and checking if it ends with what we have assigned as current. If it does then it'll replace that ending with the one I want in the future and sync that to the original folder.

console.log("Here we go!", current, future);

files
  .forEach(file => {
    if (file.endsWith(current)) {

      const newFilePath = join(pathName, file.replace(current,future));
      const filePath = join(pathName, file);

      console.log(newFilePath, file);
      renameSync(filePath, newFilePath);
    }}
)

Depending on how many files you have, and in how many directories you have them could be worth it to do recursion and a tree search instead of this straight forward solution. But if you know roughly how many directories to go through, you can just amend this program to loop twice.

Directory full of Directories

Lets say we are looping through a directory that is full of directories of Pavement's albums. Pavement was fairly prolific in albums and EPs, so it would take a while to run this program against each individual directory. Instead we have have a loop within a loop, that checks to see if the instance it is on is a file or a directory itself, and if it is a directory itself it loops again with that directory. This way you can run the program against your Pavement folder that contains all the folders for the Albums, which then contains the .mp3 files you want to mass update.

files
  .forEach(file => {
    if (file.endsWith(current)) {

      const newFilePath = join(pathName, file.replace(current,future));
      const filePath = join(pathName, file);

      console.log(newFilePath, file);
      renameSync(filePath, newFilePath);

    }

    else if (fs.statSync(pathName + file).isDirectory()) {

      var folder1 = readdirSync(pathName + file);
      folder1.forEach(file1 => {
        if (file1.endsWith(current)) {

          const filePath = join(pathName + file, file1);

          const newFilePath = join(pathName + file, file1.replace(current,future));

          renameSync(filePath, newFilePath);

          console.log(newFilePath, file1);

        }

In this instance, we check with fs if the file at that path is a directory, and if it is we go inside to run another loop on that code.

Once you're all set and ready run this code, just open your terminal and cd to where this file is. Once there simply running node file_name.js will kick off the file. With all the console logs you can follow along with the files that it has changed for you.

With all the time this program has saved you, you can organize even more of your audio library.

Want 2 Ways to Check If An Object has a Property?

Sarah Thompson — Tue, 06 Oct 2020 15:06:11 +0000

It's amazing how sometimes Boolean values can turn out to be, well, not Boolean. Maybe it is true, false, null or even not there at all. And each of those four options might mean a different user flow for you to enact on the front end! So how to you check to see if that property is even in the object?

Using the hasOwnProperty() Method

This is my favorite way to determine if the property is in the object, I find it incredibly readable and straightforward. This method returns a Boolean value of true or false based on if the value is missing or not.

var coolObject= {
  title: 'SmashBrothers'
};
if(coolObject.hasOwnProperty('title'){
   console.log("It does have this property!");
}
if(coolObject.hasOwnProperty('genre'){
   //this isn't ever hit, as it returns false
}

While hasOwnProperty() is looking at property values of objects, it ignores inherited property values like toString, and only looks at the data information outlined in the object.

You can chain checks on the object together, to prevent errors in your system. Let's say that the object is being returns from an endpoint, you'll first want to check that the object in general was successfully returned, and then check if the property is there.

 if (profile && profile !== null && profile.hasOwnProperty("coolName")){
//The object exists, isn't null, and has the property "Cool Name"!
}

Using the In Operator

This method of determining if the property exists inside the object reminds me of Python in a great way. You're quite literally asking if the property is in the object. Similar to hasOwnProperty() the in operator returns a Boolean value of true or false based on if the value is missing or not from the object it is looking in.

var coolObject= {
  title: 'SmashBrothers'
};

if('title' in coolObject){    
 // true!
}
if('genre' in coolObject){
// this code won't reach because this is false
}

You're good to go!

With these two ways to check using JavaScript if a property exists in an object, you'll be ready to do all sorts of interesting user flows on your front end based off the new options of did this property get returned in the data object! Here's some more long form on the two options.

Are you worried about Security at the Application Layer?

Sarah Thompson — Wed, 23 Sep 2020 20:42:41 +0000

If you're not... do you want to be?

The Application Layer, sometimes called layer 7, is used to help facilitate process-to-process connections over internet protocol (IP). Application layer is the highest level of open system, with the presentation layer right below it.

It allows a user to access and manage files in a remote computer, create features of mail services, use a virtual terminal, etc. The Application level has lots of commonly used protocols, systems, and services. Protocols like File Transfer Protocol (FTP), Web browsers, Simple Network Management Protocol (SNMP), Domain Name Service (DNS), and Hypertext Transfer Protocol (HTTP/HTTPS) are other parts of the application layer system.

So can we make sure our Web application is safe and secure on the application level?

Security on the Application Level

Ensuring security for your website on the application level is very important. Since the application layer is the closest layer to the end user it is all that more vulnerable to hackers. Poor security at this level can cause data theft and performance/stability issues. Below are some of the application level security threats you should be worried about.

Distributed Denial-of-Service Attacks (DDoS)

A Denial of service attack is when a site's server gets flooded with traffic. Attacks like this are normally coordinated with a large number of client computers, many of which are likely to have been infected with a virus that lets hackers remote into the device to force it to join the attack. DDoS causes the server to become inoperable, so true customers or users aren't able to complete their purpose for being on that site. If your web application is an online store, that could mean a lot of missed sales.

Sometimes a site's server gets over flooded with traffic dynamically and legitimately- like if your web application gets an intense spike in web traffic from an advertising or shout out on a popular social media account - this is not a DDoS attack.

The most important thing you can do to prevent Denial of Service Attacks is have a system in place, like a firewall, that can tell the difference between malicious and legitimate traffic.

SQL Injections

A SQL injection attack is when an attacker writes SQL in an input and is able to directly access a web application's back-end data base. The hacker might be doing this to steal information or delete entire tables, which would reek havoc on a web application. It could also be trying to add malicious code into the database, so that the next time it is called it would perform an attack on the innocent user's browser and computer.

//Make sure your form submissions have strong user input validation
<form submit="submitSecure()">
  <label for="fname">First:</label>
  <input type="text" id="fname" name="fname">
  <label for="lname">Last:</label>
  <input type="text" id="lname" name="lname">
  <input type="submit" value="Submit">
</form>

The best way to prevent this is to ensure strong user input validation, preventing users from submitting SQL code in HTML forms and instead of just allow normal text, numbers, and strings.

Cross-Site Scripting

There's a handful of different Cross Site Scripting (XSS) categories, like persistent and reflective, and the variety of attacks based on xss are numerous. Some common versions of xss attacks include transmitting private/personal data like cookies or session information to an attacker and redirecting the victim's browser from their intended site to web content controlled by the attacker. Another large one is performing malicious operations on the user's machine while pretending to be the vulnerable site. This causes many issues since even if the victims computer checks with a pop up if the victim really wanted to download something, since the victim thinks it is coming from a trusted site, they are likely to agree.

Similar to SQL injection prevention, best way to prevent XSS is to ensure strong user input validation, preventing hackers from submitting application code in HTML forms and instead of just allow normal text, numbers, and strings.

Parameter Tampering

Parameter Tampering is a hacker manipulating the parameters passed between the client and the server to be able modify the application data like user credentials, permissions, and price. It is a fairly simple attack, targeting the application's business logic. An example of this attack would be a user manipulating the parameters to order 20 shirts, when only purchasing and paying for 1. Another would be editing the hidden field values to change the price.

//before parameter tampering
<input type="hidden" name="price" value="59.90">
//after parameter tampering
<input type="hidden" name="price" value="5.00">

Someways to prevent the parameter tampering attacks are using regex to limit data, ensure data validation as well as server-side validation compared with the inputs, avoid unwanted or hidden data being displayed in the html, and ensuring you don’t allow interception.

There's a lot of things to be thinking of when protecting your web application from hackers on the application level, but ensuring data validation for user inputs and implementing web application firewalls (WAFs) and/or secure web gateway services are a great place to start.

Implementing Ad Mob Banner Ads in Swift StoryBoard

Sarah Thompson — Wed, 16 Sep 2020 14:31:47 +0000

You've found yourself adding banner ads to your iOS application, maybe for fun or maybe for profit. Maybe you're just doing it to learn how, who am I to judge! (Especially since that's exactly what I was doing).

Getting Setup

Assuming you have xCode downloaded and have created a new swift project, the next thing you want to do is to open your terminal and cd into that project's folder. You will next be installing cocoaPods sudo gem install cocoapods so it can take care of all the framework dependencies for adMod. Following this you will type pod init in your terminal. More details on pods and their functionality can be found here.

Next you will go into your project folder and open up podfiles.txt. You will want to edit that file to include pod 'Google-Mobile-Ads-SDK' and it will look like this:

# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'myCoolProject' do
  # Comment the next line if you don't want to use dynamic frameworks
  use_frameworks!

  # Pods for boredinchicago

  pod 'Google-Mobile-Ads-SDK'


end

Last thing is to run pod install in your terminal to install the pod we just added to that file. This will automatically download and add the framework to the project. You will want to completely close all of your xCode projects and then open up the new myCoolProject.xcworkspace project, which should be directly below the original xCode project.

Now you can check to make sure all these dependencies were installed by clicking the blue project file in the project navigator inside of xCode, then click Build Phases and look inside of Link Binary with Libraries to ensure that the Pod is in there.

Set Up AdMod Account

Google has made this free sign up extremely straightforward - especially if you already have a gmail. You will want to follow along their sign up set by step process until you have an AppID, it should look something like this ca-app-pub-2222233333333444~4444444444. Then you will be adding an ad unit to that app, make sure to select banner if that is the type of ad you want. It will assign a similarly long ad unit ID. Keep track of those two IDs as you will be adding it to your project.

Adding AdMob to your Project

First thing first is to open up your info.plist file and add GADApplicationIdentifier as a new property in the left hand column. For its value add your AppId from AddMob.
Next go into your AppDelegate.swift and add import GoogleMobileAds to the import section. Next inside of your first application function, specifically the one that contains didFinishLaunchingWithOptions you will be adding the next option via this code GADMobileAds.sharedInstance().start(completionHandler: nil).
The Pod install should have taken care of this next step, but go inside Build Settings, from the blue project link in the project navigator, and go down to Other Linker Flags and ensure that -ObjC is listed for both debug and release.

Adding the Actual Ads to your Project

Go into whichever view controller you are wanting the ad on. At the top you're adding import GoogleMobileAds again. Then you will adopt the GADBannerViewDelegate protocol by adding it to the end of your class declaration. Somewhere in your class, but above your viewDidLoad function add var bannerView: GADBannerView! . Now your viewdidload method has a few additions to be adding to it as well. We can check out those below:

  override func viewDidLoad() {
        super.viewDidLoad()
        bannerView = GADBannerView(adSize: kGADAdSizeBanner)
        addBannerViewToView(bannerView)
        bannerView.adUnitID = "MYCOOLADPID_ITGOES_HERE"
        bannerView.rootViewController = self
        bannerView.load(GADRequest())
        bannerView.delegate = self
    }

Where the adUnitId param is being assigned to bannerView, make sure you are adding your Ad Unit ID not your App Unit ID, otherwise your project will start throwing errors. Underneath your viewDidLoad function you're going to be creating the banner view and its constraints towards the regular view controller.

func addBannerViewToView(_ bannerView: GADBannerView) {
      bannerView.translatesAutoresizingMaskIntoConstraints = false
      view.addSubview(bannerView)
      view.addConstraints(
        [NSLayoutConstraint(item: bannerView,
                            attribute: .bottom,
                            relatedBy: .equal,
                            toItem: bottomLayoutGuide,
                            attribute: .top,
                            multiplier: 1,
                            constant: 0),
         NSLayoutConstraint(item: bannerView,
                            attribute: .centerX,
                            relatedBy: .equal,
                            toItem: view,
                            attribute: .centerX,
                            multiplier: 1,
                            constant: 0)
        ])
     }

Making the Ads Responsive

Responsive is a little strong of a word, but if your app is going to be both for tablets and phones this is a must to keep the image of the ad crisp. There are a lot of available ad sizes through ad mob, so you can play around with what looks best to you.

320x50 - kGADAdSizeBanner
320x100 - kGADAdSizeLargeBanner
300x250 - kGADAdSizeMediumRectangle
468x60 - kGADAdSizeFullBanner
728x90 - kGADAdSizeLeaderboard

  if UIDevice.current.userInterfaceIdiom == .phone {
        // iPhone
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 320, height: 50))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 320, height: 50)
    } else  {
        // iPad
        adMobBannerView.adSize =  GADAdSizeFromCGSize(CGSize(width: 468, height: 60))
        adMobBannerView.frame = CGRect(x: 0, y: view.frame.size.height, width: 468, height: 60)
    }

Wildly straightforward way to get ads onto your app. Now the hard part is getting people to actually download it!

If you have issues where there's no ads showing up, it might be because Google hasn't registered your new ad unit and its ID. Just try back in an hour or so.

Spot False Positives in Static Scans: Password Management

Sarah Thompson — Thu, 03 Sep 2020 20:54:40 +0000

If you're working through a static scan in order to get your code base in tip-top shape for an upcoming deployment, you know that you want to focus in on the real issues that need to be addressed as quickly as possible. You might be using Fortify or some other program to help flag and identify these potential issues in your code base.

Static scan reports that have issues flagged in the Password Management category can be lengthy. This is especially so if your site has authentication capability done internally (vs doing authentication through another site like having users log in with their github account or gmail account).

Ensuring password security is of utmost importance - but since many static scans issues are flagged from keywords - internal authentication will likely mean that you have a good handful of false positives along with real potential threats.

Types of Password Management Sub-Category Issues

There are a few different subcategories of Password Management issues that fortify can outline. It is very convenient that they are broken down this way in the scan results, as it make navigating and addressing these potential issues quicker and easier.

Password Management: Empty Password

What this Means

This means the scan believes a password that can be used to login & authenticate has been hard coded to be empty. The security issue Empty Password is a threat for a few reasons. One, once it is in the production site, authentication can easily guessed compared to a complex password. Also if the account that is "protected" by the empty password is compromised, the users of that account won't be able to update or change that password without the release of new code to the production site because the empty password is hardcoded. Passwords for authentication should not be empty, and they should generally be obfuscated/encrypted and managed in an external source.

Examples of False Positives

One example of a way Empty Password could be a false positive is if the input form is being cleared out. In the below code, from the scan's perspective the variable vm.userPassword is getting assigned an empty string to be able to authenticate. What is really happening is this function is just being used to reset the form.

function resetFormInputErrors() {
    vm.inputFormZip  = vm.inputFormUsername = vm.touched = [];
    vm.user.postalZip = vm.accUsername = vm.userPassword = '';
  }

Password Management: Hard coded Password

What this Means

Similar to the empty password security threat, hard coding passwords is a problem because this password can't be changed without releasing updated code. This means that if there is a password leak (or someone just forgets it) it will take additional time to resolve and reset the password. With this additional time, hackers would be able to access more of the account's information, potentially stealing important private or secure information. Passwords should be obfuscated/encrypted and managed in an external source.

Examples of False Positives

Since the scan is picking up keywords, any variable that has strings like vm.password, this.p_word, vm.Pwd, or $scope.pass_w will be under extra scrutiny. That extra scrutiny means that anything involved in the create password, reset password, or resend password user flow for your application will likely get flagged in some capacity.

The below code is just setting the medium in which the forget reset link will be sent to the user:

vm.passwordRecovery.medium = 'email';
vm.passwordRecovery.sendEmail = 'true';

Here is an example of a route.js file getting flagged as a security threat for the password keyword:

"App.resetPassword.invalid": "/invalidPassword",

or maybe the false positive is that the keyword is assigning the password strength requirements:

vm.passwordPattern = "^[a-zA-Z0-9]+$";

Password Management: Insecure Submission

What this Means

This category means that the scan believes there is an issue with the way the authentication/account creation/password reset is being submitted. The scan believes that the submission is being done over an HTTP get request as a parameter where web servers can log them and proxies can cache them. Using a HTTP GET to send a password or other sensitive information can cause the data to be mishandled or discovered by an attacker. To send sensitive data it is recommended to use a HTTP Post.

Examples of False Positives

In the below example the controller ID "CurrentPassword" for the input had gotten flagged as an insecure submission. But since this is just adding an ID for the html to be referenced in the controller and there is not a GET request being used with this password submission, it is a false positive.

 <input id="CurrentPassword"
        name="passwordConfirm"              
        type="password"
        maxlength="32"
        data-ng-pattern="Pattern"
        required
        ng-blur="selected = false" />

While there are lots of ways that the Password Management category of a static scan could be a false positive, double & triple checking to ensure there isn't a security threat is always recommended. Especially when it comes to passwords because that can lead to additional security leaks.

package.json vs package-lock.json: do you need both?

Sarah Thompson — Tue, 01 Sep 2020 17:22:41 +0000

Short Answer is no you don't need both, but maybe you'd want both!

package.json

If your project uses node package manager (NPM) you will have a package.json file somewhere in your code base.

The package.json file records the minimum version of different dependencies that your app needs. When a collaborator on the code does npm install the dependency versions installed will be those dictated in the package.json or a higher/more recent reversion. If you update the versions of a particular package, the change is not necessarily going to be reflected here.

The package.json file is used for more than just dependencies. It also is used to define project properties, descriptions, and license information.

{
  "name": "My-Home-Page",
  "version": "1.0.0",
  "license": "UNLICENSED",
  "author": "Sarah",
  "description": "Sarah's Homepage",
  "keywords": [
    "Home Page",
    ""
  ],
  "homepage": "https://myHomePage.com",
  "repository": {
    "type": "git",
    "url": "https://github.com/YOURREPO"
  },

  "scripts": {
    "start": "gulp startlocal",
  },
  "engines": {
    "node": "^10.2.0",
    "npm": "~6.5.0"
  },
  "dependencies": {
    "angular": "1.8.0",
    "angular-material": "1.4.20",
    "c3": "0.6.11",
    "d3": "3.6.6",
    "jquery": "3.6.7",
    "md5": "2.0.2",
  },

If you look in the example package.json there are ^ and ~. The ^ before the dependency version tells npm that if someone clones the project and runs npm install it should install the latest minor version. If it has a ~ it will update to latest patch version. This can sometimes cause issues since the collaborators on the same project might all be on different dependency versions.

package-lock.json

Where the package.json file is used for a handful of different things, the package-lock.json file is solely used to "lock" dependencies to a specific version number, including minor and patch versions. It will ignore the ^ and the ~ of the package.json file. This file keeps track of the the exact version of each installed package which means that future installs will be able to build an identical dependency tree.

This is important in some large application spaces with many dependencies. Some dependency versions do not play well with each other, so making sure to "lock in" the versions prevents a lot of issues from occurring. This is especially useful when there are multitudes of individuals collaborating on one code base. In this way, collaborators who npm install 6 months apart will be looking at the same versions getting installed

So you don't need both?

Here's the short answer:
Do you need both package-lock.json and package.json? No.
Do you need the package.json? Yes.
Can you have a project with only the package-lock.json? No.

Should I keep both?

There's a good chance you should! Especially if you keep up with dependency upgrades as needed. It helps to generate the same results on every environment, which will make work flow with many collaborators much easier.

You will want to commit the changes to the package-lock.json as well, so that in deployment npm will be grabbing the same packages as it was grabbing in your local/test environments.

More info

If you want more information about package.json vs package-lock.json this is a great resource.

You can check here to read about NPM audit and checking for known vulnerabilities of the dependencies in your project.