Marie Mosley | The Blog Pros

February 11, 2019

#CodePenChallenge: Triangles

New week, new #CodePenChallenge!

Last week, we bounced into the shapes challenge with circles. Browse through the Pens from the challenge in our #CodePenChallenge: Circles 🔵 collection.

February's Challenge Sponsor: CodePen PRO

CodePen PRO combines a bunch of features that can help any front-end designer or developer at any experience level. You'll be able to drag-and-drop to upload assets • Cross-browser test easier with no-login Debug View and Live View • Make anything private with the flip of a toggle • Collaborate in real time with Collab Mode • So much more.

Week Two Prompt: Triangles 🔺

This week we're getting to the point of the shapes challenge with Triangles!

Your Challenge

Create a Pen that features triangles in an interesting way.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-triangle. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Show off your favorite way to make a triangle in the browser. Will you make it with CSS, SVG, or another technique?
Have you heard of the Sierpinski triangle? It's a fascinating fractal you can generate with JavaScript.
Triangles are the root of the low-poly image style. Could you create an interesting image from triangles?

Resources

Here are a couple of approaches to creating triangles in the browser: the classic border method, and the clip-path method.
Feeling fractal-y? Study up on Sierpinski with Massimo's Sierpinski triangle or Jarrod Thibodeau's The Chaos Never Ends.
Thinking about going the low-poly route? Check out Mikael Ainalem's Ocean and Luke Reid's Low Poly Landscape for inspiration.

The post #CodePenChallenge: Triangles appeared first on CodePen Blog.

February 5, 2019

#209: Chris Gannon

Show Description

Chris and Marie talk to CodePen community treasure Chris Gannon about how he uses CodePen with clients, how practicing on CodePen makes him better at his craft, and the various tools he's used to do his work over the years.

Sponsor 11:44 WordPress.com

WordPress powers a third of the internet. Surprising? Perhaps not once you get to know how easy and friendly, yet powerful and flexible WordPress.com is. If you can build a site on WordPress.com, you should. You're doing yourself a big favor by not taking on the incredible technical debt of hosting a site yourself. Focus on your business instead.

Time Jumps

00:50 Guest intro
02:59 Adding an element of surprise to animations
06:02 CodePen is central to Chris' client workflow
11:44 Sponsor: WordPress.com
13:48 Delivering work to clients on CodePen with an API
19:13 Practicing on CodePen helps a lot
22:30 Having a style helps people recognize your work
23:09 What apps do you use for referrals and finding clients?
26:07 What kinds of stickers?
28:29 What kind of tooling do you use?
32:17 What can CodePen do for you?

Show Links

CodePen Links

The post #209: Chris Gannon appeared first on CodePen Blog.

February 4, 2019

#CodePenChallenge: Shapes

It's a new month, and that means it's time for a new #CodePenChallenge!

Last week, we wrapped up a month of color palette challenges with purple! Check out the Pens from the challenge in our Perfect Purples Collection.

February's Challenge Sponsor: CodePen PRO

Week One Prompt: Circles 🔵

Let's bounce into this new challenge with circles! This week we want to see what you can create with the roundest of shapes.

Your Challenge

Create a Pen that features circles in an interesting way.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-circle. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

It's a basic idea with almost unlimited potential: create a Pen with circles in it! They can be precise or abstract, animated or still, colorful or monochrome.
Show us circles in the background. You could give us a beautiful bokeh or a pattern of interlocking rings.
Are you in the center of the venn diagram of CodePen members who like to participate in challenges and like circles? Geek out with some data and create a Venn diagram.

Resources

Here are some quick circle-building tips: You can make a circle with any HTML element by setting the `width` and `height` to be the same and using `border-radius: 50%`. Or, you can use SVG's `<circle>` or `<ellipse>`.
Building a background? Draw inspiration from Owlypixel's "Bokeh Pattern", or the delicate circle patterns of Subtle Patterns.
Creating a diagram? Check out Adrian Roselli's CSS Grid and Shape-Outside Venn Diagram or edanny's rendition of magnt's 404 Venn Diagram.

