This release contains many breaking changes due to the deletion of deprecated targets. We are currently working on a tool that will help migrate your app if you are affected by these changes. We expect to have the tool ready when we release version 6.0.0.

typography: The $mat-font-family variable has been removed. Use the Material typography or redeclare in your project $mat-font-family: Roboto, 'Helvetica Neue', sans-serif;.

datepicker:MatDatePicker now requires an animations module to be loaded

datepicker:selectedChanged has been removed. Use dateChange or dateInput from MatDatepickerInput

This can be useful, for example if you wish to translate the pseudo class content texts (e.g. when using them for tooltips). Currently attr() is supported for content property and almost no browser supports it for other properties, but perhaps they will in the future. Furthermore, the values from attr() are strings, so it really was only meant to be used for content in the first place and can’t be used for units (e.g. font-size) or urls (e.g. content: url() ). Talking of which:

Content: url()This can be used for many types of media (image, sound, video).

HTML 5.2 has introduced a new <dialog> element for native modal dialog boxes. At first glance, it seems fairly straightforward (and it is), but as I’ve been playing around with it, I’ve found it has some nice features that might be easy to miss.

I’ve embedded a full working demo at the end of this article, but if you want to check it out as you read along, you can see it here.

Here is the markup for a basic dialog box:

<dialog open> Native dialog box! </dialog>

The open attribute means that the dialog is visible. Without it, the dialog is hidden until you use JavaScript to make it appear. Before any styling is added, the dialog renders as follows:

My previous article, The web began dying in 2014, here’s how, raised much more awareness than I thought it would. Many people found it to be an insightful analysis of the web under the control of tech giants, but the article ended without providing anything positive to hold on to.

I actually have hope for the web. There are legitimately viable ways of preserving freedom on the web while taking the platform forward and keeping it competitive against proprietary alternatives from tech giants. But it can only happen if the web takes a courageous step towards its next level. If it stays in its current form, the web has little chance of being relevant while America’s

Last month, we made it easier for you to keep track of the projects your code depends on with the dependency graph, currently supported in Javascript and Ruby. Today, for the over 75 percent of GitHub projects that have dependencies, we’re helping you do more than see those important projects. With your dependency graph enabled, we’ll now notify you when we detect a vulnerability in one of your dependencies and suggest known fixes from the GitHub community.

How to start using security alerts

Whether your projects are private or public, security alerts get vital vulnerability information to the right people on your team.

I have tried many ways for setting up a scalable way to create modals with React and Redux. The approach that I ended up using is basically a tweaked version from a Stackoverflow answer from Dan Abramov’s

Creating modals in React is pretty simple, many solutions implement React Portals but I think rendering a Modal outside of the application container is overkill, we use a ModalRoot container which we render in our application container instead.

So I talk here about a solution that is scalable, testable and simple. It requires some boilerplate code to setup but it’s worth it in the long run.

The most popular approach to testing React components is to use either Mocha+Chai+Enzyme or Jest+Enzyme. In this article, we will describe our React components testing practices with Jest+Enzyme which are also applicable to Mocha+Chai.

If you are new to testing React components you should read also:

In larger JavaScript projects we put tests close to implementation in __tests__ subfolder. Usually, tests for a component are grouped by structure and behaviour is added on top of it, like:

Minimal component tests verify that the component renders properly aka smoke testing or “Build Verification Testing”. It can be done with Enzyme: