DEV Community: Fred Hawk

TypeScript beginnings

Fred Hawk — Sun, 17 May 2020 00:00:00 +0000

Who is this for?

I’m writing this for me and other beginners. Prior knowledge of JavaScript is good if you want to follow along in this post.

What is TypeScript?

Typescript is a superset of JavaScript. What does that mean? It means it has all the features of JavaScript and some extras.

Extras like types and it implements upcoming features that are coming to JavaScript before it arrives. So you can use future features now. It uses the extension .ts. It compiles down to regular JavaScript.

But the big thing is it adds types to JavaScript which otherwise doesn’t have it.

Why use it?

For me personally it gives me more confidence in my code. The same way testing does but different.

How to get started

First you will need to install TypeScript on your computer via the command line.

npm install -g typescript

Create a typescript file. Something like add.ts

function add(a, b) {
  return a + b
}

add(1, 2)

Then you would compile the code in the TypeScript file to a JavaScript file.

tsc add.ts

Run that in the command line to compile it.

It doesn’t look much different from a regular JavaScript file and it isn’t. We haven’t added types yet.

What are types

Types are a way to describe what kind of parameters you should expect your code to use. These can be simple primitive types or more complex custom types. In the form of interfaces.

In JavaScript, you also have primitives like strings, numbers and boolean for example. You have the same ones in TypeScript but you can also create your own types in TypeScript.

For example, you can say that a variable is an object which has certain properties. You then declare what type each property is ahead of time. So the TypeScript compiler can give you and error if you provide a value of the wrong type.

function add (a: number, b:number): number => {
  return a + b
}

add(4, 6) // Gives 10
add(4, "red") // Gives an error as it expects both arguments to be numbers.

It checks the input that it matches what the function expects the types to be. If then “b” for example was a string in this case, then the compiler will give an error.

Which types are there?

Number
String
Boolean
Symbol
Array[]
Function
Object

Function and object splits into their parts. Such as what the different values are in the parameters to the function and what it returns. Or the properties of the object.

Annotation vs inference

You can choose to annotate what type each variable should be or you can let TypeScript infer the type. That means that TypeScript decides the type based on the function you use it in. For example, the add function before. Since the function has to return a number. And it adds up the two values it stands to reason that both has to be numbers. Otherwise, the function cannot return a number.

It is better to let TypeScript infer as much as possible as it saves time and energy on the programmers part. In such a simple example as above it is better to let the system do the work for you. That way you can put your effort on more complex situations.

Types from Definitely typed

When you add packages to your project sometimes they don’t come with types. Often you can find types that the community has written for them at a place called Definitely typed. Most of the time you can install the types by doing “npm install @types/packagename”. But sometimes you will have to go check if there are types and the name of the package on the site.

What are interfaces?

I compare interfaces to describing the shape of your data. For instance, you have an object with properties. Then you can describe that object through an interface.

interface Person = {
  firstName: string,
  lastName: string,
  age: number,
  hometown: {
    lat: number,
    lng: number,
  }
}

const obj = {
  firstName: "Harry",
  lastName: "Potter",
  age: 32,
  hometown: {
    lat: 12.4224,
    lng: 84.2342,
  }
}

function getFullName (personObj: Person) {
  return `${personObj.firstName} ${personObj.lastName}`
}

const fullName = getFullName(obj)

It tells the getFullName function the shape of the personObj that it will receive. I have found that describing data like this helps my mental model of my program. Especially when it gets more complex.

What are Enums and when to use them?

Enums are a list of constants that you set up ahead of time. If you have a map where the only directions are up, down, left, right. Then you can create an enum of that list called Direction. Then in a function that takes a direction you type one of the inputs as the enum Direction. That means the input can only be one of those four.

enum Direction {
  Up = "UP",
  Down = "DOWN",
  Left = "LEFT",
  Right = "RIGHT",
}

function move(direction: Direction): void {
  point.direction + 1
}

move(Direction.Up)

This is an example of a string enum but there are other versions of it.

For those of you that have used something like ReduxJS, this is like how you do naming of actions. When using TypeScript you would use an enum instead.

Classes and TypeScript

Classes in TypeScript are the same as the class syntax in JavaScript. It is like the class based object-oriented programming that many uses in Java or C#. I won’t get into explaining it but for further reading please check out classes in TypeScript. It explains classes for both JavaScript and TypeScript.

Interfaces vs abstract classes

