DEV Community: Max DeMaio

Intro to React - JSX and Elements

Max DeMaio — Wed, 23 Feb 2022 19:23:07 +0000

React is a modern JavaScript library for building interactive user interfaces. In this blog post, we'll get a brief introduction and how to get started with React.

Demos:

Create React App demo

Why React?

Let’s look at an Instagram post I’ve made. The moment I “like” a post the status changes. The heart becomes red, the number of likes changes, and we can immediately see this on the web page.

Instagram has to do the changes by updating the DOM tree of the page and re-rendering the page in the browser. The application also has to show other Instagrammers that I’ve liked this post if they’re looking at it too.

As of 2019, it was recorded that Instagram had over 1 billion users (Revista Economică, 57). As of the date of this blog post, that number has probably soared to over 2 billion users. Considering the size of Instagram, it'd be a challenge to ensure efficient and consistent DOM manipulation. Luckily, Facebook had already created a frontend library called React specialized in this.

What is React?

To make it short and snappy, React.js is a JavaScript library. It allows developers to create user interfaces (UIs) and make the development of UI components easy and modular. It was created by Jordan Walke, a software developer at Facebook and it was open sourced to the world by Facebook and Instagram.

React Features

Components/JSX: components are the building blocks of React applications. Think of HTML templates but we write them using a special syntax called JSX. After compilation, JSX expressions become JavaScript function calls and evaluate to JavaScript objects. Components can be simple or stateful.

// Simple component that will display "Yo {props.name}!"
class YoMessage extends React.Component {
  render() {
    return <div>Yo {this.props.name}!</div>;
  }
}

ReactDOM.render(
  <YoMessage name="MaxMayo" />,
  document.getElementById('yo-example')
);

// Classic timer stateful component
class Timer extends React.Component {
 constructor(props) {
 super(props);
 this.state = { seconds: 0 };
  }

 tick() {
 this.setState(state => ({
      seconds: state.seconds + 1
    }));
  }

 componentDidMount() {
 this.interval = setInterval(() => this.tick(), 1000);
  }

Virtual DOM: Instead of rebuilding the entire DOM tree for updates, React makes use of the virtual DOM. The virtual DOM is a lightweight copy of the actual DOM. React will update exactly which virtual DOM objects have changed through diffing.
Unidirectional Data Flow: React has a waterfall like concept of transferring data to other parts of the application. State is passed to the view and child components. Actions are triggered by the view and can update state.
SEO/Performance: you can even run React on the server for SEO, performance, code sharing and flexibility.

Getting Started

We can use create-react-app to bootstrap a React application. The only prerequisite is that we need Node.js version 10+. We can check the Node version in our system with the command node -v.

Off to the races!

npx create-react-app my-app
cd my-app
npm start

Here’s a quick explanation of the folder structure generated by create-react-app:

Files	Purpose
node_modules/	All app dependencies live in this folder
public/	This folder contains the public static assets of the application
public/index.html	This is the first page that gets loaded when we run the application
src/	All application related files/folders are created in this folder
src/index.js	The entry point of the application
package.json	Contains the dependencies of the React application

If we observe the index.js file we can see the following:

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

ReactDOM.render() renders an element or component to the virtual DOM. The first parameter specifies what needs to be rendered. The second argument specifies where to render. A smaller example without components would look like this:

ReactDOM.render(<h1>Yo, world!</h1>, document.getElementById('root'));

Babel compiles JSX down to React.createElement() calls. So these examples are identical:

const myElement = <h1 className="yo">Yo, world!</h1>;

const myElement = React.createElement('h1', { className: 'yo' }, 'Yo, world!');

Unlike browser DOM elements, React elements are cheap to create because they’re plain JavaScript objects. Our React.render() would render these React elements since Babel compiles JSX down to React.createElement() calls. Then, React.createElement() creates objects aka React elements that generally look like this:

// Simplified structure
const myElement = {
  type: 'h1',
  props: {
    className: 'yo',
    children: 'Yo, world!',
  },
};

These React elements are representations of what we’d want to see on the screen. Note, elements make up components. React reads these objects and uses them to make the DOM and update it.

Conclusion

In this blog post we learned about what React is and how to start a React application. In future blog posts I’ll dive into the main concepts of React with helpful demos. Stay tuned!

Works Cited

FUCIU, Mircea. “The Rise Of Instagram – Evolution, Statistics, Advantages And Disatvantages.” Lucian Blaga University of Sibiu, Romania, Revista Economică.
https://reactjs.org/

Spring Basics - Annotation and Java Based Configuration

Max DeMaio — Fri, 18 Feb 2022 03:54:43 +0000

In this blog post we’ll learn about annotation and Java based configuration. Goodbye XML configuration! We’ll dive into the ways to autowire dependencies with annotations and their pros and cons. Finally, I’ll give an example using both annotation and Java based configuration.

Demos:

Annotation Based Configuration

All my previous blog posts on Spring have shown how to use XML configuration. But Spring also supports annotation based configuration. This is the preferable way to configure beans in real projects alongside Java based configuration.

All types of configurations can coexist in the same project. Annotation based configuration reduces the amount of configuration required. Let’s jump into how we can create an application with annotation based configuration!

Annotation based configuration supports autowiring. We autowire with the annotation @Autowired. Autowiring injects dependencies based on bean type. This is exactly like byType mode from XML configuration. Also, auto scanning enables Spring to create beans of the required classes without using explicit <bean> definitions in the XML file:

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
       xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xmlns:context="http://www.springframework.org/schema/context"
       xsi:schemaLocation="http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd
       http://www.springframework.org/schema/context http://www.springframework.org/schema/context/spring-context.xsd">

    <!--
        <context:component-scan> can also do what
        <context:annotation-config> does in addition to auto scanning.
        with just annotation config you'd still need bean definitions
    -->
    <context:component-scan base-package="com.maxdemaio.demo" />

</beans>

Instead of <bean> definitions in the XML file, we annotate our dependencies with the @Component annotation. This way, Spring can figure out which beans to create during its component/auto scan.

Now, how would we inject our dependencies into the proper classes? We do this by autowiring with @Autowired. There are three ways to do so: autowiring by constructor, autowiring the setter method, and autowiring properties/fields.

Autowiring on Constructor

@Service
public class BlogPostService {
    private PostGenerator gen;
    private int wordCount;

    @Autowired
    public BlogPostService(@Qualifier("wittyPostGenerator") PostGenerator gen, @Value("100") int wordCount) {
        this.gen = gen;
        this.wordCount = wordCount;
        System.out.println("parameterized constructor");
    }

    public int getwordCount() {
        return wordCount;
    }

    public void setwordCount(int wordCount) {
        this.wordCount = wordCount;
    }

    public PostGenerator getgen() {
        return gen;
    }

    public void setgen(PostGenerator gen) {
        this.gen = gen;
    }

    public void generatepost() {
        System.out.println(gen.generatePost(wordCount));
    }
}

Let’s step through what’s actually happening here:

The @Service annotation is like the @Component annotation but it’s lexically more specific. This lets Spring know this class relates to the service layer/business logic. This is like adding a <bean> definition in the XML configuration. Besides being used on the service layer, there isn’t a special use for this.
@Autowired performs autowiring by type for all the arguments in the constructor.
@Qualifier specifies which bean I want to use. This is because we have two classes that extend the PostGenerator interface (see demos provided at beginning). Since autowiring with annotations is by type, Spring will throw an error if it’s unsure of which bean to use.
- Side note: In enterprise environments, instead of @Qualifier you can conditionally autowire dependencies with @ConditionalOnProperty based on environment variables! This way, we could create a stub class and a V1 class and choose which to use based on a value in the environment. This is known as feature flagging/toggling/switching.
@Value tells Spring to inject a primitive value. Autowiring isn’t for primitive values so we use this instead.

The benefit of constructor-based injection is that you can declare your injected fields as final. The fields will be initiated during class instantiation. This is good for immutable and required dependencies. Constructor-based injection is recommended for required dependencies allowing them to be immutable and preventing them to be null.

Autowiring on Setter Method

@Service
public class BlogPostService {
    private PostGenerator gen;

    @Value("120")
    private int wordCount;

    public BlogPostService() {
        System.out.println("default constructor");
    }

    public int getwordCount() {
        return wordCount;
    }

    public void setwordCount(int wordCount) {
        this.wordCount = wordCount;
    }

    public PostGenerator getgen() {
        return gen;
    }

    @Autowired
    @Qualifier("coolPostGenerator")
    public void setgen(PostGenerator gen) {
        this.gen = gen;
    }

    public void generatepost() {
        System.out.println(gen.generatePost(wordCount));
    }
}

In setter based injection, we annotate the setter methods with @Autowired. Spring will call these setter methods once the Bean is instantiated with the default constructor or a no-argument static factory method in order to inject the dependencies. We can use this for optional dependencies.

Autowiring on Property/Field

@Service
public class BlogPostService {
    @Autowired
    @Qualifier("coolPostGenerator")
    private PostGenerator gen;

    @Value("100")
    private int wordCount;

    public int getwordCount() {
        return wordCount;
    }

    public void setwordCount(int wordCount) {
        this.wordCount = wordCount;
    }

    public PostGenerator getgen() {
        return gen;
    }

    public void setgen(PostGenerator gen) {
        this.gen = gen;
    }

    public void generatepost() {
        System.out.println(gen.generatePost(wordCount));
    }
}

This way of dependency injection should be avoided. In fact, most static analysis tools will even show this method isn’t recommended by the Spring team. But I wanted to show it as an example.

It’s hard to inject mock objects when our BlogPostService is under test without a Spring container. With a Spring container you could use @InjectMocks. The only way to inject these fields outside the Spring container (since we aren’t using setters or constructors) is by reflection. Although elegant because we avoid having excess code, there are drawbacks.

Java Based Configuration

We saw the above examples of annotation based configuration with the existence of an XML file to enable Spring auto scanning. We don't need an XML file when we use Java based configurations!

The @Configuration annotation tells the Spring container that that Java class contains bean definitions. The @Bean annotation defines beans within the class annotated with @Configuration.

@Configuration
@ComponentScan("com.maxdemaio.demo")
public class AppConfig {
}

public class Application {

    public static void main(String[] args) {
        ApplicationContext context = new AnnotationConfigApplicationContext(AppConfig.class);
        BlogPostService srv = (BlogPostService) context.getBean("blogPostService");
        srv.generatepost();
    }

}

Conclusion

We’ve learned about how to autowire using annotations on constructors, setters, and properties. Also, we can ditch the XML configuration since we now have Java based configuration. We can follow the design philosophies of Spring by using these features of the framework.

Works Cited

Spring Basics - Dependency Injection

Max DeMaio — Tue, 01 Feb 2022 19:34:42 +0000

In this blog post we’ll learn about Dependency Injection (DI) and how to use it. We can do this using constructor and setter injection. Also, I recommend checking out this YouTube video by Ryan Schachte if it’s still available.

DI demos:

In my first Spring basics blog post we explored how to create Spring beans with XML configuration.

<bean id="blogPostService" class="com.maxdemaio.service.BlogPostService" />

Using Spring with this config would be similar as the below Java code. An instance is created and initialized with the default values using the default constructor. But, if we use Spring with the above config, our code will be loosely coupled!

BlogPostService blogPostService = new BlogPostService();

We can also initialize beans with specific values in Spring with DI. There are actually two ways we can do this. We can use constructor injection and setter injection.

Constructor Injection

Primitive Values

Let’s consider this BlogPostService class to understand constructor injection:

package com.maxdemaio.service;
public class BlogPostService {
    private int wordCount;
    public BlogPostService(int wordCount) {
                this.wordCount = wordCount;
        }
    // ...
}

Now, to define a bean in our XML configuration to initialize values we can write the following:

<bean id="blogPostService" class="com.maxdemaio.service.BlogPostService" >
      <constructor-arg value="8"/>
</bean>

We'll need a parameterized constructor and a constructor-arg in the bean definition. Also, if we have more than one parameter in our constructor, we can pass constructor-arg tags in the same order.

We can also use a name attribute in our constructor-arg tag to specify constructor parameters. This avoids having to pass arguments in order. We can also specify the type attribute to avoid order to an extent as well. Spring will convert the String value to the appropriate type if compatible. If it cannot convert the value we’ll get an exception.

Non-Primitive Values

So far we’ve seen how we can do constructor injection with primitive data types. Now we’ll take a look at how to do so with non-primitive data types. For example, let’s take our BlogPostService class. We'll make it dependent upon a PostGenerator object type to create a “cool” or “witty” blog post.

package com.maxdemaio.demo;

public interface PostGenerator {
    public String generatePost(int wordCount);
}

package com.maxdemaio.demo;

public class CoolPostGenerator implements PostGenerator {

    @Override
    public String generatePost(int wordCount) {
        return "Generated cool post with " + wordCount + " words";
    }
}

package com.maxdemaio.demo;

public class WittyPostGenerator implements PostGenerator {

    @Override
    public String generatePost(int wordCount) {
        return "Generated witty post with " + wordCount + " words";
    }
}

package com.maxdemaio.service;

public class BlogPostService {

    private PostGenerator gen;
    private int wordCount;

    public BlogPostService(PostGenerator gen, int wordCount) {
        System.out.println("Parameterized Constructor");
        this.gen = gen;
        this.wordCount = wordCount;
    }

        public void generatePost() {
       System.out.println(gen.generatePost(wordCount));
    }
}

We can see that the PostGenerator property of the BlogPostService class has not been initialized with any values. We can let Spring take care of the configuration for us.

How in the world would we configure this to generate us a “cool” or “witty” blog post? Let’s look at an example where we generate a “cool” blog post using the ref attribute in our constructor-arg tag.

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="<http://www.springframework.org/schema/beans>"
       xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>"
       xsi:schemaLocation="<http://www.springframework.org/schema/beans>
    <http://www.springframework.org/schema/beans/spring-beans.xsd>">

    <bean id="blogPostService" class="com.maxdemaio.demo.BlogPostService">
        <constructor-arg name="gen" ref="coolPostGenerator"/>
        <constructor-arg name="wordCount" value="150"/>
    </bean>

    <bean id="coolPostGenerator" class="com.maxdemaio.demo.CoolPostGenerator"/>

    <bean id="wittyPostGenerator" class="com.maxdemaio.demo.WittyPostGenerator"/>

</beans>

Setter Injection

For Setter Injection, Spring invokes the setter methods of a class to initialize the properties after invoking its default constructor.

To start, let’s look at how we can inject primitive values into a class’s properties with setter injection. We'll use the property tag within the XML configuration.

package com.maxdemaio.demo;

public class BlogPostService {

    private PostGenerator gen;
    private int wordCount;

    public BlogPostService() {}

    public int getwordCount() {
        return wordCount;
    }

    public void setwordCount(int wordCount) {
        this.wordCount = wordCount;
    }

    public PostGenerator getgen() {
        return gen;
    }

    public void setgen(PostGenerator gen) {
        this.gen = gen;
    }

    public void generatePost() {
        System.out.println(gen.generatePost(wordCount));
    }
}

<?xml version="1.0" encoding="UTF-8"?>

<beans xmlns="<http://www.springframework.org/schema/beans>"
       xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>"
       xsi:schemaLocation="<http://www.springframework.org/schema/beans>
    <http://www.springframework.org/schema/beans/spring-beans.xsd>">

    <bean id="blogPostService" class="com.maxdemaio.demo.BlogPostService">
        <property name="gen" ref="wittyPostGenerator"/>
        <property name="wordCount" value="500"/>
    </bean>

    <bean id="coolPostGenerator" class="com.maxdemaio.demo.CoolPostGenerator"/>

    <bean id="wittyPostGenerator" class="com.maxdemaio.demo.WittyPostGenerator"/>

</beans>

For setter injection, we need a default constructor and setter methods of dependent properties. Spring will use the default constructor to create a bean. Then, Spring invokes the setter method of the respective property. This is based on the name attribute to initialize the values. Also, property tags are mandatory in the bean definition.

Collection Values

We’ve learning how to inject primitive and non-primitive values with the value and ref attributes. To inject collections, Spring supports Java Collection types such as List, Set, Map, and Properties.

package com.maxdemaio.demo;

import java.util.List;

public class BlogPostService {
    private List<PostGenerator> gens;

    public void setGens(List<PostGenerator> gens) {
        this.gens = gens;
    }

    public List<PostGenerator> getGens() {
        return gens;
    }
}

<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="<http://www.springframework.org/schema/beans>"
       xmlns:xsi="<http://www.w3.org/2001/XMLSchema-instance>"
       xsi:schemaLocation="<http://www.springframework.org/schema/beans>
    <http://www.springframework.org/schema/beans/spring-beans.xsd>">

    <bean id="blogPostService" class="com.maxdemaio.demo.BlogPostService">
        <property name="gens">
            <list>
                <ref bean="coolPostGenerator" />
                <ref bean="wittyPostGenerator" />
            </list>
        </property>
    </bean>

