What the …? By default, the new iPhone X in landscape mode will contain sites in the so called “safe area”, resulting in white bars being rendered on either side of the site (src). The color, white by default, can be tweaked by altering the background-color on the <body> element. Do note that it’s only …
Category Archives: Original Content
Silex Routing vs Trailing Slashes
In Silex-based projects I always define my routes with a trailing /. When defining a route with a trailing slash, the router will respond to both the route without and with slash: $app->get(‘/hello’, …); will respond to http://localhost/hello but not to http://localhost/hello/ $app->get(‘/hello/’, …); will respond to http://localhost/hello and to http://localhost/hello/ Unfortunately this only works …
ESNext Proposal: The Pipeline Operator
The pipeline operator is essentially a useful syntactic sugar on a function call with a single argument. In other words, sqrt(64) is equivalent to 64 |> sqrt. This allows for greater readability when chaining several functions together. With the Pipeline Operator, one could rewrite this … let result = exclaim(capitalize(doubleSay(“hello”))); … to this (think Unix …
Masonry Layout with CSS Grid and grid-auto-flow: dense;
By setting grid-auto-flow: dense;, the Grid auto-placement algorithm will attempt to fill in holes earlier in the grid if smaller items come up later, resulting in a Masonry-like layout. (click for demo) (via) 💁♂️ Do note that the result isn’t 100% masonry, but masonry-like. As Rachel Andrew – who else – notes: At first glance …
Continue reading “Masonry Layout with CSS Grid and grid-auto-flow: dense;“
Vertical margins/paddings and Flexbox, a quirky combination
In CSS, percentage-based paddings are – as per spec – calculated with respect to the width of an element. However, for flex items (e.g. items whose parent have display: flex; applied) that’s not always the case. Depending on which browser you are using the percentage-based padding of a flex item will be resolved against its …
Continue reading “Vertical margins/paddings and Flexbox, a quirky combination”
Shipping ES6 ES2015 Modules to Browsers
UPDATE 2017.09.13: Deploying ES2015+ Code in Production Today also provides a good writeup on this subject. Good workflow fleshed out by Sam Thorogood on using ES2015/ES6 modules with browsers that support, whilst also keeping older browsers (that don’t support it) happy. The modules Let’s take these 2 simple modules for example: // main.js import {x} …
What’s new in JavaScript? ES2017 Language Features
The ECMAScript 2017 Language Specification – the 8th edition of the spec – was officially released at the end of June by TC39. 💁♂️ ICYWW: Should we say ES2017 or ES8? → Say ES2017. Back in the day ES6 was (and still is) used a lot to refer to ES2015, but one should be referring …
Continue reading “What’s new in JavaScript? ES2017 Language Features”
Chrome DevTools’ Command Menu
Something I learnt via Umar Hansa‘s great DevTools Tips is that the Chrome DevTools sport a Command Menu. By hitting SHIFT+CMD+P (same shortcut as Sublime Text’s command menu BTW) you can open it. Thanks to fuzzy matching you can easily access things in it. Chrome DevTools: UI: Command Menu → Umar Hansa’s Twitter Account is …
Changing SVG path data with CSS
Another thing I learned at CSS Day is that it’s possible to alter SVG path data – which is to be found in its d attribute – using CSS. As Chris Coyier demoed, one can overwrite the SVG’s path in CSS by using the (underdocumented) d property. As long as the paths match up (i.e. …
Breaking Elements out of Their Containers in CSS
A common thing to see in a design are visuals that break out of the main content column. You most likely have already seen this kind of design over at Medium for example, where it’s common for the main visual to be full width (or “full bleed”), whilst the content remains centered. Your typical Medium …
Continue reading “Breaking Elements out of Their Containers in CSS”