Style scoping is the idea that you can select an element anywhere in your document to serve as a point of reference as you write styles. Originally the idea was for containment purposes, but with scoped styles and the addition of any kind of responsive query you suddenly have a very powerful new way to build responsive layouts!

You might describe "element queries" as "scoped styles with a responsive condition".

How can we use Style Scoping

Currently there isn't enough browser support (or even an approved spec) for style scoping using CSS alone, so most approaches involve either a build step (preprocessing your CSS) or use a JavaScript plugin. The plugin I use to do this is EQCSS.

If you think of a web page, everything in your document is a child of the HTML element. When you write media queries to add responsive styles, it always applies to the entire document:

  @media (min-width: 500) {
  body {
    background: lime;
  }
}

This means:

When the HTML element is at least 500px wide, make the body element lime.

This is functionally equivalent to the following element query:

  @element 'html' and (min-width: 500px) {
  body {
    background: lime;
  }
}

This could be interpreted the same way:

When the html element is at least 500px wide, make the body element lime.

In our second example, the element query, we could refer to html as our “scoped element”, or the element that is in the “scope”. The fun part about scoped styles is that you are able to scope styles to any element in your document this way!

How would we describe this kind of a query:

  @element '#sidebar' and (min-width: 500px) {
  body {
    background: lime;
  }
}

When the #sidebar element is at least 500px wide, make the body element lime

This is amazing! But let's suppose for a second that instead of having one #sidebar on the page we have many .widget elements - how could we write a style for them?

  @element '.widget' and (min-width: 200px) {
  .widget h2 {
    font-size: 20pt;
  }
}

When any element with a class of .widget on the page is at least 200px wide, make any h2 inside any .widget on the page 20pt

The problem with this rule is when you have more than one .widget on the page with different widths. Any time any .widget element meets the condition, it's applying that CSS rule to all .widget h2 elements. 🤔 Probably not what we want in most cases!

The solution to this is to use a special selector, $this, which only works in EQCSS inside of a scoped style. Anywhere $this is present inside of a scoped style it refers to only the scoped element. This means a rule like this would work for us:

  @element '.widget' and (min-width: 200px) {
  $this h2 {
    font-size: 20pt;
  }
}

When any element with a class of .widgeton the page is at least 200px wide, make any h2 element inside the .widget element that matches the condition 20pt

In most cases this is what we want, but it's nice to be able to set styles on any element in your document from within a scoped style too.

Here's another explanation of hot $this affects styles:

  @element 'div' and (min-width: 500px) {
  $this { background: red; }
  /* When any div is <500px, make that div red */

  div { background: lime }
  /* When any div is <500px, make all divs on the page lime */

  $this div { background: gold }
  /* When any div is <500px, make all divs inside the scope gold */
}

What is Style Scoping useful for?

There are many potential uses for style scoping, so I'll just list the ones that have proven the most useful to me over the past two years:

Style scoping makes it easy to 'quarantine' your styles

When building modules, embeddable widgets, or adding new code to old sites it can be nice to have the peace of mind knowing that 100% of the new styles you are adding to the website are contained within the scope of the element they apply to, and will not be applying to anything else on the page.

Selectively quarantining your styles

Tools that build things like HTML5 animations sometimes have a feature where they can either allow your animation to inherit styles on the page, or be 100% self-contained. With style scoping you have total control over how permeable you want your styles to be. A style like this would allow its children to inherit styles from the page it's embedded on:

  @element '#animation' {}

And if we wanted to ensure that nothing from the page gets inherited, we could do something like this (or include any CSS reset):

  @element '#animation' {
  $this,
  $this *,
  $this :before,
  $this :after {
    all: initial !important;
  }
}

This would reset (in most browsers) all styles for the scoped element and all of the elements it contains, ensuring that only our styles inside the scoped style apply to its element. In the past without style scoping, we used to isolate animations, widgets, and embed inside iframe elements, but this cut them off entirely from the pages they were displayed in, sometimes had cross-origin issues, and it wasn't possible for the embedded content and the page to interact.

Now with style scoping we can have the same styling flexibility as embeds in an iframe with better interactivity with the pages it's embedded on.

Writing Element Queries

When you add responsive conditions to scoped styles you can build responsive websites without using @media queries. This is something that has proven really useful for building layouts as self-responsive modules that all fit into a basic page layout. These modules can be displayed in all kinds of different websites, with all sorts of different visual styles and branding, and you never have to fiddle with @media query breakpoints when moving the modules around from layout to layout since they are based on the properties of the elements themselves, not based on the dimensions or properties of the browser and viewport.

Some of the responsive conditions you can add to scoped styles in EQCSS include: min-height, max-height, min-width, max-width, min-characters, max-characters, min-lines, max-lines, min-children, max-children, min-scroll-y, max-scroll-y, min-scroll-x, max-scroll-x, orientation, min-aspect-ratio, max-aspect-ratio which make this sort of responsive styling a lot more flexible than what @media queries can do.

Conclusion

If you haven't experimented with style scoping yet, it's a very exciting concept and usable today in all browsers via JS plugins. Here are a few demos from Codepen that are made possible by style scoping. View them, fork them, play around with them, use them, and enjoy!

• Nested Element Queries:

• Order form with Element Queries:

• Testimonials block:

• Responsive Table Layouts:

• Element Query Layout Demo:

Happy Hacking!

