DEV Community: Avery Berkowitz

Diving into SWIFT

Avery Berkowitz — Sat, 14 Dec 2019 21:08:57 +0000

After spending the last month working on a native application in React Native, I figured it would be interesting to dive deeper into mobile development and learn a little bit more about Apple's very own programming language: Swift. In this post, I will explore why Swift has swiftly (sorry, had to do that once) become the most popular language for iOS development and dive into some of the basics including:

Variables
Collections
Functions

What is Swift?

Swift is a programming language for the suite of apple devices first released in 2014. It is meant to be a higher-level, more modern take on Objective-C and has certainly lived up to expectations by becoming the most popular language for iOS development by 2018. It is open source and has a comprehensive, 500+ page manual available for free download here.

Why learn Swift?

Well, if you like Apple products (I shamelessly do), Swift is the way to go. As previously mentioned, it is currently the most popular programming language across apple devices and its popularity is continuing to rise. Check out Swift's position on the 2019 developers survey from stack overflow:

If you are hunting for jobs, Swift isn't so bad either. A quick search on ZipRecruiter currently shows 3336 open positions posted across the country (as of today, Dec. 14, 2019) posted within the last 30 days.

Lastly, Swift is a language that isn't too hard to pick up if you are already familiar with another language or two (I am coming from a JavaScript and Python background). Let's see some Swift basics:

Variables in Swift

Running example code: for simplicity, I recommend trying out repl.it's Swift compiler

Variables can be declared with either the var or let keyword. If the value of the variable is going to be reassigned, var should be used.
Constants (variables that will only be assigned once) should use the let keyword (like const in Javascript). Variables must be declared before use!

var changeMe = 10
let dontChangeMe = 99

If we want to log values to the console, we can use the built in print function.

print(changeMe)
// ==> 10

// are used for inline comments and we do not need to use ; to end expressions! Nice.

Most of the time, we may want to specify type when defining variables. This can be really helpful to catch bugs as your code base grows. To specify type, we add a : followed by the datatype. An error will be thrown if these variables are not assigned to the specified datatype later during code execution.

// explicit variable declaration and assignment
var firstName: String = "Avery"

Reassigning firstName to another data type later will throw an error.

Collections

Swift keeps it simple, with three major types of collections: Arrays, Sets, and Dictionaries.

Arrays are indexed collections of data, comma separated within []. They can be made immutable (into a tuple) simply be declaring them with the let keyword.

var mutableArray: [Int] = [1, 2, 3, 4]

let tuple: [String] = ["Can't", "Change", "Me"]

Notice we can explicitly set the type of both the Array and its contents after the colon.

Sets are unindexed collections. They look really similar to arrays, except if iterated over, the order will be random. These are good for storing data where order doesn't matter.

var myCats: Set<String> = ["Frank", "Hodor", "Buddy"]

Dictionaries are collections of key-value pairs. They also look pretty familiar to sets and arrays.

var me: [String: String] = ["Name": "Avery", "Age": "32", "City": "New Orleans"]

Unlike with javascript objects, we can use the data type of our choice for our keys!

Functions

We define functions in Swift with the func keyword. We must also make some decisions about what datatypes our arguments will be, as well as if our function should return a value.

Functions with no return value

func sayHello (name: String) {
  print("hello, \(name)")
}

sayHello(name: "Avery")

// ==> "Hello, Avery"

So a few things here:

We name our function sayHello and specify that it is expecting a variable with a type of String when it is invoked. Our print statement shows of Swift string interpolation as \(name) will be replaced by the function's argument when it is invoked hence the log of Hello, Avery, if you run this code in your compiler. ####Functions with return value

func sayHello (name: String) -> String {
  return "hello, \(name)"
}

print(sayHello(name: "Avery"))

Notice we add a -> (arrow) and specify that our return value will be of data type String

I hope you have enjoyed this brief intro into Swift. Clearly, I have just scratched the surface for what Swift is and can do. For more, I encourage you to check out the official docs here.

Intro to web scraping (w/ Node.js example)

Avery Berkowitz — Mon, 09 Dec 2019 06:33:39 +0000

When it comes to scraping the web, Python definitely is king. Frameworks like scrapy and beautiful soup make parsing through raw HTML (relatively) simple and can be used to build a basic scraping tool in minutes. Fortunately for javascript developers, there are also some pretty cool tools out there to accomplish much of the same when it comes to scraping the web. This post will provide a brief intro to scraping using node.js and cheerio. We will also build our very own web scraper to extract image urls from the website of our choice!

What is web scraping?

According to live internet stats, there are more than 1.7 billion websites that can be found on the internet today. It is estimated that google knows about more than 130 trillion pages (2016 estimate, most recent I could find...). Basically, there is A LOT of data out there. Web scrapers are tools that help us sift through the madness. In their simplest form, they request the html from a webpage, and quickly sort through it to find a target as specified by the programmer. This contact information, phone numbers, embedded links -- really anything you could think of that exists in that raw html request. So you might be thinking, aren't APIs built for sharing data? Yes, but many websites don't have APIs and even those that do may not want you to have easy access organized information that their pages may contain. It is up to web scrapers to do the dirty work for us.

Is web scraping legal?

Before we get into actually building a web scraper, it is important to note that some websites are not ok with you scraping them. Companies like craigslist have even been awarded millions of dollars as the result of legal action taken against other companies that scraped their sites. So it is always a good idea to check out the robots.txt file for a website before you try and scrape them. This can be found by appending robots.txt to the end most sites' domain name. Below is what this looks like for craigslist:

What you need to know here is that it is not ok to make a program (bot) that makes requests to these endpoints. You should also checkout the websites terms of use, usually found in the footer or about page. So do your homework before you get started. For the example below, we will be making requests to http://books.toscrape.com/ which is a site set up specifically to practice web scraping.

Building a simple web scraper

Prerequisites: must have node installed.

Make a new directory with the name of your choice and run:
- npm init
install dependencies. We will be using axios to make http requests and cheerio to help us parse the html that we get back.
- npm install --save cheerio axios
create a file for our scraper code:
- touch index.js
Since our scraper is going to be making an http request, we need to be able to wait for our a response. Axios returns a promise out of the box, thus we can use a .then() in which we will have access to the html we want to set. Below is the basic setup for our axios request

const axios = require('axios');
const cheerio = require('cheerio');

axios('http://books.toscrape.com/')
  .then((response) => {
    // our scraping code will go here!
  })
  .catch(() => console.log('something went wrong!'))

The html string that we want will be stored on the data property of the response from axios. We now want to load this html into the cheerio package that we downloaded earlier. Add the following to our .then() block:

const $ = cheerio.load(response.data);

Cheerio processes the html string and will allow us to select html tags, classes, id's, attributes, and tag contents almost exactly like we would be able to in jquery. Let's log the uri from the first img tag's src in the html for books.toscrape page. Add the following:

const firstUrl = $('body').find('img').attr('src')
console.log(firstUri)

Notice that we first select the body tag. The .find() method selects the very first img tag found within the body tag. Finally, the .attr() allows us to select the contents of the src attribute within that first img tag. Even for some as simple as a photo url, it definitely takes a bit of investigation, right ?!

Let's see are code in action! In our terminal, run:
node index.js Your code may take some time to run. This is because we have to wait for our axios request to be completed and it takes cheerio a little while to parse all that html. If you are connected to the internet, you should see a uri for an image printed out in your console. Here's what I got:

While this example is admittedly basic, imagine being able to create a bot that grabs all of the image URIs from a website with dynamic website every day, without you having to lift a finger! We can even have our web scraper find the next page button, giving it the ability to crawl across web pages, even jumping to new ones along the way!

In a perfect world, every website would create a beautiful, well-documented api with open access granted to anyone who wishes. In the meantime, web scrapers do the trick. Have fun trying them out on your own!

Below is the complete code for the super basic image uri scraper:

const axios = require('axios');
const cheerio = require('cheerio');

axios('http://books.toscrape.com/')
  .then((response) => {
    const $ = cheerio.load(response.data);
    const firstUrl = $('body').find('img').attr('src')
    console.log(firstUrl)

  })
  .catch(() => console.log('something went wrong!'))

From Javascript to Python

Avery Berkowitz — Sun, 01 Dec 2019 21:16:18 +0000

So you know javascript but you get this amazing offer to work at this great company in the perfect city and JS is nowhere to be found in their tech stack. Instead, they use the Python-based Django web development framework. So where do you start? In this post, I will (hopefully) lay that foundation. We will cover:

What is python?
Why learn python?
Basic(simple) datatypes
Lists
Variable declaration
Writing functions

It is expected that the reader is familiar with javascript so if that isn't the case, I recommend checking out this intro to python on Udemy where no prior programming knowledge of any kind is needed.

What is Python?

From their website: Python is an interpreted, object-oriented, high-level programming language with dynamic semantics. What?? Yeah, that's what I thought the first time I read it, so let's break that sentence down:

interpreted - just like javascript, Python is translated directly into code that a computer can read. In javascript, this is usually handled by an interpreter like Chrome's V8 engine or Node.js on our computer or server. Python has it's own interpreter that can be downloaded here.
object-oriented refers to the way a Python program is organized/structured. We use classes and objects in python to separate concerns, DRY up our code, and allow our programs to represent things in the Real World. In contrast, Javascript is a functional programming language and uses functions to accomplish many of the same organizational strategies as Python. Conceptually, there is a ton of overlap here that we could discuss for hours. Coming from javascript, just know that a Class in Python is not a special type of function like it is in Javascript.
high-level programming language - this refers to languages that are more comparable to human languages. Basically, it is easy to read, even for non-programmers. Javascript also is a high-level language though I would argue that it is not quite as easy to read compared to python. We will revisit this comparison with code examples in a bit.
dynamic semantics - basically, we can assign and reassign variables to point to different values and datatypes. We can do this in javascript as well.

Why Python?

According to Stack Overflow, it is the fastest growing programming language. Python ranked 4th in most popular technology in the 2019 Developers Survey on stack overflow.

Basic (Simple) Datatypes

Time to see what Python is all about. To try out any of the following code examples, I recommend using repl.it or you can download the python interpreter. We will be using python's built-in type() function for type-checking. This is the equivalent of javascripts typeof. To log values upon execution, we use python's console.log equivalent print()

In javascript, we just have numbers. Python breaks numbers into three categories: Ints, Floats, Complex Numbers.

# int
print(type(10))
# >>> <class 'int'>

# float
print((type(10.11)))
# >>> <class 'float'>

# complex
print((type(10 + 5j)))
# >>> <class 'complex'>

Strings and booleans are really similar to javascript. Notice that booleans are capitalized in python.

print(type("I am a string"))
# >>> <class 'str'>

# float
print((type(True)))
# >>> <class 'bool'>

None datatype. There is no null or undefined in python. Instead, we have None

print(type(None))
# >>> <class 'NoneType'>

also notice that comments are written with # in python compared to // in javascript

Lists and other complex datatypes

A list in python is pretty much exactly like an array in javascript. Values (elements) are contained within [] and comma-separated. We can also use bracket notation for access.

my_list = [1,2,3,4]

