css Archives - Page 2 of 17

14Sep

By phpInfoNo Comments

CSS Tricks, Web Tricks

Using Immer for React State Management

We make use of state to keep track of application data. States change as users interact with an application. When this happens, we need to update the state that is displayed to the user, and we do this using React’s setState. Since states are not meant to be updated directly (because React’s state has to be immutable), things can get really complicated as states become more complex. They become difficult to understand and follow. This is where Immer comes in and that’s what we’re going to look at in this post. Using Immer, states can be simplified and much easier to follow. Immer makes use of something called "draft" which you can think of as the copy of your state, but not the state itself. It’s as though Immer hit CMD+C on the state and then cmd+V’d it somewhere else where it can be sa...

Model-Based Testing in React with State Machines

14Sep

By phpInfoNo Comments

CSS Tricks, Web Tricks

Model-Based Testing in React with State Machines

Testing applications is crucially important to ensuring that the code is error-free and the logic requirements are met. However, writing tests manually is tedious and prone to human bias and error. Furthermore, maintenance can be a nightmare, especially when features are added or business logic is changed. We’ll learn how model-based testing can eliminate the need to manually write integration and end-to-end tests, by automatically generating full tests that keep up-to-date with an abstract model for any app. From unit tests to integration tests, end-to-end tests, and more, there are many different testing methods that are important in the development of non-trivial software applications. They all share a common goal, but at different levels: ensure that when anyone uses the application, ...

Using requestAnimationFrame with React Hooks

24Aug

By phpInfoNo Comments

CSS Tricks, Web Tricks

Using requestAnimationFrame with React Hooks

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way. TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for storing things like the timestamp and the request’s ID. useRef is not only for DOM references There are three ways to store variables within functional components: We can define a simple const or let whose value will always be reinitialized with every component re-rendering. We can use useState whose value persists across re-renderi...

17Aug

By phpInfoNo Comments

CSS Tricks

Draggin and Droppin in React

The React ecosystem offers us a lot of libraries that all are focused on the interaction of drag and drop. We have react-dnd, react-beautiful-dnd, react-drag-n-drop and many more, but some of them require quite a lot of work to build even a simple drag and drop demo, and some do not provide you with more complex functionality (e.g. multiple drag and drop instances), and if they do, it becomes very complex. This is where react-sortable-hoc comes into play. ? This tutorial requires basic knowledge of React library and React hooks. This library has “HOC" in its name for a good reason. It provides higher-order components that extends a component with drag and drop functionality. Let’s walk through an implementation of its functionalities. Spinning up a project For this tutorial we are going ...

12May

By phpInfoNo Comments

CSS Tricks, Web Tricks

Creating a Reusable Pagination Component in Vue

The idea behind most of web applications is to fetch data from the database and present it to the user in the best possible way. When we deal with data there are cases when the best possible way of presentation means creating a list. Depending on the amount of data and its content, we may decide to show all content at once (very rarely), or show only a specific part of a bigger data set (more likely). The main reason behind showing only part of the existing data is that we want to keep our applications as performant as possible and avoid loading or showing unnecessary data. If we decide to show our data in "chunks" then we need a way to navigate through that collection. The two most common ways of navigating through set of data are: The first is pagination, a technique that splits the s...

12May

By phpInfoNo Comments

CSS Tricks

Form Validation with Vuelidate

Form validation has a reputation for being tricky to implement. In this tutorial, we’ll break things down to alleviate some of that pain. Creating nice abstractions for forms is something that Vue.js excels at and Vuelidate is personally my favorite option for validations because it doesn't require a lot of hassle. Plus, it's really flexible, so we don’t even have to do it how I’m going to cover it here. This is just a launching point. If you simply want to copy and paste my full working example, it’s at the end. Go ahead. I won’t tell. Then your time spent is definitely under an hour and more, like, two minutes amirite?! Ahh, the internet is a beautiful place. You may find you need to modify the form we're using in this post so, in that case, you can read the full thing. We’ll start wit...

5May

By phpInfoNo Comments

CSS Tricks, Web Tricks

Making the Move from jQuery to Vue

As someone who has used jQuery for many. years and has recently become a Vue convert, I thought it would be an interesting topic to discuss the migration process of working with one to the other. Before I begin though, I want to ensure one thing is crystal clear. I am not, in any way whatsoever, telling anyone to stop using jQuery. That's been pretty fashionable lately, and heck, I wrote up something similar myself a few year ago ("How I'm (Not) Using jQuery"). If you get things done with jQuery and your end users are successfully using your site, then more power to you. Keep using what works for you. This guide is more for people who may be coming from years of jQuery experience and want to see how things can be done with Vue. With that in mind, I'm going to focus on what I consider "co...

15Mar

By phpInfoNo Comments

CSS Tricks

Writing Tests for React Applications Using Jest and Enzyme

