Sanity

sanity

Simplify File Management in Node.js With Sanity CMS: A Step-by-Step Guide for Easy CRUD Operations

What is it All About? As a testing engineer, you've probably heard of such types of testing as smoke, sanity, re-test and regression testing. It is quite possible that many of these types are used by you on a daily basis. In this article, I would like to clarify and explain the difference between these types of testing and try to figure out, draw boundaries (albeit conditional) where one type of testing ends and another begins. For beginners in testing (and even experienced testers), separating these concepts can be difficult. And in fact, how to distinguish where sanity testing begins and smoke ends? How much do we need to limit the verification of a part of the functionality of the system or its components to call it "smoke" testing? Is entering a login/password into the user login form on the site a smoke test, or is the very fact of its appearance on the site page already a passed test? Strictly speaking, you will still be able to conduct testing, even though you won't be able to tell exactly what the difference is. You don't even have to think about the distinction of what kind of testing you are currently engaged in. But still, in order to grow above yourself in a professional sense, you need to know what you are doing, why, and how well you are doing it. Details Below are brief definitions of the types of testing that we are comparing today: are performed every time we receive a new build (version) of a project (system) for testing, while considering it relatively unstable. We need to make sure that the critical AUT (Application Under Test) functions are working as expected. Smoke tests: The idea of this type of testing is to identify serious problems as early as possible, and reject this build (return it for revision) at an early stage of testing, so as not to delve into long and complex tests, thereby not wasting time on obviously defective software. : Used every time we get a relatively stable software build to determine the operability in detail. In other words, it validates that important parts of the system functionality work according to the requirements at a low level. Sanitary testing Both of these types of testing are aimed at avoiding the loss of time and effort in order to quickly identify software flaws and their criticality, as well as whether it deserves to go into a phase of more in-depth and thorough testing or not. Performed if the feature/functionality already had defects, and these defects were recently fixed. Re-test: actually, what takes the lion's share of time and what testing automation is for. Regression testing of AUT is carried out when it is necessary to make sure that new (added) application functions / fixed defects did not affect the current, already existing functionality that worked (and tested) earlier. Regression tests: For a better understanding, a comparative table of these concepts and areas of application is presented below: Smoke They are executed in order to verify that the critical functional parts of the AUT are working as expected. The goal is to check the "stability" of the system as a whole in order to give the green light for more thorough testing. Rechecking defects is not the purpose of Smoke. Smoke testing is performed before regression testing. It can be performed automatically or manually. Is a subset of regression testing. Test cases are part of regression test cases, but covering extremely critical functionality. Sanity It is aimed at establishing the fact that certain parts of the AUT still work as expected after minor changes or bug fixes. The goal is to check the overall state of the system in detail in order to proceed with more thorough testing. Rechecking defects is not the purpose of Sanity. Sanitary testing is performed before regression and after smoke tests. More often performed manually. A subset of acceptance testing. Sanitary can be performed without test cases, but knowledge of the system under test is mandatory. Regression Confirm that recent changes in the code or the application as a whole have not had a negative impact on the already existing functionality/set of functions. The goal is to make sure that recent changes in the code have not had side effects on the established working functionality. Rechecking defects is not the purpose of Regression. It is carried out based on the requirements of the project and the availability of resources (closed by autotests), "regression" can be carried out in parallel with re-tests. The best reason to automate this type of testing, because manual testing can be extremely resource- or time-consuming. It is executed with any modification or modification in an already existing project. Regression testing test cases can be derived from functional requirements or specifications, user manuals, and are conducted regardless of what the developers have fixed. Re-Test Rechecks and confirms the fact that previously littered test cases pass after the defects are corrected. The re-test verifies that the defect is fixed. The fact that the defect has been fixed is confirmed by Re-Test. Re-test is performed before sanity testing. Also, the priority of the re-test is higher than regression checks, so it should be performed before them. Not amenable to automation. The re-test is performed on a corrected assembly using the same data, on the same environment, but with a different set of input data. The same test case that revealed the defect is used. But Essentially? I will give an example of the differentiation of concepts on my current project.
Example: We have a web service with a user interface and a RESTful API. As testers, we know: That it has 10 entry points, for simplicity, in our case located on the same IP We know they all accept a GET request for input, returning some data in json format. Then you can make a number of statements about what types of tests you need to use at what point in time: By executing one simple GET request to one of these entry points, and receiving a response in json format, we are already convinced that the smoke testing has passed. If one of these entry points also returns data from the database, while the first one does not, you need to additionally make another request to make sure that the application processes requests to the database correctly. And this is the end of the "smoky" test.That is, we executed the request — a response came from the service, and it did not "smoke", that is, it did not return a 4xx or 5xx error, and something inarticulate, instead of json. On this we can say that the "smoky" test has been passed. To check that the UI works the same way, just open the page in the browser once. Sanitary testing in this case will consist of executing a request to all 10 api entry points, verifying the received json with the expected one, as well as the presence of the required data in it. Regression tests will consist of smoke + sanity + UI running together in one heap. Purpose: to check that adding the 11th entry point did not break, for example, password recovery. Re-test in this example is a point check that, for example, a broken api entry point in the next build works out as intended. At the same time, if this api also accepts post requests, then it is obvious that it is necessary to include these requests in another set of sanity tests. By analogy with the UI, we will check all the pages of the application. Let's Summarize I hope that after reading this article, you will have clarity in determining which type of testing you are using at what stage, and what is the difference between these types of testing. As mentioned at the beginning, the boundary between these concepts is very conditional and remains at your discretion within the framework of the project. Thank you for your time, that is all. Ruslan Muradov.

Testing Has a Type: Smoke, Sanity, Regression, Re-Test

Build an E-commerce Site with Sanity and Commerce Layer