print(my_list[2])

# >>> 3

Note that elements in a list may NOT be separated with spaces and like in javascript, a list is zero-indexed.
Other complex datatypes include:

tuples: immutable lists my_tuple = (1,2,3,4)
sets: unordered (not indexed) lists my_set = {1,2,3,4}
dictionaries: equivalent to objects in javascript (key-value pairs)

my_dictionary = {
  "name": "Avery",
  "age": 32,
  "city": "New Orleans"
}

print(my_dictionary["name"])

# >>> Avery

Variable assignment

When writing variables in javascript, we have quite a few choices to make. Should we use const, let, var, or define a global variable without a keyword (never do this...)? Well in python, we don't use any keyword, ever. Convention for naming variables is to use snake case. And just like javascript, variables are case sensitive.

my_dog = "Jasmine"
x = 10
X = 100

print(my_dog)
print(x)
print(X)

# >>> Jasmine
# >>> 10
# >>> 100

Writing functions

Functions in python are written with the def (short for define) keyword. Unlike javascript, we use indentation to define the function body (no mustache brackets here!). The norm is an indentation of 4 whitespaces, but you may indent however you like as long as you are consistent.

def multiply_by_two(x):
    print(x * 2)

multiply_by_two(30)

# >>> 60

What next?

Clearly, we have just scratched the surface of Python. But as you can see, it shares many similarities with javascript. Javascript developers familiar with ES6 Class syntax will be right at home when working with python classes. Moving forward, I highly recommend Colt Steele's The Modern Python 3 bootcamp. The saying goes that learning your first language is always the hardest -- that certainly was the case from me as picking up python after javascript has been a smooth ride so far. Best of luck on your python journey!

Building a React Native app w/ expo

Avery Berkowitz — Mon, 25 Nov 2019 03:07:36 +0000

While the design principles between building mobile and web applications share many similarities, it was been difficult for many web developers to quickly make the switch. Building mobile (native) apps has long required learning a new language like Swift, Objective-C, or Java. The Expo React Native platform aims to put an end to that. Through their cli, you can quickly set up a mobile application for both iOS and android devices using javascript and react. This post will walk you through setting up a basic todo-list application. It is important that you have some experience with React, React hooks, and es6 so I suggest checking out the following links if that isn't the case:

To-do list demo

Here's what we are building:

Along the way, we will learn how to use the expo react native platform to set up our development environment and provide us with some starter code. We will also cover:

Build-in React Native components
Building a custom component
Basic Styling
Event Handling
Passing props to components

Getting started

To build our todo-list application, we will be using expo. It is a well documented platform that performs much like create-react-app. In addition, it allows us to test out our application using our own mobile device or emulators through xCode or Android Studio. For this post, I will run the application on my own mobile device as I don't want to force anyone to waste an hour downloading emulators (though this is recommended if you want to develop a larger application). Let's first set up expo and download our starter code:

Make sure you have node.js installed on your computer. You can download it here.
Download the expo app from the apple or google play store. We will use this in a moment to see our application in action!
Download the expo cli using npm install expo-cli --global in your terminal.
Run expo init todo-demo (todo-demo will be the name of our project's directory -- feel free to use any name you please).
running this command will prompt you to make a few choices.
- Under Managed Workflows select blank for your template.
- Give your app a name (can be whatever you like). Once again, I use todo-demo for my app's name.
cd todo-demo and open the contents of the directory in the text editor of your choice!
Run npm start to run the application. You will see a qr-code in the terminal and also, a tab should open automatically in your browser with the same qr-code and some more information about the build. Use your iphone or android camera to scan the code. You should be prompted to open up the application in expo. Once open, you may be greeted with a welcome screen if you are first opening expo, but you should see the following once the app is loaded:

Components in React Native

Let's open up App.js in our code editor and check out the contents. React Native is built on top of React thus we must import react into every component that we make. Unlike React, React Native comes with only a few components built in. If you check out the documentation, you will see only about 20 components that are compatible with both iOS and Android devices. Fortunately, these components are all we need to build powerful applications! Back to our App.js file, we notice that the component is importing two of these components: View and Text. View is essentially our div tag in React Native. We can give it properties like style and also events to make them interactive. Let's modify our App.js to include an input and button component so our users can type in a todo and post it to the screen.

Import Button and TextInput from react-native.
Add <TextInput /> and <Button title="Add Todo" /> below the Text component that is already in App.js.
Upon saving, you should see the new button render on your phone! The TextInput will not be visible. We can give it styling by adding an inline style prop. Add style={{borderWidth: 1, width: 300}} to the TextInput component. Now, you should see the input field when you save!

Here is what my App.js component looks like at this point:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Awesome Todo Demo</Text>
      <TextInput style={{borderWidth: 1, width: 300}}/>
      <Button title="Add Todo"/>
    </View>
  );
}

Adding Events

Clicking on our button will trigger a nice animation, but clearly, nothing happens. Just like in react, we need to tell the Button component what to do when it is pressed. This is done with an onPress prop. We could use an inline function to handle the button press, but it is best practice to create a separate function within our component to do this. We also need to add a prop to our TextInput component in order to save the input that is typed in. We will store the current input text and submitted todo's using the useState hook built into React.

Add state to our App component to store user text input and submitted todo's.
- import useState from react at top of our file.
- create a state variable and setter for user input and submitted todos's. Place these before the return statement inside of your App component:

  const [textInput, setTextInput] = useState('');
  const [todos, setTodos] = useState([]);

Notice we are initializing our textInput state as an empty string and todos as an array literal

Create a pressHandler function above the return inside of our App component.

  const pressHandler = () => {
    setTodos([textInput, ...todos]);
  };

