Server handle exception and result

+++ +++ Server handle exception and result One problem when we process requests from client is: What is format of result of response What is exception policy should be handle. For example, if client sent the bad request (bad query) then what is message response that server need to notify to client ? For above reasons, I will introdure 2 modules: - _input_boundary.py: the module will handle in request and wrap response to flask.Response with json format - flask_api_handle.py: the module will hook to handle when exception occurs Input output boundrary Because I want to send all of data in body (not in query parameters) then I will to expose POST method to client. For the request to JIRA server, we use GET method

VS Code setup for React project

+++ +++ VS Code setup for React project We can install some extensions Browse Lite: https://github.com/antfu/vscode-browse-lite Then open command Cmd + Shift + P » Browse Run Open…. ES7 + React/Redux/React-Native snippets rfc type » create react component

Clean Code (Part 2)

+++ +++ Comments Don’t comment bad code—rewrite it. // Check to see if the employee is eligible for full benefits if ((employee.flags & HOURLY_FLAG) && (employee.age > 65)) or if (employee.isEligibleForFullBenefits()) Classes public class Sql { public Sql(String table, Column[] columns) public String create() public String insert(Object[] fields) public String selectAll() public String findByKey(String keyColumn, String keyValue) public String select(Column column, String pattern) public String select(Criteria criteria) public String preparedInsert() private String columnList(Column[] columns) private String valuesList(Object[] fields, final Column[] columns) private String selectWithCriteria(String criteria) private String placeholderList(Column[] columns) } Reason to change - Sql will change when adding new type. - Modify select to support subqueries Violate SRP

Setup Javascript

+++ +++ Debug If you have error such as Error [ERR_MODULE_NOT_FOUND]: Cannot find module () https://stackoverflow.com/questions/65384754/error-err-module-not-found-cannot-find-module) then you can check the import in javascript // Should include .js as fullname of module import { SnapshotData, TagQueryShapshotMerger } from "./RemoteData.js";

TypeScript Setup

+++ +++ Typescript setup Install node.js Install typescript package using npm npm install typescript Run on node the first ts Write a file name example.ts with extenstion .ts type WithName = { name: string; }; function printName(arg: WithName) { console.log(arg.name); } printName({ name: "HoHai", }); Compile ts » js tsc example.ts Run the compiled js file node first.js Run on browser Create new html file, for example index.html In VS Code type ! to suggest the content of html file

Clean Code (Part 1)

+++ +++ Function Cannot understand in 3 mins public static String testableHtml( PageData pageData, boolean includeSuiteSetup ) throws Exception { WikiPage wikiPage = pageData.getWikiPage(); StringBuffer buffer = new StringBuffer(); if (pageData.hasAttribute("Test")) { if (includeSuiteSetup) { WikiPage suiteSetup = PageCrawlerImpl.getInheritedPage( SuiteResponder.SUITE_SETUP_NAME, wikiPage ); if (suiteSetup != null) { WikiPagePath pagePath = suiteSetup.getPageCrawler().getFullPath(suiteSetup); String pagePathName = PathParser.render(pagePath); buffer.append("!include -setup .") .append(pagePathName) .append("\n"); } } WikiPage setup = PageCrawlerImpl.getInheritedPage("SetUp", wikiPage); if (setup != null) { WikiPagePath setupPath = wikiPage.getPageCrawler().getFullPath(setup); String setupPathName = PathParser.render(setupPath); buffer.append("!include -setup .") .append(setupPathName) .append("\n"); } } buffer.append(pageData.getContent()); if (pageData.hasAttribute("Test")) { WikiPage teardown = PageCrawlerImpl.getInheritedPage("TearDown", wikiPage); if (teardown != null) { WikiPagePath tearDownPath = wikiPage.getPageCrawler().getFullPath(teardown); String tearDownPathName = PathParser.render(tearDownPath); buffer.append("\n") .append("!include -teardown .") .append(tearDownPathName) .append("\n"); } if (includeSuiteSetup) { WikiPage suiteTeardown = PageCrawlerImpl.getInheritedPage( SuiteResponder.SUITE_TEARDOWN_NAME, wikiPage ); if (suiteTeardown != null) { WikiPagePath pagePath = suiteTeardown.getPageCrawler().getFullPath(suiteTeardown); String pagePathName = PathParser.render(pagePath); buffer.append("!include -teardown .") .append(pagePathName) .append("\n"); } } } pageData.setContent(buffer.toString()); return pageData.getHtml(); } Refactor: public static String renderPageWithSetupsAndTeardowns( PageData pageData, boolean isSuite ) throws Exception { boolean isTestPage = pageData.hasAttribute("Test"); if (isTestPage) { WikiPage testPage = pageData.getWikiPage(); StringBuffer newPageContent = new StringBuffer(); includeSetupPages(testPage, newPageContent, isSuite); newPageContent.append(pageData.getContent()); includeTeardownPages(testPage, newPageContent, isSuite); pageData.setContent(newPageContent.toString()); } return pageData.getHtml(); } Rules: Function should be small, very small (<= 20 lines). No bigger than a screen-full How short function should be ? public static String renderPageWithSetupsAndTeardowns( PageData pageData, boolean isSuite) throws Exception { if (isTestPage(pageData)) includeSetupAndTeardownPages(pageData, isSuite); return pageData.getHtml(); } DO ONE THING, DO IT WELL Switch statements When new type add the code will be grow Do more than one thing. Violate Single Responsibity Principle: there is more than one reason to change Violate Open Closed Principle (must change when new types added ) public Money calculatePay(Employee e) throws InvalidEmployeeType { switch (e.type) { case COMMISSIONED: return calculateCommisionedPay(e); case HOURLY: return calculateHourlyPay(e); case SALARIED: return calculateSalariedPay(e); default: throw new InvalidEmployeeType(e.type); } } We can refactor by:

Create Python project

+++ +++ Create Python project For PyCharm then you can ignore this step For Visual Studio Code: Create new folder with project-name Create virtual environment to isolate installed packages + python: Go to project name then run the command # Create virtual environment python -m venv .venv # Activate (Windows) .\.venv\Scripts\activate # Activate (Mac) source ./.venv/Scripts/activate Install required package After activating virtual environment, then we can install required packages by the command pip install <PACKAGE-NAME> If we define the required package in the requirements.txt then we can run pip install -r requirements.txt The requirement.txt file like this: Flask gunicorn==20.1.0 Werkzeug==3.0.1 requests

Create React project

+++ +++ Create React project Create React + Vite project by the following command npm create vite@latest Then follw the prompts. Refer to: https://vitejs.dev/guide/ Create React only: npx create-react-app <APP-NAME> Refer to: https://create-react-app.dev/ Install required packages We can install required packages by using npm npm install <PACKAGE-NAME> Install Chakra UI packages: https://chakra-ui.com/getting-started npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion # For use Chakra UI icon npm i @chakra-ui/icons The information of installed packages will be keep in package.json:

SOLID Principles

+++ +++ Single Responsibility The class only have one reason to change class Payroll { payFor(employee: Employee) {} } class Employee { CalcPay() {} ReportHours() {} WriteEmploye() {} } How many reason does this class have to change ? How many sources of change ? Then the Employee class should have 3 different responsibilities. 3 methods should be long 3 classes class Payroll { payFor(employee: Employee) {} } class Employee { CalcPay() {} } class ReportWrite { writeReport(employee: Employee) {} } class EmployeeRepository { save(employee: Employee) {} }

Boston Data Analysis

+++ draft = false +++ Business Understanding I love to travel and usually when I have time and money, I pack my bags and hit the road. One of the issues affecting my travel budget is the cost of accommodation (hotel…). Recently, when I joined the program on Udacity, I got data about housing prices in Boston. Let’s study housing prices in Boston with me. There are 3 questions that I am interested in when looking at this data:

Introduction

Greeting! This is an introduction post. This post tests the followings: Hero image is in the same directory as the post. This post should be at top of the sidebar. Post author should be the same as specified in author.yaml file.

Markdown Samples

This is a sample post intended to test the followings: A different post author. Table of contents. Markdown content rendering. Math rendering. Emoji rendering. Markdown Syntax Rendering Headings The following HTML <h1>—<h6> elements represent six levels of section headings. <h1> is the highest section level while <h6> is the lowest. H1 H2 H3 H4 H5 H6 Paragraph Xerum, quo qui aut unt expliquam qui dolut labo. Aque venitatiusda cum, voluptionse latur sitiae dolessi aut parist aut dollo enim qui voluptate ma dolestendit peritin re plis aut quas inctum laceat est volestemque commosa as cus endigna tectur, offic to cor sequas etum rerum idem sintibus eiur? Quianimin porecus evelectur, cum que nis nust voloribus ratem aut omnimi, sitatur? Quiatem. Nam, omnis sum am facea corem alique molestrunt et eos evelece arcillit ut aut eos eos nus, sin conecerem erum fuga. Ri oditatquam, ad quibus unda veliamenimin cusam et facea ipsamus es exerum sitate dolores editium rerore eost, temped molorro ratiae volorro te reribus dolorer sperchicium faceata tiustia prat.

Rich Content

This sample post tests the followings: Category, sub-category nesting in the sidebar. Hero image and other images are in images folder inside this post directory. Different media rendering like image, tweet, YouTube video, Vimeo video etc. Image Sample Tweet Sample Owl bet you'll lose this staring contest 🦉 pic.twitter.com/eJh4f2zncC — San Diego Zoo Wildlife Alliance (@sandiegozoo) October 26, 2021 YouTube Video Sample Vimeo Video Sample

Shortcodes Samples

This is a sample post intended to test the followings: Default hero image. Different shortcodes. Alert The following alerts are available in this theme. This is sample alert with type="success". This is sample alert with type="danger". This is sample alert with type="warning". This is sample alert with type="info". This is sample alert with type="dark". This is sample alert with type="primary". This is sample alert with type="secondary". Image A sample image without any attribute. A sample image with height and width attributes. A center aligned image with height and width attributes. A image with float attribute. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras egestas lectus sed leo ultricies ultricies. Praesent tellus risus, eleifend vel efficitur ac, venenatis sit amet sem. Ut ut egestas erat. Fusce ut leo turpis. Morbi consectetur sed lacus vitae vehicula. Cras gravida turpis id eleifend volutpat. Suspendisse nec ipsum eu erat finibus dictum. Morbi volutpat nulla purus, vel maximus ex molestie id. Nullam posuere est urna, at fringilla eros venenatis quis.

Advance Javascript (Part 2)

+++ draft = false +++ Higher Functions, Callbacks Higher function are functions that operate on other functions (by taking them as arguments or returning them) this refer to global object var fullName = function () { setTimeout(function () { // `this` will refer to global object console.log(this.firstName + " " + this.lastName); }, 1000); }; fullName.call({ firstName: "Ho", lastName: "Hai", }); // undefined undefined Can fix by hacking Option 1: store this object in higher function var fullName = function () { let that = this; setTimeout(function () { // `this` will refer to global object console.log(that.firstName + " " + that.lastName); }, 1000); }; fullName.call({ firstName: "Ho", lastName: "Hai", }); Using bind: will create new method with binding the this object from higher function var fullName = function () { setTimeout( function () { // `this` will refer to global object console.log(this.firstName + " " + this.lastName); }.bind(this), 1000 ); }; fullName.call({ firstName: "Ho", lastName: "Hai", }); Or can fix by using Arrow functions Arrow functions Minimal syntax Solve this problem var fullName = function () { setTimeout(() => { // `this` will refer to global object console.log(this.firstName + " " + this.lastName); }), 1000; }; fullName.call({ firstName: "Ho", lastName: "Hai", });

Advance Javascript (Part 3)

+++ draft = false +++ Contructors with Prototypes class was introducted in ES2015 class Car { constructor(model, year) { this.model = model; this.year = year; } // Should be move to Car.prototype object then all of Car instances will // be refer to same this function object // toString() { // console.log(`${this.model} has ${this.year}`); // } } // All of Car instances wil be refer to same this function object Car.prototype.toString = function () { console.log(`${this.model} has ${this.year}`); }; Module pattern (Closure)

Asynchoronous Javascript

+++ +++ Asynchoronous Javascript Follow the link: https://developer.mozilla.org/en-US/docs/Learn/JavaScript/Asynchronous/Introducing Callback hell How to notify the caller when the nest function is complete » We use a callback function. But in the case if we compose the sequenced steps (one by one), then we got deeply nested doOperation() » this is Callback hell function doStep1(init, callback) { const result = init + 1; callback(result); } function doStep2(init, callback) { const result = init + 2; callback(result); } function doStep3(init, callback) { const result = init + 3; callback(result); } function doOperation() { doStep1(0, (result1) => { doStep2(result1, (result2) => { doStep3(result2, (result3) => { console.log(`result: ${result3}`); }); }); }); } doOperation(); Promise is solution for Callback hell Promise is an object returned by asynchronous function represent the current state of the operation At the time calling: return the caller a promise object which provides methods to handle eventual success or failure of the operation State of a promise: pending: the promise has been created, and the asynchronous function it’s associated with has not succeeded or failed yet. This is the state your promise is in when it’s returned from a call to fetch(), and the request is still being made. fulfilled: the asynchronous function has succeeded. When a promise is fulfilled, its then() handler is called. rejected: the asynchronous function has failed. When a promise is rejected, its catch() handler is called.

Sub-Category

Top Category Sample

পোস্ট সমূহ