Singlebrook Technology Singlebrook Technology Blog Posts Getting Twiggy With It <p><em>Converting your Drupal Theme to Drupal 8: Part 1</em> </p> <p><em>by Dustin LeBlanc</em> </p> <p>My last article <a href="">Modernize Your Drupal Theme</a> tackled adding some modern touches to your legacy Drupal themes such as SCSS and Compass. With Drupal 8 on the horizon, Drupal theming is changing in some substantial ways. I'd like to take a look over the course of a few posts at the process of converting a current Drupal 7 theme to work with Drupal 8.</p> <p>Along with some structural changes to how theme packages are laid out, one of the major changes in Drupal 8 theming is the switch from PHPTemplate to Twig for creating your page templates. At first it sounds scary; especially if you feel like you just finally learned PHP and theming for Drupal 7. The truth is, templating in Twig is no harder than templating in PHPTemplate, in fact the syntax and changes to Drupal's theming variables is probably some what easier.</p> <p>In this article I want to look at a simple example; the header portion of Singlebrook's <a href="">Drupal Streamline Theme page.tpl.php file</a>:</p> [script src=""][/script] <p>This is the old page.tpl.php of our Drupal 7 starter theme. It is really generic and we significantly alter it for each project but it gets the job done for our purposes today. We see a typical interspersion of PHP and HTML here. You can make a template a lot simpler than this, and we frequently do. For themes that don't need the logo, site name, and slogan to be edittable on the backend (and really, unless you are distributing a theme for contrib use, most folks don't need this). For illustration, I am leaving all this in the gists so that we can see more of the twig variable and function use.</p> <p>So to summarize what we have above; first we open with an HTML header tag and give it a unique role on line one;&#160;then we have a php conditional block that takes care of rendering our site logo if we are using one (in a default Drupal install this is our friendly drop logo) on lines three through seven. </p> <p>We are making some calls to find out if the variable '$logo' is defined, and if it is we are then printing an anchor tag that links to our home page (again using our Drupal variables), printing our logo, adding some other info like titles and alt tags (making sure to sanitize them and make them available to be translated with the t() function) and closing the conditional with the 'endif' php tag.</p> <p>For a front end themer this can be a pain, understanding some of the ternary operator short tags here isn't immediately obvious. For the developer who jumps back and forth between front end and back end Drupal work, seeing PHP everywhere tends to make us want to put PHP everywhere (probably places we shouldn't!).</p> <p>This covers the basics of how we theme for drupal in Drupal 7, we are using html and interspersing some php to call variables from the system to render them into our layouts. We can do some nice things like call assets from our theme directory using some drupal specific functions for path definitions or some global varibles that the system already tracks for us. In Drupal 8, things are going to be very similar, just with some new syntax and some tweaks to the variables available to us. Here is a gist of the same section from the Drupal 8 port of the same theme:</p> [script src=""][/script] <p>The first thing you will notice is that there is no PHP here. We start with the same opening header tag and we tackle our friend the logo on lines three through seven again.</p> <p>You can see some of the syntax changes here, for instance we are using Braces with percent symbols for our control structures and we are using 'mustaches' for inserting variables in our template. Look at line 4 to see how much shorter and more readable the syntax has become.</p> <p>You can get some more information about the twig templating system <a href="">here</a>.</p> <p>For developers who are coding PHP for module development and then also theming using twig this might mean a little bit more mental seperation. I swear I will want to type <code>t('foo')</code> rather than <code>'foo'|t</code> for a while yet.</p> <p>The other good news here for Drupal developers is that the twig templating engine is also the default for the Symfony2 framework. This means that learning to develop for Drupal is becoming a bit more of a cross-training skill than it has been in the past.</p> <p>Make sure when you convert your files that you rename all your <code>.tpl.php</code> files to <code>.html.twig</code> so that Drupal 8 will recognize them.</p> <p>That pretty much covers the basics of changing template files from Drupal 7 to Drupal 8. The only other difference is that there are some changes in which variables are available in Drupal 8 theming, the easiest way to see the basics here is just to scope out what was changed in Bartik and copy those changes; or alternatively, take a look through my <a href="">page.html.twig</a> for the Drupal 8 fork of Drupal Streamline.</p> <p>Next time we will take a look at converting your template.php to a THEME_NAME.theme file. For really basic template.php files this is a cake walk, for more complicated ones, you might be for some late night coffee action.</p> <p>Stay tuned!</p> Tue, 22 Apr 2014 15:15:00 +0000 Tech for Change: Leo Bonanni, Sourcemap <h3>Singlebrook talks with Sourcemap CEO and Founder Leo Bonanni about his social network for supply chain visibility. His crowdsourced platform is mapping global supply chains, allowing companies to measure their global impacts and become more resilient to disruptions caused by global events like natural disasters. </h3> <p><strong>Singlebrook: </strong>Please give a brief overview of what your organization does.</p> <p><img src="" title="Sourcemap" alt="Sourcemap" rel="150x200" width="150" height="150" style="float:left;clear:left;margin-right:15px;" />In recent years, it’s become pretty clear that organizations need visibility into their supply chains, whether it’s because of natural disasters, social and political unrest, or sustainability efforts. Sourcemap is a website that’s dedicated to answering the question of “where things come from”. It's a crowdsourced platform like Wikipedia, except instead of encyclopedia articles, there are thousands of maps showing the sources of the raw materials behind everyday products.</p> <p>Sourcemap provides a custom built social network for organizations to communicate with their extended supply chain. It works a lot like LinkedIn, where a company invites their direct suppliers, who then invite their suppliers, and so on. At that point, a company has visibility into the real source of raw materials. Any company that wants to put itself on the map and tell the world about its supply chain can do it for free. </p> <p><strong>SB:</strong> Who is using the platform now?</p> <p>Our platform is used by manufacturers, NGOs, public sector groups--basically anybody who wants a better handle on their supply chain. Our most far-reaching work is to try to connect people across global commodity supply chains where there is sometimes a lack of visibility and some potential for social and environmental problems as a result. </p> <p>One such project is a platform we’ve been developing for Mars Chocolate, essentially to connect the purchasing and sustainability managers directly with farmers and farm organizations in West Africa. That direct connection happens through our software and through Android phones that are deployed in the field, and it allows them to have near-real-time visibility into the social, environmental and financial conditions on the ground. </p> <p><strong>SB:</strong> How did you come up with the idea for Sourcemap? </p> <p>In 2008-2009, a lot of people started to take seriously the idea of carbon labeling and the idea that consumers would be able to compare products by comparing their environmental impact. When I tried to do that, to evaluate the impact of products as part of my research at the MIT Media Lab, I realized there was a big piece of data missing.</p> <p>If you don’t know where products come from, you can’t measure their environmental impact or their social impact. I set out to solve the problem of supply chain visibility as a research project and quickly realized that supply chains are vast social networks that also include hundreds of thousands of individuals and companies needed to make a single product. The approach that I took and that my team developed with me is basically crowdsourcing--allowing people to communicate through a social network. </p> <p>We set out making this tool a little before the market asked for it. In 2011, the tsunami that hit Japan had devastating consequences globally. We realized that this project had a lot of potential use for companies that had never before realized their vulnerability to events and disruptions halfway around the world. We spun out of MIT into a startup, and since then, we’ve been developing and installing our software for organizations to give them that real-time connection. </p> <p><strong>SB:&#160;</strong>What have been a few of the biggest challenges you’ve faced and how did you handle them? </p> <p><img src="" title="Laptop Supply Chain Map" alt="Laptop Supply Chain Map" rel="450x450" style="float:left;clear:left;margin-right:15px;" width="450" height="206" />A big challenge has been that a lot of organizations have not put in place the data that they need to actually map their supply chain. Over and over, big companies and manufacturers don’t have a firm grasp on who their suppliers are. They don’t have a central database where all the addresses and contact information is stored. </p> <p>We’ve created a new business process for organizational readiness to prepare companies to actually map their supply chains. We bring tools to them that help evaluate risk and evaluate environmental and social sustainability. A lot of companies want to make a positive impact on the world, they just don’t have the data needed to actually measure their current impact and what they would need to do to improve it. </p> <p>We’ve almost entirely focused our software on facilitating that task and allowing them to collect data faster and cheaper than ever before. We work very closely with our customers to welcome them and their suppliers to the platform, to train everybody and support them in this new endeavor to map supply chains. We have a support staff that works closely to configure systems so that they make sense for each organization. We do it all remotely from our offices in the US because every supply chain is global and we have customers all over the world. </p> <p><strong>SB:</strong> What channels have you found to be most effective in attracting attention for your platform?</p> <p>We’re the only supply chain company with a public-facing website where anybody can register and see thousands of industrial supply chains and understand how things are made. That free website is being used by millions of people and it’s the main way that people find out about Sourcemap and understand how vast supply chains are and how important it is to measure their impact. If it wasn’t for that crowdsourced platform, we wouldn’t exist. </p> <p>Having millions of online users has taught us a lot about building intuitive software and making it possible for people who’ve never thought about supply chains before to effectively measure and tackle their impact. </p> <p><img src="" title="Toms Fullscreen" alt="Toms Fullscreen" rel="450x450" width="450" height="400" style="float:left;clear:left;margin-right:15px;" /><strong style="background-color: transparent;">SB:</strong> How do companies address issues within their supply chains if something goes wrong or a supplier is doing something unsustainable? </p> <p>One of the things we’re discovering is that companies want to measure their impact. So, when one of our customers invites their suppliers to share information about their carbon footprint or their water usage or their waste, we find the suppliers are generally very receptive because, in many cases, it’s the first time they’ve measured their environmental impact, and it’s the first time they can benchmark their performance against their competition. </p> <p>While it sometimes brings up less-desirable aspects of a company’s performance, we find that both sides benefit. Our customers benefit because they can understand their overall impact, and their suppliers benefit because they can understand which areas to improve. </p> <p><strong>SB:</strong> That seems to be an area where some real change can occur within the suppliers’ operations.</p> <p>It is. We’re seeing companies make their purchasing choices informed by the triple bottom line: the social, the environmental and the financial aspect. This data collection--in the beginning it’s a way to understand the impact of a company’s global operations--but in the subsequent years that they refresh the data, we find that companies are actually making different purchasing choices based on triple bottom line metrics. </p> <p>SB: What advice do you have for aspiring social entrepreneurs?</p> <p>I think social entrepreneurship is the future of all entrepreneurship. The new generation of job seekers is looking for work that has a positive social impact in addition to other benefits. Everybody needs to now formulate their company in terms of what positive social impact it will bring. </p> <p>That also means you can start a company very lean and very quickly if you have a social mission well-defined because that’s going to be the way to attract team members. It’s also going to be what attracts customers. Our customers have all come to us because they have an underlying social mission or corporate social responsibility agenda. They’re looking for technology providers that share that vision with them. </p> <p><strong>SB:</strong> What is your “ask” of the community at this point in your venture? </p> <p>We’re always on the lookout for socially conscious, motivated programmers to join our team in NY and in Boston. We’re also looking for analysts that would like to work with our customers for onboarding around supply chain visibility. And finally, if you know of any businesses or organizations that want to map their supply chain, you can direct them to our free website: <a href="" title="" target="_blank"></a>. </p> <p>***</p> <p>Singlebrook’s Tech for Change (T4C) campaign spotlights entrepreneurs and organizations that are using technology in unique ways to scale their ideas and create a massive impact. We are also creating our own high impact T4C projects. Check them out at: <a href="" title="" target="_blank"></a>. Share your stories of T4C or other inspirational resources and tips on Twitter (<a href="" title="" target="_blank">@Singlebrook</a>) using <a href=";src=typd" title=";src=typd" target="_blank">#Tech4Change</a> and on the <a href="" title="" target="_blank">T4C Facebook group</a>, or <a href="/contact" title="Contact">contact us</a> to be spotlighted in an upcoming feature interview or blog article! </p> Mon, 21 Apr 2014 20:22:00 +0000 Heartbleed Bug Recommendations <p>Most of you have probably already heard of the "<a href="" title="" target="_blank">Heartbleed Bug</a>", an extremely serious security vulnerability announced this week that affects <a href="" title="" target="_blank">large swathes of the internet</a>. Incredibly, the bug has been around since&#160;March 2012, and unfortunately it is difficult or impossible to tell if any particular site has been exploited.</p> <p>Here are our recommendations for securing your sites and servers and protecting your data and your users, in order of importance:</span> </p> <ol><li><strong>Assess your current vulnerability.</strong> You can check to see if your site is currently vulnerable with <a href="" title="" target="_blank">this tool</a>. Note that your server may be vulnerable to attack even if you don't use or require SSL on your site.</li> <li><strong>Ensure that your servers are running a patched version of OpenSSL</strong> (or an older version from before the bug was introduced). We can help you with this, and if you're a Singlebrook customer, chances are good that we've already taken care of this step for you.</li> <li><strong>Install re-issued SSL certificates. </strong>Heartbleed made it possibile to steal servers' private keys, so even if your server is patched, an attacker who has your private key can still decrypt your users' data in transit. Replacing your SSL certificate protects your data in transit for the future. Re-issues of your certificate are typically free with most SSL vendors, but it will take us between 30 minutes and 2 hours to request, approve, and install each new certificate.</li> <li><strong>Reset all user sessions</strong>, requiring that they log in to your site anew.</li> <li><strong>Force all users to reset their passwords.</strong> </li> <li><strong>Notify your users</strong> of the actions you've taken to protect them and their data. Be sure to mention whether your site was vulnerable and for how long. If your web server has SSL, and was using an up-to-date OpenSSL, you've probably been vulnerable for about two years (or the life of the server, whichever is shorter).</li> <li><strong>Reset your passwords</strong>, and use a different password for each account. This is a great time to add a password manager to your toolset, like <a href="" title="" target="_blank">1Password</a>&#160;or <a href="" title="" target="_blank">LastPass</a>.</li> </ol> <p>We can help you with these steps. We consider steps 1 and 2 to be absolutely required. Steps 3 and 4 are very strong recommendations if your server was vulnerable to Heartbleed at any time. Steps 5, 6, and 7 are recommended, but optional.</p> Wed, 09 Apr 2014 16:24:00 +0000 Singlebrook Annual Report <p><a href="/system/resources/W1siZiIsIjIwMTQvMDQvMDcvMTgvMDMvMTIvODQxL1NpbmdsZWJyb29rXzIwMTNfQW5udWFsX1JlcG9ydF93ZWJfZmluYWwucGRmIl1d/Singlebrook%20-%202013%20Annual%20Report%20-%20web_final.pdf" title="Singlebrook 2013 Annual Report Web Final"><img src="" title="Sb Values" alt="Sb Values" rel="225x255" width="191" height="255" class="image-align-left selected_by_wym" style="background-color: transparent;" /></a>&#160;We're happy to share our Annual Report! <a href="/system/resources/W1siZiIsIjIwMTQvMDQvMDcvMTgvMDMvMTIvODQxL1NpbmdsZWJyb29rXzIwMTNfQW5udWFsX1JlcG9ydF93ZWJfZmluYWwucGRmIl1d/Singlebrook%20-%202013%20Annual%20Report%20-%20web_final.pdf" title="Singlebrook 2013 Annual Report Web Final">Download the PDF here.</a> </p> <p>This report serves as an overview of some of the milestones that we hit in 2013, and a look at where we’re headed!</p> Mon, 07 Apr 2014 17:56:00 +0000 Food, Fun and Frugal Glass: Our Visit to SXSW <p>By Elisa Miller-Out</p> <p>This spring, our Director of Business Development, Jo Opot and I attended SXSW Edu and SXSW Interactive in Austin. Here are some of the highlights of our trip.</p> <ul><li>The best part of SXSW by far is the community and the opportunity to connect with lots of amazing, brilliant entrepreneurs and educators who have assembled to share their ideas about innovation. We enjoyed meeting folks such as Heather Hiles from <a href="" title="" target="_blank" style="background-color: transparent;">Pathbrite</a> and Althea Erickson from <a href="" title="" target="_blank" style="background-color: transparent;">Etsy</a>. </li> <li>Spontaneous networking was effortless thanks to the Hilton lobby, break rooms and receptions where we met with&#160;<a href="" title="" target="_blank">Learning Bird</a>, <a href="" title="" target="_blank">Simple</a>,&#160;<a href="" title="" target="_blank">Tuscarora Unit 11</a>, <a href="" title="" target="_blank" id="wym-1395847522939">Culture Booster</a> and <a href="" title="" target="_blank">Rada Film Group</a>.</li> <li>We connected with some of our <a href="" title="" target="_blank" style="background-color: transparent;">B Corp</a> friends such as <a href="" title="" target="_blank" style="background-color: transparent;">Provoc</a>, <a href="" title="" target="_blank" style="background-color: transparent;"></a> and <a href="" title="" target="_blank" style="background-color: transparent;">MightyBytes</a> at the B Corp Meetup. </li> </ul> <img src="" title="B The Change Profile Picture" alt="B The Change Profile Picture" rel="225x255" width="180" height="180" /><ul><li>We attended "Women Who Whiskey" and brunch meetups with the <a href="" title="" target="_blank" style="background-color: transparent;">Tech Lady Mafia</a>.&#160;</li> <li>I can't stop thinking about those breakfast tacos from <a href="" title="" target="_blank" style="background-color: transparent;">Torchy's.</a>&#160;I can't believe I have to wait another year before I can have more of them! </li> <li>Thank you Steven Freidmutter of <a href="" title="" target="_blank">Cornell University</a> for the insiders guide to SXSW and thank you Andrew Schmidt of <a href="" title="" target="_blank">Puma</a>&#160;for introducing us to the best rib joint, Iron Works.&#160;Does anyone know if they can Fedex a ribs platter to the North East?</li> <li>The bar at the <a href="" title="" target="_blank" style="background-color: transparent;">Four Seasons</a> was a great place to meet all our new friends and a good place for celebrity sightings as well.</li> <li>We are still trying to figure out how the manager at <a href="" title="" target="_blank">Palm Door </a>managed to coordinate a simultaneous live Mariachi band, bouncing castle, live blue grass band, a salsa/80s/hip-hop DJ, open bar and late night fajita extravaganza.</li> <li>I stopped by the&#160; <a href="" title="" target="_blank" style="background-color: transparent;">Daily Juice</a> Cafe to grab a smoothie and some hippy treats. It made me feel a little like I was back home in Ithaca. </li> <li>Google Glass was, of course, the essential wearable tech accessory for most people at the conference. Let's face it--they do look a little funny. I really enjoyed the 3D printed version that Jennifer Turliuk invented called "Frugal Glass".</li> </ul> <p><img src="" title="Rotated" alt="Rotated" rel="225x255" width="191" height="255" /></p> <ul><li>Some of the tech trends that I noticed in the festival content included: wearable tech, human centered design, the internet of things and smart home devices, open data in government, digital currencies, tech enabled activism and more.</li> <li>The most useful SXSW app was <a href="" title="" target="_blank">Connect</a> from Ryan Allis and Anima Sarah Lavoy. Connect maps where your facebook, LinkedIn and other network friends are at any given moment. Exactly what you need at such a large event.</li> <li>It was also fun to also connect with our friends from <a href="" title="" target="_blank">Upstate Venture Connect</a>, <a href="" title="">StartFast</a>&#160;and the CNY tech community.</li> <li>I missed <a href="" title="" target="_blank">Student Startup Madness</a> this year, but heard that it was a great event. </li> <li>Kudos to Peter Nilsson of Athena and Heather Hiles for remarkably emceeing <a href="" title="" target="_blank">LAUNCHedu</a>&#160;and congrats to the winners.&#160;</li> <li><a href="" title="">Crossfit Central Downtown</a> was just a few blocks from the convention center, so I managed to fit in my Crossfit Games Open workout in between sessions. </li> <li>I love all the eco-friendly bike taxis. That was my favorite way to get around the festival. </li> <li>I'm really excited about the launch of the <a href="" title="" target="_blank">SXSW Cookbook</a> by the awesome founder of Cookbook Create: Anna Curran.</li> <li>Austin food trucks are so much fun. My favorite: <a href="" title="" target="_blank">The Peached Tortilla</a>. </li> <li>Finally, SXSW wouldn't be complete for me without a trip to Esther's Follies to hear some amazing comics such as <a href="" title="" target="_blank">Kumail Nanjiani</a>&#160;and a night cap at the&#160;<a href="" title="" target="_blank">Driskill</a>.</li> </ul> <p>Can't wait till next year's festival!!</p> Mon, 24 Mar 2014 18:41:00 +0000 Tech for Change: Drupal for Job Seekers Workshop <p>One way that we live our mission of Tech for Change at Singlebrook is through company-sponsored volunteer time for employees to give back to the communities we serve. A recent T4C initiative was a&#160;free workshop called "Drupal for Job Seekers" that we offered to the&#160;local Ithaca community.&#160;</p> <p>The goal of the Drupal for Job Seekers workshop is to teach workers considering a career move into the tech industry about the possibilities created by learning a technology like Drupal. We held the workshop at&#160;<a href="" title="" target="_blank">Southside Community Center</a>&#160;and&#160;got some&#160;help from Southside and <a href="" title="" target="_blank">Workforce New York</a>&#160;in spreading the word to attendees, many of whom were unemployed or underemployed.&#160;</p> <p>Here's the pitch we used to recruit attendees:</p> <p><span class="quote"><span class="quote"><span class="caption"><span class="attribution">With minimal computer skills and a little training, you can get a job building websites using Drupal. The Drupal platform is quickly growing in popularity. Local employers, including Cornell and Ithaca College, are hiring Drupal site content managers now! Join Singlebrook developer Lauren Kelly for a free training that explains what Drupal is, how to gain Drupal skills, and how these skills will help get or improve a job. Includes a demo and some hands-on work. </span> </span> </span> </span> </p> <p>10 people attended the workshop, with our talented Drupal developer Lauren Kelly leading the class. True to Murphy's Law, moments before the workshop began, the community center's internet went down. Lauren was able to engage the group with a presentation and follow up discussion on the following Drupal topics:</p> <ul><li>Where it fits in as a job role&#160;</li> <li>How it will help get or improve a job</li> <li>How it fits in as a development tool</li> <li>Prerequisite skills needed</li> <li>How to gain Drupal skills</li> </ul> <p>Unfortunately, the hands-on portion of the workshop (demo/show-and-tell, creating a node and a page) was not possible. We provided a handout for attendees to do some exploration and continued learning at home.&#160;<a href="/system/resources/W1siZiIsIjIwMTQvMDMvMDYvMjAvNTQvMTEvNDY2L0RydXBhbGZvckpvYlNlZWtlcnNSZXNvdXJjZUhhbmRvdXQucGRmIl1d/DrupalforJobSeekersResourceHandout.pdf" title="Drupalfor Job Seekers Resource Handout" style="background-color: transparent;">The handout is available as a PDF here.</a>&#160; </p> <p>Despite the technical difficulties, the group had positive feedback about the workshop. Our hope is that the job seekers in attendance were encouraged to take the next steps in learning Drupal and, ultimately, that they will use their new skills to land a great job.&#160;</p> <p>If you are interested in hosting or organizing a Drupal for Job Seekers workshop with us, please get in touch!</p> <p><img src="" title="Drupal For Job Seekers 13.11.21" alt="Drupal For Job Seekers 13.11.21" rel="450x450" width="450" height="338" /></p> Thu, 06 Mar 2014 20:29:00 +0000 Simplify your JavaScript with Underscore.js <p><em>by Gennie Harris</em> </p> <p>Underscore.js, as described on their <a href="" title="" target="_blank">website</a>, is "a utility-belt library for JavaScript that provides a lot of the functional programming support that you would expect in Prototype.js (or Ruby), but without extending any of the built-in JavaScript objects." </p> <p>Simply put, this means that you can drastically transform your arrays, objects, and functions with only a line or three of code, making underscore arguably the single most useful JavaScript library ever written.</p> <h3>What it gives you</h3> <p>Let's say, for example, that you're doing some work on your Joss Whedon fan site, for which you have some data structured along these lines:</p> <pre><code>var jossWhedon = { age: 49, occupations: ["writer", "director", "producer", "composer", "actor"], shows: [ { title: "Dollhouse", femaleLead: true, characters: [ { name: "Echo", role: "doll" }, { name: "Topher", role: "mad scientist" } ] }, { title: "Dr. Horrible's Sing-Along Blog", characters: [ { name: "Billy", role: "mad scientist" }, { name: "Penny", role: "love interest" } ] }, { title: "Buffy the Vampire Slayer", femaleLead: true, characters: [ { name: "Buffy", role: "slayer" }, { name: "Angel", role: "love interest" } ] }, { title: "Firefly", characters: [ { name: "Mal", role: "captain" }, { name: "Kaylee", role: "mechanic" } ] } ] } </code> </pre> <p>How can you easily manipulate this data to sort and display it in the various ways necessary to run a successful site? Underscore provides over 80 functions, which do everything from basic mapping of arrays (<strong>map</strong>, of course) to creating "flexibly-numbered lists of integers" (<strong>range</strong>), to inverting the keys and values of an object (<strong>invert</strong>). Though you may find edge cases in which dozens of these become useful, there are a few that you'll find invaluable time and time again.</p> <h4>Pluck</h4> <p>One of the most convenient of Underscore's functions, <strong>pluck</strong> creates an array of property values. This is excellent for displaying or manipulating subsets of data. Want to see a human-readable list of the shows that Joss Whedon’s worked on, for example? With straight JavaScript, we’d probably do something like this:</p> <pre><code> { return show.title; }); =&gt; ["Dollhouse", "Dr. Horrible's Sing-Along Blog", "Buffy the Vampire Slayer", "Firefly"] </code> </pre> <p>This isn’t so bad, but <strong>pluck</strong> allows us to simplify it even further:</p> <pre><code>_.pluck(jossWhedon.shows, "title"); =&gt; ["Dollhouse", "Dr. Horrible's Sing-Along Blog", "Buffy the Vampire Slayer", "Firefly"] </code> </pre> <h4>FindWhere</h4> <p><strong>findWhere</strong> returns the first value in a list that matches all of the listed key-value pairs. This can be useful for returning an object based on a dynamic value such as user input. So if we wanted to find a show based on its title, we would something like this without Underscore:</p> <pre><code>for (var i = 0; i &lt; jossWhedon.shows.length; i++) { if (jossWhedon.shows[i].title === "Firefly") { var show = jossWhedon.shows[i]; } } =&gt; {title: "Firefly", characters: Array[2]} </code> </pre> <p>Or we could shorten this into a single line of code using Underscore’s <strong>findWhere</strong>:</p> <pre><code>var show = _.findWhere(jossWhedon.shows, {title: “Firefly”}); =&gt; {title: "Firefly", characters: Array[2]} </code> </pre> <h4>Reduce</h4> <p><strong>Reduce</strong> condenses a list of values into a single value, just like JavaScript’s native <strong>reduce</strong> method (in fact, Underscore delegates to native methods when available). We can use it here to give us one array containing all of Whedon’s characters. It doesn’t look too different from non-Underscore <strong>reduce</strong>:</p> <pre><code>_.reduce(jossWhedon.shows, function(memo, show) { return memo.concat(show.characters); }, []); =&gt;[{ name: "Echo", role: "doll" }, { name: "Topher", ... }, { name: "Billy", ...}, ...] </code> </pre> <p>Why bother using Underscore’s methods where there are native equivalents? Aside from maintaining consistency across your code, you also gain the benefit of backwards compatibility with older browsers that may not support these native methods.</p> <h3>What you can do with it</h3> <p>Underscore's functions are useful enough on their own, but it's really when you chain them that you can start doing some powerful stuff.</p> <h4>Whedon’s Heroines</h4> <p>Let’s say you want to generate an array of all shows with female leads. Without Underscore, you’d end up with something that looked like this:</p> <pre><code>jossWhedon.shows.filter(function(show) { return show.femaleLead; }).map(function(show) { return show.title; }); =&gt; ["Dollhouse", "Buffy the Vampire Slayer"] </code> </pre> <p>This works, but it’s a little clunky. We can slim it down with Underscore:</p> <pre><code>_.pluck(_.filter(jossWhedon.shows, function(show) { return show.femaleLead; }), "title"); =&gt; ["Dollhouse", "Buffy the Vampire Slayer"] </code> </pre> <p>Here we use <strong>filter</strong> to find the shows that have a female lead, and then <strong>pluck</strong> to extract their titles.</p> <h4>Counting Characters</h4> <p>What if you want to show some statistics on character distributions in the Whedonverse? How many love interests are there, for example, or how many slayers? With straight JS you might do something along these lines:</p> <pre><code>jossWhedon.shows.reduce(function(memo, show) { show.characters.forEach(function(character) { (!memo[character.role]) ? memo[character.role] = 1 : memo[character.role]++; }); return memo; }, {}); =&gt; {doll: 1, mad scientist: 2, love interest: 2, slayer: 1, captain: 1, mechanic: 1} </code> </pre> <p>Instead of using <strong>reduce</strong> to create our object, manually cataloging each role and then counting additional instances, we can use a single line of Underscore to achieve the same thing:</p> <pre><code>_.countBy(_.flatten(_.pluck(jossWhedon.shows, "characters")), "role"); =&gt; {doll: 1, mad scientist: 2, love interest: 2, slayer: 1, captain: 1, mechanic: 1} </code> </pre> <p>We use <strong>pluck</strong> to pull the character arrays from each show and <strong>flatten</strong> to condense them into a single array. Then we can use Underscore’s <strong>countBy</strong> method to catalog the instances of each role.</p> <h4>Mad Scientists? Muahaha!</h4> <p>Finally, let's catalog all the mad scientists that Whedon features in his shows. If we want a single object with each pertinent show as a key and its mad scientist as its value, our JavaScript might get a little unwieldy:</p> <pre><code>var isMadScientist = function(character) { return character.role === "mad scientist" }; jossWhedon.shows.reduce(function(memo, show) { if (show.characters.some(isMadScientist)) { show.characters.forEach(function(character) { if (isMadScientist(character)) { memo[show.title] =; } }); } return memo; }, {}); =&gt; Object {Dollhouse: "Topher", Dr. Horrible's Sing-Along Blog: "Billy"} </code> </pre> <p>We can achieve the same results with very similar methods in Underscore, but the resulting code ends up a lot cleaner:</p> <pre><code>var isMadScientist = function(character) { return character.role === "mad scientist" }; _.reduce(jossWhedon.shows, function(memo, show) { if (_.some(show.characters, isMadScientist)) { memo[show.title] = _.detect(show.characters, isMadScientist).name; } return memo; }, {}); =&gt; Object {Dollhouse: "Topher", Dr. Horrible's Sing-Along Blog: "Billy"} </code> </pre> <p>Here we’re using <strong>reduce</strong> again to condense our shows into a single mad-scientist-riddled object. For each show, we’re first checking if it has a mad scientist using <strong>some</strong> and our <strong>isMadScientist</strong> function. For each show that does indeed contain an evil genius, we find that character using <strong>detect</strong>, and then use their name as the value for the appropriate attribute (the show’s title) on our memo object.</p> <h3>More on Underscore</h3> <p>It’s easy to see even in these limited examples just how useful Underscore can be, which may explain why it’s used on sites like Reddit, Huffington Post, and LinkedIn, and has been included in Drupal 8 Core. Want to learn more? <a href="" title="" target="_blank">Underscore’s website</a> is an excellent resource, and check out Michael Fogus’ <a href="" title="" target="_blank">Functional JavaScript</a>, which uses Underscore to “to highlight and explain functional programming techniques.”</p> <p>If you have any questions on the examples here, if you’ve used Underscore to simplify any of your projects, or even if you're just a big fan of Buffy the Vampire Slayer, we’d love to hear from you in the comments!</p> Mon, 03 Mar 2014 19:10:00 +0000 ReBusiness Chamber Challenge Winners Recognized <p>Singlebrook was named the ReBusiness Chamber Challenge winner! Watch the award acceptance video, courtesy of Moving Box Studios, and check out the press release below!</p> <a href=""><img src="" style="width:555px;" /></a> <p>(Ithaca, NY) – Two Ithaca-based businesses have been recognized by the Chamber of Commerce and Tompkins County Solid Waste Division for reducing the amount of waste they generate.</p> <p>Under the 2013 ReBusiness Chamber Challenge, businesses and organizations were encouraged to reduce their collective waste footprint by practicing the four R's - Reduce, ReUse, Recycle and ReBuy. The Challenge took place from July to December, with the award winners recognized January 30th at the Chamber of Commerce Annual Dinner and Meeting.</p> <p>Singlebrook Technology is a web programming and designing firm that achieved a 65% waste diversion rate by recycling toner cartridges, electronics and fluorescent tubes; reusing scrap paper and packaging; and making green purchasing decisions. They are also composting!</p> <p>Jamex Incorporated offers quality vending and control products for copiers, network printers and other document imaging equipment. It achieved a 50% waste diversion rate by recycling materials such as toner cartridges, electronics and scrap metal, as well as large amounts of plastic packaging and film. They also reuse material and practice green purchasing techniques.</p> <p>Congratulations to Singlebrook and Jamex for doing their part to help make our community more sustainable! If your business is interested in receiving a free waste assessment and becoming a ReBusiness Partner, contact Tompkins County Solid Waste at (607)273-6632.</p> Thu, 20 Feb 2014 18:50:00 +0000 9 Expert Tips on Higher Ed Crowdfunding <p><em>by Jo Opot</em> </p> <p>Interview with Freeman White, Co-founder and CEO, Launcht </p> <p>An increasing number of universities and colleges are using crowdfunding platforms to raise donations for everything from their annual fund to student entrepreneurs. However, there is little data, examples, or shared wisdom on how to implement a successful university crowdfunding platform. Unfortunately, many Higher Ed institutions end up re-inventing the wheel or mistakenly adopting best practices meant for entrepreneurs and non-profits that backfire or at the very least fall short of expectations. </p> <p>To address this challenge, I interviewed Freeman White, CEO of Launcht, a white-label crowdfunding platform provider that has supported 15 Higher Ed institutions, including The University of San Diego Business School, Colby College, Central Michigan University and Pace University among others.<br /> <br />Here are 9 tips on Higher Ed crowdfunding from the expert:</p> <h4>Where to begin?</h4> <p>1. <strong>Secure buy-in from all your stakeholders</strong>. You will probably need to engage your in-house tech team, alumni engagement office, office of the president and accounting department, in addition to the campaign leaders. Make sure you get as many of them on board as possible before you begin buying the technology. This will not only translate into a larger group of supporters, but will also allow you to execute the campaign rapidly. For instance, Pace University and Kean University were able to plan and launch in record time primarily because they already had their ducks in a row.</p> <p>2. <strong>Consider starting with a crowdvoting initiative</strong>. Crowdvoting is easier to implement because you do not have to go through the development office and you can use it to gain interest in a subsequent crowdfunding platform. Utah Valley University used crowdvoting for an online competition that selected Utah-based ventures to receive $5,000 grants. Over the campaign’s 30 days, the competing 30 projects had 16,982 unique visitors and collected 9,947 total votes. These impressive results not only won over all the stakeholders, but also made a great case for further crowdsourcing initiatives.</p> <h4>Who to engage?</h4> <p>3. <strong>Don’t build the crowdfunding platform yourself</strong>. Yes, you have a fantastic in-house tech team, but you can easily find cheaper, white-label crowdfunding software that meets your needs. Think easy-to-use, customized and lightweight. This will allow you to maximize your budget by acquiring out-of-the-box technology while using the bulk of the budget to engage your target demographic.</p> <p>4. <strong>Identify the right tech partner</strong>. You want a platform that gives you control of your data, control of your brand image, absolute project approval and direct content approval. In addition, you want all the web traffic that comes in to remain on your university site. It is a tall order, and yes, you can have it all if you opt for a white-label crowdfunding platform instead of the monolithic external crowdfunding sites like Kickstarter and Indiegogo.</p> <h4>What to expect?</h4> <p>5. <strong>Let’s talk numbers</strong>. How much will you raise per donation? The University of Vermont found that the average donation on their crowdfunding platform was $67. Similarly, Launcht has seen the average donation amount to be approximately $50, which means that this will not be the core of a large capital raise. However, it would be a great matching gift program, whereby dramatically increased participation numbers are used to engage larger donors.</p> <p>6. <strong>Know your target demographic and choose a suitable campaign</strong>. The best donor segment attracted by a crowdfunding platform is tech-savvy young alumni. They are also stakeholders you have previously had a difficult time engaging with more traditional strategies like phone calls and email. <em>In fact, University of Arizona noted that 90% of their crowdfunding donors were new donors</em>. You should categorize crowdfunding as a new donor engagement strategy and select campaigns that are easy to understand with immediate results. Make sure you also have an equally savvy post-campaign strategy to keep them involved in the long term.</p> <h4>How to engage?</h4> <p>7. <strong>Get your grassroots team ready</strong>. Crowdfunding is not a “build it and they will come” initiative. The success stories often look effortless, but there is a tremendous amount of behind–the-scenes preparation and execution. Start with educating your campaign leaders on how to use the crowdfunding platform. Make sure you or your campaign leaders secure offline commitments of at least 30% of the campaign goal before the campaign even launches. You have a higher chance of raising your target goal if the campaign appears to have funders from the start.&#160;Once the campaign is running, make sure the campaign leaders continue to promote their progress through local or national PR, blogs, and social media to get the word out and drive even more traffic to your platform.</p> <p>8. <strong>The show and tell</strong>. Suit up your campaign with a TIE (Tangible + Immediate + Evocative) appeal. To elaborate, </p> <ul><li>A tangible campaign is one your target demographic can see, touch or visit. Feel free to showcase the product of the crowdfunding during alumni or homecoming weekend.&#160;</li> <li>As for immediacy, donors expect to see quick results within a few months of their donation.&#160;</li> <li>Evoke an emotional connection with the campaign or campaign leaders. The easiest way to be evocative is with a 1-2 minute video. Campaigns that have a video are more successful that those that don’t, and a homemade video is still better than no video.</li> </ul> <p>9. <strong>Start with showcasing at least 6 campaigns.</strong> Similar to the psychological comfort of seeing a range of food items on a menu even if you order the same dish every time, donors like to see a variety of campaigns taking place. This approach also promotes competition between the various campaigns and increases the number of campaign leaders driving traffic to the site. University of Vermont launched with 8 relatively different campaigns and not only saw very positive results, but also engaged donors through multiple campaigns even if they had arrived at the site for a specific campaign.</p> <p>For more Higher Ed Tech resources please visit our <a href="" title="" target="_blank">case study page</a> and be in touch if you would like to learn more about how <a href="" title="" target="_blank">Singlebrook</a> can address your Higher Ed needs.</p> Tue, 11 Feb 2014 17:16:00 +0000 utf8-cleaner gem protects your Rails app <p>TL;DR: Add our <a href="" title="" target="_blank">utf8-cleaner</a>&#160;Ruby gem to your Rails app and kiss request encoding errors goodbye!</p> <p>Our Rails apps send us <a href="" title="" target="_blank">error reports by email</a> every time a request results in a <a href="" title="" target="_blank">500 error</a>. Sometimes these are <a href="/blog/web-developments-dirty-little-secret" title="/blog/web-developments-dirty-little-secret">legitimate bugs</a>, and we can roll out a fix to our code. However, sometimes they're just the result of a misbehaved user agent (browser or search engine bot).</p> <p>Several of our Rails apps, including this site, were reporting errors like "invalid byte sequence in UTF-8". In our apps, this was almost always caused by a parameter in the request URL called "Result" whose value was a pile of <a href="" title="">URL-encoded</a>, non-<a href="" title="" target="_blank">ASCII</a> characters. We never figured out where this parameter was coming from, but we could tell that the encoded characters were not valid <a href="" title="" target="_blank">UTF-8</a> characters when we tried to decode them.</p> <p>Rails, helpful framework that it is, does a bunch of work to parse incoming parameters before they get handed to your application code. Unfortunately, it does not provide a built-in mechanism for handling badly-encoded characters. However, there is a very convenient place to plug in code before it gets to Rails, and that is <a href="" title="" target="_blank">Rack middleware</a>. Middleware was mysterious to me for a while, but it's actually pretty simple conceptually. Rack middleware is a stack of software that processes each incoming request and each outgoing response. It lives between your web server and your framework. Because of where it's located, it's the perfect place to clean up those funky request parameters before Rails can choke on them. </p> <p>Because we were seeing these problems in multiple apps, we wanted to be able to easily share the fix. <a href="" title="" target="_blank">Ruby's gem packaging system</a> was an obvious good fit. We created a <a href="" title="" target="_blank">gem called utf8-cleaner</a> using the simple <code><a href="">bundle gem</a> </code>&#160;command.&#160;</p> <p>We built our middleware, using test-driven development to keep our design clean and ensure that we were solving the right problems. We <a href="" title="" target="_blank">used the String class's encoding methods</a> where possible, but we also had to do some <a href="" title="" target="_blank">more manual processing of the encoded characters</a>&#160;because we were dealing with such malformed input. In the process, we <a href="" title="" target="_blank">learned way more about UTF-8 encoding</a> than we every wanted to!</p> <p>Once the middleware was doing its job, we needed to tie it into Rails. Enter <a href="" title="" target="_blank">Railties</a>, which lets your code hook into the various places Rails, including the initialization process. <a href="" title="" target="_blank">Our Railtie</a> simply inserts our middleware at the front of the middleware stack. This ensures that we'll be able to clean up the nasty parameters before they hit any other Ruby code that might choke on them.</p> <p>With the Railtie in place, we tested our new gem locally by <a href="" title="" target="_blank">using the <code>:path</code> option in our app's Gemfile</a>. By doing so, we were able to work out any integration issues before we pushed the gem up to <a href="" title="" target="_blank"></a>&#160;with the beautifully simple <code>rake release</code> command provided by Bundler.</p> <p>Because Rails and Rack provide so many integration points, <a href="" title="" target="_blank">using utf8-cleaner is as easy as adding it to your Gemfile and running <code>bundle install</code> </a>. It currently cleans&#160;HTTP_REFERER, PATH_INFO, QUERY_STRING, REQUEST_PATH, REQUEST_URI, and HTTP_COOKIE, but the design should allow it to clean other environment vars (e.g. a POST request body) pretty easily.</p> <p>We'd love to hear your feedback on this gem! It's quieted down our error reports, significantly increasing our signal-to-noise ratio. We hope you'll find it useful!</p> Fri, 07 Feb 2014 00:40:00 +0000