Image for post
Image for post

As a frontend developer who works mostly in ReactJS, I’ve become a huge fan of bootstrap responsive classes. Bootstrap minimizes the amount of custom css you need to write, and makes mobile-responsiveness as easy as adding a -lg-, -md-, -sm- , tag to a class name. Bootstrap’s syntax makes it easy to understand which screen sizes are affected by css media queries. Here are the actual media query sizes:

// Extra small devices (portrait phones, less than 576px)
// No media query for `xs` since this is the default in Bootstrap

// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { ... }

// Medium devices (tablets, 768px and up)
@media (min-width: 768px) { ... }

// Large devices (desktops, 992px and up)
@media (min-width: 992px) { ... }

// Extra large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... …

Image for post
Image for post

I’ve always loved learning. I’ve worked in a genetics research lab, toured as a musician, built web apps, written poetry, cooked curries, won many a game of ping pong, and earned a lifeguard certification, all driven by my love of knowledge. I’ve always had a great social life, so I never let education become more important than emotional wellbeing. But knowledge is one of my favorite parts of life. Learning and exploring makes life exciting.

I’ve thought a lot about the learning process. In teaching, there are pedagogies, which are approaches or techniques a teacher uses to help students learn. Pedagogies often fail students — not because the theories are wrong, but because there is something missing from the perspective of the student. One missing link for most curriculums is that there is no coursework on “how to learn”. We are expected to intuit the learning process as we grow up, but not everyone does. …

Image for post
Image for post

This is a full guide to web applications for those entering the scene. This guide is for people who want a little taste of every major concept in modern web development. If you read this entire article, you’ll probably be more fluent in web development by the end. This guide assumes a basic knowledge of how the internet works. It has something for every level of software enthusiast. Wikipedia rabbit holes are encouraged. I will start with basic ideas and move to more complex concepts.

Basic software engineering concepts

Most issues in web development can be solved with basic engineering concepts. These concepts are often not prioritized enough, and ignoring them leads to apps that are difficult to debug and build upon. …

Image for post
Image for post

Javascript is a strange, beautiful language. There’s always a new secret waiting to be discovered. Today, I was trying to replicate the private class members available in other languages, and I discovered a lot about privacy in js. I figured out a new pattern for class privacy that I haven’t seen implemented elsewhere (though I have seen similar implementations with functions).

Javascript doesn’t need class privacy

Many people use ES6 Classes because they are convenient, but remember they are syntactic sugar. Under the hood you are just creating an object, albeit one with special hooks like constructor.

Part of the beauty of javascript is that you can do everything without a class. Almost everything in javascript inherits from the main Object class (via prototypal inheritance). Even primitives like String are technically wrapped in an object. …

Image for post
Image for post

Web apps often need to fetch a bunch of data from an API, but not all of that data is accessible from a single endpoint. In those cases, you need to make multiple fetches in order to gather all the necessary data.

This can get messy if you need to make a large number of requests. Suppose you want to load a user’s followers on a social media app, but you are only storing the followers as a list of user ids. You have to make separate fetches to the API endpoint for each follower.

Here’s what that looks like:

const follower_ids = [1, 2, 4, 6, 7, 50, 39, 65]…

Image for post
Image for post

Recently I’ve been experimenting with speech recognition in native mobile apps. React-native-voice is the easiest library for building a speech to text app in React Native. However, it can be difficult to configure the app correctly if you’re new to speech recognition or React Native. I am going to guide you through setting up a simple speech app in React Native.

1. Create a React Native app:

If you’ve never created a react native app before and have never used create-react-native-app, make sure you have node installed and run the following:

brew install watchman
npm install -g create-react-native-app
npm install -g react-native-cli

To generate a new react native app…

Image for post
Image for post

Divide and conquer is an excellent technique for optimizing algorithms, whether you are trying to ace technical interviews or write efficient software. It is widely used in many algorithms including Binary Search, Merge Sort and Fast Fourier Transform.

Divide and conquer means that when you are faced with a large problem, you recursively divide it into smaller versions of the same problem. When you break up a problem in this way, the complexity often decreases exponentially, leading to O(n log n) instead of O(n) time complexity.

One simple example of divide and conquer would be finding the one unique value in a group of duplicates. Imagine we have 9 balls. …

The Union find algorithm solves a huge problem in computing. In a system with many elements, where elements are connected via a path through other elements, how do we efficiently determine if two elements are connected?

Image for post
Image for post

This is commonly referred to as the dynamic connectivity problem. A brute force algorithm works for a system with few elements.

//brute force quick find class QuickFindUF {
// construct an array with N integer elements
constructor (N) { = []
for (var i = 0; i < N; i++) {[i] = i;
}// Connections between elements are tracked in the ID array.
// To check if two elements are connected, we check for an ID…

Image for post
Image for post

Algorithms are the bedrock of computer programming. Algorithms are built to handle specific data structures with a range of accepted parameters. An edge case is a problem or situation that occurs only at an extreme (maximum or minimum) operating parameter. As programmers, how can we predict these cases in order to protect our app from breaking?

I will demonstrate some common edge cases in a basic bubble sort algorithm:

// bubbleSort.jsfunction bubbleSort(array) {
var swapped;
do {
swapped = false;
for(var i = 0; i < array.length; …

Image for post
Image for post

Webpack is a great tool for delivering JS and CSS efficiently in an app build. Most frontend frameworks have built in scripts to make it easier to minify/uglify your scripts. However, if you want to deploy an app without frontend frameworks like React or Angular or if you simply want more control over your minified build, this guide will demonstrate the basics of configuring and deploying Webpack in development and production builds. Here are the steps:

1. Build a basic app file structure

Here is what your app directory will look like:

├── node_modules
├── package.json
├── .gitignore
├── public
│ ├── favicon.ico
├── src
│ ├── index.css
│ ├── index.js
├── webpack.config.js
├── index.html …


Jeremy Gottfried

Programmer, techie, foodie, musician

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store