Skip to content

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.

Newest First
Tags: CSS
New Web APIs, CSS, Tailwind, and RSC with Chance Strickland, Ben Lesh, Adam Rackis, and Tracy Lee cover image

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/...

How to add Dark Mode in your Web Application  cover image

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....

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

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....

Introducing the New SolidJS and Tailwind CSS Starter Kit cover image

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....

Introducing the New Nuxt 2 - Pinia - Tailwind Kit in Starter.dev cover image

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!...

Introducing next-react-query-tailwind for starter.dev cover image

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!...

How to Apply a Gradient Effect to Text with CSS cover image

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....

What's new in Tailwind CSS 3? cover image

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!...

JavaScript Marathon: Building Your Own Style Framework With Vanilla Extract cover image

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....

How to Build a Blog with Next.js, Tailwind CSS and MDX cover image

How to Build a Blog with Next.js, Tailwind CSS and MDX

Intro Today, we will build a blog website with Next.js, Tailwind, and MDX without using a CMS at all! What is MDX? MDX is a combination of Markdown and JavaScript. MDX allows you to use JSX in your markdown content. You can import components, such as interactive charts or alerts, and embed them within your content. This makes writing long-form content with components a blast. Why will we use MDX? We will use MDX because it’s so powerful, and you can write more interactive articles with it! Also, you will not need to pay any money for a CMS! Let’s Start Here is the project that we will build using Next.js, Tailwind CSS and MDX Blog. First, let’s create a new Next.js project: ` After it’s done, go to the project directory: ` Then, run the dev server: ` Install Tailwind CSS Installing Tailwind CSS with Next.js is simple. First, we need to add some dev dependencies. ` Then, Initialize Tailwind CSS. ` You will find that there are two new files that have been added to the project - tailwind.config.js - postcss.config.js Now, we need to tell Tailwind CSS where to find the classes. Go to tailwind.config.js, and add these lines under content. ` Go to the styles/globals.css and add these three lines: ` And restart the dev server. You will find that the design has been changed like that: That means it has been installed successfully 🎉 Build the Layout We will create a very simple layout. Just add the main content in between a header and a footer. Let's create a new folder called components, and add three new components inside it. - Layout.js - Header.js - Footer.js I'll leave the Header.js and Footer.js to you. Let's start from Layout.js: ` > Important Tip: For some accessibility each page should have one , one , and one . Next Step, we need to wrap the whole application with our Layout.js but how? This is possible in Next.js since the pages/_app.js is a wrapper for the whole app. ` Finally let's go to pages/index.js and delete everything with this code. ` getPosts function We have the layout now! Let's work on the functionality. Create a new folder in the root directory and call it posts. Then, add some articles. Then, create another folder called helpers where we will add most used functions. Create a new file helpers/getPosts.js. After it, we will need to install a package called gray-matter. It's necessary to parse the mdx file content. ` And we will use this package to separate between the frontmatters, and the actual content of each post. We need only three important items in each post: title, date and description. For example: And this is how gray-matter works: ` where data is an object with the frontmatters data and content is the actual post. Second, we need to get a list of all the files inside the posts folder. ` files should return an array with the file names. ` Then, we need to loop through to get each one's data one by one. ` And return allPostsData from the getPosts function. getPost function It's a simpler version from getPosts function, we will pass the slug, and it should return the post data and content. ` Display the posts menu on the home page First, we need to create getStaticProps function on the home page. ` Then, let's get the posts in the page component. ` The post page This is the final step in the project when we will display the posts. In Next.js, to add a page with parameter in its path, you should name it between brackets. In our example, we will add [slug].js in the pages directory. We need to handle things in this page: getStaticPaths: We need this function in Next.js to tell it how many pages should be build in the build time from this page. ` Install next-mdx-remote It allows us to compile the MDX to HTML. ` getStaticProps: ` use MDXRemote to display the post: ` Style the post content After applying all of the above, you will find the post page like this. So we have to style it, install @tailwindcss/typography plugin. ` Then, add it to plugins in tailwind.config.js. ` Finally, add the prose class to the MDXRemote container. Final result: Here, you can find the code for the complete project: Next.js, Tailwind CSS and MDX Blog...

Announcing Angular GitHub Clone for starter.dev showcases cover image

Announcing Angular GitHub Clone for starter.dev showcases

The Engineering team at This Dot Labs loves building open-source software, providing resources to the community, and collaborating with our clients and partners. In cooperation with the Angular team, we have developed an implementation of GitHub’s user interface to deliver a project to the community that demonstrates the power of Angular while providing a fully featured open-source application for developers to use as a learning tool. We’re including this Angular GitHub Clone as part of a new initiative we’re working on called “starter.dev GitHub showcases”, and we are excited about its future. If you want to jump into the code, visit the GitHub repository, or you can check out the deployed application at https://angular-apollo-tailwind.starter.dev/. --- Our Goals Based on the initial projects by Trung Vo (Spotify clone / JIRA clone), we were looking to create an example project that goes beyond the basics of a TodoMVC application and really showcases the power of the technology. Specifically, we wanted to showcase Angular with routing, forms, and global state management. What we built For this project, we utilized Angular v13 with Apollo Client and Tailwind CSS to bring a GitHub user interface to life that features: User login via GitHub OAuth User Dashboard featuring a user’s top repositories and gists for quick access Repositories including file tree exploration, file viewing, issue lists with filtering, and pull requests with filtering User Profiles with near feature parity with the GitHub UI We also created a Serverless Framework based server to manage the OAuth handshake between the application and GitHub servers for security purposes. Why Apollo Client? At This Dot Labs, we love GraphQL, and GitHub has an amazing Public GraphQL API for consumption that we were able to leverage to build all the features in this application. Angular Apollo Client provides us with a GraphQL client and global state management out of the box. Check out our Issues Store to see how we were able to leverage Apollo Client to fetch data from Github and inject it into a ComponentStore for consumption. Why TailwindCSS? Other projects we’ve seen demonstrate how to extend existing component libraries, and we didn’t want to replicate this behavior. Instead, we thought it would be great to demonstrate how to use a CSS utility framework in conjunction with Angular component stylesheets. This afforded us an opportunity to show the Angular community the power of a new tool and further community excitement around a framework agnostic technology that has reshaped the CSS space. Why Serverless Framework? We wanted an easy to use backend ecosystem for any developers wanting to fork and test this application. Additionally, for those looking to deploy this backend, we wanted to find an economical solution. With the serverless-offline plugin, we were able to provide a local first development environment to developers while giving them the ability to ship the API to their favorite cloud hosting provider that supports serverless functions. How to use starter.dev showcases We recommend starting with an exploration of the codebase. To get started, follow these steps: ` In both .env files, you’ll see missing values for GITHUB_CLIENT_ID and GITHUB_CLIENT_SECRET. To generate these values, please follow GitHub’s Creating an OAuth App instructions to generate your personal client and secret that you can then input into your .env files. Now, you can run yarn start in both directories and point your browser to localhost:4200 to see the app running. From here, you can start exploring and experimenting with project components. What should I do next? The project README includes several ideas and features that we’ve vetted for feasibility. We’ve given some high level details about the feature and included how difficult we believe it will be to accomplish. We think these are great features to both improve the app and provide you with an opportunity to experience Angular without having to start your own project or find projects that need contributions. New to Angular and want feedback on your approach? Send us a pull request with your changes, and we’d be happy to review it and provide feedback. If it’s the first submission for a particular feature, we’d love to include your change and attribute it back to you. --- We plan on extending starter.dev showcases to include more Angular stacks and examples to give the community even more resources. If you’re interested in contributing to starter.dev showcases or have ideas for new features or showcases, we’d love to hear from you. Our GitHub issues are open for collaboration and pull requests are always welcome, but not required....

Creating Custom Scrollbars with React cover image

Creating Custom Scrollbars with React

Learn how to develop custom scrollbar in React by implementing your own using DOM elements and provide a smooth and interactive experience to your visitors....