{"id":279747,"date":"2018-12-11T14:19:40","date_gmt":"2018-12-11T21:19:40","guid":{"rendered":"http:\/\/css-tricks.com\/?p=279747"},"modified":"2018-12-11T14:19:40","modified_gmt":"2018-12-11T21:19:40","slug":"prototypes-and-production","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/prototypes-and-production\/","title":{"rendered":"Prototypes and production"},"content":{"rendered":"

There\u2019s an interesting distinction that Jeremy Keith defines between prototype code and production code<\/a> in this post and I\u2019ve been thinking about it all week:<\/p>\n

\n

…every so often, we use the materials of front-end development\u2014HTML, CSS, and JavaScript\u2014to produce something that isn\u2019t intended for production. I\u2019m talking about prototyping.<\/p>\n

What\u2019s interesting is that\u2014when it comes to prototyping\u2014our usual front-end priorities can and should go out the window. The priority now is speed. If that means sacrificing semantics or performance, then so be it. If I\u2019m building a prototype and I find myself thinking \u201cnow, what\u2019s the right class name for this component?\u201d, then I know I\u2019m in the wrong mindset. That question might be valid for production code, but it\u2019s a waste of time for prototypes.<\/p>\n<\/blockquote>\n

I love the way that Jeremy phrases all of this and how he describes that these two environments require entirely separate mindsets. When prototyping, for instance, we can probably overlook optimizing for accessibility or performance and even let our CSS standards slip in order to get something in the browser and test it as quickly as possible.<\/p>\n

Earlier this year, I echoed some of the same thoughts when I wrote a little bit about prototyping in the browser<\/a>:<\/p>\n

I reckon that the first time a designer and\/or front-end developer writes code, it should never be in a production environment. Having the leeway and freedom to go crazy with the code in a safe environment focuses your attention on the design and making it compatible with a browser\u2019s constraints. After this, you can think about grooming the code from a hot, steaming heap of garbage into lovely, squeaky-clean, production-ready poetry. Translating the static mockups into an interactive prototype is the first step, but it\u2019s vital to have a next step to enforce your code standards.<\/p><\/blockquote>\n","protected":false},"excerpt":{"rendered":"

There\u2019s an interesting distinction that Jeremy Keith defines between prototype code and production code in this post and I\u2019ve been thinking about it all week: …every so often, we use the materials of front-end development\u2014HTML, CSS, and JavaScript\u2014to produce something that isn\u2019t intended for production. I\u2019m talking about prototyping. What\u2019s interesting is that\u2014when it comes […]<\/p>\n","protected":false},"author":223806,"featured_media":280097,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"Love this sentiment from @adactio: \r\n\r\nIf I\u2019m building a prototype and [think] \u201cnow, what\u2019s the right class name for this component?\u201d, then I know I\u2019m in the wrong mindset.","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[1540],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/candles-lightbulb.png?fit=4000%2C2000&ssl=1","jetpack-related-posts":[{"id":272834,"url":"https:\/\/css-tricks.com\/prototyping-in-the-browser\/","url_meta":{"origin":279747,"position":0},"title":"Prototyping in the Browser","date":"July 5, 2018","format":false,"excerpt":"Prototyping animations and interactions is vital for a number of reasons: they can make your interface feel deceptively fast, they can help focus the user on a specific task, and they can provide a better sense of the current state of your application. Is data being loaded? Is something now\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/06\/tetris-blocks.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":285840,"url":"https:\/\/css-tricks.com\/clever-code\/","url_meta":{"origin":279747,"position":1},"title":"Clever code","date":"April 17, 2019","format":false,"excerpt":"This week, Chris Ferdinandi examined a clever JavaScript snippet, one that's written creatively with new syntax features, but is perhaps less readable and performant. It's a quick read, but his callout of our industry's fixation on cleverness is worth... calling out: ...we\u2019ve become obsessed as an industry with brevity and\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/04\/winky-face-brackets.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":311568,"url":"https:\/\/css-tricks.com\/framer-web\/","url_meta":{"origin":279747,"position":2},"title":"Framer Web","date":"May 26, 2020","format":false,"excerpt":"The prototyping app Framer just launched the web version of their design tool and it looks pretty darn neat. I particularly love the design of the marketing site that explains how to use Framer and what sets it apart from other design tools. They have a ton of examples that\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/05\/Screen-Shot-2020-05-23-at-6.28.12-PM-1.png?fit=1200%2C729&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":320614,"url":"https:\/\/css-tricks.com\/the-flavors-of-object-oriented-programming-in-javascript\/","url_meta":{"origin":279747,"position":3},"title":"The Flavors of Object-Oriented Programming (in JavaScript)","date":"September 28, 2020","format":false,"excerpt":"In my research, I've found there are four approaches to Object-Oriented Programming in JavaScript. Which methods should I use? Which one is \"the best\" way? Here I'll present my findings along with information that may help you decide which is right for you.","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/09\/js-wacky.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":324108,"url":"https:\/\/css-tricks.com\/anima-4-0-go-straight-from-design-to-react-in-the-design-handoff\/","url_meta":{"origin":279747,"position":4},"title":"Anima 4.0: Go Straight From Design to React in the Design Handoff","date":"October 27, 2020","format":false,"excerpt":"Imagine this scenario: You get an email from the design team. It contains a link to a high-fidelity prototype of a React app they want you to build. You click the link and get ready to inspect the work only to find... the components have already been built. Huh? It\u2026","rel":"","context":"In "Sponsored"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/10\/1920X1080-Preview-in-browser.jpg?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":284244,"url":"https:\/\/css-tricks.com\/using-devtools-to-improve-the-ux-design-to-development-process\/","url_meta":{"origin":279747,"position":5},"title":"Using DevTools to Improve the UX Design to Development Process","date":"June 7, 2019","format":false,"excerpt":"I\u2019d like to tell you how I see code and design intersect and support one another. Specifically, I want to cover how designers can use code in their everyday work. I suggest this not because it\u2019s a required skill, but because even a baseline understanding of coding can make designs\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/11\/devtools-paintbrush.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/candles-lightbulb.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279747"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/223806"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=279747"}],"version-history":[{"count":5,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279747\/revisions"}],"predecessor-version":[{"id":279818,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/279747\/revisions\/279818"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/280097"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=279747"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=279747"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=279747"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}