CSS

Exploring Open Props and its Capabilities

Published Jun 7, 2024

Updated Jun 7, 2024

9 min read

Exploring Open Props and its Capabilities

With its intuitive approach and versatile features, Open Props empowers you to create stunning designs easily. It has the perfect balance between simplicity and power. Whether you're a seasoned developer or just starting, Open Props makes styling websites a breeze. Let's explore how Open Props can help your web development workflow.

What is Open Props

Open Props is a CSS library that packs a set of CSS variables for quickly creating consistent components using “Sub-Atomic” Styles. These web design tokens are crafted to help you get great-looking results from the start using consistent naming conventions and providing lots of possibilities out-of-the-box. At the same time, it's customizable and can be gradually adopted.

Installing open props

There are many ways to get started with open props, each with its advantages. The library can be imported from a CDN or installed using npm. You can import all or specific parts of it, and for greater control of what's bundled or not, you can use PostCSS to include only the variables you used.

From Zero to Open Props

Let's start with the simplest way to test and use open props. I'll create a simple HTML file with some structure, and we'll start from there. Create an index.html file.

mkdir site
touch site/index.html

Edit the content of your HTML file. In this example, we’ll create a landing page containing a few parts: a hero section, a section for describing the features of a service, a section for the different pricing options available and finally a section with a call to action. We’ll start just declaring the document structure. Next we’ll add some styles and finally we’ll switch to using open props variables.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Super SaaS</title>
</head>
<body>
    <main>
        <!-- Hero Section -->
       <section class="hero">
            <h1>Super Saas</h1>
            <p>Experience the power of our innovative software solution.</p>
            <a href="#" class="btn">Get Started</a>
        </section>

       <!-- Features Section -->
       <section class="features">
            <div class="feature">
                <img src="feature1.png" alt="Feature 1">
                <h2>Feature 1</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="feature">
                <img src="feature2.png" alt="Feature 2">
                <h2>Feature 2</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
            <div class="feature">
                <img src="feature3.png" alt="Feature 3">
                <h2>Feature 3</h2>
                <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
            </div>
        </section>

        <!-- Pricing section -->
        <section class="pricing">
            <h2>Pricing</h2>
            <div class="pricing-plans">
                <div class="pricing-plan">
                    <h3>Basic</h3>
                    <p>Perfect for individuals</p>
                    <p class="price">$9.99/month</p>
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                    </ul>
                    <a href="#" class="btn">Get Started</a>
                </div>
                <div class="pricing-plan">
                    <h3>Pro</h3>
                    <p>Great for small businesses</p>
                    <p class="price">$19.99/month</p>
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                        <li>Feature 4</li>
                    </ul>
                    <a href="#" class="btn">Get Started</a>
                </div>
                <div class="pricing-plan">
                    <h3>Enterprise</h3>
                    <p>For large organizations</p>
                    <p class="price">$49.99/month</p>
                    <ul>
                        <li>Feature 1</li>
                        <li>Feature 2</li>
                        <li>Feature 3</li>
                        <li>Feature 4</li>
                        <li>Feature 5</li>
                    </ul>
                    <a href="#" class="btn">Get Started</a>
                </div>
            </div>
        </section>

        <!-- Call to Action Section -->
        <section class="cta">
            <h2>Ready to get started?</h2>
            <p>Sign up now and unlock the full potential of our SaaS platform.</p>
            <a href="#" class="btn">Sign Up</a>
            </div>
        </section>
    </main>
</body>
</html>

To serve our page, we could just open the file, but I prefer to use serve, which is much more versatile. To see the contents of our file, let's serve our content.

npx serve site

This command will start serving our site on port 3000.

Our site will look something like this:

Open-props core does not contain any CSS reset. After all, it’s just a set of CSS variables. This is a good start regarding the document structure.

Adding open props via CDN

Let's add open-props to our project. To get started, add:

<head>
<!-- simplified head content for clarity -->
	<link rel="stylesheet" href="https://unpkg.com/open-props"/>
