Posts Tagged:API

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.

Building a Simple API with Amazon Lambda and Zappa

We recently had a client come to us with a request for a simple serverless API. They wanted little to no administrative overhead, so we went with the AWS Lambda service. It was my first foray with Lambda, and getting it set up came with its fair share of headaches. If you’re starting down the same path and want to build a simple API with Lambda, here’s a tutorial to help. Github If you would rather go through the tutorial on github, you can find it here AWS Lambda This is a great service offered by AWS that allows users to run a serverless application or function. It’s a cloud-based, serverless architecture that comes with continuous scaling out of the box. Deploy your code, and AWS does the rest. It will only run when “triggered,” either by another AWS service, or an HTTP call. It’s relatively young and has room…

Read More →

Top 5 Lessons I’ve Learned Working with Drupal 8

Now that Drupal 8 is “production ready,” and agencies are ready to expand their capabilities by building in Drupal 8, clients are asking about it, and the community’s focus has shifted to developing for it. Drupal 8’s predecessor, Drupal 7, has been around since January 2011, which means that by late 2016 everyone working in Drupal was very familiar with the ins-and-outs of how Drupal 7 worked. Writing modules, using the hook system and preprocess functions, figuring out templating and theming quirks — it all became second nature to us. We’d mastered views and webforms, and some of us had written a couple of tricky migrations. In short, we’d all grown comfortable with Drupal 7 — and then along came Drupal 8. With the arrival of Drupal 8, many of those core components — on which we’d built many sites, and a living — have changed dramatically. We are now…

Read More →

Building an Open Source Photo Gallery with Face and Object Recognition (Part 1)

In this two-part series of blog posts, I’m going to show you how we built a Drupal 8 photo gallery site, integrated with Amazon S3, Rekognition, and Lambda to automatically detect faces (allowing us to automatically identify names!) and objects found in our photos. Acquia Build Week Every year, Acquia puts on Build Week, a week-long event where Acquia’s engineering teams (along with other departments, like OCTO, Professional Services, and more!) come together to learn, collaborate, and inspire a little crazy. One of the most intense, fun, and productive parts of Build Week is the two-day Hackathon. Every year there are some new and interesting initiatives, spanning a very wide range of interests. Some projects, like the exploration and strengthening of Drupal 8’s then-nascent Configuration Management tools, are geared towards building up Drupal 8. Other projects are more imaginative and exploratory, like augmented reality shopping experiences, which demonstrated how Acquia…

Read More →

(Now More Than Ever) You Might Not Need jQuery

The DOM and native browser API’s have improved by leaps and bounds since jQuery’s release all the way back in 2006. People have been writing “You Might Not Need jQuery” articles since 2013 (see this classic site and this classic repo). I don’t want to rehash old territory, but a good bit has changed in browser land since the last You Might Not Need jQuery article you might have stumbled upon. Browsers continue to implement new APIs that take the pain away from library-free development, many of them directly copied from jQuery. Let’s go through some new vanilla alternatives to jQuery methods. Remove an element from the page Remember the maddeningly roundabout way you had to remove an element from the page with vanilla DOM? el.parentNode.removeChild(el);? Here’s a comparison of the jQuery way and the new improved vanilla way. jQuery: var $elem = $(“.someClass”) //select the element $elem.remove(); //remove the…

Read More →

Let’s Talk About Speech CSS

Boston, like many large cities, has a subway system. Commuters on it are accustomed to hearing regular public address announcements. Riders simply tune out some announcements, such as the pre-recorded station stop names repeated over and over. Or public service announcements from local politicians and celebrities—again, kind of repetitive and not worth paying attention to after the first time. Most important are service alerts, which typically deliver direct and immediate information riders need to take action on. An informal priority A regular rider’s ear gets trained to listen for important announcements, passively, while fiddling around on a phone or zoning out after a hard day of work. It’s not a perfect system—occasionally I’ll find myself trapped on a train that’s been pressed into express service. But we shouldn’t remove lower priority announcements. It’s unclear what kind of information will be important to whom: tourists, new residents, or visiting friends and…

Read More →

Firebase & React Part 2: User Authentication

This is a follow up to the CSS-Tricks Article Intro to Firebase and React. In that lesson, we built Fun Food Friends, an application for planning your next potluck. It looked like this: If you haven’t completed that article yet, please complete that article first before attempting this one – it builds on the existing code from that application. If you’d like to skip that article and dive right into this one, you can clone this repository which contains the finished version of the application from part one. Just don’t forget that you’ll need to create your own firebase database and swap in the credentials for that one, as well as run npm install before beginning! If you aren’t sure how to do either of these things, take a look at part one before diving into this one. What we’ll be making Today we’ll be adding authentication to our Fun…

Read More →

The Structure of an Elm Application

Most languages when they are in their infancy, tend to be considered “toy languages” and are only used for trivial or small projects. But this is not the case with Elm, where its true power shines in complex and large applications. It is not only possible to build some parts of an application in Elm and integrate those components into a larger JS application, but it is also possible to build the entire application without touching any other language making it an excellent alternative to JS frameworks like React. In this article, we will explore the structure of an Elm application using a simple site to manage plain-text documents as an example. Article Series: Why Elm? (And How To Get Started With It) Introduction to The Elm Architecture and How to Build our First Application The Structure of an Elm Application (You are here!) Some of the topics covered in…

Read More →

Repeatable, Staggered Animation Three Ways: Sass, GSAP and Web Animations API

Staggered animation, also known as “follow through” or “overlapping action” is one of the twelve Disney principles of animation as defined by Ollie Johnston and Frank Thomas in their 1981 book “The Illusion of Life”. At its core, the concept deals with animating objects in delayed succession to produce fluid motion. The technique doesn’t only apply to cute character animations though. The Motion design aspect of a digital interface has significant implications on UX, user perception and “feel”. Google even makes a point to mention staggered animation in its Motion Choreography page, as part of the Material Design guide: While the topic of motion design is truly vast, I often find myself applying bits and pieces even in smallest of projects. During the design process of the Interactive Coke ad on Eko I was tasked with creating some animation to be shown as the interactive video is loading, and so…

Read More →

Why Use a Third-Party Form Validation Library?

We’ve just wrapped up a great series of posts from Chris Ferdinandi on modern form validation. It starts here. These days, browsers have quite a few built-in tools for handling form validation including HTML attributes that can do quite a bit on their own, and a JavaScript API that can do even more. Chris even showed us that with a litttttle bit more work we can get down to IE 9 support with ideal UX. So what’s up with third-party form validation libraries? Why would you use a library for something you can get for free? You need deeper browser support. All “modern” browsers + IE 9 down is pretty good, especially when you’ve accounted for cross-browser differences nicely as Chris did. But it’s not inconcievable that you need to go even deeper. Libraries like Parsley go down a smidge further, to IE 8. You’re using a JavaScript framework that…

Read More →

Form Validation – Part 4: Validating the MailChimp Subscribe Form

Over the last few articles in this series, we’ve learned how to use a handful of input types and validation attributes to natively validate forms. We’ve learned how to use the Constraint Validation API to enhance the native browser validation process for a better overall user experience. And we wrote a polyfill to extend support all the way back to IE9 (and plug a few feature holes in some newer versions). Now, let’s take what we’ve learned and apply it to a real example: the MailChimp signup form. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript A Validity State API Polyfill Validating the MailChimp Subscribe Form (You are here!) A simple form with a large footprint When you embed a MailChimp signup form on your site, it comes with a JavaScript validation script named `mc-validate.js`. This file is 140kb (minified), and includes the entire jQuery library,…

Read More →

Form Validation Part 3: A Validity State API Polyfill

In the last article in this series, we built a lightweight script (6kb, 2.7kb minified) using the Validity State API to enhance the native form validation experience. It works in all modern browsers and provides support IE support back to IE10. But, there are some browser gotchas. Not every browser supports every Validity State property. Internet Explorer is the main violator, though Edge does lack support for tooLong even though IE10+ support it. And Chrome, Firefox, and Safari got full support only recently. Today, we’ll write a lightweight polyfill that extends our browser support all the way back to IE9, and adds missing properties to partially supporting browsers, without modifying any of the core code in our script. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript A Validity State API Polyfill (You are here!) Validating the MailChimp Subscribe Form (Coming Soon!) Let’s get started. Testing Support…

Read More →

The OSTraining Podcast #4: Olivier Karfis and WooCommerce Apps

In this episode, I talk with Olivier Karfis who runs, a successful site teaching people how to speak French. Olivier uses WooCommerce as a platform for digital downloads, and increasingly for mobile and desktop apps, based on the WordPress API. This episode touches on several issues we love to talk about: teaching, e-commerce, traveling and how to constantly re-invent and re-invigorate your career. [[ This is a content summary only. Visit for full links, other content, and more! ]] Source:

Form Validation Part 2: The Constraint Validation API (JavaScript)

In my last article, I showed you how to use native browser form validation through a combination of semantic input types (for example, <input type=”email”>) and validation attributes (such as required and pattern). While incredibly easy and super lightweight, this approach does have a few shortcomings. You can style fields that have errors on them with the :invalid pseudo-selector, but you can’t style the error messages themselves. Behavior is also inconsistent across browsers. User studies from Christian Holst and Luke Wroblewski (separately) found that displaying an error when the user leaves a field, and keeping that error persistent until the issue is fixed, provided the best and fastest user experience. Unfortunately, none of the browsers natively behave this way. However, there is a way to get this behavior without depending on a large JavaScript form validation library. Article Series: Constraint Validation in HTML The Constraint Validation API in JavaScript (You…

Read More →

Form Validation Part 1: Constraint Validation in HTML

Most JavaScript form validation libraries are large, and often require other libraries like jQuery. For example, MailChimp’s embeddable form includes a 140kb validation file (minified). It includes the entire jQuery library, a third-party form validation plugin, and some custom MailChimp code. In fact, that setup is what inspired this new series about modern form validation. What new tools do we have these days for form validation? What is possible? What is still needed? In this series, I’m going to show you two lightweight ways to validate forms on the front end. Both take advantage of newer web APIs. I’m also going to teach you how to push browser support for these APIs back to IE9 (which provides you with coverage for 99.6% of all web traffic worldwide). Finally, we’ll take a look at MailChimp’s sign-up form, and provide the same experience with 28× (2,800%) less code. It’s worth mentioning that…

Read More →

Decoupling Drupal with Waterwheel for Ember and React

As I’ve written previously, the Waterwheel ecosystem and Reservoir distribution help pave the way for non-Drupal developers to use decoupled Drupal as a headless back end without having to learn a lick of Drupal or PHP. Thanks to the Contenta team, there is now a growing slate of applications backed by decoupled Drupal and web services modules like JSON API and Simple OAuth. Now, the Waterwheel team is excited to release several new projects that benefit developers developing JavaScript applications built in Ember and React. With the release of reference applications in Ember and React and an Ember add-on, the Waterwheel ecosystem is moving beyond SDKs like Waterwheel.js and toward a larger range of plugins, boilerplates, and examples to help you develop your Drupal-backed JavaScript applications more swiftly. Best of all, these projects can be used interchangeably to build applications backed by API-first Drupal 8 with JSON API, Acquia’s just-released…

Read More →

Server-Side React Rendering

React is best known as a client-side JavaScript framework, but did you know you can (and perhaps should!) render React server-side? Suppose you’ve built a zippy new event listing React app for a client. The app is hooked up to an API built with your favorite server-side tool. A couple weeks later the client tells you that their pages aren’t showing up on Google and don’t look good when posted to Facebook. Seems solvable, right? You figure out that to solve this you’ll need to render your React pages from the server on initial load so that crawlers from search engines and social media sites can read your markup. There is evidence showing that Google sometimes executes javascript and can index the generated content, but not always. So server-side rendering is always recommended if you want to ensure good SEO and compatibility with other services like Facebook, Twitter. In this…

Read More →

How to Build Your Own Alexa Service

With the recent introduction of Amazon and Google products that provide Ironman-esque voice control functionality, we’ve been wondering lately what this means for the future of human computer interactions. Always on the lookout for emerging technology to get ahead of, we decided to put a project together to see what these little devices are capable of. We had about 2 weeks before the three Viget offices were assembling for an all hands gathering, so we wanted to something both fun and interactive. What we ended up with was an Alexa service that could figure out which Viget employee you were thinking about. We called it: The Know It All Trying out our latest Viget team game using voice control. Can you guess who? More updates soon! cc @alexadevs @amazonecho #Alexa— Viget (@viget) June 13, 2017 There are a couple pieces to this puzzle – a Rails backend, a React…

Read More →

Connect: behind the front-end experience

Some fantastic behind-the-scenes stuff about Stripe’s design work by Benjamin De Cock. Absolutely everything is clever and using very modern techniques. Using CSS grid for their iconic background stripes Using 3D cubes for aesthetic flair Using reduced motion media queries to accommodate that preference Using the Web Animation API for event-triggered keyframe-like animations in JavaScript Plus one I’d never seen before: Connect’s landing page uses the new Intersection Observer API which provides a much more robust and performant way to detect the visibility of an element … The observeScroll helper simplifies our detection behavior (i.e. when an element is fully visible, the callback is triggered once) without executing anything on the main thread. Direct Link to Article — Permalink Connect: behind the front-end experience is a post from CSS-Tricks Source: CssTricks

Introducing Reservoir, a Distribution for Decoupling Drupal

Decoupling Drupal can be arduous, whether you’re developing a Drupal-backed front end or configuring Drupal to be an ideal content repository for decoupled applications. Adding to the challenge is the fact that there is a lack of definitive starting points, boilerplates, and best practices. But the issue isn’t simply that there are so many competing approaches; it’s also that there doesn’t yet exist an easy starting point for non-Drupal developers who solely want to configure Drupal to be the back end for their front-end applications and get on with development. Acquia’s Office of the CTO is pleased to announce the release of Reservoir, an experimental Drupal distribution developed by Wim Leers (coordinator of Drupal’s API-first initiative) and Ted Bowman. Beyond comprising an exceptional starting point for any decoupled Drupal implementation, it is also designed to on-board developers of all backgrounds: a decoupled Drupal distribution and optimal back end for every…

Read More →

Back to Top