Category Archive for: interactive

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 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 →

React + Dataviz

There is a natural connection between Data Visualization (dataviz) and SVG. SVG is a graphics format based on geometry and geometry is exactly what is needed to visually display data in compelling and accurate ways. SVG has got the “visualization” part, but SVG is more declarative than programmatic. To write code that digests data and turns it into SVG visualizations, that’s well suited for JavaScript. Typically, that means D3.js (“Data-Driven Documents”), which is great at pairing data and SVG. You know what else is good at dealing with data? React. The data that powers dataviz is commonly JSON, and “state” in React is JSON. Feed that JSON data to React component as state, and it will have access to all of it as it renders, and notably, will re-render when that state changes. React + D3 + SVG = Pretty good for dataviz I think that idea has been in…

Read More →

Design Tooling is Still Figuring Itself Out

It probably always will be, to be fair. At the moment, there are all kinds of things that design software is struggling to address. The term “screen design” is common, referring to the fact that many of us are designing very specifically for screens, not print or any other application and screens have challenges unique to them. We have different workflows these days than in the past. We have different collaboration needs. We have different technological and economic needs. Let’s take a peak at all this weirdness. Design tooling is still figuring out Responsive Design It’s almost taken for granted these days that any given new web project (or redesign) will be responsive design. Responsive design is the answer for screens of different sizes and different capabilities. So we can’t just design a 1280px wide version and call it a day. Software like Sketch has made multiple artboards of arbitrary…

Read More →

Basecamp 3 for iOS: Hybrid Architecture

We’ve written quite a bit in the past about our approach to building hybrid mobile apps. Basecamp 3 represents the latest generation of this architecture, taking everything we’ve learned from previous versions.The first app for Basecamp 2 app was iPhone only, written in RubyMotion as a thin wrapper around UIWebView. Next, we did a new universal app for Basecamp 2, written in Xcode + Objective-C, still a using UIWebView, but with a bit more native code thrown in. For Basecamp 3, we’ve replaced Objective-C with Swift, UIWebView with WKWebView and added Turbolinks, with even more native code, and a deeper integration between native and web.Defining HybridFirst, it helps to be clear about what we mean by “hybrid”. That term is used in so many different contexts, that it’s almost meaningless. In our use, we’re referring to standard native apps where a significant portion of the content is rendered using web technology.…

Read More →

Revisiting our Fantasy Football Exploration

In 2015 Viget launched one of our most popular explorations around the future of fantasy football. As avid fans and players, we were interested in exploring the intersection of three of our biggest passions: technology, experience design, and sports. Our goal was to consider improvements to the fantasy football interfaces as well as concepts to push the fantasy experience beyond the screen. Through our research we specifically focused on designs for a more immersive draft experience, enhanced league communications, and better access to more statistical analysis. Two years has passed and the fantasy landscape is still booming with no signs of slowing down. As we start our 6th season of fantasy football at Viget we decided to dust off the ole exploration from the trophy shelf and see whether or not our ideas still hold water—or gatorade—or, well, you get the point. Looking back, what began as a “wouldn’t it…

Read More →

Unpacking the Mysteries of Webpack — A Novice's Journey

I’d worked on a handful of JavaScript applications with webpack before I inherited one in particular that had painfully sluggish builds. Even the incremental builds were taking up to 20 seconds…every single time I saved a change to a JS file. Being able to detect code changes and push them into my browser is a great feedback loop to have during development, but it kind of defeats the purpose when it takes so long. What’s more, as a compulsive saver and avid collector of Chrome tabs, I basically lit my computer on fire as it screamed like an F-15 every time webpack ran one of these builds. I put up with this for awhile because I was scared of webpack. I shot a handful of awkward glances at webpack.config.js over the course of a few weeks. Right before permanent madness set in, I resolved to make things better. Thus started…

Read More →

Introduction to Web Site Building with Drupal

Start:  2017-09-08 10:00 – 14:00 America/New_York Organizers:  rgs Event type:  Training (free or commercial) https://ffwagency.com/drupal-training-adoption Drupal gives its users an incredibly powerful and flexible toolkit. These tools make it possible to build sites that are interactive, integrated, and infinitely customizable… all without writing a line of code. Join us and discover what you are capable of when you build with Drupal! In this introductory class you will learn: Best practices in Drupal project planning Drupal’s inherent tools and subsystems Custom content types Views Taxonomy Search tools URL aliasing Module selection Customized site administration …And more! During this introductory class you will learn just how much you can do by installing and configuring Drupal’s contributed modules. This free training will focus on concepts and is built around demonstrations. Course materials: Attendees will receive a PDF manual which outlines step-by-step activities. Students must bring their own laptop computer. Why is this class…

Read More →

Want to expand your Google Analytics skills or land a full-time job? Start here.

People often contact Viget about our analytics training offerings. Because the landscape has changed significantly over the past few years, so has our approach. Here’s my advice for learning analytics today. We’ll break this article into two parts — choose which part is best for you: 1. I’m in a non-analytics role at my organization and looking to become more independent with analytics. 2. I’d like to become a full-time analyst in an environment like Viget’s, either as a first-time job or as a career change. “I’m in a non-analytics role at my organization and looking to become more independent with analytics.” Great! One more question — do you want to learn about data analysis or configuring new tracking? Data Analysis: At Viget, we used to offer full-day public trainings where we covered everything from beginner terminology to complex analyses. Over the past few years, however, Google has significantly improved…

Read More →

Why You Should Consider React Native For Your Next Native App

As a developer who’s created mobile apps using React Native and Swift, I’ve come across pros and cons for each approach, and the advantages of React Native certainly outweigh its disadvantages. I should also emphasize that this article is not meant to convince you to use React Native for every mobile application, and you shouldn’t. React Native is not the de facto solution to building mobile apps. It still has a lot of shortcomings, but given the right use case, it is an effective solution to shipping a cross-platform app without compromising user experience. Cross Platform Business Logic + Native UI The biggest selling point of React Native is the fact that it lets you build native apps using the same technologies that web developers are already using. It lets you render truly native view components using the same declarative React API that we all love. This is not the…

Read More →

Lead .NET Sitecore Developer – Interactive Strategies – Remote

Experience managing a team of developers (or ready to take the challenge). At Interactive Strategies, our developers are involved early and often in projects,…From Interactive Strategies – Sat, 29 Jul 2017 23:52:09 GMT – View all Remote jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Lead Sitecore .NET Developer – Interactive Strategies – Remote

Experience managing a team of developers (or ready to take the challenge). At Interactive Strategies, our developers are involved early and often in projects,…From Interactive Strategies – Sat, 29 Jul 2017 23:52:09 GMT – View all Remote jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Musings on HTTP/2 and Bundling

HTTP/2 has been one of my areas of interest. In fact, I’ve written a few articles about it just in the last year. In one of those articles I made this unchecked assertion: If the user is on HTTP/2: You’ll serve more and smaller assets. You’ll avoid stuff like image sprites, inlined CSS, and scripts, and concatenated style sheets and scripts. I wasn’t the only one to say this, though, in all fairness to Rachel, she qualifies her assertion with caveats in her article. To be fair, it’s not bad advice in theory. HTTP/2’s multiplexing ability gives us leeway to avoid bundling without suffering the ill effects of head-of-line blocking (something we’re painfully familiar with in HTTP/1 environments). Unraveling some of these HTTP/1-specific optimizations can make development easier, too. In a time when web development seems more complicated than ever, who wouldn’t appreciate a little more simplicity? As with anything…

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 →

Glue Cross-Browser Responsive Irregular Images with Sticky Tape

I recently came across this Atlas of Makers by Vasilis van Gemert. Its fun and quirky appearance made me look under the hood and it was certainly worth it! What I discovered is that it was actually built making use of really cool features that so many articles and talks have been written about over the past few years, but somehow don’t get used that much in the wild – the likes of CSS Grid, custom properties, blend modes, and even SVG. SVG was used in order to create the irregular images that appear as if they were glued onto the page with the pieces of neon sticky tape. This article is going to explain how to recreate that in the simplest possible manner, without ever needing to step outside the browser. Let’s get started! The first thing we do is pick an image we start from, for example, this…

Read More →

The Options for Programmatically Documenting CSS

I strongly believe that the documentation should be kept as close to the code as possible. Based on my experience, that’s the only option that works well in the long term. External documents, notes, and wikis all eventually get outdated, forgotten, and lost. Documentation is a topic that always bugs me. Working on poorly documented codebase is a ticking bomb. It makes the onboarding process a tedious experience. Another way to think of bad documentation is that it helps foster a low truck factor (that is, “the number of people on your team who have to be hit by a truck before the project is in serious trouble”). Recently I was on-boarded into a project with more than 1,500 pages of documentation written in… Microsoft Word. It was outdated and unorganized. A real disaster. There must be a better way! I’ve talked about this documentation issue before. I scratched the…

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 →

Back to Top