ReactJS Coding Challenge

Objective

Develop a Single Page App (SPA) that shows a simple dashboard that displays four tiles, each displaying a single statistic for a dataset that is retrieved via a REST API call. The user should be able to request new data to be loaded and to see the statistics in the tiles update to reflect the new dataset.

Details about the Coding Challenge

Requirements

The app shall be implemented using ReactJS components and developed using either JavaScript or TypeScript, with the latter preferred.
The app shall display four statistics tiles: Mean, Median,Standard Deviation and Mode.
The app shall present a button which, when clicked, will cause a new dataset to be loaded(replacing the current dataset)and the dashboard display to be updated to reflect the newly loaded data.
The app shall present an inputfield that will accept a number and a submit button which, when clicked, will cause the number to be addedto the currently loaded datasetand the dashboard tiles to update to reflect the new dataset state.

Dashboard Tiles

Mean - https://en.wikipedia.org/wiki/Arithmetic_mean
Median – https://en.wikipedia.org/wiki/Median
Standard Deviation – https://en.wikipedia.org/wiki/Standard_deviation
Mode – https://en.wikipedia.org/wiki/Mode_(statistics)

Expected Results

data-1234.json

Tile	Default	After adding 42
Mean	49.457050	49.451012
Median	49.000000	49.000000
StdDev	28.810315	28.799421
Mode	77.000000	77.000000

data-4321.json

Tile	Default	After adding 42
Mean	50.346679	50.344748
Median	51.000000	51.000000
StdDev	29.191159	29.188057
Mode	82.000000	82.000000

Tech Stack

Client Stack

ReactJS (Javascript)
React Hooks
Custom React Hooks
Styled Components
Framer Motion
Unit Tests
- Jest
- React Testing Library
End to End Tests
- Cypress

Server Stack (For Rest API Calls)

Node
Express
Javascript
Unit Tests
- Jasmine

Quick start

Scripts

`git clone`

   # clone this project. If you are forking it first, make sure to use your
   # own github username in place of mine ;)
   git clone https://github.com/briang123/reactjs-stats-code-challenge.git

`npm install`

Once you clone the project, you will want to make sure you install all dependencies to get up and running.

  npm install

`npm run dev`

This command runs both the server and the client concurrently in development mode. The server is listening on http://localhost:3001 (Note: You will not be able to pull this up in a web browser directly) and the React app runs on http://localhost:3000

  npm run dev

`npm run server`

Open http://localhost:3001 in a web browser to test your Rest API. The root path (http://localhost:3001/) will show you some brief documentation and version information.

  npm run server

`npm run test`

Launches the test runner in the interactive watch mode. See the section about running tests for more information.

  npm run test

`npm run cypress`

Launches the Cypress test runner in the interactive mode.

  npm run cypress

`npm run cypress:e2e`

Ensure that the React app is runng on http://localhost:3000 before running this command as Cypress will attempt to access it to do its thing. This command will run the test I created this and output to the terminal.

  npm run cypress:e2e

What’s inside?

A quick look at the top level directories you’ll see in this project.

.
├── cypress
├──── integration
├────── dashboard
├── public
├── server
├──── controllers
├──── db
├──── routes
├──── services
├──── utils
├──── index.js
├── src
├──── common
├──── components
├──── docs
├──── hooks
└──── theme

cypress - In the cypress > integration > dashboard directory, I created end-to-end tests for this project

public - React will build and deploy to this folder while in development

server - In lieu of creating a separate Node.js server to that provides the Rest API for this challenge, I took the direction of creating a Node.js server proxy to simplify and expedite the process. If you would like to learn more about this you can read this article.

For the project folder on the server, I structured it so that there is a clear separation of concerns/layers in the application. Basically, we have our routes, which forward requests to our controllers (handles requests), which make calls to the services layer (business logic), which make calls to the db where methods are created that make calls to the database or external API’s. There is also a separate utils directory that contains any commonl/shared functionality.

src - This is the React app that will make the Rest API requests to the server via a custom React hook (useDataFetch) to obtain the dataset needed to calculate the statistical data to display on the dashboard.

