
I hesitated a lot about whether to add analytics to my blog. On one side I wanted to avoid using Google Analytics: I didn't want any 3rd party cookie on my website. On the other side I shameless admit I like that ego-boost. Observing how many people open my blog and which post is read the most. I don't plan on monetizing my blog, I work on it to explore new technologies. Still, again, that blinky dopamine effect.

How to please my ego while being kind to folks visiting my website and the planet?

## Microanalytics

The solution I found is [microanalytics](microanalytics.io): it is a light analytics SaaS, hosted in EU and green-powered. GDPR compliant, no cookie, no user tracking. It has a free plan up to 10k pageviews per month. It is based on a script sold on [Code Canyon](https://codecanyon.net/item/phpanalytics-web-analytics-platform/29568779).

### Setup

1. Create an account on [microanalytics.io](microanalytics.io)

2. Register a website adding its URL

3. Add the script to the website

I added it to the `Head` in the [Layout component](https://github.com/pducolin/blog/blob/main/components/Layout.jsx#L28-L34)

```jsx
{ANALYTICS_ENABLED && (
    <script
    src="https://cdn.jsdelivr.net/gh/pducolin/blog@main/scripts/analytics-min.js"
    async
    defer
    />
)}
```

To add it only on production I use the environment variable `NODE_ENV === "production"` and assign it to `ANALYTICS_ENABLED`.

### How it works

`microanalytics` provides an HTML script, easy to add to the header of a static HTML pages.

```html
<script data-host="https://microanalytics.io" data-dnt="false" src="https://microanalytics.io/js/script.js" id="ZwSg9rf6GA" async defer></script>
```

I downloaded the script to see what it was doing:

```js
// From https://microanalytics.io/js/script.js
!function(t){"use strict";function e(e,r){var n=document.getElementById("ZwSg9rf6GA");if("true"===n.getAttribute("data-dnt")&&navigator.doNotTrack)return!1;var a={};a.referrer=r||t.document.referrer,a.page=t.location.href.replace(/#.+$/,""),a.screen_resolution=screen.width+"x"+screen.height,e&&(a.event=e);var o=new XMLHttpRequest;o.open("POST",n.getAttribute("data-host")+"/api/event",!0),o.setRequestHeader("Content-Type","application/json, text/javascript; charset=utf-8"),o.send(JSON.stringify(a))}try{var r=history.pushState;history.pushState=function(){var n=t.location.href.replace(/#.+$/,"");r.apply(history,arguments),e(null,n)},t.onpopstate=function(t){e(null)},t.pa={},t.pa.track=e,e(null)}catch(t){console.log(t.message)}}(window);
```

Beautify-ed it to make it more readable:

```js
// I used https://beautifier.io/
! function(t) {
    "use strict";

    function e(e, r) {
        var n = document.getElementById("ZwSg9rf6GA");
        if ("true" === n.getAttribute("data-dnt") && navigator.doNotTrack) return !1;
        var a = {};
        a.referrer = r || t.document.referrer, a.page = t.location.href.replace(/#.+$/, ""), a.screen_resolution = screen.width + "x" + screen.height, e && (a.event = e);
        var o = new XMLHttpRequest;
        o.open("POST", n.getAttribute("data-host") + "/api/event", !0), o.setRequestHeader("Content-Type", "application/json, text/javascript; charset=utf-8"), o.send(JSON.stringify(a))
    }
    try {
        var r = history.pushState;
        history.pushState = function() {
            var n = t.location.href.replace(/#.+$/, "");
            r.apply(history, arguments), e(null, n)
        }, t.onpopstate = function(t) {
            e(null)
        }, t.pa = {}, t.pa.track = e, e(null)
    } catch (t) {
        console.log(t.message)
    }
}(window);
```

The core tracking part was an `XmlHttpRequest` sending a `POST` request

```js
// I changed variable names for readability
var query = new XMLHttpRequest;
query.open("POST", scriptELement.getAttribute("data-host") + "/api/event", !0), query.setRequestHeader("Content-Type", "application/json, text/javascript; charset=utf-8"), query.send(JSON.stringify(body))
```

The body of the request is:  

```js
// I changed variable names for readability
var requestBody = {
    referrer, // document.referrer, URI of the page that linked to this page
    page, // current page URL
    screen_resolution, // screen.width + "x" + screen.height
    event // 🤷‍♀️ never used

};
```

Looking at dev tools the request is:

![creenshot of devtools showing the details of a POST request to microanalytics.io][devtools]

## In conclusion

I was looking for an alternative to Google Analytics. I wanted it to be light, provided as a service (SaaS) and that didn't store any cookie on the client.

microanalytics met my requirements for free.

I found few other services with these requirements:

- [Plausible](https://plausible.io/)
- [Mamoto](https://matomo.org/)
- [micro-analytics](https://github.com/micro-analytics/micro-analytics-cli) (no SaaS)
  
They are all open source projects that can be self-hosted and I might explore them in the future.

Do you know of any other tools? Can you live without analytics on your personal blog? Reach out and let me know!

[devtools]: https://raw.githubusercontent.com/pducolin/blog/main/public/assets/images/devtools-microanalytics.webp "Screenshot of devtools showing the details of a POST request to microanalytics.io"


Making of a blog: analytics without Big G


In [last post](https://www.poladuco.com/Making-of-a-blog-content) I detailed the technologies I chose to create the content of this blog. In this post I will describe the technologies and resources I used to add style and plate this blog.

## Tailwind Css

I first got to know Tailwind CSS one year ago thanks to a [talk on egghead.io](https://egghead.io/talks/tailwind-egghead-talks-tailwind-the-future-of-css-is-here-amadou-sall) by [Amadou Sall](https://twitter.com/ahasall). Back then I was in the middle of converting from native desktop development to web development.

I personally felt uncomfortable with the separation of concerns between CSS and HTML: I could easily misspell a CSS class name, or use the wrong HTML type and find get lost in my design implementation process.

Here are two examples in the languages I was familiar with:

```xml
// A text component in Xaml, .NET
<TextBlock Text="Hello, world!" 
           Foreground="Blue" 
           FontStyle="Italic"
           FontSize="22"/>
```

```qml
// A text component in Qml, Qt
Label {
    text: "Hello, world!"
    font.pixelSize: 22
    font.italic: true
    color: "blue"
}
```

And what I found in web:

```html
<div class='label'>Hello, world!</div>
```

```css
 /* A text component in CSS */
.label {
  color: "blue";
  font-size: 22px;
  font-style: italic;
}
```

Keeping the style code as close as possible to the HTML tag felt more natural, more familiar to me.  

Here is where Tailwind made sense to me:

- 🧱 it is a collection of atomic CSS classes, meant to be explicit and assigned to the html items.

- 📦 It supports tree-shaking, so only the used classes are bundled.

- 👩‍🔧 It can be configured, modified and extended to have the colors, margins, fonts definitions we want.

- 📑 It is well documented with clear examples.

- 🌟 It has a [plugin] to add typographic defaults to vanilla HTML you don't control, like the rendered Markdown.

Let's get started!

### Setup

1. I added Tailwind to my Next project by running:

    ```bash
    yarn add --dev tailwindcss@latest postcss@latest autoprefixer@latest @tailwindcss/typography
    ```
  
2. I created my tailwind config file by running:

    ```bash
    npx tailwindcss init -p
    ```

3. I configured Tailwind to remove unused styles in production

    ```js
      // tailwind.config.js
      module.exports = {
        purge: ['./pages/**/*.{js,ts,jsx,tsx}', './components/**/*.{js,ts,jsx,tsx}'],
        darkMode: false, // or 'media' or 'class'
        theme: {
          extend: {},
        },
        variants: {
          extend: {},
        },
        plugins: [
          require('@tailwindcss/typography'),
          // ...
        ],
      }
    ```

4. Import Tailwind in all pages:

    ```js
    // index.jsx
    import "tailwindcss/tailwind.css";

    ...
    ```

5. If you are using VS Code, I recommend installing [VS Code Tailwind IntelliSense](https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss) to have intellisense and linting.

### Using Tailwind CSS

Once you import tailwind into your React files, you can start using its classes to define the style.

It comes with a preset of spacing, margins, colors and fonts that you can customize to match your desired design.

Keeping the example of a blue text block:

```html
<div class='italic text-blue-600 text-md'>Hello, world!</div>
```

You can play with it it on [this codepen](https://codepen.io/poladuco/pen/bGBaRqz)

It supports both `flex` and `grid` layout - there is a plugin to support even [grid area](https://www.npmjs.com/package/@savvywombat/tailwindcss-grid-areas)

I could add style to the rendered Markdown thanks to [@tailwindcss/typography](@tailwindcss/typography). It provides a set of `prose` configurable classes:

```jsx
<div className="prose mx-6 md:mx-8 lg:mx-12 max-w-none">
  <ReactMarkdown renderers={renderers}>{markdownBody}</ReactMarkdown>
</div>
```

I [defining colors](https://github.com/pducolin/blog/blob/main/tailwind.config.js#L8-L14) from a palette I picked from [coolors.co](https://coolors.co/ffcdb2-ffb4a2-e5989b-b5838d-6d6875). 

I added [some heights definitions](https://github.com/pducolin/blog/blob/main/tailwind.config.js#L18-L24). 

I [extended variants](https://github.com/pducolin/blog/blob/main/tailwind.config.js#L29) support to change the SVG's `fill` property on `hover` and `focus`. This let me style the SVG icons collection from [zondicons](https://www.zondicons.com/)

Finally I [extended the group variants](https://github.com/pducolin/blog/blob/main/tailwind.config.js#L31-L34) to change more properties on [group hover](https://tailwindcss.com/docs/hover-focus-and-other-states#group-hover).

## In conclusion

I recommend playing with TailwindCss to understand if it fits your needs: I could achieve the design I had in mind. I was surprised by how it handles even group `focus`/`hover`.

I could add [style to SVG](https://tailwindcss.com/docs/fill) and  and customise with my palette of colors, everything was a google search away.

Let's try it and let me know how you like it, if you find any obstacle. Reach out on Twitter, I'll be glad to chat!

## Resources

- 📺 [Tailwind: The future of CSS is here](https://egghead.io/talks/tailwind-egghead-talks-tailwind-the-future-of-css-is-here-amadou-sall)

- 📺 [In defense of Utility-First CSS](https://www.youtube.com/watch?v=R50q4NES6Iw)

- 📃 [TailwindCss](https://tailwindcss.com/)

- 📃 [@tailwindcss/typography](https://github.com/tailwindlabs/tailwindcss-typography)

- 🎨 [Coolors.co](https://coolors.co/)

- ✚ [Zondicons](https://www.zondicons.com/)

Making of a blog: Tailwind me up


As listed in the [intro](https://www.poladuco.com/Making-of-a-blog-intro), I created this blog using [React](https://reactjs.org/), [Next.js](https://nextjs.org/) and [Markdown](https://github.com/remarkjs/react-markdown).

I followed [the Netlify's tutorial](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/) by [Cassidoo](https://twitter.com/cassidoo), and it is so well written that I strongly recommend it. There's even a [ready-to-clone Github](https://github.com/cassidoo/next-netlify-blog-starter).

It took me some time to understand how the 3 work together, here's what I learned. No need to go through all this, using the linked tutorial will get you ready to go and write your blog's content. If you're curious as I am, and you are new to any of these technologies you might find the following interesting.

## Let me jump to

- [React](#React)
- [Markdown](#Markdown)
- [Next.js](#Next.js)
- [React + Next.js + Markdown = ❤️](#React-+-Next.js-+-Markdown-=-❤️)

## React

I picked React because I was already familiar with it, having used it for work and personal projects.

React uses Javascript to render HTML elements at runtime; few years ago I used jQuery in a project and it has some of its concepts.

To understand how it works, let's take an HTML document as example:

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Page title, this appears in the browser tab</title>

    // React script, adds its top level API
    <script src="https://unpkg.com/react@^17/umd/react.production.min.js"></script>
    // ReactDOM script, adds functions to interact with the DOM (Document Object Model) 
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    // Babel script, enables using ES6+ JavaScript in old browsers like the evil IE11
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root">
      // React code will add content here
    </div>

    <script type="text/babel">
      // React code will go here
    </script>
  </body>
</html>
```

Let's add a `header` HTML element to the `div` with `id="root"` and say `Hello world` in it. To do so, we use `ReactDOM.render`:

```js
ReactDOM.render(
  <h1>Hello, world!</h1>,
  document.getElementById('root')
);
```

That's it, when downloaded on the browser (aka client side) this JavaScript code will add an `Hello World` to the HTML page. You can test it on [Codepen](https://reactjs.org/redirect-to-codepen/hello-world).

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />

    <title>Page title, this appears in the browser tab</title>

    // React script, adds its top level API
    <script src="https://unpkg.com/react@^17/umd/react.production.min.js"></script>
    // ReactDOM script, adds functions to interact with the DOM (Document Object Model) 
    <script src="https://unpkg.com/react-dom@17.0.1/umd/react-dom.production.min.js"></script>
    // Babel script, enables using ES6+ JavaScript in old browsers like the evil IE11
    <script src="https://unpkg.com/babel-standalone@6.26.0/babel.js"></script>
  </head>

  <body>
    <div id="root">
      // After client's browser executes the JavaScript in this page
      // Here there will be
      // <h1>Hello, world!</h1>
    </div>

    <script type="text/babel">
      ReactDOM.render(
        <h1>Hello, world!</h1>,
        document.getElementById('root')
      );
    </script>
  </body>
</html>
```

If I copy the `<h1>Hello, world!</h1>` into a variable `helloElement`, I can call `ReactDOM.render` passing `helloElement`. This hybrid HTML/string syntax is introduced by React and it's called `JSX`.

```jsx
const helloElement = <h1>Hello, world!</h1>
ReactDOM.render(
  helloElement,
  document.getElementById('root')
);
```

To add dynamic content such as the current time, I can pass a function to `ReactDOM.render`

```js
const Timer = () => {
  return <h1>{`It's ${(new Date()).toISOString()}`}</h1>
}

ReactDOM.render(
  <Timer/>,
  document.getElementById('root')
);
```

`Timer` is a function returning an HTML element, and it is called `Component` in React. A component can use other components, like tomato sauce and mozzarella can be combined together and used as pizza topping.

![Photo of a pizza napoletana][pizza]
*Photo by [Aurélien Lemasson-Théobald](https://unsplash.com/@aurel__lens) on Unsplash*

## Markdown

Markdown is a language I am familiar with as I use it to document code within its repository as it is supported and formatted by Github, Gitlab and Bitbucket. It takes a bit of time to get to know [the syntax](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet) is made of ~10 elements, tiny but powerfull. I don't know all of them by heart, I use this cheatsheet quite a lot.

When I write posts I generally need paragraphs, [titles](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#headers), [images](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#images), [code blocks](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#code-and-syntax-highlighting) and sometimes [lists](https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet#lists).

VSCode supports Markdown preview, I recommend adding [Markdown lint extension](https://marketplace.visualstudio.com/items?itemName=DavidAnson.vscode-markdownlint) to spot errors while writing it.

[React Markdown](https://github.com/remarkjs/react-markdown) is a JavaScript library that adds a React component that renders Markdown content (test it on [CodeSandbox](https://codesandbox.io/embed/musing-jepsen-usn1d?fontsize=14&hidenavigation=1&theme=dark)):

```js
  const markdown = '**bold** and _italic_'

  <ReactMarkdown>{markdown}</ReactMarkdown>
```

## Next.js

Next.js is a framework to build React applications. It has a zero-configuration compilation and bundling setup that makes it handy to start with. I chose it because it was used in the tutorial I used, but I dug into it to understand how it works.

It requires a folder named `pages` that will contain the list of pages of the website as React components.

The first super power of Next.js is that it supports file-system routing, meaning that requests to `yourwebsite.com` will load the default `index.js` and requests to `yourwebsite.com/about` will route to `about.js`. Cool, isn't it?

Being pure React components, pages can use other components to create more or less complex structures.

Posts are created at build time, on the server, using a special page named `[postname].jsx`. They will be available at `yourwebsite.com/post/[name-of-my-awesome-post]`. Remember file-system routing? `[postname].jsx` is in `pages/post` folder!

![This project's posts folder containing 2 files, index.js and about.js, plus a post folder][pages_folder]
*This project has 2 pages (`index.js` and `about.js`) and, post folder*

This is the second power of Next.js: it supports **server-side** dynamic pages creation: at build time it scans your project for Markdown files and creates a page for each one, using `[postname].jsx` as a schema.

### server-side vs client-side rendering

It took me some time to understand what **server-side** vs **client-side** rendering meant and how Next.js works under the hood. [Rendering on the web by Jason Miller and Addy Osmani](https://developers.google.com/web/updates/2019/02/rendering-on-the-web) is a great resource to learn more.

Considering the pizza 🍕 analogy, I consider rendering as the cooking of a pizza:

- on server-side the pizza is delivered fully baked, you can eat it right away
- on client-side you get the pizza base, the toppings and the recipe (the script) to follow to put them together and bake it on your oven (aka on your browser)

Having the page delivered as static content reduces the time to ~~eat~~ load it on the browser, and makes it easier to index it on search engines. Next.js helps creating static pages using a dynamic informations such as the post list and their content.

### server-side rendering in Next.js

In my post schema page I use [getStaticProps](https://github.com/pducolin/blog/blob/main/pages/post/%5Bpostname%5D.jsx#L80) and [getStaticPaths](https://github.com/pducolin/blog/blob/main/pages/post/%5Bpostname%5D.jsx#L96) to get dynamic informations, such as the list of post names. These two functions are called by Next at **build time** and used to pre-render Javascript pages using the props returned.

By running `next build && next export` the magic happens, and next generates the HTML static pages:

![This project's out folder with build time, static html pages][out_folder]

And this is even cooler, as client's browser will download the HTML already rendered, no React manipulating the DOM.

## React + Next.js + Markdown = ❤️

Here's how to mix the React, Next.js and Markdown together to obtain a blog post page in 3 steps

1️⃣  I create a markdown blog post and save it in `posts` folder. Note how I pass title, hero image and date metadata info using the frontmatter at the top of the markdown file

```md
---
title: "My new post"
author: "poladuco"
date: "2021-02-16"
heroImage: 
  path: 
    big: /path/to/public/assets/image
    small: /path/to/public/assets/image_small
  alt: Description of the image
---

# H1 title

Mlkshk chambray bushwick subway tile occupy. Vegan meh chicharrones, cliche fam etsy viral tousled forage pork belly ramps migas coloring book banjo. Organic banh mi keytar shaman trust fund, pok pok cliche. Williamsburg shoreditch prism, green juice disrupt blog tbh retro hexagon waistcoat before they sold out biodiesel godard ethical.
```

2️⃣ I fetch the markdown content using Next.js's `getStaticProps` from `[postname].jsx`:

```js
export async function getStaticProps({ ...ctx }) {
  const { postname } = ctx.params
  const content = await import(`../../posts/${postname}.md`)
  const config = await import(`../../siteconfig.json`)
  const data = matter(content.default)
  return {
    props: {
      siteTitle: config.title,
      frontmatter: data.data,
      markdownBody: data.content
    }
  }
}
```

3️⃣ I pass the markdown body to React Markdown as child:

```jsx
<ReactMarkdown>{markdownBody}</ReactMarkdown>
```

That's it! Running:

```bash
# dev mode
yarn dev
# or prod mode
yarn build && yarn export
```

will generate one page per markdown file 🎉

Next post will be about the design, from picking colors to TailwindCss and @tailwindcss/typography. Stay tuned!

## Resources

- [Getting started with React ny Tania Rascia](https://www.taniarascia.com/getting-started-with-react/)
- [Building a markdown blog with Next 9.4 and Netlify by Cassidy Williams](https://www.netlify.com/blog/2020/05/04/building-a-markdown-blog-with-next-9.4-and-netlify/)
- [Rendering on the web by Jason Miller and Addy Osmani](https://developers.google.com/web/updates/2019/02/rendering-on-the-web)

[pages_folder]: https://raw.githubusercontent.com/pducolin/blog/main/public/assets/images/nextjs_pages.webp "This project has 2 pages (`index.js` and `about.js`)"
[out_folder]: https://raw.githubusercontent.com/pducolin/blog/main/public/assets/images/build_and_export.webp "This project out folder contains all the pages created at build time"
[pizza]: https://raw.githubusercontent.com/pducolin/blog/main/public/assets/images/pizza.webp "React components are like ingredients in a recipe"


Making of a blog: Next ❤️ Markdown


What do software development and cooking have in common? They are both my passions. They are two activities that are helping me a lot coping with Coronacene.

Cooking have recipes and ingredients list. We can document tech project can and describe them to reproduce them. I recently decided to make my own blog, starting by buying my own domain. It took me one year from that day to find the energy to actually develop it. I kept track of the journey to share with others willing to ~~make pasta~~ create their blog.

## Ingredients

📃 The content:

- [React](https://reactjs.org/)
- [Next.js](https://nextjs.org/)
- [React Markdown](https://github.com/remarkjs/react-markdown)

🎨 The design:

- [TailwindCss](https://tailwindcss.com/)
- [@tailwindcss/typography](@tailwindcss/typography)

📈 Analytics:

- [microanalytics](https://microanalytics.io)

🚚 Importing my articles from Medium:

- [medium exporter](https://github.com/xdamman/mediumexporter)

🎯 Centering a div:

- [Css Tricks](https://css-tricks.com/)

🚀 Deployment:

- [Netlify](https://www.netlify.com/)

In the following articles I will share in details how I mixed all of the above to create this website. Stay tuned!


Making of a blog: an intro


I am a woman. I am a developer. I’ve been working in tech for 11 years. I started working as a developer in Italy, and after 6 years I moved to Paris to pursue my ambition of becoming a technical leader. Two years ago I had the opportunity to face the challenge I had been waiting for: I got offered a Tech Lead role at Dashlane.

At Dashlane, a Tech Lead coordinates technical tasks such as evaluating the feasibility, cost, and general architecture for the implementation of a feature. We coordinate technical communication across platforms and ensure junior developers are properly onboarded to technical projects.

As soon as I secured the title that I was aiming at, I started freaking out. It was my first time in this role, and I didn’t know where to start. I was named tech lead in a team where I had joined just 6 months before, with talented and more experienced people. Moreover, I was taking over the role from a colleague that was still part of the team.

My impostor syndrome flared up with a vengeance. And that led me to a series of mistakes and misconceptions over my role-mistakes that I believe made me a better tech lead today. These are few of the tips I would tell myself if I could turn back time.

I recently shared them during [a webinar for 50inTech](https://www.youtube.com/watch?v=5wzcaPSFyvU).

## Trust your team

![Photo by [Isaiah Rustad](https://unsplash.com/@isaiahrustad?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/12840/0*M3-Wqigmfz22Wma8)*Photo by [Isaiah Rustad](https://unsplash.com/@isaiahrustad?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*

One of the skills that got me into this role was my vocality. I have always spoken up, stood up for my ideas, and pushed to reach the finish line.

My first mistake was to think that as a tech lead I was **expected** to keep pushing for ***my* ideas***.* To be the expert in the room. To always come up with the best solution. My imposter syndrome played a big role in this misconception, whispering that I was not worthy to be in my role. And that made me try even harder to be the one with the best idea-always.

A mentor once told me I was a leader because I was a control freak. But once you become a leader, you need to let it go. Loosen your control. Listen and trust your team. And that put me out of my comfort zone.

I learned the lesson the hard way: one of my senior colleagues wanted to test a technology I didn’t like. He had to ping me for months before I finally let him work on a proof of concept. And it worked. I put both of us in an awkward situation and let him feel unheard. That taught me to listen more carefully to my team, and to always criticize my own ideas. In tech it’s hard to find a perfect solution, there are always pros and cons. Learning to find both strong and weak points is hard but will improve collaboration within your team. Showing the vulnerability in your thoughts is a way to ensure [psychological safety](https://www.youtube.com/watch?v=LhoLuui9gX8) and will let your less vocal team members feel comfortable with coming with alternatives. And that’s the way to the best solution.

## Let your team fly

Second lesson, don’t be the explorer; encourage your team to explore. My first idea of my role was to run all the investigation, solve all the unknown, and prepare straightforward tasks for my team. As much as my Product Manager liked this, I was taking away all the fun of exploring the unknown from my team. Not all devs are comfortable with it, but if you have what [Kim Scott in “Radical Candor”](https://www.radicalcandor.com/) calls “superstars,” you have to share the fun with your team. It’s hard, but that is what a Tech Lead does. And throughout it all, you will still be there to learn with them during the research. Be there for your team, mentor them and explore with them. Stoking the passion is part of your role.

## Be a filter

![Schema of you as a filter between inputs and the team](https://cdn-images-1.medium.com/max/2000/0*HDPiZgZC4CVRvwzE.png)

Third tip, keep your steam out of your team. Becoming a Tech Lead to me meant being a buffer between the inside and the outside of the team:

* Communicating and dealing with stakeholders pressure will need your energy

* A new developer joining the team, having a hard time onboarding and aligning with team rituals and habits will need your energy

* That discussion on architectures will need your energy

Briefly, your energy will be consumed, and that will be a source of stress. Try not to expose your team to your stress; filter sources of pressure. Address your concerns and discuss transparently with stakeholders when you think processes can improve or when you are not aligned with plans. Giving constructive feedback to my managers is an exercise that put me out of my comfort zone, but that helped to build a strong relationship of trust. Taking care of yourself will help you have a consistent mood in front of your team. Do not hesitate to take breaks and speak up when you feel tired, and avoid closing your laptop violently during a meeting because you received a message on Slack you didn’t like-this will scare the team! And you need your team to feel safe and supported.

## Learn to say no

![Photo by [Daniel Herron](https://unsplash.com/@herrond?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)](https://cdn-images-1.medium.com/max/8642/0*PH-GzZXGrk_irHFg)*Photo by [Daniel Herron](https://unsplash.com/@herrond?utm_source=medium&utm_medium=referral) on [Unsplash](https://unsplash.com?utm_source=medium&utm_medium=referral)*

Don’t take on every single job that is asked of you. When you lead by example working overtime to help the team complete their job, your example will be wrong. Take on boring tasks, and find out why there’s extra work to do, as there might be a process issue. Discuss with your agile coach, see how you can improve the flow, and take time for yourself. Leading by example means showing that you care for your team by caring for yourself. Your team needs to know that you’re ready to get your hands dirty, but that you respect personal time-starting with yours.

## Reach out to communities

![Speaking at QueerJS Paris 2019](https://cdn-images-1.medium.com/max/2048/0*_EL3c6Cx3e9Ywsmj.jpg)

The most important thing to me is bringing passion and enthusiasm. To do that I go to conferences and participate to local meetups. I have never come back from a conference without new ideas to implement. At C++ Italia I found out about [WinDbg Preview](https://docs.microsoft.com/en-us/windows-hardware/drivers/debugger/debugging-using-windbg-preview) and time travel debugging — that became my first ever meetup talk and a [blog post](https://blog.dashlane.com/how-to-find-fix-bugs-in-commercial-software/). At React Finland I first heard about design systems-and since then I pushed to implement one at Dashlane. Go to conferences, be a speaker, and encourage your team to do the same. Start from local meetups. It will be source of inspiration, because other speakers will bring their passion, too. I also recently found Twitter as a great source of tech news and awesome people. It’s thanks to Twitter that I discovered QueerJS, a wonderful community that I am now proudly a part of.

## In conclusion

These are the lessons I learnt during my first steps as a tech lead. I love the mix of people and technical skills that it requires, and I’m grateful for the talented and thoughtful team that supported me during my learning on the field. The best of it is that I continuously learn from everyone. My impostor syndrome is still something I’m working on, but working for a company that encourages sharing vulnerability from the top down helps, as does being surrounded by inspiring women. WiMLDS, Ladies of Code, and QueerJS helped me meet wonderful people that share the same fight. And in this fight, unity is strength.

Did you find these tips useful? Do you have any other that helped you? Reach me on Twitter at [@PolaDuco](https://twitter.com/poladuco), I’ll be glad to share.


poladuco.com

Sharing my enthusiasm about tech