General

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

Published Jul 5, 2022

Updated Feb 13, 2023

8 min read

This article was written over 18 months ago and may contain information that is out of date. Some content may be relevant but please refer to the relevant official documentation or available resources for the latest information.

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.

About the author(s)

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 Write a Strong Resume That Will Be Read by Hiring Managers and Recruiters

Applying for software jobs can be stressful and time consuming. One of most stressful components is writing a resume. A lot of people struggle to write strong resumes and end up paying the price by getting passed over for tech interviews. In this article, I will provide tips on how to write a strong resume and how to avoid common mistakes made by applicants. What is the applicant tracking system? The applicant tracking system will collect and sort through thousands of resumes and help determine which ones match the job description posted. The program will look for keywords in the job listing and search for those keywords in the resume. If there are a lot of missing keywords and skills from your resume it will be rejected by the ATS software. But if your experience and skills match the job listing then it a recruiter or hiring manager will take a look. Why are ATS programs used? When companies post job listings online, they will often receive hundreds of resumes and it can be overwhelming for hiring managers to go through all of them. The role of the ATS program is to filter out applicants who don't meet the listed criteria for the job. How to get past the ATS programs When you are applying or jobs, it is important that you list of few key skills and keywords mentioned in the job listing so you will have a better chance of making it past the ATS program. It is best to tailor your resume for each job instead of sending out generic resumes to hundreds of companies. You should also use consistent formatting and use standard fonts like Helvetica, Garamond, or Georgia. Lastly, avoid using tables or columns because they don't always work best for ATS programs. How to format your file for ATS programs It is important to submit a resume in either a .docx or .pdf file so it can be easily read by ATS programs. Submitting our resume in a format that dosn't work well for ATS programs can lead to automatic rejection by the software. What to include on your resume Your resume should include these key sections: - Contact information - Summary - Education - Work experience - Software projects - Skills Contact information At the top of your resume, you should include your name, phone, email address and location. If you are in the United States, just list your City and State. If you are based elsewhere, just list your city and country. There is no reason to include your full mailing address on your resume because that could lead to privacy or even discrimination issues. You can also choose to list your GitHub profile or Linkedin profile under the contact section. If you have a website or portfolio, you can list that here as well. Summary Under your contact information, you can have a short 2-3 sentence summary. This is meant to be a section to explain why your experience and skills make you qualified for the job. Remember that recruiters and hiring managers will only spend a few seconds on your resume. Focus on making an impactful short summary that recruiters will want to read. Education If you have a degree, even if it is not in computer science, you should definitely list that on your resume. If you don't have a lot of work experience, it is ok to list your education at the top. But if you have some work experience, you will want to list that first. When it comes to online courses, I would suggest being selective about what to list. If you have AWS or Oracle certifications, then list those. But if you have a whole bunch of Udemy courses, then I would personally avoid listing those. There is nothing with Udemy courses, but it is important to remember that recruiters and hiring managers will place more weight on college degrees and certifications from large tech companies. Work experience When it comes to your work experience you want to focus on the contributions you made to the team and the value you brought to the company. Be specific about what you contributed to the projects because potential employers want to see what you can bring to their teams. Software Projects In this section, you want to focus on substantial side projects you have built and been involved with. Avoid listing every single small class project you did in an hour or so. Only list projects where you have invested significant amount of time and effort into. Remember that this is a chance to show off your skills. Skills When it comes to listing your skills, focus on the core soft skills and technologies you have worked with the most. Remember that any technology you list on your resume is fair game during a technical interview. If you haven't worked with that technology enough to be comfortable discussing it in an interview, then avoid placing it on your resume. Here are some free resumes templates you can look at to help you write your resume. - Taylor Desseyn's resume template - Arc's resume template Mistakes to avoid in your resume There are a few important mistakes you need to avoid doing in your resume to help ensure that it is not immediately rejected by potential employers. Spelling errors If your resume is filled with spelling errors, it sends the message that you produce sloppy work and don't care about the finished product. When you have finished a draft of your resume, make sure to read it out loud to catch obvious spelling and grammatical errors. Then share it with your friends, family and others in your network to look it over too. A fresh pair of eyes can help you catch errors that you might have missed the first time around. You can also use tools like Grammarly to help check your work. Aside from common spelling and grammatical errors, it is really important that you properly capitalize technologies. For example, if you are applying for a web developer position, please do not list "javascript" or "Javascript". The correct capitalization is "JavaScript". Triple check to make sure you are properly capitalizing the names of the technologies you are working with. Unprofessional email address When you are applying for these software jobs, you need to come across as a professional in every way possible. This includes having a professional email address. If you are still using an email address from high school like "awesompants@hotmail.com" or "ilove2party@aol.com" ,then please change that. It doesn't matter how good of a software engineer you are. If your email address is unprofessional, recruiters will throw your resume away. Take the time to set up a professional sounding email address so people will take you seriously. A good safe format would be your name followed by the email provider. For example: johndoe@gmail.com Head shots on a resume In the United States, it is not encouraged to include an image on your resume. Some recruiters and hiring managers will view that as unprofessional while others unfortunately will discriminate against you for your photo. Also, a lot of applicant tracking systems don't work well with images. It is best to leave it off your resume and just focus on your skills and experience. If recruiters or hiring managers really want to see an image, they can visit your Linkedin profile or other social media sites. Listing to many technologies on your resume If you are a software engineer with 15+ years of experience, it is expected that you will have worked with a variety of technologies. But if you are just starting out with very little work experience, avoid listing every single technology you have programmed "hello world" in. Listing dozens of technologies in a short time frame could come across as scattered and unfocused to a hiring manager. Make sure to just list the those you have built substantial projects with, or have worked with professionally. For example, I took a couple of classes early on that involved C and Python. But I don't list them on my resume because I only spent a few weeks on them and never built anything substantial. So I chose to only list technologies that I have worked with and am comfortable talking about in interviews. Summaries are to long Writing a short clear, and concise resume summary takes a lot of time and effort. A big mistake would be to write a summary that is too long and not filled with any substance. Keep your summaries to three sentences, and talk about the value you bring to companies. If recruiters or hiring managers see a summary that has multiple paragraphs, they will just skip over it. Avoid stuffing our resume with keywords just to pass the ATS software Some people will stuff their resume with keywords in an effort to get pass the ATS programs. The issue with that is when a recruiter or hiring mangers sees that, it will be obvious that the applicant is just stuffing their application with keywords. Avoid doing this practice because it usually leads to automatic rejections by hiring managers. Conclusion No one enjoys having to work on their resume but it is important part of the hiring process. Take the time to draft a strong resume and get feedback from friends and family before submitting it to potential employers....

