Acquia to acquire AgilOne to solve data challenges with AI

I'm excited to announce that Acquia has signed a definitive agreement to acquire AgilOne, a leading Customer Data Platform (CDP).

CDPs pull customer data from multiple sources, clean it up and combine it to create a single customer profile. That unified profile is then made available to marketing and business systems to improve the customer experience.

For the past 12 months, I've been watching the CDP space closely and have talked to a dozen CDP vendors. I believe that every organization will need a CDP (although most organizations don't realize it yet).

Why AgilOne?

According to independent research firm The CDP Institute, CDPs are a part of a rapidly growing software category that is expected to exceed $1 billion in revenue in 2019. While the CDP market is relatively new and small, a plethora of CDPs exist in the market today.

One of the reasons we really liked AgilOne is their machine learning capabilities -- they will give our customers a competitive advantage. AgilOne supports machine learning models that intelligently segment customers and predict customer behaviors (e.g. when a customer is likely to purchase something). This allows for the creation and optimization of next-best action models to optimize offers and messages to customers on a 1:1 basis.

For example, lululemon, one of the most popular brands in workout apparel, collects data across a variety of online and offline customer experiences, including in-store events and website interactions, ecommerce transactions, email marketing, and more. AgilOne helped them integrate all those systems and create unified customer data profiles. This unlocked a lot of data that was previously siloed. Once lululemon better understood its customers' behaviors, they leveraged AgilOne's machine learning capabilities to increase attendance to local events by 25%, grow revenue from digital marketing campaigns by 10-15%, and increase site visits by 50%.

Another example is TUMI, a manufacturer of high-end suitcases. TUMI turned to AgilOne and AI to personalize outbound marketing (like emails, push notifications and one-to-one chat), smarten its digital advertising strategy, and improve the customer experience and service. The results? TUMI sent 40 million fewer emails in 2017 and made more money from them. Before AgilOne, TUMI's e-commerce revenue decreased. After they implemented AgilOne, it increased sixfold.

Fundamentally improving the customer experience

Having a great customer experience is more important than ever before — it's what sets competitors apart from one another. Taxis and Ubers both get people from point A to B, but Uber's customer experience is usually superior.

Building a customer experience online used to be pretty straightforward; all you needed was a simple website. Today, it's a lot more involved.

The real challenge for most organizations is not to redesign their website with the latest and greatest JavaScript framework. No, the real challenge is to drive relevant customer experiences across all the different channels — including web, mobile, social, email and voice — and to make those customer experiences highly relevant.

I've long maintained that the two fundamental building blocks to delivering great digital experiences are (1) content and (2) user data. This is consistent with the diagram I've been using in presentations and on my blog for many years where "user profile" and "content repository" represent two systems of record (though updated for the AgilOne acquisition).

To drive results, wrangling data is not optional

To dramatically improve customer experiences, organizations need to understand their customers: what they are interested in, what they purchased, when they last interacted with the support organization, how they prefer to consume information, etc.

But as an organization's technology stack grows, user data becomes siloed within different platforms:

When an organization doesn't have a 360º view of its customers, it can't deliver a great experience to its customers. We have all interacted with a help desk person that didn't know what you recently purchased, is asking you questions you've answered multiple times before, or isn't aware that you already got some help troubleshooting through social media.

Hence, the need for integrating all your backend systems and creating a unified customer profile. AgilOne addresses this challenge, and has helped many of the world's largest brands understand and engage better with their customers.

Acquia's strategy and vision

It's easy to see how AgilOne is an important part of Acquia's vision to deliver the industry's only open digital experience platform. Together, with Drupal, Lift and Mautic, AgilOne will allow us to redefine the customer experience stack. Everything is based on Open Source and open APIs, and designed from the ground up to make it easier for marketers to create relevant, personal campaigns across a variety of channels.

Welcome to the team, AgilOne! You are a big part of Acquia's future.
Source: Dries Buytaert

Farewell Megan, but not goodbye

As you might have read on the Drupal Association blog, Megan Sanicki, the Executive Director of the Drupal Association, has decided to move on.
Megan has been part of the Drupal Association for almost 8 years. She began as our very first employee responsible for DrupalCon Chicago sponsorship sales in 2011, and progressed to be our Executive Director, in charge of the Drupal Association.
It's easy to forget how far we've come in those years. When Megan started, the Drupal Association had little to no funding. During her tenure, the Drupal Association grew from one full-time employee to the 17 full-time employees, and from $1.8 million in annual revenues to $4 million today. We have matured into a nonprofit that can support and promote the mission of the Drupal project.
Megan led the way. She helped grow, mature and professionalize every aspect of the Drupal Association. The last two years in her role as Executive Director she was the glue for our staff and the driving force for expanding the Drupal Association's reach and impact. She understood how important it is to diversify the community, and include more stakeholders such as content creators, marketers, and commercial organizations.
I'm very grateful for all of this and more, including the many less visible contributions that it takes to make a global organization run each day, respond to challenges, and, ultimately, to thrive. Her work impacted everyone involved with Drupal.
It's sad to see Megan go, both professionally and personally. I enjoyed working with Megan from our weekly calls, to our strategy sessions as well as our email and text messages about the latest industry developments, fun stories taking place in our community, and even the occasional frustration. Open source stewardship can be hard and I'm glad we could lean on each other. I'll miss our collaboration and her support but I also understand it is time for Megan to move on. I'm excited to see her continue her open source adventure at Google.
It will be hard to fill Megan's shoes, but we have a really great story to tell. The Drupal community and the Drupal Association are doing well. Drupal continues to be a role model in the Open Source world and impacts millions of people around the world. I'm confident we can find excellent candidates.
Megan's last day is September 21st. We have activated our succession plan: putting in place a transition team and readying for a formal search for a new Executive Director. An important part of this plan is naming Tim Lehnen Interim Executive Director, elevating him from Director, Engineering. I'm committed to find a new Executive Director who can take the Drupal Association to the next level. With the help of Tim and the staff, our volunteers, sponsors and the Board of Directors, the Drupal Association is in good hands.
Source: Dries Buytaert

Add your March 2018 event before tomorrow's email

Hello Drupal trainers,
Please add your March 2018 event to today. I will be announcing the events list to the educational opportunities email group tomorrow.
(Subscribe to the educational opportunities email group on your profile to get the messages if you wish.)
Thank you!

Setting Up a Plan for a Successful New Year

A new year is upon us and, with that, new plans and new goals. Personal resolutions are notoriously apt to fail, but you don’t really have that luxury when it comes to your business goals.
In today’s post, we’re going to go over how to set up a plan for success this year: How to figure out what matters to you, how to structure your progress, and how to ensure you’re always making some forward movement.
Break the Year Into Quarters
Most companies view their years by fiscal quarters, and for good reason: An entire year is just too long to plan for.
Set your personal company up for success by aiming for one big goal each quarter. And no, not multiple goals: One. It’s too easy (and all too common) to lose focus, end up overwhelmed, and fall behind when you focus on more than one goal. And hey, if you finish that quarter’s goal early? Then you can set a new one.
So what could your big goals be for the year? Well, what goals would have the most impact on your business? (If you haven’t yet done one, now would be a great time to do a SWOT analysis for your business.) A quarter goal could be growing your portfolio, making a certain number of industry contacts, optimizing your prospecting messages and methods, landing more contract work — or any one of dozens of other worthy goals.
The key is that the goal you choose needs to move your business ahead. It needs to have the end result of you getting more work and more clients. And remember: Set just one big goal for each quarter. If it’s your style, you might also benefit by breaking that goal down by month. What do you have to do in each of the three months of the quarter to meet your goal? Then, get to it!
Know Your Numbers
Your end goal is to build your business and get more work. But that’s a pretty vague goal when it comes down to it. This is another opportunity to emulate successful businesses: figure out what numbers you need to hit and then track them.
If you have a desired income amount (whether for full- or part-time copywriting), you need to know how many hours you have to work this year and what rate you need to charge to hit that number. It’s a pretty easy equation, but I’ll break it down for simplicity’s sake:
Take your desired income, divide that by 50 (weeks in a year minus two vacation weeks), and then divide that by how many hours you want to work a week. That’ll give you the average hourly rate you need to aim for.
Or, if you have a rate you’re comfortable with, take your desired income, divide that by 50 and then divide that by your hourly rate to get how many hours you need to a week to hit your desired yearly income at your current rate.
Play around a bit until you find the numbers that you’re comfortable with and then aim to hit those hours and those rates every week.
Make SOME Progress Every Day
This is one of those concepts that’s so simple in practice that people immediately dismiss it…and then notice weeks have gone by without making any movement toward their goals.
At the beginning of every single day, figure out what your top task is for moving toward your goals and building your business. It’s very likely that you’ll have copywriting projects you need to do that day, but working on a project isn’t building your business. Figure out your top work task of the day (what copy you need to get written) and then your top business-building task of the day.
And here’s the key, you’ve got to do something that makes progress toward your goals every day. Some days you’ll complete a major task and some days you’ll just make some progress on a minor one. But the key is to put in time every day.
It’s very tempting — and take it from someone who knows — to skip something on your To Do list just because you don’t have time that day to do all of it. But the problem is that that skipping becomes a habit and, all of a sudden, you’re looking at your to-do list and realizing you haven’t made any progress on a very important task for weeks or even months.
So do something, chip away at some task, that makes progress toward your goals every day. (For a little more insight about how to do that, check out this post about Mel Robbins’ 5 Second Rule.)
Your turn! What systems do implement to set yourself, your business, and your year up for success? Let us know in the comments below!


Copywriting Q&A: Prospecting for Clients Over the Holidays

The effort you put into prospecting is directly related to the number and quality of clients you see a few months down the line. So when you start to slow up your prospecting during the holidays, well, that can be a problem later down the line. Here’s what to do instead.
Today’s question comes from Kate H., who asks, “Does it make sense for me to slow down my prospecting during the holidays? I don’t want to annoy anyone with my marketing efforts.”
Here’s the thing about business owners: They are always thinking about their businesses. Always. And they may actually be thinking about marketing even more so during the holiday season because they have numbers they want to hit before year end.
It’s very tempting to slow down your prospecting during the holidays. Nobody wants to work in December! But remember that the work you put into prospecting now shows up as clients and copywriting work in a few months. So if you slow down your prospecting in December, you slow down your copywriting work (and paychecks) in February, March, and maybe even April.
Instead of slowing down (or stopping!) your prospecting during the holidays, think about how you can tailor your message to the holiday season.
Your messages could address the holiday shopping season — concepts along the lines of “Are you seeing the holiday shopping surge you were hoping for? If not, here’s what I can do to help” or “ways you can turn holiday shopping into a surge of purchases” — or the post-holiday season. After the holidays, purchases tend to dip dramatically. A message letting people know that you can help prevent that could be very powerful.
You already know that your prospecting letters/emails/calls should convey the benefit of working with you and should be tailored to the business that you’re targeting. But tailoring it to the time of year or season can also help add a powerful urgency to your message.
Don’t slow down your prospecting during the holidays; approach it from a different angle to see even better results and set your business up to start off the year well!
Your turn! What tactics or messages will you use in your holiday prospecting? Let us know in the comments below.


How the Roman Empire Made Pure CSS Connect 4 Possible

Experiments are a fun excuse to learn the latest tricks, think of new ideas, and push your limits. "Pure CSS" demos have been a thing for a while, but new opportunities open up as browsers and CSS itself evolves. CSS and HTML preprocessors also helped the scene move forward. Sometimes preprocessors are used for hardcoding every possible scenario, for example, long strings of :checked and adjacent sibling selectors.
In this article, I will walk through the key ideas of a Pure CSS Connect 4 game I built. I tried to avoid hardcoding as much as I could in my experiment and worked without preprocessors to focus on keeping the resulting code short. You can see all the code and the game right here:
See the Pen Pure CSS Connect 4 by Bence Szabó (@finnhvman) on CodePen.
Essential concepts
I think there are some concepts that are considered essential in the "pure CSS" genre. Typically form elements are used for managing state and capturing user actions. I was excited when I found people use <button type="reset"> to reset or start a new game. All you have to do is wrap your elements in a <form> tag and add the button. In my opinion this is a much cleaner solution than having to refresh the page.
My first step was to create a form element then throw a bunch of inputs into it for the slots and add the reset button. Here is a very basic demonstration of <button type="reset"> in action:
See the Pen Pure HTML Form Reset by Bence Szabó (@finnhvman) on CodePen.
I wanted to have nice visual for this demo to provide a full experience. Instead of pulling in an external image for the board or the discs, I used a radial-gradient(). A nice resource I often use is Lea Verou's CSS3 Patterns Gallery. It is a collection of patterns made by gradients, and they're editable too! I used currentcolor, which came pretty handy for the disc pattern. I added a header and reused my Pure CSS Ripple Button.
At this point the layout and disc design was already final, only the game didn't work at all
Dropping discs onto the board
Next I enabled users to take their turns dropping discs onto the Connect 4 board. In Connect 4, players (one red and one yellow) drop discs into columns in alternating turns. There are 7 columns and 6 rows (42 slots). Each slot can be empty or occupied by a red or yellow disc. So, a slot can have three states (empty, red, or yellow). Discs dropped in the same column are stacked onto each other.
I started out by placing two checkboxes for each slot. When they're both unchecked the slot is considered empty, and when one of them is checked the corresponding player has its disc in it.
The possible state of having them both checked should be avoided by hiding them once either of them is checked. These checkboxes are immediate siblings, so when the first of a pair is checked you can hide both by using :checked pseudo-class and the adjacent sibling combinator (+). What if the second is checked? You can hide the second one, but how to affect the first one? Well, there is no previous sibling selector, that's just not how CSS selectors work. I had to reject this idea.
Actually, a checkbox can have three states by itself, it can be in the indeterminate state. The problem is that you can't put it into indeterminate state with HTML alone. Even if you could, the next click on the checkbox would always make it transform into checked state. Forcing the second player to double-click when they make their move is unreliable and unacceptable.
I was stuck on the MDN doc of :indeterminate and noticed that radio inputs also have indeterminate state. Radio buttons with the same name are in this state when they're all unchecked. Wow, that's an actual initial state! What's really beneficial is that checking the latter sibling also has an effect on the former one! Thus I filled the board with 42 pairs of radio inputs.
In retrospect, clever ordering and usage of labels with either checkboxes or radio buttons would have made the trick, but I didn't consider labels to be an option to keep the code simpler and shorter.
I wanted to have large areas for interaction to have nice UX, so I thought it's reasonable to let players make a move by clicking on a column. I stacked controls of the same column on each other by adding absolute and relative positioning to the appropriate elements. This way only the lowest empty slot could be selected within a column. I meticulously set the time of transition of disc fall per row and their timing function is approximating a quadratic curve to resemble realistic free fall. So far the pieces of the puzzle came well together, though the animation below clearly shows that only the red player could make their moves.
Even though all the controls are there, only red discs can be dropped on the board
The clickable areas of radio inputs are visualized with colored but semi-transparent rectangles. The yellow and red inputs are stacked over each other six times(=six rows) per column, leaving the red input of the lowest row on top of the stack. The mixture of red and yellow creates the orangish color which can be seen on the board at start. The less empty slots are available in a column, the less intense this orangish color gets since the radio inputs are not displayed once they are not :indeterminate. Due to the red input always being precisely over the yellow input in every slot, only the red player is able to make moves.
Tracking turns
I only had a faint idea and a lot of hope that I can somehow solve switching turns between the two players with the general sibling selector. The concept was to let the red player take turn when the number of checked inputs was even (0, 2, 4, etc.) and let the yellow player take turn when that number was odd. Soon I realized that the general sibling selector does not (and should not!) work the way I wanted.
Then a very obvious choice was to experiment with the nth selectors. However attracting it was to use the even and odd keywords, I ran into a dead end. The :nth-child selector "counts" the children within a parent, regardless of type, class, pseudo-class, whatever. The :nth-of-type selector "counts" children of a type within a parent, regardless of class or pseudo-class. So the problem is that they cannot count based on the :checked state.
Well CSS counters count too, so why not give them a try? A common usage of counters is to number headings (even in multiple levels) in a document. They are controlled by CSS rules, can be arbitrarily reset at any point and their increment (or decrement!) values can be any integer. The counters are displayed by the counter() function in the content property.
The easiest step was to set up a counter and count the :checked inputs in the Connect 4 grid. There are only two difficulties with this approach. The first is you cannot perform arithmetics on a counter to detect if its is even or odd. The second is that you cannot apply CSS rules to elements based on the counter value.
I managed to overcome the first issue by making the counter binary. The value of the counter is initially zero. When the red player checks their radio button the counter is incremented by one. When the yellow player checks their radio button the counter is decremented by one, and so on. Therefore the counter value will be either zero or one, even or odd.
Solving the second problem required much more creativity (read: hack). As mentioned counters can be displayed, but only in the ::before and ::after pseudo-elements. That is a no-brainer, but how can they affect other elements? At the very least the counter value can change the width of the pseudo-element. Different numbers have different widths. Character 1 is typically thinner than 0, but that is something very hard to control. If the number of characters change rather than the character itself the resulting width change is more controllable. It is not uncommon to use Roman numerals with CSS counters. One and two represented in Roman numerals are the same character once and twice and so are their widths in pixels.
My idea was to attach the radio buttons of one player (yellow) to the left, and attach the radio buttons of the other player (red) to the right of their shared parent container. Initially, the red buttons are overlaid on the yellow buttons, then the width change of the container would cause the red buttons to "go away" and reveal the yellow buttons. A similar real-world concept is the sliding window with two panes, one pane is fixed (yellow buttons), the other is slidable (red buttons) over the other. The difference is that in the game only half of the window is visible.
So far, so good, but I still wasn't satisfied with font-size (and the other font properties) indirectly controlling the width. I thought letter-spacing would fit nicely here, since it only increases the size in one dimension. Unexpectedly, even one letter has letter spacing (which is rendered after the letter), and two letters render the letter spacing twice. Predictable widths are crucial to make this reliable. Zero width characters along with single and double letter spacing would work, but it is dangerous to set the font-size to zero. Defining large letter-spacing (in pixels) and tiny (1px) font-size made it almost consistent across all browsers, yes I'm talking about sub-pixels.
I needed the container width to alternate between initial size (=w) and at least double the initial size (>=2w) to be able to fully hide and show the yellow buttons. Let's say v is the rendered width of the 'i' character (lower roman representation, varies across browsers), and c is the rendered width (constant) of the letter-spacing. I needed v + c = w to be true but it couldn't be, because c and w are integers but v is non-integer. I ended up using min-width and max-width properties to constrain the possible width values, so I also changed the possible counter values to 'i' and 'iii' to make sure the text widths underflow and overflow the constraints. In equations this looked like v + c < w, 3v + 3c > 2w, and v << c, which gives 2/3w < c < w. The conclusion is that the letter-spacing has to be somewhat smaller than the initial width.
I have been reasoning so far as if the pseudo element displaying the counter value was the parent of the radio buttons, it is not. However, I noticed that the width of the pseudo-element changes the width of its parent element, and in this case the parent is the container of the radio buttons.
If you are thinking couldn't this be solved with Arabic numerals? You are right, alternating the counter value between something like '1' and '111' would also work. Nevertheless, Roman numerals gave me the idea in the first place, and they were also a good excuse for the clickbaity title so I kept them.
The players take alternating turns starting with the red player
Applying the technique discussed makes the parent container of the radio inputs double in width when a red input is checked and makes it original width when a yellow input is checked. In the original width container the red inputs are over the yellow ones, but in the double width container, the red inputs are moved away.
Recognizing patterns
In real life, the Connect 4 board does not tell you if you have won or lost, but providing proper feedback is part of good user experience in any software. The next objective is to detect whether a player has won the game. To win the game a player has to have four of their discs in a column, row or diagonal line. This is a very simple task to solve in many programming languages, but in pure CSS world, this is a huge challenge. Breaking it down to subtasks is the way to approach this systematically.
I used a flex container as the parent of the radio buttons and discs. A yellow radio button, a red radio button and a div for the disc belong to a slot. Such a slot is repeated 42 times and arranged in columns that wrap. Consequently, the slots in a column are adjacent, which makes recognizing four in a column the easiest part using the adjacent selector:
<div class="grid">
<input type="radio" name="slot11">
<input type="radio" name="slot11">
<div class="disc"></div>
<input type="radio" name="slot12">
<input type="radio" name="slot12">
<div class="disc"></div>
<input type="radio" name="slot16">
<input type="radio" name="slot16">
<div class="disc"></div>

<input type="radio" name="slot21">
<input type="radio" name="slot21">
<div class="disc"></div>
/* Red four in a column selector */
input:checked + .disc + input + input:checked + .disc + input + input:checked + .disc + input + input:checked ~ .outcome

/* Yellow four in a column selector */
input:checked + input + .disc + input:checked + input + .disc + input:checked + input + .disc + input:checked ~ .outcome
This is a simple but ugly solution. There are 11 type and class selectors chained together per player to cover the case of four in a column. Adding a div with class of .outcome after the elements of the slots makes it possible to conditionally display the outcome message. There is also a problem with falsely detecting four in a column where the column is wrapped, but let's just put this issue aside.
A similar approach for detecting four in a row would be truly a terrible idea. There would be 56 selectors chained together per player (if I did the math right), not to mention that they would have a similar flaw of false detection. This is a situation where the :nth-child(An+B [of S]) or the column combinators will come handy in the future.
For better semantics one could add a new div for each column and arrange the slot elements in them. This modification would also eliminate the possibility of false detection mentioned above. Then detecting four in a row could go like: select a column where the first red radio input is checked, and select the adjacent sibling column where the first red radio input is checked, and so on two more times. This sounds very cumbersome and would require the "parent" selector.
Selecting the parent is not feasible, but selecting the child is. How would detecting four in a row go with available combinators and selectors? Select a column, then select its first red radio input if checked, and select the adjacent column, then select its first red radio input if checked, and so on two more times. It still sounds cumbersome, yet possible. The trick is not only in the CSS but also in the HTML, the next column has to be the sibling of the radio buttons in the previous column creating a nested structure.
<div class="grid column">
<input type="radio" name="slot11">
<input type="radio" name="slot11">
<div class="disc"></div>
<input type="radio" name="slot16">
<input type="radio" name="slot16">
<div class="disc"></div>

<div class="column">
<input type="radio" name="slot21">
<input type="radio" name="slot21">
<div class="disc"></div>
<input type="radio" name="slot26">
<input type="radio" name="slot26">
<div class="disc"></div>

<div class="column">
/* Red four in a row selectors */
input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column > input:nth-of-type(2):checked ~ .column::after,
input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(4):checked ~ .column::after,
input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column > input:nth-of-type(12):checked ~ .column::after
Well the semantics are messed up and these selectors are only for the red player (another round goes for the yellow player), on the other hand it does work. A little benefit is that there will be no falsely detected columns or rows. The display mechanism of the outcome also had to be modified, using the ::after pseudo element of any matching column is a consistent solution when proper styling is applied. As a result of this, a fake eighth column has to be added after the last slot.
As seen in the code snippet above, specific positions within a column are matched to detect four in a row. The very same technique can be used for detecting four in a diagonal by adjusting these positions. Note that the diagonals can are in two directions.
input:nth-of-type(2):checked ~ .column > input:nth-of-type(4):checked ~ .column > input:nth-of-type(6):checked ~ .column > input:nth-of-type(8):checked ~ .column::after,
input:nth-of-type(4):checked ~ .column > input:nth-of-type(6):checked ~ .column > input:nth-of-type(8):checked ~ .column > input:nth-of-type(10):checked ~ .column::after,
input:nth-of-type(12):checked ~ .column > input:nth-of-type(10):checked ~ .column > input:nth-of-type(8):checked ~ .column > input:nth-of-type(6):checked ~ .column::after
The number of selectors have increased vastly in the final run, and this is definitely a place where CSS preprocessors could reduce the length of the declaration. Still, I think the demo is moderately short. It should be somewhere around the middle on the scale from hardcoding a selector for every possible winning pattern to using 4 magical selectors (column, row, two diagonals).
A message is shown when a player wins
Closing loopholes
Any software has edge cases and they need to be handled. The possible outcomes of a Connect 4 game are not only the red, or yellow player winning, but neither player winning filling the board known as draw. Technically this case doesn't break the game or produce any errors, what's missing is the feedback to the players.
The goal is to detect when there are 42 :checked radio buttons on the board. This also means that none of them are in the :indeterminate state. That is requiring a selection to be made for each radio group. Radio buttons are invalid, when they are :indeterminate, otherwise they are valid. So I added the required attribute for each input, then used the :valid pseudo-class on the form to detect draw.
The draw outcome message is shown when the board is filled
Covering the draw outcome introduced a bug. In the very rare case of the yellow player winning on last turn, both the win and draw messages are displayed. This is because the detection and display method of these outcomes are orthogonal. I worked around the issue by making sure that the win message has a white background and is over the draw message. I also had to delay the fade in transition of the draw message, so it would not get blended with the win message transition.
The yellow wins message is over the draw outcome preventing it to be displayed
While a lot of radio buttons are hid behind each other by absolute positioning, all of those in indeterminate state can still be accessed by tabbing through the controls. This enables players to drop theirs discs into arbitrary slots. A way to handle this is to simply forbid keyboard interactions by the tabindex attribute: setting it to -1 means that it should not be reachable via sequential keyboard navigation. I had to augment every radio input with this attribute to eliminate this loophole.
<input type="radio" name="slot11" tabindex="-1" required>
<input type="radio" name="slot11" tabindex="-1" required>
<div class="disc"></div>
The most substantial drawback is that the board isn't responsive and it might malfunction on small viewports due to the unreliable solution of tracking turns. I didn't dare to take the risk of refactoring to a responsive solution, due to the nature of the implementation it feels much safer with hardcoded dimensions.
Another issue is the sticky hover on touch devices. Adding some interaction media queries to the right places is the easiest way to cure this, though it would eliminate the free fall animation.
One might think that the :indeterminate pseudo-class is already widely supported, and it is. The problem is that it is only partially supported in some browsers. Observe Note 1 in the compatibility table: MS IE and Edge do not support it on radio buttons. If you view the demo in those browsers your cursor will turn into the not-allowed cursor on the board, this is an unintentional but somewhat graceful degradation.
Not all browsers support :indeterminate on radio buttons
Thanks for making it to the last section! Let's see some numbers:

140 HTML elements
350 (reasonable) lines of CSS
0 JavaScript
0 external resources

Overall, I'm satisfied with the result and the feedback was great. I sure learned a lot making this demo and I hope I could share a lot writing this article!

How the Roman Empire Made Pure CSS Connect 4 Possible is a post from CSS-Tricks
Source: CssTricks

Will Artificial Intelligence Replace Marketing Jobs?

Oh the promise of sophisticated analytics and artificial intelligence to automatically send current and potential customers the exact right email at the exact right time to get them to buy more things.I just perused a food delivery service this week and started the signup process before abandoning. The robots dutifully sent me follow-ups with coupons and welcome messages to convince me to become a customer.It’s no doubt effective when it’s done right. But I think it blinds most people trying to market their business to something even more important.Do you drink coffee? I bet you do. Afterall, 83% of the adult population does.It’s no wonder we do. Apart from being addictive it’s also convenient and it’s customized. Coffee historians call these the waves of coffee.Before 1850 people were grinding and roasting coffee themselves. The first wave was Folgers in a can; the second wave was Starbucks. You could now get coffee anyway you wanted and it was in itself a destination.So what’s the third wave of coffee? You go to a third wave coffee house like Stumptown or Intelligentsia, and there’s a good chance you can meet a coffee farmer walking around sampling their latest harvest. You can sign up for classes with your favorite barista. Come in once a week, and they’ll name your favorite drink after you.The third wave is all about making a deep and personal connection with your customers.The funny thing about these three waves is that once you understand them, you see them everywhere. Beer. Baking. Even carpentry. Watch any reality shows about a family building houses?One example that caught my eye recently was a young girl who had an early talent for music. Her family wanted to give her every chance to further her career, so they moved from Philadelphia to Nashville in 2003. Things didn’t take off immediately. But after a couple years, someone discovered our musician singing in a cafe and soon signed her up for her first record deal.She took off. She can sell out crowds instantly now.But the thing I’m most impressed about is her understanding of how music has evolved. Just like coffee. Music used to be hard to listen to. You’d have to expensively and inconveniently attend an event somewhere.Until the phonograph was invented. That was music’s first wave. Music became convenient. You could buy something and listen to it in your home.Radio was the second wave. Now you could have music everywhere and pick and choose the stations you wanted. Complete customization.But where’s the third wave?If you go to our young musicians YouTube channel, you can find a video of her celebrating Christmas. But it’s not with her family, it’s with her fans. She painstakingly wraps present after present. Her apartment is a complete mess of boxes, wrapping paper, and bubble wrap. And then she proceeds to not only ship these packages to her fans, but she delivers them herself, surprising people who thought they were waiting for some random UPS driver.Her fans are ecstatic. Everyone’s screaming and crying. You don’t have to be one of these young fans to have the heartwarming feelings roll over you too.This young musician epitomizes the third wave of music. We’ve evolved from convenience and customization to now wanting personal connections with the artists who matter to us. It’s not just about getting a signature. We want to talk to them on social media. Watch the behind the scenes of their lives. Get them to read our Tweets or comment on our Instas.My daughter was extra special the other day coming home from school and I wanted to surprise her with a treat. There’s a bakery we go by that has macarons, her favorite. But we passed the place up. Why?Because there’s another bakery a bit further away, whose owners, a mom and her talented baker of a daughter, have become friends of ours. They tell us about their lives and struggles, and we share ours.They didn’t have to blast me with email or laser targeted artificial intelligence campaigns. They just needed to be human. And it won our loyalty and repeat business.Our young musician hasn’t lost her touch with this even a few years after that Christmas video. Even just this past week, she had 500 fans over to her home in Rhode Island for private listening parties of her newest album. And this past week as I write this, Taylor Swift released her latest, Reputation.And truth be told, I still haven’t become a customer of that food delivery service despite the robo emails. But I own all of Taylor Swift’s work.P.S. You should follow me on YouTube: where I share more about how we run our business, do product design, market ourselves, and just get through life. And if you need a zero-learning-curve system to track leads and manage follow-ups, try Highrise.(This article originally appeared on Quora)Will Artificial Intelligence Replace Marketing Jobs? was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

Cut the Noise - Five Slack Features You Need to Use

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. 
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. I've found these five features to be key in cutting through the noise and making Slack a valuable communication tool:
This one's going to earn me some 👋  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.
Not ready to commit to /leave 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.
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.
See something on Slack but know you can't tackle it right away? /remind allows you to set a reminder of your choosing, and it's a great way to quickly snooze something for future you to address.
Command + Shift + K
The Direct Messages menu is a lifesaver for me in those moments where I know I saw a message from someone while I was [insert multitasking activities here], 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.
Bonus: Notification Preferences
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.
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.

Source: VigetInspire

10 Web Design Choices That Can Kill Your Clients’ Search Ranking

As a web designer, there’s no getting away from your responsibility to make design choices with SEO in mind. Your clients want their sites to rank well in search engines – there’s not much point in having one otherwise – and this means we sometimes have to make compromises.
Compromise really is the key term, too. There’s no perfect way to design a website for search and your all your other priorities (user experience, conversions, etc.). You have to make the call on a number of design choices and come to the best overall result you can.
Here are 10 design choices to avoid for the sake of your clients’ search ranking.
Indexability killers
The first thing to think about with search optimisation indexability and there are a number of potential issues you can come across as a designer.
#1: One page, too much content

Even basic apps like IFTTT and Pocket break their content into multiple pages.
Single page designs might work for brands with a single message to get across but they’re an SEO killer in most circumstances. Keywords end up competing with each other, messages clash and search engines have a hard time deciding which kind of queries these pages should rank for.
You also have the risk of information overload and choice fatigue, which can impact engagement factors – something we’ll come back to later. The same thing goes for most home page designs now, too. You (or your client) need to decide how much information is enough/too much.
#2: JS/Ajax dynamic content
Google says it can crawl JavaScript and Ajax without problems these days, but the jury is still out amongst webmasters. The search giant is certainly a lot better at working its way through JS but it still seems to have problems. Whether this is down to Google, some sloppy JS code or both remains unclear.
Either way, placing important content that needs to be indexable in JS/Ajax code is a potential problem. You can remove this potential by not making the important stuff dynamic or take an educated risk.
#3: Providing no context for visual content
Google likes pages with visual content but it needs to know they’re relevant to the rest of the page. Search engines can’t crawl text in images, which means important text should be overlayed with the correct HTML markup (h1 tags, p tags, whatever).
The same thing goes for video content and infographics. Search engines can’t watch videos or read infographics but they can crawl transcriptions – something you and your clients might want to consider adding where appropriate.
 Speed killers

Loading times have been a ranking factor for Google since 2010, but user expectations are very different seven years later. These days, the industry sets a benchmark of two seconds or less for any page to load, despite the fact we’re expected to create richer experiences.
#4: Too many server requests
Something you have to think about as you’re working on a design is how many server requests you’re adding. Every Google Fonts you use, every video you include and every image is another server request that adds to the lists and slows down loading times.
#5: Using bulky files
Those hi-res images might look the part but they all take time to download and render in the browser. They also demand more data and stronger connections, which can become problematic for mobile users in particular.It’s not only media files that add to loading times either; the same thing goes for code files, plugins and any other resource the browser needs to download.
It’s not only media files that add to loading times either; the same thing goes for code files, plugins and any other resource the browser needs to download.
#6: JS overload
JavaScript can do some wonderful things, but it can also cripple web browsers when it’s used unwisely. There are only so many animations and dynamic features a browser can handle and sloppy JS code is one of the worst speed killers around. It’s worth keeping this in mind when you imagine lazy loading, scrolling effects and other JavaScript options.
#7: Third-party resources
Another thing worth keeping in mind is what kind of third-party resources your clients will have to use. Aside from the quantity of fonts, plugins and other add-ons, the issue of quality is also important. This can be especially true with WordPress themes and plugins, jQuery plugins, frameworks and any other integrations.
Engagement killers
Google uses a number of engagement signals to help build a picture of the user experience of pages and value of its content. Bounce rate, pages visited, time on site and social shares are just some of the signals search engines can combine to achieve this.
#8: Popups, notifications and other intrusions
Let me start by saying high bounce rates aren’t always a bad thing (eg: landing pages). But when you’re expecting people to navigate a site and work their way along the buying process, you have to be careful about the roadblocks you put in their way.
Popups are now a signal in themselves, meaning they can hurt rankings, but there are plenty of other intrusions that should be used with care.
#9: Designing without content
This is a really common one. We’ve all bought WordPress themes and then tried to fill them out with content. The problem is you’re cramming content into layouts and containers that weren’t designed for it. You’re instantly restricted by what you can say, which defeats the whole point of creating a website that encourages people to buy.
Your design should be bringing the content to life, not squeezing misshapen box. On a more technical SEO level, you’ll have trouble formatting your headings, designing CTAs and choosing breakpoints when the content isn’t already there to work with.
#10: Designing individual pages
This is another common one with themes and frameworks being the default option for so many projects. Every page on your client’s site is supposed to guide them to where the action is. Whether it’s the homepage, a blog post or landing page visitors see first, there needs to be a clear path towards the purchase (or whatever kind of conversion your client is after).
Designing individual pages means users slip away and that’s bad news for search rankings – not to mention conversion rates.
Designing with SEO in mind isn’t really all that difficult. Focus on creating the best experience you can for users and you’ll be covering most of the essentials by default. Aside from that, you have to make sure all the important content in crawlable and indexable.
There are no right or wrong answers to any of these specific design choices. It’s about coming to the best overall result you can through compromise and moderation.
The post 10 Web Design Choices That Can Kill Your Clients’ Search Ranking appeared first on Web Designer Hub.

How to Change Joomla Folder and File Permissions

[Editor's Note: This post was originally published in June 2010. It was updated for accuracy.]

Sometimes when you're trying to upload extensions to your Joomla site, you'll be faced with error messages like this: "JFolder::create: Could not create directory" or "Warning! Failed to move file."

Often this is because your Joomla site doesn't have the correct permissions to upload the extensions. What are permissions and how can you fix this problem? Read on ...

[[ This is a content summary only. Visit for full links, other content, and more! ]]

5 Tips for Starting a Front-End Refactor

For the last two weeks, I've been working on a really large refactor project at Gusto and I realize that this is the first time that a project like this has gone smoothly for me. There haven't been any kinks in the process, it took about as much time as I thought it would, and no-one appears to be mad at me. In fact, things have gone almost suspiciously well. How did this happen and what was the issue?

Well, we had a problem with how our CSS was organized. Some pages in our app loaded Bootstrap and some didn't. Others were loading only our app styles and some weren't loading the styles we served from our component library, a separate repo that includes all our forms, buttons, and variables, etc. This led to all sorts of design inconsistencies but most important of all it wasn't clear how to write CSS in our app. Do the component library styles override Bootstrap? Does Bootstrap override the app styles? It was scary stuff.
The goal was a rather complex one then. First, I needed to figure out how our styles were loaded in the app. Second, I wanted to remove Bootstrap from our node_modules and make a new Sass file with all those styles. Third, I then had to remove all our Bootstrap styles and place them into the component library where we would be able to refactor every line of Bootstrap into each individual component (so all the styles for the Tabs.jsx component was styled only by the Tabs.scss file). All of this work should reduce the amount of CSS we write by thousands of lines and generally make our codebase more readable and much more developer-friendly for the future.
However, before I started I knew that everything would have to be extraordinarily organized because this would involve a big shakeup in terms of our codebase. There will be spreadsheets! There will be a single, neat and tidy pull request! Lo, and behold! There will be beautiful, glorious documentation for everyone to read.
So here are some tips on making sure that big refactor projects go smoothly, based on my experience working on this large and complex codebase. Let's begin!
Tip #1: Gather as much data as you can
For this project, I needed to know a bunch of stuff beforehand, namely in the form of data. This data would then serve as metrics for success because if I could show that we could safely remove 90% of the CSS in the app then that's a huge win that the rest of the team can celebrate.
My favorite tool for refactoring CSS these days is Chrome's Coverage tab in DevTools and that's because it can show you just how much CSS is applied to any given page. Take a look here:

And it showed me everything I needed: the number of CSS files we generated, the overall size of those files and how much CSS we can safely delete from that page.
Tip #2: Make a list of everything you have to do
The very first refactor project I worked on at Gusto was a complete nightmare because I jumped straight into the codebase and started blowing stuff up. I'd remove a class here, an element there, and soon enough I found myself having changed thousands of lines of CSS and breaking hundreds of automated tests. Of course, all of this was entirely my fault and it caused a bunch of folks to get mad at me, and rightly so!
This was because I hadn't written down a list of everything that I wanted to do and the order I needed to do it in. Once you do this you can begin to understand just how big the scope of the project really is.
Tip #3: Keep focused
The second reason I made such a huge mistake on my first refactor project was that I wasn't focused on a very specific task. I'd just change things depending on how I felt, which isn't any way to manage a project.
But once you've made that list of tasks you can then break it down even further into each individual pull request that you'll have to make. So you might already be doing this but I would thoroughly recommend trying to keep each commit as focused and as small as you can. You'll need to be patient, a quality I certainly lack, and determined. Slow, small steps during a refactoring project is always better than a single large, unfocused pull request with dozens of unrelated commits in them.
If you happen to notice a new issue with the CSS or with the design as you're refactoring then don't rush to fix it, trust me. It'll be a distraction. Instead, focus on the task at hand. You can always return to that other thing later.
Tip #4: Tell everyone you're working on this project
This might just be something that I struggle with personally but I never realized until recently just how much of front-end integrationis a community effort. The real difficulty of the work doesn't depend on whether you know the fanciest CSS technique, but rather how willing you are to communicate with the rest of your team.
Tell everyone you're working on this project to make sure that there isn't anything you overlooked. Refactoring large codebases can lead to edge cases that can then lead to overwhelmingly painful customer-facing problems. In our case, if I messed up the CSS then potentially thousands of people wouldn't be paid that week by our app. Every little bit of information can only help you make this refactor process as efficient and as smooth as possible.
Tip #5: Document as much as you can
I really wish I could find the precise quote, but somewhere deep in Ellen Ullman's excellent book Life in Code she writes about how programming is sort of like a bad translation of a book. Outside the codebase we have ideas, thoughts, knowledge. And when we convert those ideas into code something inexplicable is lost forever, regardless of how good you are at programming.

amzn_assoc_tracking_id = "csstricks-20";
amzn_assoc_ad_mode = "manual";
amzn_assoc_ad_type = "smart";
amzn_assoc_marketplace = "amazon";
amzn_assoc_region = "US";
amzn_assoc_design = "enhanced_links";
amzn_assoc_asins = "0374534519";
amzn_assoc_placement = "adunit";
amzn_assoc_linkid = "195e7b7f883bf4a3b3340e6144828552";

One small tip that helps that translation process is writing really detailed messages in the pull request itself. Why are you doing this? How are you going about it? How do you plan to test that your refactor didn't break everything? That's precisely the sort of information that will help someone in the future learn more about your original intent and what your goals were.
Wrapping up
I learnt all this stuff the really hard, long stupid way. But if you happen to follow these tips then large front-end projects are bound to go a whole lot smoother, both for you and your team. I guarantee it.

5 Tips for Starting a Front-End Refactor is a post from CSS-Tricks
Source: CssTricks

What’s new in Basecamp 3.6 on iOS

This feature-packed release of Basecamp for iPhone and iPad is available in the App Store today. Here’s a look at what’s new.Improved attachments and sketchingIt all starts with a redesigned file picker. Tap the paperclip button anywhere in Basecamp to see clear buttons for each kind of thing you can attach. They’re all first-class — especially Sketch which got a big boost in this release. Now, before you upload an image to Basecamp you’ll have the option to draw on it first. It’s great for highlighting and making notes — or just having fun.Pick an image (left), tap ‘Sketch on image’, then add your drawings before uploading to Basecamp.In addition to sketching on images, we’ve also beefed-up the drawing tools. You can now choose the from 3 line weights and 5 colors to add variety and interest to your sketches. Also new: save your Basecamp sketches or share them to other apps.Works great with Apple Pencil on iPad Pro, too.Drag and Drop Files on iPadOne of the coolest new features on iOS 11 is drag and drop and it’s now supported in Basecamp. You can now select one (or more) images from the Photos app, for example, and simply drop them into Basecamp! Here’s how it looks:Drag one or multiple files into Basecamp.Easier invitesAwhile back, inviting people to your projects got easier with the introduction of special links you could send to people that would automatically invite them to the project — no need to enter their name and email. On iOS we took that a step further. With one tap you can now share the URL with others via Messages, Email, Airdrop — or any other apps you use on iOS. It’s the easiest way to get people into your projects yet!iOS 11 updatesFinally this release includes several fixes and improvements for iOS 11. The most notable one is for people who were unable to upload images to Basecamp because they were using iOS 11’s new space-saving HEIC format. Now when you upload an HEIC image, Basecamp will automatically convert it to a compatible format (jpg). It all happens automatically and behind-the-scenes so you won’t have to do a thing—it just works!That’s all for now. We’re cooking up more for the next release. Stay tuned!As always, please keep your suggestions, feedback, and bug reports coming our way. We’ve got some neat stuff coming in the next version so if you’re interesting in seeing it before everyone else, we have a few openings in our private beta. Send us an email and we’ll invite you.❤️ The iOS Team at Basecamp, Tara Mann, Dylan Ginsburg, Zach Waugh, and me.What’s new in Basecamp 3.6 on iOS was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

New Search and More in Basecamp 3!

It’s been a hot minute since I’ve told you about what we’ve been working on in Basecamp 3. The entire team has been plugging away at making it the best it can be. Here’s the latest features available for all Basecamp 3 accounts:SearchBefore, searching in Basecamp was a bit like making your bed with a cat around. Yes, the job will get done, but it probably could have been faster and your assistant wasn’t as helpful as it thought it was. Today, we announce the new search feature in Basecamp 3, faster and better than ever! This is a huge update to our search feature, brought to you by designer Conor and programmer Pratik.Making it work.Now you don’t have to go to a separate page to search. Click ‘Find’ in your toolbar and you’ll see our new search tool, right in place. You can filter by type of item, who posted it and the project or team it’s in. Basecamp will start displaying your results right away. You can also filter away Pings and Campfires, making it much easier to find what you’re looking for.You can see the new searching feature in action below. Sometimes support has to share whitelisting information with customers who have tighter security at their company. In this example, I just searched for whitelist and filtered by Documents and our support’s project. for To-do CompletionsApplause is a lovely feature that was previously only available for individual items like comments, messages, and documents. Basecamp designer Kris and programmers Jeffrey and Flora have now brought Applause to to-do completions. Now, when someone completes a to-do, you can let them know you appreciate their hard work by giving them applause.Kris lives for the applause.That applause will also appear in their Applause Report, every morning around 9am.Filter Messages By CategoryBy popular demand, Kris and Flora also brought us filtering messages by category. Now when you’re viewing messages in your teams or projects, you can narrow them down by category.Until next time!That’s it for now. The whole team is working on great ideas as always, and we’d love to hear what you think about the new features. You can contact us on Twitter or share your thoughts via our Support form.If you haven’t tried the latest version of Basecamp yet, sign up today for a free 30 day trial. Our team can show you the Basecamp Way or you can ask support a question to get a quick answer, 24/7.New Search and More in Basecamp 3! was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

From an internal Basecamp announcement re: pings/IMs

Direct/instant messaging is something many people are doing more and more often at work. And while it’s a handy way to quickly get ahold of someone, it’s a forceful interruption often coupled with an expectation of a quick response. That makes it costly communication. And that’s why the etiquette around it is important.Recently we noticed some internal behavior around pings (Basecamp 3’s name for direct/instant messages) that we didn’t like. David and I discussed it and we decided to post an internal announcement to everyone at Basecamp detailing the problem as we saw it. We also suggested ways to improve the efficacy of a ping, and reduce the burden of empty notifications for everyone.I figured this might help other people outside our walls, so here’s the announcement in full (and here’s a link to the announcement in Basecamp itself if you want to share or reference it elsewhere):📢 “Ping” / “You there?” / “Yo” / “Hey”Direct one-to-one (or small group) messaging is an important part of working together. It’s very useful in a variety of situations.But there’s a dark side. I’ve been seeing it crop up more and more, including in my own behavior, so I wanted to call it out and make sure we’re all aware of it (and stop doing it).Do you ever start a ping with someone by first trying to get their attention? You say “ping” or “there?” Or “hey!” Or “Yo” (or whatever). You begin with a whistle, and then you only send the rest of your thoughts once someone has whistled back. I do this all the time. It’s time to stop.Sending a ping with no information would be like sending an email with a subject “Hey” but with no body. Then only when someone emailed you back saying “What’s up?” would you follow up with a separate email containing your complete thought. That would be silly, but it’s exactly what we’re doing with pings.What’s worse, compared to emails, pings are very interruptive. Being pulled away from your work to check out something with no information in it is bad for everyone involved.So, let’s think of pings more like emails. You wouldn’t send an email asking if someone’s around to respond. You’d send the email — a complete thought — and someone would eventually get it, read it, and respond in kind. So when we send pings, don’t lead off with an empty “you there?” question. Instead, share the complete thought so when someone sees it they can respond with an answer, vs a “Yeah, why?”So instead of…Me: Ping. You: What’s up? Me: Got time to catch up today at 3:30pm? You: Sure. Me: How’s team room 2? You: Perfect, see you then.You’d send…Me: Got time to catch up today at 3:30pm to review the latest breadcrumb design? You: Yup, how’s team room 2? Me: Perfect, see you then.In the first example, I started with a whistle — just an empty “Ping”. You had no idea why I was writing, so you had to respond with another empty whistle back.In the second example, I my initiation included my complete ask. When you see it, you respond with a complete thought back.The differences are subtle, but meaningful — especially when multiplied by the hundreds of initial pings we each likely receive every year. If you’re going to reach out and talk to someone directly, give them information to act on, don’t just whistle at them and wait for them to ask what you’re whistling about.This should help introduce a bit more calm into direct messaging. It should cut back on the number of individual notifications, and also help everyone get to the point quicker so they don’t get pulled away from their work without a clear reason.If I ping you with a “ping” or “hey” or “there” — please call me out on it!— JasonDavid added a comment:Couldn’t agree more, and I want to cop to being as guilty of this as anyone.In addition to using pings with greater care, I think it’s worth considering when posting the purpose of your ping as a fully formed message or todo in a fitting project could work instead. I’ve often pinged someone about something that really just needs to be a todo request or a message to the team. I will do better.…One way I’ve been thinking about pings is this: If we were in an office, would this be important enough for me to walk over to someone’s desk, interrupt them in whatever deep thought they might be in, and ask this? The answer is frequently no.And it’s even worse with pings because you can’t see the rest of the foot traffic. Your interruption may well just be a quick question, but it may also well be the fifth someone had to field that day.None of this means you shouldn’t ask questions, or seek help, or get input. Just that you should think about the timeliness of your requests and what format is the best fit.I hope this was useful.From an internal Basecamp announcement re: pings/IMs was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

Grab The Attention of Your Site Visitors in 5 Seconds

You may have the skills of a mad (but extremely talented) web developer, but that’s meaningless if no one cares about your website. Every website owner’s goal is to pull in more followers to their pages, and that will only be possible if they can grab the attention of their target audience.
Most people generally visit a website because they need information. Chances are, website links get clicked on the search engine results page (SERP) because they appear helpful for those who are looking for specific pieces of information.
However, the critical part of website design is to know how to grab the attention and interest of casual page visitors. The web design strategies that you use will definitely play a significant role in maintaining the interest of your site visitors for them to stay and keep looking. In other words, although the quality of information on your site will matter, how you present your content matters just as much.
Grab the attention of site visitors with these tips
Ready to engage your target audience? Here are some amazing and effective tips to catch the eye of your site visitors in 5 seconds or less:
Combine text with photos and icons

Majority of the population will always go for simple explanations rather than content that is too technical and exhaustive. Unfortunately, some websites cannot avoid being too technical, especially when you’re talking about programming or business.
The challenge here is how to give websites that are heavy in text a chance to shine and get noticed.
First off, you need to be smart in choosing your textual content. The right words are in themselves effective tools for you to choose the right images or icons that can represent everything that you are talking about.
The trick here is that you show people interesting images that will make your text more interesting to read. One strategy here is the use of the right typography, so that your site visitors will not lose the interest to keep reading.
Choose a background color that is soothing to the eyes

A good background color creates a good foundation for any given website. Choose a boring color, and you will instantly drive people away from your page. Choose a shocking background color, and you will also drive them away because of the strain on their eyes.
Color theory is one of the trickiest strategies that can be applied to website design. However, once you have perfected this strategy, your overall design will definitely contribute to grab the attention of people who visit your site.
The color scheme of your page should immediately give your visitors a feeling or emotion that will later connect to what they are about to read from your pages. This spark of emotion is crucial in keeping their interest in whatever they are trying to get from your page.
Font colors should also be a concern, too. Words get emphasized not only through the size, font, or style, but also through the colors used to convey the words. Choosing colors well is a tough challenge, but pulling it off goes a long way.
Work your way through people’s emotions

Advertisements aim for photos or taglines that work through people’s emotions because these things never fail. In the same way, people stay in websites because they feel that they are connected to what they are seeing or reading.
With this idea, you have to be careful with the words, images or icons that you are going to use to grab the attention and touch the hearts of your site visitors. If your website is about products or services, it will be a smart decision to show photos of how you can become part of a person’s daily routine. You may also highlight how you stand out from the rest in terms of reliability.
Go back to basics: show sequence and patterns

While people sometimes look for something different than what they usually see in websites, a lot of them still like it when they see things in order and logically positioned. This is not to say that people have boring tastes – they only need to find things in order for them to understand the pieces of information they receive.
People need information to make decisions, and arranging your content in sequences and patterns ease site visitors to understand what your site is all about. The messages and information you wish to send should be conveyed in a logical and orderly manner, so that people can easily process them for decision-making.
For instance, if your site is about a certain type of investment, information about how their money grows should be well-presented so that you can sustain their interest enough to keep reading. Visual representations help a lot as well, such as graphs and infographics.
Use the principle of F-patterns

Website designers need to pay attention to the position of textual content. Note that people may not read everything on a webpage. In fact, some people just scan the pages by scrolling up and down.
In this case, it should be a priority to follow the F-pattern—a visualization technique that follows how the human eye reads and moves upon seeing texts and images. Once you have understood how you can apply this to the integrationof your site, then you have already done half of the job.
Focus on the speed of your website

You instantly kill the chance to grab the attention of visitors if your pages load too slowly. Website design and content is important, of course, but a very simple strategy that you can apply to website integrationis to create a site that does not lag or does not make your visitors wait.
Make sure to remember that the first few seconds are critical – if you will make your site visitors wait too long, they might shift to another similar site.
If you really want to grab the attention of online users, invest on optimizing website speed.
Final Word
The best and easiest strategy to make sure that you grab the attention of website visitors is this: Put their interests ahead of yours. Know what they want, and give it to them.
The post Grab The Attention of Your Site Visitors in 5 Seconds appeared first on Web Designer Hub.

Bury the lede

How can we keep people interested?Technology doesn’t always give us the highest quality outcome. Sometimes it just buys us more convenience.Look at coffee. It used to be a pain to prepare and drink. Then in 1850 Folgers started roasting and grinding it for us. It wasn’t as fresh, but it sure was fast.Or look at photography. Today, smartphones put everything from supercomputers to cameras into our pocket. But the pictures pale in comparison to what my 5lb DSLR can take.But we compromise. Sometimes convenience wins. Writing made a similar compromise.The telegraph was a huge improvement in communication compared to smoke signals. We could now transmit messages over long distances.But man, were those early messages expensive. A trained operator needed to type each letter by hand. And so compromises were made to shorten and change the message. For example, when the Wright Brothers completed their first flight, they couldn’t gush to their parents. Orville had to send this:Success four flights thursday morning all against twenty one mile wind started from Level with engine power alone average speed through air thirty one miles longest 57 seconds inform Press home Christmas . Orevelle Wright(Yes, his name was spelled wrong)Newspaper articles also had to change. They couldn’t be narrative. They had to get to the point immediately. Just the facts. And the inverted pyramid style of writing was invented.Get the important stuff out first. Everything else is less and less important.It’s a style that lives on today. Not because we need help anymore in transmission, but now when newspaper and magazines are laid out, it helps an editor to quickly chop off a writer’s article from 500 words to 400 words, and worry little about changing the quality of the writing. Just cut from the bottom.And we wonder why people aren’t interested in our writing? Look at the rules we’re following. Most of us learned in high school or college to “write well” with the inverted pyramid. Get the necessary stuff out first. The 5 W’s (Who, what, when, where, and why). Don’t bury the lede.But we weren’t taught enough how those styles are tools, and even compromises, for specific situations. So, that’s how most of us write everything.Even an attempt at some form of narrative gives into the idea it still needs a “TL;DR” (Too Long; Didn’t Read).Yet think about what you read and watch that keeps you interested. How do you think Game of Thrones turns out as an inverted pyramid of a story? You’ll get punched in the eye if you TL;DR that for a fan who's behind.But we keep doing it to ourselves. Sometimes even others do it for us:Very much appreciate the share, but you blew one of the best parts — the surprise.Skip the TL;DR.If you have people requesting that from you, let them move on and find more headlines to read. It is your job though to keep them interested throughout your writing. If you still feel like whatever you’re writing would benefit from a TL;DR, consider throwing your post away and just Tweeting something.If you’re going to write 500+ words, give them the importance they deserve. Keep people interested by flipping the inverted pyramid back, and making your writing more and more interesting as it goes along, not less. Give your readers a journey. Make them something to be inspired about at the end of a piece. A TL;DR rarely moves anyone.Of course, there are situations that require conciseness. Just the facts. Anticipation that people will just read the headlines. But don’t cargo cult the styles of newspaper and magazine writers for all the writing you do. Better yet, don’t worry about rules from high school and college. Ignore style and grammar. Learn to tell a better story. Surprise people.I’ve had an above average bit of success as a writer and getting people interested in my work. My secret? I bury the lede.P.S. You should follow me on YouTube: where I share more about how we run our business, do product design, market ourselves, and just get through life.And if you need a zero-learning-curve system to track leads and manage follow-ups you should try Highrise.Bury the lede was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

New in Basecamp 3: Better navigation with breadcrumbs

Ever since Basecamp 3 launched in 2016, the inside of a project has looked like this, with little cards for jumping between the tools in the project.That worked well, but there are a couple things that weren’t so great:It took up a lot of space and visual attention, which meant less space for the work you’re doing.It didn’t include much information about where you are or what you’re looking at, which can be confusing when you arrive somewhere after clicking on a notification.Starting today, we’ve made this better! Now you’ll see simple, old school breadcrumbs. Nothing revolutionary here–just very clear.You’ll know exactly where you are inside a project, and can easily jump back a level or two. Here’s how it looks:This new navigation helps you focus on your work, and it makes pages load faster too. Now you’ll have consistent way to move around, no matter which tool you’re in — you’ll see breadcrumbs in Messages, To-dos, Docs & Files, and everywhere else inside your projects.We also kept the ability to jump between tools in a project. Just click the project’s name for a quick menu to hop where you need to go — exactly like our iOS and Android apps.You’ll see this change right now on the desktop version of Basecamp 3.We hope you like it. Happy navigating!I’m a design intern at Basecamp, and this was my first project during the summer. Say hi to me on twitter 🙋New in Basecamp 3: Better navigation with breadcrumbs was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.

Source: 37signals

UX Design Practices That Kill the User Experience

UX design, as the name suggests, is supposed to create better experiences for the end user. There’s nothing new about this concept, but the rise of mobile forced web designers to adopt a new kind of UX mantra. It didn’t end with web design though; now, marketers, business owners and anyone with a domain name understand the principle of creating better experiences.
On the one hand, this is a good thing because it means the importance of user experience is well-known. But we’ve also ended up with this “everyone’s a UX designer” mentality, which leads to some UX design practices that actually end up harming the user experience.
I’ve been guilty of this as much as anyone over the years, learning (the hard way) that you can’t make any assumptions when it comes to users’ best interests.
The trap of UX design best practices
These things are everywhere. From mobile navigation to CTA design, there are best practices for just about design choice you could ever come across. And these are great for learning the ropes of web design, don’t get me wrong. They can also be useful for designing generic templates that need to appease the masses – but that’s about their limit.

Theme shops like ThemeForest are a hotbed of UX “best practices,” if that’s what you need.
The thing with best practices is they can only tell you what quite often worked in the past for a bunch of users you’re not designing for. They don’t give you any insights into what kind of experience the people you’re designing for need or expect.
I think it’s safe to say most designers are well aware of this, though.
A more subtle impact of UX best practices is our tendency – however great or small – to fall back on them when it comes to making a decision. We can’t deny that the level of variation in web design rapidly decreased as more UX best practices became accepted. Now, you could quite easily work your way through a design – without really needing to make a design choice – because best practices tell us where the navigation should go, how many columns to use and how the layout should adapt to screen sizes.
The counterargument, of course, is that websites look more similar these days because that’s what people want. While consistent experiences across different sites makes it easier for people to move from one to another and instantly understand what’s in front of them.
RIP innovation.
Chasing the latest design trends
Everybody loves banging on about web design trends. Type that horrible phrase into Google and you’ll be inundated with articles trying to tell you that serif typefaces, asymmetry and background patterns are trends for 2017 (I took all of those from the same article).

Despite the endless stream of ridiculous trend articles, there are genuine trends that take hold every year. Some real examples for 2017 could include, live chat widgets, multi-step web forms and voice search integrations. You could argue chatbots are a trend for this year but they’ve kind of stuttered since the start of 2017.
The point is, real design trends are new or revisited concepts and – like all trends – they tend to come and go. They also come with a number of UX implications that rarely get explored because trends are popular and everyone’s doing it.
Much like parallax scrolling, pointless hamburger navigations and popups in the past, brands jump on the latest trends without thinking about the impact on user experience. Search for “live chat” in Google and you’ll see plenty of marketers telling you how live chat (potentially) increases conversions.
What they don’t talk about is how it interrupts the user experience, distracts attention away from page content and weakens the impact of on-page marketing messages. This doesn’t mean live chat doesn’t have some positive things to offer – particularly in terms of customer service. But slapping live chat widgets all over homepages is a popular trend that tramples over the basic UX principles. This s something a lot of design trends share in common.
A/B testing minute details
The rise of UX design promptly gave birth to the phenomenon of conversion rate optimization (CRO) and its favorite grandchild, A/B testing. In theory, this was great. Now marketers, website owners and everyone in between was taking UX design seriously. Anyone can set up A/B tests, meaning we can test every single detail on our websites and become conversion champions!

Probably the worst piece of advice you can give anyone about CRO (unless you’re selling CRO software or services, of course).
The problem is, this approach to CRO actually takes our attention away from the UX design principles that matter most. The idea that changing the color of one CTA button can increase conversions by 300% has been sold to everyone – namely by the companies selling CRO software. What doesn’t get mentioned is that most A/B tests are highly flawed to begin with and any 300% conversion hike from a color change is clearly a major false positive.
More to the point, I would challenge anyone to find a single web page where there aren’t more important UX concerns than button colors.
Besides this, running countless tests on every detail on a website simply isn’t manageable. Especially once you realize each individual test is irrelevant to each other, due to constantly changing variables that make subsequent tests statistically insignificant.
Don’t get me wrong, A/B testing different versions of landing pages or web forms can be great – at least, if you know how to create reliable tests. But the notion of testing every detail on a website is good for user experience (not to mention time and budget) is only good for the firms selling CRO software.
Following the crowd with UX design
You don’t have to be a UX designer to create good online experiences. I’m no UX designer but I like to think I have a pretty good idea about what works, what doesn’t and how to go about proving it. This includes knowing when best practices should be applied and when you might need to explore other options.
This is where UX designers come into thier own, though. There’s a big difference between designing a site with the user experience in mind (which we should all be doing) and optimizing a site for better performance. There’s no room for assumption when it comes to UX design and following the crowd is a nasty habit many of us fall into – a habit that ends up killing the user experience rather than enhancing it.
The post UX Design Practices That Kill the User Experience appeared first on Web Designer Hub.

Form Validation with Web Audio

I've been thinking about sound on websites for a while now.
When we talk about using sound on websites, most of us grimace and think of the old days, when blaring background music played when the website loaded.
Today this isn't and needn't be a thing. We can get clever with sound. We have the Web Audio API now and it gives us a great deal of control over how we design sound to be used within our web applications.
In this article, we'll experiment with just one simple example: a form.

What if when you were filling out a form it gave you auditory feedback as well as visual feedback. I can see your grimacing faces! But give me a moment.
We already have a lot of auditory feedback within the digital products we use. The keyboard on a phone produces a tapping sound. Even if you have "message received" sounds turned off, you're more than likely able to hear your phone vibrate. My MacBook makes a sound when I restart it and so do games consoles. Auditory feedback is everywhere and pretty well integrated, to the point that we don't really think about it. When was the last time you grimaced at the microwave when it pinged? I bet you're glad you didn't have to watch it to know when it was done.
As I'm writing this article my computer just pinged. One of my open tabs sent me a useful notification. My point being sound can be helpful. We may not all need to know with our ears whether we've filled a form incorrectly, there may be plenty of people out there that do find it beneficial.
So I'm going to try it!
Why now? We have the capabilities at our finger tips now. I already mentioned the Web Audio API, we can use this to create/load and play sounds. Add this to HTML form validating capabilities and we should be all set to go.
Let's start with a small form.
Here's a simple sign up form.
See the Pen Simple Form by Chris Coyier (@chriscoyier) on CodePen.
We can wire up a form like this with really robust validation.
With everything we learned from Chris Ferdinandi's guide to form validation, here's a version of that form with validation:
See the Pen Simple Form with Validation by Chris Coyier (@chriscoyier) on CodePen.
Getting The Sounds Ready
We don't want awful obtrusive sounds, but we do want those sounds to represent success and failure. One simple way to do this would be to have a higher, brighter sounds which go up for success and lower, more distorted sounds that go down for failure. This still gives us very broad options to choose from but is a general sound design pattern.
With the Web Audio API, we can create sounds right in the browser. Here are examples of little functions that play positive and negative sounds:
See the Pen Created Sounds by Chris Coyier (@chriscoyier) on CodePen.
Those are examples of creating sound with the oscillator, which is kinda cool because it doesn't require any web requests. You're literally coding the sounds. It's a bit like the SVG of the sound world. It can be fun, but it can be a lot of work and a lot of code.
While I was playing around with this idea, FaceBook released their SoundKit, which is:
To help designers explore how sound can impact their designs, Facebook Design created a collection of interaction sounds for prototypes.

Here's an example of selecting a few sounds from that and playing them:
See the Pen Playing Sound Files by Chris Coyier (@chriscoyier) on CodePen.
Another way would be to fetch the sound file and use the audioBufferSourceNode. As we're using small files there isn't much overhead here, but, the demo above does fetch the file over the network everytime it is played. If we put the sound in a buffer, we wouldn't have to do that.
Figuring Out When to Play the Sounds
This experiment of adding sounds to a form brings up a lot of questions around the UX of using sound within an interface.
So far, we have two sounds, a positive/success sound and a negative/fail sound. It makes sense that we'd play these sounds to alert the user of these scenarios. But when exactly?
Here's some food for thought:

Do we play sound for everyone, or is it an opt-in scenario? opt-out? Are there APIs or media queries we can use to inform the default?
Do we play success and fail sounds upon form submission or is it at the individual input level? Or maybe even groups/fieldsets/pages?
If we're playing sounds for each input, when do we do that? On blur?
Do we play sounds on every blur? Is there different logic for success and fail sounds, like only one fail sound until it's fixed?

There aren't any extremely established best practices for this stuff. The best we can do is make tasteful choices and do user research. Which is to say, the examples in this post are ideas, not gospel.
Here's one!
View Demo
And here's a video, with sound, of it working:

Greg Genovese has an article all about form validation and screen readers. "Readers" being relevant here, as that's all about audio! There is a lot to be done with aria roles and moving focus and such so that errors are clear and it's clear how to fix them.
The Web Audio API could play a role here as well, or more likely, the Web Speech API. Audio feedback for form validation need not be limited to screen reader software. It certainly would be interesting to experiment with reading out actual error messages, perhaps in conjunction with other sounds like we've experimented with here.
All of this is what I call Sound Design in Web Design. It's not merely just playing music and sounds, it's giving the sound scape thought and undertaking some planning and designing like you would with any other aspect of what you design and build.
There is loads more to be said on this topic and absolutely more ways in which you can use sound in your designs. Let's talk about it!

Form Validation with Web Audio is a post from CSS-Tricks
Source: CssTricks