DEV Community: Ankita Kulkarni

Mistakes you should avoid as a Senior Engineer

Ankita Kulkarni — Wed, 22 Mar 2023 16:59:20 +0000

Congrats, you have successfully transitioned from a Senior Developer to a Engineering Leader. But you have got to watch out for a few mistakes that every Senior Developer makes.

As a newer engineering leader or manager, it can take time to judge what success should look like and what things you can avoid.

Becoming a new engineering manager is an exciting and challenging step in any engineer’s career.

However, with great power comes great responsibility, and the stakes are high.

As a new engineering manager, there are countless ways to succeed, but unfortunately, there are also plenty of ways to fail. This blog post will discuss some of the most common ways to fail as a new engineering manager and how to avoid them.

Let’s review a few mistakes that newer engineering leaders make,

Don’t promote themselves 🪜

promotion

It’s essential to promote yourself first mentally and start taking on the responsibilities of this new role.

If you continue to act like an IC, you will burn yourself out and won’t deliver results.

You got this job because you deserved it, but it’s important to keep learning to get better at this new job.

Don’t delegate 👉

This is a common mistake 😅.

It would be best to delegate as much as possible, as you will only have time to complete some tasks. You can take on the easy tasks and let your team handle the rest. Delegating is important and should not be skipped.

Do you have all the time in the world to do the job of a manager and maker? then you should assess again as I’m sorry to say but you won’t.

Your job is to enable others and get the tasks done through them.

Will push code like an IC (Individual Contributor) 👩🏽‍💻

You probably were very good at being an IC, hence why you got promoted. You knew what it takes to be a good IC, but now, as a leader, your priorities and focus should shift.

You won’t be able to ship code like an IC, but that is not to say you shouldn’t. You can assess your priorities and allocate time accordingly ⏲.

Wait to give feedback until performance reviews 👀

Feedback should be given frequently. Your job is to make your team the best it can be. Feedback will allow you to do this. Don’t wait until performance reviews for this.

Nothing should come off as a surprise during performance reviews.

Don’t set clear expectations

One of the most common mistakes new engineering managers make is failing to set clear expectations. It’s easy to assume that everyone knows what is expected of them, but this is rarely true.

As an engineering manager, you must clearly and regularly communicate your expectations. This includes everything from project deadlines to team goals to individual performance expectations.

Without clear expectations, your team will struggle to meet your standards, leaving you frustrated and disappointed.

Don’t partner with Product, Design, or Data Science 🤝

Identify who you should collaborate with and partner with them to make the decisions. Your expertise is in one area, and working closely with your squad will allow you to make the best decisions for your team and product.

Leadership is a never-ending journey 🚗

Leaders create more leaders

One day you will think you know everything, but you may feel the opposite the next, so don’t be too hard on yourself and keep learning. Lean on your friends and family, and take care of yourself 💖.

Remember, being a successful engineering manager is not just about technical skills; it’s also about leadership , communication, and emotional intelligence. Good luck on your journey! 💛

If you plan to use any of these techniques or have more to share, please comment below and would love to know your thoughts! 💬

FREE Engineering Manager’s Mind Map ✨

Download a FREE Visual representation for Navigating the Engineering Manager’s Mind

‣ Covers key areas, concepts, and tasks that an Engineering manager needs to be aware of

‣ Gives you a solid foundation to start building your intuition.

If you are interested in a FREE mind map, you can get it for free here

6 Common Mistakes New Engineering Leaders make

Ankita Kulkarni — Tue, 07 Mar 2023 05:18:18 +0000

As a newer engineering leader or manager, it can take time to judge what success should look like and what things you can avoid. Let's review a few mistakes that newer engineering leaders make,

Don't promote themselves 🪜

It's essential to promote yourself first mentally and start taking on the responsibilities of this new role. If you continue to act like an IC, you will burn yourself out and won't deliver results. You got this job because you deserved it, but it's important to keep learning to get better at this new job.

Don't delegate 👉

This is a common mistake. It would be best to delegate as much as possible, as you will only have time to complete some tasks. You can take on the easy tasks and let your team handle the rest. Delegating is important and should not be skipped.

Will push code like an IC (Individual Contributor) 👩🏽‍💻

You probably were very good at being an IC, hence why you got promoted. You knew what it takes to be a good IC, but now, as a leader, your priorities and focus should shift. You won't be able to ship code like an IC, but that is not to say you shouldn't. You can assess your priorities and allocate time accordingly.

Wait to give feedback until performance reviews 👀

Feedback should be given frequently. Your job is to make your team the best it can be. Feedback will allow you to do this. Don't wait until performance reviews for this.

Nothing should come off as a surprise during performance reviews.

Don't partner with Product, Design, or Data Science 🤝

Leadership is a never-ending journey 🚗

One day you will think you know everything, but you may feel the opposite the next, so don't be too hard on yourself and keep learning. Lean on your friends and family, and take care of yourself 💖.

If you plan to use any of these techniques or have more to share, please comment below and would love to know your thoughts! 💬

FREE Engineering Manager's Mind Map ✨

Download a FREE Visual representation for Navigating the Engineering Manager's Mind

‣ Covers key areas, concepts, and tasks that an Engineering manager needs to be aware of
‣ Gives you a solid foundation to start building your intuition.

If you are interested in a FREE mindmap, you can get it for free here

Learn React Server Components in 7 easy to follow steps

Ankita Kulkarni — Thu, 02 Mar 2023 15:51:56 +0000

Learn React Server Components step-by-step

I've created a FREE course on teaching you everything you need to know about React Server components in 7 easy to follow steps visually. If you are interested, sign up here:

React Server Components Course

We'll build an app and cover concepts such as,

What are Server and Client Components
How they are different from each other
The difference between Server-side Rendering and Server Components
How to create shared components?
How to pass data from one component to the other?
Advanced: Best Practices
and more...

You'll build an app from scratch + take quizzes along the way so you can test your knowledge 🚀

If you are interested, check it out!

Create a culture of Psychological Safety in Engineering

Ankita Kulkarni — Tue, 01 Nov 2022 17:17:39 +0000

Have you ever felt psychologically unsafe at work? I hope you say no, but I know I might be wrong here.

But first, let's understand what Psychological safety is and learn some strategies to build Psychological safety in your team and organization.

What is Psychological safety? 🤔

It is a belief that people are allowed to make mistakes, and it's okay to make them, and they won't be punished for it.

What is not Psychological safety? 🪴

Here are a few signs when teams are not feeling safe:

When teams disagree a lot without hearing each other's opinions
When decisions are being made in secret
When teams are hesitant to share their ideas and are protecting it
When teams can't laugh together or have fun in meetings or while working together

Storytime: 📙

When I was starting as an entry-level developer, my manager asked me only to ask good questions, not bad ones. Before that, I believed every question was good as it showcases where you lack understanding and how we can bridge it. But that wasn't the case here.

Throughout my work term, I held off from asking questions as I didn't know what a good question meant to him. It made the next month or so very unsafe for me. I would spend hours contemplating whether it was a good question, which was unhealthy for me and the org.

I always look back to this incident as it shaped me into the leader I am today.

I encourage others to ask questions and think every question is good. If folks ask something they weren't sure of, I know it would save them minutes or hours of work trying to find the answer to that question. But, on the other hand, this would make them less productive.

In addition, instead of giving them direct answers, I ask them questions to help them think, creating a good learning environment.

Characteristics of a Psychologically-safe team 💜

A Psychologically safe team would empower others and build great products.

Here are some signs your team is not feeling safe:

They don't speak up and aren't allowed to make mistakes
They get defensive when you make a statement or ask questions

Psychological safety in practice 👇

Discussing this topic with examples and how it would work in practice is easier. Let's take a look,

Here is an ideal team:

You don't feel afraid to make mistakes
You feel comfortable taking risks and picking up complex tasks
Your opinions are accounted for, and you feel a valued member of the team
You are appreciated for being your authentic self
You think your ideas are appreciated, and you are given credit
You have fun and aren't afraid to share your ideas

Always keep this checklist ✅ in your mind and review it consistently if this is how you feel.

Ask Questions and get curious ❓

We need to ask questions instead of making statements. Get curious about what's going on without jumping to conclusions. When you ask questions to your team, you should bring everyone in, and they will start feeling comfortable participating in the discussion.

You can pick someone, ask them their thoughts, and add a disclaimer that you want folks to share, and it won't bother you if their opinion differs from yours. This will help folks get involved and share their thoughts.

Create open space for making mistakes 👐

The best way to make it okay for anyone to make mistakes is when you admit you also make mistakes or, better, when you do make mistakes make it a learning experience and share what you can do.

May you have heard of a post-mortem? Create a learning experience post-mortem where you share what happened, what you did to fix it, and what you can do next. Again, don't mention names but involve the entire team in the meeting. The goal with documentation is not to call out people but figure out what you can do next as a team.

