TOP 5 Reasons for Switching to TypeScript

If you write front-end code, you have built a website using HTML, CSS and JavaScript. JavaScript is popular because it is easy to code and flexible. As your website add more features, you may noticed that your JavaScript gets more difficult to add new code. JavaScript doesn’t scale very well. To deal with this, you may have switched to another framework like Node or Angular JS.

Top 5 Reasons for Switching to TypeScript

TypeScript by Microsoft helps you to write JavaScript that scales. With TypeScript, you can write it and compile it into JavaScript. Your compiled code will run on any browser or JavaScript framework that supports ECMAScript 3 or greater. When you write valid TypeScript, it compiles into valid JavaScript.

Top 5 Reasons for switching to TypeScript

At the Milwaukee .Net Users Group, David Pine explained the 5 reasons why you should switch to TypeScript.

5. Compatibility

TypeScript is compatible to ECMSScript 3 and newer.

4. Tools

You can write TypeScript using popular coding tools like Visual Studio products also support TypeScript.

3. Open Source

TypeScript is open source. It is being developed on GitHub. You can look at the specification on GitHub. You can download the source code and post issues right on GitHub.

2. Type System

You can use types that you use in other programming languages like:

  • Classes
  • Interfaces
  • Abstract Classes
  • Namespaces

1. Compilation

“If it compiles, it is one step closer to working code.” – David Pine

TypeScript compiles into simple, clean JavaScript. Valid TypeScript is also valid JavaScript. With the compiled code, you can run it in any browser.

Want to see TypeScript Compiled into JavaScript?

You can go to Playland and see the TypeScript compiled into JavaScript.

TypeScript Playland Screenshot

JavaScript is every where on the web. As a developer, you have probably used and supported it in your projects. TypeScript helps you to write code using programming features that developers in other languages are used to. It creates compatible, clean JavaScript while allowing you to use the tools that your already have.

Building with a Headless CMS

Have you considered using a headless or decoupled CMS? Most websites are build using a traditional CMS. A traditional CMS gives you a way to store data, a UI to input the data and ways to display the data. You may have used a traditional CMS like Drupal or WordPress to build your website.

Building With A Headless CMS

What is a headless or decoupled CMS? The front end and content management system are separate from each other. Headless and Decoupled as similar but they are not the same. A Headless CMS manages the content and waits for the front end to do something with the content. With a Decoupled CMS, it prepares the content for delivery and figures out how it will present your content to a specific device or environment.

Why use a Headless CMS?

  • You are building a website or app that uses a framework like Angular JS, React or VueJS
  • You want to build a website with a Static Site Generator like Jekyll or Gatsby
  • You are creating a mobile app
  • You are creating content for use in different places

Where can I find a headless CMS for my next project? Headless CMS maintains a list of JAMStack content management systems. Or you can experiment with a static site generator.

What if you want to update your existing CMS to use as headless CMS?

If you are using WordPress, you have the option of using it as a headless CMS. You can use WordPress to store the content and display it using an API.

You are not required to use PHP you can use whatever language you want. JC Hiatt explains how to use react to create a headless WordPress site.

If you don’t want to update WordPress, you can use Cosmic JS. It lets you build your next modern web app with any programming language that you want.

When to use a headless CMS?

It depends on your needs and project. You may want to use a traditional CMS when you don’t have a development team and need a website that is easy to maintain. Use a headless or decoupled CMS when you have a development team and you want to create a custom interface for use with more than a website.

Improve Your UX with Microcopy

What is microcopy? It is the smallest piece of content on your website or app. Microcopy can be text-based or visual. Text-based includes buttons, calls to action, error messages and forms. Visual microcopy focuses on images and videos.

Improve Your UX With Microcopy

Microcopy needs to be easy to understand, short and draws the user in. It should guide the user and help them to understand how to use your website or app.

What can you do to improve your microcopy?

Talk to your users like a person

Does your copy sound conversational or like a marketer? If it sounds like a marketer, change the words. You want to write copy with the same words that your users use.

Use copy to guide your users

Write short and helpful sentences, not paragraphs. If you need more than 8 words to explain what the users need to do, rewrite it.

Explain errors

Nothing is more annoying than confusing or cryptic error messages. Let your users know how to fix the problem. Take the time to write simple and easy to understand error messages.

Minimize User Worries

Your microcopy should anticipate user questions. Use clear labels and descriptions in forms to minimize data entry problems. Let them know why you require certain pieces of information.

Know when to user your Brand voice

Your microcopy can use your brand voice. The trick is to know when to use it and when not to. Some situations require clear and simple language.

Want examples of good microcopy?

Goodmicrocopy.com, curated by Richard Sison, has a collection of clear, concise and sometimes quirky microcopy.

Screenshot Good Microcopy.com

When you create a website or app, the smallest bits can make your users’ experience a good one. To make their experience a good one, remember to design the smallest bits of microcopy.

4 Items to Include in a Development Tutorial

Writing a tutorial is a good way of sharing how you solved a programming problem. Programmers use tutorials to learn how to write the code for themselves instead of depending a all ready written code. Tutorials can be a quick way to learn how to do something. What do you need to write a good tutorial?

4 Items to Include in a Development Tutorial

4 Items to include in a tutorial

  • Step by step instructions
  • Screenshots
  • Code snippets
  • Version of software or tools

Step by step instructions

By providing step by step instructions, you can break the tasks down into easy and understandable pieces. Your readers will be able to follow what you learned and do it themselves.

Screenshots

Sometimes, steps aren’t enough. You need to show your reader what happens. A screenshot can show you what to expect, look for or do. A good screenshot compliments what you want your reader to do next.

Code

Make your code samples easy to copy and to understand for new and experience programmers. You can use a tool like CodePen.io to include your code. Or use one of these 4 Ways to Add Code Snippets.

Version of Software or tools

Your software and tools change over time. New versions come out. Let your reader know what version of the software that you were using.

What about video?

Not a writer? You can record a video tutorial instead of writing one. Gregg Pollack on Hackernoon collected 10 Tips to create the best worst programming tutorials. If you prefer video, keep these tips in mind so your video tutorial isn’t the worst.

Summary

Writing a tutorial can help you to understand a new concept or programming problem thoroughly. Use these items to help explain what you have learned. When you teach others, you learn new things about the concept that you are teaching.

Copywork and Learning New Code

What is Copywork? Copywork is the process of recreating an existing work as closely as possible in order to improve your own skills. Writers and painters have used this technique to learn how to get better at their chosen craft.

Copywork and Learning New Code

Painters, Writers and Copywork

How do painters learn how to paint? Painters learn their craft by copying the work of their masters. By copying their masters work, a new painter learns how to use color, perspective and other techniques that make a painting great. When you visit a museum, you may see an artist studying and copying a famous painting.

Writers and bloggers get better by copying their favorite writers. They pick out a piece of writing they like and write it down by hand. By copying your favorite writers, you learn how to choose words, what works in a story and get better at writing. You can use the practice to incorporate what you learn into your own writing.

Why write code by hand?

When you learn new code, you have two choices. Type it in by hand or copy and paste. In Learn Ruby the Hard Way, Zed A. Shaw, explains that you learn how code works by entering it by hand, not by copying and pasting. Copying and Pasting is quicker, but you don’t learn how it works. You type it in by hand, so you can learn to read, write and see how the code works.

Why Copywork?

Copywork lets you focus learning a programming language and not worry about getting the UI right. You can learn only so much from building a beginner app like a To Do List. If you want to learn what a programming language can do, the next step is to find a simple app, copy it and build it in your chosen programming language. Dave Ceddia explains how you can use copy work to learn react.

Summary

You can learn or improve your creative skills by copying an existing app. Programmers can use it to learn what they can do with a programming language. Or you can use it to learn how to build or experiment with different UIs.

Have you used copywork to improve your skills?