While it is important to have a well-tested API, solid test coverage is a must for any React application. Tests increase confidence in the code and helps prevent shipping bugs to users. That’s why we’re going to focus on testing in this post, specifically for React applications. By the end, you’ll be up and running with tests using Jest and Enzyme. No worries if those names mean nothing to you because that’s where we’re headed right now! Installing the test dependencies Jest is a unit testing framework that makes testing React applications pretty darn easy because it works seamlessly with React (because, well, the Facebook team made it, though it is compatible with other JavaScript frameworks). It serves as a test runner that includes an entire library of predefined tests with the abilit...

4Jan

By phpInfoNo Comments

CSS Tricks

A Quick CSS Audit and General Notes About Design Systems

I’ve been auditing a ton of CSS lately and thought it would be neat to jot down how I’m going about doing that. I’m sure there are a million different ways to do this depending on the size and scale of your app and how your CSS works under the hood, so please take all this with a grain of salt. First a few disclaimers: at Gusto, the company I work for today, our engineers and designers all write in Sass and use webpack to compile those files into CSS. Our production environment minifies all that code into a single CSS file. However, our CSS is made up of three separate domains. so I downloaded them all to my desktop because I wanted to test them individually. Here’s what those files do: manifest.css: a file that’s generated from all our Sass functions, mixins and contains all of our d...

24Dec

By phpInfoNo Comments

CSS Tricks

Animating Between Views in React

You know how some sites and web apps have that neat native feel when transitioning between two pages or views? Sarah Drasner has shown some good examples and even a Vue library to boot. These animations are the type of features that can turn a good user experience into a great one. But to achieve this in a React stack, it is necessary to couple crucial parts in your application: the routing logic and the animation tooling. Let’s start with animations. We’ll be building with React, and there are great options out there for us to leverage. Notably, the react-transition-group is the official package that handles elements entering and leaving the DOM. Let’s explore some relatively straightforward patterns we can apply, even to existing components. Transitions using react-transition-group Fir...

14Dec

By phpInfoNo Comments

CSS Tricks

Rendering Lists Using React Virtualized

Working with data in React is relatively easy because React is designed to handle data as state. The hassle begins when the amount of data you need to consume becomes massive. For example, say you have to handle a dataset which is between 500-1,000 records. This can result in massive loads and lead performance problems. Well, we’re going to look at how we can make use of virtualized lists in React to seamlessly render a long list of data in your application. We’re going to use the React Virtualized component to get what we need. It will allow us to take large sets of data, process them on the fly, and render them with little-to-no jank. The setup React Virtualized already has a detailed set of instructions to get it up and running, so please check out the repo to get start...

13Dec

By phpInfoNo Comments

CSS Tricks

Keep Math in the CSS

There is a sentiment that leaving math calculations in your CSS is a good idea that I agree with. This is for math that you could calculate at authoring time, but specifically chose not to. For instance, if you needed a 7-column float-based grid (don't ask), it's cleaner and more intuitive: .col { /* groan */ width: 14.2857142857%; /* oh, I get it */ width: calc(100% / 7); } You could probably prove that the calc() takes the computer 0.0000001% longer, so explicitly defining the width is technically faster for performance reason — but that is about the equivalent of not using punctuation in sentences because it saves HTML weight. That math can a little more complicated as you continue. For example, like in our use cases for calc() article, what about columns i...

16Nov

By phpInfoNo Comments

CSS Tricks

Why monday.com is the Universal Team Management Tool for Your Team

This platform is perfect for teams sized at 2-to-200 — and gives every employee the same level of transparency. Every project management tool seeks to do the same instrumental thing: keep teams connected, on task and on deadline to get major initiatives done. But the market is getting pretty crowded, and for good reason — no platform seems to have gotten the right feel for what people need to see, and how that information should be displayed so that it’s both actionable/relevant and contextualized. That’s why monday.com is worth a shot. The platform is based off a simple, but powerful idea: that as humans, we like to feel like we’re contributing to part of a greater/effort good — an idea that sometimes gets lost in the shuffle as we focus on the details of getting stuff done. So proj...

4Nov

By phpInfoNo Comments

CSS Tricks

CSS Grid Areas

I think of named grid areas in CSS Grids as bring-your-own syntactic sugar. You don't absolutely need them (you could express grid placement in other ways), but it can make that placement more intuitive. And, hey, if I'm wrong about that, correct me in the comments. Say you set up a 3-column grid: .grid { display: grid; grid-gap: 1rem; grid-template-columns: 200px 1fr 1fr; } No rows defined there; those are implicit and will appear as needed. We could define them, we just aren't, because like most situations in web design, we don't care how tall the items are — the height will grow as needed to accomodate the content. Now, how do we place something in that very top-left position in the grid? We could tell the grid to place it there like this: .item { ...

25Oct

By phpInfoNo Comments

CSS Tricks

Building Skeleton Components with React

One of the advantages of building a Single Page Application (SPA) is the way navigating between pages is extremely fast. Unfortunately, the data of our components is sometimes only available after we have navigated to a specific part of our application. We can level up the user’s perceived performance by breaking the component into two pieces: the container (which displays a skeleton view when it’s empty) and the content. If we delay the rendering of the content component until we have actually received the content required, then we can leverage the skeleton view of the container thus boosting the perceived load time! Let’s get started in creating our components. What we’re making This is a great article that outlines how you can create a skeleton component, and th...