yZ Finance Mobile

A React Native Application

React-Native mobile app for my Yahoo-finance web scraper.

/2019.07.27-yzFinance-1.gif

Scan to open

With an Android phone, you can scan this QR code with your Expo mobile App to load this project immediately.
/2019.07.27-yzFinance-expo-qr-code.png

Visit this app at it’s home on expo.io (https://expo.io/@fossnik/yz-finance-mobile)


Features

[Read More]

Navigation in React Native

Notes on using React Navigation

/Screenshot_2019-07-24_12-07-38-react-navigation.png

React Native navigation is largely analogous to the concept of routing in React.js Web development, although it does work a bit differently, being that URLs are not an inherent part of the mobile application experience.

Some (older) materials recommend wix react native navigation for implementing RN navigation. This was preferred by many developers because the official React Navigation was once notoriously buggy. However, the consensus now seems to be that those issues have mostly been ironed out.

[Read More]

Mastering GraphQL

Efficient Query and Manipulation Language

/logos/graph-ql.png

GraphQL

GraphQL is a powerful data query and manipulation language, created by Facebook. Essentially GraphQL is an alternative to REST. GraphQL exceeds REpresentational State Transfer because it facilitates data queries which manipulate the shape of returned data from a web api. It allows web API-driven applications to be structured in a much more flexible and efficient way.

[Read More]

React Native - Learn once, Write everywhere

or: How I learned to Stop Worrying and Love the 'book (Facebook)

React Native is a technology that makes it possible to create apps that work on multiple platforms, such as Android and iOS.

/react-native-android-ios.png

Strengths

  • Created by Facebook.
  • Write one app that works on both iOS and Android.
  • Groundswell of support. Find solutions to common problems easily.
  • Open source - broad ecosystem & robust community
  • React Native is used internally by Facebook, so we can rest assured that it will continue to be well-supported in the future.

Weaknesses

  • Minor differences between the Android and iOS platforms may require redress.
  • Inherently asynchronous.
  • Many native device features require 3rd party packages.
  • Fast moving target - still in active development, monthly new versions frequently include breaking changes.
  • React Native acts as a bridge between JS and native platform code, so it’s not as efficient as native apps written with Java (Android), or Swift / Objective-C (iOS).

What is a React Native app?

Although based on the React framework of web-development fame, React Native apps are NOT web-apps or websites. This is because the UI components are expressed by native platform code. React Native allows us to build something similar to a React.js web app, but essentially replaces the React’s HTML DOM with native UI components.

npx --package react-native-cli react-native
[Read More]

React Native

A return to gigabyte-guzzling development

Now that RecipeTrader is mostly fleshed out and working, I set my sights once again on React Native. I had to re-download a lot of system images, Android Studio, Expo emulators and such, which I had freed up for space. The downloading alone makes this dev-setup a very protracted process.

/Screenshot_2019-07-10_16-16-35-reactnative.png

It’s also extremely rough on space. Here I am, once again precariously close to maxing out the meager 48GiB EXT4 volume which has been my home for years now.

/Screenshot_2019-07-11_10-06-25-gparted.png

Additionally, while emulating phone hardware with Android Studio, I only can expect about 90 minutes of battery life, significantly less than my typical 180 minutes.

[Read More]

Recipe Trader

Culinary Social Network

https://recipetrader-demo.herokuapp.com/

I am very excited to announce RecipeTrader - my newest React.js demo website. RecipeTrader is a social network for sharing culinary recipes. It features user registration, login, and profile creation - all securely authenticated by JSON Web Token. Users can post recipes, and even like and comment on other users’ submissions.

This full-stack project employs a MongoDB backend, Express.js API, and a React.js frontend with Redux.js state management, and routes through React-router. It is deployed via a Heroku CI/CD pipeline, streamlined with Webpack, and accessible at recipetrader-demo.herokuapp.com

[Read More]

Elegant Ruby

Ruby lends itself to some syntactically elegant solutions, like in this program that swaps diagonally opposed elements in a matrix.

def swapDiagonals(matrix)
  matrix.each_with_index.map do | row, row_index |
    row.each_with_index.map do | element, col_index |
      if col_index == row_index
        row[row.length - row_index - 1]
      elsif  col_index == row.length - row_index - 1
        row[row_index]
      else
        element
      end
    end
  end
end

input:
 [[1,2,3], 
 [4,5,6], 
 [7,8,9]]

output:
[[3,2,1], 
 [4,5,6], 
 [9,8,7]]
[Read More]

Functional and Recursive Ruby

This program returns Squares. From a functional perspective, the use of a variable for the ‘range_object’ is technically a side-effect, but I include it here for sake of clarity.

Range objects are a good example of the kind syntactic sugar that I sometimes felt was lacking in JavaScript.

class Squares
  def initialize(n)
    @number = n
  end

  def square_of_sum
    def factorial(n)
      n == 1 ? 1 : n + factorial(n - 1)
    end

    factorial(@number) ** 2
  end

  def sum_of_squares
    range_object = 1..@number
    range_object.reduce { | a, b | a + b ** 2 }
  end

  def difference
    square_of_sum - sum_of_squares
  end
end

This Week in Dev

JavaScript Word-Search Puzzle

Revisiting JavaScript this week - I think my solution to the wordsearch puzzle grid problem is particularly elegant. Check out my Solution here

I also tweeted about an elegant recursive algorithm I devised to generate integer sequences in JavaScript (which is utilized in the word search challenge) Some languages (Ruby, Haskell) use syntax like [1..10] to represent an integer sequence, but JavaScript doesn’t have a built-in way to do this, so I created my own.

function intSequence(start, end, n = start, arr = []) {
    return n === end ? arr.concat(n)
        : intSequence(start, end, start < end ? n + 1 : n - 1, arr.concat(n));
}
[Read More]

As We May Think

Ideas of Vannevar Bush in practice

Referencing your entire knowledge-base

Vannevar Bush in his seminal essay As We May Think

One of my very favorite strategies is prototyping all of my solutions with unit tests, and having all of my solutions locally, because with a simple text search I can easily reference code I have used in the past.

Refer to past work for convenience

Languages like Java can be frustrating Even the most quotidian operations are often difficult to remember. For example, I KNOW I have converted an int array to an integer list in the past, dozens or hundreds of times. Especially with Java, I never expect anything to work exactly as anticipated, so I reference past work, and put it to the test (with unit testing)

How the heck did I do that?

When your past work is indexed, you can instantly scour reams of code to derive solutions from existing content. That’s working smart.