New Media Campaigns Bloghttp://www.newmediacampaigns.com/
en-usCopyright New Media Campaigns.Tue, 06 Jun 2017 09:20:00 -0400http://blogs.law.harvard.edu/tech/rssHiFijoel@newmediacampaigns.com,cschossow@newmediacampaigns.comjoel@newmediacampaigns.com,cschossow@newmediacampaigns.comhificmshttps://feedburner.google.comBuilding Modular WordPress Sites with ACF Builderhttp://feedproxy.google.com/~r/hificms/~3/KdlpI0Sb-v8/building-modular-wordpress-sites-with-acf-builder
<p>Here at New Media Campaigns, we often use WordPress as the Content Management System powering the sites we work on. &nbsp;We try to give our clients as much intuitive control as possible through WordPress. Developers have created nearly an infinite number of plugins promising this flexibility and control -- the catch is finding plugins that actually deliver that promise and work within our infrastructure. &nbsp;We typically go through an organizational evolution where someone on our team&nbsp;discovers a plugin, experiments with it, introduces it to our team, and if it passes muster, figure out how to responsibly roll it into our default setup (or at least shortlists on our list <a href="http://www.newmediacampaigns.com/blog/helpful-wordpress-plugins">favorite WordPress plugins</a>).</p>
<p>One of our absolute favorite plugins is <a href="https://www.advancedcustomfields.com/pro/" target="_blank">Advanced Custom Fields</a>. Using ACF, we create powerful, flexible custom blocks that can be mixed and matched to produce a large number of page layouts on the fly. This setup lets our team take a modular approach to building sites and gives our clients the powerful ability to create different layouts depending on their page-by-page content needs.</p>
<p>However, while it checks the boxes of helping both us and our clients, we ran into an issue with the ACF plugin interface storing all custom field configurations in that single site's database, which places them outside of any version control mechanism. As a standard practice, we build all of our WordPress sites on virtual machines stored in GitLab repositories. These repositories not only provide essential version control&nbsp;but also allow&nbsp;developers to quickly and easily share and collaborate on projects. &nbsp;So,&nbsp;while providing flexibility for an editor, this plugin&nbsp;runs afoul of a couple of our core development tenets at NMC.</p>
<p>An ideal scenario would allow us to leverage the power of Advanced Custom Fields while maintaining our desired level of version control. ACF has always had the ability to have custom field configurations built out in PHP, but the code is extremely dense and nested,&nbsp;making it slower and harder to update and easily prone to error.</p>
<p>Looking around for a possible solution to let us bake ACF into our core setup, we discovered that the clever folks&nbsp;at Stout Logic came up with a fantastic solution: <a href="https://github.com/StoutLogic/acf-builder" target="_blank">ACF Builder</a>. Not only could we gain version control over the ACF setup, ACF Builder also simplifies the code it takes to pull that off. Configurations can be extended, allowing for minor variations between templates without writing extra code or duplicating effort. &nbsp;Configurations can also be re-used across sites quickly, which helps in keeping your&nbsp;admin interface consistent and reliable. The extension properties alone&nbsp;are worth the price of admission &nbsp;- who doesn't want <a href="https://en.wikipedia.org/wiki/Don%27t_repeat_yourself" target="_blank">DRY</a>-er code? And the price of admission is merely a composer install or an autoload include.&nbsp;</p>
<p>Discussing the power of ACF Builder in the abstract doesn't really illustrate the ease and facility of building configurations, so I've set up an example we write frequently.</p>
<p>Just about every site we build has a customizable page banner with a large hero image. Many sites include an ambient video banner on the&nbsp;homepage, but not on interior pages. To accomplish this using just the ACFPro plugin, you would either need two separate custom field sets identical in every way with the exception of an ambient video upload slot or you would need to include the ambient video uploader on pages where it wouldn't be used. &nbsp;This setup would definitely lead to user decision errors (trust us) and clutter the editing interface.</p>
<p>Enter our hero: ACF Builder. &nbsp;Using ACF Builder, a basic banner can be constructed and placed on every page template and then extended to include the ambient video upload slot on only the homepage.&nbsp;Check out the example below.</p>
<p>Basic page banner, present on every page except the homepage:&nbsp;</p>
<pre>$banner = new StoutLogic\AcfBuilder\FieldsBuilder('banner');<br />$banner<br /> -&gt;addText('banner_title',['instructions' =&gt; 'Leave blank to use page title']);<br /> -&gt;addText('banner_subtitle',['instructions' =&gt; 'Optional, displays over title']);<br /> -&gt;addImage('full-width_image',['instructions' =&gt; '1440 x 400 or larger with same aspect ratio']);<br /> -&gt;setLocation('post_type', '==', 'page')-&gt;and('page_template', '!=', 'template-home.php');</pre>
<p>Banner extended to include ambient video on the homepage only: &nbsp;</p>
<pre>$homebanner = new StoutLogic\AcfBuilder\FieldsBuilder('homebanner');<br />$homebanner<br /> -&gt;addFields($banner);<br /> -&gt;addFile('ambient_video_file',['instructions' =&gt; 'mp4 format']);<br /> -&gt;setLocation('page_template', '==', 'template-home.php');&nbsp;&nbsp;</pre>
<p>The code is logical, compact, and easy to read. &nbsp;From an end-user perspective, the content entry points will look exactly the same using the Builder as using the plugin alone: each post type or page will have a set of custom fields on a that are unique to that item. &nbsp;</p>
<p>Using ACF Builder, we're able to more speedily, safely, and scalably&nbsp;give clients powerful control of their sites. &nbsp;We've now rolled it into our default setup, and we encourage you to check it out to take your next WordPress site to the next level!</p><img src="http://feeds.feedburner.com/~r/hificms/~4/KdlpI0Sb-v8" height="1" width="1" alt=""/>Tue, 06 Jun 2017 09:20:00 -0400http://www.newmediacampaigns.com/blog/building-modular-wordpress-sites-with-acf-builderhttp://www.newmediacampaigns.com/blog/building-modular-wordpress-sites-with-acf-builderEnjoying Deploying: Using Ansible & Capistrano for a Smooth Processhttp://feedproxy.google.com/~r/hificms/~3/jLeVHTtjCQk/using-ansible-and-capistrano-for-deploying
<p>Deployment is a messy subject. Between process managers, caching, proxies, databases, etc, trimming 'it works on my machine' down simply to 'it works' is no small task.</p>
<p>There are a ton of ways to go about deploying responsibly - I use git hooks for smaller personal projects, and store my database dumps in the repository itself. Since I'm the only maintainer for these sites, I make database, CMS, and code changes at the same time locally, and then can deploy with one push to get an exact live copy of what I see on my machine.</p>
<p>For NMC as a whole, though, this process isn't viable. When the roles of developer and content editor are decoupled, as they most often are, the two jobs are at odds. The staging or production database is more accessible, and being able to post content immediately to your blog is the whole point of using a content management system - therefore, production is king. There is some debate around whether developing against live data is good practice - in many cases, production data is sensitive and should be isolated from devs. Here at NMC, however, our policy is to develop as closely as possible to the live environment, and that means pulling down realistic data in cases where data sensitivity is not a concern.</p>
<p>So &ndash; we need to test code before we deploy to live, but we prefer testing with live data, and our testing should happen in an environment that is as close to production as possible. How do we do it?</p>
<h3>Pairing Ansible &amp; Capistrano in NMC's Deploy Process</h3>
<p><strong>Let's start with <a href="http://www.ansible.com">Ansible</a>.</strong></p>
<p>Ansible is all about automated environment duplication. The concept is simple but powerful: author a 'playbook' with a list of steps that you'd like automated, and let Ansible handle the boring stuff. In the context of deployment, we use Ansible to provision our local development environments and our production environments, to ensure that everything from nginx configurations to php settings to databases are repeatable and predictably created and configured. Each of our projects has a dedicated set of playbooks, which are applied whenever our VMs are provisioned, or code is pushed to staging or production (it's important to note that these playbooks are idempotent by design - more on that later).</p>
<p>Automating these steps gets us closer towards one of our main goals - identical dev and production environments. We're trying to ensure that when we develop on a local virtual machine, we're getting results that will be consistent across each dev's&nbsp;local virtual machine, along with the staging and production servers.</p>
<p>Here's a development playbook at a glance:</p>
<pre>- hosts: 127.0.0.1<br /> connection: local<br /> become: yes<br /> vars:<br /> app: "APP_NAME"<br /> domain: "APP_NAME.nmc"<br /> ssl: true<br /> devMode: true<br /> env:<br /> "MYSQL_HOST": 127.0.0.1<br /> "MYSQL_PORT": 3306<br /> "MYSQL_USER": "orbeck_of_vinheim"<br /> "MYSQL_NAME": "sorceries"<br /> php:<br /> "max_execution_time": 60<br /> "max_input_time": 60<br /> "memory_limit": 128M<br /> "post_max_size": 50M<br /> "upload_max_filesize": 50M<br /> "max_file_uploads": 2<br /> "timezone": "UTC"<br /> "opcache_memory": 64<br /> "opcache_max_files": 4000<br /> user: vagrant<br /> group: www-data<br /> roles:<br /> - mysql_db<br /> - website<br /> #- { role: wordpress }<br /> #- { role: craft }</pre>
<p>The playbook syntax is written in yaml, and is simple to follow - this playbook is for our VM.</p>
<p>First, we're setting variables that will be used later down the line in the various 'roles' that the playbook will run. The roles - mysql_db and website, located towards the bottom - are defined in further yaml files. The mysql_db role does what it says on the tin: handles the creation of both a database and user for the project (if they don't already exist). The website role installs composer dependencies, puts the php and nginx configuration templates into place, and restarts/reloads those services as necessary. We even have dedicated roles for extra steps depending on the type of project we're creating (Wordpress, Craft, etc).</p>
<p>Ansible includes modules for common tasks, like file system manipulation and database installation. Here's a&nbsp;snippet from our mysql_db role, for example:</p>
<pre>---<br />- name: Create db<br /> mysql_db: name=sorceries state=present<br /> notify:<br /> - restart mysql</pre>
<pre>- name: Create db user and grant privs<br /> mysql_user:<br /> name: "{{ user }}"<br /> password: "{{ pw }}"<br /> priv: "{{ db }}.*:ALL,GRANT"<br /> host: "%"<br /> state: present<br /> notify:<br /> - restart mysql</pre>
<p>Easy! We define a database name and a state, and then a user, settings, and state.</p>
<p>Similarly, we also have playbooks for our staging and production servers. Just as the development playbooks are run whenever our VM is provisioned, these playbooks are run whenever code is deployed. The other benefit to this approach is that environment configuration becomes easily accessible, and a part of the repository. Changes to the environment become as simple, testable, and deployable as changes to the code base.</p>
<p>So now we've covered how Ansible enables us to automate our environments - but what about the actual act of deploying? And how do we tackle the challenge of developing locally, but against live data?</p>
<p><strong>Enter the other half of our dynamic duo: <a href="http://capistranorb.com/">Capistrano</a>.</strong></p>
<p>Capistrano is also useful for task automation, but we use it primarily to handle deployment and remote code execution on our staging and production servers, through simple ruby tasks. Everything Capistrano tasks do is handled over SSH. The idea is to write a set of steps to handle deployment, and then parametrize the steps for different environments (called 'stages' in Capistrano jargon).</p>
<p>Capistrano's deploy task handles a lot under the hood - when given variables such as these:</p>
<pre>set :application, 'application_name'<br />set :application_type, 'custom'<br />set :repo_url, "git@gitlab.com:user/application.git"<br />set :deploy_to, "/var/apps/#{fetch(:application)}"<br />set :scm, :git<br />set :keep_releases, 5</pre>
<p>Capistrano will deploy to the remote server (defined elsewhere), pulling the specified repo into the :deploy_to location, under the assumption that the repo is a git repository. The last setting, :keep_releases, is for some of Capistrano's secret sauce&nbsp;- when it does a deploy, capistrano keeps track of several 'releases' - previous deploys. The up-to-date, 'live' release ends up in a 'current' directory by default, and older ones are kept in adjacent directories labeled by date. This is tied into another one of Capistrano's advantages - rollbacks.</p>
<p>Deploys are done like so:</p>
<pre>cap [stage] deploy. </pre>
<p>But what if a new release breaks in the live environment, for whatever reason? Simple -</p>
<pre>cap [stage] deploy:rollback. </pre>
<p>This task takes care of re-linking the previous release, restoring your app to its last (presumably) working state, so downtime is minimized.</p>
<p>Another cool feature, and one that illustrates how Capistrano and Ansible work together, is hooks - hooks can be used to define whether additional tasks should happen before or after a task is run. For example:</p>
<pre>after "deploy:finished", "Ansible:apply"</pre>
<p>Straightforward, right? After a deploy happens, run the project's Ansible playbook.</p>
<p>Practically, what that means is a new release of code is pulled from the repository and placed into the 'current' release directory on deploy. Then, Ansible takes care of installing composer dependencies, project-specific php and nginx configurations, creating and databases or users, etc as defined in the playbook.</p>
<p>I'm merely scratching the surface here - Capistrano is extremely powerful, but it's a deep magic, especially for those unfamiliar with Ruby. Luckily, the documentation is quite good.</p>
<p>Beyond automating deploys, Capistrano tasks can also handle one-off tasks on remote servers. Remember that issue with needing to develop locally against live data? To tackle this, we wrote a Capistrano task that's called like so:</p>
<pre>cap [stage] db:pull</pre>
<p>This command does two things - first, it dumps, zips, and downloads the production database to the local project directory. Then, assuming the VM is running, it installs it into the VM's mysql server. Couldn't be simpler.</p>
<p>Another example,</p>
<pre>cap [stage] drupal:files:pull</pre>
<p>Pulls down drupal uploads and puts them in place locally on our VM - &nbsp;we also have a similar task for pulling down wordpress uploads. Again, the idea is to simulate the production environment as closely as possible, so that our code works&nbsp;as expected no matter where it's running. The other bonus, of course, is that when a bug is reported on the live site, simulating the live environment this closely makes diagnosing issues much simpler and more efficient.</p>
<h3>Closing Thoughts</h3>
<p>&nbsp;</p>
<p>Remember - the implementations above are just an illustration for how we choose to use these tools. We've got a great development pipeline here at NMC that works for our needs, but our needs aren't everyone's needs. Hopefully, these examples have whet your appetite for some DevOps improvement or experimentation, and piqued your interest in one or both of the tools I've discussed. They're both really powerful, and can and should be applied, with or without other tools, in whatever way suits your needs. Whatever your situation, though, it'd be a mistake to overlook them.</p><img src="http://feeds.feedburner.com/~r/hificms/~4/jLeVHTtjCQk" height="1" width="1" alt=""/>Thu, 25 May 2017 15:50:00 -0400http://www.newmediacampaigns.com/blog/using-ansible-and-capistrano-for-deployinghttp://www.newmediacampaigns.com/blog/using-ansible-and-capistrano-for-deployingA Recap of FusionConfhttp://feedproxy.google.com/~r/hificms/~3/qcYhr6SxAqE/fusionconf-recap
<p class="p1">This past Friday a few of us hit the road to Charlotte to attend and participate in FusionConf. Not only was a portion of NMC in the crowd, but they were on stage as well! Both NMC's <a href="http://www.newmediacampaigns.com/about/team/ashley-morgan">Ashley</a> and NMC close friend,&nbsp;Lenny of <a href="http://www.heymonkeydesign.com/" target="_blank">Hey Monkey! Design</a> gave amazing talks about optimizing your design process and how unlimited revisions (in life) can actually be a good thing!&nbsp;If you haven&rsquo;t heard of <a href="http://fusionconf.io" target="_blank">FusionConf</a> yet, it&rsquo;s a half-day jam packed of talks about web design, UX, and development. This year's Design Edition featured 6 speakers that ranged from illustrators to screen printers to web and ux designers.</p>
<p class="p1">Check out a few of&nbsp;our takeaways from the afternoon:</p>
<h3 class="p1">Immerse Yourself In Your Craft</h3>
<p class="p1">As designers, we have awesome jobs but sometimes work can just be, well&hellip;work. I&rsquo;ve had plenty of days where I sign off and forget about design completely (which is totally acceptable and necessary sometimes!) but in order to grow as a designer and create great work we need to immerse ourselves in our craft on a day-to-day basis. <a href="http://ayanacampbell.com/" target="_blank">Ayana Campbell</a><span class="s1">&rsquo;s</span> talk was full of great tidbits about what she&rsquo;s learned so far in her creative career. She reminded us to cultivate our interests, seize opportunities, and surround ourselves with people to learn from. Throughout the conference I was reminded that as designers we are always growing. Taking on a personal side project or attending design meetups every now and then will only make us that much better at our 9 to 5&rsquo;s.</p>
<h3 class="p1">Take It Easy</h3>
<p class="p1">You can't rush creativity. Yes, there is always a deadline that needs to be met, but if we manage our time properly from start to finish we&rsquo;ll make it through projects without too much stress and end on a good note.&nbsp;<a href="http://www.henhousedesign.co" target="_blank">Ashley Morgan</a>'s&nbsp;talk was about how design is a marathon and you shouldn&rsquo;t move too fast or too slow. The design process includes a pre-race, starting line, mid race, and the finish line and all steps are necessary for a successful project. Oftentimes&nbsp;at the beginning of the project I want to jump straight into the design phase and knock out a great design! But it doesn't work like that. Even if you end up&nbsp;creating a great design right off the bat it still may not hit that mark with the clients needs. Trust the process!</p>
<h3 class="p1">Go the Extra Mile</h3>
<p class="p1"><span class="s1">I know, this nugget might sound like the opposite of &ldquo;taking it easy&rdquo;, but&hellip;. do you want to make satisfactory work or outstanding work? The difference between the two doesn&rsquo;t have to be some huge undertaking that takes hours. It could be very minor but will make a big impact. Whether you create an extra layout when you have time, work a bit longer to polish a design, or learn a new skill in your free time, it all pays off.&nbsp;</span><span class="s2"><a href="http://www.melshields.com/" target="_blank">Mel Shields</a>&nbsp;</span><span class="s1">chatted about motion design and how animations, even very subtle effects, can do so much for a website and it's overall user experience. Personally, I&rsquo;ve been diving into learning svg icon animation and the NMC development team has already taken steps to use more animation on our websites just to give them that finishing touch!&nbsp;</span>In the words of <span class="s1">Lenny Terenzi</span>, &ldquo;if it scares you, do it!&rdquo;</p>
<p class="p1"><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/fusionconf-img.jpg" alt="" width="1440" height="985" /></p>
<p class="p1"><span class="s1">It&rsquo;s safe to say we all left feeling inspired and refreshed! Keep an eye out for future versions of the conference like FusionConf: Frontend Edition this September and a FusionConf: Holiday Edition in December.</span></p><img src="http://feeds.feedburner.com/~r/hificms/~4/qcYhr6SxAqE" height="1" width="1" alt=""/>Wed, 10 May 2017 12:05:00 -0400http://www.newmediacampaigns.com/blog/fusionconf-recaphttp://www.newmediacampaigns.com/blog/fusionconf-recapA Review of Craft Commercehttp://feedproxy.google.com/~r/hificms/~3/4ONLw-xN3RM/a-review-of-craft-commerce
<p>We&rsquo;ve made no secret of the fact that we here at New Media Campaigns love&nbsp;<a href="https://craftcms.com/" target="_blank">Craft CMS</a>. For verification of our love, you can check out our <a href="http://www.newmediacampaigns.com/blog/review-of-craft-cms-tips-to-get-started">review of Craft and tips to get started</a>. &nbsp;While many CMS&rsquo; make you fit your process into their - often idiosyncratic - structure, building things on Craft feels like the development path of least resistance. Craft brings a level of clarity to constructing websites that is difficult to find in a CMS.</p>
<p>Clarity of the Craft CMS kind is something that has been sorely lacking in another web development area for a long time - e-commerce. The web development road to a successful e-commerce solution is paved with huge, monolithic solutions that you need to take a class to be proficient in, and one-off custom solutions that are rough to maintain.</p>
<p>So when <a href="https://craftcommerce.com/" target="_blank">Craft Commerce</a> was added as a marquee plugin for Craft in late 2015, we were very intrigued. Lately, we&rsquo;ve had the chance to try it out on a few projects, and&nbsp;we love it. &nbsp;Below we detail our favorite things about Craft Commerce, ways to most effectively use the setup, and tips for how you can jumpstart your next e-commerce project with Craft Commerce.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/craft-1-opt.png" alt="" width="1000" height="646" /></p>
<h2>All the Good Craft CMS Parts, in Commerce Form</h2>
<p>Just like the Craft Commerce docs recommend, we also recommend playing around with plain old Craft CMS before you get your feet wet with Craft Commerce. That&rsquo;s an important step, not because Craft CMS has a lot of unique concepts that you&rsquo;ll need to wrap your head around to &ldquo;get&rdquo; Craft (Craft CMS is thankfully very light on Craft-only special knowledge), but because Craft Commerce takes all the great Craft CMS concepts and builds on them.</p>
<p>Part of the reason for this is Craft Commerce is made by <a href="https://pixelandtonic.com/">Pixel &amp; Tonic</a>, the same company that makes&nbsp;Craft. Craft Commerce is also a marquee plugin - at the top of the craftcms.com website, there&rsquo;s a link for &ldquo;Commerce&rdquo; - advertising the fact that Commerce is a first party, supported solution.</p>
<p>But even though Craft Commerce is a first party add-on, Pixel &amp;&nbsp;Tonic has impressively kept it entirely&nbsp;inside of their own plugin structure. No core additions are needed for Craft Commerce. In the development world, that&rsquo;s called &ldquo;eating your own dogfood&rdquo; (the development wordl admittedly needs some better metaphors), and it isn&rsquo;t as easy as it sounds.</p>
<p>Commerce also applies a similar licensing structure as Craft - you can download the full plugin for free at craftcommerce.com, and when you want to start selling things you just grab a license and you&rsquo;re all set.</p>
<h3>Logical Licensing Worth the Price</h3>
<p>There&rsquo;s only one license for Craft Commerce - it&rsquo;s $700 and you buy it one time. It says $999 on the Craft Commerce website, but only because it technically comes with a $300 Craft Pro license - if you don&rsquo;t need a Craft Pro license or already have one, you&rsquo;re good to go with the $700 option. However, we always need the Craft Pro license features, so realistically you&rsquo;ll need around $1k for both licenses.</p>
<p>If you come from a world of the free and/or $25 plugin, you might have some sticker shock needing to shell out $1,000 for a license, but if you are building a store or other e-commerce product for a client, a $1k for a solution like Craft Commerce is an&nbsp;absolute steal.</p>
<p>On the value side, if you&rsquo;d like to build something comparable to the feature set of Craft Commerce, I&rsquo;ll see you in 6 months when you&rsquo;ve got a rocky beta going. $1k and a few hours of configuration time gets you almost all of the way to a complete and polished e-commerce setup, and the time and thought that the developers put behind Craft Commerce is well worth the price of admission.</p>
<p>That being said, if you just want to get something up to sell t-shirts for you band or something else where you are not truly focused on ecommerce, I&rsquo;d suggest a hosted, lower overhead solution (<a href="http://www.shopify.com" target="_blank">Shopify</a> comes to mind).</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/craft-11.png" alt="" width="734" height="614" /></p>
<h3>Quick, Feature-Rich Starting Point</h3>
<p>When you download Craft Commerce you get two folders - commerce and templates. To install, pop the commerce folder into craft/plugins and the templates/shop folder inside of craft/templates. Craft mentions these templates are optional, but these contain some nce starter logic for a lot of Craft Commerce&nbsp;features.</p>
<p>After that, activate the plugin via the Craft CMS backend like you normally do. When you first install Craft Commerce you&rsquo;ll notice a new Commerce menu section in the left&nbsp;hand sidebar. This is where you&rsquo;ll control Craft Commerce settings as well as view&nbsp;cart order data.</p>
<p>Guess what? You&rsquo;re ready to build! You already have a functional cart with a dummy payment gateway that you can immediately start using to test out and build from there. Craft Commerce&rsquo;s default setup is a great mix between opt-in features and extra things you can easily delete in the templates.</p>
<h3>Impressive Extensibility</h3>
<p>More than any other feature, a commerce solution has to get extensibility right. E-commerce solutions are the true snowflakes of the web development world - no two are the same - and an e-commerce solution that makes too many assumptions will eventually be an issue for any project. Craft Commerce&rsquo;s first challenge is maintaining simplicity while including enough extensibility to be a viable solution for the majority of e-commerce applications out there.</p>
<p>On extensibility, Craft Commerce is a rockstar, giving you several layers of customization on seemingly every feature.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/craft-8-opt.png" alt="" width="1000" height="646" /></p>
<p>The first level is what we&rsquo;ll call the control panel configuration level - basically anything that Craft exposes via the control panel that is simple to set up and configure. In this level, Craft Commerce makes it simple to set up:</p>
<ul>
<li>Payment gateways (there are almost 40 gateway options when you set up a payment method)</li>
<li>Product Types</li>
<li>Product Fields</li>
<li>Product Variants</li>
<li>Currencies, including conversion rates</li>
<li>Tax Categories</li>
<li>Tax Zones</li>
<li>Tax Rates</li>
<li>Shipping Categories</li>
<li>Shipping Zones</li>
<li>Shipping Methods</li>
<li>Order Statuses</li>
<li>Order Fields</li>
</ul>
<p>Out of the box this is extremely impressive - you can build something very custom just in the control panel interface.</p>
<p>One of our favorite easily customizable features is Order Status - if you have a unique process that an order goes through - for instance, if you need to verify some order data before an order can actually be shipped - you can set this up as a series of order statuses. The status history of that order (along with optional messages that can be attached to each order change) will be tracked, and emails can be associated and sent with a specific order status change. That&rsquo;s a lot of custom functionality that can be set up very easily.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/craft-4.png" alt="" width="1820" height="582" /></p>
<p>Then, you get down into the code customization level, which lets you build off of Craft Commerce&rsquo;s structure in your own plugins and templates. For this level, one of my favorite features is the concept of a <a href="https://craftcommerce.com/docs/purchasables">purchasable</a> - an element type that inherits a base Purchasable class.</p>
<p>Anything you can add to a cart is a purchasable - so right away you know that besides the product types that you can build in the configuration area, you can also build essentially anything you&rsquo;d like that you&rsquo;d like to add to a cart.</p>
<h3>Custom Fields and Variants</h3>
<p>Almost every CMS now has some sort of custom field feature (even Wordpress), but we love the simplicity and extensibility of the Craft CMS custom fields system. In Craft Commerce, you can bring all of your custom field skills to not only products, but orders as well, meaning you can define exactly the set of data you&rsquo;d like to be able to add to an order as a whole.</p>
<p>But one of the most useful features for us has been variants - essentially a matrix field that is associated with a product and can define different variations on a product. This includes a lot of powerful functionality, including inventory numbers, allowed quantity, and more.</p>
<p>The best part of this feature is that variants can have their own custom fields as well, giving you a lot of flexibility in how you set up and define your product catalog.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/mozzarella.png" alt="" width="2964" height="1914" /></p>
<h3>Extensive Payment Gateways</h3>
<p>I will let you in on a little secret - I really don&rsquo;t like dealing with payment gateways. There are hundreds of them and each of them seems to have chosen a unique reason why they are difficult to work with.</p>
<p>Craft Commerce has done an amazing job of making payment gateways bearable again by including a huge amount of them out of the box. Just fill out the information for that specific gateway, and you are set up with that gateway. If you need to define a custom gateway, there&rsquo;s a full gateway API.</p>
<p>I still don&rsquo;t like payment gateways, but this makes dealing with them much easier.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/CraftCommerceReview/craft-7-opt.png" alt="" width="1000" height="683" /></p>
<h3>Much More</h3>
<p>Of course, Craft Commerce isn&rsquo;t a perfect solution to everything - no product can be. And, Craft Commerce also has room for improvement. I think there could be more comprehensive documentation, more hooks, and more sophisticated SKU generation.</p>
<p>But one of the most impressive things about Craft Commerce is how much we haven&rsquo;t had to even touch yet. We haven&rsquo;t had to wade into the world of tax categories yet, but Craft Commerce is set up in a way that if you aren&rsquo;t using a feature, you are not constantly tripping over it. Also, when we have a client that has complex tax needs, we know Craft Commerce will be able to handle it.</p>
<p>And on top of the existing features we haven't yet played with, Craft and Pixel &amp;&nbsp;Tonic are also growing and adding brand new features all the time. &nbsp;This is a solid product that is only getting bigger and better with time.</p>
<p>Craft Commerce is a perfect melding of out of the box functionality paired with the ability to customize it to your own needs. &nbsp;If you have a big e-commerce project coming up, you'd be doing yourself and your client a disservice if you didn't give Craft Commerce a good, long look. &nbsp;</p><img src="http://feeds.feedburner.com/~r/hificms/~4/4ONLw-xN3RM" height="1" width="1" alt=""/>Tue, 09 May 2017 11:20:00 -0400http://www.newmediacampaigns.com/blog/a-review-of-craft-commercehttp://www.newmediacampaigns.com/blog/a-review-of-craft-commerceWebsite Accessibility and the Law: ADA Compliance and WCAG 2.0http://feedproxy.google.com/~r/hificms/~3/4sm-1Nl7jzA/website-accessibility-and-the-law-ada-wcag20
<p><span style="font-weight: 400;">Last spring, I was approached by my local chapter of the </span><span style="font-weight: 400;">Legal Marketing Association</span><span style="font-weight: 400;"> about presenting alongside attorney </span><a href="http://www.youngmoorelaw.com/h/our-people/lawyers/dana-hoffman/"><span style="font-weight: 400;">Dana Hoffman of Young Moore</span></a><span style="font-weight: 400;"> on the </span><a href="https://www.ada.gov/"><span style="font-weight: 400;">Americans with Disabilities Act (ADA)</span></a><span style="font-weight: 400;"> and its application to </span><a href="http://www.newmediacampaigns.com/services/law-firm-website-design"><span style="font-weight: 400;">law firm website design</span></a><span style="font-weight: 400;">. The presentation was fun and informative, and I was honored shortly thereafter the opportunity to expand the focus for an audience of litigators at the 2017 <a href="http://www.dri.org/">Defense Research Institute</a>&rsquo;s Retail and Hospitality Conference in Chicago. I&rsquo;ll be presenting on this topic this Friday alongside </span><a href="https://www.hwglaw.com/team/amy-e-richardson/"><span style="font-weight: 400;">Amy Richardson of Harris Wiltshire &amp; Grannis</span></a><span style="font-weight: 400;">. Amy has worked on both the litigation and government enforcement sides of this issue and we&rsquo;re both looking forward to talking with attorneys representing clients across the business spectrum on this interesting topic.</span></p>
<p><span style="font-weight: 400;">To that end, I wanted to share a short post on the history of the ADA and websites, an update of where things stand from a legal perspective in the United States, and then review a few guidelines and resources that you should keep in mind if you are a person managing a website for a public facing business or organization.</span></p>
<h3><b>The Legal Perspective: ADA Compliance for Websites</b></h3>
<p><span style="font-weight: 400;">As I&rsquo;ve dug into&nbsp;this topic over the last year, I have to say I&rsquo;ve been most fascinated by watching the process of a law originally intended for physical spaces be considered for interpretation in the digital space. </span></p>
<p><span style="font-weight: 400;">For a bit of background, </span><a href="https://www.ada.gov/ada_title_III.htm"><span style="font-weight: 400;">Title III of the Americans with Disabilities Act of 1990</span></a><span style="font-weight: 400;"> deals directly with places of public accommodation -- think hotels, restaurants, office buildings, schools, etc. -- and has set forth extremely clear guidelines on physical locations and the standards they should meet to serve disabled populations. </span></p>
<p><span style="font-weight: 400;">All of that was well and good in 1990, when the then-nascent Internet was not the ubiquitous presence in the lives of Americans that it is today. For example, retail shopping in-person at a mall in 1990 was booming, </span><a href="https://www.nytimes.com/2017/04/15/business/retail-industry.html"><span style="font-weight: 400;">unlike today where online shopping has completely changed the game for retailers.</span></a><span style="font-weight: 400;"> As time and technologies evolved however, the Department of Justice (DOJ), the entity charged with enforcing the ADA, hinted but never definitively stated that Title III may indeed be applicable to websites.</span></p>
<p><span style="font-weight: 400;">Upon first recognizing this possible application of Title III of the ADA in 2003, the DOJ laid out a </span><a href="https://www.ada.gov/websites2_scrn.pdf"><span style="font-weight: 400;">Voluntary Action Plan</span></a><span style="font-weight: 400;"> for government agencies and private entities, and later followed that up with a short list of recommendations in 2007. In 2010, the DOJ seemed to be picking up steam on this topic when they released a </span><a href="https://www.ada.gov/anprm2010/web%20anprm_2010.htm"><span style="font-weight: 400;">Notice of Advance Rulemaking</span></a><span style="font-weight: 400;"> -- stating that they were &ldquo;considering revising the regulations implementing Title III of the ADA in order to establish requirements for making the goods, services...offered by public accommodations via the Internet, specifically at sites on the World Wide Web, accessible to individuals with disabilities.&rdquo; </span></p>
<p><span style="font-weight: 400;">From this statement, it was forecasted by those in the accessibility community that formal guidelines would come down from the DOJ in 2015 -- a date which was later pushed out to 2017 for government agencies and 2018 for private businesses and entities.</span></p>
<p><span style="font-weight: 400;">Meanwhile, the tech community and our courts system were forced to deal with the issue on their own. First, the tech community coalesced around a set of standards via the World Wide Web Consortium, establishing the </span><a href="https://www.w3.org/WAI/intro/wcag"><span style="font-weight: 400;">Web Content Accessibility Guidelines</span></a><span style="font-weight: 400;"> in 2008 and later updating them in 2012 (WCAG 2.0), when they were also adopted as an </span><a href="https://en.wikipedia.org/wiki/International_Organization_for_Standardization"><span style="font-weight: 400;">ISO standard</span></a><span style="font-weight: 400;">. Today, web designers and developers across the world use WCAG 2.0 to guide their design and development, typically aiming to meet all of the standards under </span><a href="https://www.w3.org/WAI/WCAG20/quickref/?currentsidebar=%23col_customize&amp;levels=a%2Caaa"><span style="font-weight: 400;">Level AA.</span></a></p>
<p><span style="font-weight: 400;">On the legal side, ambiguity in the law and the speed at which technology and dependence on the Internet has developed created an opportunity for litigation all over our nation. As these cases have moved through our system, the courts have been nearly split -- with the 1st, 3rd and 7th Circuits ruling that the ADA </span><b>does</b><span style="font-weight: 400;"> apply to websites, while the 6th, 9th and 11th Circuits have ruled that it </span><b>does not</b><span style="font-weight: 400;">. These latter rulings have all been based on the interpretation that the ADA is focused on physical location and requires a nexus test. Other circuit courts in the United States have yet to rule on the topic. </span></p>
<h3><b>A Look Ahead</b></h3>
<p><span style="font-weight: 400;">In January of 2017 the</span><a href="http://www.lexology.com/library/detail.aspx?g=e627e1be-eddf-44cb-9459-c8f72de48334"><span style="font-weight: 400;"> federal government moved forward with the adoption of WCAG 2.0 AA as the standard for federal agency sites</span></a><span style="font-weight: 400;">, leading many in the accessibility community to believe that a full adoption of the WCAG 2.0 Level AA standards by the DOJ for websites both public and private would be forthcoming. As of the writing of this post, that has neither occurred nor been added to the DOJ&rsquo;s agenda, likely due to the installation of a new administration and other legislative priorities.</span></p>
<p><span style="font-weight: 400;">Without a crystal ball, it&rsquo;s difficult to gauge where the Trump administration will direct the DOJ on ADA regulations in relation to websites moving forward, if they do at all. The administration has already emphasized a </span><a href="https://www.whitehouse.gov/the-press-office/2017/01/30/presidential-executive-order-reducing-regulation-and-controlling"><span style="font-weight: 400;">desire to move away from regulation</span></a><span style="font-weight: 400;"> and those with a vested interest in the application of the ADA to websites have taken that as a signal that the already thrice delayed process will continue to be pushed down the list of priorities. </span></p>
<h3><b>Why Accessibility?</b></h3>
<p><span style="font-weight: 400;">So, you may ask, if the courts are divided and the DOJ doesn&rsquo;t currently have standards set -- or a timeline in place for setting standards -- around accessibility for private entities, why should you worry with having an accessible website for your business or organization? </span></p>
<p><span style="font-weight: 400;">Great question. From where I sit, here&rsquo;s why:</span></p>
<ol>
<li style="font-weight: 400;"><b>Your company&rsquo;s website is your primary communications tool and a vital part of your infrastructure.</b><span style="font-weight: 400;"> Your clients and customers -- both current and potential -- are coming to you from a wide range of backgrounds, experiences and perspectives. It makes good business sense to have a site that is accessible to as many people as possible to demonstrate to your users and clients that you understand their needs and want to meet them where they are in order to best serve them. &nbsp;</span></li>
<li style="font-weight: 400;"><b>If you work to have a fully accessible website, you will already be up to standard when the ADA compliance regulations eventually evolve</b><span style="font-weight: 400;"> -- whether that&rsquo;s in this administration or the next. </span></li>
<li style="font-weight: 400;"><b>Google and the government are already making asks around their expectations of accessibility as a cornerstone of website development</b><span style="font-weight: 400;">. </span><a href="https://moz.com/blog/accessibility-seo-1"><span style="font-weight: 400;">Google already rewards sites that check many accessibility boxes with higher rankings</span></a><span style="font-weight: 400;"> and the government has signaled that </span><a href="https://www.gsa.gov/portal/content/105254"><span style="font-weight: 400;">web accessibility standards will be required for government contractors</span></a><span style="font-weight: 400;">. By building a more accessible website now, you may significantly impact your SEO and ranking potential, not to mention open the doors to possible work as a government contractor. </span></li>
<li style="font-weight: 400;"><b>Your site will also be intrinsically stronger in both design and content</b><span style="font-weight: 400;"> because you and your web team will have taken the time to think through accessibility standards -- often seen as best practice guidelines in our industry -- thus ensuring a more robust and user-friendly web presence for all populations.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">As long as this issue remains unclear and without set guidelines from the DOJ, companies like yours who do business on the web can expect that </span><b>not bringing your site up to ADA standards could leave you open to the possibility of litigation.</b></li>
</ol>
<h3><b>Making Your Website Accessible</b></h3>
<p><span style="font-weight: 400;">So, how do you start working toward a more accessible website for your business or organization?</span></p>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Start by deploying the </span><a href="http://wave.webaim.org/extension/"><span style="font-weight: 400;">WAVE Chrome Extension</span></a><span style="font-weight: 400;"> to help you identify ways to improve on your site.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Review and frequently refer back to </span><a href="https://www.w3.org/TR/WCAG20/"><span style="font-weight: 400;">WCAG 2.0</span></a><span style="font-weight: 400;"> and </span><a href="http://webaim.org/"><span style="font-weight: 400;">Web AIM</span></a><span style="font-weight: 400;"> for regulations and best practices, as set forth by the tech community. </span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Make a plan for your site that includes the mission of working towards accessibility in your next website redesign -- likely in the next 1-3 years max.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Keep compliance in mind when <a href="http://www.newmediacampaigns.com/blog/website-design-request-for-proposal-template-tips">writing&nbsp;an RFP for your website</a>&nbsp;and hiring vendors. Be sure to ask every web design or full-service digital marketing company you contract with about their experience building to WCAG 2.0 standards.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Keep an eye on mobile -- pay attention to your site on mobile and be sure that any updates you make to create a more engaging web presence still strives for accessibility for all.</span></li>
</ol>
<h3><b>The Quick Jumpstart -- What to Look for Today</b></h3>
<ol>
<li style="font-weight: 400;"><span style="font-weight: 400;">Keep contrast in mind -- do headers and text stand out against the background of the site? Are they easy to read?</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Don&rsquo;t use color to inform -- </span><a href="http://webaim.org/articles/visual/colorblind"><span style="font-weight: 400;">stay away from red</span></a><span style="font-weight: 400;">! </span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Deploy alt tags and descriptions for videos, animation and photography.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Write clear, concise copy -- don&rsquo;t forget translations if your business offers international services.</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;">Think like a screen reader: does your site work without CSS?</span></li>
</ol>
<h3><b>The Bottom Line</b></h3>
<p><span style="font-weight: 400;">Accessibility is important and should be a part of your company or organization&rsquo;s long-term digital presence strategy. As the web grows ever more refined and personalized, it will no longer be just other entities like the government, Google and the DOJ that expect your site to function with all possible populations in mind. Individual users of all backgrounds, abilities and experience will expect and demand that your site be clear, easy to use and accessible to all.</span></p>
<h3><b>Further Reading</b></h3>
<ul>
<li style="font-weight: 400;"><span style="font-weight: 400;"><a href="http://webaim.org">WebAIM: &nbsp;Web Accessibility in Mind</a>&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;"><a href="http://adata.com">ADA National Network</a></span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;"><a href="http://www.ada.gov/pcatoolkit/chap5toolkit.htm">DOJ ADA Best Practices Tool Kit (government)</a>&nbsp;</span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;"><a href="https://una.im/a11y-for-the-masses/">It's Not About Morals, Accessibility is for the Masses</a></span></li>
<li style="font-weight: 400;"><span style="font-weight: 400;"><a href="http://www.lawyersmutualnc.com/risk-management-resources/articles/the-changing-landscape-of-websites-and-ada-compliance">The Changing Landscape of Websites and ADA Compliance</a>&nbsp;</span></li>
</ul><img src="http://feeds.feedburner.com/~r/hificms/~4/4sm-1Nl7jzA" height="1" width="1" alt=""/>Thu, 04 May 2017 10:40:00 -0400http://www.newmediacampaigns.com/blog/website-accessibility-and-the-law-ada-wcag20http://www.newmediacampaigns.com/blog/website-accessibility-and-the-law-ada-wcag20How Making a Wireframe Kit Improved Our Designshttp://feedproxy.google.com/~r/hificms/~3/AwA8IGLX0RY/website-wireframe-kit
<p class="p1">At&nbsp;NMC, we wireframe 99% of our projects. While we have arrived at some great results by going straight to the creative design, we've refined our process over the years to now start with wireframing as the first step. &nbsp;We've found that starting with wireframes has consistently resulted in better websites with a smoother overall process.&nbsp;</p>
<p class="p1">&nbsp;</p>
<h3 class="p1">Why Wireframe?</h3>
<p>For those who are unfamiliar with the concept, wireframes are grayed out layouts that show our&nbsp;recommendations for the elements to be included on the design and their relative prominence within the site. The wireframes don&rsquo;t convey any actual design details as they generally just consist of gray boxes, but they are aimed at just presenting the layout of different features. &nbsp;There are a few reasons we find this step to be helpful:</p>
<ul class="ul1">
<li>The grayed out appearance of a wireframe makes it easy for the client to focus on layout and structure without being distracted by colors or copy.&nbsp;</li>
<li>It gives us a chance to provide the client with several&nbsp;very different layouts to choose from. If they scrap a wireframed layout idea, the loss is significantly less than if it were a fully designed layout.</li>
<li class="li1">Designers are free to fully focus on user experience and flow before choosing typefaces, colors, images, and other design elements. If a design looks great, but doesn&rsquo;t work well, it isn&rsquo;t a success after all.</li>
<li class="li1">They can be iterated on quickly. &nbsp;If the client has any significant changes or wants to combine elements from different versions, we can implement them on the wireframe much more quickly than revising a design since there aren't any creative details to fit in.</li>
</ul>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/wireframing-4.png" alt="" width="1000" height="710" /></p>
<h3>Why Make a Wireframe Kit?</h3>
<p class="p1">Even with all of those benefits, creating new wireframes from scratch for every project can quite literally be dull (gray) after a while. Making&nbsp;elements in new documents over and over again can get monotonous and use up time that we could be using to get creative on fleshed out designs. To speed things up, we often found ourselves opening up old wireframe files to pull from, which works but can be also be inefficient and counterproductive. We knew we needed a resource to make the wireframing process more efficient and since our site designs often include similar elements like news feeds, call out sections, etc, we decided to make our own wireframe kit.</p>
<p class="p1">Yes, there <i>are</i> hundreds of wireframe resources on the web, but we haven&rsquo;t come across one singular kit that includes every element we need, plus we wanted our wireframes to have a consistent look and feel to them. So, instead of downloading various kits, we built our own cohesive kit that includes common features used often across our designs.</p>
<p class="p1"><a href="http://www.newmediacampaigns.com/blog/switching-to-sketch-for-your-project">Since we design exclusively in Sketch</a>, we&rsquo;ve created a Sketch document with several pages of wireframe elements from social icons, to headers, to news feed layouts. This document is always open alongside new projects for easy access to the layout elements we need. Obviously, for many sites we&rsquo;ll change up the elements a bit, but we've found this is a really helpful and valuable starting point. Using our kit, we can reuse elements over and over on different sites, customize them for that specific site (e.g., add a thumbnail image spot), and turn around consistently polished wireframes. It has improved our process and our work.</p>
<p class="p1">Take a peek at our wireframe kit Sketch doc:</p>
<p class="p1"><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/wireframing-1.png" alt="" width="1200" height="720" /></p>
<p class="p1"><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/wireframing-2.png" alt="" width="1200" height="720" /></p>
<p class="p1"><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/wireframing-3.png" alt="" width="1200" height="720" /></p>
<p class="p1">&nbsp;</p>
<h3 class="p1">Results</h3>
<p class="p1">As a result of using this resource in the&nbsp;wireframe stage we now have more time to create innovative layouts and our wireframe elements have a consistent look across projects. Additionally, this process has freed up time to be dedicated to the design stage, giving us more time to really push it and create polished&nbsp;designs and layouts that have great usability. Our first leap was incorporating wireframing as a core part of our creative process, which we highly encourage you to try out if you're not already. Next, was building tools around that process to make it more efficient and&nbsp;effective. &nbsp;If you have your own process or favorite wireframe kits, please feel free to share in the comments!</p><img src="http://feeds.feedburner.com/~r/hificms/~4/AwA8IGLX0RY" height="1" width="1" alt=""/>Wed, 19 Apr 2017 12:00:00 -0400http://www.newmediacampaigns.com/blog/website-wireframe-kithttp://www.newmediacampaigns.com/blog/website-wireframe-kitCreative South 2017: What We're Looking Forward Tohttp://feedproxy.google.com/~r/hificms/~3/ZysaDI5x5OI/creative-south-2017-what-were-looking-forward-to
<p><span style="font-weight: 400;">Wow - has it really been four years since I wrote my first <a href="http://www.newmediacampaigns.com/blog/creative-south-2013-applying-the-inspiration">blog post recapping Creative South</a>? In 2013 our design team (then just <a href="http://www.newmediacampaigns.com/about/team/lenny-terenzi">Lenny</a> and I), packed up the car and headed to our first-ever design conference. We didn&rsquo;t know then what to expect, but we left feeling rejuvenated, inspired, and ready to knock out new design ideas and side projects. We&rsquo;ve returned every year since!</span></p>
<p><span style="font-weight: 400;">This conference has pushed us to add to our skillsets, get more involved in our local design communities (we&rsquo;ve got team members on the <a href="https://raleigh.aiga.org/" target="_blank">Raleigh AIGA</a> board, started <a href="http://www.dineanddrawclt.com/" target="_blank">Dine &amp; Draw CLT</a> and <a href="https://www.meetup.com/Charlotte-Design/" target="_blank">CLT Design</a>), speak (catch us at <a href="http://creategoodconference.com/" target="_blank">CreateGood</a>, <a href="http://fusionconf.io/" target="_blank">FusionConf</a>, and <a href="https://wmcfest.com/" target="_blank">WMCFest</a>), and even organize our own local <a href="http://fusionconf.io/" target="_blank">conferences</a>. </span></p>
<p><span style="font-weight: 400;">We can&rsquo;t wait to see what year five has in store for us. Here&rsquo;s what we&rsquo;re looking forward to most:</span></p>
<h3><span style="font-weight: 400;">Workshops</span></h3>
<p><span style="font-weight: 400;">I always love attending the workshops at CS and leaving with some new skills in my pocket. In previous years, we&rsquo;ve learned icon illustration, type design, and block printing. This year, Shannon and I will be taking <a href="https://www.creativesouth.com/workshops/">&ldquo;Creating a Logo that Lasts&rdquo;</a> with Steve Wolf and couldn&rsquo;t be more excited. Our team has been focusing more on branding in the last year, and it&rsquo;ll be great to see behind the scenes of another designer&rsquo;s logo process. Of course, we also can&rsquo;t forget the workshop Lenny is co-instructing with Victor Davila on <a href="https://www.creativesouth.com/workshops/">Character Concepting, Illustration, and Beyond</a>!</span></p>
<h3><span style="font-weight: 400;">Speakers</span></h3>
<p><span style="font-weight: 400;">The lineup at CS is always great because it pairs up fresh faces along with designers we&rsquo;ve admired for years. This year, we&rsquo;re most excited to see Erick Reagan and Alicja Colon (we&rsquo;re big fans of the work Focus Lab puts out and their Instagram feed!), Ced Funches (we love all the work Vox Media has been doing on the web), and Antoinette Carroll (we&rsquo;ve taken her workshop before and are excited to see what lessons from Creative Reaction Lab we can take back to our own communities). </span></p>
<h3><span style="font-weight: 400;">Fun stuff</span></h3>
<p><span style="font-weight: 400;">While the workshops and speakers draw us to the this conference, what keeps us coming back is just how fun this conference is. This year, look out for a pin I made in Super Team Deluxe&rsquo;s <a href="https://www.instagram.com/p/BSMSHJ6hwCU/" target="_blank">Sci-Fidelity Gallery</a>. I&rsquo;ll also be a judge in this year&rsquo;s Ink Wars at the Bridge Party on Thursday. You may remember Niki and I participated in this fun event at <a href="http://www.newmediacampaigns.com/blog/hopscotch-design-fest-2015-recap">Hopscotch Design Fest in 2015</a> - I can&rsquo;t wait to be on the other side of things! </span></p>
<p><span style="font-weight: 400;">Of course I can&rsquo;t forget about reuniting and meeting new design friends. We are a small design team, so getting the chance to meet and talk with other designers about work, process, and life is what truly makes this conference fun. </span></p>
<p><br /><span style="font-weight: 400;">Are you heading to Creative South this year? If so, we&rsquo;d love to meet you! Be sure to find one of the NMC designers and say hello!</span></p><img src="http://feeds.feedburner.com/~r/hificms/~4/ZysaDI5x5OI" height="1" width="1" alt=""/>Thu, 06 Apr 2017 00:00:00 -0400http://www.newmediacampaigns.com/blog/creative-south-2017-what-were-looking-forward-tohttp://www.newmediacampaigns.com/blog/creative-south-2017-what-were-looking-forward-toBuilding an IoT Doorbell Integration with Slackhttp://feedproxy.google.com/~r/hificms/~3/XFZfU77gcwY/building-iot-doorbell-integration-with-slack
<p>Last year, NMC moved to a great new office space. &nbsp;Our old space was a storefront on the first floor of a building that let us see anyone&nbsp;at the door who was coming for a meeting, delivery, or needed access for any other reason. &nbsp;The new space is the entire second floor of a building and the door&nbsp;leading up to our office stays locked at the ground level. &nbsp;So,&nbsp;the only way we can know if someone is downstairs and needs to get up to the office is for them to call. &nbsp;We needed a better way, and fortunately we had the tech talent to figure it out!</p>
<p>NMC uses <a href="http://www.slack.com" target="_blank">Slack</a> as our internal communications tool. &nbsp;We use it as a general chatroom, a breakout of rooms for different teams, and a 1:1 direct messaging system. &nbsp;At any given moment during the workday, there are always multiple people looking at Slack. &nbsp;So, we wanted to connect this virtual entry point to our company with our physical door. &nbsp;If we could let people buzz in from either of our doors and a notification pop up in Slack to let them in, the problem would be solved and a major headache of inviting people to see our cool new space would be relieved.</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/blog/doorbell-img.jpg" alt="Amazon's IoT Button" width="1280" height="960" /></p>
<p>We didn't want to reinvent the wheel by custom building a bunch of hardware, so we decided to piggyback on&nbsp;existing (and cheap!) Amazon hardware, <a href="https://aws.amazon.com/iotbutton/" target="_blank">the Amazon IoT button</a>, that&nbsp;we could program to bridge the divide.</p>
<p>Based on the same hardware as their Dash buttons, Amazon's IoT Button is a small blank slate of sorts for getting into the Internet of Things.</p>
<p>The concept is fairly simple - one button, one function. The button, when pressed fires an event to activate an AWS Lambda function. Lambda functions are a type of AWS service that allow users to design and run single functions in one of a few different runtime environments without setting up an entire server infrastructure. In our case, that function triggers a Slack message via Slack's Webhooks integration when someone's at our door.</p>
<h2>Setting Up</h2>
<p>First off, in order to use the IoT Button, you'll need an <a href="https://aws.amazon.com/" target="_blank">AWS account</a> - I'd encourage any developer to explore AWS anyway, as it's got a rich (if intimidating) series of tools to explore. And while AWS configuration has historically been somewhat difficult to understand and navigate due to its complexity, Amazon has made real strides in their UI and documentation recently that have helped to alleviate those issues.</p>
<p>This is especially true of the process for setting up an IoT Button - a full walkthrough is available <a href="http://docs.aws.amazon.com/iot/latest/developerguide/iot-button-lambda.html" target="_blank">here</a>&nbsp;- it's the same one I used to set up our own "IoT Doorbells". The walkthrough also leverages a wizard that Amazon built specifically to handle IoT Button Configuration, and it does a great job handling the setup of the IAM Roles and Policies so that you hardly have to deal with those aspects of the process.</p>
<p>After confirming that the setup worked with the test function (which it did, with no hitches - twice in a row!), getting the button to do what we wanted was a cinch.</p>
<p>I replaced the example function with&nbsp;<a href="https://gist.github.com/jed/57dfb5f234d88534dd74fc9f22191cc3" target="_blank">this one</a>&nbsp;(courtesy of github user 'jed'), and tweaked things to create a "Someone is a the door" message, complete with emojis. The options available for posting messages to Slack via JSON payload are pretty robust - check out <a href="https://api.slack.com/docs/messages/builder?msg=%7B%22text%22%3A%22I%20am%20a%20test%20message%20http%3A%2F%2Fslack.com%22%2C%22attachments%22%3A%5B%7B%22text%22%3A%22And%20here%27s%20an%20attachment!%22%7D%5D%7D" target="_blank">Slack's Message Builder</a> and see what you can come up with!</p>
<p>Here's our version of the IoT to Slack function:</p>
<pre>'use strict'<br /> <br />const https = require('https')<br />const qs = require('querystring')<br /><br />// Replace SLACK_WEBHOOK_ENDPOINT with your slack endpoint<br />const WEBHOOK_PATH = '/services/SLACK_WEBHOOK_ENDPOINT'<br />const EVENTS_BY_CLICKTYPE = {<br /> SINGLE : {emoji: ':bust_in_silhouette:', actor: 'Someone'},<br /> DOUBLE : {emoji: ':party-parrot:', actor: 'Party Parrot'},<br /> LONG : {emoji: ':nmc:', actor: 'Someone from NMC'}<br />}<br /><br />exports.handler = function(data, context, cb) {<br /> // Select the message parameters based on the click type<br /> let event = EVENTS_BY_CLICKTYPE[data.clickType]<br /> if (!event) return cb()<br /><br /> // Build our message JSON<br /> // These settings override the default settings for your webhook<br /> let payload = JSON.stringify({<br /> channel: '#general',<br /> username: 'Doorbell',<br /> text: `${event.emoji} ${event.actor} is at the front door!`,<br /> icon_emoji: ':door:'<br /> })<br /><br /> let body = qs.stringify({payload})<br /><br /> let options = {<br /> method: 'POST',<br /> host: 'hooks.slack.com',<br /> path: WEBHOOK_PATH,<br /> headers: {<br /> 'Content-Type': 'application/x-www-form-urlencoded',<br /> 'Content-Length': Buffer.byteLength(body)<br /> }<br /> }<br /><br /> https.request(options)<br /> .on('error', cb)<br /> .on('response', res =&gt; {<br /> res.setEncoding('utf8')<br /> res.on('data', msg =&gt; {<br /> res.statusCode == 200 ? cb(null, msg) : cb(msg)<br /> })<br /> })<br /> .end(body)<br />}</pre>
<p>And here's what we ended up with:</p>
<p><img src="https://nmcdn.io/e186d21f8c7946a19faed23c3da2f0da/347bed083486499c98f1609efa95efbd/files/Screen-Shot-2017-01-04-at-10-41-23-AM.png" alt="" width="490" height="110" /></p>
<h2>Some Final Notes</h2>
<p>The button has a lifetime of about 1000 clicks, which puts each click at $0.02 (when you figure the button is roughly $20). For potentially frequent actions, this is definitely a factor, but the convenience of setup weighs well against the cost, in my opinion.</p>
<p>There's also good news on that front: The generation 2 button (slated for release in February) should have a lifetime of 2000 clicks, halving the cost-per-push. Combined with the cost-efficiency of Lambda, this is an impressively cheap ticket to board the IoT train.</p>
<p>This was easy to setup and got us exactly what we need. &nbsp;Hopefully others find it useful and we'd love to hear about other cool Slack doorbells or uses of the IoT buttons in the comments!</p><img src="http://feeds.feedburner.com/~r/hificms/~4/XFZfU77gcwY" height="1" width="1" alt=""/>Fri, 06 Jan 2017 10:55:00 -0500http://www.newmediacampaigns.com/blog/building-iot-doorbell-integration-with-slackhttp://www.newmediacampaigns.com/blog/building-iot-doorbell-integration-with-slack