Category Archive for: labels

rfp-robotRFP ROBOT: Website Request for Proposal Generator

The time has come for a new website (or website redesign), which means you need to write a website request for proposal or web RFP. A Google search produces a few examples, but they vary wildly and don’t seem to speak really to your goals for developing or redesigning a new website. You need to write a website RFP that will clearly articulate your needs and generate responses from the best website designers and developers out there. But how?

Have no fear, RFP Robot is here. He will walk you through a step-by-step process to help you work through the details of your project and create a PDF formatted website design RFP that will provide the information vendors need to write an accurate bid. RFP Robot will tell you what info you should include, point out pitfalls, and give examples.


Building Battleship in CSS

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

Read More →

Simple Interactive Pie Chart with CSS Variables and Houdini Magic

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

Read More →

Automate Your Workflow with Node

You know those tedious tasks you have to do at work: Updating configuration files, copying and pasting files, updating Jira tickets. Time adds up after a while. This was very much the case when I worked for an online games company back in 2016. The job could be very rewarding at times when I had to build configurable templates for games, but about 70% of my time was spent on making copies of those templates and deploying re-skinned implementations. What is a reskin? The definition of a reskin at the company was using the same game mechanics, screens and positioning of elements, but changing the visual aesthetics such as color and assets. So in the context of a simple game like ‘Rock Paper Scissors,’ we would create a template with basic assets like below. But when we create a reskin of this, we would use different assets and the game…

Read More →

Creating a Bar Graph with CSS Grid

If you’re looking for more manageable ways to create bar graphs, or in search of use cases to practice CSS Grid layout, I got you! Before we begin working on the graph, I want to talk about coding the bars, when Grid is a good approach for graphs, and we’ll also cover some code choices you might consider before getting started. Preface The bar is a pretty basic shape: you can control its dimensions with CSS width, height, number of grid or table cells, etc. depending on how you’ve coded it. As far as graphs go, the main thing we want to control is the height of the bars in the graph. Controlling height with Grid cells (like here) is convenient for designs where the height is incremental by a fixed value — no in-betweens. For example, signal bars in phones or when you don’t mind setting a lot of…

Read More →

Bing Ads Editor for Mac Adds Support for Labels by @MattGSouthern

Bing Ads Editor for Mac has added support for labels, allowing users to better organize ad campaigns and save time.The post Bing Ads Editor for Mac Adds Support for Labels by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

A Specification Tool for Drupal 8

Revered management thinker Peter Drucker once wrote, “If you can’t replicate something because you don’t understand it, then it really hasn’t been invented; it’s only been done.” In many ways content modeling in Drupal has been done without being invented. There is no accepted method of analysis, no common format for specification, no process for change management, no best practices for testing. Consequently outcomes are highly variable. For this reason, we’re developing a discipline for content modeling at Acquia. It’s drastically reducing both costs and defect rates for us, and we’re sharing it with you in this post. Introducing the Drupal Spec Tool The cornerstone of the discipline is something we call the Drupal Spec Tool, consisting of a spreadsheet and automated testing infrastructure. Why a Specification Tool? A standard specification format is an industry’s answer to the difficulty of validating, communicating, and conceptualizing complex solutions. Every professional domain has…

Read More →

Solved With CSS! Dropdown Menus

This post is the second in a series about the power of CSS. Article Series: Colorizing SVG Backgrounds Dropdown Menus (this post) CSS is getting increasingly powerful, and with features like CSS grid and custom properties (also known as CSS variables), we’re seeing some really creative solutions emerging. Some of those solutions focus around not only making the web prettier, but making it more accessible, and making styling accessible experiences better. I’m definitely here for it! A common UI pattern that we see on the web are dropdown menus. They’re used to display related information in pieces, without overwhelming the user with buttons, text, and options. Somewhere that we see these a lot is inside of headers or navigation areas on websites. A Google search for “dropdown menu” yields many examples Let’s see if we can make one of these menus with CSS alone. We’ll create a list of links…

Read More →

Facebook Makes its Ad Metrics Easier to Understand by @MattGSouthern

Facebook is making its ad metrics clearer by introducing new labels that show how they are calculated. Estimated or In Development Facebook is now labeling some metrics in Ads Manager as either ‘estimated’ and/or ‘in development.’ These labels can be found in a section within the Ads Manager reporting table called “tool tips.” Labels can also be displayed using the customize column selector for ads running across Facebook, Instagram, and Audience Network. What Are Estimated Metrics? Facebook explains that its estimated metrics can provide guidance in areas where the end result is difficult to quantify. Real-time data is often provided […]The post Facebook Makes its Ad Metrics Easier to Understand by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Bing Ads Editor Updated With Labels for Dynamic Search Ads by @MattGSouthern

Bing Ads Editor has been updated with the ability to organize dynamic search ads by adding shared labels.The post Bing Ads Editor Updated With Labels for Dynamic Search Ads by @MattGSouthern appeared first on Search Engine Journal. Source: https://www.searchenginejournal.com/feed/

Small Tweaks That Can Make a Huge Impact on Your Website’s Accessibility

For a beginner, accessibility can be daunting. With all of the best intentions in the world, the learning curve to developing compliant, fully accessible websites and apps is huge. It’s also hard to find the right advice, because it’s an ever-changing and increasingly crowded landscape. I’ve written this post to give you some tips on small things that can make a big difference, while hopefully not affecting your development process too much. Let’s dive in! Document Structure and Semantics It probably doesn’t come as much of a surprise that structuring your HTML in an organized, semantic way will make a big difference. Screen readers rely on a well-structured document in order to follow a coherent narrative, so make sure that you’re using the elements that the HTML5 spec provides responsively and effectively. If you’re unsure about how to markup your work correctly, check out resources such as HTML5 Doctor, Code…

Read More →

A Sliding Nightmare: Understanding the Range Input

You may have already seen a bunch of tutorials on how to style the range input. While this is another article on that topic, it’s not about how to get any specific visual result. Instead, it dives into browser inconsistencies, detailing what each does to display that slider on the screen. Understanding this is important because it helps us have a clear idea about whether we can make our slider look and behave consistently across browsers and which styles are necessary to do so. Looking inside a range input Before anything else, we need to make sure the browser exposes the DOM inside the range input. In Chrome, we bring up DevTools, go to Settings, Preferences, Elements and make sure the Show user agent shadow DOM option is enabled. Sequence of Chrome screenshots illustrating the steps from above. In Firefox, we go to about:config and make sure the devtools.inspector.showAllAnonymousContent flag…

Read More →

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…

Read More →

An Open Source Etiquette Guidebook

Open source software is thriving. Large corporations are building on software that rests on open collaboration, enjoying the many benefits of significant community adoption. Free and open source software is amazing for its ability to bring together many people from all over the world, and join their efforts and skills by their interests. That said, and because we come from so many different backgrounds, it’s worth taking a moment to reflect on how we work together. The manner in which you conduct yourself while working with others can sometimes impact whether your work is merged, whether someone works on your issue, or in some cases, why you might be blocked from participating in the repository in the future. This post was written to guide people as best as possible on how to keep these communications running smoothly. Here’s a bullet point list of etiquette in open source to help you…

Read More →

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…

Read More →

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…

Read More →

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. 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…

Read More →

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…

Read More →

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 Drupal 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 Drupal Photo Gallery project on GitHub, and read through its README for setup instructions so you can build an intelligent photo gallery powered by Drupal and AWS Rekognition. Storing images on a Amazon S3 with the S3FS module Once we had a basic Drupal 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 Drupal’s public files directory. The S3 File System module makes this easy. We…

Read More →

Back to Top