Viget Articleshttps://www.viget.com/
Articles written by Vigeten-usSun, 18 Feb 2018 07:19:38 +0000Sun, 18 Feb 2018 07:19:38 +0000Common Connected Hardware Blundershttp://feedproxy.google.com/~r/VigetAdvance/~3/7Z8gZHRx73A/
https://www.viget.com/articles/common-connected-hardware-blunders/Tue, 13 Feb 2018 19:34:00 +0000Justin SinichkoCodeHardware<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<p>Over the last few years we’ve worked with a number of startups who have engaged with Viget for help designing or engineering some aspect of their connected product. Every product is unique, but it may surprise you how similar their challenges are. What is perhaps less surprising is the number of inventive ways we’ve seen solo-entrepreneurs, young startups, and even internal business units with firm foundations go about solving those challenges. I’ll take a moment to reflect on some of those challenges and specifically call attention to the missteps and follies we commonly see early-on in engagements.</p>
</div>
</div>
<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<h2>Building the wrong prototype</h2>
<p>Viget builds primarily two different kinds of product prototypes. A <strong>stakeholder prototype</strong>, which focuses on delivering desired functionality by leveraging as many pre-existing solutions as possible. And a <strong>functional prototype</strong>, which&nbsp;focuses on exploring production options by honing in on core mechanics and functionality. Both prototypes serve specific needs which often correlate with the natural phases of product development. Sometimes the prototype should support buy-in for an idea, other times it should help sell the path forward.</p>
<p><br></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/pelican_prototype.jpg?mtime=20180215101836" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/pelican_prototype.jpg?mtime=20180215101836 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/pelican_prototype.jpg?mtime=20180215101836 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/pelican_prototype.jpg?mtime=20180215101836 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
<div class="wrapper--narrow">
<figcaption class="image-block__caption">Two stakeholder prototypes for a recent client</figcaption>
</div>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>In both situations the prototype is the center of attention. The prototype is what you share with your team, your boss, investors, and your crowd-sourced customers (even your mom!). Because of the spotlight, it needs to behave in ways that put a good foot forward. This is why we’re so surprised when we come across cobbled-together assemblies that supposedly represent a product vision. It might only&nbsp;<em>work</em>&nbsp;because it gets cast alongside a tremendous number of conditions and explanation. I.e:&nbsp;<br></p>
<blockquote>“...ignore this part, focus on this, let me articulate this thing by hand to show you want it WILL do...”</blockquote>
<p>We admire the gumption and eagerness to make things &mdash;&nbsp;especially from our clients&nbsp;&mdash; but instead, consider the alternative: a&nbsp;<strong>self-evident prototype</strong>. A prototype that stands up on its own and clearly articulates a vision. A good litmus test is what you’ll find when you crack open the enclosure of a connected prototype. Is it something you are proud to share? Or is it a rat's nest of wires with indeterminable purpose? Why not invest the extra time, and the extra money, and dedicate some effort to articulating an effective product vision? Build the prototype that serves its specific purpose and can survive being the center of attention. Anything less and you are wasting time by building the wrong prototype.</p>
</div>
</div>
<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<h2>Waiting for perfection</h2>
<p>Developing connected products, like anything, is a balancing act. Wait too long and over-build a prototype and you’ll become overly invested in one direction. A tempering thought to keep in mind: every day spent on product development is a day not on the market. Future you is absolutely going to miss out on that revenue. </p>
<p>Finding the right balance stems from experience. Very plainly, it’s important to figure out which features are necessary for achieving present business goals. This gets complicated, fast, because those objectives change. Connected products benefit from a maturing market which will support any number of value-add services, and business want the flexibility to explore and ultimately choose the <em>right one.</em></p>
<p>Take a look at <a href="https://www.helium.com/">Helium</a> as an example. This team has iterated for well over three years on a concept where the underlying technology has morphed just as often as their business. Over time they have developed strong relationships with their community, their customers, and their investors -- demonstrating an ability to not only deliver useful products to the customers they have today, but also develop products for the customers they want tomorrow.</p>
<p></p>
</div>
</div>
<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<h2>Restless Bill of Materials</h2>
<p>Another source of pain I see are business decisions which needlessly accelerate product evolution. A good example is the price of a bill of materials (BOM) conflicting with business or marketing objectives.</p>
<p>Consider a fully-developed production-prototype built on the back of specific MCUs, peripherals, toolings, and plastics. The cost of adjusting this BOM late-stage is significant, not to mention a collective headache. However it is a common occurrence because around the time that something is ready to enter production its total in-the-box cost can be scrutinized. It is around this time a product team will receive an email along these lines:</p>
<blockquote>“We’re trying to keep the device costs down to x, we hit a snag here and so we’re currently at y, anything we can we do?”</blockquote>
<p>The product team will take a good look at low-hanging fruit already earmarked as extravagance.</p>
<blockquote>“We’re currently platformed on x but can go to y which costs z less. But it means we’ll need to re-develop portions of the firmware, re-route this, calibrate that, etc”</blockquote>
<p>Unlike software, hardware is generally less forgiving to constant tweaks and adjustments. It’s an all around better thing to simply nail to the wall correctly the first time. But that is obviously a hard mark to hit, so what options exist?</p>
<ol><li>Go to market regardless with the higher price point.</li><li>Go to market with the lower (desired) price point. Take it out of the margin, or eat it. Make it up with scale or an equally performant but lower cost v2 in the future.</li><li>Account for the long-term upside of value-add cloud services (subscription, etc).</li></ol>
<p>I really like options two and three, businesses that maintain a price point and develop margins over time. This is complex to model, and more complex to convey to investors or other stakeholders. However, it keeps the right priorities in place: ship early, develop value-add services, cultivate relationships with suppliers.</p>
<p>Ultimately a restless BOM is indicative of teams not truly collaborating together. There are strategies to hurdle specific challenges, and even aid with hardware versioning, but if the BOM is constantly changing there is little opportunity to build valuable services on top a hardware foundation. And, based on our experience, those value-add services are what matter the most to a connected product businesses.</p>
<p>Hit a snag manufacturing your connected product? Tell us about it below or <a href="https://www.viget.com/contact/">contact us</a>.</p>
<p></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/7Z8gZHRx73A" height="1" width="1" alt=""/>https://www.viget.com/articles/common-connected-hardware-blunders/Design Systems: Building a Parts Kithttp://feedproxy.google.com/~r/VigetAdvance/~3/RYmKzop-AdA/
https://www.viget.com/articles/design-systems-building-a-parts-kit/Mon, 05 Feb 2018 05:00:00 +0000Jeremy FieldsDesign & ContentFront-end EngineeringDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><em>In our </em><a href="https://www.viget.com/articles/category/design-systems/"><em>series</em></a><em> on </em><a href="https://www.viget.com/services/design-systems/"><em>design systems</em></a><em>, we’ve discussed the advantages and approaches to creating a system from a design perspective. In this post, I’d like to cover some of the technical benefits of a well-organized built design system, or “parts kit”.</em></p>
<p>By now, you’re <a href="https://www.viget.com/articles/design-systems-why-now/">hopefully</a> <a href="https://www.viget.com/articles/design-systems-problems-solutions/">convinced</a> of the <a href="https://www.viget.com/articles/design-systems-where-to-begin/">benefits</a> of a design system and are ready to invest the time and money to partner with an agency, like Viget, to create something that achieves your vision. The next step will be to apply it to your digital platforms by <em>building it</em>. But wait! If the design system represents your vision and investment, a good parts kit is like insurance that protects that vision when it goes out into the world. </p>
<h2>The Importance of Building it Right</h2>
<p>A well-constructed parts kit has many benefits that can ensure the consistency and longevity of a design system. The investment in development quality is equally important to the investment in design and will have a long-lasting effect on the success of the system.</p>
<h3>Systems Are Easier to Maintain and Extend</h3>
<p>One of the lesser-known challenges of building and launching a site is efficiently maintaining it <em>after</em> it’s launched. Ongoing work, big and small, can quickly bloat a codebase as developers unfamiliar with the project (or even original developers once they’ve moved on to other projects) drop in for bug fixes and new features. Without a system, these developers are forced to recreate the wheel every time, adding more and more to the codebase, making it unwieldy over time. With a well-organized system and parts kit for reference, developers can leverage past work to create new things. In some cases, new features and entire pages can be built with little or no addition to the parts kit.</p>
<h3>Systems Lead to Better Code</h3>
<p>Most developers, including the ones here at Viget, revel in building modular and systematized code. If you look under the hood of a site that’s made up of seemingly all unique parts and layouts, there will still be an underlying system that a developer sussed out. That’s because creating a system is at the heart of the <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself">DRY</a> (Don’t Repeat Yourself) principle. Whether it’s a high-impact marketing site or a structured UI system for an application, building in a systematic and modular way results in well-organized and efficient code.</p>
<h3>Systems Improve Workflow and Collaboration</h3>
<p>In the same way that a visual design system communicates branding and consistency and provides a “source of truth” for everyone who needs to work with it, we have found that a parts kit is essential in a variety of working situations:</p>
<h4>Post-Launch Transition to Client Team</h4>
<p>Some of our projects result in turning over the day-to-day running of a site to an internal web team. From ongoing maintenance to adding new pages and features, building from, or extending, a parts kit is considerably faster and results in better consistency with the original system.</p>
<h4>Framework Hand-Off</h4>
<p>In other cases, the parts kit is itself the deliverable. For <a href="https://www.viget.com/work/rotary-org/">Rotary International</a>, we worked with their highly-capable and enthusiastic internal development team to deliver a framework specific to their design and content strategy. Their team integrated our work with their content management system for a site refresh and continue to utilize it as they produce new content.</p>
<h4>Agency-Client Collaboration or Staff Augmentation</h4>
<p>Whenever we work closely with external designers or developers, having a shared vocabulary is an essential communication tool. In building a parts kit, accessible by everyone on both teams, we’re able to have a reference point for conversations, whether it’s about design, interactivity, or quality assurance testing (QA).</p>
<h3>Systems Expose and Enforce Design Consistency</h3>
<p>Let’s face it, the design and review process can be brutal on design systems. On one project, I counted over 40 shades of gray that had sprawled like a family tree over successive generations of comps and revisions. In a built-what-you-see approach, I would have incorporated every color into the codebase and lost any structure around what gray was used for what. Instead, taking a systematic approach, I collected all the shades and presented them to the designer (he was embarrassed) so he could consolidate them down to a tidy eight. In this example, building with a system in mind allowed me to critically look at small variants in the design system and normalize them into a more streamlined and maintainable codebase.</p>
<h3>Systems Provide a Deliverable And “Source of Truth”</h3>
<p>As is discussed in many of the above examples, a parts kit can be a lasting and valuable reference for the original work. As sites grow and age, one of the keys to maintaining a consistent look and feel across all content, new and old, is to constantly refer back to the parts kit as the “source of truth”. Using it as a guiding light, future developers and content contributors can work more quickly and efficiently while maintaining the original vision of the design system.</p>
<h2>Wrap Up</h2>
<p>Building a design system into a parts kit is where the rubber meets the road &mdash; a static design becomes an interactive, usable thing. At Viget, we believe that a rigorous design process should be matched with equally robust development.</p>
<h3>Resources</h3>
<ul><li><a href="https://www.smashingmagazine.com/2017/10/large-scale-design-system-us-government/">Building A Large-Scale Design System For The U.S. Government (Case Study) &mdash; Smashing Magazine</a></li><li><a href="https://www.designbetter.co/design-systems-handbook/building-design-system">Design Systems Handbook - DesignBetter.Co</a></li><li><a href="https://airbnb.design/building-a-visual-language/">Building a Visual Language – Airbnb Design</a></li></ul>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/RYmKzop-AdA" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-building-a-parts-kit/Design Systems: The Partshttp://feedproxy.google.com/~r/VigetAdvance/~3/DcVje4fuf1k/
https://www.viget.com/articles/design-systems-the-parts/Thu, 01 Feb 2018 10:00:00 +0000Tom OsborneDesign & ContentDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>In our <a href="https://www.viget.com/articles/design-systems-where-to-begin/">last article</a>, we explored why you might seek help getting started on your Design System and where to begin. Now, we’ll explore what goes into one.<br></p>
<h2>What goes into a Design System?</h2>
<p>There are some differing opinions on exactly what goes into a Design System and how best to structure the inventory. From what I’ve seen, the differences from one system to another are mostly about nomenclature and how best to organize things. For us, we’ve largely defined Design Systems as "a digital library of guidelines and resources."&nbsp;</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_900xAUTO_crop_center-center/Design-System-Outline.png?mtime=20180131144408" alt=""
srcset="https://static.viget.com/_450xAUTO_crop_center-center/Design-System-Outline.png?mtime=20180131144408 450w,
https://static.viget.com/_900xAUTO_crop_center-center/Design-System-Outline.png?mtime=20180131144408 900w,
https://static.viget.com/_1800xAUTO_crop_center-center/Design-System-Outline.png?mtime=20180131144408 1800w"
sizes="(min-width: 901px) 1800px,
(min-width: 451px) 900px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h2>Guidelines</h2>
<p>Simply put, these are the documented standards&mdash;a place to go to see examples and written descriptions to better understand usages patterns. We break them up into two primary categories: Style Guidelines and UI Guidelines.</p>
<h3>Style Guidelines</h3>
<p>These are the perceptual patterns that are core to the brand, from principles to voice and tone guidance.</p>
<h4>Examples:</h4>
<ul><li>Principles</li><li>Colors</li><li>Typography</li><li>Voice & Tone</li><li>Logos & Identity</li><li>Accessibility</li><li>Motion</li><li>Sound</li></ul>
<h3>UI Guidelines</h3>
<p>These are the building blocks of your user interface (UI) design&mdash;the functional patterns. It’s worth noting&nbsp;you may see other organizations call this a Component Library or Pattern Library&mdash;we like UI Guide as a nice complement to a Style Guide.</p>
<p>Here’s a list of things you might find in a UI Guide. Note this list only includes some of the more common components for brevity&mdash;to see what a long list looks like view&nbsp;<a href="https://www.lightningdesignsystem.com/guidelines/overview/">Salesforce’s Lightning Design System</a>.</p>
<h4>Examples:</h4>
<ul><li>Alerts</li><li>Avatars</li><li>Badges</li><li>Blockquotes</li><li>Breadcrumbs</li><li>Buttons</li><li>Captions</li><li>Cards</li><li>Carousels</li><li>Checkboxes</li><li>Data Tables</li><li>Dividers</li><li>Drawers</li><li>Grid</li><li>Headings</li><li>Iconography</li><li>Lists</li><li>Pagination</li><li>Paragraphs</li><li>Progress Indicators</li><li>Radio Buttons</li><li>Select Boxes</li><li>Spacing</li><li>Tabs</li><li>Tags</li><li>Text Fields</li><li>Toggles</li><li>Tool Tips</li></ul>
<h2>Resources</h2>
<p>This is where you go for usable parts, whether it be source files or code samples. In our organization, we often refer to these as a “Parts Kits” and separate them into two categories: one by designers and one by developers. Audiences vary based on needs, but the use case is usually a means of helping to build, extend, and maintain your Design System across an ecosystem of touch points.</p>
<h3>Design Toolkit</h3>
<p>These are the source files (usually) created by a designer and made available for download.</p>
<h4>Examples:</h4>
<ul><li>Logos</li><li>Licensed Fonts</li><li>Color Palettes</li><li>Icon Libraries</li><li>Graphics (patterns, textures, etc.)</li><li>Page templates</li><li>Design Source files (Sketch, Photoshop, Figma, etc.)</li></ul>
<h3>Developer Toolkit</h3>
<p>These are the usable parts, samples, and examples made by a developer for use and reference.</p>
<h4>Examples:</h4>
<ul><li>Modular components</li><li>Code snippets</li><li>Page builders</li></ul>
<h3>In Summary</h3>
<p>I hope this gives you a good idea of how Design Systems can be structured. Quite honestly, they come in all shapes and sizes. Even if you only have a small portion of what you see listed in this article, you’ll already have the beginning of one. After all, Design Systems are meant to expand and evolve over time so getting started can be easy.</p>
<p><em>For further exploration, here are a few examples of Design Systems that we like:</em></p>
<h4>Examples:</h4>
<ul><li><a href="https://www.lightningdesignsystem.com/">Salesforce's Lightning Design System</a></li><li><a href="https://atlassian.design/">Atlassian's End-to-End Design Language</a></li><li><a href="https://design.trello.com/">Trello's Nachos</a></li></ul>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/DcVje4fuf1k" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-the-parts/Set Up AWS CLI and Download Your S3 Files From the Command Linehttp://feedproxy.google.com/~r/VigetAdvance/~3/tpmI9D56qOg/
https://www.viget.com/articles/set-up-aws-cli-and-download-your-s3-files-from-the-command-line/Wed, 31 Jan 2018 10:00:00 +0000Henry Bley-VromanCodeFront-end EngineeringContent Management<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h1><span class="md-expand"></span></h1>
<p>The other day I needed to download the contents of a large S3 folder. That is a tedious task in the browser: log into the AWS console, find the right bucket, find the right folder, open the first file, click download, maybe click download a few more times until something happens, go back, open the next file, over and over. Happily, Amazon provides&nbsp;<span <the="" other="" day="" i="" needed="" to="" download="" the="" contents="" of="" a="" large="" s3="" folder.="" that="" is="" tedious="" task="" in="" browser:="" log="" into="" aws="" console,="" find="" right="" bucket,="" folder,="" open="" first="" file,="" click="" download,="" maybe="" few="" more="" times="" until="" something="" happens,="" go="" back,="" next="" over="" and="" over.="" happily,="" amazon="" provides="" <="" span=""><strong>AWS CLI</strong></span>, a command line tool for interacting with AWS. With AWS CLI, that entire process took less than three seconds:</p>
<pre>
$ aws s3 sync s3://&lt;bucket&gt;/&lt;path&gt; &lt;/local/path&gt;</pre>
<p><span class="md-line md-end-block" cid="n1027" mdtype="line">Getting set up with AWS CLI is simple, but the documentation is a little scattered. Here are the steps, all in one spot:</span></p>
<h2>1. Install the AWS CLI</h2>
<p><span class="md-line md-end-block" cid="n1030" mdtype="line">You can install AWS CLI for any major operating system:</span></p>
<ul><li><span class="md-line md-end-block" cid="n1034" mdtype="line"><strong>macOS</strong> (the <a href="http://docs.aws.amazon.com/cli/latest/userguide/cli-install-macos.html" spellcheck="false">full documentation</a> uses <code>pip</code>, but <a href="https://brew.sh/" spellcheck="false">Homebrew</a> works more seamlessly):</span><p></p><pre>
$ brew install awscli</pre>
</li><li><span class="md-line md-end-block" cid="n1038" mdtype="line"><strong>Linux</strong> (<a href="http://docs.aws.amazon.com/cli/latest/userguide/awscli-install-linux.html" spellcheck="false">full documentation</a>):</span><p></p><pre>
$ pip install awscli</pre>
</li><li><span class="md-line md-end-block" cid="n1042" mdtype="line"><strong>Windows</strong> (<a href="http://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html" spellcheck="false">full documentation</a>):</span><p></p><p><span class="md-line md-end-block" cid="n1044" mdtype="line">Download the installer from <a href="http://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html">http://docs.aws.amazon.com/cli/latest/userguide/awscli-install-windows.html</a></span></p></li></ul>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<h2>2. Get your access keys</h2>
<p>Documentation for the following steps is <a href="http://docs.aws.amazon.com/cli/latest/userguide/cli-chap-getting-started.html">here</a>.</p>
<ol>
<li>Log into the <a href="https://console.aws.amazon.com/iam/home?#home">IAM Console</a>.</li>
<li>Go to <strong>Users</strong>.
<kbd><img src="https://static.viget.com/_200xAUTO_crop_center-center/aws-cli-1-users.png?mtime=20180125160134" alt="AWS web interface for viewing all users" /></kbd></li>
<li>Click on your <strong>user name</strong> (the name not the checkbox).
<kbd><img src="https://static.viget.com/_639xAUTO_crop_center-center/aws-cli-2-user.png?mtime=20180125160149" alt="AWS web interface for managing a user" /></kbd></li>
<li>Go to the <strong>Security credentials</strong> tab.
<kbd><img src="https://static.viget.com/_581xAUTO_crop_center-center/aws-cli-3-security-credentials.png?mtime=20180125160148" alt="AWS web interface for viewing user security credentials" /></kbd></li>
<li>Click <strong>Create access key</strong>. Don't close that window yet!
<kbd><img src="https://static.viget.com/_801xAUTO_crop_center-center/aws-cli-4-create-key.png?mtime=20180125160151" alt="AWS web interface for creating a new access key" /></kbd></li>
<li>You'll see your <strong>Access key ID</strong>. Click "Show" to see your <strong>Secret access key</strong>.
<kbd><img src="https://static.viget.com/_1166xAUTO_crop_center-center/aws-cli-5-keys.png?mtime=20180125160150" alt="AWS web interface for revealing your secret key" /></kbd></li>
<li>Download the key pair for safe keeping, add the keys to your password app of choice, or do whatever you do to keep secrets safe. Remember this is the last time Amazon will show this secret access key.</li>
</ol>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h2><span class="md-expand">3. Configure AWS CLI</span></h2>
<p><span class="md-line md-end-block" cid="n1072" mdtype="line">Run <code>aws configure</code> and answer the prompts.</span></p>
<p><span class="md-line md-end-block" cid="n1074" mdtype="line">Each prompt lists the current value in brackets. On the first run of <code>aws configure</code> you will just see <code>[None]</code>. In the future you can change any of these values by running <code>aws cli</code> again. The prompts will look like <code>AWS Access Key ID [****************ABCD]</code>, and you will be able to keep the configured value by hitting return.</span></p>
<pre>
$ aws configure
AWS Access Key ID [None]: &lt;enter the access key you just created&gt;
AWS Secret Access Key [None]: &lt;enter the secret access key you just created&gt;
Default region name [None]: &lt;enter region - valid options are listed below &gt;
Default output format [None]: &lt;format - valid options are listed below &gt;</pre>
<ul><li><p>Valid region names (<a href="http://docs.aws.amazon.com/powershell/latest/userguide/pstools-installing-specifying-region.html" spellcheck="false">documented here</a>) are</p>
<table><thead><tr><th><span class="td-span" cid="n1082" mdtype="table_cell"><strong>Region</strong></span></th><th><span class="td-span" cid="n1083" mdtype="table_cell"><strong>Name</strong></span></th></tr></thead><tbody><tr><td><span class="td-span" cid="n1085" mdtype="table_cell">ap-northeast-1</span></td><td><span class="td-span" cid="n1086" mdtype="table_cell">Asia Pacific (Tokyo)</span></td></tr><tr><td><span class="td-span" cid="n1088" mdtype="table_cell">ap-northeast-2</span></td><td><span class="td-span" cid="n1089" mdtype="table_cell">Asia Pacific (Seoul)</span></td></tr><tr><td><span class="td-span" cid="n1091" mdtype="table_cell">ap-south-1</span></td><td><span class="td-span" cid="n1092" mdtype="table_cell">Asia Pacific (Mumbai)</span></td></tr><tr><td><span class="td-span" cid="n1094" mdtype="table_cell">ap-southeast-1</span></td><td><span class="td-span" cid="n1095" mdtype="table_cell">Asia Pacific (Singapore)</span></td></tr><tr><td><span class="td-span" cid="n1097" mdtype="table_cell">ap-southeast-2</span></td><td><span class="td-span" cid="n1098" mdtype="table_cell">Asia Pacific (Sydney)</span></td></tr><tr><td><span class="td-span" cid="n1100" mdtype="table_cell">ca-central-1</span></td><td><span class="td-span" cid="n1101" mdtype="table_cell">Canada (Central)</span></td></tr><tr><td><span class="td-span" cid="n1103" mdtype="table_cell">eu-central-1</span></td><td><span class="td-span" cid="n1104" mdtype="table_cell">EU Central (Frankfurt)</span></td></tr><tr><td><span class="td-span" cid="n1106" mdtype="table_cell">eu-west-1</span></td><td><span class="td-span" cid="n1107" mdtype="table_cell">EU West (Ireland)</span></td></tr><tr><td><span class="td-span" cid="n1109" mdtype="table_cell">eu-west-2</span></td><td><span class="td-span" cid="n1110" mdtype="table_cell">EU West (London)</span></td></tr><tr><td><span class="td-span" cid="n1112" mdtype="table_cell">sa-east-1</span></td><td><span class="td-span" cid="n1113" mdtype="table_cell">South America (Sao Paulo)</span></td></tr><tr><td><span class="td-span" cid="n1115" mdtype="table_cell">us-east-1</span></td><td><span class="td-span" cid="n1116" mdtype="table_cell">US East (Virginia)</span></td></tr><tr><td><span class="td-span" cid="n1118" mdtype="table_cell">us-east-2</span></td><td><span class="td-span" cid="n1119" mdtype="table_cell">US East (Ohio)</span></td></tr><tr><td><span class="td-span" cid="n1121" mdtype="table_cell">us-west-1</span></td><td><span class="td-span" cid="n1122" mdtype="table_cell">US West (N. California)</span></td></tr><tr><td><span class="td-span" cid="n1124" mdtype="table_cell">us-west-2</span></td><td><span class="td-span" cid="n1125" mdtype="table_cell">US West (Oregon)</span></td></tr></tbody></table>
<p></p>
</li><li><span class="md-line md-end-block md-focus" cid="n1128" mdtype="line"><span class="md-expand">Valid output formats (</span><a href="http://docs.aws.amazon.com/cli/latest/topic/config-vars.html" spellcheck="false">documented here</a>) are</span><ul><li><span class="md-line md-end-block" cid="n1132" mdtype="line">json</span></li><li><span class="md-line md-end-block" cid="n1135" mdtype="line">table</span></li><li><span class="md-line md-end-block md-focus" cid="n1138" mdtype="line">text</span></li></ul></li></ul>
<h2>4. Use AWS CLI!</h2>
<p><span class="md-line md-end-block" cid="n1141" mdtype="line">In the example above, the <code>s3</code> command's <code>sync</code> command "recursively copies new and updated files from the source directory to the destination. Only creates folders in the destination if they contain one or more files" (from <a href="http://docs.aws.amazon.com/cli/latest/reference/s3/sync.html" spellcheck="false"><code>s3 sync</code>'s documentation</a>). I'm able to download an entire collection of images with a simple</span></p>
<pre>
aws s3 sync s3://s3.aws-cli.demo/photos/office ~/Pictures/work</pre>
<p><span class="md-line md-end-block" cid="n1144" mdtype="line">But AWS CLI can do much&nbsp;more. Check out the comprehensive documentation at <a href="http://docs.aws.amazon.com/cli/latest/index.html" spellcheck="false">AWS CLI Command Reference</a>.</span></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/tpmI9D56qOg" height="1" width="1" alt=""/>https://www.viget.com/articles/set-up-aws-cli-and-download-your-s3-files-from-the-command-line/Two Hardware Lessons from the Front Line: PID Loops and Bootloadinghttp://feedproxy.google.com/~r/VigetAdvance/~3/lkjYPG9N1Zw/
https://www.viget.com/articles/two-hardware-lessons-from-the-front-line/Tue, 30 Jan 2018 10:00:00 +0000Justin SinichkoCodeHardware<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<p>About a year ago, we began collaborating with <a href="https://www.viget.com/work/smart-fragrance-dispenser/">Pura Scents</a> to make their connected fragrance dispenser a reality. Their team had ironed out a concept that people loved, and during a successful Kickstarter campaign, paired it with an aesthetic that sold well. However, they needed next some outside help to bring their connected device to life.</p>
<p>Among the firmware, software, and fleet management aspects were two specific product features with technical intrigue that struck me as worth sharing, firmware/hardware-level features that anyone working within a hardware startup can appreciate.&nbsp;</p>
</div>
</div>
<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<h2>Control systems for targeting and maintaining temperature (or speed, or anything)</h2>
<p>Imagine driving a car with cruise control. How annoying would it be if your car accelerates a bit beyond the target cruise speed then coasts for a moment or two before physics rears its ugly head and your car drops below the desired speed again? This, of course, necessitates another bump in acceleration and thus the cycle repeats. Accelerate, coast, accelerate, coast. That would be annoying and also terribly inefficient.</p>
<p>A better solution is to maintain effort. This, more or less, is what you’ll find written among the first few pages of a process engineers playbook for this situation: proportional–integral–derivative (PID) control.</p>
<p>Instead of turning a heater on whenever the temperature for a fragrance dipped below its optimal burn temperature, we integrated and tuned a PID loop to gradually do that for us. What that actually looks like in practice is a bit of math to determine exactly how much effort to ask from the heater in order to get the temperature back to where it needs to be. However, this approach has one huge negative: it costs more. How?</p>
<p>For PID loops to work, they need to have a reliable feedback mechanism. For heaters, that might look like a custom ceramic heating element that incorporates a thermistor with a wiring harness or pigtail terminating with a JST or similar tag connector. These components add to the bill of materials (BOM) and increases assembly and QA cost. But is the extra cost necessary?</p>
<p>For Pura, we could just as easily map a heater’s level of effort with a temperature to target and maintain an ideal temperature for each fragrance. This meant we wouldn’t need to include any feedback mechanisms in the device. Pura explored the benefits of both approaches (to PID or not to PID) and ultimately decided the performance gain wasn’t there&hellip; it didn’t contribute to a fundamentally better product and would cost consumers more.</p>
<p><em>Lesson: PID loops can be designed and tuned to adjust systems from one state to another. However, their benefits may come at a cost, and those benefits may be easily replicated through some wit.</em></p>
</div>
</div>
<div class="wrapper--narrow page-block -no-amp">
<div class="text" data-module="Text">
<h2>Bootloading for liquid level sensors</h2>
<p>Product engineers are incorporating self-capacitance buttons into an increasing number of products. From my perspective, the uptick is justified because they solve two major problems: 1)They are affordable and 2) do very well in water or dust ingress-prone environments. They &nbsp;are also relatively straightforward circuits with detection areas that can be etched onto PCBs (and optionally controlled with dedicated SOCs that abstract many software-level complexities). Perhaps best of all is their flexibility. Capsense sensors can do far more than just detect the presence of a finger. They can also detect the presence of liquid.</p>
<p>Pura wanted a way to approximate the amount of liquid remaining in either of their two fragrance vials at any time. Like your finger, fragrance oil also has a capacitance. This creates a straightforward path to design a circuit providing some granular amount of liquid-level detail. So, instead of worrying about how the product might change over time, or in what extremes it would need to operate, Pura focused on designing firmware that was both flexible and completely upgradable.</p>
<p>Because the Pura device was connected to the internet, we had the ability to write firmware that was remotely upgradable. For consumers, this enables Pura to continually improve their existing products over time. However, the peripheral chips do not directly have connectivity, but may likely require an upgrade in the future. While it would have been cheap and easy to ship devices with “one and done” capsense sensors that were forever locked into their firmware ways, Pura decided to invest early in a bootloader that enabled their capsense chips to be forever upgradable. And, this investment has already paid dividends. During an initial beta period users helping to improve the device were provided with remote capsense updates to improve fragrance level-readings which, in turned, informed changes to the mobile app.</p>
<p><em>Lesson: Peripheral devices need bootloaders too. Save yourself from future regret and invest early in compatibility. Never expect a first solution to be the best solution a year from now.</em></p><p></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/lkjYPG9N1Zw" height="1" width="1" alt=""/>https://www.viget.com/articles/two-hardware-lessons-from-the-front-line/Design Systems: Design-Development Collaborationhttp://feedproxy.google.com/~r/VigetAdvance/~3/_wJWJXzBsOY/
https://www.viget.com/articles/design-systems-design-development-collaboration/Mon, 29 Jan 2018 10:00:00 +0000Jeremy FieldsDesign & ContentProcessFront-end EngineeringDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><em>In our <a href="https://www.viget.com/articles/category/design-systems/">series</a> on <span class="redactor-unlink"></span><a href="https://www.viget.com/services/design-systems/">design systems</a>, we’ve discussed the advantages and approaches to creating a system from a design perspective. In this post, I’d like to cover some of the new tools that developers and designers are using.</em></p>
<p>There’s been a lot of exciting activity around design tools in the last few years, and it’s changing how designers and developers collaborate. For those uninitiated front-end developers (if you’ve entered the industry in the past few years), building out a design used to mean wading into a designer’s world: Photoshop. Even after years of doing buildouts from Photoshop, I found the interface to be largely unintelligible. If the organization system of the designer is not <a href="https://www.viget.com/articles/handing-off-psds-that-wont-make-your-co-workers-hate-you/">on point</a> you could be in for an even bumpier ride. Developers want to quickly get accurate build information and not worry about layer names, how to turn off a mask to get at an image, or if that turned-off layer is important.</p>
<p>At Viget, we’re constantly evaluating the tools to ensure that they improve our workflow rather than bog it down. In the past year, we’ve been putting the two main design-development collaboration tools, <a href="https://www.viget.com/articles/designers-tooling-around-figma/">Figma</a> and <a href="https://www.viget.com/articles/designers-tooling-around-zeplin/">Zeplin</a>, through their paces. The goals of these two apps are very different: Figma is a design tool with features that reveal buildout information, while Zeplin was built purely to facilitate design handoff. Zeplin still leads the pack in delivering buildout information, but Figma has become our one-tool-to-rule-them-all, particularly because their developer tools are catching up.</p>
<h2>Benefits of a New Workflow</h2>
<p>While some aspects of buildout are true for any project, there are a few particularly important aspects when building a design system, and the right tool or workflow can make all the difference in:</p>
<ul><li>Quickly surfacing <strong>accurate</strong> information about a thing (ex. size, color, position, font).</li><li>Checking for <strong>consistency</strong> in the design across pages to help keep the parts kit small and maintainable.</li><li>Seeing <strong>modular</strong> design patterns and components that can be used as building blocks.</li></ul>
<p>These new apps have made it easier to intuit and build a design system by:</p>
<h3>Providing Ways to See More at Once</h3>
<p>Our designers started the practice of putting every page layout in one artboard in Photoshop, but it didn’t take much for the app to get bogged down and slow. This isn’t the case with Figma, and that’s created benefits all around. For a developer, getting to see the entirety of a design system in one view is a great way to quickly move around multiple parts of a system and pick up on similarities and patterns.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_600xAUTO_crop_center-center/blog-figma-frames.png?mtime=20170814144434" alt=""
srcset="https://static.viget.com/_300xAUTO_crop_center-center/blog-figma-frames.png?mtime=20170814144434 300w,
https://static.viget.com/_600xAUTO_crop_center-center/blog-figma-frames.png?mtime=20170814144434 600w,
https://static.viget.com/_1200xAUTO_crop_center-center/blog-figma-frames.png?mtime=20170814144434 1200w"
sizes="(min-width: 601px) 1200px,
(min-width: 301px) 600px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h3>Giving Quick Access to Information and Keeping Developers Out of Design Tools</h3>
<p>When buildout information, like a font size, can be buried in nested layers, layer comps, or locked up in a mask, it can be time-consuming to navigate the advanced functionality of something as complex as Photoshop. Zeplin and Figma have both made this process light years easier by exposing developer-ready information with a single click.</p>
<p><img src="https://static.viget.com/blog-design-dev.png?mtime=20180125092210"></p>
<h3>Converting Design to Code</h3>
<p>Even better than getting style information with a click is getting the code. Both Zeplin and Figma output copy-and-paste code snippets for an ultra-fast and accurate workflow. Bonus points go to Zeplin for providing a choice of CSS, Sass, SCSS, Less, and Stylus formats and allowing the developer to customize color variable names.</p>
<p><img src="https://static.viget.com/blog-design-dev-2.png?mtime=20180125094932"></p>
<h3>Measuring Everything</h3>
<p>Getting measurements right, both of a thing and between things can be time-consuming. In addition to getting things like font information, Zeplin and Figma provide dimensions and distances for every object, making accurate buildouts a breeze.</p>
<p><img src="https://static.viget.com/blog-design-dev-3.gif?mtime=20180125102206"></p>
<h3>Facilitating Communication</h3>
<p>In the past, questions about a design had to take place separate from the design in email or a chat app like Slack. The best workflow I ever devised was to annotate a screenshot of the design with arrows and comments and send it to the designer for feedback &mdash; very inefficient! With Zeplin and Figma’s built-in commenting system, designers and developers can talk within the context of the design in nearly real time.</p>
<figure><img src="https://static.viget.com/blog-design-dev-4.png?mtime=20180125103152"></figure>
<h2>Wrap Up</h2>
<p>We’re excited to see how these tools evolve as they continue to improve the quality and speed of our workflow. At the time of this writing, along with Zeplin and Figma, there are many other promising tools like <a href="https://sympli.io/">Sympli</a>, <a href="http://utom.design/measure/">Sketch Measure</a>, <a href="https://www.invisionapp.com/feature/inspect">InVision Inspect</a>, and <a href="https://avocode.com/">Avocode</a>. These new entrants should create some great competition.</p>
<p>Do you have experience with one of these tools or comments about the article? Don’t be shy about jumping into the comments!</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/_wJWJXzBsOY" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-design-development-collaboration/Design Systems: Where to Beginhttp://feedproxy.google.com/~r/VigetAdvance/~3/jQAguEewPzo/
https://www.viget.com/articles/design-systems-where-to-begin/Thu, 18 Jan 2018 05:00:00 +0000Tom OsborneDesign & ContentDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>In our <a href="https://www.viget.com/articles/design-systems-problems-solutions/">last article</a>, we explored reasons you might need a Design System and how they can help. If you’re interested in the promises a Design System can offer, you might be wondering if you need help and where to start. This article is written with that in mind.<br></p>
<h2>Why hire an agency? Why not DIY?</h2>
<p>It’s true that many large companies are beginning to address the need for Design Systems from within their organization. So, why work with an agency when you can start working on this yourself? Here are a few important reasons:</p>
<h3>Scale </h3>
<p>We can scale according to your needs&mdash;either by doing everything for you or by supplementing your in-house team. An agency has, by design, a diversity of roles&mdash;everything from UX, design, copywriting, and development. We have specialists who can consult on your work who you wouldn’t otherwise hire. Maybe you have developers but zero to few designers. Maybe your designers are already at capacity on internal projects or focused on other matters.</p>
<h3>Timing</h3>
<p>Hiring and ramping up a solid team is a lengthy process. An agency has a team that can begin immediately. We regularly adjust our long-term planning to account for schedule fluidity and can usually assemble a team quickly for pressing needs. If you need additional resources, it’s far more likely for us to have availability by someone winding down a project than for you to go through another long hiring cycle to find exceptional talent. </p>
<h3>Quality</h3>
<p>Before you commit to hiring more people it’s a good idea to work with people who know what they are doing. We have a system of accountability to ensure that the work we do is technically correct, extensible, and of a high caliber. We have high standards when it comes to recruiting and only hire the best. &nbsp;</p>
<h3>Expertise</h3>
<p>Maybe an agency has a reputation of being leaders or innovators in an emerging area for you. Within each area of expertise, we take time for professional development within our groups and as individuals. We believe in lifelong learning and continual growth. As an agency, we’re exposed to a variety of industries and companies that are at varying stages of growth. We pay attention to emerging technologies and invest time into learning more about the ones we believe in. </p>
<h3>Advice</h3>
<p>We can offer advice on how best to organize your assets and what to look for if you’re thinking of&nbsp;bringing expertise in-house more gradually. An agency may be better positioned to look at products and services across a large organization, whereas internal teams may be too focused on a single product or service to see the larger picture.</p>
<h2>How do we get started?</h2>
<p>Maybe you’re thinking you need a Design System but don’t really know where to start. As we see it, there are three primary entry points&mdash;evolving your existing system, revolutionizing with a redesign, or starting from scratch.</p>
<h3>Evolution</h3>
<p>If you’re a large organization that’s been operating in digital for years, there’s a good chance that you simply need to reverse engineer what you have into a better organized system. In this case, we typically start with an audit of your system to see what you have and look for patterns and inconsistencies. From here, we would take things into a fairly typical research, design, build, launch, analyze, and repeat lifecycle. In a case like this where we’re starting with what you already have, we’d recommend working in agile sprints that could coincide with your existing release cycles.</p>
<h3>Revolution</h3>
<p>Sometimes we’re faced with an opportunity to take what you have and completely revamp it&mdash;often referred to as a redesign. This is often the biggest lift because it involves research to better understand what got you to where you are and where you’d like to go from here. Sometimes it’s as simple as a reskin&mdash;a focus on improving the look and feel without thinking more strategically about the possibilities. Preferably, we’re also helping you with your objectives to better help you tie everything back to your vision and mission, positioning, and messaging with great thought, care, and detail put into your look and feel as well as your voice and tone. In this case, we recommend a more strategic approach which would likely involve staggered sprints based on milestones catered to your needs. </p>
<h3>Creation</h3>
<p>If you’re a smaller organization just starting out, we’d likely go through a slightly different process. We wouldn’t necessarily need an audit of your existing system, but we’d still want to do proper research to get to know you and your competitive advantages better. It’s likely in this scenario that we’d spend more exploratory time up front to figure out what would work best for you. For this, we’d recommend more of a milestone approach to the design to better cater to you seeing things for the first time. </p>
<h3>Extension</h3>
<p>There's one more area to consider where it might make sense to get help. It's possible you already have a good Design System in place. Where you could be facing challenges is in extending that system further. Maybe you don't have capacity or the right people right now to take what you have and apply it further at the speed you would like. In a case like this, it would be natural for an agency to help you. While we may not be educated about your system out of the gate, we've worked with other companies and their systems and can be quick studies to understand what you have and how to scale in accordance with the system. We can also advise on how to leverage the system to tackle new problems that emerge.&nbsp;</p>
<h2>What goes into a Design System?</h2>
<p>These are just some examples of how an agency, like Viget, will evaluate your needs to know how best to help and where to begin. In our next article, we’ll share more about what goes into a <a href="https://www.viget.com/services/design-systems/">Design System</a> to give you a better picture of what a typical makeup looks like&nbsp;are and what is&nbsp;best for you. </p>
<p></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/jQAguEewPzo" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-where-to-begin/How Do You Todo? A Microcosm / Redux Comparisonhttp://feedproxy.google.com/~r/VigetAdvance/~3/DIBKLfM8mJc/
https://www.viget.com/articles/how-do-you-todo-a-microcosm-redux-comparison/Wed, 17 Jan 2018 12:00:00 +0000Eli FatsiCodeFront-end EngineeringBack-end Engineering<div class="wrapper--narrow page-block">
<div class="text">
<p>For those who don't know, we've been working on our own React framework here at Viget called <a href="http://code.viget.com/microcosm">Microcosm</a>. Development on Microcosm started before Redux had hit the scene and while the two share a number of similarities, there are a few key differences we'll be highlighting in this post.</p>
<p>I've taken the <a href="https://redux.js.org/docs/basics/ExampleTodoList.html">Todo app example</a> from Redux's docs (complete app forked <a href="https://github.com/vigetlabs/redux-v-microcosm/tree/master/redux-todo">here</a>), and implemented my own <a href="https://github.com/vigetlabs/redux-v-microcosm/tree/master/microcosm-todo">Todo app in Microcosm</a>. We'll run through these codebases side by side comparing how the two frameworks help you with different developer tasks. Enough chatter, let's get to it!</p>
<h2>Entry point</h2>
<p>So you've yarnpm installed the dependency, now what?</p>
</div>
</div>
<div class="code-comparison page-block" data-module="CodeComparison" data-collapse="false">
<div class="code-comparison__wrapper" id="code-blocks-19207">
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Redux
// index.js
import React from &#039;react&#039;
import { render } from &#039;react-dom&#039;
import { Provider } from &#039;react-redux&#039;
import { createStore } from &#039;redux&#039;
import todoApp from &#039;./reducers/index&#039;
import App from &#039;./components/App&#039;
let store = createStore(todoApp)
render(
&lt;Provider store={store}&gt;
&lt;App /&gt;
&lt;/Provider&gt;,
document.getElementById(&#039;root&#039;)
)</code></pre>
</div>
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Microcosm
// repo.js
import Microcosm from &#039;microcosm&#039;
import Todos from &#039;./domains/todos&#039;
import Filter from &#039;./domains/filter&#039;
export default class Repo extends Microcosm {
setup () {
this.addDomain(&#039;todos&#039;, Todos)
this.addDomain(&#039;currentFilter&#039;, Filter)
}
}
// index.js
import { render } from &#039;react-dom&#039;
import React from &#039;react&#039;
import Repo from &#039;./repo&#039;
import App from &#039;./presenters/app&#039;
const repo = new Repo()
render(
&lt;App repo={repo} /&gt;,
document.getElementById(&#039;root&#039;)
)</code></pre>
</div>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p>Pretty similar looking code here. In both cases, we're mounting our <code>App</code> component to the root element and setting up our state management piece. Redux has you creating a Store, and passing that into a wrapping Provider component. With Microcosm you instantiate a <a href="http://code.viget.com/microcosm/api/microcosm.html">Repo</a> instance and set up the necessary <a href="http://code.viget.com/microcosm/api/domains.html">Domains</a>. Since Microcosm <a href="http://code.viget.com/microcosm/api/presenter.html">Presenters</a> (from which <code>App</code> extends) take care of the same underlying "magic" access to the store/repo, there's no need for a higher-order component.</p>
<h2>State Management</h2>
<p>This is where things start to diverge. Where Redux has a concept of Reducers, Microcosm has <a href="http://code.viget.com/microcosm/api/domains.html">Domains</a> (and <a href="http://code.viget.com/microcosm/api/effects.html">Effects</a>, but we won't go into those here). Here's some code:</p>
</div>
</div>
<div class="code-comparison page-block" data-module="CodeComparison" data-collapse="false">
<div class="code-comparison__wrapper" id="code-blocks-19209">
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Redux
// reducers/index.js
import { combineReducers } from &#039;redux&#039;
import todos from &#039;./todos&#039;
import visibilityFilter from &#039;./visibilityFilter&#039;
const todoApp = combineReducers({
todos,
visibilityFilter
})
export default todoApp
// reducers/todos.js
const todo = (state = {}, action) =&gt; {
switch (action.type) {
case &#039;ADD_TODO&#039;:
return {
id: action.id,
text: action.text,
completed: false
}
case &#039;TOGGLE_TODO&#039;:
if (state.id !== action.id) {
return state
}
return Object.assign({}, state, {
completed: !state.completed
})
default:
return state
}
}
const todos = (state = [], action) =&gt; {
switch (action.type) {
case &#039;ADD_TODO&#039;:
return [
...state,
todo(undefined, action)
]
case &#039;TOGGLE_TODO&#039;:
return state.map(t =&gt;
todo(t, action)
)
default:
return state
}
}
export default todos
// reducers/visibilityFilter.js
const visibilityFilter = (state = &#039;SHOW_ALL&#039;, action) =&gt; {
switch (action.type) {
case &#039;SET_VISIBILITY_FILTER&#039;:
return action.filter
default:
return state
}
}
export default visibilityFilter</code></pre>
</div>
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Microcosm
// domains/todos.js
import { addTodo, toggleTodo } from &#039;../actions&#039;
class Todos {
getInitialState () {
return []
}
addTodo (state, todo) {
return state.concat(todo)
}
toggleTodo (state, id) {
return state.map(todo =&gt; {
if (todo.id === id) {
return {...todo, completed: !todo.completed}
} else {
return todo
}
})
}
register () {
return {
[addTodo] : this.addTodo,
[toggleTodo] : this.toggleTodo
}
}
}
export default Todos
// domains/filter.js
import { setFilter } from &#039;../actions&#039;
class Filter {
getInitialState () {
return &quot;All&quot;
}
setFilter (_state, newFilter) {
return newFilter
}
register () {
return {
[setFilter] : this.setFilter
}
}
}
export default Filter</code></pre>
</div>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p>There are some high level similarities here: we're setting up handlers to deal with the result of actions and updating the application state accordingly. But the implementation differs significantly.</p>
<p><strong>In Redux</strong>, a Reducer is a function which takes in the current state and an action, and returns the new state. We're keeping track of a list of <code>todos</code> and the <code>visibilityFilter</code> here, so we use Redux's <code>combineReducers</code> to keep track of both.</p>
<p><strong>In Microcosm</strong>, a Domain is a class built to manage a section of state, and handle actions individually. For each action, you specify a handler function which takes in the previous state, as well as <strong>the returned value of the action</strong>, and returns the new state.</p>
<p>In our Microcosm setup, we called <code>addDomain('todos', Todos)</code> and <code>addDomain('currentFilter', Filter)</code>. This hooks up our two domains to the <code>todos</code> and <code>currentFilter</code> keys of our application's state object, and each domain becomes responsible for managing their own isolated section of state.</p>
<p>A major difference here is the way that actions are handled on a lower level, and that's because actions themselves are fundamentally different in the two frameworks (more on that later).</p>
<h2>Todo List</h2>
<p>Enough with the behind-the-scenes stuff though, let's take a look at how the two frameworks enable you to pull data out of state, display it, and trigger actions. You know - the things you need to do on every React app ever.</p>
</div>
</div>
<div class="code-comparison page-block" data-module="CodeComparison" data-collapse="false">
<div class="code-comparison__wrapper" id="code-blocks-19211">
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Redux
// containers/VisibleTodoList.js
import { connect } from &#039;react-redux&#039;
import { toggleTodo } from &#039;../actions&#039;
import TodoList from &#039;../components/TodoList&#039;
const getVisibleTodos = (todos, filter) =&gt; {
switch (filter) {
case &#039;SHOW_ALL&#039;:
return todos
case &#039;SHOW_COMPLETED&#039;:
return todos.filter(t =&gt; t.completed)
case &#039;SHOW_ACTIVE&#039;:
return todos.filter(t =&gt; !t.completed)
default:
return todos
}
}
const mapStateToProps = (state) =&gt; {
return {
todos: getVisibleTodos(state.todos, state.visibilityFilter)
}
}
const mapDispatchToProps = (dispatch) =&gt; {
return {
onTodoClick: (id) =&gt; {
dispatch(toggleTodo(id))
}
}
}
const VisibleTodoList = connect(
mapStateToProps,
mapDispatchToProps
)(TodoList)
export default VisibleTodoList
// components/TodoList.js
import React from &#039;react&#039;
const TodoList = ({ todos, onTodoClick }) =&gt; (
&lt;ul&gt;
{todos.map(todo =&gt;
&lt;li
key = {todo.id}
onClick = {() =&gt; onTodoClick(todo.id)}
style = {{
textDecoration: todo.completed ? &#039;line-through&#039; : &#039;none&#039;
}}
&gt;
{todo.text}
&lt;/li&gt;
)}
&lt;/ul&gt;
)
export default TodoList</code></pre>
</div>
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Microcosm
// presenters/todoList.js
import React from &#039;react&#039;
import Presenter from &#039;microcosm/addons/presenter&#039;
import { toggleTodo } from &#039;../actions&#039;
class VisibleTodoList extends Presenter {
getModel () {
return {
todos: (state) =&gt; {
switch (state.currentFilter) {
case &#039;All&#039;:
return state.todos
case &#039;Active&#039;:
return state.todos.filter(t =&gt; !t.completed)
case &#039;Completed&#039;:
return state.todos.filter(t =&gt; t.completed)
default:
return state.todos
}
}
}
}
handleToggle (id) {
this.repo.push(toggleTodo, id)
}
render () {
let { todos } = this.model
return (
&lt;ul&gt;
{todos.map(todo =&gt;
&lt;li
key={todo.id}
onClick={() =&gt; this.handleToggle(todo.id)}
style={{
textDecoration: todo.completed ? &#039;line-through&#039; : &#039;none&#039;
}}
&gt;
{todo.text}
&lt;/li&gt;
)}
&lt;/ul&gt;
)
}
}
export default VisibleTodoList</code></pre>
</div>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p>So with Redux the setup detailed here is, shall we say ... mysterious? Define yourself some <code>mapStateToProps</code> and <code>mapDispatchToProps</code> functions, pass those into <code>connect</code>, which gives you a function, which you finally pass your view component to. Slightly confusing at first glance and strange that your props become a melting pot of state and actions. But, once you become familiar with this it's not a big deal - set up the boiler plate code once, and then add the meat of your application in between the lines.</p>
<p>Looking at Microcosm however, we see the power of a Microcosm Presenter. A Presenter lets you grab what you need out of state when you define <code>getModel</code>, and also maintains a reference to the parent Repo so you can dispatch actions in a more readable fashion. Presenters can be used to help with simple scenarios like we see here, or you can make use of their powerful forking functionality to build an "app within an app" (David Eisinger wrote a <a href="https://www.viget.com/articles/using-microcosm-presenters-to-manage-complex-features">fantastic post</a> on that), but that's not what we're here to discuss, so let's move on!</p>
<h2>Add Todo</h2>
<p>Let's look at what handling form input looks like in the two frameworks.</p>
</div>
</div>
<div class="code-comparison page-block" data-module="CodeComparison" data-collapse="false">
<div class="code-comparison__wrapper" id="code-blocks-19213">
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Redux
// containers/AddTodo.js
import React from &#039;react&#039;
import { connect } from &#039;react-redux&#039;
import { addTodo } from &#039;../actions&#039;
let AddTodo = ({ dispatch }) =&gt; {
let input
return (
&lt;div&gt;
&lt;form
onSubmit={e =&gt; {
dispatch(addTodo(input.value))
}}
&gt;
&lt;input ref={node =&gt; {input = node}} /&gt;
&lt;button type=&quot;submit&quot;&gt;Add Todo&lt;/button&gt;
&lt;/form&gt;
&lt;/div&gt;
)
}
AddTodo = connect()(AddTodo)
export default AddTodo</code></pre>
</div>
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Microcosm
// views/addTodo.js
import React from &#039;react&#039;
import ActionForm from &#039;microcosm/addons/action-form&#039;
import { addTodo } from &#039;../actions&#039;
let AddTodo = () =&gt; {
return (
&lt;div&gt;
&lt;ActionForm action={addTodo}&gt;
&lt;input name=&quot;text&quot; /&gt;
&lt;button&gt;Add Todo&lt;/button&gt;
&lt;/ActionForm&gt;
&lt;/div&gt;
)
}
export default AddTodo</code></pre>
</div>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p>With Redux, we again make use of <code>connect</code>, but this time without any of the dispatch/state/prop mapping (just when you thought you understood how <code>connect</code> worked). That passes in <code>dispatch</code> as an available prop to our functional component which we can then use to send actions out.</p>
<p>Microcosm has a bit a syntactic sugar for us here with the <code>ActionForm</code> addon. <a href="http://code.viget.com/microcosm/api/action-form.html">ActionForm</a> will serialize the form data and pass it along to the action you specify (<code>addTodo</code> in this instance). Along these lines, Microcosm provides an <code>ActionButton</code> addon for easy button-to-action functionality, as well as <code>withSend</code> which operates similarly to Redux's <code>connect</code>/<code>dispatch</code> combination if you like to keep things more low-level.</p>
<p><em>In the interest of time, I'm going to skip over the Filter Link implementations, the comparison is similar to what we've already covered.</em></p>
<h2>Actions</h2>
<p>The way that Microcosm handles <a href="http://code.viget.com/microcosm/api/actions.html">Actions</a> is a major reason that it stands out in the pool of state management frameworks. Let's look at some code, and then I'll touch on some high level points.</p>
</div>
</div>
<div class="code-comparison page-block" data-module="CodeComparison" data-collapse="false">
<div class="code-comparison__wrapper" id="code-blocks-19215">
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Redux
// actions/index.js
let nextTodoId = 0
export const addTodo = text =&gt; {
return {
type: &#039;ADD_TODO&#039;,
id: nextTodoId++,
text
}
}
export const setVisibilityFilter = filter =&gt; {
return {
type: &#039;SET_VISIBILITY_FILTER&#039;,
filter
}
}
export const toggleTodo = id =&gt; {
return {
type: &#039;TOGGLE_TODO&#039;,
id
}
}</code></pre>
</div>
<div class="code-block code-comparison__block">
<span class="code-comparison__block__language">Javascript</span>
<pre class="line-numbers"><code class="language-javascript">// Microcosm
// actions/index.js
let nextTodoId = 0
export function addTodo(data) {
return {
id: nextTodoId++,
completed: false,
text: data.text
}
}
export function setFilter(newFilter) {
return newFilter
}
export function toggleTodo(id) {
return id
}</code></pre>
</div>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p>At first glance, things look pretty similar here. In fact, the only major difference in defining actions here is the use of action types in Redux. In Microcosm, domains register to the actions themselves instead of a type constant, removing the need for that set of boilerplate code.</p>
<p>The important thing to know about Microcosm actions however is how powerful they are. In a nutshell, actions are first-class citizens that get things done, and have a predictable lifecycle that you can make use of. The simple actions here return JS primitives (similar to our Redux implementation), but you can write these action creators to return functions, promises, or generators (observables supported in the next release).</p>
<p>Let's say you return a promise that makes an API request. Microcosm will instantiate the action with an <code>open</code> status, and when the promise comes back, the action's status will update automatically to represent the new situation (either <code>update</code>, <code>done</code>, or <code>error</code>). Any Domains (guardians of the state) that care about that action can react to the individual lifecycle steps, and easily update the state depending on the current action status.</p>
<h2>Action History</h2>
<p>The last thing I'll quickly cover is a feature that is unique to Microcosm. All Microcosm apps have a <a href="http://code.viget.com/microcosm/api/history.html">History</a>, which maintains a <strong>chronological list</strong> of dispatched actions, and knows how to reconcile action updates in the order that they were pushed. So if a handful of actions are pushed, it doesn't matter in what order they succeed (or error out). Whenever an Action changes its status, History alerts the Domains about the Action, and then moves down the chronological line alerting the Domains of any subsequent Actions as well. The result is that your application state will always be accurate based on the order in which actions were dispatched.</p>
<p>This topic deserves its own blog post to be honest, it's such a powerful feature that takes care of so many problems for you, but is a bit tough to cram into one paragraph. If you'd like to learn more, or are confused by my veritably confusing description, check out the <a href="http://code.viget.com/microcosm/api/history.html#reconciling">History Reconciling</a> docs.</p>
<h2>Closing Thoughts</h2>
<p>Redux is a phenomenal library, and the immense community that's grown with it over the last few years has brought forth every middleware you can think of in order to get the job done. And while that community has grown, we've been plugging away on Microcosm internally, morphing it to suit our ever growing needs, making it as performant and easy to use as possible because it makes our jobs easier. We love working with it, and we'd love to share the ride with anyone who's curious.</p>
<p>Should you be compelled to give Microcosm a go, here are a few resources to get you running:</p>
<ul>
<li><a href="http://code.viget.com/microcosm/guides/quickstart.html">Microcosm Quickstart</a></li>
<li><a href="http://code.viget.com/microcosm/api/microcosm.html">Documentation</a></li>
<li><a href="https://github.com/vigetlabs/microcosm">Github</a></li>
<li><a href="http://code.viget.com/microcosm/guides/contributing.html">Contributing</a></li>
</ul>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/DIBKLfM8mJc" height="1" width="1" alt=""/>https://www.viget.com/articles/how-do-you-todo-a-microcosm-redux-comparison/Make Your Site Faster with Preconnect Hintshttp://feedproxy.google.com/~r/VigetAdvance/~3/dif5-k0BVQs/
https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/Wed, 17 Jan 2018 11:00:00 +0000Jeremy FrankCode<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Requesting an external resource on a website or application incurs several round-trips before the browser can actually start to download the resource. These round-trips include the DNS lookup, TCP handshake, and TLS negotiation (if SSL is being used).</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/blog/_465xAUTO_crop_center-center/preconnect-1.png?mtime=20180111132646" alt=""
srcset="https://static.viget.com/blog/_233xAUTO_crop_center-center/preconnect-1.png?mtime=20180111132646 233w,
https://static.viget.com/blog/_465xAUTO_crop_center-center/preconnect-1.png?mtime=20180111132646 465w,
https://static.viget.com/blog/_930xAUTO_crop_center-center/preconnect-1.png?mtime=20180111132646 930w"
sizes="(min-width: 466px) 930px,
(min-width: 234px) 465px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Depending on the page and the network conditions, these round-trips can add hundreds of milliseconds of latency, or more. If you are requesting resources from several different hosts, this can add up fast, and you could be looking at a page that feels more sluggish than it needs to be, especially on slower cellular connections, flaky wifi, or congested networks.</p>
<p>One of the the easiest ways to speed up your website or application is to simply add <a href="https://www.w3.org/TR/resource-hints/#preconnect">preconnect hints</a> for any hosts that you will be requesting assets from. These hints essentially tell the browser what origins will be used for resources, so that it can then prep things by establishing all the necessary connections for those resources.</p>
<p>Below are a few scenarios where adding preconnect hints can make things faster!</p>
<h2>Faster Display of Google Fonts</h2>
<p>Google Fonts are great. The service is reliable and generally fast due to Google's global CDN. However, because @font-face rules must first be discovered in CSS files before making web font requests, there often can be a noticeable visual delay during page render. We can greatly reduce this delay by adding the preconnect hint below!</p>
</div>
</div>
<div class="code-block page-block" data-module="CodeHighlight">
<pre class="line-numbers"><code class="language-markup">&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;</code></pre>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Once we do that, it’s easy to spot the difference in the waterfall charts below. Adding preconnect removes three round-trips from the critical rendering path and cuts more than a half second of latency.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/blog/_465xAUTO_crop_center-center/preconnect-2.png?mtime=20180111132647" alt=""
srcset="https://static.viget.com/blog/_233xAUTO_crop_center-center/preconnect-2.png?mtime=20180111132647 233w,
https://static.viget.com/blog/_465xAUTO_crop_center-center/preconnect-2.png?mtime=20180111132647 465w,
https://static.viget.com/blog/_930xAUTO_crop_center-center/preconnect-2.png?mtime=20180111132647 930w"
sizes="(min-width: 466px) 930px,
(min-width: 234px) 465px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>This particular use case for preconnect has the most visible benefit, since it helps to reduce render blocking and improves time to paint.</p>
<p><em>Note that the font-face specification requires that fonts are loaded in "anonymous mode", which is why the crossorigin attribute is necessary on the preconnect hint.</em></p>
<h2>Faster Video Display</h2>
<p>If you have a video within the viewport on page load, or if you are lazy-loading videos further down on a page, then we can use preconnect to make the player assets load and thumbnail images display a little more quickly.&nbsp;For YouTube videos, use the following preconnect hints:</p>
</div>
</div>
<div class="code-block page-block" data-module="CodeHighlight">
<pre class="line-numbers"><code class="language-markup">&lt;link rel=&quot;preconnect&quot; href=&quot;https://www.youtube.com&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://i.ytimg.com&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://i9.ytimg.com&quot;&gt;
&lt;link rel=&quot;preconnect&quot; href=&quot;https://s.ytimg.com&quot;&gt;</code></pre>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Roboto is currently used as the font in the YouTube player, so you’ll also want to preconnect to the Google fonts host if you aren’t already.</p>
</div>
</div>
<div class="code-block page-block" data-module="CodeHighlight">
<pre class="line-numbers"><code class="language-markup">&lt;link rel=&quot;preconnect&quot; href=&quot;https://fonts.gstatic.com&quot; crossorigin&gt;</code></pre>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>The same idea can also be applied to other video services, like Vimeo, where only two hosts are used: vimeo.com and vimeocdn.com.</p>
<h2>Preconnect for Performance</h2>
<p>These are just a few examples of how preconnect can be used. As you can see, it’s a very simple improvement you can make which eliminates costly round-trips from request paths. You can also implement them via HTTP Link headers or invoke them via JavaScript. Browser support good and getting better (supported in Chrome and Firefox, coming soon to Safari and Edge). Be sure to use it wisely though. Only preconnect to hosts which you are certain that assets will be requested from. Also, keep in mind that these are merely optimization “hints” for the browser, and as such, might not be acted on each each and every time. If you’ve used preconnect for other use cases and have seen performance gains, let me know in the comments below!</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/dif5-k0BVQs" height="1" width="1" alt=""/>https://www.viget.com/articles/make-your-site-faster-with-preconnect-hints/Design Systems: Problems & Solutionshttp://feedproxy.google.com/~r/VigetAdvance/~3/5zLII8XFTQ0/
https://www.viget.com/articles/design-systems-problems-solutions/Thu, 11 Jan 2018 11:00:00 +0000Tom OsborneDesign & ContentDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h2>Why do you need a Design System?</h2>
<p>In a <a href="https://www.viget.com/articles/design-systems-why-now/">previous article</a>, we shared our thoughts on why Design Systems may be on the rise. Now, let’s further explore why you might need one. What are some of the common problems organizations face without a Design System, and how can one help?</p>
<h3>Common Problems</h3>
<p>Here are a few warning signs that might indicate you need to think about implementing a Design System:</p>
<h4>Process bottlenecks</h4>
<p>Through agile development methodologies, rapid release cycles have improved the ability for organizations to make timely and recurring updates. This means that individuals in organizations have had to do things more quickly than they used to. The benefits of speed often come at a cost. Usually, that cost is a compromise in quality. How will you ensure quality without introducing bottlenecks to your release cycles?</p>
<h4>Design inconsistencies</h4>
<p>Because your design needs have had to keep up with your development cycle, you’re left with a mess. Things as simple as having a dozen different versions of a button that could be simplified down to a few&mdash;component management. Maybe you have five different versions of a similar color or twelve different font styles when you could be using four&mdash;style management. Perhaps you’ve built a check-out flow that works differently in different places creating a nightmare for your customer support team&mdash;operational management. How will you establish and maintain consistency?</p>
<h4>Scaling challenges</h4>
<p>Perhaps you’ve focused on one platform when you first designed but are now scaling to multiple platforms. Maybe you started as a native application and are now working towards a web-based application or vice versa. It’s possible you didn’t think about how your designs would adapt to varying screen sizes or across platforms. How will you introduce new platforms?</p>
<h2>How can a Design System help? What problems do they solve?</h2>
<p>Now that you’ve explored some of the reasons you might need one, let’s look at how Design Systems can help. </p>
<h4>Centralized knowledge base</h4>
<p>By creating and maintaining a Design System, you’ll have a centralized reference point to account for the most up-to-date standards. This resource should be easy for anyone on the company to find, comprehend quickly, and put to use. It’s the place where you find guidelines and resources. It should be updated in harmony with your evolving needs. </p>
<h4>Cross-platform consistency</h4>
<p>As you expand your digital footprint across varying platforms from web to native applications or from smart watches to giant displays or from voice-activated devices to extended reality (XR), you’ll be able to better align and account for design consistency. Cross-platform consistency and brand consistency are synonymous. </p>
<h4>Less excess</h4>
<p>Let’s face it, the more inconsistency there is with your design, the more inconsistency there will be with your underlying code. With every different version of page elements or templates, there’s a higher likelihood of unnecessary code loading to render the design elements. This means design cruft and technical debt go hand-in-hand. By minimizing unnecessary excess, you’ll be better optimized for usability while gaining performance benefits through faster rendering of content. </p>
<h4>Increased efficiency</h4>
<p>The less you have to start from scratch every time you start a new design, the more efficient you will be in being able to design, build, and launch things quickly. Also worth mentioning, it will be far faster and easier to get approvals if your designs are aligned with existing standards. </p>
<h3>Not sure where to begin?</h3>
<p>These are just a few of the reasons you might consider implementing a <a href="https://www.viget.com/services/design-systems/">Design System</a>. In our <a href="https://www.viget.com/articles/design-systems-where-to-begin/">next article</a>, we’ll explore where to begin and why you might hire an agency (like Viget) to help with your needs.</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/5zLII8XFTQ0" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-problems-solutions/Detecting Motion with PIR Sensorshttp://feedproxy.google.com/~r/VigetAdvance/~3/s9O4CxYYDkA/
https://www.viget.com/articles/detecting-motion-with-pir-sensors/Wed, 10 Jan 2018 12:00:00 +0000Eli FatsiCodeHardware<div class="wrapper--narrow page-block">
<div class="text">
<p>Recently we needed to determine whether or not movement was occurring in the nearby vicinity of a device. The application was to be used for an interactive art installation (which you can read more about at <a href="https://viget.com/lightwalk">viget.com/lightwalk</a>), where motion would trigger the activation of lights. We considered a wide array of components to do the job, but ultimately landed on using Passive Infrared Sensors (PIR for short). Here, I'll explain the process by which we got our PIR sensors to report momentary and sustained movement.</p>
<h2>The Task</h2>
<p>What is it that we wanted exactly? Detect when motion occurs in front of the sensor (between 1 and 10 feet), and continue to detect the motion for as long as it occurs. This covers the two main use cases we were designing for - casually walking by the sensor, and dancing like a maniac (a <a href="https://youtu.be/8FftI0oRg2M?t=67">maaaaniac</a>) in front of the sensor.</p>
<h2>The Existing Tech</h2>
<p>This is, not surprisingly, a problem that's been solved time and time again. So much so that there are really great proto-boards available to dip your toes into PIR with (ie: <a href="https://www.sparkfun.com/products/13968">SparkFun OpenPIR</a>). PIR sensors are commonly used to power deck and garage lighting that needs to activate whenever motion occurs in some specific area, and they work in pretty much all environmental circumstances (night, day, cloudy, sunny, etc.) Side note: the science behind how PIR sensors work is roughly a cross between infrared waves and the eye of a bug, here's a pre-assembled Wikipedia rabbit hole for you: <a href="https://en.wikipedia.org/wiki/Passive_infrared_sensor">PIR</a> -> <a href="https://en.wikipedia.org/wiki/Fresnel_lens">Fresnal Lense</a> -> <a href="https://en.wikipedia.org/wiki/Arthropod_eye">Anthropod Eye</a>.</p>
<p>Unfortunately for us, we couldn't use an off-the-shelf solution for a number of reasons, mainly that they had to live outside, be tiny, and mount to the side of a 1-inch tube. We ultimately sprung for a batch of industrial PIR sensors, those that are built small and capable of handling all sorts of weather, and then set about determining which one detected motion in the desired focal area.</p>
<h2>The Experimentation</h2>
<p>We rigged up six different sensors to a pole, and logged the readings each sensor spat out while a coworker made crazy dance motions along a grid (<a href="https://youtu.be/TDpNJH0DsVk">video proof</a>). We then plotted the readings on a spreadsheet and color coded the results to determine where each sensor's sweet spot of motion detection was:</p>
<p><img src="https://user-images.githubusercontent.com/1410181/34536624-ecff0ebc-f082-11e7-9e8f-7da176db5394.png" alt="three-sensors" /></p>
<p>It's not every day that you get to do Actual Science as a software developer! The dark purple blocks represents a "strong" reading, and the graphs here show the results from the three most promising sensors. We ended up going with sensor #1 as it offered the best detection for "right in front of the thing". All this goes to show that every type of sensor behaves differently depending on what kind of lens is fixed to it, and you should pick the one that best suits your needs. (for those curious, we ended up with <a href="https://www.mouser.com/ProductDetail/Panasonic/AMN22111/?qs=%2fha2pyFaduhi%2faCmWHd3FkKCCEke412b5batPhrfgyY%3d">this one</a>)</p>
<h2>The Fine Tuning</h2>
<p>Now came the fun part (for me at least) - the coding! PIR sensors output their perception of the world by way of an analog value, a number between 0 and 4096 that describes ... something. That something isn't as straightforward as "a high number means motion is happening" unfortunately. In fact, when something moves drastically in front of a PIR sensor, that analog value moves high and low rather slowly. The graphs above were filled with the lowest value recorded in a set time period, a rudimentary method for detecting motion.</p>
<p>Let's take a look at some graphs visualizing the raw output of a few different scenarios (each graph represents ~7 seconds of time):</p>
<h4>Flatline - no motion detected</h4>
<p><img src="https://user-images.githubusercontent.com/1410181/34533406-51af3f82-f077-11e7-89d3-8e8fb6a524f5.png" alt="flat" style="margin-bottom: 0px; margin-top: 10px;">
<em>At rest the sensor outputs a value around 3100.</em></p>
<h4>Quick Motion - wave hand in front of sensor</h4>
<p><img src="https://user-images.githubusercontent.com/1410181/34533407-51bc29ae-f077-11e7-908b-7401c9408e23.png" alt="quick-motion" style="margin-bottom: 0px; margin-top: 10px;">
<em>Motion causes the value to spike low and high at mostly unpredictable rates, and over the course of multiple seconds (milliseconds would have been nice, but this is certainly workable)</em></p>
<h4>Sustained Motion - dance in front of sensor</h4>
<p><img src="https://user-images.githubusercontent.com/1410181/34533408-51ceecec-f077-11e7-84cd-5ba37f19bfe3.png" alt="sustained-motion" style="margin-bottom: 0px; margin-top: 10px;">
<em>Sustained motion triggers similar spikes, but with varying amplitudes as time passes</em></p>
<hr>
<p>It's easy enough to detect single motion events. When the amplitude of the graph hits a certain threshold in a given timeframe, you have motion. Sustained motion sensing behaves a bit differently however. The amplitude of the wave has it's extremes, but will spend multiple seconds outputting more mild oscillations. Thus, the overall tactic becomes:</p>
<ol>
<li>Determine initial motion based on the detection of a large oscillation.</li>
<li>Determine sustained motion based on the continued detection of a smaller oscillations.</li>
</ol>
<p>Let's take a look at one more graph to bring this home. The jagged red line here is the difference between local maximums and minimums recorded at 250ms intervals, and the orange line is the final boolean value answering the question "is something moving in front of the sensor" (25 seconds in total covered here):</p>
<p><img src="https://user-images.githubusercontent.com/1410181/34534659-41aff8ec-f07c-11e7-9425-e654c0f034f7.png" alt="diffs" /></p>
<p>There's a single motion near the beginning, and sustained motion for the latter half. Even though there are multiple instances where there is very little activity recorded during the sustained motion, our threshold is set loosely enough that continued motion is still detected until it concretely comes to a stop.</p>
<h2>The Code</h2>
<p>I'll spare you the minute details, if you're interested in taking a look at the actual code, <a href="https://gist.github.com/efatsi/2f14b8a77ffcf95616870898ace34cec">this gist</a> has everything you need.</p>
<p>In closing, check out these pictures of our little sensors in the wild:</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/IMG_3069.jpg?mtime=20180103142555" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/IMG_3069.jpg?mtime=20180103142555 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/IMG_3069.jpg?mtime=20180103142555 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/IMG_3069.jpg?mtime=20180103142555 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/IMG_3165.jpg?mtime=20180103142644" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/IMG_3165.jpg?mtime=20180103142644 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/IMG_3165.jpg?mtime=20180103142644 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/IMG_3165.jpg?mtime=20180103142644 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/s9O4CxYYDkA" height="1" width="1" alt=""/>https://www.viget.com/articles/detecting-motion-with-pir-sensors/Design Systems: Why Now?http://feedproxy.google.com/~r/VigetAdvance/~3/GYpPTMo9lPU/
https://www.viget.com/articles/design-systems-why-now/Tue, 09 Jan 2018 11:00:00 +0000Tom OsborneDesign & ContentDesign Systems<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Design Systems have been a hot topic as of late&mdash;so fiery hot that <a href="https://www.smashingmagazine.com/design-systems-book/">books are being written</a>, <a href="https://github.com/alexpate/awesome-design-systems">platforms developed</a>, <a href="https://blog.figma.com/introducing-designsystems-com-8826fd2efd57">events organized</a>, and <a href="https://www.invisionapp.com/blog/announcing-invision-design-system-manager/">tools released</a> to help us all with this growing need. To me, it feels a lot like a ‘what’s old is new again’ kind of topic. I mean, if we’re being real, the notion of systems design has been around since at least the industrial era&mdash;it’s not exclusive to the digital age. And, in many ways, Design Systems by their very nature are simply a natural evolution of style guides&mdash;a set of standard guidelines for writing and design. Yet, style guides have been around for decades. So, why the newness and why now?</p>
<p>As an agency, we’re not here to define what Design Systems are and are not&mdash;there are already tons of articles that do so. If you’re looking good starting places, I recommend Laura Kalbag’s <a href="https://24ways.org/2012/design-systems/">Design Systems</a> article (short form, 2012) and Invision’s <a href="https://www.designbetter.co/design-systems-handbook">Design System Handbook</a> (long form, 2017). We’re interested in helping organizations, like our customers, better understand why they might need a Design System and how best to get started. With that in mind, this is the beginning of a small set of articles to give you an idea of how we (and other client services providers like us) can help. </p>
<p>To look deeper into why there seems to be a rising interest in Design Systems, here are a few factors that may be driving things right now:</p>
<ul><li><strong>Digital is pervasive.</strong> Where there used to be a separation between offline and online, there is no more. Businesses that were offline are now online and businesses that started online are expanding beyond. We’re even starting to see digital agencies (<a href="https://lbbonline.com/news/stinkdigital-rebrands-to-stink-studios/">like Stink Studios</a>) drop Digital from their name (formerly Stink Digital). This is happening because most agencies now serve ‘digital’&mdash;it’s no longer a separate thing. Some agencies are now using descriptive words like ‘integrated’ to mean they service both online and offline needs.</li><li><strong>More specialized capabilities are being brought in-house.</strong> As companies have hired more and more developers, they’ve built strong engineering departments. Once that happens, it doesn’t take long for a few engineers to tell you that they are not designers. And, once you hire designers it won’t take long for a designer to tell you what kind of designer they are. Suddenly, you are hiring for specialties like Visual, UI, UX, Interactive, Motion, Sound, and more.</li><li><strong>Agile development is widespread.</strong> It used to be that websites would go through extensive overhauls every two to five years to account for evolving needs. Once developers adopted agile processes they trained others outside of development to work in similar rapid release cycles. What used to amount to a big launch every few years has evolved from bi-annual to bi-weekly to twice daily all the way to the point where things are closer and closer to being real-time events&mdash;make a change, validate, then publish.</li><li><strong>Platforms are expanding.</strong> At one point in time we were designing for a single digital presence&mdash;the website. Then, it was sites and apps across a universe of displays&mdash;from wristwatches to stadium displays. Lately, what we see emerging are fully immersive extended reality (XR) environments&mdash;that’s just one side of the coin. On the other, displays are becoming non-essential thanks to voice-activated digital assistants like Amazon’s Alexa and Apple’s Siri. Put simply, it’s a lot to keep up with and stay ahead of.</li><li><strong>Consumer expectations are rising.</strong> The most successful brands are trusted by their customers because of their attention to detail, whether it be customer service, user experience, or overall impact. The more consistent and polished your brand is across your universe of touch points, the more likely it is that you are trusted no matter where you are.</li></ul>
<p>To summarize, what I think we’re seeing is a natural evolution of a maturing era. Though it is still evolving, it is no longer emerging. For many of us, we’re at a point in time where we can celebrate progress, but also recognize the messes made along the way, as is natural after a significant growth period. It’s times like these that we take what we have and make things better, more efficient, and more effective&mdash;a very real promise that Design Systems offer. For more on&nbsp;<em>why</em> you might need a Design System, be sure to read our <a href="https://www.viget.com/articles/design-systems-problems-solutions/">next article</a>.</p>
<h2>References</h2>
<p>This being the start of a short series on this topic, we’re going to leave it here for now&mdash;so stay tuned for more from us about <a href="https://www.viget.com/services/design-systems/">Design Systems</a>. In the meantime, here are some references we’ve found helpful if you’d like to dive deeper.</p>
<p><strong>Books</strong></p>
<ul><li><a href="http://atomicdesign.bradfrost.com/">Atomic Design (Brad Frost)</a></li><li><a href="https://www.smashingmagazine.com/design-systems-book/">Design Systems (Smashing Magazine)</a></li><li><a href="https://www.designbetter.co/design-systems-handbook/">Design Systems Handbook (DesignBetter.co)</a></li><li><a href="https://www.uxpin.com/studio/ebooks/design-systems-why-build-one/">Pocket Guide: Why Build a Design System (UXPin)</a></li></ul>
<p><strong>Articles</strong></p>
<ul><li><a href="https://24ways.org/2012/design-systems/">Design Systems (Laura Kalbag)</a></li><li><a href="http://bradfrost.com/blog/post/atomic-web-design/">Atomic Design (Brad Frost)</a></li><li><a href="https://airbnb.design/building-a-visual-language/">Building a Visual Language (AirBNB)</a></li><li><a href="https://medium.com/@nathanacurtis">Design Systems Article Series (Nathan Curtis, EightShapes)</a></li><li><a href="https://medium.com/@marcintreder/the-minimum-viable-design-system-75ca1806848a">The Minimum Viable Design System (Marcin Treder, UXPin)</a></li></ul>
<p><strong>Podcasts</strong></p>
<ul><li><a href="http://feeds.soundcloud.com/users/soundcloud:users:134239947/sounds.rss">Style Guide Podcast</a></li></ul>
<p><strong>Lists</strong></p>
<ul><li><a href="http://styleguides.io/">Styleguides.io</a></li><li><a href="https://github.com/alexpate/awesome-design-systems">Design Systems List (Github)</a></li></ul>
<p><strong>Examples</strong></p>
<ul><li><a href="http://carbondesignsystem.com/">Carbon (IBM)</a></li><li><a href="https://vmware.github.io/clarity/">Clarity (VMware)</a></li><li><a href="https://www.lightningdesignsystem.com/">Lightning (Salesforce)</a></li><li><a href="https://design.trello.com/">Nachos (Trello)</a></li><li><a href="https://polaris.shopify.com/">Polaris (Shopify)</a></li><li><a href="https://design.firefox.com/photon/">Photon (Firefox)</a></li><li><a href="https://www.ge.com/digital/predix">Predix (GE)</a></li></ul>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/GYpPTMo9lPU" height="1" width="1" alt=""/>https://www.viget.com/articles/design-systems-why-now/How to Pull off a Pointless Crimehttp://feedproxy.google.com/~r/VigetAdvance/~3/DrW9RbnPhLU/
https://www.viget.com/articles/how-to-pull-off-a-pointless-crime/Fri, 22 Dec 2017 16:55:00 +0000Elyse KamibayashiNews & Culture<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>It’s the most wonderful time of the year. There are tiny Christmas trees interspersed throughout the office, folky holiday tunes on the speakers, and tubs of special popcorn in the kitchen. But most importantly, there’s Pointless Weekend.</p>
<p>If you’re unfamiliar with the origins of Pointless Corp, read <a href="https://www.viget.com/articles/the-point-of-pointless-corp">this</a>. In brief, Pointless Corp is neither pointless nor a corporation. It’s a chance for Vigets to come together like techy Seuss Whos and create amazing things. We brainstorm ideas, and work in teams to bring them to life over the course of one magical weekend.&nbsp;&nbsp;</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/IMG_4120.JPG?mtime=20171222115102" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/IMG_4120.JPG?mtime=20171222115102 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/IMG_4120.JPG?mtime=20171222115102 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/IMG_4120.JPG?mtime=20171222115102 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Our team (consisting of two developers, a project manager, a digital analyst, a designer, and a copywriter) wanted to create an escape room experience users could play on their phones. We referred to it as “Dial M for Murder” &mdash; but the title, like so many aspects of the game, changed rapidly once we got started.</p>
<p>We realized immediately that iteration would be essential. We had an ambitious though broad idea, a large team, and little time. While bringing many disciplines together at the same time can be tricky, in this case, it allowed us to move through concepting quickly. As we brainstormed, we could get immediate feedback on feasibility from our designer and developers. </p>
<p>This became especially important when deciding on the overall setting for our escape room adventure. Through rapid prototyping, and responding to ideas with “<em>yes, and</em>” instead of “<em>I&nbsp;don't like that</em>,” we went from a retro-futuristic 1950s diner with interactive jukeboxes, a robot waitstaff, and time travel, to a shady 1980s motel. This setting, we knew, would be interesting and engaging without requiring a week of design and development work. </p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_188xAUTO_crop_center-center/1-splash.png?mtime=20171222083439" alt=""
srcset="https://static.viget.com/_94xAUTO_crop_center-center/1-splash.png?mtime=20171222083439 94w,
https://static.viget.com/_188xAUTO_crop_center-center/1-splash.png?mtime=20171222083439 188w,
https://static.viget.com/_375xAUTO_crop_center-center/1-splash.png?mtime=20171222083439 375w"
sizes="(min-width: 189px) 375px,
(min-width: 95px) 188px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>From the outset,&nbsp;we knew we wanted three things for our app:&nbsp;we&nbsp;wanted it to be multiplayer, we wanted to build features that would engage user’s phones (tapping, shaking, etc), and we wanted an accompanying plot that would provide an engaging structure for each task. Working with the developers, we were able to create a list of features we could conceivably build in time. We then reverse-engineered the plot, building it around the features. For instance, we knew we wanted people to tap their phone screens, so part of the story involved a night manager who loved <em>E.T.&nbsp;</em>and spent perhaps too much time at the movies.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_188xAUTO_crop_center-center/6b-morse-code.png?mtime=20171222083702" alt=""
srcset="https://static.viget.com/_94xAUTO_crop_center-center/6b-morse-code.png?mtime=20171222083702 94w,
https://static.viget.com/_188xAUTO_crop_center-center/6b-morse-code.png?mtime=20171222083702 188w,
https://static.viget.com/_375xAUTO_crop_center-center/6b-morse-code.png?mtime=20171222083702 375w"
sizes="(min-width: 189px) 375px,
(min-width: 95px) 188px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>And, of course, a crucial part of bringing the story to life involved visual design. We wanted to replicate the immersive environment of a real-life escape room...but we had only one visual designer, and one weekend in which to complete designs and build them out. In the end, our designer used a combination of imagery, fonts, and colors to create a world of synth-y seediness that didn’t require extra development time. We paired this with copy that matched the bold, playful, slightly edgy feel of the design. The result teased the user’s imagination, inviting them to visualize the setting and characters themselves.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_188xAUTO_crop_center-center/gin-splattered.png?mtime=20171222084139" alt=""
srcset="https://static.viget.com/_94xAUTO_crop_center-center/gin-splattered.png?mtime=20171222084139 94w,
https://static.viget.com/_188xAUTO_crop_center-center/gin-splattered.png?mtime=20171222084139 188w,
https://static.viget.com/_375xAUTO_crop_center-center/gin-splattered.png?mtime=20171222084139 375w"
sizes="(min-width: 189px) 375px,
(min-width: 95px) 188px,
100vw"
>
</figure>
<figure class="image-block page-block">
<img src="https://static.viget.com/_188xAUTO_crop_center-center/10a-scan.png?mtime=20171222083851" alt=""
srcset="https://static.viget.com/_94xAUTO_crop_center-center/10a-scan.png?mtime=20171222083851 94w,
https://static.viget.com/_188xAUTO_crop_center-center/10a-scan.png?mtime=20171222083851 188w,
https://static.viget.com/_375xAUTO_crop_center-center/10a-scan.png?mtime=20171222083851 375w"
sizes="(min-width: 189px) 375px,
(min-width: 95px) 188px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>In between gulps of egg nog this holiday weekend,&nbsp;we invite you to grab a friend (or foe) and take <a href="https://novacancy.herokuapp.com">No Vacancy</a> for a spin.&nbsp;If/when you successfully complete the mission, don't forget to check out the other brilliant project born out of Pointless weekend &mdash;&nbsp;<a href="http://emojionarygame.com/" style="background-color: initial;">Emojionary</a>.</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/DrW9RbnPhLU" height="1" width="1" alt=""/>https://www.viget.com/articles/how-to-pull-off-a-pointless-crime/How to Implement Accessibility in Agency Projects: Part 2http://feedproxy.google.com/~r/VigetAdvance/~3/gJCFH3xfnbw/
https://www.viget.com/articles/how-to-implement-accessibility-in-agency-projects-part-2/Tue, 19 Dec 2017 11:30:00 +0000Jeremy FieldsCodeFront-end EngineeringAccessibility<div class="wrapper--narrow page-block">
<div class="text">
<p>In part 1 of my series, <a href="https://www.viget.com/articles/how-to-implement-accessibility-in-agency-projects-part-1">How to Implement Accessibility in Agency Projects</a>, I discussed some of the high-level challenges faced when implementing accessibility in client service companies and how we’re approaching them at Viget.</p>
<p>Talking about accessibility is relatively easy, but when project constraints like timelines and budgets are involved, putting it into practice can be challenging. We've been working on this at Viget and in <strong>part 2</strong> of this series, I’ll share some concepts and tips that we're using to make accessibility part of every project.</p>
<h2>Thinking About Accessibility</h2>
<p>Making accessibility part of your team’s work can be challenging and requires a deliberate effort. At Viget, we've found that building empathy, company-wide education, and re-framing how we think to be valuable strategies.</p>
<h3>Cultivate Empathy</h3>
<p>If you’re reading this, you likely work at a computer… a lot. You also may have customized your setup to enhance the way you like to work. In short: you’re a “power user”. That’s great for productivity but bad for empathy. The more ingrained we are in <em>our setup</em> the harder it is to understand how other people use and experience their computer and the web. We can easily forget that we are <a href="http://uxmyths.com/post/715988395/myth-you-are-like-your-users">not like our users</a>. It's challenging enough to keep in mind that most people are less savvy, use less-than-cutting-edge hardware, or don’t have a high-speed internet connection. If you don’t have direct experience with disabilities (either yourself or someone in your life), it takes deliberate effort gain empathy for people who interact with the web in ways that are different from you.</p>
<p>You may be able-bodied now, but things happen as we journey through life that can cause us to become temporarily or permanently disabled. Has anything ever prevented you from using your computer in your normal way? Perhaps a broken thumb affected your ability to use the mouse, LASIK surgery made it difficult to focus on your screen for a week or two, or maybe your trackpad just gave out (all of these happened to me). Having even temporary dependence on accessible technologies, like I did with keyboard access and font zooming, can give us a new perspective and appreciation for the importance of building accessible products.</p>
<p><blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">“By designing for someone with a permanent disability, someone with a situational disability can also benefit.” <a href="http://t.co/H38S2Dw0LL">pic.twitter.com/H38S2Dw0LL</a></p>&mdash; David Storey (@dstorey) <a href="https://twitter.com/dstorey/status/649636741033279488">October 1, 2015</a></blockquote> <script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<p>Try these tips for gaining better insight into how people with various disabilities use the Web:</p>
<ul>
<li>Take the <a href="http://nomouse.org">#NoMouse</a> challenge and spend some time navigating by keyboard.</li>
<li>Learn the basics of <a href="http://webaim.org/resources/shortcuts/jaws">how to use a screen reader</a> and try listening to how pages are read.</li>
<li>Install Chrome extensions like <a href="https://accessgarage.wordpress.com/2013/02/09/458/">NoCoffee</a> or <a href="https://chrome.google.com/webstore/detail/funkify-disability-simula/ojcijjdchelkddboickefhnbdpeajdjg">Funkify</a> to experience browsing with various disabilities.</li>
<li>Check out many of the other <a href="https://webaim.org/resources/#simulation">simulations from WebAIM</a>.</li>
<li>Hold an empathy-building workshop for your team or company where you challenge the group to perform a specific task, like selecting a round-trip flight, using only the keyboard or with one of the <a href="https://chrome.google.com/webstore/detail/funkify-disability-simula/ojcijjdchelkddboickefhnbdpeajdjg">Funkify</a> personas enabled.</li>
</ul>
<h3>Educate Across the Company</h3>
<p>Lone accessibility advocates, however passionate, aren't going to make much of a lasting impact on accessibility awareness company-wide — they can’t be everywhere all the time, and if they leave the company their influence goes with them. At Viget, we found that the most successful strategy for creating a lasting company value was to harness those with a passion for accessibility to speak, write, and lead training sessions. By framing accessibility knowledge as a higher level of expertise and empowering everyone to own their role’s portion of accessibility, we quickly saw a higher level of buy-in and enthusiasm. </p>
<p>To that end, we built the <a href="https://github.com/vigetlabs/interactive-wcag">Interactive WCAG</a>: a tool for filtering and sharing the daunting <a href="http://www.w3.org/WAI/intro/wcag">Web Content Accessibility Guideline (WCAG)</a> spec in a digestible format. The spec can be filtered to only view a certain level (A, AA or AAA) and a role's responsibility (copywriting, visual design, user experience design, development, or front-end development). It also creates a shareable URL so that it can be easily sent to a colleague or client.</p>
<p>Try these ideas for getting a discussion going in your office:</p>
<ul>
<li>Lead by example — begin with your own work and show what good accessibility looks like.</li>
<li>Do a lunch-and-learn presentation or offer to speak at a team or company all-hands meeting.</li>
<li>Depending on how your company is structured, approach other discipline or project teams and ask if an accessibility presentation can get on an upcoming meeting agenda. Make sure the presentation is tailored to the concerns of that group.</li>
<li>Write about accessibility on your company's blog.</li>
<li>Hold an empathy-building session or build an <a href="https://www.washingtonpost.com/news/the-switch/wp/2015/03/31/facebooks-empathy-lab-how-facebook-designs-for-disabled-users/">empathy lab</a> where coworkers can get a better understanding of some people's barriers to using the web.</li>
<li>Attend a local accessibility Meetup and offer to host a meeting at your office.</li>
<li>Invite an outside accessibility expert to speak at a company or team meeting (in person or remote).</li>
</ul>
<h3>Think of Accessibility as a Core Part of Usability</h3>
<p>The introduction of the iPhone and the explosion of internet-connected portable devices that followed was a sea-change moment for web developers. At the time, we were too busy re-learning how to build for the web to realize how <a href="https://www.theatlantic.com/technology/archive/2012/05/how-the-blind-are-reinventing-the-iphone/256589/">beneficial</a> <a href="http://observer.com/2017/07/iphone-ipad-apps-adhd-and-disabilities/">these</a> <a href="http://mashable.com/2011/07/25/ipads-disabilities/#aCIZ6HbEsOqS">devices</a> <a href="https://www.autismspeaks.org/blog/2014/11/06/how-iphone-taught-my-son-self-sufficiency">would</a> <a href="https://www.youtube.com/playlist?list=PLHFlHpPjgk7307LVoFKonAqq616WCzif7">be</a> for people with disabilities. Our need to start accounting for new patterns of input and output beyond the desktop computer and mouse wound up being a boon to accessibility on the web. We're now accustomed to thinking about patterns that coincide with a variety of disabilities:</p>
<ul>
<li>Better readability and responsive designs for small screens also benefit those with low vision who might prefer to zoom their browser to see content better.</li>
<li>Making targets, like buttons, large enough for a finger on a touchscreen also makes it easier for users with fine motor control disabilities that can still use a mouse to target and click.</li>
<li>Considering content in smaller chunks and writing tight for small screens is great for helping those with cognitive or memory disabilities, like ADD/ADHD, focus on the page's task.</li>
<li>The popularity of touch devices largely killed hovers as a primary way of revealing and interacting with content. This was good for keyboard users because it meant that we stopped relying on the mouse hover and started designing and coding for the click as the primary way to interact with things.</li>
</ul>
<h2>Tips for Making Accessibility Part of Your Day-To-Day Work</h2>
<p>Here are some curated tips from the Viget team on how we're implementing accessibility in our daily work:</p>
<h3>Design</h3>
<p><em>“Check your palette at every step of the way so that you don't have to adjust for contrast later on. Keep the <a href="http://jxnblk.com/colorable/demos/text/">contrast checker</a> open in a tab for easy access.”</em></p>
<p><strong>- Mindy Wagner, Art Director</strong></p>
<h3>Content</h3>
<p><em>“Keyboard testing is a quick and important way to QA a site. When going through pages using your keyboard, remember to use shift+tab to make sure keyboard users can move both down and up a page in a logical way. You can find some sneaky things that way, especially when elements appear/disappear when scrolling.”</em></p>
<p><em>“Always dig into contrast errors when using WAVE or a similar tool. Don’t consider it an error just because it is flagged as one - look at the details and see what level and font size it's failing.”</em></p>
<p><strong>- Becky Tornes, Senior Project Manager</strong></p>
<h3>User Experience</h3>
<ul>
<li><em>Question <code>:hover</code> with extreme prejudice.</em></li>
<li><em>Edit labels and microcopy for simplicity and directness.</em></li>
<li><em>Disable CSS to see if a UI "reads" logically when color, shape, alignment, emphasis, and other visual design elements are absent.</em></li>
<li><em>Balance working memory with the amount of content on a page.</em></li>
<li><em>Be consistent and predictable, particularly with navigation.</em></li>
<li><em>Poke yoke your data inputs. Error prevention > error resolution.</em></li>
</ul>
<p><strong>- Todd Moy, Former Senior User Experience Designer</strong></p>
<h3>Front-End Development</h3>
<p><em>“Purposely become a keyboard-only user as often as possible. You can start small. Try giving yourself a user goal, like "As a user, I need to be able to search for careers" and try to complete it using only the keyboard. If you're developing on a Mac, you may need to <a href="http://www.weba11y.com/blog/2014/07/07/keyboard-navigation-in-mac-browsers/">adjust browser and OS settings</a> before getting started.”</em></p>
<p><strong>- Chris Manning, Senior Front-End Developer</strong></p>
<h3>Don't Reserve Accessibility for Just Production Code</h3>
<p>When prototyping or test-coding a new feature, always build it to be accessible. Even if it's for a small internal audience or just yourself, considering accessibility at a nascent stage will get it baked in from the beginning and, most importantly, means you won't have to re-think a feature's structure or interaction model later. And who are we kidding... when the going gets tough these prototypes sometimes make their way into production.</p>
<h3>Learn HTML and Use It Semantically</h3>
<p>Using the correct markup for the task is the easiest way to get accessibility for free. This can be pretty straightforward if you're coding by hand but more challenging if you're using a framework or helper that outputs markup for you. The benefits, though, are significant:</p>
<ul>
<li>Sectioning elements allow screen reader users to jump around the page quickly.</li>
<li>Good use of headings, similarly, lets screen reader users understand a page's content structure and jump to just want they want.</li>
<li>Using frequently built-from-scratch elements like <code>&lt;button&gt;</code>, <code>&lt;a&gt;</code> and <code>&lt;select&gt;</code> correctly instead of meaningless <code>&lt;div&gt;</code>'s provides all of the expected interactivity (keyboard focusable, clickable and correctly read by a screen reader) without the extra work of having to add it in with JavaScript.</li>
</ul>
<p><em>Not</em> using the correct element, or trying to reproduce a native control from scratch, can lead to bigger headaches down the road and a true adding-accessibility-takes-more-time result.</p>
<h3>Support Flexibility</h3>
<p>Building for accessibility isn't about just one disability. There's a <a href="https://the-pastry-box-project.net/anne-gibson/2014-July-31">broad range</a> of disabilities to keep in mind and it can feel overwhelming at times. Building flexibility into your interfaces and interactions helps ensure broader access. What does that mean? To an extent, with responsive design, we're already doing it. Accounting for multiple kinds of input (mouse and touch) and output (small to large screens) makes our sites better able to accommodate a variety of situations.</p>
<p>Sometimes we unknowingly disable flexibility. For example, one common practice is locking a mobile browser's zoom level to ensure that the site fits the screen or to prevent some gestures from interfering with interactions. This has the unintended consequence of preventing users with vision disabilities from zooming the page to make text or images easier to see.</p>
<blockquote class="twitter-tweet" lang="en"><p lang="en" dir="ltr">Ask, “does my site’s responsive mobile version disable pinch &amp; zoom?” If it does, you’ve created an anti-user design. <a href="https://twitter.com/cameronmoll">@cameronmoll</a> <a href="https://twitter.com/hashtag/aeaaus?src=hash">#aeaaus</a></p>&mdash; Jeffrey Zeldman (@zeldman) <a href="https://twitter.com/zeldman/status/651114499290697728">October 5, 2015</a></blockquote>
<p><script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script></p>
<h3>Prioritize Accessible Content Over Accessible Experience</h3>
<p>We're frequently tasked with creating richly interactive sites. That's the fun part of what we do, right? In a perfect situation with plenty of time, we'd be able to make that experience accessible to everyone. I don't know about you, but I'm still waiting for that unicorn project to come along (hint: it won't). When the task of making a complex piece of functionality or experience accessible is daunting, <em>prioritize making sure that the content is accessible</em>. With enough time, we could make anything accessible. But when faced with deadlines and budgets, making <em>something</em> accessible over <em>nothing</em> is the better tradeoff.</p>
<p>An example of this concept in practice was a map page we created for a client. This page was designed with a map of clickable pushpins that brought up a little info overlay. Rather than trying to figure out how to make the SVG map accessible to keyboards and screen readers, the design already included an identical text list that we were able to rely on. The solution was to make the map <em>inaccessible</em> to keyboards and screen readers. The map script that we used created the pushpins as <code>&lt;span&gt;</code>'s (see using semantic HTML above) rather than <code>&lt;button&gt;</code>'s so it was already inaccessible out-of-the-box. To make it invisible to screen readers we added <code>aria-hidden="true"</code> to its outermost wrapper.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_470xAUTO_crop_center-center/homespun-makers-landing.jpg?mtime=20171205144155" alt=""
srcset="https://static.viget.com/_235xAUTO_crop_center-center/homespun-makers-landing.jpg?mtime=20171205144155 235w,
https://static.viget.com/_470xAUTO_crop_center-center/homespun-makers-landing.jpg?mtime=20171205144155 470w,
https://static.viget.com/_940xAUTO_crop_center-center/homespun-makers-landing.jpg?mtime=20171205144155 940w"
sizes="(min-width: 471px) 940px,
(min-width: 236px) 470px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text">
<p>The result is perfectly accessible content without the added time and expense of trying to make the map accessible. This was a win for accessibility and a win for the budget! Now, <em>of course it's possible</em> to make the map accessible with some extra effort, but instead, those hours could be spent on other features and contributed to delivering the site on time and on budget.</p>
<h2>Conclusion</h2>
<p>Creating more accessible products and experiences is an essential and rewarding endeavor but carries unique challenges for those of us working in client service companies. Rather than give up or wait for clients to ask, we’ve found that the practices I outlined in this article lead to a lasting culture at Viget that values thinking about accessibility throughout a project and throughout the company. Here are just a few examples from our experience working on some <a href="http://www.knowlupus.org/">fun</a>, <a href="http://www.wcs.org/">beautiful</a> and <a href="https://craighospital.org/">disability-specific</a> projects. Do you have any tips to share? Comments? Criticism? We'd love to hear about it below!</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/gJCFH3xfnbw" height="1" width="1" alt=""/>https://www.viget.com/articles/how-to-implement-accessibility-in-agency-projects-part-2/Seven Tips to Make the Most of Close Mentorshiphttp://feedproxy.google.com/~r/VigetAdvance/~3/T_2b0OOMLAg/
https://www.viget.com/articles/seven-tips-to-make-the-most-of-close-mentorship/Mon, 18 Dec 2017 12:30:00 +0000Emily BloomNews & Culture<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>“I know I'm capable of doing great things, but I’m not sure how to start. If only I had a mentor!” This is a common refrain from talented early-career folks.</p>
<p>Mentors are, indeed, transformative. I’ve seen a lot written about how to be an effective mentor, or how to find and pursue a mentor suited to you. But what about how to be an effective mentee, once the relationship is secured?</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/annie-ZP.jpg?mtime=20171213091518" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/annie-ZP.jpg?mtime=20171213091518 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/annie-ZP.jpg?mtime=20171213091518 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/annie-ZP.jpg?mtime=20171213091518 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Close mentorship is enormously valuable to anyone trying to make gains and fine-tune their skills. A core aspect&nbsp;of the&nbsp;<a href="https://www.viget.com/apprenticeship" style="background-color: initial;">Apprenticeship</a>&nbsp;and&nbsp;<a href="https://www.viget.com/internships" style="background-color: initial;">Internship</a><span></span> programs we offer at Viget is the attention and support of a dedicated Advisor.&nbsp;We provide a willing, eager mentor and essentially say to apprentices and interns, “Come. We’ll take you under our wing. You’ll learn so much. It’s going to be magical.”<br></p>
<p>I want to take some of the mystery out of the magic of close mentorship. I want future interns and apprentices come into our programs with a plan for how to get a ton of value out of the experience. Here are seven tips for how&nbsp;to be a successful&nbsp;mentee.<br></p>
<p><strong>1. Engage</strong><br>Demonstrate that you’re enthusiastic about learning from your advisor. Don’t be concerned with being impressive or well-liked; focus on being respectful, curious, but most of all engaged.&nbsp; Your mentor will probably respect you immediately if you can demonstrate your eagerness to work hard and learn a lot.</p>
<p><strong>2. Retain</strong><br>A common frustration for a mentor is when a mentee doesn’t seem as serious about learning as the mentor feels about teaching. Demonstrate your intent to learn and retain information by taking notes, bookmarkings links, keeping a training log, maybe even drafting a blog post or two about the process. Think about not only retaining the info, but making that process somewhat visible to others so they aren’t left to wonder.</p>
<p><strong>3. Practice</strong><br>Don’t just demonstrate that you’re working to retain what you’re learning &mdash; put it into practice as soon as possible. If you’re a Project Manager Apprentice, for example, and you’ve learned how to generate status reports, ask if you can generate the next batch yourself. Do your best work, of course, but anticipate that you’ll make mistakes. Learn from the mistakes and try the task again soon. As you improve, look for ways to help your advisor. By taking things off her plate, you’re getting more practice, she’s seeing more evidence of your progress, and you’re lightening her load.</p>
<p><strong>4. Feedback</strong><br>Make peace with your inexperience &mdash; you’re so new to this! &mdash; and get excited about the gift of feedback. Through trial, error, and persistence, you will make gains over time. But through close mentorship and constructive feedback, you can make huge strides. “How can this design be better?” “Could I have added more value to the discussion?” “How can I answer the client’s question more clearly?” Feedback isn’t personal critique &mdash; it’s a treasure. Seek it out and hold it dear.&nbsp;</p>
<p><strong>5. Transparency</strong>&nbsp;<br>It’s essential that you admit when you mess up, get stuck, or just don’t understand. This is an extension of being engaged &mdash; you’re demonstrating that you’re serious about learning. Most people find humility to be a positive trait, and your mentor may actually enjoy the opportunity to rescue you from being stuck. Don’t be reluctant to admit when you need help.</p>
<p><strong>6. Balance</strong><br>Soliciting feedback and asking for help are important, but it’s also important to respect other people’s time. Balance how involved&nbsp;your mentor is&nbsp;with some good old-fashioned self-direction and perseverance. Don’t ask questions before attempting to answer them yourself, and don’t ask for help unless you’ve struggled to solve the problem first. And if you hear the same feedback more than twice, an alarm should go off in your head.&nbsp;You need to put that feedback into practice ASAP.&nbsp;</p>
<p><strong>7. Communicate</strong><br>Your advisor should know what you’re doing, how it’s going, and what blockers you have. Being a proactive communicator is part of being a good teammate, no matter your experience level. But when you’re “under the wing” of an advisor, be even more intentional about sharing your progress. Make it easy for your mentor and the other people around to know what you’re doing, even if it’s simply making expected progress.&nbsp;</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>I hope these seven tips shed light on how to best approach the unique circumstances of close mentorship. Most of these skills will serve you well throughout your career, even as you collect expertise of your own and begin to mentor others. If nothing else, I hope this post highlights that mentees should have a deliberate, thoughtful approach to learning, just as mentors should have to teaching.&nbsp;</p>
<p>If you like the idea of 10 weeks of close mentorship from an industry expert advisor, you might want to learn more about Viget’s <a href="https://www.viget.com/apprenticeship">Apprenticeship</a> or <a href="https://www.viget.com/internships">Internship</a> programs.</p>
<p></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/T_2b0OOMLAg" height="1" width="1" alt=""/>https://www.viget.com/articles/seven-tips-to-make-the-most-of-close-mentorship/Copywriter Seeking Rejectionhttp://feedproxy.google.com/~r/VigetAdvance/~3/KHT_uPP2F6A/
https://www.viget.com/articles/copywriter-seeking-rejection/Mon, 04 Dec 2017 15:51:00 +0000Elyse KamibayashiDesign & ContentProcess<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>There are few things I fear more than rejection. In the past, my method for dealing with the dreaded “no” resembled my method for dealing with spiders: if I saw one coming, I ran.<br></p>
<p>Why? Because rejection hurts. It makes us blush, fidget, and fantasize about sinking beneath the floor (where there are undoubtedly spiders). It makes us feel small and worthless. And avoiding it isn’t all <em>that</em> hard. You can not ask for things that might result in rejection. You can apologize profusely before asking for anything. You can make yourself feel small and worthless before anyone else has a chance.</p>
<p>But, as I discovered during my copywriting apprenticeship at Viget, that approach can be problematic. After roughly a week, my advisor sent me a <a href="https://www.ted.com/talks/jia_jiang_what_i_learned_from_100_days_of_rejection">TED talk by Jia Jiang</a> on overcoming the fear of rejection. She then told me that I would be devoting the following week to “rejection therapy.” The goal was not to run away from rejection, but to run towards it. I was to rack up as many rejections as I could, simply by asking for things. </p>
<p>Once my fight-or-flight response had subsided, I decided to make a list. I scheduled my rejection attempts for lunch breaks and after work. It looked like this: &nbsp;</p>
<ul><li>Request a tour of the Phillips Collection from the curator </li><li>Ask for a free meal refill from a restaurant I like</li><li>Get a ballroom pro to waltz with me (preferably to the strains of “Moon River”)</li><li>Request a lesson in latte art from a barista. </li><li>Ask a random stranger to have a staring contest with me. </li><li>Ask to sit in on an English class at Georgetown (Fitzgerald and His Circle, please)</li><li>Ask to work in a bookstore for 30 minutes</li><li>Try to get Happy Tart’s recipe for gluten free chocolate cupcakes.</li><li>Mount a llama head somewhere in the office.</li><li>Request an interview with the cool book collector dude from Bridge Street Books</li><li>Exchange movie reviews with someone from the New Yorker movie club </li><li>Chat with a copywriter or designer I admire</li></ul>
<p>As I brainstormed, I realized that I kept going back to my bucket list, rummaging around in a neglected corner where once beautiful ideas die alone and unloved. These were the things I had always wanted to do, but never had because it meant risking rejection. In other words, by avoiding rejection, I had been inviting regret.</p>
<p>With that in mind, I jumped right in. While riding the metro, I spotted an elderly businessman, and decided to improvise. Scooching over, I offered him my notebook, and asked him to draw me a picture of a flower... <br><br>He said no. Very busy. Sorry. In the silence that followed, I realized that, all in all, that wasn’t as bad as I expected. It was awkward, but now it was over. Like a belly flop from the low-dive, it stung&nbsp;&mdash; but just for about five minutes. And only a few people saw. </p>
<p>As the week progressed, I discovered that you can build up a resistance to rejection. Each time you ask an awkward question, receive an uncomfortable glance, and brace for the sock to the stomach that is rejection, you become a little less afraid. You gain confidence, and with that confidence, the ability (occasionally) to convert a “no” into a “yes.” </p>
<p>Every few weeks, taco-loving Vigets make a pilgrimage to Taco Bamba &mdash; a tiny, beloved taqueria in Falls Church. One of these trips happened during my week of rejection hunting. About half-way through my second taco, I realized that 1) I wanted another, and 2) I could easily turn this into my request for a meal refill. I hadn’t planned on having an audience of coworkers, but love of tacos makes one do foolish things. I marched up to the register, and asked the lady if I could please have another taco, and could it please be free. “Uhhhh no,” she said. “Never surrender,” I thought. I told her I was from California, that I missed good tacos, and that theirs were the best in the area (all true). We started chatting, and at the end, she handed me a bag of chips, and a container of guacamole. Lesson: when one door closes, a tub of guac opens.</p>
<p>The lady at Taco Bamba wasn’t the first to seem genuinely interested in being helpful. One morning, I showed up at the coffee shop across the street, and asked the barista to teach me how to do latte art. It was 6:30 a.m., and I received&nbsp;the impression she hadn’t had her coffee yet. Nevertheless, she proceeded to give me an in-depth, step-by-step tutorial. She patiently walked me through demonstrations with soy, then with whole milk (fun fact: soy makes subpar foam). I felt like a barista apprentice, and left the coffee shop high on espresso and the milk of human kindness.</p>
<p>Later that week, I approached a woman outside my building, and challenged her to a staring contest. She agreed without hesitation. We locked eyeballs, and she immediately began chanting “dead puppies, dead puppies, dead puppies,” until I broke. A disturbing approach, but effective. </p>
<p>In happier news, the llama head I bought at Target found a new home in the biz dev office. Many thanks to our Digital Strategist and Director of Digital Strategy. To be fair, I didn’t actually think I’d be rejected on that one.</p>
<p></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/FullSizeRender-1.jpg?mtime=20171117133902" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/FullSizeRender-1.jpg?mtime=20171117133902 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/FullSizeRender-1.jpg?mtime=20171117133902 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/FullSizeRender-1.jpg?mtime=20171117133902 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Main takeaway: people want to say yes. By the end of the week, I was convinced that rejection doesn’t hurt nearly as much as the failure to ask. And it doesn’t have to translate to requests for free tacos. &nbsp;Sometimes it means asking for feedback, and accepting when the feedback is “you can do better.” &nbsp;Sometimes it means taking risks, and refusing to be discouraged by a “no” or “I don’t like this.”<br></p>
<p>There’s a piece of paper taped above my desk. On it, writ large and extra bold, it says “CLOSED MOUTH NO FOOD.” It means that if I let the fear of rejection guide my decisions, I’m essentially closing my mouth. I’m refusing all the things that are supposed to help me grow &mdash; things like advice, critique, foamy lattes, and, of course, chips and guac.</p>
<p></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/IMG-6853.JPG?mtime=20171117133938" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/IMG-6853.JPG?mtime=20171117133938 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/IMG-6853.JPG?mtime=20171117133938 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/IMG-6853.JPG?mtime=20171117133938 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/KHT_uPP2F6A" height="1" width="1" alt=""/>https://www.viget.com/articles/copywriter-seeking-rejection/A More Data-Informed, Action-Prone Culturehttp://feedproxy.google.com/~r/VigetAdvance/~3/-n_6GnTdjbo/
https://www.viget.com/articles/a-more-data-informed-action-prone-culture/Mon, 04 Dec 2017 11:00:00 +0000Paul KochStrategyData & AnalyticsProject Management<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>According to <a href="https://www.slideshare.net/sodaspeaks/the-soda-report-on-agency-metrics-that-matter" target="_blank">SoDA’s recent study</a>, “acting on the data” was the most common data challenge &mdash; ahead of “getting the data I need,” “accuracy,” “timeliness,” and “interpreting the data that I have.” If an organization has necessary, accurate, timely, and understandable data, shouldn’t acting on it be the easiest step? And if an agency can’t act on its own data, can it credibly guide clients to do so?</p>
<p>The “actionability” challenge seemingly occurs at the end of the data collection and analysis process, but the underlying issues often happen earlier.</p>
<p>Three upfront factors, described below, must be in place before people can take action on data.</p>
<h2>1. Prioritized goals that clarify assumptions</h2>
<p>Stakeholder feedback should focus on asking: will this approach best achieve our target outcomes, compared to other possible approaches? Instead, stakeholders’ differing assumptions about goals and priorities often cause conflicting feedback &mdash; each person may be solving for a different outcome.&nbsp;</p>
<p>Establishing upfront consensus on project goals &mdash; before they’re discussed in the context of a specific deliverable &mdash; will set up your team to receive more productive feedback in the future. Ahead of a project kickoff, we survey stakeholders about all known goals: from the RFP, sales discussions, or otherwise. Stakeholders force-rank the goals ahead of the kickoff. We prefer Surveygizmo because it provides results visualizations like this:</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_320xAUTO_crop_center-center/ranking.jpg?mtime=20171204015925" alt=""
srcset="https://static.viget.com/_160xAUTO_crop_center-center/ranking.jpg?mtime=20171204015925 160w,
https://static.viget.com/_320xAUTO_crop_center-center/ranking.jpg?mtime=20171204015925 320w,
https://static.viget.com/_640xAUTO_crop_center-center/ranking.jpg?mtime=20171204015925 640w"
sizes="(min-width: 321px) 640px,
(min-width: 161px) 320px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Each color represents the number of people who ranked a goal first (dark orange), last (gray), and in-between. As the image shows, even for the highest- and lowest-priority items, people almost never unanimously agree.</p>
<p>When presenting these findings, we use a tool such as Trello to have a live reprioritization discussion. Later, we formalize the Trello board into a document inspired by analytics evangelist Avinash Kaushik’s Digital Marketing and Measurement Model:</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_302xAUTO_crop_center-center/framework.jpg?mtime=20171204015916" alt=""
srcset="https://static.viget.com/_151xAUTO_crop_center-center/framework.jpg?mtime=20171204015916 151w,
https://static.viget.com/_302xAUTO_crop_center-center/framework.jpg?mtime=20171204015916 302w,
https://static.viget.com/_604xAUTO_crop_center-center/framework.jpg?mtime=20171204015916 604w"
sizes="(min-width: 303px) 604px,
(min-width: 152px) 302px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Target improvements are based on past experience and assumptions we agree are reasonable. The stakeholder team then approves this framework.</p>
<h2>2. Candid upfront conversations about ends, means, and tradeoffs</h2>
<p>We encourage upfront conversations about these topics because almost no decision can improve every goal. For example:</p>
<ul><li>Is total traffic a goal, or a means to another goal? If you could get twice as many signups, but at the expense of half your traffic, would you do it?</li></ul>
<p></p>
<ul><li>Why improve navigability? Is the goal purely altruistic for the user, or do you expect that improved navigability will drive other goals?</li></ul>
<p></p>
<ul><li>Why more organic search traffic? If the traffic came from referrals or sharing, would you be equally satisfied? Is new awareness the underlying goal?</li></ul>
<h2>3. An “AHA” (ask-hypothesis-action) approach to using the data</h2>
<p>There are two types of data:</p>
<ul><li><em>indicators</em>&nbsp;that serve as a health-check of the organization</li><li><em>answers</em>&nbsp;that inform a decision</li></ul>
<p>Indicators, while more common, can’t help people take action. A dashboard number that’s up or down won’t tell stakeholders what to do next. Many people look at data and expect insights to emerge, but in reality, the process must be flipped.&nbsp;&nbsp;</p>
<p>Enter the (kitschy, but hopefully memorable) AHA framework, which uses answers to spur action:</p>
<ul><li>The&nbsp;<strong><em>ask</em></strong>: What question do you need to answer?&nbsp;</li><li>The&nbsp;<strong><em>hypothesis</em></strong>: What do you think is the answer?&nbsp;</li><li>The&nbsp;<strong><em>action</em></strong>: What will you do if your hypothesis proves true? If false, what will you do differently?</li></ul>
<p>Before setting foot in a data set, one should be able to answer these three questions. They help people analyze in search of an answer, rather than waiting for the answer to reveal itself.</p>
<h2>In Summary</h2>
<p>With these three factors in place, organizations will be primed to efficiently act on their data. Good luck!</p>
<p><em>This article was originally published in the&nbsp;<a href="http://www.sodareporton.com/introduction-to-agency-metrics-that-matter" target="_blank">SoDA Report on Agency Metrics that Matter</a>.</em></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/-n_6GnTdjbo" height="1" width="1" alt=""/>https://www.viget.com/articles/a-more-data-informed-action-prone-culture/Triggering Individual Animations on a Timeline with Lottie-webhttp://feedproxy.google.com/~r/VigetAdvance/~3/7z5xUAWfgsk/
https://www.viget.com/articles/triggering-individual-animations-on-a-timeline-with-lottie-web/Thu, 30 Nov 2017 11:00:00 +0000Minh TranDesign & ContentFront-end Engineering<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>In our <a href="https://www.viget.com/work/ace-your-retirement">recent collaboration</a> with the Ad Council and AARP, we created a chatbot experience to walk users through a set of questions and serve them personalized action items to prepare for retirement. The tricky thing about retirement is that few people are truly prepared for it. To address this issue, we created an animated character that felt alive, showed empathy, and helped users stay engaged with the conversation. It’s name? Avo!<br></p>
<p>Below is a set of emotions we needed to animate and bring into our web experience. Enter <a href="https://github.com/airbnb/lottie-web">Lottie-web</a>. Lottie-web is an After Effects plugin that exports animation data and translates it into Javascript. Lottie-web is exceptional when animating complex vector-based animations, especially with all the parts of Avo’s face.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_706xAUTO_crop_center-center/avo-character-sheet.png?mtime=20171116094049" alt=""
srcset="https://static.viget.com/_353xAUTO_crop_center-center/avo-character-sheet.png?mtime=20171116094049 353w,
https://static.viget.com/_706xAUTO_crop_center-center/avo-character-sheet.png?mtime=20171116094049 706w,
https://static.viget.com/_1412xAUTO_crop_center-center/avo-character-sheet.png?mtime=20171116094049 1412w"
sizes="(min-width: 707px) 1412px,
(min-width: 354px) 706px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Because we had to convey many emotions, we needed a way to link them all together without distracting the user. Our approach was to have every animation return to what we called a “default state” &mdash; that allowed us to seamlessly transition from one animation to the next.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_900xAUTO_crop_center-center/Neutral-States.png?mtime=20171116094123" alt=""
srcset="https://static.viget.com/_450xAUTO_crop_center-center/Neutral-States.png?mtime=20171116094123 450w,
https://static.viget.com/_900xAUTO_crop_center-center/Neutral-States.png?mtime=20171116094123 900w,
https://static.viget.com/_1800xAUTO_crop_center-center/Neutral-States.png?mtime=20171116094123 1800w"
sizes="(min-width: 901px) 1800px,
(min-width: 451px) 900px,
100vw"
>
<div class="wrapper--narrow">
<figcaption class="image-block__caption">Highlighted in blue is the “default state” that Avo would return to after each animated emotion in the timeline.</figcaption>
</div>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>After animating all the emotions on one timeline in After Effects, we exported the Javascript through Lottie-web. We divided all the frames into segments by emotion and named them.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_900xAUTO_crop_center-center/Animation-States.png?mtime=20171116094435" alt=""
srcset="https://static.viget.com/_450xAUTO_crop_center-center/Animation-States.png?mtime=20171116094435 450w,
https://static.viget.com/_900xAUTO_crop_center-center/Animation-States.png?mtime=20171116094435 900w,
https://static.viget.com/_1800xAUTO_crop_center-center/Animation-States.png?mtime=20171116094435 1800w"
sizes="(min-width: 901px) 1800px,
(min-width: 451px) 900px,
100vw"
>
<div class="wrapper--narrow">
<figcaption class="image-block__caption">Highlighted in green are the “animations” that needed to be identified and named.</figcaption>
</div>
</figure>
<div class="code-block page-block" data-module="CodeHighlight">
<pre class="line-numbers"><code class="language-javascript">class Bot extends React.PureComponent {
static animations = {
roll: [[0, 65]],
blink: [[65, 85]],
eyebrows: [[95, 125]],
lookRight: [[125, 165]],
lookLeft: [[165, 204]],
joy: [[204, 244]],
spin: [[272, 310]],
wink: [[310, 351]],
hmm: [[351, 400]],
nice: [[400, 438]],
celebrate: [[440, 530]],
glasses: [[530, 595]],
sparkle: [[595, 662]],
money: [[665, 725]],
love: [[725, 780]],
nod: [[785, 870]]
}
</code></pre>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>We identified <strong>['roll'</strong><strong>, 'blink', 'eyebrows', 'lookRight']</strong> as “neutral animations” and had those loop whenever Avo was waiting for an answer. Then we tied the rest of the animations to questions as a response.</p>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text">
<p data-height="480" data-theme-id="0" data-slug-hash="EXNNRK" data-default-tab="result" data-user="gregkohn" data-embed-version="2" data-pen-title="Viget Case Study: AceYourRetirement.org" class="codepen">See the Pen <a href="https://codepen.io/gregkohn/pen/EXNNRK/">Viget Case Study: AceYourRetirement.org</a> by Greg Kohn (<a href="https://codepen.io/gregkohn">@gregkohn</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<p><script async src="https://production-assets.codepen.io/assets/embed/ei.js"></script></p>
</div>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Overall, Lottie-web was great. 5/5 I recommend.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/Avo-Blog.gif?mtime=20171116095328" alt="" >
</figure><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/7z5xUAWfgsk" height="1" width="1" alt=""/>https://www.viget.com/articles/triggering-individual-animations-on-a-timeline-with-lottie-web/Benchmark Your Unmoderated User Testing with Nagghttp://feedproxy.google.com/~r/VigetAdvance/~3/NX8ikgVwhlE/
https://www.viget.com/articles/benchmark-your-unmoderated-user-testing-with-nagg/Tue, 28 Nov 2017 11:30:00 +0000Curt ArledgeStrategyUser ExperienceResearch<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Unmoderated user testing is an important tool in any user researcher’s toolkit. At Viget, we often use <a href="http://optimalworkshop.com">Optimal Workshop</a>’s unmoderated tree-testing tool, <a href="https://www.optimalworkshop.com/treejack">Treejack</a>, to make sure that users can find what they’re looking for in a website’s navigation menu. In this article, I’ll be talking specifically about Treejack, but you can substitute in the unmoderated testing tool of your choice.</p>
<p>There are two basic ways to use Treejack: to evaluate the labeling system of an existing site, or to evaluate a new, proposed labeling system. But the most powerful way to use Treejack is to do both at once. <strong>That way, we can not only identify problems with the existing information architecture, we can see if our proposed redesign actually solves those problems.</strong> The existing tree acts as a benchmark against which we can compare our new tree.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_383xAUTO_crop_center-center/AB-labeling-systems.png?mtime=20171127170327" alt=""
srcset="https://static.viget.com/_192xAUTO_crop_center-center/AB-labeling-systems.png?mtime=20171127170327 192w,
https://static.viget.com/_383xAUTO_crop_center-center/AB-labeling-systems.png?mtime=20171127170327 383w,
https://static.viget.com/_766xAUTO_crop_center-center/AB-labeling-systems.png?mtime=20171127170327 766w"
sizes="(min-width: 384px) 766px,
(min-width: 193px) 383px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Optimal Workshop doesn’t currently provide a way to test more than one tree in a single study or to split participants randomly between two studies, though they do suggest <a href="https://treetesting.atlassian.net/wiki/spaces/TTFW/pages/1310907/Splitting+users+randomly+among+tests">some sample Javascript</a> for randomizing a link destination between two or more study URLs. But if you’re recruiting via email or social media, you’ll need a way to handle that destination-splitting without front-end code. That’s where <a href="http://na.gg/">nagg</a> comes in.</p>
<p>Nagg&nbsp;(<a href="http://na.gg/">na.gg</a>) is a simple utility that generates a custom nagg URL that splits traffic between up to four URLs at specified percentages. For the purposes I’m describing, you would enter two URLs at 50% to distribute traffic evenly. Nagg also lets you view a breakdown of link traffic by time, country, browser, and more.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_640xAUTO_crop_center-center/Nagg-home.png?mtime=20171121140817" alt=""
srcset="https://static.viget.com/_320xAUTO_crop_center-center/Nagg-home.png?mtime=20171121140817 320w,
https://static.viget.com/_640xAUTO_crop_center-center/Nagg-home.png?mtime=20171121140817 640w,
https://static.viget.com/_1280xAUTO_crop_center-center/Nagg-home.png?mtime=20171121140817 1280w"
sizes="(min-width: 641px) 1280px,
(min-width: 321px) 640px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>The destination URLs you’ll enter should be for separate Treejack studies, one with the existing tree and one with your proposed new tree. Both studies should use the exact same tasks, so that you can accurately compare the results of each study. Optimal Workshop makes all of this easy by letting you duplicate studies and import/export trees from/to a spreadsheet. This is extra helpful when there are a lot of tasks or very large trees.<br></p>
<p>This isn’t A/B testing per se, since participants know they’re taking a test, rather than being observed without their knowledge. As such, your test design is still susceptible to bias, so you should follow Treejack best practices like randomizing tasks and avoiding using target terms in your task prompts.&nbsp;</p>
<p><strong>Automatic link destination-splitting with Treejack and nagg is a missing piece of the puzzle that allows you to benchmark your new labeling system against the one that already exists.</strong> Regardless of whether your unmoderated test is Treejack or something else, you can use nagg to&nbsp;easily test against a&nbsp;benchmark when evaluating a new design.</p>
<p><em>Hat tip to <a href="https://www.viget.com/about/team/pkoch">Paul</a></em>,<em> who pointed me to nagg.</em></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/NX8ikgVwhlE" height="1" width="1" alt=""/>https://www.viget.com/articles/benchmark-your-unmoderated-user-testing-with-nagg/What Matters Most When You Apply: Six Myths Debunkedhttp://feedproxy.google.com/~r/VigetAdvance/~3/gZZhtrhEgTQ/
https://www.viget.com/articles/what-matters-most-when-you-apply-six-myths-debunked/Tue, 21 Nov 2017 15:56:00 +0000Erica JensenNews & Culture<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Job searching is daunting. Polishing your cover letter(s), perfecting your resume, and finding a professional photo for your LinkedIn is practically a full-time job in itself. Sure, college career centers and bootcamps have great resources and networks, but most job seekers are doing the majority of the legwork themselves. As a recent(ish) college grad who now sits on the other side of the job search, I want to debunk some of the myths that I had heard coming into my first job search. If you’re applying to a small or medium-sized agency like Viget, you can confidently disregard these myths and, hopefully, have a more successful job search.</p>
<p></p>
<p><strong>#1:&nbsp;Job Applications Go Straight Into the Ether</strong></p>
<p>Most applications go through an Applicant Tracking System (ATS) or into an HR specific-email. It’s easy to think that because you’re not submitting your resume directly to a person that your application just disappears into an abyss of other resumes. While a company might get a massive volume of candidates at once (we receive anywhere from 5 to 40 applicants a week here), they do go somewhere. I spend most of my day in our ATS, so I’m always in the know about our candidates pipeline, whether they’re first applying or updating me about their availability for in-person interviews. Even if an application doesn’t come directly into a recruiter’s inbox, you should feel confident that it does, in fact, get reviewed.&nbsp;</p>
<p></p>
<p><strong>#2: Does Anyone Read These???</strong></p>
<p>A tip I heard once was to “hide words from the job description in white text behind your resume, so the bots let you through.” Hiding “javascript” and “team-player” in your resume will not help you at Viget &mdash; there is no automated filtering system. We aim to make our recruiting process as personal and human as possible, so while <a href="https://www.instagram.com/p/BZ9Bzk7H-2_/?hl=en&taken-by=viget">we’re excited</a> about machine learning and AI, we don’t have our computers reviewing you. I read every bullet point on every resume (usually at least 4 times). My goal in reviewing resumes is to discern if your overall experience, background, and interests match what we’re looking for. I’m not just looking for a short list of keywords.</p>
<p><strong>#3: I Should Put EVERYTHING On My Resume</strong></p>
<p>It’s easy to think if you leave anything off your resume, the person reading it might not fully appreciate your experience, and won’t hire you. Instead, you put everything you can think of on your resume, and suddenly even though you have less than a year of professional experience, your resume is 5 pages long. I know, it happened to me. As I tried to distill down my courses, my internships, and the part-time job I held through college, I thought there was no way a recruiter would get me. Yet, every resource I looked at said one page resumes were ideal. So, I curated and edited until I got it to a single page. Now that I’m on the other side of reviewing resumes, I get it. I know that even the lengthiest resume won’t tell me everything you <em>actually</em> did, give me a full insight into your work ethic, and let me know exactly who you are. In fact, I’ll read your full 5, 10, even 15 page resume. But I’ll be probably be even more impressed if you can trim your experience down to one page.</p>
<p><strong>#4: Recruiters Love Buzzwords</strong></p>
<p>The <a href="http://projects.wsj.com/buzzwords2014/#p=8%7C0%7C16%7C7%7C%7C%7C2">internet loves to make fun of </a>words like “synergy” and “bleeding edge” because nobody <em>really</em> knows what they mean. I’m included in that population. Clarity is key in writing resumes and cover letters. If you worked on group projects in most of your classes, definitely let us know, but don’t let us know you “cultivated and ideated synergy.” One tip is to imagine a recruiter asking for an example of anything listed on your resume or cover letter. If you'd struggle to provide a quick, specific anecdote to illustrate the claim, you should take it out. And if you can provide the anecdote, it might be best to list that specific accomplishment rather than the vague, trendy words about it.</p>
<p><strong>#5: I Should Only Talk About Myself</strong><br></p>
<p>This is a tough one to balance in the job search. Your job search is about you, your interests, and your needs. But keep in mind that every new hire will impact a company’s work and culture. From the beginning of an evaluation process, the employer will want to know – Why do you want to work here? What kind of impact do you aspire to make? When I was applying to work at Viget, as a Cleveland Cavaliers fan, I kept coming back to the work we did with <a href="https://www.viget.com/work/lebron">ESPN for LeBron James</a>. In your cover letter, it’s a good idea to address (even briefly) why you want to work here, so I know you’re excited about it. Everyone at Viget is passionate, and we want to find other passionate folks to join our team. </p>
<p><strong>#6: Being Professional Means Being Formal</strong><br></p>
<p>It’s important to be professional and respectful in job applications, but it’s important to let us know who you are, too. You can lose the “To Whom It May Concern,” and be personal. Let us know what makes you, <em>you</em>. We get to know applicants throughout our recruiting process in a variety ways. If you can bring your personality into your application, we’ll start getting to know you sooner, which is always a good thing. It means that as soon as you apply, we can start to know that you might be a good hire. It means I can get energized when I start to read your application and Slack Emily that, “We might have found the one!” </p>
<p><br></p>
<p>If you’re applying for your first job, or maybe <a href="https://www.viget.com/apprenticeship">a first job in the tech industry</a>, I encourage you to disregard these 6 myths (and any other suspect advice you might hear). Be personal, authentic, and enthusiastic. Be succinct. Be meticulous &mdash; run everything by someone with a critical eye before reaching out &mdash;&nbsp;so you can be confident that we’re seeing you at your very best. Rest assured that we are real, live (imperfect) humans reading your resume and cover letter, and we are genuinely eager to get to know you. Good luck!</p>
<p><br></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/gZZhtrhEgTQ" height="1" width="1" alt=""/>https://www.viget.com/articles/what-matters-most-when-you-apply-six-myths-debunked/A Look Back at Viget’s First Apprenticeship Cohorthttp://feedproxy.google.com/~r/VigetAdvance/~3/JpFomHxAQ6Y/
https://www.viget.com/articles/a-look-back-at-vigets-first-apprenticeship-cohort/Wed, 15 Nov 2017 13:29:00 +0000Amanda RuehlenNews & Culture<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>This week, our first cohort of apprentices wrap up their 10 week-long Viget experience. &nbsp;The apprentices are filling out feedback surveys, their advisors are preparing their final review lunches, and <a href="https://www.viget.com/about/team/ejensen">Erica</a> is starting to connect with applicants for our <a href="https://www.viget.com/apprenticeship">next cohort</a>. &nbsp;Before we all move on to our next challenge, I want to take a step back and reflect on our program design and the exceptional folks who joined in our first official cross-disciplinary apprenticeship class.</p>
<p><strong>Our Program</strong></p>
<p>We designed the Viget apprenticeship program with three main areas for learning, each one reinforcing the other:</p>
<ul><li>Discipline-specific learning & training</li><li>Global curriculum</li><li>Client work</li></ul>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/ttt-richmond-fall-2017-258.jpg?mtime=20171114182506" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/ttt-richmond-fall-2017-258.jpg?mtime=20171114182506 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/ttt-richmond-fall-2017-258.jpg?mtime=20171114182506 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/ttt-richmond-fall-2017-258.jpg?mtime=20171114182506 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><strong>Discipline-specific learning & training</strong><br></p>
<p>Each apprentice had a dedicated mentor with whom they met each week. Mentors were responsible for helping apprentices ramp up on specific skills with increasing levels of autonomy. This discipline-specific training was provided 1:1 and was based on the apprentice’s knowledge and needs. For example, Mia, our UX apprentice, came in with a lot of experience doing user research, so her advisor, Jackson, gave more attention to mentoring her&nbsp;interaction design skills. As another example, after our Front-End Dev apprentice, Ben, gained substantial experience with <a href="https://craftcms.com/">Craft</a> through his personal project, his advisor, Megan, felt confident putting him on time-sensitive requests with a client’s Craft site. In this way, we’re able to provide a customized learning curriculum to each apprentice.<br></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_484xAUTO_crop_center-center/flf-photo.jpg?mtime=20171114183504" alt=""
srcset="https://static.viget.com/_242xAUTO_crop_center-center/flf-photo.jpg?mtime=20171114183504 242w,
https://static.viget.com/_484xAUTO_crop_center-center/flf-photo.jpg?mtime=20171114183504 484w,
https://static.viget.com/_968xAUTO_crop_center-center/flf-photo.jpg?mtime=20171114183504 968w"
sizes="(min-width: 485px) 968px,
(min-width: 243px) 484px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><strong>Global curriculum</strong><br></p>
<p>Our global curriculum consists of a series of weekly microclasses that cover the foundational elements of working at a digital agency. The classes were multi-disciplinary, relevant to all roles, and surprisingly well attended by non-apprentices who wanted the chance to hear their peers drop knowledge on their favorite subjects. Topics ranged from <em>The Consulting Mindset</em> to <em>Facilitation & Idea Generation</em> to <em>Accessibility</em> and <em>How the Web Works</em>. Each topic was accompanied by a reading list, a discussion, and often some hands-on workshop (like sketching). Apprentices were also expected to interview a full-timer (someone other than the facilitator) on the topic each week, gaining insight for how the topic plays out in day-to-day work.</p>
<p>The global curriculum might be the secret sauce to the program &mdash; it wasn’t just informative for apprentices, it was valuable for the presenters to put the sessions together, and valuable to Viget to solidify our collective fluency for these fundamental topics. The global curriculum content might not resonate as much with apprentices in the moment, as they are so focused on building skills and gaining hands-on experience. Long-term, however, I predict this will be the content our apprentice alums think back on the most.</p>
<p></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_1000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904" alt=""
srcset="https://static.viget.com/_500xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 500w,
https://static.viget.com/_1000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 1000w,
https://static.viget.com/_2000xAUTO_crop_center-center/apprenticeship-microclass-6059.jpg?mtime=20171114182904 2000w"
sizes="(min-width: 1001px) 2000px,
(min-width: 501px) 1000px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><strong>Client work</strong></p>
<p>Thirdly, our program is built on the fact that there is no substitute for “real work” and at Viget, the most important thing we do is deliver high quality work to our clients. When apprentices were ready, we brought them into the fold and, with supervision and guidance, gave them the opportunity to contribute to client work. It’s the best of both worlds: apprentices get the pressure of client deadlines and the motivating stress of wanting to uphold the team’s high standards; but, they also get the support and attention of a committed mentor. </p>
<p>The client work aspect of the program is unpredictable &mdash; there is no way I could tell an apprentice applicant what he or she might work on 3 months from now &mdash; but it’s critically important. The unpredictability of agency life is a reality, and apprentices benefit from riding that roller coaster a bit while they are here. &nbsp;More than anything else, client work was a chance for our apprentices to take what they were learning and practicing and put it into action.</p>
<p>We put a lot of thought and care into these three pillars of our program, particularly the global curriculum. We knew, however, that a lot of the value we’d provide to our apprentices would be difficult to plan in advance, because it would hinge on the knowledge, aptitude, needs, and interests of our actual class of apprentices. </p>
<p>So, let me tell you a little bit about them, where they came from, and what they did during the last 10 weeks!</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_495xAUTO_crop_center-center/Intern-Elyse-5561.jpg?mtime=20170608160024" alt=""
srcset="https://static.viget.com/_248xAUTO_crop_center-center/Intern-Elyse-5561.jpg?mtime=20170608160024 248w,
https://static.viget.com/_495xAUTO_crop_center-center/Intern-Elyse-5561.jpg?mtime=20170608160024 495w,
https://static.viget.com/_990xAUTO_crop_center-center/Intern-Elyse-5561.jpg?mtime=20170608160024 990w"
sizes="(min-width: 496px) 990px,
(min-width: 249px) 495px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><strong><a href="https://www.linkedin.com/in/ekamibayashi/">Elyse Kamibayashi</a></strong>,&nbsp;<em>Copywriter Apprentice in Falls Church, VA</em></p>
<p>Elyse studied English at William & Mary and graduated in May. She was a summer intern with us and then returned for the Apprenticeship in September. Through other internships and part-time jobs, Elyse had already taken steps to convert her study of literature to job-ready skills. By coming to Viget, Elyse took those skills one step further by fine-tuning her ability to work within our 100% digital context.</p>
<p><strong>Top highlights</strong>: Elyse started working on a client project within her first week. Also, she was paired with a full-time visual designer and helped lead a 3-week brand strategy engagement.</p>
<p></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_495xAUTO_crop_center-center/Intern-Benjamin-5535.jpg?mtime=20170608160001" alt=""
srcset="https://static.viget.com/_248xAUTO_crop_center-center/Intern-Benjamin-5535.jpg?mtime=20170608160001 248w,
https://static.viget.com/_495xAUTO_crop_center-center/Intern-Benjamin-5535.jpg?mtime=20170608160001 495w,
https://static.viget.com/_990xAUTO_crop_center-center/Intern-Benjamin-5535.jpg?mtime=20170608160001 990w"
sizes="(min-width: 496px) 990px,
(min-width: 249px) 495px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><a href="https://www.linkedin.com/in/benjamin-modayil/"><strong>Ben Modayil</strong></a>,&nbsp;<em>Front-End Developer Apprentice in Falls Church, VA</em></p>
<p>Ben was a Broadcasting and Digital Media major at Cedarville University. Ben was also a summer intern at Viget, and we were pleased to have him back this fall. Throughout college, Ben took any and all classes available to expand his web development knowledge, and was a veteran at self-teaching. He came to Viget looking for another kind of education &mdash; close mentorship and a team of experts. &nbsp;</p>
<p><strong>Top highlights</strong>: Ben experienced many urgent client requests, and helped put out some fires with quick fixes and deployments. He also built a Craft site as his personal project.</p>
<p></p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_495xAUTO_crop_center-center/mia-frasca-boulder.jpg?mtime=20170918174843" alt=""
srcset="https://static.viget.com/_248xAUTO_crop_center-center/mia-frasca-boulder.jpg?mtime=20170918174843 248w,
https://static.viget.com/_495xAUTO_crop_center-center/mia-frasca-boulder.jpg?mtime=20170918174843 495w,
https://static.viget.com/_990xAUTO_crop_center-center/mia-frasca-boulder.jpg?mtime=20170918174843 990w"
sizes="(min-width: 496px) 990px,
(min-width: 249px) 495px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><a href="https://www.linkedin.com/in/mia-frasca/" style="background-color: initial;"><strong>Mia Frasca</strong></a>,&nbsp;<em>UX Design Apprentice in Boulder, CO</em></p>
<p>Mia majored in Mechanical Engineering and minored in Design at Northwestern. During college, she was active in Design For America. She was looking for an opportunity to solidify the UX skills she’d already developed and accelerate her growth in other areas of design.</p>
<p><strong>Top highlights</strong>: Mia got to see everything from pitch to kickoff to project completion on one project, and was involved in presenting final deliverables to another.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_994xAUTO_crop_center-center/tim-crop.jpg?mtime=20170920162909" alt=""
srcset="https://static.viget.com/_497xAUTO_crop_center-center/tim-crop.jpg?mtime=20170920162909 497w,
https://static.viget.com/_994xAUTO_crop_center-center/tim-crop.jpg?mtime=20170920162909 994w,
https://static.viget.com/_1987xAUTO_crop_center-center/tim-crop.jpg?mtime=20170920162909 1987w"
sizes="(min-width: 995px) 1987px,
(min-width: 498px) 994px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><a href="https://www.linkedin.com/in/timothy-mcleod-47553a145/" style="background-color: initial;"><strong>Tim McLeod</strong></a>,&nbsp;<em>Project Manager Apprentice in Durham, NC</em></p>
<p>Tim studied English Literature at Indiana University and went on to earn a Master’s degree at Duke’s Divinity school. After a brief career with the Episcopal Church, however, Tim sought a new adventure. Specifically, he was looking for an opportunity to build on his core skills in communication and planning, get training on specific tools and processes, and start practicing the art of managing digital products. &nbsp;</p>
<p><strong>Top highlights</strong>: &nbsp;Tim got to be the lead on a brand strategy project, as well as experience firsthand how tricky planning and estimating can be on a complex digital product.</p>
<p><br></p>
<p>We loved having Elyse, Ben, Mia, and Tim on board these last 10 weeks. They’ve exceeded our expectations with their curiosity, professionalism, and enthusiasm for new challenges. Just last week, both Ben and Elyse opted to speak in front of the whole company at our Free Lunch Friday meeting. &nbsp;We couldn’t have asked for a better inaugural cohort. We are grateful for their contributions at Viget, welcome them to our Viget alumni network, and look forward to watching their careers unfold.</p>
<p>We’re always happy to hear from prospective apprentice applicants. If you’re interested in our&nbsp;<a href="https://www.viget.com/apprenticeship">program</a>, we hope you’ll&nbsp;<a href="mailto:apprenticeships@viget.com">get in touch</a>.</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/JpFomHxAQ6Y" height="1" width="1" alt=""/>https://www.viget.com/articles/a-look-back-at-vigets-first-apprenticeship-cohort/To Meet or Not to Meet...That is the Questionhttp://feedproxy.google.com/~r/VigetAdvance/~3/XxMG0rst9Vk/
https://www.viget.com/articles/to-meet-or-not-to-meet-that-is-the-question/Tue, 07 Nov 2017 11:30:00 +0000Becky TornesProcessProject Management<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>One of the most frequent dilemmas I experience as a Digital Project Manager (DPM) is whether something warrants having a meeting...and if it does, who do I invite?</p>
<p>Nobody likes having too many meetings, especially if they aren't valuable, but we also don't want to have epic Slack or Basecamp threads on one topic that could have been easily resolved with a quick meeting. That balancing act is tricky, but it's important. When you find the right balance and schedule meetings for your team only when needed, you will likely see a couple of benefits. First, there will be a higher level of engagement within the meetings, and second, the team may experience a positive morale boost given they are able to better focus on their work.</p>
<p>Here are four things I consider when deciding whether to schedule a meeting or not and four things I consider when determining who to invite.</p>
<h3>Should we have a meeting?</h3>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/Meetings-RonBergundy.gif?mtime=20171025155246" alt="" class="bordered">
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><strong>Who will this meeting be valuable for? And how valuable will it be?</strong><br></p>
<p>When it comes to ad hoc meetings, it can be tempting to schedule them to gain clarity for yourself or a single team member. Before gathering everyone for a "quick check-in," consider the true purpose of the meeting. As an example, if I'm watching a conversation in Slack and I'm confused but the team members involved in the discussion all appear to be on the same page, I should probably wait to schedule a meeting. In this case, I would make a note to clarify decisions/action items/next steps once the discussion is done. If you think critically, you can usually determine if a meeting is convenient for just one or two people, or if it would be helpful for all that would need to attend.<br></p>
<p><strong><br></strong></p>
<p><strong>Is it an important client meeting / do we need client "face time"?</strong></p>
<p>Not every meeting that every person attends is going to be clearly valuable for them. There are instances where it's important we meet as a team, even if everyone won't have an active part in the meeting. For example, there may be times when the client is concerned or panicking and we need to include team members on a meeting to help put them at ease -- even if as a PM you could just as easily clear up whatever is going on. Sometimes, we just need to meet (especially with clients) and team members should be open to that assuming it does not happen all the time.<br></p>
<p>If I do have to invite someone to a meeting where they will mostly be an observer, I try to reach out after scheduling the meeting and explain why I need them there.</p>
<p><strong><br></strong></p>
<p><strong>If I'm considering a recurring meeting, can we start with another tactic or fewer meetings first?</strong></p>
<p>Daily stand-ups at Viget are not the standard, as some team members (including the Project Managers) may be on several projects at once. If every project had daily standups, that could result in an hour or more of meetings every morning for some team members, which may not be sustainable. As a result, our "standups" typically consist YTBs (posting what you did Yesterday, Today, and any Blockers) in Slack.</p>
<p>When thinking about scheduling recurring meetings (daily, twice a week, weekly, etc.) first see if there is another way to accomplish what's needed in that meeting that would require less time. Can we utilize Slack or start with fewer meetings first? If those don't work, can we try meeting a couple times a week before moving to daily standups? Pulling back on the number of meetings (especially when teams or clients are used to it) can be a lot harder than adding meetings.</p>
<p><strong><br></strong></p>
<p><strong>What does the team think?</strong></p>
<p>Getting team buy-in on the presence or absence of a meeting is one of the best things you can do. If you aren't sure if a meeting is necessary, ask for the team’s input. More often than not, when I ask, teams request I set the meeting up. Knowing everyone is on the same page can help get a meeting off to the right start and keep it efficient and valuable. Again, it's awesome to head into a meeting with a shared understanding of why it's important and why it will be valuable. When in doubt, just ask.</p>
<h4>Who should attend the meeting?</h4>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/Meetings-Oprah.gif?mtime=20171025155239" alt="" class="bordered">
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Okay, so you've thought through and determined a meeting is necessary &hellip; now, who all needs to be there?</p>
<p><strong>Who will realistically be an active participant?</strong><br></p>
<p>Sometimes a team member can get value out of a meeting by being a silent participant, but in most cases if they'd never have something to say, they aren't going to gain much from joining. If you can't really think of how someone might contribute to a meeting and you just want them to "feel included" it's probably best to leave them off the invite.</p>
<p><br></p>
<p><strong>Will solid notes be enough for non-active participants?</strong></p>
<p>So, I just mentioned that simply wanting someone to "feel included" is not a good reason to take up their time with a meeting. However, what if they wouldn't likely be an active participant but what's being discussed is important for them to know? The big question to ask here is if you know your notes would give them the information they need from that meeting. Sometimes conversations are too intricate and notes can't really convey all the necessary information, but that should be a pretty rare situation. Take good notes and give some time back to team members who aren't required at the meeting.</p>
<p><br></p>
<p><strong>What is the likelihood of the discussion veering off of the agenda?</strong></p>
<p>There are plenty of times that I have an agenda set for a meeting that points to a particular team member not being necessary, but I know the client has a habit of talking about whatever is on their mind. If you believe there's a good chance a client or team member is going to take the meeting in a new direction, it may make sense to invite more folks to the meeting.</p>
<p><br></p>
<p><strong>What does each team member think?</strong></p>
<p>Once again, if you aren't sure, the best thing you can do is ask the team member. Tell them what the meeting is about and why you think they may (or may not) want to attend. If they have all the information, they can make a decision based on their schedule that day and what they have going on. They will appreciate being able to make their own call, and if they do attend, you will know they are interested and engaged.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/Meetings-Muppets.gif?mtime=20171025155236" alt="" class="bordered">
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>When scheduling meetings, remember to think critically, err on the side of not forcing folks to take part in a meeting they don't need to attend, and definitely don't be afraid to ask folks directly if they think it'll be a valuable use of their time. I think you'll find including only those team members that need to be in a meeting will result in better, more interactive meetings as well as happier teammates.<br></p>
<p>Are there any considerations I missed? I've love to hear them in the comments! </p>
<p></p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/XxMG0rst9Vk" height="1" width="1" alt=""/>https://www.viget.com/articles/to-meet-or-not-to-meet-that-is-the-question/Cut the Noise - Five Slack Features You Need to Usehttp://feedproxy.google.com/~r/VigetAdvance/~3/Sl2OZZMMwic/
https://www.viget.com/articles/cut-the-noise-five-slack-features-you-need-to-use/Wed, 01 Nov 2017 13:30:00 +0000Kelly KennyProcessProject Management<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Slack is a core part of my day-to-day. It's the tool that I spend the most time in and it's how I handle all internal communication, including project, team, and company discussions, from 1:1 conversations to group chats. It's increasingly become a primary client communication tool, as well.&nbsp;</p>
<p>With so many purposes and so many participants, it can be challenging to not only stay on top of Slack discussions but balance meetings, communication in other tools (Basecamp, Github, email), and work itself.&nbsp;I've found these five features to be key in cutting through the noise and making Slack a valuable communication tool:</p>
<h3>/leave</h3>
<p>This one's going to earn me some&nbsp;&#x1f44b;&nbsp; reactions, I know, I know. I'm still going do it though, and here's why: It's important for me to be present in project channels and client teams when I'm playing an active role. When that time has passed, though, I've found that I can reduce Slack noise simply by leaving channels that I no longer need to be a part of. Sure, I could stay in every channel and try and follow along on what's happening on every project, but the time required to keep up isn't met by a large reward. I'm better served by clearing my Slack (and my brain) and allowing teams to loop me back in when necessary.</p>
<h3>/mute</h3>
<p>Not ready to commit to <code>/leave</code> or fear the public shaming that comes with that exit? Mute might be more your speed. Mute allows you to temporarily silence a distracting channel so that you can return when you're ready.</p>
<h3>/star</h3>
<p>This is a crucial one for me, and I don't give out my stars lightly. A starred channel is one that I prioritize first and one that needs my most immediate attention. I try and keep my Starred Channels list to 10-15 channels. Then, when I'm focused on Slack, I can tackle unread activity in those channels first.</p>
<h3>/remind</h3>
<p>See something on Slack but know you can't tackle it right away? <code>/remind</code> allows you to set a reminder of your choosing, and it's a great way to quickly snooze something for future you to address.</p>
<h3>Command + Shift + K</h3>
<p>The Direct Messages menu is a lifesaver for me in those moments where I know I saw a message from someone while I was <em>[insert multitasking activities here]</em>, and I simply can't remember who it was from or what it was about. This menu shows your most recent DMs, so you can easily catch up on your latest conversations. No more lost messages.</p>
<h3>Bonus: Notification Preferences</h3>
<p>Setting up notification preferences that work for you is the foundation for any good Slack setup, so spend some time getting familiar with the available options. You can customize your notification preferences at channel and team levels. You can also set different preferences for desktop versus mobile. I personally don't like a ton of notifications because I'm in Slack so frequently, so I choose to set them carefully. I like notifications for direct messages, mentions, and keywords in client teams, which I have pushed to mobile if I've been inactive on my desktop for a few minutes. I don't get notifications at all on my desktop for the Viget team. I rely on the badge icon to let me know when there's a DM or mention that needs my attention. Find what works for you and don't be afraid to adjust it over time. Notifications don't need to be a set it and forget it feature.</p>
<p>These features, combined with these preferences, are the key to my Slack sanity. They help me stay on top of the most relevant discussions without feeling overwhelmed by the noise and activity happening across channels and teams.</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/Sl2OZZMMwic" height="1" width="1" alt=""/>https://www.viget.com/articles/cut-the-noise-five-slack-features-you-need-to-use/XR: VR, AR, MR—What's the Difference?http://feedproxy.google.com/~r/VigetAdvance/~3/oPdyYiplsH0/
https://www.viget.com/articles/xr-vr-ar-mr-whats-the-difference/Tue, 31 Oct 2017 16:34:00 +0000Kaitlyn IrvineDesign & Content<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h2>What is XR?</h2>
<p>
</p>
<p>Extended Reality (XR) refers to all real-and-virtual environments generated by computer graphics and wearables. The 'X' in XR is simply a variable that can stand for any letter. XR is the umbrella category that covers all the various forms of computer-altered reality, including: Augmented Reality (AR), Mixed Reality (MR), and Virtual Reality (VR).</p>
<h2>Virtual Reality</h2>
<p>For ease, let’s start with a topic many of us are already familiar with&mdash;Virtual Reality (VR). VR encompasses all virtually immersive experiences. These could be created using purely real-world content (360 Video), purely synthetic content (Computer Generated), or a hybrid of both. This medium requires the use of a Head-Mounted Device (HMD) like the <a href="https://www.oculus.com/rift/" target="_blank">Oculus Rift</a>, <a href="https://www.vive.com/us/" target="_blank">HTC Vive</a>, or <a href="https://vr.google.com/cardboard/" target="_blank">Google Cardboard</a>.</p>
<p>VR has its own spectrum in and of itself. On one end you have <a href="https://webvr.info/" target="_blank">WebVR</a>, the simplest and most accessible form, and on the other you have Fully-Immersive VR, like Multi-sensory Cinema. Don't ask me how they incorporate taste, but apparently "Virtual Vineyards" are a thing now.</p>
</div>
</div>
<div class="video page-block">
<iframe src=""></iframe>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<h2>Augmented Reality</h2>
<p>Augmented Reality (AR) is an overlay of computer generated content on the real world. The key note here is that the augmented content doesn't recognize the physical objects within a real-world environment. In other words, the CG content and the real-world content are not able to respond to one another.</p>
</div>
</div>
<figure class="image-block page-block">
<img src="https://static.viget.com/_961xAUTO_crop_center-center/100217-Article-XR-Google-Translate.jpeg?mtime=20171002130626" alt=""
srcset="https://static.viget.com/_480xAUTO_crop_center-center/100217-Article-XR-Google-Translate.jpeg?mtime=20171002130626 480w,
https://static.viget.com/_961xAUTO_crop_center-center/100217-Article-XR-Google-Translate.jpeg?mtime=20171002130626 961w,
https://static.viget.com/_1921xAUTO_crop_center-center/100217-Article-XR-Google-Translate.jpeg?mtime=20171002130626 1921w"
sizes="(min-width: 962px) 1921px,
(min-width: 481px) 961px,
100vw"
>
<div class="wrapper--narrow">
<figcaption class="image-block__caption">​ Google Translate’s AR feature “Word Lens” uses your camera to translate signs, menus, and similar items in real-time from one language to another. Source: Google</figcaption>
</div>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Using Google Translate as an example, we can identify images and detect planes to place computer generated content, but the graphics can’t interact with the environment beyond what the camera captures. Let’s look at another example.</p>
</div>
</div>
<div class="video page-block">
<iframe src=""></iframe>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>IKEA's latest mobile app, <a href="https://itunes.apple.com/us/app/ikea-catalog/id386592716?mt=8" target="_blank">IKEA Place</a>, uses AR to make a profound impact on the way we shop for furniture at home. The basic premise is, shoppers select an item from the catalogue, then, using the camera on their mobile device, can place digital furniture anywhere in a given room. The product is automatically sized to fit the space (which IKEA claims is 98% accurate) and can be moved or rotated within view. Amazing, right?</p>
<p>Where IKEA and AR generally fall short, though, is that the computer generated content is only anchored to the camera view. Using IKEA Place as an example, if I crouched behind a physical table or a chair to get a better look, the render would not 'disappear' behind the real-world object. That's where Mixed Reality comes in.<br></p>
<h2>Mixed Reality</h2>
<p>Mixed Reality (MR) removes the boundaries between real and virtual interaction via occlusion. Occlusion means the computer-generated objects can be visibly obscured by objects in the physical environment&mdash;like a virtual robot scurrying under your coffee table.&nbsp;</p>
<p>This is where things get interesting, because <em>"hey, isn't all of this technically 'reality' that has been 'augmented' with computer graphics?"</em>&nbsp;Technically, sure.&nbsp;But there is a key distinction in user experience (and developmental complexity) that does not afford these terms to be interchangeable.&nbsp;<br></p>
</div>
</div>
<div class="video page-block">
<iframe src=""></iframe>
</div>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p><a href="https://occipital.com/" target="_blank"></a></p>
<p><a href="https://occipital.com/" target="_blank">Occipital</a>, a Boulder-based spatial computing startup, is advancing the field of computer vision. Their premier product, <a href="https://bridge.occipital.com/" target="_blank">Bridge</a>, is a Mixed Reality headset that gives users the ability to map any given room and place computer generated objects within it.<br></p>
<p>In the Bridge introduction video, we meet a friendly virtual robot named Bridget. In the Bridget application,&nbsp;<a href="https://itunes.apple.com/us/app/bridget-a-mixed-reality-robot/id1188127032?mt=8" target="_blank">available on iTunes</a>, Bridget can fetch a ball and navigate around physical objects in the room (Occlusion!).&nbsp;With accurate room mapping, MR offers something AR doesn't&mdash;a whole new level of real-virtual interaction.</p>
<h2>In conclusion, Augmented Reality and Mixed Reality are not interchangeable terms. The general distinction is: all MR is AR, but not all AR is MR.&nbsp;AR is a composite. MR is interactive.</h2>
<hr>
<h4>To recap, a quick glossary:</h4>
<ul><li><strong>Extended Reality (XR)&nbsp;</strong>refers to all real-and-virtual environments generated by computer technology and wearables. The 'X' in XR is a variable that can stand for any letter.</li><li><strong>Virtual Reality (VR)</strong> encompasses all immersive experiences. These could be created using purely real-world content (360 Video), purely synthetic content (Computer Generated), or a hybrid of both.</li><li><strong>Augmented Reality (AR)&nbsp;</strong>is an overlay of computer generated content on the real world that can superficially interact with the environment in real-time. With AR, there is no occlusion between CG content and the real-world.</li><li><strong>Mixed Reality (MR)</strong>&nbsp;is an overlay of synthetic content that is anchored to and interacts with objects in the real world&mdash;in real time. Mixed Reality experiences exhibit occlusion, in that the computer-generated objects are visibly obscured by objects in the physical environment.</li></ul>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/oPdyYiplsH0" height="1" width="1" alt=""/>https://www.viget.com/articles/xr-vr-ar-mr-whats-the-difference/How to Be Good at Being Newhttp://feedproxy.google.com/~r/VigetAdvance/~3/K9MjGdQDAkE/
https://www.viget.com/articles/how-to-be-good-at-being-new/Tue, 31 Oct 2017 14:59:00 +0000Emily BloomProcessNews & Culture<figure class="image-block page-block">
<img src="https://static.viget.com/_320xAUTO_crop_center-center/pascale_at_computer.jpg?mtime=20170411200416" alt=""
srcset="https://static.viget.com/_160xAUTO_crop_center-center/pascale_at_computer.jpg?mtime=20170411200416 160w,
https://static.viget.com/_320xAUTO_crop_center-center/pascale_at_computer.jpg?mtime=20170411200416 320w,
https://static.viget.com/_640xAUTO_crop_center-center/pascale_at_computer.jpg?mtime=20170411200416 640w"
sizes="(min-width: 321px) 640px,
(min-width: 161px) 320px,
100vw"
>
</figure>
<div class="wrapper--narrow page-block">
<div class="text" data-module="Text">
<p>Starting a new job is hard. You have to get to know new people, follow new processes, and learn new tools all within an unfamiliar environment. You have to learn what is expected of you, how expectations are communicated, and how to gauge your progress. On top of all the other stress, there is the challenge of navigating the dynamic of simply <em>being new</em>. I’ve noticed some people are more comfortable than others in this dynamic. I think it’s a skillset worth considering more closely.</p>
<p>Being good at being new isn’t the same as being a great teammate, or being great at your specific discipline.&nbsp; If you’re good at being new, you can accelerate the pace at which you build trust and connect to the team. You bring positive, inspiring energy to the people around you (which we love). You solidify your reputation faster and, by extension, get to ditch that awkward feeling of being new sooner.&nbsp;</p>
<p>Here are some ideas for the next time you’re new:</p>
<p><strong>Connect through difference.</strong><br>As a new hire, your perspective is valuable, in part, because it’s different from everyone else’s. When we’re out of ideas for how to approach something, you might see a path forward. When we’re on autopilot, you can wake us up to opportunities for improvement.</p>
<p>At the same time, don’t just share, but connect through your different experiences and perspectives. Whatever new idea, opinion, or approach you’re offering, try to frame it as something that could ultimately strengthen the team. While sharing something like, “that’s not how I’ve done it,” look for ways to add the sentiment, “I want to understand why you do it your way,” or “I wonder which way makes sense in this situation.”</p>
<p>Even feelings of inexperience can be chances to build connections and a stronger team. Seek out the person who joined most recently before you and catalog your shared lessons learned. Ask peers who have a particular expertise that you lack to tell you how they got to that level of expertise. Or document questions you have (and answers you find), so that the next new person can benefit.&nbsp;</p>
<p>Find ways to show that the differences in your background can be understood and used to the advantage of the whole team.</p>
<p><strong>Think tiny.</strong><br>You want to prove you’re awesome, and that you’re capable of doing big things. We want that, too. But in the early days, the best place to show that you’re awesome might be in tiny ways. RSVP to meeting invites swiftly. Arrive to meetings early. Ask a question when presenters invite questions. Take notes. Push your chair in as you leave. Put your glass in the dishwasher. Follow up with someone the next day, asking more about some nugget of insight they said in the meeting. Reference that nugget days later to someone else entirely.</p>
<p>All these tiny behaviors are manifestations of someone being thoughtful, conscientious, self-aware, invested, curious, optimistic. A single one of these actions doesn’t mean much, but when seen in combination, they add up.</p>
<p>We wouldn’t have hired you if we didn’t think you were capable of doing big things. But when you’re new, find tiny ways to reflect your potential. The big stuff will come with time.</p>
<p><strong>Give us something to talk about.</strong><br>People talk about you when you’re new. On the People Team, we’re focused on doing everything we can to make your onboarding experience positive. “How is she doing?” we ask each other. “Does she seem happy?” Your manager and teammates are also eager to see you engaged. “Do you think she’s feeling challenged?” they might ask. Be proactive about building your reputation. Do your part to influence these conversations.</p>
<p>What do you want your reputation to be? Maybe you want us to say, “I think she’s finding the onboarding sessions engaging.” Come to those sessions prepared to engage. Ask questions or share observations; show you’re listening and interested.&nbsp;</p>
<p>Maybe you want us to say, “She seems focused on ramping up as quickly as possible.” Be deliberate about getting exposure to people, processes, tools, and knowledge. You could start a training log for yourself and share it with others. Or you could ask for project retrospective documents or team meeting recap notes, so you can catch up on recent lessons learned.</p>
<p>If you simply show up, do as you’re asked, and don’t say much, I predict we’ll be saying, “I’m not sure how she’s doing, it’s hard to tell,” which isn’t bad, but could be so much better.</p>
<p><strong>Err on the side of caring too much.</strong><br>When you’re new, you might notice that your coworkers are impressive, talented, and smart &hellip; but they may also be quite laid-back. It might seem like they’re doing awesome work without trying all that hard. You may not have immediate opportunities to show how smart and capable you are, so you may be tempted to show that you fit in by asserting your casualness.</p>
<p>Resist the temptation. Instead, show that you care very much about doing great work, even if it means revealing some stress. Acknowledging your drive to perform well isn’t a contradiction to our casual culture. I&nbsp;believe most successful professionals are&nbsp;much more protective of their commitment to high quality work than they care about the appearance of being nonchalant. The new person who admits feeling nervous about a presentation makes a stronger impression than one who acts aloof and above it.</p>
<p>As Viget alum <a href="https://www.viget.com/articles/when-the-casual-workplace-is-confusing">Anna Lewis wrote</a>, “Our casual environment is effective only because, at our core, we maintain high standards of professionalism in our interactions with each other and in our work.” When you’re new, you may need to demonstrate those high standards for professionalism overtly until we have a chance to see them evident in your daily work. Don’t worry; nobody will ding you for caring too much.&nbsp;</p>
<p><strong>Be curious.</strong><br>This is the most important one: be curious. Study up on case studies; dig back into old threads; read old proposals (ones we won as well as ones we didn’t); sit in on all kinds of meetings. Don’t just be curious about the things directly related to you or your role, be curious about the whole company. Don’t just focus on right now, try to gain perspective on our past and our future. Ask questions. Follow up on things you hear or notice that don’t make sense. Ask for clarification on why things are the way they are.&nbsp;</p>
<p>When we welcome a new person to the team, we’re hoping he or she will make a mark and, over time, influence the company. It takes time to have that kind of impact, of course, and it’s wise to get solid footing before you start rocking the boat. By being curious you’re telling us that you’re seeking that footing. Time will tell whether your curiosity leads you to being a champion of upending the status quo, or a champion of fine-tuning existing processes. Either way, we’re encouraged by your desire to know our work and all the thought behind it. A new person’s lack of curiosity is easily mistaken as indifference, apathy, or even arrogance.</p>
<p><br></p>
<p>Being new is hard no matter how good you might be at the dynamic. By acknowledging the circumstances, being self-aware, and attempting a deliberate approach to being new, I expect you’ll do great. I really do!&nbsp;</p>
<p>We are excited to get to know you and to see how your contributions will make us stronger.</p>
</div>
</div><img src="http://feeds.feedburner.com/~r/VigetAdvance/~4/K9MjGdQDAkE" height="1" width="1" alt=""/>https://www.viget.com/articles/how-to-be-good-at-being-new/