what3words is a really simple way to talk about location. We have divided the world into a grid of 3m x 3m squares and assigned each one a unique 3 word address. It means anyone can accurately find any location and share it more quickly, easily and with less ambiguity than any other system. The […]
Tag Archives: link
CSS Grid: Floor Plan
Another CSS Grid Layout by Olivia NG. Be sure to check more CSS Grid Layouts in her CSS Grid Experiments collection on CodePen. Some nce CSS Grid: Floor Plan →CSS Grid Experiments Collection →
CraftQL – A drop-in GraphQL server for Craft CMS
CraftQL is a drop-in GraphQL server for your Craft CMS implementation. With zero configuration, CraftQL allows you to access all of Craft’s features through a familiar GraphQL interface. ❓ Unfamiliar with GraphQL? Earlier today Ryan Glover (Ponyfoo) posted a great introduction to it. In the admin interface you get a GraphiQL interface, and the ability […]
Combining position: sticky; with overflow: scroll;
Figure: position: sticky; and overflow: scroll;, a quirky combination … but it can be fixed! Dannie Vinther: Say we want an overflowing table of columns and rows with sticky headings on a page. We want the headings to stick while scrolling on the document window, and we want to be able to scroll horizontally within […]
Browse the web like it’s 1990: CERN 2019 WorldWideWeb Rebuild
Figure: WorldWideWeb, with the homepage of bram.us loaded Today the web turned 30. Perfect time to mention that back in February a small team of people have worked on a rebuild of the original WorldWideWeb application – the world’s first browser – which was used to access the web back then. In December 1990, an […]
Using the <details> element to create modals and menus
The folks over at GitHub have been leveraging the <details> element to create modals and menus: <details class=“dropdown”> <summary class=“btn” aria-haspopup=“menu”>…</summary> <ul class=“dropdown-content”> <li><a href="/muan">profile</a></li> … </ul> </details> Very clever, as <details> trumps the <modal> element in many ways: Semantic Accessible No JavaScript Next to that, they’ve also released a few custom elements that make […]
React Hook Flow Diagram
Donovon has created this nice flowchart that explains the new lifecycle of a Hooks component. Comes in handy 😉 hook-flow →
Making sense of React’s useEffect
Today Dan Abramov published an extensive deep dive into useEffect. The issue that many devs (who, including me, have been using componentDidMount before) are having, is that they now need to unlearn a few things It’s only after I stopped looking at the useEffect Hook through the prism of the familiar class lifecycle methods that […]
JavaScript “loose” comparison, step by step
This handy tool visualizes loose comparison (==) in JavaScript works: Below you can provide two values to compare, and see which steps of the “Abstract Equality Algorithm” as defined in Section 7.2.14 of the ECMAScript specification are executed. JavaScript “loose” comparison, step by step → Related: Equality in JavaScript Javascript : The Curious Case of […]
php-timecop – A PHP extension providing “time travel” capabilities
Now this looks handy, especially when you’re writing/testing code that’s dependent on the system’s time: php-timecop is a PHP extension providing “time travel” and “time freezing” capabilities Freeze time to a specific point. Travel back to a specific point in time, but allow time to continue moving forward from there. Scale time by a given […]