Notes

News, links, research, and product announcements from XOXCO in Austin, TX.

  1. Posts tagged javascript

  2. Weeknote for July 11, 2014

    We celebrated a very specific anniversary this week:

    A lot of the team has been traveling (or having a baby!!!) over the past couple of weeks but almost everyone is back now. We’ve been pushing like crazy on “El Grande Burrito” and we’re now THREE WEEKS out from finishing the project.

    We welcomed our newest team member, Paulette, this week. She’s going to be project managing, kicking ass, and keeping everyone on track.

    Our node-slack module - a nodejs module for sending and receiving messages from Slack -  got an update! Check out Ben’s work on that here. Thanks to Ben’s module, Slack sent our team socks!

    Eric was a writing machine this week. He wrote a great article on the differences between a product and project manager. He spoke at Refresh Austin on the same topic, and submitted a panel idea for SXSW 2015. (There are only two weeks left to submit ideas!)  And in between all of that, he’s been transitioning our clients over to the newest version of Packagr.

    Bushra made a thing in Cinema 4D. Suggestions on what she should turn it into? My vote is a showtunes-singing grilled cheese.

    AngularJS wowed the team again this week with its form validation tools. Like many other things that Angular just does for us, its form validation tools are built-in and active by default, and provide most of the functionality we need. So by using Angular, we get sensible, useful form validation that not only works but provides a clear path to future functionality that’ll be coming to browsers in the near future.

    Link Roundup

    If you didn’t see Eric’s post earlier this week on the team building a pixel derby taco truck, you should see the pictures!

    For Packagr enthusiasts, check out this article on using the Craft CMS Matrix to design custom fields for longform content.

     

    posted 2 months ago on Jul 11, 2014 | Permalink | 6 notes

  3. Ben Brown on the ATX Web Show Podcast

    Dave and Travis had me on their show to talk about Aware.js, Breakpoints.js, reader aware design, your back catalog of content, and Packagr. Learn the secrets of my career, hear me rant about blog archives, and as a special bonus, find out how our BBQ pit keeps their meat secure overnight.

    Listen here.

    posted 1 year ago on Mar 6, 2013 | Permalink | 5 notes

  4. Aware.js: Now Lunch Aware

    The core idea of reader aware design is that interactive experiences can and should respond to the specific characteristics of a user and their context. Previously, we discussed using details of a user’s relationship with a site — are they a first time visitor, or an every day regular? Now, we move beyond the site, breaking away from a user’s digital context to their analog, real life context: is this person at home? At work? In bed? At lunch? How can your site best serve readers in these different environments?

    To enable this kind of design, we’ve updated our reader aware design tool, Aware.js, to provide information about the reader’s local time of day. See a simple demo, or download the code from Github.

    Aware.js will now add CSS classes like “morning,” “earlyevening” and “latenight” to a site, empowering designers and developers to create variations in the design and content that relate to the natural cycle of the day. Tapping into these hints about the reader’s context outside of the computer screen will help to improve the visitor’s experience, and offers new opportunities to publishers who want to experiment with packaging and presenting their content for different use cases.

    With this new functionality, Aware.js enables features like:

    • Create subtle changes to the mood of the site that relate to the time of day - for example, changing the background color or header of the site to match the color of the sky outside.
    • Adjust the brightness or contrast of pages late at night, when users are likely to be reading in darker rooms.
    • Reflow content to create an “evening edition” of your site, highlighting the most important stories of the day.
    • Using Aware’s Javascript reader object, this information can be tied deeply into any web application, personalizing the app’s functionality or interface to be better tuned to the environment around it.

    Learn more about reader aware design, and get in touch with us to discuss how we can help your publication or application take advantage of these new techniques.

    posted 1 year ago on Jan 16, 2013 | Permalink | 4 notes

  5. 2012 Recap

    2012 was an enormously productive and successful year for XOXCO. Though we can’t discuss the details of the majority of our projects, here are some of the highlights:

    In January 2012, the brand new, responsive design that we built for The Grammy Awards launched. We worked with our friends at Lullabot on this project - they handled all the backend development, while we built a completely custom responsive Drupal theme from the ground up. See Grammys.com.

    Also in January, a new responsive design for Safari Books Online hit the web. We worked with Lullabot on this project too! See SafariBooksOnline.com.

    In March, April, May, June and July, the XOXCO team worked with REDACTED to create a Drupal-powered API server, and an HTML5 Chrome application client which used the Ember.js framework. You can read a bit about our experience with Ember here.

    In August and September, we worked again with Lullabot to create an HTML5 framework that powers 30 high profile mobile websites for REDACTED. Boy, do we wish we could talk about this one! We built a framework that allows each of these 30 sites to pull in their own set of data from a variety of structured data APIs, several of them providing real-time data, and to present all of this information in an app-like mobile website that can have its look and feel customized via a Drupal interface. Fancy!

    In October and November, we built an HTML5 magazine for REDACTED. The magazine is powered by a Drupal API on the backend, and a completely custom HTML5 client on the front end. The work we did on this magazine continued our exploration of using Drupal as an API server only, keeping all of the layout and content presentation in the HTML5 app.

    Finally, in November we launched a redesigned and rebuilt Pando Daily, and introduced the world to the idea of reader aware design - the idea that websites can and should look back at their readers. We followed this up with the release of Aware.js, a tool that lets any site become reader aware.

    Some broad lessons we learned in 2012:

    • The only job your CMS should do is manage content. Stop building PHP theme files and custom CMS plugin hacks to build your website, and let the CMS simply serve up content to a separate layout engine.
    • Responsive web sites are great, but technology is moving so fast, and device release schedules are so tight that even the fanciest media queries cannot keep up. Clients do not care about browser makers and OS versions - they simply want their content to arrive in perfect condition. Stop building web sites, and start building platform agnostic content delivery tools.
    • Responsive moves in both directions - much smaller screens AND much larger screens. We had two clients who wanted their sites to adapt from 300px wide all the way to 1800px wide.
    • Reverse chronological streams of content (that is, the blog format) don’t work as well as they used to. Readers demand personalized, curated and direct access to the content they care about - and that might mean serving them up something that is NOT the newest post.

    We are looking forward to new adventures in 2013. XOXCO will continue to work on new reader aware design tools and techniques, and we’ll be engaging directly with publishers to help them go beyond the limitations of their content management systems and traditional web publishing platforms to create exciting new digital experiences. Keep an eye on our blog for more!

    posted 1 year ago on Jan 2, 2013 | Permalink | 8 notes

  6. Aware.js: Make your site reader aware

    Last week, I wrote about the concept of reader aware design - the idea that our content websites can now look back at us and alter their layout to best suite our needs as readers without requiring us to login or create accounts.

    Today, I’m excited to announce the release of the first version of Aware.js, a jQuery plugin that implements many of these features, and enables developers to apply techniques first used in responsive design to these new reader contexts.

    What does Aware.js do?

    • Adds CSS classes to identify various classes of users: new visitors, repeat visitors, and repeat visitors who are making their first visit of the day.
    • Tracks time between visits, and makes this information available via Javascript
    • Flags content that is new to the reader for easy CSS styling.
    • Inserts relative bookmarks into the content stream to clearly indicate what a reader has already seen.

    Once implemented, developers can drastically alter the layout of their site using only CSS to accomodate a wide variety of reading scenarios. Combining these new CSS and Javascript tools with existing responsive design techniques unlocks a vast array of options for customizing the layout and content on a page to suite individual readers without requiring any server-side code or CMS template logic. View a demo of Aware.js in action here.

    Learn more, and download Aware.js here.

    We’re releasing Aware.js now to continue the conversation about reader aware design, and to collect feedback and suggestions from the community. What other information might Aware.js provide about a reader? How will you use these tools and techniques on your site? We’d love to hear from you - Send us a tweet to @XOXCO!

    posted 1 year ago on Nov 28, 2012 | Permalink | 47 notes

  7. Inspired by Peter Saville's incredibly famous album art for Joy Division’s Unknown Pleasures record, last night I made this JavaScript powered, touch-reactive  ”pulsar simulator.”
