General

How to Optimize Your Profile and Build a Developer Network on LinkedIn

Jul 5, 2022

8 min read

LinkedIn is a social network where you can connect and build relationships with other professionals in your field. A strong developer profile can lead to potential job opportunities and more connections in this industry. But how do you go about optimizing your profile and building a developer network on LinkedIn?

In this article, I will walk you through each of the sections for a LinkedIn profile and show you the best ways to optimize them. I will also share tips on how to build relationships with other developers on Linkedin.

What title should you use on Linkedin?
How to optimize your profile and background images
- Is it ok to not include a profile image?
- Do I need a background image?
How to create a custom Linkedin URL
How to optimize your about section
- How long should the about section be?
What is the features section in Linkedin?
How to optimize your experience section
- Should you show unrelated tech experience on your Linkedin profile?
How to optimize your education section
Should you have recommendations on your profile?
Should you take Linkedin skills tests?
Exploring other sections of the Linkedin Profile
How to connect with other developers on Linkedin

What title should you use on Linkedin?

A lot of people will say that titles don't matter, but in reality titles do play a role in our society whether we like it or not. If you are currently working as a software developer, then your title can say Software Developer or Software Engineer at XYZ company. If you are a lead, staff engineer, senior, etc., then put that in your title.

If you are looking for your first job, then use "Software Developer" and list the technologies you are comfortable with. You want to avoid titles like "Aspiring Developer" or "Soon to be Developer" because that may disuade potential employers from looking at you before they are given an opportunity to understand what you have accomplished as a web developer despite not yet finding a formal role.

How to Optimize Your Profile and Background Images

When it comes to your profile picture, it is important to remember that you are interacting with other professionals in your industry. You want to choose a clean head shot that would be acceptable in professional settings.

Avoid using pictures of you partying in college, or pictures that don't even show your face.

You don't need to spend tons of money on professional head shots. You can even have a friend or family member take a head shot of you wearing a nice shirt.

Is it Ok to Not Include a Profile Image?

If you want to optomize your profile, it is very important to include a profile image.

A lot of hiring managers and recruiters are actively looking for developers and your profile image helps put a face to the skills and experience listed. By omitting that image, you might get passed over for potential opportunities.

Do I Need a Background Image?

A clean and simple background image can help your profile standout. Canva is a free design tool that you can use to create a Linkedin banner. They have dozens of free templates to choose from that you can customize and apply to your profile.

Here is what my LinkedIn profile and banner image looks like. Jessica Wilkins Linkedin profile image for article

How to Create a Custom Linkedin URL

Linkedin has a feature where you can customize your profile URL making it easier for people to find you. To learn how to create a custom URL, please read through this Linkedin article.

When it comes to naming your URL, I would suggest keeping it short and simple. I would suggest using your name and occupation like this: Jessica Wilkins Linkedin custom URL for article

How to Optimize Your About Section

This section is your opportunity to provide a short background on who you are professionally. It is best to talk about the types of projects you have worked on and tools/languages you are most familiar with. It is also good to talk about how you are involved with the community. For example, you might want to highlight your participation in open source projects, or your experience as a content creator.

Here is my current "About" section:

"I am a classically trained musician turned software developer who enjoys building solutions to unique business problems. I primarily work with React and TypeScript to provide clean efficient solutions to build better software products. I am actively involved in giving back to the community by participating in open source projects like freeCodeCamp. I have also written over 100 technical articles on HTML, CSS, JavaScript, Python and career development."

How Long Should the About Section Be?

I personally like "About" sections that are a few sentences long. You can also have 2-3 paragraphs for your "About" section. However, I don't think it should be any longer than what can be read in a minute or two because the goal is to provide a brief overview of who you are, not a complete autobiography.

What is the Features Section on Linkedin?

This is a section on your Linkedin profile where you can show off some of your recent projects and articles. In my opinion, it can act as a small portfolio, and is often underutilized by software developers.

Here is a screenshot of my features section. jessica wilkins features section linkedin

I chose to list my Black Excellence Music Project and a couple of my top performing freeCodeCamp articles. This is a visually appealing way to show potential employers and recruiters your top work.

How to Optimize Your Experience Section

This section should be reserved only for work experience. There are other sections in your Linkedin profile where you can add volunteer experience or education.

