With all this recent work we did upgrading our Asset Hosting feature, there were some side-benefits around the app as well.
For example, as a PRO member, you can upload replacement screenshots for your Pens if you wish to. The uploader for those is the much nicer Filestack uploader now. Here’s how that works:
Similarly, avatar uploading users the new upload experience. So you can upload whatever ol’ image you have around (to your profile settings), even if it’s gigantic or the wrong size, and you’ll have the opportunity to crop it as you upload it:
We’ll take care of making sure it’s sized properly and being served as snappily as we can!
We even use this stuff internally. For example, when we build the email we send out each week for the CodePen Challenges, we have this slick little uploader to use for ourselves, making our own workflows just all that much smoother.
Early congratulations, A Book Apart! That’s a hell of a milestone. I’m quite sure I’ve read more A Book Apart books than any other tech book publisher.
Katel LeDu runs the ship over there, and she’s given me very special pack of discount codes that will get you my book, Practical SVG, for free. So now it’s my job to get you those codes. There are only 10 of them—not enough for everyone. So I’m going to do some low-down, dirty-rotten, absolutely-shameless cross-marketing: I’m going to give them to the first 10 people who are CodePen PRO who email me at chriscoyier@gmail.com. CodePen PRO is only $12/month if you pay monthly or $8/month if you pay yearly, and this discount code is worth $14, so in the end, you get both and save a few bucks. If you’re already PRO, cool, thanks, you still qualify.
You know what’s cool about Practical SVG? Even though I wrote it 4 years ago, SVG just doesn’t change that fast, so I’d say 90%+ I wouldn’t even change in a re-write. If you’re just learning about SVG as a front-end developer, it’s a fine choice.
In addition to my conniving scheme above, if you just really would like this book and have zero budget for it, or know someone else in that situation, you can also email me about that and we’ll work it out. I just may have a few copies around here I could get you. Hey, I’m trying to make money off you but I ain’t trying to lock away knowledge from anyone that really needs it.
Perhaps you know Unsplash? I'd wager it's the most popular stock photography site out there for two big reasons:
Every photo on there is pretty darn nice
Every photo is entirely free even for commercial use. You don't have to ask permission or even credit it (although that's appreciated).
Here's something you might not know though: Unsplash has an API, and it's unlimited and free. Brass tacks: it's exactly what you hope it's going to be. A really clean, well documented, well-performing, JSON API that gives you URLs to photos with metadata.
What would you use the Unsplash API for?
There are lots of examples on Unsplash’s developer area, from Medium to Squarespace to Trello, but here is another one of my favorites!
I use Notion every day. It's a great app for note-taking, planning, and all sorts of stuff. One of the features it has is giving every document you create within it a custom image header. These give the documents some great personality. Notion has a handful you can choose from or you can upload your own. Or, you can search Unsplash for them!
So to offer a search experience inside an app like Notion, you'd have a little search form and when users submit that search query, you'd hit the API with the value they entered, then loop over response.results using the response.results.urls.thumb to show the images returned. If the user picks one, you can use a higher-res URL to do something with and have access to all that photos metadata.
Hot tip! The URLs to photos are dynamic in that you can resize them, crop them, serve them in different formats, and even change the compression quality all from URL parameters. For example, changing size is like &w=200.
That is exactly what we do on CodePen
The purpose of CodePen Pen Editor is to provide an online code editor that makes it tremendously easy to code something up for the web, save it, and share it. Images are a big part of the web, so it's very possible that you might want to use a gorgeous image in a Pen. We have Asset Hosting ourselves on CodePen as a PRO feature, but we also offer Unsplash images to everyone for free!
Check out how it works:
A basic example in React
Let's make a search <form>, when submitted, it hits the Unsplash API and returns a bunch of photos.
We'll use Superagent for the Ajax just to make a smidge easier.
We'll track the current search query and returned data in state.
Here is that working!
How might you use that in your own app?
Does your app allow users to create anything? If so, could those things be enhanced by great photos? For example, cover images, background images, images for blog posts, etc. Check out existing partners for more ideas.
Could this be part of an avatar-choosing experience?
Maybe you could build a plugin that enhances some existing app by allowing quicker access to photos.
Feel free to leave comments with more ideas or how you have used the API. And if you haven't, try it out.
When you're working in the Pen Editor, you have complete access to both all the files you've uploaded (Asset Hosting is a PRO feature) as well as a slew of free design resources we make available to you.
Click that Assets button in the footer, and the Assets modal will pop up. We've just redesigned this area to be more useful and more in-line with other areas of the site, like our recently redesigned Pen Settings.
The biggest bit of feedback we were working from is that, for PRO members, it was too hard to access your own files. In fact, in some screen sizes and configurations, the Your Files section could have been totally off-screen and it wasn't obvious you could scroll to it. In this new design, Your Files is front-and-center when you open the modal, and all the other free resources are still there and easy to click over to.
You might see modals like this from time to time when you log in and visit the homepage.
It's a little in-app feature education, if you will. It's marketing too, in a sense, as sometimes we're using it to tell you about PRO features. We podcasted about that just recently:
That one above is about the Dashboard. We chose that one recently as we've had some feedback from people telling us it's too hard to find their own work, and it turns out they had never tried the Dashboard, and once they had were very happy with that.
The first time we ever did this style of in-app notification was when we released the Private by Default feature. That was met with much enthusiasm. We worried that these types of notifications might cause pushback (get out of my way! I'm trying to do something else!), but we've heard almost none of that and plenty of thanks for letting us know feedback.
You might see modals like this once in a while going forward letting you know about features of CodePen you might not be aware of.
Chronicle posts are opportunities for me to round-up things that I haven't gotten a chance to post about yet, rounded up together. It's stuff like podcasts I've had the good fortune of being on, conferences I've been at or are going to be at, happenings at ShopTalk and CodePen, and more.
My talk at JAMstack_conf
We recorded a live episode of ShopTalk Show as well:
As I write and publish this, we're rolling out a really cool new UI feature. Wherever you're browsing CodePen you see grids of items. For example, a 6-up grid of Pens. Click them and it takes you to the Pen Editor (there are some shortcuts, like clicking the views number takes you to Full Page View and clicking the comments number takes you to Details View). Now, there is a prominent action that will expand the Pen into a modal right on that page. This will allow you to play with the Pen, see it's code, see the description, tags, comments... really everything related to that Pen, and without leaving the page you were on. It's a faster, easier, and more fun way to browse around CodePen. If you're not PRO, there are some ads as part of it, which helped justify it from a business perspective.
Part of life at CodePen is also all the things we do very consistently week after week, like publish our weekly newsletter The CodePen Spark, publish our podcast CodePen Radio, and produce weekly Challenges to give everyone a fresh prompt to build something from if you could use the nudge.
Upgrading to PRO is the best thing you can do to support me and these sites.
My talk at FITC's Web Unleashed
My talk at Craft CMS's dotall Conf
I was on a panel discussion there as well: The Future of Web Development Panel with Ryan Irelan, Andrew Welch, Matsuko Friedland, Marion Newlevant, and myself. Here's that video:
Conferences
I don't have any more conferences in 2019, but I'll be at a handful of them in 2020 I'm sure. Obviously I'm pretty interested in anything that gets into front-end web development.
Remember we have a whole calendar site for upcoming front-end development-related conferences! Please submit any you happen to see missing.
We don't even really have "seasons" on ShopTalk Show. Instead, we're just really consistent and put out a show every week. We'll be skipping just one show over the holidays (that's a little nuts, honestly, we should plan to take a longer break next year).
We're edging extremely close to hitting episode #400. I think it'll end up being in February. Considering we do about a show a week, that's getting on eight years. Questions like: Are we played out? Are people finding us still? Are people afraid to jump in? Are people as engaged with the show this far in? - have been going through my mind. But anytime we mention stuff along those lines on the show, we hear from lots of people just starting to listen, having no trouble, and enjoying it. I think having a "brand" as established as we've done with ShopTalk Show is ultimately a good thing and worth keeping on largely as-is. We might not be as hot'n'fresh as some new names in podcasting, but even I find our show consistently interesting.
Some of our top-downloaded shows in the last few months:
We used to sell PRO Team accounts in seat increments of 5. 5, 10, 15, 20, 25, etc. After some fairly recent payments infrastructure work, there was no longer any particular reason it had to be that way (we used to avoid it because of some complexity we wanted to avoid, but that's no longer the case).
Now, you can buy a Team account with exactly as many seats as you need.
The whole point of Teams is that:
You can collaborate together, sharing ownership of everything created on CodePen, without giving up your individual CodePen contexts.
Everybody is PRO, in or out of the Team context.
You get shared billing
PRO Teams are billed at the same exact cost as the Developer PRO plan, multiplied by how many members are on the team.
So if you're a 4-person Team like CSS-Tricks right now, you pay for 4 seats. If you're a 2-person Team like The @keyframers right now, you pay for 2 seats. If you're a 7-person team like Team CodePen, you pay for 7 seats.
Private items are a PRO feature of CodePen. If you make an item (Pen, Post, Project, Collection) private, nobody can see it except you and people you share the link with.
We feel like that makes a decent amount of obvious sense. But it's slightly complicated with Collections, which contain Pens. What happens if you, say, put a private Pen in a public Collection? Well, we keep our promise. Nobody else, except you, can see that private Pen. So you when you look at the Collection, the Pen is in there. When other people look at it, it's not there.
That logic can cause a little confusion, so we've added a special message that only you can see to make sure it's clear.
Hopefully that clears things up for those situations where you have both private and public Pens in a public Collection.
One more little things to be aware of:
If you put private Pens in a private Collection, then share that private Collection, the private Pens within will be shown. The idea there is that you've already chosen to break that private barrier, so private things can be revealed. This can be useful when you, for example, need to keep a whole bunch of Pens private (say, for client work), but share the whole lot of them at once.
If you're already PRO, you've probably already seen this! That's because we announced the feature via a modal on the homepage when you are logged in as a PRO user:
Hopefully the name "Private by Default" explains what it needs to: if you toggle this setting on, when you save any Pen, Project, Collection, or Post, it saves it privately automatically.
You can still make them public at any time (it's an option on any of those things), but that first save will always make them private.
If you're looking for more detailed information, it's always smart to check our documentation. Chances are that's more up to date than an announcement blog post like this.
The little UI module that allows you to control this feature is just a header, paragraph, and toggle switch that controls a value in our database. We smoosh all that together, including querying for and mutating the data (via toggle) into a single component:
<PrivateByDefault />
Wherever we put that thing, it's a fully functional bit of UI that does that job.
But the value of this really presents itself when combined with other bits of infrastructure we already have. For example, we have a <Modal /> component that displays a modal and handles all the stuff that modals need to: opening/closing, escape-key closing, click-outside closing, styling, etc.
We also have a functionality component called <FeatureNotifier /> which will render what is inside of it only once and then save the fact that you've seen the feature to our database. By default, it's a little yellow glowing circle, but it can also render whatever you give it. So by putting all those things together...
<FeatureNotifier id={PRIVATEBYDEFAULT}>
<Modal>
<h1>Would you prefer if all new work was private by default?</h1>
<p>Pardon the intrusion... we're letting you know about this new feature.</p>
<PrivateByDefault />
</Modal>
</FeatureNotifier>
Of course, it was work to get there, but seeing this kind of thing come together quickly and easily now that the work is done is very satisfying.