</head>

This import will make the library's props available for us to use. This is a set of CSS variables. It contains variables for fonts, colors, sizes, and many more. Here is an excerpt of the content of the imported file:

:where(html) {
    --font-sans: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;
    --font-serif: ui-serif,serif;
    --font-mono: Dank Mono,Operator Mono,Inconsolata,Fira Mono,ui-monospace,SF Mono,Monaco,Droid Sans Mono,Source Code Pro,monospace;
    --font-weight-1: 100;
    --font-weight-2: 200;
    --font-weight-3: 300;
    --font-weight-4: 400;
    --font-weight-5: 500;
    --font-weight-6: 600;
    --font-weight-7: 700;
    --font-weight-8: 800;
    --font-weight-9: 900;
    --font-lineheight-00: .95;
    --font-lineheight-0: 1.1;
    --font-lineheight-1: 1.25;
    --font-lineheight-2: 1.375;
}

The :where pseudo-class wraps all the CSS variables declarations, giving them the least specificity. That means you can always override them with ease. This imported file is all you need to start using open props. It will provide a sensible set of variables that give you some constraints in terms of what values you can use, a palette of colors, etc. Because this is just CSS, you can opt-out by not using the variables provided. I like these constraints because they can help with consistency and allow me to focus on other things. At the same time, you can extend this by creating your own CSS variables or just using any value whenever you want to do something different or if the exact value you want is not there. We should include some styles to add a visual hierarchy to our document.

Working with CSS variables

Let's create a new file to hold our styles.

touch site/styles.css

And add some styles to it. We will be setting a size hierarchy to headings, using open props font-size variables. Additionally, gaps and margins will use the size variables.

h1 {
    font-size: var(--font-size-8)
}
h2 {
    font-size: var(--font-size-6)
}
h3 {
    font-size: var(--font-size-5)
}
.pricing-plans {
    display:flex;
    gap: var(--size-4);
}
.pricing-plan {
    flex-grow:1;
}
section + section {
    margin-block:var(--size-8);
}

We can explore these variables further using open-props’ documentation. It's simple to navigate (single page), and consistent naming makes it easy to learn them. Trying different values sometimes involves changing the number at the end of the variable name. For example: font-size-X, where X ranges from 0 to 8 (plus an additional 00 value). Mapped to font-sizes from 0.5rem up to 3.5rem. If you find your font is too small, you can add 1 to it, until you find the right size. Colors range from 0-12: –red-0 is the lightest one (rgb(255, 245, 245)) while –red-12 is the darkest (rgb(125, 26, 26)). There are similar ranges for many properties like font weight, size (useful for padding and margins), line height and shadows, to name a few. Explore and find what best fits your needs. Now, we need to include these styles on our page.

<head>
<!-- simplified head content for clarity -->
	<link rel="stylesheet" href="https://unpkg.com/open-props"/>
	<link rel="stylesheet" href="/styles.css"/>
</head>

Our page looks better now.

We could keep adding more styles, but we'll take a shortcut and add some defaults with Open Props' built in normalized CSS file. Besides the core of open props (that contains the variables) there’s an optional normalization file that we can use. Let's tweak our recently added styles.css file a bit. Let’s remove the rules for headings. Our resulting css will now look like this.

.pricing-plans {
    display:flex;
    gap: var(--size-4);
}
.pricing-plan {
    flex-grow:1;
}
section + section {
    margin-block:var(--size-8);
}

And add a new import from open-props.

<head>
<!-- simplified head content for clarity -->
    <link rel="stylesheet" href="https://unpkg.com/open-props"/>
    <link rel="stylesheet" href="https://unpkg.com/open-props/normalize.min.css"/>
    <link rel="stylesheet" href="/styles.css"/>
</head>

Open props provides a normalization file for our CSS, which we have included. This will establish a nice-looking baseline for our styles. Additionally, it will handle light/dark mode based on your preferences. I have dark mode set and the result already looks a lot better. Some font styles and sizes have been set, and much more.

More CSS Variables

Let's add more styles to our page to explore the variables further. I'd like to give the pricing options a card style. Open Props has a section on borders and shadows that we can use for this purpose. I would also like to add a hover effect to these cards. Also, regarding spacing, I want to add more margins and padding when appropriate.

.pricing-plans {
    display:flex;
    gap: var(--size-4);
}
.pricing-plan {
    flex-grow:1;

    display: flex;
    flex-direction: column;
    gap: var(--size-2);
    justify-content: space-between;
    border-radius: var(--radius-4);
    padding:var(--size-6);
    box-shadow: var(--shadow-3);
}
.pricing-plan > div {
    display: flex;
    flex-direction: column;
    gap: var(--size-2);
}
.pricing-plan:hover{
    box-shadow: var(--shadow-5);
    transition: box-shadow 0.3s var(--ease-out-2);
}
@media(max-width: 768px){
    .pricing-plans {
        flex-direction: column;
        width: 100%;
    }
    .pricing-plan {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }
}
section + section {
    margin-block:var(--size-12);
}
.feature + .feature {
    margin-block-start:var(--size-8);
}
section {
    display:flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--size-4) var(--size-6);
    gap: var(--size-4);
}
.hero, .cta{
    min-block-size: 100vh;
}
.features {
    justify-content: space-between;
}

With so little CSS added and using many open props variables for sizes, borders, shadows, and easing curves, we can quickly have a better-looking site.

Optimizing when using the CDN

Open props is a pretty light package; however, using the CDN will add more CSS than you'll probably use. Importing individual parts of these props according to their utility is possible. For example, import just the gradients.

<link rel="stylesheet" href="https://unpkg.com/open-props/gradients.min.css"/>

Or even a subset of colors

<link rel="stylesheet" href="https://unpkg.com/open-props/indigo.min.css"/>

These are some options to reduce the size of your app if using the CDN.

Open Props with NPM

Open Props is framework agnostic. I want my site to use Vite. Vite is used by many frameworks nowadays and is perfect to show you the next examples and optimizations.

cd site
npm init -y
npm i -D vite

Let's add a script to our package.json file to start our development server.

{
 "scripts": {
    "dev": "vite"
  }
}

Now, we can start our application on port 5173 (default) by running the following command:

npm run dev

Your application should be the same as before, but we will change how we import open props. Stop the application and remove the open-props and normalize imports from index.html. Now in your terminal install the open-props package from npm.

npm i -D open-props

Once installed, import the props and the normalization files at the beginning of your styles.css file.

@import "open-props/style";
@import "open-props/normalize";

Restart your development server, and you should see the same results.

Optimizing when using NPM

Let's analyze the size of our package.

34.4 kb seems a bit much, but note that this is uncompressed. When compressed with gzip, it's closer to 9 kb.

Similar to what we did when using the CDN, we can add individual sections of the package. For example in our CSS file we could import open-props/animations or open-props/sizes. If this concerns you, don't worry; we can do much better.

JIT Props

To optimize our bundled styles, we can use a PostCSS plugin called posts-jit-props. This package will ensure that we only ship the props that we are using. Vite has support for PostCSS, so setting it up is straightforward. Let's install the plugin:

npm i -D postcss-jit-props

After the installation finishes, let's create a configuration file to include it.

touch postcss.config.js

The content of your file should look like this:

// postcss.config.js
const postcssJitProps = require('postcss-jit-props');
const OpenProps = require('open-props');
module.exports = {
  plugins: [
    postcssJitProps(OpenProps),
  ]
}

Finally, remove the open-props/style import from styles.css. Remember that this file contains the CSS variables we will add "just in time". Our page should still look the same, but if we analyze the size of our styles.css file again, we can see that it has already been reduced to 13.2kb. If you want to know where this size is coming from, the answer is that Open Props is adding all the variables used in the normalize file + the ones that we require in our file.

