On Twelve Days of Front End Testing, Amy Kapernick shows twelve testing tools that cover several aspects of front end testing, such as visual regressions, accesibility, performance, etc.
Category: Web Development
React lifecycle diagrams
React lifecycle diagrams – pretty useful to understand the sequence in which every method is invoked when a React component is created or updated. Check the official docs on React.Component for more details.
Goodbye controllers, hello request handlers
Request handlers are a different, simpler way to structure a PHP app leveraging the __invoke() magic method to create truly single-responsibility classes.
Does javascript guarantee object property order?
Does Javascript guarantee object property order? No. Or… actually, not always
Registering custom URLs with custom templates in WordPress (without using page templates)
It’s fairly common to find yourself on a situation where you want to use a specific URL to show a custom content (perhaps something an archive page with two different custom post types), and think: “well, that’s easy. I’ll just create a page to register the URL and a custom page template where I’ll query the contents I need”.
Well, it turns out that there’s a better way of doing this using rewrites and hooking into the right WordPress’ filters — which, by the way, it’s the recommended way to do it by the WordPress VIP team.
Let’s check this technique with an example.
Filtering active menu element class on WordPress
When using a navigation menu on WordPress, you’ve probably seen the various HTML classes that are added on active elements, such as current-menu-item, current-menu-parent, current-menu-ancestor…
While that kind of classes are fine if you must fully reflect the navigation hierarchy on the menu element, there are some times that you just need a more simple approach, such as just knowing when a certain menu element must look like the active item —for instance, when using Bootstrap.
For these kind of situations, you can use a simple filter to add such a class; something like:
<?php
add_filter('nav_menu_css_class', function ($classes, $item, $args, $depth) {
// filter by some condition... for instance, only on the "main" menu
if ( $args->theme_location !== 'main' ) {
return $classes;
}
// all the different "active" classes added by WordPress
$active = [
'current-menu-item',
'current-menu-parent',
'current-menu-ancestor',
'current_page_item'
];
// if anything matches, add the "active" class
if ( array_intersect( $active, $classes ) ) {
$classes[] = 'active';
}
return $classes;
}, 10, 4);
Why some apps use fake progress bars
Why some apps use fake progress bars — a brilliant example of how psychological factors influence design, trading efficiency and speed for trust.
Let’s talk about usernames
Usernames are a much, much harder problem than what you might think at first glance… even if you can get away with a really simple and naive implementation on a prototype, a large, global and secure service must consider lots of not-so-obvious details and possible attack vectors.
Let’s talk about usernames deals with the problem with uniqueness, homograph attacks, confusables and other security concerns that you might need to consider.
In Praise of Theory in Design Research: How Levi-Strauss Redefined Workflow
It is now well known that people use technology in unexpected ways (at least, in ways that software engineering and product teams had not intended) […] Our original charge was to find ways to improve and optimize users’ browser workflows following software and design-oriented assumptions. Instead, we saw that users were doing just fine with the tools they were already using.
In Praise of Theory in Design Research: How Levi-Strauss Redefined Workflow
Control HTTP 301 redirects caching
HTTP redirects should be your tool of choice when you’re reorganizing or renaming key sections of your site on order to keep visitors from hitting a not found page and make search engines update their location and keep their ranking.
However, sometimes you might run into a situation when you need to update a redirect, only to find out that the redirection it’s aggressively cached by your browser (specially Chrome).
So, how can you avoid (or at least, control) the way that redirects are cached?