There are many online platforms for selling courses online, however, I found a few limitations. For the course platform, I would like more customization of landing pages, subscriptions, and content structure. Therefore, I created my own platform for selling courses myself. Here, I’ll briefly describe how I built a platform for selling my course. We used Gatsby Framework, Sanity_io, and Stripe to build the website. Gatsby is a framework built on React. We use the Gatsby Framework to build the frontend and backend. The benefits of using the Gatsby framework are as follows: It supports thousands of plugins that we can use in the project. We can fetch the data both at build and runtime. Run serverless function. To get started with the Gatsby Framework, you can choose the starter template from the below page. https://www.gatsbyjs.com/starters ![Gatsby Starter](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.215Z-cl1lncqbz00480as67za6g030"Gatsby Starter") The starter template is the reference point. You can customize the starter template as per your need. For the project, we used Tailwind CSS to style the HTML elements. Tailwind CSS provides utility classes that we can use in the project. Take a look at the image below to see how tailwind works. You can also find tons of Tailwind CSS components online that you can use in your project. Some of the example websites are listed below. https://tailwindcomponents.com https://flowbite.com https://www.wickedtemplates.com In order to make the website available on the internet, we host the project on Github and deploy the repo on Netlify. Netlify provides a better user experience to build, deploy, and scale production applications. ![Netlify build](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.216Z-cl1lncqc000490as6eo6p0g0j"Netlify build") Gatsby is a framework, not a database. So, we need a database to store and manage the content data. I use Sanity_io for that purpose. You can see the official Sanity page below. https://www.sanity.io ![Sanity website](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.216Z-cl1lncqc0004a0as6drcs6fef"Sanity website") Sanity_io has two layers as below. Sanity Studio Sanity Server The Sanity Server is a database, fully managed by the Sanity team so we don’t need to worry about that. Sanity has a pricing model that charges for data usage. Sanity Studio is a CMS that allows us to fully customize the document’s schema. In our case, we can create different documents in Sanity Studio e.g. course, customer, subscription, etc. For each document, we can define a custom schema as per the requirements. ![Sanity Studio](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.217Z-cl1lncqc1004b0as65scn2azq"Sanity Studio") Stripe is the platform we use to process online payments. To collect payments from users, we need to build a checkout page. In Stripe, we have multiple options to create checkout. Below are two approaches to creating Stripe checkout: Stripe built-in checkout (fully managed by Stripe team). Create custom checkout using the Stripe API. Stripe’s built-in checkout is easier to use since we can have fewer bugs and more payment solutions out of the box. How to interconnect different layers of service? The data is stored in Sanity Studio, the frontend UI is built on Gatsby Framework, and recipient subscription details are available on the Stripe server. As described, we have three layers of services. We want the data to be available to the user in the Gatsby project. To glue the data layers, we can use the API. By using the Stripe Node API, we can retrieve and modify the recipient subscription. In the Gatsby framework, we use serverless functions to execute the Stripe Node API calls. You can find the Stripe Node API on the below page. https://stripe.com/docs/api?lang=node ![Stripe Node API](https://cdn.hackernoon.com//images/GRZpzqpoJyMvFZW6lPH4PI3T5HB2-2022-04-05T04:34:03.222Z-cl1lncqc6004c0as63oxtb8rg"Stripe Node API") To get the Sanity data in the frontend, we can send the HTTP requests to the respective API route. We can use the Sanity GROQ language to get the desired data from the Sanity server. You can learn more about Sanity GROQ language on the following page. https://www.sanity.io/docs/groq Final words Here, I discuss briefly how I built my course platform website. If you want to learn more, you can check the below course. Build A Standout Website

How to Build a Platform to Sell Your Online Course (A Brief Outline)

How to make a chatbot in Slack with Sanity, Webtask and Dialogflow Make intents for chatbots and conversational UIs a part of your content management system Heads up! You’re required some knowledge of JavaScript to do this tutorial, but it may still be interesting for how we think about integrating chatbots into a CMS. The idea of a is to detach your content from the constraints of web pages, in order to reuse it in many contexts. This makes sense even when you only want to display your content on a webpage, because you can structure it in a way where content can be reused across many pages, and more easily switch your frontend code when something more fancy comes around. The real power of headless, however, comes when you manage to reuse your content in different interfaces. headless content management system Chatbots have been part of the tech buzz for a while now, and it seems that demand is increasing while the tools and AI models become more refined. Google’s just launched support for my native language, Norwegian, which proved a good excuse for me to do some experimentation. I have been pondering for a while how we could implement chatbot-responses with the headless we use at , which is Sanity ( ). I think I found a pattern that is easy to implement and maintain. Dialogflow CMS Netlife read more about why we chose Sanity here In sum, you’ll need to: Set up an agent in Dialogflow Make a , and custom app in Slack connect it to Dialogflow Add some intent and fullfillments schemas in Sanity Connect Sanity and Dialogflow with a serverless service, in this case webtask.io I. Make an agent and an intent in Dialogflow Once logged into Dialogflow, choose and give it a name and choose appropriate settings (I chose the V2 API). In my case I wanted to make a that could connect our company’s intranet with Slack. I named it after our Chief of Staff (a role which, granted, never can be fully automated). Create new agent chatbot Once you’ve made a new agent, go to and choose the button. You can think of an “intent” as “a certain thing that a user would want to do or have answered”. My intent was to get an answer about how we in Netlife book travel. Give the intent a descriptive name; we’ll use this name in Sanity to map the correct content. Fill out different training phrases, which are examples of what your users would write or say(!) in order to request the said information. In this case, it’s variations on “how do I book travel” and so on. Hopefully you’ll won’t need to enter many alternatives before Google’s machine learning algorithms are able to route the user to this intent. You can test how well it works in the right hand sidebar. Intents Create Intent Set up an intent in Dialogflow, test it in the right hand sidebar. Here I have set up alternatives in Norwegian for the question “how do I book travel” You can write out the different possible answers for this intent in Dialogflow’s -sections, but where’s the fun in that? Instead, turn on . This will make Dialogflow post a request to whatever URL you put in the section. We will return to this when we set up our microservice in webtaks.io. Responses Enable webhook call for this intent Fullfillment II. Make an custom app in Slack and connect it to Dialogflow If you go to in the left sidebar in Dialogflow, you’ll discover that it can integrate with many different services. The setup will be pretty similar with most of them, but we want Slack. Follow the instructions in in the Slack box closely. And by “closely” I mean that you should take your time to read the instructions and try to understand them. Integrations Settings Make sure that you give the Slack bot the necessary event subscriptions. Your Slack-bot will need both some authentication and event subscriptions in order to be able to read your queries in Slack. You could have it listen to all conservations, but I prefer it to only answer direct or @-mention messages. Partly because I don’t want the bot to accidently trigger in mid conversation, and partly because I don’t want to feed Dialogflow every line of conversation in our Slack if there is not a very good reason to. III. Add some schemas for intents and fullfillments in Sanity If you are not familiar with Sanity yet, and be back here in fifteen minutes. The content schemas (i.e document types and input fields) in Sanity . We’re going to make a pretty simple setup by creating a type for and adding a content field for in our intranet-post-type. go try it out are written as JavaScript objects with some simple convetions Intents Fullfillments In our post type, where we write the articles for our intranett, I added an array field called that consists of a simple field. We could make this more complex in order to support messages for different clients; for example, we could have one for , one for and one for . This time, we’ll keep it simple and just have some simple text responses do the work. fullfillments string voice interfaces Slack responsens with attachments Facebook messenger templates The intent schema consists of a title that makes it easy to find in Sanity, a that we’ll use to map it to that in Dialogflow and a reference field to the posts that contain the fullfillments to this intent. It makes sense to make intents its own type, because the fullfillments can live in different types. intentName Don’t let the Norwegian throw you off. IV. Tie it all together with webtask.io Now that we’ve set up Sanity with a intent and a fullfillment, we’re ready to connect it to Dialogflow. This is a case where serverless functions comes in handy. I went with because I had used it before and it has an online editor, but you could easily replicate this with either , , or any server(less) technology to your taste. In any case the core of the function will be very similar to this gist. webtask.io AWS Lambda stdlib Google Cloud Functions Example of the query in work using the Vision plugin for Sanity. This is proof of concept code and could benefit from some more error-handling and such. Webtask isn’t too keen on ES6-syntax either. You should pay attention to line 13 and how we locate the correct intent in Sanity. This is why it’s important to align the intent name in Dialogflow to that (i.e. intentName) in Sanity. In this case I’ve also chosen ouput the fullfillment strings randomly, just to make some variations possible. If you managed to piece all this together, you should now have a working chatbot in Slack that parses natural langauge for intents with machine learning in Dialogflow, finds the fullfillment texts from your headless CMS via a serverless function that talks to APIs. Now you only need to add Blockchain somewhere in this mix to tick off all the buzzword boxes. Further on, we could also connect intents in Dialogflow directly to Sanity via APIs and so on. There are many ways to advance this. Figure: The Slack chatbot at work. I’m trying variations on “how do I order travel”. We can see some encoding issues, and that we need some more training. But it is amazing technology for mundane uses. This is of course the technical side of the design project. Now the real work begins, with researching what your co-work uses actually might want to ask the bot, and designing the useful answers wrapped in a personality that your coworkers actually want to engange with. I’d recommend picking up by for starters. Conversational Design Erika Hall If you try this, or have some comments on my setup, I’d love to have your insights and questions in the comment section!

