Cannot build underground in Cities: Skylines editor

In Cities: Skylines the Page Up and Down buttons set the elevation of the road and rail line. In the editor the Page Down does not take you below ground with negative numbers.

To build underground in the Cities: Skylines editor subscribe to the Network Anarchy mod.

  • Enable Anarchy mode, and press the Page Down button to set the negative elevation

Water required error message in Cities: Skylines

When we try to create an outside ship connection and the waterway is not deep enough, we get the

Water required

error message.

To be able to create the outside ship connection, temporarily raise the sea level. It will flood your map, but after creating the connection you can lower the sea level, and the water will evaporate.

  • In the menu select the Water tool and click the Move Sea Level icon,
  • On the left side write down the current sea level, and move the slider to raise it,
  • Wait until the sea floods the area of the planned connection,
  • Make the outside ship connection,
  • Set the sea level back to the original value.

Tunnels and canals are buried in the Cities: Skylines editor

Cities: Skylines only fully renders the unlocked tiles. Locked (not yet purchased) tiles and all tiles in the editor are not fully rendered to save processor power. When you create a tunnel entrance or a canal, it is buried under earth.

Subscribe to the “Common Ground” mod to fully render any number of tiles you specify. The Options page of the mode allows you to select what to render in the game and in the Editor. If you use the 81 Tiles mod in the game, you can disable the Common Ground mod, but you still need it in the editor, as we need to disable the 81 Tiles mod while using the Editor.

Cronometer cannot connect to Strava

Cronometer is an app to record food you eat and get a report on the consumed calories and nutrients. It can automatically retrieve exercise information from Strava to calculate the burned calories.

For some reason recently we cannot connect to Strava from the Cronometer app. To successfully connect Cronometer to Strava to get exercise information:

  • Log into the Cronometer web site at https://cronometer.com/
  • On the left margin select Settings, Devices
  • On the Strava line click Connect to Strava
  • Enter the Strava user name and password to authorize the connection

Create a Next.js React web site

Next.js is a framework based on React to build a “full stack” dynamic web application with routing and data handling capability. React provides the page components on top of HTML and JavaScript, Next.js routes between pages, and displays and modifies the data in a database.

Configure the development environment

  • Install npm
  • Make sure npx is available on your workstation
    npx comes with npm 5.2 and higher

Create the Next.js web application

Create the web site skeleton

  • Create a parent directory for the project
  • Execute in the terminal
    npx create-next-app@latest
    • To select between the options in iTerm use the left and right arrow key on the keyboard

Start the development server

  • Step into the web application directory
    cd MY_PROJECT_NAME
  • Start the server
    npm run dev
  • Navigate to http://localhost:3000 to view the site

Source control

When we created the Next.js application above, it created a .gitignore file and initialized the Git repository in the root of the web site. If you want to place more folders in the Git repository, like Terraform files to create cloud resources, the Next.js application will not be in the root of the repository anymore. As some of the entries in the .gitignore file refer to the root with the leading slash, Git will not ignore large libraries.

  • Move the .gitignore file from the web application directory to the higher level where you want to initialize the Git repository
  • Delete the .git directory in the web application folder
  • Navigate to the root directory of the Git repository
  • Open the .gitignore file and remove the leading slashes from the following lines, because the Next.js application is not in the root of the repository anymore
    /node_modules
    /.pnp
    /coverage
    /.next/
    /out/
    /build

Environment variables

.env

Next.js now supports the .env file to declare environment variables during development

Environment variables in the browser

If the environment variable name starts with NEXT_PUBLIC_ the variable is available for the JavaScript code in the browser via process.env instruction:

console.log('Version', process.env.NEXT_PUBLIC_VERSION);

Building forms

For more information see https://nextjs.org/docs/guides/building-forms

Create a React web site

The React framework adds components on top of HTML and JavaScript to create dynamic one-page web applications. It does not have routing and data handling capabilities, to create a full stack web application use Next.js or Remix.

Configure the development environment

  • Install npm
  • Make sure npx is available on your workstation
    npx comes with npm 5.2 and higher

Create the React web site skeleton

Create the web site skeleton

View the new React web site

  • Step into the web application directory
    cd MY_WEB_SITE_NAME
  • Start the web application
    npm start
  • If asked, allow iTerm to control Google Chrome
  • Your React application loads in a new browser window at http://localhost:3000/

Test the application

By default the test are related to the changes made since the last Git commit.

  • If running, stop the application by pressing CTRL-C
  • Open the terminal in the application directory
    cd MY_WEB_SITE_NAME
  • Execute the test
    npm test

Deploy the application

Build the application

The application build process creates the minified version of the site in the “build” directory

  • To build a minified bundle of the application execute
    npm run build

Using GitHub Copilot

GitHub Copilot is a ChatGPT based AI pair programmer extension for Visual Studio Code, Visual Studio, JetBrains IDE, and Neovim. It is most effective in Python, JavaScript, TypeScript, Ruby, Go, C# and C++.

Installation

GitHub Copilot has personal and business subscription model. Start your free trial at https://github.com/features/copilot

Ask for suggestions

  • Create a file with the standard file extension of the language to indicate the preferred programming language to the AI.
  • Start to create a function with the name that describes its purpose (in this example we will use the JavaScript syntax)
    function getDaysInMonth(month, year) {
    (If your IDE automatically adds the closing curly brace, remove it, otherwise Copilot does not offer solutions)
    or
  • Create a comment to describe the functionality
    // Express server on port 3000 and return the current date

Select the suggestion

  • Use the Alt-[ and Alt-] on Windows, Option-[ and Otion-] on Mac to cycle through the suggested solutions and press Tab to accept it, or Esc to reject all of them.

See all suggestions in a new tab

  • Press Ctrl-Enter to open a new tab, and a few seconds later all suggestions will be listed in the new tab.
  • Click the Accept Solution link above the suggestion to insert it into your file.

For more information see the documentation

To activate and deactivate the GitHub Copilot

  • In the lower right corner of the editor click the Copilot icon
  • Select the scope to disable GitHub Copilot: for all languages, or for a specific language only.

The clicking area of the object in Phaser does not cover the entire image

When Phaser constructs the input area of an object where the user’s click will trigger the action, it tries to read the dimensions of the image. It usually works, but in some cases the area does not cover the entire image.

To display the input area add the enableDebug() function to your code.

  • First, set the button interactive
  • Enable this.input.enableDebug() on the button
this.nextPlayerButton.setInteractive();
this.input.enableDebug(this.nextPlayerButton);

Error: EACCES: permission denied, open …

When Node.js libraries cannot open files on the local disk, the file does not exist at the specified location, or the file or folder permission are not correct.

To check the permission of the file see Get the octal file permission number of a file or directory

If you get the error message related to the AWS credential and config files,

Error: EACCES: permission denied, open ‘/Users/…/.aws/config’ or

Error: EACCES: permission denied, open ‘/Users/…/.aws/credentials’

  • Set the permission of the AWS config and credentials files to 744
sudo chmod 744 /Users/$USER/.aws/config
sudo chmod 744 /Users/$USER/.aws/credentials