When something like this happens, it's clear there is a gap in our processes, and we can from it, so let's focus on learning ✍️. We don't point fingers as part of our culture.

For example, a person on one of my teams was on-call and wasn't receiving any pages. However, they had been on-call before, where they got paged successfully. So, what could go wrong, right? Since they never got paged, their manager (reporting to me) got paged. Luckily, he got on-call and resolved it. Hence having primary and secondary on-call shifts help a ton.

Post-mortem learning hour 🕰

I asked their engineering lead (reporting to me) to book a post-mortem learning hour, and we only discussed how to make sure team members were well set up, what the problem was if the alert was too sensitive, how we fixed it and documented it all.

Allow room to present ideas without facing the fear of being rejected or failure 💡

Does your team(s) feel open to sharing ideas with you or in any of the meetings? What does their behaviour tell you? When you kick off a meeting, ask discussion-provoking questions. Your job after the questions is to sit back and relax and let the team chime in. They should feel open about sharing their ideas.

Commend good ideas but also not-so-good ideas. Don't shut it down 🙅🏽‍♀️ even if the idea isn't good. Instead, listen and ask questions to dig deeper into areas.

Ask their opinion before presenting yours 🎁

If it's okay with your team, you can ask specific folks for more context and their opinion. For example, ask someone entry-level or new to your team or work on their confidence to speak up more. Regardless, ask your team for their opinions.

If someone I know holds an opinion but isn't sharing it, it might be a good idea to invite them into the conversation. You need to read the room, but doing this will also help encourage others to share without fear.

Avoid passive-aggressive comments 💬

Whether you know it or not, your Psychological safety skill is to test when shit hits the fan. You have time to think when things are good, but when they are not, you don't. This is when you need to be careful and avoid any passive-aggressive comments. Emotions would run high during this time, not just for you but for your entire team, so make sure to keep your emotions in check. ✔️

I tend to write down how I'm feeling and journal my thoughts 📓, so when I presented myself in front of the team or others in the org, I was calm and collected. It doesn't need to be a fancy bullet journal but could be as simple as

I'm not feeling good right now. I committed to this timeline, and it's time to discuss this with others.

'I don't know' is a complete sentence ✅

'I don't know' are a powerful set of words. You can share what you don't know when you don't know something. The senior you get, you won't know all the details in your team, so get comfortable in saying, 'i don't know. You can say,

I believe it's <>, but I don't know at this moment <the thing>, but I'll get back to you towards the end of the day.

Only commit to a timeline if you can get back to me, but communication is critical here.

If you don't know something, admit it 🙌. We all have been there where we don't have the full context of the scenario or are leading through others, so it's normal not to know it all.

Be kind and transparent 💕

We need to be kind to everyone around us as these are our co-workers, and we care about them. But they are humans, and their feelings can get hurt.

Be transparent about what's happening so your team or stakeholders know the situation. But on the other hand, you can shield the team by being transparent and only sharing what they need to know. I know it's a tricky balance, but with practice, you will get there, I promise.

✔️ For example,

Going through headcount reduction was one of the most challenging things I went through. My teams could see that we stopped hiring and are not interviewing anymore, so nothing is hidden about this.

What would you do in this case? How would you handle it? If you share, everything is fine, and do not worry about it. You are giving them more reasons to worry.

Here is what I did instead, which I found was received well,

`
We are shifting our focus internally and are pausing hiring temporarily to ensure we are sustaining the growth of the org. We have grown a lot, and it's time to pause and reflect.

Do you all have any ideas for how we can focus on our internal growth? are there any improvements we can make? You are shifting their perspective to what's important but also sharing what's going on. Transparency builds trust, which builds Psychological safety.
`

This allowed them to chime in, share their thoughts and have a forward-thinking approach. I wrote more on how to lead during uncertain times here you can check it out here.

Foster a culture of collaboration and curiosity during code reviews 👩🏽‍💻

Code reviews add to the stress of an engineer's day to day 👩🏽‍💻. Think about it, when you write code, you want to make sure you can ask questions to your team and share your ideas on architecture decisions, refactoring significant changes etc.

It will be stressful for engineers 😅 if they don't feel like they can make mistakes. So be mindful of your tone and over-communicate your thoughts on approaching this.

In addition, I wrote a blog post on The Art of Humanizing Code Reviews so check that out to learn more.

Provide feedback in a constructive way 💪

Feedback as a leader or developer is your #1 asset to any team or organization you join. If you can give constructively, your team will grow, but if you don't, it will create fear and uncertainty. You want your engineers to grow, and effective feedback is key to their growth.

This helps a ton with building psychological safety, as the engineers on the team will feel good working on their growth with feedback. 💯

Remote teams: Run inclusive meetings 🚀

Make sure everyone knows the meeting agenda beforehand. Often, it's all about learning how to run meetings, who should be involved, what they should know beforehand and if they are required to be active.

Let them know if they will be presenting or if questions will be asked to them, set expectations, ask if they feel comfortable sharing, and be inclusive first.

Don't exclude people unless they know why. Always make it known that anyone can join any meetings they like, but you are doing your best to protect their time, so if you miss someone, as after all, you are a human. Just apologize and course correct.

✔️ Meet them after the meeting, share context and ask for their thoughts and bring them in moving forward.

Lead by example 🧐

Believe it or not, you are dictating behaviours as a lead. For example, if you take an hour-long break at the park, your team will also think it's okay to do the same. So, learn to walk the talk. Model behaviour that you would like others to follow.

If you want to take a break for mental-health reasons, do it 🚶🏽‍♀️ and let the team know if you are comfortable. They will also think it's okay to do so.

Set vision and direction for your team 👁

Nothing is more frustrating than heading in a direction where we don't know where we are going. You need to know your organization's vision and need to set the vision for your team. This also helps build Psychological safety as your team knows you got this 💪 and they will follow you where you go.

Without this, it's hard to know, and there is uncertainty which creates chaos and slowly, individuals will lack focus and drive to deliver.

Resources 🔗

Here are a few resources to check out:

Great questions to ask that are open-ended for creating an inclusive culture

That's a wrap. What would you like to add to this? How are you creating a culture of psychological safety in your team and org? Comment below 💬

Frontend Snacks 🍿

↪️ Sign me up

A Frontend Newsletter you'll love & get FREE weekly Snacks!

🎨 A code snippet to teach complex topics visually
✨ Latest Frontend gossip/news
🧡 A snack for thought

All this to help you grow as a developer!

Deep dive on SEO with Next.js Head

Ankita Kulkarni — Wed, 07 Sep 2022 14:34:14 +0000

In this blog post, we will cover what SEO is, what are some of the best practices with SEO, provide you with real world SEO code examples in Next.js, screenshots of how your site will look like in a popular search engine like Google and you will take away some SEO tools with you towards the end of this article.

A lot of these techniques can be applied in react apps or for SEO in general but the examples here would be more focused on Next.js. 🚀

What is SEO? 🤠

SEO is search engine optimization. Just like you and I are communicating in English, SEO using HTML is a language used between a bot and your site 💜. The techniques used in SEO lets the bot know what your site consists of.

It is our responsibility to make it as easy as possible for the bot to read our content.

I recently revamped my entire site: https://kulkarniankita.com/ so we will be using that as an example.

Before we dive in, let's first understand how Mr. Bot works first,

Who is Mr.Bot? 🤖

We will be calling the bot that crawls our sites and search engines use Mr.bot throughout this post.

Mr.Bot performs 3 operations 🥉:

Crawling 🐊
it will discover pages and try to find them. If a website has referenced a URL to a blog post i.e. linking, then that is one way of discovering it. If your home page links to other internal pages, that is another way of crawling all the pages on your website.
Indexing 🔎
Once discovered, Mr.bot will try to understand what's on the page and this is why we need to speak the same language that the browser understands. We will talk about those techniques in a bit.
Ranking 🥇
Finally, it now has a handful of discovered pages and tried to understand what's on them. Now, it ranks and stores those based on that in a database. This ranking also varies based on your location, language, device etc.

When we try to search 🔎 for a term on a search engine like Google, it will look into the database where Mr. Bot 🤖 has stored all the pages and return the ones that are ranked higher. Mr. Bot does do a lot more but the above is a simplified version.

Now that we understand a bit more about, let's review some of the techniques we can implement to rank higher on Google:

Meta tags

The above is the title and description of my page kulkarniankita.com/newsletter. You might be wondering how I show up on Google on the first page on top.🤔

Well, I hope I get this popular in the future 🥰 but for now, I’m using a tool called SEO minion 🔗 that shows you how your site or a page will look like on Google. You can use this to test and make sure everything is okay.💯

📣 Call to Action: One thing I need to work on is reducing my description length as you can see the ellipsis which makes it difficult for my reader to know everything I have to say. The optimal length is between 50 to 160 characters and mine is 177 characters which is no beuno.

