https://pinboard.in/u:alexhansford/public/ recent bookmarks from alexhansford 2011-10-28T15:30:03+00:00 http://www.smashingmagazine.com/2011/10/28/useful-coding-workflow-tools-for-web-designers-developers/ alexhansford elements. It works on IE7+. -prefixfree-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. {less}An automated folder scanning/parsing tool for LESS. Once you add your project folders to the application, it will automatically start monitoring the less files inside these folders for changes. After you have saved the less file, the application will automatically parse your less file into a regular CSS file. Also, see: SimpLESS, an app for Mac, Linux and PC to compile *.less files into valid CSS. Recurly.jsThis tool allows you to easily embed a PCI compliant order form within your website. The library performs in-line validation, real-time total calculations, and gracefully handles errors. Your customer stays on your website while their billing information is securely sent to Recurly for approval. Because the cardholder data is sent directly to Recurly, your PCI compliance scope is dramatically reduced. Responsive Overlay Grid for In-Browser DevelopmentThe Heads-Up Grid is a recently released grid overlay for in-browser development. It works with fixed-width designs but also works great with responsive grids. Just specify the page units, column units, page width, number of columns, column width, gutter width, top margin and row height, and then paste the Heads-Up Grid code into the head element of your website to generate the grid overlay. Has.jsThe library is similar to Modernizr, but instead of testing for HTML5/CSS3 features, it tests for JavaScript features such as: ES5 array, string, and object featuresNative JSON supportNative console supportActiveXNative XHRSome DOM and event features. grumble.jsThis library allows you to create tooltips that can be rotated around a given element at any angle. Any distance can be specified. Any CSS style can be applied. There’s auto-magic size adjustment for use with localised text. FX queues for animating multiple grumbles. And it works in IE6+, and all modern browsers. testling: Automated Cross-Browser JavaScript TestingAn automated cross-browser JavaScript testing platform for your quality assurance. Instant WordPressA standalone, portable WordPress development environment for Windows that can run from USB. CSS Stress Testing and ProfilingA bookmarklet for stress testing the CSS on any given webpage. It indexes all the elements and their classes, and then — class by class — it removes one, and times how long it takes to scroll the page. Selectors that save a considerable amount of time when removed indicate problem areas. Needle: Automated Tests for Your CSSThis tool checks that CSS renders correctly by taking screenshots of portions of a website and comparing them against known good screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements. Last Click Cutting-Edge Web Typography ExperimentsThe website is essentially an ongoing collection of experiments and writings on Web typography and the possibilities of cutting-edge standards-based Web design. Christopher is pushing the boundaries of what is both possible and practical in Web standards in a way that is compelling and exciting to the visually minded creative. Font-BotIt is time for your favorite font to stand its ground. The idea of this project is to build robots out of typeface glyphs, showcase them and hope others put together an opponent. Participating is not hard, the rules are clear: all Robots must be built of type alone (A-Z). You may reflect and rotate the letters. Keep it civil. May the best bot win. Let’s see if your type design has what it takes to defend its corner. Fight! Lights“Lights” is an interactive music experience which is created with CSS, JavaScript and HTML5. This is why we love the Web. Stay Tuned! More posts with useful tools and techniques are coming very soon here, on Smashing Magazine. If you want to be among the first to be informed about the new tools, resources and techniques, please follow us on Twitter, become a fan on Facebook, subscribe to our bi-monthly email newsletter. You won’t regret it. Thank you. Thank you to the Smashing Editorial team, especially Christiane Rosenberger, Iris Ljesnjanin and Luca Degasperi for their help in preparing and editing the post. © Vitaly Friedman for Smashing Magazine, 2011. ]]> Coding tools useful https://pinboard.in/u:alexhansford/b:f6ee8658e0a7/ 2011-10-06T21:00:20+00:00 http://www.1stwebdesigner.com/design/sublime-text-code-editor-review/ alexhansford Tools Web_Design code_editor sublime text_editor https://pinboard.in/u:alexhansford/b:bf97bfa06eac/ 2011-06-08T17:07:29+00:00 http://www.auditmypc.com/xml-sitemap.asp alexhansfordBookmarks delicious-export google seo tools https://pinboard.in/u:alexhansford/b:ea21ba6d7c52/ 2011-06-08T17:07:22+00:00 http://www.dynamicdrive.com/style/layouts/ alexhansfordBookmarks css delicious-export design howto style templates tools tutorial web webdesign webdev https://pinboard.in/u:alexhansford/b:f609973a30b3/ 2011-06-08T17:06:38+00:00 http://www.dnsstuff.com/ alexhansfordBookmarks Webmaster delicious-export internet tools web https://pinboard.in/u:alexhansford/b:e629dd5ca94b/ 2011-06-08T17:06:34+00:00 http://www.changenotes.com/index.php?r=website+monitoring alexhansford Bookmarks delicious-export internet tools web https://pinboard.in/u:alexhansford/b:b64beabf51e1/ 2011-06-08T17:06:33+00:00 http://centralops.net/co/ alexhansfordBookmarks delicious-export delicious-private internet tools https://pinboard.in/u:alexhansford/b:4f75526f7e81/ 2011-06-08T17:05:56+00:00 http://www.swivel.com/ alexhansfordBookmarks delicious-export tools web2.0 https://pinboard.in/u:alexhansford/b:0f443dc6c848/ 2011-06-08T17:05:47+00:00 http://www.webaim.org/products/ alexhansfordBookmarks WebAccessibility delicious-export design standards tools tutorial webdesign https://pinboard.in/u:alexhansford/b:a89723d1f447/ 2011-06-08T17:05:45+00:00 http://monolingual.sourceforge.net/ alexhansfordBookmarks delicious-export language mac osx software tools https://pinboard.in/u:alexhansford/b:7d1272ca3c3c/ 2011-06-08T17:05:44+00:00 http://www.cogniview.com/convert-pdf-to-excel/post/the-freelancers-toolset-100-web-apps-for-everything-you-will-possibly-need/ alexhansforddelicious-export freelance tools https://pinboard.in/u:alexhansford/b:4b49c89093ee/ 2011-06-08T17:05:44+00:00 http://synkron.sourceforge.net/ alexhansford Bookmarks backup delicious-export software tools windows https://pinboard.in/u:alexhansford/b:d01c1b97b408/ 2011-06-08T17:05:41+00:00 http://mashable.com/2007/08/09/online-business/#more-8086 alexhansfordBookmarks delicious-export internet management productivity tools web2.0 https://pinboard.in/u:alexhansford/b:d1d741bd4da3/ 2011-06-08T17:05:28+00:00 http://get-shorty.com/ alexhansford Bookmarks delicious-export seo software tools web webdesign https://pinboard.in/u:alexhansford/b:14b741c0eb72/ 2011-06-08T17:05:05+00:00 http://www.mandarindesign.com/style.html#blockquoteimage alexhansfordBookmarks css delicious-export howto tools webdesign https://pinboard.in/u:alexhansford/b:ffcd1a9d57ad/ 2011-06-08T17:04:39+00:00 http://bargiel.home.pl/iGTD/ alexhansfordBookmarks delicious-export mac osx productivity software tools https://pinboard.in/u:alexhansford/b:de0dde29a561/ 2011-06-08T17:04:33+00:00 http://davidseah.com/tools/ett/alpha/ alexhansfordBookmarks delicious-export management productivity tools web2.0 https://pinboard.in/u:alexhansford/b:caaa40dc52db/ 2011-06-08T17:04:20+00:00 http://spokentext.net/ alexhansfordBookmarks audio delicious-export free podcast tools https://pinboard.in/u:alexhansford/b:33f0f1adc6ed/ 2011-06-08T17:04:18+00:00 http://iphonetester.com/ alexhansfordBookmarks delicious-export tools webdesign https://pinboard.in/u:alexhansford/b:344d33e2db3e/ 2011-06-08T16:19:55+00:00 http://polls.zoho.com/ alexhansford Bookmarks delicious-export free tools web2.0 https://pinboard.in/u:alexhansford/b:ec0c7fd254cc/ 2011-06-08T16:19:29+00:00 http://getclicky.com/ alexhansfordBookmarks delicious-export free tools web https://pinboard.in/u:alexhansford/b:5b75ab26d5f7/ 2011-06-08T16:19:28+00:00 http://popuri.us/ alexhansfordBookmarks delicious-export search seo tools web https://pinboard.in/u:alexhansford/b:1d068f388c72/ 2011-06-08T16:19:01+00:00 http://www.auditmypc.com/free-sitemap-generator.asp alexhansfordBookmarks delicious-export free google seo tools web https://pinboard.in/u:alexhansford/b:8b953f3b94fb/ 2011-06-08T16:18:26+00:00 http://www.versionone.com/ alexhansfordBookmarks delicious-export development free management projectmanagement software tools https://pinboard.in/u:alexhansford/b:ce676fed0954/ 2011-06-08T16:18:24+00:00 http://www.protolize.org/ alexhansfordBookmarks css delicious-export design tools web webdesign https://pinboard.in/u:alexhansford/b:861c6dbe7654/ 2011-06-08T16:18:06+00:00 http://www.feedblendr.com/ alexhansfordBookmarks delicious-export news tools web2.0 https://pinboard.in/u:alexhansford/b:c7f87f55e77d/ 2011-06-08T16:18:01+00:00 http://freelanceswitch.com/general/101-essential-freelancing-resources/ alexhansfordBookmarks blog delicious-export design freelance reference startup tips tools https://pinboard.in/u:alexhansford/b:a956cc506af2/ 2011-06-08T16:18:01+00:00 http://mashable.com/2007/08/16/wordpress-god300-tools-for-running-your-wordpress-blog/#more-8593 alexhansfordBookmarks delicious-export tools wordpress https://pinboard.in/u:alexhansford/b:18149f3638a4/ 2011-06-08T16:17:47+00:00 http://www.ambrosiasw.com/utilities/wiretap/ alexhansfordBookmarks audio delicious-export mac music osx podcast software tools https://pinboard.in/u:alexhansford/b:819177ab7bbc/ 2011-06-08T16:17:04+00:00 http://www.myimager.com/ alexhansfordBookmarks delicious-export free tools https://pinboard.in/u:alexhansford/b:79330a1b68bb/ 2011-06-08T16:17:04+00:00 http://pxn8.com/ alexhansfordBookmarks delicious-export photography tools web2.0 https://pinboard.in/u:alexhansford/b:d9b7b7a4d2c4/ 2011-06-08T16:16:55+00:00 http://www.sueandpaul.com/gmapPedometer/ alexhansfordBookmarks delicious-export google maps running tools https://pinboard.in/u:alexhansford/b:2e93e78b36b6/ 2011-06-08T16:16:26+00:00 http://dictionary.cambridge.org/ alexhansford Bookmarks delicious-export language reference tools https://pinboard.in/u:alexhansford/b:6fa34ea23d59/ 2011-06-08T16:16:26+00:00 http://www.readwriteweb.com/archives/rolling_your_own_online_office.php alexhansford Bookmarks delicious-export freelance howto productivity tools https://pinboard.in/u:alexhansford/b:f86df79cea4f/ 2011-06-08T16:15:44+00:00 http://sandbox.msn.com/ alexhansfordBookmarks Webmaster delicious-export search software tools web https://pinboard.in/u:alexhansford/b:1041211473ed/ 2011-06-08T16:15:43+00:00 http://www.msnblockchecker.net/ alexhansfordBookmarks delicious-export tools https://pinboard.in/u:alexhansford/b:b63e2f74c51c/ 2011-06-08T16:14:44+00:00 http://www.cmg02.com/cg2/mailto.htm alexhansfordBookmarks Webmaster delicious-export html reference tools web https://pinboard.in/u:alexhansford/b:a6bd7218ef54/ 2011-06-08T16:14:03+00:00 http://www.gigavox.com/levelator alexhansfordBookmarks audio delicious-export free podcast software tools https://pinboard.in/u:alexhansford/b:d89eddd9d506/ 2011-06-08T16:13:48+00:00 http://www.warninglabelgenerator.com/ alexhansfordBookmarks delicious-export design tools https://pinboard.in/u:alexhansford/b:23fdfaf4afa5/ 2011-06-08T16:08:21+00:00 http://www.blinksale.com/home alexhansfordBookmarks delicious-export internet software tools web2.0 https://pinboard.in/u:alexhansford/b:eadfc65b3826/ 2011-06-08T16:07:46+00:00 http://people.w3.org/rishida/utils/subtags/ alexhansfordBookmarks delicious-export html language reference tools https://pinboard.in/u:alexhansford/b:1ac6946c5725/ 2011-06-08T16:07:16+00:00 http://freedns.afraid.org/ alexhansfordBookmarks delicious-export free internet tools web https://pinboard.in/u:alexhansford/b:a34f02e73088/ 2011-06-08T16:02:43+00:00 http://colorblender.com/ alexhansfordBookmarks css delicious-export design tools web webdesign https://pinboard.in/u:alexhansford/b:f3f64f65e156/ 2011-06-08T16:02:42+00:00 http://cloford.com/resources/colours/500col.htm alexhansfordBookmarks Webmaster css delicious-export design reference tools web webdesign https://pinboard.in/u:alexhansford/b:04ebfc5eb106/ 2011-06-08T16:02:37+00:00 http://users.easystreet.com/ovid/cgi_course/appendices/appendix2.html alexhansfordBookmarks Webmaster delicious-export html reference tools webdesign https://pinboard.in/u:alexhansford/b:06fd0cedb254/ 2011-06-08T16:02:31+00:00 http://venturemarketing.stikipad.com/basecamp/ alexhansfordBookmarks basecamp delicious-export projectmanagement tips tools https://pinboard.in/u:alexhansford/b:241481100485/ 2011-06-08T16:02:01+00:00 http://www.30boxes.com/ alexhansford Bookmarks delicious-export productivity social tools web2.0 https://pinboard.in/u:alexhansford/b:3612f6785b1c/ 2011-06-08T15:33:42+00:00 http://www.accessify.com/default.asp alexhansfordBookmarks WebAccessibility css delicious-export design tools usability web webdesign https://pinboard.in/u:alexhansford/b:a34e6deb63ec/ 2011-04-18T14:23:36+00:00 http://www.smashingmagazine.com/2011/04/18/powerful-new-css-techniques-and-tools/ alexhansford value by pressing the up and down keyboard arrows when the caret is over it. Beveled Corners & Negative Border-Radius with CSS3 GradientsBeveled corners and simulate negative border radius without images, by utilizing CSS3 gradients once again — Lea Verou is amazed by how many CSS problems can be solved with gradients alone. Works on Firefox 3.6+, latest Webkit Nightly builds, Chrome and Opera 11.10. Flexible Height Vertical Centering With CSS, Beyond IE7Roger Johansson shares his thoughts on how to improve centering an element both horizontally and vertically with the display:table alternative. Coding up a semantic, lean timelineThis article tells you how to create a semantic lean timeline. CSS Border Tricks with Collapsed BoxesThese border tricks tricks will help you to display content outside of the content box, over borders, without the use of images, CSS3 gradients or extraneous markup. Quick Tip: Nonintrusive CSS Text GradientsJeffrey Way shows some ways for creating pure CSS text-gradients with a bit of trickery. The key is to use a mix of attribute selectors, webkit-specific properties, and custom HTML attributes. Bokeh with CSS3 GradientsDivya Manian uses the CSS gradients and shows the results of his work on a project which uses a bunch of circles as a decorative background. Different Transitions for Hover On / Hover OffChris Coyier tries to acchieve “different transitions on mouseenter and mouseleave”, but he isn’t using JavaScript here; we’re talking about CSS :hover state and CSS3 transitions. Hover on, some CSS property animates itself to a new value; hover off, a different CSS property animates. Styling children based on their number, with CSS3Lea Verou shows how to style children of elements based on their total number (that is, their total count). CSS ModalUsing CSS3 tech­niques a modal box can be cre­ated with­out JavaScript or images. With a bit of ani­ma­tion, tran­si­tion and trans­form, it can be made that lit­tle bit more special. The problem: when you hit the “Back”-button after the modal has popped up and was closed, you’ll see the modal again. But maybe you’ll come with a way to fix it? Rotating Feature BoxesThe full effect of it (with transition animations) will work in newish WebKit and Opera browsers and Firefox 4 (in real beta as of today). Any other browser will rotate the blocks without transition animation. When and How to Visually Hide ContentVisually hiding content on a web page, usually textual content, is at times a viable technique in web design and development. It can be done for several reasons, most importantly, to improve the experience of a screen reader user. Other reasons include improving readability when CSS cannot be rendered, and improving search engine optimization (SEO). Other exaples about using the Visually Hide Content are shown in this article. How to avoid common CSS3 mistakesThe new features of CSS3 bring with them complexity and new things for us to screw up. This article will help keep us in check as we start using these new features. Introduction to CSS Escape SequencesEscape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules. In this article Mert Tol shows how to use these sequences. Wrapping Long URLs and Text Content with CSSTo wrap long URLs, strings of text, and other content, you can just apply a carefully crafted chunk of CSS code to any block-level element . CSS Generated ContentTrevor Davis shows on some examples what you can do with the CSS generated content. Controlling width with CSS3 box-sizingAn incredibly useful CSS3 feature when you’re creating columns with floats is box-sizing. It lets you choose which box sizing model to use – whether or not an element’s width and height include padding and border or not. It makes it much easier to define flexible widths where you also need padding and/or borders. A typical example is laying out forms, which can be a real pain when you want flexible widths. Revisit Hardboiled CSS3 Media QueriesShi Chuan takes a close look at boilerplates and helps us understand the math we need to tweak the width required for a good resolution to any particular device. iPad Orientation CSSKeith Chu revises Cloud Four’s work and finds a way to alleviate extra HTTP requests, not iPad-specific as well as lack of reusability. In this post, he shares with us his proposed revision to the iPad orientation CSS. CSS Value Lengths, Times, Frequencies and AnglesIn this article the authors go over all the math type units that can be applied as property values in CSS. CSS Tools320 and up‘320 and Up’ prevents mobile devices from downloading desktop assets by using a tiny screen’s stylesheet as its starting point. Try this page at different window sizes and on different devices to see it in action. CSS3 Generator – By Eric Hoffman and Peter FunkThis generator was proudly designed by Eric Hoffman and coded by Peter Funk. CSS Pattern GeneratorPatternify is a simple pattern generator that enables you to not only build your patterns online, but export them with the base64 code, so you don’t even need an image file anymore. Just include the code in your CSS and you’re ready to go. Created by Sacha Greif. Griddle.it – Web page alignment made easyA clean and simple way to help align your layouts. No complex grid frameworks necessary.Just put your dimensions after our URL to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work. The 1140px Grid: Fluid down to mobileThe 1140 grid fits perfectly into a 1280 monitor. On smaller monitors it becomes fluid and adapts to the width of the browser. Fighting the @font-face FOUTPaul Irish’s 2011 update for the @font-face FOUT issue. Good news: Firefox 4 has no FOUT, IE9 does, and FOUT-b-GONE will help you out with that. CSS3 Github ButtonsCSS3 Buttons is a simple framework for creating good-looking GitHub style button links. CSS3 Facebook ButtonsCSS3 Facebook Buttons MinimeeOn the Internets, speed is everything – which means that when it comes to CSS & Javascript files, size DOES matter. By automatically minimizing and combining your files for you, Minimee takes the heavy lifting out of keeping your files svelte. Live.jsone script closer to designing in the browser. Bootstrap.lessBootstrap is a pack of mixins and variables to be used in conjunction with LESS, a CSS preprocessor for faster and easier web development. Animatable: Create CSS3 animations and advertising for Webkit browsersAnimatable is the easy way to create CSS3 animations and advertising for Webkit browsers on any platform or device — including Android, BlackBerry, iOS and WebOS. Ceaser: CSS Easing Animation ToolCeaser is an CSS Easing Animation Tool. ShowerThis is provided without warranty, guarantee, or much in the way of explanation. CSS PivotThis tool allows you to add CSS styles to any website, and share (and adjust) the result with a short link. Roots WordPress ThemeRoots is a starting WordPress theme made for developers that’s based on HTML5 Boilerplate, Blueprint CSS (or 960.gs) and Starkers that will help you rapidly create brochure sites and blogs. Free Online CSS3 Typeset Style GeneratorAn advanced generator of CSS buttons; the tools allows you to define font and color variations, shadows, borders, corners etc. CSSPrefixerYou hate writing vendor prefixes for all browsers? The CSSPrefixer does it for you. Type-a-fileThis tool will give your Web typography a head start. Type-a-file is essentially a small collection of CSS stylesheets with heavy focus on rich and beautiful typography. The tool uses Typekit to preview the stylesheets, so if you have a Typekit-account, you could purchase the font license and have exact the same typography on your website. A Best Practice Baseline for Your Mobile Web AppMobile Boilerplate is your trusted template made custom for creating rich and performant mobile web apps. You get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile. Code BeautifierThis tool allows you to format, clean up and optimize your stylesheets. Markup GeneratorMarkup Generator is a simple tool created for HTML/CSS coders that are tired of writing boring frame code at the very beginning of slicing work. CSS Sprite GeneratorThis tool allows you to create and maintain your CSS sprites. RespondA fast & lightweight polyfill for min/max-width CSS3 Media Queries (for IE 6-8, and more) Adapt.js – Adaptive CSSAdapt.js simply checks the browser width, and serves only the CSS that is needed, when it is needed. Firmin, a JavaScript animation library using CSS transforms and transitionsFirmin is a JavaScript animation library that uses CSS transforms and transitions to create smooth, hardware-accelerated animations. Command-line CSS spritingThe author shows, how to create CSS sprites from the command line alone. Last ClickCode StandardsThis document contains normative guidelines for web applications built by the Interface Development practice of Isobar North America (previously Molecular). It is to be readily available to anyone who wishes to check the iterative progress of our best practices. How to Manage CSS ExplosionA very useful thread on StackOverflow on how to keep CSS files organized and clean. Related PostsCSS: Innovative Techniques and Practical SolutionsThe main goal of the article is to present powerful new CSS techniques, encourage experimentation in the design community and push CSS forward. (vf) (ik) © Smashing Editorial for Smashing Magazine, 2011. | Permalink | Post a comment | Smashing Shop | Smashing Network | About Us Post tags: CSS, css3, html5, javascript, techniques, tools ]]> Coding CSS css3 html5 javascript techniques tools https://pinboard.in/u:alexhansford/b:e9f18d404395/ 2011-02-23T12:00:59+00:00 http://freelanceswitch.com/productivity/30-inherently-useful-tools-for-freelancers/ alexhansford Freelancing_Essentials Productivity tools https://pinboard.in/u:alexhansford/b:b5bc0f9fa557/ 2011-02-23T12:00:59+00:00 http://feedproxy.google.com/~r/FreelanceSwitch/~3/PP-8bYpgBNw/ alexhansford Freelancing_Essentials Productivity tools https://pinboard.in/u:alexhansford/b:b975336645c6/ 2011-02-17T10:00:57+00:00 http://www.1stwebdesigner.com/design/tools-browser-compatibility-check/ alexhansford Tools Usability Web_Design compatibility Cross_Browser https://pinboard.in/u:alexhansford/b:2053ea8fa958/ 2011-02-08T15:25:08+00:00 http://www.smashingmagazine.com/2011/02/08/useful-web-services-tools-and-resources-for-web-designers/ alexhansford Coding Design tools web_services https://pinboard.in/u:alexhansford/b:cb2c7299e328/ 2006-06-04T15:20:17+00:00 http://www.webmaster-toolkit.com/ alexhansfordBookmarks Webmaster delicious-export html seo tools web webdesign webdev https://pinboard.in/u:alexhansford/b:175c3ed0655d/