Gifts for Creatives During the Holiday Season and Beyond


Inspired Magazine
Inspired Magazine - creativity & inspiration daily
Do you have a creative in your life? We’re talking about the artsy types who would rather spend time curled up reading a book in front of the fire. Those friends and family who put deep thought into the gifts they give and would rather not another plain shirt from the department store.
The good news is that creatives are often not that picky, since they can always get inventive with the gifts they receive. However, there’s something great about finding that quirky or useful gift for their profession or everyday life, whether it be a shape-shifting chair that adds some character to their home or a set of musical wine glasses where the notes are set by the amount of liquid.
Overall, gifts for creatives need to be both exciting and useful. You’re not trying to buy a gimmick or gag gift that’s going to be used once then thrown in the trash or re-gifted.
Nope.
We want to outline some gifts for creatives that standout, make people laugh, and allow you and your friends and family to have a wonderful holiday season.
If You’d Like to Search for Your Own Gifts for Creative People
We’ll outline some awesome and unique gifts below, but if you’re more interested in completing the gift search yourself, or you like the products below, but want more options, consider using the new Sunny expert gift guide from Uncommongoods.
The Uncommongoods website serves as one of the best places online to find presents for your creative loved ones, but Sunny makes the process much easier. For instance, all you have to do is tell Sunny who you’re buying for and what interests that person has. After that, it delivers a wide range of creative items for you to pick from and filter based on price.
The Best Gifts for Creatives
1. A Shape-shifting Ollie Chair

A Shape-shifting Ollie Chair is perfect for people who may have limited space but don’t want to sacrifice on style when it comes to furniture. Not only does it cater to creatives with the design, but it allows them to get creative when furnishing their apartments or smaller homes.
The great part is that the chair can be used outdoors or indoors, and it’s as comfortable as it is attention-grabbing.
2. Major Scale Musical Wine Glasses

Have you ever tried to put on a little symphony with a few wine glasses? It’s one of the most fun party tricks in the book, where you dab a bit of liquid on your finger and run it along the edge of the glass. However, the average person wouldn’t know how much liquid to have in each glass to hit a certain note.
With these musical glasses the notes are marked on the sides, so you can wow your music-oriented friends and give them something to entertain themselves with, even when they’re not playing an instrument.
3. Novel Teas

Writers and readers alike are known to drink tea and coffee. Writers use tea to help relax and spend countless hours penning books. On the other hand, a reader drinks tea to calms the nerves and pairs that with a good book on a cold afternoon.
This Sri Lanken tea set comes packed with 25 tea bags, all of which have a daily quote from one of your favorite authors. For instance, you can start your day with some words of wisdom from CS Lewis.
Of all the gifts for creatives, this is certain to be one of the most useful ones. You can think about which of your bookworm friends also enjoys tea and get this affordable gift that is sure to please them.
4. Deep Sea Sand Art

Creativity comes in many forms, but just about every person who identifies as a creative knows the value of the imagination.
Not all art is for everyone, but the deep seas sand art intrigues people of all ages, as it creates a mystical vision that sits on your coffee table, desk, kitchen counter, or anywhere in the house. The glittery sands shift down with gravity, displaying beautiful art that looks like aspects of nature.
You might see a few clouds one day and a set of mountains the next. Oceans, smoke, and deserts may all appear, making it a great gift for inspiration and allure.
5. Reclaimed Wood Bike Silhouette Art

Some of the most successful creatives in the world now the value of exploring the outdoors. Biking is a great way to keep the mind and body fresh, while also engaging you with the nature and people around you.
Although this isn’t exactly a real bicycle, it’s a beautiful handmade work of art, using reclaimed wood and materials sourced straight from Canada.
6. Dog Egg Mold

Creative folks often have dogs or other pets, since it’s sometimes easier to relate to animals than people.
So, if your friend or family member loves dogs, consider getting them this dog egg mold. It’s like a simple work of art every morning, and it might just remind them of their best canine friend.
7. Music Note Measuring Spoon Set

Here’s another gem for the music lover in your life. Hopefully, they like to cook, too! If not, the music note measuring spoon hangs nicely as a decoration for the kitchen.
8. Make Your Own Hot Sauce Kit

Cooking is an art in itself, and since hot sauces have become so popular as of late, why not give your creative friend an experience in their kitchen?
The “make your own hot sauce” kit comes with six bottles and hot sauce packets. You can even customize the labels!
9. Tabletop Cornhole

If your creative loved one enjoys a good party game, the tabletop cornhole gift pairs well with beer, wine, or a night with friends eating food. You get to launch miniature corn hole bags, yet there’s no need to store a large gaming set in your garage.
10. 100 Books Scratch Off Poster

Finally, what better way to wow your reading friends than by giving them a bucket list for books to read? They can scratch off the books and try to complete as many of them as they can.
If you have any questions about Sunny from Uncommongoods, or if you’re curious about any of these gifts for creatives, feel free to click through the links above or drop a line in the comments below!
header image courtesy of Jacob Rhoades
This post Gifts for Creatives During the Holiday Season and Beyond was written by Inspired Mag Team and first appearedon Inspired Magazine.
Source: inspiredm.com


How to Implement Accessibility in Agency Projects: Part 2

In part 1 of my series, How to Implement Accessibility in Agency Projects, I discussed some of the high-level challenges faced when implementing accessibility in client service companies and how we’re approaching them at Viget.

Talking about accessibility is relatively easy, but when project constraints like timelines and budgets are involved, putting it into practice can be challenging. We've been working on this at Viget and in part 2 of this series, I’ll share some concepts and tips that we're using to make accessibility part of every project.

Thinking About Accessibility

Making accessibility part of your team’s work can be challenging and requires a deliberate effort. At Viget, we've found that building empathy, company-wide education, and re-framing how we think to be valuable strategies.

Cultivate Empathy

If you’re reading this, you likely work at a computer… a lot. You also may have customized your setup to enhance the way you like to work. In short: you’re a “power user”. That’s great for productivity but bad for empathy. The more ingrained we are in our setup the harder it is to understand how other people use and experience their computer and the web. We can easily forget that we are not like our users. It's challenging enough to keep in mind that most people are less savvy, use less-than-cutting-edge hardware, or don’t have a high-speed internet connection. If you don’t have direct experience with disabilities (either yourself or someone in your life), it takes deliberate effort gain empathy for people who interact with the web in ways that are different from you.

You may be able-bodied now, but things happen as we journey through life that can cause us to become temporarily or permanently disabled. Has anything ever prevented you from using your computer in your normal way? Perhaps a broken thumb affected your ability to use the mouse, LASIK surgery made it difficult to focus on your screen for a week or two, or maybe your trackpad just gave out (all of these happened to me). Having even temporary dependence on accessible technologies, like I did with keyboard access and font zooming, can give us a new perspective and appreciation for the importance of building accessible products.

“By designing for someone with a permanent disability, someone with a situational disability can also benefit.” pic.twitter.com/H38S2Dw0LL— David Storey (@dstorey) October 1, 2015

Try these tips for gaining better insight into how people with various disabilities use the Web:

Take the #NoMouse challenge and spend some time navigating by keyboard.
Learn the basics of how to use a screen reader and try listening to how pages are read.
Install Chrome extensions like NoCoffee or Funkify to experience browsing with various disabilities.
Check out many of the other simulations from WebAIM.
Hold an empathy-building workshop for your team or company where you challenge the group to perform a specific task, like selecting a round-trip flight, using only the keyboard or with one of the Funkify personas enabled.

Educate Across the Company

Lone accessibility advocates, however passionate, aren't going to make much of a lasting impact on accessibility awareness company-wide — they can’t be everywhere all the time, and if they leave the company their influence goes with them. At Viget, we found that the most successful strategy for creating a lasting company value was to harness those with a passion for accessibility to speak, write, and lead training sessions. By framing accessibility knowledge as a higher level of expertise and empowering everyone to own their role’s portion of accessibility, we quickly saw a higher level of buy-in and enthusiasm.

To that end, we built the Interactive WCAG: a tool for filtering and sharing the daunting Web Content Accessibility Guideline (WCAG) spec in a digestible format. The spec can be filtered to only view a certain level (A, AA or AAA) and a role's responsibility (copywriting, visual design, user experience design, development, or front-end development). It also creates a shareable URL so that it can be easily sent to a colleague or client.

Try these ideas for getting a discussion going in your office:

Lead by example — begin with your own work and show what good accessibility looks like.
Do a lunch-and-learn presentation or offer to speak at a team or company all-hands meeting.
Depending on how your company is structured, approach other discipline or project teams and ask if an accessibility presentation can get on an upcoming meeting agenda. Make sure the presentation is tailored to the concerns of that group.
Write about accessibility on your company's blog.
Hold an empathy-building session or build an empathy lab where coworkers can get a better understanding of some people's barriers to using the web.
Attend a local accessibility Meetup and offer to host a meeting at your office.
Invite an outside accessibility expert to speak at a company or team meeting (in person or remote).

Think of Accessibility as a Core Part of Usability

The introduction of the iPhone and the explosion of internet-connected portable devices that followed was a sea-change moment for web developers. At the time, we were too busy re-learning how to build for the web to realize how beneficial these devices would be for people with disabilities. Our need to start accounting for new patterns of input and output beyond the desktop computer and mouse wound up being a boon to accessibility on the web. We're now accustomed to thinking about patterns that coincide with a variety of disabilities:

Better readability and responsive designs for small screens also benefit those with low vision who might prefer to zoom their browser to see content better.
Making targets, like buttons, large enough for a finger on a touchscreen also makes it easier for users with fine motor control disabilities that can still use a mouse to target and click.
Considering content in smaller chunks and writing tight for small screens is great for helping those with cognitive or memory disabilities, like ADD/ADHD, focus on the page's task.
The popularity of touch devices largely killed hovers as a primary way of revealing and interacting with content. This was good for keyboard users because it meant that we stopped relying on the mouse hover and started designing and coding for the click as the primary way to interact with things.

Tips for Making Accessibility Part of Your Day-To-Day Work

Here are some curated tips from the Viget team on how we're implementing accessibility in our daily work:

Design

“Check your palette at every step of the way so that you don't have to adjust for contrast later on. Keep the contrast checker open in a tab for easy access.”

- Mindy Wagner, Art Director

Content

“Keyboard testing is a quick and important way to QA a site. When going through pages using your keyboard, remember to use shift+tab to make sure keyboard users can move both down and up a page in a logical way. You can find some sneaky things that way, especially when elements appear/disappear when scrolling.”

“Always dig into contrast errors when using WAVE or a similar tool. Don’t consider it an error just because it is flagged as one - look at the details and see what level and font size it's failing.”

- Becky Tornes, Senior Project Manager

User Experience

Question :hover with extreme prejudice.
Edit labels and microcopy for simplicity and directness.
Disable CSS to see if a UI "reads" logically when color, shape, alignment, emphasis, and other visual design elements are absent.
Balance working memory with the amount of content on a page.
Be consistent and predictable, particularly with navigation.
Poke yoke your data inputs. Error prevention > error resolution.

- Todd Moy, Former Senior User Experience Designer

Front-End Development

“Purposely become a keyboard-only user as often as possible. You can start small. Try giving yourself a user goal, like "As a user, I need to be able to search for careers" and try to complete it using only the keyboard. If you're developing on a Mac, you may need to adjust browser and OS settings before getting started.”

- Chris Manning, Senior Front-End Developer

Don't Reserve Accessibility for Just Production Code

When prototyping or test-coding a new feature, always build it to be accessible. Even if it's for a small internal audience or just yourself, considering accessibility at a nascent stage will get it baked in from the beginning and, most importantly, means you won't have to re-think a feature's structure or interaction model later. And who are we kidding... when the going gets tough these prototypes sometimes make their way into production.

Learn HTML and Use It Semantically

Using the correct markup for the task is the easiest way to get accessibility for free. This can be pretty straightforward if you're coding by hand but more challenging if you're using a framework or helper that outputs markup for you. The benefits, though, are significant:

Sectioning elements allow screen reader users to jump around the page quickly.
Good use of headings, similarly, lets screen reader users understand a page's content structure and jump to just want they want.
Using frequently built-from-scratch elements like <button>, <a> and <select> correctly instead of meaningless <div>'s provides all of the expected interactivity (keyboard focusable, clickable and correctly read by a screen reader) without the extra work of having to add it in with JavaScript.

Not using the correct element, or trying to reproduce a native control from scratch, can lead to bigger headaches down the road and a true adding-accessibility-takes-more-time result.

Support Flexibility

Building for accessibility isn't about just one disability. There's a broad range of disabilities to keep in mind and it can feel overwhelming at times. Building flexibility into your interfaces and interactions helps ensure broader access. What does that mean? To an extent, with responsive design, we're already doing it. Accounting for multiple kinds of input (mouse and touch) and output (small to large screens) makes our sites better able to accommodate a variety of situations.

Sometimes we unknowingly disable flexibility. For example, one common practice is locking a mobile browser's zoom level to ensure that the site fits the screen or to prevent some gestures from interfering with interactions. This has the unintended consequence of preventing users with vision disabilities from zooming the page to make text or images easier to see.

Ask, “does my site’s responsive mobile version disable pinch & zoom?” If it does, you’ve created an anti-user design. @cameronmoll #aeaaus— Jeffrey Zeldman (@zeldman) October 5, 2015

Prioritize Accessible Content Over Accessible Experience

We're frequently tasked with creating richly interactive sites. That's the fun part of what we do, right? In a perfect situation with plenty of time, we'd be able to make that experience accessible to everyone. I don't know about you, but I'm still waiting for that unicorn project to come along (hint: it won't). When the task of making a complex piece of functionality or experience accessible is daunting, prioritize making sure that the content is accessible. With enough time, we could make anything accessible. But when faced with deadlines and budgets, making something accessible over nothing is the better tradeoff.

An example of this concept in practice was a map page we created for a client. This page was designed with a map of clickable pushpins that brought up a little info overlay. Rather than trying to figure out how to make the SVG map accessible to keyboards and screen readers, the design already included an identical text list that we were able to rely on. The solution was to make the map inaccessible to keyboards and screen readers. The map script that we used created the pushpins as <span>'s (see using semantic HTML above) rather than <button>'s so it was already inaccessible out-of-the-box. To make it invisible to screen readers we added aria-hidden="true" to its outermost wrapper.

The result is perfectly accessible content without the added time and expense of trying to make the map accessible. This was a win for accessibility and a win for the budget! Now, of course it's possible to make the map accessible with some extra effort, but instead, those hours could be spent on other features and contributed to delivering the site on time and on budget.

Conclusion

Creating more accessible products and experiences is an essential and rewarding endeavor but carries unique challenges for those of us working in client service companies. Rather than give up or wait for clients to ask, we’ve found that the practices I outlined in this article lead to a lasting culture at Viget that values thinking about accessibility throughout a project and throughout the company. Here are just a few examples from our experience working on some fun, beautiful and disability-specific projects. Do you have any tips to share? Comments? Criticism? We'd love to hear about it below!


Source: VigetInspire


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>
...
</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">
...
</div>
</div>
</div>
/* 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>
...
Limitations
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
Conclusion
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


Google Updates Search Results With New Labels for PDFs and PPTs by @MattGSouthern

Google has implemented a subtle, new change to search results across mobile and desktop.The post Google Updates Search Results With New Labels for PDFs and PPTs by @MattGSouthern appeared first on Search Engine Journal.
Source: https://www.searchenginejournal.com/feed/


The CSS attr() function got nothin’ on custom properties

Normally, the connection between CSS and HTML is that CSS selectors match HTML elements, and the CSS styles them. CSS doesn't know about the actual content in the HTML. But there is a way CSS can get its hands on data in HTML, so long as that data is within an attribute on that HTML element.

It's like this:

div::after {
content: attr(data-whatever);
}
That's certainly interesting. You could use it for (rather inaccessible) tooltips, for example:
<button data-tooltip="Information only mouse-having sighted people will see.">
Button
</button>
button:hover::after {
content: attr(data-tooltip);
/* positioned and styled and whatnot */
/* ya, a :focus style would buy you a tad more a11y */
}
But you can't put HTML in the attribute value, so those tooltips are limited to a string value, and couldn't have a title, link, or anything like that inside them.
Here's a better use case. There is an old print stylesheet chestnut where you use attr() to add the URL's to links, so you can actually see what a link is linking to:
@media (print) {
a[href]::after {
content: " (" attr(href) " )";
}
}
That's clever. But what else? Could you pass a color down?
<h2 data-color="#f06d06">
Custom Colored Header
</h2>
That's not invalid, but it isn't useful.
h2 {
/* Not gonna work */
color: attr(data-color);
}
The value from attr() is a string. Even though that string is in the same formax as a hex code, it won't be used as a hex code.
Nor can you pass a URL that can actually be used in something like background-image(). Nor you can pass a unit like 3, 20px or 4rem or 0.8vw.
CSS's attr() function is only strings, and strings are only really useful as content, and content (being unselectable and somewhat inaccessible) isn't particularly useful anyway. You can't select the text of psuedo content, for example, nor search for it, making it rather inacessible.
You know what can pass any sort of value and is equally easy to implement as attributes?
CSS custom properties!
You can pop them right into the style attribute of any element. Now those values are available to that element:
<button
style="
--tooltip-string: 'Ug. Tooltips.';
--tooltip-color: #f06d06;
--tooltip-font-size: 11px;
--tooltip-top: -10px
"
>
Button
</button>
We're passing a string to CSS above, but also a color and length values. Those values are immediately usable as-is:
button::after {
content: var(--tooltip-string);
color: var(--tooltip-color);
font-size: var(--tooltip-font-size);
}
Here's that demo with some fiddly "logic" (would need to be improved a lot to be actdually useful) to allow variations:
See the Pen CSS Custom Properies Mo' Betta' than attr() by Chris Coyier (@chriscoyier) on CodePen.
What about some other "good" use cases for attr()?
One that comes up a lot is responsive data tables. Imagine a table with headers along a top row and rows of data below:
<table>
<thead>
<tr>
<th>First Name</th>
<th>Last Name</th>
....
</tr>
</thead>
<tbody>
<tr>
<td>Chris</td>
<td>Coyier</td>
...
</tr>
...
</tbody>
</table>
Rows of data like that might become problematic on small screens (too wide). So in a reponsive data table, we might hide that top row, and show labels on a per-cell basis instead.
@media (max-width: 500px) {
thead {
display: none;
}
/* Need to reveal another label now that we've hidden the normal labels */
}
Where does that label come from? We could do...
. ...
<tr>
<td data-label="First Name">Chris</td>
<td data-label="Last Name">Coyier</td>
...
</tr>
Then:
td::before {
content: attr(data-label);
/* Also display: block things and such */
}
That's a pretty good use case. If we use some kinda of accessible hiding method for that <thead>, it might even pass a11y muster.
But this same exact thing is doable with CSS custom properties...
. ...
<tr>
<td style="--label: 'First Name';">Chris</td>
<td style="--label: 'Last Name';">Chris</td>
...
</tr>
td::before {
content: var(--label);
...
}

Eric Bidelman pointed me to a method of using psueudo content to show an input's value.
<style>
input {
vertical-align: middle;
margin: 2em;
font-size: 14px;
height: 20px;
}
input::after {
content: attr(data-value) '/' attr(max);
position: relative;
left: 135px;
top: -20px;
}
</style>

<input type="range" min="0" max="100" value="25">

<script>
var input = document.querySelector('input');

input.dataset.value = input.value; // Set an initial value.

input.addEventListener('change', function(e) {
this.dataset.value = this.value;
});
</script>
That feels a smidge dangerous to me since I didn't think pseudo content was supposed to work on replaced elements like an <input>. It's probably a job for output, and the JavaScript would be essentially the same. You could use pseudo content with the additional element, but there's really no need for that.

Exploiting the fact that psuedo content can't be copied is also clever. For example, GitHub does code block line numbering with data-line-number="" and ::before { content: attr(data-line-number); }.

Nobody likes selecting line numbers when they are trying to copy code! Good use here (probably even more flexible than CSS counters), but again, something that CSS custom properties could handle as well.
<td style="--line-num: 5"> ... </td>
You could argue this is better because if you did want to use CSS counters, you could use that first value to kick things off and not need it on every line.
See the Pen Line Numbering by Chris Coyier (@chriscoyier) on CodePen.
Same deal with typographic trickery involving duplicating text in CSS for stylistic reasons. Check out this cool demo by Mandy Michael using attr(). I'm sure you can imagine how --heading: "Fracture"; could do the trick there.
The CSS3 Values spec (in Candidate Recommendation) has a way to make attr() useful
I'm not sure it matters much, as I'd argue CSS custom properties are a near total replacement for attr(), but the spec does specifically cover this, presumably as an attempt to make it more useful.
The idea is to set the type of value as you grab it in CSS.
<div data-color="red">Some Words</div>
div {
color: attr(data-color color);
}
Or...
<span data-size="50">span</span>
span {
font-size: attr(data-size px);
}
But as far as I can tell, no browser supports this.

The CSS attr() function got nothin’ on custom properties is a post from CSS-Tricks
Source: CssTricks


Shopping with augmented reality

Last spring, Acquia Labs built a chatbot prototype that helps customers choose recipes and plan shopping lists with dietary restrictions and preferences in mind. The ability to interact with a chatbot assistant rather than having to research and plan everything on your own can make grocery shopping much easier. We wanted to take this a step further and explore how augmented reality could also improve the shopping experience.

[youtube https://www.youtube.com/watch?v=ZroFBG7-P7Q&w=640&h=360]The demo video above features how a shopper named Alex can interact with an augmented reality application to remove friction from her shopping experience at Freshland Market (a fictional grocery store). The Freshland Market mobile application not only guides Alex through her shopping list but also helps her to make more informed shopping decisions through augmented reality overlays. It superimposes useful information such as price, user ratings and recommended recipes, over shopping items detected by a smartphone camera. The application can personalize Alex's shopping experience by highlighting products that fit her dietary restrictions or preferences.

What is exciting about this demo is that the Acquia Labs team built the Freshland Market application with DrupalCoin Blockchain 8 and augmented reality technology that is commercially available today.

The first step in developing the application was to use an augmented reality library, Vuforia, which identifies pre-configured targets. In our demo, these targets are images of product labels, such as the tomato sauce and cereal labels shown in the video. Each target is given a unique ID. This ID is used to query the Freshland Market DrupalCoin Blockchain site for content related to that target.

The Freshland Market site stores all of the product information in DrupalCoin Blockchain, including price, dietary concerns, and reviews. Thanks to DrupalCoin Blockchain's web services support and the JSON API module, DrupalCoin Blockchain 8 can serve content to the Freshland Market application. This means that if the DrupalCoin Blockchain content for Rosemary & Olive Oil chips is edited to mark the item on sale, this will automatically be reflected in the content superimposed through the mobile application.

In addition to information on price and nutrition, the Freshland Market site also stores the location of each product. This makes it possible to guide a shopper to the product's location in the store, evolving the shopping list into a shopping route. This makes finding grocery items easy.

Augmented reality is building momentum because it moves beyond the limits of a traditional user interface, or in our case, the traditional website. It superimposes a digital layer onto a user's actual world. This technology is still emerging, and is not as established as virtual assistants and wearables, but it continues to gain traction. In 2016, the augmented reality market was valued at $2.39 billion and it is expected to reach $61.39 billion by 2023.

What is exciting is that these new technology trends require content management solutions. In the featured demo, there is a large volume of product data and content that needs to be managed in order to serve the augmented reality capabilities of the Freshland Market mobile application. The DrupalCoin Blockchain community's emphasis on making DrupalCoin Blockchain API-first in addition to supporting distributions like Reservoir means that DrupalCoin Blockchain 8 is prepared to support emerging channels.

If you are ready to start reimagining how your organization interacts with its users, or how to take advantage of new technology trends, Acquia Labs is here to help.

Special thanks to Chris Hamper and Preston So for building the Freshland Market augmented reality application, and thank you to Ash Heath and Drew Robertson for producing the demo video.
Source: Dries Buytaert www.buytaert.net


Message on a Bottle

The famous Dr. Bronner’s labelDr. Bronner’s Magic Soaps, which bills itself as the top-selling natural soapmaker in North America, wasn’t founded to sell soap. The company was started to promote a religious philosophy developed by Dr. Emanuel Bronner, a third-generation German Jewish soapmaker, who printed his message on the labels of his potent peppermint liquid soap. Successive generations of the Bronner family have used the label’s message of a united humanity to guide the company, which spends much of its profits on charitable causes and is outspoken on issues like wage equality and fair trade. Today, even as the idea of a united humanity seems more distant than ever, Dr. Bronner’s continues to spread its soap and message worldwide.This episode sounds a lot different than the previous ones we’ve released. Instead of a traditional interview, we’re letting company President Michael Bronner and his grandfather, Emanuel, tell the story of how the current generation is interpreting the bottle’s message for the modern age. We hope you enjoy it!https://medium.com/media/e3db75cdf956bdd361fca53670033aa6/hrefMessage on a Bottle was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


Building an Open Source Photo Gallery with Face and Object Recognition (Part 2)

In part one of this two-part series, I explained why my Hackathon team wanted to build an open source photo gallery in DrupalCoin Blockchain 8, and integrate it with Amazon S3, Rekognition, and Lambda for face and object recognition.
In this post, I'll detail how we built it, then how you can set it up, too!
tl;dr: Check out the open source DrupalCoin Blockchain Photo Gallery project on GitHub, and read through its README for setup instructions so you can build an intelligent photo gallery powered by DrupalCoin Blockchain and AWS Rekognition.
Storing images on a Amazon S3 with the S3FS module
Once we had a basic DrupalCoin Blockchain 8 site running on Acquia Cloud with a 'Gallery' content type and an 'Image' Media type, we switched the Image's Media entity image field to store images in Amazon S3 instead of DrupalCoin Blockchain's public files directory.
The S3 File System module makes this easy. We had to use Composer to install it (composer require drupal/s3fs) since it has a few PHP library dependencies. We then configured the S3FS module settings (/admin/config/media/s3fs), and pasted in an Access Key and Secret Key for our team's AWS account, as well as the S3 bucket name where we'd store all the files from the site. We changed the Image field in the Media Image entity to store files (the 'Upload destination' on the Field settings page) on 'S3 File System'.
Note: For security reasons, you should create a bucket for the website in S3, then create an IAM User in AWS (make sure the user has 'Programmatic access'!), and then add a new group or permissions that only allows that user access to the website's bucket. The CloudFormation template, mentioned later, sets this up for you automatically.
We stored all the files in a publicly accessible bucket, which means anyone could view uploaded images if they guess the S3 URL. For better privacy and security, it would be a good idea to configure S3FS to have a separate private and public directory in the S3 bucket, and to store all the gallery images in a private bucket. This is more secure, but note that it means all images would need to be passed through your webserver before they are delivered to authenticated users (so you'd likely have a slightly slower-to-load site, depending on how many users are viewing images!).
Why did we store files in S3 instead of on the webserver directly? There are a few reasons, but the main one in our case is storage capacity. Most hosting plans offer only 20, 50, or 100 GB of on-server storage, or charge a lot extra for higher-capacity plans. With photos from modern cameras getting larger and larger (nowadays 10, 20, even 40 MB JPEGs are possible!), it's important to have infinite capacity—which S3 gives us for a pretty minimal cost! S3 also makes it easy to trigger a Lambda function for new files, which we'll discuss next.
Using AWS Lambda to integrate DrupalCoin Blockchain, S3, and Rekognition

This is the automated image processing workflow we built:
A user uploads a picture (or a batch of pictures) to DrupalCoin Blockchain 8 using Entity Browser.
DrupalCoin Blockchain 8 stores each picture in an Amazon S3 bucket (using S3FS).
An AWS Lambda function is triggered for each new picture copied into our S3 bucket (more on that in a bit!).
The Lambda function sends the image to Rekognition, then receives back the object and facial recognition data.
The Lambda function calls a REST API resource on the DrupalCoin Blockchain 8 site to deliver the data via JSON.
DrupalCoin Blockchain 8's Rekognition API module parses the data and stores labels and recognized faces in DrupalCoin Blockchain taxonomies, then relates the labels and faces to the Media Image entity (for each uploaded image).
This was my first time working directly with Lambda, and it was neat to see how Lambda (and other 'serverless' infrastructure) can function as a kind of glue between actions. Just like when I built my first Node.js app and discovered how it's asynchronous nature could complement a front-end built with DrupalCoin Blockchain and PHP, Lambda has opened my eyes to some new ways I can act on different data internally in AWS without building and managing an always-on server.
The Lambda function itself, which is part of the Rekognition API module (see index.js), is a fairly straightforward Node.js function. In a nutshell, the function does the following:
Get the S3 bucket name and object path for a newly-created file.
Run rekognition.detectLabels() to discover 'Labels' associated with the image (e.g. 'Computer', 'Desk', 'Keyboard'), then POST the Labels to DrupalCoin Blockchain 8's Rekognition API endpoint.
Run rekognition.indexFaces() to discover 'Faces' associated with the image (and any 'FaceMatches' with other faces that have been indexed previously), then POST the facial recognition data to DrupalCoin Blockchain 8's Rekognition API endpoint—once for each identified face.
So for a given image, DrupalCoin Blockchain can receive anywhere from one to many API calls, depending on the number of faces in the image. And the Lambda function uses basic HTTP authentication, so it passes a username and password to DrupalCoin Blockchain to authenticate its API requests.
On DrupalCoin Blockchain's side, the Rekognition API POST endpoint (set up in DrupalCoin Blockchain as a REST Resource plugin) does the following:
Verifies the callback is for a valid, existing File entity.
Stores any Labels in the body of the request as new Taxonomy terms (or relates existing Taxonomy terms, if the Label already exists in DrupalCoin Blockchain).
Stores any Faces in the body of the request as new 'Face UUIDs' (since these are what Rekognition uses to relate Faces across all images), and also ensures there is a corresponding 'Name' for every unique, unrelated Face.
That third step is critical to making an 'intelligent' gallery—it's pretty easy to be able to detect faces in pictures. You could use something like OpenCV to do this without involving Rekognition at all.
But if you want that data to mean something, you need to be able to relate faces to each other. So if you identify "this face is Jeff Geerling" in one picture, then in the next 5,000 photos of Jeff Geerling you upload, you shouldn't have to keep telling the photo gallery "this face is Jeff Geerling, too... and so is this one, and this one..." This is what Rekognition and it's fancy machine learning algorithms gets us.
So in DrupalCoin Blockchain, we store each FaceId or each of the Faces in FaceMatches as a unique face_uuid node, and we store a separate name node which is related to one or more face_uuids, and is also related back to the Media entity.
If you're interested in the details, check out the entire Rekognition API module for DrupalCoin Blockchain.
Displaying the data on the site
It's nice to have this structured data—galleries, images, faces, labels, and names—but it's not helpful unless there's an intuitive UI to browse the images and view the data!
Our Hackathon cheated a little bit here, because I had already built a basic theme and some views to display the majority of the information. We only had to touch up the theme a bit, and add labels and names to the Image media type's full entity display.
One of the best front-end features of the gallery is powered by DrupalCoin Blockchain 8's built-in Responsive Image functionality, which made responsive images really easy to implement. Our photos look their best on any mobile, tablet, or desktop device, regardless of display pixel density! What this means in the real world is if you're viewing the site on a 'retina' quality display, you get to see crisp, high-res images like this:

Instead of blurry, pixelated images like this:

Most photographers try to capture images with critical focus on the main subject, and having double resolution images really makes technically brilliant pictures 'pop' when viewed on high-resolution displays.
We display names below the image, then a list of all the labels associated with the image. Then we display some other metadata, and there's a back and forward link to allow people to browse through the gallery like on Facebook, Flickr, etc.
We wanted to add some more functionality to the image display and editing interface, but didn't get time during the Hackathon—for example, we hoped to make it easy to click-and-update names associated with images, but we realized we'd also need to add a feature that highlights the face in the image when you roll over a name, otherwise there's no way to identify individual names in a picture with multiple faces!
So I've added issues like Add edit link next to each name on image page to the DrupalCoin Blockchain Photo Gallery project, and if I can spare some time, I might even work on implementing more of these features myself!
All the configuration for the site is in the DrupalCoin Blockchain Photo Gallery project on GitHub, and if you want to get into more detail, I highly encourage following the instructions in the README to install it locally using DrupalCoin Blockchain VM's Docker image (it should only take 5-10 minutes!).
Next steps
There were a number of other features we had in our original "nice-to-haves" list, but didn't have time to implement during the Hackathon, including:
Per-album and/or per-photo group-based permissions.
Sharing capabilities per-album and per-photo (e.g. like Google Drive, where you can share a link to allow viewing and/or editing, even to people who don't have an account on the site).
Photo delivery via private filesystem (currently the S3 bucket is set to allow public access to all the images).
Configure and use different REST authentication methods besides basic HTTP authentication.
Easy enablement of HTTPS/TLS encryption for the site.
I may implement some of these things for my own private photo sharing site, and I hope others who might also have a passion for DrupalCoin Blockchain and Photography would be willing to help as well!
If that sounds like you, head over to the DrupalCoin Blockchain Photo Gallery project page, download the project, and install it yourself!
Or, if you're more interested in just the image processing functionality, check out the standalone Rekognition API module for DrupalCoin Blockchain 8! It includes an entire AWS CloudFormation template to build the AWS infrastructure necessary to integrate DrupalCoin Blockchain and Rekognition using an S3 bucket that triggers a Lambda function. The AWS setup instructions are detailed here: AWS setup - S3, Lambda, and Rekognition.
Source: http://dev.acquia.com/


Bing Ads Introduces Color-Coded Labels by @MattGSouthern

In an effort to assist with campaign management, Bing Ads is slowly rolling out color-coded labels to all accounts worldwide.The post Bing Ads Introduces Color-Coded Labels by @MattGSouthern appeared first on Search Engine Journal.
Source: https://www.searchenginejournal.com/feed/


Craft Color Swatches Plugin

The control that Craft can provide a user is what makes it stand out as a content management system. But sometimes we want to limit what a user can choose from. Craft has a built-in Color field which allows a user to select any color from a color picker. There are times when we only want a user to choose from a select number of colors though. Previously we have done this by using a dropdown with a list of colors, but I decided to build a plugin to allow a user to select from an admin-defined set of colors.
To configure, an admin just needs to define a list of labels and colors in the field settings.

Then, when a user is adding or editing an entry, they are presented with color swatches to choose a color instead of entire color picker.

On the template side, you can access both the selected label and the color, depending on what you need to do. By default, the label will display.

{# Output the admin defined label #}
{{ fieldName.label }}

{# Output the admin defined color #}
{{ fieldName.color }}

{# If using just the field name, label will output #}
{{ fieldName }}

The plugin can be downloaded from Github, and eventually will be updated for Craft 3.


Source: VigetInspire


Floating Labels are Problematic

I feel like all these issues are handleable, but the damning issue is #3: they need space to move into. Labels can't go away and need to be readable at all times, so a floating label pattern doesn't actually save any space. You could have just put the labels where they float to to begin with. It's still a neat effect, but it doesn't buy you anything and may just cost you something.
Direct Link to Article — Permalink
Floating Labels are Problematic is a post from CSS-Tricks
Source: CssTricks


How to Master Google Shopping & Product Listing Ads by @cchaitanya

How to master feed optimization and bidding, structure your account, and use custom labels in Google Shopping.The post How to Master Google Shopping & Product Listing Ads by @cchaitanya appeared first on Search Engine Journal.
Source: https://www.searchenginejournal.com/feed/


How To Make Guides (Collections of Content) in WordPress

A blog post can be anything you want. You could easily write one that links up a bunch of articles on your site. Titles, summaries, links... all hand-crafted HTML. A "guide", as it were. It will likely be appreciated by your readers, I find, especially when you're linking up old evergreen content that is still relevant and useful today.
But let's say you want to programmatically create these "guides". That might make them faster to create, easier to maintain, and give you a nice level of control over them. Let's look at a way to do that.

Guides on CSS-Tricks
I'm writing about this because guides are something we've just started to do here on CSS-Tricks. For example, I wanted to make a guide of our content that is well suited for folks just starting out, so I made Our Guide To Just Starting Out with CSS & HTML.

That wasn't built by hand, it was built by programmatically attaching a variety of content to a Custom Post Type we created just for Guides.
Programmatically Attaching Posts to Posts
You know how you can put images into blog posts? But in WordPress, there is also a concept of a featured image, which is one specific programmatically attached image for that post.
That image is programatically attached to this Post.
Enabling that feature in WordPress is like:
add_theme_support('post-thumbnails', array('post', 'page', 'whatever'));
But we're talking associating Posts with Posts not Images to Posts. There is no built-in WordPress way of doing that, so we'll reach for plugins.
CMB2 and Friends
CMB2 (i.e. the second version of "Custom Meta Boxes") is a free, open source plugin for adding better UI and functionality around custom fields. If you're familiar with Advanced Custom Fields, it's a bit like that, only I guess entirely free and a bit more modular.
With that installed, now you can install (I guess we'll call them sub-plugins?) that make CMB2 do stuff. The one we're after is CMB2 Attached Posts Field which has the explicit job of attaching Posts to Posts (or really, post type to any post type).
It gives you this two-column UI on post types you activate it for:

Move anything from the left to right, and it's now programatically attached. This is exactly what we're after. Now we can hand select, and hand order, any type of post to attach to any other.
Configuring Things
Before you get to the UI you can see above, you not only need to install and activate those two plugins, but also tell CMB2 to create the custom meta boxes and apply them to the types of posts you want.
In our case, our Guides are a custom post type. That's easy enough to enable:
register_post_type( 'guides',
array(
'labels' => array(
'name' => __( 'Guides' ),
'singular_name' => __( 'Guide' ),
'add_new' => __( 'Add Guide' ),
'add_new_item' => __( 'Add New Guide' ),
'edit_item' => __( 'Edit Guide' ),
),
'public' => true,
'has_archive' => true,
'rewrite' => array( 'slug' => 'guides' ),
'supports' => array( 'title', 'editor', 'thumbnail', 'excerpt' )
)
);
Then we apply this new custom meta box only to that custom post type (so we don't have to see it everywhere):
$cmb = new_cmb2_box( array(
'id' => 'guide_metabox',
'title' => __( 'The Guide Metabox', 'cmb2' ),
'object_types' => array( 'guides', ), // Post type
'context' => 'normal',
'priority' => 'high',
'show_names' => true, // Show field names on the left
// 'cmb_styles' => false, // false to disable the CMB stylesheet
// 'closed' => true, // Keep the metabox closed by default
) );

// Regular text field
$cmb->add_field( array(
'name' => __( 'Things for the Guide', 'cmb2' ),
'id' => 'attached_cmb2_attached_posts',
'type' => 'custom_attached_posts',
'show_on_cb' => 'cmb2_hide_if_no_cats',
'options' => array(
'show_thumbnails' => true, // Show thumbnails on the left
'filter_boxes' => true, // Show a text box for filtering the results
'query_args' => array(
// 'posts_per_page' => 2,
'post_type' => array('post', 'page')
), // override the get_posts args
),
) );
We nestle all this code nicely into a functionality plugin, rather than a `functions.php` file, so that changing themes has no bearing on this content.
A Template for Guides
Now that a custom post type exists for our guides, adding a file called `single-guides.php` into our active theme is enough to make that the file that renders for like `/guide/example/`.
In that file, we do whatever normal template-y stuff we'd do on any other template file (e.g. `page.php`, but also loop through all these posts we've attached!
<?php

$attached = get_post_meta(get_the_ID(), 'attached_cmb2_attached_posts', true);

foreach ($attached as $attached_post) {
$post = get_post($attached_post); ?>

<?php include("parts/article-card.php"); ?>

<?php } ?>
All in all, not that much to it!

It feels great to have some kind of mechanism for surfacing evergreen content like this. That can be quite a challenge for sites with a huge amount of content!

High five to Rebekah Monson, whom I ripped this idea off of, who uses this to build guides on The New Tropic, like these neighborhood guides.

How To Make Guides (Collections of Content) in WordPress is a post from CSS-Tricks
Source: CssTricks


Just starting out? Ditch the “full stack developer” label

The words you use to represent yourself matter — and those words mean nothing.The only time “full stack” means something. 😍The vagueness and confusion around the phrase “full stack developer” has been lingering for years. Google it and you’ll find plenty of discussion about why it’s such a loaded term.Given that long-standing vagueness, labelling yourself as “full stack” might be doing you more harm than good, especially if you’re just starting out.🥞 Are you being honest?“Full stack” basically implies that you can do it all — that you can build front to back effectively and ship.But can you really do all of that well?Anyone with some programming experience can learn the basics of something new and cobble a solution together. But that certainly doesn’t make it good software — a goal every good, experienced programmer strives for.When someone with a few years experience labels themselves as a “full stack developer”, I’m pretty skeptical. Is there really enough experience there to be good at everything? I’m not saying it’s impossible, but it’s certainly not likely.Not to mention, what’s a “stack” in 2017 anyway? HTML, CSS, Javascript, Rails, Node, PHP, Go, Python, React, Angular, MySQL, Oracle, Swift, Kotlin, Android, iOS, .Net, Java, jQuery, Mongo, Redis…about a thousand other things?Here’s the important thing to remember — knowing your limitations isn’t a sign of weakness or impostor syndrome. It’s a sign of honesty , and that in itself is a major strength.Don’t sell yourself short, but don’t be afraid to acknowledge your (current) limitations either. People will respect you for it.🥞 What matters to you? What’s your focus?Referring to yourself as “full stack” doesn’t express any opinions or preferences — it’s vague, broad, and bland. It’s the equivalent of saying “I’ll do whatever work, it doesn’t matter to me”.And if that’s the case, well, stick with that label. But if the work does matter to you (and it certainly should), speak your mind.If Rails is your favorite technology, say so — be proud of it! If Javascript is your thing, huzzah! Just don’t fall back to labelling yourself with a bullshit buzzword that everyone else uses.Saying you’ve been “A proud, productive Ruby on Rails programmer for two happy years” sounds a hell of a lot better (and means a lot more) than “full stack developer”.Along the same lines, don’t overdo it when presenting your skills.“Full stack developers” are often the same folks who list out the dozens and dozens of skills they have. Whether they have those skills is irrelevant — it gives the appearance of a quantity-over-quality cover story.When listing out your strengths, be sure to keep the list short and focused. A handful of really strong talking points is far better than a wall-of-text laundry list of skills. It demonstrates clarity in your thinking and a healthy opinion on what matters to you.The bottom line is this: the words you pick to represent yourself really matter, especially when you’re just starting out. “Full stack” is far too bullshitty to do you any good.Figure out your limits, be honest, and focus on what you enjoy most. Express those in your work and how you talk about yourself. You’ll have a clearer head and will be positioning yourself for a much happier, long-term programming career.If this article was helpful to you, please do hit the 💚 button below. Thanks!We’re hard at work making the various stacks of Basecamp 3 better every day. Check it out!Just starting out? Ditch the “full stack developer” label was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


Regular or 360°? Both! Our Top 29 Amazing Facebook Video Ads


It’s no secret that Facebook’s video ads are a powerful marketing tool.
Forbes reported in November of 2015 that video had the most reach out of any post on the network, and Fortune reported that Facebook users watch about four billion video streams a day.

360° video came right on the heels of this regular video boom. From comparisons to virtual reality to early adoption by big brands, 360° emerged as a challenger to the supremacy of video ads.
But luckily, you don’t have to choose between regular or 360° video ads — you can harness the power of both.

With Facebook advertising bigger than ever on mobile, and more time spent consuming video than ever before, here are 30 amazing video ads to inspire you to kick off with one, the other, or both.
1. LG G5 Phone release
To launch their flagship smartphone, LG made a short video ad that references the video features of their phone. From a detachable camera grip to two lenses on the back of the phone — on a wide angle — the video emphasizes some of the best features of the device.
The framing of the video is square, and perfect for mobile. Better yet, with no sound, but an eye-catching blue background, viewers are drawn to the ad on their newsfeed without having to work to get the message — that this phone’s photos pack a punch.
When using regular video for your ad, make a bold statement by showing versus telling. This highlights the caliber of your product and allows you to stand out from your competitors.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

LG G5 : Cinemagraphy
The #LGG5 in stunning titan.A device that stands out on its own. ✔ See how the #LG #G5 stands out from the crowd: http://bit.ly/1Vy6Vi3
Posted by LG Mobile on 1hb September 2016

2. Love Has No Labels
The AdCouncil tapped into our emotions with their Love Has No Labels campaign, which has been viewed over a million times. Showing people presenting themselves to a welcoming crowd from behind an x-ray screen, the videos emphasize accepting diverse examples of love and community.
One great feature of this campaign was the number of different versions that the AdCouncil released. Although they all take the same format, viewers could catch different couples and families, keeping the campaign fresh for retargeting efforts.
Use videos to elicit an emotional response and get audiences to respond or react to your message. It’ll be memorable and if done correctly, leave a positive lasting impression.
[youtube https://www.youtube.com/watch?v=PnDgZuGIhHs?feature=oembed&w=500&h=281]
3. Volvo
This clever Volvo ad takes the viewer on a “Thumb Drive” through San Francisco while highlighting the advanced safety features of the XC60.
Perfectly optimized for mobile, the square aspect ratio keeps graphics looking good on the phone. Putting a thumbprint on the screen allows viewers to “drive” on the streets, which is a great way to enliven a video and invite the viewer to interact.
This campaign uses text boxes and graphics to emphasize the safety of Volvos — a trick that captures viewers’ interest and represents the hallmark of the brand.
Whether using regular video or the newer 360° video, the right mix of graphic elements allow your ad to stand out in the minds of your audience. Use clever graphics that relate to your brand, like Volvo did with bold text boxes.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Take a Thumb Drive through San Francisco and across the Bay in the Volvo XC60. Bit.ly/60OfXC60
Posted by Volvo Car USA on 3hb April 2016

4. Red Bull
Known for their sponsorship of extreme athletes, Red Bull does not disappoint in this ad featuring a race between two Norwegians — rally car driver Andreas Mikkelsen and skier Askel Lund Svindal.
With stunning scenery and quick cuts between the car and skier, this video quickly captures interest as it starts to play. Turning on the sound surrounds the viewer with high-octane music to fit the adrenaline of the race.
Red Bull plays perfectly into its brand identity here while mixing in star power and visually appealing elements — and to great success, with over 800,000 views.
By exaggerating the comparison between two vastly different variables, brands can amplify the energy and excitement associated with their products. Don’t be afraid to experiment with bold ways to reaffirm what your product can do for the audience.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Aksel Lund Svindal meets Andreas Mikkelsen
First one to the ferry wins.
Posted by Red Bull on 3hb Julai 2016

5. Chevrolet Canada
Chevrolet Canada uses 360° to pull at viewers heartstrings in this ad that features Denna Laing, a former professional hockey player. Denna suffered a career-ending spinal injury but has shared her overwhelmingly positive spirit since her injury.
This ad launched at the beginning of January and shares Denna’s incredible drive by announcing a partnership between her and the company to help her support her goal of competing as a rower. The video uses 360° to help you take in Denna’s world, and also puts you in Denna’s shoes as she experiences racing on the water through a VR headset.
This is a great example of building goodwill for Chevrolet and being innovative with 360° view. Use this technique to draw audiences closer to your brand, make the curious and draw them in. In essence, they can experience, virtually, the value you provide.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

It's New Year’s resolution time. See how we're supporting Denna achieve her goal in 2017. What's your resolution this new year?
Posted by Chevrolet on 22hb Disember 2016

6. Game of Thrones
In a bid to hype up fans for the much-anticipated sixth season of Game of Thrones, the opening titles for Game of Thrones were re-rendered to be viewable in 360 degrees on Facebook. This was a great way to appeal to fans of the show by giving them a new experience with a familiar sequence.
Thanks to the insatiable fanbase and the novelty of the rendering, this video had over 14 million views. No wonder — who can resist the haunting theme song and interactive graphics.
Consider putting a slightly new spin on a familiar, but successful, ad. You’ve already got users attention so impress them with something unexpected but true to your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Game of Thrones Opening Credits 360 Video
From King’s Landing to Dorne, explore the world of Westeros like never before in our immersive 360 experience.
Posted by Game of Thrones on 13hb April 2016

7. Samsung Gulf
Samsung launched their #BeFearless campaign to help people overcome the two most common fears: heights and public speaking.
Though this VR-simulation video, they invited people to see what it felt like to look at the dizzying vistas from Auckland’s SkyTower, even watching people taking part in the SkyJump experience. They overlaid inspirational messages onto the ground below to promote the experience of overcoming your fears with Samsungs products and training.
We love that this video runs as a part of a huge campaign — a great use of 360° video as one tool in a savvy marketer’s toolbox.
Empower your audience by showing them that you not only understand them but have the tools to help them succeed. What better way to do that than to use a video ad that shows, rather than tells, what you can do for them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

From this height, do you feel excited? Or do you feel the fear? Walk in the sky in the palm of your hands with this immersive 360 experience. #BeFearless. Take part in Samsung VR experience and learn to conquer your fears.http://spr.ly/6188BP1fj
Posted by Samsung Gulf on 30hb Oktober 2015

8. Kerrygold
In this video ad, Irish dairy co-op Kerrygold adapts a scene from their popular television ad campaign, to the tune of 100,000 views. They take the tagline, “Love at first bite,” and use video looping to show two school kids smiling at each other endlessly.
It’s a sweet video that shows how easy it is to tailor existing content to the Facebook format, especially when you’ve got something as cute as this commercial.
Increasingly, audiences are consuming ads on mobile devices. It’s important to adapt your ads to work well with this to expand your reach. You can take existing content and breathe new life into it by applying it to new platforms.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Love at first bite. Kerrygold was made for this moment.
Posted by Kerrygold USA on 9hb November 2016

9. Star Wars
In the run-up to Star Wars: The Force Awakens, an exclusive, 360° video was released on Facebook and viewed over 7.8 million times.
The video lets users ride through Jakku on a ship through sand and debris. It perfectly captures the essence of the planet, and pulls you into the Star Wars universe like never before.
Even those who aren’t hardcore Star Wars fans can enjoy the beautiful graphics and feeling of being swept through the landscape on a futuristic ship. It is a great launch teaser because it generates excitement without overworking other parts of the film’s release, like theatrical trailers.
Your ads should appeal to a wide audience by highlighting shared traits. Rather than overwhelm them with product information, focus on their experience while viewing your ad. Make it enjoyable and interactive and let it speak for your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Star Wars: The Force Awakens Immersive 360 Experience
Speed across the Jakku desert from Star Wars: The Force Awakens with this immersive 360 experience created exclusively for Facebook.
Posted by Star Wars on 23hb September 2015

10. Nescafé
This 360° experience shows people rocking out and getting ready to greet the day with Nescafé. The super catchy theme song has you nodding your head along, and each scene features a breakfast from around the world. This ad easily translates to any viewer from any country: the happy families starting their day and the bright colors really make it a fun take on the 360° feature.
Let your video speak for itself. Notice there are very few words used throughout the video. When planning your next ad campaign, focus more on using strong visuals that speak to the value of your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

NESCAFÉ #GoodMorningWorld 360°
Whatever time, it’s never too late to pump up the volume and say #GoodMorningWorld HINT: move your phone!
Posted by NESCAFÉ on 11hb November 2015

11. Walt Disney World
If you didn’t already want to go to Walt Disney World, you will after this ad. They pack the highlights of the Disney World experience into three short minutes that have been viewed a whopping 8 million times.
Giving a 360° feature really makes you feel like you’re on an exciting vacation, taking you on rides and encouraging you to take in all the splendors of the park. And if you’ve already visited Walt Disney World, this tour is a great blast from the past that definitely outdoes any pictures and video you took on your own trip — no offense, amateur photographers!
What better way to show your audience what you can do for them than bringing them into your world. 360° is a great option for this type of ad because it serves to ramp up audience excitement which is exactly what you want. Again, show versus simply telling.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Walt Disney World Presents: How to Use 360 Video with Goofy!
Join Goofy as he leads you through an exciting demonstration of 360-degree video technology, zapping you through a whirlwind tour of Walt Disney World Resort!
Posted by Walt Disney World on 11hb November 2015

12. Urbanears Limited Sweat Edition
In a humorous advertisement for their washable headphones, Urbanears filmed athletes sweating all over their headphones before packaging them up “to be sold.”
The opening of the ad draws heavily from athletic company advertisements, showing a montage of people working out hard — this is a clever way to draw in their perfect customers for their “active” headphones. We can only imagine that they targeted Facebook users who have liked active brands to maximize the potential of this great ad.
When it’s appropriate, your ads should be fun and show the lighter side of your brand. You have a great product to advertise so use a video that audiences can relate to, in the is case fitness, and present it in a way that resonates with potential customers.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Limited Sweat Edition – Urbanears Active
Get ready for some real sweaty inspiration. The Limited Sweat Edition combines wireless and washable Hellas with the sweat of true movement-makers. Watch three pairs being made in the Mojave Desert by running coach Knox Robinson, dancer WilldaBeast Adams, and musician Amanda Bergman. #LimitedSweatEdition #UrbanearsActiveWatch Full Film: http://urbanears.com/sweat
Posted by Urbanears on 26hb Mei 2016

13. Coca-Cola
Taking advantage of Facebook’s release of reactions, Coca-Cola made a short, looping video that was a playful twist on a smiley face. The charm and cuteness of the #Cokemoji is a fun way to keep Coca-Cola on people’s minds without spending the effort to create a full-scale ad campaign.
Instead, this video was the perfect response to a new feature — lighthearted and topical, with an incredible 1.4 million views.
For a unique approach to your ads, have fun with visual relationships. Find two or more common elements and combine them to form something new. To work, each element has to be fairly common, like the smiley face emoji and Coco-Cola bottles.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Images of a new button have been leaked. #Cokemoji
Posted by Coca-Cola on 25hb Februari 2016

14. GoPro
This awe-inspiring 360° video features pro surfers Anthony Walsh and Matahi Drollet hitting the waves in Tahiti.
This video is perfectly on-brand for GoPro, the portable video camera that carries the tagline Be a HERO. Although it would’ve been an incredible ad without the 360 angle, being able to immerse yourself in the water and the waves make you want to watch this video all the way through — maybe even more than once.
It’s gotten over 6 million views, and it’s not hard to see why. Everyone would love to be able to experience the beauty and thrill of surfing, and GoPro lets you do that without leaving your couch.
Use 360° videos to draw your audience in and excite them. If you have an interactive product, this type of video acts a little like a test drive for them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

GoPro Spherical: Tahiti Surf VR
Anthony Walsh and Matahi Drollet bring us inside some of the biggest barrels Tahiti has to offer in full 360°.For the most immersive experience, click and drag on your desktop, or move your iOS device in any direction.
Posted by GoPro on 12hb November 2015

15. Nike
This minimalist ad speaks powerfully about the distractions of modern life and encourages people to toss away their screens and go for a run.
In Nike’s signature font, single words flash in front of the viewer to tell the story of how much time we spend looking at screens, reading comments, and watching TV. Although there is a voiceover that reads the story aloud, the text-only nature of the video makes it well suited to Facebook, where videos are often viewed without sound.
Keep your ads simple so that words and graphics don’t distract from your message.
[youtube https://www.youtube.com/watch?v=hncWOZawsWo?feature=oembed&w=500&h=281]
16. Chipotle
This stop-motion video by Chipotle is a cute way to encourage customers to make Chipotle part of their football game day. Perfectly formatted for mobile, the ad shows someone fashioning goal posts out of a foil burrito wrapper and making a “kick” with a chip.
Again, this is a short and lighthearted video that can be viewed without sound — the best thing to put in front of busy mobile scrollers, especially if they’ve hit that all-important “like” button for their favorite NFL or college football team. Chipotle can definitely call this ad a touchdown.
Use ads that cater to your target audience by tapping into their loyalties and the things they love — like pro sports or family.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Final Foilagami FB.mp4
Chip shot.
Posted by Chipotle Mexican Grill on 23hb September 2016

17. Lenovo
As a part of their #IHackedLife campaign, Lenovo came out with minimalist ads that give viewers valuable “life hacks” — like the one below, which suggests using coffee ice cubes to keep iced coffee from getting watered down.
The bold blue of the background and call to action at the end of the video encourages viewers to hashtag their own life hacks, making this a compelling part of their campaign. Inviting customers to join the conversation can really engage them with your brand.
Sometimes simplicity is better, and these short, uncluttered videos from Lenovo are a case in point.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

TELL US YOUR LIFEHACK idea and hashtag #Ihackedlife. We'll showcase the best at #LenovoTechWorld More: www.ihacked.life
Posted by Lenovo on 5hb Mei 2015

18. Uniqlo
This gorgeous, slow-motion Facebook ad by Uniqlo asks the viewer to reflect on why we dress the way we do. From the opening, “Why do you get dressed?”, Uniqlo hooks the viewer and keeps them engaged in the narrative of the ad.
The cinematography in this short video is also some pretty impressive work, as we see different people moving slowly through busy city life and wonder why each of them is dressed how they are. Packing such good directing into a short video is hard, but it definitely paid off for Uniqlo, as the campaign has 1.4 million views.
If your ads can give people a new perspective on the world around them, you’re sure to capture their interest. Whether that’s an intriguing question, like Uniqlo’s, or a recipe, show how you can bring a new dimension to customer’s lives.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Science of LifeWear Brand Video FW16
Why do we get dressed?To make clothes for life, we'll keep asking. That's the science of LifeWear.Discover more: http://goo.gl/PR72mx
Posted by Uniqlo UK on 5hb September 2016

19. Honda
This festive, family-friendly Honda ad is more of an experience than anything else. Immersing the viewer in a 360° virtual “candy cane lane,” Honda lets the viewer take in seasonal decorations while driving though a cozy neighborhood.
With its whimsical music and overload of bright lights, it’s easy to imagine a kid looking around the scene with wonder. This delicate slice of the season is definitely enjoyable in a sea of hectic “get it before the holidays!” ads.
This type of ad is all about putting a new spin on something. Show people what you can offer them from a new perspective. With this, Honda shows it’s lighter side and doesn’t focus on it’s car features.
[youtube https://www.youtube.com/watch?v=Qc7TEyDC2fQ?feature=oembed&w=500&h=281]
20. McDonalds
What do a stack of pancakes and a jet skier have in common? Well, in this McDonald’s video ad they both swirl tantalizingly before the viewer. Though just 15 seconds with no sound, the video is captivating and blends the spirit of the summer season with McDonald’s breakfast.
We love how simple this ad is, and how it grabs the viewer with its hypnotizing spirals.
Again, if you want to leave a lasting impression with your ad, tap into your audience’s emotions. You don’t need a lot of words or graphics to induce a reaction. Whatever the emotion you’re going for, use visuals that speak to that emotion and relate to your brand.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

The real summer wave: #AllDayBreakfast. Menu items vary by location. Deliciousness doesn’t.
Posted by McDonald's on 26hb Jun 2016

21. T-Mobile
This short T-Mobile video attained over 2.8 million views over three days in January 2017— and it’s no wonder why.
As part of their ad campaign Share your #FeeFace, T-Mobile encourages Facebook users to post photos of their #FeeFace in the hope of winning prizes. Bringing together a campaign, a reward, and a call for user engagement in one video was clearly a recipe for success. Besides, who doesn’t want to share one of those unflattering selfies we all have on our phones?
While it’s not always necessary, including a call to action within your ad will urge viewers to move beyond just viewing your ad to doing something about it. In fact, adding in what audiences stand to get out of it is a great way to encourage responses.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Show your #FeeFace!
In with the new #TMobileONE, out with unwanted taxes and fees! Share your last #FeeFace and demand change for a chance at surPRIZES. Rules http://po.st/PTa1kg
Posted by T-Mobile on 17hb Januari 2017

22. Los Angeles Chargers
To promote the San Diego Chargers’ move to Los Angeles, the NFL team hyped up their new home with a breathtaking 360° video of a sky-diver jumping into the stadium. From the sound of wind whipping around the camera to the spectacular aerial view, it’s an immersive experience.
Although pro sports teams changing locations can be a dicey topic, the Chargers avoided any negative feelings by giving viewers a pure adrenaline rush.
For the purposes of drawing in your viewers, 360° video is a great tool to use. Use it to introduce audiences to something new in a way that they can viscerally feel.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Parachuting Into the Chargers Game (360 Video)
Incredible 360-degree parachute jump into the Chargers game! #360Video courtesy JC Ledbetter/Frog-X Parachute Team and 360fly.
Posted by Los Angeles Chargers on 15hb Oktober 2016

23. Netflix
To promote their sci-fi series Stranger Things, Netflix reproduced the Byers family’s creepy house in a 360-degree video for viewers. Much like the interactive Game of Thrones theme, this is a fresh take on how to get viewers inside their favorite shows.
With the tagline, “Do you have the guts to experience Stranger Things in 360 videos?”, they dare viewers to take the plunge and interact with the video — a clever dare sure to entice fans of suspense and horror.
Use your ads to engage your target audience and current customers by putting a new spin on your product. Peek their curiosity by asking questions or telling your story in a new way, something they haven’t heard before.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Something's lurking inside the Byers house. Do you have the guts to experience Stranger Things in 360 video?
Posted by Stranger Things on 9hb Ogos 2016

24. Pasadena Humane Society & SPCA
What better way to promote your animal welfare organization than to create a 360° video of a room of kittens? If you find one, let us know — this video has 6 million views and is probably the cutest thing you’ll see this week.
Bottom line: we would donate to help that room full of kittens, and you probably would too. Combining a call to action with an emotional response is a surefire way to get noticed.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Kittens Dancing in 360
Need a kitten fix? Look no further than this 360 video of our kitten communal room!
Posted by Pasadena Humane Society & SPCA on 19hb Julai 2016

25. Liverpool FC
If you’ve ever been inside a stadium with thousands of fans rooting for your team, you know what an incredible experience that is, and this ad captures that perfectly. Their caption tells the viewer, “turn up your sound,” and when you do, you’re immediately transported field side.
Tugging on the heartstrings of their supports gives this video a swell of emotion that digs into the heart of a fan’s experience in Liverpool’s stadium. Short of a championship montage, this might be as emotional as it gets for sports fans, at least according to the people that have combined to give the video 8 million views.
Whatever your niche, create ads that they can instantly relate to. What are their interests? How do they use your product? Use this information to build a campaign that speaks to them.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

360°: You'll Never Walk Alone
⬆ Turn your sound up and experience You'll Never Walk Alone from the Kop in our first full 360° video…
Posted by Liverpool FC on 14hb Januari 2016

26. Microsoft
This brilliant ad from Microsoft takes you on a tour of the world’s quietest space: an audio testing chamber in their facility. As you’re shown around, you’re encouraged to take a look at the room, just as if you were actually in the facility.
When looking around, facts will appear that line up with your tour of the space. There are even some audio experiments to show you just how unique of a place it is.
Use your ads to make customers feel welcome in your private company space; this creates a sense of inclusiveness for the viewer — Microsoft is bringing you through the facility like an honored guest.
Although this tour isn’t aligned with a specific Microsoft product, the experience of watching through this video is sure to leave an impression. It’s been shared over 11,000 times.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Shh! Step inside the quietest place on earth in this immersive 360 video.
Posted by Microsoft on 2hb Jun 2016

27. Pepsi
Pepsi taps into NFL player Odell Beckham Jr’s star power by starting their video with a graphic of him telling users to “slow their scroll” to watch. As the ad opens, we are thrown into a completely different scenario, Odell nowhere to be seen, only to have him come back at the end of the ad in a funny twist.
Piquing the viewer’s curiosity and playing to their love of athletes and other celebrities is always a great way to kick things off. But even if you can’t afford to have Odell Beckham Jr star in your commercial, there are plenty of recognizable, cute, or funny things to use to tell people to stop and watch.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

#BreakOutThePepsi with Odell Beckham Jr. – Ring Toss
23rd time IS the charm, and you finally got that purple bear. Time to #BreakOutThePepsi
Posted by Pepsi on 25hb Oktober 2016

28. Nest
Remember when we loved this humorous billboard campaign from Nest? Well, their videos don’t disappoint either. Although it’s just 7 seconds, this video really captures the hilarity of the holidays when a fully decorated tree falls right as a man in PJs ambles into the room, picking up speed as he sees the tree go down.
Again, Nest maintains a positive focus on the “everyday mayhem” that can be captured by your home security system, rather than using fear to make the viewer feel uncomfortable. Especially around the holidays; it’s the right call.
Add creativity to your ads by saying the same thing in a new way. Just like security ads doesn’t have to be scary, put a fun twist on a familiar topic. Get audiences to see them differently while still being able to appreciate the value in what you offer.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Oops. #caughtonNestCam
Posted by Nest on 21hb Disember 2016

29. IKEA
Just in time for people to move into their dorm rooms for the first time, IKEA put out this video of a dorm room that was completely outfitted with their furniture and accessories. You can use the 360 view to take in the whole scene and be in awe of how to put together a tiny college dorm can look.
Although it’s a short, simple video, it is perfect for students who are getting excited about decorating their space and are looking for a little dorm inspiration. Another good example of how to take advantage of big life events in your advertising.
Again, simple ads are great. Simple visuals are all your ads need to show audiences what your offer. Create something with enough details to make them stop and linger for a minute. The longer you can get them to interact with your ad, the better.

(function(d, s, id) { var js, fjs = d.getElementsByTagName(s)[0]; if (d.getElementById(id)) return; js = d.createElement(s); js.id = id; js.src = "//connect.facebook.net/ms_MY/sdk.js#xfbml=1&version=v2.3"; fjs.parentNode.insertBefore(js, fjs);}(document, 'script', 'facebook-jssdk'));

Check out this 360˚ view of our back to college makeover for an IKEA super fan, with help from Remi Ashten!
Posted by IKEA on 15hb Ogos 2016

Best of both worlds
The possibilities of 360 and mobile formatted video are pretty huge, and so applying these trends to your customer’s Facebook feeds is a great way to get your brand on their minds.
So, what do you think? Is there any amazing video or 360° ads that we missed?
Source: https://adespresso.com/feed/


Alternatives to Placeholder Text

Andrew Coyle on when to use <input placeholder>:

Don't use them as a label
Don't use them as a secondary label
Don't use them as example input
Don't use them as helper text

Which amounts to pretty much: "Don't use them". Notice there are no examples of good use cases, and even the examples in the "Do" graphics just say "Placeholder Text", which isn't exactly demonstrative of usefulness.
I wonder if placeholder text will fall completely out of favor.
It reminds me of float labels. Float labels were a fun little fling, but they aren't actually useful. The reason you'd reach for them is when you're so space-limited that you can't show a regular label beside the input. But you can't actually ever remove the label, just move it. So if the label is still there and readable, why not just leave it there the whole time?
Direct Link to Article — Permalink
Alternatives to Placeholder Text is a post from CSS-Tricks
Source: CssTricks


Composting at the Office

Composting has been gaining popularity in the US over the past few years and in the past year, we’ve worked to make it a part of office life at all three of Viget’s offices. Composting has all sorts of benefits including reducing waste in our landfills and reducing the need for chemical fertilizers. All around, composting contributes to living more green and reducing your office’s carbon footprint. Here are some tips on setting up a successful composting program in your office.

Making it happen: Composting Logistics

Depending on where your office is located, composting may be required and already a part of the regular trash removal infrastructure, or you may need to hire a separate company to manage your compost removal.

In June 2015, Boulder, Colorado (home of our third office), passed an ordinance that all businesses must separate recycling and compost from the rest of trash. So in accordance with this law, our composting in the Boulder office is now part of our regular trash service. But, in our other two offices we have to pay for a service to pick up each week. These services can range from $25-$100 a month. 

Where to locate the bins

Centrally located is best, of course! In our headquarters we have our main bin out in the open in the kitchen with a sign that clearly labels it as compost. We also have a secondary bin under our first floor coffee bar. In Boulder, we have built in trash, recycling, and compost bins in our kitchen island-- so you open just one drawer and can decide where your waste best belongs. If you have to take your composting out like a regular trash bag, you might consider using biodegradable liners so you don’t have to worry about separating things at the dumpsters.

Getting staff on board

When we first got our bin at the company’s headquarters in Falls Church, VA, we had to retrain our brains to make composting a regular part of life. I posted signs on our refrigerator and above the compost bin to remind people what was compostable (full disclosure, that adorable image of the apple core is from google image search). I also announced each week what was compostable at our Friday all-company lunches (which is where the bulk of our compost comes from).

After a few weeks of frequent reminders, most people got in the habit of composting their lunch scraps, coffee and banana peels. As with all routines, people can easily fall out of them when a vacation, long weekend or other life event takes place; so it’s good to keep signs up and remind people occasionally.

Dealing with K-cups

If your office is like ours, your cup(s) overfloweth with k-cups. Coffee is the second biggest contributor to our office compost bin. For several months we used a Recycle-a-Cup to separate the k-cup pods into compostable coffee and recyclable #7 plastic (Note: #7 plastic isn’t recyclable in all communities but you can ship your pods in to Recycle-a-Cup for free). This plan works well if you’re committed to a specific brand or flavor of k-cup or you’re working with smaller quantities but after a while, we found ourselves drowning in un-separated cups and it was time to come up with a plan B.

Enter compostable k-cups -- yes they make them! We spoke with our composting facilities and found out we could put San Francisco Bay OneCup pod directly into our bins without any additional work. They’re technically only 97% biodegradable but seem to work well in commercial composting facilities.

Avoiding the downsides

Admittedly, there can be some downsides to composting. We’ve tried composting for short stints before this year- most notably, a worm composting bin run by our very own CEO, Brian Williams. The main downside there was that the bin was too small to meet our needs and too much effort for someone to run internally. We’ve found more success using an outside company that changes out our bin once a week.

Fruit flies and smells are another understandable fear. We’ve found that simply having a compost bin with a lid keeps the fruit flies at bay and the smells under control. Coffee grounds also do a lot to control smells - natures natural deodorizer. Frequently emptying the bin also helps prevent flies and smells alike.

Our first year of serious composting has certainly been a learning experience but now, with everyone onboard, we've made our offices a little greener and our contribution to the landfill much smaller. 


Source: VigetInspire


Clothes Call

Illustration by Nate OttoHere’s a story for all you Cubs fans out there, or anyone who’s ever wondered: Who makes the championship t-shirts you see players wearing in the locker room right after they win the game?Marathon Sportswear in Blue Island, Illinois is one of those businesses. The t-shirt screen printing company is located in White Sox territory, but its president, Jim Piko Jr., roots for the Cubs. And when the Cubs won the 2016 World Series, he wasn’t just thrilled as a longtime fan of the team. Marathon, which Jim’s father started in the family garage in 1980, began printing tens of thousands of officially licensed Cubs t-shirts as soon as the team won the championship. It was the equivalent of a farmer’s bumper crop for Jim. Being prepared for that moment took weeks of advance preparation — and years of slowly building a business, one t-shirt at a time.https://medium.com/media/3fb8de4b5b6c07815e0f46c1ecf66e7c/hrefTranscriptWAILIN WONG: Jim Piko Jr. is the oldest of six children and grew up in a Chicago family whose loyalties were divided between the Cubs and the White Sox. His father, Jim Senior, roots for the Sox. But Jim took after his maternal grandfather, a Cubs fan who lived next door. In the summer, Jim would help out with his father’s t-shirt screen printing business and watch the Cubs with his grandfather.JIM: We really had a nice relationship. He was a wonderful man. He had a TV out in his garage, which was right next to our garage, so we were printing shirts in our garage and he’d be out working on cars and he was a real fixer upper. But he’d have a TV out there and he’d have the Cubs on every day.WAILIN: Like many other Cubs fans, Jim spent this year riveted to the TV, watching his team move ever closer to ending the longest championship drought by any major American sports team. So on November 2nd, when the Cubs were playing the Cleveland Indians in Game 7 of the World Series, Jim turned on the game at home. The Cubs led off the first inning with a home run.ANNOUNCER: That’s in the air to center, back at the wall, and is…gone! What a start…WAILIN: But Jim was still feeling pretty nervous,JIM: So I just told my family all right, “I’m going in.”WAILIN: “Going in” meant driving to the shop where, if the Cubs won that night, he would start printing thousands of officially licensed t-shirts proclaiming the hometown team as World Series champions. Jim Piko Jr. is the president of Marathon Sportswear, the apparel screen printing business in Blue Island, Illinois that his father started with a single machine in the family garage. That was in 1980. Thirty six years later, Jim was on the verge of experiencing a Cubs win not just as a long-suffering fan, but as a business owner with very big and direct stakes in the game.JIM: It’s pretty crazy, I mean, you’re a big fan, because it’s all the local teams, that’s where you get the printing from, so you’d be nervous if it had nothing to do with your livelihood, but the fact that you have a lot riding on the outcome of the game really adds to the excitement or the anxiety, frankly.WAILIN: Welcome to The Distance, a podcast about long-running businesses. I’m Wailin Wong. On today’s show, the story of a business with a unique perspective on the fortunes of its hometown sports teams, and how the Cubs’ historic win was the equivalent of a farmer’s bumper crop for Marathon Sportswear. The Distance is a production of Basecamp. Basecamp is the better way to run your business. It’s an app for communicating with people and organizing projects and work. If you’re feeling overwhelmed by email, chat and meetings, give Basecamp a try. Sign up for a 30-day free trial at basecamp.com/thedistance.ANNOUNCER: …drive into left, and it’s gone! Tie game! Rajah Davis, 6–6!WAILIN: In the eighth inning, with the Cubs ahead 6 to 3, Cleveland scored three runs to tie the game. Jim had been listening on a radio in his office. His brother Dan, who also works at Marathon, was with him and they felt the dread settle in as the game stretched on into the night.JIM: I was distraught, so I went into the way back of the shop with Dan and we had a job where we had to take neck labels out of shirts, a very menial task, and then we were gonna stamp custom made labels in. So we went back there and sat in the dark back room and we just started tearing labels. They went to extra innings and then the rain delay and I told Dan, “We’re gonna be here until five in the morning and they’re gonna lose and we have all this labor that we’re paying for and we’re gonna be miserable.”WAILIN: The game was taking place in Cleveland, but Jim was also watching the weather in Chicago and worrying about a storm that was coming in. The forecast was dredging up some very stressful memories from three years earlier. And here’s where we’re going to leave the night of the World Series clincher for a bit, since you already know what happened, and you’re going to hear about what Jim describes as by far the worst 24 hours in the life of Marathon Sportswear. It was June 24th, 2013, and the Chicago Blackhawks were playing the Boston Bruins in the Stanley Cup finals.JIM: Game 6, they were up three to two, so if they won, they’d be Stanley Cup champs. If they lost, it would come back to a Game 7, two nights later. It was a Monday afternoon, I was in here, and I was gonna go home and have some dinner. So I drive home and a storm blows in and I’m a little west of here, the power goes out at my house. So I call back in here, I said, “The power just went out here, big winds, storm is coming through.” About 10 minutes later, power goes out here. So you know, I come back in, there’s no backup generator or anything. We were at the mercy of ComEd, tell our customer, “The power’s out here,” you know, we’ve got tens of thousands of shirts here, ready to print as soon as the game ends if the Blackhawks win. And I’m calling ComEd, calling ComEd, there’s nothing you can do. ComEd had basically said the power was not going to be on for, you know, 12 or 13 more hours.WAILIN: Jim’s customer was panicking too. The Blackhawks and the Cubs jobs are known in the industry as hot market, and they require a lot of advance preparation. A bigger license company will hire local t-shirt printers like Marathon in the geographies of the final teams. A small amount of shirts are pre-printed and sent to nearby stores in advance of the series clincher. But the bulk of the production starts the second the winner is determined. And on that Monday night in 2013, as Jim was calling around without success to get a backup generator installed, he found himself hoping that the Blackhawks would lose and the series would go to Game 7. With Boston leading 3–2 late into the third period, it looked like things might go his way.JIM: I care so much about this place that I just have terrible perspective on it all. I know it’s just a t-shirt, but I can’t convince myself that. So the power was not coming back on. I’m beside myself, having a breakdown and game’s going on. So I went out to my car with about two minutes left in the game to call my wife. She was at my in-laws ‘cause their power was on, our power was still out. I was, I had a plan. I said, “I’m gonna just get a room at the local hotel and maybe we dodged a bullet. We’ll get the power back on, the game will be in two days and we’ll see what happens.” Well, as I’m on the phone, the Blackhawks score a goal with like two minutes left to tie it, and I didn’t even know, and my wife said, “I think the Blackhawks just scored.” I was like, “Come on.”ANNOUNCER: Score! Toews to Bickell, with 1:16 to go in the third!WAILIN: Tie game, three three. And then, while Jim was still sitting in his car on the phone with his wife…ANNOUNCER: They score! Bolland! Three to two with less than a minute to go!JIM: She’s like, “I think they scored twice.” They ended up scoring again 17 seconds later. It’s like the most famous 17 seconds in Blackhawks history. I’m a huge fan, this should be wonderful, they’re gonna win the Stanley Cup, I hear fireworks going off, and I’m just ready—I’m just hysterical about the fact that this has happened.WAILIN: Jim had to call his customer and tell him that Marathon still had no power. The customer had other contracts with a couple printers in Milwaukee, about a hundred miles away, so Jim’s brothers started driving truckloads of blank t-shirts up to Wisconsin all night long. By 1 pm the next day, the backup generator arrived.JIM: Switched the power, got everything up and running. Ten minutes after, the power comes back on. The actual power. So we’ve got electricians here and they said, “You’re gonna have to switch it anyway, you might as well switch it now.” So that’s another hour and a half. I’m telling my customer, “We’re almost there, we’re almost there.” He’s yelling. We get the power back on, we start printing at about 3 pm Tuesday afternoon and we printed constantly for him until Friday afternoon, 24 hours a day, and the—my customer contact came in and the owner of the company came in at the end of the week, sat down with me. I don’t know how many hours of sleep I had but it wasn’t many, and he said, “Thanks a lot. We really appreciate the effort you put in after what happened and it turned out to be a huge success.” So that’s my hot market story that is, you know, my precautionary tale because no matter how much control you think you have, you don’t have total control.WAILIN: So let’s return to November 2nd, 2016. The Cubs are going into extra innings and a rain delay during Game 7 of the World Series. This time around, Jim had a backup generator ready to go if needed. And as with other hot market jobs, he didn’t have the luxury of worrying about whether his advance preparation was going to jinx the team. He needed everything in place. That meant the artwork, the ink, the blank t-shirts and seven of Marathon’s 10 automatic screen printing machines.ANNOUNCER: It’s over! And the Cubs have finally won it all, 8–7 in 10!JIM: A couple workers out there wore Sox shirts in here, which was funny but most of the people were really excited. So it was something, you know, you can’t really celebrate, like we can’t because we’re just starting then, you know, our job is just starting. We started probably about midnight or 1 in the morning on Wednesday night and we were done by—we were done with most of it by Friday night at about 7, 8 PM. So we were able to kind of turn it around quickly. We had it on many machines, so it was able to go really fast. I mean, the first 12 hours of printing we had probably done about 30,000 shirts.WAILIN: Screen printing t-shirts in a sports town like Chicago has been a good business for Jim and his family. In the 36 years since Jim Senior started Marathon, the Bears have won the Super Bowl, the Bulls have won six championships, The White Sox have won the World Series, the Blackhawks have won three Stanley Cups and now the Cubs are World Series champs for the first time in 108 years. But Jim can’t plan on that kind of bonanza. Marathon’s bread and butter is printing t-shirts for local races and athletic teams. Something like the Cubs winning the World Series is pure gravy.JIM: We certainly don’t bank on it because that would really — then we’d really be, uh, a lot closer to bookies than, uh, we want to be, or gamblers. So whatever extra we get from this hot market stuff we kind of just try to incorporate back into the, the overall bottom line of the company.WAILIN: Jim inherited his sense of caution from his father, who started Marathon to supplement his income as a high school history teacher and football coach. While t-shirt trends have changed in the last three decades, the Pikos still grapple with intense competition, thin margins and a lot of unpredictability.JIM: His philosophy was that um, nobody’s gonna outwork me. So we’re gonna keep the prices as low as we can, we’re gonna be as competitive as we can, and if I work as hard as I can, that would make up for the couple extra pennies, you know, and the quality would be good and it’s really worked. It’s been a fairly simplistic approach but he started the business in 1980. Interest rates were like 19 percent. He couldn’t borrow any money, but he just went step by step by step and, you know, he would handle one issue at a time and try and grow slowly, and over the course of time it’s really worked.WAILIN: A few years after Marathon got going, Jim Sr. moved the business into the dank basement of a closed-down funeral home. Jim Jr. would help his dad fold t-shirts in the scary basement. Sometimes he would curl up and take a nap inside a box, nestled in a pile of cotton t-shirts. As Jim said earlier, it’s just a t-shirt, but the humble t-shirt has sustained two generations of his family and counting. Jim Sr. is 70 years old and still comes to work every day. And the thrill of seeing a Marathon shirt out in the world hasn’t gotten old, whether it’s a Cubs player on TV or someone the Pikos met on a vacation in the early days of the business.JIM: We drove down to Disney World for one of the crazy family trips in the middle of the winter. And we were down there in line for Space Mountain or one of the rides and a couple people in front of us was a shirt that my dad had printed for a local race, you know, in Chicago or somewhere and he was so proud. I mean, he tapped the guy and said, “Where’d you get that shirt?” And “You know, we made that at my company,” so wherever we go now, we’re always looking to see if we can find a Marathon shirt. Every day we come in and we work very hard and it’s—it’s not easy. The margins are thin and it’s just a business where you have to work hard. You’ve got to be there, you’ve got to be hands on, you’ve got to work, so it’s not easy but it’s—it provides us all a living. It provides all our families a living. It provides so many employees a living, and, you know, if you’re willing to come through the door and work hard, you can benefit and it can benefit your whole life.WAILIN: The Distance is produced by Shaun Hildner and me, Wailin Wong. Our illustrations are by Nate Otto. We’re going to be taking a short break this month for the holidays, so we’ll be replaying some old favorites for the rest of December and we’ll be back in January with new episodes. The Distance is a production of Basecamp, the app for helping small business owners stay in control of projects and reduce email clutter. Try Basecamp free for 30 days at basecamp.com/thedistance. Happy holidays and see you in 2017!Clothes Call was originally published in Signal v. Noise on Medium, where people are continuing the conversation by highlighting and responding to this story.


Source: 37signals


FormLinter

I absolutely love this idea from Thoughtbot. Just like automated tools that check your HTML for syntax, formatting, validity, or whatever else, FormLinter checks your <form> HTML for best practices. Things like every input having a label, using correct input types, required fields, and more.
Ben Orenstein:
Doing all these things right is worth the effort: improvements like these improve accessibility and increase conversions. However, checking this sort of thing by hand is tedious and error-prone.
We were testing some forms in the ol' CSS-Tricks team chat and it was doing what it said on the box. On Geoff's personal site, it gave his contact form a "B" for not having matching labels for inputs and not having any fields required (seems like a fairly high grade?). The form was output from the mega-popular "Contact Form 7" for WordPress, also a bit surprising.
Many of the forms we tested bombed the app though. No word on that. Might be an HTTPS thing?
Direct Link to Article — Permalink
FormLinter is a post from CSS-Tricks
Source: CssTricks