I created a few additional React hooks to help with this task (useStatistics and useNumArray). The implementation details for the calcuations exist in the NumArray class, which are called directly from calculateMedian, calculateMean, calculateStdDeviation, and calculateMode.

Our components are structured so that there is a separation of concerns, as well, but there is room for additional separation.

App - Container for the Header and Body components

Body - Container for the Dashboard, Form, and DataReload components.

Header - Container for the logo, title, and description

Dashboard - Container for the Tile component where there is one for each statistic.

Form - Container for the input (Input component and useInput custom React hook) and submit button (Button).

DataReload - Container for the two buttons (Button) that, when clicked, will trigger a Rest API call to the server to get the data.

I’m leveraging Styled Components and, at times, co-mingling with Framer Motion to bring the animation you will see. For CSS, I took a very basic mobile-first approach to the layout where I only have a couple breakpoints to change the styles, but using Flexbox to style the page.

Testing

Unit Tests (Jest, React Testing Library)

End to End Tests (Cypress)

Download Details:

Author: briang123

GitHub: https://github.com/briang123/reactjs-stats-code-challenge

#reactjs #javascript #react

What is GEEK

Buddha Community

Tyrique Littel

1604008800

Static Code Analysis: What It Is? How to Use It?

Static code analysis refers to the technique of approximating the runtime behavior of a program. In other words, it is the process of predicting the output of a program without actually executing it.

Lately, however, the term “Static Code Analysis” is more commonly used to refer to one of the applications of this technique rather than the technique itself — program comprehension — understanding the program and detecting issues in it (anything from syntax errors to type mismatches, performance hogs likely bugs, security loopholes, etc.). This is the usage we’d be referring to throughout this post.

“The refinement of techniques for the prompt discovery of error serves as well as any other as a hallmark of what we mean by science.”

J. Robert Oppenheimer

Outline

We cover a lot of ground in this post. The aim is to build an understanding of static code analysis and to equip you with the basic theory, and the right tools so that you can write analyzers on your own.

We start our journey with laying down the essential parts of the pipeline which a compiler follows to understand what a piece of code does. We learn where to tap points in this pipeline to plug in our analyzers and extract meaningful information. In the latter half, we get our feet wet, and write four such static analyzers, completely from scratch, in Python.

Note that although the ideas here are discussed in light of Python, static code analyzers across all programming languages are carved out along similar lines. We chose Python because of the availability of an easy to use ast module, and wide adoption of the language itself.

How does it all work?

Before a computer can finally “understand” and execute a piece of code, it goes through a series of complicated transformations:

static analysis workflow

As you can see in the diagram (go ahead, zoom it!), the static analyzers feed on the output of these stages. To be able to better understand the static analysis techniques, let’s look at each of these steps in some more detail:

Scanning

The first thing that a compiler does when trying to understand a piece of code is to break it down into smaller chunks, also known as tokens. Tokens are akin to what words are in a language.

