We have great new technology available to enhance our websites. But while theoretical articles explain well what the technologies do, we often struggle to find real use cases or details on how things worked out in actual projects.

This week I stumbled across a couple of great posts that share exactly these precious real-life insights: stories about HTTP/2 implementation, experiences from using the Cascade of CSS in large-scale projects, and insights into employing Service Worker and BackgroundSync to build solid forms.

The post Web Development Reading List #160: Real Stories About HTTP/2, Cascading Style Sheets, And Code Of Shame appeared first on Smashing Magazine.

StockJo is the starting point to a huge variety of content that is relevant to designers. It collects collections, making it some kind of super collection. Particularly for newbies, this can save a ton of time. At StockJo, you’ll find a place to go for everything the heart, or brain, desires.

StockJo: Simple Design, Solid Content

You are looking for free photos, videos, textures, mockups, fonts, sound files, vector graphics, illustrations, color palettes, small tools, tutorials, HTML templates, and other web resources? If so, Stockjo is a good landing page for you.

Created and run by the Indian agency Infiyo, the rather new offer called StockJo provides you with access to all the little helpers that might be interesting for professional designers.

Regular readers of Noupe know that, over the past years, a trend of creating new collections with free content has risen, but even frequent readers are struggling to keep track of them all. At this point, I’d like to point you to our collection post with 43 hand-picked services for free photos, which is even more extensive than StockJo’s supply regarding photography.

In return, StockJo is a lot more widespread overall and collects content related to the much wider range of topics mentioned above. Thus, you can always check StockJo first, no matter what you’re looking for.

StockJo: Category Example

There are two different ways to access the listed resources. For one, you could use the free text search, which results can be refined in a second step, by filtering the results by licenses, for example. Another way is simply looking through the categories. As of right now, this is still a valid option, as the amount of listed collections is still rather assessable.

In the categories, you’ll find lists with entries that are all linked to the category’s starting page, and also give you an idea of what to expect by providing a short description. Tags with information on the license tell you what you are allowed to do with the content. The classic heart icon lets you “like” a list entry.

StockJo: Additional Tags Inform You About the License

Unfortunately, clicking the tags leads to the 404. The same happens when trying to access the blog linked from the top navigation. Infiyo still has some homework to do here. Let’s assume that that’s only the case because StockJo is a work in progress and a fresh one.

Apart from these irregularities, StockJo is worth a bookmark and belongs into the toolbox of not only every designer but pretty much every page operator. It’s not the universal solution to all issues, but very useful nonetheless. Take a look for yourself.

In this tutorial, we’re going to take a look at Layers and Symbols in Adobe XD.

Download Adobe Experience Design CC (Adobe XD).

Read More at Everything you need to know about Layers and Symbols in Adobe XD

Indeed Prime helps tech talent such as UX/UI designers and software developers simplify their job search and land their dream job. Candidates get immediate exposure to the best tech companies with just one simple application to Indeed Prime. Companies on Prime’s exclusive platform message candidates with salary and equity upfront. The average software developer gets 5 employer contacts and an average salary offer of $125,000. Indeed Prime is 100% free for candidates – no strings attached. And when you’re hired, Indeed Prime gives you a $2,000 bonus to say thanks for using Prime! Sign up now at indeed.com/prime.

Direct Link to Article — Permalink

Apply to 100 tech companies with 1 application is a post from CSS-Tricks

The following is a guest post by Eduard Pochtar from ShiwaForce. Eduard is going to walk us through they why and how of a plugin he and his team built to process existing CSS to make a high contrast version of a web site. It involved a little thinking and a little strong arming to make it happen.

*Based on true events

It’s hard to imagine life without internet today. Many people’s lives are less or more tied with internet. Think about everything we rely on it for: communication, education, shopping, business control, home management, entertainment, etc. It’s like a world inside another world, with it’s own rules and diversity.

Around 80 million people in the EU are disabled and this number is growing. The unfortunate truth is that many of them can’t use all the opportunity of the internet, because so many of them don’t care about accessibility.

What can we do about this?

It’s a good question. We live in a time when technologies can help us to take care of people who need special care. More and more organizations, companies, even governments are getting involved to help people with disabilities.

Web Accessibility Law

Not so long ago the EU passed a law about web accessibility. This law covers public sector websites and mobile apps, like administrations, police departments, public hospitals, universities, and libraries. It will require them to be accessible for all citizens – in particular for the blind, the hard of hearing, the deaf, and those with low vision and with functional disabilities.

New rules accepted in the EU web accessibility directive are:

• All websites or web applications owned by EU-member governments must be fully accessible to people with disabilities. New websites must be accessible and existing content must be updated.
• Archival content and documents will be available on demand in accessible form.
• Government videos must be closed captioned. Live video has a window of 14 days since first broadcast to get captions.
• Online services, like paying fines or fees, will have to be accessible.
• EU government websites must indicate if (and why) parts of their website are inaccessible.
• EU member states must regularly monitor and report to both the public and the European Commission on the accessible status of their web services.

In a press release, Günther H. Oettinger, Commissioner for the Digital Economy and Society, stated:

It is not acceptable that millions of European citizens are left behind in the digital society. The agreement that we have just reached will ensure that everyone has the same opportunity to enjoy the benefits of the internet and mobile apps, to participate in society to a fuller extent and to lead a more independent life.

Echoing that sentiment, Andrus Ansip, Vice-President for the Digital Single Market, said:

Internet access should be a reality for everyone. Leaving millions of Europeans behind is not an option. Tonight’s agreement is an important step towards a Digital Single Market, which is about removing barriers so that all Europeans can get the best from the digital world.

I think it’s very important to understand that internet is the place where everyone is equal. And I think that nowadays, internet de facto should be accessible, in one or another form, for as more users as possible.

I would like to share our story about how we developed a tool that helps to develop a high contrast version of a website.

Contrast Matters

Contrast makes it easy to distinguish one thing from another. In web design, contrast usually refers to the difference between the foreground and background of text. In other words, how different are the words on the screen from the background they sit on.

Text contrast is an important accessibility criterion. When people use websites or apps, they don’t read, they scan. When most people scan or read quickly, they rely on word and character shapes rather than more explicitly conscious strategies like analyzing each letter and the order in which it appears. You’re probably doing that right now, by using good contrast text that makes those shapes easy to immediately recognize.

High Contrast

In some countries government requires from public websites special high contrast version of the website with inverted colors. You may know them by this kind of icon:

This high contrast setting benefits users with low vision or other visual disabilities.

The Challenge

Not so long ago our team has faced the project that required high contrast version. And it was a big challenge for all of us.

First of all we were digging all over the internet researching information about what is high contrast and how should it work. Unfortunately, we didn’t find enough information. Everything was very abstract and poor. But some information we did find useful. The background should be dark (black), text – opposite color of the background (white), links – yellow or green.

Some websites may even invert images, some may completely remove images from high-contrast version.

CSS Preprocessors

One way to build a high contrast version of a site is by using preprocessors like Less, Sass, or Stylus. Preprocessors also give us a lot of ways to compile two versions of website. For example it can be variables:

$high-contrast: true;
$background-color: #fff;
$background-high-contrast-color: #000;
$text-color: #000;
$text-high-contrast-color: #fff;

body {
  …
  @if $high-contrast == true {
    background-color: $background-high-contrast-color;
  } else {
    background-color: $background-color;
  }
  …
}
…
.text {
  @if $high-contrast == true {
    color: $text-color;
  } else {
    color: $text-high-contrast-color;
  }
}

This might make our CSS a bit complicated and hard to maintain. Here’s another way, @mixins:

$high-contrast: true;
$background-color: #fff;
$background-high-contrast-color: #000;
$text-color: #000;
$text-high-contrast-color: #fff;

@mixin background-color {
  @if $high-contrast == true {
    background-color: $background-high-contrast-color;
  } @else {
    background-color: $background-color;
  }
}

@mixin text-color {
  @if $high-contrast == true {
    color: $text-high-contrast-color;
  } @else {
    color: $text-color;
  }
}

body {
  …
  @include background-color;
  …
}
…
.text {
  @include text-color;
}

This method is a little bit better, but still has disadvantages. There are tons of other ways how to develop high contrast version. Each one has its own advantages and disadvantages.

But what if you don’t use a preprocessor? Or what if your project is already under development and variables or mixins are not used properly or missing at all?

We have faced this problem. While one part of the team was researching high contrast and ways to integrate it into the development process, another part of the team already was developing the project. Plus, unfortunately, they didn’t use a preprocessor at all.

A Plugin Idea!

Fortunately for us, we already knew about PostCSS and all its possibilities. The great thing about PostCSS for us was that we could just modify or replace those properties or values that we needed, everything else could stay untouched. Isn’t that great? This is why we decided to create the PostCSS High Contrast plugin.

Developing The PostCSS Plugin

At first, it seemed like one more challenge for us. No one had no idea how to write a PostCSS Plugin. We were surprised how easy it was. PostCSS has great documentation and community and this is very helpful especially for newbies like us.

After an hour of looking through PostCSS documentation, we were able to start with our plugin. PostCSS has really great API. Look at these few lines of js:

css.walkRules( function (rule) {
  if (rule.selector === 'body') {
    // do something…
  }
});

They speak for themselves!

But still, we faced a bunch of other problems:

• What colors to change and what colors leave untouched?
• What if colors are inherited from parent elements?
• What if colors are already high contrast?
• What if it is complex element, which is not that easy to modify, change it’s color or background-color?

We had a lot of questions. We didn’t know how to move forward.

First of all we had to decide what colors to change and what colors leave untouched. We tried to find out if each color is high contrast enough or not by checking it’s brightness and saturation:

 var declColor = color(decl.value).hsl();    
if (declColor.s > 50 && declColor.l > 50){
  decl.value = '#000';
}

But after some testing of this approach, we decided it didn’t fit very well for us. It was very complicated, sometimes it didn’t work as we expected, and it took more time to compile our CSS. We realized that the best way would be just to replace all the colors no matter what:

if (decl.prop === 'background-color') {
  decl.value = #000;
}

if (decl.prop === 'color') {
  decl.value = #fff;
}

This seemed to work great. After celebrating our another small win, we noticed that not all elements were affected. Investigation of the problem showed that not all elements have color properties. CSS inheritance! To solve this issue we decided to create “aggressive mode”.

“Aggressive mode” accepts a list of selectors that will get color property no matter what.

postcss([
  require('postcss-high-contrast')({
    aggressiveHC: true,
    aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
    aggressiveHCCustomSelectorList: ['div', 'span'],
  })
])

After few more different tests, it seemed that our plugin was finished.

How does it work?

Before I finish our story, I would like to describe how to use PostCSS High Contrast Plugin. I hope you are already familiar with PostCSS and its ecosystem. If not check out PostCSS website. No matter what your preprocessor preference, you can additionally use PostCSS. This means that PostCSS High Contrast plugin will work with any CSS.

Here’s an example configuration:

postcss([
  require('postcss-high-contrast')({
    aggressiveHC: true,
    aggressiveHCDefaultSelectorList: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'li', 'th', 'td'],
    aggressiveHCCustomSelectorList: ['div', 'span'],

    backgroundColor: '#000',
    altBgColor: '#fff',

    textColor: '#fff',

    linkColor: '#fcff3c',
    linkHoverColor: '#fcff3c',

    borderColor: '#fff',
    disableShadow: true,

    imageFilter: 'invert(100%)',
    imageSelectors: ['img'],

    removeCSSProps: false,
    CSSPropsWhiteList: ['background', 'background-color', 'color', 'border', 'border-top', 'border-bottom',
      'border-left', 'border-right', 'border-color', 'border-top-color', 'border-right-color',
      'border-bottom-color', 'border-left-color', 'box-shadow', 'filter', 'text-shadow']
  })
])

Normal mode example:

/* Before */
body {
  background: #fff;
  color: #000;
}

a {
  color: #0b39e1;
}

/* After */
body {
  background: #000;
  color: #fff;
}

a {
  color: #fcff3c;
}

Aggressive mode example:

/* Before */
h1 {
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}

p {
  font-size: 48px;
  margin: 0 0 24px;
}

/* After */
h1 {
  color: #fff;
  font-size: 48px;
  margin: 0;
  padding: 0 24px;
  width: 100%;
}

p {
  color: #fff;
  font-size: 48px;
  margin: 0 0 24px;
}

The End

It was great experience for us to develop the PostCSS High Contrast Plugin. I would like to thank the PostCSS team for the great tool, documentation, and API. We never imagined it would be so easy.

We live in a wonderful time. We have so many technologies that help us everyday and the internet is one of the most important. So let’s try to make it more accessible to everyone.

High Contrast, A PostCSS Plugin Story* is a post from CSS-Tricks