It was a pleasure to work with the team from CSS-Tricks. --Stacie

TLDR? Check out my example on codepen.

Scenario: You get a complaint about the contrast on your website, but it seems perfectly readable to you. How can you know what’s wrong and how to fix it?

There are some life hacks you can try out, like checking out your site on your phone out in bright sunlight, or adding a CSS filter to turn your whole site grayscale, but… you don’t have to trust your eyes. Your eyes may be bionically enhanced, but there is no way to be certain that everyone visiting your website has had the same cyber implants as you.

You can mathematically know if something has enough contrast.

The guidelines for AA contrast is 4.5:1 for most text and 3:1 for large text. But… what do those numbers even mean? The ratio explains the difference between the Lightest color brightness vs the Darkest Color brightness. (relative luminance of each, actually, which makes it clearer, right?)

Let’s start with an egregious example, putting two colors together on the text and the background.

Title of Your Awesome Site

Ok, you say. That teal on gray color combination is not exactly great, but I can mostly make it out. (I’m glad one of us can, it’s pretty much a muddy gray mess to me.)

The contrast ratio for that fine piece of hypertext is 1.47:1

To arrive at that number we require the use of… mathematics, with a side of understanding the differences between human and computer vision.

I wanted a better understanding of what the contrast scores were actually checking. This journey taught me about the history of computer vision and a bit about biology, and gave me a small review of some mathematics I haven’t touched since college.

I think I’ll just let the computer do the math for me from now on. Trying to work out the details step by step on paper/with a calculator gave me a couple weeks of frustration. It was a lot of me figuring things out wrong, and comparing to the end result of existing contrast checkers.

Remember how the teachers’ in school always wanted you to show your work, ie, how you got to the answer? I made something to help us out.

If you view this on codepen with the console open, I output results step by step there, where I initially worked out the math before displaying things in the fun retro video game style. Go ahead, try our two example colors: 1ABC9C and 888888.

(You can also give it a try, inside this article, but you have more browser breathing room in a new window. Your choice! )

See the Pen Understanding the Contrast Ratio by Stacie (@Metahari) on CodePen.

The digital devices around us make gamma encoding and decoding calculations all the time, to show us things on the screens that match up to our perception of how things appear to our eyes.

There are a variety of accessibility resources that you can can audit your site.

First, identify areas that are not serving your accessibility needs.

Use free tools Google’s Lighthouse Audit or the WEBAIM WAVE tool have places to identify contrast errors (along with other helpful accessibility tips).

Then, follow the suggestions of the audit and use best practices to improve your scores, and remove the errors.

Once you identify contrast errors you can try out some different options right there in the WAVE tool, click on the color box to pop open a color picker. Then play around until the errors go away, and you’ll know what you can replace in your code.

To finish, run the tests again to make sure your changes improved things. Congratulations! You just made your product better for all users, not just ones affected by the accessibility errors!.

After all that, what comes next is up to you!

You can make it easier on yourself and start all new products with the goal of making them accessible. Make accessibility guidelines part of your requirements for both technology AND design. You’ll save yourself potentially hundreds of hours of remediation, and related legal complaints.

US government/education websites are required to comply, but other industries are often taken to task for not making their sites equally available for all people.

If you have the option, consider using established and tested frameworks and web libraries (like Twitter’s Bootstrap or Google’s Material Design) that have already figured out optimum contrast theme colors. In many cases you can take just what you need (the CSS) or at least review their color palettes to inform choices.

Derek Kay has reviewed a list of web frameworks with a focus on accessibility, which I suggest you read if you are looking for more options.

The US Web Design system shows one way to solve color/contrast puzzles (ie, use their css token system that labels colors to make contrast differences super clear) but they also link to several very good resources for improving and understanding contrast.

We took a deeper dive here than you ever really need to know when you just want to do is fix your contrast issues, but understanding what the ratio actually means should help you remember to keep contrast in mind when designing future sites, web apps, and other software.

I’m not the ultimate subject expert, just a very very curious girl, who sometimes has issues reading things with low contrast. If you have any additional thoughts, corrections or further research to share, please leave a comment and I’ll amend this article, or the example. Thanks!

We’ve been working on standardizing our local environments here at work, and have recently started using Grunt and SASS and some image processing as part of our local Drupal development.

Recently I added a Drush command for us to use to easily get Grunt running from any folder in the docroot. It works great! just a little drush grr and off we go!

It’s a pretty simple, and builds off a lot of work I did making a drush command for us to engage visual regression with BackstopJS. (checks for dependencies, grabs git branch name, passes variable flags into JS) I’ll make a different post about that sometime.

Anyway, since all the grunt files live in the theme folder, the most important part was telling drush where that was, so it we could run npm install, and get everything running locally, including live reload, which is awesome.

We’re still using Drupal 7 and by using :

$path_to_grunt = drupal_get_path('theme', 'mc_main');

Now, we can tell drush where to run grunt for us! Of course, we did need to make sure to change the working directory, so the command would actually run there,

chdir($path_to_grunt);