A token might consist of either a single character, like (, or literals (like integers, strings, e.g., 7, Bob, etc.), or reserved keywords of that language (e.g, def in Python). Characters which do not contribute towards the semantics of a program, like trailing whitespace, comments, etc. are often discarded by the scanner.

Python provides the tokenize module in its standard library to let you play around with tokens:

Python

1

import io

2

import tokenize

3

4

code = b"color = input('Enter your favourite color: ')"

5

6

for token in tokenize.tokenize(io.BytesIO(code).readline):

7

    print(token)

Python

1

TokenInfo(type=62 (ENCODING),  string='utf-8')

2

TokenInfo(type=1  (NAME),      string='color')

3

TokenInfo(type=54 (OP),        string='=')

4

TokenInfo(type=1  (NAME),      string='input')

5

TokenInfo(type=54 (OP),        string='(')

6

TokenInfo(type=3  (STRING),    string="'Enter your favourite color: '")

7

TokenInfo(type=54 (OP),        string=')')

8

TokenInfo(type=4  (NEWLINE),   string='')

9

TokenInfo(type=0  (ENDMARKER), string='')

(Note that for the sake of readability, I’ve omitted a few columns from the result above — metadata like starting index, ending index, a copy of the line on which a token occurs, etc.)

#code quality #code review #static analysis #static code analysis #code analysis #static analysis tools #code review tips #static code analyzer #static code analysis tool #static analyzer

Samanta Moore

1621137960

Guidelines for Java Code Reviews

Get a jump-start on your next code review session with this list.

Having another pair of eyes scan your code is always useful and helps you spot mistakes before you break production. You need not be an expert to review someone’s code. Some experience with the programming language and a review checklist should help you get started. We’ve put together a list of things you should keep in mind when you’re reviewing Java code. Read on!

1. Follow Java Code Conventions

2. Replace Imperative Code With Lambdas and Streams

3. Beware of the `NullPointerException`

4. Directly Assigning References From Client Code to a Field

5. Handle Exceptions With Care

…

#java #code quality #java tutorial #code analysis #code reviews #code review tips #code analysis tools #java tutorial for beginners #java code review

Houston Sipes

1604088000

How to Find the Stinky Parts of Your Code (Part II)

There are more code smells. Let’s keep changing the aromas. We see several symptoms and situations that make us doubt the quality of our development. Let’s look at some possible solutions.

Most of these smells are just hints of something that might be wrong. They are not rigid rules.

This is part II. Part I can be found here.

Code Smell 06 - Too Clever Programmer

The code is difficult to read, there are tricky with names without semantics. Sometimes using language’s accidental complexity.

_Image Source: NeONBRAND on _Unsplash

Problems

Readability
Maintainability
Code Quality
Premature Optimization

Solutions

Refactor the code
Use better names

Examples

Optimized loops

Exceptions

Optimized code for low-level operations.

Sample Code

Wrong

function primeFactors(n){
	  var f = [],  i = 0, d = 2;  

	  for (i = 0; n >= 2; ) {
	     if(n % d == 0){
	       f[i++]=(d); 
	       n /= d;
	    }
	    else{
	      d++;
	    }     
	  }
	  return f;
	}

Right

function primeFactors(numberToFactor){
	  var factors = [], 
	      divisor = 2,
	      remainder = numberToFactor;

	  while(remainder>=2){
	    if(remainder % divisor === 0){
	       factors.push(divisor); 
	       remainder = remainder/ divisor;
	    }
	    else{
	      divisor++;
	    }     
	  }
	  return factors;
	}

Detection

Automatic detection is possible in some languages. Watch some warnings related to complexity, bad names, post increment variables, etc.

#pixel-face #code-smells #clean-code #stinky-code-parts #refactor-legacy-code #refactoring #stinky-code #common-code-smells

Fannie Zemlak

1604048400

Softagram - Making Code Reviews Humane

The story of Softagram is a long one and has many twists. Everything started in a small company long time ago, from the area of static analysis tools development. After many phases, Softagram is focusing on helping developers to get visual feedback on the code change: how is the software design evolving in the pull request under review.

Benefits of code change visualization and dependency checks

While it is trivial to write 20 KLOC apps without help of tooling, usually things start getting complicated when the system grows over 100 KLOC.

The risk of god class anti-pattern, and the risk of mixing up with the responsibilities are increasing exponentially while the software grows larger.

To help with that, software evolution can be tracked safely with explicit dependency change reports provided automatically to each pull request. Blocking bad PR becomes easy, and having visual reports also has a democratizing effect on code review.

Example visualization

Basic building blocks of Softagram

Architectural analysis of the code, identifying how delta is impacting to the code base. Language specific analyzers are able to extract the essential internal/external dependency structures from each of the mainstream programming languages.
Checking for rule violations or anomalies in the delta, e.g. finding out cyclical dependencies. Graph theory comes to big help when finding out unwanted or weird dependencies.
Building visualization for humans. Complex structures such as software is not easy to represent without help of graph visualization. Here comes the vital role of change graph visualization technology developed within the last few years.

#automated-code-review #code-review-automation #code-reviews #devsecops #software-development #code-review #coding #good-company

Vincent Lab

1605176074

Let's Talk About Selling Your Code

In this video, I’ll be talking about when do I think code is ready to be sold.

#should you sell your code? #digital products #selling your code #sell your code #should you sell your code #should i sell my code