Hi 👋

I want to apologize to everybody that received last week's issue twice... The corresponding AWS lambda function ran out of memory, and I had to retrigger it with increased memory (from 1GB to 2GB)... Let's cross our fingers that this is enough memory until we reach 1000 subscribers 🤞🏻😄 I further increased it to 4GB, just to be on the safe side 🙃

I think I now fixed most of the styling issues Gmail & Outlook users had with my emails. If you still encounter styling problems, reply to this email and let me know what problems you see and which email client you use. If you encounter massive styling issues, you can always view the issue online.

Styling HTML emails is such a pain... My biggest pain points:

• rgb() works partially but alpha values and whitespace syntax are not supported
• flex-direction: column has really bad email support
• Embedding SVGs is also badly supported.

Anyways: I'm still available for freelance projects, contact me if you want to work with me.

Have a nice week ☀️

Vue Tip: Typing Component Events

Watch on YouTube

To declare emits with full type inference support, we can use the defineEmits API, which is automatically available inside <script setup>:

    
<script setup>
    

    
const emit = defineEmits(['change', 'delete'])
    

    
</script>
    

defineEmits is a compiler macro only usable inside <script setup>. It does not need to be imported and is compiled away when <script setup> is processed. defineEmits provide proper type inference based on the options passed.

Using TypeScript, it is also possible to declare props and emits using pure type annotations:

    
<script setup>
    

    
const emit = defineEmits<{
    

    
  (e: 'change', id: number): void
    

    
  (e: 'delete', value: string): void
    

    
}>()
    

    
</script>
    

defineEmits can only use either runtime declaration OR type declaration. Using both at the same time will result in a compile error.

Curated Vue Content

Quote of the week

JavaScript Tip: Replace Switch Statements With Object Literals

Watch on YouTube

I'm not a big fan of JavaScript's switch statement. Its syntax is hard to remember and can cause tricky bugs if you forget to add a break statement for every case.

Let's take a look at an example:

    
const getRole = (id) => {
    

    
  switch (id) {
    

    
    case 11:
    

    
      return 'ADMIN'
    

    
    case 22:
    

    
      return 'OPERATOR'
    

    
    default:
    

    
      return 'USER'
    

    
  }
    

    
}
    

I prefer using JavaScript's object literals over switch statements as the code is faster, more readable, and less verbose.

For each case we would have in the switch statement, we need to define an object key for each case:

    
const getRole = (id) => {
    

    
  const rolesMap = {
    

    
    11: 'ADMIN',
    

    
    22: 'OPERATOR',
    

    
    33: 'USER',
    

    
  }
    

    

    

    
  return rolesMap[id]
    

    
}
    

Finally, let's handle the default case of the switch statement by adding a default key:

    
const getRole = (id) => {
    

    
  const defaultKey = 33
    

    

    

    
  const rolesMap = {
    

    
    11: 'ADMIN',
    

    
    22: 'OPERATOR',
    

    
    33: 'USER',
    

    
  }
    

    

    

    
  return rolesMap[id] ?? rolesMap[defaultKey]
    

    
}
    

We try to access the value using rolesMap[id] and use the nullish coalescing operator (??) to set the default value if the value is undefined or null.

Curated Web Development Content