Get Data Using JavaScript Fetch API

I was looking for a simple to get data from an API. When I found this tutorial using JavaScript Fetch and the Random User API. You use Fetch to send a simple GET request to the Random User API and provides you with JSON data of 10 random people.

Get Data Using JS Fetch API
Photo by Shopify Partners from Burst

Why manually type in code?

In Learn Ruby: The Hard Way, Zed A. Shaw, explains that you must type in the exercises by hand. It helps you to learn how to read, write and see code. By using copy and paste, you don’t learn how the code works.

How do I used this tutorial

This site is simple. I started with a simple HTML site. Then, I made some adjustments after I got the GET request working.

1. Added style to the website
I started with a simple HTML website that didn’t have much style to it. First, I added CSS code to style the images. Then, I added a header and footer to the site. I decided to stick with a black and white color scheme.

2. Changed how the API displays the data
When I first created the site, the API returns the user’s name in all lower case letters. I wanted the name to follow the format of first letter upper case and the rest lowercase for both first and last name. I modified the JavaScript to capitalize the first letter.

function capitalizeFirstLetter(string) {
    return string.charAt(0).toUpperCase() + string.slice(1);
}

The API returns the email address as text only. I wrote an additional function to change email to be an actually email link.

function createEmailAddress(string) {
    return "<a href=mailto:" + string + ">" + string + "</>";
}

3. Changed the size of the photos
In the tutorial, the photos are on the small size. I wanted them to be bigger. To learn how to do that, I went to the Random User API documentation and read how to get bigger photos. It was a simple change.

Random User API

See more about learning JSON by building a simple website.

How to plan a project?

Projects can be large or small. They can be finished in 24 hours or take months even years to complete. Whether you are working on a project for yourself or a client, you need to create a plan. Your plan can be as simple or detailed as you need it to be. A simple coding plan covers things like what I am going to make, tools I need, steps needed to complete project, sketch out your designs, plan your code and schedule time to work on it.

How To Plan a Project
Photo by Emma Matthews on Unsplash

Decide what to make

The best projects fall somewhere between things that you enjoy doing and things that allow you to learn marketable skills. If you are working on a side project or a hobby, you want to make certain that it has these elements. When you work on client projects, you may not get a project that has both. All projects can provide you with the opportunity to learn something.

Coming up with ideas for personal or side projects can be hard. By keeping a project notebook as Amie Chen does, you’ll have plenty of ideas to choose from. You can also ask your friends what problems they are having or try one of these ideas.

Pick the tools you want to use

Whether you are going to use a new framework or sketching tool, you should make sure that you have everything that you’ll need. Need new software? Install it. Photos? Download or purchase them. Make sure you have what you so you can set up your space for working on your project right away.

Plan the steps to complete your project

When you are first starting a project, it is easy to get excited about it and want to start building right away. Don’t. Plan out your project. Use a process called backwards planning. Start with your end goal. Ask yourself what you want to accomplish and write down clear steps and milestones that you need to achieve this goal. It doesn’t have to be perfect, you can revise as needed later.

What about extra things that you didn’t plan for? You may discover that you need a few extra things. if you are using an API, you may need to sign up for a developer key. Add them to your plan as you learn about them so you don’t forget to do it.

Design

Design is more than making it look pretty. It can be helpful to sketch out your designs before building an app. By sketching it out, you can decide what features to include, how people will use it and how it looks.

Plan your code

Start small. Think about the steps that the user needs to do in order to accomplish something. Break your code down into functions. By breaking it down, you make it easier to write your code.

Schedule time to build it

Look at your schedule and plan time to work on this project. You may need to stop doing less important things like watching TV.

Using SVGs in Your Web Projects

Are you using SVGs in your web projects? Scalable vector graphics can be used as background patterns, icons, logos and illustrations. They look nice and sharp at all screen resolutions. SVGs can have a small file size which helps you to keep your website size smaller and work better.

Using Svgs in your web projects
Image by Gerd Altmann from Pixabay

How do I get started?

It depends. Are you planning on creating your own or using pre-made SVGs? If you want to create your own, check out SVG on the Web. It is a practical guide for creating and manipulating scalable vector graphics. CSS-Tricks walks you through creating a simple SVG and manipulating it using CSS in Using SVG.

