GraphQL is a relatively new technology brought to the world by Meta (formerly Facebook). Despite being new, it is getting more and more popular. Almost all the big industries and many small organizations and startups use GraphQL. That’s why it is required knowledge for every web developer in today's age. While working with GraphQL schemas, we must follow some best practices for designing cuttingedge schemas. Otherwise, as the project grows, there will be no smooth design, and the project will be a mess. Today, we will discuss some best practices while designing GraphQL schemas. So, without furtherado, let’s jump into the main points. 1. Use deprecation messages properly. While working on a team, there are many scenarios when the requirements change. Sometimes, we need to change the field name or remove some fields. For example, suppose you are building a blogging website. You are designing a schema for fetching a blog. The schema initially looks like the following schema: blog(id: $id) { title subtitle imageUrl } Now, the requirement has changed, and you are told to include alt text for the images; now, you design the schema like the below: blog(id: $id) { title subtitle image { src alt } } You now changed your API and published it to production. But, Wait! As soon as you publish your new changes to the production, your app will break because your frontend team has not implemented your changes yet! Even if you are implementing a public or partner API, it’s a BIG NO to push these changes directly! On the contrary, keeping this field also doesn’t solve the problem because it is a redundant field. Your frontend team or end user might not know whether this field will be removed or not. You also don’t know for how long you will keep this field. Keeping the field in this example might not be a big issue, but there might be lots of areas that should be removed at some point. So what’s the Solution? Instead of obliterating the field, deprecate the field with a reason and a date when you will remove this field. In this way, the frontend developers will have a chance to look into this issue, and they can change this field at some point. type Blog { title: String subtitle: String imageUrl: String @deprecated(reason: "This field is deprecated and will be removed on Aug 6, 2022. Use image field instead.") image: { src: String alt: String } } 2. Explicitly name your variables. It would help if you named your schema variables explicitly. The variable's name should be concise and return the output it promised. Also, your variable naming should not mansplain its purpose or type. Here are some examples of naming variables while designing GraphQL schema: BAD imageUrlString descriptionText GOOD imageUrl likesCount In this example, if you pass an image URL with your variable, you should name it imageURL. On the other hand, if you are giving an image object with width, height, src, and alt text, you should call that variable image. Similar applies to the likesCount too. likesCount means that we are passing the number of likes in this variable, but if we picked likes as our naming, it would mean the list of users who liked the post. So, name your variables explicitly. 3. Use aliases. Using aliases can solve a lot of redundancy problems. Let’s check the following example for a better understanding. Let’s say we need to return two different types of descriptions for our schema. One is the description, and the other is the descriptionHtml. We can add these two same kinds of fields using aliases. { description descriptionHtml: description(format: "HTML") } This is so powerful that we can use this in many use cases like below: { descriptionEn: description(lang: "en") descriptionEnHTML: description(format: "HTML", lang: "en") descriptionFr: description(lang: "fr") } 4. Make fields nullable. It is another essential but easy practice you can consider while developing your every GraphQL project. It’s easy because GraphQL, by default, makes the fields nullable. Making fields nullable is helpful because we might deprecate a field whenever the project requirement changes and stop assigning values to that variable. This would throw an error if we didn’t make the field nullable. So, it is a great idea to keep the fields nullable unless you should make them nonnullable. 5. Use Relay Cursor Connection Specification while using pagination. I have written an article explaining in GraphQL and how . You can read these two articles if you want. 6. Create a user entry point for the authenticated user. Don’t allow the client applications to provide the user identity. Use authentication token to fetch user data. Also, create a user entry point to get the authenticated user's information. BAD user(email: $email) { username email name lastLoggedIn } GOOD me { username email name lastLoggedIn } Also, remember, don’t ever save your authentication token in cookies or local storage. I wrote an article describing . You can read this article if you want. 7. Turn introspection off in production. It is one of the most crucial things. Turn off the introspection of the GraphQL server while in production. You don’t want to expose your API design to the public unless you build the API for public apps. That’s it. I hope this article will be helpful to you. Have a great day! References

