December 4, 2019 by topherPedersen

FatCamp Privacy Policy

Privacy Policy

Your privacy is important to me. It is my (Christopher Pedersen) policy to respect your privacy regarding any information I may collect from you on my app, FatCamp.

I only ask for personal information when we truly need it to provide a service to you. I collect it by fair and lawful means, with your knowledge and consent. I also let you know why I am collecting it and how it will be used.

I only retain collected information for as long as necessary to provide you with your requested service. What data I store, I will protect within commercially acceptable means to prevent loss and theft, as well as unauthorized access, disclosure, copying, use or modification.
I don’t share any personally identifying information publicly or with third-parties, except when required to by law.

My app may link to external sites that I do not operate. Please be aware that I have no control over the content and practices of these sites, and cannot accept responsibility or liability for their respective privacy policies.

You are free to refuse our request for your personal information, with the understanding that I may be unable to provide you with some of your desired services.

Your continued use of my website will be regarded as acceptance of our practices around privacy and personal information. If you have any questions about how I handle user data and personal information, feel free to contact me (chris@topherpedersen.com).

This policy is effective as of 4 December 2019.

December 2, 2019 by topherPedersen

TODO List in VanillaJS (for teaching purposes)

This blog post is brought to you by the developer of BitBudget. BitBudget is an automated budgeting app for Android and iOS which syncs with your bank account and helps you avoid overspending. If you’d like to quit living paycheck-to-paycheck and get a better handle on your finances, download it today! https://bitbudget.io

	<!DOCTYPE html>
	<html>
	<head>
	<!-- Mobile Friendly Meta Tag -->
	<meta name="viewport" content="width=device-width, initial-scale=1">
	</head>
	<body>

	<h1>Vanilla TODO</h1>

	<input type="text" id="newItem">
	<button onclick="addToList();">+</button>

	<ul id="todoList"></ul>

	<script>

	function addToList() {
	var task = document.getElementById("newItem").value;
	var thingtoadd = document.createElement("LI");
	thingtoadd.innerHTML = task;
	thingtoadd.id = Math.random().toString();



	var removebutton = document.createElement("BUTTON");
	removebutton.innerHTML = "X";
	removebutton.onclick = function() {
	removeFromList(thingtoadd.id);
	};

	thingtoadd.appendChild(removebutton);
	// thingtoadd.innerHTML += removebutton;

	var todoList = document.getElementById("todoList");
	todoList.appendChild(thingtoadd);
	/*
	thingtoadd.onclick = function() {
	removeFromList(thingtoadd.id);
	};
	*/
	console.log(task);
	}
	function removeFromList(id) {
	var todoList = document.getElementById("todoList"); // parent
	var itemToBeRemoved = document.getElementById(id); // child
	todoList.removeChild(itemToBeRemoved);
	}
	</script>

	</body>
	</html>

view raw vanilla-todo.html hosted with ❤ by GitHub

November 30, 2019 by topherPedersen

React Native error Failed to install the app… com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package signatures do not match previously installed version; ignoring!

error Failed to install the app. Make sure you have the Android development environment set up: https://facebook.github.io/react-native/docs/getting-started.html#android-development-environment. Run CLI with –verbose flag for more details.

Error: Command failed: gradlew.bat app:installDebug -PreactNativeDevServerPort=8081

Unable to install C:\Users\you\Desktop\YourApp\android\app\build\outputs\apk\debug\app-debug.apk

com.android.ddmlib.InstallException: INSTALL_FAILED_UPDATE_INCOMPATIBLE: Package com.yourapp signatures do not match previously installed version; ignoring!

O man, what a doozy!?! Okay so here’s what’s probably going on, or at least what has been going on the several times I’ve run into this error. I happen to do development on several different computers, but use the same physical android device to test my app. So what happens is, the signature attached to the app installed on our physical android device, doesn’t match the signature of the computer that we’ve moved to and are now working.

However, the fix is fairly simple. All you need to do is delete the app from your physical device, then re-build/run your app again and all shall be well!

$ npx react-native run-android

or…

$ react-native run-android

November 27, 2019 by topherPedersen

Connection is not secure— How to Add the Lock Symbol to Your Website for Free with Certbot

Welcome back dear internet friends,

In this post I want to talk a little bit about HTTP vs HTTPS, the lock symbol or lock icon that appears next to your website’s address in the web browser, and how you can add all this encrypted goodness to your website for free with Certbot!