Where can I get SVGs to use?

  • SVG For Backgrounds lets you customize and apply a selection of backgrounds.
  • HeroPatterns has a collection of svg background patterns that you can customize for your web projects.
  • HeroIcons creates scalable vector graphic icons that you can customize with CSS.

Add Animation to Your Scalable Vector Graphics

People react and respond to movement. You can animate svgs to draw attention to a specific area. Animate your graphics with CSS or JavaScript.

You can start with the basics and learn how to use CSS to animate your graphics.

Or you can use SVGator, an online tool, that helps you animate scalable vector graphics.

If you prefer JavaScript, you can use Snap.svg, a JavaScript library, for animating your vector graphics.

How do you choose the right font?

Fonts come in all kinds of styles. With so many to choose from, it can be hard for a developer to know where to start. Your brand and voice are identifiable by your colors, photos, other design elements as well as the fonts that you choose.

How do you choose the right font?
Photo by Florian Pircher from Pixabay

Use these following tips to help select that fonts that enhance your design.

1. What type of personality matches your brand’s tone?

Are you Traditional, Reliable or Respectable? If so, you want to choose traditional fonts like Butler, Georgia or Times New Roman.

How about Contemporary, Modern or Progressive? Try modern fonts like Simplifica, Raleway or Prime.

Or are you Strong, Bold or Stable? Strong fonts like Glamour, Code or Nexa might work for you.

Maybe you want to convey Elegance, Vintage or Romance. Try handwritten script fonts like Allura, Sofia or Pinyon Script.

If those don’t fit you, you may need a more custom or unique font. Stylish fonts like Butch or Moon may work for you.

2. Is the font easy to read?

Do you have to concentrate to read the words? If you are getting exhausted trying to reading the font, then your customers will too. You want them to be able to read without any effort.

3. Does it look good in different situations?

You want to choose a font that looks no matter what you do to it. When you bold or italicized it. It should be easy to read when large and small. Some fonts look better on top of photos. Your brand colors can affect how readable the font is.

4. Do the fonts look good together?

After you have chosen the type of fonts that convey your personality, you want to pair fonts that compliment each other. You’ll need to decide how your headlines, content and calls to action will look like. Pairing fonts can be challenging. You can learn the basics for choosing fonts that fit your personality.

You can use these additional resources for pairing fonts:

Where can I get fonts?

5 CSS Frameworks For Your Next Project

What CSS Frameworks do you use? A framework like Bootstrap can be customize to suit your needs. Sometimes you have override the standard styles to get the design to work. You may want to use a framework that is flexible and doesn’t make design decisions for you. Here are 5 frameworks that you can use in your next project.

5 CSS Frameworks For Your Next Project
Photo by Shopify Partners from Burst

Pure CSS

Pure.css is small, responsive CSS framework. It allows you to easily create your own styles while providing responsive layout and common UI components. Pure.css is flexible that you can use it with other frameworks like Bootstrap without any issues. Monty Shokeen explains how you can start using [this framework] (https://www.sitepoint.com/introducing-pure-css-lightweight-responsive-framework/) in your next project.

Mini CSS

Mini.css is a minimal and responsive framework. You can quickly change the CSS file to make a custom design. It relies on CSS for the styling, so it won’t conflict with any JavaScript library that you need to use.

Bulma

Bulma is a CSS framework that is based on Flexbox. It is responsive, modular and free. Bulma is easy to learn and customize. You don’t need JavaScript to get started using this framework.

Tailwind CSS

Tailwind CSS is a different from other CSS frameworks. It provides utility classes that make it easy to rapidly build custom user interfaces. Tailwind doesn’t make design decisions for you. You can create a completely custom design without having to overriding a bunch of pre-built classes.

Materialize CSS

Materialize is a modern, responsive framework based on Material Design. You can choose to use the standard version with CSS and JavaScript or the SCSS version. With the Standard version, you can get started right away. The SCSS requires a Sass compiler.

When choosing a framework for your next project, you may want a small and minimal one or something that works with your existing styles. These 5 provide you with different options to help create a custom user experience.