{"id":12389,"date":"2011-06-29T09:15:23","date_gmt":"2011-06-29T16:15:23","guid":{"rendered":"http:\/\/css-tricks.com\/?p=12389"},"modified":"2011-06-29T11:35:36","modified_gmt":"2011-06-29T18:35:36","slug":"one-page-apps-i-actually-use","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/one-page-apps-i-actually-use\/","title":{"rendered":"One Page Apps I Actually Use"},"content":{"rendered":"

There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us has slightly different jobs and slightly different skill sets. That means a little helper app that is useful to you might not be to me and vice versa. So of the probably-hundreds of these one-page apps that I’ve seen over the years, there are only a handful that find myself using on a regular basis. I thought I’d share those, and maybe you can share yours in the comments.<\/p>\n

CSS3Please.com<\/a><\/h3>\n

Why type out all five property\/value pairs for a transition when you could just come here and copy it quick in nice formatting with comments. Even if you have it memorized, coming here will ensure you have the latest and greatest syntax as browsers evolve.<\/p>\n

\"\"<\/p>\n

Border-Radius.com<\/a><\/h3>\n

Every time I need to round some<\/em> of the corners of an element but not all of them I end up here. I start at the first box, enter the value, and tab around to the other four entering values. The vendor prefixes between moz and webkit are different for specific corners (e.g. radius-topleft vs. top-left-radius) and I can never remember.<\/p>\n

\"\"<\/p>\n

HTML-Ipsum.com<\/a><\/h3>\n

I created this one for myself. Just really common bits of HTML markup filled with “lorem ipsum” filler text. Sometimes I need a couple of average length paragraphs of text or a quick unordered-list navigation. Those things are now just a click-to-copy-to-clipboard away.<\/p>\n

\"\"<\/p>\n

ScriptSrc.net<\/a><\/h3>\n

I gotta drop jQuery on this page… what’s that long funky URL of where it’s hosted on Google’s CDN again? It’s impossible to remember but through this site, you can just click on the library you need and get the script tag copied to your clipboard.<\/p>\n

\"\"<\/p>\n

CopyPasteCharacter.com<\/a><\/h3>\n

Ever need a really common symbol for a tweet or an email or website? Just come here and click to copy them. Hold alt to get multiple. Click the link at the top to toggle between encoded and unencoded.<\/p>\n

\"\"<\/p>\n

Button Maker<\/a><\/h3>\n

If I just need some quick CSS3 to make a button I usually use this (another one by me). The style doesn’t fit every scenario, but I think it’s a pretty nice generic customizable style.<\/p>\n

\"\"<\/p>\n

One of the sparks that inspired this post was that I just helped a friend slap a design on STRFTIME<\/a>, a one-page app for getting those placeholder symbols for date formatting (e.g. %Y = 2011).<\/p>\n","protected":false},"excerpt":{"rendered":"

There is a zillion one-page apps focused on making some little aspect of front end development easier. I think they are great. They exemplify the wonderful culture of sharing and ingenuity that our industry is known for. Each of us has slightly different jobs and slightly different skill sets. That means a little helper app […]<\/p>\n","protected":false},"author":3,"featured_media":0,"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":false,"jetpack_social_options":[]},"categories":[4],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"","jetpack-related-posts":[{"id":148885,"url":"https:\/\/css-tricks.com\/new-poll-line-web-apps-web-sites\/","url_meta":{"origin":12389,"position":0},"title":"New Poll: Is There a Line Between Web Apps and Web Sites?","date":"September 3, 2013","format":false,"excerpt":"Every once in a while I'll hear people say something along the lines of \"well that's for web sites, but it's not really relevant for web apps.\" That implies there is some kind of line that separates the two. Different needs and rules that change the game and alter the\u2026","rel":"","context":"In "Poll"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":250705,"url":"https:\/\/css-tricks.com\/practical-guide-progressive-web-apps-organisations-dont-know-anything-progressive-web-apps\/","url_meta":{"origin":12389,"position":1},"title":"A practical guide to Progressive Web Apps for organisations who don\u2019t know anything about Progressive Web Apps","date":"January 30, 2017","format":false,"excerpt":"Sally Jenkinson: Progressive Web Apps (sometimes referred to as PWAs, because everything in tech needs an acronym) is the encapsulating term for websites following a certain approach, that meet particular technical criteria. The \"app\" involvement in the name isn\u2019t an accident \u2013 these creations share much of the functionality that\u2026","rel":"","context":"In "Link"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":355034,"url":"https:\/\/css-tricks.com\/have-single-page-apps-ruined-the-web-transitional-apps\/","url_meta":{"origin":12389,"position":2},"title":"Have Single-Page Apps Ruined the Web? (“Transitional Apps”)","date":"November 1, 2021","format":false,"excerpt":"A big heaping 19-minute bowl of not-too-hot, not-too-cold baby bear porridge website building from Rich Harris. I've certainly overheard more than my fair share of arguments about Single Page Apps (SPAs) vs Multi-Page Apps (MPAs). Although it's only recently that I've heard people put an acronym to MPA, and it\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/11\/multi-page-apps.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":236478,"url":"https:\/\/css-tricks.com\/os-x-window-manager-apps\/","url_meta":{"origin":12389,"position":3},"title":"OS X Window Manager Apps","date":"January 25, 2016","format":false,"excerpt":"There is no shortage of apps to help you arrange windows. I find them tremendously useful. Most Windows (the operating system) users I know quite like the built-in abilities it has to position windows, but there isn't as much of that built into OS X. OS X El Capitan (10.11)\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":157837,"url":"https:\/\/css-tricks.com\/poll-results-sites-vs-apps\/","url_meta":{"origin":12389,"position":4},"title":"Poll Results: “Sites” vs “Apps”","date":"December 6, 2013","format":false,"excerpt":"Time to wrap up our last poll on how useful it is to distinguish between \"web apps\" and \"web sites\". The exact question was: Is it useful to distinguish between \"web apps\" and \"web sites\"? First, the data: 28% of people voted: Nope. It's all just the web. 72% if\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":350690,"url":"https:\/\/css-tricks.com\/application-specific-links\/","url_meta":{"origin":12389,"position":5},"title":"Application-Specific Links","date":"August 31, 2021","format":false,"excerpt":"You know like https:? That's a URL Scheme. You're probably familiar with the concept, thanks to others that come up in front-end development, like mailto:. You can actually make your own, which is pretty cool. There are a lot of them. I find that custom URL schemes come up the\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/Screen-Shot-2021-08-25-at-12.08.18-PM.png?fit=1200%2C841&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":null,"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/12389"}],"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=12389"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/12389\/revisions"}],"predecessor-version":[{"id":12440,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/12389\/revisions\/12440"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=12389"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=12389"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=12389"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}