Click (or touch) and drag to create spikes in the graph to emulate the last gasps of a dying star. Or, just watch it as it creates a randomized, wobbling, moving homage to one of my favorite bands.

    Inspired by Peter Saville's incredibly famous album art for Joy Division’s Unknown Pleasures record, last night I made this JavaScript powered, touch-reactive  ”pulsar simulator.”

    Click (or touch) and drag to create spikes in the graph to emulate the last gasps of a dying star. Or, just watch it as it creates a randomized, wobbling, moving homage to one of my favorite bands.

    posted 1 year ago on Oct 19, 2012 | Permalink | 13 notes

  8. This weekend, I worked on a new code experiment - a multi-touch enabled semi-random polygon drawing tool. It creates polygon shapes that look sort of like endlessly unfolding paper. You can draw with your mouse or fingers, or you can have it draw randomly.
The original concept was to create a toy for my 6 month old daughter Zelda that would make cool looking shapes based on her spastic slapping of the iPad screen. Goal achieved!
Every time you add a new point to the drawing - by clicking, dragging, or tapping with a finger - the algorithm creates a new polygon by connecting your new point to 2 or more existing nearby points. This is how I achieved the folding paper effect.
When put into auto-draw mode, I add a tiny bit of wiggle to each point as the polygons are drawing, which lends a sort of frantic liveliness to the image as it is created.
Try it in your browser, or put it on your iPhone or iPad: It will create colorful, full screen images! You can save cool results as transparent PNG files, as seen above.

    This weekend, I worked on a new code experiment - a multi-touch enabled semi-random polygon drawing tool. It creates polygon shapes that look sort of like endlessly unfolding paper. You can draw with your mouse or fingers, or you can have it draw randomly.

    The original concept was to create a toy for my 6 month old daughter Zelda that would make cool looking shapes based on her spastic slapping of the iPad screen. Goal achieved!

    Every time you add a new point to the drawing - by clicking, dragging, or tapping with a finger - the algorithm creates a new polygon by connecting your new point to 2 or more existing nearby points. This is how I achieved the folding paper effect.

    When put into auto-draw mode, I add a tiny bit of wiggle to each point as the polygons are drawing, which lends a sort of frantic liveliness to the image as it is created.

    Try it in your browser, or put it on your iPhone or iPad: It will create colorful, full screen images! You can save cool results as transparent PNG files, as seen above.

    (Source: benbrown)

    posted 1 year ago on Oct 15, 2012 | Permalink | 2,592 notes

  9. Week 203

    This week, everyone at the company has been eyeball-deep in Ember, a Javascript framework that provides a MVC structure for application development. It is a tantalizing piece of software, as it provides things like automagically updating templates that are bound to the underlying data, and a beautifully clean and easy to understand syntax for creating layouts that are completely separate from the code and data.

    However, we’ve also got some concerns about the raw performance of Ember, especially on low-powered mobile devices. Our tests so far are inconclusive, but not particularly inspiring. Adding Ember’s 160k of Javascript seems to slow things down, and due to the black box nature of Ember’s internals, there is very little we can do to optimize. Also, Ember is a product in flux - just today, new documentation was posted to the Ember site which demonstrates a completely new and different method for architecting Ember-powered applications as compared to the documentation that existed yesterday. The new documentation no longer matches the existing API docs, and makes us nervous as hell. What is the right way to use Ember? Does the team behind Ember even know?

    As with any framework, there are tradeoffs, and we expected some complications to come along with the magical benefits Ember offers. Coding Ember applications is easier than building everything from scratch using jQuery, but performance and low-level optimization suffers. Overall, we’re going to be extremely cautious for now, and we’ll continue to explore alternatives like Backbone.js, which may offer a lot of the same benefits with less overhead and mystery.

    The whole team has been working together on our current big client project. Half the time is spent building a Drupal-powered content management and community moderation tool that exposes a RESTful JSON API to the outside world. The other half of our time is spent building an HTML5 client application that ingests information from the API and creates a dynamically generated interface to the features and content. We’re really excited about using Drupal in this way, as it provides the best and most flexible content management tools we’ve seen. And exposing all of the Drupal data via a JSON API means we do not have to spend time building a custom Drupal theme — all of the customer facing screens are built in the HTML5 client. This allows us to separately develop and scale these two components separately, and means that it will be substantially easier to build new clients that talk to the same server APIs. And most importantly, it means that nobody at XOXCO will ever have to spend time mucking about with PHP template files!

    This project runs through mid-July, and then we’ll be spending some time as a team to finish up Damien’s creation, code named “Sharky.” We’ve also got an exciting R&D project ongoing that we hope to debut in coming weeks. More on that soon.

    In the meantime, I’ve been interviewing candidates for our design position, as well as for our summer internship. I’m very pleased with every single person I’ve interviewed, and I’m sure this will prove to be a very difficult choice to make. Through this process, I’ve honed my description of how we work at XOXCO and what we hope to achieve as a company, and it is very gratifying to hear from candidates that it sounds like a fun, creative place to work. I am still interviewing candidates, so if you are a designer in Austin looking for a crazy new place to spend your days, get in touch!

    That’s it for week #203 of XOXCO, Inc.

    posted 2 years ago on Jun 8, 2012 | Permalink | 1 note

  10. We’re using Handlebars.js as the Javascript templating engine for a new project. It is a lot easier to work with than jQuery’s template options, which I seem to always fight with. 

    Handlebar has easy to use iteration, conditionals, and sub-templates. For this project, I was able to render the entire interface with one JSON object and one big template.

    posted 2 years ago on May 17, 2012 | Permalink

  11. I’ve put up a new page for people who want to get in touch about our open source code. I love to hear from people using our code in their projects. It happens three or four times a day, and normally goes something like this:

I love your code, it is very handy, thank you. On my locally hosted website, under this one weird circumstance, it doesn’t work. Can you help? Please help!

Yes! I can help! But first, you must help yourself a little bit, hopefully in a way that helps everyone else who uses the code too.
To make it easier for people to get in touch about problems in a way most likely to get a quick and meaningful response, I am making a series of jsFiddle demo pages - Tags Input, Rainbow.js!!! -  that present a controlled environment so that developers can demonstrate the issue they are having in a place I can actually see it running. The demo pages also include instructions on how to contact us once the problem has been recreated.
The jsFiddles double as a handy way to demonstrate the code in a compact, editable form. I’ll be adding links to these fiddles to all of the Github projects.  jsFiddle is a great tool!
What do you think? This effort is based on desandro’s issue agreement, and the fact that I really do get 4 support requests from very nice people who I would like to help, every single day. What are other good examples of helping people ask for help in a more productive way?

    I’ve put up a new page for people who want to get in touch about our open source code. I love to hear from people using our code in their projects. It happens three or four times a day, and normally goes something like this:

    I love your code, it is very handy, thank you. On my locally hosted website, under this one weird circumstance, it doesn’t work. Can you help? Please help!

    Yes! I can help! But first, you must help yourself a little bit, hopefully in a way that helps everyone else who uses the code too.

    To make it easier for people to get in touch about problems in a way most likely to get a quick and meaningful response, I am making a series of jsFiddle demo pages - Tags Input, Rainbow.js!!! -  that present a controlled environment so that developers can demonstrate the issue they are having in a place I can actually see it running. The demo pages also include instructions on how to contact us once the problem has been recreated.

    The jsFiddles double as a handy way to demonstrate the code in a compact, editable form. I’ll be adding links to these fiddles to all of the Github projects.  jsFiddle is a great tool!

    What do you think? This effort is based on desandro’s issue agreement, and the fact that I really do get 4 support requests from very nice people who I would like to help, every single day. What are other good examples of helping people ask for help in a more productive way?

    posted 2 years ago on May 9, 2012 | Permalink

  12. Next »

Receive XOXCO's curated broadcast of original essays and links about product design, publishing, and software. Featuring exclusive links to experimental software and limited edition digital downloads.