What I’m Reading
Shareworthy articles and content syndicated from other sites. These aren’t things I’ve written or necessarily endorse, for the record.
Infographic: the new startup ecosystem
Even if we are experiencing another bubble, is that so bad for startups trying to get funding? This infographic, which Column Five Media did for Udemy, examines some of the evidence. Though VCs are doing fewer deals than they were before the recession really took hold in late 2008, the amount of money invested is up to prerecession levels. That’s good news for startups trying to raise money — at least in the short-term. But the valuations of some companies compared to their revenue might spell trouble for the future.
Graphic courtesy of Column Five Media
Related content from GigaOM Pro (subscription req’d):
Cleantech Financing Trends: 2010 and BeyondThe Case for Increased M&A in 2011: Actions and OutlooksThe Structure 50: The Top 50 Cloud Innovators
How proximity affects workplace relationships
In an era where more and more workers are telecommuting for part of the week, if not entirely, the importance of physical proximity is often overlooked. In this Entrepreneur Thought Leader Lecture, given at Stanford University, Ori Brafman, author of “Click: The Magic of Instant Connections,” reveals how distance affects the building of relationships, both personal and professional. Besides data points from studies, he also hosts an interactive demonstration of the effects of proximity – and the benefits they can have.
(Can’t see the video? Click here.)
Tags: Stanford University
Meet TechStars’ Kinvey: Setting the pace for the future of mobile apps
While pursuing our passion for making things that bring value to millions of people, we built mobile apps to address the needs of non-profits, open government initiatives, etc. We realized that the apps we were thinking of creating, were in the same class as the millions of next-gen mobile apps. These apps are going to use backends because they will upload/download data, use location and social information, and buy and sell things. To do all this, the mobile app has to connect to a backend stack, but building a backend stack sucks. We decided that we were going to make it ridiculously easy for developers to set up, use and maintain backends for mobile and tablet apps. We call it Backend as a Service.
-Kinvey Founder and CEO Sravish Sridhar
Kinvey is one of the brand new companies about to launch out of TechStars, an incubator program in Boston (MA), Boulder (CO), New York City (NY) and Seattle (WA) that has helped numerous companies attract over $25 million in venture capital and angel investment. Kinvey, a company that has created a cloud backend service for mobile apps, will be graduating from this spring’s Boston class.
Kinvey pronounced like convey is a “Backend as a Service” that makes it incredibly easy for mobile app developers to focus on making beautiful, user-friendly apps. Kinvey is betting that the next generation of wireless devices and apps will empower billions of people across the world in ways that will change the face of learning, communication and commerce and that Kinvey will be the hub of that change.
Sridhar and his co-founders came up with the idea in September 2010 and started building the first version. They spoke to hundreds of mobile app developers for input and found that every mobile developer just wants an API. They don’t want to figure out platforms, stacks and tools and how to put those things together. They want to focus on the application and user interface.
Let’s say you’re a mobile app developer who wants to create a fictional app called Videogram. The developer would tell Kinvey, I want the app to take video, upload it, geotag it and then allow it to be pushed to social networks with commenting features. The developer has a a choice on whether he or she wants to store that video on Amazon, Rackspace, or any other cloud service or leave the decision up to Kinvey. In 10-15 minutes, Kinvey sets up a backend to Videogram. The ability to auto-generate those APIs from models is Kinvey’s secret sauce.
Imagine you want to paint your home. With Kinvey, you’d pick the colors, click on the walls and all of a sudden you’d see your house in various colors. Kinvey lets developers focus on writing beautiful client applications by providing a dynamic backend including data storing, location and social networking tools.
Watch Kinvey’s video for more:
“I completely bought into the fact that mobile applications are going to change the world that we live in and what mobile technology in general can do for the developing world,” says Sridhar. “Myself and my cofounders knew we wanted to take this company to the next level from day one so we decided that an accelerator program would be the best way. We got so excited when we found TechStars. The best thing about TechStars is [Director] Katie Rae. She is absolutely amazing. World-class entrepreneurs and investors in Boston spent a lot of time working with us to help accelerate our business, in large part, due to the respect they have for Katie and the reputation she has in the Boston startup community.”
The Kinvey team was new to the Boston area. In a period of just a few months, they built a network of a few hundred technical, marketing and startup gurus, who have all helped them personally and professionally. In the future, Kinvey wants to be the de facto data hub for all mobile data. Once they accomplish this, Sridhar says there will be plenty of monetization routes.
Previous to Kinvey, Founder and CEO Sravish Sridhar was a part of the founding team at United Devices and wrote software that harnessed computing power on over 3.5 million PCs to conduct cancer research. He is also the founder of We Flap, a non-profit that helps other India-based non-profits tap into the social graph. Sravish, who grew up in India, met his CTO Morgan Bickle and Creative and Marketing Director Ryan Light at the University of Texas.
So far, over 100 developers have signed-up for Kinvey’s private beta. For now, the service is free for private-beta users and they will announce pricing after going live in the fall, which could be anywhere from a few thousand dollars a month down to a dollar a day depending on the complexity of the app. Developers will only start paying when their application goes live. Not wanting developers to ever feel stuck, Kinvey will always have the option for a one click “export all data” in multiple formats, allowing the developer to delete their account (thus losing backend support) and walk away with their app, completely free of cost.
Interested in joining the closed beta? Sign up here.
TechStars’ Demo Day in Boston will take place on June 15th, 2011. As the guys have coined this term “backend as a service,” expect quite a bit of humor during their presentation. TNW’s Brad McCarty will be there to report.
Read more on TechStars, don’t miss:
An interview with: TechStars’ David Cohen on startup rockstars.
TechStars: The next great incubator unleashes 11 startups in NYC.
TechStars Boulder: Inside the magic and mentorship of the top startup accelerator.
Useful HTML-, CSS- and JavaScript Tools and Libraries
Front-end development is a tricky beast. It’s not difficult to learn, but it’s quite difficult to master. There are just too many things that need to be considered; too many tweaks that might be necessary here and there; too many details to make everything just right. Luckily, developers and designers out there keep releasing useful tools and resources for all of us to learn, improve our skills and just get better at what we do. Such tools are valuable and helpful because they save our time, automate mundane tasks and hence help us focus on more important things.
Here at Smashing Magazine, we’re continuously searching for time-saving, useful HTML-, CSS- and JavaScript-resources for our readers, to make the search of these ever-growing tools easier. We hope that these tools will help you improve your skills as well as your professional workflow. A sincere thanks to all designers and developers who are featured in this round-up. We respect and appreciate your contributions to the design community.
HTML and CSS Tools
HTML Email Boilerplate
This website and its sample code creates a template of sorts, absent of design or layout, that will help you avoid some of the major rendering problems with the most common email clients out there. It also provides some helpful examples and snippets that will keep your email design rendering as true-to-form as possible.
Initializr
This tool creates a customizable template based on HTML5 Boilerplate. Decide whether you want sample content, choose between JavaScript and jQuery, and specify your compatibility and server configuration needs. You’ll get a template based on key features of Boilerplate to start your next project. You might want to check out The HTML5 Framework Generator as well.
Layer Styles
A nice simple tool for creating CSS in an intuitive way — very much like you would do with a graphics editor. The tool lets you add drop shadow, inner shadow, background, border and border radius and generates cross-browser CSS code.
Mobile Boilerplate
A template that creates rich and performant mobile Web apps. You can get cross-browser consistency among A-grade smartphones, and fallback support for legacy Blackberry, Symbian, and IE Mobile.
Kotatsu
A simple HTML table generator that helps you create a table and throw in row as well as column classes quickly and easily. And if you want a quick tool to generate lists, you might want to take a look at li maker.
Zen Coding
Zen Coding is an editor plugin for high-speed coding and editing. The core of this plugin is a powerful abbreviation engine which allows you to expand expressions (similar to CSS selectors) into HTML code.
Vogue
This tool reloads the style sheet (not the HTML) of a page in all browsers, and it can even be configured to reload a page automatically in multiple browsers at the same time. The tool doesn’t host your website but rather runs your website’s own local server. To use it, you just need to install NodeJS and npm.
LiveReload
LiveReload applies CSS/JS changes to Safari or Chrome without reloading the page and reloads the page automatically once the HTML changes. Alternatively, take a look at Live.js, a library that makes sure that you’re always looking at the latest version of the page you’re working on, whether you are writing HTML, CSS or JavaScript.
css-x-fire
This tool allows editing CSS properties in the IDE from Firebug CSS editor and also allows the developer to concentrate on CSS styling without having to refresh the browser.
Ffffallback
A bookmarklet that lets you test different font stacks to find the best result. It bascially scans the page’s CSS and creates a clone page where you can test and analyze different fallback fonts.
LESS.app for Mac OS X
LESS extends CSS with variables, nested rules and operators. This app makes it very simple to use {Less} by automatically compiling *.less files into standard CSS.
Less-Boilerplate
Boilerplate CSS is written in Less and includes a CSS reset, CSS3 helpers, centered column blocks, and much more.
Needle v0.1a1
Needle is a handy tool you can use to test whether your CSS renders correctly by taking screenshots of portions of a website and comparing them with other screenshots. It also provides tools for testing calculated CSS values and the position of HTML elements.
inuit.css
A CSS framework that provides you with the best dev tips, tricks and practices in one handy file.
Spritemapper
This application merges multiple images into one and generates CSS positioning for the corresponding slices; by reducing the amount of images and better utilizing the connection, CSS spritemapping can reduce your website’s loading time.
CSSsitemap System
David Leggett shares with us the code for a CSS-based sitemap that Andrew Maier and himself have created and are still working on. A set of tools for project documentation & UX designers is also coming up soon.
CSS Stress Testing and Performance Profiling
Andy Edinborough shares the code he uses for his so-called ‘CSS Stress Test’ for almost all browsers.
Normalize.css
Normalize.css takes a slightly different approach to CSS resets. Rather than eliminating all browser defaults, Jonathan Neal and Nicolas Gallagher have taken the time to research how different browsers handle different bits of code and then kept the defaults that are useful. It saves you time as a designer, while also providing consistent results.
Holmes
The tool is a diagnostic CSS style sheet that highlights possibly invalid or erroneous mark-up. Just add a single class, and it will create a red border around errors, a yellow border around warnings and a gray border around deprecated styles. In addition to the downloadable CSS style sheet, there’s also a Holmes bookmarklet that lets you apply holmes.css to any page within your browser.
CSS Crush
A CSS pre-processor that is familiar, convenient, intuitive, and much more — everything Pete Boere wants a pre-processor to be.
CSSPrefixer
CSSPrefixer helps you improve your workflow and saves you a lot of time while inserting all of the necessary CSS prefixes for various browsers.
iOS Media Query Previewer
A very simple tool to preview how a particular website looks on an iPhone as well as iPad.
CSS Pivot
Here you can add CSS styles to any website and share the result with a short, handy link.
PCSS
A PHP-driven CSS preprocessor that helps you unleash the CSS3 power with much less code and features like class nesting, server-side browser specifics, default unit and variables. The tool requires PHP5.
JavaScript Tools
Modernizr 2
Modernizr is a widely used open-source JavaScript library that helps you build HTML5 and CSS3-powered websites. With the second version of the tool, you can now combine feature detection with media queries and conditional resource loading. That gives you the power and flexibility to optimize for every circumstance. Developed by Paul Irish, Faruk Ateş and Alex Sexton.
yepnope.js
A conditional loader for your polyfills that is very fast and allows you to load only the scripts that your users actually need.
FitText
FitText is a jQuery plug-in for responsive and fluid layouts that resizes display text to fit the parent element. A good solution for creating headlines that look good on everything from a small mobile device to a 30-inch desktop display.
jQuery Waypoints
Waypoints is a small jQuery plugin that makes it easy to execute a function whenever you scroll to an element.
jQuery Plugin Boilerplate
This boilerplate implements public and private methods, as well as public and private properties, making it very easy when building both simple and complex jQuery plugins.
ligature-js
This Java script lets you convert text patterns into common typographic ligatures by going through the text on a web page and inserting ligatures where appropriate.
Placeholder jQuery Plugin/Polyfill
This jQuery plugin provides support for the new placeholder=”” HTML5 form attribute in browsers that don’t natively support it (IE et al).
StronglyTyped
A JS library that allows you to specify strongly typed properties of various types (Boolean, Number, String, etc.) and constants (final properties in Java). It uses ES5 getters and setters and falls back to regular, loosely typed properties in non-supporting browsers.
Kaffeine
A set of extensions to the JavaScript syntax that attempts to make it nicer to use. It compiles directly into JavaScript that is very similar, readable and line for line equivalent to the input.
Crossroads.js
A JS routing library inspired by URL Route/Dispatch utilities which are present on frameworks like Rails, Pyramid, Django, CakePHP, CodeIgniter, etc. It parses a string input and decides which action should be executed by matching the string against multiple patterns.
Doctor JS
Doctor JS analyzes your JavaScript code and provides you with a complete analysis in JSON, whether you’re dealing with polymorphism, prototypes, exceptions or callbacks. Tell Doctor JS about it:
HEAD.js
A script that speeds up, simplifies and modernizes your site — a concise solution to universal issues. You can load scripts like images as well as use HTML5 and CSS3 safely.
Hivelogic
Posting your email address on a website is an easy way to get an inbox full of spam. This anti-spam email address enkoder helps protect email addresses by converting them into encrypted JavaScript code so only real people using real browsers will see them. An alternative, more robust solution is Mollom.
JavaScript Garden
A JS project that offers advice on avoiding common mistakes and subtle bugs, and lays down performance issues and bad practices that JavaScript programmers might run into on their journey to the depths of the language.
Syntaclet
By clicking on the Syntaclet bookmarklet, you can automatically see all language specific syntax colored with line numbers to all the code on the page.
Bookmarkleter
This tool creates bookmarklets from JavaScript code. It removes new lines, tabs, and optional spaces, URL-encodes special ASCII characters and places code in a wrapper function (if not done already).
Bookmarklet Crunchinator
This great tool helps you quickly create a bookmarklet from any JavaScript code and will automatically be wrapped in a function to make it bookmarklet-friendly.
Grids
The JavaScript Grid
A JavaScript-based grid overlay — just drag the snipplets into your bookmarks bar, open your URL and click the bookmark.
Grid Calculator
A calculator that helps you easily create your own grid and download it for either Adobe Illustrator or Photoshop.
GridCalc
This easy-to-use grid calculator lets you download a configuration as a CSS file which you can use in your project by simply entering the desired width of your page and an aproximate range for your column and gutter width. The calculator then gives you all the possible combinations within the limits you entered and provides you with a nice visual representation of the results and how the grid can be used.
Modular Grid Pattern
This tool enables you to create a grid template for Photoshop and other image editing applications. Enter the baseline, the module’s width and height, the gutter width, and the number of modules (columns), and it gives you a custom pattern to import into Photoshop. A Photoshop extension is also available, and you can download a PNG or transparency map, too.
Susy
A Rails framework that enables you to create a completely custom grid based on your mark-up and designs. No more compromises because the grid framework you’re working with isn’t quite what you need, and no more spending hours tweaking things to get them just right so that the design works the way you want.
Griddle.it
A clean and simple way to help you align your layouts. All you need to do is put your dimensions after the URL provided to get a background guide image to work with in your browser. Grids are created on the fly, so any combination should work.
Last Click
ASCII Pronunciation Rules for Programmers
Most programmers would recognize ASCII characters on a website and know how to use them in their own work. But how many know what to call all those characters? This article gives a pretty thorough rundown of common and not-so-common names for ASCII characters. It’s a useful guide if you’re ever at a loss when listening to another programmer speak about coding.
Weave Silk
Is your desktop, motivation or even design work in need of something fresh, swirly and remarkable? Just weave some Silk! Yuri Vishnevsky created this experimental, magical interactive gimmick. You can spend minutes playing around with this little technique, based upon HTML5 Canvas: no Flash in use.
From Me To You
No, this has nothing to do with CSS, HTML or JavaScript, but it is just remarkable. On his photography blog, Jamir collects scenes from around the world, memorable events, food, people and small personal universes. The interesting part is that the photos are animated (hence the name); they come to life using good old animated GIFs. Pay a visit to the article Positioning an animated gif over a jpg image. His short tutorial explains how to save on bytes when putting GIFs and JPEGs together, without losing too much quality.
Related Articles
You might want to take a look at our previous related articles:
Powerful New CSS Techniques and Tools (April 2011)
Useful JavaScript and jQuery Tools, Libraries, Plugins (April 2011)
CSS: Innovative Techniques and Practical Solutions (February 2011)
Time-Saving and Educational Resources for Web Designers (January 2011)
(vf) (il)
© Smashing Editorial for Smashing Magazine, 2011. |
Permalink |
Post a comment |
Smashing Shop |
Smashing Network |
About Us
Post tags: CSS, HTML, JavaScript