The

All the can't-miss links.

July 17th: Prototypes, Pugs, and Parallax

Castles, responsive parallax landscape

"A responsive landscape (some elements are added / removed depending on the screen size) made with Pixi.js for the epic.net website menu." by Karim Maaloul. Start on the biggest screen you have and resize for the full, beautiful experience!

Sponsored:

CI/CD: Build Fast. Test More. Fail Less.

CircleCI 2.0 is freaking fast. Reduced build times from minutes to 12 seconds.

We Have a Winner!

Congratulations to Gabrielle Wee, the winner of our CSS Dev Conf ticket contest. Check out her animated New Orleans adventure, and even more amazing entries in our roundup post!

Flat Forest

Nicolas Raube's sunny CSS illustration of a house tucked inside a flat evergreen forest.

CSS-only image slider using SVG patterns

"This is an experiment on how SVG patterns can help us create masked-like images for a CSS-only image slider." from Damián Muti.

React & CSS Grid Image Gallery

This gallery is lit! Made with "React, ES6, and some light CSS Grid experimentation" by Tobi Weinstock.

CodePen Radio #138: Permissions

On the latest episode of CodePen Radio, Chris, Jake, and Marie talk about how CodePen handles advanced app permissions.

Game Prototype

Gtibo is back with another fun playable Pen! Use the arrow keys to drive a little pixelated car around — it's a little harder than it sounds!

Dancing Pug

Sometimes, you just need a dancing pug in your life. Now you have one, thanks to Angela Velasquez!

Ragdoll

A ragdoll has quite a strange time on a staircase in Liabru's Pen, built with matter.js.

Sheriff of CSS

The sheriff is wholesome now, and he's here to check your CSS in this hilarious animated Pen from Adam Kuhn.

Best Friends

Google's Made with Code team built a pair of Pens made to work side-by-side, just like a best friends locket!

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; web-share; 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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiVm9Ea05aIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNjc1MDI4ODk1LCJpYXQiOjE2NzUwMjUyOTUsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IlZvRGtOWiJ9.vtPiRHE3lnYmbDl53kyp2z5E3BsBZ6uTIVe_iCklxEFHWA2SUfKZWjjnZfxKjiacFUfQ3g0tfup1v20SZF33BmQHMqS101125Fz7mDiHJqKASdvL0nFIv0WizG0j31SsXu4cDyZGEvHrGDo6pn3FEAoyzTZbDQLSWNcc1vBh7Hqm4ff3Tm4x9qKGpCBeq1H73TEglK1lFPjSKboKglhGoIcti6K0jLK4TsHFkjEBUnrKHyESbzsByjBt0hwMOp30IYihulAYpBCijieEtOb13JiCCMlkubgO8JdbOsL-j4TbKQisAXtCiNyt9XX_nuvfSolFMRVTAjvwHZZqle4ICA"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}