    <bean id="coolPostGenerator" class="com.maxdemaio.demo.CoolPostGenerator" />
    <bean id="wittyPostGenerator" class="com.maxdemaio.demo.WittyPostGenerator" />

</beans>

package com.maxdemaio.demo;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

public class Client {

    public static void main(String[] args) {
        ApplicationContext context = new ClassPathXmlApplicationContext("config.xml");
        BlogPostService srv = (BlogPostService) context.getBean("blogPostService");
        System.out.println(srv.getGens());
    }

}

Conclusion

We’ve learned how to use constructor and setter injection in Spring. We can do so with primitive, non-primitive, or collection values. To conclude, we’ll take a look at the difference between the two and when you’d want to use one over the other:

Constructor Injection	Setter Injection
Dependency injection via parameterized constructor	Dependency Injection via setter methods after invoking the default constructor
Need parameterized constructor in the POJO class	Need default constructor and setter methods in the POJO class
tag is used in configuration file	tag is used in configuration file
tag ref attribute is used to provide dependency for Object type	tag ref attribute is used to provide dependency for Object type
Good for mandatory dependencies and immutable dependencies. Concise (pass several parameters once).	Optional/changeable dependencies. Avoids circular dependencies and cycles.

Spring Basics - Inversion of Control

Max DeMaio — Mon, 31 Jan 2022 18:15:53 +0000

Spring is an open source Java application development framework that supports all types of Java applications such as: enterprise applications, web applications, cloud based applications, and more. Spring applications are simple, easily testable, reusable, and maintainable.

Spring modules are loosely coupled. Developers can pick and choose modules as needed to build applications.

Demos for this post:

Introduction to the Spring Framework

To start, I'll give a brief introduction to the features and modules of the Spring framework.

Feature	Description
Lightweight	Spring JARs are small. A basic Spring app would be lesser than 10MB. They can be deployed with an embedded Tomcat server and don't require heavy-weight application servers.
Non-Invasive	Spring apps are developed using POJOs. There's no need to extend or implement any pre-defined classes.
Loosely Coupled	Spring uses Dependency Injection and Aspect Oriented Programming to facilitate loosely coupled code.
Inversion of Control (IoC)	IoC takes care of the application objects’ life cycles along with their dependencies.
Spring Container	Spring container takes care of object creation, initialization, and managing object dependencies.
Aspect Oriented Programming (AOP)	Promotes separation of supporting functions (concerns) such as logging, transaction, and security from the core business logic of the application.

Spring 5.x has the following key module groups:

Core Container: core modules that provide key features of the Spring framework.
Data Access/Integration: These modules support JDBC and ORM data access
Web: these modules provide support for web applications.
Others: Spring also provides other modules such as Test for testing Spring applications.

Spring Inversion of Control

Usually, it's the developer's responsibility to create the dependent application objects using the new operator. Hence any change in the application dependencies requires code changes. This results in tight coupling and more complexity as the application grows bigger.

Inversion of Control (IoC) creates a more loosely coupled application. IoC inverts the responsibility of the application objects’ creation, initialization, and destruction from the application to a third-party aka the framework. The third party will take care of application object management and dependencies. This makes an application easy to maintain, test, and reuse. The Spring framework provides IoC implementation using dependency injection (DI).

Objects managed by Spring are called beans. Thanks to Spring, we don’t need to create objects ourselves. Dependency injection allows us to describe how objects should be created through configuration.

DI is a software design pattern that:

Helps to create loosely coupled application architecture facilitating re-usability and easy testing.
Separates responsibility by keeping code and configuration apart. Dependencies can be easily modified using configuration without changing the code.
Allows us to replace actual objects with mock objects for testing. This improves testability by writing simple JUnit tests that use mock objects.

As mentioned before, the core container module of the Spring framework provides IoC using dependency injection. The Spring container knows which objects to create and when to create them through the additional details that we provide in our application called configuration metadata.

There are two types of containers Spring provides: BeanFactory and ApplicationContext (interfaces). The ApplicationContext is the preferred container for development and inherits from BeanFactory. ApplicationContext provides added features to support enterprise services such as internationalization, validation, etc.

// org.springframework.context.support.ClassPathXmlApplicationContext
// is the most common implementation of ApplicationContext
ApplicationContext context = new ClassPathXmlApplicationContext("config.xml");
Object obj = context.getBean("exampleService");

BeanFactory	ApplicationContext
No annotation based DI support.	Annotation based DI support.
No enterprise service support.	Enterprise service support: validations, internationalization, etc.
Supports Lazy Loading by default	Supports Eager Loading by default. Beans are instantiated during load time.

Spring allows multiple methods to configure the metadata into our POJOs:

XML configuration
Annotation based configuration
Java based configuration

Conclusion

To conclude, I will introduce a small IoC example with XML based configuration.

package com.maxdemaio.service;

public class BlogPostService {
 public void display() {
        System.out.println("Hi, Welcome to the Blog Post Generation application");
    }
}

<!-- Example object in a config.xml file -->
<!--
1. <beans> is the root element & also includes namespace declarations

2. Bean definition

3. id attribute represents a unique bean identifier

4. class attribute represents a fully qualified class name
-->
<?xml version="1.0" encoding="UTF-8"?>
<beans xmlns="http://www.springframework.org/schema/beans"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
 xsi:schemaLocation="http://www.springframework.org/schema/beans
    http://www.springframework.org/schema/beans/spring-beans.xsd">

    <bean id="blogPostService" class="com.maxdemaio.service.BlogPostService" />

</beans>

package com.maxdemaio.client;

import org.springframework.context.ApplicationContext;
import org.springframework.context.support.ClassPathXmlApplicationContext;

import com.maxdemaio.service.BlogPostService;

public class Client {

