Getting Started With Web Components

Everyone has their favorite tools, languages and JavaScript frameworks. JavaScript frameworks allow you to create components. Which you can reuse throughout your apps. What if you can’t use a specific framework? You can use Vanilla JavaScript to build web components.

Geting Started With Web Components
Photo by Pixabay from Pexels

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:

  • Custom Elements: A JavaScript API that allows you to create custom elements which you can use like HTML tags.
  • Shadow DOM: The Shadow DOM API provides a way to attach a hidden and separate Document Object Model to a web component. This keeps your component’s HTML, CSS and JavaScript separate from the rest of the web page.
  • HTML Templates: Use HTML tags <template> and <slot> to hold HTML that doesn’t display when the page loads. You load it with JavaScript at a later time.

Can I use web components in a JavaScript framework?

Yes. You can use your component in whatever JavaScript framework you want or none at all. If you need to switch to a new framework, you don’t have to rewrite your web component. Learn how to get started with building a web components.

Want to create your own components?

Check out these tools and resources for building your own web components.

Want to learn more?

You can learn more from the Web Components Community and Web Components.

Why Use a Coding Style Guide

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.

Why Use a Coding Style Guide
Lubos Houska from Pixabay

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.

Python Coding Style Guide


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.
  • Use meaningful naming conventions and comments. Check out How to Comment Your Code like a Pro.
  • Format and layout your code with white space.
  • Use tools to help manage your code. Tools like JSHint, Prettier, or W3C Validator

Whether you are working alone or on a team, using a coding style guide can help you be more productive as a developer. Remember, you aren’t writing code for the computer but for yourself and others.

DevTools Tips and More

What are browser dev tools?
Your web browser has a suite of developer tools. You can use these tools to analyze problems, edit CSS and debug issues with JavaScript.

DevTools Tips and More

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.

Browser DevTools Docs

Each browser has its own set of developer tools.

Getting started with CSS Math

Why do Math in CSS? Math functions in CSS can make your life easier. It makes reading the CSS easier. You can save time by avoid having to do the calculations yourself.

Getting Started with CSS
Photo By: Chenspec on Pixabay

Use mathematical expressions to calculate property values such as width or padding.

What type of Math functions can you use?

  • calc()
  • max()
  • min()
  • clamp()

These four Math functions are currently supported by all browsers.


The calc() function allows you to do basic math. Add, subtract, multiply and divide. You use it the calculate the value for different properties.

This example shows using calc() to calculate a width using subtraction:

.main-content {
  width: calc(100% - 20px);

Or you could use it to set the value for part of a property. For example:

.custom-el {
  margin: 10px calc(3em + 2px);

You can learn more about how to use this useful function from CSS-Tricks in A Complete Guide to calc().


The max() function takes the largest value from a list of values and sets it to the property value. For example, you may want to set the width to be either 50% or 300px. It picks the value that happens to be larger depending on the viewport size.

.custom-box {
  width: max(50%, 300px);


The min() function does the opposite of max(). It takes the smallest value and sets it to the property value. In the custom-box example, you could:

.custom-box {
  width: min(50%, 300px);

In this case, the custom-box could not get bigger than 300px.


The clamp() function takes three parameters. A minimum value, preferred value and maximum value. It selects a middle value with between the smallest and largest values. clamp() uses that value and sets it to the property.

For example, you can use it for setting a font size that grows with the size of the viewport. Your font won’t get smaller or larger than the specified values. By using clamp(), you can achieve the same effect as the code in Fluid Typography with less code.

Learn more about using Math in CSS

5 Website Speed Optimization Tips

Does your website load fast? A slow loading website can make a user decide to go somewhere else. Speed is important because slow websites can lose money and users. No one wants to wait until your website loads.

5 Website Speed Optimization Tips
Photo by Gerd Altmann

Why is your site slow?

Many factors could be slowing your site down. The common ones are:

  • Large image sizes
  • Large CSS files
  • Heavy use of JavaScript
  • Old legacy code
  • Too many plugins and/or widgets
  • Server Issues
  • Slow network connection especially on mobile

How slow is your website?

A website speed test can tell you how fast your site is. You can use tools like PageSpeed Insights by Google or Pingdom Website Speed Test. Both tools will give you insights into how slow your website is and what you can do to fix it.

When you get a report from these tools, you’ll see many metrics. Focus on these three metrics: Largest Contentful Paint, First Input Delay and Cumulative Layout Shift. Google calls them Core Web Vitals. Core Web Vitals measure the user experience — loading, interactivity and visual stability.

5 Website speed optimization tips to start with

What do you fix first? It depends. You’ll need to decide what affects the users the most.

1. Large image sizes

Large image sizes can drag down your website’s loading time. You can use a Website Image Analysis Tool to decide which images to handle first. Tools like ImageOptim can help to optimize your images for the web.

2. Large CSS files

CSS files get large over time. They can include leftover unused selectors, workarounds and duplicated code. To fix these problems, you need to refactor your CSS. Refactoring CSS is not an easy task but necessary one. Use this guide on how to refactor CSS without creating new problems.

3. Heavy use of JavaScript

Too many JavaScript files loading can slow your site down. Do you need all of them? Audit your JavaScript files to see if you still need them. Or use other techniques to limit their affect on the website.

4. Old legacy code

Code can get old and not for the better. Is your code using old code that has been depreciated? Look at your code to see if you can remove it. Or refactor it and make it better.

Are you using plugins that you no longer need or have newer versions? Make sure your plugins or widgets aren’t slowing your site down.

5. Server issues

Is you website still slow after fixing other web performance issues? If yes, then you need to look at your hosting server. Are you using a server that fits you needs? You may need to consider moving to a new host or paying a bit more for a premium service.

Read more about Optimizing Your Website Speed

Photo by Gerd Altmann