brianpooe/ps-assessment
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: code review

Browse source
This commit is contained in:
Brian Pooe 2023-10-11 18:55:55 +02:00
parent c8c19c3388
commit 71571f8e3c
19 changed files with 289 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
package.json
View file

@ -5,7 +5,8 @@
"scripts": {
"part1": "nx run part-1-html-css:serve",
"part2": "nx run part-2-javascript:serve",
"part4": "nx run part-4-problem-solving:serve"
"part4": "nx run part-4-problem-solving:serve",
"part5": "nx run part-5-code-review:serve"
},
"private": true,
"devDependencies": {

33
part-5-code-review/.eslintrc.json Normal file
View file

@ -0,0 +1,33 @@
{
"extends": [
"../.eslintrc.json"
],
"ignorePatterns": [
"!**/*"
],
"overrides": [
{
"files": [
"*.ts",
"*.tsx",
"*.js",
"*.jsx"
],
"rules": {}
},
{
"files": [
"*.ts",
"*.tsx"
],
"rules": {}
},
{
"files": [
"*.js",
"*.jsx"
],
"rules": {}
}
]
}

8
part-5-code-review/.swcrc Normal file
View file

@ -0,0 +1,8 @@
{
"jsc": {
"parser": {
"syntax": "typescript"
},
"target": "es2016"
}
}

11
part-5-code-review/jest.config.ts Normal file
View file

@ -0,0 +1,11 @@
/* eslint-disable */
export default {
displayName: 'part-5-code-review',
preset: '../jest.preset.js',
setupFilesAfterEnv: ['<rootDir>/src/test-setup.ts'],
transform: {
'^.+\\.[tj]s$': '@swc/jest'
},
moduleFileExtensions: ['ts', 'js', 'html'],
coverageDirectory: '../coverage/part-5-code-review'
};

86
part-5-code-review/project.json Normal file
View file

@ -0,0 +1,86 @@
{
"name": "part-5-code-review",
"$schema": "../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"sourceRoot": "part-5-code-review/src",
"tags": [],
"targets": {
"build": {
"executor": "@nx/webpack:webpack",
"outputs": [
"{options.outputPath}"
],
"defaultConfiguration": "production",
"options": {
"outputPath": "dist/part-5-code-review",
"compiler": "swc",
"main": "part-5-code-review/src/main.ts",
"tsConfig": "part-5-code-review/tsconfig.app.json",
"webpackConfig": "part-5-code-review/webpack.config.js",
"assets": [
"part-5-code-review/src/assets"
],
"index": "part-5-code-review/src/index.html",
"baseHref": "/",
"styles": [
"part-5-code-review/src/styles.css"
],
"scripts": []
},
"configurations": {
"production": {
"optimization": true,
"outputHashing": "all",
"sourceMap": false,
"namedChunks": false,
"extractLicenses": true,
"vendorChunk": false,
"fileReplacements": [
{
"replace": "part-5-code-review/src/environments/environment.ts",
"with": "part-5-code-review/src/environments/environment.prod.ts"
}
]
}
}
},
"serve": {
"executor": "@nx/webpack:dev-server",
"options": {
"buildTarget": "part-5-code-review:build"
},
"configurations": {
"production": {
"buildTarget": "part-5-code-review:build:production"
}
}
},
"lint": {
"executor": "@nx/linter:eslint",
"outputs": [
"{options.outputFile}"
],
"options": {
"lintFilePatterns": [
"part-5-code-review/**/*.ts"
]
}
},
"test": {
"executor": "@nx/jest:jest",
"outputs": [
"{workspaceRoot}/coverage/{projectRoot}"
],
"options": {
"jestConfig": "part-5-code-review/jest.config.ts",
"passWithNoTests": true
},
"configurations": {
"ci": {
"ci": true,
"codeCoverage": true
}
}
}
}
}

0
part-5-code-review/src/app/app.element.css Normal file
View file

21
part-5-code-review/src/app/app.element.spec.ts Normal file
View file

@ -0,0 +1,21 @@
import { AppElement } from './app.element';
describe('AppElement', () => {
let app: AppElement;
beforeEach(() => {
app = new AppElement();
});
it('should create successfully', () => {
expect(app).toBeTruthy();
});
it('should have a greeting', () => {
app.connectedCallback();
expect(app.querySelector('h1').innerHTML).toContain(
'Welcome part-5-code-review'
);
});
});

52
part-5-code-review/src/app/app.element.ts Normal file
View file

@ -0,0 +1,52 @@
import "./app.element.css";
export class AppElement extends HTMLElement {
public static observedAttributes = [];
connectedCallback() {
this.innerHTML = `
<div class="bg-white px-6 py-32 lg:px-8">
<div class="mx-auto max-w-3xl text-base leading-7 text-gray-700">
<p class="text-base font-semibold leading-7 text-indigo-600">Code Review</p>
<h1 class="mt-2 text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl">EJS Displaying list of items:</h1>
<img class="my-4 bg-gray-50 object-cover" src="assets/codereview.png" alt="">
<ul role="list" class="mt-8 max-w-xl space-y-8 text-gray-600">
<li class="flex gap-x-3">
<svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
<span>I would use BEM css design it gives everyone on the project a declarative syntax they can share, so they're on the same page.</span>
</li>
<li class="flex gap-x-3">
<svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
<span>It's a good practice to include error handling when working with templates. For instance property name is undefined </span>
</li>
<li class="flex gap-x-3">
<svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
<span>Include fall back text for when items are not found or the array is empty. Example text "No items found."</span>
</li>
<li class="flex gap-x-3">
<svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
<span>Ensure that your generated HTML is accessible by using appropriate ARIA attributes and semantic HTML elements.</span>
</li>
<li class="flex gap-x-3">
<svg class="mt-1 h-5 w-5 flex-none text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
<path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z" clip-rule="evenodd" />
</svg>
<span>Depending on the size of the items array, rendering a large number of list items can impact performance. If you anticipate working with a large dataset, consider a for...loop instead of forEach</span>
</li>
</ul>
<p class="text-indigo-600 text-sm my-8 text-center">Overall, the code snippet you provided is well-written and easy to understand. </p>
</div>
</div>
`;
}
}
customElements.define("app-root", AppElement);

BIN
part-5-code-review/src/assets/codereview.png Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 8.2 KiB

3
part-5-code-review/src/environments/environment.prod.ts Normal file
View file

@ -0,0 +1,3 @@
export const environment = {
production: true
};

6
part-5-code-review/src/environments/environment.ts Normal file
View file

@ -0,0 +1,6 @@
// This file can be replaced during build by using the `fileReplacements` array.
// When building for production, this file is replaced with `environment.prod.ts`.
export const environment = {
production: false
};

19
part-5-code-review/src/index.html Normal file
View file

@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Part5CodeReview</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" href="https://www.payspace.com/wp-content/uploads/2018/03/PS-FAVICON-NEW-2017.png" sizes="32x32" />
<link rel="icon" href="https://www.payspace.com/wp-content/uploads/2018/03/PS-FAVICON-NEW-2017.png" sizes="192x192" />
<link rel="apple-touch-icon" href="https://www.payspace.com/wp-content/uploads/2018/03/PS-FAVICON-NEW-2017.png" />
<meta name="msapplication-TileImage"
content="https://www.payspace.com/wp-content/uploads/2018/03/PS-FAVICON-NEW-2017.png" />
<script src="https://cdn.tailwindcss.com"></script>
</head>
<body>
<app-root></app-root>
</body>
</html>

1
part-5-code-review/src/main.ts Normal file
View file

@ -0,0 +1 @@
import './app/app.element';

1
part-5-code-review/src/styles.css Normal file
View file

@ -0,0 +1 @@
/* You can add global styles to this file, and also import other style files */

0
part-5-code-review/src/test-setup.ts Normal file
View file

9
part-5-code-review/tsconfig.app.json Normal file
View file

@ -0,0 +1,9 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../dist/out-tsc",
"types": ["node"]
},
"exclude": ["jest.config.ts", "src/**/*.spec.ts", "src/**/*.test.ts"],
"include": ["src/**/*.ts"]
}

13
part-5-code-review/tsconfig.json Normal file
View file

@ -0,0 +1,13 @@
{
"extends": "../tsconfig.base.json",
"files": [],
"include": [],
"references": [
{
"path": "./tsconfig.app.json"
},
{
"path": "./tsconfig.spec.json"
}
]
}

15
part-5-code-review/tsconfig.spec.json Normal file
View file

@ -0,0 +1,15 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../dist/out-tsc",
"module": "commonjs",
"types": ["jest", "node"]
},
"files": ["src/test-setup.ts"],
"include": [
"jest.config.ts",
"src/**/*.test.ts",
"src/**/*.spec.ts",
"src/**/*.d.ts"
]
}

9
part-5-code-review/webpack.config.js Normal file
View file

@ -0,0 +1,9 @@
const { composePlugins, withNx } = require('@nx/webpack');
// Nx plugins for webpack.
module.exports = composePlugins(withNx(), (config) => {
// Update the webpack config as needed here.
// e.g. `config.plugins.push(new MyPlugin())`
return config;
});