{"id":337574,"date":"2021-04-01T07:23:58","date_gmt":"2021-04-01T14:23:58","guid":{"rendered":"https:\/\/css-tricks.com\/?p=337574"},"modified":"2021-04-01T07:24:00","modified_gmt":"2021-04-01T14:24:00","slug":"designing-calculator-apps","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/designing-calculator-apps\/","title":{"rendered":"Designing calculator apps"},"content":{"rendered":"\n

It is extremely weird that the calculator apps, even the default ones baked into desktop operating systems, embrace the UI and UX of those little cheap-o plastic physical calculators. I like what Florens Verschelde’s Math teacher had to say:<\/p>\n\n\n\n

\n

I had a Math teacher who would ban pocket calculators that didn\u2019t show both your input and its result at the same time. If a calculator couldn\u2019t show this:<\/p>\n\n

38 \u00f7 1.2\n=    31.666666666667<\/code><\/pre>\n\n

You couldn\u2019t use it.<\/p>\n<\/blockquote>\n\n\n\n\n\n\n\n

The article ends up being in praise of Soulver<\/a>, which I agree is a nice modern take on the idea of calculations. <\/p>\n\n\n\n

I wish it was on Setapp<\/a>, as I’d probably use it. But I don’t do enough regular mathin’ to go for the full price (today, anyway).<\/p>\n","protected":false},"excerpt":{"rendered":"

It is extremely weird that the calculator apps, even the default ones baked into desktop operating systems, embrace the UI and UX of those little cheap-o plastic physical calculators. I like what Florens Verschelde’s Math teacher had to say: I had a Math teacher who would ban pocket calculators that didn\u2019t show both your input […]<\/p>\n","protected":false},"author":3,"featured_media":337582,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[17],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/03\/old-calculator.jpg?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":318994,"url":"https:\/\/css-tricks.com\/designing-a-javascript-plugin-system\/","url_meta":{"origin":337574,"position":0},"title":"Designing a JavaScript Plugin System","date":"August 25, 2020","format":false,"excerpt":"WordPress has plugins. jQuery has plugins. Gatsby, Eleventy, and Vue do, too. Plugins are a common feature of libraries and frameworks, and for a good reason: they allow developers to add functionality, in a safe, scalable way. This makes the core project more valuable, and it builds a community \u2014\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/08\/plugs.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":373905,"url":"https:\/\/css-tricks.com\/fluid-typography-wordpress-block-themes\/","url_meta":{"origin":337574,"position":1},"title":"Adding Fluid Typography Support to WordPress Block Themes","date":"October 7, 2022","format":false,"excerpt":"Fluid typography is a fancy way of \u201cdescribing font properties, such as size or line height, that scale fluidly according to the size of the viewport\u201d. It\u2019s also known by other names, like responsive typography, flexible type, fluid type, viewport sized typography, fluid typography, and even responsive display text. Here\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2022\/09\/wordpress-fluid-typography.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":289176,"url":"https:\/\/css-tricks.com\/getting-to-know-the-usereducer-react-hook\/","url_meta":{"origin":337574,"position":2},"title":"Getting to Know the useReducer React Hook","date":"June 26, 2019","format":false,"excerpt":"useReducer is one of a handful of React hooks that shipped in React 16.7.0. It accepts a reducer function with the application initial state, returns the current application state, then dispatches a function. Here is an example of how it is used; const [state, dispatch] = useReducer(reducer, initialState); What\u2019s the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/12\/pattern_black_white.png?fit=1000%2C562&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":238006,"url":"https:\/\/css-tricks.com\/sponsored-what-salary\/","url_meta":{"origin":337574,"position":3},"title":"\u200bSponsored: What salary could you be earning?","date":"February 18, 2016","format":false,"excerpt":"If you want to know what you're worth, Hired has the answer: with data from thousands of real interview requests and job offers, we've put together a salary calculator that can tell you what you could be making in your job based on the skills you have. If you want\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":2336,"url":"https:\/\/css-tricks.com\/news-joomla-book-winner-new-tuts-tutorial\/","url_meta":{"origin":337574,"position":4},"title":"News: Joomla! Book Winner & New Tuts+ Tutorial","date":"March 4, 2009","format":false,"excerpt":"Congratulations to itaniumdesign, the randomly selected winner of the Joomla! Template Design book contest. These last few book giveaways have been fun. Next time I do it I'll try to get more stuff to give away so everyone has a bit better of a chance. Thanks to all for playing!\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/csstricks-uploads\/jquerycalc.png?resize=350%2C200","width":350,"height":200},"classes":[]},{"id":255251,"url":"https:\/\/css-tricks.com\/using-filters-vue-js\/","url_meta":{"origin":337574,"position":5},"title":"Using Filters in Vue.js","date":"June 3, 2017","format":false,"excerpt":"Filters are an interesting way to deal with data rendering in Vue but are only useful in a small amount of cases. The first thing to understand about filters is that they aren't replacements for methods, computed values, or watchers, because filters don't transform the data, just the output that\u2026","rel":"","context":"In "Intermediate"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337574"}],"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\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=337574"}],"version-history":[{"count":4,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337574\/revisions"}],"predecessor-version":[{"id":337581,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/337574\/revisions\/337581"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/337582"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=337574"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=337574"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=337574"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}