If we were to remove the normalize import, we would end up with much smaller CSS files, and the number of props added just in time would be minimal. Try removing commenting it out (the open-props/normalize import) from the styles.css file. The page will look different, but it will be useful to show how just the props used are added.

2.4kB uncompressed. That's a lot less for our example. If we take a quick look at our generated file, we can see the small list of CSS variables added from open props at the top of our file (those that we use later on the file).

Open props ships with tons of variables for:

Colors
Gradients
Shadows
Aspect Ratios
Typography
Easing
Animations
Sizes
Borders
Z-Index
Media Queries
Masks You probably won't use all of these but it's hard to tell what you'll be using from the beginning of a project. To keep things light, add what you need as you go, or let JIT handle it for you.

Conclusion

Open props has much to offer and can help speed your project by leveraging some decisions upfront and providing a sensible set of predefined CSS Variables. We've learned how to install it (or not) using different methods and showcased how simple it is to use. Give it a try!

This Dot is a consultancy dedicated to guiding companies through their modernization and digital transformation journeys. Specializing in replatforming, modernizing, and launching new initiatives, we stand out by taking true ownership of your engineering projects.

We love helping teams with projects that have missed their deadlines or helping keep your strategic digital initiatives on course. Check out our case studies and our clients that trust us with their engineering.

Ignacio Falk

I love to learn new things and share what I know. Mentor, Writer, Speaker Member of the local community

@flakolefluk @flakolefluk

How to Apply a Gradient Effect to Text with CSS

I will be taking us through some ways we can add gradient effect to text. This tutorial also assumes that you have an understanding of CSS and its properties like background, and background-color. Creating Gradient Effects Before we start creating gradient effect, let's understand a few concepts. What is gradient? Gradients let you display smooth transitions between two or more specified colors. You can read more about Gradient here. Linear Gradient Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose. Below, you will find a code example. You can read more about Linear Gradient. Radial Gradient Radial gradients differ from linear ones in that they start at a single point and emanate outwards. Gradients are often used to simulate a lighting, which as we know isn’t always straight. So they can be useful to make a gradient seem even more natural. Below you will find a code example: You can read more about Radial Gradient. Code We will be exploring various ways we can add gradients to text, but lets look at the CSS properties that can help us achieve this. - background - -webkit-background-clip - -webkit-text-fill-color Background The CSS background properties are used to add background effects for elements. More on CSS background. -webkit-background-clip The background-clip property defines how far the background (color or image) should extend within an element. More on CSS background clip. -webkit-text-fill-color The text-fill-color property specifies the fill color of characters of the text. If this property is not specified, the value of the color property is used. The text-fill-color and the color properties are the same, but the text-fill-color takes precedence over the color if the two have different values. More on CSS Text fill color. Full Gradient What we mean here is applying gradient effect on the entire text. In our code sample we used both radial and linear gradient. Partial Gradient What we mean here is applying gradient effect to some part of the text. In our code sample, we used both radial and linear gradient. There are various ways to go about this depending on what you wish to achieve. First Concept This concept involves us first applying the gradient to the entire text, then targeting the part on the text we dont wnat the gradient to affect by wrapping that part of the text with any tag of your choice. But in our case, we used span tag. ` Second Concept This concept involves us giving the entire text a color using the css color property, and then giving the part of the text, we want to apply the gradient effect by wrapping the part of the text with any tag of your choice. But in our case, we used span tag. ` _The code snipet below shows the examples in full and can be practiced with_ Source Code If you have any issue at all, here is a link to the git repository Text gradient effect....

Sep 26, 2022

3 mins

CSS

Introducing the All New SvelteKit and SCSS Kit for starter.dev

Introduction At This Dot Labs, we love Svelte. We've even created a starter.dev kit for SvelteKit that you can use to scaffold your next frontend project using SCSS, TypeScript, Vitest and Storybook. What is starter.dev? Starter.dev helps developers get started building web apps with a variety of frameworks, showcasing how various libraries can fit together to solve similar problems. To do that, This Dot Labs has built a series of showcase apps that recreate the experience of using GitHub. What is SvelteKit? How is it unique? SvelteKit is a full-stack framework that gives you the best of both worlds: the page is server-side rendered on your first visit, but when you navigate to other pages, they are client-side rendered. SvelteKit gives you levers for your pages to use SSR (server-side rendering), CSR (client-side rendering), SSG (static site generation), SPA (single page application) & MPA (multi page application). The core of SvelteKit provides a highly configurable rendering engine. Why SvelteKit and not Svelte? SvelteKit isn’t built on top of Svelte, but it’s a backend web framework where Svelte is used as the view layer. In theory, you could rip it out and replace it with another component framework that supports server-side rendering, and the same is true for other web frameworks. This allows us to deploy everything as a Node server, or even use Vercel and serverless functions. Other reasons to use SvelteKit include: 1. Pages (file based routing) 2. Endpoints (API routes) 3. Nested layouts (way more powerful than just nesting files because the segment of the URL maps to your component hierarchy) 4. Hot module replacement (instant updates in the browser when you make a change preserving application state) 5. Preprocessing (TypeScript, SCSS, and Pug among others) 6. Building component libraries (creating and publishing npm packages) 7. Deployment options (adapters for any platform) Building a SvelteKit showcase presented several challenges given its uniqueness and different approach to building web apps. This blog post details what we chose to include in our SvelteKit GitHub clone, and how we integrated them. Project Structures and Naming Conventions SvelteKit has unique conventions in its project structure and naming conventions. Project Files src This is the meat of the project: - lib contains your library code, which can be imported via the $lib alias, or packaged up for distribution using svelte-package. It can be imported by using the $lib/* alias. - server contains your server-only library code. SvelteKit will prevent you from importing these in client code. - components contain single responsibility components that are imported in our routes. They typically contain three files: .spec.ts for unit tests, .svelte and .stories.ts for storybook stories. Barrel files were not necessary here. - images contains images that can be imported, and used in the project. - stores contains state that needs to be accessed by multiple unrelated components, or by a regular JS module. - styles contains styles that can be imported in our Svelte applications. - params contains any param matchers your app needs - routes contains the routes of your application - app.html is your page template — an HTML document containing the following placeholders: - %sveltekit.head% — link and script elements needed by the app, plus any head content - %sveltekit.body% — the markup for a rendered page. This should live inside a or other element, rather than directly inside the body element, to prevent bugs caused by browser extensions injecting elements that are then destroyed by the hydration process. SvelteKit will warn you in development if this is not the case - %sveltekit.assets% — either paths.assets, if specified, or a relative path to paths.base - %sveltekit.nonce% — a CSP nonce for manually included links and scripts, if used - hooks.server.ts contains your application's hooks static Any static assets that should be served as-is, like robots.txt or favicon.png, go in here. svelte.config.js This file contains your Svelte and SvelteKit configuration. tsconfig.json Since SvelteKit relies on certain configuration being set a specific way, it generates its own .svelte-kit/tsconfig.json file, which your own config extends. vite.config.js A SvelteKit project is really just a Vite project that uses the @sveltejs/kit/vite plugin, along with any other Vite configuration. Routing To get a deep dive of how routing works with SvelteKit, please check out this article. SCSS SvelteKit supports a number of CSS preprocessors. For people who are new to Svelte or SvelteKit, the syntax for using SCSS or SASS is simple, just need to add the lang="sass" attribute to the style tag. ` ` Then add SCSS support with the svelte-preprocess package. ` Why SCSS and not Tailwind? Tailwind CSS has been used by several other starter kits. We otherwise decided to go with SCSS as the syntax is simple and easily understood by even beginners. Vitest Test Driven Development (TDD) is one of the best ways to ensure your code works like it's supposed to work. It can also help you create reliable builds during continuous deployments. Vitest is an up-and-coming testing framework which has similar functionality to Jest. Since we are using Vite as our build tool for Svelte in this kit, Vitest has very good integration with Vite, and offers a similar testing environment without needing extra configuration. To test Svelte components that seemed to be hard to test. Such as two-way bindings, name slots, Context API, etc., we need to add more configuration. We added @testing-library/svelte, jsdom and @testing-library/jest-dom that allow for similar functionality as Jest. ` We ensured the $lib alias is supported in our tests by resolving the alias in our vite.config.ts. We also added a setupTest.ts to add @testing-library/jest-dom matchers & mocks of SvelteKit modules. ` ` If you want to see some test recipes you can use on your SvelteKit projects, check out our SvelteKit-SCSS Github showcase. Storybook Like many of the other starter.dev kits, the SvelteKit starter uses Storybook to interactively view and build components in isolation. For more information on Storybook and SvelteKit visit the article. Linting ESLint and Prettier are useful tools for keeping the project neat and consistent among multiple contributors. To quickly format your project, run: ` Running ESLint and Prettier as part of your git workflow is important because it helps you fail fast. This helps us, as contributors, to have a more consistent production codebase. We achieved this in our SvelteKit-SCSS Github showcase with the help of Husky, lint-staged and Prettier. How does lint-staged work? It's specifically designed to work on "staged" files, which are files you've changed or created, but haven't yet committed to your project. Working on staged files limits the number of files you need to lint at any given time, and makes the workflow faster. We configured lint-staged in our package.json. This runs Prettier pre-commit, and ensures the code is up to our ESLint standards. ` The commands you configure will run "pre-commit". As you're attempting to commit files to your project you'll see ESLint run in your terminal. Once it's done you may have successfully committed, or find yourself with linting errors you need to fix before you're able to commit the code. This works hand-in-hand with husky. Husky uses distinct bash files with filenames that match the workflow step they correspond to, e.g. "pre-commit". ` Running ESLint, or Prettier as part of your git workflow is important because it helps you fail fast, which helps contributors have a more consistent production codebase. Conclusion SvelteKit is a relatively new and novel framework. The structure represents our best judgment of how a basic SvelteKit application should be. We welcome everyone to take a look, and contribute back to the SvelteKit-SCSS and our SvelteKit-SCSS Github showcase if you have any improvements that you would like to propose!...

Apr 12, 2023

7 mins

SvelteCSS

Declarative Canvas with Svelte

The element and the Canvas API let us draw graphics via JavaScript. However, its Imperative API can be converted into a Declarative one using Svelte. The technique to achieve this will require you to use what is sometimes called _Renderless Components_. Renderless Components In Svelte, all the sections of a .svelte file are optional, including the template. This allows us to create a component that will not be rendered, but can contain some logic in the section. Let's create a new project. I'll be using Vite and Svelte for this tutorial. ` Now that our project is ready, let's create a new component. ` We will be printing a message to the console when the component is initialized. Let's see how it works by making some changes to the entry point of our application. ` If we start our server and open the developer tools in our browser, we will see the message printed. It's working. Note that this component, even if it doesn't have a template, still behaves as a regular component instance, and you will still have access to the component Lifecycle methods. Let's test it. ` We added a second message to be shown after the component is mounted. Both messages are now printed in the expected order. This means that we can use our Renderless Component just as any other Svelte Component. Let's revert the changes to the main.ts file, and "render" the component inside the App component. ` ` Finally, let's also modify our Renderless component to log more meaningful messages. ` It's important to note the order of initialization and mounting of the components. This will be important when we create our Canvas and _renderless_ Components. There's a third way to mount our component and that's passing it as a child of another component. This is also called content projection. And the way that we do this is by using slots. Let's create a container component that will render elements in a slot. I will also add more elements that will live along with the element. ` Let's also add a _prop_ to the Renderless component to add some kind of identifier to it. ` Finally, in our App, we update the template to use the container, and pass multiple instances of Renderless to it. ` Now, we can see the rendered Container and the _renderless_ components logging when they are initialized and mounted. Now that we've learned about renderless components, let's use them with the element. and the Canvas API The canvas element cannot contain any children, except for a fallback element to render. Anything that you may want to render inside the canvas must be done using its imperative API. Let's create a new Canvas component and render an empty canvas. ` Update the App component to import and use Canvas. ` If we open the browser dev tools, we should see a canvas element rendered now. Rendering elements inside canvas As mentioned previously, we cannot add elements to draw inside our canvas. We have to use the API to do it. To get a reference to the element, we will use the bind:this directive. It's important to understand that, to use the API, we need the element to be available. This means that we will have to draw after the component is mounted. ` Now let's draw a line (I'm removing all the logging from the component for clarity). ` To draw, we need the canvas context. So we must do it after mounting the component. Then, we can start drawing using the canvas API. If we want to add a second line, we would have to add a new block of code. ` We can see that we are starting to add more and more code to our component just by drawing simple shapes. This can get out of hand quickly. We can create helper functions to draw the lines. ` The code becomes more readable, but we are still delegating all the responsibility to the Canvas component, which will translate into having a very complex component. We can avoid this by using _renderless_ components and the Context API. We know a few things so far: * We require the Canvas context to draw. * We can get the context after the component is mounted. * Child components are mounted before the parent component. * Parent components are initialized before child components. * We can use to mount child components. We want to split our component into multiple. For this example, we want the Line component to draw itself. Canvas and Line are coupled. A Line component cannot be drawn without a Canvas, and it needs the canvas context. The problem is that the context is not available when we mount the Child component (Line is mounted before Canvas), so we need a different approach. Instead of passing the context to draw itself, we will let the parent component know that a child component needs to be drawn. We'll communicate the Canvas and Line components using Context. Context is a way for two or more components to communicate. Context can only be set or retrieved during initialization, which is what we need in our case. Remember that Canvas is initialized before our Line component. Let's start by moving the line rendering to its own component. I will also move some types to their own file to be shared across components. ` ` This is very similar to what we had in our Canvas component, but abstracted to a reusable component. Now we need a Communicate Canvas and Line components. Our Canvas will work as the orchestrator of all the rendering. It will initialize all the Child components, gather the rendering functions, and draw them when required. ` The first thing to note is that our template has changed and now we have a element beside our canvas. It will be used to mount any children that we pass into our canvas-- in our case, the Line components. These will not add any HTML element. In the script section, we added an array to hold all the render functions to draw. We also set a new context. This has to be done during initialization. Our Canvas is initialized before Line, so we set two methods here. These are methods to add and remove a function from our array that holds them. Then any Child component can have access to this context, and call its methods. That's exactly what we'll do next in the Line component. ` We register the function using the context previously set by Canvas when we mount this component. We could do it on initialization too because we know that context will be available anyway. But I prefer doing it after the component is mounted. And when the element is destroyed, it removes itself from the list of rendering functions. Finally, let's update our App to use the new Canvas and Line components. ` We've successfully updated our Canvas component to use a declarative approach. A few things are missing though. We are only drawing once when the Canvas component is mounted. We need to make the canvas render frequently to update itself when changes happen (unless you only want to render once). Note that we would have to do it with or without the approach we've taken. And it's a common way of updating the canvas contents. ` We achieve this rerendering of the canvas using the requestAnimationFrame method. The callback passed in will be run before the browsers' repaint. First, we create a new variable to assign the current frameId (required for canceling the animation). Then, when we mount the component, we invoke requestAnimationFrame and assign the returned id to our variable. So far, the end result is as before. The difference is now in our draw function that will request a new animation frame each time after being drawn. We will also clear our canvas by default. Otherwise, when we are animating, each frame would be drawn on top of each other (This might be the desired effect. In that case the clearFrame prop can be set to false). Our canvas will update each frame until we destroy our component and cancel any current animation using the id previously stored. Adding more features The basic functionality for the components is working, but we may want to add more features. For this example, we will be exposing two events: onmousemove and onmouseleave. To do this, we need to add a few things two our Canvas component. In the template, change the canvas element to this: ` Now, the events can be handled in our App: ` Svelte is responsible for updating the end position of the line. But our Canvas component is the one used to update the canvas content (using requestAnimationFrame). Wrapping up I hope this tutorial helps you as an introduction to use canvas in Svelte, but also to understand how we can turn a library with an Imperative API into a more declarative one. There are a few examples of these ideas with more complex examples using a similar approach, like svelte-cubed or svelte-leaflet. From the svelte-cubed docs: This ... ` becomes... ` We just scratched the surface of the Canvas API, but you can extend it for your own needs, or even create a library for it!...

Jul 21, 2022

8 mins

Svelte

Quick Guide to Playwright Fixtures: Enhancing Your Tests

Introduction Following our recent blog post on migrating E2E tests from Cypress to Playwright, we've identified opportunities to enhance our test scripts further. In this guide, we'll delve into the basics of Playwright fixtures, demonstrating their utility and flexibility in test environments. Playwright fixtures are reusable components that set up and tear down the environment or conditions necessary for tests. They are crucial for writing clean, maintainable, and scalable tests. Fixtures can handle tasks like opening a browser, initializing a database, or logging into an application—actions you might need before running your tests. As a practical example, we'll revisit one of the tests from our previous post, enhancing it with a new fixture to streamline the testing process and significantly improve maintainability. This post is designed to provide the foundational skills to integrate fixtures into your testing workflows effectively, giving you the confidence to manage and maintain your test scripts more efficiently. Creating Our First Fixture To illustrate the power of fixtures in Playwright, let’s consider a practical example from a test scenario in our project. Below is a snippet of a test case from our newsletter page: ` This test scenario navigates to the newsletter page, fills in an email, submits the form, and checks for a success message. To optimize our test suite, we'll refactor common actions like navigation, form completion, and submission into reusable fixtures. This approach makes our tests cleaner and more maintainable and reduces redundancy across similar test scenarios. Implementing the Fixture Here’s how the fixture looks: ` This fixture encapsulates the actions of navigating to the page, filling out the email field, and submitting the form. By abstracting these actions, we simplify and focus our test cases. Refactoring the Test With the fixture in place, let’s see how it changes our original test file: ` A beforeEach method to reset the state of the NewsletterPage fixture ensures a clean and consistent environment for each test scenario. This practice is crucial for maintaining the integrity and reliability of your tests. By leveraging the NewsletterPage fixture, each test within the "Newsletter page" suite starts with a clean and pre-configured environment. This setup improves test clarity and efficiency and aligns with best practices for scalable test architecture. Conclusion As we've seen, fixtures are powerful tools that help standardize test environments, reduce code redundancy, and ensure that each test operates in a clean state. By abstracting common setup and teardown tasks into fixtures, we can focus our testing efforts on what matters most, verifying the behavior and reliability of the software we're developing. Remember, the key to successful test management is choosing the right tools and using them wisely to create scalable, maintainable, and robust testing frameworks. Playwright fixtures offer a pathway towards achieving these goals, empowering teams to build better software faster and more confidently....

Jul 26, 2024

2 mins

Testing

Exploring Open Props and its Capabilities

Exploring Open Props and its Capabilities

What is Open Props

Installing open props

From Zero to Open Props

Adding open props via CDN

Working with CSS variables

More CSS Variables

Optimizing when using the CDN

Open Props with NPM

Optimizing when using NPM

JIT Props

Conclusion

Ignacio Falk

You might also like

How to Apply a Gradient Effect to Text with CSS

Introducing the All New SvelteKit and SCSS Kit for starter.dev

Declarative Canvas with Svelte

Quick Guide to Playwright Fixtures: Enhancing Your Tests

You might also like

How to Apply a Gradient Effect to Text with CSS

Introducing the All New SvelteKit and SCSS Kit for starter.dev

Declarative Canvas with Svelte

Quick Guide to Playwright Fixtures: Enhancing Your Tests