Next.js provides a component 🔗 that you can add to every page so the details of every page can be easily tweaked. This makes applying these SEO techniques a lot easier. 🙌 Here is an Example code 👩‍💻:

//pages/newsletter.js
import Head from 'next/head';

const Newsletter = () => {
  return (
    <>
      <Head>
        <title>This is Ankita Kulkarni's newsletter</title>
          <meta charSet="utf-8" />
          <meta name="description" content={"A newsletter related to front-end development, leadership, career development, my journey into content creation, and lots more behind the scenes that I don't share anywhere else"} />
      </Head>
            <div>rest of the content...</div>
    </>
  );
}

export default Newsletter;

Socials: Facebook and Twitter 🐧

When we share a link to a post like a newsletter, for example, https://kulkarniankita.com/newsletter once that’s shared on social media like Twitter or Facebook, here is what we see:

Notice how the title is a newsletter, it has a description of what this page is all about and also has an image. This is a good example of how meta tags for socials work. They do have a name and are known as Open Graph tags.📉

What is Open Graph?**

Open Graph 🔗 is a protocol that enables web pages to become a right fit for social media. Notice the name “graph” in its name. That’s because it creates a graph object of your metadata. Its goal is to provide simplicity for developers and one protocol for all social media.✨

Here is an example for those og meta tags 👩‍💻:


<meta property="og:title" content={'Newsletter'} />
<meta property="og:type" content="website" />
<meta property="og:description" content={"A newsletter related to front-end development, leadership, career development, my journey into content creation, and lots more behind the scenes that I don't share anywhere else"} />
<meta property="og:image" content={'/images/ogImage.png'} /> // for example: https://kulkarniankita.com/images/newsletter.png

<meta property="og:image:alt" content={ogImageAlt} />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="627" />

<meta property="og:url" content={ogUrl} />

There are 2 tools you can use to test your site for SEO:

They will give you a visual of what your crawled website looks like on social.

The other tags shown in the example are a bit more obvious as the title refers to the title of the page, the description refers to the description, image is the image of the page when your site page is shared. But what are canonical URLs?

Canonical URLs ♾

They are permanent IDs in the graph that we talked about earlier.

How you can represent a canonical URL:

<link rel="canonical" href={PROD_URL + canonicalUrl} />

og:url is how canonical URLs are represented for socials and rel="canonical" is how your individual pages are treated as canonical pages. As Mr. Bot reviews these meta tags, canonical URL's become the id in the graph which are sort of permanent.

They should represent your page in a human-readable way. The name id might confuse you as you might assume that it needs to be some auto-generated id like asdswpp but instead, it’s the opposite ╳, it should indicate what kind of content is in that URL 🔗 when a user navigates to it.

For example 👇,

good canonical URL ✅:

https://kulkarniankita.com/next.js/lets-get-data-rich-with-nextjs-visualization

bad Canonical URL ❌:

https://kulkarniankita.com/next.js/l

Behind the scenes, your blog posts or products might use a URL like this:

/products/lip-gloss?variant=123 ❌

but you should format it and set the canonical URL as:

/products/lip-gloss/pink ✅

Shopify wrote a great article which further elaborates canonical URLs, check it out here.

SEO React Component 🍱

Imagine you have a site that has a list of blog posts, newsletter, about-me image and more, you will be copy pasting more or less similar tags with variations in title, description, image etc. on every page. Now, this is not clean code and you might miss some important tags that would have a huge impact on SEO.😮

Instead, I would recommend creating a React component. For example, I have a component called SEO. This component accepts props such as title, description, og tags names, and more. I also provide default values too just in case I forget to provide those. This helps me stay organized and the existence of SEO component assures me and puts me at ease that I'm consistently taking care of SEO.😌

Here is an example 👩‍💻:

import Head from 'next/head';

const SEO = ({ title, description = '', canonicalUrl, ogImage, ogDescription, ogTitle, ogUrl }) => {

const metaDesc = 'Articles for developers and leaders focused on Next.js, GraphQL, leadership and more;

<Head>
      <title>{title}</title>
      <meta charSet="utf-8" />
      <meta name="description" content={description || metaDesc} />

            <meta property="og:title" content={'Newsletter'} />
            <meta property="og:type" content="website" />
            <meta property="og:description" content={ogDescription || description} />
            <meta property="og:image" content={'/images/ogImage.png'} /> // for example: https://kulkarniankita.com/images/newsletter.png

            <meta property="og:image:alt" content={'image for page featured with title'} />
            <meta property="og:image:width" content="1280" />
            <meta property="og:image:height" content="675" />

            <meta property="og:url" content={ogUrl || canonicalUrl} />
  <Head>
}

export default SEO;

You can customize the above SEO component based on your needs but the above code will give you a rough idea. It also helps you avoid any mistakes. I promise you I have caught many SEO mistakes because of this. 🤠

What are Sitemaps? 📍

A sitemap is an XML or a text file where you can provide information about all the pages and files in your web app. Mr. Bot 🤖 will look for this file and read it while crawling the site. You can tell which pages are important ✅ and which ones should not be crawled. ❌

You might need a sitemap if your site is large but might not if it’s small. You can read more here 🔗 although I would recommend creating it as we are trying to make our communication with Mr. Bot as smooth as possible.

The important piece I implemented on my website was to only include canonical URLs that I preferred to be indexed by Mr. Bot 🤖 i.e. if your site has 2 ways of reaching the same content, add the URL you want people to discover to your sitemap. You can read more on how to build one here for specifics. Although here is how I built it in Next.js.

If your site only has non-dynamic content i.e. no blog but only a few static pages, you can create a very simple sitemap that looks like this: 👩‍💻

const PROD_URL = 'https://www.kulkarniankita.com';

const generateSitemap = `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
            <url>
          <loc>${`${PROD_URL}/aboutme`}</loc>
      </url>
            <url>
          <loc>${`${PROD_URL}/newsletter`}</loc>
      </url>
        </urlset>
`;

But the chances are that your site does contain dynamic pages therefore the above sitemap needs to be created dynamically for example, if you have a list of blog posts like I do. For that, I would recommend creating a page in Next.js that returns XML data. You can do that by creating a file called sitemap.xml.js inside the pages directory.👩‍💻

sitemap.xml.js


const PROD_URL = 'https://www.kulkarniankita.com';

const generateSitemap = (posts) => `<?xml version="1.0" encoding="UTF-8"?>
    <urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">
        ${posts
          .map((slug) => {
            return `
                <url>
                    <loc>${`${PROD_URL}/${slug}`}</loc>
                </url>
            `;
          })
          .join('')}
    </urlset>
`;

function Sitemap() {}

Sitemap.getInitialProps = async (ctx) => {
  const { res } = ctx;
  const allPosts = getBlogPostsData();
  const staticPages = ['', 'about', 'blog', 'courses', 'conferences', 'about'];

    const allPages = [
      ...allPosts.map(({ categorySlug, slug }) => `${categorySlug}/${slug}`),
      ...staticPages,
    ];

    res.setHeader('Content-Type', 'text/xml');
    res.write(generateSitemap(allPages));
    res.end();
}

export default Sitemap;

Why getInitialProps? 🤔

getInitialProps is great for SEO 💯 as it will send the data before the page gets rendered from the server.

Notice how we are setting the header as text/xml and writing XML as a response. This is because we don’t want anything else but XML to get dynamically rendered since the format of our sitemap is going to be XML.

Here is a condensed version of sitemap looks like: 👇

robots.txt 🦾

Mr. Bot uses robots.txt to figure out where your sitemap is located so we need to generate robots.txt as well. Here is how robots.txt will look like:

User-agent: *
Allow: /
Disallow: /nogooglebot/
Sitemap: https://www.kulkarniankita.com/<location-of-sitemap.xml>
Host: https://www.kulkarniankita.com

You can disallow specific pages to be indexed by Disallow property whereas Allow indicates that all other user agents are allowed to crawl the entire site.

The site's sitemap file is located at the URL specified in Sitemap property.

Static Generation in Next.js

By default, in Next.js all your content will be pre-rendered i.e all the HTML content will be available in advance vs having it all done on client-side JavaScript. This proves to be great for SEO as when Mr. Bot 🤖 is looking to crawl your data and review HTML, it will find all the text of that site. This is a huge advantage of using Next.js.

That's a wrap, hope this post was useful. 🙌 There is a lot more to SEO for which I'll create a part 2 of this article as I build my blog further.

If you would like to learn more about Next.js, I have a course on 2 platforms: Udemy and Zero to Mastery.

Intersection of Frontend and Leadership 💌:

If you found this article helpful, you will like my newsletter 💌! I write a weekly newsletter on content related to front-end development, leadership, career development, my journey into content creation, and lots more behind the scenes that I don’t share anywhere else. If you would like to know more or would like to subscribe, visit the link below: https://kulkarniankita.com/newsletter

Data Fetching Techniques in Next.js with Visuals ✨

Ankita Kulkarni — Mon, 08 Aug 2022 16:34:01 +0000

Next.js is a popular JS framework and is incredibly powerful. It is one of my favourite frameworks as it does a great job of making its APIs simple and easy to understand. It has become the production framework for React and rightly so.

We often tend to visualize things 🔮 and concepts to understand them better. If you want to master Next.js, it provides many techniques to fetch data in a manner that is right for your use case. You need to know how and when to fetch it, that’s all. 🌸

There are many powerful 💪 ways to fetch data. Here are a few of them:

Now that we know what they are called, let’s review how you can fetch data in Next.js in the form of visuals:

Static-site Generation (SSG) 💯

SSG is great for static sites. If you have a lot of static content on your site, SSG is the right fit. 💯

Without API calls i.e. No external data: 🙅‍♀️

It is pre-rendered by default since the data is available to us statically. We are not invoking any APIs here so Next.js will store it at build time. For example, the About page, static navigation data, headers, etc.

With API calls i.e. external data 👌

SSG pre-generates i.e. downloads all the static content at build time before you deploy your site and then serves it directly which means it won’t make live API calls for every user but instead fetch from the build. The same HTML will be used for every request, making it lightning fast⚡️.

Whenever you can, use SSG as it will help a lot with performance.

Incremental Static Regeneration (ISR) ⚡️

This method is one of my favourite 💜 way of fetching data. It gives you the best of both worlds — SSG + SSR. You can opt-in to re-generate a specific page or pages at a specific interval. Let's say you set the interval to be 60 seconds ⏰and the first user that visits gets stale data but the user after will get fresh data. 🏄‍♀️

For example, let's say you run a coffee ☕️ store and one of your products gets popular. Now you want to get the latest data about that store but that data won’t get updated every minute. With ISR, you can say I want that store with store id 456232 to get re-generated every 5 minutes 🕰. This way you still reap 👆the benefits of pre-generating the data at build time but also take advantage of fresh data.

Example: Old Twitter tweets, not many users will visit old tweets so it is okay for old tweets to have stale data although, with ISR, you can get fresh data for the following request. 🙂

Server-side Rendering (SSR) 🪴

In SSR, HTML is generated for every request on the server. You want to use SSR for a news feed where we always want the latest most relevant news but also want to pre-render data as that is good for SEO. 🤖

SSR only runs on the server and not on the browser. 🤠

Client-side Rendering (CSR) 👩‍💻

This is the traditional way of rendering content to the client 👌. With CSR, we don’t need to pre-render data and instead fetch data at runtime in a useEffect. The browser is responsible for rendering content to the client. This can impact performance as the data is not cached. 😰

I hope you found this post useful 🙌. If you did, comment 💬 on how you are planning to use Next.js or are using it already. If you would like to learn more about Next.js, I have a course on 2 platforms: Udemy andZero to Mastery.

6 ways you should show up as a leader during downturn

Ankita Kulkarni — Thu, 16 Jun 2022 14:41:43 +0000

We have yet again entered an uncertain time 😥. This feels way too familiar for most of us since we experienced something similar when the pandemic hit. But we need to be more resilient this time as winter might be coming. As a lead, I have changed my strategies to show up as a leader for my teams and wanted to share them here.👇

Here are 6 ways you should show up as a leader during uncertain times:

Lead with Empathy 🤗

As a leader, you need to lean in more to provide support wherever needed. Be more mindful in your 1:1’s and fully present. For example, many people might be anxious; you should try to be there for them and do health checks to ensure they feel supported. 💜 Empathetic leaders bring out the best in their team.

People thrive when they still have the freedom to do the work. 🧡

Additionally, if they focus better on things that can help them stay motivated, do it and be open about it.

Ruthlessly Prioritize 💯

Now is a great time to ruthlessly prioritize and get your teams to focus on things that will significantly impact the business. If you can make investments to help reduce developer hours, then you should do it. You should lean in wherever to unblock the team or your leads to make sure they have the right focus.

Disrupt habits and be mindful 🚀

This is how we do things. 🙈

I want to challenge this 👆. Now is not the time to go with old habits. Instead, question your moves and challenge yourself if this is how you should still do things. Also, truly understand how you do things and how you can be more effective as a leader. Share your learnings with other leads and also your teams which will truly allow everyone to grow.

Celebrate the small wins ✨

In whatever way you decide to celebrate small wins, please do it! You should celebrate successes and showcase the impact of your team’s work. It might sound corny but being positive and making folks aware of the positive changes and the focus of work is more important now. Additionally, also celebrate learnings and growth 🪴

Adapt and Lead with Clarity 👏

Be open and transparent with your team but also adapt by zooming 🔍 out and looking at the big picture. Build consistency in your communication. Lean in more and provide that additional context needed. Build a strategy and stay open to feedback. If something isn’t working, pivot as quickly as possible. Your ability to adapt is being put to the test now.

Self Learning ✍️

Be more vulnerable and use other leaders to brainstorm ideas and openly discuss things. But please remember, your mental health is equally important. 🌸

Alone we are weak. Together we are strong 💪

As a leader, it is natural to think about the team before yourself, but it’s also important to prioritize your mental health. Invest time in self-learning 📕, going for walks 🚶‍♀️or whatever you do to ensure you are healthy. Don’t hesitate to be vulnerable with the team as we are humans at the end of the day, and just as we did at the beginning of the pandemic, we will come out the other side more resilient.🪴

If you plan to use any of these techniques or have more to share, please comment or tweet about this to share your thoughts! 🐥

Oh Hello Apollo Client , Goodbye Redux!

Ankita Kulkarni — Mon, 01 Feb 2021 18:07:48 +0000

I know I got excited with the title there but it is kinda true 😅. In this blog post, I will cover why your switch to GQL and Apollo Client 3 should make you walk away from Redux. I will also talk about my journey from Redux -> Apollo Client.

I have had my share of doubts so in the past couple of projects, I was really skeptical of using Apollo Client as a state management solution. I love ❤ Apollo and specifically the changes made in Apollo client 3 that changed my mind completely 😻

Why I like Redux and what it is good at 💙

Global state management solution where you have a good visual of your entire state
You use actions to trigger state updates and asynchronous requests (love 💌 my boo: Redux saga 🔗)
The entire ecosystem is amazing, you get Redux time travel too for debugging! ⏲
You can use libraries like Redux selectors (another awesome library 🔗) to select data from the state and transform

which brings me to my next point… 👇

What is considered a good state management solution? ✅

My data is normalized (no dupes please 🙏)
Specific actions i.e. user logging in / routing should be able to trigger asynchronous requests 💯
We want to transform the data so that our component is not huge and we can write tests!! 🍵
Lastly, visualize the store i.e. we can view our global state and debug easily 🌎

and I’m sure there are more but the above were the top ones in my list! 🥇

After I started using GQL ✨

I didn’t use Redux in the GQL project because we were using React Hooks and React Context and it felt repetitive because you can use useReducer and useContext where you can dispatch actions and update state
Apollo Client exposes custom hooks ⚓️ like useQuery, useMutation which automatically exposed loading, success and error states so I didn’t need to trigger 3 different actions in my redux store i.e. CART_REQUEST, CART_SUCCESS and CART_ERROR. For example, here is a comparison ⚡️

A lot of boilerplate code has reduced 😈 You get the loading, success, and error states right from the useQuery and useMutation hook.

So what was missing? 😅

Going back to the definition of a good state management library 👆

I really loved useQuery and useMutation custom hooks although I wasn’t fully convinced to switch for state management completely as I really liked using Redux selectors that select data & we have the ability to transform it 😥
In the meanwhile, I was using React Context instead of Redux
I also didn’t want to read the Apollo cache all the time
At the time, there was no way to store values outside the cache
I also wanted actions to trigger asynchronous requests like Redux saga’s do 🚶‍♀
On top of this, I found Apollo client cache really hard to read 😫

But with Apollo Client 3, they introduced Reactive Variables and local only fields that changed everything 💖

Apollo Client 3 gives us 2 really cool things 😎

Local only fields
Reactive Variables

They are fields that resolve on the client side itself by reading data from the cache if you want thus replacing the transformers in Redux. Let’s take a look how that would work.

My data is normalized (no dupes please 🙏)

Apollo Client takes care of the heavy lifting for you 💪. You don’t need to constantly dispatch actions to change state. With redux, we were really used to that and the benefit there is you have full control although do we really need full control? 😶

You are already using GQL ❤️ so everything is a graph 📈 and is stored in the graph i.e. you already have all your data in your cache then why add Redux on top to duplicate it? 🤷‍♀ You are going to add more overhead 🙈

Apollo Client automatically caches your data and normalizes new data in query responses and after mutation. Similar to what you would do in Redux where you would need to make sure that your data is normalized. If you are onboarding a new developer, it’s hard because they also need to consider and learn how to do this on an architecture level which adds more overhead.

How the cache looks like