The post #CodePenChallenge: Shapes appeared first on CodePen Blog.

January 28, 2019

#CodePenChallenge: Perfect Purples 🍇

It's the final week of January's Color Palettes challenge!

Last week, we played with a pop of shocking pink along with black & white. Check out the Pens from week two in our collection #CodePenChallenge: Color Pop 🎈

January Challenge Sponsor: Monday.com

A new way to manage your work. Plan. Organize. Track. In one visual, collaborative space.

With monday.com, you can manage all of your projects in a single place. See projects at a glance, stay on top of your schedule, and collaborate better with your team.

Week Four Prompt: Perfect Purples 🍇

This week we're going monochromatic with a palette of purples: a soft orchid, a pleasing plum, and a dusky deep purple.

Your Challenge

Create a Pen with this purple color palette: #E2A9E5, #632C65, #4B384C. You could choose to only use these colors, or use them as a starting point to experiment with a wider palette.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-purple. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Design a monochromatic UI with these purples.
Use the palette as gradient color stops in a background or border.
Surprise us with a twist on this palette! Maybe you could extend the palette with more color, or work with their color-wheel opposites.

Resources

Building UI? Check out this primer on design with a monochromatic color scheme from Design Bombs.
Brush up on your gradient skills with linear-gradient and radial-gradient, and gradient border resources from CSS-Tricks.
Want to extend the palette? Punch these colors into Adobe Color and play around to find harmonious additions to the color scheme.

The post #CodePenChallenge: Perfect Purples 🍇 appeared first on CodePen Blog.

January 22, 2019

#207: Prefill Embeds

Show Description

Stephen, Marie, and Chris are on to introduce you to the newest feature on CodePen: Prefill embeds.

Time Jumps

00:34 Topic introduction
02:01 Making use of the prefill API
06:04 Goals for the prefill embed feature
10:13 Controlling the look of the embed
13:10 Making it progressive enchancement friendly
16:54 Sponsor: Netlify
17:43 Who will use prefill embeds?
24:02 One pain point we helped fix

Sponsor: Netlify

Deploy modern static websites with Netlify. Get CDN, Continuous deployment, 1-click HTTPS, and all the services you need. Get started for free.

Show Links

CodePen Links

The post #207: Prefill Embeds appeared first on CodePen Blog.

January 21, 2019

#CodePenChallenge: Color Pop 🎈

It's the third week of the Color Palettes challenge!

Last week, we took it back to basics with a primary colors palette. Check out the Pens from week two in our collection #CodePenChallenge: Primary Colors 🍎.

January Challenge Sponsor: Monday.com

A new way to manage your work. Plan. Organize. Track. In one visual, collaborative space.

With monday.com, you can manage all of your projects in a single place. See projects at a glance, stay on top of your schedule, and collaborate better with your team.

Week Three Prompt: Color Pop 🎈

You know, a little pop of color can really tie a look together! This week, we're making black & white shine with a pop of shocking pink.

Your Challenge

Create a Pen with a black, white, and shocking pink color scheme: #000, #FFF, #FF1EAD. You could choose to only use these colors, or use them as a starting point to experiment with a wider palette.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-pop. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Can you combine a black and white photo with shocking pink in an interesting way?
What could you do with these colors and a body of text? That pink would make a fun highlight.
This ultra-minimal palette could stand to expand. Use the color wheel to find complementary colors for the pink and use those to tie it all together.

Resources

Experimenting with black and white photography? Have a look at how Vail Joy recreated the Spotify Colorizer Effects Using CSS Blend Modes.
Playing with text? Don't forget about the fun you can have with ::selection. Read all about it in Overriding The Default Text Selection Color With CSS from CSS-Tricks.
Thinking about expanding the palette? Check out Anna Grenn's piece on building out a color palette of three from a single bold color: Best Three Color Scheme for UI Design.