Jul 15, 2022

7 mins

Career

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

How to Resolve Nested Queries in Apollo Server

When working with relational data, there will be times when you will need to access information within nested queries. But how would this work within the context of Apollo Server? In this article, we will take a look at a few code examples that explore different solutions on how to resolve nested queries in Apollo Server. I have included all code examples in CodeSandbox if you are interested in trying them out on your own. Prerequisites This article assumes that you have a basic knowledge of GraphQL terminology. Table of Contents - How to resolve nested queries: An approach using resolvers and the filter method - A refactored approach using Data Loaders and Data Sources - What are Data Loaders - How to setup a Data Source - Setting up our schemas and resolvers - Resolving nested queries when microservices are involved - Conclusion How to resolve nested queries: An approach using resolvers and the filter method In this first example, we are going to be working with two data structures called musicBrands and musicAccessories. musicBrands is a collection of entities consisting of id and name. musicAccessories is a collection of entities consisting of the product name, price, id and an associated brandId. You can think of the brandId as a foreign key that connects the two database tables. We also need to set up the schemas for the brands and accessories. ` The next step is to set up a resolver for our Query to return all of the music accessories. ` When we run the following query and start the server, we will see this JSON output: ` ` As you can see, we are getting back the value of null for the brands field. This is because we haven't set up that relationship yet in the resolvers. Inside our resolver, we are going to create another query for the MusicAccessories and have the value for the brands key be a filtered array of results for each brand. ` When we run the query, this will be the final result: ` ` This single query makes it easy to access the data we need on the client side as compared to the REST API approach. If this were a REST API, then we would be dealing with multiple API calls and a Promise.all which could get a little messy. You can find the entire code in this CodeSandbox example. A refactored approach using Data Loaders and Data Sources Even though our first approach does solve the issue of resolving nested queries, we still have an issue fetching the same data repeatedly. Let’s look at this example query: ` If we take a look at the results, we are making additional queries for the brand each time we request the information. This leads to the N+1 problem in our current implementation. We can solve this issue by using Data Loaders and Data Sources. What are Data Loaders Data Loaders are used to batch and cache fetch requests. This allows us to fetch the same data and work with cached results, and reduce the number of API calls we have to make. To learn more about Data Loaders in GraphQL, please read this helpful article. How to setup a Data Source In this example, we will be using the following packages: - apollo-datasource - apollo-server-caching - dataloader We first need to create a BrandAccessoryDataSource class which will simulate the fetching of our data. ` We will then set up a constructor with a custom Dataloader. ` Right below our constructor, we will set up the context and cache. ` We then want to set up the error handling and cache keys for both the accessories and brands. To learn more about how caching works with GraphQL, please read through this article. ` Next, we are going to set up an asynchronous function called get which takes in an id. The goal of this function is to first check if there is anything in the cached results and if so return those cached results. Otherwise, we will set that data to the cache and return it. We will set the ttl(Time to Live in cache) value to 15 seconds. ` Below the get function, we will create another asynchronous function called getByBrand which takes in a brand. This function will have a similar setup to the get function but will filter out the data by brand. ` Setting up our schemas and resolvers The last part of this refactored example includes modifying the resolvers. We first need to add an accessory key to our Query schema. ` Inside the resolver, we will add the accessories key with a value for the function that returns the data source we created earlier. ` We also need to refactor our Brand resolver to include the data source we set up earlier. ` Lastly, we need to modify our ApolloServer object to include the BrandAccessoryDataSource. ` Here is the entire CodeSandbox example. When the server starts up, click on the Query your server button and run the following query: ` Resolving nested queries when microservices are involved Microservices is a type of architecture that will split up your software into smaller independent services. All of these smaller services can interact with a single API data layer. In this case, this data layer would be GraphQL. The client will interact directly with this data layer, and will consume API data from a single entry point. You would similarly resolve your nested queries as before because, at the end of the day, there are just functions. But now, this single API layer will reduce the number of requests made by the client because only the data layer will be called. This simplifies the data fetching experience on the client side. Conclusion In this article, we looked at a few code examples that explored different solutions on how to resolve nested queries in Apollo Server. The first approach involved creating custom resolvers and then using the filter method to filter out music accessories by brand. We then refactored that example to use a custom DataLoader and Data Source to fix the "N+1 problem". Lastly, we briefly touched on how to approach this solution if microservices were involved. If you want to get started with Apollo Server and build your own nested queries and resolvers using these patterns, check out our serverless-apollo-contentful starter kit!...

