DEV Community: Niall Maher

No More Free Tier on PlanetScale, Here Are Free Alternatives

Niall Maher — Fri, 08 Mar 2024 09:23:17 +0000

PlanetScale decided to remove its free tier. Many developers even call it a "rug pull." As you can imagine, many developers with hobby projects on their free tier are furious.

You can check out their statement here.

Rather than getting into the battle of what I think about the whole situation, I wanted to create a list of alternatives so if you are trying something out or want to migrate you have some cheap/free options:

Supabase - PostgreSQL

Fantastic free tier!

While you can use Supabase just for the PostgreSQL database, it offers much more. Supabase calls itself an "open-source alternative to Firebase".

It provides devs with a suite of tools, the core offering being a PostgreSQL database, authentication, real-time subscriptions, and storage. Its free tier offers a generous amount of database usage, making it an excellent choice for developers building all sorts of applications.

Neon - PostgreSQL

Fantastic free tier!

If you got used to branching on PlanetScale, Neon has you covered!
Neon is a fully managed serverless platform with a free tier. By separating storage from computing, Neon introduces autoscaling, branching, and essentially unlimited storage, addressing key challenges in modern application development.

Designed for efficiency and scalability it'll be hard to go wrong with Neon!

Turso - SQLite

Fantastic free tier!

Turso's free tier offers 9 gigabytes of storage! But it excels in another area. The simplicity of SQLite with the flexibility to deploy anywhere in the world, including within your infrastructure.

Its real appeal is its edge deployments - this unique approach ensures ultra-low latency, potentially down to microseconds, which is ideal for applications requiring immediate data access regardless of location (especially if your app is deployed in edge locations).

Edit: The founder of Turso (Glauber Costa reached out on X to give a discount code for PlanetScale users:

"Would appreciate it if you could add the special promotion for planetscale users on the post: http://turso.tech/turso-forever"

CockroachDB - SQL

Fantastic free tier!

Free for use up to 10 GiB of storage and 50M read units per month. Which should be more than enough for most hobby projects. CockroachDB offers a distributed SQL database solution that emphasizes reliability and scalability for modern applications.

AWS RDS - Multiple options

Has 750 hours and 20gb storage on the free tier

AWS offers 750 hours of Amazon RDS and 20 gigabytes of storage on its free tier (Single-AZ db.t2.micro, db.t3.micro, and db.t4g.micro Instances usage running MySQL, MariaDB, and PostgreSQL). However, AWS also gives founders a lot of credits, so if you plan on scaling but are tight on a budget, AWS can be very founder-friendly.

What other options are you considering instead of PlanetScale?

Let me know in the comments below. 💬

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉

CSS Text Transform: You Don't Need JavaScript to Capitalize Your Text

Niall Maher — Sun, 16 Apr 2023 15:19:11 +0000

Sometimes we over-engineer things...

In this previous article I showed you how to capitalize a string with JavaScript.

Here's a snippet from it:

let str = "hello world";
let capitalizedStr = str.slice(0, 1).toUpperCase() + str.slice(1);
console.log(capitalizedStr); // "Hello world"

This might be useful in some cases, but if you are doing it to display a value, there is an easier way.

CSS Text Transform Property

The CSS text-transform property is used to specify text capitalization in an element. This property can be applied to any text-containing element, like paragraphs, headings, lists, etc. The text-transform property accepts the following values:

none - Leaves the value unchanged
capitalize - Capitalize the value
uppercase - Uppercase the value
lowercase - Lowercase the value

So to capitalize our paragraphs, it would be as simple as applying the following in our CSS:

p {
  text-transform: capitalize;
}

The CSS text-transform property is a powerful tool for manipulating text styles on a web page, making them convenient to know. 🦾

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉

The Page Visibility API: Improve User Experience and Performance

Niall Maher — Thu, 06 Apr 2023 10:02:26 +0000

I am always excited to share insights about lesser-known yet powerful APIs in the modern web ecosystem.

Today, we'll dive into the Page Visibility API. This invaluable tool helps developers optimize their web applications by detecting when users are actively viewing or interacting with a page.

What is the Page Visibility API?

The Page Visibility API allows developers to determine whether a web page is visible to users, partially visible, or hidden.

Getting Started with the Page Visibility API

Let's explore the two main components of the Page Visibility API: the document.hidden property and the visibilitychange event.

document.hidden property

The document.hidden property is a boolean value that indicates whether the page is currently hidden or visible. If the page is hidden, the property returns true; if visible, it returns false.
Example:

if (document.hidden) {
  console.log("The page is hidden");
} else {
  console.log("The page is visible");
}

visibilitychange event

The visibilitychange event is fired when the visibility state of the document changes. Adding an event listener to the visibilitychange event allows you to execute specific functions or actions when the visibility state changes.

Example:

document.addEventListener("visibilitychange", function() {
  if (document.hidden) {
    console.log("The page is hidden");
  } else {
    console.log("The page is visible");
  }
});

A Practical Example

Here's an example of a video that auto-plays and pauses if you change tabs from this article.

Check out the timer and watch how it "magically" stops when you go to a different tab.

Dive into the CodePen to explore the code.

When to use the Page Visibility API

The Page Visibility API should be used when you need to optimize the performance, user experience, or resource usage of your web application based on its visibility status.

Here are some common use cases when you should consider using the Page Visibility API:

Media playback: If your web application plays videos or audio, you can use the Page Visibility API to pause playback when the user switches to another tab or minimizes the browser and resume playback when they return. This reduces bandwidth usage and avoids unnecessary consumption of the user's battery or system resources.
Animations: When a page contains resource-intensive animations, you can use the API to pause or reduce the quality of the animations when the page is not visible and resume or restore the rate when the user returns to the page.
Real-time data updates: If your application displays real-time data (e.g., stock prices, weather updates), you can use the Page Visibility API to adjust the polling frequency or temporarily stop fetching data when the user is not actively viewing the page. This reduces server load and network traffic, improving performance and saving resources.
Auto-saving drafts: In a text editor or content management system, you can use the Page Visibility API to trigger an auto-save when the user leaves the page or moves to a different tab, ensuring that the user's work is saved without manual intervention.
Web analytics: By tracking the visibility status of your pages, you can collect more accurate analytics data about user engagement and session duration. This helps you make better-informed decisions about your web application's design and performance.

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉

Alias Essentials: A Step-by-Step Guide to Creating Terminal Shortcuts

Niall Maher — Wed, 05 Apr 2023 06:26:30 +0000

As a web developer, we are no strangers to playing in the terminal. Whether running scripts, managing files, or installing packages, you rely on terminal commands to streamline your workflow.

However, long and complex command sequences can slow you down and hinder productivity. That's where creating custom alias commands come in handy.

This article will guide you through creating alias commands in the terminal, allowing you to work more efficiently and effectively.

What are Alias Commands?

Alias commands are shorthand versions of longer commands that you frequently use.

They can be easily created and customized to suit your specific needs.

Creating an alias command allows you to execute a long command sequence by typing just a few characters, saving time and minimizing the chances of making errors.

Let's jump into creating aliases. 👇

Temporary Aliases

Creating a temporary alias is a simple process. In your terminal, type the following:

alias short_command="your_long_command"

For example, if you frequently list the contents of a directory with the -l flag to view them in a detailed format, you can create an alias for this command:

alias ll="ls -l"

Now, whenever you type ll in the terminal, it will execute ls -l instead.

Remember that temporary aliases will only last for your current terminal session.

Persistent Aliases

You'll need to add the alias to your shell's configuration file to create a persistent alias that remains available across different terminal sessions and system restarts.

For Bash users

Open your .bashrc file in your favorite text editor, for ease I'm using nano:

nano ~/.bashrc

Add your alias to the bottom of the file:

alias short_command="your_long_command"

Save the changes and exit the text editor.
Either restart your terminal so the aliases are available or else to apply the changes immediately, run:

source ~/.bashrc

For Zsh users

The process is similar, but you'll need to edit the .zshrc file instead:

nano ~/.zshrc

Then restart your terminal to apply the changes.

If you are not using Bash or Zsh, a quick search on the internet will help you find the config file name so you can find it and modify it.

Best Practices for Creating Aliases

Choose concise and descriptive names for your aliases that are easy to remember.
Group related aliases together in your shell's configuration file for better organization.
Add comments to your configuration file to explain the purpose of each alias.
Regularly review and update your aliases to ensure they remain relevant to your workflow.

Leave a comment below with your favorite one. 👇

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉

Transform Your CSS Game: Bookmark These 10 CSS Generators

Niall Maher — Tue, 04 Apr 2023 07:45:02 +0000

Designing and developing modern, responsive websites can be a challenging task. However, with the right tools, you can easily streamline your workflow and create stunning web designs. In this article, we will introduce you to 10 CSS generators every web designer and frontend developer should have in their toolkit.

CSS Grid Generator

Build complex CSS Grid layouts with ease using the CSS Grid Generator. Add and remove columns and rows, adjust gaps, and align content with this powerful and intuitive grid-based layout tool.
https://cssgrid-generator.netlify.app/

Flexbox Generator

Creating responsive and fluid flexbox layouts has never been more intuitive. The Flexbox Generator allows you to adjust alignment, direction, wrapping, and other properties, all while viewing the changes in real-time.
https://the-echoplex.net/flexyboxes/

CSS Animation Generator (Animesta)

The CSS Animation Generator offers a comprehensive library of pre-built animations that you can customize to fit your needs. Choose from various animations, and tweak the duration, delay, and other settings to create the perfect effect.
https://animista.net/

CSS3 Patterns Gallery

A collection of visually appealing CSS patterns that you can use as backgrounds in your projects. Browse the gallery, customize the patterns, and copy the generated code.
https://leaverou.github.io/css3patterns/

Fancy Border Radius Generator

Design unique and complex border-radius shapes with the Fancy Border Radius Generator. Create elliptical and irregular shapes by adjusting values and previewing the result, then simply copy the CSS code.
https://9elements.github.io/fancy-border-radius/

Filters Generator

Achieve stunning visual effects by generating CSS filters such as blur, brightness, contrast, grayscale, and more. Customize filter values to create the perfect effect and copy the generated code for your project.
https://www.cssfiltergenerator.com/

CSS Arrow Please

A simple CSS arrow generator that allows you to create tooltip-like arrows with customizable properties such as size, color, and position. Preview your design and then copy the generated code.
https://cssarrowplease.com/

Box Shadow Generator

Craft the perfect shadow for your elements with the Box Shadow Generator. Customize the shadow's color, blur, spread, and position to create a professional and polished look.
https://html-css-js.com/css/generator/box-shadow/

SpinKit

A collection of simple, elegant loading spinners created using CSS animations. Browse the gallery, select a spinner, and copy the code to add a stylish loader to your web project.
https://tobiasahlin.com/spinkit/

Clippy

Not Microsofts Clippy (although there is a JS library for that).
A fun and easy-to-use tool for generating CSS clip-path shapes. Select a predefined shape or create your own by adjusting points on the canvas, then copy the generated code to your project.
https://bennettfeely.com/clippy/

Leave a comment below with your favorite one. 👇

Follow me on Twitter or connect on LinkedIn.

🚨 Want to make friends and learn from peers?
You can join our free web developer community here. 🎉

An Introduction to Semantic Versioning

Niall Maher — Mon, 23 Aug 2021 11:01:04 +0000

Semantic versioning is a system to help developers, project managers, and consumers have a universal way of understanding the release process. Semantic versioning is some guidelines so that we can understand what is happening in a release.

More importantly for us coders, semantic versioning will let us know if a change will break our code.

You will find most of the major projects in the wild on GitHub that use Semantic Versioning.

Major Version

There are two times to increment this version when there is a new

When we increment this version, it means that there are backwards-incompatible changes in this release. The API has changed and may contain breaking changes for users of the API.

Reset both minor and patch versions after the major number has been incremented.

If we were making a major release for 1.23.11 it would become 2.0.0.

Minor version

We increment the minor version when adding new features or functionality that do not break or change the existing API. When you increase the minor version, reset the patch version to zero.

Use this when you are making non-breaking changes that are not a bug fix.

If we were making a minor release for 1.23.11, it would become 1.24.0.

Patch version

Patch versions are used for bug fixes. This is when there are no functionality changes in the updates. There is no limit to these numbers, and we do not need to reset any other numbers.

If we were making a patch release for 1.23.11, it would become 1.23.12.

Pre-releases and build

We won't dive deeply into this syntax as there are many different ways to use it and warrant an article of its own, but I do want you to be aware of how to read pre-releases. But mainly, this is used when we wish to release software informally to some users for testing purposes. These are called pre-releases.

Pre-releases may not be stable or compatible with the previous major, minor and patch versions that they imply.

As an example, 1.23.11-beta.1, our pre-release identifier has two parts. The tag "beta" and a version "1". You might also see some build data also appended, such as the commit from which the build came from, eg. 1.23.11-beta.1+nialljoemaher-2bf235.

For a deeper dive, I have added a couple of links below to some fantastic articles that helped me understand the pre-release tagging.

For the official Semantic Versioning guide - https://semver.org/

A more detailed guide and awesome article - https://developerexperience.io/practices/semantic-versioning

Another one I liked while doing some research - https://devopedia.org/semantic-versioning

Happy coding! 💜

Follow me on Twitter

Subscribe on Codú Community

5 npm Tips/Tricks You (Probably) Don't Know 🚀

Niall Maher — Sun, 17 Jan 2021 09:21:39 +0000

Well, this article might boost your productivity but at the very least it will impress some of your colleagues with your new skills. People will now perceive you as smarter and potentially more attractive - this may be slight dramatics to gain a few more clicks. 🙈

If you want the video version check it out below, if you are happy reading scroll on my friend... 📚

1. List available scripts

To easily check all the available scripts in a project just run:

npm run

This gives you a lovely output showing you the commands like this:

2. List installed packages

npm list

This shows us probably too much because we see the dependencies of our dependencies…

Use the --depth to limit the depth of your search

npm list --depth=0

As you can see the output when you limit the depth:

3. Open a package's homepage or repo

I really like this feature because you can quickly get the documentation for the packages.

To automatically open the packages homepage you can run:

npm home PACKAGE_NAME

To open the repository you can just run:

npm repo PACKAGE_NAME

This is super handy so you don't have to go Googling looking for the docs or npm pages and can quickly access the information you need on packages you don't know.

4. Show all the available versions for a package

To get the latest version of a package we can run:

npm v react version

Or for all the versions we just have to make "version" plural.

npm v react versions

We then get a lovely output of all the available versions which is super handy if you want to check what's new/old or if there are any alpha releases to try out.

Here's a piece of the output from running npm v react versions:

5. Look for outdated packages

The outdated command will check the npm registry to see if any of your packages are outdated. It will print out a little table in your command line showing the current version, the wanted version, and the latest version.

npm outdated

If you see the packages in red like in my sample it means there are some major vulnerabilities and they should be updated. As you can see in this 4-year-old project it's all a nice healthy red...

If you have wanted versions different than your current version you can actually run npm update to safely update these packages.

I think a better way for updating and checking for outdated stuff is actually running the npm audit command, this gives a lot more detail. I didn't include it as a tip because it's always screaming at us to run it in the console when we install dependencies.

Visual Studio Code Bonus Tip! 🏆

A lot of people don't know this but you can actually run your scripts directly from inside Visual Studio Code with their lovely interface.

Look for the "NPM Scripts" on the bottom left of your panel.

You can open your scripts from here and just press the play icon to kick it off. I like this because it's a clear and easy way to do things for people that might not be too familiar with npm.

If you can't see this make sure it's active in your settings. 💜

Any other cool tricks you like to use to speed up your workflow?

Follow me on Twitter

Subscribe on Codú Community

🔎 Easy Autocomplete / Suggestions for Inputs with just HTML5 | datalist tag

Niall Maher — Tue, 12 Jan 2021 08:22:59 +0000

Sometimes you would like to suggest some options to a user as they type something into an input. Maybe there are popular search categories or tags that people are looking for. You could, of course, implement an API driven feature, or if you want to get a quick way for it to be up and running why not just use the datalist tag?

In case you want to watch me mess around with the datalist tag you can watch it here or else keep scrolling to read.

Video showing datalist in action.

The HTML <datalist> element contains a set of <option> elements that represent the permissible or recommended options available to choose from within other controls. — MDN

Datalist acts as a hybrid between a normal input and a select field where it allows users to either choose a suggested option, see suggestions as you type, or add in their own option.

So how does it work?

Let’s show you how to add the datalist tag to a regular old <input type="text"> as a simple example (and probably the most common one you will use).
datalist will work nearly identically to a select tag taking inner options.

<input type="text" id="programming_language" list="languages"/>
<datalist id="languages">
 <option value="JavaScript"></option>
 <option value="Python"></option>
 <option value="Java"></option>
 <option value="HTML">Stop being a troll</option>
</datalist>

The important thing you will see here is that our input takes a list as an option that directs to the id of the datalist you want to use to populate the input.

You can also add in some inner notes so in this example you will see if someone starts typing “Html” as their favorite programming language, we can show a little note telling them to stop trolling us…

The other really cool thing about datalist is that it isn’t just strictly for inputs with a type of text. You can use it to add some suggestions to pretty much any tags including date and color tags.

Here’s an example of it in use with a color picker:

<label for="pick_color">Pick a color</label>
<input type="color" id="pick_color" list="colors"/>
<datalist id="colors">
 <option value="#155AF0"></option>
 <option value="#F107BA"></option>
 <option value="#2B2B2B"></option>
</datalist>

I’m a big fan of learning by hacking so jump straight into this CodePen to try it out for yourself:

Example of the datalist tags in action
When to use this? Since this will add DOM elements, I would suggest using this when you don’t have a whole database worth of suggestions (maybe less than 50 or so is a good rule of thumb for me).

Until the next one, happy coding! ❤

Follow me on Twitter

Subscribe on Codú Community

Video Chat 📹 | What's New in Vue 3 and How to Learn Vue js in 2021 with Chris Dixon

Niall Maher — Tue, 08 Dec 2020 17:10:54 +0000

I get bullied by Vue-ers all the time about not writing Vue so Chris is here to educate me!

In this episode, I talk to Chris Dixon from https://chrisdixon.dev/ all about learning Vue, what's new in Vue 3 and his brand new Vue 3 course.

Vue.js is an approachable, flexible, maintainable, and testable JavaScript framework. If you have an existing application you can use Vue without rewriting your entire application.

Check out Chris's course here:
🔗 https://chrisdixon.dev/courses/vue-3/

Free JavaScript Projects by Chris:
🔗 https://fun-javascript-projects.com/

Follow Chris on Twitter:
🔗 https://twitter.com/chrisdixon161

Join the Codú Community Discord:
🔗 https://discord.gg/FvunZdr

Follow me on Twitter

Subscribe on Codú Community

Chrome Extensions You Should Install Today

Niall Maher — Wed, 11 Nov 2020 10:35:06 +0000

In this article, we will look at five of my favourite Chrome Extensions that I use nearly every day.

I recently went through my Chrome extensions to clean out all of the ones I hadn't used recently (over a dozen it turns out). During this time, I took a little time to think which ones I had used over the past week or at least most weeks, and that's what inspired this article.

I chat about all of these in the video version of this article:

My Next.js video version of this article 📹

Lighthouse

Lighthouse is an open-source, automated tool for improving the quality of web pages. You can run it against any web page, public or requiring authentication. It has audits for performance, accessibility, progressive web apps, SEO and more.

This tool is probably my most used extension, to generate easy to use reports with tips to optimise my projects or give prospects some fast advice on their applications. Here's an example of the quick overview:

As you scroll down the page, you will see actions you can do to increase your performance in all of these areas. Having a detailed report like this is an awesome action plan when you are not sure how to get a better performing website or app.

axe by Deque

Accessibility checker for WCAG 2 and Section 508 accessibility. Find accessibility defects on your website or web application by using the axe Chrome extension. Drop the axe on your accessibility defects!

If you are ever on Twitter, you will notice a lot of shouting about accessibility, and rightly so as the web should be an inclusive place. No matter how healthy we are just one bad day away from needing an accessible website ourselves. Be compassionate, and with this tool, you can easily identify the fixes needed to create a fully WCAG compliant website.

You get a little extra tab in your Chrome developer tools that will tell you how you are doing:

Wappalyzer

Wappalyzer is more than a CMS detector or framework detector: it uncovers more than a thousand technologies in dozens of categories such as programming languages, analytics, marketing tools, payment processors, CRM, CDN and others.

This is a pretty fun extension for the curious developer. The extension can give you a full overview of the tech stack on a site. If we take an example of looking at a popular site like dev.to we get an awesome little breakdown of the site:

I really like seeing what my favourite sites are made of and I am sure you will too. I've also found a few new technology treasures from being nosey on sites with this plugin too.

GoFullPage

The best Chrome extension for taking a screenshot of an entire webpage

Now more than ever, especially as remote working is climbing, being able to share a full-page screenshot is a handy trick to have access to. With just a click the extension hijacks your page starts scrolling taking screenshots and stitching together a seamless full-page screenshot. You can then choose to download the photo in PNG, JPG or PDF. Here is an example I took from my own YouTube channel:

I love being able to grab a large screenshot like this and sketching notes onto it with my tablet to share with people.

Grammarly

From grammar and spelling to style and tone, Grammarly helps you eliminate writing errors and find the perfect words to express yourself. You'll get real-time feedback from Grammarly on Gmail, Google Docs, Twitter, LinkedIn, and nearly everywhere else you find yourself writing. Grammarly is a writing assistant that offers you specific suggestions to help you improve your writing

Okay so this one isn't really targeting developers specifically, but this one really helps me give the illusion of professionalism and sound slightly less incompetent or dumb in my emails. This little plugin can quickly scan most text inputs and let you know if you are making some spelling mistakes, grammar errors and even help you with your tone. Honestly, I think Grammarly is my most used tool. It's getting used and abused a lot more lately by me since I started writing more content too. That's the reason I couldn't eave it out of my "Awesome Extensions List".

An example of a suggestion whilst writing the last section

Thanks, Grammarly, for making me spell gooder...

Do you have any suggestions I missed that you would be lost without?

Follow me on Twitter

Subscribe on Codú Community

NextJS V10 | 📝 Highlighting the good, great and awesome updates

Niall Maher — Wed, 04 Nov 2020 20:49:18 +0000

Over 20 updates were packed into the new NextJS version 10 update, and in this article, I will go over what are, in my opinion, the big ones. If you are looking for the official word, head over to NextJS's official blog post.

We introduced over 20 new features that improve performance and developer experience. At the same time, the JavaScript size of the Next.js core has been reduced by 16%. - Nextjs.org blog

I chat about all of these features a little more in this video:

My Next.js video version of this article 📹

React 17

We can now safely update to React 17 with the newest update. When you upgrade to NextJS 10 or start a new project, you will get the fantastic new JSX transform by default.

If you don't know what that is you should check out Jesse's (codeSTACKr) video giving a detailed breakdown:

New Image Component

I think most people will think this is the MVP of this release.

This is the number one reason I would have picked Gatsby over Next.js because of the awesome gatsby-image component, which made it still optimal for generating static sites with lots of images.

The NextJS team worked with the Google Chrome team to offer super image optimisations by default. It's basically a drop-in replacement for a normal img tag.

// Before

export default function() {

  return <img src="/avatar.jpg" width="400" height="400" alt="Avatar">

}

// After

import Image from 'next/image'

export default function() {

  return <Image src="/avatar.jpg" width="400" height="400" alt="Avatar">

}

I won't go into too much detail here, but basically, we get lazy loading by default when we use this new Imgtag and then we can mark images that are in the initial viewport to preload them.

I am excited to replace all my images with this tag now.

Fast Refresh for MDX

A small detail that didn't frustrate me too much but a nice improvement. @next/mdx will now leverage Fast Refresh, making sure the browser does not have to reload the page while you are editing and developing.

The @next/mdx documentation guides you through how to set up MDX with Next.js.

CSS from node_modules

More optimisations! Instead of having to load all your libraries CSS straight into _app.js, now we can import them in the required components. This might seem like a small thing but now we can lazy load CSS as required which depending on the library you are using (and where you are using it), this could be some big improvements to your initial load speed.

Easy Internationalization

With domain routing, subpath routing and language detection, setting up internationalization has never been easier.

If you have the locales set up, you will automatically be routed based on your Accept-Language header (which is easily disabled in case you didn't want this).

You can then grab the locals from next/router and you will now see your locales in the router object:

Example of router object when we navigate to our Spanish domain

Automatic Resolving of `href`

One thing that I always felt was frustrating when I was using Link tags was remembering what to put in as versus href.

Now you can stop using as and it will automatically resolve under the hood for you:

// before v10

<Link href="/blog/[slug]" as="/blog/posts">

// after v10

<Link href="/blog/[slug]">

Next.js Analytics

NextJS Analytics isn't your usual benchmark tester. With NextJS Analytics, it analyses your actual user's performance so that you can really see how your users perceive your site rather than the one size fits all approach.

NextJS Analytics

Next.js Analytics is about focusing on the entire picture, deeply understanding your audience, and how your application performs for your users.

I'm rebuilding my business site with NextJS, so I am excited to give this a test run the moment I push it to production.

NextJS Commerce

Ever needed to build an eCommerce solution and not know where to start?

Screenshot of NextJS Commerce site

As someone who has launched a handful of shops on Shopify because it was the easiest solution, I am super happy to see this. NextJS Commerce offers a boilerplate optimised eCommerce store. Get super speeds to boost your SEO and customer experience. Currently, it has an out of the box integration with BigCommerce, but they said they are working on solutions for other vendors like Shopify too (which is when I will probably dive headfirst in then and move one of my stores over).

Check it out here: https://nextjs.org/commerce

I'm currently rebuilding my business site with NextJS since this update dropped and I am excited to see how my website performs when it's all done.

What's your favourite feature that dropped?

Follow me on Twitter

Subscribe on Codú Community

My Biggest Mistake When I Started Earning Six figures

Niall Maher — Tue, 27 Oct 2020 10:40:29 +0000

A Tale of Caution to Avoid My mistakes

I talk more about this whole situation here or keep scrolling to read. 💻

A Little Bit of Background

Just 12 months before I started earning over €100,000 a year, I was working selling fine wines in a small shop and building some websites between customers for people. I was earning €400 (before tax) a week or just over €20,000 per year, so I forgive myself a little for the huge mistake I made (from excitement) when my income was over the space of twelve months, literally multiplied. I had started earning €40,000 a year as my first "real" software development job and honestly still struggled a little from all of the debt and overdrafts I had accumulated over the years of working for little money and paying for rent, bills and food.

Fast Forward to Getting My First 6 Figure job

9 months into my first major web development role (which was a baptism by fire and a story for another day on how I ascended so fast) I got a call from a now good friend of mine about an interview for a "Senior" developer role. I of course, like most newer developers, coveted and wanted that "Senior" title. I wanted that title so much that I decided "f*ck it, I might not be ready, but I might as well see what kinda stuff they ask in those interviews". I went and to my own surprise actually nailed the interview, thus receiving an offer I wasn't expecting.

The position was a contractor role with Bank of America which was going to pay me €475 per day on a 6-month contract(€75 more than I was making in a whole week 9 months previous). As you can imagine, I got very excited and decided I had to take the offer and become a contractor.

5 months flew by, and I was ecstatic when I got a call to say they wanted to extend my contract by 12 months, this is when I stopped being cautious and assumed I would now and forever be showered in cash...

Over the weekend after getting this call, I went to a showroom and put a deposit on a brand new Mazda MX-5, a small sports car I always wanted. I was so proud of my achievements and so excited about at least 12 months more of this income I really did feel invincible. I even picked up the recruiter who got me the job in the first place in the car to celebrate over lunch.

Two days into my new contract I then received an unexpected call...

"Hi Niall, there have been some budget cuts in the bank, and unfortunately they have decided to give you your notice of 30 days."

My heart sank into my stomach a little; I like the idiot I was, had spent every penny of my savings on buying that car, living beyond my means even with what I was earning and now had just lost my job. I had spent the money I had not yet actually earned and as a result, had left myself in a terrible situation.

My Advice to My Younger Self Or You...

Don't spend money you haven't earned yet!

Stop trying to impress people with material things and look after your future self...

No matter how secure you feel, make sure you have a rainy day fund before anything else to cover yourself if you end up in a place where you lose your job. If you are getting something like a car loan or a mortgage at the very least wait longer than I did (at least a year or two) to make sure the change in fortune wasn't just a fluke and that you will be able to keep up with payments. Worrying about money is stressful, the high of feeling like a superstar is a lot less than the low of worrying about your next paycheque.

This may sound obvious, but trust me is much more difficult than it sounds when you are sitting in your dream car and have enough in your bank account to cover it. Things like the "Gamblers Fallacy" can kick in where we can think we have a lucky streak or that the odds are in our favour even though mathematically speaking nothing has changed. I after my fortunate year thought that it was now going to be a lucky streak.

I Landed on my Feet

Thankfully, my friend who had gotten me that job lined me up a new one within a couple of weeks of that news which paid pretty much the same, so I survived that blow. I didn't spend a single day unemployed thankfully so I recovered (and still have that Mazda).

I now invest money, have a rainy day fund (which still is being built) and try every month to see how I can improve my finances. This is a slow and tough mindset change, but it's something I know I need to work on so I don't ever want to have that sinking feeling again or the pain of growing more and more in debt every month.

When you are not used to having money, it is a tough thing to learn how to respect money.

This article is for informational purposes only. It should not be considered Financial or Legal Advice. Not all information will be accurate. Consult a financial professional before making any major financial decisions.

Follow me on Twitter

Subscribe on Codú Community

DEV Community: Niall Maher

No More Free Tier on PlanetScale, Here Are Free Alternatives

Supabase - PostgreSQL

Neon - PostgreSQL

Turso - SQLite

CockroachDB - SQL

AWS RDS - Multiple options

CSS Text Transform: You Don't Need JavaScript to Capitalize Your Text

CSS Text Transform Property

The Page Visibility API: Improve User Experience and Performance

What is the Page Visibility API?

Getting Started with the Page Visibility API

document.hidden property

visibilitychange event

A Practical Example

When to use the Page Visibility API

Alias Essentials: A Step-by-Step Guide to Creating Terminal Shortcuts

What are Alias Commands?

Temporary Aliases

Persistent Aliases

For Bash users

For Zsh users

Best Practices for Creating Aliases

Transform Your CSS Game: Bookmark These 10 CSS Generators

CSS Grid Generator

Flexbox Generator

CSS Animation Generator (Animesta)

CSS3 Patterns Gallery

Fancy Border Radius Generator

Filters Generator

CSS Arrow Please

Box Shadow Generator

SpinKit

Clippy

An Introduction to Semantic Versioning

Major Version

Minor version

Patch version

Pre-releases and build

5 npm Tips/Tricks You (Probably) Don't Know 🚀

1. List available scripts

2. List installed packages

3. Open a package's homepage or repo

4. Show all the available versions for a package

5. Look for outdated packages

Visual Studio Code Bonus Tip! 🏆

🔎 Easy Autocomplete / Suggestions for Inputs with just HTML5 | datalist tag

Video Chat 📹 | What's New in Vue 3 and How to Learn Vue js in 2021 with Chris Dixon

Chrome Extensions You Should Install Today

Lighthouse

axe by Deque

Wappalyzer

GoFullPage

Grammarly

NextJS V10 | 📝 Highlighting the good, great and awesome updates

React 17

New Image Component

Fast Refresh for MDX

CSS from node_modules

Easy Internationalization

Automatic Resolving of href

Next.js Analytics

NextJS Commerce

My Biggest Mistake When I Started Earning Six figures

A Tale of Caution to Avoid My mistakes

I talk more about this whole situation here or keep scrolling to read. 💻

A Little Bit of Background

Fast Forward to Getting My First 6 Figure job

My Advice to My Younger Self Or You...

I Landed on my Feet

Automatic Resolving of `href`