learning – CSS-Tricks https://css-tricks.com Tips, Tricks, and Techniques on using Cascading Style Sheets. Fri, 10 Mar 2023 16:41:56 +0000 en-US hourly 1 https://wordpress.org/?v=6.4.3 https://i0.wp.com/css-tricks.com/wp-content/uploads/2021/07/star.png?fit=32%2C32&ssl=1 learning – CSS-Tricks https://css-tricks.com 32 32 45537868 5 Mistakes I Made When Starting My First React Project https://css-tricks.com/5-mistakes-starting-react/ https://css-tricks.com/5-mistakes-starting-react/#respond Fri, 10 Mar 2023 16:41:52 +0000 https://css-tricks.com/?p=377098 You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something …


5 Mistakes I Made When Starting My First React Project originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
You know what it’s like to pick up a new language or framework. Sometimes there’s great documentation to help you find your way through it. But even the best documentation doesn’t cover absolutely everything. And when you work with something that’s new, you’re bound to find a problem that doesn’t have a written solution.

That’s how it was for me the first time I created a React project — and React is one of those frameworks with remarkable documentation, especially now with the beta docs. But I still struggled my way through. It’s been quite a while since that project, but the lessons I gained from it are still fresh in my mind. And even though there are a lot of React “how-to” tutorials in out there, I thought I’d share what I wish I knew when I first used it.

So, that’s what this article is — a list of the early mistakes I made. I hope they help make learning React a lot smoother for you.

Using create-react-app to start a project

TL;DR Use Vite or Parcel.

Create React App (CRA) is a tool that helps you set up a new React project. It creates a development environment with the best configuration options for most React projects. This means you don’t have to spend time configuring anything yourself.

As a beginner, this seemed like a great way to start my work! No configuration! Just start coding!

CRA uses two popular packages to achieve this, webpack and Babel. webpack is a web bundler that optimizes all of the assets in your project, such as JavaScript, CSS, and images. Babel is a tool that allows you to use newer JavaScript features, even if some browsers don’t support them.

Both are good, but there are newer tools that can do the job better, specifically Vite and Speedy Web Compiler (SWC).

These new and improved alternatives are faster and easier to configure than webpack and Babel. This makes it easier to adjust the configuration which is difficult to do in create-react-app without ejecting.

To use them both when setting up a new React project you have to make sure you have Node version 12 or higher installed, then run the following command.

npm create vite

You’ll be asked to pick a name for your project. Once you do that, select React from the list of frameworks. After that, you can select either Javascript + SWC or Typescript + SWC

Then you’ll have to change directory cd into your project and run the following command;

npm i && npm run dev

This should run a development server for your site with the URL localhost:5173

And it’s as simple as that.

Using defaultProps for default values

TL;DR Use default function parameters instead.

Data can be passed to React components through something called props. These are added to a component just like attributes in an HTML element and can be used in a component’s definition by taking the relevant values from the prop object passed in as an argument.

// App.jsx
export default function App() {
  return <Card title="Hello" description="world" />
}

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  );
}

export default Card;

If a default value is ever required for a prop, the defaultProp property can be used:

// Card.jsx
function Card(props) {
  // ...
}

Card.defaultProps = {
  title: 'Default title',
  description: 'Desc',
};

export default Card;

With modern JavaScript, it is possible to destructure the props object and assign a default value to it all in the function argument.

// Card.jsx
function Card({title = "Default title", description= "Desc"}) {
  return (
    <div>
      <h1>{title}</h1>
      <p>{description}</p>
    </div>
  )
}

export default Card;

This is more favorable as the code that can be read by modern browsers without the need for extra transformation.

Unfortunately, defaultProps do require some transformation to be read by the browser since JSX (JavaScript XML) isn’t supported out of the box. This could potentially affect the performance of an application that is using a lot of defaultProps.

Don’t use propTypes

TL;DR Use TypeScript.

In React, the propTypes property can be used to check if a component is being passed the correct data type for its props. They allow you to specify the type of data that should be used for each prop such as a string, number, object, etc. They also allow you to specify if a prop is required or not.

This way, if a component is passed the wrong data type or if a required prop is not being provided, then React will throw an error.

// Card.jsx
import { PropTypes } from "prop-types";

function Card(props) {
  // ...
}

Card.propTypes = {
  title: PropTypes.string.isRequired,
  description: PropTypes.string,
};

export default Card;

TypeScript provides a level of type safety in data that’s being passed to components. So, sure, propTypes were a good idea back when I was starting. However, now that TypeScript has become the go-to solution for type safety, I would highly recommend using it over anything else.

// Card.tsx
interface CardProps {
  title: string,
  description?: string,
}

export default function Card(props: CardProps) {
  // ...
}

TypeScript is a programming language that builds on top of JavaScript by adding static type-checking. TypeScript provides a more powerful type system, that can catch more potential bugs and improves the development experience.

Using class components

TL;DR: Write components as functions

Class components in React are created using JavaScript classes. They have a more object-oriented structure and as well as a few additional features, like the ability to use the this keyword and lifecycle methods.

// Card.jsx
class Card extends React.Component {
  render() {
    return (
      <div>
        <h1>{this.props.title}</h1>
        <p>{this.props.description}</p>
      </div>
    )
  }
}

export default Card;

I prefer writing components with classes over functions, but JavaScript classes are more difficult for beginners to understand and this can get very confusing. Instead, I’d recommend writing components as functions:

// Card.jsx
function Card(props) {
  return (
    <div>
      <h1>{props.title}</h1>
      <p>{props.description}</p>
    </div>
  )
}

export default Card;

Function components are simply JavaScript functions that return JSX. They are much easier to read, and do not have additional features like the this keyword and lifecycle methods which make them more performant than class components.

Function components also have the advantage of using hooks. React Hooks allow you to use state and other React features without writing a class component, making your code more readable, maintainable and reusable.

Importing React unnecessarily

TL;DR: There’s no need to do it, unless you need hooks.

Since React 17 was released in 2020, it’s now unnecessary to import React at the top of your file whenever you create a component.

import React from 'react'; // Not needed!
export default function Card() {}

But we had to do that before React 17 because the JSX transformer (the thing that converts JSX into regular JavaScript) used a method called React.createElement that would only work when importing React. Since then, a new transformer has been release which can transform JSX without the createElement method.

You will still need to import React to use hooks, fragments, and any other functions or components you might need from the library:

import { useState } from 'react';

export default function Card() {
  const [count, setCount] = useState(0);
  // ...
}

Those were my early mistakes!

Maybe “mistake” is too harsh a word since some of the better practices came about later. Still, I see plenty of instances where the “old” way of doing something is still being actively used in projects and other tutorials.

To be honest, I probably made way more than five mistakes when getting started. Anytime you reach for a new tool it is going to be more like a learning journey to use it effectively, rather than flipping a switch. But these are the things I still carry with me years later!

If you’ve been using React for a while, what are some of the things you wish you knew before you started? It would be great to get a collection going to help others avoid the same struggles.


5 Mistakes I Made When Starting My First React Project originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/5-mistakes-starting-react/feed/ 0 377098
Finding Front-End Development Scholarships https://css-tricks.com/finding-front-end-development-scholarships/ https://css-tricks.com/finding-front-end-development-scholarships/#comments Wed, 16 Nov 2022 14:11:11 +0000 https://css-tricks.com/?p=374792 I’m often asked where to learn web development. The answer varies, of course, and we’ve published a few posts on the topic over the years, the most recent of which was Chris taking a stab at different learning paths in


Finding Front-End Development Scholarships originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
I’m often asked where to learn web development. The answer varies, of course, and we’ve published a few posts on the topic over the years, the most recent of which was Chris taking a stab at different learning paths in 2020.

The answer doesn’t have to be school. But sometimes it is, and if your goal is to earn a degree in front-end web development from a college or university, there are other questions you probably have. One of those is probably how the heck do I afford tuition? That’s the second most-asked question I get from the students I teach at my little city college. (Well, that and if they can get an extension on an assignment.)

Scholarships! That’s the golden ticket, right? Unlike a loan, a scholarship is money you don’t have to pay back. There are strings attached. You might need to write an essay with your application, demonstrate a certain level of academic success, or even complete the program before the any funds are dispersed.

Where to look for scholarships

Good gosh, there are practically hundreds of sites that turn up with a simple online search. The problem is that most of them are aggregate sites littered with ads and affiliate links, many of which busted years ago.

That makes finding a legit source of scholarships like finding a needle in the proverbial haystack. It’s a little easier if your goal is to sign up for some sort of coding bootcamp because those usually offer needs-based discounts up front. But that doesn’t help afford a college degree.

Besides an online search, your best bet for finding scholarships might be on major corporate websites, like Google and Microsoft, both of which offer annually recurring scholarships for a number of programs related to technology.

Finding front-end scholarships

As great as big companies can be for scholarships, you might find it tough to find a scholarship that’s explicitly for front-end development. That’s because many scholarships are only loosely tied to front-end development. Many of the scholarships I’ve found are more like:

  • Graphic communications
  • Media design
  • Digital media
  • Interactive design
  • Computer science
  • Information technology
  • Video game design

That’s a bummer because you’re essentially applying for a scholarship that’s open to other fields not directly related to front-end development.

And a certain scholarship offered this year might not be offered next year. It all depends on who is doling out the money and how much money they have to give. Often it’s going to be some private foundation, endowment, or small company that offers the most promising scholarships, and it could be a one-time deal. I found that many of the most enticing front-end scholarships ended years ago, but are still popping up all over those pesky aggregate sites that claim to have updated information for the current year.

Some scholarships worth looking at

I went down a few rabbit holes trying to find academic scholarships that specifically say “front-end development” or “web design” in their materials. Again, different scholarships have different strings attached to them and what I found today could be gone tomorrow.

That said, here’s a few (in no particular order) that passed my filters:

ScholarshipWho it’s forHow much it offers
BOWEN Web Design Scholarship Full or part-time students, with a declared major related to web design or development.$1,500
Chee Web Development ScholarshipStudents embarking on a web-related certificate or undergraduate degree.$1,000
The Web Development of Tomorrow ScholarshipLGBTQ individuals$1,000
Lounge Lizard Web Design Students at an accredited school, or accepted to begin school at an accredited school within 6 months of application.$1,000
Digital Excellence Awards ScholarshipStudents under 25 in an accredited school looking for an education in web design, digital marketing, SEO, or computer science.$1,000
Net Solutions Annual ScholarshipStudents enrolled in a four-year college or university in the U.S., U.K., Canada, or Australia.$2,500

There could be more! These were just the ones I found. Link me up to others you know of in the comments and I’ll check ’em out to add to the list.

Front-end adjacent scholarships

If you’re willing to apply for scholarships that are less directly tied to front-end development, there are more to consider:

Online programs that offer scholarships

Not attending a college or university? Coding bootcamps are all the rage, or so I hear, and many of them are offered online with discounts and scholarship opportunities. I can’t personlly vouch for each and every bootcamp out there. If you’re interested in taking one — like maybe Fullstack Academy, Udacity, Coding Dojo, or any of the learning paths at Frontend Masters — then it’s worth a quick check for financial help.

We need better scholarships for budding developers

Seriously! For all the college and university students I know who are enrolled in a front-end development program, there is scant resourcing available to make their education more affordable — at least ones without stipulations for which school you’re attending or that are directly related to the front-end field.

Part of me is tempted to go on some sort of rant, but instead what I’ll say is this is a ripe area for private individuals and companies to step in and make a difference. Sure, there are lots of ways to “give back” and it doesn’t have to be a scholarship.

But I see a big hole here and I imagine it’s relatively easy for any mid-sized company to hand out $500-$1,000 once a year to promote education. It’s not only good for students and good for the web, but most likely good for the company, too.

Different types of front-end scholarships

Every scholarship I found is either directly tied to front-end development (or web design), or groups front-end development with other loosely-related disciplines. How cool would it be to see scholarships that are specifically for front-end and geared toward front-end disciplines?!

There are so many areas we could support…

  • Accessibility
  • Content management systems
  • Design systems
  • Front-end curriculum design
  • Inclusive design
  • Interoperability
  • Specifications and documentation
  • Technical writing
  • Web performance

…just to name a few.


Finding Front-End Development Scholarships originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/finding-front-end-development-scholarships/feed/ 2 374792
What CSS Do You Absolutely Have to Know in 2022? https://css-tricks.com/what-css-do-you-absolutely-have-to-know-in-2022/ https://css-tricks.com/what-css-do-you-absolutely-have-to-know-in-2022/#comments Tue, 08 Nov 2022 13:51:48 +0000 https://css-tricks.com/?p=374775 Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that’ve shipped in browsers the past couple of years — container queries! relative color syntax! cascade layers! logical properties


What CSS Do You Absolutely Have to Know in 2022? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Sacha Greif openly wondered whether CSS has gotten to be, you know, too big. With all the goodies that’ve shipped in browsers the past couple of years — container queries! relative color syntax! cascade layers! logical properties! ranges in media queries! individual transforms! :has() selector! — and all of what’s on the possible horizon — CSS Toggles! nesting! color mixing! scroll-linked animations! scoped styles! — there’s definitely a different learning curve for CSS these days for new and seasoned front-enders alike.

There may have been a time when it was possible to know most CSS properties and how they work. Those days are long-gone, at least for an old hand like me. But that sort of begs the question: what CSS do you absolutely have to know?

Vincas Stonys recently took a stab at a list. Chris put one together based on features released since CSS3. You probably have an idea of what you would include in a list. If I had to put a Top 5 together and limit myself to only properties and selectors, it might look something like this…

writing-mode

I can’t say enough about the writing-mode property. What makes it important — especially from a learning perspective — is that it sets you up for inclusive principles that account for crafting layouts, regardless of the user’s language. A good understanding of writing-mode is going to lead to an understanding of logical properties and values, and those, in turn, set the stage for understanding document flow and thinking in terms of block, inline, start, and end rather than physical directions.

display

I have a hard time believing anyone can write good CSS without having a solid grasp on the display property. It’s both a property and a framework for creating layouts. There’s no Flexbox or CSS Grid without it, making it sort of like a gatekeeper to understanding those important features.

Plus, the display property perfectly complements writing-mode. It’s exactly what you’ll need once writing-mode has exposed you to document flow and logical directions. You’re going to need a property to either change an element’s normal flow (like changing a block element to an inline one) or start laying things out (like creating a flexible layout context) and that is where display comes into play.

margin / padding / border

Ugh, I’m totally cheating here but think learning margin, padding, and border together is sort of unavoidable. They’re all parts of The Box Model, all help with spacing and styling, and all require getting acquainted with CSS length units. Knowing what these properties are desgined to do and how they contribute to the computed size of an element certainly gives you a lot more styling control, and dispels any confusion about why an element is the size that it is — a common CSS headache!

::before and ::after

Another one where I’m cheating a bit. Yes, ::before and ::after are two individual pseudo-elements, but again, I can’t imagine learning about one without the other. It’s a two-fer!

I remember how mind-blowing it was for me to learn that these existed and can be used to create everything from cool UI effects to complete single-div illustrations. It opens up new possibilities and provides a first peek at how powerful CSS really is.

@media

Oof, I’m already at my fifth and final item in the list and feel like there’s still so much CSS goodness that belongs here. But if I have to choose one last thing, it would be media queries. Why? Because it’s a prime ingredient for creating fluid, flexible layouts and different viewing contexts. Container queries might wind up knocking this off my list as it matures, but for now, @media is a great primer for responsive design.

Beyond that, @media is a nice first step into the conditional qualities of CSS. Whether we’re writing a query based on the type of device thats being used (e.g., screen or print) or a when the browser’s viewport meets a certain criteria (e.g., width >= 768px), the @media syntax is incredibly useful for creating layouts that are optimized for different conditions.

Oh, and we haven’t even touched on how @media relates to accessibility, thanks to its ability to apply styles based on a user’s preferences (e.g., prefers-reduced-motion). So, in addition to crafting conditional layouts, media queries are a nice next step toward understanding inclusive design.

Honerable mentions

Distilling CSS into a list of five must-know properties and selectors is tough, especially now that CSS more powerful today than it was, say, even five years ago. There are a number of other items I really wanted to include, like (in no particular order):

  • calc()
  • has()
  • color
  • font
  • overflow
  • position (especially this)
  • z-index

But I stand by my choices. Learning CSS is more important than memorizing a list of properties. It’s a journey and I think the five I chose carve a nice little learning path that sets the stage for writing good style rules and next steps for diving deeper into CSS.

Alright, tell me yours!

Disagree with my list? You should! I’ll bet you have some smart opinions and I want to see how you would have rounded out a Top 5 list.


What CSS Do You Absolutely Have to Know in 2022? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/what-css-do-you-absolutely-have-to-know-in-2022/feed/ 6 374775
What should someone learn about CSS if they last boned up during CSS3? https://css-tricks.com/whats-new-since-css3/ https://css-tricks.com/whats-new-since-css3/#comments Wed, 19 Jan 2022 14:25:31 +0000 https://css-tricks.com/?p=359857 What's new in CSS? If someone asked you that, who knows CSS but hasn't stayed up to date the last, say, half a decade or more, what advice would you give?


What should someone learn about CSS if they last boned up during CSS3? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
“CSS3” was a massive success for CSS. A whole bunch of stuff dropped essentially at once that was all very terrific to get our hands on in CSS. Gradients, animation/transition, border-radius, box-shadow, transformwoot! And better, the banner name CSS3 (and the spiritual umbrella “HTML5”) took off and the industry was just saturated in learning material about it all. Just look at all the “CSS3”-dubbed material that’s been published around here at CSS-Tricks over the years.

No doubt loads of people boned up on these technologies during that time. I also think there is no doubt there are lots of people that haven’t learned much CSS since then.

So what would we tell them?

Some other folks have speculated similarly. Scott Vandehey in “Modern CSS in a Nutshell” wrote about his friend who hasn’t kept up with CSS since about 2015 and doesn’t really know what to learn. I’ll attempt to paraphrase Scott’s list and what’s changed since the days of CSS3.

Preprocessors are still widely used since the day of CSS3, but the reasons to use them have dwindled, so maybe don’t even bother. This includes more newfangled approaches like polyfilling future features. This also includes Autoprefixer. CSS-in-JS is common, but only on projects where the entire workflow is already in JavaScript. You’ll know when you’re on a relevant project and can learn the syntax then if you need to. You should learn Custom Properties, Flexbox, and Grid for sure.

Sounds about right to me. But allow me to make my own list of post-CSS3 goodies that expands upon that list a smidge.

What’s new since CSS3?

And by “CSS3” let’s say 2015 or so.


.card {
  display: grid;
  grid-template-columns:
    150px 1fr;
  gap: 1rem;
}
.card .nav {
  display: flex;
  gap: 0.5rem;
}

Layout

You really gotta learn Flexbox and Grid if you haven’t — they are really cornerstones of CSS development these days. Even more so than any feature we got in CSS3.

Grid is extra powerful when you factor in subgrid and masonry, neither of which is reliable cross-browser yet but probably will be before too long.

html {
  --bgColor: #70f1d9;
  
  --font-size-base: 
    clamp(1.833rem, 2vw + 1rem, 3rem);
  --font-size-lrg:
    clamp(1.375rem, 2vw + 1rem, 2.25rem);
}

html.dark {
  --bgColor: #2d283e;
}

CSS Custom Properties

Custom properties are also a big deal for several reasons. They can be your home for design tokens on your project, making a project easier to maintain and keep consistent. Color theming is a big use case, like dark mode.

You can go so far as designing entire sites using mostly custom properties. And along those lines, you can’t ignore Tailwind these days. The approach of styling an entire site with classes in HTML strikes the right chord with a lot of people (and the wrong chord with a lot of people, so no worries if it doesn’t jive with you).

@media 
  (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.001s !important;
  }
}

@media 
  (prefers-color-scheme: dark) {
  :root {
    --bg: #222;
  }
}

Preference Queries

Preference queries are generally @media queries like we’ve been using to respond to different browsers sizes for year, but now include ways to detect specific user preferences at the OS level. Two examples are prefers-reduced-motion and prefers-color-scheme. These allow us to build interfaces that more closely respect a user’s ideal experience. Read Una’s post.

.block {
  background: 
    hsl(0 33% 53% / 0.5);

  background:
    rgb(255 0 0);

  background:
    /* can display colors 
       no other format can */
    color(display-p3 0.9176 0.2003 0.1386)

  background:
    lab(52.2345% 40.1645 59.9971 / .5);}

  background:
    hwb(194 0% 0% / .5);
}

Color Changes

The color syntax is moving to functions that accept alpha (transparency) without having the change the function name. For example, if you wanted pure blue in the CSS3 days, you might do rgb(0, 0, 255). Today, however, you can do it no-comma style (both work): rgb(0 0 255), and then add alpha without using a different function: rgb(0 0 255 / 0.5). Same exact situation for hsl(). Just a small nicety, and how future color functions will only work.

Speaking of future color syntaxes:

body {
 font-family: 'Recursive', sans-serif;
 font-weight: 950;
 font-variation-settings: 'MONO' 1, 'CASL' 1;
}

Variable Fonts

Web fonts became a big thing in CSS3. Now there are variable fonts. You might as well know they exist. They both unlock some cool design possibilities and can sometimes be good for performance (like no longer needing to load different font files for bold and italic versions of the same font, for example). There is a such thing as color fonts too, but I’d say they haven’t seen much popularity on the web, despite the support.

.cut-out {
  clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%);
}
.mask {
  mask: url(mask.png) right bottom / 100px repeat-y;
}
.move-me {
  offset-path: path('M 5 5 m -4, 0 a 4,4 0 1,0 8,0 a 4,4 0 1,0 -8,0');
  animation: move 3s linear infinite;
}

@keyframes move {
  100% { 
    offset-distance: 100%;
  }
}

Paths

SVG has also exploded since CSS3. You can straight up crop any element into shapes via clip-path, bringing SVG-like qualities to CSS. Not only that, but you can animate elements along paths, float elements along paths, and even update the paths of SVG elements.

These all feel kind of spirtually connected to me:

  • clip-path — allows us to literally crop elements into shapes.
  • masks — similar to clipping, but a mask can have other qualities like being based on the alpha channel of the mask.
  • offset-path — provides a path that an element can be placed on, generally for the purpose of animating it along that path.
  • shape-outside — provides a path on a floated element that other elements wrap around.
  • d — an SVG’s d attribute on a <path> can be updated via CSS.
.disable {
  filter: 
    blur(1px)
    grayscale(1);
}

.site-header {
  backdrop-filter: 
    blur(10px);
}

.styled-quote {
  mix-blend-mode: 
    exclusion;
} 

CSS Filters

There is a lot of image manipulation (not to mention other DOM elements) that is possible these days directly in CSS. There is quite literally filter, but its got friends and they all have different uses.

These all feel kind of spiritually connected to me:

  • filter — all sorts of useful Photoshop-like effects like brightness, contrast, grayscale, saturation, etc. Blurring is a really unique power.
  • background-blend-mode — again, evocative of Photoshop in how you can blend layers. Multiply the layers to darken and combine. Overlay to mix the background and color. Lighten and darken are classic effects that have real utility in web design, and you never know when a more esoteric lighting effect will create a cool look.
  • backdrop-filter — the same abilities you have with filter, but they only apply to the background and not the entire element. Blurring just the background is a particularly useful effect.
  • mix-blend-mode — the same abilities you have with background-blend-mode, but for the entire element rather than bring limited to backgrounds.
import "https://unpkg.com/extra.css/confetti.js";
body {
  background: paint(extra-confetti);
  height: 100vh;
  margin: 0;
}

Houdini

Houdini is really a collection of technologies that are all essentially based around extending CSS with JavaScript, or at least at the intersection of CSS and JavaScript.

  • Paint API — returns an image that is built from <canvas> APIs and can be controlled through custom properties.
  • Properties & Values API / Typed OM — gives types to values (e.g. 10px) that would have otherwise been strings.
  • Layout API — create your own display properties.
  • Animation API

Combined, these make for some really awesome demos, though browser support is scattered. Part of the magic of Houdini is that it ships as Worklets that are pretty easy to import and use, so it has the potential to modularize powerful functionality while making it trivially easy to use.

my-component {
  --bg: lightgreen;
}

:host(.dark) { 
  background: black; 
}

my-component:part(foo) {
  border-bottom: 2px solid black;
}

Shadow DOM

The Shadow DOM comes up a bit if you’ve played with <svg> and the <use> element. The “cloned” element that comes through has a shadow DOM that has limitations on how you can select “through” it. Then, when you get into <web-components>, it’s the same ball of wax.

If you find yourself needing to style web components, know there are essentially four options from the “outside.” And you might be interested in knowing about native CSS modules and constructible stylesheets.

The CSS Working Group

It’s notable that the CSS working group has its own way of drawing lines in the sand year-to-year, noting where certain specs are at a given point in time:

These are pretty dense though. Sure, they’re great references and document things where we can see what’s changed since CSS3. But no way I’d send a casual front-end developer to these to choose what to learn.

Yeah — but what’s coming?

I’d say probably don’t worry about it. ;)

The point of this is catching up to useful things to know now since the CSS3 era. But if you’re curious about what the future of CSS holds in store…

  • Container queries will be a huge deal. You’ll be able to make styling choices based on the size of a container element rather than the browser size alone. And it’s polyfillable today.
  • Container units will be useful for sizing things based on the size of a container element.
  • Independant transforms, e.g. scale: 1.2;, will feel more logical to use than always having to use transform.
  • Nesting is a feature that all CSS preprocessor have had forever and that developers clearly like using, particularly for media queries. It’s likely we’ll get it in native CSS soon.
  • Scoping will be a way to tell a block of CSS to only apply to a certain area (the same way CSS-in-JS libraries do), and helps with the tricky concept of proximity.
  • Cascade layers open up an entirely new concept of what styles “win” on elements. Styles on higher layers will beat styles on lower layers, regardless of specificity.
  • Viewport units will greatly improve with the introduction of “relative” viewport lengths. The super useful ones will be dvh and dvw, as they factor in the actual usable space in a browser window, preventing terrible issues like the browser UI overlapping a site’s UI.
  • The :has() selector is a like a parent selector plus.
  • Scroll timelines will be awesome.

Bramus Van Damme has a pretty good article covering these things and more in his “CSS in 2022” roundup. It looks like 2022 should be a real banner year for CSS. Perhaps more of a banner year than the CSS3 of 2015.


What should someone learn about CSS if they last boned up during CSS3? originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/whats-new-since-css3/feed/ 3 359857
GUI Challenges https://css-tricks.com/gui-challenges/ https://css-tricks.com/gui-challenges/#respond Tue, 02 Nov 2021 21:28:22 +0000 https://css-tricks.com/?p=355016 I keep bookmarking Adam’s GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup.

For example, a recent …


GUI Challenges originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
I keep bookmarking Adam’s GUI Challenges posts/videos and, before I even have a chance to review and link them up, another one is already published! Fortunately, the homepage for them on web.dev is a nice roundup.

For example, a recent one is the split-button component (article / video / demo). It’s one thing to have a design spec, code it up so it works and looks right, and call it a day. But, dare I say that real front-end development is thinking deeper than that. In just this one component Adam looks at:

  • How the colors are set up and applied. The colors have a subtlety that makes them feel nice together. For example, the darkest colors are very dark versions of the base colors, but not black. It uses Custom Properties to set up a sort of menu of color combinations—but is, most importantly, set up for theming success as well.
  • The menu uses shadows to impart an appropriate amount of depth. Because multiple themes are supported, the shadows don’t do anything embarrassing like, reverse themselves, i.e. light shadows on dark backgrounds that look silly, or dark-on-dark shadows.
  • The use of SVG strokes (efficient! flexible!) which unlock CSS design options, like rounding the end caps.
  • Clicks (active and hover states) should increase contrast.
  • Everything is tested for keyboard usage. The menus open when tabbed to, and arrow keys move the focus within the menu which is accentuated by visual changes. A screen reader (VoiceOver, in this case) was also used to test things, for example using the ESC key to close the menu and remove focus is functional.
  • Reduced motion preferences are honored by not doing as much movement while the menu the opens and closes.
  • Visually, the only thing that opens and closes the menu is :focus-within in CSS. How simple! But aria attributes are still updated in JavaScript to properly express that.

That’s not everything, but that’s a lot, right? (The article has way more detail, including tools for inspecting what’s going on as it’s being built and small helper libraries that were used.) That’s what real front-end development is. Just “a button with a menu” has a ton of surface area to get right and dangerous implications for getting wrong.


If you like the idea of challenges, CodePen challenges you every week to build something along a prompt with ideas and resources. It’s fun because there are a bunch of people doing it with you, allowing you to see how others approached the same idea differently.

To Shared LinkPermalink on CSS-Tricks


GUI Challenges originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/gui-challenges/feed/ 0 355016
Our Learning Partner: Frontend Masters https://css-tricks.com/our-learning-partner-frontend-masters-2/ https://css-tricks.com/our-learning-partner-frontend-masters-2/#respond Fri, 24 Sep 2021 14:34:05 +0000 https://css-tricks.com/?p=351975 Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills, Frontend Masters is the place. It works so well because we don’t offer …


Our Learning Partner: Frontend Masters originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Frontend Masters has been our learning partner for a couple of years now. I love it. If you need structured learning to up your web development skills, Frontend Masters is the place. It works so well because we don’t offer that kind of structured learning ourselves — I’d rather recommend a first-rate learning joint. CSS-Tricks is more of a place you subscribe to for our special blend of industry news, web development advice, and reference material. Frontend Masters has these learning paths that they highly invest in to take you through a guided learning path for particular technologies and learning levels.

I spoke with Frontend Masters founder and CEO Marc and he says:

I couldn’t be more proud of how the learning paths have shaped up. Everyone else in this industry is so focused on the latest and greatest new shiny thing, when instead our platform focuses on deeply learning the fundamentals. And that has really paid off with so many amazing, nearly evergreen courses – rather than having to play the quantity game creating a million courses we can keep focused on refreshing the core curriculum. 

I’m kind of a fundamentals guy myself, so that really resonates with me.

I also asked him what specifically is new and he sent me nearly 20 new and updated courses. He also said this specifically:

We just updated all 15 core learning paths so those are all 🔥 absolute fire. The thing that I’m most excited about is our new ones… specifically the typescript and functional JavaScript paths. Also our fullstack path updated with new courses is epic.

He also hinted at some stuff I’m excited about coming up this fall and winter, but I’ll let you be surprised by them once they come.


Our Learning Partner: Frontend Masters originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/our-learning-partner-frontend-masters-2/feed/ 0 351975
I completely ignored the front-end development scene for 6 months. It was fine. https://css-tricks.com/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine/ https://css-tricks.com/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine/#comments Thu, 02 Sep 2021 22:26:36 +0000 https://css-tricks.com/?p=350723 Have you ever fretted that front-end web development moves so fast that if you stepped away for a while, you’d be lost coming back? Rachel Smith has:

The hectic pace of needing to learn one thing after the next


I completely ignored the front-end development scene for 6 months. It was fine. originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Have you ever fretted that front-end web development moves so fast that if you stepped away for a while, you’d be lost coming back? Rachel Smith has:

The hectic pace of needing to learn one thing after the next didn’t bother me so much because when I was 26 because I was quite happy to spend much of my free time outside of my day job coding. I was really enjoying myself, so the impression that I had to constantly up-skill to maintain my career wasn’t a concern. I did wonder, though, how I would ever take enough time off to have a baby, or have other responsibilities that would prevent me from being able to spend so much of my time mastering languages and learning new libraries and frameworks.

And then, as is inevitable for most of us, she did take a break. And as you read in the title, it was fine:

What I’ve learnt through experience is that the number of languages I’ve learned or the specific frameworks I’ve gained experience with matters very little. What actually matters is my ability to up-skill quickly and effectively. My success so far has nothing to do with the fact I know React instead of Vue, or have experience with AWS and not Azure. What has contributed to my success is the willingness to learn new tools as the need arises.

I might be extra qualified to verify this claim, as I work directly with Rachel. She’s better than “fine” as a team member and technological contributor, both on the front-end and back. She’s extremely good. And you will be too if you heed Rachel’s advice: be a lifelong learner and be willing to learn new tools as the needs arise.

To Shared LinkPermalink on CSS-Tricks


I completely ignored the front-end development scene for 6 months. It was fine. originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/i-completely-ignored-the-front-end-development-scene-for-6-months-it-was-fine/feed/ 3 350723
Beginner JavaScript Notes https://css-tricks.com/beginner-javascript-notes/ https://css-tricks.com/beginner-javascript-notes/#comments Thu, 08 Jul 2021 22:25:22 +0000 https://css-tricks.com/?p=344024 Wes has a heck of a set of “notes” for learning JavaScript. It’s organized like a curriculum, meaning if you teach JavaScript, you could do a lot worse. It’s actually more like 85 really fleshed-out blog posts organized into sections …


Beginner JavaScript Notes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Wes has a heck of a set of “notes” for learning JavaScript. It’s organized like a curriculum, meaning if you teach JavaScript, you could do a lot worse. It’s actually more like 85 really fleshed-out blog posts organized into sections and easily navigable. If you want to be walked through it via video, then buy the course. Smart.

If you’re looking for other curriculum for JavaScript, your best bets are:

Like any other learning experience in life, the best way to learn is multiple angles. If HTML & CSS are more your target, we have a bunch of suggestions there.

To Shared LinkPermalink on CSS-Tricks


Beginner JavaScript Notes originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/beginner-javascript-notes/feed/ 3 344024
Teaching Web Dev for Free is Good Business https://css-tricks.com/teaching-web-dev-for-free-is-good-business/ https://css-tricks.com/teaching-web-dev-for-free-is-good-business/#comments Wed, 24 Feb 2021 22:32:19 +0000 https://css-tricks.com/?p=333802 It feels like a trend (and a smart one) for tech platforms to invest in really high-quality learning material for their platform. Let’s have a gander.

Webflow University

Surely Webflow is thinking: if people invest in learning Webflow, they’ll be


Teaching Web Dev for Free is Good Business originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
It feels like a trend (and a smart one) for tech platforms to invest in really high-quality learning material for their platform. Let’s have a gander.

Webflow University

Surely Webflow is thinking: if people invest in learning Webflow, they’ll be able to build what they need for themselves and their clients in Weblow, and they’ll stick around and be a good customer.

Jamstack Explorers

Surely Netlify is thinking: if people really grok Jamstack, they’ll build their existing and future sites using it. They’ll get comfortable using Netlify’s features to solve their problems, and they’ll stick around and be a good customer.

Salesforce Trailhead

Surely Salesforce is thinking: if we train people to learn Salesforce and build Salesforce-specific software, not only will they be a good customer, but they’ll bring more customers to us and help big companies stay good customers.

Figma Crash Course

This is not created by Figma themselves, but by Pablo Stanley, who must be thinking: I can teach people to use Figma, and along the way show them how cool and powerful Blush is, which will gain Blush good customers.

Apollo Odyssey

Surely Apollo is thinking: if y’all know GraphQL, and learned it in the context of Apollo, you probably continue using Apollo and bring it to the teams you’re on, which might make for great customers.

WP Courses

This one is an outlier because these are paid courses, but my guess is that Automattic is thinking: there is already a ton of WordPress learning material out there, why not leverage our brand and deep expertise to make content people are willing to pay for.

Git Tutorials & Training

Surely Atlassian is thinking: if we are the place where people literally learned Git, we can sprinkle in our tooling into those lessons, and you’ll use those tools for your Git workflow, which will follow you through your entire developer career. Not to mention this is good SEO juice.

GitHub does the same thing.


Helping your customers learn your platform is certainly not a new concept. The word “webinar” exists after all. It’s a funny word, but effective. For example, AWS Marketplace sponsors CodePen emails sometimes with the idea of getting people to attend webinars about certain technologies. Wanna learn about Apache Kafka? You can do that for free coming up Thursday, February 25th. Surely AWS is thinking if people learn how this technology works, they’ll use AWS and AWS Marketplace partners to spin it up when they get to using it.

Cypress publishes their webinars. Appcues publishes their webinars. It’s not rare.

What feels a new here is the idea of packaging up learning material on a microsite with a fancy design and making it feel in-line with modern learning platforms. Like you are going to some expensive code school, except you’re getting it for free.

I’m a fan of all this. It’s good marketing for companies. It’s a good learning opportunity for everyone else. It’s also very biased. Learning materials you get directly from companies is going to tell you all about how great the technology of that company is. You should know that going in, if it’s isn’t obvious.

I’m also a fan—perhaps an even bigger fan—of paying for high-quality learning material. Our learning partner, Frontend Masters, has no particular bias to technology because you’re their customer. If they help you, they succeed and you succeed as well.


Teaching Web Dev for Free is Good Business originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/teaching-web-dev-for-free-is-good-business/feed/ 8 333802
To the brain, reading computer code is not the same as reading language https://css-tricks.com/to-the-brain-reading-computer-code-is-not-the-same-as-reading-language/ https://css-tricks.com/to-the-brain-reading-computer-code-is-not-the-same-as-reading-language/#comments Mon, 22 Feb 2021 15:56:31 +0000 https://css-tricks.com/?p=335045 One of the things I do when teaching beginning front-end development is ask students to describe what it’s like to read HTML. I give them pretty basic markup for a long-form article, and ask them to read it twice: first …


To the brain, reading computer code is not the same as reading language originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
One of the things I do when teaching beginning front-end development is ask students to describe what it’s like to read HTML. I give them pretty basic markup for a long-form article, and ask them to read it twice: first in the code, then on the front end.

The #1 common response I hear? It’s like learning a new language.

Of course it is, I tell them. It’s in the name: Hypertext Markup Language. So, I advise them to start treating the materials in the course like they’re learning French, Spanish, or any other language.

Then I wake up this morning and see this MIT study that reading computer code is not the same as reading language, even though they share similarities.

In spite of those similarities, MIT neuroscientists have found that reading computer code does not activate the regions of the brain that are involved in language processing. Instead, it activates a distributed network called the multiple demand network, which is also recruited for complex cognitive tasks such as solving math problems or crossword puzzles.

Duh, you might say. But wait, reading code actually appears to activate additional parts of the multiple demand network that make the task more or a near-match to mathematical reasoning than the exact same thing.

The MIT team found that reading computer code appears to activate both the left and right sides of the multiple demand network […]. This finding goes against the hypothesis that math and coding rely on the same brain mechanisms.

So, back to my HTML reading assignment. Is it better to teach code as a language for recognizing symbols that communicate to the browser what to do, or as a math skill that’s based on solving problems?

The answer is 🤷‍♂️.

The most interesting thing about the study to me is not how to teach code, but rather how I work with it. Chris always says a front-end developer is aware, and the fact that reading code taps on a region of the brain that’s responsible for handling multi-tasking and holding lots of information only supports that. It also explains why I personally get annoyed when I’m pulled away from my code or distracted from it—it’s like my brain has to drop all the plates it was balancing to pay attention to something else, then pick up and reassemble all the pieces before I can jump back in to what I was doing.

To Shared LinkPermalink on CSS-Tricks


To the brain, reading computer code is not the same as reading language originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/to-the-brain-reading-computer-code-is-not-the-same-as-reading-language/feed/ 31 335045
Mistakes I’ve Made as an Engineering Manager https://css-tricks.com/mistakes-ive-made-as-an-engineering-manager/ https://css-tricks.com/mistakes-ive-made-as-an-engineering-manager/#comments Thu, 18 Feb 2021 22:39:50 +0000 https://css-tricks.com/?p=334528 I’ve been a manager for many years at companies of different scale. Through these experiences, I’ve done my share of learning, and made some mistakes along that way that were important lessons for me. I want to share those with …


Mistakes I’ve Made as an Engineering Manager originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
I’ve been a manager for many years at companies of different scale. Through these experiences, I’ve done my share of learning, and made some mistakes along that way that were important lessons for me. I want to share those with you.

But before diving in, I want to mention a strong caveat that my advice may be unique to my situation because I’m white and a woman in tech. My experiences may be relevant to that point of view, but your mileage may vary.

Another huge caveat: I’m sharing mistakes I’ve made so far in the interest of helping others, but I’m sure I’m not done making mistakes, either. I don’t have it all figured it out, I’m still on this journey.

Credit: WoCinTechChat

Mistake 1: Thinking people give feedback the way they want to receive it

Feedback is one of the most important tools you have as a manager, but it can also be incredibly disruptive with poor execution. One of the hardest things I’ve had to learn is that humans aren’t pure functions: an input that works one day and gets one result, then again another day and get an entirely different result.

The same is true of how people give and receive feedback: someone may give you feedback in a particular way, but they prefer to receive much differently when it comes to themselves.

How do you get around this? Asking helps. I’ve started doing an exercise with my team where I ask the group as a whole how they would like to get feedback. Not only does it open up ideas, but it also helps that each individual has to think for themselves how they prefer to receive feedback. Normalizing this type of vulnerability and self-reflection can help us all feel like partners, instead of some top-down edict.

Another thing that’s helped? Asking folks directly in a one-on-one meeting if they have feedback for me as a manager, and following up with an anonymous survey. Again, it makes things feel less one-sided and provides everyone the opportunity to say things that they might not want to say directly to my face, which I know can be tough.

And lastly, if something comes up, addressing it immediately can be helpful. There’s nothing worse than your manager having an issue with something you did and only finding out about it three months later, especially if it’s tied to a performance review that you could have impacted had they been transparent earlier.

The truth is that even my advice here is imperfect. Feedback is tough. Being honest and improving together as a team is awkward. It’s incredibly worth it, though. That’s where the real growth is. That said, no two people are alike, no two groups are alike, and you may have to use your best judgement given the situation at hand.

Mistake 2: Trying to do everything yourself as a manager is the best way to help

Years ago, I managed a woman who was bright, talented, capable, and an all around pleasure. She was sort of new to the industry and could come across as timid, so I did my best to be a poop umbrella for her, fighting battles behind the scenes to set her up for success. She was on a steady track to land a senior role. Even after I decided to leave the company, I let the next manager know this person is track for a senior position in the next few months.

Then I moved to another city. Years later, I met up with the woman and was shocked to learn she never got the position.

Here’s what I learned: her promotion wasn’t the same high priority for the capable hands I left her in as it was for me. The team was challenged with a million other things that took center stage to the extent that her promotion fell off the radar. But even more than that, what became very clear to me was that all of that “protection” I thought I had set up for her didn’t really serve her well for the long haul. For example, I didn’t teach her how to advocate for herself or how to navigate the system. I vowed never to make that mistake again.

This is tough! If you’re strong and care about your team as people, it can feel very unnatural to teach someone to advocate instead of moving things out of their way themselves. And the point is not to throw that person into the fire. The point is to care. Are you teaching the things they need to learn? Are they really growing under you? Feeling like you’re protecting someone at all costs also lead to your own ego trip, too, which threatens progress.

Try to think through what skills someone needs to succeed without you. Teach those things incrementally. Sure, this is easy advice to say, but it’s really hard to do in the thick of things. Spend some time with it, and think through ways you can inject that learning into everyday work and interactions.

Credit: Charles Deluvio on Unsplash

Mistake 3: Communicating something one time is enough

No one likes to feel like they’re repeating themselves. It’s annoying to say something more than once, and it’s annoying to hear something over and again. But if you have a big enough group and there’s enough going on, things are going to slip through the cracks, so repetition becomes an important tool to make things stick. The trick is to say the same things, but in different ways.

There was a time last year when I asked my team to do something and none of them did it. What happened there? Given that it’s a team of highly efficient, strong collaborators, do you think they just all table-flipped and didn’t take action? Not a chance. I was the one who wasn’t clear. In fact, you can probably guess that if a whole group of people don’t understand or take action, the chance is that you, the manager, are the common denominator for why something is blocked. Not only did I not repeat myself enough to be clear, I didn’t align anyone with the why of the purpose of the task. It’s pretty easy to forget or not prioritize doing something if you have no clue why you’re doing it. Repeat yourself and align the group with the importance of the task and you’ll likely have a better result.

Think of all the ways we have to communicate these days: chats, emails, video meetings, texts, document comments, and so much more. And because some people communicate better in one medium than another, using all of the platforms have in various mediums becomes a strategy for repetition without nagging.

I’ve found that what work best is allowing everyone to own the information themselves. For example, if your team practices career laddering, the individual can read aloud each of the ladders in one-on-one and then talk you through their responses to each item. That way, you’re not lecturing — they are owning where they are and what the next steps are as you guide them along.

Mistake 4: You have to have everything together all the time

Some folks think that management looks like a steel fortress of preparedness and authority. I’m not so sure about that.

If something goes wrong, are you more likely to tell the manager acts as though they have everything together all the time, or the manager owns their mistakes? The truth is that your team needs to know you’re human. You can’t fix problems if you don’t know about them, and no one will tell you about them unless you make space for that.

One time, the night before a big release, someone on the team pushed a change that created thousands upon thousands of calls to a service that, in turn, thought it was the target of a DDoS attack, which then shut down our access. Here’s a moment when a lot of folks could have panicked and blamed one another. Instead, we giggled wildly, jumped into chat and on calls, fixed it, and kept going.

I couldn’t have been more proud of the team that day. Their response was wonderful. And it makes all the difference in how we work together, recover, and iterate.

You’re the manager, so if someone is going to show vulnerability first, it’s easiest on team dynamics if it’s you. You can try this by admitting you’re having a bad day, that you don’t understand something, or that made a mistake. You don’t have to do this constantly, a little is helpful.

This is way tougher if you are an underrepresented minority in tech. People will definitely think of an admitted mistake coming from one person as humility and another as failure. I myself struggle with this, too. I think it’s ok to admit that and feel the situation out given your circumstance.


Being a manager is tough. Your mistakes impact people, and that feeling of pressure can be a little isolating. I’ve made all of the mistakes above and more. I feel it’s critical to share so that when we encounter pitfalls, we don’t feel so alone and have a potential path forward.

Buy the Book

This is just a sample of the kind of content from my latest book coming out soon…


Mistakes I’ve Made as an Engineering Manager originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/mistakes-ive-made-as-an-engineering-manager/feed/ 13 334528
What Makes CSS Hard To Master https://css-tricks.com/what-makes-css-hard-to-master/ https://css-tricks.com/what-makes-css-hard-to-master/#comments Fri, 18 Dec 2020 15:41:48 +0000 https://css-tricks.com/?p=331135 Tim Severien:

I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let’s reflect on the language and find out what makes it hard.

Tim’s reasons CSS is hard …


What Makes CSS Hard To Master originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Tim Severien:

I feel we, the community, have to acknowledge that CSS is easy to get started with and hard to master. Let’s reflect on the language and find out what makes it hard.

Tim’s reasons CSS is hard (in my own words):

  • You can look at a matching Ruleset, and still not have the whole styling story. There might be multiple matching rulesets in disparate places, including in places that only apply conditionally, like within @media queries.
  • Even if you think you’ve got a complete handle on the styling information in the CSS, you still may not, because styling is DOM-dependent. You need information from both places to know how something will be styled.
  • You have no control over the device, browser, version, resolution, input mode, etc., all of which can be CSS concerns.
  • Making changes to CSS can be scary because it’s hard to understand everywhere it applies.

I’m not sure people making sweeping generalizations about CSS either being too hard or too easy is helpful for anyone. It’s much more interesting to look at what can be straightforward about CSS and what can be tricky, like Tim has done here.

To Shared LinkPermalink on CSS-Tricks


What Makes CSS Hard To Master originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/what-makes-css-hard-to-master/feed/ 2 331135
The Power of Lampshading https://css-tricks.com/the-power-of-lampshading/ Wed, 16 Dec 2020 15:30:41 +0000 https://css-tricks.com/?p=331012 I enjoyed this blog post from Shawn. Lampshading is apparently the idea of a TV show calling attention to some weakness (like an implausible plot point) so that the show can move on. By calling it out, it avoids criticism …


The Power of Lampshading originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
I enjoyed this blog post from Shawn. Lampshading is apparently the idea of a TV show calling attention to some weakness (like an implausible plot point) so that the show can move on. By calling it out, it avoids criticism by demonstrating the self-awareness. For developers, Shawn notes, it’s like admitting to your teammates/boss that you don’t know some particular technology so the team can move on.

Not only is this useful, it’s powerful. Higher-ups need to call out anything they don’t understand because their job is literally asking the right questions and making sure clarity is present for both customers and reports. Juniors need to use it in order to grow.

I feel like this is easier to pull off the further you are on the polarity of junior and senior. If you’re super new, people are like, yeah it makes sense that they don’t know that thing. If you’re highly (and deservedly) senior, people are like, wow this obviously and incredibly knowledgeable human has a gap in their skillset — how relatable and humble of them to say it. I would hope lampshading is useful for everyone, but I could see how people square in the middle might have trouble pulling it off.

To Shared LinkPermalink on CSS-Tricks


The Power of Lampshading originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
331012
2020 was not a good year for learning https://css-tricks.com/2020-was-not-a-good-year-for-learning/ https://css-tricks.com/2020-was-not-a-good-year-for-learning/#comments Wed, 09 Dec 2020 23:30:00 +0000 https://css-tricks.com/?p=330264 There, I said it.

What did I learn about building websites in 2020? A lot. But what I learned is not nearly as important as how I learned it. So instead, I want to share a couple of strategies I …


2020 was not a good year for learning originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
There, I said it.

What did I learn about building websites in 2020? A lot. But what I learned is not nearly as important as how I learned it. So instead, I want to share a couple of strategies I used to unblock learning in less-than-ideal times.

I spent almost a decade teaching design and, let me tell you, the conditions for curiosity were all wrong this year. You are not alone if you’ve found yourself battling brain fog, deep existential crisis, and long spans of nothingness instead of basking in a creative renaissance. I spent most of this year in a tiny apartment under a terrifying lockdown in epicenter-of-the-pandemic New York with my husband, two cats, and a very energetic toddler. I’ll save the details for a therapist, but let’s just say this year did not go as planned.

But then again, whose year did? The entire world plunged into crisis. I only feel deep gratitude for having weathered this storm and for having cultivated the skills I needed for my little family to thrive despite the chaos. 

I spent years speaking at conferences about mental models and growing creativity. This year, I’ve had to focus on the other side of that coin: helping people recover their creativity when it feels out of reach. The first thing I usually recommend to anyone feeling creatively blocked is that they start actively wasting their time.

Waste your time

I had ambitious plans for 2020, having plotted out a rigorous study plan for myself. That plan is now in the garbage next to my travel plans and willingness to wear anything but yoga pants.

What I am capable of after a good night’s sleep, coffee in hand, is one thing. What I can manage after a sleepless night followed by a full day of Zoom meetings while simultaneously trying to wrangle a toddler is another thing entirely.

The loss of childcare meant that the only time to indulge in learning was after a long day of work after my daughter was tucked into bed, and I was completely exhausted. The last thing I wanted was disciplined study in pursuit of a goal, so I changed my approach: focus on breadth, widen the scope of topics, let my mind wander, and feed my curiosity. As a bonus, this shift often kept me from losing the evening to bingeing Netflix or doom-scrolling the news late into the night.

When you’re low on motivation or approaching burnout, create the opportunity to “waste time” and play. Follow what interests you, not just the things you “should” be interested in. Do not let your velocity or productivity enter the equation – respect that a life of learning is much more complex than that. Practice curiosity and protect your ability to play, it is critical to learning and creating. If you’re curious about why that is, look up inquiry-based or constructivist learning. What you’ll learn will have nothing to do with building websites, and that’s the point.

Nostalgia

Many talented people felt their ability to create disappear this year, for a variety of reasons. I want to be clear — that’s a normal human reaction to all of this. There is no “one weird trick” for unblocking productivity when the world is on fire. But, if building websites brings you the joy and/or money you need, and you want some advice from someone trained in jump-starting learning, I’ll say this: revisit your foundations. Not the foundations, but your foundations. 