So then we just run`npm install , with a few checks, and we’re good to follow that up with :

grunt --color

Hooray! right?!

Ok, but then I found running drush on things started crashing my PHP with SEGFAULTS all over the place. ugh!

What was going on? How do I fix it, I just wanted to test our latest release and I’m looking at error logs and …

Ok, after some research, and digging through my bash/zshrc files, and getting some strange errors from the command line after trying to drush updb like :

sh: line 1: 36818 Segmentation fault: 11  /Applications/DevDesktop/php5_5_x64/bin/php /Applications/DevDesktop/tools/vendor/drush/drush/drush.php --php=/Applications/DevDesktop/php5_5_x64/bin/php --backend=2 --root=/Users/me/sites/devdesktop/mcmain-dev/docroot --uri=http://default pm-updatestatus 2>&1
     pm-updatestatus failed.

I mean, what? Why is drush trying to even use php 5_5 at all? where is that setting? (I still don’t know.)

I finally ran across this article: Drupal’s Drush Segmentation fault:11

Arvind explains that when npm install runs on your package.json file and creates the node_modules folder in your theme folder…

Drupal freaks out because many node modules include their own .info files. Drupal is looking for only one .info file per theme to exist.

He provides a solution to add a postinstall line to your package.json to remove all the additional .info files inside the node_modules folder.

but! short term, super simple solution for anyone who is experiencing drush weirdness after running an install on a package.json

At least while you’re trying to run other drush commands, feel free to get your grunt on when you’re done.

—update Dec 2, 2019

So, I ran into another strange segfault, this time:

/Applications/DevDesktop/tools/drush: line 11: 77368 Segmentation fault: 11  "/Applications/DevDesktop/tools/vendor/drush/drush/drush" "$@"

Which again, seemed very strange. But, happily, the same solution (removing the node_modules folder from the theme I was testing) still works!

It doesn’t seem to be an issue with my teammates, but I’m leaving this little update to remind me, and maybe you that sometimes the solution is not what the error is complaining about.

Twine is an open-source tool for telling interactive, nonlinear stories.

Operate Twine in a browser, or download the software to your computer and use a visual interface to create linked stories which can then be output as a single html file that you can put online to share.

What has Twine been used for?

• Interactive Fiction Games, Game Research, Writing, Mind Mapping.

Twine Links

• Twine
  • Twine Q&A
  • Harlowe theme docs
  • Twine Cookbook
  • Official Twitter
  • Tutorial
  • Links for beginners
• Guides
  • Developer’s Guide to Twine
  • Writer’s Guide to Twine
• Articles
  • Twine-the video game tech for all
  • Twine Data into Google Sheets
  • Use Twine for Games Research
• Twine Hosting
  • Philo.me
  • Itch.io
• Games
  • http://tundra.paperblurt.com/
  • http://abigailcorfman.com/OpenSorcery.html
  • http://lectronice.com/donotforget/
  • http://aliendovecote.com/uploads/twine/howlingdogs/howlingdogs.html#2o

Early this year I backed a Jane Austen style Role Playing Game game called Good Society.

I jumped at the chance to become a NPC (non player character) or in this case an NPG (non player gentry). I sent off some pictures and some descriptions, and was so surprised to get an email this weekend showing off the final card (front and back)

Basically, I’m now a Jane Austen character that people can use as a friend, romantic rival, object of affection. People will choose my card to sit in front of them while they play.

I am super pleased with how well these came out!

The artist is Aviv and the publisher of the RPG is Storybrewers.

The book and cards should be in people’s hands before Christmas, and I look forward to seeing how people like ‘Anastasia’ the ink splattered artist in their games.

The webinar software let us all down with multiple instances of frozen screen sharing, and the presenter could not seem to keep the narrative going in one direction for more than a minute, we did learn quite a bit.

If you copy an entire site in order to split apart some of its content, make sure you investigate the cache folder and remove any remnant of the previous site cache. There may be a folder for the previous site.

Otherwise, for a little period of time, you’ll be getting some strange behavior that makes it seem like the old site is still hanging around on the new install.

Even if that description didn’t make sense, if you are having strange theme behaviors that flushing the cache, rebuilding permissions and/or a restart don’t seemed to have fixed… check out the cache folder on your server. 

Additionally, if you a splitting a site into two, and intend to use both sites on the same machine, and in the same database instance(ie, two databases on the same machine), make sure you check that the copy site isn’t pointing to any shared folder on the server, ie your cache folder. If somehow, both sites are using the same cache folder, changes on one site may affect the other site.

You are better off changing your site into a multi-site instance, for Drupal 7, because that should mitigate most of these problems. Multi-sites use different cache/files directories unless explicitly sharing modules/themes/frameworks out of the sites/all folder.

#4 git loses track/won’t overwrite settings.php file. (combo drupal + git tip)

error: unable to unlink old 'sites/default/settings.php' (Permission denied)
fatal: Could not reset index file to revision 'origin'.

Repairing/resetting my mac home directory permissions seemed to fix things. ( Resolve issues caused by changing the permissions of items in your home folder )

Examples

First, check out 2 grid sites I’ve created:

• https://thegrid.ai/art-portfolio
• http://www.ghostinthewell.com

TLDR:  I’m not happy with v2. 

I’ve been working on this post for almost a year, I don’t want to bother with more screenshots or examples. v3 should be on its way shortly. I’m posting this now so I can compare my v2 thoughts vs v3. I did purchase a lifetime membership, so I haven’t given up on thegrid, fwiw.

To make my art-portfolio grid site present mostly the way I want, I’ve pretty much resorted to just importing Instagram posts.

Checkout my wishlist items for V3 on my second grid site.

~~~~~~

User Interface

The Backend User Interface is… clunky.It does look more polished than the beta version, and has some pretty animated menus, but it’s also less clear on how you and the AI work together to make a page.

!) The new site dashboard wastes a whole screen of real estate.

2) Post ordering does not place the latest post at the top, and while you can drag and drop items to move them around, I can see this easily becoming onerous with 3 dozen or so images or posts.  You can actually zoom out the thumbnail views for easier drag and dropping, but there is no only text version to help you.

A little investigation has shown that the AI does not read the content or title of your posts, and no way to force thegrid to sort items on either the backend, or exposed as a feature for the front end.  No way except to drag and drop the articles back in order.

Posts with images in them do tend to stay in the same order as listed.

Search

There is no search option for either the front or backend.

Navigation

There are more navigation varieties this time around, so that’s nice, but rarely surprising.

Some of the options are ones I would never use, so I have to keep hitting redesign until I get one that’s ok.

Typography

Typography is strange, sometimes fonts are larger when placed next to similar designed smaller fonts. This example is using 2 links to two separate pages (same thing, shown differently, beside itself)

Additionally, every page load/reload seems to suffer from a CSS Flash of Unstyled content, which means the text/page jumps around a bit until it figures out what font style/sizes should be.

Redesign Process

This whole process irks me. We’re asked a series of questions everytime we ask for a redesign.

The Layout: Do you like it?

(where 1-3 means redesign, and 4 and 5 mean…)

The color: Do you like it? 

Choosing 1-2 here will prompt you to choose another color palette

Typography:

Molly.AI is supposed to be able to identify what parts of an image are important. Faces, skylines, or text text should not have text overtop of them, similar rules apply to cropping. This seems to be hit or miss. We used to have a quick key to check to see what part of the image the AI thought was the focus.

I’d be ok if you could at least click on the text overlay and see the original, or uncropped version.

Yes, you do have options to turn off the cropping, overlays and color manipulation. I want to see theGrid do things with the design that I wouldn’t have thought of, colors, layouts, navigation.

I’ve made a wishlist of things I want Molly.AI to be able to do, and put it on my Ghost In The Well grid site, but I’m going to copy it here as well (the flexible updating wishlist will stay on that site.

But, as of now here it is:

Paging through About Face is the closest you can get to actually holding my sketchbook in your hands.

As you turn each page you’ll see both the front and the back of the portrait, where the ink and markers have bled through the paper.

Please enjoy the 43 portraits I’ve included in About Face, each one inspired by unique beautiful people who have volunteered their own photos as kindly muses via the Sktchy.com iOS app.

About face, a year of diverse portraits is available now on Amazon.com.

My goal, pay off the last of my student loans!!

Help me be debt free and get awesome original art, and the chance to win an ultra limited edition of my brand new linocut- Raven And Pomegranate!

https://squareup.com/store/staciearellano

I’ve updated my new online shoppe with linoprints ranging from $20-$80.

Every purchase is an entry to win the new full size linocut I’m working on this month! I’ll be posting progress pictures all month as I carve and start printing.

Each purchase I ship out will also get a tiny echo of the full size print (see picture in this post). You may recognize this raven from my Wisdom of Trees print, he’s graciously decided to help me reward your kindness and patronage.

Each mini print will numbered and will feature a thumbprint pomegranate.

These minis won’t be available for purchase, they are a special thank you for everyone who helps me reach my goal this month in my quest to be debt free!

Want to be part of this amazing milestone in my life?

Buy a linocut today!

 

Heartfelt thanks

I spent most of my time talking with people, meeting up with friends, checking out all the amazing art and flirting with the band. That means I got very few pictures of the event myself, but was actually engaged in experiencing it.

If you want to see more pictures of the event there are a few on Carlos’s Instagram and also a few videos of art in the space during gallery night.  Official event photos available soon.

Thanks again to 100arts for allowing me to be part of this years Gallery Night, and again to everyone who came by to say hello and see my art!

If you’re looking for a great co-working space in Madison you can join 100state and request the teal meeting room where my portraits are hanging. I hope you enjoy hanging out with them as much as I did while making them.

Please, feel free to send me pics of you taking selfies with my art in the background. Who knows, perhaps I’ll be inspired to make a little portrait from your picture, and we’ll have a little portrait-ception going on.

Here are some examples: