Posts in Category: css tricks

Using Scoped Slots in Vue.js to Abstract Functionality

Let’s start with a short introduction to Vue.js slots concept. Slots are useful when you want to inject content in a specific place of a component. Those specific places that you can define are called slots.

For example, you want to create a wrapper component that is styled in a specific way but you want to be able to pass any content to be rendered inside that wrapper (it might be a string, a computed value, or

Read More


Twenty Years as a Freelance Web Developer: Wisdom Gained and Lessons Learned

In the summer of 1998, when President Clinton fended off allegations of sexual impropriety and Donald Trump filmed a cameo in a Woody Allen movie, I embarked on my career as a freelance web developer. Twenty years and more than 300 websites later, I’m still at it—always working on my own and always from home. Over that time, I’ve had the pleasure of partnering with many prominent advertising agencies and boutique design firms as

Read More


What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer?

Here’s what a few folks have to say on the topic.


I’ll argue that front-end developers need to master four different skills.

  1. Empathy
  2. Code
  3. Design
  4. Communication

Zell Liew


Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into

Read More


What makes a good front-end developer?

Defining what a front-end developer is and what they do is tough as it is. So, how do we set the bar for what makes for a good front-end developer?

Here’s what a few folks have to say on the topic.


I’ll argue that front-end developers need to master four different skills.

  1. Empathy
  2. Code
  3. Design
  4. Communication

Zell Liew


Front-End Developers, having learnt HTML, CSS and JS, are forced to take functionality into

Read More


Aspect Ratio Media Elements and intrinsicsize

If you need an aspect-ratio sized <div> (or any element that can have children), you can do it. Perhaps the cleanest way is a custom-property-sized pseudo-element that pushes the correct minimum height through padding-based-on-width.

But media elements like <img> don’t have children. The <video> tag isn’t self-closing, but when it is supported (almost always), the content of it is replaced with a shadow DOM you don’t control. Besides, these are the only two elements that “size to

Read More


Removing jQuery from GitHub.com frontend

Here’s how and why the team at GitHub has slowly been deprecating jQuery from their codebase:

We have recently completed a milestone where we were able to drop jQuery as a dependency of the frontend code for GitHub.com. This marks the end of a gradual, years-long transition of increasingly decoupling from jQuery until we were able to completely remove the library. In this post, we will explain a bit of history of how we started depending on jQuery in the first

Read More


HTML elements, unite! The Voltron-like powers of combining elements.

Guides, resources and discussions about Semantic HTML are often focused around specific elements, like a heading, or a sectioning element, or a list. It’s not often that we talk specifically about how we can combine HTML elements to increase their effectiveness.

Normally, when we introduce HTML, we talk about how it is used to apply meaning to content in a document, and we do this by using examples like:

  • “Is it a paragraph?”
  • “Is it a heading?”
  • “Is it a numbered list”
  • “Is

    Read More


Why Designers Don’t Want to Think When They Read

We’ve all seen articles like “The Top 5 Ways To Fix Your Sign Up Flow and Get On With Your Life.” Articles like this aren’t wrong or bad, they are just shallow and a bit junk food-y and BuzzFeed-y. Of course, a designer’s actual job is complicated, nuanced, and difficult. But deep dives into all that are far less common.

Khoi Vinh has been writing about this and points to some heavy self-reflection from

Read More


XOXO 2018

There’s not much talk about frameworks here. There’s no shaming about old techniques, or jokes about JavaScript. There’s just a couple hundred people all around me laughing and smiling and watching talks about making things on the web and it all feels so fresh and new to me. Unlike many other conferences I’ve visited, these talks are somehow inclusive and rather feel, well, there’s no other word for it: inspiring.

I’m sitting in a little room buried underneath the Veterans Memorial

Read More


What’s the difference between ./dogs.html and /dogs.html?

They are both URL paths. They have different names, though.

<!-- root-relative -->
<a href="./dogs.html">Dogs</a>

<!-- absolute -->
<a href="/dogs.html">Dogs</a>

There are also fully-qualified URLs that would be like:

<!-- fully qualified -->
<a href="https://website.com/dogs.html">Dogs</a>

Fully-qualified URL’s are pretty obvious in what they do — that link takes you to that exact place. So, let’s look those first two examples again.

Say you have a directory structure like this on your site:

public/
├── index.html
└── animals/
    ├── cats.html
    └── dogs.html

If

Read More


Visual. Intuitive. Unlike Anything Else.

(This is a sponsored post.)

This team management tool is exceptionally suitable for any industry sector and by any sized team. monday.com will perfectly serve a team of two or a team of hundreds spread around the globe, and it can manage multiple projects at once.

monday.com promotes effortless collaboration and transparency, it’s “cheetah fast,” it displays status in as many as 20 different colors, and its status board can be customized to fit your needs and your workflow.

It

Read More


Updating a CSS Variable with JavaScript

Here’s a CSS variable (formally called a “CSS custom property“):

:root {
  --mouse-x: 0px;
  --mouse-y: 0px;
}

Perhaps you use them to set a position:

.mover {
  left: var(--mouse-x);
  top: var(--mouse-y);
}

To update those values from JavaScript, you’d:

let root = document.documentElement;

root.addEventListener("mousemove", e => {
  root.style.setProperty('--mouse-x', e.clientX + "px");
  root.style.setProperty('--mouse-y', e.clientY + "px");
});

That’s all.

Source: CSS-tricks.com

Read More


Introducing Trashy.css

Trashy.css: The throwaway CSS library with no class

 

Why throwaway? Well, it’s not really meant to be a fully fledged, production-ready style framework. Rather, it’s like training wheels for document semantics, with some bumper lanes (think: bowling) to keep you on the right track.

It’s part of our ongoing effort at TandemSeven to promote code literacy throughout our organization. As more of our UX designers are beginning to share responsibility for the accessibility and

Read More


The Low Hanging Fruit of Web Performance

I kicked off a really poppin’ Twitter thread the other day:

So, I decided to round up all the ideas (both my own and yours) around that in a post over on the Media Temple blog.

These are the things

Read More


Changes on CSS Grid Layout in percentages and indefinite height

This is a wonderfully nerdy deep dive into a very specific CSS change by Manuel Rego Casasnovas. Here’s a bit of terminology we should know:

First question is, what is an indefinite size? The simple answer is that a definite size is a size that you can calculate without taking into account the contents of the element. An indefinite size is the opposite, in order to compute it you need to check the contents first.

And then goes on to explain how

Read More


Old Timey Terminal Styling

I saw a little demo the other day called HTML5 Terminal. It has some functionality, but it seems like it’s just kinda for fun. That said, I loved the aesthetic of it! Blurry monospace type with visible monitor lines and a glowing green background — nice!

Let’s re-create that, bit-by-bit.

A radial gradient is perfect for the glowing green background:

body {
background-color: black;
background-image: radial-gradient(

Read More


Jetpack’s Social Integration Features

One of the many things we use Jetpack for here on CSS-Tricks is all of its features related to social media integration. For example, Jetpack can automatically share published content to different social media accounts simultaneously, add sharing buttons to your site’s theme, and allow for social login on the comment form. There is even more than that, but let’s dig into these three as we use them.

Auto-Sharing Posts

I like the idea that everything we

Read More


Customise radio buttons without compromising accessibility

Here’s a nifty post by Chen Hui Jing where she walks us through her process for making radio buttons accessible via keyboard. I particularly enjoyed this bit where she discusses the four options that are available to us to hide the radio input and replace them with a selection of cards that act like toggles instead:

Most of us mess up the keyboard navigation portion of things when we hide the input element. There are several ways to make something invisible

Read More


Creating sliding effects using sticky positioning

Sticky elements are predominantly used for keeping something shown on the screen throughout scrolling. As cool as that is, we can also hide elements in the same way!

Here’s a typical (um) sticky situation:

See the Pen position:sticky (CSS) by Preethi Sam (@rpsthecoder) on CodePen.

Sticky elements (position: sticky;) are very similar to fixed elements ( position: fixed;) in that they both maintain their position on the screen, even as the

Read More


Interactive Introduction to CSS Houdini

This is a great explanatory microsite by Sam Richard.

CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds. Much like Service Workers are a low-level JavaScript API for the browser’s cache, Houdini introduces low-level JavaScript APIs for the browser’s render engines.

What’s important to know is that Houdini is broken up into these different parts, each of which will be implemented separately. We have an intro to

Read More