Just like on a resume, you would place your most recent jobs first. Try to focus on highlighting significant contributions you made to the projects.

Here is an example from my experience section on Linkedin.

Implemented a light/dark theme solution for the This Dot Labs website
Performed accessibility audits for the This Dot Labs website and provided solutions for increasing performance and accessibility scores
Performed extensive smoke testing for client applications and reported bugs and feature requests to the rest of the development team
Built out several UI examples for a client's documentation page

If you have freelance experience, talk about the types of projects you built for them, and how you added value to their business.

Should You Show Unrelated Tech Experience on Your Linkedin Profile?

If you are a career changer like myself, there is nothing wrong with showing your previous work experience from another industry. That shows potential employers that you have worked in a professional setting before and have been gainfully employed for the past few years.

As long as you place your relevant tech experience at the top, then you will be fine.

How to Optimize Your Education Section

If you have a college degree, even if it is not in computer science, definitely list that on your Linkedin profile. If you have certifications, like the AWS certification, then list those as well.

There is some debate about whether or not to list certifications from online courses like Udemy. In my opinion, there is no harm in listing those, but it won't carry as much weight with employers and recruiters as AWS certifications, bootcamp certificates, or computer science degrees will.

Should You Have Recommendations on Your Profile?

Yes!

When people can vouch for your work, it goes a long way with future employers and recruiters. This will be especially helpful for those looking for their first full time software job who have done contract work or freelance work in the past.

Should You Take Linkedin Skills Tests?

There is a section on Linkedin where you can take different skills tests in areas like HTML, CSS, JavaScript, etc. If you pass those tests, then you can list them on your profile.

These skill tests don't hold a lot of weight with recruiters or potential employers because they will provide their own skills tests during the interview process. There is no harm in taking them if you want to, but doesn't add a whole lot to your profile.

Exploring Other Sections of the Linkedin Profile

We have covered all of the core sections of the Linkedin profile, but there are additional sections you can choose to add.

Here are some sections you might consider exploring:

Volunteer experience
Projects
Organizations
Publications
Courses

You can find all of these additional sections when you click on the "Add Profile" button at the top of your Linkedin profile.

For more information and suggestions on how to optimize your profile, I suggest you watch Danny Thompson's Linkedin series on YouTube.

How to Connect With Other Developers on Linkedin

There are many ways to build out your network on Linkedin. One common way would be to send a connection request to another developer.

If you have been following someones' work online, or previously connected through a conference or online meetup, it would be a good idea to connect with them on Linkedin too.

Here is a sample message you can send along with your connect request.

"Hi, this is Jessica Wilkins and I enjoyed talking with you at the last Women in Tech meetup. I would love to be able to connect with you here on Linkedin too."

Now, when that person receives that connection request with a personalized message, they will be more inclined to accept. If you just send a connection request to a complete stranger without a personal message, then you will most likely be ignored.

Another way to connect with developers, is by commenting on and sharing others' posts.

If someone is sharing an article or posting a hot topic, feel free to jump in the conversation. If you really enjoyed the article, then share it and/or reach out through personal message letting the author know you enjoyed it.

Those small gestures will go a long way to build connections over time.

Conclusion

I hope you enjoyed that article on optimizing your Linkedin profile and building connections with other developers. Linkedin is a very powerful tool and can help you advance in your career.

If you are interested in connecting with me on Linkedin, then please visit my profile.

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Jessica Wilkins

Jessica Wilkins is a classical musician turned Software Engineer. Prior to joining the tech industry, she spent her time running her own sheet music company (JDW Sheet Music) as well as performing and teaching in Los Angeles, CA. She enjoys working with React and TypeScript. She is also a prolific technical writer for freeCodeCamp.

@codergirl1991 @jdwilkin4

How to Avoid Common Pitfalls and Ace Your Take Home Assignment

During the interview process, you might be asked to complete a short take home assignment. This usually consists of building out a small project with required tasks to be completed in a set time frame. This is a popular way to test an applicant's skills and assess how they can tackle problems. But what is the best way to approach a take home assignment and what are some common pitfalls people run into? In this article, I will provide tips on how to ace your take home assignment and move to the next round of interviews. I will also provide tips on how to avoid common mistakes with the take home projects. What does the take home project entail? The take home project offers a chance for the prospective employer to see how you approach building out real world applications. For the frontend, you might be asked to work with an API and display some results in a table or card layout. You might also be asked duplicate a web page from a Figma design and add some functionality like search or pagination. For the backend, you will be tested on your knowledge of server side logic, and be asked to design some APIs. There will be a list of criteria that you have to meet by a set deadline. There will also be notes on hosting your app and which libraries and frameworks you are allowed to use, if any. If you want to see examples of take home projects, then please take a look at the following links: - freeCodeCamp take home projects - Github search results for take home projects Make sure you understand the project requirements Before you start building out the project, it is important that you understand all of the project requirements. If you need any clarifications, please ask and do not make assumptions. You don't want to fail a project because you misunderstand the directions. This is also a good chance to see how well the company communicates project details to you. If they are able to offer up clear directions and answer any clarifying questions, that is a good indicator of what it will be like to work for them. If they are not able to provide clear directions and have poor communication skills, then that can also be a sign of what it would be like to work there. Plan out your time efficiently Time management is crucial when it comes to take home projects. Since you only have a short amount of time to build the project, it is important that you first plan out how to build the basic structure. You will need to identify which parts of the project will require the most attention and how long it will realistically take do each component of the project. It is important to account for the time it will take to fix bugs and other unexpected issues during the development phase. Once you have mapped out how long it will take to build a basic prototype, you will need to look into adding extra features to help you stand out in the applicant pool. You will need to decide on which features to add and how long it will take to successfully build it out. Try not to fall into the trap of underestimating how long a feature will take to build. If it doesn't look feasible in your alloted time frame then it is best to rethink it or leave it out completely. Make sure to adhere to best practices and focus on clean code The goal of these projects, is to get a sense of your coding style and technical skill level. This is your chance to ensure that your work adheres to best practices and is clean and readable by other developers. You want to make sure that you are doing things like using clear concise variable and function names, adhering to the KISS and DRY principles, and optimizing your code so it runs efficiency. Your potential employer is not looking for perfect code and understands that you are working under a time constraint. But they do want to get a sense of your code quality and the type of work you might contribute to a project. Do the best you can to write clean readable code while still making sure the basic functionality is in tact. Avoid over engineering your project Take home projects can offer a great opportunity to develop your skills and demonstrate what you can do. But it is important that you do not over engineer your application because it sends the wrong message to potential employers. There is no reason to over complicate your code and stuff you application with tons of extra unnecessary libraries and frameworks. Remember that employers will ask you about your code and technology decisions and if there doesn't seem to be a clear reason behind your decisions, then it can be seen as a negative. Make sure to document your work Documentation is an important part of any software project and you need to be able to demonstrate that in your take home assignment. Make sure to have a detailed readme including your architectural and design decisions, features of the application, testing, how to run the app locally, and a list of the technologies used. You can also include a section on features you would have liked to build if you had more time. By providing a documented project, employers will learn about your thought process and get a sense of how you approach problem solving. Should you include testing in your take home project? I think you should definitely include some testing in your take home assignment. During your planning stage, you will need to set aside some time for coming up with test cases and deciding on which testing tool you will use. If you are new to testing, try to include some small tests to communicate to your potential employer that you understand testing is part of the job. If you are a more experienced developer, your employers will expect you to include testing. How should you approach styling? Even if you are not a natural born designer, it is still important to create a clean professional looking design. It is fine if your design is simple because they are not testing you on your original design abilities. Just make sure that your project is responsive and has good UI/UX. If you are allowed to use CSS frameworks like Tailwind CSS or Bootstrap, then it will make designing your app a little bit easier. How long should a take home project take? Most companies will give you a timeline to complete the project and submit it. In my opinion, 3-5 days is a good range to complete the assignment. If the employer is expecting you to take a couple of weeks or more to do the assignment, then that is a sign they are not respecting your time. There have been a lot of stories of people spending 40-60+ hours on a take assignment and still not getting the job. If you receive an assignment where it is obvious it will take an excess amount of time to complete, then you might consider reassessing the situation and possibly not moving forward with the interview. Conclusion Take home projects can be a great alternative to the typical Leetcode style interviews. This is a chance for you to show off your technical skills amd build an app in the process. It is important that you meet all of the requirements and add some extra functionality to stand out in the applicant pool. Also make sure to document your solution and test out your project before submitting it. I hope you enjoyed this article and best of luck on your future interviews...

Jul 20, 2022

6 mins

Career

My Career Roadmap

Every developer has their own unique roadmap. I love hearing these stories as they’re constant reminders that there is no right way. Anyone can become a successful developer as long as they have the passion for it. I’ll be sharing my roadmap in hopes that someone also realizes that there are multiple ways to be part of the programming world. My journey started when I attended a junior college in an effort to complete the prerequisites for a Biochemistry degree. I actually got far enough to start taking Organic Chemistry courses. However, my heart wasn’t in it. I found it boring and dreaded anything related to those science classes. I did find it cool that I could recognize some of the fancy ingredients in a shampoo. It just wasn’t what I connected with. I knew that something had to change. I was on track to transfer to a four year university in less than two years. I was always interested in computers and thought about programming. I still don’t know why I was drawn to that: maybe social media made it look cool? The dilemma was to either continue or take a risk by starting a whole new career. I didn’t want to spend more time at junior college, so I needed to make a hard decision: either continue with Biochemistry or drop it completely to pursue programming, but still transfer within the estimated year. I probably would have chosen to experiment with both at the same time if I had realized this a couple of years prior. However, I ended up changing majors within a week. It was one of the best decisions I have ever made. My first programming class felt a bit scary. The building was run down and cold. The room was cramped. There were only two females (including myself). The course wasn’t hard or discriminating against genders but it probably felt that way due to being completely new to the field and not knowing anyone. It didn’t discourage me from programming. In fact, I still remember typing up my first Hello World program. It was the feeling of writing code that made me realize that I was on the right track. Luckily, the junior college had opened up the new STEM building a year later. This really made the place more welcoming. It was actually pretty cool. There were outlets everywhere! A dream for programmers that we take for granted. One of the courses that I took was Internet Programming. This was a turning point for me. My professor recommended that I participate in the local hackathon that was coming up soon. He suggested forming a team with the two other females in class. I never once thought he was discriminating. I honestly believe that he saw potential in all of us but we were lacking confidence in a male-dominated world. We participated in the hackathon as a female group. It was my first time working with a team and presenting our project to the public. We didn’t win any awards, but it provided some of the confidence that I was lacking. I finally understood that it didn’t matter what gender you are. I found a love of programming and wanted to be one of the best. I ended up getting recruited for a local internship through the hackathon. I was able to learn about realistic expectations when building a project for a client. The lead developer was also very open to teaching a complete newbie. This is where I learned the basics for web development. It was this type of support that helped shape my career. I graduated from junior college with an associates degree in Chemistry and transferred the next semester. The one regret that I do have in my career is the university that I chose. It didn’t have the best resources for the Computer Science students. The classes were boring and most of the professors didn't seem to care. If you weren’t on the game research cohort, you were just another student passing through. During this time, I got a chance to be part of a research team. However, I decided to accept an internship instead. It was another difficult decision as both had great opportunities. I still think that the internship was the best route as it helped me later on. The internship only lasted for the summer. I learned Polymer during this time. The project was my first deployment and it was used by the city. It was also another great confidence booster. I returned to school with the goal to find my first job before graduation. Truthfully, it was very discouraging, even with my internship experiences. Most companies wanted developers with years in programming. They really don’t make it easy for junior developers. I’m almost positive that I placed over 100 applications. When I did get a response, it was a decline. I also attended the career fair that the university organized. That’s where I found the company that gave me a job offer. I started working for them after graduation. This led to web development in the Drupal world for a little over 2 years. It was a small company but provided development growth. I learned the importance of quality assurance and time management. I also acquired the skill to advocate for higher priority tickets. The most important lesson was that a project can only thrive with a unified team and proper documentation. However, the company had a tremendous downsize due to the pandemic. I was once again on the job hunt. Fortunately, the connections I made during the summer internship helped me find a job at This Dot. There was still an interview process, which I passed due to all the career choices that were made. I’m very excited to be here. I’m working with LitElement projects and more structured work environments. It really is a big difference from a very small company. I’m now pursuing the path of being a mentor, a dream that I had since my first internship. I’m working on improving a mentorship program and making sure my mentee has all the support she needs. I barely have a bit over 3 years of work experience. The time went by very quickly and I’m still excited to be programming. I can’t wait to see where my roadmap will be in the next upcoming years. Tweet me your favorite moment in your roadmap!...

Feb 2, 2021

4 mins

CareerMentorship

Introducing the New Serverless, GraphQL, Apollo Server, and Contentful Starter kit

Introducing the new Serverless, GraphQL, Apollo Server, and Contentful Starter kit The team at This Dot Labs has released a brand new starter kit which includes the Serverless Framework, GraphQL, Apollo Server and Contentful configured and ready to go. This article will walk through how to set up the new kit, the key technologies used, and reasons why you would consider using this kit. Table of Contents - How to get started setting up the kit - Generate the project - Setup Contentful access - Setting up Docker - Starting the local server - How to Create the Technology Model in Contentful - How to seed the database with demo data - How to work with the migration scripts - Technologies included in this starter kit - Why use GraphQL? - Why use Contentful? - Why use Amazon Simple Queue Service (SQS)? - Why use Apollo Server? - Why use the Serverless Framework? - Why use Redis? - Why use the Jest testing framework? - Project structure - How to deploy your application - What can this starter kit be used for? - Conclusion How to get started setting up the kit Generate the project In the command line, you will need to start the starter.dev CLI by running the npx @this-dot/create-starter command. You can then select the Serverless Framework, Apollo Server, and Contentful CMS kit and name your new project. Then you will need to cd into your new project directory and install the dependencies using the tool of your choice (npm, yarn, or pnpm). Next, you will need to Run cp .env.example .env to copy the contents of the .env.example file into the .env file. Setup Contentful access You will first need to create an account on Contentful, if you don't have one already. Once you are logged in, you will need to create a new space. From there, go to Settings -> API keys and click on the Content Management Tokens tab. Next, click on the Generate personal token button and give your token a name. Copy your new Personal Access Token, and add it to the CONTENTFUL_CONTENT_MANAGEMENT_API_TOKEN variable. Then, go to Settings -> General settings to get the CONTENTFUL_SPACE_ID. The last step is to add those CONTENTFUL_CONTENT_MANAGEMENT_API_TOKEN and CONTENTFUL_SPACE_ID values to your .env file. Setting up Docker You will first need to install Docker Desktop if you don't have it installed already. Once installed, you can start up the Docker container with the npm run infrastructure:up command. Starting the local server While the Docker container is running, open up a new tab in the terminal and run npm run dev to start the development server. Open your browser to http://localhost:3000/dev/graphql to open up Apollo server. How to Create the Technology Model in Contentful To get started with the example model, you will first need to create the model in Contentful. 1. Log into your Contentful account 2. Click on the Content Model tab 3. Click on the Design your Content Modal button if this is your first modal 4. Create a new model called Technology 5. Add three new text fields called displayName, description and url 6. Save your new model How to seed the database with demo data This starter kit comes with a seeding script that pre-populates data for the Technology Content type. In the command line, run npm run db:seed which will add three new data entries into Contentful. If you want to see the results from seeding the database, you can execute a small GraphQL query using Apollo server. First, make sure Docker, and the local server(npm run dev) are running, and then navigate to http://localhost:3000/dev/graphql. Add the following query: ` When you run the query, you should see the following output. ` How to work with the migration scripts Migrations are a way to make changes to your content models and entries. This starter kit comes with a couple of migration scripts that you can study and run to make changes to the demo Technology model. These migration scripts are located in the scripts/migration directory. To get started, you will need to first install the contentful-cli. ` You can then login to Contentful using the contentful-cli. ` You will then need to choose the Contentful space where the Technology model is located. ` If you want to modify the existing demo content type, you can run the second migration script from the starter kit. ` If you want to build out more content models using the CLI, you can study the example code in the /scripts/migrations/01-create-technology-contentType.js file. From there, you can create a new migration file, and run the above contentful space migration command. If you want to learn more about migration in Contentful, then please check out the documentation. Technologies included in this starter kit Why use GraphQL? GraphQL is a query language for your API and it makes it easy to query all of the data you need in a single request. This starter kit uses GraphQL to query the data from our Contentful space. Why use Contentful? Contentful is a headless CMS that makes it easy to create and manage structured data. We have integrated Contentful into this starter kit to make it easy for you to create new entries in the database. Why use Amazon Simple Queue Service (SQS)? Amazon Simple Queue Service (SQS) is a queuing service that allows you to decouple your components and process and store messages in a scalable way. In this starter kit, an SQS message is sent by the APIGatewayProxyHandler using the sendMessage function, which is then stored in a queue called DemoJobQueue. The SQS handler sqs-handler polls this queue, and processes any message received. ` Why use Apollo Server? Apollo Server is a production-ready GraphQL server that works with any GraphQL client, and data source. When you run npm run dev and open the browser to http://localhost:3000/dev/graphql, you will be able to start querying your Contentful data in no time. Why use the Serverless Framework? The Serverless Framework is used to help auto-scale your application by using AWS Lambda functions. In the starter kit, you will find a serverless.yml file, which acts as a configuration for the CLI and allows you to deploy your code to your chosen provider. This starter kit also includes the following plugins: - serverless-offline - allows us to deploy our application locally to speed up development cycles. - serverless-plugin-typescript - allows the use of TypeScript with zero-config. - serverless-dotenv-plugin - preloads function environment variables into the Serverless Framework. Why use Redis? Redis is an open-source in-memory data store that stores data in the server memory. This starter kit uses Redis to cache the data to reduce the API response times and rate limiting. When you make a new request, those new requests will be retrieved from the Redis cache. Why use the Jest testing framework? Jest is a popular testing framework that works well for creating unit tests. You can see some example test files under the src/schema/technology directory. You can use the npm run test command to run all of the tests. Project structure Inside the src directory, you will find the following structure: ` This given structure makes it easy to find all of the code and tests related to that specific component. This structure also follows the single responsibility principle which means that each file has a single purpose. How to deploy your application The Serverless Framework needs access to your cloud provider account so that it can create and manage resources on your behalf. You can follow the guide to get started. Steps to get started: 1. Sign up for an AWS account 2. Create an IAM User and Access Key 3. Export your AWS_ACCESS_KEY_ID & AWS_SECRET_ACCESS_KEY credentials. ` 4. Deploy your application on AWS Lambda: ` 5. To deploy a single function, run: ` To stop your Serverless application, run: ` For more information on Serverless deployment, check out this article. What can this starter kit be used for? This starter kit is very versatile, and can be used with a front-end application for a variety of situations. Here are some examples: - personal developer blog - small e-commerce application Conclusion In this article, we looked at how we can get started using the Serverless, GraphQL, Apollo Server, and Contentful Starter kit. We also looked at the different technologies used in the kit, and why they were chosen. Lastly, we looked at how to deploy our application using AWS. I hope you enjoy working with our new starter kit!...