Let’s do it…

	$ sudo apt-get update

	$ sudo apt-get install software-properties-common

	$ sudo add-apt-repository universe

	$ sudo add-apt-repository ppa:certbot/certbot

	$ sudo apt-get update

	$ sudo apt-get install certbot python-certbot-apache

	$ sudo certbot --apache

view raw encrypt.sh hosted with ❤ by GitHub

November 26, 2019 by topherPedersen

Working with Dollars and Cents in JavaScript: The Definitive Guide

Why hello there dear internet friend!

Welcome to my blog and the “definitive guide” on working with dollars and cents in JavaScript 😉 So the title of this post is a bit misleading, all you really need is one nifty method to format your numbers as dollars and cents:

yourNumberVariable.toFixed(2)

That’s it! Pretty nifty right?

I currently happen to be working on a personal finance app called Moolabeast at the moment, so that’s why I decided to publish this post. After releasing the latest version of the app I noticed a bug that was causing some of my financial transactions to format something like $ 34.089999999999996 , yikes! Thus the interest in this topic.

Previously I was using some one-liner of JavaScript I found on StackOverflow for formatting my dollar amounts. The line of code I was using had some wonky regular expression in it that I did not understand or care to investigate further until things went awry in my app. However, after digging into how this little code snippet worked, I discovered that the only part that really mattered was the toFixed method. I had assumed that this regular expression was important for… something? However, I was wrong! You really just need toFixed and you are good to go.

If you’d like a reference to play around with, check out my “definitive guide” below:

(UPDATE 11/26/2019: It looks like the regex was for adding commas, whoops! If you need commas, which I assume you do, check the last section of the code sample below for the regex magic.)

(UPDATE: 11/30/2019: The regex magic described above does not work with floating point numbers represented as strings. One could write a regular expression that does work with whole numbers, however, I’m not very good with writing regular expressions. Therefore, I’ve included a little function which I wrote in case anyone needs to add commas to whole numbers.)

	console.log("****************************************************");
	console.log("** Working With Dollars & Cents in JavaScript **");
	console.log("** ~ The Definitive Guide ~ **");
	console.log("****************************************************");
	console.log('\n');

	const formatAsDollarsAndCents = (value) => {

	var newValue = parseFloat(value);

	newValue = newValue.toFixed(2);

	return newValue;
	}

	// Floating Point Numbers Formatted to 2 Decimal Places
	console.log("Floating Point Numbers Formatted to 2 Decimal Places");

	const nonStandardAmountFormatted = formatAsDollarsAndCents(34.089999999999996);
	console.log(nonStandardAmountFormatted);

	const oneDecimalPlaceFormatted = formatAsDollarsAndCents(1.1);
	console.log(oneDecimalPlaceFormatted);

	const wholeNumberFormatted = formatAsDollarsAndCents(1);
	console.log(wholeNumberFormatted);

	console.log('\n');


	// Strings Formatted to 2 Decimal Places
	console.log("Cast As String...");

	const nonStandardAmountFormattedAsString = nonStandardAmountFormatted.toString();
	console.log('$' + nonStandardAmountFormattedAsString);

	const oneDecimalPlaceFormattedAsString = oneDecimalPlaceFormatted.toString();
	console.log('$' + oneDecimalPlaceFormattedAsString);

	const wholeNumberFormattedAsString = wholeNumberFormatted.toString();
	console.log('$' + wholeNumberFormattedAsString);

	console.log('\n');

	// Need to add commas? Here's the regex magic sprinkled in...
	const myNumber = 1300000.89
	const myNumberAsString = myNumber.toString();
	const myNumberWithCommas = myNumberAsString.replace(/\d(?=(\d{3})+\.)/g, '$&,');
	console.log('Add commas... ');
	console.log('$' + myNumberWithCommas);

	// Edge case, need to add commas to a whole number? I've written a function that
	// will add commas to a string of numeric characters. This is helpful when working
	// with integers, as the regular expression above does not work with whole numbers.
	// (One could write a regular expression that works with whole numbers, but I'm not
	// very good with regex so I just wrote a function and moved on with my life 😉
	function getWholeNumberWithCommas(wholeNumberStr) {

	// Step One, Reverse String
	var reversedString = "";
	var indexOfLastChar = wholeNumberStr.length - 1;
	for (var i = indexOfLastChar; i >= 0; i--) {
	reversedString = reversedString + wholeNumberStr[i];
	}

	// Step Two, Add Commas Every Third Char
	var reversedStringWithCommas = "";
	for (var i = 0; i < reversedString.length; i++) {
	// every third char, add a comma and the next char
	if (i % 3 === 0 && i !== 0) {
	reversedStringWithCommas = reversedStringWithCommas + "," + reversedString[i];
	} else {
	reversedStringWithCommas = reversedStringWithCommas + reversedString[i];
	}
	}

	// Step Three, Reverse reversedStringWithCommas, and we'll have
	// the whole number with commas that we want
	var wholeNumberWithCommas = "";
	indexOfLastChar = reversedStringWithCommas.length - 1;
	for (var i = indexOfLastChar; i >= 0; i--) {
	wholeNumberWithCommas = wholeNumberWithCommas + reversedStringWithCommas[i];
	}

	// Step Four, return wholeNumberWithCommas
	return wholeNumberWithCommas;
	}

	console.log('\n');

	var testNumber = "9283749823749872398472938742983748";
	var testNumberWithCommas = getWholeNumberWithCommas(testNumber);
	console.log('Add commas to a whole number (represented as a string)');
	console.log(testNumberWithCommas);

	console.log('\n');
	console.log("****************************************************");
	console.log("****************************************************");
	console.log("****************************************************");