 public static void main(String[] args) {

 // ApplicationContext container is instantiated by loading the configuration
 // from config.xml available in application classpath
 ApplicationContext context = new ClassPathXmlApplicationContext("config.xml");

 // Access bean with id “blogPostService"
 // Typecast from Object type to blogPostService type
 BlogPostService blogPostService = (BlogPostService) context.getBean("blogPostService");
 // Invoke display method of blogPostService to display greeting on console
        blogPostService.display();
    }

}

Rather than using the new keyword, we configured a managed Spring bean to take its place. This allows us to have loosely coupled code!

Works Cited

https://docs.spring.io/spring-framework/docs/5.0.0.RC2/spring-framework-reference/overview.html

Next.js and Docker

Max DeMaio — Mon, 31 Jan 2022 18:05:32 +0000

In this blog post I'm introducing a dangerously good application development duo, Next.js and Docker. To start, I'll briefly go over both Next.js and Docker. After, I'll explain how you can combine these two technologies. Let's get this party docker started!

Next.js

Next.js is an open-source React framework built on top of Node.js. Next.js leverages a wide array of functionalities such as hybrid static & server rendering, TypeScript support, smart bundling, route pre-fetching, and more. In fact, my website was built using Next.js!

Curious about giving it a try? Next.js has a step-by-step tutorial on building your first app. To get a Next.js app up and running in seconds you can use npx create-next-app@latest or yarn create next-app. Also, if you get stuck you can visit the Create Next App documentation. There are even official Next.js templates you can snag.

Docker

Docker is an open platform for developing, shipping, and running apps. Before Docker, you had to locally set up your app and all of its dependencies according to your machine. Docker eliminates this issue by packaging and running apps in loosely isolated environments called containers.

Docker also has a great overview on their website.

Docker Command Starter Kit

Here are the most useful commands I found to get you up and running with Docker. For more detailed information on each command and all other commands you can visit Docker's documentation.

docker login - log in to local registry or Docker Hub
docker pull IMAGE - pulls an image from Docker Hub (default registry), but you can specify a different one
docker push IMAGE - pushes an image to Docker Hub (default registry), but you can specify different one
docker images - gives you a list of images on the host machine
docker run IMAGE - creates a Docker container of the specified Docker image and starts it in the current terminal
docker stop CONTAINER - stops a given container
docker start CONTAINER - starts a given container
docker ps - status of all running containers
docker ps -a - status of all running and not running containers
docker logs CONTAINER - gives the logs of a given container
docker exec [OPTIONS] CONTAINER COMMAND [ARG...] - runs a command in a running container
docker network ls - see all available Docker networks
docker network create example-network - creates a network
docker build -t IMAGE:tag dockerfile-location - builds an image from the specified Dockerfile and will then tag it
docker rm CONTAINER - deletes a container
docker rmi image - deletes an image
docker version - provides docker version information

Next.js and Docker

Let's say you've crafted yourself a performant, stunning, and interactive Next.js application.

Once you create a Dockerfile for your Next.js application, you can use it to create a Docker image and then a Docker container. To create an image, we use docker build and then to create a container we use docker run. Take for example this Dockerfile I use to create an image of my website which should apply to most Next.js apps:

# Building image
# docker build . -t example-image-name

# Install dependencies only when needed
FROM node:14-alpine AS deps
# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
RUN apk add --no-cache libc6-compat
WORKDIR /app
COPY package.json yarn.lock ./
RUN yarn install --frozen-lockfile

# Rebuild the source code only when needed
FROM node:14-alpine AS builder
WORKDIR /app
COPY . .
COPY --from=deps /app/node_modules ./node_modules
RUN yarn build

# Production image, copy all the files and run next
FROM node:14-alpine AS runner
WORKDIR /app

ENV NODE_ENV production

RUN addgroup -g 1001 -S nodejs
RUN adduser -S nextjs -u 1001

# You only need to copy next.config.js if you are NOT using the default configuration
# COPY --from=builder /app/next.config.js ./
COPY --from=builder /app/public ./public
COPY --from=builder --chown=nextjs:nodejs /app/.next ./.next
COPY --from=builder /app/node_modules ./node_modules
COPY --from=builder /app/package.json ./package.json

USER nextjs

EXPOSE 3000

ENV PORT 3000

# Next.js collects completely anonymous telemetry data about general usage.
# Learn more here: https://nextjs.org/telemetry
# Uncomment the following line in case you want to disable telemetry.
# ENV NEXT_TELEMETRY_DISABLED 1

CMD ["node_modules/.bin/next", "start"]

You can see how the Dockerfile's instructions create layers to form the resulting image.

Consider this set of instructions where each instruction creates one layer:

FROM creates a layer from the node:14-alpine Docker image
RUN adds missing shared libraries to our image
WORKDIR sets the working directory for any subsequent instructions
COPY adds our dependency blueprints (package.json/yarn.lock) from the Docker client’s current directory
RUN installs all of our Next.js application's dependencies with yarn

Let's use this Dockerfile to get our Next.js app running on a container. Place the Dockerfile in the outermost directory of your Next.js application. Now, we can run docker build . -t example-image-name in that outermost directory of the Next.js application to forge an image! Finally with the command docker run -p3000:3000 example-image-name you can create a container. After using the docker run command you can actually view your app running on the container. With your image and container you are poised to deploy to any Docker hosting platform.

Conclusion

To summarize, we've learned about what Next.js and Docker are and how you can use them together. Next.js is a leading frontend framework with a phenomenal developer experience. Docker is an open platform for development and ops best practices. Docker also has collaboration features such as docker push and docker pull to run images on any machine. If you're looking to share and deploy beautiful frontend applications, these two technologies definitely are the life of the party.

Spring Data Transfer Objects

Max DeMaio — Sun, 30 Jan 2022 19:45:29 +0000

Data Transfer Objects (DTOs) carry data between processes. Each call to an application is expensive so we should try to keep them to a minimum. DTOs help solve this pesky problem! DTOs need to be serializable to go across remote connections. Usually, an assembler is used on the server side to transfer data between DTOs and any domain objects.

Overview

DTO design patterns are frequently used in enterprise applications. Why? This design pattern allows us to pass data with multiple attributes in one shot from client to server, avoiding multiple calls to an application. Also, we avoid exposing the implementation details of our domain objects pulled directly from the repository layer (direct object-relational mapping from our databases to Java objects).

Examples

When writing RESTful APIs we can even analyze an incoming request and stop it in its tracks by validating its request body data against our DTOs. This saves precious I/O since you can identify validation errors before you even get past the controller layer. I've created an example application where I demonstrate applying validation constraints to a DTO class which I will detail here.

public class PersonDTO {

    @NotNull
    @Size(min=2, max=30)
    private String name;

    @NotNull
    @Min(value = 18)
    private Integer age;

    public String getName() {
        return this.name;
    }

    public void setName(String name) {
        this.name = name;
    }

    public Integer getAge() {
        return age;
    }

    public void setAge(Integer age) {
        this.age = age;
    }

    public String toString() {
        return "Person(Name: " + this.name + ", Age: " + this.age + ")";
    }
}

You can see we've flagged this class’s attributes with a few standard validation annotations. Now, let's make an example controller to demonstrate how we can stop a request in its tracks before traveling to our service layer if there are any mistakes.

@RestController
public class ExampleController {
    @PostMapping("/")
    public String checkPersonInfo(@Valid @RequestBody PersonDTO personDTO) {
        return "Valid person DTO!";
    }
}

In the example application's repository, I've also included two Postman API calls. If we were to make a POST request with invalid age or name data, the end user receives a 400 error. However, if all fields of the request body of the POST request are valid, we receive a nice message "Valid person DTO!". In a real application, catching these types of errors early is extremely important.

Conclusion

We now know what DTOs are used for and why they're very helpful in enterprise applications. This design pattern is very common and allows for efficient API architecture when coupled with validation. In short: validate, validate, validate!

Tailwind, React, and TypeScript - How to Get Started

Max DeMaio — Sun, 30 Jan 2022 19:25:11 +0000

Want to construct your frontend with Tailwind, React, and Typescript? Look no further; here we will discuss everything that you'll need to get setup.

React and Typescript setup

Before we get started, "Tailwind CSS requires Node.js 12.13.0 or higher" (tailwindcss). Make sure you have Node.js installed and the correct version by running node --version in your command line. If you don't have it installed, feel free to visit Node.js's official website.

Now let's get down to business, creating a new React project with TypeScript using Create React App. The way we can bootstrap a new React project with TypeScript according to the Create React App documentation is npx create-react-app my-app --template typescript.

Install Tailwind CSS with Create React App

Your React + TypeScript project has now been made and all that's left is to install Tailwind CSS. To do so, we have to follow some steps according to Tailwind CSS's Create React App installation documentation.

Install Tailwind CSS via npm

npm install -D tailwindcss@npm:@tailwindcss/postcss7-compat postcss@^7 autoprefixer@^9

Install and configure CRACO

npm install @craco/craco

Once CRACO has finished installing, edit your package.json to use craco for all scripts except eject.

{
    // ...
    "scripts": {
     "start": "craco start",
     "build": "craco build",
     "test": "craco test",
      "eject": "react-scripts eject"
    },
}

Create a craco.config.js file at the root of your React project, adding in the tailwindcss and autoprefixer PostCSS plugins.

// craco.config.js
module.exports = {
  style: {
    postcss: {
      plugins: [
        require('tailwindcss'),
        require('autoprefixer'),
      ],
    },
  },
}

Create your configuration file

npx tailwindcss-cli@latest init

Include Tailwind in your CSS

Change the index.css file located in the src directory in the root of your React project.

/* ./src/index.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

Conclusion

You're all set! You've successfully configured a React project to use TypeScript and Tailwind CSS. I hope this blog post helped you get your new frontend set up to create beautiful UI and UX.

Works Cited

“Install Tailwind CSS with Create React App” tailwindcss, https://tailwindcss.com/docs/guides/create-react-app.
“Adding TypeScript” Create React App, https://create-react-app.dev/docs/adding-typescript/.

Syntax - The Science of Sentences

Max DeMaio — Sat, 07 Aug 2021 00:00:00 +0000

The science of sentences and the relationships between words. Syntax is broadly understood as the study of word order and how words are put together into larger units.

Overview

Most core questions in the scientific domain of linguistics are in these three areas alone (Kumar, 00:00:54 - 00:01:30):

Structure
Acquisition
Change

Syntax focuses on the structure of language and the observation of how words are ordered.

Let’s take the sentence Max likes Pokémon. Looking at each word’s categorical features, the subject of the sentence is Max, the verb is like, and the object is Pokémon. There is a grammatical relationship between the constituents. However, these grammatical relationships are only important within sentences. For example, Max (a noun) by itself isn’t a subject, but when placed in our example sentence it is. You can also note the fact that in English the word sequence is subject, verb, and then object (SVO).

Word sequence

For all the languages that exist on Planet Earth there is a commonality; sentences have some sequence of word order. We can classify this into how subjects, objects, and verbs interact (edge case: ergative languages can have ambiguous subjects and have agents instead). Another cool note is some languages can even have null subjects. Let’s check out all the combinations using Python:

# Get all syntax sequence permutations and print
from itertools import permutations

perm = permutations(['S', 'O', 'V'])
for i in list(perm):
    print(i)


('s', 'o', 'v')
('s', 'v', 'o')
('o', 's', 'v')
('o', 'v', 's')
('v', 's', 'o')
('v', 'o', 's')

Examples :

Modern English (SVO): Pat hit Alex
Basque (SOV/AOV): Pat-ek Alex egurtu
Welsh (VSO): Fe darodd Pat Alex

Not all languages fall into the bucket of sticking to a specific word pattern. For example, languages like Russian, Korean, Hungarian, and many others have existing grammar rules that allow one to change sentence structure. In reality some languages can have a semi-fluid or fluid word order. These sentence structure changes are highly flexible and reflect the pragmatics of the utterance.

Morphemes can also help distinguish a word’s relationship in a sentence. For example, in Latin the sentence hospes leporem videt and hospitem lepus videt have the same word order but opposite meanings. The first sentence translates to the host sees the rabbit and the second translates to the rabbit sees the host.

I’d like to also touch upon the difference between grammar and syntax. You might be thinking, what is the difference between grammar and syntax? Well, grammar is a rather wide field which includes syntax. In theoretical linguistics grammar includes syntax, morphology, phonology, phonetics, and semantics (the entire system of spoken language). Without grammar there is no syntax.

Syntactic models

When researching syntactic models, I realized there are many fields that are progressing on this subject. These models help provide a means to approach how syntactic units and constituents are arranged and represented. The main syntactic models are the following:

Conclusion

We have dove into the overall understanding of what syntax is as a focus of study. Each syntactic model has an ocean of research behind it to try and understand how syntactic units are categorized in sentences. Every language is different whether it be spoken or signed, but all of them allow for grammatically correct word orders to convey meaning.

Works Cited

nptelhrd (Prof. Rajesh Kumar). “Mod-01 Lec-27 Syntax: An Introduction” YouTube, 14 Nov. 2014, https://youtu.be/MYjsn5JtaSg.
nptelhrd (Prof. Rajesh Kumar). “Mod-01 Lec-28 Syntax: An Introduction” YouTube, 14 Nov. 2014, https://youtu.be/06AVRjc0Z6Q.
CrashCourse. “Syntax 1 - Morphosyntax: Crash Course Linguistics #3” YouTube, 25 Sept. 2020, https://youtu.be/B1r1grQiLdk.
CrashCourse. “Syntax 2 - Trees: Crash Course Linguistics #4” YouTube, 2 Oct. 2020, https://youtu.be/n1zpnN-6pZQ.
“Word order” Wikipedia, 10 June 2021, https://en.wikipedia.org/wiki/Word_order. Accessed 4 July 2021.
“Syntax” Wikipedia, 25 June 2021, https://en.wikipedia.org/wiki/Syntax. Accessed 4 July 2021.

MySQL CRUD Basics - Creating a Database

Max DeMaio — Wed, 14 Jul 2021 00:00:00 +0000

Structured Query Language (SQL) is used to manage data in all relational database management systems such as MySQL, Oracle, SQL Server, and more. SQL standards are maintained by ISO. While most database products comply with the ISO standard, they also offer additional proprietary features. In this blog post we’re going to restrict ourselves to the feature set offered by MySQL databases.

MySQL data types and operators

Each column in a database table is required to have a name and a data type. When designing databases we have to decide what kind of data will be stored in its database tables. Data types allow SQL to understand and interact with the stored data within database table columns. MySQL supports SQL data types in multiple categories: numeric types, date and time types, string (character and byte) types, spatial types, and the JSON data type.

Also, it’s noteworthy to mention the operators that we can use in SQL expressions. Operators can be broken into three main categories: arithmetic, comparison, and logical.

Simple MySQL example

Imagine that you own a business. This business sells video games via its website and also via its physical store location. Customers can place orders with employees on-site or buy video games online without an employee’s assistance. The order table links both employees and customers, however each order doesn’t necessarily need an employee foreign key as mentioned before! A database and tables would help us manage all of this information:

How would we create and populate the database and tables pictured above? It’s quite straightforward, don’t worry. Also, I’ll dive into how to read data and use update/delete statements to alter data.

Creating a database and tables

In order to start working with databases we need to create one. With the CREATE DATABASE statement we can do just that. Interacting with the database is as simple as using the USE DATABASE statement followed by any other statements you’d like.

The CREATE TABLE statement allows us to create a table with a given name. There are many aspects to the CREATE TABLE statement described under the following topics: table name, temporary tables, table cloning and copying, column data types and attributes, indexes/foreign keys/check constraints, table options, and table partitioning. Let’s put this into practice and create a database with tables:

CREATE DATABASE MaxOverflowExample;
USE MaxOverflowExample;

CREATE TABLE Customer ( 
    CustNo CHAR(8),
    CustFirstName   VARCHAR(20) NOT NULL,
    CustLastName    VARCHAR(30) NOT NULL,
    CustCity VARCHAR(30),
    CustState   CHAR(2),
    CustZip CHAR(10),
    CustBal DECIMAL(12,2),
    CONSTRAINT PKCustomer PRIMARY KEY (CustNo)  
 );

 CREATE TABLE Employee( 
    EmpNo CHAR(8),
    EmpFirstName VARCHAR(20) NOT NULL,
    EmpLastName VARCHAR(30) NOT NULL,
    EmpPhone CHAR(15),
    EmpEMail VARCHAR(50) NOT NULL,
    CONSTRAINT PKEmployee PRIMARY KEY (EmpNo),
    CONSTRAINT UniqueEMail UNIQUE (EmpEMail) 
);

CREATE TABLE OrderTbl ( 
    OrdNo CHAR(8),
    OrdDate DATE NOT NULL,
    CustNo CHAR(8) NOT NULL,
    EmpNo   CHAR(8),
    CONSTRAINT PKOrderTbl PRIMARY KEY (OrdNo) ,
    CONSTRAINT FKCustNo FOREIGN KEY (CustNo) REFERENCES Customer (CustNo),
    CONSTRAINT FKEmpNo FOREIGN KEY (EmpNo) REFERENCES Employee (EmpNo)
);

As you can see, each table has a unique primary key column to identify each table row. In the order table, there are two foreign key columns to link back to employees that sold customers video games at our physical store. Moreover, the order table tracks all orders for us including online orders.

Inserting data

Let’s insert some data into these bad boys. This is done via the INSERT INTO statement. When we use an INSERT statement, we have to match up our data to conform to the data types and constraints we defined in our CREATE TABLE statement.

Note the order I insert the data as well. I insert data into the employee and customer tables first since the order table contains rows that reference back to those entries.

USE MaxOverflowExample;

INSERT INTO Customer
    (CustNo, CustFirstName, CustLastName, CustCity, CustState, CustZip, CustBal) 
    VALUES('C0954327','Sheri','Gordon','Littleton','CO','80129-5543',230.00);

INSERT INTO Employee
    (EmpNo, EmpFirstName, EmpLastName, EmpPhone, EmpEMail)
    VALUES ('E8544399','Joe','Jenkins','(303) 221-9875','JJenkins@bigco.com');

INSERT INTO OrderTbl 
    (OrdNo, OrdDate, CustNo, EmpNo)
    VALUES ('O9919699','2017-02-11','C0954327','E8544399');

Reading data

We can query our database tables using the SELECT statement. SELECT queries can become quite complex when dealing with a production level database. Here, I demonstrate how you can get all the data from all three tables we created.

USE MaxOverflowExample;

SELECT * FROM Customer;
SELECT * FROM Employee;
SELECT * FROM Ordertbl;

Updating and deleting data

For updating and deleting data in our database tables we can use the UPDATE and DELETE statements. All that’s needed is to specify the primary key of the row we’d like to either update or delete.

Sidenote: the variable “SQL_SAFE_UPDATES” is enabled by default. This prevents the MySQL database engine from executing UPDATE and DELETE statements that don’t include WHERE clauses that reference the primary key column(s). This saves you from affecting every row in the given table.

USE MaxOverflowExample;

-- Update customer first name
UPDATE Customer
  SET CustFirstName = 'George'
  WHERE CustNo = 'C0954327';

-- Delete rows added
DELETE FROM OrderTbl
  WHERE OrdNo = 'O9919699';

DELETE FROM Employee
  WHERE EmpNo = 'E8544399';

DELETE FROM Customer
  WHERE CustNo = 'C0954327';

I hope this post helped boost your MySQL power level. If you like video format better, I have a YouTube playlist where I demonstrate everything in the MySQL workbench. MySQL is a database management system that allows us to interact with and design databases. With a solid foundation of MySQL basics, you can start designing and interacting with databases.

Works Cited

“MySQL 8.0 Reference Manual.” MySQL, https://dev.mysql.com/doc/refman/8.0/en/.

Morphology - How Words Are Studied

Max DeMaio — Sun, 04 Jul 2021 00:00:00 +0000

The study of words, how they are constructed, and their relationship to other words in the same language.

What even is a word? Well, for each word we’d expect to find its entry in a dictionary. Meanings of words can be unpredictable and each word is known as a lexeme or lexical item since their key/value pairs are in a lexicon (dictionary). The words we use are arbitrary signs that are essentially pointers to objects/ideas in the world.

Now, let’s take the words cat and cats. These words are quite similar and are only different by the plurality morpheme -s, only found bound to noun phrases. Meanwhile cat is already in its smallest most unpredictable form that conveys meaning; so cat is a morpheme. The study of morphemes is known as morphology.

Really cool observation : It’s helpful to divide words into morphemes because it lets us see patterns across languages. One word in one language might be a part of a word in another. For example, the sentence she is my friend in English versus the sentence elle est mon amie in French. You can see that French adds a feminine suffix morpheme since French nouns have gender. Also, sometimes in other languages a sentence could be reduced to several words based on the language’s morphology. Looking at morphemes allows one to enjoy and observe the differences and similarities across languages.

Free morpheme: morpheme can stand by itself and can appear within lexemes
Compound morpheme: two or more free morphemes together
Bound morpheme: morpheme can’t stand by itself
Root: stand-alone base morpheme
- note: not all roots are free morphemes: conceive, receive, deceive. However, all free morphemes are roots.
Affix: morpheme that is attached to a word stem to form a new word or word form
- note: not all bound morphemes are affixes, but all affixes are bound morphemes.
- note: there are many categories of affixes.

Fusional morphology comes into play when a single inflectional morpheme denotes multiple grammatical, syntactic, or semantic features. Take my example from before in French, elle est mon amie. If you just look at the word amie you can tell it’s both singular and feminine by the feminine suffix morpheme e. English and French are both fusional languages. However, not all languages are like this. By contrast, Classical Chinese has very little morphology, using almost exclusively free morphemes and depending on word order to convey meaning. By analyzing the linguistic topology of languages we can further classify them.

We can represent morphological structure graphically in the form of tree diagrams. Each node in the tree diagram would represent a morpheme. This also means that morphological structure is recursive.

Abbreviations and conventions:

N = noun
A = adjective
V = verb
P = preposition
Adv = adverb
Af = affix

Let’s look at the tree diagram for the word breathlessness. If you’d like to mess around creating your own, check out this GitHub repository.

The derivational steps assumed are:

[Noun breath] + [Suffix less] = [Adjective breathless]

[Adjective breathless] + [Suffix ness] = [Noun breathlessness]

Words are difficult to explain. There are so many edge cases about the word “word” that explaining things in terms of morphemes allows us to be more precise. The study of morphemes is morphology, researching what words really mean.

Works Cited

CrashCourse. “Morphology: Crash Course Linguistics #2” YouTube, 18 Sept. 2020, https://youtu.be/93sK4jTGrss.

“Morphology.” Wikipedia, 12 June 2021, https://en.wikipedia.org/wiki/Morphology. Accessed 4 July 2021.