Put your chatbot where your headless CMS is

Simple steps to get started with podcasting on Sanity CMS tl;dr: run _sanity install podcast_ and follow the instructions on www.sanitypodcastfeed.com is a fully customizable, headless that you can install and get started with within two minutes if you know some basic JavaScript. Just run to get started, and follow these . Sanity CMS npm install -g @sanity/cli && sanity init instructions It’s also possible to extend and write plugins for Sanity. If you know React you can make your own custom input-fields, or custom tools within the Content Studio. You can also bootstrap content models with ready-to-go fields and content types. I know because I recently did this to make it possible to host your own podcasts (yes, that’s plural) in Sanity. Just run and and will appear as new content types in your Studio. sanity install podcast Podcast Episode Create as many podcasts and episodes as your heart desire I’m not sure if it even makes sense, but this setup also allows you to connect an episode to podcasts. Perhaps you want an exclusive feed for only paid supporters or the like? Well, now you can! multiple You can tie an episode to multiple podcasts. You’ll save your mp3-files in Sanity and have them available on a pretty fast network with CDNs. You also have pretty good control over bandwith use in the . Sanity control panel This on the free tier Sanity alone cannot really do all the work however, because it only outputs JSON. That’s generally awesome if you make a website, Alexa-skill or some other stuff, but most podcatchers and directories require a RSS-feed. So I have made that for you as well. You can either go to and follow the simple instructions there to have your RSS-feed instantly available, or it at your own if more control and customizations is required. It’s just a simple node.js-server that runs Hapi, and transforms the data from Sanity into a RSS-feed. www.sanitypodcastfeed.com you can fork, host and tweak The plugin and the podcast feed service is still in beta. Feel free to let me know how it works for you , and especially if it doesn’t! Head over to www.sanitypodcastfeed.com

Make your own podcasting platform!

I've been freelancing for 5 years now and have completed more than 20 projects for about 10 clients. The projects are mostly large and long-term. I needed to come up with an approach that would allow me to use logic from one project to another. I also needed to be in the context of each project without spending a lot of time recalling logic and architecture. The best way to solve the above problems was the modular architecture that my colleagues and I came up with on one of my first projects and later improved and tested by me on other web applications. In this article, I would like to talk about the module's structure as the modular architecture's main part. This will help you understand the essence and benefits of this approach. Module Structure For this example, I'm using React and TypeScript, but the modular architecture can also be used with other frameworks. Example Folder Structure: src/
  modules/
    user-management/
      UserProfile/
        UserProfile.tsx
        UserProfile.module.css
        index.ts
      slice.ts
      types.ts
      api.ts
      index.ts
  components/
    Button/
      Button.tsx
      Button.module.css
      index.ts
  pages/
    Users/
      Users.tsx
      Users.module.css
      index.ts components/: folder with general components of the application. This folder shouldn’t contain any module component, for example, UserInfo.  The best example here is a component Button, it can be used in many modules.


pages/: The page is mostly the entry point of each application. Usually, each page is a separate route. In our example for the page Users, we can have route /users. It looks like the page should be a part of a module, but this is the only exception as the page is like a constructor that can contain different modules.


modules/: folder contains all modules of the application.


user-management/: module, and below I will explain each file so you can understand the module structure


UserProfile/ In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple.


slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects.


types.ts should be used in case you have types, in my case I usually use TypeScript.
api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides.
index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. You can put any other files into your modules, I just highlighted the most important ones to show you the basic idea. The main benefit of the module architecture is that it is very simple. The complexity here is to logically divide your application into modules, which should be also domain-related. Module names shouldn’t have technical names, it should be understandable for the client. Modules can use global context, like env variables, CSS variables, and data from other modules through state management systems like redux. I've been freelancing for 5 years now and have completed more than 20 projects for about 10 clients. The projects are mostly large and long-term. I needed to come up with an approach that would allow me to use logic from one project to another. I also needed to be in the context of each project without spending a lot of time recalling logic and architecture. The best way to solve the above problems was the modular architecture that my colleagues and I came up with on one of my first projects and later improved and tested by me on other web applications. In this article, I would like to talk about the module's structure as the modular architecture's main part. This will help you understand the essence and benefits of this approach. Module Structure For this example, I'm using React and TypeScript, but the modular architecture can also be used with other frameworks. Example Folder Structure: Example Folder Structure: src/
  modules/
    user-management/
      UserProfile/
        UserProfile.tsx
        UserProfile.module.css
        index.ts
      slice.ts
      types.ts
      api.ts
      index.ts
  components/
    Button/
      Button.tsx
      Button.module.css
      index.ts
  pages/
    Users/
      Users.tsx
      Users.module.css
      index.ts src/
  modules/
    user-management/
      UserProfile/
        UserProfile.tsx
        UserProfile.module.css
        index.ts
      slice.ts
      types.ts
      api.ts
      index.ts
  components/
    Button/
      Button.tsx
      Button.module.css
      index.ts
  pages/
    Users/
      Users.tsx
      Users.module.css
      index.ts components/: folder with general components of the application. This folder shouldn’t contain any module component, for example, UserInfo.  The best example here is a component Button, it can be used in many modules. pages/: The page is mostly the entry point of each application. Usually, each page is a separate route. In our example for the page Users, we can have route /users. It looks like the page should be a part of a module, but this is the only exception as the page is like a constructor that can contain different modules. modules/: folder contains all modules of the application. user-management/: module, and below I will explain each file so you can understand the module structure


UserProfile/ In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple.


slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects.