view raw dollars_and_cents.js hosted with ❤ by GitHub

November 22, 2019 by topherPedersen

Getting Started with Redux, Batteries Included, No Assembly Required

Playing around with Redux this morning and didn’t like the fact that you have to use npm and whatnot to compile modules to run the simple example? Seemed overly complicated, so here’s a little demo with no compilation or development server required:

	<!DOCTYPE html>
	<html>
	<head>
	<script src='https://cdnjs.cloudflare.com/ajax/libs/redux/3.7.2/redux.min.js'></script>
	</head>
	<body>

	<h1>Redux Quickstart<h1>

	<h2>Count: <span id="counter">0</span></h2>

	<button onclick="increment();">+</button>
	<button onclick="decrement();">-</button>

	<p>https://redux.js.org/introduction/getting-started</p>


	<script>

	function changeState(state = 0, action) {
	switch(action.type) {
	case 'INCREMENT':
	return state + 1;
	case 'DECREMENT':
	return state - 1;
	default:
	return state;
	}
	}

	let store = Redux.createStore(changeState);

	store.subscribe( () => {
	document.getElementById('counter').innerHTML = store.getState();
	});

	function increment() {
	store.dispatch({ type: 'INCREMENT' });
	}

	function decrement() {
	store.dispatch({ type: 'DECREMENT' });
	}

	</script>
	</body>
	</html>

view raw redux-quickstart.html hosted with ❤ by GitHub

November 19, 2019 by topherPedersen

The Competition is Irrelevant, or “Startups Die by Suicide, not Homicide”

November 17, 2019 by topherPedersen

Apache Cordova Error (cordova-plugin-whitelist not working): net::ERR_CLEARTEXT_NOT_PERMITTED

Woah now! What a doozy of an error? What gives?!?! Okay so here’s the low down: cleartext support is disabled by default in Android 9 (API Level 28). So if you are like me and your app was humming along just fine and then one day, boom! Your app quits working. This is probably the issue. Also, if you happen to be following along with the official Apache Cordova quickstart guide or documentation, I could also see running into this problem with little to no guidance regarding what to do.

Luckily, the fix is really simple thanks to a nifty plugin that will make all these awful cleartext problems go away! Navigate to your cordova directory and install cordova-plugin-cleartext:

$ cordova plugin add cordova-plugin-cleartext

$ cordova prepare

$ cordova run android

And that’s all there is to it. Hope this helps, and happy hacking my friend 🙂

November 14, 2019 by topherPedersen

internal/modules/cjs/loader.js:638 throw err; ^ Error: Cannot find module ‘asap/raw’

Trying to start a new React Native project and can’t find module asap/raw? The fix is really simple. Just run:

$ npm install

Then go ahead and run (compile) your app again, and all should be well!

November 12, 2019 by topherPedersen

Aha! How to build slick user interfaces in React Native! Or… What is the Bootstrap equivalent for React Native?

Welcome budding React Native developer. If you’re like me and come from a web development background, and are fumbling around trying to figure out how to build slick stylized user interfaces in React Native, you’ve come to the right place!

