跳到主要内容

网页设计和开发的新工具:2012年2月

+$In February we've stumbled upon, been emailed and had submitted a variety of tools for making the web dev's job a little easier. Not the massive JCB-type apps but the kind of delicate little tools which might fit into a calf-skin wallet and kept in a breast pocket, ready for use.

+$JavaScript leads the charge, providing the polly filler which is currently holding the web together. Bridging those annoying little gaps in production and keeping end users from suspecting there might be any difference between Internet Explorer and Safari.

+$There were more ambitious apps out there but ambition isn't always a guarantee of quality. And, interestingly, a couple of these entries are free while not being open source. It's a pretty good month for developers, all in all.

+$1. Pears

价钱: 自由

+$If you're trying to develop elegant solutions to common coding problems one thing you can really benefit from is distance. A little thinking space. And that is just what Dan Cederholm has created with

+$His idea cuckoos into Wordpress as a simple theme installation but provides a clean yet hospitable environment to play around with code/style partnerships until you find something you're happy to call a pair. Or Pear …

A clean, attractive place to develop your code and design skills in tandem

+$A clean, attractive place to develop your code and design skills in tandem

+$2. I HATE

价钱:自由

+$Even if it's just for the satisfaction of knowing that other professionals have felt your pain and tried to do something about it,+$I HATE Terms and Conditions+$is worth a visit.

+$Essentially, you just paste in your textual terms, hit submit and you get back a simply marked-up version. To this you can rapidly add a few formatting touches and download your HTML. It just takes a bit of the sting out of a less than glamorous task.

Nobody likes repetitive tasks, so let this form lighten the load a little

+$Nobody likes repetitive tasks, so let this form lighten the load a little

+$3. Web Site Dimensions

价钱: 自由

+$You know you should really be ensuring your sites are responsive to the various screen resolutions and device types out there, but they change so often, how can you make sure you're up to date?+$Web Site Dimensions+$is here to help.

+$Kept up to date using W3C stats and including details for safe areas as well as physical dimensions, there's a deceptively large amount of information enclosed in those neat little tables. And a handy live checker for your own work.

Screens: they come in all shapes and sizes

+$Screens: they come in all shapes and sizes

+$4. Accessifyhtml5.js

价钱:自由

+$The Web Accessibility Initiative has developed a framework for providing users with clues as to the functionality of a website. Essentially, this boils down to adding attributes to elements which help identify their purpose: menus, content, articles and so on.

+$Accessifyhtml5+$runs through your code applying a reasonable subset of these attributes for you. And at just under 50 lines of code there's an almost negligible overhead required to add functionality for a not insignificant segment of potential users.

It's tempting to overlook the ARIA attributes, Accessifyhtml5 helps with that

+$It's tempting to overlook the ARIA attributes, Accessifyhtml5 helps with that

+$5. Overthrow

价钱:自由

+$Sometimes, just sometimes the lack of a unified approach to such simple things as overflow:auto is enough to make you just shudder with despair. Fortunately there are people out there ready, willing and able to fix such problems.

遇见+$overthrow.js+$– a flexible, 6kb JavaScript solution to the fact that some browsers (particularly mobile ones) can make content with overflow applied to it unreachable. Just include and add the class to your divs, overflow does the rest, either applying, polyfilling or failing gracefully as appropriate.

Overflow enables you to handle overflow in a consistent manner

+$Overflow enables you to handle overflow in a consistent manner

+$6. Live Reload

价钱:$ 9.99加入

+$Removing the refresh requirement from the development cycle is just a brilliant idea As time goes on, just think of the number of button clicks you'll save yourself asLiveReload+$refreshes every time you update a your site's file structure or save a css tweak. LiveReload just keeps on giving.

+$For those using the likes of CoffeeScript, LESS and SASS, LiveReload has even broader applicability, ensuring that preprocessing is applied and changes made – without you needing to do anything.

Just drop your projects on the LiveReload window, add a <script> tag and boom! No more reloading

+$Just drop your projects on the LiveReload window, add a tag and boom! No more reloading

+$7. IvanK.js

价钱:自由

+$If you're having trouble letting go of Flash, then you should take a look at Ivan Kuckir's excellent js library+$IvanK.js+$. A 2D graphics library which works with HTML5 and WebGL to deliver a surprisingly snappy 'stage' for your visual programming delight.

+$Given the clarity of the API, plus the number of jobs it saves any 2D developer – particularly in terms of interaction – IvanK is well worth getting to know. Minor hitch – it's not yet a universally deployable resource but iOS support is on the way and Android is already available.

Ivan Kuckir's games show just how snappy his eponymous script can be

+$Ivan Kuckir's games show just how snappy his eponymous script can be

+$8. Sequence

价钱:自由

+$Slide shows and image browsers are one particular web wheel that just seems to endlessly require re-inventing. Well, that was until Ian Lunn's+$Sequence.js+$arrived.

+$Compatible across the board, right back to IE7, sequence is designed to be customisable in terms of both look and feel. Although it's a jQuery plug-in it relies on CSS3 as it's primary technology. The docs are first rate too.

Check out the demos, Sequence is cool

+$Check out the demos, Sequence is cool

+$9. Float

价钱:+$From $19

+$Though it's not without a few niggles,浮动+$presents your inner neat freak with a quick and easy way to keep tabs on projects and employees.

+$As well as a regular calendar-style scheduler, you can tag your team and their projects with keywords so you can put the right people in the right place. Not being able to schedule the weekends is a rare example of idealism getting out of hand.

The Float UI - keeping your weekends free

+$The Float UI - keeping your weekends free

+$10. TypedJS

价钱:自由

+$Commenting your code is all well and good but do you keep things up to date when you make changes?+$TypedJS+$provides a more rigorous approach to annotation, by verifying the ins and outs of your functions with a web console interface read-out.

+$All you have to do is comment your code with details of what to expect and Typed will tell you what happening as the code executes. Works best with Firefox where it's easiest to access the web console to run the tests.

TypedJS running in the web console of Firefox

+$TypedJS running in the web console of Firefox

如果您最近遇到过任何尚未列入我们列表的酷工具但您认为应该有这些工具,请在评论中告诉我们。同样,如果您已经创建了一个您希望我们在下一个综述中使用的工具,请向我们发送一个电子邮件



翻译字数超限