CodePen

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":{"country":"ZA","device":"unknown_device","mobile":false,"name":"microsoft edge","platform":"pc","version":"131"},"__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 *; web-share *; serial *; xr-spatial-tracking *","iframe_sandbox":"allow-downloads allow-forms allow-modals allow-pointer-lock allow-popups-to-escape-sandbox allow-popups allow-presentation allow-same-origin allow-scripts allow-top-navigation-by-user-activation"},"__graphql":{"data":{"data":{"sessionUser":{"id":"Ekqabo","name":"Nosipho","title":"Nosipho","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","currentContext":{"id":"Ekqabo","title":"Nosipho","name":"Nosipho","avatar":"https://assets.codepen.io/t-1/user-default-avatar.jpg?format=auto&version=0","username":"NosiphoN","__typename":"User"},"currentTeamId":null,"username":"NosiphoN","admin":false,"anon":false,"pro":false,"verified":true,"featureFlags":[],"teams":[],"__typename":"User"}}},"url":"https://codepen.io/graphql","api":"cprails"},"__user":{"anon":false,"base_url":"/NosiphoN/","cohorts":[],"current_team_hashid":null,"current_team_id":0,"hashid":"Ekqabo","id":13013006,"itemType":"user","name":"Nosipho","paid":false,"tier":0,"username":"NosiphoN","created_at":"2024-09-02T14:32:05.811Z","email_verified":true,"collections_count":1,"collections_private_count":1,"followers_count":0,"followings_count":0,"pens_count":3,"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.eyJhdWQiOiJodHRwczovL2lkZW50aXR5dG9vbGtpdC5nb29nbGVhcGlzLmNvbS9nb29nbGUuaWRlbnRpdHkuaWRlbnRpdHl0b29sa2l0LnYxLklkZW50aXR5VG9vbGtpdCIsImNsYWltcyI6eyJvd25lcklkIjoiRWtxYWJvIiwiYWRtaW4iOmZhbHNlfSwiZXhwIjoxNzMyMjE4NDYyLCJpYXQiOjE3MzIyMTQ4NjIsImlzcyI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInN1YiI6ImZpcmViYXNlLWFkbWluc2RrLThva3lsQGNvZGVwZW4tc3RvcmUtcHJvZHVjdGlvbi5pYW0uZ3NlcnZpY2VhY2NvdW50LmNvbSIsInVpZCI6IkVrcWFibyJ9.Tq8Nzjp9SCz6kgIzWF9MY2_4rBehCS3KHyqjUOaUgYQ79HyuNWYuxI13jpbS4tMlUH2pdtJijcKALMdhGJurPG-8hpEYsgt9H6ceEqNEXxGh8NyhxGL44j134p-f02GBzfl5pWrSlUg_2JusLhvMLNq5DpZkNVmNme5ebtsmlgH1a7yTuNBl6IJSJRtz431CDBbRl_q2Lpo5ZP-G3kBut0QlRb2sA-EZl-Jc4LldRloqtINwO466N4uKittL2V-nEU_q9aVY4mu-Mlca8ZujzXe1X-PrlOMTrSfqPyzWBy_VQZomLWB1iW85BvCJKgnCQdBNtP_Zr0Kd6D2haGkjqQ"},"__pay_stripe_public_key":"pk_live_2GndomDfiklqpSNQn8FrGuwZSMIMzha7DkLJqlYe7IR0ihKAlKdiHg68JJc5eVPt68rzAjzAAVXcUwjySHRCsgjQQ00gtRBUFNH","__pay_braintree_env":"production"}

Filters

Untitled

Untitled

Untitled

Untitled