This Dot Blog
This Dot provides teams with technical leaders who bring deep knowledge of the web platform. We help teams set new standards, and deliver results predictably.
Exploring Open Props and its Capabilities
Let's explore how Open Props can help your web development workflow....
Jun 7, 2024
9 mins
The CSS / Utility hybrid approach with Tailwind v4
The post concludes with a look at modern CSS and interesting hybrid utility patterns with the Tailwind v4 release...
May 10, 2024
4 mins
CSS Hooks: A new way to style your React apps
With the rise of CSS in JS libraries like Material UI and Chakra, developers have started creating dynamic and reusable styles using JavaScript; however, the performance implications of these libraries have led to the exploration of alternative solutions....
Feb 28, 2024
5 mins
New Web APIs, CSS, Tailwind, and RSC with Chance Strickland, Ben Lesh, Adam Rackis, and Tracy Lee
Tracy Lee, Adam Rackis, and Ben Lesh host special guest Chance Strickland to discuss topics around new web APIs, CSS, Tailwind, and react server components. They go into detail about a new web API that allows the implementation of dark mode to be really easy, and get excited about how many of these new APIs open up new possibilities for creating user-friendly interfaces that adapt to individual preferences. Chance is curious about the implementation of React Server Components, and how RSCs will be implemented across the React world, and what the implementations will ultimately look like and how wildly different they may be from company to company. Will a standard emerge? Chance also shares his excitement for advancements in CSS and the ability to achieve complex effects with simpler code. And of course, they don’t miss the chance to talk about Tailwind’s tradeoffs and advantages. The four of them emphasize the importance of staying curious and constantly seeking better ways to approach coding tasks. This mindset is crucial in an ever-evolving field like web development. By embracing new technologies and staying open to learning, developers can stay ahead of the curve and deliver exceptional results. Listen to the full episode here: https://modernweb.podbean.com/e/modern-web-podcast-s11e20-new-web-apis-css-tailwind-and-rsc-with-chance-strickland-ben-lesh-adam-rackis-and-tracy-lee/...
Jan 31, 2024
2 mins
How to add Dark Mode in your Web Application
Learn how to enable persistent Light / Dark Theme toggling on your website using CSS and Vanilla JS....
Dec 26, 2023
9 mins
Introducing the All New SvelteKit and SCSS Kit for starter.dev
Explore the power of SvelteKit with This Dot Labs' SvelteKit-SCSS starter kit. Harness SSR, CSR, and Vitest and Storybook all ready and configured for you to use....
Apr 12, 2023
7 mins
Introducing the New SolidJS and Tailwind CSS Starter Kit
We are delighted to announce our SolidJS + Tailwind Starter Kit on Starter.dev to help you build your next project with SolidJS and Tailwind CSS in no time. In this article, we will walk you through the kit, and how it is a great option for building your next project. This kit has been designed to build tiny and optimized web applications on both the JavaScript and CSS sides. It's very useful when the load time of your application's files is critical, like when the internet connection is slow or when you are building a mobile application for a targeted audience. Why SolidJS? SolidJS is a declarative, efficient, and flexible JavaScript library for building user interfaces. It lets you build web applications using a declarative API that you’re already familiar with. It’s a great alternative to React, Vue, and other popular JavaScript frameworks. It’s also a great choice for building static sites. The best feature of SolidJS is how tiny its build bundles are. It helps you ship less JavaScript to the browser. Why Tailwind CSS? Tailwind CSS is a utility-first CSS framework for rapidly building custom user interfaces. It makes it easy to build complex UIs without having to write custom CSS. And the best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. --- Starter Kit Features - SolidJS - A declarative, efficient, and flexible JavaScript library for building user interfaces. - Tailwind CSS - A utility-first CSS framework for rapidly building custom user interfaces. - Vite - A build tool that aims to provide a faster and leaner development experience for modern web projects. - Storybook - An open-source tool for developing UI components in isolation for React, Vue, and Angular. - Vitest - A fast and simple test runner for Vite. - TypeScript - A typed superset of JavaScript that compiles to plain JavaScript. Tailwind CSS Tailwind CSS makes it easy to build complex UIs without having to write custom CSS. The best feature of Tailwind CSS is how customizable it is. It helps you ship a very small CSS file to the browser. Also, Tailwind CSS is great at scale, so you can add as many utilities as you want. Storybook Storybook is an open-source tool for developing UI components in isolation for React, Vue, Angular, and others. It makes building stunning UIs organized and efficient. It also helps you build components faster, and reuse them in your projects. It also helps you document your components. This kit comes with Storybook pre-configured. You can start using it right away. Why Vite? Vite is a build tool that aims to provide a faster and leaner development experience for modern web projects. It's a great alternative to Webpack. It's fast and easy to use. It also helps you ship less JavaScript to the browser. It's a great choice for building static sites. This kit comes with Vite pre-configured. You can start using it right away. Testing This kit comes with Vitest pre-configured. Vitest is a tool that is built with Vite in mind from the start, taking advantage of its improvements in DX, like its instant Hot Module Reload (HMR). This is Vitest, a blazing fast unit-test framework powered by Vite. It's a great alternative to Jest. It's fast and easy to use. How to get started? - Run npx @this-dot/create-starter to start a new project from one of the kits in the Starter CLI library. - Select the SolidJS, Tailwind kit from the CLI library options - Name your project - cd into your project directory and install dependencies using the tool of your choice (npm, yarn or pnpm) - Copy the contents of the .env.example file into a .env file When to use this kit? This kit is a great alternative to React and SCSS. It focuses on performance and developer experience by providing a fast and leaner development experience for modern web projects. It also helps you write less CSS, and less JavaScript. Options to scale the kit to fit your needs In this section, we will walk you through the options you have to scale the kit even further to fit your needs. We didn't want to add too many options to the kit in order to keep it simple and easy to use, but we also wanted to provide you with the ability to scale the kit. PWA PWA is a great way to make your app available offline, and installable on mobile devices. It caches your app's assets to make it load faster. It also helps you build a great user experience, and increase your app's engagement by providing push notifications. If you want to add PWA support to the kit, you can use the PWA Vite Plugin to add PWA support to the kit. It covers the PWA integrations for Vite, and the ecosystem with zero-configuration and is framework-agnostic. Conclusion So as we discussed in this article this SolidJS starter kit is a great way to start your new SolidJS project because it has most of the tools you need installed and preconfigured for you from Storybook to Testing, and even the PWA configurations. We hope you enjoyed this article, and we hope you will enjoy using the kit. If you have any questions or suggestions, please feel free to reach out to us on Twitter or Contact form....
Apr 7, 2023
4 mins
Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev
*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits, and structure more complex projects.* --- We are excited to announce our new starter.dev kit: a Nuxt 2 kit with Pinia as the state manager, and Tailwind for the styling. Ok, you might be thinking: "Why should I use a Nuxt 2 kit if Nuxt 3 is just around the corner?" Well, although Nuxt 2 is indeed in just maintenance mode by now, it is the most stable Nuxt version out there, and it is still really powerful, and a great framework for you next app. If you want to build a scalable and stable project, you might want to build it in this version! Ok, without any further ado, let’s see what this kit is all about, and how you can use it in your next application! Lets first talk about our technological options. Nuxt So why Nuxt.js? Lets kick off explaining what Nuxt.js actually is, and why we decided to create a kit with this technology. Nuxt is a framework built on top of Vue. It helps you handle complex configuration with an easy command-line setup, such as asynchronous routing with middlewares, great SEO using SSR, automatic code-splitting, auto imports and many more. It also brings its own features, such as build-in components, different ways for getting data from an API, 2 rendering methods (Server-side or Static sites), and even its own loader, transitions, and animations. At first, you might find Nuxt a bit challenging. For example, if you have never used SSR before, it takes time to get used to it, and you will have to change your mindset from Vue as they handle logic quite differently. But we think all that effort will be worth it, because we think Nuxt is a great framework for your next application. It can make your development experience more gratifying and faster, and your site more SEO friendly. Pinia Lets now dive in into the state management library that we choose. As stated from the previous official library Vuex, Pinia is now the default state management library for Vue. When sharing global state within your application, you want it to be secure and easy to use, especially if you are using SSR as we are more likely doing with Nuxt. Pinia is pretty good at helping us with those matters. Using Pinia with Nuxt 2 is a bit tricky but nothing crazy. You just need to install an extra package in order to use Composition-API inside Nuxt 2, make some config adjustments, and then you are good to go! Tailwind Tailwind is a great utility-first CSS framework that helps you build websites more quickly. Nuxt helps us set up Tailwind from scratch pretty easily when creating our project from the command-line. It does the config setups, and also installs the packages we need in order to start using it. What’s inside the Nuxt 2 Kit? Our main goal when creating a starter.dev kit is to provide the essential things for your project without adding too much configuration to make them as flexible as possible. The kit includes two main components. The first one is a counter component, managing the state with a Pinia store and a Fetch component showing how data can be fetched inside Nuxt 2. Both of these components have their own Storybook component, and a test component written with testing library and MSW. These are basic examples to demonstrate how you can utilize these technologies together. The kit also includes ESlint, Prettier and Husky basic configurations. Also, the whole kit is written in TypeScript, which includes configuration within the kit as well. Our goal here is to save you all that time that it would take to get all these tools configured properly when starting a new project. How do I use the kit? With our starter.dev CLI! Of course there are other methods, but this one is for sure the easiest one. Just run the command npx @this-dot/create-starter. After running this command, a list of available starter.dev kits will show up. Of course you can select the best one that fits your needs. In this case, it will be the nuxt2-pinia-tailwind one! It will ask for the name of your new project, and once that is written down, the CLI will start to prepare the kit for you! Now that the kit is installed, you can cd into your new project directory with the name you provided before, and then start coding! Oh, but don’t forget to install the dependencies needed with your package manager of choice (I recommend pnpm 🫣). Take a look at https://starter.dev/kits/nuxt2-pinia-tailwind/ so you can have a deeper view of the kit! Where you can read the README.md file for more detailed documentation, as well as looking at the source code, don't forget to read the package.json file to see the scripts available for the kit. Happy coding!...
Dec 14, 2022
4 mins
Introducing next-react-query-tailwind for starter.dev
*Starter.dev is an open source community resource developed by This Dot Labs that provides code starter kits in a variety of web technologies, including React, Angular, Vue, etc. with the hope of enabling developers to bootstrap their projects quickly without having to spend time configuring tooling. We ship starter kits with showcases to demonstrate how to best utilize these kits and structure more complex projects.* --- We’re excited to announce a new kit and showcase featuring Next.js, React Query, and Tailwind CSS. This kit features some of the most popular tools available in the React ecosystem. We wanted to provide our team and the community with a starter kit that uses these libraries and that also comes setup and configured with all of the common tools and utilities that we use when building a new website or app. These include Jest for unit and component testing, Mock Service Worker for network request mocking, Storybook for a component library, ESlint for linting, and Prettier. It can take a substantial amount of time, when starting a new project, to get all these tools configured properly. So, it was important to us when designing these kits to make them as effortless as possible for users. We’ve started to use this kit at This Dot Labs where it has saved us a lot of time on our projects already. We’re excited to make this kit available to the community as well. The easiest way to get started on your new project with next-react-query-tailwind is to install it via the starter.dev CLI: npx @this-dot/create-starter. This will open a prompt that lists the available starter.dev kits. Select next-react-query-tailwind, provide the name of your project, and the CLI will download the kit for local development. Once you have it installed and cd into your new project directory, it’s as simple as running yarn (or your package manager of choice) to install the packages, and yarn dev to start the Next.JS development server. For more detailed documentation, see the kits README.md file. The starter kit itself is lean. The goal is to provide the things you need for your project and then get out of the way. It includes a Counter component with a co-located component test and a Greeting component that makes an API request with React Query also with a co-located test file. These are just a couple of basic examples to get you started and to help demonstrate how you can utilize testing and Storybook out of the box. If you’re new to this stack or just want to see what a full-scale application built on it looks like, we’ve got you covered. Along with this awesome starter kit, we are also releasing a demo application that we built with it to really show off how you can use it and some good patterns for developing your apps with the tools available in the starter kit. Our demo app is a GitHub clone and it is available on GitHub and viewed at http://next-react-query-tailwind.starter.dev/. For the demo app, we combined React Query with GraphQL using graphql-code-generator which generates TypeScript types for all of our queries in the app. React Query makes the experience snappy by caching the results from all of our GraphQL queries while we use the app. We use Mock Service Worker to mock all of the queries from our application so it can run offline, in Storybook, or in our component tests. We built our GitHub clone using an MVC style architecture in React where we have specific components responsible for fetching and marshaling our data SomeComponent.data, and a view component responsible for rendering it SomeComponent.view. Our Tailwind styles are defined in CSS modules to keep our markup clean and uncluttered. We have our Storybook stories, component tests, and mock api responses co-located with our components in a single directory ie: SomeComponent -> SomeComponent.stories, SomeComponent.test.tsx etc. Here’s an example of the files included in our GitHub clones FileViewer component: These patterns and structures we’ve used throughout our demo app worked really well for us. Everything is nicely organized making it very easy for anyone to jump in and contribute to the project. Remember that this is just an example of how you can use the tools in this starter kit to build out your next (pun intended) application – but our starter kit leaves the door open for you to structure in whatever way fits best with your project’s needs. Have a request or a question about a starter.dev project? Reach out in the issues to make your requests or ask us your questions. The project is also 100% open sourced so feel free to hop in and code with us!...
Nov 8, 2022
4 mins
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
What's new in Tailwind CSS 3?
Introduction Tailwind CSS has become a very popular CSS framework recently and is loved by developers the world over. It helps developers be more productive, ship incredibly tiny CSS files and focus on one file for each component instead of jumping between several files. Tailwind CSS v3 Tailwind CSS v3 was released at the end of 2021, and it has even more cool features. Just-In-Time Engine "Just-in-time", or @tailwindcss/jit, is a new faster engine to work with on the development mode. Before Tailwind CSS 3, the production was adding every class you may need to the development CSS bundle, and at the end, you would end up with a giant CSS file that could be 15 to 20 MB. The new engine is so much faster. It detects all the classes that you use, and it will update the output file live, so it takes only a few milliseconds to fire up the server. Scroll Snap API Scroll snap is a new feature in CSS that sets how strictly snap points are enforced on the scroll container in case there is one. Tailwind CSS 3 has some new classes to handle that in a very simple way like for: - Scroll behavior: we have to classes scroll-smooth and scroll-auto - Scroll margin: use the scroll-{margin class} like scroll-m-2 or scroll-my-4 - Scroll padding: exactly like scroll margin it’s scroll-{padding class} - Scroll snap align: it’s used to snap every element to a specific direction on scroll like span-start, snap-end and snap-center - Scroll snap stop: it used to force a snap container to always stop/ not stop on an element before the user can continue scrolling to the next item. They are snap-always and snap-normal. - scroll snap type: it used to control how strictly snap points are enforced in a snap container like snap-none, snap-x, snap-y, snap-both etc More Colors The new version contains new 8 colors: sky, blue, indigo, violate, purple, fushia, pink, and rose. So the total now is 15 colors! Colored Box Shadows This is a cool feature you can use the shadow utility shadow-{color}. And we can also change the opacity of the box shadow by using the utility shadow-{color}/{opacity} like: ` Print Modifier It’s a new feature that allows you to control how the page will look when people print it like: ` Colored Underline Styles Also it has new text decoration utility classes to make fancy underline styles to change the text decoration’s color, style, thickness, and offset. These are used to extend the decoration of a text by styling the underline like decoration-{color} is used to set the text underline color and decoration-{solid | double | dotted | dashed | wavy} used to change the text underline’s style. Multi-Column Layout Tailwind CSS 3 supports colums. It’s a new way to handle the layouts, and it’s very useful in things like for example, footer: ` Modern Aspect Ratio API Use the aspect-{ratio} utilities to set the desired aspect ratio of an element like aspect-auto, aspect-square, or aspect-video. RTL and LTR Modifiers Also, we have two new modifiers ltr and rtl to provider good user experience in multidirectional websites. You can use them, like: ` Portrait and Landscape Modifiers Also, we have new modifiers that give us more control over the page, like: ` Wrap Up Thanks for checking out my blog on the latest updates to Tailwind CSS 3. I hope that this will help guide you as you play around with the newest features! Of course, if you want any further clarification, you can reach out to me on Twitter!...
Sep 1, 2022
3 mins
JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract
Writing custom CSS throughout your app is time-consuming and error-prone. Relying on Tailwind or similar frameworks locks you into their way of doing things. But with Vanilla Extract, you can pursue the happy medium path: write type-safe CSS, create your own utility classes, and compile everything down to static CSS files at build time. Tom walked us through how to setup and use Vanilla Extract to create themeable CSS architecture in our example app. Helpful links - GitHub repo: https://github.com/tvanantwerp/vanilla-extract-javascript-marathon/tree/empty-for-live-code - Youtube video: https://www.youtube.com/watch?v=LxUVASrxxu4 To learn more about Vanilla Extract, head over to their docs for a more detailed look into what working with Vanilla Extract is like. With Vanilla Extract, we don't need to run any CLI commands like other processors. We create the appropriate *.css.ts files which get evaluated at build-time, and turned into properly scoped class names. One thing to point out is our example is uses Vite. Don't forget to look at the config file we've modified that will look slightly different than the basic one created by the Vite CLI. Install the dependencies You can also reference the complete setup docs. > npm install @vanilla-extract/css @vanilla-extract/webpack-plugin Create our folder structure Let's get started by creating our folder structure that will hold our theme definitions. In the end, your folder structure is entirely up to you, but for the sake of this example, we will create a theme folder and within that we will add theme.css.ts. In this file, we will describe our different themes. We also have a sprinkles folder which is where we define our "utility classes" of sorts. It operates in a similar way to how TailwindCSS operates. These sprinkles are styles we can include in other parts of our code. We can see in our sprinkles file how we have defined certain custom styles. And if we head over to our button.css.ts, we can see where and how our custom styles are used. It's like creating style variables within our CSS so we can keep a relatively consistent design feel across our app. Our defined CSS styles will return classes with our properties defined. This is an example class from our Button/index.tsx: className={buttonStyle[color]}. This is a simple way to add different variants and styles to our components without bloating the component itself. For the sake of covering all our bases, we also defined a few global styles. Wrap-up Have a look at the example repo for a detailed look at how to use Vanilla Extract in a more in-depth way. We hope this has helped you understand how Vanilla Extract is used at a higher level, and how you can leverage it to create your own type-safe CSS styles....
Apr 6, 2022
3 mins