vercel VS v8.dev

I hosted my portfolio in Vercel. The main reason why I chose it is the hosting has great support for NextJS and IMPORTANT THING, it is total FREE 🤑 (with my usage). And I have use GitHub Action for deploy it automatically when I make or merge change into main branch.

To do this just head over to Vercel and log in if you're not already logged in. If this is your first project, you'll be seeing something like this.

function getContentSecurityPolicyHeaderValue( nonce: string, reportUri: string, ): string { // Default CSP for Next.js const contentSecurityPolicyDirective = { 'base-uri': [`'self'`], 'default-src': [`'none'`], 'frame-ancestors': [`'none'`], 'font-src': [`'self'`], 'form-action': [`'self'`], 'frame-src': [`'self'`], 'connect-src': [`'self'`], 'img-src': [`'self'`], 'manifest-src': [`'self'`], 'object-src': [`'none'`], 'report-uri': [reportUri], // for old browsers like Firefox 'report-to': ['csp'], // for modern browsers like Chrome 'script-src': [ `'nonce-${nonce}'`, `'strict-dynamic'`, // force hashes and nonces over domain host lists ], 'style-src': [`'self'`], } if (process.env.NODE_ENV === 'development') { // Webpack use eval() in development mode for automatic JS reloading contentSecurityPolicyDirective['script-src'].push(`'unsafe-eval'`) } if (process.env.NEXT_PUBLIC_VERCEL_ENV === 'preview') { contentSecurityPolicyDirective['connect-src'].push('https://vercel.live') contentSecurityPolicyDirective['connect-src'].push('wss://*.pusher.com') contentSecurityPolicyDirective['img-src'].push('https://vercel.com') contentSecurityPolicyDirective['font-src'].push('https://vercel.live') contentSecurityPolicyDirective['frame-src'].push('https://vercel.live') contentSecurityPolicyDirective['style-src'].push('https://vercel.live') } return Object.entries(contentSecurityPolicyDirective) .map(([key, value]) => `${key} ${value.join(' ')}`) .join('; ') }

This is a demo project to demonstrate how a Web2 frontend hosted on VERCEL can access a Motoko backend canister on the Internet Computer using Server Side Rendering (SSR).

Easily deploy your Next.js app with Vercel by clicking the button below:

Vercel is an open-source platform for hosting and deploying web applications and websites.

Vercel: Deploy websites and applications with automatic deployments.

Then, head over to Vercel and import the repository. Once you have imported the repository, head over to the environment variables and add the following environment variables:

Vercel – deployments

Platform as a Service (PaaS) is a term that captures tools built for developers to use where they don’t need devops engineers to deploy to the cloud. Heroku was the “category-defining” product here, and modern successors include Vercel, Render, Railway, Replit, platform.sh, Aptible, Northflank, and more. We have to say that there are some amazing products in this category. Developer Experience is at a premium!

Semi-related - I saw this trick on https://v8.dev a while back, but `filter: hue-rotate(180deg) invert();` can be a neat CSS trick to 'dark mode' some kinds of graphics. The `hue-rotate` help a bit to keep 'blues blue' etc.

It's far from perfect, but it's a neat trick to be aware of.

V8 is a high-performance JavaScript engine developed by Google. Its purpose is to convert JavaScript code into machine code for execution by the underlying hardware. Primarily developed by the V8 team at Google, the engine focuses on speed and efficiency. In particular, it relies on just-in-time compilation and uses inline caching for high performance.

V8

Exactly the same as JavaScript engines. Be it Mozilla's SpiderMoneky, Google's V8, Apple's Webkit, or Microsoft's Chakra. No matter how specific we draft a specification there is always room for interpretation. Every team has a different take on what part of a spec is describing. Oftentimes it's just a matter of varying pros and cons of different approaches on the road to matching spec; various teams just kind of have to pick a direction and run with it. Other times a spec is not only too vague, but clearly short-sighted to boot.

Remember that we earlier established that every source gets parsed into an AST at some point before it gets compiled or interpreted. For example, platforms like Nodejs and chromium-based browsers use Gooogle's V8 engine behind the scenes to run JavaScript and of course, some AST parsing is always involved before the interpreter kicks in. I looked V8's source and I discovered it uses its own internal parser to achieve this.

While Node.js uses Google's V8 engine that power's Chrome browser, Bun uses JavaScriptCore (JSC), which is an open source JavaScript engine developed by Apple for Safari.

While the idea of server-side JavaScript was not novel, what powered Node.js was! The V8 engine, birthed by Google for Chrome, was now driving Node.js, bringing unparalleled speed and performance to JavaScript execution.

V8 JavaScript Engine

Node runs on the V8 JavaScript engine, which handles memory allocation. The entirety of memory used for a running Node application is held in what is known as a Resident Set. This includes: