couldnotfindonline-blog

[couldnotfindonline-blog]

Accessible color list for your application (colorblind friendly colors)

I was looking for color combinations for my next application design project and I came across this interesting paper: ‘Points of view: Color blindness’ by Bang Wong that gives you some rules for picking the right color scheme that when used wisely, would cater to all audiences. Presenting a set of colors that is unambiguous both to colorblinds and non-colorblinds

Fig. Colorblind barrier-free color pallet

This is a proposal of color pallet that is 1: unambiguous both to colorblinds and non-colorblinds, 2: with vivid colors so that color names are easy to identify, 3: can be printable with similar color both on screen and when printed.

For red, vermilion is used since it is recognizable also to protanopes.

Colors between yellow and green are all avoided, since they are indistinguishable with yellow and orange.

For green, bluish green is chosen so that it won't be confused with red or brown.

Since violet is close to blue and appear the same to colorblinds, reddish purple is chosen.

Between vermilion and yellow, three colors with different apparent intensity is selected.

Sky blue and blue are chosen so that they are distinguishable with there difference in brightness and saturation.

Even for non-coloblinds, thin lines and small characters in blue and yellow are hard read. For thin lines and small objects, use darker blue and orange is preferable to sky blue and yellow.

When combining colors from this pallet,

Use "warm" and "cool" colors alternatively.

When using two warm colors or two cool colors, put distinct differences in brightness or saturation.

Avoid combination of colors with low saturation or low brightness.

Hex codes for these color blind friendly colors (sorted by hue) are:

Black #000000

Blue #0072b2

Sky Blue #56b4e9

Reddish purple #cc79a7

Bluish Green #009e73

Vermillion #d55e00

Orange #e69f00

Yellow #f0e442

[couldnotfindonline-blog]

[SOLVED] Setting up sass and Browsersync with Gulp

My folder structure is as follows:

index.html css - styles.css sass - categories - sass partial(s) - styles.scss gulpfile.js package.json

This task is for running sass and browsersync with gulp: Goes into gulpfile.js

// gulp var gulp = require('gulp'); // sass var sass = require('gulp-sass'); var autoprefixer = require('gulp-autoprefixer'); // browsersync var browserSync = require('browser-sync'); var reload = browserSync.reload; // define browsersync task gulp.task('browser-sync', function() { browserSync({ server: { baseDir: "." } }); }); // define browser reload task gulp.task('bs-reload', function () { browserSync.reload(); }); // // define styles task gulp.task('styles', function () { gulp.src('sass/**/*.scss') // compile SASS to CSS .pipe(sass({ outputStyle: 'compressed', includePaths: ['node_modules/susy/sass'] }).on('error', sass.logError)) // add vendor prefixes .pipe(autoprefixer({ browsers: ['last 30 versions'], cascade: false })) // save the file to the css directory .pipe(gulp.dest('css')) // send output to all browsers .pipe(browserSync.stream()); }); // run tasks: type gulp in browser gulp.task('default', ['browser-sync'], function(){ gulp.watch("sass/**/*.scss", ['styles']); gulp.watch("*.html", ['bs-reload']); });

Type 'gulp' on terminal and voila

[couldnotfindonline-blog]

[SOLVED] Checking for UC Browser compatibility

Being from India and considering the use of the UC browser is so widespread, I was looking for compatibility of certain CSS properties with the UC browser. While canIuse is my goto for other browsers, they do not readily display UC browser on the list.  

Solution

If you’re designing a website for India, make sure you activate the UC browser option on canIuse. You will find it under settings near the CanIuse search bar 

[couldnotfindonline-blog]

[SOLVED] Google drive giving ‘Failed - Forbidden’ during download

Problem

Someone shared an awesome Hoola Hopping video with me on Google drive, but when I tried to preview it on the browser, it gave me an error and when I downloaded it says failed - forbidden!  I was using the browser version of Google Drive.

Solution

What finally worked for me: When I downloaded the google drive desktop app and added the video to my drive, it downloaded to my computer without any effort