types.ts should be used in case you have types, in my case I usually use TypeScript.
api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides.
index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. components/: folder with general components of the application. This folder shouldn’t contain any module component, for example, UserInfo.  The best example here is a component Button, it can be used in many modules. components/: folder with general components of the application. This folder shouldn’t contain any module component, for example, UserInfo.  The best example here is a component Button, it can be used in many modules. components/: pages/: The page is mostly the entry point of each application. Usually, each page is a separate route. In our example for the page Users, we can have route /users. It looks like the page should be a part of a module, but this is the only exception as the page is like a constructor that can contain different modules. pages/: The page is mostly the entry point of each application. Usually, each page is a separate route. In our example for the page Users, we can have route /users. It looks like the page should be a part of a module, but this is the only exception as the page is like a constructor that can contain different modules. pages/: modules/: folder contains all modules of the application. modules/: folder contains all modules of the application. modules/: user-management/: module, and below I will explain each file so you can understand the module structure UserProfile/ In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple.


slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects.


types.ts should be used in case you have types, in my case I usually use TypeScript.
api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides.
index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. user-management/: module, and below I will explain each file so you can understand the module structure user-management/: UserProfile/ In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple. slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects. types.ts should be used in case you have types, in my case I usually use TypeScript.
api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides.
index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. UserProfile/ In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple. UserProfile / In React all my components are folders with their styles. For styles I am using CSS modules, I think this approach is the best for the modular architecture. You are free to put all your module components inside the components folder in your module, but I prefer to put them into the root of the module. In case you have more than 5 components in your module - you should probably think to divide this module into smaller pieces. This is very important to keep the module simple. UserProfile slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects. slice.ts I usually use redux-toolkit so this file is a data management file that shows how data are merged into the general store. I am not a fan of creating each store for the module but you can do that in case you want to use this module in other projects. slice.ts types.ts should be used in case you have types, in my case I usually use TypeScript. api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides. index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. types.ts should be used in case you have types, in my case I usually use TypeScript. types.ts api.ts file that shows communication with the server. In case you are also responsible for the server side it is recommended to use modules architecture on that side as well, so your modules can be related to each other on both sides. api.ts index.ts this is the most important file of your module, it shows what part of your module can be used in pages and other modules. By using this file you can see dependencies and generate a dependency graph. index.ts You can put any other files into your modules, I just highlighted the most important ones to show you the basic idea. The main benefit of the module architecture is that it is very simple. The complexity here is to logically divide your application into modules, which should be also domain-related. Module names shouldn’t have technical names, it should be understandable for the client. Modules can use global context, like env variables, CSS variables, and data from other modules through state management systems like redux.

I Spent Years Freelancing in Web Dev—Here’s the Modular Trick That Saved My Sanity

My girl and I were enjoying one of the first days of a well-earned week of vacation at the sun-drenched Black Sea seaside. Damn near everything was downright paradisiacal until (as you do) we got into a little argument... Here’s the crux of the argument: Being on vacation, you’re inclined to take a lot of photos of yourselves looking fabulous and enjoying the colorful environs you find yourself in, and my girl was a bit upset that I wasn’t uploading more photos to social media of us looking like a cute couple as she was doing. Most of the photos I was uploading were just of me looking adventuresome and generally being museful in nature. In the past, a large marriage ceremony was the way a couple made a public declaration of love to one another; now, we do it by instantly broadcasting JPEGs around the world. Obviously, my girl wants that validation. This is my reasoning… I don’t want to drag her into the public space with me — The internet can be rude and nasty for public intellectuals who take controversial or unpopular positions as I sometimes do. I don’t want her ever to be harassed because of my opinions. The fewer photos and digital paper trails linking us, the better. Different public intellectuals I follow, like Stefan Molyneux, Joe Rogan, or Sam Harris, are careful to keep their loved ones’ images and names hard to find. Mindset guru and culture warrior extraordinaire Mike Cernovich has exposed his lovely wife to deranged harassment campaigns by opening a window into her life with social media. Look at all the harassment and hatred Melania Trump faces. I’d rather maintain a modicum of separation between my public and private life.


I don’t want to feed her vanity too much with an allowance of social media cross-promotion — Likes, hearts, followers, and “friends” are currency in our narcissistic era, especially for women who just have this voracious appetite for validation. Many e-celeb guys do this thing where they pay women to be in their lives with social media attention — I’m far from being a real e-celeb. Still, I know just how intoxicating a deluge of likes, comments, and followers can be (especially for women), and I don’t want to put my girl on that dopamine treadmill to nowhere. Constant social media validation for women is the same thing as porn addiction is for men — it makes them shallow and vapid and poisons any chance of a healthy pair-bonded relationship. I want to be loved and respected for my virtues, personality, and accomplishments - not because of the vague possibility of internet stardom that I can dangle before someone.


