Ramiro Silveyra d'Avila ramasilveyra

Logging setup for FastAPI

This logging setup configures Structlog to output pretty logs in development, and JSON log lines in production.

Then, you can use Structlog loggers or standard logging loggers, and they both will be processed by the Structlog pipeline (see the hello() endpoint for reference). That way any log generated by your dependencies will also be processed and enriched, even if they know nothing about Structlog!

Requests are assigned a correlation ID with the asgi-correlation-id middleware (either captured from incoming request or generated on the fly). All logs are linked to the correlation ID, and to the Datadog trace/span if instrumented. This data "global to the request" is stored in context vars, and automatically added to all logs produced during the request thanks to Structlog. You can add to these "global local variables" at any point in an endpoint with `structlog.contextvars.bind_contextvars(custom

Basic Tetris HTML and JavaScript Game

This is a basic implementation of the game Tetris, but it's missing a few things intentionally and they're left as further exploration for the reader.

Further Exploration

Score
When a line is cleared, the score should increase based on the number of lines cleared at once. See https://tetris.fandom.com/wiki/Scoring

Googleに入るまでの話 (Developer Relations)

コンテキスト: https://togetter.com/li/1331865

前提条件

部署

グーグルジャパンではなくてUSの本社での採用の話。私が受けたのはSoftware EngineerではなくてDeveloper Advocate。Engineering組織の下についているのでコーディング面接有り。ただし評価項目がSWEとは異なる。

英語

Getting Started With Plug'n'Play

If you use create-react-app, #5136 (released with the 2.0) implements a --use-pnp option that allows you to easily create a new project using PnP! In this case, just use create-react-app --use-pnp together with Yarn 1.12, and you're good to go! 👍

Plug'n'Play is a new initiative from Yarn that aims to remove the need for node_modules. It's already available, and has proved being effective even on large-scale infrastructures. This document describes in a few steps how to quickly get started with it. Spoiler alert: it's quite easy 🙂

First, download a package manager that supports it. Yarn 1.12 already does, so that's what we're going to use! To install it, just follow the instructions on our website: https://yarnpkg.com/en/docs/install

If everything is ok, running yarn --version should give you v1.12.1 or higher. If you don't get this result maybe a

Note:

When this guide is more complete, the plan is to move it into Prepack documentation.
For now I put it out as a gist to gather initial feedback.

A Gentle Introduction to Prepack (Part 1)

If you're building JavaScript apps, you might already be familiar with some tools that compile JavaScript code to equivalent JavaScript code:

Babel lets you use newer JavaScript language features, and outputs equivalent code that targets older JavaScript engines.

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

Demo: Coordinating async React with non-React views

tl;dr I built a demo illustrating what it might look like to add async rendering to Facebook's commenting interface, while ensuring it appears on the screen simultaneous to the server-rendered story.

A key benefit of async rendering is that large updates don't block the main thread; instead, the work is spread out and performed during idle periods using cooperative scheduling.

But once you make something async, you introduce the possibility that things may appear on the screen at separate times. Especially when you're dealing with multiple UI frameworks, as is often the case at Facebook.

How do we solve this with React?

Avoid live "then()-ables"

Like a Promise, await will call any .then() function on its operand. This can be used to create values that change every time they are awaited.

let lastId = 1;
const id = {
  then(fn, errfn) {
    fn(lastId++);
 }

	let comments = [];
	let lastScrollHeight = 0;
	let interval = setInterval(() => {
	// Scroll down to load more comments
	window.scrollTo(0, document.body.scrollHeight);

	// Wait for new comments to load
	setTimeout(() => {
	// Select all comments
	let commentElements = document.querySelectorAll('[data-testid="tweetText"] span.css-1qaijid.r-bcqeeo.r-qvutc0.r-poiln3');

	// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
	// http://creativecommons.org/publicdomain/zero/1.0/

	// HTML files: try the network first, then the cache.
	// Other files: try the cache first, then the network.
	// Both: cache a fresh version if possible.
	// (beware: the cache will grow and grow; there's no cleanup)

	const cacheName = 'files';