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.

Getting Started with using an API

You’ve heard about application programming interface. Companies like Twitter, FaceBook and Google have them. With an API, you can use it build new and interesting things.

Getting Started with an API

What is an api?

By definition, it is an application programming interface. Programmers use an api to create a new app that uses the data from another source like getting the current weather in Austin, TX.

How do I start using an API

To start learning how to integrate an API into a web project, you can use an API that provides photos as a placeholder. You could use an API like Dog CEO API to place photos of dog or other animals quickly in your design.

If you prefer, you can start with Programmable Web’s API University. The API University provides you with tips, tutorials and best practices on using and designing APIs.

Where do I find APIs?

You can find apis at Programmable Web , API List or API Hound. Or on Reddit where you can find recommendations from other programmers.

Summary

With an application programming interface, you don’t need to know the same programming language that they used to build the API. You can incorporate it into your WordPress, static website or other CMS easily. With so many APIs to choose from, you can create almost anything.

Should you build a website with a static site generator?

How do you build a website? For most developers, there were only two options to choose from. You create a website by hand coding every single page in HTML, CSS and JavaScript. Or you use a content management system like WordPress. Now, you have a third option. You can use a static site generator.

Static Site Generators

What is a static site generator?

Static websites don’t require a database. Each page displays images, videos and text. They don’t pull information from a database when you go to the page or do something on the page. You can build a static website using a text editor. A static site generator helps you to build a website quickly. It creates all of the html code for each web page. A generator lets you focus on the important part, the content, not the structure of a web page. One of the popular generators, Jekyll, lets you create websites and blogs.

Why would you want to use a static site generator?

  • Pages built in HTML load faster. They don’t have to make calls to a database in order to display a page.
  • You can control how the website looks. When you use a Content Management System (CMS), you must build your website the way the CMS wants.
  • Your website is too small for a CMS. For some projects, a CMS can be overkill. You wanted a site with 5 pages that lets people know about your business. A CMS has features that aren’t needed by this website.
  • CMS’s require continual maintenance. Your CMS may make changes to improve functionality and security. Any themes or plugins that you use may have additional updates that will need to be monitored and updated as needed.
  • Better Security. A CMS has a database, a login and other code that opens the site for attack. This can make it harder to find problems. You may have to start over by deleting everything including the database. With a static site, attackers have little or no opportunities to damage your site. They would need to gain access to your web host to damage your pages or upload malware. When that happens, you can change your password, delete the site and re-upload it again.

Why you should use a CMS instead of a static site generator?

  • Your website has a large number of pages to maintain. A CMS makes updating and changing a website quick and easy.
  • No administration. You have to know markup and generator tools in order to make a simple change.
  • Limited themes or other resources available. If you want to do something like moderate comments, you have a limited number of options. With a CMS, you can choose from readily available plugins or themes to do what you need.
  • Your client wants to update their website themselves. Static site generators currently lack an administration interface to make this easy.
  • You can’t decide which static site generator to use. With a CMS, you choose one of the popular ones: WordPress, Drupal, Joomla or Kentico. Static Site Generators come in many different flavors. You have to decide what programming language it is written, what kind of website you are creating and more in order to narrow you selection down.

How do I choose a static site generator?

You’ve decided that a static site generator is a good solution for your project. With many static site generators to choose from, which one do you chose? First, Use staticgen.com to review the Top Open-Source Static Site Generators. It allows you to sort by languages, stars, issues, forks and name.

Then, ask yourself the following questions to narrow your choices down:

  • What type of site are you going to make? Some static site generators work better for a blog.
  • What programming languages are you familiar with? You can choose from JavaScript, Ruby, Python, Go, PHP and more.
  • What templates does it use? Liquid, EJS, or Jade.
  • What type of license? MIT, BSD, or APL 2.0
  • How many people use this generator? The more popular it is, the more likely you can get help when you need it.

Summary

