“Command & Query Responsibility Separation”

I was recently introduced to the concept of Command & Query Responsibility Separation (CQRS), which if you’re unfamiliar, once explained will make perfect sense to you as well.

The basic concept is that every method should be either a command to perform an action, or a query that returns data, but not both.

This idea can be complex to set up, but will help with scalability, data schemas, security, and the separation of concerns.

Context

Often times an application pulls a lot of different data based on the view and what is required, and object mapping can get messy amongst all…


If you’ve ever built a React application of any decent size, you know just how quickly state management and passing props can get out of hand.

The Flux pattern was designed by Facebook to assist with how data flows through an application, and while Flux itself is now in “maintenance mode”, the alternatives (think Redux, MobX, Pullstate, RxJS, Reflux, Fluxible, and many more), tend to use the same, or very similar architecture. …


Most people have probably heard the word “semantics” tossed around at least once in their life. It’s a word that sort of defines itself… but until I really took a step back to think about what it means, I didn’t exactly get the full picture.

Semantics literally means “the meaning of a word, phrase, sentence, or text”.

That definition translates perfectly to the context of HTML elements — Semantic HTML elements are “elements with a meaning”.

In HTML, there’s a decent list of what are considered Semantic Elements.


When it comes to API’s most people are initially introduced to and continue to utilize RESTful conventions, but GraphQL has been getting more and more popular in recent years. Today we’ll discuss the differences, and some of the benefits of utilizing GraphQL.

A comparison of a simple request and response using REST vs GraphQL

What is GraphQL?

Taken straight from the GraphQL website: “GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. …


TypeScript — a superset of JavaScript, undoubtably has some amazing benefits — static typing, classes, interfaces, and enhanced intellisense which can make stronger suggestions for autocompletion and handle potential errors before compiling. That means your code editor will not only make smarter suggestions to autocomplete, but also show you errors right then and there, instead of having to find out something isn’t working correctly when you switch to your browser.

Theres a few things to take note of when getting started with TypeScript in React:

  1. Getting started with create-react-app and TypeScript:

First things first — create-react-app has a template to use for TypeScript that will set up the project using TypeScript and a tsconfig.json file.


Today I’m excited to share something incredibly simple…. GitHub has it’s own hosting called GitHub Pages, and it is SO easy to set up!

GitHub Pages allows users to host simple (and some more complex) website and website features, directly from their GitHub project file.

The best part is how SIMPLE it is to set up!

  1. Go to a repo on GitHub.
  2. Click on Settings at the top right.
  3. Scroll down to the pages tab.
  4. Select your master branch to host.
  5. Click save.
In your repo — click settings at the top right.

Every developer knows about fetch requests… Axios is essentially an NPM alternative to “fetching” data, with some cool additional features. With over 18 million weekly downloads, if you aren’t familiar with Axios, I definitely recommend checking it out!

So let’s take a quick look at some of the extra features Axios can offer:

  • Make XMLHttpRequests from the browser
  • Make http requests from Node.js
  • Supports the Promise API
  • Intercept request and response
  • Transform request and response data
  • Cancel requests
  • Automatic transforms for JSON data
  • Client side support for protecting against XSRF

First and foremost, one of my favorite things about Axios…


When it comes to React hooks, I’d personally say the useContext hook via the context API is probably one of the more easy to use, useful, and powerful features available when it comes to state management.

In React, context provides a way to pass data through a component tree without having to pass down props manually through every level.

react logo
react logo

The useContext hook provides a way to consume context in a functional component, essentially allowing us to pass state, or the function to set state, to any component without passing it down the entire tree as a prop (we all know…


There are a lot of use cases where triggering audio can come in handy… whether that’s a simple sound effect to let a user know that something worked (or didn’t), or building something audio centric like a drum rack or a sound board.

Today we are going to build a super simple drum rack using Vanilla JavaScript. Here’s a quick demo:

Vanilla JS Drum Rack Demo Video

First let’s set up our environment.. in your terminal create and navigate into a new folder:

take vanilladrumrack

Then create the couple of files we will need:

touch index.html index.html index.css

And create…


The useEffect hook is incredibly useful. It’s yet another handy feature released not too long ago as a React Hook, a way to manage component lifecycles and app state inside of functional components.

The useEffect hook essentially replaces the componentDidMount lifecycle function from a class component, but useEffect is used in a functional component.

UseEffect is most commonly used to set a piece of state to that component, fetch data, reading from or writing to local storage, or setting event listeners.

The main functionality is that the useEffect will happen upon the initial render of that component, and allows for…

Jordan Panasewicz

Denver, CO based. Software Sales turned Software Engineer.

Get the Medium app

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