When things are this uncertain for this long, we reach for coping mechanisms. Why not use one to unblock learning? In a recent New York Times article, psychologists said that ‘conjuring nostalgia during stressful times is a healthy coping mechanism,” and I totally agree. Between re-watching 90’s movies and cooking comfort foods, I dove back into what brought me to tech: design, CSS, color functions, typography, design patterns. I played around in Illustrator, dusted off old repos, looked at happy projects, and remembered old trends. I avoided burning energy on the hot new thing. Instead, I revisited the foundations of my understanding through the lens of experience.

I’m not suggesting you stay in your comfort zone, but I am saying it’s okay to start there. The important thing is starting.

Routines and Structures

There is disruption on every level: global, national, and personal. I don’t know anyone who hasn’t experienced a disruption to their lives. When our routines are disrupted and our basic needs (including health and psychological) are threatened, we are unable to learn well. One of the most effective things a teacher can do in the classroom is to make sure their students eat breakfast, so focus on your needs. Getting a good night’s sleep contributes to learning. Caring for your mental health contributes to learning. Punishing yourself for struggling does not.

This year, as all of my support structures disappeared, there was not enough Natalya to do everything and be there for everyone. Accepting that was difficult. I spent a lot of energy shifting my focus from “the year I wished for” to the one I was experiencing. I used every trick in the teacher’s handbook on myself to keep my love of learning intact, feel some progress, and keep up. No matter how much I did, I still felt like I didn’t do enough. It was just the kind of year when everything felt like it took more energy (because it did). Setting up new routines and structures is work. Factor that into your equation when evaluating your progress.

This is where I would usually rant about how teaching and childcare are real skills and difficult jobs, dedicating several paragraphs on how important and valuable the work of teachers and caregivers is. But anyone who has been homeschooling or caring for someone this year is already well aware.

Creating the right conditions for effective learning is a lot of work, so give yourself credit if you’ve been taking it on.

This has been a deeply unsustainable year for so many. Showing up and making it through each day and making any progress is enough. Not giving up and trying again, day after day, is success.

What I learned…

Ah, the reason you’re reading this. I would love to talk about the cool design and tech stuff I learned this year, but I won’t. What I learned as an individual in 2020 is not nearly as important as what I hope we learned as an industry.

I hope we learned that the most important thing to know about building websites is that there are real people building them, and we need to make sure they can thrive.

Lunch perks and swag are cool, but what about childcare, accessibility, and support structures? What about flexible hours and remote-first practices? We should notice that the companies which supported people before the pandemic are doing better than the ones struggling to pivot to do the work they should have been doing all along.

I wish it didn’t take a global pandemic, but we need change. Let’s use this knowledge to build a better society with stronger principles and more thoughtful structures—not just better websites.


2020 was not a good year for learning originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
https://css-tricks.com/2020-was-not-a-good-year-for-learning/feed/ 8 330264
Layoutit Grid: Learning CSS Grid Visually With a Generator https://css-tricks.com/layoutit-grid-learning-css-grid-visually-with-a-generator/ Thu, 15 Oct 2020 14:48:56 +0000 https://css-tricks.com/?p=322969 Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add or remove track lines and drag them around to change …


Layoutit Grid: Learning CSS Grid Visually With a Generator originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
Layoutit Grid is an interactive open source CSS Grid generator. It lets you draw your designs and see the code as you go. You can interact with the code, add or remove track lines and drag them around to change the sizing — and you get to see the CSS and HTML change in real time!

Animated gif of the tool which is split into three columns: one that sets the number of grid rows and columns, one to name and visualize the layout, and the last to see the code.
Add some tracks and see how they’re made in CSS

When you are done with a layout, you can create a CodePen or grab the code to jumpstart your next project. The tool brings the code to the forefront, helping you learn CSS grid as you work directly with it.

CSS Grid is a whole new way of thinking about layouts

We can now create robust responsive layouts for our web experiences. We can finally learn to design with a coherent set of layout tools instead of memorizing piles of hacks to force elements into position.

Now, I’m not saying a generator like this excuses us from knowing the code we write. We should all learn how CSS Grid and Flexbox work. Even if your stronghold is JavaScript, having a solid foundation in CSS knowledge is a powerful ally when communicating your ideas. When sharing a prototype for a component, a UX interaction, or even an algorithm in an online sandbox, the way in which your work is presented can make a big difference. The ability to develop proper layouts — and define the styles that create them — is fundamental.

Crafting layouts in CSS should not be a daunting task. CSS Grid is actually quite fun to use! For example, using named grid areas feels like an ASCII art version of drawing a design on a piece of paper. Lets create the layout of a photos app, a feed of pics and the people in them side by side for its main content and the typical header, footer and a config sidebar.

.photos-app {
  /* For our app layout, lets place things in a grid */
  display: grid;
  /* We want 3 columns and 3 rows, and these are the responsive
     track sizes using `fr` (fraction of the remaining space) */
  grid-template-columns: 20% 1fr 1fr;
  grid-template-rows: 0.5fr 1.7fr 0.3fr;
  /* Let's separate our tracks a bit */
  gap: 1em;
  /* We now have 3x3 cells, here is where each section is placed */
  grid-template-areas:
    "header header header"  /* a header stretching in the top row */
    "config photos people"  /* a left sidebar, and our app content */
    "footer footer footer"; /* and a footer along the bottom row  */
}

.the-header {
  /* In each section, let's define the name we use to refence the area */
  grid-area: "header";
}

This is just a small subset of what you can build with CSS Grid. The spec is quite flexible. Areas can also be placed directly using line numbers or names, or they can be placed implicitly by the browser, with the content distributed inside the grid automatically. And the spec continues to grow with additions, like subgrid.

At the same time, working with grids can be difficult, just like anything that requires a new way of thinking. It takes a lot of time to wrap our heads around this sort of thing. And one way to help do that is to…

Learn while playing

When you are learning CSS Grid, it is easy to feel intimidated by its notation and semantics. Until you develop some muscle memory for it, kickstarting the learning process with visual and interactive tools can be an excellent way to overcome that early trepidation. A lot of us have used generators while learning how to create shadows, gradients, Markdown tables, and so on. Generators, if built with care, are great learning aids.

Let’s use Layoutit Grid to recreate the same design in our example.

Generators like this aren’t meant to be leaned on forever; they’re a stepping stone. This particular one helps you experience the power of CSS Grid by materializing your designs in a few clicks along with the code to make it happen. This gives you the early wins that you need to push forward with the learning process. For some of us, generators permanently remain in our toolboxes. Not because we do not know how to craft the layouts by hand, but because having the visual feedback loop help us to quickly convert our ideas into code. So we keep playing with them.

Sarah Drasner has also created a CSS Grid generator that’s worth checking out as well.

Learn by building

Leniolabs recently open-sourced Layoutit Grid and added new features, like interactive code views, area edition, history and offline support. And there are several more in the making.

If you have ideas to improve the tool, get in touch! Open an issue and let’s discuss it on GitHub. Going into meta territory, you can also learn about the CSS Grid spec by helping us build the tool. 

We use the app to keep track of best practices in creating performant interactive web experiences. It is now powered by the newly released Vue 3 using <script setup> components and built with Vite, a new dev tool that doesn’t bundle the app while developing, which gives us instant feedback during development. If you are curious and want to build with us, fork the repo and let’s learn together!


Layoutit Grid: Learning CSS Grid Visually With a Generator originally published on CSS-Tricks, which is part of the DigitalOcean family. You should get the newsletter.

]]>
322969