Claudio Brandolino cbrandolino

A function is a machine. In most of your future work, you'll be working with functions you didn't write and probably won't have time to read. You'll put something in it; it will you something else back. What happens inside the machine should not be of your concern, as long as you get back what you want.

Let's pretend we have a function that does long drinks, defined as follows:

function makeLongDrink(liquour, mixer, garnish) {
  var result = "here's a glass of " + liquour;
  result += " and " + mixer;
  result += " garnished with a slice of " + garnish; 
  return glass;

Div-by-div sliding page change

Someone asked on this group https://www.facebook.com/groups/webdeveloperitaliani/permalink/1012941225452415/ how to create a transition akin to the one on the Goldman Sachs homepage (http://www.goldmansachs.com/).

Here's a pure-css solution (not general nor super elegant but I only had 20min to spare).

A Pen by Claudio Brandolino on CodePen.

License.

taken from https://github.com/bobbydavid/dag-visualization at 6/22/13.

The algorithm is:

Create a random DAG (topographically sorted).

Determine X-positions. For each node, find it's minimum X-position. Then, in reverse order, find the maximum X-position of nodes that can be moved forward.

Determine Y-positions. For each node, place it as near as possible to the mean Y-position of its parents. Give preference to placing nodes that have a single parent with a single child (a 1-1 relationship), so that these will always be shown in a straight line.

REACT

What is wrong with this component?

  class MyComponent extends React.Component {

    getInitialState() {
      return { clickable: false };
 }

	// Executes callback after loading all images defined by imageHash
	// Uses underscore.js

	var preloadImages = function(imageHash, callback) {
	var totalImages = _.size(imageHash)
	var images = {}
	var loadImage = function(imageUrl, key) {

	var img = new Image()
	img.src = imageUrl

	From the consumer-facing site, after clicking on 'jobs' you'd end up here: https://jobs.zalando.de/en/ .

	The four action buttons are pretty indistinguishable, and the white-on-orange small serif font is difficult
	to work out even on a retina display, and for some reason it contains the actual info while the title is
	noisy copy - so I just clicked on the first ("check all vacancies") link I managed to read.

	At that point the other buttons disappeared, so even after thinking I made a mistake I wasn't able to
	quickly see what the alternatives were.

	At any rate neither me nor a friend I asked to try and find tech jobs did realise that "check all vacancies"