Gustavo gugadev

Install the tools:

brew install ios-webkit-debug-proxy

Run the simulator. And choose an iOS 10 device. The chrome remote debugging doesn't work with iOS 11 yet.

Enable the inspector

What forces layout / reflow

All of the below properties or methods, when requested/called in JavaScript, will trigger the browser to synchronously calculate the style and layout*. This is also called reflow or layout thrashing, and is common performance bottleneck.

Generally, all APIs that synchronously provide layout metrics will trigger forced reflow / layout. Read on for additional cases and details.

Element APIs

Getting box metrics

elem.offsetLeft, elem.offsetTop, elem.offsetWidth, elem.offsetHeight, elem.offsetParent

Sonarlint y Code

Instalar Sonarlint

Lo primero es instalar la extensión Sonarlint en nuestro Code.

Crear un token

	import { Component } from '@angular/core'
	import '@pacificoseguros/elements/accordion'
	import '@pacificoseguros/elements/typography'
	import '@pacificoseguros/elements/number'
	import '@pacificoseguros/icons/ambulance'

	@Component({
	selector: 'app-accordion-demo',
	templateUrl: './accordion.html'
	})

	.container {
	background-color: #c1c1c1;
	height: 500px;
	display: flex;
	justify-content: center;
	align-items: center;
	}

	.btn {
	background-color: orange;

	const source = [[1, 2, [3, [4]]], 5]

	const flatArray = (src) => {
	const flattened = []

	function isArray(value) {
	return value instanceof Array
	}

	// do not modify the original array, instead, clone it

	{
	"version": "0.2.0",
	"configurations": [
	{
	"name": "Node Inspector",
	"type": "node",
	"request": "launch",
	"args": ["${workspaceRoot}/src/service.ts"],
	"runtimeArgs": ["-r", "ts-node/register"],
	"cwd": "${workspaceRoot}",

	import React, { useState } from "react";

	const JitsiMeet = () => {
	const [jitsi, setJitsi] = useState<JitsiInstance \| null>(null);

	return null;
	}

	module.exports = (string) => {
	return string.replace(/([a-z0-9]\|(?=[A-Z]))([A-Z])/g, '$1-$2').toLowerCase();
	};

	interface User {
	name: string;
	age: number;
	birthDate: Date;
	admin: boolean;
	foo?: {
	bar: string;
	}
	}