For the past two days I was stuck trying to figure out how to simply drop in some style into my React Native app like you can easily do with Bootstrap in the web development world. While I was able to find half a dozen or so libraries for adding style to <Text>, <Button>, and <Input> components, I couldn’t really find any full featured UIKits that included things like TabBars/BottomNavigationBars, and make easy slick sliding navigation between screens.

Well you’ve waited long enough, here is what I’ve discovered. What you really need are two (or three) libraries. First, you need the “React Navigation” to handle navigation:

$ npm install react-navigation

Second, you need react-navigation-material-bottom-tabs for adding in your slick sliding/swipable TabBar/BottomNavigationBar:

$ npm install react-navigation-material-bottom-tabs

Last, go ahead and play around with any of the available component libraries for React Native. There are a whole bunch to choose from for adding simple styles to your components. The scarce resource is React-Navigation + React-Navigation-Material-Bottom-Tabs. That’s where the real UI magic comes in! So far I haven’t found any alternatives that allow you to swipe between screens and integrate with the tab bar. So I hope my research helps!

Also, I wasn’t able to find this in any of the React Native books that I looked at, or on the React Native website for that matter. So big shout out to Unsure Programmer on YouTube for his excellent tutorial on implementing swipeable bottom tab navigation in React Native!

(UPDATE: 11/14/2019 => Apparently swipe-able bottom tabs aren’t really a “thing” in iOS or Android development. So the example in the video below uses a top bar which is swipe-able, and is then moved to the bottom position by setting ‘position’ to ‘bottom’. For my own personal React Native projects I plan on ditching the swipe-able tabs design I first envisioned so I can avoid having to use this hacked together work around. For example, if you choose to use this workaround you won’t be able to add a top bar since you already have a top bar that you’ve moved to the bottom, and the bottom bar cannot be moved to the top. So… I’ve gone ahead and left the video here on this post for reference in case anyone really needs this. But I personally plan on sticking with standard iOS and Android navigation, and will make use of swipe-able components where the iOS and Android frameworks offer this feature.)

And here are the Top 5 component styling libraries rated by stars on GitHub:

UPDATE 11/15/2019: With a little help from a gentleman on the react-navigation github forum, I was able to figure out how to add a swipeable (swipe enabled) bottom tab bar with a static top title bar in React Native with React Navigation. How this is accomplished is you have to create a MaterialTopTabNavigator and set its position to bottom as described above. And how we are able to also include a static top title bar, is we embed the MaterialTopTabNavigator in a standard StackNavigator which comes with the static top title bar that we want. And voila! A bit overly complicated, but that’s how you do it!

	// REFERENCE (TabNavigator with Top Header Bar): https://github.com/react-navigation/react-navigation/issues/741

	import React from 'react';
	import { Text, View } from 'react-native';
	import { createAppContainer } from 'react-navigation';
	import { createStackNavigator } from 'react-navigation-stack';
	import { createBottomTabNavigator } from 'react-navigation-tabs';
	import { createMaterialTopTabNavigator } from 'react-navigation-tabs';

	class HomeScreen extends React.Component {

	static navigationOptions = {
	title: "Home",
	};

	render() {
	return (
	<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
	<Text>Home!</Text>
	</View>
	);
	}
	}

	class SettingsScreen extends React.Component {

	static navigationOptions = {
	title: 'Settings',
	};

	render() {
	return (
	<View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
	<Text>Settings!</Text>
	</View>
	);
	}
	}

	const routeConfiguration = {
	Home: HomeScreen,
	Settings: SettingsScreen,
	};

	const tabNavigatorConfiguration = {
	tabBarPosition: 'bottom',
	swipeEnabled: true,
	};

	const myTabNavigator = createMaterialTopTabNavigator(routeConfiguration, tabNavigatorConfiguration);

	const RootStack = createStackNavigator(
	{
	Home: {
	screen: myTabNavigator,
	navigationOptions: {title: "Moolabeast"}
	}
	},
	{
	initialRouteName: 'Home',
	}
	);

	const AppContainer = createAppContainer(RootStack);

	export default class App extends React.Component {
	render() {
	return(<AppContainer/>);
	}
	}

view raw App.js hosted with ❤ by GitHub

topherpedersen.blog

A Blog About my Misadventures in Startups, Software Development, & Whatever Else I Feel Like Writing About

Uncategorized