One part of classes in TypeScript that is not in JavaScript are abstract classes.

Abstract classes are base classes that other classes can extend from. You cannot instantiate them.

Interfaces describe what properties and methods you can implement. But doesn’t explain how those methods should work.

Abstract classes not only describe what you can implement. But also how the methods should work.

interface InterfaceA {
  method_1(): void
  method_2(): string
}
// vs
abstract class ClassA {
  abstract method_1() // a method with no implementation
  method_2() {
    // a method with implementation
    // do something
  }
}

Do you have to use classes?

You can use as much or as little of TypeScripts features as you want. If you do not want to use classes you do not have to.

What are generics?

Generics are types that you would use when you do not know the type that the function provides. But for example, you do know that the function will return a value of the same type..

Example.

function general(item: number): number {
  return item
}

What if the function should handle cases where it provides a number or a string and you do not know what it will be?

function general(item: number | string): number | string {
  return item
}

This would work.

But what about the cases where it needs to be so general that it can accept any type of item?

function general(item: any): any {
  return item
}

We should avoid any as much as possible. So how would we solve this? With generics.

function general<T>(item: T): T {
  return item
}

The T in this example represent a generic Type. T for type. It doesn’t have to be T, it can be anything but the convention is usually T for Type and K for key.

What means is that when we call the function we decide what type it should be.

Decorators

Decorators are a more advanced topic than the others and I won’t go deep into it. They are for changing functionality of a class, method, accessor, property or parameter.

You will need to set the flag “experimentalDecorators” to true in your tsconfig to use them. They are in a proposal in JavaScript as well at the moment. So an experimental feature still.

They are functions that wrap whatever you are decorating.

Decorators look like this @expression. You write them on the line above what they decorate.

For example:

// Decorator function
function bob() {
  console.log("my name is bob")
  return function(target, propertyKey: string, descriptor: PropertyDescriptor) {
    console.log("bob(): called")
  }
}

// Decorating the method
class George {
  @bob()
  method() {
    console.log("my name is George")
  }
}

// Calling it
new George().method()

// Logged in console:
// my name is bob
// bob(): called
// my name is George

This is just one example of how to use decorators. I do not tend to use them, but they give a sense of easy to read about them.

That is all for now.

Modals, modals, modals!

Fred Hawk — Sun, 08 Mar 2020 00:00:00 +0000

What are modals?

Modals are these seemingly floating things that magically just take over the screen triggered by a certain action. How does that happen? What does it look like on mobile? Is it good for mobile? When is it appropriate to use? Can you animate it?

What considerations to think about when making one?

There are a some things to think about when it comes to modals. When are they a good option? They can be used any time you want the users' attention focused on one thing.

Showing a lightbox for images
Display a dialog box confirming that the user really wants to cancel their flight
Save their changes to a document
Call to actions to sign up for newsletters and similar

Those are just a few examples but I think you get the point I’m trying to make.

Other things that I was wondering about when going into this was mobile. How to handle it there? Just use a smaller box or get rid of it or what?

As it turns out there is a brilliant solution to that which I from now on I will encourage on the w3.org’s own accessibility site on the subject of dialogs and modals. They suggest that on mobile to turn it into a page that acts like any other. So no box in middle with an overlay but a full site instead. This makes it look less like a modal and more like a new page on mobile which is a nicer experience.

See the pen below.

Lets build one!

HTML

What you need is something to trigger the modal to show up. In our case it will be a simple button.

<main>
  <button class="modal_show" type="button">Show Modal</button>
</main>

Then you need an overlay section that acts like a background to focus the attention on the content.

And of course you need a dialog box to hold the content. Lastly you will want a way to close the modal in the form of a button. Don’t worry it will not be the only way to close it.

Let’s add a header and a few inputs so there is some content in the modal.

<div class="modal_overlay">
  <div
    class="modal_content"
    role="dialog"
    aria-labelledby="modal_heading"
    aria-modal="true"
  >
    <h2 id="modal_heading" class="modal_heading">Modal heading</h2>
    <div class="modal_form">
      <div class="modal_form_item">
        <label for="first_name">
          <span class="label_text">First Name:</span>
        </label>
        <input
          id="first_name"
          type="text"
          aria-describedby="first_name_desc"
        />
      </div>
      <div class="modal_form_item">
        <label for="last_name">
          <span class="label_text">Last Name:</span>
        </label>
        <input
          id="last_name"
          type="text"
          aria-describedby="last_name_desc"
        />
      </div>
    </div>
    <button type="button" class="modal_close">Close</button>
  </div>
