date: 2023-12-31
slug: 2023-recap
description: A recap of the year

I started working on this blog one year ago, exactly on the Christmas break, but I ended up never adding any content. I hope to change this in 2024.

This blog post is a recap of the year, in terms of events I participated and achievements I was able to accomplish!

2023 was my first full year at Mercedes-Benz.io, many interesting things have happened this year and I feel that I grew a lot in terms of professional and personal development.

Vue.js Amsterdam

In February, I've been on Vue.js Amsterdam with 4 colleagues from Mercedes-Benz.io. It was my first experience in a developer focused conference.
It was a very pleasant experience, the talks were great and colleagues were very nice.
Apart from the conference, we also toke some time to visit a bit of the city at night, after the conference.

Frontend Offsite

In October, we had our Mercedes-Benz.io Frontend Offsite in Sesimbra, 2 days of knowledge sharing and creating connections between the FE devs.
I made a talk about Component testing with playwright, demoing a little utility library that I have been creating to make our component testing a lot more seamless (pun intended)
We had a Team Olympics on the beach that was a lot of fun and great for team bounding!

Web summit

In November, I've gone to Web Summit in Lisbon, for the last 5 years I always got OSS tickets for it and been present.
This year only visited it one day, I felt the conference even less developer focused than previous years, maybe because of the missing big tech companies like Google/Amazon, after all the fuss around Israel/Hamas conflict.
Tho, I enjoyed being with old colleagues, Bruno from Agroop and new colleagues from Mercedes-Benz.io, like Rodrigo and Gonçalo.

Server Side Rendering

This as been the year of SSR, my team as been one of the pioneers of implementing SSR in our, overly complex, CMS architecture.

description: This is the first blog post created. This content will be part of description

This is the first blog post created.

See the MD test #4

Emojy 👍 👎 😄 🎉 🤔 ❤️ 🚀 👀

sub heading

• using bullets
• d

PR #1

• and checkboxes

A link to

table

#twitter

#twitter

Text width code

const test: string = "Hello"

image

date: 2023-06-18
slug: css-advanced
description: Generated via Bing Chat just to test the blog system

CSS: A Guide to Advanced Topics

Generated via Bing Chat just to test the blog system

CSS Blog Post

Introduction

CSS, or Cascading Style Sheets, is a language that allows you to style the appearance of HTML elements. It is a powerful tool that can be used to create beautiful and responsive web pages.

In this blog post, we will discuss some advanced topics in CSS. We will cover selectors, specificity, typography, color functions, gradients, media queries, and container queries.

Selectors

Selectors are used to select HTML elements that you want to style. There are many different types of selectors, each with its own purpose. Some common selectors include:

• *: Selects all elements on the page
• h1: Selects all h1 elements
• .my-class: Selects all elements with the class my-class
• #my-id: Selects the element with the id my-id

Specificity

Specificity is a measure of how important a selector is. The more specific a selector is, the more important it is. For example, #my-id is more specific than .my-class because it uniquely identifies an element on the page.

When multiple selectors are applied to the same element, the selector with the highest specificity is used. This is why it is important to use specific selectors when styling your web pages.

Typography

Typography is the art of arranging type. In CSS, you can use typography to control the size, weight, style, and color of your text.

Here are some common CSS properties for typography:

• font-size: Sets the size of the text
• font-weight: Sets the weight of the text
• font-style: Sets the style of the text
• font-color: Sets the color of the text

Color Functions

CSS provides a number of color functions that you can use to create custom colors. Here are some common color functions:

• rgb(): Creates a color from red, green, and blue values
• rgba(): Creates a color from red, green, blue, and alpha values
• hsl(): Creates a color from hue, saturation, and lightness values
• hsla(): Creates a color from hue, saturation, lightness, and alpha values

Gradients

Gradients are a great way to add visual interest to your web pages. CSS provides two types of gradients: linear gradients and radial gradients.

Linear gradients are gradients that progress from one color to another in a straight line. Radial gradients are gradients that progress from one color to another in a circle.

Here is an example of a linear gradient:

background-color: linear-gradient(to right, #ff0000, #00ff00);

This code creates a background color that progresses from red to green.

Advanced CSS Techniques: A Comprehensive Guide

CSS (Cascading Style Sheets) is a fundamental technology used to style and layout web pages. While many developers are familiar with the basics of CSS, there are several advanced topics that can take your CSS skills to the next level. In this blog post, we'll explore some of these advanced CSS techniques and how they can be used to create stunning and responsive web designs.

Selectors

CSS selectors are patterns used to select and target HTML elements for styling. Understanding different types of selectors allows you to apply styles more precisely. Here are some commonly used CSS selectors:

1. Element Selector: Targets elements by their tag name (e.g., p, div, h1).

2. Class Selector: Targets elements with a specific class attribute (e.g., .button, .container).

3. ID Selector: Targets a specific element with a unique ID (e.g., #header, #section-1).

4. Descendant Selector: Targets elements that are descendants of another element (e.g., ul li, div p).

5. Child Selector: Targets elements that are direct children of another element (e.g., ul > li, div > p).

Specificity

Specificity is a way to determine which CSS rules should be applied when multiple rules conflict. It is crucial to understand how specificity works to avoid unexpected styling issues. The following factors determine the specificity of a CSS rule:

1. Inline Styles: Styles applied directly to an element using the style attribute have the highest specificity.

2. ID Selectors: ID selectors have a higher specificity than class selectors and element selectors.

3. Class Selectors: Class selectors have a higher specificity than element selectors.

4. Universal Selector: The universal selector (*) has low specificity.

The more specific a selector is, the higher its priority in applying styles.

Typography

Typography plays a vital role in web design, impacting readability and user experience. Advanced CSS allows you to control various typographic aspects, such as:

1. Font Stacks: Specifying fallback fonts in case the primary font is unavailable.

2. Font Faces: Using @font-face to import custom fonts.

3. Text Effects: Applying text shadows, text outlines, and other effects.

4. Letter Spacing: Adjusting the spacing between letters.

5. Line Height: Controlling the vertical spacing between lines.

Color Functions

CSS provides color functions that enable dynamic color manipulation. Some commonly used color functions include:

1. rgba(): Defines a color using red, green, blue, and alpha (transparency) values.

2. hsla(): Defines a color using hue, saturation, lightness, and alpha values.

3. opacity: Sets the opacity of an element and its children.

Gradients

Gradients allow smooth transitions between two or more colors. CSS gradients can be linear or radial and can be used for backgrounds or text effects. Let's see an example of a linear gradient as a background:

.gradient-background {
  background-image: linear-gradient(to right, #ff0000, #00ff00);
}

Media Queries

Media queries enable responsive web design by applying different styles based on the user's device or viewport size. They allow you to create layouts that adapt to various screen sizes. For instance:

/* Styles for screens with a width of 600px or less */
@media (max-width: 600px) {
  .responsive-container {
    width: 100%;
  }
}

Container Queries

Container queries are a relatively new concept that allows elements to adapt their styles based on their container's size rather than the viewport. They offer more flexibility when building components. However, as of my knowledge cutoff date in September 2021, container queries were not fully supported in all browsers. Let's illustrate how they might work:

.my-component {
  /* Example usage of a container query */
  @container (min-width: 300px) {
    /* Styles to apply when the container is at least 300px wide */
    width: 100%;
  }
}

Please note that container queries might have evolved since my last update, so I recommend checking the latest specifications and browser support.

In conclusion, CSS is a powerful tool that goes beyond basic styling. Understanding advanced CSS techniques like selectors, specificity, typography, color functions, gradients, media queries, and container queries empowers developers to create visually appealing and responsive web designs. Experiment with these techniques in your projects to take full advantage of CSS's capabilities. Happy coding!

This is a paragraph.

This is a paragraph.

Header 1

Header 2

Header 1
========

Header 2
--------

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1
## Header 2
### Header 3
#### Header 4
##### Header 5
###### Header 6

Header 1

Header 2

Header 3

Header 4

Header 5

Header 6

# Header 1 #
## Header 2 ##
### Header 3 ###
#### Header 4 ####
##### Header 5 #####
###### Header 6 ######

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

> Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aliquam hendrerit mi posuere lectus. Vestibulum enim wisi, viverra nec, fringilla in, laoreet vitae, risus.

This is a header.

1. This is the first list item.
2. This is the second list item.

Here's some example code:

Markdown.generate();

> ## This is a header.
> 1. This is the first list item.
> 2. This is the second list item.
>
> Here's some example code:
>
>     Markdown.generate();

• Red
• Green
• Blue

• Red
• Green
• Blue

• Red
• Green
• Blue

- Red
- Green
- Blue

+ Red
+ Green
+ Blue

* Red
* Green
* Blue

1. Buy flour and salt
2. Mix together with water
3. Bake

1. Buy flour and salt
1. Mix together with water
1. Bake

Paragraph:

Code

Paragraph:

    Code

* * *

***

*****

- - -

---------------------------------------

This is an example link.

This link has no title attr.

This is [an example] id reference-style link.

This is [an example](http://example.com "Example") link.

[This link](http://example.com) has no title attr.

This is [an example] [id] reference-style link.

[id]: http://example.com "Optional Title"

single asterisks

single underscores

double asterisks

double underscores

*single asterisks*

_single underscores_

**double asterisks**

__double underscores__

This paragraph has some code in it.

This paragraph has some `code` in it.

![Alt Text](https://get.svg.workers.dev/?s=64&f=gray "Image Title")

This issue lists Renovate updates and detected dependencies. Read the Dependency Dashboard docs to learn more.

Pending Approval

These branches will be created by Renovate only once you click their checkbox below.

• chore(deps): update dependency @sveltejs/vite-plugin-svelte to v3.0.2
• chore(deps): update dependency prettier to v3.2.5
• chore(deps): update dependency svelte to v4.2.12
• chore(deps): update dependency svelte-check to v3.6.8
• chore(deps): update dependency @playwright/test to v1.42.1
• chore(deps): update dependency @sveltejs/adapter-cloudflare to v4.2.0
• chore(deps): update dependency @sveltejs/kit to v2.5.4
• chore(deps): update dependency eslint to v8.57.0
• chore(deps): update dependency node to v20.11.1
• chore(deps): update dependency prettier-plugin-svelte to v3.2.2
• chore(deps): update dependency sass to v1.72.0
• chore(deps): update dependency typescript to v5.4.3
• chore(deps): update dependency vite to v5.2.6
• chore(deps): update typescript-eslint monorepo to v6.21.0 (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency date-fns to v3.6.0
• chore(deps): update typescript-eslint monorepo to v7 (major) (@typescript-eslint/eslint-plugin, @typescript-eslint/parser)
• fix(deps): update dependency slug to v9
• 🔐 Create all pending approval PRs at once 🔐

Detected dependencies

• Check this box to trigger a request for Renovate to run again on this repository