Do This to Improve Image Loading on Your Website

Featured Imgs 13

In the video embedded below, Jen Simmons explains how to improve image loading by using width and height attributes. The issue is that there’s a lot of jank when an image is first loaded because an img will naturally have a height of 0 before the image asset has been successfully downloaded by the browser. Then it needs to repaint the page after that which pushes all the content around. I’ve definitely seen this problem a lot on big news websites.

Anyway, Jen is recommending that we should add height and width attributes to images like so:

<img src="dog.png" height="400" width="1000" alt="A cool dog" />

This is because Firefox & Chrome will now take those values into consideration and remove all the jank before the image has loaded, even when you override those values in CSS with a fluid width and thus unknown height. That means content will always stay in the same position, even if the image hasn’t loaded yet. In the past, I’ve worked on a bunch of projects where I’ve placed images lower down the page simply because I want to prevent this sort of jank. I reckon this fixes that problem quite nicely.

Direct Link to ArticlePermalink

The post Do This to Improve Image Loading on Your Website appeared first on CSS-Tricks.

monica.css

Featured Imgs 23

Monica Dinculescu:

I don’t want every possible padding and margin and colour and flexbox configuration in the world. I just want the ones that I know I end up using in every project. So here is monica.css: my very own CSS framework, which I copy paste at the beginning of every CSS file and take it from there.

I love it when people make their own CSS starter. I like Sanitize, but even that feels like a bit much for most things I poke around at. If I was making one for myself, I'd probably steal some of this stuff from Monica. I'd definitely pull the margin off body as I find myself writing that line a lot. I'd probably steal some of that [class] stuff from Andy's. My center class would probably just be text-align and I'd give myself some other centering class for my other favorite centering: display: grid; place-items: center;.

I love how everyone agrees on box-sizing.

Direct Link to ArticlePermalink

The post monica.css appeared first on CSS-Tricks.

CodePen for Education Questions, Answered

Featured Imgs 23

I got a bunch of questions from a "Head of Customer Success" at a company that does developer education recently. They had some great questions about how CodePen could be used in their online courses1. The answers might benefit anyone in this situation, so here's exactly what I was asked and what I answered.

Which would be the best plan for the online course described?

Here's one way instructors/students can use CodePen for a course. The instructor has a curriculum for the course. Part of that includes coding exercises for the students. Those coding exercises can take the form of a pre-created Pen on CodePen. Maybe like this. The students then Fork that Pen and try to complete it, and they send the instructor their attempts.

Here's another way instructors can use CodePen. They teach live using the CodePen editor. Maybe it's projected onto the front of a classroom using Presentation Mode, or the students follow along on their own computers using Professor Mode. Those two features are PRO, so the instructor would need a PRO account.

Here's another. The instructor (or school) gets a Team Account. All the students are invited as members of the Team. That makes everyone involved have a PRO account, so they can do things like make Private Pens and share uploaded assets like images. As a new cohort comes in the students can be removed from the team and new students added.

Could it be billed monthly, quarterly or annually?

We offer monthly or annual billing on any of our plans (but not quarterly).

When is it billed? (at the beginning or at the end of the month?)

We bill the second you sign up, and then at intervals based on that day. For example, if you sign up on March 14th and choose a monthly plan, you'll be charged again April 14th. If you picked a yearly plan, you'll be charged again March 14th the following year.

Is the billing variable or fixed per term?

Plans are mostly fixed. If you go with a Team Account, Teams are charged based on the number of seats, so you can increase or decrease those seats at any time and are re-billed accordingly.

Is the billing per registered users, active users?

Only Team Accounts are billed on a per-user basis. Team Accounts are $12-per-person if billed annually or $19-per-person if billed monthly. If what worked better for you was only having the instructor with a PRO account, for example, that's a single user with a single fixed cost.

Our online courses are on-demand, so is it possible to switch on and off the course according to our needs per month?

Yes, you can cancel and re-activate on a monthly basis if you choose the monthly plan.


Our dedicated page for CodePen and Education is probably also worth a read.


1 - This kind of thing is sometimes a sign that the design of your site doesn't help answer these questions well enough. In this case, I'm not that worried about that. I think we do OK there, although this is good research for the next time we're tackling those areas.

The post CodePen for Education Questions, Answered appeared first on CodePen Blog.