Variable Fonts on the Web

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.

Variable Fonts on the Web
Photo By: Maret Hosemann

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.

Where can I see Variable Fonts in action?

You can try them out on v-fonts and Axis-Praxis.

Where can I learn more?

Coding Challenges

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.

Coding Challenges
Photo by Matthew Henry from Burst

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

Project Euler
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 Challenges

CodePen Challenges
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

Scotch.io Challenges
Scotch has monthly challenges to help you expand your skills in React, JavaScript or CSS. When you join their community, you receive the challenges by email. You can build your solutions in CodePen or CodeSandbox.

Daily Programmer on Reddit

Reddit Daily Programmer
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.

Stay healthy and keep coding

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.

Stay Healthy and Keep Coding
Photo by Matthew Henry from Burst

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.

Move more

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.

Eat better

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.

Are you a maker or mender?

A maker is a person who likes to make and create things. They like building an idea from scratch and founding startups. Most developers are makers. They enjoy the process of designing, developing, experimenting and building a minimal viable product (MVP). A mender is a person who likes to maintain a product. They help it to growth and change to meet their customers needs over time. About 10% of developers are menders. They enjoy updating, refactoring, testing and remodeling your code. You can depend on menders to help you grow and maintain your products.

Are you a maker or mender
Photo by: picjumbo_com

What kind of developer are you?

You are a maker if you:

  • Enjoy tackling a problem and creating a brand new solution
  • Like to experiment with new ideas and techniques
  • Get bored if you have to repeat the same tasks
  • Find refactoring code, fixing bugs and handling customer support requests to be boring

You are a mender if you;

  • Find refactoring code, fixing bugs and handling customer support requests to be interesting
  • Enjoy fine tuning or updating existing code
  • Get stressed if you have to tackle a new problem and build a solution from scratch
  • Like to work best without hard deadlines

Not sure? Andrea Goulet of CorgieBytes explains the difference.

Staying motivated as a maker or mender

Developers love to write code. Makers and menders are motivated by different things. To create your best code, you need to know what motivates you.

As a maker, you work the best when you can experiment, create prototypes and develop ideas under a deadline. Makers are like home builders. They design, build and move onto the next house.

Menders work best when they have a number of tasks to complete. They enjoy deep diving into the code and fixing bugs and refactoring it. Menders are like home remodelers. They tweak, rearrange and fix what it wrong with an existing house.

When you write code, you have to maintain it. You can make your code more reliable and secure. Legacy Code Rocks is a podcast for menders or anyone who has to maintain code.

Tips for Building Your Developer Portfolio

Developers like to build stuff. Apps, websites, apis or a quick little script that does something quickly and easily for you. A developer portfolio shows your best work. Whether it is a single page website or a full website with a blog, your portfolio shows your unique style and approach to solving problems.

Tips For Building Your Developer Portfolio
Photo by: Fancycrave1

Tips for building your portfolio

1. Start with a plan
Treat your portfolio like it is a project for a client or your employer. Plan it out. Think about what pages you want to create, what projects you are going to include and additional resources like screenshots you are going to need. Write your copy and sketch out your design. You don’t have to be a graphic designer to showcase your best work.

2. Consider what tools you use
You can build your portfolio with whatever tools you want. Whether you decide to build it from scratch or use an existing framework, don’t choose to use a framework or technology because you can. You want to make it easy for you to maintain.

3. Buy your own domain name
Why? With your own domain name, you control how it looks and what you can do with it. If you want to create new projects like an app or a tutorial website, you can. Your own domain name makes it easier for potential clients or employers to find you.

4. Make sure it works on mobile
You want your website to be readable and look good on as many platforms as possible. There are different ways to test your website for mobile from resizing your browser to testing on a mobile device. Choose the method that works best for you.

5. Choose your best work
Don’t show everything that you have built. Choose projects that demonstrate your current skills. If you develop mobile applications, don’t include projects from when you created websites for WordPress. Be picky. Show the pieces that reflect who you currently are.

See how other developers created their portfolios

When building your first one or updating an old one, it helps to see what other developers have done. Be inspired by other developers.

  • Brent Krueger is a freelance web designer and developer. He uses a beautiful photo of the state capitol building in Madison, WI in his website’s header.
  • Christina Richardson is a UX Researcher and Designer. She has a one page portfolio with a timeline of her career in UX and an infographic of her design process.
  • Jess Johnson is a full stack developer. He uses great typography and a simple color scheme.
  • Ali Spitel is a developer. Her website has a minimalist design with simple navigation and a great use of color.
  • Kyle Ledbetter is a designer and developer. He uses a mix of background colors and images for each section. In his About, he uses the states as subtle background images.