The post #CodePenChallenge: Color Pop 🎈 appeared first on CodePen Blog.

January 14, 2019

#CodePenChallenge: Primary Colors 🍎

It's the second week of the Color Palettes challenge!

Last week, we kicked off the month with a color palette that was just peachy! Check out the Pens from the first week of the challenge in our collection #CodePenChallenge: Peach Beach 🍑.

January Challenge Sponsor: Monday.com

A new way to manage your work. Plan. Organize. Track. In one visual, collaborative space.

With monday.com, you can manage all of your projects in a single place. See projects at a glance, stay on top of your schedule, and collaborate better with your team.

Week Two Prompt: Primary Colors 🍎

This week we're going back to basics with the primary colors red, blue, and yellow in these shades: #F44336, #1E88E5, #FDD835.

Your Challenge

Create a Pen inspired by this week's palette. You could choose to only use these colors, or use them as a starting point to experiment with a wider palette.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-primary. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

In-browser paint tools are fun! Create a paint tool that features red, blue, and yellow on the palette.
These three colors happen to be part of the Material Design color palette. Could you build a clean, Material-style UI with the primaries?
Explore or explain how these three colors blend together to create new colors.

Resources

Building a painting tool? Check out Frank Dip's Pixel Art Maker or Mona La's Paint Blocks for inspiration.
Read about how the color system works in Material Design. You can grab light and dark variants from CodePen's built-in design assets.
Digging into color blending? Check out how painters mix colors on a real palette, and take a peek at the blending on Letter mix blend mode from Tobias Reich.

The post #CodePenChallenge: Primary Colors 🍎 appeared first on CodePen Blog.

January 8, 2019

#205: The Most Hearted of 2018

Show Description

Marie, Chris, and Cassidy are on the show to recap 2018 on CodePen by taking a scroll through the most hearted content on CodePen in 2018.

Time Jumps

00:38 The dawn of a new year
01:45 Grow a heart 3 times
03:10 Interesting facts about this year's top 100
12:52 The months with the most hearts
17:06 CSS drawing
19:18 At number one...
24:25 Some standouts to us

Show Links

CodePen Links

The post #205: The Most Hearted of 2018 appeared first on CodePen Blog.

January 7, 2019

#CodePenChallenge: Color Palettes

It's a new year, and it's time for the first #CodePenChallenge of 2019!

Way back in 2018, we breezed through the end of the Four Elements challenge with Air. You can flip through the Pens from the challenge in our #CodePenChallenge: Air 💨 collection.

January Challenge Sponsor: Monday.com

A new way to manage your work. Plan. Organize. Track. In one visual, collaborative space.

With monday.com, you can manage all of your projects in a single place. See projects at a glance, stay on top of your schedule, and collaborate better with your team.

Week One Prompt: Peach Beach 🍑

This week's color palette features a delicious shade of peach, anchored by a sea green and a sandy yellow. The hex codes are: #A2CCB6, #FCEEB5, and #EE786E.

Your Challenge

Create a Pen inspired by this week's palette. You could choose to only use these colors, or use them as a starting point to experiment with a wider palette.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-peach. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Illustrate a beach scene that incorporates these sunny colors.
Use these colors as the starting point for gradients in UI elements, like buttons.
Surprise us by taking these colors in another direction. What could you do with their opposites on the color wheel? 🤔

Resources

Want to make a beach scene? Check out Judith Neumann's "In the Beach" or Peter Brinck's "Beach Sunset" for inspiration.
Playing with gradients? Take a look at how Laura Robertson worked with brights and pastels to create beautiful gradients in the Pen "Pastel Gradients".
Plug your colors into Jake Weary's "Color Wheel" to find their opposites and complementary colors.