Apollo client stores data using references so it can be smart by looking it up easily using that reference as a key. Here is an awesome blog post 🔗 written by Khalil Stemmler on Demystifying Apollo Cache which you should read before switching to AC3 for state management. 💯

Data transformations 😄

We want data transformations in an application so there is a clear separation of side-effect to transform layer. This way we can make sure that our component file is not huge and we can write tests for those transformers

https://medium.com/media/bcb60b1b989a751e19eb3c6117889e25/href

We will use local only fields mainly for transforming data.

1. Local only fields 🌼

Local only fields is a way we can define client side fields on the GQL type that doesn’t need to come from the server. You can resolve them locally on your frontend.

Let’s say we have the following query for getting the user’s cart ⚡

Here is how your cart query data object from the above query looks like 👈

Let’s say we have this user story, 💄

As a user, I want to see if an item is out of stock or low stock based on the items in my cart.👩🏽‍💻

Here is how your React component might look like for it without using the Apollo client side variable: 💄 ⚡️

Typically in Redux, we would extract the logic of the function getTextForLowOrOutOfStock outside using a redux selector. 🆗

With AC3, you can achieve the above by reading the cache and adding the string for ‘out of stock’ and ‘low stock’ accordingly within your client itself.

OK But, how can we use local only fields? 🤔

We can create local only fields on the Cart type with the @client directive. 🎉 For example, ⚡️ here stockText is the client side field.

With the @client directive, Apollo client will look into the cache to resolve the field. It won’t make a call over the network for that field because of the directive. Now stockText can be accessed anytime we declare a Cart type because it is a field on the Cart type.

Now we can directly access stockText in our React component by doing the following ⚡️

2. Reactive Variables 🌸

We can also create custom client side values stored outside the cache known as Reactive Variables. Sometimes we just want to create a field outside of the type structure which can still be accessed through the Apollo client globally. For that, Apollo client gives us Reactive variables.

Modifying a reactive variable triggers an update of every active query that depends on that variable, as well an update of the react state associated with any variable values returned from the useReactiveVar React hook.

Reactive variables don’t update the cache but store the state information that we want to access at any point in our application. In Redux, we usually dispatch an action to store such a value in the store.

Let’s say we have this user story, 💄

As a user, I want to view the number of items in my cart that are on sale. 💯 👩🏽‍💻

For this you would have to read all the items in cart, check items that are on sale and count them. With Apollo client, you can achieve this by 👇 ⚡️

You can do way more than this. You can also access existing fields (i.e. readNumberOfOOSItems) through other fields as well. 🙌

You can access the above readNumberOfOOSItems via a query as well which gives you loading, data and error states:

But wait, what is the difference between local only fields and reactive variables? 🤔

In a local only field, you create a new field on the type itself i.e. from our example, we created stockText on the Cart type i.e. you can’t access stockText anywhere else.

But for reactive variables, you can access it anywhere you like and it isn’t restricted to a specific type. Unlike the Apollo Client cache, reactive variables don’t enforce data normalization, meaning you can store data in any format you want. 🤯

Specific actions should trigger asynchronous requests ⏩

Once we do retrieve data or if the user wants to route based on certain information from the server, we might want to trigger asynchronous requests or rather specific actions that the user should take.

Let’s say we have this user story, 💄

As a user, I want to be taken to the sign in page if I’m not logged in else I want to see the app page

Here we want to track if the user is logged in or not and accordingly route the user. We can achieve this by creating a reactive variable for it.

Reactive variables are variables stored in the client and outside the cache but the components can also access their values directly. In the example below, isUserLoggedIn is a reactive variable that has been created using makeVar function. It invokes the function to check if there is a token in the browser Cookies🍪. (In the real world, we will obviously check for token expiry as well 😉).

Anything under fields is a field policy. A field policy is basically a contract between client and the function which dictates how that field is going to be resolved. We have a field policy to read the number of out of stock items and check if the user is logged in or not.

Next, in order to access this value within the component, we can do the following ⚡️

The above will re-render whenever the value changes for isUserLoggedInVar

If you want to trigger an API request once the user has logged in, you can achieve this by listening to isUserLoggedIn in a useEffect. 👈

Therefore, we can trigger async requests based on what’s in the state.

But wait, can I update the value of the Reactive variable? 🤔

Yes you can! We can update the value of the reactive variable anywhere in our application, for example if we wanted to update the value of isUserLoggedInVar to false or anything else, we can! We just need to invoke the function isUserLoggedInVar directly!

Visualize store / cache 🔮

Lastly, visualize the store i.e. we can view our global state and debug easily

Just like Redux developer tools, Apollo client also have their developer tools, here is a link. 🔗 Initially, I had some difficulty visualizing the cache as the Apollo developer tools are not as mature as Redux developer tools.

But after understanding how Apollo client stores data internally and how it optimizes it, things got a lot easier. I am able to visualize the cache. 😄

In the Queries and Mutation tab, you will see a list of Queries and Mutations executed in your application (just like Redux does). In the cache tab, you will see the entire cache i.e. your Root query along with the cache references that got updated.

You can use GraphiQL to query anything (including Reactive variables) just like you would in the GQL playground. But if you want to query Reactive variables , make sure to check the checkbox “Load from cache”.

I find that Redux dev tools are superior with time travel although once you learn how the cache looks like and how it takes care of the heavy lifting for you, it will get a lot simpler. But, I would say this is definitely a pain point of Apollo client dev tools overall 🤕.

Lastly, keep an open mind

https://medium.com/media/7f446247325b2b814408d4727aaf4695/href

The difference between Redux and Apollo Client is that you either take control and do everything on your own (like Redux) or let a mature library like Apollo Client handle that for you 🙌
Don’t get me wrong, I do love control 😂. but Apollo client is taking care of the bulk of the work for you so you can focus on the core of your application
I kept comparing Apollo client to Redux 1:1 and although it was great to help me understand how my app would scale, this was also a reason I was holding back because now I have to unlearn what I have learned and trust that Apollo client will take care of it for you. 👌
When you are using Apollo client, it does feel redundant to use Redux on top of it as you are now keeping 2 copies of the same data i.e. Apollo client cache and Redux global store. 🙈
The more you learn about the cache, the more you start to love it! ❤️

Thank you for making it so far, hope you found this post useful 💯 and it helps you draw comparisons between Redux and Apollo Client. 🙌

How to get started and debug Lambda functions

Ankita Kulkarni — Wed, 23 Oct 2019 17:05:26 +0000

Get started with Lambda functions

The best way to learn anything is to play with it on a project and build 👷🏼‍♀️ something. As I started learning about Lambda functions, I had this list of questions❓that kept coming to mind. To help you better understand Lambda functions, I’ve converted all of my questions, and their answers into a helpful blog post to get you started. Let’s dive in!

What are lambda functions 🤔 and why are they so popular 🌟?

https://medium.com/media/1402eea3d30c09d34956ea82b5e0a934/href

Lambda functions replace the backend API’s 🤯 as you don’t need to have a separate backend repository, but store your lambda functions in the front end itself. They follow the “supply on-demand” model i.e. they will only run when you need them ⏳. Unlike your server, they are not running all the time which means you end up saving a lot of resources, and gives you a performance boost. ✅

You are not maintaining two repositories 🙅🏻‍♀️ — one for front end 💅 and the other for the backend 👾 but just one which is cool. You would call your functions from your front-end the same way you would call your APIs, i.e. using fetch.

These reasons were enough for me to get started using them on a project. Plus, since Lambda functions are trendy right now, and I was really excited to try them out. 😎

So how do I get started 🍷?

The best way to get started is by searching out some starter documentation online (like this blog post 😉) 🤷🏻‍♀️. That gave me a bunch of results like this one: https://docs.netlify.com/functions/overview/. This resource really did a good job of explaining what Lambda functions are. I also learned that I could just get started by building a hello world function and deploy it using my Netlify account. This seemed easy. 😊

I created a project using create react app using the following command as I wanted to build my front end with React.

npx create-react-app hello-world

I then installed netlify-cli package 📦 so that I can start creating lambda functions in my project.

👉 Please note, there are two main ways of building your lambda functions — netlify dev and netlify lambda. This doc 🔗 explains when to use what.

netlify dev: a new way of working with lambda functions.
netlify-lambda: a shortcut to install function dependencies in production and, (if needed) bundle functions with babel and webpack if you need to (e.g. for writing functions with typescript).

Where can I add my functions code? 🤔

You can declare a path to your functions directory inside netlify.toml, the convention is to call them ‘functions’ but you can call it whatever you want. netlify.toml is where you can tell Netlify to go look 🔎 for your lambda functions. I created a functions directory inside my src and then created a primary hello-world function inside that. I used this post to write a hello world function: https://functions-playground.netlify.com/

exports.handler = (event, context, callback) => {
  callback(null, { statusCode: 200, body: "Hello, World" });
};

My netlify.toml file:

[build]
 command = “yarn build”
 functions = “src/functions”
 publish = “build”

so far so good 🏅

How can I run my functions locally? 👀

Get the netlify cli to test your functions locally. Netlify CLI is a command-line utility that will help you to run and debug your functions. You can just run netlify dev 💯 to see if everything works.

Here is how my project structure looks like:

Here is how you run functions from your browser:

How can I deploy these functions on Netlify along with my 💅 front end?

https://medium.com/media/4b7783b26029c43960280eb061c2c944/href

If you use netlify-dev, you don’t need to use npm-run-all to run your functions and front end in parallel. You need to use netlify dev to start your functions and front-end.

"scripts": {
  "start": "react-scripts start",
  "build": "react-scripts build"
}

Deploy your project to Netlify ♻️

You can use the Netlify CLI to deploy your functions or just push your code to Github and connect your repository to Netlify. Here is a good post on how to do that: https://docs.netlify.com/site-deploys/create-deploys/#deploy-with-git

Functions on Netlify

What if my functions want to use different “node_modules” 📦?

Let’s change the hello world function to use a node module: firebase-admin

To do that, let’s create a hello-world functions directory 📁 which has the hello world function inside it. It lists users collection data from your cloud firestore database. Every function needs to be treated like it’s in an isolated environment, so each directory 📁 will have it’s own node modules 📦, any files 🗂 it needs etc. which means we need a package.json file.

👉 We also need to add a new package.json script called postinstall which will be run by Netlify to install all the node modules for your lambda functions. You do need to use netlify-lambda here to install the node modules for your functions as currently there is no way to do the same with netlify dev.

“postinstall”: “netlify-lambda install”

👉 Please don’t forget to add a .gitignore file in your functions directory as you don’t want to check in all your node modules to Github.

Here is how I structured my functions directory 📁:

Where do I store my secret 🔑 environment information?

The firebase-admin module requires some config information to run successfully. I’m going to use environment variables to store all the config information. On Netlify, you will store these values like 👈

👉 Please note, you don’t need to add quotes around your “private_key” as you will get unable to read key errors.

Lambda function with firebase-admin

Here is my code that uses firebase-admin module:

const admin = require("firebase-admin");

const config = {
  type: process.env.TYPE,
  project\_id: process.env.PROJECT\_ID,
  private\_key\_id: process.env.PRIVATE\_KEY\_ID,
  private\_key: process.env.PRIVATE\_KEY.replace(/\\n/g, "\n"),
  client\_email: process.env.CLIENT\_EMAIL,
  client\_id: process.env.CLIENT\_ID,
  auth\_uri: process.env.AUTH\_URI,
  token\_uri: process.env.TOKEN\_URI,
  auth\_provider\_x509\_cert\_url: process.env.AUTH\_PROVIDER,
  client\_x509\_cert\_url: process.env.CLIENT\_URL
};

admin.initializeApp({ credential: admin.credential.cert(config) });

const dbInstance = admin.firestore();

const getUsers = () => {
  const userRefs = dbInstance.collection("users");
  return userRefs.get().then(snapshot => {
    return snapshot.docs.map(doc => doc.data());
  });
};

exports.handler = function(event, context, callback) {
  getUsers().then(data => {
      callback(null, { 
         statusCode: 400, body: JSON.stringify({ data })
      });
    })
    .catch(err => {
      callback(null, {
        statusCode: 400, body: JSON.stringify({ err: err.message })
      });
    });
};

Which node.js version does Netlify support?

It’s important to ask yourself, which node.js version your package 📦 is compatible with? This is what it says in the docs

By default, Netlify uses Node.js 8.10 as runtime for all new serverless functions written in JavaScript. You can override this by specifying the desired runtime with an environment variable.

For example, to use Node.js 10 for all future serverless functions deployed, set the variable AWS_LAMBDA_JS_RUNTIME with the value nodejs10.x

👉 I had to set AWS_LAMBDA_JS_RUNTIME to nodejs10.x as firebase-admin is compatible with that. 💯 This is very important as your functions might not work if you don’t use the correct node.js version and might return a blank screen. You should always read your logs but this is when you should definitely read the logs for more clues.😄

How to debug Netlify functions 💯?

https://medium.com/media/21da8fe0642a7f6ebda7d877885bab42/href

Netlify CLI 🔗 is very helpful to debug your lambda functions. I like to use netlify deploy which basically deploys the current instance of your lambda functions and gives you a live preview. You can test your functions right away without having to push your code to Github and wait for it to deploy. It also provides you with a link to the logs which you can use for debugging reasons if something works locally but not on Netlify. The turnaround time ⏰is pretty fast.

netlify deploy

👉 Please note, the logs and the draft URL changes every time you publish a new build using netlify deploy

How to call 🤙 functions from the front-end 💅?

I used fetch to invoke my function and then called getUserService from my front end. Here is how I did it:

export const getUserService = () => {
  return fetch(`/.netlify/functions/helloWorld`).then(response => {  
    return response.json();
  });
};

❌ If you invoke your function like localhost:, you will get a CORS error as you are trying to call your functions port from your front end port which is different.

I hope this helps and gives you a good overview of how to get started and debug your functions. The code is deployed here if you want to take a look at it: https://github.com/kulkarniankita/hello-world-netlify.

If you have any questions, please post it in the comments below. 🙌

Accessibility 360 — Web and mobile

Ankita Kulkarni — Tue, 03 Sep 2019 19:59:32 +0000

Accessibility 360 — Web 🕸 and mobile📱

We need to make this world 🌎 a better place for everyone.

https://medium.com/media/a5f95d8a6bcb6f5dd9cb78b699d9c3e8/href

As a developer, I’ve noticed ever since starting out that a lot of us are intimidated by building accessible apps. The fact of the matter is, it doesn’t have to (and shouldn’t) be that way. Accessibility is just like building 🏗 any other feature — and there needs to be greater awareness around this. 🤯

If you’ve incorporated accessibility into apps before or want to integrate accessibility for the first time, then this post is for you ⬅. I’m going to use both web 🕸 and mobile📱as an example.

Here are a few things ✨ to consider when incorporating accessibility. Let’s get started!

👏🏼 Semantics 👏🏼

Semantics for Web and Mobile

Follow the semantics 🧠. When any assistive device scans a web page, it will read the HTML structure of the page. That means when using an image on the page, don’t use a div and give it a background-image but instead use a tag for it because semantically img is the correct HTML element to use. Another example is a

and tag which is mainly used for layout only as they are semantically meaningless, they don’t have a keyboard ⌨️ or touch support in any browser 🕸.

Similarly, for 📱mobile, use the Image API from React Native which is the correct semantic element. If you don’t, you will have to patch it up with different accessibility tags 🔖. This way, you’ll get accessibility right out of the gate instead of having to fix 🔨 things later.

Accessibility is great for SEO 💹

In HTML, we have six levels of header tags from H1 to H6. If a user primarily uses a keyboard ⌨️ to navigate using tabs, the headings act as markers that the screen reader uses to navigate. By using the correct header a screen reader can help the user to find the section they want to read. This also helps screen readers 📖 to skip the block of contents and only focus on headings. When a user looks 🔍 for a term using a search engine, and you’ve used the correct semantics, it will rank higher on the page which can lead to an increase in traffic🚦.

That means when you’re thinking of accessibility, you’re also thinking of SEO. 💯

Bonus: you will make the marketing team happy when you get that SEO right.😉

Build accessible components ⛩

With the power 💪🏼 of components, we get a lot of re-usability. When we onboard new developers, it is easier for them to find a component that already exists and use that instead of creating a new one. 🤷🏻‍♀️ This is where a design system 💅 comes in handy because we can make these components accessible.

It’s important to add accessibility properties to these common components such as accessibilityLabel for React Native or ariaLabel for the web (take a look at the wrapper example below) and use linters to suggest that developers add these to your components while using them. Therefore adding a wrapper to these components with accessibility properties baked in is really useful 💯. That way anyone using the component will get the default accessibility properties baked in automatically.

interface IButtonProps {
  onPress: () => void;
  accessibilityLabel: string;
  accessibilityHint?: string;
  accessibilityRole: string;
  text: string;
  buttonStyle?: any;
  isDisabled: boolean;
  buttonTheme?: any; 
}

Build a 👏🏼 design 👏🏼 system 👏🏼 of 👏🏼 accessible 👏🏼components 👏🏼

There’s a lot to be said on how design systems 💅 can improve accessibility, it’s not easy to sum up the many, many benefits in a few sentences. For example, as you build accessible components, your accessibility becomes baked in wherever those components are used therefore improving accessibility across your app — keeping in mind that doesn’t mean your entire app is accessible. The list goes on.

An excellent example of a component library is Reakit. They have a separate section on accessibility with some fantastic explanations of the different considerations you should be thinking about. For your team, you can start using “Reakit” as it will provide you with a lot of common accessible components so you don’t have to build 👷‍♀️ from scratch. Alternatively, you can also build a Design System 💅 yourself and use ReaKit as a reference. For example,

