The

All the can't-miss links.

January 9th: Reflections, Connections, and Smiles

The Danger Crew RPG: Lessons Learned

Drew Conley writes about lessons learned while his team built a game in React and Redux, with insights from the very first CodePen demo to the finished game.

Discoid

Tiffany Rayside is back with more psychedelic grandeur. Pop this one into your favorite CodePen TV collection!

Really Good Emails

This beautifully curated account lives up to its name and gathers really good examples of email design. Check out their showcase and collections for inspiration for your next campaign.

Up & Down

Jon Beaumont Pike recreates that clever sign you saw on Reddit. Gotta love an efficient design!

I ⃞ Icon Fonts

Don't we all? Jon Kantner's super-realistic CSS mug is probably filled with developer tears

#OrlandoCodePen this Week!

There's a CodePen meetup in Orlando, Florida on Wednesday starting at 7 p.m. at Fattmerchant HQ. Wanna go? Don't forget to RSVP!

Sea Waves

Sit back and relax, with these beautiful oceanic waves by Stefan Weck.

Album Art Collection

Anastasia Lanz has put together this fantastic collection of album art, recreated with web technologies. If you're in a creative rut, recreating some of your favorite albums might be just what you need!

2016

With 2016 behind us, we're seeing some great recaps, personal reviews, and 2017 goals. Johan Karlsson's had a particularly creative year!

Hair Color Changes

Giulia Cardieri has made a beautiful pen to recap all of her 2016 hair changes.

Happy Switches

It never gets tiring to see funny and creative ways to use web elements. This switchy happy face by McKnight will definitely put a smile on your dial.

Sponsored:

Daily CSS Images

Mike Mangialardi's email challenge sends you a CSS drawing prompt every weekday

Whale Like Watermelon

panda_bear's delightful CSS illustration shows how a whale can be like a watermelon!

We're all for progressive enhancement, but CodePen is a bit unique in that it's all about writing and showing front end code, including JavaScript. It's required to use most of the features of CodePen.

Need to know how to enable it? Go here.

Close this, use anyway.

{"__browser":{"device":"unknown_device","mobile":false,"name":"unknown browser","platform":"unknown_platform","version":"0"},"__constants":{},"__CPDATA":{"domain_iframe":"https://cdpn.io","environment":"production","host":"codepen.io","iframe_allow":"accelerometer; ambient-light-sensor; camera; display-capture; encrypted-media; geolocation; gyroscope; microphone; midi; payment; vr","iframe_sandbox":"allow-forms allow-modals allow-pointer-lock allow-popups allow-same-origin allow-scripts allow-top-navigation-by-user-activation allow-downloads allow-presentation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"VoDkNZ","name":"Captain Anonymous","title":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"VoDkNZ","title":"Captain Anonymous","name":"Captain Anonymous","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"anon","__typename":"User"},"currentTeamId":null,"username":"anon","admin":false,"anon":true,"pro":false,"verified":false,"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails","cpedata":{"action":"show","controller":"spark"}},"__user":{"anon":true,"base_url":"/anon/","current_team_id":0,"current_team_hashid":null,"hashid":"VoDkNZ","id":1,"itemType":"user","name":"Captain Anonymous","paid":false,"tier":0,"username":"anon","created_at":null,"email_verified":null,"collections_count":0,"collections_private_count":0,"followers_count":0,"followings_count":0,"pens_count":0,"pens_private_count":0,"projects_count":0,"projects_private_count":0},"__firebase":{"config":{"apiKey":"AIzaSyBgLAe7N_MdFpuVofMkcQLGwwhUu5tuxls","authDomain":"codepen-store-production.firebaseapp.com","databaseURL":"https://codepen-store-production.firebaseio.com","disabled":false,"projectId":"codepen-store-production"},"token":"eyJhbGciOiJSUzI1NiJ9.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc5NDQwMjI5LCJpYXQiOjE2Nzk0MzY2MjksImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.oK-jXskZE8_lu9u5g8EJygS3qMjNIx3gp9799H6y_dlyCTR_TpIHfUJRBS3jsACeQBoq8SKuqxxjXUI8-y1myCBV4DwD5TDz0n1JsJOfDSqIip_0RDbiC5P21cVKCY-arA8P9aFJLwrnCRSnkgss7Va_Zlhyng59aXMWOdGp4QQ7dt1VmlFj32H0wDRZYrkKNH0g5T1rvzyvXiKqAIDtLbvfIKcJN_lso0lB_mU5UdMlVd2iQ5I5RASducEybT3xXSDcRPGKqiZ35rV1BgcJhelzaYrMP58aSUnHhJ5fG43T5W2hUC9K-096mL_e3URzFhZX9t2w6eKP9pHZPl6NpA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}