Today in this article, we will see how we can add Google Analytics to our Next.js app. So without further ado, let’s jump right into it. Step 1: Creating a new Next.js app First, let’s create a new Next.js app by running the command in the terminal: sh npx createnextapp demoapp This step is not required if you already have an existing Next.js app and want to add Google Analytics. Step 2: Create a new property in Google Analytics Now, let’s go to the . Create your Google Analytics account if you haven’t already. After creating the Google Analytics account, click on the “Admin” section in the bottom left corner and click “Create Property.” Give the property a name and fill out all the other staffs the form is asking for. Step 3: Create DataStream in Google Analytics Next, we need to set up our data stream for our Next.js app. Here, we can set up data streams for three types of platforms. As we add analytics to our Next.js app, we will choose “Web.” Then we should give our website URL and a stream name. When you have done that, click on “Create Stream.” Step 4: Add Google Analytics script to your Next.js app After creating the stream, you get the web stream details page. Expand the “Global site tag (gtag.js),” and you should see some script code. Now, add this script in app.tsx of your Next.js app. We used Next.js’s Script component to render the script tag. We added strategy=”lazyOnload” in the Script component. We also put the Google Analytics Code in our environment variable (in the .env file), named NEXTPUBLICGOOGLEANALYTICSCODE. The rest are similar to what we copied from the Google Analytics website. Step 5: Test if Google Analytics is correctly set up on your web app We have completed setting up Google Analytics in our Next.js web application. Now we need to test whether Google Analytics is correctly set up. Let’s connect to our web application and open the console from the browser. On the console, let’s write dataLayer and hit enter. If Google Analytics is correctly set up on our web app, we should see something similar to the bottom. Conclusion We have successfully integrated Google Analytics into our Next.js web application. We can now analyze our web visitors from the Google Analytics charts.

Making a great GitHub portfolio is very helpful for any developer. It helps create a great impression, and it is one of the best ways to make your skills stand out. This tutorial will make your boring GitHub profile into a super professionallooking portfolio. So without further ado, let’s get right into it. Step 1: Create a New Public Repository The first step is to create a new public Repository with the same name as your GitHub username. In my case, my GitHub username is ludehsar, so I am starting a new public repository named ludehsar. Ensure the project is Public and “Add a README file” is checked. After that, click on the “Create repository” button. Step 2: Edit the README.md file Now, after creating a new repository, click on the edit icon in your README.md file, and paste the following code: Hi there 👋 I am Md Rashedul Alam Anik, currently working as a Software Engineer at the . I am a FullStack JavaScript developer and love writing clean and maintainable code. Find out more about me & feel free to connect with me here: ](https://www.linkedin.com/in/ludehsar/) ](https://rashedulalam.medium.com/) ](mailto:mdraanik12@gmail.com) ](https://www.facebook.com/rashedul.alam.anik.2/) ⚡ Technologies ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! ! Here, this profile README is divided into four parts. The first section is an overview, the second section is social icon badges, the third section is Technologies badges, and the last one is statistics. Let’s first change the overview according to our personal preferences. After changing the bio, let’s change the links and labels of the social icon badges. You can add all the social icons from . Here is a sample social link badge: ](https://www.linkedin.com/in/ludehsar/) Here, we should change the links according to our social URLs. Also, to change the label, you can rename the ludehsar label to your preferred name here. After that, you can customize the skills badges according to your skills. You can find those badges in . The final part is the statistics. You can generate your stats by changing the username to your username. After all those changes, your profile should look something like this: Step 3: Manage Your Pinned Repositories You can add your pinned repository by clicking on the “Customize your pins” link. You can add up to six pinned repositories on your profile homepage. You can also sort the pinned repositories by using the dragging icon. Step 4: Organize your repositories There are various steps when it comes to organizing your repositories. First of all, your repositories need to have a nice short description in the about section. To add a description in your about section, click on the cog button beside the About section like below: It’s also nice to include the website URL and the topics associated with this repository. You can also manage including different components in your repository by checking or unchecking the bottom parts in the about settings. Next, you can add a nice README to your project. To add a beautiful readme that catches the eye, you can follow my below tutorial: You can also add other markdown documentation, such as CONTRIBUTING.md, CODEOFCONDUCT.md, SECURITY.md etc. You can generate all those markdown files from the settings of the repositories. These are nice to have as they tell other developers how they can contribute to your project. Step 5: Contribute to Open Source Project The final tip to make your GitHub profile look good is contributing to opensource projects daily. It will help grow your green mark in your contribution heat map. Even if you cannot contribute to the opensource project, you can work on your project. This will increase the green contribution list in your heat map. Conclusion That’s pretty much it. If you follow these simple and easy steps, your GitHub profile will look super professional. Making your GitHub profile look professional will help you create a better impression as a developer. It will boost your chances of getting any programming jobs. Moreover, it will build your programming profile personality and even can help you reach more clients as a software developer.