Freelancing

CSS-Tricks

Jeremy Keith – Building the Web

14 hours 2 minutes ago

I really enjoyed this interview with Jeremy Keith on the state of the web, how things have changed in recent years and why he’s a mix of optimistic and nervous for the future.

One thing that caught my attention during the interview more than anything was where Jeremy started discussing how folks think that websites are pretty crummy in general. This reminded me that I cannot count the number of times when someone has said to me “ah, I can’t … Read article

The post Jeremy Keith – Building the Web appeared first on CSS-Tricks.

Robin Rendle

Multiplayer Tic Tac Toe with GraphQL

15 hours 2 minutes ago

GraphQL is a query language for APIs that is very empowering for front-end developers. As the GraphQL site explains it, you describe your data, ask for what you want, and get predictable results.

If you haven’t worked with it before, GraphQL might be a little confusing to grok at first glance. So, let’s build a multiplayer tic-tac-toe game using it in order to demonstrate how it’s used and what we can do with it.

First thing we need is … Read article

The post Multiplayer Tic Tac Toe with GraphQL appeared first on CSS-Tricks.

Rishichandra Wawhal

Weekly Platform News: Improving UX on Slow Connections, a Tip for Writing Alt Text and a Polyfill for the HTML loading attribute

1 day 6 hours ago

In this week's roundup, how to determine a slow connection, what we should put into alt text for images, and a new polyfill for the HTML loading attribute, plus more.

Detecting users on slow connections

Algolia is using the Network Information API (see the API’s Chrome status page) to detect users on slow connections — about 9% of their users — and make the following adjustments to ensure a good user experience:

  • increase the request timeout when the

Read article

The post Weekly Platform News: Improving UX on Slow Connections, a Tip for Writing Alt Text and a Polyfill for the HTML loading attribute appeared first on CSS-Tricks.

Šime Vidas

Advice for Technical Writing

1 day 13 hours ago

In advance of a recent podcast with the incredible technical writer and Smashing Magazine editor-in-chief Rachel Andrew, I gathered up a bunch of thoughts and references on the subject of technical writing. So many smart people have said a lot of smart things over the years that I thought I'd round up some of my favorite advice and sprinkle in my own experiences, as someone who has also done his fair share of technical writing and editing.

There is … Read article

The post Advice for Technical Writing appeared first on CSS-Tricks.

Chris Coyier

Navbar Nudging on @keyframers

1 day 15 hours ago

I got to be the featured guest over on The Keyframers the other day. We looked at a Dribbble shot by Björgvin Pétur Sigurjónsson and then slowly built it, taking some purposeful detours along the way to discuss various tech.

We start by considering doing it entirely in CSS, then go for some light JavaScript to alter some data attributes as state, then ultimately end up using flipping.

This is where we ended up:

See the Pen
Navbar Nudging
Read article

The post Navbar Nudging on @keyframers appeared first on CSS-Tricks.

Chris Coyier

Using requestAnimationFrame with React Hooks

2 days 15 hours ago

Animating with requestAnimationFrame should be easy, but if you haven’t read React’s documentation thoroughly then you will probably run into a few things that might cause you a headache. Here are three gotcha moments I learned the hard way.

TLDR: Pass an empty array as a second parameter for useEffect to avoid it running more than once and pass a function to your state’s setter function to make sure you always have the correct state. Also, use useRef for … Read article

The post Using requestAnimationFrame with React Hooks appeared first on CSS-Tricks.

Hunor Márton Borbély

Other Ways to SPAs

2 days 15 hours ago

That rhymed lolz.

I mentioned on a podcast the other day that I sorta think WordPress should ship with Turbolinks. It's a rather simple premise:

  1. Build a server-rendered site.
  2. Turbolinks intercepts clicks on same-origin links.
  3. It uses AJAX for the HTML of the new page and replaces the current page with the new one.

In other words, turning a server-rendered app into "Single Page App" (SPA) by way of adding this library.

Why bother? It can be … Read article

The post Other Ways to SPAs appeared first on CSS-Tricks.

Chris Coyier

Getting Netlify Large Media Going

3 days 7 hours ago

I just did this the other day so I figured I'd blog it up. There is a thing called Git Large File Storage (Git LFS). Here's the entire point of it: it keeps large files out of your repo directly. Say you have 500MB of images on your site and they kinda need to be in the repo so you can work with it locally. But that sucks because someone cloning the repo needs to download a ton of … Read article

The post Getting Netlify Large Media Going appeared first on CSS-Tricks.

Chris Coyier

Let’s Build a JAMstack E-Commerce Store with Netlify Functions

3 days 14 hours ago

A lot of people are confused about what JAMstack is. The acronym stands for JavaScript, APIs, and Markup, but truly, JAMstack doesn’t have to include all three. What defines JAMstack is that it’s served without web servers. If you consider the history of computing, this type of abstraction isn’t unnatural; rather it’s the inevitable progression this industry has been moving towards.

So, if JAMstack tends to be static by definition, it can’t have dynamic functionality, server-side events, or use a … Read article

The post Let’s Build a JAMstack E-Commerce Store with Netlify Functions appeared first on CSS-Tricks.

Sarah Drasner

Lazy load embedded YouTube videos

3 days 14 hours ago

This is a very clever idea via Arthur Corenzan. Rather than use the default YouTube embed, which adds a crapload of resources to a page whether the user plays the video or not, use the little tiny placeholder webpage that is just an image you can click that is linked to the YouTube embed.

It still behaves essentially exactly the same: click, play video in place.

The trick is rooted in srcdoc, a feature of <iframe> where you can … Read article

The post Lazy load embedded YouTube videos appeared first on CSS-Tricks.

Chris Coyier

Using rel=”preconnect” to establish network connections early and increase performance

4 days 4 hours ago

Milica Mihajlija:

Adding rel=preconnect to a <link> informs the browser that your page intends to establish a connection to another domain, and that you'd like the process to start as soon as possible. Resources will load more quickly because the setup process has already been completed by the time the browser requests them.

The graphic in the post does a good job of making this an obviously good choice for performance:

Robin did a good job of rounding up Read article

The post Using rel=”preconnect” to establish network connections early and increase performance appeared first on CSS-Tricks.

Chris Coyier

Bounce Element Around Viewport in CSS

4 days 15 hours ago

Let's say you were gonna bounce an element all around a screen, sorta like an old school screensaver or Pong or something.

You'd probably be tracking the X location of the element, increasing or decreasing it in a time loop and — when the element reached the maximum or minimum value — it would reverse direction. Then do that same thing with the Y location and you've got the effect we're after. Simple enough with some JavaScript and math.

Here's … Read article

The post Bounce Element Around Viewport in CSS appeared first on CSS-Tricks.

Chris Coyier

Can you view print stylesheets applied directly in the browser?

4 days 15 hours ago

Yep.

Let's take a look at how to do it in different browsers. Although note the date of this blog post. This stuff tends to change over time, so if anything here is wrong, let us know and we can update it.

In Firefox...

It's a little button in DevTools. So easy!

  1. Open DevTools (Command+Option+i)
  2. Go to the “Inspector” tab
  3. Click the little page icon

In Chrome and Edge...

It's a little weirder, I think, but it's still a fairly … Read article

The post Can you view print stylesheets applied directly in the browser? appeared first on CSS-Tricks.

Chris Coyier

Hacking Tutorials

iOS Programming