Posts Tagged:application

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.


The evolution of Acquia's product strategy

Four months ago, I shared that Acquia was on the verge of a shift equivalent to the decision to launch Acquia Fields and Drupal Gardens in 2008. As we entered Acquia’s second decade, we outlined a goal to move from content management to data-driven customer journeys. Today, Acquia announced two new products that support this mission: Acquia Journey and Acquia Digital Asset Manager (DAM). Last year on my blog, I shared a video that demonstrated what is possible with cross-channel user experiences and Drupal. We showed a sample supermarket chain called Gourmet Market. Gourmet Market wants its customers to not only shop online using its website, but to also use Amazon Echo or push notifications to do business with them. The Gourmet Market prototype showed an omnichannel customer experience that is both online and offline, in store and at home, and across multiple digital touchpoints. The Gourmet Market demo video…

Read More →

Exploring Data with Serverless and Vue: Filtering and Using the Data

In this second article of this tutorial, we’ll take the data we got from our serverless function and use Vue and Vuex to disseminate the data, update our table, and modify the data to use in our WebGL globe. This article assumes some base knowledge of Vue. By far the coolest/most useful thing we’ll address in this article is the use of the computed properties in Vue.js to create the performant filtering of the table. Read on! Article Series: Automatically Update GitHub Files With Serverless Functions Filtering and Using the Data (you are here!) You can check out the live demo here, or explore the code on GitHub. First, we’ll spin up an entire Vue app with server-side rendering, routing, and code-splitting with a tool called Nuxt. (This is similar to Zeit’s Next.js for React). If you don’t already have the Vue CLI tool installed, run npm install -g vue-cli…

Read More →

Exploring Data with Serverless and Vue: Automatically Update GitHub Files With Serverless Functions

I work on a large team with amazing people like Simona Cotin, John Papa, Jessie Frazelle, Burke Holland, and Paige Bailey. We all speak a lot, as it’s part of a developer advocate’s job, and we’re also frequently asked where we’ll be speaking. For the most part, we each manage our own sites where we list all of this speaking, but that’s not a very good experience for people trying to explore, so I made a demo that makes it easy to see who’s speaking, at which conferences, when, with links to all of this information. Just for fun, I made use of three.js so that you can quickly visualize how many places we’re all visiting. You can check out the live demo here, or explore the code on GitHub. In this tutorial, I’ll run through how we set up the globe by making use of a Serverless function that…

Read More →

Building a Progress Ring, Quickly

On some particularly heavy sites, the user needs to see a visual cue temporarily to indicate that resources and assets are still loading before they taking in a finished site. There are different kinds of approaches to solving for this kind of UX, from spinners to skeleton screens. If we are using an out-of-the-box solution that provides us the current progress, like preloader package by Jam3 does, building a loading indicator becomes easier. For this, we will make a ring/circle, style it, animate given a progress, and then wrap it in a component for development use. Step 1: Let’s make an SVG ring From the many ways available to draw a circle using just HTML and CSS, I’m choosing SVG since it’s possible to configure and style through attributes while preserving its resolution in all screens. <svg class=”progress-ring” height=”120″ width=”120″ > <circle class=”progress-ring__circle” stroke-width=”1″ fill=”transparent” r=”58″ cx=”60″ cy=”60″ /> </svg>…

Read More →

Low Volume Sourcing Techniques

Low volume manufacturing can be a logistical nightmare. You might think that vendors who could help you simply won’t because you don’t represent a significant quantity of work. You might also think that you’re doing something incredibly brainy and only YOU can tackle the challenge and ensure quality. To a degree both of these are valuable and tempering thoughts. But what these thoughts often mean is that you’ve started to think about sourcing towards the tail-end of a project. These thoughts actually represent a totalitarian go-it-alone-until-it’s-perfect-in-my-eyes approach which is consequently 100% ignorant of vendor capabilities and appetite. The reality, as i’ve seen it, is that strong vendor relationships underpin success. I look at manufacturing sprints as crucial to the design and engineering process, even, if for no other reason, it gets me or another engineer on a real phone with a real person talking about real tangible things. It helps…

Read More →

Why Connecting Hardware with the Web is So Neat

We just wrapped up development on Lightwalk, an interactive art installation living at Abilene Christian University in Abilene, Texas. For a number of reasons, this has been one of the most interesting projects I’ve ever worked on. There is the obvious wow factor of the installation itself, but we also developed a whole suite of dev tools running behind the scenes that not only keep the installation running, but also enable engagement from ACU students in multiple ways. It’s this tie between hardware and software that makes the project truly shine, it’s taking art and making it sm-art, it’s the internet of things but it’s actually interesting, and it’s what I’m going to be talking about today. So what are “dev tools” anyway? Short for “developer tools”, the system we built to power the Lightwalk installation provides a couple of critical services: Allow students to choose the effects and colors…

Read More →

Blendid HTTP/2 Upgrade

After spending about a year experimenting and blogging about how HTTP/2 is going to improve performance and finding ways it can be applied to projects, we have added an HTTP/2 upgrade to Blendid so you can try for yourself. If you are unfamiliar with Blendid, Blendid is full-featured modern asset pipeline powered by Gulp that utilizes many helpful stand-alone tasks. At Viget, we use it for many front end builds for its ease of use and simple configurability. To use Blendid with the HTTP/2 upgrade, follow these steps: On a new project, run yarn init from your terminal in the project’s directory, which adds a package.json and yarn.lock file to your directoryThen run yarn add blendid to add the Blendid package to the projectAfter that, run yarn run blendid — init to ensure the Blendid directories are in placeFinally add in yarn run blendid — http2-upgrade and you are donezo…

Read More →

Keeping track of letter-spacing, some guidelines

Considering that written words are the foundation of any interface, it makes sense to give your website’s typography first-class treatment. When setting type, the details really do matter. How big? How small? How much line height? How much letter-spacing? All of these choices affect the legibility of your text and can vary widely from typeface to typeface. It stands to reason that the more attention paid to the legibility of your text, the more effectively you convey a message. In this post, I’m going to dive deep into a seemingly simple typesetting topic—effective use of letter-spacing—and how it relates to web typography. Some history Letter-spacing, or character spacing, is the area between all letters in a line of text. Manipulation of this space is intended to increase or decrease the visual density of a line or block of text. When working in print, typographers also refer to it as tracking.…

Read More →

How-To: URL State Sharing / Deep Linking using Microcosm

How many times have you received a link to a website from a loved one, you visit it, and the site doesn’t know how to load the proper data? I’m looking at you airline sites… We should be nice to our users and make it so our application can share search state with another user by simply sharing a URL. I’m going to show you one solution that I recently used while working on a client-side-app (lots of JavaScript) using Microcosm. Trigger the Microcosm action to update the app state (and URL query) push(storeQuery, queryData) 2. Create and add a Microcosm Effect (which will do the listening): setup(repo) { repo.addEffect(UrlPersistenceEffect) } Note: I add the Effect in a Presenter’s setup method because setup has access to repo and as you’ll see later I only want this behavior in a certain part of my app. Otherwise, I’d recommend adding the Effect to your main app Repo initialization. The Effect: import…

Read More →

Drupal looking to adopt React

Last week at DrupalCon Vienna, I proposed adding a modern JavaScript framework to Drupal core. After the keynote, I met with core committers, framework managers, JavaScript subsystem maintainers, and JavaScript experts in the Drupal community to discuss next steps. In this blog post, I look back on how things have evolved, since the last time we explored adding a new JavaScript framework to Drupal core two years ago, and what we believe are the next steps after DrupalCon Vienna. As a group, we agreed that we had learned a lot from watching the JavaScript community grow and change since our initial exploration. We agreed that today, React would be the most promising option given its expansive adoption by developers, its unopinionated and component-based nature, and its well-suitedness to building new Drupal interfaces in an incremental way. Today, I’m formally proposing that the Drupal community adopt React, after discussion and experimentation…

Read More →

Help Your Users `Save-Data`

The breadth and depth of knowledge to absorb in the web performance space is ridiculous. At a minimum, I’m discovering something new nearly every week. Case in point: The Save-Data header, which I discovered via a Google Developers article by Ilya Grigorik. If you’re looking for the tl;dr version of how Save-Data works, let me oblige you: If you use Chrome’s Data Saver extension on your desktop device or opt into data savings on the Android version of Chrome, every request that Chrome sends to a server will contain a Save-Data header with a value of On. While this doesn’t do anything for your site out of the gate, you can consider it an opportunity. Given an opportunity to operate on a header like this, what would you do? Let me give you a few ideas! Change your image delivery strategy I don’t know if you’ve noticed, but images are…

Read More →

If You're Looking for a High-Level Intro to Decoupled Drupal, This is It.

If you’ve been hearing a lot about decoupled, or headless Drupal, but have been wondering when and how to start figuring it out, we have good news: the time is now, and the how is watching this DrupalCon presentation by Preston So. The reason: Preston, Director of Research and Innovation at Acquia, and widely published on decoupled Drupal, has dedicated himself in this talk to explain decoupled Drupal at its most basic. If you’re not a coder, not technical — a businessperson, for example — this presentation is for you. It’s an overview of the entire landscape. How basic is it? The opening section of this talk compares decoupled Drupal to the Matt Damon movie The Martian. Is that accessible, or what? From there, Preston dives into the nitty-gritty of what makes decoupled Drupal tick, why it’s so compelling for developers, and how it works from a technical standpoint. Some…

Read More →

Creating Your First WebVR App using React and A-Frame

Today, we’ll be running through a short tutorial on creating our own WebVR application using A-Frame and React. We’ll cover the setup process, build out a basic 3D scene, and add interactivity and animation. A-Frame has an excellent third-party component registry, so we will be using some of those in addition to writing one from scratch. In the end, we’ll go through the deployment process through surge.sh so that you can share your app with the world and test it out live on your smartphone (or Google Cardboard if you have one available). For reference, the final code is in this repo. Over the course of this tutorial, we will be building a scene like this. Check out the live demo as well. Exciting, right? Without further ado, let’s get started! What is A-Frame? A-Frame is a framework for building rich 3D experiences on the web. It’s built on top…

Read More →

The Importance Of JavaScript Abstractions When Working With Remote Data

Recently I had the experience of reviewing a project and accessing its scalability and maintainability. There were a few bad practices here and there, a few strange pieces of code with lack of meaningful comments. Nothing uncommon for a relatively big (legacy) codebase, right? However was something that I keep finding. A pattern that repeated itself throughout this codebase and a number of other projects I’ve looked through.They could be all by lack of abstraction. Ultimately, this was the cause for maintenance difficulty. In object-oriented programming, abstraction is one of the three central principles (along with encapsulation and inheritance). Abstraction is valuable for two key reasons: Abstraction hides certain details and only show the essential features of the object. It tries to reduce and factor out details so that the developer can focus on a few concepts at a time. This approach improves understandability as well as maintainability of the…

Read More →

Creating a Static API from a Repository

When I first started building websites, the proposition was quite basic: take content, which may or may not be stored in some form of database, and deliver it to people’s browsers as HTML pages. Over the years, countless products used that simple model to offer all-in-one solutions for content management and delivery on the web. Fast-forward a decade or so and developers are presented with a very different reality. With such a vast landscape of devices consuming digital content, it’s now imperative to consider how content can be delivered not only to web browsers, but also to native mobile applications, IoT devices, and other mediums yet to come. Even within the realms of the web browser, things have also changed: client-side applications are becoming more and more ubiquitous, with challenges to content delivery that didn’t exist in traditional server-rendered pages. The answer to these challenges almost invariably involves creating an…

Read More →

The Modlet Workflow: Improve Your Development Workflow with StealJS

You’ve been convinced of the benefits the modlet workflow provides and you want to start building your components with their own test and demo pages. Whether you’re starting a new project or updating your current one, you need a module loader and bundler that doesn’t require build configuration for every test and demo page you want to make. StealJS is the answer. It can load JavaScript modules in any format (AMD, CJS, etc.) and load other file types (Less, TypeScript, etc.) with plugins. It requires minimum configuration and unlike webpack, it doesn’t require a build to load your dependencies in development. Last but not least, you can use StealJS with any JavaScript library or framework, including CanJS, React, Vue, etc. In this tutorial, we’re going to add StealJS to a project, create a component with Preact, create an interactive demo page, and create a test page. Article Series: The Key…

Read More →

Announcing Node.js on Acquia Cloud

Today, Acquia announced that it expanded Acquia Cloud to support Node.js, the popular open-source JavaScript runtime. This is a big milestone for Acquia as it is the first time we have extended our cloud beyond Drupal. I wanted to take some time to explain the evolution of Acquia’s open-source stack and why this shift is important for our customers’ success. From client-side JavaScript to server-side JavaScript JavaScript was created at Netscape in 1995, when Brendan Eich wrote the first version of JavaScript in just 10 days. It took around 10 years for JavaScript to reach enterprise maturity, however. Adoption accelerated in 2004 when Google used JavaScript to build the first release of Gmail. In comparison to e-mail competitors like Yahoo! Mail and Hotmail, Gmail showed what was possible with client-side JavaScript, which enables developers to update pages dynamically and reduces full-page refreshes and round trips to the server. The benefit…

Read More →

Node.js and Headless Drupal on Acquia Cloud

The press release went out this morning with the headline, Acquia Debuts Node.js and Headless Drupal on Acquia Cloud. The subhed: “Company Expands Upon Drupal Cloud Solutions for Web and Flexible Content Applications.” The news: Acquia today unveiled a new application service for Acquia Cloud that makes it easy for digital IT teams to build and run JavaScript alongside Drupal. Acquia Cloud now supports the use of Node.js in addition to Drupal. The Dries quote: “Decoupled applications using JavaScript front ends are on the rise. They’re making it possible to create experiences with responsive, elegant, application-like behavior. To help our customers build such digital experiences with headless Drupal, we added Node.js support to Acquia Cloud.” Why it’s important: Developers will now be able to leverage tools enabling continuous delivery and integration across Node.js and Drupal from one user interface. IT professionals benefit from one secure, compliant cloud for Drupal, decoupled Drupal,…

Read More →

The Key to Building Large JavaScript Apps: The Modlet Workflow

You’re a developer working on a “large JavaScript application” and you’ve noticed some issues on your project. New team members struggle to find where everything is located. Debugging issues is difficult when you have to load the entire app to test one component. There aren’t clean API boundaries between your components, so their implementation details bleed one into the next. Updating your dependencies seems like a scary task, so your app doesn’t take advantage of the latest upgrades available to you. One of the key realizations we made at Bitovi was that “the secret to building large apps is to never build large apps.” When you break your app into smaller components, you can more easily test them and assemble them into your larger app. We follow what we call the “modlet” workflow, which promotes building each of your components as their own mini apps, with their own demos, documentation,…

Read More →

Back to Top