Monday, April 10, 2017

Web Design Weekly #275

Headlines

How we built Twitter Lite

An awesome insight into what it takes to develop and release one of the most advanced Progressive Web Apps on the internet. Huge props to all involved for making this happen. Inspiring stuff. (blog.twitter.com)

Crazy tool that lets you actually watch your visitors use your site

Truly understand your web and mobile site visitors and make improvements immediately. Try it for free. (hotjar.com)

Articles

Influencing redesign

Ed Chao, a designer at Dropbox, shares some great tips on how to get the daunting task of a complete organisational redesign over the line. If you work at a big company this is a great read. (medium.com)

The invisible parts of CSS

Mike Riethmuller sheds some light on the invisible parts of CSS, touching only on what you need to know and hopefully explaining the process in a logical order, so that you can gain a better understand of how CSS actually works. As always, epically good post. (madebymike.com.au)

Does CSS Grid Replace Flexbox?

If you have used Flexbox a bit and are a little confused how CSS Grid fits into the equation, Robin Rendle explains things in a clear and concise manner to get you up to speed on when to use what. (css-tricks.com)

How To Secure Your Web App With HTTP Headers

In this article, Hagay Lupesko explains how we can leverage HTTP response headers to tighten up the security of our web apps with just a few lines of code. (smashingmagazine.com)

Tools / Resources

DevMountain is the best value 12-week immersive code school in the U.S.

DevMountain takes you from basics to interviews with leading companies in 12 weeks away from the hassle of daily life with FREE accommodation while you learn. (devmountain.com)

Applying Progressive Enhancement on a WebVR project

Arturo Paracuellos shares his workflow for applying Progressive Enhancement in a WebVR project with Three JS. Pretty awesome work to be honest. (unboring.net)

Glamorous

A styled-components and jsxstyle inspired solution for styling React Components from the team at PayPal. The intro blogpost is also worth reading. (github.com)

Michael Taranto – Teaching CSS to talk like a designer (youtube.com)

Setting up multi-platform npm packages (2ality.com)

Inspiration

CSSconf comes to Berlin

After a year-long pause, CSSconf EU is coming back to Berlin. CSS developers from all over the world come together for a 1 day, 1 track conference. Tickets are still available and Berlin is beautiful in May – get yours now. (cssconf.eu)

An Overview of Twitter’s Front-End Architecture. (pusher.com)

My Setup and Tools – Harry Roberts (csswizardry.com)

Confetti Cannon (codepen.io)

Jobs

Product Designer at Zendesk

As a result of our growing operations in the APAC region, we’re now seeking a Product Designer to work alongside a newly formed product team in Melbourne. We are looking for a systems designer that will focus on user management, billing and trial experiences for all Zendesk products. (zendesk.com)

Product Designer at Box

The Box Design Team is growing and we’re looking for a few great Product Designers to join us at our Redwood City H.Q. We’re a small team of full-stack designers building the next generation of cloud collaboration software to accelerate innovation and remove barriers for our customers. (box.com)

Need to find passionate developers or designers? Why not advertise in the next newsletter

Last but not least…

Background Blend Modes (codepen.io)

The post Web Design Weekly #275 appeared first on Web Design Weekly.


by Jake Bresnehan via Web Design Weekly

How to Keep Your Marketing Campaigns Organized

Are you one of the many business owners or marketers who think your product launches are the only time to run marketing campaigns? Every marketing action should be considered a marketing campaign by you and your team. Often, the key to success is consistency — staying organized and analyzing all of your results to make […]

Continue reading %How to Keep Your Marketing Campaigns Organized%


by Rachel McPherson via SitePoint

jQuery.ganttView – Editable jQuery Gantt Chart Plugin

The jQuery.ganttView plugin is a very lightweight plugin for creating a Gantt chart in plain HTML.

No vector graphics or images required. The plugin supports dragging and resizing the Gantt blocks and callbacks to trap the updated data.


by via jQuery-Plugins.net RSS Feed

Editorial: Is It the End of an Era for Windows?

The world of mobile has just passed an important milestone: Android is now the world's most popular operating system for accessing the internet.

Research carried out by analytics firm StatCounter has found that in the month of March 2017, internet usage on Android surpassed internet usage on Windows.

Yet StatCounter's CEO, Aodhan Cullen, was ecstatic: This is a milestone in technology history and the end of an era. [...] It marks the end of Microsoft’s leadership worldwide of the OS market which it has held since the 1980s. It also represents a major breakthrough for Android which held just 2.4% of global internet usage share only five years ago.

Android is indeed making enormous leaps in the wider IT space, seducing millions of new users every year. Android has provided a viable platform for the world to access the internet. The shift to mobile has not been uniform accross the globe: In Europe, Android has just has 23.6% of the market share; in Africa it owns 53.5% (versus 35% for Windows), in Asia, 52.2% (versus 29.2% for Windows).

Continue reading %Editorial: Is It the End of an Era for Windows?%


by Ariel Elkin via SitePoint

Which Java Logging Framework Has the Best Performance?

Java is blessed with three big Java logging frameworks: Java Util Logging, Log4j 2, and Logback. When picking one for your project, did you ever wonder about their performance? After all, it would be silly to slow down the application just because you picked a sluggish logging framework or a suboptimal configuration.

Whenever the subject of logging in Java comes up on Twitter, you can be sure you'll be in for a lot of ranting. This is perhaps best summarised by this tweet from Dan Allen:

https://twitter.com/mojavelinux/status/825144263293943808

There are actually quite a lot of people who are "lucky" enough to remain isolated from the question of logging in Java:

  • Junior developers are typically not empowered with making this type of choice.
  • Intermediate developers are often working on a code base where the choice has already been made.
  • Senior developers can have the choice forced on them by their CTO or some other external decision maker.

Sooner or later, however, you will reach the point where you have to make the choice of logging framework. In 2017 we can break down the choice into 4 options:

  1. Refuse to make a choice and use a logging shim
  2. Use Java Util Logging.
  3. Use Log4j 2.x
  4. Use Logback

Logging Shims

If you are...

  • developing an API
  • developing a shared library
  • developing an application that will be deployed to an execution environment that is not your responsibility (for example a .war or .ear file that gets deployed in a shared application container)

... then the choice of logging framework is not your responsibility and you should use a logging shim.

You would be forgiven for thinking that there is a choice:

  1. Apache Commons Logging
  2. SLF4J

But the Apache Commons logging API is so basic and restricted that the only recommendation is Do not use unless you like to write your logging statements like this:

if (log.isDebugEnabled()) {
    log.debug("Applying widget id " + id + " flange color " + color);
}

Recommendation: SLF4J

Logging Frameworks

If you are developing a microservice, or some other application where you have control over the execution environment, you are probably responsible for selecting the logging framework. There may be cases where you decide to defer picking one by using a logging shim, but you are still going to have to make a choice eventually.

Changing from one logging framework to another is typically a simple search and replace, or worst case a more advanced "structural" search and replace available in more advanced IDEs. If logging performance is important to you, the logging framework's idiomatic logging API will always out-perform a shim and given that the cost of switching is lower than with other APIs, you are probably better off coding direct to the logging framework.

I should also mention that there is a philosophical difference between the frameworks:

  • Java Util Logging comes from the school of thought that logging should be the exception and not the norm.
  • Log4j 2.x and Logback both show their shared heritage, and place importance on performance when logging

All three frameworks are hierarchical logging frameworks that allow for runtime modification of configuration and various output destinations. To confuse users, the different frameworks sometimes use different terminology for the same things, though:

  • Handler vs Appender - these are the same thing, putting the log message into the log file.
  • Formatter vs Layout - these are the same thing, responsible for formatting the log message into a specific layout.

We could make a feature comparison, but in my opinion the only feature worth differentiating on is mapped diagnostic contexts (MDCs), as all other feature differences can be coded around relatively easily. Mapped diagnostic contexts provide a way to enhance the log messages with information that would not be accessible to the code where the logging actually occurs. For example, a web application might inject the requesting user and some other details of a request into the MDC, which allows any log statements on the request handling thread to include those details.

There are some cases where a lack of MDC support may not be as important, for example:

  • In a microservice architecture, there is no shared JVM so you have to build equivalent functionality into the service APIs, typically by explicitly passing the state that would be in the MDC.
  • In a single user application, there typically is only ever one context and typically not much concurrency, so there is less need for MDCs.

We could compare based on ease of configuration. Sadly, all three are equally bad at documenting how to configure logging output. None provide a sample "best-practice" configuration file for common use cases:

  • Sending logging to a log file, with rotation
  • Sending logging to operating system level logging systems, e.g. syslog, windows event log, etc

The information is typically there, but hidden in JavaDocs and couched in such a way as to leave the software engineer or operations engineer wondering if the configuration is compromising the application.

This leaves us with performance.

Logging Framework Performance

Ok, let's benchmark the different logging frameworks then. There is a lot that you can mess up when trying to write micro-benchmarks in Java. The wise Java engineer knows to use JMH for micro-benchmarking.

One of the things that is often missed in logging benchmarks is the cost of not logging. In the ideal world, a logging statement for a logger that is not going to log should be completely eliminated from the execution code path. One of the features of a good logging framework is the ability to change logging levels of a running application. In reality we need at least a periodical check for a change in the logger's level, so we cannot have the logging statement completely eliminated.

Another aspect of logging benchmarks, is selective configuration. Each of the different logging frameworks come with their own different default output configuration. If we do not configure all the loggers to use the same output format, we will not be comparing like with like. Conversely, some logging frameworks may have special case optimisations that work for specific logging formats which could distort the results.

So here are the cases we want to test:

  • logging configured to not log
  • logging configured to output in the Java Util Logging default style
  • logging configured to output in the Log4j 2.x default style
  • logging configured to output in the Logback default style

We will just look at the performance writing the logs to a rolling log file. We could test performance of things like syslog handlers / appenders or logging to the console, but the risk there is that there is some additional side-effects from the external system (syslogd or the terminal) may compromise the test.

The source code for the benchmarks is available on GitHub.

Structure of the Benchmark

Each benchmark is essentially the following:

@State(Scope.Thread)
public class LoggingBenchmark {
    private static final Logger LOGGER = ...;
    private int i;

    @Benchmark
    public void benchmark() {
        LOGGER.info("Simple {} Param String", new Integer(i++));
    }
}

  • The reference to the logger is stored as a static final field.
  • Each thread has independent state i. This is to prevent false sharing accessing the state field.
  • In order to prevent optimization of the string concatenation, the parameter is mutated with each invocation of the benchmark method.
  • The construction with new Integer(i++) is necessary to counteract the autoboxing cache. Because i is very rarely in the range -128..127, we need to use explicit boxing as the implicit Integer.valueOf(int) would pollute the benchmark results with checking the cache and we expect a cache miss.

JMH provides a number of different modes to run in, the two we are most interested in are:

  • Throughput mode - which measures how many calls to the target method can be completed per second. Higher is better.
  • Sample mode - which measures how long each call takes to execute (including percentiles). Lower is better.

The Point of the Strawman

When benchmarking and comparing differences between vendors it can sometimes be helpful to know how far performance can be pushed. For this reason, my benchmarks contain a number of different strawman implementations. In the graphs that follow, I have selected the best strawman for each scenario. In providing the strawman, my aim is not to attack the performance of the different vendor solutions. My aim is to provide a context within which we can compare the performance of the different logging frameworks.

My strawman shows as high a performance as I could achieve to perform the equivalent operation. The cost of this higher performance is the loss of general utility. By providing the strawman, however, we can see what the test machine is capable of.

By way of an example, the strawman for logging to nowhere does the following:

  • Sets up a background daemon thread that wakes up once every second and sets an enabled field based on the presence of a file that does not exist.
  • Each log statement checks the enabled field and only if true will it proceed to log.

It would be easy to just have an empty log statement that didn't even check an enabled field, but the JVM would inline that empty method and completely remove the logging. If we didn't have the background thread periodically writing to the field (the fact that it will always write false is unknowable to the JVM) then the JVM could conclude that nobody will ever write to that field and inline the resulting constant condition. Where the strawman can gain performance, for this case, is by dropping hierarchical configuration.

The other strawman implementations all have to write the same format log messages and the performance gains are from hard-coding the log formatter / layout for things like the date formatting and string concatenation. The strawmen all parse the parameterized logging message and format that on the fly, but without some of the safety checks of the frameworks.

Benchmark Results

Continue reading %Which Java Logging Framework Has the Best Performance?%


by Stephen Connolly via SitePoint

Learning JavaScript Test-Driven Development by Example

You're probably already familiar with automated testing and its benefits. Having a set of tests for your application allows you to make changes to your code with confidence, knowing that the tests have your back should you break anything. It's possible to take things a step further and write your tests before you write the code; a practice known as Test-driven development (TDD).

In this tutorial, we will talk about what TDD is and what benefits it brings to you as a developer. We'll use TDD to implement a form validator, which ensures that any values input by the user conform to a specified set of rules.

What is TDD?

Test-driven development is a programming methodology with which one can tackle the design, implementation, and testing of units of code, and to some extent the expected functionality of a program.

Complementing the test-first approach of Extreme Programming, in which developers write tests before implementing a feature or a unit, TDD also facilitates the refactoring of code; this is commonly referred to as the Red-Green-Refactor Cycle.

The red-green-refactor cycle associated with test-driven development

  • Write a failing test - write a test that invokes your logic and assert that the correct behavior is produced

    • In a unit test, this would be asserting the return value of a function or verifying that a mocked dependency was called as expected
    • In a functional test, this would be ensuring that a UI or an API behaves predictably across a number of actions
  • Make the test pass - implement the minimum amount of code that results in the test passing, and ensure that all other tests continue to pass

  • Refactor the implementation - update or rewrite the implementation, without breaking any public contracts, to improve its quality without breaking the new and existing tests

I've used TDD to some extent since I was introduced to it at the beginning of my career, but as I have progressed to working on applications and systems with more complex requirements, I have personally found the technique to be time-saving and conducive to the quality and robustness of my work.

Before proceeding, it might be worth familiarizing yourself with some of the various types of automated tests that can be written. Eric Elliot summarises them well:

  • Unit tests - ensure that individual units of the app, such as functions and classes, work as expected. Assertions test that said units return the expected output for any given inputs
  • Integration tests - ensure that unit collaborations work as expected. Assertions may test an API, UI, or interactions that may result in side-effects (such as database I/O, logging, etc…)
  • End-to-end tests - ensure that software works as expected from the user’s perspective and that every unit behaves correctly in the overall scope of the system. Assertions primarily test the user interface

Benefits of Test-Driven Development

Immediate test coverage

By writing test cases for a feature before its implementation, code coverage is immediately guaranteed, plus behavioral bugs can be caught earlier in the development lifecycle of a project. This, of course, necessitates tests that cover all behaviors, including error handling, but one should always practice TDD with this mindset.

Refactor with confidence

Referring to the red-green-refactor cycle above, any changes to an implementation can be verified by ensuring that the existing tests continue to pass. Writing tests that run as quickly as possible will shorten this feedback loop; while it's important to cover all possible scenarios, and execution time can vary slightly between different computers, authoring lean and well-focused tests will save time in the long term.

Design by contract

Test-driven development allows developers to consider how an API will be consumed, and how easy it is to use, without having to worry about the implementation. Invoking a unit in a test case essentially mirrors a call site in production, so the external design can be modified before the implementation stage.

Avoid superfluous code

As long as one is frequently, or even automatically, running tests upon changing the associated implementation, satisfying existing tests reduces the likelihood of unnecessary additional code, arguably resulting in a codebase that's easier to maintain and understand. Consequently, TDD helps one to follow the KISS (Keep it simple, stupid!) principle.

No dependence upon integration

When writing unit tests, if one is conforming to the required inputs, then units will behave as expected once integrated into the codebase. However, integration tests should also be written to ensure that the new code's call site is being invoked correctly.

For example, let's consider the function below, which determines if a user is an admin:

'use strict'

function isUserAdmin(id, users) {
    const user = users.find(u => u.id === id);
    return user.isAdmin;
}

Rather than hard code the users data, we expect it as a parameter. This allows us to pass a prepopulated array in our test:

const testUsers = [
    {
        id: 1,
        isAdmin: true
    },

    {
        id: 2,
        isAdmin: false
    }
];

const isAdmin = isUserAdmin(1, testUsers);
// TODO: assert isAdmin is true

This approach allows the unit to be implemented and tested in isolation from the rest of the system. Once there are users in our database, we can integrate the unit and write integration tests to verify that we are correctly passing the parameters to the unit.

Test-Driven Development With JavaScript

With the advent of full-stack software written in JavaScript, a plethora of testing libraries has emerged that allow for the testing of both client-side and server-side code; an example of such a library is Mocha, which we will be using in the exercise.

A good use case for TDD, in my opinion, is form validation; it is a somewhat complex task that typically follows these steps:

  1. Read the value from an <input> that should be validated
  2. Invoke a rule (e.g. alphabetical, numeric) against said value
  3. If it is invalid, provide a meaningful error to the user
  4. Repeat for the next validatable input

There is a CodePen for this exercise that contains some boilerplate test code, as well as an empty validateForm function. Please fork this before we start.

Our form validation API will take an instance of HTMLFormElement (<form>) and validate each input that has a data-validation attribute, the possible values of which are:

  • alphabetical - any case-insensitive combination of the 26 letters of the English alphabet
  • numeric - any combination of digits between 0 and 9

We will write an end-to-end test to verify the functionality of validateForm against real DOM nodes, as well as against the two validation types we'll initially support. Once our first implementation works, we will gradually refactor it by writing smaller units, also following TDD.

Continue reading %Learning JavaScript Test-Driven Development by Example%


by James Wright via SitePoint

Moon – Minimal, Blazing Fast UI Library

Moon is a simple front end javascript library heavily inspired by Vue. The library is fast, flexible, and easy to learn

Features

  • Small file size
  • Blazing fast performance
  • Intuitive, easy-to-learn API
  • Powerful directives
  • Compose with Components

by via jQuery-Plugins.net RSS Feed