In the last article, we talked about [debounce vs throttle in JavaScript](https://flaco.dev/blog/debounce-vs-throttle-javascript-guide-examples) but as JavaScript keeps evolving, it is time to discover the latest **ECMAScript 15** (or **ES2024** or **ES15**) features. ES15 brings even more exciting features to make your code cleaner, faster, and more maintainable, so I decided to cover the **ECMAScript 15 features** you need to know about, along with examples to help you apply them in real-world coding. Are you ready to become a better Frontend Developer?

## ES15 Features: the Pipeline Operator

The **pipeline operator** is one of the most anticipated features of ECMAScript 15. It allows for a more readable function call chain, especially when functions need to be applied sequentially.

Instead of nesting multiple functions, the pipeline operator makes your code easier to follow by chaining function calls more naturally.

```javascript
const double = (x) => x * 2;
const increment = (x) => x + 1;

let result = 5
  |> increment
  |> double;

console.log(result); // Output: 12
```

Here, `5` is passed through the `increment` function first and then through the `double` function, all in a clean and readable sequence. This operator reduces the need for deeply nested function calls, making code much more manageable.

## ES15 Features: do expressions

The **do expression** allows you to execute blocks of code as expressions and return a value from them. This is handy when you need conditional logic or computations inline.

```javascript
let value = do {
  if (someCondition) {
    'Success';
  } else {
    'Failure';
  }
};

console.log(value); // Output: 'Success' or 'Failure'
```

This way, instead of traditional conditionals, `do` expressions allow for flexible block-based expressions with a returned value.

## ES15 Features: async context manager

Another great feature introduced in ECMASCRIPT 15 is the **async context manager**. It simplifies the management of resources in asynchronous operations. This is inspired by Python's `with` statement and helps manage resources like file handles, database connections, and network streams, ensuring proper cleanup.

```javascript
async with (const db = await connectToDatabase()) {
  await db.query('SELECT * FROM users');
}
// Automatically closes the database connection after the block
```

This makes handling resources in an async environment simpler, reducing boilerplate code like manually closing connections.

## ES15 Features: immutable array methods

ECMAScript 15 introduces **non-mutating methods** for arrays: `toSorted`, `toReversed`, and `toSpliced`. These methods return a new array without altering the original array, supporting **immutability**, which is crucial in functional programming.

```javascript
let numbers = [4, 2, 7, 1];

// Non-mutating methods
let sorted = numbers.toSorted();
let reversed = numbers.toReversed();
let spliced = numbers.toSpliced(1, 2);

console.log(sorted); // Output: [1, 2, 4, 7]
console.log(reversed); // Output: [1, 7, 2, 4]
console.log(spliced); // Output: [4, 1]
console.log(numbers); // Original array unchanged: [4, 2, 7, 1]
```

## ES15 Features: symbol metadata for Metaprogramming

With **Symbol.metadata**, ECMAScript 15 enhances metaprogramming by allowing developers to attach and retrieve metadata to/from class members and methods.

```javascript
class MyClass {
  @Reflect.metadata('role', 'admin')
  doSomething() {}
}

const metadata = Reflect.getMetadata('role', MyClass.prototype, 'doSomething');
console.log(metadata); // Output: 'admin'
``` 

This new feature allows for dynamic reflection and more sophisticated metaprogramming capabilities.

## ES15 Features: Promise.withResolvers()

Finally, we have a really great feature about Promises: **Promise.withResolvers()**. This method simplifies promise management by returning both the promise and its `resolve` and `reject` functions.

```javascript
const { promise, resolve, reject } = Promise.withResolvers();

setTimeout(() => resolve('Data loaded!'), 2000);

promise.then((message) => {
  console.log(message); // Output: 'Data loaded!'
});
```

This removes the need to define `resolve` and `reject` separately, cleaning up promise-based code.

## ES15 Features: array grouping

Great improvements also onto the array side with new grouping methods:  `groupBy` and `groupByToMap`.

With the new **`groupBy`** method, you can group array elements based on a criterion, creating a more intuitive way to work with large datasets.

```javascript
const items = [
  { type: 'fruit', name: 'apple' },
  { type: 'vegetable', name: 'carrot' },
  { type: 'fruit', name: 'banana' }
];

const grouped = Array.groupBy(items, item => item.type);
console.log(grouped);
// Output: { fruit: [{...}, {...}], vegetable: [{...}] }
```

This feature simplifies grouping operations without manually looping through data.

## ES15 Features: Decorators

We finally have **Decorators** in JavaScript thanks to ECMAScript 15, allowing you to add behaviour or modify classes/methods declaratively. It is gonna be a real game changer in your code.

```javascript
function logMethod(target, key, descriptor) {
  const originalMethod = descriptor.value;
  descriptor.value = function (...args) {
    console.log(`Called ${key} with arguments: ${args}`);
    return originalMethod.apply(this, args);
  };
  return descriptor;
}

class Car {
  @logMethod
  drive(speed) {
    console.log(`Driving at ${speed} km/h`);
  }
}

const myCar = new Car();
myCar.drive(100);
// Output: "Called drive with arguments: 100"
//         "Driving at 100 km/h"
```

## Recap ECMASCRIPT 15 features

**ECMAScript 15** is packed with features like the **pipeline operator**, `do` expressions, async resource management, immutable array methods, and more. These features improve JavaScript by reducing complexity, improving readability, and supporting immutability and metaprogramming.

Whether you're working with promises, handling async operations, or grouping data, these new tools offer cleaner and more efficient solutions. Stay updated, start incorporating these features into your projects, and surprise your peers!

In case you think this content deserves to be shared, it would be great if you could support me just doing at least one of the following actions:
- Leave a like
- Leave a comment
- Share the article
- Spread the voice with your friends

large_es15.jpg

medium_es15.jpg

small_es15.jpg

thumbnail_es15.jpg

large_es15.png

medium_es15.png

small_es15.png

thumbnail_es15.png

large_es15.webp

medium_es15.webp

small_es15.webp

thumbnail_es15.webp

Explore the top ECMAScript 15 features, including pipeline operators, do expressions, async context managers, and more. learn through detailed code examples.

ECMAScript 15 (2024) Features: a complete guide with code examples

Discover all the latest ECMASCRIPT 15 features released in 2024 with code examples

JavaScript provides powerful tools to manage how frequently a function gets executed in response to user interactions, such as scrolling, typing, or resizing a window. Two such tools are  **debounce**  and  **throttle**. These concepts help improve performance by controlling the frequency of function execution, especially when dealing with events that trigger frequently.

In this guide, we’ll break down what  **debounce**  and  **throttle**  are, how to implement them, and when to use one over the other.

----------

## What is Debouncing in JavaScript?

**Debounce**  is a technique used in JavaScript to limit how often a function can execute after a sequence of rapid, continuous events. It ensures that a function is called only after a certain amount of time has passed without the event being triggered again.

Debouncing is especially useful when the event handler is invoked multiple times in quick succession (such as keystrokes in a search box) and you only want to take action when the user stops interacting.

### Use case for Debounce

Imagine a user typing into a search bar that triggers an API call to fetch search results. Without debounce, every single keystroke would send a request, which would be inefficient. With debounce, the request will only be made after the user stops typing for a certain duration, avoiding unnecessary API calls.

----------

## How to delay a function with Debounce in JavaScript

### Custom Debounce implementation

Here's a simple example of how to implement debounce manually in JavaScript.

```javascript
function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

// Example usage:
const handleInput = () => {
  console.log('Fetching search results...');
};

const debouncedInput = debounce(handleInput, 300);

document.querySelector('input').addEventListener('input', debouncedInput);
```  

In this example:

-   The  `debounce`  function takes two arguments: the function to be debounced and the delay in milliseconds.
-   `setTimeout`  ensures that the function will only execute after the user has stopped typing for the specified delay (300ms).

### Using libraries for Debounce

JavaScript libraries like  **Lodash**  and  **Underscore.js**  provide built-in  `debounce`  functions that simplify the process.

**Lodash Example**:

```javascript
const _ = require('lodash');
const handleInput = () => {
  console.log('Fetching search results...');
};

const debouncedInput = _.debounce(handleInput, 300);

document.querySelector('input').addEventListener('input', debouncedInput);
```

With Lodash, the same functionality is achieved with far fewer lines of code, and it provides cross-browser compatibility.

----------

## What is Throttling in JavaScript?

**Throttling**  ensures that a function is called at most once in a specified time period, no matter how many times an event is triggered. It guarantees a consistent flow of function executions at regular intervals, which is particularly useful for events that can fire continuously, like scrolling or resizing.

### Use case for Throttle

Imagine you want to track how far down the page a user scrolls. If you update the scroll position every time the event fires, you might overload the browser with updates. Throttling allows you to measure the scroll position at set intervals (for example, every 200ms) to avoid unnecessary computations.

----------

## How to throttle function execution in JavaScript

### Custom Throttle implementation

Here’s how you can create a custom throttle function in JavaScript:

```javascript
function throttle(func, limit) {
  let inThrottle;
  return function (...args) {
    if (!inThrottle) {
      func.apply(this, args);
      inThrottle = true;
      setTimeout(() => inThrottle = false, limit);
    }
  };
}

// Example usage:
const trackScroll = () => {
  console.log('Tracking scroll position...');
};

const throttledScroll = throttle(trackScroll, 200);

window.addEventListener('scroll', throttledScroll);
```

In this implementation:

-   `throttle`  takes the function and the time limit (in milliseconds) as arguments.
-   The function will only be executed once within the defined  `limit`  (200ms), even if the scroll event fires multiple times.

### Using libraries for Throttle

Similar to debounce, you can use  **Lodash**  or  **Underscore.js**  to easily implement throttle.

**Lodash Example**:

```javascript
const throttledScroll = _.throttle(() => {
  console.log('Tracking scroll position...');
}, 200);

window.addEventListener('scroll', throttledScroll);
```

This version ensures that the function is executed no more than once every 200ms, even if the user scrolls continuously.

----------

## What is the difference between Debounce and Throttle in JavaScript?

**Debounce**  and  **throttle**  are both techniques used to control the frequency of function execution in response to rapid event triggers, but they have distinct purposes and behaviors.

| Aspect           | Debounce                                                                     | Throttle                                                                |
|------------------|-----------------------------------------------------------------------------|-------------------------------------------------------------------------|
| **Purpose**          | Delays function execution until a certain time has passed without further events. | Ensures function execution at regular intervals, regardless of how many events occur. |
| **Best Use Cases**   | Input validation, search autocomplete, window resizing.                     | Scroll tracking, infinite scrolling, monitoring mouse movements.        |
| **How it Works**     | Executes the function only once after a period of inactivity.              | Ensures a consistent execution rate by limiting the function calls.     |
| **Frequency**       | Function is called after the event stream ends.                           | Function is called at regular intervals while events are still occurring. |
| **Example**          | Typing in a search box (API call triggered after typing stops).           | Handling scroll events (tracking position every 200ms).                 |

### When to Use Debounce

-   Debouncing is ideal when you want to delay the execution of a function until a user stops performing an action. Use it when you expect bursts of events and only need the final action to trigger your function, such as in search input fields or resizing windows.

### When to Use Throttle

-   Throttling is more appropriate when you need to control how often a function is called in response to continuous events, like scrolling or mouse movement. Use it to maintain a smooth and consistent user experience by limiting how often an expensive function executes.

----------

### Recap the differences between Debounce and Throttle in JavaScript

Understanding the difference between  **debounce**  and  **throttle**  can significantly improve the performance and responsiveness of your JavaScript applications. Use  **debounce**  when you want to wait for a user to stop triggering an event, and opt for  **throttle**  when you need to enforce a regular execution interval regardless of how often the event occurs.

Mastering these techniques will make your web applications more efficient and responsive to user interactions.

In case you think this content deserves to be shared, it would be great if you could support me just doing at least one of the following actions:
- Leave a like
- Leave a comment
- Share the article
- Spread the voice with your friends

large_debounce-vs-throttle-javascript.jpg

medium_debounce-vs-throttle-javascript.jpg

small_debounce-vs-throttle-javascript.jpg

thumbnail_debounce-vs-throttle-javascript.jpg

large_debounce-vs-throttle-javascript.png

medium_debounce-vs-throttle-javascript.png

small_debounce-vs-throttle-javascript.png

thumbnail_debounce-vs-throttle-javascript.png

large_debounce-vs-throttle-javascript.webp

medium_debounce-vs-throttle-javascript.webp

small_debounce-vs-throttle-javascript.webp

thumbnail_debounce-vs-throttle-javascript.webp

Learn the differences between debounce and throttling in JavaScript, two key techniques for optimizing event handling. Includes practical examples and best practices.

Debounce vs Throttle in JavaScript: A Beginner’s Guide with examples

Understand what debounce or throttle a JavaScript function means and the differences with code examples.

In this post, we are going to explore the differences between coding bootcamps and computer science degrees when it is time to learn web development. We will both solutions to help you answer a crucial decision: should I enroll in a coding bootcamp or attend a university? Both educational paths have their own sets of advantages and disadvantages, and the best choice depends on the individual's goals, resources, and learning preferences. I intend to provide an informative comparison between coding bootcamps and computer science degrees to help you make an informed decision. We'll also explore some common questions to address common concerns and queries.

## Coding Bootcamps

Coding bootcamps are intensive, short-term training programs designed to equip individuals with the skills needed for a career in web development and other tech fields. Typically lasting from a few weeks to a few months, these programs focus on hands-on, practical learning through projects and real-world applications. Unlike traditional education, coding bootcamps emphasize current industry trends and technologies, preparing graduates for immediate entry into the job market. With a variety of formats including full-time, part-time, in-person, and online, coding bootcamps offer flexible learning options to suit different lifestyles and commitments.

## Advantages and Disadvantages of Coding bootcamps

**Advantages:**

1.  **Accelerated Learning:**  Coding bootcamps are designed to teach you web development skills in a short period, typically ranging from a few weeks to a few months. This intensive learning model allows you to gain practical skills quickly and start working in the industry sooner.
    
2.  **Hands-On Experience:**  Bootcamps emphasize practical, project-based learning. You'll work on real-world projects and build a portfolio that showcases your skills to potential employers.
    
3.  **Industry-Relevant Curriculum:**  The curriculum in coding bootcamps is often updated frequently to keep pace with the fast-evolving tech industry. You'll learn the latest technologies and best practices used by professionals.
    
4.  **Networking Opportunities:**  Many bootcamps have strong connections with tech companies and offer networking events, job fairs, and mentorship programs. This can be beneficial for job placement and career advancement.
    
5.  **Cost-Effective:**  Compared to a four-year university degree, coding bootcamps are generally more affordable. This makes them accessible to individuals who may not have the financial resources for a traditional college education.
    

**Disadvantages:**

1.  **Limited Scope:**  While bootcamps provide intensive training in web development, they may not cover broader computer science concepts or offer the same depth of knowledge as a university program.
    
2.  **High Pressure:**  The fast-paced nature of bootcamps can be stressful for some learners. The condensed timeline means you'll need to absorb a lot of information quickly, which can be overwhelming.
    
3.  **Variable Quality:**  The quality of bootcamps can vary significantly. It's important to research and choose a reputable program with a track record of successful graduates.
    

Here you can find a typical Persona that would attend a coding bootcamp:

**Name:** Alex  
**Age:** 25  
**Background:** Alex has a degree in business administration but wants to switch careers to web development. They have some basic coding knowledge and are eager to learn quickly.  
**Goals:** Alex wants to gain practical web development skills and start working in the industry within six months.  
**Challenges:** Alex is concerned about the cost of education and wants to avoid taking on significant debt.  
**Ideal Path:** A coding bootcamp offers the accelerated learning, hands-on experience, and networking opportunities Alex needs to make a career switch quickly and affordably.

## Computer Science degrees  

So far degrees have been found as the most known solution to get access to the IT market. They last  at least 3 years and are not scoped just to the market trends. Computer science degrees offer a deeper understanding of computer science fundamentals that most coding bootcamps don't give. They prepare you to learn from the basis so then you can approach multiple tech fields and not just a specific one. Of course, they cost more and you have to include also expenses related to commuting and transfers abroad in case you decide to study in a different city than yours.

## Advantages and Disadvantages of  Computer Science degrees

**Advantages:**

1.  **Comprehensive Education:**  University programs offer a well-rounded education that includes theoretical knowledge in computer science, mathematics, and other foundational subjects. This broader understanding can be beneficial for long-term career growth.
    
2.  **Accreditation and Recognition:**  A degree from an accredited university is widely recognized and respected by employers. It can open doors to a wider range of job opportunities, including positions that require a bachelor's degree.
    
3.  **Research Opportunities:**  Universities often have research facilities and resources that allow students to explore advanced topics and contribute to innovative projects. This can be valuable for those interested in pursuing a career in academia or research.
    
4.  **Campus Life and Extracurriculars:**  Attending a university offers a rich campus experience with access to clubs, organizations, events, and networking opportunities. These experiences can enhance personal growth and professional development.
    
5.  **Financial Aid and Scholarships:**  Many universities offer financial aid packages, scholarships, and grants to help students afford their education. This can alleviate some of the financial burden.
    

**Disadvantages:**

1.  **Longer Duration:**  Earning a degree typically takes three years, which is a significant time investment compared to a coding bootcamp. This longer duration may delay entry into the workforce. By the way, you will enter with more sophisticated skills.
    
2.  **Higher Cost:**  University tuition can be expensive, and students often graduate with some debt if you think about the United States system. In other cases, your expenses depend on where you study. In my case, as I studied in another city, I had to pay the house rent and of course my entire stay 3 years away from my home.
    
3.  **Less Focused:**  The comprehensive nature of university programs means that not all coursework may be directly related to web development. Students may need to take general education classes that don't align with their career goals. By the way, they take part of your wider understanding.
    
4.  **Less Immediate Job Placement:**  While universities offer career services, they may not have the same direct connections to tech companies and job placement programs as coding bootcamps.
    

Here you can find a typical Persona that would study at university:

**Name:** Jordan  
**Age:** 18  
**Background:** Jordan is a high school graduate with a strong interest in computer science and technology. They enjoy solving complex problems and want a deep understanding of the field.  
**Goals:** Jordan aims to earn a bachelor's degree in computer science and pursue a long-term career in web development, possibly exploring research opportunities.  
**Challenges:** Jordan is prepared for a longer educational journey but needs financial aid to afford tuition.  
**Ideal Path:** Attending a university provides Jordan with a comprehensive education, access to research opportunities, and a recognized degree that can open doors to a wide range of career options.

## Common Questions about Coding bootcamps vs CS degrees

Here below you can find some common questions I want to answer to let you understand better the two learning solutions.

**1. What is better for web development: coding bootcamp or  degrees?**

It depends on your goals. If you want to enter the workforce quickly and gain practical skills, a coding bootcamp might be better. If you're looking for a comprehensive education with a recognized degree, a university could be the right choice.

**2. Can I get a job with just a coding bootcamp?**

Yes, many bootcamp graduates find jobs in the tech industry. However, job placement depends on factors like the quality of the bootcamp, your portfolio, and the job market.

**3. Are coding bootcamps worth it?**

For many people, coding bootcamps are worth it due to their accelerated learning model, practical focus, and cost-effectiveness. Research and choose a reputable bootcamp to maximize the benefits.

**4. How much do coding bootcamps cost?**

The cost of coding bootcamps varies widely, typically start from €1000. Some bootcamps offer financing options, scholarships, and income share agreements.

**5. How long does it take to become a web developer?**

A coding bootcamp can prepare you for entry-level web development roles in a few months. A university degree typically takes four years but provides a more comprehensive education.

----------

On a personal note, I hold a degree in Computer Science from the University of Bologna. My university experience was incredibly enriching, as it provided a deep understanding of computer science fundamentals without limiting the scope to just programming. This comprehensive education has been invaluable in my career, allowing me to tackle complex problems and stay adaptable in the ever-evolving tech industry.

In conclusion, both coding bootcamps and universities offer valuable paths to learning web development, each with its own set of advantages and disadvantages. By understanding your personal goals, resources, and learning preferences, you can choose the educational path that best suits your needs and sets you on the path to success in the tech industry.

large_codingbootcamp.jpg

medium_codingbootcamp.jpg

small_codingbootcamp.jpg

thumbnail_codingbootcamp.jpg

large_codingbootcamp.png

medium_codingbootcamp.png

small_codingbootcamp.png

thumbnail_codingbootcamp.png

large_codingbootcamp.webp

medium_codingbootcamp.webp

small_codingbootcamp.webp

thumbnail_codingbootcamp.webp

Find the differences between coding bootcamps and computer science degrees, understanding what is best for learning web development.

Coding Bootcamps vs Computer Science degrees

Find the differences between coding bootcamps and computer science degrees

Coding Bootcamps vs Computer Science Degrees: The Best Path to Learn Web Development

large_frontend-roadmap-cover.jpeg

medium_frontend-roadmap-cover.jpeg

small_frontend-roadmap-cover.jpeg

thumbnail_frontend-roadmap-cover.jpeg

small_frontend-roadmap-article-cover.png

thumbnail_frontend-roadmap-article-cover.png

small_frontend-roadmap-article-cover.webp

thumbnail_frontend-roadmap-article-cover.webp

Discover in this roadmap the latest programming languages, the libraries, and the frameworks you must know to become a Front End Developer in 2022.

The Front End Developer Roadmap 2022

In the previous article we talked about the new React framework called Remix and if you haven't had time to read it, I suggest you do it by clicking [here](/blog/what-is-react-remix). In case you fell in love with it and are thinking of migrating a project developed with Angular, for example, you will realize how long and tedious it would be to develop all the interface components already created. But don't worry because today's goal will be to understand **what are Web Components** and how they can help **outsource the visual part** of an application to be agnostic to the technology used in the Front End.

Our reading will start from **understanding the needs** to arrive at the **final solution** that will allow us to understand in detail what the Web Components are.

## What are Web Components: the needs

There are several JavaScript frameworks or libraries that allow us to develop the logic and interface of an application. And very often within a company, especially if it is large, several technologies can coexist at the same time. This causes the **duplication** of some **components** that are used to build the **UI**, such as the following elements: buttons, inputs, tables, etc.

Consequently, if two incompatible technologies are adopted, to maintain the same style, the component code is rewritten, adapting it to the technology used. This results in:

- **waste of money** and of time;
- **redundant maintenance** of the code;
- **duplication** of the **development** of new features.

Also, in case we want to change the technology of a platform, we will always have to rewrite the entire application if the code is not compatible.

These are the needs and therefore the problems that currently exist. Now let's try to understand in more detail the **why to use the Web Components** and so we will have a more general picture of what are the Web Components.

## Why use Web Components?

The **Web Components** was born as **solution** to these problems, which are not a very recent technology and that they were discussed for the first time in 2011. Even if their first implementation is much more recent. This indicates immediately the need to have **visual components** that could be **reused transversally** from project to project.

To give a more concrete example, to develop a _Button_ type element, having two applications built with two different technologies, we can use a Web Component and import it as if it were a normal HTML element. So we don't build a duplicate element for each technology but we outsource it, building our UI component library in a separate project.

From a small example, we can already evaluate the **advantages** we get from a **Web Components** library:

- **centralized** management (new features, updates).
- the components are **reusable** from project to project.
- **independence** from the technology used.
- **single source of truth** (in one place, we have all the components we need).

This underlines why to use the Web Components and how they are decisive for a **cost saving** and **energy** linked to the reusability of the visual elements of an application.

Now, having to answer the question what are the Web Components, we can state the following:

> **Web Components are reusable visual elements that do not depend on a specific technology**

After the most boring part, that is the theory, let's move on to the development of a Web Component, and its integration within a project developed with NextJS.

## How to implement the Web Components

Before we begin, I will introduce you to three fundamental concepts that will help us understand how Web Components work and which we will review in the example below:

- **customElements**: the JavaScript API to build the component.
- **shadow dom**: allows you to isolate the execution of the component (style, etc).
- **HTML templates**: HTML API to show the element.

Moving on to the practice, I remind you that you can consult the final code on my project Github page [here](https://github.com/flaviocolonna/nextjs-webcomponent).

The goal is to create an HTML tag that can independently manage the typography style of our platform based on the component we want to show. Below is an example of its future use:

```html
<web-typography component="h1" data-text="I am an h1 tag" />
<web-typography component="p" data-text="I am a paragraph" />
```
In this case, we can already see an advantage: we **don't define** the style because the Web Component itself will handle it. Let's see below how to create a Web Component that allows us to do this.

First I created a class, called * Typography *, which will handle the element of type text based on two main attributes:
- **component**: defines the type of tag to show (h1, h2, h3, p, etc).
- **data-text**: defines the textual content.

Finally, within the same class I define the style that each type of text element will have, so as to avoid the redundancy that I would get by adding the classes every time I go to create a tag individually.

```javascript
// Create a class for the element
class  Typography  extends  HTMLElement {
	constructor() {
		// Always call super first in constructor
		super();
		/* With mode === closed, you cannot access to the shadow dom from outside */
		const shadow = this.attachShadow({ mode: 'closed' });
		// Get tag type
		const tag = this.getAttribute('component') || 'span';
		const wrapper = document.createElement(tag);
		// Take attribute content and put it inside the tag
		const text = this.getAttribute('data-text');
		wrapper.textContent = text;
		// Create some CSS to apply to the shadow dom
		const style = document.createElement('style');
		style.textContent = `
			h1 {
				font-size: 3rem;
				font-weight: 700;
			}
			h2 {
				font-size: 2rem;
				font-weight: 600;
			}
			p {
				font-size: 1.2rem;
				font-weight: 400;
			}
		`;
		// Attach the created elements to the shadow dom
		shadow.appendChild(style);
		shadow.appendChild(wrapper);
	}
}
// Define the new element (name must contain hyphens)
customElements.define('web-typography', Typography);
```

The **constructor** function will be invoked as soon as the HTML component is rendered. Inside we access the **attributes**, define **the style** and finally insert the elements created to the assigned DOM, the **shadowDom**. The latter is an isolated DOM that we can access or not, based on the **mode** parameter.

Once the basic behavior has been defined, we use the **customElements** API present in most browsers to define a Web Component and thus make it possible to use it as a normal HTML tag.

We have just seen the basic concepts of a Web Component and we just have to use it.

In the next example I integrated a Web Component into an application built with NextJS, which then uses ReactJS.

First we need to import the JS file:
```javascript
useEffect(() =>  import('../components/Typography/index.js'), []);
```
Here I used the **useEffect**, since it is an application in ReactJS, and I used the **dynamic import**, to avoid putting the component inside the _public_ folder of NextJS.
In another article we will see how to use Web Components as JSX tags by importing and using them directly. So, stay tuned!

Then we move on to the actual use of our component which will be shown as any HTML tag with the style we have defined inside it:
```html
<web-typography data-text="I am a Web Component" component="h1" />
```

We can also use this component in an application written with Angular, VueJS or in pure JavaScript.

The result will be the following:

![What are Web Components - Example](https://res.cloudinary.com/flaco-dev/image/upload/v1642002678/what_are_web_components_png_63d8ea979e.png)

## Browser compatibility

Most browsers currently support Web Components. To check the compatibility matrix you can refer to this [link](https://caniuse.com/?search=customElements). If you want to support a browser that is not natively compatible with the Web Components, you can always install a polyfill following the procedure described [here](https://www.webcomponents.org/polyfills).

Unfortunately, for the moment, we have finished our journey which has made us understand what are Web Components. In a later article we will talk about how to use them as simple ES6 imports, and I will introduce you to the **StencilJS library**. This is a very powerful tool for creating Web Components. If you want to get ahead of the times, I suggest you take a look at the documentation on the [official page] (https://stenciljs.com/).

Now it is time to hear your voice. If you liked this article and you want to support me, just follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below.
2. Share this post on your social accounts or with your friends.
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna).
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

small_cosa-sono-i-web-components.jpg

thumbnail_cosa-sono-i-web-components.jpg

small_cosa-sono-i-web-components.png

thumbnail_cosa-sono-i-web-components.png

small_what-are-web-components.webp

thumbnail_what-are-web-components.webp

Discover what are Web Components, a tool to build UI elements independently from the Front End stack.

What are Web Components and how to use them

Recently a new React framework has been launched and its name is [Remix](https://remix.run). The founders of React Router have been working hard to develop and present this new framework to the entire community and in this article I am so pleased to answer the question "What is React Remix?".

I tried Remix on my own, after getting impressed by the video presentation and I can confirm that it is going to be a nice player among the others React frameworks, like NextJS and Gatsby. For sure I will give it a chance for my next projects.

Now it's time to start analyzing the specs of React Remix but before read what the founders say about Remix:

> Remix is a full stack web framework that lets you focus on the user interface and work back through web fundamentals to deliver a fast, slick, and resilient user experience. People are gonna love using your stuff.

## React Remix story

Everything started last year when two developers announced a new React Framework that was going to be a new player in the web development sector. They called it **Remix**, even if they disappeared for a while, without disclosing any interesting information, and keeping everything top secret. Until now.

On **Monday 22nd of November of 2021** they released it officially and presented it on streaming to show off the power of React Remix as a new React Framework. You could think that we probably don't need another framework as there is already a wide range of solutions. By the way, they didn't care about this and here we are: **Remix is the new React Framework**.

When I talk about two developers I am not talking about two random guys. They are the creators behind **React Router**!

Let's discover now in deep what is React Remix, its features and how to use React Remix in an application.

## What is React Remix?

**React Remix is a new React Framework** which develop started on 2019. The developers behind it are Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder), the same developers behind **React Router**. Any software engineer that has been working with React, a little bit knows React Router, so we know what we are talking about. In case you don't know React Router, it is "simply" the most used routing library in React, capable of working everywhere that React runs: on the web, on the NodeJS, and on React Native. It is also the core of others most well-known routing libraries like **react-router-dom** and **react-router-native**.

So starting from React Router, they have built a framework based on it: Remix. Now, to answer the question "What is React Remix?" we can assert that **React Remix is a React Framework based on React Router**, that faces some of the issues of Client Side Rendering and many others. If you know a little bit **NextJS**, it is going to be very similar, but with several important differences that we are going to see in the next section. So, keep reading!

## React Remix goal
But wait a moment. Before starting listing all the features, we need to understand why a web developer should need it. Answering this question helps us on understanding **what is React Remix for**.

The main **goal** of React Remix is to provide a new web development tool to **boost** the **build time**, **performance** on runtime and **development fluidity**. Moreover, it is focused on **SEO** improvements and **accessibility**. All of this thanks to a new **Server Side Rendering** approach and a new **build tool**.

As you can notice, we are not talking anymore about a library as React is already. Here we are talking about a **framework**, as it provides a 360 degree platform to **build better websites**, as they say.

In my humble opinion, they wanted to create a union between NextJS and React Router. The goal is to provide an easy **Server Side Rendering** website builder but better, including some cool features of **React Router** and some faster approach to develop some heavy parts of an app. To check which are those, keep reading!

Now we are ready to start discovering the new features included in React Remix, finally one step closer to answering the question "What is React Remix?".

## React Remix features
As I mentioned before, React Remix seems to be similar to NextJS or to GatsbyJS at a first glance. If you know them, you can think they are equal. But you should change your mind as I did. And let's see why.

### React Remix Routing, Nesting Routes, Suspense Cache, Scroll Restoration
If we think on NextJS, it builds the routes based on the project structure. We declare inside the **pages** folder the files we want and the framework uses the names to build all the application **routing system**. The same does React Remix, using a folder called **routes**. React Remix builds the **routes based on the File System** too. And this is the biggest innovation in **React Router**.

By the way, instead of just replicating NextJS or GatsbyJS, they added **Nesting Routes**! It means that we can have **nested routes** where children inherit the parent layout without replicating in the code the container component. And still using only the File System. So cool!

![What is React Remix - Project structure](
https://res.cloudinary.com/flaco-dev/image/upload/v1638375663/remix_folder_structure_75defbbbe4.png)

And what about **React Suspense**? In **React Router** is used to provide a loader for a component and then will cache the rendered component. By the way, it doesn't take care of browser history. It means that if we change the order to get to a specific page, the cache will pick the rendered component as usual. In **React Remix** they want to change this approach, enabling a **Suspense Cache** based on **Location**. Every time we push a page to the **history state**, it becomes **unique** and Suspense caches the component based on the Location and not on the properties. If we navigate back and forward, or if we push again the same page by visiting it from a navigation link, it will be another **unique** record.

And to conclude with the routing features, they included a great functionality called **scroll restoration**. Each page will cache the scroll position in case we get back to it and can continue from where we stop. And a big role here is played by the **Suspense** that can store same pages but with different scrolls, if they are part of different Location in the history state.

I think a big improvement on this side. Now let's see what's left.

### React Remix Faster Build and Refresh Time

Did I mention **faster build time**? Yeah, you are right! To achieve it they integrated **esbuild**.

Don't worry if you don't know it, as you should only know that is the **fastest JavaScript bundler** (you can read more about it [here](https://esbuild.github.io/ "esbuild bundler")). And I can confirm it! While watching the preview, I have seen how fast it is, even when doing the **Fast Refresh**. And while testing it on my own, I can see a really big difference with previous bundlers like Webpack or Browserify. This is going to be a real nice advantage to reduce builds locally and in CI.

### Remix Form optimization

Another great improvement has been done when we talk about forms. User data submission always needs some extra development by our side. We need to manage at least the **form data** and the **submission state**. So, we would use useState and we would have some instruction to access to the form data.

But how does Remix manage a form? It can't be easier. First of all we talk about **actions**. You can export a function called **action** on the same file and it would be the handler of the post received by the form present in that page. It is a real post to a Back End, to the Remix Server. It is great because you don't need to access to the form elements to get every input and to extract their values. Moreover, we can use an hook, **useTransition**, to manage the form submission state without performing any set state as we are doing right now. We have now a really clean flow to manage a form. This is one of the best features I have seen by far in Remix.

![What is React Remix - Form optimization](https://res.cloudinary.com/flaco-dev/image/upload/v1638380100/remix_form_submission_1ec6122093.png)

### React Remix Error Handling

Another great feature that Remix has is about **Error Boundaries**. In React we can catch app errors having a top level component with some function like **componentDidCatch**. But in Remix we have a different approach. We can use Nested Error Boundaries and once more it is an export function, as for the others before. It is great how Remix is making everything easier. So look at the following image:

![What is React Remix - Error Handling](https://res.cloudinary.com/flaco-dev/image/upload/v1638380790/remix_error_boundaries_9b79163e30.png)

We can export **ErrorBoundary** for general runtime errors. And we can use **CatchBoundary** for loaders or actions errors. Amazing! But the features haven't stop here.

### React Remix Server Side Rendering

One of the first answer to "What is React Remix for" is **Server Side Rendering**. Introducing this new system helps on building better website as they are more performant at runtime, specially for the first user visit. This can boost our **SEO** as NextJS properly is doing. Furthermore, **SSR** can run also in development mode. And there is one little difference more and it is related with the **data loading**. Let's see below what's happening.

### React Remix Data Loading

React Remix is going to use the full **HTTP Cache** to manage the way it should get the data again from the **original source**. If we export the **loader** function in a React Remix page, the value returned is accessible by the component that will be server side rendered. Great! But what about if I want fresh data, without taking it from the cache? Well, they built an hook for it. It sounds impressive how it will be easy to clean the cache and to get newly generated data.

![What is React Remix - Data Loaders](https://res.cloudinary.com/flaco-dev/image/upload/v1638378408/remix_data_loader_896afa8e9c.png)

### React Remix Search Engine Optimization tags

One of the goals of React Remix is the SEO improvement and they achieved it. Thanks to Server Side Rendering, React Router can be used easily to build performant apps. And to improve the SEO without using other libraries to change meta tags or the page title, React Remix uses an export to set **meta tags**. It is possible to set the page **description** and **title**. It sounds great for me for example that I am used to install **Helmet**.

![What is React Remix - SEO Meta Tags](https://res.cloudinary.com/flaco-dev/image/upload/v1638378733/remix_seo_meta_tags_7676641c26.png)

With this latest feature we finished our list. Here below there is a little recap to see a nice overview.

## What is React Remix: features recap

Now it is time to make a recap of "What is React Remix?". I did a list of some of the most known features here below:

- File system routes
- Route layout nesting
- Suspense cache based on Location
- Scroll restoration
- ESBuild:
	- Automatic code splitting
	- Faster refresh
	- Faster build
	- Zero config
- Form optimization
- Production and development Server Side Rendering mode
- Data-driven meta tags
- Built-in data loading

By the way, the features don't stop here, as the founders said. They are going to implement many more stuff to make Remix more complete.

## How to use React Remix  
Before launching Remix we didn't know if it was free or not. There were rumors about a license to buy in order to get the code but then they confirmed that is going to be **completely free** and **open source**.

And thanks to that I had the chance to try out Remix. The following command will start a guided procedure to create your app:

```bash
npx create-remix@latest
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638375656/medium_remix_start_216666d262.png)

Once you run the command, it asks you some questions:
- The name of your Remix app
- How you want to deploy (many options here, but I have selected Remix App Server)
- If you are going to use Typescript or plain JavaScript
- If you want to run a npm install just after

Once the process has been finished, you are ready to go with the following command (you can also use **yarn**):

```bash
npm run dev
```

![What is React Remix - Start](https://res.cloudinary.com/flaco-dev/image/upload/v1638376992/remix_start_app_2a94a75c93.png)

The starter contains a lot of features to look at. It can be useful to understand how Remix works. At the end, the app built will look like this:

![What is React Remix - Starter Homepage](https://res.cloudinary.com/flaco-dev/image/upload/v1638376717/remix_homepage_b17ac6dc1d.png)

And it's simple as it is.

If you want to start using Remix more in deep, you can read the documentation available in the official website at [https://remix.run](https://remix.run).

## When React Remix is out

React Remix has been launched on **Monday 22nd of November of 2021**. The presentation is available on the Remix [YouTube Channel](https://www.youtube.com/watch?v=wsJaUjd1rUo). The video has been presented by Kent C. Dodds, the Director of Developer Experience, Michael Jackson (Co-Founder, CEO) and Ryan Florence (Co-Founder).

Now it is time to hear your voice. If you liked this article and you want to support me, just follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below;
2. Share this post on your social accounts or with your friends;
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna);
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

thumbnail_what-is-react-remix.jpg

thumbnail_what-is-react-remix.png

thumbnail_what-is-react-remix.webp

Let's find out what is React Remix, a new React Framework based on React Router and developed by top developers to improve SEO, build times and performances.

What is React Remix? A new React Framework

Let's find out what is React Remix, a new React Framework based on React Router and developed by the same React Router creators to improve SEO, build times and performances.

If you landed here it means that you have some doubts about the differences between Front End and Back End and in this  article you will find all the answers you are looking for. For this  I will try to explain these two aspects of the world of web programming, analyzing the objectives of each, the languages ​​used, the skills required and the most common tasks that are carried out.

In case you want to learn more about what a Front End developer does and what a Back End developer is, I suggest you to read the previous article in which I describe these two areas ([What does a Front End Developer do?](/blog/what-does-a-front-end-developer-do "What does a Front End Developer do?")).

After this brief introduction it's time to get started.

## Differences between Front End and Back End: goals

The main differences between Front End and Back End can be found in the goals they set for themselves. Each area has its  **purpose** and its  **protagonist**. Let's see the details:

### Front End goals

If we have been good and have done our homework, such as reading the article on what a Front End developer does, we will already know that the main protagonist is the  **user**  and the goal is  **to guarantee the best usability**. In this  case we refer to a web application that is usable by all types of target users thanks to acceptable performance and a user interface in line with the purpose of the application. In fact, as we analyzed in the previous article, we know that not all applications are the same and this  depends on the type of user and the nature of the application itself.

### Back End goals

On the other hand, the  **protagonist in the Back End**  side will no longer be the user but the  **data**. Consequently, the goal also changes and shifts to guaranteeing efficient data processing. But what does it mean? The Back End area deals with  **storing**,  **processing**  and  **supplying data**  to the Front End. It will therefore have to do with data persistence systems, such as a database, and with the configuration of requests to the server, to allow a client to request resources.

If this  process slows down, the Front End has to "entertain" the user somehow. But as we all know, too much waiting affects the user experience!

Below you will find a  **summary**  of the **goals for each area**  to better understand one of the differences between Front End and Back End.

In the development of the Front End:

-   **Protagonist**: the user;
-   **Goal**: to guarantee the best usability.

In developing the Back End:

-   **Protagonist**: the user.
-   **Goal**: to ensure efficient data processing.

Now let's move on to the languages ​​used to discover another of the differences between Front End and Back End.

## Languages ​​used

The differences between Front End and Back End include languages ​​that are mistakenly referred to as programming languages. Not everyone falls into this  category and now let's see why.

Let's start first by understanding what a language is. This  comes as a well-defined form of passing information to the code execution environment to perform a certain instruction.

There are several and they differ according to the following factors:

-  **Execution environment**: server, browser or mobile;  
-  **Type of language**: programming language, markup language, style sheets language and language for structured requests (there are many others);  
-  **Purpose and functionality**: final use of the language and functionality.

We can argue that each programming area, based on the execution environment and purpose, will adopt one or more languages. And now let's see which ones and what they are used for.

### Front End languages

The languages ​​used in the Front End will be executed by the browser, which we can define as a container. Among these we identify:

-  **HTML**: is a markup language used to create the skeleton of a web page.  
-  **CSS**: is a style sheet language that describes the style of the elements of a web page.  
-  **JavaScript**: is a programming language that makes a website interactive, allowing the user to interact with the components of the layout and allowing the web page to perform other operations when the user navigates.

As you can see I have used several categories, and  **not all languages ​​are programming**. This  is because a programming language must be  **compiled**  or  **interpreted**  to be called one. Maybe I'll write some articles on the different types of languages ​​to learn more.

For now we need to know that not all languages ​​in the world of programming and software development are called programming languages. Sounds strange but it is!

### Back End languages

As far as the  **Back End**  is concerned, the most popular languages ​​are the programming ones and the most used ones are the following:  **Java, Python, PHP, .Net, C #, C ++, Ruby and JavaScript**! Yes, even JavaScript is a server-side language if executed within NodeJS. We will elaborate on this in another article!

**Languages**  ​​that run on the  **server side can access the resources of the system**  that runs the code, that is, the execution environment, unlike languages ​​that run from the browser which do not have the same functionality.

But there are also other types such as  **SQL**  used to make  **structured requests**  to a relational database, when we have to query the database to get stored data.

After the analysis of the  **languages**, we can confirm that they are among the main  **differences between Front End and Back End**, based on their  **type**  and  **purpose**: access the file system, create a server, define the style of a page or manage the interaction with the user.

Having explored the differences between the types of languages, let's now move on to the skills that every developer must have in  his  area to add another piece to the differences between Front End and Back End.

## Front End and Back End skills

As we have just seen, objectives and languages ​​are already two important variables when we analyze the differences between Front End and Back End. The combination of these two factors makes us understand that the skills required in each area are a little different.

Due to the nature of the Front End, the following will be required:

-   **Intuition**: understanding if a feature works well from the point of view of  the user;
-   **Patience**: you will need it when dealing with browser compatibility;
-   **Flexibility**: new technologies updates are just around the corner;
-   **Algorithms**: knowledge of the main search and sorting algorithms is required. Don't worry because it will be a basic level and then it depends a lot on the type of application;
-   **Networks**: a good knowledge of how the Internet works and the main protocols never hurts even if a basic level (in my opinion wrong) is required to undertake this  type of career. However, you need to recognize the different types of APIs, the main server responses, and know the fundamentals of the Internet. In my course to become Front End I dedicated some videos to all this.

The  **Back End**, on the other hand, will be for those who want to devote themselves more to  **data manipulation**  and will require:

-   **Database**: know the main database models (relational, non-relational, etc) and which languages ​​they use;
-   **Algorithms**: knowledge of the main sorting and search algorithms is fundamental for data manipulation;
-   **Networks**: exploring this  issue is very important. A Back End Developer recognizes the different types of APIs for a more precise choice when designing communication with a client;
-   **System**: knowing the major operating systems is equally important because they are the server-side code execution environment. So a knowledge of Linux commands for example will help a lot.

  
Many other skills could be included but these allow you to identify which are the main requests from each area.

However, I don't like categorizing so much and when it comes to knowledge I consider myself more transversal, avoiding the so-called silos. In fact, a developer should also be interested in the spheres that are not  his  competence, even if he will limit himself to a more superficial approach. For example, a Front End developer needs to know the main databases even if a Back End developer will have more experience and more skills.

This  concept is very important both when dealing with informal topics and when designing an application, a moment in which the two developers must interact and be able to understand each other.

We have just added another piece to our puzzle called "differences between Front End and Back End", although I prefer transversal knowledge to vertical ones.

Now let's move on to the activities that perform the two areas to complete this  analysis.

## Which are the tasks of a Front End and a Back End developer?  

It is not easy to identify the activities carried out by each single area because everything changes depends on the type of application and many other factors. For this  I will limit myself to a more general approach.

From what we have learned, from the nature of each area, it is possible to identify the following activities for the Front End developer:

-   **Design**: a better usability of the platform is constantly sought, identifying new developments to improve the interface and make it more usable;
-   **Performance**: the key to the success of most applications lies in speed. Quick execution of the instructions makes the user experience less stressful.
-   **Search Engine Optimization (SEO)**: the constant updating of the SEO rules forces the developer to search for new solutions for a better positioning of the web page within the search engines. This  as long as it is a web page!
-   **Design**: a very important part during which the candidate technologies are studied for the development of a new application or for an update;
-   **Maintenance**: each application needs to be updated to improve its stability following bug fixes for example;
-   **Research and development**: there is no progress without innovation. Every good developer must keep up in order to be able to contribute positively to the success of the application they are developing, integrating new solutions or improving existing ones.

  
Regarding the Back End developer:

-   **Performance**: data processing must be efficient, with the shortest possible execution time. There is therefore a constant search for how to improve algorithms;
-   **Design**: when talking about a new application, for example, the Back End developer must provide  his/her experience to identify the best architecture for client-server communication, for the database and for data processing;
-   **Maintenance**: in this  case the activity is the same as for any other developer: updating the application as a result of bugs or new versions of the technologies.
-   **Research and development**: here too, we can refer to what was said in the Front End part: search for new solutions to improve the final product.
  
And with this we conclude our adventure in analyzing the differences between Front End and Back End. We have analyzed the  goals, the languages ​​used, the skills and finally the tasks that these two areas carry out.

If you are looking for an answer to the question "which area is right for me?", you have to know that unfortunately there is no sure answer but I can guide you through the image below:

![Differences Between Front End and Back End: Personality](https://res.cloudinary.com/flaco-dev/image/upload/v1637080024/chart_differences_between_front_end_back_end_016dc18f43.png)


If you think the Front End can do for you, you are in the right place because the FrontendPills section aims to introduce you to the world of Front End programming. Just go to the contact page [here](/contact "Contact me") and send me a request selecting "Become a Front End Developer" as subject. I will contact you in the shortest time possible.

Also in this  case I remind you that if you liked this  article and want to support me, you can follow these simple, easy and free steps:

1. Leave a like by clicking on the heart icon below;  
2. Share this  post on your social accounts or with your friends;  
3. Follow me on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR) and on [Github](https://github.com/flaviocolonna);  
4. Subscribe to the newsletter below to not miss any articles, discounts or gossip (there will be many).

Thank you so much for your attention and have a nice day!

Differences between Front End and Back End

large_differences-between-front-end-back-end.jpg

medium_differences-between-front-end-back-end.jpg

small_differences-between-front-end-back-end.jpg

thumbnail_differences-between-front-end-back-end.jpg

large_differences-between-front-end-back-end.png

medium_differences-between-front-end-back-end.png

small_differences-between-front-end-back-end.png

thumbnail_differences-between-front-end-back-end.png

large_differences-between-front-end-back-end.webp

medium_differences-between-front-end-back-end.webp

small_differences-between-front-end-back-end.webp

thumbnail_differences-between-front-end-back-end.webp

Find out the differences between Front End and Back End: goals, the languages used, the skills and the tasks they do.

Differences between Front End and Back End: find them out!

Differences between Front End and Back End: objectives, languages, skills and tasks.

Often, when I have to explain my job to someone who isn't techie, I usually answer saying: I build websites. The result? The other person thinks I create blogs and other easy stuff. A little reductive by my point of view.  
So, I have decided to explain in this article what does a Front End developer do, basically my job, in the easiest way.

By the way, before starting, I will explain what is a website, otherwise it would be like understanding what is a mechanic without knowing what is a car at all.

## What is a website?

There are so many websites out there but are you sure to know who builds them and what are his or her tasks? Do you know which are the programming languages used to build a website and how is a website structured?

A  **website**  is a  **collection**  of interlinked  **web pages**  and related content  **identified**  under a common  **domain name**. It can be public or private.

For example, this blog is a  **public** website in which you can find articles, images, and other web pages. They are all available under the domain name  **flaco.dev**.

Now, we have clear what a website is but there is still one step before understanding what does a Front End developer do: look at how a website is structured.

## How is a website structured?

A website is composed by two main sides: the Front End and the Back End.

The  **Back End**  is in charge of  **processing**,  **storing**  and  **serving**  the  **data**  of a website. You can think about login forms or registrations forms. In this case, your email and your password are managed by the Back End.

Meanwhile the  **Front End**  is in charge to  **represent**  the  **data**  to the end user, building the  **layout**  and make the  **user interface**  nicer (at least for some websites). It is pretty easy to understand the difference at high level. I am not going to explain now other differences like programming languages and so on. Our focus today is on the Front End.

![Front End vs Back End](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/front_end_vs_back_end_cropped_1b37588b09.png)

So, now we know how a website structure is, let's finally see what does a Front End developer do during his or her routine.

## What does a Front End developer do?

As we said a Front End developer mainly create the layout of a website to represent the data to the end user.

So the basic process will be explained as following: get the data from the Back End, build the layout and make the page interactive to the user. But it is not easy as you may think.

There are three main languages used to build a website:  

-   **HTML**: is a  **markup language**  used to create the  **skeleton**  of a layout.
-   **CSS**: is a  **stylesheet language**  that describes the  **style** of the elements in the web page.
-   **JavaScript**: is a  **programming language** in charge of making a website  **interactive**, managing the user interaction with the layout components.

![Difference between HTML, CSS, and JavaScript](https://res.cloudinary.com/flaco-dev/image/upload/v1636123151/html_css_javascript_description_cropped_b68aa408c9.png)

So to answer to the question what does a Front End developer do we can say that: a Front End developer **is the person who builds the layout of a website to present the information requested by the user in the best way**. But what does in the best way  mean? To understand this, I am going to talk about what are the Front End developer tasks now.

## What are the Front End developer tasks?

It is not easy to answer to this question straightforward because there are several websites, and they all are built differently depending on some variables.  
Here we can list two of the most important:

-   **The client**: is it a private or a company website? My blog for example is totally different compared with the Amazon e-commerce.
-   **The end user**: Who is my end user? Understanding this is absolutely important because it can give information if the website should be  **multilanguage**, if it must be **accessible** to anyone. Moreover, which are the devices used by the user? Which screens do they have? Are they fast or do they have a poor internet connection? This can affect the user experience of course.

As you can now probably understand, the websites aren't all equals.  
So, depending on those factors, what does a Front End developer do is dealing with several tasks, described here below:

-   **Performance**: every millisecond counts and every delay can cause big losses to companies. You have to tweak your app to have your client performance requirements, dealing with heavy images, heavy code or high time consuming operations.  
    
-   **User experience and User interface**: one of the most important tasks is to deliver an understandable and  **easy to use** website. The end user shouldn't read a manual to use the  website. So, a Front End developer has to build a clear layout, respecting all the  **user experience principles**  (buttons dimensions, text dimension, and many many others). This  is  aligned with a good look and feel of the website, called  **user interface**. Designing is one of the process that a Front End developer could be often involved in.
-   **Search Engine Optimization (SEO)**: does the website need to be ranked before its competition? Yeah! Let's deal with it too! A Front End developer should know some SEO techniques to boost the visibility of the website he or she is building.
-   **Compatibility**: is the end user going to use Firefox, Chrome, Safari, Microsoft Edge, Opera, or Internet Explorer (I hope no)? Just to list a few, those are some browsers used worldwide and they could render the page differently. A Front End developer should check for each browser its version and the device used. The developer has to be sure the website is running smoothly on each browser, and on each device, that is included in a  **compatibility matrix.** It should be delivered by the client, if it is a company. Otherwise a Front End developer should choose depending on the most used browsers and devices in the country where the website is published.
-   **Reusability**: a Front End developer, a good one, should deliver an understandable and reusable code. If at some point the developer is not going to work anymore with his or her client, the next Front End developer should be easily develop on top of your code. Otherwise, the first Front End developer will not have a good reputation.
-   **Internationalization**: a website can be delivered localized in a single language or it can be multilanguage. The Front End developer must deal with routing and content translation. Is there any Arabic around? In this case the layout should change too, to right to left. I can tell you it is not easy at all.
-   **Accessibility**: imagine a shop that would like to be opened to everyone but than it doesn't have a ramp for a person with disabilities. It is limiting the service that is offering. A website works the same. A Front End developer should check that the website can be accessed by people who can't read well, that are using screen readers, and so on. For example, government sites must be  **accessibles**.
-   **Pricing**: in case of being a freelance, the developer should find cost efficient solutions depending on the client. For example, don't use top notch technologies for a simple blog. A client must be satisfied of your work even at price level. I would say absolutely important in case of freelancing.

Now that you know what does a Front End developer do, which are the tasks that he or she could be involved in, and the Front End languages used to build a website, you are ready to go with the differences between Back End and Front End in a more specific way explained in [this](/blog/differences-between-front-end-and-back-end) other article.

And  if someone asks me what does a Front End developer do, I will introduce her or him to this article. You can do the same!

In case you have been fascinated by the Front End developer job and you are interested on starting a new career as a Front End developer, I can help you with that. Just go to the contact page [here](/contact) and send me a request selecting "Become a Front End Developer" as subject.

Now it is time to leave. I would remember you that if you liked this article and you want to  **support me**, follow these simple  **easy and free**  steps:

1. **Leave a like**  clicking on the heart icon below
2. **Share**  this post on your social accounts or with your friends
3. **Follow me**  on [Instagram](https://www.instagram.com/frontendpills/), [Facebook](https://www.facebook.com/frontendpills), [Twitter](https://twitter.com/FlavioColonnaR), and on [Github](https://github.com/flaviocolonna)
4. **Subscribe to the newsletter**  below to don't miss any article, discount or gossip (there will be a lot)

Thanks a lot for your attention and I wish you a good day!

large_what-does-a-front-end-developer-do.jpeg

medium_what-does-a-front-end-developer-do.jpeg

small_what-does-a-front-end-developer-do.jpeg

thumbnail_what-does-a-front-end-developer-do.jpeg

large_what-does-a-front-end-developer-do.png

medium_what-does-a-front-end-developer-do.png

small_what-does-a-front-end-developer-do.png

thumbnail_what-does-a-front-end-developer-do.png

large_what-does-a-front-end-developer-do.webp

medium_what-does-a-front-end-developer-do.webp

small_what-does-a-front-end-developer-do.webp

thumbnail_what-does-a-front-end-developer-do.webp

Discover what does a Front End developer do, which programming languages are used, the daily tasks the developer is involved and which skills are needed.

What does a Front End developer do?

Hi and welcome to my Front End blog!

In this article I am pleased to announce my new **writing adventure**.

But before talking about what you are going to find in this new Front End blog, why you should read it and why you shouldn't, I am gonna take 1 minute to introduce myself.

## About me

I am Flavio and I am an Italian **Software Engineer**, most exactly a FullStack JavaScript developer, based in Barcelona.

Apart from that, I am also a **digital content creator** and a **course publisher**.

During my career I have developed several **JavaScript** based apps: **web**,  **mobile**, and **servers**.

In 2020 I wanted to share all my experiences and some Front End anecdotes to the entire developer's community. So, I decided to create my **Instagram channel** called [**@frontendpills**](https://www.instagram.com/frontendpills/). I would suggest you to take a look at it to read some examples of what I usually post about.

In the same time I was also working on creating my first **online course**. A very challenging adventure which goal still is helping people on becoming a Front End Developer. The course is in Italian and it is available in the [frontendpills website](https://www.frontendpills.it/corso-front-end-developer-2021).   
I also create **masterclasses**, live workshops which aim is to learn a specific topic in the shortest time.

Now let's stop talking only about me as it is time to focus on the blog. By the way, if you still want to read more, you can have a look at the [about section](/about).

## Why a new Front End blog

This blog has been created to share a more international and varied content, ranging from technical content to soft-skills information.
I will try to use a technical language but that will be comprensible even to the newbies.

I want to give a 360-degree content. So, it wouldn't be only a Front End blog but it will contain also other topics. Due to this it will include **mentoring**, news about new **developer tools**, or about **software updates** used by developers, in addition to the standard technical articles.

You can find contact forms to book a **private consultancy** about several topics, even if you want to **hire me** to build or to optimize any website. You could use it also to ask me something more general.

My main goal is to provide the best tools to **start a new Front End career** and to continue on this way, following the path to get your first job or to improve your skills.

## What's the content of this Front End blog

In summary, here is roughly what we will talk about in this Front End blog:
- How to start a career in the Front End: secrets and tips
- The world of JavaScript: anecdotes and how to create web, mobile and server applications based on this programming language
- Insights and updates on ECMAScript, development environments, browsers and so on
- How to set up a project in the Front End and how to manage it
- How to write your own technical resume and how to present yourself for an interview
- How to improve your skills as a programmer and advance your position

At this point I have explained to you the main points of this blog and what it offers. You will have already understood if it can come in handy and if you will continue reading it.
If not, focus on what I'm about to tell you in the next paragraph.

## Why you shouldn't follow this blog

It could be strange but sometimes it's easier to reflect on the negative sides to understand if something fit our needs. There are so many Front End blogs out there and you may be wondering how this can be different. Below you will find many good reasons why this blog would not be for you:

- If you think you can find a direct solution to what you are looking for, by doing a simple copy and paste. In my articles you will find first of all the explanation of the implementations. My goal is to make people understand the *why* and not provide a code without a any consideration
- If you think everything is due and free, this place is not for you. The effort is there, I will not always be punctual with the publications, the courses are paid and the articles need a simple *like* to keep me going;
- The content can be challenging at times. There is no shortcut. It takes time, patience and persistence to learn. If you don't have these qualities, then I guess, again, this place is not for you.

I hope you don't fall within the points listed. In this case you are a person who wants to learn and above all who wants to improve. Read on to find out why I chose * flaco.dev *.

## Why flaco.dev

It is called *flaco* mainly because I am skinny and *flaco* is its spanish translation, as I live in Barcelona. But it could be also the partial merge of my name and my surname as I am called Colonna as surname. I let you decide!

## How to support me

In case you decided to start reading my Front End blog, it would be great if you could support me just doing at least one of the following actions:
- Leave a like
- Leave a comment
- Share the article
- Spread the voice with your friends

## Let's connect

If you want to connect with me just look at my [LinkedIn profile](https://www.linkedin.com/in/flaviocolonnaromano/), and you can find me also on [Instagram](https://www.instagram.com/frontendpills/) or on [Facebook](https://www.facebook.com/frontendpills/).

## Let's start

Now it is time to start! I will wait you on the platform and to don't miss any new article just subscribe to the newsletter, also to receive discounts for the published or next courses.

It has been a pleasure to introduce you to my Front End blog and many thanks for reading!

Cheers,\
The Flaco

large_first-article-image.jpg

medium_first-article-image.jpg

small_first-article-image.jpg

thumbnail_first-article-image.jpg

large_first-article-image.png

medium_first-article-image.png

small_first-article-image.png

thumbnail_first-article-image.png

large_first-article-image.webp

medium_first-article-image.webp

small_first-article-image.webp

thumbnail_first-article-image.webp

Let's discover the content that flaco.dev offers in this new blog. It will not be the classic Front End blog but it will contain other interesting topics.

A new Front End blog: why you should read it and why not

Too many blogs around, and here there is one more. But this is gonna change your mindset.

large_JavaScript-frameworks-rafiki.jpg

medium_JavaScript-frameworks-rafiki.jpg

small_JavaScript-frameworks-rafiki.jpg

thumbnail_JavaScript-frameworks-rafiki.jpg

large_JavaScript frameworks-rafiki.png

medium_JavaScript frameworks-rafiki.png

small_JavaScript frameworks-rafiki.png

thumbnail_JavaScript frameworks-rafiki.png

large_JavaScript-frameworks-rafiki.webp

medium_JavaScript-frameworks-rafiki.webp

small_JavaScript-frameworks-rafiki.webp

thumbnail_JavaScript-frameworks-rafiki.webp

Build your own blog with this live masterclass exploring NextJS, Strapi, Typescript, Tailwind and GraphQL.

Masterclass of NextJS, GraphQL, Typescript, Tailwind and Strapi

NextJS, Graphql, Tailwind and Strapi. The most important technologies in a single masterclass.

Building a scalable app with NextJS and GraphQL

medium_reactMasterclass.jpg

small_reactMasterclass.jpg

thumbnail_reactMasterclass.jpg

medium_reactMasterclass.png

small_reactMasterclass.png

thumbnail_reactMasterclass.png

medium_reactMasterclass.webp

small_reactMasterclass.webp

thumbnail_reactMasterclass.webp

Build your own portfolio with this live masterclass exploring NextJS, ReactJS, Typescript, and Tailwind.

Build your portfolio with ReactJS and Typescript

Master ReactJS and Typescript by building your own portfolio with NextJS in only 12.5 hours.

Newsletter

What do I receive?

When do I receive the emails?

Content you could receive