The testing setup of my dreams is finally a reality
In its latest release, Playwright has gained a new feature called Playwright Test. This newly added test runner for Playwright enables the smoothest testing experience in Next.js applications I have ever seen. Once set up, it allows testing with real browsers across multiple device sizes. We’ll be able to mock requests made by the frontend. And, we’ll be able to mock the backend’s requests as well. All from the test spec itself.
And to top it all off, we’ll even be able to do Visual Regression Testing which the Playwright team calls Visual Comparisons. …
How to release with confidence
Releasing features into production can be quite the thrill. Surely you’ve tested the feature you’ve been working on locally to ensure that it works as expected. Or you might have even used a preview deployment to your staging environment, on which your PO or a dedicated testing team took the feature for a ride.
But there’s still this uncertainty when going live: Will it work in production?
And what do we do if it doesn’t?
This article shows how to use feature flags to release with confidence, and how to set feature flags up in Next.js.
Releasing with confidence
Feature Flags allow you…
Efficient data fetching in Next.js
Only by chance did I stumble upon one of the best Next.js patterns I’ve seen. The documentation never mentions a word about it, but luckily I found this neat approach in the official examples. It helps you avoid unnecessary requests and speeds your application up along the way. I’ve used this pattern to build happykit.dev, a suite of tools which helps you run Next.js in production.
If you’re loading data in getServerSideProps, getStaticProps or getInitialData you might be making unnecessary roundtrips to your own API. …
How to set them up for development and production
Next.js is one of the best-documented projects I have ever used. However, the section about Environment Variables left me confused. I didn’t know how to set up variables for development and production and how to define which variables the client should have access to.
If configured incorrectly, the secrets and API keys stored in environment variables might leak into the client bundle. That would open your application up to nasty attacks.
So I took a deep dive into environment variables in Next.js while building happykit.dev, a suite of tools which help you run Next.js in production. I wanted to get…
Combining Cognito’s robustness with the simplicity of Next.js
One of the hardest things when starting a new project with Next.js is that there is no default way of handling user authentication. In this article we’ll walk through one approach of achieving that goal. We’ll set up user authentication using AWS Cognito for Next.js in React. A package called aws-cognito-next will handle the integration of Amazon Cognito into Next.js for us. At the end we’ll have a running application with all the bells and whistles of a user system.
Amazon’s Cognito lets you add user sign-up, sign-in, and access control to your web and mobile apps quickly and easily…
An alternative to Styled Components, but without the runtime?*
Today we want to take a look at Compiled and its @compiled/css-in-js package. It aims to provide the familiar CSS-in-JS authoring experience without its runtime cost.
Looks like Styled Components, tastes like no runtime
This example is shown on the website of Compiled:
During the installation of Compiled, you’ll add a Babel plugin called @compiled/babel-plugin-css-in-js to your code. When you build your project, that plugin will then transform the code you’ve seen above to this:
The transform changes the code from importing styled to importing Style. The Style component’s task is to move styles to the <head /> of our app. Style is a tiny component…
aka the missing paragraphs of “Use a Render Prop!”
Update (2018–09–13): This article goes into the details of how to test render props in Enzyme. I’ve since moved away from Enzyme as I believe react-testing-library uses a far better approach! Try writing some tests with it and you’ll appreciate it! It allows me to refactor my code without touching the test suite and finds errors when I mess up. Something I always wanted, but never really got out of Enzyme. Good places to get started with react-testing-library are the react-testing-library-course repository and this talk. …
Notice: A lot has changed since this article was written. file-loader and url-loader support not-emitting-files themselves now, so fake-file-loader and fake-url-loader are deprecated. fake-style-loader can be replaced by using css-loader/locals as explained in fake-style-loader#3. So, do not use the fake module family anymore. It is recommended to use css-loader, file-loader and url-loader directly instead.
It’s still worth reading the article to familiarize yourself with the concepts.
Webpack is commonly used to build the client bundle of web applications. To improve perceived load times, web applications may render on the server. Ideally the code for the components used by the web…
Getting immediate feedback and ensuring consistent code style
This article will introduce you to code linting. It shows how linters are useful, how to set them up and how to integrate them into Meteor projects, Continuous Integration and your editor. It also introduces ESLint-plugin-Meteor, a tool I created specifically for linting Meteor projects.
Meteor 1.2 was released a while ago. One of its new features is meteor lint. You can try it out by running the following commands in any Meteor 1.2 project.
$ meteor add jshint
$ meteor lintjshint is a new Atmosphere package by the Meteor Development Group. jshint wraps the npm module JSHint, the…
I have been using an awesome feature of Google Chrome for years that has saved me typing long URLs of sites I visit often. This tip uses Google Chrome’s search engines feature in a slightly different way which enables jumping to pages of registry-style sites like npm, GitHub or dictionaries directly.
Imagine you’ve been using redux in your project and you quickly want to look up something in its README. Instead of searching for redux on Google, you can use this tip to jump to npm directly.
All I have to do is type n [space] <package name> into the…