Reakit accessibility button example 💜

Personally, I like using Storybook ❤️ as it serves as documentation for your components and everyone on the team has visibility 👀 of all the components, it’s properties etc. You can also use it to keep track 🛤 of which components are accessible and which are not and run automated accessibility tests on them.

Rules to follow 📐

Different states to consider for apps

Every web 🕸 or mobile📱 app will have elements such as Text, Buttons, Keyboard navigation, responsiveness and more, some of which are depicted above. Try adding a wrapper around components with the required and optional properties related to accessibility just like you would otherwise. You can determine these properties through the docs. This not only helps onboard new developers quickly but also help keep accessibility top of mind. 🧠

The reality 😐 is, we humans are creatures of habit 🤷🏻‍♀️ and this will help create good habits. 💯

Example of an accessible component 💯

This is just a basic checkbox ✅ component but will give you an idea on how we can start adding accessibility.

https://medium.com/media/a51ee039bfa1972d0fa552e81b3264a0/href

Screen Reader 🖥 for web 🕸 and mobile 📱

On the web 🌎, if you are a Mac 🍎 user, you can turn on voiceover by using cmd+f5. You should turn on the screen reader very early in the development process to see how it will inevitably read the contents of your website. This will help create a better user experience and help ensure you use the right accessibility properties. Here is an example of how the above checkbox component will be read by the screen reader when voice over is turned on.

Checkbox component when then voice over is turned on

Accessibility checklist ✅

Below is a handy checklist ✔ on what should be considered when thinking of accessibility. This is a great start and serves as a solid reference point. It’s important to also keep in mind that there is more to accessibility than what is listed here. Here is the 🔗link to this checklist.

Accessibility checklist

Make Open-source 👐🏼 libraries more flexible or accessible

If you are an open-source developer, you can help promote 💪 accessibility by adding accessibility yourself, making your library manageable so that others can add accessibility properties themselves — or both 🙌🏼. This is very important as developers tend to use a lot of packages 📦 on our projects. This way, before we decide to code something ourselves, we can look for existing packages that will do the job for us.

If those packages aren’t flexible enough to inject properties, you can fork🍴 their repository and add accessibility properties yourself. However, this is a much more difficult option 😢 and takes a lot more time ⏰. Therefore it is our responsibility as open-source developers to make our packages more flexible.

I hope that after reading how you can get started with accessibility, you realize how important it is to consider it from the start — not as an afterthought. If you’re interested in learning more, check out one of my recent talks at React Europe, here: https://youtu.be/X_3tnSwXLls

Please give it some 👏 if you liked it 🙏 and share your experience in the comments below.

You are NOT a React Native noob

Ankita Kulkarni — Mon, 20 Aug 2018 16:37:48 +0000

Common React Native gotchas and concepts that will help you before and during development ✨

React Native lets you use the same knowledge base of React and you can do native mobile app development. It is a lot of fun 🐼

If you are a React developer and know some basics of native development i.e. iOS 🍎 or Android 🤖 then you will pick up React Native easily i.e. not a noob 🙈. Although, it is not 1 - 1 relational. When I initially learned React Native, I forgot how my native development skills will be easily transferable.

Here is a list of React Native info and gotchas you will encounter as a React Native developer:

Getting a project together — Expo vs React Native cli ✨

There are 2 main ways to get a react-native project together:

Expo
React Native cli.

Expo is basically an open source project built for newbies using Expo APIs to help build react-native and prototype apps quickly. You use the create-react-native-app to get started with Expo. It makes your project pure JavaScript and you never have to dive into the native code.

Once you are ready to release it to the app/play store, you can basically “eject” which generates iOS and Android bundle/folders. (You cannot release without ejecting). During this process, things can break when something is being converted to native code. Not sure about you but this makes me very uncertain. I don’t like when there is a lot of magic going on ¯_(ツ)_/¯. It is usually very hard to debug the root cause of it.

➕ You should be building your projects and verifying it on a device at the end of every story/task you work on.

I would suggest using Expo when you are new so you can learn how everything works although it’s risky while working with clients as debugging gets harder when something breaks.

For React-Native cli, you create a full-stack project by using react-native-cli init. It generates Android 🤖 and iOS 🍎 folders and files 📁 in your project right from the start which gives you so much visibility as a developer. There is no eject step as you get the project folders generated by default. You can do your builds right away and run it on a device provided your environments are up to date with the requirements. Unless you do something crazy this will work.✨

Layout components 💄

You use Flexbox flavour for laying out components on the page. If you don’t know Flexbox already, here is a great 🔗 link to learn from. React-native also provides native specific components such as Text, View, etc. You wrap the component usually in a View as View is designed to be nested inside other views and can have 0 to many children of any type.

➕ Tip : Keep in mind that you are building for different devices. Hence, try not to hardcode values in too much as a top: 5 will position differently for different device sizes.

Phones can rotate and if that is a requirement for your app then you would need to account for both portrait and landscape mode while writing CSS. 💄

I also suggest using Styled-components 💅 for more of a design system.

You are not coding 🙅 for the browser 🕸

Even if it feels like it, you are not coding for the browser 🕸 please keep this in mind at all times. While doing web development, your browser will provide the window object and you can easily access setTimeout 🕐 for example but there’s no native equivalent and you won’t know what happened.

Now, this might even work during a debug build where you might have hot reloading setup so browser might inject and it will look like it works. Although, it won’t on release builds as it does not have access to a lot of common web API’s. 🕸️

There are a lot of npm packages 📦 that keep web in mind while writing the package so again that might not work hence be careful before picking a package for your project. Look at their package dependencies too to make sure you are good to go. Most libraries are very good at documenting it and a quick Google search will tell you the same so do that first! 💯

Async Storage 🗑️

Android 🤖 and iOS 🍎 both have storage equivalents so you can store data on the device which gets deleted when you uninstall the app.

React Native provides a very helpful API called Async Storage which does a good job of storage on both platforms. Just like you would use local storage API in a browser, you use AsyncStorage in the same fashion.

On iOS, AsyncStorage is backed by native code that stores small values in a serialized dictionary and larger values in separate files. On Android , AsyncStorage will use either RocksDB or SQLite based on what is available.

User story example,

As a user 💁, I want to stay logged in after logging in once even if I close the app

You would want to use Async storage in this scenario. As user logs in using the login button, store the user info or token, next time they come back to check if the token exists and hasn’t expired and accordingly show them your main screen or login screen so they don’t have to re-login.

Async await 🕐

Remember this is a native application. There is a UI thread that is responding to gestures from the user. Now with async await, the program can run other code like gesture responders and rendering methods while the async task is in progress. Hence by using async await🕐, you can run your code concurrently🎉, for example:

const storeUserInfo = async (token) => {
    try {
      await AsyncStorage.setItem("userToken", token);
    } catch (error) {
      console.log(error);
    }
};

Don’t think you won’t open Xcode 🍎 or Android Studio 🤖

As a React Native developer, don’t expect to never open Android studio (IDE for Android) and Xcode (IDE for iOS) as you most likely will. The more familiar you get, the better it is for you.

User story example:

As a user 👩, I want the app to not rotate so that I have a better user experience

From a developer perspective, this means you want to lock your device orientation to only portrait mode. This is a setting that each platform has. You would have to make the change in androidManifest.xml for Android and a checkbox setting in iOS.

iOS config for locking orientation

🍎https://stackoverflow.com/a/32177887/1881309

🤖 https://stackoverflow.com/a/44485271/1881309

➕ Tip: Always add “React Native” to your Google search, it will help you get better search results. 💯

Assets 📷

Assets are your images, audio and video files but the most common scenario is images. I can’t think of an app without images 🤷.

User story example:

As a user 👵, I want to see the company’s logo in the login background

Since we are targeting different devices iOS 🍎 and Android 🤖, the resolution for each device is different hence my suggestion would be to provide 2x, 3x images. React Native does a good job of picking the right image based on different screen densities.

company-logo.png
company-logo@2x.png
company-logo@3x.png

For example, company-logo@2x.png will be used on an iPhone 7, while company-logo@3x.png will be used on an iPhone 7 Plus or a Nexus 5. If there is no image matching the screen density, the closest best option will be selected.

By taking this approach, your app will look beautiful💄 and won’t pixelate.

Navigation

Navigation example (iOS)

React Native has tons of different libraries for react navigation. One of the most popular ones is react-native-navigation.

Even though the library is good and has many ⭐. I found that it wasn’t good for beginners as it requires some native specific setup. I personally had a hard time setting it up even though I have native development experience. It also has a huge learning curve for a JS developer hence I would recommend using https://reactnavigation.org/. This library took me 5mins ⏲ to get started and is very easy to use.

Debug vs Release builds 🚀

