Notes on JavaScript Frameworks

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

How to stay focused on your work

Have you ever been working on a project when a support issue came up? You spend time working on fixing their problem. Five minutes, one hour or even a couple hours you have it solved and fixed. Your customer is happy. You return to your programming project. Now, you can’t even remember where you left off.

How to Stay Focused On Your Work
Photo by Matthew Henry from Burst

Interruptions like support issues, coworkers asking questions or meetings can prevent you from staying focused on your work. What can you do to help concentrate on your work?

You can manage the things you can control like environment, distractions and time management.

Environment

Whether you work from home or in an office, you can control certain things about your workspace.

Chair, desk and computer

You will spend a lot of time sitting at a desk. Your chair and desk should be comfortable for you to work at. If it isn’t, ask for a different one. Consider buying cushions or pillows to help support your back. You can ask for keyboard trays and monitor risers to adjust the height of your computer monitor and keyboard. Or switch to using a standing desk.

Are you warm or cool enough?

Most offices are not comfortable for everyone. Some people are either too cold or too hot. You may want to bring in blankets, sweaters, space heaters or even a fan to make yourself comfortable.

Do you like to listen to music while you work?

Music can help you work. Choose the type of music that inspires and motivates you while you work.

Keep water handy

Water helps you stay alert and hydrated. Dehydration can affect your ability to focus. You want to drink water while you are working.

Distractions

Your phone and emails can affect your productivity. You can manage how you use your phone and how often you check your email.

Your phone

You can make your phone less distracting. Consider putting your phone in silent mode and choose to look at it durning specific times per day. Or install an app that allows you to control how you use your phone.

Emails

Emails can demand your attention. How often to you check your email? If you don’t know the answer, you make be checking it too often. Try these tips for managing your emails.

Time Management

Find a time management strategy that works for you. You can try the Pomodoro technique, Time Blocking or 80/20 rule. Each one of these strategies helps you to manage your time, stay focused on your task and limit distractions.

Staying focus throughout the day can be challenging. By managing your environment, time and distractions like your phone, you can stay focused on your tasks much easier.

Choosing fonts for your next project

Choosing fonts for your project can be a challenge. How do you pick fonts that work? The fonts that you choose can either help or distract your users. You want to pick fonts that are easy to read and fit the personality or mood you want to convey.

Choosing fonts for your next project
Photo by Alexander Andrews on Unsplash

Where do you start?

Pick fonts that match the purpose of your design
Whether you are creating a blog, tutorial, app or business website, you need to pick fonts that match the mood or personality of the project. Fonts can have distinct personalities or moods — casual, serious, playful or elegant.

Decide on a visual hierarchy

Fonts help you to design a typographic hierarchy. You decide how the fonts work together. The three levels we need to consider are primary, secondary and tertiary. The primary level is your headlines. Secondary is used for subheads, captions and pull quotes. The tertiary level is your main body text. These levels help users to scan quickly and focus on the information that they need.

Choose fonts that work with your project

No matter what type of project you are making different fonts work better than others. Fancy and decorative fonts may be a better choice on a blog than your business website.

Create contrast

Pick fonts that complement each other. Mix style, weight, size, spacing and color to achieve the desired effect. For example, pari a bold, chunky font with a tall, thin one.

Limit the number of fonts used

Try keeping the number of fonts to 2 or 3. If you design needs more, add one font at a time.

Use a font generator

A font generators can help you to pick out fonts or experiment with new ones.

Practice

Build sample pages or apps to test out different fonts to see how they work. Keep experimenting and reading blogs for suggestions on font combinations.

Read more

Programming With a Free API

What is an API? An application programming interface acts as an intermediary between your application and the API’s server. You request information from the server and it gives you information that you requested. When you get the data that you need, you can build a front-end design to display the information in a readable format.

Programming with a Free API
Photo by Flickr from Pexels

Find An API

You can use websites like Programmable Web, RapidAPI or API List. While you are evaluating APIs to use, consider whether or not you want to pay to use it. You can find free APIs for your projects.

Farmsense API

I found a free API on ProgrammableWeb called Farmsense. Farmsense provides three APIs to farmers: Day Lengths, Frost Dates and Moon Phases. I used the Moon Phases API to display the current phase of the moon.

Farmsense API Demo

Farmsense API uses the date to tell you what phase the moon is in, what percentage of full it is, how long the day is and more.

When I reviewed the AstroWidget, it shows way more information than I want. I wanted to display the current phase of the moon using HTML, JavaScript and CSS. First, I sketched out a design so that I would know what I wanted to build. Then, I read the API’s documentation. Farmsense API doesn’t require an API key. It does requires the current date.

I used JavaScript to get the current date and choose Milwaukee, WI as the location. Farmsense requires your location in longitude and latitude. To simplify, I decided to use one location.

Getting the Data From the API

How do you get data from the API? It returns the data in JSON. Instead of using the Astro-Widget’s method of retrieving the data, I used the JavaScript Fetch API to get it. The Fetch API made it simple and easy to retrieve the data and put it spots I wanted it.

The API doesn’t include images of the moon in each phase. I found icons of Moon Phases on Icons8. Then, I wrote a JavaScript function to determine the moon phase and displayed an icon image that closely matches the phase.

Screenshot of Moon Phase - Dec. 2, 2019

APIs let you work with data to create something more interesting. With HTML, CSS and JavaScript, you can create a simple user interface that retrieves data from an API. No database required for you to maintain. You can get start learning how to work with an API quickly. Have you built something fun with an API?

Make your site printable with CSS

Do your web pages look as good on paper as in your browser? When you are developing your website, you create it to look good on different devices. Then, you print it out and see how terrible it looks on paper. It prints everything out.

Make your site printable with css
Image by tookapic from Pixabay

What can you do to make it look good on paper too? You have to design for print as well. By using CSS, you can change your design to work on paper, too. The easy way is to add an additional media query for print to your CSS. Or you may want to separate it out into its own file.

What you need to create printable CSS?

  • Decide what elements need to be printed
  • Change your print styles to work with the printer
  • Adjust your design to be printable

Decide what needs to be printed

Websites have navigation bars, footers and other design elements that are necessary to use your site. When you are printing, you want only the content not the extras. To make a page printable, you need to decide which elements don’t have to be printed.

Change your print styles to work with the printer

When you print your page, you want it to fit on a page and not cut off important content in strange spots. If your page includes videos or iframes, you want to prevent them from printing as well. Sitepoint shows you how to create the perfect print stylesheet.

Adjust your design to be printable

What do you change? First, look at the font size. Is it too big? You may want to consider changing the size to fit better on paper. Next, are you using background colors on certain elements? You could change them to a different color or hide them.

Are you using a CSS Framework? The framework my impact how it looks on paper. For example, Bootstrap 3’s col-sm-* turns into a single column on paper. You want to change their settings so that the columns work they way you want on paper. Donnie Ray Jones explains how to fix Bootstrap 3 for printing.

By adding printable CSS to your site, you control how your page prints on paper. Your users will be happy it doesn’t print so many extra pages. It is easy to add to your website after you have finished developing.