EzCook

x/yThe x and y attributes are used to designate a position on the web page. Use the x and y attributes places the anchor points for these elements at a specified location. x1, y1, x2, y2The x1, y1, x2, y2 attributes are used to designate the position of two points on the web page. These two points are connected with a line as part of the line element. pointsThe points attribute is used to set a series of points which are subsequently connected with a line and/or which may form the bounds of a sh ...

Circle cx: The position of the center of the circle in the x direction. cy: The position of the center of the circle in the y direction. r: The radius of the circle from the cx, cy position to the perimeter of the circle. Ellipse cx: The position of the center of the ellipse in the x direction. cy: The position of the center of the ellipse in the y direction. rx: The radius of the ellipse in the x dimension. ry: The radius of the ellipse in the y dimension. Rectangle x: The position on ...

Original Setting up and configuring the AxesChange the text sizeThe default size is 10px with the font type of sans-serif. There are a couple of different ways that we could change the font size and either one is valid. The first way is to specify the font as a style when drawing an individual axis. 1234svg.append('g') .style('font', '14px times') .attr('transform', `translate(0, ${height})`) .call(d3.axisBottom(xScale)) There are a few ...

Import D31<script src="https://d3js.org/d3.v4.min.js"></script> Code12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061626364656667686970717273747576// set sizeconst margin = { top: 50, right: 50, bottom: 50, left: 50,}const width = window.innerWidth - margin.left - margin.rightconst height = window.innerHeight - margin.top - margin.bottom// Set Point Numberconst n = 21// X scale will use the index ...

Installation1yarn add mockjs Simple Usage1234567const Mock = require('mock')const data = Mock.mock({ 'list|1-10': [{ 'id|+1': 1 }]})console.log(JSON.stringify(data)) Data Template Definition(DTD)Each attribute consists of three parts: 12345// attribute name// attribute rule// attribute value'name|rule': value rule is optional 12345678910// rules{ 'name|min-max': value, 'name|count': value, 'name| ...

Install Pug1yarn add pug Overviewpug.compile() will compile the Pug source code into a JavaScript function that takes a data object(called locals) as an argument. Call that resultant function with your data, then it will return a string of HTML rendered with your data. The compiled function can be re-used, and called with different sets of data. 12// - template.pugp #{name}'s Pug source code! 123456789101112131415const pug = require('pug')// Compile the source codecons ...

123456789101112131415161718192021{ mix-blend-mode: normal; mix-blend-mode: multiply; mix-blend-mode: screen; mix-blend-mode: overlay; mix-blend-mode: darken; mix-blend-mode: lighten; mix-blend-mode: color-dodge; mix-blend-mode: color-burn; mix-blend-mode: soft-light; mix-blend-mode: hard-light; mix-blend-mode: difference; mix-blend-mode: exclusion; mix-blend-mode: hue; mix-blend-mode: saturation; mix-blend-mode: color; mix-blend-mode: luminosity; mix-blend-mode: initial; m ...

Run Chrome without chrome, it brings all modern web platform features provided by Chromium and the Blink rendering engine to the command line. A headless browser is a great tool for automated testing and server environments where you don’t need a visible UI shell. Starting Headless (CLI)The easiest way to get started with headless mode is to open the Chrome binary from the command line. If you’ve got Chrome 59+ installed, start Chrome with the -- headless flag: 12345chrome \ --headless \ # Run ...

Node.js runs in single-threaded, event-driven mode, which is good for improving performance via multiple child process. Each child process has three stream objects: child.stdin child.stdout child.stderr All these three stream objects may share their parent’s stdio, or set to use their own stream object independently. Node.js offers child_process module to create new child process: exec – child_process.exec use child process to execute shell command, and buffer the output for callback. This ...

Single-threaded, non-blocking performance in Node works great for a single process. But eventually, one process in one CPU is not going to be enough to handle the increasing workload of your application. Using multiple processes is the best way to scale a Node application. Node is designed for building distributed applications with many nodes. The Child Process ModuleWe can easily spin a child process using Node’s child_process module and those child processes can easily communicate with each o ...

Strategies of ScalabilityThe workload is the most popular reason we scale our applications, but it’s not the only reason. We also scale our applications to increase their availability and tolerance to failure. CloningThe easiest thing to do to scale a big application is to clone it mulitple times and have each cloned instance handle part of the workload(with a load balancer). This does not cost a lot in term of development time and it’s highly effective. This strategy is the minimum you should d ...

Faker.jsIt’s a wonderful node module to create fake/mock data. Faker.js has its own API, and it’s huge. It has a vast API for almost every use case with an excellent documentation Let’s consider a test case where I want some a user to have following amount of fields: name email website address bio image/avatar 12345678910const faker = require('faker')const User = { name: faker.name.findName(), email: faker.internet.email(), website: faker.internet.url(), address: faker ...

Get Started Open Chrome in Incognito Mode. Incognito Mode ensures that Chrome runs in a clean state. For example, if you have a lot of extensions installed, those extensions might create noise in you performance meaturements. Load the following page in your Incognito window. This is the demo that you’re going to profile. The page shows a bunch of little blue squares moving up and down. https://googlechrome.github.io/devtools-samples/jank/ Press Command + Option + I in Mac to open DevTools. ...

1const config = require('/path/to/file') The main object exported by the require module is a function. When Node invokes that require() function with a local file path as the function’s only argument, Node goes through the following sequence of steps: Resolving: To find the absolute path of the file. Loading: To determine the type of the file content. Wrapping: To give the file its private scope. This is what makes both the require and module objects local to every file we require. ...

Original Post Concurrency is much border, genral problem than parallelism. If you have tasks having inputs and outputs, and you want to schedule them so that they produce correct results, you are solving a concurrency problem. Take a look at this diagram: It shows a data flow with input and output dependencies. Here tasks 2, 3, 4 can run concurrently after 1. There is no specific order between them, so we have multiple alternatives for running it sequetially. Showing only two of them: Alternat ...

Iterators and GeneratorsIterators are basically objects that can be hold more than one item. Iterators are collections of objects or variables or items that can be iterated on to do some sort of processing on each item in the collection. Arrays are an exmaple of iterators. In TypeScript, an object is demmed iterable if it has an implementation for Symbol.iterator property. Some built-in types like Array, Map, Set, String, Int32Array, etc. have their Symbol.iterator property already implemented. ...

ModulesModules are used for code organization as well as code sharing. Modules are executed within their own scope, not in the global scope. This means that variables, functions, classes, etc. declared in a module are not visible outside the module unless they are explicitly exported using export. Conversely, to consume a variable, function, class, interface, etc. exported from a different module, it has to be imported using import. Modules are declarative. In TypeScript any file containing a to ...

Classification of types in TypeScriptTypes are classified into two main classes in TypeScript: Basic or Primitive Types boolean number string array: number[], Array<number> tuple: [string, number] enum: enum Color {Red, Green = 2, Blue}, let c : Color = Color.blue null undefined any void: exists purely to indicate the absence of a value, such as in a function with no return value. Complex or Non-Primitive Types classes interface Type AssertionsSometimes you’ll end u ...

Here is the example Build GraphQL Server with Express The only difference from that example is the way plugining middleware. In server.js of Koa: 1234567891011121314151617181920import * as Koa from 'koa'import * as GraphqlHTTP from 'koa-graphql'import * as Router from 'koa-router'import Schema from './schema'const PORT = 3457const app = new Koa()const router = new Router()router.all('/graphql', GraphqlHTTP({ schema: Schema, pretty: true, ...

The DOM window object provides access to the browser’s history through the history object. Moving Forward and Backward12window.history.back()window.history.forward() Moving to a specific point in historyYou can use the go() method to load a specific page from session history, identified by its relative position to the current page. 12window.history.go(-1)window.history.go(1) You can determine the number of pages in the history stack by looking at the value of the length property: 1var numberOf ...