I want to limit the encroachment of social media into our relationship — social media makes humans weird, narcissistic, envious, shallow, unfocused, unhappy, and stupid — I do a pretty effective working memory rehab regimen to block the adverse side effects of being a social media power user. I have yet to convince my girl to habituate a similar mindfulness regimen, though, and I don’t want to use social media in a grotesque way to stimulate jealousy and envy among those who follow me. Social Media Compatibility Relationship gurus have long told us that we should, on the first or second date, ascertain the political compatibility of our potential partners. I’d urge the same when it comes to social media usage. If one person is a social media addict and the other hates social media, that sure seems like an irreconcilable difference — why waste time? Delineate your social media following If you use Facebook, create a separate friends list of people you would actually like to hear from and stay in touch with who you wouldn’t mind peeking into your personal life. Facebook gives you the option of delineating who you share what with. Sure, if the CIA is out to get you, they can probably get a hold of your most scandalous social media content anyway, but by practicing discretion using Facebook’s settings, you mitigate a lot of drama and heartache. Many people just opt to leave Facebook, but for many of us, it has become an essential tool for interfacing with the modern world; don’t flippantly broadcast your most intimate moments and feelings to everyone whose friend request you might accept. My girl and I were enjoying one of the first days of a well-earned week of vacation at the sun-drenched Black Sea seaside. Damn near everything was downright paradisiacal until ( as you do ) we got into a little argument... as you do Here’s the crux of the argument: Being on vacation, you’re inclined to take a lot of photos of yourselves looking fabulous and enjoying the colorful environs you find yourself in, and my girl was a bit upset that I wasn’t uploading more photos to social media of us looking like a cute couple as she was doing. Most of the photos I was uploading were just of me looking adventuresome and generally being museful in nature. In the past, a large marriage ceremony was the way a couple made a public declaration of love to one another; now, we do it by instantly broadcasting JPEGs around the world. Obviously, my girl wants that validation. This is my reasoning… I don’t want to drag her into the public space with me — The internet can be rude and nasty for public intellectuals who take controversial or unpopular positions as I sometimes do. I don’t want her ever to be harassed because of my opinions. The fewer photos and digital paper trails linking us, the better. Different public intellectuals I follow, like Stefan Molyneux, Joe Rogan, or Sam Harris, are careful to keep their loved ones’ images and names hard to find. Mindset guru and culture warrior extraordinaire Mike Cernovich has exposed his lovely wife to deranged harassment campaigns by opening a window into her life with social media. Look at all the harassment and hatred Melania Trump faces. I’d rather maintain a modicum of separation between my public and private life. I don’t want to feed her vanity too much with an allowance of social media cross-promotion — Likes, hearts, followers, and “friends” are currency in our narcissistic era, especially for women who just have this voracious appetite for validation. Many e-celeb guys do this thing where they pay women to be in their lives with social media attention — I’m far from being a real e-celeb. Still, I know just how intoxicating a deluge of likes, comments, and followers can be (especially for women), and I don’t want to put my girl on that dopamine treadmill to nowhere. Constant social media validation for women is the same thing as porn addiction is for men — it makes them shallow and vapid and poisons any chance of a healthy pair-bonded relationship. I want to be loved and respected for my virtues, personality, and accomplishments - not because of the vague possibility of internet stardom that I can dangle before someone. I want to limit the encroachment of social media into our relationship — social media makes humans weird, narcissistic, envious, shallow, unfocused, unhappy, and stupid — I do a pretty effective working memory rehab regimen to block the adverse side effects of being a social media power user. I have yet to convince my girl to habituate a similar mindfulness regimen, though, and I don’t want to use social media in a grotesque way to stimulate jealousy and envy among those who follow me. I don’t want to drag her into the public space with me — The internet can be rude and nasty for public intellectuals who take controversial or unpopular positions as I sometimes do. I don’t want her ever to be harassed because of my opinions. The fewer photos and digital paper trails linking us, the better. Different public intellectuals I follow, like Stefan Molyneux, Joe Rogan, or Sam Harris, are careful to keep their loved ones’ images and names hard to find. Mindset guru and culture warrior extraordinaire Mike Cernovich has exposed his lovely wife to deranged harassment campaigns by opening a window into her life with social media. Look at all the harassment and hatred Melania Trump faces. I’d rather maintain a modicum of separation between my public and private life. I don’t want to drag her into the public space with me — The internet can be rude and nasty for public intellectuals who take controversial or unpopular positions as I sometimes do. I don’t want her ever to be harassed because of my opinions. The fewer photos and digital paper trails linking us, the better. Different public intellectuals I follow, like Stefan Molyneux, Joe Rogan, or Sam Harris, are careful to keep their loved ones’ images and names hard to find. Mindset guru and culture warrior extraordinaire Mike Cernovich has exposed his lovely wife to deranged harassment campaigns by opening a window into her life with social media. Look at all the harassment and hatred Melania Trump faces. I’d rather maintain a modicum of separation between my public and private life. I don’t want to drag her into the public space with me I don’t want to feed her vanity too much with an allowance of social media cross-promotion — Likes, hearts, followers, and “friends” are currency in our narcissistic era, especially for women who just have this voracious appetite for validation. Many e-celeb guys do this thing where they pay women to be in their lives with social media attention — I’m far from being a real e-celeb. Still, I know just how intoxicating a deluge of likes, comments, and followers can be (especially for women), and I don’t want to put my girl on that dopamine treadmill to nowhere. Constant social media validation for women is the same thing as porn addiction is for men — it makes them shallow and vapid and poisons any chance of a healthy pair-bonded relationship. I want to be loved and respected for my virtues, personality, and accomplishments - not because of the vague possibility of internet stardom that I can dangle before someone. I don’t want to feed her vanity too much with an allowance of social media cross-promotion — Likes , hearts, followers, and “friends” are currency in our narcissistic era, especially for women who just have this voracious appetite for validation. Many e-celeb guys do this thing where they pay women to be in their lives with social media attention — I’m far from being a real e-celeb. Still, I know just how intoxicating a deluge of likes, comments, and followers can be (especially for women), and I don’t want to put my girl on that dopamine treadmill to nowhere . Constant social media validation for women is the same thing as porn addiction is for men — it makes them shallow and vapid and poisons any chance of a healthy pair-bonded relationship. I want to be loved and respected for my virtues, personality, and accomplishments - not because of the vague possibility of internet stardom that I can dangle before someone. I don’t want to feed her vanity too much with an allowance of social media cross-promotion Likes currency pay treadmill to nowhere I want to limit the encroachment of social media into our relationship — social media makes humans weird, narcissistic, envious, shallow, unfocused, unhappy, and stupid — I do a pretty effective working memory rehab regimen to block the adverse side effects of being a social media power user. I have yet to convince my girl to habituate a similar mindfulness regimen, though, and I don’t want to use social media in a grotesque way to stimulate jealousy and envy among those who follow me. I want to limit the encroachment of social media into our relationship — social media makes humans weird, narcissistic, envious, shallow, unfocused, unhappy, and stupid — I do a pretty effective working memory rehab regimen to block the adverse side effects of being a social media power user. I have yet to convince my girl to habituate a similar mindfulness regimen, though, and I don’t want to use social media in a grotesque way to stimulate jealousy and envy among those who follow me. I want to limit the encroachment of social media into our relationship unhappy, and stupid Social Media Compatibility Relationship gurus have long told us that we should, on the first or second date, ascertain the political compatibility of our potential partners. I’d urge the same when it comes to social media usage. If one person is a social media addict and the other hates social media, that sure seems like an irreconcilable difference — why waste time? If one person is a social media addict and the other hates social media, that sure seems like an irreconcilable difference — why waste time? why waste time? Delineate your social media following If you use Facebook, create a separate friends list of people you would actually like to hear from and stay in touch with who you wouldn’t mind peeking into your personal life. Facebook gives you the option of delineating who you share what with. Sure, if the CIA is out to get you, they can probably get a hold of your most scandalous social media content anyway, but by practicing discretion using Facebook’s settings, you mitigate a lot of drama and heartache. Many people just opt to leave Facebook, but for many of us, it has become an essential tool for interfacing with the modern world; don’t flippantly broadcast your most intimate moments and feelings to everyone whose friend request you might accept . create a separate friends list don’t flippantly broadcast your most intimate moments and feelings to everyone whose friend request you might accept

Social Media Sanity in Relationships is Possible (Even on Vacation)

