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.
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.
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
3. Prevent errors and make them easy to fix
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.
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 <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.
What are web components?
Web components are a set of web technologies that allow you to create custom reusable HTML elements. These elements are not dependent on using a specific framework. You can use them without having to load a framework like React or Angular.
To build a web component, you can use these three technologies:
Want to create your own components?
Check out these tools and resources for building your own web components.
What is a coding style? It is the way your code looks. The way you learned how to code, the tools and languages that influenced your personal style. Your style is influence by the many decisions that you make while writing code. If you work on a team, the team has its own standards that also influence how you write code.
Code is the way you communicate with other developers. To make sure that your code is understandable to other, you need to focus on writing code that is consistent and readable.
How do you make your code understandable?
Pick a way of writing and organizing your code. You’ll want to decide:
Tabs or spaces for indentation
A naming convention for variables and functions
How much white space you are going to use
If you have trouble deciding, look at coding style guides for suggestions.
Code is written for both computers and people to read. You want your code to communicate what it does. Remember, you won’t always be the person maintaining your code. You want your code to be readable and maintainable by your future self or another developer.
What can you do to make your code readable?
Pick a coding style guide for the language that you are using and follow it. By following it, you can focus on writing the code not formatting it.
What are browser dev tools?
Debugging can be a slow and challenging. If you use Chrome to develop, you may find that you can’t use the same tool in another browser. This can be frustrating when solving problems.
Can I DevTools?
Can I DevTools is a website by Pankaj Parashar that is similar to Can I use? It shows and compares dev tools. You can quickly see if a browser supports the dev tool you need.
More DevTools Tips
DevTools has many useful features and shortcuts. It is hard to learn them all. Start with DevTools Debugging Tips and Shortcuts to learn some of the useful features for debugging in Chrome, Firefox, Edge and Safari.
If you want to know how to do something in DevTools, check out DevToolsTips. You’ll find tips on how to empty the cache and do a hard reset, copy and elements style and debug unwanted scrollbars.