Numbrillig is a web-based app for use with tablets and smartphones allowing children to explore interesting numbers, patterns, sequences, and mathematics beyond their age (Hypernumeracy).
Screenshots can be found at the end of this file.
- Click on any number to proceed to next in sequence
- Touch can be used to allow scrolling of large numbers or zooming in/out.
- Tested in Dark Mode on iPad.
⚠️ Photosensitive users should be aware that clicking may introduce flashes between sequences. Rapid clicking may cause repeated flashing.
- PowerShell
- Install PowerShell 7.3 or greater
- Install using MSI.
- Check the following install options in addition to any default options already selected for install:
- Add 'Open here' context menus to Explorer
- Add 'Run with PowerShell 7' context menu for PowerShell files
- Install PowerShell 7.3 or greater
- NVM-Windows
- Node.js
- Node LTS 18.17.0 Windows x64 Installer
- Check the install option for Additional Node Tools.
- Next.js
- $>
npm init - $>
npm install next@latest react@latest react-dom@latest - $>
npm install create-next-app@latest --save - $>
npx create-next-app@latest
First, run the development server:
npm run dev
# or
yarn dev
# or
pnpm devOpen http://localhost:3000 with your browser to see the result.
You can start editing the page by modifying app/page.tsx. The page auto-updates as you edit the file.
This project uses next/font to automatically optimize and load Inter, a custom Google Font.
To run prod:
npm run buildnpm run start
Above commands have also been created as PowreShell scripts:
.\run-dev.ps1.\run-prod.ps1
- ⭐ Next.js Docs
- Static Exports
Since Next.js supports this static export, it can be deployed and hosted on any web server that can serve HTML/CSS/JS static assets.
- Unsupported Features:
- rewrites in next.config.js
- redirects in next.config.js
- headers in next.config.js
- Middleware
- Incremental Static Regeneration
- Unsupported Features:
- Passing state between pages
- Querystring: useSearchParams
- Lessons Learned:
- Avoid
next/routerand usenext/navigationinstead. See: App Router Migration (from Pages to App)
- Avoid
- Deploy Next.js Hybrid website to Azure Static Web Apps
- In
next.config.jsenablestandalonefeature:
module.exports ={ output:"standalone", }
- In
- Deploy static-rendered Next.js websites on Azure Static Web Apps
⚠️ Deploying to Azure Static Sites may result in error:The size of the function content was too large. The limit for this Static Web App is 104857600 bytes- package.json modified to force removal of cache during build.
- Builds should happen using Git Bash now instead of PowerShell, or call
npm run psbuildto run a build using PowerShell, which omits the cache removal step.
- Builds should happen using Git Bash now instead of PowerShell, or call
- See following link for further details.
- package.json modified to force removal of cache during build.
- See also: Provisioning Azure Resources
- Custom Domains
Scripts below assume that developer is deploying to DEV environment. If deploying to other environments, all references to the resource group will change.
azcli: Get Started with Azure CLI
az login
azcli: Managing multiple subscriptions with AZ CLI
Lists all subscriptions and sets a specific one. Useful if user has access to multiple subscriptions (i.e., Corporate, personal, MDN, etc.)
az account show --output table
az account subscription list --output table
az account set --subscription "<subscriptionid>"
az account show --output table
az group create -l canadacentral -n "rgNumbrillig"
- Calculus, limits
- Geometry
- Trigonometry
- Names of large polygons
- Giroux Studio Large Numbers series
- list of mathematical shapes
- Names of large numbers
- Special Dates, Holidays, Celebrity/Scientist/Academic birthdays
☝️ Touch to scroll and zoom the viewport to view larger numbers.
