November 27, 2019 by topherPedersen

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

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

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

November 10, 2019 by topherPedersen

How to Load an Image Component in React Native

Greetings intrepid JavaScript developer(s)! Quick post here regarding how to load images in React Native. I personally have been following along with the official React Native Quickstart guide teaching myself React Native recently, and have found that some of the examples do not work when running the apps using the React Native CLI as opposed to running them using the Expo CLI. So, here’s a code snippet on how to load an image component in React Native =>

	// NOTE: In the same directory as your App.js file,
	// create a new folder called "assets", and place
	// your image file (.jpg) in that directory.

	import React, { Component } from 'react';
	import { Text, View, Image } from 'react-native';

	class App extends Component {

	constructor(props) {
	super(props);
	}

	render() {
	return (
	<View>
	<Text>RENDER AN IMAGE...</Text>
	<Image source={ require('./assets/supersweetimage.jpg') } />
	</View>
	);
	}
	}

	export default App;

view raw App.js hosted with ❤ by GitHub

November 9, 2019 by topherPedersen

Unable to load script. Make sure you’re either running a Metro server (run ‘react-native start’) or that your bundle ‘index.android.bundle’ is packaged correctly for release.

Hello there dear internet friend and React-Native developer. If you happen to have been stuck on this awful error message for hours, I’ve got the solution for you! Well… at least I have the solution for me, hehe.

Okay, so my problem ended up being that the version of NodeJS I was running on my Windows Machine, Node 13, was not compatible with Metro server. Therefore Metro server would continually crash over and over again. For hours I wasn’t even able to get to hello, world. Ouch! Maybe you happen to be running into the same thing?

Anyway, here’s the solution. Downgrade from version 13 of NodeJS down to version 10. Don’t bother with Version 12, it will still crash. What you want is version 10.

Go to ‘Add or remove programs’
Search for Node.js, and Uninstall
Visit nodejs.org and download version 10 of NodeJS in .msi format
Install NodeJS version 10
Close your Command Prompt, start over, and voila! Simply follow the standard React Native CLI Quickstart Guide and everything should work as expected.

October 31, 2019 by topherPedersen

Can You Use JavaScript localStorage as a Database for Your Apache Cordova or PhoneGap Application?

Over the past few months I’ve been programming primarily using Apache Cordova, and currently happen to be starting a new project which will require a bit of data persistence. I know that I can probably ship the production version of the app extremely quickly if I go with simple JavaScript localStorage for the in-app database. However, there are some downsides to this, and that’s what I’d like to talk about in this blog post.

Before digging into this topic tonight, I knew that data stored using localStorage may not be as persistent as other options. But what I didn’t know, was how persistent is it? Will a user clearing his or her web browser cache cause my app to lose data? What about clearing cached data for all applications under settings? How about specifically clearing cached data for my app specifically? Or clearing all data for my app specifically? Well now after a little experimentation and research, I think I have a pretty good answer!

Clearing “browsing data” on Chrome for Android will not cause your Cordova app to lose localStorage data.
Clearing “cached data” for all apps under Settings on Android will not cause your Cordova to lose localStorage data either.
Selecting the “clear cache” option for your app specifically will not cause your Cordova app to lose data.
SELECTING THE “CLEAR DATA” OPTION FOR YOUR APP SPECIFICALLY WILL CAUSE YOUR CORDOVA APP TO LOSE DATA.

So there you have it. There are the results of my non-scientific investigation into JavaScript localStorage and Apache Cordova. Your Cordova app’s data should be safe using localStorage as long as users do not go out of their way and select the “clear data” option for your app under Settings>Storage>Internal-Shared-Storage>Apps>YourCordovaApp. If you happen to be developing an Apache Cordova or PhoneGap application for Android, choosing JavaScript localStorage for your in-app database should be fine.

With that being said… JavaScript localStorage IS NOT A VIABLE OPTION FOR iOS APPLICATIONS. I’ll repeat that again… JavaScript localStorage IS NOT SUITABLE FOR iOS APPLICATION DEVELOPMENT WITH APACHE CORDOVA OR PHONEGAP.

Saved that abrupt zinger for the end huh?!? Yup, there’s the plot twist. Turns out, iOS will clear out your localStorage whenever it feels like it (apparently whenever memory is low). So if it isn’t a big deal if your localStorage gets cleared out, then you can go ahead and use it for iOS application development as well. But if data persistence is a really important feature of your app, make sure to stay clear of JavaScript localStorage when developing iOS applications with Apache Cordova or PhoneGap.

Things were looking good there for a moment, right? JavaScript localStorage for the win! For most use cases localStorage is still probably okay for iOS. However, for this latest untitled side project data persistence is going to be extremely important. So for Version 0, it looks like I’m just going to be rolling out on Android. Will have to tackle iOS another day using something a little more sound like the cordova-sqlite-storage plugin. Maybe that will make for an appropriate follow up post; // the end

topherpedersen.blog

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