Markus Oberlehner

Blog Page 22

The Ultimative Flexbox Based CSS Layout

Things are looking good on the CSS layout front. Flexbox can be used in all major browsers and CSS Grid Layout is almost at a point where browser support has reached a sweet spot – for some of us it might even be feasible to build production websites using CSS Grid Layout and some form of graceful fallback. Until the rest of us can finally switch to CSS Grid Layout, we have to rely solely on Flexbox to satisfy all our layout needs. But that's not a bad thing at all, Flexbox is pretty powerful by itself already...

Unit Testing Vue.js Single File Components with ava

Testing Vue.js components is different from testing regular JavaScript modules or classes in two ways. First of all Vue.js components depend on Vue.js, its global state and oftentimes on plugins like Vuex or the vue-router. Second, Vue.js single file components usually are compiled with webpack, the regular workflow of using Babel to compile JavaScript code before testing it, is not sufficient in this case. Let's find out how to deal with those challenges...

Acceptance Testing with Nightwatch.js and Cucumber.js Part 2: Smart Step Definitions

In an ideal world, it should be possible to write basic acceptance test specifications without having to add any new step definitions. In the real world this is not always possible, because some features, with some very specific functionality, might need special treatment and are impossible to test without writing custom step definitions...

Acceptance Testing with Nightwatch.js and Cucumber.js Part 1: Setup

Nightwatch.js is battle-tested and has proven to be a potent tool in the utility belt when it comes to conducting end-to-end tests. The combination of Nightwatch.js and Cucumber.js enables the writing of robust automated acceptance tests in plain language (Gherkin) so that every project stakeholder can read and understand the test definitions...

Setting up a PWA with Vue, Vue Router and webpack Code Splitting

Today we will create a progressive web app (PWA) based on Vue.js with Vue Router, featuring code splitting with webpack. Luckily, building progressive web apps has never been easier. Thanks to the hard work of many wonderful people in the open source community, every major JavaScript framework comes with an effortless way of kickstarting a new PWA powered project via a simple CLI command...

CSS Selector Namespaces for Stable Acceptance Tests

Today we're going to look at the approach of using CSS selector namespaces to help us with detecting changes which have to be considered in the tests. Using separate selectors for testing also leads to a more stable way of structuring our code without tightly coupling our tests with the markup and CSS styles of the implementation...

Don't Make Things More Complicated as They Are

Yesterday I learned a valuable lesson on how to solve a problem by looking at it from a different angle. The longest open issues in the node-sass-magic-importer GitHub issue queue, is about source map support...

Payment Request API Part 3: Taxes and Discounts

Today we're going to implement taxes and discounts into our Payment Request API powered checkout process. The code is based on the code we've produced in the previous steps...

Payment Request API Part 2: Building a Shopping Cart

The first article of this three-part series was about building a very basic checkout process using the Payment Request API. In this article we're going to build a basic shopping cart implementation followed by a Payment Request API powered checkout process...