As a developer, you spend a lot of time writing. More than writing code. You reply to emails, update bug requests and write project documentation and more. Code allows us to communicate with computers. With people, we need to use words to communicate.
Every day, we communicate with clients, users, team members and other developers. We write all kinds of different things to communicate with them. From a quick email to help them get started using our product to a full user’s guide.
"If you can’t automate it, document it. – Hila Fish
You want to write technical documentation to help reduce your work load. Technical docs help you to remember why you are doing things a certain way. You or future developers will be glad you took the time to document the choices made.
Documentation keeps your project on track
When you work on your own projects, writing becomes more important. You write documentation to help explain what your product does. How it solves your customers’ problem and how they can use it. If you like to work on many projects, documentation helps you to keep going. Simon Willison explains how to use documentation to maintain multiple projects.
Document your project quirks
Every project has its own quirks. You make choices that affect how things turn out. To help your future self or the next developer, document the following:
Choices that you make while you are working on the project
Things that bugged you
Items that aren’t clear or straight forward
Any surprises that came along
Issues or things to consider when using this tool or language feature
Have you tried a coding challenge? Coding challenges allow you to stretch you programming and design skills. You have your choice of places to find coding challenges.
You can pick coding challenges that ask you to build components or a simple app. Some of the challenges include working with an API.
The Advice Generator coding challenge on Frontend Mentor has you working with an API. This API provides you with data for displaying advice on a web page.
How I Built It
If you don’t use the cache option of no-cache, you get the small piece of advice. When you call the API which returns a random piece of advice, it doesn’t display on the web page. It is caching the data. When you use the no-cache option, fetch retrieves a random piece of advice.
The layout required centering the advice box and the dice icon for the button. To handle this, I used FlexBox to center the box and to align the button on top of the bottom of the box. You need to use a combination of absolute positioning and FlexBox to get the dice to appear where you want it.
The advice box needs to be flexible. It has to expand and contract depending on the size of the advice. FlexBox makes this easier.
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.