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 …
The post Rendering Lists Using React Virtualized appeared first on CSS-Tricks.

Link: https://css-tricks.com/rendering-lists-using-react-virtualized/

Custom List Number Styling

How about a classic CSS trick! This isn’t even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.

Let’s say all you wanna do is style the dang numbers:
See the Pen Custom List Style 2 by Chris Coyier (@chriscoyier) on CodePen.
Here’s an example from the CodePen Challenges pages:
See …
The post Custom List Number Styling appeared first on CSS-Tricks.

Link: https://css-tricks.com/custom-list-number-styling/

Ordered Lists with Unicode Symbols

Ordered lists are among the oldest and most semantically rich elements in HTML. Anytime you need to communicate sequence or ranking, the

    tag is there to help. The default appearance of the <ol> tag presents numbers next to each item in the list. You can use the list-style-type property in CSS to change the default to use Roman numerals or the letters of the alphabet. If you are feeling exotic, you can even use numbering from other cultures like …

    Ordered Lists with Unicode Symbols is a post from CSS-Tricks

    Link: https://css-tricks.com/ordered-lists-unicode-symbols/