</p>

We also want to do is add some attributes to the modal content.

role='dialog'
aria-labelledby="modal_heading"
aria-modal="true"

This adds accessibility to the modal and tells a screen reader that whatever is in the heading is what this modal is about as well as telling the screen reader that it is a modal.Aria-labelledby points to the id of modal_heading and will use that to label it.

That is all the HTML we need for a modal component.

JavaScript

First we get references to the elements we need.

const showButton = document.querySelector('.modal_show');
const closeButton = document.querySelector('.modal_close');
const modal = document.querySelector('.modal_overlay');

Now we need a function that opens and closes the modal when we take certain actions.

function toggleModal() {
  modal.classList.toggle('active')
}

This adds or removes the CSS class active based on what state it is in at the moment.

Then we need to make listeners for opening and closing

showButton.addEventListener('click', toggleModal);
closeButton.addEventListener('click', toggleModal)

We also want to be able to close the modal in other ways than the close button remember? For instance through pressing the Escape key.

So we add another listener.

document.addEventListener('keyup', e => {
  if (e.keyCode === 27 && document.querySelector('.modal_overlay.active')) {
    modal.classList.toggle('active');
  }
});

This one is tied to the document and not a button that we click.

Another way we might want to close it is if we click outside the modal. If we click on the overlay so to speak.

document.addEventListener('click', e => {
  if (e.target === document.querySelector('.modal_overlay.active')) {
    modal.classList.toggle('active');
  }
});

We check if where we have clicked is on the overlay. Then we toggle the active class on the modal and since it can only be clicked when the overlay is there it will close the modal.

Now that we can open and close it we can tie it all together with some CSS to make it work.

CSS

First we need to make the overlay look like what it should. We do this by setting the overlay and targeting the role=dialog attribute.

[role='dialog'] {
  background-color: #fff;
  min-height: 100vh;
  padding: 2rem;
}

.modal_overlay {
  position: fixed;
  overflow-y: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease;
}

@media screen and (min-width: 640px) {
  .modal_overlay {
    background: rgba(0, 0, 0, 0.3);
  }
  [role='dialog'] {
    position: absolute;
    top: 20vh;
    left: 50vw;
    transform: translateX(-50%);
    min-width: calc(640px - (15px * 2));
    min-height: auto;
    box-shadow: 0 19px 38px rgba(0, 0, 0, 0.12), 0 15px 12px rgba(0, 0, 0, 0.22);
  }
}

The media query is to position and set the size of the box on larger screens so it becomes a box and doesn’t just cover the screen when active.

On smaller screens it looks weird if there was a small box with dark overlay on an already small screen. Since it should be the focus on the screen it might as well be the only thing on the screen.

If we want it to show and close when we take certain actions we need to add a class called active that we can toggle.

The opacity property is for the transition so it fades in.

.active {
  visibility: visible;
  opacity: 1;
}

That is all we really need for it to work, but we are going to add some other base styles simply for visual purposes. To make it look better.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

main {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}

button {
  background: #63b3ed;
  border: none;
  border-radius: 5px;
  padding: 0.5rem 1rem;
  font-size: 1rem;
}

button:focus {
  background: #2b6cb0;
  color: white;
}

h2 {
  margin-bottom: 1.5rem;
}

input {
  display: block;
  width: 100%;
  margin-bottom: 1.5rem;
}

.modal_close {
  margin-top: 2rem;
}

The full code and example can be seen on CodePen

Extras

Can use dom-focus-lock package to help with “trapping” the focus inside the dialog unless you want to do that manually on your own. You will need to use JavaScript to do that.

There are also versions of it for Vue and ReactJS at the bottom of the NPM link.

What I learned from this is that there is more to it than just a box showing up magically. Especially if we want this to be accessible to as many people as possible.

And there you have it. I hope you enjoyed it.

If there is anything you think that is missing and that should be added please let me know, so I can update it.

Good resources on this:

W3.org Dialog section

Responsive grid with images or cards

Fred Hawk — Mon, 24 Feb 2020 00:00:00 +0000

The magic to make it act that way is the two css lines below.

display: grid;
grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));

Put this on the parent container and this will give you a responsive grid that adapts the columns with the size of the container.

Here is the whole code example to check out.