There are a few concepts in CSS layout that can really enhance your CSS game once you understand them. This article is about the Block Formatting Context (BFC). You may never have heard of this term, but if you have ever made a layout with CSS, you probably know what it is. Understanding what a BFC is, why it works, and how to create one is useful and can help you to understand how layout works in CSS.

In this article, I’ll explain what a BFC is through examples which are likely to be familiar to you. I’ll then show you a new value of display, that really only makes sense once you understand what a BFC is and why you might need one.

I've been writing React applications for a few years now, and I've noticed that some patterns tend to repeat themselves. In this post, I'll review these patterns which will summarize about 99% of the React code I write every day.

As a sample spec, let's build an app that fetches information about the Dagobah planet from Star Wars API and shows it to the user.

Simple everyday patterns

About 95% of the code written every day will be either simple view components or components with some logic. This is the first pattern, and it's the easiest one:

The Middle Eastern market is growing at a rapid pace, and, as a result, demand for various IT products is also booming in the region. What is peculiar, though, is that Middle Eastern countries require design that is not only compatible with their needs and comfortable for their users, but that is also suitable to their language standards, making a serious adaptation process very important. Given that most languages spoken in the Middle East are written and read from right to left (such as Arabic, Hebrew and Urdu), developers often face a range of problems when creating products in those languages.

In this tutorial, you’ll start with a very simple React app with a couple of pages and some routing built in, and add authentication using Okta’s Sign-In Widget. The Sign-In Widget is an embeddable Javascript widget that allows developers to use Okta’s secure, scalable architecture with a minimum of effort from within React applications. Let’s get started!

Bootstrap has a way to define grids and rightly place content on it too. This is what is called the Bootstrap grid system.

For more advanced users, It is important to note that you don’t need horizontal or vertical grid lines. With the CSS Grid sprinkled with some CSS magic, you can easily build a non-conventional layout.

The Bootstrap 4 grid is built with Flexbox — which makes it even more powerful than ever before.

Fair warning: this part of Bootstrap tends to suck when you first learn it. But, if you take the time to master the Bootstrap grid system, you’ll find it to be one of the most important Bootstrap knowledge you have.

A "slider", as in, a bunch of boxes set in a row that you can navigate between. You know what a slider is. There are loads of features you may want in a slider. Just as one example, you might want the slider to be swiped or scrolled. Or, you might not want that, and to have the slider only respond to click or tappable buttons that navigate to slides. Or you might want both. Or you might want to combine all that with autoplay.

I'm gonna go ahead and say that sliders are complicated enough of a UI component that it's use JavaScript territory. Flickity being a fine example. I'd also say that you can get pretty far with a nice looking functional slider with HTML and CSS alone. Starting that way makes the JavaScript easier and, dare I say, a decent example of progressive enhancement.

Globally, the media control icons are some of the most universally understood visual language in any kind of interface. A designer can simply assume that every user not only knows ▶️ = play, but that users will seek out the icon in order to watch any video or animation.

jQuery traversing, which means "move through", are used to "find" (or select) HTML elements based on their relation to other elements. Start with one selection and move through that selection until you reach the elements you desire.

jQuery is a very powerful tool which provides a variety of DOM traversal methods to help us select elements in a document randomly as well as in sequential method.

This article is for developers who are familiar with Angular 1.x and would like to learn more about React. We’ll look at the different approaches they take to building rich web applications, the overlapping functionality and the gaps that React doesn’t attempt to fill.

After reading, you’ll have an understanding of the problems that React sets out to solve and how you can use the knowledge you have already to get started using React in your own projects.

Frameworks vs Libraries

Angular is a framework, whereas React is a library focused only on the view layer. There are costs and benefits associated with both using frameworks and a collection of loosely coupled libraries.

In the past, React used to ignore unknown DOM attributes. If you wrote JSX with an attribute that React doesn't recognize, React would just skip it. For example, this:

would render an empty div to the DOM with React 15:

In React 16, we are making a change. Now, any unknown attributes will end up in the DOM:

Why Are We Changing This?

React has always provided a JavaScript-centric API to the DOM. Since React components often take both custom and DOM-related props, it makes sense for React to use the camelCase convention just like the DOM APIs:

This has not changed. However, the way we enforced it in the past forced us to maintain a whitelist of all valid React DOM attributes in the bundle:

Over the last several years, the way I write CSS has transitioned from a very "semantic" approach to something much more like what is often called "functional CSS."

Writing CSS this way can evoke a pretty visceral reaction from a lot of developers, so I'd like to explain how I got to this point and share some of the lessons and insights I've picked up along the way.

Phase 1: "Semantic" CSS

One of the best practices you'll hear about when you're trying to learn how to CSS good is "separation of concerns."

The idea is that your HTML should only contain information about your content, and all of your styling decisions should be made in your CSS.

This is where things diverge based on the design of the loading screen you may want to build. I’ll use mine as an example while trying to keep things general.

Note that this article assumes familiarity with pseudo-elements, CSS animation properties and keyframe animations. If you want a refresher on the latter two, you can find a great one here. And here’s everything you wish to know about pseudo-elements.

Ok, ready?

Before deciding to build it with HTML and CSS only, I had a gif version:

It will serve as a useful baseline for our version. As you can see, there are four steps in the animation:

Sometimes the first bit of HTML we write in a new document is an element that wraps everything else on the page. The term wrapper is common for that. We give it a class, and that class is responsible for encapsulating all visual elements on the page.

I've always struggled to with the best way to implement it. I found a related thread on StackOverflow that has more than 250,000 views, so obviously I'm not the only one wondering! I'll sum up my latest thoughts in this article.

Before we dive into it, let's first examine the difference between the "wrapper" and the "container".

I met Michael Jackson for the first time at React Rally 2016, soon after writing an article on React Router 3. Michael is one of the principal authors of React Router along with Ryan Florence. It was exciting to meet someone who built a tool I liked so much, but I was shocked when he said. "Let me show you our ideas React Router 4, it's way different!" Truthfully, I didn't understand the new direction and why it needed such big changes. Since the router is such a big part of an application's architecture, this would potentially change some patterns I've grown to love. The idea of these changes gave me anxiety. Considering community cohesiveness and being that React Router plays a huge role in so many React applications, I didn't know how the community would accept the changes.

When jQuery was released, one of the main reasons behind its meteoric rise to popularity was the ease with which it could select DOM elements, traverse them and modify their content. But that was way back in 2006. In those days we were stuck with Internet Explorer 7 and ECMAScript 5 was still a couple of years off.

More from this author

Luckily, a lot has changed since then. Browsers have become considerably more standards compliant and native JavaScript has improved in leaps and bounds. And as things have improved, we have seen people questioning

If you are using reproCSS with custom events, you may also optionally use a selector attribute specify a list of one or more CSS selectors you would like to add event listeners for. If no selector attribute is found all custom events will be applied to window.

With all the excitement around CSS Grid, I haven't seen as much talk about the new fr CSS length unit (here's the spec). And now that browser support is rapidly improving for this feature, I think this is the time to explore how it can be used in conjunction with our fancy new layout engine because there are a number of benefits when using it; more legible and maintainable code being the primary reasons for making the switch.

To get started, let's take a look at how we'd typically think of building a grid in CSS. In the example below, we're creating a four column grid where each column has an equal width:

I'm sure most of you understand how you work with a framework like Bootstrap, Foundation, or Materialize. You use their CSS and JavaScript. You also use their chunks of HTML, piecing together and applying classes as needed to do what you need to do.

You're on your own piecing the HTML together. That's good, because it's flexible. People use frameworks like this in all kinds of CMS's and backend systems. But what if you want to apply some structure to this, making actual components out of the components given to you in the framework?

So you’re a React developer and you’ve decided to try out Vue.js. Welcome to the party!

React and Vue are kind of like Coke and Pepsi, so much of what you can do in React you can also do in Vue. There are some important conceptual differences though, some of which reflect Angular’s influence on Vue.

I’ll focus on the differences in this article so you’re ready to jump into Vue and be productive straight away.

The birdview effect is performed using CSS scale transforms on the birdview_child div. To ensure a continuous transition between the current scrolling position and the birdview, the Y origin of the scale transform must be at the vertical midpoint of the viewport.

The vertical midpoint of the viewport is then projected into the document, and a CSS scale transform is applied to the