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.


Sun Microsystems Selects Pixeldust to Design New Product Icons

Pixeldust is pleased to announce that we will design product icons for Sun Microsystems’ new XVM server software line. The icons are set to make their debut by the end of September.

Experience Express in Darmstadt: Celebrating Drupal 8's Most Important Release Yet

Though there was no DrupalCon Europe this year, the European Drupal community stepped up and organized their own conference, Drupal Europe, in Darmstadt, Germany last month. An incredibly successful gathering held in the Darmstadtium venue, a beautiful convention center in the center of this college town, Drupal Europe demonstrated the unique power that grassroots initiatives can have in our open-source community. Drupal Europe came at a particularly important time in the Drupal community as we welcomed the latest and most important release in Drupal 8’s history, with exciting new features such as embedded media support (such as YouTube videos), support for file uploads via REST, and substantial improvements in many other areas. At the same time, as Dries Buytaert said during his keynote, it is now time for the community to begin considering how Drupal 9, which will be released in 2020, will look. Because it was an intensely busy…

Read More →

Control the Internet With Chrome Extensions!

As a web UI developer and designer, there are countless things to learn and only so many hours in the day. There are topics I’ve purposefully avoided, like mobile and offline application development because, at some point, you have to draw a line somewhere in the millions of shiny new topics and get some work done. One of the areas I’ve avoided in the past is browser extension development. I didn’t understand how they worked, what the development environment was, or how permissions interacted with overriding pages because, frankly, I didn’t think I was interested. Then one day, my very talented designer/developer friend Natalie Schoch asked me to get her Chrome Extension across the finish line. She had the front-end prototyped, but needed some help plugging in the data set and with interactive JavaScript. The project is called Wordsmith and it’s out now at the Chrome Extension Store. It’s a…

Read More →

Interactive Introduction to CSS Houdini

This is a great explanatory microsite by Sam Richard. CSS Houdini will let authors tap in to the actual CSS engine, finally allowing us to extend CSS, and do so at CSS speeds. Much like Service Workers are a low-level JavaScript API for the browser’s cache, Houdini introduces low-level JavaScript APIs for the browser’s render engines. What’s important to know is that Houdini is broken up into these different parts, each of which will be implemented separately. We have an intro to the paint API here and a number of other articles that touch on it. Here’s a very cool collection Dan Wilson put together of Houdini + Custom Properties. Direct Link to Article — PermalinkThe post Interactive Introduction to CSS Houdini appeared first on CSS-Tricks. Source: CssTricks

What You Need to Know About WCAG 2.1

Background on WCAG The Web Content Accessibility Guidelines (WCAG) 2.0 have been the international standard for accessibility since the European Union adopted them in 2016. WCAG 2.1 adds new requirements to each of the three compliance levels (A, AA, and AAA). Here at Viget, we aim to comply with WCAG Level A on all projects and we work with clients to determine which aspects of AA and AAA compliance are appropriate for their audiences. What’s New in Level A Label and name text should match on HTML elements (2.5.3). It’s important to note that this standard isn’t necessarily referring to the name attribute on input elements. For some elements, identifiable text could be a label, the text inside the element or the name attribute. Don’t rely on device motion or wild pointer gestures for functionality (2.5.4 & 2.5.1). This one may seem like a no-brainer, but as digital experiences continue…

Read More →

Designing With Code

Wall Street Journal design director Matthew Ström on something near and dear to me: the link between code and design tools: We’re in the middle of a design tool renaissance. In the 8 years since Sketch 1.0 was released, there’s been a wave of competition among traditional design tools. And as the number of tools available to designers grows exponentially, ideas that were once considered fringe are finding a broader audience. One of these ideas will significantly change the way digital products are designed: integrating design and code at a deep level. Figma can update a React code base in real time; InVision, Abstract, and Zeplin have done away with design-developer handoff documents; Framer’s new Framer X can render interactive React components directly into its workspace. These examples are just a hint of what’s to come. Matthew then looks at how this combination of code and design has been improving…

Read More →

How Hardware and Design Collaborate

Viget’s dedication to exploration and innovation has led to the existence of our hardware lab and several awesome hardware projects over the past few years. Hardware’s exciting, with new technologies and possibilities emerging every day. For those of us at Viget who are not on the hardware team though, it means we’re never quite sure what’s feasible in the realm of hardware. But as our hardware projects have become more sophisticated and in-depth, the hardware team (i.e. Justin and sometimes Eli) can’t do it all alone anymore! So how does hardware collaborate with another team, like the design team? Justin and I had to solve that very problem recently on an ever evolving sales lead. Adult Swim reached out to us, interested in creating something for their physical space at San Diego Comic-Con that would be fun, interactive, and engage their fans. It was a perfect opportunity for our imaginations…

Read More →

Web Backend Applications Developer – Trivera Interactive – Menomonee Falls, WI

We need our developers to relate and interact well with customers. Your experience with Concrete5, Joomla!, Drupal and/or and WordPress will help you hit the…From Indeed – Fri, 24 Aug 2018 16:47:35 GMT – View all Menomonee Falls, WI jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

ABeamer: a frame-by-frame animation framework

In a recent post, Zach Saucier demonstrated the awesome things that the DOM allows us to do, thanks to the <canvas> element. Taking a snapshot of an element and manipulating it to create an exploding animation is pretty slick and a perfect example of how far complex animations have come in the last few years. ABeamer is a new animation ecosystem that takes advantage of these new concepts. At the core of the ecosystem is the web browser animation library. But, it’s not just another animation engine. ABeamer is designed to build frame-by-frame animations in the web browser and use a render server to generate a PNG file sequence, which can ultimately be used to create an animated GIF or imported into a video editor. First, a little about what ABeamer can do A key feature is its ability to hook into remote sources. This allows us to build an…

Read More →

Building Battleship in CSS

This is an experiment to see how far into an interactive experience I can get using only CSS. What better project to attempt than a game? Battleship seemed like a good challenge and a step up from the CSS games I’ve seen so far because it has the complexity of multiple areas that have to interact with two players. Wanna see the complete game? View Repo View Demo Oh, you wanna learn how it works? Let’s dig in. I could tell right away there was going to be a lot of repetitive HTML and very long CSS selectors coming, so I set up Pug to compile HTML and Less to compile CSS. This is what all the code from here on is going to be written in. Interactive elements in CSS In order to get the game mechanics working, we need some interactive elements. We’re going to walk through each…

Read More →

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

I got the idea for doing something of the kind when I stumbled across this interactive SVG pie chart. While the SVG code is as compact as it gets (a single <circle> element!), using strokes for creating pie chart slices is problematic as we run into rendering issues on Windows for Firefox and Edge. Plus, in 2018, we can accomplish a lot more with a lot less JavaScript! AI got the following result down to a single HTML element for the chart and very little JavaScript. The future should completely eliminate the need for any JavaScript, but more on that later. The final pie chart result. Some of you may remember Lea Verou’s Missing Slice talk—my solution is based on her technique. This article dissects how it all works, showing what we can do in terms of graceful degradation and other ways this technique can be put to use. The…

Read More →

The Cost of JavaScript in 2018

Even though we mentioned it earlier, I thought this outstanding post by Addy Osmani all about the performance concerns of JavaScript was still worth digging into a little more. In that post, Addy touches on all aspects of perf work and how we can fix some of the most egregious issues, from setting up a budget to “Time-to-Interactive” measurements and auditing your JavaScript bundles. Embrace performance budgets and learn to live within them. For mobile, aim for a JS budget of < 170KB minified/compressed. Uncompressed this is still ~0.7MB of code. Budgets are critical to success, however, they can’t magically fix perf in isolation. Team culture, structure and enforcement matter. Building without a budget invites performance regressions and failure. Super specific and super practical! Surprisingly, Addy mentions that “the median webpage today currently ships about 350KB of minified and compressed JavaScript,” which seems like an awful lot lower than I’d…

Read More →

Ceci n’est pas une prototype.

Recently, I’ve been inundated with promotions for new design tools, all promising that they will bridge the gap between design and code. While that is a noble endeavor, I disagree with their premise. Colm Tuitte from Modulz sums up the supposed problem: “Even the most powerful UI design tools are just drawing tools that export disposable assets.” It’s a common critique. Even the most “advanced” digital design tools are based on workflows for drawing mere pictures of interfaces.— Daniel Eden (@_dte) July 28, 2017 These statements imply that UI design work that can’t be exported directly into code is a wasted effort. I think we’ve lost sight of what design tools are actually for. Magritte’s The Treachery of Images, which includes the statement “This is not a pipe,” reveals that this is a representation of a pipe, not the pipe itself. Similarly, current critique of design tools asserts that they are…

Read More →

VS Code extensions for the discerning developer palette

I am a VS Code extension snob. I like to hunt down the most obscure extensions for VS Code — the ones that nobody knows about — and impress people at parties with my knowledge of finely aged and little-known VS Code capabilities… then watch as they look around desperately for someone else to talk to. It’s like the “Sideways” of VS Code. In my endless pursuit of the perfect VS Code setup, I reached out to my colleagues here on the Azure team and asked them to share their favorite extension in their own words. So clear your pallet and breathe in the aromatic flavors of productivity; I am your VS Code Extension Sommelier. Christina Warren – Settings Sync I cannot live without this extension. If you use multiple machines (especially on multiple platforms, where a sym-linked Dropbox folder won’t really work), this extension is for you. It syncs…

Read More →

Framer X

Framer X is a brand new app that’s about to be released and this quick demo reel takes us on a tour through some of the changes to the previous app—it all looks super exciting. As a designer, I’m most interested in the prototyping tools and being able to quickly explore complex scene transitions between one state and another. But as a developer, I’m interested in how it all ties into React. The website describes it like so: Use actual React in your projects to create interactive components from scratch. Want more control? Create custom UI in the properties panel for your components. I can imagine a wonderful near-future where it’s possible to tie Framer X into a design system so that folks on a team can use all the real life React components without having to worry if they’re up-to-date or not. Direct Link to Article — PermalinkThe post…

Read More →

Introduction to Website Building with Drupal

Start:  2018-09-14 10:00 – 16:00 America/New_York Organizers:  rgs davidhernandez Event type:  Training (free or commercial) https://www.ffwagency.com/learning 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: Students must bring their own laptop computer. Why is this class free? Providing this class free of charge is one…

Read More →

PHP Developer with WordPress – Bluefire Interactive – Lake Stevens, WA

CMS Platforms like Joomla, or Drupal. Bluefire Interactive is currently a virtual company (work from home) with plans to open up an office in Everett, WA in the…From Indeed – Wed, 25 Jul 2018 17:11:34 GMT – View all Lake Stevens, WA jobs Source: http://rss.indeed.com/rss?q=Drupal+Developer

Build a state management system with vanilla JavaScript

Managing state is not a new thing in software, but it’s still relatively new for building software in JavaScript. Traditionally, we’d keep state within the DOM itself or even assign it to a global object in the window. Now though, we’re spoiled with choices for libraries and frameworks to help us with this. Libraries like Redux, MobX and Vuex make managing cross-component state almost trivial. This is great for an application’s resilience and it works really well with a state-first, reactive framework such as React or Vue. How do these libraries work though? What would it take to write one ourselves? Turns out, it’s pretty straightforward and there’s an opportunity to learn some really common patterns and also learn about some useful modern APIs that are available to us. Before we get started, it’s recommended that you have an intermediary knowledge of JavaScript. You should know about data types and…

Read More →

Back to Top