Some people have difficulties multiplying or dividing numbers. Others find it hard to add or subtract. Doing simple math without a calculator or a pen and paper can become very difficult. I want to show some small tricks that will help your brain understand simple math. I am writing this for fun, there is no study or any proof behind this. It's just what my brain does on a daily basis. Some tricks were taught at school, others were not accepted there and often caused me to fail because they were too fast or different. Due to that fact I never really liked math. I am also not really good at math, which might or might not be related to this disappointment. Most of the things I know today are self taught, math is just an example.

Let's take a look at some simple algebra.

  a * 9 = b
2 * 9 = 18

This multiplication might seem very easy to a lot of people but for others there is no logic and therefore they will have problems solving this example. While 2 * 9  might be easy to calculate beacuse it is no different than 9 + 9 , higher numbers might become more difficult to solve.

There are several helpers we can use to "cheat" by using a different method. Everybody will develop their own method based on those that seem easier.
The easiest multiplication is n * 1, beacuse it is the same as n.
Ranked 2nd is n * 10, because we simply need to add a 0 to the end.
Since the difference from 9 and 10 is 1, we can simply multiply by 10 and then subtract n, instead of the more complicated original task.

  n * 9 = n * 10 - n 
/* Examples */
1 * 9 = 1 * 10 - 1 = 10 - 1 =  9
2 * 9 = 2 * 10 - 2 = 20 - 2 = 18
...
5 * 9 = 5 * 10 - 5 = 50 - 5 = 45
...
8 * 9 = 8 * 10 - 8 = 80 - 8 = 72
9 * 9 = 9 * 10 - 9 = 90 - 9 = 81

3 * 9 
= 3 * 10 - 3 
= 30 - 3 
= 27

This method will help anybody that has problems with multiplication, at least for any number up to 10. Higher numbers get more complicated.

  2834 * 9
= 2834 * 10 - 2834
= 28340 - 2834

I am not going to solve this task right now since it's purpose is to show that things can get complicated. People that are fast at subtracting have a huge advantage here. Let's solve this using a method that focuses on the 10.

  2834 * 9
= 2834 * 10 - 2834
= 2000 * 10 - 2000
+  800 * 10 -  800
+   30 * 10 -   30
+    4 * 10 -    4
= 20000 - 2000
+  8000 -  800
+   300 -   30
+    40 -    4
= 18000 
+  7200 
+   270 
+    36
= 25506

While this works for some people, others will have problems adding 4 numbers, even though those were easy to solve. I am pretty sure that a lot of people will have learned something similar in school. In Germany a common calculation is n * 1.19, because 19% is the tax rate in Germany. So let's remember what we just looked at and then get back to our task.

  n * 1.19
= n * 1
+ n * 0.1
+ n * 0.09
= n 
+ n / 10
+ (n * 10 - n) / 100

  8 * 1.19

= 8 * 1
+ 8 * 0.1
+ 8 * 0.09

= 8 
+ 8 / 10
+ (8 * 10 - 8) / 100 

= 8
+ 0.8
+ (80 - 8) / 100

= 8.8
+ 72 / 100

= 8.8
+ 0.72

= 9.52

As you can see I only solved one step per line. There are several reasons to do this especially while training or learning.

• allow the brain to remember the steps
• reduce risks of wrong solutions

The further you break down a task the easier the each step gets but you will have to add more numbers at the end. At least we now know, that we can use 10, to help us multiply by numbers that consist of the digits 0, 1 or 9.
So what about other numbers like 7 or 8? Solving n * 8 is fairly simply and not much different than n * 9.

  n * 8 = n * 10 - n * 2
7 * 8 
= 7 * 10 - 7 * 2
= 70 - (7 + 7)
= 70 - 14
= 70 - 10 - 4
= 60 - 4
= 56

Here we can make use of the trick n * 2 = n + n It does get a little harder since we might have to subtract a two digit number from another two digit number but at least the higher number is divisable by 10. To get around the more complicated subtraction I simply broke it down into easier steps. But there are more methods to solve this. As mentioned before, different people prefer different methods and as long as the answer is correct everything is acceptable. Sadly this was something my teachers did not like and I often got 0 points for correct solutions because the method was not what we learned in school.

  7 * 8 
= 7 * 10 - 7 * 2
= 70 - 7 - 7
= 63 - 7
= 63 - 13 + 13 - 7
= 50 + 6
= 56 

  7 * 8 
= (7 - 5) * 8 + 5 * 8
= 2 * 8 + 5 * 10 - 5 * 2
= 8 + 8 + 50 - 10
= 16 + 40
= 56

  7 * 8 
= 7 * 9 - 7
= 7 * 10 - (7 + 7)
= 70 - 14
= 70 - 10 - 4
= 60 - 4
= 56

As you can see there are many ways to solve this problem and it really depends on the way your brain works, when it comes to math. Having learned the trick about 9 and 10 helps a lot along the way and will train our brain into using these numbers whenever we see a number close to them. Let's get back to the problem of solving a * 7 = b. We can look at the methods we have used above but will soon realize that we are just starting to turn a lot of steps into additions or subtractions.

  n * 7 
= n * 8 - 7 
= n * 9 - 7 - 7 
= n * 10 - 7 - 7 - 7
= n * 10 - 7 * 3

None of the above solutions make me happy or allow some kind of logic to form. It just seems overly complicated and time consuming. Since 7 is actually closer to 5, than 10, let's take a look at how easy it is to solve n * 5

  a * 5 = b

6 * 5 
= 6 * 10 / 2
= 60 / 2
= 30

My brain immediately used 10 and 2, since I learned the advantages of using these numbers. Your brain might work different and find a better solution for n * 5 but let's get back to our problem.

  6 * 7
= 6 * 2 + 6 * 5
= 6 + 6 + 6 * 10 / 2
= 12 + 60 / 2
= 12 + 30
= 42

I think that worked out pretty nicely. We used the same methods as before, by breaking everything down, so we can use 10 and 2. The rest of the numbers should get easier since we already covered the highest numbers. I personally have some difficulties multiplying by 3, because my brain automatically wants to add the same number three times. The reason for that is, that it seems a lot easier than breaking the task down into smaller steps. If we train our brain to do really fast math using 2 and 10, then this is false, because our brain will learn to automate this and simply provide an answer.

  n * 3 
= n + n + n
= n * 5 - n * 2
= n * 10 / 2 - (n + n)

  6 * 3
= 6 * 5 - 6 * 2
= 6 * 10 / 2 - (6 + 6)
= 60 / 2 - 12
= 30 - 10 - 2
= 20 - 2
= 18

Remember this is just one example of cheating to solve this task. Another one would be to turn the numbers around and see if that makes more sense. In my case it does, since my brain is pretty fast at multiplying by 5 and an addition at the end is really simple.

  6 * 3
= 3 * 6
= 3 * 5 + 3
= 3 * 10 / 2 + 3
= 30 / 2 + 3
= 15 + 3
= 18

This is something you should always do where you see fit. I tend to multiply by bigger single-digit numbers and add or subtract smaller numbers but this is just the way it works for me.

  9 * 3 
= 3 * 9 
= 3 * 10 - 3
= 30 - 3
= 27

  7 * 4 
= 4 * 7
= 4 * 5 + 4 * 2 
= 4 * 10 / 2 + 4 + 4
= 40 / 2 + 8
= 20 + 8
= 28

  21 * 83
= 83 * 21
= 80 * 20 + 80 + 3 * 20 + 3
= 8 * 10 * 2 * 10 + 80 + 3 * 2 * 10 + 3
= 8 * 2 * 10 * 10 + 80 + (3 + 3) * 10 + 3
= (8 + 8) * 100 + 80 + 6 * 10 + 3

= 16 * 100 
+ 80 
+ 60
+ 3

= 1600 
+   80 
+   60 
+    3
= 1743

Sometimes solutions are very similar but use a completely different pattern. This is where our methods will differ. While one person will use example 1, somebody else might find this way too complicated and just solve the task with less steps as seen in example 2.

  9 * 5
= 5 * 9
= 5 * 10 - 5
= 50 - 5
= 45

  9 * 5
= 9 * 10 / 2
= 90 / 2
= 45

Conclusion

Math is about logic. The more we train our brains to use helpers like the examples above, the faster it will be able to process tasks without the use of a calculator pen and paper.

Smaller steps are easier to understand and or brain will automate these processes over time.
Using the numbers 2 and 10 allows us to create a pattern and therefore see a logic in numbers that made no sense before.

Often talents are not discovered because we are too focused on "the right way", some will still rise but we are wasting a lot of amazing ideas by not accepting or respecting what others have tried.

This could be your first step into getting the hang of math and making a good impression the next time you invite someone to a burrito and lemonade from that van around the corner.

I hope you enjoy this article and maybe this even encourages you to do more mental arithmetic. If you are interested in thinking patterns you should search for "Daniel Tammet" who explains how his brain recognizes numbers as unique shapes allowing him to multiply large numbers in a few seconds and therefore faster than typing it into a calculator. He also applies similar patterns to learning languages. A true genius and someone to learn from and listen to.

When I started writing this article I was fully unaware of the power the numbers 2 and 10 have when multiplying. This is something I just realized, while writing this article, even though my brain has been doing it for a long time.

The demo on MDN shows how gnarly it can blast out a circle:

It's a filter that really looks like movement but it doesn't actually move. I was playing with a demo that used a turbulence filter the other day that was applied to the entire screen, and noticed as I resized the browser window that the elements under that filter were kind of waving. Because, I suppose, the filter was applying to different areas of the element.

I figured we could exploit that idea a little by animating padding and translate, keeping the elements in the same place but ultimately moving the filter. Check it:

Uncomment the last few lines of CSS to sneak a peak into the animation that is happening to make it work.

Over the years we have worked with different frameworks, to add basic layout or themes to our projects. These so called "boilerplates" are often very detailed and deliver quite some weight.

The goal of a framework is, to speed up the development process, while delivering the best compatibility. The drawback is a big code base. Since frameworks are often modular and allow configuration, the integration can take longer than expected. Extra steps might be required, when you want to customize the framework or only need a small part of it.

Who uses bootstrap anymore?

Thankfully, a lot of developers have started writing their own boilerplates. Some are based on popular frameworks, others are written from scratch but they usually have one thing in common. The frameworks deliver static CSS and require a preprocessor, to change attributes.

A simple grid framework might look something like this:

CSS framework

  $columns: 12;
$gutter: 12px;
$padding: 10px;

.column {
  flex-basis: calc(100% / #{$columns});
  margin: 0 $gutter;
  padding: 0 $padding;

  @for $i from 2 through 12 {
    &._#{$i} {
      flex-basis: calc(100% / #{$columns * $i});
    }
  }
}

.grid, .row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0 ($padding + $gutter) * -2;
}

Usage

  <div class="grid">
  <div class="column _4"></div>
  <div class="column _4"></div>
  <div class="column _2"></div>
  <div class="column _2"></div>
</div>

To change any attribute in this framework, we need to compile a new version. Using CSS variables, we don't need this step and can remove a majority of the code.

Let's look at something very similar using CSS variables.

CSS framework

  :root {
  --columns: 12;
  --gutter: 12;
  --padding: 10;
}

.column {
  --colspan: 1;
  flex-basis: calc(100% / var(--columns) * var(--colspan));
  margin: 0 calc(var(--gutter) * 1px);
  padding: 0 calc(var(--padding) * 1px);
}

.grid, .row {
  display: flex;
  flex-wrap: wrap;
}

.row {
  margin: 0 calc((var(--gutter) + var(--padding)) * -1px);
}

Usage

  <div class="grid">
  <div class="column" style="--colspan: 4"></div>
  <div class="column" style="--colspan: 4"></div>
  <div class="column" style="--colspan: 2"></div>
  <div class="column" style="--colspan: 2"></div>
</div>

As you can see I chose to set the colspan as an inline style instead of giving the element a classname. There are three reasons for this choice.

1. inline styles allow a real scope
2. the cascade will break the grid logic
3. no cascading (unreliable) classnames (less code)

Writing a lightweight grid framework

Let's take the code from above and think about improvement. Both, the SCSS version and the CSS version produce the same logic but our plain CSS version does not need to be recompiled. We can simply import it and overwrite the :root variables. This is where the cascade comes in handy.

  @import "path/to/grid.css";
:root {
  --gutter: 10;
  --padding: 10;
}

Nesting grids

The examples above follow a very simple logic.

1. .grid provides the outer element
2. .column defines the width of an element relative to its parent
3. .row opens a new grid and resets the gutter and padding.

This means, if we have a grid inside a column with a width of 4, we are actually allowing our grid to be split into 48 columns. Often this is not what we are aiming for

The code below will probably seem familiar.

  <div class="grid">
  <div class="column _12"> 12 columns </div>
  <div class="column _6"> 6 columns</div>
  <div class="column _6">
    <div class="row">
      <div class="column _12"> 6 columns</div>
      <div class="column _6"> 3 columns</div>
      <div class="column _6"> 3 columns</div>
    </div>
  </div>
</div>

You might agree, that this can cause layout issues and there is no real solution to this problem. We have accepted this issue and learned to use grids in this way.

CSS variables can be a big help here. By simply adding one line to our CSS, we can tell a row how many columns are available. This is something that would usually require javascript or large amounts of code and configuration.

  .row {
  --columns: var(--colspan);
}

We can now define columns relative to the outer .grid instead of the parent element.

  <div class="grid">
  <div class="column" style="--colspan: 12"> 12 columns </div>
  <div class="column" style="--colspan: 6"> 6 columns</div>
  <div class="column" style="--colspan: 6">
    <div class="row">
      <div class="column" style="--colspan: 6"> 6 columns</div>
      <div class="column" style="--colspan: 3"> 3 columns</div>
      <div class="column" style="--colspan: 3"> 3 columns</div>
    </div>
  </div>
</div>

Minus minus grid

A while ago I created a very similar grid, which is available on github and npm.

The name is obviously a pun ✨🦄✨

Minus minus grid

--grid
minus-grid

This grid offers some extra features and handles the entire logic including responsive behavior. If you are interested you should give it a try. Just include this code in your next pen:

  @import "https://cdn.rawgit.com/pixelass/minus-grid/v1.2.0/dist/index.css";

.grid {
  --column-margin: 5;
  --column-padding: 5;
}

Conclusion

CSS variables are very powerful and offer some logic we haven't been able to use until now. I am very excited to see how variables will influence open source projects and frameworks.

Before attempting to make use of this technique check the browser support: http://caniuse.com/#feat=css-variables

Browser support (time of writing)

Edge is working on the feature.

One fairly straightforward approach is to use JavaScript or a library such as jQuery to help trap events and make updates accordingly. Of course, this will result in a lot of additional code to maintain.

Another approach is to use Knockout. Developed by Steve Sanderson from Microsoft and used by Microsoft in products such as the Azure portal, Knockout is a library that helps create rich experiences by mapping representation of data to a data model. This is accomplished through declarative binding of data to elements, along with dependency tracking for real-time updates to UI page elements

Knockout utilizes the MVVM architectural pattern and has three components:

• The Model and View Model defined in JavaScript
• The View and bindings declared in HTML
• Databinding the View Model and View in JavaScript

In some ways, you can think of databinding in Knockout as an automated alternative to using jQuery when it comes to filling in certain values and form fields arranged on a page. And Knockout provides precise control of what can be observed and what should not. These observables are the core of what Knockout uses to track changes and reflect updates automatically.

Using Knockout

To get started using Knockout, be sure to include the library.

From there, define a View Model via JavaScript with some observables…

  var ViewModel = function() {
  var text = ko.observable("");
}

Then, bind the View Model...

  var VM = new ViewModel();

ko.applyBindings(VM);

And finally, declare the observables in your HTML View…

  <p>The text is: <span data-bind="text: text"></span></p>

Things to Keep in Mind with Knockout

First, remember that observables in Knockout are functions, so be sure to reference them appropriately.

  var text = ko.observable("");

// wrong way
var greeting = "Hello" + text;

// correct way
var greeting = "Hello" + text();

Second, it's a good practice to set the DOM element in the second parameter when applying bindings. This helps with having multiple views on a single page.

  <div id="greeting">
  <p><span data-bind="text: greeting</span></p>
</div>

  // explicit binding to DOM element
var VM = new ViewModel();

ko.applyBindings(VM, document.getElementById("greeting");

See the following example for more ways to use Knockout… http://codepen.io/technoloG/pen/raZWdG

As powerful as it is, Knockout is just another library and not a full-fledged framework. Its high-level solution to databinding plays nicely with other low- and high-level libraries in a Modern Web project. Depending on your project's needs, Knockout can be as indispensable as Bootstrap when building a Modern Web Application. Add it to the list of must-have libraries in your web development tool belt!

URL: http://knockoutjs.com/

It took me a few attempts at using Redux before it clicked, so I thought I'd write down the process of converting an existing application that fetches JSON to use Redux and Redux Thunk. If you don't know what Thunk is, don't worry too much, but we'll use it to make asynchronous calls in the "Redux way".

This tutorial assumes you have a basic grasp of React and ES6/2015, but it should hopefully be easy enough to follow along regardless.

The non-Redux way

Let's start with creating a React component in components/ItemList.js to fetch and display a list of items.

Laying the foundations

First we'll setup a static component with a state that contains various items to output, and 2 boolean states to render something different when it's loading or errored respectively.

  import React, { Component } from 'react';

class ItemList extends Component {
    constructor() {
        super();

        this.state = {
            items: [
                {
                    id: 1,
                    label: 'List item 1'
                },
                {
                    id: 2,
                    label: 'List item 2'
                },
                {
                    id: 3,
                    label: 'List item 3'
                },
                {
                    id: 4,
                    label: 'List item 4'
                }
            ],
            hasErrored: false,
            isLoading: false
        };
    }

    render() {
        if (this.state.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.state.isLoading) {
            return <p>Loading…</p>;
        }

        return (
            <ul>
                {this.state.items.map((item) => (
                    <li key={item.id}>
                        {item.label}
                    </li>
                ))}
            </ul>
        );
    }
}

export default ItemList;

It may not seem like much, but this is a good start.

When rendered, the component should output 4 list items, but if you were to set isLoading or hasErrored to true, a relevant <p></p> would be output instead.

Making it dynamic

Hard-coding the items doesn't make for a very useful component, so let's fetch the items from a JSON API, which will also allow us to set isLoading and hasErrored as appropriate.

The response will be identical to our hard-coded list of items, but in the real world, you could pull in a list of best-selling books, latest blog posts, or whatever suits your application.

To fetch the items, we're going to use the aptly named Fetch API. Fetch makes making requests much easier than the classic XMLHttpRequest and returns a promise of the resolved response (which is important to Thunk). Fetch isn't available in all browsers, so you'll need to add it as a dependency to your project with:

  npm install whatwg-fetch --save

The conversion is actually quite simple.

1. First we'll set our initial items to an empty array []

2. Now we'll add a method to fetch the data and set the loading and error states:

   fetchData(url) {
       this.setState({ isLoading: true });
   
       fetch(url)
           .then((response) => {
               if (!response.ok) {
                   throw Error(response.statusText);
               }
   
               this.setState({ isLoading: false });
   
               return response;
           })
           .then((response) => response.json())
           .then((items) => this.setState({ items })) // ES6 property value shorthand for { items: items }
           .catch(() => this.setState({ hasErrored: true }));
   }
   

3. Then we'll call it when the component mounts:

   componentDidMount() {
       this.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
   }
   

Which leaves us with (unchanged lines omitted):

  class ItemList extends Component {
    constructor() {
        this.state = {
            items: [],
        };
    }

    fetchData(url) {
        this.setState({ isLoading: true });

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                this.setState({ isLoading: false });

                return response;
            })
            .then((response) => response.json())
            .then((items) => this.setState({ items }))
            .catch(() => this.setState({ hasErrored: true }));
    }

    componentDidMount() {
        this.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
    }

    render() {
    }
}

And that's it. Your component now fetches the items from a REST endpoint! You should hopefully see "Loading…" appear briefly before the 4 list items. If you pass in a broken URL to fetchData you should see our error message.

However, in reality, a component shouldn't include logic to fetch data, and data shouldn't be stored in a component's state, so this is where Redux comes in.

Converting to Redux

To start, we need to add Redux, React Redux and Redux Thunk as dependencies of our project so we can use them. We can do that with:

  npm install redux react-redux redux-thunk --save

Understanding Redux

There are a few core principles to Redux which we need to understand:

1. There is 1 global state object that manages the state for your entire application. In this example, it will behave identically to our initial component's state. It is the single source of truth.
2. The only way to modify the state is through emitting an action, which is an object that describes what should change. Action Creators are the functions that are dispatched to emit a change – all they do is return an action.
3. When an action is dispatched, a Reducer is the function that actually changes the state appropriate to that action – or returns the existing state if the action is not applicable to that reducer.
4. Reducers are "pure functions". They should not have any side-effects nor mutate the state – they must return a modified copy.
5. Individual reducers are combined into a single rootReducer to create the discrete properties of the state.
6. The Store is the thing that brings it all together: it represents the state by using the rootReducer, any middleware (Thunk in our case), and allows you to actually dispatch actions.
7. For using Redux in React, the <Provider /> component wraps the entire application and passes the store down to all children.

This should all become clearer as we start to convert our application to use Redux.

Designing our state

From the work we've already done, we know that our state needs to have 3 properties: items, hasErrored and isLoading for this appliation to work as expected under all circumstances, which correlates to needing 3 unique actions.

Now, here is why Action Creators are different to Actions and do not necessarily have a 1:1 relationship: we need a fourth action creator that calls our 3 other action (creators) depending on the status of fetching the data. This fourth action creator is almost identical to our original fetchData() method, but instead of directly setting the state with this.setState({ isLoading: true }), we'll dispatch an action to do the same: dispatch(isLoading(true)).

Creating our actions

Let's create an actions/items.js file to contain our action creators. We'll start with our 3 simple actions.

  export function itemsHasErrored(bool) {
    return {
        type: 'ITEMS_HAS_ERRORED',
        hasErrored: bool
    };
}

export function itemsIsLoading(bool) {
    return {
        type: 'ITEMS_IS_LOADING',
        isLoading: bool
    };
}

export function itemsFetchDataSuccess(items) {
    return {
        type: 'ITEMS_FETCH_DATA_SUCCESS',
        items
    };
}

As mentioned before, action creators are functions that return an action. We export each one so we can use them elsewhere in our codebase.

The first 2 action creators take a bool (true/false) as their argument and return an object with a meaningful type and the bool assigned to the appropriate property.

The third, itemsFetchSuccess(), will be called when the data has been successfully fetched, with the data passed to it as items. Through the magic of ES6 property value shorthands, we'll return an object with a property called items whose value will be the array of items;

Note: that the value you use for type and the name of the other property that is returned is important, because you will re-use them in your reducers

Now that we have the 3 actions which will represent our state, we'll convert our original component's fetchData method to an itemsFetchData() action creator.

By default, Redux action creators don't support asynchronous actions like fetching data, so here's where we utilise Redux Thunk. Thunk allows you to write action creators that return a function instead of an action. The inner function can receive the store methods dispatch and getState as parameters, but we'll just use dispatch.

A real simple example would be to manually trigger itemsHasErrored() after 5 seconds.

  export function errorAfterFiveSeconds() {
    // We return a function instead of an action object
    return (dispatch) => {
        setTimeout(() => {
            // This function is able to dispatch other action creators
            dispatch(itemsHasErrored(true));
        }, 5000);
    };
}

Now we know what a thunk is, we can write itemsFetchData().

  export function itemsFetchData(url) {
    return (dispatch) => {
        dispatch(itemsIsLoading(true));

        fetch(url)
            .then((response) => {
                if (!response.ok) {
                    throw Error(response.statusText);
                }

                dispatch(itemsIsLoading(false));

                return response;
            })
            .then((response) => response.json())
            .then((items) => dispatch(itemsFetchDataSuccess(items)))
            .catch(() => dispatch(itemsHasErrored(true)));
    };
}

Creating our reducers

With our action creators defined, we now write reducers that take these actions and return a new state of our application.

Note: In Redux, all reducers get called regardless of the action, so inside each one you have to return the original state if the action is not applicable.

Each reducer takes 2 parameters: the previous state (state) and an action object. We can also use an ES6 feature called default parameters to set the default initial state.

Inside each reducer, we use a switch statement to determine when an action.type matches. While it may seem unnecessary in these simple reducers, your reducers could theoretically have a lot of conditions, so if/else if/else will get messy fast.

If the action.type matches, then we return the relevant property of action. As mentioned earlier, the type and action[propertyName] is what was defined in your action creators.

OK, knowing this, let's create our items reducers in reducers/items.js.

  export function itemsHasErrored(state = false, action) {
    switch (action.type) {
        case 'ITEMS_HAS_ERRORED':
            return action.hasErrored;

        default:
            return state;
    }
}

export function itemsIsLoading(state = false, action) {
    switch (action.type) {
        case 'ITEMS_IS_LOADING':
            return action.isLoading;

        default:
            return state;
    }
}

export function items(state = [], action) {
    switch (action.type) {
        case 'ITEMS_FETCH_DATA_SUCCESS':
            return action.items;

        default:
            return state;
    }
}

Notice how each reducer is named after the resulting store's state property, with the action.type not necessarily needing to correspond. The first 2 reducers hopefully make complete sense, but the last, items(), is slightly different.

This is because it could have multiple conditions which would always return an array of items: it could return all in the case of a fetch success, it could return a subset of items after a delete action is dispatched, or it could return an empty array if everything is deleted.

To re-iterate, every reducer will return a discrete property of the state, regardless of how many conditions are inside that reducer. That initially took me a while to get my head around.

With the individual reducers created, we need to combine them into a rootReducer to create a single object.

Create a new file at reducers/index.js.

  import { combineReducers } from 'redux';
import { items, itemsHasErrored, itemsIsLoading } from './items';

export default combineReducers({
    items,
    itemsHasErrored,
    itemsIsLoading
});

We import each of the reducers from items.js and export them with Redux's combineReducers(). As our reducer names are identical to what we want to use for a store's property names, we can use the ES6 shorthand.

Notice how I intentionally prefixed my reducer names, so that when the application grows in complexity, I'm not constrained by having a "global" hasErrored or isLoading property. You may have many different features that could error or be in a loading state, so prefixing the imports and then exporting those will give your application's state greater granularity and flexibility. For example:

  import { combineReducers } from 'redux';
import { items, itemsHasErrored, itemsIsLoading } from './items';
import { posts, postsHasErrored, postsIsLoading } from './posts';

export default combineReducers({
    items,
    itemsHasErrored,
    itemsIsLoading,
    posts,
    postsHasErrored,
    postsIsLoading
});

Alternatively, you could alias the methods on import, but I prefer consistency across the board.

Configure the store and provide it to your app

This is pretty straightforward. Let's create store/configureStore.js with:

  import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from '../reducers';

export default function configureStore(initialState) {
    return createStore(
        rootReducer,
        initialState,
        applyMiddleware(thunk)
    );
}

Now change our app's index.js to include <Provider />, configureStore, set up our store and wrap our app (<ItemList />) to pass the store down as props:

  import React from 'react';
import { render } from 'react-dom';
import { Provider } from 'react-redux';
import configureStore from './store/configureStore';

import ItemList from './components/ItemList';

const store = configureStore(); // You can also pass in an initialState here

render(
    <Provider store={store}>
        <ItemList />
    </Provider>,
    document.getElementById('app')
);

I know, it's taken quite a bit of effort to get to this stage, but with the set up complete, we can now modify our component to make use of what we've done.

Converting our component to use the Redux store and methods

Let's jump back in to components/ItemList.js.

At the top of the file, import what we need:

  import { connect } from 'react-redux';
import { itemsFetchData } from '../actions/items';

connect is what allows us to connect a component to Redux's store, and itemsFetchData is the action creator we wrote earlier. We only need to import this one action creator, as it handles dispatching the other actions.

After our component's class definition, we're going to map Redux's state and the dispatching of our action creator to props.

We create a function that accepts state and then returns an object of props. In a simple component like this, I remove the prefixing for the has/is props as it's obvious that they're related to items.

  const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

And then we need another function to be able to dispatch our itemsFetchData() action creator with a prop.

  const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

Again, I've removed the items prefix from the returned object property. Here fetchData is a function that accepts a url parameter and returns dispatching itemsFetchData(url).

Now, these 2 mapStateToProps() and mapDispatchToProps() don't do anything yet, so we need to change our final export line to:

  export default connect(mapStateToProps, mapDispatchToProps)(ItemList);

This connects our ItemList to Redux while mapping the props for us to use.

The final step is to convert our component to use props instead of state, and to remove the leftovers.

• Delete the constructor() {} and fetchData() {} methods as they're unnecessary now.
• Change this.fetchData() in componentDidMount() to this.props.fetchData().
• Change this.state.X to this.props.X for .hasErrored, .isLoading and .items.

Your component should now look like this:

  import React, { Component } from 'react';
import { connect } from 'react-redux';
import { itemsFetchData } from '../actions/items';

class ItemList extends Component {
    componentDidMount() {
        this.props.fetchData('http://5826ed963900d612000138bd.mockapi.io/items');
    }

    render() {
        if (this.props.hasErrored) {
            return <p>Sorry! There was an error loading the items</p>;
        }

        if (this.props.isLoading) {
            return <p>Loading…</p>;
        }

        return (
            <ul>
                {this.props.items.map((item) => (
                    <li key={item.id}>
                        {item.label}
                    </li>
                ))}
            </ul>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        items: state.items,
        hasErrored: state.itemsHasErrored,
        isLoading: state.itemsIsLoading
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        fetchData: (url) => dispatch(itemsFetchData(url))
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ItemList);

And that's it! The application now uses Redux and Redux Thunk to fetch and display the data!

That wasn't too difficult, was it?

And you're now a Redux master :D

What next?

I've put all of this code up on GitHub, with commits for each step. I want you to clone it, run it and understand it, then add the ability for the user to delete individual list items based on the item's index.

I haven't yet really mentioned that in Redux, the state is immutable, which means you can't modify it, so have to return a new state in your reducers instead. The 3 reducers we wrote above were simple and "just worked", but deleting items from an array requires an approach that you may not be familiar with.

You can no longer use Array.prototype.splice() to remove items from an array, as that will mutate the original array. Dan explains how to remove an element from an array in this video, but if you get stuck, you can check out (pun intended) the delete-items branch for the solution.

I really hope that this has clarified the concept of Redux and Thunk and how you might go about converting an existing React application to use them. I know that writing this has solidified my understanding of it, so I'm very happy to have done it.

I'd still recommend reading the Redux docs, watching Dan's videos, and re-doing Wes' course as you should hopefully now be able to understand some of the other more complex and deeper principles.

we will take a look at examples and discuss how should links looks.

1- Link or anchor tag should explain what's happen if you click on, the user need know where this link goes no one like click on an anonymous link.

Do

<a href="http://www.example.com"> Example || Accessibility Guidelines. </a>

Don't

<a href="http://www.example.com"> Click here || more </a>

2- Don't write "link" word in the link because the screen reader knows the link if you use the anchor tag, screen reader differ from one to other some of them say the "link" before value and other say it after value anyway in finally the screen reader know this is the link.

Do

<a href="http://www.example.com"> Example || Accessibility Guidelines. </a>

Don't

<a href="http://www.example.com"> Example Link || Accessibility Guidelines Link. </a>

3- use semantic element don't change the element behaviour.

Do

<a href="http://www.example.com"> Example || Accessibility Guidelines. </a>

Don't

<span class="act-link"> Act like Link </span>

4- if you used the another element to act like link you should make it accessible you should make it foucs you should make screen reader read it a link you should make it real link.

Do

5- if the link include image, image should explain what's going in alt OR let alt empty and return to num 1.

Do

<a href="http://www.example.com"> <img src="/" alt="example"> </a>

OR

<a href="http://www.example.com"> <img src="/" alt=""> example </a>

6- the blind users don't know if the link open in new window or not so we should make an alert to recognize them to the link will open in new window.

Do

OR

we should take care of small things, we should make the web more accessible and more meaningful.

finally, I made a script to check the issue in your code that's will help you to identify the accessibility issue to fix it a11y-checker

First, I have made a pen to check your stats using the cpv2api:

Then I get the idea to add these informations to my personal website, this is why i created this ultra small library (1Ko)

To use it, a few instructions should be respected:

• Check that jQuery is loaded
• Include the javascript code http://codepen.io/remirobichet/pen/jVrgqO.js

  var name = $("[data-user]").attr("data-user"),
  cploves = 0,
  cpviews = 0;

$.getJSON('http://cpv2api.com/profile/' + name, function(res) {
  if (res.success) {
    $("[data-followers]").text(res.data.followers);
  } else {
    $("[data-followers]").text('error');
  }
});

function getViews(page) {
  var name = $("[data-user]").attr("data-user");
  $.getJSON('http://cpv2api.com/pens/public/' + name + '?page=' + page, function(res) {
    if (res.success) {
      $(res.data).each(function() {
        if (this.views != '') {
          cpviews += parseInt(this.views.replace(',', ''));
        } else {
          $("[data-views]").text('error');
        }
        if (this.loves != '') {
          cploves += parseInt(this.loves);
        } else {
          $("[data-loves]").text('error');
        }
      });
      page++;
      getViews(page);
    }
  });

  $("[data-views]").text(cpviews);
  $("[data-loves]").text(cploves);
}

getViews(1);

• Now you have to add your @username on a data-user attribute wherever you want on your HTML

  <main data-user="remirobichet">

• And finally add the attribute you want (data-followers, data-views, data-loves)

  <p>I have <b data-followers></b> followers on Codepen !</p>

Here is an example of how you can use the library:

Thanks for reading :)

Be nice, I'm not English!

So, below is what we will be making. (If the codepen embed doesn't load, try refreshing the page.)

See the Pen React markdown parser by anuragasaurus (@anuragasaurus) on CodePen.

I have created a component named "TextArea" which is the main and only component. It's state consits of inputValue and parsedValue of markdown input.

  this.state={
    inputValue:"# hello, write some `markdown` here",
    parsedValue:""
}

TextArea renders a input element where we will write in markdown and a div which will display the result. handleChange function keeps the state of component and value in input field in sync.

  handleChange(e) {
    this.setState({
      inputValue: e.target.value,
      parsedValue: marked(e.target.value)
    });
}

I am using a mardown parsing library marked. As input value changes, I pass the input value in marked function which is exposed by "marked" and store it in the this.state.parsedValue.

componentDidMount is a react lifecycle function which is run after component is mounted on screen.

Edit:

I searched for alternative for dangerouslySetInnerHTML but couldn't find one. They named it dangerouslySetInnerHTML to make developer aware of the risk of XSS attack when they use it. To avoid the risk of XSS attack, we can use DOMPurify which sanitizes the html.

Cheatsheet for the most common ARIA Roles and Attributes

HTML elements can only have one role or attribute. Elements which are already semantic do not require additional aria attributes e.g <nav> <button> <header> <footer> <main>

ARIA Roles

Aria roles are applied using the role attribute. e.g. <div role="complementary">

main Main content of the document

banner The main header of the page

navigation Navigation elements

contentinfo copyright information usually applied to an element within the footer tag

complementary Content which is related to the main element

presentation Applied to elements which are used only for presentation

search to be used on search elements

alert to be used on elements which are shown as an alert

button to be used on elements to make them behave like a button. This should be avoided and the button element should be used as extra markup and javascript is required to make a normal link act like a button

combobox, checkbox, listbox and option to be used to create faux form elements

tooltip to be used to specify an element as a tooltip

dialog Used for elements which update the user about an event or action that has occurred for example; <div role="dialog" aria-labelledby="dialogTitle" aria-describedby="dialogDescription"> <h2 id="dialogTitle">Your personal details were successfully updated</h2> <p id="dialogDescription">You can change your details at any time in the user account section.</p> <button>Close</button> </div>

ARIA Attributes

Aria attributes are applied to elements directly (inline) or added to an element using javascript following interaction. These attributes fall into one of two categories; states and properties.

States are likely to change to be updated following an interaction from the user.

Properties are less likely to change such as aria-labelledby and provide additional information to user using assistive technologies.

aria-label to be added to label elements which aren't shown on the page.

aria-controls="ID" aria controls specify an element by ID of which the current element controls

aria-expanded="false" this element can be either true or false and should be updated using javascript when the elements state has changed, example usage would be accordions

aria-labelledby used to provide a label for elements which don't have a native label; <figure aria-labelledby="operahouse_1" role="group"> <img src="operahousesteps.jpg" alt="The Sydney Opera House"> <figcaption id="operahouse_1">We saw the opera <cite>Barber of Seville</cite> here!</figcaption> </figure>

aria-describedby="ID"

aria described by requires an ID to be specified this could be linked to a tooltip for a example when a button has an icon but no text.

aria-checked used to create a faux radio button or checkbox <span role="checkbox" aria-checked="true" tabindex="0" id="simulatedcheckbox"> </span>

aria-hidden used to provide information to the browser about the state of the current element can be set to true or false.