Jak obrócić obiekt?

Pod tym linkiem znajdziesz demo przykładu opisanego w tym wpisie.

HTML:

<canvas id="canvas" width="800" height="600"></canvas>

JavaScript:

let angle = 0;

const context = document.getElementById("canvas").getContext("2d");
const rect = {
		width: 50,
		height: 50,
		x: context.canvas.width / 2,
		y: context.canvas.height / 2
}

const degreesToRadians = (degrees) => {
		return degrees * (Math.PI / 180);
};

const render = () => {
		context.fillStyle = '#000';

		context.fillRect(0, 0, context.canvas.width, context.canvas.height);
		context.fillStyle = '#ff0000';
		context.save();
		context.translate(rect.x, rect.y)
		context.rotate(degreesToRadians(angle));
		context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);
		context.restore();
		angle += 0.5;
		requestAnimationFrame(render);
}
render();

Za obrót obiektu wokół jego środka odpowiadają dwie linijki.

Pierwsza:

context.rotate(rotate);

Jest to kąt, o jaki ma być obrócony obiekt. Podany w radianach. Stopnie obliczane są w radiany za pomocą funkcji: degreesToRadians.

Druga linijka:

context.fillRect(-rect.width / 2, -rect.height / 2, rect.width, rect.height);

Odpowiedzialna jest za ustawienie osi obrotu obiektu. Na jego środku.

Czym jest Parcel?

Jeśli masz już doświadczenie w pisaniu we front-end coś takiego, jak Webpack pewnie obiło Ci się o uszy.

Parcel to coś podobnego do Webpack'a. Służy do kompilowania kodu jak: JavaScript, TypeScript, CSS/SCSS itp. Czyli pisząc w skrócie Parcel daje programiście wszystko, co potrzebne, żeby zacząć tworzyć aplikacje.

Ktoś może zapytać: skoro istnieje Webpack to po co kolejne tego typu narzędzie?! To, co wyróżnia Parcel to ograniczenie konfiguracji do zbędnego minimum.

Potrzebujesz narzędzia, które: przekompiluje Ci kod z TypeScript do JavaScript? Dodaje style napisane SCSS? Zminimalizuje kod? Stworzy build'a gotowego do wrzucenia na produkcję?

Chcesz po prostu zacząć działać? Użyj Parcel.

Instalacja

Pierwszy krok to instalacja. Wpisz komendę:

npm install --save-dev parcel

Następnie stwórz plik index.html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Parcel</title>
</head>
<body>
<script type="module" src="index.ts"></script>
</body>
</html>

W przykładzie użyjemy TypeScript. Do pliku dołączany jest index.ts, który będzie zawierał cały nasz kod.

Następnie do pliku packge.json dodaj to:

{
  "source": "index.html",
  "scripts": {
    "start": "parcel",
    "build": "parcel build"
  }
}

Skrypt start uruchamia aplikację. Z kolei build tworzy... build'a.

Użycie

Stwórz plik: product.ts i dodaj kod:

interface Product {
	name: string;
	price: number;
}

export const product: Product = {
	name: 'Some product',
	price: 150
}

Teraz index.ts:

import product from './product.ts';

console.log(product); // { name: "Some product", price: 150 }

Wpisz w terminalu komendę:

npm run start

Problem

Pobierając dane za pomocą biblioteki Mongoose dostajesz obiekt lub listę obiektów typu Mongoose document. Tego typu dokument jest znacznie większy od zwykłego obiektu JavaScript.

Ostatnio natknąłem się na jeden problem. Przykład:

const getFromDb = async (id) => {
	return await SomeModel.findOne({ id });
}

const someRow = await getFromDb(id);

expect(someRow.data).toEqual([1, 2, 3, 4]);

Funkcja getFromDb zwraca jakieś dane dla konkretnego rekordu. Sprawdzane jest, czy pole data zawiera odpowiednie dane. Jeśli ten przykład napisany jest w TypeScript to test nie przejdzie, mimo że dane się zgadzają!

W czym jest problem? W typie, jaki Mongoose nadało polu data. Nie jest to zwykłe Array a CoreMongooseArray!

Co zrobić, żeby zwracało zwykłe obiekty JavaScript?

Rozwiązanie

Żeby nie pobierać Mongoose document a zwykłe obiekty wystarczy do zapytania dodać opcję lean:

const getFromDb = async (id) => {
	return await SomeModel.findOne({ id }).lean();
}

Problem rozwiązany!

Dodatkowo wg dokumentacji pobieranie danych w taki sposób jest znacznie szybsze! Czyli same plusy prawda?

Nie do końca. Najpierw trzeba zrozumieć jak działa Mongoose document.

Dokumenty Mongoose

Mongoose pozwala na tworzenie różnych użytecznych funkcji w modelu do przetwarzania danych. Na przykład:

const personSchema = new mongoose.Schema({
  firstName: {
    type: String,
    get: capitalizeFirstLetter
  },
  lastName: {
    type: String,
    get: capitalizeFirstLetter
  }
});

personSchema.virtual('fullName').get(function() {
  return `${this.firstName} ${this.lastName}`;
});

function capitalizeFirstLetter(v) {
  return v.charAt(0).toUpperCase() + v.substring(1);
}

const Person = mongoose.model('Person', personSchema);

await Person.create({ firstName: 'benjamin', lastName: 'sisko' });

const somePerson = await Person.findOne();

console.log(somePerson.fullName); // 'benjamin sisko' zmienione w 'Benjamin Sisko'
console.log(somePerson.firstName); // 'benjamin' zmienione w 'Benjamin' wywołuje capitalizeFirstLetter
console.log(somePerson.lastName); // 'sisko' zmienione w 'Sisko' wywołuje capitalizeFirstLetter

Problem wystąpi gdy wywołasz to samo zapytanie z opcją lean:

...

const somePerson = await Person.findOne().lean();

console.log(somePerson.fullName); // undefined
console.log(somePerson.firstName); // benjamin
console.log(somePerson.lastName); // sisko

Jak widać kosztem użycia lean jest pozbycie się różnego rodzaju pomocniczych funkcjonalności do przetwarzania danych.

Jeśli nie jest Ci to koniecznie potrzebne korzystaj z lean.

W kwietniu opublikowałem 4 wpisy:

React:

1. Do czego służy useReducer?
2. Obsługa formularzy

Inne:

1. Blog: Podsumowanie drugiego roku

NodeJS:

1. Skąd pobrać wersję dla CHROMIUM_REVISION?

Przeczytałem jedną książkę:

1. Miasto w chmurach - Anthony Doerr

Przesłuchałem trzy audiobooki:

1. Andromeda - Therese Bohman
2. Harda - Elżbieta Cherezińska
3. Hyperfocus - Chris Bailey