Geoff Graham - 2/5 - CSS-Tricks

Build live comments with sentiment analysis using Nest.js

# May 22, 2018 Sponsored

Interestingly, one of the most important areas of a blog post is the comment section. This plays an important role in the success of a post or an article, as it allows proper interaction and participation from readers. This makes it inevitable for every platform with a direct comments system to handle it in realtime.

In this post, we’ll build an application with a live comment feature. This will happen in realtime as we will tap into the infrastructure made available by Pusher Channels. We will also use the sentiment analysis to measure whether comments are positive or negative, and display this information on an admin panel.

max-lines

# May 18, 2018 By Geoff Graham

The max-lines property limits the content of a block to a maximum number of lines before being cut off and can create a line clamping effect when combined with block-overflow. In fact, both properties make up the line-clamp property, which is a shorthand for combining them.

(more…)

line-clamp

The Ultimate Guide to Headless CMS

# May 17, 2018 Sponsored

The World Has Changed—So Must the CMS

Having a responsive website is no longer enough. Your audience expects a seamless and personalized customer experience across all their devices—the age of headless technology is coming.

Headless CMS is the next generation in content management for brands that want to stay ahead of the curve by engaging customers through the growing number of channels.

Download The Ultimate Guide to Headless CMS ebook for a deep look into what headless CMS is, and why it should be at the top of your list when choosing a new CMS.

Download the ebook now!

(more…)

block-overflow

# May 17, 2018 By Geoff Graham

The block-overflow property truncates text and indicates more content follows by inserting an ellipsis or custom string after a number of lines that is set by the max-lines property.

(more…)

line-clamp

Locate and identify website visitors by IP address

# May 10, 2018 Sponsored

Big thanks to ipstack for sponsoring CSS-Tricks this week!

Have you ever had the need to know the general location of a visitor of your website? You can get that information, without having to explicitly ask for it, by the user’s IP address. You’re just going to need a API to give you that information, and that’s exactly what ipstack is.

(more…)

offset-anchor

# May 4, 2018 By Geoff Graham

The offset-anchor property defines a point within the box it is applied as the anchor that moves along the offset-path.

That's kinda wordy, so let's break that down a bit.

(more…)

CSS Motion-Path

line-clamp

# April 27, 2018 By Geoff Graham

The line-clamp property truncates text at a specific number of lines.

The spec for it is currently an Editor's Draft, so that means nothing here is set in stone because it's a work in progress. That said, it's defined as a shorthand for max-lines and block-overflow, the former of which is noted as at risk of being dropped in the Candidate Recommendation.

(more…)

line-clamp truncation

VuePress Static Site Generator

# April 18, 2018 By Geoff Graham

VuePress is a new tool from Vue creator Evan You that spins up Vue projects that are more on the side of websites based on content and markup than progressive web applications and does it with a few strokes of the command line.

We talk a lot about Vue around here, from a five-part series on getting started with it to a detailed implementation of a serverless checkout cart

But, like anything new, even the basics of getting started can feel overwhelming and complex. A tool like VuePress can really lower the barrier to entry for many who (like me) are still wrapping our heads around the basics and tinkering with the concepts.

There are alternatives, of course! For example, Nuxt is already primed for this sort of thing and also makes it easy to spin up a Vue project. Sarah wrote up a nice intro to Nuxt and it's worth checking out, particularly if your project is a progressive web application. If you're more into React but love the idea of static site generating, there is Gatsby.

generator nuxt vue

New CSS Features Are Enhancing Everything You Know About Web Design

# April 13, 2018 By Geoff Graham

We just hit you with a slab of observations about CSS Grid in a new post by Manuel Matuzović. Grid has been blowing our minds since it was formally introduced and Jen Simmons is connecting it (among other new features) to what she sees as a larger phenomenon in the evolution of layouts in web design.

From Jeremy Keith's notes on Jen's talk, "Everything You Know About Web Design Just Changed " at An Event Apart Seattle 2018:

This may be the sixth such point in the history of the web. One of those points where everything changes and we swap out our techniques ... let’s talk about layout. What’s next? Intrinsic Web Design.

Why a new name? Why bother? Well, it was helpful to debate fluid vs. fixed, or table-based layouts: having words really helps. Over the past few years, Jen has needed a term for “responsive web design +”.

(more…)

css grid opinion responsive

Creating Themeable Design Systems

# April 5, 2018 By Geoff Graham

Brad frost picks up the ongoing conversation about design systems. Where many posts seem to center on how to create one and how to enforce it, the big takeaway here is that design systems are not synonymous with constraints. They're only as strict as we make them and new CSS features like custom properties actually open up new creative possibilities—something Andres Galante and Cliff Pyles recently pitched right here on CSS-Tricks.

Brad:

The aesthetic layer is often the most malleable layer of the frontend stack, which means that we can create systems that allow for a lot of aesthetic flexibility while still retaining a solid underlying structural foundation.

This not only sounds right, but puts a strong punctuation on why we love CSS: it's a set of styles that can be applied an infinite number of ways to the same HTML markup. A new layer of paint can be slapped on at any time, but the beams, walls and ceiling of the building can remain constant. Dave Rupert's personal site is a prime example of this and he details his approach to theming.

Ah, CSS Zen Garden...

design systems