An easy to read dashboard has from 5-9 pieces of information on it. By combining color, fonts and icons, you can make a dashboard simple and easy to use. I found these three examples on CodePen that you can use to inspire your own designs.
Bootstrap 4 Dashboard Stats Example
Bootstrap Dashboard Indicators
When you design a dashboard, you’ll need to use different type of indictors to display information. Herman Starikov shows you how to use Bootstrap to create different indicators. He combines Font Awesome, Flexbox and CSS Animation. Herman also uses icons as decorative background elements. With CSS and Animation, your dashboard doesn’t have to be plain or boring.
Full Dashboard Design
Why use it?
JSON is readable and light weight. It requires less formatting than XML. JSON’s structure is a key-value pair format that is rendered in curly braces. You can choose to use it in a file (*.json), a string or as an object.
How do I create a JSON object?
Use curly braces to define the beginning and ending of the object
Put data in key/value pairs
Use a colon to separate the key from the value
Keys are strings
Values can numbers, strings, objects, arrays, booleans or null
Modifying the website
I tweaked the CSS to put a border on each superhero member to make it look a little more card-like.
Variable fonts is an OpenType font specification that puts different variations of a typeface into one single file instead of multiple font files for every variation that you may need. With a standard font, your visitors have to download multiple files which leads to more HTTP requests and data to their browsers. With a variable font, the file size may be about the same but you’ll have access to a much wider range of styles than currently available. For example, a font like Roboto has twelve font files which includes twelve variants. The variable font has one file and unlimited variants.
Can I Use It?
Not all browsers and operating systems support variable fonts. For example, Linux OSes need to download the latest Linux Freetype version and Macs need to use a Mac High Sierra (10.14) and Mojave.
For non-supporting browsers, you can use CSS Feature Queries to determine if it should load a standard font instead.
Why use Variable Fonts?
You can use a single font file that provides you with a wide range of widths, weights, slants and more. With less font files to download, your visitors don’t have as much to download. With a variable font, you have greater flexibility on how your text displays. You can use a wider variety of font variants to create certain affects that help define your style and voice. With most major browsers supporting this font type, you can start to use them in your next project.
Want to improve your skills as a programmer? You can solve a coding puzzle or challenge. By solving different types of coding puzzles, you can sharpen your problem-solving skills.
Why do a coding challenge?
You want to learn a new programming language. You want to practice software design. You want to keep your programing skills current. You want to get ready for a programming interview. You want to have fun completing a challenge.
What can I do with the code from my challenge?
Write a blog post and share your solution. Share your solution on Twitter and other Social Media platforms. Make it part of an app.
Where do I find them?
It depends on what type of coding challenges that you want to do. Some coding challenges are mathematical, front end or part of a competition. You may need to sign up for an account before solving the challenge.
Project Euler has a series of mathematical and computer programming challenges for you to solve. You can use your own computer and favorite coding editor to solve their problems. Then, you can post your solution on their website.
CodePen has themed challenges that help you to improve your skills by building things. You need a CodePen account to sign up.
Scotch.io Code Challenges
Daily Programmer on Reddit
Daily Programmer has 3 weekly challenges. They are easy, intermediate and hard. These challenges are open to beginners and experienced programmers. You need to join the Reddit Daily Programmer community to post your solution.
Whether you want to join a coding community or not, coding challenges can help you to learn more about programming and keep your skills sharp.
Do you play, work and learn using a computer? The way you use a computer may be harmful to your health. It can affect your posture, hands and more. When using a computer becomes painful, it can change how you use it. You may think that you need to stop programming.
To prevent that, you can focus on these 5 ways to stay healthy and keep coding.
How's your posture?
When you are coding you can get into the flow and forget about maintaining your posture. Check the way you sit or type periodically. If you need a reminder, have your computer remind you a couple times during the day.
Take regular breaks
Both your brain and body benefit from regular breaks. Depending on how you work, you many need to take a break every 45 to 90 minutes. One technique Pomodoro has you taking a 5 minute break every 25 minutes.
Optimize your workspace
When you work at a computer all day, it should suit your needs. Customize your computer to work for you. Try different type of setups. A new keyboard, mouse, chair or even a standing desk.
Moving can help you think better. Stuck on a problem, go for a walk. Find an exercise that you like to do and schedule it. By making it an appointment, your more likely to do it. Don't want to exercise alone? Get a buddy to exercise with. A buddy can help make exercise fun and make you stick to it so you don't disappoint them.
Do you know what you are drinking and eating? Most people when they get busy or into the flow reach for what is easy and available. They don't pay attention to what they eat or drink. What can you do to optimize your eating habits? Make small changes. Swap out your afternoon snack with a fruit or vegetable snack that you enjoy. Buy a water bottle that helps you to drink more water during the day.
Want to increase your productivity as a programmer? You need to optimize the way you take care of yourself and develop a plan for staying healthy. The Healthy Programmer can help you change your work habits.