gugadev

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

.btn {
  background-color: orange;

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

gugadev

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

gugadev

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

gugadev

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

gugadev

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

gugadev

import React, { useState } from "react";

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

gugadev

Sonarlint y Code

Instalar Sonarlint

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

Crear un token

gugadev

export class Environment {
    static string(varName: string, defaultValue = ""): string {
        const value = process.env[`REACT_APP_${varName}`];
        return value ?? defaultValue;
    }

    static int(varName: string, defaultValue = 0): number {
        const value = process.env[`REACT_APP_${varName}`];
        if (value) {
            return Number.parseInt(value, 10);

gugadev

const withPWA = require('next-pwa')
 
module.exports = withPWA({
    pwa: {
        dest: 'public'
    }
})