Debug builds are mainly for development and Release is for production i.e. App store 🍎 and Play store 🤖 deployment. During development, you are running a debug build where you have hot re-loading 🔥 and the ability to debug remotely. When you need to test it on a device, you need a release build.

When you want to run the app on your device in a non-dev environment, you need to run the following command that generates a release build for you Let’s take a look at an iOS example:

node node\_modules/react-native/local-cli/cli.js run-ios --configuration=Release

How App lifecycle corresponds to component lifecycle 🚲

The React component lifecycle 🚲 correspond correctly to the Activity lifecycle in Android or Screen in iOS. As you usually build your React apps, you would do the same for React Native so fetching data before component renders in componentDidMount and so on.

Although, how would you know if the app is in background or foreground (very native specific)? You get AppState from react-native which basically has event listeners and you can listen to it as the app goes in background or foreground. Here is some sample code:

import { AppState } from 'react-native';

class App extends Component {
  componentDidMount(): void {
    AppState.addEventListener("change", this.\_handleAppStateChange);
  }

  componentWillUnmount(): void {
    AppState.addEventListener("change", this.\_handleAppStateChange);
  }

// state can be active for foreground and inactive when transitioning between background and foreground
  \_handleAppStateChange = (nextAppState) => {     
    if (nextAppState === 'background') {      
       console.log('App is in background!')     
    }
  }
}

Hope you found this post useful 💯 and it gives you a good understanding of how React Native works and how it corresponds to native development. 🙌

Please give it some 👏 if you liked it 🙏 and also share your React-native experience in comments 🙌

The Art of Humanizing Pull Requests (PR’s)

Ankita Kulkarni — Tue, 19 Jun 2018 00:11:49 +0000

What are PR’s, how to effectively create a PR, how to give feedback on PR’s and how to respond to feedback

What is a Pull Request (PR)?

It is a request for changing code in a repository. Once you make changes you need in your code, you submit a PR. Once submitted, interested parties will perform a code review and provide you with any feedback/changes needed.

Pull Requests are typically used by teams for shared collaboration and feature work or bug fixes. The idea is to make sure well written and bug-free code gets pushed to the repository. It is a way to develop high-quality code.

How to Create a Pull Request

Breakdown your story/feature

Before you start working on a story/feature, make a mental/written note on how you want to break it down into several smaller PR’s. This doesn’t just help your reviewer but also YOU as you can keep track of your progress and get frequent feedback. Another benefit is, as the codebase is shared with other developers, reverting a change gets a lot easier. Hence, try to keep the scope of your PR to a single issue while breaking it down.

For example, let’s say you are implementing a todo list and have the following story:

As a user, I can add and delete items to/from a list respectively

I would break it down by:

PR #1: Add a text box and an add button on the page.

PR #2: Clicking on add button adds the item to the list

PR #3: Clicking on delete button on the list item deletes that item from the list

You will get reviewer blessings 🙏 for doing so. Imagine if your co-worker blasted a HUGE PR, you wouldn’t want to review, would you? 🙈

Add comments on your PR

How to add a code comment

Wherever you have done something different, usually, it’s a good idea to 🔗 add a comment on the line number explaining why you did what you did. If you are not completely sure of your code, you should definitely tag “@” at those who have the most context on that code to get some feedback. For example,

You used a new function from the library Lodash called isNan which might not be used in the codebase a lot, you might want to add a comment there saying this function basically checks if the value is Nan and returns a boolean.

This helps your reviewer a lot as that saves their time (i.e. if they don’t already know what the function does).

Add screenshots/gifs

Screenshots and gifs are proof that the code that you submitted works! This increases the likelihood of acceptance and also gives your reviewer a visual of what you have implemented. A screenshot definitely works although when your code is doing more than what a screenshot can capture, create a gif. By using a gif, you can click around and show everything that your PR covers. My favourite one is: Licecap 🔗

Tests are documentation of your code

Whenever you have worked on something which makes sense to you and you want to explain this complex code to future developers your intention for that particular change. Don’t litter the code with code comments and ask yourself these questions, if it’s so difficult to understand,

Can I split this code into smaller functions?
Can I rename this function to something more obvious? ask your team for function name suggestions if you like.
How can I simplify my code further so I don’t call it complex?

Irrespective of what you pick, you should write a TEST. 🔥

Your tests are there to test your logic but also, are the documentation of your code. Try to add a test explaining that part of your code.

How to review Pull Requests?

Be empathetic

As a reviewer, it’s extremely important to provide feedback in a courteous manner. You need to remember that you are reviewing your teammates’ code who you like to talk to and go for team outings, lunches etc. They are human, they have feelings and feelings can get hurt easily! 💥 Hence, be more empathetic during your reviews.

Make yourself more familiar with the code

Always get in the habit of teaching and it doesn’t matter if you consider yourself a junior or a senior developer. Instead of telling them what the problem is, ask them questions, make them think and use a friendly tone. Following are a few examples:

Do you think maybe we could assign this to a variable and re-use it on line 9?
Could we possibly use this helpful utility that already does that for us which our dear teammate Sarah built?
Can we move this code in its own function so we can write more tests 😃?
What do you think about trying this option 🤔?
I’m not sure if I understand the whole picture but could you explain what this function is doing? This will make them possibly think that the function name could be renamed. After they explain what it does, then follow it up with a suggestion such as:

“I get it now, sorry for being slow! I’m not sure but do you think we could rename this function to option1, option2 or something along those lines, what are your thoughts”?

Always ask them their thoughts as remember you are a reviewer and they wrote the code so its possible they have more context than you do.

Imagine if your co-worker used words such as “Don’t do this, just rename the function”. That sounds so much direct, less friendly and sounds like you are giving them a command rather than taking their input on it.

Always provide suggestions for code improvements

Rather than just telling them, “this code could be improved”. Provide them suggestions/examples on how it could be improved further for example,

This code works perfectly but after I started reading it further, I thought of another idea that I wanted to run it by you. I’m not sure but what about?

sample code #1,

sample code #2

What are your thoughts?

Use emoji’s

Online criticism is misinterpreted easily. Hence, emoji’s are one of the best tools for communicating online. Using them automatically adds a friendly tone to your sentences. Use it when you start feeling that the conversation is getting too serious . But if that’s not you then don’t force it, keep it real.

Take it offline

If you find yourself going back and forth in conversations with your teammate, the conversations are getting too long and its leading nowhere, take it offline. There is no point spending time typing when you can quickly hop on a call 🤙or just walk 🚶‍ to their desk.

When you meet face to face, you automatically develop more empathy and understand their point of view even further and alternatively, they understand yours. When you come to a conclusion, post a comment on the PR summarizing your discussion so other readers following along are aware of it and your future self will thank you for it.

nitpick

While reviewing code, you may find something that is basically a nitpick i.e. it may not necessarily block the approval of the PR but something to consider. Nitpicks are not important but technically correct. They can be related to grammar corrections, un-intentional new lines, any aesthetics, minor code refactor etc. For example,

nit: extra white space

nit: can we assign this value to a constant for better readability purposes?

How to respond to feedback

The rules that apply while submitting a PR equally apply while responding to it as well.

When suggestions are provided

Always remember that you are collaborating and writing code. If a suggestion is provided, always treat it like a possibility of improving your code. If you don’t understand something, ask for clarification for example,

“Can you please provide an example or Can you please clarify further? I don’t understand it completely.”

If you think the feedback is valid, implement it! However big or small the change is, if you think the feedback is valid, always reply and let the reviewer know that you took their feedback. For example,

That’s an excellent point, change coming right away!

Good point, thanks for catching that.

If you disagree 👈

Disagreements are bound to happen as different developers have different ways of writing code. Although, try to voice your opinion in a very friendly manner. If you agree to them partially then let them know but also provide your reasoning at where you disagree with them. For example,

That’s a great point. I do agree with your first suggestion, will make a change right away. Totally missed that one. Although for the 2nd one, I did consider that option and decided to not go that route as for the following scenario, we don’t want to display that. //or whatever your reasoning was, be honest. 👈

Make your commit message obvious

Gitmoji — commits example

Now that you spent time on your feedback, write a good commit message which lets the reviewer know that you did consider their feedback but don’t make the message too long. A very handy tool is 🔗 Gitmoji. 😍 They provide an easy way of identifying the purpose or intention of a commit by looking at the emojis used.

Take it a step further

You have made some changes in your code based on the feedback you got. Now your code handles an additional scenario which you didn’t think of or wasn’t aware or may have missed but there’s your chance to “Write a test”.

Once your code is merged in, a defect gets filled. Once you fix that defect, add a test to make sure that the defect is actually fixed and there’s proof 🕵️‍. Now, its documented!! 😃 You get brownie 🍫 points if you take it a step further. You will automatically gain the trust of your team.

I hope you enjoyed reading this article and learned something. If you did, please give it some ❤️ and also, would love to hear your personal experiences on pull requests in comments. If you have any questions, please feel free to reach out on my Twitter.