May 17, 2023

6 mins

GraphQL

Svelte 5 is Here!

Svelte 5 was finally released after a long time in development. Fortunately, we've been able to test it for some time, and now it has a stable release. Let's dig into its features and why this is such a significant change, even though Svelte 4 code is almost 100% compatible. Svelte syntax everywhere This is one of my favorite additions. Previously, Svelte syntax was limited to a component element. Refactoring code from a component and moving it to a JavaScript file worked differently. Now you can use the .svelte.js or .svelte.ts extension, which allows you to use the same syntax everywhere. It's important to note that it's a way to express that this is not just JS, and what you write may be compiled to something else, just like .svelte files are not just html even though they look very similar. Runes The introduction of runes is one of the most significant changes in Svelte. Many users felt attracted to variables being instantly reactive in previous versions. ` There was, however, a lot of magic underneath and a considerable amount of work from the compiler to make it behave reactively. $state In Svelte 5, a reactive variable has to be explicitly declared using the $state rune, which brings a clear distinction between what is reactive and what isn’t. ` In the previous code, $state is not an actual function being called; it's a hint for the compiler to do something special with this declaration. Rune names always start with a dollar sign ($) and do not need to be imported. However, there’s much more to the changes than just the way we declare reactive variables. Runes bring a lot of new features that make Svelte 5 a great improvement. In Svelte 5, objects or arrays use Proxies to allow for granular reactivity, meaning that individual properties in an object are reactive, even if they are nested objects or arrays. If you modify a property, it will only update that property and will not trigger an update on the whole object. It also supports triggering updates when methods like array.push are called. In previous versions, an assignment was required to trigger an update: ` To have a similar behavior of svelte 4 (no deep reactivity), use the $state.raw() rune. This syntax of .* is common for related features of a rune: $state.raw() will require an assignment to trigger reactivity. ` Because proxies are used, you may need to extract the underlying state instead of the proxy itself. In that case, $state.snapshot() should be used: ` $derived We will use $derived and $derived.by to declare a derived state. The two runes are essentially the same, except one allows us to use a function instead of an expression, allowing for more complex operations to calculate the derived values. ` $effect Effects are useful for running something triggered by a change in state. One of the things you'll note from the $effect rune is that dependencies don't need to be explicit. Those will be picked from reactive values read synchronously in the body of the effect function. ` Something to bear in mind is that these dependencies are picked each time the effect runs. The values read during the last run become the dependencies of the effect. ` Depending on the result of the random method, foo or bar will stop being a dependency of the effect. You should place them outside the condition so they can trigger reruns of the effect. *Variants* of the effect rune are $effect.pre, which runs before a DOM update, and $effect.tracking(), which checks for the context of the effect (true for an effect inside an effect or in the template). $props This rune replaces the export let keywords used in previous versions to define a component's props. To use the $props syntax, we can consider it to return an object with all the properties a component receives. We can use JavaScript syntax to destructure it or use the rest property if we want to retrieve every property not explicitly destructured.. ` $bindable If you want to mutate a prop so that the change flows back to the parent, you can use the $bindable prop to make it work in both directions. A parent component can pass a value to a child component, and the child component is able to modify it, returning the data back to the parent component. ` $inspect The $inspect rune only works in dev mode and will track dependencies deeply. By default, it will call console.log with the provided argument whenever it detects a change. To change the underlying function, use $inspect.with().with): ` $host The host rune gives access to the host element when compiling as a custom element: ` ` Other changes Another important change is that component events are just props in Svelte 5, so you can destructure them using the $props() rune: ` A special children property can be used to project content into a component instead of using slots. Inside the components, use the [@render[(https://svelte.dev/docs/svelte/@render) tag to place them. ` Optional chaining (?.) prevents from attempting to render it if no children are passed in. If you need to render different components in different places (named slots before Svelte 5, you can pass them as any other prop, and use @render with them. Snippets Snippets allow us to declare markup slices and render them conveniently using the render tag (@render). They can take any number of arguments. ` Snippets can also be passed as props to other components. ` ` Conclusion Some exciting changes to the Svelte syntax were introduced while, at the same time, maximum compatibility efforts were made. This was a massive rewrite with numerous improvements in terms of performance, bundle size, and DX. Besides that, a new CLI has been released, making the whole experience of starting a project or adding features delightful. If you haven't tried Svelte before, it's a great time to try it now....

Nov 27, 2024

4 mins

Svelte

Let's innovate together!

We're ready to be your trusted technical partners in your digital innovation journey.

Whether it's modernization or custom software solutions, our team of experts can guide you through best practices and how to build scalable, performant software that lasts.

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 Write a Strong Resume That Will Be Read by Hiring Managers and Recruiters

How to Avoid Common Pitfalls and Ace Your Take Home Assignment

How to Resolve Nested Queries in Apollo Server

Svelte 5 is Here!

Let's innovate together!

You might also like

How to Write a Strong Resume That Will Be Read by Hiring Managers and Recruiters

How to Avoid Common Pitfalls and Ace Your Take Home Assignment

How to Resolve Nested Queries in Apollo Server

Svelte 5 is Here!