The post #CodePenChallenge: Color Palettes appeared first on CodePen Blog.

December 24, 2018

#CodePenChallenge: Air

It's the final week of the "Four Elements" challenge!

Last week, the CodePen community set the browser aflame for the Fire challenge. Check out the Pens in our #CodePenChallenge: Fire 🔥 collection.

December's Challenge Sponsor: WooCommerce

WooCommerce is the most popular eCommerce platform on the web. Use WooCommerce to sell anything from luxury mattresses and cupcakes, to date-driven sales like kayak lessons, to one-off items like beautiful hand-crafted jewelry.

Week Three Prompt: Air 💨

This week, we'll draw inspiration right out of thin air.

Your Challenge

Create a Pen and fill it with air! You could show gusts of wind, birds in flight, or floating balloons.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-air. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Turn wind into something you can see, like in Karim Maaloul's "Wind and Sand" or Tiffany Rayside's "Wind".
Nothing can fly without air! Show us birds in flight, like in eyesight's send button that transforms into birds. Or aircraft, like Simon Vrachliotis' "Helicopter Flight".
Fill a Pen with balloons, like these party balloons from BrianDGLS, or the hot air balloon in Lucagez' "React Cloudy Todo List".

Resources

Read a deep dive into creating a wind map with WebGL from Vladimir Agafonkin for Mapbox.
Learn fascinating Tips and Observations of Bird Flight from animator Brendan Body.
Watch Jeffrey Taylor live-code a CSS hot air balloon on YouTube.

The post #CodePenChallenge: Air appeared first on CodePen Blog.

December 17, 2018

#CodePenChallenge: Fire

It's time to start week three of the December "Four Elements" challenge!

Last week, the CodePen community made it rain for the Water prompt. Check out the Pens in our #CodePenChallenge: Water 💧 collection.

December's Challenge Sponsor: WooCommerce

Week Three Prompt: Fire 🔥

We're playing with fire this week! Let's set CodePen alight with Pens inspired by the fire element.

Your Challenge

Fire up a Pen and set it aflame! Light a candle, throw a fireball, or show us some fireworks.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-fire. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

'Tis the season for candles, like in Sarah Drasner's "Flame" and Yule Logs, like Alex Bergin's.
Create pixelated fire, like the kind Fire Mario throws in Dave Judd's Pen.
Light up the sky with fireworks like the Pens in our "Fireworks!" collection.

Resources

Learn how to create a glowing, crackling fire effect with CSS animations from HackerNoon.
Get that 8-bit fire look with a pixelated fire effect tutorial from slicker.me.
Did you know there's a fireworks.js ? Of course there is!

The post #CodePenChallenge: Fire appeared first on CodePen Blog.

December 11, 2018

#203: Sidebar Design

Show Description

Klare, Cassidy, and Marie are on the show to talk about the newly redesigned Sidebar and what the process was like for all involved at CodePen on the redesign.

Time Jumps

00:30 Team intros
01:48 Origins of the redesigned sidebar
05:15 Deciding on what stays and what goes in the nav
10:39 Sponsor: Sentry
12:15 A step towards React and GraphQL
15:31 Doing user research as part of the redesign
20:10 Design tools used for the redesign
24:03 Real world testing of the sidebar

Sponsor: Sentry

You’re a very good developer… Probably. Regardless, your applications break and crash. That’s unavoidable. What is avoidable is wasting time trying to track down the cause of those crashes. Sentry.io provides full stack error tracking that lets you monitor and fix problems in real time. See the severity and scope of the error, get immediate access to the call stack, connect the problem directly to the commit that caused it, and fix it without delay

Show Links

CodePen Links

The post #203: Sidebar Design appeared first on CodePen Blog.

December 10, 2018

#CodePenChallenge: Water 💧

It's time to start week two of the December "Four Elements" challenge!

Last week, the CodePen community went around the world and dug into the dirt for with the Earth prompt. Check out the Pens in our #CodePenChallenge: Earth 🌍 collection.