Is your next web project going to be built with a static site generator? A static site generator can help build a fast and functional website without the extras that a CMS needs. Static Site Generators as well as CMS’s have strengths and weaknesses that affect the design of your website. As with any web project, the type of tools you choose should work with the content you intend to put on the website and not against it.

What to learn more?

Mobile Design Typography

Content is the most important element of your website. With a wide range of mobile devices available to people, your websites and apps must be readable on all. To maintain the readability of your content, you need to consider the fonts you choose, size, contrast and line length. How do you use Mobile Design Typography to make your content responsive and readable?

Mobile Design Typography

Fonts

Not all fonts look good on a small screen. Display fonts like script fonts may look good on a desktop screen, but on mobile they can shrink down too small to read. A script font like League Font is fine for the desktop, but on mobile it can be unreadable.

League Font

What are your options?
You could increase the size of the font. At a larger size, your chosen font may be look better. Or you could replace the font with one that is readable on small devices. You have to decide if you really need to use this font in your design.

Size

Size is also important. Too small and your content is unreadable. People leave sites if they can’t read it on mobile. If you choose a size that it too large, it could dominate the content. It could take up so much space that you end up scrolling constantly while reading the page. You have to find a size that works well at that size.

Line Length

How long should a single line of text be? It depends. Readability is determined by the font, character and word spacing and the word lengths. Even the device that you are using can affect readability. A general guideline is 9 – 12 words per line. 9 – 12 words is a comfortable range for people to read. Line Length and Column Widths explains why your text should be about 9 -12 words long.

Contrast

What is contrast? Contrast is how every element in a design which includes font, size, color, line length and images works to create a good user experience. The easiest to learn is color. How do your color choices affect the design? With mobile design, you need to also think about size, font, line length, position and shapes. On Web Designer Depot, John O’Nolan explains how to fully understand contrast in design. He shows you how to use them for a better user experience.

Horizon Coworking in Madison, WI

Summary

Your content is an important element of your design, especially on mobile. When developing for mobile, consider how the font type, size, line length and contrast can effect the readability of your site. If it isn’t readable, your visitors will leave. Keep them on your site by focusing on how fonts look on mobile.

For more information on Mobile Typography, check out these articles:

Do You Need a Website Refresh or Redesign?

What do you do if your website is old or needs to change? Do you start over? Should fix what is not working for you? With a website, you have two options: refresh or redesign. Fix what you think needs an update or start over with a brand new site.
Redesign or Refresh?

Refresh or Redesign

What is a refresh? Fo example if your website was a house, a refresh would be like making over a room. To update your room, you may repaint the walls, replace a rug, curtains or even pillows and add new furniture. When you refresh your website, you leave the way the website functions and change how it looks. This may include changing the colors, fonts or even images.

What is a redesign? A redesign is where you start over. Instead of a makeover, you would tear the house down and build a new. With a website, you start over by building a new site.

When should I refresh my website?

Refresh or redesign? It depends on your needs. Why are you updating your site? Do you need to fix some small issues? Has your business changed and your website no longer reflects your brand? If you need to make small fixes, than a refresh will work for you. If you need to have it reflect how your business has changed, you want to redesign.

How do I do refresh my website?

  1. Decide what your goals for the website are.
  2. Look at your content and determine if you need to add, delete or update pages.
  3. Prioritize what you want to work on.

What are you site goals?

When looking at a redesign or refresh, you should reevaluate your site goals. Is it performing the way you expect? Does it reflect your current brand? Are there any pages that just don’t work?

Do you know what content your site has?

Audit your website by figuring out how many pages you have and what they focus on. Is each page current, out of date or needs a slight tweak? Decide which pages you want to work on, remove and update.

Prioritize

What do you want to work on first? Does your content need updating? Do you need to change the look and feel first? Decide what you want to work on and schedule how you are going to accomplish fixing or updating your site.

Summary

Your website should change to reflect who you are as a business. This means you may need to either refresh or redesign your website. What you choose to do depends on your goals. Sometimes, your may need simple fixes and refreshes your website is the best choice. Other times, you may choose to start over because it is just easier and a better way to achieve your goals.