Divshot Blog @divshot - Tumblr Blog

product-updates/divshot-1-0-visual-front-end-development-for-bootstrap/

Today we are proud to take the wraps off of Divshot 1.0. This next stage of our visual HTML builder for Bootstrap (and Foundation, and Ratchet) is simple like a mockup tool, powerful like a text editor, and packs more new features than you can fit in a <marquee> tag.

Our 80,000+ intrepid beta testers have done a fantastic job helping us chart the course Divshot should take, and we are extremely grateful to them all. Without further ado, here are a few of the features we’re most excited to launch with 1.0:

Project Workflow

The Divshot workflow has been completely re-organized to center around Projects. You can think of a project much like a folder on your hard drive. It can contain HTML pages, JavaScript, CSS, and other related assets such as images. By organizing your work into project, you can share common resources between related pages and generally get work done faster.

Team Collaboration

Our new Organizations feature allows you to collaborate on projects with other Divshot users. Each organization has its own projects and team members, allowing easy access for people who need to work together. You’ll never have to worry about multiple usernames and passwords, as you can create and belong to many organizations with a single Divshot account.

Page Linking / File Uploading

Our new Projects structure also paves the way for one of our most-requested features: page linking! Because Divshot projects work just like a folder on your hard drive, you can create links between pages simply by pointing links to the appropriate .html file.

In addition, you can now upload files into your projects. Add images, external CSS and JS libraries, and more to leverage Divshot as a full-featured front-end development platform.

Previews and Export

We’ve completely reworked previews for Divshot 1.0. While you’re working, you can toggle on a preview mode with one click to see how things are shaping up (and click around between linked pages). Then, when you’re ready to share with others, you can create a snapshot at any time that won’t change even as you continue to work on the project. This flexibility lets you get work done faster and share your work without having to stop.

In addition, we’ve revamped our .zip file export to be more robust and reliable. Get a complete copy of your project’s state at any time for backup or sharing.

Full-Document HTML Editing

With Divshot 1.0, source-editing capabilities don’t start and end at the <body>. Divshot 1.0 allows for full document source editing, allowing you to add external stylesheets, webfonts, scripts, and more. In some of our internal experiments we’ve built full-functioning apps completely within Divshot by utilizing services like Firebase.

Revision Tracking

We now keep track of the revisions you make to each page in your project. You can switch back to an old version with just a couple clicks at any time.

Pricing for Individuals and Teams

We’ve created a pricing plan that we believe works well for everyone from freelancers to large enterprise software teams. Individuals can manage up to 10 projects for just $30/month, while team accounts can be purchased for $60/month (3 users, 3 projects), $150/month (10 users, 10 projects), and $300/month (30 users, 30 projects).

All projects can have an unlimited number of pages, images, CSS and JS files in them. We are also offering a perpetually-free plan for individuals with one project.

We’re Just Getting Started!

As a team of passionate developers it’s been agonizing keeping all of this under wraps and out of your hands while we built it. The list above covers only some of the biggest new features and there are many more, everything from easy password changing to a completely revamped interface.

If you haven’t tried Divshot yet, we hope you’ll give it a spin and let us know what you think. If you’re already in the beta, you should have already received an email for how you can upgrade your account from beta to 1.0.

All Features Are Not Created Equal

When planning out what to build next for a software product, it's useful to bucket items into the broadest possible categories: new features, bug fixes, refactors, etc. Especially for features, however, there are other useful distinctions that can be made. Features can improve your project's Capability, Accessibility, Flexibility, and Efficiency (conveniently shoehorned into an acronym as CAFE).

So why do we need yet another acronym or to make these distinctions at all? Because recognizing their differences and achieving a proper balance between them can make the difference between a product users like and a product users love.

Capability: Doing New Things

Features that increase capability are probably the first thing most people think of as a "feature." Adding capability means that your product is simply able to do something now that it wasn't able to do before. Examples might include:

Allowing users to attach photos to posts

Adding real-time notifications of server-side changes

Adding on to something the product provides (new filters, new components, etc.)

Note: I'm including expansions of existing capability in the same category because they tend to have similar impacts on your product.

Capability tends to increase the efficiency of the product and slightly reduce its accessibility and flexibility.

Accessibility: Improving Ease-of-Use

Features that increase a product's accessibility will make it easier to use for a segment or the entire user population. A few examples of accessibility:

Adding an onboarding process to make it easier for beginners to use the product

Automating previously manual parts of a process

Simplifying and streamlining the user interface

Having an intuitive application is obviously beneficial both in proving your value to new customers and fostering loyalty in long-term users.

Accessibility tends to have complex interaction with the other feature types. It has the potential to increase or reduce any of the other factors, and additionally should be a factor of all of the features you build.

Flexibility: Improving the Reach of Existing Features

Features that increase a product's flexibility will allow users to do more with what's already there. A few examples of adding flexibility might be:

Building an API to allow 3rd party developer access

Implementing connections to other services' APIs

Allowing users to define custom fields, create reusable templates, or change the look and feel of the product

Having a flexible application helps your product serve a larger audience than it otherwise would by allowing your users to build into (or out of) your existing functionality.

Flexibility has a tendency to increase efficiency (by allowing power users to adapt the tool to suit their needs) but decrease accessibility (more things to consider and configure means less intuitive).

Efficiency: Doing Things Faster

Features that increase efficiency simply allow users (usually more experienced users) to accomplish their goals within your product faster and with fewer steps. Examples might include:

Adding keyboard shortcuts to your product

Allowing users to create custom workflows

Support email reply commands to perform actions

Having an efficient application improves the value proposition of your product by saving users time (which therefore saves them money).

Efficiency and Accessibility are a fairly direct push and pull. Implementing a wizard that walks beginning users through a process may slow down an experienced user who knows exactly what they want. Similarly, exposing advanced configuration options to a newcomer can make a product seem confusing. Balancing the two requires careful thought and effort.

At Divshot, we're building a front-end development platform that lives in the browser. We have everyone from experienced programmers to people who have never written a line of HTML in their life using our product. When I started to think of our roadmap in terms of these feature archetypes, it helped me do a better job of task triage. All of the feature types are important, but one may be more or less important than others at a given time. If you recognize them as different you have a better chance of maintaining a balance in your development cycle.

#process #product management

Five Lessons from Geo Bootstrap, Our Successful April Fool's Gag

On Monday we were blown away by the positive response and popularity of Geo Bootstrap, our retro-inspired April Fool's Bootstrap theme. With more than 4,000 tweets, 100+ points on Hacker News, becoming a daily trending repo on GitHub, and a healthy spike both in Twitter followers and daily signups for Divshot Geo was an unqualified success. Of course, it could have also fallen completely flat, or worse, been lumped into the "groaner" category of April Fool's gags. So what set Geo apart?

Don't Force It

We didn't sit around for hours brainstorming what might make a great April Fool's gag; in fact, we didn't do much planning at all for Geo. On March 28 I randomly thought of the idea, pitched it to the team and got an immediately positive response. My cofounder Jake took a couple hours and threw together the beginnings of it and it still seemed funny, so we decided to go for it.

Most of the failed April Fool's jokes that I've seen seem to be trying way too hard. If it doesn't come easily, don't force it.

Aim to Amuse Your Company's Audience

Divshot is a startup aimed directly at people who build web apps for a living. These people are likely to have strong memories of just how awful web sites used to look, and probably built some of those awful sites themselves. My own first website was a Geocities-hosted Duke Nukem 3D fan site. It had bright green text and animated GIFs of radioactive symbols all over the place.

We have also connected strongly with the Twitter Bootstrap community as it's a core component of our product. Bringing web nostalgia together with Bootstrap hit a very sweet spot for positive reaction for our gag.

Make It Easy to Share

While we wrote a blog post about the theme, it went viral thanks largely to the tweet button front and center on the public GitHub page. Twitter was by far our largest referrer, outpacing even HN by a large margin. What's the fun in a joke that only one person knows about?

Don't Overmarket It

This falls again into the "trying too hard" bucket. While we put our name on the theme, we didn't embed secret marketing messages or try to optimize a conversion funnel out of it. People have become jaded about April Fool's online because now it's just seen as a marketing gimmick, and if you try too hard to turn a bit of fun into business objectives you're likely to destroy the "fun" part.

Of course, the lovely thing is that at the end of the day it is a great marketing gimmick. Hundreds, maybe thousands of people who hadn't heard of Divshot on March 31 have heard about it now because of the gag. Be content with a little bit of raised brand awareness and don't milk it too much.

Don't Work Too Hard

All told, Geo was less than a day's worth of effort from start to finish for our team. It was a fun thing to collaborate on and watching the reaction was rewarding for the team. April Fool's, if you choose to participate, should always be more about having fun than getting results.

Any time you try to make a joke you take a risk: humor is an inherently subjective medium. We didn't bet on Geo succeeding, but we're very happy that it did. So next year when April 1 rolls around, I hope we've got another fun gag to pull. But if we don't, we don't, and that's OK too.

#first-of-april #tips

Introducing Geo, a Timeless Theme for Bootstrap

Here at Divshot we're committed to moving web development forward by embracing new technology and enabling best practices in rich, visual tools. It is also important, however, to bring forward those things from the past which prove to have timeless value. Today we're proud to announce [Geo for Bootstrap](http://divshot.github.com/geo-bootstrap), a theme that draws inspiration from the timeless design elements throughout web development's history. The new theme is [open source and available on GitHub](https://github.com/divshot/geo-bootstrap) and is also immediately available for use within Divshot.

Geo for Bootstrap features many unique elements, including:

A stunning, high-contrast color palette that will immediately draw your users into the interface

Playful typography designed by luminary Vincent Connare

Call attention to your content with the brand-new blink tag

To use the new theme from within Divshot, simply create a new Bootstrap page and select the "Geo" theme from the Page Options menu in the sidebar.

We hope you find new and innovative ways to utilize this new theme in your own projects. In fact, we'd love to see what you make, so feel free to post links in the comments!

#themes #geo #first-of-april

Scouter: The CSS Selector Specificity Calculator

When you're developing a tool like Divshot there's no shortage of fun and interesting challenges. One such challenge we ran into was prioritizing components with similar selectors in our component engine. Two components could target the same element but we wanted to select the component with the most specific selector between the two. Here's a simple example:

Component #1 is a title bar button with options designated specifically for buttons inside title bars:

.title-bar > .button

Component #2 is a button for use anywhere:

.button

So when I click a button inside a title bar it should default to Component #1. Otherwise, default to Component #2. A simple solution would be to determine the specificity of each selector string. I created Scouter for a quick and easy way to get the specificity score of a selector. Like many of our smaller utility projects it's open source. It also relies on regular expressions, something that I'd love to have scrutinized and improved by an unsung regex hero on GitHub.

Scouter adheres to the W3C specification of calculating a selector's specificity:

A selector's specificity is calculated as follows:

count the number of ID selectors in the selector (= a)

count the number of class selectors, attributes selectors, and pseudo-classes in the selector (= b)

count the number of type selectors and pseudo-elements in the selector (= c)

ignore the universal selector

Selectors inside the negation pseudo-class are counted like any other, but the negation itself does not count as a pseudo-class.

Concatenating the three numbers a-b-c (in a number system with a large base) gives the specificity.

The specification is very straightforward, only requiring 40 lines of CoffeeScript. Let's walk through the code and figure out how it works:

https://gist.github.com/fastdivision/5000379.js?file=combinators.coffee

First things first we split up the selector by descendant, sibling, and child combinators (" ", >, +, ~).

https://gist.github.com/fastdivision/5000379.js?file=matches.coffee

Next we pick up all the matches we need: IDs, classes, attributes, types, pseudo-classes, and pseudo-elements. However, we omit the :not() pseudo-class since it doesn't count toward the specificity score.

That's our parse method in a nutshell. Parse returns an array of matches and now we need to figure out which match belongs to which number: A, B, or C.

https://gist.github.com/fastdivision/5000379.js?file=match_evaluation.coffee

We filter the matches by checking for "#" and throw the IDs inside A. Classes, attributes, and pseudo-classes go inside B. Afterwards we filter out everything in A and B from the matches array to get the remaining matches. Those remaining most likely belong in C.

https://gist.github.com/fastdivision/5000379.js?file=tally.coffee

That's it. The final score is tallied and you have your specificity score.

Check it out on GitHub. If you have any questions leave a comment. Enjoy!

P.S. Are you a developer obsessed with JavaScript and cutting edge frontend development? Get in touch. Seriously, we're hiring!

#Css #open source

Announcing Divshot Docs: Our Open Source Documentation Site

Today we're happy to launch Divshot Docs, the official, open source documentation repository for Divshot.

We know that our users deserve better than being thrown into the deep end, so we're starting with some introductory guides that walk through the different aspects of the Divshot interface. Over time we will bring out step-by-step tutorials, advanced tips and tricks, and more.

Of course, no one can tell us how to improve our docs better than the people using Divshot which is why the documentation is open source on GitHub. If you come across a typo or want to see something covered that isn't there, just file an issue and we'll take care of it ASAP.

For the technically curious, the docs site is powered by Jekyll and hosted directly on Amazon S3. I'll be writing up an in-depth rundown of our static site stack in the next week or two, so stay tuned!

#announcement #documentation

JavaScript Editing & Emmet Integration

Last week we pushed an update that brings JavaScript and CoffeeScript editing directly into the source editor. Custom JavaScript is an important stepping stone toward interactive components and exciting new features on our roadmap. To check it out click the "Source Editor" button and select the "JS" tab from the editor menu.

Divshot automatically includes jQuery on every page so you can easily write code to handle page behavior. It's great for binding events and manipulating the DOM in your prototypes. In the screenshot below I'm toggling an alert on a click event:

More good news! Our source code editor now supports structural markup (HTML), presentation (CSS), and behavior (JS) for fully customizable pages with more improvements in the pipeline.

One such improvement just released is Emmet integration for HTML and CSS. Emmet speeds up your editing workflow by combining CSS-like expressions with TextMate-style snippets. It allows you to type a CSS selector, press the tab key, and instantly generate HTML.

For more info check out the docs and watch Emmet in action:

#announcement #Features #source editor #javascript

On Ovens, Bad UX, and Customer Loyalty

Bad user experience is a slow-acting poison for customer relationships. Small frustrations build up over time and, if left unchecked, will send customers to more intuitive pastures.

Let me give a specific example: I hate the UX of the microwave and oven at my apartment. Absolutely hate it. Let me count the ways: 1. When I set a timer on the oven, it doesn't display the time remaining but the temperature. I have to push the "Bake Time" button every time I want to see the amount of time remaining. 2. If I happen to press the "Bake Time" button twice, it cancels the timer. 3. There is no way to stop the timer's beeping without turning off the oven, so when I set a timer to turn or check something, I have to use the microwave's timer, which brings me to... 4. The microwave timer is set by pushing "Timer", entering a time, and pressing "Timer" again. Pressing "Start" does nothing. 5. Rather than "enter time, press start" this is one of those microwaves with "one touch" starts for one, two or three minutes. I've always disliked that as I rarely want exactly one, two, or three minutes. 6. I do not know how to enter a cooking time on the microwave. It isn't "press cook time, enter time, press start." I usually just push "one" and then push "add 30 seconds" until it's where I want it to be. I could go into detail on all of the ways these problems violate UX principles and how they could be improved, but more important is the fact that after enough of these problems built up it caused action on my part. I took a look at the brand (Frigidaire, in this case) and I decided that if I ever am in a position to be buying appliances, *I'm going to try to avoid them.* I just don't want the headaches. There hasn't been any problem with the **functionality** of the products; they both heat up food in the way I expect. But it's unpleasant to use them and small annoyances repeated dozens of times over the course of months add up to one big headache. So it goes with software. There are 50 different bug trackers out there and I bet that 35 of them were born out of developers who were fed up with the UX of existing solutions. GMail's thread view retroactively made all non-threaded email programs seem to have terrible UX. UX is much more noticeable when it is bad than when it is good. There are relatively few moments I can think of where software has pro-actively impressed me (wow, that's a great UX) but I can think of dozens of times when it has frustrated me (ugh, I hate how to do ____ I have to ___). Much of the time my decisions to "switch" between products are driven by frustration with what I have more than desire for what I don't. Make sure that, in addition to adding features and fixing bugs, in additional to building a beautiful UI, you take the time to smooth out your user experience. You may not get praised for it, but it also may prevent your users from throwing up their hands and saying "that's it, I'm looking for something else."

#ux #retention

Announcing Full-Page Source Editing and More!

After hundreds of commits and several months of effort, we’re excited to unveil the biggest update to Divshot since our launch. This release brings with it full-page source editing, a reimagined component panel, zipped downloads of pages, and tons of new components.

Read on to learn more (also check out this video introducing our biggest new feature, the source editor).

Full-Page Source Editing

Divshot’s new source code editor allows you to modify a page’s HTML directly and see the results in real time. Even better, it works both ways: you can also see the code update as you drag new components onto the canvas.

We’ve built our product on the vision that visual tools don’t have to sacrifice code quality, best practices, or fight the developer workflow. We believe that the source code editor is a big step towards realizing that vision.

In addition to just editing the code, here are a few interesting things to try:

Dragging components into the source code instead of onto the canvas

Right click a component and click “View Source”

Move the cursor in the code editor and watch the appropriate component automatically select itself

Write out a Bootstrap-compatible component (e.g. <a class="btn">Hello</a>) and then click it in the visual editor

This is our most important new feature, ever. We’re proud of where it is today and even more excited for where it will be going in the coming months.

Improved Component Panel

We’ve rebuilt the component panel to make it more useful and easier to explore. Now components come with live previews so you can get a quick visual look at what it will look like on the page. These live previews adapt to the page theme and any custom CSS you’ve added, so you’ll always know exactly what you’re getting.

Components are now grouped into appropriate hierarchies: for example, all form components are nested beneath “Form.” In addition, we’ve added a quick search tool to make it easy to find components by name.

Export to .zip

One of our most requested features has been to export all assets for a page together in a package. We’ve now rolled out basic .zip export in place of our old HTML download: the HTML, CSS, and Javascript is all included automatically and linked appropriately.

Tons of New Components

We had to rebuild our component engine from scratch to make it work with the new source code editor, but we also took that as an opportunity to expand our library. Now available are oft-requested components such as tables, button dropdowns, more form components, the media object, and more!

Go Check it Out!

If you already have a Divshot account, we encourage you to log in and give the new features a spin. If you haven’t tried Divshot before, now’s the perfect time to join the beta! It’s 100% free while in beta and your feedback helps us shape the product for future customers. Thanks, and happy hacking!

#announcement #features #source editor

This Week in Web Tech #18

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

5 Content Marketing Best Practices to Drive Your Design

21 Inspiring Examples of White Space in Web Design | Inspiration

Responsive CSS Timeline with 3D Effect

Code smells in CSS

Adding A Personal Touch To Your Web Design

A more robust version of the Bootstrap modal window.

User Motivation Determines the Best Color Scheme for Your Website

Involve Developers In The Design Process (Divshot can help facilitate this kind of communication)

Native CSS feature detection via the @supports rule

Adapting your WebKit-optimized site for Internet Explorer 10

Short and sweet this week. If you enjoy the content follow us on Twitter!

#twiwt

This Week in Web Tech #16 - #17

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

Chrome Canary for Developers

Placeholder Attribute Is Not A Label!

Microsoft put out a free eBook on Programming Windows 8 Apps with HTML, CSS, and JavaScript

Inspiration for web development with Twitter Bootstrap

Kort: A thumbnail preview concept.

Slider toggles can be confusing. Here's one potential solution.

Why good design and open design often conflict

Being a web developer "is as awesome as Chewbacca riding a squirrel, fighting Nazis with a cross bow." @codepo8

Writing Fast, Memory-Efficient JavaScript

Two things about the iPad mini

liffect: CSS3 effects for lists

People like circles. Use 'em in your designs.

WebRTC is now shipping in Chrome 23. No flags, no special build.

20 Awesome jQuery Plugins for Responsive Layout

The usability experts were right: 5 changes Thumbtack made to increase conversion by 50%

5 More HTML5 APIs You Didn’t Know Existed

Watch Divshot co-founder @mbleigh talk about Cross-Origin Resource Sharing (CORS) at RubyConf 2012!

Simple Methods For Writing Scalable CSS Right Now

CSS-aware HTML Minifier for PhantomJS

Mobile Design Typography is Vitally Important … and Challenging

Mobile Design Details: Hide/Show Passwords

On HTML5 and the proposed main element | Ian Devlin

FinancialTimes exec expounding the virtues of HTML5

CSS Custom Filters

HTML5 will change design – if we let it

Using CSS Transitions in Responsive Web Design

How to use Twitter Bootstrap to Create a Responsive Website Design (or just let Divshot do it for you)

Wait, DevTools could do THAT?

How to Detect DOM Changes in CSS

#twiwt

This Week in Web Tech #15

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

Last week @mbleigh spoke at RubyConf in Denver about what you can do with CORS.

We upgraded the Bootstrap CSS and JavaScript in Divshot to 2.2.0!

Kick-Start Your Project: A Collection of Handy CSS Snippets

5 Really Useful Responsive Web Design Patterns

Towards A Retina Web

A Whole Bunch of Amazing Stuff Pseudo Elements Can Do

9 Common Usability Mistakes In Web Design

List of Bootstrap Resources from Bootsnipp

Bootstrap 2.2.0 released

Becoming Device-Agnostic

A Closer Look At Font Rendering

HTML5 mythbusting

The Responsive Designer

Stop Thinking in Pixels: Improving Web Layout

#twiwt

This Week in Web Tech #14

Every week we post links about web technology and design to our Twitter feed. Once a week, we roll those links up into a blog post we call This Week in Web Tech.

Hacking Hacker News with @divshot and @lessneglect

Experimental 3D CSS dropdown.

Introducing Typeset.css for styling user-generated content

25 Useful Books For Web Designers And Developers

Do you like the infinite scrolling tweets on our homepage? Here's how we made 'em!

The Future of CSS Layout presentation at FoWD

Rails Rumble Winners - Gem Teardown

New Divshot Features! Page Templates, Project Folders and the CSS Editor

Fuel UX provides handy addons for Bootstrap

plusTabs collapses excess links to save space

Kwicks for jQuery: sliding panel effect plugin

Usability in Icons: Maybe that "link" icon isn't as obvious as you think.

Shadow DOM reaches working draft status. This is cool stuff.

Super in-depth look at native form validation with

CSS FilterLab: Play with CSS filters interactively.

BootMetro brings the Windows 8 look to the web, based on Bootstrap.

Why Password Masking Can Hurt Your Sign Up Form

Jster: A catalog of Javascript libraries.

Kick-Start Your Project: A Collection of Handy CSS Snippets

5 Really Useful Responsive Web Design Patterns

Enjoy the content? Follow us on Twitter for more web tech news!

#twiwt

Page Templates, Project Folders and the CSS Editor

October has been an incredibly productive month for the Divshot team! TechCrunch broke the news that we went into public beta. We took 2nd place at Rails Rumble for Revision.io, an easier way to manage your changelogs. I spoke at Mobile Camp LA on Sass and Michael will be speaking at RubyConf next week in Denver. Dozens of features, improvements and bug fixes were released throughout the month.

And now I'm pleased to announce a batch of brand new features for our beta users...

Page Templates

Use templates built by Divshot. Or even better, design your own. Start with a blank page. Clone an existing page. Build a master template. Reuse any page design. Consistency is key. You no longer have to worry about starting from scratch.

To designate one of your pages as a template, go to Page Settings. Check "Use Page as Template" and it will show up immediately in your template list when creating a new page. Enjoy!

Project Folders

Create unlimited pages with Divshot. Organize all of them into project folders quickly and easily.

Multi-CSS Preprocessing Editor

Style your apps with the world's first multi-CSS preprocessing editor. Use Sass, LESS, Stylus or vanilla CSS. Import Compass or Nib. Upon save your changes are reflected instantly.

And More!

Navigate faster in the DOM with Smart Outline. View component IDs and classes directly in the outline breadcrumbs.

Glyphicons can now be used in custom HTML and it's available via our hosted Bootstrap CSS.

New components including Image.

We have more exciting features in the pipeline that we can't wait to share with everyone. Stay tuned and tell your friends to check us out!

#features #announcement

Building a Pseudo-Infinite Tweet Scroller with jQuery and Masonry

Divshot's landing page showcases a board of our favorite tweets that scrolls automatically upon hover (or tap on mobile devices). In this article I'll show you how it was built and what we used to make it happen.

For full source code with an example and installation page visit the GitHub repo:

http://divshot.github.com/tweetscroller https://github.com/divshot/tweetscroller

To make things extra easy I bundled the code into a simple jQuery plugin. TweetScroller was written in CoffeeScript but a compiled JavaScript version is available in the repository.

Required Dependencies

To use the TweetScroller plugin you'll need the following plugins/libraries:

jQuery

Masonry - For stacking tweets on a dynamic board.

Handlebars - To render the tweet template.

Moment.js - To format tweet dates.

hoverIntent - For handling intentional hover events.

Pseudo-Infinite Tweets

Since we can only pull the latest 200 tweets our scroller appends the same tweets continuously to the board, providing the illusion of infinite scroll. As the tweets float away from sight we slowly remove them from the DOM while cloning and appending them again.

Here's how it's done. We iterate through all of the tweets currently in the DOM. First we clone each tweet and re-append to the board. Next we use the numeric index (i) to remove tweets under the total count - our initial count. So for example:

100 Tweets in DOM - 20 Initial Tweets Loaded = 80 Tweets to Remove

https://gist.github.com/3919803.js?file=tweetscroller-refresh.coffee

With this approach you'll continuously have more tweets in the DOM than visible on screen without DOM overload and page crashes.

Using the Twitter API

At the moment TweetScroller uses v1 of the Twitter API due to the authentication requirements in v1.1. On March 15, 2013 this version will no longer be available. We're planning a transition to the new API in the near future. In the code shown below we iterate through a collection of JSON tweets and compile the Handlebars template. Immediately after we append to our Masonry board:

https://gist.github.com/3919803.js?file=tweetscroller-pull.coffee

CSS3

Combining Webkit mask images with gradients gives us the opportunity to create awesome effects. I wanted to feather the top and bottom areas of the scroller so I used the following CSS:

https://gist.github.com/3919803.js?file=mask.css

Performance Considerations

Having a continuously scrolling container adding new elements to the DOM can potentially be resource-intensive, coupled with CSS3 effects like box shadows on each tweet. For this reason I kept the plugin CSS very simple and added several options to fine-tune your performance:

1) Speed: The scrolling interval as defined in milliseconds. Default is 30ms. 30-80ms is recommended. Any faster and CPU can increase. You can use Chrome's task manager to take a look and tweak the setting.

2) Autoplay: Set to false by default. Only use CPU resources when the user hovers over the board with hoverIntent or taps on it via mobile devices. I recommend leaving this setting off.

Enjoy!

That's TweetScroller in a nutshell! To learn how to get started check out http://divshot.github.com/tweetscroller. Have a question? Leave a comment.

#jquery #masonry #css3 #twitter

This Week in Web Tech #13

*Every week we post links about web technology and design to [our Twitter feed](http://twitter.com/divshot). Once a week, we roll those links up into a blog post we call **This Week in Web Tech**.* * We participated in the 2012 [Rails Rumble](http://railsrumble.com/entries/winners) and released [Revision.io](http://revision.io) a shareable changelog for software teams. We were honored to take 2nd place out of 500 teams! * [Splash Vector Graphics on Your Responsive Site](http://bit.ly/PwPCOe) * [A Simple Guide to Responsive Typography](http://bit.ly/QIQefN) * [7 Gorgeous Icon Fonts for Web Designers](http://bit.ly/RpamGD) * [The Future of Email Marketing and Newsletter Designs](http://bit.ly/RxilS6) * A List Apart talks about [Responsive Comping](http://bit.ly/QmIXRv), something Divshot can help make fast and easy. * [Symbolset](http://bit.ly/MDpw3H) uses OpenType to create amazing semantic symbol fonts (paid) * [How to Create Lazy-Loading Images for your Website](http://bit.ly/PDKuYq) * [Using Asymmetry in Web Design](http://bit.ly/R1qMlP) * [CSS and the Beautiful Future of Web Design](http://bit.ly/PEYgu4) * [Bootstrap Form Helpers](http://bit.ly/R9gfVH) * Jason Santa Maria on [Baseline Grids](http://bit.ly/Rb30nz) That's it for this week. If you want to keep up as we post, come [follow us on Twitter](http://twitter.com/divshot)!

#twiwt

# Divshot at the Rails Rumble This past weekend, team Divshot participated in (and sponsored) the [Rails Rumble](http://railsrumble.com) building [Revision.io](http://revision.io). We love hackathons and I wanted to demonstrate how Divshot can be used in a real world situation, so I screencasted myself using it throughout the competition. We ended up [taking 2nd place](http://railsrumble.com/entries/winners) out of 500 teams (which is very exciting for me, this was my fourth Rails Rumble!). Competing in hackathons is a way of eating our own dog food, of stepping back from *building* Divshot and have some time to just *use* it instead. In this case, I was doing the back end work and roughing out the front end and Jake was doing the detail work and polish (which are **super important** in a hackathon, by the way). I used Divshot to quickly build out enough of an interface that I could copy and paste the output into my text editor and wire it up to data. You can see in the video that many of the Revision.io interfaces turned out to be pretty close to their Divshot prototypes, while a couple evolved quite a bit after they were taken into a text editor. Divshot has come to be something that lives right next to my text editor. We've worked hard to make it easy to get useful, production-quality HTML out of Divshot and that means that I can just drop in, build something (whether it's a full page interface or just a piece like a form), and drop back out again. Of course we still have a lot of work to do, but I was happy to find that I really enjoyed using Divshot this weekend and it helped me to get more done faster, which is exactly the point!

#hackathons #case study #rails rumble

Trending Blogs

Recently Viewed Blogs

Divshot Blog