teleren/devto huggingface dataset:
Validate related schema attributes with Zod
Tags: todayilearned, typescript, javascript
Published: 2022-04-12 18:50:02

## Okay, if you don't known what that hell is Zod, I'll explain briefly
**Zod** is a TypeScript-first schema declaration and validation library. 
I'm using the term "schema" to broadly refer to any data type, from a simple string to a complex nested object.

**Zod** is designed to be as developer-friendly as possible. The goal is to eliminate duplicative type declarations. With Zod, you declare a validator once and **Zod** will automatically infer the static TypeScript type. It's easy to compose simpler types into complex data structures.

## Without delay and straight to the point...
![DiCaprio point to somewhere](https://media3.giphy.com/media/kd9BlRovbPOykLBMqX/giphy.gif?cid=ecf05e47wp9mbrfzixc0t3fx61mvxpufcm62ateiubgiad80&rid=giphy.gif&ct=g)
Suppose you have a field in your request that should only be validated if another field is also sent, how can I do that using [Zod](https://github.com/colinhacks/zod)?

## Piece of cake dude!
![A funny dude saying Piece of cake](https://media3.giphy.com/media/EQk6K2OzseKR2/giphy.gif?cid=ecf05e47l7gw74j0ckdq6z2q52fzg6fg4lzu2agvoved27nl&rid=giphy.gif&ct=g)
```typescript
import { z } from 'zod'

const toy = z.object({
	name: z.number().optional(),
	color: z.string().optional(),
}) 
.refine(schema => schema.color ? !!schema.name : true, {
	message: 'name is required when you send color on request'
})
```
in this case, if the color is sent through [refine](https://github.com/colinhacks/zod#refine), we can validate if we have the name in the request as well.

credits to the master [Pinoti](https://www.linkedin.com/in/gustavopinoti/) 🍻
Coverage and courage - the pillars of your codebase
Published: 2022-04-12 18:45:03

If you're going to run a marathon, you'll pace yourself and carry a bottle of water with you.

Your marathon is the software you build, and we all know good software is one that you can change. Because requirements - they change all the time. Preparing for a software marathon means preparing for continuous changes of requirements, of open source libraries, of the team's structure, and ever changing best practices.

But how do you prepare for change that you can't anticipate? The first ingredient is test coverage. Not just because you need to test the product before you ship a new version, but because you want the confidence to refactor your code, again and again. You want to see a nasty piece of code you didn't even intend to change, and change it along the way without thinking twice. It's like keeping your house tidy, every time you see something small out of place you put it back where it belongs. If you don't - in a few weeks you'll face long and tedious projects of making order, which you will postpone forever.

The second ingredient to this formula is your courage. The courage to rewrite parts of the code even though there's a pressing deadline. The courage to try out new technologies even though it means your code will have 2 ways of doing the same thing for a while. The courage to switch to a different 3rd-party provider because you realized they're not good enough, even though you just spent 2 months integrating with them. The courage to face your non-tech colleagues and stand behind your decisions that serve the long-run, and mid-run.

You have to remember that while other departments might be running sprints, your software department is running a marathon, and don't let the others set your pace for you. If you do, when you are completely out of breath and start to slow down dramatically half way through, you'll be the only one to blame for it.

Sure, not every period of time in a product development lifecycle is the same, but it's your job to make sure there are enough gaps for regrouping, refactoring, and improving the infrastructure.
The Functional, Usable, Delightful of... Chocolate
Tags: ux, design, webdev, delightful
Published: 2022-04-12 18:38:44

## <center>Functional</center>
![Slab of dark chocolate](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pgkggipn741j3oa4igdn.jpg)
<center>_Sure is chocolate!_</center>
<hr />
## <center>Usable</center>
![Chocolate bar partially wrapped in foil](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/w2z3wop93p3w2jhn5moh.jpg)
<center>Pre-divided into squares that can be easily broken off, and wrapped in foil to keep the chocolate fresh and your fingers clean.</center>
<hr />
## <center>Delightful</center>
![Chocolate Easter egg](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/i6lv4ic48xh7junir3hc.jpg)
<center>_Childhood nostalgia in the shape of an egg_</center>
My personal path to Senior developer ... and beyond!
Tags: career
Published: 2022-04-12 18:35:01

---
title: My personal path to Senior developer ... and beyond!
published: true
tags: career
canonical_url: https://danlebrero.com/2021/12/15/who-to-becoming-a-senior-developer-path-steps/
description: Yet another "how to become a senior developer" blog post
cover_image: https://danlebrero.com/images/blog/senior-dev/senior-developer.jpg
---

I have always struggled to answer the question "How do I become a senior developer?". 

It is one of these things that happened so long ago, that I barely remember when or how it happened. Age takes its toll, and I was not clever enough to be blogging back then (<i class="fas fa-long-arrow-alt-left"></i> [nudge, nudge, wink, wink](https://www.youtube.com/watch?v=CCyb70TpOiM)).

But, as I was today moving some [book notes](https://danlebrero.com/tags/book_notes/) to the blog, it dawned on me what my path was to become a senior developer. 

And it happens to be the same path that moved me to the higher echelons of the IT hierarchy.

## It all starts with books

For me, it all starts with reading a book (or books):

![Steps to become a senior developer](https://danlebrero.com/images/blog/senior-dev/steps-to-become-a-senior-developer.jpg)

Books give me enough (false) confidence to become a big mouth, to have too many opinions, and to make too many suggestions.

These suggestions translate to a boss getting the (wrong) impression that I know what I am talking about, hence being appointed to solve a hairy problem. Or maybe the boss is trying to teach me a lesson.

And once I am given the chance... OMG! The little gaps in your fake knowledge become huge chasms that you need to jump, circumvent, or fill up.

It is all blood, sweat, and tears.

But the toil nurtures the precious experience that cements your knowledge, your most valuable asset (unless your parents are rich, in which case, it is your parents).

## Only books?

No. I am sure that other people will have more efficient ways, but, distilled, the general formula is:

1. Obtain some proto-knowledge. 
2. Find the courage to speak up, to have an opinion. Remember that there is a thin line between courage and stupidity.
3. Be in an environment that will give you an opportunity. This requires both courage and forward-thinking.
4. Struggle. Be ready to be wrong. Toil.
5. Reward! Real world experience == actual knowledge.

Repeat enough times and your knowledge will become wisdom.

And don't hurry, this will require a lot of time.

## Cut the chase, what books do I have to read to become a senior software developer?

[Here](https://www.google.com/search?q=must+read+books+for+senior+software+developers) are some lists. 

For the record, I disagree with all of them.
How Console.Log() changed everything for me!
Tags: beginners, javascript, productivity, testing
Published: 2022-04-12 18:14:45

In the very beginning of my journey learning JavaScript I often wondered what the significance of console.log() was, until .. I frequently ran into errors or couldn't access a nested value. My professor often says console.log everything! Now I understand why. Life before console log was very stressful and still is, quite frankly when learning programming but it alleviates so much of the stress and the guessing. 

If you're a beginner like myself, and don't truly understand let's break this down. Console.log() is a tool used to print/log information to your console. It helps you see the output of your code, and information such as objects to help you see the path to nested objects. When you see that path in the console, it helps you map out your way of accessing that data in your code. When we write console.log what we write in the parenthesis will be displayed in the console.

I also want to clear a confusion I had when trying to understand console.log. It is not the same as return. Return is used for returning values from a function. console.log is used for debugging/informative purposes. Users see what's being returned in the UI. Your console.log(), however, is not rendered onto the webpage, it is a tool for developers that logs information in the console. 

Console.log() is all about extracting the most relevant information when debugging/logging code. It will help you be more efficient and in return save you a ton of time and stress. Console.log() is your best friend, use it and use it often.
How to receive messages in group chats using telegram bot app without full access in Telegram bot on NestJS
Tags: kaufmanbot, nestjs, telegram, groups
Published: 2022-04-12 17:56:03

## Links
https://github.com/EndyKaufman/kaufman-bot - source code of bot

https://telegram.me/DevelopKaufmanBot - current bot in telegram

## Disable privacy mode

Sequence within a BotFather chat:

You: /setprivacy

BotFather: Choose a bot to change group messages settings.

You: @your_name_bot

BotFather: 'Enable' - your bot will only receive messages that either start with the '/' symbol or mention the bot by username.

'Disable' - your bot will receive all messages that people send to groups.

Current status is: ENABLED

You: Disable

BotFather: Success! The new status is: DISABLED. /help

![Disable privacy mode](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/21v5kzgamzd4sf5hczhy.png)
Why Arduino fails to receive ACK signal?
Tags: help, arduino, python, usb
Published: 2022-04-12 17:48:20

As I asked both in:

* https://arduino.stackexchange.com/q/89324/43808
* https://www.arduino.cc/reference/en/language/functions/communication/serial/read/

I try to initiate a data dumping from a flash memory via an ACK message vbia this python script:

```
import serial
from time import sleep
import base64

def ACK():
    ser.write(0x06)
    ser.write(0xD)
    ser.write(0xA)

ser = serial.Serial('/dev/ttyACM0', baudrate=9600, timeout=1)

if not ser.isOpen():
    ser.open()

print("OPEN Serial\n")
print("READ DATA\n")
while 1:
    ACK()
    line = ser.readline()
    if(line == b""): continue;
    if(line[:1] == b'2'):
        print("DATA:")
    print(line)
    print("####")

```

The Arduino sketch is the following:

```
#define LASTBLOCK 1023
#define LASTPAGE 63
#define LASTBYTE 2111

#define PAGE_READ 0x13
#define PAGE_READ_CACHE_SEQUENCIAL 0x03
#define READ_FROM_CACHE 0x3B
#define PAGE_READ_CACHE_END 0x3F

#define PAGE_SIZE 2111 
#define BUFFER_LEN 32 

#define ACK 0x06
#define NACK 0x06


unsigned int page_to_read = 1;
unsigned int block_to_read = 1;
boolean spi_begun = false;
uint8_t bytes_index = 1;

typedef struct  {
  // Page that is transmitted
  unsigned int page;

  // Block that is transmitted
  unsigned int block;

  // A mumeric representation of the 32 byte segment that I send. 
  // I cannot send the page altogether, therefore a byte intexing is required
  uint8_t bytes_index;
  
  // Despite my buffer is 32 bytes the usable data may be less
  uint8_t length; 

  // Data buffer containing the data to be sent via serial
  byte data[BUFFER_LEN];
} usb_msg;


void sendMsg(usb_msg msg){
  byte* ptr = (byte*)&msg;
  Serial.print(0x02);
  for (size_t i = 0; i < sizeof(usb_msg); i++){
    Serial.print(*ptr >>4, HEX);
    Serial.print(*ptr & 0x0F, HEX);
    ptr++;
  }
  Serial.print(0x03);
  Serial.println();
}

bool clientAck()
{
  uint8_t incomingByte = NULL;
  digitalWrite(13,HIGH);
  do {
    uint8_t incomingByte = Serial.read();
  } while(incomingByte!=ACK);
  digitalWrite(13,LOW);
}

void setup() {
 Serial.begin(9600);
 pinMode(13,OUTPUT);
}

void loop() {
  
  // I need to reset the counts before reading any block 
  if(page_to_read > LASTPAGE){
    page_to_read = 1;
    block_to_read ++;
  }

  if(block_to_read > LASTBLOCK){
    spi_begun=false;
    return ;
  }

  if(!spi_begun){
    spi_begun=true;
  }

  clientAck();
  // Reading page there's no need for seperate function in order to avoid stack usage
  for(int bytes_to_read = PAGE_SIZE; bytes_to_read > 0; bytes_to_read-=BUFFER_LEN){
    uint8_t bytes_to_send = bytes_to_read < BUFFER_LEN ? bytes_to_read: BUFFER_LEN;
    usb_msg msg = {page_to_read, block_to_read, bytes_index, bytes_to_send, {1, 1, 1, 1, 1, 1, 1, 1, 1, 1}};
    sendMsg(msg);
    delay(100);
    bytes_index++;
  }
  
  page_to_read++;
  delay(100);
}
```

What I try to do, is to emulate the flash memory data dumping, so I can focus on interfacing the flash memory itself in a latter step (Have to do implement it in steps).

But Arduino waits forever for ACK. Any idea why?
My Journey as a student
Published: 2022-04-12 17:42:35

April 12 2022

**Background**
Before committing to the path on becoming a software engineer, I was studying electrical engineering. Then Covid-19 hit and during that downtime, I was introduced to the vast digital world where "bots" run amok and certain scams received world recognition *cough* Crypto-currencies and especially Nfts *cough*. During these last 2 years, I've learned more about how a certain aspect of the world, functions and computer science has definitely impressed me with how it has advanced since the dotcom age.


**Prelude to coding**
Anyone can code. Success in coding requires a strong mental mindset to follow logic. It is important to understand that coding is a tool for humans to _**communicate**_ with machines but the tool is also created by humans...hmm makes you think. The syntaxes for each language is comparable to the jargons that are used by lawyers, doctors, etc. We just need to accept it! (because the humans that created the coding languages made it that way)
- `cout << "Hello";`
- `console.log("Hello")`
- `<h1>Hello</h1>`
- `print("Hello")`

Above, I have listed 4 different coding languages to outputting the string-text "Hello World!" Learning that is comparable to learning:
- Hello
- 你好 (Ni hao)
- Hola
- Bonjour

Think about it - It's called a coding "language" for a reason! If you are able to understand what I have wrote so far, you can pick up a coding language too!


**Making enemies**
A coder can always use a second pair of eyes no matter how good he/she is and that is why we need to write in a clean way and use easy-to-understand variables. If others won't hate you, you might hate yourself for wasting time understanding the logic when trying to reference the code months/years later.

**This is My Blog**
This is my personal blog that will reflect my journey starting as a software developer. I will update it as I come across methods, techniques and or syntaxes that will make my code better. The reason I said it's personal is because it is something I will want to look back one day and be able to see my capacity at the time and reflect on my growth.



*disclaimer: At this time of writing, crypto and nfts have no logistic functions other than an exchange market.
Send email in reactjs using react email drag and drop editor and nodemailer on nodejs
Tags: javascript, node, tutorial, react
Published: 2022-04-12 17:36:58

Have you ever wanted an easy and simple reactjs email drag and drop editor where you can be able to design your beautiful email templates before sending out your newsletter?


That's right. In this tutorial we are going to implement a powerful but simple react email drag and drop editor where you can beautifully craft your email templates before sending out your mails without using a third party service all within your application.

In this video tutorial, we are going to implement email drag and drop editor in reactjs and send email to users with nodemailer on node js express server.

## What you will learn include;

- How to send email on node js using nodemailer

- How to design email template using  react email drag and drop editor

- How to upload files to firebase storage in reactjs using multer and nodejs

- How to send email to multiple users using nodemailer on nodejs express server.

## Looking for a demo?

A demo is worth a thousand words.

[For a demo check out this project](https://supaemaileditor.techfortified.com/)

## Interested in a video tutorial?

Checkout the video tutorial below

Don't forget to like, share and subscribe to this channel. If you have any problem, let me know down in the comment section.

{% youtube YcSvjE0fhu0 %}
Day-64 Training At Ryaz
Tags: javascript, webdev, beginners, programming
Published: 2022-04-12 17:28:37

Date:12/04/2022
Day:Tuesday

Today, I started at about at 10:30 am as I was done with the upto second project so, today I started with the third one I.e it was an pig game so, firstly the instructor go through the working of it as it is two player game and one is to roll out the die with one click and the number reflected on the dice is stored in the box of the respective player and the number of times we roll the die the points gets added up with previous score the the instructor begin with the working of dice i.e rolling of dice he instructructed as we use if else loop and various variables and after this he started explaining about switching the active player as it was used ternary operator to implement this after this he started with implementing the holding the score for current player it was implemented with adding current score with previous one then I begin with the eighth module firstly it started with section intro and after this the instructor discussed the roadmap and the a high level overview of java script. so, this way my day ended up and I got to learn new concepts.
Create toggle with tailwind and alpinejs
Published: 2022-04-12 17:19:58

I know this is pretty dry read, but it's here in case someone or future me does a google search.

If you have any question please let me know in comments

```
<!-- Role -->
<div class="my-4 mx-auto">
    <h2 class="text-xl font-bold text-gray-700 text-center w-full w-full text-center border-l-0 py-4">I
        Want to:</h2>
    <div class="flex flex-row justify-center w-full shadow-sm text-center" x-data="{ rvalue : 'student' }">
        <label for="student" class="rounded-l-md shadow-sm border-gray-300 font-bold border w-full py-2 px-4"
                :class="{'bg-violet-800 text-white' : rvalue === 'student'}">
            <div class="cursor-pointer">
                <input x-model="rvalue"
                        type="radio"
                        id="student"
                        name="role"
                        value="student"
                        class="hidden"
                        checked />Find a Teacher
            </div>
        </label>

        <label for="teacher" class="rounded-r-md border-gray-300 font-bold border border-gray-400 border-l-0 w-full py-2 px-4"
                :class="{'bg-violet-800 text-white' : rvalue === 'teacher'}">
            <div for="teacher" class="cursor-pointer">
                <input x-model="rvalue"
                        type="radio"
                        id="teacher"
                        name="role"
                        value="teacher"
                        class="hidden">Work as a Teacher
            </div>
        </label>
    </div>
</div>
```

## How it works:

1. We set a `x-data` with a default value
2. Each radio uses same `x-model` and updates value if `checked`
3. We dynamically set tailwindcss class based on value of our model

Thanks 😅
Make your Own VsCode Snippets
Tags: vscode, tutorial, beginners, productivity
Published: 2022-04-12 17:10:18

# Make your Own VsCode Snippets

Snippets are aer very useful for quickly creating code, but do you know it's more AWESOME to make one ?

## Make your own snippets in [`VsCode`](https://code.visualstudio.com/download)

    1. Open VsCode and type

<code><p>Press <kbd>Ctrl</kbd> + <kbd>Shift </kbd> + <kbd>P</kbd> to Open Command Palette in VsCode.</p></code>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7n3geyx8ervk4rbqflx6.png)

    1. type Configure User Snippets

💥 <kbd style="color: red">Enter</kbd>

    1. type Select the language you want to create snippets for
<!--make a list of languages -->
- java
- javascript
- python
- css
....
Let's <kbd> Enter</kbd> Javascript.
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ievhuzfh5fao5t39gyxn.png)
```javascript
{
    // ↓ this is name of snippet
    "Print to console": {
        // ↓ this is prefix the command will be typed to use it.
	 	"prefix": "log",
        //  ↓ this is the snippet itself, body of the snippet
	 	"body": [
            //  $1 is the placeholder for the first argument, $number defines tabindex for the snippet.
	 		"console.log('$1');",
	 		"$2"
	 	],
        //  ↓ this is the description of the snippet.
	 	"description": "Log output to console"
	 }
}
```


    1. type Save the snippet/ Close the file.
    2. Make a file index.js
    3. use the prefix to type the snippet.
    4. type log and hit enter.


### you can also add more functionality like *filename*, *<span style="color: blue">foldername</span>*, *cursor position*, to your snippets, as a adding variables to your snippets

### Read more variables in snippets from [`VsCode snippets docs.`](https://code.visualstudio.com/docs/editor/userdefinedsnippets#_variables)

## Share which snippets you are gonna create with this


Thanks for reading.
Share your snippets with everyone.
comment about topics you like.

**🤝🏾Connect me on:**
**Twitter**: 🕊️[`@Abhayprajapati_`](https://twitter.com/Abhayprajapati_)
**Github**: 🐧[`@theabhayprajapati`](https://github.com/theabhayprajapati)
**Linkedin**: 📌[`@abhayprajaapati`](https://www.linkedin.com/in/abhayprajaapati/)
**Youtube**: 📺[`@Abhayprajapati`](https://www.youtube.com/channel/UCUrQHSjXEAyboKLN_M0w0Mg)
How to create a new component in svelte using a template - svelte component scaffolding and boilerplate
Tags: frontend, tailwindcss, svelte, dx
Published: 2022-04-12 17:07:19


## Why 
Creating new components is probably one of the things you do most in svelte.

And to maximize the developer experience, you must automate every task that you do often.

**It's not just to save time, but also to avoid repetitive tasks that annoy and distract us developer.**

Here we'll learn hot to create your customized component template once and use it everytime.

## How
So imagine to write this command:

`npx t6e $name.svelte src/components name=my-component`

and get the component as you would have written it, ready into the `src/component` folder.


It's easy:

1) Create the template. Here you can find the one we use into our _svelte_ projects:
```
<script lang="ts">
  import { createEventDispatcher } from 'svelte';
  import { writable } from 'svelte/store';
  const dispatch = createEventDispatcher();
  
  const store = writable({
    hello: ""
  });
  
  
</script>

<div class="$name">
    {$store.hello}
</div>

<style lang="scss">
    .$name {
        @apply block
    }
</style>
```

2) name it `$name.svelte` and put it in a `templates` folder

3) to create your component, run 

`npx t6e templates/$name.svelte src/components name=counter`

4) you're done. A new fresh component was save in the `src/components/counter.svelte`: 
`$name` was replaced by `counter` in both the **file name** and the **file content** 

You can now re-use that template for all your components, saving hours every month.

## What is t6e?

**T6e** is an open source scaffolder, boilerplater or put simply it lets you 
create any file based on your custom templates.

We created a template for svelte above, but you can create any template and reuse it as you like with this 
small open-source tool provided by us at [butopen](https://butopen.com)

You can find **t6e** here:

[https://github.com/butopen/t6e](https://github.com/butopen/t6e)