TL;DR This isn’t another blog full of pie-in-the-sky theories or frameworks that make you feel like you’re getting a crash course in advanced calculus from Jackson Pollock. No, this is real talk from someone who’s been in the trenches—often clueless, occasionally brilliant. So, strap in. As of writing this, I’ve only been a “real” product manager for about a year and three months, and somehow, at 31, I’m Head of Product at a gamification platform serving Fortune 500 retail customers. And while I swear I have no idea what I’m doing most of the time, I’m also somehow looked up to as the most experienced member of the product team. Welcome to the startup life. Here’s how I survive (and sometimes even thrive) in this sadistic world of startup product management. The Myth of the Average Day Let’s start with a reality check: If you’re still searching for what an “average day” looks like in product management, just… stop. PMs tell a lot of stories—almost half of which are true—so believe me when I say, no two days are alike. I’m either deep into financial forecasting (seriously, why am I the one doing this?) or whiteboarding design ideas that probably won’t make it past launch lunch. It’s chaos, but hey, it keeps me on my toes. Action Item: Embrace the madness. If you’re waiting for a routine, you’re going to be waiting for your way into getting RIF’d. Learn to jump from task to task like you’re on an obstacle course and get comfy with being uncomfy. Communication: It’s Not Mind-Reading When I first started, I thought I was so good at communicating. Turns out, You can’t be good at communicating on day one, month one, or even year one. Every company has its own culture and nuances. It’s like assuming that just because you’re an English-speaking American from Idaho that you’re basically also a Londoner (The answer is a big fat “no” by the way, speaking from experience). Making sure all parts of the org—devs, designers, QA, and external business units—are on the same page is basically your full-time job as a PM. You have to know how your teams best absorb information and influence that into your company’s culture. Since we’re a gamification company, we communicate visually so I explain and facilitate communications visually and interactively. I practically live on Miro, where my team’s litter flows and wireframes with sticky notes and comments in real-time like a caffeinated ant colony. Action Item: Talk. Like, actually talk to your team. Use tools like Miro, but remember, you’re the one responsible for making sure everyone gets heard. Think of yourself as the ambassador to each department, minus the diplomatic immunity (brace yourself). Design, Iterate, Break It, Fix It, Repeat “The definition of insanity is doing the same thing over and over again and expecting different results” — Not Albert Einstein Design something, test it, break it, fix it, and do it all again next week. I’m constantly tinkering with designs and ideas, but here’s the thing: As a PM, it’s my job to pump the brakes when people start getting too excited. Not every idea deserves a sprint, even if it sounds like the next big thing. Action Item: Keep iterating, but don’t let your team jump off the deep end without checking if there’s water in the pool first. You’ve got to validate, or you’ll end up building a beautiful feature nobody wants. RICE: How to Cook It and Then Break It Down Look, I like the RICE priority matrix framework as much as the next PM, but let’s be real—it’s too vague sometimes. Quick Tip: When you see the word “framework,” think of it as a mound of clay in pottery class. It’s there for you to shape into something useful to your specific case. Please, please—for the love of Marty Cagan—do NOT use a vanilla PM framework without tailoring it to your product team’s nuanced needs. For example: What exactly is Impact? For my company, it makes sense to break it down into four things: strategic, objective, financial, and market demand. And when it comes to Effort? Oh, you bet I’ve got that sliced up into four things as well: dev, QA, UX, and business. Tailor RICE (or any framework) to your company. Action Item: Don’t worship at the PM framework altar. Make them work for you by getting specific. Break things down into chunks that actually reflect your team’s reality. You’re the one who has to explain this to your Founder/CEO, after all. Stakeholder Alignment: Like Herding Minotaurs in a Labyrinth Aligning stakeholders is like trying to get eight territorial bull-human hybrids to play nice in the yard without destroying the hedges—good luck. The business team wants everything done yesterday, while devs are (rightly) freaking out about timelines and burnout. I try to make the roadmap and all documents as visible as possible and involve stakeholders in Slack huddles, but everyone is busy, and not everyone will see the product as the number one priority. You just have to smile, nod, and then do whatever actually needs to be done. Action Item: Involve stakeholders early and often, but don’t let them run wild. You’re the ringmaster of this circus, so keep the roadmap from turning into a chaotic free-for-all. You might feel like you’ll get fired for saying “no” to senior stakeholders, but the alternative is getting fired for building a bloated, buggy, unusable heap of garbage (always keep your PM resume up-to-date 😉). AI: The Admin Hack You Didn’t Know You Needed Confession time: AI has saved my life. Well, okay, maybe not literally, but it’s definitely saved my sanity. I’m not building AI into my product (yet), but I am using it to make my work life a whole lot easier. From automating Jira tickets to handling bug reports, AI has freed me from hours of admin work. Quick Tip: Whatever it is you’re trying to automate, someone has already done it. Find a YouTube video, follow along, and then use ChatGPT to refine and fill in the gaps. Now, I actually have time to do product-y things, like thinking about big-picture strategy. Weird, right? Action Item: Let AI handle the boring stuff. Automate the grunt work so you can put on the black turtleneck and sound smart and inspiring in meetings (or at least pretend to). Relationships Matter More Than Any Framework Sure, frameworks are great, but guess what? People are more important. Some devs just want to code in peace, while others want to be part of the product discussion. My job is to make sure the ones who want to hide in their cave are left alone, while the ones who want to collaborate have a seat at the table. Action Item: Get to know your team. Understand their quirks, and manage them accordingly. Build trust, or be prepared to have your grand plans completely ignored. Bottom Line Product management isn’t about memorizing frameworks or pretending you’ve got it all figured out—don’t be that person. Play dumb. Play curious. Play caring. But don’t play smart(er) than anyone else. Embrace the mess, keep your team on track, and figure it out as you go. Make peace with the fact that you’ll always be a noob—I have. So, if you’ve learned anything from this, take this advice as a high-level guide, twist it, tweak it, and tailor it to your specific product situation. Because product “management” isn’t about theory—it’s about strategy and execution. And if all else fails, just let AI handle your Jira tickets and Confluence PRDs. K Bye! © James Effarah You've reached the end. TL;DR This isn’t another blog full of pie-in-the-sky theories or frameworks that make you feel like you’re getting a crash course in advanced calculus from Jackson Pollock. No, this is real talk from someone who’s been in the trenches—often clueless, occasionally brilliant. So, strap in. As of writing this, I’ve only been a “real” product manager for about a year and three months, and somehow, at 31, I’m Head of Product at a gamification platform serving Fortune 500 retail customers. And while I swear I have no idea what I’m doing most of the time, I’m also somehow looked up to as the most experienced member of the product team. swear Welcome to the startup life. Welcome to the startup life. Here’s how I survive (and sometimes even thrive) in this sadistic world of startup product management. The Myth of the Average Day The Myth of the Average Day Let’s start with a reality check: If you’re still searching for what an “average day” looks like in product management, just… stop. PMs tell a lot of stories—almost half of which are true—so believe me when I say, no two days are alike. I’m either deep into financial forecasting (seriously, why am I the one doing this?) or whiteboarding design ideas that probably won’t make it past launch lunch. whiteboarding design ideas launch It’s chaos, but hey, it keeps me on my toes. Action Item: Embrace the madness. If you’re waiting for a routine, you’re going to be waiting for your way into getting RIF’d . Learn to jump from task to task like you’re on an obstacle course and get comfy with being uncomfy. RIF’d Communication: It’s Not Mind-Reading Communication: It’s Not Mind-Reading When I first started, I thought I was so good at communicating. Turns out, You can’t be good at communicating on day one, month one, or even year one. Every company has its own culture and nuances. It’s like assuming that just because you’re an English-speaking American from Idaho that you’re basically also a Londoner (The answer is a big fat “no” by the way, speaking from experience). “no” “no” Making sure all parts of the org—devs, designers, QA, and external business units—are on the same page is basically your full-time job as a PM. You have to know how your teams best absorb information and influence that into your company’s culture. Since we’re a gamification company, we communicate visually so I explain and facilitate communications visually and interactively. I practically live on Miro , where my team’s litter flows and wireframes with sticky notes and comments in real-time like a caffeinated ant colony. Miro Action Item: Talk. Like, actually talk to your team. Use tools like Miro, but remember, you’re the one responsible for making sure everyone gets heard. Think of yourself as the ambassador to each department, minus the diplomatic immunity (brace yourself). Design, Iterate, Break It, Fix It, Repeat Design, Iterate, Break It, Fix It, Repeat “The definition of insanity is doing the same thing over and over again and expecting different results” — Not Albert Einstein Not Albert Einstein Design something, test it, break it, fix it, and do it all again next week. I’m constantly tinkering with designs and ideas, but here’s the thing: As a PM, it’s my job to pump the brakes when people start getting too excited. Not every idea deserves a sprint, even if it sounds like the next big thing. Action Item: Keep iterating, but don’t let your team jump off the deep end without checking if there’s water in the pool first. You’ve got to validate, or you’ll end up building a beautiful feature nobody wants. RICE: How to Cook It and Then Break It Down RICE: How to Cook It and Then Break It Down Look, I like the RICE priority matrix framework as much as the next PM, but let’s be real—it’s too vague sometimes. RICE priority matrix Quick Tip: When you see the word “framework,” think of it as a mound of clay in pottery class. It’s there for you to shape into something useful to your specific case. Quick Tip: Please, please—for the love of Marty Cagan —do NOT use a vanilla PM framework without tailoring it to your product team’s nuanced needs. Marty Cagan For example: What exactly is Impact ? is Impact For my company, it makes sense to break it down into four things: strategic, objective, financial, and market demand. And when it comes to Effort ? Effort Oh, you bet I’ve got that sliced up into four things as well: dev, QA, UX, and business. Tailor RICE (or any framework) to your company. Action Item: Don’t worship at the PM framework altar. Make them work for you by getting specific. Break things down into chunks that actually reflect your team’s reality. You’re the one who has to explain this to your Founder/CEO, after all. PM framework Stakeholder Alignment: Like Herding Minotaurs in a Labyrinth Stakeholder Alignment: Like Herding Minotaurs in a Labyrinth Aligning stakeholders is like trying to get eight territorial bull-human hybrids to play nice in the yard without destroying the hedges—good luck. The business team wants everything done yesterday, while devs are (rightly) freaking out about timelines and burnout. I try to make the roadmap and all documents as visible as possible and involve stakeholders in Slack huddles, but everyone is busy, and not everyone will see the product as the number one priority. You just have to smile, nod, and then do whatever actually needs to be done. Action Item: Involve stakeholders early and often, but don’t let them run wild. You’re the ringmaster of this circus, so keep the roadmap from turning into a chaotic free-for-all. You might feel like you’ll get fired for saying “no” to senior stakeholders, but the alternative is getting fired for building a bloated, buggy, unusable heap of garbage ( always keep your PM resume up-to-date 😉). always keep your PM resume up-to-date AI: The Admin Hack You Didn’t Know You Needed AI: The Admin Hack You Didn’t Know You Needed Confession time: AI has saved my life. Well, okay, maybe not literally, but it’s definitely saved my sanity. I’m not building AI into my product (yet), but I am using it to make my work life a whole lot easier. From automating Jira tickets to handling bug reports, AI has freed me from hours of admin work. automating Jira tickets Quick Tip: Whatever it is you’re trying to automate, someone has already done it. Quick Tip: Find a YouTube video, follow along, and then use ChatGPT to refine and fill in the gaps. Now, I actually have time to do product-y things, like thinking about big-picture strategy. Weird, right? Action Item: Let AI handle the boring stuff. Automate the grunt work so you can put on the black turtleneck and sound smart and inspiring in meetings (or at least pretend to). Relationships Matter More Than Any Framework Relationships Matter More Than Any Framework Sure, frameworks are great, but guess what? People are more important. Some devs just want to code in peace, while others want to be part of the product discussion. My job is to make sure the ones who want to hide in their cave are left alone, while the ones who want to collaborate have a seat at the table. Action Item: Get to know your team. Understand their quirks, and manage them accordingly. Build trust, or be prepared to have your grand plans completely ignored. Bottom Line Product management isn’t about memorizing frameworks or pretending you’ve got it all figured out—don’t be that person. Play dumb. Play curious. Play caring. But don’t play smart(er) than anyone else. Embrace the mess, keep your team on track, and figure it out as you go. Make peace with the fact that you’ll always be a noob—I have. So, if you’ve learned anything from this, take this advice as a high-level guide, twist it, tweak it, and tailor it to your specific product situation. Because product “management” isn’t about theory—it’s about strategy and execution. “management” “management” And if all else fails, just let AI handle your Jira tickets and Confluence PRDs. K Bye! © James Effarah You've reached the end.

How To Product Manage (Startup Edition) 😈 7 Steps To Sanity

Writing code is a skill that anyone can acquire, but attaining the highest standards of clean code requires discipline and dedication. In this article, we will explore practical strategies and tools to help you elevate your Python code to impeccable levels. By gradually incorporating these best practices into your development lifecycle, you can ensure clean, bug-free code that stands the test of time. Adhering to best practices not only maintains code cleanliness but also minimizes the risk of introducing bugs. While it may require an initial investment of time, following these practices ultimately reduces development effort in the long run. As a seasoned full-stack software engineer, I have consistently received accolades for upholding coding standards in the companies I have worked with. To illustrate these best practices, we’ll consider a hypothetical project called . This project consists of a single-page website scraper that extracts questions and answers from (hypothetical) Stack Overflow. Please note that Stack-Scraper is not a functional project but serves as an example to demonstrate the ideas discussed here. The source code for this example can be found on . Stack-Scraper GitHub I personally use as my go-to , and so some of the tools and plugins mentioned here are for the same. Let’s dive into the best practices and tools I employ to ensure my Python code adheres to the highest standards. VS Code IDE Repository Structure A thoughtfully designed repository structure serves as the foundation for clean code development. If the structure fails to meet the project’s requirements, developers may scatter code across different locations, resulting in a messy structure and decreased code re-usability. A carefully crafted repository structure plays a vital role in maintaining code organization and facilitating collaboration among developers. It’s important to note that there’s no one-size-fits-all solution for repository structure. Each project may have unique requirements that warrant a specific organization scheme. However, examining a practical example can provide valuable insights. Let’s consider the repository structure of the Stack-Scraper project. Here are some key points to note: The Stack-Scraper repository employs clearly demarcated folders for different components, such as APIs ( ) database models ( ), domain-level constants ( ), pydantic models ( ), and scrapers ( ) etc.. This segregation ensures a logical separation of code, enabling developers to locate and modify specific functionalities easily. src/apis src/db_wrappers src/constants src/domain_models src/external_sources/scrappers The test files in the Stack-Scraper repository follow the same hierarchy as the main repository. This practice ensures that tests remain organized and aligned with the corresponding code. Consistent test organization simplifies test management and improves code testability. Pre-commit pre-commit is a framework that enables the execution of configurable checks or tasks on code changes prior to committing, providing a way to enforce code quality, formatting, and other project-specific requirements, thereby reducing potential issues and maintaining code consistency. All you need to do is create a file in your repository. You can install pre-commit by running the following commands. pre-commit-config.yaml pip install pre-commit
pre-commit install Let’s examine the of Stack-Scraper. pre-commit-config.yaml repos:
  - repo: https://github.com/ambv/black
    rev: 23.3.0
    hooks:
      - id: black
        args: [--config=./pyproject.toml]
        language_version: python3.11

  - repo: https://github.com/pycqa/flake8
    rev: 6.0.0
    hooks:
      - id: flake8
        args: [--config=./tox.ini]
        language_version: python3.11

  - repo: https://github.com/pycqa/isort
    rev: 5.12.0
    hooks:
      - id: isort
        args: ["--profile", "black", "--filter-files"]
        language_version: python3.11

  - repo: https://github.com/pre-commit/pre-commit-hooks
    rev: v4.4.0
    hooks:
      - id: requirements-txt-fixer
        language_version: python3.11
      - id: debug-statements
      - id: detect-aws-credentials
      - id: detect-private-key Here, we have configured 7 hooks. You can add more hooks if you need but the above setup is more than enough to help you keep your code clean. Type-hints Python’s dynamic typing allows variables to be assigned without explicit type definitions, which can lead to convenience. However, this flexibility can pose challenges in maintaining code quality, especially in larger projects where type errors and inconsistencies may occur. Consider the following example from the file: in Stack-Scraper. Can you identify if is an integer or a string? src/apis/question_no.py ques_no @stackoverflow_blueprint.route("/stackoverflow/<ques_no>", methods=["GET"])
