#239: Our Current Stack

Rachel and Chris go on a tour through tech town to talk about CodePen's current stack and how it has changed and morphed over the years.

Time Jumps

  • 01:04 Let's go into Tech Town and talk about our stack
  • 05:41 Redux regret town.
  • 11:42 Now we're in super hooks town
  • 12:54 Sponsor: Mux
  • 14:42 New stack town.
  • 18:48 Codesplitting town.
  • 25:44 Caching town.
  • 38:57 Alex is a Javascript magpie. In town.

Sponsor: Mux

Mux is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time.
Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million.

Show Links

CodePen Links

The post #239: Our Current Stack appeared first on CodePen Blog.

#238: High Contrast Syntax Highlight Theme

Show Description

Klare and Marie discuss the new high contrast syntax highlighter theme added to CodePen - designed by Klare!

Time Jumps

  • 00:42 New syntax highligher themes
  • 01:38 Why did we make a new theme?
  • 04:45 Testing with light themes enabled
  • 05:25 Dark vs Light
  • 08:48 Sponsor: WordPress.com
  • 10:17 Adapting theme to VS Code
  • 14:47 Figuring out the right contrast ratio
  • 17:02 Tools for testing color blindness

Sponsor

  • 08:48 WordPress.com - WordPress.com gives you everything you need to create anything you want. It’s flexible, secure, and powerful, just like you want your business to be.

Show Links

CodePen Links

The post #238: High Contrast Syntax Highlight Theme appeared first on CodePen Blog.

How to Level Up Your Engineers [Podcast]

The DevTeam Project is a library of stories from successful engineering managers around the world about growing, managing, and motivating excellent dev teams. Our mission is to help dev teams learn from great engineering leaders about trends today and what’s shaping their industry. To achieve this we’re going to release a podcast episode and a blog post with highlights from the conversation every other week. In each episode we’re travelling to meet a prominent engineering leader and talk about their unique perspective and insights.

You may also like: Managing Engineers: Minimizing Risk and Surprises [Podcast]

For more stories like that check out The DevTeam Project or subscribe to our podcast using one of the platforms below.

#237: Elasticsearch

Show Description

Tim and Marie talk about CodePen's decision to switch away from Solr and start using ElasticSearch to power CodePen's search.

Time Jumps

  • 01:29 What did we used to use?
  • 08:25 Hosting in the cloud
  • 18:05 What was the switching process like?
  • 21:22 Pitfalls and tips from our experience
  • 24:32 JDBC

Sponsor

Show Links

CodePen Links

The post #237: Elasticsearch appeared first on CodePen Blog.

Where should “Subscribe to Podcast” link to?

For a while, iTunes was the big dog in podcasting, so if you linked "Subscribe to Podcast" to like:

https://podcasts.apple.com/podcast/id493890455

...that would make sense. It's a web URL anyway, so it will work for anyone and has information about the podcast, as well as a list of recent shows you can even listen to right there. For Apple folks, you might be redirected in-app (mobile) or it becomes one click away (desktop). But for folks on Android or Linux or Windows or something, that's not particularly useful.

What are the other possibilities?

Podcasts are essentially dressed up RSS, so giving people a link to the feed isn't out of the question. We do that on both ShopTalk and CodePen Radio:

I like PocketCasts for my podcasts. I feel like this used to be more obvious, but pasting in an RSS link to search does seem to find the feeds.

I would think (and hope!) that most podcast apps have some way to subscribe manually via feed. But... pretty nerdy and probably a little too dangerous for just a "Subscribe to Podcast" link.

For Android specifically, there is a site where you can put your feed URL after "subscribeonandroid.com" and get a special page just for that:

https://subscribeonandroid.com/blog.codepen.io/feed/podcast/

They say:

If the listener has a one click supported app on their android device, the App will load automatically.

And clearly there are some options:

I find the most common option on podcasts is to link to a soup of popular options:

I think that's probably a safe thing to do. For one, it signals that you're on top of your game a bit and that your show is working on major platforms. But more importantly, podcast listeners probably know what platform they mainly use and clicking on a link specifically for that platform is probably quite natural.

Speaking of major platforms, Spotify is going big on podcasts, so linking directly to Spotify probably isn't the worst choice you could make.

https://open.spotify.com/show/2PUoQB330ft0sTzSNoCPrH?si=ZUYOtZSZQZyrDdo81l7TcA

But there are situations where you only get one link. Instagram is notable for this. No links on posts — only the one link on your profile. You could send them to your website, but of course, with podcasts, the name of the game is making it easy to subscribe. That means getting people right there is best. But also with stuff like tweets, you can't always deliver a smorgasbord of links. Hence the title of this blog post. If you gotta link to just one place to subscribe, where should it be?

Looks like that's what Plink does.

Here's ShopTalk: https://plnk.to/shoptalk

Visiting on desktop gets you the smorgasbord of links. Visiting on my iPhone, I get a direct link to Apple Podcasts.

That's what they do:

Auto-open installed Podcast Apps native to listener's iOS, Android, and other mobile and smart watch devices. Each smart link also has a Show Page that desktop users will see with links to that show in Apps like Apple & Google Podcasts, Spotify, Stitcher, Overcast, and other podcatchers.

They apparently use all kinds of data to figure it out.

... will detect the listener's device, geo, and other factors and send them to your show in pre-installed podcast apps.

Anybody can make a redirect link to particular platforms. Like, we could have built shoptalkshow.com/spotify and shoptalkshow.com/itunes and redirected to those places, but what you get here is fancy auto-detection in a single link.

I signed up for it for ShopTalk, so we'll see if we end up using it much or not.

The post Where should “Subscribe to Podcast” link to? appeared first on CSS-Tricks.

#236: Private by Default

Show Description

We've got a small feature update to talk about that's a big deal to some folks: private by default. For some people & teams, having everything private by default on CodePen is critical to their work. Chris & Marie talk about how we added this option and the steps we took to validate and notify users about the feature.

Time Jumps

  • 00:14 Topic introduction
  • 02:24 Adding a setting requires some thought
  • 05:41 Sponsor: Mux
  • 07:34 Privacy as a feature
  • 10:49 Validating an idea
  • 16:12 How do we notify people about new features?

Sponsor: Mux

Mux Video is an API-first platform that makes it easy for any developer to build beautiful video. Powered by data and designed by video experts, your video will work perfectly on every device, every time.
Mux Video handles storage, encoding, and delivery so you can focus on building your product. Live streaming is just as easy and Mux will scale with you as you grow, whether you're serving a few dozen streams or a few million.

Show Links

CodePen Links

The post #236: Private by Default appeared first on CodePen Blog.

#235: Blocking

Show Description

Chris and Klare talk about the planning and process of building a blocking feature for CodePen.

Time Jumps

  • 00:27 Topic introduction
  • 01:03 Why did we build blocking in?
  • 08:31 Complicated UI decisions and planning
  • 15:46 Sponsor: Flywheel
  • 17:19 Planning out blocking
  • 26:11 Adding report as an option

Sponsor: Flywheel

Flywheel is the best WordPress hosting out there. Of course they have local WordPress development down with Local by Flywheel, which you can use no matter what, the hosting itself is equally good. Everything is just easier on Flywheel, and the support you get from the early days of helping get your site moved to the fiddly little stuff you'll run into down the road, they got your back.

Show Links

CodePen Links

#234: React Grids

Show Description

Cassidy is on to talk about powering the grids on CodePen with React to make them faster and future feature friendly!

Time Jumps

  • 02:05 Updating the Instagram page
  • 07:51 Moving to a new stack as a team
  • 10:18 Speed improvements
  • 18:12 Sponsor: WooCommerce
  • 19:35 Future feature in the works

Sponsor: WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

Tom’s Tech Notes: Advice for Scaling DevOps

Welcome to another episode of Tom's Tech Notes! As per usual, DZone's research analyst Tom Smith has interviewed a host of industry experts to see how you can help your team and your organization scale DevOps.

This podcast is in preparation for our upcoming Scaling DevOps Trend Report, which launches on DZone.com on August 26.

Tom’s Tech Notes: What You Need to Know About DevOps [Podcast]

Welcome to another episode of Tom's Tech Notes! As per usual, DZone's research analyst Tom Smith has interviewed a host of industry experts to see what you need to know about proper DevOps adoption and implementation.

This podcast is in preparation for our upcoming Scaling DevOps Trend Report, which launches on DZone.com on August 26.

#233: Export 2

Show Description

Stephen, Chris, and Marie are here to talk about the new export with build process! We get into how it was built, its limitations, and some improvements we made to our admin systems along the way.

Time Jumps

  • 00:26 Topic and guest intros
  • 07:53 How did we develop this feature?
  • 09:45 Why not a webpack bundle?
  • 14:28 Sponsor: Woocommerce
  • 15:49 Use cases for updated export tool
  • 18:39 Soft launching with user research
  • 20:21 Improving the feature flag system
  • 25:52 Project planning and marketing

Sponsor: WooCommerce

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #233: Export 2 appeared first on CodePen Blog.

Tom’s Tech Notes: API Management Advice for Now and Later [Podcast]

Welcome to another episode of Tom's Tech Notes! As per usual, DZone's research analyst Tom Smith has interviewed a host of industry experts to see what they have to say about APIs and API management.

This podcast is in preparation for our upcoming API Management Trend Report, which launches on DZone.com on August 5. Our Trend Reports have replaced DZone's traditional research guides. The main changes? Trend Reports are released more frequently and are more focused on narrower topics. You'll still get the same high-quality expert articles and cutting edge research and analysis.

#232: Side Projects

Show Description

Cassidy and Marie are on this week to talk about side projects and how they can help you personally as well as professionally. Let us know what kind of side projects you're working on!

Time Jumps

  • 01:44 Spreadsheets!
  • 11:26 Sponsor: Jetpack
  • 14:02 Spreading yourself too thin
  • 21:38 Making a course on a side project

Sponsor: Jetpack

Jetpack brings a wealth of features to your self-hosted WordPress site as one of the best no-brainer plugins for WordPress there is. One feature I just recently used for the first time was the video hosting and video player. I had a video clip that I just wanted to drag and drop into a blog post like I would an image, but it was a little too big. Fortunately I just uploaded it through WordPress.com, it was magically available in the Media dialog on my self-hosted site, and it worked perfectly.

Show Links

CodePen Links

The post #232: Side Projects appeared first on CodePen Blog.

Tom’s Tech Notes: API Management Essentials and Use Cases

Welcome to another episode of Tom's Tech Notes! As per usual, DZone's research analyst Tom Smith has interviewed a host of industry experts to see what they have to say about APIs and API management.

This podcast is in preparation for our upcoming API Management Trend Report, which launches on DZone.com on August 5. Our Trend Reports have replaced DZone's traditional research guides. The main changes? Trend Reports are released more frequently and are more focused on narrower topics. You'll still get the same high-quality expert articles and cutting edge research and analysis.

#231: Social

Show Description

Marie and Cassidy chat about how CodePen is using social media to communicate with our community.

Time Jumps

Sponsor: Netlify

Netlify, the powerful and awesome web host we all know and love, now is offering AWS Lambda functions built right in. You make a folder for all your functions, and they become relative paths you can hit to execute those functions. One reason you might wanna do that? Keeping your third-party API keys safe! Just another ingredient that make your fast static sites... not so static.

Show Links

CodePen Links

The post #231: Social appeared first on CodePen Blog.

#230: Apollo

Show Description

What is Apollo and how does CodePen use it? Cassidy just returned from Apollo Day and is here to help educate us all about Apollo and how/why CodePen chose to use it.

Time Jumps

  • 00:46 What is Apollo Day?
  • 05:04 How does CodePen use Apollo?
  • 15:03 Sponsor: WooCommerce
  • 16:26 How do you not repeat yourself?
  • 25:41 Why is it called Apollo?

Sponsor: WooCommerce 15:03

WooCommerce is a WordPress plugin that brings eCommerce to your WordPress sites. It's unique in its customizability and flexibility. You can use it to sell physical products, digital downloads, memberships, services, and tickets, plus offer customers lots of different ways to pay, including things like Apple Pay and Bitcoin powered by Stripe.

Show Links

CodePen Links

The post #230: Apollo appeared first on CodePen Blog.

229: Vulnerability

Show Description

Cassidy and Marie are talking vulnerability: at work, in software, and IN work ON software. What does vulnerability in work look like? And how putting yourself out there can be a great way to help you grow.

Time Jumps

  • 01:24 What does vulnerability in work look like?
  • 09:32 Sponsor: Jetpack
  • 12:03 Do you need a perfect Github streak to work?
  • 15:07 People make themselves vulnerable on CodePen
  • 20:04 Putting yourself out there helps you grow
  • 22:24 Fighting spam to create a safe place to be vulnerable
  • 28:52 Asking for tech help when you need it.

Sponsor

9:32 Jetpack

Show Links

CodePen Links