JavaScript

JavaScript

Resilient Web Tips

Posted on by djbrensinger

Whether you use a computer, phone, table or some other device to access the Internet, you expect it to work. Sometimes things can break. Your connection is slow. Images don’t load. They are using a third-party tool that is having their own issues with the Internet. What can you do? Wait. Try again. Come back later to see if they fixed it.

Resilient Web Tips
Image by 3D Animation Production Company from Pixabay

The Internet provides information to users. By allowing them to use, whatever tools they wish. This feature makes the web resilient or fault tolerant.

What is a resilient website?

Being fault tolerant or resilient is part of the how the web works. HTML and CSS are the simplest tools for building a website. If errors are in either the HTML or CSS, the browser skips the errors and loads the page anyway. It may not look the way you want, but people can read the information.

Other programming tools like JavaScript don’t have built in fault or error tolerance. To make your code more resilient, you have to handle errors and missing information.

What can you do?

1. Start with the basics

Use HTML and CSS. HTML is the foundation of the web. You can build a website with HTML only and have it work. CSS allows you to use new features and older browsers ignore what they don’t understand. The more things we add to our web apps, the more they affect user experience. site performance and accessibility.

2. Pick the right framework for the job

JavaScript can enhance the user experience. It can also slow the site performance down. JavaScript Frameworks allow you to build things that you can’t using HTML and CSS. Before you decide to use a framework, you need to ask if you really need it. Or can you use Vanilla JavaScript instead? Consider adding less to your next project.

3. Prevent errors and make them easy to fix

Lot of things can break on the web. Your network connection fails. You clicked on the wrong thing. Or something else breaks behind the scenes. Web developers can build their web apps to prevent errors and make them easy for the user to fix. When you use JavaScript, you need strategies for making a resilient UI. Callum Hart shows you how to build a resilient JavaScript UI.

Where can I learn more about making resilient websites?

Jeremy Keith wrote Resilient Web Design. A book that gives you ideas and approaches on how to build a more resilient web.

Getting Started with JavaScript Accessibility

Posted on by djbrensinger

Accessibility means making your content as available to as many people as possible. You don’t know who visits your content. What browsers they use or how fast their internet connection is. You can build an accessible website with JavaScript You need to keep these considerations in mind.

Getting Started with JavaScript Accessibility
Image by Daniel Agrelo from Pixabay

JavaScript can be necessary

Sometimes, a no JavaScript solution may work. Other times, you may find that JavaScript helps to improve accessibility. It depends on what you want to do. Sara Soueidan wrote about her experience with building a tooltip without JavaScript. She found that it was harder than she thought.

Many people use a keyboard to surf the web. To navigate by keyboard, you jump from one focusable element to the next. You can start by using the tab key to move from one element to the next.

Which elements are focusable? HTML has interactive elements with built in focusability. Elements like text fields, buttons and select lists. You can navigate them by keyboard automatically.

Sometimes, we use HTML elements like <p>, <h2> or <div> to create custom interactive components. If you don’t make these elements focusable, this creates problems for keyboard users. The tab index attribute solves this problem by making a non-focusable element focusable.

Use the right amount of JavaScript

The problem starts when you rely on too much JavaScript. HTML and CSS can do a lot of things that you used to need JavaScript for. Now, you can use HTML to build your content and supplement with JavaScript.

Use the <button> tag to create buttons. You can use <div> or <span> tags to recreate the functionality of a button. When you choose to do this, you have to write extra code to mimic the behavior of a button. It is easier to use the button tag when you need a button.

Want to know more?

Use the Accessibility Developer Guide for best practices on creating accessible websites. Or JavaScript Accessibility Best Practices.

Image by Daniel Agrelo from Pixabay

Making a JavaScript Quiz

Posted on by djbrensinger

People like to take quizzes for fun. Making a JavaScript quiz can be a fun challenge. Pick a topic, collect questions and build the quiz app. You can write one in any web development language you prefer. I wanted to create one in JavaScript.

Making a JavaScript Quiz with chocolate as the topic
Photo by Daniel Fazio on Unsplash

What do you need to create a quiz in JavaScript?

  • A quiz topic. I love to eat chocolate. Chocolate is a fun quiz topic. I compiled a list of questions on chocolate.
  • A web app. I chose to build it using HTML, CSS and of course, JavaScript.

Other requirements

I wanted to use FlexBox for the layout. Plus a counter that shows you what question you are on. I included a photo of chocolate as well.

Chocolate Quiz showing first question

Building the app

The structure for a quiz is simple. It should display a question, a list of answers and track the number of questions that you get right. Then, it shows you summary of how well you did at the end. Plus, it should give you the option to try again.

I started with a simple quiz tutorial and modified it. First, I edited the code to include my questions on chocolate. Then, I looked at a quiz example with a timer and modified my code to add question counter.

Finally, I updated the code to include the chocolate photo into the results. It required adding one line of code.

<img src="images/60-seconds-of-love-sr2QGGnzy8k-unsplash-700.jpg" alt="amul chocolate" class="quiz-image" />

I wanted to add a sticky footer to the bottom of the web app. The web page uses FlexBox. I need to modify the layout to create the footer using FlexBox. CSS-Tricks’ FlexBox option fit well with the app design.

CSS Gradients

I wanted to use a gradient for the background. You can either use a CSS gradient generator to create it. Or use one created by designers. Gradient Hunt lets you choose from a selection of pre-made gradients.

What to do differently

A quiz on chocolate needs more photos of it. The design would need to show more chocolate as you move through the quiz. Next, I would like to show chocolate facts with each question. Each question has to have four answers; no true or false. I would change it so I can add true or false questions.

If you like chocolate and want to take a quiz, try out this Chocolate Quiz.

Creating a simple weather app with Open Weather API

Posted on by djbrensinger

How do you get the weather? You could use an app or create your own. First, you need a way to get weather data. You can use an Application Programming Interface to get the data that you need.

Creating a simple weather app with Open Weather API

Where can you find APIs to use in your projects? Try ProgrammableWeb. It is an API directory that lets you find the right API for your project. I found a weather API called Open Weather. Open Weather allows you to get the current weather data, hourly or daily forecast and more.

With Open Weather, I created a simple weather app. It gets the current temperature, daily forecast (highs and lows) and weather conditions. Then, it tells you if the weather was right for riding a bike.

Getting Started

Before writing any code, I looked at Open Weather’s documentation. It explains how to use their API. They include examples using different programming languages like JavaScript. These examples are helpful were helpful to learn what I could do with the API.

On their examples’ page, I found Weather.js. Weather.js fetches data from Open Weather for you. It makes it easy to get weather information from Open Weather.

Building the App

Before building the app, I researched other weather apps to get an idea of what I wanted mine to look like. Then, I sketched out an idea on paper.

I chose to use HTML, CSS and JavaScript. Since I am familiar with Bootstrap, I used it as well. I built my prototype with Bootstrap’s starter template. Then, I wrote my own JavaScript file to fetch data from Open Weather using Weather.js.

Open Weather has weather icons. Weather.js doesn’t use those icons. I looked at the JavaScript and wrote code to get the icons.


Weather.Current.prototype.icon = function () {
  return this.data.list[0].weather[0].icon;
}

Now, my app shows the current and forecast temperatures, weather icon and conditions.

Bike Weather App Screenshot

What to do differently

Open Weather returns weather information for a specific location. Instead of hardcoding the location, I would use the location of the browser. Right now, I used Bootstrap for the UI. I would use a different tool for handling layout like FlexBox or CSS Grid.

Notes on JavaScript Frameworks

Posted on by djbrensinger

A framework is a standard way to build and deploy applications. It provides code libraries, tool sets, apis and more. JavaScript frameworks make it easier and fun for developers to write code.

Notes on JavaScript Frameworks
Image by Alltechbuzz from Pixabay

If you build apps in JS, you have different frameworks to choose from. React, Vue and Angular are three popular choices. How do you choose? It depends. If you are working on a side project, you get to choose. When you work for a company, the choice may be made for you.

In the Ladybug Podcast entitled React, Vue && Angular, Oh My!, Kelly Vaughn, Ali Spitel and Emma Bostian share which frameworks they like and when to use them. For side projects, you may want to consider Vue or React. React is flexible and allows you to interact with other libraries and frameworks. When you need this type of flexibility, React is a good choice. If you are working on an Enterprise App with a team, Angular is the better choice.

If you have a framework that works for you, why switch to something else?

“Frameworks are not tools for organizing your code, they are tools for organizing your mind.” – Rich Harris

Building applications with Svelte

Svelte is a tool for building fast, small web applications using languages that you already know – HTML, CSS and JavaScript. It is similar to JavaScript frameworks like React and Vue. The difference is the type of code you write. Svelte converts your code into Vanilla JavaScript at build time instead of interpreting it at run time.

With Svelte, you can build an entire app or slowly add it to an existing codebase. Also, you can create components as standalone packages that work anywhere without depending on a conventional framework.

Rethinking Reactivity in JavaScript and Apps

Which framework is right for you? The one that works for you.

Image by Alltechbuzz from Pixabay