Building Skeleton Components with React

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

Let’s get started in creating our components.

(more…)

8 Tips for Great Code Reviews

Kelly Sutton with good advice on code reviews. Hard to pick a favorite. I like all the stuff about minding your tone and getting everyone involved, but I also think the computerization stuff is important:

If a computer can decide and enforce a rule, let the computer do it. Arguing spaces vs. tabs is not a productive use of human time.

Re: Tip #6: it's pretty cool when the tools you use can help with that, like this new GitHub feature where code suggestions can turn into a commit.

Why Do You Use Frameworks?

Nicole Sullivan asked. People said:

  • 🐦... for the same reason that I buy ingredients rather than growing/raising all of my own food.
  • 🐦 I write too many bugs without them.
  • 🐦 Avoiding bikeshedding.
  • 🐦 ... to solve problems that are adjacent to, but distinct from, the problem I'm trying to solve at hand.
  • 🐦 Because to create the same functionality would require a much larger team
  • 🐦 I want to be able to focus on building the product rather than the tools.
  • 🐦 it’s easier to pick a framework and point to docs than teach and document your own solution.
  • 🐦 faster development
  • 🐦 They have typically solved the problems and in a better way than my first version or even fifth version will be.

(more…)

Using Feature Detection, Conditionals, and Groups with Selectors

CSS is designed in a way that allows for relatively seamless addition of new features. Since the dawn of the language, specifications have required browsers to gracefully ignore any properties, values, selectors, or at-rules they do not support. Consequently, in most cases, it is possible to successfully use a newer technology without causing any issues in older browsers.

Consider the relatively new caret-color property (it changes the color of the cursor in inputs). Its support is still low but that does not mean that we should not use it today.

.myInput {
  color: blue;
  caret-color: red;
}

Notice how we put it right next to color, a property with practically universal browser support; one that will be applied everywhere. In this case, we have not explicitly discriminated between modern and older browsers. Instead, we just rely on the older ones ignoring features they do not support.

It turns out that this pattern is powerful enough in the vast majority of situations.

(more…)

Dealing with Dependencies Inside Design Systems

Dependencies in JavaScript are pretty straightforward. I can't write library.doThing() unless library exists. If library changes in some fundamental way, things break and hopefully our tests catch it.

Dependencies in CSS can be a bit more abstract. Robin just wrote in our newsletter how the styling from certain classes (e.g. position: absolute) can depend on the styling from other classes (e.g. position: relative) and how that can be — at best — obtuse sometimes.

Design has dependencies too, especially in design systems. Nathan Curtis:

You release icon first, and then other components that depend on it later. Then, icon adds minor features or suffers a breaking change. If you update icon, you can’t stop there. You must ripple that change through all of icon’s dependent in the library too.

“If we upgrade and break a component, we have to go through and fix all the dependent components.” — Jony Cheung, Software Engineering Manager, Atlassian’s Atlaskit

The biggest changes happen with the smallest components.

CSS border-radius can do that?

Nils Binder has the scoop on how to manipulate elements by using border-radius by passing eight values into the property like so:

.element {
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
}

This is such a cool technique that he also developed a tiny web app called Fancy-Border-Radius to see how those values work in practice. It lets you manipulate the shape in any which way you want and then copy and paste that code straight into your designs:


Cool, huh? I think this technique is potentially very useful if you don’t want to have an SVG wrapping some content, as I’ve seen a ton of websites lately use “blobs” as graphic elements and this is certainly an interesting new way to do that. But it also has me wondering how many relatively old and familiar CSS properties have something sneaky that's hidden and waiting for us.

(more…)

#165: Building Your Backend with Serverless Functions

David Wells & Chris Coyier talk about how you can build an app hosted on Netlify statically but still have a backend database to power it. We use the classic TODO app example where the database is powered by FaunaDB and we talk to that database via serverless functions (i.e. Node.js JavaScript functions running on AWS Lambda via Netlify's extremely easy and powerful integration). Put the JavaScript files in a /functions folder and they'll be deployed and runnable!

(more…)

The fast and visual way to understand your users

Hotjar is everything your team needs to:

  • Get instant visual user feedback
  • See how people are really using your site
  • Uncover insights to make the right changes
  • All in one central place
  • If you are a web or UX designer or into web marketing, Hotjar will allow you to improve how your site performs. Try it for free.

    Did we get anywhere on that :nth-letter() thing?

    No, not really.

    I tried to articulate a need for it in 2011 in A Call for ::nth-everything.

    Jeremy takes a fresh look at this here in 2018, noting that the first published desire for this was 15 years ago. All the same use cases still exist now, but perhaps slightly more, since web typography has come along way since then. Our desire to do more (and hacks to make it happen) are all the greater.

    I seem to recall the main reason we don't have these things isn't necessarily the expected stuff like layout paradoxes, but rather the different typed languages of the world. As in, there are languages in which single characters are words and text starts in different places and runs in different directions. The meaning of "first" and "line" might get nebulous in a way specs don't like.

    Introducing GitHub Actions

    It’s a common situation: you create a site and it’s ready to go. It’s all on GitHub. But you’re not really done. You need to set up deployment. You need to set up a process that runs your tests for you and you're not manually running commands all the time. Ideally, every time you push to master, everything runs for you: the tests, the deployment... all in one place.

    Previously, there were only few options here that could help with that. You could piece together other services, set them up, and integrate them with GitHub. You could also write post-commit hooks, which also help.

    But now, enter GitHub Actions.

    (more…)

    How to Import a Sass File into Every Vue Component in an App

    If you're working on a large-scale Vue application, chances are at some point you're going to want to organize the structure of your application so that you have some globally defined variables for CSS that you can make use of in any part of your application.

    This can be accomplished by writing this piece of code into every component in your application:

    <style lang="scss">
      @import "./styles/_variables.scss";
    </style>

    But who has time for that?! We're programmers, let's do this programmatically.

    (more…)

    icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag