Issue 3

Today’s Issue: Neon’s opens-source cloud PostgreSQL database (try saying that 5 times fast 😅) and dropping some code-splitting know-how

Welcome to #3.

First Up

I am currently deep into a developer challenge with $1,000 on the line where I am building an open-source starter kit based around Neon’s database. So who the heck is Neon?

Neon .tech offers a cloud-native, serverless PostgreSQL experience, making it easier for developers to manage and scale their databases without worrying about any underlying infrastructure. They achieve this by automating database operations, including the complicated boring stuff like provisioning, scaling, and backups so we developers can focus on what we do best…building applications rather than managing databases.

What separates Neon from similar services is that it brings version control concepts to databases by allowing developers to create branches of your database, providing isolated environments for experimentation, development, testing, or production. With this branching feature, you can quickly spin up a new branch from any point in your database’s history, perform updates, run tests, or experiment with new features. Once you’re satisfied with the changes, you can either merge the branch back into the main database or discard it, all without any risk to your production data (You can still push to Prod on a Friday at 4 and hope nothing breaks if you’d like 😁).

I’ll post a link to the starter kit I built in the next newsletter, so stay tuned!

Code Splitting 101

Code splitting in JavaScript is a technique that improves application performance by breaking down code into smaller chunks. These chunks, or bundles, are loaded as needed, reducing the initial load time and enhancing the user experience.

One of the simplest ways to implement code splitting is through dynamic import() statements. Unlike static imports, dynamic imports allow you to load a module only when it’s needed. Here’s an example:

import('./module').then(module => {
 module.doSomething();
});

For single-page applications (SPAs), route-based code splitting is a great approach. This allows you to load different chunks of code depending on which route the user navigates to. In a React application, this is done using React.lazy and React.Suspense. Here’s an example:

const Home = React.lazy(() => import(‘./Home’));

const About = React.lazy(() => import(‘./About’));

function App() {

    return (

        <Router>

            <Suspense fallback={<div>Loading…</div>}>

               <Route path=”/home” component={Home} />

               <Route path=”/about” component={About} />

            </Suspense>

        </Router>

    );

}

In this example, the Home and About components are only loaded when the user navigates to their respective routes. This keeps the initial bundle smaller with additional code being loaded on demand.

If you’d like to read a more in-depth article, check out my recent post on it!

Till Next Time

That’s all I have to say this week. If you have any questions about anything discussed above or anything else, just shoot me back an email!

Have a great weekend and as always, happy coding!