Pinter Computing

To center a DIV horizontally

• Make sure the parent element is as wide as the page (width: 100%)
• Set the margin to auto

React example

<div style={{width: '100%'}}>
  <div style={{width: '800px', height: '600px', margin: 'auto', position: 'relative'}}>
  </div>
</div>

To center a DIV only vertically

• Set the position to absolute to take it out of the normal document flow
• Set the top to 50% to line up the top edge of the DIV with the center of the page vertically
• set the transform property to translate(0, 50%)

React example:

<div style={{width: '640px', height: '480px', top:'50%', transform: 'translate(0, -50%)', position: 'absolute'}}>
</div>

To center a DIV horizontally and vertically

• Use similar steps as above for vertical centering, but
  • set both the left and top properties to 50%
  • set the transform property to translate(-50%, -50%)

React example

<div style={{width: '640px', height: '480px', left: '50%', top:'50%', transform: 'translate(-50%, -50%)', position: 'absolute'}}>
</div>

For more information

There is a great article by Jamie Juviler at 11 Ways to Center Div or Text in Div in CSS

To be able to programmatically update Google Sheets, we need to enable the APIs and Service in Google Cloud Platform.

Create a new Google Cloud project

• Log into the Google Cloud Console at https://console.cloud.google.com
• Click the down arrow of the project list
  
• On the Select a project pop-up click the NEW PROJECT button
  
  

Enable the Google Sheet API

• In the upper left corner click the “hamburger” menu icon and select APIs & Services
  
• On the APIs & Services page click the + ENABLE APIS AND SERVICES button
  
• Enter google sheet api into the search box and select the Google Sheets API tile
  
• Click the Enable button
  
• 
  

To display dynamic data on Lucid Charts. we can link Google Sheets to Lucid Chart objects. The Pull fill color from Google Sheets section of the Lucid documents explain how to set the color of an object based on the cell color, but does not mention one important step. To be able to select the Apply Imported Fill Color option, first, we have to change the background color of the Google Sheet cell to any color.

In the Google Sheet

• Select the header of the status column,
• Set the background of the entire column to any color.

In Lucid Charts

• Assign the cell to an object.
• Click the three dots next to the column name.
• Select Apply Imported Fill Color.

When we change the background color of the cell in Google Sheets the color of the object will change too.

Install the Epson ET-3850 scanner driver and scanning utility

• Download the Scanner Driver and Epson Scan Utility from the Driver section.
  • for Epson ET-3850 – Scanner Driver and Epson Scan 2 Utility v6.5.28.0 (or later)
• Double-click the downloaded file and install the application

Connect to the Epson ET-3850 scanner

• Start the Epson Scan 2 Utility
  
• On the Scanner Settings window click the Enable Editing button
  
• Click the Yes button on the Access Control popup to allow changes to your device
• Click the Add button
  
• On the Add Network Scanner window enter a name for the scanner, click the the IP address, and click the Add button
  
• On the Scanner Settings window click the OK button
  
• Close the Epson Scan 2 Utility window with the X in the upper right corner
  

Scan with the Epson ET-3850 scanner

• Start the Epson Scan 2 application
  

When you try to move a layer with a transparent logo or text in GIMP, sometimes the background layer moves.

By default the Move Tool selects the layer of the dragged pixel regardless of which layer is selected. The tool only selects the correct layer if the pixel has at least 25% opacity. If the pixel’s opacity is less than that, it selects the layer under it, usually the background layer.

To force the Move Tool to move the selected layer, select Move the active layer in the tool options, or press Shift while dragging the layer.

Remix uses the loader function to provide a behind the scenes API for the browser side script to supply data in JSON format. The function should return serialized data using the json instruction. When you get the error message:

ReferenceError: json is not defined

Add this line to the top of the script

import { json } from "@remix-run/node";

React web applications pre-render the pages during application build for faster display and “hydrates” them with the client side javascript to make them interactive and to display data. This error can have causes:

Initial url (undefined) does not match URL at time of hydration

An installed NPM module

• npm install styled-components caused the infinite redraw of the index page.

Pizza is awesome, we have never found anyone who does not like it. The Ooni Koda 12 gas fired pizza oven can fully bake a 12 inch pizza in 3 minutes, but we need to rotate it every 20-30 seconds to bake it evenly and avoid burning it on one side. The rotating pizza stone solves the problem and bakes the perfect pizza in 3 minutes.

Materials

• Dreyoo Rotisserie Grill Kit ( $44.99 at Amazon )
  
• Pizza Stone for Oven and Grill 12 inch ( $27.99 at Amazon )
  
• 2 each 4 mm or #6 stainless steel washers.

Tools

• 11 mm drill bit to drill into the stainless steel bottom of the oven.
• Hack saw to cut the stainless steel shaft.
• Sharp ceramic/tile drill bit to drill a dent into the center of the pizza stone to keep it in place on the top of the shaft.
• File to round the tip of the fork and smooth the edge of the cut shaft.

The construction

1. With a 3 mm Allen key remove the match holder from the bottom of the Ooni Koda 12 pizza oven.
2. Drill an 11 mm diameter hole into the center line of the oven, 15 mm from the center line of the match holder’s threaded holes.
   
3. With a file, round the tips of the rotisserie forks to avoid any injuries during construction and usage.
   
4. Flatten the fork to support the pizza stone.
   
5. On a flat surface align the arms of the fork, so the shaft stands straight up.
   
6. Using the stainless steel washers attach the middle slots of the motor bracket to the bottom of the oven using the holes and screws which held the match extender. The 11 mm hole at the bottom of the oven should align with the center of the notch on the bracket.
   
7. With a sharp tile drill make a 3 mm deep, 5 mm diameter dent at the center of the round pizza stone. This will keep the pizza stone centered on the shaft.
   
8. Insert the tip of the shaft into the dent in the center of the pizza stone, and mark the position of the hole in the center of the fork.
   
9. Drill a few mm dent in the shaft with 4, 5, and 6 mm drill bits to guide the screw of the fork.
   
10. Place the straightened fork in the oven, push the shaft through it from the bottom. Align the screw with the dent in the shaft and tighten it.
    
11. Temporarily place the pizza stone on top of the shaft, to make sure the tip of the shaft can reach into the dent at the center of the pizza stone.
    
12. Draw a line on the shaft at the bottom of the motor bracket.
    
13. The final length of the shaft should be 22 mm longer to reach into the hole in the motor enclosure.
    
14. Cut the shaft at the second mark with the hack saw, and smooth the edges with the file.
    
15. Insert the shaft into the hole at the bottom of the oven, align the screw of the fork with the dent on the top of the shaft and tighten it.
    
16. Lift the shaft, slide the motor into the bracket with the cable facing the rear, and insert the shaft into the motor enclosure.
    
17. Place the pizza stone on top of the shaft. Insert the tip of the shaft into the dent at the bottom of the pizza stone.
    
    
    

Baking the perfect pizza

We have a few suggestions to make sure your pizza is as good as it can be.

• Put rice flour on your work surface when you put the toppings on the pizza. Rice four has higher combustion temperature, so it does not burn in the oven.
• Use the Ooni slotted aluminum pizza peel. The dough does not stick to it, and does not burn in the oven, like the wooden peels.

Pre-heat the pizza stone

• Turn on the motor to heat the pizza stone evenly,
• Light the gas heater, set it to high and heat the center of the pizza stone to 400 °C (750 °F).

Bake the pizza 

• Set the gas heater to low,
• Temporarily stop the motor and place the pizza at the center of the pizza stone,
• Start the motor as soon as you can to avoid burning one side of the pizza,
• Remove the fully baked pizza with the pizza peel while the motor is on.

Before you bake the next pizza

During baking, the pizza stone will cool down to close to 260 °C  (500 °F), so the bottom of the next pizza will not bake properly. Before you bake the next pizza

• Keep the motor on to heat the pizza stone evenly,
• Remove most of the rice flour from the pizza stone with a heat resistant tool, so it does not burn during stone re-heating,
• Set the gas heater to high and re-heat the center of the pizza stone to 400 °C (750 °F),
• Don’t forget to set the gas heater to low again before you place the next pizza into the oven!

If your PostgreSQL database table contains “timestamp with time zone []” or “timestamp without time zone []” type columns and you want to convert them to “timestamp with time zone” or “timestamp without time zone” type, add the USING directive to the ALTER COLUMN command to tell PostgreSQL how to convert the array to the scalar value. In this example we will pick the first element of the array:

ALTER TABLE public.application
	ALTER COLUMN last_updated_date TYPE timestamp with time zone USING last_updated_date[0]

React web applications (Next.js, Remix) use React hooks to transfer data between the server side and browser side code. Remix uses the loader() function to run code on the server to produce data for the web page, and the

const { posts } = useLoaderData<typeof loader>();

instruction in the browser code to receive it.

When the compiler throws the TypeScript error:

TypeError: Cannot destructure property ‘…’ of ‘useLoaderData(…)’ as it is null.

add || {} to the end of the line to provide a default value:

const { incidents } = useLoaderData<typeof loader>() || {} ;