def get_question_answer(ques_no):
    # code to do stuff Check out the same example now with type-hints. It clearly highlights that is expected to be an integer and returns a object. ques_no get_question_answer Response @stackoverflow_blueprint.route("/stackoverflow/<ques_no>", methods=["GET"])
def get_question_answer(ques_no: int) -> Response:
    # code to do stuff Doc-strings Doc-strings are documentation strings added for each function to improve code readability. They provide additional information about the function’s purpose, parameters, and return values, making it easier for developers to understand and utilize the code effectively. You can also use doc-strings to generate automated documentation for your code using a library like pdoc. Consider the following example from Stack-Scraper and the corresponding documentation generated using the pdoc library. SonarLint SonarLint is a code analysis tool that integrates with various IDEs (as a free plugin) and helps identify and fix code quality issues, security vulnerabilities, and bugs during the development process, enabling developers to write cleaner and more reliable code. This has been a must-install plugin for me for years now. Pydantic Pydantic is a Python library that provides runtime type checking and validation for data models. We don’t aim to make Python behave as C/C++ but there are certain use cases where it’s paramount to enforce type-checking. Examples: API inputs, methods in database wrapper to provide consistent in and out of data from database, etc. Stack-Scraper demonstrates an implementation for the same. By leveraging the Pydantic model, as the output of the method within the class, we establish a reliable means of retrieving questions from the database based on their unique identifiers. This design choice ensures that future changes to the database, including modifications to its schema, will not disrupt the application’s functionality as long as the method’s output adheres to the consistent model defined by pydantic. StackOverflowQuestionAnswer get_question_answer_by_ques_no InMemoryDatabaseWrapper Another demonstration is validating the inputs to the method in the same class as above to ensure that only allowed values go into the database. upsert_question_answer Spell Checker While it may initially appear counterintuitive, incorporating a spell checker into your code is a valuable practice that aligns with the other advice provided. The inclusion of a spell checker ensures code quality and readability, reinforcing the importance of attention to detail in maintaining clean and error-free code. Firstly, it will help to avoid naming methods like due to their unintuitive spelling, as it can lead to errors and confusion during usage. Notice the spelling mistake in upsert_qusetion_answer qusetion. Secondly, if you utilize an automatic documentation generator, it becomes essential to minimize spelling mistakes. Maintaining accurate and error-free documentation not only improves code understandability but also enhances the overall professionalism and credibility of the project. Tests Comprehensive testing is crucial for maintaining error-free and robust code, ensuring its adaptability to future changes and different developers. While aiming for 100% coverage is desirable, the focus should be on thoroughly testing the code rather than just the coverage number. When writing test cases, it is important to consider all possible scenarios and edge cases that the code might encounter. This includes positive and negative testing, boundary testing, and error handling. An example test case for the function in the file can provide insights into designing effective test cases. get_question_answer test/src/apis/test_question_no.py That’s all for this article on maintaining clean code practices and enhancing code quality. I hope you found the insights and strategies shared here valuable. Remember, implementing these best practices and incorporating them into your development habits one step at a time can make a significant difference in your code’s reliability and maintainability. By prioritizing code cleanliness and adhering to these practices, you’ll witness your code soar to new heights. Enjoy the journey of writing impeccable code and reap the rewards of robust, error-free software development. Happy coding! Additional Tips Here I am listing a few more generic tips/comments that you can incorporate into your coding habits. Add comments wherever warranted in your code. If you make an assumption in the code, it’s better to highlight the same in the comments. Example: Line in file . 78 src/external_sources/scrappers/stack_overflow.py Try not to define constants inside functions/classes because, over time, you could end up having a bunch of these constants scattered across the code. Either define them in their respective constants file or in the respective module. Example: . src/constants/api_constants.py Define your own Exceptions rather than using the generic one. This helps in differentiating exceptions in code to respective segregation. Example: in file represents exception raised by the Stack Overflow Scrapper. StackOverflowException src/external_sources/scrappers/stack_overflow.py Follow for coding. Example: Inheritance by defining base class in file . OOPs ExternalSource src/external_sources/external_source_base.py Follow REST principles for API development. Do not add secrets to your repository. Instead, use an environment file or a Secrets Management Service like AWS Secrets Manager. Make your code environment agnostic. So, that it’s easy to maintain separate development, testing, staging and/or production environments. Example: . src/config.py Peg versions of the libraries that you install in file. It helps in avoiding application failure because of breaking upgrades to libraries. requirements.txt Also published here.

Stories, News & Mentions about SANITY

Categories

Trending Topics

Stories, News & Mentions about SANITY

Sanity’s Stories on HackerNoon

Categories

Trending Topics