SE Internship Log[0]
Tags: beginners, a11ly, typescript
Published: 2021-07-26 06:50:10

---
title: SE Internship Log[0]
published: true
description: Let's talk type-only imports and exports, accessibility and design systems, a little bit on confidence and asking for feedback.
tags: beginner, a11ly, typescript
canonical_url: https://ruheni.dev/writing/se-internship-log-0/
cover_image: https://dev-to-uploads.s3.amazonaws.com/uploads/articles/h5s0qk6vewwke0zey3ja.jpg
series: Software Engineering Internship Log
---

Hello there internet stranger, 👋🏽

Software engineering can be daunting. This may be true if it's your first time working as a software engineer.

For the summer of 2021, I'll be interning in one of the engineering teams at [Prisma](https://www.prisma.io). I'll share a summary of my learning experience – technical and soft skills – on a weekly basis for a number of reasons. 

One, this is a great opportunity to document my learning experience. This would also serve as a reminder to my future self or whoever stumbles on this article.

Two, if you happen to doubt yourself, I hope you find some comfort that you're not alone. We're all in this together and true growth takes time. 🙂

## Technical skills

### Type-Only imports and exports

This week, I learned about [type-only imports and exports](https://www.typescriptlang.org/docs/handbook/release-notes/typescript-3-8.html#type-only-imports-and-export). It was introduced in TypeScript version 3.8.

Type-only imports and exports let the TypeScript compiler know that you're only interested in type declarations. The type-declarations won't be included in the build output. 

This feature is be useful in development when you're only interested in inferring types from a library but not shipping it in your application bundle.

The syntax would resemble something like this in your application:

```ts
// type-only import
import types { Request, Response } from 'express';
import express from 'express';

const app = express()

app.get('/', (req: Request, res: Response) => {/** logic here */})

// type-only export
export type { Request, Response };
```


### Design systems

Building good and reusable components is hard. The complexity of components grow over time with changing product requirements.

When you're building your frontend application, you may have two choices – adopt an existing design system/ styling library such as Bootstrap and Bulma or design and build the components on your own.

Adopting an existing system offers the advantage of not worrying about styling. The downside is that, when your application will require a custom component, building it to match the existing style may be _a little_ tricky. Plus, there's the "Bootstrap effect" and your application may be bland because it will resemble many sites on the internet.

Enter design systems! Now this is not easy, but definitely makes your application, website, web app stand out from the rest. A number of factors to be considered include theming, typography, layouts, icons, internationalization(i18n) and most importantly __accessibility__.

![Inclusion and Accessibility for all](https://media.giphy.com/media/WU0J9RYTNjKa6XrqB3/giphy.gif)

#### Accessibility

According to [MDN](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility), accessibility is the practice of making websites/ applications usable by as many people as possible. This includes people with disabilities – cognitive, mobility, hearing, and visual impairments. Sometimes we assume our users will be like us and accessibility becomes an afterthought. It happens, but this is a grave mistake that would hurt your users.

The design and development process should conform to the [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/). It states how to make your content more accessible and design guidelines when building an application. For example, making input fields, dialogs, and menus keyboard accessible.

[React-Aria](https://react-spectrum.adobe.com/react-aria/index.html) provides a set of React hooks that allow you to add behavior and interaction in your React components. It follows the [WAI-ARIA Authoring practices](https://www.w3.org/TR/wai-aria-practices-1.2/) that provides accessibility out of the box. 

> Note: The Adobe team built react-aria and use it in their design system – [react spectrum](https://react-spectrum.adobe.com/react-spectrum/index.html).

If you're looking to build a design system, react-aria will enable you to build accessible-first components. It doesn't ship with any styling, giving you the freedom to explore your artistic side. 😜

## Soft Skills

### Be confident - don't put yourself down

In the software engineering field, it's common to experience Imposter Syndrome. The feeling that you're not good enough or don't deserve what you get. You may also feel overwhelmed from every once in a while. And it's okay.

Despite your background and level of experience, everyone has something to offer. Be you and your team will appreciate that. Remember not to compare yourself with others and be open to learning and taking up any kind of task. That's how you'll grow.

> Don't compare yourself with other people; compare yourself with who you were yesterday
>
> – Jordan Peterson

You got this. 💪🏾

### Asking for feedback

Candid feedback is good. Feedback from a team member or manager will help you evaluate your growth, understand your weaknesses, and develop goals to grow your career.

1:1s with your manager can help you get on the same page with your manager on goals, overcome the daunting feeling when you're new, and motivate you.

## What comes next?

I have no idea. Could be breaking prod, dropping all tables... it's all uncertain. I look forward to learning more and sharing it with you folks. 

Till next week. ✌🏽

_Cover photo by <a href="https://unsplash.com/@bozhstudio?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Vadim Bozhko</a> on <a href="https://unsplash.com/s/photos/note-taking?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>_