December's Challenge Sponsor: WooCommerce

Week Two Prompt: Water 💧

This week, we're taking inspiration from a very versatile element: water. It can flow or freeze, fall from the sky, float as a fog, or drip from a faucet. The possibilities are endless!

Your Challenge

Fill a Pen with water! Jump in a lake, get caught in the rain, or do a little washing up.

How to Participate

Create a Pen and tag it codepenchallenge and the weekly tag cpc-water. We'll gather those Pens into a collection and share our favorites on Twitter and Instagram (Use the #CodePenChallenge tag on Twitter and Instagram as well).

Ideas

Build a beautiful body of front-end water, like in Simon Kinslow's "The Forest River", Judith Neumann's "Lake House", or Jon Kantner's "Endless Ocean".
Create a rainstorm, like Steve Gardner's "SVG Rain", or a snowstorm, like Julius Horn's "Windy Snowstorm".
Water is for washing, too! Show water doing the housework, like in uzcho_'s "Animated 3D Insta Washer", or Charlie Marcotte's "CSS Sink".

Resources

Thinking about building an ocean in the browser? Have a look at David Li's Ocean Waves Simulation.
Check out Lucas Bebber's tutorial on Rain & Water Effect Experiments for Codrops.
Watch The Coding Train's Daniel Shiffman create a Snowfall with p5.js.

The post #CodePenChallenge: Water 💧 appeared first on CodePen Blog.

December 4, 2018

#202: Remote Days Off

Show Description

Cassidy, Alex, and Marie talk about the unique challenges of unplugging from remote work when you're taking time off, plus how they "reconnect" and get back to work.

Sponsor: WooCommerce

Time Jumps

00:44 Introductions
01:49 Preparing work for you to be gone
07:14 Staying connected is so easy — maybe too easy
13:23 Unplugging and going analog
16:47 Sponsor: WooCommerce
17:44 How to get back into work after a vacation?
22:40 Working well with proven tools for communication

Show Links

CodePen Links

The post #202: Remote Days Off appeared first on CodePen Blog.

Show Description

Time Jumps

Sponsor: Netlify

Show Links

CodePen Links

February's Challenge Sponsor: CodePen PRO

Week Two Prompt: Triangles 🔺

Your Challenge

How to Participate

Ideas

Resources

Show Description

Sponsor 11:44 WordPress.com

Time Jumps

Show Links

CodePen Links

February's Challenge Sponsor: CodePen PRO

Week One Prompt: Circles 🔵

Your Challenge

How to Participate

Ideas

Resources

Time Jumps

Sponsor: Jetpack 14:23

Show Links

CodePen Links

January Challenge Sponsor: Monday.com

Week Four Prompt: Perfect Purples 🍇

Your Challenge

How to Participate

Ideas

Resources

Show Description

Time Jumps

Sponsor: Netlify

Show Links

CodePen Links

January Challenge Sponsor: Monday.com

Week Three Prompt: Color Pop 🎈

Your Challenge

How to Participate

Ideas

Resources

Sponsor: Jetpack

Time Jumps

Show Links

CodePen Links

January Challenge Sponsor: Monday.com

Week Two Prompt: Primary Colors 🍎

Your Challenge

How to Participate

Ideas

Resources

Show Description

Time Jumps

Show Links

CodePen Links

January Challenge Sponsor: Monday.com

Week One Prompt: Peach Beach 🍑

Your Challenge

How to Participate

Ideas

Resources

December's Challenge Sponsor: WooCommerce

Week Three Prompt: Air 💨

Your Challenge

How to Participate

Ideas

Resources

Show Description

Time Jumps

Sponsor: WooCommerce

Show Links

CodePen Links

December's Challenge Sponsor: WooCommerce

Week Three Prompt: Fire 🔥

Your Challenge

How to Participate

Ideas

Resources