Jun 2, 2023

7 mins

GraphQL

Improving INP in React and Next.js

Improving INP in React and Next.js In one of my previous articles, I've explained what INP is, how it works, and how it may affect your website. I also promised you to follow up with more concrete advice on how to improve your INP in your favorite framework. This is the follow-up article, where I'll focus on how to improve your INP score in React and Next.js. How to prepare for INP in React and Next.js? The first thing to do is to ensure you're using the latest version of React. The React team has been working on making React more INP-friendly and has already made some improvements in the latest versions. To enhance your INP score, consider fully taking advantage of new features introduced in React 18, such as Concurrent Rendering, Automatic Batching, and Selective Hydration. However, there are also some general areas to focus on, such as SSR and SSG in Next.js, Web Workers, or optimizing your hooks and state management. Concurrent Rendering The Concurrent Mode in React uses an algorithm that breaks rendering down into so-called "fiber nodes" and schedules the renders based on their expiration and priority. This effectively allows the user to interact with the page while the rendering is still in progress. In previous React versions, all updates, such as setState calls were treated as "urgent" and once the re-render had started, there was no way to interrupt it. Concurrent Mode changes this by being able to prioritize the updates and interrupt a non-blocking state update started with startTransition. For a simple explanation of concurrency in React, you can check out Dan Abramov's explanation. As part of the Concurrent Mode, React introduced several lifecycle methods that allow you to prioritize the rendering of certain parts of your UI, such as: - useTransition hook that allows you to update the state without blocking the UI, - useDeferredValue hook that allows you to defer the rendering of certain parts of your UI, - startTransition API that, similarly to the useTransition hook lets you mark a state update as non-blocking. It lacks, however, an indication of whether it's still pending. Automatic Batching Introduced in React 18, Automatic Batching reduces the number of re-renders that happen on state changes even when they happen outside of event handlers, e.g. in a setTimeout or Promise callback. This feature comes out of the box and you don't have to do anything to enable it, and it makes a great argument for upgrading to React 18. Selective Hydration Selective Hydration allows you to take hydration off the main thread by wrapping your components in a Suspense boundary. This way, components can become interactive faster as the browser can do other work on the main thread while the hydration is happening. To fully take advantage of selective hydration, consider the following: - Prioritizing Above-the-Fold Content: Use Suspense boundaries strategically around any parts of your application that may take the server longer to deliver to ensure they don’t block critical content from becoming interactive as soon as possible. - Hydration on Interaction: Implementing hydration upon user interaction for non-critical components can drastically reduce the main thread's workload, enhancing INP. Vercel even has a small case study showing how using selective hydration improved the performance of a Next.js site. Server-Side Rendering (SSR) and Static Site Generation (SSG) in Next.js Not everything has to run client-side. Next.js excels in SSR and SSG capabilities, which can significantly impact INP by delivering content to users faster. Optimizing SSR with techniques like incremental static regeneration (ISR) or leveraging SSG for static pages ensures that users can interact with content faster, improving the perceived performance. Workers Offloading heavy computations to Web Workers can free up the main thread, enhancing the responsiveness of React and Next.js applications. This strategy is especially useful when dealing with third-party scripts. Offloading such scripts in Next.js can be easily done by specifying the "worker" strategy on your Script component. Be aware that this feature is not yet stable and does not work with the app directory, though. If you want to take things one step further, you could use Partytown, which helps you offload any resource-intensive scripts to Web Workers. It comes with a React component that you can use to wrap your third-party scripts and offload them to a Web Worker, and it's compatible with Next.js as well. Hooks and State Management State management in React applications can easily get out of hand, leading to unnecessary re-renders and effectively an increased INP. Sometimes, using a state management library like Redux or MobX can help you consolidate your state and reduce the number of re-renders. However, they are not silver bullets and can also introduce performance issues if not used properly. If you are dealing with a lot of re-renders due to prop changes, make sure you are leveraging memoization. As of now, you may need to work with useMemo and useCallback hooks to memoize your values and functions, respectively. The upcoming React 19’s Forget Compiler, however, will apparently memoize everything under the hood, making these hooks obsolete. Using memoization properly can help you reduce the number of re-renders and improve your INP. To investigate your hook dependencies and re-renders, you can leverage React Developer Tools or use this handy helper hook I found on the internet to trace your re-renders: ` Conclusion Improving INP in React and Next.js is not easy and can require much investigation and fine-tuning. Still, it's worth doing to avoid being penalized by Google in its search results and provide a better experience for your users. Adopting React 18's new features, leveraging SSR and SSG in Next.js, utilizing Web Workers, and optimizing hooks and state management can significantly boost your INP score and deliver a faster application to your users. Remember, INP is just one among many performance metrics emphasizing the need for a comprehensive approach to performance optimization...

Apr 19, 2024

5 mins

Web PerformanceReactNextJSJavaScript

How to Optimize Your Profile and Build a Developer Network on LinkedIn

Table of contents

What title should you use on Linkedin?

How to Optimize Your Profile and Background Images

Is it Ok to Not Include a Profile Image?

Do I Need a Background Image?

How to Create a Custom Linkedin URL

How to Optimize Your About Section

How Long Should the About Section Be?

What is the Features Section on Linkedin?

How to Optimize Your Experience Section

Should You Show Unrelated Tech Experience on Your Linkedin Profile?

How to Optimize Your Education Section

Should You Have Recommendations on Your Profile?

Should You Take Linkedin Skills Tests?

Exploring Other Sections of the Linkedin Profile

How to Connect With Other Developers on Linkedin

Conclusion

Jessica Wilkins

You might also like

How to Avoid Common Pitfalls and Ace Your Take Home Assignment

My Career Roadmap

Introducing the New Serverless, GraphQL, Apollo Server, and Contentful Starter kit

Improving INP in React and Next.js

You might also like

How to Avoid Common Pitfalls and Ace Your Take Home Assignment

My Career Roadmap

Introducing the New Serverless, GraphQL, Apollo Server, and Contentful Starter kit

Improving INP in React and Next.js