We use the spread operator to extract all of the previously saved todos and add the new todo stored in textInput to the end of the todos array.

Create a typingHandler function to update the textInput state when the user types into the text input component:

  const typingHandler = (value) => {
    setTextInput(value);
  }

Add props to our TextInput and Button components to fire these functions whenever text is inputed or the button is pressed.
Add onChangeText={typingHandler} value={textInput} props to the TextInput component.
Add onPress={pressHandler} to the Button component. We add the value prop to our TextInput in order to store the current value that has been typed into the input area. It is automatically sent to our typingHandler function whenever text is added.

Here is what our App.js looks like so far:

import React, { useState } from 'react';
import { 
   StyleSheet,
   Text,
   View,
   TextInput,
   Button
  } from 'react-native';

export default function App() {

  const [textInput, setTextInput] = useState('');
  const [todos, setTodos] = useState([]);

  const pressHandler = () => {
    setTodos([textInput, ...todos]);
  };

  const typingHandler = (value) => {
    setTextInput(value);
  }

  return (
    <View style={styles.container}>
      <Text>Awesome Todo Demo</Text>
      <TextInput 
        onChangeText={typingHandler}
        value={textInput}
        style={{borderWidth: 1, width: 300}}
      />
      <Button title="Add Todo"/>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Creating our own `Todo` component

In order to display our submitted todo's, we need to create a new component! Normally, we would create a new file to do this but for the sake of this tutorial, we can do so under our App component.

Create a Todo component at the bottom of App.js:

const Todo = props => (
  <View 
    style={{ backgroundColor: "#eaeaea", width: 300, margin: 5 }}>
    <Text>{props.text}</Text>
  </View>
);

Import FlatList component from react. This will be used to display our list. This component will allow our saved todos to be rendered to the screen. It will also allow us to scroll if there are more todos than space allows. Scrolling would otherwise not be enabled.
Add FlatList component below our submit button

      <FlatList
        data={todos}
        renderItem={todo => <Todo text={todo.item}/>}
      />

Notice how we pass our todos prop to the data prop within the FlatList component. The renderItem prop acts like map in javascript and accepts a function that is called for each todo in the todos array. Notice that all of the text for each todo is located on the item property. Confusing, yes, but it is where we have to point to to access our todo text.

Add marginTop: 50 to the container object inside of styles. This is necessary because adding the FlatList pushes all of our components to the top of the phone screen.

At this point, we should have a working App! Go ahead and add some todo's and see it in action!

You may notice some yellow warning messages at the bottom of your phone. These appear because we are not giving each todo component a unique key. For now, just dismiss the messages but know that you should be passing a unique key to each component when you do this in the future. Since todo's would probably be stored in some sort of database, this key would usually be available.

Here is the final code for App.js:

import React, { useState } from 'react';
import { 
   StyleSheet,
   Text,
   View,
   TextInput,
   Button,
   FlatList
  } from 'react-native';

export default function App() {

  const [textInput, setTextInput] = useState('');
  const [todos, setTodos] = useState([]);

  const pressHandler = () => {
    setTodos([textInput, ...todos]);
  };

  const typingHandler = (value) => {
    setTextInput(value);
  }

  return (
    <View style={styles.container}>
      <Text>Awesome Todo Demo</Text>
      <TextInput
        onChangeText={typingHandler}
        value={textInput}
        style={{ borderWidth: 1, width: 300 }}
      />
      <Button
        onPress={pressHandler}
        title="Add Todo"
      />
      <FlatList
        data={todos}
        renderItem={todo => <Todo text={todo.item}/>}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 50,
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

const Todo = props => (
  <View 
    style={{ backgroundColor: "#eaeaea", width: 300, margin: 5 }}>
    <Text>{props.text}</Text>
  </View>
);

Building a React app with Next.js

Avery Berkowitz — Mon, 18 Nov 2019 06:14:20 +0000

Getting started with React is pretty easy. Install it, run create-react-app and poof! You have an app -- well, the client, at least. Afterwards, it's up to you, the developer, to choose a file structure, add routing, build out a server, configure the webpack, choose a styling library -- the list goes on. This makes sense - React is a Javascript library. For those looking for a bit more direction, Next.js to the rescue. This post will explain why Next.js has become a leading React framework and provide a step-by-step guide to set up a basic app.

What is Next.js?

Next.js is a server-side rendering React framework. This means that the app code is compiled on the server-side and sent to the client only once it has fully rendered. The difference isn't very noticeable in a web browser unless we look under the hood. Let's use the google chrome tools to inspect a normal React app and contrast it with a Next app.

React

whatsapp web

This is all you get for the most popular message app in the world! The rest of the application will be rendered by the browser depending on user input and interaction.

Next.js

Nike

...and there is much more that I didn't screenshot as I think I have made my point -- there is way more when we inspect a Next.js app. So, you are probably wondering why on earth we would ever want that? Let's talk about that now:

Why Next.js?

Search Engine Optimization (SEO). In order for our websites/apps to be found on the internet, it is important to make them easy to find by common search engines like google. Without getting into too much boring detail about SEO, just know that one of the main factors is including keywords in your app's HTML so it can be easily found by bots and web-scrapers. In the whatsapp web HTML above, you can see that there isn't much to go off of. Clearly, we see the opposite with the Nike code. Try and find the INDEX_PAGE_META_KEYWORDS near the bottom of the picture above. These are used to help identify this page as relevant in internet searches.

Next.js also makes some of the harder architecture decisions for you, particularly when setting up your file structure and routing. Routing, in particular, requires quite a bit of set-up including the installation of additional npm packages like react-router. Fortunately, Next.js comes with this capability out of the box, with far less code necessary for implementation. We will see this in action in the next section.

Getting started with Next.js

In this next section, we will be building a basic Hello World application with a few different routes to demonstrate some of the decisions that Next.js makes for you, the developer.

Make a project directory
Create a package.json

$ mkdir next-demo
$ cd next-demo
$ npm init -y

-y flag automatically runs npm init, skipping all the questions you would normally be asked during setup. It is totally optional.

Install react, react-dom, and next

$ npm install --save react react-dom next

In contrast to create-react-app, you still have a little work to do if you want to actually see anything in the browser. If you try to start up your app now, you will get an error message. .

We need to add a few more folders and files for us to be able to see our app in action.

Create a pages directory and index.js file

$ mkdir pages
$ touch pages/index.js

Next.js automatically looks inside the pages directory for the index.js file when rendering. It is a requirement for you to set up your app. Let's add a simple React component to our index.js file in order for us to be able to actually see something when we run our app in our local environment.

Add a React component to index.js

const App = () => (
    <div>
        <h1>Hello World</h1>
    </div>
);

export default App;

Add a start script to package.json
- add "start": "next" inside of scripts in package.json. your scripts should look something like this:

Now, start up your app with npm start! It will take a moment for your app to compile, but you should see a link display in your terminal for localhost:3000. Here's what you should see:

Cool! We have a working app! Without stopping your server, try changing the text for your <h1>. Notice how your app is automatically re-rendered upon saving. Pretty easy to set up, right?!

Basic routing

One of my big gripes with react is that setting up routing can be a bit of a pain. In order to do any routing at all in create-react-app, for example, we have to install a package like react-router. Next.js handles this for us as "routes" are created by simply naming our files within the pages directory. Our index.js file defaults as our / route. All others will be the exact same as the file name.

Create a new route by creating home.js within our pages directory:

$touch pages/home.js

Add a basic functional component to home.js:

const Home = () => (
    <div>
        <h1>Home</h1>
    </div>
);

export default Home;

Now if we visit localhost:3000/home, we should see:

In order for us to link these two routes that we have created, we need to add a Link component to each of our pages. This will allow us to jump back and forth via client side routing, which is optimal for speed and creating single page applications (what React was made for)! This can be done by adding import Link from "next/link".

Modify your index.js by adding a link to your home.js page:

import Link from "next/link";

const App = () => (
    <div>
        <h1>Hello World</h1>
        <Link href="/home">
          <a>Home Page</a>
        </Link>
    </div>
);

export default App;

Notice that we add an href property to our Link component specifying the route we want. We also need to pass in a child component to Link. I used an <a> tag here but a button, div, or most other text-friendly tags would also work just fine.

Update home.js by adding a route back to the index.js page:

import Link from "next/link";

const Home = () => (
    <div>
        <h1>Home</h1>
        <Link href="/">
          <div>Go back to index</div>
        </Link>
    </div>
);

export default Home;

Refresh your browser and you should now be able to jump back and forth from your index and home pages with ease!

Summing up

Getting started with Next.js is quite painless and fast. Routing can be quickly set up from the starter code but we have to be careful with our initial setup as folder structure is opinionated. To see more of what Next.js can do, I suggest checking out the docs. I don't say this often, but they really are well written!

ES6 Map -- more than just another Object

Avery Berkowitz — Sun, 10 Nov 2019 02:45:06 +0000

ECMAScript 2015, better known as ES6, was many widely-adopted features including const and let variable declaration, array and object de-structuring, class keyword, and arrow functions (just to name a few). ES6 also includes a new datatype: the Map. While not yet as widely used as some of the other syntaxes previously mentioned, Map is basically a souped up javascript object with some pretty cool features. This post covers the basics of creating and using ES6 map and also compares it to the more familiar javascript object along the way.

What is a map?

Map is a datatype similar to an object (ok, technically it is an instance of an object) where data is stored in key-value pairs. Unlike traditional objects, keys can be any datatype (keys must be strings in objects). This is pretty nifty as we can now use numbers, booleans, and even objects as keys!

Creating our first Map

We make a map using the new keyword. Let's check out the difference between declaring a map vs. a plain old object:

// map
const firstMap = new Map();
// object
const normalObject = {};

In order to add key-value pairs, map comes with a set method that takes a key and value as its arguments:

// map
firstMap.set(1,'my key is a number!');
firstMap.set(this, 'using this as a key! WHATT??');
firstMap.set('boat', 'I can use strings too!');
//object
normalObject['1'] = 'my key must be a string...';
normalObject['this'] = 'my key is still a string (:';

This is particularly useful in front-end development because we can assign properties to object keys like DOM elements!

Working With Maps

Let's look at some of the most common map methods and their object equivalent:

property look-up

// map
firstMap.get(this) // => 'using this as a key! WHATT??'
// object
normalObject['1'] // => 'my key must be a string...'

delete key-value pairs

// map
firstMap.delete(this) // => true
// object
delete normalObject['1'] // doesn't return anything

Notice that Map returns a boolean confirmation upon delete --pretty useful when you aren't sure the key exists in the first place!

iterating through all values (let's log all values)

// map
for(const [key, value] of firstMap){
  console.log(value);
}
// object
Object.keys(normalObject).forEach( key => {
  console.log(normalObject[key];
});

counting key-value pairs:

// map
firstMap.size // => 2
// object
Object.keys(normalObject).length

checking if key exists

// map
firstMap.has(5) // => false
// object
normalObject
console.log('key' in normalObject) // => false

With objects, 'key' in normalObject will return true if 'key' exists on the prototype. maps do not allow prototypal inheritance, this ridding us from the 'where is the property actually from' puzzle.

Conclusion

By implementing some subtle yet powerful changes, ES6 Map allows us to save key-value pairs in memory in a more logical, legible way. Operations like lookup and iteration are done with clear and concise code - a definite step up from the verbose and somewhat confusing object syntax. In web development, Map is particularly useful when we want to associate properties with complex datatypes such as objects. Some drawbacks include loss of performance when adding tons of properties (see this graph) and lack of compatibility with JSON (at least, for now). What is clear is that the brains behind javascript are actively trying to improve upon one of language's most fundamental components (objects, of course). Map is a step in the right direction and it will be interesting to see what ECMAScript 2020 has in store.

Introduction to Linked Lists w/ ES6

Avery Berkowitz — Mon, 21 Oct 2019 03:27:41 +0000

I've spent the past month or so working through coding challenges on sites like leetcode and codewars and have noticed that problems involving Linked Lists are quite popular. In fact, 6 of the top 25 most popular interview questions from leetcode involve link lists in some form. In this post, we will cover the basics of singly and doubly linked lists, and look at a simple implementation utilizing the popular Class keyword in Javascript ES6.

What is a Linked List?

A linked list is a linear data structure where each piece of data, referred to as a node, also contains a reference to the location of another node in memory. In plain english, each element of the list knows the location of the next. Linked lists are more common than you might think: music apps incorporate linked lists in song playlists, sites like ticketmaster use them to keep track of a virtual line of customers (ever seen the "you have 5 minutes remaining to complete your purchase"?).

Link lists come in two forms -- Singly and Doubly-linked lists. Let's look at a visual and code example of each:

Singly-linked-list

The beginning of the list is referred to as the head. Each subsequent node keeps a reference only to the location of the next. The node at the end of the list is called the tail. It does not contain any references to any other node.

ES6 allows us to use the class keyword to construct a basic singly-linked-list.

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
}

We create our list by executing const SLL = new SinglyLinkedList() which creates a javascript object that has a head, tail and optional length property. In order to create the nodes, it is common to write another constructor function:

class Node {
  constructor(val) {
    this.val = val;
    this.next = null;
  }
}

In order to add values to our linked list, we can add an instance method to our SinglyLinkedList class. Let's create an unshift method, which will add a node to the beginning of the list:

class SinglyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
  unshift(val) {
    const node = new Node(val)
    //if no head
    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else {
      node.next = this.head;
      this.head = node;
    }
    this.length++;
    return this;
  }
}

Notice that in order to add a node to the beginning of our list, we first must create the node by invoking new Node(), passing in a value. This creates an object which inherits from our Node class. We must then make sure that we set the head and the tail to our new node if the node being created is the first in our list. If it is not the first, we only need to update the head, pointing the new node's next property to that of the old head. Last, we increment our count property to keep track of the total number of nodes in our list and optionally return are update list (represented by this). Unlike javascript arrays, adding to the front of our linked list takes constant (O(1)) time thus demonstrating one of the main benefits of using a linked list when adding to the back of line is desirable. Arrays, in contrast, unshift in linear (O(n)) time.

Doubly-Linked-Lists

Notice how each node in between the head and tail keep track of the nodes in the position immediately before and after. We only need to make a few modifications from our singly-linked-list code from before:

class DoublyLinkedList {
  constructor() {
    this.head = null;
    this.tail = null;
    this.length = 0;
  }
  unshift(val) {
    const node = new Node(val)
    //if no head
    if (!this.head) {
      this.head = node;
      this.tail = node;
    } else {
      this.head.previous = node;
      node.next = this.head;
      this.head = node;
    }
    this.length++;
    return this;
  }
}
//Node class constructor
class Node {
  constructor(val) {
    this.val = val;
    this.previous = null;
    this.next = null;
  }
}

Notice that when unshifting in our doubly-linked-list, we have to set the old head's previous property to point to the new node before updating the head property of the linked list to the new node. While this may seem like a bit more code, a doubly linked list can be traversed both forwards and backwards where as a singly linked list can only be traversed from the head. We use a doubly-linked-list type structure daily as we navigate back and forth in our browser with the forwards and backwards arrows.

Summing up

This post really just scratches the surface of what these data structures look like and how they function. I highly recommend checking out visualgo's animation on this any many other methods if you want to learn more. When you are ready to take on some interview questions, try out the following from leetcode's top 100 interview questions:
1.Add two numbers
2.Remove Nth Node From End of List
3.Merge two sorted lists
4.Merge k sorted lists
5.Swap nodes in pairs
6.Reverse nodes in k group

Intro to React Hooks

Avery Berkowitz — Mon, 14 Oct 2019 03:21:43 +0000

Most web developers would probably agree that the the React Javascript Library is pretty simple to implement. Just imagine the component you want, whip up some JSX, render and BOOM! You've got an app! Prior to this year, however, it was necessary for you to decide what type of component you wanted to build before you started coding. If you wanted to make a component to simply display data, like a card or list item, you would make a functional component. If you wanted to make a smart, reactive component that listens to client input and keeps track of certain properties (State), you make a stateful class component. With the release of React 16.8 (Feb 2019), you can now stick with just functional components with React hooks. Hooks allow us to give functional components state without having to create class components. This blog will compare a class component and hooked functional component that both create the same component. Before we see hooks in action, let's take a look at an example of each:

functional component

const listItem = props => <li>Print my {props.name}</li>;

this component takes props as an argument and returns an <li> tag that displays the name property on props. Nice and simple.

class component with state

class BankAccount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      balance: 10
    };
  }
  render() {
    return <h3>Your Balance is: ${this.state.balance} </h3>;
  }
}

Right a way, we see that class components require quite a bit more than their functional counterparts. We must use the ES6 class keyword and extend from React.Component and call super(props) in our constructor in order to access some special methods we will need later on in order to make our component keep track of state. We must also explicitly define a render method, which will actually create our component when a new instance is instantiated. Notice from our functional component example, no render is required. React takes care of the rendering behind the scene, saving us code.

This component represents a bank account with a balance that is stored with a state object. If we wanted to add money to our balance, we could create an instance method to update the state using the built in method setState method that comes out of the box with class components in react. Below is the updated bank account with a deposit method:

class BankAccount extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      balance: 10
    };

    this.deposit = amount => {
      this.setState({
        balance: this.state.balance + amount
      });
    };
  }
  render() {
    return <h3>Your Balance is: ${this.state.balance} </h3>;
  }
}

Calling deposit(100) updates the balance property and the render method is automatically called thus an updated balance of $110 would be added to the DOM. Cool stuff right? Well we can accomplish the same thing in less code by using a functional component with a hook. Check out our updated BankAccount below:

import { useState } from 'react';

const BankAccount = () => {
  let [balance, setBalance] = useState(10);
  const deposit = (amount) => {
    setBalance(balance + amount);
  }
  return <h3>Your Balance is: ${balance} </h3>;
}

While we do need to import a useState method from react, our code is significantly reduced. useState creates an array with two elements: the first we assign to balance. This is the exact same as this.state.balance from the class example. The second element we assign to setBalance. This acts in the same way as setState from our class example. Nice that we can name our setter something that actually fits! We are also saved from writing a render method as react takes care of it for us. Nice! We have successfully hooked our functional component.

With our refactoring of the BankAccount component, we have just begun to scratch the surface of what hooks can do for us. We can also:

Write lifecycle methods in functional components using useEffect
Create multiple states within a single function
Avoid the confusing this keyword
Share non-visual logic

When learning react, a developer can focus on just one component syntax to create dynamic and complex components with less code. Impressive for a library that is already one of the most popular around.

Making Your First Get Request to Youtube Search API

Avery Berkowitz — Mon, 07 Oct 2019 02:47:43 +0000

When I was first introduced to APIs (Application programming interfaces), I was thrilled. How amazing is it that we can harness the power of one or many other applications within our own!? Then I tried to make my first request... Let's just say I spent the next few hours learning about every 400something error there is. So how do we actually get an API to talk back nicely? This article will walk you through making a simple GET request to the Youtube Search API using javascript and a bit of JQuery. Let's get to it!

Setting up your environment:

Open up a new pen in CodePen

Add Jquery to your .html file. We will need Jquery to make our request and to update a few HTML elements that we will add shorty.

<script src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>

If you have something against CodePen, feel free to create your files on your local machine and edit them in your favorite text editor.

We need a few more HTML elements in order to display the data we will get back from the youtube API. Add the following to your .html file:
```
 <iframe src=""></iframe>
 <h3>Video Title</h3>
 <p class="description">Video Description<p>
```

At this point, your page should look like this:

Get your API key. This is necessary in order to make requests to the Youtube Data API. Requests without this key will respond with one of those nasty 400 codes. Navigate to the google developers console. If you don't have an account, take a moment to set one up (It's Free!) . Once you are logged in, you will need to:
- Create a new project
- Enable Youtube Data API
- Create Credentials
- Copy Your API Key

Here's a quick video if you want to see how I got my key for this tutorial:

Making a GET request

We've got our HTML template, we have our API key, now let's write some javascript. We will be using Ajax -- a feature built into JQuery in order to make our request. Let's write a function that will make a GET request to the youtube API. In this request we will be passing along some information to YouTube telling them that we want them to send us back some information about a video. With that information, we will be able to successfully embed the video in our page!

Our request function:

Place the following into your .js file:

    function getVideo() {
      $.ajax({
        type: 'GET',
        url: 'https://www.googleapis.com/youtube/v3/search',
        data: {
            key: 'PASTE YOUR API KEY HERE',
            q: "cats",
            part: 'snippet',
            maxResults: 1,
            type: 'video',
            videoEmbeddable: true,
        },
        success: function(data){
            embedVideo(data)
        },
        error: function(response){
            console.log("Request Failed");
        }
      });
    }

Our getVideo() function calls a jquery method ajax. This message takes an object with some special properties to help us request and process our data. Let's break down the properties inside this ajax call.

Our first property specifies that we are making a GET request.
We then set our path to the youtube data API as a string.
Next, we define a data property and create an object to contain all the necessary parameters that youtube needs. A key and part property are required by the API. Paste in your newly created API key (in quotes) and make sure you specify "snippet" as your part. This will ensure that we receive an object with all the info necessary to embed our video. I have added a few additional properties to make sure we get back viable data. In order to get back just one video, I have set maxResults to 1. type and videoEmbeddable ensure that I get back the data for a video that is actually able to be embedded into a site. Feel free to checkout the youtube search documentation to see all the options you can put in the data object.
success will call a function with the data we receive back from our GET request. the ajax method will magically wait for us to receive the data before calling the function. In just a moment, we will write out embedVideo function inside, so just hang tight!
Lastly, we assign error to a function that will log the server response if it is unsuccessful.

Using the Data Received from our Request

Time to see if we are getting anything back! Add the following code to process a successful request and render some data to the DOM.
Add the following to your .js file:

function embedVideo(data) {
    $('iframe').attr('src', 'https://www.youtube.com/embed/' + data.items[0].id.videoId)
    $('h3').text(data.items[0].snippet.title)
    $('.description').text(data.items[0].snippet.description)
}

data is returned to us by our ajax message as an array. In the first line inside of our function, we use jquery to select our iframe element and update the src attribute. In order to embed a video, you must provide 'https://www.youtube.com/embed/' + the unique videoId that we can access within the data array from our request. Since we only are receiving one video, we access the 0 index with data.items[0] we then access the id property and finally, the videoId property. Quite the drilling, but expect this when working with most API's. The next two lines employ similar drilling down into the data array to retrieve the video's title and description, updating the h3 and p text on the DOM.

Finishing up!

Double check to make sure you have pasted in your API key to the getVideo function!!
Let's make our request! We must call our getVideo function. Add the following function invocation at the bottom of your .js file:

getVideo();

At this point, here's what your app should look like:

Try changing the q string inside your ajax request and watch the app update to a new video! Pretty cool, right? Check out the app on CodePen if you want to see all of the code together. I have taken out the youtube data API key so make sure you paste yours in so you can actually see some data displayed!

If you made it this far, hopefully you feel a little less lost making requests to APIs. Until next time!

Avery

Link to my CodePen for this post if you want to fork it

Javascript Class Syntax

Avery Berkowitz — Mon, 30 Sep 2019 05:23:34 +0000

Of all the changes adopted in ECMAScript 2015 (ES6), none may be quite as controversial as the introduction of the class keyword. A quick google search yields mixed messages -- many are avidly for or against this it. Some feel that javascript is giving in to the pressure from other popular classical programming languages like Python and Java. Controversy aside, the class keyword hides complexity and allows even the inexperienced developer to quickly leverage the power of javascript's prototype inheritance style of object oriented programming with clear, concise code. This article will introduce javascript class syntax and creation of static class methods.

Creating "Classes"

The javascript class is really just a handy type of function. When invoked with the new keyword, it:

Creates an object
Points the newly recreated object to the class constructor's prototype object
Adds properties and methods, if specified, to object
Returns newly created object

Let's see class in action:

class Nfl {
    constructor(){
        this.sport = "American Football";
        this.level = "Professional";
        this.salaryCap = 188200000;
    }
    raiseSalaryCap(newCap){
        this.salaryCap = newCap;
    }
}

Calling new Nfl() will create and return a new object with access to the Nfl class properties, as well as the raiseSalaryCap method. this will conveniently refer to the specific instance of Nfl. Prior to ES6, it was necessary to attach methods directly to the constructors prototype in order for them to be inherited by instances. class takes care of it for us!

Subclassing

When creating subclasses, we can extend from any other class, instead of explicitly pointing our subclass to the constructor's prototype.

class Team extends Nfl {
    constructor(name){
        super();
        this.name = name;
    }
}

Any new Team() will still have access to Nfl's properties and methods via its prototype. This connection is created through the use of the extend keyword and super. We don't have to explicitly set it. Nice right?

Static Methods

Ok, so how do we create a method on a class that we might not want a subclass to know about? Say we want our Nfl class to have a helper function that prints out the names of all teams given as arguments-- something that would NOT be relevant to any team instance. To do that, we can use the static keyword. Let's modify our Nfl constructor function:

class Nfl {
    constructor(){
        this.sport = "American Football";
        this.level = "Professional";
        this.salaryCap = 188200000;
    }
    raiseSalaryCap(newCap){
        this.salaryCap = newCap;
    }
    static printTeams(...teams){
        teams.forEach( team => {console.log(team.name)});
    }
}

We can invoke this static method by referencing the Nfl object.

//create some teams
const saints = new Team("Saints");
const cowboys = new Team("Cowboys");

//print team names to console
Nfl.printTeams(saints, cowboys)
//Logs:
  Saints
  Cowboys

Attempting to call the printTeams method on a Team instance will throw an error as the static method is not able to be referenced via prototypal inheritance.

saints.printTeams(saints, cowboys)
//throws error, saints.printTeams is not a function

In short, the class keyword and features allows anyone utilize prototypal inheritance even with little understanding of what is going on under the hood. While this may drive the more traditional javascript developer nuts, it is a powerful tool that mimics classical OOP in simple and concise syntax. With the static keyword, you can share only the methods you want with instances and subclass instances. I guess you can say they are finally putting the Java in Javascript.

DEV Community: Avery Berkowitz

Diving into SWIFT

What is Swift?

Why learn Swift?

Variables in Swift

Running example code: for simplicity, I recommend trying out repl.it's Swift compiler

Collections

Functions

Functions with no return value

Intro to web scraping (w/ Node.js example)

What is web scraping?

Is web scraping legal?

Building a simple web scraper

From Javascript to Python

What is Python?

Why Python?

Basic (Simple) Datatypes

Lists and other complex datatypes

Variable assignment

Writing functions

What next?

Building a React Native app w/ expo

To-do list demo

Getting started

Components in React Native

Adding Events

Creating our own Todo component

Building a React app with Next.js

What is Next.js?

React

Next.js

Why Next.js?

Getting started with Next.js

Basic routing

Summing up

ES6 Map -- more than just another Object

What is a map?

Creating our first Map

Working With Maps

Conclusion

Introduction to Linked Lists w/ ES6

What is a Linked List?

Singly-linked-list

Doubly-Linked-Lists

Summing up

Intro to React Hooks

functional component

class component with state

Making Your First Get Request to Youtube Search API

Setting up your environment:

Making a GET request

Our request function:

Using the Data Received from our Request

Finishing up!

Javascript Class Syntax

Creating "Classes"

Subclassing

Static Methods

Creating our own `Todo` component